/* ─────────────────────────────────────────────────────────────────────────
   LA GUÍA — asesor de ventas · /sistema/guia/css/guia.css
   Plan: seguridad/documentacion/guia.md (§4-bis, §5)

   MOBILE-FIRST: las reglas base son las del celular y el @media agranda.
   Al revés (escribir para PC y achicar) es como se llega a pantallas que en
   el teléfono quedan con scroll horizontal, y este archivo se ve sobre todo
   desde un teléfono.

   🔸 Sin dependencias externas: ni fuentes de Google ni frameworks. La guía
      va a ir dentro de un iframe en sitios ajenos (Fase 5) y cada pedido a
      otro dominio es una cosa más que puede fallar o que la CSP puede frenar.
   ───────────────────────────────────────────────────────────────────────── */

:root {
    /* 🔴 Era #f8fafc: contra la tarjeta blanca daba un 2 % de diferencia y en
       un celular —donde la tarjeta ocupa casi todo el ancho y casi no queda
       fondo alrededor— se veía TODO BLANCO. Se profundiza para que el bloque
       de contenido se lea como un bloque.
       🔴 SEGUNDO AJUSTE: con #eaeff5 el admin seguía viéndolo «casi
       imperceptible» en el celular. Este valor da 79 puntos de distancia al
       blanco de la tarjeta, contra los 15 del original. */
    --g-fondo:   #dde4ed;
    --g-carta:   #ffffff;
    --g-borde:   #e2e8f0;
    --g-texto:   #1f2937;
    --g-suave:   #64748b;
    --g-acento:  #1f2937;
    --g-acentoh: #111827;
    --g-ok:      #059669;
}

* { box-sizing: border-box; }

body.guia-body {
    margin: 0;
    padding: 0;
    background: var(--g-fondo);
    color: var(--g-texto);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;          /* 16px justo: abajo de eso, iOS hace zoom solo
                                 al tocar un campo y descoloca la pantalla */
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

.g-wrap {
    max-width: 720px;
    margin: 0 auto;
    /* 🔑 20 px de lado en celular: con 16 la tarjeta quedaba casi al ras y el
       fondo se veía como un hilo, así que el bloque no se leía como bloque.
       En PC esto ya se ve bien porque el wrap son 720 px centrados. */
    padding: 18px 20px 40px;
}

/* ── Cabecera ── */
.g-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.g-logo { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; flex: 0 0 auto; }
.g-top-txt { min-width: 0; }              /* sin esto, un título largo desborda el flex */
.g-titulo { margin: 0; font-size: 1.15rem; font-weight: 700; }
.g-sub    { margin: 2px 0 0; font-size: 0.88rem; color: var(--g-suave); }

/* ── La tarjeta de cada pantalla ── */
.g-card {
    background: var(--g-carta);
    border: 1px solid var(--g-borde);
    border-radius: 14px;
    padding: 20px 18px;
    margin-bottom: 16px;
    /* 🔑 La sombra es la que hace que se lea como un BLOQUE aunque el fondo
       de al lado sea apenas más oscuro. Un borde de 1px solo no alcanza en
       una pantalla chica y con brillo alto. */
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.05);
}
/* La pantalla en la que se está: debajo del nombre de la guía y más chica
   que él, porque el que manda es el nombre. Va FUERA de la tarjeta. */
/* 🔴 ACÁ HABÍA UNA LÍNEA DIVISORIA Y SE SACÓ. Dos motivos:
   1) El admin: «en vez de la línea divisoria, fijarse eso» — el problema real
      era que en celular la tarjeta no se distinguía del fondo. Resuelto eso,
      la separación la hace el bloque, que es lo que corresponde.
   2) Renderizaba MAL igual: `.g-top` es `display:flex` con el logo al lado,
      así que `.g-donde` vive en una columna que mide lo que mide su texto. La
      raya salía corta e indentada, NO cruzaba la pantalla como la del botón
      «Inicio». Una raya a medias se lee como un error, no como una división. */
/* 🔴 ESTABA AL REVÉS: el camino iba en negrita y en `--g-texto` (oscuro), o
   sea que lo que más pesaba en la pantalla era la miga de pan y no el
   contenido. El admin: «lo que más me interesa es que se vea el contenido».
   ⇒ TODO gris clarito, y la negrita SÓLO en la palabra «Elegiste:», que es la
   que explica qué es esa línea. */
.g-donde {
    margin: 5px 0 0;
    font-size: 0.9rem;
    font-weight: 600;          /* la negrita es del «Elegiste:» */
    color: var(--g-suave);
    line-height: 1.4;
}
/* El camino: mismo gris, SIN negrita. Hereda el color, así que si algún día
   se cambia `--g-suave` los dos se mueven juntos. */
.g-donde span { color: inherit; font-weight: 400; }
.g-paso-sub { margin: 0 0 14px; color: var(--g-suave); font-size: 0.95rem; }
.g-texto { margin: 0 0 14px; font-size: 0.95rem; }
.g-texto p:first-child { margin-top: 0; }
.g-texto p:last-child  { margin-bottom: 0; }
.g-texto img { max-width: 100%; height: auto; }

/* ── v10 · Las imágenes que el admin adjuntó al paso ──────────────────────
   Van pegadas debajo del texto y antes de todo lo demás.

   🔑 `max-width:100%` + `height:auto` y NADA de `width:100%`: con `width` una
   imagen chica —una flecha, un ícono, un recorte— se estiraría a lo ancho de
   la tarjeta y saldría borrosa. Así cada una se dibuja a su tamaño real y sólo
   se achica si no entra, que es lo que significa «adaptativa».

   📱 El bloque blanco (`.g-card`) ya trae su propio relleno, así que estas
   reglas no agregan ninguno: en un celular la imagen llega justo hasta el
   borde interno de la tarjeta y no se pega al vidrio.

   `height:auto` es obligatorio porque el <img> lleva los atributos `width` y
   `height` REALES para reservar el lugar: sin `height:auto`, al achicarse por
   `max-width` conservaría el alto original y la imagen saldría aplastada. */
.g-imgs { display: flex; flex-direction: column; align-items: flex-start;
    gap: 10px; margin: 0 0 14px; }
.g-img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--g-borde);
    background: #ffffff;
}

/* ── Las opciones ── */
.g-ops { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.g-op {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: var(--g-carta);
    border: 1px solid var(--g-borde);
    border-radius: 12px;
    color: var(--g-texto);
    text-decoration: none;
    font-size: 1rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    min-height: 56px;         /* el dedo necesita 44px como mínimo; 56 con aire */
}
.g-op:hover  { border-color: #94a3b8; background: #f8fafc; }
.g-op:active { transform: scale(0.995); }
.g-op-ico { font-size: 1.35rem; flex: 0 0 auto; }
.g-op-txt { min-width: 0; }
.g-op-et  { font-weight: 600; }
.g-op-sub { display: block; font-size: 0.83rem; color: var(--g-suave); }

/* Opciones con casilla (los pasos que permiten elegir varias) */
.g-check { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.g-check input { width: 20px; height: 20px; flex: 0 0 auto; }

/* ── Botones ── */
.g-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 20px;
    border: 0;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    min-height: 48px;
}
.g-btn-primary { background: var(--g-acento); color: #fff; }
.g-btn-primary:hover { background: var(--g-acentoh); }
.g-btn-ghost { background: #f1f5f9; color: #334155; }
.g-btn-ghost:hover { background: #e2e8f0; }

/* ── La barra de salida: Anterior y Reiniciar ──
   🔴 Va en TODAS las pantallas, no sólo en las de pregunta. Es la salida de
      emergencia que pidió el admin: «no quiero que el cliente quede dando
      vuelta». Y NO hay «Adelante» a propósito: al volver atrás la elección se
      descarta y hay que elegir de nuevo. */
/* «← Atrás» arriba a la izquierda, fuera de la tarjeta. Es lo primero que
   se ve al entrar, que es donde el pulgar lo busca. */
.g-atras {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    padding: 9px 14px 9px 10px;
    color: var(--g-suave);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    min-height: 44px;      /* el mínimo que se toca cómodo con el dedo */
}
/* 🔴 Era #eef2f7, que contra el fondo nuevo (#eaeff5) queda a 9 de distancia:
   el hover no se veía. Se oscurece para que se note que se puede tocar. */
.g-atras:hover { background: #ffffff; color: var(--g-texto); }

/* «Inicio» abajo a la derecha, FUERA de la tarjeta. Sin `border-top`: la línea
   estaba para separarlo del contenido cuando vivía ADENTRO del bloque blanco;
   ahora que está afuera, no hay nada de qué separarlo. */
.g-abajo { display: flex; justify-content: flex-end; margin-top: 14px; }

/* `.g-salida` SIGUE EN USO: lo usan las dos pantallas de aviso («esta guía no
   está lista» y «no hay ninguna guía»), donde el botón sí va adentro de la
   tarjeta y la línea sí separa. Por eso no se borra. */
.g-salida {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--g-borde);
}

/* ── Las tarjetas de producto del final ── */
.g-prods {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;      /* una sola columna en el celular */
}
.g-prod {
    display: flex;
    gap: 12px;
    align-items: center;
    background: var(--g-carta);
    border: 1px solid var(--g-borde);
    border-radius: 12px;
    padding: 12px;
    min-width: 0;
}
.g-prod-img {
    width: 76px; height: 76px;
    object-fit: contain;
    border-radius: 8px;
    background: #f1f5f9;
    flex: 0 0 auto;
}
.g-prod-sinimg {
    width: 76px; height: 76px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; background: #f1f5f9; font-size: 1.8rem;
    flex: 0 0 auto;
}
.g-prod-info { min-width: 0; flex: 1 1 auto; }
.g-prod-nom {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--g-texto);
    text-decoration: none;
    display: block;
}
.g-prod-nom:hover { text-decoration: underline; }
.g-precio { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.g-precio-fin  { font-size: 1.05rem; font-weight: 700; color: var(--g-ok); }
.g-precio-tach { font-size: 0.85rem; color: #94a3b8; text-decoration: line-through; }
.g-off {
    background: #dc2626; color: #fff;
    font-size: 0.72rem; font-weight: 700;
    padding: 2px 7px; border-radius: 5px;
}
.g-ver { margin-top: 8px; }
.g-ver .g-btn { padding: 8px 14px; min-height: 40px; font-size: 0.85rem; }

/* ── Categorías recomendadas ── */
.g-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.g-cat {
    display: inline-block;
    padding: 9px 15px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 99px;
    color: #1e40af;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}
.g-cat:hover { background: #dbeafe; }

/* ── Avisos ── */
.g-aviso {
    padding: 13px 15px;
    border-radius: 10px;
    font-size: 0.9rem;
    margin-bottom: 14px;
}
.g-aviso-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.g-aviso-mal  { background: #fef2f2; border: 1px solid #fca5a5; color: #7f1d1d; }
.g-disclaimer {
    margin-top: 16px;
    font-size: 0.8rem;
    color: var(--g-suave);
    line-height: 1.5;
}
.g-vacio { color: var(--g-suave); font-style: italic; }

/* ── De acá para arriba, pantalla grande ── */
@media (min-width: 640px) {
    .g-wrap    { padding: 30px 20px 60px; }
    .g-titulo  { font-size: 1.35rem; }
    .g-logo    { width: 58px; height: 58px; }
    .g-prods   { grid-template-columns: 1fr 1fr; }
}

.g-inicio {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    background: #f1f5f9;
    color: #334155;
    text-decoration: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    min-height: 44px;
}
/* 🔴 Era #e2e8f0, que contra el fondo nuevo queda a 12 de distancia. El botón
   salió de la tarjeta blanca y ahora vive sobre el fondo: el hover tiene que
   ir hacia el BLANCO, no hacia el gris, o se confunde con la página. */
.g-inicio:hover { background: #ffffff; color: var(--g-texto); }

/* Quien pidió menos movimiento, que no lo tenga. */
@media (prefers-reduced-motion: reduce) {
    .g-op:active { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   MODO WIDGET — la misma guía adentro de un <iframe>
   El iframe ya le pone su propio marco y su fondo, así que acá se sacan los
   márgenes de página: si no, quedaría un recuadro adentro de otro recuadro.
   ───────────────────────────────────────────────────────────────────────── */
body.guia-widget { background: var(--g-carta); }
body.guia-widget .g-wrap { max-width: 100%; padding: 16px 14px 28px; }
/* 🔑 En el widget el fondo es BLANCO y la tarjeta va sin borde ni padding, para
   fundirse con la página que lo embebe. La sombra que se le puso a `.g-card`
   quedaría ahí flotando sin caja: se apaga. */
body.guia-widget .g-card { border: 0; padding: 0; margin-bottom: 12px; box-shadow: none; }
/* Las opciones sí conservan su borde: son los botones que hay que tocar. */
body.guia-widget .g-op { background: #fff; }
body.guia-widget .g-prods { grid-template-columns: 1fr; }

/* ── v3 · NOTAS Y ENLACES ─────────────────────────────────────────────── */
/* La nota: tarjeta suave, plegada. En un celular una nota larga tapaba las
   opciones, que es lo que el cliente vino a tocar. */
.g-nota {
    margin: 16px 0 0;
    padding: 13px 15px;
    background: #f8fafc;
    border: 1px solid var(--g-borde);
    border-radius: 10px;
}
.g-nota-tit { margin: 0 0 4px; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.g-nota-sub { margin: 0; font-size: 0.9rem; color: var(--g-suave); line-height: 1.45; }
.g-nota-det { margin-top: 9px; }
.g-nota-det > summary {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--g-acento);
    padding: 6px 0;
    min-height: 32px;
}
.g-nota-cuerpo { font-size: 0.92rem; line-height: 1.6; }
.g-nota-cuerpo p { margin: 0 0 9px; }
.g-nota-cuerpo ul, .g-nota-cuerpo ol { margin: 0 0 9px; padding-left: 20px; }
.g-nota-cuerpo li { margin-bottom: 4px; }
.g-nota-cuerpo h3, .g-nota-cuerpo h4 { margin: 12px 0 5px; font-size: 0.95rem; }

/* Los enlaces: se tocan con el dedo, así que 48px de alto como los botones. */
.g-enlaces { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.g-enlace {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 48px;
    padding: 12px 15px;
    background: #fff;
    border: 1px solid var(--g-borde);
    border-radius: 10px;
    color: var(--g-texto);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;   /* una URL larga NO puede desbordar el celular */
}
.g-enlace:hover { border-color: var(--g-acento); color: var(--g-acento); }
.g-enlace-ext { flex-shrink: 0; font-size: 0.85rem; color: var(--g-suave); }

/* ── v4 · EL FORMULARIO DE CONTACTO ──────────────────────────────────── */
/* El formulario, plegado. El <summary> se toca con el dedo: 44 px de alto. */
.g-form-det { margin-top: 16px; }
.g-form-det > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    background: #f1f5f9;
    border: 1px solid var(--g-borde);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--g-texto);
}
.g-form-det > summary:hover { background: #e6edf5; }
.g-form-det[open] > summary { margin-bottom: 4px; }

/* 🔸 gap 11 → 7: el admin los quería «un poquito más juntitos». Se toca el
   espacio ENTRE campos, no el padding de adentro: achicar el padding haría
   los campos más difíciles de tocar con el dedo. */
.g-form { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.g-form-et { display: flex; flex-direction: column; gap: 3px;
             font-size: 0.86rem; font-weight: 600; color: var(--g-suave); }
/* Las aclaraciones: chiquitas, sin negrita, para que no compitan con la etiqueta. */
/* 🔑 El título del campo y su «(opcional)» van DENTRO de este span, que es UN
   solo ítem del flex. Sueltos, cada uno se llevaba su propia fila y el
   «(opcional)» aparecía DEBAJO en vez de al lado. */
.g-form-t { display: block; }
.g-form-ac { font-size: 0.76rem; font-weight: 400; color: #94a3b8; line-height: 1.35; }
.g-form-op { font-weight: 400; color: #94a3b8; }
.g-form-et input, .g-form-et textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--g-borde);
    border-radius: 8px;
    font-size: 16px;   /* 16px justo: abajo de eso iOS hace zoom solo al tocar */
    font-family: inherit;
    color: var(--g-texto);
    background: #fff;
    box-sizing: border-box;
}
.g-form-et textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.g-form-et input:focus, .g-form-et textarea:focus {
    outline: 2px solid var(--g-acento); outline-offset: 1px; border-color: transparent;
}
.g-form .g-btn { align-self: flex-start; }
/* 🔒 El campo trampa. NO se usa `display:none`: hay robots que saltean lo
   que está en display:none justamente porque saben que es una trampa. Se lo
   saca de la pantalla, que para el robot es indistinguible de un campo real. */
.g-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.g-form-ok, .g-form-mal {
    margin: 16px 0 0; padding: 12px 14px; border-radius: 10px;
    font-size: 0.92rem; line-height: 1.5;
}
.g-form-ok  { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.g-form-mal { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/* ── ⭐ EL PRODUCTO DESTACADO (v6) ──────────────────────────────────────
   Lo marca el admin desde el panel. Se distingue con BORDE y una cinta, no
   con un fondo de color: la tarjeta ya vive sobre el bloque blanco y un
   relleno más le bajaría el contraste al precio, que es lo que se tiene que
   leer. El borde no mueve nada de lugar porque reemplaza al que ya había. */
.g-prod-dest {
    position: relative;
    border: 2px solid #f59e0b;
    border-radius: 10px;
    padding-top: 22px;
}
.g-dest {
    position: absolute;
    top: 0; left: 0;
    background: #f59e0b;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: 8px 0 8px 0;
}

/* ── ⭐ LA RESPUESTA Y LA CATEGORÍA DESTACADAS (v7) ─────────────────────
   MISMO ámbar que el producto destacado, para que el cliente lea una sola
   señal en toda la guía. Lo que cambia es cuánto se dice:
     · la respuesta es un botón grande  → borde + «★ Recomendado»
     · la categoría es una ficha chica  → SÓLO el borde, no entra el texto */
/* 🔴 `border`, no `border-color`, y 2px: es el MISMO grosor que el producto
   destacado, con el que el admin lo compara. Con 1px no se distinguía. */
.g-op-dest {
    border: 2px solid #f59e0b;
    /* El botón NO puede crecer al destacarse: 1px más de borde de cada lado se
       compensa con 1px menos de padding. Si creciera, marcar uno movería de
       lugar a toda la lista. */
    padding: 13px 15px;
}
/* 🔴 ESTA REGLA NO ES DECORATIVA. `.g-op:hover` (0,2,0) le gana a `.g-op-dest`
   (0,1,0) y le ponía el borde GRIS: con el mouse encima, el destacado dejaba de
   verse destacado. Hace falta un hover propio, de igual especificidad. */
.g-op-dest:hover {
    border-color: #f59e0b;
    background: #fffbeb;
}
.g-op-dest-et {
    display: inline-block;
    margin-top: 3px;
    background: #f59e0b;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
}
/* La ficha, al mismo grosor que las otras dos señales. Mismo truco del padding
   para que no cambie de tamaño. `.g-cat:hover` sólo toca el fondo, así que acá
   no hace falta un hover propio — pero se le da uno igual para que el ámbar no
   quede peleando con el celeste de la ficha común. */
.g-cat-dest {
    border: 2px solid #f59e0b;
    padding: 8px 14px;
    font-weight: 700;
}
.g-cat-dest:hover {
    background: #fef3c7;
}

/* ── ▾ LA FLECHA DE PLEGADO ─────────────────────────────────────────────
   Dice de un vistazo si el bloque está cerrado o abierto: apunta ABAJO cuando
   está plegado y ARRIBA cuando está desplegado.
   🔑 Se DIBUJA con dos bordes, no es un carácter ni un emoji: un ▼ o un ⌄
      dependen de que la fuente del sistema los tenga, y ahí es donde salen los
      cuadraditos en los Android viejos.
   🔸 `margin-left:auto` la empuja a la derecha — los dos <summary> son flex.
   🔸 Y se apaga el triangulito propio del navegador: si no, quedan DOS. */
.g-form-det > summary::-webkit-details-marker,
.g-nota-det > summary::-webkit-details-marker { display: none; }
.g-form-det > summary,
.g-nota-det > summary { list-style: none; }
.g-form-det > summary::marker,
.g-nota-det > summary::marker { content: ''; }

.g-form-det > summary::after,
.g-nota-det > summary::after {
    content: '';
    flex: 0 0 auto;
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    /* 45° = punta hacia ABAJO (plegado). El translate lo centra ópticamente. */
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.18s ease;
    opacity: 0.65;
}
/* Abierto: la misma flecha girada, punta hacia ARRIBA. */
.g-form-det[open] > summary::after,
.g-nota-det[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}
/* Quien pidió menos movimiento en su sistema no ve la animación. */
@media (prefers-reduced-motion: reduce) {
    .g-form-det > summary::after,
    .g-nota-det > summary::after { transition: none; }
}

/* ── LA BARRA DE ARRIBA (Atrás · Inicio) ────────────────────────────────
   🔑 Los dos PEGADOS y a la izquierda. NADA de `space-between`: eso fue lo
      que los mandó a cada punta el 2026-08-08 y el admin lo revirtió.
      Acá sólo hay `gap`, así quedan uno al lado del otro.
   🔸 «Atrás» no existe en la primera pantalla; sin `space-between` eso no
      descoloca nada: «Inicio» queda solo a la izquierda, en su lugar.
   📱 `flex-wrap` para que en una pantalla muy angosta bajen en vez de
      encimarse. */
.g-barra {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}