/* EL CAJÓN DEL MENÚ — LA MISMA PIEZA EN TODOS LOS NEGOCIOS DE LA CASA (2/11/2026).

   Qué es: el botón de las tres rayas y el cajón que entra desde el lado con los módulos
   del negocio. Hoy lo tienen la agenda (en su propia hoja) y la tienda (en la suya); el
   taller lo pide a este fichero en vez de copiar las reglas por tercera vez.

   ⚠️ POR QUÉ UN FICHERO SOLO Y NO UNA COPIA EN CADA MOTOR: tres copias de la misma verdad
   son dos copias que se quedan atrás. La forma —posición, tamaño, la transición, cómo se
   oscurece lo de detrás— es de la casa y se cambia aquí una vez. El VERDE (o el rojo, o el
   color que sea) es de cada negocio y se cambia con las variables de abajo, que cada motor
   puede redefinir en su hoja sin tocar este fichero.

   Lo que espera del lado que lo usa (lo pinta la plantilla de cada motor):
     .hamburguesa   el botón de abrir        .velo   la cortina de detrás
     .cajon         el cajón                .cajon-cab / .cajon-nav / .cajon-pie
     .cajon-grupo   un título de grupo       .cajon-enlace (.on si es la pantalla actual)
     .cajon-enlace.apagado  un módulo que el negocio no tiene: se ve, no se pulsa.
   Y `menu(true|false)` cambia `body.menu-abierto`, que es quien abre y cierra el cajón. */

:root {
    --cajon-fondo: #fff;
    --cajon-tinta: #16181d;
    --cajon-gris: #5d6470;
    --cajon-linea: #d8dbe0;
    --cajon-acento: #b31217;
    --cajon-acento-suave: #fbe9ea;
}

.hamburguesa {
    width: 40px; height: 40px; flex: 0 0 auto; padding: 0; cursor: pointer;
    border: 1px solid var(--cajon-linea); border-radius: 10px;
    background: var(--cajon-fondo);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.hamburguesa:hover { background: #f1f5f9; }
.hamburguesa span {
    display: block; width: 17px; height: 2px; border-radius: 2px;
    background: var(--cajon-tinta);
}

.velo {
    position: fixed; inset: 0; background: rgba(15, 23, 42, .42); z-index: 90;
    opacity: 0; visibility: hidden; transition: opacity .18s;
}
.cajon {
    position: fixed; top: 0; left: 0; bottom: 0; width: 308px; max-width: 88vw; z-index: 100;
    background: var(--cajon-fondo); border-right: 1px solid var(--cajon-linea);
    display: flex; flex-direction: column; overflow-y: auto;
    transform: translateX(-102%); transition: transform .22s ease;
    box-shadow: 0 10px 40px rgba(15, 23, 42, .18);
    color: var(--cajon-tinta);
}
body.menu-abierto .velo { opacity: 1; visibility: visible; }
body.menu-abierto .cajon { transform: none; }
body.menu-abierto { overflow: hidden; }

.cajon-cab {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px;
    border-bottom: 1px solid var(--cajon-linea);
}
.cajon-cab .logo {
    width: 38px; height: 38px; border-radius: 12px; display: flex;
    align-items: center; justify-content: center; font-size: 19px;
    background: var(--cajon-acento); color: #fff;
}
.cajon-cab .logo img { width: auto; height: 100%; max-width: none; object-fit: contain; }
.cajon-tit { flex: 1; font-weight: 700; line-height: 1.25; }
.cajon-tit small {
    display: block; font-weight: 500; font-size: 11.5px; color: var(--cajon-gris);
    text-transform: uppercase; letter-spacing: .06em;
}
.cajon-x {
    border: none; background: none; padding: 6px; font-size: 17px;
    color: var(--cajon-gris); cursor: pointer;
}
.cajon-x:hover { color: var(--cajon-tinta); }

.cajon-nav { flex: 1; padding: 12px 10px; }
.cajon-grupo {
    padding: 14px 12px 6px; font-size: 11.5px; font-weight: 700; color: var(--cajon-gris);
    text-transform: uppercase; letter-spacing: .06em;
}
.cajon-nav .cajon-grupo:first-child { padding-top: 2px; }
.cajon-enlace {
    display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px;
    border-radius: 11px; text-decoration: none; color: var(--cajon-tinta);
    font-weight: 600; font-size: 14.5px;
}
.cajon-enlace i {
    flex: 0 0 auto; width: 22px; text-align: center; font-style: normal;
    font-size: 17px; line-height: 1.3;
}
.cajon-enlace small {
    display: block; margin-top: 1px; font-weight: 500; font-size: 12.5px;
    color: var(--cajon-gris);
}
.cajon-enlace:hover { background: #f1f5f9; }
.cajon-enlace.on { background: var(--cajon-acento-suave); color: var(--cajon-acento); }
.cajon-enlace.on small { color: var(--cajon-acento); opacity: .85; }
/* APAGADO: se ve para que el negocio sepa que existe y que se puede encender, pero no
   se pulsa. Un enlace que lleva a «todavía no» es una promesa que la web no cumple. */
.cajon-enlace.apagado { color: var(--cajon-gris); cursor: default; }
.cajon-enlace.apagado:hover { background: none; }
.cajon-enlace.apagado i { opacity: .45; }
.cajon-enlace.apagado small { color: #9aa1ab; }

.cajon-pie { border-top: 1px solid var(--cajon-linea); padding: 10px; }
.cajon-pie form { margin: 0; }
.cajon-salir {
    width: 100%; border: none; background: none; font: inherit; text-align: left;
    cursor: pointer;
}
.cajon-nota { margin: 0; padding: 6px 12px 4px; font-size: 12px; color: #9aa1ab; }