/* ===========================================================================
   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;

  /* --- Degradados ---

     La versión anterior del sitio usaba el degradado morado que traen las
     plantillas (#667eea a #764ba2) y esa luz es lo que gustó. Aquí se hace lo
     mismo pero con los colores que ya significan algo: el azul es el modo
     contacto, el rojo el de emergencia y el verde el de mascota, los mismos
     que usa el perfil de verdad. Un morado decorativo se vería bien y no
     diría nada; peor aún, rompería la única pista visual que conecta la
     portada con el producto.

     Los dos extremos de cada uno dan 4.5:1 o más contra blanco, medido, no
     supuesto: un botón con degradado es un botón donde el texto tiene que
     leerse en los dos cabos, no solo en el oscuro. */
  --grad-pro:  linear-gradient(135deg, #4462C9 0%, #2E4FA3 100%);
  --grad-em:   linear-gradient(135deg, #D93028 0%, #A81818 100%);
  --grad-masc: linear-gradient(135deg, #2A7F63 0%, #1E5F4B 100%);
  --grad-tinta:linear-gradient(135deg, #2B3444 0%, #0E1116 100%);

  --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 ---------- */

/* --tema lo pone el perfil en el lienzo. El respaldo es para la vista previa
   y para cualquier página que dibuje una tapa sin perfil detrás. */
.tapa{
  height:132px;
  background:var(--tema, var(--ink));
  position:relative;
}
.tapa--alerta{ background:var(--alerta); }

/* Con foto: la imagen manda, el color se queda como velo. El velo no es
   estética — el retrato es un círculo blanco montado sobre la tapa, y una
   foto clara detrás lo desaparece. Con el velo, cualquier foto sirve. */
.tapa--foto{
  height:176px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* 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);
}
.tapa--foto::after{
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 9px),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--tema, var(--ink)) 22%, transparent),
      color-mix(in srgb, var(--tema, var(--ink)) 78%, transparent));
}
/* Navegadores sin color-mix: velo neutro, que siempre funciona. */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .tapa--foto::after{
    background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 9px),
      linear-gradient(to bottom, rgba(14,17,22,.22), rgba(14,17,22,.7));
  }
}

.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(--tema, 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(--tema, var(--acento));
  border-color:var(--tema, var(--acento));
  color:#fff;
  font-weight:600; justify-content:center;
}

/* El camino de vuelta: "Dejarle mis datos". De contorno y con el color del
   perfil, no relleno: si grita igual que "Guardar contacto", los dos pierden.
   Quien abre un perfil viene a llevarse algo; dejar lo suyo es lo segundo. */
.boton--vuelta{
  border-color:var(--tema, var(--acento));
  color:var(--tema, var(--acento));
  font-weight:600;
}
.boton--vuelta .icono{ color:inherit; }

/* El de reseñas es el único botón que le PIDE algo a quien lo lee, así que su
   estrella va en amarillo. Los demás iconos se quedan en gris: si todos
   gritan, ninguno se oye. */
.boton--resenas .icono{ color:#E8A317; }
.boton--principal .icono{ color:#fff; }
.boton--principal:hover{ filter:brightness(1.12); }

.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 ---------- */



/* ---------- 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;
}

/* Quién y qué edad, arriba de todo. La edad va del mismo tamaño que el
   nombre porque no es un dato secundario: con ella se decide la dosis. */
.quien-em{
  padding:1.1rem 1.5rem .25rem;
  text-align:center;
}
.quien-em h1{
  margin:0;
  font-size:1.5rem; font-weight:700; letter-spacing:-.02em;
  text-wrap:balance;
}
.quien-em .edad{
  margin:.2rem 0 0;
  font-size:1.5rem; font-weight:700; letter-spacing:-.02em;
  color:var(--alerta);
  font-variant-numeric:tabular-nums;
}

/* ---------- Mascota ----------
   Verde y no rojo: quien abre esta página encontró un animal, no un
   accidente. El rojo pondría a alguien nervioso sin necesidad, y el nerviosismo
   de quien sostiene al perro se le contagia al perro. */

.bandera--masc{ background:#1E5F4B; }

.retrato--masc{
  width:128px; height:128px;
  margin:-1rem auto 0;
  border-width:5px;
  position:relative; z-index:1;
}
.retrato--masc.retrato--iniciales{ font-size:2.6rem; color:#1E5F4B; background:#E6F1ED; }

.quien-masc{ padding:.9rem 1.5rem .25rem; text-align:center; }
.quien-masc h1{
  margin:0;
  font-size:1.55rem; font-weight:700; letter-spacing:-.025em;
  text-wrap:balance;
}
.quien-masc .raza{ margin:.25rem 0 0; font-size:.95rem; color:var(--muted); }

/* El botón de llamar es el único a todo color, y es grande. Es a lo único que
   vino esta página: devolver al animal. */
.boton--llamar{
  background:#1E5F4B; border-color:#1E5F4B; color:#fff;
  justify-content:center; gap:.6rem;
  font-size:1.05rem; font-weight:650;
  padding:1rem;
}
.boton--llamar:hover{ background:#19503F; border-color:#19503F; }
.boton--llamar .icono{ color:#fff; }

.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;
}

/* align-content:start es la línea que endereza los formularios.

   .campo es un grid y, dentro de un .par, se estira al alto de su fila. Con el
   reparto por omisión —stretch— la fila del control absorbía el sobrante, así
   que un campo cuya pareja llevaba una línea de ayuda debajo crecía de 42 a
   50 píxeles. Dos cajas idénticas en la misma fila con ocho píxeles de
   diferencia: eso es lo que se veía descuadrado, y por eso no aparecía en
   ninguna medida de márgenes. */
.campo{ display:grid; gap:.35rem; margin-bottom:1rem; align-content:start; }
.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);
}
/* Una sola altura para todo lo que se teclea o se elige. El campo de fecha
   trae su propio calendario y medía 44 donde los demás medían 42; se igualan
   por arriba, no por abajo, para no apretar el de fecha. */
.campo input:not([type=checkbox]):not([type=radio]):not([type=file]),
.campo select{ min-height:44px; }

.campo textarea{ min-height:88px; resize:vertical; }

/* ---- Casillas ----

   Una casilla no es una caja de texto: no lleva etiqueta arriba, y dentro de
   un .par tiene que caer a la altura del control de junto, no de su rótulo.
   Antes esto se resolvía con un margin-top:1.75rem escrito a mano en el HTML,
   que acertaba solo mientras el rótulo de al lado midiera una línea. */
/* Dentro de un .par la casilla tiene que caer a la altura del control de
   junto, y no la tiene: le falta el rótulo de arriba. Se le pone esa línea en
   blanco con ::before —20px, que es lo que mide un rótulo de .85rem— en vez
   de empujarla con un margen a ojo, que era lo que había y acertaba solo
   mientras el rótulo vecino midiera una línea.

   Fuera del .par, o en una sola columna, no hace falta: ahí la casilla va
   sola en su renglón. */
.campo--casilla{ align-content:start; }

@media (min-width:520px){
  .par > .campo--casilla::before{ content:''; display:block; height:20px; }
}
.campo--casilla label{
  display:flex; align-items:center; gap:.55rem;
  min-height:44px;
  font-size:.95rem; font-weight:500;
  cursor:pointer;
}
.campo--casilla input[type=checkbox]{
  flex:none; width:18px; height:18px; min-height:0; margin:0;
  accent-color:var(--acento); cursor:pointer;
}
/* El .par pone el espacio con su gap; los campos de dentro no vuelven a
   ponerlo. Antes cada .campo traía su margin-bottom y el último no, así que
   apilados en un teléfono quedaban 2rem entre los dos campos de una pareja y
   1rem hasta la siguiente. El ojo lo lee como renglones mal repartidos aunque
   ninguna medida esté "mal". */
.par{ display:grid; gap:1rem; margin-bottom:1rem; }
.par > .campo{ margin-bottom:0; }
.par:last-child{ margin-bottom:0; }
@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; }

/* El botón que manda el formulario usa el mismo degradado que los de la
   portada: es el mismo gesto, y no hay razón para que el sitio se vea de una
   forma antes de entrar y de otra dentro. */
.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(--grad-pro); color:#fff;
  cursor:pointer;
  transition:filter .12s ease;
}
.enviar:hover{ filter:brightness(1.12); }

.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 ---------- */

/* Una columna, no dos. Son tres opciones: en dos columnas la tercera se
   quedaba sola en el segundo renglón con un hueco al lado, y esa esquina
   vacía es lo que hace que un formulario se vea mal armado. En fila también
   quedan a la misma altura que las dos casillas de más abajo, así que toda la
   página es una sola columna de decisiones. */
.plantillas{ display:grid; gap:.75rem; }

.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; }

/* La casilla que abre el bloque médico. Va como fila propia y no como una
   casilla suelta porque es una decisión, no un detalle del formulario. */
.abrir-emergencia{
  display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start;
  cursor:pointer;
}
.abrir-emergencia input{ width:20px; height:20px; margin-top:.15rem; }
.abrir-emergencia strong{ display:block; font-size:1rem; }
.abrir-emergencia em{
  display:block; margin-top:.2rem;
  font-style:normal; font-size:.88rem; color:var(--muted); line-height:1.45;
}

/* Paleta cerrada: se elige de una fila de muestras, no de un selector de
   color. Lo que no se puede elegir no se puede elegir mal. */
.temas{ display:flex; flex-wrap:wrap; gap:.6rem; }
.temas label{ cursor:pointer; }
.temas input{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.temas span{
  display:block; width:40px; height:40px; border-radius:50%;
  border:2px solid transparent;
  box-shadow:0 0 0 1px var(--line) inset;
  transition:transform .12s;
}
.temas label:has(input:checked) span{
  border-color:var(--paper);
  box-shadow:0 0 0 2px var(--ink);
  transform:scale(1.06);
}
.temas label:has(input:focus-visible) span{
  outline:2px solid var(--acento); outline-offset:3px;
}


/* ---------- "Tus datos están guardados, pero nadie los ve" ----------
   Es un hueco convertido en venta. Por eso no va como error ni como aviso
   amarillo: la persona no se equivocó, le falta una pieza. */

.falta-llave{
  margin:-.5rem 0 1.5rem;
  padding:1.1rem 1.25rem 1.25rem;
  border:1px solid var(--alerta);
  border-radius:var(--radio-sm);
  background:#FEF6F6;
}
.falta-llave h3{
  margin:0 0 .5rem;
  font-size:1rem; font-weight:650; letter-spacing:-.01em;
  color:var(--alerta);
}
.falta-llave p{
  margin:0 0 1rem;
  font-size:.9rem; line-height:1.55; color:var(--ink-2);
}
.falta-llave .enviar{
  display:block; text-align:center; text-decoration:none;
  background:var(--alerta);
}
.falta-llave .ya{
  margin:.75rem 0 0;
  font-size:.82rem; color:var(--muted); text-align:center;
}


/* ---------- Secciones plegables de la liga de edición ----------
   En un teléfono esta pantalla medía casi seis pantallas de formulario
   corrido. Quien entra a cambiar una cosa —su puesto, un teléfono— tenía que
   pasar por encima de todo lo demás. <details> lo resuelve sin JavaScript, y
   los campos plegados se mandan igual al guardar. */

.seccion{
  background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radio);
  margin-bottom:.75rem;
}
.seccion > summary{
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  padding:1.1rem 1.25rem;
  cursor:pointer;
  list-style:none;
  border-radius:var(--radio);
}
.seccion > summary::-webkit-details-marker{ display:none; }
.seccion > summary h2{
  margin:0;
  font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}
.seccion--alerta > summary h2{ color:var(--alerta); }
.seccion--masc > summary h2{ color:#1E5F4B; }
.pista-larga{
  margin:0 0 1.4rem;
  font-size:.9rem; line-height:1.55; color:var(--muted);
}
.seccion > summary .pista{
  font-size:.82rem; color:var(--muted); font-weight:400;
  margin-right:auto;
}
/* La flecha la dibuja el CSS y gira al abrir: es la única pista de que esto
   se puede plegar, y sin ella la gente no lo intenta. */
.seccion > summary::after{
  content:""; flex:none;
  width:.55rem; height:.55rem;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg); transform-origin:center;
  transition:transform .15s ease;
  align-self:center;
}
.seccion[open] > summary::after{ transform:rotate(-135deg); }
.seccion > summary:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
.seccion[open] > summary{ border-bottom:1px solid var(--line); border-radius:var(--radio) var(--radio) 0 0; }
.seccion .dentro{ padding:1.4rem 1.25rem 1.5rem; }
.seccion .dentro > .campo:first-child,
.seccion .dentro > .par:first-child{ margin-top:0; }

/* El botón de guardar se queda a la vista. Con las secciones desplegadas
   queda a pantallas de distancia, y guardar no debería obligar a buscar. */
.barra-guardar{
  position:sticky; bottom:0; z-index:5;
  margin:1.25rem -1.25rem 0;
  padding:.75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  background:color-mix(in srgb, var(--paper-2) 92%, transparent);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)){
  .barra-guardar{ background:var(--paper-2); }
}
.barra-guardar .enviar{ width:100%; }


/* ---------- Ligas del pie de la portada ---------- */

.pie-ligas{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:.25rem .75rem;
  margin-top:3rem;
  font-size:.88rem; color:var(--muted);
}
.pie-ligas a{ color:var(--muted); text-decoration:none; white-space:nowrap; }
.pie-ligas a:hover{ text-decoration:underline; text-underline-offset:3px; }
.pie-ligas a.fuerte{ color:var(--acento); font-weight:600; }

/* El renglón de letra chica que cierra un formulario: qué pasa con lo que
   acabas de escribir. Va aquí y no en portada.css porque las páginas del
   producto —el intercambio, el alta— no cargan la hoja de la portada. */
.letra-chica{ font-size:.82rem; line-height:1.55; color:var(--muted); }
.letra-chica a{ color:var(--acento); font-weight:600; text-decoration:underline; }
a.fuerte{ color:var(--acento); font-weight:600; }

/* La trampa para robots. Fuera de la pantalla y no display:none: hay robots
   que saltan lo que está oculto con display, y muy pocos que calculen
   posiciones. Un humano no la ve y el tabulador no la alcanza. */
.trampa{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}


/* ---------- Los contactos que te dejaron ----------

   Una lista, no una tabla: lo que se hace con esto es llamarle a alguien, no
   comparar columnas. Y en un teléfono una tabla de cinco columnas obliga a
   empujar de lado para leer un número. */

.recibidos{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.recibidos li{
  border:1px solid var(--line); border-radius:var(--radio-sm);
  padding:.9rem 1rem;
  background:var(--paper);
}
.recibidos .quien{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.recibidos .quien strong{ font-size:1rem; }
.recibidos .de{ font-size:.85rem; color:var(--muted); }
.recibidos .cuando{
  margin-left:auto; font-size:.75rem; color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.recibidos .recado{
  margin:.5rem 0 0; font-size:.9rem; line-height:1.5; color:var(--ink-2);
}

/* Los modos de alcanzarle son enlaces de verdad, no texto: el punto de esta
   pantalla es que un toque marque el teléfono. */
.recibidos .modos{
  margin-top:.7rem; display:flex; flex-wrap:wrap; gap:.4rem;
}
.recibidos .modos a{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .7rem; border-radius:999px;
  border:1px solid var(--line); background:var(--paper-2);
  font-size:.82rem; font-weight:500; color:var(--ink);
}
.recibidos .modos a:hover{ border-color:var(--ink); }
.recibidos .modos .tic{ width:14px; height:14px; color:var(--muted); }

/* "Borrar" se va a la derecha y se queda en gris hasta que lo tocas. Es una
   acción que no se deshace: no debe competir por la mirada con los botones de
   llamar, que son a lo que se viene. */
.recibidos .borrar-uno{ margin-left:auto; }
.recibidos .borrar-uno button{
  padding:.35rem .7rem; border-radius:999px;
  border:1px solid transparent; background:none;
  font-family:inherit; font-size:.82rem; color:var(--muted);
  cursor:pointer;
}
.recibidos .borrar-uno button:hover{
  border-color:var(--alerta); color:var(--alerta); background:#FEF2F2;
}
/* El separador solo existe cuando las dos caben en el mismo renglón. */
.pie-ligas a + a::before{
  content:"·"; margin-right:.75rem; color:var(--line);
}
@media (max-width:380px){
  .pie-ligas{ flex-direction:column; gap:.5rem; }
  .pie-ligas a + a::before{ content:none; }
}


/* ---------- Dos salidas en la pantalla de activación ----------
   Mismo peso las dos. Una capta cuentas nuevas, la otra evita que el cliente
   que repite acabe con dos perfiles; hacer una botón y la otra letra chica
   sería elegir cuál de los dos problemas prefiero tener. */

.dos-salidas{ display:grid; gap:.6rem; }
.dos-salidas .enviar{
  display:block; width:100%;
  text-align:center; text-decoration:none;
  padding:.95rem 1rem;
  line-height:1.3;
}
.dos-salidas .enviar small{
  display:block; margin-top:.15rem;
  font-size:.8rem; font-weight:500; opacity:.75;
}
.enviar--claro{
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line);
}
.enviar--claro:hover{ border-color:var(--ink); }

.ya-tengo{
  margin-top:.6rem; padding:1.1rem 1.25rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radio);
}

.precargado{
  margin:1.25rem 0 -.5rem;
  padding:.7rem .9rem;
  background:#F5F7FD; border:1px solid var(--acento); border-radius:var(--radio-sm);
  font-size:.88rem; color:var(--ink-2);
}
.precargado strong{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.08em; }


/* ---------- Pie del perfil de emergencia ----------
   Una sola liga, y discreta. Quien abrió esto por una calcomanía de un casco
   no necesita botones de WhatsApp; quien encontró la moto tirada sí necesita
   poder avisarle a la persona. */

.pie-em{
  margin-top:1.5rem;
  /* El padding de abajo no es decoración: sin él, la fila de Compartir y Ver
     QR queda pegada a la liga del perfil y en un teléfono se ven encimadas. */
  padding:1.25rem 1.5rem;
  border-top:1px solid var(--line);
  text-align:center;
}
.pie-em .retrato-em{
  width:44px; height:44px; border-radius:50%;
  object-fit:cover; background:var(--paper-3);
  margin-bottom:.5rem;
}
.pie-em a{
  display:inline-flex; align-items:center; gap:.3rem;
  color:var(--acento); font-weight:600; font-size:.95rem;
  text-decoration:none;
}
.pie-em a:hover{ text-decoration:underline; text-underline-offset:3px; }
.pie-em a .flecha{ width:1em; height:1em; }
.pie-em .puesto{ margin:.2rem 0 0; font-size:.85rem; color:var(--muted); }


/* ---------- Portada en el formulario ---------- */

.fondo-actual{
  display:block; width:100%; height:92px;
  object-fit:cover;
  margin-top:.6rem;
  border-radius:var(--radio-sm);
  border:1px solid var(--line);
}
.quitar-fondo{
  display:flex; align-items:center; gap:.5rem;
  margin-top:.6rem;
  font-size:.88rem; font-weight:400; color:var(--muted);
  cursor:pointer;
}
.quitar-fondo input{ width:auto; margin:0; }


/* ---------- Cifras del perfil ----------
   Dos números y nada más. La tentación es llenar esto de gráficas, pero quien
   abre su liga quiere saber una cosa: si sirvió. El número grande contesta;
   el de 30 días le da sentido al grande. */

.cifras-perfil{
  display:grid;
  /* 9rem y no 13: en un teléfono de 390 las dos cifras caben lado a lado, y
     apiladas se comían media pantalla antes de llegar al formulario. */
  grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr));
  gap:.6rem;
  margin-bottom:1.25rem;
}
.cifras-perfil > div{
  padding:1.1rem 1.25rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radio);
  display:flex; flex-direction:column; gap:.15rem;
}
.cifras-perfil .k{
  font-size:1.75rem; font-weight:700; letter-spacing:-.03em; line-height:1.1;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.cifras-perfil .v{ font-size:.92rem; font-weight:550; color:var(--ink-2); }
.cifras-perfil .m{ font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums; }


/* ---------- Objetos ligados al perfil ----------
   Dejó de ser tabla. En un teléfono angosto no caben tres columnas en 270px,
   y además cada objeto ya no es una fila de lectura: trae una decisión —qué
   abre— que necesita su propio espacio. */

.objetos{ list-style:none; margin:0; padding:0; }
.objetos li{ padding:1.1rem 0; }
.objetos li:first-child{ padding-top:.25rem; }
.objetos li + li{ border-top:1px solid var(--line); }

.objetos .cabeza{
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  margin-bottom:.7rem;
}
.objetos .clave{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight:700; letter-spacing:.08em; font-size:1.02rem;
}
.tenue{ color:var(--muted); font-size:.82rem; }

.modo-objeto .rotulo{
  display:block; margin-bottom:.35rem;
  font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
/* Tres columnas desde que existe el modo mascota; en un teléfono angosto se
   apilan antes que encogerse hasta ser ilegibles. */
.modo-objeto .opciones{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.4rem; }
@media (max-width:420px){
  .modo-objeto .opciones{ grid-template-columns:1fr; }
}
.modo-objeto label{
  position:relative;
  display:block; padding:.6rem .5rem;
  text-align:center;
  border:1px solid var(--line); border-radius:var(--radio-sm);
  background:var(--paper);
  font-size:.88rem; font-weight:500;
  cursor:pointer;
}
.modo-objeto input{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.modo-objeto label.puesta{
  border-color:var(--ink); background:var(--ink); color:#fff; font-weight:600;
}
/* Cada modo con su color cuando está puesto: de un vistazo se ve qué abre
   cada objeto sin leer los tres botones. */
.modo-objeto label.op--emergencia.puesta{ border-color:var(--alerta); background:var(--alerta); }
.modo-objeto label.op--mascota.puesta{ border-color:#1E5F4B; background:#1E5F4B; }
.modo-objeto label:has(input:focus-visible){ outline:2px solid var(--acento); outline-offset:2px; }

.soltarlo{ margin-top:.7rem; }

/* Soltar un código es destructivo pero reversible — el PIN lo recupera. Por eso
   se ve como texto y no como botón rojo: no hay que asustar, hay que permitir. */
.soltar{
  border:0; background:none; padding:.2rem 0; margin:0;
  font:inherit; font-size:.85rem; color:var(--muted);
  text-decoration:underline; text-underline-offset:3px;
  cursor:pointer; white-space:nowrap;
}
.soltar:hover{ color:var(--alerta); }
.soltar:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:4px; }

input.mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing:.14em; text-transform:uppercase;
}
input.mono::placeholder{ letter-spacing:.14em; text-transform:none; }

/* El botón de ligar iba pegado al campo del PIN. */
.objetos + form .boton,
form .par + .boton{ margin-top:1rem; }



/* ---------- 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; }
}