/* Identidad visual de Vlixen aplicada (identidad-visual/VLIXENidentidad.md): paleta calida inspirada en el zorro, tipografia Spectral/Poppins/Inter. Las tipografias se cargan desde en el del HTML (no con @import aqui) para que el navegador las pida en paralelo desde el principio y no se note un parpadeo al aplicarlas. */ :root { --primario-600: #A34A0C; --primario: #BE5A0E; --primario-700: #8A3D08; --primario-50: #FBEEDF; --cobre: #823406; --choco: #3B2413; --crema: #F2DEC4; --bg: #FBF7F1; --surf: #FFFFFF; --crema-suave: #F5EADB; --ink: #2B1D10; --ink2: #7C6A57; --border: #E9DCCB; --nieve: #EEF1F4; --pizarra: #5A6B72; --ok: #4F7343; --okbg: #E9F0E4; --warn: #B8801C; --warnbg: #F6EED9; --err: #C0392B; --errbg: #F7E4E1; --info: #4E6A78; --infobg: #E5EDF0; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--ink); } h1, h2, h3 { font-family: 'Spectral', serif; } button { cursor: pointer; font-family: inherit; } input, select { font-family: inherit; } .pantalla { min-height: 100vh; } .pantalla.vlixen-aparecer:not([hidden]) { animation: vlixen-fade-in .28s ease-out; } @keyframes vlixen-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ---- Login ---- */ #pantalla-login { display: flex; align-items: center; justify-content: center; } #pantalla-login[hidden] { display: none; } .login-caja { background: var(--surf); padding: 2.5rem; border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 4px 20px rgba(59,36,19,.08); width: 340px; text-align: center; } .login-logo { height: 60px; margin-bottom: 1.25rem; object-fit: contain; } .login-caja h1 { margin: 0 0 .25rem; font-size: 1.4rem; color: var(--primario-600); } .login-subtitulo { color: var(--ink2); margin: 0 0 1.5rem; font-size: .9rem; } #form-login { text-align: left; } #form-login label { display: block; margin-bottom: 1rem; font-size: .9rem; color: var(--ink2); } #form-login input { display: block; width: 100%; margin-top: .25rem; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--ink); } #form-login input:focus { outline: none; border-color: var(--primario); } #form-login button { width: 100%; padding: .65rem; background: var(--primario); color: #fff; border: none; border-radius: 8px; font-weight: 600; } #form-login button:hover { background: var(--primario-700); } .mensaje-error { color: var(--err); font-size: .85rem; } .mensaje-exito { color: var(--ok); font-size: .85rem; } /* ---- App shell ---- */ #pantalla-app { display: flex; } #pantalla-app[hidden] { display: none; } #sidebar { width: 220px; background: var(--surf); color: var(--ink); display: flex; flex-direction: column; padding: 1.25rem 0; border-right: 1px solid var(--border); transition: width .18s ease; flex-shrink: 0; } .sidebar-marca { padding: 0 1.25rem 1.5rem; display: flex; align-items: center; background: none; border: none; width: 100%; cursor: pointer; font: inherit; } .sidebar-marca img { height: 46px; object-fit: contain; } .sidebar-logo-icono { display: none; height: 32px; } #nav-modulos { display: flex; flex-direction: column; flex: 1; gap: .1rem; } #nav-modulos button { background: none; border: none; border-left: 3px solid transparent; color: var(--ink2); text-align: left; padding: .6rem 1rem .6rem calc(1rem - 3px); font-size: .9rem; font-family: 'Poppins', 'Inter', sans-serif; display: flex; align-items: center; gap: .65rem; } #nav-modulos button.activo { background: var(--primario-50); border-left-color: var(--primario); color: var(--primario-600); font-weight: 600; } #nav-modulos button:hover:not(.activo) { background: var(--crema-suave); } .icono-modulo { flex-shrink: 0; } .sidebar-logout { margin: .75rem 1.25rem 0; background: transparent; border: 1px solid var(--border); color: var(--ink2); padding: .45rem; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: .5rem; } .sidebar-logout:hover { border-color: var(--primario); color: var(--primario-600); } /* ---- Sidebar colapsado a solo iconos (clic en el logo) ---- */ #sidebar.colapsado { width: 72px; } #sidebar.colapsado .sidebar-marca { padding: 0 0 1.5rem; justify-content: center; } #sidebar.colapsado .sidebar-logo-completo { display: none; } #sidebar.colapsado .sidebar-logo-icono { display: block; } #sidebar.colapsado #nav-modulos button { justify-content: center; padding: .65rem; border-left: none; } #sidebar.colapsado .texto-modulo { display: none; } #sidebar.colapsado .sidebar-logout { margin: .75rem .75rem 0; } #contenido { flex: 1; display: flex; flex-direction: column; min-width: 0; } #topbar { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; padding: .75rem 1.5rem; background: var(--surf); border-bottom: 1px solid var(--border); } #usuario-actual { font-size: .9rem; color: var(--ink2); } #paneles { flex: 1; padding: 1.5rem; overflow-y: auto; } .panel { display: none; } .panel.activo { display: block; } .panel h2 { color: var(--primario-600); } .subtabs { display: flex; gap: .5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); } .subtabs button { background: none; border: none; padding: .5rem .25rem; border-bottom: 2px solid transparent; color: var(--ink2); font-family: 'Poppins', 'Inter', sans-serif; } .subtabs button.activo { border-bottom-color: var(--primario); font-weight: 600; color: var(--primario-600); } .tabla { width: 100%; border-collapse: collapse; background: var(--surf); margin-bottom: 1rem; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .tabla th, .tabla td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--border); font-size: .9rem; } .tabla th { background: var(--crema-suave); color: var(--ink2); font-weight: 600; font-family: 'Poppins', 'Inter', sans-serif; } .tabla tbody tr:nth-child(even) { background: var(--nieve); } .tabla tbody tr:hover { background: var(--primario-50); } .tabla td .select-estado { display: inline-block; width: auto; margin-right: .5rem; font-family: inherit; padding: .35rem .55rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surf); color: var(--ink); } .tabla td .select-estado:focus { outline: none; border-color: var(--primario); } .tabla td .btn-secundario { padding: .3rem .6rem; font-size: .8rem; } .tarjetas-kpi { display: flex; gap: 1rem; flex-wrap: wrap; } .tarjeta-kpi { background: var(--surf); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.5rem; min-width: 160px; } .kpi-valor { display: block; font-size: 1.8rem; font-weight: 700; font-family: 'Poppins', 'Inter', sans-serif; color: var(--primario-600); } .kpi-etiqueta { color: var(--ink2); font-size: .85rem; } .nota-modulo, .ayuda-contextual { color: var(--ink2); font-size: .85rem; } /* ---- Cuadricula de submodulos (pedido del 2026-09-01) ---- */ .vista-submodulos[hidden] { display: none; } .grid-submodulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-top: 1rem; } .tarjeta-submodulo { background: var(--surf); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; color: var(--ink); font-family: 'Poppins', 'Inter', sans-serif; font-size: .95rem; font-weight: 600; transition: border-color .15s ease, background .15s ease, transform .15s ease; } .tarjeta-submodulo:hover { border-color: var(--primario); background: var(--primario-50); transform: translateY(-2px); } .tarjeta-submodulo .icono-modulo { width: 32px; height: 32px; } .btn-atras { margin-bottom: 1rem; } form label { display: block; margin-bottom: .75rem; font-size: .9rem; color: var(--ink2); } form input, form select { display: block; width: 100%; max-width: 360px; margin-top: .25rem; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surf); color: var(--ink); } form input:focus, form select:focus { outline: none; border-color: var(--primario); } form button[type="submit"] { padding: .55rem 1.1rem; background: var(--primario); color: #fff; border: none; border-radius: 8px; font-weight: 600; } form button[type="submit"]:hover { background: var(--primario-700); } /* ---- Botones de accion (identidad-visual/VLIXENidentidad.md: "naranja vivo para botones de accion"). Mismo tratamiento que form button[type=submit], para usar fuera de un
- p.ej. los botones que abren un modal ("+ Dar de alta un cliente", "+ Nueva instancia", etc.) ---- */ .btn-primario { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.1rem; background: var(--primario); color: #fff; border: none; border-radius: 8px; font-weight: 600; font-size: .9rem; font-family: 'Poppins', 'Inter', sans-serif; margin-bottom: 1rem; } .btn-primario:hover { background: var(--primario-700); } .btn-secundario { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; background: var(--surf); color: var(--primario-600); border: 1px solid var(--border); border-radius: 8px; font-weight: 600; font-size: .85rem; font-family: 'Poppins', 'Inter', sans-serif; } .btn-secundario:hover { border-color: var(--primario); background: var(--primario-50); } .fila-check { display: flex; align-items: center; gap: .5rem; } /* Menu de acciones secundarias por cliente (2026-09-06): lista vertical de botones de ancho completo dentro del modal "Más acciones", en vez de una fila de botones sueltos que seguia creciendo en la tabla de Clientes. */ .menu-acciones-cliente { display: flex; flex-direction: column; gap: .5rem; } .menu-acciones-cliente button { width: 100%; justify-content: flex-start; } /* Filtros y buscadores (pedido del 2026-09-01: "que mantengan la estetica de la guia visual") - hasta ahora solo "form input, form select" (arriba) tenian el tratamiento de la identidad visual; los controles de filtro viven fuera de un , asi que se veian sin estilo del navegador (sin borde, sin radio, tipografia por defecto). Mismo tratamiento visual que los campos de formulario, para que toda la app se vea consistente. */ .fila-filtros { display: flex; gap: 1rem; align-items: flex-end; margin-bottom: 1rem; flex-wrap: wrap; } .fila-filtros label { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; color: var(--ink2); font-weight: 500; } .fila-filtros input, .fila-filtros select { font-family: inherit; padding: .5rem .65rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surf); color: var(--ink); min-width: 180px; } .fila-filtros input:focus, .fila-filtros select:focus { outline: none; border-color: var(--primario); } .fila-filtros input[type="search"] { min-width: 220px; } .fila-paginacion { display: flex; gap: .6rem; justify-content: flex-end; } .detalle-bitacora { font-size: .78rem; color: var(--ink2); word-break: break-word; } /* Checklist de permisos en grid (pedido del 2026-09-01: aprovechar el ancho de la variante .modal-caja--ancha en vez de una sola columna larga). */ .grid-permisos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; align-items: start; } .grupo-permisos .fila-check { margin-bottom: .3rem; } /* ---- Estados (badges) ---- */ .badge-exito { color: var(--ok); background: var(--okbg); padding: .15rem .5rem; border-radius: 999px; font-size: .8rem; } .badge-advertencia { color: var(--warn); background: var(--warnbg); padding: .15rem .5rem; border-radius: 999px; font-size: .8rem; } .badge-error { color: var(--err); background: var(--errbg); padding: .15rem .5rem; border-radius: 999px; font-size: .8rem; } .badge-info { color: var(--info); background: var(--infobg); padding: .15rem .5rem; border-radius: 999px; font-size: .8rem; } /* ---- Modal ---- */ .modal-overlay { position: fixed; inset: 0; background: rgba(43,29,16,.45); display: flex; align-items: center; justify-content: center; } .modal-overlay[hidden] { display: none; } .modal-caja { background: var(--surf); border-radius: 14px; width: 420px; max-width: 90vw; max-height: 85vh; overflow-y: auto; } /* Variante ancha (pedido del 2026-09-01: "la ventana de permisos... debe ser mas amplia, casi de toda la ventana sin incluir el sidebar") - se activa pasando { ancho: true } a abrirModal(), pensada para checklists largos como Roles y permisos y Permisos del rol, que no caben comodos en el ancho fijo de un formulario normal. */ .modal-caja--ancha { width: min(1600px, calc(100vw - 220px - 2rem)); max-width: 97vw; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); } .modal-header h2 { margin: 0; font-size: 1.1rem; } .modal-header button { background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--ink2); } .modal-header button:hover { color: var(--primario); } #modal-cuerpo { padding: 1.25rem; } /* ---- Ayuda contextual (seccion 2.2 del documento): icono "?" junto al titulo de un modal o pantalla compleja, con una explicacion corta que se muestra sola la primera vez y despues solo bajo demanda al hacer clic - ver js/core/ayuda.js. */ #modal-titulo { position: relative; } /* Selector repetido con .modal-header delante: ".modal-header button" (mas especifico que ".btn-ayuda" sola) ya trae su propio estilo generico de boton de cerrar - este necesita ganarle ahi tambien. */ .btn-ayuda, .modal-header .btn-ayuda { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: .5rem; padding: 0; border-radius: 50%; border: 1px solid var(--primario); background: var(--primario-50); color: var(--primario-600); font-size: .75rem; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle; } .btn-ayuda:hover, .modal-header .btn-ayuda:hover { background: var(--primario); color: #fff; } /* position:fixed con top/left calculados en JS (ver core/ayuda.js) - vive en document.body, no dentro del modal, para que un modal angosto con overflow-y:auto no le recorte el ancho. */ .popover-ayuda { position: fixed; z-index: 1000; width: 320px; max-width: calc(100vw - 24px); background: var(--surf); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; padding: .75rem .9rem; font-size: .85rem; line-height: 1.4; box-shadow: 0 6px 20px rgba(59,36,19,.15); }