/* Capa shell: cajón móvil y barra inferior. Dueño: 03-06.
   Solo debajo de 1024 px. El cajón abre con .abierto (cajon.js) o, sin JS, con :target; .con-js
   (la pone cajon.js) apaga el :target para que el hash no lo deje abierto después de cerrar.
   Solo tokens: el velo es color-mix() sobre --eq-gris-900. Objetivos táctiles de al menos 44 px. */
@layer shell{
  .cajon-abrir,
  .cajon,
  .cajon-velo,
  .barra-inferior{display:none}

  body.sin-scroll{overflow:hidden}

  @media (max-width: 1023.98px){
    .cajon-abrir{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-left:calc(-1 * var(--esp-2));padding:0;border:0;border-radius:var(--r-md);background:transparent;color:var(--tx-titulo);text-decoration:none;cursor:pointer}
    .cajon-abrir:hover{background:var(--sup-hover)}
    .cajon-abrir .ico{width:24px;height:24px}

    .cajon.abierto,
    .cajon:target:not(.con-js){display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:1000;width:min(85vw, 320px);overflow-y:auto;overscroll-behavior:contain;background:var(--riel-fondo);color:var(--riel-tx);box-shadow:var(--sombra-2)}

    .cajon-velo.abierto,
    .cajon:target:not(.con-js) ~ .cajon-velo{display:block;position:fixed;inset:0;z-index:999;background:color-mix(in srgb, var(--eq-gris-900) 45%, transparent)}

    .cajon-cabeza{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2);min-height:var(--topbar-alto);padding:0 var(--esp-2) 0 var(--esp-4);border-bottom:1px solid var(--riel-hover)}
    .cajon-titulo{color:var(--riel-tx);font-size:var(--t-chico);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
    .cajon-cerrar{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-md);color:var(--riel-tx);text-decoration:none}
    .cajon-cerrar:hover{background:var(--riel-hover)}
    .cajon-cerrar .ico{width:22px;height:22px}

    .cajon-nav{flex:1;padding:var(--esp-2) 0 var(--esp-5)}
    .cajon-lista,
    .cajon-hijos,
    .cajon-secciones{list-style:none;margin:0;padding:0}
    .cajon-nodo + .cajon-nodo{margin-top:var(--esp-1)}
    .cajon-abajo{margin-top:var(--esp-4);padding-top:var(--esp-2);border-top:1px solid var(--riel-hover)}

    .cajon-enlace{display:flex;align-items:center;gap:var(--esp-3);min-height:44px;padding:var(--esp-2) var(--esp-4);border-left:4px solid transparent;color:var(--riel-tx);font-size:var(--t-med);font-weight:600;line-height:1.25;text-decoration:none;cursor:pointer}
    .cajon-enlace .ico{flex:none;width:20px;height:20px;color:var(--riel-icono)}
    .cajon-enlace:hover{background:var(--riel-hover)}
    .cajon-enlace.activo,
    .cajon-enlace[aria-current="page"]{background:var(--riel-activo);border-left-color:var(--riel-filete)}
    .cajon-texto{flex:1;min-width:0}
    .cajon-rotulo{font-weight:700}
    .cajon-hijo,
    .cajon-sumario{padding-left:calc(var(--esp-4) + var(--esp-4));font-size:var(--t-base);font-weight:600}
    .cajon-seccion{padding-left:calc(var(--esp-4) + var(--esp-6) + var(--esp-2));color:var(--riel-tx);font-size:var(--t-base);font-weight:500}

    .cajon-sumario{list-style:none}
    .cajon-sumario::-webkit-details-marker{display:none}
    .cajon-chev{flex:none;transition:transform var(--transicion)}
    .cajon-unidad[open] > .cajon-sumario .cajon-chev{transform:rotate(90deg)}

    .cajon-cuenta{flex:none;min-width:22px;padding:1px var(--esp-2);border-radius:var(--r-pill);background:var(--insignia-fondo);color:var(--insignia-tx);box-shadow:0 0 0 2px var(--insignia-anillo);font-size:var(--t-chico);font-weight:700;line-height:18px;text-align:center}

    .cajon :focus-visible{outline:var(--foco-ancho) solid var(--riel-foco);outline-offset:calc(-1 * var(--foco-ancho))}
    .cajon-abrir:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:var(--foco-sep)}

    /* Barra inferior del RTC puro: debajo del velo y del cajón, encima del contenido. */
    .barra-inferior{position:fixed;left:0;right:0;bottom:0;z-index:900;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));min-height:calc(56px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--sup);border-top:1px solid var(--borde);box-shadow:var(--sombra-2)}
    .barra-inferior-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:44px;padding:var(--esp-1) var(--esp-1) 2px;color:var(--tx-2);font-size:var(--t-chico);font-weight:600;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer}
    .barra-inferior-item:hover{background:var(--sup-hover)}
    .barra-inferior-item.activo,
    .barra-inferior-item[aria-current="page"]{color:var(--tx-marca)}
    .barra-inferior-icono{position:relative;display:inline-flex}
    .barra-inferior-icono .ico{width:22px;height:22px}
    .barra-inferior-texto{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .barra-inferior-cuenta{position:absolute;top:-6px;left:14px;min-width:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--cuenta-fondo);color:var(--cuenta-tx);box-shadow:0 0 0 2px var(--sup);font-size:11px;font-weight:700;line-height:16px;text-align:center}
    .barra-inferior-item:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:calc(-1 * var(--foco-ancho))}

    /* El contenido (y «Guardar seguimiento») no queda tapado por la barra. */
    .app.con-inferior .area{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
    /* El foco que llega con Tab tampoco queda debajo de la barra (2.4.11, 06-02): el scroll deja su alto libre. */
    html:has(.app.con-inferior){scroll-padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  }

  @media (prefers-reduced-motion: reduce){
    .cajon-chev{transition:none}
  }
}