/* ═══════════════════════════════════════════════════════════════════════════
   Moldai · Cabecera v2 «cristal» · 5-nov-2026
   Se carga justo después de moldai.css. Todo lo de la cabecera nueva vive aquí.
   1/3 ordenador · 2/3 móvil · 3/3 tablet, sombra al bajar y modo ligero.
   El cristal (.glass) solo va en: grupos de la barra de arriba, cápsula y «+» del móvil,
   menú Crear y menús pequeños. Nunca en tablas, filas, tarjetas ni formularios.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1/3 · Cristal ────────────────────────────────────────────────────────── */
:root{
  --o-glass:rgba(12,23,22,.82);--o-glass-solido:rgba(12,23,22,.97);--o-glass-hov:rgba(232,240,236,.07);
  --o-glass-borde:inset 0 1px 0 rgba(232,240,236,.14),inset 0 0 0 1px rgba(232,240,236,.08),0 0 0 1px rgba(0,0,0,.40);
  --o-glass-sombra:0 10px 28px -8px rgba(0,0,0,.55);
}
:root[data-theme="light"]{
  --o-glass:rgba(244,247,245,.80);--o-glass-solido:rgba(244,247,245,.97);--o-glass-hov:rgba(16,32,30,.06);
  --o-glass-borde:inset 0 1px 0 rgba(255,255,255,.70),inset 0 0 0 1px rgba(255,255,255,.35),0 0 0 1px rgba(16,32,30,.06);
  --o-glass-sombra:0 8px 24px -8px rgba(16,32,30,.18);
}
.glass{background:var(--o-glass);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);box-shadow:var(--o-glass-borde);border-radius:999px;color:var(--o-ink)}
/* lo que flota siempre (menús y hojas) lleva su sombra; los grupos de la barra, solo al bajar (ver 3/3) */
.o-hoja.glass{box-shadow:var(--o-glass-borde),var(--o-glass-sombra);border-radius:20px}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.glass{background:var(--o-glass-solido)}}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){.glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--o-surface)}}
/* máximo 3 capas con desenfoque a la vez: con un menú abierto, la barra de arriba deja de desenfocar (detrás solo hay fondo liso: no se nota) */
:root:has(.o-hoja.open) .o-top .glass{-webkit-backdrop-filter:none;backdrop-filter:none}

/* ── 1/3 · «Crear» arriba del menú lateral ─────────────────────────────── */
.o-crear-lat{display:flex;align-items:center;gap:8px;width:calc(100% - 4px);height:40px;margin:0 2px 14px;padding:0 10px 0 14px;border:0;border-radius:999px;background:var(--o-accent-solid);color:var(--o-accent-ink);font:600 14px/1 var(--o-font);cursor:pointer;position:relative;transition:transform .12s}
.o-crear-lat:hover{filter:brightness(1.08)}
.o-crear-lat:active{transform:scale(.98)}
.o-crear-lat:focus-visible{outline:2px solid var(--o-accent);outline-offset:2px;box-shadow:none}
.o-crear-lat svg.o-i{width:18px;height:18px;stroke-width:2.2}
.o-crear-lat .o-kbd{margin-left:auto;color:inherit;border-color:currentColor;opacity:.85;font-size:12px;line-height:18px}
.o-crear-lat[hidden]{display:none}
.o-yo-btn{flex-shrink:0}
/* el menú lateral no encoge sus piezas cuando no cabe (se desplaza): antes «Crear» quedaba aplastado a 19 px */
.o-side>*{flex-shrink:0}

/* ── 1/3 · Barra de arriba (ordenador y tablet) ────────────────────────── */
@media (min-width:769px){
  .o-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;height:64px;padding:0 16px;border-bottom:0;background:var(--o-bg);position:relative;z-index:30}
  .o-titulo{display:none!important}
  .o-top-izq{min-width:0;display:flex;align-items:center}
  .o-top .o-sub{display:flex;flex:none;align-items:center;gap:2px;width:max-content;max-width:none;height:40px;padding:4px;margin:0;border:0;overflow:visible;background:var(--o-glass);position:relative}
  .o-top .o-sub[hidden]{display:none}
  .o-top .o-tab{height:32px;padding:0 11px;border-radius:999px;color:var(--o-ink);font-weight:500;font-size:13.5px;background:transparent;box-shadow:none;gap:6px}
  .o-top .o-tab:hover{background:var(--o-glass-hov);color:var(--o-ink)}
  .o-top .o-tab.act{background:var(--o-accent-soft);color:var(--o-ink);font-weight:600;box-shadow:none}
  .o-top .o-tab.o-fuera{display:none}
  .o-tab-mas{border:0;font:inherit;font-weight:500}
  .o-tab-mas svg.o-i{width:14px;height:14px;margin-right:-2px}
  .o-tab-mas[aria-expanded="true"]{background:var(--o-glass-hov)}
  /* buscador centrado de verdad (las dos columnas de los lados miden lo mismo) */
  .o-top .o-cmd{justify-self:center;width:clamp(240px,26vw,400px);max-width:none;flex:none;height:40px;padding:0 6px 0 14px;gap:8px;border:0;border-radius:999px;color:var(--o-ink);position:relative}
  .o-top .o-cmd:hover{background-image:linear-gradient(var(--o-glass-hov),var(--o-glass-hov))}
  .o-top .o-cmd .o-cmd-l{display:none}
  .o-top .o-cmd .o-cmd-c{display:inline}
  .o-top .o-cmd .o-kbd{border:0;background:var(--o-surface);color:var(--o-ink);border-radius:999px;padding:0 8px;line-height:22px}
  /* Asistente y avisos */
  .o-top-der{justify-self:end;display:flex;align-items:center;gap:2px;height:40px;padding:4px;position:relative}
  .o-top .o-top-der .as-abrir{height:32px;padding:0 12px 0 10px;margin:0;gap:6px;border:0;border-radius:999px;background:transparent;color:var(--o-ink);font-weight:600;font-size:13.5px}
  .o-top .o-top-der .as-abrir:hover{background:var(--o-glass-hov)}
  .as-on .o-top .o-top-der .as-abrir{background:var(--o-accent-soft)}
  .o-top .o-top-der .as-abrir .o-i{color:var(--o-ia);fill:currentColor;width:17px;height:17px}
  .o-top-der #notif-bell{width:32px!important;height:32px!important;min-width:32px;border-radius:999px;color:var(--o-ink)}
  .o-top-der #notif-bell:hover{background:var(--o-glass-hov)}
  .o-top-der #notif-count{top:-3px;right:-5px;box-shadow:0 0 0 2px var(--o-bg)}
  /* menús de ordenador: junto a su botón (moldai-ui.js pone --o-hx / --o-hy / --o-hb) */
  #o-crear{top:var(--o-hy,112px);left:var(--o-hx,12px);right:auto;width:340px;padding:8px}
  .o-hoja.o-peq{left:var(--o-hx,12px);width:264px;padding:6px;transform:translateY(-4px)}
  .o-hoja.o-peq.open{transform:none}
  #o-tabs-mas{top:var(--o-hy,60px);width:auto;min-width:200px;max-width:320px}
  #o-yo-menu{top:auto;bottom:var(--o-hb,76px)}
}
/* dentro del cristal, todo el texto en tinta (contraste ≥ 4,5:1) */
.o-hoja.glass .o-op{color:var(--o-ink)}
.o-hoja.glass .o-op small{color:var(--o-ink);font-weight:400}
.o-hoja.glass .o-op:hover,.o-hoja.glass .o-op:focus-visible{background:var(--o-glass-hov)}
.o-op.o-op-solo{grid-template-columns:minmax(0,1fr);min-height:40px;padding:8px 12px;font-size:14px;font-weight:500}
.o-op.o-op-solo b{font-weight:500}
.o-op[aria-checked="true"]{background:var(--o-accent-soft);font-weight:600}
.o-peq-t{font-size:12px;font-weight:600;color:var(--o-ink);padding:8px 12px 2px}
.o-peq .o-sep{margin:6px 8px}
.o-peq .o-op{min-height:44px}
.o-peq .o-op .o-mk{width:32px;height:32px;background:transparent;color:var(--o-ink)}
/* aviso «Hay una versión nueva…» (#update-banner): píldora bajo la barra, a la derecha; ya no tapa las pestañas.
   Sin desenfoque (sería la 4.ª capa con la barra): mismo aspecto con el velo casi opaco. */
#update-banner{top:calc(68px + var(--safe-t,0px))!important;left:auto!important;right:20px!important;transform:none!important;max-width:calc(100vw - 40px)!important;padding:5px 5px 5px 14px!important;gap:8px!important;border:0!important;border-radius:999px!important;background:var(--o-glass-solido)!important;box-shadow:var(--o-glass-borde),var(--o-glass-sombra)!important;color:var(--o-ink)!important;font-size:13px!important}
#update-banner svg{stroke:var(--o-accent);flex:none}
@media (min-width:769px){#update-msg{white-space:nowrap}}
#update-banner button{border:0!important;cursor:pointer;font:inherit}
#update-banner button:first-of-type{background:var(--o-accent-solid)!important;color:var(--o-accent-ink)!important;border-radius:999px!important;padding:0 14px!important;height:30px;font-weight:600!important;font-size:13px!important}
#update-banner button:last-of-type{color:var(--o-ink)!important;width:30px;height:30px;padding:0!important;border-radius:999px!important}
#update-banner button:last-of-type:hover{background:var(--o-glass-hov)!important}
/* 6-nov-2026 · más visible: la app ya no se recarga sola (#157/#159), así que el aviso tiene que verse */
#update-banner{background:var(--o-accent-soft)!important;box-shadow:0 0 0 1px var(--o-accent-line),var(--o-glass-sombra)!important}
#update-msg{font-weight:600}
@media (min-width:769px){#update-banner{left:50%!important;right:auto!important;transform:translateX(-50%)!important;padding:6px 6px 6px 16px!important}}

/* ── 1/3 · Móvil (hasta 768 px): la cabecera con el marcado nuevo ── */
@media (max-width:768px){
  /* cabecera: título grande + buscar + avisos; debajo, las pestañas en píldora (como antes) */
  .o-top{flex-wrap:wrap;height:auto;min-height:calc(54px + var(--safe-t,0px));padding:var(--safe-t,0px) 6px 0 16px;gap:0;background:var(--o-bg)}
  .o-titulo{display:block;flex:1;min-width:0;height:54px;line-height:54px;font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--o-ink)}
  .o-top .glass{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:0}
  .o-top-der{display:flex;align-items:center}
  .o-top-der #notif-count{top:4px;right:4px}
  .o-top-izq{order:9;flex:0 0 calc(100% + 22px);margin:0 -6px 0 -16px;min-width:0}
  .o-tab-mas{display:none!important}
  /* aviso de versión nueva: encima de la cápsula, no tapa la cabecera ni las pestañas */
  #update-banner{top:auto!important;bottom:calc(86px + var(--safe-b,0px));left:12px!important;right:12px!important;max-width:none!important}
}

/* ── 2/3 · Móvil (hasta 768 px) ──────────────────────────────────────────── */
@media (max-width:768px){
  /* el Asistente, en el móvil, desde el «+» (primera fila del menú Crear) */
  .o-top-der .as-abrir{display:none!important}
  /* barra de abajo: cápsula de cristal (Hoy · Mensajes · Agenda · Más) y «+» aparte.
     Sigue ocupando su sitio en la rejilla (no tapa los cuadros de escribir de Mensajes ni la barra rápida de Tareas). */
  .o-bar{display:flex;align-items:center;gap:10px;padding:8px 12px calc(8px + var(--safe-b,0px));background:transparent;border-top:0}
  .o-cap{flex:1;min-width:0;display:flex;height:62px;padding:5px;border-radius:31px}
  .o-cap .o-bi{flex:1 1 0;min-width:max-content;height:52px;min-height:0;border-radius:26px;gap:2px;color:var(--o-ink);font-size:11px;font-weight:500}
  .o-cap .o-bi>span:not(.o-cnt){display:block;padding:0 6px;white-space:nowrap;transition:opacity .22s cubic-bezier(.2,.8,.2,1)}
  .o-cap .o-bi svg.o-i{width:22px;height:22px}
  .o-cap .o-bi.act{background:var(--o-accent-soft);color:var(--o-ink);font-weight:600}
  .o-cap .o-bi.act svg.o-i{color:var(--o-accent)}
  .o-cap .o-bi .o-cnt{top:3px;left:calc(50% + 6px)}
  .o-fab{flex:none;width:62px;height:62px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;color:var(--o-accent);cursor:pointer;position:relative}
  .o-fab svg.o-i{width:26px;height:26px;stroke-width:2.2}
  .o-fab:active{transform:scale(.94)}
  .o-fab[hidden]{display:none}
  .o-cap .o-bi:hover,.o-fab:hover{background-color:var(--o-glass-hov)}
  .o-cap .o-bi.act:hover{background:var(--o-accent-soft)}
  /* hoja Crear: cristal desde abajo, el Asistente primero y las 6 acciones en 3 × 2 */
  #o-crear{left:8px;right:8px;bottom:calc(8px + var(--safe-b,0px));border-radius:20px;padding:8px 12px 14px;transform:translateY(calc(100% + 24px))}
  #o-crear.open{transform:none}
  #o-crear h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
  #o-crear .o-op-ia{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;margin-bottom:10px;border-radius:16px;background:var(--o-surface);border:1px solid var(--o-line)}
  #o-crear .o-op-ia .o-mk{width:24px;height:24px;background:transparent}
  #o-crear .o-op-ia b{font-size:15px;font-weight:700}
  #o-crear .o-op-ia small{display:none}
  .o-crear-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  #o-crear .o-crear-g .o-op,#o-crear .o-crear-g .o-op+.o-op{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:76px;padding:8px 4px;border-radius:16px;background:var(--o-surface);border:1px solid var(--o-line);text-align:center}
  #o-crear .o-crear-g .o-op[hidden]{display:none}
  #o-crear .o-crear-g .o-op:hover,#o-crear .o-crear-g .o-op:focus-visible{background:var(--o-hover)}
  #o-crear .o-crear-g .o-op .o-mk{width:26px;height:26px;background:transparent;color:var(--o-accent)}
  #o-crear .o-crear-g .o-op b{font-size:12.5px;font-weight:600}
  #o-crear .o-crear-g .o-op small{display:none}
}
/* Asistente en el menú Crear (ordenador): primera fila, con el destello ámbar */
.o-op-ia .o-mk{background:var(--o-ia-soft)}
.o-op-ia .o-mk svg.o-i{color:var(--o-ia);fill:currentColor}
.o-fab-ia{display:none;position:absolute;top:12px;right:13px;width:6px;height:6px;border-radius:50%;background:var(--o-ia)}
.o-fab.o-ia-aviso .o-fab-ia{display:block} /* punto ámbar cuando la IA tenga algo (falta la lógica que ponga la clase) */
@media (min-width:769px){
  .o-crear-g{border-top:1px solid var(--o-line);margin-top:4px;padding-top:4px}
}

/* ── 3/3 · Tablet (769–1023 px): menú lateral de iconos (64 px) con su nombre al pasar ── */
@media (min-width:769px) and (max-width:1023px){
  #app.show{grid-template-columns:64px minmax(0,1fr)}
  .o-side{padding:12px 10px;overflow:visible;align-items:center}
  .o-brand{padding:4px 0 14px;justify-content:center}
  .m-brand .m-word{display:none}
  .o-crear-lat{width:44px;height:44px;margin:0 0 12px;padding:0;justify-content:center;border-radius:50%}
  .o-crear-lat .o-kbd{display:none}
  .o-nav,.o-pie{align-items:center;width:100%}
  .o-ni{width:44px;height:40px;padding:0;justify-content:center;position:relative}
  .o-ni .o-cnt{position:absolute;top:1px;right:-4px;margin:0;min-width:18px;height:18px;padding:0 5px;box-shadow:0 0 0 2px var(--o-surface)}
  .o-ni .o-tag:not(:empty){position:absolute;top:3px;right:2px;width:8px;height:8px;margin:0;border-radius:50%;background:var(--o-warn);font-size:0;overflow:hidden}
  /* el nombre sale como etiqueta al pasar el ratón o con el teclado (sigue siendo el nombre del botón para el lector) */
  .o-side .o-ni>span:not(.o-cnt):not(.o-tag),.o-crear-lat .o-crear-t{position:absolute;left:calc(100% + 12px);top:50%;transform:translate(-4px,-50%);z-index:60;white-space:nowrap;padding:6px 10px;border-radius:8px;background:var(--o-ink);color:var(--o-bg);font-size:13px;font-weight:500;line-height:1.2;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s}
  .o-side .o-ni:hover>span:not(.o-cnt):not(.o-tag),.o-side .o-ni:focus-visible>span:not(.o-cnt):not(.o-tag),.o-crear-lat:hover .o-crear-t,.o-crear-lat:focus-visible .o-crear-t{opacity:1;transform:translate(0,-50%)}
  .o-sep{width:32px;margin:8px auto}
  .o-yo{flex-direction:column;gap:6px;padding:4px 0}
  .o-yo>a{flex:none!important}
  .o-yo>a>div{display:none}
  /* barra de arriba: igual que en el ordenador, pero buscador y Asistente solo con su icono */
  .o-top .o-cmd{width:40px;padding:0;justify-content:center}
  .o-top .o-cmd .o-cmd-t,.o-top .o-cmd .o-kbd{display:none}
  .o-top .o-top-der .as-abrir{width:32px;padding:0;justify-content:center}
  .o-top .o-top-der .as-abrir .as-abrir-t{display:none}
}

/* ── 3/3 · Al bajar (> 8 px) aparece la sombra de los grupos de arriba (solo se anima la opacidad) ── */
.o-top .glass::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--o-glass-sombra);opacity:0;pointer-events:none;transition:opacity .2s}
.o-baja .o-top .glass::after{opacity:1}
.o-marca{display:block;height:1px;margin-bottom:-1px;pointer-events:none;visibility:hidden}
@media (max-width:768px){.o-top .glass::after{display:none}}

/* ── 3/3 · Móvil: al bajar la cápsula se encoge; al subir vuelve ── */
@media (max-width:768px){
  /* 6-nov-2026: fuera el efecto de encoger (escondía los nombres y dejaba un hueco). La barra queda siempre igual */
  .o-bar.o-encoge{transform:none}
  .o-bar.o-encoge .o-cap .o-bi>span:not(.o-cnt){opacity:1}
  /* contadores pequeños en la esquina del icono; en Hoy, solo un punto (no repite el número de Mensajes) */
  .o-cap .o-bi .o-cnt{top:5px;left:calc(50% + 5px);height:16px;min-width:16px;padding:0 4px;font-size:10.5px;font-weight:700;line-height:16px;box-shadow:0 0 0 2px var(--o-bg)}
  .o-cap .o-bi[data-sec="hoy"] .o-cnt:not(:empty){top:9px;left:calc(50% + 7px);width:9px;height:9px;min-width:9px;padding:0;font-size:0;line-height:0}
  .o-cap .o-bi .o-cnt:empty{display:none}
}
@media (prefers-reduced-motion:reduce){.o-bar.o-encoge{transform:none}.o-bar.o-encoge .o-cap .o-bi>span:not(.o-cnt){opacity:1}}

/* ── 3/3 · Modo ligero (móviles y ordenadores con poca memoria o pocos núcleos: moldai-ui.js pone .lite en <html>) ── */
html.lite .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--o-glass-solido)}

/* ── 5-nov-2026 · Móvil: el título grande solo en Hoy. En las demás secciones, UNA fila compacta:
   pestañas (se desplazan si no caben) · buscar · avisos. Si la sección tiene una sola pestaña, su nombre en pequeño. ── */
@media (max-width:768px){
  .o-top:has(#o-sub[data-s]:not([data-s="hoy"])){flex-wrap:nowrap;align-items:center;height:calc(52px + var(--safe-t,0px));min-height:0;padding:var(--safe-t,0px) 2px 0 0;gap:0}
  .o-top:has(#o-sub[data-s]:not([data-s="hoy"])) .o-titulo{display:none}
  .o-top:has(#o-sub[data-s]:not([data-s="hoy"])):has(#o-sub[hidden]) .o-titulo{display:block;flex:1;min-width:0;height:52px;line-height:52px;padding-left:16px;font-size:20px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .o-top:has(#o-sub[data-s]:not([data-s="hoy"])) .o-top-izq{order:0;flex:1 1 auto;margin:0;min-width:0;height:52px;display:flex}
  .o-top:has(#o-sub[data-s]:not([data-s="hoy"])):has(#o-sub[hidden]) .o-top-izq{display:none}
  .o-top:has(#o-sub[data-s]:not([data-s="hoy"])) .o-sub{flex:1;min-width:0;height:52px;padding:0 20px 0 8px;gap:2px;align-items:center;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .o-top:has(#o-sub[data-s]:not([data-s="hoy"])) .o-sub::-webkit-scrollbar{display:none}
  .o-top:has(#o-sub[data-s]:not([data-s="hoy"])) .o-tab{position:relative;height:36px;padding:0 12px;border:0;border-radius:18px;background:transparent;color:var(--o-ink-2);font-size:14.5px;font-weight:500;flex-shrink:0}
  .o-top:has(#o-sub[data-s]:not([data-s="hoy"])) .o-tab::before{content:"";position:absolute;inset:-6px 0}
  .o-top:has(#o-sub[data-s]:not([data-s="hoy"])) .o-tab.act{background:var(--o-accent-soft);color:var(--o-ink);font-weight:600}
  .o-top:has(#o-sub[data-s]:not([data-s="hoy"])) .o-tab .o-cnt{margin-left:2px}
  .o-top:has(#o-sub[data-s]:not([data-s="hoy"])) .o-top-der{flex:none}
  /* la lupa de arriba, solo si la página no tiene su propio buscador (Mensajes, Clientes y Ventas ya lo tienen) */
  #app:has(.main>.pg.act input[type="search"]) .o-top:has(#o-sub[data-s]:not([data-s="hoy"])) .o-top-der [data-accion="buscar"]{display:none!important}
  /* el título repetido dentro de la página (ya está en la pestaña), fuera; lo que iba a su lado se queda en la fila del buscador */
  #app .ms-lado-cab{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 12px}
  #app .ms-lado-cab .ms-h1{display:none}
  #app .ms-lado-cab .ms-buscar{flex:1 1 0;min-width:0;height:44px}
  #app .ms-lado-fila{order:2;margin:0;flex:none}
  #app .ms-lado-fila .ms-yo{max-width:42vw;min-height:44px}
  #app .ms-lado-cab .ms-lado-ayuda{flex-basis:100%;margin:0}
  #app .aim-lh{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:4px;row-gap:8px;padding:8px 12px}
  #app .aim-lh-t{display:contents}
  #app .aim-lh-t h2{display:none}
  #app .aim-lh .aim-buscar{grid-column:1;grid-row:1;height:44px}
  #app .aim-lh-t [data-acc="recargar"]{grid-column:2;grid-row:1;width:44px;height:44px}
  #app .aim-lh .aim-chips,#app .aim-lh .aim-filtros{grid-column:1/-1}
  #app .aim-lh .aim-chips{margin:0 -12px;padding:0 12px}
}

/* ═══ 6-nov-2026 · Repaso del marco del móvil: cápsula, avisos de abajo, hojas, teclado y bordes de la pantalla ═══ */
/* --o-pila-*: desde dónde (contando desde abajo) ya hay algo fijo: la llamada minimizada, el aviso de versión nueva, «Deshacer». Lo mide moldai-ui.js */
:root{--o-pila-b:0px;--o-pila-r:0px;--o-pila-i:0px;--o-pila-a:0px;--o-pila-t:0px}
/* escala de capas (z-index): úsala en lo nuevo en vez de números sueltos */
:root{--z-barra:20;--z-velo:180;--z-hoja:190;--z-ventana-antigua:200;--z-version:300;--z-menu:400;--z-llamada-min:990;--z-reloj:9000;--z-campana:9999;--z-aviso:10050;--z-llamada:99999}
.o-velo{z-index:var(--z-velo)}
.o-hoja{z-index:var(--z-hoja)}
/* los avisos, por encima de todo menos la llamada a pantalla completa (antes la campana, el visor y el menú de un mensaje los tapaban) */
.toast,.o-aviso,body:has(> .aim-modal-ov) .toast{z-index:var(--z-aviso)}
.toast{pointer-events:none}
/* con una ventana <dialog> abierta, ds.js los sube a la capa de arriba (popover): aquí se quita el aspecto que pone el navegador */
.toast[popover],.o-aviso[popover]{top:auto;right:auto;margin:0;height:auto;overflow:visible;color:inherit}
.toast[popover]{color:var(--o-ink)}
.o-aviso[popover]{border:0;color:var(--o-bg)}
.o-aviso.er[popover]{color:#fff}
@media (max-width:768px){
  /* «Más» es un botón y Hoy / Mensajes son enlaces: el botón no heredaba el interlineado y su nombre salía 3 px más abajo */
  .o-cap .o-bi{line-height:1.25;font-family:inherit;letter-spacing:0}
  .o-cap .o-bi>span:not(.o-cnt){line-height:inherit}
  /* bordes redondeados o cámara en horizontal (Android): la barra y la cabecera no se meten debajo */
  .o-bar{padding-left:calc(12px + var(--safe-l,0px));padding-right:calc(12px + var(--safe-r,0px))}
  .o-top{padding-left:calc(16px + var(--safe-l,0px));padding-right:calc(6px + var(--safe-r,0px))}
  .o-top:has(#o-sub[data-s]:not([data-s="hoy"])){padding-left:var(--safe-l,0px);padding-right:calc(6px + var(--safe-r,0px))}
  /* contador de la campana: pequeño y en la esquina del icono (antes «99+» tapaba la campana entera) */
  .o-top-der #notif-count{top:3px;right:0;height:16px;min-width:16px;padding:0 4px;font-size:10.5px;line-height:16px}
  /* con el teclado abierto, fuera la barra de abajo y el aviso de versión (moldai-ui.js pone .o-teclado) */
  html.o-teclado .o-bar,html.o-teclado #update-banner{display:none!important}
  /* hoja «Más»: filas algo más bajas para que quepa entera sin desplazar (cada fila sigue midiendo más de 44 px) */
  #o-mas{max-height:calc(100dvh - 8px - var(--safe-t,0px))}
  #o-mas .o-asa{margin:2px auto 8px}
  #o-mas h2{margin-bottom:2px}
  #o-mas .o-op{min-height:50px;padding:4px 8px}
  #o-mas .o-op .o-mk{width:36px;height:36px;border-radius:11px}
  #o-mas .o-op b{font-size:15px}
  #o-mas .o-fila-mas{padding-top:8px}
  /* avisos (campana): terminan encima de la barra de abajo, no detrás */
  .nf-panel{max-height:calc(100dvh - 64px - var(--safe-t,0px) - 86px - var(--safe-b,0px))}
}
/* pantallas bajas (móvil en horizontal): cápsula y «+» más bajos, con sus nombres */
@media (max-width:768px) and (max-height:500px){
  .o-bar{padding-top:4px;padding-bottom:calc(4px + var(--safe-b,0px))}
  .o-cap{height:52px;padding:4px;border-radius:26px}
  .o-cap .o-bi{height:44px;border-radius:22px}
  .o-cap .o-bi svg.o-i{width:20px;height:20px}
  .o-fab{width:52px;height:52px}
  .o-cap .o-bi .o-cnt{top:1px}
  .o-cap .o-bi[data-sec="hoy"] .o-cnt:not(:empty){top:4px}
}

/* ── Avisos de abajo: uno encima del otro, nunca pisándose ni tapados por la llamada minimizada ── */
.toast{width:max-content;max-width:min(560px,calc(100vw - 32px));white-space:normal;text-align:center;overflow-wrap:anywhere;line-height:1.35} /* antes en una sola línea: un aviso largo se salía por los lados */
.o-aviso{width:max-content} /* «Deshacer»: con left:50% solo tenía media pantalla y «Factura borrada» salía en dos líneas */
@media (max-width:400px){#update-banner>svg{display:none}} /* móvil estrecho: más sitio para el texto del aviso de versión */
@media (min-width:769px){
  .toast{bottom:max(calc(24px + var(--safe-b,0px)),var(--o-pila-t))}
  .o-aviso{bottom:max(calc(24px + var(--safe-b,0px)),var(--o-pila-a))}
}
@media (max-width:768px){
  .toast{bottom:max(calc(86px + var(--safe-b,0px)),var(--o-pila-t))}
  .o-aviso{bottom:max(calc(86px + var(--safe-b,0px)),var(--o-pila-a))}
  #update-banner{bottom:max(calc(86px + var(--safe-b,0px)),var(--o-pila-i));border-radius:20px!important;padding:6px 6px 6px 14px!important}
  #update-banner button:first-of-type{height:44px;padding:0 16px!important}
  #update-banner button:last-of-type{width:44px;height:44px;flex:none}
  .o-aviso button{min-height:44px;padding:0 12px}
  /* «Instalar Moldai»: con el aspecto de la app, encima de la barra (antes la pisaba) y con letra legible en el tema claro */
  #install-banner{bottom:max(calc(86px + var(--safe-b,0px)),var(--o-pila-r));left:12px;right:12px;padding:8px 8px 8px 16px;gap:10px;border:0;border-radius:20px;background:var(--o-glass-solido);color:var(--o-ink);box-shadow:var(--o-glass-borde),var(--o-glass-sombra)}
  #install-banner .ib-text{flex:1;min-width:0;color:var(--o-ink)}
  #install-banner button{min-height:44px;min-width:44px}
}
@media (max-width:768px) and (max-height:500px){
  .toast{bottom:max(calc(68px + var(--safe-b,0px)),var(--o-pila-t))}
  .o-aviso{bottom:max(calc(68px + var(--safe-b,0px)),var(--o-pila-a))}
  #update-banner{bottom:max(calc(68px + var(--safe-b,0px)),var(--o-pila-i))}
  #install-banner{bottom:max(calc(68px + var(--safe-b,0px)),var(--o-pila-r))}
}
/* con una hoja abierta (Crear, Más, tu menú) el aviso de versión y la llamada minimizada se apartan: estaban por encima del velo y tapaban las opciones */
:root:has(.o-hoja.open) #update-banner,:root:has(.o-hoja.open) #oas-llamada.ll-min{visibility:hidden}

/* ── Ordenador y tablet: muesca a los lados (iPad / móvil grande en horizontal) y menú de tu cuenta en ventanas bajas ── */
@media (min-width:769px){
  #app.show{grid-template-columns:calc(232px + var(--safe-l,0px)) minmax(0,1fr)}
  .o-side{padding-left:calc(10px + var(--safe-l,0px))}
  .o-top{padding-right:calc(16px + var(--safe-r,0px))}
  #o-yo-menu{max-height:calc(100dvh - var(--o-hb,76px) - 8px);overflow-y:auto;overscroll-behavior:contain}
  /* contador de la campana: pequeño, en la esquina (antes «99+» tapaba la campana) */
  .o-top-der #notif-count{top:-4px;right:-8px;height:16px;min-width:16px;padding:0 4px;font-size:10.5px;line-height:16px}
}
@media (min-width:769px) and (max-width:1023px){#app.show{grid-template-columns:calc(64px + var(--safe-l,0px)) minmax(0,1fr)}}
/* tablet en horizontal o ventana baja: el menú de iconos no cabía y lo de abajo (Ajustes, tu menú) quedaba fuera sin poder llegar */
@media (min-width:769px) and (max-width:1023px) and (max-height:720px){.o-side{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}}

/* reloj de trabajo (dev_reloj.js): encima de la llamada minimizada, nunca pisándola */
#dv-reloj{bottom:max(calc(88px + env(safe-area-inset-bottom,0px)),var(--o-pila-b))!important}
/* con una hoja abierta, «Instalar» y el reloj también se apartan (estaban por encima: tapaban Factura, Presupuesto y Cliente en el iPhone) */
:root:has(.o-hoja.open) #install-banner,:root:has(.o-hoja.open) #dv-reloj{visibility:hidden}

/* ── Ordenador: las pestañas usan el sitio que haya antes de pasar a «Más ▾» (a 1366 px escondía Suscripciones y Facturas con sitio de sobra).
      El buscador se estrecha (entre 200 y 400 px) y queda en el hueco del centro. ── */
@media (min-width:769px){
  .o-top{grid-template-columns:minmax(0,auto) minmax(200px,1fr) auto}
  .o-top .o-cmd{width:min(400px,100%)}
}
@media (min-width:769px) and (max-width:1023px){.o-top{grid-template-columns:minmax(0,auto) minmax(48px,1fr) auto}.o-top .o-cmd{width:40px}}