*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Paleta real de NIGISU, tomada de CLIP.jpg (fondo de login) y facc_logo.png */ --brand-dark: #043263; /* esquinas del fondo de login */ --brand-blue: #004C94; /* azul solido del logo */ --brand-bright: #0489C2; /* resplandor central del fondo */ --brand-cyan: #09A4D4; /* punto mas claro del resplandor */ --surface: #FFFFFF; --surface-alt: #F4F7FA; --border: #DDE4EC; --text: #1C2B3A; --muted: #6B7C8C; --error: #C0392B; --error-bg: #FBE8E6; --radius: 10px; --trans: .2s ease; } /* Combinaciones de color alternativas (Sistema > Colores) - el resto de la hoja de estilos usa siempre las variables --brand-*, nunca el hex directo, asi que cambiar estas 4 valores repinta toda la app. Se activan poniendo data-tema en (ver nigisuAplicarTema en shell.js), guardado en localStorage para que sea una preferencia del navegador, no del servidor. */ :root[data-tema="esmeralda"] { --brand-dark: #063823; --brand-blue: #0F7A45; --brand-bright: #14A05C; --brand-cyan: #4FD495; } :root[data-tema="vino"] { --brand-dark: #3D0A1F; --brand-blue: #8A1538; --brand-bright: #C2255C; --brand-cyan: #F2789F; } :root[data-tema="pizarra"] { --brand-dark: #1A2530; --brand-blue: #34495E; --brand-bright: #5D7A94; --brand-cyan: #93B1C9; } :root[data-tema="indigo"] { --brand-dark: #131B3D; --brand-blue: #2A3B7A; --brand-bright: #4C5FB0; --brand-cyan: #96A5DE; } :root[data-tema="bronce"] { --brand-dark: #2E1D0E; --brand-blue: #6B4423; --brand-bright: #A9702F; --brand-cyan: #D9A65C; } html, body { height: 100%; font-family: 'DM Sans', 'Segoe UI', sans-serif; background: var(--surface-alt); color: var(--text); } /* ---------- Login ---------- */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-blue) 55%, var(--brand-bright) 100%), url('/images/login-bg.jpg') center / cover no-repeat; background-blend-mode: multiply; } .login-card { width: 100%; max-width: 380px; background: rgba(255,255,255,.97); border-radius: var(--radius); padding: 2.25rem 2rem; box-shadow: 0 20px 60px rgba(2,25,55,.35); } .login-logo { display: block; width: 56px; height: 56px; margin: 0 auto .9rem; border-radius: 12px; /* Sin esto, iOS Safari interpreta los taps rapidos y seguidos (el triple-click que revela el campo Token, ver login.js) como el gesto de doble-tap-para-zoom y hace zoom en vez de contarlos como clics. */ touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .login-brand { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.5rem; letter-spacing: .02em; margin-bottom: .25rem; color: var(--brand-blue); text-align: center; } .login-brand span { color: var(--brand-bright); } .login-sub { color: var(--muted); font-size: .85rem; margin-bottom: 1.75rem; text-align: center; } .field { margin-bottom: 1.1rem; } .field-token { padding-top: .75rem; margin-top: -.35rem; border-top: 1px dashed var(--border); } .field-token label { color: var(--muted); font-style: italic; } .token-help-link { display: inline-block; margin-top: .4rem; font-size: .78rem; color: var(--brand-bright); cursor: pointer; text-decoration: underline; } .field label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .35rem; } .field input, .field select { width: 100%; padding: .7rem .85rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: .95rem; outline: none; transition: border-color var(--trans); } .field input:focus, .field select:focus { border-color: var(--brand-blue); } .btn-primary { width: 100%; padding: .8rem; background: var(--brand-blue); border: none; border-radius: 8px; color: #fff; font-weight: 600; font-size: .95rem; cursor: pointer; transition: background var(--trans); } .btn-primary:hover { background: var(--brand-dark); } .btn-primary:disabled { opacity: .5; cursor: not-allowed; } .btn-secondary { display: inline-block; padding: .8rem; background: var(--surface); border: 1px solid var(--brand-blue); border-radius: 8px; color: var(--brand-blue); font-weight: 600; font-size: .95rem; cursor: pointer; transition: background var(--trans), color var(--trans); } .btn-secondary:hover { background: var(--brand-blue); color: #fff; } .btn-secondary:disabled { opacity: .5; cursor: not-allowed; } /* Toggle switch generico (checkbox real oculto + riel/perilla dibujados) - se usa en cualquier campo booleano de un formulario de mantenimiento en vez del checkbox nativo. El input sigue siendo un normal (mismo id, mismo .checked), asi que ningun JS que ya lo lea/escriba necesita cambiar. */ .switch-field { display: flex; align-items: center; gap: .6rem; } .switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; inset: 0; background: var(--border); border-radius: 999px; cursor: pointer; transition: background var(--trans); } .switch .slider::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: transform var(--trans); } .switch input:checked + .slider { background: var(--brand-blue); } .switch input:checked + .slider::before { transform: translateX(18px); } .switch input:disabled + .slider { opacity: .5; cursor: not-allowed; } .switch input:focus-visible + .slider { outline: 2px solid var(--brand-bright); outline-offset: 2px; } .login-error { display: none; background: var(--error-bg); border: 1px solid rgba(192,57,43,.3); color: var(--error); padding: .6rem .8rem; border-radius: 8px; font-size: .85rem; margin-bottom: 1.1rem; } .login-error.show { display: block; } /* ---------- App top bar (siempre visible, estilo "SRI en linea") ---------- */ .app-topbar { height: 52px; flex-shrink: 0; background: var(--brand-blue); color: #fff; display: flex; align-items: center; gap: .85rem; padding: 0 1rem; } .app-topbar .app-logo { width: 26px; height: 26px; border-radius: 6px; } .app-topbar .app-brand { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: .01em; } .app-topbar .app-brand span { color: var(--brand-cyan); } /* Empresa/sucursal + usuario/Administración/Cerrar sesión, consolidados en esta misma franja (antes vivian en el .topbar blanco de cada pantalla, dentro de .main-col) - mismas clases y mismos ids que usa shell.js, solo reubicadas, asi que solo hacia falta re-tematizarlas para fondo azul. */ .app-topbar .context { margin-left: auto; color: #fff; } .app-topbar .context-emp { color: #fff; font-weight: 600; } .app-topbar .context-suc { color: rgba(255, 255, 255, .78); } .app-topbar .suc-switch-btn { color: rgba(255, 255, 255, .78); } .app-topbar .suc-switch-btn:hover { color: #fff; } .app-topbar .suc-switch-select { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); color: #fff; } .app-topbar .topbar-right { color: #fff; } .app-topbar .topbar-right .user { display: inline-flex; align-items: center; gap: .45rem; color: #fff; } .user-avatar { width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: inline-flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; flex-shrink: 0; text-transform: uppercase; } .app-topbar .btn-logout { border-color: rgba(255, 255, 255, .5); color: #fff; background: transparent; } .app-topbar .btn-logout:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; } /* ---------- Menu / shell ---------- */ .shell-outer { display: flex; flex-direction: column; min-height: 100vh; } .shell { display: flex; flex: 1; min-height: 0; } .sidebar { width: 300px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; transition: width var(--trans); } .menu-tree { flex: 1; overflow-y: auto; } .sidebar-footer { flex-shrink: 0; border-top: 1px solid var(--border); padding: .6rem 1rem; } .btn-sidebar-logout { width: 100%; background: none; border: none; color: var(--muted); padding: .6rem .5rem; border-radius: 6px; cursor: pointer; font-size: .85rem; display: flex; align-items: center; gap: .6rem; } .btn-sidebar-logout:hover { background: var(--surface-alt); color: var(--error); } .sidebar-search { position: relative; padding: .85rem 1rem; border-bottom: 1px solid var(--border); } .sidebar-search input { width: 100%; padding: .5rem 2rem .5rem .75rem; border: 1px solid var(--border); border-radius: 6px; font-size: .85rem; font-style: italic; color: var(--text); } .sidebar-search input::placeholder { color: var(--muted); font-style: italic; } .sidebar-search-clear { position: absolute; right: 1.6rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: .2rem; } .menu-tree, .menu-tree ul { list-style: none; } .menu-tree ul { display: none; } .menu-tree li.open > ul { display: block; } .menu-item { padding: .65rem 1rem; font-size: .85rem; cursor: pointer; display: flex; align-items: center; gap: .65rem; color: var(--text); border-bottom: 1px solid var(--border); } .menu-item:hover { background: var(--surface-alt); } .menu-item.top-level { font-weight: 600; color: var(--brand-blue); letter-spacing: .01em; } li.open > .menu-item.top-level { background: var(--surface-alt); border-left: 3px solid var(--brand-blue); padding-left: calc(1rem - 3px); } .menu-icon-wrap { display: inline-flex; flex-shrink: 0; width: 20px; height: 20px; color: var(--brand-blue); } .menu-icon { width: 100%; height: 100%; } .menu-label { flex: 1; } .menu-item .caret { display: inline-block; width: .8rem; flex-shrink: 0; color: var(--muted); transition: transform var(--trans); } li.open > .menu-item .caret { transform: rotate(90deg); } .menu-tree ul .menu-item { border-bottom: 1px solid var(--surface-alt); } /* Grupos anidados (tienen hijos, ej. "Generales", "Clientes"): se leen como carpetas navegables, mismo tono que el nivel superior pero sin negrita fuerte para no competir con "Catálogos". Las opciones finales (sin hijos, ej. "Personas") quedan en texto normal para distinguirse claramente de los grupos - antes ambas se veian identicas. */ .menu-item.sub-group { color: var(--brand-dark); font-weight: 600; } .menu-item.sub-leaf { color: var(--text); font-weight: 400; } .menu-item.leaf:hover { color: var(--brand-dark); background: var(--surface-alt); } .menu-separator { height: 1px; background: var(--border); margin: .3rem 1rem; } .main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { min-height: 56px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; background: var(--surface); flex-wrap: wrap; } .topbar .user { font-size: .85rem; color: var(--muted); } .topbar-right { display: flex; align-items: center; gap: .75rem; margin-left: auto; } .context { display: flex; flex-direction: column; line-height: 1.3; font-size: .8rem; } .context-emp { font-weight: 600; color: var(--brand-blue); } .context-suc { color: var(--muted); display: flex; align-items: center; gap: .4rem; } .suc-switch-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .8rem; padding: 0; line-height: 1; } .suc-switch-btn:hover { color: var(--brand-blue); } .suc-switch-select { font-size: .78rem; padding: .15rem .3rem; border: 1px solid var(--border); border-radius: 4px; max-width: 160px; } .suc-switch-confirm, .suc-switch-cancel { background: none; border: none; cursor: pointer; font-size: .85rem; line-height: 1; padding: 0 .2rem; } .suc-switch-confirm { color: #1E8E5A; } .suc-switch-cancel { color: var(--error); } .btn-hamburger { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: #fff; border-radius: 6px; width: 34px; height: 34px; font-size: 1.2rem; cursor: pointer; flex-shrink: 0; } .btn-hamburger:hover { background: rgba(255,255,255,.15); } .btn-logout { background: transparent; border: 1px solid var(--border); color: var(--text); padding: .4rem .9rem; border-radius: 6px; cursor: pointer; font-size: .82rem; white-space: nowrap; } .btn-logout:hover { border-color: var(--error); color: var(--error); } .content { flex: 1; padding: 2rem; overflow-y: auto; background: var(--surface-alt); } .content h1 { font-family: 'Syne', sans-serif; margin-bottom: .5rem; color: var(--brand-blue); } .content p { color: var(--muted); } .sidebar-backdrop { display: none; } /* ---------- Responsive ---------- */ /* Escritorio: la hamburguesa colapsa el ancho del sidebar en el propio flujo (el contenido se expande), sin superponer nada. */ @media (min-width: 861px) { .shell.sidebar-collapsed .sidebar { width: 0; overflow: hidden; border-right: none; } } /* Movil: el sidebar es un panel superpuesto (oculto por defecto) con fondo oscuro detras, igual que el patron "SRI en linea". */ @media (max-width: 860px) { .sidebar { position: fixed; z-index: 20; top: 52px; bottom: 0; left: 0; transform: translateX(-100%); transition: transform var(--trans); box-shadow: 2px 0 20px rgba(0,0,0,.4); } .sidebar.open { transform: translateX(0); } .sidebar-backdrop.show { display: block; position: fixed; top: 52px; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: 19; } .content { padding: 1.25rem; } .topbar { padding: 0 1rem; } /* La franja unica ahora lleva bastante mas que antes (empresa, sucursal, usuario, Administracion, cerrar sesion) - en movil se prioriza: primero se pierde el nombre de la empresa (la sucursal ya da contexto). */ .app-topbar { padding: 0 .6rem; gap: .5rem; } .app-topbar .context-emp { display: none; } } @media (max-width: 600px) { /* Con menos ancho ya no entra el nombre de usuario en texto - se deja solo el circulo con su inicial (igual sigue siendo obvio que hay sesion). */ .app-topbar .topbar-right .user span:not(.user-avatar) { display: none; } .app-topbar .btn-logout { padding: .4rem .55rem; } } @media (max-width: 480px) { .sidebar { width: 85vw; max-width: 320px; } .context { font-size: .72rem; } /* Ultimo recurso: si ni asi entra, la franja se desliza horizontalmente en vez de recortar botones (perderia la opcion de cerrar sesion). */ .app-topbar { overflow-x: auto; } } /* ---------- Aviso de cierre de sesion por inactividad ---------- */ .idle-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(4, 50, 99, .55); z-index: 100; align-items: center; justify-content: center; } .idle-modal { background: var(--surface); border-radius: var(--radius); padding: 1.75rem 2rem; max-width: 320px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.3); } .idle-modal h3 { margin: 0 0 .5rem; color: var(--brand-blue); font-family: 'Syne', sans-serif; } .idle-modal p { margin: 0 0 1.25rem; color: var(--text); font-size: .9rem; } .idle-modal .btn-primary { width: auto; padding: .6rem 1.5rem; } /* ---------- Modal de solicitud de token (login) - hereda de .idle-modal, los pasos de pregunta Si/No quedan centrados igual que el aviso de inactividad; solo el formulario final se alinea a la izquierda porque son etiquetas de campo, no una pregunta. ---------- */ .token-modal { max-width: 440px; } .token-modal .field { margin-bottom: .85rem; text-align: left; } .token-modal .field label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .25rem; } .token-modal .field input, .token-modal .field select, .token-modal .field textarea { width: 100%; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 6px; font-size: .85rem; } .token-modal .plan-options { display: flex; gap: 1rem; margin-bottom: .5rem; justify-content: center; } .token-modal .plan-options label { display: flex; align-items: center; gap: .4rem; font-size: .85rem; cursor: pointer; } .token-modal .pago-link { display: inline-block; margin-bottom: 1rem; font-size: .85rem; } .token-modal .modal-actions { display: flex; gap: .6rem; margin-top: 1rem; } .token-modal .modal-actions button { flex: 1; width: auto; padding: .6rem .8rem; } .token-modal .modal-error { color: var(--error); font-size: .82rem; margin-top: .5rem; display: none; } .token-modal .modal-error.show { display: block; } .token-modal .contacto-list { list-style: none; padding: 0; margin: 0 0 1rem; font-size: .85rem; text-align: left; } .token-modal .contacto-list li { margin-bottom: .35rem; } /* Registro de Ubicación (geoloc00) - historial en la página general (public/js/registro-ubicacion.js) y en el widget por documento (public/js/documento-ubicacion.js). */ .ub-btn-grande { width: auto; padding: .8rem 1.6rem; font-size: 1rem; } .ub-doc-badge { display: inline-block; padding: .18rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: #DBEAFE; color: #1D4ED8; } .ub-doc-none { color: var(--muted); font-style: italic; font-size: .8rem; } .ubic-lista { margin-top: .75rem; display: flex; flex-direction: column; gap: .5rem; } .ubic-item { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 8px; padding: .5rem .7rem; font-size: .82rem; } .ubic-item-top { font-weight: 600; color: var(--text); } .ubic-item-coords { color: var(--muted); margin-top: .15rem; } .ubic-item-obs { margin-top: .25rem; }