:root {
  --color-principal: #3E5BB5;
  --color-secundario: #24BEFF;
  --color-complementario: #F2EDDF;
  --color-blanco: #FFFFFF;
  --color-texto: #26282B;
  --color-texto-tenue: #6c727c;
  --color-borde-suave: #e3e7ef;
  --color-alerta-texto: #a61b1b;
  --color-fondo: #ebebeb;
  /* Papel tapiz: siluetas de las galletas de pez y hueso del sitio público
     (assets/img/galleta_*.webp), en color de texto casi transparente.
     El color va fijo en el SVG porque un data URI no puede leer variables CSS. */
  --ac-tapiz-galletas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cdefs%3E%3Cpath id='p' d='M4 32C4 16 30 4 58 4C74 4 84 12 90 20L108 6C113 3 117 7 115 13L104 32L115 51C117 57 113 61 108 58L90 44C84 52 74 60 58 60C30 60 4 48 4 32Z'/%3E%3Cpath id='h' d='M18 4C26 4 30 9 32 14Q60 20 88 14C90 9 94 4 102 4C112 4 117 12 114 20C113 24 110 27 107 28C110 29 113 32 114 36C117 44 112 52 102 52C94 52 90 47 88 42Q60 36 32 42C30 47 26 52 18 52C8 52 3 44 6 36C7 32 10 29 13 28C10 27 7 24 6 20C3 12 8 4 18 4Z'/%3E%3C/defs%3E%3Cg fill='%2326282B' fill-opacity='.05'%3E%3Cuse href='%23p' transform='translate(27 22) rotate(-20) scale(.33) translate(-60 -32)'/%3E%3Cuse href='%23h' transform='translate(70 27) rotate(65) scale(.33) translate(-60 -28)'/%3E%3Cuse href='%23p' transform='translate(117 25) rotate(160) scale(.33) translate(-60 -32)'/%3E%3Cuse href='%23h' transform='translate(170 21) rotate(-35) scale(.33) translate(-60 -28)'/%3E%3Cuse href='%23p' transform='translate(216 27) rotate(100) scale(.33) translate(-60 -32)'/%3E%3Cuse href='%23h' transform='translate(21 72) rotate(15) scale(.33) translate(-60 -28)'/%3E%3Cuse href='%23p' transform='translate(74 76) rotate(-110) scale(.33) translate(-60 -32)'/%3E%3Cuse href='%23h' transform='translate(124 70) rotate(-70) scale(.33) translate(-60 -28)'/%3E%3Cuse href='%23p' transform='translate(166 74) rotate(30) scale(.33) translate(-60 -32)'/%3E%3Cuse href='%23h' transform='translate(213 69) rotate(140) scale(.33) translate(-60 -28)'/%3E%3Cuse href='%23p' transform='translate(26 117) rotate(75) scale(.33) translate(-60 -32)'/%3E%3Cuse href='%23h' transform='translate(68 122) rotate(-15) scale(.33) translate(-60 -28)'/%3E%3Cuse href='%23p' transform='translate(123 123) rotate(-150) scale(.33) translate(-60 -32)'/%3E%3Cuse href='%23h' transform='translate(168 116) rotate(110) scale(.33) translate(-60 -28)'/%3E%3Cuse href='%23p' transform='translate(212 121) rotate(-45) scale(.33) translate(-60 -32)'/%3E%3Cuse href='%23h' transform='translate(27 171) rotate(-120) scale(.33) translate(-60 -28)'/%3E%3Cuse href='%23p' transform='translate(69 166) rotate(10) scale(.33) translate(-60 -32)'/%3E%3Cuse href='%23h' transform='translate(122 170) rotate(40) scale(.33) translate(-60 -28)'/%3E%3Cuse href='%23p' transform='translate(172 165) rotate(-80) scale(.33) translate(-60 -32)'/%3E%3Cuse href='%23h' transform='translate(214 171) rotate(-5) scale(.33) translate(-60 -28)'/%3E%3Cuse href='%23p' transform='translate(22 216) rotate(135) scale(.33) translate(-60 -32)'/%3E%3Cuse href='%23h' transform='translate(76 213) rotate(90) scale(.33) translate(-60 -28)'/%3E%3Cuse href='%23p' transform='translate(117 218) rotate(-25) scale(.33) translate(-60 -32)'/%3E%3Cuse href='%23h' transform='translate(164 214) rotate(-150) scale(.33) translate(-60 -28)'/%3E%3Cuse href='%23p' transform='translate(219 214) rotate(55) scale(.33) translate(-60 -32)'/%3E%3C/g%3E%3C/svg%3E");
}

body {
  font-family: 'Roboto', sans-serif;
  color: var(--color-texto);
  background-color: var(--color-fondo);
  background-image: var(--ac-tapiz-galletas);
}

h1, h2, h3, h4, h5, h6, .ac-fuente-titulo {
  font-family: 'Google Sans Flex', 'Roboto', sans-serif;
  font-weight: 700;
}

/* Logo real (icono casa + wordmark), replicado del sitio público en vez del
   texto "AnimalClinic" plano, para mantener la identidad de marca uniforme. */
.ac-logo-icono {
  height: 30px;
  width: auto;
}

.ac-logo {
  height: 36px;
  width: auto;
}

.ac-topbar {
  background-color: var(--color-blanco);
  border-bottom: 1px solid #e6e6e6;
  padding: .85rem 0;
}

.ac-main { padding: 1.5rem 0; }

.ac-boton-principal {
  background-color: var(--color-principal);
  color: var(--color-blanco);
  font-weight: 500;
  border-radius: .5rem;
}
.ac-boton-principal:hover { background-color: #324a92; color: var(--color-blanco); }

.ac-boton-tutor {
  background-color: transparent;
  color: var(--color-principal);
  border: 1px solid var(--color-principal);
  font-weight: 500;
  border-radius: .5rem;
}
.ac-boton-tutor:hover { background-color: var(--color-complementario); color: var(--color-principal); }

.ac-tarjeta {
  background-color: var(--color-blanco);
  border: 1px solid var(--color-secundario);
  border-radius: .75rem;
  padding: 1.5rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

.ac-pagina-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-principal), var(--color-secundario));
  padding: 1.5rem;
}

/* Campo trampa de registro.php: fuera de la vista para personas, visible para robots. */
.ac-campo-trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ac-tarjeta-login {
  background-color: var(--color-blanco);
  border-radius: 1rem;
  padding: 2.5rem;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(0,0,0,.2);
}

.ac-foto-perfil-mascota {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: .75rem;
  background-color: var(--color-complementario);
}

.ac-miniatura-galeria {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: .5rem;
  cursor: pointer;
}

/* Placeholder de un documento (PDF/Word) en la galería: no tiene miniatura real,
   así que se muestra como una tarjeta con la extensión en texto. */
.ac-miniatura-documento {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-complementario);
  color: var(--color-principal);
  font-weight: 700;
  font-size: .85rem;
}

/* Encabezado oscuro para todas las tablas, con texto en blanco para mantener
   buen contraste (mismo criterio que en medico.animalclinic.com.mx). */
.table thead th {
  background-color: #343434;
  color: var(--color-blanco);
  border-color: #343434;
}

.ac-tarjeta-mascota {
  background-color: var(--color-blanco);
  border-radius: .75rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .15s ease;
}
.ac-tarjeta-mascota:hover { transform: translateY(-3px); color: inherit; }
.ac-tarjeta-mascota img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* Mascota sin foto: el logo se muestra completo en lugar de recortado. */
.ac-tarjeta-mascota img.ac-foto-vacia,
.ac-foto-vacia {
  object-fit: contain;
  padding: 1rem;
  background-color: var(--color-complementario);
}

/* Navegación: arriba en escritorio, barra fija abajo en teléfono (alcance del pulgar). */
.ac-nav-superior { gap: .25rem; }
.ac-nav-superior a {
  padding: .4rem .85rem;
  border-radius: .5rem;
  color: var(--color-texto);
  text-decoration: none;
  font-weight: 500;
}
.ac-nav-superior a:hover { background-color: var(--color-complementario); }
.ac-nav-superior a.activo { background-color: var(--color-principal); color: var(--color-blanco); }

.ac-nav-inferior {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  background-color: var(--color-principal);
  padding-bottom: env(safe-area-inset-bottom);
}
.ac-nav-inferior a {
  flex: 1;
  text-align: center;
  padding: .85rem .25rem;
  color: var(--color-blanco);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  opacity: .8;
}
.ac-nav-inferior a.activo { opacity: 1; box-shadow: inset 0 3px 0 var(--color-blanco); }

@media (max-width: 767.98px) {
  .ac-main { padding-bottom: 6rem; }
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-secundario);
  outline-offset: 2px;
}

/* Contacto: mismo botón de WhatsApp que el sitio público. */
.ac-boton-whatsapp {
  background-color: #cc1519;
  color: var(--color-blanco);
  font-weight: 700;
  border-radius: 999px;
  padding: .65rem 1.5rem;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.ac-boton-whatsapp:hover { background-color: #a51014; color: var(--color-blanco); }

.ac-whatsapp-flotante {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1031;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25D366;
  color: var(--color-blanco);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.ac-whatsapp-flotante svg { width: 28px; height: 28px; }
.ac-whatsapp-flotante:hover { color: var(--color-blanco); filter: brightness(.95); }

@media (max-width: 767.98px) {
  .ac-whatsapp-flotante { bottom: 4.5rem; }
}

/* Avisos del inicio */
.ac-fila-aviso {
  padding: .6rem 0;
  border-bottom: 1px solid #eef0f4;
}
.ac-fila-aviso:last-child { border-bottom: 0; }

.ac-tarjeta-cita { border-left: 6px solid var(--color-principal); }
.ac-tarjeta-encuesta { border-color: var(--color-principal); }

/* Encuesta rápida: botones grandes, fáciles de tocar en teléfono. */
.ac-opciones-encuesta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}
.ac-boton-emoji {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .75rem .25rem;
  border: 1px solid #dfe3ea;
  border-radius: .75rem;
  background-color: var(--color-blanco);
  font-size: .85rem;
  font-weight: 500;
  color: var(--color-texto);
  transition: transform .1s ease, border-color .1s ease;
}
.ac-boton-emoji:hover { border-color: var(--color-principal); transform: translateY(-2px); }
.ac-emoji { font-size: 2rem; line-height: 1; }

.ac-opciones-recomendacion {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: .35rem;
}
@media (max-width: 575.98px) {
  .ac-opciones-recomendacion { grid-template-columns: repeat(5, 1fr); }
}
.ac-boton-numero {
  min-height: 44px;
  border-radius: .5rem;
  border: 1px solid transparent;
  font-weight: 700;
}
.ac-boton-numero-bajo { background-color: #fde8e8; color: #a61b1b; }
.ac-boton-numero-medio { background-color: #fff4d6; color: #7a5300; }
.ac-boton-numero-alto { background-color: #dff5e6; color: #146c2e; }
.ac-boton-numero:hover { border-color: currentColor; }

/* Retroalimentación de formularios (assets/js/formularios.js); igual que en medico.* */
.ac-obligatorio {
  color: var(--color-alerta-texto);
  font-weight: 700;
}

.ac-nota-obligatorio {
  font-size: .8rem;
  color: var(--color-texto-tenue);
  margin-bottom: .75rem;
}

.ac-error-campo::before {
  content: "⚠ ";
}

.ac-resumen-errores ul { padding-left: 1.1rem; }

.ac-enviando {
  pointer-events: none;
  opacity: .75;
}

/* Ayuda: manual (ayuda.php) y guías paso a paso (assets/js/ayuda.js).
   Mismas reglas que en medico.*, salvo la posición de la píldora. */
.ac-dato-etiqueta {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-texto-tenue);
}

.ac-boton-guia {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.ac-ancla-ayuda { scroll-margin-top: 1rem; }

.ac-tarjeta-guia {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-borde-suave);
  border-radius: .6rem;
  padding: 1rem;
}

.ac-manual-indice {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.ac-manual-indice a {
  padding: .4rem .75rem;
  border-radius: .5rem;
  color: var(--color-principal);
  text-decoration: none;
  font-weight: 500;
}

.ac-manual-indice a:hover { background-color: var(--color-complementario); }

@media (min-width: 992px) {
  .ac-manual-indice {
    position: sticky;
    top: 1rem;
  }
}

.ac-acordeon-manual .accordion-button {
  font-weight: 500;
  padding-left: 0;
  padding-right: 0;
}

.ac-acordeon-manual .accordion-button:not(.collapsed) {
  background-color: transparent;
  color: var(--color-principal);
  box-shadow: none;
}

.ac-acordeon-manual .accordion-body { padding: 0 0 1rem; }

.ac-contenido-manual li { margin-bottom: .3rem; }

.ac-panel-ayuda { --bs-offcanvas-width: 380px; }

.ac-opcion-guia {
  text-align: left;
  padding: .75rem 1rem;
  border: 1px solid var(--color-borde-suave);
  border-radius: .6rem;
  background-color: var(--color-blanco);
  color: var(--color-texto);
}

.ac-opcion-guia:hover { border-color: var(--color-principal); }

/* Barra de la guía en curso: fija abajo y sin fondo oscuro, para seguir trabajando
   sobre la pantalla real. Queda por encima de los modales (1055) porque hay pasos
   que ocurren dentro de uno. */
.ac-guia-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1060;
  max-height: 60vh;
  overflow-y: auto;
  padding: .6rem 1rem .75rem;
  background-color: var(--color-blanco);
  border-top: 3px solid var(--color-principal);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .12);
}

/* Minimizada: píldora a la izquierda (a la derecha suelen ir WhatsApp y acciones). */
.ac-guia-barra.minimizada {
  right: auto;
  left: 1rem;
  max-width: min(360px, calc(100vw - 6rem));
  padding: 0;
  border: 0;
  background-color: transparent;
  box-shadow: none;
  overflow: visible;
}

.ac-guia-barra-compacta {
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: 100%;
  padding: .5rem .9rem;
  border: 0;
  border-radius: 999px;
  background-color: var(--color-principal);
  color: var(--color-blanco);
  font-weight: 500;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.ac-guia-barra-contador {
  flex-shrink: 0;
  padding: 0 .5rem;
  border-radius: 999px;
  background-color: var(--color-blanco);
  color: var(--color-principal);
  font-size: .8rem;
  font-weight: 700;
}

.ac-guia-barra-recorte {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-guia-barra-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .35rem;
}

.ac-guia-barra-contexto {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-texto-tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-guia-barra-icono {
  padding: .1rem .5rem;
  line-height: 1;
  font-weight: 700;
  color: var(--color-texto);
}

.ac-guia-barra-progreso {
  height: 4px;
  margin-bottom: .5rem;
  border-radius: 2px;
  background-color: var(--color-borde-suave);
  overflow: hidden;
}

.ac-guia-barra-progreso span {
  display: block;
  height: 100%;
  background-color: var(--color-principal);
  transition: width .25s ease;
}

.ac-guia-barra-cuerpo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
}

.ac-guia-barra-texto {
  flex: 1 1 320px;
  min-width: 0;
}

.ac-guia-barra-aviso { margin-top: .15rem; }

.ac-guia-barra-botones {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.ac-guia-barra-pasos {
  margin: .6rem 0 0;
  padding-left: 1.25rem;
  columns: 2 260px;
  font-size: .875rem;
}

.ac-guia-barra :focus-visible {
  outline: 3px solid var(--color-secundario);
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  .ac-guia-barra-botones { width: 100%; }
  .ac-guia-barra-botones .btn { flex: 1; }
}

body.ac-con-guia { padding-bottom: var(--ac-alto-guia, 0px); }

/* Los modales también dejan libre la franja de la barra para poder desplazar su contenido. */
body.ac-con-guia .modal { padding-bottom: var(--ac-alto-guia, 0px); }

.ac-resaltado-guia {
  outline: 3px solid var(--color-secundario) !important;
  outline-offset: 4px;
  animation: ac-pulso-guia 1.2s ease-in-out 3;
}

@keyframes ac-pulso-guia {
  0%, 100% { box-shadow: 0 0 0 0 rgba(36, 190, 255, .6); }
  50% { box-shadow: 0 0 0 10px rgba(36, 190, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ac-resaltado-guia { animation: none; }
  .ac-guia-barra-progreso span { transition: none; }
}

/* Número del paso pegado al elemento marcado: une lo que dice la barra con la pantalla. */
.ac-marca-paso {
  position: absolute;
  z-index: 1061;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--color-principal);
  color: var(--color-blanco);
  font-size: .85rem;
  font-weight: 700;
  box-shadow: 0 0 0 3px var(--color-blanco), 0 4px 10px rgba(0, 0, 0, .3);
  pointer-events: none;
}

/* Con la guía abierta, el botón de WhatsApp sube para no quedar debajo de la barra. */
body.ac-con-guia .ac-whatsapp-flotante { bottom: calc(var(--ac-tope-guia, 0px) + 1rem); }