/* ============================================================ bridge.css — panel administrativo del SG-SST sobre Bootstrap 5. Sidebar agrupado + topbar + contenido. Da el look a las clases propias SIN reescribir el HTML de los módulos. Orden de carga: bootstrap.min.css → style.css → bridge.css Paleta: azul noche institucional con acento cobre — el registro serio que exige un sistema de cumplimiento normativo, sin caer en el azul genérico de cualquier panel SaaS. Soporta tema claro y oscuro mediante tokens; el atributo [data-tema] en decide cuál se usa (ver el script inline en inc/layout.php que lo aplica antes del pintado). ============================================================ */ :root { --tinta: #12181f; /* texto principal, tema claro */ --tinta-2: #48586a; --tinta-3: #5e6d7e; /* 4.5:1+ sobre blanco: sigue siendo texto, no decoración */ --superficie: #ffffff; --superficie-2: #eef1f5; --fondo: #f4f6f8; --borde: #dde3ea; --borde-fuerte: #c3ccd6; --azul-noche: #1c3a5e; /* primario */ --azul-prof: #2d5580; /* hover / variante clara del primario */ --azul-suave: #e7edf4; /* fondos tenues (chips, foco) */ --cobre: #96591f; /* único acento cálido — nunca decorativo; 4.5:1 sobre blanco */ --cobre-suave:#f6e9dc; --sb: #101b2c; /* fondo sidebar */ --sb-2: #0a1320; --sb-texto: #c3cedb; --sombra: 0 1px 2px rgba(18,24,31,.05), 0 4px 16px rgba(18,24,31,.06); --sombra-alta: 0 10px 34px rgba(10,19,32,.16); --radio: .6rem; --sbw: 252px; /* Sin webfonts externos: el servidor no debe depender de una CDN. */ --fuente: Georgia, "Iowan Old Style", "Noto Serif", "Liberation Serif", serif; --fuente-ui: "Segoe UI", system-ui, Roboto, "Noto Sans", Arial, sans-serif; color-scheme: light; } /* ================= TEMA OSCURO ================= */ :root[data-tema="oscuro"] { --tinta: #e7ecf2; --tinta-2: #aab7c6; --tinta-3: #7e8ea0; --superficie: #182231; --superficie-2: #101929; --fondo: #0c1420; --borde: #263548; --borde-fuerte: #33465e; --azul-noche: #3d6d9c; /* 4.5:1+ con texto blanco encima */ --azul-prof: #4f80b3; --azul-suave: #1c2c40; --cobre: #d99552; --cobre-suave:#2c2013; --sb: #0a1320; --sb-2: #060c15; --sb-texto: #b4c1d1; --sombra: 0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.3); --sombra-alta: 0 10px 34px rgba(0,0,0,.5); color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--fuente-ui); font-size: 15px; transition: background .18s, color .18s; } a { color: var(--azul-noche); } /* Los números del tablero y los títulos llevan una serif con carácter: distingue este sistema de cualquier panel administrativo genérico y da a las cifras el peso editorial que merece un indicador legal. */ .sst-title, .tarjeta .cifra, .login-caja h1, h2 { font-family: var(--fuente); } /* ================= ICONOS SVG ================= */ .ic-svg { width: 1.15em; height: 1.15em; flex-shrink: 0; } .ic-marca { width: 1.7rem; height: 1.7rem; color: var(--cobre); } /* ================= SIDEBAR ================= */ .sst-sidebar { position: fixed; top: 0; left: 0; width: var(--sbw); height: 100vh; background: linear-gradient(180deg, var(--sb), var(--sb-2)); color: var(--sb-texto); display: flex; flex-direction: column; z-index: 1040; overflow-y: auto; box-shadow: 2px 0 14px rgba(0,0,0,.2); } .sst-sidebar::-webkit-scrollbar { width: 7px; } .sst-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; } .sst-brand { display: flex; align-items: center; gap: .65rem; padding: 1.1rem 1.15rem; border-bottom: 1px solid rgba(255,255,255,.08); position: sticky; top: 0; background: var(--sb); z-index: 1; } .sst-brand .txt { display: flex; flex-direction: column; font-weight: 700; color: #fff; font-size: .98rem; line-height: 1.15; } .sst-brand .txt small { font-weight: 500; color: #8797ab; font-size: .7rem; letter-spacing: 1.2px; text-transform: uppercase; } .sst-nav { padding: .7rem .55rem 2rem; } .sst-sec { width: 100%; text-align: left; background: none; border: 0; color: #7688a0; font-size: .68rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: .75rem .65rem .4rem; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .sst-sec .ic-chev { width: 1em; height: 1em; transition: transform .25s; } .sst-sec.collapsed .ic-chev { transform: rotate(-90deg); } .sst-sec:hover { color: #a3b3c7; } .sst-link { display: flex; align-items: center; gap: .7rem; padding: .55rem .65rem; margin: 1px 0; color: var(--sb-texto); text-decoration: none; border-radius: .5rem; font-size: .88rem; transition: background .14s, color .14s; } .sst-link .ic { width: 1.15rem; text-align: center; display: inline-flex; opacity: .85; } .sst-link:hover { background: rgba(255,255,255,.07); color: #fff; } .sst-link:hover .ic { opacity: 1; } .sst-link.active { background: var(--azul-noche); color: #fff; font-weight: 600; box-shadow: 0 3px 10px rgba(28,58,94,.5); } .sst-link.active .ic { opacity: 1; color: var(--cobre); } /* ================= MAIN ================= */ .sst-main { margin-left: var(--sbw); min-height: 100vh; display: flex; flex-direction: column; } .sst-topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 1rem; background: var(--superficie); border-bottom: 1px solid var(--borde); padding: .75rem 1.5rem; box-shadow: 0 1px 4px rgba(18,24,31,.04); } .sst-title { font-size: 1.18rem; font-weight: 700; color: var(--tinta); } .sst-burger { display: none; background: none; border: 0; color: var(--tinta); cursor: pointer; padding: .3rem; } .sst-burger .ic-svg { width: 1.3rem; height: 1.3rem; } .sst-user { margin-left: auto; display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--tinta-2); } .sst-user .rolbadge { background: var(--azul-suave); color: var(--azul-noche); padding: .15rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; text-transform: capitalize; } .sst-user a { text-decoration: none; } .sst-icon-link { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem; color: var(--tinta-2); transition: background .15s, color .15s; } .sst-icon-link:hover { background: var(--superficie-2); color: var(--azul-noche); } .sst-user .salir { display: inline-flex; align-items: center; gap: .4rem; background: var(--azul-noche); color: #fff; padding: .38rem .85rem; border-radius: .5rem; font-size: .82rem; font-weight: 500; transition: background .15s; } .sst-user .salir .ic-svg { width: 1em; height: 1em; } .sst-user .salir:hover { background: var(--azul-prof); } /* Interruptor de tema claro/oscuro */ .sst-tema { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem; border: 0; background: none; color: var(--tinta-2); cursor: pointer; transition: background .15s, color .15s; } .sst-tema:hover { background: var(--superficie-2); color: var(--cobre); } .sst-tema .ic-sol { display: none; } .sst-tema .ic-luna { display: block; } :root[data-tema="oscuro"] .sst-tema .ic-sol { display: block; } :root[data-tema="oscuro"] .sst-tema .ic-luna { display: none; } .sst-content { padding: 1.7rem 1.9rem; max-width: 1380px; width: 100%; flex: 1; } h1 { display: none; } /* el título va en la topbar */ h2 { font-size: 1.12rem; font-weight: 600; color: var(--tinta); margin: 1.4rem 0 .8rem; } .sst-overlay { display: none; position: fixed; inset: 0; background: rgba(6,12,20,.55); z-index: 1035; } /* ================= COMPONENTES (clases propias) ================= */ .tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; } .tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem 1.35rem; box-shadow: var(--sombra); transition: transform .12s, box-shadow .12s; } .tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); } .tarjeta .cifra { font-size: 2.2rem; font-weight: 600; color: var(--tinta); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } /* Alerta/aviso se marcan con color e ícono textual, nunca solo con una barra decorativa: quien no distingue bien el color sigue viendo la diferencia. */ .tarjeta .cifra.alerta { color: #c0392b; } .tarjeta .cifra.aviso { color: var(--cobre); } :root[data-tema="oscuro"] .tarjeta .cifra.alerta { color: #e17c6f; } .tarjeta .cifra.alerta::after { content: " ⚠"; font-size: 1.1rem; vertical-align: middle; } .tarjeta .titulo { font-size: .82rem; color: var(--tinta-3); margin-top: .4rem; font-family: var(--fuente-ui); } .tarjeta a { text-decoration: none; color: inherit; display: block; } .tarjeta a:hover .cifra { color: var(--azul-noche); } .tabla-scroll { overflow-x: auto; border-radius: var(--radio); box-shadow: var(--sombra); margin-bottom: 1.1rem; background: var(--superficie); border: 1px solid var(--borde); } table.lista { width: 100%; border-collapse: collapse; background: var(--superficie); } table.lista th { background: var(--superficie-2); color: var(--tinta-2); text-align: left; padding: .68rem .85rem; font-size: .74rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; border-bottom: 1px solid var(--borde); } table.lista td { padding: .62rem .85rem; border-top: 1px solid var(--borde); font-size: .89rem; vertical-align: top; color: var(--tinta); } table.lista tbody tr:hover td { background: var(--azul-suave); } table.lista tr:nth-child(even) td { background: var(--superficie-2); } table.lista tbody tr:nth-child(even):hover td { background: var(--azul-suave); } .etiqueta { display: inline-block; padding: .22em .65em; border-radius: 999px; font-size: .72rem; font-weight: 600; } .et-verde { background: #d1f2e1; color: #157347; } .et-ambar { background: var(--cobre-suave); color: var(--cobre); } .et-rojo { background: #fbdcda; color: #b02a37; } .et-gris { background: var(--superficie-2); color: var(--tinta-3); } :root[data-tema="oscuro"] .et-verde { background: #113321; color: #6fd39c; } :root[data-tema="oscuro"] .et-rojo { background: #331716; color: #e8968d; } form.formulario { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.45rem 1.55rem; margin-bottom: 1.4rem; box-shadow: var(--sombra); } .fila { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: .9rem; } .campo { flex: 1; min-width: 200px; } .campo label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; color: var(--tinta-2); } .campo input, .campo select, .campo textarea, .filtros input, .filtros select { width: 100%; padding: .52rem .68rem; border: 1px solid var(--borde-fuerte); border-radius: .5rem; font-size: .92rem; font-family: inherit; background: var(--superficie); color: var(--tinta); transition: border-color .15s, box-shadow .15s; } .campo input:focus, .campo select:focus, .campo textarea:focus, .filtros input:focus, .filtros select:focus { outline: 0; border-color: var(--azul-prof); box-shadow: 0 0 0 .2rem var(--azul-suave); } .campo textarea { min-height: 82px; } .filtros input, .filtros select { width: auto; } .boton, button.boton { display: inline-flex; align-items: center; gap: .4rem; background: var(--azul-noche); color: #fff; border: 0; padding: .55rem 1.2rem; border-radius: .5rem; cursor: pointer; font-size: .9rem; text-decoration: none; font-weight: 500; box-shadow: 0 1px 3px rgba(18,24,31,.2); transition: background .15s, transform .05s; } .boton:hover { background: var(--azul-prof); color: #fff; } .boton:active { transform: translateY(1px); } .boton-sec { background: var(--tinta-2); } .boton-sec:hover { background: var(--tinta); } .boton-peligro { background: #c0392b; } .boton-peligro:hover { background:#a5281c; } .boton-mini { padding: .32rem .78rem; font-size: .78rem; } .acciones-tabla a { margin-right: .5rem; white-space: nowrap; font-size: .84rem; } .flash { padding: .85rem 1.1rem; border-radius: .55rem; margin-bottom: 1.1rem; font-size: .92rem; box-shadow: var(--sombra); display: flex; align-items: flex-start; gap: .6rem; } .flash::before { font-size: 1.05rem; line-height: 1.3; } .flash-ok { background: #e8f7ef; color: #157347; } .flash-ok::before { content: "✓"; font-weight: 700; } .flash-error { background: #fdeceb; color: #b02a37; } .flash-error::before { content: "!"; font-weight: 700; border: 1.5px solid currentColor; border-radius: 50%; width: 1.1em; height: 1.1em; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; } :root[data-tema="oscuro"] .flash-ok { background: #113321; color: #6fd39c; } :root[data-tema="oscuro"] .flash-error { background: #331716; color: #e8968d; } .barra-superior { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; flex-wrap: wrap; gap: .7rem; } .filtros { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .graficas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; } .grafica { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.1rem; box-shadow: var(--sombra); } .grafica-titulo { font-size: .85rem; font-weight: 600; color: var(--tinta-2); margin-bottom: .5rem; } .grafica svg { width: 100%; height: auto; display: block; } .firma-caja { border: 2px dashed var(--borde-fuerte); border-radius: .55rem; background: #fff; display: inline-block; } .firma-caja canvas { display: block; touch-action: none; cursor: crosshair; } img.firma-mini { max-height: 44px; border: 1px solid var(--borde); background: #fff; border-radius: 4px; } .pie { text-align: center; color: var(--tinta-3); font-size: .76rem; padding: 1.3rem 0; } /* ================= LOGIN ================= */ body:has(.login-caja) { background: var(--sb); } .login-caja { max-width: 410px; margin: 7vh auto; background: var(--superficie); padding: 2.5rem 2.3rem; border-radius: .9rem; border: 1px solid var(--borde); box-shadow: var(--sombra-alta); } .login-caja .ic-marca-login { width: 2.6rem; height: 2.6rem; color: var(--cobre); display: block; margin: 0 auto; } .login-caja h1 { display: block; text-align: center; margin: .5rem 0 .3rem; font-size: 1.65rem; color: var(--tinta); } .login-caja .sub { text-align: center; color: var(--tinta-3); font-size: .85rem; margin-bottom: 1.6rem; } .login-caja .sub span { color: var(--tinta-3); opacity: .75; } .login-caja .campo { margin-bottom: 1rem; min-width: auto; } .login-caja .boton { width: 100%; padding: .68rem; font-size: 1rem; justify-content: center; } /* ================= ACCESIBILIDAD ================= */ /* Foco de teclado visible en todo lo interactivo, no solo en los campos de formulario: quien navega este sistema sin mouse (frecuente en oficinas con formularios largos) necesita saber siempre dónde está parado. */ a:focus-visible, button:focus-visible, .boton:focus-visible, .sst-link:focus-visible, .sst-sec:focus-visible { outline: 2px solid var(--cobre); outline-offset: 2px; border-radius: .3rem; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ================= RESPONSIVE ================= */ @media (max-width: 991.98px) { .sst-sidebar { transform: translateX(-100%); transition: transform .28s ease; } body.sb-open .sst-sidebar { transform: translateX(0); } body.sb-open .sst-overlay { display: block; } .sst-main { margin-left: 0; } .sst-burger { display: inline-flex; } .sst-content { padding: 1.1rem; } }