/* ─────────────────────────────────────────────────────────────────────
 * Previanest · Componentes e utilitários CSS
 * Equivalente web de DesignSystem.swift (modifiers + containers).
 *
 * 🚨 REGRA ZERO ANTI-BORDA — aplicada via .respiro-borda, .padding-card
 * e .padding-lista. Nunca remover sem revisão.
 * ───────────────────────────────────────────────────────────────────── */

/* ─── Utilitários de padding (REGRA ZERO) ─────────────────────────── */

.respiro-borda {
    /* 24px — padding horizontal MÍNIMO em headers e gradientes full-bleed. */
    padding-inline: var(--sp-7);
}

.padding-card {
    /* 22px — padding horizontal interno padrão de cards. */
    padding-inline: var(--sp-6);
}

.padding-lista {
    /* 20px — padding horizontal padrão de listas. */
    padding-inline: var(--sp-5);
}

.padding-disclaimer {
    /* 28px — padding horizontal de disclaimers e textos centrais. */
    padding-inline: var(--sp-8);
}

/* ─── Anti-truncamento ────────────────────────────────────────────── */

.texto-seguro {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
    max-inline-size: 100%;
}

.header-seguro {
    text-align: center;
    padding-inline: var(--sp-7);
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* ─── Hero card (gradient) ───────────────────────────────────────── */

.hero-card {
    background: var(--grad-hero);
    color: white;
    border-radius: var(--r-xl);
    padding: var(--sp-6);
    padding-inline: var(--sp-6);
    box-shadow: var(--shadow-hero);
    overflow-wrap: anywhere;
    hyphens: auto;
}

.hero-card h2,
.hero-card h3 {
    color: white;
    margin-bottom: var(--sp-3);
}

.hero-card p {
    color: rgba(255, 255, 255, 0.92);
    line-height: var(--lh-relaxed);
}

/* ─── Gradient header (full-bleed) ───────────────────────────────── */

.gradient-header {
    background: var(--grad-hero);
    color: white;
    padding: var(--sp-9) var(--sp-7);
    text-align: center;
    box-shadow: inset 0 -4px 16px rgba(0, 0, 0, 0.08);
}

.gradient-header h1 {
    color: white;
    font-size: var(--fs-display);
    margin-bottom: var(--sp-2);
    overflow-wrap: anywhere;
}

.gradient-header p {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fs-body-md);
}

/* ─── Card de seção (com barra colorida lateral) ─────────────────── */

.card-secao {
    background: var(--paper);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-6);
    border-left: 4px solid var(--c-primary);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--sp-4);
}

.card-secao .titulo {
    font-size: var(--fs-title-sm);
    font-weight: 600;
    color: var(--c-primary);
    margin-bottom: var(--sp-2);
}

.card-secao--alerta { border-left-color: var(--c-alert); }
.card-secao--sucesso { border-left-color: var(--c-success); }
.card-secao--ouro { border-left-color: var(--gold); }

/* ─── Card de lista (procedimento, especialidade) ────────────────── */

.card-lista {
    background: var(--paper);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
    cursor: pointer;
}

.card-lista:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.card-lista .icone {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(33, 103, 161, 0.12);
    color: var(--c-primary);
    display: grid;
    place-items: center;
    font-size: 20px;
    flex-shrink: 0;
}

.card-lista .conteudo {
    flex: 1;
    min-width: 0;
}

.card-lista .titulo {
    font-size: var(--fs-body-md);
    font-weight: 600;
    color: var(--c-primary);
    margin-bottom: var(--sp-1);
}

.card-lista .subtitulo {
    font-size: var(--fs-body);
    color: var(--ink-soft);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ─── Badges e pílulas clínicas ──────────────────────────────────── */

.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.badge--verificado { background: rgba(51, 179, 115, 0.15); color: #1e7e4d; }
.badge--pendente   { background: rgba(218, 165, 32, 0.15); color: #b27a0a; }
.badge--alerta     { background: rgba(217, 51, 51, 0.12); color: var(--c-alert); }
.badge--neutro     { background: rgba(20, 35, 58, 0.06); color: var(--ink-soft); }

.pill-anestesia {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: white;
}

.pill-anestesia--geral         { background: var(--c-geral); }
.pill-anestesia--neuroeixo     { background: var(--c-neuroeixo); }
.pill-anestesia--locorregional { background: var(--c-locorregional); }
.pill-anestesia--sedacao       { background: var(--c-sedacao); }

/* ─── Botões ─────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-6);
    border-radius: var(--r-md);
    font-size: var(--fs-body-md);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out),
                background 0.15s var(--ease-out);
    min-height: 44px; /* alvo de toque mínimo (WCAG / Apple HIG) */
}

.btn--primary {
    background: var(--grad-primary);
    color: white;
    box-shadow: var(--shadow-hero);
}

.btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(33, 103, 161, 0.5);
    color: white;
}

.btn--ghost {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ink);
    border: 1px solid var(--line);
}

.btn--ghost:hover {
    background: rgba(255, 255, 255, 0.18);
}

.btn--gold {
    background: var(--gold);
    color: var(--navy-900);
}

.btn--gold:hover {
    background: var(--gold-light);
    color: var(--navy-900);
}

/* ─── Container e seção institucional ────────────────────────────── */

.container {
    max-width: var(--max-content);
    margin: 0 auto;
    padding-inline: var(--sp-7);
}

.secao {
    padding-block: var(--sp-9);
}

.secao--soft {
    background: var(--c-primary-soft);
}

.secao--navy {
    background: var(--navy-900);
    color: white;
}

/* ─── Conteúdo clínico (saída do parser) ─────────────────────────── */

.conteudo-clinico h3.subtitulo-destaque {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: var(--fs-title-sm);
    letter-spacing: 0.06em;
    color: var(--c-primary);
    background: rgba(33, 103, 161, 0.08);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    margin-block: var(--sp-5) var(--sp-3);
    text-transform: uppercase;
}

.conteudo-clinico h4.subtitulo-normal {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-body-md);
    color: var(--ink);
    margin-block: var(--sp-3) var(--sp-2);
}

.conteudo-clinico p {
    color: var(--ink);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--sp-3);
}

.conteudo-clinico ul {
    list-style: none;
    padding-left: var(--sp-4);
    margin-bottom: var(--sp-3);
}

.conteudo-clinico ul li {
    position: relative;
    padding-left: var(--sp-4);
    margin-bottom: var(--sp-2);
    color: var(--ink);
}

.conteudo-clinico ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--c-primary);
    font-weight: 700;
}

.conteudo-clinico ul.sub li::before {
    content: "—";
    color: var(--ink-soft);
}

/* ─── Disclaimer clínico ─────────────────────────────────────────── */

.disclaimer {
    background: rgba(218, 165, 32, 0.08);
    border-left: 3px solid var(--gold);
    padding: var(--sp-4) var(--sp-8);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    line-height: var(--lh-base);
}

.disclaimer strong {
    color: var(--ink);
}

/* ─── Skip link de acessibilidade ────────────────────────────────── */

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--navy-900);
    color: white;
    padding: var(--sp-3) var(--sp-5);
    z-index: var(--z-toast);
    border-radius: 0 0 var(--r-md) 0;
}

.skip-link:focus {
    top: 0;
    color: white;
    outline: 3px solid var(--gold);
}

/* ─── Foco visível ───────────────────────────────────────────────── */

:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* ─── Responsivo ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
    :root {
        --fs-display: 22px;
        --fs-title-lg: 22px;
    }

    .container {
        padding-inline: var(--sp-5);
    }

    .gradient-header {
        padding: var(--sp-7) var(--sp-7);
    }
}

/* ── Acessibilidade global (revisão jun/2026) ─────────────────────────
   Público inclui idosos e pacientes ansiosos: foco visível, alvos de
   toque >= 44px e placeholders legíveis são requisitos, não polish. */

/* Foco de teclado nítido em qualquer elemento interativo */
:focus-visible {
    outline: 3px solid var(--c-primary, #2167A1);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Inputs e selects: reforço do foco além do outline */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--c-primary, #2167A1);
    box-shadow: 0 0 0 3px rgba(33, 103, 161, 0.18);
}

/* Placeholders: navegadores usam ~54% de opacidade por padrão —
   ilegível para baixa visão. */
::placeholder {
    color: var(--ink-soft, #3d4757);
    opacity: 0.75;
}

/* Alvo de toque mínimo de 44px em botões e links de ação */
button,
.btn,
.btn-secundario,
a.voltar,
.btn-pular {
    min-height: 44px;
}

/* Leitores de tela: conteúdo só auditivo (progresso do wizard etc.) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}