/* Base, estructura y navegación del sistema. Sin estilos inline en Blade: todo el diseño vive en estos archivos. */ :root { --guinda: #7b1e3a; --guinda-oscuro: #5d1630; --guinda-claro: #a0334f; --guinda-suave: #f6eaee; --dorado: #c79b66; --dorado-claro: #e2c9a6; --verde: #246257; --naranja: #f3aa2d; --azul: #403e68; --rojo: #b00020; --tinta: #1f2430; --tinta-suave: #5a6270; --linea: #e6e8ed; --gris-fondo: #f2f3f7; --superficie: #ffffff; --radio: 14px; --radio-sm: 10px; --sombra: 0 1px 2px rgba(20, 24, 33, 0.04), 0 8px 24px rgba(20, 24, 33, 0.06); --sombra-alta: 0 18px 48px rgba(20, 24, 33, 0.18); --ancho-barra: 268px; --transicion: 0.18s ease; } * { -webkit-tap-highlight-color: transparent; } body { background-color: var(--gris-fondo); color: var(--tinta); font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 0.925rem; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { color: var(--tinta); letter-spacing: -0.01em; } a { color: var(--guinda); } /* El foco visible es requisito de accesibilidad: se unifica en un solo lugar. */ :focus-visible { outline: 2px solid var(--guinda); outline-offset: 2px; } /* ── Estructura: barra lateral fija + contenido ─────────────────────── */ .sidebar { display: block; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1045; width: 100%; max-width: 320px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; background: linear-gradient(165deg, #8a2444 0%, var(--guinda) 42%, var(--guinda-oscuro) 100%); color: #fff; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.28) transparent; } .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.24); border-radius: 3px; } /* Cortina del cajón en móvil: sin ella el menú flota sobre el contenido y no queda claro que la pantalla está bloqueada. */ .sidebar-cortina { position: fixed; inset: 0; z-index: 1040; background-color: rgba(23, 12, 17, 0.55); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity var(--transicion), visibility var(--transicion); } .sidebar-cortina.visible { opacity: 1; visibility: visible; } /* Con el cajón abierto el fondo no debe desplazarse bajo el dedo. La clase se pone en : es el elemento que desplaza la página. */ .menu-abierto { overflow: hidden; } @media (min-width: 992px) { .sidebar { max-width: var(--ancho-barra); box-shadow: 4px 0 24px rgba(20, 24, 33, 0.08); } /* El contenido se recorre el ancho de la barra, que es fixed. */ .content { margin-left: var(--ancho-barra); } .sidebar-cortina { display: none; } } .content { display: flex; flex-direction: column; min-height: 100vh; min-width: 0; } .content > main { flex: 1 1 auto; min-width: 0; } .sidebar-inner { display: flex; flex-direction: column; min-height: 100%; padding-bottom: 20px; } /* ── Identidad institucional en la barra ────────────────────────────── */ /* El logotipo institucional es apaisado: va en su propio renglón, si no queda ilegible al lado del nombre del sistema. */ .sidebar-marca { display: flex; flex-direction: column; gap: 10px; padding: 6px 4px 16px; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .sidebar-escudo { width: 100%; max-width: 180px; height: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25)); } .sidebar-marca-texto { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .sidebar-marca-nombre { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; } .sidebar-marca-texto small { font-size: 0.68rem; color: var(--dorado-claro); letter-spacing: 0.03em; } /* ── Navegación ─────────────────────────────────────────────────────── */ .sidebar .nav { white-space: nowrap; } .sidebar .nav-item { margin-bottom: 0.15rem; } .sidebar .nav-link { position: relative; padding: 0.6rem 0.8rem; border-radius: var(--radio-sm); font-size: 0.92rem; color: rgba(255, 255, 255, 0.85); cursor: pointer; transition: background-color var(--transicion), color var(--transicion), transform var(--transicion); } .sidebar .nav-link:hover, .sidebar .nav-link:focus { color: #fff; background-color: rgba(255, 255, 255, 0.12); transform: translateX(2px); } /* La sección activa se marca con barra dorada, no solo con fondo. */ .sidebar .nav-item.active > .nav-link, .sidebar .nav-item.active > a.nav-link { color: #fff; font-weight: 600; background-color: rgba(255, 255, 255, 0.17); box-shadow: inset 3px 0 0 var(--dorado); } .sidebar .sidebar-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 0.6rem; border-radius: 8px; font-size: 0.82rem; background-color: rgba(255, 255, 255, 0.1); color: var(--dorado-claro); transition: background-color var(--transicion), color var(--transicion); } .sidebar .nav-item.active > .nav-link .sidebar-icon { background-color: var(--dorado); color: #fff; } .sidebar .sidebar-text { overflow: hidden; text-overflow: ellipsis; } .sidebar .link-arrow { font-size: 0.7rem; color: rgba(255, 255, 255, 0.55); transition: transform var(--transicion); } /* La flecha gira al abrir el submenú para indicar el estado. */ .sidebar .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .link-arrow { transform: rotate(90deg); } .sidebar .nav-link + .multi-level { margin-top: 0.15rem; } .sidebar .multi-level { position: relative; margin-left: 22px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, 0.16); } .sidebar .multi-level .nav-link { padding: 0.42rem 0.7rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); } .sidebar .multi-level .nav-item.active > .nav-link { box-shadow: none; background-color: rgba(255, 255, 255, 0.14); } .sidebar-heading { margin: 18px 10px 6px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); } .sidebar-separador { border-color: rgba(255, 255, 255, 0.16); margin: 18px 0 10px; } .sidebar-pie { font-size: 0.66rem; color: rgba(255, 255, 255, 0.5); text-align: center; margin-bottom: 0; margin-top: auto; padding-top: 10px; } /* Tarjeta de usuario dentro de la barra (solo móvil). */ .user-card { border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .user-card h2 { color: #fff; } .sidebar-cerrar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); font-size: 1rem; text-decoration: none; } .sidebar-cerrar:hover { background-color: rgba(255, 255, 255, 0.22); color: #fff; } /* ── Barra superior ─────────────────────────────────────────────────── */ .app-topbar { z-index: 1030; background-color: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea) !important; box-shadow: 0 1px 3px rgba(20, 24, 33, 0.05); min-height: 64px; } .app-topbar .breadcrumb { font-size: 0.86rem; --bs-breadcrumb-divider-color: #adb5bd; } .app-topbar .breadcrumb-item a { color: var(--guinda); text-decoration: none; } .app-topbar .breadcrumb-item.active { color: var(--tinta); font-weight: 600; } .topbar-seccion-movil { font-size: 0.95rem; color: var(--tinta); max-width: 46vw; } .topbar-banner { max-height: 36px; width: auto; } .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: var(--radio-sm); border-color: var(--linea); color: var(--guinda); } .sidebar-toggle:focus { box-shadow: 0 0 0 3px rgba(123, 30, 58, 0.15); } .topbar-perfil { padding: 4px 8px !important; border-radius: 999px; color: var(--tinta); text-decoration: none; transition: background-color var(--transicion); } .topbar-perfil:hover { background-color: var(--guinda-suave); color: var(--tinta); } .topbar-perfil-datos { flex-direction: column; align-items: flex-start; line-height: 1.2; max-width: 190px; } .topbar-perfil-nombre { font-size: 0.86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; } .topbar-perfil-datos small { font-size: 0.7rem; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; } .topbar-perfil-flecha { font-size: 0.66rem; color: var(--tinta-suave); } .topbar-perfil-menu { min-width: 268px; border: 1px solid var(--linea); border-radius: var(--radio); padding: 6px; } .topbar-perfil-menu .dropdown-item { border-radius: 8px; font-size: 0.88rem; padding: 0.5rem 0.7rem; } .topbar-perfil-menu .dropdown-header { font-size: 0.8rem; color: var(--guinda); font-weight: 700; } /* ── Pie institucional ──────────────────────────────────────────────── */ .app-pie { background: linear-gradient(120deg, var(--guinda-oscuro) 0%, #4a1126 100%); border-top: 3px solid var(--dorado); padding: 16px 0; } .pie-escudo { height: 58px; width: auto; opacity: 0.92; } .pie-texto { color: rgba(255, 255, 255, 0.72); font-size: 0.76rem; } .avatar-iniciales { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(140deg, var(--dorado) 0%, #b07f46 100%); color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; } .avatar-grande { width: 48px; height: 48px; font-size: 1rem; border: 2px solid rgba(255, 255, 255, 0.45); } /* ── Login ──────────────────────────────────────────────────────────── */ .pantalla-login { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #8a2444 0%, var(--guinda) 45%, #3f0f21 100%); padding: 24px 16px; overflow: hidden; } /* Textura sutil para que el fondo no sea un degradado plano. */ .pantalla-login::before { content: ""; position: absolute; width: 620px; height: 620px; top: -220px; right: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(199, 155, 102, 0.35) 0%, transparent 68%); } .pantalla-login::after { content: ""; position: absolute; width: 520px; height: 520px; bottom: -220px; left: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, transparent 68%); } .tarjeta-login { position: relative; z-index: 1; width: 100%; max-width: 440px; border-radius: 20px; border: none; overflow: hidden; box-shadow: var(--sombra-alta); } /* Banner institucional sobre la tarjeta de acceso. */ .login-banner { background-color: #fff; border-bottom: 3px solid var(--dorado); padding: 16px 20px 12px; } .login-banner img { width: 100%; height: auto; } .login-logo { width: 68px; height: 68px; border-radius: 22px; background: linear-gradient(140deg, var(--guinda) 0%, var(--guinda-oscuro) 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; margin: 0 auto 14px; box-shadow: 0 10px 22px rgba(123, 30, 58, 0.3); } .login-pie { font-size: 0.72rem; color: var(--tinta-suave); } /* Botón de ver/ocultar contraseña dentro del campo. */ .campo-secreto { position: relative; } .campo-secreto .form-control { padding-right: 44px; } .btn-ver-secreto { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); border: none; background: none; color: var(--tinta-suave); padding: 6px 8px; line-height: 1; border-radius: 8px; } .btn-ver-secreto:hover { color: var(--guinda); background-color: var(--guinda-suave); } /* ── Notificaciones y espera ────────────────────────────────────────── */ /* Barra de progreso superior mientras Livewire procesa una petición. */ .barra-carga { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 2000; background: linear-gradient(90deg, var(--dorado) 0%, var(--guinda) 100%); opacity: 0; transition: width 0.3s ease, opacity 0.3s ease; } .barra-carga.activa { width: 85%; opacity: 1; } .barra-carga.completa { width: 100%; opacity: 0; } /* ── Gráfica de barras del tablero ──────────────────────────────────── */ .grafica-barras { display: flex; align-items: flex-end; gap: 8px; height: 210px; } .barra-dia { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; } /* La altura la inyecta el script del tablero desde data-alto. */ .barra { width: 100%; max-width: 46px; min-height: 4px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #a0334f 0%, var(--guinda) 45%, var(--guinda-oscuro) 100%); transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter var(--transicion); } .barra-dia:hover .barra { filter: brightness(1.12); } .barra-valor { font-size: 0.72rem; font-weight: 700; color: var(--guinda); margin-bottom: 4px; min-height: 1em; } .barra-etiqueta { font-size: 0.66rem; color: var(--tinta-suave); margin-top: 8px; white-space: nowrap; text-transform: capitalize; } .progress-fina { height: 8px; border-radius: 999px; background-color: #eceef3; } .progress-fina .progress-bar { border-radius: 999px; transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .bg-guinda { background: linear-gradient(90deg, var(--guinda) 0%, #9c2a4c 100%) !important; } @media (max-width: 575.98px) { .grafica-barras { height: 170px; } .barra-etiqueta { font-size: 0.6rem; transform: rotate(-45deg); transform-origin: center; margin-top: 12px; } }