/* =========================================================================
   --- ESTRUCTURA PRINCIPAL (PANTALLA DIVIDIDA) ---
   ========================================================================= */
   .tpv-main {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.panel-izquierdo {
    width: 58%;
    background-color: #ffffff;
    padding: 25px;
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
}

.panel-derecho {
    width: 42%;
    background-color: #f8fafc;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* --- BUSCADOR --- */
.buscador-contenedor {
    margin-bottom: 20px;
}

.buscador-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
}

.buscador-input {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s;
}

.buscador-input:focus {
    border-color: #3b82f6;
}

/* --- REJILLA DE PRODUCTOS --- */
.productos-seccion {
    flex: 1;
    overflow-y: auto;
}

.seccion-titulo {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

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

/* --- ELEMENTOS DEL TICKET EN PANTALLA --- */
.ticket-superior {
    flex: 1;
    overflow-y: auto;
}

.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.ticket-titulo {
    font-weight: 700;
    color: #334155;
}

.btn-vaciar {
    background: none;
    border: none;
    color: #ef4444;
    font-weight: 600;
    cursor: pointer;
}

.btn-vaciar:hover {
    text-decoration: underline;
}

.ticket-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- TOTALES Y BOTONES DE COBRO --- */
.ticket-inferior {
    border-top: 2px solid #e2e8f0;
    padding-top: 15px;
}

.total-contenedor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.total-label {
    font-weight: 700;
    color: #64748b;
    font-size: 1.1rem;
}

.total-monto {
    font-size: 2rem;
    font-weight: 900;
    color: #0f172a;
}

.botones-cobro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

.btn-cobrar {
    border: none;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 20px;
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: transform 0.1s, background-color 0.2s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-cobrar:active {
    transform: scale(0.97);
}

.btn-efectivo { background-color: #059669; }
.btn-efectivo:hover { background-color: #047857; }

.btn-tarjeta { background-color: #2563eb; }
.btn-tarjeta:hover { background-color: #1d4ed8; }

.btn-bizum { background-color: #00a4a6; }
.btn-bizum:hover { background-color: #008688; }

.btn-icono {
    font-size: 1.5rem;
}


/* =========================================================================
   🖨️ CONTROL DE IMPRESIÓN TÉRMICA INTEGRADO (ESTILO STOCKAGILE)
   ========================================================================= */

/* En navegación normal el contenedor del ticket físico no debe verse en el TPV */
#seccion-ticket-impresion {
    display: none !important;
}

@media print {
    /* 1. Ocultamos absolutamente toda la app visual (Navbar, paneles, buscador) */
    body * {
        visibility: hidden !important;
    }

    /* 2. Hacemos visible única y exclusivamente el papel del ticket */
    #seccion-ticket-impresion, 
    #seccion-ticket-impresion * {
        visibility: visible !important;
    }

    /* 3. Posicionamos el ticket de forma absoluta arriba a la izquierda para arrancar en el corte cero */
    #seccion-ticket-impresion {
        display: block !important;
        position: absolute;
        left: 0;
        top: 0;
        width: 100% !important;
    }

    /* Forzar a las tablas y celdas internas a respetar la maquetación */
    #seccion-ticket-impresion table {
        display: table !important;
        width: 100% !important;
    }
    #seccion-ticket-impresion tr {
        display: table-row !important;
    }
    #seccion-ticket-impresion th, 
    #seccion-ticket-impresion td {
        display: table-cell !important;
    }

    /* Ajustes específicos del tamaño del rollo térmico estándar */
    @page {
        size: 80mm auto; /* 80mm de ancho y largo según cantidad de calzado */
        margin: 0;       /* Elimina encabezados con la URL del navegador y fecha */
    }

    body {
        background-color: #ffffff !important;
        margin: 0;
        padding: 2mm 1mm; /* Margen de seguridad para que la aguja de la impresora no corte texto */
    }
}