/* ============ Señal: blanco, negro y el rojo de la etiqueta ============
   La identidad sale del producto: la etiqueta es roja y blanca, el casco es negro. Nada de vidrio ni brillos:
   hojas blancas con línea fina, tinta negra y el rojo de la etiqueta para la marca y para lo urgente
   (no le quites el casco, 911, alergias). El verde de WhatsApp, solo para WhatsApp.
   Aquí la letra es la del sistema: la página del chip tiene que abrir con mala señal. La portada, el panel
   y el admin cargan además letra.css (Bebas Neue para títulos y Google Sans para texto, guardadas en el sitio). */
:root {
  --fondo: #ffffff;
  --hoja: #ffffff;
  --texto: #111111;
  --suave: #555555;
  --tenue: #8a8a8a;
  --linea: #e7e7e7;
  --linea-fuerte: #cccccc;
  --acento: #111111;
  --acento-osc: #000000;
  --acento-suave: #f2f2f2;
  --gris-claro: #f3f3f3;
  --rojo: #e60012;
  --rojo-suave: #fdeced;
  --rojo-osc: #b0000e;
  --verde: #1b8a4c;
  --verde-osc: #157140;
  --ok: #1d7a4b;
  --sombra: 0 1px 2px rgba(0, 0, 0, .04);
  --radio: 16px;
  --radio-t: 12px;
  --letra: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
  --titulo: var(--letra);
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
/* Lo que se esconde con hidden se esconde aunque su clase diga display: flex (botones, casillas) */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--fondo); color: var(--texto);
  font: 16px/1.5 var(--letra); -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.12; }
h1, h2 { font-family: var(--titulo); }
h1 { font-size: 30px; font-weight: 700; letter-spacing: -.022em; }
h2 { font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
h3 { font-size: 16px; font-weight: 600; margin-top: 1.1em; }
p { margin: 0 0 .8em; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.nota { color: var(--suave); font-size: 14px; }
.mono { font-family: var(--mono); font-size: .86em; letter-spacing: 0; word-break: break-all; }
.etiqueta { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }

/* ---------- La hoja: blanca, con una línea fina ---------- */
.vidrio, .sello, .bloque, fieldset, .quien, .avisar, .resultado, .numeros > div, .lista-nfc li, table, body.simple > main.caja {
  background: var(--hoja); border: 1px solid var(--linea); box-shadow: var(--sombra);
}

/* ---------- Íconos: un trazo, coloreados con el texto ---------- */
.i-tel { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 3.5h2.6l1.9 4.6-2.3 1.5a11.5 11.5 0 0 0 5.6 5.6l1.5-2.3 4.6 1.9v2.6a2.1 2.1 0 0 1-2.3 2.1A16.3 16.3 0 0 1 4.5 5.8a2.1 2.1 0 0 1 2.1-2.3z' fill='black'/></svg>"); }
.i-avisar { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.5a6.5 6.5 0 0 0-6.5 6.5v4.2L3.8 16.6h16.4l-1.7-3.4V9A6.5 6.5 0 0 0 12 2.5zM9.3 18.6a2.8 2.8 0 0 0 5.4 0z' fill='black'/></svg>"); }
.i-wa { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.8a9.2 9.2 0 0 0-7.9 13.9L2.8 21.2l4.6-1.2A9.2 9.2 0 1 0 12 2.8z' fill='black'/></svg>"); }
.i-mapa { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'><path d='M12 21.5s-7-6.6-7-11.8a7 7 0 1 1 14 0c0 5.2-7 11.8-7 11.8z'/><circle cx='12' cy='9.6' r='2.5'/></svg>"); }
.i-navegar { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3.5 10.5 20 4l-6.5 16.5-2.2-7.3-7.8-2.7z' fill='black'/></svg>"); }
.i-sangre { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z' fill='black'/></svg>"); }
.i-alergia { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5 2.5 20h19z'/><path d='M12 10v4.2M12 17.2v.1'/></svg>"); }
.i-condicion { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 12h4.2l2.2-5 3.6 10 2.4-5h6.6'/></svg>"); }
.i-medicina { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><rect x='2.8' y='8.3' width='18.4' height='7.4' rx='3.7' transform='rotate(-45 12 12)'/><path d='m9.2 9.2 5.6 5.6'/></svg>"); }
.i-notas { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h8.5L19 7.5V21H6z'/><path d='M9 12h6M9 16h4'/></svg>"); }
.i-donador { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 20.5s-8.2-5-8.2-11a4.6 4.6 0 0 1 8.2-2.9 4.6 4.6 0 0 1 8.2 2.9c0 6-8.2 11-8.2 11z' fill='black'/></svg>"); }
.i-hospital { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><rect x='3.5' y='3.5' width='17' height='17' rx='4.5'/><path d='M12 8v8M8 12h8'/></svg>"); }
.i-gente { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='7.5' r='4' fill='black'/><path d='M4 21a8 8 0 0 1 16 0z' fill='black'/></svg>"); }
.i-seguro { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5z' fill='black'/></svg>"); }
.i-info { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5.5M12 7.6v.1'/></svg>"); }
.i-reloj { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>"); }
.i-camino { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h14M13 6l6 6-6 6'/></svg>"); }
.i-lista { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6h11M9 12h11M9 18h11M3.5 6l1 1 2-2M3.5 12l1 1 2-2M3.5 18l1 1 2-2'/></svg>"); }
.i-bolsa { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'><path d='M4 8h16l-1.3 12.5H5.3z'/><path d='M8.5 10V6.5a3.5 3.5 0 0 1 7 0V10'/></svg>"); }
.i-chip { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M6 8.5a5 5 0 0 1 0 7M10 5.5a9.5 9.5 0 0 1 0 13M14 2.8a13.5 13.5 0 0 1 0 18.4'/></svg>"); }
.i-persona { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><circle cx='12' cy='8' r='4'/><path d='M4.5 21a7.5 7.5 0 0 1 15 0'/></svg>"); }
.i-camara { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'><path d='M3 8h4l2-3h6l2 3h4v11H3z'/><circle cx='12' cy='13' r='3.5'/></svg>"); }
.i-llave { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='8' cy='15' r='4.5'/><path d='m11.2 11.8 8.8-8.8M16.5 6.5l2.5 2.5'/></svg>"); }
.i-check { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='3.5' width='17' height='17' rx='4.5'/><path d='m8 12.2 2.8 2.8L16.2 9.5'/></svg>"); }
.i-mas { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>"); }
.i-ojo { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'><path d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/><circle cx='12' cy='12' r='3'/></svg>"); }
.i-etiqueta { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'><path d='M3 3h8.5L21 12.5 12.5 21 3 11.5z'/><circle cx='7.8' cy='7.8' r='1.3'/></svg>"); }
.i-pregunta { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M9.4 9.4a2.7 2.7 0 1 1 3.7 2.5c-.7.3-1.1.9-1.1 1.7v.6M12 17v.1'/></svg>"); }
.i-correo { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'><rect x='3' y='5.5' width='18' height='13' rx='3'/><path d='m4 7 8 6 8-6'/></svg>"); }

/* Títulos de sección: chicos, en mayúsculas y espaciados, en gris */
.t, legend, .dato > span {
  display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-family: var(--letra); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; color: var(--tenue);
}
.t[class*="i-"]::before, legend[class*="i-"]::before, .dato[class*="i-"] > span::before, .boton[class*=" i-"]::before, .no-casco::before {
  content: ''; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat;
}

/* ---------- Botones: planos. Negro el principal, rojo lo urgente, verde WhatsApp ---------- */
.boton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 22px; border-radius: 10px; border: 1.5px solid transparent;
  background: var(--texto); color: #fff;
  font: inherit; font-size: 16px; font-weight: 600; text-align: center; text-decoration: none;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color .25s ease, border-color .25s ease, transform .15s ease;
}
.boton[class*=" i-"]::before { width: 19px; height: 19px; }
.boton:active { transform: scale(.98); }
.boton:hover { background-color: #2b2b2b; }
.boton:disabled { opacity: .6; cursor: wait; }
.boton.claro { background: var(--hoja); color: var(--texto); border-color: var(--texto); }
.boton.claro:hover { background: #f5f5f5; }
.boton.rojo, .b-911 { background: var(--rojo); }
.boton.rojo:hover, .b-911:hover { background: #c70010; }
.boton.wa { background: var(--verde); }
.boton.wa:hover { background: var(--verde-osc); }
.boton.chico { min-height: 38px; padding: 0 14px; border-radius: 9px; font-size: 14px; }
.boton.chico[class*=" i-"]::before { width: 15px; height: 15px; }
.lista-botones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lista-botones form { margin: 0; }

/* ---------- Avisos ---------- */
.flash, .error, .aviso-dueno { border-radius: 14px; padding: 12px 16px; font-size: 15px; }
.flash { background: var(--acento-suave); color: var(--acento-osc); }
.error { background: var(--rojo-suave); color: var(--rojo-osc); border: 1px solid rgba(230, 0, 18, .2); }
.error p { margin: 0 0 4px; }
.error p:last-child { margin: 0; }
.aviso-dueno { width: min(528px, calc(100% - 32px)); margin: 12px auto 0; background: var(--gris-claro); color: #333; font-size: 14px; text-align: center; }

/* ---------- La página del chip y la de la familia ---------- */
.sello {
  position: sticky; top: calc(10px + env(safe-area-inset-top)); z-index: 10; display: flex; align-items: center; gap: 9px;
  width: max-content; max-width: calc(100% - 32px); margin: 12px auto 0; padding: 8px 16px 8px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: .01em; box-shadow: none;
}
.sello a { text-decoration: none; }
.sello i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-suave); }
.hoja { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin: 0 auto; padding: 14px 16px 8px; }
.hoja > * { margin: 0; }
.no-casco {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 16px; border-radius: 12px;
  background: var(--rojo); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5 2.5 20h19z'/><path d='M12 10v4.2M12 17.2v.1'/></svg>");
}
.no-casco::before { width: 20px; height: 20px; }
.quien { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: var(--radio); }
.quien img, .inicial { width: 72px; height: 72px; flex: none; border-radius: 50%; object-fit: cover; }
.inicial { display: grid; place-items: center; background: var(--gris-claro); color: var(--texto); font-family: var(--titulo); font-size: 32px; font-weight: 600; }
.quien h1 { margin: 0 0 3px; font-size: 26px; }
.quien p { margin: 0; color: var(--suave); }
.acciones { display: grid; gap: 10px; }
.acciones .boton { width: 100%; min-height: 58px; font-size: 18px; border-radius: 12px; }
.acciones .boton[class*=" i-"]::before { width: 22px; height: 22px; }
.acciones form { display: grid; gap: 10px; margin: 0; }
.acciones .nota { margin: 0 4px; }
/* Avisar a la familia: un botón de WhatsApp por contacto, justo después del 911 */
.avisar { padding: 14px; border-radius: var(--radio); }
.avisar > .t { margin: 2px 4px 0; }
.botones-wa { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.acciones .botones-wa .boton { min-height: 58px; padding: 8px 18px; font-size: 17px; line-height: 1.15; }
.botones-wa .boton > span { display: grid; text-align: left; }
.botones-wa .boton small { font-size: 12.5px; font-weight: 500; opacity: .88; }
.avisar .nota { font-size: 13px; }
.donde { margin: 0 4px; color: var(--suave); font-size: 13px; }
.donde summary { font-weight: 600; }
.donde summary::before { content: '+ '; }
.donde[open] summary { margin-bottom: 8px; }
.donde[open] summary::before { content: '− '; }
.donde input { margin-top: 0; }
.resultado { padding: 16px; border-radius: var(--radio); background: var(--acento-suave); border-color: var(--linea); }
.resultado .ok { color: var(--acento-osc); }
.resultado .boton { width: 100%; }

/* ---------- El WhatsApp como se ve en el celular (demos) ---------- */
.wa-previa { display: grid; gap: 10px; }
.wa-previa > .t { margin: 0 4px; }
.wa-previa > .nota { margin: 0 4px; }
.wa-chat { overflow: hidden; border-radius: 20px; background: #efeae2; border: 1px solid var(--linea); box-shadow: var(--sombra); }
.wa-barra { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f0f2f5; border-bottom: 1px solid rgba(11, 20, 26, .06); }
.wa-barra b { display: block; font-size: 15px; font-weight: 600; }
.wa-barra small { display: block; font-size: 12px; color: var(--suave); }
.wa-avatar {
  width: 36px; height: 36px; flex: none; border-radius: 50%; background: #dfe5e7 center / 20px no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='8' r='4.2' fill='%23ffffff'/><path d='M3.5 22a8.5 8.5 0 0 1 17 0z' fill='%23ffffff'/></svg>");
}
.wa-fondo { padding: 12px 12px 14px; background: #efeae2; }
.wa-dia { width: max-content; margin: 0 auto 10px; padding: 3px 10px; border-radius: 8px; background: #fff; font-size: 12px; color: var(--suave); box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-burbuja {
  max-width: 90%; padding: 7px 10px 6px; border-radius: 0 10px 10px 10px; background: #fff; color: #111b21;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px; line-height: 1.38; letter-spacing: 0; overflow-wrap: anywhere; box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}
.wa-burbuja.sale { margin-left: auto; border-radius: 10px 0 10px 10px; background: #d9fdd3; }
.wa-burbuja u { color: #027eb5; text-decoration: none; }
.wa-burbuja time { display: block; margin-top: 2px; text-align: right; font-size: 11px; color: rgba(17, 27, 33, .5); }

/* ---------- Las demos: la hoja que sube con el mensaje y el aviso de "aquí no se manda nada" ---------- */
.hoja-demo { position: fixed; inset: 0; z-index: 50; display: grid; align-items: end; justify-items: center; padding: 12px; background: rgba(0, 0, 0, .35); animation: aparece-fondo .25s ease-out; }
.hoja-demo-caja {
  width: min(520px, 100%); max-height: calc(100% - 24px); overflow: auto; padding: 16px; border-radius: 24px;
  background: var(--fondo); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); animation: sube .35s cubic-bezier(.2, .8, .2, 1);
}
.hoja-demo-caja .t { margin: 2px 4px 10px; }
.hoja-demo-caja .wa-fondo { margin: 0 0 12px; border-radius: 16px; }
.hoja-demo-caja .lista-botones { display: grid; margin: 0; }
.hoja-demo-caja .lista-botones .boton { width: 100%; }
@keyframes sube { from { opacity: 0; transform: translateY(28px); } }
@keyframes aparece-fondo { from { opacity: 0; } }
.aviso-demo {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; width: max-content; max-width: calc(100% - 32px);
  margin: 0; padding: 11px 16px; border-radius: 14px; background: var(--texto); color: #fff; font-size: 14px; font-weight: 500; text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2); opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .25s, transform .3s;
}
.aviso-demo.sale { opacity: 1; transform: translate(-50%, 0); }
/* Dentro del celular de la portada: la portada ya dice que es demo, y sin barra de desplazamiento (en Windows le quita ancho) */
.en-marco .aviso-dueno { display: none; }
html:has(> body.en-marco) { scrollbar-width: none; }
html:has(> body.en-marco)::-webkit-scrollbar { display: none; }

/* Los datos del paramédico: grandes, claros, uno por tarjeta */
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dato { grid-column: span 2; padding: 14px 16px; border-radius: var(--radio-t); background: var(--hoja); border: 1px solid var(--linea); }
.dato > span { margin-bottom: 5px; }
.dato p { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.32; }
.dato b { font-size: 22px; font-weight: 700; }
.dato.sangre b { display: block; font-size: 60px; line-height: .95; font-weight: 700; letter-spacing: -.03em; color: var(--rojo); }
.dato.rojo { background: var(--rojo-suave); border-color: rgba(230, 0, 18, .3); }
.dato.rojo > span, .dato.rojo p { color: var(--rojo-osc); }
.dato.chico { grid-column: span 1; }
.dato.chico p { font-size: 16px; }
.bloque { padding: 16px 18px; border-radius: var(--radio); margin: 0 0 12px; }
.hoja > .bloque { margin: 0; }
.contactos, .chips, .historial, .camino, .checks, .revision, .lista-nfc, .precios, .datos-admin { list-style: none; margin: 0; padding: 0; }
.contactos li, .chips li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 0; border-top: 1px solid var(--linea); }
.contactos li:first-child, .chips li:first-child { border-top: 0; padding-top: 2px; }
.contactos b, .chips b { font-size: 17px; font-weight: 600; }
.contactos span, .chips span { display: block; color: var(--suave); font-size: 14px; }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.bloque > :last-child, fieldset > :last-child { margin-bottom: 0; }
fieldset { padding-bottom: 16px !important; }
.ayuda > summary { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--texto); }
.ayuda > summary::before { width: 18px !important; height: 18px !important; }
.ayuda > summary::after, .cuenta summary::after { content: '+'; margin-left: auto; font-size: 20px; font-weight: 400; line-height: 1; color: var(--tenue); text-transform: none; }
.ayuda[open] > summary::after, .cuenta details[open] summary::after { content: '−'; }
.ayuda[open] > summary { margin-bottom: 12px; }

/* Listas numeradas: círculos negros */
.ayuda ol, .pasos ol { counter-reset: paso; list-style: none; margin: 0; padding: 0; }
.ayuda li, .pasos li { counter-increment: paso; position: relative; padding: 0 0 12px 40px; }
.ayuda li:last-child, .pasos li:last-child { padding-bottom: 0; }
.ayuda li::before, .pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: 0; width: 27px; height: 27px; display: grid; place-items: center;
  border-radius: 50%; background: var(--acento); color: #fff; font-size: 14px; font-weight: 700;
}
.folio { text-align: center; color: var(--tenue); font-size: 13px; }
.familia h1 { font-size: 28px; }
.familia .lista-botones .boton, .resultado .lista-botones .boton { flex: 1 1 150px; }
.cuando { font-size: 17px; }
.mapa { display: block; width: 100%; height: 250px; border: 0; border-radius: 12px; margin: 0 0 12px; background: #eeeeee; }
.camino li { padding: 6px 0; }
.checks li { position: relative; padding: 7px 0 7px 32px; }
.checks li::before { content: ''; position: absolute; left: 0; top: 9px; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--linea-fuerte); background: #fff; }
.fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 0; }
.fila input, .fila select { flex: 1 1 180px; width: auto; margin: 0; }

/* ---------- Formularios ---------- */
.caja { max-width: 560px; margin: 0 auto; padding: 22px 16px 40px; }
.caja.ancha { max-width: 860px; }
.caja > h1 { margin-top: 8px; }
body.simple > main.caja { width: min(528px, calc(100% - 32px)); margin: 28px auto 0; padding: 24px 22px; border-radius: var(--radio); }
form label { display: block; margin: 0 0 14px; font-size: 13.5px; font-weight: 600; color: var(--suave); }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
  display: block; width: 100%; margin-top: 6px; min-height: 48px; padding: 12px 14px;
  font: inherit; font-size: 16px; font-weight: 400; color: var(--texto);
  background: #fff; border: 1px solid var(--linea-fuerte); border-radius: 10px;
  -webkit-appearance: none; appearance: none; transition: border-color .2s, box-shadow .2s;
}
textarea { resize: vertical; line-height: 1.4; }
select {
  padding-right: 38px; background-repeat: no-repeat; background-position: right 14px center; background-size: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='rgba(0,0,0,.5)' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--texto); box-shadow: 0 0 0 4px rgba(0, 0, 0, .08); }
::placeholder { color: var(--tenue); }
input[type=file] { display: block; width: 100%; font: inherit; font-size: 14px; color: var(--suave); }
input[type=file]::file-selector-button { margin-right: 12px; padding: 9px 16px; border: 0; border-radius: 10px; background: var(--texto); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
label.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; font-weight: 500; color: var(--texto); }
label.check input[type=checkbox] { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--acento); }
/* Los ajustes van como interruptor; lo que se acepta, como casilla */
label.check input.interruptor {
  width: 50px; height: 30px; margin: -3px 0 0; border-radius: 999px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background: #d6d6d6 radial-gradient(circle at 15px 50%, #fff 0 12px, transparent 12.5px) no-repeat;
  transition: background-position .25s, background-color .25s;
}
label.check input.interruptor:checked { background-color: var(--acento); background-position: 20px 0; }
fieldset { min-width: 0; margin: 0 0 14px; padding: 16px 16px 4px; border-radius: var(--radio); }
legend { float: left; width: 100%; padding: 0; margin: 0 0 14px; }
legend + * { clear: both; }
.dos { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 560px) { .dos { grid-template-columns: 1fr 1fr; } }
.contacto { padding-top: 14px; border-top: 1px solid var(--linea); }
.contacto:first-of-type { padding-top: 0; border-top: 0; }
.vidrio.formu { padding: 20px 18px 6px; border-radius: var(--radio); margin: 0 0 14px; }
.vidrio.formu > .boton { margin-bottom: 18px; }
.cuenta form > .boton { margin-bottom: 4px; }
.boton.fijo { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 5; width: 100%; margin: 4px 0 20px; }
.foto-actual { display: flex; gap: 14px; align-items: center; }
.foto-actual img { border-radius: 50%; }
.cuenta details { padding: 12px 0; border-top: 1px solid var(--linea); }
.cuenta summary { display: flex; align-items: center; font-weight: 600; }
.cuenta form { margin-top: 12px; }
.historial li { padding: 10px 0; border-top: 1px solid var(--linea); font-size: 15px; }
.historial li:first-child { border-top: 0; padding-top: 2px; }
.historial li span { display: block; color: var(--tenue); font-size: 13px; }

/* ---------- Barra de arriba (portada, panel y admin): de lado a lado ---------- */
.barra {
  position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 6px 10px; flex-wrap: wrap;
  min-height: 60px; margin: 0; padding: 8px max(12px, calc((100% - 860px) / 2)) 8px max(18px, calc((100% - 860px) / 2 + 6px));
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea);
}
.barra a { color: var(--texto); text-decoration: none; }
.barra .marca { font-family: var(--titulo); font-size: 19px; font-weight: 700; }
/* El punto rojo de la marca también en el panel y el admin (la portada ya lo trae en su <i>) */
.barra .marca:not(:has(i))::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 9px; border-radius: 50%; background: var(--rojo); vertical-align: .14em; }
.barra nav { display: flex; gap: 2px; flex-wrap: wrap; }
.barra nav a, .barra > a:not(.marca) { padding: 8px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: var(--suave); }
.barra nav a:hover, .barra > a:not(.marca):hover { background: rgba(0, 0, 0, .05); color: var(--texto); }

/* ---------- Admin ---------- */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.numeros > div { padding: 14px 16px; border-radius: var(--radio-t); }
.numeros b { display: block; font-family: var(--titulo); font-size: 34px; font-weight: 600; }
.numeros span { color: var(--suave); font-size: 13px; }
table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; border-radius: var(--radio-t); margin: 0 0 14px; font-size: 14px; }
th, td { padding: 10px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--linea); }
tr:last-child td { border-bottom: 0; }
.bloque table { border: 0; border-radius: 0; box-shadow: none; }
th { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.revision li { padding: 4px 0; }
.revision .si { color: var(--ok); }
.revision .no { color: var(--rojo-osc); font-weight: 600; }
.lista-nfc li { display: grid; gap: 6px; margin-bottom: 10px; padding: 12px 14px; border-radius: 14px; }
.lista-nfc .estado { color: var(--ok); font-size: 14px; }
.datos-admin li { padding: 4px 0; }
.admin form.fila { margin-bottom: 16px; }

/* La portada vive en portada.css */
.legal h2 { margin-top: 1.5em; font-size: 20px; }
.legal li { margin-bottom: .4em; }

/* ---------- Pie ---------- */
.pie { padding: 28px 16px calc(32px + env(safe-area-inset-bottom)); text-align: center; font-size: 13px; color: var(--suave); }
.pie p { margin: 0 0 6px; }
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie-aviso { max-width: 500px; margin: 0 auto 12px !important; font-size: 12px; color: var(--tenue); }
.hecho a { font-weight: 600; color: var(--texto); }

@media (prefers-reduced-motion: reduce) { .boton, input, .hoja-demo, .hoja-demo-caja, .aviso-demo { transition: none; animation: none; } }

/* ---------- Admin → QR para Illustrator: la vista previa ---------- */
.notas-qr { margin: 0 0 14px; padding-left: 20px; color: var(--suave); }
.notas-qr li { margin: 0 0 6px; }
.rejilla-qr { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.rejilla-qr li { display: grid; justify-items: center; gap: 6px; padding: 10px 10px 8px; border: 1px solid var(--linea); border-radius: var(--radio-t); background: #fff; font-size: 13px; }
.rejilla-qr .qr { display: block; width: 100%; }
.rejilla-qr svg { display: block; width: 100%; height: auto; }

/* ---------- Hoja para imprimir: papel blanco ---------- */
.hoja-impresion { background: #fff; }
.titulo-hoja { font-size: 14px; margin: 10px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, 38mm); gap: 4mm; padding: 0 10px; }
.qr-celda { width: 38mm; text-align: center; font-size: 11px; }
.qr-celda .qr svg { display: block; width: 32mm; height: 32mm; margin: 0 auto 1mm; }
.tarjetas { grid-template-columns: repeat(auto-fill, 85.6mm); }
.tarjeta-act { display: flex; flex-direction: column; justify-content: center; gap: 1.2mm; width: 85.6mm; height: 54mm; padding: 4mm; border: .3mm dashed #999; border-radius: 3mm; font-size: 10px; }
.tarjeta-act b { font-size: 13px; }
.tarjeta-act .grande { font-size: 20px; letter-spacing: .1em; }
@media print {
  .no-imprimir { display: none; }
  .salto { break-before: page; }
  .qr-celda, .tarjeta-act { break-inside: avoid; }
  @page { size: letter; margin: 10mm; }
}