*{box-sizing:border-box}
html,body{margin:0;height:100%;height:100dvh;overflow:hidden;font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#1d2433;background:#e8eaef}
body{display:flex;flex-direction:column}
button,select,input{font:inherit}
.bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 12px;background:#fff;border-bottom:1px solid #d5d9e2}
.bar .sep{width:1px;height:24px;background:#d5d9e2;margin:0 4px}
.btn{border:1px solid #c5cad6;background:#fff;border-radius:8px;padding:6px 11px;cursor:pointer;color:#1d2433}
.btn:hover{background:#f1f3f8}
.btn.on{background:#1b3a9e;color:#fff;border-color:#1b3a9e}
.btn.primary{background:#1b3a9e;color:#fff;border-color:#1b3a9e}
.btn.primary:hover{background:#15307f}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.danger{color:#b3261e}
#ctx{display:none;gap:12px;align-items:center;padding:6px 12px;background:#f4f6fb;border-bottom:1px solid #d5d9e2;flex-wrap:wrap}
#ctx label{display:flex;gap:6px;align-items:center;color:#4a5368}
#hint{padding:5px 12px;font-size:12.5px;color:#4a5368;background:#fffbe8;border-bottom:1px solid #eee3a8}
#area{flex:1;overflow:auto;padding:20px 12px 60px;position:relative;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#pages{transform-origin:0 0}
#drop{max-width:520px;margin:12vh auto;text-align:center;background:#fff;border:2px dashed #aab3c8;border-radius:16px;padding:44px 24px}
#drop h2{margin:0 0 8px;font-size:20px}
#drop p{margin:0 0 18px;color:#5a6379}
#drop.over{border-color:#1b3a9e;background:#f0f4ff}
.pgwrap{margin:0 auto 22px;width:max-content;max-width:none}
.pghead{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#5a6379;margin-bottom:4px}
.pghead button{border:0;background:none;color:#b3261e;cursor:pointer;font-size:12px}
.pg{position:relative;background:#fff;box-shadow:0 2px 10px rgba(20,30,60,.18);margin:0 auto}
.pg canvas{display:block}
.ov{position:absolute;inset:0}
.ov.placing{cursor:crosshair}
.it{position:absolute;touch-action:none}
.it.sel{outline:1px dashed rgba(27,58,158,.55);outline-offset:3px}
.it.white{background:#fff}
.it.white.sel{background:rgba(255,255,255,.9)}
.it.text{min-width:12px;font-family:Helvetica,Arial,sans-serif;line-height:1.2;padding:0}
.it.text .tx{display:block;white-space:pre;outline:none;cursor:text;min-width:12px}
.it.text .tx:focus,.it.text .tx:focus-visible{outline:none!important;box-shadow:none}
.it.text:focus-within{outline:1px dashed rgba(27,58,158,.55);outline-offset:3px}
.it.text:focus-within>.grip,.it.text:focus-within>.rsz{display:block}
.it.sig{cursor:move}
.it.sig canvas,.it.sig img{display:block;width:100%;height:100%;pointer-events:none}
.it.mark{cursor:move}
.grip,.rsz{display:none;position:absolute;background:#1b3a9e;color:#fff;font-size:11px;line-height:1;border-radius:4px;touch-action:none}
.sel>.grip,.sel>.rsz{display:block}
.grip{left:-2px;top:-22px;padding:4px 7px;cursor:move;white-space:nowrap}
.rsz{right:-8px;bottom:-8px;width:14px;height:14px;cursor:nwse-resize;border-radius:50%}
.it.text .grip{top:-24px}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#1d2433;color:#fff;padding:9px 16px;border-radius:10px;display:none;z-index:50;max-width:90vw}
.modal{position:fixed;inset:0;background:rgba(20,26,40,.55);display:none;align-items:center;justify-content:center;z-index:40;padding:12px}
.modal.open{display:flex}
.card{background:#fff;border-radius:14px;width:min(700px,100%);max-height:94vh;overflow:auto;padding:18px}
.card h3{margin:0 0 10px}
.tabs{display:flex;gap:6px;margin-bottom:12px}
.pane{display:none}.pane.on{display:block}
#pad{display:block;width:100%;height:230px;background:#fff;border:1px solid #c5cad6;border-radius:10px;touch-action:none;cursor:crosshair;
 background-image:linear-gradient(to bottom,transparent calc(73% - 1px),#9aa3b8 calc(73% - 1px),#9aa3b8 73%,transparent 73%)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}
.ink{display:flex;gap:8px;align-items:center}
.ink label{display:flex;align-items:center;gap:4px;cursor:pointer}
.ink i{display:inline-block;width:16px;height:16px;border-radius:50%;border:1px solid #888}
.saved{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.saved .th{position:relative;border:1px solid #c5cad6;border-radius:8px;padding:4px;background:#fff;cursor:pointer}
.saved .th canvas,.saved .th img{display:block;height:44px;width:auto}
.saved .th b{position:absolute;top:-7px;right:-7px;background:#b3261e;color:#fff;border-radius:50%;width:18px;height:18px;font-size:12px;text-align:center;line-height:18px;cursor:pointer}
#upPrev{max-width:100%;border:1px solid #c5cad6;border-radius:10px;background:repeating-conic-gradient(#f3f3f3 0 25%,#fff 0 50%) 0 0/16px 16px;display:none}
small{color:#5a6379}

.w60{width:60px}
.hidden{display:none!important}
.sp{flex:1}
#brandbar{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:center;padding:8px 14px;background:#06081a;color:#a0aec0;font-size:12.5px}
#brandbar b{color:#fff;letter-spacing:.2px}
#brandbar a{color:#22C8D6;text-decoration:none;font-weight:600}
#brandbar a:hover{text-decoration:underline}
#brandbar button{background:none;border:0;color:#a0aec0;text-decoration:underline;cursor:pointer;padding:0;font-size:12.5px}
#brandbar button:hover{color:#fff}
.promo{margin-top:18px;padding-top:14px;border-top:1px solid #e1e5ee;font-size:13px;color:#5a6379;text-align:center}
.promo p{margin:0 0 6px}
.promo-tag{font-style:italic;color:#3B44A5;font-weight:600}
.promo-txt{max-width:340px;margin-left:auto!important;margin-right:auto!important}
.promo a{display:inline-block;margin-top:2px}
.promo b{color:#06081a}
.promo a{color:#5B1BB0;font-weight:600;text-decoration:none}
.promo a:hover{text-decoration:underline}
.legal{font-size:13.5px;color:#2b3448}
.legal h4{margin:12px 0 2px;font-size:13.5px}
.legal p{margin:0 0 4px}
.legalbox{max-height:52vh;overflow:auto;border:1px solid #d5d9e2;border-radius:10px;padding:10px 14px;background:#fafbfd}
.chk{display:flex;gap:8px;align-items:flex-start;margin-top:12px;cursor:pointer}
.warn{background:#fff7e0;border:1px solid #eadb9a;border-radius:8px;padding:6px 10px;font-size:12.5px;color:#5c4a00;margin:8px 0}
.row.end{justify-content:flex-end;margin-top:14px}
#undelBtn.hidden{display:none!important}

/* ---------- Iconos y etiquetas cortas/largas ---------- */
.tools{display:flex;gap:6px;align-items:center}
.btn.tool{display:inline-flex;align-items:center;gap:5px}
.btn.tool svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.zoom{display:inline-flex;align-items:center;gap:6px}
#zLbl{width:54px;text-align:center;font:inherit;color:inherit;border:1px solid #c5cad6;border-radius:8px;padding:6px 2px;background:#fff}
#zLbl:focus{outline:2px solid #1b3a9e;outline-offset:1px;border-color:#1b3a9e}
.sm{display:none}
.rotTip{display:none}
.pg,.it,.grip,.rsz,.pghead{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.it.text .tx{-webkit-user-select:text;user-select:text}
.rsz::after,.grip::after{content:"";position:absolute;inset:-8px}

/* ---------- Pantallas táctiles: objetivos más grandes ---------- */
@media (pointer:coarse){
  .rsz{width:22px;height:22px;right:-12px;bottom:-12px;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
  .rsz::after,.grip::after{inset:-12px}
  .grip{padding:6px 9px;font-size:12px;top:-30px}
  .it.text .grip{top:-32px}
  .pghead button{padding:6px 0}
  .saved .th b{width:24px;height:24px;line-height:24px;font-size:15px;top:-9px;right:-9px}
  input[type=range]{min-height:28px}
}

/* ---------- Móvil ---------- */
@media (max-width:760px),(pointer:coarse) and (max-height:500px){
  html,body{font-size:15px}
  .lg{display:none}.sm{display:inline}
  .bar{flex-wrap:nowrap;gap:6px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top))}
  .bar .sep{display:none}
  .bar .btn{padding:8px 11px}
  .zoom .btn{width:36px;padding:8px 0;text-align:center}
  #zLbl{font-size:16px;width:52px;padding:7px 2px}
  #undelBtn{font-size:13px;padding:8px 8px}
  /* Barra de herramientas inferior, al alcance del pulgar */
  .tools{position:fixed;left:0;right:0;bottom:0;z-index:30;gap:0;justify-content:space-around;background:#fff;border-top:1px solid #d5d9e2;
    box-shadow:0 -2px 10px rgba(20,30,60,.08);padding:4px 2px;padding-bottom:max(4px,env(safe-area-inset-bottom));overflow-x:auto}
  body:not(.hasdoc) .tools,body.editing .tools{display:none}
  .btn.tool{flex:1 1 0;min-width:48px;flex-direction:column;gap:2px;border:0;border-radius:10px;padding:6px 2px;font-size:11px;background:none;color:#4a5368}
  .btn.tool svg{width:22px;height:22px}
  .btn.tool.on{background:#e7ecfb;color:#1b3a9e}
  .btn.tool:hover{background:none}.btn.tool.on:hover{background:#e7ecfb}
  #hint{font-size:12.5px;padding:5px 10px}
  #ctx{flex-wrap:wrap;gap:6px 14px;padding:6px 10px}
  #ctx label{flex:none;white-space:nowrap}
  #ctx input[type=range]{width:96px}
  #ctx input[type=number]{width:64px;font-size:16px}
  #ctx select{font-size:16px}
  #ctx .btn{flex:none}
  #area{padding:12px 6px 96px}
  body:not(.hasdoc) #area{padding-bottom:20px}
  .pgwrap{margin-bottom:16px}
  #drop{margin:4vh auto;padding:30px 18px}
  #brandbar{font-size:12px;gap:4px 14px;padding:8px 10px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  #brandbar button{font-size:12px}
  body.hasdoc #brandbar{display:none}
  #toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  body:not(.hasdoc) #toast{bottom:calc(70px + env(safe-area-inset-bottom))}
  /* Modales a pantalla casi completa */
  .modal{padding:0;align-items:flex-end}
  .card{width:100%;max-height:100%;max-height:100dvh;border-radius:16px 16px 0 0;padding:14px 14px;padding-bottom:max(14px,env(safe-area-inset-bottom))}
  .tabs .btn{flex:1}
  #pad{height:200px}
  .rotTip{display:block;margin-bottom:4px}
  #paneDraw small:not(.rotTip){display:none}
  #sigModal .row.end,#legalModal .row.end{position:sticky;bottom:-14px;background:#fff;margin:10px -14px -14px;padding:10px 14px;padding-bottom:max(10px,env(safe-area-inset-bottom));border-top:1px solid #e1e5ee}
  .row.end .btn{flex:1;padding:11px}
  .legalbox{max-height:48vh}
  .ink{flex-wrap:wrap}
}
/* Teléfono en horizontal: aprovechar la altura para firmar */
@media (max-height:500px) and (orientation:landscape){
  .modal{align-items:stretch}
  .card{max-height:100dvh;border-radius:0;padding:8px 12px}
  .card h3{display:none}
  .tabs{margin-bottom:6px}
  #pad{height:calc(100dvh - 150px);min-height:140px}
  .rotTip{display:none}
  #paneDraw small{display:none}
  .warn{margin:4px 0;padding:4px 8px}
  .row{margin:6px 0}
  .row.end{margin-top:6px}
}
@media (max-height:500px) and (orientation:landscape) and (pointer:coarse){
  .bar{padding-top:6px;padding-bottom:6px}
  #hint{display:none}
  .btn.tool{flex-direction:row;gap:5px;padding:5px 4px;font-size:12px}
  .btn.tool svg{width:18px;height:18px}
  #area{padding-bottom:64px}
}

/* Botones de abrir archivo: el input real queda encima, invisible, y recibe el toque directamente */
.filebtn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center}
.filebtn input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;margin:0;padding:0}

/* Marca Smartday: colores originales (cian #22C8D6 → azul #1595CB → índigo #3B44A5 → morado #640AA4), versión plana */
:root{color-scheme:only light} /* la app es clara: evita que el navegador la oscurezca a la fuerza */
.barlogo{width:24px;height:24px;flex:none;margin-right:2px}
.promologo{display:block;height:48px;width:auto;margin:0 auto 10px}
.bbname{display:inline-flex;align-items:center;gap:6px}
.bbname img{width:18px;height:18px}
@media (max-width:359px){.barlogo{display:none}}

#paneUp small{display:block}
#sensHelp{margin:-2px 0 8px}
.upTip{margin-top:6px}

/* Firma por foto: recuadro grande para elegir la imagen */
.upDrop{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;cursor:pointer;
  border:2px dashed #8f9bd6;border-radius:12px;background:#f3f5fd;padding:18px 12px;margin-bottom:10px;color:#1b3a9e;transition:background .15s,border-color .15s}
.upDrop:hover,.upDrop.over{background:#e7ecfb;border-color:#1b3a9e}
.upDrop svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.upMain{font-weight:600;font-size:15px;word-break:break-all}
.upSub{font-size:12.5px;color:#4a5368}
.upDrop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.upDrop.has{flex-direction:row;flex-wrap:wrap;justify-content:center;padding:10px 12px;gap:4px 10px;border-style:solid;border-width:1px;border-color:#c5cad6;background:#fff;color:#1d2433}
.upDrop.has svg{width:22px;height:22px;color:#1b3a9e}
.upDrop.has .upMain{font-size:14px}
.upDrop.has .upSub{color:#1b3a9e;text-decoration:underline}
#upOpts.hidden{display:none}