/* assets/css/style.css
   Esquema claro/azul dentro de la app
   + login oscuro independiente
*/

/* ======= Base ======= */
body{
    font-family: system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f3f4f6;
    color: #111827;
    margin: 0;
}

/* Dar espacio para el footer fijo en todas las páginas
   excepto el login (body.login-page) */
body:not(.login-page){
    padding-bottom: 5rem;  /* ajustable, pero 5rem cubre de sobra el footer */
}

/* layout principal */
.app-wrapper{
    display: flex;
    min-height: 100vh;
}

/* ======= SIDEBAR + CONTENT LAYOUT ======= */
#sidebar-wrapper{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 260px;
    background: #111827;
    color: #e5e7eb;
    overflow-y: auto;
    z-index: 1040;
    transition: transform .25s ease-in-out;
}

#page-content-wrapper{
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* contenido */
.app-main{
    flex: 1;
    padding: 1.5rem;
}

/* ======= Sidebar ======= */
#sidebar-wrapper .sidebar-heading{
    padding: .85rem 1rem;
    font-weight: 700;
    background: #020617;
    border-bottom: 1px solid #020617;
}

#sidebar-wrapper .nav-link{
    color: #e5e7eb;
    padding: .5rem .9rem;
    margin: .1rem .5rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
#sidebar-wrapper .nav-link:hover,
#sidebar-wrapper .nav-link.active{
    background: #1f2937;
    color: #fff;
}

/* ======= Topbar ======= */
.navbar.app-topbar{
    background-color: #1d4ed8; /* azul */
    color: #ffffff;
}
.navbar.app-topbar .navbar-brand{
    color: #ffffff !important;
    font-weight: 700;
}
.navbar.app-topbar .navbar-text{
    color: #e5e7eb !important;
}

/* bloque derecha (fecha/hora + usuario) */
.topbar-right{
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.topbar-datetime span{
    display: block;
    line-height: 1.2;
}
#topbar-date{
    font-size: .78rem;
    color: #e0e7ff;
}
#topbar-time{
    font-size: .9rem;
    color: #ffffff;
}

/* Texto de nivel / ranking en topbar */
.topbar-ranking span{
    font-size: .78rem;
}

/* ======= Cards ======= */
.card{
    border-radius: .75rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 0 15px rgba(15,23,42,.06);
    background-color: #ffffff;
}
.card-header,
.card-footer{
    background-color: #f9fafb;
}

/* ======= Footer / temporizador ======= */
.app-footer{
    position: fixed;
    left: 0;         /* en desktop se corrige con media query */
    right: 0;
    bottom: 0;
    background: #020617;
    color: #e5e7eb;
    padding: .18rem .9rem;
    font-size: .75rem;
    border-top: 1px solid #111827;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1030;
}

.timer-display{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
                 Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight: 700;
    letter-spacing: .05em;
    color: #111827;
    padding: .05rem .35rem;
    border-radius: .35rem;
    background: #e5e7eb;
    min-width: 80px;
    text-align: center;
    font-size: .8rem;
}
.timer-display.timer-running{
    background: #1d4ed8;
    color: #ffffff;
}
.timer-display.timer-done{
    background: #fee2e2;
    color: #991b1b;
}
.timer-controls .btn{
    font-size: .7rem;
    padding: .15rem .4rem;
}

/* ======= LAYOUT RESPONSIVE (SIDEBAR + FOOTER) ======= */

/* Desktop (lg y superior) */
@media (min-width: 992px){
    /* sidebar visible por defecto */
    #sidebar-wrapper{
        transform: translateX(0);
    }

    /* cuando se colapsa en desktop */
    body.sidebar-collapsed #sidebar-wrapper{
        transform: translateX(-260px);
    }

    /* el contenido deja hueco para el sidebar */
    #page-content-wrapper{
        margin-left: 260px;
    }
    body.sidebar-collapsed #page-content-wrapper{
        margin-left: 0;
    }

    /* footer alineado con el contenido */
    .app-footer{
        left: 260px;
    }
    body.sidebar-collapsed .app-footer{
        left: 0;
    }
}

/* Mobile / tablet pequeña */
@media (max-width: 991.98px){
    /* sidebar oculto por defecto */
    #sidebar-wrapper{
        transform: translateX(-260px);
    }
    /* cuando se abre en móvil, se desliza encima del contenido */
    body.sidebar-open-mobile #sidebar-wrapper{
        transform: translateX(0);
    }

    /* contenido y footer ocupan todo el ancho */
    #page-content-wrapper{
        margin-left: 0;
    }
    .app-footer{
        left: 0;
    }
}

/* ======= Formularios / tablas ======= */
.form-control,
.form-select{
    font-size: .9rem;
}

/* ======= LOGIN (oscuro tipo vikingo) ======= */
body.login-page{
    min-height: 100vh;
    margin: 0;
    background:
      radial-gradient(circle at top, #111827 0, #020617 55%, #000000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e5e7eb;
}

.login-wrapper{
    width: 100%;
    max-width: 900px;
    padding: 1.5rem;
}

.login-cards{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

.login-card{
    background: #020617;
    border-radius: .9rem;
    border: 1px solid #1f2937;
    box-shadow: 0 20px 45px rgba(0,0,0,.85);
    color: #e5e7eb;
}

/* Logo (izquierda) */
.login-card-logo{
    flex: 1 1 260px;
    max-width: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* Formulario (derecha) */
.login-card-form{
    flex: 1 1 320px;
    max-width: 420px;
}

.login-logo{
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,.9));
}

.login-card-form .card-body{
    padding: 2rem;
}

.login-card-form h1{
    font-weight: 700;
    letter-spacing: .03em;
}

/* campos del login */
body.login-page .form-control{
    background: #020617;
    border-color: #374151;
    color: #e5e7eb;
}
body.login-page .form-control:focus{
    background: #020617;
    color: #e5e7eb;
    border-color: #f97316;
    box-shadow: 0 0 0 .15rem rgba(249,115,22,.35);
}
body.login-page .btn-primary{
    background: linear-gradient(135deg, #dc2626, #991b1b);
    border-color: #991b1b;
    font-weight: 600;
}
body.login-page .btn-primary:hover{
    background: linear-gradient(135deg, #991b1b, #450a0a);
    border-color: #450a0a;
}

/* Responsive login */
@media (max-width: 768px){
    .login-card-form,
    .login-card-logo{
        max-width: 100%;
    }
}