/* Uploader por formato → Drive */
.up-panel{background:var(--card);border:1px solid var(--line);border-radius:20px;width:min(940px,100%);
  max-height:92dvh;overflow:auto;padding:1.4rem 1.5rem 1.2rem;position:relative;box-shadow:var(--shadow-lg)}
.up-head h2{margin:0 0 .25rem;font-size:1.3rem;letter-spacing:-.02em}
.up-board{color:var(--muted);font-weight:600;font-size:.95rem}
.up-drive{margin:0 0 1.1rem;color:var(--ink-soft);font-size:.88rem;display:flex;align-items:center;gap:.5rem}
.dot-live{width:8px;height:8px;border-radius:50%;background:#3fce7f;box-shadow:0 0 0 3px color-mix(in srgb,#3fce7f 25%,transparent)}
.up-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:1rem}
.dz{border:1.5px dashed var(--line);border-radius:14px;background:#00000020;padding:.9rem;display:flex;
  flex-direction:column;align-items:center;gap:.5rem;cursor:pointer;transition:border-color .15s, background .15s;text-align:center}
.dz:hover,.dz.drag{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,transparent)}
.dz .dz-ph{width:100%;border-radius:9px;background:#000;position:relative;overflow:hidden;display:grid;place-items:center;color:var(--muted)}
.dz .dz-ph img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.dz .dz-name{font-weight:700;font-size:.85rem}
.dz .dz-dim{font-size:.72rem;color:var(--muted)}
.dz .dz-plus{font-size:1.4rem;color:var(--muted)}
.dz.done{border-style:solid;border-color:#3fce7f}
.dz .dz-check{position:absolute;top:.4rem;right:.4rem;background:#3fce7f;color:#062;font-weight:800;
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.8rem}
.up-foot{display:flex;align-items:center;justify-content:space-between;margin-top:1.2rem;gap:1rem}
.up-status{color:var(--muted);font-size:.85rem}

/* Campana de alertas */
.bell{position:relative;background:color-mix(in srgb,#fff 6%,transparent);border:1px solid var(--line);
  width:40px;height:40px;border-radius:12px;cursor:pointer;font-size:1.05rem;color:var(--ink);backdrop-filter:blur(8px)}
.bell:hover{background:color-mix(in srgb,#fff 12%,transparent)}
.bell-badge{position:absolute;top:-6px;right:-6px;background:#f0685e;color:#fff;font-size:.66rem;font-weight:800;
  min-width:18px;height:18px;border-radius:999px;display:grid;place-items:center;padding:0 4px;border:2px solid var(--bg)}
.alerts{position:absolute;top:64px;right:1.6rem;width:320px;max-height:420px;overflow:auto;background:var(--card);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);z-index:40;padding:.5rem}
.alerts[hidden]{display:none}
.alerts-head{font-weight:800;padding:.5rem .7rem;font-size:.95rem}
.alert{padding:.55rem .7rem;border-radius:10px;display:flex;flex-direction:column;gap:.15rem}
.alert.unread{background:color-mix(in srgb,var(--primary) 12%,transparent)}
.alert .a-t{font-weight:700;font-size:.88rem}
.alert .a-s{font-size:.8rem;color:var(--muted)}
.alert-empty{padding:1rem .7rem;color:var(--muted);font-size:.88rem}

/* Barra de progreso en el topbar */
.prog-wrap{display:flex;align-items:center;gap:.6rem}
.prog-bar{width:120px;height:7px;border-radius:999px;background:var(--panel-2);overflow:hidden}
.prog-bar span{display:block;height:100%;width:0;background:var(--primary);transition:width .3s ease}
.progress{font-size:.82rem;color:var(--muted);font-weight:700;white-space:nowrap}

.review{max-width:1180px;margin:0 auto;padding:1.6rem 1.3rem 4rem}
.review-intro h1{font-size:1.6rem;margin:.2rem 0 .4rem;letter-spacing:-.02em}
.review-intro p{color:var(--ink-soft);margin:0 0 1.4rem;max-width:66ch;line-height:1.5}

.card .thumb .status-dot{position:absolute;top:.55rem;right:.55rem;width:11px;height:11px;border-radius:50%;
  box-shadow:0 0 0 3px rgba(255,255,255,.85)}
.dot-approved{background:#16a34a}.dot-in_review{background:#e0a020}
.dot-changes_requested{background:#d64036}.dot-pending{background:#b9b4ab}

.btn.ok{background:#16a34a}
.btn.warn{background:#d64036}
.btn.sm{padding:.45rem .8rem;font-size:.84rem}

/* Visor */
.viewer{position:fixed;inset:0;background:rgba(18,16,14,.72);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:1.2rem;z-index:60}
.viewer[hidden]{display:none}
.viewer-panel{background:#fff;border-radius:20px;overflow:hidden;width:min(1080px,100%);height:min(760px,94dvh);
  display:grid;grid-template-columns:1fr 360px;position:relative;box-shadow:var(--shadow-lg)}
.v-close{position:absolute;top:.7rem;right:.7rem;z-index:5;border:0;background:rgba(0,0,0,.45);color:#fff;
  width:36px;height:36px;border-radius:999px;cursor:pointer;font-size:1rem}

/* Lienzo */
.v-stage{background:#14120f;display:flex;flex-direction:column;min-width:0}
.v-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem .9rem;
  background:#1c1a16;border-bottom:1px solid #2a2823;flex-wrap:wrap}
.v-tabs{display:flex;gap:.3rem;background:#111;border-radius:999px;padding:.25rem}
.v-tabs button{border:0;background:transparent;color:#cfc8bd;font-weight:700;font-size:.82rem;
  padding:.4rem .8rem;border-radius:999px;cursor:pointer}
.v-tabs button.on{background:var(--primary);color:#1a1508}
.v-guides{display:flex;align-items:center;gap:.45rem;color:#e7e1d6;font-size:.82rem;font-weight:600;cursor:pointer}
.v-guides input{accent-color:var(--primary);width:16px;height:16px}
.v-canvas{flex:1;display:flex;align-items:flex-start;justify-content:center;position:relative;
  padding:1.4rem;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
/* marco de contexto (preview tipo Meta) */
.v-frame{flex:none;margin:auto;width:min(100%, 400px);background:#000;border-radius:20px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.6);border:1px solid #2a2825}
.v-frame.wide{width:min(100%, 560px)}
.v-frame.phone{width:min(100%, 340px);border-radius:30px;border:6px solid #050505;background:#050505}
.frame-head{display:flex;align-items:center;gap:.55rem;padding:.6rem .8rem;background:#0e0d0c}
.frame-head .fh-av{width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 50%,#000))}
.frame-head .fh-handle{font-weight:700;font-size:.85rem;color:#fff}
.frame-head .fh-dots{margin-left:auto;color:#9a938a;font-weight:800}
.frame-foot{padding:.5rem .8rem .8rem;background:#0e0d0c}
.frame-foot .ff-actions{display:flex;gap:.9rem;font-size:1.15rem;color:#fff;padding:.2rem 0 .4rem}
.frame-foot .ff-actions .ff-save{margin-left:auto}
.frame-foot .ff-cap{font-size:.82rem;color:#d8d2c8;line-height:1.35}
.frame-foot .ff-cap b{color:#fff}
.v-frame.phone .frame-head,.v-frame.phone .frame-foot{display:none}

.v-imgwrap{position:relative;line-height:0;cursor:crosshair;width:100%}
.v-imgwrap img{width:100%;height:auto;display:block}

/* UI real de Instagram / Facebook sobre el creativo */
.ui-overlay{position:absolute;inset:0;pointer-events:none;font-family:var(--font);line-height:1.2}
.ui-overlay .ui-el{position:absolute;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
/* Story: barra de progreso + perfil arriba, respuesta abajo */
.ui-story-top{top:2.5%;left:3.5%;right:3.5%}
.ui-progress{display:flex;gap:3px;margin-bottom:9px}
.ui-progress i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.4)}
.ui-progress i.on{background:#fff}
.ui-prof{display:flex;align-items:center;gap:7px}
.ui-prof .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#c9a449,#0e1f3a);border:1.5px solid #fff}
.ui-prof .nm{font-size:12px;font-weight:600}
.ui-prof .tm{font-size:11px;opacity:.8}
.ui-prof .x{margin-left:auto;font-size:16px;opacity:.9}
.ui-story-bot{left:3.5%;right:3.5%;bottom:3%;display:flex;align-items:center;gap:10px}
.ui-reply{flex:1;height:34px;border:1.5px solid rgba(255,255,255,.7);border-radius:999px;
  display:flex;align-items:center;padding:0 14px;font-size:12px;opacity:.9}
.ui-ic{width:22px;height:22px;opacity:.95}
/* Reel: rail de acciones derecha + caption abajo izq */
.ui-reel-rail{right:3%;bottom:16%;display:flex;flex-direction:column;align-items:center;gap:16px}
.ui-reel-rail .r{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600}
.ui-reel-rail .r .g{width:26px;height:26px}
.ui-reel-rail .disc{width:26px;height:26px;border-radius:50%;border:2px solid #fff;
  background:linear-gradient(135deg,#c9a449,#0e1f3a)}
.ui-reel-cap{left:3.5%;bottom:12%;right:22%}
.ui-reel-cap .h{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700}
.ui-reel-cap .follow{border:1px solid #fff;border-radius:6px;padding:1px 7px;font-size:11px;font-weight:600}
.ui-reel-cap .cap{font-size:12px;opacity:.95;margin-top:5px}
.ui-reel-cap .audio{display:flex;align-items:center;gap:5px;font-size:11px;opacity:.9;margin-top:6px}
.v-hint{position:absolute;bottom:.9rem;left:50%;transform:translateX(-50%);color:#efe9dd;font-size:.76rem;
  background:rgba(0,0,0,.6);padding:.35rem .8rem;border-radius:999px;pointer-events:none;backdrop-filter:blur(6px)}
.v-canvas::-webkit-scrollbar{width:9px}
.v-canvas::-webkit-scrollbar-thumb{background:#3a3733;border-radius:99px}
.v-canvas::-webkit-scrollbar-track{background:transparent}

/* Pins */
.pin{position:absolute;width:26px;height:26px;transform:translate(-50%,-50%);border-radius:50% 50% 50% 2px;
  background:var(--primary);border:2px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.45);cursor:pointer;
  display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#1a1508;rotate:45deg}
.pin span{rotate:-45deg}
.pin.new{background:#d64036;color:#fff}

/* Panel lateral */
.v-side{padding:1.1rem 1.15rem;display:flex;flex-direction:column;gap:.7rem;overflow:hidden;
  background:var(--card);border-left:1px solid var(--line)}
.v-status-row{display:flex;align-items:center;justify-content:space-between}
.v-live{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;color:#3fce7f}
.v-live i{width:7px;height:7px;border-radius:50%;background:#3fce7f;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Texto del anuncio (copy) */
.copy-block{background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:.5rem .7rem}
.copy-block summary{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  font-weight:800;cursor:pointer;list-style:none}
.copy-block summary::-webkit-details-marker{display:none}
.copy-body{display:flex;flex-direction:column;gap:.45rem;margin-top:.5rem}
.copy-row{display:flex;flex-direction:column;gap:.1rem}
.copy-k{font-size:.66rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.04em}
.copy-v{font-size:.86rem;color:var(--ink);line-height:1.35}
.copy-edit input,.copy-edit textarea{width:100%;font:inherit;font-size:.86rem;background:var(--card);
  color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:.45rem .55rem;resize:vertical;margin-top:.15rem}

/* Chat / conversación */
.chat{display:flex;flex-direction:column;flex:1;min-height:0;gap:.55rem}
.chat-thread{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:.5rem;padding:.2rem}
.msg{max-width:86%;padding:.5rem .7rem;border-radius:14px;font-size:.88rem;line-height:1.35;position:relative}
.msg .who{font-size:.68rem;font-weight:800;letter-spacing:.03em;opacity:.7;margin-bottom:.15rem;text-transform:uppercase}
.msg.cliente{align-self:flex-start;background:var(--card-2);border:1px solid var(--line);border-bottom-left-radius:5px}
.msg.editora{align-self:flex-end;background:color-mix(in srgb,var(--gold) 22%,var(--card));border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line));border-bottom-right-radius:5px}
.msg .pin-ref{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:700;color:var(--gold);margin-bottom:.2rem}
.msg .pin-ref b{width:16px;height:16px;border-radius:50%;background:var(--gold);color:#0b1830;display:grid;place-items:center;font-size:.66rem}
.chat-empty{color:var(--muted);font-size:.85rem;text-align:center;padding:1.4rem .5rem}
.chat-tip{font-size:.74rem;color:var(--muted);padding:.1rem .3rem}
.chat-input{display:flex;gap:.5rem;align-items:flex-end;border-top:1px solid var(--line);padding-top:.6rem}
.chat-input textarea{flex:1;font:inherit;font-size:.9rem;background:var(--card-2);color:var(--ink);
  border:1px solid var(--line);border-radius:12px;padding:.6rem .7rem;resize:none;max-height:120px}
.chat-input textarea::placeholder{color:var(--muted)}
.chat-send{flex:none;width:40px;height:40px;border:0;border-radius:12px;background:var(--gold);color:#0b1830;
  cursor:pointer;display:grid;place-items:center}
.chat-send:active{transform:translateY(1px)}
.chat-thread::-webkit-scrollbar{width:8px}
.chat-thread::-webkit-scrollbar-thumb{background:#26426e;border-radius:99px}
.v-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.v-name{font-weight:800;font-size:1.12rem;letter-spacing:-.01em;line-height:1.2}
.v-ver{font-size:.74rem;color:var(--muted);font-weight:700}
.v-status .chip{font-size:.78rem}
.v-actions{display:flex;gap:.5rem}
.v-actions .btn{flex:1}
.v-comments{display:flex;flex-direction:column;gap:.55rem;flex:1;min-height:0}
.v-sub{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700}
.notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem;overflow:auto}
.notes li{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:.55rem .7rem;font-size:.88rem;
  display:flex;gap:.55rem;align-items:flex-start}
.notes li .n-idx{flex:none;width:20px;height:20px;border-radius:50%;background:var(--primary);color:#1a1508;
  font-size:.72rem;font-weight:800;display:grid;place-items:center;margin-top:1px}
.notes li.general .n-idx{background:var(--panel-2);color:var(--muted)}
.notes .n-by{display:block;font-size:.7rem;color:var(--muted);margin-top:.15rem}
.v-add{display:flex;gap:.4rem}
.v-add textarea{flex:1;font:inherit;font-size:.88rem;border:1px solid var(--line);border-radius:10px;padding:.5rem;resize:none}
.v-tip{font-size:.78rem;color:var(--ink-soft);background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:.5rem .65rem;margin:0}

/* Popover del pin nuevo */
.pin-pop{position:fixed;z-index:70;width:240px;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:.7rem;display:flex;flex-direction:column;gap:.5rem}
.pin-pop[hidden]{display:none}
.pin-pop textarea{font:inherit;font-size:.86rem;border:1px solid var(--line);border-radius:9px;padding:.45rem;resize:none}
.pin-pop-actions{display:flex;gap:.4rem;justify-content:flex-end}

.toast{position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%);background:#141210;color:#fff;
  padding:.7rem 1.1rem;border-radius:999px;font-weight:600;font-size:.9rem;z-index:80;box-shadow:var(--shadow-lg)}
.toast[hidden]{display:none}

/* Responsive */
@media (max-width:820px){
  .viewer{padding:0}
  .viewer-panel{grid-template-columns:1fr;height:100dvh;border-radius:0;max-height:100dvh}
  .v-stage{min-height:46dvh}
  .v-side{max-height:54dvh}
}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .prog-bar{width:70px}
}