/* =========================================
   BASE.CSS - Teatro Tickets
   Core: Reset, Fuentes, Utilidades, Footer
   ========================================= */

/* --- 1. RESET Y BASE --- */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #1a1a1a;
    color: white;
    min-height: 100vh;
    position: relative; /* Necesario para el footer absoluto */
}

a { 
    text-decoration: none; 
    color: inherit; 
    transition: color 0.3s; 
}
a:hover { 
    color: #6feaf6; 
}

/* --- 2. UTILIDADES DE TEXTO Y COLOR --- */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.font-bold   { font-weight: bold; }
.font-small  { font-size: 0.85rem; }
.text-xs     { font-size: 0.75rem; }

/* Paleta Global */
.text-cyan   { color: #6feaf6; }
.text-gray   { color: #aaa; }
.text-green  { color: #2ecc71; }
.text-red    { color: #e74c3c; }
.text-yellow { color: #f1c40f; }

/* --- 3. UTILIDADES DE ESPACIADO (Márgenes) --- */
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mt-auto { margin-top: auto; }

.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }

.ml-15 { margin-left: 15px; }
.mr-10 { margin-right: 10px; }

/* --- 4. UTILIDADES DE LAYOUT (Flexbox & Helpers) --- */
.hidden { display: none !important; }
.w-100  { width: 100%; }
.w-auto { width: auto; }

/* Flexbox Helpers */
.flex-box { 
    display: flex; 
    gap: 10px; 
}
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

.flex-1 { flex: 1; }
.flex-2 { flex: 2; }

.align-center { align-items: center; }
.align-start  { align-items: flex-start; }
.align-bottom { align-items: flex-end; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }

.gap-10 { gap: 10px; }

/* --- 5. FOOTER GLOBAL --- */
.site-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #111;
    border-top: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.85rem;
    color: #666;
    z-index: 1000;
}

.footer-content { 
    display: flex; 
    gap: 15px; 
    align-items: center; 
}

.version-badge {
    background-color: #333; 
    color: #6feaf6;
    padding: 2px 8px; 
    border-radius: 4px;
    font-family: monospace; 
    font-size: 0.75rem; 
    border: 1px solid #444;
}

/* Modificadores de Body para Footer */
body.admin-mode, 
body.scanner-mode { 
    padding-bottom: 0; 
}

body.scanner-mode .site-footer {
    background: rgba(0, 0, 0, 0.5);
    border: none;
    position: fixed;
}