/* Carril ADM: la administración de qConta (21-10-2026, Iker: «la landing de administración que sea sencilla y visual, un buen dashboard, estilo moderno / liquid glass»).
   La portada es una pieza de vidrio oscuro (`.adm-portada`, con los tokens --cristal-* de estilo.css) dentro de la pantalla clara; el resto de pantallas de administración
   (servidor, actividad, errores, comprobaciones, IA, soporte) son las de siempre, con las pistas de uso (`.adm-pista`) y los puntos de estado (`.adm-punto`) de aquí.
   Solo tokens de estilo.css: nada de colores ni tamaños de letra sueltos. */

/* ── pistas de uso y puntos de estado (sirven en claro y en el vidrio) ─────────────────────────── */
.adm-pista { height: var(--e2); border-radius: var(--r-pill); background: var(--linea-suave); overflow: hidden; }
.adm-pista > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--marca); }
.adm-pista > i.av { background: var(--av-fg); }
.adm-pista > i.no { background: var(--no-fg); }
.adm-punto { display: inline-block; flex: none; width: var(--e2); height: var(--e2); border-radius: 50%; background: var(--tenue); }
.adm-punto.ok { background: var(--ok-fg); }
.adm-punto.av { background: var(--av-fg); }
.adm-punto.no { background: var(--no-fg); }
.adm-medidor { display: grid; gap: var(--e1); }
.adm-medidor > div:first-child { display: flex; justify-content: space-between; gap: var(--e3); font-size: var(--t-sm); }
.adm-medidor small { color: var(--tenue); font-size: var(--t-xs); }

/* ── la portada de vidrio ─────────────────────────────────────────────────────────────────────── */
.adm-portada { display: grid; gap: var(--e4); padding: var(--e5); border-radius: calc(var(--r) * 2.5); background: var(--cristal-fondo); color: var(--cristal-txt); }
.adm-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3) var(--e4); }
.adm-cab h1 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.01em; }
.adm-cab p { margin-top: 2px; color: var(--cristal-tenue); font-size: var(--t-sm); }
.adm-vidrio { background: var(--cristal); border: 1px solid var(--cristal-borde); border-radius: calc(var(--r) * 2); box-shadow: var(--cristal-sombra); backdrop-filter: blur(16px); min-width: 0; }
.adm-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); height: var(--alto-xs); padding: 0 var(--e3); border-radius: calc(var(--r) * 1.25); border: 1px solid var(--cristal-borde);
  background: var(--cristal-hover); color: var(--cristal-txt); font-size: var(--t-xs); font-weight: 500; white-space: nowrap; }
.adm-btn:hover { background: var(--cristal-borde); opacity: 1; }
.adm-btn svg { width: 14px; height: 14px; color: inherit; }
.adm-portada a { color: inherit; }
.adm-portada .tenue, .adm-portada .adm-tenue { color: var(--cristal-tenue); }

/* lo que pide atención: filas de acción antes que ninguna cifra (patrón «filas de acción sobre el gráfico», Filllo / I+D) */
.adm-atencion { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--e1); padding: var(--e1); }
.adm-fila { display: flex; align-items: center; gap: var(--e3); padding: var(--e3); border-radius: calc(var(--r) * 1.5); background: var(--cristal); min-width: 0; }
.adm-fila > div { min-width: 0; flex: 1; }
.adm-fila b { display: block; font-weight: 500; font-size: var(--t-sm); overflow-wrap: anywhere; }
.adm-fila span.adm-detalle { display: block; color: var(--cristal-tenue); font-size: var(--t-xs); overflow-wrap: anywhere; }
.adm-portada .adm-punto { background: var(--cristal-tenue); }
.adm-portada .adm-punto.ok { background: var(--cristal-ok); }
.adm-portada .adm-punto.av { background: var(--cristal-av); }
.adm-portada .adm-punto.no { background: var(--cristal-no); }
.adm-todo-bien { padding: var(--e3) var(--e4); display: flex; align-items: center; gap: var(--e3); color: var(--cristal-tenue); font-size: var(--t-sm); }

/* las cifras */
.adm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--e3); }
.adm-kpi { display: grid; align-content: start; gap: 2px; padding: var(--e3) var(--e4); }
.adm-kpi .k { color: var(--cristal-tenue); font-size: var(--t-xs); }
.adm-kpi .v { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.adm-kpi .s { color: var(--cristal-tenue); font-size: var(--t-xs); }
.adm-kpi .v.ok { color: var(--cristal-ok); }
.adm-kpi .v.av { color: var(--cristal-av); }
.adm-kpi .v.no { color: var(--cristal-no); }
.adm-kpi .s .ok { color: var(--cristal-ok); }
.adm-kpi .s .av { color: var(--cristal-av); }
.adm-kpi svg.adm-spark { display: block; width: 100%; height: var(--e5); margin-top: var(--e2); }
.adm-kpi svg.adm-spark polyline { fill: none; stroke: var(--cristal-ok); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.adm-kpi svg.adm-spark.av polyline { stroke: var(--cristal-av); }
.adm-kpi svg.adm-spark.gris polyline { stroke: var(--cristal-tenue); }

/* los bloques */
.adm-cols { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.adm-cols.ancho { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
.adm-card { padding: var(--e4) var(--e4); }
.adm-card h3 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); margin-bottom: var(--e3); font-size: var(--t-sm); font-weight: 600; }
.adm-card h3 small { color: var(--cristal-tenue); font-size: var(--t-xs); font-weight: 400; }
.adm-barras { display: flex; align-items: flex-end; gap: var(--e3); height: 9rem; padding-top: var(--e3); }
.adm-barras > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; height: 100%; }
.adm-barras i { display: block; width: 100%; min-height: 3px; border-radius: var(--r) var(--r) var(--r-xs) var(--r-xs); background: var(--cristal-marca); }
.adm-barras i.baja { background: var(--cristal-no); }
.adm-meses { display: flex; gap: var(--e3); margin-top: var(--e1); color: var(--cristal-tenue); font-size: var(--t-2xs); }
.adm-meses span { flex: 1; text-align: center; }
.adm-portada .adm-pista { background: var(--cristal-borde); }
.adm-portada .adm-pista > i { background: var(--cristal-marca); }
.adm-portada .adm-pista > i.av { background: var(--cristal-av); }
.adm-portada .adm-pista > i.no { background: var(--cristal-no); }
.adm-portada .adm-medidor small { color: var(--cristal-tenue); }
.adm-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-xs); }
.adm-tabla th, .adm-tabla td { padding: var(--e2) 0; text-align: left; font-weight: 400; border-top: 1px solid var(--cristal-borde); }
.adm-tabla th { border-top: 0; color: var(--cristal-tenue); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .05em; }
.adm-tabla .n { text-align: right; font-variant-numeric: tabular-nums; }
.adm-medidores { display: grid; gap: var(--e3); }
.adm-pie { margin-top: var(--e3); }
.adm-barras em { font-style: normal; color: var(--cristal-tenue); font-size: var(--t-2xs); font-variant-numeric: tabular-nums; }
.adm-lista { display: grid; gap: var(--e2); }
.adm-lista > div { display: flex; align-items: baseline; gap: var(--e2); font-size: var(--t-xs); }
.adm-lista small { margin-left: auto; color: var(--cristal-tenue); white-space: nowrap; }
.adm-check { display: grid; gap: var(--e2); }
.adm-check > a, .adm-check > div { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-xs); }
.adm-check .caja { flex: none; width: var(--e4); height: var(--e4); border-radius: var(--r-sm); border: 1.5px solid var(--cristal-borde); display: grid; place-items: center; }
.adm-check .caja svg { width: 11px; height: 11px; }
.adm-check .hecho .caja { background: var(--cristal-ok); border-color: var(--cristal-ok); color: var(--cristal-fondo); }
.adm-check .hecho { color: var(--cristal-tenue); text-decoration: line-through; }
.adm-check .mal .caja { border-color: var(--cristal-av); }
.adm-vacio { color: var(--cristal-tenue); font-size: var(--t-xs); }

@media (max-width: 900px) {
  .adm-portada { padding: var(--e3); border-radius: calc(var(--r) * 2); }
  .adm-cols.ancho { grid-template-columns: minmax(0, 1fr); }
}

/* ── las demás pantallas de administración ────────────────────────────────────────────────────── */
.adm-grid { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.adm-grid > .card { align-self: start; }
.adm-grid .cc { display: grid; gap: var(--e3); }
.adm-cifra { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.adm-cifra small { font-size: var(--t-sm); font-weight: 400; color: var(--tenue); }
.adm-estado { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) 0; border-top: 1px solid var(--linea-suave); }
.adm-estado:first-child { border-top: 0; padding-top: 0; }
.adm-estado > div { flex: 1; min-width: 0; }
.adm-estado b { display: block; font-weight: 500; font-size: var(--t-sm); }
.adm-estado span { display: block; color: var(--tenue); font-size: var(--t-xs); overflow-wrap: anywhere; }
.adm-traza { margin: var(--e2) 0 0; padding: var(--e3); max-height: 14rem; overflow: auto; border-radius: var(--r); background: var(--fondo); font: var(--t-2xs) var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); padding: var(--e3) var(--pad-card); border-bottom: 1px solid var(--linea-suave); }
.adm-filtros input[type=search] { flex: 1 1 14rem; width: auto; height: var(--alto-sm); min-height: var(--alto-sm); }
.adm-filtros select { width: auto; height: var(--alto-sm); min-height: var(--alto-sm); }
.adm-dia { padding: var(--e3) var(--pad-card) var(--e1); color: var(--tenue); font-size: var(--t-xs); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.adm-evento { display: flex; align-items: baseline; gap: var(--e3); padding: var(--e2) var(--pad-card); font-size: var(--t-sm); border-top: 1px solid var(--linea-suave); }
.adm-evento .quien { flex: none; min-width: 9rem; max-width: 12rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-evento .que { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.adm-evento .donde { flex: none; color: var(--tenue); font-size: var(--t-xs); white-space: nowrap; }
@media (max-width: 760px) { .adm-evento { flex-wrap: wrap; } .adm-evento .quien { min-width: 0; max-width: none; } }

/* ── soporte: bandeja y conversación ─────────────────────────────────────────────────────────── */
.sop-cols { display: grid; gap: var(--e4); grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr); align-items: start; }
.adm-chips { display: flex; flex-wrap: wrap; gap: var(--e2); padding: var(--e3) var(--e4) var(--e2); }
.adm-chips a { display: inline-flex; align-items: center; gap: var(--e1); height: var(--alto-xs); padding: 0 var(--e3); border-radius: var(--r-pill); border: 1px solid var(--linea); color: var(--tenue); font-size: var(--t-xs); font-weight: 500; }
.adm-chips a:hover { background: var(--hover); color: var(--texto); opacity: 1; }
.adm-chips a.activo { background: var(--marca-suave); border-color: var(--marca); color: var(--texto); }
.adm-chips .n { font-variant-numeric: tabular-nums; }
.sop-lista { display: grid; }
.sop-vacio { padding: var(--e3) var(--e4) var(--e4); }
.sop-lista a { display: grid; gap: 2px; padding: var(--e3) var(--e4); border-top: 1px solid var(--linea-suave); color: var(--texto); }
.sop-lista a:first-child { border-top: 0; }
.sop-lista a:hover { background: var(--hover); opacity: 1; }
.sop-lista a.activo { background: var(--marca-suave); }
.sop-lista a b { display: flex; align-items: center; gap: var(--e2); font-weight: 500; font-size: var(--t-sm); }
.sop-lista a b .crece { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sop-lista a span { color: var(--tenue); font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sop-lista a.nuevo b { font-weight: 600; }
.sop-conv { display: grid; gap: var(--e3); padding: var(--e4); }
.sop-msg { display: grid; gap: var(--e1); max-width: 40rem; padding: var(--e3) var(--e4); border-radius: calc(var(--r) * 1.5); background: var(--fondo); }
.sop-msg.soporte { justify-self: end; background: var(--marca-suave); }
.sop-msg.interno { background: var(--av-bg); }
.sop-msg .meta { display: flex; gap: var(--e2); color: var(--tenue); font-size: var(--t-xs); }
.sop-msg .meta b { color: var(--texto); font-weight: 500; }
.sop-msg p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-sm); }
.sop-ajustes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); }
.sop-ajustes select { width: auto; height: var(--alto-sm); min-height: var(--alto-sm); }
.sop-resp { display: grid; gap: var(--e2); }
.sop-resp textarea { min-height: 6rem; }
.sop-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); padding-bottom: var(--e3); border-bottom: 1px solid var(--linea-suave); color: var(--tenue); font-size: var(--t-xs); }
@media (max-width: 1000px) { .sop-cols { grid-template-columns: minmax(0, 1fr); } }