/* ===============================
   TPV PRO UI (NO ROMPE NADA)
================================ */

/* BASE */
body {
    font-family: var(--font), system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* ===============================
   CONTENEDOR GENERAL
================================ */

#tpv {
    max-width: 1100px;
    margin: 20px auto;
    padding: 20px;
}

/* ===============================
   BLOQUES VISUALES (SIN TOCAR HTML)
================================ */

.customer-selector,
#tpv,
#cart,
.discount-panel,
#payment-bar,
#cashInfo,
#pendingDocIndicator {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
}

/* ===============================
   TITULOS
================================ */

h2, h3 {
    font-weight: 600;
    margin-bottom: 10px;
}

/* TOTAL */
#grandTotal {
    font-size: 28px;
    font-weight: 700;
    margin: 10px 0;
}

/* ===============================
   INPUTS
================================ */

input, select {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    color: var(--text);
}

/* ===============================
   BUSCADOR
================================ */

#search {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    border-radius: 14px;
}

/* ===============================
   SUGERENCIAS
================================ */

.suggestion {
    border-radius: 10px;
    padding: 10px;
}

.suggestion:hover {
    background: var(--surface);
}

/* ===============================
   TABLA CARRITO
================================ */

#cart {
    border-collapse: collapse;
}

#cart th {
    text-align: left;
    font-size: 12px;
    color: var(--muted);
}

#cart td {
    padding: 10px 6px;
}

/* ===============================
   BOTONES
================================ */

button {
    border-radius: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-weight: 500;
    cursor: pointer;
}

button:hover {
    background: var(--card);
}

/* ===============================
   BOTONES DE PAGO (DESTACADOS)
================================ */

.pay-btn {
    flex: 1;
    font-size: 16px;
    padding: 16px;
    border-radius: 14px;
}

.pay-btn.cash {
    background: var(--success);
    color: #fff;
}

.pay-btn.card {
    background: var(--accent);
    color: #fff;
}

.pay-btn.refund {
    background: rgba(248,113,113,.15);
    color: var(--danger);
}

/* ===============================
   BARRA DE PAGO
================================ */

#payment-bar {
    display: flex;
    gap: 10px;
}

/* ===============================
   CHECKBOX
================================ */

#giftTicket {
    transform: scale(1.2);
    margin-right: 6px;
}

/* ===============================
   LOGIN
================================ */

#loginScreen .modal-content {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.hidden {
    display: none !important;
}

/* ===============================
   MODALES (SOLO ESTÉTICA)
================================ */

.cash-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.cash-keypad button {
    background: var(--surface);
}

/* ===============================
   BOTÓN TECHPANEL (SUAVE)
================================ */

#techPanelBtn {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}
/* ===============================
   BOTONES SIN BORDES REDONDEADOS
================================ */

button,
input,
select {
    border-radius: 0;
}

.pay-btn {
    border-radius: 0;
}

/* ===============================
   BOTONES PAGO (PASTEL PRO)
================================ */

.pay-btn.cash {
    background: #d1fae5;           /* verde pastel */
    color: #065f46;                /* texto oscuro elegante */
    border: 1px solid #a7f3d0;
}

.pay-btn.cash:hover {
    background: #bbf7d0;
}

.pay-btn.card {
    background: #e0e7ff;           /* azul pastel */
    color: #3730a3;
    border: 1px solid #c7d2fe;
}

.pay-btn.card:hover {
    background: #c7d2fe;
}

/* Botón devoluciones más suave */
.pay-btn.refund {
    background: #fee2e2;
    color: #7f1d1d;
    border: 1px solid #fecaca;
}

/* ===============================
   BOTÓN LOGIN (FIX DESAPARECE)
================================ */

#loginBtn {
    background: var(--accent);
    color: white;
    border: none;

    /* IMPORTANTE: evitar cambios raros */
    opacity: 1 !important;
    visibility: visible !important;
}

/* evitar efecto raro al hacer click */
#loginBtn:active,
#loginBtn:focus {
    opacity: 1 !important;
    outline: none;
}

/* evitar que algún CSS lo oculte */
#loginBtn.hidden {
    display: block !important;
}
/* ===============================
   BOTONES MODALES (PASTEL PRO)
================================ */

/* Confirmar cobro efectivo */
#cashConfirm {
    background: #d1fae5 !important;   /* verde pastel */
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
}

#cashConfirm:hover {
    background: #bbf7d0 !important;
}

/* Confirmar devolución */
#refundConfirm {
    background: #fee2e2 !important;   /* rojo pastel */
    color: #7f1d1d !important;
    border: 1px solid #fecaca !important;
}

#refundConfirm:hover {
    background: #fecaca !important;
}

/* Botones cancelar en modales */
.cash-actions button:first-child {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border: 1px solid #e5e7eb !important;
}

.cash-actions button:first-child:hover {
    background: #e5e7eb !important;
}
/* ===============================
   FIX RESPONSIVE (CRÍTICO)
================================ */

/* Restaurar comportamiento original en mobile */
@media (max-width: 768px) {

    #payment-bar {
        flex-direction: column !important;
    }

    .pay-btn {
        width: 100% !important;
        flex: unset !important;   /* 🔥 clave */
    }

    #tpv {
        padding: 10px !important;
    }

    table {
        font-size: 13px;
    }

    input, button {
        width: 100%;
        box-sizing: border-box;
    }
}