/* OyM · capa sobre Tabler v1.6.1 (estable de npm, autoalojada; ADR 0007) Servido en local desde public/assets/oym/oym.css (sin build/Node/Vite). Carga en el HTML (resources/views/layouts/partials/head.blade.php): 1) tabler.min.css autoalojado en static.avanzafibra.net bajo ruta versionada inmutable (contiene Bootstrap 5.3.8 portado dentro; NO cargar bootstrap.css aparte) 2) Bootstrap Icons 1.13.1 por CDN (iconos bi-* del menú) 3) Typekit + Google Fonts (Inter) 4) @stack('libs-css'): CSS de terceros que solo piden ALGUNAS pantallas: tabler-vendors.min.css, que empujan x-ui.chart (ADR 0013) y x-ui.select con `searchable`, y tom-select.bootstrap5.min.css, que empuja solo el segundo 5) Este archivo, SIEMPRE el último El punto 5 no es una preferencia: las reglas de aquí ganan por ORDEN de carga, no por especificidad. Por eso el stack del punto 4 va ANTES y no al final. El JS va en resources/views/layouts/app.blade.php: tabler.min.js de la misma versión, que YA empaqueta el JS de Bootstrap (data-api incluido). No cargar bootstrap.bundle.js aparte: duplicaría los manejadores del data-api. Detrás van @stack('libs') y @stack('scripts'), por donde entran ApexCharts y oym-charts.js en las pantallas con gráfica. Referencia del sistema anterior: style-old.css (no se carga; solo consulta). Catálogo de componentes: docs/design-system/COMPONENTS.md */ /* ============================================================ a) TOKENS DE MARCA sobre variables --tblr-* (nunca --bs-*) ============================================================ */ :root { /* Azul corporativo OyM: #066fd1 (rgb 6, 111, 209). Sustituye al #0a66e8 anterior. -lt / -darken / -fg derivan solos vía color-mix(var(--tblr-primary)). */ --tblr-primary: #066fd1; --tblr-primary-rgb: 6, 111, 209; --tblr-blue: #066fd1; --tblr-blue-rgb: 6, 111, 209; /* Enlaces y fondo de página: Tabler los declara con light-dark(), así que aquí van igual (ADR 0048 § 6): nuestro claro de siempre y, en oscuro, EL MISMO valor que trae Tabler. Un hex a secas valdría en los dos temas: así se quedaba claro el fondo de página en oscuro y los títulos casi no se leían. Lo vigila ColoresQueSiguenElTemaTest. Los tripletes -rgb de los enlaces ya no se pisan: Tabler 1.6.1 no los usa en ninguna regla, los redeclara en su bloque [data-bs-theme=dark] y un valor nuestro en :root ganaba también en oscuro. El de reposo es además el mismo que el suyo (6, 111, 209). */ --tblr-link-color: light-dark(#066fd1, color-mix(in oklab, var(--tblr-white) 40%, var(--tblr-primary))); --tblr-link-hover-color: light-dark(#0758ca, color-mix(in oklab, var(--tblr-white) 20%, var(--tblr-link-color))); /* Fondo y radios de la familia OyM (8/11/14). */ --tblr-body-bg: light-dark(#f3f7fc, var(--tblr-gray-900)); /*--tblr-border-radius: 8px; --tblr-border-radius-lg: 11px; --tblr-border-radius-xl: 14px;*/ /*--tblr-border-radius-scale: 1.5;*/ --tblr-border-radius-scale: 1.5; --tblr-font-sans-serif: "Inter Var", Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; --tblr-body-font-family: "Inter Var", Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; --tblr-body-font-size: 0.80rem; /* original 0.85rem */ --tblr-font-weight-medium: 600; /* Aquí vivían ~29 «colores heredados» del sistema anterior (--blue-950 … --text-500), todos en hex. Retirados el 2026-10-01 con el modo oscuro (ADR 0048): nadie los leía —comprobado con grep en vistas, CSS y JS— salvo --text-700 en .datagrid-title, que ya lleva su light-dark() propio. Un color nuevo se escribe con los tokens de Tabler. */ --tblr-success: var(--tblr-teal); --tblr-green: var(--tblr-teal); } /* [x-ui.avatar] Sin el anillo de box-shadow que Tabler le pone a todo `.avatar`: queda mejor sin él en todo el portal (decisión del propietario, 2026-09-23). Si algún avatar lo necesita, se crea una clase propia; no se reintroduce aquí. */ .avatar { box-shadow: none; } /* .status-* llevan su color como hex fijo por clase; alinear los azules. */ .status-blue, .status-primary { --tblr-status-color: #066fd1; --tblr-status-color-rgb: 6, 111, 209; } /* Cabecera de card más compacta en todo el portal. Tabler la deja en 1.25rem, que con la tipografía de 0.80rem de aquí arriba deja el título flotando en demasiado aire — se nota sobre todo en las fichas con muchas cards apiladas (`/instalaciones/cliente`) y en las que llevan un control en el header, como el selector de rango de `x-ui.chart-range`. Se toca SOLO el eje vertical de la cabecera, a propósito. El padding horizontal y los dos del cuerpo (`--tblr-card-spacer-*`) se dejan en el valor de Tabler: reducirlos también estrecha las tablas y los datagrid de dentro, y eso ya se probó y se descartó — de ahí venía este bloque, que estaba entero y comentado. Va sobre `.card` y no sobre `:root` porque es donde Tabler declara la variable; puesta en `:root` no la pisaría. Y afecta a TODAS las cards del portal: si alguna necesitara la cabecera holgada, la escotilla es redeclarar la variable en su propia clase, porque `x-ui.card` no tiene prop de densidad (solo `bodyClass`, que es del cuerpo). */ .card { --tblr-card-cap-padding-y: 0.8rem; } /* ============================================================ COMPONENTES OyM (reutilizables; documentados en el catálogo) ============================================================ */ /* .oym-container — contenedor estándar de página. Sustituye a container-fluid dentro de page-body: ancho completo hasta un máximo cómodo y PEGADO A LA IZQUIERDA (la sidebar fija ya delimita), en vez del container-xl centrado. No redefine ninguna clase de Tabler. */ .oym-container { width: 100%; max-width: 1900px; margin-inline: 0; padding-inline: 1.5rem; } /* .card-tinted — card enteramente tintada del color de estado (header más tintado, body con lavado suave). Tabler solo trae la barra lateral card-status-*; esto es componente OyM. Usa la mecánica de paleta Tabler (var(--tblr-*) + color-mix), NUNCA hex sueltos. Fallback sólido declarado ANTES del color-mix: un navegador sin soporte se queda con él (nunca card transparente). color-mix(in oklab) es Baseline 2023 y el propio Tabler ya lo usa; el fallback es seguro extra. */ .card-tinted { --oym-tint: var(--tblr-primary); background-color: var(--tblr-card-bg, #fff); background-color: color-mix(in oklab, var(--oym-tint) 4%, var(--tblr-card-bg, #fff)); border-color: var(--tblr-border-color); border-color: color-mix(in oklab, var(--oym-tint) 18%, var(--tblr-border-color)); } .card-tinted > .card-header { background-color: var(--tblr-card-bg, #fff); background-color: color-mix(in oklab, var(--oym-tint) 10%, var(--tblr-card-bg, #fff)); border-bottom-color: color-mix(in oklab, var(--oym-tint) 14%, var(--tblr-border-color)); } .card-tinted-success { --oym-tint: var(--tblr-success); } .card-tinted-danger { --oym-tint: var(--tblr-danger); } /* .card-tinted-warning — añadido en Fase 2 para la página "acceso pendiente" (docs/schema/design-system-tabler.md ya prevé este modificador para "otro color": define --oym-tint = var(--tblr-{color}), misma mecánica que success/danger). */ .card-tinted-warning { --oym-tint: var(--tblr-warning); } /* .card-tinted-primary / -info / -secondary — completan el juego para que la API por intención visual de los componentes (x-ui.card tinted / x-ui.status-panel, App\Support\Ui\UiIntent) tenga los seis casos cubiertos: sin esto un tinted="info" generaría una clase inexistente y la card saldría sin tintar. Misma mecánica que success/danger/warning: solo se define --oym-tint. */ .card-tinted-primary { --oym-tint: var(--tblr-primary); } .card-tinted-info { --oym-tint: var(--tblr-info); } .card-tinted-secondary { --oym-tint: var(--tblr-secondary); } /* .oym-datalist / .oym-datarow — lista clave-valor en UNA línea: icono | etiqueta (izq) | valor (der). El datagrid de Tabler apila título/valor en vertical y no sirve para este layout; esto porta el patrón info-row del sistema anterior sobre tokens Tabler (sin hex). El valor se alinea a la derecha y, si es largo (p.ej. ID Domicilio), rompe por caracter en vez de desbordar la fila. */ .oym-datarow { display: grid; grid-template-columns: 1.25rem auto minmax(0, 1fr); align-items: center; gap: 0.35rem 0.6rem; padding-block: 0.4rem; border-bottom: var(--tblr-border-width, 1px) solid var(--tblr-border-color); color: var(--tblr-body-color); } .oym-datarow:last-child { border-bottom: 0; } .oym-datarow > i { color: var(--tblr-primary); font-size: 0.875rem; line-height: 1; text-align: center; } .oym-datarow > .oym-datarow-label { color: var(--tblr-secondary); font-weight: var(--tblr-font-weight-medium, 600); cursor: default; } .oym-datarow > .oym-datarow-value { justify-self: end; min-width: 0; text-align: right; overflow-wrap: anywhere; font-weight: var(--tblr-font-weight-medium, 600); } /* En estrecho, el valor cae bajo la etiqueta y a la izquierda. */ @media (max-width: 575.98px) { .oym-datarow { grid-template-columns: 1.25rem 1fr; } .oym-datarow > .oym-datarow-value { grid-column: 2; justify-self: start; text-align: left; } } /* `x-ui.info-list apilada`: la MISMA disposición de arriba a cualquier ancho, para una lista en media card (desvíos del fijo, ADR 0042), donde en una línea la insignia se parte letra a letra. */ .oym-datalist--apilada .oym-datarow { grid-template-columns: 1.25rem 1fr; } .oym-datalist--apilada .oym-datarow > .oym-datarow-value { grid-column: 2; justify-self: start; text-align: left; } /* Un componente Livewire diferido DENTRO de una lista clave/valor (el titular de una línea móvil) obliga a envolver sus filas en un `
`: Livewire exige un elemento raíz por componente. Ese div no debe partir la lista en dos. `.oym-datarow:last-child` quita el borde a la última fila de CADA padre, así que la última fila del componente se quedaba sin línea y la lista aparecía cortada justo ahí — el hueco que delataba dónde empezaba el bloque diferido. Aquí se le devuelve, y solo se quita de verdad cuando ese div es lo último de la lista. */ .oym-datalist > div > .oym-datarow:last-child { border-bottom: var(--tblr-border-width, 1px) solid var(--tblr-border-color); } .oym-datalist > div:last-child > .oym-datarow:last-child { border-bottom: 0; } /* x-ui.metric con `stacked`: icono, valor y etiqueta centrados en columna, para las rejillas de KPIs de las cards de consumo. */ .oym-metric--stacked { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.25rem; } .oym-metric--stacked > i { font-size: 1.5rem; line-height: 1; } /* ============================================================ b) SHELL OyM (sidebar + topbar sobre la estructura Tabler) ============================================================ */ /* Sidebar: degradado azul del OyM anterior (style-old.css .oym-sidebar). .navbar-vertical.oym-sidebar (0-2-0) gana al .navbar de Tabler sin !important. */ .navbar-vertical.oym-sidebar { color: #fff; background: radial-gradient(260px 360px at 115% 30%, rgba(30, 144, 255, .52), transparent 63%), radial-gradient(260px 360px at 55% 100%, rgba(4, 84, 187, .58), transparent 58%), linear-gradient(180deg, #0787f4 0%, #065fca 27%, #063f94 58%, #05367e 100%); box-shadow: 10px 0 30px rgba(3, 29, 78, .16); } .navbar-vertical.oym-sidebar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 0%, transparent 62%, rgba(255,255,255,.05) 62.2%, transparent 78%), radial-gradient(circle at 98% 48%, rgba(255,255,255,.09), transparent 28%); } /* El contenido del sidebar por encima del ::after decorativo. */ .navbar-vertical.oym-sidebar > .container-fluid { position: relative; z-index: 1; } /* Texto de navegación: blanco como en el shell anterior (el sidebar lleva su propio data-bs-theme="dark", en los dos temas del portal: ya aclara, pero afinamos el contraste sobre azul). */ .navbar-vertical.oym-sidebar .nav-link { color: rgba(255, 255, 255, .94); } /* Sidebar real: ritmo compacto. Tabler deja bastante aire porque su navegación también contempla menús con subniveles; el portal tiene pocas entradas planas. */ .navbar-vertical.oym-sidebar .sidebar-nav .nav-link { min-height: 2.25rem; margin: 0 .35rem .125rem; padding: .4rem .75rem; border-radius: .5rem; } .navbar-vertical.oym-sidebar .sidebar-nav .nav-link-icon { width: 1.5rem; min-width: 1.5rem; margin-top: 2px; margin-right: .55rem; } .navbar-vertical.oym-sidebar .nav-link:hover { color: #fff; background: rgba(0, 36, 103, .26); } /* El FONDO de la entrada activa lo pone Tabler con `--tblr-navbar-active-bg`, no esta regla: la suya (`.navbar-vertical[class*=navbar-expand] .navbar-nav .nav-item.active>.nav-link`) gana por especificidad, y el degradado que había aquí no llegó a pintarse nunca, tampoco con la 1.5.1 (medido: `background-image: none`). Se retira y se fija la variable. Y fijarla hace falta desde Tabler 1.6: en la barra oscura pasó de blanco al 6 % a `var(--tblr-active-bg)`, que es el primario al 12 % — azul sobre azul, y la entrada activa se quedaba solo con el filete. El valor es el de la 1.5.1, así que se ve como hasta ahora. */ .navbar-vertical.oym-sidebar { --tblr-navbar-active-bg: rgba(255, 255, 255, .06); } .navbar-vertical.oym-sidebar .nav-item.active .nav-link, .navbar-vertical.oym-sidebar .nav-link.active { color: #fff; border-left:solid 3px #fff; } /* Sidebar en modo oscuro (ADR 0048): el degradado azul es de la piel CLARA. Con el portal en oscuro, el sidebar toma la superficie oscura de Tabler —la misma que la topbar y las cards—, sin la decoración del ::after, y el hover deja de ser azul marino. El sidebar ya lleva su propio data-bs-theme="dark", así que `--tblr-bg-surface` se resuelve oscuro dentro de él. El selector cuelga del atributo de , que es donde lo pone el script de tema. */ :root[data-bs-theme="dark"] .navbar-vertical.oym-sidebar { background: var(--tblr-bg-surface); border-right: 1px solid var(--tblr-border-color); box-shadow: none; } :root[data-bs-theme="dark"] .navbar-vertical.oym-sidebar::after { content: none; } :root[data-bs-theme="dark"] .navbar-vertical.oym-sidebar .nav-link:hover { background: rgba(255, 255, 255, .06); } /* Marca OyM (portado de style-old.css .brand-lockup / .brand-oym / .brand-subtitle). */ .brand-lockup { display: flex; align-items: flex-start; gap: 6px; color: #fff; text-decoration: none; white-space: nowrap; } .brand-lockup:hover { color: #fff; } .brand-oym { font-size: 30px; font-weight: 800; letter-spacing: -0.13em; line-height: .88; } .brand-subtitle { margin-top: 0; font-size: 8px; font-weight: 800; letter-spacing: .015em; line-height: .92; opacity: .96; } /* Cabeceras de grupo del menú (portado de style-old.css .sidebar-section). */ .sidebar-section { margin: 1rem .75rem .3rem; color: rgba(229, 244, 255, .82); font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; list-style: none; } /* Botón de plegado del sidebar. Vive en la topbar (ver layouts/app.blade.php) para seguir siendo alcanzable con la barra reducida a iconos. El plegado en sí NO se implementa aquí: lo trae Tabler con `html[data-bs-sidebar^=folded]`, que reajusta --tblr-sidebar-width y con ella el ancho del sidebar y el margen de topbar y .page-wrapper, oculta .nav-link-title, recoloca los dropdowns del menú y trae su propia transición y su prefers-reduced-motion. */ .sidebar-width-toggle { flex: 0 0 auto; margin-right: .75rem; } .sidebar-width-toggle .bi { font-size: 1.35rem; } /* Lo ÚNICO que Tabler no puede plegar por nosotros: las tres piezas propias del shell OyM, que no son componentes suyos —el subtítulo de la marca, las cabeceras de grupo (`.sidebar-section`, no `.nav-section-title`: la suya se oculta por debajo de lg y nuestro menú sí las enseña en móvil) y el texto del centro de ayuda—. El selector es `[data-bs-sidebar="folded"]` EXACTO y sin guardia de hover, a juego con el modo que normaliza layouts/partials/head.blade.php. No la lleva a propósito: con `folded-hover` la barra se despliega al pasar el ratón o al tener el foco dentro —lo segundo pasa en cada `wire:navigate`, que deja el foco en la entrada pulsada— y el plegado no se sostenía de una pantalla a otra. */ @media (min-width: 992px) { :where(html[data-bs-sidebar="folded"]) .oym-sidebar .brand-subtitle, :where(html[data-bs-sidebar="folded"]) .oym-sidebar .sidebar-section, :where(html[data-bs-sidebar="folded"]) .oym-sidebar .help-pill span { display: none; } /* La marca: Tabler le pone `overflow: hidden` al plegar, así que sin esto el lockup se ve cortado por la mitad en vez de encogido. */ :where(html[data-bs-sidebar="folded"]) .oym-sidebar .navbar-brand { justify-content: center; padding-inline: 0; } :where(html[data-bs-sidebar="folded"]) .oym-sidebar .brand-oym { font-size: 22px; letter-spacing: -.1em; } /* Sin cabeceras de grupo los bloques se funden: el separador las sustituye, que es lo que hace Tabler con las suyas. */ :where(html[data-bs-sidebar="folded"]) .oym-sidebar .sidebar-section + .nav-item { margin-top: .6rem; border-top: 1px solid rgba(255, 255, 255, .16); padding-top: .6rem; } :where(html[data-bs-sidebar="folded"]) .oym-sidebar .sidebar-nav .nav-link { justify-content: center; padding-inline: .5rem; } :where(html[data-bs-sidebar="folded"]) .oym-sidebar .sidebar-nav .nav-link-icon { margin-right: 0; } :where(html[data-bs-sidebar="folded"]) .oym-sidebar .help-pill { width: 2.5rem; margin-inline: auto; padding: 0; } } /* Centro de ayuda al pie del sidebar (portado de style-old.css .help-pill). */ .sidebar-footer { padding: 10px 8px 16px; } .help-pill { width: 100%; height: 36px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; background: rgba(0, 35, 92, .16); } /* Solo si es un enlace: el pie de versión es un y no debe parecer clicable. */ a.help-pill:hover { color: #fff; background: rgba(0, 35, 92, .3); } /* Buscador global del topbar (Tabler no trae buscador). */ .top-search { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; max-width: 640px; } .top-search .input-icon { flex: 1 1 auto; } /* Alinea el contenido de la topbar con .oym-container: el .container-fluid de Tabler trae de serie un padding lateral de --tblr-page-padding (0.75rem), mientras que .oym-container usa 1.5rem → sin esto la topbar queda ~12px desplazada respecto al contenido de la página. */ .oym-topbar > .container-fluid { padding-inline: 1.5rem; /* Lo ponía `navbar-expand-md`, que la topbar ya no lleva (ver layouts/app.blade.php: con esa clase, Tabler —desde la 1.5.1— oculta el sidebar entero). `.navbar` a secas envuelve. */ flex-wrap: nowrap; } /* .oym-badge-count — contador circular sobre un botón-icono (campana de la topbar). `badge-notification` de Tabler es una píldora de ancho variable pensada para textos como "9+"; con un solo dígito no queda redonda. Fuerza ancho mínimo = alto (círculo con 1 dígito) y deja que crezca en píldora si el contador tiene 2 dígitos, sin perder el posicionamiento de badge-notification (top/right + translate). */ .badge-notification.oym-badge-count { min-width: 1.125rem; height: 1.125rem; padding-inline: 0.2rem; border-radius: 1.125rem; font-size: 0.625rem; } /* [x-ui.datagrid] El rótulo, en el azul pizarra del sistema anterior en claro y en el gris secundario de Tabler en oscuro (su valor de fábrica): un hex a secas no se leía sobre el fondo oscuro (ADR 0048). */ .datagrid-title{ font-weight: 550; color: light-dark(#314365, var(--tblr-secondary)); letter-spacing: normal } .datagrid-title i{color:var(--tblr-primary)} .page-body {margin-top:0;} * {scrollbar-color: auto;} /* Aquí vivía la compensación del scrollbar del shell: anulábamos el anti-jank `:host,:root { margin-left: calc(100vw - 100%) }` de Tabler —pensado para layouts CENTRADOS, y que en el nuestro, anclado a la izquierda, metía un hueco intermitente de ~15px entre sidebar y contenido— y lo sustituíamos por `html { scrollbar-gutter: stable }`. Retirado el 2026-09-20: ese `margin-left` YA NO EXISTE. Está en Tabler 1.4.0 estable, pero no en el `1.4.0-dev.350` que servíamos ni en la 1.5.1 actual (verificado buscando `calc(100vw` en los tres ficheros: 1 aparición en la estable, 0 en las otras dos). Tabler trae hoy él mismo `html { scrollbar-gutter: stable }` y además un `@supports not` de respaldo que nuestra copia no tenía, así que las dos reglas propias sobraban: una anulaba algo inexistente y la otra duplicaba la suya, peor. Si alguna vez se vuelve a una versión de Tabler que traiga ese calc, el hueco intermitente reaparece y esto es lo que había que devolver. Y el 2026-09-29, con Tabler 1.6.1, vuelve el `scrollbar-gutter`: la 1.6.0 lo QUITÓ de `html` («empty gutter on non-scrolling pages»), y sin él el contenido salta ~16 px al pasar entre una pantalla con scroll y otra sin él (medido: la topbar pasa de 1008 a 1024 px a 1280 de ancho). Son las dos reglas que traía la 1.5.1, copiadas tal cual. Preferimos el hueco fijo de la derecha al salto, y el `calc(100vw` sigue sin existir (0 apariciones en la 1.6.1). */ html { scrollbar-gutter: stable; } @supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } } /* admin/menu — input numérico de orden en la tabla de ítems del sidebar. Ancho fijo estrecho para que el no se estire en la columna w-1. */ .oym-input-orden { width: 5rem; } .badge{-webkit-user-select: auto;-moz-user-select: auto; user-select:auto;cursor:default;--tblr-badge-font-size: 0.957143em;} /* Aquí vivía un `thead tr th` que tintaba de primaria la cabecera de TODAS las tablas del portal. Se retiró el 2026-09-19, y es DELIBERADO (decisión del propietario, confirmada): las cabeceras van ya con el gris de Tabler. Queda anotado porque la regla no era de un componente concreto —afectaba a todo, sin dueño que la explicara— y porque su rastro sigue en el comentario del redondeo de `.card-table`, más abajo. No la devuelvas sin preguntar; una tabla que necesite destacar su cabecera tiene antes `x-ui.card` con `accent`. */ td.badge{min-width:35px} /* Separador vertical entre bloques de columnas: el gris de siempre en claro y el borde de Tabler en oscuro (ADR 0048). */ .table-separator-r { border-right: solid 1px light-dark(#e0e4e8, var(--tblr-border-color));} .markdown>table>:not(caption)>*>*, .table>:not(caption)>*>* { padding: .35rem .75rem;} /* [informes/clientes] Las tablas son casi enteramente numéricas y muy anchas. Las cifras tabulares mantienen unidades, decenas y millares en el mismo eje al recorrer una columna; no cambian la familia tipográfica ni aumentan la densidad del informe. DIF necesita además anular la sombra interior con la que Bootstrap/Tabler pinta tanto `table-striped` como `table-hover`: esa sombra se dibuja POR ENCIMA de `bg-*-lt` y hacía que una celda par, una impar y la misma celda bajo el ratón tuvieran tres tintes distintos. El fondo sigue saliendo de UiIntent; esta regla solo impide que la franja lo tape. El total se separa con estructura, no con otro color de estado: fondo neutro muy leve, borde superior y algo más de aire. `--tblr-card-bg` conserva también el tema oscuro. */ .oym-informe-clientes .table { font-variant-numeric: tabular-nums; } .oym-informe-clientes-dif { box-shadow: none !important; } .oym-informe-clientes-total > * { padding-block: .6rem !important; border-top: 2px solid var(--tblr-border-color); border-bottom: 0; box-shadow: none !important; } .oym-informe-clientes-total > :not(.oym-informe-clientes-dif) { background-color: var(--tblr-card-bg, #fff); background-color: color-mix(in oklab, var(--tblr-secondary) 5%, var(--tblr-card-bg, #fff)); } .btn-list{display:unset} .btn-action {border:none} .navbar .navbar-nav .nav-link{margin-left:5px;margin-bottom:5px} .card-title,.page-title{cursor:default} .card-primary{border-top:3px solid var(--tblr-primary)} .card-secondary{border-top:3px solid var(--tblr-secondary)} .card-success{border-top:3px solid var(--tblr-success)} .card-danger{border-top:3px solid var(--tblr-danger)} .card-warning{border-top:3px solid var(--tblr-warning)} .card-info{border-top:3px solid var(--tblr-info)} .card-light{border-top:3px solid var(--tblr-light)} .card-dark{border-top:3px solid var(--tblr-dark)} .card-muted{border-top:3px solid var(--tblr-muted)} .card-blue{border-top:3px solid var(--tblr-blue)} .card-azure{border-top:3px solid var(--tblr-azure)} .card-indigo{border-top:3px solid var(--tblr-indigo)} .card-purple{border-top:3px solid var(--tblr-purple)} .card-pink{border-top:3px solid var(--tblr-pink)} .card-red{border-top:3px solid var(--tblr-red)} .card-orange{border-top:3px solid var(--tblr-orange)} .card-yellow{border-top:3px solid var(--tblr-yellow)} .card-lime{border-top:3px solid var(--tblr-lime)} .card-green{border-top:3px solid var(--tblr-green)} .card-teal{border-top:3px solid var(--tblr-teal)} .card-cyan{border-top:3px solid var(--tblr-cyan)} .card-primary-left{border-left:3px solid var(--tblr-primary)} .card-secondary-left{border-left:3px solid var(--tblr-secondary)} .card-success-left{border-left:3px solid var(--tblr-success)} .card-danger-left{border-left:3px solid var(--tblr-danger)} .card-warning-left{border-left:3px solid var(--tblr-warning)} .card-info-left{border-left:3px solid var(--tblr-info)} .card-light-left{border-left:3px solid var(--tblr-light)} .card-dark-left{border-left:3px solid var(--tblr-dark)} .card-muted-left{border-left:3px solid var(--tblr-muted)} .card-blue-left{border-left:3px solid var(--tblr-blue)} .card-azure-left{border-left:3px solid var(--tblr-azure)} .card-indigo-left{border-left:3px solid var(--tblr-indigo)} .card-purple-left{border-left:3px solid var(--tblr-purple)} .card-pink-left{border-left:3px solid var(--tblr-pink)} .card-red-left{border-left:3px solid var(--tblr-red)} .card-orange-left{border-left:3px solid var(--tblr-orange)} .card-yellow-left{border-left:3px solid var(--tblr-yellow)} .card-lime-left{border-left:3px solid var(--tblr-lime)} .card-green-left{border-left:3px solid var(--tblr-green)} .card-teal-left{border-left:3px solid var(--tblr-teal)} .card-cyan-left{border-left:3px solid var(--tblr-cyan)} /* [styleguide · snippets] El código de los ejemplos, negro sobre el gris de `bg-surface-secondary` en claro y con el color de texto de Tabler en oscuro (ADR 0048). */ pre code {color: light-dark(#000, var(--tblr-body-color))} /* ============================================================ d) CORRECCIONES DE LA REVISIÓN VISUAL 2026-09 Cada regla dice qué componente la necesita y qué medida la justifica. Detalle y números en docs/design-system/REVISION-VISUAL-2026-09.md. Desde el ADR 0048 el portal tiene modo oscuro: una regla de color de aquí tiene que valer en los dos temas (light-dark(), o un token que ya lo siga). ============================================================ */ /* [x-ui.action-button] Devuelve el anillo de foco a los botones ghost. Tabler 1.4.0-dev.350 declara `--tblr-btn-box-shadow: none` en .btn-ghost y en las 37 variantes .btn-ghost-*, y .btn:focus-visible compone `box-shadow: var(--tblr-btn-box-shadow), var(--tblr-btn-focus-box-shadow)`. `none` dentro de una lista separada por comas es sintaxis INVÁLIDA, así que el navegador descarta la declaración entera: los nueve botones de la barra de acciones se recorrían con el tabulador sin ningún anillo (medido con Playwright: 0 capas de box-shadow nuevas al recibir :focus-visible). Sustituir `none` por una sombra transparente de tamaño cero mantiene la lista válida y no pinta nada en reposo. Retirado el 2026-09-29 con Tabler 1.6.1: el foco pasó a ser un `outline` (`.btn:focus-visible { outline: var(--tblr-focus-ring-width) solid var(--tblr-focus-ring-color) }`) y la lista de box-shadow ya no interviene. Medido con el tabulador: los botones ghost pintan su anillo de 2 px como cualquier otro. Si se vuelve a una versión con el foco en box-shadow, esto es lo que había que devolver: `.btn.btn-ghost, .btn[class*="btn-ghost-"] { --tblr-btn-box-shadow: 0 0 #0000; }` */ /* [x-ui.status-badge] Un badge con un texto largo sin espacios (un IUA, un ID de domicilio) no debe romper la página. `.badge` de Tabler es `inline-flex; white-space: nowrap` SIN max-width: con "Z0000000000000000003182807-EG8145V5-…" el badge llegaba a x=600 en un viewport de 375 y provocaba 225 px de scroll horizontal en el body. Se deja que rompa y ocupe varias líneas en vez de desbordar; se sube line-height de 1 a 1.2 para que las líneas de un badge partido no se toquen (en un badge de una línea el alto sube ~2 px, el relleno es em). */ .badge { --tblr-badge-line-height: 1.2; max-width: 100%; white-space: normal; overflow-wrap: anywhere; } /* [x-ui.alert / x-ui.flash] Contraste del texto de la alerta. `.alert-{variante}` de Tabler pinta TODO el texto con el color de acento (`--tblr-alert-color: var(--tblr-alert-variant-color)`), lo que deja el mensaje de aviso en 2,00:1, el de éxito en 2,54:1 y el informativo en 2,83:1 sobre su propio fondo tintado. Como `x-ui.flash` es el canal por el que el portal informa del resultado de una operación —ahí el texto ES el mensaje, no una etiqueta de una palabra—, se oscurece el texto con la mecánica de paleta de Tabler (color-mix sobre la variable, sin hex), dejando intactos el fondo y el borde (que sí derivan de `--tblr-alert-variant-color`). `alert-important` no se toca: es blanco sobre fondo sólido y ya cumple. NOTA: la corrección equivalente para .badge y .avatar se retiró el 2026-09-07 — Tabler es la fuente de verdad visual de los badges. Ver §6 de docs/design-system/REVISION-VISUAL-2026-09.md antes de tocar esto. En OSCURO (ADR 0048) la misma mezcla va hacia el BLANCO: oscurecer el texto sobre un fondo que ya es oscuro lo dejaba ilegible. Es la misma mecánica en espejo, y en claro no cambia. */ .alert-primary { --tblr-alert-color: light-dark(color-mix(in oklab, var(--tblr-primary) 65%, black), color-mix(in oklab, var(--tblr-primary) 65%, white)); } .alert-secondary { --tblr-alert-color: light-dark(color-mix(in oklab, var(--tblr-secondary) 65%, black), color-mix(in oklab, var(--tblr-secondary) 65%, white)); } .alert-success { --tblr-alert-color: light-dark(color-mix(in oklab, var(--tblr-success) 65%, black), color-mix(in oklab, var(--tblr-success) 65%, white)); } .alert-danger { --tblr-alert-color: light-dark(color-mix(in oklab, var(--tblr-danger) 65%, black), color-mix(in oklab, var(--tblr-danger) 65%, white)); } .alert-warning { --tblr-alert-color: light-dark(color-mix(in oklab, var(--tblr-warning) 65%, black), color-mix(in oklab, var(--tblr-warning) 65%, white)); } .alert-info { --tblr-alert-color: light-dark(color-mix(in oklab, var(--tblr-info) 65%, black), color-mix(in oklab, var(--tblr-info) 65%, white)); } .alert-important { --tblr-alert-color: var(--tblr-white); } /* [x-ui.action-bar] Etiquetas largas en la barra de acciones. `.btn` de Tabler es `white-space: nowrap` y oym.css redefine `.btn-list` como `display: unset`, así que un botón con una acción de nombre largo ("Comprobar sincronismo del puerto GPON con la OLT") no puede encogerse y se salía de la card 9 px a 375 px de ancho. Acotado a la barra de acciones: en el resto del portal un botón que no parte su texto sigue siendo lo correcto. */ .oym-action-bar .btn { max-width: 100%; white-space: normal; text-align: start; } /* ============================================================ c) ALPINE ============================================================ */ /* Alpine oculta [x-cloak] hasta que se evalúa x-show. Se conserva porque sigue siendo necesario DENTRO de componentes Livewire (los únicos sitios donde hay Alpine: el layout base solo puede depender de Bootstrap — ver docs/CONVENTIONS.md). El overlay `.sidebar-backdrop` que vivía aquí se retiró al pasar el toggle del sidebar al collapse de Bootstrap, que es el patrón del design system (docs/ejemplo_estado_cliente.html) y no lleva overlay. */ [x-cloak] { display: none !important; } /* [pages/instalaciones/servicios] Marca de agua de la tarjeta de una línea. El icono grande y translúcido de la esquina inferior derecha viene de la pantalla anterior del portal; no lo cubre ningún componente del catálogo porque es puramente decorativo (por eso va con aria-hidden) y solo lo usa esta tarjeta. Se saca aquí en vez de dejarlo como style="" en la plantilla para que el markup siga siendo el del design system. `overflow:hidden` en la card es lo que impide que el icono desborde. */ .oym-card-servicio, .oym-card-telefonia { overflow: hidden; } /* La marca se posiciona contra el `card-body`, que es quien tiene el padding de la card; sin esto se colgaría de la propia card y el recorte sería distinto. */ .oym-card-servicio > .card-body, .oym-card-telefonia > .card-body { position: relative; } /* Alto mínimo para que las tarjetas de una fila no bailen cuando a una le falta la dirección o la fecha de alta. La de telefonía no lo lleva: solo tiene una línea. */ .oym-card-servicio { min-height: 13.75rem; } .oym-card-marca { position: absolute; right: 0; bottom: 0; font-size: 4rem; opacity: .07; transform: translate(-10px, 10px); pointer-events: none; } /* [pages/instalaciones/servicios] La tarjeta de una línea de baja se atenúa entera para distinguirla de un vistazo de las activas, sin dejar de usar el mismo componente de card. */ .oym-card-servicio-baja { opacity: .85; } /* [components/instalaciones/logo-operador] Logo PNG del operador de red en las tablas de planta (puertos de CTO, autofind, clientes caídos). Altura fija de 12 px con el ancho libre: los PNG del host estático no vienen todos a la misma escala, y sin el tope una fila de la tabla crecería solo por el logo que le toque. `vertical-align: middle` lo centra contra la línea de texto de la celda en vez de dejarlo colgando de la base, que es lo que el sistema anterior compensaba a mano con un `margin-bottom` distinto en cada pantalla. */ .oym-logo-operador { height: 12px; width: auto; vertical-align: middle; } /* Para `x-instalaciones.logo-operador size="md"`: el logo como TÍTULO de una card (portada, «Dónde crece …» y «Operadores en nuestra red»), donde los 12 px de una fila de tabla se leen como una errata. La altura sigue yendo en clase y no en un `height=` por lo mismo: los PNG del host estático no vienen todos a la misma escala. */ .oym-logo-operador-md { height: 20px; } /* En OSCURO, una píldora clara detrás del PNG (ADR 0048 § 6). Los logos son PNG pensados para fondo blanco —el de MASMOVIL es negro y desaparecía— y los mantiene un proceso ajeno, así que no se duplican en una variante oscura. `content-box` A PROPÓSITO: Tabler pone `border-box` a todo, y con él el relleno se comía la altura del logo (medido: el de 12 px de una fila de tabla se quedaba en 8). Así el relleno se suma por fuera; en claro no hay ni relleno ni fondo, y ahí la fila no cambia. Mismo selector que usa Tabler para sus `img-light`/`img-dark`. */ :root[data-bs-theme=dark] .oym-logo-operador { box-sizing: content-box; padding: 1px 3px; border-radius: var(--tblr-border-radius-sm); background-color: var(--tblr-gray-100); } /* [components/ui/table] EL REDONDEO DE ESQUINAS DE `card-table`, ACOTADO A LA PRIMERA FILA. Tabler redondea las esquinas superiores de la tabla con dos reglas que NO limitan la fila: .card-table tr td:first-child, .card-table tr th:first-child { border-start-start-radius: var(--tblr-card-border-radius) } .card-table tr td:last-child, .card-table tr th:last-child { border-start-end-radius: var(--tblr-card-border-radius) } O sea que TODAS las filas llevan las dos esquinas de arriba redondeadas, no solo la que toca el borde de la card. No se nota mientras la celda es transparente, y se nota en cuanto tiene relleno: el relleno de fila de Bootstrap 5.3 es un `box-shadow: inset 0 0 0 9999px` (ver `.table>:not(caption)>*>*`), y una sombra interior SE RECORTA con el border-radius del elemento. De ahí que cada fila con `table-{color}` y cada fila bajo el ratón de una `table-hover` salgan con las puntas de arriba comidas, mientras el resto de la fila es recto. Se arregla en dos pasos y no con un `border-radius: 0` a secas, porque el redondeo de la primera fila SÍ hace falta: es lo que impide que el relleno de ESA fila desborde la esquina de la card. Primero se anula en todas las filas, y luego se devuelve a la primera fila de la primera sección de la tabla —`> :first-child` es el thead, o el tbody cuando la tabla no lleva cabecera—. El ejemplo era el relleno de la CABECERA, que iba tintada con la primaria hasta el 2026-09-19; desde que esa regla se retiró, el `thead` es transparente y quien desborda es cualquier primera fila que sí tenga relleno: una `table-{color}` o la de arriba bajo el ratón en una `table-hover`, y también el propio thead el día que se le vuelva a poner fondo. Los cuatro selectores siguen haciendo falta por eso. Solo se toca el radio: el `border-inline-start`/`padding-inline` de las reglas de Tabler siguen aplicándose. La especificidad es la misma que la de Tabler y lo que decide es el orden de carga (oym.css va después de tabler.min.css en layouts/partials/head.blade.php), así que esta regla no funciona si algún día se invierten las dos etiquetas. */ .card-table tr > td:first-child, .card-table tr > th:first-child { border-start-start-radius: 0; } .card-table tr > td:last-child, .card-table tr > th:last-child { border-start-end-radius: 0; } .card-table > :first-child > tr:first-child > td:first-child, .card-table > :first-child > tr:first-child > th:first-child { border-start-start-radius: var(--tblr-card-border-radius); } .card-table > :first-child > tr:first-child > td:last-child, .card-table > :first-child > tr:first-child > th:last-child { border-start-end-radius: var(--tblr-card-border-radius); } /* [components/ui/table] SIN BORDE BAJO LA ÚLTIMA FILA DEL PIE (`tfoot`). Tabler quita el borde inferior de la última fila del `tbody` de una `card-table`, que es la que toca el borde de la card, pero NO la del `tfoot`: una tabla con fila de total pintaba una línea oscura pegada al borde de la card (pantallas de conciliación, 2026-10-04). El informe de clientes lo evitaba con su propia regla (`.oym-informe-clientes-total`); esta lo resuelve para cualquier `x-ui.table` con el slot `footer`. Solo la última fila: el borde que separa el pie del cuerpo se queda. */ .card-table > tfoot > tr:last-child > * { border-bottom-width: 0; } /* [/administracion/grupos] La columna «Permisos que otorga». Un grupo puede otorgar buena parte del catálogo, y los códigos de permiso son largos ('instalaciones.recarga_cto'). Sin acotar el ancho, la celda no tiene motivo para partir la lista: la tabla crece, `table-responsive` se lleva la fila a scroll horizontal y para saber qué otorga un grupo hay que arrastrar la tabla. Con el ancho acotado los badges saltan de línea y la fila crece hacia abajo, que es donde hay sitio. `max-inline-size` en `ch` y no en `px`: lo que se está acotando es una lista de códigos, y `ch` la mide en caracteres del propio tipo — unos dos códigos por línea. En pantallas estrechas manda `100%`, que es lo que evita que la celda fuerce el scroll que esta regla viene a quitar. */ .oym-permission-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; max-inline-size: min(100%, 56ch); } /* [x-ui.select con `searchable`] Altura del desplegable con búsqueda. El CSS de tom-select que servimos es su variante para Bootstrap, y usa el padding vertical de Bootstrap (.375rem = 6 px) con un line-height de 21 px: 35 px de alto. Los controles de Tabler miden 40 (padding 9 px + line-height 20 + los dos bordes), así que en una fila con un input al lado —la de la recarga de CTO— el desplegable queda cinco píxeles más bajo que el campo de al lado. `tabler-vendors.min.css` no lo corrige: de tom-select solo trae doce reglas de color, sombra y estado. Se igualan los tres valores que definen la altura de un control de Tabler, y solo esos: el borde, el radio, la sombra, el estado inválido y el modo oscuro los sigue pintando `.form-select` sobre el `.ts-wrapper` —tom-select copia el `class` del