/* ── App do quiroprata (login + casca + telas) ──────────────
   Celular: barra inferior com 5 atalhos. Notebook (≥900px):
   menu lateral fixo. */

/* Login */
.login-tela { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: linear-gradient(180deg, #fff 0, #fff 38%, var(--bg) 38%); }
.login-card { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--border); border-top: 4px solid var(--primary); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.5rem 1.25rem; }
.login-card img { display: block; height: 64px; margin: 0 auto .75rem; }
.login-card h1 { text-align: center; margin-bottom: .2rem; }
.login-card .sub { text-align: center; color: var(--text-3); margin-bottom: 1.25rem; font-size: .9rem; }

/* Casca */
.topbar { position: sticky; top: 0; z-index: 20; height: var(--topbar-h); background: #fff; border-bottom: 3px solid var(--primary); display: flex; align-items: center; gap: .75rem; padding: 0 1rem; }
.topbar img { height: 34px; }
.topbar .sistema { font-weight: 700; color: var(--text-2); border-left: 1px solid var(--border); padding-left: .75rem; }
.topbar .espaco { flex: 1; }
.topbar .usuario { font-size: .85rem; color: var(--text-3); display: none; }
@media (min-width: 640px) { .topbar .usuario { display: inline; } }

.casca { display: flex; min-height: calc(100vh - var(--topbar-h)); }
.menu-lateral { display: none; }
.conteudo { flex: 1; min-width: 0; padding: 1rem 1rem calc(var(--bottomnav-h) + 1.5rem); max-width: 1200px; margin: 0 auto; width: 100%; }

.nav-inferior { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; height: var(--bottomnav-h); background: #fff; border-top: 1px solid var(--border); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding-bottom: env(safe-area-inset-bottom); }
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: var(--text-3); font-size: .7rem; font-weight: 600; }
.nav-item svg { width: 22px; height: 22px; }
.nav-item[aria-current=page] { color: var(--primary); }

@media (min-width: 900px) {
    .nav-inferior { display: none; }
    .menu-lateral { display: flex; flex-direction: column; gap: .2rem; width: 220px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--border); padding: 1rem .6rem; position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); }
    .menu-lateral .nav-item { flex-direction: row; justify-content: flex-start; gap: .65rem; padding: .65rem .75rem; border-radius: var(--radius-sm); font-size: .92rem; color: var(--text-2); }
    .menu-lateral .nav-item:hover { background: var(--surface-2); }
    .menu-lateral .nav-item[aria-current=page] { background: var(--primary-light); color: var(--primary); }
    .conteudo { padding-bottom: 2rem; }
    .toasts { bottom: 20px; }
}

.cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: 1rem; }
.cabecalho h1 { margin: 0; }
.cabecalho .sub { color: var(--text-3); font-size: .9rem; }
.navegador-data { display: flex; align-items: center; gap: .35rem; }

/* Cartão de atendimento */
.atend { display: grid; grid-template-columns: 64px 1fr; gap: .25rem .75rem; align-items: start; }
.atend .hora { font-weight: 800; font-size: 1.1rem; color: var(--text); line-height: 1.2; }
.atend .hora small { display: block; font-weight: 500; font-size: .75rem; color: var(--text-3); }
.atend .nome { font-weight: 700; font-size: 1.02rem; color: var(--text); text-decoration: none; }
.atend .nome:hover { color: var(--primary); }
.atend .selos { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0; }
.atend .acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.atend.cancelado { opacity: .6; }
.bloqueio-linha { border-left: 4px solid var(--border-strong); background: var(--surface-2); padding: .5rem .75rem; border-radius: var(--radius-sm); color: var(--text-2); font-size: .9rem; margin-bottom: .6rem; }

/* Semana */
.semana { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .semana { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; } }
.semana-dia { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem; min-height: 80px; }
.semana-dia.hoje { border-color: var(--primary); box-shadow: inset 0 3px 0 var(--primary); }
.semana-dia h3 { font-size: .85rem; text-transform: capitalize; margin-bottom: .45rem; color: var(--text-2); }
.mini-ag { display: block; width: 100%; text-align: left; border: 1px solid var(--border); border-left: 4px solid var(--primary); background: var(--surface-2); border-radius: var(--radius-sm); padding: .35rem .5rem; margin-bottom: .35rem; font: .82rem var(--font); color: var(--text); cursor: pointer; }
.mini-ag.retorno { border-left-color: var(--text-3); }
.mini-ag.st-atendido { border-left-color: var(--ok); }
.mini-ag.st-faltou { border-left-color: var(--err); }
.mini-ag.st-cancelado_paciente, .mini-ag.st-cancelado_quiro { opacity: .5; text-decoration: line-through; }
.mini-ag strong { display: block; }
.mini-bloq { font-size: .78rem; color: var(--text-3); background: repeating-linear-gradient(45deg, #f3f3f3, #f3f3f3 6px, #fafafa 6px, #fafafa 12px); border-radius: var(--radius-sm); padding: .3rem .45rem; margin-bottom: .35rem; }

/* Lista de pacientes */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li + li { border-top: 1px solid var(--border); }
.lista a.item { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .75rem .25rem; text-decoration: none; color: var(--text); }
.lista a.item:hover { background: var(--surface-2); }
.lista .item small { color: var(--text-3); display: block; font-size: .8rem; }

/* Abas */
.abas { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: 1rem; scrollbar-width: none; }
.aba { flex: 0 0 auto; padding: .65rem .9rem; border: 0; border-bottom: 3px solid transparent; background: none; font: 600 .92rem var(--font); color: var(--text-3); cursor: pointer; min-height: 44px; }
.aba[aria-selected=true] { color: var(--primary); border-bottom-color: var(--primary); }

/* Ficha */
.ficha-topo { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-start; justify-content: space-between; }
.ficha-topo h1 { margin-bottom: .2rem; }
.dados-lista { display: grid; grid-template-columns: 1fr; gap: .5rem 1.5rem; margin: 0; }
@media (min-width: 640px) { .dados-lista { grid-template-columns: 1fr 1fr; } }
.dados-lista dt { font-size: .78rem; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.dados-lista dd { margin: 0 0 .25rem; }
.contra { border: 1px solid var(--warn-border); background: var(--warn-surface); color: var(--warn-ink); border-radius: var(--radius-sm); padding: .7rem .85rem; }
.contra ul { margin: .3rem 0 0; padding-left: 1.1rem; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li { border-left: 3px solid var(--border); padding: 0 0 1rem 1rem; position: relative; }
.timeline > li::before { content: ''; position: absolute; left: -7px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--primary); }
.dor { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; }
.dor .seta { color: var(--text-3); }

.slider-dor { display: flex; align-items: center; gap: .6rem; }
.slider-dor input[type=range] { flex: 1; accent-color: var(--primary); height: 32px; }
.slider-dor output { min-width: 2.2rem; text-align: center; font-weight: 800; font-size: 1.1rem; }

/* Fotos */
.fotos-posturais { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 900px) { .fotos-posturais { grid-template-columns: repeat(4, 1fr); } }
.foto-slot { border: 2px dashed var(--border-strong); border-radius: var(--radius); aspect-ratio: 3 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; background: var(--surface-2); cursor: pointer; overflow: hidden; position: relative; color: var(--text-3); font-size: .85rem; font-weight: 600; text-align: center; padding: .4rem; }
.foto-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto-slot .rotulo-foto { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .55); color: #fff; padding: .25rem; font-size: .75rem; }
.foto-slot.falhou { border-color: var(--err); color: var(--err); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem; }
.galeria button { padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: #fff; cursor: pointer; aspect-ratio: 3 / 4; position: relative; }
.galeria img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria small { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: .7rem; padding: .15rem .3rem; }
.comparar { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.comparar figure { margin: 0; }
.comparar img { width: 100%; max-height: 62vh; object-fit: contain; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #111; }
.comparar figcaption { text-align: center; font-size: .8rem; color: var(--text-3); margin-top: .25rem; }

/* Mapa do corpo */
.mapa-corpo { display: flex; gap: .75rem; justify-content: center; }
.mapa-corpo figure { margin: 0; text-align: center; }
.mapa-corpo figcaption { font-size: .78rem; color: var(--text-3); font-weight: 600; }
.mapa-corpo svg { width: min(150px, 36vw); height: auto; }
.mapa-corpo .silhueta { fill: #ececeb; stroke: #c9c9c8; stroke-width: 1.5; }
.mapa-corpo .regiao { fill: rgba(155, 16, 6, .06); stroke: rgba(155, 16, 6, .35); stroke-width: 1.2; cursor: pointer; transition: fill .12s; }
.mapa-corpo .regiao:hover { fill: rgba(155, 16, 6, .2); }
.mapa-corpo .regiao[aria-pressed=true] { fill: rgba(155, 16, 6, .75); stroke: var(--primary); }
.mapa-corpo .regiao:focus-visible { outline: none; stroke: #000; stroke-width: 2.5; }

/* Grade (configurações) */
.grade-dia { display: grid; grid-template-columns: 90px 1fr; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid var(--border); align-items: start; }
.grade-dia:last-child { border-bottom: 0; }
.grade-dia .nome-dia { font-weight: 700; padding-top: .6rem; }
.bloco { display: flex; align-items: center; gap: .35rem; margin-bottom: .35rem; }
.bloco input { max-width: 120px; }

/* KPIs (relatórios) */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: 1rem; }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem; }
.kpi .valor { font-size: 1.6rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.kpi .rotulo { font-size: .78rem; color: var(--text-3); font-weight: 600; }
.graficos { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .graficos { grid-template-columns: 2fr 1fr; } }
.grafico-box { position: relative; height: 260px; }

/* Página do QR code (impressão A4) */
.qr-folha { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); max-width: 560px; margin: 0 auto; padding: 2rem 1.5rem; text-align: center; }
.qr-folha img.logo { height: 80px; margin-bottom: 1rem; }
.qr-folha h1 { font-size: 1.8rem; margin-bottom: .3rem; }
.qr-folha .qr { display: inline-block; padding: 14px; border: 4px solid var(--primary); border-radius: 14px; margin: 1.25rem 0; }
.qr-folha .qr img, .qr-folha .qr canvas { display: block; width: 280px; height: 280px; }
.qr-folha .passo-a-passo { text-align: left; display: inline-block; font-size: 1.05rem; }
.qr-folha .url { font-weight: 700; color: var(--primary); font-size: 1.1rem; }

@media print {
    .topbar, .menu-lateral, .nav-inferior, .nao-imprimir, .toasts { display: none !important; }
    body, .conteudo { background: #fff; padding: 0; }
    .qr-folha { border: 0; max-width: none; }
}