/*==================================================================
PROYECTO : MAXALUD
MÓDULO   : AGENDA MÉDICA
ARCHIVO  : 01-header.css
VERSIÓN  : 3.0
AUTOR    : Carlos A. Bello Vanegas / ChatGPT
==================================================================*/


/*==============================================================
HEADER
==============================================================*/

.agenda-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    box-shadow:0 8px 25px rgba(0,0,0,.05);

    transition:transform .40s ease,
               box-shadow .35s ease,
               background .35s ease;

}

/*==============================================================
HEADER SCROLL
==============================================================*/

.agenda-header.hide{

    transform:translateY(-100%);

}

.agenda-header.show{

    transform:translateY(0);

}


/*==============================================================
HEADER CONTAINER
==============================================================*/

.agenda-header__container{

    width:100%;

    max-width:1400px;

    margin:0 auto;

    padding:0 30px;

}

/*==============================================================
GRID PRINCIPAL
==============================================================*/

.agenda-header__grid{

    display:grid;

    grid-template-columns:

    320px
    170px
    1fr
    190px
    190px;

    align-items:center;

    column-gap:10px;

    min-height:80px;

}

/*==============================================================
LOGOTIPO
==============================================================*/

.agenda-header__logo{

    display:flex;

    align-items:center;

    margin-left: 30px;

    padding-left:20px;

}

.agenda-header__logo img{

    width:190px;

    height:auto;

    display:block;

}

/*==============================================================
BREADCRUMB
==============================================================*/

.agenda-header__breadcrumb{

    display:flex;

    align-items:center;

}

.agenda-header__breadcrumb nav{

    display:flex;

    align-items:center;

    gap:8px;

}

.agenda-header__breadcrumb a{

    text-decoration:none;

    font-size:14px;

    color:var(--color-gris);

}

.agenda-header__breadcrumb span{

    color:#94A3B8;

}

/*==============================================================
TÍTULO
==============================================================*/

.agenda-header__title{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-left:-110px;
    

}

.agenda-header__title h1{

    margin:0px;

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

    font-size:2rem;

    font-weight:700;

    color:var(--color-texto);

}

/*==============================================================
ESPECIALISTAS
==============================================================*/

.agenda-header__especialistas{

    display:flex;

    justify-content:flex-start;

    margin-left:-90px;

}

/*==============================================================
MIS CITAS
==============================================================*/

.agenda-header__citas{

    display:flex;

    justify-content:flex-start;

    margin-left:-100px;

}

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

.agenda-header .btn{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:10px;

    height:52px;

    border-radius:15px;

    padding:0 26px;

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

    font-size:15px;

    font-weight:500;

}

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

.agenda-header .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:110px;

    height:45px;

    border-radius:14px;

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

    font-size:15px;

    font-weight:500;

    text-decoration:none;

    transition:all .35s ease;

    cursor:pointer;

}

/*==============================================================
BTN ESPECIALISTAS
==============================================================*/

.agenda-header .btn--secondary{

    background:var(--color-blanco);

    color:var(--color-primario);

    border:2px solid var(--color-primario);

}

.agenda-header .btn--secondary:hover{

    background:var(--color-primario);

    color:var(--color-blanco);

    transform:translateY(-3px);

    box-shadow:0 10px 22px rgba(18,61,141,.20);

}

/*==============================================================
BTN MIS CITAS
==============================================================*/

.agenda-header .btn--primary{

    background:var(--color-verde);

    color:var(--color-blanco);

    border:2px solid var(--color-verde);

    box-shadow:0 10px 22px rgba(24,181,58,.20);

}

.agenda-header .btn--primary:hover{

    background:#149C32;

    border-color:#149C32;

    transform:translateY(-3px);

    box-shadow:0 14px 28px rgba(24,181,58,.28);

}