/* Tokens de ../../docs/DESIGN.md. Fuentes autoalojadas (SIL OFL, ver fonts/). */
@font-face{font-family:Inter;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-style:normal;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-style:normal;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Quicksand;font-weight:600;font-style:normal;font-display:swap;src:url(fonts/quicksand-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Quicksand;font-weight:700;font-style:normal;font-display:swap;src:url(fonts/quicksand-latin-700-normal.woff2) format("woff2")}
:root {
  --primary:#FF7F00; --primary-hover:#E67200; --primary-pressed:#D96C00;
  --secondary:#0B3E47; --secondary-hover:#A74A25; --page:#FDFBF7;
  --card:#FFFFFF; --disabled:#F0EDE7; --text:#212121; --muted:#757575;
  --n50:#FAFAFA; --n100:#F5F5F5; --n200:#EEEEEE; --n300:#E0E0E0;
  --n400:#BDBDBD; --n700:#616161;
  --success:#2E7D32; --warning:#E6A700; --error:#C62828; --info:#1565C0;
  --overlay:rgba(33,33,33,.45);
  --shadow1:0 1px 2px rgba(33,33,33,.06); --shadow2:0 2px 4px rgba(33,33,33,.08);
  --shadow3:0 4px 8px rgba(33,33,33,.10);
  --body:Inter,system-ui,"Segoe UI",Roboto,sans-serif;
  --heading:Quicksand,"Trebuchet MS","Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--text);font:400 16px/1.5 var(--body)}
button,input{font:inherit}
button,a{cursor:pointer;-webkit-tap-highlight-color:transparent}
button{color:inherit}
a{color:var(--secondary);text-decoration:none}
a:hover{color:var(--secondary-hover);text-decoration:underline}
:focus-visible,:focus{outline:2px solid var(--secondary);outline-offset:4px}
main:focus{outline:none}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--heading);margin:0;line-height:1.25}
h1{font-size:32px;font-weight:700;letter-spacing:-.5px}
h2{font-size:24px;font-weight:600}
p{margin:0}
.muted{color:var(--muted)} .small{font-size:14px}
.eyebrow{font-size:12px;letter-spacing:.05em;font-weight:600;color:var(--muted)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.icon{width:20px;height:20px;flex-shrink:0;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.skip{position:fixed;left:16px;top:-64px;background:var(--card);padding:16px;z-index:50}
.skip:focus{top:8px}
.noscript{padding:24px}

/* Shell */
.sidebar{position:fixed;inset:0 auto 0 0;width:240px;background:var(--card);border-right:1px solid var(--n300);display:flex;flex-direction:column;z-index:10}
.logo-row{height:64px;display:flex;align-items:center;padding:16px 24px;flex-shrink:0}
.logo-slot{height:32px;display:block;width:100%} /* Logotipo oficial pendiente: espacio reservado. */
.product-label{padding:24px 24px 16px;color:var(--secondary);font-size:14px;font-weight:600}
.nav{display:grid;gap:8px;padding:0 16px}
.nav a{height:40px;border-radius:8px;display:flex;align-items:center;gap:8px;padding:8px 16px;color:var(--n700);font-size:14px;font-weight:600;text-decoration:none}
.nav a:hover{background:var(--n50);color:var(--text)}
.nav a[aria-current]{background:var(--primary);color:var(--secondary)}
.nav a[aria-current]:hover{background:var(--primary-hover)}
.sidebar-bottom{margin-top:auto;padding:24px 0;border-top:1px solid var(--n300)}
.workspace{margin-left:240px;min-width:0}
.topbar{height:64px;position:sticky;top:0;z-index:10;background:var(--primary);display:flex;align-items:center;justify-content:flex-end;padding:0 24px;color:var(--secondary);gap:16px}
.topbar .session-exit{color:var(--secondary)}
.topbar .session-exit:hover{background:var(--primary-hover)}
.mobile-only{display:none!important}
.drawer-shade{display:none}
main{padding:32px 24px 48px;min-height:calc(100vh - 64px)}
.page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:32px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Botones */
.btn{min-height:40px;border:1px solid var(--secondary);background:var(--card);color:var(--secondary);border-radius:8px;padding:8px 16px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:var(--shadow1);line-height:1.4;text-decoration:none}
.btn:hover{background:var(--n50);color:var(--secondary-hover);box-shadow:var(--shadow2);text-decoration:none}
.btn.primary{background:var(--primary);border-color:transparent;color:var(--page);letter-spacing:.05em}
.btn.primary:hover{background:var(--primary-hover);color:var(--page)}
.btn.primary:active{background:var(--primary-pressed)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--n100)}
.btn.icon-button{width:40px;padding:8px;flex-shrink:0}
.btn:disabled{background:var(--disabled);color:var(--n400);border-color:var(--n300);cursor:not-allowed;box-shadow:none}

/* Tarjetas, avisos, vacío y carga */
.card{background:var(--card);border-radius:12px;box-shadow:var(--shadow2);padding:24px;min-width:0}
.alert{display:flex;align-items:flex-start;gap:12px;padding:16px;border-radius:8px;background:var(--card);border-left:4px solid var(--info);box-shadow:var(--shadow1);font-size:14px}
.alert>.icon{margin-top:4px}
.alert.warning{border-color:var(--warning)} .alert.warning>.icon{color:var(--warning)}
.alert.error{border-color:var(--error)} .alert.error>.icon{color:var(--error)}
.bands{display:grid;gap:16px}
.bands:not(:empty){margin-bottom:24px}
.empty{text-align:center;padding:32px;color:var(--muted);max-width:65ch;margin:auto}
.empty .icon{width:32px;height:32px;margin-bottom:16px}
.empty h2{color:var(--text);font-size:20px;margin-bottom:8px}
.empty .btn{margin-top:24px}
.skeleton{height:16px;border-radius:8px;background:var(--n200);margin-bottom:16px;width:60%}
.skeleton.wide{width:100%} .skeleton.narrow{width:30%}

/* Formularios y acceso */
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label{font-size:14px;font-weight:600}
.field input{min-height:40px;max-width:100%;border:1px solid var(--n300);border-radius:8px;background:var(--card);color:var(--text);padding:8px 16px;box-shadow:var(--shadow1);font-size:16px}
.field-error{font-size:12px;color:var(--error)}
[aria-invalid="true"]{border-color:var(--error)!important}
.login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px}
.login>.bands,.login>.card{width:100%;max-width:400px}
.login>.bands:not(:empty){margin-bottom:0}
.login-card h1{margin:8px 0 16px}
.login-card .alert{margin-top:24px}
.login-card form{margin-top:32px;display:grid;gap:24px}
.login-card .primary{width:100%}

/* Avisos emergentes */
.toasts{position:fixed;right:24px;top:80px;z-index:50;width:min(400px,calc(100% - 32px));display:grid;gap:8px}
.toast{padding:16px;border-radius:8px;background:var(--card);box-shadow:var(--shadow3);border-left:4px solid var(--error);display:flex;align-items:flex-start;gap:12px;font-size:14px}
.toast>.icon{color:var(--error);margin-top:4px}
.toast .btn{margin-left:auto}

@media(max-width:1023px){
  .workspace{margin-left:0}
  .sidebar{display:none}
  .mobile-only{display:flex!important}
  .topbar{justify-content:space-between}
  .topbar .logo-slot{width:32px}
  .drawer-open .sidebar{display:flex;z-index:40}
  .drawer-open .drawer-shade{display:block;position:fixed;inset:0;background:var(--overlay);z-index:30}
  .logo-row{justify-content:space-between}
  .nav a{min-height:44px}
  .btn{min-height:44px}
  .btn.icon-button{min-width:44px}
  .drawer-open{overflow:hidden}
}
@media(max-width:767px){
  main{padding:32px 16px}
  .topbar{padding:0 16px}
  .page-header{flex-direction:column;gap:16px}
  .alert{flex-wrap:wrap}
}
@media(prefers-reduced-motion:no-preference){
  button,a{transition:background-color 150ms cubic-bezier(.4,0,.2,1),color 150ms cubic-bezier(.4,0,.2,1),box-shadow 150ms cubic-bezier(.4,0,.2,1)}
  .skeleton{animation:pulse 1.2s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.5}}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Salud y ajustes (F2-10) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,288px),1fr));gap:24px}
.card-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-bottom:24px}
.card-head h2,.card-title{font-size:20px;font-weight:600}
.card-title{margin-bottom:24px}
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600;letter-spacing:.05em;background:var(--n100);color:var(--muted)}
.badge .icon{width:12px;height:12px}
.badge.success{background:var(--success);color:var(--page)}
.badge.error{background:var(--error);color:var(--page)}
.badge.warning{background:var(--warning);color:var(--text)}
.kv{display:grid;gap:16px;margin:0}
.kv>div{display:grid;gap:4px;min-width:0}
.kv dt{font-size:12px;color:var(--muted)}
.kv dd{margin:0;overflow-wrap:anywhere}
.kv dd.env{font-size:12px;color:var(--muted)}
.intro{max-width:65ch;margin:-16px 0 32px}
.alert+.cards{margin-top:24px}