/* ============================================
   PHARMDATA DESIGN SYSTEM - COLOR TOKENS
   ============================================ */

:root {
    /* ========== INSTITUTIONAL COLORS ========== */

    /* Primary */
    --emerald-abyss: #0B2D2A;
    --graphite-depth: #1F2937;  /* WCAG AAA: 10.5:1 contrast on #F8F9FA */

    /* Secondary */
    --soft-steel: #374151;      /* WCAG AAA: 8.1:1 contrast on #F8F9FA */
    --teal-intense: #1a8b7d;    /* WCAG AA: 4.6:1 contrast - enhanced from #2AA198 */

    /* Backgrounds */
    --arctic-mist: #E9ECEF;
    --cloud: #F5F8FA;           /* Ligeiramente mais azulado (warmth) */
    --soft-arctic: #E5E8EB;

    /* Accent */
    --mint-signal: #B7E4D5;

    /* ========== SEMANTIC ROLE ALIASES ==========
       Ponte retrocompatível para o vocabulário Turmalina estrutural.
       Componentes existentes continuam usando os tokens institucionais;
       novos consumidores devem preferir estes papéis funcionais. */

    /* Superfícies — da base de trabalho à camada rebaixada */
    --surface-base: var(--cloud);
    --surface-raised: var(--arctic-mist);
    --surface-sunken: var(--soft-arctic);

    /* Conteúdo e estrutura */
    --text-primary: var(--graphite-depth);
    --text-secondary: var(--soft-steel);
    --border-default: var(--soft-arctic);

    /* Sinal — ação, evidência, conexão ou seleção contextual */
    --signal-primary: var(--teal-intense);
    --signal-subtle: var(--mint-signal);

    /* Superfícies institucionais: não invertem entre temas */
    --surface-institutional: var(--emerald-abyss-fixed);

    /* ========== IDENTIFIERS & CODES ========== */
    /* PharmCodes, EANs, B_CODEs — elementos monospace de identificação */
    --code-color: #1a8b7d;          /* teal-intense: identidade PharmData */
    --code-color-muted: #4daa9f;    /* versão suavizada para códigos secundários — WCAG AA sobre cloud */

    /* ========== SHADOW & ELEVATION TOKENS ========== */
    /* Sombras mais pronunciadas para melhor definição visual */

    --shadow-xs: 0 1px 3px 0 rgba(11, 45, 42, 0.12), 0 1px 2px -1px rgba(11, 45, 42, 0.08);
    --shadow-sm: 0 2px 6px -1px rgba(11, 45, 42, 0.15), 0 1px 4px -2px rgba(11, 45, 42, 0.12);
    --shadow-md: 0 4px 12px -2px rgba(11, 45, 42, 0.18), 0 2px 6px -3px rgba(11, 45, 42, 0.14);
    --shadow-lg: 0 10px 24px -4px rgba(11, 45, 42, 0.22), 0 4px 10px -4px rgba(11, 45, 42, 0.16);
    --shadow-xl: 0 20px 40px -8px rgba(11, 45, 42, 0.28), 0 8px 16px -6px rgba(11, 45, 42, 0.18);

    /* ========== GRADIENT ACCENTS ========== */

    --gradient-mint: linear-gradient(135deg, #B7E4D5 0%, rgba(183, 228, 213, 0.3) 100%);
    --gradient-emerald: linear-gradient(135deg, #0B2D2A 0%, rgba(11, 45, 42, 0.8) 100%);
    --gradient-subtle: linear-gradient(180deg, rgba(183, 228, 213, 0.05) 0%, transparent 100%);


    /* ========== SEMANTIC COLORS ========== */

    /* Status */
    --success: #10B981;
    --success-light: #D1FAE5;
    --warning: #E65100;
    --warning-light: #FFF3E0;
    --error: #EF4444;
    --error-light: #FEE2E2;
    --info: #3B82F6;
    --info-light: #DBEAFE;


    /* ========== DROPS - PHARMACEUTICAL CATEGORIES ========== */

    /* VTM - Molécula Terapêutica Virtual */
    --drop-vtm-bg: #E0F7FA;
    --drop-vtm-text: #00838F;

    /* DEC - Denominações Comerciais */
    --drop-dec-bg: #FCE4EC;
    --drop-dec-text: #AD1457;

    /* SUB - Substâncias Ativas */
    --drop-sub-bg: #E3F2FD;
    --drop-sub-text: #1565C0;

    /* LAB - Laboratórios */
    --drop-lab-bg: #FFF3E0;
    --drop-lab-text: #EF6C00;

    /* CNC - Concentrações */
    --drop-cnc-bg: #E8F5E9;
    --drop-cnc-text: #2E7D32;

    /* GTS - Gotas (Soluções Orais) */
    --drop-gts-bg: #E0F2F1;
    --drop-gts-text: #00695C;

    /* FOFA - Formas Farmacêuticas */
    --drop-fofa-bg: #F3E5F5;
    --drop-fofa-text: #7B1FA2;

    /* FAP - Formas de Apresentação */
    --drop-fap-bg: #E0F2F1;
    --drop-fap-text: #00695C;

    /* VIA - Vias de Administração */
    --drop-via-bg: #EFEBE9;
    --drop-via-text: #5D4037;

    /* EMB - Embalagens */
    --drop-emb-bg: #E8EAF6;
    --drop-emb-text: #303F9F;

    /* DISP - Dispositivos / Acessórios */
    --drop-dispositivo-bg: #ECEFF1;
    --drop-dispositivo-text: #455A64;

    /* CAP - Capacidades */
    --drop-cap-bg: #FFFDE7;
    --drop-cap-text: #F57F17;

    /* CHG - Enriquecimentos */
    --drop-chg-bg: #FAFAFA;
    --drop-chg-text: #616161;

    /* UNK - Não Reconhecidos */
    --drop-unk-bg: #FFEBEE;
    --drop-unk-text: #C62828;


    /* ========== DROPS - REGULATORY CATEGORIES (ANVISA) ========== */

    /* Genérico — amarelo-G da ANVISA, distinto do azul do Similar */
    --drop-generico-bg: #FEF9C3;
    --drop-generico-text: #A16207;

    /* Similar */
    --drop-similar-bg: #E3F2FD;
    --drop-similar-text: #1565C0;

    /* Novo */
    --drop-novo-bg: #E8F5E9;
    --drop-novo-text: #2E7D32;

    /* Biológico */
    --drop-biologico-bg: #F3E5F5;
    --drop-biologico-text: #7B1FA2;

    /* Fitoterápico */
    --drop-fitoterapico-bg: #E8F5E9;
    --drop-fitoterapico-text: #558B2F;

    /* Específico */
    --drop-especifico-bg: #FFF3E0;
    --drop-especifico-text: #E65100;

    /* Radiofármaco */
    --drop-radiofarmaco-bg: #FFFDE7;
    --drop-radiofarmaco-text: #F57F17;

    /* Produto de Terapia Avançada */
    --drop-terapia-avancada-bg: #FCE4EC;
    --drop-terapia-avancada-text: #AD1457;

    /* Não classificado */
    --drop-nao-classificado-bg: #F5F5F5;
    --drop-nao-classificado-text: #616161;


    /* ========== DROPS - OPERATIONAL ========== */

    /* Registro/Regulatório */
    --drop-registro-bg: #E1F5FE;
    --drop-registro-text: #0277BD;

    /* Prescrever */
    --drop-prescrever-bg: #F3E5F5;
    --drop-prescrever-text: #6A1B9A;

    /* Dispensar */
    --drop-dispensar-bg: #FFF3E0;
    --drop-dispensar-text: #EF6C00;

    /* Administrar */
    --drop-administrar-bg: #E8F5E9;
    --drop-administrar-text: #2E7D32;


    /* ========== DROPS - WORKFLOW STATUS ========== */

    /* Draft */
    --drop-draft-bg: #F5F5F5;
    --drop-draft-text: #616161;

    /* In Review */
    --drop-review-bg: #FFF8E1;
    --drop-review-text: #F57C00;

    /* Approved */
    --drop-approved-bg: #E8F5E9;
    --drop-approved-text: #4CAF50;

    /* Rejected */
    --drop-rejected-bg: #FFEBEE;
    --drop-rejected-text: #EF5350;

    /* Deprecated */
    --drop-deprecated-bg: #EFEBE9;
    --drop-deprecated-text: #6D4C41;


    /* ========== DROPS - DATA SOURCES ========== */

    /* SPOR/EMA */
    --drop-spor-bg: #E3F2FD;
    --drop-spor-text: #1565C0;

    /* SNOMED */
    --drop-snomed-bg: #FFF3E0;
    --drop-snomed-text: #E65100;

    /* ANVISA */
    --drop-anvisa-bg: #E8F5E9;
    --drop-anvisa-text: #1B5E20;

    /* FDA */
    --drop-fda-bg: #E8EAF6;
    --drop-fda-text: #283593;

    /* WHO */
    --drop-who-bg: #E1F5FE;
    --drop-who-text: #01579B;

    /* OBM - Ontologia Brasileira de Medicamentos */
    --drop-obm-bg: #F3E5F5;
    --drop-obm-text: #7B1FA2;

    /* TUSS - Terminologia Unificada da Saúde Suplementar */
    --drop-tuss-bg: #E0F2F1;
    --drop-tuss-text: #00695C;

    /* Brasíndice */
    --drop-brasindice-bg: #FCE4EC;
    --drop-brasindice-text: #AD1457;


    /* ========== DROPS - EVIDENCE GROUNDING ========== */

    /* Fundamentos — Evidência externa com score máximo */
    --drop-fundamento-max-bg: #E0F2F1;
    --drop-fundamento-max-text: #00695C;

    /* Fundamentos — Evidência parcial */
    --drop-fundamento-parcial-bg: #FFF8E1;
    --drop-fundamento-parcial-text: #F57C00;

    /* Fundamentos — Sem evidência externa */
    --drop-fundamento-ausente-bg: #FFEBEE;
    --drop-fundamento-ausente-text: #C62828;

    /* Fundamentos — Divergência jurisdicional */
    --drop-fundamento-divergencia-bg: #E8EAF6;
    --drop-fundamento-divergencia-text: #283593;


    /* ========== DROPS - DATA QUALITY ========== */

    /* Complete */
    --drop-complete-bg: #E8F5E9;
    --drop-complete-text: #4CAF50;

    /* Partial */
    --drop-partial-bg: #FFF8E1;
    --drop-partial-text: #F57F17;

    /* Missing */
    --drop-missing-bg: #FFEBEE;
    --drop-missing-text: #EF5350;

    /* Enriched */
    --drop-enriched-bg: #E3F2FD;
    --drop-enriched-text: #1565C0;

    /* ========== FIXED TOKENS — não invertem em dark mode ==========
       Para superfícies institucionais (header, footer, hero) que precisam
       permanecer como âncora visual em ambos os temas. NÃO redefinir no
       bloco dark-mode: a permanência é o ponto. */
    --emerald-abyss-fixed: #0B2D2A;
    --graphite-depth-fixed: #1F2937;
    --soft-steel-fixed: #374151;
    --cloud-fixed: #F5F8FA;
    --arctic-mist-fixed: #E9ECEF;
    --mint-signal-fixed: #B7E4D5;

    /* ========== DESTRUCTIVE ACTION ==========
       Botão destrutivo precisa de contraste >=4.5:1 com texto branco em
       ambos os temas. Em light usa --error; em dark vira vermelho escuro
       (ver bloco dark-mode). */
    --btn-danger-bg: var(--error);
    --btn-danger-bg-hover: #B91C1C;
}


/* ========== TAILWIND EXTEND FORMAT ========== */

/* ========== DARK MODE ========== */

html.dark-mode,
:root.dark-mode,
[data-theme="dark"] {
    /* Backgrounds invertidos */
    --cloud: #0d1117;
    --arctic-mist: #161b22;
    --soft-arctic: #21262d;

    /* Textos invertidos - mais claros para melhor legibilidade */
    --graphite-depth: #f0f6fc;
    --soft-steel: #b1bac4;

    /* Primary invertido */
    --emerald-abyss: #7ee2d0;

    /* Accent ajustado para dark */
    --mint-signal: #1a3d3a;
    --teal-intense: #3dc9bd;

    /* Identifiers & Codes - dark */
    --code-color: #5bd4c8;          /* mais brilhante que teal-intense dark */
    --code-color-muted: #7ee2d8;    /* alta legibilidade sobre arctic-mist dark */

    /* Shadows mais fortes em dark - com glow sutil de mint para destaque */
    --shadow-xs: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(183, 228, 213, 0.05);
    --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(183, 228, 213, 0.08);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(183, 228, 213, 0.1);
    --shadow-lg: 0 8px 20px -4px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(183, 228, 213, 0.12);
    --shadow-xl: 0 16px 32px -8px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(183, 228, 213, 0.15);

    /* Gradients ajustados */
    --gradient-mint: linear-gradient(135deg, #1a3d3a 0%, rgba(26, 61, 58, 0.3) 100%);
    --gradient-emerald: linear-gradient(135deg, #B7E4D5 0%, rgba(183, 228, 213, 0.8) 100%);
    --gradient-subtle: linear-gradient(180deg, rgba(183, 228, 213, 0.08) 0%, transparent 100%);

    /* Status colors - mais vibrantes em dark */
    --success: #22c55e;
    --success-light: rgba(34, 197, 94, 0.15);
    --warning: #f97316;
    --warning-light: rgba(249, 115, 22, 0.15);
    --error: #f87171;
    --error-light: rgba(248, 113, 113, 0.15);
    --info: #60a5fa;
    --info-light: rgba(96, 165, 250, 0.15);

    /* ========== DROPS DARK MODE ========== */

    /* VTM - Molécula Terapêutica Virtual */
    --drop-vtm-bg: rgba(0, 131, 143, 0.15);
    --drop-vtm-text: #22d3ee;

    /* DEC - Denominações Comerciais */
    --drop-dec-bg: rgba(173, 20, 87, 0.15);
    --drop-dec-text: #f472b6;

    /* SUB - Substâncias Ativas */
    --drop-sub-bg: rgba(21, 101, 192, 0.15);
    --drop-sub-text: #60a5fa;

    /* LAB - Laboratórios */
    --drop-lab-bg: rgba(239, 108, 0, 0.15);
    --drop-lab-text: #fb923c;

    /* CNC - Concentrações */
    --drop-cnc-bg: rgba(46, 125, 50, 0.15);
    --drop-cnc-text: #4ade80;

    /* GTS - Gotas */
    --drop-gts-bg: rgba(0, 105, 92, 0.15);
    --drop-gts-text: #2dd4bf;

    /* FOFA - Formas Farmacêuticas */
    --drop-fofa-bg: rgba(123, 31, 162, 0.15);
    --drop-fofa-text: #c084fc;

    /* FAP - Formas de Apresentação */
    --drop-fap-bg: rgba(0, 105, 92, 0.15);
    --drop-fap-text: #2dd4bf;

    /* VIA - Vias de Administração */
    --drop-via-bg: rgba(93, 64, 55, 0.2);
    --drop-via-text: #d6bcab;

    /* EMB - Embalagens */
    --drop-emb-bg: rgba(48, 63, 159, 0.15);
    --drop-emb-text: #818cf8;

    /* DISP - Dispositivos / Acessórios */
    --drop-dispositivo-bg: rgba(69, 90, 100, 0.2);
    --drop-dispositivo-text: #b0bec5;

    /* CAP - Capacidades */
    --drop-cap-bg: rgba(245, 127, 23, 0.15);
    --drop-cap-text: #fbbf24;

    /* CHG - Enriquecimentos */
    --drop-chg-bg: rgba(97, 97, 97, 0.2);
    --drop-chg-text: #9ca3af;

    /* UNK - Não Reconhecidos */
    --drop-unk-bg: rgba(198, 40, 40, 0.15);
    --drop-unk-text: #f87171;

    /* Operational */
    --drop-registro-bg: rgba(2, 119, 189, 0.15);
    --drop-registro-text: #38bdf8;

    --drop-prescrever-bg: rgba(106, 27, 154, 0.15);
    --drop-prescrever-text: #c084fc;

    --drop-dispensar-bg: rgba(239, 108, 0, 0.15);
    --drop-dispensar-text: #fb923c;

    --drop-administrar-bg: rgba(46, 125, 50, 0.15);
    --drop-administrar-text: #4ade80;

    /* Workflow Status */
    --drop-draft-bg: rgba(97, 97, 97, 0.2);
    --drop-draft-text: #9ca3af;

    --drop-review-bg: rgba(245, 124, 0, 0.15);
    --drop-review-text: #fb923c;

    --drop-approved-bg: rgba(76, 175, 80, 0.15);
    --drop-approved-text: #4ade80;

    --drop-rejected-bg: rgba(239, 83, 80, 0.15);
    --drop-rejected-text: #f87171;

    --drop-deprecated-bg: rgba(109, 76, 65, 0.2);
    --drop-deprecated-text: #d6bcab;

    /* Data Sources */
    --drop-spor-bg: rgba(21, 101, 192, 0.15);
    --drop-spor-text: #60a5fa;

    --drop-snomed-bg: rgba(230, 81, 0, 0.15);
    --drop-snomed-text: #fb923c;

    --drop-anvisa-bg: rgba(27, 94, 32, 0.15);
    --drop-anvisa-text: #4ade80;

    --drop-fda-bg: rgba(40, 53, 147, 0.15);
    --drop-fda-text: #818cf8;

    --drop-who-bg: rgba(1, 87, 155, 0.15);
    --drop-who-text: #38bdf8;

    --drop-obm-bg: rgba(123, 31, 162, 0.15);
    --drop-obm-text: #c084fc;

    --drop-tuss-bg: rgba(0, 105, 92, 0.15);
    --drop-tuss-text: #2dd4bf;

    --drop-brasindice-bg: rgba(173, 20, 87, 0.15);
    --drop-brasindice-text: #f472b6;

    /* ========== DROPS - REGULATORY CATEGORIES (ANVISA) - DARK ========== */

    --drop-generico-bg: rgba(161, 98, 7, 0.15);
    --drop-generico-text: #fcd34d;

    --drop-similar-bg: rgba(21, 101, 192, 0.15);
    --drop-similar-text: #60a5fa;

    --drop-novo-bg: rgba(46, 125, 50, 0.15);
    --drop-novo-text: #4ade80;

    --drop-biologico-bg: rgba(123, 31, 162, 0.15);
    --drop-biologico-text: #c084fc;

    --drop-fitoterapico-bg: rgba(85, 139, 47, 0.15);
    --drop-fitoterapico-text: #a3e635;

    --drop-especifico-bg: rgba(230, 81, 0, 0.15);
    --drop-especifico-text: #fb923c;

    --drop-radiofarmaco-bg: rgba(245, 127, 23, 0.15);
    --drop-radiofarmaco-text: #fbbf24;

    --drop-terapia-avancada-bg: rgba(173, 20, 87, 0.15);
    --drop-terapia-avancada-text: #f472b6;

    --drop-nao-classificado-bg: rgba(97, 97, 97, 0.2);
    --drop-nao-classificado-text: #9ca3af;

    /* Evidence Grounding */
    --drop-fundamento-max-bg: rgba(0, 105, 92, 0.15);
    --drop-fundamento-max-text: #2dd4bf;

    --drop-fundamento-parcial-bg: rgba(245, 124, 0, 0.15);
    --drop-fundamento-parcial-text: #fb923c;

    --drop-fundamento-ausente-bg: rgba(198, 40, 40, 0.15);
    --drop-fundamento-ausente-text: #f87171;

    --drop-fundamento-divergencia-bg: rgba(40, 53, 147, 0.15);
    --drop-fundamento-divergencia-text: #818cf8;

    /* Data Quality */
    --drop-complete-bg: rgba(76, 175, 80, 0.15);
    --drop-complete-text: #4ade80;

    --drop-partial-bg: rgba(245, 127, 23, 0.15);
    --drop-partial-text: #fbbf24;

    --drop-missing-bg: rgba(239, 83, 80, 0.15);
    --drop-missing-text: #f87171;

    --drop-enriched-bg: rgba(21, 101, 192, 0.15);
    --drop-enriched-text: #60a5fa;

    /* Destructive action — em dark, --error (#f87171) é claro demais para
       texto branco (2.77:1, falha WCAG AA). Vermelho escuro garante ~6:1. */
    --btn-danger-bg: #B91C1C;
    --btn-danger-bg-hover: #991B1B;
}

/* ========== TAILWIND EXTEND FORMAT ========== */

/*
  Para usar com tailwind.config.js:

  module.exports = {
    theme: {
      extend: {
        colors: {
          'emerald-abyss': '#0B2D2A',
          'graphite-depth': '#2C3E50',
          'soft-steel': '#5A6268',
          'arctic-mist': '#E9ECEF',
          'mint-signal': '#B7E4D5',
          'teal-intense': '#2AA198',
          'cloud': '#F8F9FA',
          'soft-arctic': '#E5E8EB',
        }
      }
    }
  }
*/

/**
 * TIPOGRAFIA - PharmData Design System v2.0
 * Stack: EB Garamond (Display) + IBM Plex Sans (UI) + IBM Plex Mono (Code)
 *
 * FILOSOFIA:
 * Elegância clássica (Garamond) + Precisão técnica (IBM Plex)
 * Coesão visual entre logo (Garamond) e interface
 * Hierarquia clara através de mistura intencional de fontes
 * Legibilidade superior para dados farmacêuticos densos
 */

/* ============================================
   1. FONT IMPORTS (Google Fonts)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400&display=swap&subset=latin');

/* ============================================
   2. ROOT VARIABLES
   ============================================ */

:root {
    /* FONT FAMILIES */
    --font-display: 'EB Garamond', 'Georgia', 'Times New Roman', serif;
    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

    /* FONT SIZES */
    --text-xs: 0.75rem;      /* 12px - Caption */
    --text-sm: 0.875rem;     /* 14px - Label, Code */
    --text-base: 1rem;       /* 16px - Body */
    --text-md: 1.125rem;     /* 18px - H3 */
    --text-lg: 1.25rem;      /* 20px - Não usado */
    --text-xl: 1.5rem;       /* 24px - H2 */
    --text-2xl: 2rem;        /* 32px - H1 */

    /* FONT WEIGHTS */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* LINE HEIGHTS */
    --leading-tight: 1.2;     /* H1 - Compacto */
    --leading-snug: 1.3;      /* H2 - Apertado */
    --leading-normal: 1.4;    /* H3, Labels - Normal */
    --leading-relaxed: 1.5;   /* Caption, Code - Relaxado */
    --leading-loose: 1.6;     /* Body - Solto para leitura confortável */

    /* LETTER SPACING */
    --tracking-tighter: -0.01em;   /* H1 - Aperto elegante */
    --tracking-tight: -0.005em;    /* H2 - Sutil */
    --tracking-normal: 0;          /* Default */
    --tracking-wide: 0.01em;       /* Labels - Clarity */
    --tracking-wider: 0.015em;     /* Caption - Legibilidade em tamanho pequeno */
}

/* ============================================
   3. FONT SMOOTHING & RENDERING
   ============================================ */

html,
body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-loose);
    color: var(--text-primary, var(--graphite-depth));
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================
   4. HEADING STYLES
   ============================================ */

.text-h1 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--emerald-abyss, #0B2D2A);
    margin-bottom: 1rem;
}

.text-h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--emerald-abyss, #0B2D2A);
    margin-bottom: 0.75rem;
}

.text-h3 {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--graphite-depth, #1F2937);
    margin-bottom: 0.5rem;
}

.text-h4 {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--graphite-depth, #1F2937);
    margin-bottom: 0.375rem;
}

.text-h5 {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--soft-steel, #374151);
    margin-bottom: 0.25rem;
}

.text-h6 {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--soft-steel, #374151);
    margin-bottom: 0.25rem;
}

/* ============================================
   4.1 CAPTION & OVERLINE STYLES
   ============================================ */

.text-caption {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--soft-steel, #374151);
}

.text-overline {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: var(--weight-bold);
    line-height: var(--leading-normal);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--soft-steel, #374151);
}

.text-subtitle {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--soft-steel, #374151);
}

.text-subtitle-lg {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--soft-steel, #374151);
}

/* ============================================
   4.2 DISPLAY STYLES (Hero text)
   ============================================ */

.text-display-lg {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: var(--weight-bold);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--emerald-abyss, #0B2D2A);
}

.text-display {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: var(--weight-bold);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--emerald-abyss, #0B2D2A);
}

.text-display-sm {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--emerald-abyss, #0B2D2A);
}

/* Fallback para elementos semânticos */
h1 { @apply text-h1; }
h2 { @apply text-h2; }
h3 { @apply text-h3; }
h4 { @apply text-h4; }
h5 { @apply text-h5; }
h6 { @apply text-h6; }

/* ============================================
   5. BODY TEXT STYLES
   ============================================ */

.text-body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-loose);
    letter-spacing: var(--tracking-normal);
    color: var(--graphite-depth, #1F2937);
}

.text-body-medium {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    line-height: var(--leading-loose);
    color: var(--graphite-depth, #1F2937);
}

p {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-loose);
    letter-spacing: var(--tracking-normal);
    color: var(--text-primary, var(--graphite-depth));
}

/* ============================================
   6. UI TEXT STYLES
   ============================================ */

.text-label {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    color: var(--graphite-depth, #1F2937);
}

.text-caption {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-wider);
    color: var(--soft-steel, #374151);
}

/* ============================================
   7. TECHNICAL TEXT STYLES
   ============================================ */

.text-code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-normal);
    background: var(--arctic-mist, #E9ECEF);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    color: var(--graphite-depth, #1F2937);
}

code, pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

/* ============================================
   8. UTILITY CLASSES
   ============================================ */

.font-display { font-family: var(--font-display); }
.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); }

.font-regular { font-weight: var(--weight-regular); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }

/* ============================================
   9. RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 640px) {
    /* Mobile: Reduz tamanhos para economizar espaço */

    .text-h1 {
        font-size: 1.75rem; /* 28px */
        margin-bottom: 0.75rem;
    }

    .text-h2 {
        font-size: 1.25rem; /* 20px */
        margin-bottom: 0.5rem;
    }

    .text-h3 {
        font-size: 1rem; /* 16px */
    }

    .text-body {
        font-size: 0.875rem; /* 14px */
        line-height: var(--leading-normal);
    }
}

@media (min-width: 1280px) {
    /* Desktop large: Mais espaço respirável */

    .text-h1 {
        margin-bottom: 1.25rem;
    }

    .text-h2 {
        margin-bottom: 1rem;
    }
}

/* ============================================
   10. ACCESSIBILITY
   ============================================ */

/* Garantir contraste mínimo WCAG AA */
@media (prefers-contrast: high) {
    .text-caption {
        color: var(--graphite-depth, #1F2937);
    }
}

/* Respeitar preferências de redução de movimento */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

/* ============================================
   11. DARK MODE PREPARADO (FUTURO)
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Placeholder para futuro dark mode */
    /* Implementação será adicionada quando necessário */
}

/**
 * ESPAÇAMENTO - PharmData Design System v2.0
 * Escala granular para margens, paddings e gaps.
 *
 * ATUALIZAÇÃO: Adicionados valores intermediários para
 * maior flexibilidade em layouts complexos.
 */

:root {
    /* ===================
       SPACING SCALE
       =================== */

    --space-0: 0;           /* 0px */
    --space-px: 1px;        /* 1px - borders, fine adjustments */
    --space-0.5: 0.125rem;  /* 2px */
    --space-1: 0.25rem;     /* 4px */
    --space-1.5: 0.375rem;  /* 6px */
    --space-2: 0.5rem;      /* 8px */
    --space-2.5: 0.625rem;  /* 10px */
    --space-3: 0.75rem;     /* 12px */
    --space-3.5: 0.875rem;  /* 14px */
    --space-4: 1rem;        /* 16px */
    --space-5: 1.25rem;     /* 20px */
    --space-6: 1.5rem;      /* 24px */
    --space-7: 1.75rem;     /* 28px */
    --space-8: 2rem;        /* 32px */
    --space-9: 2.25rem;     /* 36px */
    --space-10: 2.5rem;     /* 40px */
    --space-11: 2.75rem;    /* 44px */
    --space-12: 3rem;       /* 48px */
    --space-14: 3.5rem;     /* 56px */
    --space-16: 4rem;       /* 64px */
    --space-20: 5rem;       /* 80px */
    --space-24: 6rem;       /* 96px */
    --space-28: 7rem;       /* 112px */
    --space-32: 8rem;       /* 128px */

    /* ===================
       SEMANTIC ALIASES (Backward Compatible)
       =================== */

    --space-2xs: var(--space-1);    /* 4px */
    --space-xs: var(--space-2);     /* 8px */
    --space-sm: var(--space-3);     /* 12px */
    --space-md: var(--space-4);     /* 16px */
    --space-lg: var(--space-6);     /* 24px */
    --space-xl: var(--space-8);     /* 32px */
    --space-2xl: var(--space-10);   /* 40px - NEW intermediate */
    --space-3xl: var(--space-12);   /* 48px */
    --space-4xl: var(--space-16);   /* 64px */
    --space-5xl: var(--space-20);   /* 80px */

    /* ===================
       COMPONENT-SPECIFIC SPACING
       =================== */

    /* Card padding */
    --card-padding-sm: var(--space-3);
    --card-padding-md: var(--space-4);
    --card-padding-lg: var(--space-6);

    /* Section spacing */
    --section-gap-sm: var(--space-6);
    --section-gap-md: var(--space-10);
    --section-gap-lg: var(--space-16);

    /* Form field spacing */
    --field-gap: var(--space-4);
    --field-group-gap: var(--space-6);
    --form-section-gap: var(--space-8);

    /* Table cell padding */
    --cell-padding-sm: var(--space-2) var(--space-3);
    --cell-padding-md: var(--space-3) var(--space-4);
    --cell-padding-lg: var(--space-4) var(--space-6);

    /* Modal padding */
    --modal-padding: var(--space-6);
    --modal-header-padding: var(--space-4) var(--space-6);
    --modal-footer-padding: var(--space-4) var(--space-6);

    /* Inline spacing (buttons, badges) */
    --inline-gap-sm: var(--space-1);
    --inline-gap-md: var(--space-2);
    --inline-gap-lg: var(--space-3);
}

/* ===================
   STACK UTILITIES
   Vertical spacing between children
   =================== */

.stack-2xs > * + * { margin-top: var(--space-1); }
.stack-xs > * + * { margin-top: var(--space-2); }
.stack-sm > * + * { margin-top: var(--space-3); }
.stack-md > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.stack-xl > * + * { margin-top: var(--space-8); }
.stack-2xl > * + * { margin-top: var(--space-10); }
.stack-3xl > * + * { margin-top: var(--space-12); }

/* ===================
   GAP UTILITIES
   Flex/Grid gap
   =================== */

.gap-0 { gap: 0; }
.gap-px { gap: 1px; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }

/* Semantic gap aliases */
.gap-2xs { gap: var(--space-1); }
.gap-xs { gap: var(--space-2); }
.gap-sm { gap: var(--space-3); }
.gap-md { gap: var(--space-4); }
.gap-lg { gap: var(--space-6); }
.gap-xl { gap: var(--space-8); }

/* Row/Column specific gaps */
.gap-x-sm { column-gap: var(--space-3); }
.gap-x-md { column-gap: var(--space-4); }
.gap-x-lg { column-gap: var(--space-6); }
.gap-y-sm { row-gap: var(--space-3); }
.gap-y-md { row-gap: var(--space-4); }
.gap-y-lg { row-gap: var(--space-6); }

/* ===================
   PADDING UTILITIES
   =================== */

.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

/* ===================
   MARGIN UTILITIES
   =================== */

.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/**
 * LAYOUT TOKENS - PharmData Design System v2.0
 * Breakpoints, Z-Index, Densidade, Containers
 */

:root {
    /* ===================
       BREAKPOINTS
       Mobile-first approach
       =================== */

    --breakpoint-xs: 480px;   /* Small phones */
    --breakpoint-sm: 640px;   /* Large phones */
    --breakpoint-md: 768px;   /* Tablets */
    --breakpoint-lg: 1024px;  /* Small laptops */
    --breakpoint-xl: 1280px;  /* Desktops */
    --breakpoint-2xl: 1536px; /* Large desktops */

    /* Container max-widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1440px;
    --container-full: 100%;

    /* ===================
       Z-INDEX SCALE
       Prevent z-index wars with standardized layers
       =================== */

    --z-below: -1;          /* Hidden/below content */
    --z-base: 0;            /* Default layer */
    --z-raised: 10;         /* Slightly elevated (cards on hover) */
    --z-dropdown: 100;      /* Dropdowns, select menus */
    --z-sticky: 200;        /* Sticky headers, sidebars */
    --z-overlay: 300;       /* Overlays, backdrops */
    --z-modal: 400;         /* Modals, dialogs */
    --z-popover: 500;       /* Popovers, tooltips */
    --z-toast: 600;         /* Toast notifications */
    --z-tooltip: 700;       /* Tooltips (highest interactive) */
    --z-max: 9999;          /* Emergency override only */

    /* ===================
       ICON SIZES
       Consistent icon sizing by context
       =================== */

    --icon-2xs: 0.625rem;   /* 10px - Micro indicators */
    --icon-xs: 0.75rem;     /* 12px - Inline with text-xs */
    --icon-sm: 0.875rem;    /* 14px - Inline with text-sm, badges */
    --icon-md: 1rem;        /* 16px - Default, buttons, inputs */
    --icon-lg: 1.25rem;     /* 20px - Section headers */
    --icon-xl: 1.5rem;      /* 24px - Cards, navigation */
    --icon-2xl: 2rem;       /* 32px - Empty states, illustrations */
    --icon-3xl: 2.5rem;     /* 40px - Hero sections */
    --icon-4xl: 3rem;       /* 48px - Large empty states */

    /* ===================
       BORDER RADIUS
       =================== */

    --radius-none: 0;
    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.375rem;  /* 6px */
    --radius-lg: 0.5rem;    /* 8px */
    --radius-xl: 0.75rem;   /* 12px */
    --radius-2xl: 1rem;     /* 16px */
    --radius-3xl: 1.5rem;   /* 24px */
    --radius-full: 9999px;  /* Pill shape */
    --radius-pill: 9999px;  /* Alias de --radius-full, usado pelo preset compilado */

    /* ===================
       ASPECT RATIOS
       =================== */

    --aspect-square: 1 / 1;
    --aspect-video: 16 / 9;
    --aspect-photo: 4 / 3;
    --aspect-portrait: 3 / 4;
}

/* ===================
   DENSITY VARIANTS
   Adapt interface density for different use cases
   =================== */

/* Default: Comfortable density */
:root,
[data-density="comfortable"] {
    --density-multiplier: 1;
    --density-text-base: 1rem;
    --density-line-height: 1.6;
    --density-cell-padding: var(--space-3) var(--space-4);
    --density-button-padding: var(--space-2) var(--space-4);
    --density-input-padding: var(--space-2) var(--space-3);
    --density-card-padding: var(--space-4);
    --density-row-height: 3rem;
}

/* Compact: For data-dense interfaces */
[data-density="compact"] {
    --density-multiplier: 0.85;
    --density-text-base: 0.875rem;
    --density-line-height: 1.4;
    --density-cell-padding: var(--space-2) var(--space-3);
    --density-button-padding: var(--space-1) var(--space-3);
    --density-input-padding: var(--space-1) var(--space-2);
    --density-card-padding: var(--space-3);
    --density-row-height: 2.25rem;
}

/* Spacious: For focus/reading modes */
[data-density="spacious"] {
    --density-multiplier: 1.15;
    --density-text-base: 1.125rem;
    --density-line-height: 1.8;
    --density-cell-padding: var(--space-4) var(--space-6);
    --density-button-padding: var(--space-3) var(--space-6);
    --density-input-padding: var(--space-3) var(--space-4);
    --density-card-padding: var(--space-6);
    --density-row-height: 3.5rem;
}

/* Apply density to common elements */
[data-density] {
    font-size: var(--density-text-base);
    line-height: var(--density-line-height);
}

[data-density] .btn {
    padding: var(--density-button-padding);
}

[data-density] input,
[data-density] select,
[data-density] textarea {
    padding: var(--density-input-padding);
}

[data-density] td,
[data-density] th {
    padding: var(--density-cell-padding);
}

[data-density] .card {
    padding: var(--density-card-padding);
}

[data-density] tr {
    height: var(--density-row-height);
}

/* ===================
   CONTAINER UTILITIES
   =================== */

.container {
    width: 100%;
    max-width: var(--container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }
.container-xl { max-width: var(--container-xl); }
.container-2xl { max-width: var(--container-2xl); }
.container-full { max-width: var(--container-full); }

/* ===================
   RESPONSIVE UTILITIES
   =================== */

/* Hide/show at breakpoints */
@media (max-width: 639px) {
    .hidden-mobile { display: none !important; }
}

@media (min-width: 640px) and (max-width: 767px) {
    .hidden-sm { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hidden-md { display: none !important; }
}

@media (min-width: 1024px) {
    .hidden-lg { display: none !important; }
    .show-mobile { display: none !important; }
}

@media (max-width: 1023px) {
    .show-lg { display: none !important; }
}

/* ============================================
   VISUAL ENHANCEMENTS - Pharmdata Design System
   Adiciona vida visual mantendo elegância
   ============================================ */

/* ========== BODY BACKGROUND ========== */

body {
    background: linear-gradient(180deg,
        var(--cloud, #F5F8FA) 0%,
        var(--cloud, #F5F8FA) 50%,
        rgba(183, 228, 213, 0.02) 100%);
    background-attachment: fixed;
}

/* ========== CARDS & CONTAINERS ========== */

.section,
[class*="card"],
[class*="container"],
main > div {
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(11, 45, 42, 0.1));
    border: 1px solid rgba(183, 228, 213, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.section:hover,
[class*="card"]:hover {
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(11, 45, 42, 0.15));
    border-color: rgba(183, 228, 213, 0.3);
}

/* ========== HEADERS ========== */

header {
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(11, 45, 42, 0.15));
    border-bottom: 1px solid rgba(183, 228, 213, 0.2);
    background: linear-gradient(135deg,
        var(--emerald-abyss, #0B2D2A) 0%,
        rgba(11, 45, 42, 0.95) 100%);
}

/* ========== BUTTONS ========== */

button[class*="bg-forest"],
button[class*="bg-emerald"],
input[type="submit"],
input[type="button"] {
    box-shadow: 0 2px 4px rgba(11, 45, 42, 0.15);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

button[class*="bg-forest"]:hover,
button[class*="bg-emerald"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(11, 45, 42, 0.15));
    transform: translateY(-2px);
}

button[class*="bg-forest"]:active,
button[class*="bg-emerald"]:active,
input[type="submit"]:active,
input[type="button"]:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(11, 45, 42, 0.1);
}

/* ========== TABLES ========== */

table {
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(11, 45, 42, 0.1));
    border-collapse: separate;
    border-spacing: 0;
}

thead {
    background: linear-gradient(180deg,
        rgba(183, 228, 213, 0.08) 0%,
        rgba(183, 228, 213, 0.04) 100%);
}

tbody tr:hover {
    background: rgba(183, 228, 213, 0.05);
    transition: background-color 0.15s ease;
}

/* ========== INPUTS & FORMS ========== */

input,
textarea,
select {
    border: 1px solid rgba(183, 228, 213, 0.3);
    box-shadow: inset 0 1px 2px rgba(11, 45, 42, 0.04);
    transition: all 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--mint-signal, #B7E4D5);
    box-shadow: 0 0 0 3px rgba(183, 228, 213, 0.1),
                inset 0 1px 2px rgba(11, 45, 42, 0.04);
    outline: none;
}

/* ========== BADGES & PILLS ========== */

[class*="badge"],
[class*="pill"],
[class*="drop"] {
    box-shadow: 0 1px 3px rgba(11, 45, 42, 0.08);
    transition: all 0.2s ease;
}

[class*="badge"]:hover,
[class*="pill"]:hover,
[class*="drop"]:hover {
    box-shadow: 0 2px 6px rgba(11, 45, 42, 0.12);
}

/* ========== LINKS ========== */

a[class*="link"],
a:not([class]) {
    transition: all 0.2s ease;
    position: relative;
}

a[class*="link"]:hover,
a:not([class]):hover {
    color: var(--teal-intense, #1a8b7d);
}

/* ========== ACCENT BORDERS ========== */

.section-title,
h1, h2, h3, h4, h5, h6 {
    position: relative;
}

h2:before,
h1:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg,
        var(--mint-signal, #B7E4D5) 0%,
        rgba(183, 228, 213, 0.3) 100%);
    border-radius: 2px;
}

/* ========== DIVIDERS ========== */

hr,
[class*="divider"] {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(183, 228, 213, 0.3) 50%,
        transparent 100%);
    border: none;
    height: 1px;
}

/* ========== LOADING STATES ========== */

@keyframes subtle-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

[class*="loading"],
[class*="skeleton"] {
    animation: subtle-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ========== TRANSITIONS & INTERACTIONS ========== */

* {
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== ACCESSIBILITY ========== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========== DARK MODE ENHANCEMENTS ========== */

:root.dark-mode body,
[data-theme="dark"] body {
    background: linear-gradient(180deg,
        var(--cloud, #0d1117) 0%,
        var(--cloud, #0d1117) 50%,
        rgba(26, 61, 58, 0.05) 100%);
    background-attachment: fixed;
}

:root.dark-mode .section,
:root.dark-mode [class*="card"],
:root.dark-mode [class*="container"],
:root.dark-mode main > div,
[data-theme="dark"] .section,
[data-theme="dark"] [class*="card"],
[data-theme="dark"] [class*="container"],
[data-theme="dark"] main > div {
    background: var(--arctic-mist);
    border: 1px solid rgba(183, 228, 213, 0.15);
    box-shadow: var(--shadow-md);
}

:root.dark-mode header,
[data-theme="dark"] header {
    background: linear-gradient(135deg,
        #0d1117 0%,
        rgba(13, 17, 23, 0.95) 100%);
    border-bottom-color: rgba(183, 228, 213, 0.1);
}

:root.dark-mode thead,
[data-theme="dark"] thead {
    background: linear-gradient(180deg,
        rgba(183, 228, 213, 0.05) 0%,
        rgba(183, 228, 213, 0.02) 100%);
}

:root.dark-mode tbody tr:hover,
[data-theme="dark"] tbody tr:hover {
    background: rgba(183, 228, 213, 0.03);
}

:root.dark-mode input,
:root.dark-mode textarea,
:root.dark-mode select,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--arctic-mist);
    color: var(--graphite-depth);
    border-color: rgba(183, 228, 213, 0.15);
}

:root.dark-mode input:focus,
:root.dark-mode textarea:focus,
:root.dark-mode select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--teal-intense);
    box-shadow: 0 0 0 3px rgba(61, 201, 189, 0.15);
}

:root.dark-mode hr,
:root.dark-mode [class*="divider"],
[data-theme="dark"] hr,
[data-theme="dark"] [class*="divider"] {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(183, 228, 213, 0.15) 50%,
        transparent 100%);
}

:root.dark-mode h2:before,
:root.dark-mode h1:before,
[data-theme="dark"] h2:before,
[data-theme="dark"] h1:before {
    background: linear-gradient(90deg,
        var(--teal-intense, #1a8b7d) 0%,
        rgba(61, 201, 189, 0.3) 100%);
}

/* Auto dark mode - comentado por padrão, descomente para ativar detecção automática */
/*
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) {
        --cloud: #0d1117;
        --arctic-mist: #161b22;
        --soft-arctic: #21262d;
        --graphite-depth: #e6edf3;
        --soft-steel: #8b949e;
    }
}
*/

/**
 * PharmData Design System - Clinical Severity Tokens
 *
 * Escala de 5 níveis para codificação de severidade em contextos clínicos
 * e de farmacovigilância. Cada nível tem trio bg/text/border calibrado
 * para contraste WCAG AA em light mode E dark mode.
 *
 * IMPORTANTE: toda UI que usa estas cores deve ter encoding secundário
 * (ícone + texto), nunca só cor. Daltonismo afeta ~8% dos homens.
 */

:root {
    /* CRITICAL — vermelho profundo, reservado para sinais que exigem atenção imediata */
    --sev-critical-bg:     #FCEBEB;
    --sev-critical-text:   #8E1F1F;
    --sev-critical-border: #E24B4A;

    /* ATTENTION — âmbar, para sinais que escalaram ou merecem monitoramento */
    --sev-attention-bg:     #FAEEDA;
    --sev-attention-text:   #7A4A0A;
    --sev-attention-border: #C77B1A;

    /* WATCH — azul-acinzentado, para sinais em observação sem urgência */
    --sev-watch-bg:     #E5EEF7;
    --sev-watch-text:   #1E3A5F;
    --sev-watch-border: #4A7AB0;

    /* INFO — roxo claro, para eventos neutros/meta (ex: quarter ingerido) */
    --sev-info-bg:     #EEEDFE;
    --sev-info-text:   #3C3489;
    --sev-info-border: #6B5FD4;

    /* NORMAL — cinza, estado padrão sem destaque */
    --sev-normal-bg:     #F1EFE8;
    --sev-normal-text:   #444441;
    --sev-normal-border: #888580;
}

html.dark-mode,
:root.dark-mode,
[data-theme="dark"] {
    --sev-critical-bg:     rgba(226, 75, 74, 0.15);
    --sev-critical-text:   #FCA5A5;
    --sev-critical-border: #E24B4A;

    --sev-attention-bg:     rgba(199, 123, 26, 0.15);
    --sev-attention-text:   #FCD34D;
    --sev-attention-border: #C77B1A;

    --sev-watch-bg:     rgba(74, 122, 176, 0.15);
    --sev-watch-text:   #93C5FD;
    --sev-watch-border: #4A7AB0;

    --sev-info-bg:     rgba(107, 95, 212, 0.15);
    --sev-info-text:   #C4B5FD;
    --sev-info-border: #6B5FD4;

    --sev-normal-bg:     rgba(136, 133, 128, 0.15);
    --sev-normal-text:   #C2C0BC;
    --sev-normal-border: #888580;
}

/* ============================================
   DROPS - Pharmdata Design System
   Componentes alegres e coloridos para dados farmacêuticos
   Variações: badges, botões, redondos, ovais
   Alinhamentos: horizontal, vertical, flexbox
   ============================================ */

/* ========== DROP BASE STYLES ========== */

.drop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    user-select: none;
}

.drop:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.drop:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ========== DROP SIZES ========== */

.drop-xs {
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
}

.drop-sm {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

.drop-md {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

.drop-lg {
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
}

.drop-xl {
    font-size: 1.125rem;
    padding: 1rem 1.5rem;
}

/* ========== DROP SHAPES ========== */

/* Rectangular (default badge) */
.drop-rect {
    border-radius: 0.375rem;
}

/* Rounded (pill shape) */
.drop-pill {
    border-radius: 9999px;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Oval (more rounded than rect, less than pill) */
.drop-oval {
    border-radius: 0.75rem;
}

/* Perfect circle (icon only or with small badge number) */
.drop-circle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    padding: 0;
    font-size: 1rem;
}

.drop-circle.drop-sm {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.75rem;
}

.drop-circle.drop-lg {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.25rem;
}

/* ========== DROP BUTTON STYLES ========== */

.drop-button {
    cursor: pointer;
    border: none;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.drop-button:hover {
    opacity: 0.9;
}

.drop-button:active {
    transform: scale(0.98);
}

/* ========== ALIGNMENT CONTAINERS ========== */

/* Horizontal alignment */
.drops-horizontal {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.drops-horizontal.gap-sm {
    gap: 0.25rem;
}

.drops-horizontal.gap-md {
    gap: 0.75rem;
}

.drops-horizontal.gap-lg {
    gap: 1.5rem;
}

/* Vertical alignment */
.drops-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.drops-vertical.gap-sm {
    gap: 0.25rem;
}

.drops-vertical.gap-md {
    gap: 0.75rem;
}

.drops-vertical.gap-lg {
    gap: 1.5rem;
}

/* Grid alignment (multiple rows/columns) */
.drops-grid {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(auto, 1fr));
}

.drops-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.drops-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.drops-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ========== POSITIONING ========== */

.drops-container {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 0.75rem;
    background: rgba(183, 228, 213, 0.03);
    border: 1px solid rgba(183, 228, 213, 0.2);
}

/* Center alignment */
.drops-center {
    justify-content: center;
}

/* Left alignment */
.drops-left {
    justify-content: flex-start;
}

/* Right alignment */
.drops-right {
    justify-content: flex-end;
}

/* Space between */
.drops-between {
    justify-content: space-between;
}

/* Space around */
.drops-around {
    justify-content: space-around;
}

/* Space evenly */
.drops-evenly {
    justify-content: space-evenly;
}

/* ========== PHARMACEUTICAL CATEGORY COLORS ========== */

/* VTM - Molécula Terapêutica Virtual */
.drop-vtm {
    background: var(--drop-vtm-bg, #E0F7FA);
    color: var(--drop-vtm-text, #00838F);
    border: 1px solid rgba(0, 131, 143, 0.2);
}

.drop-vtm:hover {
    background: var(--drop-vtm-bg, #B2EBF2);
    box-shadow: 0 4px 12px rgba(0, 131, 143, 0.2);
}

/* DEC - Denominações Comerciais */
.drop-dec {
    background: var(--drop-dec-bg, #FCE4EC);
    color: var(--drop-dec-text, #AD1457);
    border: 1px solid rgba(173, 20, 87, 0.2);
}

.drop-dec:hover {
    background: var(--drop-dec-bg, #F8BBD0);
    box-shadow: 0 4px 12px rgba(173, 20, 87, 0.2);
}

/* SUB - Substâncias Ativas */
.drop-sub {
    background: var(--drop-sub-bg, #E3F2FD);
    color: var(--drop-sub-text, #1565C0);
    border: 1px solid rgba(21, 101, 192, 0.2);
}

.drop-sub:hover {
    background: var(--drop-sub-bg, #BBDEFB);
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.2);
}

/* LAB - Laboratórios */
.drop-lab {
    background: var(--drop-lab-bg, #FFF3E0);
    color: var(--drop-lab-text, #EF6C00);
    border: 1px solid rgba(239, 108, 0, 0.2);
}

.drop-lab:hover {
    background: var(--drop-lab-bg, #FFE0B2);
    box-shadow: 0 4px 12px rgba(239, 108, 0, 0.2);
}

/* CNC - Concentrações */
.drop-cnc {
    background: var(--drop-cnc-bg, #E8F5E9);
    color: var(--drop-cnc-text, #2E7D32);
    border: 1px solid rgba(46, 125, 50, 0.2);
}

.drop-cnc:hover {
    background: var(--drop-cnc-bg, #C8E6C9);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.2);
}

/* GTS - Gotas (Soluções Orais) */
.drop-gts {
    background: var(--drop-gts-bg, #E0F2F1);
    color: var(--drop-gts-text, #00695C);
    border: 1px solid rgba(0, 105, 92, 0.2);
}

.drop-gts:hover {
    background: var(--drop-gts-bg, #B2DFDB);
    box-shadow: 0 4px 12px rgba(0, 105, 92, 0.2);
}

/* FOFA - Formas Farmacêuticas */
.drop-fofa {
    background: var(--drop-fofa-bg, #F3E5F5);
    color: var(--drop-fofa-text, #7B1FA2);
    border: 1px solid rgba(123, 31, 162, 0.2);
}

.drop-fofa:hover {
    background: var(--drop-fofa-bg, #E1BEE7);
    box-shadow: 0 4px 12px rgba(123, 31, 162, 0.2);
}

/* FAP - Formas de Apresentação */
.drop-fap {
    background: var(--drop-fap-bg, #E0F2F1);
    color: var(--drop-fap-text, #00695C);
    border: 1px solid rgba(0, 105, 92, 0.2);
}

.drop-fap:hover {
    background: var(--drop-fap-bg, #B2DFDB);
    box-shadow: 0 4px 12px rgba(0, 105, 92, 0.2);
}

/* VIA - Vias de Administração */
.drop-via {
    background: var(--drop-via-bg, #EFEBE9);
    color: var(--drop-via-text, #5D4037);
    border: 1px solid rgba(93, 64, 55, 0.2);
}

.drop-via:hover {
    background: var(--drop-via-bg, #D7CCC8);
    box-shadow: 0 4px 12px rgba(93, 64, 55, 0.2);
}

/* EMB - Embalagens */
.drop-emb {
    background: var(--drop-emb-bg, #E8EAF6);
    color: var(--drop-emb-text, #303F9F);
    border: 1px solid rgba(48, 63, 159, 0.2);
}

.drop-emb:hover {
    background: var(--drop-emb-bg, #C5CAE9);
    box-shadow: 0 4px 12px rgba(48, 63, 159, 0.2);
}

/* DISP - Dispositivos / Acessórios */
.drop-dispositivo {
    background: var(--drop-dispositivo-bg, #ECEFF1);
    color: var(--drop-dispositivo-text, #455A64);
    border: 1px solid rgba(69, 90, 100, 0.2);
}

.drop-dispositivo:hover {
    background: var(--drop-dispositivo-bg, #CFD8DC);
    box-shadow: 0 4px 12px rgba(69, 90, 100, 0.2);
}

/* CAP - Capacidades */
.drop-cap {
    background: var(--drop-cap-bg, #FFFDE7);
    color: var(--drop-cap-text, #F57F17);
    border: 1px solid rgba(245, 127, 23, 0.2);
}

.drop-cap:hover {
    background: var(--drop-cap-bg, #FFF9C4);
    box-shadow: 0 4px 12px rgba(245, 127, 23, 0.2);
}

/* CHG - Enriquecimentos */
.drop-chg {
    background: var(--drop-chg-bg, #FAFAFA);
    color: var(--drop-chg-text, #616161);
    border: 1px solid rgba(97, 97, 97, 0.2);
}

.drop-chg:hover {
    background: var(--drop-chg-bg, #E0E0E0);
    box-shadow: 0 4px 12px rgba(97, 97, 97, 0.2);
}

/* UNK - Não Reconhecidos */
.drop-unk {
    background: var(--drop-unk-bg, #FFEBEE);
    color: var(--drop-unk-text, #C62828);
    border: 1px solid rgba(198, 40, 40, 0.2);
}

.drop-unk:hover {
    background: var(--drop-unk-bg, #FFCDD2);
    box-shadow: 0 4px 12px rgba(198, 40, 40, 0.2);
}

/* ========== REGULATORY CATEGORY DROPS (ANVISA) ========== */

/* Genérico */
.drop-generico {
    background: var(--drop-generico-bg, #FEF9C3);
    color: var(--drop-generico-text, #A16207);
    border: 1px solid rgba(161, 98, 7, 0.2);
}

.drop-generico:hover {
    background: var(--drop-generico-bg, #FEF08A);
    box-shadow: 0 4px 12px rgba(161, 98, 7, 0.2);
}

/* Similar */
.drop-similar {
    background: var(--drop-similar-bg, #E3F2FD);
    color: var(--drop-similar-text, #1565C0);
    border: 1px solid rgba(21, 101, 192, 0.2);
}

.drop-similar:hover {
    background: var(--drop-similar-bg, #BBDEFB);
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.2);
}

/* Novo */
.drop-novo {
    background: var(--drop-novo-bg, #E8F5E9);
    color: var(--drop-novo-text, #2E7D32);
    border: 1px solid rgba(46, 125, 50, 0.2);
}

.drop-novo:hover {
    background: var(--drop-novo-bg, #C8E6C9);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.2);
}

/* Biológico */
.drop-biologico {
    background: var(--drop-biologico-bg, #F3E5F5);
    color: var(--drop-biologico-text, #7B1FA2);
    border: 1px solid rgba(123, 31, 162, 0.2);
}

.drop-biologico:hover {
    background: var(--drop-biologico-bg, #E1BEE7);
    box-shadow: 0 4px 12px rgba(123, 31, 162, 0.2);
}

/* Fitoterápico */
.drop-fitoterapico {
    background: var(--drop-fitoterapico-bg, #E8F5E9);
    color: var(--drop-fitoterapico-text, #558B2F);
    border: 1px solid rgba(85, 139, 47, 0.2);
}

.drop-fitoterapico:hover {
    background: var(--drop-fitoterapico-bg, #C8E6C9);
    box-shadow: 0 4px 12px rgba(85, 139, 47, 0.2);
}

/* Específico */
.drop-especifico {
    background: var(--drop-especifico-bg, #FFF3E0);
    color: var(--drop-especifico-text, #E65100);
    border: 1px solid rgba(230, 81, 0, 0.2);
}

.drop-especifico:hover {
    background: var(--drop-especifico-bg, #FFE0B2);
    box-shadow: 0 4px 12px rgba(230, 81, 0, 0.2);
}

/* Radiofármaco */
.drop-radiofarmaco {
    background: var(--drop-radiofarmaco-bg, #FFFDE7);
    color: var(--drop-radiofarmaco-text, #F57F17);
    border: 1px solid rgba(245, 127, 23, 0.2);
}

.drop-radiofarmaco:hover {
    background: var(--drop-radiofarmaco-bg, #FFF9C4);
    box-shadow: 0 4px 12px rgba(245, 127, 23, 0.2);
}

/* Produto de Terapia Avançada */
.drop-terapia-avancada {
    background: var(--drop-terapia-avancada-bg, #FCE4EC);
    color: var(--drop-terapia-avancada-text, #AD1457);
    border: 1px solid rgba(173, 20, 87, 0.2);
}

.drop-terapia-avancada:hover {
    background: var(--drop-terapia-avancada-bg, #F8BBD0);
    box-shadow: 0 4px 12px rgba(173, 20, 87, 0.2);
}

/* Não classificado */
.drop-nao-classificado {
    background: var(--drop-nao-classificado-bg, #F5F5F5);
    color: var(--drop-nao-classificado-text, #616161);
    border: 1px solid rgba(97, 97, 97, 0.2);
}

.drop-nao-classificado:hover {
    background: var(--drop-nao-classificado-bg, #E0E0E0);
    box-shadow: 0 4px 12px rgba(97, 97, 97, 0.2);
}

/* ========== OPERATIONAL DROPS ========== */

/* Registro/Regulatório */
.drop-registro {
    background: var(--drop-registro-bg, #E1F5FE);
    color: var(--drop-registro-text, #0277BD);
    border: 1px solid rgba(2, 119, 189, 0.2);
}

/* Prescrever */
.drop-prescrever {
    background: var(--drop-prescrever-bg, #F3E5F5);
    color: var(--drop-prescrever-text, #6A1B9A);
    border: 1px solid rgba(106, 27, 154, 0.2);
}

/* Dispensar */
.drop-dispensar {
    background: var(--drop-dispensar-bg, #FFF3E0);
    color: var(--drop-dispensar-text, #EF6C00);
    border: 1px solid rgba(239, 108, 0, 0.2);
}

/* Administrar */
.drop-administrar {
    background: var(--drop-administrar-bg, #E8F5E9);
    color: var(--drop-administrar-text, #2E7D32);
    border: 1px solid rgba(46, 125, 50, 0.2);
}

/* ========== WORKFLOW STATUS DROPS ========== */

/* Draft */
.drop-draft {
    background: var(--drop-draft-bg, #F5F5F5);
    color: var(--drop-draft-text, #616161);
    border: 1px solid rgba(97, 97, 97, 0.3);
}

/* In Review */
.drop-review {
    background: var(--drop-review-bg, #FFF8E1);
    color: var(--drop-review-text, #F57C00);
    border: 1px solid rgba(245, 124, 0, 0.3);
}

/* Approved */
.drop-approved {
    background: var(--drop-approved-bg, #E8F5E9);
    color: var(--drop-approved-text, #4CAF50);
    border: 1px solid rgba(76, 175, 80, 0.2);
}

/* Rejected */
.drop-rejected {
    background: var(--drop-rejected-bg, #FFEBEE);
    color: var(--drop-rejected-text, #EF5350);
    border: 1px solid rgba(239, 83, 80, 0.2);
}

/* Deprecated */
.drop-deprecated {
    background: var(--drop-deprecated-bg, #EFEBE9);
    color: var(--drop-deprecated-text, #6D4C41);
    border: 1px solid rgba(109, 76, 65, 0.2);
}

/* ========== DATA SOURCE DROPS ========== */

/* SPOR/EMA */
.drop-spor {
    background: var(--drop-spor-bg, #E3F2FD);
    color: var(--drop-spor-text, #1565C0);
    border: 1px solid rgba(21, 101, 192, 0.2);
}

/* SNOMED */
.drop-snomed {
    background: var(--drop-snomed-bg, #FFF3E0);
    color: var(--drop-snomed-text, #E65100);
    border: 1px solid rgba(230, 81, 0, 0.2);
}

/* ANVISA */
.drop-anvisa {
    background: var(--drop-anvisa-bg, #E8F5E9);
    color: var(--drop-anvisa-text, #1B5E20);
    border: 1px solid rgba(27, 94, 32, 0.2);
}

/* FDA */
.drop-fda {
    background: var(--drop-fda-bg, #E8EAF6);
    color: var(--drop-fda-text, #283593);
    border: 1px solid rgba(40, 53, 147, 0.2);
}

/* WHO */
.drop-who {
    background: var(--drop-who-bg, #E1F5FE);
    color: var(--drop-who-text, #01579B);
    border: 1px solid rgba(1, 87, 155, 0.2);
}

/* OBM - Ontologia Brasileira de Medicamentos */
.drop-obm {
    background: var(--drop-obm-bg, #F3E5F5);
    color: var(--drop-obm-text, #7B1FA2);
    border: 1px solid rgba(123, 31, 162, 0.2);
}

.drop-obm:hover {
    background: var(--drop-obm-bg, #E1BEE7);
    box-shadow: 0 4px 12px rgba(123, 31, 162, 0.2);
}

/* TUSS - Terminologia Unificada da Saúde Suplementar */
.drop-tuss {
    background: var(--drop-tuss-bg, #E0F2F1);
    color: var(--drop-tuss-text, #00695C);
    border: 1px solid rgba(0, 105, 92, 0.2);
}

.drop-tuss:hover {
    background: var(--drop-tuss-bg, #B2DFDB);
    box-shadow: 0 4px 12px rgba(0, 105, 92, 0.2);
}

/* Brasíndice */
.drop-brasindice {
    background: var(--drop-brasindice-bg, #FCE4EC);
    color: var(--drop-brasindice-text, #AD1457);
    border: 1px solid rgba(173, 20, 87, 0.2);
}

.drop-brasindice:hover {
    background: var(--drop-brasindice-bg, #F8BBD0);
    box-shadow: 0 4px 12px rgba(173, 20, 87, 0.2);
}

/* ========== DATA QUALITY DROPS ========== */

/* Complete */
.drop-complete {
    background: var(--drop-complete-bg, #E8F5E9);
    color: var(--drop-complete-text, #4CAF50);
    border: 1px solid rgba(76, 175, 80, 0.2);
}

/* Partial */
.drop-partial {
    background: var(--drop-partial-bg, #FFF8E1);
    color: var(--drop-partial-text, #F57F17);
    border: 1px solid rgba(245, 127, 23, 0.3);
}

/* Missing */
.drop-missing {
    background: var(--drop-missing-bg, #FFEBEE);
    color: var(--drop-missing-text, #EF5350);
    border: 1px solid rgba(239, 83, 80, 0.2);
}

/* Enriched */
.drop-enriched {
    background: var(--drop-enriched-bg, #E3F2FD);
    color: var(--drop-enriched-text, #1565C0);
    border: 1px solid rgba(21, 101, 192, 0.2);
}

/* ========== DROP LABEL STRUCTURE (ABBREVIATION + NAME) ========== */

.drop-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.drop-abbr {
    font-size: 0.7em;
    font-weight: 700;
    opacity: 0.95;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.drop-name {
    font-size: 0.9em;
    font-weight: 500;
    white-space: normal;
    opacity: 0.95;
}

/* ========== DROP DISPLAY VARIANTS ========== */

/* Default: show both abbreviation and name */
.drop[data-display="both"] .drop-abbr,
.drop[data-display="both"] .drop-name {
    display: inline;
}

/* Show abbreviation only */
.drop[data-display="abbr"] .drop-abbr {
    display: inline;
}

.drop[data-display="abbr"] .drop-name {
    display: none;
}

/* Show name only */
.drop[data-display="name"] .drop-name {
    display: inline;
}

.drop[data-display="name"] .drop-abbr {
    display: none;
}

/* Responsive: show abbr on mobile, both on larger screens */
@media (max-width: 640px) {
    .drop[data-display="responsive"] .drop-abbr {
        display: inline;
    }

    .drop[data-display="responsive"] .drop-name {
        display: none;
    }
}

@media (min-width: 641px) {
    .drop[data-display="responsive"] .drop-abbr,
    .drop[data-display="responsive"] .drop-name {
        display: inline;
    }
}

/* ========== ICON SUPPORT ========== */

.drop-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin: -0.25rem 0;
    flex-shrink: 0;
}

.drop-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-left: 0.25rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    border-radius: 50%;
}

.drop-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
}

/* ========== DROP ICONS (Font Awesome) ========== */
/* Ícones semânticos para cada categoria farmacêutica */
/* Melhora acessibilidade e reconhecimento visual */
/* Requer: Font Awesome 6 (fa-solid) */

/* Base icon styles */
.drop::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
    font-weight: 900;
    font-size: 0.8em;
    margin-right: 0.35rem;
    display: inline-block;
}

/* Pharmaceutical Categories */
.drop-vtm::before { content: '\f5d2'; }  /* fa-flask-vial - Molécula Terapêutica Virtual */
.drop-dec::before { content: '\f484'; }  /* fa-pills - Denominações Comerciais */
.drop-sub::before { content: '\f471'; }  /* fa-dna - Substâncias Ativas */
.drop-lab::before { content: '\f275'; }  /* fa-industry - Laboratórios */
.drop-cnc::before { content: '\f0c3'; }  /* fa-flask - Concentrações */
.drop-gts::before { content: '\f043'; }  /* fa-droplet - Gotas */
.drop-fofa::before { content: '\f48e'; }  /* fa-syringe - Formas Farmacêuticas */
.drop-fap::before { content: '\f466'; }  /* fa-box-open - Formas de Apresentação */
.drop-via::before { content: '\f7f2'; }  /* fa-stethoscope - Vias de Administração */
.drop-emb::before { content: '\f49e'; }  /* fa-boxes-stacked - Embalagens */
.drop-cap::before { content: '\f545'; }  /* fa-ruler - Capacidades */
.drop-chg::before { content: '\f005'; }  /* fa-star - Enriquecimentos */
.drop-unk::before { content: '\f059'; }  /* fa-circle-question - Não Reconhecidos */

/* Regulatory Categories (ANVISA) */
.drop-generico::before { content: '\f550'; }        /* fa-stamp - Genérico */
.drop-similar::before { content: '\f24d'; }         /* fa-clone - Similar */
.drop-novo::before { content: '\f005'; }            /* fa-star - Novo */
.drop-biologico::before { content: '\f471'; }       /* fa-dna - Biológico */
.drop-fitoterapico::before { content: '\f06c'; }    /* fa-leaf - Fitoterápico */
.drop-especifico::before { content: '\f058'; }      /* fa-circle-check - Específico */
.drop-radiofarmaco::before { content: '\f7c0'; }    /* fa-radiation - Radiofármaco */
.drop-terapia-avancada::before { content: '\f0d0'; } /* fa-magic - Terapia Avançada */
.drop-nao-classificado::before { content: '\f059'; } /* fa-circle-question - Não classificado */

/* Operational */
.drop-registro::before { content: '\f46d'; }   /* fa-clipboard-list */
.drop-prescrever::before { content: '\f0f6'; } /* fa-file-medical */
.drop-dispensar::before { content: '\f54e'; }  /* fa-store */
.drop-administrar::before { content: '\f48e'; } /* fa-syringe */

/* Workflow Status */
.drop-draft::before { content: '\f15c'; }      /* fa-file-lines */
.drop-review::before { content: '\f06e'; }     /* fa-eye */
.drop-approved::before { content: '\f058'; }   /* fa-circle-check */
.drop-rejected::before { content: '\f057'; }   /* fa-circle-xmark */
.drop-deprecated::before { content: '\f1f8'; } /* fa-trash */

/* Data Sources */
.drop-spor::before { content: '\f0ac'; }       /* fa-globe */
.drop-snomed::before { content: '\f0f8'; }     /* fa-hospital */
.drop-anvisa::before { content: '\f0ac'; }     /* fa-globe */
.drop-fda::before { content: '\f0ac'; }        /* fa-globe */
.drop-who::before { content: '\f57d'; }        /* fa-earth-americas */
.drop-obm::before { content: '\f0c3'; }        /* fa-flask */
.drop-tuss::before { content: '\f0f8'; }       /* fa-hospital */
.drop-brasindice::before { content: '\f080'; } /* fa-chart-bar */

/* Data Quality */
.drop-complete::before { content: '\f00c'; }   /* fa-check */
.drop-partial::before { content: '\f042'; }    /* fa-circle-half-stroke */
.drop-missing::before { content: '\f111'; }    /* fa-circle (outline) */
.drop-enriched::before { content: '\f005'; }   /* fa-star */

/* Icon-only mode (hide icon) */
.drop[data-icon="none"]::before,
.drop-no-icon::before {
    display: none;
}

/* Optional: Show icon only (no text) */
.drop-icon-only::before {
    margin-right: 0;
}
.drop-icon-only .drop-label,
.drop-icon-only .drop-abbr,
.drop-icon-only .drop-name {
    display: none;
}

/* ========== ANIMATION ========== */

@keyframes drop-appear {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.drop-enter {
    animation: drop-appear 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== RESPONSIVE ========== */

@media (max-width: 640px) {
    .drops-horizontal {
        gap: 0.25rem;
    }

    .drop-md,
    .drop-lg {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    .drop-xl {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

/* ========== DARK MODE ========== */

/* Base drop adjustments for dark mode */
:root.dark-mode .drop,
[data-theme="dark"] .drop {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

:root.dark-mode .drop:hover,
[data-theme="dark"] .drop:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

:root.dark-mode .drop-close:hover,
[data-theme="dark"] .drop-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

:root.dark-mode .drops-container,
[data-theme="dark"] .drops-container {
    background: rgba(183, 228, 213, 0.02);
    border-color: rgba(183, 228, 213, 0.1);
}

/* Pharmaceutical drops - dark mode
   Colors are already handled by CSS variables in colors.css dark mode section.
   The following ensure border colors work well in dark mode */

:root.dark-mode .drop-vtm,
:root.dark-mode .drop-dec,
:root.dark-mode .drop-sub,
:root.dark-mode .drop-lab,
:root.dark-mode .drop-cnc,
:root.dark-mode .drop-gts,
:root.dark-mode .drop-fofa,
:root.dark-mode .drop-fap,
:root.dark-mode .drop-via,
:root.dark-mode .drop-emb,
:root.dark-mode .drop-cap,
:root.dark-mode .drop-chg,
:root.dark-mode .drop-unk,
[data-theme="dark"] .drop-vtm,
[data-theme="dark"] .drop-dec,
[data-theme="dark"] .drop-sub,
[data-theme="dark"] .drop-lab,
[data-theme="dark"] .drop-cnc,
[data-theme="dark"] .drop-gts,
[data-theme="dark"] .drop-fofa,
[data-theme="dark"] .drop-fap,
[data-theme="dark"] .drop-via,
[data-theme="dark"] .drop-emb,
[data-theme="dark"] .drop-cap,
[data-theme="dark"] .drop-chg,
[data-theme="dark"] .drop-unk {
    border-color: transparent;
}

/* Regulatory category drops - dark */
:root.dark-mode .drop-generico,
:root.dark-mode .drop-similar,
:root.dark-mode .drop-novo,
:root.dark-mode .drop-biologico,
:root.dark-mode .drop-fitoterapico,
:root.dark-mode .drop-especifico,
:root.dark-mode .drop-radiofarmaco,
:root.dark-mode .drop-terapia-avancada,
:root.dark-mode .drop-nao-classificado,
[data-theme="dark"] .drop-generico,
[data-theme="dark"] .drop-similar,
[data-theme="dark"] .drop-novo,
[data-theme="dark"] .drop-biologico,
[data-theme="dark"] .drop-fitoterapico,
[data-theme="dark"] .drop-especifico,
[data-theme="dark"] .drop-radiofarmaco,
[data-theme="dark"] .drop-terapia-avancada,
[data-theme="dark"] .drop-nao-classificado {
    border-color: transparent;
}

/* Operational drops - dark */
:root.dark-mode .drop-registro,
:root.dark-mode .drop-prescrever,
:root.dark-mode .drop-dispensar,
:root.dark-mode .drop-administrar,
[data-theme="dark"] .drop-registro,
[data-theme="dark"] .drop-prescrever,
[data-theme="dark"] .drop-dispensar,
[data-theme="dark"] .drop-administrar {
    border-color: transparent;
}

/* Workflow status drops - dark */
:root.dark-mode .drop-draft,
:root.dark-mode .drop-review,
:root.dark-mode .drop-approved,
:root.dark-mode .drop-rejected,
:root.dark-mode .drop-deprecated,
[data-theme="dark"] .drop-draft,
[data-theme="dark"] .drop-review,
[data-theme="dark"] .drop-approved,
[data-theme="dark"] .drop-rejected,
[data-theme="dark"] .drop-deprecated {
    border-color: transparent;
}

/* Data source drops - dark */
:root.dark-mode .drop-spor,
:root.dark-mode .drop-snomed,
:root.dark-mode .drop-anvisa,
:root.dark-mode .drop-fda,
:root.dark-mode .drop-who,
:root.dark-mode .drop-obm,
:root.dark-mode .drop-tuss,
:root.dark-mode .drop-brasindice,
[data-theme="dark"] .drop-spor,
[data-theme="dark"] .drop-snomed,
[data-theme="dark"] .drop-anvisa,
[data-theme="dark"] .drop-fda,
[data-theme="dark"] .drop-who,
[data-theme="dark"] .drop-obm,
[data-theme="dark"] .drop-tuss,
[data-theme="dark"] .drop-brasindice {
    border-color: transparent;
}

/* Data quality drops - dark */
:root.dark-mode .drop-complete,
:root.dark-mode .drop-partial,
:root.dark-mode .drop-missing,
:root.dark-mode .drop-enriched,
[data-theme="dark"] .drop-complete,
[data-theme="dark"] .drop-partial,
[data-theme="dark"] .drop-missing,
[data-theme="dark"] .drop-enriched {
    border-color: transparent;
}

/* ========================================================================
   SEVERITY DROPS — drops semânticos para escala de severidade/impacto
   Consomem os tokens --sev-*-bg/text/border definidos em severity.css.
   Uso típico: feeds de eventos, badges de alerta, linhas de tabela com
   status de urgência operacional. Cada variante tem encoding secundário
   obrigatório (texto descritivo + tooltip), nunca confie só na cor.
   Adicionado em 2026-04-14 para suportar o Vigília (observatório de FVG).
   ======================================================================== */

.drop-sev-critical {
    background: var(--sev-critical-bg);
    color: var(--sev-critical-text);
    border: 1px solid var(--sev-critical-border);
}

.drop-sev-critical:hover {
    background: var(--sev-critical-bg);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--sev-critical-border) 35%, transparent);
}

.drop-sev-attention {
    background: var(--sev-attention-bg);
    color: var(--sev-attention-text);
    border: 1px solid var(--sev-attention-border);
}

.drop-sev-attention:hover {
    background: var(--sev-attention-bg);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--sev-attention-border) 35%, transparent);
}

.drop-sev-watch {
    background: var(--sev-watch-bg);
    color: var(--sev-watch-text);
    border: 1px solid var(--sev-watch-border);
}

.drop-sev-watch:hover {
    background: var(--sev-watch-bg);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--sev-watch-border) 35%, transparent);
}

.drop-sev-info {
    background: var(--sev-info-bg);
    color: var(--sev-info-text);
    border: 1px solid var(--sev-info-border);
}

.drop-sev-info:hover {
    background: var(--sev-info-bg);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--sev-info-border) 35%, transparent);
}

.drop-sev-normal {
    background: var(--sev-normal-bg);
    color: var(--sev-normal-text);
    border: 1px solid var(--sev-normal-border);
}

.drop-sev-normal:hover {
    background: var(--sev-normal-bg);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--sev-normal-border) 35%, transparent);
}

/* Dark mode: a severity.css já reescreve os tokens, então as classes
   herdam automaticamente os valores dark — só removemos a borda dura. */
:root.dark-mode .drop-sev-critical,
:root.dark-mode .drop-sev-attention,
:root.dark-mode .drop-sev-watch,
:root.dark-mode .drop-sev-info,
:root.dark-mode .drop-sev-normal,
[data-theme="dark"] .drop-sev-critical,
[data-theme="dark"] .drop-sev-attention,
[data-theme="dark"] .drop-sev-watch,
[data-theme="dark"] .drop-sev-info,
[data-theme="dark"] .drop-sev-normal {
    border-color: transparent;
}

/**
 * DATA TABLES - PharmData Design System v2.0
 * Tabelas densas para dados farmacêuticos
 *
 * Padrões para:
 * - Tabelas de listagem (medicamentos, substâncias)
 * - Tabelas de comparação
 * - Tabelas com ações inline
 * - Colunas fixas (sticky)
 * - Ordenação e paginação
 */

/* ===================
   TABLE BASE
   =================== */

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
    background: var(--cloud, #F5F8FA);
    border: 1px solid var(--border-strong, rgba(11, 45, 42, 0.15));
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.table th,
.table td {
    padding: var(--cell-padding-md, var(--space-3) var(--space-4));
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-subtle, rgba(183, 228, 213, 0.2));
}

.table th {
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--soft-steel, #374151);
    background: var(--arctic-mist, #E9ECEF);
    white-space: nowrap;
}

.table td {
    color: var(--graphite-depth, #1F2937);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* ===================
   TABLE VARIANTS
   =================== */

/* Striped rows */
.table-striped tbody tr:nth-child(even) {
    background: rgba(183, 228, 213, 0.04);
}

/* Hoverable rows */
.table-hover tbody tr {
    transition: background-color var(--transition-fast, 0.15s);
}

.table-hover tbody tr:hover {
    background: rgba(183, 228, 213, 0.08);
}

/* Bordered table */
.table-bordered th,
.table-bordered td {
    border: 1px solid var(--border-subtle, rgba(183, 228, 213, 0.2));
}

/* Compact table */
.table-compact th,
.table-compact td {
    padding: var(--cell-padding-sm, var(--space-2) var(--space-3));
    font-size: var(--text-xs);
}

/* Spacious table */
.table-spacious th,
.table-spacious td {
    padding: var(--cell-padding-lg, var(--space-4) var(--space-6));
}

/* ===================
   STICKY COLUMNS
   =================== */

.table-sticky-first th:first-child,
.table-sticky-first td:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
    background: inherit;
    box-shadow: 2px 0 4px rgba(11, 45, 42, 0.05);
}

.table-sticky-first tbody tr:hover td:first-child {
    background: rgba(183, 228, 213, 0.08);
}

.table-sticky-last th:last-child,
.table-sticky-last td:last-child {
    position: sticky;
    right: 0;
    z-index: 10;
    background: inherit;
    box-shadow: -2px 0 4px rgba(11, 45, 42, 0.05);
}

/* Sticky header */
.table-sticky-header {
    overflow: auto;
    max-height: 70vh;
}

.table-sticky-header thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 1px 0 var(--border-subtle, rgba(183, 228, 213, 0.2));
}

/* ===================
   SORTABLE COLUMNS
   =================== */

.table th[data-sortable] {
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-fast, 0.15s);
}

.table th[data-sortable]:hover {
    background: rgba(42, 161, 152, 0.08);
}

.table th[data-sortable]::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: var(--space-2);
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--soft-steel, #374151);
    opacity: 0.3;
    transition: opacity var(--transition-fast, 0.15s), transform var(--transition-fast, 0.15s);
}

.table th[data-sortable]:hover::after {
    opacity: 0.6;
}

.table th[data-sort="asc"]::after {
    opacity: 1;
    border-top: none;
    border-bottom: 5px solid var(--teal-intense, #1a8b7d);
}

.table th[data-sort="desc"]::after {
    opacity: 1;
    border-top: 5px solid var(--teal-intense, #1a8b7d);
}

/* ===================
   SELECTABLE ROWS
   =================== */

.table-selectable tbody tr {
    cursor: pointer;
}

.table-selectable tbody tr.selected {
    background: rgba(42, 161, 152, 0.1);
}

.table-selectable tbody tr.selected td:first-child {
    box-shadow: inset 3px 0 0 var(--teal-intense, #1a8b7d);
}

/* Checkbox column */
.table .col-checkbox {
    width: 3rem;
    text-align: center;
    padding-left: var(--space-3);
    padding-right: var(--space-2);
}

.table .col-checkbox input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

/* ===================
   ACTION COLUMNS
   =================== */

.table .col-actions {
    width: auto;
    white-space: nowrap;
    text-align: right;
}

.table .col-actions .btn {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
}

.table .col-actions .btn + .btn {
    margin-left: var(--space-1);
}

/* Action buttons visible on hover */
.table-hover-actions .col-actions {
    opacity: 0;
    transition: opacity var(--transition-fast, 0.15s);
}

.table-hover-actions tbody tr:hover .col-actions {
    opacity: 1;
}

/* ===================
   CELL CONTENT TYPES
   =================== */

/* Numeric cells */
.table .cell-number {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Date cells */
.table .cell-date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Status cells with drops */
.table .cell-status {
    width: 8rem;
}

/* Truncated text with tooltip */
.table .cell-truncate {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Code/ID cells */
.table .cell-code {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: var(--text-xs);
    color: var(--soft-steel, #374151);
}

/* ===================
   ROW STATES
   =================== */

/* Highlighted row */
.table tbody tr.row-highlight {
    background: rgba(42, 161, 152, 0.05);
}

/* Warning row */
.table tbody tr.row-warning {
    background: rgba(255, 167, 38, 0.08);
}

/* Error row */
.table tbody tr.row-error {
    background: rgba(239, 83, 80, 0.08);
}

/* Success row */
.table tbody tr.row-success {
    background: rgba(76, 175, 80, 0.08);
}

/* Disabled row */
.table tbody tr.row-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ===================
   PAGINATION
   =================== */

.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--arctic-mist, #E9ECEF);
    border-top: 1px solid var(--border-subtle, rgba(183, 228, 213, 0.2));
    font-size: var(--text-sm);
}

.table-pagination-info {
    color: var(--soft-steel, #374151);
}

.table-pagination-info strong {
    color: var(--graphite-depth, #1F2937);
}

.table-pagination-controls {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.table-pagination-controls .btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle, rgba(183, 228, 213, 0.3));
    background: var(--cloud, #F5F8FA);
    color: var(--soft-steel, #374151);
    transition: all var(--transition-fast, 0.15s);
}

.table-pagination-controls .btn:hover:not(:disabled) {
    border-color: var(--teal-intense, #1a8b7d);
    color: var(--teal-intense, #1a8b7d);
}

.table-pagination-controls .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.table-pagination-controls .btn.active {
    background: var(--emerald-abyss, #0B2D2A);
    color: white;
    border-color: var(--emerald-abyss, #0B2D2A);
}

/* Per page selector */
.table-per-page {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.table-per-page select {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
    border: 1px solid var(--border-subtle, rgba(183, 228, 213, 0.3));
    border-radius: var(--radius-md);
    background: var(--cloud, #F5F8FA);
}

/* ===================
   EMPTY STATE
   =================== */

.table-empty {
    padding: var(--space-12) var(--space-6);
    text-align: center;
    color: var(--soft-steel, #374151);
}

.table-empty-icon {
    font-size: var(--icon-3xl, 2.5rem);
    color: var(--mint-signal, #B7E4D5);
    margin-bottom: var(--space-4);
}

.table-empty-title {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--graphite-depth, #1F2937);
    margin-bottom: var(--space-2);
}

.table-empty-description {
    font-size: var(--text-sm);
    max-width: 320px;
    margin: 0 auto;
}

/* ===================
   RESPONSIVE TABLE
   =================== */

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Fade indicator for horizontal scroll */
.table-responsive::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8));
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast, 0.15s);
}

.table-responsive.has-scroll::after {
    opacity: 1;
}

/* Stack on mobile */
@media (max-width: 640px) {
    .table-stack-mobile thead {
        display: none;
    }

    .table-stack-mobile tbody tr {
        display: block;
        padding: var(--space-3);
        margin-bottom: var(--space-2);
        border: 1px solid var(--border-subtle, rgba(183, 228, 213, 0.2));
        border-radius: var(--radius-md);
    }

    .table-stack-mobile tbody td {
        display: flex;
        justify-content: space-between;
        padding: var(--space-2) 0;
        border-bottom: 1px dashed var(--border-subtle, rgba(183, 228, 213, 0.15));
    }

    .table-stack-mobile tbody td:last-child {
        border-bottom: none;
    }

    .table-stack-mobile tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: var(--text-xs);
        text-transform: uppercase;
        color: var(--soft-steel, #374151);
    }
}

/* ===================
   LOADING STATE
   =================== */

.table-loading {
    position: relative;
}

.table-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
}

.table-loading tbody {
    opacity: 0.5;
}

/**
 * FORMS - PharmData Design System v2.0
 * Componentes de formulário com feedback visual aprimorado
 *
 * Estes componentes complementam o Tailwind CSS, fornecendo
 * estilos pré-definidos para inputs, selects e labels.
 *
 * Para usar: importe este arquivo após o Tailwind.
 */

/* ===================
   CSS CUSTOM PROPERTIES
   Tokens específicos para forms
   =================== */

:root {
    /* Border colors */
    --form-border-default: rgba(183, 228, 213, 0.4);
    --form-border-hover: var(--teal-intense, #1a8b7d);
    --form-border-disabled: rgba(183, 228, 213, 0.2);

    /* Focus ring */
    --form-ring-color: rgba(42, 161, 152, 0.12);
    --form-ring-shadow: 0 2px 8px rgba(42, 161, 152, 0.08);

    /* Error states */
    --form-error-ring: rgba(239, 68, 68, 0.12);
    --form-error-shadow: 0 2px 8px rgba(239, 68, 68, 0.08);

    /* Success states */
    --form-success-ring: rgba(16, 185, 129, 0.12);
    --form-success-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
}

/* ===================
   FORM GROUP
   Container para label + input
   =================== */

.form-group {
    margin-bottom: 1rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

/* ===================
   FORM LABEL
   Labels padronizados com hierarquia clara
   =================== */

.form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    color: var(--emerald-abyss, #0B2D2A);
}

.form-label i,
.form-label svg {
    margin-right: 0.375rem;
    opacity: 0.6;
}

/* Optional indicator */
.form-label-optional::after {
    content: '(opcional)';
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: normal;
    margin-left: 0.5rem;
    opacity: 0.6;
}

/* Required indicator */
.form-label-required::after {
    content: '*';
    color: var(--error, #EF4444);
    margin-left: 0.25rem;
}

/* ===================
   FORM INPUT
   Input de texto estilizado com mint-signal border
   =================== */

.form-input {
    width: 100%;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    background: var(--cloud);
    border: 1.5px solid var(--form-border-default);
    color: var(--graphite-depth, #1F2937);
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.5;
}

.form-input:hover:not(:disabled):not(:focus) {
    border-color: var(--form-border-hover);
}

.form-input:focus {
    outline: none;
    border-color: var(--form-border-hover);
    box-shadow:
        0 0 0 3px var(--form-ring-color),
        var(--form-ring-shadow);
}

.form-input::placeholder {
    color: var(--soft-steel, #374151);
    opacity: 0.6;
}

.form-input:disabled {
    background: var(--arctic-mist, #E9ECEF);
    border-color: var(--form-border-disabled);
    color: var(--soft-steel, #374151);
    cursor: not-allowed;
    opacity: 0.7;
}

/* ===================
   SIZE VARIANTS
   =================== */

.form-input-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: 0.375rem;
}

.form-input-lg {
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
    border-radius: 0.625rem;
}

/* ===================
   VALIDATION STATES
   =================== */

/* Error */
.form-input-error,
.form-input.error {
    border-color: var(--error, #EF4444) !important;
    background: rgba(239, 68, 68, 0.04);
}

.form-input-error:focus,
.form-input.error:focus {
    box-shadow:
        0 0 0 3px var(--form-error-ring),
        var(--form-error-shadow);
}

/* Success */
.form-input-success,
.form-input.success {
    border-color: var(--success, #10B981);
}

.form-input-success:focus,
.form-input.success:focus {
    box-shadow:
        0 0 0 3px var(--form-success-ring),
        var(--form-success-shadow);
}

/* Error message */
.form-error {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--error, #EF4444);
}

/* ===================
   FORM SELECT
   Select customizado com chevron teal
   =================== */

.form-select {
    width: 100%;
    padding: 0.625rem 1rem;
    padding-right: 2.75rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    background: var(--cloud);
    border: 1.5px solid var(--form-border-default);
    color: var(--graphite-depth, #1F2937);
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.5;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Chevron-down SVG em teal-intense */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232AA198' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
}

.form-select:hover:not(:disabled):not(:focus) {
    border-color: var(--form-border-hover);
    background-color: rgba(183, 228, 213, 0.03);
}

.form-select:focus {
    outline: none;
    border-color: var(--form-border-hover);
    box-shadow:
        0 0 0 3px var(--form-ring-color),
        var(--form-ring-shadow);
}

.form-select:disabled {
    background-color: var(--arctic-mist, #E9ECEF);
    border-color: var(--form-border-disabled);
    color: var(--soft-steel, #374151);
    cursor: not-allowed;
    opacity: 0.7;
    /* Seta cinza quando disabled */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Select size variants */
.form-select-sm {
    padding: 0.375rem 0.75rem;
    padding-right: 2.25rem;
    font-size: 0.8125rem;
    border-radius: 0.375rem;
    background-size: 16px;
    background-position: right 8px center;
}

.form-select-lg {
    padding: 0.875rem 1.25rem;
    padding-right: 3rem;
    font-size: 1rem;
    border-radius: 0.625rem;
    background-size: 20px;
    background-position: right 14px center;
}

/* Select error state */
.form-select-error,
.form-select.error {
    border-color: var(--error, #EF4444) !important;
    background-color: rgba(239, 68, 68, 0.04);
}

/* ===================
   FORM INPUT WITH ICON
   Container para input com icone
   =================== */

.form-input-icon {
    position: relative;
}

.form-input-icon .form-input {
    padding-left: 2.75rem;
}

.form-input-icon > i,
.form-input-icon > svg,
.form-input-icon > .icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--teal-intense, #1a8b7d);
    pointer-events: none;
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
}

/* Icon on right */
.form-input-icon-right {
    position: relative;
}

.form-input-icon-right .form-input {
    padding-right: 2.75rem;
}

.form-input-icon-right > i,
.form-input-icon-right > svg {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--teal-intense, #1a8b7d);
    pointer-events: none;
}

/* ===================
   FORM TEXTAREA
   =================== */

.form-textarea {
    width: 100%;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    background: var(--cloud);
    border: 1.5px solid var(--form-border-default);
    color: var(--graphite-depth, #1F2937);
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    min-height: 100px;
}

.form-textarea:hover:not(:disabled):not(:focus) {
    border-color: var(--form-border-hover);
}

.form-textarea:focus {
    outline: none;
    border-color: var(--form-border-hover);
    box-shadow:
        0 0 0 3px var(--form-ring-color),
        var(--form-ring-shadow);
}

.form-textarea::placeholder {
    color: var(--soft-steel, #374151);
    opacity: 0.6;
}

.form-textarea:disabled {
    background: var(--arctic-mist, #E9ECEF);
    border-color: var(--form-border-disabled);
    cursor: not-allowed;
    opacity: 0.7;
}

/* ===================
   FORM HELPER TEXT
   =================== */

.form-helper {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--soft-steel, #374151);
    line-height: 1.4;
}

.form-helper i,
.form-helper svg {
    margin-right: 0.25rem;
    opacity: 0.6;
}

/* ===================
   FORM ROW (inline forms)
   =================== */

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.form-row > * {
    flex: 1;
    min-width: 0;
}

.form-row > .form-group {
    margin-bottom: 0;
}

/* ===================
   FORM SECTION
   =================== */

.form-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(183, 228, 213, 0.3);
}

.form-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.form-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--emerald-abyss, #0B2D2A);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-section-title i,
.form-section-title svg {
    color: var(--teal-intense, #1a8b7d);
}

/* ===================
   FORM ACTIONS
   =================== */

.form-actions {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(183, 228, 213, 0.3);
}

.form-actions.right {
    justify-content: flex-end;
}

.form-actions.center {
    justify-content: center;
}

.form-actions.between {
    justify-content: space-between;
}

/* ===================
   INPUT ADDONS
   =================== */

.form-input-group {
    display: flex;
    align-items: stretch;
}

.form-input-group .form-input {
    flex: 1;
    border-radius: 0;
}

.form-input-group .form-input:first-child {
    border-radius: 0.5rem 0 0 0.5rem;
}

.form-input-group .form-input:last-child {
    border-radius: 0 0.5rem 0.5rem 0;
}

.form-input-addon {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    background: var(--arctic-mist, #E9ECEF);
    border: 1.5px solid var(--form-border-default);
    color: var(--soft-steel, #374151);
    font-size: 0.875rem;
    white-space: nowrap;
}

.form-input-addon:first-child {
    border-right: none;
    border-radius: 0.5rem 0 0 0.5rem;
}

.form-input-addon:last-child {
    border-left: none;
    border-radius: 0 0.5rem 0.5rem 0;
}

/* ===================
   CURATION FIELD
   Dual-value pattern: Official (readonly) + Normalized (editable)
   =================== */

.curation-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.curation-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.curation-field-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--emerald-abyss, #0B2D2A);
}

/* Official value (readonly, from external source) */
.curation-official {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--arctic-mist, #E9ECEF);
    border: 1px solid var(--soft-arctic, #E5E8EB);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: var(--soft-steel, #374151);
}

.curation-official-value {
    flex: 1;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.8125rem;
}

.curation-official-lock {
    color: var(--soft-steel, #374151);
    opacity: 0.5;
    font-size: 0.75rem;
}

/* Arrow connector between official and normalized */
.curation-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal-intense, #1a8b7d);
    font-size: 0.75rem;
    padding: 0.25rem 0;
}

/* Normalized value container (with icon) */
.curation-normalized {
    position: relative;
}

.curation-normalized .form-input,
.curation-normalized .form-textarea {
    padding-left: 2rem;
}

.curation-normalized-icon {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
}

/* ===================
   SOURCE BADGES
   Indicate data source (ANVISA, SPOR, SNOMED, etc.)
   =================== */

.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    font-weight: 500;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.source-anvisa { background: #E8F5E9; color: #1B5E20; }
.source-spor { background: #E3F2FD; color: #1565C0; }
.source-snomed { background: #FFF3E0; color: #E65100; }
.source-fda { background: #E8EAF6; color: #283593; }
.source-who { background: #E1F5FE; color: #01579B; }
.source-pharmdata { background: #E0F5EE; color: #0B2D2A; }
.source-obm { background: #F3E5F5; color: #7B1FA2; }
.source-tuss { background: #E0F2F1; color: #00695C; }

/* ===================
   CURATION STATUS
   Mapping status indicators
   =================== */

.curation-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

.status-mapped {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.status-pending {
    background: rgba(245, 158, 11, 0.1);
    color: #D97706;
}

.status-conflict {
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
}

.status-new {
    background: rgba(59, 130, 246, 0.1);
    color: #2563EB;
}

/* ===================
   COMPARISON FIELD
   Side-by-side official vs normalized
   =================== */

.comparison-field {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem;
    align-items: center;
}

.comparison-side {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.comparison-label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--soft-steel, #374151);
}

.comparison-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    color: var(--teal-intense, #1a8b7d);
}

/* ===================
   ENRICHMENT CARD
   For displaying external source data
   =================== */

.enrichment-card {
    background: var(--cloud);
    border: 1px solid rgba(183, 228, 213, 0.4);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: var(--shadow-md, 0 4px 12px -2px rgba(11, 45, 42, 0.18));
}

.enrichment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.75rem;
    background: rgba(233, 236, 239, 0.5);
    border-bottom: 1px solid var(--soft-arctic, #E5E8EB);
}

.enrichment-body {
    padding: 0.75rem;
}

.enrichment-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.375rem 0;
}

.enrichment-row:not(:last-child) {
    border-bottom: 1px dashed rgba(183, 228, 213, 0.3);
}

.enrichment-key {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--soft-steel, #374151);
    min-width: 5rem;
}

.enrichment-value {
    font-size: 0.8125rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    color: var(--graphite-depth, #1F2937);
}

/* ===================
   FORM CARD
   Collapsible section container
   =================== */

.form-card {
    background: var(--cloud);
    border: 1px solid rgba(183, 228, 213, 0.4);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: var(--shadow-md, 0 4px 12px -2px rgba(11, 45, 42, 0.18));
}

.form-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(248, 249, 250, 0.5);
    border-bottom: 1px solid var(--soft-arctic, #E5E8EB);
}

.form-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--emerald-abyss, #0B2D2A);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-card-title i,
.form-card-title svg {
    color: var(--teal-intense, #1a8b7d);
}

.form-card-body {
    padding: 1rem;
}

.form-card-footer {
    padding: 0.75rem 1rem;
    background: rgba(248, 249, 250, 0.5);
    border-top: 1px solid var(--soft-arctic, #E5E8EB);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ===================
   BADGE REQUIRED
   =================== */

.badge-required {
    font-size: 0.625rem;
    font-weight: 500;
    padding: 0.125rem 0.375rem;
    background: rgba(42, 161, 152, 0.1);
    color: var(--teal-intense, #1a8b7d);
    border-radius: 0.25rem;
}

/* ===================
   REDUCED MOTION
   =================== */

@media (prefers-reduced-motion: reduce) {
    .form-input,
    .form-select,
    .form-textarea {
        transition: none;
    }
}

/* ===================
   DARK MODE
   =================== */

:root.dark-mode,
[data-theme="dark"] {
    /* Form tokens - dark */
    --form-border-default: rgba(183, 228, 213, 0.2);
    --form-border-hover: var(--teal-intense, #1a8b7d);
    --form-border-disabled: rgba(183, 228, 213, 0.1);

    --form-ring-color: rgba(61, 201, 189, 0.2);
    --form-ring-shadow: 0 2px 8px rgba(61, 201, 189, 0.15);

    --form-error-ring: rgba(248, 113, 113, 0.2);
    --form-error-shadow: 0 2px 8px rgba(248, 113, 113, 0.15);

    --form-success-ring: rgba(34, 197, 94, 0.2);
    --form-success-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
}

:root.dark-mode .form-input,
:root.dark-mode .form-select,
:root.dark-mode .form-textarea,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
    background-color: var(--arctic-mist);
    color: var(--graphite-depth);
}

:root.dark-mode .form-input::placeholder,
:root.dark-mode .form-textarea::placeholder,
[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-textarea::placeholder {
    color: var(--soft-steel);
    opacity: 0.7;
}

:root.dark-mode .form-input:disabled,
:root.dark-mode .form-select:disabled,
:root.dark-mode .form-textarea:disabled,
[data-theme="dark"] .form-input:disabled,
[data-theme="dark"] .form-select:disabled,
[data-theme="dark"] .form-textarea:disabled {
    background: var(--soft-arctic);
    color: var(--soft-steel);
}

:root.dark-mode .form-select,
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233dc9bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
}

:root.dark-mode .form-select:disabled,
[data-theme="dark"] .form-select:disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

:root.dark-mode .form-label,
:root.dark-mode .form-section-title,
:root.dark-mode .curation-field-label,
:root.dark-mode .form-card-title,
[data-theme="dark"] .form-label,
[data-theme="dark"] .form-section-title,
[data-theme="dark"] .curation-field-label,
[data-theme="dark"] .form-card-title {
    color: var(--graphite-depth);
}

:root.dark-mode .form-input-addon,
[data-theme="dark"] .form-input-addon {
    background: var(--soft-arctic);
    color: var(--soft-steel);
}

/* Curation components - dark */
:root.dark-mode .curation-official,
[data-theme="dark"] .curation-official {
    background: var(--soft-arctic);
    border-color: rgba(183, 228, 213, 0.1);
}

:root.dark-mode .enrichment-card,
:root.dark-mode .form-card,
[data-theme="dark"] .enrichment-card,
[data-theme="dark"] .form-card {
    background: var(--arctic-mist);
    border: 1px solid rgba(183, 228, 213, 0.2);
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(183, 228, 213, 0.08);
}

:root.dark-mode .enrichment-header,
:root.dark-mode .form-card-header,
:root.dark-mode .form-card-footer,
[data-theme="dark"] .enrichment-header,
[data-theme="dark"] .form-card-header,
[data-theme="dark"] .form-card-footer {
    background: var(--soft-arctic);
    border-color: rgba(183, 228, 213, 0.1);
}

:root.dark-mode .enrichment-row:not(:last-child),
[data-theme="dark"] .enrichment-row:not(:last-child) {
    border-bottom-color: rgba(183, 228, 213, 0.1);
}

/* Source badges - dark */
:root.dark-mode .source-anvisa,
[data-theme="dark"] .source-anvisa {
    background: rgba(27, 94, 32, 0.15);
    color: #4ade80;
}

:root.dark-mode .source-spor,
[data-theme="dark"] .source-spor {
    background: rgba(21, 101, 192, 0.15);
    color: #60a5fa;
}

:root.dark-mode .source-snomed,
[data-theme="dark"] .source-snomed {
    background: rgba(230, 81, 0, 0.15);
    color: #fb923c;
}

:root.dark-mode .source-fda,
[data-theme="dark"] .source-fda {
    background: rgba(40, 53, 147, 0.15);
    color: #818cf8;
}

:root.dark-mode .source-who,
[data-theme="dark"] .source-who {
    background: rgba(1, 87, 155, 0.15);
    color: #38bdf8;
}

:root.dark-mode .source-pharmdata,
[data-theme="dark"] .source-pharmdata {
    background: rgba(183, 228, 213, 0.1);
    color: #B7E4D5;
}

:root.dark-mode .source-obm,
[data-theme="dark"] .source-obm {
    background: rgba(123, 31, 162, 0.15);
    color: #c084fc;
}

:root.dark-mode .source-tuss,
[data-theme="dark"] .source-tuss {
    background: rgba(0, 105, 92, 0.15);
    color: #2dd4bf;
}

/* Curation status - dark */
:root.dark-mode .status-mapped,
[data-theme="dark"] .status-mapped {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

:root.dark-mode .status-pending,
[data-theme="dark"] .status-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

:root.dark-mode .status-conflict,
[data-theme="dark"] .status-conflict {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

:root.dark-mode .status-new,
[data-theme="dark"] .status-new {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}

:root.dark-mode .badge-required,
[data-theme="dark"] .badge-required {
    background: rgba(61, 201, 189, 0.15);
    color: #3dc9bd;
}

/* ================================================================
   EXTENDED INPUT TYPES
   Number, Date, Time, Range, File, Color
   ================================================================ */

/* ===================
   NUMBER INPUT
   Com spinners customizados
   =================== */

.form-input-number {
    -moz-appearance: textfield;
    appearance: textfield;
}

.form-input-number::-webkit-outer-spin-button,
.form-input-number::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Number input com controles */
.form-number-wrapper {
    position: relative;
    display: inline-flex;
    align-items: stretch;
}

.form-number-wrapper .form-input {
    border-radius: 0.5rem 0 0 0.5rem;
    padding-right: 0.75rem;
    text-align: center;
}

.form-number-controls {
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--form-border-default);
    border-left: none;
    border-radius: 0 0.5rem 0.5rem 0;
    overflow: hidden;
}

.form-number-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    flex: 1;
    background: var(--arctic-mist, #E9ECEF);
    border: none;
    color: var(--soft-steel, #374151);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.75rem;
}

.form-number-btn:hover {
    background: rgba(42, 161, 152, 0.1);
    color: var(--teal-intense, #1a8b7d);
}

.form-number-btn:active {
    background: rgba(42, 161, 152, 0.2);
}

.form-number-btn:first-child {
    border-bottom: 1px solid var(--form-border-default);
}

.form-number-wrapper:focus-within .form-input {
    border-color: var(--form-border-hover);
    box-shadow: 0 0 0 3px var(--form-ring-color), var(--form-ring-shadow);
}

.form-number-wrapper:focus-within .form-number-controls {
    border-color: var(--form-border-hover);
}

/* Inline number controls */
.form-number-inline {
    flex-direction: row;
}

.form-number-inline .form-input {
    border-radius: 0;
    order: 2;
}

.form-number-inline .form-number-btn-dec {
    border-radius: 0.5rem 0 0 0.5rem;
    order: 1;
    border: 1.5px solid var(--form-border-default);
    border-right: none;
}

.form-number-inline .form-number-btn-inc {
    border-radius: 0 0.5rem 0.5rem 0;
    order: 3;
    border: 1.5px solid var(--form-border-default);
    border-left: none;
}

/* ===================
   DATE & TIME INPUTS
   =================== */

.form-input-date,
.form-input-time,
.form-input-datetime {
    position: relative;
}

/* Reset browser styles */
.form-input-date::-webkit-calendar-picker-indicator,
.form-input-time::-webkit-calendar-picker-indicator,
.form-input-datetime::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2.5rem;
    opacity: 0;
    cursor: pointer;
}

/* Custom icon */
.form-date-wrapper,
.form-time-wrapper {
    position: relative;
}

.form-date-wrapper .form-input,
.form-time-wrapper .form-input {
    padding-right: 2.75rem;
}

.form-date-wrapper::after,
.form-time-wrapper::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    opacity: 0.6;
}

.form-date-wrapper::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232AA198' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
}

.form-time-wrapper::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232AA198' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Date range */
.form-date-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-date-range-separator {
    color: var(--soft-steel, #374151);
    font-size: 0.875rem;
}

/* ===================
   RANGE SLIDER
   =================== */

.form-range {
    width: 100%;
    height: 0.5rem;
    background: rgba(183, 228, 213, 0.3);
    border-radius: 0.25rem;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* Webkit (Chrome, Safari, Edge) */
.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--teal-intense, #1a8b7d);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(42, 161, 152, 0.3);
}

.form-range::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(42, 161, 152, 0.4);
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(42, 161, 152, 0.2);
}

/* Firefox */
.form-range::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    background: var(--teal-intense, #1a8b7d);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(42, 161, 152, 0.3);
}

.form-range::-moz-range-thumb:hover {
    transform: scale(1.1);
}

.form-range::-moz-range-track {
    background: rgba(183, 228, 213, 0.3);
    height: 0.5rem;
    border-radius: 0.25rem;
}

/* Range with value display */
.form-range-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-range-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-range-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--teal-intense, #1a8b7d);
    min-width: 3rem;
    text-align: right;
}

.form-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--soft-steel, #374151);
}

/* Range sizes */
.form-range-sm {
    height: 0.375rem;
}

.form-range-sm::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
}

.form-range-lg {
    height: 0.625rem;
}

.form-range-lg::-webkit-slider-thumb {
    width: 1.5rem;
    height: 1.5rem;
}

/* ===================
   FILE INPUT
   =================== */

.form-file {
    position: relative;
}

.form-file-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.form-file-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    background: var(--cloud);
    border: 1.5px dashed var(--form-border-default);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-file-label:hover {
    border-color: var(--form-border-hover);
    background: rgba(183, 228, 213, 0.03);
}

.form-file-input:focus + .form-file-label {
    border-color: var(--form-border-hover);
    box-shadow: 0 0 0 3px var(--form-ring-color);
}

.form-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(42, 161, 152, 0.1);
    color: var(--teal-intense, #1a8b7d);
    border-radius: 0.5rem;
    font-size: 1rem;
}

.form-file-text {
    flex: 1;
}

.form-file-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--graphite-depth, #1F2937);
}

.form-file-subtitle {
    font-size: 0.75rem;
    color: var(--soft-steel, #374151);
}

.form-file-btn {
    padding: 0.5rem 1rem;
    background: var(--teal-intense, #1a8b7d);
    color: white;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 0.375rem;
    transition: background 0.15s ease;
}

.form-file-label:hover .form-file-btn {
    background: var(--emerald-abyss, #0B2D2A);
}

/* Drag & Drop Zone */
.form-file-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    min-height: 10rem;
    border-style: dashed;
    border-width: 2px;
}

.form-file-dropzone.dragover {
    border-color: var(--teal-intense, #1a8b7d);
    background: rgba(42, 161, 152, 0.05);
}

.form-file-dropzone .form-file-icon {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

/* File list */
.form-file-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.form-file-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(183, 228, 213, 0.08);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
}

.form-file-item-icon {
    color: var(--teal-intense, #1a8b7d);
}

.form-file-item-name {
    flex: 1;
    color: var(--graphite-depth, #1F2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-file-item-size {
    color: var(--soft-steel, #374151);
    font-size: 0.75rem;
}

.form-file-item-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    background: transparent;
    border: none;
    color: var(--soft-steel, #374151);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.form-file-item-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error, #EF4444);
}

/* ===================
   COLOR INPUT
   =================== */

.form-color-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-color {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.25rem;
    border: 1.5px solid var(--form-border-default);
    border-radius: 0.5rem;
    cursor: pointer;
    background: var(--cloud);
    transition: all 0.15s ease;
}

.form-color::-webkit-color-swatch-wrapper {
    padding: 0;
}

.form-color::-webkit-color-swatch {
    border: none;
    border-radius: 0.25rem;
}

.form-color::-moz-color-swatch {
    border: none;
    border-radius: 0.25rem;
}

.form-color:hover {
    border-color: var(--form-border-hover);
}

.form-color:focus {
    outline: none;
    border-color: var(--form-border-hover);
    box-shadow: 0 0 0 3px var(--form-ring-color);
}

.form-color-value {
    font-family: 'JetBrains Mono', 'Fira Code', var(--font-mono, monospace);
    font-size: 0.875rem;
    color: var(--graphite-depth, #1F2937);
    text-transform: uppercase;
}

/* Color presets */
.form-color-presets {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.form-color-preset {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.form-color-preset:hover {
    transform: scale(1.1);
}

.form-color-preset.active {
    border-color: var(--graphite-depth, #1F2937);
    box-shadow: 0 0 0 2px white;
}

/* ===================
   DARK MODE - EXTENDED INPUTS
   =================== */

:root.dark-mode .form-number-btn,
[data-theme="dark"] .form-number-btn {
    background: rgba(183, 228, 213, 0.1);
}

:root.dark-mode .form-number-btn:hover,
[data-theme="dark"] .form-number-btn:hover {
    background: rgba(42, 161, 152, 0.2);
}

:root.dark-mode .form-range,
[data-theme="dark"] .form-range {
    background: rgba(183, 228, 213, 0.15);
}

:root.dark-mode .form-file-label,
[data-theme="dark"] .form-file-label {
    background: var(--arctic-mist, #E9ECEF);
}

:root.dark-mode .form-file-item,
[data-theme="dark"] .form-file-item {
    background: rgba(183, 228, 213, 0.1);
}

:root.dark-mode .form-color,
[data-theme="dark"] .form-color {
    background: var(--arctic-mist, #E9ECEF);
}

/* ===================
   ACCESSIBILITY - EXTENDED INPUTS
   =================== */

@media (prefers-reduced-motion: reduce) {
    .form-range::-webkit-slider-thumb,
    .form-color-preset,
    .form-number-btn {
        transition: none;
    }
}

/**
 * BUTTONS — ações primárias, secundárias e fantasma.
 * Vale para <button> e <a>: sem Preflight do Tailwind, a âncora
 * precisa de text-decoration e cor no próprio .btn.
 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-weight: 500;
    font-family: inherit;
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.4;
    cursor: pointer;
    border: none;
    text-decoration: none;
    color: inherit;
    background: transparent;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary {
    background: var(--signal-primary, var(--teal-intense));
    color: var(--cloud-fixed);
}

.btn-primary:hover:not(:disabled) {
    background: var(--emerald-abyss);
    color: var(--cloud-fixed);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary, var(--graphite-depth));
    border: 1px solid var(--border-default, var(--soft-arctic));
}

.btn-secondary:hover:not(:disabled) {
    background: var(--arctic-mist);
}

.btn-ghost {
    background: transparent;
    color: var(--teal-intense);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--signal-subtle);
    color: var(--teal-intense);
}

.btn-danger {
    background: var(--btn-danger-bg);
    color: var(--cloud-fixed);
}

.btn-danger:hover:not(:disabled) {
    background: var(--btn-danger-bg-hover);
    color: var(--cloud-fixed);
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/**
 * PHARMDATA DESIGN SYSTEM - Autocomplete
 * Suggestions dropdown for search/autocomplete inputs.
 *
 * Requires: pharmdata-tokens.css
 *
 * @example
 * <div class="search-wrap">
 *   <input type="text" />
 *   <div class="suggestions-list">
 *     <a class="suggestion-item" href="#">
 *       <span class="suggestion-name">Dipirona 500mg</span>
 *       <span class="suggestion-meta">VTM <span class="suggestion-sep">·</span> Comprimido</span>
 *     </a>
 *   </div>
 * </div>
 */

/* ─── Dropdown container ─── */
.suggestions-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: var(--arctic-mist);
    border: 1px solid var(--soft-arctic);
    border-radius: 8px;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--graphite-depth) 10%, transparent);
    z-index: 100;
    max-height: 420px;
    overflow-y: auto;
}

.suggestions-list:empty {
    display: none;
}

/* ─── Individual suggestion ─── */
.suggestion-item {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--graphite-depth);
    cursor: pointer;
    border-bottom: 1px solid var(--soft-arctic);
    text-align: left;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover,
.suggestion-item.active {
    background: var(--mint-signal);
}

/* ─── Name & metadata ─── */
.suggestion-name {
    display: block;
    font-weight: 500;
    font-size: 13px;
    color: var(--graphite-depth);
    line-height: 1.3;
}

.suggestion-meta {
    display: block;
    font-size: 11px;
    color: var(--soft-steel);
    margin-top: 1px;
    line-height: 1.3;
}

.suggestion-sep {
    opacity: 0.4;
}

/* ─── Empty state ─── */
.suggestions-empty {
    padding: 16px;
    text-align: center;
    color: var(--soft-steel);
    font-size: 13px;
}

/* ─── Clickable table row (used with autocomplete results) ─── */
.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background: var(--mint-signal);
}

/**
 * CHECKBOXES, RADIOS & TOGGLES - PharmData Design System v2.0
 * Componentes de seleção customizados com identidade visual consistente
 *
 * Substitui completamente os controles nativos do navegador.
 * Suporta todos os estados: default, hover, focus, checked, disabled, error.
 */

/* ===================
   CSS CUSTOM PROPERTIES
   =================== */

:root {
    /* Checkbox/Radio sizing */
    --checkbox-size: 1.125rem;
    --checkbox-size-sm: 0.875rem;
    --checkbox-size-lg: 1.375rem;

    /* Border */
    --checkbox-border-width: 1.5px;
    --checkbox-border-color: rgba(183, 228, 213, 0.5);
    --checkbox-border-hover: var(--teal-intense, #1a8b7d);
    --checkbox-border-checked: var(--teal-intense, #1a8b7d);

    /* Background */
    --checkbox-bg: var(--cloud);
    --checkbox-bg-checked: var(--teal-intense, #1a8b7d);
    --checkbox-bg-disabled: var(--arctic-mist, #E9ECEF);

    /* Focus ring */
    --checkbox-ring-color: rgba(42, 161, 152, 0.2);
    --checkbox-ring-offset: 2px;

    /* Checkmark */
    --checkbox-check-color: white;

    /* Toggle specific */
    --toggle-width: 2.75rem;
    --toggle-height: 1.5rem;
    --toggle-knob-size: 1.125rem;
    --toggle-bg: var(--soft-steel, #374151);
    --toggle-bg-checked: var(--teal-intense, #1a8b7d);

    /* Transition */
    --checkbox-transition: all 0.15s ease;
}

/* Dark mode overrides */
:root.dark-mode {
    --checkbox-border-color: rgba(183, 228, 213, 0.3);
    --checkbox-bg: var(--arctic-mist, #E9ECEF);
    --checkbox-bg-disabled: rgba(255, 255, 255, 0.1);
    --checkbox-ring-color: rgba(42, 161, 152, 0.3);
    --toggle-bg: rgba(148, 163, 184, 0.4);
}

/* ===================
   BASE CHECKBOX
   Container que esconde o input nativo
   =================== */

.form-checkbox,
.form-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.9375rem;
    color: var(--graphite-depth, #1F2937);
    line-height: 1.4;
}

/* Esconde input nativo */
.form-checkbox input,
.form-radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ===================
   CHECKBOX VISUAL
   O elemento visual customizado
   =================== */

.form-checkbox .checkbox-mark,
.checkbox-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    border: var(--checkbox-border-width) solid var(--checkbox-border-color);
    border-radius: 0.25rem;
    background: var(--checkbox-bg);
    transition: var(--checkbox-transition);
}

/* Checkmark icon (usando SVG inline) */
.form-checkbox .checkbox-mark::after {
    content: '';
    position: absolute;
    opacity: 0;
    transform: scale(0.5);
    transition: var(--checkbox-transition);
    width: 0.625rem;
    height: 0.625rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Hover state */
.form-checkbox:hover .checkbox-mark {
    border-color: var(--checkbox-border-hover);
    background: rgba(183, 228, 213, 0.05);
}

/* Focus state */
.form-checkbox input:focus-visible + .checkbox-mark {
    border-color: var(--checkbox-border-hover);
    box-shadow: 0 0 0 var(--checkbox-ring-offset) var(--checkbox-ring-color);
}

/* Checked state */
.form-checkbox input:checked + .checkbox-mark {
    background: var(--checkbox-bg-checked);
    border-color: var(--checkbox-border-checked);
}

.form-checkbox input:checked + .checkbox-mark::after {
    opacity: 1;
    transform: scale(1);
}

/* Indeterminate state */
.form-checkbox input:indeterminate + .checkbox-mark {
    background: var(--checkbox-bg-checked);
    border-color: var(--checkbox-border-checked);
}

.form-checkbox input:indeterminate + .checkbox-mark::after {
    opacity: 1;
    transform: scale(1);
    width: 0.5rem;
    height: 2px;
    background: var(--checkbox-check-color);
    background-image: none;
    border-radius: 1px;
}

/* Disabled state */
.form-checkbox input:disabled + .checkbox-mark {
    background: var(--checkbox-bg-disabled);
    border-color: var(--checkbox-border-color);
    opacity: 0.6;
    cursor: not-allowed;
}

.form-checkbox input:disabled ~ .checkbox-label,
.form-checkbox:has(input:disabled) {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Error state */
.form-checkbox.error .checkbox-mark,
.form-checkbox-error .checkbox-mark {
    border-color: var(--error, #EF4444);
}

.form-checkbox.error input:focus-visible + .checkbox-mark,
.form-checkbox-error input:focus-visible + .checkbox-mark {
    box-shadow: 0 0 0 var(--checkbox-ring-offset) rgba(239, 68, 68, 0.2);
}

/* ===================
   CHECKBOX SIZES
   =================== */

.form-checkbox-sm .checkbox-mark {
    width: var(--checkbox-size-sm);
    height: var(--checkbox-size-sm);
    border-radius: 0.1875rem;
}

.form-checkbox-sm .checkbox-mark::after {
    width: 0.5rem;
    height: 0.5rem;
}

.form-checkbox-sm {
    font-size: 0.8125rem;
}

.form-checkbox-lg .checkbox-mark {
    width: var(--checkbox-size-lg);
    height: var(--checkbox-size-lg);
    border-radius: 0.3125rem;
}

.form-checkbox-lg .checkbox-mark::after {
    width: 0.75rem;
    height: 0.75rem;
}

.form-checkbox-lg {
    font-size: 1rem;
}

/* ===================
   RADIO BUTTON
   =================== */

.form-radio .radio-mark,
.radio-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    border: var(--checkbox-border-width) solid var(--checkbox-border-color);
    border-radius: 50%;
    background: var(--checkbox-bg);
    transition: var(--checkbox-transition);
}

/* Radio dot */
.form-radio .radio-mark::after {
    content: '';
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--checkbox-check-color);
    opacity: 0;
    transform: scale(0);
    transition: var(--checkbox-transition);
}

/* Hover */
.form-radio:hover .radio-mark {
    border-color: var(--checkbox-border-hover);
    background: rgba(183, 228, 213, 0.05);
}

/* Focus */
.form-radio input:focus-visible + .radio-mark {
    border-color: var(--checkbox-border-hover);
    box-shadow: 0 0 0 var(--checkbox-ring-offset) var(--checkbox-ring-color);
}

/* Checked */
.form-radio input:checked + .radio-mark {
    background: var(--checkbox-bg-checked);
    border-color: var(--checkbox-border-checked);
}

.form-radio input:checked + .radio-mark::after {
    opacity: 1;
    transform: scale(1);
}

/* Disabled */
.form-radio input:disabled + .radio-mark {
    background: var(--checkbox-bg-disabled);
    border-color: var(--checkbox-border-color);
    opacity: 0.6;
    cursor: not-allowed;
}

.form-radio input:disabled ~ .radio-label,
.form-radio:has(input:disabled) {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Error */
.form-radio.error .radio-mark,
.form-radio-error .radio-mark {
    border-color: var(--error, #EF4444);
}

/* Radio sizes */
.form-radio-sm .radio-mark {
    width: var(--checkbox-size-sm);
    height: var(--checkbox-size-sm);
}

.form-radio-sm .radio-mark::after {
    width: 0.375rem;
    height: 0.375rem;
}

.form-radio-lg .radio-mark {
    width: var(--checkbox-size-lg);
    height: var(--checkbox-size-lg);
}

.form-radio-lg .radio-mark::after {
    width: 0.625rem;
    height: 0.625rem;
}

/* ===================
   RADIO GROUP
   =================== */

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.radio-group-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
}

.radio-group-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    color: var(--emerald-abyss, #0B2D2A);
}

/* ===================
   TOGGLE / SWITCH
   =================== */

.form-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.9375rem;
    color: var(--graphite-depth, #1F2937);
}

.form-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.toggle-track {
    position: relative;
    width: var(--toggle-width);
    height: var(--toggle-height);
    background: var(--toggle-bg);
    border-radius: calc(var(--toggle-height) / 2);
    transition: var(--checkbox-transition);
    flex-shrink: 0;
}

.toggle-track::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.1875rem;
    transform: translateY(-50%);
    width: var(--toggle-knob-size);
    height: var(--toggle-knob-size);
    background: var(--cloud);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: var(--checkbox-transition);
}

/* Hover */
.form-toggle:hover .toggle-track {
    background: var(--soft-steel, #374151);
}

/* Focus */
.form-toggle input:focus-visible + .toggle-track {
    box-shadow: 0 0 0 var(--checkbox-ring-offset) var(--checkbox-ring-color);
}

/* Checked */
.form-toggle input:checked + .toggle-track {
    background: var(--toggle-bg-checked);
}

.form-toggle input:checked + .toggle-track::after {
    left: calc(100% - var(--toggle-knob-size) - 0.1875rem);
}

.form-toggle:hover input:checked + .toggle-track {
    background: var(--emerald-abyss, #0B2D2A);
}

/* Disabled */
.form-toggle input:disabled + .toggle-track {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-toggle:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ===================
   TOGGLE SIZES
   =================== */

.form-toggle-sm .toggle-track {
    width: 2.25rem;
    height: 1.25rem;
}

.form-toggle-sm .toggle-track::after {
    width: 0.875rem;
    height: 0.875rem;
}

.form-toggle-sm input:checked + .toggle-track::after {
    left: calc(100% - 0.875rem - 0.1875rem);
}

.form-toggle-lg .toggle-track {
    width: 3.5rem;
    height: 1.875rem;
}

.form-toggle-lg .toggle-track::after {
    width: 1.5rem;
    height: 1.5rem;
}

.form-toggle-lg input:checked + .toggle-track::after {
    left: calc(100% - 1.5rem - 0.1875rem);
}

/* ===================
   TOGGLE WITH LABELS
   =================== */

.form-toggle-labeled {
    gap: 0;
}

.toggle-label-off,
.toggle-label-on {
    padding: 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--soft-steel, #374151);
    transition: color 0.15s ease;
}

.form-toggle input:not(:checked) ~ .toggle-label-off {
    color: var(--graphite-depth, #1F2937);
    font-weight: 500;
}

.form-toggle input:checked ~ .toggle-label-on {
    color: var(--teal-intense, #1a8b7d);
    font-weight: 500;
}

/* ===================
   TOGGLE WITH ICONS
   =================== */

.toggle-track-icons {
    position: relative;
}

.toggle-track-icons .toggle-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.625rem;
    transition: opacity 0.15s ease;
}

.toggle-track-icons .toggle-icon-off {
    right: 0.375rem;
    color: rgba(255, 255, 255, 0.7);
    opacity: 1;
}

.toggle-track-icons .toggle-icon-on {
    left: 0.375rem;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0;
}

.form-toggle input:checked + .toggle-track-icons .toggle-icon-off {
    opacity: 0;
}

.form-toggle input:checked + .toggle-track-icons .toggle-icon-on {
    opacity: 1;
}

/* ===================
   CHECKBOX/RADIO CARD
   Estilo de card selecionável
   =================== */

.form-checkbox-card,
.form-radio-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1.5px solid var(--checkbox-border-color);
    border-radius: 0.5rem;
    background: var(--checkbox-bg);
    cursor: pointer;
    transition: var(--checkbox-transition);
}

.form-checkbox-card:hover,
.form-radio-card:hover {
    border-color: var(--checkbox-border-hover);
    background: rgba(183, 228, 213, 0.03);
}

.form-checkbox-card:has(input:checked),
.form-radio-card:has(input:checked) {
    border-color: var(--teal-intense, #1a8b7d);
    background: rgba(42, 161, 152, 0.05);
}

.form-checkbox-card:has(input:focus-visible),
.form-radio-card:has(input:focus-visible) {
    box-shadow: 0 0 0 3px var(--checkbox-ring-color);
}

.checkbox-card-content,
.radio-card-content {
    flex: 1;
}

.checkbox-card-title,
.radio-card-title {
    font-weight: 600;
    color: var(--graphite-depth, #1F2937);
    margin-bottom: 0.25rem;
}

.checkbox-card-desc,
.radio-card-desc {
    font-size: 0.8125rem;
    color: var(--soft-steel, #374151);
    line-height: 1.4;
}

/* ===================
   ACCESSIBILITY
   =================== */

/* High contrast mode */
@media (prefers-contrast: high) {
    .checkbox-mark,
    .radio-mark {
        border-width: 2px;
    }

    .form-checkbox input:checked + .checkbox-mark,
    .form-radio input:checked + .radio-mark {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .checkbox-mark,
    .checkbox-mark::after,
    .radio-mark,
    .radio-mark::after,
    .toggle-track,
    .toggle-track::after {
        transition: none;
    }
}

/**
 * APP HEADER — Pharmdata Design System v1.0
 *
 * Moldura global para aplicativos autenticados. O componente define anatomia
 * e estados; navegação local, título de página e capacidades do produto são
 * composições externas.
 */

.app-header {
    box-sizing: border-box;
    inline-size: 100%;
    background: var(--surface-institutional);
    border-block-end: 1px solid color-mix(in srgb, var(--cloud-fixed) 14%, transparent);
    box-shadow: none;
    color: var(--cloud-fixed);
    font-family: var(--font-sans);
}

.app-header *,
.app-header *::before,
.app-header *::after {
    box-sizing: border-box;
}

.app-header--sticky {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
}

/* Protege a âncora institucional dos overrides globais legados de header. */
:root.dark-mode .app-header,
[data-theme="dark"] .app-header {
    background: var(--surface-institutional);
    border-block-end-color: color-mix(in srgb, var(--cloud-fixed) 14%, transparent);
    box-shadow: none;
}

.app-header__inner {
    display: flex;
    min-block-size: var(--space-16);
    max-inline-size: var(--container-2xl);
    margin-inline: auto;
    align-items: center;
    gap: var(--space-4);
    padding-inline: var(--space-6);
}

.app-header__start,
.app-header__actions,
.app-header__identity,
.app-header__account {
    display: flex;
    min-inline-size: 0;
    align-items: center;
}

.app-header__start {
    gap: var(--space-3);
}

.app-header__capability {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.app-header__actions {
    margin-inline-start: auto;
    gap: var(--space-1);
}

.app-header__identity {
    gap: var(--space-2);
    color: inherit;
    line-height: var(--leading-tight);
    text-decoration: none;
    white-space: nowrap;
}

.app-header__product-name {
    color: var(--cloud-fixed);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
}

.app-header__organization {
    padding-inline-start: var(--space-2);
    border-inline-start: 1px solid color-mix(in srgb, var(--cloud-fixed) 22%, transparent);
    color: var(--mint-signal-fixed);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

.app-header__navigation-trigger,
.app-header__action {
    display: inline-flex;
    min-block-size: var(--space-11);
    min-inline-size: var(--space-11);
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.app-header__navigation-trigger:hover,
.app-header__action:hover {
    background: color-mix(in srgb, var(--cloud-fixed) 9%, transparent);
}

.app-header__navigation-trigger[aria-expanded="true"] {
    background: color-mix(in srgb, var(--mint-signal-fixed) 14%, transparent);
    border-color: color-mix(in srgb, var(--mint-signal-fixed) 45%, transparent);
    color: var(--mint-signal-fixed);
}

.app-header__identity:focus-visible,
.app-header__navigation-trigger:focus-visible,
.app-header__action:focus-visible {
    outline: 3px solid var(--mint-signal-fixed);
    outline-offset: 2px;
}

.app-header__icon {
    inline-size: var(--icon-lg);
    block-size: var(--icon-lg);
    font-size: var(--icon-lg);
}

.app-header__account {
    gap: var(--space-2);
    margin-inline-start: var(--space-2);
    padding-inline-start: var(--space-3);
    border-inline-start: 1px solid color-mix(in srgb, var(--cloud-fixed) 18%, transparent);
}

.app-header__avatar {
    display: inline-flex;
    inline-size: var(--space-8);
    block-size: var(--space-8);
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    background: var(--mint-signal-fixed);
    border-radius: var(--radius-full);
    color: var(--emerald-abyss-fixed);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.app-header__account-copy {
    display: flex;
    min-inline-size: 0;
    flex-direction: column;
    line-height: var(--leading-tight);
}

.app-header__account-name {
    overflow: hidden;
    color: var(--cloud-fixed);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-header__account-context {
    margin-block-start: var(--space-1);
    color: var(--mint-signal-fixed);
    font-size: var(--text-xs);
}

@media (max-width: 640px) {
    .app-header__inner {
        gap: var(--space-2);
        padding-inline: var(--space-3);
    }

    .app-header__start {
        gap: var(--space-2);
    }

    .app-header__organization,
    .app-header__account-copy {
        display: none;
    }

    .app-header__account {
        margin-inline-start: 0;
        padding-inline-start: var(--space-2);
    }
}

@media (forced-colors: active) {
    .app-header {
        border-color: CanvasText;
    }

    .app-header__navigation-trigger,
    .app-header__action,
    .app-header__avatar {
        border: 1px solid CanvasText;
    }
}

/**
 * SEGMENTED CHOICE — PharmData Design System v1.0
 *
 * Escolha única e curta baseada em radios nativos. A composição cuida apenas
 * da apresentação; persistência e regras de domínio pertencem ao adaptador.
 */

.segmented-choice {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.segmented-choice__legend {
    margin-block-end: var(--space-3);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}

.segmented-choice__options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--surface-sunken);
    border-radius: var(--radius-xl);
}

.segmented-choice__option {
    position: relative;
    min-inline-size: 0;
}

.segmented-choice__option input[type="radio"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.segmented-choice__label {
    display: flex;
    min-block-size: var(--space-11);
    align-items: center;
    justify-content: center;
    padding-inline: var(--space-2.5);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight);
    text-align: center;
    transition:
        background-color var(--transition-fast) var(--ease-default),
        color var(--transition-fast) var(--ease-default),
        box-shadow var(--transition-fast) var(--ease-default);
}

.segmented-choice__option:hover
input[type="radio"]:not(:checked):not(:disabled)
+ .segmented-choice__label {
    background: var(--surface-raised);
    color: var(--text-primary);
}

.segmented-choice__option:active
input[type="radio"]:not(:disabled)
+ .segmented-choice__label {
    background: var(--signal-subtle);
    color: var(--text-primary);
}

.segmented-choice__option input[type="radio"]:checked
+ .segmented-choice__label {
    background: var(--signal-subtle);
    box-shadow: inset 0 0 0 1px var(--signal-primary);
    color: var(--text-primary);
}

.segmented-choice__option input[type="radio"]:focus-visible
+ .segmented-choice__label {
    outline: var(--focus-ring-width) solid var(--signal-primary);
    outline-offset: var(--focus-ring-offset);
}

.segmented-choice__option input[type="radio"]:disabled
+ .segmented-choice__label,
.segmented-choice:disabled .segmented-choice__label {
    opacity: 0.55;
    cursor: not-allowed;
}

.segmented-choice[aria-invalid="true"] .segmented-choice__options {
    box-shadow: 0 0 0 1px var(--error);
}

.segmented-choice__error {
    margin: var(--space-2) 0 0;
    color: var(--error);
    font-size: var(--text-sm);
}

@media (prefers-reduced-motion: reduce) {
    .segmented-choice__label {
        transition: none;
    }
}

@media (forced-colors: active) {
    .segmented-choice__option input[type="radio"]:checked
    + .segmented-choice__label {
        outline: 2px solid CanvasText;
        outline-offset: -2px;
    }
}

/**
 * THEME PREFERENCE COMPACT — PharmData Design System v1.0
 *
 * Renderer compacto e declarativo para a preferência triestado de tema.
 * O select mantém comportamento nativo; o adaptador cuida apenas da conexão
 * com PharmDataTheme.
 */

.theme-preference-compact {
    display: inline-flex;
    min-block-size: var(--space-11);
    max-inline-size: 100%;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1);
    padding-inline-start: var(--space-3);
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    white-space: nowrap;
}

.theme-preference-compact__label {
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
}

.theme-preference-compact__select {
    box-sizing: border-box;
    min-block-size: calc(var(--space-11) - (2 * var(--space-1)));
    min-inline-size: 6.5rem;
    max-inline-size: 100%;
    padding-inline: var(--space-2);
    background: var(--surface-base);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
}

.theme-preference-compact__select:hover:not(:disabled) {
    border-color: var(--signal-primary);
}

.theme-preference-compact__select:focus-visible {
    outline: 3px solid var(--signal-primary);
    outline-offset: 2px;
}

.theme-preference-compact__select:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.theme-preference-compact--fixed {
    position: fixed;
    inset-block-start: var(--space-4);
    inset-inline-end: var(--space-4);
    z-index: var(--z-popover);
}

@media (forced-colors: active) {
    .theme-preference-compact,
    .theme-preference-compact__select {
        border-color: CanvasText;
    }
}

/**
 * STATISTICAL MAPPING SELECTOR (SMS) - PharmData Design System v2.0
 * Componente para selecao rapida de mapeamentos ordenados por frequencia.
 *
 * Inspirado no Pen&Pad Project: opcoes mais frequentes aparecem
 * como botoes inline, com "..." para alternativas adicionais.
 *
 * Caracteristicas:
 * - 4 opcoes inline antes do botao "..."
 * - Ordenacao estatistica implicita (sem mostrar %)
 * - Badge "Auto" + pre-selecao para mapeamentos automaticos
 */

:root {
    /* ===================
       SMS OPTION TOKENS
       =================== */

    /* Default state */
    --sms-option-bg: var(--cloud);
    --sms-option-border: rgba(183, 228, 213, 0.4);
    --sms-option-text: var(--graphite-depth);

    /* Hover state */
    --sms-option-hover-bg: rgba(183, 228, 213, 0.05);
    --sms-option-hover-border: var(--teal-intense);

    /* Selected state */
    --sms-option-selected-bg: var(--emerald-abyss);
    --sms-option-selected-text: var(--mint-signal);
    --sms-option-selected-border: var(--emerald-abyss);

    /* Disabled state */
    --sms-option-disabled-opacity: 0.5;

    /* ===================
       SMS AUTO-MAPPING TOKENS
       =================== */

    /* Auto badge */
    --sms-auto-badge-bg: rgba(42, 161, 152, 0.15);
    --sms-auto-badge-text: var(--teal-intense);
    --sms-auto-badge-icon: var(--teal-intense);

    /* Auto-selected option (different from manual selection) */
    --sms-auto-selected-bg: var(--emerald-abyss);
    --sms-auto-selected-border: 2px dashed var(--teal-intense);
    --sms-auto-selected-text: var(--mint-signal);

    /* ===================
       SMS MORE BUTTON TOKENS
       =================== */

    --sms-more-bg: rgba(183, 228, 213, 0.1);
    --sms-more-border: rgba(183, 228, 213, 0.3);
    --sms-more-text: var(--soft-steel);
    --sms-more-hover-bg: rgba(183, 228, 213, 0.2);
    --sms-more-count-text: var(--teal-intense);

    /* ===================
       SMS POPUP TOKENS
       =================== */

    --sms-popup-bg: var(--cloud);
    --sms-popup-border: rgba(183, 228, 213, 0.3);
    --sms-popup-shadow: 0 4px 20px rgba(11, 45, 42, 0.15);
    --sms-popup-radius: 0.75rem;
    --sms-popup-max-height: 16rem;

    /* Popup search */
    --sms-popup-search-bg: var(--arctic-mist);
    --sms-popup-search-border: rgba(183, 228, 213, 0.2);
    --sms-popup-search-text: var(--graphite-depth);
    --sms-popup-search-placeholder: var(--soft-steel);

    /* Popup options */
    --sms-popup-option-hover-bg: rgba(183, 228, 213, 0.1);
    --sms-popup-option-text: var(--graphite-depth);
    --sms-popup-option-selected-bg: rgba(11, 45, 42, 0.05);

    /* ===================
       SMS LABEL TOKENS
       =================== */

    --sms-label-text: var(--graphite-depth);
    --sms-label-icon: var(--teal-intense);
    --sms-label-size: 0.75rem;
    --sms-label-weight: 600;
    --sms-label-spacing: 0.05em;

    /* ===================
       SMS SIZING TOKENS
       =================== */

    /* Option sizing */
    --sms-option-padding-x: 1rem;
    --sms-option-padding-y: 0.5rem;
    --sms-option-min-width: 5rem;
    --sms-option-radius: 0.5rem;
    --sms-option-font-size: 0.875rem;
    --sms-option-font-weight: 500;
    --sms-option-gap: 0.5rem;

    /* More button sizing */
    --sms-more-padding-x: 0.75rem;
    --sms-more-padding-y: 0.5rem;
    --sms-more-min-width: 3rem;

    /* Auto badge sizing */
    --sms-auto-badge-padding-x: 0.5rem;
    --sms-auto-badge-padding-y: 0.125rem;
    --sms-auto-badge-font-size: 0.6875rem;
    --sms-auto-badge-radius: 9999px;

    /* ===================
       SMS SIZE VARIANTS
       =================== */

    /* Small variant */
    --sms-sm-option-padding-x: 0.75rem;
    --sms-sm-option-padding-y: 0.375rem;
    --sms-sm-option-min-width: 4rem;
    --sms-sm-option-font-size: 0.75rem;

    /* Large variant */
    --sms-lg-option-padding-x: 1.25rem;
    --sms-lg-option-padding-y: 0.625rem;
    --sms-lg-option-min-width: 6rem;
    --sms-lg-option-font-size: 1rem;

    /* ===================
       SMS ANIMATION TOKENS
       =================== */

    --sms-transition-duration: 0.15s;
    --sms-transition-timing: ease;
    --sms-popup-animation: sms-popup-in 0.2s ease-out;
}

/* Popup animation keyframes */
@keyframes sms-popup-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===================
   SMS COMPONENT STYLES
   =================== */

/* Container - Layout inline: Label | Opcoes na mesma linha */
.sms {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
    flex-wrap: wrap;
}

/* Label */
.sms-label {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1F2937;
    white-space: nowrap;
    flex-shrink: 0;
}

.sms-label i {
    color: var(--sms-label-icon);
    font-size: 0.875rem;
}

/* Auto badge */
.sms-auto-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: var(--sms-auto-badge-padding-y) var(--sms-auto-badge-padding-x);
    background: var(--sms-auto-badge-bg);
    color: var(--sms-auto-badge-text);
    font-size: var(--sms-auto-badge-font-size);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    border-radius: var(--sms-auto-badge-radius);
}

.sms-auto-badge i {
    font-size: 0.625rem;
    color: var(--sms-auto-badge-icon);
}

/* Options container */
.sms-options {
    display: inline-flex !important;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Individual option button */
.sms-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    min-width: 5rem;
    background: var(--cloud);
    border: 1px solid rgba(183, 228, 213, 0.4);
    border-radius: 0.5rem;
    color: #1F2937;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.sms-option:hover {
    background: rgba(183, 228, 213, 0.05);
    border-color: #2AA198;
}

.sms-option:focus-visible {
    outline: 2px solid var(--teal-intense);
    outline-offset: 2px;
}

/* Selected option */
.sms-option-selected {
    background: var(--emerald-abyss, #0B2D2A);
    border-color: var(--emerald-abyss, #0B2D2A);
    color: var(--mint-signal, #B7E4D5);
}

.sms-option-selected:hover {
    background: var(--emerald-abyss, #0B2D2A);
    border-color: var(--emerald-abyss, #0B2D2A);
}

/* Auto-selected option (dashed border indicates suggestion) */
.sms-option-auto {
    border: var(--sms-auto-selected-border);
    background: var(--sms-auto-selected-bg);
    color: var(--sms-auto-selected-text);
}

/* Disabled option */
.sms-option:disabled,
.sms-option-disabled {
    opacity: var(--sms-option-disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
}

/* More button (...) */
.sms-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    min-width: 3rem;
    background: rgba(183, 228, 213, 0.1);
    border: 1px solid rgba(183, 228, 213, 0.3);
    border-radius: 0.5rem;
    color: #374151;
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.sms-more:hover {
    background: rgba(183, 228, 213, 0.2);
    border-color: #2AA198;
}

.sms-more:focus-visible {
    outline: 2px solid var(--teal-intense);
    outline-offset: 2px;
}

.sms-more-count {
    font-size: 0.6875rem;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--sms-more-count-text);
}

/* ===================
   SMS POPUP STYLES
   =================== */

.sms-popup-container {
    position: relative;
}

.sms-popup {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 12rem;
    max-width: 20rem;
    background: var(--sms-popup-bg);
    border: 1px solid var(--sms-popup-border);
    border-radius: var(--sms-popup-radius);
    box-shadow: var(--sms-popup-shadow);
    z-index: var(--z-dropdown, 100);
    animation: var(--sms-popup-animation);
    overflow: hidden;
}

.sms-popup[hidden] {
    display: none;
}

/* Popup search */
.sms-popup-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--sms-popup-search-bg);
    border-bottom: 1px solid var(--sms-popup-search-border);
}

.sms-popup-search i {
    color: var(--sms-popup-search-placeholder);
    font-size: 0.875rem;
}

.sms-popup-search input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: var(--sms-popup-search-text);
    outline: none;
}

.sms-popup-search input::placeholder {
    color: var(--sms-popup-search-placeholder);
}

/* Popup options list */
.sms-popup-list {
    max-height: var(--sms-popup-max-height);
    overflow-y: auto;
    padding: 0.25rem;
}

.sms-popup-option {
    display: block;
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    color: var(--sms-popup-option-text);
    font-size: 0.875rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--sms-transition-duration) var(--sms-transition-timing);
}

.sms-popup-option:hover {
    background: var(--sms-popup-option-hover-bg);
}

.sms-popup-option:focus-visible {
    outline: 2px solid var(--teal-intense);
    outline-offset: -2px;
}

.sms-popup-option-selected {
    background: var(--sms-popup-option-selected-bg);
    font-weight: 500;
}

/* ===================
   SMS SIZE VARIANTS
   =================== */

/* Small */
.sms-sm .sms-option {
    padding: var(--sms-sm-option-padding-y) var(--sms-sm-option-padding-x);
    min-width: var(--sms-sm-option-min-width);
    font-size: var(--sms-sm-option-font-size);
}

.sms-sm .sms-more {
    padding: var(--sms-sm-option-padding-y) 0.5rem;
    min-width: 2.5rem;
    font-size: var(--sms-sm-option-font-size);
}

.sms-sm .sms-label {
    font-size: 0.6875rem;
}

/* Large */
.sms-lg .sms-option {
    padding: var(--sms-lg-option-padding-y) var(--sms-lg-option-padding-x);
    min-width: var(--sms-lg-option-min-width);
    font-size: var(--sms-lg-option-font-size);
}

.sms-lg .sms-more {
    padding: var(--sms-lg-option-padding-y) 1rem;
    min-width: 3.5rem;
    font-size: var(--sms-lg-option-font-size);
}

.sms-lg .sms-label {
    font-size: 0.875rem;
}

/* ===================
   SMS LAYOUT VARIANTS
   =================== */

/* Wrap (default behavior with flex-wrap) */
.sms-wrap .sms-options {
    flex-wrap: wrap;
}

/* No wrap */
.sms-nowrap .sms-options {
    flex-wrap: nowrap;
    overflow-x: auto;
}

/* Grid layout */
.sms-grid .sms-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sms-option-gap);
}

.sms-grid .sms-more {
    grid-column: span 1;
}

/* ===================
   SMS LOADING STATE
   =================== */

.sms-skeleton .sms-option {
    background: linear-gradient(90deg,
        rgba(183, 228, 213, 0.1) 0%,
        rgba(183, 228, 213, 0.2) 50%,
        rgba(183, 228, 213, 0.1) 100%
    );
    background-size: 200% 100%;
    animation: sms-skeleton-pulse 1.5s ease-in-out infinite;
    color: transparent;
    pointer-events: none;
}

@keyframes sms-skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===================
   SMS DARK MODE
   =================== */

:root.dark-mode,
[data-theme="dark"] {
    /* SMS Option tokens - dark */
    --sms-option-bg: var(--arctic-mist);
    --sms-option-border: rgba(183, 228, 213, 0.2);
    --sms-option-text: var(--graphite-depth);

    --sms-option-hover-bg: rgba(183, 228, 213, 0.08);
    --sms-option-hover-border: var(--teal-intense);

    --sms-option-selected-bg: var(--mint-signal);
    --sms-option-selected-text: #B7E4D5;
    --sms-option-selected-border: var(--mint-signal);

    /* Auto badge - dark */
    --sms-auto-badge-bg: rgba(61, 201, 189, 0.15);
    --sms-auto-badge-text: #3dc9bd;
    --sms-auto-badge-icon: #3dc9bd;

    --sms-auto-selected-bg: var(--mint-signal);
    --sms-auto-selected-border: 2px dashed #3dc9bd;
    --sms-auto-selected-text: #B7E4D5;

    /* More button - dark */
    --sms-more-bg: rgba(183, 228, 213, 0.08);
    --sms-more-border: rgba(183, 228, 213, 0.15);
    --sms-more-text: var(--soft-steel);
    --sms-more-hover-bg: rgba(183, 228, 213, 0.15);
    --sms-more-count-text: #3dc9bd;

    /* Popup - dark */
    --sms-popup-bg: var(--arctic-mist);
    --sms-popup-border: rgba(183, 228, 213, 0.15);
    --sms-popup-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

    --sms-popup-search-bg: var(--soft-arctic);
    --sms-popup-search-border: rgba(183, 228, 213, 0.1);
    --sms-popup-search-text: var(--graphite-depth);
    --sms-popup-search-placeholder: var(--soft-steel);

    --sms-popup-option-hover-bg: rgba(183, 228, 213, 0.1);
    --sms-popup-option-text: var(--graphite-depth);
    --sms-popup-option-selected-bg: rgba(26, 61, 58, 0.3);

    /* Label - dark */
    --sms-label-text: var(--graphite-depth);
    --sms-label-icon: #3dc9bd;
}

:root.dark-mode .sms-option,
[data-theme="dark"] .sms-option {
    background: var(--sms-option-bg);
    border-color: var(--sms-option-border);
    color: var(--sms-option-text);
}

:root.dark-mode .sms-option:hover,
[data-theme="dark"] .sms-option:hover {
    background: var(--sms-option-hover-bg);
    border-color: var(--sms-option-hover-border);
}

:root.dark-mode .sms-option-selected,
[data-theme="dark"] .sms-option-selected {
    background: var(--sms-option-selected-bg) !important;
    border-color: var(--sms-option-selected-border) !important;
    color: var(--sms-option-selected-text) !important;
}

:root.dark-mode .sms-label,
[data-theme="dark"] .sms-label {
    color: var(--sms-label-text);
}

:root.dark-mode .sms-more,
[data-theme="dark"] .sms-more {
    background: var(--sms-more-bg);
    border-color: var(--sms-more-border);
    color: var(--sms-more-text);
}

:root.dark-mode .sms-more:hover,
[data-theme="dark"] .sms-more:hover {
    background: var(--sms-more-hover-bg);
}

:root.dark-mode .sms-popup,
[data-theme="dark"] .sms-popup {
    background: var(--sms-popup-bg);
    border-color: var(--sms-popup-border);
    box-shadow: var(--sms-popup-shadow);
}

:root.dark-mode .sms-popup-search,
[data-theme="dark"] .sms-popup-search {
    background: var(--sms-popup-search-bg);
    border-color: var(--sms-popup-search-border);
}

:root.dark-mode .sms-popup-option,
[data-theme="dark"] .sms-popup-option {
    color: var(--sms-popup-option-text);
}

:root.dark-mode .sms-popup-option:hover,
[data-theme="dark"] .sms-popup-option:hover {
    background: var(--sms-popup-option-hover-bg);
}

:root.dark-mode .sms-popup-option-selected,
[data-theme="dark"] .sms-popup-option-selected {
    background: var(--sms-popup-option-selected-bg);
}

:root.dark-mode .sms-skeleton .sms-option,
[data-theme="dark"] .sms-skeleton .sms-option {
    background: linear-gradient(90deg,
        rgba(183, 228, 213, 0.05) 0%,
        rgba(183, 228, 213, 0.1) 50%,
        rgba(183, 228, 213, 0.05) 100%
    );
}

/**
 * MODALS & DIALOGS - PharmData Design System v2.0
 * Componentes de sobreposição com acessibilidade completa
 *
 * Inclui: Modal, Dialog de confirmação, Drawer/Sidebar, Lightbox
 * Todos com suporte a trap focus e navegação por teclado.
 */

/* ===================
   CSS CUSTOM PROPERTIES
   =================== */

:root {
    /* Overlay */
    --modal-overlay-bg: rgba(11, 45, 42, 0.6);
    --modal-overlay-blur: 4px;

    /* Modal container */
    --modal-bg: white;
    --modal-border-radius: 0.75rem;
    --modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Sizing */
    --modal-width-sm: 24rem;
    --modal-width-md: 32rem;
    --modal-width-lg: 48rem;
    --modal-width-xl: 64rem;
    --modal-width-full: calc(100vw - 2rem);
    --modal-max-height: calc(100vh - 4rem);

    /* Padding */
    --modal-padding: 1.5rem;
    --modal-header-padding: 1.25rem 1.5rem;
    --modal-footer-padding: 1rem 1.5rem;

    /* Animation */
    --modal-transition: all 0.2s ease-out;

    /* Z-index stack */
    --modal-z-overlay: 1000;
    --modal-z-content: 1001;
}

/* Dark mode */
:root.dark-mode {
    --modal-overlay-bg: rgba(0, 0, 0, 0.7);
    --modal-bg: var(--arctic-mist, #E9ECEF);
    --modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* ===================
   OVERLAY / BACKDROP
   =================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--modal-z-overlay);
    background: var(--modal-overlay-bg);
    backdrop-filter: blur(var(--modal-overlay-blur));
    -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
    opacity: 0;
    visibility: hidden;
    transition: var(--modal-transition);
}

.modal-overlay.active,
.modal-overlay[data-state="open"] {
    opacity: 1;
    visibility: visible;
}

/* ===================
   MODAL CONTAINER
   =================== */

.modal {
    position: fixed;
    inset: 0;
    z-index: var(--modal-z-content);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--modal-transition);
}

.modal.active,
.modal[data-state="open"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ===================
   MODAL CONTENT
   =================== */

.modal-content {
    position: relative;
    width: 100%;
    max-width: var(--modal-width-md);
    max-height: var(--modal-max-height);
    background: var(--modal-bg);
    border-radius: var(--modal-border-radius);
    box-shadow: var(--modal-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95) translateY(-10px);
    transition: var(--modal-transition);
}

.modal.active .modal-content,
.modal[data-state="open"] .modal-content {
    transform: scale(1) translateY(0);
}

/* Size variants */
.modal-sm .modal-content {
    max-width: var(--modal-width-sm);
}

.modal-lg .modal-content {
    max-width: var(--modal-width-lg);
}

.modal-xl .modal-content {
    max-width: var(--modal-width-xl);
}

.modal-full .modal-content {
    max-width: var(--modal-width-full);
    max-height: calc(100vh - 2rem);
    border-radius: 0.5rem;
}

/* ===================
   MODAL HEADER
   =================== */

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--modal-header-padding);
    border-bottom: 1px solid rgba(183, 228, 213, 0.2);
    flex-shrink: 0;
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--graphite-depth, #1F2937);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-title i,
.modal-title svg {
    color: var(--teal-intense, #1a8b7d);
    font-size: 1.25rem;
}

/* Close button */
.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: var(--soft-steel, #374151);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.modal-close:hover {
    background: rgba(183, 228, 213, 0.1);
    color: var(--graphite-depth, #1F2937);
}

.modal-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--teal-intense, #1a8b7d);
}

/* ===================
   MODAL BODY
   =================== */

.modal-body {
    flex: 1;
    padding: var(--modal-padding);
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--graphite-depth, #1F2937);
}

.modal-body p {
    margin: 0 0 1rem;
    line-height: 1.6;
}

.modal-body p:last-child {
    margin-bottom: 0;
}

/* ===================
   MODAL FOOTER
   =================== */

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: var(--modal-footer-padding);
    border-top: 1px solid rgba(183, 228, 213, 0.2);
    flex-shrink: 0;
    background: rgba(183, 228, 213, 0.03);
}

.modal-footer-start {
    justify-content: flex-start;
}

.modal-footer-between {
    justify-content: space-between;
}

.modal-footer-center {
    justify-content: center;
}

/* ===================
   DIALOG DE CONFIRMAÇÃO
   Modal simplificado para ações
   =================== */

.dialog {
    text-align: center;
}

.dialog .modal-content {
    max-width: 24rem;
}

.dialog .modal-body {
    padding: 2rem 1.5rem;
}

.dialog-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    margin-bottom: 1rem;
    font-size: 1.75rem;
}

.dialog-icon-info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info, #3B82F6);
}

.dialog-icon-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success, #10B981);
}

.dialog-icon-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning, #F59E0B);
}

.dialog-icon-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error, #EF4444);
}

.dialog-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--graphite-depth, #1F2937);
    margin: 0 0 0.5rem;
}

.dialog-message {
    color: var(--soft-steel, #374151);
    line-height: 1.5;
    margin: 0;
}

.dialog .modal-footer {
    justify-content: center;
    border-top: none;
    background: none;
    padding-top: 0;
}

/* ===================
   DRAWER / SIDEBAR
   Modal lateral
   =================== */

.drawer {
    padding: 0;
}

.drawer .modal-content {
    position: fixed;
    max-width: 20rem;
    max-height: 100vh;
    height: 100%;
    margin: 0;
    border-radius: 0;
}

/* Drawer Right (default) */
.drawer .modal-content,
.drawer-right .modal-content {
    right: 0;
    left: auto;
    transform: translateX(100%);
}

.drawer.active .modal-content,
.drawer-right.active .modal-content {
    transform: translateX(0);
}

/* Drawer Left */
.drawer-left .modal-content {
    left: 0;
    right: auto;
    transform: translateX(-100%);
}

.drawer-left.active .modal-content {
    transform: translateX(0);
}

/* Drawer sizes */
.drawer-sm .modal-content {
    max-width: 16rem;
}

.drawer-lg .modal-content {
    max-width: 28rem;
}

.drawer-xl .modal-content {
    max-width: 40rem;
}

/* ===================
   LIGHTBOX
   Para imagens/mídia
   =================== */

.lightbox {
    background: rgba(0, 0, 0, 0.9);
}

.lightbox .modal-content {
    background: transparent;
    box-shadow: none;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 0.5rem;
}

.lightbox-caption {
    text-align: center;
    color: white;
    padding: 1rem;
    font-size: 0.875rem;
}

.lightbox .modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.lightbox .modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Navigation arrows */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev {
    left: 1rem;
}

.lightbox-next {
    right: 1rem;
}

/* ===================
   MODAL STACKING
   Múltiplos modais
   =================== */

.modal[data-stack="1"] { z-index: 1011; }
.modal[data-stack="2"] { z-index: 1021; }
.modal[data-stack="3"] { z-index: 1031; }

.modal-overlay[data-stack="1"] { z-index: 1010; }
.modal-overlay[data-stack="2"] { z-index: 1020; }
.modal-overlay[data-stack="3"] { z-index: 1030; }

/* ===================
   BODY SCROLL LOCK
   =================== */

body.modal-open {
    overflow: hidden;
    padding-right: var(--scrollbar-width, 0);
}

/* ===================
   ACCESSIBILITY
   =================== */

/* Focus trap indicator */
.modal-content:focus {
    outline: none;
}

.modal-content:focus-visible {
    outline: 2px solid var(--teal-intense, #1a8b7d);
    outline-offset: 2px;
}

/* Screen reader only close button label */
.modal-close .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* High contrast */
@media (prefers-contrast: high) {
    .modal-content {
        border: 2px solid currentColor;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .modal,
    .modal-content,
    .modal-overlay {
        transition: none;
    }
}

/* ===================
   RESPONSIVE
   =================== */

@media (max-width: 640px) {
    .modal-content {
        max-width: 100%;
        max-height: calc(100vh - 2rem);
        margin: 1rem;
        border-radius: 0.75rem;
    }

    .modal-full .modal-content {
        margin: 0;
        max-height: 100vh;
        border-radius: 0;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .drawer .modal-content {
        max-width: 85vw;
    }

    .modal-footer {
        flex-direction: column;
    }

    .modal-footer > * {
        width: 100%;
    }
}

/**
 * ALERTS & TOASTS - PharmData Design System v2.0
 * Notificações e mensagens de feedback ao usuário
 *
 * Inclui: Inline alerts, Toast notifications, Banners
 * Com suporte a auto-dismiss e animações.
 */

/* ===================
   CSS CUSTOM PROPERTIES
   =================== */

:root {
    /* Alert base */
    --alert-padding: 1rem;
    --alert-border-radius: 0.5rem;
    --alert-border-width: 1px;
    --alert-icon-size: 1.25rem;
    --alert-gap: 0.75rem;

    /* Info */
    --alert-info-bg: rgba(59, 130, 246, 0.08);
    --alert-info-border: rgba(59, 130, 246, 0.3);
    --alert-info-text: #1E40AF;
    --alert-info-icon: var(--info, #3B82F6);

    /* Success */
    --alert-success-bg: rgba(16, 185, 129, 0.08);
    --alert-success-border: rgba(16, 185, 129, 0.3);
    --alert-success-text: #065F46;
    --alert-success-icon: var(--success, #10B981);

    /* Warning */
    --alert-warning-bg: rgba(180, 83, 9, 0.08);
    --alert-warning-border: rgba(180, 83, 9, 0.3);
    --alert-warning-text: #78350F;
    --alert-warning-icon: var(--warning-dark, #B45309);

    /* Error/Danger */
    --alert-error-bg: rgba(239, 68, 68, 0.08);
    --alert-error-border: rgba(239, 68, 68, 0.3);
    --alert-error-text: #991B1B;
    --alert-error-icon: var(--error, #EF4444);

    /* Toast specific */
    --toast-width: 24rem;
    --toast-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    --toast-z-index: 1100;

    /* Animation */
    --alert-transition: all 0.2s ease;
}

/* Dark mode */
:root.dark-mode {
    --alert-info-bg: rgba(59, 130, 246, 0.15);
    --alert-info-text: #93C5FD;

    --alert-success-bg: rgba(16, 185, 129, 0.15);
    --alert-success-text: #A7F3D0;

    --alert-warning-bg: rgba(180, 83, 9, 0.15);
    --alert-warning-text: #FDE68A;

    --alert-error-bg: rgba(239, 68, 68, 0.15);
    --alert-error-text: #FCA5A5;

    --toast-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* ===================
   INLINE ALERT BASE
   =================== */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--alert-gap);
    padding: var(--alert-padding);
    border-radius: var(--alert-border-radius);
    border: var(--alert-border-width) solid transparent;
    transition: var(--alert-transition);
}

.alert-icon {
    flex-shrink: 0;
    width: var(--alert-icon-size);
    height: var(--alert-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.125rem;
}

.alert-content {
    flex: 1;
    min-width: 0;
}

.alert-title {
    font-weight: 600;
    font-size: 0.9375rem;
    margin: 0 0 0.25rem;
    line-height: 1.4;
}

.alert-message {
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

.alert-message a {
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.alert-dismiss {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.15s ease;
    margin: -0.25rem -0.25rem -0.25rem 0;
}

.alert-dismiss:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
}

.alert-dismiss:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px currentColor;
}

/* ===================
   ALERT VARIANTS
   =================== */

/* Info */
.alert-info {
    background: var(--alert-info-bg);
    border-color: var(--alert-info-border);
    color: var(--alert-info-text);
}

.alert-info .alert-icon {
    color: var(--alert-info-icon);
}

.alert-info a {
    color: var(--alert-info-icon);
}

/* Success */
.alert-success {
    background: var(--alert-success-bg);
    border-color: var(--alert-success-border);
    color: var(--alert-success-text);
}

.alert-success .alert-icon {
    color: var(--alert-success-icon);
}

.alert-success a {
    color: var(--alert-success-icon);
}

/* Warning */
.alert-warning {
    background: var(--alert-warning-bg);
    border-color: var(--alert-warning-border);
    color: var(--alert-warning-text);
}

.alert-warning .alert-icon {
    color: var(--alert-warning-icon);
}

.alert-warning a {
    color: var(--alert-warning-icon);
}

/* Error/Danger */
.alert-error,
.alert-danger {
    background: var(--alert-error-bg);
    border-color: var(--alert-error-border);
    color: var(--alert-error-text);
}

.alert-error .alert-icon,
.alert-danger .alert-icon {
    color: var(--alert-error-icon);
}

.alert-error a,
.alert-danger a {
    color: var(--alert-error-icon);
}

/* ===================
   ALERT SIZES
   =================== */

.alert-sm {
    padding: 0.625rem 0.875rem;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.alert-sm .alert-icon {
    width: 1rem;
    height: 1rem;
}

.alert-sm .alert-title {
    font-size: 0.8125rem;
}

.alert-sm .alert-message {
    font-size: 0.75rem;
}

.alert-lg {
    padding: 1.25rem 1.5rem;
    gap: 1rem;
}

.alert-lg .alert-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.alert-lg .alert-title {
    font-size: 1.0625rem;
}

/* ===================
   ALERT WITH ACTIONS
   =================== */

.alert-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.alert-action {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.alert-action-primary {
    background: currentColor;
    color: white;
}

.alert-info .alert-action-primary {
    background: var(--alert-info-icon);
}

.alert-success .alert-action-primary {
    background: var(--alert-success-icon);
}

.alert-warning .alert-action-primary {
    background: var(--alert-warning-icon);
}

.alert-error .alert-action-primary {
    background: var(--alert-error-icon);
}

.alert-action-secondary {
    background: transparent;
    border: 1px solid currentColor;
}

/* ===================
   SOLID ALERTS
   Fundo sólido colorido
   =================== */

.alert-solid {
    border: none;
}

.alert-solid.alert-info {
    background: var(--info, #3B82F6);
    color: white;
}

.alert-solid.alert-success {
    background: var(--success, #10B981);
    color: white;
}

.alert-solid.alert-warning {
    background: var(--warning-dark, #B45309);
    color: white;
}

.alert-solid.alert-error {
    background: var(--error, #EF4444);
    color: white;
}

.alert-solid .alert-icon {
    color: rgba(255, 255, 255, 0.9);
}

.alert-solid a {
    color: white;
}

.alert-solid .alert-dismiss:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ===================
   BANNER
   Alert full-width
   =================== */

.banner {
    border-radius: 0;
    border-left: none;
    border-right: none;
    justify-content: center;
    text-align: center;
}

.banner .alert-content {
    flex: none;
    max-width: 48rem;
}

.banner-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--toast-z-index);
}

.banner-bottom {
    top: auto;
    bottom: 0;
}

/* ===================
   TOAST CONTAINER
   =================== */

.toast-container {
    position: fixed;
    z-index: var(--toast-z-index);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
    padding: 1rem;
}

/* Position variants */
.toast-container-top-right {
    top: 0;
    right: 0;
}

.toast-container-top-left {
    top: 0;
    left: 0;
}

.toast-container-top-center {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.toast-container-bottom-right {
    bottom: 0;
    right: 0;
}

.toast-container-bottom-left {
    bottom: 0;
    left: 0;
}

.toast-container-bottom-center {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* ===================
   TOAST
   =================== */

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--alert-gap);
    width: var(--toast-width);
    max-width: calc(100vw - 2rem);
    padding: 1rem 1.25rem;
    background: var(--modal-bg, white);
    border-radius: var(--alert-border-radius);
    box-shadow: var(--toast-shadow);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100%);
    transition: var(--alert-transition);
}

.toast.show,
.toast[data-state="visible"] {
    opacity: 1;
    transform: translateX(0);
}

.toast.hiding {
    opacity: 0;
    transform: translateX(100%);
}

/* Left positioned toasts */
.toast-container-top-left .toast,
.toast-container-bottom-left .toast {
    transform: translateX(-100%);
}

.toast-container-top-left .toast.show,
.toast-container-bottom-left .toast.show {
    transform: translateX(0);
}

.toast-container-top-left .toast.hiding,
.toast-container-bottom-left .toast.hiding {
    transform: translateX(-100%);
}

/* Center positioned toasts */
.toast-container-top-center .toast,
.toast-container-bottom-center .toast {
    transform: translateY(-20px);
}

.toast-container-top-center .toast.show,
.toast-container-bottom-center .toast.show {
    transform: translateY(0);
}

.toast-container-bottom-center .toast {
    transform: translateY(20px);
}

/* Toast icon */
.toast-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.toast-info .toast-icon {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info, #3B82F6);
}

.toast-success .toast-icon {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success, #10B981);
}

.toast-warning .toast-icon {
    background: rgba(180, 83, 9, 0.1);
    color: var(--warning-dark, #B45309);
}

.toast-error .toast-icon {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error, #EF4444);
}

/* Toast content */
.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--graphite-depth, #1F2937);
    margin: 0 0 0.125rem;
}

.toast-message {
    font-size: 0.8125rem;
    color: var(--soft-steel, #374151);
    margin: 0;
    line-height: 1.4;
}

/* Toast dismiss */
.toast-dismiss {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: transparent;
    color: var(--soft-steel, #374151);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
    margin: -0.25rem -0.375rem -0.25rem 0;
}

.toast-dismiss:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--graphite-depth, #1F2937);
}

/* Toast progress bar */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--teal-intense, #1a8b7d);
    border-radius: 0 0 var(--alert-border-radius) var(--alert-border-radius);
    animation: toast-progress linear forwards;
}

.toast-info .toast-progress {
    background: var(--info, #3B82F6);
}

.toast-success .toast-progress {
    background: var(--success, #10B981);
}

.toast-warning .toast-progress {
    background: var(--warning-dark, #B45309);
}

.toast-error .toast-progress {
    background: var(--error, #EF4444);
}

@keyframes toast-progress {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* ===================
   TOAST WITH BORDER
   =================== */

.toast-bordered {
    border-left: 4px solid var(--teal-intense, #1a8b7d);
}

.toast-bordered.toast-info {
    border-left-color: var(--info, #3B82F6);
}

.toast-bordered.toast-success {
    border-left-color: var(--success, #10B981);
}

.toast-bordered.toast-warning {
    border-left-color: var(--warning-dark, #B45309);
}

.toast-bordered.toast-error {
    border-left-color: var(--error, #EF4444);
}

/* ===================
   TOAST ACTIONS
   =================== */

.toast-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.625rem;
}

.toast-action {
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.25rem 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.toast-action:hover {
    opacity: 0.7;
}

.toast-action-primary {
    color: var(--teal-intense, #1a8b7d);
}

.toast-action-secondary {
    color: var(--soft-steel, #374151);
}

/* ===================
   ACCESSIBILITY
   =================== */

/* Screen reader announcements */
.alert[role="alert"],
.toast[role="alert"] {
    /* Automatically announced by screen readers */
}

/* Focus management */
.alert:focus-visible,
.toast:focus-visible {
    outline: 2px solid var(--teal-intense, #1a8b7d);
    outline-offset: 2px;
}

/* High contrast */
@media (prefers-contrast: high) {
    .alert,
    .toast {
        border-width: 2px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .alert,
    .toast,
    .toast-progress {
        transition: none;
        animation: none;
    }

    .toast.show {
        transform: none;
    }
}

/* ===================
   VARIANTES CLÍNICAS
   Vinculam a escala --sev-* (severity.css) à estrutura .alert, para
   alerta de interação/contraindicação na Biblioteca PRISMA.
   Mapeamento do enum prescricao.alertas_criticos.severidade:
     fatal → critical · grave → attention · moderado → watch
   REGRA DE ACESSIBILIDADE (herdada de severity.css): cor nunca é o único
   sinal — cada variante deve sempre acompanhar ícone + título textual.
   Uso: <div class="alert alert--fatal" role="alert">
            <span class="alert-icon">…</span>
            <div class="alert-content"><p class="alert-title">…</p>…</div>
        </div>
   =================== */

.alert--fatal {
    background: var(--sev-critical-bg);
    border-color: var(--sev-critical-border);
    color: var(--sev-critical-text);
}

.alert--fatal .alert-icon {
    color: var(--sev-critical-border);
}

.alert--grave {
    background: var(--sev-attention-bg);
    border-color: var(--sev-attention-border);
    color: var(--sev-attention-text);
}

.alert--grave .alert-icon {
    color: var(--sev-attention-border);
}

.alert--moderado {
    background: var(--sev-watch-bg);
    border-color: var(--sev-watch-border);
    color: var(--sev-watch-text);
}

.alert--moderado .alert-icon {
    color: var(--sev-watch-border);
}

/* ===================
   RESPONSIVE
   =================== */

@media (max-width: 640px) {
    .toast-container {
        left: 0;
        right: 0;
        padding: 0.75rem;
    }

    .toast-container-top-right,
    .toast-container-top-left,
    .toast-container-top-center {
        transform: none;
    }

    .toast-container-bottom-right,
    .toast-container-bottom-left,
    .toast-container-bottom-center {
        transform: none;
    }

    .toast {
        width: 100%;
        max-width: none;
    }

    .alert-actions {
        flex-direction: column;
    }
}

/**
 * TABS - PharmData Design System v2.0
 * Navegação por abas com múltiplos estilos
 *
 * Inclui: Tabs básicas, Pills, Underline, Bordered, Vertical
 * Com suporte a ícones, badges e estados.
 */

/* ===================
   CSS CUSTOM PROPERTIES
   =================== */

:root {
    /* Tab sizing */
    --tab-height: 2.75rem;
    --tab-padding: 0.75rem 1.25rem;
    --tab-gap: 0.25rem;

    /* Colors */
    --tab-bg: transparent;
    --tab-bg-hover: rgba(183, 228, 213, 0.08);
    --tab-bg-active: rgba(42, 161, 152, 0.1);
    --tab-text: var(--soft-steel, #374151);
    --tab-text-hover: var(--graphite-depth, #1F2937);
    --tab-text-active: var(--teal-intense, #1a8b7d);

    /* Border */
    --tab-border-color: rgba(183, 228, 213, 0.3);
    --tab-border-active: var(--teal-intense, #1a8b7d);
    --tab-border-width: 2px;

    /* Animation */
    --tab-transition: all 0.15s ease;
}

/* Dark mode */
:root.dark-mode {
    --tab-bg-hover: rgba(183, 228, 213, 0.1);
    --tab-bg-active: rgba(42, 161, 152, 0.15);
    --tab-border-color: rgba(183, 228, 213, 0.2);
}

/* ===================
   TAB LIST CONTAINER
   =================== */

.tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tab-list {
    display: flex;
    gap: var(--tab-gap);
    border-bottom: 1px solid var(--tab-border-color);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tab-list[role="tablist"] {
    /* Semantic list for accessibility */
}

/* ===================
   TAB BUTTON BASE
   =================== */

.tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--tab-padding);
    min-height: var(--tab-height);
    background: var(--tab-bg);
    color: var(--tab-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    border-bottom: var(--tab-border-width) solid transparent;
    margin-bottom: calc(-1px);
    cursor: pointer;
    transition: var(--tab-transition);
    white-space: nowrap;
    position: relative;
}

.tab:hover {
    background: var(--tab-bg-hover);
    color: var(--tab-text-hover);
}

.tab:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--teal-intense, #1a8b7d);
    border-radius: 0.25rem 0.25rem 0 0;
}

/* Active state */
.tab.active,
.tab[aria-selected="true"] {
    color: var(--tab-text-active);
    border-bottom-color: var(--tab-border-active);
    background: var(--tab-bg-active);
}

/* Disabled */
.tab:disabled,
.tab[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===================
   TAB WITH ICON
   =================== */

.tab-icon {
    font-size: 1rem;
    opacity: 0.7;
}

.tab.active .tab-icon,
.tab[aria-selected="true"] .tab-icon {
    opacity: 1;
}

/* Icon only tab */
.tab-icon-only {
    padding: 0.75rem;
    min-width: var(--tab-height);
}

.tab-icon-only .tab-icon {
    margin: 0;
}

/* ===================
   TAB WITH BADGE
   =================== */

.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    background: rgba(100, 116, 139, 0.15);
    color: var(--soft-steel, #374151);
    border-radius: 10rem;
}

.tab.active .tab-badge,
.tab[aria-selected="true"] .tab-badge {
    background: rgba(42, 161, 152, 0.15);
    color: var(--teal-intense, #1a8b7d);
}

/* ===================
   TAB PANEL
   =================== */

.tab-panel {
    padding: 1.5rem 0;
    display: none;
}

.tab-panel.active,
.tab-panel[data-state="active"] {
    display: block;
}

/* With animation */
.tab-panel-animated {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.tab-panel-animated.active {
    opacity: 1;
    transform: translateY(0);
}

/* ===================
   TABS VARIANTS
   =================== */

/* --- Pills --- */
.tabs-pills .tab-list {
    border-bottom: none;
    gap: 0.5rem;
}

.tabs-pills .tab {
    border: none;
    border-radius: 0.5rem;
    margin-bottom: 0;
    background: transparent;
}

.tabs-pills .tab:hover {
    background: var(--tab-bg-hover);
}

.tabs-pills .tab.active,
.tabs-pills .tab[aria-selected="true"] {
    background: var(--teal-intense, #1a8b7d);
    color: white;
}

.tabs-pills .tab.active .tab-badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* --- Underline Only --- */
.tabs-underline .tab-list {
    gap: 0;
}

.tabs-underline .tab {
    background: transparent;
    padding: 0.75rem 1.5rem;
}

.tabs-underline .tab:hover {
    background: transparent;
    color: var(--tab-text-hover);
}

.tabs-underline .tab.active {
    background: transparent;
}

/* Animated underline */
.tabs-underline-animated .tab-list {
    position: relative;
}

.tabs-underline-animated .tab-indicator {
    position: absolute;
    bottom: -1px;
    height: var(--tab-border-width);
    background: var(--tab-border-active);
    transition: left 0.2s ease, width 0.2s ease;
}

.tabs-underline-animated .tab {
    border-bottom-color: transparent;
}

/* --- Bordered/Boxed --- */
.tabs-bordered .tab-list {
    border: 1px solid var(--tab-border-color);
    border-radius: 0.5rem;
    padding: 0.25rem;
    background: rgba(183, 228, 213, 0.05);
    gap: 0.25rem;
}

.tabs-bordered .tab {
    border: none;
    border-radius: 0.375rem;
    margin-bottom: 0;
}

.tabs-bordered .tab.active,
.tabs-bordered .tab[aria-selected="true"] {
    background: var(--cloud);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

:root.dark-mode .tabs-bordered .tab.active {
    background: var(--arctic-mist, #E9ECEF);
}

/* --- Soft --- */
.tabs-soft .tab-list {
    border-bottom: none;
    gap: 0.5rem;
}

.tabs-soft .tab {
    border: none;
    border-radius: 0.5rem;
    margin-bottom: 0;
    background: rgba(100, 116, 139, 0.08);
}

.tabs-soft .tab:hover {
    background: rgba(100, 116, 139, 0.15);
}

.tabs-soft .tab.active {
    background: var(--tab-bg-active);
    color: var(--tab-text-active);
}

/* ===================
   TAB SIZES
   =================== */

.tabs-sm .tab {
    padding: 0.5rem 0.875rem;
    min-height: 2.25rem;
    font-size: 0.8125rem;
}

.tabs-sm .tab-icon {
    font-size: 0.875rem;
}

.tabs-sm .tab-badge {
    min-width: 1rem;
    height: 1rem;
    font-size: 0.625rem;
}

.tabs-lg .tab {
    padding: 1rem 1.5rem;
    min-height: 3.25rem;
    font-size: 0.9375rem;
}

.tabs-lg .tab-icon {
    font-size: 1.125rem;
}

/* ===================
   VERTICAL TABS
   =================== */

.tabs-vertical {
    flex-direction: row;
    gap: 1.5rem;
}

.tabs-vertical .tab-list {
    flex-direction: column;
    border-bottom: none;
    border-right: 1px solid var(--tab-border-color);
    padding-right: 0;
    min-width: 12rem;
}

.tabs-vertical .tab {
    justify-content: flex-start;
    border-bottom: none;
    border-right: var(--tab-border-width) solid transparent;
    margin-bottom: 0;
    margin-right: calc(-1px);
    text-align: left;
}

.tabs-vertical .tab.active,
.tabs-vertical .tab[aria-selected="true"] {
    border-right-color: var(--tab-border-active);
}

.tabs-vertical .tab-panel {
    flex: 1;
    padding: 0;
}

/* Vertical pills */
.tabs-vertical.tabs-pills .tab-list {
    border-right: none;
}

.tabs-vertical.tabs-pills .tab {
    border-right: none;
    margin-right: 0;
}

/* ===================
   FULL WIDTH TABS
   =================== */

.tabs-full .tab-list {
    width: 100%;
}

.tabs-full .tab {
    flex: 1;
}

/* ===================
   SCROLLABLE TABS
   =================== */

.tabs-scrollable .tab-list {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    padding-bottom: 1px; /* Prevent border cut */
}

.tabs-scrollable .tab-list::-webkit-scrollbar {
    display: none;
}

/* Scroll indicators */
.tabs-scrollable-container {
    position: relative;
}

.tabs-scroll-btn {
    position: absolute;
    top: 0;
    bottom: 1px;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, var(--cloud, white), transparent);
    border: none;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.tabs-scroll-btn-left {
    left: 0;
}

.tabs-scroll-btn-right {
    right: 0;
    background: linear-gradient(to left, var(--cloud, white), transparent);
}

.tabs-scrollable-container.can-scroll-left .tabs-scroll-btn-left,
.tabs-scrollable-container.can-scroll-right .tabs-scroll-btn-right {
    opacity: 1;
    pointer-events: auto;
}

/* ===================
   TAB CLOSE BUTTON
   =================== */

.tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.25rem;
    margin-right: -0.25rem;
    border-radius: 0.25rem;
    border: none;
    background: transparent;
    color: currentColor;
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tab-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
}

.tab.active .tab-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error, #EF4444);
}

/* ===================
   CARD TABS
   Tabs com conteúdo em card
   =================== */

.tabs-card {
    border: 1px solid var(--tab-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
}

.tabs-card .tab-list {
    background: rgba(183, 228, 213, 0.05);
    border-bottom: 1px solid var(--tab-border-color);
    padding: 0 0.5rem;
}

.tabs-card .tab {
    border-radius: 0;
}

.tabs-card .tab-panel {
    padding: 1.5rem;
    background: var(--modal-bg, white);
}

/* ===================
   ACCESSIBILITY
   =================== */

/* Keyboard navigation indicator */
.tab:focus:not(:focus-visible) {
    box-shadow: none;
}

/* Screen reader */
.tab[aria-selected="true"] {
    /* Announced as selected */
}

/* High contrast */
@media (prefers-contrast: high) {
    .tab {
        border: 1px solid transparent;
    }

    .tab.active,
    .tab[aria-selected="true"] {
        border-color: currentColor;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tab,
    .tab-panel-animated,
    .tabs-underline-animated .tab-indicator {
        transition: none;
    }
}

/* ===================
   RESPONSIVE
   =================== */

@media (max-width: 640px) {
    /* Vertical becomes horizontal on mobile */
    .tabs-vertical {
        flex-direction: column;
        gap: 0;
    }

    .tabs-vertical .tab-list {
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid var(--tab-border-color);
        min-width: 0;
        overflow-x: auto;
        padding-right: 0;
    }

    .tabs-vertical .tab {
        border-right: none;
        border-bottom: var(--tab-border-width) solid transparent;
        margin-right: 0;
        margin-bottom: calc(-1px);
    }

    .tabs-vertical .tab.active {
        border-bottom-color: var(--tab-border-active);
        border-right-color: transparent;
    }

    /* Default to scrollable on mobile */
    .tab-list {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .tab-list::-webkit-scrollbar {
        display: none;
    }

    .tab {
        flex-shrink: 0;
    }
}

/**
 * BREADCRUMBS - PharmData Design System v2.0
 * Navegação hierárquica com trilhas de localização
 *
 * Inclui: Breadcrumb básico, com ícones, colapsável, responsivo
 */

/* ===================
   CSS CUSTOM PROPERTIES
   =================== */

:root {
    /* Sizing */
    --breadcrumb-height: 2.5rem;
    --breadcrumb-gap: 0.5rem;
    --breadcrumb-padding: 0.5rem 0;

    /* Colors */
    --breadcrumb-text: var(--soft-steel, #374151);
    --breadcrumb-text-hover: var(--graphite-depth, #1F2937);
    --breadcrumb-text-current: var(--graphite-depth, #1F2937);
    --breadcrumb-separator: var(--soft-steel, #374151);

    /* Transition */
    --breadcrumb-transition: all 0.15s ease;
}

/* Dark mode */
:root.dark-mode {
    --breadcrumb-separator: rgba(148, 163, 184, 0.5);
}

/* ===================
   BREADCRUMB CONTAINER
   =================== */

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--breadcrumb-gap);
    padding: var(--breadcrumb-padding);
    margin: 0;
    list-style: none;
    font-size: 0.875rem;
    min-height: var(--breadcrumb-height);
}

/* Semantic nav wrapper */
nav.breadcrumb-nav {
    /* Use aria-label="Breadcrumb" */
}

/* ===================
   BREADCRUMB ITEM
   =================== */

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: var(--breadcrumb-gap);
}

/* Separator */
.breadcrumb-item:not(:last-child)::after {
    content: '/';
    color: var(--breadcrumb-separator);
    font-size: 0.8125rem;
    margin-left: var(--breadcrumb-gap);
}

/* Link */
.breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--breadcrumb-text);
    text-decoration: none;
    transition: var(--breadcrumb-transition);
    padding: 0.25rem 0;
    border-radius: 0.25rem;
}

.breadcrumb-link:hover {
    color: var(--breadcrumb-text-hover);
}

.breadcrumb-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--teal-intense, #1a8b7d);
}

/* Current/Active item */
.breadcrumb-item.active,
.breadcrumb-item[aria-current="page"] {
    color: var(--breadcrumb-text-current);
    font-weight: 500;
}

.breadcrumb-item.active::after,
.breadcrumb-item[aria-current="page"]::after {
    display: none;
}

/* Icon */
.breadcrumb-icon {
    font-size: 0.875rem;
    opacity: 0.7;
}

.breadcrumb-link:hover .breadcrumb-icon {
    opacity: 1;
}

/* ===================
   SEPARATOR VARIANTS
   =================== */

/* Chevron */
.breadcrumb-chevron .breadcrumb-item:not(:last-child)::after {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.5px solid var(--breadcrumb-separator);
    border-top: 1.5px solid var(--breadcrumb-separator);
    transform: rotate(45deg);
    margin-left: var(--breadcrumb-gap);
}

/* Arrow */
.breadcrumb-arrow .breadcrumb-item:not(:last-child)::after {
    content: '→';
}

/* Dot */
.breadcrumb-dot .breadcrumb-item:not(:last-child)::after {
    content: '•';
    font-size: 0.625rem;
}

/* Pipe */
.breadcrumb-pipe .breadcrumb-item:not(:last-child)::after {
    content: '|';
}

/* Custom separator via CSS variable */
.breadcrumb[data-separator]::after {
    content: attr(data-separator);
}

/* ===================
   BREADCRUMB SIZES
   =================== */

.breadcrumb-sm {
    font-size: 0.75rem;
    gap: 0.375rem;
    min-height: 2rem;
}

.breadcrumb-sm .breadcrumb-item:not(:last-child)::after {
    margin-left: 0.375rem;
    font-size: 0.6875rem;
}

.breadcrumb-sm .breadcrumb-icon {
    font-size: 0.75rem;
}

.breadcrumb-lg {
    font-size: 1rem;
    gap: 0.625rem;
    min-height: 3rem;
}

.breadcrumb-lg .breadcrumb-item:not(:last-child)::after {
    margin-left: 0.625rem;
}

.breadcrumb-lg .breadcrumb-icon {
    font-size: 1rem;
}

/* ===================
   BREADCRUMB WITH BACKGROUND
   =================== */

.breadcrumb-bg {
    background: rgba(183, 228, 213, 0.08);
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
}

.breadcrumb-bordered {
    border: 1px solid rgba(183, 228, 213, 0.2);
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
}

/* ===================
   BREADCRUMB COLAPSÁVEL
   Para paths muito longos
   =================== */

.breadcrumb-collapsible {
    /* Container */
}

.breadcrumb-collapsed {
    display: none;
}

.breadcrumb-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: rgba(183, 228, 213, 0.1);
    border-radius: 0.375rem;
    color: var(--breadcrumb-text);
    cursor: pointer;
    transition: var(--breadcrumb-transition);
    border: none;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
}

.breadcrumb-ellipsis:hover {
    background: rgba(183, 228, 213, 0.2);
    color: var(--breadcrumb-text-hover);
}

.breadcrumb-ellipsis:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--teal-intense, #1a8b7d);
}

/* Dropdown menu for collapsed items */
.breadcrumb-dropdown {
    position: relative;
}

.breadcrumb-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    min-width: 12rem;
    background: var(--cloud);
    border: 1px solid rgba(183, 228, 213, 0.2);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 0.5rem;
    margin-top: 0.25rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: var(--breadcrumb-transition);
}

.breadcrumb-dropdown.open .breadcrumb-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.breadcrumb-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    color: var(--graphite-depth, #1F2937);
    text-decoration: none;
    border-radius: 0.375rem;
    transition: background 0.15s ease;
}

.breadcrumb-dropdown-item:hover {
    background: rgba(183, 228, 213, 0.1);
}

:root.dark-mode .breadcrumb-dropdown-menu {
    background: var(--arctic-mist, #E9ECEF);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ===================
   HOME ICON BREADCRUMB
   =================== */

.breadcrumb-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--breadcrumb-text);
    transition: var(--breadcrumb-transition);
    border-radius: 0.25rem;
}

.breadcrumb-home:hover {
    color: var(--teal-intense, #1a8b7d);
    background: rgba(42, 161, 152, 0.08);
}

/* ===================
   BREADCRUMB STRUCTURED DATA
   Para SEO (schema.org)
   =================== */

/* Use com itemscope itemtype="https://schema.org/BreadcrumbList" */
.breadcrumb[itemscope] {
    /* Container com structured data */
}

.breadcrumb-item[itemscope] {
    /* Item com structured data */
}

/* ===================
   ACCESSIBILITY
   =================== */

/* Screen reader */
.breadcrumb-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Current page indicator */
.breadcrumb-item[aria-current="page"] {
    /* Announced as current page */
}

/* High contrast */
@media (prefers-contrast: high) {
    .breadcrumb-link:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
        box-shadow: none;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .breadcrumb-link,
    .breadcrumb-dropdown-menu {
        transition: none;
    }
}

/* ===================
   RESPONSIVE
   =================== */

@media (max-width: 640px) {
    .breadcrumb {
        font-size: 0.8125rem;
    }

    /* Auto-collapse on mobile */
    .breadcrumb-responsive .breadcrumb-item:not(:first-child):not(:last-child):not(.breadcrumb-ellipsis-item) {
        display: none;
    }

    .breadcrumb-responsive .breadcrumb-ellipsis-item {
        display: inline-flex;
    }

    /* Show only last 2 items */
    .breadcrumb-mobile-compact .breadcrumb-item {
        display: none;
    }

    .breadcrumb-mobile-compact .breadcrumb-item:first-child,
    .breadcrumb-mobile-compact .breadcrumb-item:last-child {
        display: inline-flex;
    }

    .breadcrumb-mobile-compact .breadcrumb-item:first-child::after {
        content: '...';
        margin-left: var(--breadcrumb-gap);
        margin-right: var(--breadcrumb-gap);
    }
}

/* ===================
   PAGE HEADER INTEGRATION
   =================== */

.page-header .breadcrumb {
    padding: 0;
    margin-bottom: 0.5rem;
}

/* Breadcrumb with title below */
.breadcrumb-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.breadcrumb-header .page-title {
    margin: 0;
}

/* ===================
   PHARMACEUTICAL HIERARCHY BREADCRUMB
   Estrutura: Composições > Formulações > Embalagens > Apresentações
   =================== */

.breadcrumb-pharma {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0.875rem;
    background: var(--arctic-mist);
    border-radius: 0.5rem;
    overflow: hidden;
}

.breadcrumb-pharma-item {
    display: flex;
    align-items: center;
    position: relative;
}

/* Arrow connector between items */
.breadcrumb-pharma-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 1.25rem solid transparent;
    border-bottom: 1.25rem solid transparent;
    border-left: 0.75rem solid var(--arctic-mist);
    z-index: 2;
}

.breadcrumb-pharma-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem 0.625rem 1.5rem;
    color: var(--soft-steel);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.15s ease;
    background: var(--arctic-mist);
    min-height: 2.5rem;
}

.breadcrumb-pharma-item:first-child .breadcrumb-pharma-link {
    padding-left: 1rem;
    border-radius: 0.5rem 0 0 0.5rem;
}

.breadcrumb-pharma-link:hover {
    color: var(--graphite-depth);
    background: var(--soft-arctic);
}

.breadcrumb-pharma-link:hover + .breadcrumb-pharma-item::after,
.breadcrumb-pharma-item:hover::after {
    border-left-color: var(--soft-arctic);
}

/* Active/Current item */
.breadcrumb-pharma-item.active .breadcrumb-pharma-link,
.breadcrumb-pharma-item[aria-current="page"] .breadcrumb-pharma-link {
    color: var(--cloud);
    background: var(--teal-intense);
    font-weight: 600;
}

.breadcrumb-pharma-item.active::after,
.breadcrumb-pharma-item[aria-current="page"]::after {
    border-left-color: var(--teal-intense);
}

/* Icons for each level (Font Awesome) */
.breadcrumb-pharma-icon {
    font-size: 0.875rem;
    opacity: 0.8;
}

.breadcrumb-pharma-item.active .breadcrumb-pharma-icon {
    opacity: 1;
}

/* Level-specific colors */
.breadcrumb-pharma-item[data-level="composicoes"] .breadcrumb-pharma-link {
    background: var(--drop-sub-bg);
    color: var(--drop-sub-text);
}
.breadcrumb-pharma-item[data-level="composicoes"]::after {
    border-left-color: var(--drop-sub-bg);
}

.breadcrumb-pharma-item[data-level="formulacoes"] .breadcrumb-pharma-link {
    background: var(--drop-fofa-bg);
    color: var(--drop-fofa-text);
}
.breadcrumb-pharma-item[data-level="formulacoes"]::after {
    border-left-color: var(--drop-fofa-bg);
}

.breadcrumb-pharma-item[data-level="embalagens"] .breadcrumb-pharma-link {
    background: var(--drop-emb-bg);
    color: var(--drop-emb-text);
}
.breadcrumb-pharma-item[data-level="embalagens"]::after {
    border-left-color: var(--drop-emb-bg);
}

.breadcrumb-pharma-item[data-level="apresentacoes"] .breadcrumb-pharma-link {
    background: var(--drop-dec-bg);
    color: var(--drop-dec-text);
}
.breadcrumb-pharma-item[data-level="apresentacoes"]::after {
    border-left-color: var(--drop-dec-bg);
}

/* Count badge */
.breadcrumb-pharma-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 9999px;
    margin-left: 0.25rem;
}

.breadcrumb-pharma-item.active .breadcrumb-pharma-count {
    background: rgba(255, 255, 255, 0.25);
}

/* ===================
   COMPACT PHARMA BREADCRUMB
   =================== */

.breadcrumb-pharma-compact {
    font-size: 0.75rem;
}

.breadcrumb-pharma-compact .breadcrumb-pharma-link {
    padding: 0.375rem 0.75rem 0.375rem 1rem;
    min-height: 2rem;
}

.breadcrumb-pharma-compact .breadcrumb-pharma-item:first-child .breadcrumb-pharma-link {
    padding-left: 0.75rem;
}

.breadcrumb-pharma-compact .breadcrumb-pharma-item:not(:last-child)::after {
    border-top-width: 1rem;
    border-bottom-width: 1rem;
    border-left-width: 0.5rem;
    right: -0.5rem;
}

/* ===================
   VERTICAL PHARMA BREADCRUMB
   Para painéis laterais
   =================== */

.breadcrumb-pharma-vertical {
    flex-direction: column;
    align-items: stretch;
    background: transparent;
    gap: 0.25rem;
}

.breadcrumb-pharma-vertical .breadcrumb-pharma-item {
    position: relative;
}

.breadcrumb-pharma-vertical .breadcrumb-pharma-item:not(:last-child)::after {
    display: none;
}

.breadcrumb-pharma-vertical .breadcrumb-pharma-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 1.25rem;
    top: 100%;
    width: 2px;
    height: 0.25rem;
    background: var(--soft-arctic);
}

.breadcrumb-pharma-vertical .breadcrumb-pharma-link {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
}

.breadcrumb-pharma-vertical .breadcrumb-pharma-item:first-child .breadcrumb-pharma-link {
    border-radius: 0.375rem;
}

/* ===================
   DARK MODE
   =================== */

:root.dark-mode .breadcrumb-pharma,
[data-theme="dark"] .breadcrumb-pharma {
    background: var(--soft-arctic);
}

:root.dark-mode .breadcrumb-pharma-link,
[data-theme="dark"] .breadcrumb-pharma-link {
    background: var(--soft-arctic);
}

:root.dark-mode .breadcrumb-pharma-item:not(:last-child)::after,
[data-theme="dark"] .breadcrumb-pharma-item:not(:last-child)::after {
    border-left-color: var(--soft-arctic);
}

:root.dark-mode .breadcrumb-pharma-link:hover,
[data-theme="dark"] .breadcrumb-pharma-link:hover {
    background: rgba(183, 228, 213, 0.1);
}

:root.dark-mode .breadcrumb-pharma-count,
[data-theme="dark"] .breadcrumb-pharma-count {
    background: rgba(255, 255, 255, 0.1);
}

/* ===================
   RESPONSIVE
   =================== */

@media (max-width: 768px) {
    .breadcrumb-pharma {
        font-size: 0.75rem;
    }

    .breadcrumb-pharma-link {
        padding: 0.5rem 0.75rem 0.5rem 1rem;
    }

    .breadcrumb-pharma-item:first-child .breadcrumb-pharma-link {
        padding-left: 0.75rem;
    }

    /* Hide text, show only icons on mobile */
    .breadcrumb-pharma-mobile-icons .breadcrumb-pharma-text {
        display: none;
    }

    .breadcrumb-pharma-mobile-icons .breadcrumb-pharma-icon {
        margin-right: 0;
    }
}

/**
 * ACCORDION - PharmData Design System v2.0
 * Painéis expansíveis/colapsáveis
 *
 * Inclui: Accordion básico, bordered, flush, nested
 * Com suporte a múltiplos abertos e animações.
 */

/* ===================
   CSS CUSTOM PROPERTIES
   =================== */

:root {
    /* Spacing */
    --accordion-padding: 1rem 1.25rem;
    --accordion-body-padding: 0 1.25rem 1.25rem;
    --accordion-gap: 0;
    --accordion-border-radius: 0.5rem;

    /* Colors */
    --accordion-bg: white;
    --accordion-bg-hover: rgba(183, 228, 213, 0.05);
    --accordion-bg-active: rgba(183, 228, 213, 0.08);
    --accordion-border: rgba(183, 228, 213, 0.2);
    --accordion-text: var(--graphite-depth, #1F2937);
    --accordion-text-muted: var(--soft-steel, #374151);
    --accordion-icon: var(--teal-intense, #1a8b7d);

    /* Transition */
    --accordion-transition: all 0.2s ease;
}

/* Dark mode */
:root.dark-mode {
    --accordion-bg: var(--arctic-mist, #E9ECEF);
    --accordion-bg-hover: rgba(183, 228, 213, 0.08);
    --accordion-bg-active: rgba(183, 228, 213, 0.12);
    --accordion-border: rgba(183, 228, 213, 0.15);
}

/* ===================
   ACCORDION CONTAINER
   =================== */

.accordion {
    display: flex;
    flex-direction: column;
    gap: var(--accordion-gap);
    border: 1px solid var(--accordion-border);
    border-radius: var(--accordion-border-radius);
    overflow: hidden;
}

/* ===================
   ACCORDION ITEM
   =================== */

.accordion-item {
    background: var(--accordion-bg);
    border-bottom: 1px solid var(--accordion-border);
}

.accordion-item:last-child {
    border-bottom: none;
}

/* ===================
   ACCORDION HEADER/TRIGGER
   =================== */

.accordion-header {
    margin: 0;
}

.accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--accordion-padding);
    background: transparent;
    border: none;
    color: var(--accordion-text);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: var(--accordion-transition);
    gap: 1rem;
}

.accordion-trigger:hover {
    background: var(--accordion-bg-hover);
}

.accordion-trigger:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--teal-intense, #1a8b7d);
}

/* Expanded state */
.accordion-item.open .accordion-trigger,
.accordion-trigger[aria-expanded="true"] {
    background: var(--accordion-bg-active);
}

/* ===================
   ACCORDION ICON
   =================== */

.accordion-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accordion-icon);
    transition: transform 0.2s ease;
}

/* Chevron default */
.accordion-icon::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
}

.accordion-item.open .accordion-icon::before,
.accordion-trigger[aria-expanded="true"] .accordion-icon::before {
    transform: rotate(45deg);
}

/* Plus/Minus variant */
.accordion-plus .accordion-icon::before {
    content: '+';
    border: none;
    font-size: 1.25rem;
    font-weight: 300;
    transform: none;
}

.accordion-plus .accordion-item.open .accordion-icon::before,
.accordion-plus .accordion-trigger[aria-expanded="true"] .accordion-icon::before {
    content: '−';
    transform: none;
}

/* Icon on left */
.accordion-icon-left .accordion-trigger {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* ===================
   ACCORDION CONTENT/BODY
   =================== */

.accordion-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-out;
}

.accordion-item.open .accordion-content,
.accordion-content[data-state="open"] {
    max-height: 1000px; /* Fallback */
    transition: max-height 0.3s ease-in;
}

.accordion-body {
    padding: var(--accordion-body-padding);
    color: var(--accordion-text-muted);
    font-size: 0.875rem;
    line-height: 1.6;
}

.accordion-body p {
    margin: 0 0 0.75rem;
}

.accordion-body p:last-child {
    margin-bottom: 0;
}

/* ===================
   ACCORDION VARIANTS
   =================== */

/* --- Bordered/Separated --- */
.accordion-bordered {
    border: none;
    gap: 0.75rem;
}

.accordion-bordered .accordion-item {
    border: 1px solid var(--accordion-border);
    border-radius: var(--accordion-border-radius);
}

.accordion-bordered .accordion-item.open {
    border-color: var(--teal-intense, #1a8b7d);
}

/* --- Flush (no outer borders) --- */
.accordion-flush {
    border: none;
    border-radius: 0;
}

.accordion-flush .accordion-item {
    border-radius: 0;
}

.accordion-flush .accordion-item:first-child {
    border-top: 1px solid var(--accordion-border);
}

/* --- Ghost (minimal) --- */
.accordion-ghost {
    border: none;
    background: transparent;
}

.accordion-ghost .accordion-item {
    background: transparent;
    border-bottom: none;
}

.accordion-ghost .accordion-trigger {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--accordion-border);
}

.accordion-ghost .accordion-trigger:hover {
    background: transparent;
    color: var(--teal-intense, #1a8b7d);
}

.accordion-ghost .accordion-body {
    padding: 1rem 0;
}

/* ===================
   ACCORDION SIZES
   =================== */

.accordion-sm .accordion-trigger {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
}

.accordion-sm .accordion-body {
    padding: 0 1rem 1rem;
    font-size: 0.8125rem;
}

.accordion-sm .accordion-icon {
    width: 1rem;
    height: 1rem;
}

.accordion-lg .accordion-trigger {
    padding: 1.25rem 1.5rem;
    font-size: 1.0625rem;
}

.accordion-lg .accordion-body {
    padding: 0 1.5rem 1.5rem;
    font-size: 0.9375rem;
}

/* ===================
   ACCORDION WITH ICONS
   =================== */

.accordion-trigger-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(42, 161, 152, 0.1);
    color: var(--teal-intense, #1a8b7d);
    border-radius: 0.375rem;
    flex-shrink: 0;
}

.accordion-trigger-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.accordion-trigger-title {
    font-weight: 600;
    color: var(--accordion-text);
}

.accordion-trigger-subtitle {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--accordion-text-muted);
}

/* ===================
   NESTED ACCORDION
   =================== */

.accordion-nested {
    margin-top: 0.75rem;
    border: 1px solid var(--accordion-border);
    border-radius: 0.375rem;
}

.accordion-nested .accordion-trigger {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.accordion-nested .accordion-body {
    padding: 0 1rem 1rem;
    font-size: 0.8125rem;
}

/* ===================
   FAQ ACCORDION
   =================== */

.accordion-faq .accordion-trigger {
    font-size: 1rem;
}

.accordion-faq .accordion-trigger::before {
    content: 'Q';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: var(--teal-intense, #1a8b7d);
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.accordion-faq .accordion-body::before {
    content: 'A';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: rgba(42, 161, 152, 0.1);
    color: var(--teal-intense, #1a8b7d);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: 0.75rem;
    flex-shrink: 0;
    float: left;
}

/* ===================
   ACCESSIBILITY
   =================== */

/* Keyboard focus */
.accordion-trigger:focus:not(:focus-visible) {
    box-shadow: none;
}

/* Screen reader */
.accordion-trigger[aria-expanded="true"] {
    /* Announced as expanded */
}

.accordion-trigger[aria-expanded="false"] {
    /* Announced as collapsed */
}

/* High contrast */
@media (prefers-contrast: high) {
    .accordion-item {
        border-width: 2px;
    }

    .accordion-trigger:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: -2px;
        box-shadow: none;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .accordion-trigger,
    .accordion-content,
    .accordion-icon,
    .accordion-icon::before {
        transition: none;
    }

    .accordion-content {
        max-height: none !important;
    }

    .accordion-item:not(.open) .accordion-content {
        display: none;
    }

    .accordion-item.open .accordion-content {
        display: block;
    }
}

/* ===================
   RESPONSIVE
   =================== */

@media (max-width: 640px) {
    .accordion-trigger {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }

    .accordion-body {
        padding: 0 1rem 1rem;
    }

    .accordion-bordered {
        gap: 0.5rem;
    }
}

/**
 * TOOLTIPS & POPOVERS - PharmData Design System v2.0
 * Dicas contextuais e informações flutuantes
 *
 * Inclui: Tooltip simples, Popover com conteúdo, posicionamento automático
 */

/* ===================
   CSS CUSTOM PROPERTIES
   =================== */

:root {
    /* Tooltip */
    --tooltip-bg: var(--emerald-abyss, #0B2D2A);
    --tooltip-text: white;
    --tooltip-padding: 0.5rem 0.75rem;
    --tooltip-radius: 0.375rem;
    --tooltip-font-size: 0.75rem;
    --tooltip-max-width: 20rem;
    --tooltip-arrow-size: 6px;
    --tooltip-offset: 8px;
    --tooltip-z-index: 1200;

    /* Popover */
    --popover-bg: var(--cloud);
    --popover-border: rgba(183, 228, 213, 0.2);
    --popover-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    --popover-padding: 1rem;
    --popover-radius: 0.5rem;
    --popover-max-width: 24rem;

    /* Animation */
    --tooltip-transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Dark mode */
:root.dark-mode {
    --tooltip-bg: var(--graphite-depth, #f0f6fc);
    --tooltip-text: var(--emerald-abyss, #7ee2d0);
    --popover-bg: var(--arctic-mist, #161b22);
    --popover-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* ===================
   TOOLTIP BASE
   =================== */

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip-content {
    position: absolute;
    z-index: var(--tooltip-z-index);
    padding: var(--tooltip-padding);
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    font-size: var(--tooltip-font-size);
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    border-radius: var(--tooltip-radius);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: var(--tooltip-transition);
}

/* Multiline tooltip */
.tooltip-content.multiline {
    white-space: normal;
    text-align: left;
    max-width: var(--tooltip-max-width);
}

/* Arrow */
.tooltip-content::after {
    content: '';
    position: absolute;
    border: var(--tooltip-arrow-size) solid transparent;
}

/* Show on hover/focus */
.tooltip:hover .tooltip-content,
.tooltip:focus-within .tooltip-content,
.tooltip.active .tooltip-content {
    opacity: 1;
    visibility: visible;
}

/* ===================
   TOOLTIP POSITIONS
   =================== */

/* Top (default) */
.tooltip-content,
.tooltip-top .tooltip-content {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    margin-bottom: var(--tooltip-offset);
}

.tooltip-content::after,
.tooltip-top .tooltip-content::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--tooltip-bg);
}

.tooltip:hover .tooltip-content,
.tooltip-top:hover .tooltip-content {
    transform: translateX(-50%) translateY(0);
}

/* Bottom */
.tooltip-bottom .tooltip-content {
    top: 100%;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    margin-top: var(--tooltip-offset);
    margin-bottom: 0;
}

.tooltip-bottom .tooltip-content::after {
    bottom: 100%;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: transparent;
    border-bottom-color: var(--tooltip-bg);
}

.tooltip-bottom:hover .tooltip-content {
    transform: translateX(-50%) translateY(0);
}

/* Left */
.tooltip-left .tooltip-content {
    right: 100%;
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(-4px);
    margin-right: var(--tooltip-offset);
    margin-bottom: 0;
}

.tooltip-left .tooltip-content::after {
    left: 100%;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    border-top-color: transparent;
    border-left-color: var(--tooltip-bg);
}

.tooltip-left:hover .tooltip-content {
    transform: translateY(-50%) translateX(0);
}

/* Right */
.tooltip-right .tooltip-content {
    left: 100%;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(4px);
    margin-left: var(--tooltip-offset);
    margin-bottom: 0;
}

.tooltip-right .tooltip-content::after {
    right: 100%;
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    border-top-color: transparent;
    border-right-color: var(--tooltip-bg);
}

.tooltip-right:hover .tooltip-content {
    transform: translateY(-50%) translateX(0);
}

/* ===================
   TOOLTIP VARIANTS
   =================== */

/* Light tooltip */
.tooltip-light .tooltip-content {
    background: var(--cloud);
    color: var(--graphite-depth, #1F2937);
    border: 1px solid var(--popover-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tooltip-light .tooltip-content::after {
    border-top-color: var(--cloud);
}

.tooltip-light.tooltip-bottom .tooltip-content::after {
    border-bottom-color: var(--cloud);
    border-top-color: transparent;
}

/* Info tooltip */
.tooltip-info .tooltip-content {
    background: var(--info, #3B82F6);
}

.tooltip-info .tooltip-content::after {
    border-top-color: var(--info, #3B82F6);
}

/* Success tooltip */
.tooltip-success .tooltip-content {
    background: var(--success, #10B981);
}

.tooltip-success .tooltip-content::after {
    border-top-color: var(--success, #10B981);
}

/* Warning tooltip */
.tooltip-warning .tooltip-content {
    background: var(--warning-dark, #B45309);
}

.tooltip-warning .tooltip-content::after {
    border-top-color: var(--warning-dark, #B45309);
}

/* Error tooltip */
.tooltip-error .tooltip-content {
    background: var(--error, #EF4444);
}

.tooltip-error .tooltip-content::after {
    border-top-color: var(--error, #EF4444);
}

/* ===================
   DATA ATTRIBUTE TOOLTIPS
   Tooltip via atributo [data-tooltip]
   =================== */

[data-tooltip] {
    position: relative;
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    z-index: var(--tooltip-z-index);
    padding: var(--tooltip-padding);
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    font-size: var(--tooltip-font-size);
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    border-radius: var(--tooltip-radius);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: var(--tooltip-transition);
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    margin-bottom: var(--tooltip-offset);
}

[data-tooltip]::after {
    content: '';
    position: absolute;
    z-index: var(--tooltip-z-index);
    border: var(--tooltip-arrow-size) solid transparent;
    border-top-color: var(--tooltip-bg);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: var(--tooltip-transition);
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: calc(var(--tooltip-offset) - var(--tooltip-arrow-size));
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus::before,
[data-tooltip]:focus::after {
    opacity: 1;
    visibility: visible;
}

[data-tooltip]:hover::before {
    transform: translateX(-50%) translateY(0);
}

/* Position variants */
[data-tooltip-position="bottom"]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: var(--tooltip-offset);
    transform: translateX(-50%) translateY(4px);
}

[data-tooltip-position="bottom"]::after {
    bottom: auto;
    top: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--tooltip-bg);
    margin-bottom: 0;
    margin-top: calc(var(--tooltip-offset) - var(--tooltip-arrow-size));
}

[data-tooltip-position="bottom"]:hover::before {
    transform: translateX(-50%) translateY(0);
}

/* ===================
   POPOVER
   Tooltip com conteúdo rico
   =================== */

.popover {
    position: relative;
    display: inline-block;
}

.popover-trigger {
    cursor: pointer;
}

.popover-content {
    position: absolute;
    z-index: var(--tooltip-z-index);
    min-width: 12rem;
    max-width: var(--popover-max-width);
    padding: var(--popover-padding);
    background: var(--popover-bg);
    border: 1px solid var(--popover-border);
    border-radius: var(--popover-radius);
    box-shadow: var(--popover-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: var(--tooltip-transition);
    pointer-events: none;
}

.popover.active .popover-content,
.popover:focus-within .popover-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Popover header */
.popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--popover-border);
}

.popover-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--graphite-depth, #1F2937);
    margin: 0;
}

.popover-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    color: var(--soft-steel, #374151);
    cursor: pointer;
    transition: all 0.15s ease;
}

.popover-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--graphite-depth, #1F2937);
}

/* Popover body */
.popover-body {
    font-size: 0.875rem;
    color: var(--soft-steel, #374151);
    line-height: 1.5;
}

.popover-body p {
    margin: 0 0 0.5rem;
}

.popover-body p:last-child {
    margin-bottom: 0;
}

/* Popover footer */
.popover-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px solid var(--popover-border);
}

/* ===================
   POPOVER POSITIONS
   =================== */

/* Top */
.popover-top .popover-content {
    bottom: 100%;
    left: 50%;
    top: auto;
    transform: translateX(-50%) translateY(-8px);
    margin-bottom: var(--tooltip-offset);
}

.popover-top.active .popover-content {
    transform: translateX(-50%) translateY(0);
}

/* Bottom (default) */
.popover-content,
.popover-bottom .popover-content {
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    margin-top: var(--tooltip-offset);
}

.popover.active .popover-content,
.popover-bottom.active .popover-content {
    transform: translateX(-50%) translateY(0);
}

/* Left */
.popover-left .popover-content {
    right: 100%;
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(-8px);
    margin-right: var(--tooltip-offset);
    margin-top: 0;
}

.popover-left.active .popover-content {
    transform: translateY(-50%) translateX(0);
}

/* Right */
.popover-right .popover-content {
    left: 100%;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(8px);
    margin-left: var(--tooltip-offset);
    margin-top: 0;
}

.popover-right.active .popover-content {
    transform: translateY(-50%) translateX(0);
}

/* Alignment variants */
.popover-start .popover-content {
    left: 0;
    transform: translateY(8px);
}

.popover-start.active .popover-content {
    transform: translateY(0);
}

.popover-end .popover-content {
    left: auto;
    right: 0;
    transform: translateY(8px);
}

.popover-end.active .popover-content {
    transform: translateY(0);
}

/* ===================
   POPOVER ON HOVER
   =================== */

.popover-hover:hover .popover-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Delay para evitar fechamento acidental */
.popover-hover .popover-content {
    transition-delay: 0.1s;
}

.popover-hover:hover .popover-content {
    transition-delay: 0s;
}

/* ===================
   HELP TOOLTIP
   Ícone de ajuda com tooltip
   =================== */

.help-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    background: rgba(100, 116, 139, 0.15);
    color: var(--soft-steel, #374151);
    border-radius: 50%;
    font-size: 0.625rem;
    font-weight: 700;
    cursor: help;
    margin-left: 0.25rem;
    vertical-align: middle;
}

.help-tooltip::before {
    content: '?';
}

/* ===================
   ACCESSIBILITY
   =================== */

/* Focus management */
.tooltip-content:focus,
.popover-content:focus {
    outline: none;
}

/* Screen reader only */
.tooltip-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Keyboard accessible tooltip */
.tooltip[tabindex]:focus .tooltip-content {
    opacity: 1;
    visibility: visible;
}

/* High contrast */
@media (prefers-contrast: high) {
    .tooltip-content,
    .popover-content {
        border: 2px solid currentColor;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tooltip-content,
    .popover-content,
    [data-tooltip]::before,
    [data-tooltip]::after {
        transition: none;
    }
}

/* ===================
   RESPONSIVE
   =================== */

@media (max-width: 640px) {
    .tooltip-content {
        max-width: calc(100vw - 2rem);
    }

    .popover-content {
        max-width: calc(100vw - 2rem);
        min-width: 0;
        width: calc(100vw - 2rem);
    }

    /* Force bottom position on mobile */
    .popover-content {
        position: fixed;
        bottom: 1rem;
        top: auto;
        left: 1rem !important;
        right: 1rem !important;
        transform: translateY(100%);
    }

    .popover.active .popover-content {
        transform: translateY(0);
    }
}

/**
 * PAGINATION - PharmData Design System v2.0
 * Navegação entre páginas de conteúdo
 *
 * Inclui: Pagination básica, compacta, com input, responsiva
 */

/* ===================
   CSS CUSTOM PROPERTIES
   =================== */

:root {
    /* Sizing */
    --pagination-height: 2.25rem;
    --pagination-min-width: 2.25rem;
    --pagination-gap: 0.25rem;
    --pagination-padding: 0.5rem 0.75rem;

    /* Colors */
    --pagination-bg: white;
    --pagination-bg-hover: rgba(183, 228, 213, 0.1);
    --pagination-bg-active: var(--teal-intense, #1a8b7d);
    --pagination-text: var(--graphite-depth, #1F2937);
    --pagination-text-hover: var(--teal-intense, #1a8b7d);
    --pagination-text-active: white;
    --pagination-text-disabled: var(--soft-steel, #374151);
    --pagination-border: rgba(183, 228, 213, 0.3);
    --pagination-border-active: var(--teal-intense, #1a8b7d);

    /* Border radius */
    --pagination-radius: 0.375rem;

    /* Transition */
    --pagination-transition: all 0.15s ease;
}

/* Dark mode */
:root.dark-mode {
    --pagination-bg: var(--arctic-mist, #E9ECEF);
    --pagination-bg-hover: rgba(183, 228, 213, 0.15);
    --pagination-border: rgba(183, 228, 213, 0.2);
}

/* ===================
   PAGINATION CONTAINER
   =================== */

.pagination {
    display: flex;
    align-items: center;
    gap: var(--pagination-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ===================
   PAGINATION ITEM
   =================== */

.pagination-item {
    display: flex;
}

.pagination-link,
.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pagination-min-width);
    height: var(--pagination-height);
    padding: var(--pagination-padding);
    background: var(--pagination-bg);
    color: var(--pagination-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--pagination-border);
    border-radius: var(--pagination-radius);
    cursor: pointer;
    transition: var(--pagination-transition);
    gap: 0.375rem;
}

.pagination-link:hover,
.pagination-btn:hover {
    background: var(--pagination-bg-hover);
    color: var(--pagination-text-hover);
    border-color: var(--pagination-text-hover);
}

.pagination-link:focus-visible,
.pagination-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--teal-intense, #1a8b7d);
    z-index: 1;
}

/* Active state */
.pagination-item.active .pagination-link,
.pagination-link[aria-current="page"],
.pagination-btn.active {
    background: var(--pagination-bg-active);
    color: var(--pagination-text-active);
    border-color: var(--pagination-border-active);
    cursor: default;
}

/* Disabled state */
.pagination-item.disabled .pagination-link,
.pagination-link[aria-disabled="true"],
.pagination-btn:disabled {
    color: var(--pagination-text-disabled);
    background: var(--pagination-bg);
    border-color: var(--pagination-border);
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}

/* ===================
   PAGINATION NAVIGATION
   Previous/Next buttons
   =================== */

.pagination-prev,
.pagination-next {
    font-weight: 500;
}

.pagination-prev .pagination-icon {
    margin-right: 0.25rem;
}

.pagination-next .pagination-icon {
    margin-left: 0.25rem;
}

/* Icon only */
.pagination-prev-icon,
.pagination-next-icon {
    padding: 0;
}

/* ===================
   PAGINATION ELLIPSIS
   =================== */

.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pagination-min-width);
    height: var(--pagination-height);
    color: var(--pagination-text-disabled);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    cursor: default;
}

/* Hoverable ellipsis (para mostrar dropdown) */
.pagination-ellipsis-interactive {
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--pagination-radius);
    transition: var(--pagination-transition);
}

.pagination-ellipsis-interactive:hover {
    background: var(--pagination-bg-hover);
    color: var(--pagination-text);
}

/* ===================
   PAGINATION VARIANTS
   =================== */

/* --- Bordered Group --- */
.pagination-bordered {
    gap: 0;
}

.pagination-bordered .pagination-link,
.pagination-bordered .pagination-btn,
.pagination-bordered .pagination-ellipsis {
    border-radius: 0;
    margin-left: -1px;
}

.pagination-bordered .pagination-item:first-child .pagination-link,
.pagination-bordered .pagination-item:first-child .pagination-btn {
    border-radius: var(--pagination-radius) 0 0 var(--pagination-radius);
    margin-left: 0;
}

.pagination-bordered .pagination-item:last-child .pagination-link,
.pagination-bordered .pagination-item:last-child .pagination-btn {
    border-radius: 0 var(--pagination-radius) var(--pagination-radius) 0;
}

/* --- Pills --- */
.pagination-pills .pagination-link,
.pagination-pills .pagination-btn {
    border: none;
    background: transparent;
}

.pagination-pills .pagination-link:hover,
.pagination-pills .pagination-btn:hover {
    background: var(--pagination-bg-hover);
}

.pagination-pills .pagination-item.active .pagination-link,
.pagination-pills .pagination-btn.active {
    background: var(--pagination-bg-active);
    color: var(--pagination-text-active);
}

/* --- Ghost --- */
.pagination-ghost .pagination-link,
.pagination-ghost .pagination-btn {
    border: none;
    background: transparent;
    min-width: auto;
    padding: 0.5rem;
}

.pagination-ghost .pagination-link:hover,
.pagination-ghost .pagination-btn:hover {
    background: transparent;
    color: var(--pagination-text-hover);
}

.pagination-ghost .pagination-item.active .pagination-link {
    background: transparent;
    color: var(--teal-intense, #1a8b7d);
    font-weight: 700;
}

/* --- Rounded --- */
.pagination-rounded .pagination-link,
.pagination-rounded .pagination-btn {
    border-radius: 50%;
}

/* ===================
   PAGINATION SIZES
   =================== */

.pagination-sm .pagination-link,
.pagination-sm .pagination-btn {
    min-width: 1.875rem;
    height: 1.875rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
}

.pagination-sm .pagination-ellipsis {
    min-width: 1.875rem;
    height: 1.875rem;
}

.pagination-lg .pagination-link,
.pagination-lg .pagination-btn {
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0.625rem 1rem;
    font-size: 1rem;
}

.pagination-lg .pagination-ellipsis {
    min-width: 2.75rem;
    height: 2.75rem;
}

/* ===================
   PAGINATION INFO
   Texto "Página X de Y"
   =================== */

.pagination-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--soft-steel, #374151);
}

.pagination-info-current {
    font-weight: 600;
    color: var(--graphite-depth, #1F2937);
}

/* ===================
   PAGINATION WITH INPUT
   Jump to page
   =================== */

.pagination-jump {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--soft-steel, #374151);
}

.pagination-jump-input {
    width: 4rem;
    height: var(--pagination-height);
    padding: 0.375rem 0.5rem;
    text-align: center;
    border: 1px solid var(--pagination-border);
    border-radius: var(--pagination-radius);
    font-size: 0.875rem;
    color: var(--pagination-text);
    background: var(--pagination-bg);
    transition: var(--pagination-transition);
}

.pagination-jump-input:focus {
    outline: none;
    border-color: var(--teal-intense, #1a8b7d);
    box-shadow: 0 0 0 2px rgba(42, 161, 152, 0.2);
}

.pagination-jump-btn {
    height: var(--pagination-height);
    padding: 0.375rem 0.75rem;
}

/* ===================
   PAGINATION PER PAGE
   Items per page selector
   =================== */

.pagination-per-page {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--soft-steel, #374151);
}

.pagination-per-page-select {
    height: var(--pagination-height);
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    border: 1px solid var(--pagination-border);
    border-radius: var(--pagination-radius);
    font-size: 0.875rem;
    color: var(--pagination-text);
    background: var(--pagination-bg);
    cursor: pointer;
    transition: var(--pagination-transition);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}

.pagination-per-page-select:focus {
    outline: none;
    border-color: var(--teal-intense, #1a8b7d);
    box-shadow: 0 0 0 2px rgba(42, 161, 152, 0.2);
}

/* ===================
   PAGINATION WRAPPER
   Container com info e controles
   =================== */

.pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.pagination-wrapper-center {
    justify-content: center;
}

.pagination-wrapper-end {
    justify-content: flex-end;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* ===================
   SIMPLE PAGINATION
   Apenas Previous/Next
   =================== */

.pagination-simple {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pagination-simple .pagination-info {
    min-width: 8rem;
    justify-content: center;
}

/* ===================
   TABLE PAGINATION
   Integração com tabelas
   =================== */

.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-top: 1px solid var(--pagination-border);
    background: rgba(183, 228, 213, 0.03);
}

.table-pagination-info {
    font-size: 0.8125rem;
    color: var(--soft-steel, #374151);
}

.table-pagination-info strong {
    color: var(--graphite-depth, #1F2937);
}

/* ===================
   ACCESSIBILITY
   =================== */

/* Screen reader */
.pagination-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Keyboard navigation */
.pagination-link:focus:not(:focus-visible),
.pagination-btn:focus:not(:focus-visible) {
    box-shadow: none;
}

/* Current page */
.pagination-link[aria-current="page"] {
    /* Announced as current page */
}

/* High contrast */
@media (prefers-contrast: high) {
    .pagination-link,
    .pagination-btn {
        border-width: 2px;
    }

    .pagination-item.active .pagination-link {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pagination-link,
    .pagination-btn,
    .pagination-jump-input,
    .pagination-per-page-select {
        transition: none;
    }
}

/* ===================
   RESPONSIVE
   =================== */

@media (max-width: 640px) {
    .pagination-wrapper {
        flex-direction: column;
        gap: 0.75rem;
    }

    .pagination-controls {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }

    .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Hide middle pages on mobile */
    .pagination-responsive .pagination-item:not(.pagination-prev):not(.pagination-next):not(.active):not(:first-child):not(:last-child) {
        display: none;
    }

    .pagination-responsive .pagination-ellipsis {
        display: flex;
    }

    .table-pagination {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
}

/**
 * STEPPER / WIZARD - PharmData Design System v2.0
 * Indicador de progresso em múltiplas etapas
 *
 * Inclui: Stepper horizontal, vertical, com conteúdo, compacto
 */

/* ===================
   CSS CUSTOM PROPERTIES
   =================== */

:root {
    /* Step indicator */
    --stepper-size: 2.5rem;
    --stepper-size-sm: 2rem;
    --stepper-size-lg: 3rem;
    --stepper-font-size: 0.875rem;

    /* Colors */
    --stepper-bg: white;
    --stepper-bg-active: var(--teal-intense, #1a8b7d);
    --stepper-bg-complete: var(--teal-intense, #1a8b7d);
    --stepper-bg-pending: rgba(183, 228, 213, 0.2);
    --stepper-text: var(--soft-steel, #374151);
    --stepper-text-active: white;
    --stepper-text-complete: white;
    --stepper-border: rgba(183, 228, 213, 0.4);
    --stepper-border-active: var(--teal-intense, #1a8b7d);

    /* Connector line */
    --stepper-line-width: 2px;
    --stepper-line-color: rgba(183, 228, 213, 0.3);
    --stepper-line-complete: var(--teal-intense, #1a8b7d);

    /* Spacing */
    --stepper-gap: 0.75rem;

    /* Transition */
    --stepper-transition: all 0.2s ease;
}

/* Dark mode */
:root.dark-mode {
    --stepper-bg: var(--arctic-mist, #E9ECEF);
    --stepper-bg-pending: rgba(183, 228, 213, 0.1);
    --stepper-border: rgba(183, 228, 213, 0.25);
    --stepper-line-color: rgba(183, 228, 213, 0.2);
}

/* ===================
   STEPPER CONTAINER
   =================== */

.stepper {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

/* ===================
   STEP ITEM
   =================== */

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

/* Connector line */
.step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--stepper-size) / 2);
    left: calc(50% + var(--stepper-size) / 2 + 0.5rem);
    right: calc(-50% + var(--stepper-size) / 2 + 0.5rem);
    height: var(--stepper-line-width);
    background: var(--stepper-line-color);
    transition: var(--stepper-transition);
}

.step.complete:not(:last-child)::after {
    background: var(--stepper-line-complete);
}

/* ===================
   STEP INDICATOR
   =================== */

.step-indicator {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--stepper-size);
    height: var(--stepper-size);
    background: var(--stepper-bg);
    border: 2px solid var(--stepper-border);
    border-radius: 50%;
    color: var(--stepper-text);
    font-size: var(--stepper-font-size);
    font-weight: 600;
    transition: var(--stepper-transition);
}

/* Active step */
.step.active .step-indicator {
    background: var(--stepper-bg-active);
    border-color: var(--stepper-border-active);
    color: var(--stepper-text-active);
    box-shadow: 0 0 0 4px rgba(42, 161, 152, 0.2);
}

/* Complete step */
.step.complete .step-indicator {
    background: var(--stepper-bg-complete);
    border-color: var(--stepper-border-active);
    color: var(--stepper-text-complete);
}

/* Complete checkmark */
.step.complete .step-indicator::after {
    content: '';
    width: 0.625rem;
    height: 0.375rem;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    margin-top: -2px;
}

.step.complete .step-number {
    display: none;
}

/* Error step */
.step.error .step-indicator {
    background: var(--error, #EF4444);
    border-color: var(--error, #EF4444);
    color: white;
}

/* Disabled step */
.step.disabled .step-indicator {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===================
   STEP CONTENT
   =================== */

.step-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: var(--stepper-gap);
    max-width: 10rem;
}

.step-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--graphite-depth, #1F2937);
    margin: 0;
    line-height: 1.3;
}

.step.active .step-title {
    color: var(--teal-intense, #1a8b7d);
}

.step.disabled .step-title {
    color: var(--stepper-text);
}

.step-description {
    font-size: 0.75rem;
    color: var(--soft-steel, #374151);
    margin-top: 0.25rem;
    line-height: 1.4;
}

/* Optional badge */
.step-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    background: rgba(183, 228, 213, 0.2);
    color: var(--teal-intense, #1a8b7d);
    border-radius: 10rem;
    margin-top: 0.375rem;
}

/* ===================
   STEP WITH ICON
   =================== */

.step-icon {
    font-size: 1rem;
}

.step.complete .step-icon {
    display: none;
}

/* ===================
   STEPPER SIZES
   =================== */

/* Small */
.stepper-sm .step-indicator {
    width: var(--stepper-size-sm);
    height: var(--stepper-size-sm);
    font-size: 0.75rem;
}

.stepper-sm .step:not(:last-child)::after {
    top: calc(var(--stepper-size-sm) / 2);
    left: calc(50% + var(--stepper-size-sm) / 2 + 0.375rem);
    right: calc(-50% + var(--stepper-size-sm) / 2 + 0.375rem);
}

.stepper-sm .step-title {
    font-size: 0.8125rem;
}

.stepper-sm .step-description {
    font-size: 0.6875rem;
}

/* Large */
.stepper-lg .step-indicator {
    width: var(--stepper-size-lg);
    height: var(--stepper-size-lg);
    font-size: 1rem;
}

.stepper-lg .step:not(:last-child)::after {
    top: calc(var(--stepper-size-lg) / 2);
    left: calc(50% + var(--stepper-size-lg) / 2 + 0.75rem);
    right: calc(-50% + var(--stepper-size-lg) / 2 + 0.75rem);
}

.stepper-lg .step-title {
    font-size: 1rem;
}

/* ===================
   STEPPER VARIANTS
   =================== */

/* --- Dot Style --- */
.stepper-dots .step-indicator {
    width: 0.75rem;
    height: 0.75rem;
    border-width: 0;
    background: var(--stepper-line-color);
}

.stepper-dots .step.active .step-indicator {
    background: var(--stepper-bg-active);
    width: 1rem;
    height: 1rem;
}

.stepper-dots .step.complete .step-indicator {
    background: var(--stepper-line-complete);
}

.stepper-dots .step.complete .step-indicator::after {
    display: none;
}

.stepper-dots .step:not(:last-child)::after {
    top: 0.375rem;
    left: calc(50% + 0.625rem);
    right: calc(-50% + 0.625rem);
}

.stepper-dots .step.active:not(:last-child)::after {
    top: 0.5rem;
}

/* --- Progress Bar Style --- */
.stepper-progress {
    position: relative;
    padding-bottom: 3rem;
}

.stepper-progress::before {
    content: '';
    position: absolute;
    top: calc(var(--stepper-size) / 2 - var(--stepper-line-width) / 2);
    left: calc(var(--stepper-size) / 2);
    right: calc(var(--stepper-size) / 2);
    height: var(--stepper-line-width);
    background: var(--stepper-line-color);
    z-index: 0;
}

.stepper-progress .step:not(:last-child)::after {
    display: none;
}

.stepper-progress-bar {
    position: absolute;
    top: calc(var(--stepper-size) / 2 - var(--stepper-line-width) / 2);
    left: calc(var(--stepper-size) / 2);
    height: var(--stepper-line-width);
    background: var(--stepper-line-complete);
    z-index: 0;
    transition: width 0.3s ease;
}

/* --- Clickable Steps --- */
.stepper-clickable .step-indicator {
    cursor: pointer;
}

.stepper-clickable .step-indicator:hover {
    transform: scale(1.05);
}

.stepper-clickable .step-indicator:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(42, 161, 152, 0.3);
}

.stepper-clickable .step.disabled .step-indicator {
    cursor: not-allowed;
    transform: none;
}

/* ===================
   VERTICAL STEPPER
   =================== */

.stepper-vertical {
    flex-direction: column;
    align-items: flex-start;
}

.stepper-vertical .step {
    flex-direction: row;
    align-items: flex-start;
    flex: none;
    width: 100%;
    padding-bottom: 2rem;
}

.stepper-vertical .step:last-child {
    padding-bottom: 0;
}

/* Vertical connector */
.stepper-vertical .step:not(:last-child)::after {
    top: calc(var(--stepper-size) + 0.5rem);
    bottom: 0.5rem;
    left: calc(var(--stepper-size) / 2 - var(--stepper-line-width) / 2);
    right: auto;
    width: var(--stepper-line-width);
    height: auto;
}

.stepper-vertical .step-content {
    align-items: flex-start;
    text-align: left;
    margin-top: 0;
    margin-left: 1rem;
    max-width: none;
    flex: 1;
}

/* Vertical with panel content */
.stepper-vertical .step-panel {
    margin-top: 0.75rem;
    padding: 1rem;
    background: rgba(183, 228, 213, 0.05);
    border-radius: 0.5rem;
    border-left: 3px solid var(--stepper-line-color);
}

.stepper-vertical .step.active .step-panel {
    border-left-color: var(--teal-intense, #1a8b7d);
}

/* ===================
   STEPPER NAVIGATION
   =================== */

.stepper-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--stepper-line-color);
}

.stepper-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: var(--stepper-transition);
}

.stepper-nav-prev {
    background: transparent;
    border: 1px solid var(--stepper-border);
    color: var(--graphite-depth, #1F2937);
}

.stepper-nav-prev:hover {
    background: var(--stepper-bg-pending);
}

.stepper-nav-next {
    background: var(--teal-intense, #1a8b7d);
    border: 1px solid var(--teal-intense, #1a8b7d);
    color: white;
}

.stepper-nav-next:hover {
    background: var(--emerald-abyss, #0B2D2A);
    border-color: var(--emerald-abyss, #0B2D2A);
}

.stepper-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===================
   COMPACT STEPPER
   Para headers ou espaços limitados
   =================== */

.stepper-compact {
    gap: 0.5rem;
}

.stepper-compact .step-content {
    display: none;
}

.stepper-compact .step:not(:last-child)::after {
    left: calc(50% + var(--stepper-size) / 2 + 0.25rem);
    right: calc(-50% + var(--stepper-size) / 2 + 0.25rem);
}

/* ===================
   INLINE STEPPER
   Com labels inline
   =================== */

.stepper-inline .step {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.stepper-inline .step-content {
    margin-top: 0;
    text-align: left;
    max-width: none;
}

.stepper-inline .step:not(:last-child)::after {
    top: 50%;
    transform: translateY(-50%);
}

/* ===================
   STEPPER PANEL (Tab-like)
   =================== */

.stepper-panels {
    margin-top: 2rem;
}

.stepper-panel {
    display: none;
    padding: 1.5rem;
    background: var(--stepper-bg);
    border: 1px solid var(--stepper-border);
    border-radius: 0.5rem;
}

.stepper-panel.active {
    display: block;
}

/* ===================
   ACCESSIBILITY
   =================== */

/* Screen reader */
.stepper-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Keyboard focus */
.step-indicator:focus:not(:focus-visible) {
    box-shadow: none;
}

/* ARIA */
.step[aria-current="step"] .step-indicator {
    /* Current step indicator */
}

/* High contrast */
@media (prefers-contrast: high) {
    .step-indicator {
        border-width: 3px;
    }

    .step:not(:last-child)::after {
        height: 3px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .step-indicator,
    .step::after,
    .stepper-progress-bar,
    .stepper-nav-btn {
        transition: none;
    }
}

/* ===================
   RESPONSIVE
   =================== */

@media (max-width: 768px) {
    /* Convert horizontal to vertical on tablet */
    .stepper-responsive {
        flex-direction: column;
        align-items: flex-start;
    }

    .stepper-responsive .step {
        flex-direction: row;
        align-items: flex-start;
        flex: none;
        width: 100%;
        padding-bottom: 1.5rem;
    }

    .stepper-responsive .step:not(:last-child)::after {
        top: calc(var(--stepper-size) + 0.5rem);
        bottom: 0.5rem;
        left: calc(var(--stepper-size) / 2 - var(--stepper-line-width) / 2);
        right: auto;
        width: var(--stepper-line-width);
        height: auto;
    }

    .stepper-responsive .step-content {
        align-items: flex-start;
        text-align: left;
        margin-top: 0;
        margin-left: 1rem;
        max-width: none;
    }
}

@media (max-width: 640px) {
    .stepper-nav {
        flex-direction: column;
    }

    .stepper-nav-btn {
        width: 100%;
        justify-content: center;
    }

    /* Hide descriptions on mobile */
    .stepper .step-description {
        display: none;
    }
}

/**
 * INTERACTIONS - PharmData Design System v2.0
 * Feedback tátil, estados de foco, ações críticas
 *
 * Padrões para garantir que o curador tenha feedback
 * claro e imediato em todas as interações.
 */

:root {
    /* Transition timings */
    --transition-instant: 0.05s;
    --transition-fast: 0.15s;
    --transition-normal: 0.25s;
    --transition-slow: 0.4s;

    /* Easing functions */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Focus ring */
    --focus-ring-color: rgba(42, 161, 152, 0.4);
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;
}

/* Dark mode focus ring - more visible on dark backgrounds */
:root.dark-mode,
[data-theme="dark"] {
    --focus-ring-color: rgba(183, 228, 213, 0.5);
}

/* ===================
   TACTILE FEEDBACK
   Resposta visual imediata para cliques
   =================== */

/* Button press effect */
.btn,
button,
[role="button"] {
    transition:
        transform var(--transition-instant) var(--ease-out),
        box-shadow var(--transition-fast) var(--ease-default),
        background-color var(--transition-fast) var(--ease-default),
        border-color var(--transition-fast) var(--ease-default);
}

.btn:active:not(:disabled),
button:active:not(:disabled),
[role="button"]:active:not(:disabled) {
    transform: scale(0.97);
}

/* Card/clickable area press effect */
.card-clickable:active,
[data-clickable]:active {
    transform: scale(0.99);
    transition: transform var(--transition-instant) var(--ease-out);
}

/* Link press effect */
a:active {
    opacity: 0.8;
}

/* ===================
   CRITICAL ACTIONS
   Ações destrutivas ou irreversíveis
   =================== */

/* Destructive action base - requires confirmation */
.action-destructive {
    --btn-bg: transparent;
    --btn-color: var(--error, #EF4444);
    --btn-border: rgba(239, 83, 80, 0.3);

    background: var(--btn-bg);
    color: var(--btn-color);
    border: 1px solid var(--btn-border);
    transition: all var(--transition-fast) var(--ease-default);
}

.action-destructive:hover {
    --btn-bg: rgba(239, 83, 80, 0.08);
    --btn-border: rgba(239, 83, 80, 0.5);
}

/* Confirmed destructive action - fully enabled */
.action-destructive.confirmed,
.action-destructive:focus {
    --btn-bg: var(--error, #EF4444);
    --btn-color: white;
    --btn-border: var(--error, #EF4444);
}

/* Require hold to confirm (3 second hold) */
.action-hold-confirm {
    position: relative;
    overflow: hidden;
}

.action-hold-confirm::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--error, #EF4444);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0s linear;
    z-index: -1;
}

.action-hold-confirm:active::before {
    transform: scaleX(1);
    transition: transform 2s linear;
}

/* Approval action */
.action-approve {
    --btn-bg: transparent;
    --btn-color: var(--success, #4CAF50);
    --btn-border: rgba(76, 175, 80, 0.3);

    background: var(--btn-bg);
    color: var(--btn-color);
    border: 1px solid var(--btn-border);
}

.action-approve:hover {
    --btn-bg: rgba(76, 175, 80, 0.08);
    --btn-border: rgba(76, 175, 80, 0.5);
}

.action-approve:active {
    --btn-bg: var(--success, #4CAF50);
    --btn-color: white;
    transform: scale(0.97);
}

/* ===================
   FOCUS STATES
   Accessibility-first focus indicators
   =================== */

/* Global focus reset */
*:focus {
    outline: none;
}

/* Keyboard-only focus (focus-visible) */
*:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* Input focus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    border-color: var(--teal-intense, #1a8b7d);
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

/* Button focus */
.btn:focus-visible,
button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* Card/interactive area focus */
.card:focus-visible,
[tabindex]:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* Link focus */
a:focus-visible {
    outline: 2px solid var(--teal-intense, #1a8b7d);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Skip link for keyboard users */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    padding: var(--space-2) var(--space-4);
    background: var(--emerald-abyss, #0B2D2A);
    color: white;
    font-weight: 600;
    border-radius: var(--radius-md);
    z-index: var(--z-max, 9999);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--space-4);
}

/* ===================
   HOVER STATES
   =================== */

/* Lift effect on hover */
.hover-lift {
    transition: transform var(--transition-fast) var(--ease-out),
                box-shadow var(--transition-fast) var(--ease-out);
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(11, 45, 42, 0.1));
}

/* Glow effect on hover */
.hover-glow {
    transition: box-shadow var(--transition-fast) var(--ease-out);
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(42, 161, 152, 0.15);
}

/* Scale effect on hover */
.hover-scale {
    transition: transform var(--transition-fast) var(--ease-out);
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* ===================
   DISABLED STATES
   =================== */

[disabled],
.disabled,
[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Partial disabled (visible but not interactive) */
.disabled-partial {
    opacity: 0.7;
    cursor: not-allowed;
}

.disabled-partial * {
    pointer-events: none;
}

/* ===================
   LOADING STATES
   =================== */

.is-loading {
    position: relative;
    pointer-events: none;
}

.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    cursor: wait;
}

/* ===================
   SUCCESS/ERROR FEEDBACK
   =================== */

/* Success flash */
@keyframes success-flash {
    0% { background-color: rgba(76, 175, 80, 0.2); }
    100% { background-color: transparent; }
}

.flash-success {
    animation: success-flash 1s var(--ease-out);
}

/* Error shake */
@keyframes error-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.shake-error {
    animation: error-shake 0.5s var(--ease-out);
}

/* Input error state */
.input-error,
input:invalid:not(:placeholder-shown) {
    border-color: var(--error, #EF4444) !important;
    background: rgba(239, 83, 80, 0.04);
}

/* Input success state */
.input-success,
input:valid:not(:placeholder-shown) {
    border-color: var(--success, #4CAF50);
}

/* ===================
   TOOLTIP TRIGGER
   =================== */

[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: var(--space-1) var(--space-2);
    background: var(--emerald-abyss, #0B2D2A);
    color: white;
    font-size: var(--text-xs);
    font-weight: 500;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: var(--z-tooltip, 700);
    pointer-events: none;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
    opacity: 1;
    visibility: visible;
}

/* ===================
   CONFIRMATION DIALOG STATES
   =================== */

/* Pending confirmation */
.confirm-pending {
    border: 2px dashed var(--warning, #FFA726);
    background: rgba(255, 167, 38, 0.05);
}

/* Confirmed */
.confirm-accepted {
    border: 2px solid var(--success, #4CAF50);
    background: rgba(76, 175, 80, 0.05);
}

/* Rejected */
.confirm-rejected {
    border: 2px solid var(--error, #EF4444);
    background: rgba(239, 83, 80, 0.05);
}

/* ===================
   REDUCED MOTION
   =================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hover-lift:hover,
    .hover-scale:hover {
        transform: none;
    }

    .btn:active,
    button:active,
    .card-clickable:active {
        transform: none;
    }
}

/* ===================
   HIGH CONTRAST MODE
   =================== */

@media (prefers-contrast: high) {
    *:focus-visible {
        outline: 3px solid currentColor !important;
        outline-offset: 3px;
    }

    .action-destructive {
        border-width: 2px;
    }

    .action-approve {
        border-width: 2px;
    }
}

/**
 * LOADING STATES - PharmData Design System v2.0
 * Skeleton screens, spinners, progress indicators
 *
 * Optimizado para uso com HTMX onde estados de loading
 * são críticos para UX durante requisições ao servidor.
 */

:root {
    /* Loading colors */
    --skeleton-base: var(--soft-arctic, #E5E8EB);
    --skeleton-highlight: var(--cloud, #F5F8FA);
    --spinner-color: var(--teal-intense, #1a8b7d);
    --progress-bg: var(--soft-arctic, #E5E8EB);
    --progress-fill: var(--teal-intense, #1a8b7d);
}

/* ===================
   SKELETON BASE
   =================== */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--skeleton-base) 0%,
        var(--skeleton-highlight) 50%,
        var(--skeleton-base) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}

.skeleton * {
    visibility: hidden;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ===================
   SKELETON VARIANTS
   =================== */

/* Text skeleton */
.skeleton-text {
    height: 1em;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-sm);
}

.skeleton-text:last-child {
    width: 70%;
}

/* Heading skeleton */
.skeleton-heading {
    height: 1.5em;
    width: 60%;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-sm);
}

/* Avatar skeleton */
.skeleton-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.skeleton-avatar-sm {
    width: 2rem;
    height: 2rem;
}

.skeleton-avatar-lg {
    width: 3.5rem;
    height: 3.5rem;
}

/* Button skeleton */
.skeleton-button {
    height: 2.5rem;
    width: 6rem;
    border-radius: var(--radius-md);
}

/* Card skeleton */
.skeleton-card {
    padding: var(--space-4);
    border: 1px solid var(--border-subtle, rgba(183, 228, 213, 0.15));
    border-radius: var(--radius-lg);
}

/* Image skeleton */
.skeleton-image {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius-md);
}

.skeleton-image-square {
    aspect-ratio: 1/1;
}

/* Table row skeleton */
.skeleton-row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle, rgba(183, 228, 213, 0.15));
}

.skeleton-cell {
    height: 1rem;
    border-radius: var(--radius-sm);
}

/* Badge/Drop skeleton */
.skeleton-badge {
    height: 1.5rem;
    width: 4rem;
    border-radius: var(--radius-full);
}

/* ===================
   SPINNERS
   =================== */

.spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--skeleton-base);
    border-top-color: var(--spinner-color);
    border-radius: 50%;
    animation: spinner-rotate 0.8s linear infinite;
}

.spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: 1.5px;
}

.spinner-lg {
    width: 2rem;
    height: 2rem;
    border-width: 3px;
}

.spinner-xl {
    width: 3rem;
    height: 3rem;
    border-width: 4px;
}

@keyframes spinner-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Spinner inside button */
.btn .spinner {
    margin-right: var(--space-2);
}

.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.25rem;
    height: 1.25rem;
    margin: -0.625rem 0 0 -0.625rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spinner-rotate 0.8s linear infinite;
    opacity: 0.8;
}

/* ===================
   PROGRESS BAR
   =================== */

.progress {
    width: 100%;
    height: 0.5rem;
    background: var(--progress-bg);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--progress-fill);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

/* Indeterminate progress */
.progress-indeterminate .progress-bar {
    width: 30%;
    animation: progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes progress-indeterminate {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(400%);
    }
}

/* Progress sizes */
.progress-sm { height: 0.25rem; }
.progress-lg { height: 0.75rem; }

/* ===================
   LOADING OVERLAY
   =================== */

.loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(2px);
    z-index: var(--z-overlay, 300);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

/* Dark mode loading overlay */
:root.dark-mode .loading-overlay,
[data-theme="dark"] .loading-overlay {
    background: rgba(17, 24, 39, 0.85);
}

.loading-overlay.active,
.is-loading > .loading-overlay {
    opacity: 1;
    visibility: visible;
}

/* Container that holds loading overlay */
.loading-container {
    position: relative;
}

/* ===================
   HTMX INTEGRATION
   =================== */

/* During HTMX request */
.htmx-request {
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.2s;
}

.htmx-request .spinner {
    display: inline-block;
}

/* htmx indicator */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-flex;
}

/* Skeleton during htmx swap */
[hx-swap] .skeleton {
    display: block;
}

/* ===================
   PULSE ANIMATION
   For subtle loading indication
   =================== */

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ===================
   DOT LOADER
   =================== */

.dot-loader {
    display: inline-flex;
    gap: var(--space-1);
}

.dot-loader span {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--spinner-color);
    border-radius: 50%;
    animation: dot-bounce 1.4s ease-in-out infinite both;
}

.dot-loader span:nth-child(1) { animation-delay: -0.32s; }
.dot-loader span:nth-child(2) { animation-delay: -0.16s; }
.dot-loader span:nth-child(3) { animation-delay: 0; }

@keyframes dot-bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

/* ===================
   ACCESSIBILITY
   =================== */

@media (prefers-reduced-motion: reduce) {
    .skeleton,
    .spinner,
    .progress-indeterminate .progress-bar,
    .pulse,
    .dot-loader span {
        animation: none;
    }

    .skeleton {
        background: var(--skeleton-base);
    }

    .spinner {
        border-color: var(--spinner-color);
        opacity: 0.6;
    }
}

/**
 * SKELETON LOADERS - PharmData Design System v3.0
 *
 * Placeholders visuais para estados de carregamento.
 * Mostra a estrutura esperada enquanto dados são carregados.
 *
 * USO:
 * - Adicione classe .skeleton ao container
 * - Use .skeleton-line, .skeleton-circle, .skeleton-badge para elementos
 * - Combine com classes de tamanho (w-*, h-*)
 */

/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */

:root {
    /* Colors */
    --skeleton-base: var(--arctic-mist, #E9ECEF);
    --skeleton-highlight: var(--soft-arctic, #E5E8EB);

    /* Animation */
    --skeleton-duration: 1.5s;
    --skeleton-timing: ease-in-out;

    /* Sizing */
    --skeleton-radius: 4px;
    --skeleton-radius-lg: 8px;
    --skeleton-radius-full: 9999px;
}

/* Dark mode */
:root.dark-mode,
[data-theme="dark"] {
    --skeleton-base: var(--soft-arctic, #21262d);
    --skeleton-highlight: rgba(183, 228, 213, 0.08);
}

/* ========================================
   SHIMMER ANIMATION
   ======================================== */

@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ========================================
   BASE SKELETON STYLES
   ======================================== */

.skeleton,
[class*="skeleton-"] {
    pointer-events: none;
    user-select: none;
}

/* Shimmer effect (default) */
.skeleton-shimmer,
.skeleton-line,
.skeleton-circle,
.skeleton-badge,
.skeleton-avatar,
.skeleton-button,
.skeleton-input,
.skeleton-card,
.skeleton-drop {
    background: linear-gradient(
        90deg,
        var(--skeleton-base) 0%,
        var(--skeleton-highlight) 20%,
        var(--skeleton-base) 40%,
        var(--skeleton-base) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer var(--skeleton-duration) var(--skeleton-timing) infinite;
}

/* Pulse effect (alternative) */
.skeleton-pulse {
    background: var(--skeleton-base);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* ========================================
   SKELETON PRIMITIVES
   ======================================== */

/* Line - for text */
.skeleton-line {
    display: block;
    height: 1em;
    border-radius: var(--skeleton-radius);
    margin-bottom: 0.5em;
}

.skeleton-line:last-child {
    margin-bottom: 0;
}

/* Circle - for avatars, icons */
.skeleton-circle {
    display: inline-block;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Rectangle - for images, cards */
.skeleton-rect {
    display: block;
    border-radius: var(--skeleton-radius-lg);
}

/* Badge - for drops/tags */
.skeleton-badge,
.skeleton-drop {
    display: inline-block;
    height: 1.5rem;
    min-width: 3rem;
    border-radius: var(--skeleton-radius-full);
}

/* ========================================
   SKELETON COMPONENTS
   ======================================== */

/* Avatar */
.skeleton-avatar {
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-avatar-sm {
    width: 2rem;
    height: 2rem;
}

.skeleton-avatar-md {
    width: 2.5rem;
    height: 2.5rem;
}

.skeleton-avatar-lg {
    width: 3.5rem;
    height: 3.5rem;
}

/* Button */
.skeleton-button {
    display: inline-block;
    height: 2.5rem;
    min-width: 6rem;
    border-radius: var(--skeleton-radius-lg);
}

.skeleton-button-sm {
    height: 2rem;
    min-width: 4rem;
}

.skeleton-button-lg {
    height: 3rem;
    min-width: 8rem;
}

/* Input */
.skeleton-input {
    display: block;
    width: 100%;
    height: 2.75rem;
    border-radius: var(--skeleton-radius-lg);
}

/* Card */
.skeleton-card {
    display: block;
    border-radius: var(--skeleton-radius-lg);
    padding: 1.25rem;
    border: 1px solid var(--skeleton-base);
}

/* ========================================
   SIZE UTILITIES
   ======================================== */

/* Width */
.skeleton-w-xs { width: 2rem; }
.skeleton-w-sm { width: 4rem; }
.skeleton-w-md { width: 8rem; }
.skeleton-w-lg { width: 12rem; }
.skeleton-w-xl { width: 16rem; }
.skeleton-w-full { width: 100%; }
.skeleton-w-1\/2 { width: 50%; }
.skeleton-w-1\/3 { width: 33.333%; }
.skeleton-w-2\/3 { width: 66.666%; }
.skeleton-w-3\/4 { width: 75%; }
.skeleton-w-1\/4 { width: 25%; }

/* Height */
.skeleton-h-xs { height: 0.5rem; }
.skeleton-h-sm { height: 0.75rem; }
.skeleton-h-md { height: 1rem; }
.skeleton-h-lg { height: 1.5rem; }
.skeleton-h-xl { height: 2rem; }

/* ========================================
   PHARMDATA-SPECIFIC SKELETONS
   ======================================== */

/* Substance Card Skeleton */
.skeleton-substance-card {
    background: var(--cloud);
    border: 1px solid var(--skeleton-base);
    border-radius: var(--skeleton-radius-lg);
    padding: 1.25rem;
}

.skeleton-substance-card .skeleton-title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: 0.75rem;
}

.skeleton-substance-card .skeleton-subtitle {
    height: 1rem;
    width: 40%;
    margin-bottom: 1rem;
}

.skeleton-substance-card .skeleton-drops {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Enrichment Card Skeleton */
.skeleton-enrichment-card {
    background: var(--cloud);
    border: 1px solid var(--skeleton-base);
    border-radius: var(--skeleton-radius-lg);
    overflow: hidden;
}

.skeleton-enrichment-card .skeleton-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--skeleton-base);
    border-bottom: 1px solid var(--skeleton-highlight);
}

.skeleton-enrichment-card .skeleton-body {
    padding: 1rem;
}

.skeleton-enrichment-card .skeleton-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.skeleton-enrichment-card .skeleton-row:last-child {
    margin-bottom: 0;
}

.skeleton-enrichment-card .skeleton-label {
    width: 30%;
    height: 0.875rem;
}

.skeleton-enrichment-card .skeleton-value {
    width: 60%;
    height: 0.875rem;
}

.skeleton-enrichment-card .skeleton-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--skeleton-base);
}

/* Table Skeleton */
.skeleton-table {
    width: 100%;
    border-collapse: collapse;
}

.skeleton-table-header {
    background: var(--skeleton-base);
}

.skeleton-table-header .skeleton-th {
    padding: 0.75rem 1rem;
}

.skeleton-table-row {
    border-bottom: 1px solid var(--skeleton-base);
}

.skeleton-table-row .skeleton-td {
    padding: 0.75rem 1rem;
}

/* Drop/Badge Skeleton */
.skeleton-drop {
    height: 1.5rem;
    min-width: 4rem;
    border-radius: var(--skeleton-radius-full);
}

.skeleton-drop-sm {
    height: 1.25rem;
    min-width: 3rem;
}

.skeleton-drop-lg {
    height: 1.75rem;
    min-width: 5rem;
}

/* SMS Selector Skeleton */
.skeleton-sms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.skeleton-sms-option {
    height: 2.5rem;
    min-width: 4rem;
    border-radius: var(--skeleton-radius-lg);
}

/* Form Field Skeleton */
.skeleton-form-field {
    margin-bottom: 1.25rem;
}

.skeleton-form-field .skeleton-label {
    height: 0.875rem;
    width: 30%;
    margin-bottom: 0.5rem;
}

.skeleton-form-field .skeleton-input {
    height: 2.75rem;
    width: 100%;
}

/* List Item Skeleton */
.skeleton-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--skeleton-base);
}

.skeleton-list-item:last-child {
    border-bottom: none;
}

.skeleton-list-item .skeleton-content {
    flex: 1;
}

/* ========================================
   SKELETON GROUPS (Pre-built layouts)
   ======================================== */

/* Substance List Skeleton (3 items) */
.skeleton-substance-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Enrichment Panel Skeleton */
.skeleton-enrichment-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* Stats Card Skeleton */
.skeleton-stats {
    display: flex;
    gap: 1rem;
}

.skeleton-stat-card {
    flex: 1;
    padding: 1rem;
    background: var(--cloud);
    border: 1px solid var(--skeleton-base);
    border-radius: var(--skeleton-radius-lg);
}

.skeleton-stat-card .skeleton-number {
    height: 2rem;
    width: 3rem;
    margin-bottom: 0.5rem;
}

.skeleton-stat-card .skeleton-stat-label {
    height: 0.875rem;
    width: 60%;
}

/* ========================================
   ANIMATION CONTROL
   ======================================== */

/* Pause animation on hover (for debugging) */
.skeleton-debug:hover [class*="skeleton-"] {
    animation-play-state: paused;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .skeleton-shimmer,
    .skeleton-line,
    .skeleton-circle,
    .skeleton-badge,
    .skeleton-avatar,
    .skeleton-button,
    .skeleton-input,
    .skeleton-card,
    .skeleton-drop,
    [class*="skeleton-"] {
        animation: skeleton-pulse 2s ease-in-out infinite;
    }
}

/* ========================================
   DELAY STAGGER (for multiple items)
   ======================================== */

.skeleton-stagger > *:nth-child(1) { animation-delay: 0s; }
.skeleton-stagger > *:nth-child(2) { animation-delay: 0.1s; }
.skeleton-stagger > *:nth-child(3) { animation-delay: 0.2s; }
.skeleton-stagger > *:nth-child(4) { animation-delay: 0.3s; }
.skeleton-stagger > *:nth-child(5) { animation-delay: 0.4s; }
.skeleton-stagger > *:nth-child(6) { animation-delay: 0.5s; }

/* ========================================
   TRANSITION TO CONTENT
   ======================================== */

/* Fade out skeleton, fade in content */
.skeleton-fade-out {
    animation: skeleton-fade-out 0.3s ease forwards;
}

@keyframes skeleton-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}

.content-fade-in {
    animation: content-fade-in 0.3s ease forwards;
}

@keyframes content-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/**
 * EMPTY STATES - PharmData Design System v2.0
 * Padrões visuais para estados vazios, primeiro uso e erros
 *
 * Empty states são momentos de oportunidade para orientar
 * o curador e manter o engajamento.
 */

/* ===================
   EMPTY STATE BASE
   =================== */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-12) var(--space-6);
    min-height: 300px;
}

.empty-state-compact {
    padding: var(--space-8) var(--space-4);
    min-height: 200px;
}

.empty-state-full {
    min-height: 60vh;
}

/* ===================
   ILLUSTRATION/ICON
   =================== */

.empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    margin-bottom: var(--space-6);
    color: var(--mint-signal, #B7E4D5);
    background: rgba(183, 228, 213, 0.1);
    border-radius: var(--radius-full);
}

.empty-state-icon svg,
.empty-state-icon i {
    font-size: var(--icon-3xl, 2.5rem);
}

/* Smaller variant */
.empty-state-compact .empty-state-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--space-4);
}

.empty-state-compact .empty-state-icon svg,
.empty-state-compact .empty-state-icon i {
    font-size: var(--icon-2xl, 2rem);
}

/* Colored variants */
.empty-state-icon.icon-success {
    color: var(--success, #4CAF50);
    background: rgba(76, 175, 80, 0.1);
}

.empty-state-icon.icon-warning {
    color: var(--warning, #FFA726);
    background: rgba(255, 167, 38, 0.1);
}

.empty-state-icon.icon-error {
    color: var(--error, #EF4444);
    background: rgba(239, 83, 80, 0.1);
}

.empty-state-icon.icon-info {
    color: var(--info, #3B82F6);
    background: rgba(59, 130, 246, 0.1);
}

/* ===================
   CONTENT
   =================== */

.empty-state-title {
    font-family: var(--font-display, 'EB Garamond', serif);
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--emerald-abyss, #0B2D2A);
    margin-bottom: var(--space-2);
}

.empty-state-compact .empty-state-title {
    font-size: var(--text-md);
}

.empty-state-description {
    font-size: var(--text-sm);
    color: var(--soft-steel, #374151);
    max-width: 400px;
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

.empty-state-compact .empty-state-description {
    margin-bottom: var(--space-4);
    max-width: 300px;
}

/* ===================
   ACTIONS
   =================== */

.empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

.empty-state-actions .btn-primary {
    padding: var(--space-3) var(--space-6);
}

.empty-state-actions .btn-secondary {
    padding: var(--space-3) var(--space-6);
    background: transparent;
    color: var(--teal-intense, #1a8b7d);
    border: 1px solid var(--teal-intense, #1a8b7d);
}

/* ===================
   CONTEXTUAL EMPTY STATES
   =================== */

/* Search - no results */
.empty-state-search {
    background: linear-gradient(180deg,
        rgba(183, 228, 213, 0.03) 0%,
        transparent 100%);
}

.empty-state-search .empty-state-icon {
    color: var(--soft-steel, #374151);
    background: var(--arctic-mist, #E9ECEF);
}

/* First use / Onboarding */
.empty-state-onboarding {
    background: linear-gradient(180deg,
        rgba(42, 161, 152, 0.03) 0%,
        transparent 100%);
    border: 1px dashed var(--border-default, rgba(183, 228, 213, 0.35));
    border-radius: var(--radius-xl);
}

.empty-state-onboarding .empty-state-icon {
    color: var(--teal-intense, #1a8b7d);
    background: rgba(42, 161, 152, 0.1);
}

/* Error state */
.empty-state-error {
    background: rgba(239, 83, 80, 0.02);
    border: 1px solid rgba(239, 83, 80, 0.15);
    border-radius: var(--radius-xl);
}

/* Permission denied */
.empty-state-forbidden {
    background: rgba(255, 167, 38, 0.02);
    border: 1px solid rgba(255, 167, 38, 0.15);
    border-radius: var(--radius-xl);
}

/* Offline state */
.empty-state-offline {
    background: var(--arctic-mist, #E9ECEF);
}

.empty-state-offline .empty-state-icon {
    color: var(--soft-steel, #374151);
}

/* ===================
   EMPTY STATE HELPERS
   Quick tips or suggestions
   =================== */

.empty-state-tips {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-subtle, rgba(183, 228, 213, 0.2));
    max-width: 500px;
}

.empty-state-tips-title {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--soft-steel, #374151);
    margin-bottom: var(--space-3);
}

.empty-state-tips-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: left;
}

.empty-state-tips-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--graphite-depth, #1F2937);
}

.empty-state-tips-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    margin-top: 0.5em;
    background: var(--teal-intense, #1a8b7d);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ===================
   INLINE EMPTY STATE
   For smaller containers (cards, panels)
   =================== */

.empty-state-inline {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: rgba(183, 228, 213, 0.05);
    border: 1px dashed var(--border-subtle, rgba(183, 228, 213, 0.3));
    border-radius: var(--radius-md);
    text-align: left;
}

.empty-state-inline .empty-state-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0;
    flex-shrink: 0;
}

.empty-state-inline .empty-state-icon svg,
.empty-state-inline .empty-state-icon i {
    font-size: var(--icon-lg, 1.25rem);
}

.empty-state-inline .empty-state-content {
    flex: 1;
}

.empty-state-inline .empty-state-title {
    font-size: var(--text-sm);
    font-family: var(--font-ui, 'IBM Plex Sans', sans-serif);
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.empty-state-inline .empty-state-description {
    font-size: var(--text-xs);
    margin-bottom: 0;
    max-width: none;
}

/* ===================
   MARCADOR DE LACUNA
   "Não documentado nos EPs" — campo ausente marcado pelo schema como
   { documented: false, reason, severity: info|warn|blocker }.
   Aplicar JUNTO de .empty-state-inline; a cor da borda tipa a severidade
   do Gap (ligada a --sev-* de severity.css). Acompanha sempre ícone +
   texto (cor não é o único sinal).
   Uso: <div class="empty-state-inline lacuna lacuna--blocker"> … </div>
   =================== */

.lacuna {
    border-style: dashed;
}

.lacuna--info {
    border-color: var(--sev-info-border);
}

.lacuna--warn {
    border-color: var(--sev-attention-border);
}

.lacuna--blocker {
    border-color: var(--sev-critical-border);
}

/* ===================
   SKELETON EMPTY STATE
   Placeholder while determining if empty
   =================== */

.empty-state-skeleton {
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    background: linear-gradient(
        90deg,
        var(--soft-arctic, #E5E8EB) 0%,
        var(--cloud, #F5F8FA) 50%,
        var(--soft-arctic, #E5E8EB) 100%
    );
    background-size: 200% 100%;
}

.empty-state-skeleton .empty-state-icon,
.empty-state-skeleton .empty-state-title,
.empty-state-skeleton .empty-state-description {
    background: var(--soft-arctic, #E5E8EB);
    color: transparent;
    border-radius: var(--radius-sm);
}

/* ===================
   ANIMATION
   Subtle entrance animation
   =================== */

@keyframes empty-state-appear {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.empty-state-animated {
    animation: empty-state-appear 0.4s var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
}

/* ===================
   REDUCED MOTION
   =================== */

@media (prefers-reduced-motion: reduce) {
    .empty-state-animated {
        animation: none;
    }

    .empty-state-skeleton {
        animation: none;
        background: var(--soft-arctic, #E5E8EB);
    }
}

/* ============================================================
   BADGES — Classificação Regulatória
   ============================================================
   Badges compactos para tabelas e listagens.
   Três categorias: Tarjas, Receituários e Listas (Portaria 344).
   ============================================================ */

/* ========== BASE ========== */

.badge-reg {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--radius-pill, 9999px);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.5;
}

/* ========== ACENTO E VERSAO (papel, nivel, edicao) ========== */

/* Acento: marcador de papel ou destaque (ex.: "Referencia ANVISA", "Nivel 4"),
   na cor da marca. Compoe com .badge-reg. */
.badge-acento {
    background: var(--mint-signal);
    color: var(--emerald-abyss);
}

/* Versao: edicao/proveniencia de dataset (ex.: "ATC/DDD 2022"). Neutro, monoespacado. */
.badge-versao {
    background: transparent;
    color: var(--soft-steel);
    border: 1px solid var(--soft-arctic);
    font-family: var(--font-mono, ui-monospace, "SFMono-Regular", monospace);
}


/* ========== TARJAS ========== */

:root {
    --badge-tarja-vermelha-bg: #fde8e8;
    --badge-tarja-vermelha-text: #c53030;
    --badge-tarja-preta-bg: #2d3748;
    --badge-tarja-preta-text: #fff;
    --badge-tarja-sem-bg: #fff;
    --badge-tarja-sem-text: #4a5568;
    --badge-tarja-sem-border: #e2e8f0;
    --badge-tarja-indef-bg: #fefcbf;
    --badge-tarja-indef-text: #975a16;
}

.badge-tarja-vermelha {
    background: var(--badge-tarja-vermelha-bg);
    color: var(--badge-tarja-vermelha-text);
}

.badge-tarja-preta {
    background: var(--badge-tarja-preta-bg);
    color: var(--badge-tarja-preta-text);
}

.badge-tarja-sem {
    background: var(--badge-tarja-sem-bg);
    color: var(--badge-tarja-sem-text);
    border: 1px solid var(--badge-tarja-sem-border);
}

.badge-tarja-indef {
    background: var(--badge-tarja-indef-bg);
    color: var(--badge-tarja-indef-text);
}


/* ========== RECEITUÁRIOS ========== */

:root {
    /* Notificação Amarela — entorpecentes (Lista A) */
    --badge-rec-amarela-bg: #fefcbf;
    --badge-rec-amarela-text: #975a16;
    --badge-rec-amarela-border: #f6e05e;

    /* Notificação Azul — psicotrópicos (Lista B) */
    --badge-rec-azul-bg: #dbeafe;
    --badge-rec-azul-text: #1e40af;
    --badge-rec-azul-border: #93c5fd;

    /* Notificação Branca — Lista C2/C3 */
    --badge-rec-branca-bg: #fff;
    --badge-rec-branca-text: #6b7280;
    --badge-rec-branca-border: #d1d5db;

    /* Receita de Controle Especial — 2 vias */
    --badge-rec-controle-bg: #fef3c7;
    --badge-rec-controle-text: #92400e;
    --badge-rec-controle-border: #fcd34d;

    /* Receita Simples — 1 ou 2 vias */
    --badge-rec-simples-bg: #f0fdf4;
    --badge-rec-simples-text: #166534;
    --badge-rec-simples-border: #bbf7d0;

    /* Isento de prescrição */
    --badge-rec-isento-bg: var(--arctic-mist, #f1f5f9);
    --badge-rec-isento-text: var(--soft-steel, #64748b);
}

.badge-rec-amarela {
    background: var(--badge-rec-amarela-bg);
    color: var(--badge-rec-amarela-text);
    border: 1px solid var(--badge-rec-amarela-border);
}

.badge-rec-azul {
    background: var(--badge-rec-azul-bg);
    color: var(--badge-rec-azul-text);
    border: 1px solid var(--badge-rec-azul-border);
}

.badge-rec-branca {
    background: var(--badge-rec-branca-bg);
    color: var(--badge-rec-branca-text);
    border: 1px solid var(--badge-rec-branca-border);
}

.badge-rec-controle {
    background: var(--badge-rec-controle-bg);
    color: var(--badge-rec-controle-text);
    border: 1px solid var(--badge-rec-controle-border);
}

.badge-rec-simples {
    background: var(--badge-rec-simples-bg);
    color: var(--badge-rec-simples-text);
    border: 1px solid var(--badge-rec-simples-border);
}

.badge-rec-isento {
    background: var(--badge-rec-isento-bg);
    color: var(--badge-rec-isento-text);
}


/* ========== LISTAS (Portaria 344 / RDC 20 / GLP-1) ========== */

:root {
    /* Lista A — Entorpecentes (amarelo) */
    --badge-lista-a-bg: #fefcbf;
    --badge-lista-a-text: #975a16;
    --badge-lista-a-border: #f6e05e;

    /* Lista B — Psicotrópicos (azul) */
    --badge-lista-b-bg: #dbeafe;
    --badge-lista-b-text: #1e40af;
    --badge-lista-b-border: #93c5fd;

    /* Lista C — Outras substâncias (cinza/neutro) */
    --badge-lista-c-bg: #f3f4f6;
    --badge-lista-c-text: #4b5563;
    --badge-lista-c-border: #d1d5db;

    /* ANT — Antimicrobianos (verde) */
    --badge-lista-ant-bg: #f0fdf4;
    --badge-lista-ant-text: #166534;
    --badge-lista-ant-border: #bbf7d0;

    /* GLP1 — Agonistas GLP-1 (teal) */
    --badge-lista-glp1-bg: #ccfbf1;
    --badge-lista-glp1-text: #115e59;
    --badge-lista-glp1-border: #5eead4;
}

.badge-lista-a {
    background: var(--badge-lista-a-bg);
    color: var(--badge-lista-a-text);
    border: 1px solid var(--badge-lista-a-border);
}

.badge-lista-b {
    background: var(--badge-lista-b-bg);
    color: var(--badge-lista-b-text);
    border: 1px solid var(--badge-lista-b-border);
}

.badge-lista-c {
    background: var(--badge-lista-c-bg);
    color: var(--badge-lista-c-text);
    border: 1px solid var(--badge-lista-c-border);
}

.badge-lista-ant {
    background: var(--badge-lista-ant-bg);
    color: var(--badge-lista-ant-text);
    border: 1px solid var(--badge-lista-ant-border);
}

.badge-lista-glp1 {
    background: var(--badge-lista-glp1-bg);
    color: var(--badge-lista-glp1-text);
    border: 1px solid var(--badge-lista-glp1-border);
}


/* ========== DARK MODE ========== */

html.dark-mode,
[data-theme="dark"] {
    /* Tarjas */
    --badge-tarja-vermelha-bg: rgba(197, 48, 48, 0.15);
    --badge-tarja-vermelha-text: #fca5a5;
    --badge-tarja-preta-bg: #1a202c;
    --badge-tarja-preta-text: #e2e8f0;
    --badge-tarja-sem-bg: rgba(74, 85, 104, 0.15);
    --badge-tarja-sem-text: #cbd5e1;
    --badge-tarja-sem-border: rgba(226, 232, 240, 0.2);
    --badge-tarja-indef-bg: rgba(151, 90, 22, 0.15);
    --badge-tarja-indef-text: #fcd34d;

    /* Receituários */
    --badge-rec-amarela-bg: rgba(151, 90, 22, 0.15);
    --badge-rec-amarela-text: #fcd34d;
    --badge-rec-amarela-border: rgba(246, 224, 94, 0.25);
    --badge-rec-azul-bg: rgba(30, 64, 175, 0.15);
    --badge-rec-azul-text: #93c5fd;
    --badge-rec-azul-border: rgba(147, 197, 253, 0.25);
    --badge-rec-branca-bg: rgba(107, 114, 128, 0.1);
    --badge-rec-branca-text: #d1d5db;
    --badge-rec-branca-border: rgba(209, 213, 219, 0.2);
    --badge-rec-controle-bg: rgba(146, 64, 14, 0.15);
    --badge-rec-controle-text: #fcd34d;
    --badge-rec-controle-border: rgba(252, 211, 77, 0.25);
    --badge-rec-simples-bg: rgba(22, 101, 52, 0.15);
    --badge-rec-simples-text: #86efac;
    --badge-rec-simples-border: rgba(187, 247, 208, 0.25);

    /* Listas */
    --badge-lista-a-bg: rgba(151, 90, 22, 0.15);
    --badge-lista-a-text: #fcd34d;
    --badge-lista-a-border: rgba(246, 224, 94, 0.25);
    --badge-lista-b-bg: rgba(30, 64, 175, 0.15);
    --badge-lista-b-text: #93c5fd;
    --badge-lista-b-border: rgba(147, 197, 253, 0.25);
    --badge-lista-c-bg: rgba(75, 85, 99, 0.15);
    --badge-lista-c-text: #d1d5db;
    --badge-lista-c-border: rgba(209, 213, 219, 0.2);
    --badge-lista-ant-bg: rgba(22, 101, 52, 0.15);
    --badge-lista-ant-text: #86efac;
    --badge-lista-ant-border: rgba(187, 247, 208, 0.25);
    --badge-lista-glp1-bg: rgba(17, 94, 89, 0.15);
    --badge-lista-glp1-text: #5eead4;
    --badge-lista-glp1-border: rgba(94, 234, 212, 0.25);
}


/* ========== CHIP DE RASTREABILIDADE ========== */
/* Origem da informação (Evidence Pack / documento). Discreto, monospace,
   para ancorar um dado a sua fonte na Biblioteca PRISMA. Sem cor hardcoded. */

.chip-rastreio {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full, 999px);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: var(--arctic-mist);
    color: var(--soft-steel);
    border: 1px solid var(--soft-arctic);
}

/* ============================================================
   PILLS — Tarjas ANVISA e Situação MKTAUTHS
   ============================================================
   Pills para a Vitrine AMP (rota /amp/<id> do PRISMA Web).
   Conjunto fechado: 4 tarjas + 4 situações + utilitário data-num.
   Zero valor de cor hardcoded — usa exclusivamente tokens DS.
   ============================================================ */

/* ========== BASE ========== */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius-pill, 9999px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.5;
    border: 1px solid transparent;
}


/* ========== TARJAS ANVISA (REF_TARJAS) ========== */

/* Tarja Preta — fundo neutro, texto escuro, borda sutil */
.pill-tarja-preta {
    background: var(--arctic-mist);
    color: var(--graphite-depth);
    border-color: var(--soft-arctic);
}

/* Tarja Vermelha — receita obrigatória */
.pill-tarja-vermelha {
    background: var(--error-light);
    color: var(--error);
    border-color: var(--error);
}

/* Tarja Vermelha com Restrição — controle especial, sinal mais intenso */
.pill-tarja-vermelha-restricao {
    background: var(--error);
    color: var(--cloud);
    border-color: var(--error);
}

/* Sem Tarja — isento de prescrição */
.pill-tarja-sem {
    background: var(--success-light);
    color: var(--success);
    border-color: var(--success);
}


/* ========== SITUAÇÃO MKTAUTHS (STATUS) ========== */

/* ACTIVE */
.pill-situacao-active {
    background: var(--success-light);
    color: var(--success);
    border-color: var(--success);
}

/* INACTIVE */
.pill-situacao-inactive {
    background: var(--arctic-mist);
    color: var(--soft-steel);
    border-color: var(--soft-arctic);
}

/* SUSPENDED */
.pill-situacao-suspended {
    background: var(--warning-light);
    color: var(--warning);
    border-color: var(--warning);
}

/* CANCELLED */
.pill-situacao-cancelled {
    background: var(--error-light);
    color: var(--error);
    border-color: var(--error);
}


/* ========== DADOS NUMÉRICOS ========== */

/* EAN, PPMA, números de registro, códigos farmacêuticos */
.data-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ============================================================
   AVATAR — Iniciais do usuário em contextos de identidade
   ============================================================
   Círculo com duas iniciais centralizadas.
   Tamanhos: sm (24px), md (32px default), lg (40px).
   Variante --on-dark para topbars escuras; --accent destaca
   usuário próprio / curadora ativa.
   ============================================================ */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    line-height: 1;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: var(--cloud);
    background: var(--emerald-abyss);
    user-select: none;
    flex-shrink: 0;
}

.avatar-sm {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.625rem;
}

.avatar-lg {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.875rem;
}

/* Variação para fundos escuros (topbar emerald) — inverte paleta */
.avatar--on-dark {
    background: var(--cloud);
    color: var(--emerald-abyss);
}

/* Acento — destaque para usuária corrente (curadora ativa) */
.avatar--accent {
    background: var(--teal-intense);
    color: var(--cloud);
}

/* Dark mode: inverte o contraste */
:root.dark-mode .avatar {
    background: var(--teal-intense);
    color: var(--graphite-depth);
}

/* ============================================================
   HERO — Seções de Destaque para Landing Pages
   ============================================================
   Seções hero com título grande, subtítulo e badge.
   Centralizado, padding generoso, tipografia display.
   ============================================================ */

/* ========== HERO SECTION ========== */

.hero {
    text-align: center;
    padding: var(--space-24) var(--space-6);
    max-width: var(--container-xl);
    margin-left: auto;
    margin-right: auto;
}

/* ========== HERO TITLE ========== */

.hero-title {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--graphite-depth);
    margin: 0 0 var(--space-4) 0;
}

/* ========== HERO SUBTITLE ========== */

.hero-subtitle {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--soft-steel);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
}

/* ========== HERO BADGE ========== */

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--teal-intense);
    background: var(--mint-signal);
    margin-bottom: var(--space-6);
}

/**
 * CARD — superfície básica de agrupamento.
 * Padding canônico: --card-padding-lg (24px). Sem este respiro o
 * conteúdo cola na borda e o quadro deixa de ler como cartão.
 */

.card {
    background: var(--surface-raised, var(--cloud));
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default, var(--soft-arctic));
    padding: var(--card-padding-lg, var(--space-lg));
}

.card:hover {
    box-shadow: var(--shadow-md);
}

/* ============================================================
   STAT CARDS — Cartões de Estatísticas e Métricas
   ============================================================
   Grid de cartões com número grande e rótulo.
   Hover com efeito de elevação (lift).
   ============================================================ */

/* ========== STATS GRID ========== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
}

/* ========== STAT CARD ========== */

.stat-card {
    background: var(--cloud);
    border: 1px solid var(--arctic-mist);
    border-radius: var(--radius-xl);
    padding: var(--card-padding-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

/* ========== STAT NUMBER ========== */

.stat-number {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--teal-intense);
    margin: 0;
}

/* ========== STAT LABEL ========== */

.stat-label {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--soft-steel);
    margin-top: var(--space-2);
}

/* ============================================================
   FEATURE CARDS — Cartões de Funcionalidade / Domínio
   ============================================================
   Grid de cartões clicáveis com ícone, título, descrição
   e metadado inferior (contagem, etc.).
   ============================================================ */

/* ========== FEATURE GRID ========== */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
}

/* ========== FEATURE CARD ========== */

.feature-card {
    display: flex;
    flex-direction: column;
    background: var(--cloud);
    border: 1px solid var(--arctic-mist);
    border-radius: var(--radius-xl);
    padding: var(--card-padding-lg);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
    border-color: var(--teal-intense);
    box-shadow: var(--shadow-md);
}

/* ========== FEATURE CARD ICON ========== */

.feature-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-lg);
    background: var(--mint-signal);
    color: var(--emerald-abyss);
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
    flex-shrink: 0;
}

/* ========== FEATURE CARD TITLE ========== */

.feature-card-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--graphite-depth);
    margin: 0 0 var(--space-2) 0;
}

/* ========== FEATURE CARD DESCRIPTION ========== */

.feature-card-desc {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    color: var(--soft-steel);
    margin: 0;
    flex: 1;
}

/* ========== FEATURE CARD META ========== */

.feature-card-meta {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--soft-steel);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--arctic-mist);
}

/* ============================================================
   DETAIL LAYOUT — Visualização de Detalhe / Inspetor
   ============================================================
   Layout para páginas de detalhe de itens individuais:
   cabeçalho com voltar, título, seções com campos,
   definições bilíngues e dimensões.
   ============================================================ */

/* ========== HEADER ========== */

.detail-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.detail-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--teal-intense);
    text-decoration: none;
    font-weight: var(--weight-medium);
    transition: opacity 0.15s ease;
}

.detail-back:hover {
    opacity: 0.8;
}

.detail-back::before {
    content: "\2190";
}

/* ========== CODE BADGE ========== */

.detail-code {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--arctic-mist);
    color: var(--code-color);
    padding: var(--space-0.5) var(--space-2);
    border-radius: var(--radius-md);
}

/* ========== TITLES ========== */

.detail-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--graphite-depth);
    margin: 0;
}

.detail-title-en {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--soft-steel);
    margin: var(--space-1) 0 0 0;
}

/* ========== SECTIONS ========== */

.detail-section {
    margin-bottom: var(--space-8);
}

.detail-section-title {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--soft-steel);
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--arctic-mist);
}

/* ========== FIELD GRID ========== */

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
}

.detail-field {
    background: var(--cloud);
    border: 1px solid var(--arctic-mist);
    border-radius: var(--radius-lg);
    padding: var(--card-padding-md);
}

.detail-field-label {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--soft-steel);
    margin-bottom: var(--space-1);
}

.detail-field-value {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--graphite-depth);
    line-height: var(--leading-normal);
}

/* ========== DEFINITIONS (Bilingual) ========== */

.detail-definitions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.detail-definition-box {
    background: var(--cloud);
    border: 1px solid var(--arctic-mist);
    border-radius: var(--radius-lg);
    padding: var(--card-padding-md);
}

/* ========== DIMENSIONS ========== */

.dimensions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.dimension-item {
    background: var(--cloud);
    border: 1px solid var(--arctic-mist);
    border-radius: var(--radius-lg);
    padding: var(--card-padding-sm);
    min-width: 140px;
}

.dimension-label {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--soft-steel);
    margin-bottom: var(--space-1);
}

.dimension-value {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--graphite-depth);
    line-height: var(--leading-normal);
}

.dimension-value-en {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--soft-steel);
    margin-top: var(--space-0.5);
}

/* ============================================================
   COMPARATOR — Visualização de Comparação Lado a Lado
   ============================================================
   Pares de comparação em grid 3 colunas (item | seta | item),
   seletores de tipo e decomposição de elementos.
   ============================================================ */

/* ========== PAIR LAYOUT ========== */

.comparator-pair {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-4);
    align-items: start;
    margin-bottom: var(--space-6);
}

.comparator-pair-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    color: var(--soft-steel);
    padding-top: var(--space-4);
}

/* ========== SIDE ========== */

.comparator-side {
    background: var(--cloud);
    border: 1px solid var(--arctic-mist);
    border-radius: var(--radius-xl);
    padding: var(--card-padding-lg);
    box-shadow: var(--shadow-sm);
}

.comparator-side-title {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--soft-steel);
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--arctic-mist);
}

/* ========== ITEM ========== */

.comparator-item {
    border-left: 3px solid var(--teal-intense);
    padding-left: var(--space-3);
    margin-bottom: var(--space-3);
}

.comparator-item:last-child {
    margin-bottom: 0;
}

.comparator-term {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--graphite-depth);
    margin: 0 0 var(--space-1) 0;
}

.comparator-definition {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    color: var(--soft-steel);
    margin: 0;
}

/* ========== DECOMPOSITION ========== */

.comparator-decomposition {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* ========== SELECTOR ========== */

.comparator-selector {
    display: flex;
    gap: var(--space-1);
    background: var(--arctic-mist);
    border-radius: var(--radius-lg);
    padding: var(--space-1);
    margin-bottom: var(--space-6);
}

.comparator-selector button {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    padding: var(--space-2) var(--space-4);
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--soft-steel);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.comparator-selector button:hover {
    color: var(--graphite-depth);
}

.comparator-selector button.active {
    background: var(--cloud);
    color: var(--teal-intense);
    box-shadow: var(--shadow-sm);
}

/* ============================================================
   CODE BLOCK — Exibição de Código e Saída de API
   ============================================================
   Blocos escuros para código/JSON e inline code claro.
   ============================================================ */

/* ========== CODE BLOCK ========== */

.code-block {
    background: var(--emerald-abyss);
    color: var(--mint-signal);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    overflow-x: auto;
}

.code-block pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    color: inherit;
}

/* ========== INLINE CODE ========== */

.code-inline {
    display: inline;
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--arctic-mist);
    color: var(--code-color);
    padding: var(--space-0.5) var(--space-1.5);
    border-radius: var(--radius-sm);
}

/* ============================================================
   SECTION NAV — Barra de Navegação Sticky com Branding
   ============================================================
   Navegação fixa no topo com marca, subtítulo e links.
   Fundo emerald-abyss, texto claro.
   ============================================================ */

/* ========== NAV CONTAINER ========== */

.section-nav {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--emerald-abyss);
    box-shadow: var(--shadow-md);
}

/* ========== INNER WRAPPER ========== */

.section-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: var(--space-3) var(--space-6);
}

/* ========== BRAND ========== */

.section-nav-brand {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--mint-signal);
    text-decoration: none;
    line-height: var(--leading-tight);
}

.section-nav-brand-subtitle {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    color: rgba(255, 255, 255, 0.5);
    margin-top: var(--space-0.5);
}

/* ========== NAV LINKS ========== */

.section-nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.section-nav-link {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: color 0.15s ease, background 0.15s ease;
}

.section-nav-link:hover {
    color: rgba(255, 255, 255, 1);
}

.section-nav-link.active {
    color: var(--mint-signal);
    background: rgba(255, 255, 255, 0.08);
}

/* ============================================================
   MILLER NAV: Navegador hierárquico em colunas (Miller Columns)
   ============================================================
   Drill-down em colunas estilo Finder: um trilho horizontal de
   colunas; cada coluna lista botões (nós intermediários e folhas);
   item ativo via aria-selected; painel de detalhe à direita.

   Promovido a componente do DS na v3.4.0, do DS-GAP da composição
   showcase-prisma/atc-navegador (Navegador ATC).

   Estrutura:
     .miller            container/card do navegador
     .miller-rail       trilho flex com overflow-x (as colunas)
     .miller-col        coluna rolável de itens
     .miller-col--detail   coluna de detalhe (mais larga, padding maior)
     .miller-item       botão de nó intermediário
     .miller-item-leaf  botão de folha/substância
     [aria-selected]    realce do item ativo (barra lateral + fundo)
     .miller-chevron    seta de drill-down
     .cap               first-letter maiúscula (utilitário pequeno)

   Cores: papéis semânticos do DS quando houver equivalência direta.
   Identidade do realce ativo:
     intermediário → superfície elevada + sinal primário
     folha         → sinal sutil + --emerald-abyss legado (preserva contraste
                     e aparência em ambos os temas até existir papel próprio)
   ============================================================ */

/* ========== CONTAINER ========== */

.miller {
    overflow: hidden;
}

/* ========== TRILHO DE COLUNAS ========== */

.miller-rail {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    background: var(--surface-raised);
}

/* ========== COLUNA ========== */

.miller-col {
    width: 20rem;
    min-width: 20rem;
    height: 100%;
    overflow-y: auto;
    background: var(--surface-base);
    padding: var(--space-2);
    border-right: 1px solid var(--border-default);
    scrollbar-width: thin;
}

.miller-col > * + * {
    margin-top: 0.375rem;
}

.miller-col::-webkit-scrollbar {
    width: 8px;
}

.miller-col::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 8px;
}

/* Coluna de detalhe: mais larga, padding generoso, sem stack-gap */
.miller-col--detail {
    width: 24rem;
    min-width: 24rem;
    padding: var(--space-6);
}

.miller-col--detail > * + * {
    margin-top: 0;
}

/* ========== ITEM (nó intermediário) ========== */

.miller-item,
.miller-item-leaf {
    width: 100%;
    text-align: left;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.miller-item:hover,
.miller-item-leaf:hover {
    background: var(--surface-raised);
}

/* nó sem filhos cadastrados (desabilitado) */
.miller-item:disabled {
    opacity: 0.5;
    cursor: default;
}

.miller-item:disabled:hover {
    background: transparent;
}

/* ========== ESTADO ATIVO ========== */

.miller-item[aria-selected="true"] {
    background: var(--surface-raised);
    box-shadow: inset 3px 0 0 0 var(--signal-primary);
}

.miller-item-leaf[aria-selected="true"] {
    background: var(--signal-subtle);
    box-shadow: inset 3px 0 0 0 var(--emerald-abyss);
}

/* ========== CHEVRON (drill-down) ========== */

.miller-chevron {
    width: 1rem;
    height: 1rem;
    color: var(--text-secondary);
    transition: transform 0.15s ease;
}

/* ========== UTILITÁRIO: first-letter maiúscula ========== */

.cap::first-letter {
    text-transform: uppercase;
}

/**
 * PHARMDATA DESIGN SYSTEM - RPDA Navigation
 * Navegação por eixos Regulatório / Prescrever / Dispensar / Administrar.
 *
 * Requires: pharmdata-tokens.css
 *
 * @example
 * <div class="rpda-layout">
 *   <aside class="rpda-sidebar">
 *     <nav class="rpda-nav">
 *       <button class="rpda-btn rpda-btn--active" data-eixo="R">
 *         <i class="fas fa-file-medical"></i>
 *         <span>Regulatório</span>
 *       </button>
 *     </nav>
 *   </aside>
 *   <main class="rpda-main" id="rpda-content">...</main>
 * </div>
 */

/* ─── Layout principal ─── */
.rpda-layout {
    display: flex;
    min-height: calc(100vh - 60px);
}

/* ─── Sidebar ─── */
.rpda-sidebar {
    width: 80px;
    background: var(--arctic-mist);
    border-right: 1px solid var(--soft-arctic);
    flex-shrink: 0;
    position: sticky;
    top: 60px;
    height: calc(100vh - 60px);
    overflow-y: auto;
}

.rpda-nav {
    display: flex;
    flex-direction: column;
    padding: 12px 8px;
    gap: 4px;
}

/* ─── Botões de eixo ─── */
.rpda-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 6px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--soft-steel);
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    transition: background 0.15s, color 0.15s;
    width: 100%;
}

.rpda-btn i {
    font-size: 18px;
    margin-bottom: 2px;
}

.rpda-btn:hover {
    background: var(--mint-signal);
    color: var(--emerald-abyss);
}

.rpda-btn--active {
    background: var(--teal-intense);
    color: white;
}

.rpda-btn--active:hover {
    background: var(--emerald-abyss);
    color: white;
}

/* ─── Área de conteúdo ─── */
.rpda-main {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: var(--cloud);
    min-width: 0;
}

/* ─── Header do eixo ─── */
.rpda-eixo-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--soft-arctic);
}

.rpda-eixo-titulo {
    font-size: 20px;
    font-weight: 700;
    color: var(--emerald-abyss);
    margin: 0 0 4px 0;
}

.rpda-eixo-titulo i {
    margin-right: 8px;
}

.rpda-eixo-descricao {
    font-size: 13px;
    color: var(--soft-steel);
    margin: 0;
}

/* ─── PRO gate — blur overlay sobre conteúdo bloqueado ─── */
.rpda-pro-gate {
    position: relative;
}

.rpda-pro-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--cloud) 85%, transparent) 40%, var(--cloud));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.rpda-pro-cta {
    text-align: center;
    background: var(--arctic-mist);
    border: 1px solid var(--soft-arctic);
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--graphite-depth) 10%, transparent);
}

.rpda-pro-cta i {
    font-size: 20px;
    color: var(--teal-intense);
    display: block;
    margin-bottom: 4px;
}

.rpda-pro-cta p {
    font-size: 12px;
    color: var(--soft-steel);
    margin: 0 0 8px 0;
}

.rpda-pro-cta button {
    padding: 6px 14px;
    background: var(--emerald-abyss);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.rpda-pro-cta button:hover {
    background: var(--graphite-depth);
}

/* ─── Cores semânticas por eixo (border-l e badges) ─── */
:root {
    --eixo-r: #0277bd;
    --eixo-r-bg: #e1f5fe;
    --eixo-p: #6a1b9a;
    --eixo-p-bg: #f3e5f5;
    --eixo-d: #ef6c00;
    --eixo-d-bg: #fff3e0;
    --eixo-a: #2e7d32;
    --eixo-a-bg: #e8f5e9;
}

/* ─── Responsive: sidebar colapsa em mobile ─── */
@media (max-width: 640px) {
    .rpda-layout {
        flex-direction: column;
    }

    .rpda-sidebar {
        width: 100%;
        height: auto;
        position: static;
        border-right: none;
        border-bottom: 1px solid var(--soft-arctic);
    }

    .rpda-nav {
        flex-direction: row;
        justify-content: space-around;
        padding: 8px;
        gap: 4px;
    }

    .rpda-btn {
        padding: 8px 4px;
        font-size: 9px;
    }

    .rpda-btn i {
        font-size: 16px;
    }

    .rpda-main {
        padding: 16px;
    }
}

/* ============================================================
   DEMO — Componentes de Playground / Demonstração
   ============================================================
   Caixa de busca, botão de ação, indicadores de status.
   ============================================================ */

/* ========== SEARCH BOX ========== */

.demo-search-box {
    display: flex;
    gap: var(--space-3);
    align-items: stretch;
}

.demo-search-input {
    flex: 1;
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--arctic-mist);
    border-radius: var(--radius-lg);
    background: var(--cloud);
    color: var(--graphite-depth);
    outline: none;
    transition: border-color 0.15s ease;
}

.demo-search-input::placeholder {
    color: var(--soft-steel);
}

.demo-search-input:focus {
    border-color: var(--teal-intense);
}

/* ========== ACTION BUTTON ========== */

.demo-btn {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    padding: var(--space-3) var(--space-6);
    background: var(--teal-intense);
    color: var(--cloud);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.demo-btn:hover {
    opacity: 0.9;
    box-shadow: var(--shadow-md);
}

/* ========== STATUS PILL ========== */

.demo-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1.5);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}

.demo-status::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
}

.demo-status-online {
    background: var(--success-light);
    color: var(--success);
}

.demo-status-online::before {
    background: var(--success);
}

.demo-status-offline {
    background: var(--warning-light);
    color: var(--warning);
}

.demo-status-offline::before {
    background: var(--warning);
}

/**
 * PharmData Design System - Dark Mode Global Styles
 *
 * Este arquivo adiciona suporte a dark mode para páginas que usam
 * CSS puro com variáveis do Design System.
 *
 * Include AFTER colors.css:
 * <link rel="stylesheet" href="./tokens/colors.css">
 * <link rel="stylesheet" href="./tokens/dark-mode.css">
 */

/* ========================================
   SMOOTH TRANSITIONS
   Performance-optimized: Only apply transitions
   to elements that actually change during theme switch
   ======================================== */

html {
    transition: background-color 0.3s ease;
}

/* Targeted transitions for common theme-switching elements */
body,
.card,
.example-card,
.btn,
.form-input,
.form-select,
.form-textarea,
.table,
.ds-header,
.ds-footer,
.ds-nav-link,
.ds-card,
.modal-content,
.toast,
.alert,
.accordion-item,
.tab,
.breadcrumb-link {
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
    }
}

/* ========================================
   BODY & BACKGROUNDS
   ======================================== */

:root.dark-mode body {
    background-color: var(--cloud);
    color: var(--graphite-depth);
}

/* White backgrounds become dark */
:root.dark-mode .example-card,
:root.dark-mode .card,
:root.dark-mode [style*="background: white"],
:root.dark-mode [style*="background:white"] {
    background-color: var(--arctic-mist) !important;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

:root.dark-mode h1,
:root.dark-mode h2,
:root.dark-mode h3,
:root.dark-mode h4,
:root.dark-mode h5,
:root.dark-mode h6 {
    color: var(--graphite-depth);
}

:root.dark-mode p {
    color: var(--soft-steel);
}

/* Section titles using emerald-abyss in light mode */
:root.dark-mode .section-title,
:root.dark-mode .example-name,
:root.dark-mode [style*="color: var(--emerald-abyss)"] {
    color: var(--emerald-abyss) !important;
}

/* ========================================
   CARDS
   ======================================== */

:root.dark-mode .example-card {
    background: var(--arctic-mist);
    border-color: rgba(183, 228, 213, 0.2);
    color: var(--graphite-depth);
}

:root.dark-mode .example-card:hover {
    border-color: var(--teal-intense);
}

:root.dark-mode .example-thumbnail {
    background: linear-gradient(135deg, rgba(183, 228, 213, 0.08) 0%, rgba(61, 201, 189, 0.08) 100%);
}

:root.dark-mode .example-desc {
    color: var(--soft-steel);
}

:root.dark-mode .example-badge {
    background: rgba(61, 201, 189, 0.15);
    color: var(--teal-intense);
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */

:root.dark-mode header {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
}

:root.dark-mode footer {
    background: #0d1117;
}

/* ========================================
   HERO SECTIONS
   ======================================== */

:root.dark-mode .hero {
    background: linear-gradient(135deg, #0d1117 0%, #1a2332 100%);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

:root.dark-mode input,
:root.dark-mode textarea,
:root.dark-mode select {
    background-color: var(--arctic-mist);
    color: var(--graphite-depth);
    border-color: rgba(183, 228, 213, 0.2);
}

:root.dark-mode input::placeholder,
:root.dark-mode textarea::placeholder {
    color: var(--soft-steel);
}

:root.dark-mode input:focus,
:root.dark-mode textarea:focus,
:root.dark-mode select:focus {
    border-color: var(--teal-intense);
    box-shadow: 0 0 0 3px rgba(61, 201, 189, 0.2);
}

/* ========================================
   LINKS
   ======================================== */

:root.dark-mode a:not([class]) {
    color: var(--teal-intense);
}

:root.dark-mode a:not([class]):hover {
    color: #5dd8cd;
}

/* ========================================
   CODE BLOCKS
   ======================================== */

:root.dark-mode code,
:root.dark-mode pre {
    background-color: var(--soft-arctic);
    color: var(--graphite-depth);
}

/* ========================================
   STATS/METRIC CARDS (inline styles override)
   ======================================== */

:root.dark-mode div[style*="background: white"] {
    background: var(--arctic-mist) !important;
}

/* ========================================
   BUTTONS
   ======================================== */

:root.dark-mode button,
:root.dark-mode .btn {
    transition: all 0.2s ease;
}

:root.dark-mode .btn-secondary,
:root.dark-mode button[class*="secondary"] {
    background: var(--arctic-mist);
    border-color: rgba(183, 228, 213, 0.2);
    color: var(--graphite-depth);
}

/* ========================================
   SHADOWS (more subtle in dark mode)
   ======================================== */

:root.dark-mode [style*="shadow"] {
    box-shadow: var(--shadow-md);
}

/* ========================================
   TABLES
   ======================================== */

:root.dark-mode table {
    background-color: var(--arctic-mist);
}

:root.dark-mode th {
    background-color: var(--soft-arctic);
    color: var(--soft-steel);
}

:root.dark-mode td {
    color: var(--graphite-depth);
    border-color: rgba(183, 228, 213, 0.1);
}

:root.dark-mode tr:hover {
    background-color: rgba(183, 228, 213, 0.05);
}

/* ========================================
   BORDERS
   ======================================== */

:root.dark-mode [style*="border-bottom: 3px solid var(--teal-intense)"] {
    border-color: var(--teal-intense) !important;
}

:root.dark-mode hr {
    border-color: rgba(183, 228, 213, 0.15);
}

/**
 * DENSITY MODES - PharmData Design System v3.0
 *
 * Modos de densidade para diferentes perfis de usuário:
 * - Default: Espaçamento padrão, boa legibilidade
 * - Compact: Menos espaçamento, mais dados na tela (power users)
 * - Comfortable: Mais espaçamento, melhor para touch/mobile
 *
 * USO:
 * - Adicione classe .density-compact ou .density-comfortable ao <html> ou container
 * - Ou use data-density="compact" | "comfortable"
 */

/* ===================
   CSS CUSTOM PROPERTIES
   =================== */

:root {
    /* Default density */
    --density-scale: 1;

    /* Spacing multipliers */
    --density-spacing-xs: calc(0.25rem * var(--density-scale));
    --density-spacing-sm: calc(0.5rem * var(--density-scale));
    --density-spacing-md: calc(0.75rem * var(--density-scale));
    --density-spacing-lg: calc(1rem * var(--density-scale));
    --density-spacing-xl: calc(1.5rem * var(--density-scale));

    /* Component sizes */
    --density-input-height: calc(2.75rem * var(--density-scale));
    --density-button-height: calc(2.5rem * var(--density-scale));
    --density-row-height: calc(3rem * var(--density-scale));
    --density-card-padding: calc(1.25rem * var(--density-scale));

    /* Typography scale */
    --density-font-base: 1rem;
    --density-line-height: 1.5;
}

/* ===================
   COMPACT MODE
   Para power users que preferem densidade alta
   =================== */

.density-compact,
[data-density="compact"] {
    --density-scale: 0.85;
    --density-font-base: 0.875rem;
    --density-line-height: 1.4;
}

/* Compact adjustments */
.density-compact,
[data-density="compact"] {
    font-size: var(--density-font-base);
    line-height: var(--density-line-height);
}

/* Forms in compact mode */
.density-compact .form-input,
.density-compact .form-select,
.density-compact .form-textarea,
[data-density="compact"] .form-input,
[data-density="compact"] .form-select,
[data-density="compact"] .form-textarea {
    padding: 0.4rem 0.65rem;
    font-size: 0.8125rem;
    min-height: 2rem;
}

.density-compact .form-label,
[data-density="compact"] .form-label {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.density-compact .form-group,
[data-density="compact"] .form-group {
    margin-bottom: 0.75rem;
}

/* Buttons in compact mode */
.density-compact .btn,
.density-compact button,
[data-density="compact"] .btn,
[data-density="compact"] button {
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    min-height: 1.875rem;
}

.density-compact .btn-sm,
[data-density="compact"] .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Drops in compact mode */
.density-compact .drop,
[data-density="compact"] .drop {
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    gap: 0.25rem;
}

.density-compact .drop::before,
[data-density="compact"] .drop::before {
    font-size: 0.75em;
    margin-right: 0.2rem;
}

.density-compact .drop-md,
[data-density="compact"] .drop-md {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
}

/* Tables in compact mode */
.density-compact table th,
.density-compact table td,
[data-density="compact"] table th,
[data-density="compact"] table td {
    padding: 0.4rem 0.6rem;
    font-size: 0.8125rem;
}

.density-compact .ds-table th,
.density-compact .ds-table td,
[data-density="compact"] .ds-table th,
[data-density="compact"] .ds-table td {
    padding: 0.4rem 0.6rem;
}

/* Cards in compact mode */
.density-compact .ds-card,
.density-compact .card,
[data-density="compact"] .ds-card,
[data-density="compact"] .card {
    padding: 0.75rem;
}

.density-compact .card-header,
[data-density="compact"] .card-header {
    padding: 0.5rem 0.75rem;
}

.density-compact .card-body,
[data-density="compact"] .card-body {
    padding: 0.75rem;
}

/* Modals in compact mode */
.density-compact .modal-content,
[data-density="compact"] .modal-content {
    padding: 1rem;
}

.density-compact .modal-header,
[data-density="compact"] .modal-header {
    padding: 0.75rem 1rem;
}

.density-compact .modal-body,
[data-density="compact"] .modal-body {
    padding: 0.75rem 1rem;
}

/* Alerts in compact mode */
.density-compact .alert,
[data-density="compact"] .alert {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

/* Breadcrumbs in compact mode */
.density-compact .breadcrumb,
[data-density="compact"] .breadcrumb {
    font-size: 0.75rem;
    gap: 0.35rem;
    min-height: 1.75rem;
}

/* Tabs in compact mode */
.density-compact .tab-item,
[data-density="compact"] .tab-item {
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
}

/* Pagination in compact mode */
.density-compact .pagination-item,
[data-density="compact"] .pagination-item {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    min-width: 1.75rem;
    min-height: 1.75rem;
}

/* Lists in compact mode */
.density-compact .list-item,
.density-compact li,
[data-density="compact"] .list-item,
[data-density="compact"] li {
    padding: 0.35rem 0;
}

/* Section spacing */
.density-compact section,
.density-compact .section,
[data-density="compact"] section,
[data-density="compact"] .section {
    margin-bottom: 1rem;
}

.density-compact h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.density-compact h2 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.density-compact h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.density-compact h4 { font-size: 0.875rem; margin-bottom: 0.3rem; }

[data-density="compact"] h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
[data-density="compact"] h2 { font-size: 1.25rem; margin-bottom: 0.4rem; }
[data-density="compact"] h3 { font-size: 1rem; margin-bottom: 0.35rem; }
[data-density="compact"] h4 { font-size: 0.875rem; margin-bottom: 0.3rem; }

/* ===================
   COMFORTABLE MODE
   Para melhor legibilidade/touch
   =================== */

.density-comfortable,
[data-density="comfortable"] {
    --density-scale: 1.15;
    --density-font-base: 1.0625rem;
    --density-line-height: 1.6;
}

.density-comfortable,
[data-density="comfortable"] {
    font-size: var(--density-font-base);
    line-height: var(--density-line-height);
}

/* Forms in comfortable mode */
.density-comfortable .form-input,
.density-comfortable .form-select,
[data-density="comfortable"] .form-input,
[data-density="comfortable"] .form-select {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    min-height: 3rem;
}

.density-comfortable .form-label,
[data-density="comfortable"] .form-label {
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
}

/* Buttons in comfortable mode */
.density-comfortable .btn,
.density-comfortable button,
[data-density="comfortable"] .btn,
[data-density="comfortable"] button {
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    min-height: 3rem;
}

/* ===================
   DENSITY TOGGLE COMPONENT
   =================== */

.density-toggle {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--arctic-mist);
    border-radius: 0.5rem;
    border: 1px solid var(--soft-arctic);
}

.density-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--soft-steel);
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.density-toggle-btn:hover {
    color: var(--graphite-depth);
    background: rgba(183, 228, 213, 0.2);
}

.density-toggle-btn.active {
    color: var(--cloud);
    background: var(--teal-intense);
}

.density-toggle-btn[data-density="compact"]::before {
    content: '▪';
    margin-right: 0.25rem;
}

.density-toggle-btn[data-density="default"]::before {
    content: '◼';
    margin-right: 0.25rem;
}

.density-toggle-btn[data-density="comfortable"]::before {
    content: '⬛';
    margin-right: 0.25rem;
}

/* Dark mode */
:root.dark-mode .density-toggle,
[data-theme="dark"] .density-toggle {
    background: var(--soft-arctic);
    border-color: rgba(183, 228, 213, 0.1);
}

:root.dark-mode .density-toggle-btn:hover,
[data-theme="dark"] .density-toggle-btn:hover {
    background: rgba(183, 228, 213, 0.1);
}

/* ===================
   KEYBOARD INDICATOR
   Mostra atalho de teclado ativo
   =================== */

.density-compact .kbd-indicator,
[data-density="compact"] .kbd-indicator {
    font-size: 0.625rem;
    padding: 0.125rem 0.25rem;
}

/**
 * KEYBOARD SHORTCUTS - PharmData Design System v3.0
 *
 * Estilos para indicadores de atalhos de teclado e estados de foco
 *
 * Atalhos padrão para workflow de curadoria:
 * - A = Aprovar
 * - R = Rejeitar
 * - N / → = Próximo
 * - P / ← = Anterior
 * - E = Editar
 * - S = Salvar
 * - Esc = Cancelar/Fechar
 */

/* ===================
   CSS CUSTOM PROPERTIES
   =================== */

:root {
    --kbd-bg: var(--arctic-mist);
    --kbd-text: var(--graphite-depth);
    --kbd-border: var(--soft-arctic);
    --kbd-shadow: 0 2px 0 var(--soft-steel);
}

:root.dark-mode {
    --kbd-bg: var(--soft-arctic);
    --kbd-text: var(--graphite-depth);
    --kbd-border: rgba(183, 228, 213, 0.2);
    --kbd-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

/* ===================
   KBD ELEMENT STYLES
   =================== */

kbd,
.kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0.2rem 0.4rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    color: var(--kbd-text);
    background: var(--kbd-bg);
    border: 1px solid var(--kbd-border);
    border-radius: 0.25rem;
    box-shadow: var(--kbd-shadow);
    white-space: nowrap;
}

kbd.kbd-sm,
.kbd-sm {
    min-width: 1.25rem;
    padding: 0.125rem 0.25rem;
    font-size: 0.625rem;
}

kbd.kbd-lg,
.kbd-lg {
    min-width: 2rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.875rem;
}

/* Key combinations */
.kbd-combo {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.kbd-combo .kbd-separator {
    color: var(--soft-steel);
    font-size: 0.75rem;
}

/* ===================
   SHORTCUT HINT TOOLTIP
   Mostra dica de atalho ao hover
   =================== */

.has-shortcut {
    position: relative;
}

.has-shortcut::after {
    content: attr(data-shortcut);
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.25rem;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--cloud);
    background: var(--teal-intense);
    border-radius: 0.25rem;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.15s ease;
    pointer-events: none;
    z-index: 10;
}

.has-shortcut:hover::after,
.has-shortcut:focus-within::after {
    opacity: 1;
    transform: scale(1);
}

/* Always show shortcuts mode */
.show-shortcuts .has-shortcut::after {
    opacity: 0.8;
    transform: scale(1);
}

/* ===================
   SHORTCUT LEGEND PANEL
   =================== */

.shortcuts-legend {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    max-width: 320px;
    padding: 1rem;
    background: var(--cloud);
    border: 1px solid var(--soft-arctic);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s ease;
}

.shortcuts-legend.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.shortcuts-legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--soft-arctic);
}

.shortcuts-legend-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--graphite-depth);
}

.shortcuts-legend-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    font-size: 1rem;
    color: var(--soft-steel);
    background: none;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.shortcuts-legend-close:hover {
    color: var(--graphite-depth);
    background: var(--arctic-mist);
}

.shortcuts-legend-list {
    display: grid;
    gap: 0.5rem;
}

.shortcuts-legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
}

.shortcuts-legend-action {
    font-size: 0.8125rem;
    color: var(--soft-steel);
}

.shortcuts-legend-keys {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ===================
   ACTION BUTTONS WITH SHORTCUTS
   =================== */

/* Approve button */
.btn-approve {
    background: var(--success);
    color: white;
}

.btn-approve:hover {
    background: #059669;
}

.btn-approve[data-shortcut="A"]::after {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

/* Reject button */
.btn-reject {
    background: var(--error);
    color: white;
}

.btn-reject:hover {
    background: #dc2626;
}

.btn-reject[data-shortcut="R"]::after {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

/* Navigation buttons */
.btn-prev,
.btn-next {
    background: var(--arctic-mist);
    color: var(--graphite-depth);
    border: 1px solid var(--soft-arctic);
}

.btn-prev:hover,
.btn-next:hover {
    background: var(--soft-arctic);
    border-color: var(--teal-intense);
}

/* ===================
   KEYBOARD FOCUS INDICATOR
   Indica que keyboard mode está ativo
   =================== */

.keyboard-active {
    /* Classe adicionada ao body quando navegando via teclado */
}

.keyboard-active *:focus {
    outline: 2px solid var(--teal-intense);
    outline-offset: 2px;
}

.keyboard-active .btn:focus,
.keyboard-active button:focus {
    box-shadow: 0 0 0 3px rgba(26, 139, 125, 0.3);
}

/* ===================
   WORKFLOW ACTION BAR
   Barra fixa com ações de workflow
   =================== */

.workflow-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--cloud);
    border-top: 1px solid var(--soft-arctic);
}

.workflow-actions.sticky {
    position: sticky;
    bottom: 0;
    z-index: 100;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
}

.workflow-actions-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.workflow-actions-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.workflow-actions-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Counter/Progress */
.workflow-counter {
    font-size: 0.8125rem;
    color: var(--soft-steel);
}

.workflow-counter strong {
    color: var(--graphite-depth);
}

/* ===================
   TOGGLE FOR SHORTCUTS VISIBILITY
   =================== */

.shortcuts-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    color: var(--soft-steel);
    background: transparent;
    border: 1px solid var(--soft-arctic);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.shortcuts-toggle:hover {
    color: var(--graphite-depth);
    background: var(--arctic-mist);
    border-color: var(--teal-intense);
}

.shortcuts-toggle.active {
    color: var(--teal-intense);
    border-color: var(--teal-intense);
    background: rgba(26, 139, 125, 0.08);
}

.shortcuts-toggle-icon {
    font-size: 0.875rem;
}

/* Dark mode */
:root.dark-mode .shortcuts-legend,
[data-theme="dark"] .shortcuts-legend {
    background: var(--arctic-mist);
    border-color: rgba(183, 228, 213, 0.1);
}

:root.dark-mode .workflow-actions,
[data-theme="dark"] .workflow-actions {
    background: var(--arctic-mist);
    border-color: rgba(183, 228, 213, 0.1);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
}

/* ===================
   ACCESSIBILITY
   =================== */

@media (prefers-reduced-motion: reduce) {
    .has-shortcut::after,
    .shortcuts-legend {
        transition: none;
    }
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    background: var(--emerald-abyss);
    color: white;
    font-weight: 600;
    border-radius: 0 0 0.5rem 0.5rem;
    z-index: 9999;
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 0;
}

*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.static{position:static}.fixed{position:fixed}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:var(--space-1,.25rem)}.mb-3{margin-bottom:var(--space-3,.75rem)}.mb-4{margin-bottom:var(--space-4,1rem)}.mb-6{margin-bottom:var(--space-6,1.5rem)}.mt-1{margin-top:var(--space-1,.25rem)}.mt-2{margin-top:var(--space-2,.5rem)}.mt-3{margin-top:var(--space-3,.75rem)}.mt-4{margin-top:var(--space-4,1rem)}.block{display:block}.flex{display:flex}.table{display:table}.hidden{display:none}.min-h-screen{min-height:100vh}.w-36{width:9rem}.w-44{width:11rem}.w-52{width:13rem}.w-56{width:14rem}.min-w-52{min-width:13rem}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-wrap{flex-wrap:wrap}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:var(--space-2,.5rem)}.gap-3{gap:var(--space-3,.75rem)}.bg-surface-base{background-color:var(--surface-base)}.font-mono{font-family:IBM Plex Mono,Courier New,monospace}.font-sans{font-family:IBM Plex Sans,system-ui,-apple-system,sans-serif}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.text-text-primary{color:var(--text-primary)}.text-text-secondary{color:var(--text-secondary)}.htmx-indicator{display:none}.htmx-indicator.htmx-request,.htmx-request .htmx-indicator{display:inline-flex}.app-shell{max-inline-size:var(--container-2xl);margin-inline:auto;padding:var(--space-4) var(--space-6) var(--space-8)}.lista-trabalho{max-height:calc(100vh - 11rem)}.col-actions{width:1%;white-space:nowrap;text-align:right;vertical-align:middle}