/*====================================================
HEADER.CSS
Responsabilidad:
- Logo de empresa.
- Título del catálogo.
- Buscador.
- Acciones del header.
- Iconos.

No debe contener:
- Productos.
- Noticias.
- Perfil.
- Layout general.
====================================================*/

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

.topHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 14px;
    background:var(--color-principal);
    margin-bottom:5px;
}


/*====================================================
LOGO DE LA EMPRESA
====================================================*/

.logoContainer{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.logoEmpresa{
    width:48px;
    height:48px;
    object-fit:contain;
    display:block;
}


/*====================================================
TITULO
====================================================*/

.titleContainer{
    flex:1;
    display:flex;
    justify-content:center;
    color:var(--color-secundario);
    font-size:20px;
    font-weight:700;
    text-align:center;
    white-space:nowrap;
}


/*====================================================
TOOLBAR
====================================================*/

.toolbar{
    position:sticky;
    top:0;
    z-index:var(--z-header);

    display:grid;
    grid-template-columns:
        minmax(240px, 1fr)
        minmax(280px, 520px);

    gap:24px;
    align-items:center;

    padding:0px;

    background:transparent;
    border:none;
    border-radius:0px;

    margin-top:0px;

    transition:padding .25s ease;
}


/*====================================================
SEARCH HEADER COMPACTO
====================================================*/

.searchContainer{
    transition:height .25s ease;
}

/*
.toolbar.compact{
    padding:4px 10px;
}
*/

.toolbar.compact .searchContainer{
    height:40px;
}


/*====================================================
BOTON COMPARTIR
====================================================*/

.headerAcciones{
    display:flex;
    align-items:center;
    gap:4px;
}

/* Botón con ícono y texto debajo (Info, Compartir) */
.btn-header{
    min-width:48px;
    padding:2px 4px;

    border:none;
    border-radius:10px;
    background:transparent;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;

    color:#ffffff;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

.btn-header:active{
    background:rgba(255,255,255,.18);
}

.btn-header:focus-visible{
    outline:2px solid #ffffff;
    outline-offset:1px;
}

.btn-header svg{
    width:24px;
    height:24px;
    fill:currentColor;
}

.btn-header span{
    font-size:10px;
    font-weight:700;
    line-height:1;
    letter-spacing:.02em;
}


/*====================================================
MODAL COMPARTIR
====================================================*/

.modal-compartir{
    position:fixed;

    inset:0;

    background:rgba(0, 0, 0, 0.55);

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

    z-index:9999;

    padding:20px;
}

.modal-compartir.activo{
    display:flex;
}

.modal-compartir-contenido{
    position:relative;

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

    background:white;

    border-radius:20px;

    padding:30px 25px;

    text-align:center;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .25);

    animation:
        aparecerModal .2s ease-out;
}

@keyframes aparecerModal{

    from{
        opacity:0;
        transform:scale(.95);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

.modal-compartir h2{
    margin:0 0 25px;

    font-size:26px;

    color:var(--color-principal);
}


/*====================================================
BOTON CERRAR MODAL
====================================================*/

.cerrar-modal{
    position:absolute;

    top:10px;
    right:15px;

    border:none;
    background:none;

    font-size:32px;
    line-height:1;

    cursor:pointer;

    color:#666;
}


/*====================================================
CODIGO QR
====================================================*/

.opcion-compartir h3{
    margin-bottom:15px;
}

#qrCompartir{
    display:flex;
    justify-content:center;

    margin:
        10px auto 15px;
}

#qrCompartir img,
#qrCompartir canvas{
    width:180px !important;
    height:180px !important;
}

.opcion-compartir p{
    font-size:14px;

    color:#666;

    margin:0 auto;

    max-width:280px;
}


/*====================================================
SEPARADOR
====================================================*/

.separador{
    display:flex;
    align-items:center;

    gap:15px;

    margin:25px 0;

    color:#999;
}

.separador::before,
.separador::after{
    content:"";

    height:1px;

    background:#ddd;

    flex:1;
}


/*====================================================
BOTON LINK PARA COMPARTIR
====================================================*/

.btn-link-compartir{
    width:100%;

    border:none;
    border-radius:12px;

    padding:15px;

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

    cursor:pointer;

    background:#25D366;
    color:white;

    transition:
        transform .1s,
        opacity .1s;
}

.btn-link-compartir:active{
    transform:scale(.97);
    opacity:.9;
}


/*====================================================
TOAST COMPARTIR
====================================================*/

.toast-compartir{
    position:fixed;

    left:50%;
    bottom:30px;

    transform:
        translateX(-50%)
        translateY(20px);

    background:#222;
    color:white;

    padding:14px 20px;

    border-radius:10px;

    font-size:15px;

    opacity:0;

    pointer-events:none;

    z-index:10000;

    transition:
        opacity .25s ease,
        transform .25s ease;

    white-space:nowrap;
}

.toast-compartir.mostrar{
    opacity:1;

    transform:
        translateX(-50%)
        translateY(0);
}