body{
  background:#0f0f0f;
  color:#fff;
  padding:30px;
  font-family: Arial, sans-serif;
}

#alertas-container{
  max-width:1200px;
  margin:auto;
}

/* ===============================
   ESCALA RESPONSIVA
   =============================== */

:root{
  --alerta-scale: 1;
}

@media (max-width: 768px){
  :root{
    --alerta-scale: .7;
  }
  body{
    padding:20px;
  }
}

/* ===============================
   TARJETA BASE
   =============================== */

.alerta{
  border-radius:calc(18px * var(--alerta-scale));
  padding:calc(30px * var(--alerta-scale));
  margin-bottom:calc(30px * var(--alerta-scale));
  box-shadow:0 20px 40px rgba(0,0,0,.6);
  transition:transform .2s ease;
}

.alerta:hover{
  transform:scale(1.03);
}

/* ===============================
   HEADER
   =============================== */

.alerta-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:calc(16px * var(--alerta-scale));
  gap:calc(20px * var(--alerta-scale));
}

.alerta-title{
  font-size:calc(2.2em * var(--alerta-scale));
  font-weight:900;
  margin:0;
  letter-spacing:.5px;
}

/* ===============================
   BADGE – CENTRO DE CONTROL
   =============================== */

.estado-badge{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  background:rgba(0,0,0,.25);
  padding:calc(14px * var(--alerta-scale));
  border-radius:14px;
  font-weight:900;
  line-height:1.1;
  backdrop-filter:blur(4px);
}

/* Nivel dominante */
.estado-badge::before{
  display:block;
  font-size:calc(1.3em * var(--alerta-scale));
  font-weight:900;
  letter-spacing:1.5px;
  margin-bottom:4px;
}

/* Color secundario */
.estado-badge{
  font-size:calc(1em * var(--alerta-scale));
}

/* ===============================
   TEXTOS
   =============================== */

.alerta p{
  margin:0 0 calc(14px * var(--alerta-scale)) 0;
  font-size:calc(1.15em * var(--alerta-scale));
  line-height:1.35;
}

small{
  opacity:.85;
  font-size:calc(.95em * var(--alerta-scale));
}

/* ===============================
   COLORES Y NIVELES
   =============================== */

/* AZUL */
.alerta-azul{
  background:linear-gradient(135deg,#0b3a8a,#2563eb);
}
.alerta-azul .estado-badge::before{
  content:"ALERTA 1";
}

/* AMARILLO */
.alerta-amarillo{
  background:linear-gradient(135deg,#fbc02d,#fdd835);
  color:#000;
}
.alerta-amarillo .estado-badge::before{
  content:"ALERTA 2";
}

/* NARANJA */
.alerta-naranja{
  background:linear-gradient(135deg,#ef6c00,#fb8c00);
}
.alerta-naranja .estado-badge::before{
  content:"ALERTA 3";
}

/* ROJO */
.alerta-rojo{
  background:linear-gradient(135deg,#b71c1c,#e53935);
  box-shadow:0 0 30px rgba(255,0,0,.6);
}
.alerta-rojo .estado-badge::before{
  content:"ALERTA 4";
}

/* Pulso operativo solo en ROJO */
.alerta-rojo .estado-badge{
  animation:controlPulse 1.2s infinite;
}

@keyframes controlPulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.05)}
  100%{transform:scale(1)}
}
body{ outline: 6px solid #00ff00 !important; }