/* =============================================================== */
/* HORACIO - ARCHIVO DE ESTILOS PERSONALIZADO v3.0 (Refactorizado) */
/* =============================================================== */
/* NOTA: Este archivo ahora se enfoca en LAYOUT y estilos base.   */
/* La lógica de COLORES y TEMAS se gestiona en dynamic_styles.php  */
/* =============================================================== */

/* --- SECCIÓN 1: LAYOUT GENERAL Y TIPOGRAFÍA --- */
html { 
    height: 100%; 
}
body { 
    font-family: 'Kanit', sans-serif; /* Mantenemos la fuente base */
}
.body-public { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 100vh; 
}
.body-app, .body-tpv { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
}
.app-wrapper { 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
}
.main-content { 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    /*padding-top: 1rem; */
}
.page-content-container { 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
    min-height: 0; 
}
.content-header-fixed { 
    flex-shrink: 0; 
}
.page-container-wide { 
    width: 100%; 
    max-width: 1500px; 
    margin-left: auto; 
    margin-right: auto; 
}

/* --- SECCIÓN 2: COMPONENTES ESPECÍFICOS (LOGIN, FOOTER) --- */
.login-card { 
    width: 100%; 
    max-width: 420px; 
    padding: 1rem; 
    border-radius: 0.5rem; 
    border: 1px solid #dee2e6; 
    background-color: #ffffff; 
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); 
}
.login-logo { 
    max-width: 120px; 
    height: auto; 
    margin-bottom: 1rem; 
}

.login-card_admin { 
    width: 100%; 
    max-width: 420px; 
    padding: 1rem; 
    border-radius: 0.5rem; 
    border: 1px solid #34b0c8; 
    background-color: #c1dfcf; 
    box-shadow: 0 0.5rem 1rem rgba(129, 124, 124, 0.1); 
}

/* NOTA: Las reglas del footer fueron eliminadas porque ya las controla dynamic_styles.php */
/* Lo mismo para las reglas generales de .navbar */

/* --- SECCIÓN 3: TABLAS Y FORMULARIOS (ESTILOS ESTRUCTURALES) --- */
.table-container { 
    flex-grow: 1; 
    max-height: calc(100vh - 365px); 
    min-height: 300px; 
    overflow-y: auto; 
    border-radius: 0.370rem; 
    /* El color de fondo y borde lo controla ahora dynamic_styles.php */
}
.table-container thead th { 
    position: sticky; 
    top: 0; 
    z-index: var(--z-table-header-sticky); 
    /* El color de fondo lo controla dynamic_styles.php */
}
.table-container .table { 
    margin-bottom: 0; 
}


/* NOTA: Las reglas de colores de form-control, modal, etc., se eliminaron */
/* porque ya las controla dynamic_styles.php */

/* ================================================================ */
/*   BLOQUE FINAL Y DEFINITIVO PARA TPV (LAYOUT Y ESTRUCTURA)       */
/* ================================================================ */

/* 1. Layout Grid en el BODY */
.body-tpv {
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    height: 100vh !important;
    overflow: hidden !important;
}

/* 2. Contenedores intermedios */
.body-tpv .tpv-main-container { display: contents !important; }
.body-tpv nav { grid-row: 1 !important; }
.body-tpv footer { grid-row: 3 !important; }
.body-tpv .tpv-content-area {
    grid-row: 2 !important;
    min-height: 0;
    display: flex;
    padding: 0 !important;
}

/* 3. ALTURA FIJA: La regla calc() que funciona */
.body-tpv #columna-categorias,
.body-tpv #panel-productos,
.body-tpv #carrito-items {
   /* height: calc(100vh - 410px) !important; */
   height: calc(100vh - var(--header-height) - var(--footer-height));
    overflow-y: auto !important;
}

/* 4. Estilos de componentes internos del TPV (sin colores) */
.body-tpv .producto-card { 
    display: grid !important; 
    grid-template-columns: 1fr auto auto; 
    gap: 0.75rem; 
    align-items: center; 
    padding: 0.5rem 1rem !important; 
    margin-bottom: 0.5rem; 
}
.body-tpv .producto-controles { 
    display: flex; 
    align-items: center; 
}
.body-tpv .producto-controles .input-cantidad { 
    width: 45px; 
    text-align: center; 
    margin: 0 0.25rem; 
    -moz-appearance: textfield; 
    appearance: none; 
}
.body-tpv .producto-controles .input-cantidad::-webkit-outer-spin-button, .body-tpv .producto-controles .input-cantidad::-webkit-inner-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
.body-tpv .carrito-item { 
    display: grid; 
    grid-template-columns: 1fr auto auto; 
    gap: 1rem; 
    align-items: center; 
    padding-bottom: 0.5rem; 
    margin-bottom: 0.5rem; 
}
.body-tpv .carrito-item-precio { 
    justify-self: end; 
}
.date-input-wrapper { 
    position: relative; 
    width: 100%; 
}
.date-trigger-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    cursor: pointer; 
    z-index: 2; 
}

/* ================================================================ */
/*        ESTILOS PARA EL MODAL DE TECLADO NUMÉRICO (TEMA FIJO)     */
/* ================================================================ */

#numericKeypadModal .modal-content {
    background-color: #2d3748; /* Fondo oscuro (gris azulado) */
    color: #e2e8f0;            /* Texto claro */
    border: 1px solid #4a5568;
}

#numericKeypadModal .modal-header {
    border-bottom: 1px solid #4a5568;
}

#numericKeypadModal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* Botón de cierre blanco */
}

#keypadDisplay {
    background-color: #1a202c; /* Fondo de pantalla más oscuro */
    color: #ffffff;
    border-color: #4a5568;
    font-size: 2rem;
    font-weight: bold;
}

.keypad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.btn-keypad {
    background: linear-gradient(to bottom, var(--bs-secondary, #6c757d) 0%, var(--bs-secondary-dark, #5a6268) 100%);
    border: 1px solid var(--bs-secondary-dark, #5a6268);
    border-bottom-width: 4px;
    border-bottom-color: var(--bs-secondary-darker, #4e555b);
    color: var(--bs-white, #ffffff);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transform: translateY(0);
    transition: all 0.08s ease-in-out;
    padding: 1rem 0;
}
.btn-keypad:hover {
    background: linear-gradient(to bottom, var(--bs-secondary-hover, #7a878f) 0%, var(--bs-secondary-dark, #5a6268) 100%);
}
.btn-keypad:active {
    border-bottom-width: 1px;
    transform: translateY(3px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}