/* ==========================================================================
   Safira — componentes.css
   La biblioteca de componentes. Requiere tokens.css y base.css antes.

   Convención de nombres: bloque, bloque__parte, bloque--variante (en español).
   Pensado para dos contextos: el cliente en el celular (todo tocable, una
   columna) y el equipo en la computadora del local (barra lateral, tablas).

   Índice
     1. Marca (logo recortado, marca de agua)
     2. Íconos
     3. Botones
     4. Campos de formulario
     5. Tarjetas
     6. Insignias y etiquetas
     7. Avisos y tostadas
     8. Tablas
     9. Listas
    10. Barra lateral (escritorio)
    11. Barra inferior (celular) y barra superior
    12. Encabezado de página y migas de pan
    13. Avatar
    14. Antes y después, galería, video
    15. Estado vacío
    16. Modal
    17. Menú desplegable
    18. Pestañas
    19. Barra de progreso
    20. Línea de tiempo
    21. Cifras (panel de la dueña)
   ========================================================================== */


/* ==========================================================================
   1. Marca
   Los SVG del kit vienen en un lienzo de 1500×1500 con el dibujo en el
   centro: alrededor hay mucho aire. El componente .logo recorta ese margen
   con los recuadros medidos sobre los archivos (getBBox), así cada logo ocupa
   exactamente su caja y se alinea bien con el texto.

   Uso:  <span class="logo logo--texto"><img src="../assets/img/logo-texto.svg" alt="Safira"></span>
   Tinta (sin <img>, toma el color de currentColor; sirve para arena sobre
   petróleo en las variantes que no tienen archivo "claro"):
         <span class="logo logo--perro logo--tinta" role="img" aria-label="Safira"></span>
   ========================================================================== */
.logo {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: var(--logo-ancho, 8rem);
  flex-shrink: 0;
  line-height: 0;
}

.logo > img {
  position: absolute;
  max-width: none;
  pointer-events: none;
}

/* Logo completo (cara + Safira + bajada): recuadro 884×880 en (308,310) */
.logo--completo { aspect-ratio: 884 / 880; }
.logo--completo > img { width: 169.683%; height: 170.455%; left: -34.842%; top: -35.227%; }

/* Solo texto (Safira + bajada): recuadro 987×357 en (299,557) */
.logo--texto { aspect-ratio: 987 / 357; }
.logo--texto > img { width: 151.976%; height: 420.168%; left: -30.294%; top: -156.022%; }

/* Isotipo (la cara): recuadro 858×603 en (311,424) */
.logo--isotipo { aspect-ratio: 858 / 603; }
.logo--isotipo > img { width: 174.825%; height: 248.756%; left: -36.247%; top: -70.315%; }

/* Perro sentado: recuadro 661×867 en (417,315) */
.logo--perro { aspect-ratio: 661 / 867; }
.logo--perro > img { width: 226.929%; height: 173.010%; left: -63.086%; top: -36.332%; }

/* Sello circular: recuadro 793×829 en (354,322) */
.logo--sello { aspect-ratio: 793 / 829; }
.logo--sello > img { width: 189.155%; height: 180.941%; left: -44.640%; top: -38.842%; }

/* Variante "tinta": el dibujo pintado con currentColor, para cualquier fondo.
   Es un <svg> que usa los símbolos #marca-isotipo y #marca-perro que app.js
   inyecta (los trazados exactos del kit, con el viewBox ya recortado):
     <svg class="logo logo--isotipo logo--tinta" aria-hidden="true"><use href="#marca-isotipo"></use></svg>
     <svg class="logo logo--perro logo--tinta" role="img" aria-label="Safira"><use href="#marca-perro"></use></svg>
   (No se usa mask-image: Chrome lo bloquea al abrir el archivo con doble clic.) */
svg.logo--tinta {
  overflow: visible;
  height: auto;
  fill: currentColor;
  stroke: none;
}

/* Tamaños frecuentes */
.logo--xs { --logo-ancho: 1.75rem; }
.logo--sm { --logo-ancho: 3rem; }
.logo--md { --logo-ancho: 6rem; }
.logo--lg { --logo-ancho: 10rem; }
.logo--xl { --logo-ancho: 14rem; }
.logo--2xl { --logo-ancho: 20rem; }

/* Marca de agua: el perro sentado muy tenue, de fondo decorativo */
.marca-agua {
  position: absolute;
  pointer-events: none;
  color: var(--marca);
  opacity: 0.06;
  z-index: 0;
}


/* ==========================================================================
   2. Íconos
   Trazo redondeado, como el logo. El sprite lo inyecta app.js:
   <svg class="icono" aria-hidden="true"><use href="#icono-casa"></use></svg>
   ========================================================================== */
.icono {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.3em;
}

.icono--xs { width: 0.875rem; height: 0.875rem; }
.icono--sm { width: 1rem; height: 1rem; }
.icono--md { width: 1.25rem; height: 1.25rem; }
.icono--lg { width: 1.5rem; height: 1.5rem; }
.icono--xl { width: 2rem; height: 2rem; stroke-width: 1.5; }
.icono--2xl { width: 2.75rem; height: 2.75rem; stroke-width: 1.25; }

/* Ícono dentro de un círculo suave */
.icono-redondo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radio-circulo);
  background: var(--marca-suave);
  color: var(--marca);
  flex-shrink: 0;
}

.icono-redondo--grande { width: 3.5rem; height: 3.5rem; }
.icono-redondo--acento { background: var(--acento-suave); color: var(--tostado-600); }
.icono-redondo--exito { background: var(--exito-suave); color: var(--exito); }
.icono-redondo--atencion { background: var(--atencion-suave); color: var(--atencion); }
.icono-redondo--error { background: var(--error-suave); color: var(--error); }


/* ==========================================================================
   3. Botones
   ========================================================================== */
.boton {
  --boton-alto: var(--alto-tactil);
  --boton-pad: var(--esp-5);
  --boton-texto: var(--texto-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--boton-alto);
  padding: 0 var(--boton-pad);
  border: 1px solid transparent;
  border-radius: var(--radio-pildora);
  font-size: var(--boton-texto);
  font-weight: var(--peso-semi);
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: var(--transicion);
}

.boton:active { transform: translateY(1px); }

.boton:disabled,
.boton[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.boton .icono { width: 1.125rem; height: 1.125rem; vertical-align: 0; }

/* Primario: petróleo lleno */
.boton--primario {
  background: var(--marca);
  color: var(--gris-0);
  box-shadow: var(--sombra-1);
}
.boton--primario:hover { background: var(--marca-hover); color: var(--gris-0); box-shadow: var(--sombra-2); }
.boton--primario:active { background: var(--marca-activo); }

/* Secundario: borde, superficie clara */
.boton--secundario {
  background: var(--superficie);
  color: var(--marca);
  border-color: var(--borde-fuerte);
  box-shadow: var(--sombra-1);
}
.boton--secundario:hover { border-color: var(--marca); background: var(--marca-suave); color: var(--marca-hover); }

/* Suave: fondo con tinte, sin borde (acciones secundarias frecuentes) */
.boton--suave {
  background: var(--marca-suave);
  color: var(--marca);
}
.boton--suave:hover { background: var(--marca-suave-2); color: var(--marca-hover); }

/* Fantasma: solo texto */
.boton--fantasma {
  background: transparent;
  color: var(--marca);
}
.boton--fantasma:hover { background: var(--marca-suave); color: var(--marca-hover); }

/* Peligro: terracota, para cancelar o borrar */
.boton--peligro {
  background: var(--error);
  color: var(--gris-0);
}
.boton--peligro:hover { background: var(--error-fuerte); color: var(--gris-0); }

.boton--peligro-suave {
  background: var(--error-suave);
  color: var(--error-fuerte);
}
.boton--peligro-suave:hover { background: var(--error-borde); color: var(--error-fuerte); }

/* Sobre superficies oscuras (barra lateral, panel de portada) */
.boton--arena {
  background: var(--color-arena);
  color: var(--petroleo-800);
}
.boton--arena:hover { background: var(--tostado-100); color: var(--petroleo-900); }

.boton--contorno-claro {
  background: transparent;
  color: var(--color-crema);
  border-color: rgba(243, 239, 235, 0.4);
}
.boton--contorno-claro:hover { background: rgba(243, 239, 235, 0.1); color: var(--color-crema); border-color: var(--color-crema); }

/* Tamaños */
.boton--chico { --boton-alto: 2.125rem; --boton-pad: var(--esp-3); --boton-texto: var(--texto-sm); }
.boton--grande { --boton-alto: 3.25rem; --boton-pad: var(--esp-7); --boton-texto: var(--texto-md); }
.boton--bloque { width: 100%; }

/* Solo ícono: cuadrado (redondo) */
.boton--icono {
  padding: 0;
  width: var(--boton-alto);
  aspect-ratio: 1;
}
.boton--icono .icono { width: 1.25rem; height: 1.25rem; }

/* Esquinas rectas (para alinearse con campos en formularios de escritorio) */
.boton--recto { border-radius: var(--radio-md); }

/* Estado "trabajando": muestra un anillo girando y oculta el texto */
.boton[aria-busy="true"] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.boton[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 1.125rem; height: 1.125rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--gris-0);
  animation: girar 0.8s linear infinite;
}
.boton--secundario[aria-busy="true"]::after,
.boton--fantasma[aria-busy="true"]::after,
.boton--suave[aria-busy="true"]::after {
  border-color: var(--petroleo-200);
  border-top-color: var(--marca);
}

@keyframes girar { to { transform: rotate(360deg); } }

/* Grupo de botones */
.botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  align-items: center;
}
.botones--derecha { justify-content: flex-end; }
.botones--centrar { justify-content: center; }
.botones--apilar-celular { flex-direction: column; align-items: stretch; }
@media (min-width: 56rem) {
  .botones--apilar-celular { flex-direction: row; align-items: center; }
}


/* ==========================================================================
   4. Campos de formulario
   Estructura:
   <div class="campo">
     <label class="campo__etiqueta" for="x">Correo</label>
     <input class="campo__entrada" id="x" type="email">
     <p class="campo__ayuda">Te mandamos el enlace ahí.</p>
     <p class="campo__error">...</p>  (solo visible con .campo--error)
   </div>
   ========================================================================== */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  min-width: 0;
}

.campo__etiqueta {
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--tinta);
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
}

.campo__opcional {
  font-weight: var(--peso-normal);
  color: var(--tinta-tenue);
  font-size: var(--texto-xs);
}

.campo__entrada {
  width: 100%;
  min-height: var(--alto-tactil);
  padding: 0 var(--esp-4);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-md);
  color: var(--tinta);
  font-size: var(--texto-base);
  line-height: 1.4;
  box-shadow: var(--sombra-interior);
  transition: var(--transicion);
  -webkit-appearance: none;
  appearance: none;
}

/* En el celular el texto del campo va a 16px para que iOS no haga zoom */
@media (max-width: 55.99rem) {
  .campo__entrada { font-size: 1rem; }
}

.campo__entrada::placeholder { color: var(--gris-400); }

.campo__entrada:hover { border-color: var(--gris-400); }

.campo__entrada:focus,
.campo__entrada:focus-visible {
  outline: none;
  border-color: var(--marca);
  box-shadow: var(--sombra-foco);
}

.campo__entrada:disabled,
.campo__entrada[readonly] {
  background: var(--fondo-hundido);
  color: var(--tinta-suave);
  cursor: not-allowed;
  box-shadow: none;
}

.campo__entrada[readonly] { cursor: default; }

textarea.campo__entrada {
  min-height: 6.5rem;
  padding-block: var(--esp-3);
  resize: vertical;
  line-height: var(--interlineado-normal);
}

select.campo__entrada {
  padding-right: var(--esp-10);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2356625F' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--esp-3) center;
  cursor: pointer;
}

.campo__ayuda {
  font-size: var(--texto-sm);
  color: var(--tinta-suave);
  line-height: var(--interlineado-justo);
}

.campo__error {
  display: none;
  align-items: flex-start;
  gap: var(--esp-1);
  font-size: var(--texto-sm);
  color: var(--error);
  font-weight: var(--peso-medio);
  line-height: var(--interlineado-justo);
}

.campo--error .campo__error { display: flex; }
.campo--error .campo__entrada { border-color: var(--error); }
.campo--error .campo__entrada:focus { box-shadow: var(--sombra-foco-error); }
.campo--error .campo__ayuda { display: none; }

.campo--exito .campo__entrada { border-color: var(--exito); }

/* Campo con ícono adelante o texto fijo (prefijo) */
.campo__caja {
  position: relative;
  display: flex;
  align-items: center;
}

.campo__caja > .icono {
  position: absolute;
  left: var(--esp-4);
  color: var(--tinta-tenue);
  pointer-events: none;
}

.campo__caja > .icono + .campo__entrada { padding-left: calc(var(--esp-4) + 1.25rem + var(--esp-2)); }

.campo__caja .campo__entrada:focus ~ .icono,
.campo__caja:focus-within > .icono { color: var(--marca); }

.campo__prefijo,
.campo__sufijo {
  display: flex;
  align-items: center;
  min-height: var(--alto-tactil);
  padding: 0 var(--esp-3);
  background: var(--fondo-hundido);
  border: 1px solid var(--borde-fuerte);
  color: var(--tinta-suave);
  font-size: var(--texto-sm);
  white-space: nowrap;
}
.campo__prefijo { border-right: 0; border-radius: var(--radio-md) 0 0 var(--radio-md); }
.campo__sufijo { border-left: 0; border-radius: 0 var(--radio-md) var(--radio-md) 0; }
.campo__prefijo + .campo__entrada { border-radius: 0 var(--radio-md) var(--radio-md) 0; }
.campo__entrada:has(+ .campo__sufijo) { border-radius: var(--radio-md) 0 0 var(--radio-md); }

/* Campo grande (pantalla de entrada, buscador principal) */
.campo--grande .campo__entrada { min-height: 3.25rem; font-size: var(--texto-md); border-radius: var(--radio-lg); }
.campo--grande .campo__caja > .icono { left: var(--esp-4); }

/* Casillas y radios */
.opcion {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  cursor: pointer;
  min-height: var(--alto-tactil);
  padding-block: var(--esp-2);
}

.opcion input {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  accent-color: var(--marca);
  cursor: pointer;
}

.opcion__texto { line-height: var(--interlineado-justo); }
.opcion__detalle { display: block; font-size: var(--texto-sm); color: var(--tinta-suave); margin-top: var(--esp-1); }

/* Opciones con borde, tipo tarjeta (para elegir servicios en el pedido de turno) */
.opcion--tarjeta {
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-md);
  background: var(--superficie);
  transition: var(--transicion);
}
.opcion--tarjeta:hover { border-color: var(--marca); }
.opcion--tarjeta:has(input:checked) { border-color: var(--marca); background: var(--marca-suave); box-shadow: inset 0 0 0 1px var(--marca); }

/* Interruptor (los avisos activos / inactivos de la dueña) */
.interruptor {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  cursor: pointer;
  min-height: var(--alto-tactil);
}

.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }

.interruptor__pista {
  width: 2.75rem;
  height: 1.625rem;
  border-radius: var(--radio-pildora);
  background: var(--gris-300);
  position: relative;
  transition: var(--transicion);
  flex-shrink: 0;
}

.interruptor__pista::after {
  content: "";
  position: absolute;
  top: 0.1875rem; left: 0.1875rem;
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  background: var(--gris-0);
  box-shadow: var(--sombra-1);
  transition: transform var(--dur-normal) var(--curva);
}

.interruptor input:checked + .interruptor__pista { background: var(--marca); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(1.125rem); }
.interruptor input:focus-visible + .interruptor__pista { box-shadow: var(--sombra-foco); }
.interruptor input:disabled + .interruptor__pista { opacity: 0.5; cursor: not-allowed; }

/* Segmentos: elegir una de pocas opciones (todos / clientes / empleados) */
.segmentos {
  display: inline-flex;
  padding: var(--esp-1);
  background: var(--fondo-hundido);
  border-radius: var(--radio-pildora);
  gap: var(--esp-1);
}

.segmentos__opcion {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.125rem;
  padding: 0 var(--esp-4);
  border-radius: var(--radio-pildora);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--tinta-suave);
  cursor: pointer;
  transition: var(--transicion);
  white-space: nowrap;
}

.segmentos__opcion input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.segmentos__opcion:hover { color: var(--tinta); }
.segmentos__opcion:has(input:checked),
.segmentos__opcion[aria-pressed="true"] { background: var(--superficie); color: var(--marca); box-shadow: var(--sombra-1); }
.segmentos__opcion:has(input:focus-visible) { box-shadow: var(--sombra-foco); }
.segmentos--bloque { display: flex; }
.segmentos--bloque .segmentos__opcion { flex: 1; }

/* Varios campos en una fila (escritorio) */
.grupo-campos {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: repeat(var(--columnas, 2), minmax(0, 1fr));
}
.grupo-campos--3 { --columnas: 3; }
@media (max-width: 40rem) {
  .grupo-campos { grid-template-columns: minmax(0, 1fr); }
}

.formulario { display: flex; flex-direction: column; gap: var(--esp-5); }

.formulario__seccion { display: flex; flex-direction: column; gap: var(--esp-4); }

.formulario__titulo {
  font-size: var(--texto-md);
  font-weight: var(--peso-semi);
  padding-bottom: var(--esp-2);
  border-bottom: 1px solid var(--borde);
}

.formulario__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  justify-content: flex-end;
  padding-top: var(--esp-2);
}

@media (max-width: 40rem) {
  .formulario__acciones { flex-direction: column-reverse; }
  .formulario__acciones .boton { width: 100%; }
}


/* ==========================================================================
   5. Tarjetas
   ========================================================================== */
.tarjeta {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-1);
  display: flex;
  flex-direction: column;
}

/* Sin overflow hidden (así un menú desplegable adentro no se recorta):
   los hijos de las puntas heredan el radio para que imagen y pie queden redondeados. */
.tarjeta > :first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.tarjeta > :last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.tarjeta--recortada { overflow: hidden; }

.tarjeta__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-5) var(--esp-5) 0;
}

.tarjeta__titulo {
  font-size: var(--texto-lg);
  font-weight: var(--peso-negrita);
  line-height: var(--interlineado-justo);
}

.tarjeta__subtitulo {
  font-size: var(--texto-sm);
  color: var(--tinta-suave);
  margin-top: var(--esp-1);
}

.tarjeta__cuerpo { padding: var(--esp-5); flex: 1; }
.tarjeta__cabecera + .tarjeta__cuerpo { padding-top: var(--esp-4); }

.tarjeta__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  border-top: 1px solid var(--borde);
  background: var(--superficie-suave);
}

/* Imagen al tope de la tarjeta */
.tarjeta__imagen { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }

/* Variantes */
.tarjeta--plana { box-shadow: none; }
.tarjeta--elevada { box-shadow: var(--sombra-2); border-color: transparent; }
.tarjeta--compacta .tarjeta__cabecera { padding: var(--esp-4) var(--esp-4) 0; }
.tarjeta--compacta .tarjeta__cuerpo { padding: var(--esp-4); }
.tarjeta--compacta .tarjeta__pie { padding: var(--esp-3) var(--esp-4); }

/* Tinte de marca (para destacar "cuándo le toca volver") */
.tarjeta--marca {
  background: var(--superficie-marca);
  border-color: var(--borde-marca);
}

/* Acento tostado (bienvenida, consejo) */
.tarjeta--acento {
  background: var(--acento-suave);
  border-color: var(--tostado-200);
}

/* Oscura: petróleo con texto crema */
.tarjeta--oscura,
.superficie-oscura {
  background: var(--superficie-oscura);
  border-color: transparent;
  color: var(--tinta-inversa);
}
.tarjeta--oscura .tarjeta__titulo,
.tarjeta--oscura h1, .tarjeta--oscura h2, .tarjeta--oscura h3 { color: var(--gris-0); }
.tarjeta--oscura .tarjeta__subtitulo,
.tarjeta--oscura .texto-suave { color: var(--tinta-inversa-suave); }
.tarjeta--oscura .tarjeta__pie { background: rgba(0, 0, 0, 0.12); border-color: rgba(243, 239, 235, 0.12); }

/* Interactiva: toda la tarjeta es un enlace o botón */
.tarjeta--interactiva {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: var(--transicion);
}
.tarjeta--interactiva:hover { border-color: var(--borde-marca); box-shadow: var(--sombra-2); transform: translateY(-1px); color: inherit; }
.tarjeta--interactiva:active { transform: translateY(0); }

/* Franja de color a la izquierda (ej. color del servicio) */
.tarjeta--franja { border-left: 4px solid var(--franja, var(--marca)); }

/* Tarjeta con alerta médica del perro */
.tarjeta--alerta { border-color: var(--error-borde); }
.tarjeta--alerta .tarjeta__cabecera { color: var(--error-fuerte); }


/* ==========================================================================
   6. Insignias y etiquetas
   .insignia = estado (turno, aviso). .etiqueta = categoría (servicio, tema).
   ========================================================================== */
.insignia {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  min-height: 1.5rem;
  padding: 0 var(--esp-2);
  border-radius: var(--radio-pildora);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  background: var(--insignia-fondo, var(--fondo-hundido));
  color: var(--insignia-tinta, var(--tinta-suave));
  border: 1px solid var(--insignia-borde, transparent);
}

.insignia::before {
  content: "";
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

.insignia--sin-punto::before { display: none; }

.insignia--grande { min-height: 1.875rem; padding: 0 var(--esp-3); font-size: var(--texto-sm); }

.insignia--neutro   { --insignia-fondo: var(--fondo-hundido);  --insignia-tinta: var(--tinta-suave); }
.insignia--marca    { --insignia-fondo: var(--marca-suave);    --insignia-tinta: var(--petroleo-700); }
.insignia--info     { --insignia-fondo: var(--info-suave);     --insignia-tinta: var(--info-fuerte); }
.insignia--exito    { --insignia-fondo: var(--exito-suave);    --insignia-tinta: var(--exito-fuerte); }
.insignia--atencion { --insignia-fondo: var(--atencion-suave); --insignia-tinta: var(--atencion-fuerte); }
.insignia--error    { --insignia-fondo: var(--error-suave);    --insignia-tinta: var(--error-fuerte); }
.insignia--acento   { --insignia-fondo: var(--acento-suave);   --insignia-tinta: var(--tostado-700); }

/* Estados de turno, con el mismo nombre que en datos.js (insignia--${estado}) */
.insignia--solicitado { --insignia-fondo: var(--atencion-suave); --insignia-tinta: var(--atencion-fuerte); }
.insignia--confirmado { --insignia-fondo: var(--info-suave);     --insignia-tinta: var(--info-fuerte); }
.insignia--enCurso    { --insignia-fondo: var(--acento-suave);   --insignia-tinta: var(--tostado-700); }
.insignia--listo      { --insignia-fondo: var(--exito-suave);    --insignia-tinta: var(--exito-fuerte); }
.insignia--entregado  { --insignia-fondo: var(--fondo-hundido);  --insignia-tinta: var(--tinta-suave); }
.insignia--cancelado  { --insignia-fondo: var(--error-suave);    --insignia-tinta: var(--error-fuerte); }

/* Estados de aviso de reconvocatoria */
.insignia--enviado    { --insignia-fondo: var(--exito-suave);    --insignia-tinta: var(--exito-fuerte); }
.insignia--programado { --insignia-fondo: var(--info-suave);     --insignia-tinta: var(--info-fuerte); }

/* Insignia "en curso" con pulso suave */
.insignia--enCurso::before { animation: pulso 1.6s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.3; } }

/* Etiqueta de categoría (servicios): punto de color + texto neutro */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 1.625rem;
  padding: 0 var(--esp-3) 0 var(--esp-2);
  border-radius: var(--radio-pildora);
  background: var(--superficie);
  border: 1px solid var(--borde);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--tinta);
  white-space: nowrap;
}

.etiqueta::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--etiqueta-color, var(--marca));
  flex-shrink: 0;
}

.etiqueta--teal    { --etiqueta-color: var(--servicio-teal); }
.etiqueta--tostado { --etiqueta-color: var(--servicio-tostado); }
.etiqueta--arena   { --etiqueta-color: var(--servicio-arena); }
.etiqueta--alerta  { --etiqueta-color: var(--servicio-alerta); }

/* Contador: número chico en círculo (solicitudes pendientes) */
.contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--esp-1);
  border-radius: var(--radio-pildora);
  background: var(--atencion);
  color: var(--gris-0);
  font-size: var(--texto-xs);
  font-weight: var(--peso-negrita);
  line-height: 1;
}

.contador--marca { background: var(--marca); }
.contador--error { background: var(--error); }


/* ==========================================================================
   7. Avisos (en línea) y tostadas (flotantes)
   ========================================================================== */
.aviso {
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
  padding: var(--esp-4);
  border-radius: var(--radio-lg);
  background: var(--aviso-fondo, var(--info-suave));
  border: 1px solid var(--aviso-borde, var(--info-borde));
  color: var(--tinta);
  font-size: var(--texto-base);
  line-height: var(--interlineado-justo);
}

.aviso > .icono { color: var(--aviso-tinta, var(--info)); margin-top: 0.05em; }
.aviso__titulo { font-weight: var(--peso-semi); color: var(--aviso-tinta, var(--info-fuerte)); }
.aviso__titulo + * { margin-top: var(--esp-1); }
.aviso__cuerpo { flex: 1; min-width: 0; }
.aviso__cerrar { margin: -0.25rem -0.25rem 0 0; color: var(--tinta-suave); }

.aviso--info     { --aviso-fondo: var(--info-suave);     --aviso-borde: var(--info-borde);     --aviso-tinta: var(--info-fuerte); }
.aviso--exito    { --aviso-fondo: var(--exito-suave);    --aviso-borde: var(--exito-borde);    --aviso-tinta: var(--exito-fuerte); }
.aviso--atencion { --aviso-fondo: var(--atencion-suave); --aviso-borde: var(--atencion-borde); --aviso-tinta: var(--atencion-fuerte); }
.aviso--error    { --aviso-fondo: var(--error-suave);    --aviso-borde: var(--error-borde);    --aviso-tinta: var(--error-fuerte); }
.aviso--acento   { --aviso-fondo: var(--acento-suave);   --aviso-borde: var(--tostado-200);    --aviso-tinta: var(--tostado-700); }

/* Tostadas: las crea App.avisar() */
.tostadas {
  position: fixed;
  z-index: var(--capa-aviso);
  left: 50%;
  bottom: calc(var(--alto-barra-inferior) + env(safe-area-inset-bottom) + var(--esp-4));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  width: min(calc(100% - var(--esp-8)), 26rem);
  pointer-events: none;
}

@media (min-width: 56rem) {
  .tostadas { left: auto; right: var(--esp-6); bottom: var(--esp-6); transform: none; }
}

.tostada {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-lg);
  background: var(--gris-800);
  color: var(--gris-0);
  box-shadow: var(--sombra-3);
  font-size: var(--texto-sm);
  line-height: var(--interlineado-justo);
  animation: tostada-entrar var(--dur-lenta) var(--curva);
}

.tostada > .icono { color: var(--color-arena); margin-top: 0.1em; }
.tostada--exito > .icono { color: #9BD3B0; }
.tostada--error > .icono { color: #F0A89E; }
.tostada--atencion > .icono { color: #F1C77A; }
.tostada__cerrar { color: var(--gris-400); margin-left: auto; }
.tostada__cerrar:hover { color: var(--gris-0); }
.tostada--saliendo { animation: tostada-salir var(--dur-normal) var(--curva-salida) forwards; }

@keyframes tostada-entrar { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
@keyframes tostada-salir { to { opacity: 0; transform: translateY(0.5rem); } }


/* ==========================================================================
   8. Tablas de datos
   <div class="tabla-envoltura"><table class="tabla">…</table></div>
   ========================================================================== */
.tabla-envoltura {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-1);
}

.tabla {
  width: 100%;
  font-size: var(--texto-base);
  text-align: left;
}

.tabla th,
.tabla td {
  padding: var(--esp-3) var(--esp-4);
  vertical-align: middle;
  border-bottom: 1px solid var(--borde);
}

.tabla th:first-child, .tabla td:first-child { padding-left: var(--esp-5); }
.tabla th:last-child, .tabla td:last-child { padding-right: var(--esp-5); }

.tabla thead th {
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-letras-sello);
  color: var(--tinta-suave);
  background: var(--superficie-suave);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background-color var(--dur-rapida) var(--curva); }
.tabla tbody tr:hover { background: var(--superficie-suave); }

.tabla--compacta th, .tabla--compacta td { padding: var(--esp-2) var(--esp-3); font-size: var(--texto-sm); }
.tabla--cebra tbody tr:nth-child(even) { background: var(--superficie-suave); }
.tabla--sin-marco { background: transparent; border: 0; box-shadow: none; border-radius: 0; }

.tabla__num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla__acciones { text-align: right; white-space: nowrap; }
.tabla__acciones .boton { vertical-align: middle; }
.tabla__secundario { display: block; font-size: var(--texto-sm); color: var(--tinta-suave); margin-top: 0.125rem; }
.tabla__fila--resaltada td { background: var(--marca-suave); }
.tabla__fila--enlace { cursor: pointer; }
.tabla__fila--apagada td { color: var(--tinta-tenue); }

/* Celda con avatar + nombre */
.tabla__persona { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }

/* Pie de tabla: cuenta y paginación */
.tabla__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-5);
  font-size: var(--texto-sm);
  color: var(--tinta-suave);
  background: var(--superficie-suave);
  border-top: 1px solid var(--borde);
}


/* ==========================================================================
   9. Listas
   Para el celular: filas tocables con avatar, texto y algo a la derecha.
   <ul class="lista" role="list">
     <li><a class="lista__item" href="#">
       <span class="avatar avatar--md">Lo</span>
       <span class="lista__cuerpo">
         <span class="lista__titulo">Lola</span>
         <span class="lista__detalle">Caniche toy · 7 años</span>
       </span>
       <span class="lista__extremo">…</span>
     </a></li>
   </ul>
   ========================================================================== */
.lista {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-1);
}

.lista > li + li { border-top: 1px solid var(--borde); }
.lista > li:first-child, .lista > li:first-child > .lista__item { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.lista > li:last-child, .lista > li:last-child > .lista__item { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }

.lista__item {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  min-height: 3.75rem;
  color: inherit;
  text-decoration: none;
  width: 100%;
  transition: background-color var(--dur-rapida) var(--curva);
}

a.lista__item:hover, button.lista__item:hover { background: var(--superficie-suave); color: inherit; }
a.lista__item:active, button.lista__item:active { background: var(--marca-suave); }

.lista__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.lista__titulo { font-weight: var(--peso-semi); line-height: var(--interlineado-justo); color: var(--tinta); }
.lista__detalle { font-size: var(--texto-sm); color: var(--tinta-suave); line-height: var(--interlineado-justo); }
.lista__extremo { display: flex; align-items: center; gap: var(--esp-2); flex-shrink: 0; color: var(--tinta-tenue); }
.lista__extremo .icono { color: var(--gris-400); }

/* Hora destacada a la izquierda (agenda del día) */
.lista__hora {
  flex-shrink: 0;
  width: 3.25rem;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
  color: var(--marca);
  text-align: center;
  padding: var(--esp-1) 0;
  border-radius: var(--radio-sm);
  background: var(--marca-suave);
}

/* Lista suelta, sin marco (dentro de una tarjeta) */
.lista--suelta { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.lista--suelta .lista__item { padding-inline: 0; }

/* Lista como tarjetas separadas */
.lista--tarjetas { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: var(--esp-3); }
.lista--tarjetas > li { border: 1px solid var(--borde) !important; border-radius: var(--radio-lg); background: var(--superficie); box-shadow: var(--sombra-1); }
.lista--tarjetas > li > .lista__item { border-radius: inherit; }

/* Lista de definición: pares rótulo → valor (datos del perro) */
.datos {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--esp-2) var(--esp-5);
  margin: 0;
}
.datos dt { font-size: var(--texto-sm); color: var(--tinta-suave); font-weight: var(--peso-medio); }
.datos dd { margin: 0; font-weight: var(--peso-medio); }
.datos--apilada { grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); }
.datos--apilada dt { margin-bottom: -0.375rem; }


/* ==========================================================================
   10. Barra lateral (escritorio: empleado y dueña)
   Petróleo con el logo en arena. En celular se oculta y manda la barra inferior.
   ========================================================================== */
.barra-lateral {
  display: none;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  flex-direction: column;
  width: var(--ancho-lateral);
  background: var(--superficie-oscura);
  color: var(--tinta-inversa);
  padding: var(--esp-6) var(--esp-4) var(--esp-4);
  overflow-y: auto;
}

@media (min-width: 56rem) {
  .barra-lateral { display: flex; }
}

.barra-lateral__marca {
  display: flex;
  justify-content: flex-start;
  padding: 0 var(--esp-3) var(--esp-6);
  margin-bottom: var(--esp-2);
  border-bottom: 1px solid rgba(243, 239, 235, 0.12);
}

.barra-lateral__nav {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.barra-lateral__seccion {
  padding: var(--esp-5) var(--esp-3) var(--esp-2);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-letras-sello);
  color: rgba(222, 204, 190, 0.65);
}

.barra-lateral__enlace {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: 2.625rem;
  padding: 0 var(--esp-3);
  border-radius: var(--radio-md);
  color: rgba(243, 239, 235, 0.82);
  text-decoration: none;
  font-weight: var(--peso-medio);
  font-size: var(--texto-base);
  transition: var(--transicion);
  width: 100%;
}

.barra-lateral__enlace .icono { width: 1.25rem; height: 1.25rem; opacity: 0.85; }
.barra-lateral__enlace:hover { background: rgba(243, 239, 235, 0.08); color: var(--gris-0); }
.barra-lateral__enlace .contador { margin-left: auto; }

.barra-lateral__enlace--activo,
.barra-lateral__enlace[aria-current="page"] {
  background: rgba(243, 239, 235, 0.14);
  color: var(--gris-0);
  font-weight: var(--peso-semi);
  box-shadow: inset 3px 0 0 var(--color-arena);
}
.barra-lateral__enlace--activo .icono,
.barra-lateral__enlace[aria-current="page"] .icono { opacity: 1; color: var(--color-arena); }

.barra-lateral__pie {
  margin-top: auto;
  padding-top: var(--esp-4);
  border-top: 1px solid rgba(243, 239, 235, 0.12);
}

/* Quién está usando el sistema */
.barra-lateral__usuario {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-md);
  color: inherit;
  text-decoration: none;
  width: 100%;
}
.barra-lateral__usuario:hover { background: rgba(243, 239, 235, 0.08); color: inherit; }
.barra-lateral__usuario .avatar { --avatar-fondo: var(--color-arena); --avatar-tinta: var(--petroleo-800); }
.barra-lateral__usuario-nombre { font-weight: var(--peso-semi); font-size: var(--texto-sm); line-height: 1.2; }
.barra-lateral__usuario-rol { font-size: var(--texto-xs); color: rgba(222, 204, 190, 0.8); }


/* ==========================================================================
   11. Barra inferior (celular: cliente) y barra superior
   ========================================================================== */
.barra-inferior {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--capa-barra);
  display: flex;
  justify-content: center;
  background: rgba(253, 251, 249, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 56rem) {
  .app--escritorio .barra-inferior { display: none; }
}

.barra-inferior__lista {
  display: flex;
  width: 100%;
  max-width: var(--ancho-angosto);
  list-style: none;
  margin: 0; padding: 0;
}

.barra-inferior__lista > li { flex: 1; }

.barra-inferior__enlace {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  height: var(--alto-barra-inferior);
  color: var(--tinta-suave);
  text-decoration: none;
  font-size: 0.6875rem;
  font-weight: var(--peso-semi);
  letter-spacing: 0.01em;
  transition: var(--transicion);
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.barra-inferior__enlace .icono { width: 1.5rem; height: 1.5rem; }
.barra-inferior__enlace:hover { color: var(--marca); }

.barra-inferior__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 1.875rem;
  border-radius: var(--radio-pildora);
  transition: var(--transicion);
}

.barra-inferior__enlace--activo,
.barra-inferior__enlace[aria-current="page"] { color: var(--marca); }
.barra-inferior__enlace--activo .barra-inferior__icono,
.barra-inferior__enlace[aria-current="page"] .barra-inferior__icono { background: var(--marca-suave-2); }
.barra-inferior__enlace--activo .icono,
.barra-inferior__enlace[aria-current="page"] .icono { stroke-width: 2.1; }

/* Puntito de novedad sobre un ícono */
.barra-inferior__punto {
  position: absolute;
  top: 0.5rem;
  left: calc(50% + 0.4rem);
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--atencion);
  box-shadow: 0 0 0 2px var(--superficie);
}

/* Barra superior del celular: logo a la izquierda, acciones a la derecha */
.barra-superior {
  position: sticky;
  top: 0;
  z-index: var(--capa-barra);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  min-height: var(--alto-barra);
  padding: var(--esp-2) var(--esp-4);
  background: rgba(243, 239, 235, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
}

.barra-superior--con-borde { border-bottom-color: var(--borde); }
.barra-superior__acciones { display: flex; align-items: center; gap: var(--esp-1); }

/* Navegación horizontal dentro de la barra superior (el cliente en escritorio):
   <nav class="barra-superior__nav"><ul class="barra-superior__lista" data-nav-actual>
     <li><a class="barra-superior__enlace" href><svg class="icono">…</svg>Inicio</a></li>
   El enlace actual lleva aria-current="page" (lo pone data-nav-actual o la página). */
.barra-superior__nav { display: flex; align-items: center; min-width: 0; }

.barra-superior__lista {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.barra-superior__enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 2.5rem;
  padding: 0 var(--esp-4);
  border-radius: var(--radio-pildora);
  color: var(--tinta-suave);
  text-decoration: none;
  font-size: var(--texto-base);
  font-weight: var(--peso-semi);
  white-space: nowrap;
  transition: var(--transicion);
}

.barra-superior__enlace .icono { width: 1.25rem; height: 1.25rem; }
.barra-superior__enlace:hover { color: var(--marca); background: var(--marca-suave); }

.barra-superior__enlace--activo,
.barra-superior__enlace[aria-current="page"] { color: var(--marca); background: var(--marca-suave-2); }
.barra-superior__enlace--activo .icono,
.barra-superior__enlace[aria-current="page"] .icono { stroke-width: 2.1; }

/* Barra superior de escritorio (sobre el contenido, al lado de la barra lateral) */
.barra-escritorio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: var(--alto-barra);
  padding: var(--esp-2) var(--esp-8);
  border-bottom: 1px solid var(--borde);
  background: var(--fondo);
}


/* ==========================================================================
   12. Encabezado de página y migas de pan
   ========================================================================== */
.encabezado-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--esp-4);
  padding-block: var(--esp-6) var(--esp-5);
}

.encabezado-pagina__texto { min-width: 0; flex: 1 1 18rem; }

.encabezado-pagina__volver {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--tinta-suave);
  text-decoration: none;
  margin-bottom: var(--esp-2);
  min-height: 1.75rem;
}
.encabezado-pagina__volver:hover { color: var(--marca); }

.encabezado-pagina__sobre {
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--marca);
  margin-bottom: var(--esp-1);
}

.encabezado-pagina__titulo {
  font-size: var(--texto-2xl);
  font-weight: var(--peso-extra);
  line-height: var(--interlineado-apretado);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
}

.encabezado-pagina__bajada {
  margin-top: var(--esp-2);
  color: var(--tinta-suave);
  font-size: var(--texto-base);
  max-width: 60ch;
}

.encabezado-pagina__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  align-items: center;
}

/* Variante con avatar grande (ficha del perro) */
.encabezado-pagina--con-avatar .encabezado-pagina__texto { display: flex; gap: var(--esp-4); align-items: center; }

@media (max-width: 55.99rem) {
  .encabezado-pagina { padding-block: var(--esp-4) var(--esp-4); }
  .encabezado-pagina__titulo { font-size: var(--texto-xl); }
  .encabezado-pagina__acciones { width: 100%; }
  .encabezado-pagina__acciones .boton { flex: 1; }
}

/* Encabezado de sección dentro de la página */
.encabezado-seccion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-3);
}
.encabezado-seccion__titulo { font-size: var(--texto-lg); font-weight: var(--peso-negrita); }
.encabezado-seccion__enlace { font-size: var(--texto-sm); font-weight: var(--peso-semi); white-space: nowrap; }

/* Migas de pan */
.migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--texto-sm);
  color: var(--tinta-suave);
}

.migas li { display: inline-flex; align-items: center; gap: var(--esp-1); }

.migas li + li::before {
  content: "";
  display: inline-block;
  width: 0.375rem; height: 0.375rem;
  border-right: 1.5px solid var(--gris-400);
  border-bottom: 1.5px solid var(--gris-400);
  transform: rotate(-45deg);
  margin: 0 var(--esp-1) 0 0.125rem;
}

.migas a { color: var(--tinta-suave); text-decoration: none; font-weight: var(--peso-medio); }
.migas a:hover { color: var(--marca); }
.migas [aria-current="page"] { color: var(--tinta); font-weight: var(--peso-semi); }


/* ==========================================================================
   13. Avatar del perro (y de las personas)
   Circular. Con foto: <span class="avatar avatar--lg"><img class="avatar__foto" src alt></span>
   Sin foto: iniciales. El tono (--1 a --6) lo asigna App.tonoAvatar(nombre).
   ========================================================================== */
.avatar {
  --avatar-tam: 2.5rem;
  --avatar-fondo: var(--avatar-1-fondo);
  --avatar-tinta: var(--avatar-1-tinta);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-tam);
  height: var(--avatar-tam);
  flex-shrink: 0;
  border-radius: var(--radio-circulo);
  background: var(--avatar-fondo);
  color: var(--avatar-tinta);
  font-size: calc(var(--avatar-tam) * 0.38);
  font-weight: var(--peso-negrita);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
  overflow: hidden;
  user-select: none;
  box-shadow: inset 0 0 0 1px rgba(17, 94, 102, 0.08);
}

.avatar__foto { width: 100%; height: 100%; object-fit: cover; }

.avatar--xs { --avatar-tam: 1.5rem; }
.avatar--sm { --avatar-tam: 2rem; }
.avatar--md { --avatar-tam: 2.5rem; }
.avatar--lg { --avatar-tam: 3.5rem; }
.avatar--xl { --avatar-tam: 5rem; }
.avatar--2xl { --avatar-tam: 7rem; }

.avatar--1 { --avatar-fondo: var(--avatar-1-fondo); --avatar-tinta: var(--avatar-1-tinta); }
.avatar--2 { --avatar-fondo: var(--avatar-2-fondo); --avatar-tinta: var(--avatar-2-tinta); }
.avatar--3 { --avatar-fondo: var(--avatar-3-fondo); --avatar-tinta: var(--avatar-3-tinta); }
.avatar--4 { --avatar-fondo: var(--avatar-4-fondo); --avatar-tinta: var(--avatar-4-tinta); }
.avatar--5 { --avatar-fondo: var(--avatar-5-fondo); --avatar-tinta: var(--avatar-5-tinta); }
.avatar--6 { --avatar-fondo: var(--avatar-6-fondo); --avatar-tinta: var(--avatar-6-tinta); }

/* Avatar lleno petróleo (el usuario actual) */
.avatar--marca { --avatar-fondo: var(--marca); --avatar-tinta: var(--gris-0); }

/* Borde grueso, para la ficha del perro sobre crema */
.avatar--marco { box-shadow: 0 0 0 3px var(--superficie), 0 0 0 4px var(--borde), var(--sombra-2); }

/* Avatar "perro sin foto" con la carita del isotipo en lugar de iniciales */
.avatar--isotipo { background: var(--acento-suave); color: var(--marca); }
.avatar--isotipo .logo { --logo-ancho: 62%; }

/* Marca de estado (verde: listo, etc.) en la esquina */
.avatar__estado {
  position: absolute;
  right: 0; bottom: 0;
  width: 28%; height: 28%;
  min-width: 0.625rem; min-height: 0.625rem;
  border-radius: 50%;
  background: var(--exito);
  box-shadow: 0 0 0 2px var(--superficie);
}
.avatar__estado--atencion { background: var(--atencion); }
.avatar__estado--error { background: var(--error); }

/* Varios avatares apilados */
.avatar-grupo { display: inline-flex; }
.avatar-grupo .avatar { box-shadow: 0 0 0 2px var(--superficie); }
.avatar-grupo .avatar + .avatar { margin-left: calc(var(--avatar-tam) * -0.3); }


/* ==========================================================================
   14. Antes y después, galería y video
   <div class="antes-despues">
     <figure class="antes-despues__foto"><img src alt><figcaption class="antes-despues__rotulo">Antes</figcaption></figure>
     <figure class="antes-despues__foto antes-despues__foto--despues">…</figure>
   </div>
   Cuando todavía no hay foto: <figure class="antes-despues__foto antes-despues__foto--vacia">
   ========================================================================== */
.antes-despues {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3);
}

.antes-despues--apilado { grid-template-columns: minmax(0, 1fr); }

.antes-despues__foto {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: var(--fondo-hundido);
  box-shadow: var(--sombra-1);
}

.antes-despues--cuadrado .antes-despues__foto { aspect-ratio: 1; }

.antes-despues__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.antes-despues__rotulo {
  position: absolute;
  left: var(--esp-3);
  bottom: var(--esp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding: 0.25rem var(--esp-3);
  border-radius: var(--radio-pildora);
  background: rgba(243, 239, 235, 0.92);
  color: var(--tinta);
  font-size: var(--texto-xs);
  font-weight: var(--peso-negrita);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-letras-sello);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.antes-despues__foto--despues .antes-despues__rotulo {
  background: var(--marca);
  color: var(--gris-0);
}

/* Todavía sin foto: borde punteado y la carita del isotipo suave */
.antes-despues__foto--vacia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  border: 1.5px dashed var(--borde-fuerte);
  background: var(--superficie);
  box-shadow: none;
  color: var(--tinta-tenue);
  font-size: var(--texto-sm);
  text-align: center;
  padding: var(--esp-4);
}

.antes-despues__foto--vacia .logo { color: var(--gris-300); --logo-ancho: 3.25rem; }

/* Botón para sacar/subir foto dentro del cuadro vacío */
.antes-despues__subir {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  color: var(--marca);
  font-weight: var(--peso-semi);
  font-size: var(--texto-sm);
  background: transparent;
  width: 100%;
  cursor: pointer;
}
.antes-despues__subir:hover { background: var(--marca-suave); }

/* Pie de la pareja de fotos (fecha, servicio) */
.antes-despues__pie {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-3);
  font-size: var(--texto-sm);
  color: var(--tinta-suave);
}

/* Galería de fotos cuadradas */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--esp-2);
}

.galeria__foto {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radio-md);
  overflow: hidden;
  background: var(--fondo-hundido);
  margin: 0;
}
.galeria__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Video de YouTube embebido, proporción 16:9 */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radio-xl);
  overflow: hidden;
  background: var(--petroleo-900);
  box-shadow: var(--sombra-2);
}

.video iframe, .video__marco {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Portada de video antes de cargar (sin pedir nada a internet) */
.video__portada {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-arena);
  background: radial-gradient(ellipse at 30% 20%, var(--petroleo-700), var(--petroleo-900));
  width: 100%;
  cursor: pointer;
}

.video__reproducir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: var(--color-arena);
  color: var(--petroleo-800);
  box-shadow: var(--sombra-3);
  transition: var(--transicion);
}
.video__portada:hover .video__reproducir { transform: scale(1.06); background: var(--gris-0); }

.video__duracion {
  position: absolute;
  right: var(--esp-3); bottom: var(--esp-3);
  padding: 0.125rem var(--esp-2);
  border-radius: var(--radio-xs);
  background: rgba(8, 47, 52, 0.75);
  color: var(--gris-0);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   15. Estado vacío
   Ilustrado con el isotipo (la carita), nunca con un ícono genérico.
   ========================================================================== */
.estado-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--esp-10) var(--esp-6);
  gap: var(--esp-2);
}

.estado-vacio--en-tarjeta {
  background: var(--superficie);
  border: 1.5px dashed var(--borde-fuerte);
  border-radius: var(--radio-xl);
}

.estado-vacio__ilustracion {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  background: var(--acento-suave);
  color: var(--marca);
  margin-bottom: var(--esp-3);
  box-shadow: inset 0 0 0 1px var(--tostado-200);
}

.estado-vacio__ilustracion .logo { --logo-ancho: 3.75rem; }
.estado-vacio__ilustracion .logo--perro { --logo-ancho: 3rem; }

.estado-vacio__titulo {
  font-size: var(--texto-lg);
  font-weight: var(--peso-negrita);
}

.estado-vacio__texto {
  color: var(--tinta-suave);
  max-width: 34ch;
  font-size: var(--texto-base);
}

.estado-vacio__accion { margin-top: var(--esp-3); }

.estado-vacio--compacto { padding: var(--esp-6) var(--esp-4); }
.estado-vacio--compacto .estado-vacio__ilustracion { width: 4rem; height: 4rem; margin-bottom: var(--esp-1); }
.estado-vacio--compacto .estado-vacio__ilustracion .logo { --logo-ancho: 2.25rem; }
.estado-vacio--compacto .estado-vacio__titulo { font-size: var(--texto-base); }
.estado-vacio--compacto .estado-vacio__texto { font-size: var(--texto-sm); }


/* ==========================================================================
   16. Modal
   Usa <dialog> nativo: foco atrapado y Esc gratis.
   <dialog class="modal" id="m">
     <div class="modal__caja">
       <header class="modal__cabecera"><h2 class="modal__titulo">…</h2><button class="modal__cerrar" data-cerrar-modal>…</button></header>
       <div class="modal__cuerpo">…</div>
       <footer class="modal__pie">…</footer>
     </div>
   </dialog>
   Abrir: <button data-abrir-modal="m">. Cerrar: data-cerrar-modal o Esc o clic afuera.
   ========================================================================== */
.modal {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  margin: 0;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.modal[open] { display: flex; }

.modal::backdrop {
  background: rgba(8, 47, 52, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.modal__caja {
  width: min(100% - var(--esp-8), var(--modal-ancho, 30rem));
  max-height: calc(100% - var(--esp-12));
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-radius: var(--radio-2xl);
  box-shadow: var(--sombra-4);
  overflow: hidden;
  animation: modal-entrar var(--dur-lenta) var(--curva);
}

.modal--chico { --modal-ancho: 24rem; }
.modal--grande { --modal-ancho: 44rem; }

.modal__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-6) var(--esp-6) 0;
}

.modal__titulo {
  font-size: var(--texto-xl);
  font-weight: var(--peso-negrita);
  line-height: var(--interlineado-justo);
}

.modal__subtitulo { color: var(--tinta-suave); font-size: var(--texto-sm); margin-top: var(--esp-1); }

.modal__cerrar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  margin: -0.375rem -0.5rem 0 0;
  border-radius: 50%;
  color: var(--tinta-suave);
  transition: var(--transicion);
}
.modal__cerrar:hover { background: var(--fondo-hundido); color: var(--tinta); }

.modal__cuerpo {
  padding: var(--esp-5) var(--esp-6);
  overflow-y: auto;
  flex: 1;
}

.modal__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-6) var(--esp-6);
}

/* En celular los modales suben desde abajo como una hoja */
@media (max-width: 55.99rem) {
  .modal { align-items: flex-end; }
  .modal__caja {
    width: 100%;
    max-height: calc(100% - var(--esp-10));
    border-radius: var(--radio-2xl) var(--radio-2xl) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation: hoja-entrar var(--dur-lenta) var(--curva);
  }
  .modal__caja::before {
    content: "";
    display: block;
    width: 2.5rem; height: 0.3rem;
    border-radius: var(--radio-pildora);
    background: var(--gris-300);
    margin: var(--esp-3) auto 0;
  }
  .modal__cabecera { padding-top: var(--esp-4); }
  .modal__pie .boton { flex: 1; }
}

@keyframes modal-entrar { from { opacity: 0; transform: translateY(0.75rem) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes hoja-entrar { from { transform: translateY(100%); } to { transform: none; } }

/* Confirmación de peligro (borrar, cancelar turno) */
.modal--peligro .modal__titulo { color: var(--error-fuerte); }


/* ==========================================================================
   17. Menú desplegable
   <div class="desplegable">
     <button class="boton boton--secundario" data-desplegable aria-expanded="false" aria-haspopup="menu">…</button>
     <div class="desplegable__menu" role="menu">
       <button class="desplegable__item" role="menuitem">…</button>
       <hr class="desplegable__separador">
       <button class="desplegable__item desplegable__item--peligro" role="menuitem">…</button>
     </div>
   </div>
   ========================================================================== */
.desplegable { position: relative; display: inline-block; }

.desplegable__menu {
  position: absolute;
  top: calc(100% + var(--esp-1));
  left: 0;
  z-index: var(--capa-desplegable);
  min-width: 13rem;
  padding: var(--esp-2);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-3);
  display: none;
  flex-direction: column;
  gap: 0.125rem;
  animation: modal-entrar var(--dur-normal) var(--curva);
}

.desplegable__menu--derecha { left: auto; right: 0; }
.desplegable__menu--arriba { top: auto; bottom: calc(100% + var(--esp-1)); }
.desplegable--abierto > .desplegable__menu { display: flex; }

.desplegable__item {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
  min-height: 2.5rem;
  padding: 0 var(--esp-3);
  border-radius: var(--radio-sm);
  color: var(--tinta);
  text-decoration: none;
  font-size: var(--texto-base);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  text-align: left;
  transition: var(--transicion);
}

.desplegable__item .icono { color: var(--tinta-suave); }
.desplegable__item:hover, .desplegable__item:focus-visible { background: var(--marca-suave); color: var(--marca-hover); outline: none; }
.desplegable__item:hover .icono { color: var(--marca); }
.desplegable__item--peligro { color: var(--error); }
.desplegable__item--peligro .icono { color: var(--error); }
.desplegable__item--peligro:hover { background: var(--error-suave); color: var(--error-fuerte); }
.desplegable__item[aria-checked="true"]::after {
  content: "";
  margin-left: auto;
  width: 0.4rem; height: 0.7rem;
  border-right: 2px solid var(--marca);
  border-bottom: 2px solid var(--marca);
  transform: rotate(45deg);
}

.desplegable__separador { border: 0; border-top: 1px solid var(--borde); margin: var(--esp-1) var(--esp-2); }

.desplegable__titulo {
  padding: var(--esp-2) var(--esp-3) var(--esp-1);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-letras-sello);
  color: var(--tinta-tenue);
}


/* ==========================================================================
   18. Pestañas
   <div class="pestanas" data-pestanas>
     <div class="pestanas__lista" role="tablist">
       <button class="pestanas__tab" role="tab" aria-selected="true" aria-controls="p1" id="t1">Historial</button>
       …
     </div>
     <div class="pestanas__panel" role="tabpanel" id="p1" aria-labelledby="t1">…</div>
   </div>
   ========================================================================== */
.pestanas__lista {
  display: flex;
  gap: var(--esp-1);
  border-bottom: 1px solid var(--borde);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pestanas__lista::-webkit-scrollbar { display: none; }

.pestanas__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 2.75rem;
  padding: 0 var(--esp-3);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--tinta-suave);
  font-weight: var(--peso-semi);
  font-size: var(--texto-base);
  white-space: nowrap;
  transition: var(--transicion);
}

.pestanas__tab:hover { color: var(--tinta); }
.pestanas__tab[aria-selected="true"] { color: var(--marca); border-bottom-color: var(--marca); }
.pestanas__tab .contador { background: var(--gris-300); color: var(--tinta); }
.pestanas__tab[aria-selected="true"] .contador { background: var(--marca); color: var(--gris-0); }

.pestanas__panel { padding-top: var(--esp-5); }
.pestanas__panel[hidden] { display: none; }

/* Variante píldoras (sin línea, para el celular) */
.pestanas--pildoras .pestanas__lista { border-bottom: 0; gap: var(--esp-2); padding: var(--esp-1) 0; }
.pestanas--pildoras .pestanas__tab {
  min-height: 2.25rem;
  padding: 0 var(--esp-4);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-pildora);
  background: var(--superficie);
  font-size: var(--texto-sm);
  margin-bottom: 0;
}
.pestanas--pildoras .pestanas__tab[aria-selected="true"] { background: var(--marca); border-color: var(--marca); color: var(--gris-0); }
.pestanas--pildoras .pestanas__panel { padding-top: var(--esp-4); }

/* Estiradas a todo el ancho (celular) */
.pestanas--estiradas .pestanas__tab { flex: 1; justify-content: center; }


/* ==========================================================================
   19. Barra de progreso
   <div class="progreso" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="--valor: 60%">
     <div class="progreso__barra"></div>
   </div>
   ========================================================================== */
.progreso {
  width: 100%;
  height: 0.5rem;
  border-radius: var(--radio-pildora);
  background: var(--fondo-hundido);
  overflow: hidden;
}

.progreso__barra {
  height: 100%;
  width: var(--valor, 0%);
  border-radius: inherit;
  background: var(--progreso-color, var(--marca));
  transition: width var(--dur-lenta) var(--curva);
}

.progreso--chica { height: 0.25rem; }
.progreso--grande { height: 0.75rem; }
.progreso--exito { --progreso-color: var(--exito); }
.progreso--atencion { --progreso-color: var(--atencion); }
.progreso--error { --progreso-color: var(--error); }
.progreso--acento { --progreso-color: var(--acento-fuerte); }

/* Con rótulo arriba: "Le toca volver en 12 días" + porcentaje */
.progreso-rotulado { display: flex; flex-direction: column; gap: var(--esp-2); }
.progreso-rotulado__fila { display: flex; justify-content: space-between; gap: var(--esp-3); font-size: var(--texto-sm); }
.progreso-rotulado__fila strong { font-weight: var(--peso-semi); }
.progreso-rotulado__fila span:last-child { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

/* Pasos (alta de cliente: 1 Dueño → 2 Perro → 3 Listo) */
.pasos {
  display: flex;
  gap: var(--esp-2);
  list-style: none;
  padding: 0; margin: 0;
  counter-reset: paso;
}

.pasos__paso {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--tinta-tenue);
  counter-increment: paso;
}

.pasos__paso::before {
  content: "";
  height: 0.3rem;
  border-radius: var(--radio-pildora);
  background: var(--gris-300);
  transition: var(--transicion);
}

.pasos__paso--hecho { color: var(--tinta-suave); }
.pasos__paso--hecho::before { background: var(--marca); }
.pasos__paso--actual { color: var(--marca); }
.pasos__paso--actual::before { background: var(--marca); }

.pasos__texto::before { content: counter(paso) ". "; }


/* ==========================================================================
   20. Línea de tiempo (historial del perro)
   <ol class="linea-tiempo" role="list">
     <li class="linea-tiempo__item">
       <span class="linea-tiempo__punto"></span>
       <div class="linea-tiempo__contenido">
         <time class="linea-tiempo__fecha">12 sep 2026</time>
         <h3 class="linea-tiempo__titulo">Baño e higiene, corte de uñas</h3>
         <p class="linea-tiempo__detalle">…</p>
         <div class="linea-tiempo__pie">…</div>
       </div>
     </li>
   </ol>
   ========================================================================== */
.linea-tiempo {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.linea-tiempo__item {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0 var(--esp-3);
  padding-bottom: var(--esp-6);
}

/* La línea vertical */
.linea-tiempo__item::before {
  content: "";
  position: absolute;
  left: calc(0.75rem - 1px);
  top: 1.25rem;
  bottom: 0;
  width: 2px;
  background: var(--borde);
}

.linea-tiempo__item:last-child { padding-bottom: 0; }
.linea-tiempo__item:last-child::before { display: none; }

.linea-tiempo__punto {
  grid-column: 1;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
  border-radius: 50%;
  background: var(--superficie);
  border: 2px solid var(--marca);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--marca);
  position: relative;
  z-index: 1;
}

.linea-tiempo__punto::after {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--marca);
}

.linea-tiempo__punto .icono { width: 0.875rem; height: 0.875rem; }
.linea-tiempo__punto .icono + * { display: none; }
.linea-tiempo__punto:has(.icono)::after { display: none; }

.linea-tiempo__punto--acento { border-color: var(--acento-fuerte); color: var(--acento-fuerte); }
.linea-tiempo__punto--acento::after { background: var(--acento-fuerte); }
.linea-tiempo__punto--exito { border-color: var(--exito); color: var(--exito); }
.linea-tiempo__punto--exito::after { background: var(--exito); }
.linea-tiempo__punto--futuro { border-style: dashed; border-color: var(--gris-400); color: var(--gris-400); }
.linea-tiempo__punto--futuro::after { background: var(--gris-400); }

.linea-tiempo__contenido { grid-column: 2; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-1); }

.linea-tiempo__fecha {
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-letras-sello);
  color: var(--tinta-suave);
  line-height: 1.5rem;
}

.linea-tiempo__titulo {
  font-size: var(--texto-md);
  font-weight: var(--peso-negrita);
  line-height: var(--interlineado-justo);
}

.linea-tiempo__detalle {
  color: var(--tinta-suave);
  font-size: var(--texto-base);
}

.linea-tiempo__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-2);
  font-size: var(--texto-sm);
  color: var(--tinta-suave);
}

/* Cada entrada como tarjeta */
.linea-tiempo--tarjetas .linea-tiempo__contenido {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: var(--esp-4);
  box-shadow: var(--sombra-1);
}


/* ==========================================================================
   21. Cifras (panel de la dueña): número grande + rótulo + variación
   ========================================================================== */
.cifra {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  padding: var(--esp-5);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-1);
  min-width: 0;
}

.cifra__rotulo {
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--tinta-suave);
}

.cifra__valor {
  font-size: var(--texto-2xl);
  font-weight: var(--peso-extra);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

.cifra__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--tinta-suave);
}

.cifra__delta--sube { color: var(--exito); }
.cifra__delta--baja { color: var(--error); }
.cifra__delta .icono { width: 1rem; height: 1rem; }
.cifra__nota { font-size: var(--texto-xs); color: var(--tinta-tenue); }

.cifra--marca { background: var(--superficie-oscura); border-color: transparent; color: var(--tinta-inversa); }
.cifra--marca .cifra__rotulo { color: var(--tinta-inversa-suave); }
.cifra--marca .cifra__valor { color: var(--gris-0); }
.cifra--marca .cifra__delta--sube { color: #9BD3B0; }
.cifra--marca .cifra__nota { color: rgba(222, 204, 190, 0.7); }


/* ==========================================================================
   Extras chicos
   ========================================================================== */

/* Esqueleto de carga (placeholder mientras llegan datos) */
.esqueleto {
  display: block;
  border-radius: var(--radio-sm);
  background: linear-gradient(90deg, var(--fondo-hundido) 25%, var(--gris-200) 50%, var(--fondo-hundido) 75%);
  background-size: 200% 100%;
  animation: esqueleto 1.4s ease-in-out infinite;
  min-height: 1em;
}
.esqueleto--texto { height: 0.875em; width: 100%; }
.esqueleto--circulo { border-radius: 50%; }
@keyframes esqueleto { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Dato destacado en línea (ej. "Vuelve el 12 de octubre") */
.destacado {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--radio-pildora);
  background: var(--acento-suave);
  color: var(--tostado-700);
  font-weight: var(--peso-semi);
  font-size: var(--texto-sm);
}

/* Separador con texto en el medio ("o") */
.separador-texto {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  color: var(--tinta-tenue);
  font-size: var(--texto-sm);
}
.separador-texto::before, .separador-texto::after { content: ""; flex: 1; border-top: 1px solid var(--borde); }

/* Tecla (para la guía) */
kbd {
  display: inline-block;
  padding: 0.05em 0.45em;
  border: 1px solid var(--borde-fuerte);
  border-bottom-width: 2px;
  border-radius: var(--radio-xs);
  background: var(--superficie);
  font-size: var(--texto-xs);
}

/* ------------------------------------------------------------------
   Catálogos: chips para elegir de una lista (y agrandarla), y frases rápidas
   ------------------------------------------------------------------ */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  min-height: 2.125rem;
  padding: 0 var(--esp-3);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-pildora);
  background: var(--gris-0);
  color: var(--tinta);
  font: inherit;
  font-size: var(--texto-sm);
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.chip:hover { border-color: var(--gris-400); background: var(--gris-50); }
.chip:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.chip--activo,
.chip[aria-pressed="true"] {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--tinta-inversa);
}
.chip--agregar {
  border-style: dashed;
  color: var(--marca);
  background: transparent;
}
.chip--agregar:hover { background: var(--marca-suave); }
.chip--alerta[aria-pressed="true"] { background: var(--error); border-color: var(--error); }
.chip .icono { width: 1rem; height: 1rem; }

/* La fila para agregar un valor nuevo a un catálogo, debajo del selector. */
.catalogo-agregar {
  display: flex;
  gap: var(--esp-2);
  align-items: center;
  margin-top: var(--esp-2);
}
.catalogo-agregar .campo__entrada { flex: 1; min-width: 0; }

/* Frases rápidas sobre una observación. */
.frases {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin-bottom: var(--esp-2);
}
.frases__rotulo { font-size: var(--texto-xs); color: var(--tinta-suave); }
.frases .chip { white-space: normal; }

/* ------------------------------------------------------------------
   Firma de desarrollo al pie de todas las pantallas (pedido del 17/10/2026).
   El celeste es el de la marca gfcode.uy, no un token de Safira.
   ------------------------------------------------------------------ */
.pie-firma {
  margin: 0;
  padding: var(--esp-3) var(--esp-4) var(--esp-1);
  text-align: center;
  font-size: 0.6875rem;
  color: var(--tinta-tenue);
}
.pie-firma a { color: inherit; text-decoration: none; }
.pie-firma strong { color: var(--tinta); font-weight: var(--peso-extra); letter-spacing: -0.01em; }
.pie-firma strong span { color: #5BB4EC; }
.pie-firma a:hover strong { text-decoration: underline; text-underline-offset: 0.2em; }