/* Consola · Alertas: estilos propios de la pantalla. Solo tokens; clases con prefijo .cons-alertas- */

/* ---------- Cabecera: pastilla de sin leer junto al h1 ---------- */
.cons-alertas-h1 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.cons-alertas-pastilla {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px; border-radius: var(--radio-total);
  background: var(--peligro-fondo); color: var(--peligro); border: 1px solid var(--peligro-borde);
  font-family: var(--fuente-texto); font-size: var(--t-13); font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cons-alertas-pastilla::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--peligro-solido); }
.cons-alertas-pastilla[data-cero] { background: var(--exito-fondo); color: var(--exito); border-color: var(--exito-borde); }
.cons-alertas-pastilla[data-cero]::before { background: var(--exito); }

/* ---------- Resumen: sin leer por tipo (cada tarjeta filtra la lista) ---------- */
.cons-alertas-resumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-3); }
.cons-alertas-resumen__item {
  display: flex; align-items: center; gap: var(--e-3); min-width: 0; min-height: 64px;
  padding: var(--e-3) var(--e-4); text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-3); box-shadow: var(--sombra-1);
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.cons-alertas-resumen__item:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-2); }
.cons-alertas-resumen__item[aria-pressed="true"] { border-color: var(--primario); box-shadow: 0 0 0 1px var(--primario); }
.cons-alertas-resumen__textos { display: grid; min-width: 0; }
.cons-alertas-resumen__numero { font-family: var(--fuente-titulo); font-size: var(--t-24); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cons-alertas-resumen__etiqueta { font-size: var(--t-13); color: var(--texto-2); }
.cons-alertas-resumen__item[data-cero] .cons-alertas-resumen__numero { color: var(--texto-3); }

/* ---------- Ícono por tipo (cuadrado de color + trazo); el texto del tipo va siempre en el badge ---------- */
.cons-alertas-ico {
  width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: var(--neutro-fondo); color: var(--neutro);
}
.cons-alertas-ico .ico { width: 18px; height: 18px; }
.cons-alertas-ico--critica { background: var(--peligro-fondo); color: var(--peligro); }
.cons-alertas-ico--advertencia { background: var(--alerta-fondo); color: var(--alerta); }
.cons-alertas-ico--informacion { background: var(--info-fondo); color: var(--info); }
.cons-alertas-ico--resuelta { background: var(--exito-fondo); color: var(--exito); }
.cons-alertas-ico--tope { background: var(--revision-fondo); color: var(--revision); }
.cons-alertas-ico--seguridad { background: var(--cara-acento-fondo, var(--info-fondo)); color: var(--cara-acento, var(--info)); }

/* Badge del tipo: se apoya en .estado; Seguridad usa el azul de la consola */
.cons-alertas-tipo--seguridad { --e-fg: var(--cara-acento, var(--info)); --e-bg: var(--cara-acento-fondo, var(--info-fondo)); --e-bd: var(--cara-acento-borde, var(--info-borde)); }

/* ---------- Filtros ---------- */
.cons-alertas-filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-4); }
.cons-alertas-filtros .filtros { margin-bottom: 0; }
.cons-alertas-filtros__selects { display: flex; flex-wrap: wrap; gap: var(--e-3); min-width: 0; }
.cons-alertas-filtro { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.cons-alertas-filtro .campo__etiqueta { font-size: var(--t-13); color: var(--texto-2); white-space: nowrap; }
.cons-alertas-filtro .select { width: 200px; max-width: 100%; }

/* ---------- Lista de alertas ---------- */
.cons-alertas-lista { list-style: none; margin: 0; padding: 0; }
.cons-alerta {
  position: relative; display: flex; gap: var(--e-4); min-width: 0;
  padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--borde);
}
.cons-alerta:last-child { border-bottom: 0; }
.cons-alerta[hidden] { display: none; }
/* Sin leer: franja de color a la izquierda, fondo levemente marcado y título más fuerte */
.cons-alerta[data-leida="false"] { background: var(--superficie); }
.cons-alerta[data-leida="false"]::before { content: ""; position: absolute; left: 0; top: var(--e-3); bottom: var(--e-3); width: 3px; border-radius: 0 3px 3px 0; background: var(--primario); }
.cons-alerta--critica[data-leida="false"]::before { background: var(--peligro-solido); }
.cons-alerta[data-leida="true"] { background: var(--superficie-2); }
.cons-alerta__cuerpo { flex: 1; min-width: 0; display: grid; gap: 6px; }
.cons-alerta__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--e-3); font-size: var(--t-13); color: var(--texto-2); }
.cons-alerta__operador { font-weight: 500; color: var(--texto); min-width: 0; }
.cons-alerta__hora { color: var(--texto-3); white-space: nowrap; cursor: default; }
.cons-alerta__hora time { font-variant-numeric: tabular-nums; }
.cons-alerta__titulo { display: flex; align-items: flex-start; gap: var(--e-2); font-family: var(--fuente-texto); font-size: var(--t-15); font-weight: 600; line-height: 1.35; color: var(--texto); }
.cons-alerta[data-leida="true"] .cons-alerta__titulo { font-weight: 500; color: var(--texto-2); }
.cons-alerta__punto { width: 8px; height: 8px; margin-top: 0.45em; border-radius: 50%; flex: none; background: var(--peligro-solido); }
.cons-alerta__mensaje {
  color: var(--texto-2); font-size: var(--t-14); line-height: 1.5; max-width: 90ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cons-alerta__mensaje .ref, .cons-alerta__mensaje code { white-space: nowrap; }
.cons-alerta__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-top: 2px; }
.cons-alerta__leida { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-13); color: var(--texto-3); }
.cons-alerta__leida .ico { width: 16px; height: 16px; color: var(--exito); }

/* Separador "Leídas" dentro de la vista Todas */
.cons-alertas-separador { padding: var(--e-2) var(--e-5); background: var(--superficie-3); border-bottom: 1px solid var(--borde); font-size: var(--t-12); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-2); }
.cons-alertas-separador[hidden] { display: none; }

.cons-alertas-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2); padding: var(--e-3) var(--e-5); border-top: 1px solid var(--borde); font-size: var(--t-13); color: var(--texto-2); }
.cons-alertas-vacio { border-top: 1px solid var(--borde); }
.cons-alertas-vacio:first-child { border-top: 0; }
.cons-alertas-vacio .vacio__icono--ok { background: var(--exito-fondo); color: var(--exito); }

/* ---------- Catálogo: qué genera una alerta ---------- */
.cons-alertas-catalogo > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--e-3);
  min-height: 56px; padding: var(--e-3) var(--e-5); border-radius: var(--radio-3);
}
.cons-alertas-catalogo > summary::-webkit-details-marker { display: none; }
.cons-alertas-catalogo > summary:hover { background: var(--superficie-3); }
.cons-alertas-catalogo[open] > summary { border-radius: var(--radio-3) var(--radio-3) 0 0; border-bottom: 1px solid var(--borde); }
.cons-alertas-catalogo__titulo { font-weight: 600; color: var(--texto); }
.cons-alertas-catalogo__sub { display: block; font-size: var(--t-13); color: var(--texto-2); font-weight: 400; }
.cons-alertas-catalogo__chev { margin-left: auto; color: var(--texto-3); transition: transform var(--dur-2); flex: none; }
.cons-alertas-catalogo[open] .cons-alertas-catalogo__chev { transform: rotate(180deg); }
.cons-alertas-catalogo__cuerpo { padding: var(--e-4) var(--e-5) var(--e-5); display: grid; gap: var(--e-4); }
.cons-alertas-catalogo__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3) var(--e-6); }
.cons-alertas-catalogo__item { display: flex; gap: var(--e-3); min-width: 0; }
.cons-alertas-catalogo__item ul { margin: 6px 0 0; padding-left: 18px; color: var(--texto-2); font-size: var(--t-14); line-height: 1.5; }
.cons-alertas-catalogo__item ul li + li { margin-top: 2px; }
.cons-alertas-catalogo__nota { display: grid; gap: var(--e-1); padding-top: var(--e-3); border-top: 1px solid var(--borde); color: var(--texto-2); font-size: var(--t-14); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .cons-alertas-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .cons-alertas-filtros { flex-direction: column; align-items: stretch; }
  .cons-alertas-filtros__selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cons-alertas-filtro { flex-direction: column; align-items: stretch; gap: 4px; }
  .cons-alertas-filtro .select { width: 100%; }
  .cons-alertas-catalogo__lista { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cons-alerta { gap: var(--e-3); padding: var(--e-4); }
  .cons-alertas-ico { width: 32px; height: 32px; border-radius: 9px; }
  .cons-alerta__mensaje { -webkit-line-clamp: 3; }
  .cons-alertas-resumen__item { padding: var(--e-3); gap: var(--e-2); }
  .cons-alertas-resumen__item .cons-alertas-ico { display: none; }
  .cons-alertas-pie { padding: var(--e-3) var(--e-4); }
  .cons-alertas-catalogo > summary { padding: var(--e-3) var(--e-4); }
  .cons-alertas-catalogo__cuerpo { padding: var(--e-4); }
}
@media (pointer: coarse) {
  .cons-alertas-resumen__item { min-height: 64px; }
}