/* ==========================================================
   Sistema de Matrícula Online
   Colegio Macaya
   ----------------------------------------------------------
   Archivo Principal CSS
   ----------------------------------------------------------
   Este archivo centraliza todos los estilos del sistema.
   No escribir estilos específicos aquí.
   ========================================================== */

/*==========================================================
  GOOGLE FONTS
==========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/*==========================================================
  VARIABLES
==========================================================*/

@import url('variables.css');

/*==========================================================
  COMPONENTES
==========================================================*/

@import url('buttons.css');

@import url('cards.css');

@import url('forms.css');

@import url('tables.css');

@import url('alerts.css');

/*==========================================================
  LAYOUT
==========================================================*/

@import url('layout.css');

@import url('navbar.css');

@import url('sidebar.css');

/*==========================================================
  MÓDULOS
==========================================================*/

@import url('login.css');

@import url('dashboard.css');

/*==========================================================
  RESPONSIVE
==========================================================*/

@import url('responsive.css');

/*==========================================================
  RESET GENERAL
==========================================================*/

*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);

    color:var(--text-primary);

    font-family:var(--font-family);

    font-size:var(--font-size-base);

    font-weight:var(--font-normal);

    line-height:1.6;

    min-height:100vh;

}

/*==========================================================
  ENLACES
==========================================================*/

a{

    color:var(--macaya-primary);

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:var(--macaya-primary-hover);

}

/*==========================================================
  IMÁGENES
==========================================================*/

img{

    max-width:100%;

    height:auto;

    display:block;

}

/*==========================================================
  BOTONES
==========================================================*/

button{

    font-family:inherit;

}

/*==========================================================
  INPUTS
==========================================================*/

input,
select,
textarea{

    font-family:inherit;

}

/*==========================================================
  SELECCIÓN DE TEXTO
==========================================================*/

::selection{

    background:var(--macaya-primary);

    color:#FFF;

}

/*==========================================================
  SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--gray-100);

}

::-webkit-scrollbar-thumb{

    background:var(--macaya-primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--macaya-primary-hover);

}

/*==========================================================
PASSWORD
==========================================================*/

.password-wrapper{

    position: relative;

}

.password-wrapper input{

    padding-right: 60px;

}

.password-wrapper button{

    position: absolute;

    right: 18px;

    top: 50%;

    transform: translateY(-50%);

    width: 32px;

    height: 32px;

    border: 0;

    background: transparent;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    color: #6c757d;

}

.password-wrapper button:hover{

    color: #0d6efd;

}

.password-wrapper button:focus{

    outline: none;

    box-shadow: none;

}

.password-wrapper button i{

    font-size: 22px;

    line-height: 1;

}