/* components.css */

/* ---- BOTONES ---- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  font-family: var(--font-cuerpo); font-size: var(--text-sm); font-weight: 600;
  border: 2px solid transparent; border-radius: var(--radio-md);
  cursor: pointer; transition: var(--trans-base);
  text-decoration: none; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--cfe-verde); color: var(--blanco); border-color: var(--cfe-verde); }
.btn-primario:hover { background: var(--cfe-verde-oscuro); border-color: var(--cfe-verde-oscuro); color: var(--blanco); }
.btn-secundario { background: transparent; color: var(--cfe-verde); border-color: var(--cfe-verde); }
.btn-secundario:hover { background: var(--cfe-verde-claro); }
.btn-peligro { background: var(--color-peligro); color: var(--blanco); border-color: var(--color-peligro); }
.btn-peligro:hover { background: #a93226; border-color: #a93226; color: var(--blanco); }
.btn-ghost { background: transparent; color: var(--gris-600); border-color: var(--gris-300); }
.btn-ghost:hover { background: var(--gris-200); color: var(--negro); }
.btn-sm { padding: var(--sp-1) var(--sp-3); font-size: var(--text-xs); }
.btn-lg { padding: var(--sp-3) var(--sp-8); font-size: var(--text-base); }
.btn-bloque { width: 100%; justify-content: center; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---- TARJETAS ---- */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-lg);
  padding: var(--sp-6);
  box-shadow: var(--sombra-sm);
}
.tarjeta.sin-padding { padding: 0; }
.tarjeta-sm { padding: var(--sp-4); }
.tarjeta-cabecera {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--gris-200);
}
.tarjeta-titulo { font-family: var(--font-titulo); font-size: var(--text-lg); font-weight: 600; color: var(--gris-700); }

/* ---- BADGES ---- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; font-size: var(--text-xs); font-weight: 600;
  border-radius: var(--radio-pill); white-space: nowrap;
}
.badge-exito   { background: var(--color-ok-bg);      color: var(--color-ok); }
.badge-peligro { background: var(--color-peligro-bg);  color: var(--color-peligro); }
.badge-alerta  { background: var(--color-alerta-bg);   color: var(--color-alerta); }
.badge-info    { background: var(--color-info-bg);     color: var(--color-info); }
.badge-gris    { background: var(--gris-200);          color: var(--gris-600); }

/* Punto de estado */
.estado-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.estado-punto.activo   { background: var(--color-ok); }
.estado-punto.inactivo { background: var(--gris-400); }
.estado-punto.alerta   { background: var(--color-peligro); animation: parpadeo 1s ease-in-out infinite; }
@keyframes parpadeo { 0%,100% { opacity:1; } 50% { opacity:0.3; } }

/* ---- FORMULARIOS ---- */
.form-grupo { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.form-grupo:last-child { margin-bottom: 0; }
.form-label { font-size: var(--text-sm); font-weight: 600; color: var(--gris-700); }
.form-label .requerido { color: var(--color-peligro); margin-left: 2px; }
.form-control {
  width: 100%; padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-base);
  border: 1.5px solid var(--gris-300); border-radius: var(--radio-md);
  background: var(--blanco); color: var(--negro);
  transition: var(--trans-base); outline: none;
}
.form-control:focus { border-color: var(--cfe-verde); box-shadow: 0 0 0 3px rgba(0,166,81,0.15); }
.form-control:disabled { background: var(--gris-100); color: var(--gris-500); cursor: not-allowed; }
.form-hint  { font-size: var(--text-xs); color: var(--gris-500); }
.form-error { font-size: var(--text-xs); color: var(--color-peligro); }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 90px; }

/* ---- ALERTAS ---- */
.alerta {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: var(--radio-md);
  font-size: var(--text-sm); margin-bottom: var(--sp-4);
  border: 1px solid transparent;
  
}
.alerta-exito   { background: var(--color-ok-bg);     color: var(--color-ok);      border-color: #a9dfbf; }
.alerta-peligro { background: var(--color-peligro-bg); color: var(--color-peligro); border-color: #f1948a; }
.alerta-warning { background: var(--color-alerta-bg);  color: var(--color-alerta);  border-color: #f0b27a; }
.alerta-info    { background: var(--color-info-bg);    color: var(--color-info);    border-color: #7fb3d3; }

/* ---- TABLAS ---- */
.tabla-wrap { overflow-x: auto; border-radius: var(--radio-lg); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tabla thead th {
  padding: var(--sp-3) var(--sp-4); text-align: left;
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--blanco); background: var(--cfe-verde-oscuro);
  white-space: nowrap;
}
.tabla thead th:first-child { border-radius: var(--radio-md) 0 0 0; }
.tabla thead th:last-child  { border-radius: 0 var(--radio-md) 0 0; }
.tabla tbody td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--gris-200); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover td { background: var(--cfe-verde-claro); }

/* ---- SPINNER ---- */
.spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--gris-200); border-top-color: var(--cfe-verde); border-radius: 50%; animation: girar 0.7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }