/*
  GlucoNexo · portal web para profesionales de la salud.

  Este sitio no es la aplicación. La aplicación vive en el teléfono de la
  persona con diabetes y ahí se queda: aquí no se anuncia, no se descarga y no
  se explica cómo instalarla. Lo que vive aquí es el acceso del profesional que
  la persona autorizó, y por eso lo primero que se ve al abrir es el formulario
  para entrar y no un folleto.

  El tono es deliberadamente más sobrio que cualquier página de producto: quien
  lee esto decide si confía datos de sus pacientes a un sistema. La confianza
  aquí se gana mostrando límites concretos —acceso temporal, revocable, con
  huella de auditoría— y no adjetivos.
*/

:root {
  --cream:#fff8f5;
  --paper:#ffffff;
  --sink:#faf6f7;
  --ink:#2b2630;
  --navy:#30203e;
  --muted:#5d5462;
  --soft:#7a7280;
  --wine:#8b3f67;
  --wine-dark:#642746;
  --wine-pale:#f8e6ef;
  --teal:#39716a;
  --teal-dark:#24544f;
  --teal-pale:#e3f1ed;
  --salmon:#f28b67;
  --amber:#a55b1b;
  --amber-pale:#fff0e4;
  --amber-line:#e6a24d;
  --error:#a83b58;
  --error-pale:#fdeef1;
  --line:#e9dde6;
  --line-strong:#d8c9d4;
  --shadow:0 22px 60px rgba(48,32,62,.10);
  --shadow-soft:0 10px 28px rgba(48,32,62,.07);
  --radius:16px;
  --radius-lg:24px;

  color-scheme:light;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.6;
  background:var(--cream);
  color:var(--ink);
}

*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); overflow-x:hidden; }
a { color:var(--wine); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:4px; }
p { margin:0 0 1em; }
img, svg { max-width:100%; }

h1, h2, h3 {
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  letter-spacing:-.04em;
  color:var(--navy);
}
h1 { font-size:clamp(2.4rem,4.4vw,3.7rem); line-height:1.06; }
h2 { font-size:clamp(1.75rem,3vw,2.5rem); line-height:1.14; }
h3 { font-size:1.3rem; line-height:1.3; }

/* El foco nunca se oculta: hay profesionales que trabajan con el teclado y
   personal de clínica que usa lectores de pantalla. */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline:3px solid var(--wine);
  outline-offset:2px;
  border-radius:8px;
}
.skip { position:absolute; left:-9999px; top:0; z-index:40; padding:14px 20px; background:var(--wine); color:#fff; font-weight:700; }
.skip:focus { left:12px; top:12px; }

.shell { width:min(1140px,calc(100% - 44px)); margin:0 auto; }

/* ---------- Encabezado ---------- */
.masthead { border-bottom:1px solid var(--line); background:var(--paper); }
.masthead-row { display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; min-height:74px; padding:12px 0; }
.brand { display:inline-flex; align-items:center; gap:11px; font-family:Georgia,"Times New Roman",serif; font-size:1.5rem; letter-spacing:-.045em; color:var(--navy); }
.brand:hover { text-decoration:none; }
.brand img { width:36px; height:36px; border-radius:11px; }
.brand-tag { padding:4px 10px; border:1px solid var(--line-strong); border-radius:999px; color:var(--teal-dark); font-family:inherit; font-size:.82rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }
.masthead nav { display:flex; flex-wrap:wrap; gap:4px 22px; margin-right:auto; }
.masthead nav a { display:inline-flex; align-items:center; min-height:48px; color:#4d4251; font-size:1rem; font-weight:700; }

/* ---------- Botones y campos ---------- */
.button {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 24px;
  border:2px solid currentColor; border-radius:12px;
  font-size:1rem; font-weight:800; cursor:pointer;
  font-family:inherit;
  transition:background .18s ease, transform .18s ease, border-color .18s ease;
}
.button.primary { background:var(--teal); color:#fff; border-color:var(--teal); }
.button.primary:hover:not(:disabled) { background:var(--teal-dark); border-color:var(--teal-dark); transform:translateY(-1px); text-decoration:none; }
.button.ghost { background:var(--paper); color:var(--wine); }
.button.ghost:hover:not(:disabled) { background:var(--wine-pale); transform:translateY(-1px); text-decoration:none; }
.button.quiet { min-height:46px; padding:0 16px; border-width:1px; border-color:var(--line-strong); background:var(--paper); color:var(--teal-dark); font-size:.96rem; }
.button.quiet:hover:not(:disabled) { background:var(--teal-pale); text-decoration:none; }
.button:disabled { opacity:.55; cursor:not-allowed; }
.button.block { width:100%; }

.field { display:grid; gap:7px; margin-bottom:16px; }
.field label { font-size:.98rem; font-weight:700; color:var(--navy); }
.field input {
  min-height:54px; padding:0 15px;
  border:2px solid var(--line-strong); border-radius:12px;
  background:var(--paper); color:var(--ink);
  font-family:inherit; font-size:1.05rem;
}
.field input:focus { border-color:var(--teal); }
.field .hint { color:var(--soft); font-size:.94rem; }

/* ---------- Avisos ---------- */
.banner { display:flex; gap:12px; align-items:flex-start; padding:15px 18px; border:1px solid var(--line); border-radius:var(--radius); font-size:1rem; line-height:1.5; }
.banner svg { flex:0 0 auto; margin-top:.15em; }
.banner.info { background:var(--teal-pale); border-color:#a8cfc3; color:#2d4a46; }
.banner.warn { background:var(--amber-pale); border-color:var(--amber-line); color:#5a4032; }
.banner.error { background:var(--error-pale); border-color:#e3a9b7; color:#7a2a40; }
.banner b { color:var(--navy); }

svg.i { flex:0 0 auto; width:1.5em; height:1.5em; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; fill:none; }

/* ---------- Portada con acceso ---------- */
.entry { display:grid; grid-template-columns:minmax(0,1.06fr) minmax(360px,.94fr); gap:56px; align-items:start; padding:64px 0 78px; }
.entry-copy .eyebrow { display:inline-flex; align-items:center; gap:9px; margin-bottom:20px; padding:7px 14px; border:1px solid var(--line-strong); border-radius:999px; background:var(--paper); color:var(--teal-dark); font-size:.95rem; font-weight:800; }
.entry-copy .lead { max-width:31em; margin:22px 0 30px; color:var(--muted); font-size:1.13rem; line-height:1.62; }
.accent { width:44px; height:5px; margin-bottom:22px; border-radius:999px; background:var(--salmon); }

.assurances { display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.assurances li { display:grid; grid-template-columns:1.6em 1fr; gap:12px; align-items:start; color:var(--muted); font-size:1.02rem; line-height:1.5; }
.assurances li svg { color:var(--teal); margin-top:.12em; }
.assurances b { display:block; color:var(--navy); }

.access-card { padding:32px 30px 30px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper); box-shadow:var(--shadow); }
.access-card h2 { font-size:1.7rem; margin-bottom:6px; }
.access-card .sub { margin:0 0 22px; color:var(--muted); font-size:1rem; }
.access-foot { margin:20px 0 0; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:.98rem; }
.access-foot a { font-weight:700; }

/* Alternar entre entrar y registrar sin salir de la tarjeta. */
.tabs { display:flex; gap:6px; margin-bottom:24px; padding:5px; border:1px solid var(--line); border-radius:12px; background:var(--sink); }
.tabs button { flex:1; min-height:46px; border:0; border-radius:9px; background:transparent; color:var(--muted); font-family:inherit; font-size:1rem; font-weight:800; cursor:pointer; }
.tabs button[aria-selected="true"] { background:var(--paper); color:var(--navy); box-shadow:var(--shadow-soft); }

/* ---------- Secciones ---------- */
section { border-top:1px solid var(--line); }
.band { padding:78px 0; }
.band.paper { background:var(--paper); }
.band.tint { background:var(--sink); }
.section-head { max-width:44rem; margin-bottom:44px; }
.section-head .lede { color:var(--muted); font-size:1.08rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:24px; }
.card { display:grid; gap:11px; align-content:start; padding:28px 26px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper); box-shadow:var(--shadow-soft); }
.card.flat { box-shadow:none; background:transparent; }
.card p { margin:0; color:var(--muted); font-size:1.01rem; }
.card-head { display:flex; align-items:center; gap:11px; color:var(--teal-dark); }

.flow { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; padding:0; margin:0; list-style:none; counter-reset:paso; }
.flow li { display:grid; gap:11px; align-content:start; padding:26px 24px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper); }
.flow li::before { counter-increment:paso; content:counter(paso); display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--teal); color:#fff; font-weight:800; }
.flow h3 { font-size:1.2rem; }
.flow p { margin:0; color:var(--muted); font-size:1rem; }

.duo { display:grid; grid-template-columns:1.04fr .96fr; gap:52px; align-items:center; }
.figure { overflow:hidden; border-radius:var(--radius-lg); box-shadow:var(--shadow); background:var(--teal-pale); }
.figure img { display:block; width:100%; height:100%; object-fit:cover; }

.limits { border:2px solid var(--error); border-radius:var(--radius-lg); padding:30px 28px; background:var(--paper); }
.limits h3 { color:var(--error); }
.limits ul { display:grid; gap:13px; margin:18px 0 0; padding:0; list-style:none; }
.limits li { display:grid; grid-template-columns:1.6em 1fr; gap:11px; align-items:start; font-size:1.01rem; line-height:1.5; color:var(--muted); }
.limits li svg { color:var(--error); margin-top:.12em; }
.limits b { color:var(--navy); }

footer { border-top:1px solid var(--line); background:var(--paper); padding:38px 0 46px; color:var(--muted); font-size:.98rem; }
.footer-row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; align-items:center; }
.footer-note { max-width:52em; margin:20px 0 0; font-size:.96rem; line-height:1.6; }

/* ---------- Panel del profesional ---------- */
.panel-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:32px 0 26px; }
.who { display:grid; gap:2px; }
.who b { color:var(--navy); font-size:1.12rem; }
.who span { color:var(--soft); font-size:.98rem; }

.stack { display:grid; gap:18px; }
.patient { display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; padding:24px 26px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper); box-shadow:var(--shadow-soft); }
.patient-name { color:var(--navy); font-size:1.22rem; font-weight:700; }
.patient-meta { color:var(--soft); font-size:.98rem; }
.reading { text-align:right; }
.reading .value { font-size:2.3rem; font-weight:800; line-height:1.05; color:var(--navy); font-variant-numeric:tabular-nums; }
.reading .unit { color:var(--soft); font-size:.98rem; }
.no-reading { color:var(--muted); font-size:1rem; max-width:22em; }

.alert-card { padding:26px; border:2px solid var(--error); border-radius:var(--radius-lg); background:var(--paper); box-shadow:var(--shadow); }
.alert-card .who-alert { color:var(--error); font-size:1.35rem; font-weight:800; }
.alert-card .why { margin:8px 0 0; color:var(--muted); }
.alert-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }

.table { width:100%; border-collapse:collapse; background:var(--paper); }
.table caption { text-align:left; padding:0 0 12px; color:var(--muted); font-size:.98rem; }
.table th, .table td { padding:14px 16px; border-bottom:1px solid var(--line); text-align:left; font-size:1.01rem; }
.table th { color:var(--soft); font-size:.94rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.table td.num { font-variant-numeric:tabular-nums; font-weight:700; color:var(--navy); }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); }

.empty { padding:40px 30px; border:1px dashed var(--line-strong); border-radius:var(--radius-lg); background:var(--paper); color:var(--muted); text-align:center; }
.empty b { display:block; margin-bottom:6px; color:var(--navy); font-size:1.1rem; }

[hidden] { display:none !important; }

@media (max-width:940px) {
  .entry, .duo { grid-template-columns:1fr; }
  .entry { gap:36px; padding-top:40px; }
  .access-card { order:-1; }
}
@media (max-width:560px) {
  :root { font-size:16px; }
  .shell { width:calc(100% - 30px); }
  .band { padding:56px 0; }
  .access-card { padding:26px 22px 24px; }
  .patient { grid-template-columns:1fr; }
  .reading { text-align:left; }
  .button { width:100%; }
  .button.quiet { width:auto; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .button, .tabs button { transition:none; }
}

/* ---------- Secciones y formularios del panel ---------- */
.bare { border:0; margin-bottom:38px; }
.section-title { margin-bottom:18px; font-size:1.6rem; }

/*
  Formularios del profesional.

  Están pensados para alguien que teclea entre paciente y paciente: campos
  anchos, etiquetas visibles siempre —nunca un marcador de posición haciendo de
  etiqueta, que desaparece justo cuando hace falta comprobar qué se escribió—,
  y lo opcional marcado como opcional para que nadie se detenga a adivinar si
  puede saltárselo.
*/
.form-card { padding:30px 28px; margin-bottom:34px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper); box-shadow:var(--shadow); }
.form-card h3 { margin-bottom:8px; }
.form-note { margin:0 0 22px; color:var(--muted); font-size:1rem; line-height:1.55; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:0 22px; }
.field .opt { color:var(--soft); font-weight:600; }
.field textarea, .field select {
  padding:12px 15px; min-height:54px;
  border:2px solid var(--line-strong); border-radius:12px;
  background:var(--paper); color:var(--ink);
  font-family:inherit; font-size:1.05rem; line-height:1.5;
  resize:vertical;
}
.field textarea:focus, .field select:focus { border-color:var(--teal); }
/* El campo que la API señaló se marca en rojo y con su motivo debajo: decir
   sólo «revisa los datos» obliga a buscar el error a ojo. */
.field.wrong input, .field.wrong textarea { border-color:var(--error); }
.field .wrong-why { color:var(--error); font-size:.96rem; font-weight:700; }
.form-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }

.meds { margin:8px 0 4px; padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--sink); }
.meds legend { padding:0 8px; color:var(--navy); font-size:1.12rem; font-weight:800; }
.med-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) auto; gap:0 14px; align-items:end; padding-bottom:6px; }
.med-row .drop { min-height:54px; margin-bottom:16px; padding:0 14px; border:1px solid var(--line-strong); border-radius:12px; background:var(--paper); color:var(--error); font-family:inherit; font-size:.96rem; font-weight:800; cursor:pointer; }
.med-row .drop:hover { background:var(--error-pale); }

.confirm { display:grid; grid-template-columns:30px 1fr; gap:13px; align-items:start; margin-top:20px; padding:16px 18px; border:2px solid var(--line-strong); border-radius:12px; background:var(--sink); font-size:1.01rem; line-height:1.5; cursor:pointer; }
.confirm input { width:26px; height:26px; margin:0; accent-color:var(--teal); }

/* ---------- Citas e historial ---------- */
.appointment { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; padding:22px 24px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper); box-shadow:var(--shadow-soft); }
.appointment.past { opacity:.72; }
.appointment .when { color:var(--navy); font-size:1.14rem; font-weight:700; }
.appointment .what { color:var(--muted); font-size:1rem; }
.tag { display:inline-flex; align-items:center; padding:4px 11px; border-radius:999px; font-size:.9rem; font-weight:800; }
.tag.scheduled { background:var(--teal-pale); color:var(--teal-dark); }
.tag.completed { background:var(--sink); color:var(--soft); }
.tag.cancelled { background:var(--error-pale); color:var(--error); }

.record { padding:24px 26px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper); box-shadow:var(--shadow-soft); }
.record-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:baseline; margin-bottom:12px; }
.record-top b { color:var(--navy); font-size:1.16rem; }
.record-top span { color:var(--soft); font-size:.98rem; }
.record dl { display:grid; gap:14px; margin:0; }
.record dt { color:var(--soft); font-size:.94rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.record dd { margin:4px 0 0; color:var(--ink); font-size:1.03rem; line-height:1.55; white-space:pre-wrap; }
/* Cada medicamento en su renglón grande: es lo que después lee la persona. */
.med-item { display:grid; gap:2px; padding:12px 14px; margin-top:8px; border-left:4px solid var(--teal); border-radius:0 10px 10px 0; background:var(--teal-pale); }
.med-item b { color:var(--navy); font-size:1.08rem; }
.med-item span { color:#3d5f5a; font-size:1rem; }
.record .amended { margin-top:16px; padding:12px 14px; border-radius:10px; background:var(--amber-pale); border:1px solid var(--amber-line); color:#5a4032; font-size:.99rem; }
.record .is-correction { margin-bottom:12px; color:var(--amber); font-size:.98rem; font-weight:800; }

@media (max-width:560px) {
  .med-row { grid-template-columns:1fr; }
  .appointment { grid-template-columns:1fr; }
  .form-card { padding:24px 20px; }
}