:root {
  --verde-fondo: #EAF4F1;
  --borde-card: #CDE8DC;
  --verde-1: #04201A;
  --verde-2: #0B5C46;
  --verde-brillo: #3FB68C;
  --verde-3: #083F4A;
  --texto: #0D2B24;
  --texto-suave: #4B6B63;
  --blanco: #FFFFFF;
  --rojo-alta: #C0392B;
  --amarillo-media: #B9770E;
  --verde-baja: #1E8449;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--texto);
  background-color: var(--verde-fondo);
  background-image:
    linear-gradient(rgba(11,92,70,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,92,70,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  min-height: 100vh;
}

.mono { font-family: 'JetBrains Mono', monospace; }

a { color: inherit; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-radius: 12px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 600;
}

.btn-primario {
  background: linear-gradient(135deg, #0A4D3B 0%, #2FA57F 45%, #0B5C46 72%, #0E6577 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--blanco);
}

.btn-secundario {
  background: var(--blanco);
  color: var(--verde-2);
  border: 1px solid var(--borde-card);
}

.btn-blanco {
  background: var(--blanco);
  color: var(--verde-1);
}

.boton-enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.card {
  background: var(--blanco);
  border: 1px solid var(--borde-card);
  border-radius: 20px;
  padding: 20px;
}

.card-gradiente {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #04201A 0%, #0B5C46 38%, #3FB68C 52%, #0B5C46 66%, #083F4A 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 18px 40px rgba(4,32,26,0.28);
  color: var(--blanco);
  border-radius: 20px;
  padding: 24px;
}

.card-gradiente::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.10) 48%, transparent 62%);
  pointer-events: none;
  border-radius: inherit;
}

input, select, textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--borde-card);
  background: var(--blanco);
  color: var(--texto);
  width: 100%;
}

label { font-size: 13px; color: var(--texto-suave); display: block; margin-bottom: 4px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.pill-baja { background: #E8F6EE; color: var(--verde-baja); }
.pill-media { background: #FDF3E3; color: var(--amarillo-media); }
.pill-alta { background: #FBEAE8; color: var(--rojo-alta); }

.punto-pulsa {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--verde-brillo);
  animation: pulso 1.4s infinite;
}

@keyframes pulso {
  0% { box-shadow: 0 0 0 0 rgba(63,182,140,0.6); }
  70% { box-shadow: 0 0 0 10px rgba(63,182,140,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,182,140,0); }
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde-card); }
th { color: var(--texto-suave); font-weight: 600; font-size: 12px; text-transform: uppercase; }

.oculto { display: none !important; }

@media (max-width: 720px) {
  .rejilla { grid-template-columns: 1fr !important; }
}