/* Portal «Firma electrónica» de Ser.Con.T — panel del cliente. Paleta y letras del sitio: azul #0f2a4a, verde #1fa855, papel #f5f3ee. */
:root{--navy:#0f2a4a;--navy-deep:#081b30;--navy-2:#16375f;--accent:#1fa855;--accent-ink:#146b38;--paper:#f5f3ee;--card:#fff;--ink:#16202b;--mute:#5c6b78;--line:#e4e0d6;--warn:#a65a00;--warn-bg:#fff3dc;--bad:#a8261b;--bad-bg:#fde8e5;--ok-bg:#e3f6ea;--info-bg:#eaf1f8;--radius:16px;--side:268px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 Inter,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}
a{color:var(--accent-ink)}
.oculto{display:none!important}
h1{font:800 1.75rem/1.15 Archivo,Inter,sans-serif;margin:0 0 .35rem;color:var(--navy);letter-spacing:-.015em;text-wrap:balance}
h2{font:700 1.1rem/1.25 Archivo,Inter,sans-serif;margin:0 0 .35rem;color:var(--navy)}
.sub{color:var(--mute);margin:0 0 1.2rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.3rem;box-shadow:0 1px 0 rgba(15,42,74,.04)}
.campo{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.95rem}
.campo label{font-weight:600;font-size:.86rem}
input[type=email],input[type=password],input[type=text],input[type=tel],select{font:inherit;padding:.75rem .85rem;border:1.5px solid #cfd6dd;border-radius:10px;background:#fff;color:var(--ink);width:100%;min-width:0}
input:focus,select:focus,button:focus-visible,a:focus-visible,.zona:focus-visible{outline:3px solid rgba(31,168,85,.45);outline-offset:1px;border-color:var(--accent)}
.clave-caja{position:relative}.clave-caja input{padding-right:3.4rem}
.ojo{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);background:none;border:0;padding:.5rem .6rem;color:var(--mute);cursor:pointer;font:600 .8rem Inter,sans-serif}
.btn{font:700 1rem Inter,sans-serif;border:0;border-radius:999px;padding:.8rem 1.5rem;background:var(--accent);color:#fff;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px}
.btn:hover{background:#1a9449}.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.sec{background:#fff;color:var(--navy);border:1.5px solid #cfd6dd}.btn.sec:hover{background:#f3f6f9}
.btn.peligro{background:#fff;color:var(--bad);border:1.5px solid #e5b9b4}.btn.peligro:hover{background:var(--bad-bg)}
.btn.bloque{width:100%}.btn.chico{padding:.5rem 1rem;font-size:.9rem;min-height:40px}
.msg{margin:.2rem 0 1rem;padding:.7rem .9rem;border-radius:10px;font-size:.92rem;display:none}
.msg.err{display:block;background:var(--bad-bg);color:var(--bad)}.msg.ok{display:block;background:var(--ok-bg);color:var(--accent-ink)}.msg.info{display:block;background:var(--info-bg);color:var(--navy)}
.nota{font-size:.84rem;color:var(--mute);margin-top:1rem}
.chip{display:inline-block;font-weight:700;font-size:.78rem;padding:.25rem .7rem;border-radius:999px;white-space:nowrap}
.chip.vigente{background:var(--ok-bg);color:var(--accent-ink)}.chip.por_vencer{background:var(--warn-bg);color:var(--warn)}.chip.vencida{background:var(--bad-bg);color:var(--bad)}
.codigo{font:700 1.6rem 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.35em;text-align:center}

/* ---------- pantallas de ingreso ---------- */
.top{background:var(--navy);color:#fff;padding:.85rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{font:800 1.35rem Archivo,Inter,sans-serif;color:#fff;text-decoration:none;letter-spacing:-.01em}.brand .dot{color:#3ddc84}
.top a.volver{color:#cfe0f2;text-decoration:none;font-size:.9rem}.top a.volver:hover{text-decoration:underline}
.auth{max-width:560px;margin:0 auto;padding:1.6rem 1rem 2.5rem}
.suma{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:.2rem 0 1.1rem}
.suma .pregunta{font:700 1.25rem 'JetBrains Mono',ui-monospace,monospace;background:#f1f1ef;border-radius:999px;padding:.55rem 1.1rem;min-width:7.5rem;text-align:center;color:var(--navy)}
.suma .igual{font-weight:700;color:var(--mute)}
.suma input{width:9rem;border-radius:999px;background:#f1f1ef;border-color:#f1f1ef;text-align:center}
.suma .otra{background:none;border:0;cursor:pointer;color:var(--accent);padding:.4rem;border-radius:50%;display:inline-flex}.suma .otra:hover{background:#e8f6ee}.suma .otra svg{width:26px;height:26px}
.enlaces{margin-top:1.1rem;font-size:.92rem;text-align:center}.enlaces a{cursor:pointer}
.ayuda-wa{margin-top:1.3rem;text-align:center;font-size:.92rem;color:var(--mute)}

/* ---------- panel ---------- */
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.lateral{background:var(--navy);color:#dbe6f2;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:1.1rem .9rem;gap:.4rem;overflow-y:auto}
.lateral .brand{padding:.2rem .6rem 1rem;font-size:1.45rem}
.usuario{position:relative;margin-bottom:.8rem}
.usuario>button{width:100%;display:flex;align-items:center;gap:.75rem;text-align:left;background:var(--navy-2);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:.65rem .75rem;color:#fff;cursor:pointer;font:inherit}
.usuario>button:hover{background:#1b4272}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;font:800 .95rem Archivo,sans-serif;display:grid;place-items:center;flex:none}
.usuario .quien{min-width:0;flex:1}.usuario .quien b{display:block;font-size:.88rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.usuario .quien small{display:block;font-size:.74rem;color:#9fb4cb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-usuario{position:absolute;left:0;right:0;top:calc(100% + .35rem);background:#fff;color:var(--ink);border-radius:12px;box-shadow:0 12px 30px rgba(8,27,48,.35);padding:.35rem;z-index:30}
.menu-usuario button{display:block;width:100%;text-align:left;background:none;border:0;padding:.65rem .8rem;border-radius:8px;font:inherit;font-size:.92rem;cursor:pointer;color:var(--ink)}.menu-usuario button:hover{background:#f1f4f7}
.grupo{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:#7f97b2;padding:.8rem .8rem .3rem;font-weight:700}
.nav a{display:flex;align-items:center;gap:.75rem;padding:.7rem .8rem;border-radius:11px;color:#dbe6f2;text-decoration:none;font-weight:500;font-size:.95rem;position:relative;cursor:pointer}
.nav a svg{width:20px;height:20px;flex:none;opacity:.85}
.nav a:hover{background:rgba(255,255,255,.07)}
.nav a.activo{background:rgba(255,255,255,.12);color:#fff;font-weight:700}
.nav a.activo::before{content:"";position:absolute;left:-.9rem;top:.55rem;bottom:.55rem;width:4px;border-radius:0 4px 4px 0;background:#3ddc84}
.nav .tag{margin-left:auto;font-size:.68rem;font-weight:700;background:var(--accent);color:#fff;border-radius:999px;padding:.1rem .5rem}
.pie-lateral{margin-top:auto;font-size:.76rem;color:#8ea5bf;padding:.8rem .8rem 0;line-height:1.45}
.principal{padding:1.7rem clamp(1rem,3vw,2.4rem) 3rem;max-width:1080px;width:100%}
.barra-movil{display:none}
.vista{animation:entra .22s ease-out}
@keyframes entra{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* resumen */
.hero{display:flex;gap:1.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;border-radius:20px;padding:1.6rem 1.7rem;margin-bottom:1.2rem}
.hero h1{color:#fff;margin:0 0 .25rem}.hero p{margin:0;color:#c3d3e5}
.atajos{display:flex;gap:.8rem;flex-wrap:wrap}
.atajo{display:flex;flex-direction:column;gap:.55rem;align-items:flex-start;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:1rem 1.2rem;color:#fff;text-decoration:none;min-width:165px;cursor:pointer;font:inherit;text-align:left}
.atajo:hover{background:rgba(255,255,255,.17)}.atajo svg{width:26px;height:26px;color:#3ddc84}.atajo b{font:700 1rem Archivo,sans-serif}.atajo small{color:#b6c9de;font-size:.8rem}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-bottom:1rem}
.dato{display:flex;flex-direction:column;gap:.15rem}.dato .num{font:800 2rem/1 Archivo,sans-serif;color:var(--navy)}.dato .et{color:var(--mute);font-size:.88rem}
.fila-corta{display:flex;justify-content:space-between;gap:.8rem;padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.92rem;flex-wrap:wrap}.fila-corta:last-child{border-bottom:0}

/* tarjetas de firma */
.firma{margin-bottom:1rem}
.firma header{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem;flex-wrap:wrap;margin-bottom:.7rem}
.vence{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}.vence b{font:800 1.6rem Archivo,Inter,sans-serif;color:var(--navy)}.vence span{color:var(--mute);font-size:.92rem}
.riel{height:9px;background:#ece9e1;border-radius:99px;overflow:hidden;margin:.6rem 0 1.1rem}.riel i{display:block;height:100%;background:var(--accent);border-radius:99px}.riel i.por_vencer{background:#e0a100}.riel i.vencida{background:#c4392c}
.acciones{display:flex;gap:.6rem;flex-wrap:wrap}
.panel-clave{margin-top:1rem;padding:1rem;border:1px dashed #b9c4cf;border-radius:12px;background:#fafbfc}.panel-clave p{margin:.2rem 0 .7rem;font-size:.92rem;color:var(--mute)}
.clave-vista{font:700 1.15rem 'JetBrains Mono',ui-monospace,monospace;background:#fff;border:1.5px solid var(--accent);border-radius:10px;padding:.8rem 1rem;word-break:break-all;color:var(--navy);user-select:all}

/* firmador */
.pasos{display:flex;gap:.5rem;margin:0 0 1.2rem;flex-wrap:wrap}
.paso{display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:.9rem;color:var(--mute);padding:.4rem .9rem .4rem .45rem;border-radius:999px;background:#ece9e1}
.paso i{font-style:normal;width:26px;height:26px;border-radius:50%;background:#cfd6dd;color:#fff;display:grid;place-items:center;font-size:.82rem;font-weight:800}
.paso.activo{background:var(--navy);color:#fff}.paso.activo i{background:var(--accent)}.paso.hecho i{background:var(--accent)}.paso.hecho{color:var(--accent-ink)}
.zona{border:2px dashed #b9c4cf;border-radius:18px;background:#fbfaf7;padding:2.2rem 1rem;text-align:center;cursor:pointer;transition:background .15s,border-color .15s}
.zona:hover,.zona.sobre{background:#eef8f1;border-color:var(--accent)}
.zona svg{width:44px;height:44px;color:var(--accent)}.zona b{display:block;font:700 1.05rem Archivo,sans-serif;color:var(--navy);margin:.5rem 0 .2rem}.zona small{color:var(--mute)}
.archivos{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}
.archivo{display:flex;align-items:center;gap:.8rem;border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem;background:#fff}
.archivo svg{width:28px;height:28px;color:#c4392c;flex:none}.archivo .n{flex:1;min-width:0}.archivo .n b{display:block;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.archivo .n small{color:var(--mute);font-size:.8rem}
.x{background:none;border:0;color:var(--mute);cursor:pointer;font-size:1.2rem;padding:.3rem .5rem;border-radius:8px}.x:hover{background:var(--bad-bg);color:var(--bad)}
.opciones-firma{display:grid;gap:.6rem;margin-top:1.1rem}
.opcion{display:flex;gap:.75rem;align-items:flex-start;border:1.5px solid var(--line);border-radius:14px;padding:.8rem 1rem;cursor:pointer;background:#fff}
.opcion input{margin-top:.3rem;accent-color:var(--accent);width:18px;height:18px}.opcion.sel{border-color:var(--accent);background:#f0faf3}.opcion b{display:block}.opcion small{color:var(--mute)}
.visor{background:#e7e5df;border-radius:16px;padding:1rem;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.nav-pag{display:flex;align-items:center;gap:.6rem;font-weight:600}
.nav-pag button{background:#fff;border:1.5px solid #cfd6dd;border-radius:50%;width:38px;height:38px;cursor:pointer;font-size:1.1rem;color:var(--navy)}.nav-pag button:disabled{opacity:.4;cursor:default}
.lienzo{position:relative;width:100%;max-width:640px;background:#fff;box-shadow:0 4px 18px rgba(15,42,74,.18);touch-action:none;cursor:crosshair;line-height:0}
.lienzo canvas{width:100%;height:auto;display:block}
.sello{position:absolute;border:2px solid var(--accent);background:rgba(31,168,85,.14);border-radius:4px;cursor:grab;display:flex;align-items:center;justify-content:center;text-align:center;font:600 11px/1.25 Inter,sans-serif;color:#0b5d33;padding:2px;touch-action:none;overflow:hidden}
.sello:active{cursor:grabbing}
.pista{font-size:.88rem;color:var(--mute);text-align:center;margin:0}
.fin-ok{text-align:center;padding:1.5rem 1rem}.fin-ok .tilde{width:64px;height:64px;border-radius:50%;background:var(--ok-bg);color:var(--accent);display:grid;place-items:center;margin:0 auto .8rem}.fin-ok .tilde svg{width:34px;height:34px}

/* documentos */
.cuota{margin-bottom:1rem}.barra{height:10px;background:#ece9e1;border-radius:99px;overflow:hidden;margin:.45rem 0}.barra i{display:block;height:100%;background:var(--accent)}
.doc{display:flex;align-items:center;gap:.9rem;border:1px solid var(--line);border-radius:14px;padding:.75rem 1rem;background:#fff;margin-bottom:.6rem;flex-wrap:wrap}
.doc svg.pdf{width:30px;height:30px;color:#c4392c;flex:none}.doc .n{flex:1;min-width:180px}.doc .n b{display:block;overflow:hidden;text-overflow:ellipsis;word-break:break-word}.doc .n small{color:var(--mute);font-size:.82rem}
.vacio{text-align:center;color:var(--mute);padding:2rem 1rem}
.buscar{margin-bottom:1rem}

/* ventanas */
.fondo{position:fixed;inset:0;background:rgba(8,27,48,.55);display:grid;place-items:center;padding:1rem;z-index:100}
.ventana{background:#fff;border-radius:20px;padding:1.5rem;width:100%;max-width:440px;box-shadow:0 20px 50px rgba(8,27,48,.4);max-height:92vh;overflow:auto}
.ventana h2{font-size:1.25rem}

@media (max-width:900px){
  .app{display:block}
  .lateral{position:fixed;inset:0 auto 0 0;width:min(86vw,320px);z-index:60;transform:translateX(-102%);transition:transform .22s ease;height:100%}
  .lateral.abierto{transform:none;box-shadow:0 0 40px rgba(0,0,0,.45)}
  .velo{position:fixed;inset:0;background:rgba(8,27,48,.5);z-index:55}
  .barra-movil{display:flex;align-items:center;justify-content:space-between;gap:.8rem;background:var(--navy);color:#fff;padding:.7rem 1rem;position:sticky;top:0;z-index:40}
  .barra-movil button{background:rgba(255,255,255,.12);border:0;color:#fff;border-radius:10px;width:42px;height:42px;font-size:1.3rem;cursor:pointer}
  .nav a.activo::before{left:-.9rem}
  .principal{padding-top:1.2rem}
  .hero{padding:1.2rem}.atajo{flex:1;min-width:140px}
}
@media (max-width:480px){h1{font-size:1.45rem}.card{padding:1.1rem 1rem}.suma input{width:100%}.ventana{padding:1.2rem}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* formulario de renovación */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:0 .9rem}
.dos .campo{min-width:0}
@media (max-width:560px){.dos{grid-template-columns:1fr}}

/* nombres de archivo largos (sin espacios) no deben salirse de las ventanas ni de las tarjetas */
.ventana{overflow-x:hidden}
.ventana h2,.ventana p,.ventana b,.ventana small{overflow-wrap:anywhere;word-break:break-word}
.doc .n b,.archivo .n b{overflow-wrap:anywhere}

/* ---------- ingreso con huella ---------- */
.huella-caja{margin-bottom:.4rem}
.btn-huella svg{width:26px;height:26px;flex:none}
.o-sep{display:flex;align-items:center;gap:.8rem;margin:1.1rem 0 .9rem;color:var(--mute);font-size:.82rem}
.o-sep::before,.o-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.hk-icono{width:64px;height:64px;border-radius:50%;background:var(--ok-bg);color:var(--accent-ink);display:grid;place-items:center;margin:0 auto 1rem}.hk-icono svg{width:34px;height:34px}
.ventana .hk-icono+h2,.ventana .hk-icono+h2+.sub{text-align:center}
.hk-lista{display:flex;flex-direction:column;gap:.6rem;margin:0 0 1rem}
.hk-fila{display:flex;align-items:center;justify-content:space-between;gap:.8rem;border:1px solid var(--line);border-radius:12px;padding:.7rem .85rem}.hk-fila div{min-width:0}.hk-fila small{display:block;color:var(--mute);font-size:.8rem}