/* ==========================================================================
   1. VARIABLES Y ESTILOS GLOBALES (Base del Sistema)
   ========================================================================== */
:root {
    --naranja: #b36e4f;    
    --turquesa: #55a8a4;   
    --crema: #fdfcf5;      
    --oscuro: #2d3436;     
    --blanco: #ffffff;
    --rojo: #ef4444;       
}

body {
    margin: 0;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--crema);
    color: var(--oscuro);
}

.main-content {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Tarjetas base y Tablas globales */
.card {
    background: var(--blanco);
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

table { width: 100%; border-collapse: collapse; margin-top: 15px; }
th { text-align: left; padding: 12px; border-bottom: 2px solid var(--crema); color: var(--turquesa); }
td { padding: 12px; border-bottom: 1px solid #eee; }

.texto-centro { text-align: center; }
.oculto { display: none; }

/* ==========================================================================
   2. BARRA DE NAVEGACIÓN (HEADER / NAVBAR)
   ========================================================================== */
.navbar-custom {
    background-color: var(--blanco);
    padding: 10px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(179, 110, 79, 0.1);
    border-bottom: 3px solid var(--turquesa);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--naranja);
    font-weight: bold;
    font-size: 22px;
}

.navbar-logo-img { height: 50px; width: auto; }
.nav-buttons-group { display: flex; gap: 10px; }

.nav-btn-custom {
    background: var(--blanco);
    border: 2px solid var(--turquesa);
    color: var(--turquesa);
    padding: 8px 18px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
    font-size: 14px;
}

.nav-btn-custom:hover, .nav-btn-custom.active {
    background-color: var(--turquesa);
    color: var(--blanco);
    box-shadow: 0 2px 5px rgba(85, 168, 164, 0.3);
}

.user-info-custom { font-size: 14px; color: #666; display: flex; align-items: center; gap: 10px; }
.btn-salir-custom { color: var(--naranja); text-decoration: none; font-weight: bold; }

/* ==========================================================================
   3. MÓDULO: VENTAS
   ========================================================================== */
.scanner-input {
    width: 100%;
    padding: 15px;
    font-size: 18px;
    border: 2px solid var(--turquesa);
    border-radius: 10px;
    margin-bottom: 15px;
    outline: none;
    box-sizing: border-box; 
}

.scanner-input:focus { 
    box-shadow: 0 0 8px rgba(85, 168, 164, 0.5); 
}

.btn-eliminar-row {
    background-color: var(--rojo);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.btn-cobrar {
    background-color: #2ecc71; 
    color: white;
    padding: 15px;
    font-size: 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    width: 100%;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn-cobrar:hover { 
    background-color: #27ae60; 
}

/* ==========================================================================
   MÓDULO: INVENTARIO
   ========================================================================== */
.inventario-wrapper { display: flex; flex-direction: column; gap: 20px; }
.panel-registro { background-color: #f8fdfb; border-left: 5px solid var(--turquesa); }
.panel-titulo { margin: 0 0 15px 0; color: var(--turquesa); }
.panel-form-grid { display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-end; }

/* Inputs y Cajas de texto */
.input-group label { font-weight: bold; font-size: 14px; display: block; margin-bottom: 5px; }
.input-base { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #ccc; box-sizing: border-box; }
.input-base:focus { outline: 2px solid var(--turquesa); border-color: var(--turquesa); }

/* Tamaños de columnas */
.input-group { flex: 1 1 150px; }
.descripcion-group { flex: 2 1 250px; }
.corto-group { flex: 1 1 100px; }
.medio-group { flex: 1 1 150px; }

/* Botones específicos de Inventario */
.nav-btn { padding: 8px 15px; border-radius: 5px; border: none; cursor: pointer; font-weight: bold; margin-left: 5px; transition: 0.3s; }
.btn-accion { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; color: white; }
.btn-guardar { background-color: #2ecc71; height: 38px; }
.btn-guardar:hover { background-color: #27ae60; }
.btn-descargar { background-color: #3498db; color: white; }
.btn-subir { background-color: #f39c12; color: white; display: inline-block; cursor: pointer; }
.btn-editar { background-color: #3498db; padding: 5px 10px; }
.btn-eliminar { background-color: var(--rojo); padding: 5px 10px; margin-left: 5px; }

/* --- NUEVOS ESTILOS PARA BOTONES DE MANTENIMIENTO --- */
.btn-depurar {
    background-color: var(--rojo);
    color: white;
}
.btn-depurar:hover {
    filter: brightness(0.9);
}

.btn-bajo-stock {
    background-color: #f1c40f;
    color: #2d3436;
}
.btn-bajo-stock.activo {
    background-color: #e67e22;
    color: white;
}

/* Buscador e Indicadores visuales */
.inventario-header { flex-direction: column; align-items: flex-start; gap: 15px; }
.inventario-titulo-bar { display: flex; justify-content: space-between; width: 100%; align-items: center; }
.inventario-titulo-bar h2 { margin: 0; color: var(--naranja); }
.input-busqueda { width: 100%; padding: 12px; border-radius: 25px; border: 2px solid var(--turquesa); font-size: 16px; outline: none; box-sizing: border-box; }
.tabla-inventario tr { cursor: pointer; }
.tabla-inventario tr:hover { background-color: #f1f1f1; }
.stock-bajo { color: var(--rojo); font-weight: bold; }
.stock-normal { color: var(--oscuro); font-weight: bold; }

/* ==========================================================================
   5. MÓDULO: IMPRESIÓN (Tickets Térmicos)
   ========================================================================== */
.only-print { display: none; }

@media print {
    /* Ocultar interfaz gráfica (Botones, Navbar, Footer) */
    .no-print, nav, .navbar-custom, footer {
        display: none !important;
    }
    
    /* Forzar visualización del ticket */
    .only-print {
        display: block !important;
    }
    
    /* Configuración física de la impresora (58mm) */
    @page { 
        size: 58mm auto; 
        margin: 0; 
    }
    
    body, html { 
        width: 58mm; 
        margin: 0; 
        padding: 2mm; 
        background-color: white;
        font-family: 'Courier New', Courier, monospace; 
        font-size: 11px;
        color: black;
    }

    hr { border: none; border-top: 1px dashed #000; margin: 5px 0; }
}

/* ==========================================================================
   6. OTROS COMPONENTES (Pantalla de Login / Utilidades)
   ========================================================================== */
.login-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: var(--crema);
}

.login-card {
    background: var(--blanco);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    width: 350px;
    text-align: center;
    border-top: 5px solid var(--naranja);
}

.login-input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
}

.btn-p {
    background-color: var(--naranja);
    color: var(--blanco);
    border: none;
    padding: 14px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    font-size: 16px;
    transition: 0.3s;
}

.btn-p:hover { filter: brightness(1.1); }

/* ==========================================================================
   7. MÓDULO: PROVEEDORES
   ========================================================================== */
.prov-titulo { 
    color: var(--naranja); 
    margin-top: 0; 
}

/* Alerta amarilla de Recordatorio */
.prov-alerta {
    background: #fff3cd;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    border-left: 5px solid #ffc107;
}

.prov-alerta-titulo { margin: 0; color: #856404; }
.prov-alerta-texto { margin: 5px 0 0 0; }

/* Controles del Formulario */
.prov-formulario { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 30px; 
}
.prov-input-nombre { flex: 2; }
.prov-select-dia { flex: 1; }

/* Grid de los 7 días */
.prov-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

/* Tarjeta individual de cada día */
.prov-dia-card {
    padding: 15px;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

/* Colores dinámicos: Normal vs Día Actual */
.prov-dia-card.dia-normal { background: #f9f9f9; border: 1px solid #eee; }
.prov-dia-card.dia-hoy { background: #e8f4f3; border: 2px solid var(--turquesa); }

.prov-dia-titulo { margin: 0 0 10px 0; }
.prov-dia-titulo.texto-normal { color: #333; }
.prov-dia-titulo.texto-hoy { color: var(--turquesa); }

/* Lista de nombres */
.prov-lista { padding-left: 20px; margin: 0; font-size: 14px; }
.prov-lista-item { margin-bottom: 5px; }

/* Botón de eliminar (X) */
.prov-btn-eliminar {
    color: var(--rojo);
    cursor: pointer;
    margin-left: 10px;
    font-weight: bold;
    transition: color 0.2s;
}
.prov-btn-eliminar:hover { color: darkred; }

.prov-footer {
    margin-top: 30px;
    font-size: 12px;
    color: #888;
}