/* ==========================================================================
   CREA LISTA REPARTOS
   ========================================================================== */


/* Contenedor padre opcional por si necesitas darle margen a la tarjeta */
.cardProductoGrid-wrapper {
    width: 100%;
    max-width: 450px; /* <--- Ajusta este número (ej. 400px, 450px, 500px) hasta que quede al tamaño que te guste */
    margin: 0 auto 1.5rem auto; /* El 'auto' de los lados la centra en la pantalla */
}

/* El contenedor principal ahora permite que los elementos se vayan abajo si no caben */
.cardProductoGrid {
    display: flex;
    flex-wrap: wrap;           /* PERMITE QUE LOS ELEMENTOS BAJEN */
    align-items: center;       /* Alinea las 3 columnas de arriba verticalmente */
    justify-content: space-between;
    gap: 12px;
    background: #f0f0f0;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Las 3 columnas de arriba siguen funcionando igual */
.col-rapida {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 55px;
    /* Asegura que estas columnas no se estiren verticalmente de más */
    align-self: center; 
}

.col-central {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* NUEVO: Fuerza a la columna inferior a romper línea y ocupar todo el ancho */
.col-bottom {
    flex: 0 0 100%;            /* Ocupa el 100% del ancho del contenedor */
    width: 100%;               /* Refuerzo para navegadores antiguos */
    text-align: center;        /* Centra el texto del nombre y presentación */
    margin-top: 8px;           /* Separación superior con respecto a lo de arriba */
    padding-top: 8px;
    border-top: 1px solid #f3f4f6; /* Opcional: una línea sutil de división */
}

/* Estilos de los textos dentro de col-bottom */
.ProductoGridNombre {
    font-size: 1rem;
    color: #1f2937;
}

.ProductoGridPresentacion {
    font-weight: 900;
    font-size: 1.5rem;
    color: #6b7280;
}

/* Tus botones e input mantienen sus estilos intactos */
.btnRapido {
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin-bottom:10px;
}
.col-restar .btnRapido { color: #dc2626; }
.col-sumar .btnRapido { color: #059669; }

.ProductoGridCant {
    width:100%;
    text-align: center;
    font-weight: bold;
    font-size: 1.3rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding:6px 0;
    background-color: #fafafa;
    margin-top: 8px;
}

.cardProductoGrid img{
width:100%;
object-fit:contain;
aspect-ratio: 1/1;

}

.ProductoGridNombre{
    font-weight:400;font-size:24px;
    margin-top:10px;
}
.ProductoGridPresentacion{
    font-weight:normal; color: var(--tercer);
}







/* =====================  
    CSS ESTILO POS TOUCH
==================== */

.gridProductos{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:20px;

}

.cardProducto{

background:white;
border-radius:10px;
padding:15px;
text-align:center;
box-shadow:0 2px 6px rgba(0,0,0,0.15);

}

.cardProducto img{

width:100%;
height:120px;
object-fit:contain;

}

.gridNombre{
    font-weight:400;font-size:24px;
    margin-top:10px;
}
.gridPresentacion{
    font-weight:normal; color: var(--tercer);
}
.gridPrecio{
    font-weight: 600;
    color:var(--main);
    font-size:18px;
}
.gridStock{
    padding:5px 0;background: #acddac;
}
.stockbajo{
   background:#df6767;color:#ffffff;font-weight: 700; 
}





/* INVENTARIO */
.modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    display:none;
    align-items:center;
    justify-content:center;
}
.modal.activo{
    display:flex;
}
.modal .renglon{margin-bottom: 10px;}
.modalBox{
    background:white;
    padding:30px;
    border-radius:10px;
    text-align:center;
    width:350px;
}
.sliderImgProducto{
    width:150px;
    margin:0px auto;
}




.gridProduccion{
    display:flex;
    align-items:center;
    gap:0px;
    justify-content:center;
}

.gridProduccion button{
    width:45px;
    height:45px;
    border:none;
    background:var(--verde);
    color:white;
    font-size:18px;
    cursor:pointer;
}


.inputCantProduccion{
    width:55px;
    text-align:center;
    font-weight:bold;
    border:1px solid #ccc;
    padding:15px 10px;
}








/* ================================
    REPARTIDORES
 ================================*/
 .repartosTit{
    font-size:24px;
    width: 100%;
    display: inline-block;
 }

 .pantalla{
    position: fixed;
    top:0; left:0;
    width:100%;
    height:100%;
    background:#fff;
    overflow:auto;
    display: grid;
    /* Crea columnas de al menos 200px, llenando el espacio disponible */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 15px; /* Espacio entre las tarjetas */
    padding: 20px;
    align-items: start;
}
.pantallaGde{
    position: fixed;
    top:60px; left:0;
    width:100%;
    height:100%;
    background:#fff;
    overflow:auto;
    display: grid;
    /* Crea columnas de al menos 200px, llenando el espacio disponible */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 15px; /* Espacio entre las tarjetas */
    padding: 20px;
    align-items: start;
}
.btnContinuar{
    position: fixed;
    bottom:20px;
    right:20px;
    padding:15px 25px;
    background:#28a745;
    color:#fff;
    border:none;
    font-size:18px;
    border-radius:10px;
}

.itemActivo{
    border:3px solid green;
}


.cardCliente,
.cardRepartidor {
    background: white;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    
    /* Agrega esto */
    height: 220px; 
    display: flex; /* Opcional: para centrar el contenido verticalmente */
    flex-direction: column;
    justify-content: center;
}
/* Regla especial solo para el primer card */
.cardRepartidor:first-child {
    grid-column: 1 / -1; /* Ocupa todo el ancho disponible */
    height: 40px;        /* Alto fijo que pediste */
    padding: 5px;        /* Ajustamos padding para que el texto no se corte */
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: none;
    font-size:24px;
    font-weight: 500;
}

.itemResumen{
    display:flex;
    justify-content:space-between;
    padding:10px;
    border-bottom:1px solid #ddd;
    font-size:18px;
}

.accionesResumen{
    position: fixed;
    bottom:20px;
    left:0;
    width:100%;
    display:flex;
    justify-content:space-around;
}

#btnCancelarResumen{
    background:#dc3545;
    color:#fff;
    padding:15px;
    border:none;
    border-radius:10px;
    font-size:18px;
}

#btnConfirmarResumen{
    background:#28a745;
    color:#fff;
    padding:15px;
    border:none;
    border-radius:10px;
    font-size:18px;
}


.pantallaResumen {
    position: fixed;
    top: 0;
    left: 50%; /* Lo mueve a la mitad de la pantalla */
    transform: translateX(-50%); /* Lo empuja hacia atrás la mitad de su propio ancho */
    
    width: 100%; /* Importante: que intente medir el 100%... */
    max-width: 500px; /* ...pero que se detenga en 500px */
    
    height: 100%;
    background: #fff;
    overflow: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.itemRenglon {
    width: 100%; /* Asegura que ocupen todo el ancho */
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
    box-sizing: border-box; /* Importante para que el padding no rompa el ancho */
}
#listaResumen{
    height:35vh ;
    overflow-y:scroll ;
}

.itemRenglonTop {
    display: flex;         /* Pone los hijos uno al lado del otro */
    gap: 10px;             /* Espacio de separación entre las dos cajas */
    width: 100%;           /* Ocupa todo el ancho del resumen */
}

.itemRenglonBox {
    flex: 1;               /* Hace que ambas cajas midan lo mismo (50% cada una) */
    background: #f9f9f9;   /* Un fondo ligero para que se distingan */
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #eee;
    font-size: 14px;       /* Ajusta según necesites */
}





#listaClientesZona{
    margin-top:10px;
    max-height:200px;
    overflow:auto;
    font-size:12px;
    opacity:.8;
}

.clienteMini{
    padding:3px 5px;
    border-bottom:1px dashed #ddd;
}