/* El panel de DIM DOM en el celular: un pase de cocina. Diseño de Ani, 6 de octubre de 2026. * * Este archivo se carga SOLO bajo /admin, con el mismo `assetUrl` que admin.css, y TODAS sus * reglas viven dentro de `@media (max-width:760px)`: por encima de ese ancho no existe, así que el * panel de computador es exactamente el de siempre, hasta el píxel. * * Lo que hace, en orden: apaga el armazón de escritorio (cajón, barra superior, cabecera de * página y barra de publicación), enciende el armazón del celular (cabecera, barra inferior con el * «+», barra de borrador), convierte los modales en hojas que suben desde abajo, sube todo lo * tocable a 44 px y arregla las ocho cosas que el inventario midió rotas en 390 px. * * El rojo es escaso a propósito: si algo es rojo, pide acción. */ @media (max-width:760px){ /* ---- tokens propios del celular ---------------------------------------------------------- */ /* admin.css no tiene fichas para la tarjeta ni para la fila activa; se definen aquí para no * tocar el juego de tokens del escritorio. * `--admovil-sobre-tinta` es el color que se lee encima de `--adm-ink`: en el celular lo elegido * se rellena con la tinta del panel (decisión de Ani, hallazgo B-4) y la tinta cambia de claro a * oscuro con el tema, así que el texto de encima tiene que cambiar con ella. */ .adm-shell[data-movil=true]{ --admovil-card:#fff;--admovil-active:#fce8ed;--admovil-primary:#bd1830;--admovil-sobre-tinta:#fff; --admovil-barra:64px;--admovil-cabecera:56px;--admovil-borrador:52px; --admovil-seguro:env(safe-area-inset-bottom,0px); --admovil-radio-hoja:20px;--admovil-radio-comanda:14px;--admovil-radio-control:12px; --admovil-sombra:0 -1px 0 var(--adm-line),0 -8px 24px #251c1c12; } [data-admin-theme=dark] .adm-shell[data-movil=true],[data-admin-theme=dark] .adm-hoja,[data-admin-theme=dark] .adm-modal,[data-admin-theme=dark] .adm-confirm{ --admovil-card:#222124;--admovil-active:#49282f;--admovil-primary:#bd1830;--admovil-sobre-tinta:#171719; --admovil-sombra:0 -1px 0 var(--adm-line),0 -8px 24px #0008; } .adm-hoja,.adm-modal,.adm-confirm{ --admovil-card:#fff;--admovil-active:#fce8ed;--admovil-primary:#bd1830;--admovil-sobre-tinta:#fff; --admovil-radio-hoja:20px;--admovil-radio-control:12px; --admovil-cabecera:56px;--admovil-seguro:env(safe-area-inset-bottom,0px); } /* ---- se apaga el armazón de escritorio --------------------------------------------------- */ /* El cajón lateral no se usa en el celular: «Más» lo reemplaza y es el mapa completo. Con él se * van su velo y «Compactar menú», que en un teléfono no servía de nada y ocupaba una línea. */ .adm-shell[data-movil=true] .adm-sidebar, .adm-shell[data-movil=true] .adm-nav-scrim, .adm-shell[data-movil=true] .adm-topbar, .adm-shell[data-movil=true] .adm-savebar{display:none!important} .adm-shell[data-movil=true] .adm-work{margin-left:0} /* La cabecera de página pierde cejilla, título y bajada —todo eso lo dice ya la cabecera móvil— * pero conserva sus botones de acción, que son funciones (Mensajes y pagos, Nuevo producto). */ .adm-shell[data-movil=true] .adm-page-head{margin:0 0 12px;gap:8px;align-items:stretch} .adm-shell[data-movil=true] .adm-page-head>div:first-child{display:none} .adm-shell[data-movil=true] .adm-page-head:not(:has(>:nth-child(2))){display:none} .adm-shell[data-movil=true] .adm-page-head>*{flex:1 1 auto;min-width:0} .adm-shell[data-movil=true] .adm-page-head .adm-button{width:100%;min-height:44px} .adm-shell[data-movil=true] .adm-main{padding:12px 16px calc(var(--admovil-barra) + var(--admovil-seguro) + 24px);max-width:none} .adm-shell[data-movil=true] .adm-work.has-publish-draft .adm-main{padding-bottom:calc(var(--admovil-barra) + var(--admovil-borrador) + var(--admovil-seguro) + 24px)} /* ---- tipografía (tabla 2.2 del diseño) -------------------------------------------------- */ .adm-shell[data-movil=true] h2{font-size:18px;line-height:1.25;margin:0 0 10px} .adm-shell[data-movil=true] h3{font-size:16px;line-height:1.3} .adm-shell[data-movil=true],.adm-hoja{font-size:15px;line-height:22px} .adm-shell[data-movil=true] p,.adm-hoja p{font-size:15px;line-height:22px} .adm-shell[data-movil=true] small,.adm-shell[data-movil=true] .adm-hint,.adm-hoja small,.adm-hoja .adm-hint{font-size:13px;line-height:18px} /* Las cifras en columna: números tabulares para que los precios se alineen. */ .adm-shell[data-movil=true] :is(.adm-stat strong,.adm-price,.today-tile>strong,.insight-stat strong,.order-quick-total strong,.admovil-cifra){font-variant-numeric:tabular-nums} .adm-shell[data-movil=true] .adm-eyebrow{display:none} /* ---- cabecera de sección (56 px) -------------------------------------------------------- */ .admovil-cabecera{position:sticky;top:0;z-index:36;background:color-mix(in srgb,var(--adm-bg) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--adm-line);margin:0} .admovil-cabecera-fila{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--admovil-cabecera);padding:0 16px} .admovil-cabecera h1{font-family:'Outfit',sans-serif;font-size:20px;line-height:24px;font-weight:600;margin:0;letter-spacing:-.02em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .admovil-cabecera-acciones{display:flex;align-items:center;gap:4px;flex:none} /* El indicador de borrador: hoy se oculta justo en el celular, que es donde más falta hace. */ .admovil-borrador-punto{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--adm-red);white-space:nowrap} .admovil-borrador-punto>span{width:7px;height:7px;border-radius:50%;background:var(--adm-red)} .admovil-icono{width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:var(--adm-ink);border-radius:var(--admovil-radio-control);flex:none} .admovil-cabecera-buscador{display:flex;align-items:center;gap:8px;padding:0 16px 10px;color:var(--adm-muted)} .admovil-cabecera-buscador input{flex:1;min-width:0;font-size:16px;min-height:44px;border-radius:var(--admovil-radio-control)} /* ---- barra inferior (64 px + área segura) ----------------------------------------------- */ .admovil-barra{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:stretch;justify-content:space-around;gap:2px; height:calc(var(--admovil-barra) + var(--admovil-seguro));padding:0 4px var(--admovil-seguro); background:color-mix(in srgb,var(--admovil-card) 96%,transparent);backdrop-filter:blur(14px);box-shadow:var(--admovil-sombra)} html[data-admovil-teclado=true] .admovil-barra,html[data-admovil-teclado=true] .admovil-borrador{display:none} .admovil-pestana{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; border:0;background:none;color:var(--adm-muted);padding:6px 2px;min-height:var(--admovil-barra);border-radius:var(--admovil-radio-control)} .admovil-pestana-icono{position:relative;display:grid;place-items:center;width:46px;height:28px;border-radius:999px} .admovil-pestana.activa{color:var(--adm-ink)} .admovil-pestana.activa .admovil-pestana-icono{background:var(--admovil-active)} .admovil-pestana.activa svg{stroke-width:2.4} .admovil-pestana-texto{font-size:12px;line-height:14px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Insignias: lo pendiente de HOY, el mismo dato que «En tu radar». En 0 no se muestran. */ .admovil-insignia{position:absolute;top:-3px;right:2px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center; background:var(--admovil-primary);color:#fff;border-radius:999px;font-size:11px;font-style:normal;font-weight:700;font-variant-numeric:tabular-nums} /* El botón «+»: lo único memorable. Rojo, redondo, sobresale como el timbre del pase. */ .admovil-crear{flex:none;width:56px;height:56px;align-self:center;margin-top:-20px;display:grid;place-items:center; border:3px solid var(--admovil-card);border-radius:50%;background:var(--admovil-primary);color:#fff;box-shadow:0 6px 18px #bd183055;transition:transform .22s ease-out} .admovil-crear.abierta{transform:rotate(135deg)} /* ---- barra de borrador (52 px, encima de la barra inferior) ----------------------------- */ /* Solo del contenido (borrador → publicar). La operación guarda al instante y avisa con * «Guardado»: los dos modelos de guardado no se mezclan nunca. */ .admovil-borrador{position:fixed;left:0;right:0;bottom:calc(var(--admovil-barra) + var(--admovil-seguro));z-index:39; display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--admovil-borrador);padding:6px 12px; background:var(--admovil-card);border-top:1px solid var(--adm-line);box-shadow:var(--admovil-sombra)} .admovil-borrador>strong{font-size:13px;line-height:17px;min-width:0;overflow:hidden;text-overflow:ellipsis} .admovil-borrador>div{display:flex;align-items:center;gap:8px;flex:none} .admovil-borrador-descartar{border:0;background:none;color:var(--adm-muted);font-size:13px;font-weight:600;min-height:40px;padding:0 8px;border-radius:var(--admovil-radio-control)} .admovil-borrador-publicar{min-height:40px!important;padding:0 14px!important} /* La barra de borrador mide 52 px y con sus 6 px de relleno arriba y abajo a los dos botones les * quedan 40: el dibujo cabe, pero el objetivo táctil se queda corto. Como la altura de la barra * es parte del diseño, la zona sensible se estira 2 px por arriba y 2 por abajo con un `::after` * transparente —el mismo recurso de la píldora del reproductor en la web pública—: 40 + 4 = 44 sin * agrandar nada de lo que se ve ni mover la barra. La medición de la entrega del panel móvil no * lo vio porque sus 18 pantallas no tenían borrador pendiente y la barra no se dibujaba. */ .admovil-borrador-descartar,.admovil-borrador-publicar{position:relative} .admovil-borrador-descartar::after,.admovil-borrador-publicar::after{ content:'';position:absolute;left:0;right:0;top:-2px;bottom:-2px;border-radius:inherit} /* ---- aviso «Guardado» ------------------------------------------------------------------- */ /* Por encima de la hoja (101): el guardado inmediato del detalle de un pedido ocurre dentro de * una hoja, y el aviso tiene que verse. No intercepta toques: `pointer-events:none`. */ .admovil-aviso{position:fixed;left:0;right:0;bottom:calc(var(--admovil-barra) + var(--admovil-seguro) + 12px);z-index:102; display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .18s ease-out} .admovil-aviso[data-visible=true]{opacity:1} .admovil-aviso span{display:inline-flex;align-items:center;gap:7px;background:var(--adm-ink);color:var(--adm-bg); padding:9px 15px;border-radius:999px;font-size:14px;font-weight:600;box-shadow:0 6px 18px #251c1c33} /* ---- la hoja: reemplaza a los 20 modales ------------------------------------------------ */ /* Radix centra su contenido con `top/left:50%` y una traslación; aquí se ancla abajo. Los * `!important` son contra esas utilidades, no contra admin.css. */ .adm-hoja{ /* La hoja va justo encima del velo (100) y de la cabecera pegajosa (36), igual que .adm-modal * en admin.css. Sin esto el velo y la cabecera de la sección se pintan sobre la hoja. */ z-index:101!important; position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important; transform:none!important;width:100vw!important;max-width:100vw!important; display:flex!important;flex-direction:column;gap:0!important;padding:0!important;overflow:hidden!important; border:0!important;border-top:1px solid var(--adm-line); border-radius:var(--admovil-radio-hoja) var(--admovil-radio-hoja) 0 0!important; background:var(--admovil-card);box-shadow:0 -10px 30px #251c1c2e; max-height:calc(var(--admin-viewport-height,100dvh) - env(safe-area-inset-top,0px))!important} .adm-hoja[data-hoja-alto=completa]{height:calc(var(--admin-viewport-height,100dvh) - env(safe-area-inset-top,0px))} .adm-hoja[data-hoja-alto=media]{max-height:min(60dvh,calc(var(--admin-viewport-height,100dvh) - 80px))!important} /* Un nivel tapado (Espacios cuando se abre un espacio) no se ve: no hay dos velos superpuestos. */ .adm-hoja[data-hoja-activa=false]{visibility:hidden;pointer-events:none} .adm-hoja-asa{display:none;padding:8px 0 2px;place-items:center;touch-action:none;cursor:grab} .adm-hoja[data-hoja-alto=media] .adm-hoja-asa{display:grid} .adm-hoja-asa>span{width:40px;height:4px;border-radius:999px;background:var(--adm-line)} .adm-hoja-cabecera{flex:none;display:grid;grid-template-columns:minmax(72px,auto) minmax(0,1fr) minmax(72px,auto);align-items:center;gap:8px; min-height:var(--admovil-cabecera);padding:0 10px;border-bottom:1px solid var(--adm-line)} .adm-hoja-volver{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--adm-ink); font-size:14px;font-weight:600;min-height:44px;padding:0 6px;border-radius:var(--admovil-radio-control);justify-self:start} .adm-hoja-titulo{font-family:'Outfit',sans-serif!important;font-size:17px!important;line-height:22px!important;font-weight:600!important; margin:0!important;text-align:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline-offset:4px} .adm-hoja-accion{display:flex;align-items:center;justify-content:flex-end;gap:6px;justify-self:end;min-width:0} .adm-hoja-accion .adm-button{min-height:40px!important;padding:0 10px!important} .adm-hoja-bajada{flex:none;margin:0!important;padding:10px 16px 0;font-size:13px!important;line-height:18px!important;color:var(--adm-muted)!important} /* Un solo scroll: el de la hoja. El fondo de la página no se desplaza. */ .adm-hoja-cuerpo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px 16px 20px} .adm-hoja[data-hoja-alto=media] .adm-hoja-cuerpo{padding-top:10px} .adm-hoja-pie{flex:none;display:flex;gap:8px;padding:10px 16px calc(10px + var(--admovil-seguro));border-top:1px solid var(--adm-line);background:var(--admovil-card)} .adm-hoja-pie>*{flex:1 1 0;min-width:0;min-height:48px} .adm-hoja-pie .adm-button{min-height:48px!important;width:100%} /* El editor de producto: las pestañas quedan fijas bajo la cabecera de la hoja y el pie es uno * solo —«Cancelar» y «Aplicar al borrador»—, el mismo formulario de siempre. */ .admovil-editor-producto .admovil-selector{position:sticky;top:0;z-index:2;background:var(--admovil-card); padding-top:10px;margin-bottom:10px} .admovil-ingles>summary{min-height:44px;display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600; border-top:1px solid var(--adm-line);margin-top:4px} .admovil-acciones-producto{display:grid;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--adm-line)} .admovil-acciones-producto .adm-button{width:100%;justify-content:center} /* Dentro de la hoja los formularios van a una columna y los campos a 16 px. */ .adm-hoja :is(input,select,textarea){font-size:16px!important} .adm-hoja :is(.adm-fields.two,.adm-fields.three,.adm-fields){grid-template-columns:1fr!important} .adm-hoja .adm-field{margin-bottom:14px} /* Y llevan el mismo vestido que los campos del resto del panel. `admin.css` los viste colgando * de `.adm-shell`, `.adm-modal`, `.adm-confirm` o `.admin-login`, y la hoja es un portal de Radix * colgado de : ninguna de esas reglas la alcanza. Sin esto los campos salen con el dibujo * del navegador —relleno de 1px 2px, borde `inset` gris, `select` nativo y `textarea` en * monospace—, que es justo lo que se midió roto. Los valores son los de admin.css §campos, con * sus mismas fichas, para que día y noche coincidan sin dos verdades que mantener. Vive aquí, y * no en admin.css, porque admin.css es el panel de computador y no se toca ni un píxel. * Las casillas y los radios quedan fuera: su tamaño y su área los fija la sección de 44 px. Los * `input[type=file]` también: van escondidos en 1 × 1 px dentro de `.adm-image-field`. */ .adm-hoja :is(input,select,textarea){font:inherit} .adm-hoja :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=file]){ color:var(--adm-ink);background:var(--adm-field);border:1px solid var(--adm-line); padding:10px 12px;line-height:1.5;max-width:100%;min-width:0;box-shadow:0 1px 2px #00000002; accent-color:var(--adm-primary)} .adm-hoja :is(input,textarea)::placeholder{color:var(--adm-placeholder);opacity:1} .adm-hoja :is(input,select,textarea):disabled{opacity:1;color:var(--adm-muted);background:var(--adm-soft)} .adm-hoja :is(input,select,textarea):focus{outline:2px solid #d91a3160;outline-offset:2px;border-color:var(--adm-red)} /* El modo noche del panel: `admin.css` lo escribe con estos tres valores y no con las fichas, así * que aquí se repiten tal cual para que el campo de la hoja sea el mismo campo. */ [data-admin-theme=dark] .adm-hoja :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=file]){ background:#1b1a1d;border-color:#51454d;color:#f4eef0} /* Las presentaciones y precios del producto venían en cuatro columnas: dentro de la hoja eso * dejaba campos de 34 px. Aquí van de dos en dos y el botón de quitar baja a su propia línea. */ /* El editor de producto no pasa por AdminModal: Radix lo saca del árbol con un portal, así que * aquí hace falta nombrar también `.adm-modal`, que es donde vive esa hoja. */ .adm-shell[data-movil=true] .adm-variant,.adm-hoja .adm-variant,.adm-modal .adm-variant{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px;align-items:end} .adm-shell[data-movil=true] .adm-variant .adm-field,.adm-hoja .adm-variant .adm-field,.adm-modal .adm-variant .adm-field{width:auto!important;min-width:0;margin-bottom:0} .adm-shell[data-movil=true] .adm-variant>.adm-icon,.adm-hoja .adm-variant>.adm-icon,.adm-modal .adm-variant>.adm-icon{grid-column:1/-1;justify-self:end} .adm-hoja .adm-modal-footer{border:0;padding:0;margin-top:4px;flex-wrap:wrap} .adm-hoja .adm-modal-footer>.adm-button{flex:1 1 140px;min-height:48px!important} /* El pie pegajoso del editor de usuarios cuelga 24 px por debajo del borde en escritorio; dentro * de la hoja eso corta los botones. Aquí se apoya en el borde y respeta el área segura. */ .adm-hoja .account-editor-actions{bottom:0;padding-bottom:calc(12px + var(--admovil-seguro))} /* Las hojas suben en 220 ms y bajan en 180 ms. */ .adm-hoja[data-state=open]{animation:admovil-subir .22s cubic-bezier(.22,.9,.3,1)} .adm-hoja[data-state=closed]{animation:admovil-bajar .18s ease-in} @keyframes admovil-subir{from{transform:translateY(100%)!important}to{transform:translateY(0)!important}} @keyframes admovil-bajar{from{transform:translateY(0)!important}to{transform:translateY(100%)!important}} /* La hoja «+» y la de pestañas: rejillas y listas con 44 px de alto garantizados. */ .admovil-rejilla-crear{display:grid;grid-template-columns:1fr 1fr;gap:10px} .admovil-tarjeta-crear{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;min-height:88px; padding:14px;border:1px solid var(--adm-line);border-radius:var(--admovil-radio-comanda);background:var(--admovil-card);color:var(--adm-ink);text-align:left} .admovil-tarjeta-crear svg{color:var(--admovil-primary)} .admovil-tarjeta-crear span{font-size:15px;font-weight:600;line-height:19px} .admovil-lista-pestanas{list-style:none;margin:0;padding:0;display:grid;gap:2px} .admovil-lista-pestanas button{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:0 12px;border:0;background:none; color:var(--adm-ink);font-size:15px;font-weight:500;text-align:left;border-radius:var(--admovil-radio-control)} .admovil-lista-pestanas button.activa{background:var(--admovil-active);font-weight:700} .admovil-lista-pestanas span{flex:1;min-width:0} .admovil-lista-pestanas em{font-style:normal;font-size:12px;font-weight:700;background:var(--adm-line);border-radius:999px;padding:1px 7px} /* ---- hoja «Más»: el mapa completo del panel -------------------------------------------- */ .admovil-cuenta{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--adm-line);border-radius:var(--admovil-radio-comanda);margin-bottom:18px} .admovil-avatar{width:40px;height:40px;flex:none;display:grid;place-items:center;background:#fff0f2;color:var(--admovil-primary);border-radius:10px;font-family:'Outfit';font-weight:700} [data-admin-theme=dark] .admovil-avatar{background:#49282f;color:#ff99a6} .admovil-cuenta>div{flex:1;min-width:0} .admovil-cuenta strong{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .admovil-cuenta small{font-size:13px;color:var(--adm-muted)} .admovil-cuenta .adm-theme-control{flex:none;min-width:44px;min-height:44px} .admovil-grupo{margin-bottom:16px} .admovil-grupo>h2{font-size:13px!important;line-height:18px;font-weight:600;color:var(--adm-muted);margin:0 0 4px;padding:0 2px;letter-spacing:0;text-transform:none} .admovil-grupo>ul{list-style:none;margin:0;padding:0} .admovil-grupo>ul>li+li{border-top:1px solid var(--adm-line)} .admovil-fila-seccion{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 6px;border:0;background:none; color:var(--adm-ink);font-size:15px;font-weight:500;text-align:left;border-radius:var(--admovil-radio-control)} .admovil-fila-seccion.activa{background:var(--admovil-active);font-weight:700} .admovil-fila-seccion svg{flex:none;color:var(--adm-muted)} .admovil-fila-seccion.activa svg{color:var(--admovil-primary)} .admovil-fila-seccion>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .admovil-contador{font-style:normal;font-size:12px;font-weight:700;background:var(--admovil-primary);color:#fff;border-radius:999px;padding:1px 7px;font-variant-numeric:tabular-nums} .admovil-mas-pie{margin-top:8px;padding-top:12px;border-top:1px solid var(--adm-line)} /* ---- selector de pestañas -------------------------------------------------------------- */ /* Hasta 4: segmentado a todo el ancho. 5 o más: chip + media hoja, para que ninguna quede fuera * de pantalla («Mensajes y pagos» de Reservas se salía entera del borde, y 6 de las 9 de Página * solo se alcanzaban arrastrando de lado). También pasa al chip cuando alguna etiqueta no cabe * entera en el ancho que le toca: ninguna se parte en dos líneas ni se recorta. */ .admovil-selector{position:relative;width:100%;margin-bottom:12px} /* La copia que se mide: ocupa el mismo ancho y no se ve ni se oye. */ .admovil-medidor{position:absolute;top:0;left:0;right:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none} .admovil-segmentado{display:flex;gap:4px;padding:3px;background:color-mix(in srgb,var(--adm-line) 45%,transparent);border-radius:var(--admovil-radio-control)} .admovil-segmentado button,.admovil-segmentado .admovil-medida{flex:1 1 0;min-width:0;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:5px; border:0;background:none;color:var(--adm-muted);font-size:14px;font-weight:600;border-radius:9px;padding:4px 6px;overflow:hidden} /* Una sola línea con la etiqueta completa. Si no cupiera, el selector ya habría pasado al chip; * la elipsis es solo el último seguro. `text-overflow` no actúa sobre el texto suelto de un * contenedor flex, por eso va en su span. */ .admovil-segmentado button>span,.admovil-segmentado .admovil-medida-texto{min-width:0;font-size:13px;line-height:17px;text-align:center; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .admovil-segmentado button.activa{background:var(--admovil-card);color:var(--adm-ink);box-shadow:0 1px 3px #251c1c1f} .admovil-segmentado em{font-style:normal;font-size:11px;font-weight:700} .admovil-chip-pestanas{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 12px; border:1px solid var(--adm-line);border-radius:var(--admovil-radio-control);background:var(--admovil-card);color:var(--adm-ink);font-size:15px;font-weight:600;text-align:left} .admovil-chip-pestanas>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .admovil-chip-pestanas>small{font-size:12px;color:var(--adm-muted);font-variant-numeric:tabular-nums;flex:none} /* ---- filtros: un botón y chips de lo activo -------------------------------------------- */ .admovil-filtros{margin-bottom:12px} .admovil-filtros-fila{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .admovil-boton-filtros{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;flex:none; border:1px solid var(--adm-line);border-radius:999px;background:var(--admovil-card);color:var(--adm-ink);font-size:14px;font-weight:600} .admovil-boton-filtros em{font-style:normal;min-width:20px;height:20px;display:grid;place-items:center;background:var(--admovil-primary);color:#fff;border-radius:999px;font-size:11px;font-weight:700} .admovil-chips-activos{list-style:none;display:flex;gap:6px;margin:0;padding:0;flex-wrap:wrap;min-width:0} .admovil-chips-activos :is(button,span){display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 12px; border:1px solid var(--adm-line);border-radius:999px;background:var(--admovil-active);color:var(--adm-ink);font-size:13px;font-weight:600} .admovil-chips-activos button{padding-right:7px} .admovil-filtros-cuerpo{display:grid;gap:12px} .admovil-filtros-cuerpo :is(select,input){width:100%;min-height:44px} .admovil-filtros-descargas{margin-top:16px;padding-top:14px;border-top:1px solid var(--adm-line);display:grid;gap:8px} .admovil-filtros-descargas h3{font-size:14px;margin:0 0 4px} .admovil-filtros-descargas :is(a,button){width:100%;min-height:44px} /* Los atajos de periodo son chips visibles siempre: no entran en «Filtros». */ .admovil-atajos{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px;margin-bottom:10px;scrollbar-width:none} .admovil-atajos::-webkit-scrollbar{display:none} .admovil-atajos>*{flex:none;min-height:44px!important;border-radius:999px!important} /* ---- comanda: la tarjeta de lista ------------------------------------------------------ */ .admovil-comandas{display:grid;gap:8px;list-style:none;margin:0;padding:0} .admovil-comanda{background:var(--admovil-card);border:1px solid var(--adm-line);border-radius:var(--admovil-radio-comanda);padding:12px;display:grid;gap:5px} .admovil-comanda-alto{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .admovil-estado{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--adm-muted)} /* Cada estado se reconoce por forma + texto, nunca solo por color. */ .admovil-estado>i{width:9px;height:9px;border-radius:50%;flex:none;border:1.5px solid currentColor} .admovil-estado[data-estado=pendiente]{color:var(--admovil-primary)} .admovil-estado[data-estado=pendiente]>i{background:currentColor} .admovil-estado[data-estado=curso]>i{background:none} .admovil-estado[data-estado=listo]>i{border-radius:0;border:0;width:auto;height:auto} .admovil-estado[data-estado=cancelado]{text-decoration:line-through} .admovil-cifra{font-family:'Outfit',sans-serif;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;flex:none} .admovil-comanda>h3,.admovil-comanda-titulo{font-family:'DM Sans',sans-serif;font-size:16px;line-height:22px;font-weight:600;margin:0} .admovil-comanda-meta{font-size:13px;line-height:18px;color:var(--adm-muted)} .admovil-comanda-resumen{font-size:13px;line-height:18px;color:var(--adm-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .admovil-comanda-pie{display:flex;align-items:center;gap:8px;margin-top:4px} .admovil-comanda-pie>:first-child{flex:1} .admovil-comanda-pie .adm-button{min-height:44px!important} /* ---- ninguna pantalla se desplaza de lado --------------------------------------------- */ /* `.adm-stack` es una rejilla sin columnas declaradas: su única columna se estiraba hasta el * ancho mínimo del contenido más terco y empujaba la sección entera 4 px fuera del borde. Con * `minmax(0,1fr)` la columna nunca pasa del ancho visible y cada hijo se encarga de su recorte. */ .adm-shell[data-movil=true] .adm-stack,.adm-hoja .adm-stack{grid-template-columns:minmax(0,1fr)} .dimop-window .adm-stack,.dimop-window .dop-list{grid-template-columns:minmax(0,1fr)} /* ---- 44 px en todo lo tocable ---------------------------------------------------------- */ /* El dibujo puede ser más pequeño que el área: la casilla se sigue viendo de 22 px, pero su * etiqueta le da 44 de alto y 44 de ancho. */ .adm-shell[data-movil=true] :is(input[type=checkbox],input[type=radio]), .adm-hoja :is(input[type=checkbox],input[type=radio]),.adm-modal :is(input[type=checkbox],input[type=radio]){ width:22px;height:22px;flex:none;margin:11px} .adm-shell[data-movil=true] :is(.adm-toggle,.adm-switch-wrap,label:has(>input[type=checkbox]),label:has(>input[type=radio])), .adm-hoja :is(.adm-toggle,label:has(>input[type=checkbox]),label:has(>input[type=radio])), .adm-modal :is(.adm-toggle,label:has(>input[type=checkbox]),label:has(>input[type=radio])){min-height:44px;display:flex;align-items:center} /* Los interruptores de Radix miden 20 × 34: el dibujo se conserva, el área sube a 44. */ .adm-shell[data-movil=true] .adm-switch,.adm-hoja .adm-switch,.adm-modal .adm-switch{ margin-block:12px;margin-inline:5px;outline-offset:6px} /* Y encendidos se llenan de tinta, no de rojo (hallazgo B-4, decisión de Ani): «Visible» de * Categorías, «Activa» de Subcategorías y «Cupón activo» sacaban nueve y más manchas rojas por * pantalla, y el rojo queda para el «+», la acción principal de cada hoja, las insignias y el * estado «por atender». Va a todos los interruptores del celular y no solo a esos tres: un * interruptor es un ajuste, nunca una acción, y dos dibujos distintos para el mismo mando * sería peor que el rojo. El `!important` responde al de admin.css, no lo gana por fuerza. * Apagado sigue gris (#ded9dc de día, #655761 de noche), así que los dos estados se distinguen * por claro/oscuro y no por color. De noche la tinta es casi blanca y el pulgar blanco * desaparecería: ahí pasa al fondo de la página, 15,63:1 contra la tinta. */ .adm-shell[data-movil=true] .adm-switch[data-state=checked], .adm-hoja .adm-switch[data-state=checked], .adm-modal .adm-switch[data-state=checked]{background:var(--adm-ink)!important} [data-admin-theme=dark] :is(.adm-shell[data-movil=true],.adm-hoja,.adm-modal) .adm-switch[data-state=checked]>[data-slot=switch-thumb]{ background:var(--adm-bg)} .adm-shell[data-movil=true] .adm-toggle,.adm-hoja .adm-toggle,.adm-modal .adm-toggle{gap:10px;padding-block:0} /* Los campos de búsqueda: el envoltorio ya daba el área, pero el campo suelto no. */ .adm-shell[data-movil=true] .adm-search{min-height:44px;height:auto;flex-basis:100%} .adm-shell[data-movil=true] .adm-search input{min-height:42px;font-size:16px} .adm-shell[data-movil=true] :is(input,select,textarea):not([type=checkbox]):not([type=radio]), .adm-hoja :is(input,select,textarea):not([type=checkbox]):not([type=radio]){min-height:44px;font-size:16px;border-radius:var(--admovil-radio-control)} .adm-shell[data-movil=true] textarea,.adm-hoja textarea{min-height:88px} .adm-shell[data-movil=true] :is(.adm-button,.adm-icon),.adm-hoja :is(.adm-button,.adm-icon){min-height:44px;border-radius:var(--admovil-radio-control)} .adm-shell[data-movil=true] .adm-icon,.adm-hoja .adm-icon{min-width:44px} /* El toque no deja la flecha de la semana en rojo. No había ninguna regla `:focus`: el rojo venía * del `:hover` de `.adm-icon` en admin.css, que en una pantalla táctil se queda pegado al último * elemento tocado hasta que se toca otra cosa. En el celular no hay puntero que pase por encima, así * que ese realce no se aplica; el aviso de foco sigue siendo el `:focus-visible` de admin.css, que * el toque no dispara. Los dos colores son los que `.adm-icon` ya tiene en reposo, día y noche. */ .adm-shell[data-movil=true] .adm-icon{--admovil-icono:#8a7d82} [data-admin-theme=dark] .adm-shell[data-movil=true] .adm-icon{--admovil-icono:#b9aeb4} .adm-shell[data-movil=true] .adm-icon:hover{background:none;color:var(--admovil-icono)} /* Las pestañas de Radix medían 42 px de alto. */ .adm-shell[data-movil=true] [role=tab],.adm-hoja [role=tab]{min-height:44px} .adm-shell[data-movil=true] .adm-status{min-height:44px} /* ---- 1 · Reservas: ninguna subpestaña fuera de pantalla -------------------------------- */ /* Hoy la subnavegación mide 551 px en 366 visibles y «Mensajes y pagos» —la única puerta a los * mensajes y abonos de reservas— queda entera fuera del borde derecho. Aquí se envuelve. */ .adm-shell[data-movil=true] :is(.admin-subnav,.adm-subnav,.accounts-tabs){display:flex;flex-wrap:wrap;gap:6px;overflow:visible;max-width:100%} .adm-shell[data-movil=true] :is(.admin-subnav,.adm-subnav,.accounts-tabs)>*{flex:1 1 calc(50% - 3px);min-width:0;min-height:44px} .adm-shell[data-movil=true] :is(.admin-subnav,.adm-subnav,.accounts-tabs) .adm-button{padding-inline:8px;font-size:13px!important} /* Reservas tiene 5 pestañas —«Mensajes y pagos» es la quinta, no un botón suelto— así que usa el * chip con «▾». El selector ocupa la fila entera de la subnavegación. */ .adm-shell[data-movil=true] .admin-subnav>.admovil-selector{flex-basis:100%;margin-bottom:0} .adm-shell[data-movil=true] .admin-subnav:has(>.admovil-selector)>.adm-button{flex-basis:100%} /* ---- 2 · Página: las 9 pestañas, todas visibles ---------------------------------------- */ /* 1103 px en 366 visibles, con 6 pestañas —entre ellas «Visibilidad y enlaces», que apaga * formularios— solo alcanzables arrastrando. Se envuelven en una rejilla de tres columnas. */ /* Con dos o tres pestañas, una columna por pestaña (así Cupones queda como control segmentado a * todo el ancho); con cuatro o más, tres columnas. Ninguna queda fuera de pantalla. */ .adm-shell[data-movil=true] .adm-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;overflow:visible;max-width:100%;padding:0 0 10px} .adm-shell[data-movil=true] .adm-tabs:has(>*:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))} .adm-shell[data-movil=true] .adm-tabs>*{flex:none;min-height:46px;padding:4px 6px;font-size:12px!important;line-height:1.2; display:inline-flex;align-items:center;justify-content:center;text-align:center;overflow-wrap:anywhere;white-space:normal} /* ---- 3 · Carta: índice de categorías y filas de 72 px ---------------------------------- */ /* 12 632 px de alto, 15 pantallas seguidas, sin índice ni paginación. El índice de chips fija * las categorías bajo la cabecera y lleva a cualquiera en un toque. */ .admovil-indice{position:sticky;top:var(--admovil-cabecera);z-index:30;display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain; padding:8px 0;margin:0 0 4px;background:var(--adm-bg);scrollbar-width:none} .admovil-indice::-webkit-scrollbar{display:none} .admovil-indice button{flex:none;min-height:44px;padding:0 13px;border:1px solid var(--adm-line);border-radius:999px; background:var(--admovil-card);color:var(--adm-muted);font-size:13px;font-weight:600;white-space:nowrap} /* El chip de la categoría visible se rellena con la tinta del panel, no con el rosa de la ficha * activa ni con el borde rojo: el rojo queda para el «+», la acción principal de cada hoja, las * insignias y el estado «por atender» (hallazgo B-4, decisión de Ani). Blanco sobre #251c1c da * 16,65:1, y de noche #171719 sobre #f4eef0 da 15,63:1. */ .admovil-indice button[aria-current=true]{background:var(--adm-ink);color:var(--admovil-sobre-tinta);border-color:var(--adm-ink)} /* «Mensajes de pedidos y pagos» queda como una fila al final de la carta y abre su hoja. */ .admovil-fila-final{margin-top:12px} .admovil-fila-final>.adm-button{width:100%;justify-content:space-between;min-height:52px!important} .admovil-fila-final>.adm-button::after{content:'›';font-size:19px;color:var(--adm-muted)} /* Las 4 fichas de cifras pasan a una sola línea de chips desplazables: cabe entera en 390 px, no * se parte en dos y no quedan separadores sueltos al final de una línea. Cada chip filtra. */ .admovil-resumen-linea{display:flex;flex-wrap:nowrap;gap:6px;margin:0 0 10px;overflow-x:auto; overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch} .admovil-resumen-linea::-webkit-scrollbar{display:none} .admovil-resumen-linea>*{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 12px; border:1px solid var(--adm-line);border-radius:999px;background:var(--admovil-card); color:var(--adm-muted);font-size:13px;line-height:18px;white-space:nowrap} .admovil-resumen-linea button{font-family:inherit} .admovil-resumen-linea button[aria-pressed=true]{background:var(--adm-ink);color:var(--admovil-sobre-tinta); border-color:var(--adm-ink);font-weight:700} .admovil-resumen-linea>span{border-style:dashed} .adm-shell[data-movil=true] .adm-stats{display:none} /* La fila de producto: 72 px. Foto de 56, nombre en una línea con «…», y debajo el precio —«desde * $…» cuando hay varias presentaciones— con su categoría. A la derecha, el estado y su interruptor, * con área de 44. Editar es tocar la fila entera; duplicar y archivar están dentro del editor, así * que la fila no carga con tres objetivos táctiles más. */ .admovil-productos{list-style:none;margin:0;padding:0;display:grid} .admovil-producto{display:flex;align-items:center;gap:8px;min-height:72px;padding:8px 0; border-bottom:1px solid var(--adm-line)} .admovil-producto:last-child{border-bottom:0} .admovil-producto-marca{display:grid;place-items:center;width:44px;height:44px;flex:none;margin:0} .admovil-producto-marca input{width:24px;height:24px;margin:0} .admovil-producto-abrir{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:56px; border:0;background:none;padding:0;text-align:left;color:var(--adm-ink);font-family:inherit} .admovil-producto-abrir img{width:56px;height:56px;flex:none;border-radius:10px;object-fit:cover;background:var(--adm-bg)} .admovil-producto-texto{min-width:0;display:grid;gap:1px} .admovil-producto-texto strong{font-size:16px;line-height:22px;font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .admovil-producto-texto small{font-size:13px;line-height:18px;color:var(--adm-muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .admovil-producto-texto .adm-price{font-weight:700;color:var(--adm-ink);font-variant-numeric:tabular-nums} .admovil-producto>.adm-status{flex:none;min-height:44px;min-width:44px;justify-content:center} /* Modo selección: la barra de acciones masivas toma el lugar de la barra inferior. */ .adm-shell[data-movil=true] .product-bulk{position:fixed;left:0;right:0;bottom:0;z-index:42;margin:0; display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px calc(10px + var(--admovil-seguro)); background:var(--admovil-card);border-top:1px solid var(--adm-line);box-shadow:var(--admovil-sombra)} .adm-shell[data-movil=true]:not([data-seleccion=true]) .product-bulk{display:none} .adm-shell[data-movil=true][data-seleccion=true] .admovil-barra{display:none} /* ---- 4 · Reservas: el calendario vuelve a mostrar las reservas ------------------------- */ /* La tarjeta que envuelve la agenda se abre: con sus 28 px de relleno más los 20 del calendario, * las siete columnas del mes quedaban en 37 px y ningún día llegaba a 44. */ .adm-shell[data-movil=true] .reservation-manager{background:none;border:0;border-radius:0;padding:0!important} .adm-shell[data-movil=true] .reservation-manager>.adm-section-head h2{display:none} .adm-shell[data-movil=true] .reservation-manager>.adm-section-head{justify-content:flex-end;margin-bottom:8px} .adm-shell[data-movil=true] .calendar-overview{padding:2px;margin-top:10px} .adm-shell[data-movil=true] .agenda-month{gap:1px} .adm-shell[data-movil=true] .agenda-command{padding-inline:4px} /* A ≤760 px `.calendar-events{display:none}` dejaba la celda con solo el número: cero eventos * visibles, ni hora ni nombre. Aquí se ven hasta 3 por día, con su total. */ .adm-shell[data-movil=true] .calendar-stable .calendar-events{display:flex!important;justify-content:center;gap:3px;padding:0 1px 3px;min-height:8px} .adm-shell[data-movil=true] .calendar-stable .agenda-punto{width:6px;height:6px;border-radius:50%;flex:none;background:var(--adm-muted)} .adm-shell[data-movil=true] .calendar-stable .agenda-punto.recibida{background:var(--admovil-primary)} .adm-shell[data-movil=true] .calendar-stable .agenda-punto.aceptada, .adm-shell[data-movil=true] .calendar-stable .agenda-punto.asistio{background:#49815e} .adm-shell[data-movil=true] .calendar-stable .agenda-punto:is(.cancelada,.rechazada,.no_asistio){background:none;box-shadow:inset 0 0 0 1.5px var(--adm-muted)} /* El día entero es el objetivo táctil: 44 px de alto y todo el ancho de la celda. */ .adm-shell[data-movil=true] .calendar-stable .agenda-cell{min-height:62px;align-content:start;padding:1px} .adm-shell[data-movil=true] .calendar-stable .agenda-date{min-height:44px;width:100%;padding:2px 0} .adm-shell[data-movil=true] .agenda-punto.bloqueo{background:none;box-shadow:inset 0 0 0 1.5px #a47927} /* La franja semanal: siete días con su número y sus puntos, y el mes completo detrás del título. * Las flechas mueven el día elegido una semana; deslizar de lado hace lo mismo. */ .adm-shell[data-movil=true] .admovil-agenda{padding:0;border:0;background:none;margin:0 0 10px} .admovil-agenda-barra{display:flex;align-items:center;gap:6px;margin-bottom:8px} .admovil-agenda-mes{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px; border:1px solid var(--adm-line);border-radius:var(--admovil-radio-control);background:var(--admovil-card);color:var(--adm-ink)} .admovil-agenda-mes strong{font-family:'Outfit',sans-serif;font-size:17px;font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .admovil-agenda-mes[aria-expanded=true] svg{transform:rotate(180deg)} .admovil-franja{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;touch-action:pan-y} .admovil-franja-dia{display:grid;justify-items:center;align-content:start;gap:1px;min-height:62px;padding:5px 0 4px; border:1px solid transparent;border-radius:12px;background:var(--admovil-card);color:var(--adm-ink)} .admovil-franja-dia small{font-size:11px;color:var(--adm-muted)} .admovil-franja-dia b{font-family:'Outfit',sans-serif;font-size:19px;line-height:23px;font-weight:600;font-variant-numeric:tabular-nums} .admovil-franja-dia.hoy b{color:var(--admovil-primary)} /* El día elegido se rellena con la tinta del panel y no con el rosa y el borde rojos (hallazgo * B-4, decisión de Ani). Como la celda queda al revés que la página, dentro de ella se redefinen * el texto secundario y el rojo del «hoy» y de los puntos: así el rotulo del día, el número y los * puntos por estado siguen legíbles en los dos temas sin reglas repetidas para cada hijo. * Claro, sobre #251c1c: blanco 16,65:1 · #d8d2d4 11,17:1 · #ff99a6 8,21:1 · #8fc5a2 8,46:1. * Noche, sobre #f4eef0: #171719 15,63:1 · #554d52 7,14:1 · #bd1830 5,49:1 · #31664a 5,86:1. */ .admovil-franja-dia.elegido{background:var(--adm-ink);border-color:var(--adm-ink);color:var(--admovil-sobre-tinta); --adm-muted:#d8d2d4;--admovil-primary:#ff99a6;--admovil-verde:#8fc5a2} [data-admin-theme=dark] .admovil-franja-dia.elegido{--adm-muted:#554d52;--admovil-primary:#bd1830;--admovil-verde:#31664a} .admovil-franja-puntos{display:flex;gap:3px;min-height:8px;align-items:center} .admovil-franja-puntos i{width:6px;height:6px;border-radius:50%;flex:none;background:var(--adm-muted)} .admovil-franja-puntos i.recibida{background:var(--admovil-primary)} .admovil-franja-puntos i:is(.aceptada,.asistio){background:var(--admovil-verde,#49815e)} .admovil-franja-puntos i:is(.cancelada,.rechazada,.no_asistio){background:none;box-shadow:inset 0 0 0 1.5px var(--adm-muted)} .admovil-franja-puntos i.bloqueo{background:none;box-shadow:inset 0 0 0 1.5px #a47927} .admovil-agenda-salto{margin:10px 0 8px} .adm-shell[data-movil=true] .admovil-agenda .calendar-legend{margin-top:10px!important} /* «Volver al calendario» y «Todo el mes» no se dibujan en el celular: la franja semanal está justo * encima —no hay a dónde volver— y el mes completo se despliega tocando su título. Ocupaban una * fila entera para repetir dos caminos que ya existen. * El título del día y su resumen van a la izquierda, como todo el panel. La cabecera de la sección * se alinea a la derecha para que «+ Nueva reserva» quede en su esquina, y esta comparte clase con * ella: aquí se devuelve al margen izquierdo. */ .adm-shell[data-movil=true] .reservation-manager>.reservation-list-heading{justify-content:flex-start;gap:6px;text-align:left} /* La lista del día: hora en grande a la izquierda y, a la derecha, nombre, espacio, personas y * estado. Las acciones rápidas de siempre van debajo, a todo el ancho. */ .adm-shell[data-movil=true] .booking-row-overview{grid-template-columns:58px minmax(0,1fr);gap:3px 12px;padding:12px} .adm-shell[data-movil=true] .booking-row-overview .record-time{grid-column:1;grid-row:1/span 2;align-self:start;display:grid;gap:1px;min-width:0} .adm-shell[data-movil=true] .booking-row-overview .record-time b{font-family:'Outfit',sans-serif;font-size:21px;line-height:25px} .adm-shell[data-movil=true] .booking-row-overview .record-time small{font-size:11px;color:var(--adm-muted)} .adm-shell[data-movil=true] .booking-row-overview .record-person{grid-column:2;grid-row:1} .adm-shell[data-movil=true] .booking-row-overview .record-person strong{font-size:16px;line-height:22px;font-weight:600} .adm-shell[data-movil=true] .booking-row-overview .record-badge{grid-column:2;grid-row:2;justify-self:start} .adm-shell[data-movil=true] .booking-row-overview>:is(.booking-quick-actions,.adm-button){grid-column:1/-1} .adm-shell[data-movil=true] .booking-quick-actions{display:grid;gap:6px} /* ---- 5 · Reportes: «Productos con más interés» pasa a lista ---------------------------- */ /* Era la única tabla del panel que no se convirtió en tarjetas: 640 px de tabla en 336 visibles, * con scroll lateral propio y sin señal de que lo tuviera. Aquí cada producto es una línea: * posición y nombre arriba, la cifra de entregadas en grande y las otras tres como metadato. */ .adm-shell[data-movil=true] .insight-products{min-width:0!important;width:100%} .adm-shell[data-movil=true] .insight-products thead{display:none} .adm-shell[data-movil=true] .insight-products tbody{display:block;counter-reset:admovil-rank} .adm-shell[data-movil=true] .insight-products tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px; padding:10px 2px;border-bottom:1px solid var(--adm-line);counter-increment:admovil-rank} .adm-shell[data-movil=true] .insight-products td{display:block;padding:0;border:0;font-size:13px;color:var(--adm-muted); font-variant-numeric:tabular-nums} .adm-shell[data-movil=true] .insight-products td:first-child{flex:1 1 100%;font-size:15px;font-weight:600;color:var(--adm-ink)} .adm-shell[data-movil=true] .insight-products td:first-child::before{content:counter(admovil-rank) ". ";color:var(--adm-muted);font-weight:700} .adm-shell[data-movil=true] .insight-products td:first-child small{display:block;font-size:12px;font-weight:400;color:var(--adm-muted)} .adm-shell[data-movil=true] .insight-products td:nth-child(5){order:1;flex:0 0 auto;font-family:'Outfit',sans-serif; font-size:22px;line-height:26px;font-weight:600;color:var(--adm-ink)} .adm-shell[data-movil=true] .insight-products td:nth-child(5)::before{content:'Entregadas ';font-family:'DM Sans',sans-serif; font-size:12px;font-weight:400;color:var(--adm-muted)} .adm-shell[data-movil=true] .insight-products td:nth-child(2), .adm-shell[data-movil=true] .insight-products td:nth-child(3), .adm-shell[data-movil=true] .insight-products td:nth-child(4){order:2;flex:0 0 auto} .adm-shell[data-movil=true] .insight-products td:nth-child(2)::before{content:'Abiertos '} .adm-shell[data-movil=true] .insight-products td:nth-child(3)::before{content:'Agregados '} .adm-shell[data-movil=true] .insight-products td:nth-child(4)::before{content:'Solicitadas '} /* Cualquier otra tabla que quedara ancha avisa que se desplaza. */ .adm-shell[data-movil=true] .adm-table-scroll{scrollbar-width:thin} /* ---- 6 · «Hoy»: una fila de tres cifras y el radar en 2 columnas ----------------------- */ /* La franja del servicio: el día, el estado de la web y cuándo se actualizó. El estado se * reconoce por forma y texto, no solo por color. */ .admovil-servicio{display:flex;align-items:center;gap:10px;margin:0 0 12px} .admovil-servicio>div{flex:1;min-width:0} .admovil-servicio strong{display:block;font-family:'Outfit',sans-serif;font-size:17px;line-height:22px;font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* «martes, 6 de octubre» → «Martes, 6 de octubre»: solo la primera letra, no cada palabra. */ .admovil-servicio strong::first-letter{text-transform:uppercase} /* El estado y la hora caben en dos líneas antes que recortarse: ningún texto se pierde. El punto * de estado va dentro del párrafo, no como hermano, para que no se quede solo en su línea. */ .admovil-servicio small{display:block;font-size:13px;line-height:18px;color:var(--adm-muted)} .admovil-servicio small>i{display:inline-block;vertical-align:middle;margin:0 6px 2px 0; width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor} .admovil-servicio small>i[data-estado=open]{background:#49815e;border-color:#49815e} .admovil-servicio small>i[data-estado=break]{background:#b57716;border-color:#b57716} .admovil-servicio small>i[data-estado=closed]{background:var(--admovil-primary);border-color:var(--admovil-primary)} .admovil-urgente{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;padding:0 0 6px;margin:0 0 12px;list-style:none;scrollbar-width:none} .admovil-urgente::-webkit-scrollbar{display:none} .admovil-urgente>li{flex:0 0 46%;min-width:0} .admovil-urgente button{width:100%;height:100%;display:grid;gap:3px;text-align:left;padding:12px;min-height:88px; border:1px solid var(--adm-line);border-radius:var(--admovil-radio-comanda);background:var(--admovil-card);color:var(--adm-ink)} .admovil-urgente strong{font-family:'Outfit',sans-serif;font-size:28px;line-height:32px;font-weight:600;font-variant-numeric:tabular-nums} .admovil-urgente span{font-size:13px;line-height:17px;color:var(--adm-muted)} .adm-shell[data-movil=true] .today-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .adm-shell[data-movil=true] .today-tile{min-height:64px;padding:10px;gap:2px;border-radius:var(--admovil-radio-control)} .adm-shell[data-movil=true] .today-tile>strong{font-family:'Outfit',sans-serif;font-size:22px;line-height:26px;font-variant-numeric:tabular-nums} .adm-shell[data-movil=true] .today-tile>span{font-size:12px;line-height:15px} .adm-shell[data-movil=true] .today-tile small{display:none} .adm-shell[data-movil=true] .today-tile[data-vacio=true]{color:var(--adm-muted)} /* «Antes de abrir», «Resultados a mano» y la bitácora, plegables. */ .admovil-plegable{background:var(--admovil-card);border:1px solid var(--adm-line);border-radius:var(--admovil-radio-comanda);margin-bottom:10px;overflow:hidden} .admovil-plegable>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:0 14px; font-size:15px;font-weight:600;cursor:pointer;list-style:none} .admovil-plegable>summary::-webkit-details-marker{display:none} .admovil-plegable[open]>summary{border-bottom:1px solid var(--adm-line)} .admovil-plegable[open]>summary svg{transform:rotate(180deg)} .admovil-plegable-cuerpo{padding:12px 14px 14px} /* El título ya lo dice el resumen del plegable: dentro no se repite. */ .admovil-plegable-cuerpo>h2,.admovil-plegable-cuerpo>.adm-section-head h2{display:none} .admovil-plegable-cuerpo>.adm-section-head{display:grid;gap:8px;margin-bottom:10px} .admovil-plegable-cuerpo>.adm-section-head .adm-button{width:100%} /* ---- 9 · Pedidos: atajos siempre visibles, filtros en hoja y comandas ------------------ */ /* La sección entera venía envuelta en una tarjeta: en 390 px eso son 34 px de margen y un borde * alrededor de todo. En el celular la tarjeta se abre y el contenido va a todo el ancho; el * título y la bajada ya los dice la cabecera móvil, así que aquí no se repiten. */ .adm-shell[data-movil=true] .orders-workspace{background:none;border:0;border-radius:0;padding:0!important} .adm-shell[data-movil=true] .orders-workspace>.adm-section-head{display:flex;justify-content:flex-end;margin-bottom:8px} .adm-shell[data-movil=true] .orders-workspace>.adm-section-head>div{display:none} /* Los atajos de periodo (Hoy · Por confirmar hoy · Todos) son chips visibles siempre: no entran * en «Filtros», porque son el primer gesto del pase. */ .adm-shell[data-movil=true] .order-period-shortcuts{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain; padding-bottom:4px;margin-bottom:10px;scrollbar-width:none} .adm-shell[data-movil=true] .order-period-shortcuts::-webkit-scrollbar{display:none} .adm-shell[data-movil=true] .order-period-shortcuts>.adm-button{flex:none;min-height:44px!important;border-radius:999px!important;padding:0 14px} /* Los dos plegables de filtros quedan apagados: su contenido vive en la hoja «Filtros». */ .adm-shell[data-movil=true] .admin-filter-panel[hidden]{display:none!important} /* Los totales, dentro de la hoja, como líneas y no como cuatro fichas apiladas. */ .admovil-totales{margin-top:4px} .admovil-totales h3{font-size:14px;margin:0 0 6px} .admovil-totales>p{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:34px; border-bottom:1px solid var(--adm-line);font-size:14px;color:var(--adm-muted)} .admovil-totales>p>strong{color:var(--adm-ink);font-variant-numeric:tabular-nums} .admovil-totales>p.adm-hint{display:block;border:0;margin-top:8px} /* Los controles del pedido dentro de su detalle: una columna, 44 px y el guardar a todo el ancho. */ .admovil-controles-pedido{display:grid;gap:10px;margin:0 0 16px;padding:12px;border:1px solid var(--adm-line);border-radius:var(--admovil-radio-comanda)} /* Estado y Domicilio, uno al lado del otro; el aviso y lo que venga después, a todo el ancho debajo. * Sin esto el bloque heredaba las tres columnas que `.order-quick` usa por debajo de 1200 px: los * dos campos ocupaban dos columnas y el aviso se metía en la tercera, partido en tres líneas y con * el hueco muerto que deja la fila más alta. */ .admovil-controles-pedido{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start} .admovil-controles-pedido>:not(.adm-field){grid-column:1/-1;margin:0} .admovil-controles-pedido .adm-field{margin:0} .admovil-controles-pedido .adm-button{width:100%} /* ---- 10 · Clientes: buscador en la cabecera, filtros en hoja y modo selección ---------- */ .adm-shell[data-movil=true] .crm-workspace{background:none;border:0;border-radius:0;padding:0!important} .adm-shell[data-movil=true] .crm-workspace>.adm-section-head{display:none} /* Las casillas solo aparecen en modo selección, como en la carta. */ .adm-shell[data-movil=true] .crm-list.admovil-sin-seleccion>.crm-contact-row>input[type=checkbox]{display:none} .adm-shell[data-movil=true] .crm-contact-row{align-items:center;gap:4px} .adm-shell[data-movil=true] .crm-customer{border-radius:var(--admovil-radio-comanda);padding:12px} .adm-shell[data-movil=true] .customer-directory>.adm-section-head{display:grid;gap:8px;margin-bottom:10px} .adm-shell[data-movil=true] .customer-directory>.adm-section-head .adm-button{width:100%} .admovil-etapa{font-style:normal;font-weight:700;color:var(--adm-ink)} /* ---- 11 · Solicitudes: chips por tipo y acciones que caben ---------------------------- */ .adm-shell[data-movil=true] .adm-toolbar[hidden]{display:none!important} /* Las acciones de la fila se envolvían en una columna de 20 px y partían «Enviar WhatsApp» letra * por letra. Aquí cada acción toma el ancho completo de la fila. */ :is(.adm-shell[data-movil=true],.adm-hoja,.adm-modal) :is(.inbox-row-actions,.record-actions){display:flex;flex-wrap:wrap;gap:8px;width:100%} :is(.adm-shell[data-movil=true],.adm-hoja,.adm-modal) :is(.inbox-row-actions,.record-actions)>*{flex:1 1 140px;min-width:0} :is(.adm-shell[data-movil=true],.adm-hoja,.adm-modal) .application-contact{display:flex;flex-wrap:wrap;gap:8px;width:100%;min-width:0} :is(.adm-shell[data-movil=true],.adm-hoja,.adm-modal) .application-contact>:is(a,button){flex:1 1 140px;min-width:0;width:auto} /* ---- 7 · confirmaciones y los modales que no pasan por AdminModal --------------------- */ /* El editor de producto, el detalle de solicitud y «Nueva reserva» usan Dialog directo; las 5 * confirmaciones usan AlertDialog. Los cuatro se presentan como hoja, con el mismo anclaje. */ .adm-modal:not(.adm-hoja),.adm-confirm{ position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important; transform:none!important;width:100vw!important;max-width:100vw!important; border:0!important;border-top:1px solid var(--adm-line); border-radius:var(--admovil-radio-hoja) var(--admovil-radio-hoja) 0 0!important; box-shadow:0 -10px 30px #251c1c2e} .adm-modal:not(.adm-hoja){max-height:calc(var(--admin-viewport-height,100dvh) - env(safe-area-inset-top,0px))!important; height:calc(var(--admin-viewport-height,100dvh) - env(safe-area-inset-top,0px))} .adm-modal:not(.adm-hoja)[data-state=open],.adm-confirm[data-state=open]{animation:admovil-subir .22s cubic-bezier(.22,.9,.3,1)} .adm-modal:not(.adm-hoja)[data-state=closed],.adm-confirm[data-state=closed]{animation:admovil-bajar .18s ease-in} .adm-modal:not(.adm-hoja) .adm-modal-head{min-height:var(--admovil-cabecera);padding:10px 14px;border-bottom:1px solid var(--adm-line)} .adm-modal:not(.adm-hoja) .adm-modal-scroll{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px 16px 20px} .adm-modal:not(.adm-hoja) .adm-modal-footer{padding:10px 16px calc(10px + var(--admovil-seguro));border-top:1px solid var(--adm-line)} .adm-modal:not(.adm-hoja) .adm-modal-footer>.adm-button{min-height:48px!important} .adm-confirm{display:grid!important;gap:10px!important;padding:20px 16px calc(16px + var(--admovil-seguro))!important;max-height:60dvh!important;overflow-y:auto} .adm-confirm [data-slot=alert-dialog-footer]{display:flex;gap:8px;margin-top:6px} .adm-confirm [data-slot=alert-dialog-footer]>.adm-button{flex:1 1 0;min-width:0;min-height:48px!important} /* El asa también en las confirmaciones, que son medias hojas. */ .adm-confirm::before{content:'';display:block;width:40px;height:4px;border-radius:999px;background:var(--adm-line);margin:-8px auto 6px} /* ---- 8 · DIMOPINIONES: el primer aporte sin hacer scroll ------------------------------- */ /* La ventana ocupa la pantalla entera, como manda el diseño. Esta regla vive aquí —y no en * window.css— porque window.css lo comparten la ventana del panel y la página pública, y la web * pública no se toca: admin-movil.css solo se carga bajo /admin. */ dialog.dimop-window{top:var(--opinion-top,0px)!important;transform:none!important;margin:0!important; width:100vw!important;max-width:100vw!important;border:0!important;border-radius:0!important; height:var(--opinion-height,100dvh)!important;max-height:var(--opinion-height,100dvh)!important} /* Los 8 filtros apilados ocupaban más de una pantalla antes del primer aporte: ahora van * plegados y el contador y la lista quedan arriba. */ .dimop-window .dop-filters[data-movil-abierto=false]{display:none} .dimop-window .dop-filters[data-movil-abierto=true]{display:grid;gap:10px} .dimop-window .dop-filters :is(input,select){width:100%;min-height:44px;font-size:16px} .dimop-window .admovil-boton-filtros{margin-bottom:10px} .dimop-window :is(input,select,textarea){font-size:16px!important} .dimop-window .dop-list{margin-top:0} .dimop-window .dop-langs .adm-button{min-width:44px;min-height:44px} /* ---- vacíos, errores y estados --------------------------------------------------------- */ .adm-shell[data-movil=true] .adm-empty{padding:28px 16px;text-align:center} .adm-shell[data-movil=true] .adm-empty h3{font-size:16px} .adm-shell[data-movil=true] .adm-notice{font-size:14px;line-height:20px;padding:12px;border-radius:var(--admovil-radio-control)} /* Las comandas no llevan sombra: se separan por el fondo y por una línea, no por un borde. */ .adm-shell[data-movil=true] .adm-card{border-radius:var(--admovil-radio-comanda);box-shadow:none} .adm-shell[data-movil=true] .adm-card.padded{padding:14px} .adm-shell[data-movil=true] :is(.order-compact,.record-row,.crm-customer,.account-row,.dop-item){box-shadow:none;border-radius:var(--admovil-radio-comanda)} /* ---- Subcategorías y adicionales: el catálogo de la v92 en el celular ---------------- */ /* Lo que se midió a 390 y 360 px con el grupo ABIERTO (guiones-v93/diag-adicionales-v93.mjs): * `details.option-group-editor` llegaba a 768 px dentro de una pantalla de 360, y el buscador de * producto y su `select` quedaban de 59 a 736, fuera de la pantalla y SIN desplazamiento * horizontal que los alcanzara —algún ancestro los recortaba—. No se podían ni ver ni tocar. * * La causa no es un ancho declarado: es el tamaño intrínseco del `