/* ============================================================
   PROPUESTA DE PORTADA (22/10/2026): la interfaz de Oltra One
   Se dibuja con HTML y CSS, sin capturas: así no sale la marca
   del proveedor y pesa casi nada.
   ============================================================ */
.hero__rejilla--app{grid-template-columns:.9fr 1.1fr}
@media (max-width:940px){ .hero__rejilla--app{grid-template-columns:1fr} }

.app{
  position:relative;margin:0;border-radius:16px;overflow:hidden;
  background:#0d1117;border:1px solid #30363d;
  box-shadow:0 30px 70px -25px rgba(1,4,9,.9), 0 0 0 1px rgba(88,166,255,.08);
  font-size:13px;color:#e6edf3;user-select:none;
}
.app__barra{display:flex;align-items:center;gap:.75rem;padding:.6rem .85rem;
  background:#161b22;border-bottom:1px solid #30363d}
.app__puntos{display:flex;gap:6px}
.app__puntos i{width:10px;height:10px;border-radius:50%;background:#30363d;display:block}
.app__puntos i:nth-child(1){background:#f85149}.app__puntos i:nth-child(2){background:#d29922}.app__puntos i:nth-child(3){background:#3fb950}
.app__titulo{flex:1;font-size:12px;font-weight:600;color:#8b949e;text-align:center}
.app__estado{display:inline-flex;align-items:center;gap:.4rem;font-size:11px;font-weight:600;color:#56d364;
  background:rgba(63,185,80,.1);border:1px solid rgba(63,185,80,.25);padding:.15rem .5rem;border-radius:999px}
.app__estado i{width:6px;height:6px;border-radius:50%;background:#56d364;display:block}

.app__nav{display:flex;align-items:center;gap:.25rem;padding:.45rem .6rem;border-bottom:1px solid #21262d;background:#0d1117}
.app__tab{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .6rem;border-radius:8px;color:#8b949e;font-weight:600;font-size:12px}
.app__tab svg{width:13px;height:13px}
.app__tab--on{color:#e6edf3;background:#161b22;box-shadow:inset 0 -2px 0 #58a6ff}
.app__tab b{min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#f85149;color:#fff;font-size:10px;display:grid;place-items:center}
.app__usuario{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;font-size:11px;color:#8b949e}
.app__usuario span{width:20px;height:20px;border-radius:50%;background:#1f6feb;color:#fff;font-weight:700;font-size:10px;display:grid;place-items:center}

.app__cuerpo{display:grid;grid-template-columns:37% 1fr;min-height:330px}
.app__ticket{display:flex;flex-direction:column;border-right:1px solid #21262d;background:#0f141a;padding:.75rem}
.app__mesa{margin:0 0 .6rem;font-weight:700;font-size:12px;display:flex;justify-content:space-between;color:#e6edf3}
.app__mesa small{color:#8b949e;font-weight:500}
.app__lineas{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;flex:1;align-content:start}
.app__lineas li{display:grid;grid-template-columns:1.6rem 1fr auto;gap:.4rem;align-items:center;
  padding:.4rem .5rem;border-radius:8px;background:#161b22;border:1px solid #21262d;font-size:12px;
  transition:opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1)}
.app__lineas li.oculta{opacity:0;transform:translateY(6px)}
.app__lineas li.nueva{border-color:rgba(88,166,255,.55)}
.app__lineas em{font-style:normal;color:#58a6ff;font-weight:700}
.app__lineas b{font-weight:600;color:#c9d1d9}
.app__total{display:flex;justify-content:space-between;align-items:baseline;margin:.6rem 0;padding-top:.6rem;border-top:1px dashed #30363d}
.app__total span{color:#8b949e;font-size:12px}
.app__total b{font-size:20px;font-weight:800;letter-spacing:-.02em}
.app__botones{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.app__b{display:block;text-align:center;padding:.55rem 0;border-radius:8px;font-weight:700;font-size:12px;transition:transform .15s ease, box-shadow .2s ease}
.app__b--azul{background:#1f6feb;color:#fff}
.app__b--verde{background:#238636;color:#fff}
.app__b.pulsado{transform:scale(.95);box-shadow:0 0 0 3px rgba(88,166,255,.35)}

.app__carta{padding:.75rem;display:flex;flex-direction:column;gap:.6rem}
.app__cats{display:flex;gap:.35rem;flex-wrap:wrap}
.app__cats span{padding:.3rem .6rem;border-radius:999px;border:1px solid #30363d;color:#8b949e;font-size:11px;font-weight:600}
.app__cats .on{color:#0d1117;background:#e6edf3;border-color:#e6edf3}
.app__productos{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}
.app__prod{border-radius:10px;overflow:hidden;background:#161b22;border:1px solid #21262d;transition:transform .15s ease,border-color .2s ease}
.app__prod.pulsado{transform:scale(.95);border-color:#58a6ff}
.app__foto{height:52px;display:grid;place-items:center;color:rgba(255,255,255,.85)}
.app__foto svg{width:22px;height:22px}
.app__prod p{margin:0;padding:.35rem .45rem;display:flex;justify-content:space-between;gap:.25rem;font-size:11px;font-weight:600;color:#c9d1d9}
.app__prod p span{color:#8b949e;font-weight:500}
.f1{background:linear-gradient(135deg,#9a6700,#d29922)}.f2{background:linear-gradient(135deg,#8a3b12,#db6d28)}
.f3{background:linear-gradient(135deg,#7d2a0f,#bd561d)}.f4{background:linear-gradient(135deg,#0a3069,#1f6feb)}
.f5{background:linear-gradient(135deg,#4c2889,#8250df)}.f6{background:linear-gradient(135deg,#0f5323,#2da44e)}
.f7{background:linear-gradient(135deg,#6e2b04,#a0522d)}.f8{background:linear-gradient(135deg,#82071e,#cf222e)}
.f9{background:linear-gradient(135deg,#3d1f00,#7a4a12)}

/* ---- versión B: pantallas encima y cursor ---- */
.app__capa{position:absolute;left:0;right:0;top:86px;bottom:0;background:rgba(13,17,23,.94);
  display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .35s ease}
.app__capa.ver{opacity:1}
.app__cobro{width:78%;max-width:340px;background:#161b22;border:1px solid #30363d;border-radius:14px;padding:1rem}
.app__cobro h4,.app__hecho h4{margin:0 0 .2rem;font-size:12px;color:#8b949e;font-weight:600}
.app__cobro .grande{margin:0 0 .8rem;font-size:30px;font-weight:800;letter-spacing:-.03em}
.app__metodos{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-bottom:.7rem}
.app__metodos span{padding:.6rem;border-radius:10px;border:1px solid #30363d;font-weight:600;font-size:12px;text-align:center;color:#c9d1d9;transition:all .2s ease}
.app__metodos span.on{border-color:#58a6ff;background:rgba(88,166,255,.12);color:#e6edf3}
.app__hecho{width:82%;max-width:360px;background:#161b22;border:1px solid rgba(63,185,80,.4);border-radius:14px;padding:1rem}
.app__hecho .ok{display:flex;align-items:center;gap:.5rem;margin:0 0 .75rem;font-size:18px;font-weight:800;color:#56d364}
.app__hecho ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.app__hecho li{display:flex;gap:.55rem;align-items:flex-start;font-size:12px;color:#c9d1d9;opacity:0;transform:translateX(-6px);transition:all .35s cubic-bezier(.16,1,.3,1)}
.app__hecho li.ver{opacity:1;transform:none}
.app__hecho li i{flex:none;width:18px;height:18px;border-radius:50%;background:rgba(63,185,80,.15);color:#56d364;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800}
.app__hecho li small{display:block;color:#8b949e}
.app__cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:5;pointer-events:none;
  transition:transform .7s cubic-bezier(.16,1,.3,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.app__cursor::after{content:"";position:absolute;left:-9px;top:-9px;width:22px;height:22px;border-radius:50%;
  border:2px solid rgba(88,166,255,.8);opacity:0;transform:scale(.4)}
.app__cursor.clic::after{animation:clic .45s ease-out}
@keyframes clic{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}}

.app__pasos{display:flex;justify-content:center;gap:.5rem;margin-top:.9rem;flex-wrap:wrap}
.app__pasos span{display:inline-flex;align-items:center;gap:.4rem;font-size:12px;font-weight:600;color:#8b949e;
  padding:.3rem .7rem;border-radius:999px;border:1px solid #30363d;transition:all .3s ease}
.app__pasos span b{width:18px;height:18px;border-radius:50%;background:#21262d;display:grid;place-items:center;font-size:10px}
.app__pasos span.on{color:#e6edf3;border-color:#58a6ff;background:rgba(88,166,255,.1)}
.app__pasos span.on b{background:#1f6feb;color:#fff}

@media (max-width:560px){
  .app{font-size:12px}
  .app__cuerpo{grid-template-columns:1fr}
  .app__ticket{border-right:0;border-bottom:1px solid #21262d}
  .app__usuario{display:none}
  .app__capa{top:80px}
}
@media (prefers-reduced-motion:reduce){
  .app__cursor{display:none}
  .app__lineas li,.app__hecho li,.app__capa{transition:none}
}

/* ---- versión C: albaranes -> factura ---- */
.app__cuerpo--ventas{grid-template-columns:26% 1fr}
.app__menu{border-right:1px solid #21262d;background:#0f141a;padding:.6rem .5rem;display:grid;gap:.2rem;align-content:start}
.app__menu span{padding:.45rem .6rem;border-radius:8px;color:#8b949e;font-weight:600;font-size:12px}
.app__menu span.on{color:#e6edf3;background:#161b22;box-shadow:inset 2px 0 0 #58a6ff}
.app__menu small{display:block;margin:.5rem .6rem .2rem;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#6e7681}
.app__lista{padding:.75rem;display:flex;flex-direction:column;gap:.55rem}
.app__lista h5{margin:0;display:flex;justify-content:space-between;align-items:center;font-size:13px}
.app__lista h5 span{font-size:11px;color:#8b949e;font-weight:500}
.app__filas{display:grid;gap:.35rem}
.app__fila{display:grid;grid-template-columns:18px 4.6rem 1fr auto;gap:.55rem;align-items:center;
  padding:.5rem .55rem;border-radius:9px;background:#161b22;border:1px solid #21262d;font-size:12px;transition:border-color .2s ease, background .2s ease}
.app__fila.sel{border-color:rgba(88,166,255,.6);background:rgba(88,166,255,.08)}
.app__fila.otra{opacity:.55}
.app__check{width:16px;height:16px;border-radius:5px;border:1.5px solid #484f58;display:grid;place-items:center;font-size:10px;color:transparent;transition:all .2s ease}
.app__fila.sel .app__check{background:#1f6feb;border-color:#1f6feb;color:#fff}
.app__fila code{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:#8b949e}
.app__fila span small{display:block;color:#8b949e;font-size:10.5px}
.app__fila b{font-weight:700}
.app__barra-sel{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.55rem .6rem;border-radius:10px;border:1px dashed #30363d;font-size:12px;color:#8b949e}
.app__barra-sel b{color:#e6edf3}
.app__barra-sel .app__b{padding:.45rem .8rem}
.app__factura{width:86%;max-width:400px;background:#161b22;border:1px solid #30363d;border-radius:14px;padding:.9rem 1rem}
.app__factura header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.app__factura header b{font-size:14px}
.app__factura header span{font-size:10.5px;font-weight:700;color:#d29922;background:rgba(210,153,34,.12);border:1px solid rgba(210,153,34,.3);padding:.1rem .45rem;border-radius:999px}
.app__factura p.cli{margin:0 0 .5rem;font-size:11.5px;color:#8b949e}
.app__factura table{width:100%;border-collapse:collapse;font-size:11.5px;margin-bottom:.4rem}
.app__factura td{padding:.3rem 0;border-bottom:1px solid #21262d;color:#c9d1d9}
.app__factura td:last-child{text-align:right}
.app__factura .tot td{border:0;padding:.18rem 0;color:#8b949e}
.app__factura .tot.fin td{color:#e6edf3;font-weight:800;font-size:14px;padding-top:.35rem}
.app__factura .app__b{margin-top:.55rem}

/* móvil: que la pantalla de ejemplo no ensanche la página */
.hero__rejilla--app > *{min-width:0}
.app__nav{overflow:hidden}
@media (max-width:560px){
  .app__cuerpo--ventas{grid-template-columns:1fr}
  .app__menu{display:none}
  .app__estado{display:none}
  .app__tab:nth-child(n+4){display:none}
  .app__fila{grid-template-columns:16px 1fr auto}
  .app__fila code{display:none}
  .app__barra-sel{flex-wrap:wrap}
  .app__pasos span{font-size:11px}
}

/* ============================================================
   VÍDEO QUE RECORRE TODAS LAS PESTAÑAS (22/10/2026)
   ============================================================ */
.app__tab{transition:color .2s ease, background .2s ease}
.app__vistas{display:grid;min-height:330px}
.vista{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .35s ease, visibility 0s linear .35s;padding:.85rem}
.vista.on{opacity:1;visibility:visible;transition:opacity .35s ease}
.vista--ventas{display:grid;grid-template-columns:26% 1fr;padding:0}
.vista--ventas .app__lista{padding:.75rem}
.vista__tit{margin:0 0 .7rem;display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:#e6edf3}
.vista__tit span{font-size:11px;color:#8b949e;font-weight:500}
.app__leyenda{margin:.85rem 0 0;text-align:center;font-size:13px;font-weight:600;color:#8b949e;min-height:1.3em}

/* inicio */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.7rem}
.kpi{padding:.7rem;border-radius:10px;background:#161b22;border:1px solid #21262d}
.kpi small{display:block;font-size:10.5px;color:#8b949e}
.kpi b{display:block;margin:.2rem 0;font-size:19px;font-weight:800;letter-spacing:-.02em;color:#e6edf3}
.kpi em{font-style:normal;font-size:10.5px;color:#56d364}
.kpi:nth-child(n+2) em{color:#8b949e}
.grafica{padding:.7rem;border-radius:10px;background:#161b22;border:1px solid #21262d}
.grafica small{font-size:10.5px;color:#8b949e}
.grafica__barras{display:flex;align-items:flex-end;gap:6px;height:150px;margin-top:.5rem}
.grafica__barras i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#58a6ff,#1f6feb);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.grafica__barras i.ver{transform:scaleY(1)}

/* compras: escáner */
.escaner{border:1.5px dashed #30363d;border-radius:12px;padding:.85rem;transition:border-color .3s ease, background .3s ease}
.escaner.leyendo{border-color:#58a6ff;background:rgba(88,166,255,.05)}
.escaner.listo{border-style:solid;border-color:rgba(63,185,80,.45)}
.escaner__doc{display:flex;gap:.65rem;align-items:center}
.escaner__pdf{flex:none;width:38px;height:46px;border-radius:6px;background:#cf222e;color:#fff;font-weight:800;font-size:11px;display:grid;place-items:center}
.escaner__doc b{display:block;font-size:12.5px;color:#e6edf3}
.escaner__doc small{font-size:11px;color:#8b949e}
.escaner__barra{height:5px;border-radius:999px;background:#21262d;margin:.75rem 0;overflow:hidden}
.escaner__barra i{display:block;height:100%;width:0;background:#58a6ff;border-radius:999px}
.escaner.leyendo .escaner__barra i{width:100%;transition:width 1.5s ease}
.escaner.listo .escaner__barra i{width:100%;background:#3fb950}
.escaner__res{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;opacity:0;transform:translateY(6px);transition:all .4s cubic-bezier(.16,1,.3,1)}
.escaner.listo .escaner__res{opacity:1;transform:none}
.escaner__res li{display:flex;justify-content:space-between;font-size:12px;padding:.4rem .55rem;border-radius:8px;background:#161b22;color:#8b949e}
.escaner__res b{color:#e6edf3}
.escaner__res b.ok{color:#56d364}

/* almacén */
.stock{display:grid;gap:.35rem}
.stock__fila{display:grid;grid-template-columns:1fr 3.5rem 4rem 3.2rem;gap:.5rem;align-items:center;
  padding:.55rem .65rem;border-radius:9px;background:#161b22;border:1px solid #21262d;font-size:12px;color:#c9d1d9;transition:all .3s ease}
.stock__fila b{text-align:right;font-size:14px;color:#e6edf3}
.stock__fila small{color:#8b949e;font-size:10.5px}
.stock__fila em{font-style:normal;font-size:10.5px;font-weight:700;color:#f85149;text-align:right;opacity:0;transition:opacity .3s ease}
.stock__fila--bajo b{color:#f85149}
.stock__fila--bajo.alerta{border-color:rgba(248,81,73,.5);background:rgba(248,81,73,.06)}
.stock__fila--bajo.alerta em{opacity:1}

/* contabilidad */
.asientos{display:grid;gap:.35rem}
.asiento{display:grid;grid-template-columns:3rem 1fr auto;gap:.55rem;align-items:center;padding:.55rem .65rem;
  border-radius:9px;background:#161b22;border:1px solid #21262d;font-size:12px;color:#c9d1d9}
.asiento code{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:#8b949e}
.asiento b{color:#e6edf3}
.asiento--nuevo{opacity:0;transform:translateY(-6px);transition:all .45s cubic-bezier(.16,1,.3,1)}
.asiento--nuevo.ver{opacity:1;transform:none;border-color:rgba(88,166,255,.55)}

/* informes */
.modelo{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.modelo > div{padding:.75rem;border-radius:10px;background:#161b22;border:1px solid #21262d}
.modelo small{display:block;font-size:10.5px;color:#8b949e}
.modelo b{display:block;margin-top:.2rem;font-size:18px;font-weight:800;color:#e6edf3}
.modelo__res{grid-column:1/-1;border-color:rgba(88,166,255,.45)!important}
.modelo__res b{font-size:24px;color:#58a6ff}
.modelo__pie{display:flex;align-items:center;gap:.75rem;margin-top:.75rem;flex-wrap:wrap}
.modelo__pie .app__b{padding:.5rem .9rem}
.modelo__pie small{font-size:11.5px;color:#8b949e}
.modelo__pie small.ok{color:#56d364;font-weight:600}

@media (max-width:560px){
  .vista--ventas{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi:nth-child(3){display:none}
  .grafica__barras{height:110px}
  .stock__fila{grid-template-columns:1fr 2.6rem 3rem}
  .stock__fila em{display:none}
  .app__nav{overflow-x:auto;scrollbar-width:none}
  .app__tab:nth-child(n+4){display:inline-flex}
}
@media (prefers-reduced-motion:reduce){ .vista,.grafica__barras i,.escaner__res,.asiento--nuevo{transition:none} }

/* Oltra One: la portada con el vídeo a la derecha */
.portada__interior--video{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.portada__interior--video > *{min-width:0}
.portada__interior--video h1{font-size:clamp(2rem,3.6vw,2.9rem)}
@media (max-width:980px){ .portada__interior--video{grid-template-columns:1fr} }

/* Olty en la portada: ejemplo de conversación */
.olty{display:grid;grid-template-columns:1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.olty > *{min-width:0}
@media (max-width:900px){ .olty{grid-template-columns:1fr} }
.chat{margin:0;border-radius:18px;overflow:hidden;border:1px solid #d0d7de;background:#efeae2;
  box-shadow:0 24px 60px -24px rgba(31,35,40,.3)}
.chat__cab{display:flex;align-items:center;gap:.7rem;padding:.75rem 1rem;background:#075e54;color:#fff}
.chat__ava{width:36px;height:36px;border-radius:50%;background:#0969da;display:grid;place-items:center;font-weight:800}
.chat__cab b{display:block;font-size:15px}
.chat__cab small{font-size:12px;opacity:.8}
.chat__cuerpo{padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.chat__cuerpo p{margin:0;max-width:85%;padding:.55rem .75rem 1.1rem;border-radius:10px;font-size:14px;line-height:1.45;
  color:#111b21;position:relative;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.chat__cuerpo time{position:absolute;right:.6rem;bottom:.3rem;font-size:10.5px;color:#667781}
.chat__yo{align-self:flex-end;background:#d9fdd3}
.chat__olty{align-self:flex-start;background:#fff}