/* Estilos complementarios a Tailwind (CDN) para Mi Agenda */

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
}

/* Scrollbar sutil para navegadores WebKit */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #e2e8f0;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #cbd5e1;
}

/* Bottom nav movil: permite scroll horizontal (si el ancho no alcanza para
   todos los iconos) sin mostrar la barra de scroll. */
.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Sidebar colapsado: solo iconos */
#sidebar.collapsed {
    width: 5rem;
}
#sidebar.collapsed .sidebar-label,
#sidebar.collapsed #sidebar-title {
    display: none;
}
#sidebar.collapsed #sidebar-toggle svg {
    transform: rotate(180deg);
}

body.sidebar-collapsed #main-content {
    margin-left: 5rem;
}

/* Tarjetas de tareas del dashboard: fade-out + shrink al completarlas */
.tarea-card {
    max-height: 200px;
    overflow: hidden;
    transition: opacity 300ms ease, transform 300ms ease, max-height 300ms ease,
        padding 300ms ease, margin 300ms ease, border-width 300ms ease;
}
.tarea-card.tarea-card--exit {
    opacity: 0;
    transform: scale(0.92);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-width: 0;
    pointer-events: none;
}

/* Modo Despegue (LifeOS): termometros (range inputs) con track/thumb
   propios, ya que Tailwind (CDN) no cubre pseudo-elementos de range.
   El color (--slider-color) y el relleno del track los inyecta
   assets/js/lifeos-despegue.js en cada "input" segun el nivel 1-10. */
.slider-termometro {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 9999px;
    outline: none;
    transition: background 150ms ease;
}
.slider-termometro::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    background: #fff;
    border: 4px solid var(--slider-color, #6366f1);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
    cursor: pointer;
    transition: border-color 150ms ease, transform 150ms ease;
}
.slider-termometro::-webkit-slider-thumb:active {
    transform: scale(1.1);
}
.slider-termometro::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    background: #fff;
    border: 4px solid var(--slider-color, #6366f1);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
    cursor: pointer;
    transition: border-color 150ms ease, transform 150ms ease;
}
.slider-termometro::-moz-range-track {
    height: 10px;
    border-radius: 9999px;
    background: transparent;
}

/* Modo Despegue: al enviar el ritual el formulario se desvanece y el
   overlay de "despegue" aparece encima, antes de redirigir a "/". */
#despegue-formulario {
    transition: opacity 400ms ease, transform 400ms ease;
}
#despegue-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease;
}
body.despegue-lanzado #despegue-formulario {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
    pointer-events: none;
}
body.despegue-lanzado #despegue-overlay {
    opacity: 1;
    pointer-events: auto;
}
@keyframes despegue-rocket-launch {
    0%   { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-40px) scale(1.15); opacity: 0.9; }
}
body.despegue-lanzado .despegue-rocket {
    animation: despegue-rocket-launch 900ms ease-in forwards;
}

/* Modo Aterrizaje: al cerrar el sistema, el formulario se desvanece y una
   pantalla negra de "buenas noches" aparece encima antes de redirigir a "/". */
#aterrizaje-formulario {
    transition: opacity 400ms ease, transform 400ms ease;
}
#aterrizaje-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 600ms ease;
}
body.aterrizaje-cerrado #aterrizaje-formulario {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
    pointer-events: none;
}
body.aterrizaje-cerrado #aterrizaje-overlay {
    opacity: 1;
    pointer-events: auto;
}