:root{
  --bg:#f5f6f7;--card:#fff;--text:#1a1d21;--muted:#5f6b7a;--line:#e3e6ea;
  --ok:#067647;--ok-bg:#e8f7ef;--warn:#9a5b00;--warn-bg:#fff4dc;
  --bad:#b42318;--bad-bg:#fdecea;--info:#1d4ed8;--info-bg:#e8f0fe;
  --brand:#0f766e;--brand-text:var(--brand);--on-brand:#fff;
  --radius:12px;--nav-h:62px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#101317;--card:#1a1f25;--text:#e8ebef;--muted:#9aa5b4;--line:#2a313a;
  --ok:#4ade80;--ok-bg:#11301f;--warn:#fbbf24;--warn-bg:#33270a;
  --bad:#f87171;--bad-bg:#3a1616;--info:#8db0ff;--info-bg:#15264a;
  --brand-text:color-mix(in srgb,var(--brand) 55%,white);
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--brand-text)}
h1{font-size:1.4rem;margin:0;line-height:1.2}
h2{font-size:1.05rem;margin:0 0 .6rem}
.suave{color:var(--muted);margin:.2rem 0 0}
.malo{color:var(--bad)}
code{background:var(--line);padding:.1rem .35rem;border-radius:6px;font-size:.9em}

/* Estructura */
.contenido{max-width:760px;margin:0 auto;padding:16px 16px 24px}
body.con-nav .contenido{padding-bottom:calc(var(--nav-h) + 28px + env(safe-area-inset-bottom))}
.contenido>section,.contenido>form,.contenido>.lista{margin-bottom:18px}
.cabecera{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 16px}
.migas{margin:0 0 6px}
.migas a{text-decoration:none;color:var(--muted)}
.pie{margin-top:10px}

/* Navegacion: barra inferior en celular, lateral en pantallas grandes */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;
  background:var(--card);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.nav .marca{display:none}
.nav a:not(.marca){flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;min-height:var(--nav-h);font-size:.72rem;
  color:var(--muted);text-decoration:none}
.nav a.activo{color:var(--brand-text);font-weight:600}
.ico{width:22px;height:22px;flex:none}
@media (min-width:860px){
  body.con-nav .contenido{margin-left:240px;max-width:none;padding:28px 36px}
  body.con-nav .contenido>*{max-width:760px}
  .nav{top:0;right:auto;bottom:0;width:220px;align-content:flex-start;flex-direction:column;
    border-top:0;border-right:1px solid var(--line);padding:16px 10px}
  .nav .marca{display:block;font-weight:700;font-size:1.1rem;color:var(--text);
    text-decoration:none;padding:6px 12px 16px}
  .nav a:not(.marca){flex:none;flex-direction:row;justify-content:flex-start;
    gap:12px;min-height:44px;padding:0 12px;border-radius:10px;font-size:.95rem}
  .nav a.activo{background:color-mix(in srgb,var(--brand) 14%,transparent)}
}

/* Tarjetas, listas y filas */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.contenido>.card{margin-bottom:18px}
.lista{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.card .lista{border:0;border-radius:0;margin-bottom:12px}
.fila{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;min-height:56px;color:inherit;text-decoration:none;
  border-top:1px solid var(--line)}
.fila:first-child{border-top:0}
a.fila:active{background:var(--bg)}
.fila-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.fila-main b{overflow-wrap:anywhere}
.fila small{color:var(--muted);font-size:.84rem}
.fila small .malo,.fila small.malo{color:var(--bad);font-weight:600}
.fila.bloque{flex-wrap:wrap}
.vacio{text-align:center;color:var(--muted);padding:36px 12px}
.vacio h1{font-size:3rem;color:var(--text)}
.nota{background:var(--bg);border-radius:10px;padding:10px 12px;margin:12px 0 0;white-space:pre-wrap}
.cobrar{margin:-4px 0 16px}

/* Estadisticas */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px}
@media (min-width:560px){.stats{grid-template-columns:repeat(4,1fr)}.stats.dos-col{grid-template-columns:repeat(2,1fr)}}
.stat{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 14px;color:inherit;text-decoration:none}
.stat b{font-size:1.5rem;line-height:1.2}
.stat span{color:var(--muted);font-size:.85rem}
.stat.alerta{border-color:var(--bad)}
.stat.alerta b{color:var(--bad)}
.titulo-bad{color:var(--bad)}

/* Insignias */
.badge{display:inline-block;white-space:nowrap;font-size:.8rem;font-weight:600;
  padding:3px 10px;border-radius:999px;background:var(--line);color:var(--muted)}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.bad{background:var(--bad-bg);color:var(--bad)}
.badge.info{background:var(--info-bg);color:var(--info)}
.badge.muted{background:var(--line);color:var(--muted)}

/* Avisos */
.aviso{border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:.95rem;
  background:var(--info-bg);color:var(--info)}
.aviso.ok{background:var(--ok-bg);color:var(--ok)}
.aviso.warn{background:var(--warn-bg);color:var(--warn)}
.aviso.bad{background:var(--bad-bg);color:var(--bad)}

/* Botones y formularios */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:0 16px;border-radius:10px;border:1px solid var(--line);background:var(--card);
  color:var(--text);font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.btn:active{filter:brightness(.95)}
.btn.primario{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn.peligro{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.btn.grande{min-height:50px;width:100%}
.btn[disabled]{opacity:.6;cursor:wait}
.acciones{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.acciones form{margin:0}
.form{display:flex;flex-direction:column;gap:14px}
.card>.form{margin:0}
.campo{display:flex;flex-direction:column;gap:6px;font-size:.9rem;font-weight:600;color:var(--muted)}
input,select,textarea{font:inherit;font-size:16px;color:var(--text);background:var(--bg);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:44px;
  width:100%;font-weight:400}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus,.btn:focus-visible,a:focus-visible{
  outline:2px solid var(--brand-text);outline-offset:1px}
.dos{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:520px){.dos{grid-template-columns:1fr 1fr}}
.buscar{display:flex;gap:8px;margin-bottom:12px}
.buscar input{flex:1}
.en-linea{display:flex;gap:8px;margin-top:12px;align-items:center;flex:1 1 100%}
.en-linea input{flex:1;min-width:0}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:7px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--text);text-decoration:none;font-size:.9rem}
.chip.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.segmentos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.segmentos input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.segmentos span{display:flex;align-items:center;justify-content:center;min-height:44px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg);font-weight:600;cursor:pointer}
.segmentos input:checked+span{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.segmentos input:focus-visible+span{outline:2px solid var(--brand-text);outline-offset:1px}

/* Lineas del pedido */
.lineas-wrap{border:1px solid var(--line);border-radius:10px;padding:12px;margin:0}
.lineas-wrap legend{padding:0 6px;font-weight:600;color:var(--muted);font-size:.9rem}
.linea{display:grid;grid-template-columns:1fr 1fr 44px;gap:8px;margin-bottom:12px;
  padding-bottom:12px;border-bottom:1px dashed var(--line)}
.linea input[name=desc]{grid-column:1/-1}
.quitar{min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--card);
  color:var(--bad);font-size:1.3rem;cursor:pointer}
@media (min-width:640px){
  .linea{grid-template-columns:1fr 90px 110px 44px;border-bottom:0;padding-bottom:0;margin-bottom:8px}
  .linea input[name=desc]{grid-column:auto}
}
.total-vivo{margin:12px 0 0;text-align:right}

/* Tabla de articulos */
.tabla{width:100%;border-collapse:collapse;font-size:.92rem}
.tabla th{text-align:left;color:var(--muted);font-weight:600;padding:6px 4px;border-bottom:1px solid var(--line)}
.tabla td{padding:8px 4px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.tabla .num{text-align:right;white-space:nowrap}
.tabla tfoot td{border-bottom:0;padding:4px}
details.mas{flex:1 1 100%}
details.mas summary{list-style:none;display:inline-flex}
details.mas summary::-webkit-details-marker{display:none}
details.mas[open]{display:flex;flex-direction:column;gap:10px;align-items:flex-start;width:100%}
details.mas[open] .en-linea{width:100%}

/* Login */
.login{max-width:380px;margin:8vh auto 0}
.login h1{font-size:1.7rem}
.login .card{margin-top:18px}

/* Solo demo */
.demo-banner{background:var(--warn-bg);color:var(--warn);font-size:.85rem;padding:8px 16px;
  display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.demo-banner button{font:inherit;font-size:.85rem;font-weight:600;background:transparent;color:inherit;
  border:1px solid currentColor;border-radius:8px;padding:4px 10px;cursor:pointer}
.demo-banner a{color:inherit;font-weight:700}
body.con-nav .demo-banner{position:sticky;top:0;z-index:5}
@media (min-width:860px){body.con-nav .demo-banner{margin-left:220px}}
.nav button.marca,.nav .marca{background:none;border:0;font:inherit}