/* ============================================================
   1. BLOQUEO TOTAL DEL TEMA Y RESET
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

html, body {
    overflow: hidden !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ocultar elementos de WordPress/Elementor */
header, footer, aside, .sidebar, #header, #footer, 
.elementor-location-header, .elementor-location-footer,
#colophon, #masthead, .site-header, .site-footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}

#tecin-reservas-app {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #f8f9fa !important;
    z-index: 2147483647 !important;
    overflow-y: auto !important;
    padding: 20px;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, sans-serif;
}

.mi { font-family: 'Material Symbols Outlined' !important; vertical-align: middle; }

/* ============================================================
   2. PANTALLA DE LOGIN (CENTRADO TOTAL)
   ============================================================ */
#login-screen { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    min-height: 100vh;
    width: 100%;
    background: #f0f2f5;
}

.login-card { 
    background: white; 
    padding: 40px; 
    border-radius: 15px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
    text-align: center; 
    width: 350px;
    max-width: 90%;
}

.login-card h2 { margin: 15px 0; color: #2c3e50; }

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

.login-btn { 
    width: 100%; 
    padding: 12px; 
    background: #2c3e50; 
    color: white; 
    border: none; 
    cursor: pointer; 
    border-radius: 8px; 
    font-weight: bold; 
    margin-top: 10px;
}


/* ============================================================
   3. CABECERA DE USUARIO (CON CONTRASTE ALTO)
   ============================================================ */
.user-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    background: #2c3e50; 
    color: #ffffff !important; /* Forzamos texto blanco puro */
    padding: 12px 25px; 
    border-radius: 8px; 
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.user-header h3 {
    margin: 0;
    color: #ffffff !important; /* Forzamos color en el encabezado */
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-header .mi { 
    color: #ffffff !important; /* Icono blanco */
    font-size: 35px;
}

#logged-user-display {
    color: #ffffff; /* Un azul claro/brillante para el nombre del usuario, resalta sobre blanco */
    font-weight: 800;
    text-transform: capitalize;
    background: rgba(255,255,255,0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

.nav-btn-exit { 
    background: #e74c3c; 
    color: white; 
    border: none; 
    padding: 8px 18px; 
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.3s;
}

.nav-btn-exit:hover {
    background: #c0392b;
}


.top-panels { margin-bottom: 15px; }

.legend-panel-top {
    display: flex; gap: 10px; background: white; padding: 12px; border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); margin-bottom: 10px;
}

.legend-item { flex: 1; padding: 10px; border-radius: 6px; color: white; font-weight: bold; text-align: center; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; }

.bg-orange { background: #e67e22; }
.bg-yellow { background: #f1c40f; color: #2c3e50; }
.bg-red { background: #e74c3c; }

/* Panel Admin Horizontal */
.admin-hidden { display: none !important; }
.show-admin { 
    display: block !important; background: #fff; padding: 15px; border-radius: 8px; 
    border: 1px solid #ddd; margin-bottom: 15px; 
}
.admin-flex-row { display: flex; gap: 10px; align-items: center; }
.admin-flex-row input { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 13px; }
.admin-btn-csv { background: #27ae60; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; }
.admin-btn-save { background: #3498db; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; }

/* ============================================================
   4. CALENDARIO (GRID)
   ============================================================ */
.controls { display: flex; justify-content: center; align-items: center; gap: 30px; margin-bottom: 15px; background: white; padding: 10px; border-radius: 8px; }

.calendar-container { 
    display: grid; grid-template-columns: 90px repeat(5, 1fr); 
    background: white; border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden;
}

.cell { border: 0.5px solid #eee; min-height: 70px; display: flex; align-items: center; justify-content: center; padding: 5px; }
.header { background: #34495e; color: white; flex-direction: column; font-weight: bold; font-size: 14px; text-align: center; }
.header span { font-size: 11px; opacity: 0.8; margin-top: 3px; }

.section-divider { grid-column: span 6; background: #ecf0f1; padding: 10px; font-weight: bold; text-align: center; font-size: 12px; color: #7f8c8d; }

.sub-slots { display: flex; gap: 4px; width: 100%; height: 100%; }
.opt { 
    flex: 1; 
    height: 50px; 
    border: 2px solid transparent; 
    cursor: pointer; 
    border-radius: 4px; 
    font-size: 14px;       
    font-weight: bold; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center;   /* Centrar texto */
    line-height: 1.1;     /* Espaciado entre líneas para nombres largos */
    overflow: hidden;     /* No dejar que el texto salga */
    word-break: break-word; /* Romper palabras si es necesario */
    transition: 0.2s; 
    padding: 2px;         /* Espacio interno */
}
.opt-orange { border-color: #e67e22; color: #e67e22; }
.opt-yellow { border-color: #f1c40f; color: #f1c40f; }
.opt-red { border-color: #e74c3c; color: #e74c3c; }

.opt.active { color: white !important; }
.opt-orange.active { background: #e67e22; }
.opt-yellow.active { background: #f1c40f; color: #2c3e50 !important; }
.opt-red.active { background: #e74c3c; }

@media (max-width: 1000px) {
    .calendar-container { grid-template-columns: 70px repeat(5, 160px); overflow-x: auto; }
}