@font-face{font-family:GkPoppins;src:url(poppins-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:GkPoppins;src:url(poppins-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:GkPoppins;src:url(poppins-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{color-scheme:light dark;
  --bg:#f4f8f7;--bg2:#e8f4f0;--card:#fff;--fg:#1f2d33;--mut:#5f6e75;--line:#e3eaec;--hov:#f1f8f6;
  --ac1:#1ABC9C;--ac2:#16A085;--ac3:#13876f;--err:#c0392b;
  --shadow:0 1px 2px rgba(16,40,36,.06),0 6px 20px rgba(16,40,36,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141c1f;--bg2:#17302b;--card:#1d272b;--fg:#e9f0f2;--mut:#9fb0b6;--line:#2f3d42;--hov:#243136;--ac3:#1ABC9C;--err:#ff8a7a;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25)}}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;background:radial-gradient(1000px 420px at 50% -120px,var(--bg2),var(--bg) 70%) no-repeat,var(--bg);
  color:var(--fg);font-family:GkPoppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.45;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.wrap{max-width:620px;margin:0 auto;padding:28px 16px 40px}
.top{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.logo{height:38px;width:auto}
.tag{font-size:12px;font-weight:600;letter-spacing:.06em;padding:3px 9px;border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--ac1),var(--ac2))}
.logo{height:48px}.logo-oscuro{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-claro{display:none}:root:not([data-theme="light"]) .logo-oscuro{display:block}}
:root[data-theme="dark"] .logo-claro{display:none}:root[data-theme="dark"] .logo-oscuro{display:block}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:26px}
h1{margin:0 0 6px;font-size:24px;font-weight:600;letter-spacing:-.01em}
.mut{color:var(--mut)}
.lead{margin:0 0 22px;font-size:14.5px}
#cargando{display:flex;align-items:center;gap:14px}
#cargando p{margin:0}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--ac1);animation:g 0.8s linear infinite}
@keyframes g{to{transform:rotate(360deg)}}
.actual{display:flex;gap:20px;align-items:center}
.avatar{position:relative;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;color:#fff;font-weight:600;
  background:linear-gradient(135deg,var(--ac1),var(--ac2));box-shadow:0 2px 10px rgba(22,160,133,.3)}
.avatar.grande{width:112px;height:112px;font-size:38px}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.quien{min-width:0;display:flex;flex-direction:column;gap:2px}
.quien strong{font-size:17px;font-weight:600;overflow-wrap:anywhere}
.quien span{font-size:13.5px;overflow-wrap:anywhere}
.acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.acciones.fin{justify-content:flex-end;margin-top:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border-radius:999px;font:inherit;
  font-size:14px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s,box-shadow .15s;white-space:nowrap}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pri{color:#fff;background:linear-gradient(135deg,var(--ac1),var(--ac2));box-shadow:0 3px 10px rgba(22,160,133,.3)}
.pri:hover{box-shadow:0 4px 16px rgba(22,160,133,.42)}
.sec{background:transparent;color:var(--fg);border-color:var(--line)}
.sec:hover{border-color:rgba(26,188,156,.55);background:var(--hov)}
.btn:focus-visible,label.btn:focus-within{outline:3px solid var(--ac1);outline-offset:2px}
.btn[aria-busy="true"]{opacity:.6;cursor:progress}
.editor{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.paso{margin:0 0 12px;font-size:13.5px}
.lienzo{position:relative;width:100%;max-width:340px;aspect-ratio:1;margin:0 auto;border-radius:16px;overflow:hidden;background:#0d1416;touch-action:none;cursor:grab}
.lienzo:active{cursor:grabbing}
.lienzo canvas{display:block;width:100%;height:100%}
.mascara{position:absolute;inset:0;pointer-events:none;border-radius:16px;
  background:radial-gradient(circle at center,transparent 0,transparent calc(50% - 1px),rgba(0,0,0,.5) 50%);}
.mascara::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}
.zoom{display:flex;align-items:center;gap:10px;max-width:340px;margin:14px auto 0;color:var(--mut)}
.zoom svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.zoom input{flex:1;accent-color:var(--ac2)}
.msg{min-height:1.4em;margin:18px 0 0;font-size:14px;font-weight:500;color:var(--ac3)}
.msg.err{color:var(--err)}
.nota{margin:6px 0 0;font-size:12.5px}
.pie{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:22px;font-size:13.5px;color:var(--mut)}
.pie a{color:var(--ac3);text-decoration:none;font-weight:500}
.pie a:hover{text-decoration:underline}
@media (max-width:520px){
  .wrap{padding:18px 16px 32px}
  .card{padding:20px}
  .actual{flex-direction:column;text-align:center}
  .quien{align-items:center}
  .acciones{justify-content:center}
  .acciones.fin{justify-content:stretch}
  .acciones.fin .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2s}.btn{transition:none}}