/* ══════════════════════════════════════════════════════════════════════════
   NAVEGADOR ENTRE SITIOS — /sistema/navegador/navegador.css
   2026-08-02

   Este archivo existe APARTE del PHP por una razón medida: /muro/ manda
   `Content-Security-Policy: … style-src 'self'` SIN 'unsafe-inline'. Ahí no
   corre un <style> ni un atributo style="". Un archivo del mismo origen sí.
   ⇒ Todo el estilo de la ficha vive acá. No mover nada al HTML.

   Prefijo `dmsnav-` en TODO: estos 4 sitios tienen 1.443 atributos style=""
   y hojas propias; un nombre corto (.tab, .panel) choca seguro.
   ══════════════════════════════════════════════════════════════════════════ */

.dmsnav {
    /* ── SIN COLOR: SÓLO GRISES CLAROS Y OSCUROS ──────────────────────────
       🔴 2026-08-02, en dos pasos y los dos pedidos del dueño:
          1.º «menos colores… todo tonos azulados» — la 1.ª versión mezclaba
              azul (marca), VERDE (el «acá estás» y el ícono del sitio actual)
              y ÁMBAR (el foco del teclado): tres familias en un menú de 4
              renglones.
          2.º «puede ser en estilos grises claros, grises oscuros» — o sea
              sacar también el azul y quedarse sin ninguna familia de color.
       ⇒ Son GRISES NEUTROS DE VERDAD (#1a1a1a, #666, #e0e0e0…), no los grises
         "fríos" tipo slate que llevan una pizca de azul adentro. La diferencia
         no es capricho: contra el fondo de estos 4 sitios, un slate al lado de
         un gris puro se nota, y volvería a haber dos familias.
       🔑 Están todos acá arriba a propósito: cambiar el aspecto del navegador
          en los 4 sitios es tocar estas 9 líneas y nada más. */
    --dmsnav-tinta:  #1a1a1a;   /* texto principal — gris casi negro */
    --dmsnav-suave:  #666666;   /* texto secundario — gris medio     */
    --dmsnav-borde:  #e0e0e0;   /* líneas — gris claro               */
    --dmsnav-fondo:  #ffffff;
    --dmsnav-marca:  #3d3d3d;   /* gris OSCURO — la ficha y los íconos */
    --dmsnav-marca2: #5a5a5a;   /* gris oscuro medio — el degradé      */
    --dmsnav-suave2: #f4f4f4;   /* gris CLARO — al pasar el mouse      */
    --dmsnav-suave3: #e4e4e4;   /* gris claro medio — activo/distintivo */
    --dmsnav-oscuro: #2b2b2b;   /* gris muy oscuro — texto sobre claro  */
    /* Debajo de los 9998/9999 que ya usan los diálogos de /publico/ y /reventa/
       (medido). Si un modal del cobro está abierto, tiene que taparnos, no al
       revés: el navegador es secundario y el cobro no se interrumpe. */
    --dmsnav-z: 9990;
}

/* ── LA FICHITA CERRADA ────────────────────────────────────────────────────
   Asoma pegada al borde izquierdo, a media altura. El ancho total es mayor
   que lo que se ve: se corre hacia afuera con translateX y queda visible sólo
   la parte derecha. Así "asoma" sin ocupar pantalla.

   🔴 2026-08-02 — CÓMO SE ROMPIÓ Y CÓMO SE ARREGLÓ. La 1.ª versión tenía
      `width:46px` + `padding-right:5px` + `translateX(-24px)`, con el contenido
      pegado a la derecha. Haciendo la cuenta: el ícono caía entre los 9 y los
      28px de la caja, y lo visible arrancaba recién en el 24 ⇒ **se veían 4px de
      los 19 del ícono**. El dueño lo vio en pantalla: "se ve cortadito".
      🔑 La lección: con `translateX` negativo, lo que decide si algo se ve NO es
         el padding del lado visible, es **dónde cae el contenido respecto del
         corte**. Se arregla empujando el contenido con `padding-left` MAYOR que
         el desplazamiento, no achicando el desplazamiento.

   🔴 2.ª CORRECCIÓN, MISMO DÍA: SÓLO SE VE LA FLECHA «›». El dueño rechazó el
      ícono dos veces —cortado primero, entero después— y lo que quiere es una
      lengüeta FINITA con la flecha y nada más. El ícono del sitio actual sigue
      existiendo, pero DENTRO del panel, donde se ve completo.

   🔴 3.ª CORRECCIÓN: LA FLECHA MÁS CHICA Y MÁS ADENTRO. El alto quedó como
      estaba (76px, y el dueño lo aprobó); lo que cambió es la flecha, de 11 a
      9px, y su posición: ahora queda CENTRADA en la franja visible en vez de
      arrimada al borde de la pantalla.

   La cuenta de ahora, para que se pueda rehacer si alguien toca un número:
      caja 38 · borde 2 · padding 20 izq / 4 der ⇒ contenido en [20, 32] = 12px
      contenido = sólo la flecha                 = 9px   ✔ entra
      corte en 14                                ⇒ la flecha empieza 8px ADENTRO
      visible = 38 − 14                          = 24px
      la flecha ocupa [22, 31] de la franja [14, 38] ⇒ 8px a la izquierda y 7 a
      la derecha: queda centrada, que es lo que se ve como "metida para adentro".
   🔑 El primer intento fue 21/3 y daba 9 contra 6: se veía corrida. La prueba lo
      cazó porque COMPARA los dos márgenes, no porque alguien mirara la pantalla.

   ⚠️ 24px de ancho está por debajo de los 44px que recomienda Apple. Es una
      decisión TOMADA, no un descuido: se pidió finita. Se compensa con los 76px
      de alto y con que está pegada al BORDE de la pantalla, que es el lugar más
      fácil de acertar con el dedo (no hay que frenar: la pantalla frena sola).
      No se agranda el área invisible hacia la derecha a propósito: se comería
      clics de lo que haya debajo y eso es de los bugs más difíciles de ver. */
.dmsnav-tab {
    position: fixed;
    /* 🔴 2026-08-02 — EL NOTCH DEL iPHONE ACOSTADO. Una auditoría midió que el
       CSS no contemplaba `safe-area-inset-left` y la lengüeta vive en `left:0`:
       con el iPhone apaisado y el notch a la izquierda, iOS reserva ~44px de
       zona insegura de ese lado ⇒ los 24px visibles caían ENTEROS detrás del
       bisel. No incómodos: inalcanzables.
       🔑 El fallback `0px` del `env()` es obligatorio: en un navegador sin
          soporte, `left: env(...)` sin fallback es una declaración inválida y
          se descarta ENTERA — la ficha se iría a su posición estática. */
    left: 0;
    left: env(safe-area-inset-left, 0px);
    top: 50%;
    /* El literal va ANTES de la variable a propósito: en un WebView viejo sin
       custom properties, `z-index: var(--x)` es inválido y queda en `auto` ⇒ la
       ficha se va detrás del contenido. Con el literal delante, el viejo usa
       9990 y el moderno pisa con la variable. */
    z-index: 9990;
    z-index: var(--dmsnav-z);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 38px;
    height: 76px;
    /* el padding-left (20) es la zona que queda del lado de afuera del corte */
    padding: 0 4px 0 20px;
    margin: 0;
    /* Borde blanco: despega la ficha de cualquier fondo, claro u oscuro. Sin el
       lado izquierdo, que está fuera de pantalla y sólo sumaría un pixel raro
       si alguien cambia el desplazamiento. */
    border: 2px solid #fff;
    border-left: 0;
    border-radius: 0 13px 13px 0;
    background: linear-gradient(135deg, var(--dmsnav-marca), var(--dmsnav-marca2));
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    transform: translate(-14px, -50%);
    transition: transform .22s ease, box-shadow .22s ease;
    touch-action: manipulation;
}
.dmsnav-tab:hover,
.dmsnav-tab:focus-visible {
    transform: translate(0, -50%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .32);
}
/* El foco del teclado era ámbar, después azul: ahora gris muy oscuro. */
.dmsnav-tab:focus-visible { outline: 3px solid var(--dmsnav-oscuro); outline-offset: 2px; }
.dmsnav-tab:active { transform: translate(0, -50%) scale(.97); }

.dmsnav-tab-flecha { display: flex; width: 9px; height: 9px; opacity: .95; }
.dmsnav-svg        { width: 100%; height: 100%; display: block; }

/* Mientras el panel está abierto, la ficha se esconde: si no, queda un botón
   flotando encima del fondo oscurecido sin hacer nada.
   -60px: tiene que ser MAYOR que el ancho de la caja (38), si no asoma un
   pedacito. */
.dmsnav-abierto .dmsnav-tab {
    transform: translate(-60px, -50%);
    pointer-events: none;
}

/* ── EL FONDO OSCURO ──────────────────────────────────────────────────────── */
.dmsnav-fondo {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 9991;
    z-index: calc(var(--dmsnav-z) + 1);
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity .22s ease;
    -webkit-tap-highlight-color: transparent;
}
.dmsnav-abierto .dmsnav-fondo { opacity: 1; }

/* ── EL PANEL ─────────────────────────────────────────────────────────────
   Base = celular: hoja que sube desde abajo, que es donde llega el pulgar.
   De 768px para arriba se convierte en panel lateral (ver el @media). */
.dmsnav-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9992;
    z-index: calc(var(--dmsnav-z) + 2);
    box-sizing: border-box;
    max-height: 82vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* El notch y la barra de gestos del iPhone, POR LOS TRES LADOS que puede
       recortar. Sin el `left`, con el teléfono acostado y el notch a la
       izquierda, el borde del panel queda debajo del bisel. */
    padding: 6px 12px 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding-left:  calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
    border-radius: 18px 18px 0 0;
    background: var(--dmsnav-fondo);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
    transform: translateY(102%);
    transition: transform .26s cubic-bezier(.22, .61, .36, 1);
    font-family: inherit;
}
.dmsnav-abierto .dmsnav-panel { transform: translateY(0); }

.dmsnav-cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 4px 10px;
    border-bottom: 1px solid var(--dmsnav-borde);
}
.dmsnav-titulo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dmsnav-tinta);
    letter-spacing: .01em;
}
.dmsnav-cerrar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 9px;
    border: 0;
    border-radius: 50%;
    background: var(--dmsnav-suave2);
    color: var(--dmsnav-suave);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
}
.dmsnav-cerrar:hover { background: var(--dmsnav-suave3); color: var(--dmsnav-tinta); }
.dmsnav-cerrar:focus-visible { outline: 3px solid var(--dmsnav-marca); outline-offset: 2px; }

.dmsnav-lista { display: block; padding-top: 6px; }

/* Va con «.dmsnav » adelante como todas las que declaran COLOR: una verificación
   listó las reglas del componente separando «las que sólo arman la caja» de «las
   que declaran color o decoración», y encontró que ésta se había quedado en
   (0,1,0). Las de caja no las pisa nadie; las de color, cualquier `a:hover` del
   sitio. La regla es: **si declara color, lleva el prefijo.** */
.dmsnav .dmsnav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 54px: por encima de los 44px que pide Apple y de los 48 de Android. */
    min-height: 54px;
    padding: 8px 10px;
    border-radius: 12px;
    color: var(--dmsnav-tinta);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease;
}
.dmsnav-item + .dmsnav-item { margin-top: 2px; }

/* ── 🔴 2026-08-02 — POR QUÉ ESTAS REGLAS SON TAN INSISTENTES ──────────────
   El dueño vio que en /muro/ los enlaces quedaban grises pero en /publico/,
   /reventa/ y /ayuda/ se ponían de color al pasar el mouse. MEDIDO, y la causa
   es de manual:

     /muro/     → CERO reglas de color sobre enlaces
     /publico/  → `a:hover { color: var(--primary-dark) }`  en estilos.css
     /reventa/  → idem
     /ayuda/    → idem en app.css

   Mi regla de hover declaraba SÓLO el fondo. El color venía de `.dmsnav-item`,
   que es especificidad (0,1,0), y `a:hover` del sitio es (0,1,1) ⇒ **le ganaba
   al pasar el mouse**. En el muro no había nadie que ganara, y por eso ahí se
   veía bien: el componente no estaba "más gris" allá, estaba SIN COMPETENCIA.

   🔑 Un componente que se suelta dentro de 4 sitios con CSS ajeno tiene que
      DECLARAR TODOS LOS ESTADOS que le importan, no heredarlos. Lo que no
      declarás, lo decide el sitio que lo hospeda.
   🔑 Se sube a (0,2,1) con `.dmsnav` adelante: empata con `.pie a:hover` del
      sitio, y en un empate gana la que se carga DESPUÉS — la hoja del navegador
      se enlaza desde el pie, o sea al final. No se usa `!important`: con
      especificidad y orden alcanza, y un `!important` acá haría imposible
      ajustar nada más adelante. */
.dmsnav .dmsnav-item,
.dmsnav .dmsnav-item:link,
.dmsnav .dmsnav-item:visited {
    color: var(--dmsnav-tinta);
    text-decoration: none;
}
.dmsnav .dmsnav-item:hover {
    background: var(--dmsnav-suave2);
    color: var(--dmsnav-tinta);
    text-decoration: none;
}
.dmsnav .dmsnav-item:active {
    background: var(--dmsnav-suave3);
    color: var(--dmsnav-tinta);
    text-decoration: none;
}
.dmsnav .dmsnav-item:focus,
.dmsnav .dmsnav-item:focus-visible {
    color: var(--dmsnav-tinta);
    text-decoration: none;
}
.dmsnav .dmsnav-item:focus-visible { outline: 3px solid var(--dmsnav-marca); outline-offset: -3px; }
/* El ícono también: si el sitio pinta `a:hover svg`, se lo lleva puesto. */
.dmsnav .dmsnav-item:hover .dmsnav-item-ico,
.dmsnav .dmsnav-item:active .dmsnav-item-ico { color: var(--dmsnav-marca); }
.dmsnav .dmsnav-item-actual:hover .dmsnav-item-ico { color: var(--dmsnav-oscuro); }

.dmsnav .dmsnav-item-ico {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 9px;
    border-radius: 10px;
    background: var(--dmsnav-suave2);
    color: var(--dmsnav-marca);
}
.dmsnav-item-txt {
    flex: 1 1 auto;
    font-size: .97rem;
    font-weight: 600;
    line-height: 1.25;
    /* Un título largo cargado desde el panel no puede romper la caja. */
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* 🔴 2026-08-02 — El distintivo «acá estás» SE SACÓ (pedido del dueño: ensucia).
   Pasó por verde → azul claro → gris → borrado. Su regla ya no existe: dejarla
   muerta acá sería basura que el próximo que lea el archivo tiene que descartar.
   El sitio actual se marca con el fondo y con el ícono más oscuro, y para un
   lector de pantalla queda el `aria-current="page"` del <a>. */
.dmsnav-item-actual { background: var(--dmsnav-suave2); }
.dmsnav .dmsnav-item-actual .dmsnav-item-ico {
    background: var(--dmsnav-suave3);
    color: var(--dmsnav-oscuro);
}

/* ── DE TABLET PARA ARRIBA: panel lateral, no hoja ────────────────────────── */
@media (min-width: 768px) {
    .dmsnav-panel {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 0;
        /* Un iPhone ACOSTADO mide ≥768px, así que entra por esta regla: el
           safe-area de la izquierda hace falta ACÁ TAMBIÉN. Una auditoría midió
           que esta regla volvía a declarar `padding` y pisaba el safe-area del
           celular; se repone entero. */
        left: env(safe-area-inset-left, 0px);
        width: 272px;
        max-height: 80vh;
        padding: 6px 12px 12px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        border-radius: 0 18px 18px 0;
        box-shadow: 6px 0 34px rgba(0, 0, 0, .26);
        transform: translate(-104%, -50%);
    }
    .dmsnav-abierto .dmsnav-panel { transform: translate(0, -50%); }
}

/* ── PANTALLAS MUY BAJAS (celular acostado) ───────────────────────────────── */
@media (max-height: 460px) {
    .dmsnav-tab   { height: 60px; }
    .dmsnav-panel { max-height: 92vh; }
    .dmsnav-item  { min-height: 46px; }
}

/* ── QUIEN PIDIÓ MENOS MOVIMIENTO, NO TIENE MOVIMIENTO ─────────────────────
   iOS y Android exponen este ajuste; hay gente que se marea con los paneles
   que se deslizan. Se apaga la animación, no la función. */
@media (prefers-reduced-motion: reduce) {
    .dmsnav-tab,
    .dmsnav-fondo,
    .dmsnav-panel,
    .dmsnav-item { transition: none; }
}

/* ── SIN JAVASCRIPT ───────────────────────────────────────────────────────
   El panel y el fondo llevan `hidden` en el HTML y el JS se los saca. Si el JS
   no carga, la ficha no hace nada pero tampoco molesta, y los enlaces del pie
   de página siguen estando: por eso NO se tocaron. */
.dmsnav-fondo[hidden],
.dmsnav-panel[hidden] { display: none; }

/* Impresión: la ficha no va al papel. */
@media print {
    .dmsnav { display: none; }
}