@font-face{font-family:"Barlow Condensed";src:url("fonts/barlow-condensed-500.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("fonts/barlow-condensed-600.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("fonts/barlow-condensed-700.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-400.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-500.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-600.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-400.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-500.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}

:root{
  --bg:#12171D; --panel:#191F27; --panel2:#1F2831; --line:#2C3742; --line2:#3A4756;
  --txt:#E6EBF0; --txt2:#9AAAB9; --txt3:#6C7C8C;
  --ok:#2E8B6F; --warn:#D9A22B; --bad:#D65A4E; --info:#4E8BD6;
  --acc:#2E8B6F; --acc-soft:rgba(46,139,111,.14);
  --ui:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --r:6px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.25);
  --shadow-md:0 4px 12px rgba(0,0,0,.32);
  --shadow-lg:0 12px 32px rgba(0,0,0,.45);
  --backdrop:rgba(6,9,12,.72);
}

/* Tema claro — se activa añadiendo `data-tema="claro"` al elemento <html>. */
:root[data-tema="claro"]{
  --bg:#F5F2EC; --panel:#FFFFFF; --panel2:#F2EEE7; --line:#DAD3C5; --line2:#C2B9A8;
  --txt:#1B232C; --txt2:#4D5A6A; --txt3:#7A8595;
  --ok:#2E7D5F; --warn:#B8851F; --bad:#B53E33; --info:#3461A8;
  --acc:#2E7D5F; --acc-soft:rgba(46,125,95,.10);
  --backdrop:rgba(20,30,40,.45);
  --shadow-sm:0 1px 2px rgba(20,30,40,.08);
  --shadow-md:0 4px 12px rgba(20,30,40,.10);
  --shadow-lg:0 12px 32px rgba(20,30,40,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--body);font-size:14px;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible{
  outline:2px solid var(--acc);
  outline-offset:2px;
}
a{color:var(--acc)}
[hidden]{display:none !important}

/* ---------- controles ---------- */
.btn{background:var(--panel2);border:1px solid var(--line2);color:var(--txt);padding:7px 12px;border-radius:var(--r);font-size:13px;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--acc);color:#fff}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.btn.primary:hover{filter:brightness(1.12)}
.btn.ghost{background:none;border-color:var(--line)}
.btn.danger{border-color:var(--bad);color:#F0A79E}
.btn.danger:hover{background:rgba(214,90,78,.14);color:#fff}
.btn.sm{padding:5px 9px;font-size:12.5px}

.f{display:flex;flex-direction:column;gap:5px;grid-column:span 6}
.f.s3{grid-column:span 3}.f.s4{grid-column:span 4}.f.s6{grid-column:span 6}.f.s8{grid-column:span 8}.f.s12{grid-column:span 12}
.f label{font-family:var(--ui);font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt2)}
.f label b{color:var(--warn);font-weight:600}
.f input,.f select,.f textarea{background:#10151A;border:1px solid var(--line2);border-radius:var(--r);padding:9px 11px;width:100%;outline:none}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.f input:read-only,.f input:disabled,.f textarea:read-only,.f select:disabled{opacity:.75;background:#0D1216}
.f textarea{resize:vertical;min-height:64px}
.f .hint{font-size:11.5px;color:var(--txt3)}
.f .hint.err{color:var(--bad)}
.f input.invalid{border-color:var(--bad)} .f input.valid{border-color:var(--ok)}
.grid{display:grid;gap:12px;grid-template-columns:repeat(12,1fr)}

.badge{font-family:var(--ui);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:3px;border:1px solid currentColor;white-space:nowrap}
.b-borrador{color:var(--txt3)} .b-revision{color:var(--info)} .b-aprobada{color:var(--ok)}
.b-negada{color:var(--bad)} .b-contrato{color:var(--warn)}

.note{background:var(--panel2);border-left:2px solid var(--acc);padding:9px 12px;border-radius:0 var(--r) var(--r) 0;font-size:12.5px;color:var(--txt2);margin:12px 0 0;line-height:1.6}
.note.warn{border-left-color:var(--warn)}
.note.bad{border-left-color:var(--bad)}
.rowbtns{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;align-items:center}

/* ---------- ingreso ---------- */
.ingreso{min-height:100%;display:grid;place-items:center;padding:24px}
.ingreso .caja{width:100%;max-width:390px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px 26px 22px}
.ingreso h1{font-family:var(--ui);font-size:26px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 4px}
.ingreso p.sub{margin:0 0 20px;color:var(--txt3);font-size:13px}
.ingreso .grid{gap:14px}
.ingreso .err{color:var(--bad);font-size:13px;margin:12px 0 0;min-height:18px}

/* ---------- estructura ---------- */
.app{display:flex;flex-direction:column;height:100vh}
.topbar{display:flex;align-items:center;gap:14px;padding:9px 16px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:9px}
.brand b{font-family:var(--ui);font-weight:700;font-size:21px;letter-spacing:.06em;text-transform:uppercase}
.brand span{font-family:var(--mono);font-size:10.5px;color:var(--txt3)}
.menu{display:flex;gap:4px}
.menu button{background:none;border:0;padding:7px 12px;border-radius:var(--r);color:var(--txt2);font-family:var(--ui);font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.menu button:hover{background:var(--panel2);color:var(--txt)}
.menu button.on{background:var(--acc-soft);color:#fff}
.spacer{flex:1}
.quien{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.quien b{font-size:13px}
.quien span{font-family:var(--mono);font-size:10.5px;color:var(--txt3)}

.pagina{flex:1;overflow:auto;padding:20px 22px 60px}
.pagina h2.titulo{font-family:var(--ui);font-size:22px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filtros input,.filtros select{background:#10151A;border:1px solid var(--line2);border-radius:var(--r);padding:8px 10px;outline:none}
.filtros input:focus,.filtros select:focus{border-color:var(--acc)}

table.datos{width:100%;border-collapse:collapse;font-size:13.5px}
table.datos th{font-family:var(--ui);font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt3);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
table.datos td{padding:9px 10px;border-bottom:1px solid var(--line)}
table.datos tr:hover td{background:var(--panel)}
table.datos .num{font-family:var(--mono);font-size:12px;color:var(--txt2)}
.vacio{color:var(--txt3);text-align:center;padding:40px 10px}

/* ---------- expediente ---------- */
.steps{display:flex;background:var(--panel);border-bottom:1px solid var(--line);padding:0 16px;overflow-x:auto}
.steps button{background:none;border:0;border-bottom:2px solid transparent;padding:11px 18px 10px;display:flex;align-items:center;gap:9px;color:var(--txt3);white-space:nowrap}
.steps button .n{width:21px;height:21px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-family:var(--mono);font-size:11px;flex:none}
.steps button .t{font-family:var(--ui);font-size:15.5px;letter-spacing:.1em;text-transform:uppercase}
.steps button:hover{color:var(--txt2)}
.steps button.on{color:var(--txt);border-bottom-color:var(--acc)}
.steps button.on .n{background:var(--acc);border-color:var(--acc);color:#fff}

.workspace{flex:1;display:grid;grid-template-columns:minmax(380px,1fr) minmax(420px,1.05fr);min-height:0}
.editor{overflow:auto;padding:18px 22px 90px;min-width:0}
section.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-bottom:14px;overflow:hidden}
section.card>header{display:flex;align-items:center;gap:10px;padding:12px 16px;background:linear-gradient(var(--panel2),var(--panel));border-bottom:1px solid var(--line)}
section.card>header h3{margin:0;font-family:var(--ui);font-size:17px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
section.card>header .tag{font-family:var(--mono);font-size:10px;color:var(--txt3);border:1px solid var(--line2);padding:2px 6px;border-radius:3px;margin-left:auto}
section.card .body{padding:14px 16px 18px}
section.card .body h3.sub{font-family:var(--ui);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt2);margin:18px 0 6px;font-weight:500}

table.refs{width:100%;border-collapse:collapse;margin-top:4px}
table.refs th{font-family:var(--ui);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt2);text-align:left;padding:0 6px 6px 0;font-weight:500}
table.refs td{padding:0 6px 6px 0}
table.refs input{background:#10151A;border:1px solid var(--line2);border-radius:var(--r);padding:8px 10px;width:100%;outline:none}
table.refs input:focus{border-color:var(--acc)}

table.prod{width:100%;border-collapse:collapse;font-size:13px}
table.prod th{font-family:var(--ui);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt2);text-align:left;padding:0 5px 6px;font-weight:500}
table.prod td{padding:0 5px 6px}
table.prod input{background:#10151A;border:1px solid var(--line2);border-radius:4px;padding:7px 8px;width:100%;outline:none}
table.prod input:focus{border-color:var(--acc)}
table.prod .del{background:none;border:1px solid var(--line2);color:var(--txt3);border-radius:4px;width:28px;height:32px}
table.prod .del:hover{color:var(--bad);border-color:var(--bad)}
.totales{display:flex;gap:24px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line2)}
.totales div{display:flex;flex-direction:column;gap:2px}
.totales span{font-family:var(--ui);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3)}
.totales strong{font-family:var(--mono);font-size:18px}
.totales strong.acc{color:var(--acc)} .totales strong.bad{color:var(--bad)}

.chk{display:flex;gap:18px;align-items:center;margin-top:6px;flex-wrap:wrap}
.chk label{display:flex;align-items:center;gap:6px;font-size:13.5px}
.chk input{width:16px;height:16px;accent-color:var(--acc)}
ul.lista{list-style:none;margin:0;padding:0}
ul.lista li{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:7px}
ul.lista li input{width:17px;height:17px;accent-color:var(--acc);margin-top:1px;flex:none}
ul.lista li span{font-size:13.5px}
ul.lista li em{display:block;font-style:normal;font-size:11.5px;color:var(--txt3);margin-top:2px}
ul.lista li.ready{border-color:rgba(46,139,111,.5)}

.croquis{border:1px dashed var(--line2);border-radius:var(--r);padding:18px;text-align:center;color:var(--txt3);font-size:13px;grid-column:span 12}
.croquis img{max-width:100%;max-height:230px;border-radius:4px;display:block;margin:0 auto 10px}

.lock{display:grid;place-items:center;text-align:center;gap:12px;padding:44px 20px;color:var(--txt2)}
.lock h4{font-family:var(--ui);font-size:20px;letter-spacing:.12em;text-transform:uppercase;margin:0;color:var(--txt)}
.lock p{margin:0;max-width:460px;font-size:13.5px;line-height:1.6}
.lock .key{font-size:30px}

.resol{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--r);border:1px solid var(--line2);background:var(--panel2);margin-bottom:14px;flex-wrap:wrap}
.resol .big{font-family:var(--ui);font-size:22px;letter-spacing:.12em;text-transform:uppercase}
.resol.ok{border-color:var(--ok)} .resol.ok .big{color:var(--ok)}
.resol.no{border-color:var(--bad)} .resol.no .big{color:var(--bad)}
.resol .meta{font-family:var(--mono);font-size:11px;color:var(--txt3);line-height:1.7}

/* ---------- documento ---------- */
.preview{background:#0C1015;border-left:1px solid var(--line);overflow:auto;padding:18px;min-width:0}
.pvhead{display:flex;align-items:center;gap:8px;margin-bottom:14px;position:sticky;top:-18px;background:#0C1015;padding:4px 0 10px;z-index:5;flex-wrap:wrap}
.doctabs{display:flex;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:3px;gap:3px}
.doctabs button{background:none;border:0;padding:6px 12px;border-radius:4px;font-family:var(--ui);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3)}
.doctabs button.on{background:var(--acc);color:#fff}
.doctabs button:disabled{opacity:.35;cursor:not-allowed}

.sheet{background:#fff;color:#14181C;width:100%;max-width:820px;margin:0 auto;padding:26px 30px 34px;border-radius:3px;box-shadow:0 18px 50px rgba(0,0,0,.5);font-family:"Helvetica Neue",Arial,sans-serif;font-size:11.4px;line-height:1.5}
.sheet .hdr{display:flex;gap:14px;align-items:center;border:1px solid #222;padding:8px 12px}
.sheet .hdr .mark{font-family:var(--ui);font-weight:700;font-size:30px;letter-spacing:.05em;color:var(--acc);line-height:1}
.sheet .hdr .who{font-size:11px;line-height:1.45}
.sheet .hdr .who b{font-size:13px}
.sheet .titleband{display:flex;justify-content:space-between;gap:14px;border:1px solid #222;border-top:0;padding:7px 12px;align-items:center}
.sheet .titleband .t{font-family:var(--ui);font-size:19px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.sheet .titleband .m{font-size:10px;color:#333;line-height:1.5}
.sheet .titleband .code{font-family:var(--mono);font-size:10px}
.sheet .logo-empresa{max-height:54px;max-width:140px;object-fit:contain;flex:0 0 auto}
.sheet .titleband > div{display:flex;flex-direction:column;gap:2px}
.sheet h2{font-family:var(--ui);font-size:14.5px;letter-spacing:.13em;text-transform:uppercase;margin:16px 0 8px;padding:4px 8px;background:#EDEFF1;border-left:3px solid var(--acc)}
.sheet h3{font-family:var(--ui);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;margin:12px 0 5px}
.sheet p{margin:0 0 6px}
.sheet .row{margin:0 0 7px}
.sheet .lbl{font-weight:700}
.sheet .fld{display:inline-block;border-bottom:.8px solid #222;min-width:120px;padding:0 4px 1px;font-family:var(--mono);font-size:10.6px;white-space:pre-wrap}
.sheet .fld.w1{min-width:60px}.sheet .fld.w2{min-width:130px}.sheet .fld.w3{min-width:210px}
.sheet .fld.full{display:block;min-width:0;width:100%;min-height:15px}
.sheet .split{display:flex;gap:16px}
.sheet .split>*{flex:1}
.sheet table.g{width:100%;border-collapse:collapse;margin:5px 0 6px;font-size:10.6px}
.sheet table.g th,.sheet table.g td{border:.8px solid #444;padding:4px 6px;text-align:left;vertical-align:top}
.sheet table.g th{background:#EDEFF1;font-family:var(--ui);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.sheet table.g td{font-family:var(--mono);font-size:10.4px;height:19px}
.sheet .nota{font-size:9.6px;font-style:italic;color:#444;margin:2px 0 4px}
.sheet .legal{font-size:10.2px;text-align:justify;margin:0 0 5px}
.sheet .quote{font-size:10.4px;text-align:justify;border-left:2px solid #BBB;padding-left:9px;margin:0 0 7px}
.sheet .firmas{display:flex;gap:22px;margin:14px 0 4px}
.sheet .firmas>div{flex:1;text-align:center}
.sheet .fline{border-bottom:.8px solid #222;height:26px;margin-bottom:3px}
.sheet .fcap{font-size:9.6px;font-style:italic;color:#444}
.sheet .box{border:1px solid #444;min-height:150px;display:flex;align-items:center;justify-content:center;color:#888;font-size:10px;font-style:italic;margin:5px 0;padding:6px}
.sheet .box img{max-width:100%;max-height:280px}
.sheet .cbx{font-size:13px}
.sheet .veredicto{border:2px solid #222;padding:10px 14px;margin:8px 0 10px;display:flex;align-items:center;gap:16px}
.sheet .veredicto b{font-family:var(--ui);font-size:24px;letter-spacing:.16em;text-transform:uppercase}
.sheet .veredicto .d{font-size:10.4px;line-height:1.6}


/* ---------- documentos v3: contrato, pagaré, convenio, amortización ---------- */
.sheet h1.doctitulo{font-family:var(--ui);font-size:21px;letter-spacing:.14em;text-transform:uppercase;text-align:center;margin:18px 0 4px;font-weight:700}
.sheet p.docsub{text-align:center;font-size:10px;font-style:italic;color:#444;margin:0 0 12px}
.sheet table.g.cifras td:first-child{width:62%}
.sheet table.g.cifras td:last-child{text-align:right;font-family:var(--mono)}
.sheet table.g.amort td{text-align:right;font-family:var(--mono);font-size:9.9px;height:16px}
.sheet table.g.amort td:nth-child(1),.sheet table.g.amort td:nth-child(2){text-align:center}
.sheet table.g.amort th{font-size:10px;text-align:right}
.sheet table.g.amort th:nth-child(1),.sheet table.g.amort th:nth-child(2){text-align:center}
.sheet table.firmasg{width:100%;border-collapse:separate;border-spacing:14px 18px;margin:16px 0 4px}
.sheet table.firmasg td{vertical-align:top;text-align:center;font-size:10px;width:50%}
.sheet table.firmasg td .fline{border-bottom:.8px solid #222;height:26px;margin-bottom:3px}
.sheet .salto{break-before:page;height:0}
.sheet .pagare{border:1.5px solid #222;padding:14px 16px;margin:8px 0}
.sheet .pagareCabeza{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:.8px solid #222;padding-bottom:8px;margin-bottom:10px}
.sheet .pagareTitulo{font-family:var(--ui);font-size:22px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.sheet .pagareDatos{text-align:right;font-family:var(--mono);font-size:11px;line-height:1.6}
.sheet h3.pagareSeccion{font-family:var(--ui);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:14px 0 6px;border-bottom:.5px solid #999;padding-bottom:2px}
.sheet .firmasPagare{display:flex;gap:26px;margin:6px 0 2px}
.sheet .firmaPagare{flex:1;font-size:10px;text-align:center}
.sheet .firmaPagare .fline{border-bottom:.8px solid #222;height:24px;margin-bottom:3px}

/* marca de agua del modo demostración */
.sheet.demo{position:relative}
.sheet.demo::before{content:attr(data-marca);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-size:44px;letter-spacing:.18em;color:rgba(214,90,78,.16);transform:rotate(-28deg);
  pointer-events:none;text-align:center;line-height:1.4;padding:0 40px;z-index:3}
@media print{ .sheet.demo::before{-webkit-print-color-adjust:exact;print-color-adjust:exact} }

/* ---------- fichas de configuración y custodia ---------- */
.fichas{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.ficha{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.ficha h4{margin:0 0 4px;font-family:var(--ui);font-size:18px;letter-spacing:.08em;text-transform:uppercase}
.ficha p{margin:0 0 8px;font-size:12.5px;color:var(--txt2);line-height:1.6}
.ficha .campos{font-family:var(--mono);font-size:11px;color:var(--txt3);line-height:1.8}
.ficha .acciones{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
.plan{display:flex;gap:14px;align-items:center;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:14px 16px;margin-bottom:14px;flex-wrap:wrap}
.plan .nombre{font-family:var(--ui);font-size:22px;letter-spacing:.1em;text-transform:uppercase}
.plan .detalle{font-size:12.5px;color:var(--txt2);line-height:1.7}
.plan.malo{border-color:var(--warn)}
.mods{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.mod{font-family:var(--mono);font-size:10.5px;border:1px solid var(--line2);border-radius:3px;padding:2px 7px;color:var(--txt3)}
.mod.on{border-color:var(--ok);color:var(--ok)}

/* Iconos SVG inline (.mi) y su tamaño estándar en la barra superior. */
.mi{width:18px;height:18px;flex:0 0 auto;vertical-align:-3px}
.menu button{display:inline-flex;align-items:center;gap:7px}
.menu button .mi{opacity:.85}
.menu button.on .mi{opacity:1}
button.ghost{display:inline-flex;align-items:center;gap:6px}

/* Modal "Administrar empresas". Lista cada empresa con sus acciones
   (Editar / Eliminar) en una fila horizontal bien visible. Al estar
   las acciones dentro de un modal dedicado, no hay forma de dispararlas
   por accidente desde otra parte de la app. */
.admin-empresas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.admin-empresa{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);transition:border-color .15s}
.admin-empresa:hover{border-color:var(--line2)}
.admin-empresa-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.admin-empresa-info b{font-size:14px;color:var(--txt);font-weight:600}
.admin-empresa-info span{font-size:12.5px;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-empresa-acciones{flex:0 0 auto;display:flex;gap:6px}
.admin-footer{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}

/* Tarjeta de empresa en modo solo-información: sin acciones, solo lectura. */
.ficha.ficha-solo-info{cursor:default}

/* Modal de retirar licencia: dos opciones lado a lado (o apiladas
   en pantallas chicas), con descripción visible para que el usuario
   entienda qué hace cada una antes de elegir. */
.retirar-opciones{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.retirar-opcion{justify-content:flex-start;text-align:left;padding:14px 16px;height:auto;flex-direction:column;align-items:flex-start;gap:4px;line-height:1.4}
.retirar-opcion .ro-titulo{font-weight:600;font-size:14px;color:var(--txt)}
.retirar-opcion .ro-desc{font-size:12.5px;color:var(--txt2);font-weight:400}
.retirar-opcion:hover{border-color:var(--acc)}

/* Sección Mantenimiento en Configuración. Una lista vertical de
   acciones peligrosas, con descripción a la izquierda y el botón
   a la derecha. */
.mantenimiento{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.mant-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.mant-info{flex:1 1 auto;display:flex;flex-direction:column;gap:3px;min-width:0}
.mant-info b{font-size:13.5px;color:var(--txt);font-weight:600}
.mant-info span{font-size:12.5px;color:var(--txt2);line-height:1.5}

/* Tag "modo demostración" en la tarjeta de empresa cuando no hay
   licencia válida. Indica visualmente que esa empresa no está en
   operación, solo en modo lectura. */
.tag-demo{font-size:10.5px;letter-spacing:.06em;padding:2px 7px;border-radius:3px;background:rgba(217,162,43,.16);color:var(--warn);font-weight:600;text-transform:uppercase;margin-left:6px;vertical-align:1px}


.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 20px;color:var(--txt2);gap:8px;border:1px dashed var(--line2);border-radius:10px;background:var(--panel2);margin:18px 0}
.empty-ico{width:54px;height:54px;opacity:.55;color:var(--txt3);margin-bottom:4px}
.empty h3{margin:4px 0 0;font-family:var(--ui);font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt)}
.empty p{margin:0 0 8px;max-width:48ch;font-size:13.5px;line-height:1.55}
.empty .btn{margin-top:4px}


/* Bloque de ayuda colapsable "¿Qué información va en cada campo?".
   Aparece arriba de la solicitud, en modo editable, y se puede abrir
   o cerrar con un click. El grid interior agrupa los campos por sección. */
.ayuda-form{margin:0 0 14px;padding:12px 16px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.ayuda-form > summary{cursor:pointer;font-size:13px;color:var(--txt);user-select:none;list-style:none;display:flex;align-items:center;gap:8px}
.ayuda-form > summary::before{content:"▶";font-size:10px;color:var(--txt2);transition:transform .2s;display:inline-block;width:14px}
.ayuda-form[open] > summary::before{transform:rotate(90deg)}
.ayuda-form > summary::-webkit-details-marker{display:none}
.ayuda-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.ayuda-grid h5{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);font-weight:600}
.ayuda-grid p{margin:0 0 8px;font-size:12.5px;color:var(--txt2);line-height:1.55}
.ayuda-grid p b{color:var(--txt);font-weight:600}
.ayuda-grid code{background:var(--bg);padding:1px 5px;border-radius:3px;font-family:var(--mono);font-size:11.5px;color:var(--txt)}

/* Uploader de logo en el formulario de empresa. Muestra un preview
   a la izquierda y los botones (subir/cambiar/quitar) a la derecha. */
.logo-uploader{display:flex;gap:14px;align-items:flex-start;padding:8px;border:1px dashed var(--line2);border-radius:6px;background:var(--panel2)}
.logo-preview{flex:0 0 120px;width:120px;height:120px;display:flex;align-items:center;justify-content:center;background:var(--bg);border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.logo-preview img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.logo-empty{font-size:11px;color:var(--txt3);text-align:center;padding:0 8px;line-height:1.4}
.logo-actions{flex:1 1 auto;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.logo-actions .hint{margin-top:0}

.req{color:var(--bad);font-weight:700;margin-left:2px}
input.input-error, select.input-error, textarea.input-error{
  border-color:var(--bad) !important;
  background:rgba(214,90,78,.06) !important;
  box-shadow:0 0 0 2px rgba(214,90,78,.18) !important;
}
input.input-error:focus, select.input-error:focus, textarea.input-error:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(214,90,78,.34) !important;
}


.spinner{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px;flex:0 0 auto}
.spinner.spinner-sm{width:12px;height:12px;border-width:2px}
.spinner.spinner-lg{width:22px;height:22px;border-width:3px}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-loading{position:relative;pointer-events:none;opacity:.85}
.btn-loading .spinner{margin-right:8px}
button:disabled, .btn:disabled{cursor:not-allowed;opacity:.55}
.skeleton{background:linear-gradient(90deg, var(--panel2) 0%, var(--line) 50%, var(--panel2) 100%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:6px;color:transparent;min-height:14px;display:inline-block}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* Modal de bienvenida. Distinto de los diálogos de formulario: el header
   y el footer están dentro de la misma rejilla para que el contenido
   corto se vea bien centrado. */
.dialog-bienvenida{max-width:520px}
.dialog-bienvenida .dbody{padding:18px 22px}
.dialog-bienvenida .dbody p{color:var(--txt2);margin:0 0 12px;line-height:1.55}
.bien-lista{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:10px;color:var(--txt);font-size:13.5px}
.bien-lista ul{margin:6px 0 0;padding-left:18px;color:var(--txt2)}
.bien-lista kbd{font-family:var(--mono);font-size:12px;background:var(--panel2);border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;padding:1px 6px;margin:0 1px}
.dialog-bienvenida footer{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--line);background:var(--panel2);position:sticky;bottom:0}
.bien-nomostrar{display:inline-flex;align-items:center;gap:6px;color:var(--txt2);font-size:12.5px;cursor:pointer;user-select:none}
.bien-nomostrar input{cursor:pointer}


/* El <dialog> cuando está abierto: bloque normal con su contenido en flujo.
   El body hace scroll propio si el contenido es alto; el header y el footer
   quedan fijos arriba y abajo. Sin flex en la raíz para no interferir con
   el foco ni con los eventos de click sobre los inputs. */
dialog{border:1px solid var(--line2);background:var(--panel);color:var(--txt);border-radius:10px;padding:0;max-width:760px;width:92%;max-height:90vh;color-scheme:dark;overflow:hidden}
dialog[open]{display:block;animation:dialogIn .22s cubic-bezier(.2,.7,.3,1)}
@keyframes dialogIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
dialog::backdrop{background:var(--backdrop);cursor:pointer;animation:backdropIn .18s ease}
@keyframes backdropIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  dialog[open], dialog::backdrop{animation:none}
}
dialog::backdrop{background:var(--backdrop);cursor:pointer}
dialog>header{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:1}
dialog header h3{margin:0;font-family:var(--ui);font-size:17px;letter-spacing:.1em;text-transform:uppercase}
dialog .dbody{padding:16px 18px;max-height:calc(90vh - 130px);overflow-y:auto;overflow-x:hidden}
dialog .dfoot{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;background:var(--panel);position:sticky;bottom:0}
.hist{font-family:var(--mono);font-size:11.5px;color:var(--txt2);line-height:1.7;margin:0;padding:0;list-style:none}
.hist li{border-bottom:1px dashed var(--line);padding:6px 0}
/* Toasts: contenedor apilable arriba a la derecha. Cada toast es un <div>
   hijo con su propio tipo (toast-success, toast-error, toast-warning, toast-info).
   La barra de progreso se llena con ::after para mostrar el tiempo restante. */
.toasts{position:fixed;top:18px;right:18px;display:flex;flex-direction:column;gap:10px;z-index:200;pointer-events:none;max-width:min(420px, 92vw)}
.toast{position:relative;display:flex;align-items:flex-start;gap:10px;background:var(--panel);border:1px solid var(--line2);border-left-width:3px;border-radius:8px;padding:11px 36px 11px 14px;color:var(--txt);box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:13px;line-height:1.45;pointer-events:auto;cursor:pointer;transform:translateX(120%);opacity:0;transition:transform .28s cubic-bezier(.2,.7,.3,1), opacity .22s;overflow:hidden}
.toast.on{transform:translateX(0);opacity:1}
.toast::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:currentColor;opacity:.55;transform-origin:left center;animation:toastBar var(--toast-dur, 3500ms) linear forwards}
.toast .toast-ico{flex:0 0 auto;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;line-height:1;margin-top:1px}
.toast .toast-msg{flex:1 1 auto;min-width:0;word-wrap:break-word}
.toast .toast-x{flex:0 0 auto;width:18px;height:18px;display:flex;align-items:center;justify-content:center;opacity:.5;cursor:pointer;font-size:14px;line-height:1}
.toast .toast-x:hover{opacity:1}
.toast-success{border-left-color:var(--ok);color:var(--ok)}
.toast-success .toast-ico{color:var(--ok)}
.toast-error{border-left-color:var(--bad);color:var(--bad)}
.toast-error .toast-ico{color:var(--bad)}
.toast-warning{border-left-color:var(--warn);color:var(--warn)}
.toast-warning .toast-ico{color:var(--warn)}
.toast-info{border-left-color:var(--acc);color:var(--acc)}
.toast-info .toast-ico{color:var(--acc)}
@keyframes toastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.guardando{font-family:var(--mono);font-size:11px;color:var(--txt3)}

@media (max-width:1180px){
  .workspace{grid-template-columns:1fr}
  .preview{display:none;border-left:0}
  body.pv .editor{display:none}
  body.pv .preview{display:block}
  .mobtabs{display:flex !important}
}
.mobtabs{display:none;gap:5px}
.mobtabs button{background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r);padding:6px 10px;font-family:var(--ui);font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.mobtabs button.on{background:var(--acc);border-color:var(--acc);color:#fff}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

@page{size:A4;margin:11mm 12mm}
@media print{
  html,body{height:auto;background:#fff}
  .app,.ingreso,.toast,dialog{display:none !important}
  body>#hoja{display:block;position:static;width:100%;max-width:none;margin:0;padding:0;box-shadow:none;border-radius:0;font-size:10.6px}
  .sheet h2,.sheet table.g th{background:#EDEFF1 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sheet .hdr .mark{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .avoid{break-inside:avoid}
}


/* Centro de Administración — Etapa 8 */
.sys-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0}
.sys-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:7px;min-height:150px}
.sys-card strong{font-size:19px}
.sys-card>span{color:var(--txt2);font-size:13px;line-height:1.45}
.sys-card .btn{margin-top:auto;align-self:flex-start}
.sys-head{display:flex;gap:8px;align-items:center;color:var(--txt2)}
.sys-luz{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--warn)}
.sys-luz.ok{background:#22a06b;box-shadow:0 0 0 4px rgba(34,160,107,.10)}
.sys-luz.bad{background:#d64545;box-shadow:0 0 0 4px rgba(214,69,69,.10)}
.sys-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.sys-diag{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:12px}
.sys-diag.warn{border-color:var(--warn)}
.sys-diag-row{display:grid;grid-template-columns:18px 130px 1fr;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.sys-diag-row:first-of-type{border-top:0}
.sys-cargando{padding:22px;color:var(--txt2)}
@media(max-width:1050px){.sys-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.sys-grid{grid-template-columns:1fr}.sys-diag-row{grid-template-columns:18px 1fr}.sys-diag-row span{grid-column:2}}

.car-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0 18px}
.car-kpis>div{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:15px}
.car-kpis small{display:block;color:var(--txt2);margin-bottom:7px}.car-kpis strong{font-size:22px}
.car-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.car-balance{background:var(--acc-soft);border-radius:14px;padding:14px 18px;text-align:right}
.car-balance small{display:block;color:var(--txt2)}.car-balance strong{font-size:28px;color:var(--acc)}.car-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
@media(max-width:900px){.car-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.car-kpis{grid-template-columns:1fr}.car-head{flex-direction:column}.car-balance{text-align:left;width:100%}}

.rep-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
@media(max-width:800px){.rep-grid{grid-template-columns:1fr}}

/* ================================================================
   ARON Credit 1.0.2 — Personalización visual / White Label
   Los valores se aplican como variables inline desde app.js. Si el
   administrador restablece la marca, se mantienen los estilos ARON.
   ================================================================ */
.branding-logo-login{display:block;max-width:180px;max-height:78px;object-fit:contain;margin:0 auto 16px}
.branding-logo-top{display:block;max-width:92px;max-height:32px;object-fit:contain;flex:0 0 auto}
.branding-mensaje-login{margin:-8px 0 18px!important;color:var(--txt2)!important;font-size:12.5px!important;line-height:1.55;text-align:center}
.brand b{color:var(--brand-primary,var(--txt))}
.topbar{box-shadow:inset 0 -2px 0 var(--brand-secondary,var(--line))}
.btn.primary{background:var(--brand-button,var(--acc));border-color:var(--brand-button,var(--acc))}

.branding-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:0 0 22px}
.branding-card-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.branding-card-head>div:first-child{flex:1 1 420px}
.branding-card-head h3{font-family:var(--ui);font-size:18px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 4px}
.branding-card-head p{margin:0;color:var(--txt2);font-size:12.5px;line-height:1.55}
.branding-actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.branding-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:18px;align-items:start}
.branding-form{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.branding-colors{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px;grid-column:1/-1}
.branding-color{display:flex;flex-direction:column;gap:5px}
.branding-color label{font-family:var(--ui);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt2)}
.branding-color input[type="color"]{width:100%;height:42px;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r);padding:3px;cursor:pointer}
.branding-upload{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:3px}
.branding-upload small{color:var(--txt3)}
.branding-preview{border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:var(--bg);min-height:340px}
.branding-preview-top{height:48px;display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--panel);border-bottom:2px solid var(--brand-preview-secondary,var(--line))}
.branding-preview-top img{max-height:30px;max-width:78px;object-fit:contain}
.branding-preview-top b{font-family:var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--brand-preview-primary,var(--txt))}
.branding-preview-body{padding:24px}
.branding-preview-login{max-width:320px;margin:12px auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px}
.branding-preview-login img{display:block;max-width:135px;max-height:58px;object-fit:contain;margin:0 auto 12px}
.branding-preview-login h4{font-family:var(--ui);font-size:22px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 4px}
.branding-preview-login p{color:var(--txt2);font-size:12px;line-height:1.5;margin:0 0 14px}
.branding-preview-button{display:block;width:100%;border:0;border-radius:var(--r);padding:9px 12px;color:#fff;background:var(--brand-preview-button,var(--acc));font-weight:600;text-align:center}
.branding-powered{margin-top:12px;text-align:center;font-size:11px;color:var(--txt3)}
.branding-check{grid-column:1/-1;display:flex;align-items:center;gap:8px;color:var(--txt2);font-size:13px}
.branding-check input{width:17px;height:17px;accent-color:var(--acc)}

@media(max-width:900px){
  .branding-grid{grid-template-columns:1fr}
  .branding-colors{grid-template-columns:repeat(2,minmax(120px,1fr))}
}
@media(max-width:560px){
  .branding-colors{grid-template-columns:1fr 1fr}
  .branding-form .s6{grid-column:span 12}
}