/* ============================================================ Bodega — sistema de diseño "Liquid Glass" (rojo) Paleta roja tipo tarjeta de login dividida (blanco + panel rojo) ============================================================ */ :root{ /* Fondo rojo profundo (rampa del tema, en hex — usada por avatar/perfil) */ --deep-1: #2b0a0a; --deep-2: #4a0f0f; --deep-3: #7a1414; --deep-4: #b91c1c; /* Acento de marca como triples "r,g,b" — permite componer rgba(var(...),alpha) en cualquier gradiente/sombra/brillo sin repetir el color, y así un tema completo se cambia editando solo estas variables. */ --rgb-bright: 220,38,38; /* tono vivo/claro (arriba de gradientes, glow) */ --rgb-mid: 185,28,28; /* tono medio (acento-2, hovers) */ --rgb-dark: 127,29,29; /* tono oscuro (abajo de gradientes) */ --rgb-deep: 35,8,8; /* casi negro con tinte del acento (fondos, tooltips) */ --rgb-glow: 255,26,60; /* brillo neón (barra móvil, efecto táctil) */ --icon-filter: none; /* ajusta iconos PNG rojos al tema (hue-rotate/grayscale) */ /* Vidrio (glass) CLARO — usado por tablas/formularios/tarjetas. El modo nocturno redefine estas mismas variables más abajo. */ --glass-fill: rgba(255,255,255,0.60); --glass-fill-soft: rgba(255,255,255,0.40); --glass-border: rgba(255,255,255,0.55); --glass-highlight: rgba(255,255,255,0.85); --glass-dark-fill: rgba(var(--rgb-deep),0.94); --glass-dark-border: rgba(255,255,255,0.14); --ink-900: #241010; --text: #2a1414; --muted: #6a5b5b; --on-glass-muted:#d8bdbd; --accent: #dc2626; --accent-2: #b91c1c; --success: #2f6b3e; --success-bg: rgba(63,141,84,0.18); --danger: #7f1d1d; --danger-bg: rgba(196,55,55,0.16); --info: #8a4a3a; --info-bg: rgba(180,90,70,0.16); --radius-sm: 10px; --radius-lg: 20px; --radius-pill: 999px; --sidebar-w: 254px; /* Superficies que el modo nocturno redefine (contenido, no el sidebar ni la barra móvil, que ya son oscuros de por sí). */ --page-bg: #DADAD9; --page-bg-login: #f6f6f5; --input-bg: rgba(255,255,255,0.7); --input-border: rgba(0,0,0,0.12); --surface-strong: rgba(255,255,255,0.78); --modal-bg: rgba(255,255,255,0.75); --table-head-bg: rgba(255,255,255,0.35); --table-hover-bg: rgba(255,255,255,0.25); /* Líneas de la tabla (filas y columnas) en el tono neón del tema activo */ --table-line: rgba(var(--rgb-bright),0.45); } /* ---------------- Temas de color ---------------- Cada tema redefine solo el acento (rgb-*, deep-*, accent) — el resto de la hoja de estilos ya está construida sobre esas variables, así que un tema nuevo recolorea sidebar, barra móvil, botones, gráficas, calendario, etc. sin tocar cada regla. */ :root[data-theme="green"]{ --rgb-bright: 34,197,94; --rgb-mid: 22,163,74; --rgb-dark: 21,94,58; --rgb-deep: 6,20,14; --rgb-glow: 57,255,140; --accent:#22c55e; --accent-2:#16a34a; --deep-1:#071310; --deep-2:#0f2a1f; --deep-3:#1f5c3f; --deep-4:#22c55e; --icon-filter: hue-rotate(105deg) saturate(1.4); } :root[data-theme="pink"]{ --rgb-bright: 236,72,153; --rgb-mid: 219,39,119; --rgb-dark: 157,23,77; --rgb-deep: 26,6,16; --rgb-glow: 255,105,180; --accent:#ec4899; --accent-2:#db2777; --deep-1:#1a0610; --deep-2:#3d0f24; --deep-3:#7a1450; --deep-4:#db2777; --icon-filter: hue-rotate(280deg) saturate(1.3); } :root[data-theme="navy"]{ --rgb-bright: 37,99,235; --rgb-mid: 29,78,216; --rgb-dark: 30,58,138; --rgb-deep: 4,8,20; --rgb-glow: 96,165,250; --accent:#2563eb; --accent-2:#1d4ed8; --deep-1:#04081a; --deep-2:#0b1739; --deep-3:#14306b; --deep-4:#1d4ed8; --icon-filter: hue-rotate(160deg) saturate(2); } :root[data-theme="black"]{ --rgb-bright: 161,161,170; --rgb-mid: 113,113,122; --rgb-dark: 63,63,70; --rgb-deep: 8,8,9; --rgb-glow: 212,212,216; --accent:#a1a1aa; --accent-2:#71717a; --deep-1:#09090b; --deep-2:#18181b; --deep-3:#3f3f46; --deep-4:#71717a; --icon-filter: grayscale(1) brightness(1.5); } :root[data-theme="neon"]{ --rgb-bright: 168,85,247; --rgb-mid: 147,51,234; --rgb-dark: 88,28,135; --rgb-deep: 10,4,20; --rgb-glow: 217,70,239; --accent:#a855f7; --accent-2:#9333ea; --deep-1:#0a0414; --deep-2:#1e0a35; --deep-3:#4c1d78; --deep-4:#9333ea; --icon-filter: hue-rotate(230deg) saturate(1.6); } /* ---------------- Modo nocturno ---------------- Solo redefine las superficies del CONTENIDO (tablas, formularios, tarjetas, fondo de página). El sidebar y la barra móvil ya son de vidrio oscuro y no cambian. Los colores de alerta se aclaran aquí porque su tono por defecto es oscuro (pensado para fondos claros) y perdería contraste sobre fondo oscuro. */ :root[data-mode="dark"]{ --page-bg: #16100f; --page-bg-login: #16100f; --glass-fill: rgba(32,19,19,0.55); --glass-fill-soft: rgba(32,19,19,0.38); --glass-border: rgba(255,255,255,0.10); --glass-highlight: rgba(255,255,255,0.14); --ink-900: #f3ecec; --text: #ece3e3; --muted: #b6a3a3; --input-bg: rgba(255,255,255,0.06); --input-border: rgba(255,255,255,0.16); --surface-strong: rgba(28,16,16,0.82); --modal-bg: rgba(24,14,14,0.86); --table-head-bg: rgba(255,255,255,0.06); --table-hover-bg: rgba(255,255,255,0.05); --table-line: rgba(var(--rgb-bright),0.55); --success: #4ade80; --success-bg: rgba(34,197,94,0.18); --danger: #f87171; --danger-bg: rgba(239,68,68,0.18); --info: #f0b494; --info-bg: rgba(217,119,87,0.20); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink-900); font-size: 15px; line-height: 1.5; min-height:100vh; background: var(--page-bg); background-attachment: fixed; background-size: cover; transition: background .2s ease; } h1,h2,h3,h4{ font-weight: 700; letter-spacing: -0.01em; margin: 0 0 .5em 0; color: var(--ink-900); } h2{font-size: 1.5rem} h3{font-size: 1.15rem; margin-top: 1.6em} h4{font-size: 1rem; color: var(--muted); text-transform: none; margin-top: 1.8em} a{color: var(--accent-2); text-decoration-color: rgba(var(--rgb-mid),0.4)} hr{border:none; border-top:1px solid rgba(0,0,0,0.1); margin:1.8em 0} /* Paneles de vidrio CLARO (tablas, formularios, tarjetas, calendario, modal): el fondo aquí es claro, así que el texto vuelve a tono oscuro para legibilidad. */ .table, .form, .form-inline, .calendar, .modal-box{ color: var(--text); } .table h1, .table h2, .table h3, .table h4, .form h1, .form h2, .form h3, .form h4, .form-inline h1, .form-inline h2, .form-inline h3, .form-inline h4, .calendar h1, .calendar h2, .calendar h3, .calendar h4, .modal-box h1, .modal-box h2, .modal-box h3, .modal-box h4{ color: var(--ink-900); } .table .muted, .form .muted, .form-inline .muted, .calendar .muted, .modal-box .muted{ color: var(--muted); } .table a, .form a, .form-inline a, .calendar a{ color: var(--accent-2); text-decoration-color: currentColor } /* Los botones deben conservar su propio color de texto sin importar el contenedor (.form/.table/etc tienen más especificidad que la clase del botón sola). */ .table a.btn-primary, .form a.btn-primary, .form-inline a.btn-primary, .calendar a.btn-primary, .table a.btn-edit, .form a.btn-edit, .form-inline a.btn-edit, .calendar a.btn-edit, .table a.btn-download, .form a.btn-download, .form-inline a.btn-download, .calendar a.btn-download{ color:#000; } .table a.btn-danger, .form a.btn-danger, .form-inline a.btn-danger, .calendar a.btn-danger{ color:#fff; } .table a.btn-guest, .form a.btn-guest, .form-inline a.btn-guest, .calendar a.btn-guest{ color: var(--accent); } /* ---------------- Sidebar (glass oscuro) ---------------- */ .sidebar{ position: fixed; top:0; left:0; bottom:0; width: var(--sidebar-w); background: radial-gradient(circle at 18% -8%, rgba(255,255,255,0.16), transparent 55%), linear-gradient(165deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.02) 22%, rgba(255,255,255,0) 45%), linear-gradient(180deg, rgba(var(--rgb-deep),0.62) 0%, rgba(var(--rgb-deep),0.82) 100%); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border-right: 1px solid rgba(255,255,255,0.14); box-shadow: inset 1px 0 0 rgba(255,255,255,0.07), inset 0 1px 0 rgba(255,255,255,0.10), 10px 0 30px rgba(0,0,0,0.30); color: var(--on-glass-muted); display:flex; flex-direction:column; padding: 22px 16px; gap: 6px; z-index: 10; } .brand{ display:flex; align-items:center; padding: 6px 10px 22px 10px; color:#fff; } .brand-logo{ max-width: 100%; height: auto; max-height: 42px; object-fit: contain; display:block; } .nav-icon{ flex-shrink:0; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2)); } .nav-icon-light{flex-shrink:0; color:#DADAD9} .side-nav{display:flex; flex-direction:column; gap:6px} .nav-btn{ display:flex; align-items:center; gap:12px; padding: 11px 16px; border-radius: var(--radius-sm); color: var(--on-glass-muted); text-decoration:none; font-weight:600; font-size:0.94rem; transition: background .15s ease, color .15s ease; } .nav-btn svg{flex-shrink:0; opacity:.9} /* Acordeón del sidebar (solo aparece en escritorio; en mobile el sidebar entero está oculto y se usa la barra flotante, sin cambios ahí). */ .nav-group{margin:0} .nav-group-summary{ cursor:pointer; justify-content:space-between; width:100%; background:none; border:none; font:inherit; text-align:left; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } .nav-group-summary:hover, .nav-group-summary:active{transform:none; box-shadow:none} .nav-btn-main{display:flex; align-items:center; gap:12px} .nav-chevron{flex-shrink:0; opacity:.7; transition: transform .28s cubic-bezier(.4,0,.2,1)} .nav-group.open .nav-chevron{transform: rotate(180deg)} .nav-submenu-wrap{ display:grid; grid-template-rows: 0fr; transition: grid-template-rows .28s cubic-bezier(.4,0,.2,1); } .nav-group.open .nav-submenu-wrap{grid-template-rows: 1fr} .nav-submenu{ overflow:hidden; min-height:0; display:flex; flex-direction:column; gap:1px; padding: 2px 0 6px 20px; margin-bottom:2px; } .nav-subitem{ display:block; padding:9px 14px; border-radius: var(--radius-sm); color: var(--on-glass-muted); text-decoration:none; font-size:0.86rem; font-weight:600; border: 1px solid transparent; transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; } /* Vidrio rojizo real (gradiente + blur + borde + brillo) para hover/selección, tanto en los botones de nivel superior como en los subítems del acordeón. */ .nav-btn:hover, .nav-subitem:hover{ background: linear-gradient(165deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 40%, rgba(255,255,255,0) 70%), linear-gradient(180deg, rgba(var(--rgb-bright),0.24) 0%, rgba(var(--rgb-dark),0.24) 100%); backdrop-filter: blur(8px) saturate(180%); -webkit-backdrop-filter: blur(8px) saturate(180%); border-color: rgba(255,255,255,0.14); color:#fff; } .nav-btn.active, .nav-subitem.active{ background: linear-gradient(165deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.06) 35%, rgba(255,255,255,0) 65%), linear-gradient(180deg, rgba(var(--rgb-bright),0.55) 0%, rgba(var(--rgb-dark),0.55) 100%); backdrop-filter: blur(10px) saturate(180%); -webkit-backdrop-filter: blur(10px) saturate(180%); border-color: rgba(255,255,255,0.28); color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -8px 12px -8px rgba(0,0,0,0.30), 0 4px 16px rgba(var(--rgb-dark),0.40); } .nav-btn.active svg{opacity:1} .side-spacer{flex:1} .user-card{ display:flex; align-items:center; gap:10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); padding: 10px 12px; } .avatar{ width:34px; height:34px; border-radius:50%; background: linear-gradient(180deg, var(--deep-4), var(--deep-2)); color: #f4f7ee; border: 1px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; } .user-info{display:flex; flex-direction:column; line-height:1.25; overflow:hidden} .user-info strong{color:#fff; font-size:0.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .user-info small{color:#a9b895; font-size:0.78rem} .logout-btn{ margin-left:auto; color: var(--on-glass-muted); display:flex; padding:6px; border-radius:8px; transition: background .15s ease, color .15s ease; } .logout-btn:hover{background: rgba(255,255,255,0.14); color:#fff} /* ---------------- Content area ---------------- */ .content-area{margin-left: var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column} .content-wrap{max-width:1080px; width:100%; margin:0 auto; padding: 32px 28px; flex:1} .page-footer{padding: 16px 28px 28px; color: var(--muted); text-align:center} .footer-logo{height:22px; width:auto; opacity:0.9} /* ---------------- Barra flotante inferior (solo mobile) ---------------- */ .mobile-tabbar{ display:none; position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:50; align-items:center; gap:6px; padding:10px 14px; background: linear-gradient(180deg, rgba(var(--rgb-bright),0.95) 0%, rgba(var(--rgb-dark),0.95) 100%); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius-pill); box-shadow: 0 12px 30px rgba(var(--rgb-deep),0.5), inset 0 1px 0 rgba(255,255,255,0.25); } .tab-btn{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; color: rgba(255,255,255,0.82); flex-shrink:0; transition: color .15s ease, transform .15s ease, background-color .15s ease; } .tab-btn.active{background:#fff; color: rgb(var(--rgb-bright))} .tab-icon-img{width:22px; height:22px; object-fit:contain; transition: filter .15s ease; filter: var(--icon-filter)} /* Se ilumina como neón (color del tema) al pasarle el dedo por encima (arrastrar) o al tocarlo */ .tab-btn.tab-touch{ color:#fff; background: rgba(255,255,255,0.22); transform: scale(1.22); } .tab-btn.tab-touch .tab-icon, .tab-btn.tab-touch .tab-icon-img{ filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px rgb(var(--rgb-glow))) drop-shadow(0 0 18px rgb(var(--rgb-glow))) drop-shadow(0 0 28px rgb(var(--rgb-glow))); } @media (max-width: 760px){ .sidebar{display:none} body.has-session .content-area{margin-left:0; padding-bottom:100px} .mobile-tabbar{display:flex} body.has-session .content-wrap{padding:24px 18px} body.has-session .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))} body.has-session .quick-card{padding:16px 14px} } @media (max-width: 420px){ body.has-session .quick-grid{grid-template-columns:1fr} } /* ---------------- Skeleton de carga entre páginas (mobile y escritorio) ---------------- */ .page-skeleton{ display:none; position:fixed; inset:0; z-index:999; background: var(--page-bg); } .page-skeleton.show{display:flex} .page-skeleton .sk-sidebar{ width: var(--sidebar-w); height:100%; flex-shrink:0; background: var(--glass-dark-fill); padding:22px 16px; } .page-skeleton .sk-content{ flex:1; padding:32px 28px; overflow:hidden; } .sk-block{ border-radius: var(--radius-lg); background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.12) 37%, rgba(0,0,0,0.06) 63%); background-size: 400% 100%; animation: sk-shimmer 1.4s ease-in-out infinite; } .page-skeleton .sk-sidebar .sk-block{ background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.14) 37%, rgba(255,255,255,0.06) 63%); background-size: 400% 100%; } @keyframes sk-shimmer{ 0%{background-position:100% 50%} 100%{background-position:0 50%} } .sk-logo{height:34px; width:70%; border-radius: var(--radius-sm); margin-bottom:26px} .sk-navitem{height:38px; border-radius: var(--radius-pill); margin-bottom:10px} .sk-title{height:30px; width:220px; max-width:60%; margin-bottom:20px} .sk-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px} .sk-card{height:112px; border-radius: var(--radius-lg)} @media (max-width: 760px){ .page-skeleton .sk-sidebar{display:none} .page-skeleton .sk-content{padding:24px 18px} .sk-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } body.no-session{background: var(--page-bg-login); background-attachment:fixed} body.no-session .content-area{margin-left:0; align-items:center; justify-content:center; display:flex} body.no-session .content-wrap{ max-width: 420px; margin: 0 auto; padding: 0; flex: none; } body.no-session .page-footer{color: var(--on-glass-muted)} /* ---------------- Login (tarjeta dividida: panel blanco + panel rojo) ---------------- */ body.no-session .content-wrap{max-width: 1040px; padding: 24px} .login-split{ position:relative; display:flex; width:100%; min-height: 560px; background: #fff; border-radius: var(--radius-lg); overflow:hidden; box-shadow: 0 30px 70px rgba(20,4,4,0.55); } /* Panel izquierdo: formulario, sobre blanco */ .login-left{ flex: 1 1 52%; display:flex; align-items:center; justify-content:center; padding: 48px 44px; background:#fff; } .login-left-inner{width:100%; max-width:360px} .login-eyebrow{ margin:0 0 4px; text-align:left; color:#8a8f98; font-size:0.78rem; font-weight:700; letter-spacing:0.14em; } .login-logo-img{ display:block; max-width: 220px; height:auto; max-height: 62px; object-fit: contain; margin: 0 auto 14px; } .login-subtitle{ color:#6b7280; font-size:0.92rem; margin: 0 0 26px; } .login-field{ position:relative; display:flex; align-items:center; margin-bottom:16px; border-radius: var(--radius-pill); border: 1px solid #e2e5ea; background:#fff; transition: border-color .15s ease; } .login-field:focus-within{border-color: var(--accent)} .login-field .field-icon{ display:flex; align-items:center; justify-content:center; width:44px; flex-shrink:0; color: var(--accent); } .login-field input{ flex:1; min-width:0; border:none; background:transparent; padding: 13px 14px 13px 2px; font-size:0.95rem; color:#1f2430; border-radius: var(--radius-pill); } .login-field input::placeholder{color:#9aa0ab} .login-field input:focus{outline:none} .toggle-password{ background:none; border:none; box-shadow:none; padding: 0 16px 0 4px; color:#9aa0ab; cursor:pointer; display:flex; align-items:center; } .toggle-password:hover{color: var(--accent)} .login-options{ display:flex; align-items:center; justify-content:space-between; margin: 2px 4px 22px; font-size:0.85rem; color:#6b7280; } .login-options label{display:flex; align-items:center; gap:7px; cursor:pointer} .login-options input[type="checkbox"]{width:15px; height:15px; accent-color: var(--accent)} .login-left-inner button[type="submit"]{ width:100%; padding:14px 16px; text-transform:uppercase; letter-spacing:0.12em; border-radius: var(--radius-pill); background: linear-gradient(180deg, rgb(var(--rgb-bright)) 0%, rgb(var(--rgb-mid)) 100%); color:#fff; border:1px solid rgba(255,255,255,0.2); box-shadow: 0 10px 24px rgba(var(--rgb-mid),0.4); transition: filter .15s ease; } .login-left-inner button[type="submit"]:hover{ filter: brightness(1.1); } .login-divider{ display:flex; align-items:center; gap:12px; margin:20px 0 16px; color:#9aa0ab; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; } .login-divider::before, .login-divider::after{content:""; flex:1; height:1px; background:#e2e5ea} .btn-guest{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px 16px; border-radius: var(--radius-pill); background:#fff; border:1px solid #e2e5ea; color: var(--accent); font-weight:700; font-size:0.9rem; text-decoration:none; transition: background .2s ease, transform .15s ease, border-color .2s ease; } .btn-guest:hover{background: rgba(var(--rgb-bright),0.08); border-color: var(--accent); transform: translateY(-1px)} /* Panel derecho: foto real de ciudad nocturna con velo rojo */ .login-right{ flex: 1 1 48%; position:relative; display:flex; align-items:center; justify-content:center; padding: 40px; overflow:hidden; background: radial-gradient(ellipse 70% 55% at 25% 15%, rgba(255,255,255,0.14), transparent 60%), linear-gradient(200deg, rgba(var(--rgb-mid),0.35) 0%, rgba(var(--rgb-deep),0.55) 100%), url('img/fondo_ciudad.jpg') center/cover no-repeat; } .login-right::before, .login-right::after{ content:""; position:absolute; pointer-events:none; } .login-right::before{ top:-25%; left:-15%; width:75%; height:75%; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 65%); } .login-right::after{ bottom:-30%; right:-20%; width:85%; height:85%; border-radius:50%; background: radial-gradient(circle, rgba(var(--rgb-bright),0.20), transparent 60%); } .login-right-content{ position:relative; z-index:1; text-align:center; color:#fff; max-width:340px; display:flex; flex-direction:column; align-items:center; width:100%; } .login-right-icon-img{ display:block; max-width: 150px; width:100%; height:auto; margin: 0 auto 8px; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35)); } .login-right-wordmark{ margin: 0 0 28px; line-height:normal; } .login-right-wordmark .jac{ display:block; font-size: 3rem; line-height:1.1; font-weight:800; letter-spacing:0.02em; color:#fff; } .login-right-wordmark .control{ display:block; margin-top:12px; font-size:0.95rem; font-weight:700; letter-spacing:0.5em; color: rgba(255,255,255,0.92); } .login-right-content p{ margin:0; color: rgba(255,255,255,0.88); font-size:0.98rem; line-height:1.5; } /* Manchas rojas decorativas en las esquinas de la página, como en la referencia */ body.no-session::before, body.no-session::after{ content:""; position:fixed; pointer-events:none; z-index:0; border-radius:50%; background: radial-gradient(circle, rgb(var(--rgb-bright)) 0%, rgb(var(--rgb-bright)) 90%, rgb(var(--rgb-dark)) 90%, rgb(var(--rgb-dark)) 100%); } body.no-session::before{top:-18vw; left:-18vw; width:42vw; height:42vw} body.no-session::after{bottom:-20vw; right:-20vw; width:38vw; height:38vw} body.no-session .login-split{position:relative; z-index:1} @media (max-width: 760px){ .login-split{flex-direction:column; min-height:0} .login-right{order:-1; padding:32px 28px} .login-right-logo-img{max-width:170px; margin-bottom:14px} .login-left{padding:36px 26px} body.no-session .content-wrap{padding:14px} } /* ---------------- Login v2 (diseño de prueba pasado por el usuario) ---------------- Aislado bajo .jac-login-preview para no chocar con clases genéricas (.card, .btn, .logo, .overlay, etc.) usadas en el resto de la app. */ .jac-login-preview{ display:flex; justify-content:center; align-items:center; width:100%; } .jac-login-preview .card{ width:900px; max-width:100%; min-height:500px; background:#fff; display:flex; border-radius:20px; overflow:hidden; box-shadow:0 15px 40px rgba(0,0,0,0.1); } .jac-login-preview .left{ width:50%; padding:50px; display:flex; flex-direction:column; justify-content:center; } .jac-login-preview .logo{ display:flex; align-items:center; gap:10px; } .jac-login-preview .logo img{width:40px} .jac-login-preview .logo h2{color:#c62828; margin:0} .jac-login-preview .subtitle{margin:20px 0; color:#666} .jac-login-preview .input-box{margin-bottom:15px} .jac-login-preview .input-box input{ width:100%; padding:12px; border-radius:25px; border:1px solid #ddd; outline:none; font-size:0.95rem; } .jac-login-preview .remember-row{ display:flex; align-items:center; gap:8px; margin:2px 4px 18px; font-size:0.85rem; color:#666; cursor:pointer; } .jac-login-preview .btn{ width:100%; padding:12px; border:none; border-radius:25px; background:linear-gradient(45deg,#e53935,#c62828); color:#fff; font-weight:bold; text-transform:uppercase; letter-spacing:0.05em; cursor:pointer; transition:0.3s; } .jac-login-preview .btn:hover{opacity:0.9} .jac-login-preview .guest-link{ display:block; text-align:center; margin-top:16px; color:#c62828; font-weight:600; font-size:0.88rem; text-decoration:none; } .jac-login-preview .guest-link:hover{text-decoration:underline} .jac-login-preview .right{ width:50%; position:relative; background: url('img/skyline.svg') center/cover no-repeat, linear-gradient(200deg, #7a1414 0%, #4a0f0f 55%, #2b0a0a 100%); } .jac-login-preview .overlay{ width:100%; height:100%; background:rgba(200,40,40,0.85); color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:30px; } .jac-login-preview .logo-big{width:120px; margin-bottom:20px; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35));} .jac-login-preview .overlay h1{font-size:40px; margin:0 0 10px} .jac-login-preview .overlay p{max-width:300px; margin:0} @media (max-width: 760px){ .jac-login-preview .card{flex-direction:column; min-height:0} .jac-login-preview .left, .jac-login-preview .right{width:100%} .jac-login-preview .right{order:-1; min-height:260px} } /* ---------------- Accesos rápidos (dashboard) ---------------- */ .quick-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin: 4px 0 30px; } .quick-card{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:16px; background: var(--glass-fill); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border:1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 24px 22px; text-decoration:none; color: var(--text); font-weight:700; font-size:1.02rem; font-family:inherit; text-align:left; width:100%; cursor:pointer; box-shadow: 0 8px 24px rgba(25,6,6,0.14), inset 0 1px 0 rgba(255,255,255,0.6); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .quick-card:hover{transform: translateY(-3px); box-shadow: 0 16px 34px rgba(25,6,6,0.22); border-color: rgba(255,255,255,0.85)} .quick-card.locked{opacity:0.55; cursor:not-allowed; filter:saturate(0.7)} .quick-card.locked:hover{transform:none; box-shadow: 0 8px 24px rgba(25,6,6,0.14); border-color: var(--glass-border)} .quick-card .lock-badge{display:none} .quick-card.locked .lock-badge{ display:flex; align-items:center; justify-content:center; position:absolute; top:14px; right:14px; width:26px; height:26px; border-radius:50%; background: rgba(35,10,10,0.78); color:#fff; } .quick-icon{ width:50px; height:50px; border-radius: 14px; background: linear-gradient(180deg, rgba(var(--rgb-bright),0.95) 0%, rgba(var(--rgb-dark),0.95) 100%); color: #fff; border: 1px solid rgba(255,255,255,0.3); display:flex; align-items:center; justify-content:center; box-shadow: inset 0 1px 3px rgba(255,255,255,0.3); } /* ---------------- Dashboard: selector y gráficas de barras (Inicio) ---------------- */ .dash-toggle{ display:inline-flex; gap:4px; padding:4px; margin-bottom:20px; background: var(--glass-fill-soft); border:1px solid var(--glass-border); border-radius: var(--radius-pill); backdrop-filter: blur(10px); } .dash-toggle-btn{ background:transparent; border:none; box-shadow:none; padding:8px 18px; border-radius: var(--radius-pill); color: var(--muted); font-weight:700; font-size:0.88rem; cursor:pointer; transition: background .15s ease, color .15s ease; } .dash-toggle-btn:hover{background: var(--glass-fill)} .dash-toggle-btn.active{ background: linear-gradient(180deg, rgba(var(--rgb-bright),0.92) 0%, rgba(var(--rgb-dark),0.92) 100%); color:#fff; box-shadow: 0 4px 12px rgba(var(--rgb-deep),0.3); } .bar-chart-card{ position:relative; background: var(--glass-fill); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border:1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom:20px; box-shadow: 0 8px 24px rgba(25,6,6,0.14); } .online-badge{ position:absolute; top:22px; right:24px; display:flex; align-items:center; gap:7px; font-size:0.82rem; font-weight:700; color: rgba(255,255,255,0.8); } .online-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; background:#22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.9); } .bar-chart{display:flex; flex-direction:column; gap:14px} .bar-row{ position:relative; display:grid; grid-template-columns: 160px 1fr 56px; align-items:center; gap:12px; } .bar-label{ font-size:0.86rem; font-weight:600; color: var(--ink-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bar-track{ height:22px; border-radius: var(--radius-pill); background: rgba(var(--rgb-mid),0.08); overflow:hidden; } .bar-fill{ height:100%; border-radius:0 999px 999px 0; min-width:4px; background: linear-gradient(90deg, rgba(var(--rgb-bright),0.9) 0%, rgba(var(--rgb-dark),0.9) 100%); transition: width .5s ease; } .bar-value{ font-size:0.82rem; font-weight:700; color: var(--muted); text-align:right; font-variant-numeric: tabular-nums; } .bar-tooltip{ position:absolute; left:160px; bottom:calc(100% + 6px); background: linear-gradient(180deg, rgba(var(--rgb-deep),0.97), rgba(var(--rgb-deep),0.98)); color:#fff; font-size:0.8rem; font-weight:600; padding:6px 12px; border-radius: var(--radius-sm); white-space:nowrap; box-shadow: 0 8px 20px rgba(0,0,0,0.3); opacity:0; pointer-events:none; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; z-index:5; } .bar-row:hover .bar-tooltip, .bar-row:focus .bar-tooltip, .bar-row:focus-visible .bar-tooltip{ opacity:1; transform: translateY(0); } .bar-table-details{margin-top:16px} .bar-table-details summary{cursor:pointer; font-weight:700; font-size:0.85rem; color: var(--accent-2)} .bar-table-details .table{margin-top:12px} @media (max-width:760px){ .bar-row{grid-template-columns: 96px 1fr 40px; gap:8px} .bar-label{font-size:0.8rem} .bar-tooltip{left:96px} .bar-chart-card{padding:18px 16px} .online-badge{position:static; justify-content:flex-end; margin-bottom:14px} } /* Tema oscuro con brillo neón para el panel de gráficas de Inicio */ .bar-chart-card.dark-viz{ background: linear-gradient(160deg, var(--deep-1) 0%, #0a0a0a 100%); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 20px 50px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06); } .dark-viz h3{color:#fff; margin-top:0} .dark-viz .muted{color: rgba(255,255,255,0.55)} .dark-viz .dash-toggle{ background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); } .dark-viz .dash-toggle-btn{color: rgba(255,255,255,0.6)} .dark-viz .dash-toggle-btn:hover{background: rgba(255,255,255,0.08)} .dark-viz .bar-label{color: rgba(255,255,255,0.88)} .dark-viz .bar-value{color: rgba(255,255,255,0.55)} .dark-viz .bar-track{background: rgba(255,255,255,0.07)} .dark-viz .bar-fill{ background: linear-gradient(90deg, rgb(var(--rgb-bright)) 0%, rgb(var(--rgb-mid)) 100%); box-shadow: 0 0 14px rgba(var(--rgb-bright),0.55), inset 0 0 4px rgba(255,255,255,0.35); } .dark-viz .bar-tooltip{border: 1px solid rgba(var(--rgb-bright),0.4)} .dark-viz .bar-table-details summary{color: rgb(var(--rgb-bright))} .dark-viz .bar-table-details .table{ background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); } .dark-viz .bar-table-details .table th{background: rgba(255,255,255,0.08); color:#fff; border-bottom-color: var(--table-line)} .dark-viz .bar-table-details .table td{border-bottom-color: var(--table-line)} .dark-viz .bar-table-details .table tr:hover td{background: rgba(255,255,255,0.06)} /* Gráfico de tendencia (líneas suaves) */ .trend-chart{margin-top:4px; position:relative} .trend-svg{width:100%; height:auto; display:block; overflow:visible} .trend-grid{stroke: rgba(255,255,255,0.08); stroke-width:1} .trend-axis-label{font-size:10px; fill: rgba(255,255,255,0.45); font-family:inherit} .trend-dot{transition: r .15s ease} .trend-tooltip{ position:absolute; transform: translate(-50%, -100%) translateY(-10px); background: linear-gradient(180deg, rgba(var(--rgb-deep),0.97), rgba(var(--rgb-deep),0.98)); border: 1px solid rgba(var(--rgb-bright),0.35); color:#fff; font-size:0.78rem; padding:8px 12px; border-radius: var(--radius-sm); white-space:nowrap; box-shadow: 0 10px 24px rgba(0,0,0,0.4); opacity:0; pointer-events:none; transition: opacity .12s ease; z-index:6; } .trend-tooltip.show{opacity:1} .trend-tooltip-title{font-weight:700; margin-bottom:4px; color: rgba(255,255,255,0.7)} .trend-tooltip-row{display:flex; align-items:center; gap:6px} .trend-tooltip-key{width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0} .trend-legend{display:flex; flex-wrap:wrap; gap:16px; margin-top:14px} .trend-legend-item{display:flex; align-items:center; gap:6px; font-size:0.82rem; color: rgba(255,255,255,0.75); font-weight:600} .trend-legend-key{width:14px; height:3px; border-radius:2px; display:inline-block} /* ---------------- Modal flotante (autorización) ---------------- */ #edit-fields.locked{opacity:.35; pointer-events:none; filter: blur(1px)} .modal-overlay{ position:fixed; inset:0; background: rgba(25,6,6,0.55); backdrop-filter: blur(4px); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; } .modal-box{ background: var(--modal-bg); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 26px 26px 22px; max-width:380px; width:100%; box-shadow: 0 25px 55px rgba(25,6,6,0.35); } .modal-box h3{margin-bottom:6px} .modal-box input{width:100%; margin:14px 0 4px} .modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:16px} /* ---------------- Calendario de reportes ---------------- */ .calendar{ background: var(--glass-fill); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border:1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 20px 22px; max-width: 520px; box-shadow: 0 8px 24px rgba(25,6,6,0.14); } .calendar-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .calendar-header strong{font-size:1.05rem; color: var(--ink-900)} .cal-nav{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background: var(--glass-fill-soft); color: var(--ink-900); text-decoration:none; font-size:1.2rem; line-height:1; border: 1px solid rgba(255,255,255,0.6); } .cal-nav:hover{background: var(--glass-highlight)} .calendar-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px} .calendar-weekdays span{ text-align:center; font-size:0.78rem; color: var(--muted); font-weight:700; } .calendar-day{ position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1; border-radius: var(--radius-sm); text-decoration:none; color: var(--text); font-size:0.9rem; background: var(--glass-fill-soft); transition: background .12s ease; } .calendar-day:hover{background: var(--accent-2); color:#fff} .calendar-day.empty{background:transparent} .calendar-day.today{outline:2px solid var(--ink-900); outline-offset:-2px; font-weight:700} .calendar-day.has-data::after{ content:""; position:absolute; bottom:5px; width:5px; height:5px; border-radius:50%; background: var(--accent-2); } .calendar-day.has-data:hover::after{background:#fff} .calendar-legend{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:0.82rem; color: var(--muted); } .legend-dot{width:7px; height:7px; border-radius:50%; background: var(--accent-2); display:inline-block} /* ---------------- Barra de búsqueda fija (sticky) ---------------- */ .sticky-search-bar{ position: sticky; top: 0; z-index: 20; padding: 10px 0 14px; background: var(--page-bg); } .search-input-wrap{ position:relative; display:flex; align-items:center; gap:8px; background: var(--surface-strong); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border: 1px solid var(--glass-border); border-radius: var(--radius-pill); padding: 4px 16px; box-shadow: 0 6px 18px rgba(25,6,6,0.12); max-width: 420px; } .search-input-wrap svg{color: var(--muted); flex-shrink:0} .search-input-wrap input{ border:none; background:transparent; flex:1; min-width:0; padding:9px 4px; font-size:0.92rem; color: var(--text); } .search-input-wrap input:focus{outline:none} /* ---------------- Cards / tables ---------------- */ .table{ width:100%; border-collapse:collapse; background: var(--glass-fill); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-radius: var(--radius-sm); overflow:hidden; box-shadow: 0 8px 20px rgba(25,6,6,0.12); border: 1px solid var(--glass-border); } .table th{ background: var(--table-head-bg); color: var(--ink-900); font-weight:700; font-size:0.86rem; text-align:left; padding: 10px 14px; border-bottom:1px solid var(--table-line); border-right:1px solid var(--table-line); } .table td{ padding: 10px 14px; vertical-align: top; border-bottom:1px solid var(--table-line); border-right:1px solid var(--table-line); } .table th:last-child, .table td:last-child{border-right:none} .table tr:last-child td{border-bottom:none} .table tr:hover td{background: var(--table-hover-bg)} /* ---------------- Forms ---------------- */ .form, .form-inline{ background: var(--glass-fill); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 18px; box-shadow: 0 8px 20px rgba(25,6,6,0.10); } .form-inline{display:flex; flex-wrap:wrap; gap:10px; align-items:center} .form label{display:block; margin-bottom:14px; font-size:0.88rem; color: var(--muted); font-weight:600} .form label input, .form label select, .form label textarea{margin-top:5px} input, select, textarea{ padding: 9px 12px; border:1px solid var(--input-border); border-radius: var(--radius-sm); font-size: 0.92rem; font-family:inherit; color:var(--text); background: var(--input-bg); } input:focus, select:focus, textarea:focus, a:focus-visible, button:focus-visible{ outline: 2px solid var(--accent-2); outline-offset:1px; } .form-inline input, .form-inline select{margin:0} .form .table{box-shadow:none; margin: 6px 0 10px} /* ---------------- Buscador de productos con desplegable propio ---------------- */ .item-search-wrap{ position:relative; } .item-search-wrap input.item-search{ width:100%; box-sizing:border-box; } .item-search-results{ /* Se posiciona con JS (left/top/width en línea) porque vive suelto en , no dentro de la tabla: así evita que el backdrop-filter de .table/.form lo atrape detrás de otros elementos de la página. */ position:fixed; z-index:1000; max-height:220px; overflow-y:auto; background: var(--modal-bg); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); box-shadow: 0 12px 28px rgba(25,6,6,0.25); } .item-search-option{ padding:10px 12px; font-size:0.9rem; color: var(--text); border-bottom:1px solid var(--table-line); cursor:pointer; white-space:normal; line-height:1.35; } .item-search-option:last-child{ border-bottom:none; } .item-search-option:hover{ background: var(--table-hover-bg); } .item-search-empty{ padding:10px 12px; font-size:0.88rem; color: var(--muted); } .qty-input{ width:100%; box-sizing:border-box; } /* Columna de Producto más ancha, Cantidad y el botón de borrar más angostos */ #report-items-table, #pt-report-items-table{ table-layout: fixed; overflow: visible; } #report-items-table th:nth-child(1), #report-items-table td:nth-child(1), #pt-report-items-table th:nth-child(1), #pt-report-items-table td:nth-child(1){ width:60%; } #report-items-table th:nth-child(2), #report-items-table td:nth-child(2), #pt-report-items-table th:nth-child(2), #pt-report-items-table td:nth-child(2){ width:27%; } #report-items-table th:nth-child(3), #report-items-table td:nth-child(3), #pt-report-items-table th:nth-child(3), #pt-report-items-table td:nth-child(3){ width:13%; } @media (max-width:480px){ #report-items-table th:nth-child(1), #report-items-table td:nth-child(1), #pt-report-items-table th:nth-child(1), #pt-report-items-table td:nth-child(1){ width:66%; } #report-items-table th:nth-child(2), #report-items-table td:nth-child(2), #pt-report-items-table th:nth-child(2), #pt-report-items-table td:nth-child(2){ width:22%; } #report-items-table th:nth-child(3), #report-items-table td:nth-child(3), #pt-report-items-table th:nth-child(3), #pt-report-items-table td:nth-child(3){ width:12%; } #report-items-table td, #pt-report-items-table td{ padding:8px 6px; } } /* ---------------- Barra de estado de conexión / sincronización ---------------- */ .net-banner{ position:fixed; top:0; left:0; right:0; z-index:500; padding:9px 16px; text-align:center; font-size:0.85rem; font-weight:600; color:#fff; box-shadow:0 2px 10px rgba(0,0,0,0.2); } .net-banner.offline{ background:#b45309; } .net-banner.syncing{ background:#2563eb; } .net-banner.success{ background:#16a34a; } /* ---------------- Insignia de notificaciones sin leer ---------------- */ .notif-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:#dc2626; color:#fff; font-size:0.68rem; font-weight:700; position:absolute; top:6px; left:26px; } .notif-badge-tab{ top:-2px; left:22px; } /* ---------------- Perfil: avatar ---------------- */ .profile-avatar-row{display:flex; align-items:center; gap:14px; margin-bottom:6px} .profile-avatar-img{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0; border: 2px solid rgba(255,255,255,0.7); box-shadow: 0 4px 12px rgba(25,6,6,0.2); } .profile-avatar-fallback{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:64px; height:64px; border-radius:50%; background: linear-gradient(180deg, var(--deep-4), var(--deep-2)); color:#fff; font-weight:700; font-size:1.4rem; border: 2px solid rgba(255,255,255,0.7); box-shadow: 0 4px 12px rgba(25,6,6,0.2); } /* ---------------- Botones — estilo Liquid Glass ---------------- */ button, .btn{ position:relative; background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 55%, rgba(255,255,255,0.30) 100%); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); color: #241010; border: 1px solid rgba(255,255,255,0.65); padding: 10px 18px; border-radius: var(--radius-pill); font-size:0.92rem; font-weight:700; letter-spacing: 0.01em; cursor:pointer; box-shadow: 0 4px 14px rgba(25,6,6,0.18), inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -6px 10px -6px rgba(0,0,0,0.08); transition: transform .15s ease, box-shadow .2s ease, background .2s ease; } button:hover, .btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(25,6,6,0.24), inset 0 1px 0 rgba(255,255,255,0.85); } button:active{transform: translateY(0) scale(.98)} /* Crear / Guardar / acción principal: blanco intenso con letras negras, no rojo — el rojo se reserva exclusivamente para Eliminar. Autosuficiente (padding/forma propios) para verse igual en