/* Panel administrativo · Primero Salud
 * Misma identidad del sitio: verde #153437, dorado #C5A059, Montserrat (títulos) e Inter (texto).
 * Sin textos grises: sobre fondo claro todo el texto va en verde #153437 y sobre verde en crema.
 * El rojo de acción solo marca lo principal, lo destructivo y los errores.
 */

/* ---------- tokens ---------- */
:root{
  --color-paper: oklch(99.4% 0.003 85);
  --color-pearl: oklch(97.2% 0.005 85);
  --color-surface: oklch(100% 0 0);
  --color-brand-teal: #153437;
  --color-ink: var(--color-brand-teal);
  --color-brand-gold: #C5A059;
  --color-gold: var(--color-brand-gold);
  --color-gold-soft: oklch(95.5% 0.025 85);
  --color-link: oklch(42% 0.09 75);
  --color-rule: oklch(90% 0.012 80);
  --color-field: oklch(58% 0.03 190);
  --color-accent: oklch(50% 0.165 27);
  --color-accent-hover: oklch(44% 0.155 27);
  --color-on-accent: oklch(99% 0.003 85);
  --color-focus: oklch(50% 0.085 75);
  --color-ok: oklch(48% 0.11 155);
  --color-warn: oklch(62% 0.13 75);
  --color-error: oklch(50% 0.165 27);
  --color-side: var(--color-brand-teal);
  --color-on-side: oklch(96% 0.01 85);
  --color-side-hover: #1f4b4f;
  --color-scrim: oklch(20% 0.02 60 / 0.5);
  --shadow-card: 0 1px 2px oklch(22% 0.01 60 / 0.06), 0 12px 32px -16px oklch(22% 0.01 60 / 0.18);
  --shadow-modal: 0 24px 64px -16px oklch(15% 0.02 60 / 0.45);

  --font-display: "Montserrat", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;

  --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-base: 1rem; --text-md: 1.125rem;
  --text-lg: 1.375rem; --text-title: clamp(1.5rem, 1.1vw + 1.15rem, 2rem);

  --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem;
  --space-xl: 2rem; --space-2xl: 3rem;
  --gutter: clamp(16px, 3.2vw, 48px);
  --container: 104rem;
  --side-width: 17rem;

  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px;
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 150ms; --dur-med: 260ms;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-paper: var(--color-brand-teal); --color-pearl: var(--color-brand-teal); --color-surface: #1c4448;
    --color-ink: oklch(96% 0.006 85); --color-link: var(--color-brand-gold);
    --color-rule: #2c5458; --color-field: oklch(72% 0.03 190);
    --color-gold-soft: #31453c; --color-accent: oklch(55% 0.17 27); --color-accent-hover: oklch(46% 0.16 27);
    --color-focus: oklch(78% 0.1 82); --color-ok: oklch(72% 0.12 155); --color-error: oklch(70% 0.15 27);
    --color-side: #1f4b4f; --color-side-hover: #285c60;
    --color-scrim: oklch(5% 0 0 / 0.6);
    --shadow-card: 0 1px 2px oklch(0% 0 0 / 0.3), 0 16px 40px -18px oklch(0% 0 0 / 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --color-paper: var(--color-brand-teal); --color-pearl: var(--color-brand-teal); --color-surface: #1c4448;
  --color-ink: oklch(96% 0.006 85); --color-link: var(--color-brand-gold);
  --color-rule: #2c5458; --color-field: oklch(72% 0.03 190);
  --color-gold-soft: #31453c; --color-accent: oklch(55% 0.17 27); --color-accent-hover: oklch(46% 0.16 27);
  --color-focus: oklch(78% 0.1 82); --color-ok: oklch(72% 0.12 155); --color-error: oklch(70% 0.15 27);
  --color-side: #1f4b4f; --color-side-hover: #285c60;
  --color-scrim: oklch(5% 0 0 / 0.6);
  --shadow-card: 0 1px 2px oklch(0% 0 0 / 0.3), 0 16px 40px -18px oklch(0% 0 0 / 0.6);
  color-scheme: dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--color-pearl);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-base);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{font-family:var(--font-display);line-height:1.2;letter-spacing:-0.015em;margin:0;overflow-wrap:anywhere}
p{margin:0}
a{color:var(--color-link)}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px;border-radius:6px}
.solo-lectores{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.saltar{position:absolute;left:-999px;top:0}
.saltar:focus{left:var(--space-md);top:var(--space-md);z-index:100;background:var(--color-surface);color:var(--color-ink);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-sm)}
.icono{width:20px;height:20px;flex:none}

/* ---------- armazón ---------- */
.app{display:grid;grid-template-columns:var(--side-width) minmax(0,1fr);align-content:start;min-height:100dvh}
.lateral{position:sticky;top:0;align-self:start;height:100dvh;display:flex;flex-direction:column;gap:var(--space-lg);padding:var(--space-lg) var(--space-md);background:var(--color-side);color:var(--color-on-side);overflow-y:auto}
.marca{display:flex;align-items:center;gap:var(--space-sm);padding:0 var(--space-xs)}
.marca__logo{width:auto;height:48px;border-radius:6px}
.marca__nombre{font:700 var(--text-md)/1.1 var(--font-display)}
.marca__sub{font-size:var(--text-xs);margin-top:2px}
.menu{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.menu a{display:flex;align-items:center;gap:var(--space-sm);min-height:44px;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);color:inherit;text-decoration:none;font-weight:500;font-size:var(--text-sm);transition:background-color var(--dur-fast) var(--ease-out)}
.menu a:hover{background:var(--color-side-hover)}
.menu a[aria-current="page"]{background:var(--color-side-hover);box-shadow:inset 3px 0 0 var(--color-gold);font-weight:600}
.lateral :focus-visible{outline-color:var(--color-gold)}
.lateral__pie{margin-top:auto;display:grid;gap:var(--space-sm);padding-top:var(--space-md);border-top:1px solid var(--color-side-hover)}
.yo{display:grid;gap:2px;padding:0 var(--space-xs);font-size:var(--text-sm);overflow-wrap:anywhere}
.yo__nombre{font-weight:600}
.principal{min-width:0;padding:var(--space-xl) var(--gutter) var(--space-2xl)}
.pagina{width:100%;max-width:var(--container);margin-inline:auto}
.pagina__titulo{font-size:var(--text-title);font-weight:700;margin-bottom:var(--space-lg)}
.pagina__titulo:focus{outline:none}
.barra{display:none}
.velo{display:none}

@media (max-width: 63.99rem){
  .app{grid-template-columns:minmax(0,1fr)}
  .barra{display:flex;position:sticky;top:0;z-index:30;align-items:center;gap:var(--space-sm);min-height:56px;padding:0 var(--gutter);background:var(--color-side);color:var(--color-on-side)}
  .barra__titulo{font:700 var(--text-md)/1.2 var(--font-display);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lateral{position:fixed;z-index:50;inset:0 auto 0 0;width:min(18rem,86vw);transform:translateX(-100%);visibility:hidden;transition:transform var(--dur-med) var(--ease-out),visibility 0s linear var(--dur-med)}
  .menu-abierto .lateral{transform:none;visibility:visible;transition:transform var(--dur-med) var(--ease-out),visibility 0s}
  .menu-abierto .velo{display:block;position:fixed;inset:0;z-index:40;background:var(--color-scrim);border:0;padding:0}
  .principal{padding-top:var(--space-lg)}
}

/* ---------- acceso (iniciar sesión y cambiar contraseña) ---------- */
.acceso{min-height:100dvh;display:grid;place-items:center;padding:var(--space-lg) var(--gutter);background:var(--color-pearl)}
.acceso__tarjeta{width:min(28rem,100%);display:grid;gap:var(--space-lg)}
.acceso__logo{height:64px;width:auto;margin-inline:auto}
.acceso__titulo{font-size:var(--text-lg);font-weight:700;text-align:center}
.acceso__texto{text-align:center}

/* ---------- tarjetas, cabeceras y rejillas ---------- */
.tarjeta{background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--radius-md);padding:var(--space-lg);box-shadow:var(--shadow-card);min-width:0}
.tarjeta__titulo{font-size:var(--text-md);font-weight:700;margin-bottom:var(--space-md)}
.rejilla-2{display:grid;gap:var(--space-lg);grid-template-columns:minmax(0,1fr)}
@media (min-width: 64rem){.rejilla-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.barra-acciones{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-sm);margin-bottom:var(--space-md)}
.barra-acciones__texto{font-size:var(--text-sm);max-width:44rem}
.pila{display:grid;gap:var(--space-md)}
.lista-datos{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--space-xs) var(--space-lg);margin:0}
.lista-datos dt{font-weight:600}
.lista-datos dd{margin:0;overflow-wrap:anywhere}
@media (max-width: 30rem){.lista-datos{grid-template-columns:minmax(0,1fr);gap:0}.lista-datos dd{margin-bottom:var(--space-sm)}}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);min-height:44px;max-width:100%;padding:0 var(--space-lg);border-radius:var(--radius-pill);font:600 var(--text-sm)/1.1 var(--font-display);letter-spacing:.01em;text-decoration:none;border:1px solid transparent;cursor:pointer;background:transparent;color:inherit;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.btn:active:not([disabled]){transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn--primario{background:var(--color-accent);color:var(--color-on-accent)}
.btn--primario:hover:not([disabled]){background:var(--color-accent-hover)}
.btn--secundario{border-color:var(--color-gold);color:var(--color-ink)}
.btn--secundario:hover:not([disabled]){background:var(--color-gold-soft)}
.btn--peligro{border-color:var(--color-error);color:var(--color-error)}
.btn--peligro:hover:not([disabled]){background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}
.btn--lateral{border-color:var(--color-gold);color:var(--color-on-side);width:100%}
.btn--lateral:hover:not([disabled]){background:var(--color-side-hover)}
.btn--chico{min-height:40px;padding:0 var(--space-md);font-size:var(--text-xs)}
.btn--icono{min-width:44px;padding:0}
.btn--barra{color:var(--color-on-side);min-width:44px;padding:0;border-radius:var(--radius-sm)}
.btn--barra:hover{background:var(--color-side-hover)}
.btn--barra:focus-visible{outline-color:var(--color-gold)}
.btn--bloque{width:100%}
.btn__giro{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:giro .8s linear infinite}
.acciones{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.acciones--fin{justify-content:flex-end}

/* ---------- campos ---------- */
.campo{display:grid;gap:var(--space-2xs);min-width:0}
.campo > label,.campo__etiqueta{font-weight:600;font-size:var(--text-sm)}
.entrada{width:100%;min-height:44px;padding:var(--space-xs) var(--space-sm);border:1px solid var(--color-field);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-ink);font:inherit;font-size:var(--text-base)}
.entrada:focus-visible{outline:3px solid var(--color-focus);outline-offset:1px}
.entrada[disabled]{opacity:.65;cursor:not-allowed}
.entrada[aria-invalid="true"]{border-color:var(--color-error);border-width:2px}
select.entrada{appearance:auto}
.campo__ayuda{font-size:var(--text-xs)}
.campo__error{font-size:var(--text-sm);font-weight:500;color:var(--color-error)}
.opcion{display:flex;align-items:center;gap:var(--space-xs);min-height:44px;font-size:var(--text-sm)}
.opcion input{width:20px;height:20px;accent-color:var(--color-accent);flex:none}
.formulario > * + *{margin-top:var(--space-md)}
.formulario > .solo-lectores + *{margin-top:0}
.mensaje-form{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);border:1px solid var(--color-error);font-size:var(--text-sm);font-weight:500}
/* zona viva sin contenido: no ocupa sitio ni deja hueco entre el campo y el botón */
.formulario > .zona-mensaje:empty{margin-top:0}
.mensaje-form--aviso{border-color:var(--color-gold);background:var(--color-gold-soft)}

/* ---------- interruptor ---------- */
.interruptor{display:inline-flex;align-items:center;gap:var(--space-sm);min-height:44px;cursor:pointer}
.interruptor input{position:absolute;opacity:0;width:1px;height:1px}
.interruptor__pista{position:relative;width:46px;height:26px;border-radius:var(--radius-pill);background:var(--color-field);flex:none;transition:background-color var(--dur-fast) var(--ease-out)}
.interruptor__pista::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--color-surface);transition:transform var(--dur-fast) var(--ease-out)}
.interruptor input:checked + .interruptor__pista{background:var(--color-ok)}
.interruptor input:checked + .interruptor__pista::after{transform:translateX(20px)}
.interruptor input:focus-visible + .interruptor__pista{outline:3px solid var(--color-focus);outline-offset:2px}
.interruptor input:disabled + .interruptor__pista{opacity:.55}

/* ---------- insignias ---------- */
.insignia{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--radius-pill);border:1px solid var(--color-rule);background:var(--color-pearl);font-size:var(--text-xs);font-weight:600;line-height:1.5;max-width:100%}
.insignia::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-field);flex:none}
.insignia--ok::before{background:var(--color-ok)}
.insignia--aviso::before{background:var(--color-warn)}
.insignia--error::before{background:var(--color-error)}
.insignia--oro::before{background:var(--color-gold)}
.insignias{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}

/* ---------- estados ---------- */
.estado{display:grid;justify-items:center;gap:var(--space-sm);padding:var(--space-2xl) var(--space-lg);text-align:center;border:1px dashed var(--color-field);border-radius:var(--radius-md);background:var(--color-surface)}
.estado__titulo{font:700 var(--text-md)/1.3 var(--font-display)}
.estado__texto{max-width:40rem}
.estado--error{border-style:solid;border-color:var(--color-error)}
.estado--error .estado__titulo{color:var(--color-error)}
.estado__giro{width:32px;height:32px;border-radius:50%;border:3px solid var(--color-rule);border-top-color:var(--color-gold);animation:giro .9s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.estado__giro,.btn__giro{animation-duration:3s}*{scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* ---------- tablas ---------- */
.tabla{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.tabla th{text-align:left;font:600 var(--text-xs)/1.3 var(--font-display);padding:var(--space-sm) var(--space-md);border-bottom:2px solid var(--color-gold);white-space:nowrap}
.tabla td{padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-rule);vertical-align:top;overflow-wrap:anywhere}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla__acciones{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.tabla-caja{padding:0;overflow:hidden}
.tabla-caja .tabla th:first-child,.tabla-caja .tabla td:first-child{padding-left:var(--space-lg)}
.tabla-caja .tabla th:last-child,.tabla-caja .tabla td:last-child{padding-right:var(--space-lg)}
@media (max-width: 47.99rem){
  .tabla-caja{background:transparent;border:0;box-shadow:none;overflow:visible}
  .tabla thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
  .tabla,.tabla tbody,.tabla tr,.tabla td{display:block}
  .tabla tr{background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-sm);box-shadow:var(--shadow-card)}
  .tabla td,.tabla-caja .tabla td:first-child,.tabla-caja .tabla td:last-child{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:var(--space-sm);padding:var(--space-xs) 0;border-bottom:0}
  .tabla td::before{content:attr(data-etiqueta);font-weight:600;font-size:var(--text-xs)}
  .tabla td[data-etiqueta=""]{grid-template-columns:minmax(0,1fr)}
  .tabla td[data-etiqueta=""]::before{display:none}
}
@media (max-width: 30rem){
  .tabla td,.tabla-caja .tabla td:first-child,.tabla-caja .tabla td:last-child{grid-template-columns:minmax(0,1fr);gap:0}
}

/* ---------- paginación ---------- */
.paginacion{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-sm);margin-top:var(--space-md);font-size:var(--text-sm)}
.paginacion__enlaces{display:flex;gap:var(--space-xs)}
.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}

/* ---------- modales ---------- */
dialog.modal{width:min(34rem,calc(100vw - 2rem));max-height:min(90dvh,52rem);padding:0;border:1px solid var(--color-rule);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-modal);overflow:hidden}
dialog.modal[open]{display:flex;flex-direction:column}
dialog.modal::backdrop{background:var(--color-scrim)}
.modal__cab{padding:var(--space-lg) var(--space-lg) var(--space-sm);border-bottom:1px solid var(--color-rule)}
.modal__titulo{font-size:var(--text-md);font-weight:700}
.modal__cuerpo{flex:1 1 auto;overflow-y:auto;padding:var(--space-lg);display:grid;gap:var(--space-md);align-content:start}
.modal__pie{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-xs);padding:var(--space-md) var(--space-lg);border-top:1px solid var(--color-rule)}

/* ---------- avisos ---------- */
.avisos{position:fixed;z-index:200;right:var(--space-md);bottom:max(var(--space-md),env(safe-area-inset-bottom));display:grid;gap:var(--space-xs);width:min(26rem,calc(100vw - 2rem));pointer-events:none}
.aviso{pointer-events:auto;display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);background:var(--color-brand-teal);color:var(--color-on-side);border:1px solid var(--color-gold);box-shadow:var(--shadow-modal);font-size:var(--text-sm)}
.aviso--error{border-color:var(--color-error);background:var(--color-surface);color:var(--color-ink);border-width:2px}
.aviso--ok{border-color:var(--color-ok)}
.aviso__texto{flex:1;min-width:0;overflow-wrap:anywhere}
.aviso .btn--barra{min-width:32px;min-height:32px;color:inherit}
@media (max-width: 30rem){.avisos{right:var(--space-sm);left:var(--space-sm);width:auto}}