/* Componentes compartidos: los pinta el armazón y los usan todos los módulos.
   Un módulo nuevo no trae su propio CSS: usa estas clases y encaja. */

/* -- tira de KPIs -------------------------------------------------------- */
.tira-kpis {
  display: grid;
  /* auto-fill y no auto-fit: con dos KPIs, auto-fit los estira a media
     pantalla cada uno y queda ridículo. */
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 10px;
}

.kpi {
  position: relative;
  background: rgba(17, 26, 36, 0.92);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 11px 13px 12px;
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.kpi::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--texto-3);
}
.kpi.ok::before { background: var(--ok); }
.kpi.aviso::before { background: var(--aviso); }
.kpi.alerta::before { background: var(--alerta); }
.kpi.neutro::before { background: var(--neutro); }
.kpi.sin_datos::before { background: #334155; }
.kpi.sin_datos { opacity: 0.72; }

.kpi-etiqueta {
  display: flex; align-items: center; gap: 6px;
  color: var(--texto-3);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}
.kpi-etiqueta .de-modulo { color: var(--acento); font-size: 11px; }
.kpi-valor { display: flex; align-items: baseline; gap: 5px; }
.kpi-valor b { font-size: 25px; font-weight: 600; letter-spacing: -0.01em; }
.kpi-valor .unidad { color: var(--texto-2); font-size: 12px; }
.kpi-valor .tendencia { margin-left: auto; font-size: 11px; font-family: var(--mono); }
.kpi-valor .tendencia.sube { color: var(--ok); }
.kpi-valor .tendencia.baja { color: var(--alerta); }
.kpi-detalle {
  color: var(--texto-3);
  font-size: 11px;
  margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-chispa { position: absolute; right: 0; bottom: 0; left: 0; height: 26px; opacity: 0.4; }

/* -- tarjetas y paneles -------------------------------------------------- */
.tarjeta {
  background: rgba(17, 26, 36, 0.94);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  backdrop-filter: blur(6px);
  box-shadow: var(--sombra);
}
.tarjeta > header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--borde-suave);
}
.tarjeta > header h3 { font-size: 12.5px; }
.tarjeta > header .cola { margin-left: auto; color: var(--texto-3); font-size: 11px; }
.tarjeta > .cuerpo { padding: 11px 13px; }
.tarjeta.estrecha { width: 310px; }

.fila-paneles { display: flex; gap: 12px; flex: 1; min-height: 0; }
.columna-derecha {
  margin-left: auto;
  display: flex; flex-direction: column; gap: 12px;
  width: 318px; max-height: 100%;
  overflow-y: auto;
  pointer-events: auto;
}

/* -- ficha del usuario (común a todos los módulos, a la izquierda del mapa:
   la derecha es de la columna de cada módulo) -------------------------- */
.ficha-usuario {
  position: absolute; z-index: 6; left: 12px; top: 12px; bottom: 12px; width: 360px;
  display: flex; flex-direction: column;
  background: rgba(17, 26, 36, 0.97); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); backdrop-filter: blur(6px);
}
.ficha-usuario > header { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-bottom: 1px solid var(--borde-suave); }
.ficha-usuario > header .cola { margin-left: auto; color: var(--texto-3); font-size: 11px; }
.ficha-usuario .cerrar { border: 1px solid var(--borde); background: transparent; color: var(--texto-2); border-radius: 5px; cursor: pointer; padding: 1px 7px; }
.ficha-usuario > .cuerpo { overflow-y: auto; padding: 4px 13px 13px; }
.ficha-usuario section { padding-top: 10px; }
.ficha-usuario h4 { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto-3); margin: 0 0 5px; font-weight: 600; }
.ficha-usuario .aviso { display: flex; flex-direction: column; gap: 2px; font-size: 12px; padding: 7px 9px; margin: 6px 0;
  border-radius: 6px; border-left: 3px solid var(--texto-3); background: rgba(255, 255, 255, 0.03); color: var(--texto-2); }
.ficha-usuario .aviso b { color: var(--texto); font-weight: 600; }
.ficha-usuario .aviso.critica { border-left-color: var(--alerta); }
.ficha-usuario .aviso.aviso { border-left-color: var(--aviso); }
.ficha-usuario .aviso.info { border-left-color: var(--acento); }
.ficha-usuario .fila-pulsable { display: flex; flex-direction: column; gap: 1px; font-size: 12px; padding: 6px 2px; cursor: pointer;
  border-bottom: 1px solid rgba(34, 50, 63, 0.5); color: var(--texto-2); }
.ficha-usuario .fila-pulsable:hover b { color: var(--acento); }
.ficha-usuario .fila-pulsable b { color: var(--texto); font-weight: 500; }
@media (max-width: 720px) {
  .ficha-usuario { left: 8px; right: 8px; top: auto; width: auto; height: 62%; }
}

/* -- listas -------------------------------------------------------------- */
.lista { display: flex; flex-direction: column; gap: 2px; }
.lista-fila {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 2px;
  font-size: 12px;
  border-bottom: 1px solid rgba(34, 50, 63, 0.5);
}
.lista-fila:last-child { border-bottom: 0; }
.lista-fila .principal { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-fila .cifra { font-family: var(--mono); color: var(--texto); }
.lista-fila .secundario { color: var(--texto-3); font-size: 11px; }
.lista-vacia { color: var(--texto-3); font-size: 12px; padding: 6px 2px; }

.barra-proporcion { height: 4px; border-radius: 3px; background: var(--borde); overflow: hidden; width: 62px; }
.barra-proporcion i { display: block; height: 100%; background: var(--acento); }

/* -- etiquetas ----------------------------------------------------------- */
.insignia {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--borde);
  color: var(--texto-2);
}
.insignia.activo { color: var(--ok); border-color: rgba(52, 211, 153, 0.4); }
.insignia.beta { color: var(--acento); border-color: var(--acento-apagado); }
.insignia.en_desarrollo { color: var(--aviso); border-color: rgba(251, 191, 36, 0.35); }
.insignia.previsto { color: var(--texto-3); }
.insignia.critica { color: var(--alerta); border-color: rgba(248, 113, 113, 0.45); }
.insignia.aviso { color: var(--aviso); border-color: rgba(251, 191, 36, 0.35); }
.insignia.info { color: var(--acento); border-color: var(--acento-apagado); }

/* -- tablas de los módulos de gestión ------------------------------------ */
.tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.tabla th {
  font-weight: 500; color: var(--texto-3); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 5px 6px; border-bottom: 1px solid var(--borde);
}
.tabla td { padding: 5px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); color: var(--texto-2); }
.tabla tr:hover td { background: rgba(255, 255, 255, 0.03); }

/* -- capas del mapa ------------------------------------------------------ */
.capas { display: flex; flex-direction: column; gap: 1px; }
.capa {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 2px;
  font-size: 12px;
  color: var(--texto-2);
  cursor: pointer;
}
.capa:hover { color: var(--texto); }
.capa input { accent-color: var(--acento); }
.capa .muestra { width: 12px; height: 3px; border-radius: 2px; background: var(--texto-3); }

/* -- leyenda sobre el mapa ---------------------------------------------- */
.leyenda { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--texto-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.leyenda i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* -- ficha de módulo no disponible -------------------------------------- */
.ficha-modulo {
  max-width: 760px;
  margin: 24px auto;
  pointer-events: auto;
}
.ficha-cabecera { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.ficha-cabecera .icono-grande { font-size: 34px; }
.ficha-cabecera h2 { font-size: 20px; }
.ficha-modulo .descripcion { color: var(--texto-2); margin: 10px 0 20px; line-height: 1.55; }
.ficha-modulo h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto-3); margin-bottom: 8px; }
.ficha-modulo ul { margin: 0 0 20px; padding-left: 18px; color: var(--texto-2); line-height: 1.75; }
.ficha-modulo .aviso-fuentes {
  border: 1px solid rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.07);
  border-radius: var(--radio);
  padding: 11px 13px;
  color: var(--aviso);
  font-size: 12px;
  line-height: 1.6;
}