/* =============================================================================
 * Temas livres — 1º Congresso de Anestesiologia da Bahia 2026
 *
 * Carregado DEPOIS de congresso-2026.css e apenas ACRESCENTA o que a submissão
 * precisa: textarea (o fluxo de inscrição não tem nenhuma), blocos de trabalho
 * e de autores, lista de trabalhos e faixa de protocolo.
 *
 * Não redefine nada do congresso: paleta, botões, etapas, mensagens, hero e
 * rodapé continuam vindo de lá, para as duas telas serem visivelmente a mesma
 * coisa.
 * ========================================================================== */

/* -----------------------------------------------------------------------
 * Textarea, no mesmo desenho dos inputs do congresso
 * --------------------------------------------------------------------- */

.cab-form textarea {
    width: 100%;
    border: 1px solid var(--cab-line);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    color: var(--cab-ink);
    background: var(--cab-white);
    resize: vertical;
}

.cab-form textarea:focus {
    outline: 2px solid var(--cab-blue-bright);
    outline-offset: 1px;
}

#tlTitulo {
    font-weight: 600;
    resize: none;
}

/* O painel da submissão é mais alto que o da inscrição: o formulário do
   trabalho é longo por natureza. */
.tl-shell .cab-panel {
    max-height: none;
}

/* -----------------------------------------------------------------------
 * Topo do painel: identificação do evento + botão Sair
 *
 * O link de sair no pé da lista continua existindo, mas quem está no meio do
 * formulário não o vê sem rolar. Este botão fica sempre à vista.
 * --------------------------------------------------------------------- */

.tl-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.tl-topo .cab-panel__evento {
    flex: 1;
    min-width: 0;
    border-bottom: 0;
    padding-bottom: 0;
}

/* A borda que o .cab-panel__evento tinha passa para o contêiner, para a linha
   atravessar a largura toda incluindo o botão. */
.tl-topo {
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cab-line);
}

.cab-shell.is-intro .tl-topo {
    display: none;
}

.tl-sair {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 8px 14px;
    border: 1px solid rgba(180, 35, 24, .35);
    border-radius: 999px;
    background: var(--cab-white);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--cab-danger);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.tl-sair:hover {
    background: rgba(180, 35, 24, .07);
    border-color: var(--cab-danger);
}

.tl-sair:focus-visible {
    outline: 2px solid var(--cab-danger);
    outline-offset: 2px;
}

.tl-sair svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

/* -----------------------------------------------------------------------
 * Blocos: "o trabalho" x "identificação dos autores"
 *
 * A separação visual carrega a regra que a coordenação pediu — o avaliador
 * recebe um bloco e não o outro. A borda lateral colorida é o que faz a
 * distinção ser lida de relance, sem precisar reler o aviso.
 * --------------------------------------------------------------------- */

.tl-bloco {
    margin-top: 22px;
    padding: 16px 18px 20px;
    border-radius: 14px;
    border: 1px solid var(--cab-line);
    background: var(--cab-white);
}

.tl-bloco--trabalho {
    border-left: 4px solid var(--cab-ocean);
}

.tl-bloco--autores {
    border-left: 4px solid var(--cab-gold);
    background: var(--cab-soft);
}

.tl-bloco__cabecalho {
    margin-bottom: 6px;
}

.tl-bloco__cabecalho h4 {
    margin: 0 0 4px;
    font-size: 17px;
    color: var(--cab-navy);
}

.tl-bloco__nota {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--cab-muted);
}

.tl-bloco__nota--ok {
    color: var(--cab-ocean);
}

.tl-bloco__nota--alerta {
    color: var(--cab-bronze);
}

.tl-bloco__nota strong {
    font-weight: 700;
}

/* Contador de caracteres. Fica discreto por padrão, avisa em âmbar quando está
   chegando perto e fica vermelho quando passou.

   O texto NUNCA é cortado: quem passou do limite continua com tudo o que
   escreveu e o rascunho é salvo normalmente — o que fica bloqueado é só o
   envio, até a própria pessoa reduzir. */
.tl-contador {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--cab-muted);
    text-align: right;
    transition: color .15s ease;
}

.tl-contador.is-proximo {
    color: var(--cab-bronze);
    font-weight: 600;
}

.tl-contador.is-excedido {
    color: var(--cab-danger);
    font-weight: 700;
}

/* Campo acima do limite: borda vermelha, para o problema ser visível sem ler o
   contador. */
.cab-form textarea.is-excedido,
.cab-form input.is-excedido {
    border-color: var(--cab-danger);
    border-width: 2px;
    background: rgba(180, 35, 24, .03);
}

.cab-form textarea.is-excedido:focus,
.cab-form input.is-excedido:focus {
    outline-color: var(--cab-danger);
}

/* Botão de envio desabilitado enquanto houver campo acima do limite. */
.tl-acoes .cab-primary[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

/* Aviso agregado logo acima dos botões, dizendo exatamente o que falta. */
.tl-limite-aviso {
    margin: 18px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    border-left: 4px solid var(--cab-danger);
    background: rgba(180, 35, 24, .07);
    font-size: 13px;
    line-height: 1.5;
    color: var(--cab-danger);
}

.tl-limite-aviso strong {
    font-weight: 700;
}

/* -----------------------------------------------------------------------
 * Caixa de seleção (continuar conectado)
 * --------------------------------------------------------------------- */

.tl-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px !important;
    font-size: 13px;
    font-weight: 400 !important;
    line-height: 1.45;
    color: var(--cab-muted);
    cursor: pointer;
}

.tl-checkbox input {
    width: 18px !important;
    min-height: 0 !important;
    height: 18px;
    margin: 1px 0 0;
    padding: 0;
    flex-shrink: 0;
    accent-color: var(--cab-ocean);
    cursor: pointer;
}

/* -----------------------------------------------------------------------
 * Autores
 * --------------------------------------------------------------------- */

.tl-autores {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}

.tl-autor {
    margin: 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--cab-line);
    border-radius: 12px;
    background: var(--cab-white);
}

.tl-autor__legenda {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 0;
    margin-bottom: 4px;
}

.tl-autor__papel {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cab-blue);
}

.tl-autor--relator .tl-autor__papel {
    color: var(--cab-bronze);
}

.tl-autor__remover {
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--cab-danger);
    cursor: pointer;
    text-decoration: underline;
}

.tl-autor__remover:hover {
    text-decoration: none;
}

.tl-autor__linha {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
}

.tl-autor__campo {
    min-width: 0;
}

.tl-autor__campo--nome {
    grid-column: 1 / -1;
}

/* As "bolinhas" de apresentador e de orientador ficam alinhadas com o campo de
   nome, para ficar claro que pertencem àquela pessoa. */
.tl-autor__campo--apresentador,
.tl-autor__campo--marcacoes {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 12px;
}

.tl-autor__linha:first-of-type {
    grid-template-columns: minmax(0, 1fr) auto;
}

.tl-autor__linha:first-of-type .tl-autor__campo--nome {
    grid-column: auto;
}

.tl-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--cab-line);
    border-radius: 999px;
    background: var(--cab-white);
    font-size: 13px;
    font-weight: 600;
    color: var(--cab-muted);
    cursor: pointer;
    white-space: nowrap;
}

.tl-radio input {
    width: 18px;
    min-height: 0;
    height: 18px;
    margin: 0;
    padding: 0;
    accent-color: var(--cab-ocean);
    cursor: pointer;
}

.tl-radio:has(input:checked) {
    border-color: var(--cab-ocean);
    background: rgba(20, 114, 153, .08);
    color: var(--cab-ocean);
}

/* Fallback para navegadores sem :has() — o JS espelha o estado numa classe. */
.tl-radio.is-marcado {
    border-color: var(--cab-ocean);
    background: rgba(20, 114, 153, .08);
    color: var(--cab-ocean);
}

.tl-autor__aviso {
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(180, 35, 24, .08);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--cab-danger);
}

.tl-autor__aviso.is-ok {
    background: rgba(31, 138, 112, .1);
    color: var(--cab-success);
}

/* -----------------------------------------------------------------------
 * Lista "Meus trabalhos"
 * --------------------------------------------------------------------- */

.tl-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0 18px;
}

.tl-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--cab-line);
    border-radius: 12px;
    background: var(--cab-white);
}

.tl-item__info {
    min-width: 0;
}

.tl-item__titulo {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--cab-ink);
    overflow-wrap: anywhere;
}

.tl-item__meta {
    margin: 0;
    font-size: 12.5px;
    color: var(--cab-muted);
}

.tl-item__acoes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.tl-item__acoes button {
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--cab-blue-bright);
    cursor: pointer;
    text-align: right;
    text-decoration: underline;
}

.tl-item__acoes button:hover {
    text-decoration: none;
}

.tl-item__acoes button.is-danger {
    color: var(--cab-danger);
    font-weight: 400;
}

.tl-badge {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tl-badge--rascunho {
    background: rgba(214, 172, 86, .18);
    color: var(--cab-bronze);
}

.tl-badge--submetido {
    background: rgba(31, 138, 112, .14);
    color: var(--cab-success);
}

.tl-vazio {
    margin: 0;
    padding: 18px;
    border: 1px dashed var(--cab-line);
    border-radius: 12px;
    background: var(--cab-soft);
    font-size: 14px;
    line-height: 1.5;
    color: var(--cab-muted);
    text-align: center;
}

/* -----------------------------------------------------------------------
 * Faixa do protocolo
 * --------------------------------------------------------------------- */

.tl-trabalho__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.tl-protocolo {
    margin: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--cab-navy);
    color: var(--cab-white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
}

.tl-acoes {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.tl-acoes .cab-primary,
.tl-acoes .cab-secondary {
    flex: 1 1 200px;
}

/* -----------------------------------------------------------------------
 * Somente leitura: submissões encerradas
 *
 * O bloqueio real é no servidor; isto é só a tradução visual dele.
 * --------------------------------------------------------------------- */

.tl-form.is-bloqueado textarea,
.tl-form.is-bloqueado input,
.tl-form.is-bloqueado select {
    background: var(--cab-soft);
    color: var(--cab-muted);
}

.tl-form.is-bloqueado .tl-acoes,
.tl-form.is-bloqueado .tl-autor__remover,
.tl-form.is-bloqueado #tlAddCoautor,
.tl-form.is-bloqueado #tlAddFigura,
.tl-form.is-bloqueado .tl-figura button {
    display: none;
}

/* -----------------------------------------------------------------------
 * Regulamento de 2026-08-05: classificação, seções, figuras e declarações
 * --------------------------------------------------------------------- */

/* Dois campos lado a lado (tipo/área, humanos/CAAE, instituição/e-mail). */
.tl-linha-dupla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    align-items: start;
}

.tl-linha-dupla > div {
    min-width: 0;
}

/* O select do congresso já tem desenho; aqui só garantimos que ele ocupe a
   coluna inteira dentro do formulário do trabalho. */
.tl-form select {
    width: 100%;
}

/* Seções do texto — itens 7 e 8. São montadas pelo JS conforme o tipo de
   estudo, então o espaçamento vive aqui e não no HTML. */
.tl-secoes {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tl-secao + .tl-secao {
    margin-top: 6px;
}

.tl-secoes__vazio {
    margin: 8px 0 0;
    padding: 12px 14px;
    border: 1px dashed var(--cab-line);
    border-radius: 10px;
    background: var(--cab-soft);
    font-size: 13px;
    line-height: 1.5;
    color: var(--cab-muted);
}

/* Figuras — item 10g. */
.tl-figuras {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--cab-line);
}

.tl-figuras__lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0 0;
}

.tl-figura {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--cab-line);
    border-radius: 10px;
    background: var(--cab-white);
}

.tl-figura__thumb {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--cab-soft);
}

.tl-figura__info {
    flex: 1 1 auto;
    min-width: 0;
}

.tl-figura__nome {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cab-ink);
    overflow-wrap: anywhere;
}

.tl-figura__meta {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--cab-muted);
}

.tl-figura button {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid var(--cab-line);
    border-radius: 8px;
    background: var(--cab-white);
    font-size: 13px;
    font-weight: 600;
    color: var(--cab-danger);
    cursor: pointer;
}

.tl-figuras__aviso {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(180, 35, 24, .07);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--cab-danger);
}

/* CRM obrigatório: a dica ao lado do rótulo muda de cor junto com a regra. */
.cab-form__dica.is-obrigatorio {
    color: var(--cab-danger);
    font-weight: 600;
}

.tl-autor input.is-obrigatorio {
    border-color: rgba(180, 35, 24, .45);
}

.tl-autor__aviso.is-alerta {
    background: rgba(184, 134, 11, .12);
    color: #8a6100;
}

/* Orientador: cor diferente da do apresentador, porque são duas marcações no
   mesmo bloco e confundi-las trocaria quem apresenta. */
.tl-radio--orientador:has(input:checked),
.tl-radio--orientador.is-marcado {
    border-color: #8a6100;
    background: rgba(184, 134, 11, .12);
    color: #8a6100;
}

/* Declarações: dois checkboxes que o envio exige. */
.tl-bloco--declaracoes .tl-checkbox + .tl-checkbox {
    margin-top: 10px;
}

/* Lista de pendências abaixo da mensagem do painel. */
.cab-message__lista {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 13.5px;
    line-height: 1.55;
}

.cab-message__lista li + li {
    margin-top: 4px;
}

/* -----------------------------------------------------------------------
 * Telas estreitas
 * --------------------------------------------------------------------- */

@media (max-width: 640px) {
    .tl-autor__linha,
    .tl-autor__linha:first-of-type,
    .tl-linha-dupla {
        grid-template-columns: 1fr;
    }

    .tl-autor__campo--apresentador,
    .tl-autor__campo--marcacoes {
        align-items: flex-start;
        padding-bottom: 0;
    }

    .tl-figura {
        flex-wrap: wrap;
    }

    .tl-figura__info {
        flex: 1 1 140px;
    }

    .tl-item {
        flex-direction: column;
    }

    .tl-item__acoes {
        flex-direction: row;
        gap: 16px;
    }

    .tl-item__acoes button {
        text-align: left;
    }

    .tl-bloco {
        padding: 14px 14px 16px;
    }
}