/* ============================================================
   Capa 2 de 4: BASE (tokens.css -> base.css -> componentes.css -> utilidades.css)
   Reset y elementos sueltos. Desde i144 tambien el armazon del molde
   (riel, barra de utilidades, barra inferior, plantilla de pagina y ficha
   superpuesta): todo lo nuevo va scopeado bajo .ob-molde / .ob-pagina /
   .ob-ficha para ganarle por especificidad al shell viejo de componentes.css,
   que sigue ahi sin tocar hasta que migren todas las vistas.
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ob-bg);
  font-family: var(--ob-font);
  color: var(--ob-ink);
  -webkit-font-smoothing: antialiased;
}

.ob-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

input, button, textarea, select { font-family: inherit; }
input::placeholder { color: var(--ob-muted-2); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #CBD5E0; border-radius: 9px; }

/* ============================================================
   EL MOLDE (i144) — ver DESIGN.md "El molde (brief 08, i144)".
   Riel de 72 px (se expande a 220), barra de utilidades de 48 px sin titulo,
   plantilla de pagina (pagina.js), ficha superpuesta (drawer.js) y, en el
   celular, barra inferior de 4 iconos. Todo scopeado bajo .ob-molde,
   .ob-pagina o .ob-ficha: le gana por especificidad al shell viejo de
   componentes.css (que queda sin uso hasta borrarlo) sin depender del orden.
   Solo tokens. Toques de 44 px (--ob-tap-tactil) en lo nuevo.
   ============================================================ */

/* ---------- armazon ---------- */
.ob-app.ob-molde {
  display: grid; grid-template-columns: var(--ob-rail) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  height: 100vh; height: 100dvh;
}
.ob-app.ob-molde.ob-molde--riel-abierto { grid-template-columns: var(--ob-rail-abierto) minmax(0, 1fr); }
.ob-molde .ob-main { grid-column: 2; grid-row: 1; min-height: 0; }
.ob-molde .ob-view:focus { outline: none; }

/* Saltar al contenido: invisible hasta que el teclado llega. */
.ob-saltar {
  position: absolute; left: var(--ob-sp-2); top: var(--ob-sp-2); z-index: 90;
  padding: var(--ob-sp-2) var(--ob-sp-3); border-radius: var(--ob-r-field);
  background: var(--ob-surface); color: var(--ob-navy); font: 700 12.5px var(--ob-font-head);
  transform: translateY(-200%);
}
.ob-saltar:focus { transform: none; }

/* ---------- riel ---------- */
.ob-molde .ob-rail {
  grid-column: 1; grid-row: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: var(--ob-sp-1);
  padding: var(--ob-sp-3) var(--ob-sp-2);
  background: var(--ob-navy-deep); color: var(--ob-on-fill);
  scrollbar-width: thin;
}
.ob-rail :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--ob-on-fill); outline-offset: 2px; }
.ob-rail__marca {
  display: flex; align-items: center; justify-content: center; gap: var(--ob-sp-2);
  min-height: 48px; margin-bottom: var(--ob-sp-2); padding: var(--ob-sp-1);
  border-radius: var(--ob-r-field); background: var(--ob-celeste-marca); color: var(--ob-navy); text-decoration: none;
}
.ob-rail__marca:hover { background: var(--ob-celeste-hover); }
.ob-rail__marca.on { box-shadow: inset 3px 0 0 var(--ob-orange); }
.ob-rail__logo { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; flex: none; }
.ob-rail__logo svg { width: 20px; height: 20px; }
.ob-rail__marca-txt { display: none; font: 700 13px/1.15 var(--ob-font-head); color: var(--ob-navy); }
.ob-rail__lista { display: flex; flex-direction: column; gap: var(--ob-sp-1); }
.ob-molde .ob-rail .ob-navitem {
  justify-content: center; gap: 0; min-height: var(--ob-tap-tactil); padding: 0 var(--ob-sp-2);
  border-radius: var(--ob-r-nav); font-size: 13px;
}
.ob-molde .ob-rail .ob-navitem:hover { background: color-mix(in srgb, var(--ob-on-fill) 8%, transparent); }
.ob-molde .ob-rail .ob-navitem.on { background: var(--ob-navy-active); color: var(--ob-on-fill); }
.ob-molde .ob-rail .ob-navitem__ico svg { width: 20px; height: 20px; }
/* Plegado: el nombre no se ve (lo dicen title y aria-label); los rotulos de grupo pasan a una raya. */
.ob-molde .ob-rail .ob-navitem__txt, .ob-molde .ob-rail .ob-navitem--cfg .ob-navitem__chev { display: none; }
.ob-molde .ob-rail .ob-side__grupo { display: block; height: 1px; margin: var(--ob-sp-2) var(--ob-sp-2); overflow: hidden; color: transparent; background: color-mix(in srgb, var(--ob-on-fill) 18%, transparent); }
.ob-molde .ob-rail .ob-side__grupo:first-child { display: none; }
.ob-molde .ob-rail .ob-navitem--cfg { margin-top: var(--ob-sp-2); }
.ob-molde .ob-rail .ob-side__cfg .ob-navitem { padding-left: var(--ob-sp-2); }
.ob-rail__expandir {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: var(--ob-sp-2);
  min-height: var(--ob-tap-tactil); padding: 0 var(--ob-sp-2); border: 0; border-radius: var(--ob-r-nav);
  background: transparent; color: var(--ob-side-ink); font: 700 12.5px var(--ob-font-head); cursor: pointer;
}
.ob-rail__expandir:hover { background: color-mix(in srgb, var(--ob-on-fill) 8%, transparent); }
.ob-rail__ico { display: inline-flex; transform: rotate(-90deg); transition: transform .15s; }
.ob-rail__ico svg { width: 18px; height: 18px; }
.ob-rail__txt { display: none; }
/* Expandido (220 px), fijado o asomado: nombres, rotulos de grupo y el chevron de Configuracion. */
.ob-molde--riel-abierto .ob-rail__marca, .ob-molde--asoma .ob-rail__marca { justify-content: flex-start; }
.ob-molde--riel-abierto .ob-rail__marca-txt, .ob-molde--asoma .ob-rail__marca-txt { display: block; }
.ob-molde.ob-molde--riel-abierto .ob-rail .ob-navitem, .ob-molde.ob-molde--asoma .ob-rail .ob-navitem { justify-content: flex-start; gap: var(--ob-sp-3); padding: 0 var(--ob-sp-3); }
.ob-molde.ob-molde--riel-abierto .ob-rail .ob-navitem__txt, .ob-molde.ob-molde--asoma .ob-rail .ob-navitem__txt { display: inline; }
.ob-molde.ob-molde--riel-abierto .ob-rail .ob-navitem--cfg .ob-navitem__chev, .ob-molde.ob-molde--asoma .ob-rail .ob-navitem--cfg .ob-navitem__chev { display: inline-flex; }
/* El rotulo plegado es una raya con el texto transparente: expandido vuelve a leerse (en main quedaba invisible). */
.ob-molde.ob-molde--riel-abierto .ob-rail .ob-side__grupo, .ob-molde.ob-molde--asoma .ob-rail .ob-side__grupo { height: auto; margin: var(--ob-sp-3) var(--ob-sp-3) var(--ob-sp-1); font-size: 11.5px; background: none; color: var(--ob-side-ink); }
.ob-molde.ob-molde--riel-abierto .ob-rail .ob-side__grupo:first-child, .ob-molde.ob-molde--asoma .ob-rail .ob-side__grupo:first-child { display: block; margin-top: 0; }
.ob-molde.ob-molde--riel-abierto .ob-rail .ob-side__cfg .ob-navitem, .ob-molde.ob-molde--asoma .ob-rail .ob-side__cfg .ob-navitem { padding-left: calc(var(--ob-sp-6) + var(--ob-sp-2)); }
.ob-molde--riel-abierto .ob-rail__expandir, .ob-molde--asoma .ob-rail__expandir { justify-content: flex-start; padding: 0 var(--ob-sp-3); }
.ob-molde--riel-abierto .ob-rail__txt, .ob-molde--asoma .ob-rail__txt { display: inline; }
.ob-molde--riel-abierto .ob-rail__ico { transform: rotate(90deg); } /* asomado no gira: el boton todavia ofrece fijarlo */
/* Asomado (mouse encima o foco adentro, sin fijarlo): el riel se expande ENCIMA de la vista, sin correrla. La columna
   del grid sigue en 72 px; el riel la desborda, flota sobre la vista y por eso lleva sombra (La Regla de lo que Flota). */
.ob-molde .ob-rail { position: relative; z-index: var(--ob-z-riel); width: var(--ob-rail); transition: width .15s ease; }
.ob-molde.ob-molde--riel-abierto .ob-rail { width: var(--ob-rail-abierto); }
.ob-molde.ob-molde--asoma:not(.ob-molde--riel-abierto) .ob-rail { width: var(--ob-rail-abierto); box-shadow: var(--ob-shadow); }
@media (prefers-reduced-motion: reduce) { .ob-rail__ico { transition: none; } .ob-molde .ob-rail { transition: none; } }

/* Contador de Mi día (riel y barra inferior del celular): naranja, uno de los tres lugares donde d13 lo permite (barra
   activa del menu, contador de Mi día, el envio). Texto navy profundo: 4.78:1 sobre el naranja (blanco daria 2.6:1). */
/* El icono que lleva el contador lo ubica: tambien en la hoja del menu, que cuelga del body (fuera de .ob-molde). */
.ob-navitem__ico:has(> .ob-navitem__n) { position: relative; }
.ob-navitem__n {
  position: absolute; top: -7px; right: -11px; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ob-r-pill);
  background: var(--ob-orange); color: var(--ob-navy-deep); font: 800 var(--ob-text-min)/1 var(--ob-font-head);
  font-variant-numeric: tabular-nums;
}
.ob-navitem__n[hidden] { display: none; }

/* ---------- barra de utilidades (48 px, sin titulo) ---------- */
.ob-molde .ob-topbar.ob-barra {
  height: var(--ob-barra); flex: 0 0 var(--ob-barra); padding: 0 var(--ob-sp-5); gap: var(--ob-sp-3);
}
.ob-molde .ob-barra__buscar { margin-left: 0; min-height: 36px; flex: 0 1 420px; min-width: 0; color: var(--ob-muted); }
.ob-molde .ob-barra__buscar .ob-topbar__buscar-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; font-weight: 600; }
.ob-molde .ob-barra__buscar > span:first-child { color: var(--ob-navy); display: inline-flex; }
.ob-molde .ob-barra__buscar svg { width: 16px; height: 16px; }
.ob-barra__der { margin-left: auto; display: flex; align-items: center; gap: var(--ob-sp-2); flex: 0 0 auto; }
/* Logistica cuelga sus controles en la barra (lgt-top-ctl): ellos toman el margen y el grupo de la derecha se pega. */
.ob-molde .lgt-top-ctl ~ .ob-barra__der { margin-left: 0; }
.ob-barra__menu { position: relative; }
.ob-barra__menu-btn { display: none; }
.ob-barra__btn {
  display: inline-flex; align-items: center; gap: var(--ob-sp-2); min-height: 36px; padding: 0 var(--ob-sp-3);
  border: 1px solid var(--ob-field-border); border-radius: var(--ob-r-field); background: var(--ob-surface);
  color: var(--ob-navy); font: 700 12.5px var(--ob-font-head); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.ob-barra__btn:hover { background: var(--ob-navy-tint); }
.ob-barra__btn b { color: var(--ob-ink); font-weight: 800; }
.ob-barra__btn > svg, .ob-barra__chev svg { width: 15px; height: 15px; }
.ob-barra__chev { display: inline-flex; color: var(--ob-muted); }
.ob-barra__btn[aria-expanded="true"] .ob-barra__chev { transform: rotate(180deg); }
.ob-barra__pop {
  position: absolute; right: 0; top: calc(100% + var(--ob-sp-1)); z-index: 70; width: 280px;
  padding: var(--ob-sp-2); border: 1px solid var(--ob-border-2); border-radius: var(--ob-r-field);
  background: var(--ob-surface); box-shadow: var(--ob-shadow);
}
.ob-barra__pop[hidden] { display: none; }
.ob-barra__pop-nota { margin: 0 0 var(--ob-sp-2); padding: var(--ob-sp-1) var(--ob-sp-2); font-size: 12px; line-height: 1.45; color: var(--ob-muted); }
.ob-barra__pop-item {
  display: flex; align-items: center; gap: var(--ob-sp-2); width: 100%; min-height: var(--ob-tap-tactil); padding: 0 var(--ob-sp-2);
  border: 0; border-radius: var(--ob-r-field); background: transparent; color: var(--ob-ink);
  font: 700 12.5px var(--ob-font-head); text-align: left; cursor: pointer;
}
.ob-barra__pop-item:hover { background: var(--ob-bg); }
.ob-barra__pop-item svg { width: 16px; height: 16px; }

/* ---------- encabezado de pagina (pagina.js; y el del shell para las vistas que todavia no migraron) ---------- */
.ob-pagina__cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ob-sp-2) var(--ob-sp-4); }
.ob-pagina__titulos { flex: 1 1 260px; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ob-sp-1) var(--ob-sp-3); }
.ob-pagina__titulo { margin: 0; font: 800 15px/1.3 var(--ob-font-head); color: var(--ob-ink); }
.ob-pagina__sub { margin: 0; font-size: 12.5px; color: var(--ob-muted); }
.ob-molde .ob-pagina__cab--shell { padding: var(--ob-sp-3) var(--ob-sp-5) 0; flex: 0 0 auto; }
.ob-molde .ob-pagina__cab--shell[hidden] { display: none; }
.ob-molde .ob-pagina__cab--shell .ob-pagina__sub:empty { display: none; }

/* ---------- plantilla de pagina (pagina.js) ---------- */
.ob-pagina { max-width: var(--ob-pagina-max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--ob-sp-4); }
.ob-pagina__acciones { display: flex; align-items: center; gap: var(--ob-sp-2); flex-wrap: wrap; }
.ob-pagina__acciones .ob-btn { min-height: var(--ob-tap-tactil); }
.ob-pagina__pestanas { flex: 1 1 100%; display: flex; gap: var(--ob-sp-1); border-bottom: 1px solid var(--ob-border-2); overflow-x: auto; scrollbar-width: none; }
.ob-pagina__pestana {
  display: inline-flex; align-items: center; gap: var(--ob-sp-2); min-height: var(--ob-tap-tactil); padding: 0 var(--ob-sp-4);
  margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: transparent;
  color: var(--ob-muted); font: 700 13px var(--ob-font-head); cursor: pointer; white-space: nowrap;
}
.ob-pagina__pestana:hover { color: var(--ob-navy); }
/* La pestaña elegida: tinta navy y la barra naranja de 3 px (el naranja marca lo activo, nunca es boton: d13). */
.ob-pagina__pestana[aria-selected="true"] { color: var(--ob-navy); border-bottom-color: var(--ob-orange); }
.ob-pagina__aviso {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 var(--ob-sp-2);
  border-radius: var(--ob-r-pill); background: var(--ob-warn-bg); color: var(--ob-warn); font: 800 11.5px var(--ob-font-head);
}
.ob-pagina__herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ob-sp-2); }
.ob-pagina__panel { display: flex; flex-direction: column; gap: var(--ob-sp-4); min-width: 0; }
.ob-pagina__panel[hidden] { display: none; }
/* Un bloque que la fila de chips deja afuera (data-bloque) se esconde aunque la vista le haya puesto display. */
.ob-pagina [data-bloque][hidden], .ob-pagina .ob-split > [hidden] { display: none !important; }
/* Con una sola columna a la vista (un chip la dejo sola), esa columna ocupa la fila: el lateral pierde su tope de 400 px. */
.ob-pagina .ob-split--una > * { flex-basis: 100%; max-width: none; }
.ob-pagina__chips:empty { display: none; }
.ob-pagina__chips-grupo { display: flex; flex-wrap: wrap; gap: var(--ob-sp-2); }
.ob-pagina__chip {
  display: inline-flex; align-items: center; gap: var(--ob-sp-2); min-height: var(--ob-tap-tactil); padding: 0 var(--ob-sp-4);
  border: 1px solid var(--ob-field-border); border-radius: var(--ob-r-pill); background: var(--ob-surface);
  color: var(--ob-ink); font: 700 12.5px var(--ob-font-head); cursor: pointer; white-space: nowrap;
}
.ob-pagina__chip:hover { border-color: var(--ob-navy); }
.ob-pagina__chip[aria-pressed="true"] { border-color: var(--ob-navy); background: var(--ob-navy-tint); color: var(--ob-navy); box-shadow: inset 0 0 0 1px var(--ob-navy); }
.ob-pagina__chip-n { color: var(--ob-muted); font-weight: 800; }
.ob-pagina__chip[data-tono="warn"] .ob-pagina__chip-n, .ob-pagina__chip[data-tono="warn"] .ob-pagina__chip-valor { color: var(--ob-warn); }
.ob-pagina__chip[data-tono="danger"] .ob-pagina__chip-n, .ob-pagina__chip[data-tono="danger"] .ob-pagina__chip-valor { color: var(--ob-danger); }
.ob-pagina__chip[data-tono="ok"] .ob-pagina__chip-n, .ob-pagina__chip[data-tono="ok"] .ob-pagina__chip-valor { color: var(--ob-ok); }
.ob-pagina__chip[data-tono="info"] .ob-pagina__chip-n, .ob-pagina__chip[data-tono="info"] .ob-pagina__chip-valor { color: var(--ob-info); }
.ob-pagina__chip--kpi { flex-direction: column; align-items: flex-start; gap: var(--ob-sp-1); padding: var(--ob-sp-2) var(--ob-sp-4); border-radius: var(--ob-r-kpi); }
.ob-pagina__chip-valor { font: 800 22px/1.1 var(--ob-font-head); color: var(--ob-ink); }
.ob-pagina__chip--kpi .ob-pagina__chip-label { font: 700 11.5px var(--ob-font-head); letter-spacing: .04em; text-transform: uppercase; color: var(--ob-muted); }

/* ---------- la lista: container queries (la fila se acomoda a SU caja, no a la ventana) ---------- */
.ob-pagina__lista { container: lista / inline-size; min-width: 0; }
/* Caja ancha (1000 px o mas): la fila de pedido en sus cuatro columnas. Lo decide el ancho de la LISTA, no el de la
   ventana: la media query de 1180 px de componentes.css miraba la ventana entera, riel incluido. Bajo 1000 px de lista
   la columna del cliente quedaba en ~300 px y cortaba los nombres. */
@container lista (min-width: 1000px) {
  .ob-pagina__lista .fp-fila { grid-template-columns: minmax(0, 1fr) 190px 96px 252px; row-gap: 0; padding: 7px 14px 7px 16px; }
  .ob-pagina__lista .fp-main, .ob-pagina__lista .fp-acc { grid-column: auto; }
  .ob-pagina__lista .fp-estado { grid-column: auto; grid-row: auto; align-items: flex-end; }
  .ob-pagina__lista .fp-monto { grid-column: auto; grid-row: auto; text-align: right; }
  .ob-pagina__lista .fp-acc { justify-content: flex-end; flex-wrap: nowrap; }
}
/* Caja angosta: renglones (lo mismo que hacia la media query de 1180 px, ahora por el ancho de la lista). */
@container lista (max-width: 999px) {
  .ob-pagina__lista .fp-fila { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding: 9px 12px; }
  .ob-pagina__lista .fp-main { grid-column: 1 / -1; }
  .ob-pagina__lista .fp-estado { grid-column: 1; grid-row: 2; align-items: flex-start; }
  .ob-pagina__lista .fp-monto { grid-column: 2; grid-row: 2; text-align: right; }
  .ob-pagina__lista .fp-acc { grid-column: 1 / -1; justify-content: flex-start; }
}
@container lista (min-width: 960px) {
  .ob-pagina__lista .mp-alerta { grid-template-columns: 212px minmax(0, 1fr) 104px 300px; row-gap: 0; }
  .ob-pagina__lista .mp-alerta__main, .ob-pagina__lista .mp-alerta .mp-monto, .ob-pagina__lista .mp-alerta .mp-acciones { grid-column: auto; grid-row: auto; }
  .ob-pagina__lista .mp-alerta__main .mp-linea2 { white-space: nowrap; }
  .ob-pagina__lista .mp-alerta .mp-acciones { justify-content: flex-end; }
}
@container lista (max-width: 959px) {
  .ob-pagina__lista .mp-alerta { grid-template-columns: minmax(0, 1fr) auto; row-gap: 5px; }
  .ob-pagina__lista .mp-alerta__main { grid-column: 1 / -1; grid-row: 2; }
  .ob-pagina__lista .mp-alerta__main .mp-linea2 { white-space: normal; }
  .ob-pagina__lista .mp-alerta .mp-monto { grid-column: 2; grid-row: 1; }
  .ob-pagina__lista .mp-alerta .mp-acciones { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; }
}
@container lista (min-width: 760px) {
  .ob-pagina__lista .mp-tablero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ob-pagina__lista .mp-col { border-top: 0; border-left: 1px solid var(--ob-border); }
  .ob-pagina__lista .mp-col:first-child { border-left: 0; }
}
@container lista (max-width: 759px) {
  .ob-pagina__lista .mp-tablero { grid-template-columns: 1fr; }
  .ob-pagina__lista .mp-col { border-left: 0; border-top: 1px solid var(--ob-border); }
  .ob-pagina__lista .mp-col:first-child { border-top: 0; }
}

/* ---------- ficha superpuesta (drawer.js, d14) ---------- */
.ob-ficha-capa { position: fixed; inset: 0; z-index: var(--ob-z-ficha); background: transparent; }
.ob-ficha {
  position: absolute; top: calc(var(--ob-barra) + var(--ob-sp-3)); right: var(--ob-sp-3); bottom: var(--ob-sp-3);
  width: min(var(--ob-ficha), calc(100vw - 2 * var(--ob-sp-3)));
  display: flex; flex-direction: column; min-height: 0;
  background: var(--ob-surface); border: 1px solid var(--ob-border-2); border-radius: var(--ob-r-card); box-shadow: var(--ob-shadow);
  opacity: 0; transform: translateX(var(--ob-sp-4)); transition: opacity .16s ease, transform .16s ease;
}
.ob-ficha:focus { outline: none; }
.ob-ficha-capa.is-abierta .ob-ficha { opacity: 1; transform: none; }
.ob-ficha__cab { display: flex; align-items: flex-start; gap: var(--ob-sp-3); padding: var(--ob-sp-3) var(--ob-sp-3) var(--ob-sp-3) var(--ob-sp-4); border-bottom: 1px solid var(--ob-border); }
.ob-ficha__titulos { flex: 1; min-width: 0; padding-top: var(--ob-sp-2); }
.ob-ficha__titulo { margin: 0; font: 800 15px/1.3 var(--ob-font-head); color: var(--ob-ink); }
.ob-ficha__sub { margin: var(--ob-sp-1) 0 0; font-size: 12.5px; color: var(--ob-muted); }
.ob-ficha__cerrar {
  display: inline-flex; align-items: center; justify-content: center; width: var(--ob-tap-tactil); height: var(--ob-tap-tactil); flex: none;
  border: 0; border-radius: var(--ob-r-field); background: transparent; color: var(--ob-muted); cursor: pointer;
}
.ob-ficha__cerrar:hover { background: var(--ob-bg); color: var(--ob-ink); }
.ob-ficha__cerrar svg { width: 18px; height: 18px; }
.ob-ficha__cuerpo { flex: 1; min-height: 0; overflow: auto; padding: var(--ob-sp-4); }
@media (prefers-reduced-motion: reduce) { .ob-ficha { transition: none; } }

/* Menu "Más" del celular, dentro de la ficha: los mismos items del riel sobre fondo claro. */
.ob-menu-mas { display: flex; flex-direction: column; gap: var(--ob-sp-1); }
.ob-menu-mas .ob-navitem { min-height: var(--ob-tap-tactil); justify-content: flex-start; gap: var(--ob-sp-3); padding: 0 var(--ob-sp-3); color: var(--ob-ink); width: 100%; border: 0; background: transparent; font: 700 13px var(--ob-font-head); text-align: left; }
.ob-menu-mas .ob-navitem:hover { background: var(--ob-bg); }
.ob-menu-mas .ob-navitem.on { background: var(--ob-navy-tint); color: var(--ob-navy); box-shadow: inset 3px 0 0 var(--ob-orange); }
.ob-menu-mas .ob-side__grupo { display: block; color: var(--ob-muted); margin: var(--ob-sp-3) var(--ob-sp-3) var(--ob-sp-1); }
.ob-menu-mas .ob-navitem--cfg .ob-navitem__chev { display: inline-flex; }
.ob-menu-mas .ob-side__cfg .ob-navitem { padding-left: calc(var(--ob-sp-6) + var(--ob-sp-2)); }
.ob-menu-mas__salir { margin-top: var(--ob-sp-3); border-top: 1px solid var(--ob-border) !important; border-radius: 0 !important; }

/* ---------- barra inferior (solo celular) ---------- */
.ob-inferior { display: none; }

@media (max-width: 640px) {
  .ob-app.ob-molde, .ob-app.ob-molde.ob-molde--riel-abierto { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .ob-molde .ob-rail { display: none; }
  .ob-molde .ob-main { grid-column: 1; grid-row: 1; }
  .ob-molde .ob-topbar.ob-barra { padding: 0 var(--ob-sp-4); gap: var(--ob-sp-2); }
  .ob-molde .ob-barra__buscar { flex: 0 0 auto; min-height: var(--ob-tap-tactil); min-width: var(--ob-tap-tactil); }
  .ob-barra__btn { min-height: var(--ob-tap-tactil); }
  /* "Viendo como" y Salir viven en la hoja del boton de menu: en el celular la barra no los repite. */
  .ob-barra__menu-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: var(--ob-tap-tactil); height: var(--ob-tap-tactil); padding: 0; border: 0; border-radius: var(--ob-r-field);
    background: transparent; color: var(--ob-ink); cursor: pointer;
  }
  .ob-barra__menu-btn:hover { background: var(--ob-bg); }
  .ob-barra__menu-btn svg { width: 22px; height: 22px; }
  /* Buscar vive en la barra inferior: arriba no se repite. */
  .ob-molde .ob-barra__buscar { display: none; }
  .ob-barra__menu[data-menu="rol"] { display: none; }
  /* Nuevo vive en la barra inferior (brief 08): arriba no se repite. */
  .ob-barra__nuevo { display: none; }
  .ob-molde .ob-pagina__cab--shell { padding: var(--ob-sp-3) var(--ob-sp-4) 0; }
  .ob-molde .ob-pagina__cab--shell .ob-pagina__sub { display: none; }
  .ob-inferior {
    grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: var(--ob-barra-inferior); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--ob-surface); border-top: 1px solid var(--ob-border);
  }
  .ob-inferior__item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ob-sp-1);
    min-height: var(--ob-barra-inferior); padding: var(--ob-sp-1); border: 0; background: transparent;
    color: var(--ob-muted); font: 700 11px var(--ob-font-head); text-decoration: none; cursor: pointer; min-width: 0;
  }
  .ob-inferior__item .ob-navitem__ico svg { width: 22px; height: 22px; }
  .ob-inferior__item .ob-navitem__txt { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ob-inferior__item.on { color: var(--ob-navy); }
  .ob-inferior__item.on::before { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; border-radius: 0 0 3px 3px; background: var(--ob-orange); }
  /* La ficha es una hoja desde abajo, sobre el velo. */
  .ob-ficha-capa { background: var(--ob-scrim); }
  .ob-ficha {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 88dvh;
    border-radius: var(--ob-r-card) var(--ob-r-card) 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(var(--ob-sp-6));
  }
  .ob-ficha-capa.is-abierta .ob-ficha { transform: none; }
  /* El aviso flotante de Logistica no tapa la barra inferior. */
  .ob-molde .lgt-msg { bottom: calc(var(--ob-barra-inferior) + var(--ob-sp-3)); }
}
@media (max-width: 640px) {
  /* Plantilla de pagina en el celular: gutter de 16 px (--ob-sp-4). Las vistas viejas siguen con el padding de siempre. */
  .ob-molde .ob-view:has(> .ob-pagina) { padding-left: var(--ob-sp-4); padding-right: var(--ob-sp-4); }
  /* Los chips en una tira que se desliza: cinco chips de 44 px en tres renglones le comian media pantalla a la lista. */
  .ob-pagina__chips-grupo { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--ob-sp-4)); padding: 0 var(--ob-sp-4); }
  .ob-pagina__chip { flex: none; }
}

/* Impresion: el armazon del molde no sale en el papel (el shell viejo ya escondia .ob-side y .ob-topbar). */
@media print {
  .ob-rail, .ob-inferior, .ob-saltar, .ob-molde .ob-pagina__cab--shell, .ob-ficha-capa { display: none !important; }
}