/* Estado del servidor: resumen y gráficos en SVG (los colores salen del tema día/noche). */
.resumen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 6px 0 10px; }
.dato { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid rgb(var(--bo)); border-radius: 10px; background: rgb(var(--bga)); }
.dato-n { font-size: 28px; font-weight: 700; line-height: 1.1; }
.dato-t { color: rgb(var(--td)); font-size: 13px; }

.grafico { width: 100%; height: auto; display: block; }
.g-grilla { stroke: rgb(var(--bo)); stroke-width: 1; }
.g-texto { fill: rgb(var(--td)); font-size: 11px; font-family: inherit; }
.g-linea { fill: none; stroke: rgb(var(--ac)); stroke-width: 2; stroke-linejoin: round; }
.g-area { fill: rgb(var(--ac) / .22); stroke: none; }
.g-punto { fill: rgb(var(--ac)); }
.g-caida { stroke: rgb(var(--err)); stroke-width: 1; stroke-dasharray: 3 3; }
.g-barra { fill: rgb(var(--ac)); }
.g-barra:hover { filter: brightness(1.2); }
.g-hoy { fill: rgb(var(--ok)); }

/* Salud del sistema */
.barra-disco { width: 100%; height: 22px; border-radius: 999px; border: 1px solid rgb(var(--bo)); background: rgb(var(--bga)); overflow: hidden; accent-color: rgb(var(--ok)); }
.barra-disco::-webkit-progress-bar { background: rgb(var(--bga)); }
.barra-disco::-webkit-progress-value { background: rgb(var(--ok)); }
.barra-disco::-moz-progress-bar { background: rgb(var(--ok)); }
.barra-disco.nivel-aviso { accent-color: rgb(var(--warn)); }
.barra-disco.nivel-aviso::-webkit-progress-value { background: rgb(var(--warn)); }
.barra-disco.nivel-aviso::-moz-progress-bar { background: rgb(var(--warn)); }
.barra-disco.nivel-critico { accent-color: rgb(var(--err)); }
.barra-disco.nivel-critico::-webkit-progress-value { background: rgb(var(--err)); }
.barra-disco.nivel-critico::-moz-progress-bar { background: rgb(var(--err)); }
.tag-cat.estado-ok { border-color: rgb(var(--ok)); }
.tag-cat.estado-aviso { border-color: rgb(var(--warn)); }
.tag-cat.estado-critico, .tag-cat.estado-mal { border-color: rgb(var(--err)); background: rgb(var(--err) / .15); }

/* Soporte: estados y conversación */
.tag-cat.tk-abierto { border-color: rgb(var(--warn)); }
.tag-cat.tk-en_curso { border-color: rgb(var(--ac)); background: rgb(var(--ac) / .18); }
.tag-cat.tk-resuelto { border-color: rgb(var(--ok)); background: rgb(var(--ok) / .15); }
.tag-cat.tk-cerrado { color: rgb(var(--td)); }
.tabla-tickets td { vertical-align: top; }
.tabla-tickets td:first-child { width: 48px; }
.tk-gestion { display: grid; gap: 14px; }
.tk-hilo { display: grid; gap: 12px; margin-bottom: 16px; }
.tk-msg { padding: 10px 14px; border: 1px solid rgb(var(--bo)); border-radius: 10px; background: rgb(var(--bga)); }
.tk-msg.de-staff { border-left: 4px solid rgb(var(--ac)); }
.tk-msg.interno { border-style: dashed; border-color: rgb(var(--warn)); background: rgb(var(--warn) / .08); }
.tk-msg-cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.tk-msg-cab small, .tk-sistema small { color: rgb(var(--td)); }
.tk-sistema { text-align: center; color: rgb(var(--td)); font-size: 13px; padding: 2px 0; }

/* Archivos del staff */
.uso-archivos { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.uso-archivos .barra-disco { flex: 1; min-width: 160px; max-width: 420px; height: 14px; }
.tabla-archivos td { vertical-align: top; }
.arch-ico { font-size: 18px; margin-right: 4px; }
.acciones-celda { white-space: nowrap; }
.acciones-celda .btn-chico { margin: 2px 2px 2px 0; text-decoration: none; }
.subidas { display: grid; gap: 8px; margin-top: 12px; }
.subida { display: grid; gap: 4px; padding: 8px 12px; border: 1px solid rgb(var(--bo)); border-radius: 8px; background: rgb(var(--bga)); }
.subida.ok { border-color: rgb(var(--ok)); }
.subida.mal { border-color: rgb(var(--err)); }
.subida progress { width: 100%; height: 10px; accent-color: rgb(var(--ac)); }
.subida-nombre { font-weight: 600; overflow-wrap: anywhere; }
.subida-estado { overflow-wrap: anywhere; margin: 0; }

/* Tramos estimados (falla de conectividad del proveedor): punteados y más suaves que los datos reales */
.g-linea-est { stroke-dasharray: 6 5; opacity: .85; }
.g-area-est { fill: rgb(var(--warn) / .12); }
.g-est { opacity: .7; }
.aviso-estimado { border-left: 4px solid rgb(var(--warn)); background: rgb(var(--warn) / .10); padding: 10px 14px; border-radius: 8px; margin: 0 0 12px; font-size: 14px; }