/* Reset Básico */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Definición de las fuentes Geist */
        @font-face {
            font-family: 'Geist';
            src: url('/static/fonts/Geist-Regular.ttf') format('truetype');
            font-weight: 400; /* Regular */
            font-style: normal;
        }

        @font-face {
            font-family: 'Geist';
            src: url('/static/fonts/Geist-Bold.ttf') format('truetype');
            font-weight: 700; /* Bold */
            font-style: normal;
        }

        @font-face {
            font-family: 'Geist';
            src: url('/static/fonts/Geist-Light.ttf') format('truetype');
            font-weight: 300; /* Light */
            font-style: normal;
        }

        @font-face {
            font-family: 'Geist';
            src: url('/static/fonts/Geist-Medium.ttf') format('truetype');
            font-weight: 500; /* Medium */
            font-style: normal;
        }

        @font-face {
            font-family: 'Geist';
            src: url('/static/fonts/Geist-SemiBold.ttf') format('truetype');
            font-weight: 600; /* SemiBold */
            font-style: normal;
        }

        @font-face {
            font-family: 'Geist';
            src: url('/static/fonts/Geist-ExtraBold.ttf') format('truetype');
            font-weight: 800; /* ExtraBold */
            font-style: normal;
        }

        @font-face {
            font-family: 'Geist';
            src: url('/static/fonts/Geist-Black.ttf') format('truetype');
            font-weight: 900; /* Black */
            font-style: normal;
        }

        @font-face {
            font-family: 'Geist';
            src: url('/static/fonts/Geist-ExtraLight.ttf') format('truetype');
            font-weight: 200; /* ExtraLight */
            font-style: normal;
        }

        @font-face {
            font-family: 'Geist';
            src: url('/static/fonts/Geist-Thin.ttf') format('truetype');
            font-weight: 100; /* Thin */
            font-style: normal;
        }


        /* Base para HD (1280x720) */
        /* Para pantallas pequeñas (<1300px) */


        body {
            font-family: 'Geist', Arial, sans-serif;
            font-weight: 400; /* Regular por defecto */
            font-size: 16px; /* Tamaño base */
            line-height: 1.6; /* Espaciado entre líneas para mayor legibilidad */
            color: #333; /* Color de texto accesible */
        }

        h1 {
            font-family: 'Geist', Arial, sans-serif;
            font-weight: 700; /* Bold */
            font-size: 20px; /* Tamaño de encabezado principal */
            line-height: 1.3; /* Espaciado compacto pero legible */
            margin-bottom: 20px;
        }

        h2 {
            font-family: 'Geist', Arial, sans-serif;
            font-weight: 600; /* SemiBold */
            font-size: 28px;
            line-height: 1.4;
            margin-bottom: 16px;
        }

        h3 {
            font-family: 'Geist', Arial, sans-serif;
            font-weight: 500; /* Medium */
            font-size: 24px;
            line-height: 1.4;
            margin-bottom: 12px;
        }

        p {
            font-family: 'Geist', Arial, sans-serif;
            font-weight: 300; /* Light */
            font-size: 16px; /* Igual al tamaño base */
            line-height: 1.6; /* Espaciado cómodo */
            margin-bottom: 12px;
        }

        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }

        .button {
            font-family: 'Geist', Arial, sans-serif;
            font-weight: 600; /* SemiBold */
            font-size: 14px; /* Botones más compactos */
            text-transform: uppercase; /* Mayúsculas para énfasis */
            padding: 8px 16px; /* Espaciado cómodo */
            line-height: 1.5;
        }

        .small-text {
            font-family: 'Geist', Arial, sans-serif;
            font-weight: 100; /* Thin */
            font-size: 12px; /* Texto pequeño */
            line-height: 1.4; /* Compacto pero accesible */
            color: #666; /* Color más tenue */
        }

        /* Contenedor general del login */
        .login-container {
            display: flex;
            flex-wrap: nowrap; /* Mantiene los hijos en una fila */
            justify-content: space-between; /* Espacio entre elementos */
            align-items: center; /* Alineación vertical */
            height: 100vh;
            padding: 20px;
            background: linear-gradient(135deg, rgba(10, 12, 99, 1) 0%, rgba(30, 144, 255, 1) 100%);
            color: #fff;
            gap: 20px; /* Espaciado entre los elementos */
            box-sizing: border-box; /* Asegura que el padding no afecte el tamaño */
        }

        /* Contenedor izquierdo */
        .login-header {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: auto; /* Permite ajustar dinámicamente */
            min-height: 300px; /* Evita que colapse */
            
        }

        .icon {
            width: 24px; /* Ancho del ícono */
            height: 24px; /* Altura del ícono */
            fill: white; /* Hereda el color del texto */
            
        }
        
        

        /* Mensaje de bienvenida */
        .mensaje_bienvenida {
            font-size: 2.5rem;
            font-weight: bold;
            color: #fff;
            margin-bottom: 20px;
            animation: floatMessage 8s ease-in-out infinite;
            
        }

        /* Contenedor del logo */
        /* Contenedor del logo */
        .logo-bienvenida {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: auto;
            overflow: hidden;
            aspect-ratio: 755.90533 / 188.976;
            display: block;
            animation: floatMessage 8s ease-in-out infinite; /* Solo este logo flota */
            
        }
        
        .logo-bienvenida svg {
            width: 100%;
            height: 260px;
            object-fit: contain;
            display: block;
            margin-left: 40px;
            
        }
        
        .logo svg {
            width: 100%; /* Ajusta al ancho del contenedor */
            height: 260px; /* Ajusta al alto del contenedor */
            object-fit: contain; /* Escala sin deformar */
            display: block; /* Evita el espacio extra generado por los elementos inline */
            margin-left: 40px;
            
        }
        /* Ajuste de color y animación */
        .logo svg path {
            fill: currentColor;
            animation: colorChange 5s infinite alternate; /* Animación opcional */
        }

        .login-header .logo {
            width: 100%; /* Asegura que ocupe todo el espacio horizontal */
            height: 100px; /* Por ejemplo, puedes limitar su altura máxima */
        }

        .login-header .logo {
            width: 100%; /* Asegura que ocupe todo el espacio horizontal */
            height: auto; /* Por ejemplo, puedes limitar su altura máxima */
        }






        /* Animación del color (opcional, puedes omitir si no es necesario) */
        @keyframes headerColorChange {
            0% {
                fill: #ffffff;
            }
            50% {
                fill: #dcdcdc; /* Gris claro para efecto dinámico */
            }
            100% {
                fill: #ffffff;
            }
        }

        /* Login del lado derecho */
        .login-contenido {
            flex: 0 1 30%; /* Inicia en 30% y puede reducirse */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            min-width: 300px; /* No será más pequeño que 300px */
            max-width: 400px; /* No será más grande que 400px */
            box-sizing: border-box;
            background: #ffffff; /* Fondo blanco para el formulario */
            border-radius: 10px; /* Bordes redondeados */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            height: 100%;
        }

        /* Estilos de la tarjeta del formulario */
        .login-card {
            background: #fff;
            padding: 30px;
            border-radius: 10px;

            text-align: center;
            width: 100%; /* Usará hasta el 25% del ancho del viewport */
            height: 100%;

            color: #333;
            box-sizing: border-box; /* Asegura que padding no exceda el ancho */

            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        /* Títulos y subtítulos */
        .login-card__title {
            font-size: 1.8rem;
            font-weight: bold;
            margin-bottom: 50px;
        }

        .login-card__subtitle {
            font-size: 1rem;
            color: #555;
            margin-bottom: 20px;
        }

        .login-head {
            height: 30%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .login-body {
            flex:1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        /* Formulario */
        .login-form__field {
            margin-bottom: 20px;
        }

        .login-form__label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .login-form__input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }

        .login-form__button {
            background: #1e90ff;
            color: #fff;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.3s;
        }

        .login-form__button:hover {
            background: #155cbd;
        }

        /* Animación del mensaje flotante */
        @keyframes floatMessage {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
            100% {
                transform: translateY(0);
            }
        }

        /* Animación del logo */
        @keyframes colorChange {
            0% {
                fill: #02500f;
            }
            50% {
                fill: #0a8b3a;
            }
            100% {
                fill: #087728;
            }
        }


        /* -------------------------------- DASHBOARD --------------------------- */

        .dashboard-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start; /* Asegura que el contenido inicie desde arriba */
            
        
            width: 100vw; /* Ocupa todo el ancho disponible */
            height: 100vh;
            

        
            box-sizing: border-box;
            font-size: 14px; /* Tamaño base */
            background-color: rgb(255, 255, 255);
        }
        



        /* Header Styling */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(135deg, rgba(10, 12, 99, 1) 0%, rgb(54, 57, 211) 100%);
            padding: 7px 20px;
            position: sticky;
            top: 0;
            z-index: 100;
            width: 100%;
           
            height: 40px;
        }

        /* Contenedor del logo del header */
        /* Contenedor principal del logo */
        .header__logo {
            display: flex;
            justify-content: center; /* Centra horizontalmente */
            align-items: center; /* Centra verticalmente */
            width: auto; /* Se adapta automáticamente al contenido */
            height: 40px; /* Ajusta la altura al espacio disponible */
        }

        /* SVG dentro del contenedor */
        .header__logo svg {
            padding-top: 5px;
            height: 40px;

            object-fit: contain; /* Escala sin deformar */
            display: block; /* Evita espacios extra */

        }

        /* Color y animación opcional del logo */
        .header__logo svg path {
            fill: currentColor; /* Adapta el color al contexto (puedes definir colores específicos) */
            animation: colorChange 5s infinite alternate; /* Si deseas una animación opcional */
        }

        /* Animación de cambio de color (opcional) */
        @keyframes colorChange {
            0% {
                fill: #000; /* Color inicial */
            }
            100% {
                fill: #007bff; /* Color final */
            }
        }








        .header__navegacion {
            display: flex;
            flex-direction: row;
            gap:5px;
        }

        .header__button {
        background-color: rgba(66, 69, 245, 0.5);
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;

        /* centrado perfecto */
        display: inline-flex;
        align-items: center;      /* centra vertical */
        justify-content: center;  /* centra horizontal */
        gap: 6px;                 /* espacio si hay ícono + texto */

        height: 35px;
        padding: 0 10px;          /* sin padding vertical para respetar la altura fija */
        box-sizing: border-box;

        font-size: 13px;
        font-weight: 400;
        text-decoration: none;    /* por si es <a> */
        line-height: 1;           /* evita desajustes por baseline */
        white-space: nowrap;      /* opcional: evita que se parta en 2 líneas */
        }

        /* opcional: normaliza el svg si usas íconos */
        .header__button .icon {
        width: 18px;
        height: 18px;
        display: block;
        flex: 0 0 auto;
        }

        .header__button:hover {
            background-color: rgba(10, 11, 99, 0.5);
        }

        .header__nombreusuario {
            margin-top: 1px;
            height: 100%; /* Usar todo el espacio disponible en el contenedor */
            box-sizing: border-box;
            display: flex; /* Activar flexbox */
            flex-direction: column; /* Colocar los textos uno debajo del otro */
            justify-content: center; /* Centrar contenido verticalmente */
            align-items: flex-start; /* Alinear contenido a la izquierda */
            text-align: left; /* Alinear texto al inicio */
            padding-left: 10px; /* Añadir espacio desde el borde izquierdo */
            
        }
        
        .header__nombreusuario p {
            margin: 0; /* Eliminar márgenes del párrafo */
            line-height: 15px;
            font-size: 11px;
            color: white;
            font-weight: 200;
        }
        
        .header__nombreusuario .nombre-usuario {
            font-size: 17px; /* Tamaño más grande para la segunda línea */
            font-weight: 400; /* Destacar el nombre */
            color: #ffffff; /* Color blanco */
        }


        .empanada { position: relative; }
        .empanada__btn { display: flex; align-items: center; justify-content: center; }

        .empanada__menu {
        position: absolute;
        right: 0;
        top: calc(100% + 8px);
        min-width: 220px;
        background: rgb(54, 57, 211);
        border: 1px solid #e5e7eb;
        box-shadow: 0 8px 20px rgba(0,0,0,.08);
        border-radius: 10px;
        padding: 6px;
        display: none;
        z-index: 1000;
        }
        .empanada__menu.is-open { display: block; }

        .empanada__item {
        display: block;
        padding: 8px 12px;
        text-decoration: none;
        color: #ffffff;
        border-radius: 8px;
        }
        .empanada__item:hover { background: rgba(10, 12, 99, 1); }


        /* Main Container */
        .main-container {
            display: flex;
            flex-wrap: nowrap; /* Mantiene los elementos en una sola fila */
            justify-content: space-between; /* Distribuye los elementos uniformemente */

            align-items: flex-start; /* Alinea los elementos al inicio del eje vertical */
            flex-direction: row;
            padding: 15px; /* Espaciado interno uniforme */
            
        
            background-color: #ffffff; /* Fondo blanco */
            width: 100vw; /* Ocupa el 100% del ancho del contenedor padre */
            height: calc(100vh - 40px);
            
            box-sizing: border-box; /* Incluye padding y bordes en las dimensiones */
            gap: 12px;
            
        }

        /* Estilo para los hijos */
        .main-container > :nth-child(1) {
            flex: 4; /* 70% */
            min-width: 300px;
            max-width: 600px;
            
        }

        .main-container > :nth-child(2) {
            flex: 10; /* 30% */
            
        }

        /* Sidebar Menu */
        .menu {
            display: flex; /* Convierte el contenedor en un contenedor flexible */
            flex-direction: column; /* Asegura que los elementos se apilen verticalmente */
            width: 100%;
            background-color: rgb(255, 255, 255);
            border: 2px solid rgba(10, 12, 99, 1);
            border-radius: 10px;
            position: sticky;
            height: 100%;

            overflow-y: auto; /* Scroll interno si el contenido excede la altura */
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4), 0px 1px 3px rgba(0, 0, 0, 0.08);
            
            
        }

        .menu__header {
            background: linear-gradient(135deg, rgba(10, 12, 99, 1) 0%, rgb(54, 57, 211) 100%);
            color: white;
            padding: 5px; /* Ajustar padding para respetar altura */
            font-size: 16px; /* Tamaño más pequeño para caber en 20px */
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px; /* Altura fija */

        }

        .menu__body {
            flex: 1; /* Hace que el cuerpo ocupe todo el espacio restante */
            overflow-y: auto; /* Agrega desplazamiento si el contenido excede la altura */
            padding: 7px;
            display: flex;
            flex-direction: column; /* Organiza sus elementos internamente */
            gap: 5px; /* Espaciado interno entre los elementos */
            background-color: #ffffff;
        }


        .menu__messages {
            width: 100%;
            height: 40px;
            background-color: #d4d4d4c0;
            align-content: center;
            
            
            padding: 4px;
            
            min-height: 40px;
            font-size: 10px;
            box-shadow: -1px 1px 1px rgba(83, 83, 83, 0.377);
            opacity: 0.6;
        }

        /* Formulario del Resumen */
        .menu__form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px; /* Reducir espacio entre campos */
        }




        .menu__ids {
            display: grid;
            grid-column: span 2; /* Controla la proporción de las columnas */
            gap: 5px; /* Espaciado entre las columnas */
            width: 100%; /* Asegura que ocupe todo el ancho disponible */
        }

        .menu__field:nth-child(1) {
            grid-column: 1; /* Asegura que el primer elemento esté en la primera columna */
            width: 120px;
            height: 100%;
        }

        .menu__field:nth-child(2) {
            grid-column: 2; /* Asegura que el segundo elemento esté en la segunda columna */
        }



        #id-doc {
            position: relative; /* Necesario para que el desplegable se ajuste al campo */
        }
        
        #id-doc::-ms-expand {
            display: none; /* Oculta la flecha de los select en IE/Edge (si es necesario) */
        }
        
        #id-doc {
            text-align: left; /* Asegura que el texto del select sea legible */
            direction: ltr; /* Mantén el orden del texto normal */
            padding: 0;
        }
        
        #id-doc option {
            text-align: left; /* Opcional: alinea el texto dentro de las opciones */
            
        }
        
        /* Modificar el contenedor del select desplegable */
        #id-doc {
            width: 100%; /* Ajusta la anchura según sea necesario */
            height: 100%;
        }


        
        .menu__field {
            display: flex;
            flex-direction: column;
            gap:0px;
            padding: 0
        }

        .menu__field label{
            font-size: 10px;
            line-height: 10 px;
        }

        .menu__field textarea {
            font-size: 12px;
        }

        .menu__field--with-button {
            display: flex;
            align-items: center;
            justify-content: space-between;
            grid-column: span 2;
        }

        .menu__field--botones {
            grid-column: span 2;
            display: flex;
            flex-direction: row;
            gap: 5px;
            width: 100%;
            margin: 0; /* Elimina márgenes innecesarios */
            padding: 0; /* Elimina paddings innecesarios */
            justify-content: space-between; /* Asegura que los botones se distribuyan uniformemente */
        }

        .menu__field--botones button {
            flex: 1; /* Hace que los botones ocupen el mismo ancho dentro del contenedor */
            padding: 4px; /* Ajusta el relleno interno */
            margin: 0; /* Elimina márgenes en los botones */
            font-size: 12px; /* Tamaño del texto */
            background-color: rgb(103, 110, 173);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
            
        }

        .menu__input {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 11px;
            width: 100%;
        }


        .menu__button {
            
            background-color: rgb(103, 110, 173);
            color: white;
            border: none;
            padding: 8px;
            cursor: pointer;
            border-radius: 5px;
            font-size: 12px;
        }

        .menu__button:hover {
            background-color: rgba(21, 96, 172, 0.8);
        }

        /* Campos completos */
        .menu__field--full {
            grid-column: span 2;
        }

        .menu__field--full input {
            text-align: right;
        }
        .menu__textarea {
            resize: none;
        }

        /* Totales */
        .menu__totals {
            margin: 7px;
            line-height: 1.4;
            
        }

       

        .menu__totals p {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0;
            font-size: 13px;
        }

        .menu__value {
            font-weight: bold;
            text-align: right;
        }

        .menu__actualizacion {
            text-align: right; /* Alinea el texto a la derecha */
            position: relative; /* Posiciona el texto de forma relativa al contenedor padre */

            
            color: #666; /* Color informativo (opcional) */
            
        }

        .menu__actualizacion p{
            font-size: 12px;
            margin: 0;;
        }

        /* Botones de Acción */
        .menu__actions {
            display: flex;
            flex-direction: row; /* Asegura que los botones estén en fila */
            gap: 5px; /* Espaciado entre botones */
            justify-content: center; /* Alinea los botones horizontalmente al centro */
            align-items: center; /* Centra los botones verticalmente */
            width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
            position: absolute;
            bottom: 0; /* Lo fija al fondo */
            left: 0; /* Asegura que esté alineado al borde izquierdo */
            padding: 10px;
            
        }

        .menu__actions button {
            flex: 1; /* Asegura que los botones ocupen el mismo ancho */
            text-align: center; /* Centra el texto dentro del botón */
            width: 100%;
            font-size: 10px;
            height: 100%;
        }


        .menu__button--save {
            background-color: rgb(75, 114, 75);
            color: white;
        }



        .menu__button--pdf {
            background-color: rgb(187, 64, 64);
            color: white;
        }

        .menu__button--register {
            background-color: rgb(56, 58, 168);
            color: white;
        }

        .items-ventana {
            
                flex: 1; /* Ocupará todo el espacio restante */
                height: 100%;
                background-color: rgba(255, 255, 255, 0.877);
                
                border-radius: 0; /* Opcional */
                position: relative; /* Cambia sticky si no es necesario */
                overflow-y: auto; /* Para permitir scroll si el contenido excede */

                position: relative;
            
        }

        .items-ventana .contenedor-boton {
            width: 100%;
            
            text-align: right;
            
        }

        
        /* Sombras generales */
        .items-ventana::before,
        .items-ventana::after {
            content: '';
            position: fixed; /* Usamos posición fija para asegurar visibilidad en el viewport */
            left: var(--dynamic-left); /* Borde izquierdo del contenedor */
            width: var(--dynamic-width); /* Ancho del contenedor */
            height: 15px; /* Altura de las sombras */
            pointer-events: none; /* Evitar interferencias */
            opacity: 0; /* Invisible por defecto */
            transition: opacity 0.3s ease; /* Transición suave */
            z-index: 10;
        }

        /* Sombra superior */
        .items-ventana.show-shadow-top::before {
            top: var(--dynamic-top); /* Fija la sombra en la parte superior */
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
            opacity: 1; /* Hace visible la sombra superior */
        }

        /* Sombra inferior */
        .items-ventana.show-shadow-bottom::after {
            bottom: var(--dynamic-bottom); /* Fija la sombra en la parte inferior */
            background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
            opacity: 1; /* Hace visible la sombra inferior */
        }

        .items {
            
            width: 100%;
            
            background-color: rgba(255, 255, 255, 0.877);
            padding: 0px;
            border-radius: 0px;
            position: relative;
            

            
            overflow-y: auto;
            box-shadow: none;

        }

        .items h2 {
            font-size: 20px;
            color: #201955;
            width: 100%;
            height: 70px;
            display: flex; /* Activar flexbox */
            justify-content: center; /* Centrar horizontalmente */
            align-items: center; /* Centrar verticalmente */
            
        }
        




        .item {
            
            border-radius: 10px;
            margin-bottom: 20px;
            margin-right: 5px ;
            margin-left: 5px;
            display: flex;
            flex-direction: column;
            height: 320px; /* Altura fija */
            overflow: hidden; /* Oculta cualquier contenido que exceda */
            background-color: white;
            border: 2px solid rgb(58,58,58);
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4), 0px 1px 3px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, margin 0.3s ease;
            
        }

        .item__header {
            background: linear-gradient(135deg, rgb(58, 58, 58) 0%, rgb(145, 145, 145) 100%); /* Fondo azul */
            color: white;
            padding: 6px; /* Ajustar padding para respetar altura */
            font-size: 13px; /* Tamaño más pequeño para caber en 20px */
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 30px; /* Altura fija */
            
        }

        .item__header[data-status="valido"] {
            background-color: #28a745; /* Verde */
            color: #fff; /* Texto blanco */
        }
        
        .item__header[data-status="invalido"] {
            background-color: #dc3545; /* Rojo */
            color: #fff; /* Texto blanco */
        }

        /* Aplica al segundo hijo */
        .item__header > *:nth-child(1) {
            margin-left: auto; /* Empuja el elemento hacia la derecha */
            
            margin-right: 6px;
        }
                    
        

        .item__header button {
            max-height: 25px;
            max-width: 25px;
            min-height: 25px;
        
            background-color: transparent; /* Fondo transparente por defecto */
            box-sizing: border-box;
        
            /* Propiedades para centrar el contenido */
            display: flex;
            justify-content: center; /* Centra horizontalmente */
            align-items: center; /* Centra verticalmente */
            line-height: 0px;
            color: white; /* Color del texto */
            font-size: 14px; /* Tamaño de la fuente */
            
            font-weight: bold; /* Texto en negrita */
            border: none; /* Sin borde */
            border-radius: 5px; /* Forma redondeada opcional */
            cursor: pointer; /* Cursor de mano */
            transition: background-color 0.3s ease; /* Suaviza el cambio de color */
        }
        
        /* Estilo al pasar el cursor por encima */
        .item__header button:hover {
            background-color: red; /* Fondo rojo al pasar el cursor */
        }

        .item__body {
            display: grid;
            grid-template-areas:
                "row1 row2 images calculations calculations"
                "row1 row2 images matrix summary"
                "row1 row2 images matrix summary"
                "row1 row2 images matrix actions";
            grid-template-columns: 1.5fr 1.3fr 1fr 1.8fr 1fr;
            grid-template-rows: 1fr 1fr 1fr 1fr; /* Cada fila ocupa un cuarto del espacio */
            gap: 10px;
            padding: 10px;
            background-color: #ffffff;
            height: 100%; /* Utiliza toda la altura disponible del contenedor `.item` */
            box-sizing: border-box;
            overflow: hidden; /* Evita que el contenido desborde */
        }

        .item__field label {
            font-size: 10px;
        }

        .item__row {
            grid-area: row1;
            display: grid;
            grid-template-rows: 2fr 1fr 1fr 1.5fr; /* La primera fila ocupa 2 partes, la segunda 1 parte, la tercera 3 partes */
            gap: 5px;
            height: 100%;
            overflow-y: auto;
        }



        .item__textarea,
        .item__input {
            resize: none; /* Deshabilita el redimensionamiento manual */
            flex-grow: 1; /* Permite que crezcan para llenar el espacio disponible */
            flex-shrink: 1; /* Permite que se reduzcan si hay poco espacio */
            min-height: 30px; /* Altura mínima para accesibilidad */
            max-height: 100%; /* Resta el espacio del gap (ajústalo según el diseño) */
            padding: 3px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 10px;
            box-sizing: border-box; /* Incluye padding y border en el cálculo de dimensiones */
            overflow: hidden; /* Asegura que el contenido no desborde */
            overflow-y: auto;
            scroll-behavior: smooth;
        }

        .item_row2 {
            grid-area: row2;
            display: flex;
            flex-direction: column;
            gap: 10px;
            height: 100%; /* Ocupa todo el espacio asignado */
            overflow-y: auto; /* Scroll si el contenido excede */
        }

        .item__controls {
            display: flex; /* Habilita flexbox */
            justify-content: space-between; /* Coloca el `label` a la izquierda y los botones a la derecha */
            align-items: center; /* Alinea los elementos verticalmente */
            gap: 3px; /* Espaciado entre los elementos */
        }

        .item__controls > :first-child {
            flex: 1; /* El primer hijo toma todo el espacio disponible */
        }




        .item__controls .item__button {
            max-width: 40px; /* Ancho específico para los botones */
            height: 15px; /* Altura específica para los botones */
            font-size: 10px; /* Tamaño del texto */
            padding: 0; /* Elimina padding adicional */
            border: none; /* Sin bordes */
            border-radius: 5px; /* Bordes redondeados */
            background-color: rgb(103, 110, 173); /* Fondo del botón */
            color: white; /* Texto blanco */
            cursor: pointer; /* Cambia el cursor al pasar por encima */
            text-align: center; /* Alinea el texto horizontalmente */

        }

        /* ---------> IMAGENES */

        .item__images {
            grid-area: images;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1px;
            /* background-color: #a7a7a7; */
            padding: 0px;
            border-radius: 5px;
            height: 100%; /* Ocupa el 100% del contenedor */
            flex-grow: 1; /* Permite que el contenedor crezca en proporción al espacio disponible */
            max-width: 120px ;
        }

        .item__image-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* justify-content: space-between; Mantén separación entre imagen y botones */
            
            width: 100%;
            height: 100%; /* Ajusta la altura para ocupar todo el espacio disponible */
            background-color: #ffffff;
            border: 1px solid #ffffff;
            border-radius: 5px;
            overflow: hidden;
            position: relative;
            gap: 2px;
        }

        .item__image-box:nth-child(2) {
            display: flex;
            flex-direction: column;
            justify-content: flex-end; /* Ubica los elementos al final */
        }

        .item__image {
            width: 110px;
            object-fit: cover;
            aspect-ratio: 1 / 1; /* Mantén la proporción cuadrada */
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.08); /* Sombra sutil */
            border: 1px solid #ddd; /* Línea sutil alrededor de la imagen */
            border-radius: 0px; /* Bordes redondeados */
            background-color: white; /* Fondo blanco */
        }



        .item__actions-buttons--images {
            display: flex;
            justify-content: space-around; /* Distribuye uniformemente los botones */
            gap: 2px;
            margin: 3px;
            

            
            height: auto; /* Permite ajustar la altura dinámicamente */
            flex-wrap: nowrap; /* Evita que los botones se alineen verticalmente */
            position: relative; /* Asegura que los botones permanezcan dentro del contenedor */
            align-items: center; /* Asegura que los botones se alineen verticalmente */
        }
        .item__actions-buttons--images button {
            height: 10px; /* Altura fija del botón */
            
            
            font-size: 8px; /* Ajusta el tamaño del texto */
            background-color: rgb(103, 110, 173);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: flex;
            align-items: center; /* Asegura la alineación vertical */
            justify-content: center; /* Centra el texto horizontalmente */
            z-index: 10;
            
            
        }



        /* ------> CALCULOS */


        .item__calculations {
            grid-area: calculations;
            display: flex;
            
            background-color: #ffffff;
            border-radius: 5px;
            align-items: center; /* Centra los elementos verticalmente */
            justify-content: space-between; /* Ajusta para que los elementos usen todo el espacio horizontal */
            width: 100%;
            gap: 4px;
        }

        

        .item__calculations input {
            width: 100%; /* Ajusta el ancho del input al 100% del contenedor */
            
            font-size: 12px; /* Tamaño de texto ajustado */
            font-weight: 700;
            border: 1px solid #ccc; /* Bordes consistentes */
            border-radius: 4px; /* Bordes redondeados */
            box-sizing: border-box; /* Incluye padding y bordes en el ancho total */
            text-align: right;
            
        }



        .item__field {
            flex: 1; /* Ajusta dinámicamente el ancho de cada campo */
            display: flex;
            flex-direction: column;
            gap: 5px;
        }



        .item__field--quantity {
            flex: 0.7; /* El campo de cantidad ocupa el 70% del ancho de los demás */
        }

        .item__matrix {
            grid-area: matrix;
            
            border-radius: 5px;
            
            height: 100%;
            
        }

        [class^="item__table"] {
            width: 100%;
            border-collapse: collapse;
            font-size: 9px; /* Fuente reducida */
            text-align: right; /* Valores alineados a la derecha */
            border-radius: 7px;
            background-color: rgb(255, 255, 255);
            box-shadow: 2px 2px 2px 2px rgba(80, 80, 80, 0.2);
            width: 100%;
            display: flex;
            flex-direction: column;
            height: 100%;
            
            
            
        }

        [class^="item__table"] thead {
            background-color: red;
        }

        [class^="item__table"] thead tr,
        [class^="item__table"] tbody tr {
            display: flex; /* Convierte las filas en contenedores flexibles */
            flex-direction: row; /* Asegura que el contenido se disponga horizontalmente */
        }

        [class^="item__table"] tbody tr {
            flex: 1;
        }


        [class^="item__table"] thead {
            display: table-row-group; /* Mantiene el comportamiento del encabezado */
        }



        [class^="item__table"] thead th {
            text-align: right; /* Títulos centrados */
            font-weight: bold; /* Negritas */
            
            padding: 2px 5px;
            width: 100%;
            

            background: linear-gradient(135deg, rgb(121, 121, 121) 0%, rgb(172, 172, 172) 100%);

            color: white;
            

            /* margin-top: 2px; */
        }

        [class^="item__table"] tbody {
            display: flex; /* Flex para permitir distribución proporcional */
            flex-direction: column; /* Las filas son columnas del flexbox */
            flex: 1; /* Asegura que el cuerpo crezca proporcionalmente */
            width: 100%; /* Asegura que el tbody ocupe todo el ancho */
        }

        [class^="item__table"] tbody {
            display: flex; /* Flex para permitir distribución proporcional */
            flex-direction: column; /* Las filas son columnas del flexbox */
            flex: 1; /* Asegura que el cuerpo crezca proporcionalmente */
            width: 100%; /* Asegura que el tbody ocupe todo el ancho */
        }

        [class^="item__table"] tbody td {
            

            padding: 0 5px;

        }

                /* Escala de colores para % Utilidad */






        /* Estilos generales para todas las tablas de utilidad */
        .item__matrix table tbody tr {
            font-weight: normal; /* Estilo base */
            font-size: 11px;
            background: rgb(255, 255, 255);
            
            
            
        }

        /* General: Alinear los encabezados (th) y filas (td) */
        .item__matrix table th,
        .item__matrix table td {
            text-align: center; /* Centra el contenido horizontalmente */
            vertical-align: middle; /* Centra el contenido verticalmente */
        }

        /* Asegurar uniformidad en el ancho de las columnas */
        .item__matrix table th:nth-child(1),
        .item__matrix table td:nth-child(1) {
            width: 20%; /* Ajusta este porcentaje según el diseño */
            text-align: right;
        }

        .item__matrix table th:nth-child(2),
        .item__matrix table td:nth-child(2) {
            width: 40%; /* Ajusta este porcentaje según el diseño */
            text-align: right;
        }

        .item__matrix table th:nth-child(3),
        .item__matrix table td:nth-child(3) {
            width: 40%; /* Ajusta este porcentaje según el diseño */
            text-align: right;
        }

        /* ----------- Primera columna: % Ut. ----------- */
        /* Estilo de porcentajes en la tabla de cálculos */
        .item__matrix table tbody tr:nth-child(1) td:nth-child(1) { /* 145% */
            font-weight: 900;
            color: rgb(10, 236, 161);
        }
        .item__matrix table tbody tr:nth-child(2) td:nth-child(1) { /* 130% */
            font-weight: 900;
            color: rgb(9, 245, 135);
        }
        .item__matrix table tbody tr:nth-child(3) td:nth-child(1) { /* 115% */
            font-weight: 900;
            color: rgb(14, 240, 9);
        }
        .item__matrix table tbody tr:nth-child(4) td:nth-child(1) { /* 100% */
            font-weight: 900;
            color: rgb(3, 224, 1);
        }
        .item__matrix table tbody tr:nth-child(5) td:nth-child(1) { /* 85% */
            font-weight: 900;
            color: rgb(47, 204, 61);
        }
        .item__matrix table tbody tr:nth-child(6) td:nth-child(1) { /* 70% */
            font-weight: 900;
            color: rgb(81, 177, 97);
        }
        .item__matrix table tbody tr:nth-child(7) td:nth-child(1) { /* 55% */
            font-weight: 900;
            color: rgb(151, 175, 68);
        }
        .item__matrix table tbody tr:nth-child(8) td:nth-child(1) { /* 40% */
            font-weight: 900;
            color: rgb(171, 167, 54);
        }
        .item__matrix table tbody tr:nth-child(9) td:nth-child(1) { /* 25% */
            font-weight: 900;
            color: rgb(167, 104, 56);
        }
        .item__matrix table tbody tr:nth-child(10) td:nth-child(1) { /* 10% */
            font-weight: 900;
            color: rgb(158, 70, 60);
        }
        .item__matrix table tbody tr:nth-child(11) td:nth-child(1) { /* 0% */
            font-weight: 900;
            color: rgb(122, 37, 37);
        }

        
        /* ----------- Segunda columna: Precio Venta ----------- */
        .item__matrix table tbody tr:nth-child(1) td:nth-child(2) { /* 145% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }
        .item__matrix table tbody tr:nth-child(2) td:nth-child(2) { /* 130% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }
        .item__matrix table tbody tr:nth-child(3) td:nth-child(2) { /* 115% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }
        .item__matrix table tbody tr:nth-child(4) td:nth-child(2) { /* 100% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }
        .item__matrix table tbody tr:nth-child(5) td:nth-child(2) { /* 85% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }
        .item__matrix table tbody tr:nth-child(6) td:nth-child(2) { /* 70% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }
        .item__matrix table tbody tr:nth-child(7) td:nth-child(2) { /* 55% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }
        .item__matrix table tbody tr:nth-child(8) td:nth-child(2) { /* 40% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }
        .item__matrix table tbody tr:nth-child(9) td:nth-child(2) { /* 25% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }
        .item__matrix table tbody tr:nth-child(10) td:nth-child(2) { /* 10% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }
        .item__matrix table tbody tr:nth-child(11) td:nth-child(2) { /* 0% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }

        /* ----------- Tercera columna: Utilidad ----------- */
        .item__matrix table tbody tr:nth-child(1) td:nth-child(3) { /* 145% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }
        .item__matrix table tbody tr:nth-child(2) td:nth-child(3) { /* 130% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }
        .item__matrix table tbody tr:nth-child(3) td:nth-child(3) { /* 115% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }
        .item__matrix table tbody tr:nth-child(4) td:nth-child(3) { /* 100% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }
        .item__matrix table tbody tr:nth-child(5) td:nth-child(3) { /* 85% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }
        .item__matrix table tbody tr:nth-child(6) td:nth-child(3) { /* 70% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }
        .item__matrix table tbody tr:nth-child(7) td:nth-child(3) { /* 55% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }
        .item__matrix table tbody tr:nth-child(8) td:nth-child(3) { /* 40% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }
        .item__matrix table tbody tr:nth-child(9) td:nth-child(3) { /* 25% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }
        .item__matrix table tbody tr:nth-child(10) td:nth-child(3) { /* 10% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }
        .item__matrix table tbody tr:nth-child(11) td:nth-child(3) { /* 0% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }

        /* General: Bloque de resumen */
        .item__summary {
            grid-area: summary;
            background-color: #ffffff;
            padding: 3px;
            border-radius: 5px;
            
            display: flex;
            flex-direction: column;
            height: 145px;
            
            
        }


        .item__summary p {
            font-size: 11px;
            display: flex;
            flex-direction: column; 
            margin-bottom: 4px;
            
               
        }

        .item__summary p:nth-child(3) {
            margin-top: 4px;
            font-size: 10px;
            align-items: flex-end;
            margin-bottom: 3px;
  
        }
        

        .item__summary p:nth-child(4) {
            margin-top: 3px;
            font-size: 10px;
            align-items: flex-end;
            margin-bottom: 3px;
  
        }

        .item__summary p:nth-child(5) {
            font-size: 10px;
            align-items: flex-end;

        }



        /* Primer grupo: Total Venta y Total Costos */
        .item__summary p:nth-child(1) span {
            font-size: 14px;
            font-weight: 700;
            color: #7a7a7a; /* Azul */
            line-height: 8px;
        }

        .item__summary p:nth-child(2) span {
            font-size: 14px;
            font-weight: 700;
            color: #7a7a7a; /* Azul */
            line-height: 8px;
        }
        .item__summary p:nth-child(3) span {
            font-size: 15px;
            font-weight: 800;
            color: #7a7a7a; /* Azul */
            line-height: 8px;
            text-align: right;
        }




 
        .item__summary p:nth-child(4) span {
            font-size: 14px;
            font-weight: 800;
            color: #7a7a7a; /* Azul */
            line-height: 9px;
            text-align: right; /* Alinea a la derecha */
            display: block; /* Necesario para que el text-align funcione */
        }


        /* Segundo grupo: % Utilidad */
        .item__summary p:nth-child(5) span  {
            
            text-align: right; /* Alinea a la derecha */
            display: block; /* Necesario para que el text-align funcione */
            line-height: 20px;
            text-shadow: -1px 1px 1px rgba(3, 3, 0, 0.377);
            opacity: 0.8;
            font-size: 16px;
            color: #7a7a7a;
        }


                /* Estilo base para el span */
        .item__summary [id*="porcentaje-utilidad-total"] {
            font-size: 16px; /* Tamaño base */
            font-weight: bold;
            transition: color 0.3s ease, font-size 0.3s ease; /* Transición suave para color y tamaño */
        }


        [data-utilidad="sin_calculo"] {
            color: #585858; /* Gris para indicar estado neutral */
            font-size: 16px;
            font-weight: normal;
        }


        /* Escala de colores dinámica basada en aproximaciones */
        [id*="porcentaje-utilidad-total"] {
            font-size: 18px;
        }


        /* Color base para el porcentaje de utilidad */
        [data-utilidad] .porcentaje-utilidad-total {
            font-size: 14px; /* Tamaño base */
            color: #000; /* Color base */
        }

 

        .item__actions {
            grid-area: actions;
            display: grid; /* Usamos grid para una disposición en filas */
            grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
            grid-template-rows: auto auto; /* Dos filas automáticas */
            gap: 2px;
            background-color: #ffffff;
            border-radius: 5px;
            
            height: 35px;
            margin-top: 13px;
        }
        
        .item__actions button {
            display: flex; /* Convierte el botón en un contenedor flex */
            align-items: center; /* Alinea verticalmente al centro */
            justify-content: center; /* Alinea horizontalmente al centro */
            color: white;
            border: none;
            padding: 8px;
            cursor: pointer;
            border-radius: 5px;
            font-size: 10px;
            text-align: center; /* Asegura que el texto esté centrado */
            width: 100%; /* Ocupa toda la celda */
            height: 14px; /* Permite altura dinámica si el texto cambia */
        }
        
        /* Opcional: Estilo adicional para botones específicos */
        .item__actions .item__button--copy {
            background-color: rgb(103, 110, 173); 
        }
        
        .item__actions .item__button--copy:hover {
            background-color: rgb(219, 153, 54); 
        }

        .item__actions .item__button--paste {
            background-color: rgb(103, 110, 173); 
        }

        .item__actions .item__button--paste:hover {
            background-color: rgb(219, 153, 54); 
        }
        
        .item__actions .item__button--clear {
            background-color: rgb(103, 110, 173); 
        }
        
        .item__actions .item__button--save {
            background-color: rgb(103, 110, 173);
        }





        .item__button {
            flex: 1; /* Ajusta los botones para distribuir uniformemente el ancho */
            padding: 8px;
            background-color: rgb(103, 110, 173);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }



        .item__button:hover {
            background-color: rgba(21, 96, 172, 0.8);
        }
        .item__button:hover {
            background-color: rgba(66, 97, 128, 0.8);
        }

        .item__button--delete {
            background-color: rgba(255, 69, 0, 0.6);
        }

        .item__button--delete:hover {
            background-color: rgb(146, 74, 47);
        }

        .item__button--clear {
            background-color: rgb(100, 100, 100);
        }

        .item__button--clear:hover {
            background-color: rgba(105, 105, 105, 0.8);
        }

        .item__button--save {
            background-color: rgb(49, 134, 49);
        }

        .item__button--save:hover {
            background-color: rgba(66, 165, 66, 0.8);
        }

        .item__button--anadir_item {
            /* Estilos específicos para este botón */
            background-color: rgb(56, 58, 168);
            color: white;
            font-size: 12px;
            font-weight: bold;
            padding: 10px;
            margin-right: 7px;
            border-radius: 5px;
            z-index: 0;
            
            text-align: right;
        }


/* Estilos base: resolución mínima (1280x720) */
/* body {
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.contenedor {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
}

.menu__actions button {
    font-size: 14px;
    padding: 8px 16px;


} */

/* CARGAR COTIZACIONES TEMPLATE------------------------------------------------------------------------------------------------------------------------------------------------------- */




        .cargar_cotizaciones_container {
        display: grid;
        grid-template-areas:
            "principal visual visual"
            "principal visual visual"
            "principal visual visual"
            "principal resumen resumen";
        grid-template-columns: 1fr 1fr 1fr;   /* tres columnas */
        grid-template-rows: 1fr 1fr 1fr 1fr;  /* cuatro filas proporcionales */
        gap: 20px;
        height: 100vh;  /* ocupa todo el alto de la ventana */
        width: 100vw;  /* ocupa todo el alto de la ventana */
        overflow: hidden; /* evita doble scroll en el contenedor */
        box-sizing: border-box;
        padding: 10px;
        }

        .cargar_cotizaciones_principal {
        grid-area: principal;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        background: #f9f9f9;
        height: 100%;
        display: flex;
        flex-direction: column; /* apila hijos en columna */
        }

        .cargar_cotizaciones_ventana_progreso {
        flex: 1;                /* ocupa todo el espacio sobrante */
        display: flex;
        flex-direction: column; /* permite crecer a la lista */
        min-height: 0;          /* 👈 evita que colapse el flex */
        }

        .cargar_cotizaciones_lista_archivos {
        flex: 1;               /* se expande dentro de ventana_progreso */
        overflow-y: auto;      /* scroll interno */
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        background: #fafafa;
        min-height: 0;         /* 👈 importante para que el scroll funcione */
        }

        .cargar_cotizaciones_ventana_progreso_botones {
        display: flex;
        justify-content: space-between; /* separa izq-der */
        align-items: center;            /* centra verticalmente */
        gap: 10px;                      /* espacio opcional */
        margin-top: 10px;
        }

        .cargar_cotizaciones_ventana_progreso_botones p {
        margin: 0;  /* quita el margen por defecto del <p> */
        }

        .cargar_cotizaciones_ventana_progreso_botones button {
        padding: 6px 12px;
        border: none;
        border-radius: 6px;
        background-color: #3b82f6;
        color: #fff;
        font-weight: 500;
        cursor: pointer;
        }

        .cargar_cotizaciones_ventana_progreso_botones button:hover {
        background-color: #2563eb; /* azul más oscuro al pasar el mouse */
        }

        .cargar_cotizaciones_visualizacion {
        grid-area: visual;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 15px;
        background: #fff;
        overflow-y: auto;   /* scroll interno */
        }



        .cargar_cotizacion_resumen {
        grid-area: resumen;
        border: 1px solid #bbb;
        border-radius: 8px;
        padding: 20px;
        background: #f1f1f1;
        overflow-y: auto;   /* scroll interno */
        }


/* BUSCAR COTIZACIONEEEEEEEES */

/* CONTENEDOR del buscador: usa el nombre EXACTO del HTML */
        .bucar_cotizaciones_container {
        /* ocupa todo el espacio restante bajo el header */
        flex: 1 1 auto;
        min-height: 0;            /* clave para permitir scroll interno */
        
        display: grid;
        grid-template-columns: 600px 1fr;        /* filtros | resultados */
        grid-template-areas: "filtros resultados";
        gap: 1rem;

        /* padding lateral e inferior de 50px, superior 1rem */
        padding: 1rem 50px 50px 50px;
        box-sizing: border-box;

        width: 100%;
        background: #ffffff;         /* cámbialo si quieres ver el área */
        overflow: hidden;         /* que no aparezca doble scroll */
 
        }

        /* =========================
        FILTROS (columna completa)
        ========================= */
        .filtros_container {
        width: 100%;
        border: 3px solid #1976d2;
        border-radius: 8px;
        padding: 16px;
        box-sizing: border-box;
        background: #fff;
        display: block;
        min-height: 0; /* habilita scroll interno si hace falta */
        }

        .filtros_container > h3 {
        margin: 0 0 12px 0;
        font-size: 22px;
        color: #0d47a1;
        }

        /* Dos columnas: izquierda regiones (1/3), derecha filtros (2/3) */
        .grupo_filtros {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 16px;
        width: 100%;
        min-height: 0; /* importantísimo para que sus hijos puedan scrollear */
        }

        /* ================
        COLUMNA IZQUIERDA
        ================ */
        .selector-regiones {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-height: 0;
        border-radius: 10px;
        border: 1px solid #e5e7eb;
        background: #fafafa;
        padding: 12px;
        box-sizing: border-box;
        }

        .selector-regiones h3 {
        margin: 0;
        font-size: 20px;
        color: #0d47a1;
        }

        .fallback-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        overflow: auto;
        min-height: 0;
        max-height: 52vh; /* ajusta si quieres más/menos alto */
        padding-right: 4px; /* respiro para el scroll */
        }

        .fallback-grid label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        }

        .selector-controles {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        }

        .selector-controles button {
        border: 0;
        border-radius: 8px;
        padding: 10px 12px;
        font-weight: 600;
        cursor: pointer;
        transition: transform .05s ease, background .15s ease;
        background: #e3f2fd;
        color: #0d47a1;
        }

        .selector-controles button:hover { background: #bbdefb; }
        .selector-controles button:active { transform: translateY(1px); }

        /* ===============
        COLUMNA DERECHA
        =============== */
        .lista_filtros {
        display: flex;
        flex-direction: column;
        min-height: 0;           /* habilita scroll en hijos */
        line-height: 12px;
        }

        /* Card genérico de filtro */
        .filtro-card {
        width: 100%;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #ffffff;
        padding: 8px;
        box-sizing: border-box;
        margin-bottom: 12px;
        }

        /* “Buscar” fijo arriba */
        .filtro-card.is-sticky {
        position: sticky;
        top: 0;                 /* pegado al top del contenedor de filtros */
        z-index: 5;
        background: #ffffffcc;  /* leve transparencia para separar del scroll */
        backdrop-filter: blur(2px);
        }

        /* Título de cada tarjeta */
        .filtro-header {
        margin-bottom: 10px;
        }
        .filtro-header h4 {
        margin: 0;
        font-size: 16px;
        color: #0d47a1;
        }

        /* Contenedor que scrollea (todo menos el sticky) */
        .filtros_scroll {
        overflow: auto;
        min-height: 0;
        /* Alto objetivo: ocupa la mayor parte disponible de la columna derecha */
        max-height: 62vh; /* ajusta según tu layout */
        padding-right: 4px;
        }

        /* Filas (inputs + botones) */
        .filtro-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: center;
        }

        /* Variante de 2 columnas iguales (presupuesto) */
        .filtro-row.two {
        grid-template-columns: 1fr 1fr;
        }

        /* Grupos de inputs con label arriba */
        .input-group {
        display: grid;
        grid-template-rows: auto 1fr;
        gap: 6px;
        }
        .input-group label {
        font-size: 12px;
        color: #555;
        }

        /* Inputs y botones */
        .filtro-row input[type="text"],
        .filtro-row input[type="search"],
        .filtro-row input[type="number"] {
        width: 100%;
        padding: 10px 12px;
        border-radius: 8px;
        border: 1px solid #d1d5db;
        background: #fff;
        font-size: 14px;
        box-sizing: border-box;
        }

        .filtro-row button,
        .categorias-actions button,
        .grupo_botones_filtros button {
        border: 0;
        border-radius: 8px;
        padding: 10px 14px;
        font-weight: 700;
        cursor: pointer;
        transition: transform .05s ease, background .15s ease, color .15s ease;
        background: #e3f2fd;
        color: #0d47a1;
        white-space: nowrap;
        }
        .filtro-row button:hover,
        .categorias-actions button:hover,
        .grupo_botones_filtros button:hover { background: #bbdefb; }
        .filtro-row button:active,
        .categorias-actions button:active,
        .grupo_botones_filtros button:active { transform: translateY(1px); }

        /* Botón primario */
        button.primary {
        background: #1976d2;
        color: #fff;
        }
        button.primary:hover { background: #1565c0; }

        /* Chips (palabras, entidades) */
        .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
        }
        .chips .chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        background: #e8f0fe;
        color: #0d47a1;
        border-radius: 999px;
        font-size: 13px;
        border: 1px solid #cfe3ff;
        }
        .chips .chip button {
        background: transparent;
        color: #0d47a1;
        padding: 0 6px;
        border: 0;
        border-radius: 999px;
        font-weight: 800;
        cursor: pointer;
        }
        .chips .chip button:hover {
        background: #cfe3ff;
        }

        /* Checkboxes de categorías */
        .check-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px 12px;
        }
        .check-grid label {
        display: flex;
        align-items: center;
        gap: 8px;
        line-height: 12px;
        font-size: 12px;
        }

        /* Acciones de categorías (seleccionar todas / limpiar) */
        .categorias-actions {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        margin-top: 12px;
        }

        /* Botonera final debajo de todo */
        .grupo_botones_filtros {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 14px;
        }
        .grupo_botones_filtros button:nth-child(2) {
        background: #1976d2;
        color: #fff;
        }
        .grupo_botones_filtros button:nth-child(2):hover {
        background: #1565c0;
        }




        .grupo_botones_filtros {
        display: flex;
        gap: 10px;               /* separación entre botones */
        margin-top: 1rem;        /* pequeño espacio respecto a los filtros */
        width: 100%; 
        margin: 15px 0px 15px 0px;            /* ocupar ancho completo */
        }

        .grupo_botones_filtros button {
        flex: 1;                 /* cada botón crece proporcionalmente */
        padding: 10px 15px;
        border: none;
        border-radius: 5px;
        background-color: #007bff; /* azul */
        color: white;              /* texto blanco */
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s ease;
        margin: 0px 5px 0px 5px;
        }

        .grupo_botones_filtros button:hover {
        background-color: #0056b3; /* azul más oscuro al pasar el mouse */
        }


        /* ==================== ESTILOS RESULTADOS ==================== */

        /* El bloque de resultados ocupa el alto visible sin salirse del viewport */
        .resultados_container{
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: calc(100vh - var(--app-header-h) - 24px); /* 24px de respiro */
        overflow: hidden;  /* <- clave: nada sale del contenedor */
        }

        /* Encabezado principal */
        .resultados_container > h3 {
        font-size: 20px;
        font-weight: 700;
        margin: 0;
        color: #111827;
        }

        /* ====== Grupos de búsqueda ====== */
        .grupo_de_busqueda_1 {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        }

        .grupo_de_busqueda_1 .metric {
        flex: 1 1 200px;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.04);
        display: flex;
        flex-direction: column;
        justify-content: center;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        }

        .grupo_de_busqueda_1 .metric:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.08);
        }

        .grupo_de_busqueda_1 .metric h5 {
        margin: 0 0 6px;
        font-size: 14px;
        font-weight: 600;
        color: #6b7280; /* gris medio */
        }

        .grupo_de_busqueda_1 .metric p {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: #111827;
        }

        /* ====== Resultados (contenedor) ====== */
        .resultados_de_busqueda {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        }

        /* Barra superior */
        .results-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        border-bottom: 1px solid #f3f4f6;
        background: #f9fafb;
        }

        .results-count {
        font-size: 14px;
        color: #374151;
        }

        .pager {
        display: flex;
        align-items: center;
        gap: 8px;
        }

        .pager button {
        border: 1px solid #d1d5db;
        background: #fff;
        padding: 6px 10px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 13px;
        transition: background 0.2s;
        }

        .pager button:hover:not([disabled]) {
        background: #f3f4f6;
        }

        .pager button[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
        }

        .page-info {
        font-size: 13px;
        color: #6b7280;
        }

        /* ====== Tabla ====== */
        /* Contenedor con scroll vertical para la tabla */
        .tabla_container{
        min-height: 0;         /* <- IMPORTANTÍSIMO en layouts con grid/flex */
        overflow-y: auto;      /* el scroll es interno a la tarjeta, no a la página */
        max-height: 100%;      /* nunca supera el alto del card */
        padding-bottom: 8px;   /* que no “toque” el borde inferior visualmente */
        scrollbar-gutter: stable both-edges; /* evita saltos de layout al aparecer scroll */
        }

        /* Encabezado pegado al tope mientras scrolleas */
        .tabla-resultados thead th{
        position: sticky;
        top: 0;
        background: #fafafa;
        z-index: 1;
        }



        .tabla-resultados thead th {
        background: #f9fafb;
        font-size: 13px;
        font-weight: 600;
        color: #374151;
        text-align: left;
        padding: 12px;
        border-bottom: 1px solid #e5e7eb;
        cursor: pointer;
        white-space: nowrap;
        }

        .tabla-resultados thead th:hover {
        background: #f3f4f6;
        }

        .tabla-resultados tbody td {
        padding: 12px;
        border-bottom: 1px solid #f3f4f6;
        vertical-align: middle;
        color: #111827;
        line-height: 1rem;
        }

        .tabla-resultados tbody tr:hover {
        background: #f9fafb;
        }

        /* Ocultar columnas: 1 = ID Pub, 7 = Publicación, 11 = Subcategoría (si existe) */
        /* .tabla-resultados th:nth-child(1),
        .tabla-resultados td:nth-child(1),
        .tabla-resultados th:nth-child(8),
        .tabla-resultados td:nth-child(8),
        .tabla-resultados th:nth-child(12),
        .tabla-resultados td:nth-child(12) {
        display: none;
        } */

        /* Botón de copiar código en la tabla */
        .btn-copy-id{
        margin-left: 6px;
        border: 0;
        background: transparent;
        cursor: pointer;
        opacity: .6;
        vertical-align: middle;
        padding: 0;
        }
        .btn-copy-id:hover{ opacity: 1; }
        .btn-copy-id img{ display: inline-block; width: 14px; height: 14px; }

        /* Feedback visual breve tras copiar */
        .btn-copy-id.ok{
        filter: hue-rotate(90deg);
        opacity: 1;
        }

        /* ====== Estados especiales ====== */
        tr.is-soon {
        background: #fff7ed; /* naranja claro */
        }

        tr.is-urgent {
        background: #fef2f2; /* rojo claro */
        }

        /* ====== Badges (estados de publicaciones) ====== */
        .badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        }

        .badge.ok {
        background: #ecfdf5;
        color: #047857;
        }

        .badge.warn {
        background: #fffbeb;
        color: #b45309;
        }

        .badge.danger {
        background: #fef2f2;
        color: #b91c1c;
        }

        .badge.neutral {
        background: #f3f4f6;
        color: #374151;
        }

        /* ====== Acciones de fila ====== */
        .row-actions {
        display: flex;
        gap: 6px;
        }

        .row-actions a,
        .row-actions button {
        border: 1px solid #e5e7eb;
        background: #fff;
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 12px;
        cursor: pointer;
        text-decoration: none;
        color: #111827;
        transition: background 0.2s;
        }

        .row-actions a:hover,
        .row-actions button:hover {
        background: #24375e;
        }

        /* ====== Responsive ====== */
        @media (max-width: 800px) {
        .grupo_de_busqueda_1 {
            flex-direction: column;
        }
        
        .tabla-resultados th,
        .tabla-resultados td {
            font-size: 12px;
            padding: 8px;
        }
        }
                






/* Media Query: Full HD (1920x1080) */
@media screen and (min-width: 1300px) and (max-width: 2520px) {

    .header {
        width: 100%;
        max-height: 100px;
    }

    .header__button {

        height: 35px;
        margin-top: 7px;
        margin-bottom: 7px;
    }

    .header__nombreusuario {
        margin-top: 8px;
        
        box-sizing: border-box;
        display: flex; /* Activar flexbox */
        flex-direction: column; /* Colocar los textos uno debajo del otro */
        justify-content: center; /* Centrar contenido verticalmente */
        align-items: flex-start; /* Alinear contenido a la izquierda */
        text-align: left; /* Alinear texto al inicio */
        padding-left: 10px; /* Añadir espacio desde el borde izquierdo */
        padding-right: 10px; /* Añadir espacio desde el borde izquierdo */
        
    }

    p {
        font-family: 'Geist', Arial, sans-serif;
        font-weight: 300; /* Light */
        font-size: 14px; /* Igual al tamaño base */
        
        
    }

    .login-form__field input {
        font-size: 20px;
        letter-spacing: 1px;
        font-weight: 500;
    }

    .login-form__field input[type="password"] {
        font-size: 20px; /* Ajusta el tamaño de la fuente */
        letter-spacing: 1px; /* Opcional: Espaciado entre caracteres */
        font-weight: 500;
    }


    .main-container {
        padding-left: 30px;
        padding-right: 30px;
    }

    /* Estilo para los hijos */
    .main-container > :nth-child(1) {
            flex: 5; /* 70% */
            
            /* max-width: 600px; */
            
    }

    .main-container > :nth-child(2) {
            flex: 15; 
            
    }


    .menu__header {
        background: linear-gradient(135deg, rgba(10, 12, 99, 1) 0%, rgb(54, 57, 211) 100%);
        color: white;
        padding: 5px; /* Ajustar padding para respetar altura */
        font-size: 18px; /* Tamaño más pequeño para caber en 20px */
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px; /* Altura fija */

    }

    .menu__body {
        flex: 1; /* Hace que el cuerpo ocupe todo el espacio restante */
        overflow-y: auto; /* Agrega desplazamiento si el contenido excede la altura */
        padding: 9px;
        display: flex;
        flex-direction: column; /* Organiza sus elementos internamente */
        gap: 5px; /* Espaciado interno entre los elementos */
        background-color: #ffffff;
    }


    .menu__messages {
        width: 100%;
        height: 60px;
        background-color: #d4d4d4c0;
        align-content: center;
        
        
        padding: 4px;
        
        min-height: 40px;
        font-size: 13px;
        box-shadow: -1px 1px 1px rgba(83, 83, 83, 0.377);
        opacity: 0.6;
    }


    /* Formulario del Resumen */
    .menu__form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px; /* Reducir espacio entre campos */
    }




    .menu__ids {
        display: grid;
        grid-column: span 2; /* Controla la proporción de las columnas */
        gap: 5px; /* Espaciado entre las columnas */
        width: 100%; /* Asegura que ocupe todo el ancho disponible */
    }

    .menu__field:nth-child(1) {
        grid-column: 1; /* Asegura que el primer elemento esté en la primera columna */
        width: 180px;

    }

    .menu__field:nth-child(2) {
        grid-column: 2; /* Asegura que el segundo elemento esté en la segunda columna */
        
    }





    #id-doc {
        text-align: left; /* Asegura que el texto del select sea legible */
        direction: ltr; /* Mantén el orden del texto normal */
        padding: 0;
    }
    
    #id-doc option {
        text-align: left; /* Opcional: alinea el texto dentro de las opciones */
        
    }
    
    /* Modificar el contenedor del select desplegable */
    #id-doc {
        font-size: 15px;
    }


    
    .menu__field {
        display: flex;
        flex-direction: column;
        gap:0px;
        padding: 0
    }

    .menu__field label{
        font-size: 14px;
        line-height: 10 px;
    }

    .menu__field textarea {
        font-size: 15px;
        padding: 5px 5px 5px 5px;
    }

    .menu__field input {
        font-size: 15px;
        padding: 5px 5px 5px 5px;
    }



    .menu__field--with-button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        grid-column: span 2;
    }

    .menu__field--botones {
        grid-column: span 2;
        display: flex;
        flex-direction: row;
        gap: 5px;
        width: 100%;
        margin: 0; /* Elimina márgenes innecesarios */
        padding: 0; /* Elimina paddings innecesarios */
        justify-content: space-between; /* Asegura que los botones se distribuyan uniformemente */
    }

    .menu__field--botones button {
        flex: 1; /* Hace que los botones ocupen el mismo ancho dentro del contenedor */
        padding: 6px; /* Ajusta el relleno interno */
        margin: 0; /* Elimina márgenes en los botones */
        font-size: 15px; /* Tamaño del texto */
        background-color: rgb(103, 110, 173);
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        text-align: center;
        
    }




    .menu__button {
        
        background-color: rgb(103, 110, 173);
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        border-radius: 5px;
        font-size: 14px;
        min-height: 35px;
    }

    .menu__button:hover {
        background-color: rgba(21, 96, 172, 0.8);
    }

    /* Campos completos */
    .menu__field--full {
        grid-column: span 2;
    }

    .menu__field--full input {
        text-align: right;
    }
    .menu__textarea {
        resize: none;
    }

    /* Totales */
    .menu__totals {
        
        
        padding: 5px;
        
    }

   

    .menu__totals p {
        display: flex;
         
        font-size: 16px;
        line-height: 18px;
    }

    .menu__totals p:nth-child(1) {
        margin-bottom: 10px;
        font-size: 18px;

    }

    .menu__totals p:nth-child(2) {
        font-size: 15px;
        color: #3c6d46;
    }

    .menu__totals p:nth-child(3),
    .menu__totals p:nth-child(4) {
        font-size: 14px;

    }

    .menu__totals p:nth-child(3){
        color: #678d64;
    }

    .menu__totals p:nth-child(4) {
        margin-bottom: 7px;
        color: #696969;
    }


    .menu__totals p:nth-child(5) {
        font-size: 15px;
        color: #863838;

    }

    .menu__totals p:nth-child(6),
    .menu__totals p:nth-child(7) {
        font-size: 14px;

    }

    .menu__totals p:nth-child(6){
        color: #a75252;
    }

    .menu__totals p:nth-child(7) {
        margin-bottom: 7px;
        color:#c05656;

    }



    .menu__totals p:nth-child(8),
    .menu__totals p:nth-child(9),
    .menu__totals p:nth-child(10) {
        font-size: 15px;
        line-height: 18px;

    }

    .menu__totals p:nth-child(8) {
        color: #678d64;
    }

    .menu__totals p:nth-child(9) {
        font-size: 17px;
        color: #696969;
        margin-top: 3px;
        margin-bottom: 3px;
    }

    .menu__totals p:nth-child(10) {
        color: #696969;
    }




    .menu__value {
        font-weight: bold;
        text-align: right;
    }







    .menu__actualizacion {
        text-align: right; /* Alinea el texto a la derecha */
        position: relative; /* Posiciona el texto de forma relativa al contenedor padre */

        
        color: #666; /* Color informativo (opcional) */
        
    }

    .menu__actualizacion p{
        font-size: 12px;
        margin: 0;;
    }

    /* Botones de Acción */
    .menu__actions {
        display: flex;
        flex-direction: row; /* Asegura que los botones estén en fila */
        gap: 5px; /* Espaciado entre botones */
        justify-content: center; /* Alinea los botones horizontalmente al centro */
        align-items: center; /* Centra los botones verticalmente */
        width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
        position: absolute;
        bottom: 0; /* Lo fija al fondo */
        left: 0; /* Asegura que esté alineado al borde izquierdo */
        padding: 10px;
        
    }

    .menu__actions button {
        flex: 1; /* Asegura que los botones ocupen el mismo ancho */
        text-align: center; /* Centra el texto dentro del botón */
        width: 100%;
        font-size: 15px;
        height: 100%;
    }

    
    .menu__button--save {
        background-color: rgb(75, 114, 75);
        color: white;
    }



    .menu__button--pdf {
        background-color: rgb(187, 64, 64);
        color: white;
    }

    .menu__button--register {
        background-color: rgb(56, 58, 168);
        color: white;
    }


    
    .item {
            
        border-radius: 13px;
        margin-bottom: 20px;
        margin-right: 35px ;
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        height: 380px; /* Altura fija */
        overflow: hidden; /* Oculta cualquier contenido que exceda */
        background-color: white;
        border: 2px solid rgb(58,58,58);
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4), 0px 1px 3px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s ease, margin 0.3s ease;
        
    }

    .item__header {
        background: linear-gradient(135deg, rgb(58, 58, 58) 0%, rgb(145, 145, 145) 100%); /* Fondo azul */
        color: white;
        padding: 6px; /* Ajustar padding para respetar altura */
        font-size: 15px; /* Tamaño más pequeño para caber en 20px */
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 38px; /* Altura fija */
        
    }

    .item__header[data-status="valido"] {
        background-color: #28a745; /* Verde */
        color: #fff; /* Texto blanco */
    }
    
    .item__header[data-status="invalido"] {
        background-color: #dc3545; /* Rojo */
        color: #fff; /* Texto blanco */
    }

    /* Aplica al segundo hijo */
    .item__header > *:nth-child(1) {
        margin-left: auto; /* Empuja el elemento hacia la derecha */
        
        margin-right: 6px;
    }
                
    

    .item__header button {
        max-height: 25px;
        max-width: 25px;
        min-height: 25px;
    
        background-color: transparent; /* Fondo transparente por defecto */
        box-sizing: border-box;
    
        /* Propiedades para centrar el contenido */
        display: flex;
        justify-content: center; /* Centra horizontalmente */
        align-items: center; /* Centra verticalmente */
        line-height: 0px;
        color: white; /* Color del texto */
        font-size: 14px; /* Tamaño de la fuente */
        
        font-weight: bold; /* Texto en negrita */
        border: none; /* Sin borde */
        border-radius: 5px; /* Forma redondeada opcional */
        cursor: pointer; /* Cursor de mano */
        transition: background-color 0.3s ease; /* Suaviza el cambio de color */
    }
    
    /* Estilo al pasar el cursor por encima */
    .item__header button:hover {
        background-color: red; /* Fondo rojo al pasar el cursor */
    }

    .item__body {
        display: grid;
        grid-template-areas:
            "row1 row2 images calculations calculations"
            "row1 row2 images matrix summary"
            "row1 row2 images matrix summary"
            "row1 row2 images matrix actions";
        grid-template-columns: 1.5fr 1.3fr 0.7fr 1.8fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr; /* Cada fila ocupa un cuarto del espacio */
        gap: 12px;
        padding: 13px;
        background-color: #ffffff;
        height: 100%; /* Utiliza toda la altura disponible del contenedor `.item` */
        box-sizing: border-box;
        overflow: hidden; /* Evita que el contenido desborde */
    }

    .item__field label {
        font-size: 14px;
        font-weight: 500;
    }

    .item__row {
        grid-area: row1;
        display: grid;
        grid-template-rows: 2fr 1fr 1fr 1.5fr; /* La primera fila ocupa 2 partes, la segunda 1 parte, la tercera 3 partes */
        gap: 5px;
        height: 100%;
        overflow-y: auto;
    }



    .item__textarea,
    .item__input {
        resize: none; /* Deshabilita el redimensionamiento manual */
        flex-grow: 1; /* Permite que crezcan para llenar el espacio disponible */
        flex-shrink: 1; /* Permite que se reduzcan si hay poco espacio */
        min-height: 30px; /* Altura mínima para accesibilidad */
        max-height: 100%; /* Resta el espacio del gap (ajústalo según el diseño) */
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 15px;
        box-sizing: border-box; /* Incluye padding y border en el cálculo de dimensiones */
        overflow: hidden; /* Asegura que el contenido no desborde */
        overflow-y: auto;
        scroll-behavior: smooth;
    }

    .item_row2 {
        grid-area: row2;
        display: flex;
        flex-direction: column;
        gap: 10px;
        height: 100%; /* Ocupa todo el espacio asignado */
        overflow-y: auto; /* Scroll si el contenido excede */
    }

    .item__controls {
        display: flex; /* Habilita flexbox */
        justify-content: space-between; /* Coloca el `label` a la izquierda y los botones a la derecha */
        align-items: center; /* Alinea los elementos verticalmente */
        gap: 3px; /* Espaciado entre los elementos */
    }

    .item__controls > :first-child {
        flex: 1; /* El primer hijo toma todo el espacio disponible */
    }




    .item__controls .item__button {
        max-width: 60px; /* Ancho específico para los botones */
        height: 20px; /* Altura específica para los botones */
        font-size: 10px; /* Tamaño del texto */
        padding: 0; /* Elimina padding adicional */
        border: none; /* Sin bordes */
        border-radius: 5px; /* Bordes redondeados */
        background-color: rgb(103, 110, 173); /* Fondo del botón */
        color: white; /* Texto blanco */
        cursor: pointer; /* Cambia el cursor al pasar por encima */
        text-align: center; /* Alinea el texto horizontalmente */

    }


  /* ---------> IMAGENES */

        .item__images {
            grid-area: images;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            /* background-color: #a7a7a7; */
            padding: 0px;
            border-radius: 5px;
            height: 100%; /* Ocupa el 100% del contenedor */
            
            max-width: 135px ;
        }

        .item__image-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* justify-content: space-between; Mantén separación entre imagen y botones */
            
            width: 100%;
            height: 100%; /* Ajusta la altura para ocupar todo el espacio disponible */
            background-color: #ffffff;
            border: 1px solid #ffffff;
            border-radius: 5px;
            overflow: hidden;
            position: relative;
            gap: 3px;
        }

        .item__image-box:nth-child(2) {
            display: flex;
            flex-direction: column;
            justify-content: flex-end; /* Ubica los elementos al final */
        }

        .item__image {
            width: 125px;
            object-fit: cover;
            aspect-ratio: 1 / 1; /* Mantén la proporción cuadrada */
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.08); /* Sombra sutil */
            border: 1px solid #ddd; /* Línea sutil alrededor de la imagen */
            border-radius: 0px; /* Bordes redondeados */
            
            
        }

        



        .item__actions-buttons--images {
            display: flex;
            justify-content: space-around; /* Distribuye uniformemente los botones */
            gap: 3px;
            
            

            
            height: auto; /* Permite ajustar la altura dinámicamente */
            flex-wrap: nowrap; /* Evita que los botones se alineen verticalmente */
            position: relative; /* Asegura que los botones permanezcan dentro del contenedor */
            align-items: center; /* Asegura que los botones se alineen verticalmente */
        }
        .item__actions-buttons--images button {
            height: 20px; /* Altura fija del botón */
            
            
            font-size: 10px; /* Ajusta el tamaño del texto */
            background-color: rgb(103, 110, 173);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: flex;
            align-items: center; /* Asegura la alineación vertical */
            justify-content: center; /* Centra el texto horizontalmente */
            z-index: 100;
            
            
        }



        /* ------> CALCULOS */


        .item__calculations {
            grid-area: calculations;
            display: flex;
            
            background-color: #ffffff;
            border-radius: 5px;
            align-items: center; /* Centra los elementos verticalmente */
            justify-content: space-between; /* Ajusta para que los elementos usen todo el espacio horizontal */
            width: 100%;
            gap: 8px;
        }

        

        .item__calculations input {
            width: 100%; /* Ajusta el ancho del input al 100% del contenedor */
            
            font-size: 17px; /* Tamaño de texto ajustado */
            font-weight: 700;
            border: 1px solid #ccc; /* Bordes consistentes */
            border-radius: 4px; /* Bordes redondeados */
            box-sizing: border-box; /* Incluye padding y bordes en el ancho total */
            text-align: right;
            
        }



        .item__field {
            flex: 1; /* Ajusta dinámicamente el ancho de cada campo */
            display: flex;
            flex-direction: column;
            gap: 5px;
        }



        .item__field--quantity {
            flex: 0.7; /* El campo de cantidad ocupa el 70% del ancho de los demás */
        }

        .item__matrix {
            grid-area: matrix;
            
            border-radius: 7px;
            
            height: 100%;
            
        }

        [class^="item__table"] {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px; /* Fuente reducida */
            text-align: right; /* Valores alineados a la derecha */
            border-radius: 7px;
            background-color: rgb(255, 255, 255);
            box-shadow: 2px 2px 2px 2px rgba(80, 80, 80, 0.2);
            width: 100%;
            display: flex;
            flex-direction: column;
            height: 100%;
            
            
            
        }

        [class^="item__table"] thead {
            background-color: red;
        }

        [class^="item__table"] thead tr,
        [class^="item__table"] tbody tr {
            display: flex; /* Convierte las filas en contenedores flexibles */
            flex-direction: row; /* Asegura que el contenido se disponga horizontalmente */
        }

        [class^="item__table"] tbody tr {
            flex: 1;
        }


        [class^="item__table"] thead {
            display: table-row-group; /* Mantiene el comportamiento del encabezado */
        }



        [class^="item__table"] thead th {
            text-align: right; /* Títulos centrados */
            font-weight: bold; /* Negritas */
            
            padding: 2px 5px;
            width: 100%;
            

            background: linear-gradient(135deg, rgb(121, 121, 121) 0%, rgb(172, 172, 172) 100%);

            color: white;
            

            /* margin-top: 2px; */
        }

        [class^="item__table"] tbody {
            display: flex; /* Flex para permitir distribución proporcional */
            flex-direction: column; /* Las filas son columnas del flexbox */
            flex: 1; /* Asegura que el cuerpo crezca proporcionalmente */
            width: 100%; /* Asegura que el tbody ocupe todo el ancho */
        }

        [class^="item__table"] tbody {
            display: flex; /* Flex para permitir distribución proporcional */
            flex-direction: column; /* Las filas son columnas del flexbox */
            flex: 1; /* Asegura que el cuerpo crezca proporcionalmente */
            width: 100%; /* Asegura que el tbody ocupe todo el ancho */
        }

        [class^="item__table"] tbody td {
            

            padding: 0 5px;

        }

                /* Escala de colores para % Utilidad */






        /* Estilos generales para todas las tablas de utilidad */
        .item__matrix table tbody tr {
            font-weight: normal; /* Estilo base */
            font-size: 13px;
            background: rgb(255, 255, 255);
            line-height: 16px;
            
            
            
        }

        /* General: Alinear los encabezados (th) y filas (td) */
        .item__matrix table th,
        .item__matrix table td {
            text-align: center; /* Centra el contenido horizontalmente */
            vertical-align: middle; /* Centra el contenido verticalmente */
        }

        /* Asegurar uniformidad en el ancho de las columnas */
        .item__matrix table th:nth-child(1),
        .item__matrix table td:nth-child(1) {
            width: 20%; /* Ajusta este porcentaje según el diseño */
            text-align: right;
        }

        .item__matrix table th:nth-child(2),
        .item__matrix table td:nth-child(2) {
            width: 40%; /* Ajusta este porcentaje según el diseño */
            text-align: right;
        }

        .item__matrix table th:nth-child(3),
        .item__matrix table td:nth-child(3) {
            width: 40%; /* Ajusta este porcentaje según el diseño */
            text-align: right;
        }

        /* ----------- Primera columna: % Ut. ----------- */
        /* Estilo de porcentajes en la tabla de cálculos */
        .item__matrix table tbody tr:nth-child(1) td:nth-child(1) { /* 145% */
            font-weight: 900;
            color: rgb(10, 236, 161);
        }
        .item__matrix table tbody tr:nth-child(2) td:nth-child(1) { /* 130% */
            font-weight: 900;
            color: rgb(9, 245, 135);
        }
        .item__matrix table tbody tr:nth-child(3) td:nth-child(1) { /* 115% */
            font-weight: 900;
            color: rgb(14, 240, 9);
        }
        .item__matrix table tbody tr:nth-child(4) td:nth-child(1) { /* 100% */
            font-weight: 900;
            color: rgb(3, 224, 1);
        }
        .item__matrix table tbody tr:nth-child(5) td:nth-child(1) { /* 85% */
            font-weight: 900;
            color: rgb(47, 204, 61);
        }
        .item__matrix table tbody tr:nth-child(6) td:nth-child(1) { /* 70% */
            font-weight: 900;
            color: rgb(81, 177, 97);
        }
        .item__matrix table tbody tr:nth-child(7) td:nth-child(1) { /* 55% */
            font-weight: 900;
            color: rgb(151, 175, 68);
        }
        .item__matrix table tbody tr:nth-child(8) td:nth-child(1) { /* 40% */
            font-weight: 900;
            color: rgb(171, 167, 54);
        }
        .item__matrix table tbody tr:nth-child(9) td:nth-child(1) { /* 25% */
            font-weight: 900;
            color: rgb(167, 104, 56);
        }
        .item__matrix table tbody tr:nth-child(10) td:nth-child(1) { /* 10% */
            font-weight: 900;
            color: rgb(158, 70, 60);
        }
        .item__matrix table tbody tr:nth-child(11) td:nth-child(1) { /* 0% */
            font-weight: 900;
            color: rgb(122, 37, 37);
        }

        
        /* ----------- Segunda columna: Precio Venta ----------- */
        .item__matrix table tbody tr:nth-child(1) td:nth-child(2) { /* 145% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }
        .item__matrix table tbody tr:nth-child(2) td:nth-child(2) { /* 130% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }
        .item__matrix table tbody tr:nth-child(3) td:nth-child(2) { /* 115% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }
        .item__matrix table tbody tr:nth-child(4) td:nth-child(2) { /* 100% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }
        .item__matrix table tbody tr:nth-child(5) td:nth-child(2) { /* 85% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }
        .item__matrix table tbody tr:nth-child(6) td:nth-child(2) { /* 70% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }
        .item__matrix table tbody tr:nth-child(7) td:nth-child(2) { /* 55% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }
        .item__matrix table tbody tr:nth-child(8) td:nth-child(2) { /* 40% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }
        .item__matrix table tbody tr:nth-child(9) td:nth-child(2) { /* 25% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }
        .item__matrix table tbody tr:nth-child(10) td:nth-child(2) { /* 10% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }
        .item__matrix table tbody tr:nth-child(11) td:nth-child(2) { /* 0% */
            color: #555555; /* Gris oscuro */
            font-weight: 800;
        }

        /* ----------- Tercera columna: Utilidad ----------- */
        .item__matrix table tbody tr:nth-child(1) td:nth-child(3) { /* 145% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }
        .item__matrix table tbody tr:nth-child(2) td:nth-child(3) { /* 130% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }
        .item__matrix table tbody tr:nth-child(3) td:nth-child(3) { /* 115% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }
        .item__matrix table tbody tr:nth-child(4) td:nth-child(3) { /* 100% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }
        .item__matrix table tbody tr:nth-child(5) td:nth-child(3) { /* 85% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }
        .item__matrix table tbody tr:nth-child(6) td:nth-child(3) { /* 70% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }
        .item__matrix table tbody tr:nth-child(7) td:nth-child(3) { /* 55% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }
        .item__matrix table tbody tr:nth-child(8) td:nth-child(3) { /* 40% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }
        .item__matrix table tbody tr:nth-child(9) td:nth-child(3) { /* 25% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }
        .item__matrix table tbody tr:nth-child(10) td:nth-child(3) { /* 10% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }
        .item__matrix table tbody tr:nth-child(11) td:nth-child(3) { /* 0% */
            color: #a1a1a1; /* Gris oscuro */
            font-weight: 900;
        }

        /* General: Bloque de resumen */
        .item__summary {
            grid-area: summary;
            background-color: #ffffff;
            
            border-radius: 5px;
            
            display: flex;
            flex-direction: column;
            height: 160px;
            
            
        }


        .item__summary p {
            font-size: 14px;
            font-weight: 600;
            display: flex;
            flex-direction: column; 
            margin-bottom: 4px;
            
               
        }

        .item__summary p:nth-child(3) {
            margin-top: 3px;
            font-size: 13px;
            align-items: flex-end;
            margin-bottom: 3px;
  
        }
        

        .item__summary p:nth-child(4) {
            margin-top: 0 ;
            font-size: 13px;
            align-items: flex-end;
            margin-bottom: 4px;
  
        }

        .item__summary p:nth-child(5) {
            font-size: 13px;
            align-items: flex-end;

        }



        /* Primer grupo: Total Venta y Total Costos */
        .item__summary p:nth-child(1) span {
            font-size: 18px;
            font-weight: 700;
            color: #7a7a7a; /* Azul */
            line-height: 8px;
        }

        .item__summary p:nth-child(2) span {
            font-size: 18px;
            font-weight: 700;
            color: #7a7a7a; /* Azul */
            line-height: 8px;
        }
        .item__summary p:nth-child(3) span {
            font-size: 18px;
            font-weight: 800;
            color: #7a7a7a; /* Azul */
            line-height: 8px;
            text-align: right;
        }




 
        .item__summary p:nth-child(4) span {
            font-size: 16px;
            font-weight: 800;
            color: #7a7a7a; /* Azul */
            line-height: 8px;
            text-align: right; /* Alinea a la derecha */
            display: block; /* Necesario para que el text-align funcione */
        }


        /* Segundo grupo: % Utilidad */
        .item__summary p:nth-child(5) span  {
            
            text-align: right; /* Alinea a la derecha */
            display: block; /* Necesario para que el text-align funcione */
            line-height: 20px;
            text-shadow: -1px 1px 1px rgba(3, 3, 0, 0.377);
            opacity: 0.8;
            font-size: 16px;
            color: #7a7a7a;
        }


                /* Estilo base para el span */
        .item__summary [id*="porcentaje-utilidad-total"] {
            font-size: 16px; /* Tamaño base */
            font-weight: bold;
            transition: color 0.3s ease, font-size 0.3s ease; /* Transición suave para color y tamaño */
        }


        [data-utilidad="sin_calculo"] {
            color: #585858; /* Gris para indicar estado neutral */
            font-size: 16px;
            font-weight: normal;
        }


        /* Escala de colores dinámica basada en aproximaciones */
        [id*="porcentaje-utilidad-total"] {
            font-size: 18px;
        }


        /* Color base para el porcentaje de utilidad */
        [data-utilidad] .porcentaje-utilidad-total {
            font-size: 14px; /* Tamaño base */
            color: #000; /* Color base */
        }

 

        .item__actions {
            grid-area: actions;
            display: grid; /* Usamos grid para una disposición en filas */
            grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
            grid-template-rows: auto auto; /* Dos filas automáticas */
            gap: 6px;
            background-color: #ffffff;
            border-radius: 5px;
            
            height: 35px;
            margin-top: 20px;
        }
        
        .item__actions button {
            display: flex; /* Convierte el botón en un contenedor flex */
            align-items: center; /* Alinea verticalmente al centro */
            justify-content: center; /* Alinea horizontalmente al centro */
            color: white;
            border: none;
            padding: 6px;
            cursor: pointer;
            border-radius: 5px;
            font-size: 13px;
            text-align: center; /* Asegura que el texto esté centrado */
            width: 100%; /* Ocupa toda la celda */
            height: 18px; /* Permite altura dinámica si el texto cambia */
        }
        
        /* Opcional: Estilo adicional para botones específicos */
        .item__actions .item__button--copy {
            background-color: rgb(103, 110, 173); 
        }
        
        .item__actions .item__button--copy:hover {
            background-color: rgb(219, 153, 54); 
        }

        .item__actions .item__button--paste {
            background-color: rgb(103, 110, 173); 
        }

        .item__actions .item__button--paste:hover {
            background-color: rgb(219, 153, 54); 
        }
        
        .item__actions .item__button--clear {
            background-color: rgb(103, 110, 173); 
        }
        
        .item__actions .item__button--save {
            background-color: rgb(103, 110, 173);
        }





        .item__button {
            flex: 1; /* Ajusta los botones para distribuir uniformemente el ancho */
            padding: 8px;
            background-color: rgb(103, 110, 173);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }



        .item__button:hover {
            background-color: rgba(21, 96, 172, 0.8);
        }
        .item__button:hover {
            background-color: rgba(66, 97, 128, 0.8);
        }

        .item__button--delete {
            background-color: rgba(255, 69, 0, 0.6);
        }

        .item__button--delete:hover {
            background-color: rgb(146, 74, 47);
        }

        .item__button--clear {
            background-color: rgb(100, 100, 100);
        }

        .item__button--clear:hover {
            background-color: rgba(105, 105, 105, 0.8);
        }

        .item__button--save {
            background-color: rgb(49, 134, 49);
        }

        .item__button--save:hover {
            background-color: rgba(66, 165, 66, 0.8);
        }

        .item__button--anadir_item {
            /* Estilos específicos para este botón */
            background-color: rgb(56, 58, 168);
            color: white;
            font-size: 12px;
            font-weight: bold;
            padding: 10px;
            margin-right: 35px;
            border-radius: 5px;
            z-index: 0;
            
            text-align: right;
        }










































    
    
        







}

/* Media Query: QHD (2560x1440) */
@media screen and (min-width: 1921px) {
    .contenedor {
        max-width: 1800px;
    }

    .menu__actions button {
        font-size: 18px;
        padding: 12px 24px;
    }

    .item {
        margin: 15px;
    }
}

/* Media Query: Tablets (768px - 1280px) */

/* Media Query: Móviles (menos de 768px) */
@media screen and (max-width: 768px) {
    body {
        font-size: 12px;
    }

    .contenedor {
        padding: 10px;
        flex-direction: column;
    }

    .menu__actions button {
        width: 100%;
        font-size: 14px;
    }

    .item {
        flex: 1 1 100%;
    }
}