:root {
  --color-bg: #f4f6f8;
  --color-sidebar: #ffff;
  --color-sidebar-hover: #500b75;
  --color-accent: #852db4;
  --color-text: #500b75;
  --color-light: #e2e8f0;
  --color-cancel : #b92020;
  --radius: 12px;
  --transition: 0.3s ease;
  --shadow: 0 2px 10px rgba(0,0,0,0.1);
}



@font-face {
  font-family: 'Mofugu';
  src: url(../../assets/fonts/mofugu-bold-sans-serif/Web-TT/Mofugu.woff);
  font-style: normal;
}

@font-face {
  font-family: 'Sklow';
  src: url(../../assets/fonts/sklow-sans-serif/Sklow.otf);
  font-style: normal;
}


body{
    font-family: 'Sklow';
    background:#f4f6fb;
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    margin:0;
}

/* contenedor */

.admin-login-container{

    width:100%;
    max-width:380px;

    background:#fff;

    padding:35px;

    border-radius:10px;

    box-shadow:0 10px 30px rgba(0,0,0,0.08);

}

/* logo */

.login-logo{
    text-align:center;
    margin-bottom:20px;
}

.login-logo img{
    width: 150px;
    max-width:100%;
}

/* titulo */

.admin-login-container h1{
    color: var(--color-text);
    text-align:center;
    margin-bottom:25px;
    font-size:22px;

}

/* campos */

.login-field{

    margin-bottom:15px;

}

.login-field input{

    width:100%;

    padding:12px;

    border-radius:6px;

    border:1px solid #ddd;

    font-size:14px;

    box-sizing:border-box;

}

/* boton */

.login-btn{

    width:100%;

    padding:12px;

    border:none;

    border-radius:6px;

    background: var(--color-text);

    color:white;

    font-size:15px;

    cursor:pointer;

    transition:0.2s;

}

.login-btn:hover{

    background:var(--color-accent);

}

/* error */

.error{

    background:#ffe5e5;

    color:#c62828;

    padding:10px;

    border-radius:6px;

    margin-bottom:15px;

    font-size:14px;

}

/* timer */

.timer{

    background:#e3f2fd;

    color:#1565c0;

    padding:10px;

    border-radius:6px;

    margin-bottom:15px;

    font-weight:600;
    font-size:14px;

}