/* ===========================================================================
   perfiles digitales — sistema visual
   v1 · 2026

   Dos roles, un sistema. El perfil profesional se lee con calma; el de
   emergencia lo lee un paramédico con prisa y guantes. Por eso comparten
   retícula y tipografía pero no jerarquía: en emergencia el dato médico manda
   sobre la identidad, y el rojo no es decoración, es señalización.
   =========================================================================== */

:root{
  /* Neutros con sesgo frío, para que el acento no pelee */
  --ink:      #0E1116;
  --ink-2:    #1A1F26;
  --paper:    #FFFFFF;
  --paper-2:  #F4F5F7;
  --paper-3:  #E7EAEE;
  --line:     #DDE1E6;
  --muted:    #646E7A;

  /* Acentos por rol */
  --acento:   #2E4FA3;   /* profesional — índigo tinta */
  --alerta:   #C81E1E;   /* emergencia — señalización, no adorno */
  --whatsapp: #25D366;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --radio:    14px;
  --radio-sm: 10px;
  --sombra:   0 1px 2px rgba(14,17,22,.05), 0 8px 24px rgba(14,17,22,.06);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
  background:var(--paper-2);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:4px; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}


/* ---------- Lienzo ---------- */

.lienzo{
  max-width:460px;
  margin:0 auto;
  min-height:100vh;
  background:var(--paper);
  box-shadow:var(--sombra);
}
@media (min-width:520px){
  .lienzo{ min-height:0; margin:24px auto 40px; border-radius:var(--radio); overflow:hidden; }
}


/* ---------- Encabezado del perfil ---------- */

.tapa{
  height:132px;
  background:var(--ink);
  position:relative;
}
.tapa--alerta{ background:var(--alerta); }

/* Franja diagonal discreta: da textura sin imagen. */
.tapa::after{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    115deg, rgba(255,255,255,.045) 0 2px, transparent 2px 9px);
}

.retrato{
  width:112px; height:112px;
  border-radius:50%;
  object-fit:cover;
  border:4px solid var(--paper);
  background:var(--paper-3);
  margin:-60px auto 0;
  position:relative; z-index:1;
}
.retrato--iniciales{
  display:grid; place-items:center;
  font-size:2.2rem; font-weight:600; letter-spacing:-.03em;
  color:var(--muted);
}

.identidad{ text-align:center; padding:1rem 1.5rem 0; }
.identidad h1{
  margin:0;
  font-size:1.5rem; font-weight:650; letter-spacing:-.025em;
  text-wrap:balance;
}
.identidad .puesto{ margin:.2rem 0 0; font-size:.95rem; color:var(--muted); }
.identidad .empresa{
  margin:.35rem 0 0;
  font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--acento);
}


/* ---------- Cuerpo ---------- */

.cuerpo{ padding:1.5rem; display:grid; gap:.6rem; }

.boton{
  display:flex; align-items:center; gap:.85rem;
  padding:.9rem 1rem;
  border:1px solid var(--line);
  border-radius:var(--radio-sm);
  background:var(--paper);
  font-size:.97rem; font-weight:500;
  color:var(--ink);
  transition:border-color .15s, transform .1s;
}
.boton:hover{ border-color:var(--ink); }
.boton:active{ transform:scale(.99); }
/* Tamaño base del icono. Va suelto y no anidado en .boton: los iconos también
   aparecen en botones de acción y en la portada, y un SVG sin medidas se
   estira hasta el ancho del contenedor. */
.icono{ width:20px; height:20px; flex:none; }
.boton .icono{ color:var(--muted); }
.boton .flecha{ margin-left:auto; width:16px; height:16px; color:var(--paper-3); }

.boton--principal{
  background:var(--acento); border-color:var(--acento); color:#fff;
  font-weight:600; justify-content:center;
}
.boton--principal .icono{ color:#fff; }
.boton--principal:hover{ background:#26428A; border-color:#26428A; }

.boton--wa .icono{ color:var(--whatsapp); }

.boton--alerta{
  background:var(--alerta); border-color:var(--alerta); color:#fff;
  font-weight:600; justify-content:center; font-size:1.05rem; padding:1.05rem 1rem;
}
.boton--alerta .icono{ color:#fff; }


/* ---------- Redes ---------- */

.redes{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
  padding:.4rem 0 .2rem;
}
.redes a{
  width:46px; height:46px;
  display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%;
  color:var(--ink-2);
  transition:background .15s, color .15s, border-color .15s;
}
.redes a:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.redes svg{ width:20px; height:20px; }


/* ---------- Emergencia ---------- */

.bandera{
  background:var(--alerta); color:#fff;
  text-align:center; padding:.55rem 1rem;
  font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
}

.sangre{
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:center;
  margin:1.25rem 1.5rem 0;
  padding:1rem 1.25rem;
  border:2px solid var(--alerta); border-radius:var(--radio-sm);
  background:#FEF2F2;
}
.sangre .valor{
  font-size:2.6rem; font-weight:700; line-height:1;
  letter-spacing:-.04em; color:var(--alerta);
  font-variant-numeric:tabular-nums;
}
.sangre .rotulo{
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--alerta);
}
.sangre .donador{ font-size:.85rem; color:var(--ink-2); margin-top:.15rem; }

.dato{
  padding:.9rem 0;
  border-bottom:1px solid var(--line);
}
.dato:last-child{ border-bottom:0; }
.dato dt{
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.25rem;
}
.dato dd{ margin:0; font-size:1rem; line-height:1.45; }
.dato--critico dt{ color:var(--alerta); }
.dato--critico dd{ font-weight:600; }

.datos{ margin:0; padding:0 1.5rem; }

.contacto-em{
  display:flex; align-items:center; gap:.85rem;
  padding:.85rem 1rem;
  border:1px solid var(--line); border-radius:var(--radio-sm);
  margin-bottom:.6rem;
}
.contacto-em .quien{ min-width:0; }
.contacto-em .nombre{ font-weight:600; font-size:.97rem; }
.contacto-em .parentesco{ font-size:.8rem; color:var(--muted); }
.contacto-em .llamar{
  margin-left:auto; flex:none;
  background:var(--alerta); color:#fff;
  padding:.5rem .95rem; border-radius:99px;
  font-size:.85rem; font-weight:600;
}


/* ---------- Pie del perfil ---------- */

.pie-perfil{
  border-top:1px solid var(--line);
  padding:1.25rem 1.5rem 1.75rem;
  text-align:center;
}
/* En bloque, no en línea: el enlace de abajo es un segundo elemento y con
   display:inline-block los dos se acomodaban uno al lado del otro. */
.pie-perfil .marca{ display:block; }
.pie-perfil .marca img{
  height:32px; width:auto;
  margin:0 auto;
  opacity:.45;                  /* aquí la marca acredita, no encabeza */
  transition:opacity .15s;
}
.pie-perfil .marca:hover img{ opacity:.8; }
.pie-perfil .crea{
  display:inline-block; margin-top:.7rem;
  font-size:.85rem; font-weight:600; color:var(--acento);
  border-bottom:1px solid currentColor; padding-bottom:1px;
}

.acciones-flotantes{
  display:flex; gap:.5rem; justify-content:center;
  padding:0 1.5rem 1.25rem;
}
.acciones-flotantes button{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:inherit; font-size:.85rem; font-weight:500;
  padding:.65rem;
  border:1px solid var(--line); border-radius:var(--radio-sm);
  background:var(--paper); color:var(--ink-2);
  cursor:pointer;
}
.acciones-flotantes .boton{ gap:.5rem; }
.acciones-flotantes button:hover{ border-color:var(--ink); }


/* ---------- Formularios y páginas de la app ---------- */

.pagina{ max-width:620px; margin:0 auto; padding:1.5rem 1.25rem 4rem; }
@media (min-width:640px){ .pagina{ padding:3rem 1.5rem 5rem; } }

/* La marca es el logotipo, no texto compuesto: el archivo trae su propio
   espaciado y la caja entre «perfiles» y «digitales», que es lo que la hace
   reconocible. Va enlazado a la portada porque en un sitio sin menú el
   logotipo es el único camino de regreso. */
.marca-top{
  display:inline-flex; align-items:center; gap:.7rem;
  margin-bottom:2rem;
  color:inherit; text-decoration:none;
}
/* El logotipo apila «perfiles» sobre «digitales» y lleva debajo el «by domco»:
   son tres renglones dentro de la misma imagen, así que necesita bastante más
   alto que una marca de una sola línea para que se lea. */
.marca-top img{ height:58px; width:auto; display:block; }

/* En la portada la marca tiene que pesar; en el formulario o en el panel ya
   solo orienta, y a ese tamaño estorbaría. */
.marca-top--grande{ margin-bottom:2.5rem; }
.marca-top--grande img{ height:78px; }
.marca-top .seccion{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  padding-left:.7rem; border-left:1px solid var(--line);
}

.pagina h1{
  font-size:clamp(1.6rem,1.3rem+1.4vw,2.1rem);
  letter-spacing:-.03em; font-weight:650; margin:0 0 .5rem;
  text-wrap:balance;
}
.pagina .entrada{ color:var(--muted); font-size:1.02rem; margin:0 0 2rem; max-width:52ch; }

.tarjeta{
  background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radio);
  padding:1.5rem;
  margin-bottom:1.25rem;
}
.tarjeta > h2{
  font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1.25rem;
}

.campo{ display:grid; gap:.35rem; margin-bottom:1rem; }
.campo:last-child{ margin-bottom:0; }
.campo label{ font-size:.85rem; font-weight:600; }
.campo .ayuda{ font-size:.8rem; color:var(--muted); font-weight:400; }
.campo input, .campo select, .campo textarea{
  font-family:inherit; font-size:1rem;
  padding:.7rem .85rem;
  border:1px solid var(--line); border-radius:var(--radio-sm);
  background:var(--paper); color:var(--ink);
  width:100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--acento); box-shadow:0 0 0 3px rgba(46,79,163,.12);
}
.campo textarea{ min-height:88px; resize:vertical; }
.par{ display:grid; gap:1rem; }
@media (min-width:520px){ .par{ grid-template-columns:1fr 1fr; } }

.consentimiento{
  display:grid; grid-template-columns:auto 1fr; gap:.75rem;
  padding:1rem; border:1px solid var(--line); border-radius:var(--radio-sm);
  background:var(--paper-2);
  font-size:.88rem; line-height:1.5;
}
.consentimiento input{ margin-top:.2rem; width:18px; height:18px; }
.consentimiento--sensible{ border-color:var(--alerta); background:#FEF2F2; }
.consentimiento a{ text-decoration:underline; }

.enviar{
  width:100%;
  font-family:inherit; font-size:1rem; font-weight:600;
  padding:.95rem 1.25rem;
  border:0; border-radius:var(--radio-sm);
  background:var(--acento); color:#fff;
  cursor:pointer;
}
.enviar:hover{ background:#26428A; }

.error{
  border:1px solid var(--alerta); background:#FEF2F2; color:#7F1D1D;
  padding:.9rem 1rem; border-radius:var(--radio-sm);
  font-size:.92rem; margin-bottom:1.25rem;
}
.error ul{ margin:.4rem 0 0; padding-left:1.1rem; }


/* ---------- Elección de plantilla ---------- */

.plantillas{ display:grid; gap:.75rem; }
@media (min-width:520px){ .plantillas{ grid-template-columns:1fr 1fr; } }

.plantillas label{
  display:block; cursor:pointer;
  border:1.5px solid var(--line); border-radius:var(--radio);
  padding:1.1rem;
  background:var(--paper);
  transition:border-color .15s, background .15s;
}
/* El radio se oculta pero sigue siendo el control real: con el teclado se
   llega a él con Tab, y el recuadro que se ve es su etiqueta. Por eso el aro
   de foco se pinta en la etiqueta y no en el input invisible. */
.plantillas input{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.plantillas label:has(input:focus-visible){
  outline:2px solid var(--acento); outline-offset:2px;
}
.plantillas label:has(input:checked){ border-color:var(--acento); background:#F5F7FD; }
.plantillas label:has(input:checked) .titulo{ color:var(--acento); }
.plantillas .titulo{ font-weight:650; font-size:1rem; margin-bottom:.25rem; }
.plantillas .para{ font-size:.85rem; color:var(--muted); line-height:1.45; }

.bloque-emergencia{ display:none; }
.bloque-emergencia.visible{ display:block; }


/* ---------- QR ---------- */

.qr-caja{
  display:grid; place-items:center; gap:1rem;
  padding:1.75rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radio);
  text-align:center;
}
.qr-caja canvas, .qr-caja svg{ width:220px; height:220px; }
.qr-url{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.9rem; color:var(--muted);
  word-break:break-all;
}


/* ---------- Hoja de impresión de lotes ---------- */

.hoja{ background:#fff; }
.rejilla-qr{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:8mm;
  padding:10mm;
}
.etiqueta{
  text-align:center;
  border:1px dashed #C9CDD3;
  padding:6mm 3mm;
  break-inside:avoid;
}
.etiqueta svg{ width:32mm; height:32mm; margin:0 auto; }
.etiqueta .codigo{
  font-family:ui-monospace, monospace;
  font-size:10pt; letter-spacing:.1em; font-weight:700;
  margin-top:2mm;
}
.etiqueta .pin{ font-size:7pt; color:#6B7280; margin-top:1mm; }

@media print{
  body{ background:#fff; }
  .no-imprimir{ display:none !important; }
  .rejilla-qr{ padding:0; }
  .etiqueta{ border-color:#E5E7EB; }
}