/* ============================================================
   Facturación SIFEN — diseño hi-fi aplicado a la app real
   Sistema visual: institucional / fiscal · IBM Plex
   ============================================================ */


:root{
  --bg:#eef2f7;
  --card:#ffffff;
  --sidebar:#13243d;
  --sidebar-hi:#1d3a5f;
  --sidebar-tx:#aebccf;
  --sidebar-tx-dim:#7488a3;
  --brand:#1d5fa3;
  --brand-strong:#174a80;
  --brand-soft:#e9f1fa;
  --brand-bd:#bcd5ee;
  --ink:#16202c;
  --muted:#5c6776;
  --line:#e2e8f0;
  --line-strong:#cbd4e0;
  --ok:#1c7d4d; --ok-soft:#e6f3ec; --ok-bd:#b5ddc6;
  --warn:#b07816; --warn-soft:#f8efdd; --warn-bd:#e7d09e;
  --err:#c0392b; --err-soft:#f9e8e6; --err-bd:#eabfba;
  --teal:#0f766e; --teal-soft:#e3f1f0; --teal-bd:#b3d8d4;
  --violet:#5b53a6; --violet-soft:#edecf7; --violet-bd:#cbc7e6;
  --font:system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --r:9px;
  --sh:0 1px 2px rgba(20,35,61,.05), 0 4px 14px rgba(20,35,61,.06);
  --sh-lg:0 18px 50px rgba(16,28,48,.28);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);color:var(--ink);background:var(--bg);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.num,.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------------- App shell ---------------- */
.app{display:grid;grid-template-columns:248px 1fr;height:100vh;overflow:hidden}

/* Sidebar */
.side{background:var(--sidebar);color:var(--sidebar-tx);display:flex;flex-direction:column;padding:18px 14px;gap:6px;overflow-y:auto}
.side .logo{display:flex;align-items:center;gap:11px;padding:6px 8px 16px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:10px}
.side .logo .mark{width:34px;height:34px;border-radius:8px;background:linear-gradient(150deg,var(--brand),#2b7fc9);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;flex:0 0 auto;letter-spacing:.5px}
.side .logo .nm{font-weight:600;color:#fff;font-size:15px;line-height:1.15}
.side .logo .nm small{display:block;font-weight:400;font-size:11px;color:var(--sidebar-tx-dim);letter-spacing:.3px}
.side .sect{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--sidebar-tx-dim);padding:12px 10px 5px;font-weight:600}
.nav-i{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:7px;color:var(--sidebar-tx);cursor:pointer;font-size:14px;font-weight:500;border:none;background:transparent;width:100%;text-align:left;transition:.12s;position:relative}
.nav-i svg{width:18px;height:18px;flex:0 0 auto;opacity:.85}
.nav-i:hover{background:var(--sidebar-hi);color:#fff}
.nav-i.on{background:var(--brand);color:#fff}
.nav-i.on svg{opacity:1}
.nav-i .cnt{margin-left:auto;font-size:11px;font-weight:600;background:rgba(255,255,255,.16);color:#fff;border-radius:99px;padding:1px 8px;min-width:22px;text-align:center}
.nav-i.warnb .cnt{background:var(--warn)}
.side .spacer{flex:1}
.side .foot{border-top:1px solid rgba(255,255,255,.08);padding-top:10px;margin-top:6px}
.modo-tag{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--warn);background:rgba(176,120,22,.14);border:1px solid rgba(176,120,22,.35);border-radius:7px;padding:7px 10px;font-weight:600;letter-spacing:.3px}
.modo-tag .d{width:7px;height:7px;border-radius:50%;background:var(--warn)}

/* Main column */
.main{display:flex;flex-direction:column;overflow:hidden}
.topbar{display:flex;align-items:center;gap:16px;padding:0 26px;height:62px;background:var(--card);border-bottom:1px solid var(--line);flex:0 0 auto}
.topbar h1{font-size:19px;font-weight:600;letter-spacing:-.2px}
.return-system{max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.topbar .grow{flex:1}
.search{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 13px;width:300px;color:var(--muted);font-size:13.5px}
.search svg{width:16px;height:16px;opacity:.7;flex:0 0 auto}
.search input{border:none;background:transparent;outline:none;width:100%;font-size:13.5px;color:var(--ink)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--brand-soft);color:var(--brand-strong);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;border:1px solid var(--brand-bd);flex:0 0 auto}
.content{overflow-y:auto;padding:26px;flex:1}
.view{display:none;max-width:1080px;margin:0 auto}
.view.on{display:block}

/* ---------------- Reusable ---------------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-head .ttl{font-size:23px;font-weight:600;letter-spacing:-.3px}
.page-head .desc{font-size:13.5px;color:var(--muted);margin-top:3px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:18px}
.card.pad{padding:20px 22px}
.card-h{display:flex;align-items:center;gap:11px;padding:15px 22px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.card-h .ct{font-size:15px;font-weight:600;display:flex;align-items:center;gap:9px}
.card-h .grow{flex:1}
.card-b{padding:18px 22px}
.step-num{background:var(--brand);color:#fff;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto}

.btn{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;cursor:pointer;background:var(--card);color:var(--ink);border:1px solid var(--line-strong);border-radius:8px;padding:9px 16px;transition:.12s;white-space:nowrap;text-decoration:none}
.btn svg{width:16px;height:16px}
.btn:hover{background:#f6f8fb;text-decoration:none}
.btn.pri,.btn-primary,.btn-blue{background:var(--brand);color:#fff;border-color:var(--brand-strong)}
.btn.pri:hover,.btn-primary:hover,.btn-blue:hover{background:var(--brand-strong)}
.btn.ok,.btn-green{background:var(--ok);color:#fff;border-color:#176a40}
.btn.ok:hover,.btn-green:hover{filter:brightness(.95)}
.btn-red{background:var(--err);color:#fff;border-color:#a5281c}
.btn-red:hover{filter:brightness(.96)}
.btn.ghost,.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--muted)}
.btn.ghost:hover,.btn-ghost:hover{background:var(--bg)}
.btn.lg{font-size:15px;padding:12px 22px}
.btn.sm,.btn-sm{font-size:12.5px;padding:6px 12px;border-radius:7px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-full{width:100%;justify-content:center}
/* action-colored */
.btn.a-qr{color:var(--teal);border-color:var(--teal-bd);background:var(--teal-soft)}
.btn.a-qr:hover{background:#d6ebe9}
.btn.a-pdf{color:var(--err);border-color:var(--err-bd);background:var(--err-soft)}
.btn.a-pdf:hover{background:#f5dcd9}
.btn.a-xml{color:var(--brand);border-color:var(--brand-bd);background:var(--brand-soft)}
.btn.a-xml:hover{background:#dceaf7}
.btn.a-edit{color:var(--violet);border-color:var(--violet-bd);background:var(--violet-soft)}
.btn.a-cancel{color:var(--err);border-color:var(--err-bd);background:#fff}
.btn.a-cancel:hover{background:var(--err-soft)}

.lbl,.field label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:5px}
.lbl .req,.field label .req{color:var(--err)}
.in,.field input,.field select,.field textarea{width:100%;height:40px;padding:0 13px;font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--line-strong);border-radius:8px;transition:.12s}
.field textarea{height:auto;padding:10px 13px}
.in::placeholder,.field input::placeholder{color:#9aa6b4}
.in:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.field input[readonly]{background:#f1f5f9;color:var(--muted);cursor:not-allowed}
select.in,.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c6776' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.field{display:flex;flex-direction:column;margin-bottom:0}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:1fr 1fr 1fr}
.g4{grid-template-columns:repeat(4,1fr)}
.g-ruc{display:grid;grid-template-columns:1fr 90px auto auto;gap:10px;align-items:end}
.span2{grid-column:span 2}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}

/* badges (PHP badge() outputs .badge.badge-xx) */
.bdg,.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:5px;border:1px solid transparent;letter-spacing:.2px}
.bdg .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.bdg.ok,.badge-ok{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-bd)}
.bdg.warn,.badge-warn{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-bd)}
.bdg.err,.badge-err{color:var(--err);background:var(--err-soft);border-color:var(--err-bd)}
.bdg.info,.badge-info{color:var(--brand);background:var(--brand-soft);border-color:var(--brand-bd)}
.bdg.gray,.badge-gray{color:var(--muted);background:#eef1f5;border-color:var(--line)}

/* tables */
.tbl,.dt,.it{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th,.dt th{text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--line-strong);background:#f7f9fc}
.tbl td,.dt td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td,.dt tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover,.dt tbody tr:hover{background:#f9fbfd}
.tbl .mono,.dt .mono,.mono{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.num{text-align:right}
.acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.acts-td{vertical-align:middle}
.col-adj{width:104px;min-width:104px}
.col-acc{width:158px;min-width:158px}
.tbl-wrap{overflow-x:auto}

/* items editable table */
.it th{background:#f7f9fc}
.it td{padding:7px 9px;border-bottom:1px solid var(--line)}
.it input,.it select{height:36px;padding:0 9px;border:1px solid var(--line-strong);border-radius:7px;font-size:13.5px;width:100%;background:#fff}
.it input:focus,.it select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

/* stat tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:16px 18px;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line-strong)}
.stat .k{font-size:28px;font-weight:700;letter-spacing:-.5px;line-height:1}
.stat .l{font-size:12px;color:var(--muted);margin-top:8px;font-weight:500}
.stat.b::before{background:var(--brand)} .stat.b .k{color:var(--brand)}
.stat.w::before{background:var(--warn)} .stat.w .k{color:var(--warn)}
.stat.e::before{background:var(--err)} .stat.e .k{color:var(--err)}
.stat.o::before{background:var(--ok)} .stat.o .k{color:var(--ok)}

/* envío counters (original ids env-stat) */
.env-row{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 18px}
.env-stat{flex:1;min-width:130px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:15px 17px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
.env-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line-strong)}
.env-stat .env-k{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.env-stat .env-l{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600}
.env-stat.env-warn::before{background:var(--warn)} .env-stat.env-warn .env-k{color:var(--warn)}
.env-stat.env-ok::before{background:var(--ok)} .env-stat.env-ok .env-k{color:var(--ok)}
.env-stat.env-err::before{background:var(--err)} .env-stat.env-err .env-k{color:var(--err)}

/* wizard stepper */
.steps{display:flex;align-items:center;gap:4px;margin-bottom:22px}
.steps .st{display:flex;align-items:center;gap:10px;padding:8px 4px}
.steps .c{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line-strong);background:#fff;color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13.5px;flex:0 0 auto;transition:.15s}
.steps .nm{font-size:14px;color:var(--muted);font-weight:500}
.steps .st.on .c{background:var(--brand);border-color:var(--brand-strong);color:#fff;box-shadow:0 0 0 4px var(--brand-soft)}
.steps .st.on .nm{color:var(--ink);font-weight:600}
.steps .st.done .c{background:var(--ok);border-color:#176a40;color:#fff}
.steps .st.done .nm{color:var(--ink)}
.steps .ln{flex:1;height:2px;background:var(--line-strong);margin:0 6px;border-radius:2px;min-width:24px}
.steps .ln.done{background:var(--ok)}

/* callouts / alerts (PHP $msg/$err use .alert.alert-xx) */
.callout,.alert{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.5;border-radius:8px;padding:12px 15px;border:1px solid;border-left-width:4px;margin-bottom:16px}
.callout svg{width:18px;height:18px;flex:0 0 auto;margin-top:1px}
.callout.info,.alert-info{color:var(--brand-strong);background:var(--brand-soft);border-color:var(--brand-bd)}
.callout.warn,.alert-warn{color:#7c531a;background:var(--warn-soft);border-color:var(--warn-bd)}
.callout.ok,.alert-ok{color:#155f3a;background:var(--ok-soft);border-color:var(--ok-bd)}
.callout.err,.alert-err{color:#8f2c20;background:var(--err-soft);border-color:var(--err-bd)}

/* found-box (RUC search result) */
.found-box{border-radius:8px;padding:10px 14px;margin-top:6px;display:none;font-size:13.5px}
.found-box.vis{display:block}

/* persona box */
.persona-box{background:#f7f9fc;border:1px solid var(--line);border-radius:8px;padding:16px;margin-top:16px}
.persona-box .pb-title{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;display:flex;align-items:center;gap:8px}

/* totals bar */
.totals{display:flex;gap:30px;flex-wrap:wrap;align-items:center;background:var(--sidebar);color:#dce5f0;border-radius:var(--r);padding:16px 22px;margin-top:16px}
.totals .ti{display:flex;flex-direction:column;gap:3px}
.totals .tl{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--sidebar-tx-dim);font-weight:500}
.totals .tv{font-size:17px;font-weight:600}
.totals .big{margin-left:auto}
.totals .big .tv{font-size:25px;color:#fff;font-weight:700}

/* QR modal */
.overlay{position:fixed;inset:0;background:rgba(15,24,40,.55);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:100;padding:24px}
.overlay.on{display:flex}
.modal{width:min(620px,100%);background:var(--card);border-radius:14px;box-shadow:var(--sh-lg);overflow:hidden}
.modal .mh{display:flex;align-items:center;gap:12px;padding:17px 22px;border-bottom:1px solid var(--line)}
.modal .mh .mt{font-size:16px;font-weight:600}
.modal .mh .x{margin-left:auto;width:32px;height:32px;border-radius:7px;border:1px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.modal .mh .x:hover{background:var(--bg)}
.modal .mb{display:flex;gap:24px;padding:24px 22px;flex-wrap:wrap}
.qr-box{width:168px;height:168px;flex:0 0 auto;border:1px solid var(--line-strong);border-radius:10px;background:#fff;padding:10px;display:flex;align-items:center;justify-content:center}
.qr-box svg{width:100%;height:100%}
.qr-data{flex:1;min-width:230px}
.drow{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.drow:last-child{border-bottom:none}
.drow .dk{color:var(--muted)}
.drow .dv{font-weight:600;text-align:right}
.modal .mf{display:flex;gap:9px;flex-wrap:wrap;align-items:center;padding:15px 22px;border-top:1px solid var(--line);background:#f7f9fc}

/* progress + log */
.prog{height:14px;background:#dde4ec;border-radius:99px;overflow:hidden;border:1px solid var(--line-strong)}
.prog>span{display:block;height:100%;background:var(--ok);border-radius:99px;transition:width .25s}
.log{background:#0f1b2d;color:#b8c4d6;border-radius:9px;padding:15px 17px;font-family:var(--mono);font-size:12.5px;line-height:1.7;max-height:280px;overflow:auto}
.log .env-log-line{white-space:pre-wrap;word-break:break-word}

.muted{color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:13px;font-weight:500;border:1px solid var(--line-strong);border-radius:99px;padding:5px 14px;background:#fff;color:var(--muted);cursor:pointer}
.chip:hover{border-color:var(--brand-bd)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.flexb{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* spinner */
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:sp .6s linear infinite;vertical-align:-1px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ===== Navegación móvil: botón hamburguesa + backdrop (ocultos en escritorio) ===== */
.menu-btn{display:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;border:1px solid var(--line-strong);background:var(--card);color:var(--ink);cursor:pointer;flex:0 0 auto;padding:0}
.menu-btn svg{width:20px;height:20px}
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(15,24,40,.45);z-index:95}
.app.nav-open .nav-backdrop{display:block}

/* ===== Responsive — solo mejora el comportamiento en otros dispositivos, no el diseño ===== */
@media(max-width:1024px){
  .view{max-width:none}
  .content{padding:22px 20px}
}

/* Tablet vertical / abajo: el sidebar (única navegación) pasa a cajón deslizable */
@media(max-width:920px){
  .app{grid-template-columns:1fr}
  .menu-btn{display:inline-flex}
  .side{position:fixed;top:0;left:0;bottom:0;width:268px;max-width:84vw;z-index:100;
        transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 18px 50px rgba(0,0,0,.35)}
  .app.nav-open .side{transform:translateX(0)}
  .topbar{padding:0 16px;gap:12px}
  .topbar .search{display:none}
  .content{padding:18px 16px}
  .g4{grid-template-columns:1fr 1fr}
  .g3,.g2{grid-template-columns:1fr}
  .g-ruc{grid-template-columns:1fr 80px auto auto}
}

/* Celulares */
@media(max-width:600px){
  .topbar{height:54px;padding:0 12px}
  .topbar h1{font-size:16.5px}
  .content{padding:14px 12px}
  .page-head{margin-bottom:16px}
  .page-head .ttl{font-size:20px}
  .card-h,.card-b{padding:13px 15px}
  .card-h input[data-filter]{width:100%!important;max-width:100%!important;flex-basis:100%}
  .g4,.g-ruc{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
  .stat .k{font-size:24px}
  .totals{gap:14px;padding:14px 16px}
  .totals .big{margin-left:0}
  .totals .big .tv{font-size:21px}
  .steps{gap:2px}
  .steps .nm{display:none}
  .steps .ln{min-width:14px;margin:0 3px}
  .acts{justify-content:flex-start}
  .btn.lg{padding:11px 16px;font-size:14px}
  .modal .mb{flex-direction:column;align-items:center;gap:16px}
  .qr-box{width:200px;height:200px}
}

/* Scroll táctil suave en tablas que desbordan */
@media(max-width:760px){
  .tbl-wrap{-webkit-overflow-scrolling:touch}
  .tbl th,.tbl td,.dt th,.dt td{padding:10px 11px}
}

summary{cursor:pointer;font-weight:500;color:var(--muted);padding:12px 0}
details[open]>summary{margin-bottom:8px}
.optional-contact,.tax-details{margin-top:14px}
.advanced-nav{padding:8px 16px}.advanced-nav summary{color:var(--sidebar-tx)}
.tax-grid{display:flex;flex-wrap:wrap;gap:18px;padding:12px 0}.tax-grid span{display:flex;gap:10px}
[hidden]{display:none!important}
.totals{background:var(--brand-soft);color:var(--ink);border:1px solid var(--brand-bd)}
.totals .tl{color:var(--muted)}.totals .big .tv{color:var(--ink)}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.input-search{display:flex;gap:6px}.input-search input{min-width:0;width:100%}.input-search button{flex-shrink:0;font-size:22px}
#customerDialog{margin:auto;width:min(640px,calc(100vw - 24px));max-height:85vh;border:1px solid var(--line);border-radius:12px;padding:24px;color:var(--ink);background:var(--card);box-shadow:0 16px 60px #0004}
#customerDialog::backdrop{background:#13243d88}.customer-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.customer-modal-head h2{font-size:20px;margin:0}
#customerSearchInput{width:100%;margin-top:6px}#customerSearchResults{display:grid;gap:8px;margin:12px 0;max-height:45vh;overflow:auto}
.customer-result{display:grid;gap:6px;width:100%;text-align:left;border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--card);color:var(--ink);cursor:pointer;overflow-wrap:anywhere}.customer-result:hover{background:var(--brand-soft)}.customer-result span{color:var(--muted);font-size:13px}
#formEmpresa .card-b{row-gap:18px}#formEmpresa small{line-height:1.4}.identity-row{align-items:end}
#smtpFields{border:0;padding:0;margin:18px 0 0;min-width:0}#smtpFields[hidden]{display:none}.mail-toggle{display:flex;align-items:center;gap:9px;font-weight:600}.mail-toggle input{width:18px;height:18px;flex:0 0 auto}.mail-help{font-size:13px;margin-top:8px}
.catalog-field{min-width:0}.catalog-search{margin-bottom:8px}.catalog-control{display:flex;min-width:0}.catalog-control select{flex:1;min-width:0;border-top-right-radius:0;border-bottom-right-radius:0}.catalog-control .catalog-code{flex:0 0 82px;width:82px;min-width:0;text-align:center;border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;color:var(--muted);background:var(--bg,#f5f7fa);padding-inline:5px}.catalog-feedback{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-top:5px;min-width:0}.catalog-feedback:has(.catalog-status:empty):has(.catalog-more[hidden]){display:none}.catalog-status{font-size:12px;line-height:1.4}.catalog-more{flex-shrink:0}.catalog-field [disabled]{opacity:.65}

.mail-intro{margin:0 0 16px;line-height:1.5}.mail-step{margin-top:20px}.mail-step h3{font-size:15px;margin:0 0 10px}.mail-step p{margin:8px 0;line-height:1.5;overflow-wrap:anywhere}.mail-step .grid{margin-top:16px}.mail-provider-help{margin:12px 0 18px;padding:12px;border:1px solid var(--line);border-radius:8px;font-size:13px}.mail-provider-help summary{cursor:pointer;font-weight:600}.mail-provider-help p{margin-top:12px}.mail-step .input-search .btn{font-size:13px}.mail-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}.mail-summary p{margin:0;overflow-wrap:anywhere}.mail-summary small{display:block;margin-top:6px;line-height:1.5}