/* =========================================================
   EntreValles - Reloj tipo LED (dot-matrix / letrero de bus)
   Archivo: assets/css/ev-datetime.css
   ========================================================= */

/* Contenedor (derecha arriba) */
.ev-top-datetime.ev-board-wrap{
  display:flex;
  justify-content:flex-end;
}

/* Tablero */
.ev-top-datetime.ev-board .ev-board-wrap{display:flex; align-items:center; gap:12px;}

.ev-top-datetime.ev-board{
  --ev-led: #1fb6ff;           /* LED (puntos) */
  --ev-led-solid: #cfefff;     /* texto sólido (legibilidad) */
  --ev-led-dim: rgba(31,182,255,.18);
  --ev-panel: rgba(5,8,12,.96);
  --ev-frame: rgba(255,255,255,.14);
  --ev-frame2: rgba(0,0,0,.55);

  display:flex;
  align-items:center;
  gap:12px;

  padding: 8px 12px;
  border-radius: 12px;

  background:
    radial-gradient(120px 70px at 18% 20%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    var(--ev-panel);

  border: 1px solid var(--ev-frame);
  box-shadow:
    0 10px 24px rgba(0,0,0,.40),
    inset 0 0 0 1px var(--ev-frame2);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  position:relative;
  overflow:hidden;
  transform: translateZ(0);
}

/* Dot-matrix de fondo (suave; no debe tapar el texto) */
.ev-top-datetime.ev-board::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(var(--ev-led-dim) 1px, transparent 2px);
  background-size: 8px 8px;
  opacity:.18;
  pointer-events:none;
  mix-blend-mode: screen;
}

/* Scanlines (muy sutil) */
.ev-top-datetime.ev-board::after{
  content:"";
  position:absolute; inset:-35% 0 -35% 0;
  background:
    linear-gradient(to bottom,
      transparent 0%,
      rgba(255,255,255,.06) 18%,
      transparent 36%,
      rgba(0,0,0,.16) 52%,
      transparent 70%);
  opacity:.18;
  animation: evScan 4.8s linear infinite;
  pointer-events:none;
}
@keyframes evScan{
  0%{ transform: translateY(-18%); }
  100%{ transform: translateY(18%); }
}

/* Badge: SOLO ícono de bus (sin texto) */
.ev-top-datetime.ev-board .ev-board-badge{
  width: 34px;
  height: 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius: 8px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14);

  box-shadow: inset 0 0 0 1px rgba(0,0,0,.20);
}
.ev-top-datetime.ev-board .ev-board-badge i{
  color: var(--ev-led);
  text-shadow: 0 0 10px rgba(255,255,255,.08), 0 0 18px rgba(0,0,0,.25);
  font-size: 15px;
  line-height:1;
}
.ev-top-datetime.ev-board .ev-board-badge .ev-board-text{ display:none !important; }

/* Ocultamos el separador viejo (ya no aporta en el tablero LED) */
.ev-top-datetime.ev-board .ev-board-divider{ display:none !important; }

/* Tipografía / LED */
.ev-top-datetime.ev-board .ev-board-time,
.ev-top-datetime.ev-board .ev-board-date{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: .6px;
  line-height:1;
  white-space:nowrap;
  position:relative;
  z-index:1;
  font-variant-numeric: tabular-nums;
}

/* Hora más protagonista */
.ev-top-datetime.ev-board .ev-board-time{
  margin-left: 0 !important;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .9px;
}

/* Fecha completa (con marquee si no cabe) */
.ev-top-datetime.ev-board .ev-board-date{
  font-size: 16px;
  font-weight: 800;
  opacity: .95;

  max-width: 360px; /* más aire (y si no, corre como letrero) */
  overflow:hidden;
}

/* === LED LEGIBLE ===
   En vez de “recortar” el texto (que baja la legibilidad),
   usamos:
   1) Texto sólido brillante (se lee sí o sí)
   2) Capa superior dot-matrix (look LED real)

   Requiere data-text en los spans (#evTime y .ev-date-first/.ev-date-second)
*/
.ev-top-datetime.ev-board .ev-board-time,
.ev-top-datetime.ev-board .ev-board-date .ev-date-first,
.ev-top-datetime.ev-board .ev-board-date .ev-date-second{
  color: var(--ev-led-solid);
  text-shadow:
    0 0 10px rgba(255,255,255,.10),
    0 0 22px rgba(31,182,255,.40);
}

.ev-top-datetime.ev-board .ev-board-time,
.ev-top-datetime.ev-board .ev-board-date .ev-date-first,
.ev-top-datetime.ev-board .ev-board-date .ev-date-second{
  display:inline-block;
}

@supports (-webkit-background-clip: text) or (background-clip: text){
  .ev-top-datetime.ev-board .ev-board-time::after,
  .ev-top-datetime.ev-board .ev-board-date .ev-date-first::after,
  .ev-top-datetime.ev-board .ev-board-date .ev-date-second::after{
    content: attr(data-text);
    position:absolute;
    left:0; top:0;
    width:100%; height:100%;
    color: rgba(0,0,0,0);

    background-image: radial-gradient(circle, var(--ev-led) 0 1.35px, transparent 1.7px);
    background-size: 5px 5px;
    background-position: 0 0;

    -webkit-background-clip: text;
    background-clip: text;

    opacity: .58;
    pointer-events:none;
    text-shadow:
      0 0 10px rgba(255,255,255,.06),
      0 0 18px rgba(31,182,255,.28);
  }
}

/* Flicker mínimo para que se sienta “tablero” */
/* Flicker suave SIN usar filter (para no “romper” el glow/clip-text) */
.ev-top-datetime.ev-board .ev-board-time,
.ev-top-datetime.ev-board .ev-board-date,
.ev-top-datetime.ev-board .ev-board-date .ev-date-first,
.ev-top-datetime.ev-board .ev-board-date .ev-date-second{
  animation: evFlickerOpacity 7.5s infinite;
}
@keyframes evFlickerOpacity{
  0%, 92%, 100%{ opacity: 1; }
  93%{ opacity: .90; }
  94%{ opacity: .98; }
  95%{ opacity: .92; }
  96%{ opacity: 1; }
}

/* Marquee (se activa solo si el JS detecta overflow) */
.ev-top-datetime.ev-board .ev-board-date.ev-marquee{
  mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}
.ev-top-datetime.ev-board .ev-board-date .ev-date-track{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  will-change: transform;
}
.ev-top-datetime.ev-board .ev-board-date.ev-marquee .ev-date-track{
  animation: evMarquee var(--ev-marquee-duration, 12s) linear infinite;
}
.ev-top-datetime.ev-board .ev-board-date .ev-date-gap{
  display:inline-block;
  width: 32px; /* espacio entre repeticiones */
}
@keyframes evMarquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(calc(-1 * var(--ev-marquee-distance, 200px))); }
}

/* Responsive */
@media (max-width: 575px){
  .ev-top-datetime.ev-board{ padding: 7px 10px; gap:10px; }
  .ev-top-datetime.ev-board .ev-board-time{ font-size: 22px; }
  .ev-top-datetime.ev-board .ev-board-date{ max-width: 190px; font-size: 13px; }
}