/* EZFREE — estilos. Oscuro sobrio + un acento (ámbar). Móvil primero.
   Sin fuentes ni recursos externos: pila del sistema. */
:root{
  --bg:#0e1116; --panel:#161c24; --panel2:#1d2632; --linea:#2a3542;
  --txt:#e8edf2; --mut:#9aa7b4; --acc:#ffb020; --acc-txt:#1a1405;
  --ok:#3ecf6e; --mal:#ff6b6b; --radio:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.45; -webkit-font-smoothing:antialiased;
}
a{color:var(--acc)}
button{font:inherit}
.cargando{padding:3rem 1rem;text-align:center;color:var(--mut)}

/* ---------- estructura ---------- */
.topbar{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.7rem 1rem;border-bottom:1px solid var(--linea);
  position:sticky;top:0;background:rgba(14,17,22,.96);z-index:5;
}
.marca{font-weight:800;letter-spacing:.06em;font-size:1.15rem;color:var(--txt);text-decoration:none}
.marca b{color:var(--acc);font-weight:800}
.topbar .espacio{flex:1}
.quien{color:var(--mut);font-size:.9rem}
.rol{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  border:1px solid var(--acc);color:var(--acc);border-radius:999px;padding:.1rem .55rem;
}
.wrap{max-width:1060px;margin:0 auto;padding:1rem}
.hero{padding:2.2rem 0 1rem;text-align:left}
.hero h1{font-size:2rem;line-height:1.15;margin:.2rem 0 .6rem}
.hero h1 .acc{color:var(--acc)}
.hero p{color:var(--mut);max-width:56ch;margin:.4rem 0}
.puntos{display:grid;gap:.6rem;margin:1.2rem 0;padding:0;list-style:none}
.puntos li{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:.8rem 1rem}
.puntos li b{color:var(--acc)}
@media(min-width:720px){.puntos{grid-template-columns:repeat(3,1fr)} .hero h1{font-size:2.6rem}}

.tarjeta{
  background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:1rem;margin:1rem 0;
}
.tarjeta h2{margin:.1rem 0 .8rem;font-size:1.2rem}
.tarjeta h3{margin:1rem 0 .5rem;font-size:1rem}
.mut{color:var(--mut)} .chico{font-size:.88rem}
.oculto{display:none!important}

/* ---------- formas ---------- */
.campo{margin:.65rem 0}
.campo label{display:block;font-size:.88rem;color:var(--mut);margin-bottom:.3rem}
.campo input,.campo select,.campo textarea{
  width:100%;background:var(--panel2);border:1px solid var(--linea);border-radius:10px;
  color:var(--txt);padding:.65rem .7rem;font:inherit;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--acc);outline-offset:0;border-color:var(--acc)}
.campo textarea{min-height:3.2rem;resize:vertical}
.grid2{display:grid;gap:0 .8rem}
@media(min-width:640px){.grid2{grid-template-columns:1fr 1fr}}
.check{display:flex;gap:.5rem;align-items:center;margin:.6rem 0;color:var(--mut);font-size:.92rem}
.check input{width:auto}

.btn{
  display:inline-block;border:1px solid var(--linea);background:var(--panel2);color:var(--txt);
  border-radius:10px;padding:.62rem 1rem;cursor:pointer;text-decoration:none;font-weight:600;
}
.btn:hover{border-color:var(--acc)}
.btn.acc{background:var(--acc);border-color:var(--acc);color:var(--acc-txt)}
.btn.acc:hover{filter:brightness(1.07)}
.btn.peligro{border-color:var(--mal);color:var(--mal);background:transparent}
.btn.chico{padding:.35rem .7rem;font-size:.9rem}
.btn:disabled{opacity:.5;cursor:wait}
.fila-btns{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}

.msg{border-radius:10px;padding:.7rem .9rem;margin:.8rem 0;font-size:.95rem}
.msg.ok{background:rgba(62,207,110,.12);border:1px solid var(--ok);color:#b9f4cd}
.msg.err{background:rgba(255,107,107,.10);border:1px solid var(--mal);color:#ffc9c9}
.msg.aviso{background:rgba(255,176,32,.10);border:1px solid var(--acc);color:#ffe1a3}

/* ---------- cara pública ---------- */
.nombre-tienda{font-size:1.5rem;margin:.2rem 0}
.folio-grande{font-size:2rem;font-weight:800;color:var(--acc);letter-spacing:.03em}
.estado-pill{
  display:inline-block;border-radius:999px;padding:.25rem .8rem;font-weight:700;
  background:var(--panel2);border:1px solid var(--acc);color:var(--acc);
}
.aparato-bloque{border:1px dashed var(--linea);border-radius:10px;padding:.8rem;margin:.8rem 0}
.aparato-bloque legend{padding:0 .4rem;color:var(--mut);font-size:.88rem}

/* ---------- tablero ---------- */
.pasos{display:grid;gap:1rem;margin-top:1rem}
@media(min-width:900px){.pasos{grid-template-columns:repeat(3,1fr);align-items:start}}
@media(min-width:1280px){.pasos{grid-template-columns:repeat(6,1fr)}}
.col-paso{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:.7rem}
.col-paso h3{margin:.1rem 0 .6rem;font-size:.92rem;display:flex;justify-content:space-between;align-items:center}
.col-paso h3 .n{background:var(--panel2);border:1px solid var(--linea);border-radius:999px;padding:0 .5rem;color:var(--mut);font-size:.8rem}
.caso-card{
  display:block;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--linea);
  border-radius:10px;padding:.6rem .7rem;margin:.45rem 0;cursor:pointer;color:var(--txt);
}
.caso-card:hover{border-color:var(--acc)}
.caso-card .f{font-weight:800;color:var(--acc)}
.caso-card .cl{display:block;font-weight:600;margin:.1rem 0}
.caso-card .meta{display:flex;justify-content:space-between;gap:.5rem;color:var(--mut);font-size:.82rem}
.saldo-mal{color:var(--mal);font-weight:700}
.saldo-ok{color:var(--ok);font-weight:700}
.vacio{color:var(--mut);font-size:.88rem;padding:.3rem 0}

/* ---------- catálogo en cuadritos ---------- */
.svc-grid{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0}
.svc{
  border:1.5px solid var(--linea);background:var(--panel2);color:var(--txt);border-radius:10px;
  padding:.5rem .7rem;cursor:pointer;text-align:left;min-width:7.5rem;
}
.svc .nm{display:block;font-weight:600;font-size:.92rem}
.svc .pr{display:block;color:var(--mut);font-size:.85rem}
.svc .md{display:block;color:var(--mut);font-size:.78rem}
.svc.sel{border-color:var(--ok);background:rgba(62,207,110,.13)}
.svc.sel .pr{color:#b9f4cd}
.summary{
  background:var(--panel2);border:1px solid var(--linea);border-radius:10px;
  padding:.7rem .9rem;margin-top:.8rem;font-size:.95rem;
}
.summary .r{display:flex;justify-content:space-between;padding:.15rem 0}
.summary .tot{border-top:1px solid var(--linea);margin-top:.4rem;padding-top:.5rem;font-weight:800;font-size:1.05rem}
.summary .tot span:last-child{color:var(--acc)}

/* ---------- detalle ---------- */
table.cuenta{width:100%;border-collapse:collapse;font-size:.95rem}
table.cuenta td,table.cuenta th{padding:.35rem .2rem;border-bottom:1px solid var(--linea);text-align:left;vertical-align:top}
table.cuenta td.num,table.cuenta th.num{text-align:right;white-space:nowrap}
table.cuenta tr.tot td{border-bottom:none;font-weight:800}
table.cuenta tr.tot td.num{color:var(--acc)}
.hist{list-style:none;margin:.4rem 0;padding:0}
.hist li{border-left:3px solid var(--linea);padding:.35rem 0 .35rem .8rem;margin:.3rem 0}
.hist li .cuando{color:var(--mut);font-size:.82rem}
.qr-caja{background:#fff;border-radius:12px;padding:14px;width:fit-content;margin:.6rem 0}
.qr-caja svg{width:180px;height:180px;display:block}
.link-rastreo{word-break:break-all;font-size:.9rem}
footer.pie{border-top:1px solid var(--linea);color:var(--mut);font-size:.85rem;padding:1rem;text-align:center;margin-top:2rem}

/* ---------- oleada A: admin, inventario, TV, marcas ---------- */
.badge-cobrar{display:inline-block;background:rgba(255,176,32,.15);border:1px solid var(--acc);color:var(--acc);border-radius:999px;padding:.08rem .55rem;font-size:.78rem;font-weight:700;margin:.15rem 0}
.badge-cancelado{display:inline-block;background:rgba(255,107,107,.12);border:1px solid var(--mal);color:#ffc9c9;border-radius:999px;padding:.08rem .55rem;font-size:.78rem;font-weight:700}
.col-cobrar{border-color:var(--acc)}
.cancelados{margin-top:1rem;background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:.7rem 1rem}
.cancelados summary{cursor:pointer;color:var(--mut);font-weight:600}
.cancelados ul{color:var(--mut)}
.admin-tabs{display:flex;gap:.45rem;flex-wrap:wrap;margin:.4rem 0 1rem}
.admin-tabs .tab{border:1px solid var(--linea);background:var(--panel2);color:var(--txt);border-radius:999px;padding:.45rem .95rem;cursor:pointer;font-weight:600}
.admin-tabs .tab.sel{background:var(--acc);border-color:var(--acc);color:var(--acc-txt)}
.btn.peligro{border-color:var(--mal);color:var(--mal);background:transparent}
.rep-cards{display:grid;gap:.7rem;margin:.8rem 0}
@media(min-width:640px){.rep-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.rep-cards{grid-template-columns:repeat(3,1fr)}}
.rep-card{background:var(--panel2);border:1px solid var(--linea);border-radius:12px;padding:.8rem 1rem;display:flex;flex-direction:column;gap:.15rem}
.rep-card .k{color:var(--mut);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}
.rep-card .v{font-size:1.6rem;font-weight:800;color:var(--acc)}
.rep-card .s{color:var(--mut);font-size:.85rem}
.inv-item{border:1px solid var(--linea);border-radius:12px;padding:.8rem;margin:.6rem 0;background:var(--panel2)}
.inv-item.alerta{border-color:var(--mal)}
.inv-cab{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;align-items:baseline}
.inv-cant{font-weight:700;color:var(--ok)}
.inv-cant.mal{color:var(--mal)}
.inv-extra:empty{display:none}
.inv-extra{margin-top:.5rem}
/* TV: tipografía grande, sin scroll, todo a la vista */
body.tv-mode{overflow:hidden}
body.tv-mode .wrap.tv-wrap{max-width:none;padding:.6rem}
.tv-grid{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:start}
.tv-col{background:var(--panel);border:1px solid var(--linea);border-radius:12px;padding:.6rem}
.tv-col h3{font-size:1.25rem;margin:.1rem 0 .5rem;display:flex;justify-content:space-between}
.tv-col h3 .n{color:var(--acc)}
.tv-card{font-size:1.35rem;line-height:1.3;padding:.45rem .2rem;border-bottom:1px solid var(--linea);display:flex;flex-direction:column}
.tv-card .f{color:var(--acc);font-weight:800}
.tv-card .cl{font-weight:700}
.tv-pie{font-size:1rem!important}
@media(min-width:1280px){.pasos.con-cobrar{grid-template-columns:repeat(4,1fr)}}

/* ---------- i18n + ayuda (CONTRATO-I18N / corpus del bot guía) ---------- */
.lang-sel{display:inline-flex;border:1px solid var(--linea);border-radius:999px;overflow:hidden}
.lang-sel button{background:transparent;border:0;color:var(--mut);padding:.3rem .6rem;cursor:pointer;font-weight:700;font-size:.82rem}
.lang-sel button.sel{background:var(--acc);color:var(--acc-txt)}
.ayuda{margin:.4rem 0}
.ayuda-btn{opacity:.85}
.ayuda-txt{background:var(--panel2);border:1px dashed var(--linea);border-radius:10px;padding:.7rem .9rem;margin-top:.45rem;font-size:.92rem}
.ayuda-txt p{margin:.3rem 0 0;color:var(--mut)}
.cita-banda{border-left:4px solid var(--acc);background:var(--panel2);border-radius:10px;padding:1rem 1.1rem;margin:1rem 0}
.cita-banda blockquote{margin:0;font-size:1.15rem;font-weight:600}
.cita-banda .cita-firma{margin:.45rem 0 0;color:var(--mut)}
