/* Sistema visual de Weber Burden (antes Explorador RAE-CMBD) * * Va en un fichero propio y NO en variables de bslib porque casi todo lo de * aqui son piezas que Bootstrap no tiene: la banda de indicadores, las notas * al margen y la rejilla de comunidades. Lo que si es de Bootstrap (colores, * tipografia, radios) se declara ademas en bs_theme(), en app.R. * * šŸ”‘ Este fichero se enlaza en la UI RAIZ, no dentro del page_sidebar. La app * vive dentro de un uiOutput, asi que todo lo que se declare mas adentro se * inyecta por websocket y llega tarde: la pantalla sale un instante sin * estilos. Enlazado en la raiz viaja en la primera respuesta. */ :root { /* Los mismos valores que la tabla de color del sistema. Si se cambian aqui, hay que cambiarlos en bs_theme() y en COLORES de app.R. */ --w-azul-profundo: #0b3c5d; --w-azul: #0b6fa4; --w-azul-hover: #08557d; --w-gris-azul: #5b7c93; --w-texto: #16232c; --w-texto-tenue: #8ba0b0; --w-borde: #dbe3ea; --w-borde-control: #c6d4de; --w-lienzo: #f2f5f7; /* Ya NO hay paleta de cautela ni de ruptura. Los avisos son tipograficos: la distincion entre precision metodologica, "se puede leer mal" y "no comparable" la lleva el TEXTO del rotulo, no un color. Las clases `es-cautela` y `es-ruptura` siguen en el HTML como marca semantica, sin estilo. */ --w-ruptura-texto: #9e3a30; --w-contexto-fondo: #f7fafb; --w-confirmacion: #1d7a5f; } body { background: var(--w-lienzo); color: var(--w-texto); } /* Las cifras SIEMPRE tabulares: sin esto las columnas de la tabla y los indicadores bailan al cambiar de seleccion. */ .w-cifra, .dataTables_wrapper table.dataTable, .w-rejilla, .w-kpi-valor { font-variant-numeric: tabular-nums; } /* ---------- Cabecera ---------------------------------------------------- */ .cabecera-app { display:flex; align-items:center; justify-content:space-between; width:100%; gap:1rem; } .cabecera-app .marca { display:flex; align-items:center; gap:18px; } .cabecera-app .marca img { height:40px; width:auto; display:block; } .cabecera-app .separador { width:1px; height:30px; background:var(--w-borde); } .cabecera-app .textos { display:flex; flex-direction:column; gap:2px; line-height:1.1; } .cabecera-app .titulo { font-weight:600; color:var(--w-azul-profundo); font-size:16px; letter-spacing:-.01em; } .cabecera-app .subtitulo { font-weight:400; color:#6c8496; font-size:12px; } .caja-sesion { display:flex; align-items:center; gap:16px; white-space:nowrap; } .caja-sesion .quien { font-size:12.5px; color:#6c8496; } .caja-sesion .barra { width:1px; height:16px; background:var(--w-borde); } .caja-sesion .salir { font-size:12.5px; font-weight:500; color:var(--w-azul); text-decoration:none; cursor:pointer; } .caja-sesion .salir:hover { color:var(--w-azul-hover); text-decoration:underline; } @media (max-width: 900px) { .caja-sesion .quien, .caja-sesion .barra { display:none; } .cabecera-app .marca img { height:32px; } .cabecera-app .subtitulo { display:none; } } /* ---------- Barra lateral ----------------------------------------------- */ /* Rotulos EN FRASE, no en versalitas espaciadas. * * El rotulito de 10 u 11 px en mayusculas con letter-spacing es el tic mas * reconocible de un panel generico, y estaba en CINCO sitios de esta pantalla: * la barra lateral, las etiquetas de los controles, la cabeza de cada indicador, * el rotulo de las notas y las cabeceras de la tabla. Al quitarlo de todos a la * vez la pantalla deja de parecer una plantilla, sin tocar color ni tipografia. * * Ganan tamaƱo (de 11 a 12,5 px) porque en frase se leen mejor grandes, y * bajan de peso 600 a 500: con los pesos REALES cargados, el 600 en un rotulo * pequeƱo pesa demasiado. */ .w-eyebrow { font-size:12.5px; font-weight:500; color:var(--w-gris-azul); } /* Las etiquetas de los controles de Shiny, con el mismo tratamiento. */ .bslib-sidebar-layout > .sidebar .control-label, .bslib-sidebar-layout > .sidebar .shiny-input-container > label { font-size:12.5px; font-weight:500; color:var(--w-gris-azul); margin-bottom:6px; } .w-sello { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:11px; color:var(--w-texto-tenue); line-height:1.3; word-break:break-all; } .w-procedencia { display:grid; grid-template-columns:72px 1fr; gap:5px 8px; font-size:11.5px; line-height:1.45; color:#6c8496; } .w-procedencia .clave { color:#9db0bd; } .w-procedencia .sello { font-family:'IBM Plex Mono', ui-monospace, monospace; color:#3c5060; word-break:break-all; } /* Grupo segmentado: son los radioButtons de "Desagregar por". Se estilan, no se sustituyen: siguen siendo inputs de Shiny y el server no se entera. */ .w-segmentado .shiny-options-group { display:flex; border:1px solid var(--w-borde-control); border-radius:4px; overflow:hidden; } .w-segmentado .radio { flex:1; margin:0; } .w-segmentado .radio + .radio { border-left:1px solid var(--w-borde-control); } /* `nowrap` es un seguro, no un adorno: los tres segmentos son `flex:1`, asi que si una etiqueta no cupiera partiria en dos lineas y ESE segmento quedaria mas alto que los otros dos, descuadrando el control. Con la etiqueta mas larga que hay hoy ("Sin separar", unos 68 px a 12,5 px) sobra sitio en un segmento de ~102 px. */ .w-segmentado .radio label { display:block; width:100%; padding:7px 2px; text-align:center; font-size:12.5px; font-weight:500; white-space:nowrap; color:#3c5060; cursor:pointer; } .w-segmentado input[type="radio"] { position:absolute; opacity:0; pointer-events:none; } .w-segmentado .radio label:hover { background:#f2f7fa; } .w-segmentado input[type="radio"]:checked + span, .w-segmentado .radio input[type="radio"]:checked ~ span { color:#fff; } .w-segmentado .radio:has(input:checked) label { background:var(--w-azul); color:#fff; font-weight:600; } /* ---------- Indicadores -------------------------------------------------- */ /* Una sola banda blanca con tres columnas, no tres bloques de color. El color se reserva para lo que significa algo (avisos y series). */ /* ---------- La hoja continua --------------------------------------------- */ /* UNA superficie con el contorno, y dentro secciones separadas por filetes de un pixel. El contorno lo pone la hoja: nada de lo que va dentro vuelve a dibujarlo. */ .w-hoja { background:#fff; border:1px solid var(--w-borde); border-radius:6px; overflow:hidden; } /* Dos figuras lado a lado dentro de la hoja, con el filete como unica separacion. Las proporciones son las de antes (7/5 de layout_columns) expresadas en fracciones. */ .w-hoja-figuras { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); border-top:1px solid var(--w-borde); } .w-hoja-figuras > .w-panel.es-derecha { border-left:1px solid #eef2f5; } @media (max-width: 1100px) { .w-hoja-figuras { grid-template-columns:1fr; } .w-hoja-figuras > .w-panel.es-derecha { border-left:none; border-top:1px solid #eef2f5; } } .w-panel { display:flex; flex-direction:column; min-width:0; } /* Mismo tratamiento que tenia .card-header, para que la jerarquia no cambie al dejar de ser una tarjeta. */ .w-panel-cabeza { padding:13px 18px; border-bottom:1px solid #eef2f5; font-size:14.5px; font-weight:600; color:var(--w-texto); } .w-panel-titulo { font-size:14.5px; font-weight:600; color:var(--w-texto); } /* PestaƱas sin caja: texto con un filete de 2 px debajo de la activa, que es el mismo recurso que ya usan las notas y la cabecera. * * šŸ”‘ Se apunta a `> li > a` y a `li.active`, NO a `.nav-link` ni a `.nav-link.active`. * Comprobado el 28/08/2026 imprimiendo el HTML que genera `navset_tab`: los enlaces * NO llevan clase `nav-link` y el estado activo va en el `
  • `, no en el ``. * Con las clases de Bootstrap 5 este selector no habria aplicado nunca y las * pestaƱas habrian salido como enlaces sin estilo. */ .w-panel .nav-tabs { border-bottom:1px solid #eef2f5; padding:0 18px; gap:18px; margin:0; } .w-panel .nav-tabs > li { margin:0; } .w-panel .nav-tabs > li > a { display:block; border:none; background:none; padding:9px 0; font-size:12.5px; color:var(--w-azul); text-decoration:none; border-radius:0; } .w-panel .nav-tabs > li > a:hover { color:var(--w-azul-hover); } .w-panel .nav-tabs > li.active > a, .w-panel .nav-tabs > li > a.active { color:var(--w-texto); font-weight:500; box-shadow:inset 0 -2px 0 var(--w-azul); } .w-panel .tab-content { padding:2px 0 0; } /* Sin sombra. La sombra de 1 px hacia que cada tarjeta FLOTARA sobre el lienzo, y con cuatro bloques en pantalla eso son cuatro cajas suspendidas. Con solo el filete se leen como superficies apoyadas, que es lo que son. Dentro de .w-hoja la banda pierde ADEMAS su propio contorno: lo pone la hoja. */ .w-kpis { display:grid; grid-template-columns:repeat(3, 1fr); background:#fff; border:1px solid var(--w-borde); border-radius:6px; overflow:hidden; } .w-hoja > .w-kpis { border:none; border-radius:0; } /* Sin filete superior. Llevaba 3 px grises y azules en el KPI "activo", pero el activo estaba FIJO en el primero y no seguia al indicador elegido: con "Tasa cruda" seleccionada el azul seguia en "Contactos". No informaba, desinformaba. El padding sube de 14 a 17 px para conservar el mismo aire que daba el filete. */ .w-kpi { padding:17px 18px 13px; display:flex; flex-direction:column; gap:6px; } .w-kpi + .w-kpi { border-left:1px solid #e6ecf1; } .w-kpi-cabeza { display:flex; align-items:center; gap:7px; color:var(--w-gris-azul); font-size:12.5px; font-weight:500; } /* La cifra sube de 36 a 40 px y BAJA de peso 600 a 400. Con los pesos reales cargados, una cifra grande en regular con el tracking cerrado se lee mas deliberada que una en negrita: la negrita la usaba para compensar que el 600 era sintetico. */ .w-kpi-valor { font-size:40px; font-weight:400; line-height:1; color:var(--w-azul-profundo); letter-spacing:-.028em; } .w-kpi-valor .unidad { font-size:13px; font-weight:400; letter-spacing:0; color:#6c8496; margin-left:7px; } /* El pie dice que NO es la cifra. Aqui entran tres de las cinco advertencias metodologicas: pegadas al numero, que es donde se leen mal. */ .w-kpi-pie { font-size:11.5px; line-height:1.35; color:#8095a4; } /* ---------- Notas al margen (avisos) ------------------------------------ */ /* Nota al pie del grafico, TIPOGRAFICA: sin filete lateral y sin fondo teƱido. Se separa del grafico con un filete horizontal de un pixel, como una nota al pie de una publicacion, no con un recuadro de color. La distincion entre contexto, cautela y ruptura la lleva el TEXTO del rotulo ("Cuidado con la pendiente", "Otro universo"), que dice mas que un color. */ .w-nota { display:flex; flex-direction:column; gap:3px; padding:10px 12px 2px; border-top:1px solid #eef2f5; } .w-nota .rotulo { font-size:12px; font-weight:500; color:var(--w-gris-azul); line-height:1.4; } .w-nota .cuerpo { font-size:12px; line-height:1.5; color:#5b7080; } .w-nota .cuerpo strong { font-weight:600; color:#2c4150; } .w-notas-par { display:grid; grid-template-columns:1fr 1fr; } @media (max-width: 1100px) { .w-notas-par { grid-template-columns:1fr; } } /* Ya no hay variante apilada: TODAS las notas van con el rotulo encima. Antes el rotulo iba en una columna lateral de 92 px y en las tarjetas estrechas dejaba al cuerpo dos palabras por linea, asi que existia `es-apilada` para esos casos. Con el rotulo siempre encima el caso especial desaparece. */ /* ---------- Tarjetas ----------------------------------------------------- */ .card { border:1px solid var(--w-borde) !important; border-radius:6px !important; box-shadow:none !important; } .card-header { background:#fff !important; border-bottom:1px solid #eef2f5 !important; padding:13px 18px !important; font-size:14.5px; font-weight:600; color:var(--w-texto); } /* Cabecera de tarjeta con titulo + sello a la izquierda y meta a la derecha. */ .w-cabecera-tarjeta { display:flex; align-items:baseline; justify-content:space-between; gap:12px; width:100%; } .w-cabecera-tarjeta .grupo { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; } .w-cabecera-tarjeta .meta { font-size:11.5px; font-weight:400; color:var(--w-texto-tenue); white-space:nowrap; } /* El sello de la definicion viaja con CADA cifra: es lo que permite explicar dos numeros discrepantes. En rojo cuando la definicion NO es la de arriba. */ .w-pastilla-sello { padding:1px 6px; border-radius:3px; background:var(--w-lienzo); border:1px solid #e2e9ee; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10.5px; font-weight:400; color:#6c8496; } .w-pastilla-sello.es-otra { background:#fdf3f2; border-color:#f2d7d4; color:var(--w-ruptura-texto); } /* ---------- Rejilla de comunidades --------------------------------------- */ .w-rejilla { display:grid; grid-template-columns:repeat(6, 1fr); grid-auto-rows:38px; gap:3px; } .w-celda { border-radius:2px; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; } .w-celda .sigla { font-size:10px; font-weight:600; } .w-celda .valor { font-size:9.5px; font-weight:400; line-height:1.5; font-variant-numeric:tabular-nums; } /* "Extranjero" no tiene geometria ni poblacion de referencia, pero sigue contando en los indicadores: se enseƱa aparte y punteado, no se esconde. */ .w-celda.es-sin-territorio { border:1px dashed #cfdae2; color:var(--w-texto-tenue); } .w-escala { display:flex; align-items:center; gap:8px; } .w-escala .tramo { flex:1; display:flex; height:7px; border-radius:2px; overflow:hidden; } .w-escala .tramo > span { flex:1; } .w-escala .tope { font-size:10px; color:#9db0bd; } /* ---------- Tabla -------------------------------------------------------- */ table.dataTable thead th { font-size:11.5px !important; font-weight:500 !important; color:var(--w-gris-azul) !important; background:var(--w-contexto-fondo); border-bottom:1px solid #e2e9ee !important; } table.dataTable tbody td { font-size:12.5px !important; color:#3c5060; border-bottom:1px solid #f1f5f8 !important; padding:7px 10px !important; } table.dataTable tbody tr:hover { background:#f4f8fb !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background:var(--w-azul) !important; border-color:var(--w-azul) !important; color:#fff !important; border-radius:3px; } .dataTables_wrapper .dataTables_info { font-size:11.5px; color:var(--w-texto-tenue); } /* ---------- Estados vacios ----------------------------------------------- */ /* Un tratamiento unico para los tres: sin datos, no calculable y comprobando. Antes eran mensajes sueltos de validate() en mitad del hueco del grafico. */ .w-estado { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:0 40px; min-height:200px; } .w-estado .titulo { font-size:12.5px; font-weight:600; line-height:1.3; color:#3c5060; } .w-estado .texto { font-size:11.5px; line-height:1.5; color:var(--w-texto-tenue); } /* ---------- Bloque metodologico ------------------------------------------ */ .w-metodologia { background:#fbfcfd; border:1px solid var(--w-borde); border-radius:6px; padding:14px 16px 16px; } .w-metodologia .encabezado { display:flex; align-items:center; gap:8px; margin-bottom:10px; } .w-metodologia .encabezado .linea { flex:1; height:1px; background:#e6ecf1; } /* Sin filetes laterales. Hacian DOS cosas: colorear por tipo y separar columnas, porque el hueco entre columnas era 0. Al quitarlos hay que dar separacion de verdad, o las dos columnas se leen como un solo parrafo corrido. */ .w-avisos { display:grid; grid-template-columns:repeat(5, 1fr); gap:14px 34px; } .w-avisos > div { padding:0; } .w-avisos .titulo { font-size:12px; font-weight:600; line-height:1.35; color:var(--w-texto); margin-bottom:3px; } .w-avisos .texto { font-size:11.5px; line-height:1.5; color:#6c8496; } @media (max-width: 1200px) { .w-avisos { grid-template-columns:repeat(2, 1fr); } } /* ---------- Pantalla de acceso ------------------------------------------- */ .w-acceso { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; background:linear-gradient(150deg,#0b3c5d 0%,#0b5a86 55%,#12798f 100%); } /* Sin rejilla. Llevaba una cuadricula blanca al 7 % de opacidad sobre el degradado, para "dar profundidad". Es textura decorativa: no dice nada del producto y en una pantalla grande se lee como papel milimetrado. El fondo se queda solo con su degradado. */ .w-acceso-tarjeta { position:relative; width:100%; max-width:392px; background:#fff; border-radius:8px; box-shadow:0 18px 50px rgba(6,30,48,.32); padding:30px 34px 24px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; } .w-acceso-tarjeta img { height:44px; width:auto; display:block; } .w-acceso-tarjeta .filete { width:34px; height:2px; background:var(--w-azul); } .w-acceso-tarjeta .titulo { font-size:20px; font-weight:600; line-height:1.2; color:var(--w-azul-profundo); letter-spacing:-.01em; } .w-acceso-tarjeta .descripcion { font-size:12.5px; line-height:1.5; color:#6c8496; } .w-acceso-tarjeta .separador { width:100%; height:1px; background:#eef2f5; } .w-acceso-tarjeta .pie { font-size:11.5px; line-height:1.4; color:#9db0bd; } .w-acceso-tarjeta .btn-acceso { width:100%; height:42px; border:none; border-radius:4px; background:var(--w-azul); color:#fff; font-size:13.5px; font-weight:600; cursor:pointer; box-shadow:0 2px 6px rgba(11,60,93,.28); } .w-acceso-tarjeta .btn-acceso:hover { background:var(--w-azul-hover); color:#fff; } /* Puntos de espera de la pantalla de callback. */ .w-puntos { display:flex; gap:5px; } .w-puntos span { width:7px; height:7px; border-radius:50%; background:var(--w-azul); } .w-puntos span:nth-child(1) { opacity:.9; } .w-puntos span:nth-child(2) { opacity:.55; } .w-puntos span:nth-child(3) { opacity:.25; } /* Tira de fuentes (7/10/2026): una cifra por fuente sobre las pestaƱas. Cada casilla lleva a su pestaƱa. */ .w-tira { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); background:#fff; border:1px solid #e6ecf1; border-radius:6px; margin-bottom:12px; } .w-tira-casilla { display:flex; flex-direction:column; gap:3px; padding:11px 14px; color:inherit; text-decoration:none; } .w-tira-casilla + .w-tira-casilla { border-left:1px solid #e6ecf1; } .w-tira-casilla:hover { background:#f5f8fa; } .w-tira-casilla .fuente { font-size:11.5px; color:#4a6b80; font-weight:500; } .w-tira-casilla .cifra { font-size:22px; line-height:1.1; font-variant-numeric:tabular-nums; } .w-tira-casilla .pie { font-size:11px; color:#8095a4; line-height:1.3; } /* AuditorĆ­a: Ć”rbol de fuentes, cobertura y hallazgos. */ .w-arbol, .w-arbol ul { list-style:none; margin:0; padding-left:18px; } .w-arbol { padding-left:0; } .w-arbol li { position:relative; padding:3px 0 3px 14px; font-size:13px; } .w-arbol ul li::before { content:""; position:absolute; left:0; top:0; bottom:0; border-left:1px solid #cfdbe3; } .w-arbol ul li::after { content:""; position:absolute; left:0; top:13px; width:10px; border-top:1px solid #cfdbe3; } .w-arbol ul li:last-child::before { bottom:auto; height:13px; } .w-arbol summary { cursor:pointer; } .w-arbol-detalle { color:#6b8395; font-size:12.5px; } .w-cobertura td.w-cob-si { color:#16232c; font-variant-numeric:tabular-nums; } .w-cobertura td.w-cob-no { color:#b3261e; cursor:help; } .w-hallazgo { border-top:1px solid #e6ecf1; padding:10px 0; font-size:13px; } .w-hallazgo-fuente { font-size:11px; color:#4a6b80; text-transform:uppercase; letter-spacing:.03em; } .w-hallazgo-titulo { font-weight:500; margin:2px 0 4px; } .w-hallazgo p { margin:0 0 4px; color:#3c5464; }