/* ============================================================================= VELCOM Intranet — sistema visual ----------------------------------------------------------------------------- Misma estructura de siempre (barra bordó arriba, tarjetas, fondo claro), pero ejecutada con más cuidado: una sola familia tipográfica, una escala de espaciado de 4px, bordes de 1px en vez de sombras pesadas y el bordó reservado para lo que se puede accionar. Los números van con cifras tabulares en TODAS las tablas: sin eso las columnas se mueven cuando cambian los valores y un reporte se vuelve incómodo de leer. ============================================================================= */ :root{ --fondo:#f5f6f8; --panel:#ffffff; --borde:#e6e8ec; --borde-fuerte:#d3d8df; --texto:#171a1f; --suave:#5b6472; --tenue:#69727e; --bordo:#7a1226; --bordo-osc:#5f0e1e; --bordo-tinte:#f9eff1; --ok:#166534; --ok-tinte:#eaf6ee; --alerta:#8a5a06; --alerta-tinte:#fdf3e2; --grave:#b3261e; --grave-tinte:#fdeeed; --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --r-chico:6px; --r:8px; --r-grande:12px; --sombra:0 1px 2px rgba(16,24,40,.04); --sombra-alta:0 4px 14px rgba(16,24,40,.07); --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:28px; --e7:40px; /* Un color fijo por cuadrilla (por orden: cuadrilla 1..6), para el gráfico agrupado, las fichas y la leyenda (METCUAD_v1 → REP_v3). Tonos apagados de la misma familia del resto de la hoja: distinguibles entre sí sin que ninguno grite más que otro (el color no puede insinuar un ranking). Viven en ESTE bloque :root y no más abajo porque pdf_export._paleta() lee sólo el primero: hasta REP_v3 el PDF de cuadrillas pintaba las barras negras (var(--cuadN) sin resolver). */ --cuad1:#7a1226; /* bordo de la casa */ --cuad2:#2b5d8a; /* azul petroleo */ --cuad3:#3e7a52; /* verde apagado */ --cuad4:#b07d2b; /* ocre */ --cuad5:#6b4c9a; /* violeta apagado (5ta cuadrilla, si la hubiera) */ --cuad6:#5b6472; /* gris (6ta) */ } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ background:var(--fondo);color:var(--texto); font:15px/1.55 var(--sans); font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; } a{color:var(--bordo);text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:2px} /* El foco nunca se saca: se lo hace bien visible. */ :focus-visible{outline:2px solid var(--bordo);outline-offset:2px;border-radius:var(--r-chico)} /* ── barra superior ───────────────────────────────────────────────────────── */ /* El contenido de la barra se alinea con el de la página en vez de pegarse a los bordes de la pantalla: en un monitor ancho, un logo en el extremo izquierdo y un nombre en el derecho se leen como dos cosas sueltas. */ .barra{ background:var(--bordo);color:#fff; display:flex;align-items:center;gap:var(--e5); padding:0 max(var(--e5), calc((100% - 1160px) / 2)); height:58px; position:sticky;top:0;z-index:20; } .marca{display:flex;align-items:baseline;gap:7px;color:#fff;padding:10px 0} .marca:hover{text-decoration:none;opacity:.9} .marca b{font-size:17px;font-weight:600;letter-spacing:.01em} .marca span{font-size:13px;font-weight:400;color:rgba(255,255,255,.62)} .barra nav{display:flex;gap:var(--e1);flex:1;margin-left:var(--e3)} .barra nav a{ color:rgba(255,255,255,.82);font-size:13.5px;font-weight:500; padding:7px 13px;border-radius:var(--r); transition:background .15s ease,color .15s ease; } .barra nav a:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none} .barra nav a.acti{background:rgba(255,255,255,.17);color:#fff} .yo{display:flex;align-items:center;gap:var(--e2);font-size:13.5px; color:rgba(255,255,255,.85);white-space:nowrap} /* "Salir" se usa todos los días: necesita área de clic, no ser sólo texto. */ .yo a{color:rgba(255,255,255,.85);font-size:13px;padding:8px 11px; border-radius:var(--r);transition:background .15s ease,color .15s ease} .yo a:hover{color:#fff;background:rgba(255,255,255,.12);text-decoration:none} /* ── página ───────────────────────────────────────────────────────────────── */ main{max-width:1160px;margin:0 auto;padding:var(--e6) var(--e5) var(--e7)} .encabezado{margin-bottom:var(--e6)} h1{font-size:25px;font-weight:600;letter-spacing:-.02em;line-height:1.25} .miga{font-size:13px;color:var(--tenue);margin-bottom:var(--e2)} .miga a{color:var(--tenue);display:inline-block;padding:4px 0} .bajada{color:var(--suave);font-size:14.5px;margin-top:var(--e2);max-width:64ch} h2{font-size:16px;font-weight:600;letter-spacing:-.01em} .rotulo{display:block;font-size:11.5px;font-weight:600;letter-spacing:.07em; text-transform:uppercase;color:var(--tenue);margin-bottom:var(--e3)} /* ── tarjetas de sección ──────────────────────────────────────────────────── */ .tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:var(--e4)} .tarjeta{ background:var(--panel);border:1px solid var(--borde);border-radius:var(--r-grande); padding:var(--e5);color:inherit;display:block;box-shadow:var(--sombra); transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease; } .tarjeta:hover{text-decoration:none;border-color:var(--bordo); box-shadow:var(--sombra-alta);transform:translateY(-1px)} .tarjeta h3{font-size:15.5px;font-weight:600;margin-bottom:var(--e2); display:flex;align-items:center;justify-content:flex-start;gap:var(--e2)} .tarjeta h3 .flecha{margin-left:auto;color:var(--borde-fuerte);transition:color .15s ease,transform .15s ease} .tarjeta:hover h3 .flecha{color:var(--bordo);transform:translateX(2px)} /* ICONOS_v1 — icono de las tarjetas de los hubs. Criterio unico para que se lean como familia y no como adornos sueltos: (1) un solo emoji por tarjeta, siempre un OBJETO plano que nombra el trabajo de esa pantalla (telefono, ticket, calendario...), nunca caras ni gestos: acompanan el minimalismo bordo sin gritar; (2) mismo tamano para todos; (3) caja de ancho fijo al inicio del h3, asi todos los titulos arrancan en la misma columna y la alineacion no depende del ancho del emoji. */ .tarjeta h3 .icono{flex:0 0 24px;width:24px;font-size:17px;line-height:1} .tarjeta p{font-size:13.5px;color:var(--suave);line-height:1.5} .tarjeta.proximo{cursor:default;background:var(--sutil);border-style:dashed} .tarjeta.proximo:hover{border-color:var(--borde);box-shadow:var(--sombra); transform:none} .tarjeta.proximo h3{color:var(--suave)} .tarjeta.proximo p{color:var(--tenue)} /* ── paneles (tablas y formularios) ───────────────────────────────────────── */ .panel{background:var(--panel);border:1px solid var(--borde); border-radius:var(--r-grande);box-shadow:var(--sombra);margin-bottom:var(--e4)} .panel > h2{padding:var(--e4) var(--e5);border-bottom:1px solid var(--borde)} .panel .cuerpo{padding:var(--e5)} .panel .nota{font-size:12.5px;color:var(--tenue);padding:0 var(--e5) var(--e4)} .panel .nota:first-child{padding-top:var(--e4)} /* ── cifras ───────────────────────────────────────────────────────────────── */ .cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:var(--e3);margin-bottom:var(--e4)} .cifra{background:var(--panel);border:1px solid var(--borde); border-radius:var(--r-grande);box-shadow:var(--sombra);padding:var(--e4) var(--e5)} .cifra .n{display:block;font-size:29px;font-weight:600;letter-spacing:-.025em; line-height:1.15} .cifra .r{display:block;font-size:12.5px;color:var(--suave);margin-top:var(--e1)} .n.ok{color:var(--ok)} .n.grave{color:var(--grave)} .n.bordo{color:var(--bordo)} .n.tenue{color:var(--tenue)} .cifra.filtro{display:block;color:inherit;text-decoration:none; transition:border-color .15s ease,box-shadow .15s ease} .cifra.filtro:hover{border-color:var(--bordo);box-shadow:var(--sombra-alta); text-decoration:none} /* El filtro activo se marca con el borde Y con la barra bordó: el color solo no alcanza para saber qué se está mirando. */ .cifra.filtro.sel{border-color:var(--bordo);border-left:3px solid var(--bordo)} /* ── tablas ───────────────────────────────────────────────────────────────── */ .tabla-scroll{overflow-x:auto} table{width:100%;border-collapse:collapse} /* RESPTABLA_v1: los th ya NO fuerzan nowrap. Un encabezado largo ("¿Quién mandó mensaje?") empujaba la tabla entera fuera de pantalla; que envuelva en dos líneas cuando falta lugar es exactamente lo que se quiere. */ th{ text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--tenue); padding:var(--e3) var(--e4);background:var(--sutil); border-bottom:1px solid var(--borde); } th:first-child{padding-left:var(--e5)} th:last-child{padding-right:var(--e5)} td{padding:var(--e3) var(--e4);border-bottom:1px solid var(--borde); font-size:14px;vertical-align:middle} td:first-child{padding-left:var(--e5)} td:last-child{padding-right:var(--e5)} tbody tr:last-child td{border-bottom:0} tbody tr:hover{background:var(--sutil)} td.der,th.der{text-align:right} td.num{text-align:right;font-variant-numeric:tabular-nums} td.clave{font-weight:600} td.suave{color:var(--suave)} .vacio{color:var(--tenue);font-size:13.5px;padding:var(--e6) 0;text-align:center} /* ── tablas responsive (RESPTABLA_v1) ───────────────────────────────────────── Pedido textual del cliente: que no haya barra lateral "a menos que sea completamente necesario". .tabla-scroll sigue existiendo como red de seguridad, pero el patrón es que la tabla ENTRE. Cuatro herramientas, y cuándo usar cada una: .sub Línea secundaria DEBAJO del dato principal, en la misma celda: la dirección bajo el nombre, el teléfono bajo la dirección, la fecha bajo quién llamó. Así se lee una fila en la práctica, y cada .sub es una columna menos. Usarla siempre que un dato "acompaña" a otro en vez de compararse entre filas. .col-sec Columna prescindible en pantallas angostas: se oculta entre 641 y 900px. SOLO para datos que también viven en la ficha de detalle (observaciones, mensajes): ocultar nunca puede significar perder el dato. Va en el th Y en sus td. Bajo 640px NO aplica: ahí manda .tabla-fichas, que apila y muestra todo de nuevo. .tabla-fichas Modo tarjeta para el teléfono (≤640px). Se agrega junto a .tabla-scroll; cada fila pasa a ser un bloque apilado y cada celda muestra su rótulo, tomado de su atributo data-t (). Celda sin data-t = sin rótulo (el nombre del cliente no lo necesita). Es lo ÚNICO que elimina de verdad el scroll lateral en 375px: once columnas no entran en un teléfono se las comprima como se las comprima. td.acciones Celda de botones: compacta, alineada a la derecha y al final de la fila. Los botones PUEDEN envolver a una segunda línea: una fila un poco más alta es mejor que toda la tabla scrolleando de costado. */ td .sub,.sub{display:block;font-size:12px;font-weight:400;color:var(--suave); line-height:1.45} td.acciones,th.acciones{text-align:right} td.acciones{white-space:normal} td.acciones form{display:inline} /* margen entre botones cuando envuelven: gap no existe entre inline-flex */ td.acciones .btn,td.acciones button{margin:2px 0 2px 6px;vertical-align:middle} @media (max-width:900px){ .col-sec{display:none} /* Menos aire entre columnas cuando el ancho escasea: 8px por lado en vez de 16 le devuelve ~100px a una tabla de seis columnas sin ocultar nada. */ th,td{padding-left:var(--e2);padding-right:var(--e2)} th:first-child,td:first-child{padding-left:var(--e4)} th:last-child,td:last-child{padding-right:var(--e4)} } @media (max-width:640px){ /* La tabla deja de ser tabla: bloques apilados con su rótulo. thead se va (los rótulos ahora los pone cada celda) y cada tr es una tarjetita. El tfoot también va en bloque: si queda como table-footer-group dentro de una tabla en bloque, la fila Total se encoge a su mínimo (~133px). */ .tabla-fichas table,.tabla-fichas tbody,.tabla-fichas tfoot,.tabla-fichas tr,.tabla-fichas td{ display:block} .tabla-fichas table,.tabla-fichas tbody,.tabla-fichas tfoot,.tabla-fichas td{width:100%} .tabla-fichas thead{display:none} /* El tr NO lleva width:100%: con margen lateral + width:100% la tarjeta desbordaba exactamente esos 16px y volvía el scroll que vinimos a matar. */ .tabla-fichas tr{border:1px solid var(--borde);border-radius:var(--r); margin:0 var(--e4) var(--e3);padding:var(--e2) var(--e3)} .tabla-fichas tbody tr:hover{background:var(--panel)} .tabla-fichas td{border-bottom:0;padding:4px 0;font-size:13.5px} .tabla-fichas td:first-child,.tabla-fichas td:last-child{ padding-left:0;padding-right:0} /* Apilado no hay "derecha": números y acciones vuelven a la izquierda. */ .tabla-fichas td.num,.tabla-fichas td.der,.tabla-fichas td.acciones{ text-align:left} .tabla-fichas td.acciones{border-top:1px solid var(--borde); margin-top:4px;padding-top:8px} .tabla-fichas td.acciones .btn,.tabla-fichas td.acciones button{ margin:2px 8px 2px 0} /* En fichas se vuelve a ver TODO: acá el ancho ya no es problema. */ .tabla-fichas td.col-sec{display:block} .tabla-fichas td[data-t]::before{content:attr(data-t);display:block; font-size:10.5px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--tenue)} /* Una celda vacía apilada es un renglón fantasma. */ .tabla-fichas td:empty{display:none} } /* ── formularios ──────────────────────────────────────────────────────────── */ .campo{display:flex;flex-direction:column;gap:6px} label{font-size:12.5px;font-weight:500;color:var(--suave)} input[type=text],input[type=email],input[type=password],input[type=date]{ font:400 14.5px/1.4 var(--sans);color:var(--texto);background:var(--panel); border:1px solid var(--borde-fuerte);border-radius:var(--r); padding:10px 12px;min-height:42px; /* alcanzable con el dedo */ transition:border-color .15s ease,box-shadow .15s ease; } input:hover{border-color:var(--tenue)} input:focus{border-color:var(--bordo);outline:none; box-shadow:0 0 0 3px var(--bordo-tinte)} /* select y textarea van vestidos igual que los input: cada pantalla los estilaba (o no) por su cuenta y se notaba qué módulo hizo cada mano. */ select{ font:400 14.5px/1.4 var(--sans);color:var(--texto);background:var(--panel); border:1px solid var(--borde-fuerte);border-radius:var(--r); padding:10px 12px;min-height:42px; transition:border-color .15s ease,box-shadow .15s ease; } select:hover{border-color:var(--tenue)} select:focus{border-color:var(--bordo);outline:none; box-shadow:0 0 0 3px var(--bordo-tinte)} textarea{ font:400 14.5px/1.5 var(--sans);color:var(--texto);background:var(--panel); border:1px solid var(--borde-fuerte);border-radius:var(--r); padding:10px 12px;resize:vertical; transition:border-color .15s ease,box-shadow .15s ease; } textarea:hover{border-color:var(--tenue)} textarea:focus{border-color:var(--bordo);outline:none; box-shadow:0 0 0 3px var(--bordo-tinte)} /* En pantallas angostas nada puede empujar el ancho de la página: los campos se achican y las tablas scrollean adentro de .tabla-scroll. */ input,select,textarea{max-width:100%} .fila{display:flex;gap:var(--e3);flex-wrap:wrap;align-items:flex-end} .check{flex-direction:row;align-items:center;gap:var(--e2);font-size:14px; color:var(--suave);padding-bottom:11px} .check input{width:16px;height:16px;min-height:0;accent-color:var(--bordo)} button,.btn{ font:500 14px/1 var(--sans); background:var(--bordo);color:#fff;border:1px solid var(--bordo); border-radius:var(--r);padding:0 18px;min-height:42px;cursor:pointer; transition:background .15s ease,border-color .15s ease; } button:hover{background:var(--bordo-osc);border-color:var(--bordo-osc)} button.callado{background:var(--panel);color:var(--suave);border-color:var(--borde-fuerte)} button.callado:hover{background:var(--sutil);color:var(--texto);border-color:var(--tenue)} button.chico{min-height:32px;padding:0 11px;font-size:12.5px} button:disabled{opacity:.45;cursor:not-allowed} /* Los enlaces vestidos de botón comparten TODO con button: si esto vive en cada plantilla, divergen a la primera corrección (pasó con los 3 módulos). */ a.btn{display:inline-flex;align-items:center;justify-content:center; text-decoration:none} a.btn:hover{text-decoration:none} .btn.callado{background:var(--panel);color:var(--suave);border-color:var(--borde-fuerte)} .btn.callado:hover{background:var(--sutil);color:var(--texto);border-color:var(--tenue)} .btn.chico{min-height:32px;padding:0 11px;font-size:12.5px} /* ── tacho de eliminar (ELIMINAR_v1) ─────────────────────────────────────── */ /* El botón vive en templates/_tacho.html y es EL MISMO en los tres módulos. En la fila va callado, del mismo peso que los .chico.callado de al lado; el rojo aparece recién en hover/focus: un tacho rojo por fila grita error donde todavía no lo hay. */ form.eliminar{display:inline} button.tacho{display:inline-flex;align-items:center;justify-content:center;gap:7px} button.tacho.chico{padding:0 9px} button.tacho svg{display:block;flex:none} button.tacho:hover,button.tacho:focus-visible{ background:var(--grave-tinte);color:var(--grave);border-color:var(--grave)} /* ── estados ──────────────────────────────────────────────────────────────── */ /* Pastilla con punto: el color no puede ser el único portador del dato. */ .estado{display:inline-flex;align-items:center;gap:5px; font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px; white-space:nowrap} .estado::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor} .e-ok{background:var(--ok-tinte);color:var(--ok)} .e-no{background:var(--grave-tinte);color:var(--grave)} .e-pend{background:var(--alerta-tinte);color:var(--alerta)} .e-super{background:var(--bordo-tinte);color:var(--bordo)} /* SUPERADMIN_v1 */ .e-gris{background:var(--gris-tinte);color:var(--suave)} .aviso,.error{border-radius:var(--r);padding:var(--e3) var(--e4); margin-bottom:var(--e4);font-size:14px;border:1px solid} .aviso{background:var(--bordo-tinte);border-color:var(--aviso-borde);color:var(--aviso-texto)} /* La confirmación de "quedó guardado" es verde en TODOS los módulos. */ .aviso.ok{background:var(--ok-tinte);border-color:var(--ok-borde);color:var(--ok)} /* COLOR_REP_v1: el aviso de cautela (ámbar: es prudencia, no un error) vivía sólo en el reporte de instalaciones con el borde escrito a mano (#eddfc2), que de noche quedaba como un marco crema sobre fondo oscuro. Acá, con token, se ve igual en las dos hojas y cualquier pantalla puede usarlo. */ .aviso.cautela{background:var(--alerta-tinte);border-color:var(--alerta-borde);color:var(--alerta)} .error{background:var(--grave-tinte);border-color:var(--grave-borde);color:var(--error-texto)} .aviso code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px; background:var(--panel);padding:2px 6px;border-radius:var(--r-chico)} /* ── acceso ───────────────────────────────────────────────────────────────── */ .acceso{min-height:100vh;min-height:100dvh;display:flex;align-items:center; justify-content:center;padding:var(--e5)} .acceso .caja{width:100%;max-width:392px} .acceso .logo{text-align:center;margin-bottom:var(--e6)} .acceso .logo b{font-size:22px;font-weight:600;color:var(--bordo);letter-spacing:-.01em} .acceso .logo span{display:block;font-size:13.5px;color:var(--tenue);margin-top:2px} .acceso .hoja{background:var(--panel);border:1px solid var(--borde); border-radius:14px;box-shadow:var(--sombra-alta);padding:var(--e6)} .acceso h1{font-size:19px;margin-bottom:var(--e1)} .acceso .ayuda{color:var(--suave);font-size:13.5px;margin-bottom:var(--e5)} .acceso form{display:flex;flex-direction:column;gap:var(--e4)} .acceso button{width:100%} .acceso .abajo{margin-top:var(--e4);text-align:center;font-size:13px;color:var(--tenue)} /* El código se tipea mirando el teléfono: grande y con aire entre dígitos. */ .acceso .codigo input{font-size:23px;letter-spacing:.36em;text-align:center; font-weight:500;padding:12px} .qr{display:block;width:184px;height:184px;margin:0 auto var(--e3); border:1px solid var(--borde);border-radius:var(--r);padding:var(--e2);background:#fff} .secreto{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px; line-height:1.6;color:var(--suave);text-align:center;word-break:break-all; background:var(--fondo);border:1px solid var(--borde);border-radius:var(--r); padding:var(--e2) var(--e3);margin-bottom:var(--e4)} /* ── pie ──────────────────────────────────────────────────────────────────── */ /* Acompaña el ancho del contenido, no el de la pantalla: así la línea del borde superior arranca y termina donde arranca y termina lo que se lee. */ .pie{max-width:1160px;margin:var(--e7) auto 0;padding:var(--e5) var(--e5) var(--e6); border-top:1px solid var(--borde);text-align:center; font-size:12.5px;color:var(--tenue)} /* ── responsive ───────────────────────────────────────────────────────────── */ @media (max-width:680px){ main{padding:var(--e5) var(--e4) var(--e6)} .barra{height:auto;flex-wrap:wrap;gap:var(--e3);padding:var(--e3) var(--e4)} .barra nav{order:3;width:100%;margin-left:0} .barra nav a{flex:1;text-align:center} .yo{margin-left:auto} h1{font-size:22px} .cifra .n{font-size:25px} th:first-child,td:first-child{padding-left:var(--e4)} th:last-child,td:last-child{padding-right:var(--e4)} } @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} } /* ── CAJAS_v1: barra de ocupación bajo el número (pedido textual: "una barrita abajo aparte del número"). Verde normal, ámbar del 90% en adelante, rojo llena — y el porcentaje siempre escrito al lado: el color nunca es el único portador del dato. */ .barra-ocup{height:5px;min-width:90px;max-width:160px;border-radius:999px; background:var(--gris-tinte);margin-top:4px;overflow:hidden} .barra-ocup i{display:block;height:100%;border-radius:999px; background:var(--ok);min-width:2px} .barra-ocup i.medio{background:var(--alerta)} .barra-ocup i.lleno{background:var(--grave)} .n.alerta{color:var(--alerta)} /* ── NAP_SNMP_v1: Identificar cables NAP ───────────────────────────────────── Pantalla de campo: se usa con UNA mano, mirando el teléfono mientras la otra manipula el cable. Todo lo accionable es grande (≥52px), y el estado del momento se dice con color Y con texto — nunca sólo con color. */ .nap-lista{display:flex;flex-direction:column;gap:var(--e2)} .nap-item{display:block;width:100%;text-align:left;background:var(--panel); border:1px solid var(--borde-fuerte);border-radius:var(--r); padding:var(--e3) var(--e4);min-height:56px;cursor:pointer; font:400 14.5px/1.5 var(--sans);color:var(--texto)} .nap-item:hover{border-color:var(--bordo);background:var(--sutil)} .nap-item b{font-size:15.5px} .nap-item.sel{border:2px solid var(--bordo);background:var(--bordo-tinte); padding:calc(var(--e3) - 1px) calc(var(--e4) - 1px)} .nap-grande{min-height:56px;font-size:17px;font-weight:600} /* El banner de detección: lo más importante que esta pantalla puede decir. Rojo pleno, nombre enorme: se tiene que leer con el teléfono en la otra punta de la vereda. */ .nap-banner{border-radius:var(--r-grande);padding:var(--e5); margin-bottom:var(--e4);color:#fff;background:var(--grave); box-shadow:var(--sombra-alta)} .nap-banner .rotulito{font-size:11.5px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;opacity:.85} .nap-banner .quien{font-size:27px;font-weight:700;line-height:1.2;margin-top:4px} .nap-banner .dato{font-size:14.5px;opacity:.92;margin-top:6px} /* La OLT no contesta: banner propio, ámbar y con borde — es un estado DISTINTO de "no cayó nada", y la diferencia es la que evita cortar el cable equivocado. */ .nap-error{border-radius:var(--r-grande);padding:var(--e4) var(--e5); margin-bottom:var(--e4);border:2px solid var(--alerta); background:var(--alerta-tinte);color:var(--alerta);font-weight:600} .nap-barra-scan{display:flex;gap:var(--e2);align-items:center;flex-wrap:wrap; margin-bottom:var(--e3)} .nap-barra-scan .callado{min-height:48px} .nap-poll{display:inline-flex;align-items:center;gap:6px;font-size:13.5px; font-weight:600;padding:10px 13px;border-radius:999px;white-space:nowrap} .nap-poll.ok{background:var(--ok-tinte);color:var(--ok)} .nap-poll.mal{background:var(--grave-tinte);color:var(--grave)} .nap-poll.espera{background:var(--gris-tinte);color:var(--suave)} tr.nap-cayo td{background:var(--grave-tinte)} @media (max-width:640px){ .tabla-fichas tr.nap-cayo{border:2px solid var(--grave); background:var(--grave-tinte)} } /* ── PUNTOS_v2: gráficos del reporte de puntos ──────────────────────────────── Los SVG los genera el servidor (tickets.py) y viajan inline: cero pedidos a internet. En el de columnas las X van en % y las Y en px con alto fijo, así el gráfico se estira a 375 o a 1280 sin achicar el texto. Las barras horizontales llevan el texto en HTML por la misma razón: nunca se escala. */ .grafico{padding:var(--e4) var(--e5) var(--e2)} .grafico svg{display:block} .grafico svg text{font-family:var(--sans)} .barras{display:flex;flex-direction:column;gap:var(--e3); padding:var(--e4) var(--e5);border-bottom:1px solid var(--borde)} .barra-fila .rotulo{display:flex;justify-content:space-between;gap:var(--e3); font-size:13.5px;line-height:1.35} .barra-fila .valor{font-variant-numeric:tabular-nums;font-weight:600; color:var(--bordo);white-space:nowrap} .barra-fila .detalle{font-weight:400;color:var(--suave);font-size:12.5px} .barra-fila svg{display:block;margin-top:5px;border-radius:2px} /* Honestidad del dato: cuando la muestra es chica, el reporte lo DICE en vez de dejar que una barra o un promedio sugieran una certeza que no hay. */ .nota.cautela{color:var(--alerta)} .cifra .sub{margin-top:2px} .n.tenue{color:var(--tenue)} /* ═══ METCUAD_v1 — métricas por cuadrilla ═══ Un color fijo por cuadrilla (por orden: cuadrilla 1..4) para el gráfico agrupado y su leyenda. Tonos apagados de la misma familia del resto de la hoja: distinguibles entre sí sin que ninguno grite más que otro (el color no puede insinuar un ranking). */ /* REP_v3: los tokens --cuad1..6 se mudaron al primer :root de la hoja (ver ahí el porqué: el PDF sólo lee ese bloque). */ .leyenda{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4); padding:0 var(--e5) var(--e4);font-size:12.5px;color:var(--suave)} .leyenda .pastilla{display:inline-block;width:10px;height:10px; border-radius:2px;margin-right:6px;vertical-align:-1px} .leyenda .detalle{color:var(--tenue)} /* ── TEMA_v1: Estilo Día / Estilo Noche ────────────────────────────────────── Cómo funciona: sin elección guardada manda el sistema operativo (prefers-color-scheme); el interruptor de la barra fuerza un modo poniendo data-tema="oscuro|claro" en ANTES de que cargue esta hoja (script inline en base.html), así no hay destello blanco al abrir de noche. El bloque noche está escrito DOS veces (media query y atributo) a propósito: light-dark() se lo ahorraría, pero el WebView de la app de técnicos puede ser viejo y ahí la intranet quedaría sin modo noche. Si tocás un valor, tocalo en LAS DOS copias. El bordó sigue siendo la marca en los dos modos: la barra superior y los botones no cambian (van por --marca / --accion, que NO se redefinen de noche). Lo que sí cambia es --bordo: como texto o acento, el bordó profundo es ilegible sobre fondo oscuro, así que de noche pasa a un bordó claro. Todos los pares de la paleta noche están medidos (WCAG 2.1): texto normal >=4.5:1 contra su fondo, gráficos (barras de ocupación) >=3:1 contra la pista. Si agregás un color, medilo antes de usarlo. */ :root{ color-scheme:light; /* Lo que estaba escrito a mano por la hoja, ahora con nombre: */ --sutil:#fafbfc; /* hover de filas/botones callados y fondo de th */ --gris-tinte:#eef0f3; /* pastilla gris, pista de barras de ocupación */ --aviso-borde:#eed7dc; --aviso-texto:#5f0e1e; --ok-borde:#c6e6d2; --grave-borde:#f3d3d1; --error-texto:#8c1c16; --alerta-borde:#eddfc2; /* COLOR_REP_v1: borde del aviso de cautela (antes a mano) */ /* Identidad que NO cambia con el tema: */ --marca:#7a1226; /* la barra superior es bordó de día y de noche */ --accion:#7a1226; /* botones de acción: bordó pleno con texto blanco */ --accion-osc:#5f0e1e; --grave-pleno:#b3261e; /* banner NAP: rojo pleno bajo texto blanco (6.5:1)*/ /* Etiquetas de bajas (antes pares fijos en bajas.py): fondo, texto. */ --eti-rojo-f:#fdecea; --eti-rojo-t:#a02018; --eti-naranja-f:#fdf0e0; --eti-naranja-t:#9a4c00; --eti-ambar-f:#fbf3d9; --eti-ambar-t:#7a5c00; --eti-verde-f:#e8f5ec; --eti-verde-t:#1e6a37; --eti-turquesa-f:#e0f4f4; --eti-turquesa-t:#0f6b6b; --eti-azul-f:#e7effc; --eti-azul-t:#1d4fa3; --eti-violeta-f:#f0e9fb; --eti-violeta-t:#6236b0; --eti-rosa-f:#fbe9f1; --eti-rosa-t:#a52a63; --eti-gris-f:#eef0f3; --eti-gris-t:#5b6472; } /* Copia 1: el sistema pide oscuro y el usuario no forzó claro. */ @media (prefers-color-scheme:dark){ :root:not([data-tema="claro"]){ color-scheme:dark; --fondo:#101216; --panel:#171a20; --sutil:#1d2129; --borde:#262a32; --borde-fuerte:#333945; --gris-tinte:#262b33; --texto:#e7e9ee; --suave:#9aa4b1; --tenue:#7f8a99; --bordo:#e08b9a; --bordo-osc:#eba3b0; --bordo-tinte:#2a181d; --ok:#7fc98f; --ok-tinte:#17251b; --ok-borde:#2e4a37; --alerta:#d9a441; --alerta-tinte:#2a2312; --alerta-borde:#4a3d1a; --grave:#f28377; --grave-tinte:#33201e; --grave-borde:#55302d; --aviso-borde:#4a2830; --aviso-texto:#eecad1; --error-texto:#f5b7b1; --accion:#8f2033; --accion-osc:#a72a40; /* hover: de noche se ACLARA */ --cuad1:#e08b9a; --cuad2:#8fc1ea; --cuad3:#7fc98f; --cuad4:#d9a441; --cuad5:#bfa5e6; --cuad6:#9aa4b1; /* REP_v3: cuadrillas de noche */ --sombra:0 1px 2px rgba(0,0,0,.35); --sombra-alta:0 4px 14px rgba(0,0,0,.5); --eti-rojo-f:#3a201d; --eti-rojo-t:#f2aba1; --eti-naranja-f:#382413; --eti-naranja-t:#f0b077; --eti-ambar-f:#33290f; --eti-ambar-t:#e0c065; --eti-verde-f:#1a2b1f; --eti-verde-t:#93d3a2; --eti-turquesa-f:#122b2b; --eti-turquesa-t:#7ecfcf; --eti-azul-f:#1a2536; --eti-azul-t:#9dbdf0; --eti-violeta-f:#271e35; --eti-violeta-t:#c3aaf0; --eti-rosa-f:#331d28; --eti-rosa-t:#eda6c6; --eti-gris-f:#262b33; --eti-gris-t:#a3acb9; } } /* Copia 2: el usuario forzó oscuro con el interruptor. MISMOS valores. */ :root[data-tema="oscuro"]{ color-scheme:dark; --fondo:#101216; --panel:#171a20; --sutil:#1d2129; --borde:#262a32; --borde-fuerte:#333945; --gris-tinte:#262b33; --texto:#e7e9ee; --suave:#9aa4b1; --tenue:#7f8a99; --bordo:#e08b9a; --bordo-osc:#eba3b0; --bordo-tinte:#2a181d; --ok:#7fc98f; --ok-tinte:#17251b; --ok-borde:#2e4a37; --alerta:#d9a441; --alerta-tinte:#2a2312; --alerta-borde:#4a3d1a; --grave:#f28377; --grave-tinte:#33201e; --grave-borde:#55302d; --aviso-borde:#4a2830; --aviso-texto:#eecad1; --error-texto:#f5b7b1; --accion:#8f2033; --accion-osc:#a72a40; --cuad1:#e08b9a; --cuad2:#8fc1ea; --cuad3:#7fc98f; --cuad4:#d9a441; --cuad5:#bfa5e6; --cuad6:#9aa4b1; /* REP_v3: cuadrillas de noche */ --sombra:0 1px 2px rgba(0,0,0,.35); --sombra-alta:0 4px 14px rgba(0,0,0,.5); --eti-rojo-f:#3a201d; --eti-rojo-t:#f2aba1; --eti-naranja-f:#382413; --eti-naranja-t:#f0b077; --eti-ambar-f:#33290f; --eti-ambar-t:#e0c065; --eti-verde-f:#1a2b1f; --eti-verde-t:#93d3a2; --eti-turquesa-f:#122b2b; --eti-turquesa-t:#7ecfcf; --eti-azul-f:#1a2536; --eti-azul-t:#9dbdf0; --eti-violeta-f:#271e35; --eti-violeta-t:#c3aaf0; --eti-rosa-f:#331d28; --eti-rosa-t:#eda6c6; --eti-gris-f:#262b33; --eti-gris-t:#a3acb9; } /* El fondo detrás del overscroll acompaña al tema (evita el marco blanco). */ html{background:var(--fondo)} /* La barra y los botones van por los tokens de identidad: de noche --bordo se aclara para ser legible como TEXTO, pero un fondo rosa claro con letras blancas sería ilegible — por eso acá no se usa --bordo. */ .barra{background:var(--marca)} button,.btn{background:var(--accion);border-color:var(--accion)} button:hover{background:var(--accion-osc);border-color:var(--accion-osc)} .nap-banner{background:var(--grave-pleno)} /* El interruptor Día/Noche vive en la barra bordó, vestido como "Salir". */ .tema-btn{background:none;border:1px solid rgba(255,255,255,.35); color:rgba(255,255,255,.85);min-height:0;padding:6px 10px;font-size:12.5px; border-radius:var(--r);cursor:pointer;white-space:nowrap} .tema-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6); color:#fff} /* ── BMGRAF_v1: gráficos del reporte Botmaker ───────────────────────────────── Mismo lenguaje que PUNTOS_v2 (.barras / .barra-fila / .grafico) más lo que este reporte suma: tarjetas por operador con escala compartida y el aviso de muestra chica como chip VISIBLE — esta pantalla se proyecta en reuniones, y una barra sin ese contexto evalúa gente injustamente. */ .multiples{display:grid;gap:var(--e4);padding:var(--e4) var(--e5); /* min(280px,100%): en un teléfono angosto la tarjeta cede en vez de desbordar — la página nunca scrollea a lo ancho (regla RESPTABLA_v1). */ grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))} .multiple{border:1px solid var(--borde);border-radius:var(--r); padding:var(--e3) var(--e4) var(--e2)} .multiple h3{margin:0;font-size:14px;font-weight:600} .multiple .detalle{font-weight:400;color:var(--suave);font-size:12.5px} .multiple .titulin{margin:var(--e3) 0 0;font-size:11px;letter-spacing:.05em; text-transform:uppercase;color:var(--tenue)} .multiple .nota{padding:var(--e2) 0;margin:0} .grafico-mini svg{display:block} .grafico-mini svg text{font-family:var(--sans)} .chip-cautela{display:inline-block;background:var(--alerta-tinte); color:var(--alerta);font-size:11px;line-height:1.7;border-radius:999px; padding:0 8px;margin-left:4px;white-space:nowrap;vertical-align:1px} .leyenda-cua{display:inline-block;width:10px;height:10px;border-radius:2px; background:var(--bordo);vertical-align:-1px} /* ── PDF_v1: link "Exportar PDF" en los reportes ───────────────────────────── Es un y no un