/* LEGACY ISP: variables de color utilizadas en toda la interfaz. */
:root { --azul:#123c69; --azul2:#1f5f99; --cian:#22a6b3; --fondo:#f3f6fa; --texto:#263544; --borde:#dbe3ec; --blanco:#fff; --rojo:#b42318; --verde:#147d64; }

/* Hace que padding y bordes formen parte del tamaño total de cada elemento. */
* { box-sizing:border-box; }

/* Estilo general del documento. */
body { margin:0; font-family:Arial, Helvetica, sans-serif; color:var(--texto); background:var(--fondo); }

/* Barra lateral fija del panel. */
.sidebar { position:fixed; inset:0 auto 0 0; width:230px; padding:28px 18px; background:linear-gradient(180deg,#0c2d50,#123c69); color:white; display:flex; flex-direction:column; }

/* Colores y tamaño del nombre LEGACY ISP. */
.marca { font-size:24px; font-weight:800; letter-spacing:1px; color:inherit; }
.marca span { color:#45d6dc; }
.marca.grande { font-size:34px; }

/* Navegación vertical. */
nav { margin-top:35px; display:grid; gap:8px; }
nav a,.salir { padding:12px 14px; color:#dceafb; text-decoration:none; border-radius:8px; }
nav a:hover,nav a.activo { background:rgba(255,255,255,.14); color:#fff; }
.salir { margin-top:auto; border:1px solid rgba(255,255,255,.25); text-align:center; }

/* Árbol del menú Clientes y segundo nivel de Servicios adicionales. */
.menu-arbol { margin:0; }
.menu-arbol>summary { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:8px; color:#dceafb; list-style:none; cursor:pointer; }
.menu-arbol>summary::-webkit-details-marker { display:none; }
.menu-arbol>summary:hover,.menu-arbol>summary.activo { background:rgba(255,255,255,.14); color:white; }
.menu-arbol>summary b { color:#45d6dc; font-size:14px; transition:transform .2s ease; }
.menu-arbol[open]>summary b { transform:rotate(180deg); }
.submenu { display:grid; gap:3px; margin:5px 0 3px 10px; padding-left:9px; border-left:1px solid rgba(255,255,255,.16); }
.submenu a { padding:9px 11px; font-size:13px; }
.menu-arbol-nivel2 { margin-top:2px; }
.menu-arbol-nivel2>summary { padding:9px 11px; font-size:13px; }
.submenu-nivel2 { margin-left:12px; }

/* Contenedor a la derecha de la barra lateral. */
.contenido { margin-left:230px; padding:28px; min-height:100vh; }

/* Encabezado de cada módulo. */
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
h1,h2,h3,p { margin-top:0; }
.topbar h1 { margin-bottom:4px; color:var(--azul); }
.topbar p { color:#718096; margin-bottom:0; }
.usuario { background:white; border:1px solid var(--borde); padding:10px 14px; border-radius:10px; }

/* Tarjetas de cifras del dashboard. */
.tarjetas { display:grid; grid-template-columns:repeat(5,minmax(145px,1fr)); gap:15px; margin-bottom:20px; }
.tarjetas article { background:white; border:1px solid var(--borde); border-radius:12px; padding:20px; border-top:4px solid var(--cian); }
.tarjetas span { display:block; color:#718096; font-size:13px; margin-bottom:12px; }
.tarjetas strong { font-size:23px; color:var(--azul); }

/* Paneles blancos que agrupan formularios y tablas. */
.panel,.documento { background:white; border:1px solid var(--borde); border-radius:12px; padding:22px; box-shadow:0 5px 18px rgba(18,60,105,.05); }
.panel h2 { color:var(--azul); font-size:19px; }
.bienvenida { max-width:900px; }
.nota { background:#eaf8f8; border-left:4px solid var(--cian); padding:14px; }

/* Distribución del formulario y listado en dos columnas. */
.dos-columnas { display:grid; grid-template-columns:minmax(290px,380px) minmax(500px,1fr); gap:20px; align-items:start; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.form-grid .completo { grid-column:1 / -1; }
.form-grid label { font-size:13px; font-weight:bold; color:#506174; }

/* Controles de entrada de datos. */
input,select,textarea,button,.boton { width:100%; margin-top:6px; padding:10px 11px; border:1px solid #c8d3df; border-radius:7px; font:inherit; }
textarea { min-height:75px; resize:vertical; }
input:focus,select:focus,textarea:focus { outline:2px solid rgba(34,166,179,.22); border-color:var(--cian); }
button,.boton { border:0; background:var(--azul2); color:white; font-weight:bold; cursor:pointer; text-decoration:none; text-align:center; display:inline-block; }
button:hover,.boton:hover { background:var(--azul); }
.secundario { background:#6b7c8d; }
hr { border:0; border-top:1px solid var(--borde); margin:25px 0; }

/* Tablas adaptables para los listados. */
.tabla-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { padding:12px 10px; border-bottom:1px solid var(--borde); text-align:left; vertical-align:middle; }
th { background:#eef4f9; color:var(--azul); font-size:12px; text-transform:uppercase; }
tr:hover td { background:#fafcfe; }
small { color:#718096; }
.link { color:var(--azul2); font-weight:bold; text-decoration:none; margin-right:8px; }

/* Etiquetas visuales para estados de registros. */
.estado { display:inline-block; padding:5px 8px; border-radius:999px; background:#e8edf2; font-size:12px; white-space:nowrap; }
.estado.act,.estado.pag,.estado.alm { background:#dcf5ec; color:var(--verde); }
.estado.pen,.estado.rep { background:#fff4d6; color:#8a6100; }
.estado.sus,.estado.ven,.estado.anu,.estado.baj,.estado.cor { background:#fee4e2; color:var(--rojo); }

/* Mensajes temporales de éxito y error. */
.alerta { padding:13px 16px; border-radius:8px; margin-bottom:18px; background:#dcf5ec; color:var(--verde); }
.alerta.error { background:#fee4e2; color:var(--rojo); }

/* Formulario pequeño que aparece dentro de la tabla de facturas. */
details { margin-top:8px; }
summary { cursor:pointer; color:var(--azul2); font-weight:bold; }
.pago-mini { display:grid; grid-template-columns:1fr 1fr; gap:6px; min-width:230px; }
.pago-mini button { grid-column:1 / -1; }

/* Distribución de los formularios de usuarios y permisos. */
.usuarios-layout>div { display:grid; gap:20px; }
.catalogos label { display:block; margin-top:12px; font-size:13px; font-weight:bold; }
.editar-usuario { display:grid; grid-template-columns:1fr 1fr 1.3fr auto; gap:7px; align-items:end; }
.editar-usuario input,.editar-usuario select,.editar-usuario button { margin:0; min-width:120px; }
.selector-rol { max-width:320px; margin-bottom:18px; }
.selector-rol label { font-size:13px; font-weight:bold; }
.lista-permisos { display:grid; grid-template-columns:repeat(2,minmax(220px,1fr)); gap:10px; margin-bottom:16px; }
.lista-permisos label { display:flex; align-items:flex-start; gap:9px; border:1px solid var(--borde); border-radius:8px; padding:11px; cursor:pointer; }
.lista-permisos input { width:auto; margin:3px 0 0; }
.lista-permisos span,.lista-permisos small { display:block; }
.lista-permisos small { margin-top:4px; }

/* Formato de factura y contrato imprimibles. */
.acciones-print { display:flex; justify-content:flex-end; gap:10px; margin-bottom:15px; }
.acciones-print button,.acciones-print .boton { width:auto; margin:0; padding:10px 18px; }
.documento { max-width:900px; margin:auto; padding:42px; }
.doc-cabecera,.doc-datos { display:flex; justify-content:space-between; gap:30px; }
.doc-cabecera>div:last-child { text-align:right; font-size:18px; }
.doc-datos p:last-child { text-align:right; }
.totales { margin-left:auto; max-width:280px; margin-top:20px; }
.totales p { display:flex; justify-content:space-between; border-bottom:1px solid var(--borde); padding:8px; }
.totales .total { font-size:19px; color:var(--azul); }
.contrato { line-height:1.7; }
.contrato h2,.centrado { text-align:center; }
.firmas { display:flex; justify-content:space-around; text-align:center; margin-top:80px; }
.encabezado-print { display:flex; justify-content:space-between; }
.reporte h2 { margin-top:28px; }

/* Pantalla independiente para iniciar sesión. */
.login-body { min-height:100vh; display:grid; place-items:center; background:linear-gradient(135deg,#0c2d50,#1f5f99); padding:20px; }
.login-card { width:min(420px,100%); background:white; padding:38px; border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.25); }
.login-card .marca { color:var(--azul); text-align:center; }
.login-card .subtitulo { color:#718096; text-align:center; margin:8px 0 26px; }
.login-card label { display:block; margin-top:14px; font-weight:bold; font-size:13px; }
.login-card button { margin:20px 0 12px; }
.login-card small { display:block; text-align:center; }

/* Presentación del módulo que administra varios routers y nodos. */
.cabecera-modulo { display:grid; gap:18px; }
.nuevo-router summary { color:var(--verde); margin-bottom:16px; }
.router-form { border-top:1px solid var(--borde); padding-top:18px; }
.acciones-form { display:flex; flex-wrap:wrap; gap:10px; }
.acciones-form button { width:auto; }
.tabla-scroll { overflow-x:auto; }
.estado.router-on { background:#dcf5ec; color:var(--verde); }
.estado.router-off { background:#fee4e2; color:var(--rojo); }
.estado.router-nuevo { background:#e8edf2; color:#52606d; }
button.pequeno { width:auto; padding:8px 12px; font-size:12px; }
.boton.pequeno { width:auto; margin:0; padding:8px 12px; font-size:12px; }.acciones-crud { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }.acciones-crud form { margin:0; }.acciones-crud button { margin:0; }.boton.editar { background:#14a4d8; }.boton-gris { width:auto; margin:0; background:#64748b; }.boton-gris:hover { background:#475569; }button.peligro { background:#e84855; }button.peligro:hover { background:#c92f3d; }.editor-router { border-top:4px solid #14a4d8; }

/* El plan avanzado separa los conceptos para reducir errores de configuración. */
.plan-avanzado .grupo-plan { padding:10px 12px; background:#eef6fb; border-radius:8px; color:var(--azul); }
.plan-avanzado .grupo-plan strong,.plan-avanzado .grupo-plan small { display:block; }
.plan-avanzado .grupo-plan small { margin-top:4px; font-weight:normal; }
.configuracion-avanzada { border:1px solid var(--borde); border-radius:8px; padding:12px; }
.configuracion-avanzada summary { margin-bottom:12px; }
.catalogo-planes { margin-top:20px; }
.catalogo-planes code { display:block; min-width:310px; white-space:normal; background:#112b46; color:#eaf8f8; padding:9px; border-radius:6px; font-size:11px; }

/* Presentación inicial de rutas listas para desarrollarse en próximas etapas. */
.modulo-preparado { max-width:820px; min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:35px auto; text-align:center; background:linear-gradient(145deg,#fff,#f0f9ff); }
.modulo-preparado .modulo-icono { display:grid; width:72px; height:72px; margin-bottom:18px; place-items:center; border-radius:22px; color:white; background:linear-gradient(135deg,#1f75b5,#16a394); font-size:32px; box-shadow:0 12px 25px rgba(31,117,181,.22); }
.modulo-preparado h2 { margin:7px 0 10px; font-size:27px; }
.modulo-preparado>p { max-width:610px; color:#64748b; line-height:1.6; }
.nota-etapa { max-width:620px; margin-top:12px; padding:13px 16px; border-radius:10px; background:#e6f7f4; color:#147d64; font-size:13px; }
.cliente-contexto { display:grid; gap:4px; min-width:min(100%,430px); margin:8px 0; padding:14px 18px; border:1px solid #d6e7f1; border-radius:12px; background:white; text-align:left; box-shadow:0 5px 15px rgba(18,60,105,.06); }.cliente-contexto span { color:#16a394; font-size:10px; font-weight:800; text-transform:uppercase; }.cliente-contexto strong { color:#173f68; }.cliente-contexto small { color:#77879a; }.volver-clientes { width:auto; margin-top:15px; }

/* Dashboard ejecutivo: colores consistentes, buena lectura y adaptación móvil. */
.portada-dashboard { margin-bottom:18px; padding:18px 22px; border-radius:14px; background:white; border:1px solid var(--borde); box-shadow:0 6px 20px rgba(18,60,105,.06); }
.titulo-dashboard { display:flex; align-items:center; gap:13px; }.titulo-dashboard h2 { margin:0 0 3px; color:#173f68; font-size:25px; }.titulo-dashboard p { margin:0; color:#8492a6; font-size:12px; }
.icono-dashboard { display:grid; width:46px; height:46px; place-items:center; border-radius:14px; color:white; background:linear-gradient(135deg,#20bf75,#12a4b5); font-size:23px; }
.resumen-operativo { display:grid; grid-template-columns:repeat(3,minmax(240px,1fr)); gap:22px; margin-bottom:20px; }
.grupo-resumen h3 { display:flex; align-items:center; gap:8px; margin:0 0 10px; color:#263544; font-size:17px; }.grupo-icono { display:grid; width:32px; height:32px; place-items:center; border-radius:10px; color:white; font-size:17px; box-shadow:0 6px 13px rgba(20,50,80,.16); }.grupo-icono.verde { background:linear-gradient(135deg,#28c979,#13965b); }.grupo-icono.celeste { background:linear-gradient(135deg,#22bfee,#087fc4); }.grupo-icono.morado { background:linear-gradient(135deg,#9a7bff,#6245cf); }
.fila-resumen { display:flex; align-items:center; justify-content:space-between; min-height:74px; margin-bottom:9px; padding:12px 14px; border:1px solid #d9e2ec; border-left:5px solid currentColor; border-radius:9px; background:white; box-shadow:0 4px 12px rgba(18,60,105,.045); transition:transform .18s ease,box-shadow .18s ease; }.fila-resumen:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(18,60,105,.10); }
.fila-resumen strong,.fila-resumen small { display:block; }.fila-resumen strong { color:currentColor; font-size:21px; }.fila-resumen small { margin-top:5px; color:#68798b; font-size:10px; font-weight:bold; }.fila-icono { display:grid; width:42px; height:42px; place-items:center; border-radius:13px; color:white; font-size:20px; box-shadow:0 7px 15px rgba(30,60,90,.14); }.fondo-verde { background:linear-gradient(135deg,#2dd27e,#14a862); }.fondo-naranja { background:linear-gradient(135deg,#ffbd42,#f08213); }.fondo-celeste { background:linear-gradient(135deg,#2ec8f3,#078ed0); }.fondo-rojo { background:linear-gradient(135deg,#ff7180,#e83a4a); }
.color-verde { color:#20b968; }.color-naranja { color:#f59d19; }.color-celeste { color:#09a9df; }.color-rojo { color:#ef4b54; }
.bloque-trafico { padding:19px 20px; }.encabezado-trafico { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:14px; }.encabezado-trafico h3 { margin:0 0 3px; }.encabezado-trafico small { color:#8492a6; }.controles-trafico { display:flex; align-items:center; gap:10px; }.controles-trafico select { width:auto; min-width:190px; padding:7px 30px 7px 10px; }
.trafico-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.trafico-item { display:flex; align-items:center; justify-content:space-between; min-height:82px; padding:15px 18px; border-radius:11px; background:#f8fbfd; border:1px solid #dbe5ee; }.trafico-item>span { font-size:30px; }.trafico-item div { text-align:right; }.trafico-item strong,.trafico-item small { display:block; }.trafico-item strong { font-size:22px; color:#0aa8df; }.trafico-item small { margin-top:5px; font-size:10px; color:#64748b; }.trafico-item.descarga>span { color:#09a9df; }.trafico-item.subida>span { color:#f59d19; }
.detalle-trafico-routers { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:8px; margin-top:10px; }.router-trafico { display:flex; align-items:center; gap:9px; min-width:0; padding:8px 11px; border:1px solid #e1e8ef; border-radius:9px; background:#fff; }.router-trafico>i { width:9px; height:9px; border-radius:50%; background:#f59d19; box-shadow:0 0 0 3px #fff0d7; }.router-trafico.en-linea>i { background:#22b973; box-shadow:0 0 0 3px #dcf7eb; }.router-trafico>span { min-width:0; flex:1; }.router-trafico b,.router-trafico small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.router-trafico b { color:#183b5d; font-size:12px; }.router-trafico small { color:#8795a7; font-size:9px; }.router-trafico>strong { color:#4f6275; font-size:11px; white-space:nowrap; }
.grafica-operacion { margin-top:20px; padding:17px 20px 12px; }.cabecera-grafica-operacion { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:6px; }.cabecera-grafica-operacion>div { display:flex; align-items:center; gap:11px; }.cabecera-grafica-operacion h3 { margin:0 0 3px; }.cabecera-grafica-operacion small { color:#8190a2; }.icono-seccion { display:grid; width:42px; height:42px; place-items:center; border-radius:13px; background:linear-gradient(135deg,#7658e6,#23a9e1); font-size:22px; box-shadow:0 8px 18px rgba(104,79,216,.22); }.grafica-operacion canvas { display:block; width:100%; max-width:100%; height:220px !important; min-height:0; }.leyenda-financiera { display:flex; gap:14px; color:#607286; font-size:11px; }.leyenda-financiera span { display:flex; align-items:center; gap:6px; }.punto-ingreso,.punto-gasto { width:10px; height:10px; border-radius:3px; }.punto-ingreso { background:#1fa774; }.punto-gasto { background:#e87817; }.aviso-gastos { margin:2px 0 0; color:#a66a12; font-size:10px; text-align:center; }
.dashboard-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; padding:24px 28px; border-radius:18px; color:white; background:linear-gradient(120deg,#123c69 0%,#176b87 55%,#19a998 100%); box-shadow:0 14px 34px rgba(17,60,105,.18); }

/* Lista de clientes: cabecera, filtros y barra operativa inspirada en un NOC. */
.clientes-cabecera { display:flex; align-items:flex-start; justify-content:space-between; gap:25px; margin-bottom:16px; padding:22px 24px; border-radius:16px; color:white; background:linear-gradient(120deg,#123c69,#176f91 58%,#17a68e); box-shadow:0 12px 28px rgba(18,60,105,.15); }.clientes-cabecera h2 { margin:4px 0; color:white; font-size:26px; }.clientes-cabecera p { margin:0; color:#d9f4f3; }.clientes-cabecera .eyebrow { color:#8ff0dc; }.nuevo-cliente { width:min(700px,58%); }.nuevo-cliente>summary { padding:11px 15px; border-radius:9px; background:#25bf79; color:white; font-weight:bold; text-align:center; cursor:pointer; list-style:none; }.nuevo-cliente[open] { padding:17px; border-radius:12px; background:white; color:#263544; }.nuevo-cliente[open]>summary { margin-bottom:15px; }.cliente-editor { margin-bottom:16px; border-top:4px solid #16a394; }.clientes-operacion { padding:0; overflow:hidden; }.filtros-clientes { display:grid; grid-template-columns:minmax(260px,2fr) minmax(150px,1fr) auto auto; gap:10px; align-items:end; padding:16px 18px; background:#f8fbfd; border-bottom:1px solid var(--borde); }.filtros-clientes label { color:#536579; font-size:12px; font-weight:bold; }.filtros-clientes button,.filtros-clientes .boton { width:auto; min-width:95px; margin-top:6px; }
.barra-acciones-clientes { display:flex; align-items:stretch; gap:6px; padding:11px 14px; overflow-x:auto; border-bottom:1px solid var(--borde); background:white; }.accion-cliente { display:inline-flex; flex:0 0 auto; align-items:center; gap:6px; width:auto; min-height:39px; margin:0; padding:9px 11px; border:0; border-radius:8px; color:white; background:#1688bd; font-size:12px; font-weight:bold; text-decoration:none; box-shadow:0 3px 8px rgba(20,60,90,.12); }.accion-cliente:hover { filter:brightness(.94); transform:translateY(-1px); }.accion-cliente.ayuda,.accion-cliente.activar { background:#20a96b; }.accion-cliente.factura { background:#6b55d9; }.accion-cliente.desactivar { background:#ee8a18; }.accion-cliente.editar-cliente { background:#1688bd; }.accion-cliente.ticket { background:#e65462; }.accion-cliente.trafico { background:#0aa8df; }.accion-cliente.ping { background:#18a88e; }.accion-cliente.onu { background:#64748b; }.accion-cliente.television { background:#7c55d9; }.accion-cliente.telefonia { background:#17a875; }.accion-cliente.herramientas { background:#344f6d; }.accion-cliente.ia { background:linear-gradient(135deg,#6d4be7,#c246d4); }.seleccion-cliente { display:flex; justify-content:space-between; gap:15px; padding:9px 18px; color:#617286; background:#f5f8fb; font-size:11px; }.seleccion-cliente strong { color:#17836c; }.tabla-clientes tbody tr { cursor:pointer; }.tabla-clientes tbody tr.seleccionada td { background:#dcecff; }.tabla-clientes input[type=radio] { width:auto; margin:0; accent-color:#1688bd; }.contador-ticket { display:inline-grid; min-width:25px; min-height:25px; place-items:center; border-radius:999px; color:#6b55d9; background:#eeeaff; font-size:11px; font-weight:bold; }
.dashboard-hero h2 { margin:4px 0; font-size:28px; color:white; }
.dashboard-hero p { margin:0; color:#d9f6f4; }
.eyebrow { display:block; color:#16a394; font-size:11px; font-weight:800; letter-spacing:.12em; }
.dashboard-hero .eyebrow { color:#a7f3e9; }
.filtro-anio { min-width:130px; }
.filtro-anio label { color:white; font-size:12px; font-weight:bold; }
.filtro-anio select { background:rgba(255,255,255,.96); color:#123c69; }
.kpi-grid { display:grid; grid-template-columns:repeat(3,minmax(210px,1fr)); gap:15px; margin-bottom:18px; }
.kpi { position:relative; display:flex; align-items:center; gap:14px; min-height:112px; padding:18px; overflow:hidden; border:1px solid var(--borde); border-radius:16px; background:white; box-shadow:0 7px 22px rgba(18,60,105,.07); }
.kpi::after { content:""; position:absolute; right:-25px; bottom:-34px; width:90px; height:90px; border-radius:50%; background:currentColor; opacity:.08; }
.kpi-icono { display:grid; flex:0 0 46px; height:46px; place-items:center; border-radius:13px; color:white; background:currentColor; font-size:20px; }
.kpi div { min-width:0; }.kpi small,.kpi strong,.kpi em { display:block; }.kpi small { color:#64748b; font-weight:700; }.kpi strong { margin:5px 0 3px; color:#102f50; font-size:23px; }.kpi em { color:#94a3b8; font-size:11px; font-style:normal; }
.kpi-verde { color:#10b981; }.kpi-rojo { color:#ef4444; }.kpi-morado { color:#7c3aed; }.kpi-naranja { color:#f59e0b; }.kpi-azul { color:#2684d8; }.kpi-amarillo { color:#eab308; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(300px,1fr); gap:18px; align-items:start; }
.grafica-card { min-width:0; padding:20px; }.grafica-ancha { grid-column:auto; }
.grafica-titulo { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; }.grafica-titulo h2 { margin:4px 0 0; }.grafica-titulo p { margin:4px 0 0; color:#64748b; }
.grafica-card canvas { display:block; width:100%; max-width:100%; }
.leyenda { display:flex; flex-wrap:wrap; gap:12px; color:#64748b; font-size:12px; }.leyenda span { white-space:nowrap; }.punto { display:inline-block; width:9px; height:9px; margin-right:5px; border-radius:50%; }.punto.verde { background:#10b981; }.punto.rojo { background:#ef4444; }
.chip { display:inline-block; padding:6px 10px; border-radius:999px; background:#e8f5ff; color:#2472ad; font-size:11px; font-weight:700; white-space:nowrap; }
.ayuda-grafica { margin:8px 0 0; color:#8492a6; font-size:11px; }
.registrar-gasto h2 { margin:5px 0; }.registrar-gasto>p { color:#64748b; font-size:13px; }

/* Catálogo independiente de planes, inspirado en una navegación por tecnologías. */
.planes-encabezado { display:flex; justify-content:space-between; gap:25px; margin-bottom:16px; padding:24px; border-radius:16px; color:white; background:linear-gradient(120deg,#183b66,#256fa4); }
.planes-encabezado h2 { margin:5px 0; color:white; font-size:27px; }.planes-encabezado p { margin:0; color:#d9ecfa; }.planes-encabezado .eyebrow { color:#6ee7d4; }
.nuevo-plan { width:min(760px,60%); margin:0; }.nuevo-plan>summary { padding:11px 16px; border-radius:9px; background:#13a889; color:white; text-align:center; }.nuevo-plan[open] { padding:18px; border-radius:12px; background:white; color:#243b53; }.nuevo-plan[open]>summary { margin-bottom:16px; }
.tabs-planes { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }.tabs-planes a { padding:10px 16px; border:1px solid #d8e3ed; border-radius:9px; background:white; color:#52657a; font-weight:bold; text-decoration:none; }.tabs-planes a.activo { border-color:#16a394; color:white; background:#16a394; }

@media (min-width:1400px) { .kpi-grid { grid-template-columns:repeat(6,1fr); }.kpi { min-width:0; }.kpi strong { font-size:19px; } }

/* Ajustes para pantallas medianas. */
@media (max-width:1100px) { .tarjetas,.kpi-grid,.resumen-operativo { grid-template-columns:repeat(2,1fr); } .dos-columnas,.dashboard-grid { grid-template-columns:1fr; } .nuevo-plan { width:65%; }.clientes-cabecera { flex-direction:column; }.nuevo-cliente { width:100%; }.filtros-clientes { grid-template-columns:1fr 1fr; } }

/* Ajustes para teléfonos y tabletas pequeñas. */
@media (max-width:700px) { .sidebar { position:static; width:100%; } nav { grid-template-columns:1fr 1fr; margin:18px 0; } .salir { margin-top:10px; display:block; } .contenido { margin-left:0; padding:16px; } .topbar,.dashboard-hero,.planes-encabezado,.encabezado-trafico,.cabecera-grafica-operacion { align-items:flex-start; flex-direction:column; gap:15px; } .tarjetas,.kpi-grid,.resumen-operativo,.trafico-grid { grid-template-columns:1fr; } .dashboard-hero,.planes-encabezado { padding:20px; }.filtro-anio,.nuevo-plan { width:100%; }.form-grid,.filtros-clientes { grid-template-columns:1fr; } .form-grid .completo { grid-column:auto; } .doc-datos,.doc-cabecera,.firmas { flex-direction:column; } .editar-usuario,.lista-permisos { grid-template-columns:1fr; }.accion-cliente span { display:none; }.accion-cliente { font-size:17px; } }

/* Reglas especiales para imprimir facturas, contratos y reportes. */
@media print { body { background:white; } .no-print,.sidebar { display:none !important; } .contenido { margin:0; padding:0; } .documento,.panel { border:0; box-shadow:none; max-width:none; } table { page-break-inside:auto; } tr { page-break-inside:avoid; } }