/* =========================================================================
   Cupos y temporizador. Decisión 73.

   El botón vive directo adentro de <body>: ningún antecesor con transform,
   así que position: fixed queda fijo a la pantalla de verdad. Toma los
   colores y la letra del tema por variables de WordPress, con el valor del
   tema como respaldo. Pares medidos contra WCAG AA:
     blanco sobre azul acento #2563EB ........ 5,2:1
     blanco sobre azul principal #1E3A8A ..... 10,4:1
     tinta #0F1A3A sobre blanco .............. 17,1:1
     texto #4A5572 sobre blanco .............. 7,4:1
     el punto turquesa es decorativo (2,5:1): el dato está en el texto
   ========================================================================= */

.fsl-cupos {
  --fslc-fondo:   var(--wp--preset--color--white, #FFFFFF);
  --fslc-tinta:   var(--wp--preset--color--heading-text, #0F1A3A);
  --fslc-texto:   var(--wp--preset--color--paragraph-text, #4A5572);
  --fslc-linea:   var(--wp--preset--color--rule, #DCE2EE);
  --fslc-boton:   var(--wp--preset--color--secondary, #2563EB);
  --fslc-encima:  var(--wp--preset--color--primary, #1E3A8A);
  --fslc-punto:   var(--wp--preset--color--teal, #2BB5A8);
  --fslc-letra:   var(--wp--preset--font-family--inter, "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
  --fslc-sombra:  0 1px 3px rgba(15, 26, 58, 0.08), 0 12px 32px rgba(15, 26, 58, 0.18);
  --fslc-borde:   20px;   /* distancia al borde de la pantalla */

  position: fixed;
  z-index: 9990;
  left: 0;
  right: 0;
  bottom: calc(var(--fslc-borde) + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0 auto;
  padding: 8px 8px 8px 20px;
  background: var(--fslc-fondo);
  border: 1px solid var(--fslc-linea);
  border-radius: 999px;
  box-shadow: var(--fslc-sombra);
  font-family: var(--fslc-letra);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--fslc-tinta);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.fsl-cupos *,
.fsl-cupos *::before,
.fsl-cupos *::after { box-sizing: border-box; }

.fsl-cupos [hidden] { display: none !important; }

.fsl-cupos__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

.fsl-cupos__punto {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fslc-punto);
}

.fsl-cupos__cuantos strong { font-weight: 700; }

.fsl-cupos__reloj {
  color: var(--fslc-texto);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fsl-cupos__sep { margin-right: 8px; }
.fsl-cupos__antes { margin-right: 0.25em; }

.fsl-cupos__boton,
.fsl-cupos__boton:visited {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--fslc-boton);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.fsl-cupos__boton:hover,
.fsl-cupos__boton:focus-visible {
  background: var(--fslc-encima);
  color: #FFFFFF;
  text-decoration: none;
}
.fsl-cupos__boton:focus-visible {
  outline: 2px solid var(--fslc-encima);
  outline-offset: 3px;
}

/* Sin cupos: el punto se apaga. */
.fsl-cupos--completo .fsl-cupos__punto { background: var(--fslc-linea); }

/* Al llegar al formulario final o mientras escriben en teléfono: desvanecer la barra flotante */
.fsl-cupos--corrido,
.fsl-cupos--fuera {
  transform: translateY(calc(100% + var(--fslc-borde) + 30px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.35s ease, opacity 0.35s ease !important;
}

/* Con el formulario a la vista, la barra queda con el contador solo: su
   botón llevaría al lugar donde la persona ya está, y tapaba el envío. */
.fsl-cupos--compacta { padding: 10px 18px; }
.fsl-cupos--compacta .fsl-cupos__boton { display: none; }

/* En pantallas anchas se corre a la izquierda: el formulario queda a la
   derecha y la barra no le tapa el texto de abajo del botón. */
@media (min-width: 782px) {
  .fsl-cupos--compacta { left: var(--fslc-borde); right: auto; margin: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .fsl-cupos:not(.fsl-cupos--completo) .fsl-cupos__punto { animation: fsl-latido 2.4s ease-out infinite; }
}
@keyframes fsl-latido {
  0%   { box-shadow: 0 0 0 0 rgba(43, 181, 168, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(43, 181, 168, 0); }
  100% { box-shadow: 0 0 0 0 rgba(43, 181, 168, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .fsl-cupos { transition: none; }
}

/* Teléfono: barra a lo ancho, en dos filas. El texto del botón lo escribe
   Franco y puede ser largo: lado a lado aprieta el contador. */
@media (max-width: 600px) {
  .fsl-cupos {
    --fslc-borde: 10px;
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
    font-size: 14px;
  }
  .fsl-cupos__info { padding-left: 4px; }
  .fsl-cupos__sep { display: none; }
  .fsl-cupos__reloj { padding-left: 0; font-size: 13px; white-space: normal; }
  .fsl-cupos__tiempo { white-space: nowrap; }
  .fsl-cupos__boton {
    justify-content: center;
    padding: 11px 14px;
    font-size: 15px;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 600px) {
  .fsl-cupos--compacta {
    left: 0;
    right: 0;
    width: max-content;
    max-width: calc(100% - 20px);
    padding: 8px 14px;
    border-radius: 999px;
  }
  .fsl-cupos--compacta .fsl-cupos__info { padding-left: 0; }
}

/* Lugar abajo del pie: sin esto, al final de la página el botón tapa la
   última línea. El pie del tema tiene 40 px abajo. */
.fsl-con-cupos { --fsl-cupos-reserva: 88px; }
@media (max-width: 600px) {
  .fsl-con-cupos { --fsl-cupos-reserva: 128px; }
}
.fsl-con-cupos .wp-site-blocks > footer:last-child > :last-child {
  padding-bottom: calc(40px + var(--fsl-cupos-reserva)) !important;
}

@media print {
  .fsl-cupos { display: none !important; }
}

/* =========================================================================
   [fs_temporizador]: la cuenta regresiva grande.
   No hereda el color de la sección: en las tarjetas oscuras el heredado
   puede ser el azul acento, 3,6:1. Dos variantes, medidas:
     claro:  tinta #0F1A3A sobre #F4F6FB 15,8:1 · texto #4A5572 6,2:1 o más
     oscuro: blanco sobre la tarjeta 10,8:1 o más · #AEB8D3 5,5:1 o más
   ========================================================================= */

.fsl-temporizador {
  --fslt-tinta: var(--wp--preset--color--heading-text, #0F1A3A);
  --fslt-texto: var(--wp--preset--color--paragraph-text, #4A5572);
  --fslt-caja:  var(--wp--preset--color--white, #FFFFFF);
  --fslt-linea: var(--wp--preset--color--rule, #DCE2EE);

  margin: 0;
  text-align: center;
  font-family: var(--wp--preset--font-family--inter, "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
  color: var(--fslt-tinta);
}
.fsl-temporizador--oscuro {
  --fslt-tinta: var(--wp--preset--color--white, #FFFFFF);
  --fslt-texto: var(--wp--preset--color--muted-text, #AEB8D3);
  --fslt-caja:  rgba(255, 255, 255, 0.06);
  --fslt-linea: rgba(255, 255, 255, 0.18);
}
.fsl-temporizador p { margin: 0; color: inherit; }
.fsl-temporizador [hidden] { display: none !important; }

.fsl-temporizador__titulo {
  margin-bottom: 14px !important;
  color: var(--fslt-texto) !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fsl-temporizador__cajas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.fsl-temporizador__caja {
  min-width: 76px;
  padding: 14px 10px 12px;
  background: var(--fslt-caja);
  border: 1px solid var(--fslt-linea);
  border-radius: 14px;
}

.fsl-temporizador__num {
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fsl-temporizador__unidad {
  margin-top: 6px !important;
  color: var(--fslt-texto) !important;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fsl-temporizador__fecha,
.fsl-temporizador__terminado { font-size: 17px; }

/* El nombre corto de cada unidad (hs, min, seg) solo en pantallas angostas. */
.fsl-temporizador__corto { display: none; }

@media (max-width: 420px) {
  .fsl-temporizador__cajas { gap: 6px; }
  .fsl-temporizador__caja { min-width: 0; flex: 1 1 0; padding: 12px 4px 10px; }
  .fsl-temporizador__unidad { font-size: 11px; letter-spacing: 0.06em; }
  .fsl-temporizador__largo { display: none; }
  .fsl-temporizador__corto { display: inline; }
}