/* =====================================================================
   Vacinar é Proteger — Tabela de Vacinas v2
   Compacta: 1 linha por grupo de idade, vacinas empilhadas nas células
   Fonte: Nunito | Cores: #2d3a6b / #f5c842
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

:root {
    --vt-fundo    : #2d3a6b;
    --vt-header   : #1e2d5e;
    --vt-texto    : #ffffff;
    --vt-destaque : #f5c842;
    --vt-alt      : #364580;
    --vt-borda    : #4a5a90;
    --vt-tag-bg   : rgba(245,200,66,.12);
    --vt-tag-brd  : rgba(245,200,66,.3);
    --vt-font     : 'Nunito', sans-serif;
    --vt-fs       : 13px;
    --vt-radius   : 14px;
}

/* =====================================================================
   WRAPPER
   ===================================================================== */
.vt-wrapper {
    font-family   : var(--vt-font);
    font-size     : var(--vt-fs);
    color         : var(--vt-texto);
    background    : var(--vt-fundo);
    border-radius : var(--vt-radius);
    overflow      : hidden;
    box-shadow    : 0 8px 32px rgba(0,0,0,.25);
}

/* =====================================================================
   CABEÇALHO
   ===================================================================== */
.vt-header {
    background    : var(--vt-header);
    padding       : 24px 28px 20px;
    border-bottom : 2px solid var(--vt-borda);
    text-align    : center;
}
.vt-subtitulo {
    display       : block;
    font-size     : 10px;
    font-weight   : 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color         : var(--vt-destaque);
    margin-bottom : 5px;
    opacity       : .9;
}
.vt-titulo {
    margin        : 0;
    font-size     : clamp(16px, 2.5vw, 22px);
    font-weight   : 800;
    color         : var(--vt-texto);
    letter-spacing: -.01em;
}

/* =====================================================================
   TABELA COMPACTA (desktop ≥ 768px)
   Uma linha por grupo de idade — vacinas empilhadas dentro da célula
   ===================================================================== */
.vt-table {
    width          : 100%;
    border-collapse: collapse;
    font-size      : var(--vt-fs);
}

/* cabeçalho */
.vt-table thead th {
    padding        : 12px 14px;
    text-align     : left;
    font-size      : 11px;
    font-weight    : 800;
    letter-spacing : .06em;
    text-transform : uppercase;
    color          : var(--vt-destaque);
    border-bottom  : 2px solid var(--vt-borda);
    background     : var(--vt-header);
    white-space    : nowrap;
}

/* larguras das colunas */
.col-idade   { width: 8%; }
.col-vacina  { width: 28%; }
.col-dose    { width: 13%; }
.col-doencas { width: 51%; }

/* linhas alternadas */
.vt-table tbody tr:nth-child(even) td { background: var(--vt-alt); }
.vt-table tbody tr:hover td { filter: brightness(1.06); }

/* células */
.vt-table td {
    padding        : 10px 14px;
    vertical-align : middle;
    border-bottom  : 1px solid var(--vt-borda);
    color          : var(--vt-texto);
    line-height    : 1.4;
}

/* coluna de idade */
.vt-table td.col-idade {
    border-right   : 2px solid var(--vt-borda);
    background     : var(--vt-header) !important;
    text-align     : center;
    padding        : 10px 8px;
}
.vt-idade {
    display        : block;
    font-size      : 12px;
    font-weight    : 800;
    color          : var(--vt-destaque);
    white-space    : nowrap;
    line-height    : 1.3;
}

/* ---- STACK DE VACINAS: chips empilhados numa célula ---- */
.vt-stack {
    display        : flex;
    flex-direction : column;
    gap            : 5px;
}

/* cada item no stack (vacina, dose ou doença) */
.vt-item {
    display        : flex;
    align-items    : flex-start;
    gap            : 5px;
    font-size      : 12.5px;
    line-height    : 1.45;
    padding        : 4px 0;
    border-bottom  : 1px dashed rgba(255,255,255,.1);
}
.vt-item:last-child { border-bottom: none; padding-bottom: 0; }
.vt-item:first-child { padding-top: 0; }

/* bullet amarelo */
.vt-blt {
    flex-shrink    : 0;
    width          : 14px;
    color          : var(--vt-destaque);
    font-weight    : 800;
    font-size      : 14px;
    line-height    : 1.3;
    text-align     : center;
}

/* texto do item */
.vt-item-txt { flex: 1; }

/* dose como badge inline */
.vt-dose-badge {
    display        : inline-block;
    font-size      : 10.5px;
    font-weight    : 700;
    color          : rgba(255,255,255,.7);
    background     : rgba(255,255,255,.08);
    border         : 1px solid rgba(255,255,255,.15);
    border-radius  : 20px;
    padding        : 1px 8px;
    white-space    : nowrap;
    line-height    : 1.6;
}

/* doenças — texto menor, mais opaco */
.vt-doenca-txt {
    font-size      : 11.5px;
    color          : rgba(255,255,255,.78);
    line-height    : 1.45;
}

/* =====================================================================
   CARDS MOBILE (< 768px)
   ===================================================================== */
.vt-cards { display: none; }

.vt-card {
    border-bottom  : 2px solid var(--vt-borda);
}
.vt-card:last-child { border-bottom: none; }

/* cabeçalho do card = idade */
.vt-card-head {
    background     : var(--vt-header);
    display        : flex;
    align-items    : center;
    gap            : 10px;
    padding        : 10px 16px;
    border-bottom  : 1px solid var(--vt-borda);
}
.vt-card-head-label {
    font-size      : 8px;
    font-weight    : 700;
    letter-spacing : .2em;
    text-transform : uppercase;
    color          : rgba(255,255,255,.4);
}
.vt-card-head-val {
    font-size      : 14px;
    font-weight    : 800;
    color          : var(--vt-destaque);
    line-height    : 1;
}

/* acordeão: body colapsável */
.vt-card-body {
    overflow       : hidden;
    max-height     : 0;
    transition     : max-height .35s ease, padding .2s;
    padding        : 0 16px;
}
.vt-card.open .vt-card-body {
    max-height     : 800px;
    padding        : 10px 16px 14px;
}

/* setinha */
.vt-card-toggle {
    margin-left    : auto;
    width          : 26px;
    height         : 26px;
    border-radius  : 50%;
    background     : rgba(255,255,255,.1);
    display        : flex;
    align-items    : center;
    justify-content: center;
    cursor         : pointer;
    transition     : background .2s, transform .3s;
    flex-shrink    : 0;
    border         : none;
    color          : var(--vt-destaque);
}
.vt-card.open .vt-card-toggle { transform: rotate(180deg); background: rgba(245,200,66,.15); }

/* item de vacina dentro do card */
.vt-m-item {
    padding        : 8px 0;
    border-bottom  : 1px dashed rgba(255,255,255,.1);
}
.vt-m-item:last-child { border-bottom: none; padding-bottom: 0; }

.vt-m-vacina {
    display        : flex;
    align-items    : flex-start;
    gap            : 5px;
    margin-bottom  : 4px;
}
.vt-m-vacina-txt {
    font-size      : 13px;
    font-weight    : 700;
    color          : var(--vt-texto);
    line-height    : 1.4;
}
.vt-m-meta {
    display        : flex;
    align-items    : flex-start;
    gap            : 8px;
    flex-wrap      : wrap;
}
.vt-m-dose {
    font-size      : 10px;
    font-weight    : 700;
    color          : rgba(255,255,255,.65);
    background     : rgba(255,255,255,.09);
    border         : 1px solid rgba(255,255,255,.15);
    border-radius  : 20px;
    padding        : 1px 9px;
    white-space    : nowrap;
    flex-shrink    : 0;
}
.vt-m-doenca {
    font-size      : 11px;
    color          : rgba(255,255,255,.65);
    line-height    : 1.45;
    flex           : 1;
    min-width      : 0;
}

/* hint "toque para ver" */
.vt-card-hint {
    font-size      : 10px;
    color          : rgba(255,255,255,.3);
    letter-spacing : .06em;
    flex-shrink    : 0;
    display        : none;
}

/* =====================================================================
   FONTE
   ===================================================================== */
.vt-fonte {
    font-size      : 10px;
    color          : rgba(255,255,255,.3);
    padding        : 12px 20px;
    margin         : 0;
    text-align     : center;
    border-top     : 1px solid rgba(255,255,255,.06);
}

/* =====================================================================
   BREAKPOINTS
   ===================================================================== */

/* Tablet — reduz padding */
@media (min-width: 768px) and (max-width: 1024px) {
    .vt-table td, .vt-table thead th { padding: 8px 10px; }
    .vt-item { font-size: 12px; }
}

/* Mobile: esconde tabela, mostra cards acordeão */
@media (max-width: 767px) {
    .vt-table      { display: none !important; }
    .vt-cards      { display: block; }
    .vt-card-hint  { display: block; }
    .vt-header     { padding: 18px 16px 14px; }
    .vt-wrapper    { border-radius: 10px; }
}