/* ============================================================
   MedCare — Painel TV de Exames (/exames/painel-tv)
   Laboratório numa metade, Imagem na outra. Identidade MedCare
   (teal + IBM Plex) desenhada para TV de parede: tudo prefixado
   por .tvex, EmptyLayout, sem chrome do YNEX.

   Mesmo desenho do painel do Centro Cirúrgico (centro-cirurgico-tv.css):
   tema ESCURO por padrão e independente do data-theme-mode do sistema —
   a TV fica ligada o dia inteiro e não herda a preferência de quem logou.
   Tokens locais (--tv-*) com os MESMOS valores da paleta de
   medcare-tokens.css, e não var(--mc-*), que flipam com o tema do sistema.

   Escala: unidade fluida --u = 1px no desenho de referência de 1600x960.
   O min() das duas dimensões é o que importa: o painel é altura-fixa (100dvh)
   e as 7 linhas de cada metade precisam caber DE PÉ. Só com a largura, uma
   janela de navegador comum (1366x~600 de área útil) espremia as linhas até o
   conteúdo transbordar do cartão — o nome do paciente saía por cima do vizinho.
   A composição inteira cresce/encolhe junto, sem media query. Não usa
   .mc-scaled/zoom: zoom em container com viewport units estoura a altura.
   ============================================================ */

.tvex {
    /* unidade fluida: 1px @ 1600x960 — a menor das duas dimensões manda */
    --u: clamp(0.5px, min(0.0625vw, 0.1042vh), 2.2px);

    /* ---- paleta dark (mesmos valores do [data-theme-mode="dark"] dos tokens) ---- */
    --tv-bg:          #070e11;
    --tv-surface:     #0f1a1f;
    --tv-surface-2:   #15242a;
    --tv-surface-3:   #1c2e35;
    --tv-border:      #213339;
    --tv-border-2:    #31474f;
    --tv-text:        #e8f0f2;
    --tv-text-2:      #a5b9c0;
    --tv-text-3:      #6d838b;
    --tv-brand:       #2bb7bc;
    --tv-brand-2:     #3acace;
    --tv-brand-soft:  #0f302f;
    --tv-grad:        linear-gradient(135deg, #07484b, #0d888c);
    --tv-success:     #33bd77;  --tv-success-soft: #12301f;
    --tv-warning:     #dda23f;  --tv-warning-soft: #2c2412;
    --tv-danger:      #ee6a5f;  --tv-danger-soft:  #2d1917;
    --tv-info:        #5c9af1;  --tv-info-soft:    #112238;
    --tv-purple:      #a58bea;  --tv-purple-soft:  #201a33;
    --tv-slate:       #8ea3ab;  --tv-slate-soft:   #1a262c;
    --tv-shadow:      0 1px 2px rgba(0,0,0,.35), 0 18px 40px -18px rgba(0,0,0,.6);

    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    background: var(--tv-bg);
    color: var(--tv-text);
    font-family: var(--mc-font-sans, 'IBM Plex Sans', system-ui, sans-serif);
    font-size: calc(var(--u) * 13.5);
    line-height: 1.35;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ---- paleta clara (mesmos valores do :root dos tokens) ---- */
.tvex.tvex-light {
    --tv-bg:          #eef2f4;
    --tv-surface:     #ffffff;
    --tv-surface-2:   #f5f8f9;
    --tv-surface-3:   #e9eff1;
    --tv-border:      #e4ebee;
    --tv-border-2:    #d4dee2;
    --tv-text:        #0f2229;
    --tv-text-2:      #4c6068;
    --tv-text-3:      #82989f;
    --tv-brand:       #0d888c;
    --tv-brand-2:     #0a6c70;
    --tv-brand-soft:  #dbf0f0;
    --tv-grad:        linear-gradient(135deg, #0a6c70, #0d888c);
    --tv-success:     #1c9a5e;  --tv-success-soft: #e0f3ea;
    --tv-warning:     #c07c13;  --tv-warning-soft: #f9edd6;
    --tv-danger:      #d24a3f;  --tv-danger-soft:  #fae5e2;
    --tv-info:        #2c6fce;  --tv-info-soft:    #e3edfb;
    --tv-purple:      #7856ce;  --tv-purple-soft:  #ebe4fb;
    --tv-slate:       #5b7079;  --tv-slate-soft:   #e9eff1;
    --tv-shadow:      0 1px 2px rgba(15,34,41,.05), 0 14px 34px -14px rgba(15,34,41,.16);
}

/* Ícone Material Symbols — a fonte usa o nome do ícone como conteúdo. */
.tvex .tvex-ico {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: calc(var(--u) * 19);
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    flex: none;
    user-select: none;
}

/* Tons por status: os componentes consomem --tone/--tone-soft. */
.tvex .tn-blue   { --tone: var(--tv-info);    --tone-soft: var(--tv-info-soft); }
.tvex .tn-teal   { --tone: var(--tv-brand);   --tone-soft: var(--tv-brand-soft); }
.tvex .tn-amber  { --tone: var(--tv-warning); --tone-soft: var(--tv-warning-soft); }
.tvex .tn-green  { --tone: var(--tv-success); --tone-soft: var(--tv-success-soft); }
.tvex .tn-purple { --tone: var(--tv-purple);  --tone-soft: var(--tv-purple-soft); }
.tvex .tn-red    { --tone: var(--tv-danger);  --tone-soft: var(--tv-danger-soft); }
.tvex .tn-slate  { --tone: var(--tv-slate);   --tone-soft: var(--tv-slate-soft); }

@keyframes tvexPulse {
    0%   { box-shadow: 0 0 0 0 rgba(51,189,119,.5); }
    70%  { box-shadow: 0 0 0 calc(var(--u) * 9) rgba(51,189,119,0); }
    100% { box-shadow: 0 0 0 0 rgba(51,189,119,0); }
}
@keyframes tvexFade {
    from { opacity: 0; transform: translateY(calc(var(--u) * 8)); }
    to   { opacity: 1; transform: none; }
}

/* ============================================================
   Topo
   ============================================================ */
.tvex-top {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 18);
    padding: calc(var(--u) * 15) calc(var(--u) * 26);
    background: var(--tv-surface);
    border-bottom: 1px solid var(--tv-border);
}

.tvex-brand {
    width: calc(var(--u) * 52);
    height: calc(var(--u) * 52);
    border-radius: calc(var(--u) * 14);
    background: var(--tv-grad);
    color: #fff;
    display: grid;
    place-items: center;
    flex: none;
    box-shadow: var(--tv-shadow);
}
.tvex-brand .tvex-ico { font-size: calc(var(--u) * 28); }

.tvex-titlebox { min-width: 0; }
.tvex-title {
    font-size: calc(var(--u) * 21);
    font-weight: 700;
    letter-spacing: -.4px;
    line-height: 1.15;
    white-space: nowrap;
}
.tvex-sub {
    font-size: calc(var(--u) * 12.5);
    color: var(--tv-text-2);
    white-space: nowrap;
}
.tvex-sub::first-letter { text-transform: uppercase; }

.tvex-right {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 20);
    margin-left: auto;
}

.tvex-live {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 9);
    padding: calc(var(--u) * 7) calc(var(--u) * 13);
    border: 1px solid var(--tv-border);
    border-radius: 999px;
    background: var(--tv-surface-2);
}
.tvex-live-dot {
    width: calc(var(--u) * 10);
    height: calc(var(--u) * 10);
    border-radius: 50%;
    background: var(--tv-success);
    flex: none;
}
.tvex-live.on .tvex-live-dot { animation: tvexPulse 2s infinite; }
.tvex-live.off .tvex-live-dot { background: var(--tv-danger); }
.tvex-live-t {
    font-size: calc(var(--u) * 10.5);
    font-weight: 700;
    letter-spacing: .8px;
    line-height: 1.2;
}
.tvex-live.off .tvex-live-t { color: var(--tv-danger); }
.tvex-live-s { font-size: calc(var(--u) * 10); color: var(--tv-text-3); line-height: 1.2; }

.tvex-clockbox { text-align: right; }
.tvex-clock {
    font-family: var(--mc-font-mono, 'IBM Plex Mono', monospace);
    font-size: calc(var(--u) * 30);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
}
.tvex-clock-s { font-size: calc(var(--u) * 16); color: var(--tv-text-3); font-weight: 500; }

.tvex-actions { display: flex; gap: calc(var(--u) * 8); }
.tvex-iconbtn {
    width: calc(var(--u) * 40);
    height: calc(var(--u) * 40);
    border-radius: calc(var(--u) * 11);
    border: 1px solid var(--tv-border);
    background: var(--tv-surface-2);
    color: var(--tv-text-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
    padding: 0;
}
.tvex-iconbtn .tvex-ico { font-size: calc(var(--u) * 20); }
.tvex-iconbtn:hover { color: var(--tv-brand); border-color: var(--tv-brand); }

/* ============================================================
   KPIs
   ============================================================ */
.tvex-kpis {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: calc(var(--u) * 14);
    padding: calc(var(--u) * 14) calc(var(--u) * 26) 0;
}
.tvex-kpi {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 13);
    padding: calc(var(--u) * 12) calc(var(--u) * 17);
    background: var(--tv-surface);
    border: 1px solid var(--tv-border);
    border-radius: calc(var(--u) * 15);
}
.tvex-kpi-icon {
    width: calc(var(--u) * 42);
    height: calc(var(--u) * 42);
    border-radius: calc(var(--u) * 12);
    background: var(--tone-soft, var(--tv-surface-2));
    color: var(--tone, var(--tv-text-2));
    display: grid;
    place-items: center;
    flex: none;
}
.tvex-kpi-icon .tvex-ico { font-size: calc(var(--u) * 23); }
.tvex-kpi-value {
    font-size: calc(var(--u) * 30);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.tvex-kpi-label {
    font-size: calc(var(--u) * 11.5);
    font-weight: 600;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--tv-text-3);
    margin-top: calc(var(--u) * 4);
    white-space: nowrap;
}
/* Alerta só quando existe: zero urgente/atrasado não deve acender na parede.
   A cor vem do tom do próprio cartão, então urgência acende vermelho e espera
   longa acende âmbar — dois avisos diferentes, não o mesmo alarme. */
.tvex-kpi.alerta { border-color: var(--tone, var(--tv-danger)); background: var(--tone-soft, var(--tv-danger-soft)); }

/* ============================================================
   Corpo — as duas metades
   ============================================================ */
.tvex-body {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* metade laboratório, metade imagem */
    gap: calc(var(--u) * 16);
    padding: calc(var(--u) * 14) calc(var(--u) * 26) calc(var(--u) * 14);
    min-height: 0;
}

.tvex-col {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 0;
    background: var(--tv-surface);
    border: 1px solid var(--tv-border);
    border-radius: calc(var(--u) * 16);
    overflow: hidden;
}

.tvex-col-head {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 11);
    padding: calc(var(--u) * 12) calc(var(--u) * 16);
    background: var(--tv-surface-2);
    border-bottom: 1px solid var(--tv-border);
}
.tvex-col-icon {
    width: calc(var(--u) * 38);
    height: calc(var(--u) * 38);
    border-radius: calc(var(--u) * 11);
    background: var(--tone-soft, var(--tv-brand-soft));
    color: var(--tone, var(--tv-brand));
    display: grid;
    place-items: center;
    flex: none;
}
.tvex-col-icon .tvex-ico { font-size: calc(var(--u) * 22); }
.tvex-col-name {
    font-size: calc(var(--u) * 17);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.2px;
}
.tvex-col-sub { font-size: calc(var(--u) * 11.5); color: var(--tv-text-3); line-height: 1.2; }
.tvex-col-count {
    margin-left: auto;
    min-width: calc(var(--u) * 30);
    height: calc(var(--u) * 30);
    padding-inline: calc(var(--u) * 10);
    border-radius: 999px;
    background: var(--tone-soft, var(--tv-brand-soft));
    color: var(--tone, var(--tv-brand));
    font-size: calc(var(--u) * 15);
    font-weight: 700;
    display: grid;
    place-items: center;
    font-variant-numeric: tabular-nums;
}

/* A lista é uma GRADE de altura fixa: as linhas dividem o espaço disponível em
   partes iguais, então a página não "pula" quando a última tem menos itens. */
.tvex-list {
    display: grid;
    grid-template-rows: repeat(var(--rows, 7), minmax(0, 1fr));
    gap: calc(var(--u) * 8);
    padding: calc(var(--u) * 12) calc(var(--u) * 13);
    min-height: 0;
    overflow: hidden;
    animation: tvexFade .35s ease both;
}

/* ---- linha de exame ---- */
.tvex-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 13);
    padding: calc(var(--u) * 9) calc(var(--u) * 14) calc(var(--u) * 9) calc(var(--u) * 17);
    background: var(--tv-surface-2);
    border: 1px solid var(--tv-border);
    border-radius: calc(var(--u) * 12);
    min-width: 0;
    /* min-height:0 é obrigatório: item de grade nasce com min-height:auto e
       CRESCE além da linha quando a altura aperta — foi assim que o nome do
       paciente vazava para fora do cartão. Com isto, o corte é limpo, dentro. */
    min-height: 0;
    overflow: hidden;
}
/* Tarja de tom: é ela que dá o status "de longe", antes de ler o texto. */
.tvex-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: calc(var(--u) * 5);
    background: var(--tone, var(--tv-slate));
}
.tvex-item.is-urgente { border-color: var(--tv-danger); background: var(--tv-danger-soft); }
.tvex-item.is-done { opacity: .72; }

.tvex-item-main { min-width: 0; flex: 1; }
.tvex-item-top {
    display: flex;
    align-items: baseline;
    gap: calc(var(--u) * 9);
    min-width: 0;
}
.tvex-item-pac {
    font-size: calc(var(--u) * 16.5);
    font-weight: 700;
    letter-spacing: -.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.tvex-tag-urg {
    flex: none;
    padding: calc(var(--u) * 2) calc(var(--u) * 8);
    border-radius: 999px;
    background: var(--tv-danger);
    color: #fff;
    font-size: calc(var(--u) * 9.5);
    font-weight: 800;
    letter-spacing: .8px;
}
.tvex-item-exam {
    font-size: calc(var(--u) * 14);
    color: var(--tv-text);
    margin-top: calc(var(--u) * 2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tvex-item-meta {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 6);
    margin-top: calc(var(--u) * 5);
    min-width: 0;
}
.tvex-chip {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 4);
    padding: calc(var(--u) * 2) calc(var(--u) * 8);
    border-radius: 999px;
    background: var(--tv-surface-3);
    color: var(--tv-text-2);
    font-size: calc(var(--u) * 10.5);
    font-weight: 600;
    white-space: nowrap;
    max-width: calc(var(--u) * 190);
    overflow: hidden;
    text-overflow: ellipsis;
}
.tvex-chip .tvex-ico { font-size: calc(var(--u) * 13); }
.tvex-chip.leito { background: var(--tv-brand-soft); color: var(--tv-brand); }

/* ---- lado direito da linha: status + espera + hora ---- */
.tvex-item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(var(--u) * 4);
    flex: none;
    text-align: right;
}
.tvex-status {
    padding: calc(var(--u) * 4) calc(var(--u) * 10);
    border-radius: 999px;
    background: var(--tone-soft, var(--tv-slate-soft));
    color: var(--tone, var(--tv-text-2));
    font-size: calc(var(--u) * 10.5);
    font-weight: 800;
    letter-spacing: .6px;
    white-space: nowrap;
}
.tvex-espera {
    font-family: var(--mc-font-mono, 'IBM Plex Mono', monospace);
    font-size: calc(var(--u) * 13);
    font-weight: 600;
    color: var(--tv-text-2);
    font-variant-numeric: tabular-nums;
}
/* Espera longa em vermelho: é o único vermelho que aparece sem ser urgência. */
.tvex-espera.late { color: var(--tv-danger); }
.tvex-hora { font-size: calc(var(--u) * 10.5); color: var(--tv-text-3); white-space: nowrap; }

/* ---- rodapé da coluna: paginação automática ---- */
.tvex-col-foot {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 10);
    padding: calc(var(--u) * 9) calc(var(--u) * 16);
    background: var(--tv-surface-2);
    border-top: 1px solid var(--tv-border);
    font-size: calc(var(--u) * 11.5);
    color: var(--tv-text-3);
}
.tvex-dots { display: flex; gap: calc(var(--u) * 5); margin-left: auto; }
.tvex-dot {
    width: calc(var(--u) * 7);
    height: calc(var(--u) * 7);
    border-radius: 50%;
    background: var(--tv-border-2);
}
.tvex-dot.on { background: var(--tv-brand); }

/* ---- estado vazio ---- */
.tvex-empty {
    grid-row: 1 / -1;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: calc(var(--u) * 10);
    color: var(--tv-text-3);
    text-align: center;
}
.tvex-empty .tvex-ico { font-size: calc(var(--u) * 52); color: var(--tv-border-2); }
.tvex-empty-t { font-size: calc(var(--u) * 16); font-weight: 600; color: var(--tv-text-2); }
.tvex-empty-s { font-size: calc(var(--u) * 12); }

/* ============================================================
   Rodapé — legenda
   ============================================================ */
.tvex-foot {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 18);
    padding: calc(var(--u) * 10) calc(var(--u) * 26);
    background: var(--tv-surface);
    border-top: 1px solid var(--tv-border);
    font-size: calc(var(--u) * 11.5);
    color: var(--tv-text-3);
}
.tvex-legend { display: flex; align-items: center; gap: calc(var(--u) * 14); flex-wrap: wrap; }
.tvex-legend-i { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); }
.tvex-legend-dot {
    width: calc(var(--u) * 9);
    height: calc(var(--u) * 9);
    border-radius: calc(var(--u) * 3);
    background: var(--tone, var(--tv-slate));
}
.tvex-foot-right { margin-left: auto; display: flex; align-items: center; gap: calc(var(--u) * 14); }

/* ---- carregando ---- */
.tvex-loading {
    position: fixed;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: calc(var(--u) * 16);
    background: var(--tv-bg);
    z-index: 60;
}
.tvex-loading .tvex-brand { animation: tvexPulse 1.6s infinite; }
.tvex-loading-t { color: var(--tv-text-2); font-size: calc(var(--u) * 14); }