/* ============================================================
   CONTENEDOR CRISTAL PULIDO (BORDES PERFECTOS)
   ============================================================ */
.glass-container {
    width: 85vw; 
    max-width: 340px; 
    margin: 0 auto;
    padding: 24px;
    border-radius: 24px;
    color: var(--text-color);
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(12px) saturate(180%) brightness(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(180%) brightness(1.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), inset 0 4px 10px rgba(255, 255, 255, 0.2);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.dark-mode .glass-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 4px 10px rgba(255, 255, 255, 0.1);
}

.glass-container h2, .glass-container h1 { color: var(--text-color); }
.glass-container p { color: var(--text-secondary); }

/* Botón Cerrar Sesión Superior */
.global-logout-btn { position: fixed; bottom: 550px; right: 20px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); color: var(--text-color); padding: 10px 18px; border-radius: 14px; font-size: 0.9rem; font-weight: 600; cursor: pointer; z-index: 1000; transition: all 0.2s ease;}
.global-logout-btn:hover { background: rgba(255, 255, 255, 0.4); transform: scale(0.98); }
.dark-mode .global-logout-btn { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); }

/* Calendario y Header */
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.header-left { display: flex; align-items: center; gap: 10px; }
header h1 { font-size: 1.4rem; font-weight: 600; text-transform: capitalize; }
header button { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--today-arrow); padding: 5px;}
.icon-btn { font-size: 1.2rem; }
.calendar-header { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.8rem; margin-bottom: 12px; font-weight: 500;}
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.day { aspect-ratio: 1; display: flex; justify-content: center; align-items: center; border-radius: 50%; font-weight: 500; cursor: pointer; font-size: 1.1rem; position: relative; transition: all 0.2s ease; }
.day:hover { background-color: var(--day-hover-bg); }
.day.empty { visibility: hidden; }
.day.today { color: var(--today-arrow); font-weight: 700; }
.day.today::before { content: ''; position: absolute; top: 1px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 5px solid var(--today-arrow); }

/* Colores de rutinas */
.day.upper, .day.push, .day.pull, .day.lower { color: white !important; }
.upper { background-color: var(--upper-color); }
.push { background-color: var(--push-color); }
.pull { background-color: var(--pull-color); }
.lower { background-color: var(--lower-color); }
.day.upper:hover, .day.push:hover, .day.pull:hover, .day.lower:hover { filter: brightness(0.85); }
.stats-bar { margin-top: 24px; padding: 16px; background: var(--stats-bg); border-radius: 16px; text-align: center; font-size: 0.95rem; font-weight: 600; }

/* Modal y Botones */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; justify-content: center; align-items: center; z-index: 100;}
.hidden { display: none !important; }
.modal-content { background: var(--modal-bg); padding: 24px; border-radius: 24px; width: 90%; max-width: 320px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); color: var(--text-color);}
.modal-content h2 { margin-bottom: 5px; font-size: 1.2rem; }
.modal-content p { color: var(--text-secondary); margin-bottom: 20px; font-size: 0.9rem;}
.modal-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.modal-options button { padding: 14px; border: none; border-radius: 12px; font-size: 1rem; cursor: pointer; color: white; font-weight: 600; text-align: left; transition: transform 0.1s;}
.modal-options button:active { transform: scale(0.98); }
.btn-upper { background-color: var(--upper-color); }
.btn-push { background-color: var(--push-color); }
.btn-pull { background-color: var(--pull-color); }
.btn-lower { background-color: var(--lower-color); }
.btn-rest { background-color: var(--stats-bg); color: var(--text-color) !important; text-align: center !important;}
.extra-tracking { display: flex; flex-direction: column; gap: 10px; background: var(--stats-bg); padding: 16px; border-radius: 12px; margin-bottom: 20px; font-size: 0.9rem; font-weight: 500; text-align: left;}
.extra-tracking label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.btn-close { background: none; border: none; color: var(--today-arrow); cursor: pointer; font-size: 1rem; font-weight: 600; padding: 10px; }

/* Login y Ojito */
.auth-container { display: flex; flex-direction: column; gap: 15px; margin-top: 10px;}
.auth-input { width: 100%; padding: 14px; border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; background: rgba(0,0,0,0.05); color: var(--text-color); font-size: 1rem; outline: none; transition: border 0.3s;}
.dark-mode .auth-input { background: rgba(0,0,0,0.2); }
.auth-input:focus { border-color: var(--today-arrow); }
.btn-auth { width: 100%; padding: 14px; border: none; border-radius: 12px; background-color: var(--today-arrow); color: white; font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform 0.1s;}
.btn-auth:active { transform: scale(0.98); }
.btn-register { background-color: transparent; color: var(--today-arrow); border: 1px solid var(--today-arrow); }
.password-wrapper { position: relative; width: 100%; }
.eye-btn { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-color); cursor: pointer; padding: 0; opacity: 0.6; transition: opacity 0.2s ease, transform 0.1s ease; }
.eye-btn:hover { opacity: 1; }
.eye-btn:active { transform: translateY(-50%) scale(0.9); }

/* =========================================
   ACTUALIZACIÓN: Círculo del día "Hoy"
   Reemplaza o sobrescribe el .day.today actual
========================================= */
.day.today {
    color: var(--today-arrow);
    font-weight: 700;
    border: 2px solid var(--today-arrow);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.3);
}
.day.today::before {
    display: none !important; /* Ocultamos la flecha vieja */
}

/* =========================================
   RACHAS Y FUEGO EVOLUTIVO
========================================= */
.streak-counters {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.streak-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    gap: 4px;
}

.fire-icon {
    display: inline-block;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Nivel 0: 0 días (Apagado/Gris) */
.fire-lvl-0 { 
    transform: scale(0.8); 
    filter: grayscale(100%) opacity(0.3); 
}
/* Nivel 1: 1 a 9 días (Fuego normal pequeño) */
.fire-lvl-1 { 
    transform: scale(1.1); 
    filter: drop-shadow(0 0 5px rgba(255, 165, 0, 0.8)); 
}
/* Nivel 2: 10 a 19 días (Fuego Rojo más grande) */
.fire-lvl-2 { 
    transform: scale(1.5); 
    /* Cambiamos el tono hacia rojo con hue-rotate */
    filter: hue-rotate(-40deg) saturate(200%) drop-shadow(0 0 10px rgba(255, 0, 0, 0.8)); 
}
/* Nivel 3: 20+ días (Fuego Morado Máximo) */
.fire-lvl-3 { 
    transform: scale(1.9); 
    /* Cambiamos el tono hacia morado intenso */
    filter: hue-rotate(230deg) saturate(250%) drop-shadow(0 0 15px rgba(138, 43, 226, 0.9)); 
}

/* =========================================
   DASHBOARD Y RESPONSIVE (MÓDULOS)
========================================= */
.dashboard-wrapper {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

@media (max-width: 768px) {
    .dashboard-wrapper {
        flex-direction: column;
        align-items: center;
        padding: 10px;
    }
}