* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    font-size: 16px;

}



body {

    font-family: Arial, Helvetica, sans-serif;

    background: #f4f6f9;

    color: #1f2937;

    min-height: 100vh;

}



/* =========================

   MENÚ LATERAL

========================= */



.sidebar {

    width: 240px;

    height: 100vh;

    background: #1f2937;

    position: fixed;

    left: 0;

    top: 0;

    padding: 20px;

    color: white;

    overflow-y: auto;

    z-index: 1000;

}



.sidebar h2 {

    margin-bottom: 30px;

    font-size: 22px;

}



.sidebar a {

    display: block;

    color: white;

    text-decoration: none;

    padding: 12px 10px;

    margin-bottom: 6px;

    border-radius: 6px;

    transition: background 0.2s ease;

}



.sidebar a:hover {

    background: #374151;

}



.sidebar hr {

    border: none;

    border-top: 1px solid #4b5563;

    margin: 20px 0;

}



/* =========================

   CONTENIDO

========================= */



.contenido {

    margin-left: 240px;

    padding: 30px;

    width: calc(100% - 240px);

}



.encabezado {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;

    gap: 20px;

}



h1 {

    font-size: 28px;

    margin-bottom: 5px;

}



h2 {

    font-size: 21px;

}



h3 {

    font-size: 18px;

}



/* =========================

   TARJETAS DASHBOARD

========================= */



.tarjetas {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 20px;

}



.tarjeta {

    background: white;

    padding: 22px;

    border-radius: 10px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

}



.tarjeta h3 {

    margin-bottom: 12px;

    color: #4b5563;

}



.numero {

    font-size: 28px;

    font-weight: bold;

    color: #111827;

}



/* =========================

   FORMULARIOS

========================= */



.formulario {

    background: white;

    padding: 25px;

    border-radius: 10px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    margin-bottom: 25px;

}



.formulario h2 {

    margin-bottom: 20px;

}



.formulario label {

    display: block;

    margin-bottom: 6px;

    font-weight: bold;

    color: #374151;

}



.formulario input,

.formulario select,

.formulario textarea {

    width: 100%;

    padding: 11px 12px;

    margin-bottom: 16px;

    border: 1px solid #d1d5db;

    border-radius: 6px;

    background: white;

    font-size: 15px;

    outline: none;

}



.formulario input:focus,

.formulario select:focus,

.formulario textarea:focus {

    border-color: #6b7280;

}



.form-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 0 20px;

}



.form-grupo-completo {

    grid-column: 1 / -1;

}



/* =========================

   BOTONES

========================= */



button,

.btn {

    display: inline-block;

    padding: 10px 15px;

    border: none;

    border-radius: 6px;

    cursor: pointer;

    font-size: 14px;

    text-decoration: none;

    transition: opacity 0.2s ease;

}



button:hover,

.btn:hover {

    opacity: 0.85;

}



.btn-principal,

.formulario button[type="submit"] {

    background: #1f2937;

    color: white;

}



.btn-estado {

    background: #e5e7eb;

    color: #111827;

}



/* =========================

   TABLAS

========================= */



.tabla-contenedor {

    background: white;

    padding: 20px;

    border-radius: 10px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    overflow-x: auto;

}



table {

    width: 100%;

    border-collapse: collapse;

    min-width: 750px;

}



th,

td {

    padding: 12px;

    text-align: left;

    border-bottom: 1px solid #e5e7eb;

    vertical-align: middle;

}



th {

    background: #f3f4f6;

    color: #374151;

}



tr:hover {

    background: #f9fafb;

}



/* =========================

   ESTADOS

========================= */



.estado-activo {

    display: inline-block;

    padding: 5px 9px;

    border-radius: 20px;

    background: #dcfce7;

    color: #166534;

    font-size: 13px;

    font-weight: bold;

}



.estado-inactivo {

    display: inline-block;

    padding: 5px 9px;

    border-radius: 20px;

    background: #fee2e2;

    color: #991b1b;

    font-size: 13px;

    font-weight: bold;

}



/* =========================

   NOTIFICACIONES

========================= */



.notificacion {

    position: fixed;

    top: 20px;

    right: 20px;

    width: auto;

    max-width: 420px;

    min-width: 280px;

    padding: 15px 18px;

    border-radius: 8px;

    z-index: 99999;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18);



    opacity: 1;

    transform: translateY(0);



    transition:

        opacity 0.4s ease,

        transform 0.4s ease;

}



.notificacion.exito {

    background: #dcfce7;

    color: #166534;

    border-left: 5px solid #22c55e;

}



.notificacion.error {

    background: #fee2e2;

    color: #991b1b;

    border-left: 5px solid #ef4444;

}



.notificacion.ocultar {

    opacity: 0;

    transform: translateY(-15px);

}



/* =========================

   MENÚ MÓVIL

========================= */



.menu-mobile {

    display: none;

    background: #1f2937;

    color: white;

    padding: 13px 18px;

    position: sticky;

    top: 0;

    z-index: 1100;

}



.menu-mobile button {

    background: transparent;

    color: white;

    font-size: 24px;

    padding: 0;

}



/* =========================

   RESPONSIVE TABLET

========================= */



@media (max-width: 1000px) {



    .form-grid {

        grid-template-columns: 1fr;

    }



    .form-grupo-completo {

        grid-column: auto;

    }

}



/* =========================

   RESPONSIVE MÓVIL

========================= */



@media (max-width: 768px) {



    .menu-mobile {

        display: flex;

        justify-content: space-between;

        align-items: center;

    }



    .sidebar {

        width: 260px;

        transform: translateX(-100%);

        transition: transform 0.3s ease;

        top: 0;

    }



    .sidebar.abierto {

        transform: translateX(0);

    }



    .contenido {

        margin-left: 0;

        width: 100%;

        padding: 18px;

    }



    .encabezado {

        flex-direction: column;

        align-items: flex-start;

    }



    h1 {

        font-size: 24px;

    }



    .tarjetas {

        grid-template-columns: 1fr;

    }



    .formulario {

        padding: 18px;

    }



    .tabla-contenedor {

        padding: 10px;

    }



    .notificacion {

        top: 70px;

        left: 15px;

        right: 15px;

        width: auto;

        min-width: 0;

        max-width: none;

    }

}



.resumen-venta {

    margin: 20px 0;

    padding: 18px;

    background: #f3f4f6;

    border-radius: 8px;

    text-align: right;

}



#tablaVenta select,

#tablaVenta input {

    width: 100%;

    min-width: 120px;

    padding: 8px;

    border: 1px solid #d1d5db;

    border-radius: 5px;

}



#tablaVenta select {

    min-width: 220px;

}





/* =========================================================

   MEJORAS RESPONSIVE - TABLAS COMO TARJETAS EN MÓVIL

========================================================= */



@media (max-width: 768px) {



    /* =========================================

       CONTENEDORES

    ========================================= */



    .tabla-contenedor {

        overflow: visible;

        padding: 12px;

    }



    .tabla-stock-movil,

    .tabla-productos-movil,

    .tabla-ventas-recientes-movil,

    .tabla-historial-ventas-movil,

    .tabla-nueva-venta-movil {

        min-width: 0 !important;

        width: 100%;

    }





    /* =========================================

       OCULTAR CABECERAS

    ========================================= */



    .tabla-stock-movil thead,

    .tabla-productos-movil thead,

    .tabla-ventas-recientes-movil thead,

    .tabla-historial-ventas-movil thead,

    .tabla-nueva-venta-movil thead {

        display: none;

    }





    /* =========================================

       CADA FILA SE CONVIERTE EN TARJETA

    ========================================= */



    .tabla-stock-movil tbody,

    .tabla-productos-movil tbody,

    .tabla-ventas-recientes-movil tbody,

    .tabla-historial-ventas-movil tbody,

    .tabla-nueva-venta-movil tbody {

        display: block;

        width: 100%;

    }





    .tabla-stock-movil tr,

    .tabla-productos-movil tr,

    .tabla-ventas-recientes-movil tr,

    .tabla-historial-ventas-movil tr,

    .tabla-nueva-venta-movil tr {

        display: block;

        background: #ffffff;

        border: 1px solid #e5e7eb;

        border-radius: 10px;

        margin-bottom: 15px;

        padding: 12px;

        box-shadow: 0 2px 6px rgba(0,0,0,.05);

    }





    .tabla-stock-movil td,

    .tabla-productos-movil td,

    .tabla-ventas-recientes-movil td,

    .tabla-historial-ventas-movil td,

    .tabla-nueva-venta-movil td {

        display: flex;

        justify-content: space-between;

        align-items: center;

        gap: 15px;

        width: 100%;

        border: none;

        border-bottom: 1px solid #f3f4f6;

        padding: 10px 4px;

        text-align: right;

    }





    .tabla-stock-movil td:last-child,

    .tabla-productos-movil td:last-child,

    .tabla-ventas-recientes-movil td:last-child,

    .tabla-historial-ventas-movil td:last-child,

    .tabla-nueva-venta-movil td:last-child {

        border-bottom: none;

    }





    /* =========================================

       STOCK BAJO

    ========================================= */



    .tabla-stock-movil td:nth-child(1)::before {

        content: "Código";

    }



    .tabla-stock-movil td:nth-child(2)::before {

        content: "Producto";

    }



    .tabla-stock-movil td:nth-child(3)::before {

        content: "Existencia";

    }



    .tabla-stock-movil td:nth-child(4)::before {

        content: "Stock mínimo";

    }





    /* =========================================

       PRODUCTOS MÁS VENDIDOS

    ========================================= */



    .tabla-productos-movil td:nth-child(1)::before {

        content: "Código";

    }



    .tabla-productos-movil td:nth-child(2)::before {

        content: "Producto";

    }



    .tabla-productos-movil td:nth-child(3)::before {

        content: "Unidades vendidas";

    }



    .tabla-productos-movil td:nth-child(4)::before {

        content: "Total vendido";

    }





    /* =========================================

       VENTAS RECIENTES

    ========================================= */



    .tabla-ventas-recientes-movil td:nth-child(1)::before {

        content: "Venta";

    }



    .tabla-ventas-recientes-movil td:nth-child(2)::before {

        content: "Fecha";

    }



    .tabla-ventas-recientes-movil td:nth-child(3)::before {

        content: "Total";

    }



    .tabla-ventas-recientes-movil td:nth-child(4)::before {

        content: "Utilidad";

    }



    .tabla-ventas-recientes-movil td:nth-child(5)::before {

        content: "Estado";

    }



    .tabla-ventas-recientes-movil td:nth-child(6)::before {

        content: "Usuario";

    }



    .tabla-ventas-recientes-movil td:nth-child(7)::before {

        content: "Detalle";

    }





    /* =========================================

       HISTORIAL DE VENTAS

    ========================================= */



    .tabla-historial-ventas-movil td:nth-child(1)::before {

        content: "Venta";

    }



    .tabla-historial-ventas-movil td:nth-child(2)::before {

        content: "Fecha";

    }



    .tabla-historial-ventas-movil td:nth-child(3)::before {

        content: "Subtotal";

    }



    .tabla-historial-ventas-movil td:nth-child(4)::before {

        content: "Descuento";

    }



    .tabla-historial-ventas-movil td:nth-child(5)::before {

        content: "Total";

    }



    .tabla-historial-ventas-movil td:nth-child(6)::before {

        content: "Costo";

    }



    .tabla-historial-ventas-movil td:nth-child(7)::before {

        content: "Utilidad";

    }



    .tabla-historial-ventas-movil td:nth-child(8)::before {

        content: "Estado";

    }



    .tabla-historial-ventas-movil td:nth-child(9)::before {

        content: "Usuario";

    }



    .tabla-historial-ventas-movil td:nth-child(10)::before {

        content: "Detalle";

    }





    /* =========================================

       NUEVA VENTA

    ========================================= */



    .tabla-nueva-venta-movil tr {

        padding: 15px;

    }



    .tabla-nueva-venta-movil td {

        display: block;

        text-align: left;

        padding: 8px 0;

    }





    .tabla-nueva-venta-movil td:nth-child(1)::before {

        content: "Producto";

    }



    .tabla-nueva-venta-movil td:nth-child(2)::before {

        content: "Presentación";

    }



    .tabla-nueva-venta-movil td:nth-child(3)::before {

        content: "Disponible";

    }



    .tabla-nueva-venta-movil td:nth-child(4)::before {

        content: "Cantidad";

    }



    .tabla-nueva-venta-movil td:nth-child(5)::before {

        content: "Precio";

    }



    .tabla-nueva-venta-movil td:nth-child(6)::before {

        content: "Unidades reales";

    }



    .tabla-nueva-venta-movil td:nth-child(7)::before {

        content: "Total";

    }



    .tabla-nueva-venta-movil td:nth-child(8)::before {

        content: "Acción";

    }





    /* =========================================

       ETIQUETAS

    ========================================= */



    .tabla-stock-movil td::before,

    .tabla-productos-movil td::before,

    .tabla-ventas-recientes-movil td::before,

    .tabla-historial-ventas-movil td::before,

    .tabla-nueva-venta-movil td::before {

        font-weight: bold;

        color: #374151;

    }





    .tabla-nueva-venta-movil td::before {

        display: block;

        margin-bottom: 6px;

    }





    /* =========================================

       CONTROLES DE VENTA

    ========================================= */



    #tablaVenta select,

    #tablaVenta input {

        width: 100% !important;

        min-width: 0 !important;

        margin: 0;

        padding: 11px;

        font-size: 16px;

    }





    #tablaVenta .stock,

    #tablaVenta .unidades-base,

    #tablaVenta .total-linea {

        font-size: 17px;

        font-weight: bold;

    }





    #tablaVenta button {

        width: 100%;

        margin-top: 5px;

    }





    /* =========================================

       BOTONES

    ========================================= */



    .tabla-ventas-recientes-movil .btn,

    .tabla-historial-ventas-movil .btn {

        width: auto;

    }





    /* =========================================

       TARJETAS DASHBOARD

    ========================================= */



    .tarjetas {

        grid-template-columns: 1fr;

        gap: 12px;

    }





    .tarjeta {

        padding: 18px;

    }





    .numero {

        font-size: 25px;

    }





    /* =========================================

       RESUMEN VENTA

    ========================================= */



    .resumen-venta {

        text-align: center;

        padding: 16px;

    }





    .resumen-venta h2 {

        font-size: 22px;

    }





    /* =========================================

       FORMULARIOS

    ========================================= */



    .formulario {

        padding: 12px;

    }





    .contenido {

        padding: 12px;

    }



}





/* =========================================================

   BUSCADOR DE PRODUCTOS

========================================================= */



.buscador-producto {

    position: relative;

    min-width: 260px;

}



.input-buscador-producto {

    width: 100%;

    padding: 10px 12px;

    border: 1px solid #d1d5db;

    border-radius: 6px;

    font-size: 15px;

}



.resultados-productos {

    position: absolute;

    left: 0;

    right: 0;

    top: calc(100% + 3px);

    background: white;

    border: 1px solid #d1d5db;

    border-radius: 6px;

    max-height: 280px;

    overflow-y: auto;

    box-shadow: 0 6px 18px rgba(0,0,0,.15);

    z-index: 9999;

}



.resultado-producto {

    padding: 11px 12px;

    cursor: pointer;

    border-bottom: 1px solid #f3f4f6;

}



.resultado-producto:last-child {

    border-bottom: none;

}



.resultado-producto:hover {

    background: #f3f4f6;

}



.resultado-vacio {

    padding: 12px;

    color: #6b7280;

}



.producto-seleccionado {

    margin-top: 5px;

    color: #4b5563;

}



@media (max-width: 768px) {



    .buscador-producto {

        min-width: 0;

        width: 100%;

    }



    .resultados-productos {

        position: relative;

        top: 0;

        margin-top: 5px;

        max-height: 220px;

    }



}







/* =========================================================

   TABLAS RESPONSIVE GENERALES

========================================================= */



.tabla-responsive {

    width: 100%;

    border-collapse: collapse;

}





/* =========================================================

   MÓVIL

========================================================= */



@media (max-width: 768px) {



    .tabla-responsive {

        display: block;

        width: 100%;

        min-width: 0 !important;

    }



    .tabla-responsive thead {

        display: none;

    }



    .tabla-responsive tbody {

        display: block;

        width: 100%;

    }



    .tabla-responsive tr {

        display: block;

        width: 100%;

        background: #ffffff;

        border: 1px solid #e5e7eb;

        border-radius: 10px;

        padding: 14px;

        margin-bottom: 15px;

        box-shadow: 0 2px 6px rgba(0,0,0,.05);

    }



    .tabla-responsive td {

        display: flex;

        width: 100%;

        justify-content: space-between;

        align-items: center;

        gap: 15px;

        padding: 9px 2px;

        border: none;

        border-bottom: 1px solid #f3f4f6;

        text-align: right;

    }



    .tabla-responsive td:last-child {

        border-bottom: none;

    }



    .tabla-responsive td::before {

        content: attr(data-label);

        font-weight: bold;

        color: #374151;

        text-align: left;

    }



    .tabla-responsive td > form {

        width: 100%;

    }



    .tabla-responsive td form input,

    .tabla-responsive td form select {

        width: 100%;

        margin-bottom: 6px;

    }



    .tabla-responsive td .btn,

    .tabla-responsive td button {

        max-width: 100%;

    }



    .tabla-contenedor {

        overflow-x: visible !important;

    }



}





/* =========================================================

   MODAL - CORRECCIÓN DEFINITIVA

========================================================= */



.modal-sistema {

    display: none !important;



    position: fixed !important;



    top: 0;

    left: 0;

    right: 0;

    bottom: 0;



    width: 100%;

    height: 100%;



    background: rgba(17, 24, 39, 0.65);



    z-index: 99999;



    padding: 20px;



    align-items: center;

    justify-content: center;

}





/* Mostrar solamente cuando se presiona Editar */





/* =========================================================

   VENTANA DEL MODAL

========================================================= */



.modal-contenido {



    width: 100%;

    max-width: 520px;



    max-height: 90vh;



    overflow-y: auto;



    background: #ffffff;



    border-radius: 12px;



    padding: 25px;



    box-shadow:

        0 20px 50px

        rgba(0, 0, 0, 0.30);



}





/* =========================================================

   ENCABEZADO

========================================================= */



.modal-encabezado {



    display: flex;



    align-items: flex-start;



    justify-content: space-between;



    gap: 20px;



    margin-bottom: 25px;



}





.modal-encabezado h2 {



    margin: 0 0 5px 0;



    font-size: 22px;



}





.modal-encabezado p {



    margin: 0;



    color: #6b7280;



    font-size: 14px;



}





/* =========================================================

   CERRAR

========================================================= */



.modal-cerrar {



    background: transparent !important;



    color: #6b7280;



    border: none;



    padding: 0;



    margin: 0;



    font-size: 30px;



    line-height: 1;



    cursor: pointer;



    width: auto !important;



}





.modal-cerrar:hover {



    color: #111827;



}





/* =========================================================

   CAMPOS

========================================================= */



.modal-campo {



    display: block;



    width: 100%;



    margin-bottom: 18px;



}





.modal-campo label {



    display: block;



    width: 100%;



    margin-bottom: 7px;



    font-weight: bold;



    color: #374151;



}





.modal-campo input,

.modal-campo select,

.modal-campo textarea {



    display: block;



    width: 100% !important;



    padding: 11px 12px;



    margin: 0;



    border: 1px solid #d1d5db;



    border-radius: 7px;



    background: #ffffff;



    font-family: Arial, Helvetica, sans-serif;



    font-size: 15px;



    box-sizing: border-box;



}





.modal-campo textarea {



    min-height: 100px;



    resize: vertical;



}





.modal-campo input:focus,

.modal-campo select:focus,

.modal-campo textarea:focus {



    border-color: #6b7280;



    outline: none;



}





/* Texto auxiliar */



.modal-campo small {



    display: block;



    margin-top: 6px;



    color: #6b7280;



    font-size: 13px;



}





/* =========================================================

   BOTONES

========================================================= */



.modal-acciones {



    display: flex;



    justify-content: flex-end;



    align-items: center;



    gap: 10px;



    margin-top: 25px;



}





.modal-acciones button {



    width: auto;



}





/* =========================================================

   TELÉFONO

========================================================= */



@media (max-width: 768px) {



    .modal-sistema {



        padding: 10px;



        align-items: center;



        justify-content: center;



    }





    .modal-contenido {



        width: 100%;



        max-width: 100%;



        max-height: 90vh;



        padding: 20px;



        border-radius: 12px;



    }





    .modal-encabezado {



        gap: 10px;



    }





    .modal-campo input,

    .modal-campo select,

    .modal-campo textarea {



        font-size: 16px;



    }





    .modal-acciones {



        display: grid;



        grid-template-columns: 1fr;



        gap: 10px;



    }





    .modal-acciones button,

    .modal-acciones .btn {



        width: 100% !important;



    }



}



.modal-sistema {

    display: none;

    position: fixed;

    inset: 0;

    width: 100%;

    height: 100%;

    background: rgba(17, 24, 39, 0.65);

    z-index: 99999;

    padding: 20px;

    align-items: center;

    justify-content: center;

}



.modal-contenido {

    width: 100%;

    max-width: 520px;

    max-height: 90vh;

    overflow-y: auto;

    background: #ffffff;

    border-radius: 12px;

    padding: 25px;

    box-shadow: 0 20px 50px rgba(0,0,0,.30);

}



/* =========================================================

   FORMULARIOS DE EDICIÓN DENTRO DE TABLAS

========================================================= */



.form-edicion-tabla {



    display: grid;



    grid-template-columns: 1fr;



    gap: 8px;



    min-width: 190px;



}





.campo-edicion-tabla {



    width: 100%;



}





.campo-edicion-tabla label {



    display: block;



    margin-bottom: 4px;



    font-size: 12px;



    font-weight: bold;



    color: #6b7280;



}





.campo-edicion-tabla input,

.campo-edicion-tabla select,

.campo-edicion-tabla textarea {



    width: 100%;



    min-width: 0;



    padding: 8px 9px;



    margin: 0;



    border: 1px solid #d1d5db;



    border-radius: 6px;



    background: #ffffff;



    font-size: 14px;



    box-sizing: border-box;



}





.campo-edicion-tabla input[readonly] {



    background: #f3f4f6;



    color: #6b7280;



}





/* =========================================================

   TELÉFONO

========================================================= */



@media (max-width: 768px) {





    .form-edicion-tabla {



        width: 100%;



        min-width: 0;



        gap: 12px;



    }





    .campo-edicion-tabla label {



        font-size: 14px;



        margin-bottom: 6px;



    }





    .campo-edicion-tabla input,

    .campo-edicion-tabla select,

    .campo-edicion-tabla textarea {



        font-size: 16px;



        padding: 11px;



    }





    .form-edicion-tabla button {



        width: 100%;



    }





    .tabla-responsive td[data-label="Editar"] {



        display: block;



        text-align: left;



    }





    .tabla-responsive td[data-label="Editar"]::before {



        display: block;



        margin-bottom: 12px;



    }





    .tabla-responsive td[data-label="Acción"] button {



        width: 100%;



    }



}



/* =========================================================

   SECCIONES DESPLEGABLES DE REPORTES

========================================================= */



.reporte-desplegable {



    margin-top: 18px;



    background: #ffffff;



    border: 1px solid #e5e7eb;



    border-radius: 10px;



    overflow: hidden;



}





.reporte-titulo {



    width: 100%;



    display: flex;



    justify-content: space-between;



    align-items: center;



    gap: 15px;



    padding: 18px 20px;



    background: #ffffff;



    color: #1f2937;



    border: none;



    border-radius: 0;



    font-size: 18px;



    font-weight: bold;



    text-align: left;



    cursor: pointer;



}





.reporte-titulo:hover {



    background: #f9fafb;



}





.reporte-titulo.activo {



    background: #f3f4f6;



}





.reporte-flecha {



    font-size: 15px;



    color: #6b7280;



    flex-shrink: 0;



}





/* Oculto inicialmente */



.reporte-contenido {



    display: none;



    padding: 15px;



    border-top: 1px solid #e5e7eb;



}





/* Mostrar */



.reporte-contenido.abierto {



    display: block;



}





/* Evitar doble caja */



.reporte-contenido .tabla-contenedor {



    padding: 0;



    box-shadow: none;



    border-radius: 0;



}





/* =========================================================

   ADVERTENCIA

========================================================= */



.estado-advertencia {



    display: inline-block;



    padding: 5px 9px;



    border-radius: 20px;



    background: #fef3c7;



    color: #92400e;



    font-size: 13px;



    font-weight: bold;



}





/* =========================================================

   TELÉFONO

========================================================= */



@media (max-width: 768px) {



    .reporte-titulo {



        padding: 16px;



        font-size: 16px;



    }





    .reporte-contenido {



        padding: 10px;



    }



}





/* =========================================================

   BUSCADOR DE PRODUCTOS

========================================================= */



.productos-cabecera {



    display: flex;



    justify-content: space-between;



    align-items: center;



    gap: 20px;



    flex-wrap: wrap;



}





.productos-cabecera h2 {



    margin-bottom: 3px;



}





.productos-cabecera small {



    color: #6b7280;



}





.buscador-productos {



    position: relative;



    display: flex;



    align-items: center;



    width: 100%;



    max-width: 420px;



}





.buscador-productos input {



    width: 100%;



    padding: 12px 42px 12px 42px;



    border: 1px solid #d1d5db;



    border-radius: 9px;



    font-size: 14px;



    background: #ffffff;



    box-sizing: border-box;



}





.buscador-productos input:focus {



    outline: none;



    border-color: #2563eb;



    box-shadow:

        0 0 0 3px

        rgba(37, 99, 235, 0.10);



}





.buscador-icono {



    position: absolute;



    left: 13px;



    pointer-events: none;



}





.btn-limpiar-busqueda {



    position: absolute;



    right: 8px;



    width: 32px;



    height: 32px;



    display: flex;



    align-items: center;



    justify-content: center;



    border: none;



    border-radius: 6px;



    background: transparent;



    color: #6b7280;



    cursor: pointer;



    font-size: 16px;



}





.btn-limpiar-busqueda:hover {



    background: #f3f4f6;



    color: #111827;



}





.mensaje-sin-productos {



    margin-top: 20px;



    padding: 20px;



    text-align: center;



    color: #6b7280;



    background: #f9fafb;



    border: 1px dashed #d1d5db;



    border-radius: 9px;



}





/* =========================================================

   BUSCADOR EN TELÉFONO

========================================================= */



@media (max-width: 768px) {



    .productos-cabecera {



        display: block;



    }





    .buscador-productos {



        max-width: none;



        margin-top: 15px;



    }





    .buscador-productos input {



        font-size: 16px;



        padding-top: 13px;



        padding-bottom: 13px;



    }



}



/* =========================================================

   LOGIN

========================================================= */



.login-body {



    margin: 0;



    min-height: 100vh;



    background: #f3f4f6;



    font-family:

        Arial,

        Helvetica,

        sans-serif;



}





.login-contenedor {



    min-height: 100vh;



    display: grid;



    grid-template-columns:

        minmax(420px, 1.1fr)

        minmax(420px, 0.9fr);



}





/* =========================================================

   PANEL IZQUIERDO

========================================================= */



.login-presentacion {



    position: relative;



    overflow: hidden;



    display: flex;



    align-items: center;



    justify-content: center;



    padding: 60px;



    background:

        linear-gradient(

            145deg,

            #111827,

            #1f2937 55%,

            #111827

        );



    color: #ffffff;



}





.login-presentacion-contenido {



    position: relative;



    z-index: 2;



    width: 100%;



    max-width: 590px;



}





.login-logo-principal {



    margin-bottom: 45px;



}





.login-logo-principal img {



    display: block;



    max-width: 190px;



    max-height: 100px;



    object-fit: contain;



}





.login-logo-placeholder {



    width: 74px;



    height: 74px;



    display: flex;



    align-items: center;



    justify-content: center;



    border-radius: 18px;



    background:

        rgba(

            255,

            255,

            255,

            0.12

        );



    border:

        1px solid

        rgba(

            255,

            255,

            255,

            0.15

        );



    font-size: 34px;



    backdrop-filter:

        blur(8px);



}





/* =========================================================

   MARCA

========================================================= */



.login-etiqueta {



    display: inline-block;



    margin-bottom: 15px;



    color: #93c5fd;



    font-size: 12px;



    font-weight: bold;



    letter-spacing: 2px;



}





.login-marca h1 {



    margin:

        0

        0

        18px

        0;



    max-width: 520px;



    font-size: 46px;



    line-height: 1.08;



    letter-spacing: -1px;



}





.login-marca p {



    max-width: 520px;



    margin: 0;



    color: #d1d5db;



    font-size: 17px;



    line-height: 1.65;



}





/* =========================================================

   BENEFICIOS

========================================================= */



.login-beneficios {



    display: grid;



    gap: 18px;



    margin-top: 48px;



}





.login-beneficio {



    display: flex;



    align-items: center;



    gap: 14px;



}





.login-beneficio-icono {



    width: 34px;



    height: 34px;



    flex-shrink: 0;



    display: flex;



    align-items: center;



    justify-content: center;



    border-radius: 50%;



    background:

        rgba(

            37,

            99,

            235,

            0.25

        );



    color: #bfdbfe;



    font-weight: bold;



}





.login-beneficio strong {



    display: block;



    margin-bottom: 3px;



    font-size: 14px;



}





.login-beneficio span {



    color: #9ca3af;



    font-size: 13px;



}





/* =========================================================

   DECORACIONES

========================================================= */



.login-decoracion {



    position: absolute;



    border-radius: 50%;



    pointer-events: none;



}





.login-decoracion-1 {



    width: 380px;



    height: 380px;



    right: -170px;



    top: -140px;



    background:

        rgba(

            37,

            99,

            235,

            0.18

        );



}





.login-decoracion-2 {



    width: 280px;



    height: 280px;



    left: -120px;



    bottom: -100px;



    background:

        rgba(

            59,

            130,

            246,

            0.08

        );



}





/* =========================================================

   PANEL DERECHO

========================================================= */



.login-panel {



    display: flex;



    justify-content: center;



    align-items: center;



    padding: 45px;



    background: #ffffff;



}





.login-formulario-contenedor {



    width: 100%;



    max-width: 430px;



}





/* =========================================================

   LOGO MÓVIL

========================================================= */



.login-logo-mobile {



    display: none;



    justify-content: center;



    margin-bottom: 25px;



}





.login-logo-mobile img {



    max-width: 180px;



    max-height: 85px;



    object-fit: contain;



}





/* =========================================================

   ENCABEZADO

========================================================= */



.login-encabezado {



    margin-bottom: 32px;



}





.login-bienvenida {



    color: #2563eb;



    font-size: 13px;



    font-weight: bold;



    text-transform: uppercase;



    letter-spacing: 1px;



}





.login-encabezado h2 {



    margin:

        8px

        0

        8px

        0;



    color: #111827;



    font-size: 32px;



    letter-spacing: -0.5px;



}





.login-encabezado p {



    margin: 0;



    color: #6b7280;



    font-size: 14px;



    line-height: 1.5;



}





/* =========================================================

   ERROR

========================================================= */



.login-error {



    display: flex;



    align-items: center;



    gap: 10px;



    margin-bottom: 22px;



    padding: 13px 15px;



    background: #fef2f2;



    border:

        1px solid

        #fecaca;



    border-radius: 9px;



    color: #991b1b;



    font-size: 13px;



}





.login-error-icono {



    width: 23px;



    height: 23px;



    display: flex;



    align-items: center;



    justify-content: center;



    flex-shrink: 0;



    background: #dc2626;



    color: #ffffff;



    border-radius: 50%;



    font-weight: bold;



}





/* =========================================================

   FORMULARIO

========================================================= */



.login-form {



    width: 100%;



}





.login-campo {



    margin-bottom: 20px;



}





.login-campo label {



    display: block;



    margin-bottom: 7px;



    color: #374151;



    font-size: 13px;



    font-weight: bold;



}





.login-input-contenedor {



    position: relative;



    display: flex;



    align-items: center;



}





.login-input-icono {



    position: absolute;



    left: 14px;



    z-index: 2;



    pointer-events: none;



    font-size: 16px;



}





.login-input-contenedor input {



    width: 100%;



    box-sizing: border-box;



    padding:

        14px

        45px;



    border:

        1px solid

        #d1d5db;



    border-radius: 10px;



    background: #ffffff;



    color: #111827;



    font-size: 15px;



    transition:

        border-color 0.2s,

        box-shadow 0.2s;



}





.login-input-contenedor input:focus {



    outline: none;



    border-color: #2563eb;



    box-shadow:

        0 0 0 3px

        rgba(

            37,

            99,

            235,

            0.10

        );



}





.login-input-contenedor input::placeholder {



    color: #9ca3af;



}





/* =========================================================

   VER CONTRASEÑA

========================================================= */



.login-ver-password {



    position: absolute;



    right: 8px;



    width: 38px;



    height: 38px;



    display: flex;



    align-items: center;



    justify-content: center;



    border: none;



    border-radius: 8px;



    background: transparent;



    cursor: pointer;



    font-size: 16px;



}





.login-ver-password:hover {



    background: #f3f4f6;



}





/* =========================================================

   BOTÓN

========================================================= */



.login-boton {



    width: 100%;



    min-height: 50px;



    display: flex;



    align-items: center;



    justify-content: center;



    gap: 12px;



    margin-top: 8px;



    padding: 13px 20px;



    border: none;



    border-radius: 10px;



    background:

        linear-gradient(

            135deg,

            #2563eb,

            #1d4ed8

        );



    color: #ffffff;



    font-size: 15px;



    font-weight: bold;



    cursor: pointer;



    transition:

        transform 0.15s,

        box-shadow 0.15s;



}





.login-boton:hover {



    transform:

        translateY(-1px);



    box-shadow:

        0 8px 18px

        rgba(

            37,

            99,

            235,

            0.25

        );



}





.login-boton:active {



    transform:

        translateY(0);



}





.login-boton-flecha {



    font-size: 19px;



}





/* =========================================================

   PIE

========================================================= */



.login-pie {



    display: flex;



    justify-content: center;



    align-items: center;



    gap: 7px;



    margin-top: 30px;



    color: #9ca3af;



    font-size: 12px;



}





.login-punto {



    color: #d1d5db;



}





/* =========================================================

   RESPONSIVE TABLET

========================================================= */



@media (max-width: 900px) {



    .login-contenedor {



        grid-template-columns:

            1fr 1fr;



    }





    .login-presentacion {



        padding: 40px;



    }





    .login-marca h1 {



        font-size: 38px;



    }





    .login-panel {



        padding: 35px;



    }



}





/* =========================================================

   RESPONSIVE TELÉFONO

========================================================= */



@media (max-width: 768px) {



    .login-body {



        background: #ffffff;



    }





    .login-contenedor {



        display: block;



        min-height: 100vh;



    }





    .login-presentacion {



        display: none;



    }





    .login-panel {



        min-height: 100vh;



        box-sizing: border-box;



        padding:

            35px

            22px;



    }





    .login-formulario-contenedor {



        max-width: 500px;



    }





    .login-logo-mobile {



        display: flex;



    }





    .login-logo-mobile .login-logo-placeholder {



        background: #eff6ff;



        border:

            1px solid

            #dbeafe;



    }





    .login-encabezado {



        text-align: center;



    }





    .login-encabezado h2 {



        font-size: 28px;



    }





    .login-input-contenedor input {



        min-height: 50px;



        font-size: 16px;



    }





    .login-boton {



        min-height: 52px;



        font-size: 16px;



    }



}





/* =========================================================

   TELÉFONOS PEQUEÑOS

========================================================= */



@media (max-width: 380px) {



    .login-panel {



        padding:

            28px

            16px;



    }





    .login-encabezado h2 {



        font-size: 25px;



    }





    .login-pie {



        flex-wrap: wrap;



    }



}