/* =========================================================
   EntreValles - Reloj tipo LED (matriz de puntos REAL)
   Archivo: css/ev-datetime.css
   ========================================================= */

.ev-top-datetime.ev-board {
  --ev-led-on: #eaf7ff;
  --ev-led-glow: rgba(140, 230, 255, .70);
  --ev-led-off: rgba(234, 247, 255, .05);
  --ev-panel: #05080c;
  --ev-row-h: 32px;

  display: flex;
  align-items: center;
  gap: 15px;
  padding: 5px 15px;
  background: var(--ev-panel);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
  margin: 10px auto;
  max-width: 100%;
}

/* Ajuste al badge para centrar el nuevo LED de vida */
.ev-board-badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  color: var(--ev-led-on);
  font-size: 14px;
  opacity: 0.8;
}

/* Estilo del Corazón LED Azul (Indicador de Vida) */
.led-heart {
  width: 10px;
  height: 10px;
  background-color: #008cff; /* Azul brillante neón */
  border-radius: 50%; /* Forma circular */
  box-shadow: 0 0 10px #008cff, 0 0 20px #008cff;
  animation: pulse-blue 2s infinite ease-in-out;
}

/* Animación de palpitación */
@keyframes pulse-blue {
  0% {
    transform: scale(0.85);
    opacity: 0.5;
    box-shadow: 0 0 5px #008cff;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
    box-shadow: 0 0 15px #008cff, 0 0 25px #005689;
  }
  100% {
    transform: scale(0.85);
    opacity: 0.5;
    box-shadow: 0 0 5px #008cff;
  }
}

.ev-board-time {
  flex: 0 0 200px; /* Tu ajuste de ancho fijo para la hora */
  height: var(--ev-row-h);
}

.ev-board-divider {
  flex: 0 0 2px;
  height: 20px;
  background: rgba(255,255,255,0.1);
}

.ev-board-date {
  flex: 1 1 auto; /* Ocupa todo el ancho restante */
  height: var(--ev-row-h);
  overflow: hidden;
}

.ev-led-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Ajuste para móviles (Tu configuración de 768px) */
@media (max-width: 768px) {
  .ev-board-date { display: none; }
  .ev-board-divider { display: none; }
  .ev-top-datetime.ev-board { max-width: 270px; }
}