/* ==========================================================================
   SPARK — panel admin (privado)
   Tokens en marca.css.

   Tres materiales, cada uno con un trabajo:
   - Concreto: el fondo. Es la foto del manual (neón sobre concreto), fija,
     para que el vidrio tenga algo que refractar.
   - Vidrio: los paneles. Translúcidos, con filo metálico y brillo arriba.
   - Neón: SOLO lo que está encendido de verdad (en vivo, publicado, la vista
     activa). Si todo brilla, nada brilla: lo apagado se ve como tubo frío.
   ========================================================================== */

.app {
  display: flex; flex-wrap: wrap; min-height: 100vh;
  position: relative; isolation: isolate;
}

/* --- Concreto: la foto del manual, fija detrás de todo -------------------- */
.app::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(5, 10, 48, .96) 0%, rgba(5, 10, 48, .78) 45%, rgba(5, 10, 48, .35) 100%),
    url("/img/fondos/hero-1448.webp") right bottom / cover no-repeat,
    var(--fondo);
}
/* Grano: sin él, el vidrio parece plástico de plantilla. */
.app::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* --- Vidrio: una sola receta para todo lo que flota ----------------------- */
.lateral, .panel, .persona {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)), var(--vidrio);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
          backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    inset 0 1px 0 var(--vidrio-brillo),
    inset 0 -1px 0 rgba(0, 0, 0, .35),
    0 24px 48px -28px rgba(0, 0, 0, .8);
}
/* Filo metálico: un anillo de 1 px con degradado, recortado con máscara. */
.panel::before, .persona::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--metal-filo);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}

/* --- Lateral ------------------------------------------------------------- */
.lateral {
  flex: 1 1 220px; max-width: 270px; min-width: 220px;
  border-right: 1px solid rgba(255, 255, 255, .1); padding: 24px 16px;
  display: flex; flex-direction: column; gap: 6px;
  position: sticky; top: 0; align-self: flex-start; min-height: 100vh;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 40%), var(--vidrio-hondo);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06);
}
.lateral__marca { display: flex; align-items: center; gap: 12px; padding: 0 8px 22px; min-height: 44px; }
.lateral a.lateral__marca { padding: 0 8px 22px; background: none; }
.lateral .sello { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 6px 20px rgba(0, 0, 255, .55); }
.lateral__nombre { font-family: var(--fuente-texto); font-weight: 600; letter-spacing: .28em; text-transform: uppercase; font-size: 12px; color: var(--tinta); }
.lateral__nav { display: flex; flex-direction: column; gap: 4px; }
.lateral a {
  position: relative;
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
  border-radius: var(--radio-chico); font-size: 14px; color: var(--suave);
  transition: color .2s, background .2s;
}
.lateral a:hover { background: rgba(255, 255, 255, .06); color: var(--tinta); }
/* La vista activa es un tubo encendido a la izquierda; el resto queda frío. */
.lateral a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(0, 255, 204, .14), rgba(0, 255, 204, 0) 85%);
  color: #E9FFFA; font-weight: 600; text-shadow: 0 0 10px rgba(0, 255, 204, .55);
}
.lateral a[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px;
  background: #CFFFF4; box-shadow: var(--neon);
}
.lateral__pie { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 6px; }
.lateral__portal { border: 1px solid rgba(255, 255, 255, .2); }
.lateral__sesion { font-size: 12px; color: var(--tenue); padding: 8px 14px 0; overflow-wrap: anywhere; }

/* --- Contenido ----------------------------------------------------------- */
.contenido { flex: 999 1 620px; min-width: 0; padding: 28px clamp(20px, 3vw, 40px) 60px; }
.contenido:focus { outline: none; }
.cargando { color: var(--suave); padding: 40px 0; }

.cabecera { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.cabecera__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
/* Titular en cromo: el metal es el de la marca impresa, no un degradado de color. */
.cabecera h1 {
  font-size: 40px; letter-spacing: -.03em; line-height: 1.05;
  background: var(--metal-texto); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5));
}
.cabecera__acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bajada-vista { margin-top: 8px; font-size: 14px; color: var(--suave); max-width: 70ch; line-height: 1.5; }

.privado {
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #FFD6D6;
  border: 1px solid var(--privado-borde); background: var(--privado-fondo);
  border-radius: var(--radio-pildora); padding: 5px 12px;
  text-shadow: var(--neon-coral);
}
.volver { font-size: 14px; color: var(--suave); }
.volver:hover { color: var(--acento); }

/* --- Paneles y KPI ------------------------------------------------------- */
.panel { border-radius: var(--radio-panel); padding: 22px; }
.panel--acento::before {
  padding: 1px;
  background: linear-gradient(140deg, rgba(0, 255, 204, .95), rgba(0, 255, 204, .1) 35%, rgba(255, 255, 255, .05) 60%, rgba(0, 255, 204, .7));
}
.panel--acento { box-shadow: inset 0 1px 0 var(--vidrio-brillo), 0 0 40px -12px rgba(0, 255, 204, .35), 0 24px 48px -28px rgba(0, 0, 0, .8); }
.panel h2 { font-size: 19px; }
.panel__cab { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel__nota { margin-top: 6px; font-size: 13px; color: var(--tenue); line-height: 1.5; }
.panel__nota--alerta { color: var(--privado); }

.kpis { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 16px; }
.rotulo { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); font-weight: 600; }
.rotulo--acento { color: var(--acento); text-shadow: 0 0 10px rgba(0, 255, 204, .45); }

/* Cifras en metal: cromo para lo neutro, aqua anodizado para el acento. */
.kpi__valor, .cifra__valor, .mini-cifras .valor {
  background: var(--metal-texto); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.panel--acento .kpi__valor, .cifra__valor--acento {
  background-image: var(--metal-aqua);
  filter: drop-shadow(0 0 14px rgba(0, 255, 204, .35));
}
.kpi__valor { margin-top: 12px; font-family: var(--fuente-display); font-size: 44px; font-weight: var(--peso-display); letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi__valor small, .cifra__valor small {
  font-size: 18px; font-family: var(--fuente-texto); font-weight: 500; letter-spacing: 0;
  -webkit-text-fill-color: var(--suave); color: var(--suave);
}
.kpi__pie { margin-top: 10px; font-size: 13px; color: var(--tenue); }

.columnas { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.columnas__principal { flex: 3 1 640px; min-width: 0; }
.columnas__lateral { flex: 1.2 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.columnas__mitad { flex: 1 1 300px; min-width: 0; }
.pila { display: flex; flex-direction: column; gap: 20px; }

/* --- Tablas -------------------------------------------------------------- */
.tabla-caja { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 860px; }
/* Sin ancho minimo, la tabla aprieta el nombre hasta partirlo en cuatro lineas;
   mejor que la tabla se desplace dentro de su caja, como en el diseño. */
.tabla .col-proyecto { min-width: 210px; }
.tabla .col-cliente { min-width: 140px; }
.tabla th {
  text-align: left; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tenue); padding: 0 10px 12px; border-bottom: 1px solid var(--linea); white-space: nowrap;
}
.tabla td { padding: 12px 10px; border-bottom: 1px solid var(--linea-fina); vertical-align: middle; }
.tabla tbody tr { transition: background .2s; }
.tabla tbody tr:hover { background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla th.num { text-align: right; }
.tabla .id { color: var(--tenue); white-space: nowrap; }
.tabla .fuerte { font-weight: 600; }
.tabla .suave { color: var(--suave); }
.tabla .nota { color: var(--suave); max-width: 42ch; line-height: 1.45; }
.tabla a.fila-enlace { font-weight: 600; }
.tabla a.fila-enlace:hover { color: var(--acento); }
/* Fila de un sistema en vivo: el tubo corre por el borde izquierdo. */
.tabla tr.fila--viva td:first-child { position: relative; color: var(--tinta-2); }
.tabla tr.fila--viva td:first-child::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px;
  background: #CFFFF4; box-shadow: var(--neon);
}
.tabla tr.fila--viva { background: linear-gradient(90deg, rgba(0, 255, 204, .07), rgba(0, 255, 204, 0) 40%); }

/* --- Alertas y barras ---------------------------------------------------- */
.alertas { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.alerta { border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 12px 14px; font-size: 14px; line-height: 1.45; background: rgba(255, 255, 255, .025); }
.alerta--fuerte { border-color: var(--privado-borde); background: var(--privado-fondo); box-shadow: 0 0 18px -6px rgba(255, 90, 90, .45); }
.alerta--tenue { border-style: dashed; color: var(--suave); }

.barras { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.barra__cab { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.barra__pista {
  margin-top: 8px; height: 10px; border-radius: var(--radio-pildora); overflow: hidden;
  background: rgba(0, 0, 0, .35); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .06);
}
.barra__relleno { height: 100%; background: linear-gradient(180deg, #CFFFF4, var(--acento)); border-radius: var(--radio-pildora); box-shadow: var(--neon); }
.barra__relleno--revisar { background: var(--aviso); box-shadow: 0 0 10px rgba(255, 200, 107, .6); }
.barra__relleno--critico { background: var(--privado); box-shadow: var(--neon-coral); }

.grafico { margin-top: 14px; }
.grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafico rect { filter: drop-shadow(0 0 6px rgba(0, 255, 204, .55)); }
.vacio-dato {
  margin-top: 14px; border: 1px dashed rgba(255, 255, 255, .22); border-radius: 14px;
  padding: 22px 16px; text-align: center; color: var(--suave); font-size: 13px; line-height: 1.5;
  background: rgba(0, 0, 0, .18);
}

/* --- Detalle de proyecto ------------------------------------------------- */
.dato { margin-top: 16px; }
.dato:first-of-type { margin-top: 18px; }
.dato__valor { margin-top: 8px; font-size: 15px; color: var(--tinta-2); line-height: 1.5; overflow-wrap: anywhere; }
.dato__valor a { color: var(--acento); }
.cifras { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 16px; }
.cifra__valor { margin-top: 8px; font-family: var(--fuente-display); font-size: 30px; font-weight: var(--peso-titular); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cifra__valor small { font-size: 16px; }
.linea-meta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 14px 28px; font-size: 13px; color: var(--suave); align-items: center; }

.interruptor { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.interruptor__riel {
  width: 42px; height: 24px; border-radius: var(--radio-pildora); position: relative; flex: none;
  background: rgba(0, 0, 0, .35); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .12);
}
.interruptor__riel::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--metal-texto); box-shadow: 0 1px 3px rgba(0, 0, 0, .6); transition: transform .2s;
}
.interruptor--on .interruptor__riel { background: rgba(0, 255, 204, .25); box-shadow: var(--neon-caja); }
.interruptor--on .interruptor__riel::after { transform: translateX(18px); background: #E9FFFA; box-shadow: var(--neon); }

.mini-cifras { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mini-cifras .valor { margin-top: 6px; font-family: var(--fuente-display); font-size: 26px; font-weight: var(--peso-titular); }
.lista-accesos { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.acceso {
  border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radio-chico); padding: 12px 14px; background: rgba(255, 255, 255, .025);
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; font-size: 13px;
}
.acceso__rol { color: var(--suave); }
/* Persona, plataforma y rol en líneas propias; si no entran, cortan con "…" (el texto entero va en title). */
.acceso__texto { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acceso__texto > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Muro de accesos ----------------------------------------------------- */
.concentracion { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.concentracion p { font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
.concentracion strong { color: var(--tinta); }

.muro { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.persona {
  border-radius: var(--radio-panel); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01)), var(--vidrio-hondo);
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.persona__cab { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-family: var(--fuente-display); font-weight: var(--peso-titular); font-size: 15px;
  background: radial-gradient(circle at 35% 30%, rgba(0, 255, 204, .35), rgba(0, 255, 204, .06) 70%);
  color: #E9FFFA; border: 1px solid var(--acento-borde);
  box-shadow: 0 0 14px rgba(0, 255, 204, .3), inset 0 1px 0 rgba(255, 255, 255, .3);
  text-shadow: 0 0 8px rgba(0, 255, 204, .6);
}
.avatar--servicio { background: rgba(255, 255, 255, .06); color: var(--suave); border-color: var(--linea-fuerte); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); text-shadow: none; }
.persona__cuenta { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.muro-titulo { font-size: 22px; }
.persona__tipo { font-size: 12px; color: var(--tenue); margin-top: 2px; }
.persona__sistemas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.persona__sistemas li {
  font-size: 12px; border: 1px solid var(--linea-fuerte); border-radius: 8px; padding: 4px 8px; color: var(--tinta-2);
  background: rgba(255, 255, 255, .03);
}
.persona__sistemas li span { color: var(--tenue); }
.persona__n { font-size: 13px; color: var(--suave); }

/* --- Usuarios por agencia ------------------------------------------------ */
.agencia { gap: 14px; }
.agencia__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.agencia__nombre { font-family: var(--fuente-display); font-weight: var(--peso-titular); font-size: 24px; letter-spacing: -.02em; }
.agencia__n { font-size: 13px; color: var(--suave); white-space: nowrap; }
.agencia__n strong { font-family: var(--fuente-display); font-weight: var(--peso-titular); font-size: 22px; color: var(--tinta); margin-right: 4px; }
.agencia .barra__pista { margin-top: 0; }
.agencia--sin .agencia__nombre { color: var(--aviso); }

/* --- Editar desde el panel ----------------------------------------------- */
/* Pegado al borde derecho: en una tabla que se desplaza, el botón no se pierde. */
.tabla .col-editar {
  width: 1%; text-align: right; padding-left: 18px;
  position: sticky; right: 0;
  background: linear-gradient(90deg, rgba(11, 18, 66, 0), rgba(11, 18, 66, .96) 18px);
}
.editar-fila {
  min-height: 32px; padding: 0 12px; border-radius: var(--radio-chico);
  border: 1px solid var(--linea-fuerte); background: rgba(255, 255, 255, .03);
  color: var(--suave); font: 500 12px var(--fuente-texto); cursor: pointer; white-space: nowrap;
  transition: color .2s, border-color .2s, box-shadow .2s;
}
/* En la tabla el botón espera quieto; aparece del todo al pasar por la fila. */
.tabla .editar-fila { opacity: .55; }
.tabla tr:hover .editar-fila, .editar-fila:focus-visible { opacity: 1; }
.editar-fila:hover, .editar-fila:focus-visible { color: #E9FFFA; border-color: var(--acento-borde); box-shadow: 0 0 12px rgba(0, 255, 204, .2); }
.acceso .editar-fila { margin-left: auto; align-self: center; }
@media (hover: none) { .tabla .editar-fila { opacity: 1; } }

.editor {
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); margin: auto; padding: 0;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-tarjeta); color: var(--tinta);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 30%), #0A1140;
  box-shadow: 0 0 0 1px rgba(0, 255, 204, .12), 0 40px 80px -30px rgba(0, 0, 0, .9);
}
.editor[open] { animation: abrir-editor .22s ease-out; }
.editor::backdrop { background: rgba(5, 10, 48, .65); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@keyframes abrir-editor { from { opacity: 0; transform: translateY(10px); } }
.editor__cuerpo { padding: 28px 28px 24px; }
.editor__titulo { margin-top: 8px; font-size: 26px; overflow-wrap: anywhere; }
.editor__form { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px 18px; }
.editor__campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.editor__campo--ancho { grid-column: 1 / -1; }
.editor__campo label { font-size: 12px; font-weight: 600; color: var(--tinta-3); }
.editor__req { color: var(--acento); }
.editor__campo input, .editor__campo select, .editor__campo textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--radio-chico);
  border: 1px solid var(--linea-fuerte); background: rgba(0, 0, 0, .28); color: var(--tinta);
  font: 400 14px/1.4 var(--fuente-texto); color-scheme: dark;
}
.editor__campo textarea { resize: vertical; min-height: 84px; }
.editor__campo select option { background: #0A1140; color: var(--tinta); }
.editor__campo input:focus-visible, .editor__campo select:focus-visible, .editor__campo textarea:focus-visible {
  outline: none; border-color: var(--acento-borde); box-shadow: 0 0 0 3px rgba(0, 255, 204, .18);
}
.editor__campo [readonly], .editor__campo [disabled] { color: var(--tenue); background: rgba(255, 255, 255, .03); cursor: not-allowed; }
.editor__campo [aria-invalid="true"] { border-color: var(--privado-borde); box-shadow: 0 0 0 3px rgba(255, 90, 90, .15); }
.editor__error { font-size: 12px; color: var(--privado); line-height: 1.4; }
.editor__mensaje { margin-top: 16px; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-chico); padding: 12px 14px; font-size: 14px; line-height: 1.5; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.editor__mensaje--fuerte { border-style: solid; border-color: var(--privado-borde); background: var(--privado-fondo); }
/* Fijo al pie del diálogo: en Proyectos (16 campos) Guardar no queda tres pantallas abajo. */
.editor__pie {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  position: sticky; bottom: 0; margin: 4px -28px -24px; padding: 14px 28px 20px;
  border-top: 1px solid var(--linea-fina); background: #0A1140;
}
.editor__espacio { flex: 1 1 auto; }
.editor__borrar:hover, .editor__borrar[data-confirmar] { border-color: var(--privado-borde); color: var(--privado); }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }

.tostada {
  position: fixed; left: 50%; bottom: 24px; z-index: 20; max-width: calc(100vw - 32px);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  padding: 12px 18px; border-radius: var(--radio-chico); font-size: 14px; color: #E9FFFA;
  background: #0A1140; border: 1px solid var(--acento-borde); box-shadow: 0 0 24px -6px rgba(0, 255, 204, .5);
}
.tostada--visible { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .editor[open] { animation: none; } .tostada { transition: none; } }

/* --- Barra de filtros (Usuarios) -----------------------------------------
   Los controles son los del formulario de edición (.editor__campo). */
.filtros { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 16px; }
.filtros__campo { flex: 1 1 150px; }
.filtros__campo--buscar { flex: 2 1 220px; }
.filtros__fin { margin-left: auto; display: flex; align-items: center; gap: 12px; min-height: 44px; }
.filtros__contador { font-size: 13px; color: var(--suave); white-space: nowrap; }
.filtros__limpiar { cursor: pointer; transition: border-color .2s, color .2s; }
.filtros__limpiar:hover { border-color: var(--acento-borde); color: var(--tinta); }
@media (max-width: 599px) {
  .filtros { flex-direction: column; align-items: stretch; }
  .filtros__campo, .filtros__campo--buscar { flex: none; }
  .filtros__fin { margin-left: 0; justify-content: space-between; }
}

/* --- Color por sistema ----------------------------------------------------
   Cada sistema tiene su tubo de neón (mapa COLOR_SISTEMA en admin.js, único
   lugar). Llega como --sis / --sis-luz / --sis-tenue por CSSOM. El color
   identifica: siempre va pegado al nombre, nunca solo.                     */
.punto-sis {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; vertical-align: middle;
  background: var(--sis, #8A93AD);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 0 6px var(--sis-luz, transparent), 0 0 14px var(--sis-tenue, transparent);
}
.punto-sis--grande { width: 14px; height: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 0 10px var(--sis-luz, transparent), 0 0 26px var(--sis-tenue, transparent); }
.sis { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.sis__nombre { min-width: 0; }
.tabla .sis { white-space: normal; }
.puntos-sis { display: inline-flex; align-items: center; gap: 5px; }
.puntos-sis--nombres { flex-wrap: wrap; gap: 4px 14px; }
.persona__sistemas li { display: inline-flex; align-items: center; gap: 7px; }

/* --- Barras por sistema: HTML, se reacomodan solas en celular ------------- */
.barras-sis { margin-top: 14px; display: flex; flex-direction: column; gap: 11px; }
.barra-sis { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 13px; }
.barra-sis__nombre { display: flex; align-items: center; gap: 8px; min-width: 0; }
.barra-sis__nombre > span:not(.punto-sis), .barra-sis__nombre > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.barra-sis__nombre > a { font-weight: 600; }
.barra-sis__nombre > a:hover { color: var(--acento); }
.barra-sis__detalle { color: var(--tenue); font-size: 12px; flex: none; }
.barra-sis__pista {
  display: block; height: 8px; border-radius: var(--radio-pildora); overflow: hidden;
  background: rgba(0, 0, 0, .35); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .05);
}
.barra-sis__relleno {
  display: block; height: 100%; border-radius: var(--radio-pildora);
  background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%), var(--sis, #8A93AD);
  box-shadow: 0 0 6px var(--sis-luz, transparent), 0 0 14px var(--sis-tenue, transparent);
}
.barra-sis--aqua { --sis: var(--acento); --sis-luz: rgba(0, 255, 204, .55); --sis-tenue: rgba(0, 255, 204, .18); }
.barra-sis__valor { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tinta-2); text-align: right; font-weight: 500; }
/* En una tarjeta angosta (celular, o tres por fila a 1024 px) la barra baja
   debajo del nombre: el nombre entero vale más que la barra al lado. */
.tarjeta, .proveedor-detalle { container-type: inline-size; }
@container (max-width: 400px) {
  .barra-sis { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .barra-sis__nombre { grid-row: 1; grid-column: 1; }
  .barra-sis__valor { grid-row: 1; grid-column: 2; }
  .barra-sis__pista { grid-row: 2; grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .barra-sis { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .barra-sis__nombre { grid-row: 1; grid-column: 1; }
  .barra-sis__valor { grid-row: 1; grid-column: 2; }
  .barra-sis__pista { grid-row: 2; grid-column: 1 / -1; }
}

/* --- Tablero del resumen: cada tarjeta es un enlace a su pestaña ---------- */
.tablero { margin-top: 20px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.tarjeta { display: flex; flex-direction: column; grid-column: span 12; min-width: 0; color: inherit; }
.tarjeta:hover::before, .tarjeta:focus-visible::before {
  background: linear-gradient(140deg, rgba(0, 255, 204, .85), rgba(0, 255, 204, .18) 35%, rgba(255, 255, 255, .06) 60%, rgba(0, 255, 204, .6));
}
.tarjeta:focus-visible { outline: none; box-shadow: inset 0 1px 0 var(--vidrio-brillo), 0 0 0 3px rgba(0, 255, 204, .25), 0 24px 48px -28px rgba(0, 0, 0, .8); }
.tarjeta__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tarjeta__ir { font-size: 12px; color: var(--tenue); white-space: nowrap; transition: color .2s; }
.tarjeta:hover .tarjeta__ir, .tarjeta:focus-visible .tarjeta__ir { color: var(--acento); }
.tarjeta__cuerpo { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.tarjeta__cuerpo > :first-child { flex: 1 1 auto; }
.tarjeta__pie { margin-top: 14px; font-size: 12px; color: var(--tenue); line-height: 1.5; }
.tarjeta .alertas { margin-top: 14px; }
.vacio-dato--chico { padding: 18px 14px; }
@media (min-width: 900px) {
  .tarjeta--7 { grid-column: span 7; }
  .tarjeta--6 { grid-column: span 6; }
  .tarjeta--5 { grid-column: span 5; }
  .tarjeta--4 { grid-column: span 4; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .tarjeta--7, .tarjeta--6, .tarjeta--5, .tarjeta--4 { grid-column: span 6; }
}

/* Proyectos, compactos: la leyenda de colores del tablero. */
.lista-sis { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.lista-sis__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--linea-fina); font-size: 13px;
}
.lista-sis__item:last-child { border-bottom: 0; }
.lista-sis__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lista-sis__item .sis__nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-sis__cliente { color: var(--tenue); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Anillo por proveedor: cromo, para que el neón quede para los sistemas - */
/* Flex con salto: si la tarjeta es angosta, la leyenda baja debajo del anillo
   en vez de quedarse sin lugar para los nombres. */
.anillo-fila { display: flex; flex-wrap: wrap; gap: 18px 22px; align-items: center; margin-top: 14px; }
.anillo-fila .anillo-caja { flex: 0 1 150px; }
.anillo-fila .leyenda { flex: 1 1 170px; }
.anillo-fila--grande .anillo-caja { flex: 0 1 220px; }
.anillo-fila--grande .leyenda { flex: 1 1 200px; }
.anillo-caja { position: relative; width: 100%; }
.anillo { width: 100%; height: auto; display: block; overflow: visible; }
.anillo__porcion { stroke: #0A1140; stroke-width: 1.5; transition: opacity .2s, filter .2s; }
.anillo__porcion[role="button"] { cursor: pointer; }
.anillo--elegido .anillo__porcion:not(.anillo__porcion--activa) { opacity: .45; }
.anillo__porcion--activa { filter: drop-shadow(0 0 5px rgba(0, 255, 204, .55)); }
.anillo__porcion:focus-visible { outline: none; stroke: var(--acento); stroke-width: 2.5; }
.anillo__porcion[role="button"]:hover { opacity: 1; }
.anillo__centro {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none; padding: 28%;
}
.anillo__total {
  font-family: var(--fuente-display); font-weight: var(--peso-titular); font-size: clamp(14px, 2.4vw, 20px); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--metal-texto); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.anillo__pie { font-size: 11px; color: var(--tenue); margin-top: 2px; }
.leyenda { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.leyenda__item {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-width: 0;
  padding: 7px 10px; border-radius: var(--radio-chico); border: 1px solid transparent; background: none; text-align: left;
  color: var(--tinta-2); font: 500 13px/1.3 var(--fuente-texto);
}
button.leyenda__item { cursor: pointer; transition: border-color .2s, background .2s, color .2s; min-height: 40px; }
button.leyenda__item:hover { background: rgba(255, 255, 255, .05); border-color: var(--linea); }
.leyenda__item[aria-pressed="true"] {
  color: #E9FFFA; border-color: var(--acento-borde);
  background: linear-gradient(180deg, rgba(0, 255, 204, .12), rgba(0, 255, 204, .03));
  box-shadow: 0 0 12px -4px rgba(0, 255, 204, .45);
}
.leyenda__muestra { width: 12px; height: 12px; border-radius: 3px; flex: none; background: var(--prov, #4C5570); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .35); }
.leyenda__muestra--grande { width: 18px; height: 18px; border-radius: 5px; }
.leyenda__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leyenda__valor { font-variant-numeric: tabular-nums; color: var(--suave); white-space: nowrap; }
@media (max-width: 480px) {
  .anillo-fila { justify-content: center; }
  .anillo-fila .anillo-caja { flex-basis: 180px; }
  .anillo-fila .leyenda { flex-basis: 100%; }
}

/* --- Vista Uso --------------------------------------------------------------- */
/* El gráfico principal de la pestaña: las mismas barras del tablero, más grandes. */
.uso-grafico .barras-sis { gap: 14px; margin-top: 8px; }
.uso-grafico .barra-sis { font-size: 15px; gap: 14px; }
.uso-grafico .barra-sis__pista { height: 12px; }
.uso-grafico .barra-sis__valor { font-family: var(--fuente-display); font-weight: var(--peso-titular); font-size: 22px; letter-spacing: -.02em; }
.uso-grafico .barra-sis__detalle { font-size: 13px; }
.uso-mes { flex-direction: row; align-items: center; gap: 10px; }
.uso-mes select { width: auto; min-width: 180px; }
.tabla th.con-ayuda { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }

/* --- Vista Proveedores ----------------------------------------------------- */
.proveedor-vista { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
.proveedor-detalle__titulo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.proveedor-detalle__titulo h2 { overflow-wrap: anywhere; }
.proveedor-detalle__cifra { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.proveedor-detalle__cifra .cifra__valor { margin-top: 0; background-image: var(--metal-aqua); filter: drop-shadow(0 0 14px rgba(0, 255, 204, .3)); }
.proveedor-detalle__sub { font-size: 13px; color: var(--suave); }
.proveedor-detalle .barras-sis { margin-top: 18px; }
.proveedores-tabla .tabla { min-width: 680px; }
@media (max-width: 899px) { .proveedor-vista { grid-template-columns: 1fr; } }

.error-pantalla { max-width: 560px; margin: 80px auto; text-align: center; }
.error-pantalla h1 { font-size: 30px; }
.error-pantalla__acciones { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.error-pantalla p { margin-top: 14px; color: var(--suave); line-height: 1.55; }

/* Sin backdrop-filter, el vidrio translúcido deja leer la foto detrás:
   se vuelve opaco para que el texto mantenga contraste. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app { --vidrio: rgba(10, 17, 64, .94); --vidrio-hondo: rgba(7, 12, 54, .96); }
}

@media (max-width: 720px) {
  .lateral { max-width: none; min-height: 0; position: static; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .lateral__nav { flex-direction: row; flex-wrap: wrap; }
  .lateral a[aria-current="page"]::before { left: 10px; right: 10px; top: auto; bottom: 4px; width: auto; height: 2px; }
  .lateral__pie { margin-top: 12px; padding-top: 0; }
  .mini-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cabecera h1 { font-size: 32px; }
  .editor__cuerpo { padding: 22px 18px 24px; }
  .editor__pie { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
  .editor__pie .btn { flex: 1 1 auto; }
  .editor__espacio { display: none; }
  .app::before { background-position: 70% bottom; }
}