/* =========================================================
   ABAQ - ORGANIZADOR DE TAREAS
   STYLES.CSS
   ========================================================= */


/* =========================================================
   1. CONFIGURACIÓN GENERAL
   ========================================================= */

/* Evita problemas con anchos, padding y bordes */
* {
    box-sizing: border-box;
}

/* Configuración general */
body {
    margin: 0;

    font-family: Arial, sans-serif;

    background-color: #ffffff;
    color: #263238;
}


/* =========================================================
   2. COLORES PRINCIPALES DEL SISTEMA

   Azul principal:      #2F5FAB
   Azul botones:        #2455A4
   Azul oscuro:         #1B4385
   Verde ABAQ:          #72B943
   Verde oscuro:        #5E9F36
   Blanco:              #FFFFFF
   ========================================================= */


/* =========================================================
   3. LOGIN Y REGISTRO
   ========================================================= */


/* ---------------------------------------------------------
   FONDO DE AMBAS PÁGINAS
   --------------------------------------------------------- */

body.login-page,
body.registro-page {
    margin: 0;

    width: 100%;
    min-height: 100vh;

    background-color: #2F5FAB;
}


/* Los dos contenedores ocupan toda la pantalla */
.login-container,
.registro-container {
    width: 100%;
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 30px;

    /* MISMO fondo azul */
    background-color: #2F5FAB;
}


/* ---------------------------------------------------------
   TARJETAS BLANCAS
   --------------------------------------------------------- */

.login-card,
.registro-card {
    width: 100%;

    padding: 35px;

    background-color: #FFFFFF;

    border: none;
    border-radius: 20px;

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.18);

    text-align: center;
}


/* Login un poco más pequeño */
.login-card {
    max-width: 420px;
}


/* Registro un poco más grande porque tiene más campos */
.registro-card {
    max-width: 480px;
}


/* ---------------------------------------------------------
   LOGOS
   --------------------------------------------------------- */

.login-logo,
.registro-logo {
    width: 130px;
    height: 130px;

    object-fit: contain;

    margin-bottom: 15px;
}


/* ---------------------------------------------------------
   TÍTULOS
   --------------------------------------------------------- */

.login-card h1,
.registro-card h1 {
    margin: 0 0 10px 0;

    color: #1D2B3A;

    font-size: 30px;
}


/* ---------------------------------------------------------
   SUBTÍTULOS
   --------------------------------------------------------- */

.login-subtitulo,
.registro-subtitulo {
    margin-bottom: 28px;

    color: #667085;

    font-size: 15px;
}


/* ---------------------------------------------------------
   FORMULARIOS
   --------------------------------------------------------- */

#formLogin,
#formRegistro {
    text-align: left;
}


/* Separación entre campos */
.campo-login,
.campo-registro {
    margin-bottom: 18px;
}


/* ---------------------------------------------------------
   LABELS
   --------------------------------------------------------- */

.campo-login label,
.campo-registro label {
    display: block;

    margin-bottom: 7px;

    color: #263238;

    font-weight: bold;
}


/* ---------------------------------------------------------
   INPUTS
   --------------------------------------------------------- */

.campo-login input,
.campo-registro input {
    width: 100%;

    padding: 13px;

    border: 1px solid #D5DDE8;
    border-radius: 9px;

    background-color: #FFFFFF;

    font-size: 15px;

    outline: none;

    transition: 0.2s;
}


/* Cuando hacemos clic en un input */
.campo-login input:focus,
.campo-registro input:focus {
    border-color: #2455A4;

    box-shadow:
        0 0 0 3px rgba(36, 85, 164, 0.12);
}


/* ---------------------------------------------------------
   BOTONES LOGIN Y CREAR CUENTA
   --------------------------------------------------------- */

.btn-login,
.btn-crear-cuenta {
    width: 100%;

    margin-top: 5px;

    padding: 14px;

    border: none;
    border-radius: 9px;

    /* MISMO azul */
    background-color: #2455A4;
    color: #FFFFFF;

    font-size: 16px;
    font-weight: bold;

    cursor: pointer;

    transition: 0.2s;
}


/* Hover de ambos botones */
.btn-login:hover,
.btn-crear-cuenta:hover {
    background-color: #1B4385;

    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   TEXTO INFERIOR
   --------------------------------------------------------- */

.crear-cuenta-login,
.volver-login {
    margin-top: 22px;

    color: #667085;

    font-size: 14px;
}


/* ---------------------------------------------------------
   ENLACES
   --------------------------------------------------------- */

.crear-cuenta-login a,
.volver-login a {
    color: #2455A4;

    font-weight: bold;

    text-decoration: none;
}


.crear-cuenta-login a:hover,
.volver-login a:hover {
    text-decoration: underline;
}


/* =========================================================
   4. BARRA SUPERIOR DEL DASHBOARD
   ========================================================= */

.topbar {
    width: 100%;
    min-height: 75px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 40px;

    background-color: #2455A4;
    color: white;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.10);

    position: relative;
}


/* Logo */
.logo img {
    width: 60px;
    height: auto;

    display: block;
}


/* Título central */
.topbar .titulo {
    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    font-size: 20px;
    font-weight: bold;
}


/* Usuario */
.usuario {
    display: flex;
    align-items: center;

    gap: 15px;

    font-weight: bold;
}


/* Botón cerrar sesión */
.btn-cerrar-sesion {
    padding: 8px 14px;

    border:
        1px solid rgba(255, 255, 255, 0.7);

    border-radius: 8px;

    background-color: transparent;
    color: white;

    font-size: 13px;

    cursor: pointer;

    transition: 0.2s;
}


.btn-cerrar-sesion:hover {
    background-color:
        rgba(255, 255, 255, 0.15);
}


/* =========================================================
   5. DASHBOARD
   ========================================================= */

.dashboard {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    padding: 55px 30px;
}


/* Bienvenida */
.bienvenida {
    margin-bottom: 30px;

    text-align: center;
}


.bienvenida h1 {
    margin: 0 0 10px 0;

    color: #2455A4;

    font-size: 34px;
}


.bienvenida p {
    color: #607D8B;

    font-size: 17px;
}


/* =========================================================
   6. BOTÓN NUEVA TAREA
   ========================================================= */

.accion-principal {
    display: flex;

    justify-content: center;

    margin-bottom: 45px;
}


.btn-nueva {
    padding: 14px 30px;

    border: none;
    border-radius: 10px;

    /* Verde ABAQ */
    background-color: #72B943;

    color: white;

    font-size: 16px;
    font-weight: bold;

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.10);

    cursor: pointer;

    transition: 0.2s;
}


.btn-nueva:hover {
    background-color: #5E9F36;

    transform: translateY(-2px);
}


/* =========================================================
   7. SECCIONES DE TAREAS
   ========================================================= */

.seccion-tareas {
    margin-bottom: 45px;
}


.titulo-seccion {
    margin-bottom: 18px;
}


.titulo-seccion h2 {
    margin-bottom: 6px;

    color: #2455A4;

    font-size: 23px;
}


.titulo-seccion p {
    margin: 0;

    color: #607D8B;

    font-size: 14px;
}


/* Contenedor de tareas */
.tabla-tareas {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


/* Sin tareas */
.sin-tareas {
    padding: 28px;

    border:
        1px dashed #C8D4E3;

    border-radius: 12px;

    background-color: #F7F9FC;

    color: #718096;

    text-align: center;
}


/* =========================================================
   8. TAREA
   ========================================================= */

.tarea {
    display: flex;

    align-items: center;

    gap: 18px;

    padding: 15px 18px;

    border:
        1px solid #E4E9F0;

    border-radius: 12px;

    background-color: white;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.06);

    transition: 0.2s;
}


.tarea:hover {
    transform: translateY(-2px);

    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.10);
}


/* Nombre */
.tarea-nombre {
    flex: 2;

    min-width: 190px;

    color: #263238;

    font-weight: bold;
}


/* Responsable */
.tarea-responsable {
    flex: 1;

    min-width: 130px;

    color: #607D8B;
}


/* Fecha */
.tarea-fecha {
    flex: 1;

    min-width: 140px;

    color: #607D8B;
}


/* Prioridad */
.tarea-prioridad {
    min-width: 95px;

    font-size: 14px;

    font-weight: bold;
}


/* Horas */
.tarea-horas {
    min-width: 75px;

    color: #2455A4;

    font-weight: bold;

    text-align: center;
}


/* =========================================================
   9. ESTADOS
   ========================================================= */

.estado {
    padding: 7px 12px;

    border-radius: 8px;

    font-size: 13px;

    font-weight: bold;

    white-space: nowrap;
}


/* Pendiente */
.estado-pendiente {
    background-color: #FFF3CD;

    color: #856404;
}


/* Proceso */
.estado-proceso {
    background-color: #D9EAF7;

    color: #2455A4;
}


/* Completada */
.estado-completada {
    background-color: #DFF2D8;

    color: #3D7A2A;
}


/* =========================================================
   10. BOTONES DE TAREA
   ========================================================= */

/* Ver detalles */
.btn-detalles {
    padding: 8px 12px;

    border: none;
    border-radius: 8px;

    background-color: #EEF4FC;

    color: #2455A4;

    font-weight: bold;

    cursor: pointer;

    white-space: nowrap;

    transition: 0.2s;
}


.btn-detalles:hover {
    background-color: #DCE8F8;
}


/* Eliminar */
.btn-eliminar {
    padding: 8px 12px;

    border: none;
    border-radius: 8px;

    background-color: #FCE8E6;

    color: #C62828;

    font-weight: bold;

    cursor: pointer;

    transition: 0.2s;
}


.btn-eliminar:hover {
    background-color: #F5C6C2;
}


/* =========================================================
   11. MODAL NUEVA TAREA
   ========================================================= */

.formulario-actividad {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;

    justify-content: center;
    align-items: center;

    padding: 20px;

    background-color:
        rgba(15, 30, 50, 0.55);

    z-index: 4000;
}


/* Tarjeta */
.formulario-contenido {
    width: 100%;

    max-width: 650px;
    max-height: 90vh;

    overflow-y: auto;

    padding: 35px;

    background-color: white;

    border-radius: 20px;

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.22);
}


.formulario-contenido h2 {
    margin: 0 0 8px 0;

    color: #2455A4;

    font-size: 28px;
}


.formulario-contenido p {
    margin-bottom: 25px;

    color: #607D8B;
}


/* Labels */
.formulario-contenido label {
    display: block;

    margin-top: 18px;
    margin-bottom: 7px;

    color: #37474F;

    font-weight: bold;
}


/* Campos */
.formulario-contenido input,
.formulario-contenido select,
.formulario-contenido textarea {
    width: 100%;

    padding: 12px 14px;

    border:
        1px solid #D5DDE8;

    border-radius: 9px;

    background-color: #FAFBFD;

    font-family: Arial, sans-serif;

    font-size: 15px;

    outline: none;
}


/* Focus */
.formulario-contenido input:focus,
.formulario-contenido select:focus,
.formulario-contenido textarea:focus {
    border-color: #2455A4;

    background-color: white;

    box-shadow:
        0 0 0 3px rgba(36, 85, 164, 0.10);
}


.formulario-contenido textarea {
    min-height: 110px;

    resize: vertical;
}


/* Dos columnas */
.fila-formulario {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;
}


/* Botones */
.botones-formulario {
    display: flex;

    justify-content: flex-end;

    gap: 12px;

    margin-top: 30px;
}


/* Cancelar */
.btn-cancelar {
    padding: 12px 20px;

    border: none;

    border-radius: 9px;

    background-color: #F1F3F5;

    color: #455A64;

    font-weight: bold;

    cursor: pointer;
}


.btn-cancelar:hover {
    background-color: #E2E6EA;
}


/* Crear */
.btn-crear {
    padding: 12px 22px;

    border: none;

    border-radius: 9px;

    background-color: #2455A4;

    color: white;

    font-weight: bold;

    cursor: pointer;

    transition: 0.2s;
}


.btn-crear:hover {
    background-color: #1B4385;
}


/* =========================================================
   12. MODAL DETALLES
   ========================================================= */

.detalle-tarea {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;

    justify-content: center;
    align-items: center;

    padding: 20px;

    background-color:
        rgba(15, 30, 50, 0.60);

    z-index: 5000;
}


/* Tarjeta */
.detalle-contenido {
    width: 100%;

    max-width: 520px;
    max-height: 90vh;

    overflow-y: auto;

    padding: 32px;

    background-color: white;

    border:
        2px solid #2455A4;

    border-radius: 22px;

    box-shadow:
        0 20px 60px
        rgba(36, 85, 164, 0.25);

    animation:
        aparecerDetalle 0.20s ease;
}


/* Animación */
@keyframes aparecerDetalle {

    from {
        opacity: 0;

        transform:
            translateY(15px)
            scale(0.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* Nombre */
.detalle-contenido h2 {
    margin: 0 0 22px 0;

    padding-bottom: 16px;

    border-bottom:
        1px solid #E4EAF2;

    color: #2455A4;

    font-size: 25px;
}


/* Filas */
.detalle-contenido p {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin: 10px 0;

    padding: 14px 16px;

    border:
        1px solid #EEF2F6;

    border-radius: 10px;

    background-color: #F7F9FC;

    color: #455A64;

    font-size: 15px;
}


.detalle-contenido strong {
    color: #263238;

    font-weight: 700;
}


.detalle-contenido p span {
    color: #2455A4;

    font-weight: 600;

    text-align: right;
}


/* Botones */
.botones-detalle {
    display: flex;

    justify-content: flex-end;
    align-items: center;

    gap: 12px;

    margin-top: 28px;
}


/* =========================================================
   13. INICIAR TAREA
   ========================================================= */

#btnIniciarTarea {
    padding: 12px 22px;

    border: none;

    border-radius: 9px;

    background-color: #72B943;

    color: white;

    font-weight: bold;

    box-shadow:
        0 5px 14px
        rgba(114, 185, 67, 0.28);

    cursor: pointer;

    transition: 0.2s;
}


#btnIniciarTarea:hover {
    background-color: #5E9F36;

    transform: translateY(-2px);
}


/* =========================================================
   14. FINALIZAR TAREA
   ========================================================= */

.btn-finalizar {
    padding: 12px 22px;

    border: none;

    border-radius: 9px;

    background-color: #2455A4;

    color: white;

    font-weight: bold;

    cursor: pointer;

    transition: 0.2s;
}


.btn-finalizar:hover {
    background-color: #1B4385;

    transform: translateY(-2px);
}


/* Campo horas */
#contenedorHorasFinal {
    margin-top: 20px;

    padding: 16px;

    background-color: #F7F9FC;

    border-radius: 10px;
}


#contenedorHorasFinal label {
    display: block;

    margin-bottom: 8px;

    color: #263238;

    font-weight: bold;
}


#horasFinales {
    width: 100%;

    padding: 11px;

    border:
        1px solid #D5DDE8;

    border-radius: 8px;

    font-size: 14px;

    outline: none;
}


/* =========================================================
   15. RESPONSIVE
   ========================================================= */

/* TABLET */
@media (max-width: 850px) {

    .topbar {
        padding: 0 20px;
    }


    .topbar .titulo {
        position: static;

        transform: none;

        font-size: 16px;
    }


    .dashboard {
        padding: 40px 20px;
    }


    .tarea {
        flex-wrap: wrap;
    }


    .tarea-nombre {
        flex-basis: 100%;
    }


    .fila-formulario {
        grid-template-columns: 1fr;
    }

}


/* CELULAR */
@media (max-width: 600px) {

    .login-container,
    .registro-container {
        padding: 20px;
    }


    .login-card,
    .registro-card {
        padding: 28px;
    }


    .login-logo,
    .registro-logo {
        width: 110px;
        height: 110px;
    }


    .usuario span {
        display: none;
    }


    .detalle-contenido {
        padding: 24px;
    }


    .detalle-contenido p {
        flex-direction: column;

        align-items: flex-start;

        gap: 5px;
    }


    .detalle-contenido p span {
        text-align: left;
    }


    .botones-detalle {
        flex-direction: column-reverse;
    }


    .botones-detalle button {
        width: 100%;
    }


    .formulario-contenido {
        padding: 25px;
    }

}
/* =========================================================
   ABAQ ADMINISTRADOR
   NUEVO DISEÑO DEL DASHBOARD ADMIN
   ========================================================= */


/* =========================================================
   CONFIGURACIÓN GENERAL
   ========================================================= */

.admin-body {

    /* Quitamos espacios del navegador */
    margin: 0;

    /* Fuente limpia */
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    /* Fondo general */
    background: #f6f8fb;

    /* Color principal del texto */
    color: #17213a;
}


/* =========================================================
   BARRA SUPERIOR
   ========================================================= */

.admin-topbar {

    /* Azul principal */
    background: #2455A4;

    /* Altura */
    min-height: 82px;

    /* Elementos uno al lado del otro */
    display: flex;

    /* Separación entre izquierda y derecha */
    justify-content: space-between;

    /* Centramos verticalmente */
    align-items: center;

    /* Espacio interno */
    padding: 0 35px;

    /* Texto blanco */
    color: white;

    /* Evita problemas con tamaños */
    box-sizing: border-box;
}


/* Logo + nombre */
.admin-brand {

    display: flex;

    align-items: center;

    gap: 18px;

    font-size: 22px;

    font-weight: bold;

    letter-spacing: 1px;
}


/* Logo */
.admin-brand img {

    width: 58px;

    height: 58px;

    object-fit: contain;
}


/* Parte derecha */
.admin-topbar-right {

    display: flex;

    align-items: center;

    gap: 25px;
}


/* Usuario */
.admin-user {

    display: flex;

    align-items: center;

    gap: 8px;

    font-weight: bold;

    font-size: 14px;
}


/* Icono usuario */
.admin-user-icon {

    font-size: 20px;
}


/* Cerrar sesión */
.admin-logout {

    background: transparent;

    color: white;

    border: 1px solid rgba(255, 255, 255, 0.7);

    border-radius: 8px;

    padding: 10px 18px;

    cursor: pointer;

    font-weight: bold;
}


/* Efecto del botón */
.admin-logout:hover {

    background: rgba(255, 255, 255, 0.12);
}


/* =========================================================
   ESTRUCTURA PRINCIPAL
   ========================================================= */

.admin-layout {

    display: flex;

    min-height: calc(100vh - 82px);
}


/* =========================================================
   MENÚ LATERAL
   ========================================================= */

.admin-sidebar {

    width: 220px;

    background: white;

    padding: 35px 15px;

    border-right: 1px solid #e7eaf0;

    box-sizing: border-box;
}


/* Botones del menú */
.admin-menu-item {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 14px;

    border: none;

    background: transparent;

    padding: 14px 16px;

    margin-bottom: 10px;

    border-radius: 9px;

    cursor: pointer;

    font-size: 16px;

    color: #3d4d69;

    text-align: left;
}


/* Iconos */
.admin-menu-icon {

    font-size: 20px;
}


/* Botón activo */
.admin-menu-item.active {

    background: #eaf2ff;

    color: #1f62c4;

    font-weight: bold;
}


/* Hover */
.admin-menu-item:hover {

    background: #f0f4fa;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.admin-main {

    flex: 1;

    padding: 50px;

    box-sizing: border-box;
}


/* =========================================================
   CABECERA DEL CONTENIDO
   ========================================================= */

.admin-header-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    max-width: 1100px;

    margin: 0 auto 55px auto;
}


/* Texto pequeño */
.admin-small-title {

    color: #687895;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 2px;
}


/* Título */
.admin-welcome h1 {

    font-size: 42px;

    margin: 12px 0 10px 0;

    color: #101a33;
}


/* Descripción */
.admin-welcome p {

    margin: 0;

    color: #61708b;

    font-size: 17px;

    line-height: 1.6;
}


/* =========================================================
   TARJETA DE FECHA
   ========================================================= */

.admin-date-card {

    min-width: 300px;

    background: white;

    border: 1px solid #e2e7ef;

    border-radius: 12px;

    padding: 20px;

    display: flex;

    align-items: center;

    gap: 18px;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.05);

    box-sizing: border-box;
}


/* Calendario */
.admin-date-icon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eaf2ff;

    border-radius: 50%;

    font-size: 26px;
}


/* Hoy es */
.admin-date-card span {

    display: block;

    color: #687895;

    margin-bottom: 6px;
}


/* Fecha */
.admin-date-card strong {

    color: #2455A4;

    font-size: 16px;
}


/* =========================================================
   CONTENEDOR DE LAS DOS TARJETAS
   ========================================================= */

.admin-cards-small {

    /* Las ponemos juntas */
    display: flex;

    /* Centradas */
    justify-content: center;

    /* Espacio entre ellas */
    gap: 28px;

    /* No ocupan toda la pantalla */
    max-width: 700px;

    margin: 0 auto;
}


/* =========================================================
   TARJETA PEQUEÑA
   ========================================================= */

.admin-card-small {

    /* Tamaño más pequeño */
    width: 280px;

    min-height: 310px;

    background: white;

    border-radius: 14px;

    padding: 28px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.06);
}


/* Tarjeta tareas */
.tareas-card {

    border: 1px solid #cfe0fb;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4f8ff
        );
}


/* Tarjeta usuarios */
.usuarios-card {

    border: 1px solid #d1ead9;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4fbf6
        );
}


/* =========================================================
   ICONOS DE LAS TARJETAS
   ========================================================= */

.admin-card-icon {

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 28px;

    margin-bottom: 18px;
}


/* Icono tareas */
.tareas-icon {

    background: #e5efff;
}


/* Icono usuarios */
.usuarios-icon {

    background: #e1f5e7;
}


/* =========================================================
   TEXTO DE TARJETAS
   ========================================================= */

.admin-card-small h2 {

    font-size: 25px;

    margin: 0 0 10px 0;

    color: #15203a;
}


.admin-card-small p {

    color: #61708b;

    line-height: 1.5;

    margin: 0 0 25px 0;

    font-size: 15px;
}


/* =========================================================
   BOTONES DE LAS TARJETAS
   ========================================================= */

.admin-card-btn {

    /* Manda el botón hacia abajo */
    margin-top: auto;

    width: 100%;

    border: none;

    border-radius: 8px;

    padding: 12px;

    color: white;

    font-size: 14px;

    font-weight: bold;

    cursor: pointer;
}


/* Botón tareas */
.tareas-btn {

    background: #2455A4;
}


.tareas-btn:hover {

    background: #1B4385;
}


/* Botón usuarios */
.usuarios-btn {

    background: #299653;
}


.usuarios-btn:hover {

    background: #207a43;
}


/* =========================================================
   RESPONSIVE
   PARA PANTALLAS PEQUEÑAS
   ========================================================= */

@media (max-width: 850px) {

    .admin-topbar {

        padding: 12px 20px;

        flex-wrap: wrap;

        gap: 15px;
    }


    .admin-user {

        display: none;
    }


    .admin-layout {

        flex-direction: column;
    }


    .admin-sidebar {

        width: 100%;

        display: flex;

        gap: 5px;

        padding: 12px;

        border-right: none;

        border-bottom: 1px solid #e7eaf0;
    }


    .admin-menu-item {

        justify-content: center;

        margin: 0;
    }


    .admin-main {

        padding: 25px;
    }


    .admin-header-content {

        flex-direction: column;

        align-items: flex-start;

        margin-bottom: 35px;
    }


    .admin-date-card {

        width: 100%;

        min-width: 0;
    }


    .admin-cards-small {

        flex-direction: column;

        align-items: center;
    }


    .admin-card-small {

        width: 100%;

        max-width: 350px;
    }


    .admin-welcome h1 {

        font-size: 32px;
    }
}