/* ==================================================
   AVISO DE NAVEGADOR INTERNO
   (navegador-interno.js)

   Franja compacta dentro de la página, arriba del
   contenido: el motivo en una frase, "Copiar enlace"
   siempre visible y los pasos desplegables. En móvil lo
   primero que se ve sigue siendo la tienda. No flota ni
   tapa nada (tampoco el botón de WhatsApp) y nunca
   bloquea la compra.
================================================== */

.aviso-navegador-interno {

    position: relative;

    width:
        calc(
            100% -
            32px
        );

    max-width: 760px;

    margin:
        12px
        auto;

    padding:
        12px
        14px
        10px;

    border:
        2px solid #111111;

    background: #ffd600;

    color: #111111;

    text-align: left;

}


.aviso-navegador-texto {

    /*
    Hueco para la ✕, solo junto al texto: los botones
    usan todo el ancho y caben en una fila.
    */
    margin:
        0
        30px
        10px
        0;

    font-size: 14px;

    line-height: 1.4;

}


.aviso-navegador-texto strong {

    font-weight: 800;

}


.aviso-navegador-cerrar {

    position: absolute;

    top: 4px;

    right: 4px;

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    background: transparent;

    color: #111111;

    font: inherit;

    font-size: 18px;

    font-weight: 800;

    cursor: pointer;

}



/* ==================================================
   ACCIONES (siempre visibles)
================================================== */

.aviso-navegador-acciones {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}


.aviso-navegador-boton {

    min-height: 38px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        0
        12px;

    border:
        2px solid #111111;

    background: transparent;

    color: #111111;

    font: inherit;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.5px;

    text-decoration: none;

    cursor: pointer;

}


.aviso-navegador-boton-principal {

    background: #111111;

    color: #ffffff;

}


.aviso-navegador-boton:focus-visible,
.aviso-navegador-cerrar:focus-visible,
.aviso-navegador-detalle summary:focus-visible {

    outline:
        3px solid #ff006e;

    outline-offset: 2px;

}



/* ==================================================
   PASOS (desplegables)
================================================== */

.aviso-navegador-detalle {

    margin-top: 8px;

    font-size: 13px;

}


.aviso-navegador-detalle summary {

    display: inline-block;

    font-weight: 800;

    text-decoration: underline;

    cursor: pointer;

}


.aviso-navegador-detalle summary::-webkit-details-marker {

    display: none;

}


.aviso-navegador-detalle summary::after {

    content: " ▾";

}


.aviso-navegador-detalle[open] summary::after {

    content: " ▴";

}


.aviso-navegador-pasos {

    margin:
        8px
        0
        6px;

    padding-left: 20px;

    font-size: 13px;

    line-height: 1.45;

}


.aviso-navegador-pasos li + li {

    margin-top: 4px;

}


.aviso-navegador-nota {

    margin: 0;

    font-size: 12px;

    line-height: 1.4;

}


.aviso-navegador-enlace {

    width: 100%;

    margin-top: 10px;

    padding:
        8px
        10px;

    border:
        2px solid #111111;

    background: #ffffff;

    color: #111111;

    font-size: 13px;

}


.aviso-navegador-estado {

    margin: 8px 0 0;

    font-size: 13px;

    font-weight: 700;

}


.aviso-navegador-estado:empty {

    display: none;

}



/* ==================================================
   MODO OSCURO (colores de tema.css)
================================================== */

:where([data-tema="oscuro"]) .aviso-navegador-interno {

    border-color: #ffd600;

    background: var(--osc-superficie);

    color: var(--osc-tinta);

}


:where([data-tema="oscuro"]) .aviso-navegador-cerrar {

    color: var(--osc-tinta);

}


:where([data-tema="oscuro"]) .aviso-navegador-boton {

    border-color: var(--osc-tinta);

    color: var(--osc-tinta);

}


:where([data-tema="oscuro"]) .aviso-navegador-boton-principal {

    border-color: #ffd600;

    background: #ffd600;

    color: #111111;

}


:where([data-tema="oscuro"]) .aviso-navegador-enlace {

    border-color: var(--osc-borde-campo);

    background: var(--osc-suave);

    color: var(--osc-tinta);

}