/* Panel Núcleo Fiscal: sistema visual. Base blanca, azul oscuro como único acento. */
:root {
  --ink: #1d1d1f; --ink-2: #636366; --ink-3: #8e8e93;
  --bg: #ffffff; --surface: #f3f6fc; --fill: #e5ebf7; --card: #ffffff; --blue: #2f5bd3; --blue-tint: #e8eefc;
  --line: #1d1d1f24; --line-2: #1d1d1f12;
  --navy: #161f39; --navy-2: #24345f; --navy-tint: #e8edf9;
  --green: #00a665; --green-bg: #e3f5ec; --green-ink: #00784a;
  --orange: #ff4d00; --orange-bg: #fff0e6; --orange-ink: #b93800;
  --red: #da2f35; --red-bg: #fcecec; --red-ink: #a8232a;
  --r-s: 12px; --r-m: 16px; --r-l: 24px; --r-xl: 32px; --pill: 100px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1); --t: 160ms;
  --glass: rgb(255 255 255 / 0.56); --glass-strong: rgb(255 255 255 / 0.84);
  --shadow-float: 0 8px 40px #1d1d1f1f;
  --side: 256px; --side-mini: 76px;
  --font: "Geist", "GT Standard", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.3 var(--font); -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; }
body.locked { overflow: hidden; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
.ico { flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Tipografía ---------- */
.display { font-size: clamp(34px, 6vw, 48px); font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; }
.title { font-size: clamp(26px, 4.4vw, 32px); font-weight: 400; letter-spacing: -0.02em; }
.heading { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.lede { font-size: 18px; color: var(--ink-2); font-weight: 400; margin-top: 10px; }
.sub { color: var(--ink-2); font-size: 14px; margin-top: 4px; }
.date { color: var(--ink-2); font-size: 14px; margin-bottom: 14px; }
.date::first-letter { text-transform: uppercase; }
.meta-line { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; }
.empty { color: var(--ink-2); padding: 28px 0; }
.empty.small { padding: 12px 0; font-size: 14px; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--pill); font-size: 15px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: background var(--t) var(--ease), transform var(--t) var(--ease), color var(--t) var(--ease); }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--navy); color: #fff; }
.btn.primary:hover { background: var(--navy-2); }
.btn.soft { background: var(--surface); color: var(--ink); }
.btn.soft:hover { background: var(--fill); }
.btn.ghost { color: var(--ink-2); padding: 0 14px; }
.btn.ghost:hover { background: var(--surface); color: var(--ink); }
.btn.light { background: #fff; color: var(--navy); }
.btn.sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn.block { width: 100%; }
.btn.icon-only { width: 44px; padding: 0; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--pill); color: var(--ink-2); transition: background var(--t) var(--ease); }
.icon-btn:hover { background: var(--surface); color: var(--ink); }
.icon-btn.sm { width: 32px; height: 32px; }
.icon-btn-spacer { width: 44px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--navy); font-weight: 500; font-size: 14px; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.text-link.inline { min-height: 0; display: inline; }
.link-title { text-align: left; font: inherit; }
.link-title:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Chips y avatares ---------- */
.chip { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: var(--pill); font-size: 13px; font-weight: 500; white-space: nowrap; background: var(--surface); color: var(--ink-2); }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-green { background: var(--green-bg); color: var(--green-ink); }
.chip-orange { background: var(--orange-bg); color: var(--orange-ink); }
.chip-red { background: var(--red-bg); color: var(--red-ink); }
.chip-navy { background: var(--navy-tint); color: var(--navy); }
.avatar { --s: 32px; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 50%; color: #fff; font-size: calc(var(--s) * 0.42); font-weight: 500; }
.circle { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--navy-tint); color: var(--navy); }

/* ---------- Estructura ---------- */
#app { min-height: 100vh; }
.side { position: fixed; inset: 0 auto 0 0; width: var(--side); display: flex; flex-direction: column; padding: 20px 14px; background: var(--bg); border-right: 1px solid var(--line-2); z-index: 30; transition: width var(--t) var(--ease), transform 260ms var(--ease); }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; font-weight: 500; font-size: 15px; white-space: nowrap; }
.brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; flex: none; }
.brand-mark.lg { width: 48px; height: 48px; border-radius: 14px; font-size: 16px; margin-bottom: 24px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--pill); color: var(--ink-2); font-size: 15px; text-decoration: none; white-space: nowrap; transition: background var(--t) var(--ease), color var(--t) var(--ease); width: 100%; }
.nav-item:hover { background: var(--surface); color: var(--ink); }
.nav-item.is-on { background: var(--navy); color: #fff; }
.nav-item .badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--pill); background: var(--orange); color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.nav-item.is-on .badge { background: #fff; color: var(--navy); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.view-as { padding: 14px 12px; border-radius: var(--r-m); background: var(--surface); }
.view-as-label { font-size: 12px; color: var(--ink-2); margin-bottom: 8px; }
.view-as-opts { display: flex; flex-direction: column; gap: 2px; }
.view-as-btn { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px; border-radius: var(--pill); font-size: 14px; color: var(--ink-2); transition: background var(--t) var(--ease); }
.view-as-btn:hover { background: #fff; color: var(--ink); }
.view-as-btn.is-on { background: #fff; color: var(--ink); font-weight: 500; box-shadow: inset 0 0 0 1px var(--line); }
.side-toggle { position: absolute; top: 28px; right: -15px; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-2); transition: color var(--t) var(--ease), transform var(--t) var(--ease); }
.side-toggle:hover { color: var(--navy); transform: scale(1.08); }
.side-toggle::before { content: ""; position: absolute; inset: -8px; }

.side.is-collapsed { width: var(--side-mini); padding-inline: 14px; }
.side.is-collapsed .nav-label, .side.is-collapsed .brand-name, .side.is-collapsed .badge, .side.is-collapsed .view-as-label { display: none; }
.side.is-collapsed .nav-item { justify-content: center; padding: 0; }
.side.is-collapsed .view-as { padding: 8px 4px; background: none; }
.side.is-collapsed .view-as-btn { justify-content: center; padding: 0; }
.side.is-collapsed .brand { padding-inline: 6px; }
.side.is-collapsed .nav-item[href="#/avisos"] { position: relative; }

.main-wrap { margin-left: var(--side); transition: margin var(--t) var(--ease); }
.side.is-collapsed ~ .main-wrap { margin-left: var(--side-mini); }
.main { max-width: 800px; margin: 0 auto; padding: 56px 32px 96px; outline: none; }
.topbar { display: none; }
.scrim-drawer { display: none; }

.ro-band { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 24px; background: var(--navy); color: #fff; font-size: 14px; }
.ro-band span { flex: 1; }

/* ---------- Cabeceras y bloques ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.block { margin-top: 48px; }
.block.tight { margin-top: 0; margin-bottom: 28px; }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.block-head h2, .switch-row h2 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.more { margin-top: 4px; }

/* ---------- Dashboard ---------- */
.hero { padding-bottom: 32px; }
.today { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.today-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; padding: 18px 20px; border-radius: var(--r-l); background: var(--surface); }
.today-body h3 { font-size: 16px; font-weight: 500; }
.today-body p { color: var(--ink-2); font-size: 14px; margin: 4px 0 10px; }
.today-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }

.week-stat { display: flex; align-items: center; gap: 28px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.numeral { font-size: 48px; line-height: 1; font-weight: 400; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.numeral span { color: var(--ink-3); font-weight: 300; }
.week-stat-side { flex: 1; display: flex; flex-direction: column; gap: 12px; color: var(--ink-2); font-size: 14px; }

/* El carril: cómo avanza cada pieza por Drive. */
.rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.rail li { min-width: 0; }
.rail-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; padding: 18px 14px 18px 0; text-align: left; border-radius: var(--r-s); transition: background var(--t) var(--ease); }
.rail-step:hover { background: var(--surface); padding-left: 10px; }
.rail-n { font-size: 44px; line-height: 1; font-weight: 300; letter-spacing: -0.03em; color: var(--navy); font-variant-numeric: tabular-nums; }
.rail-step.is-empty .rail-n { color: var(--ink-3); }
.rail-name { font-size: 13px; color: var(--ink-2); line-height: 1.3; }
.rail-line { position: absolute; top: 40px; right: 14px; left: 52px; height: 1px; background: var(--line); }
.rail-step:hover .rail-line { display: none; }

.pub-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pub-row { display: grid; grid-template-columns: 168px 1fr; gap: 18px; align-items: center; padding: 12px; border-radius: var(--r-l); background: var(--surface); }
.pub-body h3 { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.pub-body .meta-line { margin-top: 2px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------- Progreso ---------- */
.progress-label { font-size: 15px; color: var(--ink-2); margin-bottom: 10px; }
.progress-label strong { color: var(--ink); font-weight: 500; }
.bar { height: 6px; border-radius: var(--pill); background: var(--fill); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--green); border-radius: inherit; transition: width 420ms var(--ease); }

/* ---------- Stepper ---------- */
.stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.step { display: flex; align-items: flex-start; gap: 12px; min-height: 64px; padding: 14px 16px; border-radius: var(--r-m); background: var(--surface); text-align: left; transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.step:hover { background: var(--fill); }
.step-n { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--ink-2); font-size: 14px; font-weight: 500; }
.step-text { display: flex; flex-direction: column; gap: 3px; }
.step-name { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.25; }
.step-count { font-size: 13px; color: var(--ink-2); }
.step.is-on { background: var(--navy); }
.step.is-on .step-name { color: #fff; }
.step.is-on .step-count { color: rgb(255 255 255 / 0.72); }
.step.is-on .step-n { background: rgb(255 255 255 / 0.16); color: #fff; }
.phase-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

/* ---------- Tareas ---------- */
.task-list { display: flex; flex-direction: column; gap: 10px; }
.task { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 22px 24px; border-radius: var(--r-l); background: var(--surface); transition: opacity 300ms var(--ease); }
.task-title { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.task-do { color: var(--ink-2); margin-top: 6px; font-size: 15px; }
.task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.who { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.task-link { margin-top: 6px; }
.task-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.task.is-done { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); padding-block: 16px; }
.task.is-done .task-title { text-decoration: line-through; text-decoration-color: var(--ink-3); color: var(--ink-2); font-size: 16px; }
.task.is-done .task-do { display: none; }
.done-note { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--green-ink); }

/* ---------- Piezas ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--pill); background: var(--surface); font-size: 14px; color: var(--ink-2); transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.seg-btn span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.seg-btn:hover { background: var(--fill); color: var(--ink); }
.seg-btn.is-on { background: var(--navy); color: #fff; }
.seg-btn.is-on span { color: rgb(255 255 255 / 0.7); }
.select-pill { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--pill); background: var(--surface); color: var(--ink-2); }
.select-pill select { appearance: none; border: 0; background: transparent; font-size: 14px; color: var(--ink); padding-right: 6px; cursor: pointer; outline: none; }
.select-pill:focus-within { box-shadow: 0 0 0 2px var(--navy); }
.folder-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin-bottom: 16px; }
.folder-note a { color: var(--navy); }
.piece-list { display: flex; flex-direction: column; gap: 12px; }
.piece { position: relative; display: grid; grid-template-columns: 280px 1fr; gap: 22px; align-items: center; padding: 12px; border-radius: var(--r-l); background: var(--surface); transition: background var(--t) var(--ease); }
.piece:hover { background: var(--fill); }
.piece h3 { font-size: 17px; font-weight: 500; margin: 10px 0 6px; letter-spacing: -0.01em; }
.stretch::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-l); }
.piece .thumb { position: relative; z-index: 1; }
.piece-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.type-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.last-comment { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--ink-2); min-width: 0; }
.last-comment span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.last-comment strong { color: var(--ink); font-weight: 500; }

/* Miniatura 16:9: nunca un hueco vacío. */
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; background: linear-gradient(135deg, #1e2a4d 0%, #161f39 55%, #0f1529 100%); color: rgb(255 255 255 / 0.9); text-decoration: none; }
.thumb-design, .thumb-carousel { background: linear-gradient(135deg, #e9ecf3 0%, #d7dcea 100%); color: var(--navy); }
.thumb-other { background: var(--fill); color: var(--ink-2); }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb-art { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0.32; }
.thumb-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--glass); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); color: #fff; transition: transform var(--t) var(--ease); padding-left: 3px; }
.thumb:hover .thumb-play { transform: translate(-50%, -50%) scale(1.08); }
.thumb-src { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--pill); background: var(--glass-strong); color: var(--ink); font-size: 12px; font-weight: 500; }
.thumb-sm .thumb-play { width: 36px; height: 36px; }
.thumb-lg { border-radius: var(--r-l); }
.thumb-lg .thumb-play { width: 72px; height: 72px; }

/* ---------- Detalle de pieza ---------- */
.detail { display: flex; flex-direction: column; gap: 18px; }
.detail-head { display: flex; flex-direction: column; gap: 10px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chat { border-top: 1px solid var(--line); padding-top: 18px; }
.chat-title { font-size: 15px; font-weight: 500; margin-bottom: 12px; }
.chat-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bubble { display: flex; gap: 10px; align-items: flex-start; }
.bubble > div { background: var(--surface); border-radius: 4px 18px 18px 18px; padding: 10px 14px; max-width: 520px; }
.bubble.mine { flex-direction: row-reverse; }
.bubble.mine > div { background: var(--navy-tint); border-radius: 18px 4px 18px 18px; }
.bubble-head { display: flex; gap: 8px; align-items: baseline; font-size: 13px; margin-bottom: 3px; }
.bubble-head strong { font-weight: 500; }
.bubble-head span { color: var(--ink-3); font-size: 12px; }
.bubble-text { font-size: 15px; }
.composer { display: flex; gap: 8px; }
.composer input { flex: 1; min-height: 44px; padding: 0 18px; border-radius: var(--pill); border: 1px solid var(--line); background: #fff; outline: none; }
.composer input:focus { border-color: var(--navy); }
.more-detail { border-top: 1px solid var(--line); padding-top: 6px; }
.more-detail summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none; color: var(--ink-2); font-size: 14px; font-weight: 500; }
.more-detail summary::-webkit-details-marker { display: none; }
.more-detail[open] summary .ico { transform: rotate(180deg); }
.more-detail dl { margin: 6px 0 14px; display: grid; gap: 10px; font-size: 14px; }
.more-detail dl div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.more-detail dt { color: var(--ink-2); }
.more-detail dd { margin: 0; }
.more-detail dd a { color: var(--navy); }
.history { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--ink-2); }
.history li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-2); }
.history li span:first-child { color: var(--ink); }

/* ---------- Formularios ---------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.form .heading { margin-bottom: 2px; padding-right: 44px; }
.field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.field > span { font-size: 14px; font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; font-size: 15px; outline: none; transition: border-color var(--t) var(--ease); }
.field textarea { resize: vertical; line-height: 1.4; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-tint); }
.field-row { display: flex; gap: 12px; }
.field-hint { font-size: 13px; color: var(--ink-2); margin-top: -8px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mini-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-2); }
.mini-steps li { display: flex; align-items: center; gap: 10px; }
.mini-steps li > span:first-child { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--navy-tint); color: var(--navy); font-size: 12px; font-weight: 600; }
.mini-steps .text-link { min-height: 32px; }
.inline-form { display: flex; gap: 6px; margin-top: 4px; }
.inline-form input { min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--pill); min-width: 0; flex: 1; font-size: 14px; outline: none; }
.inline-form input:focus { border-color: var(--navy); }

/* ---------- Modal con vidrio ---------- */
#modal { position: fixed; inset: 0; z-index: 60; display: none; }
#modal.open { display: grid; place-items: center; padding: 24px; }
.modal-scrim { position: absolute; inset: 0; background: rgb(245 245 247 / 0.56); backdrop-filter: blur(50px) saturate(1.6); -webkit-backdrop-filter: blur(50px) saturate(1.6); animation: fade 200ms var(--ease); }
.modal-card { position: relative; width: min(520px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 28px; border-radius: var(--r-xl); background: var(--glass-strong); backdrop-filter: blur(50px) saturate(1.6); -webkit-backdrop-filter: blur(50px) saturate(1.6); box-shadow: var(--shadow-float), inset 0 0 0 1px rgb(255 255 255 / 0.6); outline: none; animation: rise 260ms var(--ease); }
.modal-card.wide { width: min(680px, 100%); }
.modal-x { position: absolute; top: 14px; right: 14px; z-index: 2; background: var(--glass-strong); }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(0.98); } }

/* ---------- Toast ---------- */
#toast { position: fixed; right: 24px; bottom: 24px; z-index: 70; width: min(380px, calc(100vw - 32px)); pointer-events: none; opacity: 0; transform: translateY(12px); transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
#toast.show { opacity: 1; transform: none; pointer-events: auto; }
.toast-card { padding: 16px 16px 16px 18px; border-radius: var(--r-l); background: var(--glass-strong); backdrop-filter: blur(50px) saturate(1.6); -webkit-backdrop-filter: blur(50px) saturate(1.6); box-shadow: var(--shadow-float), inset 0 0 0 1px var(--line-2); }
.toast-head { display: flex; align-items: center; gap: 10px; }
.toast-head strong { flex: 1; font-weight: 500; font-size: 15px; }
.toast-ok { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff; }
.toast-card ul { list-style: none; margin: 10px 0 0; padding: 0 0 0 38px; display: flex; flex-direction: column; gap: 6px; }
.toast-card li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.toast-card li .ico { color: var(--green); margin-top: 1px; }

/* ---------- Avisos ---------- */
.notice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.notice { position: relative; display: flex; gap: 14px; align-items: flex-start; width: 100%; padding: 16px 18px; border-radius: var(--r-l); text-align: left; transition: background var(--t) var(--ease); }
.notice:hover { background: var(--surface); }
.notice.is-unread { background: var(--surface); }
.notice-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.notice-text { font-size: 15px; }
.notice.is-unread .notice-text { font-weight: 500; }
.notice-meta { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 13px; }
.file-chip { display: inline-flex; align-items: center; gap: 5px; color: var(--navy); font-weight: 500; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); margin-top: 6px; flex: none; }

/* ---------- Equipo ---------- */
.team-list { display: flex; flex-direction: column; gap: 12px; }
.member { padding: 24px; border-radius: var(--r-l); background: var(--surface); display: flex; flex-direction: column; gap: 16px; }
.member-head { display: flex; align-items: center; gap: 14px; }
.member-head .heading { margin-bottom: 6px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.stats div { padding-right: 12px; border-right: 1px solid var(--line); }
.stats div + div { padding-left: 16px; }
.stats div:last-child { border-right: 0; }
.stats dt { font-size: 13px; color: var(--ink-2); }
.stats dd { margin: 4px 0 0; font-size: 30px; font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stats dd.is-red { color: var(--red); }
.member-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.member-tasks li { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-2); font-size: 14px; }
.member-tasks li span:first-child { flex: 1; min-width: 160px; }

/* ---------- Referencias ---------- */
.rules, .ref-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rules li { display: flex; align-items: center; gap: 14px; font-size: 15px; }
.ref-list li { display: flex; align-items: center; gap: 6px; }
.ref-link { flex: 1; display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: var(--r-l); background: var(--surface); text-decoration: none; color: var(--ink); transition: background var(--t) var(--ease); }
.ref-link:hover { background: var(--fill); }
.ref-link > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ref-link strong { font-weight: 500; }
.ref-link > span:nth-child(2) span { color: var(--ink-2); font-size: 14px; }
.ref-link > .ico { color: var(--ink-3); }
.rivals { display: flex; flex-wrap: wrap; gap: 8px; }
.rivals span { padding: 8px 14px; border-radius: var(--pill); background: var(--surface); font-size: 14px; }

/* ---------- Perfil ---------- */
.profile-card { display: flex; align-items: center; gap: 20px; padding: 24px; border-radius: var(--r-l); background: var(--surface); }
.profile-card .heading { margin-bottom: 2px; }
.profile-card .chip { margin-top: 10px; }
.people-list { list-style: none; margin: 0; padding: 0; }
.people-list li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.people-list li:last-child { border-bottom: 1px solid var(--line-2); }
.people-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.people-main strong { font-weight: 500; }
.people-main > span { color: var(--ink-2); font-size: 14px; overflow-wrap: anywhere; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; border-radius: var(--r-l); background: var(--surface); }
.switch { flex: none; position: relative; width: 52px; height: 32px; border-radius: var(--pill); background: var(--fill); transition: background var(--t) var(--ease); }
.switch span { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #1d1d1f33; transition: transform var(--t) var(--ease); }
.switch.is-on { background: var(--green); }
.switch.is-on span { transform: translateX(20px); }
.switch::before { content: ""; position: absolute; inset: -6px; }
.activity { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.activity li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-2); color: var(--ink-2); }
.activity li span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.activity strong { color: var(--ink); font-weight: 500; }

/* ---------- Entrada ---------- */
body.is-login { background: var(--surface); }
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(400px, 100%); padding: 40px 32px 32px; border-radius: var(--r-xl); background: #fff; display: flex; flex-direction: column; gap: 16px; }
.login-card h1 { font-size: 24px; font-weight: 500; letter-spacing: -0.015em; }
.login-card .sub { margin-top: -10px; }
.code-input { font-size: 26px !important; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; }
.help { font-size: 13px; color: var(--ink-2); margin-top: -8px; }
.error { font-size: 14px; color: var(--red-ink); }
.login-links { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* ---------- Tutorial ---------- */
#tour { position: fixed; inset: 0; z-index: 80; display: none; pointer-events: none; }
#tour.open { display: block; }
.tour-ring { position: fixed; border-radius: var(--r-l); box-shadow: 0 0 0 3px var(--navy), 0 0 0 9999px rgb(29 29 31 / 0.16); transition: all 260ms var(--ease); pointer-events: none; }
.tour-card { position: fixed; pointer-events: auto; padding: 22px; border-radius: var(--r-l); background: var(--glass-strong); backdrop-filter: blur(50px) saturate(1.6); -webkit-backdrop-filter: blur(50px) saturate(1.6); box-shadow: var(--shadow-float), inset 0 0 0 1px var(--line-2); transition: top 260ms var(--ease), left 260ms var(--ease); }
.tour-bar { height: 4px; border-radius: var(--pill); background: var(--fill); overflow: hidden; margin-bottom: 14px; }
.tour-bar span { display: block; height: 100%; background: var(--navy); transition: width 260ms var(--ease); }
.tour-count { font-size: 12px; color: var(--ink-2); }
.tour-card h2 { font-size: 18px; font-weight: 500; margin: 6px 0 6px; }
.tour-card p:not(.tour-count) { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.tour-actions { display: flex; align-items: center; gap: 6px; margin-top: 16px; }
.grow { flex: 1; }

/* ---------- Móvil ---------- */
@media (max-width: 899px) {
  .side, .side.is-collapsed { width: 284px; padding: 20px 14px; transform: translateX(-100%); box-shadow: none; }
  .side.is-collapsed .nav-label, .side.is-collapsed .brand-name, .side.is-collapsed .badge, .side.is-collapsed .view-as-label { display: revert; }
  .side.is-collapsed .nav-item { justify-content: flex-start; padding: 0 12px; }
  .side.is-collapsed .view-as { padding: 14px 12px; background: var(--surface); }
  .side.is-collapsed .view-as-btn { justify-content: flex-start; padding: 0 8px; }
  .side-toggle { display: none; }
  body.drawer-open .side { transform: none; box-shadow: var(--shadow-float); }
  body.drawer-open .scrim-drawer { display: block; position: fixed; inset: 0; z-index: 25; background: rgb(245 245 247 / 0.56); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
  .main-wrap, .side.is-collapsed ~ .main-wrap { margin-left: 0; }
  .topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; background: rgb(255 255 255 / 0.84); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); border-bottom: 1px solid var(--line-2); }
  .topbar .brand { padding: 0; }
  .ro-band { top: 57px; padding: 10px 16px; flex-wrap: wrap; }
  .main { padding: 28px 16px 80px; }
  .page-head { margin-bottom: 24px; }
  .block { margin-top: 40px; }
  .today-row { grid-template-columns: 44px 1fr; padding: 16px; }
  .today-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .today-actions .btn { flex: 1; }
  .rail { grid-template-columns: repeat(3, 1fr); row-gap: 4px; }
  .rail-line { display: none; }
  .rail-step { padding: 14px 8px 14px 0; }
  .pub-row { grid-template-columns: 1fr; }
  .stepper { grid-template-columns: 1fr; }
  .step { min-height: 56px; align-items: center; }
  .task { grid-template-columns: 1fr; padding: 20px; }
  .task-actions { flex-direction: row; flex-wrap: wrap; }
  .task-actions .btn { flex: 1; }
  .piece { grid-template-columns: 1fr; gap: 14px; }
  .piece-body { padding: 0 6px 6px; }
  .filters { flex-direction: column; align-items: stretch; }
  .select-pill { align-self: flex-start; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
  .stats div:nth-child(2) { border-right: 0; }
  .stats div:nth-child(3) { padding-left: 0; }
  .field-row { flex-direction: column; }
  #modal.open { padding: 0; place-items: end stretch; }
  .modal-card, .modal-card.wide { width: 100%; max-height: 92vh; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); }
  #toast { right: 16px; left: 16px; bottom: 16px; width: auto; }
  .head-actions { width: 100%; }
  .head-actions .btn { flex: 1; }
}

/* Informe dentro del panel (si el navegador bloquea la ventana nueva) */
.report-frame h1 { font-size: 28px; font-weight: 400; padding-right: 44px; }
.report-frame h2 { font-size: 16px; font-weight: 500; margin: 24px 0 10px; }
.report-frame .sub { margin-bottom: 18px; }
.report-frame .nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 16px 0; border-block: 1px solid var(--line); }
.report-frame .nums b { display: block; font-size: 30px; font-weight: 300; }
.report-frame .nums span { color: var(--ink-2); font-size: 13px; }
.report-frame .chips span { display: inline-block; background: var(--surface); border-radius: var(--pill); padding: 5px 12px; margin: 0 6px 6px 0; font-size: 13px; }
.report-frame table { width: 100%; border-collapse: collapse; font-size: 13px; display: block; overflow-x: auto; }
.report-frame th { text-align: left; font-weight: 500; color: var(--ink-2); padding: 8px 6px; border-bottom: 1px solid var(--line); }
.report-frame td { padding: 8px 6px; border-bottom: 1px solid var(--line-2); }
.report-frame a { color: var(--navy); }
.report-frame .none { color: var(--ink-2); }


/* ================= Rediseño v2: más visual, claro y motivador ================= */
.search-btn { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; margin-bottom: 14px; border-radius: var(--pill); background: var(--surface); color: var(--ink-2); font-size: 14px; width: 100%; transition: background var(--t) var(--ease); }
.search-btn:hover { background: var(--fill); color: var(--ink); }
.search-btn kbd { margin-left: auto; font: 500 12px var(--font); padding: 2px 7px; border-radius: 6px; background: #fff; color: var(--ink-3); }
.side.is-collapsed .search-btn { justify-content: center; padding: 0; }
.side.is-collapsed .search-btn kbd { display: none; }

/* Banner de bienvenida: el progreso es protagonista. */
.welcome { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 24px 28px; align-items: center; padding: 32px 32px 26px; border-radius: var(--r-xl); color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #3a56a8 0%, rgb(58 86 168 / 0) 55%), radial-gradient(80% 120% at 0% 100%, #22346a 0%, rgb(34 52 106 / 0) 60%), #161f39; }
.welcome .date { color: rgb(255 255 255 / 0.7); }
.welcome .lede { color: rgb(255 255 255 / 0.82); margin-top: 8px; }
.welcome-line { grid-column: 1 / -1; padding: 16px 18px 14px; border-radius: var(--r-l); background: rgb(255 255 255 / 0.08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.ring { flex: none; }
.ring-n { fill: #fff; font: 300 28px var(--font); letter-spacing: -0.02em; }
.ring-sub { fill: rgb(255 255 255 / 0.7); font: 400 12px var(--font); }
.alert-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 16px; padding: 0 16px; border-radius: var(--pill); background: rgb(255 77 0 / 0.16); color: #ffd2bd; font-size: 14px; font-weight: 500; text-align: left; box-shadow: inset 0 0 0 1px rgb(255 140 90 / 0.35); }
.alert-pill:hover { background: rgb(255 77 0 / 0.24); }

/* Línea de la semana */
.wline-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wday { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0; border-radius: var(--r-s); }
.wdots { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 10px; max-width: 48px; }
.wdots i { width: 9px; height: 9px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px var(--navy); }
.wdots i.ok { background: var(--green); box-shadow: none; }
.wdots i.late { box-shadow: inset 0 0 0 2px var(--red); }
.wlabel { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--ink-2); line-height: 1.2; }
.wlabel b { font-size: 15px; font-weight: 500; color: var(--ink); }
.wday.is-today { background: var(--navy); }
.wday.is-today .wlabel, .wday.is-today .wlabel b { color: #fff; }
.wday.is-today .wdots i:not(.ok):not(.late) { box-shadow: inset 0 0 0 2px #fff; }
.wtrack { height: 6px; margin-top: 10px; border-radius: var(--pill); background: var(--fill); overflow: hidden; }
.wtrack span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #00a665, #3ddc97); transition: width 500ms var(--ease); }
.welcome .wlabel { color: rgb(255 255 255 / 0.66); }
.welcome .wlabel b { color: #fff; }
.welcome .wdots i:not(.ok):not(.late) { box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.85); }
.welcome .wday.is-today { background: rgb(255 255 255 / 0.16); }
.welcome .wtrack { background: rgb(255 255 255 / 0.14); }

/* Lo siguiente */
.next { margin-top: 20px; padding: 24px; border-radius: var(--r-xl); background: var(--card); box-shadow: 0 0 0 1px var(--line-2), 0 12px 32px -18px rgb(22 31 57 / 0.35); }
.next.u-0 { box-shadow: 0 0 0 1.5px var(--red), 0 12px 32px -18px rgb(218 47 53 / 0.4); }
.next.u-1 { box-shadow: 0 0 0 1.5px var(--orange), 0 12px 32px -18px rgb(255 77 0 / 0.35); }
.next.is-empty { display: flex; align-items: center; gap: 16px; }
.next-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--blue); margin-bottom: 14px; }
.next-body { display: flex; gap: 16px; align-items: flex-start; }
.next-title { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; }
.next-do { color: var(--ink-2); margin: 6px 0 12px; font-size: 15px; }
.next-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-left: 64px; }

.flow-ico { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 16px; }
.flow-guion { background: #e8eefc; color: #2f5bd3; }
.flow-material { background: #e6f4fb; color: #0f6c97; }
.flow-edicion { background: #fff0e6; color: #b93800; }
.flow-revision { background: #f1ebfa; color: #6a44a6; }
.flow-publicacion { background: #e3f5ec; color: #00784a; }

.extra-cta { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 12px; padding: 16px 20px; border-radius: var(--r-l); background: var(--surface); text-align: left; transition: background var(--t) var(--ease); }
.extra-cta:hover { background: var(--fill); }
.extra-cta > .ico:first-child { color: var(--blue); }
.extra-cta > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.extra-cta strong { font-weight: 500; }
.extra-cta > span > span { font-size: 13px; color: var(--ink-2); }

/* Checklist */
.checklist { display: flex; flex-direction: column; gap: 8px; }
.group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.group-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); padding: 4px 4px 2px; }
.group-title span { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--pill); display: grid; place-items: center; font-size: 12px; background: var(--surface); }
.g-0 .group-title { color: var(--red-ink); } .g-0 .group-title span { background: var(--red-bg); }
.g-1 .group-title { color: var(--orange-ink); } .g-1 .group-title span { background: var(--orange-bg); }
.trow { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-l); background: var(--card); box-shadow: 0 0 0 1px var(--line-2); transition: box-shadow var(--t) var(--ease), background var(--t) var(--ease); }
.trow:hover { box-shadow: 0 0 0 1px var(--line), 0 8px 24px -16px rgb(22 31 57 / 0.4); }
.trow.u-0:not(.is-done) { box-shadow: inset 3px 0 0 var(--red), 0 0 0 1px var(--line-2); }
.trow.u-1:not(.is-done) { box-shadow: inset 3px 0 0 var(--orange), 0 0 0 1px var(--line-2); }
.tick { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: transparent; box-shadow: inset 0 0 0 2px var(--fill); background: #fff; transition: all 200ms var(--ease); }
.tick:hover { color: var(--green); box-shadow: inset 0 0 0 2px var(--green); }
.tick.is-on { background: var(--green); color: #fff; box-shadow: none; animation: pop 320ms var(--ease); }
@keyframes pop { 50% { transform: scale(1.15); } }
.trow-main { display: flex; flex-direction: column; gap: 4px; text-align: left; min-width: 0; }
.trow-title { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.trow-do { font-size: 14px; color: var(--ink-2); }
.trow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.trow-main:hover .trow-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
.trow.is-done { background: transparent; box-shadow: 0 0 0 1px var(--line-2); }
.trow.is-done .trow-title { text-decoration: line-through; color: var(--ink-3); }
.trow.is-done .trow-do { display: none; }
.trow-side { display: flex; gap: 6px; }
.count { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-2); }
.count.link { min-height: 32px; }
.count.link:hover { color: var(--navy); }
.tag-extra { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: var(--pill); background: var(--orange-bg); color: var(--orange-ink); font-size: 12px; font-weight: 500; vertical-align: 2px; }
.done-group { margin-top: 6px; }
.done-group summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--pill); background: var(--green-bg); color: var(--green-ink); font-size: 14px; font-weight: 500; cursor: pointer; list-style: none; margin-bottom: 8px; }
.done-group summary::-webkit-details-marker { display: none; }
.done-group[open] summary .ico:last-child { transform: rotate(180deg); }
.done-group .trow { margin-bottom: 8px; }

/* Tareas: cabecera y progreso */
.week-btn { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 44px; margin-top: 10px; padding: 0 16px; border-radius: var(--pill); background: var(--surface); font-size: 15px; font-weight: 500; text-align: left; transition: background var(--t) var(--ease); }
.week-btn:hover { background: var(--fill); }
.week-btn .muted { color: var(--ink-2); font-weight: 400; font-size: 14px; }
.progress-card { padding: 22px 24px; border-radius: var(--r-xl); background: var(--card); box-shadow: 0 0 0 1px var(--line-2); margin-bottom: 20px; }
.progress-top { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.progress-top .numeral span { font-size: 26px; color: var(--ink-3); }
.progress-title { font-size: 17px; font-weight: 500; }
.step { background: var(--card); box-shadow: 0 0 0 1px var(--line-2); }
.step:hover { background: var(--surface); }
.step.is-past .step-n { background: var(--green); color: #fff; }
.step.is-on { box-shadow: none; }
.step-n { background: var(--surface); }

/* Detalle de tarea */
.detail-top { display: flex; gap: 14px; align-items: center; padding-right: 40px; }
.detail-top .heading { margin-top: 4px; }
.detail-do { font-size: 16px; color: var(--ink); }
.materials { display: grid; gap: 8px; }
.mat { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: var(--r-m); background: #fff; box-shadow: 0 0 0 1px var(--line-2); text-decoration: none; color: var(--ink); transition: box-shadow var(--t) var(--ease); }
.mat:hover { box-shadow: 0 0 0 1px var(--blue); }
.mat .flow-ico { width: 40px; height: 40px; border-radius: 12px; }
.mat > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.mat strong { font-weight: 500; }
.mat > span:nth-child(2) span { font-size: 13px; color: var(--ink-2); }

/* Conversación en globos, con respuestas */
.bubble-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 520px; }
.bubble > div.bubble-wrap { background: none; padding: 0; border-radius: 0; }
.bubble-box { background: var(--surface); border-radius: 4px 20px 20px 20px; padding: 10px 14px; }
.bubble.mine { flex-direction: row-reverse; }
.bubble.mine > .bubble-wrap { align-items: flex-end; }
.bubble.mine .bubble-box { background: var(--navy); color: #fff; border-radius: 20px 4px 20px 20px; }
.bubble.mine .bubble-head span { color: rgb(255 255 255 / 0.6); }
.reply-btn { align-self: flex-start; min-height: 32px; padding: 0 10px; font-size: 13px; font-weight: 500; color: var(--blue); border-radius: var(--pill); }
.bubble.mine .reply-btn { align-self: flex-end; }
.reply-btn:hover { background: var(--blue-tint); }
.replies { margin: 6px 0 0 4px; padding-left: 12px; border-left: 2px solid var(--fill); }
.bubble.reply .bubble-box { font-size: 14px; }
.composer { flex-direction: column; gap: 8px; }
.composer-row { display: flex; gap: 8px; }
.composer-row input { flex: 1; min-height: 44px; padding: 0 18px; border-radius: var(--pill); border: 1px solid var(--line); background: #fff; outline: none; }
.composer-row input:focus { border-color: var(--navy); }
.replying { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 14px; border-radius: var(--pill); background: var(--blue-tint); color: var(--blue); font-size: 13px; font-weight: 500; }

/* Calendario */
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 8px; }
.cal-nav strong { font-weight: 500; }
.cal-grid { display: flex; flex-direction: column; gap: 4px; }
.cal-row { display: grid; grid-template-columns: 40px repeat(7, 1fr); gap: 2px; align-items: center; border-radius: var(--r-m); padding: 2px; transition: background var(--t) var(--ease); }
.cal-headrow span { text-align: center; font-size: 12px; color: var(--ink-3); padding: 4px 0; }
.cal-wk { position: relative; text-align: center; font-size: 12px; color: var(--ink-3); }
.cal-wk i { position: absolute; left: 50%; bottom: -7px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--blue); }
.cal-day { height: 44px; border-radius: 12px; font-size: 15px; font-variant-numeric: tabular-nums; transition: background var(--t) var(--ease); }
.cal-day:hover { background: var(--surface); }
.cal-day.out { color: var(--ink-3); }
.cal-day.today { box-shadow: inset 0 0 0 1.5px var(--navy); font-weight: 500; }
.cal-row.is-cur { background: var(--surface); }
.cal-row.is-sel { background: var(--navy); }
.cal-row.is-sel .cal-day, .cal-row.is-sel .cal-wk { color: #fff; }
.cal-row.is-sel .cal-wk i { background: #fff; }
.cal-row.is-sel .cal-day:hover { background: rgb(255 255 255 / 0.14); }
.cal-row.is-sel .cal-day.on { background: #fff; color: var(--navy); font-weight: 500; }
.cal-row.is-sel .cal-day.today { box-shadow: inset 0 0 0 1.5px #fff; }
.cal-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.cal-foot p { display: flex; flex-direction: column; gap: 2px; }
.cal-foot strong { font-weight: 500; }
.cal-foot p span { font-size: 14px; color: var(--ink-2); }

/* Formularios: elección y días */
fieldset.field { border: 0; padding: 0; margin: 0; }
fieldset.field legend { font-size: 14px; font-weight: 500; margin-bottom: 8px; padding: 0; }
.choice { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; }
.choice label { position: relative; }
.choice input, .daystrip input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--pill); background: var(--surface); font-size: 14px; cursor: pointer; transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.choice input:checked + span { background: var(--navy); color: #fff; }
.choice input:focus-visible + span, .daystrip input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }
.daystrip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.daystrip span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 54px; border-radius: 14px; background: var(--surface); cursor: pointer; transition: background var(--t) var(--ease); }
.daystrip small { font-size: 12px; color: var(--ink-2); }
.daystrip b { font-size: 16px; font-weight: 500; }
.daystrip input:checked + span { background: var(--navy); color: #fff; }
.daystrip input:checked + span small { color: rgb(255 255 255 / 0.7); }
fieldset.field input[type="url"] { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-s); margin-bottom: 6px; outline: none; }
fieldset.field input[type="url"]:focus { border-color: var(--navy); }
.btn.danger { color: var(--red-ink); }
.btn.danger:hover { background: var(--red-bg); color: var(--red-ink); }
.file-field input { padding: 9px 12px !important; }

/* Peticiones extra */
.extra-list { display: flex; flex-direction: column; gap: 10px; }
.extra { padding: 18px 20px; border-radius: var(--r-l); background: var(--card); box-shadow: 0 0 0 1px var(--line-2); display: flex; flex-direction: column; gap: 10px; }
.extra-head { display: flex; align-items: center; gap: 10px; }
.extra-head > div { flex: 1; display: flex; flex-direction: column; }
.extra-head strong { font-weight: 500; font-size: 14px; }
.extra-head > div span { font-size: 12px; color: var(--ink-3); }
.extra h3 { font-size: 17px; font-weight: 500; }
.extra-text { color: var(--ink-2); font-size: 15px; }
.attach { display: flex; flex-wrap: wrap; gap: 6px; }
.attach a, .attach span { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--pill); background: var(--surface); font-size: 13px; color: var(--navy); text-decoration: none; }

/* Buscador */
.search-field { display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: 52px; border-radius: var(--pill); background: #fff; box-shadow: 0 0 0 1px var(--line); margin-right: 44px; color: var(--ink-2); }
.search-field:focus-within { box-shadow: 0 0 0 2px var(--navy); }
.search-field input { flex: 1; border: 0; outline: none; background: transparent; font-size: 16px; min-width: 0; }
#search-results { margin-top: 14px; }
.results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.result { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: var(--r-m); text-align: left; transition: background var(--t) var(--ease); }
.result:hover { background: var(--surface); }
.result > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.result strong { font-weight: 500; }
.result > span:nth-child(2) span { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Menos gris en el resto */
.piece, .pub-row, .member, .profile-card, .switch-row, .ref-link { background: var(--card); box-shadow: 0 0 0 1px var(--line-2); }
.piece:hover, .ref-link:hover { background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 8px 24px -16px rgb(22 31 57 / 0.4); }
.rail-step.st-s05 .rail-n { color: var(--blue); }
.rail-step.st-s06 .rail-n { color: var(--green); }
.rail-step.st-s04 .rail-n { color: var(--orange-ink); }
.block-head h2 { font-size: 19px; }

@media (max-width: 899px) {
  .welcome { grid-template-columns: 1fr; padding: 24px 18px 18px; border-radius: var(--r-l); }
  .welcome .ring { position: absolute; top: 18px; right: 14px; width: 84px; height: 84px; }
  .welcome-text { padding-right: 84px; }
  .welcome-line { padding: 12px 8px 10px; }
  .next { padding: 18px; }
  .next-actions { padding-left: 0; }
  .next-actions .btn { flex: 1; }
  .next-title { font-size: 19px; }
  .trow { grid-template-columns: auto 1fr; padding: 14px; }
  .trow-side { grid-column: 2; }
  .daystrip { grid-template-columns: repeat(4, 1fr); }
  .cal-row { grid-template-columns: 30px repeat(7, 1fr); }
  .cal-day { height: 40px; }
  .search-field { margin-right: 44px; }
}

/* Publicación y redes */
.pub-state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.nets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.net { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--pill); font-size: 12px; font-weight: 500; background: var(--surface); color: var(--ink); }
.net-instagram { background: #fdeaf1; color: #b3245b; }
.net-tiktok { background: #e9f8f8; color: #0d6e72; }
.net-facebook { background: #e8f0fd; color: #1d55c4; }
.net-linkedin { background: #e6f1f8; color: #0a5a8f; }
.net-youtube { background: #fdeaea; color: #b4161b; }
.net-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 18px 0 6px; }
.net-stats div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border-radius: var(--r-m); background: var(--card); box-shadow: 0 0 0 1px var(--line-2); }
.net-stats b { font-size: 26px; font-weight: 300; }
.seg { margin-bottom: 16px; }
.pub-list { margin-top: 6px; }

/* Equipo: panel de editores */
.member-pct { display: flex; flex-direction: column; align-items: flex-end; }
.member-pct b { font-size: 30px; font-weight: 300; letter-spacing: -0.02em; color: var(--navy); }
.member-pct span { font-size: 13px; color: var(--ink-2); }
.member-next { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; border-radius: var(--r-m); background: var(--surface); text-align: left; transition: background var(--t) var(--ease); }
.member-next:hover { background: var(--fill); }
.member-next span:first-child { width: 100%; font-size: 12px; color: var(--blue); font-weight: 500; }
.member-next strong { font-weight: 500; }
.rail { margin-bottom: 18px; }
.rail-step.is-sel { background: var(--navy-tint); padding-left: 10px; }
@media (max-width: 899px) {
  .net-stats { grid-template-columns: repeat(3, 1fr); }
}

/* ===== v3: más aire y pasos como recorrido ===== */
.stepper { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 8px 0 28px; padding: 0; }
.stepper-track { position: absolute; top: 22px; left: calc(100% / 6); right: calc(100% / 6); height: 2px; background: var(--fill); border-radius: 2px; }
.stepper-track span { display: block; height: 100%; width: calc(var(--done) * 50%); background: var(--green); border-radius: inherit; transition: width 400ms var(--ease); }
.step, .step:hover, .step.is-on { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 0; padding: 0 8px 12px; background: none; box-shadow: none; text-align: center; border-radius: var(--r-m); }
.step-n { position: relative; z-index: 1; width: 46px; height: 46px; font-size: 16px; background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 2px var(--fill), 0 0 0 6px #fff; transition: all var(--t) var(--ease); }
.step:hover .step-n { box-shadow: inset 0 0 0 2px var(--navy), 0 0 0 6px #fff; color: var(--navy); }
.step.is-past .step-n { background: var(--green); color: #fff; box-shadow: 0 0 0 6px #fff; }
.step.is-on .step-n { background: var(--navy); color: #fff; box-shadow: 0 0 0 6px #fff, 0 0 0 8px var(--navy-tint); }
.step-text { align-items: center; }
.step-name { font-size: 14px; color: var(--ink-2); max-width: 180px; }
.step.is-on .step-name { color: var(--ink); font-weight: 500; }
.step.is-on .step-count { color: var(--blue); }
.step-count { color: var(--ink-3); }
.step.is-on::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 28px; height: 3px; margin-left: -14px; border-radius: 3px; background: var(--navy); }

.phase-bar { gap: 10px; margin-bottom: 28px; padding: 14px; border-radius: var(--r-l); background: var(--surface); }
.checklist { gap: 14px; }
.group { gap: 14px; margin-bottom: 24px; }
.group-title { font-size: 14px; padding: 0 4px; }
.trow { gap: 18px; padding: 20px 22px; border-radius: var(--r-l); overflow: hidden; }
.trow.u-0:not(.is-done), .trow.u-1:not(.is-done) { box-shadow: 0 0 0 1px var(--line-2); }
.trow.u-0:not(.is-done)::before, .trow.u-1:not(.is-done)::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--red); opacity: 0.85; }
.trow.u-1:not(.is-done)::before { background: var(--orange); }
.trow-main { gap: 6px; }
.trow-title { font-size: 17px; }
.trow-do { font-size: 15px; line-height: 1.4; }
.trow-meta { gap: 12px; margin-top: 8px; }
.trow .flow-ico { width: 52px; height: 52px; border-radius: 18px; }
.tick { width: 48px; height: 48px; }
.done-group .trow { margin-bottom: 12px; }

@media (max-width: 899px) {
  .stepper { grid-template-columns: repeat(3, 1fr); margin-bottom: 22px; }
  .step, .step:hover, .step.is-on { padding: 0 2px 12px; }
  .step-name { font-size: 13px; }
  .step-count { font-size: 12px; }
  .phase-bar { padding: 10px; }
  .phase-bar .btn { flex: 1; }
  .trow { padding: 18px 16px; gap: 14px; }
  .trow .flow-ico { width: 44px; height: 44px; border-radius: 14px; }
}
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.quick-btn { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--r-l); background: var(--card); box-shadow: 0 0 0 1px var(--line-2); text-align: left; transition: box-shadow var(--t) var(--ease); }
.quick-btn:hover { box-shadow: 0 0 0 1px var(--navy), 0 8px 24px -16px rgb(22 31 57 / 0.4); }
.quick-btn > .ico { color: var(--navy); }
.quick-btn > span { display: flex; flex-direction: column; gap: 2px; }
.quick-btn strong { font-weight: 500; }
.quick-btn > span > span { font-size: 13px; color: var(--ink-2); }
@media (max-width: 899px) { .quick { grid-template-columns: 1fr; } }
.notice { cursor: default; }
.notice-text { text-align: left; font-size: 15px; }
.notice-text:hover { text-decoration: underline; text-underline-offset: 3px; }
.notice-meta { flex-wrap: wrap; }
.notice-meta .file-chip { min-height: 32px; padding: 0 10px; border-radius: var(--pill); background: #fff; box-shadow: 0 0 0 1px var(--line-2); text-decoration: none; }
.notice-meta .file-chip:hover { box-shadow: 0 0 0 1px var(--navy); }
button.mat { width: 100%; text-align: left; }
.btn.go { background: var(--navy); color: #fff; }
.btn.go:hover { background: var(--navy-2); }
.trow-side { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
@media (max-width: 899px) { .trow-side { justify-content: flex-start; } .trow-side .btn { flex: 1; } }

/* ===== Recuadros de enlace por tipo (todo son enlaces, ningún formato es "vídeo" por defecto) ===== */
.tile { --tc: #2f5bd3; --tb: #e8eefc; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 16px; border-radius: var(--r-m); background: var(--tb); color: var(--tc); text-decoration: none; min-height: 132px; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.tile:hover { transform: translateY(-1px); box-shadow: 0 0 0 1.5px var(--tc); }
.tile-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fff; color: var(--tc); }
.tile-type { font-size: 15px; font-weight: 500; color: var(--ink); }
.tile-src { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--tc); }
.tile-src .ico:last-child { opacity: 0.7; }
.tile-guion { --tc: #2f5bd3; --tb: #e8eefc; }
.tile-clip { --tc: #b93800; --tb: #fff0e6; }
.tile-youtube { --tc: #b4161b; --tb: #fdeced; }
.tile-podcast { --tc: #6a44a6; --tb: #f1ebfa; }
.tile-design { --tc: #00784a; --tb: #e3f5ec; }
.tile-carousel { --tc: #0d6e72; --tb: #e4f6f6; }
.tile-other { --tc: #4a5468; --tb: #eef1f6; }
.tile-sm { min-height: 0; flex-direction: row; align-items: center; padding: 12px; gap: 12px; }
.tile-sm .tile-icon { width: 44px; height: 44px; border-radius: 14px; }
.tile-sm .tile-type { display: none; }
.tile-sm .tile-src { display: none; }
.tile-lg { flex-direction: row; align-items: center; min-height: 0; padding: 20px; gap: 16px; }
.tile-lg .tile-icon { width: 64px; height: 64px; border-radius: 20px; }
.tile-lg .tile-type { font-size: 17px; flex: 1; }
.tile-lg .tile-src { padding: 8px 12px; border-radius: var(--pill); background: #fff; font-size: 13px; }
.piece { grid-template-columns: 168px 1fr; gap: 20px; padding: 14px; }
.pub-row { grid-template-columns: auto 1fr; }
.link-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: var(--pill); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; max-width: 100%; }
.link-chip span { color: var(--ink-3); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-chip:hover { box-shadow: 0 0 0 1px var(--navy); }
.lc-instagram { background: #fdeaf1; } .lc-tiktok { background: #e9f8f8; } .lc-youtube { background: #fdeaea; } .lc-linkedin { background: #e6f1f8; } .lc-facebook { background: #e8f0fd; } .lc-drive { background: #e8eefc; } .lc-dropbox { background: #e6f0ff; }
@media (max-width: 899px) {
  .piece { grid-template-columns: 1fr; }
  .piece .tile { flex-direction: row; align-items: center; min-height: 0; padding: 12px; }
  .piece .tile-icon { width: 48px; height: 48px; }
  .piece .tile-type { flex: 1; }
  .pub-row { grid-template-columns: auto 1fr; }
}

/* ===== Checklist v4: más contraste entre tareas, libertad para elegir ===== */
.checklist { gap: 16px; }
.trow { grid-template-columns: auto auto 1fr auto; gap: 16px; padding: 18px 20px; background: #fff; box-shadow: 0 0 0 1px #1d1d1f1f, 0 6px 18px -12px rgb(22 31 57 / 0.28); }
.trow:has(> .tick) { grid-template-columns: auto auto 1fr auto; }
.trow:not(:has(> .tick)) { grid-template-columns: auto 1fr auto; }
.trow:hover { box-shadow: 0 0 0 1px var(--navy), 0 10px 26px -14px rgb(22 31 57 / 0.4); }
.trow-title { font-size: 17px; font-weight: 500; color: var(--ink); }
.trow.is-focus { box-shadow: 0 0 0 2px var(--navy), 0 10px 26px -14px rgb(22 31 57 / 0.45); background: linear-gradient(180deg, #f6f8ff, #fff 60%); }
.now-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: var(--pill); background: var(--navy); color: #fff; font-size: 13px; font-weight: 500; }
.tick { order: -1; }
.group { padding: 16px; margin-bottom: 20px; border-radius: var(--r-xl); background: var(--surface); }
.group-title { font-size: 15px; margin-bottom: 2px; }
.next-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.next-top .next-eyebrow { margin-bottom: 0; }
.next-hint { font-size: 13px; color: var(--ink-3); }
.next.is-chosen { box-shadow: 0 0 0 2px var(--navy), 0 12px 32px -18px rgb(22 31 57 / 0.45); }
.next.is-chosen .next-eyebrow { color: var(--navy); }
@media (max-width: 899px) {
  .trow, .trow:has(> .tick) { grid-template-columns: auto 1fr; }
  .trow:has(> .tick) > .flow-ico { display: none; }
  .trow:not(:has(> .tick)) { grid-template-columns: auto 1fr; }
  .trow-side { grid-column: 1 / -1; }
  .group { padding: 10px; }
}

/* ===== Crear y preparar la checklist semanal ===== */
.toast-card.is-error .toast-ok { background: var(--red); }
.create-week { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; border-radius: var(--r-xl); background: var(--card); box-shadow: 0 0 0 1px #1d1d1f1f, 0 12px 30px -20px rgb(22 31 57 / 0.35); }
.create-week .sub { max-width: 560px; line-height: 1.45; }
.week-pick { display: grid; gap: 8px; }
.wk { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--r-m); background: #fff; box-shadow: 0 0 0 1px var(--line); text-align: left; transition: box-shadow var(--t) var(--ease); }
.wk strong { font-weight: 500; }
.wk > span:not(.chip) { grid-row: 2; font-size: 13px; color: var(--ink-2); }
.wk .chip { grid-row: 1 / 3; grid-column: 2; }
.wk:hover { box-shadow: 0 0 0 1px var(--navy); }
.wk.is-on { box-shadow: 0 0 0 2px var(--navy); background: #f6f8ff; }
.builder { display: flex; flex-direction: column; gap: 14px; }
.builder-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.builder-head h2 { font-size: 19px; font-weight: 500; }
.bcard { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px #1d1d1f1f, 0 6px 18px -12px rgb(22 31 57 / 0.28); }
.bcard:focus-within { box-shadow: 0 0 0 2px var(--navy); }
.bcard-head { display: flex; align-items: center; gap: 10px; }
.bnum { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--navy-tint); color: var(--navy); font-size: 13px; font-weight: 600; }
.bcard input, .bcard select { font: inherit; border: 1px solid transparent; border-radius: var(--r-s); background: var(--surface); outline: none; transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
.bcard input:focus, .bcard select:focus { border-color: var(--navy); background: #fff; }
.b-title { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; font-size: 17px !important; font-weight: 500; }
.b-do { min-height: 42px; padding: 0 12px; color: var(--ink-2); }
.b-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.b-sel { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-2); }
.b-sel select { min-height: 42px; padding: 0 10px; color: var(--ink); font-size: 14px; }
.b-links { display: flex; flex-direction: column; gap: 6px; }
.b-link { display: flex; align-items: center; gap: 8px; color: var(--ink-3); }
.b-link input { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; font-size: 14px; }
.b-links .text-link { align-self: flex-start; min-height: 36px; }
.add-row { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border-radius: var(--r-l); border: 1.5px dashed var(--line); color: var(--navy); font-weight: 500; transition: background var(--t) var(--ease); }
.add-row:hover { background: var(--surface); }
.builder-foot { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px; border-radius: var(--pill); background: var(--glass-strong); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); box-shadow: var(--shadow-float), inset 0 0 0 1px var(--line-2); }
.builder-foot p { font-size: 14px; color: var(--ink-2); }
@media (max-width: 899px) {
  .b-row { grid-template-columns: 1fr 1fr; }
  .b-row .b-sel:last-child { grid-column: 1 / -1; }
  .builder-foot { border-radius: var(--r-l); }
  .builder-foot p { display: none; }
  .builder-foot .btn { flex: 1; }
}

/* ===== Contraste minimalista: tarjetas blancas sobre panel gris, un solo acento ===== */
.checklist { padding: 14px; border-radius: var(--r-xl); background: #eef0f4; gap: 10px; }
.checklist > .empty { padding: 18px 8px; }
.group { background: transparent; padding: 0; gap: 10px; margin-bottom: 18px; }
.group:last-of-type { margin-bottom: 4px; }
.group-title { padding: 6px 6px 0; }
.group-title span { background: #fff; }
.trow { background: #fff; box-shadow: 0 0 0 1px #d6d9e0; padding-left: 22px; transition: box-shadow 160ms var(--ease), transform 160ms var(--ease); }
.trow:hover { transform: translateY(-1px); box-shadow: inset 4px 0 0 var(--navy), 0 0 0 1.5px var(--navy), 0 10px 24px -16px rgb(22 31 57 / 0.45); }
.trow.u-0:not(.is-done)::before, .trow.u-1:not(.is-done)::before { display: none; }
.trow.u-0:not(.is-done) .trow-title::after, .trow.u-1:not(.is-done) .trow-title::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--red); vertical-align: 2px; }
.trow.u-1:not(.is-done) .trow-title::after { background: var(--orange); }
.trow .flow-ico { background: #eef0f4; color: var(--navy); box-shadow: none; }
.trow-title { font-weight: 600; }
.trow-do { color: #4a4a50; }
.trow .btn.soft { background: #eef0f4; box-shadow: none; }
.trow .btn.soft:hover { background: #e2e5eb; }
.trow .tick { box-shadow: inset 0 0 0 2px #c9cdd6; }
.trow.is-focus { box-shadow: inset 4px 0 0 var(--navy), 0 0 0 2px var(--navy); }
.trow.is-done { background: #f7f8fa; box-shadow: 0 0 0 1px #e3e5ea; }
.trow.is-done:hover { transform: none; box-shadow: 0 0 0 1px #c9cdd6; }
.done-group summary { background: #fff; }
.builder { padding: 14px; border-radius: var(--r-xl); background: #eef0f4; }
.bcard { background: #fff; box-shadow: 0 0 0 1px #d6d9e0; padding-left: 18px; }
.bcard:nth-child(odd) { background: #fff; }
.bcard:hover { box-shadow: inset 4px 0 0 var(--navy), 0 0 0 1.5px var(--navy); }
.bcard input, .bcard select { background: #f3f4f7; }
.add-row { background: #fff; border-color: #c9cdd6; }
@media (prefers-reduced-motion: reduce) { .trow:hover { transform: none; } }
@media (max-width: 899px) { .checklist, .builder { padding: 8px; border-radius: var(--r-l); } }

/* ===== Dos cosas distintas: Planificación (qué) y Tareas de la semana (hacer) ===== */
.section-intro { margin: -14px 0 22px; font-size: 15px; color: var(--ink-2); max-width: 640px; line-height: 1.45; }
.section-intro strong { color: var(--ink); font-weight: 600; }
.plan-steps .step { cursor: default; }
.plan-steps .step:hover .step-n { box-shadow: inset 0 0 0 2px var(--fill), 0 0 0 6px #fff; color: var(--ink-2); }
.plan-steps .step.is-on .step-n, .plan-steps .step.is-on:hover .step-n { background: var(--navy); color: #fff; box-shadow: 0 0 0 6px #fff, 0 0 0 8px var(--navy-tint); }
.plan-steps .step.is-past .step-n, .plan-steps .step.is-past:hover .step-n { background: var(--green); color: #fff; box-shadow: 0 0 0 6px #fff; }
.plan-box { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-xl); background: #eef0f4; }
.plan-box .builder-head { padding: 6px 6px 4px; }
.plan-box.is-ok .builder-head { align-items: center; flex-wrap: wrap; }
.prow { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px #d6d9e0; }
.plan-alert { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 18px; margin-bottom: 18px; border-radius: var(--r-l); background: var(--navy-tint); color: var(--navy); text-align: left; font-size: 14px; font-weight: 500; }
.plan-alert span { flex: 1; }
.work-filter { margin-bottom: 14px; }
.seg-btn.has-alert:not(.is-on) { color: var(--red-ink); }
.change-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: var(--r-m); background: var(--red-bg); color: var(--ink); font-size: 14px; line-height: 1.4; }
.change-note strong { font-weight: 600; }
.change-note.big { margin: 0; }
.trow.w-review { box-shadow: 0 0 0 1px #b8c3e0; }
.trow.w-changes { box-shadow: inset 4px 0 0 var(--red), 0 0 0 1px #e6c5c7; }
@media (max-width: 899px) { .prow { grid-template-columns: auto 1fr; } .prow .trow-side { grid-column: 1 / -1; } .section-intro { margin-top: -8px; } }
.avs { display: inline-flex; }
.avs .avatar + .avatar { margin-left: -6px; box-shadow: 0 0 0 2px #fff; }
.b-who { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--ink-2); }
.people-pick span { padding-left: 6px; }
.people-pick .avatar { --s: 22px; }
.mention { padding: 0 4px; border-radius: 6px; background: var(--blue-tint); color: var(--blue); font-weight: 500; }
.bubble.mine .mention { background: rgb(255 255 255 / 0.18); color: #fff; }
.tag-added { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: var(--pill); background: var(--navy-tint); color: var(--navy); font-size: 12px; font-weight: 500; vertical-align: 2px; }

/* ===== Revisión por rondas, objetivos y manual de marca ===== */
.review { border-top: 1px solid var(--line); padding-top: 18px; }
.rounds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.round { padding: 14px; border-radius: var(--r-l); background: #f6f7f9; }
.round.is-last { background: #fff; box-shadow: 0 0 0 1px #d6d9e0; }
.round-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.round-head strong { font-weight: 600; }
.round-head span { color: var(--ink-2); font-size: 13px; }
.round-head a { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--navy); font-weight: 500; text-decoration: none; }
.notes { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.notes li { display: flex; gap: 10px; align-items: flex-start; }
.notes li > div { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 4px 18px 18px 18px; background: var(--red-bg); }
.notes p { font-size: 15px; }
.notes .link-chip { margin-top: 8px; background: #fff; }
.note-link { color: var(--ink-2); font-size: 13px; }
.inline-btn { min-height: 32px; font-size: 13px; }
.goal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.goal { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px #d6d9e0; }
.goal-n b { font-size: 30px; font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.goal-n span { color: var(--ink-3); font-size: 15px; }
.goal-name { font-size: 13px; color: var(--ink-2); line-height: 1.3; min-height: 34px; }
.goal.is-ok { box-shadow: 0 0 0 1.5px var(--green); }
.brand-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px #d6d9e0; }
.brand-text { margin: 0; padding: 14px; border-radius: var(--r-m); background: #f6f7f9; font: 400 14px/1.5 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; }
fieldset.field input[type="url"] + input[type="url"] { margin-top: 0; }
@media (max-width: 899px) { .goal-grid { grid-template-columns: repeat(2, 1fr); } .goal:last-child { grid-column: 1 / -1; } }
.month-weeks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.month-weeks li { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 14px; border-radius: var(--r-m); background: #fff; box-shadow: 0 0 0 1px #d6d9e0; }
.month-weeks strong { font-weight: 600; }
.month-weeks li > span:nth-of-type(1) { color: var(--ink-2); font-size: 13px; }
.month-weeks .meta-line { grid-column: 1 / 3; grid-row: 2; }
.month-weeks .chip { grid-column: 3; grid-row: 1 / 3; }
.month-files { grid-column: 1 / 3; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.month-files span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--pill); background: #f3f4f7; font-size: 12px; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month-weeks li { grid-template-rows: auto auto auto; }
/* Competencia */
.rival-list { display: flex; flex-direction: column; gap: 10px; }
.rival { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px #d6d9e0; }
.rival-head { display: flex; align-items: flex-start; gap: 14px; }
.rival-head h3 { font-size: 17px; font-weight: 600; display: inline; margin-right: 8px; }
.rival-head .sub { margin-top: 4px; }
.rival-tools { display: flex; align-items: center; gap: 4px; flex: none; }
.rival.is-pinned { box-shadow: 0 0 0 2px var(--navy), 0 12px 30px -20px rgb(22 31 57 / 0.5); background: linear-gradient(180deg, #f6f8ff, #fff 70%); }
.rival.is-pinned .circle { background: var(--navy); color: #fff; }
.net-field { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); margin-bottom: 6px; }
.net-field input { min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-s); outline: none; font-size: 14px; }
.net-field input:focus { border-color: var(--navy); }
@media (max-width: 899px) { .rival-head { flex-wrap: wrap; } .rival-tools { width: 100%; } .net-field { grid-template-columns: 1fr; gap: 4px; } }

/* ===== Referencias: contraste con vidrio esmerilado ===== */
.refs { position: relative; isolation: isolate; }
.refs::before { content: ""; position: absolute; z-index: -1; inset: -30px -80px auto; height: 900px; pointer-events: none;
  background: radial-gradient(38% 34% at 12% 18%, #d9e2fb 0%, transparent 70%), radial-gradient(34% 30% at 88% 12%, #e8defa 0%, transparent 70%), radial-gradient(40% 30% at 70% 70%, #dcefff 0%, transparent 70%); }
.refs .block { margin-top: 24px; padding: 22px; border-radius: 28px; background: rgb(255 255 255 / 0.62); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), 0 0 0 1px rgb(22 31 57 / 0.06), 0 24px 60px -36px rgb(22 31 57 / 0.45); }
.refs .block-head { margin-bottom: 16px; }
.refs .block-head h2 { font-size: 19px; font-weight: 600; }
.refs .brand-card, .refs .rival, .refs .ref-link { background: #fff; box-shadow: 0 0 0 1px #dfe3ea, 0 6px 18px -12px rgb(22 31 57 / 0.3); }
.refs .rival:hover, .refs .ref-link:hover { box-shadow: 0 0 0 1.5px var(--navy), 0 12px 26px -14px rgb(22 31 57 / 0.4); }
.refs .rival.is-pinned { box-shadow: 0 0 0 2px var(--navy), 0 16px 36px -18px rgb(22 31 57 / 0.55); }
.refs .rules { gap: 8px; }
.refs .rules li { padding: 12px 14px; border-radius: var(--r-m); background: #fff; box-shadow: 0 0 0 1px #dfe3ea; }
.refs .rules .circle { width: 34px; height: 34px; background: var(--green-bg); color: var(--green-ink); }
.refs .brand-text { background: #f3f5f9; }
@media (max-width: 899px) { .refs .block { padding: 14px; border-radius: 22px; } .refs::before { inset: -20px -16px auto; } }
.rival-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.reason { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--pill); background: #f1ebfa; color: #5a3d8f; font-size: 12px; font-weight: 500; }
.refs .filters { margin-bottom: 14px; }
.share-intro { margin: -8px 0 14px; }
.share-list { display: flex; flex-direction: column; gap: 10px; }
.share { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px #dfe3ea, 0 6px 18px -12px rgb(22 31 57 / 0.3); }
.share-text { font-size: 15px; line-height: 1.45; padding: 12px 14px; border-radius: 4px 18px 18px 18px; background: #f3f5f9; }
.share.is-expired { opacity: 0.7; }
.done-group .share-list { margin-top: 4px; }
/* Plan de contenidos */
.plan-note { margin: -8px 0 14px; line-height: 1.45; }
.plan-sub { font-size: 14px; font-weight: 600; color: var(--ink-2); margin: 16px 0 8px; }
.plan-table { display: flex; flex-direction: column; gap: 6px; }
.plan-row { display: grid; grid-template-columns: 130px 1fr 1fr; gap: 14px; align-items: center; padding: 12px 16px; border-radius: var(--r-m); background: #fff; box-shadow: 0 0 0 1px #dfe3ea; font-size: 14px; }
.plan-row strong { font-weight: 600; }
.plan-row span:last-child { color: var(--ink-2); }
.plan-headrow { background: transparent; box-shadow: none; padding-block: 0; font-size: 12px; color: var(--ink-3); }
.plan-edit-row { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.plan-edit-row input { min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-s); font-size: 14px; outline: none; min-width: 0; }
.plan-edit-row input:focus { border-color: var(--navy); }
@media (max-width: 899px) {
  .plan-row { grid-template-columns: 1fr; gap: 4px; }
  .plan-headrow { display: none; }
  .plan-edit-row { grid-template-columns: 1fr; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
}

/* ===== Plan de contenidos desplegable ===== */
.refs .block.plan-sec { padding: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.plan-card { border-radius: 28px; overflow: hidden; background: rgb(255 255 255 / 0.62); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), 0 0 0 1px rgb(22 31 57 / 0.06), 0 24px 60px -36px rgb(22 31 57 / 0.45); }
.plan-sum { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; align-items: center; padding: 24px 26px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #3a56a8 0%, rgb(58 86 168 / 0) 55%), radial-gradient(80% 120% at 0% 100%, #22346a 0%, rgb(34 52 106 / 0) 60%), #161f39; }
.plan-sum::-webkit-details-marker { display: none; }
.plan-eyebrow { font-size: 13px; color: rgb(255 255 255 / 0.7); margin-bottom: 4px; }
.plan-sum h2 { font-size: 26px; font-weight: 400; letter-spacing: -0.02em; }
.plan-sum-text p:last-child { margin-top: 6px; color: rgb(255 255 255 / 0.8); font-size: 14px; }
.plan-toggle { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--pill); background: rgb(255 255 255 / 0.14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); font-size: 14px; font-weight: 500; transition: background var(--t) var(--ease); }
.plan-sum:hover .plan-toggle { background: rgb(255 255 255 / 0.22); }
.plan-card[open] .plan-toggle .ico { transform: rotate(180deg); }
.plan-card .when-open, .plan-card[open] .when-closed { display: none; }
.plan-card[open] .when-open { display: inline; }
.plan-body { padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.plan-body .plan-note { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.net-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.net-tile { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px #dfe3ea, 0 6px 18px -12px rgb(22 31 57 / 0.3); }
.net-tile-head { display: flex; align-items: center; justify-content: space-between; }
.net-pct { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.net-pct.ok { color: var(--green-ink); } .net-pct.mid { color: var(--orange-ink); } .net-pct.low { color: var(--red-ink); }
.qty { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.qty p { display: flex; align-items: baseline; gap: 6px; }
.qty b { font-size: 34px; font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.qty span { font-size: 13px; color: var(--ink-2); }
.qty.small b { font-size: 22px; }
.qty-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface); font-size: 20px; font-weight: 500; color: var(--navy); transition: background var(--t) var(--ease); }
.qty-btn:hover { background: var(--navy); color: #fff; }
.qty-btn:disabled { opacity: 0.35; pointer-events: none; }
.net-what { font-size: 13px; color: var(--ink-2); line-height: 1.35; min-height: 36px; }
.net-tile .bar { height: 5px; }
.plan-edit-row.two { grid-template-columns: 120px 1fr; }
@media (max-width: 899px) {
  .net-grid { grid-template-columns: 1fr 1fr; }
  .plan-sum { padding: 20px 18px; }
  .plan-sum .ring { width: 76px; height: 76px; }
  .plan-sum h2 { font-size: 22px; }
}
/* Calendario de publicaciones */
.plan-sum-text strong { font-weight: 600; color: #fff; }
.plan-sum-text p + p { margin-top: 2px; }
.pcal { margin-top: 14px; padding: 16px; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px #dfe3ea, 0 6px 18px -12px rgb(22 31 57 / 0.3); }
.pcal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pcal-head .seg { margin: 0; }
.pcal-nav { display: flex; align-items: center; gap: 4px; }
.pcal-nav strong { font-weight: 600; font-size: 15px; min-width: 150px; text-align: center; }
.pcal-pct { font-size: 14px; font-weight: 600; color: var(--navy); }
.pmonth { display: flex; flex-direction: column; gap: 4px; }
.pm-row { display: grid; grid-template-columns: 44px repeat(7, 1fr); gap: 4px; }
.pm-headrow span { text-align: center; font-size: 12px; color: var(--ink-3); }
.pm-wpct { display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.pm-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border-radius: 12px; font-variant-numeric: tabular-nums; }
.pm-day b { font-size: 14px; font-weight: 600; }
.pm-day span { font-size: 11px; }
.ok { --c: #00784a; --b: #e3f5ec; } .mid { --c: #b93800; --b: #fff0e6; } .low { --c: #a8232a; --b: #fcecec; } .future, .none { --c: #8e8e93; --b: #f3f4f7; }
.pm-day, .pday { background: var(--b); color: var(--c); }
.pm-day.is-today, .pday.is-today { box-shadow: inset 0 0 0 2px var(--navy); }
.pweek { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.pday { padding: 10px; border-radius: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pday-date { display: flex; align-items: baseline; gap: 6px; }
.pday-date span { font-size: 12px; text-transform: capitalize; }
.pday-date b { font-size: 18px; font-weight: 600; }
.pday-pct { font-size: 15px; font-weight: 600; }
.pday ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ink-2); }
.pday li { display: flex; justify-content: space-between; gap: 4px; }
.pcal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.pcal-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; background: var(--b); box-shadow: inset 0 0 0 1px var(--c); margin-right: -6px; }
@media (max-width: 899px) {
  .pweek { grid-template-columns: 1fr; }
  .pday { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .pday ul { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
  .pm-row { grid-template-columns: 34px repeat(7, 1fr); gap: 3px; }
  .pm-day { min-height: 44px; }
  .pcal-nav strong { min-width: 0; }
}

/* ===== Planificación: mes en 4 semanas, semana de lunes a viernes ===== */
.month-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; }
.mtab { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 140px; padding: 12px 14px; border-radius: var(--r-m); background: #fff; box-shadow: 0 0 0 1px #dfe3ea; text-align: left; transition: box-shadow var(--t) var(--ease); }
.mtab strong { font-weight: 600; font-size: 15px; }
.mtab:hover { box-shadow: 0 0 0 1px var(--navy); }
.mtab.is-on { box-shadow: 0 0 0 2px var(--navy); background: #f6f8ff; }
.week-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; margin-bottom: 16px; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px #dfe3ea, 0 6px 18px -12px rgb(22 31 57 / 0.3); }
.week-bar-title { font-size: 19px; font-weight: 600; }
.week-bar .row-actions { margin-top: 0; }
.days { display: flex; flex-direction: column; gap: 16px; }
.day-col { padding: 14px; border-radius: var(--r-xl); background: #eef0f4; }
.day-head { display: flex; align-items: baseline; gap: 8px; margin: 2px 4px 12px; font-size: 16px; font-weight: 600; }
.day-head b { font-size: 22px; font-weight: 400; }
.day-head .muted { color: var(--ink-2); font-weight: 400; font-size: 14px; }
.day-head .chip { margin-left: auto; }
.day-items { display: flex; flex-direction: column; gap: 10px; }
.day-items .prow { grid-template-columns: auto 1fr auto; }
.add-row.sm { min-height: 46px; margin-top: 10px; font-size: 14px; }
.b-sel input[type="date"] { min-height: 42px; padding: 0 10px; border-radius: var(--r-s); border: 1px solid transparent; background: #f3f4f7; font-size: 14px; }
@media (max-width: 899px) { .mtab { min-width: 0; flex: 1 1 45%; } .day-col { padding: 8px; } .b-row { grid-template-columns: 1fr; } }

.conn-intro { margin: -8px 0 12px; }
.conn-list { display: flex; flex-direction: column; gap: 8px; }
.conn { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px #dfe3ea; }
.conn .grow { display: flex; flex-direction: column; gap: 2px; min-width: 180px; }
.conn strong { font-weight: 600; }
.conn .grow span { font-size: 14px; color: var(--ink-2); }

/* Foto de perfil */
.avatar.has-photo { background: #e5ebf7; overflow: hidden; }
.avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-wrap { position: relative; }
.photo-btn { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; cursor: pointer; box-shadow: 0 0 0 3px #fff; }
.profile-card .row-actions { margin-top: 12px; }
.profile-card label.btn { cursor: pointer; }
/* Archivos del mes */
.coverage { margin-bottom: 18px; padding: 14px 16px; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px #dfe3ea; }
.coverage.is-ok { box-shadow: 0 0 0 1.5px var(--green); }
.coverage.is-ok strong { color: var(--green-ink); }
.coverage.is-miss { box-shadow: 0 0 0 1.5px var(--red); }
.coverage.is-miss strong { color: var(--red-ink); }
.coverage ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.coverage li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.coverage li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.b-file { grid-column: 1 / -1; margin-top: 2px; }
.b-file select { min-height: 42px; padding: 0 10px; border-radius: var(--r-s); border: 1px solid transparent; background: #f3f4f7; font-size: 14px; }