/* reglas de normalizacion de estilos base del documento */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f4f6f9;
    color: #333333;
    padding: 0; 
    margin: 0;
}

/* reglas para bloquear desbordamientos de iconos svg inyectados dinamicamente */
svg.svg-inline--fa {
    max-width: 100%;
    height: auto;
}

/* clases para forzar color blanco puro en todos los iconos del menu lateral (fa y svg) */
.menu-item i, .menu-item svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.icono-img-sidebar {
    width: 1.25em; height: 1.25em; display: inline-block; text-align: center; object-fit: contain; vertical-align: middle; margin-right: 8px;
    filter: brightness(0) invert(1) !important; 
    transition: all 0.3s ease;
}

/* clases maestras para ocultar la navegacion en la pantalla de login (Añadir class="pantalla-login" al body) */
body.pantalla-login .sidebar, 
body.pantalla-login .header-movil { 
    display: none !important; 
}
body.pantalla-login .layout-app {
    padding-top: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* reglas para estilizar la barra de desplazamiento del menu lateral */
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }

/* clases para dar formato visual a las etiquetas de estado */
.badge-estado {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
    text-align: center;
    letter-spacing: 0.5px;
}

.estado-disponible { background-color: #cce5ff; color: #0d6efd; border: 1px solid #0d6efd; } 
.estado-activo { background-color: #d4edda; color: #198754; border: 1px solid #198754; } 
.estado-pendiente { background-color: #fff3cd; color: #856404; border: 1px solid #ffc107; }
.estado-mantenimiento { background-color: #ffe8cc; color: #fd7e14; border: 1px solid #fd7e14; }
.estado-deshabilitado { background-color: #f8d7da; color: #dc3545; border: 1px solid #dc3545; }
.estado-neutral { background-color: #e9ecef; color: #495057; border: 1px solid #ced4da; }
.estado-reparacion { background-color: #f3d8f8; color: #9c27b0; border: 1px solid #9c27b0; }
.estado-danado { background-color: #f8d7da; color: #dc3545; border: 1px solid #dc3545; }

/* contenedores principales del layout */
.layout-app {
    display: flex;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

/* animacion que permite el ingreso suave de las vistas principales */
@keyframes entrarSuave {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}

.seccion {
    display: none; 
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin-bottom: 25px;
    width: 100%;
    max-width: 100%; 
    margin-left: auto;
    margin-right: auto;
}

.seccion.seccion-activa {
    display: block; 
    animation: entrarSuave 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

h2 { color: #2c3e50; border-bottom: 2px solid #e9ecef; padding-bottom: 10px; margin-bottom: 20px; }
h3 { color: #ffffff; margin-bottom: 15px; font-size: 18px; }
.subtitulo-oscuro { margin-bottom: 15px; color: #333333; font-size: 18px; font-weight: bold; }
.separador { margin: 30px 0; border: 1px solid #e9ecef; }

/* separacion y estilos de los botones de catalogo */
.tabs-catalogos {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-bottom: 25px;
    width: 100%;
    flex-wrap: wrap;
}

.tab-categoria {
    flex: 1;
    min-width: 220px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    background-color: #f8f9fa;
    color: #495057;
    border: 2px solid #ced4da;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.tab-categoria:hover {
    background-color: #e2e6ea;
    color: #2c3e50;
    border-color: #adb5bd;
}

.tab-categoria.activo {
    background-color: #007bff;
    color: #ffffff;
    border-color: #0056b3;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.25);
}

/* cuadriculas responsivas en formularios */
.grid-2-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.grid-3-columnas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 15px; }
.grid-4-columnas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 15px; align-items: end; }
.grid-span-2 { grid-column: span 2; }
.grid-span-4 { grid-column: 1 / -1; }

.grupo-form { display: flex; flex-direction: column; justify-content: flex-end; }
.grupo-form-fila { display: flex; flex-direction: row; gap: 10px; align-items: center; }
.flex-1 { flex: 1; }
.flex-1-5 { flex: 1.5; }
.flex-2 { flex: 2; }

label { font-weight: 600; margin-bottom: 5px; color: #495057; font-size: 14px; }
.label-destacado { color: #007bff; font-weight: bold; }
.texto-ayuda { font-size: 12px; margin: 2px 0 10px 0; color: #6c757d; }

input[type="text"], input[type="password"], input[type="datetime-local"], input[type="number"], select, textarea {
    width: 100%; padding: 8px 12px; border: 1px solid #ced4da; border-radius: 4px; font-size: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; height: 38px;
}
textarea { resize: vertical; height: auto; }

input:focus, select:focus, textarea:focus {
    border-color: #007bff; outline: 0; box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.25), 0 4px 8px rgba(0,0,0,0.1); transform: translateY(-2px); 
}
input:disabled, select:disabled, textarea:disabled {
    background-color: #e9ecef; color: #6c757d; cursor: not-allowed; opacity: 1;
}

input[type="file"] { margin-top: 5px; font-size: 14px; height: auto; }

.input-busqueda, .select-busqueda { background-color: #f8f9fa; border: 1px solid #ced4da; font-weight: 500; }
.input-busqueda:focus, .select-busqueda:focus { background-color: #ffffff; border-color: #007bff; box-shadow: 0 0 8px rgba(0, 123, 255, 0.4); }

/* clases para inputs editables en tablas de software */
.input-editable-tabla {
    border: 1px solid transparent; 
    background: transparent;
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    padding: 6px 8px;
    border-radius: 4px;
    color: inherit;
    transition: all 0.2s ease;
    margin: -6px 0; height: auto;
}

.input-editable-tabla:disabled {
    color: inherit;
    cursor: default;
    background: transparent;
}

.input-editable-tabla:not(:disabled):hover {
    border: 1px dashed #ced4da;
    background: #f8f9fa;
    cursor: text;
}

.input-editable-tabla:not(:disabled):focus {
    border: 1px solid #007bff;
    background: #ffffff;
    box-shadow: 0 0 5px rgba(0,123,255,0.3);
    outline: none;
}

.fecha-badge {
    border: 1px solid transparent;
    background: transparent;
    color: #495057;
    font-weight: bold;
    border-radius: 20px;
    padding: 4px 12px;
    text-align: center;
    transition: all 0.3s ease;
    width: 140px;
    font-family: inherit; height: auto;
}

.fecha-badge:disabled { cursor: default; }

.fecha-badge:not(:disabled) {
    background: #e3f2fd;
    color: #0d47a1;
    border: 1px solid #b6d4fe;
    cursor: pointer;
}

.fecha-badge:not(:disabled):hover {
    background: #cce5ff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.fecha-badge:not(:disabled):focus {
    background: #ffffff;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
    outline: none;
}

/* colores y espaciado de botones de accion */
button {
    background-color: #007bff; color: #ffffff; border: none; padding: 8px 16px;
    border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 600; transition: 0.2s;
}
button:hover { background-color: #0056b3; }
.btn-secundario { background-color: #6c757d; }
.btn-secundario:hover { background-color: #5a6268; }
.btn-peligro { background-color: #dc3545; }
.btn-peligro:hover { background-color: #c82333; }
.btn-info { background-color: #0f6674; color: #ffffff; border: none; }
.btn-info:hover { background-color: #0c525d; }
.btn-exito { background-color: #28a745; color: #ffffff; }
.btn-exito:hover { background-color: #218838; }
.btn-software-seguridad { background-color: #5a32a3; color: #ffffff; border: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn-software-seguridad:hover { background-color: #452383; }
.acciones-formulario { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; align-items: center; }

/* diseño de tablas de datos y contenedores qr */
.contenedor-tabla { margin-top: 15px; overflow-x: auto; border: 1px solid #e9ecef; border-radius: 8px; }
.tabla-datos { width: 100%; border-collapse: collapse; background-color: #ffffff; }
.tabla-datos th, .tabla-datos td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #e9ecef; font-size: 14px; }
.tabla-datos th { background-color: #f8f9fa; font-weight: 600; color: #495057; }
.tabla-datos tr:hover, .fila-equipo:hover, .fila-sucursal:hover { background-color: #f1f3f5; cursor: pointer; }
.texto-centro { text-align: center; color: #6c757d; }

#contenedor_qr, #contenedor_qr_mobiliario {
    margin-top: 15px; padding: 10px; background: #ffffff; border: 1px dashed #ced4da;
    border-radius: 4px; width: 172px; height: 172px; display: flex; justify-content: center; align-items: center;
}

/* animacion que ejecuta un ligero zoom in en la caja de los modales superpuestos */
@keyframes modalEntrada {
    0% { opacity: 0; transform: scale(0.92); }
    100% { opacity: 1; transform: scale(1); }
}

/* modales superpuestos y ajustes en modal de perifericos */
.modal-overlay {
    position: fixed; z-index: 999999; left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.8); overflow-y: auto; display: none; align-items: center; justify-content: center; backdrop-filter: blur(3px);
}

.modal-caja {
    background-color: #ffffff; margin: auto; width: 90%; max-width: 800px; padding: 25px;
    border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    animation: modalEntrada 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.modal-caja-pequena { max-width: 600px; }

#modal_perifericos .modal-caja {
    max-width: 900px;
    padding: 20px;
}
#modal_perifericos .contenedor-tabla {
    max-height: 400px;
    overflow-y: auto;
}
#modal_perifericos .tabla-datos th, 
#modal_perifericos .tabla-datos td {
    white-space: nowrap;
}

.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 2px solid #e9ecef; padding-bottom: 10px; margin-bottom: 15px;
}
.modal-header.header-peligro { border-bottom-color: #dc3545; }
.modal-header h3 { margin: 0; color: #333; }
.modal-header h3.texto-peligro { color: #dc3545; }
.btn-cerrar-modal { font-size: 28px; cursor: pointer; font-weight: bold; color: #dc3545; transition: 0.2s; }
.btn-cerrar-modal:hover { transform: scale(1.1); }
.btn-cerrar-modal.gris { color: #6c757d; }

.caja-scroll-resumen {
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 5px;
    padding: 10px;
    max-height: 250px;
    overflow-y: auto;
    text-align: left;
}

.caja-scroll-resumen ul { list-style: none; padding: 0; margin: 0; }
.caja-scroll-resumen li { margin-bottom: 10px; border-bottom: 1px solid #e9ecef; padding-bottom: 8px; font-size: 13px; }
.caja-scroll-resumen li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* banners informativos y de peligro */
.banner-info {
    background-color: #f8f9fa; border-left: 4px solid #17a2b8; padding: 12px 15px;
    margin-bottom: 20px; border-radius: 4px;
}
.banner-info span { font-weight: bold; }
.banner-info .texto-resaltado { color: #17a2b8; font-size: 16px; }

.banner-peligro {
    background-color: #fff3f3; border-left: 4px solid #dc3545; padding: 12px 15px;
    margin-bottom: 20px; border-radius: 4px;
}
.banner-peligro span { font-weight: bold; }
.banner-peligro .texto-resaltado { color: #dc3545; font-size: 16px; }

/* formato visual para alertas emergentes nativas de errores o confirmaciones */
.alerta-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 9999999; display: none; align-items: center; justify-content: center; backdrop-filter: blur(3px);
}
.alerta-caja {
    background: #ffffff; border-radius: 12px; padding: 30px; width: 90%; max-width: 400px;
    text-align: center; box-shadow: 0 15px 35px rgba(0,0,0,0.3); transform: scale(0.8); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.alerta-overlay.alerta-visible .alerta-caja { transform: scale(1); }
.alerta-icono svg { width: 70px; height: 70px; margin-bottom: 15px; }
.alerta-contenido h3, .alerta-caja h3 { margin-bottom: 10px; color: #2c3e50; font-size: 24px; font-weight: 800; border: none; padding: 0; }
.alerta-contenido p, .alerta-caja p { color: #6c757d; font-size: 15px; margin-bottom: 25px; line-height: 1.5; }
.alerta-btn { width: 100%; border-radius: 8px; padding: 12px; font-size: 16px; font-weight: bold; border: none; cursor: pointer; transition: 0.2s; }
.alerta-btn-peligro { background: #dc3545; color: white; }
.alerta-btn-cancelar { background: #6c757d; color: white; }

/* asignacion de colores svg segun tipo de alerta */
.alerta-exito .alerta-icono svg { fill: #28a745; }
.alerta-exito .alerta-btn { background: #28a745; color: white; }
.alerta-exito .alerta-btn:hover { background: #218838; }

.alerta-modificacion .alerta-icono svg,
.alerta-modificado .alerta-icono svg,
.alerta-actualizado .alerta-icono svg { fill: #fd7e14; }
.alerta-modificacion .alerta-btn,
.alerta-modificado .alerta-btn,
.alerta-actualizado .alerta-btn { background: #fd7e14; color: white; }
.alerta-modificacion .alerta-btn:hover,
.alerta-modificado .alerta-btn:hover,
.alerta-actualizado .alerta-btn:hover { background: #e06200; }

.alerta-eliminacion .alerta-icono svg,
.alerta-peligro .alerta-icono svg,
.alerta-error .alerta-icono svg { fill: #dc3545; }
.alerta-eliminacion .alerta-btn,
.alerta-peligro .alerta-btn,
.alerta-error .alerta-btn { background: #dc3545; color: white; }
.alerta-eliminacion .alerta-btn:hover,
.alerta-peligro .alerta-btn:hover,
.alerta-error .alerta-btn:hover { background: #c82333; }

.alerta-info .alerta-icono svg { fill: #007bff; }
.alerta-info .alerta-btn { background: #007bff; color: white; }
.alerta-info .alerta-btn:hover { background: #0056b3; }

.alerta-neutral .alerta-icono svg { fill: #495057; }
.alerta-neutral .alerta-btn { background: #495057; color: white; }
.alerta-neutral .alerta-btn:hover { background: #343a40; }

/* clases auxiliares de uso general */
.icono-rojo { fill: #dc3545; width: 70px; height: 70px; margin-bottom: 15px; }
.alerta-titulo-peligro { color: #dc3545; font-size: 24px; font-weight: 800; margin-bottom: 10px; border: none; padding: 0; }
.alerta-texto-secundario { color: #6c757d; font-size: 15px; margin-bottom: 25px; line-height: 1.5; }
.acciones-alerta { display: flex; gap: 10px; margin-top: 20px; width: 100%; }
.texto-azul { color: #007bff; font-weight: bold; margin-bottom: 15px; }
.limit-height { max-height: 250px; overflow-y: auto; }
.oculto { display: none; }
.layout-app.oculto { display: none; }
.mb-15 { margin-bottom: 15px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.checkbox-estilizado { cursor: pointer; background: #f8f9fa; padding: 5px 10px; border-radius: 4px; border: 1px solid #ced4da; }

/* cabecera y boton hamburguesa reestructurados para evitar empalme visual en movil */
.header-movil {
    display: none;
    background-color: #2c3e50;
    color: white;
    padding: 15px;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    width: 100%;
}
.btn-hamburguesa {
    background: none;
    border: none;
    cursor: pointer;
    margin-right: 15px;
    padding: 0;
    display: flex;
}
.titulo-movil-app {
    font-size: 18px;
    font-weight: bold;
}
.overlay-menu {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9998;
}

.cookie-banner {
    position: fixed; bottom: 20px; left: 20px; right: 20px; background-color: #2c3e50; padding: 15px 20px;
    border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.4); z-index: 9999999; 
    display: flex; justify-content: space-between; align-items: center;
}

.cookie-contenido { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 20px; }
.cookie-contenido p { margin: 0; font-size: 14px; line-height: 1.5; color: #aebfd1; }
.cookie-contenido strong { color: #ffffff; }

input[type="file"]::file-selector-button {
    background-color: #2c3e50; color: white; border: none; padding: 8px 15px; border-radius: 4px;
    cursor: pointer; transition: background-color 0.3s ease; margin-right: 10px; font-weight: bold;
}
input[type="file"]::file-selector-button:hover { background-color: #1a252f; }

/* reglas para restringir tamaño y volver completamente blancos a los iconos de la barra lateral */
.sidebar-logo svg, .sidebar-logo img, .icono-inventario {
    max-width: 45px !important;
    max-height: 45px !important;
    width: auto;
    height: auto;
    filter: brightness(0) invert(1) !important;
}

.w-100 { width: 100% !important; }
.mt-20 { margin-top: 20px; }
.select-min-200 { min-width: 200px; }

.banner-reporte { background-color: #e3f2fd; border-left: 4px solid #007bff; padding: 15px; }
.banner-config { background-color: #e3f2fd; border-left: 5px solid #2196F3; margin-bottom: 20px; }
.texto-reporte-titulo { color: #007bff; margin-bottom: 5px; font-size: 16px; }
.texto-reporte-desc { margin: 0; font-size: 13px; color: #495057; }
.controles-reporte { display: flex; gap: 10px; align-items: center; }

.texto-alerta-naranja { color: #fd7e14; font-weight: bold; margin-top: 5px; }
.texto-alerta-rojo { color: #d9534f; font-weight: bold; margin-bottom: 10px; }
.texto-config-equipo { font-weight: bold; font-size: 16px; color: #0d47a1; }

.acciones-footer-linea { border-top: 2px solid #e9ecef; padding-top: 20px; }

/* reglas css para monitores y resoluciones estandar */
@media screen and (min-width: 769px) {
    .sidebar { width: 60px; background-color: #2c3e50; height: 100vh; position: fixed; top: 0; left: 0; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; z-index: 1000; transition: width 0.3s ease; box-shadow: 2px 0 5px rgba(0,0,0,0.1); }
    .sidebar:hover { width: 250px; box-shadow: 5px 0 20px rgba(0,0,0,0.3); }
    .sidebar h3 { display: none; }
    .sidebar-logo { padding: 15px 0; margin-bottom: 10px; border-bottom: 2px solid #ffffff; width: 100%; display: flex; justify-content: center; align-items: center; min-width: 60px; }
    .menu-lateral { list-style: none; padding: 0; margin: 0; width: 100%; }
    
    /* clase que aplica la linea blanca pura en la barra lateral */
    .menu-item { width: 100%; padding: 15px 0; color: #ffffff; cursor: pointer; transition: background-color 0.2s ease; display: flex; align-items: center; white-space: nowrap; border-bottom: 1px solid #ffffff !important; }
    
    .menu-item:hover, .menu-item.activo { background-color: #FF0400; color: #ffffff; font-weight: bold; }
    .menu-item i, .menu-item .caja-icono-img { min-width: 60px; text-align: center; font-size: 20px; }
    .caja-icono-img { display: flex; justify-content: center; align-items: center; min-width: 60px; }
    .menu-item .nav-text { opacity: 0; font-size: 15px; transition: opacity 0.3s ease; }
    .sidebar:hover .menu-item .nav-text { opacity: 1; }
    .contenido-principal { margin-left: 60px; padding: 30px; width: calc(100% - 60px); background-color: #f4f6f9; height: 100vh; overflow-y: auto; }

    body:focus-within .sidebar:hover {
        width: 60px !important;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1) !important;
    }
    body:focus-within .sidebar:hover .nav-text {
        opacity: 0 !important;
    }
}

/* reglas css para monitores ultrawide */
@media screen and (min-width: 2500px) {
    .seccion { padding: 50px; }
    .grid-4-columnas { grid-template-columns: repeat(6, 1fr); gap: 20px; }
    body, input, select, textarea, button, .tabla-datos th, .tabla-datos td { font-size: 16px; }
    h2 { font-size: 32px; margin-bottom: 30px; }
    h3, .subtitulo-oscuro { font-size: 22px; }
    label { font-size: 16px; margin-bottom: 8px; }
    
    .sidebar { width: 70px; }
    .sidebar:hover { width: 300px; }
    .menu-item .nav-text { font-size: 18px; }
    .menu-item i, .caja-icono-img { min-width: 70px; font-size: 24px; }
    .contenido-principal { margin-left: 70px; width: calc(100% - 70px); padding: 50px; }
    
    .sidebar-logo { min-width: 70px; }

    body:focus-within .sidebar:hover {
        width: 70px !important;
    }
}

/* reglas css para navegacion en resolucion tipo tablet */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .grid-4-columnas { grid-template-columns: repeat(2, 1fr); gap: 15px; align-items: end; }
    .grid-3-columnas { grid-template-columns: repeat(1, 1fr); gap: 15px; }
    .acciones-formulario { flex-direction: column; }
    .acciones-formulario button { width: 100%; margin-bottom: 10px; }
}

/* reglas css especificas para moviles reestructurando botones y espaciados con scroll propio habilitado */
@media screen and (max-width: 768px) {
    .icono-img-sidebar { margin: 0 auto !important; display: block; }
    
    /* regla que empuja el cuerpo principal para evitar que la cabecera fija lo tape */
    .layout-app { display: flex; flex-direction: column; padding-top: 55px; }
    
    .header-movil { display: flex; }
    .sidebar { width: 250px; background-color: #2c3e50; height: 100vh; position: fixed; top: 0; left: -260px; z-index: 9999; transition: left 0.3s ease; box-shadow: 2px 0 15px rgba(0,0,0,0.5); align-items: flex-start; display: flex; flex-direction: column; padding-top: 20px; overflow-y: auto; overflow-x: hidden; }
    .sidebar.activa { left: 0; }
    .sidebar h3 { display: block; text-align: center; padding-bottom: 20px; border-bottom: 2px solid #f4f6f9; margin-bottom: 0; width: 100%; color: #ffffff; font-size: 18px; }
    .sidebar-logo { display: none; }
    .overlay-menu.activo { display: block; }
    .menu-lateral { list-style: none; padding: 0; margin: 0; width: 100%; }
    
    /* clase que aplica la linea blanca pura en la barra lateral version movil */
    .menu-item { padding: 15px 20px; justify-content: flex-start; display: flex; align-items: center; border-bottom: 1px solid #ffffff !important; color: #ffffff; cursor: pointer; transition: background-color 0.2s; }
    
    .menu-item:hover, .menu-item.activo { background-color: #FF0400; color: #ffffff; font-weight: bold; }
    .menu-item i, .menu-item .caja-icono-img { font-size: 18px; width: 30px; min-width: 30px; text-align: left; }
    .caja-icono-img { display: flex; justify-content: flex-start; align-items: center; }
    .icono-img-sidebar { margin: 0 !important; width: 18px; height: 18px; }
    .menu-item .nav-text { position: static; opacity: 1; visibility: visible; margin-left: 10px; font-size: 15px; }
    .contenido-principal { margin-left: 0; width: 100%; padding: 15px; overflow-y: auto; height: calc(100vh - 58px); }
    .grid-4-columnas, .grid-3-columnas, .grid-2-columnas { grid-template-columns: 1fr !important; gap: 15px; align-items: start; }
    .grupo-form-fila { flex-direction: column; gap: 8px; }
    .grupo-form-fila select, .grupo-form-fila input { width: 100% !important; margin-left: 0 !important; }
    .dashboard-kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
    .kpi-card { padding: 15px 10px; }
    .kpi-card h3 { font-size: 13px; }
    .kpi-card .numero { font-size: 26px; }
    .contenedor-tabla { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 6px; box-shadow: inset 0 0 5px rgba(0,0,0,0.05); }
    .acciones-formulario { display: flex; flex-direction: column; gap: 10px; }
    .acciones-formulario button { width: 100%; margin-left: 0 !important; margin-bottom: 5px; }
    
    .tabs-catalogos {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px;
    }
    .tab-categoria {
        width: 100%;
        min-width: 100%;
        padding: 14px 16px;
        font-size: 15px;
    }

    .flex-between { flex-direction: column; align-items: flex-start; gap: 10px; }
    #dash_reporte_sucursal { width: 100%; }
}

/* reglas css limitando colores y vistas para documentos de impresion */
@media print {
    body { background-color: #ffffff; color: #000000; }
    .sidebar, .header-movil, .acciones-formulario, .btn-eliminar-item, #banner-cookies, .banner-info { display: none !important; }
    .layout-app { display: block; }
    .contenido-principal { margin-left: 0 !important; width: 100% !important; padding: 0 !important; }
    .seccion { box-shadow: none; border: none; padding: 0; margin: 0; display: none; }
    .seccion.seccion-activa { display: block; }
    .contenedor-tabla { border: none; overflow: visible; }
    .tabla-datos th, .tabla-datos td { border: 1px solid #dddddd; color: #000000; }
    
    tr, .grupo-form { page-break-inside: avoid; }
    h2, h3, h4 { page-break-after: avoid; }
    
    input, select, textarea { border: 1px solid #cccccc; border-radius: 0; background: transparent; color: #000000; }
}