/* ══════════════════════════════════════════════════════════════════════════════════════════════ ADMINISTRADOR DEL MENÚ DE RESTAURANTE (2026-10-07) Solo lo propio de esta pantalla. Lo reutilizable vive en `personalizados.css` y los colores salen de los tokens del tema (`--ins-*`), no de hexadecimales escritos a mano: así el modo oscuro los sigue sin una sola regla extra. ══════════════════════════════════════════════════════════════════════════════════════════════ */ .mn-buscar { max-width: 520px; } .mn-grupo { margin-bottom: 0; } /* ⚠ La cabecera usa `card-header` del tema —para que cada pregunta se lea como una ficha con su título— y esa clase trae `flex-wrap: wrap !important`. Acá eso viene bien: en pantalla angosta los botones bajan solos a su propia línea. */ .mn-grupo-cab { display: flex; align-items: flex-start; gap: .75rem; } /* El rótulo del bloque de opciones. Con dos columnas la tarjeta es más angosta y la lista necesita decir qué es; la cuenta se mudo acá desde el subtítulo, donde competía con la regla de la pregunta y con los platos. */ .mn-rotulo { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem .35rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ins-secondary-color); } /* La flecha que dice si la ficha está abierta. Gira, no se cambia por otro ícono: el giro deja ver que es el mismo control y de dónde viene. */ .mn-flecha { flex: 0 0 auto; color: var(--ins-secondary-color); transition: transform .15s ease-in-out; } .mn-abierto .mn-flecha { transform: rotate(90deg); } /* La cabecera entera despliega, así que tiene que verse tocable —pero el cursor de mano solo en ella, no en los botones que lleva adentro, que ya traen el suyo. */ .mn-grupo-cab { cursor: pointer; } .mn-grupo-cab .mn-asa { cursor: grab; } .mn-grupo-cab:focus-visible { outline: 2px solid var(--ins-primary); outline-offset: -2px; } .mn-grupo-titulo { flex: 1 1 auto; min-width: 0; } /* ⚠ `min-width: 0` en los contenedores elásticos: sin esto un nombre largo se niega a encogerse por debajo de su contenido y empuja los botones fuera de la tarjeta en vez de recortarse. ⚠ Y `margin-left: auto` no es para alinear a la derecha cuando van en línea —eso ya lo hace el título elástico— sino para cuando la cabecera ENVUELVE: con dos columnas la tarjeta mide 643 px medidos y el título largo manda los botones a su propia línea, donde sin esto quedan pegados a la izquierda, debajo del texto, como si fueran parte de él. */ .mn-grupo-acciones { display: flex; gap: .35rem; flex: 0 0 auto; margin-left: auto; } /* El asa. Es lo único que arrastra: la tarjeta lleva botones adentro y una lista que también se arrastra, así que tomar la tarjeta entera haría imposible tocar nada sin moverla. */ .mn-asa { cursor: grab; color: var(--ins-secondary-color); padding: .15rem .1rem; flex: 0 0 auto; line-height: 1; } .mn-asa:active { cursor: grabbing; } /* La lista de opciones dentro de la tarjeta. */ .mn-opciones { display: flex; flex-direction: column; border-top: var(--ins-border-width) solid var(--ins-border-color); } .mn-opcion { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem 1rem; border-bottom: var(--ins-border-width) solid var(--ins-border-color); } .mn-opcion:last-child { border-bottom: 0; } .mn-op-nombre { font-weight: 500; } /* Las acciones de la opción se van al extremo y no se encogen. */ .mn-op-acciones { margin-left: auto; display: flex; gap: .25rem; flex: 0 0 auto; } .mn-grupo-pie { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: .6rem 1rem; border-top: var(--ins-border-width) solid var(--ins-border-color); } /* Apagado: se ve, pero se ve apagado. No se esconde —el dueño tiene que poder volver a encenderlo— y el texto no baja de un contraste legible. */ .mn-apagado { opacity: .62; } /* El hueco que deja lo que se está arrastrando. */ .mn-fantasma { opacity: .4; background-color: var(--ins-tertiary-bg); } /* ── La modal de platos ───────────────────────────────────────────────────────────────────── Con 125 platos la lista plana es ilegible, así que va agrupada por categoría con el rótulo pegajoso: al desplazarse se sigue sabiendo en qué categoría se está marcando. */ .mp-buscar { min-width: 240px; } /* ⚠ La lista NO lleva scroll propio. Lo tuvo hasta el 2026-10-07 (`max-height: 52vh; overflow-y: auto`) y el resultado eran DOS barras de desplazamiento verticales, una pegada a la otra: la del cuerpo de la modal —que `modal-dialog-scrollable` ya pone— y la de la lista. Lo reportó Mario. Con una sola caja que se desplaza, la que manda es la de Bootstrap, que es además la que reparte el alto entre cabecera, cuerpo y pie. */ .mp-controles { position: sticky; top: 0; z-index: 2; /* El fondo es obligatorio: sin él la lista se ve pasar por debajo del buscador. `--ins-modal-bg` resuelve a esto mismo, pero esta variable sí es global. */ background-color: var(--ins-secondary-bg); /* ⚠ Los márgenes laterales negativos estiran el fondo hasta los bordes del cuerpo: si no, queda una franja de 24 px a cada lado por la que se ve pasar la lista. */ margin-inline: -24px; padding-inline: 24px; } /* ⚠ Y esta franja de arriba es el remate, por una razon de la especificacion que no se adivina: un elemento `sticky` **no puede salir de su bloque contenedor**, así que por más `top: 0` que lleve se queda en el borde del área de CONTENIDO del `modal-body` —medido: 144 px—, 24 px por debajo del borde donde empieza a desplazarse —120—. Esos 24 px son el relleno del cuerpo, y la lista se desplaza por ahí: se ve media fila de plato flotando encima del buscador. Lo reportó Mario. Mover el bloque con un margen negativo NO sirve —la restricción lo devuelve—, así que lo que tapa la franja es un pedazo de fondo dibujado hacia arriba. */ .mp-controles::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; background-color: inherit; } .mp-controles { position: sticky; } /* reafirmado: el ::before se posiciona contra este bloque */ /* ⚠ El rótulo de la categoría dejó de ser pegajoso junto con el cambio de arriba. Con los controles ya fijos arriba, dos capas pegajosas en la misma caja se pisan —la categoría se pegaría DEBAJO del buscador— y evitarlo pide un `top` igual al alto de los controles, que cambia cuando los botones se envuelven en el teléfono. Un número medido a mano que envejece mal a cambio de muy poco. */ .mp-categoria { background-color: var(--ins-secondary-bg); color: var(--ins-secondary-color); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: .4rem .25rem; border-bottom: var(--ins-border-width) solid var(--ins-border-color); } .mp-plato { display: flex; align-items: center; gap: .6rem; padding: .45rem .25rem; cursor: pointer; border-bottom: var(--ins-border-width) solid var(--ins-border-color); } .mp-plato:last-child { border-bottom: 0; } .mp-plato-nombre { flex: 1 1 auto; min-width: 0; } /* ── Teléfono ─────────────────────────────────────────────────────────────────────────────── La cabecera de la tarjeta se apila y los botones pasan a dos por fila, que es la convención del proyecto (`.acciones-cabecera` ya lo hace por debajo de 768 px). */ @media (max-width: 767.98px) { .mn-grupo-cab { flex-wrap: wrap; } /* ⚠ `flex-wrap` y `gap: .5rem` son lo que hace que `.acciones-cabecera` funcione: esa clase le da a cada botón `flex: 0 0 calc(50% - .5rem)` contando con una separación de medio rem, y sin permitir el salto de línea los TRES botones se quedan en una fila que no cabe. Medido a 390 px antes del arreglo: 82 px de desborde horizontal en la página entera. */ .mn-grupo-acciones { width: 100%; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; } } /* El ícono de aviso al lado del título. Es un `