/* =====================================================================
   ALyEN Tracker · MERO ESTUDIO — sistema visual
   Identidad MERO: carbón + blanco (grabado en línea), un solo acento:
   el ojo amarillo del mero (#FFC400). Wordmark pesado, "Estudio" en script.
   ===================================================================== */
:root {
  /* carbón de la marca (#313131 / #434144) y sus vecinos */
  --ink-900: #161617; --ink-800: #1F1F20; --ink-700: #202020; --ink-600: #313131; --ink-500: #434144; --ink-400: #56565A;
  --paper: #FFFFFF; --paper-2: #D9D9DB; --paper-3: #A4A4A8; --paper-4: #737276;
  --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .18); --line-3: rgba(255, 255, 255, .32);
  --eye: #FFC400; --eye-2: #FFD44D; --eye-dim: rgba(255, 196, 0, .16);
  /* semánticos (siempre con ícono + texto) */
  --green: #3DD68C; --amber: #FFC400; --red: #FF5C4D; --blue: #7FAEFF;
  /* etapas — UI y versión para barras (validada CVD) */
  --sg-story: #A99CFF; --sg-layout: #6FD6CB; --sg-rough: #F0B429; --sg-clean: #F27C6B; --sg-bg: #7FAEFF;
  --ch-story: #7B69E6; --ch-layout: #179E98; --ch-rough: #C98320; --ch-clean: #E04E3B; --ch-bg: #3F7FE0;
  --font-display: "Oswald", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --font-body: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-script: "Caveat", "Segoe Script", cursive;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 12px; --r-sm: 8px; --shadow: 0 14px 40px rgba(0, 0, 0, .45);
  --sidebar: 240px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body); font-size: 14px; line-height: 1.45; color: var(--paper);
  background: var(--ink-700); min-height: 100vh; -webkit-font-smoothing: antialiased;
}
/* textura de grabado de la marca, muy sutil, fija */
.texture { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: url("assets/mero-texture.jpg") center / cover no-repeat; opacity: .10; mix-blend-mode: screen; }
.texture.strong { opacity: .22; }
a { color: var(--eye); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--eye); color: #1E1E20; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: .03em; margin: 0; text-wrap: balance; text-transform: uppercase; }
h1 { font-size: 28px; } h2 { font-size: 19px; } h3 { font-size: 15px; }
h1 em, h2 em { font-style: normal; color: var(--eye); }
.script { font-family: var(--font-script); font-weight: 600; font-size: 1.35em; letter-spacing: 0; text-transform: none; color: var(--paper-2); }
.muted { color: var(--paper-3); } .dim { color: var(--paper-2); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grow { flex: 1; }
.right { margin-left: auto; }
.sr { position: absolute; left: -9999px; }

/* ---------- controles ---------- */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--ink-600); color: var(--paper); font-weight: 700; font-size: 13px; transition: transform .12s, background .15s, border-color .15s; white-space: nowrap; }
.btn:hover { background: var(--ink-500); border-color: var(--line-3); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn:focus-visible, .input:focus-visible, .fchip:focus-visible, .cell:focus-visible { outline: 2px solid var(--eye); outline-offset: 2px; }
.btn.primary { background: var(--eye); border-color: transparent; color: #1E1E20; box-shadow: 0 6px 18px rgba(255, 196, 0, .25); }
.btn.primary:hover { background: var(--eye-2); }
.btn.aqua { background: var(--paper); border-color: transparent; color: #1E1E20; }
.btn.aqua:hover { background: var(--paper-2); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn.danger { color: #ffb3ad; border-color: rgba(255, 92, 77, .4); }
.btn.danger:hover { background: rgba(255, 92, 77, .12); }
.btn.icon { padding: 6px; }
.btn.google { display: flex; width: 100%; background: var(--paper); color: #1E1E20; border-color: transparent; justify-content: center; padding: 11px; }
.btn.google:hover { background: var(--paper-2); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 11px; font-weight: 700; color: var(--paper-3); letter-spacing: .08em; text-transform: uppercase; }
.input, select.input, textarea.input { width: 100%; padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--ink-900); color: var(--paper); outline: none; transition: border-color .15s, box-shadow .15s; }
.input:focus { border-color: var(--eye); box-shadow: 0 0 0 3px var(--eye-dim); }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--paper-2) 50%), linear-gradient(135deg, var(--paper-2) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
textarea.input { min-height: 74px; resize: vertical; }
.input.small { padding: 6px 9px; font-size: 13px; }
.check { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--ink-900); cursor: pointer; font-size: 13px; user-select: none; }
.check input { accent-color: var(--eye); }
.check.on { border-color: var(--eye); color: var(--eye-2); }
.toggle { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--ink-900); border: 1px solid var(--line-2); transition: background .2s; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper-3); transition: transform .2s, background .2s; }
.toggle.on { background: var(--eye-dim); border-color: var(--eye); }
.toggle.on::after { transform: translateX(18px); background: var(--eye); }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; overflow: hidden; }
.login .card { width: min(440px, 100%); background: rgba(38, 38, 40, .88); backdrop-filter: blur(10px); border: 1px solid var(--line-2); border-radius: 18px; padding: 30px 30px 26px; box-shadow: var(--shadow); position: relative; z-index: 2; animation: rise .5s cubic-bezier(.2, .8, .2, 1); }
.login .brand { display: grid; place-items: center; margin: 0 0 14px; }
.login .brand img { width: 190px; height: auto; }
.login .tag { font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--eye); text-align: center; }
.login h1 { font-size: 26px; text-align: center; margin: 4px 0 6px; }
.login form { display: grid; gap: 12px; margin-top: 8px; }
.login .err { color: #ffb3ad; background: rgba(255, 92, 77, .12); border: 1px solid rgba(255, 92, 77, .35); padding: 8px 12px; border-radius: var(--r-sm); font-size: 13px; }
.login .or { display: flex; align-items: center; gap: 10px; color: var(--paper-4); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin: 6px 0; }
.login .or::before, .login .or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.login .demo { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.login .demo .row { gap: 6px; }
.login-fish { position: absolute; right: -6%; bottom: -8%; width: 58vw; max-width: 900px; min-width: 420px; opacity: .07; pointer-events: none; z-index: 1; animation: breathe 9s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: translateY(0) rotate(-2deg) } 50% { transform: translateY(-14px) rotate(-1deg) } }
@keyframes rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes pop { 0% { transform: scale(.9); opacity: .4 } 60% { transform: scale(1.06) } 100% { transform: scale(1); opacity: 1 } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 92, 77, .6) } 70% { box-shadow: 0 0 0 7px rgba(255, 92, 77, 0) } }
@keyframes pulseA { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 196, 0, .55) } 70% { box-shadow: 0 0 0 7px rgba(255, 196, 0, 0) } }
@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes shimmer { from { background-position: -200px 0 } to { background-position: 200px 0 } }

/* ---------- app shell ---------- */
.app { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; position: relative; z-index: 1; }
.side { position: sticky; top: 0; height: 100vh; padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--line); background: var(--ink-800); }
.logo { display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px; }
.logo img { width: 84px; height: auto; display: block; }
.logo .name { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .06em; line-height: 1.1; text-transform: uppercase; }
.logo .sub { font-family: var(--font-script); font-size: 15px; color: var(--paper-3); line-height: 1; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--r-sm); border: 0; background: transparent; color: var(--paper-2); font-weight: 700; font-size: 14px; transition: background .15s, color .15s; }
.nav button:hover { background: rgba(255, 255, 255, .06); color: var(--paper); }
.nav button.on { background: var(--paper); color: #1E1E20; }
.nav button .badge { margin-left: auto; }
.nav button.on .badge { background: #1E1E20; color: var(--eye); }
.nav .sect { font-size: 10px; color: var(--paper-4); letter-spacing: .18em; text-transform: uppercase; padding: 14px 12px 4px; font-weight: 800; }
.side .user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r); background: var(--ink-900); border: 1px solid var(--line); }
.side .user .n { font-weight: 800; font-size: 13px; } .side .user .r { font-size: 11px; color: var(--paper-3); }
.main { padding: 22px 28px 60px; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 2px solid var(--eye); }
.topbar h1 { display: flex; align-items: center; gap: 10px; }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--eye); padding: 5px 10px; border-radius: 999px; background: var(--eye-dim); border: 1px solid rgba(255, 196, 0, .4); }
.live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--eye); animation: blink 1.6s infinite; }
.live.off { color: var(--paper-3); background: transparent; border-color: var(--line-2); } .live.off .dot { background: var(--paper-3); }
.menu-btn { display: none; }

/* ---------- avatar / chips / badges ---------- */
.avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 800; font-size: 11px; color: #1E1E20; flex: none; letter-spacing: .02em; }
.avatar.lg { width: 40px; height: 40px; font-size: 15px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; background: rgba(255, 255, 255, .1); color: var(--paper-2); white-space: nowrap; }
.badge.coral { background: rgba(255, 92, 77, .18); color: #ffb3ad; }
.badge.red { background: rgba(255, 92, 77, .2); color: #ffb3ad; }
.badge.aqua { background: rgba(255, 255, 255, .14); color: var(--paper); }
.badge.amber { background: var(--eye-dim); color: var(--eye-2); }
.badge.green { background: rgba(61, 214, 140, .16); color: #9cf0c8; }
.stagepill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 4px; font-family: var(--font-display); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #1E1E20; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; border: 1px solid transparent; white-space: nowrap; line-height: 1; transition: transform .15s; }
.chip .ic { font-size: 12px; line-height: 1; }
.chip.pop { animation: pop .35s cubic-bezier(.2, .8, .2, 1); }
.chip.st-unassigned { color: var(--paper-4); border-color: var(--line-2); background: transparent; }
.chip.st-assigned { color: var(--paper); background: rgba(255, 255, 255, .08); border-color: var(--line-3); }
.chip.st-in_progress { color: var(--eye-2); background: var(--eye-dim); border-color: rgba(255, 196, 0, .5); }
.chip.st-uploaded { color: #0f3b26; background: var(--green); border-color: var(--green); }
.chip.st-feedback { color: #fff; background: var(--red); border-color: var(--red); }
.chip.st-approved { color: #1E1E20; background: var(--paper); border-color: var(--paper); }
.timer { font-family: var(--font-mono); font-size: 11.5px; color: var(--paper-2); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.timer .d { width: 7px; height: 7px; border-radius: 50%; background: var(--paper-4); flex: none; }
.timer.ok .d { background: var(--green); }
.timer.warning { color: var(--eye-2); } .timer.warning .d { background: var(--eye); animation: pulseA 1.8s infinite; }
.timer.late { color: #ffb3ad; } .timer.late .d { background: var(--red); animation: pulse 1.6s infinite; }
.timer.delivered .d { background: var(--green); } .timer.done { color: var(--paper-4); }

/* ---------- thumbnails de storyboard ---------- */
.thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink-900); border-radius: 6px; border: 1px solid var(--line-2); }
.thumb.empty { display: grid; place-items: center; color: var(--paper-4); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: repeating-linear-gradient(135deg, var(--ink-900) 0 8px, var(--ink-800) 8px 16px); }
.thumb.xs { width: 56px; height: 32px; aspect-ratio: auto; border-radius: 4px; flex: none; }
.thumb.sm { width: 128px; height: 72px; aspect-ratio: auto; border-radius: 5px; flex: none; }
.thumb-wrap { position: relative; }
.thumb-wrap .code-over { position: absolute; left: 6px; top: 6px; padding: 2px 6px; border-radius: 4px; background: rgba(30, 30, 32, .85); font-family: var(--font-mono); font-size: 11px; font-weight: 700; }

/* ---------- tarjetas / grid ---------- */
.card { background: var(--ink-800); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.card h2, .card h3 { margin-bottom: 12px; }
.grid { display: grid; gap: 16px; }
.grid.kpi { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grid.two { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .grid.two { grid-template-columns: 1fr; } }
.kpi { position: relative; overflow: hidden; }
.kpi .v { font-family: var(--font-display); font-size: 34px; font-weight: 800; line-height: 1; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.kpi .l { font-size: 11px; color: var(--paper-3); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.kpi .s { font-size: 12px; color: var(--paper-3); }
.kpi.hero { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; grid-column: span 2; }
@media (max-width: 700px) { .kpi.hero { grid-column: span 1; } }
.ring { width: 92px; height: 92px; }
.ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.ring .bgc { stroke: rgba(255, 255, 255, .1); }
.ring .fg { stroke: var(--eye); transition: stroke-dashoffset 1s cubic-bezier(.2, .8, .2, 1); transform: rotate(-90deg); transform-origin: 50% 50%; }
.ring text { fill: var(--paper); font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.stagebars { display: grid; gap: 12px; }
.stagebar .h { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px; }
.stagebar .h .pct { margin-left: auto; font-family: var(--font-mono); color: var(--paper-2); }
.bar { display: flex; height: 12px; gap: 2px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .07); }
.bar span { display: block; height: 100%; transition: width .9s cubic-bezier(.2, .8, .2, 1); min-width: 0; }
.bar .approved { background: var(--paper); } .bar .uploaded { background: var(--green); } .bar .feedback { background: var(--red); } .bar .in_progress { background: var(--eye); } .bar .assigned { background: var(--paper-4); }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--paper-3); margin-top: 10px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.list { display: flex; flex-direction: column; gap: 6px; }
.list .it { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--ink-900); border: 1px solid var(--line); font-size: 13px; flex-wrap: wrap; min-width: 0; }
.list .it:hover { border-color: var(--line-2); }
.list .it .t { font-size: 11px; color: var(--paper-4); margin-left: auto; white-space: nowrap; }
.list .it > b, .list .it .dim { white-space: nowrap; }
.list .it .grow b { white-space: nowrap; }
.feed .it { animation: rise .4s; }
.feed .ic { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-size: 14px; background: rgba(255, 255, 255, .07); flex: none; }
.empty { color: var(--paper-3); text-align: center; padding: 26px 10px; font-size: 13px; }
.empty b { display: block; font-family: var(--font-display); font-size: 15px; color: var(--paper-2); margin-bottom: 4px; }
.stagerow { display: grid; grid-template-columns: auto 1fr 1.4fr 90px; gap: 8px; align-items: center; }

/* ---------- filtros ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters .search { min-width: 220px; }
.fchip { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--paper-2); font-size: 12px; font-weight: 800; }
.fchip.on { background: var(--paper); color: #1E1E20; border-color: var(--paper); }
.fchip.stage.on { color: #1E1E20; }
.viewtoggle { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.viewtoggle button { padding: 6px 12px; border: 0; background: transparent; color: var(--paper-2); font-weight: 800; font-size: 12px; }
.viewtoggle button.on { background: var(--paper); color: #1E1E20; }

/* ---------- board (tabla) ---------- */
.board-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); background: var(--ink-800); }
table.board { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1040px; }
.board th { position: sticky; top: 0; z-index: 2; background: var(--ink-900); padding: 10px 12px; text-align: left; font-family: var(--font-display); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-3); border-bottom: 1px solid var(--line-2); }
.board th.stage { color: var(--paper); }
.board th.stage i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: 0; }
.board td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.board tr.shot:hover td { background: rgba(255, 255, 255, .03); }
.board td.sh { min-width: 280px; }
.board .shcell { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; align-items: center; }
.board .code { font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.board .desc { font-size: 12px; color: var(--paper-2); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .meta { font-size: 11px; color: var(--paper-3); display: flex; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.board .meta span { white-space: nowrap; }
.cell { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; padding: 6px 8px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; min-width: 132px; transition: background .15s, border-color .15s; }
.cell:hover { background: rgba(255, 255, 255, .05); border-color: var(--line-2); }
.cell.open { background: var(--eye-dim); border-color: rgba(255, 196, 0, .5); }
.cell.locked { opacity: .55; cursor: default; }
.cell .who { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--paper-2); }
.cell .who .nm { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell .ready { font-size: 11px; color: var(--eye); font-weight: 800; }
.cell .wait { font-size: 11px; color: var(--paper-4); }
tr.drawer td { padding: 0; background: var(--ink-900); border-bottom: 2px solid var(--eye); }
.drawer-in { padding: 18px 20px 20px; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 20px; animation: rise .25s; }
@media (max-width: 1100px) { .drawer-in { grid-template-columns: 1fr 1fr; } }
.drawer-in h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.drawer-in .big { font-family: var(--font-mono); font-size: 28px; font-weight: 700; line-height: 1; }
.drawer-in .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.drawer-in .kv b { color: var(--paper-3); font-weight: 700; }
.drawer-in .storyboard { margin-bottom: 12px; }
.drawer-in .storyboard .thumb { aspect-ratio: 16 / 9; }
.statuses { display: flex; flex-wrap: wrap; gap: 6px; }
.statuses .chip { cursor: pointer; opacity: .55; }
.statuses .chip:hover { opacity: 1; transform: translateY(-1px); }
.statuses .chip.cur { opacity: 1; box-shadow: 0 0 0 2px var(--eye); }
.statuses .chip.dis { opacity: .2; cursor: not-allowed; pointer-events: none; }
.hist { font-size: 12px; color: var(--paper-2); display: flex; flex-direction: column; gap: 4px; max-height: 170px; overflow: auto; }
.hist span.t { color: var(--paper-4); font-family: var(--font-mono); font-size: 11px; margin-right: 6px; }
.upload { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.upload input[type=file] { display: none; }

/* ---------- board (vista storyboard / cards) ---------- */
.sbgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.sbcard { background: var(--ink-800); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.sbcard.open { border-color: var(--eye); }
.sbcard .thumb { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
.sbcard .body { padding: 10px 12px 12px; display: grid; gap: 8px; }
.sbcard .head { display: flex; align-items: baseline; gap: 8px; }
.sbcard .code { font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.sbcard .desc { font-size: 12px; color: var(--paper-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbcard .stages { display: grid; gap: 4px; }
.sbcard .strow { display: grid; grid-template-columns: 58px 1fr auto; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.sbcard .strow:hover { background: rgba(255, 255, 255, .05); }
.sbcard .strow.open { background: var(--eye-dim); }
.sbcard .strow .who { font-size: 12px; color: var(--paper-2); display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; min-width: 0; }
.sbcard .strow .who > span, .sbcard .strow .who .nm { overflow: hidden; text-overflow: ellipsis; }
.sbcard .drawer-in { grid-template-columns: 1fr; padding: 12px; border-top: 1px solid var(--line); }

/* ---------- mi trabajo ---------- */
.mycards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.mycard { border-top: 4px solid var(--eye); padding: 0; overflow: hidden; }
.mycard .thumb { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
.mycard .in { padding: 14px 16px 16px; }
.mycard .code { font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.mycard .big { font-family: var(--font-mono); font-size: 26px; font-weight: 700; margin: 6px 0; }
.mycard .acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ---------- equipo / reglas ---------- */
.people { display: grid; gap: 8px; }
.person { display: grid; grid-template-columns: auto 1.3fr 1fr 1.6fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r); background: var(--ink-900); border: 1px solid var(--line); }
.person.off { opacity: .55; }
.person.pending { border-color: var(--eye); }
.person .em { font-size: 12px; color: var(--paper-3); }
.person .areas { display: flex; gap: 4px; flex-wrap: wrap; }
@media (max-width: 900px) { .person { grid-template-columns: auto 1fr; } }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.form .full { grid-column: 1 / -1; }
.modal-bg { position: fixed; inset: 0; background: rgba(20, 20, 22, .78); backdrop-filter: blur(6px); display: grid; place-items: center; z-index: 50; padding: 20px; }
.modal { width: min(640px, 100%); max-height: 92vh; overflow: auto; background: var(--ink-700); border: 1px solid var(--line-2); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); animation: rise .25s; }
.modal h2 { margin-bottom: 14px; }
.modal .foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.rule .n { font-family: var(--font-display); font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.rule .d { font-size: 12px; color: var(--paper-3); margin-bottom: 12px; }
.rule .form { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.help { font-size: 12px; color: var(--paper-3); }
.pw-wall { max-width: 460px; margin: 40px auto; text-align: center; }
.pending { max-width: 520px; margin: 0 auto; text-align: center; }

/* ---------- toasts ---------- */
.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-sm); background: var(--ink-600); border: 1px solid var(--line-2); box-shadow: var(--shadow); font-size: 13px; max-width: 360px; animation: rise .3s; }
.toast.ok { border-color: var(--eye); } .toast.err { border-color: var(--red); }
.toast .ic { font-size: 18px; }

/* ---------- skeleton ---------- */
.skel { height: 14px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.14) 50%, rgba(255,255,255,.06) 100%); background-size: 400px 100%; animation: shimmer 1.2s infinite linear; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar); z-index: 40; transform: translateX(-100%); transition: transform .25s; }
  .side.open { transform: none; box-shadow: var(--shadow); }
  .menu-btn { display: inline-flex; }
  .main { padding: 16px 16px 60px; }
  .drawer-in { grid-template-columns: 1fr; }
  .board .shcell { grid-template-columns: 96px 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Versiones + feedback con acuse */
.versions { display: flex; flex-direction: column; gap: 8px; }
.ver { border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 8px 10px; background: var(--ink-800); }
.ver.cur { border-color: var(--line-3); }
.ver .vh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--paper-2); }
.ver .vh .t { color: var(--paper-4); font-family: var(--font-mono); font-size: 11px; }
.ver .fb, .fbcard { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 92, 77, .10); border: 1px solid rgba(255, 92, 77, .3); }
.fbcard { margin-top: 8px; }
.fbt { color: var(--paper); font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.fbm { color: var(--paper-4); font-size: 11px; margin: 4px 0 6px; font-family: var(--font-mono); }
.seen { color: var(--green, #3DD68C); font-size: 12px; }
.cell .vbadge { font-family: var(--font-mono); font-size: 10px; padding: 1px 5px; border-radius: 999px; background: var(--ink-500); color: var(--paper-2); }