/* =========================================================================
   Movimiento y microinteracciones de la plantilla.
   Reglas: lo que se anima seguido usa solo transform y opacity; duraciones de 0.2 a 0.4 s;
   hover solo con mouse; presión con :active en táctil; nada si el usuario pide menos movimiento.
   ========================================================================= */
:root {
  --rapido: .2s;
  --normal: .3s;
  --lento: .4s;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --curva-salida: cubic-bezier(.4, 0, 1, 1);
  --presion: .97;
  --anillo: 0 0 0 3px color-mix(in srgb, var(--acento) 32%, transparent);
}
html { -webkit-tap-highlight-color: transparent; }

/* Transiciones base de todo lo que cambia de estado */
.btn, .pildora, .opcion, .fila.clic, .flecha, .cerrar, .fab, .menu a, .horas-libres button, .resultados button, .wa, .bloque, .interruptor span, .estado {
  transition: transform var(--rapido) var(--curva), background-color var(--rapido) var(--curva), border-color var(--rapido) var(--curva),
    color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva), opacity var(--rapido) var(--curva), filter var(--rapido) var(--curva);
}
input, select, textarea { transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva), background-color var(--rapido) var(--curva); }

/* Presión al tocar o hacer clic (táctil y mouse) */
.btn:active:not(:disabled), .pildora:active, .opcion:active, .fila.clic:active, .flecha:active, .cerrar:active,
.menu a:active, .horas-libres button:active, .wa:active, .resultados button:active { transform: scale(var(--presion)); }
.fab:active { transform: scale(.95); }
.bloque:active { filter: brightness(.94); }

/* Foco visible con teclado */
.btn:focus-visible, .pildora:focus-visible, .opcion:focus-visible, .flecha:focus-visible, .cerrar:focus-visible, .fab:focus-visible,
.menu a:focus-visible, .horas-libres button:focus-visible, .bloque:focus-visible, .fila.clic:focus-visible, .wa:focus-visible { outline: none; box-shadow: var(--anillo); }
input:focus, select:focus, textarea:focus { box-shadow: var(--anillo), 0 0 18px color-mix(in srgb, var(--acento) 14%, transparent); }

/* Hover: solo en equipos con mouse (en el celular no se queda "pegado") */
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(17, 19, 23, .10); }
  .btn.primario:hover:not(:disabled) { box-shadow: 0 6px 18px color-mix(in srgb, var(--acento) 30%, transparent); }
  .fab:hover { transform: translateY(-2px); }
  .opcion:hover, .fila.clic:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(17, 19, 23, .08); }
  .horas-libres button:hover { transform: translateY(-1px); }
  .bloque:hover { filter: brightness(.97); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento) 35%, transparent); }
  .pildora:not(.activo):hover, .flecha:hover { border-color: var(--tinta-2); }
  .menu a:not(.activo):hover { color: var(--tinta); }
  /* En oscuro la sombra casi no se ve: se marca con borde */
  :root[data-theme="dark"] .opcion:hover, :root[data-theme="dark"] .fila.clic:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--acento) 45%, transparent); }
}
@media (hover: hover) and (pointer: fine) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .opcion:hover, :root:not([data-theme="light"]) .fila.clic:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--acento) 45%, transparent); }
}

/* Pestaña activa del menú: barra que crece desde el centro */
.menu a { position: relative; }
.menu a::after { content: ""; position: absolute; left: 30%; right: 30%; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--acento); transform: scaleX(0); transition: transform var(--normal) var(--curva); }
.menu a.activo::after { transform: scaleX(1); }
@media (min-width: 900px) {
  .menu a::after { left: 0; right: auto; top: 22%; bottom: 22%; width: 3px; height: auto; border-radius: 0 3px 3px 0; transform: scaleY(0); }
  .menu a.activo::after { transform: scaleY(1); }
}

/* Hoja que sube desde abajo (en computadora aparece al centro) */
dialog.hoja[open] { animation: hoja-sube var(--normal) var(--curva); }
dialog.hoja[open]::backdrop { animation: fundido var(--normal) var(--curva); }
dialog.hoja.cerrando { animation: hoja-baja var(--rapido) var(--curva-salida) forwards; }
dialog.hoja.cerrando::backdrop { animation: fundido-sale var(--rapido) var(--curva-salida) forwards; }
@keyframes hoja-sube { from { transform: translateY(40px); opacity: 0; } }
@keyframes hoja-baja { to { transform: translateY(40px); opacity: 0; } }
@keyframes hoja-aparece { from { transform: translateY(12px) scale(.98); opacity: 0; } }
@keyframes hoja-desaparece { to { transform: translateY(12px) scale(.98); opacity: 0; } }
@media (min-width: 640px) {
  dialog.hoja[open] { animation-name: hoja-aparece; }
  dialog.hoja.cerrando { animation-name: hoja-desaparece; }
}
@keyframes fundido { from { opacity: 0; } }
@keyframes fundido-sale { to { opacity: 0; } }

/* Aviso que entra deslizándose, con barrita del tiempo que queda para deshacer */
.aviso { position: relative; overflow: hidden; animation: aviso-entra var(--normal) var(--curva); }
.aviso.saliendo { animation: aviso-sale var(--rapido) var(--curva-salida) forwards; }
.aviso .tiempo { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--lima); transform-origin: left; animation: tiempo linear forwards; }
@keyframes aviso-entra { from { transform: translateY(16px); opacity: 0; } }
@keyframes aviso-sale { to { transform: translateY(10px); opacity: 0; } }
@keyframes tiempo { to { transform: scaleX(0); } }

/* La cita recién agendada o movida late para que se vea dónde quedó */
.bloque.resaltar { z-index: 4; overflow: visible; }
.bloque.resaltar::after { content: ""; position: absolute; inset: -4px; border-radius: 13px; box-shadow: 0 0 0 3px var(--acento), 0 0 22px color-mix(in srgb, var(--acento) 55%, transparent); opacity: 0; animation: late .6s var(--curva) 4 alternate; pointer-events: none; }
@keyframes late { to { opacity: 1; } }

/* Aparición al entrar a una sección (solo la primera vez, no en cada repintado) */
.entrando > *, .entrando :is(.cifras, .lista, .semana) > * { animation: sube-suave var(--lento) var(--curva) both; }
.entrando > :nth-child(2), .entrando :is(.cifras, .lista, .semana) > :nth-child(2) { animation-delay: 50ms; }
.entrando > :nth-child(3), .entrando :is(.cifras, .lista, .semana) > :nth-child(3) { animation-delay: 90ms; }
.entrando > :nth-child(4), .entrando :is(.cifras, .lista, .semana) > :nth-child(4) { animation-delay: 130ms; }
.entrando > :nth-child(n+5), .entrando :is(.cifras, .lista, .semana) > :nth-child(n+5) { animation-delay: 170ms; }
.escalonar > * { animation: sube-suave var(--normal) var(--curva) both; }
.escalonar > :nth-child(2) { animation-delay: 25ms; }
.escalonar > :nth-child(3) { animation-delay: 50ms; }
.escalonar > :nth-child(4) { animation-delay: 75ms; }
.escalonar > :nth-child(n+5) { animation-delay: 100ms; }
@keyframes sube-suave { from { opacity: 0; transform: translateY(10px); } }

/* Skeleton mientras carga */
.esqueleto { position: relative; overflow: hidden; background: var(--gris-suave); border-radius: 12px; }
.esqueleto::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel) 70%, transparent), transparent); animation: brillo 1.2s ease-in-out infinite; }
@keyframes brillo { to { transform: translateX(100%); } }

/* Ripple en el botón principal y en "Nueva cita" */
.btn.primario { position: relative; overflow: hidden; }
.fab { overflow: hidden; } /* ya es fixed: sirve de contenedor para la onda */
.onda { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .28; transform: scale(0); animation: onda .4s var(--curva) forwards; }
@keyframes onda { to { transform: scale(2.6); opacity: 0; } }

/* Cambio de tema suave (solo mientras se cambia, para no parpadear al abrir la página) */
html.tema-cambiando, html.tema-cambiando * { transition: background-color var(--normal) var(--curva), color var(--normal) var(--curva), border-color var(--normal) var(--curva) !important; }

/* Quien pide menos movimiento: sin animaciones ni desplazamientos */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .esqueleto::after { display: none; }
}

/* Cifras que se pueden tocar: presión al tocar y elevación solo con mouse */
button.cifra { transition: transform var(--rapido) var(--curva), box-shadow var(--rapido), border-color var(--rapido); }
button.cifra:active { transform: scale(var(--presion)); }
@media (hover: hover) and (pointer: fine) {
  button.cifra:hover { border-color: color-mix(in srgb, var(--acento) 40%, var(--linea)); box-shadow: var(--sombra); transform: translateY(-1px); }
  button.cifra:hover .cifra-ir { color: var(--acento-tinta); }
}