/* =========================================================
   ARQUITECTURA VISUAL IS-360 PREMIUM (SOLO ACABADOS Y TEXTURAS)
========================================================= */

/* === 1. VARIABLES CORPORATIVAS === */
:root {
    --bg-dark: #000000;
    --accent: #DEFF9A; /* Amarillo Facturación */
    --border-corporativo: #DEFF9A; 
    --text-main: #FFFFFF;
    --glass: rgba(10, 10, 10, 0.7);
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* === 2. RESET Y REGLA DE CERO SCROLL GLOBAL === */
::-webkit-scrollbar { display: none; } /* Oculta la barra de desplazamiento visualmente */

body { 
    margin: 0; 
    padding: 0; 
    font-family: var(--font-main); 
    color: var(--text-main); 
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('logos/APP 360-1.png'); 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed; 
    background-color: var(--bg-dark); 
    overflow: hidden; /* REGLA MAESTRA: PROHIBIDO EL SCROLL EN EL PISO PRINCIPAL */
    -ms-overflow-style: none; 
    scrollbar-width: none;
}

/* === 3. ACABADOS DE CRISTAL (GLASSMORPHISM) === */
.glass-panel { 
    background: var(--glass); 
    backdrop-filter: blur(25px); 
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 2rem; 
    box-shadow: 0 25px 50px rgba(0,0,0,0.6); 
}

.glass-card { 
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 2rem; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
.glass-card:hover { 
    border-color: var(--border-corporativo); 
    box-shadow: 0 15px 30px rgba(222, 255, 154, 0.15); 
    background: rgba(222, 255, 154, 0.08); 
}

/* === 4. COMPONENTES DE INTERFAZ (PINTURA DE BOTONES E INPUTS) === */
input, select { 
    background: rgba(0, 0, 0, 0.6); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    color: #fff; 
    border-radius: 10px; 
    outline: none; 
    transition: 0.3s; 
    color-scheme: dark;
}
input:focus, select:focus { 
    border-color: var(--accent); 
    background: #000; 
}

label { 
    color: #aaa; 
    font-weight: 800; 
}

.btn-ghost { 
    background: rgba(0,0,0,0.3); 
    border: 2px solid #fff; 
    color: #fff; 
    border-radius: 40px; 
    transition: 0.3s; 
    backdrop-filter: blur(5px); 
}
.btn-ghost:hover { 
    background: #fff; 
    color: #000; 
}

.btn-nav { 
    background: rgba(0,0,0,0.5); 
    border: 1px solid rgba(255,255,255,0.1); 
    color: #fff; 
    border-radius: 50%; 
    transition: 0.3s; 
}
.btn-nav:hover { 
    border-color: var(--accent); 
    color: var(--accent); 
    background: rgba(222, 255, 154, 0.1); 
}
.btn-nav.danger:hover { 
    border-color: #FF3B30; 
    color: #FF3B30; 
    background: rgba(255, 59, 48, 0.1); 
}

.badge-notification { 
    background: #FF3B30; 
    color: white; 
    border-radius: 50%; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.5); 
}

/* Tarjetas de Modalidad de Cobro */
.mod-card { 
    border: 1px solid rgba(255,255,255,0.1); 
    background: rgba(0,0,0,0.5); 
    border-radius: 10px; 
    transition: 0.3s; 
    color: #888; 
}
.mod-card.active { 
    border-color: var(--accent); 
    background: rgba(222, 255, 154, 0.1); 
    color: var(--accent); 
}

/* Filas Dinámicas de la Bitácora (Solo Pintura) */
.row-dia-nueva { 
    background: rgba(0,0,0,0.4); 
    border-radius: 10px; 
    border: 1px solid rgba(255,255,255,0.05); 
    transition: 0.3s;
}
.row-dia-nueva:hover { 
    background: rgba(0,0,0,0.6); 
    border-color: rgba(255,255,255,0.2); 
}
.btn-del-row { 
    color: #FF3B30; 
    background: transparent; 
    border: none; 
    cursor: pointer; 
    transition: 0.3s;
}
.btn-del-row:hover { 
    transform: scale(1.2); 
}

/* Monitor de Totales (Pintura) */
.monitor-tabla { 
    background: rgba(0,0,0,0.6); 
    border-radius: 12px; 
    border: 1px solid rgba(255,255,255,0.1); 
}
.monitor-row { 
    border-bottom: 1px solid rgba(255,255,255,0.05); 
}
.monitor-value { 
    color: var(--accent); 
    background: rgba(0,0,0,0.3); 
}
.monitor-total { 
    background: var(--accent) !important; 
    color: #000 !important; 
}

/* === 5. FONDOS OSCUROS DE NOTIFICACIONES Y VOUCHER === */
.modal-overlay { 
    background: rgba(0,0,0,0.85); 
    backdrop-filter: blur(10px); 
    z-index: 5000; 
}
.alert-box { 
    background: #111; 
    border: 1px solid rgba(255,255,255,0.1); 
    border-radius: 20px; 
    box-shadow: 0 30px 60px rgba(0,0,0,0.9); 
}
.modal-blanco { 
    background: #ffffff; 
    color: #000; 
    border-radius: 20px; 
    box-shadow: 0 25px 50px rgba(0,0,0,0.8); 
}

/* Acabados del Voucher en Vivo y Auditoría */
.vw-item { 
    background: #f9fafb; 
    border: 1px solid #eee; 
    border-radius: 12px; 
}
.vw-header { 
    border-bottom: 2px solid #000; 
}
.vw-folio { 
    background: #000; 
    color: #fff; 
    border-radius: 6px; 
}
.vw-table th { 
    background: #eee; 
    border: 1px solid #ccc; 
}
.vw-table td { 
    border: 1px solid #ccc; 
    color: #333;
}
.vw-finanzas td { 
    border: 1px solid #ccc; 
    background: #FFF2CC; 
}
.btn-alert, .vw-btn-black { 
    background: var(--accent); 
    color: #000; 
    border: none; 
}
.vw-btn-black { 
    background: #000; 
    color: #fff; 
}