/* Punto Medig · sistema visual compartido (sitio, app del paciente y panel interno).
   Concepto: tinta azul marino del logo + oro del estetoscopio; superficies clínicas con un leve tinte azul.
   El trazo de electrocardiograma (.ecg) es el detalle propio de la marca: se usa poco y en dorado.
   Tipografías: Bricolage Grotesque (titulares), Atkinson Hyperlegible (texto: pensada para baja visión,
   útil para pacientes mayores o diabéticos) e IBM Plex Mono (códigos de cita, horas, cifras). */

:root {
  /* Marca */
  --azul: #1d3f72;          /* tinta principal: «Medig» del logo */
  --azul-hondo: #132c52;
  --azul-suave: #e6eef9;
  --oro: #d4a514;           /* estetoscopio dorado del logo */
  --oro-texto: #8a6a00;     /* oro legible sobre fondo claro */
  --oro-suave: #fbf3d6;
  --celeste: #2f9cc0;       /* franja celeste de la portada de Facebook */
  --celeste-suave: #e3f3f9;

  /* Neutros con tinte azul */
  --fondo: #f5f7fb;
  --superficie: #ffffff;
  --superficie-2: #eef2f8;
  --linea: #d9e1ec;
  --tinta: #12233b;
  --tinta-2: #3d4f68;
  --tenue: #5f7089;

  /* Estados (no son acentos) */
  --ok: #17804f;      --ok-suave: #e3f4ea;
  --aviso: #b56a00;   --aviso-suave: #fdf0dc;
  --grave: #b8392a;   --grave-suave: #fbe7e4;
  --info: #2a5ea8;    --info-suave: #e5eefb;
  --neutro: #66758a;  --neutro-suave: #edf0f4;

  --whatsapp: #128c4a;

  /* Tipografía */
  --f-titulo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-dato: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --t-xs: 0.78rem; --t-sm: 0.875rem; --t-md: 1rem; --t-lg: 1.15rem;
  --t-xl: 1.4rem;  --t-2xl: 1.9rem;  --t-3xl: clamp(2.1rem, 4.6vw, 3.4rem);

  /* Forma */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --sombra-1: 0 1px 2px rgb(18 35 59 / 0.06), 0 1px 1px rgb(18 35 59 / 0.04);
  --sombra-2: 0 10px 30px -12px rgb(18 35 59 / 0.22);
  --foco: 0 0 0 3px rgb(212 165 20 / 0.55);
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-d: max(16px, env(safe-area-inset-right, 0px));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --azul: #8fb3ee; --azul-hondo: #c9dbf7; --azul-suave: #1a2c4a;
    --oro: #e7c04a; --oro-texto: #f0cf62; --oro-suave: #2e2710;
    --celeste: #5cc0e0; --celeste-suave: #12303b;
    --fondo: #0c1524; --superficie: #131f33; --superficie-2: #1a2840; --linea: #263752;
    --tinta: #e7edf6; --tinta-2: #c0cbdb; --tenue: #93a3ba;
    --ok: #4cc58a; --ok-suave: #12301f; --aviso: #f0a73a; --aviso-suave: #33240c;
    --grave: #f07a68; --grave-suave: #3a1712; --info: #7fa8ea; --info-suave: #16284a;
    --neutro: #9aa7b8; --neutro-suave: #1d2838; --whatsapp: #15914e;
    --sombra-1: 0 1px 2px rgb(0 0 0 / 0.4); --sombra-2: 0 14px 34px -14px rgb(0 0 0 / 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --azul: #8fb3ee; --azul-hondo: #c9dbf7; --azul-suave: #1a2c4a;
  --oro: #e7c04a; --oro-texto: #f0cf62; --oro-suave: #2e2710;
  --celeste: #5cc0e0; --celeste-suave: #12303b;
  --fondo: #0c1524; --superficie: #131f33; --superficie-2: #1a2840; --linea: #263752;
  --tinta: #e7edf6; --tinta-2: #c0cbdb; --tenue: #93a3ba;
  --ok: #4cc58a; --ok-suave: #12301f; --aviso: #f0a73a; --aviso-suave: #33240c;
  --grave: #f07a68; --grave-suave: #3a1712; --info: #7fa8ea; --info-suave: #16284a;
  --neutro: #9aa7b8; --neutro-suave: #1d2838; --whatsapp: #15914e;
  --sombra-1: 0 1px 2px rgb(0 0 0 / 0.4); --sombra-2: 0 14px 34px -14px rgb(0 0 0 / 0.7);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-md);
  line-height: 1.55;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--f-titulo); line-height: 1.15; margin: 0; text-wrap: balance; color: var(--tinta); }
h1 { font-size: var(--t-3xl); font-weight: 750; letter-spacing: -0.02em; }
h2 { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: var(--t-lg); font-weight: 650; }
p { margin: 0; }
a { color: var(--azul); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--r-sm); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dato, .codigo { font-family: var(--f-dato); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.etiqueta {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tenue);
}
.tenue { color: var(--tenue); }
.contenedor { width: 100%; max-width: 1180px; margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-d); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 44px; padding: 0.55em 1.1em; border-radius: var(--r-pill);
  border: 1.5px solid transparent; background: var(--superficie-2); color: var(--tinta);
  font-weight: 700; font-size: var(--t-sm); text-decoration: none; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.btn:hover { border-color: var(--linea); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn-primario { background: var(--azul); color: var(--superficie); }
.btn-primario:hover { background: var(--azul-hondo); border-color: transparent; }
.btn-oro { background: var(--oro); color: #1b1503; }
.btn-oro:hover { filter: brightness(1.05); border-color: transparent; }
.btn-whatsapp { background: var(--whatsapp); color: #fff; }
.btn-fantasma { background: transparent; border-color: var(--linea); }
.btn-fantasma:hover { background: var(--superficie-2); }
.btn-peligro { background: var(--grave-suave); color: var(--grave); }
.btn-sm { min-height: 34px; padding: 0.35em 0.8em; font-size: var(--t-xs); }
.btn-icono { width: 40px; min-height: 40px; padding: 0; border-radius: var(--r-pill); }

/* ---------- Chips de estado ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.4em; padding: 0.2em 0.65em; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 700; line-height: 1.5; white-space: nowrap;
  background: var(--neutro-suave); color: var(--neutro);
}
.chip::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; flex: none; }
.chip.sin-punto::before { display: none; }
.chip-ok { background: var(--ok-suave); color: var(--ok); }
.chip-aviso { background: var(--aviso-suave); color: var(--aviso); }
.chip-grave { background: var(--grave-suave); color: var(--grave); }
.chip-info { background: var(--info-suave); color: var(--info); }
.chip-oro { background: var(--oro-suave); color: var(--oro-texto); }

/* ---------- Formularios ---------- */
.campo { display: grid; gap: 0.35rem; min-width: 0; }
.campo > label, .campo > .etiqueta-campo { font-weight: 700; font-size: var(--t-sm); color: var(--tinta-2); }
.campo .ayuda { font-size: var(--t-xs); color: var(--tenue); }
.entrada, .campo input:not([type="checkbox"]):not([type="radio"]), .campo select, .campo textarea {
  width: 100%; min-height: 46px; padding: 0.6em 0.85em; border-radius: var(--r-md);
  border: 1.5px solid var(--linea); background: var(--superficie); color: var(--tinta);
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .entrada:focus { outline: none; border-color: var(--oro); box-shadow: var(--foco); }
.campo .error { color: var(--grave); font-size: var(--t-xs); font-weight: 700; }
.casilla { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--t-sm); color: var(--tinta-2); }
.casilla input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--azul); flex: none; }

/* ---------- Superficies ---------- */
.tarjeta {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-lg);
  padding: 1.25rem; min-width: 0;
}
.tarjeta-elevada { box-shadow: var(--sombra-2); border-color: transparent; }
.separador { height: 1px; background: var(--linea); border: 0; margin: 0; }

/* Cifra destacada (KPI) */
.kpi { display: grid; gap: 0.2rem; min-width: 0; }
.kpi .valor { font-family: var(--f-titulo); font-size: var(--t-2xl); font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi .meta { font-size: var(--t-xs); color: var(--tenue); }

/* Tablas */
.tabla-caja { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--r-lg); background: var(--superficie); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabla th { text-align: left; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--tenue); font-weight: 700; padding: 0.7rem 0.9rem; background: var(--superficie-2); white-space: nowrap; }
.tabla td { padding: 0.7rem 0.9rem; border-top: 1px solid var(--linea); vertical-align: middle; }
.tabla tr:hover td { background: color-mix(in srgb, var(--azul-suave) 45%, transparent); }
.tabla .num { text-align: right; font-family: var(--f-dato); font-variant-numeric: tabular-nums; }

/* Pestañas */
.pestanas { display: flex; gap: 0.25rem; flex-wrap: wrap; border-bottom: 1px solid var(--linea); }
.pestanas button {
  border: 0; background: none; padding: 0.7rem 0.9rem; font-weight: 700; color: var(--tenue); cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -1px; font-size: var(--t-sm);
}
.pestanas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--oro); }

/* Aviso flotante */
.toasts { position: fixed; z-index: 90; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 0.5rem; width: min(420px, calc(100% - 32px)); }
.toast { background: var(--tinta); color: var(--fondo); padding: 0.8rem 1rem; border-radius: var(--r-md); box-shadow: var(--sombra-2); font-weight: 700; font-size: var(--t-sm); animation: entra 0.2s ease-out; }
@keyframes entra { from { transform: translateY(8px); opacity: 0.4; } to { transform: none; opacity: 1; } }

/* Ventana modal (usar <dialog class="modal">) */
dialog.modal {
  border: 0; border-radius: var(--r-lg); padding: 0; width: min(560px, calc(100% - 24px)); max-height: calc(100% - 40px);
  background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-2);
}
dialog.modal::backdrop { background: rgb(8 16 30 / 0.55); }
dialog.modal .modal-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--linea); }
dialog.modal .modal-cuerpo { padding: 1.25rem; display: grid; gap: 1rem; }
dialog.modal .modal-pie { padding: 1rem 1.25rem; border-top: 1px solid var(--linea); display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }

/* Cinta de demostración (visible en toda página de la demo) */
.cinta-demo {
  background: repeating-linear-gradient(135deg, var(--oro-suave) 0 14px, color-mix(in srgb, var(--oro-suave) 70%, var(--oro)) 14px 16px);
  color: var(--oro-texto); font-size: var(--t-xs); font-weight: 700; text-align: center;
  padding-block: 0.45rem; padding-left: var(--gutter); padding-right: var(--gutter-d);
}
.cinta-demo button { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; font-weight: 700; font-size: inherit; padding: 0 0.25em; }

/* Marca */
.marca { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--azul); }
.marca img, .marca svg { width: 40px; height: 40px; flex: none; }
.marca .nombre { font-family: var(--f-titulo); font-weight: 750; font-size: 1.3rem; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
.marca .nombre b { color: var(--azul); font-weight: 800; }
.marca .nombre span { color: var(--celeste); }
.marca small { display: block; font-family: var(--f-texto); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tenue); margin-top: 3px; }

/* Trazo de electrocardiograma: <svg class="ecg" viewBox="0 0 600 40" preserveAspectRatio="none"><path d="..."/></svg> */
.ecg { display: block; width: 100%; height: 40px; }
.ecg path { fill: none; stroke: var(--oro); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  .ecg.anima path { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: latido 2.4s ease-out 0.2s forwards; }
}
@keyframes latido { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}