/* IraSinadura — sistema visual moderno.
   Paleta SEGURA para daltonismo rojo-verde: el estado nunca se distingue solo
   por color; siempre color + icono + texto.
     Firmado -> azul · Pendiente -> ámbar · Rechazado -> rojo + icono X · Espera -> pizarra
*/
:root{
  /* Superficie fría (no crema) para un aire más actual */
  --ink:#131a24; --ink-soft:#5a6779;
  --paper:#eef1f6; --panel:#ffffff;
  --line:#e4e8f0; --line-strong:#cdd5e1;

  --azul:#1b59b3; --azul-700:#13407f; --azul-800:#0f3366;
  --azul-soft:#e9f1fc; --azul-50:#f4f8fe;
  --ambar:#b46710; --ambar-soft:#fbecd3;
  --rechazo:#b23b34; --rechazo-soft:#f8e5e3;
  --espera:#64748b; --espera-soft:#eceff4;

  --radius:14px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(20,30,46,.05);
  --shadow:0 1px 3px rgba(20,30,46,.06), 0 10px 28px -12px rgba(20,30,46,.18);
  --shadow-lg:0 2px 6px rgba(20,30,46,.07), 0 24px 50px -18px rgba(20,30,46,.30);
  --ring:0 0 0 4px rgba(27,89,179,.18);
  --maxw:1000px;

  --display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.55;
  background:
    radial-gradient(1200px 480px at 50% -260px, rgba(27,89,179,.10), transparent 70%),
    var(--paper);
  background-attachment:fixed;
}
h1,h2,h3,.wordmark{font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.15}
h1{font-size:1.85rem; margin:0 0 .25em}
h2{font-size:1.3rem; margin:1.5em 0 .5em}
h3{font-size:1.05rem; margin:1.2em 0 .4em}
a{color:var(--azul); text-decoration:none}
a:hover{text-decoration:underline}
p{margin:.5em 0}
::selection{background:rgba(27,89,179,.16)}

/* --- Cabecera translúcida --- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.78); backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar .inner{max-width:var(--maxw); margin:0 auto; padding:.7rem 1.15rem; display:flex; align-items:center; gap:1rem}
.wordmark{font-size:1.2rem; color:var(--ink); display:flex; align-items:center; gap:.55rem; font-weight:700}
.wordmark .seal{
  width:28px; height:28px; border-radius:9px; transform:rotate(-6deg);
  background:linear-gradient(140deg,var(--azul),var(--azul-800));
  display:inline-grid; place-items:center; color:#fff; font:700 .9rem/1 var(--body);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 8px -2px rgba(27,89,179,.6);
}
.topbar nav{margin-left:auto; display:flex; align-items:center; gap:.35rem; font-size:.92rem}
.topbar nav a{color:var(--ink-soft); padding:.4rem .6rem; border-radius:8px}
.topbar nav a:hover{color:var(--ink); background:var(--azul-soft); text-decoration:none}
.topbar nav .who{color:var(--ink-soft); padding-left:.4rem; border-left:1px solid var(--line); margin-left:.2rem}

/* --- Contenedor --- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:1.6rem 1.15rem 4rem}
.grid{display:grid; gap:1.1rem}
@media (min-width:760px){ .grid.cols-2{grid-template-columns:1fr 1fr} }

/* --- Tarjetas --- */
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.25rem 1.35rem; box-shadow:var(--shadow);
}
.card + .card{margin-top:1.1rem}
.card h2:first-child,.card h3:first-child{margin-top:0}
.card.link{transition:transform .14s ease, box-shadow .14s ease}
.card.link:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.muted{color:var(--ink-soft); font-size:.9rem}
.eyebrow{display:inline-block; font:700 .7rem/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--azul); margin-bottom:.5rem}

/* --- Botones --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer;
  font:600 .95rem/1 var(--body); padding:.7rem 1.1rem; border-radius:var(--radius-sm);
  border:1px solid var(--azul); background:var(--azul); color:#fff;
  box-shadow:0 1px 2px rgba(20,30,46,.12); transition:transform .12s, box-shadow .12s, background .15s;
}
.btn:hover{background:var(--azul-700); text-decoration:none; transform:translateY(-1px); box-shadow:var(--shadow)}
.btn:active{transform:translateY(0)}
.btn svg{width:16px; height:16px}
.btn.secondary{background:var(--panel); color:var(--azul); border-color:var(--line-strong)}
.btn.secondary:hover{background:var(--azul-soft); border-color:var(--azul)}
.btn.ghost{background:transparent; border-color:var(--line-strong); color:var(--ink); box-shadow:none}
.btn.ghost:hover{background:#fff; border-color:var(--azul); color:var(--azul-700)}
.btn.danger{background:var(--panel); color:var(--rechazo); border-color:var(--rechazo); box-shadow:none}
.btn.danger:hover{background:var(--rechazo-soft)}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.btn-row{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem}

/* --- Formularios --- */
label{display:block; font-weight:600; font-size:.88rem; margin:1rem 0 .35rem; color:var(--ink)}
input[type=text],input[type=email],input[type=password],input[type=file],input[type=number],select,textarea{
  width:100%; padding:.7rem .8rem; border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); font:inherit; background:#fff; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
input::placeholder,textarea::placeholder{color:#9aa6b6}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--azul); box-shadow:var(--ring)}
input[type=file]{padding:.5rem .6rem; background:var(--azul-50)}
.hint{font-size:.82rem; color:var(--ink-soft); margin-top:.3rem}

/* --- Campo de código OTP (grande, monoespaciado, moderno) --- */
.otp-field{
  display:block; margin:.2rem auto .2rem; width:min(14rem,100%);
  font-family:var(--mono); font-size:1.7rem; font-weight:500;
  text-align:center; letter-spacing:.5em; text-indent:.5em;
  padding:.7rem .4rem; color:var(--ink); background:#fff;
  border:1.5px solid var(--line-strong); border-radius:var(--radius);
  box-shadow:inset 0 1px 2px rgba(20,30,46,.05); caret-color:var(--azul);
}
.otp-field:focus{outline:none; border-color:var(--azul); box-shadow:var(--ring)}
.otp-wrap{text-align:center}

/* --- Avisos --- */
.alert{border-radius:var(--radius-sm); padding:.8rem 1rem; margin:.9rem 0; font-size:.92rem;
  border:1px solid; display:flex; gap:.55rem; align-items:flex-start}
.alert.error{background:var(--rechazo-soft); border-color:var(--rechazo); color:#73221d}
.alert.info{background:var(--azul-soft); border-color:#a9caf0; color:var(--azul-800)}
.alert.warn{background:var(--ambar-soft); border-color:#e6b878; color:#6e3f06}

/* --- Insignias de estado (color + icono + texto) --- */
.badge{display:inline-flex; align-items:center; gap:.38rem; font:600 .78rem/1 var(--body);
  padding:.36rem .6rem; border-radius:999px; border:1px solid}
.badge svg{width:14px; height:14px}
.badge.signed{background:var(--azul-soft); color:var(--azul-700); border-color:#aacaf0}
.badge.pending{background:var(--ambar-soft); color:#6e3f06; border-color:#e6b878}
.badge.rejected{background:var(--rechazo-soft); color:#73221d; border-color:#e0a59f}
.badge.waiting,.badge.draft{background:var(--espera-soft); color:#3b4654; border-color:#c4cdd9}

/* --- Hoja de ruta del circuito de firma (ELEMENTO DISTINTIVO) --- */
.route{list-style:none; margin:.6rem 0; padding:0}
.route li{position:relative; padding:0 0 1.5rem 2.9rem; animation:routeIn .4s ease both}
.route li:nth-child(2){animation-delay:.05s} .route li:nth-child(3){animation-delay:.1s}
.route li:nth-child(4){animation-delay:.15s} .route li:nth-child(5){animation-delay:.2s}
.route li:before{content:""; position:absolute; left:15px; top:6px; bottom:-6px; width:2px;
  background:repeating-linear-gradient(var(--line-strong) 0 6px, transparent 6px 11px)}
.route li.signed:before{background:var(--azul)}
.route li:last-child:before{display:none}
.route .node{position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; font:700 .85rem/1 var(--body); color:#fff;
  background:var(--espera); box-shadow:0 0 0 4px var(--paper), 0 0 0 5px var(--line-strong)}
.route .node svg{width:16px; height:16px}
.route .node.signed{background:var(--azul); box-shadow:0 0 0 4px var(--paper), 0 0 0 5px var(--azul)}
.route .node.pending{background:var(--ambar); box-shadow:0 0 0 4px var(--paper), 0 0 0 5px var(--ambar);
  animation:pulse 2s ease-in-out infinite}
.route .node.rejected{background:var(--rechazo); box-shadow:0 0 0 4px var(--paper), 0 0 0 5px var(--rechazo)}
.route .who{font-weight:600}
.route .meta{font-size:.82rem; color:var(--ink-soft); margin-top:.15rem}
@keyframes routeIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px var(--paper), 0 0 0 5px var(--ambar)}
  50%{box-shadow:0 0 0 4px var(--paper), 0 0 0 5px var(--ambar), 0 0 0 9px rgba(180,103,16,.22)}}

/* --- Listas de peticiones --- */
.req-list{list-style:none; margin:0; padding:0}
.req-list li{display:flex; align-items:center; gap:.9rem; padding:.95rem .4rem; border-radius:10px;
  border-bottom:1px solid var(--line); transition:background .12s}
.req-list li:hover{background:var(--azul-50)}
.req-list li:last-child{border-bottom:0}
.req-list .title{font-weight:600}
.req-list .spacer{margin-left:auto}

/* --- Código/CSV monoespaciado --- */
.mono,code,.csv{font-family:var(--mono); font-size:.92em}
.csv{background:var(--azul-soft); color:var(--azul-800); padding:.12rem .4rem; border-radius:6px; font-weight:500}

/* --- Colocación de firmas (PDF.js) --- */
.placer{display:grid; gap:1rem}
@media (min-width:860px){ .placer{grid-template-columns:240px 1fr; align-items:start} }
.signer-chips{display:flex; flex-direction:column; gap:.45rem}
.chip{display:flex; align-items:center; gap:.55rem; padding:.6rem .7rem; border-radius:10px;
  border:1px solid var(--line-strong); background:#fff; cursor:pointer; font-size:.9rem; text-align:left;
  transition:border-color .12s, background .12s}
.chip:hover{border-color:var(--azul)}
.chip.active{border-color:var(--azul); background:var(--azul-soft); box-shadow:inset 0 0 0 1px var(--azul)}
.chip .order{width:22px; height:22px; border-radius:50%; background:var(--azul); color:#fff;
  display:grid; place-items:center; font:700 .74rem/1 var(--body); flex:none}
.chip .placed{margin-left:auto; font-size:.76rem; color:var(--azul-700); font-weight:600}
.pdf-stage{border:1px solid var(--line-strong); border-radius:var(--radius); background:#e9edf3; overflow:auto; max-height:76vh}
.page-wrap{position:relative; margin:14px auto; width:max-content; box-shadow:var(--shadow); border-radius:4px; overflow:hidden}
.page-wrap canvas{display:block}
.sigbox{position:absolute; border:2px dashed var(--azul); background:rgba(27,89,179,.12);
  border-radius:6px; cursor:move; font:600 .72rem/1 var(--body); color:var(--azul-700);
  box-shadow:0 0 0 9999px rgba(27,89,179,.02)}
.sigbox .lbl{position:absolute; top:-1.35rem; left:0; white-space:nowrap; background:var(--azul);
  color:#fff; padding:.15rem .4rem; border-radius:6px; font-size:.68rem}
.sigbox .handle{position:absolute; right:-7px; bottom:-7px; width:14px; height:14px;
  background:var(--azul); border:2px solid #fff; border-radius:50%; cursor:nwse-resize}
.pager{display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; font-size:.9rem}

/* --- Pie --- */
footer.legal{max-width:var(--maxw); margin:0 auto; padding:1.6rem 1.15rem 3rem;
  color:var(--ink-soft); font-size:.82rem; line-height:1.6}
footer.legal a{color:var(--azul)}

@media (max-width:520px){
  h1{font-size:1.55rem}
  .topbar nav{gap:.1rem; font-size:.85rem}
  .topbar nav a{padding:.35rem .45rem}
  .card{padding:1.1rem 1.05rem}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }

/* --- Widget ALTCHA (verificación anti-robot, autohospedado) --- */
altcha-widget{
  --altcha-border-width:1px;
  --altcha-border-radius:10px;
  --altcha-color-base:#fff;
  --altcha-color-border:var(--line-strong);
  --altcha-color-border-focus:var(--azul);
  --altcha-color-text:var(--ink);
  --altcha-color-footer-bg:transparent;
  --altcha-max-width:100%;
  display:block; margin-top:1rem; font-family:var(--body); font-size:.9rem;
}

/* --- Botón "Ver más / Ver menos" en listas largas --- */
.more-btn{ margin-top:.7rem; padding:.45rem .8rem; font-size:.9rem; }
.collapse-hidden{ display:none !important; }

/* --- Barra de filtros/búsqueda (admin) --- */
.filterbar{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.6rem 0 .2rem; }
.filterbar input, .filterbar select{ width:auto; min-width:0; margin:0; padding:.5rem .65rem;
  font-size:.9rem; border:1px solid var(--line-strong); border-radius:9px; background:#fff; }
.filterbar input[type="search"]{ flex:1 1 220px; }
.filterbar select{ flex:0 0 auto; }
.filterbar .btn{ padding:.5rem .8rem; }
@media (max-width:540px){ .filterbar input, .filterbar select, .filterbar .btn{ flex:1 1 100%; } }