/* Consola · Monitoreo y salud (admin/index.html). Solo tokens; clases con prefijo .cons-inicio- */
/* --- Cabecera: Actualizar, Actualizar solo y Descargar CSV en una fila --- */
.cons-inicio-acciones { align-items: center; gap: var(--e-3); }
/* --- Banner y KPIs pegados a la cabecera: es lo primero que se mira --- */
.seccion.cons-inicio-estado { margin-top: 0; }
.seccion.cons-inicio-resumen { margin-top: var(--e-5); }
.estado-servicio__motivos a { font-weight: 600; }
/* --- KPIs: 3 montos + 2 contadores --- */
.cons-inicio-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cons-inicio-kpis > .kpi { grid-column: span 3; }
.cons-inicio-kpis > .cons-inicio-kpi--monto { grid-column: span 2; }
@media (min-width: 1400px) {
.cons-inicio-kpis { grid-template-columns: repeat(3, minmax(0, 1.3fr)) repeat(2, minmax(0, 1fr)); }
.cons-inicio-kpis > .kpi, .cons-inicio-kpis > .cons-inicio-kpi--monto { grid-column: auto; }
.cons-inicio-kpis .kpi { padding: var(--e-4) var(--e-5); }
.cons-inicio-kpis .kpi__valor { font-size: var(--t-24); }
}
.cons-inicio-falla { display: inline-flex; align-items: center; gap: 4px; color: var(--peligro); font-weight: 600; text-decoration: none; }
.cons-inicio-falla:hover { text-decoration: underline; }
.cons-inicio-kpi-link { color: var(--primario-texto); font-weight: 500; }
.cons-inicio-kpi-motivo { display: inline-flex; align-items: center; gap: 4px; color: var(--alerta); font-weight: 600; }
/* --- Tabla por operador --- */
.cons-inicio-tabla th { white-space: normal; vertical-align: bottom; }
.cons-inicio-tabla th, .cons-inicio-tabla td { padding-left: 12px; padding-right: 12px; }
.cons-inicio-tabla th:nth-child(3) { min-width: 116px; }
.cons-inicio-op { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cons-inicio-op .estado { flex: none; }
.cons-inicio-op__desde { margin-top: 0 !important; }
.cons-inicio-pend { display: inline-block; padding: 1px 6px; border-radius: var(--radio-1); background: var(--acento-suave); color: var(--acento-texto); font-weight: 700; }
.cons-inicio-falla-sub { display: flex !important; align-items: center; justify-content: flex-end; gap: 3px; color: var(--peligro) !important; font-weight: 600 !important; }
.cons-inicio-com { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 6px; max-width: 120px; }
.cons-inicio-tabla td.acciones .btn { white-space: nowrap; }
/* El ícono de ayuda queda pegado al borde derecho: el tooltip se abre hacia la izquierda para no desbordar */
.cons-inicio-com [data-tooltip]::after { left: auto; right: -6px; transform: translate(0, 4px); }
.cons-inicio-com [data-tooltip]:hover::after, .cons-inicio-com [data-tooltip]:focus-visible::after { transform: translate(0, 0); }
/* Detalle desplegado: las cuentas del operador */
.cons-inicio-det__titulo { font-size: var(--t-13); color: var(--texto-2); margin-bottom: var(--e-2); }
.cons-inicio-cuentas { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-2); }
.cons-inicio-cuenta {
display: grid; align-items: center; gap: var(--e-2) var(--e-5);
grid-template-columns: minmax(130px, 1fr) minmax(120px, 0.9fr) minmax(200px, 1.6fr) minmax(120px, 0.9fr) minmax(220px, 1.5fr);
padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--borde);
}
.cons-inicio-cuenta:last-child { border-bottom: 0; }
.cons-inicio-cuenta--atencion { box-shadow: inset 3px 0 0 var(--tope-alerta); }
.cons-inicio-cuenta__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cons-inicio-cuenta__id .mono { font-size: var(--t-12); }
.cons-inicio-cuenta__dato, .cons-inicio-cuenta__tope { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cons-inicio-cuenta__etq { font-size: var(--t-12); color: var(--texto-3); font-weight: 500; }
.cons-inicio-cuenta__tope .tope__cabecera { color: var(--texto); }
.cons-inicio-cuenta__estados { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cons-inicio-cuenta__nota { font-size: var(--t-12); color: var(--texto-3); }
a.cons-inicio-cuenta__nota { color: var(--primario-texto); font-weight: 600; }
.cons-inicio-det__link { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin-top: var(--e-2); font-size: var(--t-13); font-weight: 600; text-decoration: none; }
.cons-inicio-det__link:hover { text-decoration: underline; }
.cons-inicio-vacio { padding: var(--e-6) var(--e-4); }
/* --- Salud del servicio --- */
.cons-inicio-regla {
display: flex; align-items: flex-start; gap: var(--e-2); margin-bottom: var(--e-4);
padding: 10px 14px; border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-2);
background: var(--superficie-2); color: var(--texto-2); font-size: var(--t-14);
}
.cons-inicio-regla .ico { flex: none; margin-top: 1px; color: var(--info); }
.cons-inicio-regla strong { color: var(--texto); }
.cons-inicio-servicios { display: grid; gap: var(--e-4); grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Los atrasados van primero y más anchos; los que están al día, de a tres abajo */
.cons-inicio-servicios > .cons-inicio-servicio { grid-column: span 2; }
.cons-inicio-servicios > .cons-inicio-servicio--atrasado { grid-column: span 3; }
@media (max-width: 1023px) {
.cons-inicio-servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cons-inicio-servicios > .cons-inicio-servicio, .cons-inicio-servicios > .cons-inicio-servicio--atrasado { grid-column: auto; }
}
@media (max-width: 767px) {
.cons-inicio-servicios { grid-template-columns: minmax(0, 1fr); }
}
.cons-inicio-servicio { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-4) var(--e-5); }
.cons-inicio-servicio--atrasado { border-color: var(--alerta-borde); box-shadow: inset 0 3px 0 var(--tope-alerta), var(--sombra-1); }
.cons-inicio-servicio__cabecera { display: flex; align-items: center; gap: var(--e-3); margin-bottom: 2px; }
.cons-inicio-servicio__ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--superficie-3); color: var(--texto-2); }
.cons-inicio-servicio--atrasado .cons-inicio-servicio__ico { background: var(--alerta-fondo); color: var(--alerta); }
.cons-inicio-servicio__nombre { flex: 1; min-width: 0; font-size: var(--t-15); font-weight: 600; }
.cons-inicio-servicio__cabecera .estado { flex: none; }
.cons-inicio-servicio__corrio { font-size: var(--t-13); color: var(--texto-3); font-variant-numeric: tabular-nums; }
.cons-inicio-servicio__dato { font-size: var(--t-15); color: var(--texto); }
.cons-inicio-servicio__dato .edad { vertical-align: -2px; }
.cons-inicio-servicio__dato .edad { font-size: var(--t-15); }
.cons-inicio-servicio__lista { margin: 0; padding-left: 1.1em; display: grid; gap: 2px; font-size: var(--t-14); color: var(--texto-2); }
.cons-inicio-servicio__mal { color: var(--alerta); font-weight: 600; }
.cons-inicio-servicio__pie { margin-top: auto; padding-top: var(--e-2); border-top: 1px solid var(--borde); }
.cons-inicio-servicio__pie a, .cons-inicio-motivos a { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-size: var(--t-13); font-weight: 600; text-decoration: none; }
.cons-inicio-servicio__pie a:hover, .cons-inicio-motivos a:hover { text-decoration: underline; }
/* "Ver motivos" (details) */
.cons-inicio-motivos { margin-top: auto; padding-top: var(--e-2); border-top: 1px solid var(--borde); }
.cons-inicio-motivos > summary {
list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 32px;
color: var(--primario-texto); font-size: var(--t-13); font-weight: 600; border-radius: var(--radio-1);
}
.cons-inicio-motivos > summary::-webkit-details-marker { display: none; }
.cons-inicio-motivos > summary:hover { text-decoration: underline; }
.cons-inicio-motivos[open] > summary .expandir__chev { transform: rotate(180deg); }
.cons-inicio-motivos__titulo { font-size: var(--t-12); color: var(--texto-3); font-weight: 600; margin: var(--e-1) 0 var(--e-1); }
.cons-inicio-motivos__lista { list-style: none; margin: 0; padding: 0; font-size: var(--t-14); }
.cons-inicio-motivos__lista li { display: flex; justify-content: space-between; gap: var(--e-3); padding: 6px 0; border-bottom: 1px dashed var(--borde); }
.cons-inicio-motivos__lista strong { font-variant-numeric: tabular-nums; }
/* --- Incidentes recientes --- */
.cons-inicio-incidente {
display: grid; grid-template-columns: 128px minmax(0, 1fr) 210px; gap: var(--e-2) var(--e-5); align-items: start;
padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--borde);
}
.cons-inicio-incidente:last-child { border-bottom: 0; }
.cons-inicio-incidente--resuelto { background: var(--superficie-2); }
.cons-inicio-incidente__sev { padding-top: 1px; }
.cons-inicio-incidente__servicio { font-size: var(--t-13); font-weight: 600; color: var(--texto-2); }
.cons-inicio-incidente__msg { font-size: var(--t-14); color: var(--texto); margin-top: 2px; }
.cons-inicio-incidente__msg .etiqueta { height: 20px; vertical-align: 1px; }
.cons-inicio-incidente__tiempos { margin: 0; display: grid; gap: 4px; font-size: var(--t-13); }
.cons-inicio-incidente__tiempos > div { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); }
.cons-inicio-incidente__tiempos dt { color: var(--texto-3); }
.cons-inicio-incidente__tiempos dd { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; color: var(--texto); }
.cons-inicio-encurso { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--texto); }
.cons-inicio-encurso::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tope-alerta); box-shadow: 0 0 0 3px var(--alerta-fondo); }
/* --- Cuentas con problemas de conexión --- */
.cons-inicio-motivo { display: block; margin-top: 4px; font-weight: 500; }
.cons-inicio-acciones-fila { display: flex; justify-content: flex-end; gap: var(--e-2); }
/* --- Responsive --- */
@media (max-width: 1279px) {
.cons-inicio-cuenta { grid-template-columns: minmax(130px, 1fr) minmax(120px, 1fr) minmax(200px, 1.6fr) minmax(120px, 1fr); }
.cons-inicio-cuenta__estados { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
.cons-inicio-incidente { grid-template-columns: 120px minmax(0, 1fr); }
.cons-inicio-incidente__tiempos { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px var(--e-5); }
.cons-inicio-incidente__tiempos > div { justify-content: flex-start; }
}
@media (max-width: 767px) {
/* Celular: Actualizar y Descargar CSV lado a lado; abajo, el switch y su estado */
.cons-inicio-acciones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-2) var(--e-3); }
.cons-inicio-acciones .auto-actualizar { display: contents; }
.cons-inicio-acciones [data-actualizar] { grid-row: 1; grid-column: 1; }
.cons-inicio-acciones [data-csv] { grid-row: 1; grid-column: 2; }
.cons-inicio-acciones .switch { grid-row: 2; grid-column: 1; min-height: 44px; }
.cons-inicio-acciones .auto-actualizar__estado { grid-row: 2; grid-column: 2; justify-self: end; align-self: center; }
.cons-inicio-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cons-inicio-kpis > .kpi { grid-column: auto; }
.cons-inicio-kpis > .cons-inicio-kpi--monto { grid-column: 1 / -1; }
.cons-inicio-cuenta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--e-3); }
.cons-inicio-cuenta__id, .cons-inicio-cuenta__tope { grid-column: 1 / -1; }
.cons-inicio-cuenta__dato { order: 1; }
.cons-inicio-cuenta__tope { order: 2; }
.cons-inicio-cuenta__estados { order: 3; }
.cons-inicio-incidente { grid-template-columns: minmax(0, 1fr); padding: var(--e-4); }
.cons-inicio-incidente__tiempos { grid-column: auto; }
.cons-inicio-servicio { padding: var(--e-4); }
}
@media (max-width: 640px) {
/* Tabla por operador como tarjetas */
.cons-inicio-tabla td.tarjeta-titulo { padding-right: 0; }
.cons-inicio-op { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; column-gap: var(--e-3); }
.cons-inicio-tabla td.num .celda-sub { text-align: right; }
.cons-inicio-tabla td.acciones { display: block; padding-top: var(--e-2); }
.cons-inicio-tabla td.acciones .btn { width: 100%; justify-content: center; }
.cons-inicio-solo-escritorio { display: none !important; }
.cons-inicio-cuentas { border-radius: var(--radio-2); }
.cons-inicio-det__titulo { padding: 0 2px; }
.cons-inicio-acciones-fila { flex-direction: column; width: 100%; }
.cons-inicio-acciones-fila .btn { width: 100%; justify-content: center; }
}
@media (pointer: coarse) {
.cons-inicio-det__link, .cons-inicio-servicio__pie a, .cons-inicio-motivos a, .cons-inicio-motivos > summary { min-height: 44px; }
}