/* =============================================================================
   cdli_cuenta_regresiva — view.css
   Concrete CMS 9.5.2 / Paquete cdli
   =============================================================================

   Gramática visual: papel, reglas de 1px, serif editorial para la prosa y
   monoespaciada para el instrumental. El contador es el único elemento
   "pantalla" del bloque y por eso se permite el ruido: barrido, líneas de
   exploración y el verde señal de La Intemperie.

   Capas de color: todas salen de las variables del tema (--cdli-ink,
   --cdli-line, --cdli-danger, --cdli-water), así que el modo oscuro
   (html.idli-dark) se hereda sin reglas propias.
   ============================================================================= */

.cdli-cd {
  /* Tamaño: lo fija el inline style (rem) o, si está en automático, el
     elemento elegido. */
  --cdli-cd-size-h1: clamp(2.8rem, 4.6vw, 5.2rem);
  --cdli-cd-size-h2: clamp(1.6rem, calc(1.25rem + 1vw), 2.4rem);
  --cdli-cd-size-h3: clamp(1.35rem, calc(1.15rem + 0.65vw), 1.8rem);
  --cdli-cd-size: var(--cdli-cd-size-h2);

  --cdli-cd-ink: var(--cdli-ink, #22201d);
  --cdli-cd-muted: var(--cdli-ink-muted, #6c665d);
  --cdli-cd-line: var(--cdli-line, rgba(62, 68, 59, 0.2));
  --cdli-cd-signal: var(--cdli-danger, #5b8664);
  --cdli-cd-ghost: var(--cdli-water, #536f7c);
  --cdli-cd-scan-ink: rgba(34, 32, 29, 0.16);

  --cdli-cd-font: var(--cdli-sans, ui-monospace, monospace);

  position: relative;
  box-sizing: border-box;
  color: var(--cdli-cd-ink);
  font-family: var(--cdli-serif, Georgia, serif);
}

.cdli-cd--tag-h1 {
  --cdli-cd-size: var(--cdli-cd-size-h1);
}

.cdli-cd--tag-h2 {
  --cdli-cd-size: var(--cdli-cd-size-h2);
}

.cdli-cd--tag-h3 {
  --cdli-cd-size: var(--cdli-cd-size-h3);
}

.cdli-cd--font-sans {
  --cdli-cd-font: var(--cdli-sans, ui-monospace, monospace);
}

.cdli-cd--font-serif {
  --cdli-cd-font: var(--cdli-serif, Georgia, "Times New Roman", serif);
}

.cdli-cd--font-mono {
  --cdli-cd-font: var(--cdli-mono, ui-monospace, monospace);
}

.cdli-cd *,
.cdli-cd *::before,
.cdli-cd *::after {
  box-sizing: inherit;
}

/* -----------------------------------------------------------------------------
   Envolvente
   ----------------------------------------------------------------------------- */

.cdli-cd__shell {
  position: relative;
  padding: clamp(1rem, 2.4vw, 1.75rem) 0 clamp(0.75rem, 1.8vw, 1.25rem);
  border-top: 1px solid var(--cdli-cd-line);
}

/* Marcas de registro en los extremos de la regla superior: lenguaje de
   plano técnico, sin agregar cajas. */
.cdli-cd__shell::before,
.cdli-cd__shell::after {
  position: absolute;
  top: 0;
  width: 1px;
  height: 0.65rem;
  background: var(--cdli-cd-ink);
  content: "";
  opacity: 0.45;
}

.cdli-cd__shell::before {
  left: 0;
}

.cdli-cd__shell::after {
  right: 0;
}

html.idli-dark .cdli-cd {
  --cdli-cd-scan-ink: rgba(242, 239, 232, 0.1);
}

/* Rótulo superior: cuadrado de señal + texto + regla punteada que completa
   la línea, como en las fichas del archivo. */
.cdli-cd__kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 clamp(0.75rem, 1.6vw, 1.15rem);
  color: var(--cdli-cd-muted);
  font-family: var(--cdli-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cdli-cd__kicker::after {
  flex: 1 1 auto;
  min-width: 1.5rem;
  border-top: 1px dotted var(--cdli-cd-line);
  content: "";
}

.cdli-cd__kicker-signal {
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--cdli-cd-signal);
  animation: cdli-cd-pulse 2.4s steps(1, end) infinite;
}

.cdli-cd__kicker-text {
  flex: 0 0 auto;
}

/* -----------------------------------------------------------------------------
   Título accesible (recortado a la vista, legible para lectores de pantalla)
   ----------------------------------------------------------------------------- */

.cdli-cd__heading {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.cdli-cd__sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  border: 0 !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* -----------------------------------------------------------------------------
   Escenario del contador
   ----------------------------------------------------------------------------- */

.cdli-cd__stage {
  position: relative;
  container-type: inline-size;
  isolation: isolate;
}

/* Línea de exploración: cruza el bloque como un cabezal de lectura.
   Va debajo del canvas para no rayar los dígitos. */
.cdli-cd__scan {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

.cdli-cd.is-webgl .cdli-cd__scan {
  opacity: 1;
}

.cdli-cd__scan::after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--cdli-cd-signal) 55%, transparent) 18%,
    var(--cdli-cd-signal) 50%,
    color-mix(in srgb, var(--cdli-cd-signal) 55%, transparent) 82%,
    transparent 100%
  );
  content: "";
  animation: cdli-cd-sweep 7s linear infinite;
}

/* Matriz de unidades */
.cdli-cd__units {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  margin: 0;
  padding: 0 0 clamp(0.5rem, 1.2vw, 0.85rem);
  border-bottom: 1px dotted var(--cdli-cd-line);
}

.cdli-cd__unit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 0 clamp(0.35rem, 1.2vw, 1rem);
  text-align: center;
}

.cdli-cd__unit + .cdli-cd__unit {
  border-left: 1px solid var(--cdli-cd-line);
}

/* Dígitos. Cuando WebGL dibuja encima se ocultan con visibility para
   conservar la caja y sus medidas. */
.cdli-cd__value {
  display: block;
  min-width: calc(var(--cdli-cd-digits, 2) * 1ch);
  color: var(--cdli-cd-ink);
  font-family: var(--cdli-cd-font);
  font-size: min(var(--cdli-cd-size), 15vw);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.92;
  text-align: center;
  white-space: nowrap;
}

@supports (container-type: inline-size) {
  .cdli-cd__value {
    font-size: min(var(--cdli-cd-size), 10cqw);
  }
}

/* Sin WebGL la mancha cromática se resuelve con sombras de texto. */
.cdli-cd:not(.is-webgl):not(.is-empty) .cdli-cd__value {
  text-shadow:
    0.03em 0 0 color-mix(in srgb, var(--cdli-cd-ghost) 55%, transparent),
    -0.03em 0 0 color-mix(in srgb, var(--cdli-cd-signal) 45%, transparent);
}

.cdli-cd.is-webgl .cdli-cd__value {
  visibility: hidden;
}

.cdli-cd__label {
  display: block;
  margin-top: clamp(0.35rem, 0.9vw, 0.55rem);
  color: var(--cdli-cd-muted);
  font-family: var(--cdli-mono, ui-monospace, monospace);
  font-size: clamp(0.55rem, calc(0.42rem + 0.35vw), 0.72rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.1;
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   Canvas WebGL
   ----------------------------------------------------------------------------- */

.cdli-cd__canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cdli-cd.is-webgl .cdli-cd__canvas {
  display: block;
}

/* Trama de pantalla sobre todo el escenario, con o sin WebGL. */
.cdli-cd__stage::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  content: "";
  opacity: 0.24;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--cdli-cd-scan-ink) 0,
    var(--cdli-cd-scan-ink) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: multiply;
}

html.idli-dark .cdli-cd__stage::after {
  mix-blend-mode: normal;
}

/* -----------------------------------------------------------------------------
   Pie del bloque: meta, mensaje final, bajada
   ----------------------------------------------------------------------------- */

.cdli-cd__target {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  margin: clamp(0.5rem, 1.2vw, 0.8rem) 0 0;
  color: var(--cdli-cd-muted);
  font-family: var(--cdli-mono, ui-monospace, monospace);
  font-size: clamp(0.6rem, calc(0.52rem + 0.2vw), 0.7rem);
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.cdli-cd__target-key {
  color: var(--cdli-cd-signal);
  font-weight: 700;
}

.cdli-cd__target time {
  font-variant-numeric: tabular-nums;
}

.cdli-cd__done {
  margin: clamp(0.6rem, 1.4vw, 0.9rem) 0 0;
  color: var(--cdli-cd-ink);
  font-family: var(--cdli-cd-font);
  font-size: clamp(0.85rem, calc(0.7rem + 0.5vw), 1.05rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
}

.cdli-cd__done[hidden] {
  display: none;
}

.cdli-cd__caption {
  max-width: 62ch;
  margin: clamp(0.75rem, 1.8vw, 1.1rem) 0 0;
  color: var(--cdli-cd-muted);
  font-family: var(--cdli-serif, Georgia, serif);
  font-size: clamp(0.95rem, calc(0.9rem + 0.2vw), 1.08rem);
  font-style: italic;
  line-height: 1.45;
}

/* Enlace a la convocatoria: mismo idioma visual, sin gritar mas que los digitos. */
.cdli-cd__cta-wrap {
  margin: clamp(1rem, 2.4vw, 1.5rem) 0 0;
}

.cdli-cd__cta,
.theme-cdli .cdli-cd__cta,
.theme-cdli .cdli-cd__cta:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.72rem 1.1rem;
  border: 1px solid var(--cdli-cd-ink);
  background: transparent;
  color: var(--cdli-cd-ink);
  font-family: var(--cdli-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 160ms ease, color 160ms ease;
}

.cdli-cd__cta:hover,
.cdli-cd__cta:focus-visible,
.theme-cdli .cdli-cd__cta:hover,
.theme-cdli .cdli-cd__cta:focus-visible {
  background: var(--cdli-cd-ink);
  color: var(--cdli-paper, #f2efe8);
  text-decoration: none;
}

.cdli-cd__cta:focus-visible {
  outline: 2px solid var(--cdli-cd-signal);
  outline-offset: 3px;
}

.cdli-cd__cta-mark {
  font-size: 0.95em;
  line-height: 1;
  transition: transform 160ms ease;
}

.cdli-cd__cta:hover .cdli-cd__cta-mark {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .cdli-cd__cta,
  .cdli-cd__cta-mark {
    transition: none;
  }

  .cdli-cd__cta:hover .cdli-cd__cta-mark {
    transform: none;
  }
}

.cdli-cd__empty {
  margin: 0 0 0.25rem;
  padding: 1.25rem 1rem;
  border: 1px dashed var(--cdli-cd-line);
  color: var(--cdli-cd-muted);
  font-family: var(--cdli-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-align: center;
}

.cdli-cd__note {
  margin: 0.6rem 0 0;
  color: var(--cdli-cd-muted);
  font-family: var(--cdli-mono, ui-monospace, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   Estado final
   ----------------------------------------------------------------------------- */

.cdli-cd.is-finished .cdli-cd__kicker-signal {
  background: var(--cdli-cd-muted);
  animation: none;
}

.cdli-cd.is-finished .cdli-cd__scan {
  opacity: 0;
}

/* -----------------------------------------------------------------------------
   Sondas de color para el shader
   ----------------------------------------------------------------------------- */

.cdli-cd__probe {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.cdli-cd__probe--ink {
  color: var(--cdli-cd-ink);
}

.cdli-cd__probe--signal {
  color: var(--cdli-cd-signal);
}

.cdli-cd__probe--ghost {
  color: var(--cdli-cd-ghost);
}

/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .cdli-cd__units {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(1rem, 4vw, 1.5rem);
  }

  .cdli-cd__unit:nth-child(odd) {
    border-left: 0;
  }

  .cdli-cd__unit:nth-child(even) {
    border-left: 1px solid var(--cdli-cd-line);
  }
}

/* -----------------------------------------------------------------------------
   Movimiento reducido
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cdli-cd__kicker-signal {
    animation: none;
  }

  .cdli-cd__scan::after {
    animation: none;
    opacity: 0.35;
  }
}

/* -----------------------------------------------------------------------------
   Animaciones
   ----------------------------------------------------------------------------- */

@keyframes cdli-cd-pulse {
  0%,
  55% {
    opacity: 1;
  }

  56%,
  100% {
    opacity: 0.18;
  }
}

@keyframes cdli-cd-sweep {
  0% {
    top: 0%;
    opacity: 0;
  }

  8% {
    opacity: 0.9;
  }

  92% {
    opacity: 0.9;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}