:root{
  --bg:#e6e6e6;--chrome:#f2f2f2;--panel:#fafafa;--line:#cfcfcf;--text:#1e1e1e;--mute:#686868;
  --stage:#ffffff;--accent:#d42a20;--hover:rgba(0,0,0,.05);
  --amber:#e8981c;--blue:#3d85d8;--green:#27a567;--grey:#8a8a8a;
  color-scheme:light;box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#202020;--chrome:#2a2a2a;--panel:#2f2f2f;--line:#454545;--text:#ebebeb;--mute:#9d9d9d;--stage:#0e0e0e;--accent:#ff4d40;--hover:rgba(255,255,255,.06);color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#202020;--chrome:#2a2a2a;--panel:#2f2f2f;--line:#454545;--text:#ebebeb;--mute:#9d9d9d;--stage:#0e0e0e;--accent:#ff4d40;--hover:rgba(255,255,255,.06);color-scheme:dark}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);overscroll-behavior:none}
body{height:100%;margin:0;background:var(--bg);color:var(--text);font:14px/1.45 'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-variant-numeric:tabular-nums;overflow:hidden}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
/* altura visible real en móviles (la barra de Safari no tapa la app) */
@supports (height:100dvh){ body{height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))} }
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#app{height:100%;display:flex;flex-direction:column}

/* barra superior */
.top{flex:none;height:52px;display:flex;align-items:center;gap:10px;padding:0 12px;background:var(--chrome);border-bottom:1px solid var(--line);overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.brand{font-weight:700;font-stretch:112%;letter-spacing:-.01em;display:flex;align-items:center;gap:9px;font-size:15px}
.brand .logo{height:30px;width:auto;display:block}
.brand span{padding-left:10px;border-left:1px solid var(--line)}
/* el logo es negro sobre transparente: en modo oscuro se invierte */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .logo{filter:invert(1)} }
:root[data-theme="dark"] .logo{filter:invert(1)}
.sp{flex:1}
.btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:7px;border:1px solid var(--line);background:var(--panel);font-size:13px;font-weight:500;flex:none}
.btn:hover{background:var(--hover)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger{color:var(--accent)}
select{height:34px;border:1px solid var(--line);border-radius:7px;background:var(--panel);padding:0 8px;font-size:13px;flex:none}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--panel);flex:none}
.seg button{height:32px;padding:0 10px;font-size:13px;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--text);color:var(--bg)}
.who{display:flex;align-items:center;gap:6px;color:var(--mute);font-size:12.5px}
.cname{height:34px;width:15ch;border:1px solid transparent;border-radius:7px;background:transparent;font-weight:650;font-size:15px;padding:0 8px}
.cname:hover{border-color:var(--line)}
.cstat[data-s="en_trabajo"]{box-shadow:inset 3px 0 0 var(--grey)}
.cstat[data-s="en_revision"]{box-shadow:inset 3px 0 0 var(--amber)}
.cstat[data-s="aprobada"]{box-shadow:inset 3px 0 0 var(--green)}
.vers{display:flex;align-items:center;gap:2px;padding-left:6px;border-left:1px solid var(--line)}
.vpill{height:30px;min-width:38px;padding:0 8px;border-radius:6px;font-weight:650;font-size:13px;color:var(--mute)}
.vpill:hover{background:var(--hover)}
.vpill.on{background:var(--text);color:var(--bg)}
.vers .btn{margin-left:6px}
.cmpbar{display:flex;align-items:center;gap:6px}
.cmpbar input[type=range]{width:110px}
.zoom{display:flex;align-items:center;gap:2px}
#zlab{min-width:46px;text-align:right;color:var(--mute);font-size:12.5px}
.panelbtn{display:none}

/* vista entrega */
.ov{flex:1;overflow:auto;padding:28px clamp(16px,4vw,48px) 48px}
.proj{max-width:1400px;margin:0 auto 28px}
.projname{display:block;width:100%;border:0;border-bottom:2px solid transparent;background:transparent;font-size:clamp(28px,4.2vw,46px);line-height:1.1;font-weight:650;font-stretch:120%;letter-spacing:-.02em;padding:0 0 4px;margin:0 0 10px}
.projname:hover{border-bottom-color:var(--line)}
.projname:focus{outline:none;border-bottom-color:var(--accent)}
.projname[readonly]:hover,.cname[readonly]:hover{border-color:transparent}
.projname[readonly],.cname[readonly]{cursor:default}
.pnamerow{display:flex;align-items:center;gap:8px}
.pnamerow .projname{flex:0 1 auto;min-width:0;max-width:100%;width:auto;field-sizing:content}
.btn.rename{padding:0 8px;color:var(--mute)}
.btn.rename svg{width:18px;height:18px}
.projmeta{display:flex;flex-wrap:wrap;gap:8px 24px;color:var(--mute);align-items:center}
.projmeta b{color:var(--text);font-weight:650}
.due{display:flex;align-items:center;gap:8px}
.due input{height:32px;border:1px solid var(--line);border-radius:7px;background:var(--panel);padding:0 8px}
.bar{display:flex;gap:3px;margin-top:18px;height:6px}
.bar i{flex:1;border-radius:2px;background:var(--line)}
.bar i[data-s="en_revision"]{background:var(--amber)}
.bar i[data-s="aprobada"]{background:var(--green)}
.grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:22px}
.card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.thumb{position:relative;display:block;aspect-ratio:16/10;background:var(--stage);width:100%}
.thumb img,.thumb svg.annot,.fthumb svg.annot{width:100%;height:100%;object-fit:contain;display:block}
.vtag{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:650;padding:3px 7px;border-radius:5px}
.otag{position:absolute;right:10px;top:10px;background:var(--amber);color:#1a1a1a;font-size:12px;font-weight:650;padding:3px 8px;border-radius:5px}
.meta{padding:12px 14px 14px;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;min-width:0}
.r1 select{max-width:52%}
.r1{display:flex;align-items:center;gap:10px}
.r1 h3{margin:0;font-size:15px;font-weight:620;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r2{color:var(--mute);font-size:13px;display:flex;gap:12px;flex-wrap:wrap}
.r2 .cl{color:var(--green)}
.card.new{align-items:center;justify-content:center;gap:6px;border-style:dashed;min-height:240px;color:var(--mute);text-align:center;padding:20px;background:transparent}
.card.new:hover{background:var(--hover)}
.card.new .plus{font-size:36px;font-weight:300;line-height:1;color:var(--text)}
.card.new b{color:var(--text);font-weight:600}
.card.new small{max-width:26ch;font-size:13px}
.hint{max-width:1400px;margin:28px auto 0;color:var(--mute);font-size:13px}

/* vista lienzo */
.review{flex:1;min-height:0;display:grid;grid-template-columns:108px minmax(0,1fr) 340px;position:relative}
.strip{overflow-y:auto;padding:10px 8px;border-right:1px solid var(--line);background:var(--chrome);display:flex;flex-direction:column;gap:8px}
.sitem{position:relative;display:block;text-align:left;border-radius:6px;padding:4px;border:2px solid transparent;width:100%}
.sitem:hover{background:var(--hover)}
.sitem.on{border-color:var(--accent)}
.sitem img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;border-radius:3px;background:var(--stage)}
.sname{display:block;font-size:11.5px;margin-top:4px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbadge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;border-radius:10px;background:var(--amber);color:#1a1a1a;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.sv{position:absolute;left:8px;top:8px;font-size:10px;font-weight:650;background:rgba(0,0,0,.62);color:#fff;padding:1px 4px;border-radius:3px}
.stage{position:relative;background:var(--stage);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;min-width:0}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}
.stage[data-tool="move"] #cv,.stage.space #cv{cursor:grab}
.stage.panning #cv{cursor:grabbing}
.stage[data-tool="pin"] #cv{cursor:copy}
.stage[data-tool="text"] #cv{cursor:text}
.stage[data-tool="select"] #cv{cursor:default}
.stage[data-tool="select"] .pin{cursor:move;touch-action:none}
#pins{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pin{position:absolute;pointer-events:auto;width:30px;height:30px;margin:-30px 0 0 0;border-radius:50% 50% 50% 0;background:var(--st);color:#fff;font-weight:700;font-size:12.5px;display:grid;place-items:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.55);transform-origin:0 100%}
.pin.done{opacity:.8;text-decoration:line-through;text-decoration-thickness:2px}
.pin.sel{transform:scale(1.18);box-shadow:0 0 0 3px var(--accent),0 2px 8px rgba(0,0,0,.6);z-index:2}
.toolbar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:5px;background:var(--chrome);border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.28);max-width:calc(100% - 16px);overflow-x:auto;scrollbar-width:none;z-index:3}
.tb{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;flex:none}
.tb:hover{background:var(--hover)}
.tb.on{background:var(--text);color:var(--bg)}
.sw{width:24px;height:24px;border-radius:50%;background:var(--c);margin:0 3px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.sw.on{box-shadow:0 0 0 2px var(--chrome),0 0 0 4px var(--text)}
.tsep{width:1px;height:24px;background:var(--line);margin:0 6px;flex:none}
.toolbar select{height:36px}
.cmph{position:absolute;width:0;pointer-events:none;z-index:2}
.cmph::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 4px rgba(0,0,0,.55)}
.knob{position:absolute;left:-19px;top:50%;width:38px;height:38px;margin-top:-19px;border-radius:50%;background:#fff;color:#222;display:grid;place-items:center;pointer-events:auto;cursor:ew-resize;box-shadow:0 2px 8px rgba(0,0,0,.45);touch-action:none;font-weight:700;font-size:15px}
.cmph .ca,.cmph .cb{position:absolute;top:10px;font-size:12px;font-weight:700;background:rgba(0,0,0,.66);color:#fff;padding:3px 7px;border-radius:4px;white-space:nowrap}
.cmph .ca{right:10px}.cmph .cb{left:10px}
#board{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bref{position:absolute;pointer-events:auto;cursor:move;box-shadow:0 4px 14px rgba(0,0,0,.35);background:#fff;touch-action:none}
.bref img{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none;-webkit-user-drag:none;user-select:none}
.bref.sel{outline:2px solid var(--accent);outline-offset:2px}
.rh{position:absolute;right:-8px;bottom:-8px;width:16px;height:16px;border-radius:4px;background:#fff;border:2px solid var(--accent);cursor:nwse-resize;display:none}
.bref.sel .rh{display:block}
.rtag{position:absolute;left:6px;top:6px;background:var(--st,#555);color:#fff;font-size:11px;font-weight:700;padding:2px 6px;border-radius:4px;pointer-events:none}
.rtag:empty{display:none}
#refbar,#selbar{position:absolute;z-index:4;display:flex;gap:4px;align-items:center;padding:4px;background:var(--chrome);border:1px solid var(--line);border-radius:9px;box-shadow:0 4px 16px rgba(0,0,0,.28)}
#refbar select{height:30px;font-size:12.5px}
#refbar .btn,#selbar .btn{height:30px;padding:0 9px}
#selbar{max-width:calc(100% - 16px);overflow-x:auto;scrollbar-width:none}
#selbar .sw{width:24px;height:24px;flex:none}
.sbinfo{font-size:12px;color:var(--mute);padding:0 6px;white-space:nowrap}
@media (max-width:600px){ .sbinfo{display:none} #selbar .sw{width:22px;height:22px;margin:0 2px} }
.pdt b{font-size:15px;font-weight:650}
#txtIn{position:absolute;z-index:5;min-width:200px;background:rgba(0,0,0,.45);border:1px dashed currentColor;border-radius:4px;font-weight:500;font-size:16px;padding:4px 6px;resize:none;margin:-4px 0 0 -6px}

/* panel */
.panel{display:flex;flex-direction:column;min-height:0;background:var(--panel);border-left:1px solid var(--line)}
.tabs{display:flex;border-bottom:1px solid var(--line);flex:none}
.tab{flex:1;height:46px;font-weight:620;font-size:13.5px;color:var(--mute);border-bottom:2px solid transparent}
.tab.on{color:var(--text);border-bottom-color:var(--accent)}
.tab span{font-weight:500;color:var(--mute);margin-left:4px}
.pbody{flex:1;min-height:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.filters{display:grid;gap:8px}
.filters .seg{display:grid;grid-template-columns:repeat(3,1fr)}
.filters select{width:100%}
.chk{display:flex;gap:8px;align-items:center;color:var(--mute);font-size:13px}
.plist{display:flex;flex-direction:column}
.pi{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:10px 6px;border-bottom:1px solid var(--line);width:100%}
.pi:hover{background:var(--hover)}
.pi.done .ptx,.pi.done .pn,.pdt.done b,.pdt.done .pn{text-decoration:line-through;text-decoration-thickness:2px}
.pi.done .ptx{color:var(--mute)}
.pn{flex:none;width:26px;height:26px;border-radius:50% 50% 50% 0;background:var(--st);color:#fff;font-weight:700;font-size:12px;display:grid;place-items:center}
.pn.big{width:36px;height:36px;font-size:15px}
.pt{flex:1;min-width:0;display:grid;gap:2px}
.pcat{font-size:12px;color:var(--mute);font-weight:620}
.pcat i{font-style:normal;font-weight:500;margin-left:6px}
.ptx{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.av{flex:none;width:26px;height:26px;border-radius:50%;background:var(--u);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}
.empty{color:var(--mute);text-align:center;padding:28px 10px;font-size:13.5px;line-height:1.55}
.empty.small{padding:8px 0;text-align:left}
.pd{display:flex;flex-direction:column;gap:12px;min-height:100%}
.pdh{display:flex;align-items:center;margin:-6px -6px 0}
.pdt{display:flex;align-items:center;gap:10px}
.pdt select{flex:1}
.seg.status{display:grid;grid-template-columns:repeat(3,1fr)}
.seg.status button{padding:0 4px;font-size:12px}
.seg.status button.on{background:var(--st);color:#fff}
.fld{display:grid;gap:4px;font-size:12.5px;color:var(--mute)}
.fld select{width:100%;color:var(--text)}
.pmeta{margin:0;color:var(--mute);font-size:12.5px}
.thread{display:flex;flex-direction:column;gap:14px;flex:1}
.msg{display:flex;gap:10px}
.mh{display:flex;gap:8px;align-items:baseline;font-size:12.5px}
.mh span{color:var(--mute)}
.mt{font-size:13.5px;margin-top:2px;overflow-wrap:anywhere}
.compose{position:sticky;bottom:-14px;background:var(--panel);padding:10px 0 14px;border-top:1px solid var(--line);display:grid;gap:8px}
.compose textarea{width:100%;border:1px solid var(--line);border-radius:7px;background:var(--bg);padding:8px 10px;resize:vertical;min-height:62px}
.crow{display:flex;align-items:center}
.prefs{display:flex;gap:8px;flex-wrap:wrap}
.prefs .rimg img{width:76px;height:76px;object-fit:cover;border-radius:5px;display:block}
.prefs .rchip{font-size:12px;border:1px solid var(--line);border-radius:6px;padding:6px 8px;color:inherit;text-decoration:none}
.refadd{display:flex;gap:8px}
.refadd input{flex:1;min-width:0;height:34px;border:1px solid var(--line);border-radius:7px;background:var(--bg);padding:0 10px}
.drop{display:flex;align-items:center;gap:10px;border:1px dashed var(--line);border-radius:8px;padding:14px;color:var(--mute);text-align:left;font-size:13px;width:100%}
.drop:hover{background:var(--hover)}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ref{margin:0;border:1px solid var(--line);border-radius:7px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.rimg{display:block;width:100%}
.rimg img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.rurl{display:grid;gap:4px;padding:12px;aspect-ratio:1;align-content:center;text-decoration:none;color:inherit;background:var(--bg);overflow-wrap:anywhere}
.rurl b{font-size:14px}
.rurl span{font-size:11px;color:var(--mute);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ref figcaption{display:flex;align-items:center;gap:4px;padding:6px}
.ref figcaption .ppbtn{flex:1;min-width:0;height:28px;font-size:12px;padding:0 8px;justify-content:flex-start;overflow:hidden}
.x{width:28px;height:28px;border-radius:6px;font-size:18px;color:var(--mute);flex:none}
.x:hover{background:var(--hover)}
.x svg{width:16px;height:16px}
#refbar .btn svg{width:16px;height:16px}
.lbinfo{margin-left:12px;color:#aaa;font-size:12.5px}

/* capas */
.lb{position:fixed;inset:0;z-index:50;background:rgba(12,12,12,.94);display:flex;flex-direction:column;color:#fff;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.lbbar{display:flex;gap:8px;align-items:center;padding:10px 14px}
.lbbar .btn{background:#2a2a2a;border-color:#4a4a4a;color:#fff}
.lbbody{flex:1;min-height:0;display:grid;padding:0 14px 14px;gap:10px}
.lbbody.side{grid-template-columns:1fr 1fr}
.lbbody img{width:100%;height:100%;object-fit:contain;min-height:0;min-width:0}
.dropov{position:fixed;inset:0;z-index:40;pointer-events:none;display:grid;place-items:center;background:rgba(212,42,32,.10);border:3px dashed var(--accent)}
.dropov span{background:var(--panel);color:var(--text);padding:12px 18px;border-radius:8px;font-weight:620;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.toast{position:fixed;left:50%;top:calc(64px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:60;background:var(--text);color:var(--bg);padding:8px 14px;border-radius:7px;font-size:13px;font-weight:500;pointer-events:none}

.pclose{display:none;width:44px;flex:none;font-size:24px;line-height:1;color:var(--mute)}
/* en táctil, el zoom va con los dedos y «Ver todo» está en la barra de herramientas */
@media (pointer:coarse){ body.incanvas .top .zoom{display:none} }
/* panel de correcciones recogido en móvil y tableta táctil (mismo criterio que PANEL_MQ en app.js) */
@media (max-width:900px), (pointer:coarse) and (max-width:1400px){
  .pclose{display:block}
  .review{grid-template-columns:108px minmax(0,1fr)}
  .panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,92vw);z-index:20;transform:translateX(100%);transition:transform .2s ease,visibility .2s;visibility:hidden}
  .review.panel-open .panel{transform:none;visibility:visible;box-shadow:-8px 0 24px rgba(0,0,0,.25)}
  .panelbtn{display:inline-flex}
}
@media (max-width:900px){
  .review{grid-template-columns:minmax(0,1fr)}
  .strip{display:none}
  body.incanvas .who,#zlab{display:none}
  .back span,.vers .btn span,.cmpbar .btn span{display:none}
  .lbbody.side{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- app real: login, proyectos, usuario ---------- */
.view-main{flex:1;overflow:auto;padding:28px clamp(16px,4vw,48px) 48px}
.login-wrap{flex:1;display:grid;place-items:center;padding:24px}
.login{max-width:400px;width:100%;display:grid;gap:18px}
.login h1{font-size:clamp(36px,6vw,54px);line-height:1;font-weight:650;font-stretch:120%;letter-spacing:-.02em;margin:0;display:flex;align-items:center;gap:14px}
.login-logo{width:180px;height:auto;display:block;margin-bottom:4px}
.login p{margin:0;color:var(--mute);max-width:36ch}
.login .btn{height:46px;font-size:15px;justify-content:center;width:100%}
.login .err{color:var(--accent);font-size:13.5px;margin:0}
.ptitle{font-size:clamp(28px,4.2vw,46px);line-height:1.1;font-weight:650;font-stretch:120%;letter-spacing:-.02em;margin:0 0 10px}
.pcard{padding:18px;gap:6px;text-decoration:none;color:inherit;min-height:150px;justify-content:flex-end}
.pcard:hover{background:var(--hover)}
.pcard h3{margin:0;font-size:18px;font-weight:620;font-stretch:108%}
.pcard span{color:var(--mute);font-size:13.5px}
.pcard small{color:var(--mute);font-size:12px}
.pcard.arch{opacity:.6}
.pgroup{max-width:1400px;margin:48px auto 14px;padding-top:22px;border-top:1px solid var(--line);font-size:15px;font-weight:620;color:var(--mute)}
.atag{align-self:flex-start;font-size:11.5px;font-weight:650;border:1px solid var(--line);border-radius:5px;padding:2px 6px}
.newp{padding:18px;gap:10px;justify-content:flex-start;background:transparent;border-style:dashed}
.newp b{font-size:15px}
.newp input[type=text]{height:38px;border:1px solid var(--line);border-radius:7px;background:var(--panel);padding:0 10px}
.newp .btn{justify-content:center}
.me{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute)}
.thumb.empty{display:grid;place-items:center;color:var(--mute);font-size:13.5px;padding:16px;text-align:center}
.r1 .x svg{width:16px;height:16px}
.danger-zone{max-width:1400px;margin:36px auto 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.danger-zone .btn{height:38px;min-width:190px;justify-content:center;gap:8px}
.hidden-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
@media (max-width:900px){ .me .mname{display:none} }

/* ---------- almacenamiento (solo admins) ---------- */
.usage{display:inline-flex;align-items:center;gap:8px}
.meter{display:inline-block;width:90px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.meter>i{display:block;height:100%;background:var(--green)}
.meter[data-l="mid"]>i{background:var(--amber)}
.meter[data-l="hi"]>i{background:var(--accent)}
.psize{position:absolute;right:12px;bottom:19px;font-size:10px;font-weight:500;color:var(--mute);opacity:.8;white-space:nowrap}

/* ---------- favoritos ---------- */
.pw{position:relative;display:flex}
.pw>.pcard{flex:1;padding-right:66px}
.star{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:7px;display:grid;place-items:center;color:var(--mute)}
.star:hover{background:var(--hover);color:var(--text)}
.star.on{color:var(--amber)}
.star.on svg{fill:currentColor}
.pw.fav{cursor:grab}
.pw.dragging{opacity:.4}
.pw.drop-b::before,.pw.drop-a::after{content:"";position:absolute;top:0;bottom:0;width:3px;border-radius:2px;background:var(--accent)}
.pw.drop-b::before{left:-12px}
.pw.drop-a::after{right:-12px}

/* ---------- sugerencias ---------- */
.ideas{max-width:860px;margin-left:auto;margin-right:auto}
.newidea{display:grid;gap:8px;margin-bottom:24px}
.newidea textarea{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:10px 12px;resize:vertical;min-height:80px}
.newidea small{color:var(--mute);font-size:12px}
.ilist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.idea{display:flex;gap:12px;align-items:flex-start;padding:14px 4px;border-bottom:1px solid var(--line)}
.idea.closed{opacity:.6}
.ib{flex:1;min-width:0;display:grid;gap:3px}
.ib p{margin:0;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.ib small{color:var(--mute);font-size:12px}
.ih{font-size:15px;font-weight:620;margin:32px 0 8px;color:var(--mute)}
.istat[data-s="nueva"]{box-shadow:inset 3px 0 0 var(--amber)}
.istat[data-s="prevista"]{box-shadow:inset 3px 0 0 var(--blue)}
.istat[data-s="hecha"]{box-shadow:inset 3px 0 0 var(--green)}
.istat[data-s="descartada"]{box-shadow:inset 3px 0 0 var(--grey)}
.top .ideabtn{text-decoration:none;color:inherit}
@media (max-width:600px){ .top .ideabtn span{display:none} .top .rename{display:none} }
@media (max-width:600px){
  body.incanvas .top{gap:6px;padding:0 8px}
  body.incanvas .top .zoom, body.incanvas .top .me, body.incanvas .top [data-act="theme"]{display:none}
  body.incanvas .cname{width:7ch;padding:0 2px}
  body.incanvas .cstat{max-width:104px;padding:0 4px}
  body.incanvas .top .btn.ghost.ideabtn{padding:0 6px}
  body.incanvas .vers{padding-left:4px}
  body.incanvas .vers .btn{margin-left:2px;padding:0 8px}
  body.incanvas .cmpbar .btn{padding:0 8px}
  body.incanvas .panelbtn{padding:0 8px}
  body.incanvas .panelbtn span{display:none}
}
@media (max-width:600px){ .idea{flex-wrap:wrap} .ib{flex-basis:calc(100% - 38px)} .idea .istat{margin-left:38px} }
a.btn{text-decoration:none;color:inherit}

/* ---------- novedades ---------- */
.vlink{color:var(--mute);text-decoration:none;border-bottom:1px solid var(--line)}
.vlink:hover{color:var(--text)}
.vnew{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;background:var(--accent);color:#fff;font-size:11px;font-weight:650;vertical-align:1px}
.rel{padding:18px 0;border-top:1px solid var(--line)}
.rel header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rel header b{font-size:13px;color:var(--mute);font-weight:650}
.rel h2{margin:0;font-size:17px;font-weight:650;flex:1;min-width:12ch}
.rel time{color:var(--mute);font-size:12.5px}
.rel ul{margin:10px 0 0;padding-left:20px;display:grid;gap:5px}
.rel li{font-size:14px}

/* ---------- vínculo de dibujos con correcciones ---------- */
.tlink{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;margin-left:4px;border-radius:14px;background:var(--st);color:#fff;font-size:12px;font-weight:600;white-space:nowrap;flex:none}
#selbar select{height:30px;font-size:12.5px;max-width:150px}

/* ---------- portada de proyectos ---------- */
.pcard .pcover{display:block;margin:-18px -66px 8px -18px;height:96px;background:var(--pc);overflow:hidden;position:relative}
.pcard .pcover img{width:100%;height:100%;object-fit:cover;display:block}
.pcard{justify-content:flex-start}
.pw .star{background:rgba(255,255,255,.75);color:#555}
.pw .star.on{color:var(--amber)}
.coverctl{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:16px;color:var(--mute);font-size:13px}
.coverctl>span{margin-right:6px}
.coverctl .sw{width:22px;height:22px}
.coverctl .btn{margin-left:8px;height:30px}
.coverctl .btn svg{width:16px;height:16px}

/* ---------- rondas (una por versión subida) ---------- */
.rounds{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:0 0 8px;font-size:12.5px;color:var(--mute)}
/* cabecera fija del panel: rondas + volver a correcciones / eliminar */
.psticky{position:sticky;top:-14px;margin:-14px -14px 0;padding:12px 14px 6px;background:var(--panel);border-bottom:1px solid var(--line);z-index:3}
.psticky .pdh{margin:0 -6px}
.rounds>span:first-child{margin-right:4px}
.rounds .btn{height:30px;padding:0 8px;font-size:12.5px}
.vtagc{font-style:normal;font-size:11px;font-weight:650;padding:0 5px;border-radius:4px;border:1px solid var(--line);color:var(--mute)}
.vtagc.cur{border-color:var(--text);color:var(--text)}
.later{align-self:flex-start;font-size:12.5px;color:var(--mute);text-decoration:underline;padding:2px 0}

/* ---------- vista completa ---------- */
.viewsw{display:inline-flex;gap:0;margin-top:16px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.viewsw .btn{border:0;border-radius:0;height:32px}
.viewsw .btn.on{background:var(--text);color:var(--bg)}
.fwrap{max-width:100%;overflow-x:auto;padding-bottom:12px}
.ftable{display:grid;grid-template-columns:170px repeat(var(--cols),minmax(280px,320px));gap:14px;align-items:start;width:max-content;margin:0 auto}
.fhead{font-size:12.5px;font-weight:650;color:var(--mute);padding:0 2px}
.frow{display:flex;flex-direction:column;gap:8px;position:sticky;left:0;background:var(--bg);padding:6px 8px 6px 0;z-index:1;align-self:stretch}
.frow b{font-size:15px;font-weight:620;overflow-wrap:anywhere}
.frow select{max-width:100%}
.fcell{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:8px;min-width:0}
.fcell.empty{background:transparent;border-style:dashed;min-height:80px}
.fthumb{position:relative;display:block;aspect-ratio:16/10;background:var(--stage);border-radius:5px;overflow:hidden}
.fthumb img{width:100%;height:100%;object-fit:contain;display:block}
.fmeta{color:var(--mute);font-size:12px}
.fpins{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto}
.fpins li{display:flex;gap:8px;align-items:flex-start}
.fpins li>div{min-width:0;font-size:13px}
.fpins li b{font-size:11.5px;color:var(--mute);font-weight:620}
.fpins p{margin:2px 0 0;overflow-wrap:anywhere}
.fpins p i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--mute);margin-right:4px}
.fpins li.done .pn,.fpins li.done p{text-decoration:line-through;color:var(--mute)}
.fcell .mute{color:var(--mute);font-size:12.5px;margin:0}
.frefs{display:flex;flex-wrap:wrap;gap:6px}
.frefs img{width:56px;height:56px;object-fit:cover;border-radius:4px;border:1px solid var(--line)}
.frefs a{font-size:12px;color:var(--mute)}
@media (max-width:600px){ .ftable{grid-template-columns:110px repeat(var(--cols),minmax(240px,260px))} }
.viewclean{margin-left:8px;height:34px;vertical-align:top;margin-top:16px}
.viewclean svg{width:16px;height:16px}

/* ---------- cursores de otras personas ---------- */
#cursors{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4}
.ocur{position:absolute;left:0;top:0;display:flex;align-items:flex-start;gap:2px;transition:transform .08s linear;will-change:transform}
.ocur svg{fill:var(--u);stroke:#fff;stroke-width:1.2;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));flex:none}
.ocur span{margin-top:14px;background:var(--u);color:#fff;font-size:11px;font-weight:600;padding:1px 6px;border-radius:4px;white-space:nowrap}
.tb:disabled{opacity:.35;cursor:default}

/* ---------- grosor del trazo ---------- */
.tb.wd i{display:block;width:18px;height:var(--w);min-height:1px;border-radius:4px;background:currentColor}
.rdom{display:block;font-size:11.5px;color:var(--mute);padding:4px 2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.rdom:hover{text-decoration:underline}
#refbar a.btn{text-decoration:none;color:inherit}
/* menú de vincular a corrección */
.ppbtn{gap:6px;font-size:12.5px;white-space:nowrap}
.ppcar{font-size:10px;color:var(--mute)}
.pdot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--c);display:inline-block}
.pdot.none{background:none;border:1.5px dashed var(--mute)}
#ppmenu{position:fixed;z-index:50;min-width:180px;max-height:min(320px,60vh);overflow-y:auto;padding:4px;background:var(--chrome);border:1px solid var(--line);border-radius:9px;box-shadow:0 6px 20px rgba(0,0,0,.3);display:flex;flex-direction:column}
#ppmenu button{display:flex;align-items:center;gap:8px;padding:7px 10px;border:0;background:none;color:var(--text);font:inherit;font-size:13px;text-align:left;border-radius:6px;cursor:pointer}
#ppmenu button:hover{background:var(--hover)}
#ppmenu button.on{font-weight:600;background:var(--hover)}
#ppmenu small{color:var(--mute);font-size:11px}
#ppmenu .ppnew{border-top:1px solid var(--line);border-radius:0 0 6px 6px;margin-top:2px;color:var(--accent)}
/* lista de correcciones: deslizar para resolver o eliminar */
.pirow{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.pirow .pi{position:relative;z-index:1;background:var(--panel);border-bottom:0;transition:transform .18s ease;touch-action:pan-y}
.pirow.swiping .pi{transition:none}
.piact{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 16px;font-size:13px;font-weight:650;color:#fff;border:0}
.piact.res{left:0;right:0;background:#2e9d58;justify-content:flex-start}
.piact.del{right:0;width:88px;justify-content:center;background:#d42a20;cursor:pointer;font:inherit;font-size:13px;font-weight:650;z-index:0}
.pirow[data-dir="del"] .piact.res{visibility:hidden}
.pirow[data-dir="res"] .piact.del{visibility:hidden}
.pirow:not([data-dir]) .piact{visibility:hidden}
.pirow .pi:hover{background:linear-gradient(var(--hover),var(--hover)),var(--panel)}
/* móvil: botones flotantes (imágenes y correcciones) y tira de imágenes como cajón */
.mnav{display:none}
@media (max-width:900px){
  .panelbtn{display:none!important}
  .mnav{display:flex;flex-direction:column;gap:8px;position:absolute;top:10px;right:10px;z-index:6}
  .fab{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--chrome);color:var(--text);border:1px solid var(--line);box-shadow:0 3px 12px rgba(0,0,0,.25);cursor:pointer;padding:0}
  .fbadge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--amber);color:#1a1a1a;font-size:11px;font-weight:700;display:grid;place-items:center}
  .review.strip-open .strip{display:flex;position:absolute;left:0;top:0;bottom:0;width:132px;z-index:20;box-shadow:8px 0 24px rgba(0,0,0,.25)}
}
.pby{display:block;font-size:11.5px;color:var(--mute);margin-top:3px}
/* presencia en el lienzo */
.presence{display:inline-flex;align-items:center}
.presence .av{width:26px;height:26px;font-size:10.5px;margin-left:-6px;border:2px solid var(--chrome)}
.presence .av:first-child{margin-left:0}
@media (max-width:600px){ .presence .av{width:22px;height:22px;font-size:9px} }
/* administración */
.adm h2{font-size:15px;font-weight:650;margin:26px 0 10px}
.admwrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.admt{width:100%;border-collapse:collapse;font-size:13px}
.admt th{text-align:left;font-weight:600;color:var(--mute);font-size:12px;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.admt td{padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.admt tr:last-child td{border-bottom:0}
.admt tr.warn td{background:rgba(212,42,32,.08)}
.admt .mute{color:var(--mute)}
.tagw{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;background:var(--accent);color:#fff;font-size:11px;font-weight:650}
.usagebox{display:flex;flex-wrap:wrap;gap:18px;margin-top:12px}
/* editar comentarios */
.mh{flex-wrap:wrap}
.medited{font-size:11px;color:var(--mute);font-style:italic}
.mact{margin-left:auto;display:inline-flex;gap:2px;opacity:0;transition:opacity .15s}
.msg:hover .mact,.msg:focus-within .mact{opacity:1}
@media (hover:none){ .mact{opacity:1} }
.mact button{border:0;background:none;color:var(--mute);font:inherit;font-size:11.5px;padding:2px 5px;border-radius:5px;cursor:pointer}
.mact button:hover{background:var(--hover);color:var(--text)}
.mact button[data-cdel]:hover,.mact button[data-armed]{color:var(--accent)}
.medit{margin-top:4px}
.medit textarea{width:100%;font:inherit;font-size:13.5px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);resize:vertical}
.medit .crow{display:flex;gap:6px;margin-top:6px}
.msg>div{flex:1;min-width:0}
/* correcciones sin ver */
.newtag{display:inline-block;vertical-align:3px;margin-left:6px;padding:2px 7px;border-radius:10px;background:var(--blue);color:#fff;font-size:11.5px;font-weight:650;font-stretch:100%}
.ntag{position:absolute;left:10px;bottom:10px;background:var(--blue);color:#fff;font-size:12px;font-weight:650;padding:3px 8px;border-radius:5px}
.snew{position:absolute;left:-2px;top:-2px;min-width:20px;height:20px;border-radius:10px;background:var(--blue);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px;box-shadow:0 0 0 2px var(--chrome)}
.pnew{font-style:normal;margin-left:4px;padding:0 5px;border-radius:4px;background:var(--blue);color:#fff;font-size:10.5px;font-weight:650}
.pcard h3 .newtag{color:#fff}
/* comentarios rápidos */
.quick{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.qc{border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-size:12px;padding:3px 9px;border-radius:12px;cursor:pointer}
.qc:hover{background:var(--hover)}
.qc.qe{color:var(--mute);border-style:dashed}
/* diálogo (archivar) */
.dlg{border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);padding:0;width:min(520px,92vw);box-shadow:0 12px 40px rgba(0,0,0,.35)}
.dlg::backdrop{background:rgba(0,0,0,.4)}
.dlgf{display:grid;gap:12px;padding:20px}
.dlgf h2{margin:0;font-size:19px;font-weight:650}
.dlgf p{margin:0}
.dlgf .mute{color:var(--mute);font-size:13.5px}
.dlgf .chk{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4}
.dlgf .chk input{margin-top:3px;flex:none}
.dlgf .warn{font-size:13px;color:var(--accent)}
.dlgb{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
/* PDF (vista de impresión) */
#print{display:none}
@media print{
  @page{size:A4;margin:12mm}
  body>*:not(#print){display:none!important}
  html,body{height:auto!important;overflow:visible!important;background:#fff!important}
  #print{display:block;color:#1e1e1e;font-family:Archivo,system-ui,sans-serif;font-size:10.5pt}
  #print .xcover h1{font-size:26pt;margin:0 0 4px;font-weight:650}
  #print .xcover p{margin:0 0 10mm;color:#666}
  #print .xc{break-before:page}
  #print .xc:first-of-type{break-before:auto}
  #print .xc h2{font-size:18pt;margin:0 0 4mm;font-weight:650}
  #print .xc h2 span{font-size:10pt;color:#666;font-weight:500;border:1px solid #ccc;border-radius:4px;padding:1px 6px;vertical-align:4px}
  #print .xv{margin-bottom:8mm}
  #print .xv h3{font-size:13pt;margin:0 0 3mm;font-weight:650;break-after:avoid}
  #print .xv h3 span{font-size:9.5pt;color:#666;font-weight:400}
  #print .ximg svg{width:100%;height:auto;display:block;border:1px solid #ddd}
  #print .xp{display:flex;gap:5mm;padding:3mm 0;border-bottom:1px solid #e5e5e5;break-inside:avoid}
  #print .xcrop{flex:none;width:42mm}
  #print .xcrop svg{width:42mm;height:42mm;display:block;border:1px solid #ddd}
  #print .xpt{flex:1;min-width:0}
  #print .xph{display:flex;gap:6px;align-items:center;margin-bottom:2mm}
  #print .xph .pn{width:20px;height:20px;font-size:10px}
  #print .xs{font-size:8.5pt;border:1px solid #ccc;border-radius:4px;padding:0 5px;color:#555}
  #print .xs[data-s="resuelto"]{background:#e8f5ec;border-color:#9fd3b0}
  #print .xm{margin:0 0 2mm}
  #print .xm span{color:#888;font-size:8.5pt}
  #print .mute{color:#888}
  #print .xrs{display:flex;flex-wrap:wrap;gap:3mm;margin-top:2mm}
  #print .xr{margin:0;width:38mm}
  #print .xr img{width:38mm;height:28mm;object-fit:contain;background:#f4f4f4;border:1px solid #ddd;display:block}
  #print .xr figcaption{font-size:7.5pt;color:#666;overflow-wrap:anywhere;margin-top:1mm}
  #print .xl{font-size:8.5pt;color:#2a62b8;overflow-wrap:anywhere}
  #print .xloose{margin-top:3mm;break-inside:avoid}
  #print .xloose b{font-size:10pt}
}
.bkst{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:14px 16px;display:grid;gap:6px;margin-bottom:12px}
.bkst p{margin:0;font-size:13.5px}
.bkst .mute{color:var(--mute);font-size:12.5px}
.bkst .warn,.adm p.warn{color:var(--accent)}
.bkb{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
/* girar imágenes del lienzo */
.bref{transform-origin:50% 50%}
.rrot{position:absolute;left:50%;bottom:-30px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#fff;border:2px solid var(--accent);cursor:grab;display:none}
.rrot::after{content:'';position:absolute;left:50%;bottom:14px;width:2px;height:14px;margin-left:-1px;background:var(--accent)}
.bref.sel .rrot{display:block}
@media (pointer:coarse){ .rrot{width:24px;height:24px;margin-left:-12px;bottom:-38px} .rrot::after{bottom:22px} }
/* las imágenes se pintan en el lienzo (orden común con los dibujos); el DOM solo lleva el marco, la etiqueta y los tiradores */
.bref{pointer-events:none!important;background:transparent!important;box-shadow:none!important}
.bref img{visibility:hidden}
.bref .rh,.bref .rrot{pointer-events:auto}
.btn.ord{padding:0 7px}
.btn.ord svg{width:17px;height:17px}
/* nombre propio (clic para cambiarlo) y nombres en el panel de Admin */
button.me{border:0;background:none;font:inherit;cursor:pointer;padding:4px 6px;border-radius:7px}
button.me:hover{background:var(--hover);color:var(--text)}
.admt .rn{vertical-align:-3px;opacity:.6}
.admt .rn svg{width:14px;height:14px}
.admt tr:hover .rn{opacity:1}
.srvctl b{font-weight:600}
.srvctl small{font-size:12.5px}

/* ---------- secciones de la suite (Imágenes · Horas · Planificación) y reloj de Horas ---------- */
.seg a{height:32px;padding:0 10px;font-size:13px;border-right:1px solid var(--line);display:inline-flex;align-items:center;text-decoration:none;color:inherit;white-space:nowrap}
.seg a:last-child{border-right:0}
.seg a:hover{background:var(--hover)}
.seg a.on,.seg a.on:hover{background:var(--text);color:var(--bg)}
a.brand{text-decoration:none;color:inherit}
.mclock{display:inline-flex;align-items:center;gap:8px;height:34px;border:1px solid var(--line);border-radius:999px;background:var(--panel);padding:0 12px;flex:none;max-width:300px;font-size:13px;text-decoration:none;color:inherit}
.mclock:hover{background:var(--hover)}
.mclock .mpn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;color:var(--mute);flex:none}
.mclock .tm,.mclock .dot{flex:none}
.mclock .tm{font-weight:650;font-stretch:108%}
.mclock.off .tm{color:var(--mute)}
.mclock .dot{width:8px;height:8px;border-radius:50%;background:var(--grey);flex:none}
.mclock .dot.run{background:var(--green);animation:mpulse 1.6s ease-in-out infinite}
.mclock .dot.pause{background:var(--amber)}
@keyframes mpulse{50%{opacity:.35}}
@media (max-width:600px){ .mclock .mpn{display:none} }