/* Interfaz de operador: misma familia visual que el portal de comercios. */
:root { --bg:#f2f2ef; --text:#171717; --accent:#ff6500; --muted:#62625c; --line:#deded8; }
[hidden] { display:none!important; }
body { font-family:system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.45; }
button,input,select,textarea { font-family:inherit; }
button { touch-action:manipulation; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid #a84300; outline-offset:3px; }
.wrap { max-width:800px; padding:0 20px 110px; min-height:100dvh; }
.app-header { margin:0 -20px 24px; padding:25px 24px 22px; border-radius:0 0 26px 26px; background:#171717; color:#fff; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:44px; height:44px; border:2px solid var(--accent); border-radius:13px; display:grid; place-items:center; color:var(--accent); font-size:26px; font-weight:900; }
.brand small,.brand strong { display:block; }
.brand small { font-size:10px; letter-spacing:.19em; color:#c3c3bd; }
.brand strong { font-size:21px; letter-spacing:-.5px; }
.app-header p { margin:16px 0 12px; font-size:13px; color:#d0d0cb; }
.network-status { display:inline-flex; align-items:center; gap:6px; border:1px solid #ffffff35; border-radius:99px; padding:5px 10px; color:#d0e8d8; font-size:11px; }
.network-status::before { content:""; width:6px; height:6px; border-radius:50%; background:#6bcd95; }
.network-status.offline { color:#ffc9a5; }
.network-status.offline::before { background:#ff984f; }
.eyebrow { color:#a84300; font-size:10px; letter-spacing:.14em; }
.title { font-size:30px; line-height:1.15; letter-spacing:-1px; margin:8px 0 18px; }
#view-login { background:#fff; border:1px solid var(--line); border-radius:22px; padding:25px; max-width:500px; margin:0 auto; }
.session-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:20px; font-size:12px; color:var(--muted); }
.link { color:var(--muted); min-height:44px; padding:8px; margin:0; font-size:12px; }
.topbar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:7px; margin:0 0 24px; }
.tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:9px 4px; background:transparent; color:var(--muted); border:0; border-radius:12px; min-height:58px; font-size:12px; }
.tab span { font-size:21px; line-height:1; }
.tab.activa { background:#171717; color:white; }
.quick-actions { display:grid; gap:12px; }
.action-card { display:grid; grid-template-columns:48px 1fr; align-items:center; text-align:left; gap:4px 14px; padding:20px; background:#fff; border:1px solid var(--line); border-radius:20px; color:var(--text); }
.action-card:hover { border-color:#a84300; }
.action-icon { grid-row:1/4; width:46px; height:46px; display:grid; place-items:center; background:#fff0e5; color:#a84300; border-radius:14px; font-size:27px; }
.action-card strong { font-size:17px; letter-spacing:-.3px; }
.action-card small { font-size:13px; font-weight:400; color:var(--muted); }
.action-go { color:#a84300; font-size:12px; font-weight:800; margin-top:8px; }
.sync-note { background:#e9e9e3; border-radius:16px; padding:18px; margin:20px 0; font-size:13px; }
.sync-note p { margin:7px 0 0; color:var(--muted); }
.form-section { min-width:0; display:flex; flex-direction:column; gap:10px; border:1px solid var(--line); background:#fff; border-radius:18px; padding:20px; margin:4px 0 10px; }
.form-section legend { font-size:16px; font-weight:800; padding:0 8px; }
.form-section legend span { display:inline-grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#171717; color:white; font-size:12px; margin-right:5px; }
.label { color:#484842; font-size:12px; letter-spacing:0; text-transform:none; }
.input { width:100%; min-width:0; min-height:48px; background:#fff; border-color:#bcbcb5; border-radius:12px; padding:12px 13px; color:var(--text); }
.input:focus { border-color:#a84300; outline:2px solid #a84300; outline-offset:1px; }
textarea.input { resize:vertical; }
input[type=file] { padding:10px; font-size:13px; }
.password-toggle { color:#a84300; min-height:44px; }
.btn,.cta { min-height:48px; background:var(--accent); color:#171717; border-radius:12px; padding:13px 16px; font-size:14px; }
.btn-accion,.btn-secondary,.btn-icon { background:#fff; color:#343430; border-color:#bcbcb5; font-family:inherit; font-weight:750; font-size:13px; min-height:46px; }
.btn-accion { color:#a84300; border-color:#c6a78f; }
button[disabled] { cursor:wait; opacity:.55; }
.card,.commerce-card,.section-block { background:#fff; border-color:var(--line); border-radius:20px; padding:20px; }
.codigo { color:var(--muted); font-size:12px; }
.estado { font-size:26px; letter-spacing:-.5px; }
.estado.listo,.saldo { color:#a84300; }
.commerce-list { grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); }
.commerce-name { font-size:20px; }
.status-badge { background:#f0f0eb; color:#56564f; text-transform:none; }
.status-badge.vencido { background:#fff0e5; color:#934000; }
.metric { background:#f4f4f0; padding:13px; border-radius:13px; min-width:0; }
.metric strong { font-size:16px; overflow-wrap:anywhere; }
.metric strong.deuda { color:#a84300; }
.metric span { color:#62625c; }
.section-help { font-size:13px; line-height:1.5; }
.section-heading { align-items:center; margin-bottom:15px; }
.section-heading .title { font-size:27px; }
.back-link { color:#a84300; min-height:44px; font-family:inherit; font-weight:800; }
.visit-warning { background:#fff0e5; border:1px solid #edbd97; color:#803900; border-radius:12px; padding:14px; font-size:13px; }
.visit-total { background:#171717; color:white; border-color:#171717; }
.visit-total .summary-line { align-items:flex-start; }
.visit-total .summary-line strong { white-space:nowrap; }
.visit-total .summary-line.total { border-color:#ffffff30; }
.visit-total .summary-line.total strong { color:#ff9853; }
.checkbox-line { color:#484842; }
.quantity-input { width:94px; }
.remove-item { color:#a31a1a; min-height:44px; font-family:inherit; font-weight:750; }
.reposition-row { flex-wrap:wrap; }
.reposition-row select { flex-basis:100%; }
.sticky-submit { bottom:92px; box-shadow:0 8px 24px #17171720; }
.mensaje { position:sticky; bottom:92px; z-index:3; background:#fff0e5; color:#803900; border:1px solid #edbd97; border-radius:14px; padding:14px; font-size:13px; text-align:left; box-shadow:0 8px 24px #17171712; }
.mensaje.error { color:#922323; background:#fff0f0; border-color:#e6bcbc; }
.conexion { margin:0 0 18px; color:#075c42; background:#e6f4ed; border-color:#b0d9c2; }
.conexion.sin-red { color:#803900; background:#fff0e5; border-color:#edbd97; }
.conexion.sin-red .conexion-punto { background:#a84300; }
.foot { color:var(--muted); font-size:10px; letter-spacing:.04em; margin-top:28px; }
@media(max-width:600px) {
  .topbar { position:fixed; bottom:0; left:0; right:0; z-index:5; margin:0; border-radius:18px 18px 0 0; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); box-shadow:0 -5px 20px #1717170b; }
  .wrap { padding-bottom:calc(115px + env(safe-area-inset-bottom)); }
  .sticky-submit,.mensaje { bottom:calc(92px + env(safe-area-inset-bottom)); }
}
@media(min-width:850px) {
  body { padding:30px 0; }
  .wrap { border-radius:28px; overflow:clip; box-shadow:0 14px 36px #17171712; background:var(--bg); min-height:calc(100dvh - 60px); }
  .quick-actions { grid-template-columns:repeat(3,1fr); }
  .action-card { grid-template-columns:1fr; align-content:start; gap:12px; }
  .action-icon { grid-row:auto; }
  .action-go { align-self:end; }
}
@media(max-width:360px) { .wrap { padding-left:16px; padding-right:16px; } .app-header { margin-left:-16px; margin-right:-16px; } .title { font-size:27px; } .action-card { padding:16px; gap:6px 10px; } }