/* geo-sercloud — estilos propios (lo que Tailwind por clases no cubre) */ :root { --sb-ancho: 256px; --sb-min: 64px; --navy: #14213d; --navy-2: #1b2a4e; --acento: #2f80ed; } html, body { height: 100%; } body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Sidebar colapsable: el estado se pone en antes del primer paint (localStorage geo_sb) */ aside.sb { width: var(--sb-ancho); transition: width .15s ease, transform .2s ease; } html.sb-min aside.sb { width: var(--sb-min); } html.sb-min .sb-label, html.sb-min .sb-seccion, html.sb-min .sb-marca { display: none; } html.sb-min .sb-item { justify-content: center; padding-left: 0; padding-right: 0; } html.sb-min .sb-logo-min { display: flex; } .sb-logo-min { display: none; } html.sb-min .sb-cuando-abierto { display: none; } html:not(.sb-min) .sb-cuando-min { display: none; } /* Móvil: off-canvas */ @media (max-width: 767px) { aside.sb { position: fixed; inset: 0 auto 0 0; z-index: 40; transform: translateX(-100%); width: var(--sb-ancho) !important; } html.sb-movil aside.sb { transform: translateX(0); } html.sb-min .sb-label, html.sb-min .sb-seccion, html.sb-min .sb-marca { display: initial; } html.sb-min .sb-item { justify-content: flex-start; padding-left: .75rem; padding-right: .75rem; } html.sb-min .sb-logo-min { display: none; } html.sb-min .sb-cuando-abierto { display: initial; } html.sb-min .sb-cuando-min { display: none; } } /* ---------------------------------------------------------------- menú por módulos (observación 13, obs13.png) PORTAFOLIO · ESTIMATE · PROJECT · MACHINE 3D con título y subtítulo; el módulo de la pantalla lleva la barra amarilla. .sb-grupo.is-abierto despliega su lista (.sb-hijos-c); contraído (64 px), la lista abre al costado (.is-fly). */ :root { --sb-amarillo: #f5c542; } .sb-nav { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; } .sb-mod { position: relative; display: flex; align-items: center; gap: .8rem; width: calc(100% - .75rem); margin: .1rem .375rem; padding: .5rem .6rem .5rem .75rem; border-radius: .6rem; text-align: left; color: #e2e8f0; } .sb-mod:hover { background: rgba(255,255,255,.06); } .sb-mod-ico { display: grid; place-items: center; width: 2rem; flex: none; color: #f1f5f9; } .sb-mod-ico.is-amarillo { color: var(--sb-amarillo); } .sb-mod-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.2; } .sb-mod-txt b { font-size: .86rem; font-weight: 600; letter-spacing: .04em; color: #f8fafc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-mod-txt small { font-size: .74rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .1rem; } .sb-mod-flecha { flex: none; color: #94a3b8; display: grid; transition: transform .15s ease; } .sb-mod.is-activo { background: rgba(255,255,255,.07); } .sb-mod.is-activo::before { content: ''; position: absolute; left: -.375rem; top: .3rem; bottom: .3rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--sb-amarillo); } .sb-mod.is-activo .sb-mod-ico, .sb-mod.is-activo .sb-mod-txt b { color: var(--sb-amarillo); } .sb-grupo.is-abierto > [data-sb-alternar] .sb-mod-flecha { transform: rotate(90deg); color: var(--sb-amarillo); } .sb-grupo-mod + .sb-grupo-mod, a.sb-mod + .sb-grupo-mod { border-top: 1px solid rgba(255,255,255,.06); } .sb-hijos-c { display: none; margin: .15rem .5rem .4rem .75rem; padding: .3rem; border-radius: .6rem; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); } .sb-grupo.is-abierto > .sb-hijos-c { display: block; } .sb-fly-titulo { display: none; } .sb-sub { display: flex; align-items: center; gap: .7rem; padding: .34rem .6rem; border-radius: .45rem; font-size: .86rem; color: #cbd5e1; } a.sb-sub:hover, button.sb-sub:hover { background: rgba(255,255,255,.07); color: #fff; } .sb-sub-ico { color: #cbd5e1; } .sb-sub.is-activo { background: rgba(245,197,66,.17); color: #fff; } .sb-sub.is-activo .sb-sub-ico { color: var(--sb-amarillo); } .sb-sub.is-dentro { color: #fff; } .sb-sub.is-pronto { cursor: default; color: #94a3b8; } .sb-sub.is-pronto .sb-sub-ico { color: #64748b; } .sb-pronto { flex: none; font-size: .6rem; line-height: 1; padding: .25rem .42rem; border-radius: 999px; background: rgba(255,255,255,.1); color: #e2e8f0; border: 1px solid rgba(255,255,255,.12); } .sb-nieto { padding-left: .9rem; } .sb-sep { height: 1px; margin: .45rem .9rem; background: rgba(255,255,255,.1); } .sb-gen { display: flex; align-items: center; gap: .8rem; width: calc(100% - .75rem); margin: .05rem .375rem; padding: .42rem .6rem .42rem 1rem; border-radius: .5rem; font-size: .9rem; color: #e2e8f0; text-align: left; } .sb-gen:hover { background: rgba(255,255,255,.06); } .sb-gen-ico { color: #cbd5e1; } .sb-gen.is-activo { color: #fff; } .sb-gen.is-activo .sb-gen-ico { color: var(--sb-amarillo); } @media (max-height: 800px) and (min-width: 768px) { .sb-mod { padding-top: .36rem; padding-bottom: .36rem; } .sb-sub { padding-top: .24rem; padding-bottom: .24rem; } .sb-gen { padding-top: .3rem; padding-bottom: .3rem; } } /* Contraído (escritorio): solo el ícono; la lista del módulo se abre al costado, sobre el contenido. */ @media (min-width: 768px) { html.sb-min .sb-mod, html.sb-min .sb-gen { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; } html.sb-min .sb-mod-ico { width: auto; } html.sb-min .sb-grupo > .sb-hijos-c { display: none; } html.sb-min .sb-grupo.is-fly > .sb-hijos-c { display: block; position: fixed; left: calc(var(--sb-min) + .25rem); top: var(--sb-fly-top, 4rem); z-index: 60; width: 16rem; margin: 0; background: #14213d; border-color: rgba(255,255,255,.14); box-shadow: 0 10px 30px rgba(2,6,23,.45); max-height: calc(100vh - var(--sb-fly-top, 4rem) - .5rem); overflow-y: auto; } html.sb-min aside.sb .sb-grupo.is-fly .sb-hijos-c .sb-label { display: initial; } html.sb-min aside.sb .sb-grupo.is-fly .sb-hijos-c .sb-item { justify-content: flex-start; padding-left: .6rem; padding-right: .6rem; } html.sb-min .sb-grupo.is-fly .sb-fly-titulo { display: block; padding: .3rem .6rem .45rem; font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--sb-amarillo); } html.sb-min .sb-grupo.is-fly .sb-fly-titulo small { display: block; font-weight: 400; letter-spacing: 0; color: #94a3b8; } html.sb-min .sb-grupo.is-fly .sb-proyecto .flex > a.sb-label { display: grid; } html.sb-min .sb-mod.is-activo::before { left: -.375rem; } } /* Paneles estilo Odoo */ .panel { background: #fff; border: 1px solid #e2e8f0; border-radius: .5rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); display: flex; flex-direction: column; min-height: 0; } .panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; padding: .625rem 1rem; border-bottom: 1px solid #e2e8f0; font-weight: 600; font-size: .875rem; } .panel-head > span:first-child, .panel-head > div:first-child > span:first-child { white-space: nowrap; } .panel-body { padding: 1rem; min-height: 0; } .panel-scroll { overflow: auto; min-height: 0; flex: 1 1 auto; } /* Tabla */ table.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; } table.tabla thead th { position: sticky; top: 0; background: #f8fafc; color: #475569; font-weight: 600; text-align: left; padding: .5rem .75rem; border-bottom: 1px solid #e2e8f0; font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; z-index: 1; } table.tabla tbody td { padding: .5rem .75rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; } table.tabla tbody tr:hover td { background: #f8fafc; } /* Botones e inputs */ .btn { display: inline-flex; align-items: center; gap: .375rem; padding: .4rem .8rem; border-radius: .375rem; font-size: .875rem; font-weight: 500; border: 1px solid transparent; line-height: 1.25; white-space: nowrap; cursor: pointer; } /* Fondo más oscuro que el acento de marca: #2f80ed con texto blanco daba 3,87:1; #1b66cc da 5,5:1 (AA, auditoría 18-09). */ .btn-primario { background: #1b66cc; color: #fff; } .btn-primario:hover { background: #1552a8; } .btn-secundario { background: #fff; color: #334155; border-color: #cbd5e1; } .btn-secundario:hover { background: #f8fafc; } .btn-peligro { background: #fff; color: #b91c1c; border-color: #fecaca; } .btn-peligro:hover { background: #fef2f2; } .btn-sm { padding: .25rem .55rem; font-size: .78rem; } .input { width: 100%; border: 1px solid #cbd5e1; border-radius: .375rem; padding: .45rem .65rem; font-size: .875rem; background: #fff; } .input:focus { outline: 2px solid #bfdbfe; border-color: var(--acento); } .label { display: block; font-size: .75rem; font-weight: 600; color: #475569; margin-bottom: .25rem; } .chip { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; } .chip-ok { background: #dcfce7; color: #166534; } .chip-off { background: #f1f5f9; color: #475569; } .chip-warn { background: #fef3c7; color: #92400e; } .chip-info { background: #dbeafe; color: #1e40af; } .chip-err { background: #fee2e2; color: #991b1b; } /* Pantallas bajas: el menú del superadmin (18 ítems) no cabía a 700 px de alto por 26 px */ @media (max-height: 800px) and (min-width: 768px) { aside.sb nav .sb-item { padding-top: 3px; padding-bottom: 3px; } aside.sb nav .sb-seccion { padding-top: 2px; } } /* Tabla de muchas filas que debe caber sin scroll (Ingresos de 12 meses) */ table.tabla-compacta tbody td { padding-top: .3rem; padding-bottom: .3rem; } /* Matriz de planes (/gestion): ancho fijo por columna para que nunca pida scroll horizontal, con 4 planes o más */ /* Se adapta al ancho real de su caja (.mz-caja, container query), no al de la ventana: el menú abierto o contraído y la cantidad de planes cambian el espacio. */ .mz-caja { container-type: inline-size; } table.matriz { table-layout: fixed; } table.matriz col.mz-col-fun { width: 36%; } table.matriz thead th { text-transform: none; letter-spacing: 0; padding: .4rem .5rem; vertical-align: bottom; } table.matriz thead th.mz-th-fun { white-space: normal; line-height: 1.2; } table.matriz tbody td { padding: .35rem .5rem; } table.matriz .mz-plan { text-align: center; } table.matriz .mz-plan-nombre { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; font-weight: 600; color: #1e293b; } table.matriz .mz-plan-nombre:hover { color: var(--acento); text-decoration: underline; } table.matriz .mz-plan-sub { display: block; font-size: 10.5px; font-weight: 400; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } table.matriz .mz-punto { display: inline-block; width: 6px; height: 6px; border-radius: 999px; margin-right: 3px; vertical-align: 1px; } table.matriz .mz-ayuda { font-size: 11px; color: #64748b; line-height: 1.3; } table.matriz .mz-input { width: 100%; min-width: 0; border: 1px solid #cbd5e1; border-radius: .3rem; padding: .2rem .4rem; font-size: .8rem; text-align: right; font-variant-numeric: tabular-nums; background: #fff; } table.matriz .mz-input:focus { outline: 2px solid #bfdbfe; border-color: var(--acento); } table.matriz .mz-falta { position: absolute; left: 100%; margin-left: 3px; width: 14px; height: 14px; border-radius: 999px; background: #f59e0b; color: #fff; font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; cursor: help; } @container (max-width: 780px) { table.matriz col.mz-col-fun { width: 28%; } table.matriz thead th, table.matriz tbody td { padding: .3rem .3rem; } table.matriz .mz-input { font-size: .75rem; padding: .2rem .25rem; } table.matriz .mz-mes, table.matriz .mz-estado-txt { display: none; } } @container (max-width: 520px) { table.matriz col.mz-col-fun { width: 25%; } table.matriz thead th, table.matriz tbody td { padding: .25rem .1rem; } table.matriz .mz-input { font-size: .66rem; padding: .2rem .1rem; letter-spacing: -.01em; } table.matriz .mz-ayuda-larga { display: none; } table.matriz tbody td:first-child { font-size: .76rem; } } .mz-pie { display: flex; align-items: center; gap: .75rem; padding: .5rem 1rem; padding-right: 4.5rem; border-top: 1px solid #e2e8f0; background: #f8fafc; } .mz-modal { position: relative; width: 100%; max-width: 32rem; max-height: 100%; overflow: auto; background: #fff; border-radius: .5rem; box-shadow: 0 20px 25px -5px rgba(15, 23, 42, .2); } @media (max-width: 639px) { .mz-pie { padding-left: .5rem; } } /* Tablas de /gestion en pantallas angostas: celdas más juntas para que quepan sin scroll horizontal; Ingresos deja libre la franja del botón flotante de observaciones para que no tape los montos de la derecha. */ @media (max-width: 639px) { table.tabla-angosta thead th, table.tabla-angosta tbody td { padding-left: .4rem; padding-right: .4rem; } table.tabla-ingresos { width: calc(100% - 3.75rem); } } /* Ventanas bajas (700 px): las 13 filas de Ingresos caben sin scroll */ @media (max-height: 720px) { table.tabla-compacta tbody td { padding-top: .2rem; padding-bottom: .2rem; } } /* Pestañas del panel del proyecto: la columna es angosta (1024 px con menú abierto, teléfono) y las tablas se ajustan a su contenedor en vez de pedir scroll horizontal. Bajo 640 px de contenedor se ocultan las columnas .c-sec y aparece .solo-angosto (el mismo dato dentro de la celda principal); bajo 460 px, también .c-ter. Los botones con ícono quedan solo con el ícono (.lbl). */ .tab-cuerpo { container-type: inline-size; } .tab-cuerpo .solo-angosto { display: none; } table.tabla td.acciones { white-space: nowrap; width: 1%; } @container (max-width: 640px) { .tab-cuerpo .c-sec { display: none; } .tab-cuerpo .solo-angosto { display: block; } .tab-cuerpo table.tabla thead th, .tab-cuerpo table.tabla tbody td { padding-left: .4rem; padding-right: .4rem; } .tab-cuerpo .acciones .lbl { display: none; } .tab-cuerpo .acciones .btn-sm { padding: .3rem .4rem; } } .tab-cuerpo .solo-mini { display: none; } @container (max-width: 460px) { .tab-cuerpo .c-ter { display: none; } .tab-cuerpo .solo-mini { display: block; } } /* Entre 640 y 820 px de pestaña (768 con el menú contraído deja 670) se ven todas las columnas y la celda de acciones, que no se parte, sumaba 255 px con «Evaluar · Editar · Borrar» rotulados: Planes pedía 90 px de scroll y Caminos 5 (AUD-2026-09-13-33). Bajo 820 px los botones con ícono quedan solo con el ícono (el rótulo sigue en el title). */ @container (max-width: 820px) { .tab-cuerpo .acciones .lbl { display: none; } .tab-cuerpo .acciones .btn-sm { padding: .3rem .4rem; } } /* Listas (G48): la tabla se ajusta al ancho real de su panel (menú lateral abierto o contraído), no al de la ventana, para que nunca pida scroll horizontal. Cada columna de menor prioridad lleva .c-xl/.c-lg/.c-md/.c-sm y se oculta bajo 1100/900/700/520 px de panel; el mismo dato reaparece dentro de la celda principal con .bajo-xl/.bajo-lg/ .bajo-md/.bajo-sm. 768 px con el menú abierto deja ~495 px de panel; 1024 abierto, ~750; 1400 abierto, ~1125. */ .lista { container-type: inline-size; } .lista .bajo-xl, .lista .bajo-lg, .lista .bajo-md, .lista .bajo-sm, .lista .bajo-md-inline { display: none; } @container (max-width: 1100px) { .lista .c-xl { display: none; } .lista .bajo-xl { display: block; } .lista table.tabla thead th { white-space: normal; } } @container (max-width: 900px) { .lista .c-lg { display: none; } .lista .bajo-lg { display: block; } .lista table.tabla thead th, .lista table.tabla tbody td { padding-left: .5rem; padding-right: .5rem; } } @container (max-width: 700px) { .lista .c-md { display: none; } .lista .bajo-md { display: block; } .lista .bajo-md-inline { display: inline; } .lista .acciones .lbl { display: none; } .lista .acciones .btn-sm { padding: .3rem .4rem; } } @container (max-width: 520px) { .lista .c-sm { display: none; } .lista .bajo-sm { display: block; } .lista table.tabla thead th, .lista table.tabla tbody td { padding-left: .35rem; padding-right: .35rem; } .lista table.tabla thead th { letter-spacing: 0; } } /* Ficha del estado de pago: son diez columnas y la descripción de la partida es larga, así que el corte de .c-xl se adelanta a 1250 px de panel (1366 con el menú abierto deja ~1126 y se salían «% » y el monto acumulado) y la descripción no baja de 14 rem, para que no quede una palabra por línea. */ .lista table.ep-tabla tbody td:first-child { min-width: 14rem; } @container (max-width: 1250px) { .lista table.ep-tabla .c-xl { display: none; } } @container (max-width: 700px) { .lista table.ep-tabla tbody td:first-child { min-width: 0; } } /* Estado activo de un filtro o pestaña con fondo de acento: el acento #2f80ed con texto blanco da 3,87:1; este tono da 5,5:1 (AA). Los botones de acción siguen con .btn-primario. */ .btn-activo { background: #1b66cc; color: #fff; border-color: #1b66cc; } /* Accesos: con el panel angosto, el nombre de cada persona va en vertical para que la matriz quepa sin scroll lateral. */ .acc-nom { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @container (max-width: 1100px) { .lista .acc-usr { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; } .lista .acc-nom { max-width: none; max-height: 8rem; } } /* Teléfono: sin la línea del rol (queda en el title del encabezado) caben 6 personas a 375 px. */ @container (max-width: 520px) { .lista .acc-rol { display: none; } } /* Checkout: los límites del plan en dos columnas solo si caben (a 768 con el menú abierto «50 GB» montaba sobre «Comparaciones por mes»). */ .ck-caja { container-type: inline-size; } /* Angosto: dos columnas en letra chica, para que el detalle quepa sin barra (G66). */ @container (max-width: 460px) { .ck-caja .ck-dl { column-gap: .75rem; row-gap: 0; font-size: .72rem; } .ck-caja .ck-dl > div { padding-block: .15rem; } } /* Última columna con botón («Ver» de la bitácora): deja libre la franja del botón flotante de observaciones. */ .lista table.tabla th.fab-libre, .lista table.tabla td.fab-libre { padding-right: 3.75rem; } /* La misma franja cuando la última columna se oculta bajo 520 px y la anterior pasa a ser la del borde. */ @container (max-width: 520px) { .lista table.tabla th.fab-libre-sm, .lista table.tabla td.fab-libre-sm { padding-right: 3.75rem; } } /* /plan, Historial: Pedidos y Cobros lado a lado solo con 1000 px de panel (1366 con el menú abierto deja ~1090); debajo se apilan y cada una hace scroll vertical en su mitad (a 768 lado a lado pedían +300 px, AUD-2026-09-13-32). */ .plan-hist-caja { container-type: inline-size; } .plan-hist { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); } .plan-hist > * + * { border-top: 1px solid #e2e8f0; } @container (min-width: 1000px) { .plan-hist { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .plan-hist > * + * { border-top: 0; border-left: 1px solid #e2e8f0; } } /* Documentación (G33): el índice flota encima del contenido en todos los anchos y se abre con el botón «Índice» (data-indice="1" en .doc); la captura del paso usa todo el ancho (Eugenio, 19-09, alternativa A). */ .doc-indice { display: none; position: absolute; top: 0; bottom: 0; left: 0; z-index: 30; width: min(21rem, 90%); box-shadow: 0 20px 25px -5px rgba(15, 23, 42, .25); } .doc[data-indice="1"] .doc-indice { display: flex; } .doc [hidden] { display: none !important; } .doc-item { display: flex; align-items: center; gap: .5rem; padding: .2rem .5rem; border-radius: .375rem; font-size: .8125rem; line-height: 1.25; color: #334155; } .doc-item:hover { background: #f1f5f9; } .doc-item.activo { background: #eff6ff; color: #1d4ed8; font-weight: 600; } .doc-punto { width: .5rem; height: .5rem; border-radius: 999px; background: #cbd5e1; flex-shrink: 0; } .doc-punto.leido { background: #22c55e; } .doc-det > summary { display: flex; align-items: center; gap: .35rem; padding: .22rem .5rem; border-radius: .375rem; font-size: .8125rem; color: #334155; cursor: pointer; list-style: none; } .doc-det > summary::-webkit-details-marker { display: none; } .doc-det > summary:hover { background: #f1f5f9; } .doc-det[open] .doc-det-flecha { transform: rotate(90deg); } .doc-det-flecha { transition: transform .15s ease; color: #94a3b8; flex-shrink: 0; } /* Grupo plegado: sus filas fuera del flujo (Chrome las deja con caja propia bajo content-visibility y las sondas de tests/medir_ui.js las contaban como texto encima de texto). */ .doc-det:not([open]) > :not(summary) { display: none; } .doc-det-grupo > summary { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #475569; } .doc-paso { display: inline-flex; align-items: center; gap: .4rem; max-width: 15rem; padding: .2rem .6rem .2rem .25rem; border: 1px solid #e2e8f0; border-radius: 999px; font-size: .75rem; color: #64748b; background: #fff; } .doc-paso:hover { border-color: #cbd5e1; color: #334155; } .doc-paso.activo { border-color: var(--acento); color: #1e3a8a; background: #eff6ff; font-weight: 600; } .doc-paso-num { width: 1.4rem; height: 1.4rem; border-radius: 999px; border: 2px solid #cbd5e1; display: grid; place-items: center; font-size: .7rem; font-weight: 700; flex-shrink: 0; background: #fff; color: #64748b; } .doc-paso.activo .doc-paso-num { border-color: var(--acento); color: var(--acento); } .doc-paso.hecho .doc-paso-num { background: #22c55e; border-color: #22c55e; color: #fff; } .doc-paso-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 639px) { .doc-paso .doc-paso-txt { display: none; } .doc-paso { padding-right: .25rem; } } .doc-ctx { border: 1px solid #e2e8f0; border-left: 4px solid var(--acento); border-radius: .5rem; background: #f8fafc; padding: .75rem .9rem; } .doc-lista { list-style: none; padding: 0; margin: 0; } .doc-lista li { position: relative; padding-left: 1rem; margin-top: .3rem; font-size: .8125rem; color: #334155; line-height: 1.35; } @media (max-width: 639px) { .doc-lista li { margin-top: .2rem; font-size: .78rem; line-height: 1.3; } } .doc-lista li::before { content: ''; position: absolute; left: .2rem; top: .45rem; width: .35rem; height: .35rem; border-radius: 999px; background: var(--acento); } .doc-ctx p, .doc-lista li, .doc-paso-grid p, .doc-texto { text-align: justify; hyphens: none; } /* Acción de «Qué puede hacer aquí» con captura propia: se elige y la foto de la derecha cambia a la de esa acción. */ .doc-accion { display: block; width: 100%; text-align: justify; hyphens: none; color: inherit; border-radius: .3rem; padding: .05rem .3rem; margin-left: -.3rem; cursor: pointer; } .doc-accion:hover { background: #eff6ff; color: #1e3a8a; } .doc-accion.activa { background: #dbeafe; color: #1e3a8a; font-weight: 500; } .doc-accion-icono { display: inline-block; width: .85rem; height: .85rem; margin-left: .3rem; vertical-align: -.1rem; color: #1b66cc; } /* Textos explicativos de todas las pantallas, también justificados (Eugenio, 18-09); las utilidades text-center/right mandan. */ main p { text-align: justify; hyphens: none; } .doc-paso-edit { border: 1px solid #e2e8f0; border-radius: .5rem; padding: .35rem .5rem; background: #fff; } .doc-paso-edit.abierto { border-color: #93c5fd; background: #f8fbff; } .doc-paso-edit .doc-paso-num { cursor: pointer; } @media (max-width: 1279px) { .doc-oculto-movil { display: none !important; } } /* Procedimiento abierto: se adapta al ancho real del panel (menú lateral abierto o contraído), no al de la ventana. */ .doc-proc { container-type: inline-size; } /* Un paso = una columna a todo el ancho; «¿Qué hace esta pantalla?» es un botón arriba a la derecha que abre la ayuda flotando encima de la captura (Eugenio, 19-09: la columna fija achicaba la imagen). */ .doc-paso-grid { display: grid; gap: .75rem; align-items: start; position: relative; } .doc-asa { display: none; } .doc-flota { position: absolute; top: 0; right: 0; z-index: 15; } .doc-flota > summary { list-style: none; display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border: 1px solid #bfdbfe; border-radius: 999px; background: #eff6ff; font-size: .75rem; font-weight: 600; color: #1e3a8a; cursor: pointer; } .doc-flota > summary::-webkit-details-marker { display: none; } .doc-flota[open] > summary { background: var(--acento); border-color: var(--acento); color: #fff; } .doc-flota[open] > summary svg { color: #fff; } .doc-paso-grid:has(> .doc-flota) .doc-paso-cab { padding-right: 13rem; } /* Ayuda de una pantalla desde 1280 px: columna angosta de texto, así que sin justificar (deja huecos entre palabras). */ @media (min-width: 1280px) { .doc-pant-izq p, .doc-pant-izq .doc-lista li, .doc-pant-izq .doc-accion { text-align: left; } } /* Con espacio (≥ 900 px de panel): pasos, título, texto y ayuda en una columna angosta a la izquierda y la captura a la derecha con todo el alto del panel (Eugenio, 19-09: arriba del todo la captura quedaba baja y no crecía). display: contents deja los hijos del paso visible como celdas de .doc-cuerpo; x-show sigue ocultando el resto. */ @container (min-width: 900px) { .doc-proc .doc-cuerpo { display: grid; grid-template-columns: 17rem minmax(0, 1fr); grid-template-rows: auto auto auto auto minmax(0, 1fr); column-gap: 1rem; row-gap: .6rem; align-content: stretch; } .doc-proc .doc-cuerpo > * { grid-column: 1; } .doc-proc .doc-cuerpo .doc-paso-grid, .doc-cuerpo .doc-paso-in { display: contents; } .doc-proc .doc-cuerpo .doc-pasos { flex-direction: column; flex-wrap: nowrap; align-items: stretch; } .doc-proc .doc-cuerpo .doc-pasos .doc-paso { max-width: none; width: 100%; } .doc-proc .doc-cuerpo .doc-paso-cab { grid-column: 1; flex-direction: column; gap: .15rem; padding-right: 0 !important; } .doc-proc .doc-cuerpo .doc-paso-in > p { grid-column: 1; margin-top: 0; } .doc-proc .doc-cuerpo .doc-foto { grid-column: 2; grid-row: 1 / -1; margin-top: 0; min-height: 0; } .doc-proc .doc-cuerpo { position: relative; } .doc-proc .doc-cuerpo .doc-paso-in > p { text-align: left; } .doc-proc .doc-cuerpo .doc-flota { position: static; grid-column: 1; justify-self: start; } /* La ayuda abierta se apoya sobre la esquina de la captura, dentro del panel (no lo alarga). */ .doc-proc .doc-cuerpo .doc-flota .doc-ctx { top: 1rem; left: calc(17rem + 2rem); right: auto; max-height: calc(100% - 2rem); } } .doc-flota .doc-ctx { position: absolute; right: 0; top: calc(100% + .35rem); width: min(24rem, 85vw); max-height: 60vh; overflow: auto; box-shadow: 0 20px 25px -5px rgba(15, 23, 42, .25); background: #fff; } @container (max-width: 900px) { .doc-paso { max-width: 10rem; } } /* Teléfono: números en vez de nombres de paso y, de la ayuda de la pantalla, solo el título y sus enlaces. */ @container (max-width: 640px) { .doc-paso:not(.activo) .doc-paso-txt { display: none; } .doc-paso:not(.activo) { padding-right: .25rem; } .doc-proc .doc-ctx > p, .doc-proc .doc-ctx > ul { display: none; } } /* Menú lateral en teléfono con 700 px de alto: los 19 ítems del superadmin (con Documentación) no cabían por 1 px. */ @media (max-height: 720px) and (max-width: 767px) { aside.sb nav .sb-item { padding-top: 3px; padding-bottom: 3px; } } /* Ayuda a esconder por Alpine antes de que cargue */ [x-cloak] { display: none !important; } /* ---------------------------------------------------------------- panel del proyecto: vista completa (Eugenio 16-09) html[data-vista-proyecto="completa"]: sin menú lateral ni márgenes; el visor llena
, las cinco cifras y los avisos flotan arriba a la izquierda (al lado del riel del visor) y las pestañas flotan a la derecha. Los controles del visor que viven a la derecha (vistas, ficha, leyenda, línea de tiempo) se corren para no quedar bajo las pestañas. */ [data-vista-completa] .vista-txt-completa { display: none; } html[data-vista-proyecto="completa"] [data-vista-completa] .vista-txt-normal { display: none; } html[data-vista-proyecto="completa"] [data-vista-completa] .vista-txt-completa { display: inline-flex; } html[data-vista-proyecto="completa"] [data-vista-completa] { background: #14213d; color: #fff; border-color: #14213d; } @media (min-width: 1024px) { html[data-vista-proyecto="completa"] body:has([data-proy-raiz]) aside.sb { display: none; } html[data-vista-proyecto="completa"] main:has([data-proy-raiz]) { padding: 0; } html[data-vista-proyecto="completa"] [data-proy-raiz] { position: relative; gap: 0; } html[data-vista-proyecto="completa"] [data-proy-fila] { position: absolute; inset: 0; gap: 0; --ancho-3d: min(560px, 36vw); } html[data-vista-proyecto="completa"] [data-proy-visor] { border: 0; border-radius: 0; } html[data-vista-proyecto="completa"] [data-proy-cifras] { position: absolute; z-index: 20; top: .6rem; left: .6rem; grid-template-columns: repeat(5, minmax(0, 150px)); gap: .4rem; pointer-events: none; } html[data-vista-proyecto="completa"] [data-proy-cifras] > .panel { background: rgba(15, 23, 42, .82); border-color: rgba(255, 255, 255, .08); backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0, 0, 0, .3); padding: .35rem .7rem; pointer-events: auto; } html[data-vista-proyecto="completa"] [data-proy-cifras] > .panel > div:nth-child(1) { color: #94a3b8; font-size: 10px; } html[data-vista-proyecto="completa"] [data-proy-cifras] > .panel > div:nth-child(2) { --cifra-max: 1.25rem; } html[data-vista-proyecto="completa"] [data-proy-cifras] > .panel > div:nth-child(2).text-slate-800 { color: #fff; } html[data-vista-proyecto="completa"] [data-proy-cifras] > .panel > div:nth-child(2).text-red-600 { color: #fca5a5; } html[data-vista-proyecto="completa"] [data-proy-cifras] > .panel > div:nth-child(2).text-emerald-600 { color: #86efac; } html[data-vista-proyecto="completa"] [data-proy-cifras] > .panel > div:nth-child(2).text-amber-600 { color: #fcd34d; } html[data-vista-proyecto="completa"] [data-proy-cifras] > .panel > div:nth-child(3) { color: #94a3b8; } html[data-vista-proyecto="completa"] [data-proy-avisos] { position: absolute; z-index: 20; top: 5.3rem; left: .6rem; margin: 0; padding: .25rem .7rem; border-radius: .4rem; background: rgba(15, 23, 42, .82); backdrop-filter: blur(6px); } html[data-vista-proyecto="completa"] [data-proy-avisos] a.text-red-700 { color: #fca5a5; } html[data-vista-proyecto="completa"] [data-proy-avisos] a.text-amber-700 { color: #fcd34d; } html[data-vista-proyecto="completa"] [data-proy-fila] [data-asa-panel] { display: none; } html[data-vista-proyecto="completa"] [data-panel-pestanas] { position: absolute; z-index: 20; right: .6rem; top: .6rem; bottom: 2.4rem; width: var(--ancho-3d) !important; min-width: 360px; box-shadow: 0 12px 32px rgba(15, 23, 42, .35); background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); } html[data-vista-proyecto="completa"] [data-mostrar-panel] { position: absolute; z-index: 20; right: .6rem; top: 50%; transform: translateY(-50%); height: auto; padding: .6rem 0; } html[data-vista-proyecto="completa"] [data-proy-fila]:has([data-panel-pestanas]:not([style*="display: none"])) .visor-app { --corrida: calc(max(var(--ancho-3d), 360px) + .6rem); } html[data-vista-proyecto="completa"] .visor-app .visor-vistas, html[data-vista-proyecto="completa"] .visor-app .visor-ficha, html[data-vista-proyecto="completa"] .visor-app .visor-leyenda { right: calc(.5rem + var(--corrida, 0px)); } html[data-vista-proyecto="completa"] .visor-app .visor-tiempo { right: calc(.5rem + var(--corrida, 0px)); } html[data-vista-proyecto="completa"] .visor-app .visor-leyenda:not([hidden]) ~ .visor-tiempo { right: calc(var(--ley) + 1rem + var(--corrida, 0px)); } /* Las cifras y los avisos flotan arriba: el riel, el panel de la herramienta y su tarjeta bajan para no quedar tapados. */ html[data-vista-proyecto="completa"] [data-proy-raiz] { --arriba: 5.2rem; } html[data-vista-proyecto="completa"] [data-proy-raiz]:has([data-proy-avisos]) { --arriba: 7.2rem; } html[data-vista-proyecto="completa"] .visor-app .visor-rail, html[data-vista-proyecto="completa"] .visor-app .visor-panel, html[data-vista-proyecto="completa"] .visor-app .visor-lateral { top: calc(.5rem + var(--arriba)); max-height: calc(100% - var(--arriba) - 3.2rem); } } /* Registro: foto aérea real de una cantera detrás de la tarjeta (©swisstopo, datos abiertos con cita obligatoria). */ .fondo-mina { background-image: url(/assets/img/marca/fondo-mina.jpg); } .con-fondo-mina .cm-lema { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .9)) drop-shadow(0 0 6px rgba(0, 0, 0, .6)); } .con-fondo-mina .cm-intro, .con-fondo-mina .cm-intro svg { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55)); } .con-fondo-mina p.text-slate-400 { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); } /* G75: menú de clic derecho y panel flotante. Dentro del panel (iframe) la pantalla va sin menú lateral ni barra. */ .embebido aside.sb, .embebido body > div > header, .embebido #sb-velo, .embebido [data-observar-abrir] { display: none !important; } .mc-menu { position: fixed; z-index: 70; min-width: 220px; max-width: min(320px, calc(100vw - 16px)); background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 10px 30px rgba(15, 23, 42, .18); padding: 4px 0; font-size: 13px; } .mc-menu .mc-sec { padding: 6px 12px 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; } .mc-menu button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 6px 12px; text-align: left; color: #1f2937; background: none; border: 0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-menu button:hover, .mc-menu button:focus { background: #f1f5f9; outline: none; } .mc-menu hr { border: 0; border-top: 1px solid #f1f5f9; margin: 4px 0; } .mc-velo { position: fixed; inset: 0; z-index: 60; background: rgba(15, 23, 42, .35); } .mc-panel { position: fixed; z-index: 61; top: 5vh; left: 50%; transform: translateX(-50%); width: min(1100px, 94vw); height: 88vh; background: #fff; border-radius: 10px; box-shadow: 0 20px 50px rgba(15, 23, 42, .3); display: flex; flex-direction: column; overflow: hidden; } .mc-panel header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #e2e8f0; font-size: 14px; font-weight: 600; color: #14213d; } .mc-panel header span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mc-panel iframe { flex: 1; width: 100%; border: 0; background: #f1f5f9; } @media (max-width: 767px) { .mc-panel { top: 0; width: 100vw; height: 100%; border-radius: 0; } } /* Barra superior bajo 1280 px: las acciones de la pantalla quedan solo con su ícono (el nombre va en title y aria-label, layout.php) para que la ruta no se corte en «Ini… / Pro…» (auditoría 18-09). */ @media (max-width: 1279px) { [data-acciones-pantalla] .btn:has(svg) { font-size: 0; gap: 0; padding-left: .45rem; padding-right: .45rem; } [data-acciones-pantalla] .btn:has(svg) svg { width: 1rem; height: 1rem; } } /* Vista completa: el menú lateral no existe, así que tampoco su botón ≡. */ @media (min-width: 1024px) { html[data-vista-proyecto="completa"] body:has([data-proy-raiz]) header [data-sb-toggle] { display: none; } } /* Cifras grandes que se achican para caber en su tarjeta en vez de cortarse con «…» (auditoría 18-09: «596.200,86 m³» y «1.607.145» cortados a 1024). --n = largo del valor (PHP); ~0,6 em por carácter. */ .cifra-c { container-type: inline-size; } .cifra-v { white-space: nowrap; line-height: 1.2; font-size: min(var(--cifra-max, 1.5rem), calc(158cqi / var(--n, 8))); } /* Ayuda de las cifras (ayuda-cifra.js). */ .ayuda-tip { position: fixed; z-index: 80; max-width: min(320px, calc(100vw - 16px)); padding: .5rem .65rem; border-radius: 6px; background: #14213d; color: #fff; font-size: 12px; line-height: 1.45; white-space: pre-line; box-shadow: 0 8px 24px rgba(15, 23, 42, .3); pointer-events: none; } [data-ayuda-cifra] { cursor: help; } [data-ayuda-cifra]:focus-visible { outline: 2px solid #1b66cc; outline-offset: 2px; } /* Listas del Inicio recortadas a lo que cabe (dashboard.php): el hidden gana a la clase flex. */ [data-item][hidden] { display: none !important; } /* Contraste AA en las zonas claras (auditoría 18-09): slate-400 sobre blanco daba 2,56:1 (n=31), ámbar-600 3,19:1 y slate-500 sobre slate-100 4,34:1. El menú lateral y el visor, oscuros, quedan como están. */ main .text-slate-400:not(.visor-app *), header .text-slate-400, [role="dialog"] .text-slate-400 { color: #64748b; } main .text-amber-600:not(.visor-app *) { color: #b45309; } .bg-slate-100 .text-slate-500, .bg-slate-100.text-slate-500 { color: #475569; } /* Filas clicables (data-fila-enlace, app.js): la fila entera abre su registro. */ [data-fila-enlace] { cursor: pointer; } table.tabla tbody tr[data-fila-enlace]:hover td { background: #eff6ff; } [data-fila-enlace]:focus-visible { outline: 2px solid #2f80ed; outline-offset: -2px; } /* Listados que se ordenan, buscan y paginan (tabla.js, G83). */ table.tabla thead th .tabla-orden { all: unset; cursor: pointer; display: flex; width: 100%; align-items: center; gap: .25rem; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; } /* Toda la celda del encabezado ordena, no solo el texto (N8, 19-09). */ table.tabla thead th[aria-sort] { cursor: pointer; } table.tabla thead th[aria-sort]:hover { background: #eef2f7; } table.tabla thead th .tabla-orden::after { content: '↕'; font-size: .7rem; opacity: .35; } table.tabla thead th .tabla-orden.activo.asc::after { content: '▲'; opacity: .9; } table.tabla thead th .tabla-orden.activo.desc::after { content: '▼'; opacity: .9; } table.tabla thead th .tabla-orden:focus-visible { outline: 2px solid #2f80ed; outline-offset: 2px; border-radius: 2px; } table.tabla thead th.text-right .tabla-orden { justify-content: flex-end; } .tabla-pie { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .4rem .75rem; border-top: 1px solid #e2e8f0; background: #f8fafc; font-size: .75rem; color: #475569; } .tabla-pie[hidden] { display: none; } .tabla-pie .tabla-buscar { width: 14rem; max-width: 100%; padding-top: .25rem; padding-bottom: .25rem; font-size: .78rem; } .tabla-pie .tabla-info { flex: 1 1 auto; } .tabla-pie .tabla-nav { display: inline-flex; gap: .25rem; } .tabla-pie .tabla-nav[hidden] { display: none; } .tabla-pie .btn:disabled { opacity: .45; cursor: default; } /* Avance de procesos largos (progreso.js): barra con %, etapa y tiempos. */ .progreso { border: 1px solid #bfdbfe; background: #eff6ff; border-radius: .375rem; padding: .5rem .75rem; font-size: .8125rem; color: #1e3a8a; } .progreso-fila { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; } .progreso-titulo { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .progreso-pct { font-variant-numeric: tabular-nums; font-weight: 600; flex-shrink: 0; } .progreso-pista { height: .45rem; background: #dbeafe; border-radius: 999px; overflow: hidden; margin: .35rem 0 .25rem; } .progreso-barra { height: 100%; width: 0; background: #1b66cc; border-radius: 999px; transition: width .6s ease; } .progreso-detalle { font-size: .75rem; color: #475569; font-variant-numeric: tabular-nums; min-height: 1em; } .progreso-cola { border-color: #fde68a; background: #fffbeb; color: #92400e; } .progreso-cola .progreso-pista { background: #fef3c7; } .progreso-cola .progreso-barra { width: 30% !important; background: #f59e0b; animation: progreso-ir 1.4s ease-in-out infinite; } @keyframes progreso-ir { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } } @media (prefers-reduced-motion: reduce) { .progreso-barra { transition: none; } .progreso-cola .progreso-barra { animation: none; } } /* Pestañas del panel del proyecto (G87, Eugenio 20-09): tres grupos arriba y, del grupo elegido, pestañas anchas con ícono que crecen al acercar el cursor. Con 4 a 7 por grupo caben grandes; las 16 juntas se partían en 3 filas. */ .pest-grupo { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #e2e8f0; background: #fff; color: #334155; border-radius: .5rem; padding: .25rem .65rem; font-size: .78rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .pest-grupo:hover { border-color: #cbd5e1; } .pest-grupo .n { font-size: .68rem; font-weight: 700; color: #64748b; } .pest-grupo.activo { border-color: var(--acento); background: #eff6ff; color: #1b66cc; } .pest-grupo.activo .n { color: #1b66cc; } .pest-riel { display: flex; align-items: stretch; gap: .35rem; padding: 1.1rem .5rem .45rem; overflow: visible; } .pest-riel > button { flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: .2rem; padding: .35rem .25rem .3rem; border: 1px solid transparent; border-radius: .5rem; background: #fff; color: #64748b; font-size: .72rem; font-weight: 600; cursor: pointer; transform-origin: bottom center; will-change: transform; transition: transform .16s cubic-bezier(.2,.8,.2,1), color .18s, background .18s, border-color .18s, box-shadow .18s; } .pest-riel > button:hover { color: #1e293b; border-color: #e2e8f0; } .pest-riel .pest-ico { width: 1.45rem; height: 1.45rem; stroke-width: 1.6; } .pest-riel .pest-txt { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pest-riel .pest-n { font-size: .65rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #1b66cc; background: #eff6ff; border-radius: .5rem; padding: 0 .35rem; } .pest-riel .pest-n.aviso { color: #92400e; background: #fef3c7; } .pest-riel > button.activa { color: #1b66cc; background: #eff6ff; border-color: var(--acento); box-shadow: 0 4px 14px rgba(27, 102, 204, .18); } /* Panel angosto o teléfono: solo el ícono y su cuenta, para que no se aprieten los nombres. */ @media (max-width: 639px) { .pest-riel { gap: .15rem; padding-top: .8rem; } .pest-riel .pest-txt { display: none; } } @media (prefers-reduced-motion: reduce) { .pest-riel > button { transition: none; } } /* Banderas de observación (banderas.js, 21-09): la 🚩 aparece solo al pasar el cursor, sin mover nada de lugar. */ .bandera-btn { width: 22px; height: 22px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; cursor: pointer; background: #ede9fe; border: 1px solid #ddd6fe; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; flex: none; } .bandera-btn:hover { transform: scale(1.12); background: #7c3aed; } .bandera-btn:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid #7c3aed; outline-offset: 1px; } .bandera-host:hover > .bandera-btn, .bandera-host:hover > * > .bandera-btn, .bandera-fila:hover > :first-child > .bandera-btn { opacity: 1; pointer-events: auto; } /* Panel con cabecera: la bandera va al final de la cabecera (ocupa su lugar siempre, para que nada salte al pasar el cursor). */ .bandera-panel > .panel-head > .bandera-btn { margin-left: -.25rem; } /* Tarjeta sin cabecera: en la esquina superior derecha, encima del contenido. */ .bandera-tarjeta { position: relative; } .bandera-tarjeta > .bandera-btn { position: absolute; top: 4px; right: 4px; z-index: 5; } /* Fila: en el borde izquierdo de la primera celda, con el espacio reservado para no tapar el primer carácter. */ .bandera-fila > :first-child { position: relative; padding-left: 20px !important; } table:has(tr.bandera-fila) > thead > tr > :first-child { padding-left: 20px !important; } .bandera-fila > :first-child > .bandera-btn { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; font-size: 9px; } .bandera-fila > :first-child > .bandera-btn:hover { transform: translateY(-50%) scale(1.12); } @media print { .bandera-btn { display: none !important; } } /* Fondo de las pantallas de ingreso (Eugenio 25-09): video en bucle, difuminado y bajo un velo azul de la marca. */ .sf-fondo-video{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:#14213d url(/assets/video/fondo-ingreso.jpg) center/cover no-repeat} .sf-fondo-video video{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);object-fit:cover;filter:blur(6px) saturate(.85);opacity:.55} .sf-fondo-video::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(20,33,61,.45) 0%,rgba(20,33,61,.8) 70%,rgba(20,33,61,.92) 100%)} @media (prefers-reduced-motion:reduce){.sf-fondo-video video{display:none}.sf-fondo-video{filter:blur(6px)}}