/* Kuyalú — sistema visual del prototipo (verde, crema, bordes rectos, DM Sans) llevado a Razor,
   con animaciones de respuesta y el gato de la casa. */

@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap; src: url(../fonts/dm-sans-0.ttf) format('truetype'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-display: swap; src: url(../fonts/dm-sans-1.ttf) format('truetype'); }
@font-face { font-family: 'DM Sans'; font-weight: 600; font-display: swap; src: url(../fonts/dm-sans-2.ttf) format('truetype'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-display: swap; src: url(../fonts/dm-sans-3.ttf) format('truetype'); }
@font-face { font-family: 'Instrument Serif'; font-weight: 400; font-display: swap; src: url(../fonts/instrument-serif.ttf) format('truetype'); }
@font-face { font-family: 'Instrument Serif'; font-weight: 400; font-style: italic; font-display: swap; src: url(../fonts/instrument-serif-italica.ttf) format('truetype'); }

:root {
  --tinta: #203d32;
  --apagado: #536258;
  --papel: #faf8f1;
  --linea: #cbd2c7;
  --verde: #245643;
  --verde-hondo: #173f34;
  --lima: #e8eddf;
  --lima-viva: #dbe8b9;
  --blanco: #fff;
  --ambar-fondo: #f2eddd;
  --ambar-tinta: #655326;
  --ambar-borde: #d6caa7;
  --rojo-fondo: #faeae5;
  --rojo-tinta: #943c2c;
  --rojo-borde: #d5aba0;
  --ojo-gato: #e1d36a;
  --letra-fondo: #b4bdab;
  --serif: 'Instrument Serif', Georgia, serif;
  --sombra-tarjeta: 0 22px 40px -22px #173f3466;
  --curva: cubic-bezier(.2, .8, .2, 1);
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { scroll-behavior: smooth; scrollbar-color: #a4b09d var(--papel); scrollbar-width: thin; }
body {
  margin: 0; min-height: 100vh; background: var(--papel); color: var(--tinta);
  font: 15px/1.6 'DM Sans', system-ui, sans-serif; color-scheme: light; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: 38px; line-height: 1.2; }
h2 { font-size: 28px; line-height: 1.3; }
h3 { font-size: 19px; line-height: 1.4; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; opacity: .48; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 4px; }
::selection { background: var(--lima-viva); color: var(--verde-hondo); }
svg { flex-shrink: 0; vertical-align: middle; }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.contenedor { max-width: 1240px; margin: 0 auto; padding: 0 48px; }

/* Sitio público: títulos con serifa editorial; la cursiva resalta una parte en verde. */
.sitio h1, .sitio h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; line-height: 1.05; }
.sitio h1 em, .sitio h2 em { font-style: italic; color: var(--verde); }
.sitio .intro-pagina h1 { font-size: 52px; }
.sitio .superficie h2 { font-size: 32px; }
.sitio .caso h2 { font-size: 36px; }
.sobretitulo { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--apagado); }
.sobretitulo::before { content: ''; width: 26px; height: 1px; background: currentColor; }

/* ---------- Avisos académicos y cabecera ---------- */
.aviso-academico {
  position: sticky; top: 0; z-index: 60; background: var(--lima); color: #244535;
  padding: 7px 18px; text-align: center; font-size: 11px; font-weight: 500; border-bottom: 1px solid var(--linea);
}
/* Cabecera verde fija bajo el aviso, sin esquinas redondeadas; al bajar (clase .compacta, kuyalu.js) se encoge y toma sombra. */
.cabecera-fija { position: sticky; top: var(--alto-aviso, 31px); z-index: 55; background: var(--verde); color: var(--papel); transition: box-shadow .45s; }
.cabecera-fija.compacta { box-shadow: 0 14px 30px -18px #0b1f18b3; }
.cabecera {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px;
  transition: min-height .45s var(--curva);
}
.cabecera > :not(.progreso-lectura) { animation: caer .7s var(--curva) both; }
.cabecera > :nth-child(2) { animation-delay: .08s; } .cabecera > :nth-child(3) { animation-delay: .16s; }
@keyframes caer { from { opacity: 0; transform: translateY(-16px); } }
.compacta .cabecera { min-height: 64px; }
.marca { display: flex; align-items: center; gap: 12px; color: var(--papel); text-decoration: none; }
.marca-icono {
  width: 42px; height: 42px; display: block; flex-shrink: 0;
  transition: width .45s var(--curva), height .45s var(--curva);
}
.marca:hover .marca-icono { animation: pisada .6s var(--rebote); }
@keyframes pisada { 30% { transform: scale(.82) rotate(-14deg); } 65% { transform: scale(1.15) rotate(6deg); } }
.compacta .marca-icono { width: 36px; height: 36px; }
.marca strong { display: block; font-family: var(--serif); font-size: 32px; font-weight: 400; line-height: 1; transition: font-size .45s var(--curva); }
.compacta .marca strong { font-size: 27px; }
.marca small { display: block; font-size: 9px; letter-spacing: .12em; color: #b9cbbf; white-space: nowrap; }
.cabecera :focus-visible { outline-color: var(--lima-viva); }

/* Menú: un fondo translúcido sigue al ratón; la página actual lleva una barra verde claro debajo (kuyalu.js lo posiciona). */
.nav { position: relative; display: flex; gap: 2px; align-items: center; padding: 5px 0; }
.nav-burbuja {
  position: absolute; left: 0; top: 5px; bottom: 5px; width: var(--ancho-burbuja, 0px); background: #ffffff17;
  translate: var(--x-burbuja, 0px) 0; opacity: 0; pointer-events: none;
  transition: translate .45s var(--rebote), width .45s var(--rebote), opacity .25s;
}
.nav-burbuja.visible { opacity: 1; }
.nav a { position: relative; z-index: 1; padding: 10px 16px; font-size: 13px; color: #d3e0d6; text-decoration: none; white-space: nowrap; transition: color .25s; }
.nav a.resaltado, .nav a[aria-current="page"] { color: #fff; }
.nav a::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 3px; height: 2px;
  background: var(--lima-viva); transform: scaleX(0); transition: transform .45s var(--rebote);
}
.nav a[aria-current="page"] { font-weight: 700; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Acciones: enlace discreto al panel, separado por una línea fina del único botón destacado. */
.cabecera-acciones { display: flex; gap: 18px; align-items: center; }
.enlace-equipo { display: flex; align-items: center; gap: 8px; padding-right: 18px; border-right: 1px solid #ffffff2e; font-size: 12px; color: #d3e0d6; text-decoration: none; transition: color .25s; }
.enlace-equipo svg { transition: transform .4s var(--rebote); }
.enlace-equipo:hover { color: #fff; }
.enlace-equipo:hover svg { transform: translateY(-2px) scale(1.1); }

/* "Agendar cita": al pasar el ratón un perrito cruza el botón dejando huellas y la flecha se vuelve huella. */
.cabecera .btn-agendar { min-height: 46px; padding: 11px 22px; gap: 12px; background-color: var(--lima-viva); color: var(--verde-hondo); border-color: var(--lima-viva); }
.cabecera .btn-agendar::before { background: var(--papel); }
@media (hover: hover) { .cabecera .btn-agendar:hover:not(:disabled) { color: var(--verde-hondo); } }
.btn-icono { position: relative; display: grid; width: 17px; height: 17px; }
.btn-icono svg { grid-area: 1 / 1; transition: transform .4s var(--rebote), opacity .25s; }
.btn-icono .huella-boton { opacity: 0; transform: scale(.3) rotate(-30deg); }
.btn-agendar:hover .btn-icono .flecha, .btn-agendar:focus-visible .btn-icono .flecha { opacity: 0; transform: translateX(14px); }
.btn-agendar:hover .btn-icono .huella-boton, .btn-agendar:focus-visible .btn-icono .huella-boton { opacity: 1; transform: none; animation: plantar .5s .12s var(--rebote); }
@keyframes plantar { 40% { transform: scale(1.35) rotate(8deg); } }
.btn-agendar:active { scale: .95; }
/* Pasos dentro del botón (detrás del texto) y abanico de huellas al hacer clic (kuyalu.js). */
.paso-boton { position: absolute; z-index: -1; width: 12px; height: 12px; color: var(--verde); opacity: 0; pointer-events: none; animation: paso-boton .75s ease-out forwards; }
.paso-boton svg, .huella-salto svg { width: 100%; height: 100%; display: block; }
@keyframes paso-boton { 0% { opacity: 0; transform: rotate(90deg) scale(.3); } 30% { opacity: .35; transform: rotate(90deg) scale(1); } 100% { opacity: 0; transform: rotate(90deg) scale(.9); } }
.huella-salto { position: fixed; z-index: 80; width: 14px; height: 14px; margin: -7px 0 0 -7px; color: var(--lima-viva); pointer-events: none; animation: huella-salto .7s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes huella-salto { 0% { opacity: 1; transform: translate(0, 0) rotate(var(--giro)) scale(.4); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--giro)) scale(1); } }

/* Brillo que recorre el botón principal cada pocos segundos. */
.btn-brillo { background-image: linear-gradient(110deg, transparent 42%, #ffffff8c 50%, transparent 58%); background-size: 260% 100%; background-repeat: no-repeat; animation: brillo-boton 5s 1.2s ease-in-out infinite; }
@keyframes brillo-boton { 0% { background-position: 130% 0; } 35%, 100% { background-position: -40% 0; } }
/* Progreso de lectura en el borde inferior de la cabecera. */
.progreso-lectura { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--lima-viva); transform: scaleX(var(--progreso, 0)); transform-origin: left; opacity: 0; transition: opacity .3s; }
.compacta .progreso-lectura { opacity: 1; }

/* ---------- Botones: barrido de color, flecha que avanza, pulsación, carga ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 1px solid var(--verde); background: var(--verde); color: #fff; padding: 12px 20px;
  font-size: 13px; font-weight: 600; line-height: 1.5; white-space: nowrap; min-height: 44px; text-decoration: none;
  transition: color .25s ease-out, scale .15s ease-out, border-color .25s;
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--verde-hondo);
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--curva);
}
.btn .flecha { transition: transform .35s var(--rebote); }
.btn:not(:disabled):active { scale: .96; }
.btn-contorno { background: transparent; color: var(--verde); }
.btn-contorno::before { background: var(--verde); }
.btn-claro { background: var(--lima); color: var(--verde); border-color: var(--lima); }
.btn-claro::before { background: var(--papel); }
.btn-lima { background: var(--lima-viva); color: var(--verde-hondo); border-color: var(--lima-viva); }
.btn-lima::before { background: var(--papel); }
@media (hover: hover) { .btn.btn-claro:hover:not(:disabled), .btn.btn-lima:hover:not(:disabled) { color: var(--verde-hondo); } }
.btn-grande { padding: 16px 30px; min-height: 58px; font-size: 15px; }
.btn-chico { padding: 8px 12px; min-height: 38px; font-size: 12px; }
.btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid #fff; border-right-color: transparent;
  border-radius: 50%; animation: girar .7s linear infinite;
}
.btn-contorno[aria-busy="true"]::after { border-color: var(--verde); border-right-color: transparent; }
@media (hover: hover) {
  .btn:hover:not(:disabled)::before { transform: scaleX(1); transform-origin: left; }
  .btn:hover:not(:disabled) { color: #fff; }
  .btn:hover:not(:disabled) .flecha { transform: translateX(4px); }
}
.btn-texto {
  display: inline-flex; align-items: center; gap: 13px; background: none; border: 0; padding: 8px 0;
  font-size: 13px; color: inherit; text-decoration: underline; text-underline-offset: 5px;
}
.btn-texto .flecha { transition: transform .35s var(--rebote); }
.btn-texto:hover .flecha { transform: translateX(4px); }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Portada: nombre gigante, corgi entre las letras y barra de reserva ---------- */
.portada { position: relative; max-width: 1340px; margin: 0 auto; padding: 0 48px; }
.escena { position: relative; height: clamp(430px, 60vh, 540px); }
.escena-marca {
  position: absolute; inset: 0 0 40% 0; margin: 0; display: flex; justify-content: center; align-items: center;
  gap: clamp(250px, 27vw, 380px); font-family: var(--serif); font-size: clamp(96px, 14.5vw, 214px); line-height: .8;
  color: var(--letra-fondo); pointer-events: none; user-select: none;
}
.escena-marca > span { display: flex; gap: .16em; }
.escena-marca > span > span { display: inline-block; animation: subir-letra 1s var(--curva) both; }
.marca-izq span:nth-child(1) { animation-delay: .05s; } .marca-izq span:nth-child(2) { animation-delay: .12s; } .marca-izq span:nth-child(3) { animation-delay: .19s; }
.marca-der span:nth-child(1) { animation-delay: .26s; } .marca-der span:nth-child(2) { animation-delay: .33s; } .marca-der span:nth-child(3) { animation-delay: .4s; }
@keyframes subir-letra { from { transform: translateY(45%) rotate(4deg); opacity: 0; } to { transform: none; opacity: 1; } }

.escena-texto { position: absolute; left: 0; bottom: 60px; max-width: 360px; z-index: 3; animation: aparecer-linea .8s .5s var(--curva) both; }
.escena-texto h1 { font-size: 36px; margin-top: 12px; }
.escena-enlace { margin-top: 10px; }

/* Las capas se desplazan con el cursor (kuyalu.js fija --dx/--dy); translate no choca con transform. */
[data-capa] { translate: var(--dx, 0px) var(--dy, 0px); transition: translate .5s var(--curva); }

/* Franja de reserva: verde con huellas; el corgi se asoma por detrás (z-index) y la tarjeta blanca sobresale arriba. */
.reserva-banda { position: relative; margin-top: 10px; }
.banda-interior {
  position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 40px; align-items: center;
  padding: 40px 44px 38px; background: var(--verde); color: var(--papel); overflow: visible;
}
.banda-interior::before {
  content: ''; position: absolute; inset: 0; opacity: .08; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 160 160'%3E%3Cg fill='%23faf8f1' transform='rotate(-18 80 80)'%3E%3Cellipse cx='60' cy='52' rx='6' ry='9'/%3E%3Cellipse cx='86' cy='52' rx='6' ry='9'/%3E%3Cellipse cx='48' cy='70' rx='5' ry='7'/%3E%3Cellipse cx='98' cy='70' rx='5' ry='7'/%3E%3Cpath d='M60 88c7-15 21-15 28 0 13 16-3 17-14 13-11 4-27 3-14-13z'/%3E%3C/g%3E%3C/svg%3E");
}
.banda-texto { position: relative; }
.banda-texto .sobretitulo { color: #c9d6c8; }
.banda-texto h2 { font-size: 46px; margin: 12px 0 26px; max-width: 16ch; }
.banda-texto h2 em { color: var(--lima-viva); }

/* Mascotas asomadas: fotos con fondo blanco que se funden con el crema (multiply) y se ocultan tras su franja. */
.asomado {
  position: absolute; z-index: 1; pointer-events: none; mix-blend-mode: multiply; filter: brightness(1.07) contrast(1.05);
  -webkit-mask-image: radial-gradient(ellipse 72% 95% at 50% 100%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 95% at 50% 100%, #000 62%, transparent 100%);
  transition: transform .7s var(--rebote); animation: asomarse 1.1s var(--rebote) both;
}
@keyframes asomarse { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } }

/* El corgi de la portada: aparece una vez y se queda quieto apoyado en la franja (no sigue al ratón ni se agacha). */
.asomado.corgi {
  --ancho: clamp(280px, 26vw, 360px); width: var(--ancho); left: calc(50% - var(--ancho) / 2); bottom: calc(100% - 110px);
  -webkit-mask-image: radial-gradient(ellipse 62% 80% at 50% 62%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 80% at 50% 62%, #000 70%, transparent 100%);
  animation-delay: .3s;
}

/* Tarjeta blanca del formulario, dentro de la franja: título con ícono, dos campos lado a lado y el botón debajo. */
.mesa-agenda {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-self: center; padding: 22px 24px 16px;
  background: #fff; color: var(--tinta); border-radius: 18px; box-shadow: 0 24px 50px -30px #0b1f1899; animation: aparecer-linea .7s .5s var(--curva) both;
}
.mesa-cabeza { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--linea); }
.mesa-icono { width: 40px; height: 40px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: var(--lima-viva); color: var(--verde); }
.mesa-titulo { font-family: var(--serif); font-size: 28px; line-height: 1; }
.mesa-agenda label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; min-width: 0; color: var(--apagado); }
.mesa-agenda input, .mesa-agenda select {
  width: 100%; height: 46px; min-height: 46px; padding: 0 14px; font-size: 14px; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; transition: border-color .2s, box-shadow .2s;
}
.mesa-agenda input:focus, .mesa-agenda select:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--lima-viva); }
.mesa-agenda .btn { grid-column: 1 / -1; width: 100%; min-height: 50px; border-radius: 12px; }
.mesa-agenda .btn::before { border-radius: inherit; }
.mesa-agenda .ayuda { grid-column: 1 / -1; text-align: center; font-size: 11px; }

.reserva-datos { position: relative; display: flex; gap: 34px; flex-wrap: wrap; margin: 0; padding: 22px 0 0; list-style: none; border-top: 1px solid #ffffff2e; }
.reserva-datos li { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #c9d6c8; max-width: 13ch; line-height: 1.35; }
.reserva-datos strong { font-family: var(--serif); font-size: 48px; font-weight: 400; line-height: 1; color: var(--lima-viva); }

/* ---------- Cinta de servicios ---------- */
.cinta { overflow: hidden; background: var(--verde-hondo); color: var(--papel); padding: 18px 0; }
.cinta-pista { display: flex; width: max-content; animation: desplazar 46s linear infinite; }
.cinta:hover .cinta-pista { animation-play-state: paused; }
.cinta-pista > span { display: flex; align-items: center; gap: 26px; padding-right: 26px; font-family: var(--serif); font-size: 30px; white-space: nowrap; }
.cinta-pista svg { color: var(--lima-viva); }
@keyframes desplazar { to { transform: translateX(-50%); } }

/* ---------- Tarjetas con foto (se inclinan hacia el cursor) ---------- */
.tarjeta-foto {
  position: relative; background: #fff; padding: 10px 10px 0; border: 1px solid var(--linea); box-shadow: var(--sombra-tarjeta);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--curva);
}
.tarjeta-foto img { width: 100%; height: 300px; object-fit: cover; }
.tarjeta-foto figcaption { padding: 8px 2px 10px; font-size: 10px; color: var(--apagado); }
.credito-fotos { font-size: 10px; color: var(--apagado); padding-bottom: 18px; }
@keyframes asentar { from { transform: scale(1.06); filter: saturate(.6); } to { transform: scale(1); filter: none; } }
@keyframes aparecer-linea { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Catálogo de servicios ---------- */
.servicios { padding: 90px 0 90px; scroll-margin-top: 110px; }
.catalogo-cabecera { display: grid; grid-template-columns: 1fr auto; column-gap: 40px; align-items: end; margin-bottom: 40px; }
.catalogo-cabecera .sobretitulo { grid-column: 1 / -1; margin-bottom: 14px; }
.catalogo-cabecera h2 { font-size: 64px; }
.catalogo-cabecera > p:last-child { max-width: 34ch; font-size: 14px; color: var(--apagado); }
/* Tarjetas de servicio: se levantan al pasar el ratón; con JavaScript, el detalle se pliega y se abre con animación. */
.servicios-tarjetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: start; padding-top: 34px; border-top: 1px solid var(--tinta); }
.servicio-tarjeta {
  background: #fff; border: 1px solid var(--linea); box-shadow: 0 0 0 0 #173f3400; min-width: 0;
  transition: transform .45s var(--curva), box-shadow .45s var(--curva), border-color .3s; animation: aparecer-linea .6s var(--curva) both;
}
.servicio-tarjeta:nth-child(2) { animation-delay: .08s; } .servicio-tarjeta:nth-child(3) { animation-delay: .16s; } .servicio-tarjeta:nth-child(4) { animation-delay: .24s; }
.servicio-tarjeta:hover, .servicio-tarjeta.abierta { transform: translateY(-6px); box-shadow: var(--sombra-tarjeta); border-color: #b9c4b5; }
.servicio-foto { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--lima); }
.servicio-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--curva); }
.servicio-tarjeta:hover .servicio-foto img { transform: scale(1.06); }
.servicio-foto .numero {
  position: absolute; right: 14px; bottom: 8px; font-family: var(--serif); font-size: 46px; line-height: 1; color: #fff;
  text-shadow: 0 2px 14px #00000059;
}
.servicio-cara { position: relative; display: flex; flex-direction: column; padding: 0 22px 20px; }
.catalogo-icono {
  width: 50px; height: 50px; display: grid; place-items: center; margin-top: -25px; margin-bottom: 14px;
  background: var(--lima-viva); color: var(--verde); border: 3px solid #fff; transition: transform .45s var(--rebote);
}
.servicio-tarjeta:hover .catalogo-icono { transform: rotate(-8deg) scale(1.06); }
.servicio-cara h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.05; letter-spacing: 0; }
.servicio-cara > p { font-size: 13px; color: var(--apagado); margin-top: 8px; }
.precio-ref { font-size: 12px; color: var(--apagado); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); }
.precio-ref small { display: block; font-size: 10px; letter-spacing: .04em; margin-bottom: 2px; }
.precio-ref strong { color: var(--tinta); font-size: 18px; }
.servicio-mas { display: none; }
.servicio-detalle ul { padding: 0; margin: 16px 0; list-style: none; font-size: 12px; }
.servicio-detalle li { display: flex; gap: 9px; align-items: baseline; margin-bottom: 9px; }
.servicio-detalle li svg { position: relative; top: 3px; color: var(--verde); }
.servicio-detalle .btn { width: 100%; }
.es-urgencia .catalogo-icono { background: var(--rojo-fondo); color: var(--rojo-tinta); }

.plegables .servicio-mas {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 14px; padding: 10px 0 0;
  background: none; border: 0; border-top: 1px dashed var(--linea); font-size: 12px; font-weight: 600; color: var(--verde);
}
.plegables .servicio-mas svg { transition: transform .4s var(--rebote); }
.plegables .abierta .servicio-mas svg { transform: rotate(45deg); }
.plegables .servicio-detalle { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--curva), opacity .35s; }
.plegables .servicio-detalle > div { min-height: 0; overflow: hidden; }
.plegables .abierta .servicio-detalle { grid-template-rows: 1fr; opacity: 1; }
.plegables .abierta .servicio-detalle li { animation: aparecer-linea .4s var(--curva) both; }
.plegables .abierta .servicio-detalle li:nth-child(2) { animation-delay: .06s; }
.plegables .abierta .servicio-detalle li:nth-child(3) { animation-delay: .12s; }
.plegables .abierta .servicio-detalle li:nth-child(n+4) { animation-delay: .18s; }

/* ---------- Franja de cuidado con huellas sutiles ---------- */
.franja-cuidado { position: relative; overflow: hidden; background: var(--verde); color: var(--papel); padding: 58px 0 62px; }
.franja-cuidado::before {
  content: ''; position: absolute; inset: 0; opacity: .07; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23faf8f1' transform='rotate(-18 80 80)'%3E%3Cellipse cx='60' cy='52' rx='6' ry='9'/%3E%3Cellipse cx='86' cy='52' rx='6' ry='9'/%3E%3Cellipse cx='48' cy='70' rx='5' ry='7'/%3E%3Cellipse cx='98' cy='70' rx='5' ry='7'/%3E%3Cpath d='M60 88c7-15 21-15 28 0 13 16-3 17-14 13-11 4-27 3-14-13z'/%3E%3C/g%3E%3C/svg%3E");
}
.franja-cuidado .contenedor { position: relative; }
.franja-cuidado { padding: 90px 0 80px; }
.franja-cabecera { display: grid; grid-template-columns: 1.3fr .7fr; column-gap: 70px; align-items: center; }
.franja-cabecera .sobretitulo { color: #c9d6c8; }
.franja-cabecera h2 { font-size: 60px; margin: 14px 0 22px; }
.franja-cabecera h2 em { color: var(--lima-viva); }
.franja-cabecera p { color: #e3eadd; font-size: 15px; max-width: 46ch; margin-bottom: 28px; }
.franja-cabecera .btn :focus-visible, .franja-cabecera .btn:focus-visible { outline-color: var(--lima-viva); }
.tarjeta-gato { rotate: -4deg; max-width: 300px; justify-self: end; }
.tarjeta-gato img { height: 340px; }
.recorrido { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; padding: 34px 0 0; margin: 60px 0 0; list-style: none; border-top: 1px solid #718d7c; }
.recorrido .numero { display: block; font-family: var(--serif); font-size: 58px; line-height: 1; color: var(--lima-viva); margin-bottom: 16px; }
.recorrido li { padding-right: 30px; border-right: 1px solid #718d7c; }
.recorrido li:last-child { border: 0; padding-right: 0; }
.recorrido h3 { font-size: 18px; margin-top: 14px; }
.recorrido p { font-size: 13px; line-height: 1.8; color: #e3eadd; margin-top: 10px; max-width: 38ch; }
.recorrido .icono-latido { animation: latido 1.6s ease-in-out infinite; transform-origin: center; }

/* ---------- Contacto y pie ---------- */
.contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; padding-block: 100px 70px; scroll-margin-top: 110px; }
.contacto h2 { font-size: 60px; margin-top: 14px; }
.contacto p { margin: 16px 0 25px; font-size: 14px; color: var(--apagado); max-width: 46ch; }
.contacto dl { margin: 0 0 30px; }
.contacto-tarjetas { position: relative; min-height: 540px; }
.tarjeta-alta { width: 70%; rotate: -3deg; }
.tarjeta-alta img { height: 380px; }
.tarjeta-asomo { position: absolute; right: 0; bottom: 0; width: 58%; z-index: 2; }
.tarjeta-asomo .asomado { width: 100%; left: 0; bottom: calc(100% - 46px); animation: none; }
.tarjeta-asomo:hover .asomado { transform: translateY(-12px); }
.tarjeta-asomo-cara { position: relative; z-index: 2; display: grid; gap: 4px; padding: 24px 26px; background: var(--verde); color: var(--papel); }
.tarjeta-asomo-cara strong { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; }
.tarjeta-asomo-cara span { font-size: 12px; color: #c9d6c8; }
.contacto dl > div { padding: 14px 0; border-bottom: 1px solid var(--linea); }
.contacto dl > div:first-child { padding-top: 0; }
.contacto dt { font-size: 13px; font-weight: 700; }
.contacto dd { font-size: 12px; color: var(--apagado); margin: 4px 0 0; }
/* Pie verde oscuro en un solo bloque: marca y enlaces, y debajo el aviso de demostración separado por una línea fina. */
.pie-sitio { background: var(--verde-hondo); color: #c9d6c8; }
.pie { padding-block: 26px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 12px; flex-wrap: wrap; }
.pie nav { display: flex; gap: 22px; flex-wrap: wrap; }
.pie .btn-texto { font-size: 12px; padding: 0; color: #e3eadd; text-decoration-color: #ffffff4d; transition: color .2s, text-decoration-color .2s; }
.pie .btn-texto:hover { color: var(--lima-viva); text-decoration-color: var(--lima-viva); }
.pie :focus-visible { outline-color: var(--lima-viva); }
.pie-marca strong { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--papel); margin-right: 12px; }
.nota-prototipo { margin: 0; padding: 12px 18px; border-top: 1px solid #ffffff1f; text-align: center; font-size: 10px; color: #a9bfb1; }

/* ---------- Páginas internas y formularios ---------- */
.intro-pagina { padding: 30px 0 26px; }
.volver { display: inline-flex; gap: 8px; align-items: center; padding: 5px 0; margin-bottom: 15px; font-size: 12px; color: var(--apagado); text-decoration: none; }
.volver svg { transition: transform .3s var(--rebote); }
.volver:hover svg { transform: translateX(-4px); }
.intro-pagina h1 { font-size: 32px; }
.intro-pagina > p { margin-top: 10px; font-size: 14px; color: var(--apagado); max-width: 62ch; }
.reserva { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 40px; padding-bottom: 50px; align-items: start; }
.superficie { background: #fff; padding: 28px; border: 1px solid var(--linea); }
.superficie h2 { font-size: 22px; margin-bottom: 7px; }
.superficie h2[tabindex="-1"]:focus { outline: none; }
.ayuda { color: var(--apagado); font-size: 12px; line-height: 1.65; }

.pasos { position: relative; display: flex; margin-bottom: 28px; font-size: 12px; color: var(--apagado); border-bottom: 1px solid var(--linea); list-style: none; padding: 0; }
.pasos li { flex: 1; display: flex; align-items: center; gap: 9px; padding: 0 5px 13px; transition: color .3s; }
.pasos b { min-width: 20px; height: 20px; display: grid; place-items: center; font-weight: 500; border: 1px solid currentColor; font-size: 11px; transition: background .3s, color .3s; }
.pasos li[aria-current="step"] { color: var(--verde); font-weight: 700; }
.pasos li.hecho { color: var(--verde); }
.pasos li.hecho b { background: var(--verde); color: #fff; border-color: var(--verde); }
.pasos-progreso { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--verde); transition: width .5s var(--curva); }
.paso { animation: entrar-paso .45s var(--curva) both; }
.paso[hidden] { display: none; }
.paso.atras { animation-name: entrar-paso-atras; }
@keyframes entrar-paso { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes entrar-paso-atras { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

.opciones-servicio { margin: 24px 0; border-top: 1px solid var(--linea); }
.opcion-servicio { position: relative; display: flex; align-items: center; gap: 15px; width: 100%; border-bottom: 1px solid var(--linea); padding: 17px 12px; background: #fff; cursor: pointer; transition: background .25s; }
.opcion-servicio input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-servicio svg { color: var(--verde); transition: transform .4s var(--rebote); }
.opcion-servicio strong { display: block; font-size: 14px; font-weight: 600; }
.opcion-servicio small { font-size: 12px; color: var(--apagado); }
.opcion-servicio .radio { margin-left: auto; width: 15px; height: 15px; border: 1px solid #627363; transition: background .2s, box-shadow .2s; }
.opcion-servicio:has(input:checked) { background: #edf1e6; box-shadow: inset 0 0 0 1px var(--verde); }
.opcion-servicio:has(input:checked) .radio { background: var(--verde); box-shadow: inset 0 0 0 3px #edf1e6; }
.opcion-servicio:has(input:checked) svg { transform: scale(1.15) rotate(-6deg); }
.opcion-servicio:has(input:focus-visible) { outline: 2px solid var(--verde); outline-offset: -2px; }
.opcion-servicio:hover { background: #f6f7f1; }

.horarios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 13px; }
.horario { position: relative; }
.horario input { position: absolute; opacity: 0; }
.horario span { display: grid; place-items: center; min-height: 42px; border: 1px solid #7d8b7e; background: #fff; font-size: 12px; cursor: pointer; transition: background .2s, color .2s, transform .3s var(--rebote); }
.horario input:checked + span { background: var(--verde); border-color: var(--verde); color: #fff; animation: elegir .4s var(--rebote); }
.horario input:focus-visible + span { outline: 2px solid var(--verde); outline-offset: 2px; }
.horario span:hover { transform: translateY(-2px); }
@keyframes elegir { 0% { transform: scale(.9); } 100% { transform: scale(1); } }

.campo { display: flex; flex-direction: column; gap: 7px; font-size: 12px; font-weight: 600; margin-top: 18px; }
.campo .ayuda { font-weight: 400; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
input, textarea, select {
  display: block; width: 100%; min-width: 0; border: 1px solid #7d8b7e; background: #fff; padding: 11px 12px; min-height: 44px; font-size: 13px;
  caret-color: var(--verde); transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde); }
input::placeholder, textarea::placeholder { color: #657165; opacity: 1; }
textarea { resize: vertical; }
input[type="checkbox"] { width: 16px; height: 16px; min-height: 16px; padding: 0; accent-color: var(--verde); flex-shrink: 0; }
.input-validation-error { border-color: var(--rojo-tinta); animation: sacudir .35s; }
.field-validation-error, .error { color: #933c2d; font-size: 12px; font-weight: 400; }
.validation-summary-errors ul { margin: 12px 0 0; padding-left: 18px; color: #933c2d; font-size: 12px; }
@keyframes sacudir { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.linea-check { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; font-size: 12px; color: var(--apagado); }
.acciones-form { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-top: 26px; flex-wrap: wrap; }

.alerta { font-size: 12px; line-height: 1.65; padding: 13px 15px; background: var(--ambar-fondo); color: var(--ambar-tinta); border: 1px solid var(--ambar-borde); }
.alerta-roja { background: var(--rojo-fondo); color: var(--rojo-tinta); border-color: var(--rojo-borde); }

.resumen { position: sticky; top: 55px; padding-top: 23px; border-top: 2px solid var(--verde); }
.resumen h3 { font-size: 18px; margin-bottom: 20px; }
.resumen-fila { font-size: 13px; padding: 15px 0; border-top: 1px solid var(--linea); }
.resumen-fila small { display: block; font-size: 11px; color: var(--apagado); margin-bottom: 6px; }
.resumen-fila output { display: block; transition: color .3s; }
.resumen-fila output.cambio { animation: resaltar .8s; }
@keyframes resaltar { from { background: var(--lima-viva); } to { background: transparent; } }
.resumen > .ayuda { border-top: 1px solid var(--linea); padding-top: 15px; font-size: 11px; }

/* ---------- Solicitud de cita: tarjeta con panel verde de pasos (estilo asistente) ---------- */
.paso { border: 0; padding: 0; margin: 0; min-width: 0; }
.solicitud {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 620px; margin-bottom: 16px;
  background: var(--papel); border: 1px solid var(--linea); box-shadow: var(--sombra-tarjeta); animation: aparecer-linea .6s var(--curva) both;
}
.solicitud-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 34px; padding: 34px 30px; background: var(--verde); color: var(--papel); }
.solicitud-panel > :not(.solicitud-foto) { position: relative; z-index: 1; }
.solicitud-marca { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 26px; }
.solicitud-marca svg { color: var(--lima-viva); }
.solicitud-panel .pasos { flex-direction: column; margin: 0; border: 0; font-size: 14px; color: #a9bfb1; }
.solicitud-panel .pasos li { flex: none; display: block; position: relative; padding: 0 0 28px 34px; }
.solicitud-panel .pasos li::before { content: ''; position: absolute; left: 8px; top: 22px; bottom: 2px; width: 1px; background: #5f8574; transition: background .4s; }
.solicitud-panel .pasos li:last-child::before { display: none; }
.solicitud-panel .pasos b { position: absolute; left: 0; top: 3px; min-width: 0; width: 17px; height: 17px; border: 1.5px solid #a9bfb1; border-radius: 50%; background: transparent; transition: border .3s, background .3s, transform .4s var(--rebote); }
.solicitud-panel .pasos li[aria-current="step"] { color: #fff; font-weight: 600; }
.solicitud-panel .pasos li[aria-current="step"] b { border: 5px solid var(--papel); transform: scale(1.15); }
.solicitud-panel .pasos li.hecho { color: var(--lima-viva); }
.solicitud-panel .pasos li.hecho b { background: var(--lima-viva); border-color: var(--lima-viva); }
.solicitud-panel .pasos li.hecho::before { background: var(--lima-viva); }
.solicitud-panel .resumen { position: static; padding-top: 6px; border-top: 1px solid #5f8574; }
.solicitud-panel .resumen-fila { border-top: 0; padding: 9px 0; font-size: 13px; }
.solicitud-panel .resumen-fila small { color: #a9bfb1; }
.solicitud-panel output.cambio { animation: resaltar-oscuro .8s; }
@keyframes resaltar-oscuro { from { color: var(--lima-viva); } }
/* Corgi en duotono al pie del panel (multiply sobre el verde). */
.solicitud-foto {
  position: absolute; left: -8%; bottom: -10%; width: 116%; pointer-events: none; opacity: .8;
  mix-blend-mode: multiply; filter: grayscale(1) contrast(1.15) brightness(1.1);
  -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 85%); mask-image: linear-gradient(to top, #000 45%, transparent 85%);
}
.solicitud-cuerpo { position: relative; padding: 42px 48px 36px; min-width: 0; }
.solicitud-cuerpo .pasos-progreso { top: 0; bottom: auto; height: 3px; background: var(--lima-viva); box-shadow: 0 1px 0 var(--verde); }
.solicitud-cuerpo h2 { font-size: 42px; margin: 10px 0 8px; }
.solicitud .opciones-servicio { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; border-top: 0; }
.solicitud .opcion-servicio { border: 1px solid var(--linea); padding: 16px; transition: border-color .25s, transform .3s var(--curva), box-shadow .3s; }
.solicitud .opcion-servicio:hover { transform: translateY(-3px); box-shadow: var(--sombra-tarjeta); background: #fff; }
.solicitud .opcion-servicio:has(input:checked) { border-color: var(--verde); }
.opcion-icono { width: 46px; height: 46px; display: grid; place-items: center; flex-shrink: 0; background: var(--lima); color: var(--verde); transition: background .3s; }
.opcion-servicio:has(input:checked) .opcion-icono { background: var(--lima-viva); }
.solicitud .opcion-servicio .radio { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: transparent; align-self: flex-start; }
.solicitud .opcion-servicio .radio svg { color: inherit; }
.solicitud .opcion-servicio:has(input:checked) .radio { background: var(--verde); box-shadow: none; color: #fff; animation: elegir .4s var(--rebote); }
.solicitud input:not([type="checkbox"]):not([type="radio"]), .solicitud textarea { border-color: var(--linea); }
.solicitud input:focus, .solicitud textarea:focus { border-color: var(--verde); box-shadow: 0 0 0 3px var(--lima-viva); }
.segmentado { display: flex; border: 1px solid var(--linea); background: #fff; }
.segmentado label { position: relative; flex: 1; }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado span { display: grid; place-items: center; min-height: 42px; padding: 0 10px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .25s, color .25s; }
.segmentado label + label span { border-left: 1px solid var(--linea); }
.segmentado input:checked + span { background: var(--lima-viva); color: var(--verde-hondo); font-weight: 700; }
.segmentado input:focus-visible + span { outline: 2px solid var(--verde); outline-offset: -2px; }
.segmentado span:hover { background: var(--lima); }
.solicitud .acciones-form { border-top: 1px solid var(--linea); padding-top: 22px; }
.nota-solicitud { margin-bottom: 50px; }

/* ---------- Solicitud enviada: bloques separados y centrados ---------- */
.confirmacion { max-width: 820px; margin: 40px auto 56px; padding: 40px 44px 34px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra-tarjeta); animation: aparecer-linea .6s var(--curva) both; }
.confirmacion-cabeza { text-align: center; padding-bottom: 26px; border-bottom: 1px solid var(--linea); }
.confirmacion-cabeza .check-dibujado { margin: 0 auto 12px; display: block; }
.confirmacion-cabeza h1 { font-size: 46px; }
.confirmacion-cabeza p { max-width: 56ch; margin: 12px auto 0; font-size: 14px; color: var(--apagado); }
.confirmacion-datos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--linea); animation: aparecer-linea .6s .2s var(--curva) both; }
.confirmacion-solicitud { display: grid; gap: 14px; margin: 0; }
.confirmacion-solicitud dt { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.confirmacion-solicitud dd { margin: 3px 0 0; font-size: 15px; }
.confirmacion-solicitud dd::first-letter { text-transform: uppercase; }
.confirmacion-codigo { display: grid; gap: 10px; align-content: start; padding: 18px; background: var(--lima); border: 1px dashed var(--verde); }
.confirmacion-codigo code { font-size: 14px; padding: 10px 12px; background: #fff; border: 1px solid var(--linea); word-break: break-all; text-align: center; letter-spacing: .02em; }
.confirmacion-codigo .btn { justify-self: start; gap: 8px; }
.confirmacion-codigo .ayuda { margin: 0; }
.confirmacion-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 26px 0; list-style: none; animation: aparecer-linea .6s .35s var(--curva) both; }
.confirmacion-pasos li { position: relative; display: grid; gap: 4px; padding: 0 14px; text-align: center; font-size: 12px; color: var(--apagado); }
.confirmacion-pasos li + li::before { content: ''; position: absolute; top: 14px; right: 50%; width: 100%; height: 1px; background: var(--linea); z-index: 0; translate: -14px 0; }
.confirmacion-pasos b { position: relative; z-index: 1; width: 28px; height: 28px; margin: 0 auto 4px; display: grid; place-items: center; border: 1px solid var(--linea); background: #fff; font-size: 12px; color: var(--apagado); }
.confirmacion-pasos .hecho b { background: var(--verde); border-color: var(--verde); color: #fff; }
.confirmacion-pasos strong { color: var(--tinta); font-size: 13px; }
.confirmacion-alerta { margin: 0 0 24px; }
.confirmacion-acciones { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.confirmacion-acciones .btn { gap: 8px; }

/* Confirmación: marca que se dibuja y recibo. */
.exito { padding: 18px 0; }
.check-dibujado { width: 64px; height: 64px; color: var(--verde); }
.check-dibujado circle { stroke-dasharray: 176; stroke-dashoffset: 176; animation: trazar .7s var(--curva) forwards; }
.check-dibujado path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: trazar .4s .55s var(--curva) forwards; }
@keyframes trazar { to { stroke-dashoffset: 0; } }
.exito h2 { margin-top: 16px; }
.exito p { font-size: 14px; color: var(--apagado); margin: 15px 0; max-width: 54ch; }
.recibo { border-block: 1px solid var(--linea); padding: 20px 0; margin: 20px 0; font-size: 14px; animation: aparecer-linea .6s .4s var(--curva) both; }
.codigo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.codigo code { font-size: 13px; padding: 6px 10px; background: var(--lima); border: 1px solid var(--linea); word-break: break-all; }

/* ---------- Insignias de estado ---------- */
.insignia { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #afbdab; background: #f0f4e9; color: #3d5a32; padding: 3px 7px; font-size: 11px; line-height: 1.4; white-space: nowrap; }
.insignia-critica { border-color: var(--rojo-borde); background: var(--rojo-fondo); color: var(--rojo-tinta); }
.insignia-alta { border-color: #abc5b9; background: #eaf2ee; color: #315f50; }
.insignia-pendiente { border-color: var(--ambar-borde); background: var(--ambar-fondo); color: var(--ambar-tinta); }
.insignia-apagada { border-color: var(--linea); background: #f4f5f0; color: var(--apagado); }

/* Estado clínico vivo: pulso de recuperación, latido crítico, alta con brillo. */
.pulso { width: 34px; height: 12px; color: currentColor; }
.pulso path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: pulso 1.8s linear infinite; }
@keyframes pulso { 0% { stroke-dashoffset: 60; } 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -60; } }
.punto-critico { width: 8px; height: 8px; background: currentColor; border-radius: 50% !important; position: relative; }
.punto-critico::after { content: ''; position: absolute; inset: -4px; border: 1px solid currentColor; border-radius: 50%; animation: onda 1.4s ease-out infinite; }
@keyframes onda { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
@keyframes latido { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }
.brillo-alta { animation: brillo 2.8s ease-in-out infinite; }
@keyframes brillo { 0%, 100% { box-shadow: 0 0 0 0 #abc5b900; } 50% { box-shadow: 0 0 0 4px #abc5b955; } }

.barra-recuperacion { height: 6px; background: var(--lima); position: relative; overflow: hidden; margin-top: 8px; }
.barra-recuperacion span { position: absolute; inset: 0 auto 0 0; background: var(--verde); width: var(--avance, 0%); animation: llenar 1.2s var(--curva) both; }
.barra-recuperacion span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #ffffff55, transparent); animation: destello 2.4s 1.2s infinite; }
@keyframes llenar { from { width: 0; } }
@keyframes destello { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- Casos ---------- */
.casos { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; padding-bottom: 45px; }
.caso { display: grid; grid-template-columns: 150px 1fr; gap: 22px; border-top: 1px solid var(--linea); padding-top: 22px; }
.caso img { width: 150px; height: 180px; object-fit: cover; transition: transform .6s var(--curva); }
.caso figure { overflow: hidden; }
.caso:hover img { transform: scale(1.05); }
.caso h2 { margin-top: 12px; font-size: 30px; }
.caso p { font-size: 13px; margin: 12px 0; color: var(--apagado); }

/* ---------- Área de empleados: menú verde con pestaña activa, tarjetas redondeadas y secciones plegables ---------- */
.panel-cuerpo { --fondo-panel: #edf0e6; --radio: 6px; background: var(--fondo-panel); }
.panel-cuerpo h1, .panel-cuerpo h2 { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
.panel-marco { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: calc(100vh - 32px); transition: grid-template-columns .5s var(--curva); }
.lateral {
  position: sticky; top: 32px; height: calc(100vh - 32px); display: flex; flex-direction: column; gap: 28px; min-width: 0;
  padding: 26px 0 24px 18px; background: var(--verde); color: var(--papel); border-radius: 0 28px 28px 0; overflow: hidden;
}
.lateral-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 14px; }
.lateral .marca { color: var(--papel); min-width: 0; }
.lateral .marca-icono { box-shadow: none; }
.lateral .marca strong { font-size: 27px; }
.lateral .marca small { font-size: 8px; color: #b9cbbf; }
.plegar-lateral {
  width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid #ffffff33; border-radius: 50%;
  background: transparent; color: var(--papel); transition: transform .5s var(--curva), background .2s;
}
.plegar-lateral:hover { background: #ffffff1a; }
.lateral nav { display: grid; gap: 6px; }
.lateral nav a {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 999px 0 0 999px;
  color: #d3e0d6; font-size: 13px; text-decoration: none; white-space: nowrap; transition: color .25s, background .25s;
}
.lateral nav a:hover { color: #fff; background: #ffffff12; }
/* La opción activa se une al contenido como una pestaña (esquinas invertidas con sombras). */
.lateral nav a[aria-current="page"] { background: var(--fondo-panel); color: var(--verde); font-weight: 700; }
.lateral nav a[aria-current="page"]::before, .lateral nav a[aria-current="page"]::after {
  content: ''; position: absolute; right: 0; width: 20px; height: 20px; background: transparent; pointer-events: none;
}
.lateral nav a[aria-current="page"]::before { top: -20px; border-bottom-right-radius: 20px; box-shadow: 6px 6px 0 6px var(--fondo-panel); }
.lateral nav a[aria-current="page"]::after { bottom: -20px; border-top-right-radius: 20px; box-shadow: 6px -6px 0 6px var(--fondo-panel); }

/* Burbuja: con JavaScript, la pestaña activa es una sola pieza que se desliza y se estira como una gota entre opciones. */
.lateral nav { position: relative; }
.burbuja { display: none; }
.con-burbuja .burbuja {
  display: block; position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 0; pointer-events: none;
  background: var(--fondo-panel); border-radius: 999px 0 0 999px; transform-origin: right center;
}
.con-burbuja .burbuja::before, .con-burbuja .burbuja::after { content: ''; position: absolute; right: 0; width: 20px; height: 20px; }
.con-burbuja .burbuja::before { top: -20px; border-bottom-right-radius: 20px; box-shadow: 6px 6px 0 6px var(--fondo-panel); }
.con-burbuja .burbuja::after { bottom: -20px; border-top-right-radius: 20px; box-shadow: 6px -6px 0 6px var(--fondo-panel); }
.con-burbuja a { z-index: 1; }
.con-burbuja a[aria-current="page"] { background: transparent; }
.con-burbuja a[aria-current="page"]::before, .con-burbuja a[aria-current="page"]::after { display: none; }
/* El texto nunca queda claro sobre la burbuja: la nueva opción pasa a verde al instante y la anterior se aclara al salir. */
.con-burbuja a.destino { color: var(--verde); font-weight: 700; transition: none; }
.con-burbuja a[aria-current="page"].saliendo { color: #d3e0d6; font-weight: 400; transition: color .15s .08s; }
/* Gotitas que suelta la burbuja al llegar. */
.gotita { position: absolute; z-index: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--fondo-panel); pointer-events: none; animation: gotita .7s var(--curva) forwards; }
@keyframes gotita { to { transform: translate(var(--gx), var(--gy)) scale(0); opacity: 0; } }
.lateral-pie { margin-top: auto; padding-right: 18px; font-size: 11px; color: #b9cbbf; }
.lateral-pie p { padding: 16px; border-radius: 16px; background: #ffffff12; line-height: 1.6; }
.lateral-pie strong { color: var(--papel); }
.lateral-pie .btn-texto { font-size: 11px; margin-top: 8px; }

/* Menú plegado: solo íconos. */
.panel-marco.plegado { grid-template-columns: 84px minmax(0, 1fr); }
.plegado .lateral-texto { display: none; }
.plegado .lateral { padding-left: 14px; }
.plegado .lateral-cabeza { flex-direction: column; padding-right: 14px; }
.plegado .plegar-lateral { transform: rotate(180deg); }
.plegado .lateral nav a { justify-content: center; padding-inline: 0 14px; }

.panel-principal { padding: 18px 30px 40px; min-width: 0; }
.panel-barra {
  display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 14px 16px 14px 26px;
  background: #fff; border-radius: var(--radio); box-shadow: 0 10px 30px -22px #173f3466; animation: aparecer-linea .5s var(--curva) both;
}
.panel-ruta small { display: block; font-size: 11px; color: var(--apagado); }
.panel-ruta strong { font-family: var(--serif); font-size: 26px; font-weight: 400; line-height: 1.1; }
.identidad { display: flex; align-items: center; gap: 12px; }
.identidad-texto { text-align: right; font-size: 12px; line-height: 1.3; }
.identidad-texto small { display: block; color: var(--apagado); font-size: 11px; }
.avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--lima-viva); color: var(--verde-hondo); font-size: 13px; font-weight: 700; }
.boton-salir { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--linea); border-radius: 50%; background: #fff; color: var(--verde); transition: background .2s, color .2s, transform .3s var(--rebote); }
.boton-salir:hover { background: var(--verde); color: #fff; transform: translateX(2px); }
.panel-encabezado { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 28px 4px 22px; flex-wrap: wrap; }
.panel-encabezado h1 { font-size: 40px; }
.panel-encabezado p { font-size: 12px; color: var(--apagado); margin-top: 4px; }
.panel-cuerpo .btn { border-radius: var(--radio); }
.panel-cuerpo .btn::before { border-radius: inherit; }
.panel-cuerpo input, .panel-cuerpo select, .panel-cuerpo textarea { border-radius: var(--radio); border-color: var(--linea); }

/* Franja de hoy: saludo con fecha y cifras como texto compacto que enlaza a cada lista. */
.hoy { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding: 30px 4px 22px; border-bottom: 1px solid var(--linea); margin-bottom: 22px; }
.hoy-fecha { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); }
.hoy h1 { font-size: 44px; margin-top: 6px; }
.hoy h1 em { font-style: italic; color: var(--verde); }
.hoy-cifras { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.hoy-cifras li + li { border-left: 1px solid var(--linea); }
.hoy-cifras a, .hoy-cifras li > span { display: flex; align-items: baseline; gap: 7px; padding: 4px 18px; font-size: 12px; color: var(--apagado); text-decoration: none; transition: color .2s; }
.hoy-cifras a:hover { color: var(--verde); }
.hoy-cifras strong { font-family: var(--serif); font-size: 34px; font-weight: 400; line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums; }
.hoy-cifras .cifra-aviso strong { color: var(--ambar-tinta); }
.hoy-cifras .cifra-critica strong { color: var(--rojo-tinta); }

/* Zona de trabajo: lista de tareas ancha a la izquierda; agenda y seguimiento a la derecha. */
.trabajo { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 20px; align-items: start; margin-bottom: 20px; }
.trabajo-lateral { display: grid; gap: 20px; }
.lista-trabajo .ayuda { margin: 4px 0 14px; }
.tareas { list-style: none; margin: 0; padding: 0; }
.tarea {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
  padding: 13px 14px 13px 18px; border-top: 1px solid var(--linea); text-decoration: none; transition: background .2s;
  animation: aparecer-linea .4s var(--curva) both;
}
.tareas li:nth-child(2) .tarea { animation-delay: .04s; } .tareas li:nth-child(3) .tarea { animation-delay: .08s; } .tareas li:nth-child(n+4) .tarea { animation-delay: .12s; }
.tarea::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; background: var(--linea); }
.tarea-critica::before { background: var(--rojo-tinta); }
.tarea-atencion::before { background: #c9a43b; }
.tarea-normal::before { background: var(--verde); }
.tarea:hover { background: var(--fondo-panel); }
.tarea-inicial { width: 38px; height: 38px; display: grid; place-items: center; background: var(--lima); color: var(--verde); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.tarea-critica .tarea-inicial { background: var(--rojo-fondo); color: var(--rojo-tinta); }
.tarea-atencion .tarea-dosis { background: var(--ambar-fondo); color: var(--ambar-tinta); }
.tarea-critica .tarea-dosis svg { animation: latir .9s ease-in-out infinite; }
.tarea-texto strong { display: block; font-size: 13px; font-weight: 600; }
.tarea-texto small { display: block; font-size: 11px; color: var(--apagado); }
.tarea-tiempo { font-size: 11px; color: var(--apagado); white-space: nowrap; }
.tarea-accion { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--verde); white-space: nowrap; }
.tarea-accion .flecha { transition: transform .35s var(--rebote); }
.tarea:hover .tarea-accion .flecha { transform: translateX(4px); }

/* Agenda: línea de tiempo por horas, agrupada por día. */
.agenda-dia { margin: 14px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); }
.agenda-lista { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--lima); }
.agenda-cita { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; padding: 8px 0; font-size: 12px; }
.agenda-cita::before { content: ''; position: absolute; left: -19px; top: 13px; width: 8px; height: 8px; background: var(--verde); }
.agenda-cita.pasada { opacity: .5; }
.agenda-cita time { font-weight: 700; font-variant-numeric: tabular-nums; }
.agenda-cita strong { display: block; font-weight: 600; }
.agenda-cita small { color: var(--apagado); }
.agenda-vacia { margin-top: 12px; padding: 14px; font-size: 12px; color: var(--apagado); background: var(--fondo-panel); }
.seguimiento-lista { list-style: none; margin: 10px 0 0; padding: 0; }
.seguimiento-lista a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--linea); text-decoration: none; font-size: 12px; }
.seguimiento-lista strong { display: block; font-size: 13px; }
.seguimiento-lista small { color: var(--apagado); }

/* Administración: cambios recientes y equipo por rol. */
.cambios { list-style: none; margin: 8px 0 0; padding: 0; }
.cambios li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea); font-size: 12px; }
.cambios time { color: var(--apagado); }
.cambios em { font-style: normal; color: var(--verde); }
.equipo-roles { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; gap: 12px; }
.equipo-roles li { display: grid; grid-template-columns: 110px minmax(0, 1fr) 24px; align-items: center; gap: 10px; font-size: 12px; }
.equipo-roles strong { text-align: right; font-family: var(--serif); font-size: 22px; font-weight: 400; }
.equipo-barra { height: 8px; background: var(--fondo-panel); }
.equipo-barra span { display: block; height: 100%; width: var(--avance, 0%); background: var(--verde); animation: llenar 1s var(--curva) both; }
.tarjeta { background: #fff; border-radius: var(--radio); padding: 22px 24px; min-width: 0; box-shadow: 0 10px 30px -22px #173f3466; animation: aparecer-linea .5s .1s var(--curva) both; }
.tarjeta h2 { font-size: 26px; }
/* Secciones plegables (kuyalu.js agrega el botón y envuelve el contenido). */
.tarjeta-titulo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.plegar-seccion {
  width: 32px; height: 32px; display: grid; place-items: center; flex-shrink: 0; border: 0; border-radius: 50%;
  background: var(--lima); color: var(--verde); transition: transform .45s var(--curva), background .2s;
}
.plegar-seccion:hover { background: var(--lima-viva); }
.tarjeta.cerrada .plegar-seccion { transform: rotate(-90deg); }
.tarjeta-cuerpo { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s var(--curva), opacity .4s; }
.tarjeta-cuerpo > div { min-height: 0; overflow: hidden; }
.tarjeta.cerrada .tarjeta-cuerpo { grid-template-rows: 0fr; opacity: 0; }
.columnas-panel { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.columnas-panel:has(> .tarjeta:first-child .tabla) { grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr); }
.filtros { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0; }
.filtros a { font-size: 11px; padding: 7px 12px; border: 1px solid var(--linea); border-radius: 999px; text-decoration: none; color: var(--apagado); transition: background .2s, color .2s; }
.filtros a[aria-current="true"] { background: var(--verde); color: #fff; border-color: var(--verde); }
.filtros a:hover { border-color: var(--verde); color: var(--verde); }
.filtros a[aria-current="true"]:hover { color: #fff; }
.buscador { position: relative; margin: 16px 0 10px; }
.buscador svg { position: absolute; left: 13px; top: 14px; color: var(--apagado); }
.buscador input { padding-left: 38px; font-size: 12px; border-radius: 999px; background: var(--fondo-panel); border-color: transparent; }
.panel-cuerpo .fila { border-radius: var(--radio); border-bottom: 0; margin-bottom: 4px; }
.panel-cuerpo .fila:hover { background: var(--fondo-panel); }
.panel-cuerpo .fila[aria-current="true"] { background: var(--lima); }
.panel-cuerpo .miniatura { border-radius: 12px; }
.panel-cuerpo .insignia { border-radius: 999px; padding-inline: 10px; }
.panel-cuerpo .evento::before { border-radius: 50%; }
.panel-cuerpo .barra-recuperacion, .panel-cuerpo .barra-recuperacion span { border-radius: 999px; }
.panel-cuerpo .tabla th:first-child, .panel-cuerpo .tabla td:first-child { padding-left: 4px; }

.lista-filas { list-style: none; margin: 0; padding: 0; }
.fila { display: flex; align-items: center; gap: 12px; padding: 14px 7px; border-bottom: 1px solid var(--linea); text-decoration: none; transition: background .2s, padding .3s var(--curva); animation: aparecer-linea .4s var(--curva) both; }
.fila:nth-child(2) { animation-delay: .04s; } .fila:nth-child(3) { animation-delay: .08s; } .fila:nth-child(4) { animation-delay: .12s; }
.fila:nth-child(5) { animation-delay: .16s; } .fila:nth-child(n+6) { animation-delay: .2s; }
.fila:hover { background: #f4f5ed; padding-left: 12px; }
.fila[aria-current="true"] { background: #edf1e6; }
.fila strong { display: block; font-size: 13px; font-weight: 600; }
.fila small { display: block; font-size: 11px; color: var(--apagado); }
.fila .insignia { margin-left: auto; }
.miniatura { width: 40px; height: 44px; object-fit: cover; background: var(--lima); display: grid; place-items: center; color: var(--verde); }
.vacio { padding: 34px 10px; text-align: center; font-size: 13px; color: var(--apagado); }
.vacio svg { color: var(--verde); margin-bottom: 10px; }

.ficha-cabecera { display: flex; gap: 14px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--linea); }
.ficha-cabecera h2 { font-size: 22px; }
.ficha-cabecera p { font-size: 12px; color: var(--apagado); margin: 4px 0 7px; }
.meta-ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px 0; font-size: 12px; }
.meta-ficha span { display: block; color: var(--apagado); font-size: 11px; margin-bottom: 5px; }
.subtitulo { font-size: 12px; font-weight: 600; padding-bottom: 9px; border-bottom: 1px solid var(--linea); margin: 9px 0 16px; }
.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.evento { padding: 0 0 20px 16px; border-left: 1px solid #bfcbb8; position: relative; animation: aparecer-linea .5s var(--curva) both; }
.evento:nth-child(2) { animation-delay: .08s; } .evento:nth-child(3) { animation-delay: .16s; } .evento:nth-child(n+4) { animation-delay: .24s; }
.evento::before { content: ''; width: 7px; height: 7px; position: absolute; top: 6px; left: -4px; background: var(--verde); }
.evento:first-child::before { animation: latido 1.6s ease-in-out infinite; }
.evento.anulado { opacity: .55; }
.evento.anulado strong { text-decoration: line-through; }
.evento time { font-size: 11px; color: var(--apagado); font-variant-numeric: tabular-nums; }
.evento strong { display: block; font-size: 13px; margin: 4px 0; }
.evento p { font-size: 12px; color: var(--apagado); }

/* Línea de tiempo clínica: día de atención en cada registro, situación actual destacada y lo anterior más tenue. */
.subtitulo-evolucion { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.subtitulo-evolucion small { font-weight: 400; color: var(--apagado); }
.evento-cabeza { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.evento-dia { padding: 1px 8px; border-radius: 999px; background: var(--fondo-panel, var(--lima)); font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--verde); }
.evento:not(.evento-actual):not(:first-child) { opacity: .78; }
.evento-actual {
  margin: 0 0 18px; padding: 14px 16px 14px 20px; border: 1px solid var(--verde); border-left-width: 1px;
  border-radius: var(--radio); background: var(--lima); opacity: 1;
}
.evento-actual::before { width: 11px; height: 11px; left: -6px; top: 18px; border-radius: 50%; box-shadow: 0 0 0 4px #24564326; }
.evento-actual strong { font-size: 16px; color: var(--verde); }
.evento-actual > p { font-size: 13px; color: var(--tinta); }
.evento-actual .evento-dia { background: var(--verde); color: #fff; }
.evento-hace { font-size: 11px; font-weight: 600; color: var(--verde); }
.evento-cuidados { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; padding: 6px 8px; border-radius: var(--radio); background: #fff; color: var(--tinta) !important; }
.evento-cuidados svg { color: var(--verde); margin-top: 2px; }
.evento-cuidados b { font-weight: 600; }
.evento-ingreso::before { background: var(--apagado); }
.evento-alta::before { background: var(--lima-viva); box-shadow: 0 0 0 2px var(--verde); }
.evolucion-anterior { margin: 4px 0 8px; font-size: 12px; }
.evolucion-anterior summary { cursor: pointer; color: var(--verde); font-weight: 600; margin-bottom: 10px; }
.receta { padding: 13px 0; border-top: 1px solid var(--linea); font-size: 12px; }
.receta li { margin-top: 4px; }

.tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.tabla th { text-align: left; font-weight: 600; color: var(--apagado); font-size: 11px; padding: 10px 8px; border-bottom: 1px solid var(--linea); }
.tabla td { padding: 12px 8px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tr { animation: aparecer-linea .4s var(--curva) both; }
.tabla tbody tr:hover { background: #f4f5ed; }
.acciones-fila { display: flex; gap: 6px; flex-wrap: wrap; }
.acciones-fila form { display: inline; }

/* Login */
/* Acceso del personal: pantalla dividida con la foto de la clínica (velo verde) y el formulario recto sobre crema. */
.acceso { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(380px, 1fr); min-height: calc(100vh - 120px); border-top: 1px solid var(--linea); }
.acceso-foto { position: relative; overflow: hidden; background: var(--verde-hondo); color: var(--papel); }
.acceso-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; mix-blend-mode: luminosity; animation: acercar 14s ease-out both; }
.acceso-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, #173f34f2 10%, #173f3480 55%, #173f3426); }
@keyframes acercar { from { transform: scale(1.12); } to { transform: scale(1); } }
.acceso-foto-texto { position: absolute; z-index: 1; left: 56px; right: 56px; bottom: 50px; }
.acceso-lema { font-family: var(--serif); font-size: 58px; line-height: 1.02; max-width: 12ch; animation: aparecer-linea .8s .2s var(--curva) both; }
.acceso-lema em { color: var(--lima-viva); }
.acceso-tareas { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 13px; color: #dfe7da; }
.acceso-tareas li { display: flex; align-items: center; gap: 9px; animation: aparecer-linea .6s var(--curva) both; }
.acceso-tareas li:nth-child(1) { animation-delay: .45s; } .acceso-tareas li:nth-child(2) { animation-delay: .55s; } .acceso-tareas li:nth-child(3) { animation-delay: .65s; }
.acceso-tareas svg { color: var(--lima-viva); }
.acceso-aviso { margin-top: 30px; padding-top: 14px; border-top: 1px solid #ffffff2e; font-size: 11px; color: #b9cbbf; }

.acceso-lado { display: grid; place-items: center; padding: 48px 40px; background: var(--papel); }
.acceso-form { width: min(400px, 100%); display: flex; flex-direction: column; }
.acceso-form > * { animation: aparecer-linea .55s var(--curva) both; }
.acceso-form > :nth-child(2) { animation-delay: .05s; } .acceso-form > :nth-child(3) { animation-delay: .1s; } .acceso-form > :nth-child(4) { animation-delay: .15s; }
.acceso-form > :nth-child(n+5) { animation-delay: .2s; }
.acceso-marca { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 22px; background: var(--verde); color: var(--papel); }
.acceso-form h1 { font-size: 46px; margin: 10px 0 6px; }
.acceso-form > .ayuda { margin-bottom: 14px; }
.campo-icono { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; margin-top: 18px; border-bottom: 1px solid #9aa79c; color: var(--apagado); transition: border-color .25s, color .25s; }
.campo-etiqueta { grid-column: 1 / -1; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--apagado); }
.campo-icono:focus-within { border-color: var(--verde); color: var(--verde); }
.campo-icono::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--verde); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--curva); }
.campo-icono:focus-within::after { transform: scaleX(1); }
.campo-icono input { border: 0; background: transparent; padding: 10px 0; min-height: 46px; box-shadow: none !important; }
.ver-clave { background: none; border: 0; font-size: 11px; font-weight: 600; color: var(--verde); padding: 6px 2px; }
.btn-acceso { margin-top: 28px; min-height: 52px; }
/* Mientras se envía, el botón muestra un latido en vez del círculo de carga. */
.btn-acceso[aria-busy="true"]::after {
  width: 46px; height: 16px; border: 0; border-radius: 0; background: #fff; animation: latido-carga 1.1s linear infinite;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 16'%3E%3Cpath d='M0 8h12l3-6 4 12 4-12 4 12 3-6h16' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 16'%3E%3Cpath d='M0 8h12l3-6 4 12 4-12 4 12 3-6h16' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes latido-carga { from { clip-path: inset(0 100% 0 0); } 70%, to { clip-path: inset(0 0 0 0); } }
.acceso-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linea); }
.acceso-roles span { padding: 4px 10px; border: 1px solid var(--linea); font-size: 11px; color: var(--verde); background: #fff; }
.acceso-roles small { flex-basis: 100%; margin-top: 6px; font-size: 11px; color: var(--apagado); }
.acceso-seguridad { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 11px; color: var(--apagado); }
.acceso-volver { align-self: flex-start; margin-top: 16px; font-size: 12px; gap: 6px; }
.acceso .error { margin-top: 6px; }
.acceso.error-acceso .acceso-form { animation: sacudir .4s .1s; }

/* Gato guardián, pequeño, asomado en la esquina inferior derecha de la foto. */
.acceso-gato { position: absolute; z-index: 2; right: 36px; bottom: -10px; width: 92px; overflow: visible; animation: gato-asomar .8s 1.2s var(--rebote) both; }
@keyframes gato-asomar { from { transform: translateY(60px); opacity: 0; } }
.acceso-gato .gato-cabeza { transform-box: view-box; transform-origin: 80px 100px; transition: transform .4s var(--curva); }
.acceso-gato .gato-pupilas { transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform .15s; }
.acceso-gato .gato-ojos { transform-box: fill-box; transform-origin: center; animation: parpadeo 5s 2s infinite; }
.acceso-gato .gato-pata { transform-box: fill-box; transform-origin: center; transition: transform .45s var(--rebote); }
.acceso-gato .gato-pata ellipse { stroke: #4a514a; stroke-width: 1.5; }
.acceso.tapando .pata-izq { transform: translate(10px, -36px) rotate(-14deg) scale(1.1); }
.acceso.tapando .pata-der { transform: translate(-10px, -36px) rotate(14deg) scale(1.1); }
.acceso.espiando .pata-izq { transform: translate(10px, -36px) rotate(-14deg) scale(1.1); }
.acceso.tapando .gato-cabeza { transform: translateY(4px); }
.acceso.error-acceso .gato-cabeza { animation: negar .6s 1.2s; }
@keyframes parpadeo { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes negar { 20%, 60% { transform: rotate(-8deg); } 40%, 80% { transform: rotate(8deg); } }

/* ---------- Ficha clínica: barra de acciones y paneles laterales ---------- */
.ficha-iniciales { width: 60px; height: 60px; font-size: 18px; font-weight: 700; letter-spacing: .04em; }
.acciones-clinicas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 16px 0 4px; }
.accion-clinica {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--linea); border-radius: var(--radio);
  background: #fff; color: var(--verde); font-size: 12px; font-weight: 600; transition: background .2s, border-color .2s, transform .3s var(--rebote);
}
.accion-clinica:hover { background: var(--lima); border-color: var(--verde); transform: translateY(-2px); }
.accion-clinica svg { transition: transform .4s var(--rebote); }
.accion-clinica:hover svg { transform: scale(1.15) rotate(-6deg); }
.accion-alta { background: var(--verde); color: var(--papel); border-color: var(--verde); }
.accion-alta:hover { background: var(--verde-hondo); }
.evento-motivo { font-style: italic; }
.descargar-alta { margin-top: 14px; gap: 8px; }
.btn-urgencia { background: var(--rojo-tinta); border-color: var(--rojo-tinta); }
.btn-urgencia::before { background: #7a2f22; }
.paciente-nuevo { margin: 10px 0 0; padding: 10px 12px; border: 1px dashed var(--linea); border-radius: var(--radio); }
.paciente-nuevo legend { padding: 0 6px; font-size: 11px; font-weight: 700; color: var(--apagado); }
.anular { margin-top: 6px; font-size: 11px; }
.anular summary { cursor: pointer; color: var(--rojo-tinta); width: fit-content; }
.anular form { display: flex; gap: 6px; margin-top: 6px; }
.anular input { min-height: 36px; padding: 6px 10px; font-size: 12px; }
.receta-lista { list-style: none; margin: 8px 0; padding: 0; }
.receta-lista > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px dashed var(--linea); animation: aparecer-linea .4s var(--curva) both; }
.receta-lista > li > .anular { margin-top: 0; }
.receta-lista small { display: block; color: var(--apagado); }
/* Medicamento con su plan: franja de color según la próxima dosis (verde, ámbar pronto, rojo atrasada, gris completado). */
.medicamento { position: relative; display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; padding: 12px 12px 12px 16px !important; margin-top: 8px; border: 1px solid var(--linea) !important; border-radius: var(--radio); background: #fff; }
.medicamento::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 4px; background: var(--verde); transition: background .3s; }
.medicamento.nivel-pronto::before { background: #c9a43b; }
.medicamento.nivel-atrasada::before { background: var(--rojo-tinta); }
.medicamento.nivel-terminado::before { background: var(--linea); }
.medicamento > .anular { padding-left: 34px; }
.med-cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.med-plan { display: grid; gap: 8px; padding-left: 34px; }
.med-avance-fila { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--apagado); }
.med-avance { flex: 0 0 110px; height: 6px; background: var(--fondo-panel); border-radius: 999px; overflow: hidden; }
.med-avance span { display: block; height: 100%; width: var(--avance, 0%); background: var(--verde); border-radius: inherit; animation: llenar 1s var(--curva) both; }
.med-proxima { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; }
.med-proxima strong { font-weight: 700; }
.med-semaforo { width: 10px; height: 10px; border-radius: 50%; background: var(--verde); position: relative; }
.med-semaforo::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid currentColor; opacity: 0; }
.nivel-pronto .med-semaforo { background: #c9a43b; color: #c9a43b; }
.nivel-atrasada .med-semaforo { background: var(--rojo-tinta); color: var(--rojo-tinta); }
.nivel-pronto .med-semaforo::after, .nivel-atrasada .med-semaforo::after { animation: onda 1.4s ease-out infinite; opacity: 1; }
.nivel-atrasada .med-proxima strong { color: var(--rojo-tinta); }
.nivel-pronto .med-proxima strong { color: var(--ambar-tinta); }
.med-terminado { color: var(--apagado); }
.med-tira { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.med-tira li { padding: 2px 8px; border: 1px solid var(--linea); border-radius: 999px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--apagado); }
.med-tira li.pasada { opacity: .5; text-decoration: line-through; }
.med-tira li.siguiente { border-color: var(--verde); background: var(--lima); color: var(--verde); font-weight: 700; }
.med-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-left: 34px; }
.med-acciones .btn { gap: 6px; }
.med-otra-hora summary { color: var(--verde); }
.med-otra-hora form { flex-wrap: wrap; }
.med-dadas { display: grid; gap: 4px; margin: 0; padding: 0 0 0 34px; list-style: none; font-size: 11px; color: var(--apagado); }
.med-dadas svg { color: var(--verde); }
.receta-pastilla { width: 24px; height: 24px; display: grid; place-items: center; background: var(--lima-viva); color: var(--verde); border-radius: 999px; }

dialog.panel-lateral {
  position: fixed; inset: 0 0 0 auto; width: min(460px, 100vw); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0;
  border: 0; background: var(--papel); color: var(--tinta); box-shadow: -24px 0 50px -30px #0b1f18cc;
  will-change: transform; contain: layout paint;
}
dialog.panel-lateral[open] { animation: panel-entrar .35s var(--curva); }
dialog.panel-lateral.saliendo { animation: panel-salir .26s ease-in forwards; }
/* Velo sin desenfoque: desenfocar la página animada de atrás en cada cuadro era lo que trababa la apertura. */
dialog.panel-lateral::backdrop { background: #0b1f1866; }
/* Mientras hay un panel abierto, las animaciones de atrás se pausan (kuyalu.js pone la clase). */
body.panel-abierto .panel-marco *:not(.panel-lateral, .panel-lateral *), body.panel-abierto .gato, body.panel-abierto .gato * { animation-play-state: paused !important; }
@keyframes panel-entrar { from { transform: translateX(100%); } }
@keyframes panel-salir { to { transform: translateX(100%); } }
.panel-lateral > form { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 22px 26px; overflow-y: auto; }
.panel-lateral header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--linea); }
.panel-lateral h2 { font-size: 30px; }
.cerrar-panel { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; color: var(--verde); }
.panel-lateral footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: auto; padding-top: 18px; }
.panel-lateral .segmentado { border-radius: var(--radio); overflow: hidden; }
.alta-perrito { display: grid; place-items: center; padding: 10px 0 4px; }
.alta-perrito .perro-escena { width: 150px; height: 96px; }

/* ---------- Solicitud → cita: pasos, propietarios coincidentes y programación ---------- */
.flujo-pasos { display: flex; gap: 8px; margin: 12px 0 14px; padding: 0; list-style: none; font-size: 12px; color: var(--apagado); }
.flujo-pasos li { display: flex; align-items: center; gap: 8px; flex: 1; padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--radio); }
.flujo-pasos b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; font-size: 11px; }
.flujo-pasos .actual { color: var(--verde); border-color: var(--verde); font-weight: 700; }
.flujo-pasos .hecho { color: var(--verde); background: var(--lima); border-color: var(--lima); }
.flujo-pasos .hecho b { background: var(--verde); color: #fff; border-color: var(--verde); }
.propietarios { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.propietarios > li { padding: 12px; border: 1px solid var(--linea); border-radius: var(--radio); font-size: 13px; }
.propietarios small { display: block; font-size: 11px; color: var(--apagado); }
.propietario-mascotas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip-mascota { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--verde); border-radius: 999px; background: var(--lima); color: var(--verde); font-size: 12px; font-weight: 600; transition: background .2s, transform .3s var(--rebote); }
.chip-mascota:hover { background: var(--lima-viva); transform: translateY(-2px); }
.chip-nueva { background: #fff; border-style: dashed; }
.vinculo { display: flex; align-items: center; gap: 8px; margin: 6px 0 14px; padding: 10px 12px; border-radius: var(--radio); background: var(--lima); color: var(--verde); font-size: 13px; }
.programar .linea-check { margin-top: 12px; }

/* ---------- Agenda semanal ---------- */
.agenda-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.agenda-semana { display: grid; gap: 14px; }
.agenda-dia-bloque h2 { font-size: 24px; text-transform: capitalize; }
.agenda-dia-bloque h2 small { font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--apagado); text-transform: none; margin-left: 8px; }
.agenda-dia-bloque.es-hoy { box-shadow: inset 4px 0 0 var(--verde), 0 10px 30px -22px #173f3466; }
.citas { list-style: none; margin: 10px 0 0; padding: 0; }
.cita { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 6px 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--linea); animation: aparecer-linea .4s var(--curva) both; }
.cita time { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cita time small { display: block; font-size: 11px; font-weight: 400; color: var(--apagado); }
.cita-texto strong { display: block; font-size: 13px; }
.cita-texto strong small { font-weight: 400; color: var(--apagado); }
.cita-texto > small { display: block; font-size: 11px; color: var(--apagado); }
.cita-motivo { margin-top: 4px; font-style: italic; }
.cita-acciones { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cita-acciones form { display: inline-flex; }
.cita-iniciar summary { display: inline-flex; align-items: center; gap: 6px; color: var(--verde); font-weight: 700; font-size: 12px; }
.cita-iniciar form { flex-wrap: wrap; align-items: center; }
.cita-cancelada, .cita-noasistio { opacity: .6; }
.cita-pasada time { color: var(--ambar-tinta); }
.ver-agenda { font-size: 12px; margin-top: 4px; }

/* ---------- Corazón de las insignias de estado ---------- */
.insignia-corazon { gap: 5px; }
.corazon-estado { width: 15px; height: 15px; overflow: visible; flex-shrink: 0; }
.corazon-estado * { transform-box: fill-box; transform-origin: center; }
.corazon-estado .latido { fill: currentColor; }
.corazon-estado .marca, .corazon-estado .onda { display: none; }
/* En recuperación: latido tranquilo y un pulso que se dibuja. */
.corazon-recuperacion .latido { animation: latir 1.6s ease-in-out infinite; }
.corazon-recuperacion .marca-pulso { display: inline; stroke-dasharray: 22; animation: trazar-pulso 1.6s linear infinite; }
/* Prioritario: latido rápido con una onda que se expande. */
.corazon-critico .latido { animation: latir .7s ease-in-out infinite; }
.corazon-critico .onda { display: inline; animation: onda-corazon 1.4s ease-out infinite; }
/* Alta: check dentro del corazón y destellos. */
.corazon-alta .marca-check, .corazon-alta .destellos { display: inline; }
.corazon-alta .latido { animation: flotar-corazon 2.4s ease-in-out infinite; }
.corazon-alta .d1 { animation: destellar 1.8s ease-in-out infinite; } .corazon-alta .d2 { animation: destellar 1.8s .9s ease-in-out infinite; }
/* Derivado: flecha que avanza. */
.corazon-derivado .marca-flecha { display: inline; animation: avanzar-flecha 1.4s ease-in-out infinite; }
/* Sin atención activa: contorno que respira despacio. */
.corazon-sin .latido { fill: none; stroke: currentColor; stroke-width: 1.6; animation: reposo 3.5s ease-in-out infinite; }
@keyframes latir { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }
@keyframes trazar-pulso { from { stroke-dashoffset: 22; } to { stroke-dashoffset: -22; } }
@keyframes onda-corazon { from { transform: scale(.5); opacity: .8; } to { transform: scale(1.5); opacity: 0; } }
@keyframes flotar-corazon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2px); } }
@keyframes destellar { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes avanzar-flecha { 0%, 100% { transform: translateX(-1px); } 50% { transform: translateX(1.5px); } }
@keyframes reposo { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------- Perro de perfil de la escena: poses echado (dormido, tumbado, triste) y de pie (camina, juega) ---------- */
.perro-escena { overflow: visible; }
.perro-escena * { transform-box: fill-box; }
.perro-escena .cuerpo-pie, .perro-escena .zzz-e, .perro-escena .cono, .perro-escena .vendaje, .perro-escena .ojo-cerrado,
.perro-escena .ceja-triste, .perro-escena .lengua-e, .perro-escena .maleta-e, .perro-escena .lengua-p { display: none; }
.perro-escena .cuerpo-echado { transform-origin: 50% 100%; }
.perro-escena .cola-e, .perro-escena .cola-p { transform-origin: 100% 100%; }
.perro-escena .cabeza-e, .perro-escena .cabeza-p { transform-origin: 30% 80%; }
.perro-escena .oreja-e, .perro-escena .oreja-p { transform-origin: 60% 10%; }
.perro-escena .ojo-e { transform-origin: center; animation: parpadeo 4.5s infinite; }

/* Dormido (alta): cabeza sobre las patas, ojos cerrados, cola enroscada y zzz. */
.pose-dormido .ojo-e { display: none; }
.pose-dormido .ojo-cerrado, .pose-dormido .zzz-e { display: inline; }
.pose-dormido .cabeza-e { transform: translate(-3px, 10px) rotate(12deg); }
.pose-dormido .cola-e { transform: rotate(-35deg); }
.pose-dormido .cuerpo-echado { animation: respirar-perro 4.2s ease-in-out infinite; }
.pose-dormido .z1 { animation: zzz-perro 3s ease-out infinite; } .pose-dormido .z2 { animation: zzz-perro 3s 1.5s ease-out infinite; }

/* Tumbado (recuperación): cabeza erguida, respira tranquilo y mueve la cola despacio. */
.pose-tumbado .cuerpo-echado { animation: respirar-perro 3.2s ease-in-out infinite; }
.pose-tumbado .cola-e { animation: cola-lenta 2.2s ease-in-out infinite; }
.pose-tumbado .cabeza-e { animation: mirar 6s ease-in-out infinite; }

/* Triste (prioritario): collar isabelino, venda, cabeza baja, orejas caídas y un leve temblor. */
.pose-triste .cono, .pose-triste .vendaje, .pose-triste .ceja-triste { display: inline; }
.pose-triste .cabeza-e { transform: translate(0, 4px) rotate(7deg); }
.pose-triste .oreja-e { transform: rotate(10deg); }
.pose-triste .cola-e { transform: rotate(-60deg); }
.pose-triste .cuerpo-echado { animation: tiritar .45s ease-in-out infinite; }

/* De pie: camina (derivado) con su maletín, o juega (sano) dando botes. */
.pose-camina .cuerpo-echado, .pose-juega .cuerpo-echado { display: none; }
.pose-camina .cuerpo-pie, .pose-juega .cuerpo-pie, .pose-camina .maleta-e, .pose-juega .lengua-p { display: inline; }
.perro-escena .pata { transform-origin: 50% 0%; }
.pose-camina .pata-1, .pose-camina .pata-4 { animation: paso-a .8s ease-in-out infinite; }
.pose-camina .pata-2, .pose-camina .pata-3 { animation: paso-b .8s ease-in-out infinite; }
.pose-camina .cuerpo-pie { animation: trote .4s ease-in-out infinite alternate; }
.pose-camina .cola-p { animation: cola-lenta 1s ease-in-out infinite; }
.pose-juega .cuerpo-pie { transform-origin: 50% 100%; animation: bote 0.55s cubic-bezier(.3, .6, .4, 1) infinite alternate; }
.pose-juega .cola-p { animation: cola-rapida .2s ease-in-out infinite alternate; }
.pose-juega .lengua-p { transform-origin: 50% 0%; animation: jadeo-perro .3s ease-in-out infinite alternate; }

@keyframes respirar-perro { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.01, 1.035); } }
@keyframes zzz-perro { 0% { opacity: 0; transform: translate(0, 4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -12px); } }
@keyframes cola-lenta { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(14deg); } }
@keyframes cola-rapida { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
@keyframes mirar { 0%, 70%, 100% { transform: rotate(0); } 78%, 90% { transform: rotate(-6deg); } }
@keyframes tiritar { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-.5px); } 75% { transform: translateX(.5px); } }
@keyframes paso-a { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-14deg); } }
@keyframes paso-b { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes trote { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes bote { from { transform: translateY(0) rotate(0); } to { transform: translateY(-10px) rotate(-3deg); } }
@keyframes jadeo-perro { from { transform: scaleY(.85); } to { transform: scaleY(1.2); } }

/* ---------- Escena al pie de la ficha: el perrito quieto en su sitio, con su entorno según el estado ---------- */
.escena-paciente { position: relative; height: 170px; margin: 22px 0 0; background: linear-gradient(to bottom, transparent, var(--fondo-panel)); border-radius: var(--radio); overflow: hidden; }
.escena-fondo { position: absolute; inset: 0; width: 100%; height: 100%; }
.escena-fondo .prop { display: none; }
.escena-alta .prop-alta, .escena-recuperacion .prop-recuperacion, .escena-critico .prop-critico,
.escena-derivado .prop-derivado, .escena-sana .prop-sana { display: inline; }
.escena-perrito { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; }
.escena-perrito .perro-escena { width: 190px; height: 122px; }
.escena-paciente figcaption { position: absolute; left: 14px; top: 12px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.escena-alta { background: linear-gradient(to bottom, #e3e8dc, var(--fondo-panel)); }
.escena-alta .escena-perrito { bottom: 20px; }
.escena-fondo .prop *, .escena-fondo .pelota { transform-box: fill-box; }
.escena-fondo .estrella { transform-origin: center; animation: titilar 2.4s ease-in-out infinite; }
.escena-fondo .e2 { animation-delay: 1.2s; }
.escena-fondo .agua { transform-origin: center; animation: ondular 2.6s ease-in-out infinite; }
.escena-fondo .gota { animation: gotear 1.8s ease-in infinite; }
.escena-fondo .cartel { transform-origin: 0% 50%; animation: senalar 1.6s ease-in-out infinite; }
.escena-fondo .pelota { transform-origin: 50% 100%; animation: rebotar .7s cubic-bezier(.4, 0, .6, 1) infinite alternate; }
.escena-fondo .sombra-pelota { transform-box: fill-box; transform-origin: center; animation: sombra .7s cubic-bezier(.4, 0, .6, 1) infinite alternate; }
@keyframes titilar { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes ondular { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.85); } }
@keyframes gotear { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
@keyframes senalar { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes rebotar { from { transform: translateY(0) scale(1.08, .92); } to { transform: translateY(-34px) scale(1); } }
@keyframes sombra { from { transform: scale(1); opacity: .9; } to { transform: scale(.5); opacity: .4; } }

/* ---------- Toast y diálogo ---------- */
.toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 100; max-width: calc(100vw - 28px); padding: 14px 18px; background: var(--verde); color: #fff;
  font-size: 12px; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 18px #173f3420;
  transform: translate(-50%, 0); animation: toast-entrar .5s var(--rebote) both;
}
.toast.saliendo { animation: toast-salir .3s ease-in forwards; }
.toast button { background: none; border: 0; color: #fff; padding: 4px; }
@keyframes toast-entrar { from { transform: translate(-50%, 120%); opacity: 0; } }
@keyframes toast-salir { to { transform: translate(-50%, 120%); opacity: 0; } }

/* ---------- El gato de la casa ---------- */
/* Silueta negra en la franja inferior de la pantalla, animada cuadro a cuadro por gato.js. */
.gato {
  position: fixed; left: 0; bottom: 0; width: 112px; z-index: 70; pointer-events: none;
  will-change: transform; transition: opacity .4s;
}
.gato[hidden] { display: none; }
.gato svg { display: block; width: 100%; height: auto; overflow: visible; }
.gato .figura { filter: url(#gato-borde); transform: scaleX(var(--dir, 1)); transform-box: view-box; transform-origin: 70px 50px; }
/* Cuadro a cuadro: gato.js arma todos los fotogramas y marca uno como visible a la vez. */
.gato .fotograma { display: none; }
.gato .fotograma.visible { display: inline; }
.gato .ojos { transform-box: fill-box; transform-origin: center; }
.gato.parpadeando .ojos { transform: scaleY(.12); }
.gato .pupila { transform: translate(var(--px, 0px), var(--py, 0px)); }.corazon-gato { position: fixed; z-index: 71; pointer-events: none; color: #c95a6b; animation: corazon 1.3s ease-out forwards; }
@keyframes corazon { from { transform: translateY(0) scale(.6); opacity: 1; } to { transform: translateY(-60px) scale(1.1); opacity: 0; } }

.plato-gato {
  position: fixed; left: 14px; bottom: 104px; z-index: 72; width: 64px; height: 54px; padding: 0;
  background: var(--papel); border: 1px solid var(--linea); display: grid; place-items: center; color: var(--verde);
  box-shadow: 0 6px 16px #173f3418; transition: transform .3s var(--rebote), background .2s;
}
.panel-cuerpo .plato-gato { left: auto; right: 18px; }
.plato-gato:hover { transform: translateY(-4px) rotate(-3deg); background: #fff; }
.plato-gato[aria-pressed="true"] { background: var(--lima-viva); }
.croqueta { position: fixed; z-index: 73; width: 14px; height: 12px; pointer-events: none; background: #8a5a2b; border-radius: 40% 60% 50% 45% !important; box-shadow: inset -2px -2px 0 #6b4220; transform: translate(-50%, -50%); }
body.llevando-comida, body.llevando-comida * { cursor: grabbing !important; }

/* ---------- Responsivo ---------- */
@media (hover: hover) { .especie:focus-visible { transform: translateY(-8px); } }
@media (max-width: 1100px) {
  .contenedor { padding: 0 30px; }
  .nav { gap: 18px; }
  .enlace-equipo span { display: none; }
  .banda-interior { grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; padding: 34px 30px; }
  .banda-texto h2 { font-size: 38px; }
  /* El corgi deja de ir entre las letras: el texto va debajo del nombre y el perro tiene su propio espacio sobre la franja. */
  .escena { height: auto; display: flex; flex-direction: column; padding-top: 18px; }
  .escena-marca { position: static; justify-content: space-between; gap: 0; font-size: 17vw; }
  .escena-texto { position: static; margin-top: 22px; max-width: min(400px, 52%); }
  /* A la derecha, al lado del texto. */
  .asomado.corgi { --ancho: 300px; left: auto; right: 6%; }
  .reserva-banda { margin-top: 190px; }
  .servicios-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contacto { gap: 40px; }
  .panel-marco { grid-template-columns: 200px minmax(0, 1fr); }
  .panel-principal { padding: 0 24px 30px; }
  .columnas-panel { grid-template-columns: 1fr; }
  .trabajo { grid-template-columns: 1fr; }
}
/* Cabecera en dos filas antes de que el menú se apriete. */
@media (max-width: 960px) {
  .cabecera { flex-wrap: wrap; gap: 0; min-height: 0; padding-top: 17px; }
  .cabecera-acciones { margin-left: auto; gap: 12px; }
  .nav { order: 3; width: 100%; justify-content: space-between; gap: 12px; margin-top: 14px; border-top: 1px solid #ffffff26; }
  .nav a { padding: 10px 10px; }
}
@media (max-width: 760px) {
  .contenedor { padding: 0 20px; }
  .aviso-academico { font-size: 10px; padding: 6px 14px; }
  .cabecera { flex-wrap: wrap; gap: 0; min-height: 0; padding-top: 17px; }
  .marca strong { font-size: 27px; }
  .cabecera-acciones { margin-left: auto; gap: 9px; }
  .cabecera-acciones .btn { font-size: 11px; padding: 9px 13px; min-height: 40px; }
  .enlace-equipo { display: none; }
  .nav { order: 3; width: 100%; justify-content: space-between; gap: 12px; margin-top: 16px; border-top: 1px solid var(--linea); }
  .nav { gap: 0; overflow-x: auto; scrollbar-width: none; }
  .nav a { font-size: 11px; padding: 9px 8px; }
  .portada { padding: 0 20px; }
  .escena-marca { font-size: 24vw; }
  .escena-texto h1 { font-size: 34px; }
  .reserva-banda { margin-top: 74vw; }

  .asomado.corgi { --ancho: 66vw; left: calc(50% - var(--ancho) / 2); right: auto; }
  .escena-texto { max-width: none; }
  .banda-interior { grid-template-columns: 1fr; padding: 28px 20px 22px; }
  .mesa-agenda { grid-template-columns: 1fr; }
  .reserva-datos { gap: 20px; }
  .cinta-pista > span { font-size: 24px; }
  .servicios { padding: 42px 0; }
  .catalogo-cabecera { display: block; margin-bottom: 22px; }
  .catalogo-cabecera h2 { font-size: 46px; }
  .catalogo-cabecera p { margin-top: 12px; }
  .servicios-tarjetas { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .franja-cuidado { padding: 36px 0; }
  .franja-cabecera { display: block; }
  .franja-cabecera h2 { font-size: 44px; }
  .tarjeta-gato { display: none; }
  .franja-cabecera p { margin-top: 18px; }
  .recorrido { grid-template-columns: 1fr; gap: 24px; }
  .recorrido li { border-right: 0; border-bottom: 1px solid #718d7c; padding: 0 0 24px; }
  .contacto { grid-template-columns: 1fr; gap: 32px; padding-block: 50px; }
  .contacto h2 { font-size: 46px; }
  .contacto-tarjetas { min-height: 470px; }
  .tarjeta-alta img { height: 300px; }
  .pie { flex-direction: column; align-items: start; gap: 8px; }
  .reserva { grid-template-columns: 1fr; gap: 24px; }
  .solicitud { grid-template-columns: 1fr; min-height: 0; }
  .confirmacion { margin: 20px 0 40px; padding: 26px 18px; }
  .confirmacion-cabeza h1 { font-size: 36px; }
  .confirmacion-datos { grid-template-columns: 1fr; }
  .confirmacion-pasos { grid-template-columns: 1fr; gap: 14px; }
  .confirmacion-pasos li { grid-template-columns: 28px 1fr; text-align: left; column-gap: 10px; }
  .confirmacion-pasos li + li::before { display: none; }
  .confirmacion-pasos b { margin: 0; grid-row: span 2; }
  .confirmacion-acciones { flex-direction: column-reverse; }
  .confirmacion-acciones .btn { width: 100%; }
  .solicitud-panel { gap: 18px; padding: 20px; }
  .solicitud-panel .pasos { flex-direction: row; font-size: 11px; }
  .solicitud-panel .pasos li { flex: 1; padding: 0 0 0 24px; }
  .solicitud-panel .pasos li::before, .solicitud-foto, .solicitud-panel .resumen-fila:last-child { display: none; }
  .solicitud-panel .resumen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .solicitud-cuerpo { padding: 28px 18px 24px; }
  .solicitud-cuerpo h2 { font-size: 34px; }
  .solicitud .opciones-servicio { grid-template-columns: 1fr; }
  .acciones-clinicas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cita { grid-template-columns: 56px minmax(0, 1fr); }
  .cita > .insignia { grid-column: 2; justify-self: start; }
  .flujo-pasos { flex-direction: column; }
  .panel-lateral > form { padding: 18px 16px; }
  .superficie { padding: 20px 17px; }
  .pasos { font-size: 10px; }
  .campos { grid-template-columns: 1fr; }
  .resumen { position: static; }
  .horarios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .casos { grid-template-columns: 1fr; }
  .caso { grid-template-columns: 100px minmax(0, 1fr); }
  .caso img { width: 100px; height: 150px; }
  .acceso { grid-template-columns: 1fr; min-height: 0; }
  .acceso-foto { min-height: 170px; }
  .acceso-foto-texto { left: 20px; right: 20px; bottom: 18px; }
  .acceso-lema { font-size: 32px; }
  .acceso-tareas, .acceso-aviso { display: none; }
  .acceso-lado { padding: 30px 20px 40px; }
  .acceso-form h1 { font-size: 38px; }
  .acceso-gato { right: 14px; width: 72px; }
  .panel-marco { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; height: auto; padding: 14px 14px 10px; gap: 10px; border-radius: 0 0 22px 22px; }
  .plegar-lateral, .lateral-pie p, .lateral nav a::before, .lateral nav a::after { display: none; }
  .lateral nav { display: flex; overflow: auto; }
  .lateral nav a { padding: 9px 12px; font-size: 11px; border-radius: 999px; }
  .con-burbuja .burbuja, .gotita { display: none; }
  .con-burbuja a[aria-current="page"] { background: var(--fondo-panel); }
  .lateral-pie { margin-top: 0; }
  .panel-barra { flex-wrap: wrap; padding: 12px 14px; }
  .identidad-texto { display: none; }
  .panel-principal { padding: 14px 12px 28px; }
  .hoy h1 { font-size: 34px; }
  .hoy-cifras a, .hoy-cifras li > span { padding: 4px 12px 4px 0; }
  .hoy-cifras li + li { border-left: 0; }
  .tarea { grid-template-columns: auto minmax(0, 1fr); }
  .tarea-tiempo, .tarea-accion { grid-column: 2; }
  .gato { width: 84px; }
  .plato-gato { width: 54px; height: 46px; left: 10px; bottom: 82px; }
}

/* Movimiento reducido: sin animaciones; el gato queda quieto. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .btn:not(:disabled):active { scale: 1; }
  .check-dibujado circle, .check-dibujado path { stroke-dashoffset: 0; }
}

/* Seguimiento público: pestañas código / teléfono (sin JS) y línea de tiempo del estado. */
.busqueda-seguimiento > input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.busqueda-pestanas { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 12px; background: var(--lima); }
.busqueda-pestanas label { padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--apagado); cursor: pointer; transition: background .2s, color .2s; }
#modo-codigo:checked ~ .busqueda-pestanas label[for=modo-codigo],
#modo-telefono:checked ~ .busqueda-pestanas label[for=modo-telefono] { background: var(--verde); color: var(--blanco); }
#modo-codigo:focus-visible ~ .busqueda-pestanas label[for=modo-codigo],
#modo-telefono:focus-visible ~ .busqueda-pestanas label[for=modo-telefono] { outline: 2px solid var(--verde); outline-offset: 2px; }
#modo-codigo:checked ~ .busqueda-telefono, #modo-telefono:checked ~ .busqueda-codigo { display: none; }

.estado-solicitud { margin-top: 16px; }
.estado-solicitud-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.estado-solicitud-cabecera h2 { margin-top: 12px; }
.estado-solicitud-cabecera > small { text-align: right; flex-shrink: 0; }
.estado-solicitud-cita { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 18px 0 4px; background: var(--linea); border: 1px solid var(--linea); }
.estado-solicitud-cita > div { padding: 12px 14px; background: var(--lima-viva); }
.estado-solicitud-cita dt { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.estado-solicitud-cita dd { margin: 4px 0 0; font-weight: 700; color: var(--verde-hondo); text-transform: capitalize; }

.linea-seguimiento { list-style: none; margin: 20px 0 0; padding: 0; }
.linea-seguimiento li { position: relative; display: grid; gap: 2px; padding: 0 0 18px 30px; }
.linea-seguimiento li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 12px; height: 12px; border: 2px solid var(--linea); background: var(--blanco); }
.linea-seguimiento li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 20px; bottom: 2px; width: 2px; background: var(--linea); }
.linea-seguimiento li span { color: var(--apagado); font-size: 14px; }
.linea-seguimiento time { font-size: 12px; color: var(--apagado); }
.linea-seguimiento .hito-hecho::before { background: var(--verde); border-color: var(--verde); }
.linea-seguimiento .hito-hecho::after { background: var(--verde) !important; }
.linea-seguimiento .hito-actual::before { border-color: var(--verde); box-shadow: 0 0 0 4px var(--lima-viva); animation: hito-latido 1.8s ease-in-out infinite; }
.linea-seguimiento .hito-pendiente strong { color: var(--apagado); }
.linea-seguimiento .hito-cerrado::before { background: var(--rojo-tinta); border-color: var(--rojo-tinta); }
.linea-seguimiento .hito-cerrado span { color: var(--rojo-tinta); }
@keyframes hito-latido { 50% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .linea-seguimiento .hito-actual::before { animation: none; } }
@media (max-width: 600px) {
  .estado-solicitud-cabecera { flex-direction: column; }
  .estado-solicitud-cabecera > small { text-align: left; }
  .estado-solicitud-cita { grid-template-columns: 1fr; }
}
/* Administración: supervisión, historial y catálogos. */
.acciones-encabezado { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 0 0 20px; padding: 0; list-style: none; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.admin-cifras li { display: grid; gap: 4px; padding: 16px 18px; background: #fff; font-size: 12px; color: var(--apagado); }
.admin-cifras strong { font-family: var(--serif); font-size: 36px; font-weight: 400; line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums; }
.admin-cifras .cifra-aviso strong { color: var(--ambar-tinta); }
.admin-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.admin-rejilla .tarjeta h2 { font-size: 22px; }
.barras { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.barras li { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 1.4fr) auto; align-items: center; gap: 10px; font-size: 12px; }
.barras li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra { height: 10px; background: var(--lima); border-radius: 99px; overflow: hidden; }
.barra > span { display: block; height: 100%; min-width: 4px; background: var(--verde); border-radius: inherit; transform-origin: left; animation: crecer-barra .8s var(--curva) both; }
.barras small { color: var(--apagado); font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes crecer-barra { from { transform: scaleX(0); } }
.columnas-dia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 150px; margin: 16px 0 10px; padding: 0; list-style: none; }
.columnas-dia li { display: grid; grid-template-rows: 1fr auto auto; justify-items: center; gap: 3px; font-size: 11px; color: var(--apagado); }
.columnas-dia .columna { align-self: end; width: 100%; max-width: 34px; background: var(--verde); border-radius: 4px 4px 0 0; transform-origin: bottom; animation: crecer-columna .8s var(--curva) both; }
.columnas-dia strong { font-size: 12px; color: var(--tinta); font-variant-numeric: tabular-nums; }
@keyframes crecer-columna { from { transform: scaleY(0); } }
.enlace-mas { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--verde); }

.barra-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 14px; }
.barra-filtros .campo { margin-top: 0; min-width: 150px; flex: 1 1 150px; }
.barra-filtros-acciones { display: flex; align-items: center; gap: 12px; padding-bottom: 2px; }
.tabla-historial td { vertical-align: top; }
.tabla-historial time small { color: var(--apagado); }
.campos-historial { max-width: 340px; color: var(--apagado); font-size: 11px; word-break: break-word; }
.accion-historial { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: 99px; background: var(--lima); color: var(--verde-hondo); }
.accion-historial.accion-modificó { background: var(--ambar-fondo); color: var(--ambar-tinta); }
.accion-historial.accion-quitó { background: var(--rojo-fondo); color: var(--rojo-tinta); }
.accion-historial.accion-abrió { background: #e7eef6; color: #2c4a6b; }
.paginacion { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 18px; font-size: 12px; }
.paginacion a { display: inline-flex; align-items: center; gap: 6px; color: var(--verde); font-weight: 600; }

.admin-catalogos { display: grid; gap: 20px; }
.editar-fila, .nuevo-catalogo { position: relative; }
.editar-fila > summary, .nuevo-catalogo > summary { list-style: none; cursor: pointer; }
.editar-fila > summary::-webkit-details-marker, .nuevo-catalogo > summary::-webkit-details-marker { display: none; }
.editar-fila[open] { flex-basis: 100%; }
.form-fila { display: grid; gap: 4px; max-width: 520px; padding: 4px 0 12px; }
.form-fila .btn { justify-self: start; margin-top: 12px; }
.nuevo-catalogo { margin-top: 16px; }
.subtitulo-catalogo { margin-top: 28px; font-size: 16px; }
.lista-veterinarios, .lista-especies { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.lista-veterinarios li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--linea); border-radius: 99px; font-size: 12px; }
.lista-especies li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--linea); border-radius: var(--radio); }
.form-en-linea { display: flex; align-items: center; gap: 8px; }
.form-en-linea input { min-height: 36px; padding: 6px 10px; }
@media (prefers-reduced-motion: reduce) { .barra > span, .columnas-dia .columna { animation: none; } }
/* Filtros de agenda y conteos en pestañas. */
.agenda-filtros { margin-bottom: 20px; padding: 16px 20px; }
.filtros a small { margin-left: 4px; opacity: .75; font-variant-numeric: tabular-nums; }
.tarjeta .barra-filtros { margin-bottom: 8px; }
/* Barra de progreso entre páginas (kuyalu.js): avanza hasta 85 % mientras espera y se completa al llegar. */
.barra-carga { position: fixed; inset: 0 0 auto; z-index: 9999; height: 3px; pointer-events: none; opacity: 0; transform: scaleX(0); transform-origin: left; background: var(--lima-viva); box-shadow: 0 0 0 1px #24564333; }
.barra-carga.activa { opacity: 1; animation: barra-cargando 6s cubic-bezier(.1, .7, .2, 1) forwards; }
.barra-carga.lista { animation: none; transform: scaleX(1); opacity: 0; transition: transform .2s, opacity .3s .1s; }
.panel-cuerpo .barra-carga { background: var(--verde); }
@keyframes barra-cargando { from { transform: scaleX(0); } to { transform: scaleX(.85); } }
@media (prefers-reduced-motion: reduce) { .barra-carga.activa { animation-duration: .01s; } }
/* Días de atención en Catálogos. */
.dias-semana { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; border: 0; }
.dias-semana label { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid var(--linea); border-radius: 99px; font-size: 12px; cursor: pointer; }
.dias-semana label:has(input:checked) { background: var(--lima-viva); border-color: var(--verde); color: var(--verde-hondo); }
.dias-semana input { accent-color: var(--verde); }
/* Ficha: pestañas Atención actual / Historial (sin JS) y contenido del historial. */
.pestana-radio { position: absolute; opacity: 0; pointer-events: none; }
.pestanas-ficha { display: inline-flex; gap: 4px; padding: 4px; margin: 18px 0 4px; background: var(--lima); border-radius: 99px; }
.pestanas-ficha label { padding: 7px 16px; font-size: 13px; font-weight: 600; color: var(--apagado); border-radius: 99px; cursor: pointer; transition: background .2s, color .2s; }
.pestanas-ficha small { margin-left: 4px; font-variant-numeric: tabular-nums; opacity: .8; }
#pestana-actual:checked ~ .pestanas-ficha label[for=pestana-actual],
#pestana-historial:checked ~ .pestanas-ficha label[for=pestana-historial] { background: var(--verde); color: #fff; }
#pestana-actual:focus-visible ~ .pestanas-ficha label[for=pestana-actual],
#pestana-historial:focus-visible ~ .pestanas-ficha label[for=pestana-historial] { outline: 2px solid var(--verde); outline-offset: 2px; }
#pestana-actual:checked ~ .panel-historial, #pestana-historial:checked ~ .panel-actual { display: none; }
.historial-cifras { display: flex; flex-wrap: wrap; gap: 1px; margin: 14px 0 6px; padding: 0; list-style: none; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.historial-cifras li { flex: 1 1 90px; display: grid; gap: 2px; padding: 10px 12px; background: #fff; font-size: 11px; color: var(--apagado); }
.historial-cifras strong { font-family: var(--serif); font-size: 26px; font-weight: 400; line-height: 1; color: var(--tinta); }
.historial-cifras .cifra-aviso strong { color: var(--ambar-tinta); }
.historial-atenciones { display: grid; gap: 0; margin: 8px 0 0; padding: 0; list-style: none; }
.historial-atenciones li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.historial-fecha { display: grid; gap: 2px; font-size: 13px; }
.historial-fecha small { color: var(--apagado); font-size: 11px; }
.historial-atenciones p { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.historial-motivo { font-size: 13px; }
.historial-contacto { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; margin: 8px 0 0; }
.historial-contacto dt { font-size: 11px; color: var(--apagado); }
.historial-contacto dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; }
.chips-mascotas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
@media (max-width: 600px) { .historial-atenciones li { grid-template-columns: 1fr; gap: 4px; } }
/* Notificación al iniciar sesión: tarjeta verde oscuro abajo a la derecha. La campana suena al aparecer y al pasar
   el ratón; las filas entran una tras otra; la cifra (etiqueta con el color de su urgencia) cuenta desde cero y el caso
   crítico late. La línea lima del pie marca cuánto falta para cerrarse. */
.notificacion-inicio { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: min(350px, calc(100vw - 32px)); overflow: hidden; background: var(--verde-hondo); color: var(--papel); border-radius: 12px; box-shadow: 0 24px 48px -20px #0b1f18cc; animation: notificacion-entrar .5s var(--rebote) both; }
.notificacion-inicio header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px 16px 12px 18px; }
.notificacion-campana { display: grid; place-items: center; color: var(--lima-viva); }
.notificacion-campana svg { overflow: visible; }
.campana-cuerpo { transform-origin: 12px 3px; animation: campana-sonar 1.1s .45s ease-in-out both; }
.campana-badajo { animation: badajo .9s .5s ease-in-out both; }
.notificacion-inicio header:hover .campana-cuerpo { animation: campana-sonar 1.1s ease-in-out; }
.notificacion-inicio header:hover .campana-badajo { animation: badajo .9s .05s ease-in-out; }
.notificacion-titulo small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #a9bfb2; }
.notificacion-titulo strong { display: block; margin-top: 2px; font-family: var(--serif); font-size: 23px; font-weight: 400; line-height: 1.1; }
.notificacion-inicio header button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 99px; background: transparent; color: #a9bfb2; cursor: pointer; transition: background .2s, color .2s, transform .3s var(--rebote); }
.notificacion-inicio header button:hover { background: #ffffff1a; color: #fff; transform: rotate(90deg); }
.notificacion-inicio ul { display: grid; gap: 4px; margin: 0; padding: 0 10px 12px; list-style: none; }
.notificacion-inicio li { animation: fila-entrar .45s var(--curva) both; animation-delay: calc(.35s + var(--orden, 0) * .09s); }
.notificacion-inicio li a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 9px 8px; border-radius: 8px; color: var(--papel); text-decoration: none; transition: background .2s; }
.notificacion-inicio li a:hover { background: #ffffff12; }
.notificacion-cifra { position: relative; display: grid; place-items: center; min-width: 38px; height: 34px; padding: 0 8px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 8px; color: var(--verde-hondo); background: var(--lima-viva); }
.nivel-atencion .notificacion-cifra { background: #f3d27a; color: #4a3a0e; }
.nivel-critico .notificacion-cifra { background: #ff9c86; color: #4d160b; }
.nivel-critico .notificacion-cifra::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 #ff9c86aa; animation: latido-aviso 1.8s 1s ease-out infinite; }
.notificacion-texto { display: grid; gap: 2px; min-width: 0; }
.notificacion-texto > span { font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.notificacion-texto small { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #a9bfb2; transition: color .2s; }
.notificacion-texto small .flecha { transition: transform .3s var(--rebote); }
.notificacion-inicio li a:hover small { color: var(--lima-viva); }
.notificacion-inicio li a:hover small .flecha { transform: translateX(4px); }
.notificacion-inicio .avisos-tiempo { display: block; height: 3px; background: var(--lima-viva); transform-origin: left; animation: avisos-tiempo var(--duracion-avisos, 10s) linear forwards; }
.notificacion-inicio.pausado .avisos-tiempo { animation-play-state: paused; }
.notificacion-inicio.saliendo { animation: notificacion-salir .35s var(--curva) forwards; }
@keyframes notificacion-entrar { from { opacity: 0; transform: translateY(28px) scale(.96); } }
@keyframes notificacion-salir { to { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes fila-entrar { from { opacity: 0; transform: translateX(14px); } }
@keyframes campana-sonar { 10% { transform: rotate(18deg); } 25% { transform: rotate(-15deg); } 40% { transform: rotate(10deg); } 55% { transform: rotate(-6deg); } 70% { transform: rotate(3deg); } 85%, 100% { transform: rotate(0); } }
@keyframes badajo { 15% { transform: translateX(-2px); } 35% { transform: translateX(2px); } 55% { transform: translateX(-1px); } 75%, 100% { transform: none; } }
@keyframes latido-aviso { 70% { box-shadow: 0 0 0 8px #ff9c8600; } 100% { box-shadow: 0 0 0 0 #ff9c8600; } }
@keyframes avisos-tiempo { to { transform: scaleX(0); } }
@media (max-width: 600px) { .notificacion-inicio { right: 16px; left: 16px; bottom: 16px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .notificacion-inicio, .notificacion-inicio.saliendo, .notificacion-inicio li, .campana-cuerpo, .campana-badajo, .nivel-critico .notificacion-cifra::after { animation: none; } }
/* Botón "Editar datos" de recepción en la cabecera de la ficha. */
.ficha-cabecera .editar-ficha { margin-left: auto; align-self: flex-start; }