/* ===================================================================== SISTEMA · economax-sac --------------------------------------------------------------------- Base compartida del panel. Se carga DESPUÉS de style.css del tema, así que gana por orden ante reglas de igual especificidad. Convive con Bootstrap: no se elimina nada, solo se agrega y en algunos casos se redefine. Prefijo "sys-" en todo lo nuevo, para no chocar jamás con las clases del tema (mk-*, list-style-*, shopping-*). Sin modo oscuro a propósito: es un panel interno que se usa siempre en las mismas condiciones, y dos temas significan mantener dos variantes de cada componente nuevo. ===================================================================== */ :root { /* --- Marca. Salen del tema actual, no son una elección nueva. --- */ --sys-marca: #0038e3; --sys-marca-oscuro: #002bb0; --sys-marca-suave: #eef2ff; --sys-accion: #ffd100; /* --- Tinta. Neutros con leve desviación fría para convivir con el azul en vez de pelearse con él. --- */ --sys-tinta: #14161a; --sys-tinta-media: #5b616b; --sys-tinta-suave: #858b96; /* --- Superficies --- */ --sys-linea: #e4e7ec; --sys-linea-fuerte: #ccd2dc; --sys-lienzo: #f5f6f8; --sys-superficie: #ffffff; --sys-realce: #f9fafb; /* --- Semánticos: RESERVADOS para estado. Nunca decoran. --- */ --sys-pendiente: #9a5b00; --sys-pendiente-bg: #fdf3e2; --sys-aprobado: #14713d; --sys-aprobado-bg: #e7f4ec; --sys-rechazado: #b0201c; --sys-rechazado-bg: #fdeceb; --sys-sombra: 0 1px 2px rgba(20,22,26,.06), 0 1px 3px rgba(20,22,26,.04); --sys-radio: 6px; --sys-radio-caja: 8px; --sys-lateral: 232px; /* ancho del menú */ --sys-topbar: 56px; /* alto de la barra de marca */ } /* ===================================================================== ESTRUCTURA ===================================================================== */ /* La barra de marca es fija, así que cualquier desplazamiento automático —scrollIntoView, un ancla #, el salto al abrir un enlace interno— dejaría el destino TAPADO debajo de ella. scroll-padding-top le reserva ese alto al navegador y el destino queda siempre visible. Se define una vez acá y vale para las 66 vistas. */ html { scroll-padding-top: calc(var(--sys-topbar) + 16px); } body.sys-panel { background: var(--sys-lienzo); color: var(--sys-tinta); margin: 0; } /* Barra de marca. Conserva el azul Makro y resuelve que el logotipo amarillo sea ilegible sobre un lateral claro. */ .sys-topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--sys-topbar); z-index: 1030; background: var(--sys-marca); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; } .sys-topbar-marca { display: flex; align-items: center; gap: 12px; } .sys-topbar-marca img { height: 26px; width: auto; display: block; } .sys-usuario { display: flex; align-items: center; gap: 9px; color: #fff; font-size: 13px; line-height: 1.2; } .sys-avatar { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: .02em; flex-shrink: 0; } /* Botón de menú: solo aparece en pantallas chicas. */ .sys-menu-btn { display: none; background: rgba(255,255,255,.15); border: 0; color: #fff; width: 34px; height: 34px; border-radius: var(--sys-radio); align-items: center; justify-content: center; cursor: pointer; padding: 0; margin-right: 4px; } .sys-menu-btn svg { width: 18px; height: 18px; } /* --- Menú lateral CLARO --------------------------------------------- Se separa del área de trabajo por el borde y por el lienzo gris del contenido, no por contraste de oscuridad. */ .sys-lateral { position: fixed; top: var(--sys-topbar); bottom: 0; left: 0; width: var(--sys-lateral); z-index: 1020; background: var(--sys-superficie); border-right: 1px solid var(--sys-linea); padding: 10px 10px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .sys-grupo { font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--sys-tinta-suave); padding: 15px 10px 6px; margin: 0; } .sys-lateral > .sys-grupo:first-child { padding-top: 4px; } .sys-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--sys-radio); border-left: 3px solid transparent; color: var(--sys-tinta-media); font-size: 13.5px; font-weight: 500; line-height: 1.35; text-decoration: none; } .sys-item:hover, .sys-item:focus { background: var(--sys-realce); color: var(--sys-tinta); text-decoration: none; } .sys-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .75; } /* El activo suma TRES señales —fondo, barra lateral y peso— para que no se confunda con el simple paso del ratón, que en un lateral claro se parecería demasiado. */ .sys-item.is-activo { background: var(--sys-marca-suave); color: var(--sys-marca-oscuro); font-weight: 600; border-left-color: var(--sys-marca); } .sys-item.is-activo svg { opacity: 1; } .sys-item .sys-globo { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--sys-marca); color: #fff; padding: 1px 7px; border-radius: 20px; font-variant-numeric: tabular-nums; } .sys-lateral-pie { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--sys-linea); } .sys-lateral-pie .sys-item { color: var(--sys-tinta-suave); font-size: 13px; } /* --- Área de contenido ---------------------------------------------- */ .sys-contenido { margin-left: var(--sys-lateral); padding-top: var(--sys-topbar); min-height: 100vh; } /* El tope de ancho evita líneas larguísimas e ilegibles en monitores grandes, pero SIN centrar dejaba todo pegado a la izquierda con un vacío enorme a la derecha (medido: 1768 px libres en una pantalla de 3440). "margin-inline: auto" lo centra en el área de trabajo. */ .sys-interior { padding: 22px 26px 60px; max-width: 1600px; margin-inline: auto; /* Ancla de posicionamiento. El layout anterior la daba .main-content, que este ya no usa. Sin ella, .content-nav-dig_item —el selector de canvassing del formulario optin, que es position:absolute y cuyo ancla natural es un hermano, no un ancestro— se colgaba de la página entera y aparecía suelto sobre la barra de marca. */ position: relative; } /* El selector de digitador del formulario optin se posiciona contra el borde del contenedor. Antes ese borde era el de .main-content, que empezaba pegado a la cabecera; acá se le da el mismo margen que al resto del contenido para que quede a la altura del breadcrumb y no contra el filo. Solo aplica donde el tema lo lleva a la derecha. */ @media (min-width: 768px) { .sys-interior .content-nav-dig_item { top: 22px; right: 26px; } } /* En pantalla chica el tema lo manda a la izquierda y ocupa el ancho: los desplazamientos van contra la caja de relleno, así que sin estos 16px quedaría al ras del borde mientras el resto va con margen. */ @media (max-width: 767.98px) { .sys-interior .content-nav-dig_item { left: 16px; right: 16px; } } /* ===================================================================== ENCABEZADO DE PÁGINA Mismo patrón en las 66 vistas: ruta, título, descripción y acción. ===================================================================== */ .sys-encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; } .sys-encabezado h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--sys-tinta); line-height: 1.2; } .sys-encabezado .sys-sub { margin: 3px 0 0; font-size: 13.5px; color: var(--sys-tinta-media); } /* La ruta de navegación existe en 63 vistas con la clase del tema. Se redefine para que encaje con el encabezado nuevo en vez de arrastrar la caja gris del tema. */ .sys-contenido .breadcrumb { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 6px !important; font-size: 12.5px; color: var(--sys-tinta-suave); border-radius: 0 !important; } .sys-contenido .breadcrumb .breadcrumb-item, .sys-contenido .breadcrumb li { color: var(--sys-tinta-suave); } .sys-contenido .breadcrumb .breadcrumb-item.active { color: var(--sys-tinta-media); font-weight: 600; } .sys-contenido nav[aria-label="breadcrumb"] { margin-bottom: 4px; } /* ===================================================================== RESPONSIVO ===================================================================== */ @media (max-width: 991px) { .sys-menu-btn { display: flex; } .sys-lateral { transform: translateX(-100%); transition: transform .18s ease; box-shadow: 0 0 40px rgba(20,22,26,.18); } .sys-lateral.is-abierto { transform: translateX(0); } .sys-contenido { margin-left: 0; } .sys-interior { padding: 18px 16px 48px; } .sys-velo { position: fixed; inset: var(--sys-topbar) 0 0 0; background: rgba(20,22,26,.4); z-index: 1010; display: none; } .sys-velo.is-visible { display: block; } } @media (prefers-reduced-motion: reduce) { .sys-lateral { transition: none; } } /* ===================================================================== COMPONENTES --------------------------------------------------------------------- Se REDEFINEN las clases que el panel ya usa (mk-btn, small-input, mk-table, badge, pagination). Como ya están puestas en el marcado de las 66 vistas, mejoran sin editar ningún Blade. Todo va acotado a .sys-contenido: así no se toca el login ni ninguna pantalla que viva fuera del panel. ===================================================================== */ /* --- Botones -------------------------------------------------------- El amarillo pasa a ser UNA sola acción principal por pantalla. Antes se repartía entre botones que competían entre sí, y cuando todo resalta no resalta nada. */ .sys-contenido .mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13.5px; font-weight: 600; line-height: 1.3; padding: 9px 16px; border: 1px solid var(--sys-linea-fuerte); border-radius: var(--sys-radio); background: var(--sys-superficie); color: var(--sys-tinta); text-decoration: none; cursor: pointer; transition: background-color .12s ease, border-color .12s ease; text-transform: none; letter-spacing: 0; } .sys-contenido .mk-btn:hover { background: var(--sys-realce); color: var(--sys-tinta); text-decoration: none; } .sys-contenido .mk-btn:focus-visible { outline: 2px solid var(--sys-marca); outline-offset: 2px; } .sys-contenido .mk-btn[disabled], .sys-contenido .mk-btn.disabled { opacity: .5; cursor: not-allowed; } /* Primario = amarillo Makro. La acción principal de la pantalla. */ .sys-contenido .mk-btn-primary { background: var(--sys-accion); border-color: var(--sys-accion); color: var(--sys-tinta); } .sys-contenido .mk-btn-primary:hover { background: #f0c500; border-color: #f0c500; color: var(--sys-tinta); } /* Secundario = azul de marca. Acciones de apoyo (buscar, filtrar). */ .sys-contenido .mk-btn-secondary { background: var(--sys-marca); border-color: var(--sys-marca); color: #fff; } .sys-contenido .mk-btn-secondary:hover { background: var(--sys-marca-oscuro); border-color: var(--sys-marca-oscuro); color: #fff; } /* --- Variantes de acción: aprobar y rechazar ------------------------- El tema las escribe como .mk-btn.mk-btn-red, que tiene la MISMA especificidad (0,2,0) que .sys-contenido .mk-btn de arriba. Al empatar gana la que carga después, o sea esta hoja, y los botones se quedaban blancos: aprobar y rechazar un registro pasaban a verse idénticos. Acá se redefinen con un punto más de especificidad. El color es el semántico del sistema y no el del tema, porque el verde del tema (#2EBD75) con texto blanco no llega ni a 3:1 de contraste; estos dos pasan de 5:1. Es la excepción legítima a "los semánticos no decoran": no decoran, son la acción misma. */ .sys-contenido .mk-btn.mk-btn-green { background: var(--sys-aprobado); border-color: var(--sys-aprobado); color: #fff; } .sys-contenido .mk-btn.mk-btn-green:hover:not([disabled]) { background: #0f5c31; border-color: #0f5c31; color: #fff; } .sys-contenido .mk-btn.mk-btn-red { background: var(--sys-rechazado); border-color: var(--sys-rechazado); color: #fff; } .sys-contenido .mk-btn.mk-btn-red:hover:not([disabled]) { background: #8e1a16; border-color: #8e1a16; color: #fff; } /* Modificadores de forma del tema, por el mismo empate de especificidad. .mk-btn-lg marca las acciones de cierre de una pantalla (aprobar, rechazar, validar contra RENIEC/SUNAT), que deben pesar más que un botón de barra. */ .sys-contenido .mk-btn.mk-btn-lg { font-size: 15px; padding: 12px 26px; } .sys-contenido .mk-btn.mk-btn-radius { border-radius: 8px; } /* --- Campos ---------------------------------------------------------- */ /* Las exclusiones de checkbox y radio NO son decorativas: en el panel hay 74 casillas que llevan puesta la clase .small-input, y sin el :not() les caía el width:100% de abajo. La casilla se estiraba a todo el ancho de su columna y empujaba la etiqueta al otro extremo. */ .sys-contenido .small-input:not([type="checkbox"]):not([type="radio"]), .sys-contenido .form-control:not([type="checkbox"]):not([type="radio"]), .sys-contenido input[type="text"], .sys-contenido input[type="email"], .sys-contenido input[type="number"], .sys-contenido input[type="date"], .sys-contenido input[type="password"], .sys-contenido select, .sys-contenido textarea { width: 100%; font-size: 14px; line-height: 1.4; padding: 9px 12px; height: auto; border: 1px solid var(--sys-linea-fuerte); border-radius: var(--sys-radio); /* background-COLOR y no el atajo "background": el atajo resetea background-image, y como los necesitan su propia flecha: al fijar "background" arriba se pisa la que traía el tema, y un desplegable sin indicador se confunde con un campo de texto. Va como SVG embebido para no depender de ningún archivo externo. */ .sys-contenido select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b616b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 15px 15px; } .sys-contenido select:disabled { opacity: .6; } /* --- Casillas y opciones -------------------------------------------- Se dejan nativas a propósito: el navegador ya las dibuja bien y las hace accesibles con el teclado. accent-color les pone el azul de marca al marcarse, sin reemplazar el control ni tocar el marcado. flex-shrink:0 porque casi todas viven dentro de un .d-flex junto a su etiqueta, y ahí se achataban. */ .sys-contenido input[type="checkbox"], .sys-contenido input[type="radio"] { width: 16px; height: 16px; min-width: 16px; flex: 0 0 auto; margin: 0; padding: 0; accent-color: var(--sys-marca); vertical-align: middle; cursor: pointer; } /* EXCEPCIÓN. En .mk-checkbox (permisos de roles, clientes API) el tema esconde la casilla real —width/height 0, opacity 0— y dibuja en su lugar el . La regla de arriba tiene más especificidad que la del tema y se la revivía encima del dibujo, así que acá se le devuelven sus medidas. */ .sys-contenido .mk-checkbox input[type="checkbox"], .sys-contenido .mk-checkbox input[type="radio"] { position: absolute; width: 0; height: 0; min-width: 0; opacity: 0; } /* --- Buscador con lupa ---------------------------------------------- El tema reserva el hueco de la lupa con .mk-form-group.mk-form-group-icon .mk-form-icon .mk-form-control, que vale (0,4,0). La regla de campos de arriba valía (0,2,0) y perdía —correctamente— hasta que se le añadieron los :not() de checkbox y radio: :not() aporta la especificidad de su argumento, así que pasó a valer (0,4,0) también. Al empatar gana esta hoja por cargar después, el padding volvía a 12px y la lupa quedaba encima del texto. Se restaura con un selector explícito que le gana a las dos. */ .sys-contenido .mk-form-group.mk-form-group-icon .mk-form-icon .small-input, .sys-contenido .mk-form-group.mk-form-group-icon .mk-form-icon .mk-form-control { padding-left: 40px; } /* La lupa se dibuja ENCIMA del campo. pointer-events:none para que al pinchar sobre ella el foco vaya al campo y no se pierda el clic. */ .sys-contenido .mk-form-group-icon .mk-form-icon .icon { color: var(--sys-tinta-suave); font-size: 13px; pointer-events: none; z-index: 1; } .sys-contenido .small-input::placeholder, .sys-contenido .form-control::placeholder, .sys-contenido input::placeholder { color: var(--sys-tinta-suave); } .sys-contenido .small-input:focus, .sys-contenido .form-control:focus, .sys-contenido input:focus, .sys-contenido select:focus, .sys-contenido textarea:focus { outline: none; border-color: var(--sys-marca); box-shadow: 0 0 0 3px rgba(0, 56, 227, .14); } /* La etiqueta del campo, que hoy usa las clases del tema. */ .sys-contenido label.text-gray, .sys-contenido .margin-15px-bottom.text-gray { font-size: 12.5px; font-weight: 600; color: var(--sys-tinta-media) !important; margin-bottom: 6px !important; display: block; } /* --- Tablas ---------------------------------------------------------- */ .sys-contenido .mk-box-shadow { box-shadow: none !important; border: 1px solid var(--sys-linea); background: var(--sys-superficie); } .sys-contenido .mk-radius { border-radius: var(--sys-radio-caja) !important; } .sys-contenido .mk-table { margin: 0; font-size: 14px; } .sys-contenido .mk-table thead tr th { background: var(--sys-realce); color: var(--sys-tinta-media); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--sys-linea); } .sys-contenido .mk-table tbody tr td { color: var(--sys-tinta); font-size: 14px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--sys-linea); vertical-align: middle; } .sys-contenido .mk-table tbody tr:last-child td { border-bottom: 0; } .sys-contenido .mk-table tbody tr:hover { background: var(--sys-realce); } /* Cifras comparables: documentos, montos y fechas alineados. */ .sys-contenido .mk-table td { font-variant-numeric: tabular-nums; } /* --- Estados -------------------------------------------------------- El color NUNCA va solo: cada estado lleva también su palabra, para que se entienda en escala de grises o con daltonismo. */ .sys-contenido .badge { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; line-height: 1.4; padding: 4px 11px; border-radius: 20px; letter-spacing: 0; text-transform: none; white-space: nowrap; } .sys-contenido .badge-success { background: var(--sys-aprobado-bg) !important; color: var(--sys-aprobado) !important; } .sys-contenido .badge-danger { background: var(--sys-rechazado-bg) !important; color: var(--sys-rechazado) !important; } .sys-contenido .badge-warning { background: var(--sys-pendiente-bg) !important; color: var(--sys-pendiente) !important; } .sys-contenido .badge-info, .sys-contenido .badge-primary { background: var(--sys-marca-suave) !important; color: var(--sys-marca-oscuro) !important; } .sys-contenido .badge-secondary { background: var(--sys-linea) !important; color: var(--sys-tinta-media) !important; } /* --- Paginación ------------------------------------------------------ */ .sys-contenido .pagination { gap: 4px; } .sys-contenido .pagination .page-link, .sys-contenido .pagination a, .sys-contenido .pagination span { min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 9px; border: 1px solid var(--sys-linea-fuerte); border-radius: var(--sys-radio); background: var(--sys-superficie); color: var(--sys-tinta-media); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; text-decoration: none; } .sys-contenido .pagination .page-link:hover, .sys-contenido .pagination a:hover { background: var(--sys-marca-suave); color: var(--sys-marca-oscuro); border-color: var(--sys-marca); } .sys-contenido .pagination .active .page-link, .sys-contenido .pagination .active span { background: var(--sys-marca); border-color: var(--sys-marca); color: #fff; font-weight: 700; } /* --- Tarjetas y cajas ------------------------------------------------ */ .sys-caja { background: var(--sys-superficie); border: 1px solid var(--sys-linea); border-radius: var(--sys-radio-caja); } .sys-caja-pad { padding: 20px; } /* --- Barra de filtros ------------------------------------------------ */ .sys-filtros { background: var(--sys-superficie); border: 1px solid var(--sys-linea); border-radius: var(--sys-radio-caja); padding: 16px 18px; margin-bottom: 18px; } .sys-filtros-acciones { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; } /* --- Celda de identidad en tablas ------------------------------------ */ .sys-id-nombre { font-weight: 600; color: var(--sys-tinta); display: block; } .sys-id-doc { font-size: 12.5px; color: var(--sys-tinta-media); font-variant-numeric: tabular-nums; display: block; margin-top: 2px; } .sys-dato-2 { display: block; font-size: 12.5px; color: var(--sys-tinta-media); margin-top: 2px; } .sys-vacio { color: var(--sys-tinta-suave); } /* --- Acciones de fila en tablas ------------------------------------- Las vistas usan iconos sueltos () dentro de un enlace o un
. Sin forma propia quedan como texto flotando y su zona de clic es diminuta: se les da un objetivo cuadrado y un color que reacciona, sin tocar el marcado de cada vista. */ .sys-contenido .mk-table td a > i.fas, .sys-contenido .mk-table td a > i.far, .sys-contenido .mk-table td button > i.fas, .sys-contenido .mk-table td > form button i.fas { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--sys-linea-fuerte); border-radius: var(--sys-radio); background: var(--sys-superficie); color: var(--sys-tinta-media); font-size: 13px; margin: 0 2px 0 0 !important; vertical-align: middle; transition: background-color .12s ease, color .12s ease, border-color .12s ease; } .sys-contenido .mk-table td a:hover > i.fas, .sys-contenido .mk-table td a:hover > i.far { background: var(--sys-marca-suave); color: var(--sys-marca-oscuro); border-color: var(--sys-marca); } /* Borrar es destructivo: se marca en rojo solo al apuntarlo, para que no grite desde la fila pero tampoco se confunda con editar. */ .sys-contenido .mk-table td i.fa-trash, .sys-contenido .mk-table td i.fa-trash-alt { color: var(--sys-tinta-media); } .sys-contenido .mk-table td button:hover i.fa-trash, .sys-contenido .mk-table td button:hover i.fa-trash-alt, .sys-contenido .mk-table td a:hover > i.fa-trash { background: var(--sys-rechazado-bg); color: var(--sys-rechazado); border-color: var(--sys-rechazado); } /* El