/* =========================================================================
   HonduSalud · Hoja base de la nueva interfaz
   Paleta "clínica fresca" (ver claude/propuesta_paleta.md en el proyecto).
   Móvil primero: todo funciona desde 320px y escala a tablet y PC.
   ========================================================================= */

:root {
  /* Marca */
  --hs-turquesa: #179DBA;
  --hs-crema: #F1EADE;
  --hs-tinta: #0F2E38;
  --hs-menta: #2FB68F;

  /* Escala turquesa */
  --hs-50: #E4F4F8;
  --hs-100: #C4E7F0;
  --hs-300: #6FC4DA;
  --hs-500: #179DBA;
  --hs-700: #0F7E97;
  --hs-800: #0B6479;
  --hs-900: #083F4C;

  /* Interfaz */
  --hs-fondo: #F5F8F8;
  --hs-superficie: #FFFFFF;
  --hs-borde: #DCE6E8;
  --hs-texto: #0F2E38;
  --hs-texto-2: #5A7079;
  --hs-primario: #0F7E97;
  --hs-primario-hover: #0B6479;
  --hs-primario-suave: #E4F4F8;
  --hs-sobre-primario: #FFFFFF;
  --hs-foco: #6FC4DA;

  /* Estados */
  --hs-exito: #18805A;   --hs-exito-suave: #E3F5EE;
  --hs-aviso: #B26B00;   --hs-aviso-suave: #FFF3DC;
  --hs-peligro: #D2443B; --hs-peligro-suave: #FDECEA;

  /* Tipografía */
  --hs-f-titulos: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --hs-f-texto: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --hs-f-datos: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* Forma */
  --hs-radio: 10px;
  --hs-radio-lg: 16px;
  --hs-sombra: 0 1px 2px rgba(15, 46, 56, .06), 0 8px 24px rgba(15, 46, 56, .08);
  --hs-toque: 48px; /* alto mínimo de controles táctiles */
}

/* Modo oscuro: sigue al sistema del equipo, o se fuerza con data-tema */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --hs-fondo: #0B1E24;
    --hs-superficie: #12303A;
    --hs-borde: #1F4450;
    --hs-texto: #E6F0F2;
    --hs-texto-2: #9FB3B9;
    --hs-primario: #3CC0DC;
    --hs-primario-hover: #6FD0E6;
    --hs-primario-suave: #123C48;
    --hs-sobre-primario: #0B1E24;
    --hs-exito: #2FB68F;   --hs-exito-suave: #123B33;
    --hs-aviso: #F2B75E;   --hs-aviso-suave: #3A2E17;
    --hs-peligro: #F07A6E; --hs-peligro-suave: #3D1F1D;
    --hs-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
  }
}
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --hs-fondo: #0B1E24;
  --hs-superficie: #12303A;
  --hs-borde: #1F4450;
  --hs-texto: #E6F0F2;
  --hs-texto-2: #9FB3B9;
  --hs-primario: #3CC0DC;
  --hs-primario-hover: #6FD0E6;
  --hs-primario-suave: #123C48;
  --hs-sobre-primario: #0B1E24;
  --hs-exito: #2FB68F;   --hs-exito-suave: #123B33;
  --hs-aviso: #F2B75E;   --hs-aviso-suave: #3A2E17;
  --hs-peligro: #F07A6E; --hs-peligro-suave: #3D1F1D;
  --hs-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
}

/* ---------- Base ---------- */
.hs [hidden] { display: none !important; }
.hs *, .hs *::before, .hs *::after { box-sizing: border-box; }
html.hs, .hs body { margin: 0; }
.hs body {
  background: var(--hs-fondo);
  color: var(--hs-texto);
  font-family: var(--hs-f-texto);
  font-size: 16px;               /* 16px evita el zoom automático de iOS en inputs */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
.hs h1, .hs h2, .hs h3 { font-family: var(--hs-f-titulos); line-height: 1.15; margin: 0; text-wrap: balance; }
.hs p { margin: 0; }
.hs a { color: var(--hs-primario); }
.hs a:hover { color: var(--hs-primario-hover); }
.hs img { max-width: 100%; }
.hs :focus-visible { outline: 3px solid var(--hs-foco); outline-offset: 2px; }

/* ---------- Marca ---------- */
.hs-marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.hs-marca img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.hs-marca .hs-marca-texto { display: flex; flex-direction: column; line-height: 1; }
.hs-marca b { font: 900 1.45rem/1 var(--hs-f-titulos); color: var(--hs-texto); letter-spacing: -.01em; }
.hs-marca small { font: 800 .62rem/1 var(--hs-f-titulos); letter-spacing: .42em; color: var(--hs-turquesa); margin-top: 4px; padding-left: 2px; }
.hs-marca.hs-marca-clara b { color: var(--hs-crema); }

/* ---------- Formularios ---------- */
.hs-campo { display: flex; flex-direction: column; gap: 6px; }
.hs-campo label { font-size: .88rem; font-weight: 600; }
.hs-control {
  position: relative; display: flex; align-items: center;
}
.hs-control > svg {
  position: absolute; left: 14px; width: 20px; height: 20px; color: var(--hs-texto-2); pointer-events: none;
}
.hs-input {
  width: 100%; min-height: var(--hs-toque);
  font: inherit; font-size: 1rem; color: var(--hs-texto);
  background: var(--hs-superficie);
  border: 1.5px solid var(--hs-borde); border-radius: var(--hs-radio);
  padding: 12px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.hs-control > svg + .hs-input { padding-left: 44px; }
.hs-input::placeholder { color: var(--hs-texto-2); opacity: .8; }
.hs-input:focus { outline: none; border-color: var(--hs-primario); box-shadow: 0 0 0 4px var(--hs-primario-suave); }
.hs-input[aria-invalid="true"] { border-color: var(--hs-peligro); }
.hs-ojo {
  position: absolute; right: 6px; width: 40px; height: 40px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 8px; color: var(--hs-texto-2); cursor: pointer;
}
.hs-ojo:hover { color: var(--hs-texto); background: var(--hs-primario-suave); }
.hs-ojo svg { width: 20px; height: 20px; }
.hs-control .hs-input.con-ojo { padding-right: 50px; }

.hs-check { display: inline-flex; align-items: center; gap: 10px; font-size: .92rem; cursor: pointer; min-height: 40px; }
.hs-check input { width: 20px; height: 20px; accent-color: var(--hs-primario); margin: 0; }

/* ---------- Botones ---------- */
.hs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--hs-toque); padding: 12px 20px;
  font: 700 1rem var(--hs-f-texto); text-decoration: none;
  border-radius: var(--hs-radio); border: 1.5px solid transparent; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .05s;
}
.hs-btn:active { transform: translateY(1px); }
.hs-btn svg { width: 20px; height: 20px; }
.hs .hs-btn-primario { background: var(--hs-primario); color: var(--hs-sobre-primario); }
.hs .hs-btn-primario:hover { background: var(--hs-primario-hover); color: var(--hs-sobre-primario); }
.hs .hs-btn-secundario { background: var(--hs-superficie); color: var(--hs-primario); border-color: var(--hs-borde); }
.hs .hs-btn-secundario:hover { border-color: var(--hs-primario); color: var(--hs-primario-hover); }
.hs-btn-bloque { width: 100%; }
.hs-btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Alertas ---------- */
.hs-alerta {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--hs-radio);
  font-size: .93rem; line-height: 1.45;
}
.hs-alerta svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.hs-alerta-peligro { background: var(--hs-peligro-suave); color: var(--hs-peligro); }
.hs-alerta-aviso { background: var(--hs-aviso-suave); color: var(--hs-aviso); }
.hs-alerta-exito { background: var(--hs-exito-suave); color: var(--hs-exito); }
.hs-alerta strong { font-weight: 700; }
.hs-alerta a { color: inherit; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .hs *, .hs *::before, .hs *::after { transition: none !important; animation: none !important; }
}