/* ============================================================
   Calendario Maestro · Vector89 — Julio 2026
   Un slide por cliente, monocromático en el color de cada uno.
   DM Sans. Diseño aprobado por Angélica 2026-06-16 (mockup v5).
   ============================================================ */
:root{
  --ink:#192826; --muted:#8c968f; --bg:#f4f4f1; --card:#fff; --line:#e7e4dc;
  --font:'DM Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;}

.topbar{display:flex;align-items:baseline;gap:14px;padding:18px 22px 10px;}
.topbar .brand{font-weight:700;font-size:19px;letter-spacing:-.01em;}
.topbar .ttl{font-size:14px;color:var(--muted);font-weight:500;}
.topbar .ttl b{color:var(--ink);font-weight:700;}

.cmenu{display:flex;gap:6px;align-items:center;overflow-x:auto;padding:4px 22px 16px;}
.cmenu::-webkit-scrollbar{height:0;}
.pill{flex-shrink:0;display:flex;align-items:center;gap:7px;border:none;background:#eceae5;color:#55615b;font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:999px;cursor:pointer;transition:.15s;white-space:nowrap;}
.pill:hover{background:#e3e0d9;}
.pill .cd{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.pill.active{box-shadow:0 4px 12px rgba(25,40,38,.18);}
.pill.active .cd{box-shadow:0 0 0 2px rgba(255,255,255,.6);}

main#stage{padding:0 22px 28px;max-width:1600px;margin:0 auto;}
.slide{position:relative;background:var(--card);border-radius:18px;box-shadow:0 4px 24px rgba(25,40,38,.09),0 1px 3px rgba(25,40,38,.06);overflow:hidden;}
.bar{height:4px;}
.pad{padding:20px 22px;}

.shead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;}
.plats{display:flex;gap:5px;align-items:center;background:#f6f6f4;border-radius:999px;padding:6px 11px;}
.plats i{font-size:19px;color:var(--ink);}
.stitle{text-align:center;flex:1;}
.cname{font-size:21px;font-weight:700;}
.crange{margin-top:2px;font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--muted);text-transform:uppercase;}
.tlegend{min-width:74px;display:flex;flex-direction:column;gap:3px;}
.tlegend .lh{font-size:9px;font-weight:700;letter-spacing:.14em;color:#bcc4bf;text-align:right;}
.tlegend span{display:flex;align-items:center;gap:6px;justify-content:flex-end;font-size:10.5px;font-weight:600;color:#6b756f;}
.tlegend .d{width:9px;height:9px;border-radius:50%;}

.blocks{display:flex;gap:12px;}
.block{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;align-content:start;}

.t{position:relative;aspect-ratio:1;border-radius:9px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;padding:9px 8px 19px;cursor:grab;transition:transform .1s,box-shadow .1s;user-select:none;}
.t:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(25,40,38,.16);z-index:2;}
.t.drag{opacity:.35;}
.t.over{outline:2.5px solid var(--brand);outline-offset:-2px;}
.t .dt{position:absolute;top:5px;left:6px;font-size:10.5px;font-weight:700;cursor:pointer;padding:1px 5px;border-radius:5px;z-index:3;}
.t .dt:hover{text-decoration:underline dotted;}
.t .dti{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;top:6px;left:7px;}
.t .ci{position:absolute;top:6px;right:6px;width:16px;height:16px;border-radius:50%;}
.t .tl{font-size:13.5px;font-weight:600;line-height:1.2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding:0 2px;}
.t .vi{display:none;font-size:26px;}
.t .tg{position:absolute;bottom:5px;left:0;right:0;font-size:9px;font-weight:700;letter-spacing:.12em;}

/* POST = color de marca sólido */
.t.post{background:var(--brand);}
.t.post .dt{color:var(--post-soft);}
.t.post .tl{color:var(--post-text);}
.t.post .ci{background:transparent;box-shadow:inset 0 0 0 2px var(--post-ring);}
.t.post .tg{color:var(--post-soft);}

/* VIDEO = tono claro de la marca + icono + círculo tonal */
.t.reel,.t.guion,.t.remix{background:var(--brand-pale);}
.t.reel .vi,.t.guion .vi,.t.remix .vi{display:block;color:var(--brand-m);}
.t.reel .dt,.t.guion .dt,.t.remix .dt{color:#9aa8a2;}
.t.reel .tg,.t.guion .tg,.t.remix .tg{color:var(--brand-m);}
.t.reel .ci{background:var(--brand-d);}
.t.guion .ci{background:var(--brand-m);}
.t.remix .ci{background:var(--brand-l);box-shadow:inset 0 0 0 1px rgba(0,0,0,.07);}

/* DONE = primer slide del carrusel ya cargado (Paula subió la liga) */
.t.done{padding:0;}
.t.done img{width:100%;height:100%;object-fit:cover;display:block;}
.t.done .dt{color:#fff;background:rgba(0,0,0,.34);z-index:2;}

.snav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;font-size:12px;font-weight:600;color:#aab2ad;}
.snav button{border:none;background:#f1f1ee;color:#55615b;font-family:inherit;font-weight:600;font-size:12px;padding:7px 13px;border-radius:8px;cursor:pointer;}
.snav button:hover{background:#e6e4de;}

.rowctrl{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;font-size:12px;font-weight:600;color:#8c968f;}
.rowctrl button{border:1px dashed #cfd3cd;background:#fff;color:#5d665f;font-family:inherit;font-weight:600;font-size:12px;padding:6px 14px;border-radius:8px;cursor:pointer;transition:.15s;}
.rowctrl button:hover{background:#f3f3f0;border-color:#9aa49d;color:#3e463f;}

.notes{margin:0 22px 20px;border:1px solid var(--line);background:#fafbf9;border-radius:12px;padding:14px 16px;}
.notes .nh{font-size:11.5px;font-weight:700;color:#5d665f;margin-bottom:6px;}
.notes .nbody{font-size:13px;line-height:1.55;color:#5a615b;white-space:pre-wrap;}

.foot{text-align:center;font-size:11px;color:#b3bbb6;padding:6px 0 26px;}

@media(max-width:820px){
  .blocks{flex-direction:column;gap:8px;}
  .topbar,.cmenu,main#stage{padding-left:14px;padding-right:14px;}
  .cname{font-size:18px;}
}