/* Caveat y Dancing Script — SIL Open Font License 1.1, incrustadas para que la firma
   se vea igual en cualquier equipo, sin conexión */
@font-face{font-family:'GxSignA';font-style:normal;font-weight:400;font-display:swap;src:url('../../assets/fonts/GxSignA.woff2') format('woff2')}
@font-face{font-family:'GxSignB';font-style:normal;font-weight:400;font-display:swap;src:url('../../assets/fonts/GxSignB.woff2') format('woff2')}
  :root{
    --noche:#24331A; --verde:#36521B; --hoja:#699E34; --lima:#88CC43;
    --bg:#FAF8F4; --card:#fff; --line:#e3ded4; --text:#1f2418; --muted:#6b7361;
    --err:#b3261e; --warn:#8a6100; --warnbg:#fff6e0;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--bg); color:var(--text);
    font:15px/1.45 "DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }

  /* ---------- Barra superior ---------- */
  .appbar{
    position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:16px;
    padding:10px 20px; background:var(--noche); color:#fff; flex-wrap:wrap;
  }
  .appbar h1{font-size:16px; margin:0; font-weight:700; letter-spacing:.2px}
  .appbar h1 span{display:block; font-size:11.5px; font-weight:400; opacity:.72; letter-spacing:.3px}
  .spacer{flex:1}
  .btn{
    border:0; border-radius:8px; padding:9px 15px; font-size:14px; font-weight:600;
    cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:7px;
    transition:filter .12s ease, transform .08s ease;
  }
  .btn:active{transform:translateY(1px)}
  .btn:hover{filter:brightness(1.08)}
  .btn-pdf{background:var(--lima); color:var(--noche)}
  .btn-word{background:#2b579a; color:#fff}
  .btn-ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35)}
  .btn svg{width:16px; height:16px; flex:none}

  /* ---------- Layout ---------- */
  .layout{display:grid; grid-template-columns:minmax(380px,460px) 1fr; gap:0; align-items:start}
  .form-panel{
    padding:22px 22px 80px; border-right:1px solid var(--line); background:var(--card);
    min-height:calc(100vh - 56px);
  }
  .preview-panel{padding:26px 20px 80px; overflow-x:auto}

  fieldset{border:0; margin:0 0 26px; padding:0}
  legend{
    font-size:12px; font-weight:700; letter-spacing:.9px; text-transform:uppercase;
    color:var(--verde); padding:0 0 8px; display:block; width:100%;
    border-bottom:2px solid var(--lima); margin-bottom:14px;
  }
  .fld{margin-bottom:13px}
  .fld label{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:4px}
  .req{color:var(--err); font-weight:700}
  input[type=text],input[type=email],input[type=tel],input[type=date],textarea,select{
    width:100%; padding:9px 11px; border:1.5px solid var(--line); border-radius:7px;
    font:14.5px/1.35 inherit; color:var(--text); background:#fff; font-family:inherit;
  }
  textarea{resize:vertical; min-height:62px}
  input:focus,textarea:focus{outline:0; border-color:var(--hoja); box-shadow:0 0 0 3px rgba(136,204,67,.25)}
  .invalid input,.invalid textarea{border-color:var(--err); background:#fff7f6}
  .msg{font-size:12px; margin-top:4px; display:none}
  .invalid .msg.err{display:block; color:var(--err)}
  .msg.warn{display:none; color:var(--warn); background:var(--warnbg); padding:4px 7px; border-radius:5px}
  .show-warn .msg.warn{display:block}
  .hint{font-size:11.5px; color:var(--muted); margin-top:3px}
  .prefill{margin:-6px 0 12px; font-size:12px; color:var(--verde); background:#f2f9e8; border-left:3px solid var(--lima); padding:7px 10px; border-radius:0 6px 6px 0}
  .geo{border:1.5px solid var(--line); border-radius:10px; padding:12px; margin:0 0 16px; background:#fbfdf8}
  .geo-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px}
  .geo-head strong{font-size:13px; color:var(--verde)}
  .geo-head span{font-size:11px; color:var(--muted)}
  .geo-grid{display:grid; grid-template-columns:1fr 1fr 64px; gap:7px}
  .geo-grid label{display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin-bottom:3px}
  .geo-grid input{width:100%; padding:7px 9px; border:1.5px solid var(--line); border-radius:6px; font:14px/1.3 inherit; font-family:inherit}
  .geo-grid input:focus{outline:0; border-color:var(--hoja); box-shadow:0 0 0 3px rgba(136,204,67,.22)}
  .geo-actions{display:flex; gap:7px; flex-wrap:wrap; margin-top:9px}
  .geo-actions .mini{padding:7px 11px}
  .mini[disabled]{opacity:.45; cursor:not-allowed}
  .geo-out{font-size:12px; margin-top:8px; line-height:1.5; min-height:0}
  .geo-out.ok{color:var(--verde)} .geo-out.ko{color:var(--err)} .geo-out.wait{color:var(--muted)}
  .geo-out code{background:#eef5e4; padding:1px 5px; border-radius:4px; font-size:11.5px}
  .sigtabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:11px}
  .sigtab{
    border:1.5px solid var(--line); background:#fff; border-radius:20px; padding:7px 13px; cursor:pointer;
    font:600 13px/1 inherit; font-family:inherit; color:var(--text);
  }
  .sigtab:hover{border-color:var(--hoja)}
  .sigtab.is-on{border-color:var(--hoja); background:#f2f9e8; color:var(--verde)}
  .sigpane{border:1.5px solid var(--line); border-radius:10px; padding:12px; background:#fbfdf8}
  .sigpane label{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:4px}
  .sigstyles{display:flex; gap:7px; margin-top:10px; flex-wrap:wrap}
  .sigstyle{
    border:1.5px solid var(--line); background:#fff; border-radius:8px; padding:6px 12px; cursor:pointer;
    font-size:24px; line-height:1.4; color:var(--text); white-space:nowrap; max-width:100%; overflow:hidden;
  }
  .sigstyle.is-on{border-color:var(--hoja); background:#f2f9e8}
  #sigCanvas{width:100%; height:140px; border:1.5px dashed var(--line); border-radius:8px; background:#fff; touch-action:none; cursor:crosshair}
  .sigrow{display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap}
  .sigrow .hint{margin:0}
  input[type=file]{font-size:13px; font-family:inherit}

  /* firma dentro del documento */
  .page .sigslot{width:80mm; max-height:23mm; display:flex; align-items:flex-end; overflow:hidden}
  .page .sigslot img{max-width:62mm; max-height:22mm; display:block}
  .page .sigslot .sigtxt{font-size:20pt; line-height:1.05; color:#0f1c4d; white-space:nowrap; padding:0 0 7mm 2mm}
  .daterow{display:flex; gap:7px; align-items:stretch}
  .daterow input{flex:1}
  .mini{
    border:1.5px solid var(--line); background:#fff; border-radius:7px; padding:0 11px; cursor:pointer;
    font:600 13px/1 inherit; font-family:inherit; color:var(--verde); display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  }
  .mini:hover{border-color:var(--hoja); background:#f2f9e8}
  .mini svg{width:14px; height:14px}

  .radios{display:flex; flex-wrap:wrap; gap:6px}
  .radios label{
    display:flex; align-items:center; gap:6px; margin:0; padding:7px 12px;
    border:1.5px solid var(--line); border-radius:20px; cursor:pointer;
    font-size:13.5px; font-weight:500; color:var(--text); background:#fff;
  }
  .radios input{accent-color:var(--hoja); margin:0}
  .radios label:has(input:checked){border-color:var(--hoja); background:#f2f9e8}
  .invalid .radios label{border-color:var(--err)}

  .status{
    position:sticky; bottom:0; margin:0 -22px -80px; padding:12px 22px;
    background:#fff; border-top:1px solid var(--line); font-size:13px;
  }
  .status.ok{color:var(--verde)} .status.ko{color:var(--err)}

  /* ---------- Réplica del documento ---------- */
  .page{
    width:210mm; min-height:297mm; margin:0 auto; background:#fff; color:#000;
    padding:18mm 20mm 16mm; box-shadow:0 2px 18px rgba(0,0,0,.14);
    font-family:Arial,Helvetica,sans-serif; font-size:10pt; line-height:1.32;
    position:relative;
  }
  .page .ide-logo{width:69mm; display:block; margin:0 0 5mm}
  .page h2{font-family:Calibri,Arial,sans-serif; font-size:12pt; font-weight:700; text-align:center; margin:0; line-height:1.3}
  .page .fecha{text-align:right; margin:6mm 0 4mm}
  .page p.intro{margin:0 0 2mm}
  .page table{width:100%; border-collapse:collapse; margin:0 0 3.6mm; table-layout:fixed}
  .page td{border:.5pt solid #000; padding:1.4mm 2mm; vertical-align:top; font-size:10pt; word-wrap:break-word}
  .page td.k{width:36%}
  .page td .val{white-space:pre-wrap; min-height:4.4mm; display:block}
  .page .cbline{font-size:10pt}
  .page .cb{font-family:"Segoe UI Symbol","Apple Symbols",Arial,sans-serif; font-size:11pt; margin-right:2px}
  .page .declaran{font-weight:700; margin:5mm 0 2mm}
  .page .firmas{display:flex; justify-content:space-between; margin-top:6mm}
  .page .firma{width:45%}
  .page .firma .lbl{margin-bottom:2mm}
  .page .firma .box{height:23mm; display:flex; align-items:flex-end}
  .page .gxwrap{width:46.6mm; height:26mm; overflow:hidden}
  .page .gxwrap img{width:46.6mm; display:block; margin-top:-10.4mm}
  .page .foot{position:absolute; left:0; right:0; bottom:4.5mm; text-align:center; color:#008000; font-size:12pt}
  .empty{color:#bbb}

  @media (max-width:1080px){
    .layout{grid-template-columns:1fr}
    .form-panel{border-right:0; border-bottom:1px solid var(--line); min-height:0}
    .page{width:100%; min-height:0; padding:14mm}
  }

  /* ---------- Impresión / PDF ---------- */
  @page{size:A4; margin:0}
  @media print{
    body{background:#fff}
    .appbar,.form-panel,.no-print{display:none !important}
    .layout{display:block}
    .preview-panel{padding:0; overflow:visible}
    .page{width:210mm; height:296mm; min-height:0; margin:0; box-shadow:none; padding:18mm 20mm 8mm;
          overflow:hidden; break-inside:avoid; page-break-inside:avoid; page-break-after:avoid}
    html,body{height:auto}
    .empty{color:#000}
  }