html, body { max-width: 100vw; overflow-x: hidden; width: 100%; margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }

body { font-family: 'Nunito', -apple-system, sans-serif; background: #f4f7f6; color: #333; margin: 0; padding: 2vh 15px 5vh 15px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; transition: background 0.3s, color 0.3s; -webkit-tap-highlight-color: transparent;}

.container { width: 100%; max-width: 480px; background: white; padding: 35px 20px; border-radius: 28px; box-shadow: 0 10px 40px rgba(0,0,0,0.06); position: relative; transition: background 0.3s; display: flex; flex-direction: column; align-items: center; animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-sizing: border-box; overflow: hidden;}

.header { text-align: center; margin-bottom: 25px; width: 100%; position: relative; display: flex; flex-direction: column; align-items: center;}
h1 { color: var(--primary); margin: 0; font-weight: 900; letter-spacing: 1px; font-size: 2.2em;}

.logo-app { max-width: 110px; height: auto; margin-bottom: 10px; display: block; animation: float 6s ease-in-out infinite; object-fit: contain; border-radius: 0;} 
.header-h1-small { font-size: 1.8em; } 

#seccion-login, #seccion-usuario, #seccion-historial, #seccion-reglamento { display: none; width: 100%; text-align: center;}
.caja-form { background: #f8fafc; padding: 35px 20px; border-radius: 20px; border: 1px solid #e2e8f0; width: 100%; display: flex; flex-direction: column; align-items: center; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); box-sizing: border-box;}
.caja-form h3 { margin-top: 0; color: var(--primary); padding-bottom: 5px; width: 100%; text-align: center; font-size: 1.5em; font-weight: 800;}

.input-wrapper { position: relative; width: 100%; margin-bottom: 15px; }
input, select, textarea { width: 100%; padding: 18px 20px; border-radius: 14px; border: 2px solid #cbd5e1; background: white; color: #333; font-size: 1.15em; text-align: center; outline: none; transition: all 0.3s; font-weight: 700; box-sizing: border-box; font-family: 'Nunito', sans-serif;}
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(59, 89, 152, 0.1); transform: translateY(-2px);}

.toggle-password { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #64748b; user-select: none; z-index: 10;}
.toggle-password svg { width: 24px; height: 24px; transition: 0.3s; }

:root { --primary: #3b5998; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #0ea5e9; --keypad-bg: #ffffff; --keypad-border: #e2e8f0; --track-color: #e2e8f0;}

/* 🔥 ENCABEZADO CENTRADO CON GRID 🔥 */
.user-header-row { display: grid; grid-template-columns: 55px 1fr 55px; align-items: center; gap: 10px; margin-bottom: 20px; width: 100%; }
.user-avatar { width: 55px; height: 55px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, #60a5fa 100%); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.4em; font-weight: 900; box-shadow: 0 4px 10px rgba(59, 89, 152, 0.3); letter-spacing: 1px; justify-self: start;}
.btn-refresh-user { background: none; border: none; cursor: pointer; color: var(--primary); padding: 8px; transition: 0.3s; border-radius: 50%; display: flex; align-items: center; justify-content: center; justify-self: end;}
.btn-refresh-user:active { transform: scale(0.8) rotate(90deg); }

.saldo-circle { position: relative; width: 210px; height: 210px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 10px auto 15px auto; background: conic-gradient(var(--prog-color, #10b981) var(--prog-pct, 0%), var(--track-color) 0); box-shadow: 0 15px 35px rgba(0,0,0,0.08); }
.saldo-circle::before { content: ''; position: absolute; top: 12px; left: 12px; right: 12px; bottom: 12px; background: white; border-radius: 50%; z-index: 1; box-shadow: inset 0 5px 15px rgba(0,0,0,0.05); }
.saldo-circle > * { z-index: 2; position: relative; } 
.clases-grandes { font-size: 4.5em; font-weight: 900; margin: 0; line-height: 1;}
.saldo-label { font-size: 0.75em; color: #64748b; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-top: 5px; text-align: center; line-height: 1.2; max-width: 80%; }

.color-rojo { color: var(--danger) !important; } .color-naranja { color: var(--warning) !important; } .color-verde { color: var(--success) !important; }
.action-grid { display: flex; flex-direction: column; align-items: center; width: 100%; margin-bottom: 30px; box-sizing: border-box;}

.btn-ausencia-full { padding: 18px 10px; border-radius: 20px; border: none; cursor: pointer; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 1.1em; font-weight: 800; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 8px 20px rgba(0,0,0,0.15); width: 100%; box-sizing: border-box; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); font-family: 'Nunito', sans-serif;}
.btn-ausencia-full:active { transform: scale(0.96); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.btn-ausencia-full:disabled { filter: grayscale(1); opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-ausencia-full svg { width: 34px; height: 34px; margin-bottom: 2px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); stroke-width: 2.5;}

.menu-list { display: flex; flex-direction: column; gap: 12px; width: 100%; box-sizing: border-box;}
.btn-menu { background: #f8fafc; border: 1px solid #e2e8f0; color: #334155; padding: 20px 22px; border-radius: 18px; font-size: 1.1em; font-weight: 700; display: flex; align-items: center; cursor: pointer; transition: all 0.2s; text-align: left; box-shadow: 0 4px 6px rgba(0,0,0,0.02); width: 100%; box-sizing: border-box; font-family: 'Nunito', sans-serif;}
.btn-menu:active { transform: scale(0.96); background: #f1f5f9; }
.btn-menu svg { margin-right: 15px; width: 26px; height: 26px; flex-shrink: 0; }
.btn-menu .arrow { margin-left: auto; color: #cbd5e1; font-size: 1.4em; }

.btn-reglamento svg { stroke: #0ea5e9; } .btn-resena svg { stroke: var(--warning); } .btn-historial svg { stroke: var(--info); } .btn-clave svg { stroke: #8b5cf6; } .btn-salir { color: #ef4444; } .btn-salir svg { stroke: #ef4444; }

.stagger-item { opacity: 0; animation: slideUpFade 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; } .delay-5 { animation-delay: 0.5s; }

.btn { padding: 18px; border: none; border-radius: 16px; cursor: pointer; font-weight: 800; color: white; width: 100%; transition: all 0.2s; font-size: 1.15em; box-shadow: 0 4px 15px rgba(0,0,0,0.1); box-sizing: border-box; font-family: 'Nunito', sans-serif;}
.btn:active { transform: scale(0.96); box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
.link-recuperar { display: inline-block; margin-top: 20px; color: var(--primary); font-size: 1em; text-decoration: underline; cursor: pointer; font-weight: 800; padding: 10px;}

/* 🔥 BOTÓN TEMA CENTRADO 🔥 */
.btn-theme { 
    position: absolute; top: -15px; right: -5px; 
    background: #f1f5f9; border: none; cursor: pointer; z-index: 10; 
    width: 45px; height: 45px; border-radius: 50%; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: 0.3s;
    display: flex; justify-content: center; align-items: center; padding: 0;
}
.btn-theme svg { width: 22px; height: 22px; stroke: currentColor; }

.parpadeo-alerta { animation: parpadeo 1.5s infinite; background: #fee2e2; padding: 18px; border-radius: 16px; border: 2px solid #fecaca; margin-bottom: 25px; width: 100%; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.1); box-sizing: border-box;}

@keyframes parpadeo { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.98); } 100% { opacity: 1; transform: scale(1); } }
@keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-5px); } 100% { transform: translateY(0px); } }
@keyframes slideUpFade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 1000; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box;}
.modal-content { background: white; padding: 40px 25px; border-radius: 24px; width: 100%; max-width: 400px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); text-align: center; animation: popIn 0.3s ease-out; box-sizing: border-box;}

.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); color: white; padding: 15px 30px; border-radius: 30px; font-weight: 800; font-size: 1.05em; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 9999; box-shadow: 0 10px 25px rgba(0,0,0,0.2); text-align: center; width: 90%; max-width: 400px; opacity: 0; pointer-events: none;}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.error { background: #ef4444; border: 2px solid #b91c1c;}
.toast.success { background: #10b981; border: 2px solid #059669;}
.toast.warning { background: #f59e0b; border: 2px solid #d97706;}

.caja-info-horario { background: #f0f9ff; padding: 20px; border-radius: 16px; border-left: 6px solid #0ea5e9; text-align: left; margin-bottom: 25px; width: 100%; box-sizing: border-box;}
.caja-reglamento { background: #fffbeb; padding: 25px 20px; border-radius: 16px; border: 1px solid #fde68a; text-align: left; font-size: 0.95em; max-height: 55vh; overflow-y: auto; color: #451a03; width: 100%; box-sizing: border-box; }

.top-bar-historial { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; width: 100%; box-sizing: border-box;}
.btn-back { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border: 1px solid #e2e8f0; border-radius: 50%; width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; cursor: pointer; color: var(--primary); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 6px 12px rgba(59, 89, 152, 0.15), inset 0 -2px 4px rgba(0,0,0,0.02); flex-shrink: 0; }
.btn-back:active { transform: scale(0.85); box-shadow: 0 2px 5px rgba(59, 89, 152, 0.1), inset 0 2px 4px rgba(0,0,0,0.05); }

.proyeccion-card { background:white; border-radius:16px; border:1px solid var(--keypad-border); box-shadow:0 4px 10px rgba(0,0,0,0.03); overflow:hidden; width: 100%; box-sizing: border-box;}
.proyeccion-item { padding:12px 18px; border-bottom:1px solid #f1f5f9; display:flex; justify-content:space-between; align-items:center; text-align: left; width: 100%; box-sizing: border-box;}
.proyeccion-item:last-child { border-bottom:none; }
.proyeccion-fecha { font-weight:800; color:#334155; font-size:1.05em; }
.btn-cancelar-futura { background: #fee2e2; color: #ef4444; border: 1px solid #fecaca; padding: 8px 12px; border-radius: 8px; font-weight: 800; cursor: pointer; font-size: 0.85em; transition: 0.3s; margin-left: 10px; white-space: nowrap; font-family: 'Nunito', sans-serif;}
.btn-cancelar-futura:hover { background: #ef4444; color: white; }
.historial-card { background: white; border-radius: 16px; padding: 0; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.04); overflow: hidden; border: 1px solid var(--keypad-border); text-align: left; width: 100%; box-sizing: border-box;}
.historial-card-header { background: #f8fafc; padding: 15px 20px; border-bottom: 1px solid transparent; font-weight: 800; color: var(--primary); font-size: 1.1em; cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; transition: background 0.2s, border-bottom-color 0.2s; width: 100%; box-sizing: border-box;}
.historial-card-header:hover { background: #f1f5f9; }
.historial-card-body { display: none; padding: 5px 0; width: 100%; box-sizing: border-box;}
.historial-item { display: flex; flex-direction: column; padding: 15px 20px; border-bottom: 1px solid var(--keypad-border); width: 100%; box-sizing: border-box; word-wrap: break-word;}
.historial-date { font-size: 0.85em; color: #64748b; margin-bottom: 6px; font-weight: 800; }
.historial-action { font-size: 1em; line-height: 1.4; color: #334155; font-weight: 600;}
.loader-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; width: 100%; box-sizing: border-box;}
.spinner { width: 50px; height: 50px; border: 5px solid rgba(59, 89, 152, 0.2); border-left-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20px;}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

body.dark-mode { background: #0f172a; color: #f8fafc; }
body.dark-mode .container { background: #1e293b; box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
body.dark-mode h1 { color: #60a5fa; }
body.dark-mode h2, body.dark-mode h3 { color: #bae6fd; }
body.dark-mode .caja-form, body.dark-mode .modal-content { background: #334155; border-color: #475569; color: #f8fafc; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);}
body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background: #1e293b; color: #fff; border: 2px solid #475569; }
body.dark-mode input:focus { border-color: #60a5fa; box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.1); }

body.dark-mode { --track-color: #334155; }
body.dark-mode .saldo-circle { box-shadow: 0 15px 35px rgba(0,0,0,0.3); } 
body.dark-mode .saldo-circle::before { background: #1e293b; box-shadow: inset 0 5px 15px rgba(0,0,0,0.2); }
body.dark-mode .saldo-label { color: #94a3b8; }

body.dark-mode .btn-menu { background: #334155; border-color: #475569; color: #f8fafc; box-shadow: 0 4px 6px rgba(0,0,0,0.3);}
body.dark-mode .btn-theme { background: #334155; box-shadow: 0 4px 10px rgba(0,0,0,0.4);}
body.dark-mode .caja-info-horario { background: #1e3a8a; border-left-color: #38bdf8; color: #e0f2fe;}

body.dark-mode .caja-reglamento { background: #422006; border-color: #78350f; color: #fde68a; }
body.dark-mode .parpadeo-alerta { background: #450a0a; border-color: #7f1d1d;}
body.dark-mode .link-recuperar { color: #60a5fa; }

body.dark-mode .proyeccion-card { background: #334155; border-color: #475569; }
body.dark-mode .proyeccion-item { border-bottom-color: #475569; }
body.dark-mode .proyeccion-fecha { color: #f8fafc; }
body.dark-mode .btn-cancelar-futura { background: #450a0a; border-color: #7f1d1d; color: #fca5a5; }
body.dark-mode .btn-cancelar-futura:hover { background: #ef4444; color: white; }
body.dark-mode .historial-card { background: #334155; border-color: #475569; box-shadow: 0 4px 15px rgba(0,0,0,0.3);}
body.dark-mode .historial-card-header { background: #1e293b; color: #60a5fa;}
body.dark-mode .historial-card-body { background: #1e293b; }
body.dark-mode .historial-item { border-bottom-color: #475569; }
body.dark-mode .historial-action { color: #e2e8f0; }
body.dark-mode .btn-refresh-user { color: #60a5fa; }

#btnReintentar { display: none; background: var(--danger); margin-top: 15px; }
.alerta-recuperacion { background-color: #fffbeb; color: #d97706; border: 1px solid #fde68a; border-radius: 12px; padding: 12px 15px; margin-bottom: 25px; font-size: 0.9em; text-align: center; font-weight: 700; display: none; width: 100%; box-sizing: border-box; }
body.dark-mode .alerta-recuperacion { background-color: #422006; color: #fbbf24; border-color: #78350f; }
.caja-recordatorio { background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; padding: 15px 20px; margin-bottom: 25px; font-size: 0.9em; color: #475569; text-align: left; line-height: 1.5; width: 100%; box-sizing: border-box; box-shadow: 0 4px 6px rgba(0,0,0,0.02); }
body.dark-mode .caja-recordatorio { background-color: #1e293b; border-color: #475569; color: #cbd5e1; }

/* 🔥 BANNER INSTALAR APP 🔥 */
.install-banner {
    position: fixed; bottom: -120px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #3b5998 0%, #1e293b 100%);
    color: white; padding: 15px 20px; border-radius: 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4); z-index: 9000;
    transition: bottom 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 92%; max-width: 400px; font-family: 'Nunito', sans-serif;
}
.install-banner.show { bottom: 25px; }
.install-info { display: flex; flex-direction: column; gap: 3px; flex: 1; text-align: left;}
.install-info strong { font-size: 1.05em; font-weight: 900; }
.install-info small { font-size: 0.85em; opacity: 0.8; font-weight: 600;}
.btn-instalar { background: #f59e0b; color: white; border: none; padding: 10px 15px; border-radius: 12px; font-weight: 800; cursor: pointer; transition: 0.2s; font-family: inherit;}
.btn-instalar:active { transform: scale(0.9); }
.btn-close-banner { background: none; border: none; color: rgba(255,255,255,0.5); font-size: 1.5em; cursor: pointer; padding: 0 5px; }