/* ========================================================================= License360 — hoja de estilos única. Toda la paleta vive en variables CSS: cambiar de tema solo reescribe variables, nunca reglas. Los temas se aplican con [data-tema] en . ========================================================================= */ :root { /* Tema por defecto: Azul corporativo */ --l360-primary: #1d4e89; --l360-primary-dark: #15395f; --l360-primary-light: #2f6bb3; --l360-accent: #f0a500; --l360-sidebar-bg: linear-gradient(180deg, #0d2b52 0%, #102f5c 55%, #0a2246 100%); --l360-sidebar-solid: #0d2b52; --l360-sidebar-text: #c6d4e8; --l360-sidebar-text-hover: #ffffff; --l360-sidebar-active-bg: rgba(255, 255, 255, .13); --l360-sidebar-active-border: rgba(255, 255, 255, .28); --l360-sidebar-group: #7f96b8; --l360-topbar-bg: #ffffff; --l360-body-bg: #f2f5f9; --l360-card-bg: #ffffff; --l360-border: #e2e8f2; --l360-text: #23303f; --l360-text-muted: #6b7a90; --l360-heading: #16273d; --l360-success: #1f9d61; --l360-warning: #e5890b; --l360-danger: #d13b3b; --l360-danger-dark: #8d1f1f; --l360-info: #2a8fb8; --l360-sidebar-ancho: 260px; --l360-sidebar-mini: 72px; --l360-topbar-alto: 62px; --l360-radio: 10px; --l360-sombra: 0 1px 3px rgba(20, 38, 62, .08), 0 1px 2px rgba(20, 38, 62, .06); --l360-sombra-md: 0 4px 16px rgba(20, 38, 62, .10); } /* --- Tema: Verde esmeralda --- */ [data-tema="verde"] { --l360-primary: #12795c; --l360-primary-dark: #0c5641; --l360-primary-light: #1c9a76; --l360-accent: #f2c744; --l360-sidebar-bg: linear-gradient(180deg, #0a3d30 0%, #0d4a3a 55%, #072b22 100%); --l360-sidebar-solid: #0a3d30; --l360-sidebar-text: #bfe0d5; --l360-sidebar-group: #7fae9e; } /* --- Tema: Oscuro --- */ [data-tema="oscuro"] { --l360-primary: #4d8fd6; --l360-primary-dark: #3a6fa8; --l360-primary-light: #6aa6e6; --l360-accent: #f0a500; --l360-sidebar-bg: linear-gradient(180deg, #12161d 0%, #171c25 55%, #0d1015 100%); --l360-sidebar-solid: #12161d; --l360-sidebar-text: #a9b4c4; --l360-sidebar-text-hover: #ffffff; --l360-sidebar-active-bg: rgba(255, 255, 255, .10); --l360-sidebar-group: #6b7688; --l360-topbar-bg: #1a202a; --l360-body-bg: #12161d; --l360-card-bg: #1a202a; --l360-border: #2b3340; --l360-text: #dbe2ec; --l360-text-muted: #919cad; --l360-heading: #f0f4fa; } /* ========================================================================= Base ========================================================================= */ html, body { height: 100%; } body { margin: 0; background-color: var(--l360-body-bg); color: var(--l360-text); font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: .925rem; /* Ningún elemento debe provocar scroll horizontal de la página. */ overflow-x: hidden; } a { color: var(--l360-primary); text-decoration: none; } a:hover { color: var(--l360-primary-dark); text-decoration: underline; } h1, h2, h3, h4, h5, h6 { color: var(--l360-heading); } :focus-visible { outline: 2px solid var(--l360-primary-light); outline-offset: 2px; } /* ========================================================================= Armazón: sidebar + topbar + contenido ========================================================================= */ .l360-app { display: flex; min-height: 100vh; } /* --- Sidebar --- */ .l360-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--l360-sidebar-ancho); background: var(--l360-sidebar-bg); background-color: var(--l360-sidebar-solid); display: flex; flex-direction: column; z-index: 1040; transition: width .2s ease, transform .25s ease; } .l360-sidebar__marca { display: flex; align-items: center; gap: .65rem; height: var(--l360-topbar-alto); padding: 0 1.15rem; color: #fff; flex: 0 0 auto; border-bottom: 1px solid rgba(255, 255, 255, .08); white-space: nowrap; overflow: hidden; } .l360-sidebar__marca i { font-size: 1.45rem; color: var(--l360-accent); flex: 0 0 auto; } .l360-sidebar__marca span { font-size: 1.22rem; font-weight: 700; letter-spacing: -.4px; } .l360-sidebar__marca .l360-360 { color: var(--l360-accent); } /* El menú tiene su propio scroll si no cabe. */ .l360-sidebar__nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: .75rem .6rem 1rem; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; } .l360-sidebar__nav::-webkit-scrollbar { width: 6px; } .l360-sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 3px; } .l360-grupo { margin-bottom: .2rem; } .l360-grupo__btn { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .58rem .75rem; background: transparent; border: 0; border-radius: var(--l360-radio); color: var(--l360-sidebar-group); font-size: .705rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; text-align: left; transition: color .15s, background-color .15s; } .l360-grupo__btn:hover { color: var(--l360-sidebar-text-hover); background-color: rgba(255, 255, 255, .06); } .l360-grupo__btn i:first-child { font-size: 1rem; flex: 0 0 18px; } .l360-grupo__texto { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } .l360-grupo__chevron { font-size: .7rem; transition: transform .2s ease; flex: 0 0 auto; } .l360-grupo__btn[aria-expanded="true"] .l360-grupo__chevron { transform: rotate(90deg); } .l360-grupo__items { list-style: none; margin: .1rem 0 .35rem; padding: 0 0 0 .35rem; } .l360-item { display: flex; align-items: center; gap: .65rem; padding: .5rem .7rem; margin-bottom: .12rem; border-radius: var(--l360-radio); border: 1px solid transparent; color: var(--l360-sidebar-text); font-size: .865rem; white-space: nowrap; overflow: hidden; transition: background-color .15s, color .15s; } .l360-item:hover { background-color: rgba(255, 255, 255, .07); color: var(--l360-sidebar-text-hover); text-decoration: none; } .l360-item.activo { background-color: var(--l360-sidebar-active-bg); border-color: var(--l360-sidebar-active-border); color: #fff; font-weight: 600; } .l360-item i { font-size: .95rem; flex: 0 0 18px; opacity: .9; } .l360-item__texto { overflow: hidden; text-overflow: ellipsis; } /* Pie fijo del sidebar con "Cerrar sesión". */ .l360-sidebar__pie { flex: 0 0 auto; padding: .75rem .85rem 1rem; border-top: 1px solid rgba(255, 255, 255, .08); } .l360-btn-salir { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: .55rem .7rem; background: transparent; border: 1px solid rgba(233, 110, 110, .55); border-radius: var(--l360-radio); color: #f08c8c; font-size: .865rem; font-weight: 600; white-space: nowrap; overflow: hidden; transition: background-color .15s, color .15s, border-color .15s; } .l360-btn-salir:hover { background-color: rgba(209, 59, 59, .18); border-color: #e96e6e; color: #ffb4b4; } /* --- Modo solo íconos (escritorio) --- */ .l360-app.mini .l360-sidebar { width: var(--l360-sidebar-mini); } .l360-app.mini .l360-sidebar__marca span, .l360-app.mini .l360-grupo__texto, .l360-app.mini .l360-grupo__chevron, .l360-app.mini .l360-item__texto, .l360-app.mini .l360-btn-salir span { display: none; } .l360-app.mini .l360-sidebar__marca, .l360-app.mini .l360-grupo__btn, .l360-app.mini .l360-item, .l360-app.mini .l360-btn-salir { justify-content: center; padding-left: .5rem; padding-right: .5rem; } .l360-app.mini .l360-grupo__items { padding-left: 0; } .l360-app.mini .l360-main { margin-left: var(--l360-sidebar-mini); } /* --- Área principal --- */ .l360-main { flex: 1 1 auto; min-width: 0; margin-left: var(--l360-sidebar-ancho); display: flex; flex-direction: column; transition: margin-left .2s ease; } .l360-topbar { position: sticky; top: 0; z-index: 1030; height: var(--l360-topbar-alto); display: flex; align-items: center; gap: .75rem; padding: 0 1rem; background-color: var(--l360-topbar-bg); border-bottom: 1px solid var(--l360-border); box-shadow: var(--l360-sombra); } .l360-hamburguesa { background: transparent; border: 1px solid var(--l360-border); border-radius: 8px; width: 36px; height: 36px; color: var(--l360-text-muted); flex: 0 0 auto; } .l360-hamburguesa:hover { color: var(--l360-primary); border-color: var(--l360-primary-light); } .l360-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .28rem .7rem; border: 1px solid var(--l360-border); border-radius: 999px; font-size: .78rem; color: var(--l360-text-muted); white-space: nowrap; } .l360-punto { width: 8px; height: 8px; border-radius: 50%; background-color: var(--l360-success); flex: 0 0 auto; } .l360-punto.lento { background-color: var(--l360-warning); } .l360-punto.caido { background-color: var(--l360-danger); } .l360-topbar__derecha { margin-left: auto; display: flex; align-items: center; gap: .6rem; } .l360-saludo { color: var(--l360-text-muted); font-size: .84rem; white-space: nowrap; } .l360-usuario-btn { display: flex; align-items: center; gap: .5rem; background: transparent; border: 1px solid var(--l360-border); border-radius: 999px; padding: .25rem .7rem .25rem .3rem; color: var(--l360-text); } .l360-avatar { width: 29px; height: 29px; border-radius: 50%; background-color: var(--l360-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .76rem; font-weight: 700; flex: 0 0 auto; } .l360-contenido { flex: 1 1 auto; padding: 1.25rem 1.25rem 2.5rem; min-width: 0; } /* --- Encabezado de página --- */ .l360-pagina-head { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.1rem; flex-wrap: wrap; } .l360-pagina-head__icono { width: 44px; height: 44px; border-radius: 12px; background-color: var(--l360-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: 0 0 auto; } .l360-pagina-head h1 { margin: 0; font-size: 1.32rem; font-weight: 700; } .l360-pagina-head p { margin: .15rem 0 0; color: var(--l360-text-muted); font-size: .875rem; } .l360-migas { font-size: .78rem; color: var(--l360-text-muted); margin-bottom: .9rem; } .l360-migas a { color: var(--l360-text-muted); } .l360-migas a:hover { color: var(--l360-primary); } /* ========================================================================= Tarjetas y componentes ========================================================================= */ .card { background-color: var(--l360-card-bg); border: 1px solid var(--l360-border); border-radius: var(--l360-radio); box-shadow: var(--l360-sombra); } .card-header { background-color: transparent; border-bottom: 1px solid var(--l360-border); font-weight: 600; color: var(--l360-heading); } /* --- Tarjetas de indicador del dashboard --- */ .l360-kpi { position: relative; overflow: hidden; border: 0; border-radius: 14px; color: #fff; padding: 1.05rem 1.15rem; min-height: 116px; display: flex; flex-direction: column; justify-content: center; box-shadow: var(--l360-sombra-md); } .l360-kpi__icono { position: absolute; right: -6px; bottom: -14px; font-size: 5rem; opacity: .16; line-height: 1; pointer-events: none; } .l360-kpi__valor { font-size: 2rem; font-weight: 700; line-height: 1.1; } .l360-kpi__etiqueta { font-size: .705rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .92; margin-top: .2rem; } .l360-kpi__sub { font-size: .76rem; opacity: .82; margin-top: .3rem; } .l360-kpi.azul { background: linear-gradient(135deg, #1d4e89, #2f6bb3); } .l360-kpi.cian { background: linear-gradient(135deg, #17708f, #2a9fc4); } .l360-kpi.verde { background: linear-gradient(135deg, #12795c, #1fa87d); } .l360-kpi.morado { background: linear-gradient(135deg, #52398f, #7255bd); } .l360-kpi.naranja { background: linear-gradient(135deg, #c96a0b, #e8961f); } .l360-kpi.rojo { background: linear-gradient(135deg, #a62c2c, #d14b4b); } /* --- Tarjetas de alerta --- */ .l360-alerta { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.05rem; border-radius: 12px; border-left: 5px solid; background-color: var(--l360-card-bg); border: 1px solid var(--l360-border); box-shadow: var(--l360-sombra); color: var(--l360-text); } .l360-alerta:hover { text-decoration: none; box-shadow: var(--l360-sombra-md); color: var(--l360-text); } .l360-alerta__n { font-size: 1.6rem; font-weight: 700; line-height: 1; flex: 0 0 auto; } .l360-alerta.naranja { border-left-color: var(--l360-warning); } .l360-alerta.naranja .l360-alerta__n { color: var(--l360-warning); } .l360-alerta.rojo { border-left-color: var(--l360-danger); } .l360-alerta.rojo .l360-alerta__n { color: var(--l360-danger); } .l360-alerta.granate { border-left-color: var(--l360-danger-dark); } .l360-alerta.granate .l360-alerta__n { color: var(--l360-danger-dark); } /* --- Insignia propia para "plazo vencido" --- */ .l360-badge-vencido { background-color: var(--l360-danger-dark) !important; color: #fff; } /* --- Tablas --- */ .l360-tabla-scroll { /* Las tablas anchas se desplazan dentro de su contenedor, no en la página. */ overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { color: var(--l360-text); margin-bottom: 0; } .table > :not(caption) > * > * { background-color: var(--l360-card-bg); border-bottom-color: var(--l360-border); } .table thead th { font-size: .715rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--l360-text-muted); border-bottom: 2px solid var(--l360-border); white-space: nowrap; } .table-hover > tbody > tr:hover > * { background-color: rgba(29, 78, 137, .05); } [data-tema="oscuro"] .table-hover > tbody > tr:hover > * { background-color: rgba(255, 255, 255, .04); } .l360-mono { font-family: Consolas, "Courier New", monospace; letter-spacing: .5px; } /* --- Formularios --- */ .form-label { font-size: .82rem; font-weight: 600; color: var(--l360-text); margin-bottom: .3rem; } .form-control, .form-select { background-color: var(--l360-card-bg); border-color: var(--l360-border); color: var(--l360-text); font-size: .9rem; } .form-control:focus, .form-select:focus { background-color: var(--l360-card-bg); color: var(--l360-text); border-color: var(--l360-primary-light); box-shadow: 0 0 0 .2rem rgba(47, 107, 179, .16); } .form-control::placeholder { color: var(--l360-text-muted); opacity: .7; } .form-text { color: var(--l360-text-muted); font-size: .78rem; } .btn-primary { background-color: var(--l360-primary); border-color: var(--l360-primary); } .btn-primary:hover, .btn-primary:focus { background-color: var(--l360-primary-dark); border-color: var(--l360-primary-dark); } .btn-outline-primary { color: var(--l360-primary); border-color: var(--l360-primary); } .btn-outline-primary:hover { background-color: var(--l360-primary); border-color: var(--l360-primary); } .dropdown-menu { background-color: var(--l360-card-bg); border-color: var(--l360-border); box-shadow: var(--l360-sombra-md); } .dropdown-item { color: var(--l360-text); } .dropdown-item:hover, .dropdown-item:focus { background-color: rgba(29, 78, 137, .08); color: var(--l360-primary-dark); } [data-tema="oscuro"] .dropdown-item:hover { background-color: rgba(255, 255, 255, .06); color: #fff; } .modal-content { background-color: var(--l360-card-bg); border-color: var(--l360-border); color: var(--l360-text); } .modal-header, .modal-footer { border-color: var(--l360-border); } [data-tema="oscuro"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* --- Caja de clave --- */ .l360-clave { font-family: Consolas, "Courier New", monospace; font-size: 1.02rem; font-weight: 700; letter-spacing: 1.4px; color: var(--l360-primary-dark); background-color: rgba(29, 78, 137, .07); border: 1px dashed var(--l360-primary-light); border-radius: 8px; padding: .5rem .8rem; display: inline-block; word-break: break-all; } [data-tema="oscuro"] .l360-clave { color: #9dc4ef; background-color: rgba(77, 143, 214, .12); } /* --- Línea de tiempo de eventos --- */ .l360-timeline { list-style: none; margin: 0; padding: 0 0 0 1.4rem; border-left: 2px solid var(--l360-border); } .l360-timeline li { position: relative; padding: 0 0 1.1rem .4rem; } .l360-timeline li::before { content: ""; position: absolute; left: -1.82rem; top: .3rem; width: 11px; height: 11px; border-radius: 50%; background-color: var(--l360-card-bg); border: 2px solid var(--l360-primary); } /* --- Login --- */ .l360-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; background: linear-gradient(135deg, #0a2246 0%, #123464 45%, #1d4e89 100%); } .l360-login__card { width: 100%; max-width: 420px; background-color: #fff; border-radius: 16px; box-shadow: 0 18px 46px rgba(5, 20, 44, .38); padding: 2.1rem 1.9rem 1.9rem; color: #23303f; } .l360-login__marca { text-align: center; margin-bottom: 1.5rem; } .l360-login__marca i { font-size: 2.4rem; color: #1d4e89; } .l360-login__marca h1 { font-size: 1.62rem; font-weight: 700; letter-spacing: -.6px; margin: .45rem 0 .15rem; color: #0d2b52; } .l360-login__marca h1 .l360-360 { color: #f0a500; } .l360-login__marca p { font-size: .845rem; color: #6b7a90; margin: 0; } .l360-login__card .form-control { background-color: #fff; color: #23303f; border-color: #d8e0ec; } .l360-login__pie { text-align: center; font-size: .76rem; color: rgba(255, 255, 255, .62); margin-top: 1.1rem; } /* --- Toasts --- */ .l360-toasts { position: fixed; top: calc(var(--l360-topbar-alto) + 12px); right: 16px; z-index: 1090; display: flex; flex-direction: column; gap: .6rem; max-width: min(380px, calc(100vw - 32px)); } /* --- Mapa --- */ .l360-mapa { height: 460px; width: 100%; border-radius: var(--l360-radio); border: 1px solid var(--l360-border); z-index: 1; } .l360-mapa-pantalla { height: calc(100vh - var(--l360-topbar-alto) - 230px); min-height: 420px; } .l360-grafico { position: relative; height: 290px; } /* --- Fondo semitransparente del sidebar móvil --- */ .l360-overlay { position: fixed; inset: 0; background-color: rgba(9, 22, 40, .5); z-index: 1035; display: none; } .l360-overlay.visible { display: block; } /* ========================================================================= Responsive ========================================================================= */ @media (max-width: 991.98px) { .l360-sidebar { transform: translateX(-100%); width: var(--l360-sidebar-ancho); box-shadow: 0 0 34px rgba(5, 20, 44, .35); } .l360-app.abierto .l360-sidebar { transform: translateX(0); } /* En móvil el sidebar flota: el contenido ocupa todo el ancho. */ .l360-main, .l360-app.mini .l360-main { margin-left: 0; } .l360-app.mini .l360-sidebar { width: var(--l360-sidebar-ancho); } .l360-app.mini .l360-sidebar__marca span, .l360-app.mini .l360-grupo__texto, .l360-app.mini .l360-grupo__chevron, .l360-app.mini .l360-item__texto, .l360-app.mini .l360-btn-salir span { display: inline; } .l360-app.mini .l360-sidebar__marca, .l360-app.mini .l360-grupo__btn, .l360-app.mini .l360-item, .l360-app.mini .l360-btn-salir { justify-content: flex-start; padding-left: .75rem; padding-right: .75rem; } .l360-app.mini .l360-btn-salir { justify-content: center; } .l360-saludo { display: none; } .l360-contenido { padding: 1rem .85rem 2.5rem; } } @media (max-width: 575.98px) { .l360-pill span.l360-fecha { display: none; } .l360-pagina-head__icono { width: 38px; height: 38px; font-size: 1.1rem; } .l360-pagina-head h1 { font-size: 1.12rem; } .l360-kpi__valor { font-size: 1.7rem; } .l360-login__card { padding: 1.6rem 1.15rem 1.4rem; } /* Tablas apiladas como tarjetas en pantallas muy angostas. */ .l360-tabla-cards thead { display: none; } .l360-tabla-cards tbody tr { display: block; margin-bottom: .75rem; border: 1px solid var(--l360-border); border-radius: var(--l360-radio); padding: .35rem .2rem; background-color: var(--l360-card-bg); } .l360-tabla-cards tbody td { display: flex; justify-content: space-between; gap: 1rem; border: 0 !important; padding: .35rem .75rem; text-align: right; } .l360-tabla-cards tbody td::before { content: attr(data-etiqueta); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--l360-text-muted); text-align: left; flex: 0 0 auto; } } @media print { .l360-sidebar, .l360-topbar, .l360-toasts, .l360-overlay, .no-print { display: none !important; } .l360-main { margin-left: 0 !important; } }