/* ==========================================================================
   LO QUE QUEDA SIEMPRE A MANO — barra de celular, WhatsApp, volver arriba,
   índice de las guías.  Lo pinta parte_flotantes.php.
   --------------------------------------------------------------------------
   COLORES ESCRITOS A PROPÓSITO, SIN var(--...)
   Esta hoja la cargan también las 13 guías viejas, que NO cargan
   base_tokens.css. Con variables, ahí la barra saldría transparente.
   Los valores son los mismos de base_tokens: #000D58 = --tinta-900,
   #F7FF4D = --acento, #e4e8ee = --linea, #717d8d = --texto-3.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BARRA DE ABAJO — sólo en celular
   --------------------------------------------------------------------------
   Abajo y no arriba: en un teléfono de 6 pulgadas el pulgar llega cómodo al
   borde de abajo y no al de arriba. Es donde van las apps que la gente ya usa.
   -------------------------------------------------------------------------- */
.ag-barra-movil { display: none; }

@media (max-width: 768px) {
    .ag-barra-movil {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        position: fixed; left: 0; right: 0; bottom: 0;
        z-index: 990;                 /* debajo de la barra de arriba (1000) */
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-top: 1px solid #e4e8ee;
        box-shadow: 0 -6px 20px rgba(3, 10, 40, .08);
    }
    .ag-barra-movil a {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px;
        min-height: 50px;             /* dedo grande, guante, camioneta en movimiento */
        border-radius: 10px;
        font: 700 11.5px/1.1 'Inter', system-ui, -apple-system, sans-serif;
        color: #000D58;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .ag-barra-movil a > span { font-size: 20px; line-height: 1; }
    .ag-barra-movil a:active { background: #f1f4f8; }
    .ag-barra-movil a.ag-barra-wa { background: #25D366; color: #fff; }
    .ag-barra-movil a.ag-barra-wa:active { background: #1ebe5a; }

    /* Que el final de la página (el pie, el último botón) no quede tapado. */
    body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }

    /* Con el teclado abierto la barra se va. Si no, en iPhone sube pegada al
       teclado y tapa justo el campo en el que la persona está escribiendo.
       La clase la pone flotantes.js al entrar a un campo del formulario. */
    .ag-escribiendo .ag-barra-movil { display: none; }

    /* El cartel de cookies (parte_analitica.php) vive abajo de todo: sin esto
       quedaba debajo de la barra y no se podía tocar "Aceptar".
       `body` adelante sube la especificidad: el <style> del cartel se imprime
       DESPUÉS de esta hoja y con el mismo selector ganaría él. */
    body .ag-cookies { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* --------------------------------------------------------------------------
   2. WHATSAPP FLOTANTE — sólo en compu (en celular está en la barra)
   -------------------------------------------------------------------------- */
.ag-wa-flotante { display: none; }

@media (min-width: 769px) {
    .ag-wa-flotante {
        position: fixed; right: 22px; bottom: 22px;
        z-index: 990;
        display: inline-flex; align-items: center; gap: 8px;
        padding: 12px 20px 12px 15px;
        border-radius: 999px;
        background: #25D366; color: #fff;
        font: 700 15px/1 'Inter', system-ui, -apple-system, sans-serif;
        text-decoration: none;
        box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .38);
        transition: transform .18s ease, box-shadow .18s ease;
    }
    .ag-wa-flotante > span:first-child { font-size: 20px; }
    .ag-wa-flotante:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 32px -8px rgba(0, 0, 0, .42);
    }
}

/* --------------------------------------------------------------------------
   3. VOLVER ARRIBA
   -------------------------------------------------------------------------- */
.ag-arriba {
    position: fixed; right: 22px; bottom: 86px;       /* arriba del WhatsApp */
    z-index: 990;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border: 1px solid #cdd4de; border-radius: 50%;
    background: #fff; color: #000D58;
    font: 800 20px/1 system-ui, sans-serif;
    cursor: pointer;
    box-shadow: 0 8px 20px -6px rgba(3, 10, 40, .25);
    opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.ag-arriba[hidden] { display: none; }
.ag-arriba.visible { opacity: 1; transform: none; pointer-events: auto; }
.ag-arriba:hover   { border-color: #000D58; }

@media (max-width: 768px) {
    .ag-arriba {
        right: 12px;
        bottom: calc(78px + env(safe-area-inset-bottom, 0px));   /* arriba de la barra */
        width: 42px; height: 42px;
    }
    .ag-escribiendo .ag-arriba { display: none; }
}

/* Mientras el cartel de cookies está a la vista, los flotantes se corren:
   el cartel pide una sola decisión y no tiene sentido taparlo. */
body:has(#ag-cookies:not([hidden])) .ag-wa-flotante,
body:has(#ag-cookies:not([hidden])) .ag-arriba { visibility: hidden; }

@media print {
    .ag-barra-movil, .ag-wa-flotante, .ag-arriba { display: none !important; }
}

/* --------------------------------------------------------------------------
   4. ÍNDICE DE LAS GUÍAS  ("En esta guía")
   --------------------------------------------------------------------------
   Lo usan las dos familias de guías: las nuevas (guia.php lo imprime en el
   HTML) y las 13 viejas (lo arma flotantes.js). Por eso vive acá y no en
   secciones.css, que las viejas no cargan.
   -------------------------------------------------------------------------- */
.guia-indice {
    margin: 28px 0 34px;
    padding: 18px 22px 18px 20px;
    background: #f8f9fb;
    border: 1px solid #e4e8ee;
    border-left: 4px solid #000D58;
    border-radius: 12px;
}
.guia-indice-rotulo {
    display: block;
    margin-bottom: 10px;
    font: 800 12px/1 'Inter', system-ui, sans-serif;
    letter-spacing: .12em; text-transform: uppercase;
    color: #717d8d;
}
.guia-indice ol { margin: 0; padding: 0 0 0 20px; display: grid; gap: 7px; }
.guia-indice li { margin: 0; padding: 0; color: #717d8d; line-height: 1.4; }
.guia-indice a  { color: #000D58; font-weight: 600; text-decoration: none; }
.guia-indice a:hover { text-decoration: underline; }

/* Que el título al que salta el índice no quede debajo de la barra fija de
   arriba. base_tokens.css ya lo hace para todo [id], pero las guías viejas
   no cargan base_tokens. */
.article-content h2[id], .guia h2[id] { scroll-margin-top: 96px; }

/* --------------------------------------------------------------------------
   5. LAS TABLAS DE LAS GUÍAS VIEJAS, EN CELULAR
   --------------------------------------------------------------------------
   Las 13 guías viejas traen una tabla comparativa (.seo-table) con su estilo
   escrito adentro de cada una, y ninguno se adapta al celular: en una
   pantalla de 375px la tabla medía 589. Eso ensanchaba la página ENTERA, el
   teléfono la alejaba para que entrara, se podía arrastrar para los costados
   y los saltos del índice caían corridos.

   Acá y no en cada guía porque esta hoja la cargan las 13 y llega después de
   su <style>. El `.article-content` adelante le gana a esos estilos por
   especificidad, sin !important.

   Primero se achica (letra y márgenes); si con eso no entra, la que se
   desliza para el costado es la tabla sola, no la página.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .article-content .seo-table {
        display: block;
        max-width: 100%;
        min-width: 0;                 /* una guía le pone min-width: 600px */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .article-content .seo-table th,
    .article-content .seo-table td {
        padding: 10px 11px;
        font-size: .88rem;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }
}