/* Studio Amarillo CRM · tipografía Zoho Puvi */
@font-face { font-family: 'Zoho Puvi'; src: url('/public/fonts/zoho-puvi-light.woff') format('woff'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Zoho Puvi'; src: url('/public/fonts/zoho-puvi-regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Zoho Puvi'; src: url('/public/fonts/zoho-puvi-italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Zoho Puvi'; src: url('/public/fonts/zoho-puvi-medium.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Zoho Puvi'; src: url('/public/fonts/zoho-puvi-semibold.woff') format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Zoho Puvi'; src: url('/public/fonts/zoho-puvi-bold.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Zoho Puvi'; src: url('/public/fonts/zoho-puvi-extrabold.woff') format('woff'); font-weight: 800; font-display: swap; }

:root {
  --yellow: #FFB400;
  --yellow-600: #E6A200;
  --yellow-50: #FFF6DE;
  --navy: #00153C;
  --ink: #00153C;
  --chart-ink: #03163A;
  --navy-800: #0B2250;
  --navy-700: #1A3166;
  --bg: #F4F5F8;
  --surface: #FFFFFF;
  --surface-2: #F8F9FB;
  --line: #E3E6EC;
  --line-strong: #CDD2DB;
  --text: #17203A;
  --muted: #5F6B82;
  --faint: #8E97A9;
  --green: #12805C;
  --green-50: #E3F5EE;
  --red: #C93838;
  --red-50: #FCE9E9;
  --blue: #2563C9;
  --blue-50: #E7EFFC;
  --orange: #C97D1F;
  --orange-50: #FBE8D0;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(0, 21, 60, .06), 0 1px 1px rgba(0, 21, 60, .04);
  --shadow-lg: 0 10px 30px rgba(0, 21, 60, .14);
  --font: 'Zoho Puvi', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); font-size: 14px; line-height: 1.45; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
button, input, select, textarea { font: inherit; color: inherit; }
.i { flex: none; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.inline { display: inline; }
.mt { margin-top: 16px; }
.mb { margin-bottom: 16px; }
.hidden { display: none !important; }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.strong { font-weight: 700; }

/* ---------- Shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: 236px; flex: none; background: var(--navy); color: #C9D2E6; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 20px 20px 18px; color: #fff; text-decoration: none !important; }
.brand-dot { width: 26px; height: 26px; border-radius: 8px; background: var(--yellow); flex: none; box-shadow: inset -6px -6px 0 rgba(0,0,0,.08); }
.brand-word { font-size: 17px; font-weight: 400; letter-spacing: -0.01em; color: #fff; }
.brand-word b { font-weight: 800; color: var(--yellow); }
.brand-logo { max-height: 34px; max-width: 180px; }
.sidebar nav { flex: 1; padding: 4px 10px 12px; }
.nav-group { margin-bottom: 10px; }
.nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #7F8CA8; padding: 10px 10px 6px; font-weight: 600; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; color: #C9D2E6; font-weight: 500; text-decoration: none !important; position: relative; }
.nav-item:hover { background: var(--navy-800); color: #fff; }
.nav-item.active { background: var(--navy-700); color: #fff; }
.nav-item.active::before { content: ''; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 4px; border-radius: 0 4px 4px 0; background: var(--yellow); }
.nav-item.active .i { color: var(--yellow); }
.sidebar-foot { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.08); }
.me { display: flex; align-items: center; gap: 10px; flex: 1; color: #fff; text-decoration: none !important; min-width: 0; }
.me-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.me-text small { color: #8FA0C2; font-size: 12px; }
.sidebar .icon-btn { color: #C9D2E6; }
.sidebar .icon-btn:hover { background: var(--navy-800); color: #fff; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 28px; background: rgba(244,245,248,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.search { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 0 12px; color: var(--faint); }
.search:focus-within { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,180,0,.18); }
.search input { border: 0; outline: 0; padding: 9px 0; flex: 1; background: transparent; color: var(--text); }
.menu-btn { display: inline-grid; }
.content { padding: 24px 28px 48px; width: 100%; max-width: none; }
.content.wide { max-width: none; }

/* ---------- Avatares, insignias ---------- */
.avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-weight: 700; font-size: 12px; flex: none; }
.avatar.sm { width: 24px; height: 24px; font-size: 10.5px; }
.avatar.lg { width: 52px; height: 52px; font-size: 18px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-gray { background: #EEF0F4; color: #4A5468; }
.badge-yellow { background: var(--yellow-50); color: #8A5A00; }
.badge-green { background: var(--green-50); color: var(--green); }
.badge-red { background: var(--red-50); color: var(--red); }
.badge-blue { background: var(--blue-50); color: var(--blue); }
.badge-navy { background: var(--navy); color: #fff; }
.badge-orange { background: var(--orange-50); color: #8B5310; }
.tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tag { background: #EEF0F4; color: #3B4559; border-radius: 6px; padding: 1px 7px; font-size: 12px; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-weight: 600; cursor: pointer; text-decoration: none !important; white-space: nowrap; }
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.btn-primary:hover { background: var(--yellow-600); border-color: var(--yellow-600); }
.btn-navy { background: var(--navy); border-color: var(--ink); color: #fff; }
.btn-navy:hover { background: var(--navy-800); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: #E9ECF1; }
.btn.danger, .btn-ghost.danger { color: var(--red); }
.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; color: var(--muted); }
.icon-btn:hover { background: #E9ECF1; color: var(--text); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.dropdown { position: relative; }
.dropdown-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 40; }
.dropdown.open .dropdown-menu { display: block; }
.dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 7px; color: var(--text); border: 0; background: none; cursor: pointer; text-align: left; text-decoration: none !important; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--surface-2); }

/* ---------- Flash ---------- */
.flash { margin: 16px 28px 0; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 9px; font-weight: 500; }
.flash-ok { background: var(--green-50); color: #0B5A41; }
.flash-error { background: var(--red-50); color: #8E1F1F; }
.flash-info { background: var(--blue-50); color: #1C478F; }
.flash-floating { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 50; margin: 0; box-shadow: var(--shadow-lg); }

/* ---------- Encabezados ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; }
.page-head .sub { margin: 4px 0 0; color: var(--muted); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.back { display: inline-block; color: var(--muted); font-size: 13px; margin-bottom: 6px; }

/* ---------- Tarjetas ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.card-head h2 { font-size: 15px; font-weight: 700; }
.card-actions { display: flex; gap: 6px; }
.card-body { padding: 16px 18px; }
.card-body.flush, .card .flush { padding: 0; }
.card .table-wrap { border: 0; border-radius: 0; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; }
.split-r { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }

.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow); }
.stat-label { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.stat-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stat-hint { color: var(--faint); font-size: 12px; }
.stat.accent { border-top: 3px solid var(--yellow); }
.stat.good .stat-value { color: var(--green); }
.stat.bad .stat-value { color: var(--red); }

/* ---------- Tablas ---------- */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: #FFFBEF; }
.table td.right, .table th.right { text-align: right; }
.table tfoot td { font-weight: 700; background: var(--surface-2); border-top: 1px solid var(--line); }
.cell-title { font-weight: 600; color: var(--text); }
.cell-sub { color: var(--muted); font-size: 12.5px; }

.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar input, .toolbar select { height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); }
.toolbar .grow { flex: 1; min-width: 200px; }
.empty { text-align: center; padding: 34px 16px; color: var(--muted); }
.empty p { margin: 0 0 12px; }

/* ---------- Formularios ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-size: 12.5px; font-weight: 600; color: #3B4559; }
.field input, .field select, .field textarea, .input { height: 38px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); width: 100%; }
.field textarea, textarea.input { height: auto; min-height: 90px; padding: 9px 11px; resize: vertical; line-height: 1.45; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus, .toolbar input:focus, .toolbar select:focus { outline: 0; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,180,0,.2); }
.hint { color: var(--faint); font-size: 12px; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.check input { width: 17px; height: 17px; accent-color: var(--ink); }
.form-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--line); }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
textarea.code { min-height: 260px; }

/* ---------- Pestañas ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tab { padding: 10px 14px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none !important; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--ink); border-bottom-color: var(--yellow); }
.count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: #EEF0F4; color: var(--muted); font-size: 11.5px; text-align: center; }

/* ---------- Ficha (detalle) ---------- */
.record-head { display: flex; align-items: center; gap: 14px; }
.record-head h1 { font-size: 22px; }
.props { display: grid; grid-template-columns: 1fr; gap: 0; }
.prop { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.prop:last-child { border-bottom: 0; }
.prop dt { color: var(--muted); font-size: 12.5px; }
.prop dd { margin: 0; word-break: break-word; }

.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tl-item:last-child { border-bottom: 0; }
.tl-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #EEF0F4; color: var(--muted); }
.tl-icon.y { background: var(--yellow-50); color: #8A5A00; }
.tl-icon.g { background: var(--green-50); color: var(--green); }
.tl-icon.b { background: var(--blue-50); color: var(--blue); }
.tl-title { font-weight: 600; }
.tl-meta { color: var(--faint); font-size: 12px; }
.tl-body { margin-top: 4px; white-space: pre-wrap; color: #33405A; }

/* ---------- Kanban ---------- */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 14px; align-items: flex-start; min-height: 60vh; }
.k-col { width: 272px; flex: none; background: #EBEDF2; border-radius: 10px; display: flex; flex-direction: column; max-height: calc(100vh - 210px); }
.k-head { padding: 12px 12px 8px; border-top: 3px solid var(--c, #8A94A6); border-radius: 10px 10px 0 0; }
.k-title { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.k-sum { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.k-list { padding: 4px 8px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.k-list.over { background: rgba(255,180,0,.15); border-radius: 8px; }
.k-card { background: var(--surface); border-radius: 8px; padding: 10px 12px; box-shadow: var(--shadow); border: 1px solid var(--line); cursor: grab; display: block; color: var(--text); text-decoration: none !important; }
.k-card:hover { border-color: var(--yellow); }
.k-card.dragging { opacity: .5; }
.k-card .k-name { font-weight: 600; margin-bottom: 3px; }
.k-card .k-meta { color: var(--muted); font-size: 12.5px; display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 6px; }

/* ---------- Cotizador ---------- */
.qe-lines { width: 100%; border-collapse: collapse; }
.qe-lines th { font-size: 12px; color: var(--muted); text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); font-weight: 600; }
.qe-lines td { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.qe-lines input, .qe-lines select { height: 34px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 7px; width: 100%; background: #fff; }
.qe-lines .num { width: 84px; }
.qe-lines .money-in { width: 130px; }
.qe-name { font-weight: 600; }
.qe-desglose { margin-top: 8px; padding: 10px; background: var(--surface-2); border-radius: 8px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.qe-desglose label { font-size: 11.5px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.qe-desglose input { height: 30px; }
.qe-tag { font-size: 11.5px; }
.picker { position: relative; }
.picker-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow-lg); max-height: 320px; overflow: auto; }
.picker-list button { display: flex; width: 100%; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 0; background: none; text-align: left; cursor: pointer; }
.picker-list button:hover, .picker-list button.hl { background: var(--yellow-50); }
.summary-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; }
.summary-row.total { font-size: 17px; font-weight: 800; border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 10px; }
.alert { display: flex; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--orange-50); color: #7A4A0C; margin-bottom: 8px; font-size: 13px; }
.alert.red { background: var(--red-50); color: #8E1F1F; }
.alert.blue { background: var(--blue-50); color: #1C478F; }
.bar { height: 8px; background: #EEF0F4; border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--yellow); border-radius: 999px; }
.dist { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin: 6px 0 12px; }
.dist span { display: block; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ---------- Login y páginas públicas ---------- */
body.bare { min-height: 100vh; }
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.auth-art { background: var(--navy); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-art h2 { font-size: 38px; line-height: 1.1; max-width: 420px; position: relative; z-index: 1; font-weight: 800; }
.auth-art h2 span { color: var(--yellow); }
.auth-art p { color: #B8C4DD; max-width: 380px; position: relative; z-index: 1; }
.auth-form { display: grid; place-items: center; padding: 32px; background: var(--surface); }
.auth-box { width: 100%; max-width: 380px; }
.auth-box h1 { font-size: 26px; margin-bottom: 6px; }
.auth-box .field { margin-bottom: 14px; }
.auth-box .btn { width: 100%; justify-content: center; height: 42px; }

.sign-wrap { max-width: 1000px; margin: 0 auto; padding: 24px 16px 60px; }
.sign-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pdf-frame { width: 100%; height: 72vh; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.sigpad { width: 100%; height: 180px; border: 2px dashed var(--line-strong); border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; display: block; }
.otp { letter-spacing: .5em; font-size: 22px; text-align: center; font-weight: 700; }

/* ---------- Impresión / PDF ---------- */
@media print {
  .sidebar, .topbar, .page-actions, .no-print { display: none !important; }
  .content { padding: 0; }
  body { background: #fff; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .split, .split-r { grid-template-columns: 1fr; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .sidebar { position: fixed; z-index: 60; left: -260px; transition: left .2s; }
  .sidebar.open { left: 0; box-shadow: var(--shadow-lg); }
  .menu-btn { display: inline-grid; }
  .topbar { padding: 10px 16px; }
  .topbar .btn span { display: none; }
  .content { padding: 16px 16px 40px; }
  .flash { margin: 12px 16px 0; }
  .g2, .g3, .g4, .form-grid { grid-template-columns: 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .qe-desglose { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prop { grid-template-columns: 100px minmax(0,1fr); }
}
.btn-link { background: none; border: 0; padding: 0; color: var(--blue); cursor: pointer; font: inherit; }
.btn-link:hover { text-decoration: underline; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details:not([open]) > summary.card-head { border-bottom: 0; }
.page-head.only-back { margin-bottom: 10px; }
.qe-lines tr.qe-main td { border-bottom: 0; padding-bottom: 4px; }
.qe-lines tr.qe-sub td { padding-top: 0; padding-bottom: 14px; }
.qe-lines .qe-name { font-weight: 600; min-width: 220px; }
.qe-lines input[type=checkbox] { width: 16px; height: 16px; padding: 0; }
.qe-desc { min-height: 0 !important; font-size: 12.5px; height: 52px; }
.qe-flags { display: flex; align-items: center; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
.qe-desglose { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.grid > *, .split > *, .split-r > * { min-width: 0; }
.bare .brand-word { color: var(--ink); }
.bare .brand-word b { color: var(--yellow-600); }
.qe-lines select { max-width: 230px; }
@media (max-width: 820px) {
  .table td, .table th { padding: 8px 10px; }
  .home-funnel a { grid-template-columns: 1fr 80px 100px !important; }
}
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 44px !important; width: 100%; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 6px; }
.pw-toggle:hover { color: var(--ink); background: var(--surface-2); }
.auth-art .brand-word { color: #fff; }
.auth-art .brand-word b { color: var(--yellow); }
.btn-wa { background: #25D366; border-color: #25D366; color: #fff; }
.btn-wa:hover { background: #1EBE5A; border-color: #1EBE5A; }
.wa-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow); transition: opacity .3s; }
.wa-item.wa-sent { opacity: .45; }
.wa-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.wa-text { min-height: 90px !important; }
.wa-bubble { background: #E7F8EE; border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; }
.nav-count { margin-left: auto; background: #25D366; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; }
.logo-slot { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.logo-slot:last-child { border-bottom: 0; }
.logo-prev { height: 70px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); padding: 8px; }
.logo-prev.dark { background: var(--navy); }
.logo-prev.yellow { background: var(--yellow); }
.logo-prev img { max-width: 100%; max-height: 52px; }
.section-title { font-size: 16px; margin: 8px 0 12px; }
.chart-bars { display: flex; align-items: flex-end; gap: 4px; height: 170px; }
.cb { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.cb-col { flex: 1; width: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.cb-s { position: absolute; bottom: 0; width: 70%; background: var(--navy); border-radius: 3px 3px 0 0; }
.cb-o { position: absolute; bottom: 0; width: 40%; background: var(--yellow); border-radius: 3px 3px 0 0; }
.cb-l { font-size: 10px; color: var(--faint); }
/* ---------- Editor de plantillas ---------- */
.bg-head { border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.bg-tabs { display: flex; gap: 4px; }
.bg-tab { padding: 10px 14px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none !important; }
.bg-tab.active { color: var(--ink); border-bottom-color: var(--yellow); }
.tpl-editor { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.tpl-top { border-bottom: 1px solid var(--line); }
.tpl-title { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tpl-title h1 { font-size: 17px; }
.tpl-row { display: grid; grid-template-columns: 170px 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.tpl-row:last-child { border-bottom: 0; }
.tpl-row label { padding: 12px 16px; color: #3B4559; font-size: 13.5px; }
.tpl-row .req { color: var(--red); }
.tpl-row input { border: 0; outline: 0; padding: 12px 10px; font-size: 14px; background: transparent; }
.tpl-modes { display: flex; gap: 4px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.tpl-mode { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: none; padding: 6px 12px; border-radius: 7px; cursor: pointer; font-weight: 600; color: var(--muted); }
.tpl-mode.active { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: var(--shadow); }
.tpl-toolbar { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.tpl-toolbar button, .tpl-toolbar select, .tb-color { height: 30px; min-width: 30px; border: 1px solid transparent; background: none; border-radius: 6px; cursor: pointer; font-size: 14px; padding: 0 7px; color: var(--text); display: inline-flex; align-items: center; justify-content: center; position: relative; }
.tpl-toolbar button:hover, .tb-color:hover { background: var(--surface-2); border-color: var(--line); }
.tpl-toolbar select { border-color: var(--line); }
.tb-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tb-sep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; }
.tb-wa { background: #25D366 !important; color: #fff !important; font-weight: 700; font-size: 12px !important; }
.tpl-stage { background: #EEF1F5; padding: 18px; min-height: 560px; }
.tpl-frame { width: 100%; min-height: 520px; border: 0; background: #fff; border-radius: 6px; display: block; }
.tpl-code { width: 100%; min-height: 560px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; line-height: 1.5; background: #fff; }
.tpl-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface); position: sticky; bottom: 0; }
.tpl-wa { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; padding: 16px; }
.wa-phone { background: #ECE5DD; border-radius: 14px; padding: 16px; min-height: 360px; }
.wa-phone .wa-bubble { background: #DCF8C6; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.modal { position: fixed; inset: 0; background: rgba(0,21,60,.45); display: grid; place-items: center; z-index: 100; padding: 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Una ventana más alta que la pantalla (en el celular) se puede bajar hasta los botones */
.modal > .modal-box { margin-block: auto; }
@media (max-width: 820px) { .modal { align-items: start; padding: max(12px, env(safe-area-inset-top, 0px)) 12px calc(16px + env(safe-area-inset-bottom, 0px)); } }
.modal-box { background: #fff; border-radius: 12px; padding: 20px; width: min(760px, 100%); box-shadow: var(--shadow-lg); }
@media (max-width: 820px) { .tpl-wa { grid-template-columns: 1fr; } .tpl-row { grid-template-columns: 1fr; } }
/* ---------- Flujos ---------- */
.flow-intro h2 { font-size: 18px; margin-bottom: 4px; }
.flow-intro p { margin: 0 0 6px; max-width: 760px; }
.flow { background: #EEF4F8; border: 1px solid var(--line); border-radius: var(--radius); min-height: 70vh; }
.flow-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.flow-name { font-size: 16px; font-weight: 700; border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 10px; min-width: 300px; }
.flow-summary { margin: 0; padding: 10px 18px; color: var(--muted); font-size: 13px; }
.flow-canvas { padding: 10px 24px 40px; }
.flow-col { max-width: 1100px; }
.flow-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; width: 100%; max-width: 520px; box-shadow: var(--shadow); }
.flow-card h3 { font-size: 15px; margin-bottom: 10px; }
.flow-line { width: 2px; height: 28px; background: #8E97A9; margin-left: 30px; }
.flow-row { display: flex; align-items: flex-start; gap: 0; }
.flow-row .flow-card { max-width: 480px; }
.flow-link { width: 40px; height: 2px; background: #12805C; margin-top: 30px; flex: none; }
.flow-item { display: block; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 8px; padding: 8px 10px; margin: 2px 0; cursor: pointer; font: inherit; color: var(--text); line-height: 1.45; }
.flow-item:hover { background: var(--surface-2); border-color: var(--line); }
.flow-item b { color: #12805C; }
.flow-add { background: none; border: 0; color: var(--blue); cursor: pointer; font: inherit; font-weight: 600; padding: 8px 0 0; }
.flow-cond { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.flow-cond b { color: #12805C; }
.flow-num { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: 12px; color: var(--muted); flex: none; }
.flow-edit { background: var(--surface-2); border-radius: 8px; padding: 12px; margin: 6px 0; }
.flow-edit .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .flow-row { flex-direction: column; } .flow-link { width: 2px; height: 24px; margin: 0 0 0 30px; } .flow-name { min-width: 0; width: 100%; } }

/* ---------- Fichas estilo Bigin (contacto y negocio) ---------- */
.rec { display: flex; flex-direction: column; gap: 14px; }
.rec-top { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; flex-wrap: wrap; }
.rec-top .icon-btn { font-size: 18px; }
.rec-name { flex: 1; min-width: 0; }
.rec-name h1 { font-size: 21px; margin: 0; line-height: 1.25; }
.rec-amount { color: var(--muted); font-weight: 500; }
.rec-owner { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin-top: 4px; flex-wrap: wrap; }
.rec-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rec-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.rec-body > * { min-width: 0; }
.rec-side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.rec-side section { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.rec-side section:last-child { border-bottom: 0; }
.rec-side h3 { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.rec-side .prop { grid-template-columns: 110px minmax(0, 1fr); padding: 6px 0; font-size: 13px; }
.rec-contact { display: flex; align-items: center; gap: 10px; color: var(--text); margin-bottom: 8px; }
.rec-line { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; padding: 3px 0; word-break: break-all; }
.rec-main { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 18px 18px; }
.rec-main .tabs { margin: 0 -18px 16px; padding: 0 10px; }
.rec-content { min-width: 0; }
.rec-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rec-stat { background: var(--surface-2); border-radius: 8px; padding: 10px; }
.rec-stat b { display: block; font-size: 18px; color: var(--ink); }
.rec-stat span { font-size: 12px; color: var(--muted); }
.rec-avatar { width: 52px; height: 52px; font-size: 18px; }
.rec-foot { font-size: 12px; color: var(--faint); }

/* Etapas */
.stepper { display: flex; align-items: center; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 26px; overflow-x: auto; }
.st-track { display: flex; align-items: center; flex: 1; min-width: max-content; position: relative; }
.st-node { position: relative; display: flex; align-items: center; flex: 1; min-width: 90px; margin: 0; }
.st-node::after { content: ''; flex: 1; height: 2px; background: var(--line-strong); margin: 0 6px; }
.st-node:last-child::after { display: none; }
.st-node.done::after { background: var(--green); }
.st-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); cursor: pointer; display: grid; place-items: center; padding: 0; color: #fff; flex: none; }
.st-dot:hover { border-color: var(--yellow); }
.st-node.done .st-dot { background: var(--green); border-color: var(--green); }
.st-label { position: absolute; top: 26px; left: -20px; font-size: 11.5px; color: var(--muted); white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.st-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--yellow); color: var(--ink); border: 0; border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 12.5px; white-space: nowrap; cursor: default; font-family: inherit; flex: none; }
.st-ends { display: flex; gap: 34px; padding: 0 22px 0 26px; border-left: 1px solid var(--line); flex: none; }
.st-end { position: relative; margin: 0; }
.st-end button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; font-size: 16px; }
.st-end.won.cur button { background: var(--green-50); border-color: var(--green); }
.st-end.lost.cur button { background: var(--red-50); border-color: var(--red); }
.st-end .st-label { top: 38px; left: 50%; transform: translateX(-50%); white-space: normal; width: 70px; text-align: center; line-height: 1.2; font-size: 11px; }

/* Etiquetas, notas, archivos y productos */
.tag-editor { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.tag-editor .tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; }
.tag-x { border: 0; background: none; cursor: pointer; color: var(--faint); font-size: 14px; line-height: 1; padding: 0; }
.tag-x:hover { color: var(--red); }
.tag-add summary { list-style: none; cursor: pointer; }
.tag-add summary::-webkit-details-marker { display: none; }
.tag-plus { background: var(--yellow-50); color: var(--ink); border: 1px dashed var(--yellow); }
.note-add { margin-bottom: 16px; }
.note-add textarea { width: 100%; }
.dropzone { display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px dashed var(--line-strong); border-radius: var(--radius); padding: 22px; color: var(--muted); background: var(--surface-2); margin-bottom: 14px; flex-wrap: wrap; text-align: center; }
.dropzone.over { border-color: var(--yellow); background: var(--yellow-50); }
.file-list { list-style: none; margin: 0; padding: 0; }
.file-list li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.file-list li > div { flex: 1; min-width: 0; }
.prod-edit { display: grid; grid-template-columns: 90px 130px 1fr auto; gap: 8px; align-items: center; }
.prod-edit .input { height: 32px; text-align: right; }
.prod-edit .money { text-align: right; }

@media (max-width: 900px) {
  .rec-body { grid-template-columns: minmax(0, 1fr); }
  .rec-top { padding: 12px; }
  .rec-name h1 { font-size: 18px; }
  .rec-actions { width: 100%; }
  .prod-edit { grid-template-columns: 1fr 1fr; }
  #add-product .form-grid { grid-template-columns: 1fr !important; }
}

/* Notas largas en la escala de tiempo: se recortan y se abren con un clic */
.timeline .tl-body { max-height: 9.6em; overflow: hidden; position: relative; cursor: pointer; }
.timeline .tl-body.long::after { content: 'Ver todo'; position: absolute; left: 0; right: 0; bottom: 0; padding-top: 22px; background: linear-gradient(transparent, var(--surface) 60%); color: var(--blue); font-size: 12.5px; font-weight: 600; }
.timeline .tl-body.open { max-height: none; }
.timeline .tl-body.open::after { display: none; }

/* Compartir con el cliente */
.share-row { display: flex; gap: 6px; margin-top: 8px; }
.share-row .input { flex: 1; min-width: 0; height: 32px; font-size: 12.5px; color: var(--muted); }

/* Páginas públicas (cotización y factura para el cliente) */
body.pub { background: var(--bg); }
.pub-wrap { max-width: 720px; margin: 0 auto; padding: 18px 16px 30px; }
.pub-head { background: var(--yellow); border-radius: 14px 14px 0 0; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--ink); }
.pub-brand { font-size: 20px; }
.pub-brand b { font-weight: 800; }
.pub-brand img { max-height: 40px; max-width: 180px; display: block; }
.pub-doc { text-align: right; }
.pub-doc span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.pub-doc b { font-size: 20px; font-weight: 800; }
.pub-body { background: var(--surface); padding: 24px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.pub-foot { background: var(--navy); color: #B8C4DD; border-radius: 0 0 14px 14px; padding: 14px 24px; font-size: 12px; text-align: center; }
.pub-title { font-size: 22px; margin: 0 0 6px; color: var(--ink); }
.pub-lead { color: var(--muted); margin: 0 0 18px; line-height: 1.55; }
.pub-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 18px; }
.pub-meta div { background: var(--surface-2); border-radius: 8px; padding: 9px 12px; }
.pub-meta span { display: block; font-size: 11.5px; color: var(--muted); }
.pub-lines { border-top: 1px solid var(--line); }
.pub-line { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pub-line p { margin: 3px 0 0; color: var(--muted); font-size: 13px; white-space: pre-wrap; }
.pub-qty { display: block; font-size: 12px; color: var(--faint); margin-top: 3px; }
.pub-amt { font-weight: 700; white-space: nowrap; }
.pub-totals { margin: 12px 0 0 auto; width: max-content; min-width: min(100%, 300px); max-width: 100%; }
.pub-totals .pub-desc { white-space: nowrap; gap: 18px; background: #E8F7EF; border-radius: 8px; font-weight: 700; margin: 3px 0; padding: 6px 10px; }
.pub-totals .pub-desc span { color: #0E7A50 !important; }
@media (max-width: 520px) { .pub-totals { width: 100%; } .pub-totals .pub-desc { font-size: 13px; gap: 10px; } .pub-totals .pub-desc span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } }
:root[data-theme="dark"] .pub-totals .pub-desc { background: rgba(30, 158, 97, .16); } :root[data-theme="dark"] .pub-totals .pub-desc span { color: #7FE0AE !important; }
.pub-totals div { display: flex; justify-content: space-between; padding: 4px 8px; }
.pub-totals .grand { background: var(--yellow-50); border-radius: 8px; font-size: 18px; font-weight: 800; color: var(--ink); padding: 10px; margin: 4px 0; }
.pub-box { background: var(--surface-2); border-radius: 10px; padding: 12px 14px; margin-top: 16px; }
.pub-box p { margin: 4px 0 0; color: #33405A; white-space: pre-wrap; }
.pub-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.pub-form { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; }
.pub-form h2 { font-size: 17px; margin: 0 0 10px; color: var(--ink); }
.pub-form textarea { width: 100%; }
.pub-pay { margin-top: 22px; border: 2px solid var(--yellow); border-radius: 12px; padding: 16px 18px; background: var(--yellow-50); display: flex; flex-direction: column; gap: 12px; }
.pub-pay h2 { font-size: 17px; margin: 0; color: var(--ink); }
.pub-pay-rows { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.pub-pay-rows > div { display: flex; justify-content: space-between; gap: 12px; }
.pub-pay-rows > div span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pub-pay-rows .grand { font-weight: 700; font-size: 16px; color: var(--ink); border-top: 1px solid var(--line-strong); padding-top: 8px; margin-top: 2px; }
.pub-pay-opts { display: flex; flex-direction: column; gap: 8px; }
.pub-pay-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); cursor: pointer; }
.pub-pay-opt:has(input:checked) { border-color: var(--yellow-600); box-shadow: 0 0 0 2px rgba(255,180,0,.35); }
.pub-pay-opt input { accent-color: var(--yellow-600); width: 18px; height: 18px; margin: 0; flex: none; }
.pub-pay-opt span { display: flex; justify-content: space-between; gap: 10px; flex: 1; font-size: 14.5px; }
.pub-pay-opt em { font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); font-weight: 600; }
.pub-pay-amount[hidden] { display: none; }
.pub-pay-alt { display: flex; flex-direction: column; gap: 6px; border-top: 1px dashed var(--line-strong); padding-top: 12px; font-size: 13.5px; color: #33405A; }
.pub-pay-alt > b { color: var(--ink); font-size: 14.5px; }
.pub-pay-solo { gap: 8px; font-size: 14px; color: #33405A; }
.pub-pay-key { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pub-pay-key code { font-size: 18px; font-weight: 700; letter-spacing: .04em; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 12px; color: var(--ink); }
[data-theme="dark"] .pub-pay-alt { color: #C5CDDD; }
.pub-pay-amount { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 13.5px; }
.pub-pay-amount input { height: 42px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 12px; font-size: 16px; background: var(--surface); max-width: 260px; }
.pub-pay-amount small { font-weight: 500; color: var(--muted); }
.pub-pay-btn { align-self: center; height: 46px; padding: 0 28px; font-size: 15.5px; }
.pub-pay-note { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.pub-answer { margin-top: 20px; padding: 14px 16px; border-radius: 10px; background: var(--surface-2); font-weight: 600; color: var(--ink); }
.pub-answer.aceptada { background: var(--green-50); color: var(--green); }
.pub-answer.rechazada { background: var(--red-50); color: var(--red); }
@media (max-width: 560px) { .pub-body { padding: 18px 16px; } .pub-actions .btn { flex: 1; justify-content: center; } }

/* Búsqueda instantánea */
.search { position: relative; }
.sr-box { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); max-height: min(70vh, 560px); overflow-y: auto; z-index: 60; padding: 6px; color: var(--text); }
.sr-group + .sr-group { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.sr-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); padding: 8px 10px 4px; }
.sr-item { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none !important; }
.sr-item:hover, .sr-item.active, .sr-all.active { background: var(--yellow-50); }
.sr-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); flex: none; }
.sr-text { min-width: 0; display: flex; flex-direction: column; }
.sr-text b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-text small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-text mark { background: #FFE39A; color: inherit; border-radius: 3px; padding: 0 1px; }
.sr-all { display: block; padding: 10px; margin-top: 4px; border-top: 1px solid var(--line); color: var(--blue); font-weight: 600; font-size: 13px; text-decoration: none !important; border-radius: 0 0 8px 8px; }
.sr-empty { padding: 14px 12px; color: var(--muted); }
.sr-page { display: flex; flex-direction: column; }
@media (max-width: 700px) { .sr-box { position: fixed; left: 8px; right: 8px; top: 60px; } }
.pub-h2 { font-size: 15px; color: var(--ink); margin: 22px 0 6px; }
.pub-link { color: var(--text); text-decoration: none !important; }
.pub-link:hover { background: var(--yellow-50); }
.pub-tag { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: right; }
.modal.hidden { display: none; }
.modal-card { background: #fff; border-radius: 12px; width: min(820px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); overflow: hidden; }
.modal-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 16px; color: var(--ink); }
.modal-head p { margin: 4px 0 0; }
.msg-frame { border: 0; width: 100%; flex: 1; min-height: 60vh; background: #f4f5f8; }
.pub-actions { justify-content: center; }
.pub-form h2 { text-align: center; }
.org-form .card { margin-bottom: 0; }
.org-extra-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
@media (max-width: 700px) { .org-extra-row { grid-template-columns: 1fr; } }

/* ---------- Calendario ---------- */
.cal-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-title { font-size: 20px; margin: 0 0 0 8px; }
.cal-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 2px; }
.seg a { padding: 5px 11px; border-radius: 7px; color: var(--muted); font-weight: 600; font-size: 13px; text-decoration: none !important; }
.seg a.active { background: var(--navy); color: #fff; }
.cal-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-filter { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--faint); font-size: 12.5px; text-decoration: none !important; }
.cal-filter.on { color: var(--text); border-color: var(--line-strong); }
.cal-filter:not(.on) .ag-dot { opacity: .3; }
.ag-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ev); flex: none; display: inline-block; }
.ev-tarea { --ev: #2563C9; --ev-bg: #E7EFFC; }
.ev-llamada { --ev: #12805C; --ev-bg: #E3F5EE; }
.ev-reunion { --ev: #7C5CD6; --ev-bg: #EEE9FB; }
.ev-cierre { --ev: #E6A200; --ev-bg: #FFF6DE; }
.ev-contrato { --ev: #C97D1F; --ev-bg: #FBE8D0; }
.ev-proyecto { --ev: #1EA7E1; --ev-bg: #E2F4FC; }
.ev-factura { --ev: #C93838; --ev-bg: #FCE9E9; }
.ev-cotizacion { --ev: #0B2250; --ev-bg: #E6EAF2; }
.ev-envio { --ev: #8E97A9; --ev-bg: #F1F3F6; }
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--line); gap: 1px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cal-dow { background: var(--surface-2); padding: 8px; font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; }
.cal-day { background: var(--surface); min-height: 118px; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-day.out { background: #FAFBFC; }
.cal-day.out .cal-num { color: var(--faint); }
.cal-day.today { background: #FFFCF2; }
.cal-day.today .cal-num { background: var(--yellow); color: var(--ink); }
.cal-day.drop, .cw-slot.drop, .cw-allday.drop { outline: 2px dashed var(--yellow); outline-offset: -2px; background: var(--yellow-50); }
.cal-day-head { display: flex; justify-content: space-between; align-items: center; }
.cal-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--text); text-decoration: none !important; }
.cal-add { opacity: 0; color: var(--muted); font-weight: 700; padding: 0 6px; border-radius: 6px; text-decoration: none !important; }
.cal-day:hover .cal-add { opacity: 1; }
.cal-add:hover { background: var(--yellow-50); color: var(--ink); }
.cal-list { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-ev { display: block; background: var(--ev-bg); color: var(--text); border-left: 3px solid var(--ev); border-radius: 5px; padding: 2px 6px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none !important; }
.cal-ev[draggable="true"] { cursor: grab; }
.cal-ev.done, .cw-ev.done, .ag-item.done b { text-decoration: line-through; opacity: .55; }
.cal-ev.late { font-weight: 700; }
.cal-more { font-size: 12px; color: var(--blue); padding-left: 4px; }
.cal-week { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cw-corner, .cw-allday-label { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cw-allday-label { font-size: 10.5px; color: var(--faint); padding: 6px 4px; text-align: right; }
.cw-head { text-align: center; padding: 8px 4px; background: var(--surface-2); border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.cw-head span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.cw-head b { font-size: 17px; }
.cw-head.today b { background: var(--yellow); border-radius: 99px; padding: 0 8px; }
.cw-allday { border-left: 1px solid var(--line); border-bottom: 1px solid var(--line-strong); padding: 4px; display: flex; flex-direction: column; gap: 3px; min-height: 34px; min-width: 0; }
.cw-hours { display: flex; flex-direction: column; }
.cw-hour { height: var(--slot); font-size: 10.5px; color: var(--faint); text-align: right; padding: 2px 6px 0 0; border-bottom: 1px solid var(--line); }
.cw-col { position: relative; border-left: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.cw-col.today { background: #FFFCF2; }
.cw-slot { height: var(--slot); border-bottom: 1px solid var(--line); display: block; }
.cw-slot:hover { background: var(--yellow-50); }
.cw-ev { position: absolute; left: 3px; right: 3px; background: var(--ev-bg); border-left: 3px solid var(--ev); border-radius: 6px; padding: 2px 6px; font-size: 11.5px; overflow: hidden; color: var(--text); text-decoration: none !important; box-shadow: var(--shadow); z-index: 2; }
.cw-ev small { display: block; color: var(--muted); }
.cal-agenda { display: flex; flex-direction: column; gap: 12px; }
.ag-day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.ag-day h3 { font-size: 14px; margin: 2px 0 8px; color: var(--ink); }
.ag-day.today { border-color: var(--yellow); }
.ag-day.late h3 { color: var(--red); }
.ag-item { display: flex; gap: 10px; align-items: flex-start; padding: 7px 4px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none !important; }
.ag-item:hover { background: var(--surface-2); }
.ag-item small { display: block; color: var(--muted); font-size: 12px; }
.ag-time { width: 84px; flex: none; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ag-item .ag-dot { margin-top: 5px; }
@media (max-width: 900px) {
  .cal-day { min-height: 74px; padding: 3px; }
  .cal-ev { font-size: 10.5px; padding: 1px 3px; }
  .cal-week { overflow-x: auto; grid-template-columns: 44px repeat(7, minmax(90px, 1fr)); }
  .cal-title { font-size: 16px; }
}
.logo-slot { flex-wrap: wrap; }
.logo-slot > div { min-width: 0; }
.logo-slot input[type=file] { max-width: 100%; }
.logo-prev img { max-width: 100%; }
/* Páginas del cliente: encabezado azul marino con el logo amarillo (igual que los PDF) */
.pub-head { background: var(--navy); color: #fff; }
.pub-doc span { color: var(--yellow); }
.pub-doc b { color: #fff; }
.pub-brand { color: #fff; }

/* Panel lateral del cliente */
.peek { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.peek-back { position: absolute; inset: 0; background: rgba(0,21,60,.25); opacity: 0; transition: opacity .3s ease; }
.peek-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--surface); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .38s cubic-bezier(.22,.9,.24,1); overflow-y: auto; padding: 18px 20px 30px; }
.peek.open { pointer-events: auto; }
.peek.open .peek-back { opacity: 1; }
.peek.open .peek-panel { transform: none; }
.peek-x { position: absolute; top: 12px; right: 12px; }
.peek-head { display: flex; gap: 14px; align-items: center; padding-right: 30px; }
.peek-head h2 { margin: 0; font-size: 18px; color: var(--ink); }
.peek-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 6px; }
.peek-panel section { border-top: 1px solid var(--line); padding: 12px 0; }
.peek-panel h3 { font-size: 13px; color: var(--ink); margin: 0 0 8px; }
.peek-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 4px; border-radius: 7px; color: var(--text); text-decoration: none !important; }
.peek-row:hover { background: var(--surface-2); }
.peek-row small { display: block; color: var(--muted); font-size: 12px; }
.mv-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: #8E97A9; }
.mv-orden { background: #2A62CE; } .mv-pago, .mv-anticipo { background: #3E8642; } .mv-nota { background: #E88F33; } .mv-factura { background: #5E4FC6; }
.grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field-inline { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }

/* ---------- Dashboard ---------- */
.db-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 16px; }
.db-filters label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.db-filters input, .db-filters select { width: auto; min-width: 0; max-width: 260px; height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font: inherit; color: var(--text); }
.db-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.db-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.db-kpi span { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.db-kpi b { font-size: 26px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.db-kpi small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-kpi.k1 { background: var(--navy); border-color: var(--ink); }
.db-kpi.k1 span, .db-kpi.k1 small { color: #AFC0E2; }
.db-kpi.k1 b { color: #fff; }
.db-kpi.k-bad b { color: #C8321C; }
.db-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.db-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.db-card.wide { grid-column: 1 / -1; }
.db-card header { margin-bottom: 10px; }
.db-card h2 { font-size: 15px; margin: 0; }
.db-card header p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.ch { width: 100%; height: auto; display: block; overflow: visible; }
.ch-ax { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.ch [data-tip] { cursor: default; }
.ch path[data-tip]:hover { opacity: .85; }
.ch-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text); margin-bottom: 6px; }
.ch-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ch-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ch-table { margin-top: 8px; font-size: 12.5px; }
.ch-table summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.ch-table .table { margin-top: 6px; }
.hb { display: flex; flex-direction: column; gap: 8px; }
.hb-row { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) 64px; gap: 10px; align-items: center; font-size: 13px; padding: 2px 0; border-radius: 6px; }
.hb-row:hover { background: #F4F6FA; }
.hb-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.hb-l a { color: inherit; }
.hb-t { height: 10px; background: #EEF1F6; border-radius: 4px; overflow: hidden; }
.hb-b { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.hb-v { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.ch-tip { position: fixed; z-index: 90; pointer-events: none; background: var(--navy); color: #fff; font-size: 12.5px; line-height: 1.45; padding: 8px 10px; border-radius: 8px; white-space: pre-line; box-shadow: 0 6px 20px rgba(0,21,60,.25); max-width: 280px; font-variant-numeric: tabular-nums; }
.ch-tip b { display: block; margin-bottom: 2px; }
@media (max-width: 900px) { .db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .db-grid { grid-template-columns: minmax(0, 1fr); } }
.mv-table td.right, .mv-table th.right, table td.right { white-space: nowrap; }
.pub-wordmark { color: #fff; font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
.brand-word { color: #fff; font-weight: 800; font-size: 18px; }

/* Etapas y pestañas sin barras de desplazamiento: todo visible */
.stepper { overflow: visible; flex-wrap: wrap; align-items: flex-start; gap: 16px 18px; padding: 18px 20px 16px; }
.st-track { min-width: 0; flex: 1 1 560px; align-items: flex-start; }
.st-node { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 26px auto; flex: 1 1 0; min-width: 0; }
.st-node > button { grid-row: 1; grid-column: 1; align-self: center; }
.st-node::after { grid-row: 1; grid-column: 2; align-self: center; margin: 0 6px; }
.st-node .st-label { position: static; grid-row: 2; grid-column: 1 / -1; margin-top: 6px; padding-right: 10px; white-space: normal; max-width: none; overflow: visible; line-height: 1.25; }
.st-ends { align-self: stretch; align-items: flex-start; gap: 6px; padding: 0 4px 0 18px; }
.st-end { display: flex; flex-direction: column; align-items: center; width: 82px; }
.st-end .st-label { position: static; transform: none; width: auto; margin-top: 6px; }
.tabs { flex-wrap: wrap; overflow: visible; row-gap: 0; }
@media (max-width: 760px) { .st-ends { border-left: 0; padding-left: 0; } }
@media (max-width: 760px) {
  .st-track { flex-direction: column; align-items: stretch; flex-basis: 100%; gap: 8px; }
  .st-node { grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto; align-items: center; column-gap: 10px; }
  .st-node::after { display: none; }
  .st-node > button.st-dot { justify-self: center; }
  .st-node > button.st-pill { grid-column: 1 / -1; justify-self: start; }
  .st-node .st-label { grid-row: 1; grid-column: 2; margin: 0; }
  .st-ends { flex-basis: 100%; justify-content: space-around; border-top: 1px solid var(--line); padding-top: 12px; }
}

/* ---------- Modo oscuro ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #E9EDF5;
  --chart-ink: #AFC0E2;
  --yellow-50: #2B2310;
  --bg: #0A1120;
  --surface: #111A2C;
  --surface-2: #162036;
  --line: #243049;
  --line-strong: #33405D;
  --text: #E3E8F1;
  --muted: #9AA6BE;
  --faint: #737F98;
  --green: #3DBE8B;
  --green-50: #0F2A20;
  --red: #F07272;
  --red-50: #321619;
  --blue: #7EA6F2;
  --blue-50: #13244A;
  --orange: #E9A251;
  --orange-50: #2F2212;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-lg: 0 12px 34px rgba(0, 0, 0, .5);
}
[data-theme="dark"] .avatar, [data-theme="dark"] .btn-primary, [data-theme="dark"] .st-pill, [data-theme="dark"] .cal-day.today .cal-num, [data-theme="dark"] .tag-plus { color: #00153C; }
[data-theme="dark"] .tag-plus { background: #FFD66E; }
[data-theme="dark"] .sidebar { background: #050C1A; border-right: 1px solid var(--line); }
[data-theme="dark"] .nav-item:hover, [data-theme="dark"] .sidebar .icon-btn:hover { background: #111C33; }
[data-theme="dark"] .nav-item.active { background: #18284A; }
[data-theme="dark"] .topbar { background: rgba(10, 17, 32, .9); }
[data-theme="dark"] .badge-gray, [data-theme="dark"] .tag, [data-theme="dark"] .count, [data-theme="dark"] .tl-icon, [data-theme="dark"] .bar, [data-theme="dark"] .hb-t { background: #212C44; color: #C5CDDD; }
[data-theme="dark"] .badge-yellow, [data-theme="dark"] .tl-icon.y { color: #FFCB52; }
[data-theme="dark"] .badge-orange { color: #F2B266; }
[data-theme="dark"] .badge-navy, [data-theme="dark"] .btn-navy, [data-theme="dark"] .seg a.active { background: #2A4A8C; border-color: #2A4A8C; color: #fff; }
[data-theme="dark"] .btn-ghost:hover, [data-theme="dark"] .icon-btn:hover { background: #1B2640; }
[data-theme="dark"] .flash-ok { color: #8EE0BC; } [data-theme="dark"] .flash-error, [data-theme="dark"] .alert.red { color: #F5A9A9; }
[data-theme="dark"] .flash-info, [data-theme="dark"] .alert.blue { color: #A9C4F5; } [data-theme="dark"] .alert { color: #F2C58E; }
[data-theme="dark"] .table tr.clickable:hover td, [data-theme="dark"] .hb-row:hover { background: #1A2440; }
[data-theme="dark"] .field-label, [data-theme="dark"] .tpl-row label, [data-theme="dark"] .tl-body, [data-theme="dark"] .pub-box p { color: #C5CDDD; }
[data-theme="dark"] .k-col, [data-theme="dark"] .tpl-stage, [data-theme="dark"] .flow { background: #0D1526; }
[data-theme="dark"] .qe-lines input, [data-theme="dark"] .qe-lines select, [data-theme="dark"] .picker-list, [data-theme="dark"] .modal-box, [data-theme="dark"] .modal-card, [data-theme="dark"] .tpl-mode.active,
[data-theme="dark"] .flow-top, [data-theme="dark"] .flow-card, [data-theme="dark"] .tpl-code { background: var(--surface); }
[data-theme="dark"] .switch { background: #3A4663; }
[data-theme="dark"] .wa-bubble { background: #133324; }
[data-theme="dark"] .wa-phone { background: #161D22; } [data-theme="dark"] .wa-phone .wa-bubble { background: #11503A; }
[data-theme="dark"] .sr-text mark { background: #5C4500; color: #FFE39A; }
[data-theme="dark"] .cal-day.out { background: #0D1424; }
[data-theme="dark"] .cal-day.today, [data-theme="dark"] .cw-col.today { background: #1E1A0E; }
[data-theme="dark"] .ev-tarea { --ev-bg: #142748; } [data-theme="dark"] .ev-llamada { --ev-bg: #0F2D22; } [data-theme="dark"] .ev-reunion { --ev-bg: #251E45; --ev: #A48BF0; }
[data-theme="dark"] .ev-cierre { --ev-bg: #2E250C; } [data-theme="dark"] .ev-proyecto { --ev-bg: #0E2A38; } [data-theme="dark"] .ev-contrato { --ev-bg: #2F2212; } [data-theme="dark"] .ev-factura { --ev-bg: #321619; --ev: #F07272; }
[data-theme="dark"] .ev-cotizacion { --ev-bg: #1A2647; --ev: #7EA6F2; } [data-theme="dark"] .ev-envio { --ev-bg: #1A2236; }
[data-theme="dark"] .db-kpi.k1 { background: #13285A; border-color: #1E3A78; }
[data-theme="dark"] .db-kpi.k-bad b { color: #F07272; }
[data-theme="dark"] .ch-tip { background: #1E2B4A; border: 1px solid #33405D; }
[data-theme="dark"] .peek-back, [data-theme="dark"] .modal { background: rgba(0, 0, 0, .55); }
[data-theme="dark"] .st-dot { background: var(--surface); }
[data-theme="dark"] .msg-frame, [data-theme="dark"] .tpl-frame, [data-theme="dark"] .pdf-frame { background: #fff; }
[data-theme="dark"] .flow-line { background: #5B6782; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2B3753; }

/* ---------- Menú lateral contraído (solo íconos) ---------- */
.brand-mini { display: none; width: 34px; height: 34px; object-fit: contain; }
.brand-mini-fallback { display: none; width: 34px; height: 34px; border-radius: 10px; background: var(--yellow); color: #00153C; font-weight: 800; place-items: center; font-size: 14px; }
.theme-btn .i-dark { display: none; }
[data-theme="dark"] .theme-btn .i-light { display: none; }
[data-theme="dark"] .theme-btn .i-dark { display: inline; }
@media (min-width: 901px) {
  .nav-mini .sidebar { width: 72px; overflow-x: hidden; }
  .nav-mini .brand { justify-content: center; padding: 18px 0 14px; }
  .nav-mini .brand .brand-logo, .nav-mini .brand .brand-word { display: none; }
  .nav-mini .brand .brand-mini { display: block; }
  .nav-mini .brand .brand-mini-fallback { display: grid; }
  .nav-mini .nav-label { font-size: 0; padding: 6px 0; margin: 4px 14px; border-top: 1px solid rgba(255,255,255,.08); }
  .nav-mini .nav-item { justify-content: center; padding: 10px 0; }
  .nav-mini .nav-item > span:not(.nav-count) { display: none; }
  .nav-mini .nav-count { position: absolute; top: 3px; right: 8px; padding: 0 5px; font-size: 10px; }
  .nav-mini .sidebar-foot { flex-direction: column; padding: 10px 0; }
  .nav-mini .me { justify-content: center; flex: none; }
  .nav-mini .me-text { display: none; }
  .nav-mini nav { padding: 0 8px; }
}
.nav-tip { position: fixed; z-index: 95; background: #0B2250; color: #fff; font-size: 12.5px; font-weight: 600; padding: 5px 9px; border-radius: 6px; pointer-events: none; white-space: nowrap; box-shadow: var(--shadow-lg); }

/* ---------- Selección y acciones en lote ---------- */
.table th.bk-cell, .table td.bk-cell { width: 38px; padding-right: 0; }
.bk-cell input { width: 16px; height: 16px; accent-color: #E6A200; cursor: pointer; vertical-align: middle; }
.table tr.bk-on td { background: var(--yellow-50); }
.bulk-bar { position: sticky; top: 62px; z-index: 15; background: var(--surface); border: 1px solid var(--yellow); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 10px 14px; margin-bottom: 12px; }
.bulk-main { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.bulk-count { font-size: 14px; }
.bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.bulk-panel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.bulk-panel input, .bulk-panel select { height: 34px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); min-width: 0; max-width: 100%; }
.bulk-panel input[name="tags"] { width: 300px; }
.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-danger-ghost { color: var(--red); }
.btn-danger-ghost:hover { background: var(--red-50); }
.bulk-bar[hidden], .bulk-panel[hidden], [data-bulk-value][hidden] { display: none !important; }
/* Piccolo del menú contraído: círculo con contorno amarillo, sin relleno */
.brand-mini { width: 42px; height: 42px; padding: 6px; border: 2px solid var(--yellow); border-radius: 50%; background: transparent; object-fit: contain; box-sizing: border-box; }
.brand-mini-fallback { width: 42px; height: 42px; border: 2px solid var(--yellow); border-radius: 50%; background: transparent; color: var(--yellow); box-sizing: border-box; }
/* Menú contraído: el favicon, sin círculo */
.brand-mini { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; object-fit: contain; }

/* ---------- Animación suave al contraer / expandir el menú ---------- */
@media (min-width: 901px) {
  .sidebar { transition: width .28s cubic-bezier(.4, 0, .2, 1); will-change: width; }
  .brand { position: relative; min-height: 70px; transition: padding .28s cubic-bezier(.4, 0, .2, 1); }
  .brand .brand-logo, .brand .brand-word { transition: opacity .18s ease, transform .28s cubic-bezier(.4, 0, .2, 1); white-space: nowrap; }
  .brand .brand-mini { display: block; position: absolute; left: 18px; top: 50%; transform: translateY(-50%) scale(.6); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .28s cubic-bezier(.4, 0, .2, 1); }
  .nav-item { transition: padding .28s cubic-bezier(.4, 0, .2, 1), gap .28s cubic-bezier(.4, 0, .2, 1), background .15s; }
  .nav-item > span:not(.nav-count) { display: inline-block; white-space: nowrap; overflow: hidden; max-width: 190px; opacity: 1; transition: opacity .18s ease, max-width .28s cubic-bezier(.4, 0, .2, 1); }
  .nav-label { white-space: nowrap; overflow: hidden; max-height: 34px; transition: opacity .18s ease, max-height .28s ease, margin .28s ease, padding .28s ease; }
  .me-text { white-space: nowrap; overflow: hidden; max-width: 150px; transition: opacity .18s ease, max-width .28s cubic-bezier(.4, 0, .2, 1); }

  .nav-mini .brand { justify-content: flex-start; padding: 20px 20px 18px; }
  .nav-mini .brand .brand-logo, .nav-mini .brand .brand-word { display: block; opacity: 0; transform: translateX(-12px); }
  .nav-mini .brand .brand-mini { opacity: 1; transform: translateY(-50%) scale(1); }
  .nav-mini nav { padding: 4px 10px 12px; }
  .nav-mini .nav-item { justify-content: flex-start; padding: 10px 17px; gap: 0; }
  .nav-mini .nav-item > span:not(.nav-count) { display: inline-block; max-width: 0; opacity: 0; }
  .nav-mini .nav-label { font-size: 11px; opacity: 0; max-height: 1px; padding: 0; margin: 8px 14px; border-top: 1px solid rgba(255,255,255,.08); }
  .nav-mini .me-text { display: flex; max-width: 0; opacity: 0; }
}
/* Sin animación al cargar la página (solo cuando lo abres o cierras) */
.no-anim, .no-anim * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .sidebar, .sidebar * { transition: none !important; } }
/* La barra lateral no muestra barra de desplazamiento (sigue desplazándose con la rueda) para que los íconos queden centrados */
.sidebar { scrollbar-width: none; -ms-overflow-style: none; }
.sidebar::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (min-width: 901px) {
  .nav-mini .nav-item { padding: 10px calc(50% - 9px); }
}

/* ---------- Barra del editor de correos (estilo Bigin) ---------- */
.rte-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 10px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.tpl-toolbar.rte-bar button.rte-b, .rte-b { height: 34px; min-width: 34px; padding: 0 7px; border: 1px solid transparent; border-radius: 7px; background: none; color: #4A5468; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 1px; font: inherit; }
.rte-b:hover { background: var(--surface); border-color: var(--line); color: var(--text); }
.rte-b i { display: inline-flex; margin-left: -1px; opacity: .7; }
.rte-size { font-weight: 500; font-size: 14px; min-width: 18px; }
.rte-sep { width: 1px; height: 22px; background: var(--line-strong); margin: 0 6px; }
.rte-grow { flex: 1; }
.rte-field { gap: 6px !important; color: var(--text) !important; font-weight: 600; font-size: 13px; border-color: var(--line) !important; background: var(--surface) !important; }
.rte-field:hover { border-color: var(--yellow) !important; }
.code-on .rte-b:not([data-c="code"]):not(.rte-field) { opacity: .35; pointer-events: none; }
[data-theme="dark"] .rte-b { color: #C5CDDD; }

.rte-pop { position: fixed; z-index: 120; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; max-width: calc(100vw - 16px); }
.rte-menu { display: flex; flex-direction: column; min-width: 170px; max-height: 320px; overflow-y: auto; }
.rte-menu button { text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 10px; }
.rte-menu button:hover { background: var(--surface-2); }
.rte-sizes { min-width: 80px; }
.rte-colors { width: 236px; padding: 4px; }
.rte-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.rte-tabs button { flex: 1; border: 1px solid var(--line); background: none; border-radius: 6px; padding: 5px; cursor: pointer; font: inherit; font-size: 13px; color: var(--muted); }
.rte-tabs button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.rte-sw { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.rte-sw button { width: 100%; aspect-ratio: 1; border-radius: 5px; border: 1px solid rgba(0,0,0,.15); cursor: pointer; padding: 0; }
.rte-sw button:hover { transform: scale(1.12); }
.rte-custom { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--muted); }
.rte-custom input { width: 40px; height: 26px; border: 0; padding: 0; background: none; cursor: pointer; }
.rte-form { display: flex; flex-direction: column; gap: 8px; width: 300px; padding: 6px; }
.rte-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.rte-form input:not([type=file]) { height: 34px; border: 1px solid var(--line-strong); border-radius: 7px; padding: 0 10px; background: var(--surface); font: inherit; font-size: 14px; color: var(--text); }
.rte-form .rte-up { align-self: flex-start; flex-direction: row; color: var(--text); }
.rte-actions { display: flex; justify-content: space-between; gap: 8px; }
.rte-actions .btn-primary { margin-left: auto; }
.rte-grid { display: grid; grid-template-columns: repeat(6, 20px); gap: 3px; padding: 4px; }
.rte-grid i { width: 20px; height: 20px; border: 1px solid var(--line-strong); border-radius: 3px; cursor: pointer; }
.rte-grid i.on { background: var(--yellow-50); border-color: var(--yellow); }
.rte-grid-l { text-align: center; font-size: 12px; color: var(--muted); padding: 2px 0 4px; }

/* Selector de campos con "#" (como Bigin) */
.mf-pop { padding: 0; border: 2px solid var(--yellow); border-radius: 12px; width: 340px; }
.mf-pop::before { content: ''; position: absolute; top: -9px; left: 14px; width: 14px; height: 14px; background: var(--surface); border-left: 2px solid var(--yellow); border-top: 2px solid var(--yellow); transform: rotate(45deg); border-radius: 3px 0 0 0; }
.mf-pop.up::before { top: auto; bottom: -9px; transform: rotate(225deg); }
.mf { position: relative; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; }
.mf-mod { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 12px 0 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font: inherit; font-size: 15px; color: var(--text); cursor: pointer; }
.mf-mod:hover { border-color: var(--yellow); }
.mf-mods { position: absolute; top: 62px; left: 14px; right: 14px; z-index: 2; background: var(--surface); border: 2px solid var(--yellow); border-radius: 8px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; }
.mf-mods[hidden] { display: none; }
.mf-mods button { text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 6px; font: inherit; font-size: 15px; color: var(--text); cursor: pointer; }
.mf-mods button:hover { background: var(--yellow-50); }
.mf-search { display: flex; align-items: center; height: 42px; border: 2px solid var(--yellow); border-radius: 8px; padding: 0 12px; color: var(--muted); }
.mf-search input { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: var(--text); min-width: 0; }
.mf-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; margin: 0 -6px; padding: 0 6px 8px; }
.mf-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; text-align: left; border: 0; background: none; padding: 11px 12px; border-radius: 7px; font: inherit; font-size: 15px; color: var(--text); cursor: pointer; }
.mf-item.on { background: var(--surface-2); color: var(--blue); }
.mf-item small { color: var(--faint); font-size: 12px; white-space: nowrap; }
.mf-empty { padding: 14px 12px; color: var(--muted); font-size: 14px; }

/* Lista con buscador */
.ss { position: relative; }
.ss-native { position: absolute !important; opacity: 0; pointer-events: none; width: 1px !important; height: 1px !important; }
.ss-btn { width: 100%; min-height: 38px; text-align: left; padding: 0 34px 0 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font: inherit; color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235F6B82' stroke-width='2'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.ss-btn:focus { outline: 0; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,180,0,.2); }
.ss-box { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0; min-width: 280px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 8px; }
.ss-box input { width: 100%; height: 38px; border: 2px solid var(--yellow); border-radius: 8px; padding: 0 10px; font: inherit; background: var(--surface); color: var(--text); outline: 0; }
.ss-list { max-height: 300px; overflow-y: auto; margin-top: 6px; display: flex; flex-direction: column; }
.ss-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); padding: 10px 10px 4px; }
.ss-opt { text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 6px; font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; }
.ss-opt.on { background: var(--surface-2); color: var(--blue); }
.ss-opt.sel { font-weight: 700; }
.ss-empty { padding: 10px; color: var(--muted); font-size: 13px; }
.bulk-panel .ss { min-width: 320px; flex: 1; max-width: 560px; }
.bulk-panel .ss-btn { min-height: 34px; }

/* ---------- Redactor de correos ---------- */
.cmp { position: fixed; inset: 0; z-index: 110; background: rgba(0, 21, 60, .45); display: grid; place-items: center; padding: 16px; }
.cmp[hidden] { display: none; }
.cmp-open { overflow: hidden; }
.cmp-card { width: min(980px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; }
.cmp-head { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 16px; }
.cmp-row { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--line); min-height: 48px; }
.cmp-row > label { width: 80px; flex: none; color: var(--muted); font-size: 14px; }
.cmp-row input { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: 14.5px; color: var(--text); height: 46px; min-width: 0; }
.cmp-from { color: var(--muted); font-size: 14px; }
.cmp-tpl .ss { flex: 1; padding: 6px 0; }
.cmp-tpl .ss-btn { border-color: var(--line); }
.cmp-body { flex: 1; min-height: 0; overflow: auto; background: #fff; }
.cmp-body iframe { width: 100%; height: 380px; border: 0; display: block; background: #fff; }
.cmp-body textarea { width: 100%; height: 380px; border: 0; border-radius: 0; }
.cmp-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px; }
.cmp-files:not(:empty) { padding: 10px 18px; border-top: 1px solid var(--line); }
.cmp-file { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 13px; }
.cmp-file small { color: var(--muted); }
.cmp-file button { border: 0; background: none; cursor: pointer; font-size: 16px; color: var(--muted); padding: 0 6px; }
.cmp-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2); }
@media (max-width: 700px) { .cmp { padding: 0; } .cmp-card { max-height: 100vh; height: 100vh; border-radius: 0; } .cmp-row > label { width: 58px; } .cmp-foot .hint { display: none; } }

/* ---------- Señales ---------- */
.sg-wrap { position: relative; }
.sg-bell { position: relative; }
.sg-count { position: absolute; top: 2px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #E84126; color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; line-height: 1; border: 2px solid var(--bg); }
.sg-count[hidden] { display: none; }
.sg-panel { position: absolute; top: calc(100% + 8px); right: -60px; z-index: 70; width: 380px; max-width: calc(100vw - 24px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; }
.sg-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.sg-body { max-height: 420px; overflow-y: auto; }
.sg-item { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none !important; }
.sg-item:hover { background: var(--surface-2); }
.sg-item.new { background: var(--yellow-50); }
.sg-item b { font-weight: 600; font-size: 13.5px; }
.sg-item span { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-item small { color: var(--faint); font-size: 11.5px; }
.sg-empty { padding: 18px 14px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.sg-perm { width: 100%; border: 0; border-top: 1px solid var(--line); background: var(--surface-2); padding: 10px; font: inherit; font-size: 13px; font-weight: 600; color: var(--blue); cursor: pointer; }
.sg-list { padding: 0; overflow: hidden; }
.sg-list .sg-item span { white-space: normal; }
.sg-toast { position: fixed; right: 20px; bottom: 20px; z-index: 130; width: 340px; max-width: calc(100vw - 40px); background: var(--navy); color: #fff; border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 3px; text-decoration: none !important; transform: translateY(20px); opacity: 0; transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s; border-left: 4px solid var(--yellow); }
.sg-toast.in { transform: none; opacity: 1; }
.sg-toast b { font-size: 14px; }
.sg-toast span { color: #B8C4DD; font-size: 12.5px; }
[data-theme="dark"] .sg-toast { background: #1E2B4A; }
.mf-pop { display: flex; flex-direction: column; }
.mf-pop .mf { min-height: 0; flex: 1; }
.mf-pop .mf-list { flex: 1; min-height: 60px; }
.mf-mods { max-height: 280px; overflow-y: auto; }

/* ---------- Campos sobre el PDF (firma) ---------- */
.pf-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.pf-side { position: sticky; top: 76px; padding: 0; max-height: calc(100vh - 92px); overflow-y: auto; }
.pf-sec { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.pf-sec:last-child { border-bottom: 0; }
.pf-sec > b { font-size: 13px; }
.pf-signers, .pf-tools { display: flex; flex-direction: column; gap: 6px; }
.pf-signer { display: flex; align-items: center; gap: 8px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; }
.pf-signer i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; }
.pf-signer.on { border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 25%, transparent); font-weight: 600; }
.pf-tool { display: flex; align-items: center; gap: 8px; border: 1px dashed var(--line-strong); background: var(--surface); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; text-align: left; }
.pf-tool:hover { border-color: var(--yellow); }
.pf-tool.on { border-style: solid; border-color: var(--yellow); background: var(--yellow-50); font-weight: 600; }
.pf-tool:disabled { opacity: .5; cursor: default; }
.pf-actions .btn { justify-content: center; }
.pf-inspector .field select, .pf-inspector .field input { height: 34px; }
.pf-doc { display: flex; flex-direction: column; align-items: center; gap: 18px; min-width: 0; }
.pf-doc.placing .pf-layer { cursor: crosshair; }
.pf-loading { padding: 60px; color: var(--muted); }
.pf-page { position: relative; max-width: 100%; background: #fff; box-shadow: 0 2px 10px rgba(0, 21, 60, .15); border-radius: 3px; container-type: inline-size; }
.pf-page canvas { width: 100%; height: 100%; display: block; border-radius: 3px; }
.pf-layer { position: absolute; inset: 0; }
.pf-num { position: absolute; bottom: -18px; right: 0; font-size: 11px; color: var(--faint); }
.pf-field { position: absolute; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border-radius: 4px; display: flex; align-items: center; padding: 0 5px; font-size: 11px; font-weight: 600; color: var(--c); overflow: hidden; cursor: move; user-select: none; touch-action: none; box-sizing: border-box; }
.pf-field span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.pf-field.sel { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); z-index: 2; overflow: visible; }
.pf-field .pf-h { display: none; position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; background: var(--c); border: 2px solid #fff; border-radius: 3px; cursor: nwse-resize; }
.pf-field .pf-x { display: none; position: absolute; top: -11px; right: -11px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: #E84126; color: #fff; font-size: 14px; line-height: 1; cursor: pointer; padding: 0; }
.pf-field.sel .pf-h, .pf-field.sel .pf-x, .pf-field:hover .pf-x { display: block; }
.pf-field.pf-dato { border-style: dashed; }
/* En la página de firma */
.pf-sign .pf-field { cursor: default; }
.pf-sign .pf-field.other { opacity: .55; border-style: dashed; }
.pf-sign .pf-field.mine { border-style: dashed; animation: pf-pulse 2s ease-in-out infinite; color: #8A5A00; }
.pf-sign .pf-field.mine:has(img), .pf-sign .pf-field.mine:has(em) { animation: none; border-color: transparent; background: none; }
.pf-field img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pf-field em { font-style: normal; color: #17203A; font-weight: 400; white-space: nowrap; font-family: Arial, Helvetica, 'Liberation Sans', sans-serif; font-size: 11px; font-size: max(7px, 1.47cqw); }
/* Los campos de texto se ven en Arial y al tamaño con que quedarán escritos en el PDF */
.pf-field:not(.pf-firma) span { font-family: Arial, Helvetica, 'Liberation Sans', sans-serif; font-weight: 400; font-size: 11px; font-size: max(7px, 1.47cqw); }
.pf-field:not(.pf-firma) { padding: 0 3px; }
@keyframes pf-pulse { 50% { background: rgba(255, 180, 0, .28); } }
.pf-hint { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.sign-wrap .grid .pf-doc { max-height: 80vh; overflow-y: auto; padding: 4px 4px 24px; background: var(--surface-2); border-radius: 10px; }
@media (max-width: 900px) { .pf-layout { grid-template-columns: minmax(0, 1fr); } .pf-side { position: static; max-height: none; } }
/* Listas con buscador dentro de barras de filtros y formularios */
.ss { display: block; min-width: 0; }
.toolbar .ss, .db-filters .ss, .btn-row .ss { display: inline-block; min-width: 190px; max-width: 280px; }
.toolbar .ss-btn, .db-filters .ss-btn { height: 36px; min-height: 36px; }
.field .ss-btn { height: 38px; }
.qe-lines .ss-btn { height: 34px; min-height: 34px; font-size: 13.5px; }
.ss-btn:disabled { opacity: .6; cursor: default; }
.ss-box { max-width: min(520px, calc(100vw - 24px)); }

/* Página de firma: el documento a todo lo ancho y, debajo, los datos y el recuadro para firmar */
.sign-grid { display: flex; flex-direction: column; gap: 22px; }
.sign-wrap .grid.sign-grid .pf-doc { max-height: none; overflow: visible; padding: 16px 16px 30px; }
.sign-panel { width: 100%; max-width: 720px; margin: 0 auto; }
.sign-goto { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
@media (max-width: 860px) {
  .sign-wrap { padding: 16px 12px 48px; }
  .sign-wrap h1 { font-size: 19px !important; }
  .sign-wrap .grid.sign-grid .pf-doc { padding: 6px 6px 22px; }
  .sign-wrap .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .sigpad { height: 200px; }
  .pf-hint { flex-wrap: wrap; }
}

/* Ajustes → Cliq: lista de avisos desplegable */
.cliq-avisos { border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; background: var(--surface-2); }
.cliq-avisos > summary { cursor: pointer; padding: 11px 0; font-weight: 600; font-size: 13.5px; color: var(--text); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cliq-avisos > summary::-webkit-details-marker { display: none; }
.cliq-avisos > summary::after { content: '▾'; color: var(--muted); transition: transform .15s; }
.cliq-avisos[open] > summary::after { transform: rotate(180deg); }
.cliq-avisos[open] { padding-bottom: 12px; }
.cliq-avisos > form { margin-top: 0; }

/* Encuesta NPS pública */
.nps-scale { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; margin-top: 18px; }
.nps-n { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 16px; text-decoration: none !important; }
.nps-n:hover { border-color: var(--yellow-600); }
.nps-n.on.r { background: #E84126; border-color: #E84126; color: #fff; }
.nps-n.on.y { background: var(--yellow); border-color: var(--yellow); color: #00153C; }
.nps-n.on.g { background: #12805C; border-color: #12805C; color: #fff; }
.nps-legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; }
.nps-google { margin-top: 20px; padding: 16px; border-radius: 12px; background: var(--yellow-50); border: 2px solid var(--yellow); text-align: center; }
.nps-google p { margin: 4px 0 12px; color: var(--muted); font-size: 13.5px; }
.nps-res { display: flex; align-items: baseline; gap: 10px; }
.nps-res b { font-size: 26px; }
.nps-res.good b { color: var(--green); } .nps-res.bad b { color: var(--red); }
.nps-res span { color: var(--muted); text-transform: capitalize; }
@media (max-width: 480px) { .nps-scale { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.nps-db { display: flex; flex-direction: column; gap: 12px; }
.nps-db-score { display: flex; align-items: baseline; gap: 10px; }
.nps-db-score b { font-size: 34px; } .nps-db-score.good b { color: var(--green); } .nps-db-score.bad b { color: var(--red); }
.nps-db-score span { color: var(--muted); font-size: 13px; }
.nps-db-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.nps-db-list span { display: block; color: var(--muted); }

/* Firma discreta al pie */
.sa-credit { margin: 12px auto 10px; text-align: center; font-size: 11px; color: var(--faint); max-width: 640px; padding: 0 16px; }
.sa-credit a { color: var(--muted); text-decoration: underline; }
.auth .sa-credit { position: absolute; bottom: 10px; right: 0; width: 50%; margin: 0; }
@media (max-width: 860px) { .auth .sa-credit { position: static; width: auto; margin: 12px auto; } }

/* Interruptor de las automatizaciones: se desliza sin recargar la página */
.switch { width: 42px; height: 24px; border-radius: 999px; border: 0; background: #CDD2DB; position: relative; cursor: pointer; padding: 0; transition: background-color .25s ease; flex: none; }
.switch span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,21,60,.25); transition: transform .25s cubic-bezier(.4,0,.2,1); transform: translateX(0); }
.switch.on { background: #12805C; }
.switch.on span { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.switch.busy { opacity: .7; pointer-events: none; }

/* Inicio de sesión: Piccolo asomado desde abajo, con una frase según la hora */
.auth-art > * { position: relative; z-index: 1; }
.auth-art > .auth-piccolo { position: absolute; z-index: 0; right: -10%; bottom: 0; width: min(90%, 70vh); transform: translateY(36%); pointer-events: none; }
.auth-art:has(.auth-piccolo) { justify-content: flex-start; gap: 0; }
.auth-art:has(.auth-piccolo) > div:nth-child(2) { margin-top: 10vh; }
@media (min-width: 1600px) { .auth-art { padding: 56px 64px; } .auth-art h2 { font-size: clamp(38px, 2.6vw, 56px); max-width: 640px; } .auth-art p { font-size: clamp(14px, .95vw, 18px); max-width: 520px; } }
.auth-art:has(.auth-piccolo) > p.small { display: none; }
.auth-piccolo img { width: 100%; display: block; opacity: .9; }
.auth-bubble { position: absolute; z-index: 2; right: 76%; top: 6%; width: max-content; max-width: clamp(220px, 34vh, 340px); background: #fff; color: #00153C; font-weight: 700; font-size: clamp(14px, 1.9vh, 19px); line-height: 1.35; padding: 12px 16px; border-radius: 16px 16px 4px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .45s ease, transform .45s ease; }
.auth-bubble.show { opacity: 1; transform: none; }

/* Formulario público /hablemos */
.hab .auth-form { align-items: start; padding-top: 48px; }
.hab .auth-box { max-width: 520px; }
.hab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.hab-grid .full { grid-column: 1 / -1; }
.hab-grid input, .hab-grid select, .hab-grid textarea { width: 100%; }
.hab-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.hab-terms { font-size: 12.5px; color: var(--muted); margin: 4px 0 16px; align-items: flex-start; }
.hab-ok .btn { width: auto; }
@media (max-width: 560px) { .hab-grid { grid-template-columns: 1fr; } }
.hab-tel { display: flex; gap: 6px; }
.hab-grid .hab-tel select { width: 104px; flex: none; padding-right: 22px; }
.hab-grid .hab-tel input { flex: 1; min-width: 0; }
/* Panel azul del formulario: texto centrado y Piccolo asomado más abajo para no taparlo */
.hab .auth-art { justify-content: flex-start; }
.hab .auth-art > div:nth-child(2) { margin: auto 0; max-width: 460px; align-self: center; width: 100%; padding-bottom: 18vh; }
.hab .auth-art > .auth-piccolo { right: -6%; width: min(62%, 54vh); transform: translateY(30%); }
@media (max-width: 860px) { .hablemos .auth-art { display: none; } }
.pub-wrap:has(+ .sa-credit) { padding-bottom: 0; }
/* Advertencia antes de borrar */
.borrar-box { max-width: 720px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.borrar-box h3 { font-size: 14px; margin: 18px 0 8px; }
.borrar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.borrar-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; }
.borrar-list li svg { flex: none; margin-top: 2px; color: var(--red); }
.borrar-list.avisos li svg { color: var(--orange, #D98A1C); }

/* Celular: Piccolo se asoma en una franja azul encima del formulario de entrada */
@media (max-width: 820px) {
  .auth:has(.auth-piccolo) { grid-template-rows: auto 1fr; }
  .auth .auth-art:has(.auth-piccolo) { display: flex; height: 230px; padding: 22px 20px 0; }
  .auth .auth-art:has(.auth-piccolo) > div:nth-child(2), .auth .auth-art:has(.auth-piccolo) > p.small { display: none; }
  .auth .auth-art > .auth-piccolo { right: 4%; width: 175px; transform: translateY(40%); }
  .auth .auth-bubble { right: 96%; top: 18%; max-width: calc(100vw - 205px); font-size: 13.5px; padding: 10px 13px; }
  .auth:has(.auth-piccolo) .auth-form { place-items: start center; padding-top: 34px; }
  .hab .auth-art:has(.auth-piccolo) { display: none; }
}

/* Etapas: transiciones suaves */
.st-node::after { transition: background-color .45s ease; }
.st-dot { transition: background-color .3s ease, border-color .3s ease, transform .2s ease; }
.st-dot:hover { transform: scale(1.15); }
.st-pill { view-transition-name: st-pill; }
.stepper { view-transition-name: stepper; }
.stepper.moving { cursor: progress; }
.stepper.moving button { pointer-events: none; }
.stepper.just-moved .st-pill { animation: st-pop .5s cubic-bezier(.2,.9,.3,1.3); }
@keyframes st-pop { from { transform: scale(.7); opacity: .4; } to { transform: none; opacity: 1; } }
::view-transition-group(st-pill) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
::view-transition-old(stepper), ::view-transition-new(stepper) { animation-duration: .3s; }
.k-list { transition: background-color .2s ease; }
.k-card { transition: border-color .15s ease, opacity .15s ease, box-shadow .15s ease; }
.k-card.dragging { opacity: .45; transform: rotate(1.5deg); }
@media (prefers-reduced-motion: reduce) { .stepper.just-moved .st-pill { animation: none; } }
/* Varios documentos para firma */
.multi-up { border: 1.5px dashed var(--line-strong); border-radius: 12px; padding: 18px; background: var(--surface); }
.mu-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px; border-radius: 10px; text-align: center; color: var(--muted); transition: background-color .15s ease; }
.mu-drop b { font-size: 16px; color: var(--text); }
.mu-drop.over { background: rgba(255,180,0,.14); }
.multi-up.has-files .mu-drop { flex-direction: row; justify-content: center; padding: 8px; gap: 10px; }
.multi-up.has-files .mu-drop svg { width: 20px; height: 20px; }
.mu-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.mu-list li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.mu-grip { cursor: grab; color: var(--faint); letter-spacing: -2px; }
.mu-n { width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 12px; display: grid; place-items: center; flex: none; }
.mu-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-name small { margin-left: 8px; color: var(--faint); }
/* Firma: guías magnéticas y cuadrícula */
.pf-guide { position: absolute; z-index: 5; pointer-events: none; background: #FF2D8A; }
.pf-guide.v { top: 0; bottom: 0; width: 1px; transform: translateX(-.5px); }
.pf-guide.h { left: 0; right: 0; height: 1px; transform: translateY(-.5px); }
.pf-doc.pf-dragging .pf-layer, .pf-doc.pf-grid-on .pf-layer {
  background-image: linear-gradient(to right, rgba(37,99,201,.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(37,99,201,.10) 1px, transparent 1px);
  background-size: 5% 3.535%;
}
#pf-grid.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.peek-ic { width: 26px; height: 26px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); flex: none; }
.peek-body section h3 .badge { margin-left: 6px; vertical-align: 1px; }
/* Conversaciones de WhatsApp y SMS (tipo iMessage): azul WhatsApp, verde SMS */
.chat { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 14px; background: var(--surface); }
.chat-head { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; background: var(--surface-2); }
.chat-body { display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 18px; max-height: 560px; overflow-y: auto; }
.chat-day { text-align: center; margin: 10px 0 6px; }
.chat-day span { font-size: 11px; color: var(--faint); background: var(--surface-2); padding: 2px 10px; border-radius: 999px; }
.chat-msg { display: flex; flex-direction: column; align-items: flex-end; margin-top: 6px; }
.chat-bubble { --bub: #1A8CFF; max-width: min(78%, 520px); background: var(--bub); color: #fff; padding: 9px 13px; border-radius: 18px 18px 5px 18px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; cursor: pointer; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.chat-sms .chat-bubble { --bub: #34C759; }
.chat-bubble.pending { opacity: .7; }
.chat-bubble.err { --bub: #D93025; }
.chat-meta { font-size: 11px; color: var(--faint); margin: 3px 4px 0; text-align: right; }
.chat-meta b { color: var(--muted); font-weight: 600; }
.chat-empty { display: grid; place-items: center; gap: 6px; padding: 30px 10px; text-align: center; color: var(--faint); }
/* Edición en línea del encabezado del negocio */
.inline-edit { cursor: text; border-radius: 6px; padding: 0 3px; margin: 0 -3px; transition: background-color .15s ease; }
.inline-edit:hover { background: rgba(255,180,0,.16); }
.inline-edit.busy { opacity: .6; }
.inline-input { font: inherit; color: inherit; background: var(--surface); border: 1.5px solid var(--yellow); border-radius: 8px; padding: 2px 8px; outline: none; box-shadow: 0 0 0 3px rgba(255,180,0,.2); }
.saved { animation: saved-flash 1.1s ease; }
@keyframes saved-flash { 0% { background: rgba(18,128,92,.22); } 100% { background: transparent; } }
.owner-pick { display: inline-flex; align-items: center; gap: 2px; border-radius: 6px; padding: 0 2px; cursor: pointer; }
.owner-pick:hover { background: rgba(255,180,0,.16); }
.rec-owner .owner-pick select { field-sizing: content; max-width: 70vw; border: 0; background: transparent; color: inherit; font: inherit; padding: 0 16px 0 2px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 6px center, right 2px center; background-size: 4px 4px; background-repeat: no-repeat; height: auto; min-height: 0; width: auto; box-shadow: none; }
.rec-owner .owner-pick select:focus { outline: 2px solid var(--yellow); outline-offset: 1px; }
/* La etapa actual ocupa lo que mide su nombre, para que no se monte sobre la siguiente */
@media (min-width: 761px) { .st-node.cur::after { min-width: 24px; } }
/* Fotos de perfil */
img.avatar-img { object-fit: cover; padding: 0; background: var(--surface-2); }
.avatar.xl { width: 84px; height: 84px; font-size: 28px; }
.avatar.xs { width: 18px; height: 18px; font-size: 8px; vertical-align: -4px; margin-right: 4px; }
.photo-row { display: flex; gap: 16px; align-items: center; }
.chat-meta .avatar { display: inline-grid; }
/* Pestañas en una sola línea; las que no caben van al menú ⋮ */
.tabs.tabs-fit { flex-wrap: nowrap; overflow: visible; align-items: center; }
.tabs-more { margin-left: auto; flex: none; }
.tabs-more .icon-btn { font-size: 18px; width: 32px; height: 32px; border-radius: 50%; }
.tabs-more.has-active .icon-btn { background: rgba(255,180,0,.2); }
.tabs-more .dropdown-menu { min-width: 210px; }
.tabs-more .dropdown-menu .tab { border-bottom: 0; margin: 0; padding: 8px 10px; border-radius: 7px; display: flex; justify-content: space-between; }
.tabs-more .dropdown-menu .tab:hover { background: var(--surface-2); }
.tabs-more .dropdown-menu .tab.active { color: var(--ink); background: rgba(255,180,0,.14); }

/* Etapas en celular: barra por segmentos y selector, en vez de la lista larga */
.st-mobile { display: none; }
@media (max-width: 760px) {
  .stepper .st-track, .stepper .st2, .stepper .st-ends { display: none; }
  .stepper { padding: 14px 16px 12px; }
  .st-mobile { display: block; width: 100%; }
  .st-m-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
  .st-m-count { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
  .st-m-pick { margin: 0; min-width: 0; }
  .stepper .st-m-pick select { appearance: none; -webkit-appearance: none; background-color: var(--yellow); background-image: linear-gradient(45deg, transparent 50%, #00153C 50%), linear-gradient(135deg, #00153C 50%, transparent 50%); background-position: right 15px center, right 10px center; background-size: 5px 5px; background-repeat: no-repeat; color: #00153C; border: 0; border-radius: 999px; padding: 7px 30px 7px 14px; font: inherit; font-weight: 700; font-size: 13.5px; max-width: 62vw; height: auto; min-height: 0; text-overflow: ellipsis; }
  .st-m-bar { display: flex; gap: 4px; }
  .st-m-seg { flex: 1; margin: 0; }
  .st-m-seg button { display: block; width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--line-strong); padding: 0; cursor: pointer; transition: background-color .35s ease, transform .2s ease; }
  .st-m-seg.done button { background: var(--green); }
  .st-m-seg.cur button { background: var(--yellow); transform: scaleY(1.35); }
  .st-m-names { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin-top: 6px; }
}

.stepper .st-m-pick select { border: 0 !important; box-shadow: none; }
[data-theme="dark"] .stepper .st-m-pick select { color: #00153C; }
/* Enviar SMS */
.btn-sms { background: #34C759; border-color: #34C759; color: #fff; }
.btn-sms:hover { background: #2DB24F; }
.sms-card { width: min(560px, 100%); }
.sms-body { padding: 14px 18px 4px; overflow-y: auto; }
.sms-body .field select, .sms-body .field textarea { width: 100%; }
.sms-body textarea { height: auto; padding: 10px 11px; resize: vertical; }
.sms-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: -4px 0 10px; }
.sms-preview { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
/* Barra superior: reloj, configuración y perfil */
.topbar .search { margin-right: auto; }
.tb-clock { font-size: 12.5px; color: var(--muted); white-space: nowrap; padding: 0 6px; }
.tb-clock b { color: var(--text); font-weight: 600; }
.tb-avatar { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; display: grid; }
.tb-avatar .avatar { width: 34px; height: 34px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--yellow); }
.tb-me .dropdown-menu { min-width: 260px; }
.tb-me-head { display: flex; gap: 10px; align-items: center; padding: 8px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.tb-me-head b { display: block; color: var(--ink); }
.tb-me-head small { display: block; color: var(--muted); font-size: 12px; }
@media (max-width: 1100px) { .tb-clock { display: none; } }
@media (max-width: 820px) {
  .topbar { gap: 6px; }
  .topbar .search { min-width: 0; flex: 1 1 auto; }
  .topbar a.icon-btn[href="/ajustes"] { display: none; }
  .tb-avatar .avatar { width: 30px; height: 30px; }
}
@media (max-width: 820px) { .topbar .search input { min-width: 0; width: 100%; } .topbar > *:not(.search) { flex: none; } }

/* ================= Movimiento suave en toda la interfaz ================= */
:root { --ease: cubic-bezier(.22, .9, .24, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --t-fast: .16s; --t: .26s; --t-slow: .38s; }
@keyframes sa-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sa-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sa-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sa-card { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* Cambio de página suave (Chrome, Edge y Safari recientes) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .18s ease both sa-fade reverse; }
::view-transition-new(root) { animation: .26s var(--ease-out) both sa-fade; }
.sidebar { view-transition-name: sidebar; }
.topbar { view-transition-name: topbar; }
::view-transition-group(sidebar), ::view-transition-group(topbar) { animation: none; }

/* Menús desplegables: aparecen y se van deslizando en vez de saltar */
.dropdown-menu { display: block !important; visibility: hidden; opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; pointer-events: none; transition: opacity var(--t-fast) ease, transform var(--t) var(--ease-out), visibility 0s linear var(--t); }
.dropdown.open .dropdown-menu { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity var(--t-fast) ease, transform var(--t) var(--ease-out), visibility 0s; }
.dropdown-menu a, .dropdown-menu button { transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
.tabs-more[hidden] { display: none !important; }

/* Campanita de señales */
.sg-panel { transform-origin: top right; animation: sa-pop var(--t) var(--ease-out); }
.sg-panel.closing { animation: sa-pop .18s ease reverse forwards; pointer-events: none; }
.sg-body { transition: height var(--t) var(--ease-out); overflow: hidden auto; }
.sg-body > * { animation: sa-rise .32s var(--ease-out) both; }
.sg-body > *:nth-child(2) { animation-delay: .03s; } .sg-body > *:nth-child(3) { animation-delay: .06s; } .sg-body > *:nth-child(4) { animation-delay: .09s; }
.sg-body > *:nth-child(5) { animation-delay: .12s; } .sg-body > *:nth-child(n+6) { animation-delay: .15s; }
.sg-count { transition: transform var(--t) var(--ease-out); }
.sg-count.bump { animation: sg-bump .5s var(--ease-out); }
@keyframes sg-bump { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: none; } }

/* Ventanas (SMS, correo, vista de mensajes) */
.modal:not(.hidden) { animation: sa-fade var(--t) ease; }
.modal:not(.hidden) > .modal-card, .modal:not(.hidden) > .modal-box { animation: sa-card var(--t-slow) var(--ease-out); }
.modal.closing { animation: sa-fade .2s ease reverse forwards; }
.modal.closing > .modal-card, .modal.closing > .modal-box { animation: sa-card .2s ease reverse forwards; }
.cmp:not([hidden]) { animation: sa-fade var(--t) ease; }
.cmp:not([hidden]) > .cmp-card { animation: sa-card var(--t-slow) var(--ease-out); }

/* Panel lateral del contacto, menú del celular, avisos */
.peek-panel { transition-duration: var(--t-slow); transition-timing-function: var(--ease); }
@media (max-width: 820px) { .sidebar { left: 0 !important; transform: translateX(-105%); transition: transform var(--t-slow) var(--ease) !important; } .sidebar.open { transform: none; } }
.flash { animation: sa-rise .35s var(--ease-out); }
.ss-box, .sr-box:not(.hidden), .picker-list:not(.hidden) { animation: sa-pop var(--t) var(--ease-out); transform-origin: top center; }
details[open] > :not(summary) { animation: sa-rise .28s var(--ease-out); }
.chat-msg { animation: sa-rise .3s var(--ease-out) both; }
.tab { transition: color var(--t-fast) ease, border-color var(--t) var(--ease); }
.btn, .icon-btn { transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease, transform var(--t-fast) ease; }
.btn:active, .icon-btn:active { transform: scale(.97); }
.card, .stat { animation: sa-rise .32s var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  @view-transition { navigation: none; }
}
/* WhatsApp > Nuevo mensaje con vista previa */
.wa-new-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 18px; align-items: start; }
.wa-new-grid textarea { width: 100%; height: auto; padding: 10px 11px; resize: vertical; }
.wa-preview-wrap .field-label { display: block; margin-bottom: 6px; }
.wa-preview { background: #ECE5DD; border-radius: 12px; padding: 16px 14px; min-height: 180px; background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size: 14px 14px; }
[data-theme="dark"] .wa-preview { background-color: #0B141A; }
.wa-bubble { position: relative; margin-left: auto; max-width: 92%; width: fit-content; background: #DCF8C6; color: #111B21; border-radius: 10px 2px 10px 10px; padding: 8px 10px 18px; font-size: 14px; line-height: 1.42; white-space: pre-wrap; word-wrap: break-word; box-shadow: 0 1px 1px rgba(0,0,0,.12); min-width: 90px; }
[data-theme="dark"] .wa-bubble { background: #005C4B; color: #E9EDEF; }
.wa-bubble small { position: absolute; right: 8px; bottom: 3px; font-size: 10.5px; color: #667781; }
[data-theme="dark"] .wa-bubble small { color: #8696A0; }
.wa-bubble u { color: #027EB5; text-decoration: none; }
.wa-bubble.pop { animation: sa-rise .3s var(--ease-out); }
@media (max-width: 820px) { .wa-new-grid { grid-template-columns: 1fr; } }
/* Edición en línea de campos del contacto */
.inline-edit.empty { color: var(--faint); font-style: italic; }
select.inline-select { border: 0; background: transparent; color: inherit; font: inherit; padding: 0 16px 0 0; height: auto; min-height: 0; width: auto; max-width: 100%; field-sizing: content; cursor: pointer; appearance: none; -webkit-appearance: none; border-radius: 6px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 6px center, right 2px center; background-size: 4px 4px; background-repeat: no-repeat; transition: background-color var(--t-fast) ease; }
select.inline-select:hover { background-color: rgba(255,180,0,.16); }
.rec-line .inline-edit { word-break: break-all; }

/* Tablas personalizables */
.t-custom { position: relative; }
.table.t-fixed { table-layout: fixed; }
.table.t-fixed td, .table.t-fixed th { overflow: hidden; text-overflow: ellipsis; }
.table th { position: relative; }
.table th.sortable { cursor: pointer; user-select: none; }
.table th.sortable:hover { color: var(--text); }
.table th[data-sort]::after { content: '▲'; font-size: 8px; margin-left: 5px; vertical-align: 1px; }
.table th[data-sort="desc"]::after { content: '▼'; }
.col-rs { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 2; }
.col-rs::after { content: ''; position: absolute; top: 25%; bottom: 25%; left: 3px; width: 1px; background: var(--line-strong); opacity: 0; transition: opacity var(--t-fast) ease; }
.table th:hover .col-rs::after, .t-resizing .col-rs::after { opacity: 1; }
.t-resizing { cursor: col-resize; user-select: none; }
.t-menu { position: relative; z-index: 5; }
.table th.t-gear-cell, .table td.t-gear-cell { width: 44px; padding: 0 8px 0 0; text-align: right; }
.table th.t-gear-cell { position: sticky; right: 0; background: var(--surface-2); }
.t-menu .dropdown-menu { right: 0; left: auto; text-align: left; font-weight: 400; color: var(--text); white-space: normal; }
.t-btn { width: 30px; height: 30px; font-size: 15px; color: var(--muted); }
.t-menu .dropdown-menu { min-width: 220px; max-height: 70vh; overflow-y: auto; }
.t-menu-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); padding: 8px 10px 4px; }
.t-menu-i { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 7px; cursor: pointer; font-size: 13.5px; }
.t-menu-i:hover { background: var(--surface-2); }
.t-dens { display: flex; gap: 4px; padding: 2px 8px 8px; }
.t-dens button { flex: 1; border: 1px solid var(--line); background: var(--surface); border-radius: 7px; padding: 5px 4px; font: inherit; font-size: 12px; cursor: pointer; color: var(--text); width: auto; justify-content: center; }
.t-dens button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.t-reset { border-top: 1px solid var(--line) !important; margin-top: 4px; color: var(--muted) !important; font-size: 12.5px; }
.table[data-dens="compacta"] td { padding-top: 5px; padding-bottom: 5px; }
.table[data-dens="amplia"] td { padding-top: 16px; padding-bottom: 16px; }
.t-count { margin-top: 6px; }
.t-clear { white-space: nowrap; }
.table.t-fixed { width: max-content; min-width: 100%; }
.chat-new { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.sms-preview.wa { background: #ECE5DD; }
.chat-wa .chat-msg .chat-bubble { white-space: pre-wrap; }
[data-theme="dark"] .sms-preview.wa { background: #0B141A; }
/* Celular: tablas que se deslizan de lado sin apretar el texto, y pistas de edición con toque */
@media (max-width: 820px) {
  .table td, .table th { white-space: nowrap; }
  .table td .cell-sub { white-space: normal; min-width: 140px; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .t-bar { margin-top: 0; }
  .inline-edit { padding: 2px 4px; margin: -2px -4px; }
  .inline-input { font-size: 16px; max-width: 100%; }
}
.touch .hint-dbl { display: none; }
.hint-tap { display: none; }
.touch .hint-tap { display: inline; }

/* ---------- Fórum News: marcas y ciclos de venta ---------- */
:root { --forum: #EED902; --forum-ink: #2B2100; }
.badge-forum { background: var(--forum); color: var(--forum-ink); }
.badge-sa { background: var(--navy); color: #fff; }
[data-theme="dark"] .badge-sa { background: #2A4A8C; }
.seg-brand a { display: inline-flex; align-items: center; gap: 6px; transition: background var(--t-fast, .18s) ease, color var(--t-fast, .18s) ease; }
.seg-brand a.fn.active { background: var(--forum); color: var(--forum-ink); }
.dot-sa, .dot-fn { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-sa { background: var(--navy); box-shadow: 0 0 0 1.5px #fff inset; }
.seg-brand a.active .dot-sa { background: var(--yellow); }
.dot-fn { background: var(--forum); }
.seg-brand a.fn.active .dot-fn { background: var(--forum-ink); }
[data-theme="dark"] .dot-sa { background: #7EA6F2; }
.k-desc { margin: 0 10px 10px; padding: 8px 9px; border: 1px dashed var(--line-strong); border-radius: 8px; font-size: 12px; color: var(--muted); line-height: 1.4; }
.k-renew { margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--blue); }
/* Cotización: empresa que cotiza */
.brand-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bp-opt { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--surface); transition: border-color var(--t-fast, .18s) ease, box-shadow var(--t-fast, .18s) ease, opacity var(--t-fast, .18s) ease; }
.bp-opt input { position: absolute; opacity: 0; pointer-events: none; }
.bp-opt b { display: block; }
.bp-opt small { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }
.bp-opt:has(input:checked) { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0, 21, 60, .10); }
.bp-opt.fn:has(input:checked) { border-color: #E0B400; box-shadow: 0 0 0 3px rgba(255, 210, 0, .30); }
.bp-opt:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.bp-opt:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.bp-mark { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.bp-mark.sa { background: var(--navy); color: var(--yellow); }
.bp-mark.fn { background: var(--forum); color: var(--forum-ink); }
[data-theme="dark"] .bp-opt:has(input:checked) { border-color: #7EA6F2; }
@media (max-width: 640px) { .brand-pick { grid-template-columns: minmax(0, 1fr); } }
.k-desc.inline-edit { display: block; margin: 0 10px 10px; padding: 8px 9px; cursor: text; white-space: pre-wrap; transition: border-color var(--t-fast, .18s) ease, background var(--t-fast, .18s) ease; }
.k-desc.inline-edit:hover { border-color: var(--yellow); background: var(--surface); }
.k-desc.inline-edit.empty { font-style: italic; color: var(--faint); }
.k-desc.editing { padding: 4px; border-style: solid; }
.inline-area { width: 100%; resize: vertical; font: inherit; font-size: 12.5px; line-height: 1.4; border: 1px solid var(--yellow); border-radius: 6px; padding: 6px 7px; background: var(--surface); color: var(--text); }
/* Enlaces al cliente de Fórum News: logo de Fórum y "Una marca Studio Amarillo" debajo */
.pub-head.fn { background: #0A0A0A; }
.pub-brand.fn-lock { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
.pub-brand.fn-lock > img { max-height: 30px; max-width: min(160px, 46vw); }
.fn-by { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #C9CED8; white-space: nowrap; }
.fn-by img { height: 13px; width: auto; max-width: 110px; display: block; }
.fn-by b { color: #fff; letter-spacing: 0; text-transform: none; font-size: 12px; }
@media (max-width: 480px) { .pub-brand.fn-lock > img { max-height: 26px; } .fn-by { font-size: 9px; gap: 5px; } .fn-by img { height: 11px; } }
/* Documentos de Fórum News: negro en vez del azul marino de Studio Amarillo */
.pub-wrap.fn { --ink: #0A0A0A; }
.pub-wrap.fn .pub-foot { background: #0A0A0A; }
.pub-wrap.fn .btn-navy, .pub-wrap.fn .btn-primary.navy { background: #0A0A0A; border-color: #0A0A0A; }
[data-theme="dark"] .pub-wrap.fn { --ink: #F2F2F2; }
/* Listas desplegables con buscador: abren y cierran suave */
.ss-box { transform-origin: top center; animation: sa-pop .18s var(--ease, cubic-bezier(.2,.7,.2,1)); }
.ss-box.closing { animation: ss-out .16s ease forwards; pointer-events: none; }
@keyframes ss-out { to { opacity: 0; transform: translateY(-4px) scale(.98); } }
.ss-btn { transition: border-color .18s ease, box-shadow .18s ease, background-position .18s ease; }
.ss-open > .ss-btn { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,180,0,.2); }
/* Bloques que aparecen o desaparecen dentro de un formulario, sin saltos */
.reveal { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .3s var(--ease, cubic-bezier(.2,.7,.2,1)), opacity .24s ease; }
.reveal > div { overflow: hidden; min-height: 0; }
.reveal.is-hidden { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.renew-box { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 4px; background: var(--surface-2); margin-top: 2px; }
.renew-title { font-weight: 600; font-size: 13.5px; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.renew-check { display: flex; align-items: center; min-height: 38px; align-self: center; }
@media (prefers-reduced-motion: reduce) { .ss-box, .ss-box.closing { animation: none; } .reveal { transition: none; } }
/* Una lista abierta dentro de una tarjeta siempre queda por encima de lo que sigue (antes quedaba detrás de la tabla) */
:is(.card, .stat, .toolbar, .table-wrap, .modal-card, .rec-side, .rec-main, .k-col):has(.ss-open, .dropdown.open) { position: relative; z-index: 45; }
/* Entregas de la orden (Fórum News) */
.ent-progress { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ent-progress .bar { flex: 1; min-width: 160px; height: 8px; border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.ent-progress .bar span { display: block; height: 100%; background: #12805C; border-radius: 8px; transition: width .5s var(--ease, ease); }
.ent-group .card-head h2 { font-size: 15px; }
.ent-table td { vertical-align: middle; }
.ent-table select, .ent-table input { height: 34px; border: 1px solid var(--line-strong); border-radius: 7px; padding: 0 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; transition: border-color .18s ease, box-shadow .18s ease; }
.ent-table select:focus, .ent-table input:focus { outline: 0; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,180,0,.2); }
.ent-who { min-width: 130px; }
.ent-link { min-width: 220px; width: 100%; }
.ent-date { min-width: 140px; }
.ent-table tr.ent-done td:first-child b::before { content: '✓ '; color: #12805C; }
.ent-save { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 35%); padding-top: 14px; }
.ent-def { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.ent-def-row { display: grid; grid-template-columns: 72px 1fr; gap: 6px; }
.ent-def-row input, .ent-def-row select { height: 36px; border: 1px solid var(--line-strong); border-radius: 7px; padding: 0 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; min-width: 0; }
.recetas-table .receta-in { width: 74px; height: 32px; text-align: right; border: 1px solid var(--line-strong); border-radius: 7px; padding: 0 6px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.recetas-table b.ok { color: var(--green); }
.recetas-table b.bad { color: var(--red); }
/* Menús dentro de tablas (Personalizar tabla): cerrados no ocupan espacio, así la tabla no muestra una barra de
   desplazamiento de más; abiertos se ven completos aunque la tabla tenga una sola fila */
.table-wrap .dropdown:not(.open) .dropdown-menu { display: none !important; }
.table-wrap .dropdown.open .dropdown-menu { animation: sa-pop .18s var(--ease-out, ease) both; }
.table-wrap:has(.dropdown.open) { overflow: visible; }

/* Botón de "Seleccionar archivo" con la tipografía y el estilo del CRM */
input[type="file"] { font: inherit; font-size: 13.5px; color: var(--muted); width: 100%; max-width: 100%; padding: 6px; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--surface-2); cursor: pointer; transition: border-color .18s ease, background-color .18s ease; }
input[type="file"]:hover { border-color: var(--yellow); background: var(--surface); }
input[type="file"]:focus-visible { outline: 0; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,180,0,.2); }
input[type="file"]::file-selector-button { font: inherit; font-weight: 600; font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 14px; margin-right: 12px; cursor: pointer; transition: background-color .18s ease, border-color .18s ease; }
input[type="file"]::file-selector-button:hover { background: var(--yellow-50, #FFF6DE); border-color: var(--yellow); }
.field input[type="file"] { height: auto; }
.corte-pasos { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--text); line-height: 1.5; }
.corte-pasos li::marker { color: var(--yellow); font-weight: 700; }
/* Embudo de Inicio: todas las etapas, con las cerradas separadas */
.home-funnel-row { display: grid; grid-template-columns: 170px 1fr 120px; gap: 12px; align-items: center; padding: 6px 0; color: inherit; text-decoration: none; border-radius: 8px; transition: background-color .18s var(--ease-out, ease); }
.home-funnel-row:hover { background: var(--surface-2); }
.home-funnel-sep { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.home-funnel-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- Calendario propio (estilo Bigin) ---------- */
input.dp-input {
  cursor: pointer;
  padding-right: 34px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F6B82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  font-variant-numeric: tabular-nums;
}
.toolbar input.dp-input, .field-inline input.dp-input, label > input.dp-input { min-width: 132px; }
.dp-pop {
  position: fixed; z-index: 1000; width: 300px; max-width: calc(100vw - 32px);
  padding: 14px 14px 10px; border-radius: 12px; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0, 21, 60, .14), 0 2px 6px rgba(0, 21, 60, .06);
  font-family: var(--font); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top left;
  transition: opacity .16s var(--ease-out, ease), transform .18s var(--ease-out, ease);
}
.dp-pop.up { transform-origin: bottom left; transform: translateY(6px) scale(.98); }
.dp-pop.in { opacity: 1; transform: none; }
.dp-pop.out { opacity: 0; transform: translateY(-4px) scale(.98); transition-duration: .14s; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dp-title { border: 0; background: none; font: inherit; font-weight: 700; font-size: 15px; color: var(--text); padding: 4px 10px; border-radius: 8px; cursor: pointer; transition: background-color .15s ease; }
.dp-title:hover { background: var(--surface-2); }
.dp-nav { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; border-radius: 50%; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.dp-nav:hover { background: var(--surface-2); color: var(--text); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; justify-items: center; }
.dp-wd { font-size: 12.5px; color: var(--muted); padding: 4px 0 8px; }
.dp-day {
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid transparent; background: none;
  font: inherit; font-size: 14px; color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.dp-day:hover:not(:disabled) { background: var(--surface-2); }
.dp-day.today { border-color: var(--green); }
.dp-day.sel { background: #D6E8FB; color: #0B3A75; font-weight: 600; }
.dp-day.sel:hover { background: #C6DEF8; }
.dp-day:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
.dp-day:disabled { color: var(--faint); cursor: default; opacity: .5; }
.dp-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dp-month { height: 40px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; transition: background-color .15s ease; }
.dp-month:hover { background: var(--surface-2); }
.dp-month.sel { background: #D6E8FB; color: #0B3A75; font-weight: 600; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.dp-link { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--blue); padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.dp-link.muted { color: var(--muted); }
.dp-link:hover:not(:disabled) { background: var(--surface-2); }
.dp-link:disabled { opacity: .4; cursor: default; }
@media (max-width: 380px) { .dp-day { width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .dp-pop { transition: none; } }
:root[data-theme="dark"] .dp-day.sel, :root[data-theme="dark"] .dp-month.sel { background: #1F3E6B; color: #DCEBFF; }
:root[data-theme="dark"] .dp-pop { box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.recetas-table tr.receta-falta td { background: var(--yellow-50); }
:root[data-theme="dark"] .recetas-table tr.receta-falta td { background: rgba(255, 180, 0, .07); }

/* ---------- Listas desplegables tipo Bigin ---------- */
.ss-box { padding: 6px; border-radius: 10px; border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0, 21, 60, .14), 0 2px 6px rgba(0, 21, 60, .06); min-width: 220px; }
.ss-box.up { top: auto; bottom: calc(100% + 4px); transform-origin: bottom center; }
.ss-box input {
  height: 36px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 10px 0 32px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%235F6B82' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ss-box input:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 180, 0, .18); }
.ss-box.ss-short input { position: absolute; opacity: 0; pointer-events: none; height: 0; padding: 0; border: 0; }
.ss-box.ss-short .ss-list { margin-top: 0; }
.ss-list { gap: 1px; }
.ss-opt { position: relative; padding: 9px 34px 9px 12px; border-radius: 7px; font-size: 14px; transition: background-color .12s ease, color .12s ease; }
.ss-opt.on { background: #EEF4FD; color: var(--text); }
.ss-opt.sel { font-weight: 600; color: #0B5CC4; }
.ss-opt.sel::after { content: ""; position: absolute; right: 12px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230B5CC4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center; }
.ss-opt:disabled { opacity: .45; cursor: default; }
.ss-btn { font-size: 14px; }
:root[data-theme="dark"] .ss-opt.on { background: #1A2A47; }
:root[data-theme="dark"] .ss-opt.sel { color: #8DBBFF; }
:root[data-theme="dark"] .ss-opt.sel::after { filter: brightness(1.9) saturate(.7); }
:root[data-theme="dark"] .ss-box { box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.ss-box { right: auto; width: max-content; min-width: max(100%, 200px); }
.ss-opt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Bolsillos y totales que se abren con un clic */
.bolsillos { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.stat-link, .stat-link-wrap { position: relative; }
.stat-link-wrap { display: flex; }
.stat-link-wrap > .stat { flex: 1; }
.stretched { position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }
.stretched:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.stat-link a:not(.stretched), .stat-link-wrap a:not(.stretched) { position: relative; z-index: 2; }
.stat-link, .stat-link-wrap > .stat { transition: border-color .18s var(--ease-out, ease), transform .18s var(--ease-out, ease), box-shadow .18s var(--ease-out, ease); }
.stat-link:hover, .stat-link-wrap:hover > .stat { border-color: var(--yellow); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.bolsillo-cobros { border-top: 3px solid var(--navy); }
:root[data-theme="dark"] .bolsillo-cobros { border-top-color: var(--yellow); }
@media (prefers-reduced-motion: reduce) { .stat-link:hover, .stat-link-wrap:hover > .stat { transform: none; } }
.ss-opt { flex-shrink: 0; line-height: 1.35; }
.permisos-table th.center, .permisos-table td.center { text-align: center; }
.permisos-table td.center input { width: 18px; height: 18px; accent-color: var(--ink); }
.permisos-table td:first-child { min-width: 260px; }
.row-actions { display: inline-flex; align-items: center; gap: 2px; }
.row-actions .icon-btn { color: var(--muted); transition: color .15s ease, background-color .15s ease; }
.row-actions a.icon-btn:hover { color: var(--blue); background: var(--surface-2); }
.static-field { min-height: 38px; display: flex; align-items: center; padding: 0 11px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); background: var(--surface-2); }
.mes-toolbar { align-items: center; gap: 10px; margin-bottom: 14px; }
[data-pago-resta] { transition: color .18s ease; }
.pago-ok { color: var(--green); font-weight: 600; }
.pago-pendiente { color: var(--orange, #B26A00); font-weight: 600; }
.pago-exceso { color: var(--red); font-weight: 600; }
[data-falta-ver] { transition: color .18s ease; }
input.money-input { font-variant-numeric: tabular-nums; }

/* ---------- Etiquetas y orígenes de color (estilo Bigin) ---------- */
.pill { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.pill-c0 { background: #C9EEEA; color: #0F5E57; }
.pill-c1 { background: #FFD3D3; color: #9B2C2C; }
.pill-c2 { background: #D6E6FF; color: #1D4E9E; }
.pill-c3 { background: #E6DDFF; color: #4B32A6; }
.pill-c4 { background: #FFE8B8; color: #7A4E00; }
.pill-c5 { background: #D3F2D9; color: #1E6B34; }
.pill-c6 { background: #FFD9EC; color: #9C2363; }
.pill-c7 { background: #FFDCC7; color: #94400F; }
.pill-c8 { background: #E1E6EE; color: #3B4559; }
.pill-c9 { background: #E8F0C4; color: #4F5E12; }
.pill-more { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); font-weight: 600; }
[data-theme="dark"] .pill-c0 { background: #123F3B; color: #8FE3D9; }
[data-theme="dark"] .pill-c1 { background: #4A1F22; color: #FFB3B3; }
[data-theme="dark"] .pill-c2 { background: #1B3156; color: #A9C8FF; }
[data-theme="dark"] .pill-c3 { background: #2E2559; color: #CDBEFF; }
[data-theme="dark"] .pill-c4 { background: #4A3A12; color: #FFD98A; }
[data-theme="dark"] .pill-c5 { background: #173D22; color: #9BE3AE; }
[data-theme="dark"] .pill-c6 { background: #4A1D36; color: #FFB3D8; }
[data-theme="dark"] .pill-c7 { background: #4A2A16; color: #FFC29E; }
[data-theme="dark"] .pill-c8 { background: #2A3346; color: #C5CDDD; }
[data-theme="dark"] .pill-c9 { background: #34391A; color: #D5E39A; }
.tags { gap: 5px; align-items: center; }
.pill-x { border: 0; background: none; color: inherit; opacity: .55; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 2px; transition: opacity .15s ease; }
.pill-x:hover { opacity: 1; }
.tag-editor { gap: 6px; align-items: center; }
.tag-plus { background: var(--yellow-50); color: var(--ink); border: 1px dashed var(--yellow); cursor: pointer; }
/* Menú propio: opción para agregar */
.ss-opt.ss-add { color: var(--blue); font-weight: 600; border-top: 1px solid var(--line); border-radius: 0 0 7px 7px; margin-top: 2px; }
.ss-opt .pill { font-size: 13px; }
.ss-btn .pill { font-size: 13px; vertical-align: middle; }
/* Listas en línea (fichas): sin borde hasta pasar el mouse */
.ss-inline { display: inline-block; min-width: 160px; }
.ss-inline .ss-btn { border-color: transparent; background-color: transparent; min-height: 30px; height: 30px; padding-left: 6px; }
.ss-inline .ss-btn:hover, .ss-inline.ss-open .ss-btn { border-color: var(--line-strong); background-color: var(--surface); }
.origen-nuevo { margin-top: 8px; width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font: inherit; color: var(--text); }
.origen-nuevo.is-hidden, .tp-box.is-hidden { display: none; }
/* Selector de etiquetas */
.tp { position: relative; }
.tp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 38px; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); cursor: text; transition: border-color .15s ease, box-shadow .15s ease; }
.tp-chips:focus-within { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 180, 0, .2); }
.tp-input { flex: 1; min-width: 120px; border: 0 !important; outline: 0; background: transparent; font: inherit; color: var(--text); height: 28px; padding: 0 4px !important; box-shadow: none !important; }
.tp-box { top: calc(100% + 4px); left: 0; }
.tp-single .tp-chips { min-height: 32px; padding: 2px 6px; }

/* ---------- Programa de referidos ---------- */
.ref-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 0 0 16px; border-radius: 10px; background: var(--green-50); color: #0F5E3F; font-size: 14px; }
.ref-banner svg { flex-shrink: 0; margin-top: 1px; }
.hab .field.is-hidden { display: none; }
.ref-code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 28px; font-weight: 700; letter-spacing: .06em; text-align: center; padding: 16px; margin: 6px 0 16px; border: 2px dashed var(--yellow); border-radius: 12px; background: var(--yellow-50); color: var(--ink); cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.ref-code:hover { transform: translateY(-1px); }
.ref-code.copied { background: var(--green-50); border-color: var(--green); }
.ref-code.sm { display: inline-block; font-size: 14px; padding: 4px 10px; margin: 0; border-width: 1.5px; border-radius: 8px; }
.ref-link { display: flex; gap: 8px; }
.ref-link input { flex: 1; min-width: 0; }
.ref-ok .btn-wa { margin-top: 12px; }
.ref-mini { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ref-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ref-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13.5px; }
.totals .desc-row span, .pub-totals .pub-desc span { color: #12805C; }
[data-theme="dark"] .ref-banner { color: #9BE3AE; }

/* ---------- Avisos propios (estilo Bigin), centrados en la pantalla ---------- */
.sa-dlg-back { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: rgba(0, 21, 60, .32); backdrop-filter: blur(2px); opacity: 0; transition: opacity .18s var(--ease-out, ease); }
.sa-dlg-back.in { opacity: 1; }
.sa-dlg-back.out { opacity: 0; transition-duration: .15s; }
.sa-dlg { width: min(440px, 100%); background: var(--surface); color: var(--text); border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 21, 60, .28), 0 2px 8px rgba(0, 21, 60, .08); padding: 22px 22px 18px; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-family: var(--font); transform: translateY(8px) scale(.97); transition: transform .2s var(--ease-out, cubic-bezier(.2, .8, .2, 1)); }
.sa-dlg-back.in .sa-dlg { transform: none; }
.sa-dlg-back.out .sa-dlg { transform: translateY(4px) scale(.98); }
.sa-dlg-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50); color: var(--blue); }
.sa-dlg-ico.info { background: var(--blue-50); color: var(--blue); }
.sa-dlg-ico.edit { background: var(--yellow-50); color: #8A5A00; }
.sa-dlg-ico.danger { background: var(--red-50); color: var(--red); }
.sa-dlg-main { min-width: 0; padding-top: 2px; }
.sa-dlg h2 { margin: 0; font-size: 16.5px; line-height: 1.35; font-weight: 700; }
.sa-dlg p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.sa-dlg-in { width: 100%; margin-top: 12px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; resize: vertical; min-height: 72px; }
.sa-dlg-in:focus { outline: 0; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 180, 0, .2); }
.sa-dlg-btns { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.sa-dlg-btns .btn { min-width: 96px; justify-content: center; }
.btn.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.btn-danger:hover { filter: brightness(.94); }
html.sa-dlg-open { overflow: hidden; }
[data-theme="dark"] .sa-dlg-back { background: rgba(0, 0, 0, .55); }
@media (max-width: 480px) { .sa-dlg { grid-template-columns: 1fr; text-align: left; } .sa-dlg-btns .btn { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .sa-dlg-back, .sa-dlg { transition: none; } }

/* El iPhone no agranda el texto por su cuenta (lo hacía con el pie del portal y el crédito) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 640px) {
  .sa-credit { font-size: 11.5px; line-height: 1.5; padding: 0 16px; }
  .pub-foot, .pub-wrap footer { font-size: 12.5px; line-height: 1.5; }
}
.pub-foot a { color: inherit; text-decoration: none; }
.ref-title span { white-space: nowrap; }
.ref-terms { margin-top: 22px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font-size: 12.5px; color: var(--muted); }
.ref-terms summary { cursor: pointer; font-weight: 700; color: var(--text); font-size: 13px; }
.ref-terms ol { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; line-height: 1.5; }
.ref-terms b { color: var(--text); }
.cmp-row .ss { flex: 1; min-width: 0; }
.cmp-row .ss .ss-btn { border-color: transparent; background-color: transparent; padding-left: 0; color: var(--muted); }
.cmp-row .ss:hover .ss-btn, .cmp-row .ss.ss-open .ss-btn { border-color: var(--line-strong); padding-left: 10px; }
/* Barra de etapas: la última etapa va al final (sin espacio vacío a su derecha), así los tramos quedan parejos */
@media (min-width: 761px) {
  .st-node:last-child { flex: 0 0 auto; position: relative; }
  .st-node:last-child .st-label { position: absolute; top: 0; right: 0; margin-top: 6px; white-space: nowrap; padding-right: 0; text-align: right; }
  .st-track { padding-right: 4px; }
}

/* WhatsApp: estado bajo cada mensaje (pendiente de enviar / enviado) */
.chat-st { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; text-decoration: none; border-radius: 999px; padding: 1px 7px; }
.chat-st svg { width: 12px; height: 12px; }
.chat-st-pend { color: #D93025; background: rgba(217, 48, 37, .1); }
.chat-st-ok { color: #1E8E3E; background: rgba(30, 142, 62, .1); }
a.chat-st:hover { text-decoration: underline; }
.wa-item:target { border-color: var(--yellow, #FFB400); box-shadow: 0 0 0 3px rgba(255, 180, 0, .3); scroll-margin-top: 90px; }

/* Ventana "Enviar al cliente": correo, WhatsApp y SMS */
.env-card { width: min(520px, 100%); }
.env-body { padding: 14px 18px 6px; display: grid; gap: 10px; }
.env-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color var(--t), background var(--t), box-shadow var(--t); }
.env-opt:hover { border-color: #C9D2E3; }
.env-opt input { position: absolute; opacity: 0; pointer-events: none; }
.env-opt:has(input:checked) { border-color: var(--yellow, #FFB400); background: rgba(255, 180, 0, .07); box-shadow: 0 0 0 3px rgba(255, 180, 0, .15); }
.env-opt:has(input:focus-visible) { outline: 2px solid var(--yellow, #FFB400); outline-offset: 2px; }
.env-opt.off { cursor: not-allowed; opacity: .6; }
.env-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; }
.env-ico.env-email { background: #2A62CE; }
.env-ico.env-whatsapp { background: #25D366; }
.env-ico.env-sms { background: #7A5AF8; }
.env-txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.env-txt .small { overflow-wrap: anywhere; }
.env-why { color: #D93025; }
.env-tick { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; color: transparent; flex: 0 0 auto; transition: all var(--t); }
.env-opt:has(input:checked) .env-tick { background: var(--yellow, #FFB400); border-color: var(--yellow, #FFB400); color: #00153C; }
.env-tick svg { width: 13px; height: 13px; }
[data-theme="dark"] .env-opt { border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .env-opt:has(input:checked) { background: rgba(255, 180, 0, .1); }

/* Fórum News en la web: el título del documento (arriba a la derecha) con el amarillo de Fórum */
.pub-head.fn .pub-doc span { color: var(--forum); }
.pub-wrap.fn { --yellow: var(--forum); }

/* ---------- Página pública de referidos: fondo azul marino, formulario en tarjeta blanca ---------- */
body.refp { background: #00153C; min-height: 100vh; color: #fff; }
.refp-wrap { position: relative; min-height: 100vh; display: grid; place-items: start center; gap: 26px; padding: 44px 16px 60px; overflow: hidden; }
.refp-wrap > * { position: relative; z-index: 1; width: min(520px, 100%); }
.refp-bird { position: fixed !important; z-index: 0 !important; right: -50px; bottom: -70px; width: min(500px, 36vw) !important; pointer-events: none; }
.refp-bird img { width: 100%; display: block; opacity: .9; }
/* Globo con frases que van cambiando */
.refp-say { position: absolute; right: 18%; top: 0; transform: translateY(-100%); background: #fff; color: #00153C; font-weight: 700; font-size: 14.5px; line-height: 1.35; padding: 12px 16px; border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,.3); max-width: 230px; text-align: center; }
.refp-say::after { content: ''; position: absolute; right: 40px; bottom: -8px; width: 18px; height: 18px; background: #fff; transform: rotate(45deg); border-radius: 3px; }
.refp-say span { display: block; transition: opacity .35s ease, transform .35s ease; }
.refp-say span.out { opacity: 0; transform: translateY(6px); }
/* Pantallas medianas: no cabe a un lado del formulario, así que va al final de la página */
@media (max-width: 1179px) {
  .refp-wrap { padding-bottom: 300px; }
  .refp-bird { position: absolute !important; z-index: 2 !important; right: 50%; margin-right: -130px; bottom: -70px; width: 260px !important; }
  .refp-say { left: 50%; right: auto; top: -10px; transform: translate(-50%, -100%); width: max-content; max-width: min(300px, calc(100vw - 32px)); }
  .refp-say::after { left: calc(50% - 9px); right: auto; }
}
.refp-head { text-align: center; display: grid; justify-items: center; gap: 12px; }
.refp-logo { max-height: 38px; max-width: 220px; display: block; }
.refp-logo.txt { font-size: 22px; font-weight: 800; color: #fff; }
.refp-title { margin: 14px 0 0; font-size: clamp(30px, 6vw, 42px); line-height: 1.08; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.refp-title span { color: var(--yellow); white-space: nowrap; }
.refp-lead { margin: 0; color: #B8C4DD; font-size: 15.5px; line-height: 1.6; max-width: 470px; }
.refp-lead b { color: #fff; }
.refp-brands { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin-top: 6px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.05); }
.refp-brands-l { font-size: 12.5px; color: #B8C4DD; width: 100%; }
.refp-chip { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 10px; background: rgba(255,255,255,.08); }
.refp-chip.fn { background: rgba(255,255,255,.08); }
.refp-chip-img { max-height: 18px; max-width: 130px; display: block; }
.refp-chip-img.txt { font-size: 13px; font-weight: 700; color: #fff; }
.refp-chip.fn .refp-chip-img.txt { color: #EED902; }
.refp-card { background: #fff; color: var(--text); border-radius: 18px; padding: 28px 26px; box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: sa-fade .35s ease; }
.refp-card .auth-box { max-width: none; width: 100%; padding: 0; margin: 0; }
.refp-card h1 { margin: 0 0 6px; font-size: 26px; color: #00153C; }
.refp-card .field input { width: 100%; }
.refp-go { width: 100%; justify-content: center; margin-top: 14px; height: 46px; font-size: 15px; }
.refp-card .ref-ok { text-align: center; }
.refp-card .ref-ok .field { text-align: left; }
.refp-wa { display: flex !important; width: 100% !important; justify-content: center; height: 46px; font-size: 15px; margin: 14px auto 0 !important; }
.refp-card .ref-terms { text-align: left; }
.refp-card .ref-ok > p.small { text-align: center; }
body.refp .sa-credit a { color: #C9D2E3; }

[data-theme="dark"] .refp-card { background: #fff; color: #17203A; --text: #17203A; --muted: #5F6B82; --line: #E3E7EF; --surface-2: #F6F7FA; }
[data-theme="dark"] .refp-card input { background: #fff; color: #17203A; border-color: #D5DBE6; }
@media (max-width: 560px) {
  .refp-wrap { padding: 30px 16px 268px; gap: 20px; }
  .refp-card { padding: 22px 18px; border-radius: 16px; }
  .refp-bird { width: 220px !important; margin-right: -110px; }
}

/* /hablemos con el mismo estilo: tarjeta más ancha para el formulario en dos columnas */
.refp-wrap.refp-wide > * { width: min(640px, 100%); }
.refp-wide .refp-title { max-width: 560px; }
.refp-wide .refp-title span { white-space: normal; }
.refp-card .hab-ok { text-align: center; }
.refp-card .hab-terms { display: flex; gap: 8px; margin: 10px 0 0; }

/* Encabezado de la tarjeta centrado; en /referidos también el campo */
.refp-card-head { text-align: center; margin: 0 0 18px; }
.refp-card-head h1 { margin: 0 0 6px; }
.refp-card-head p { margin: 0 auto; max-width: 440px; }
.refp-center { text-align: center; }
.refp-center .field-label { display: block; text-align: center; }
.refp-center input { text-align: center; }
/* Términos: abre y cierra suave */
.ref-terms > .ref-terms-body { overflow: hidden; }
.refp-chip-img { max-height: 20px; }
.refp-chip-img { height: 20px; width: auto; max-width: 130px; object-fit: contain; }
/* Páginas públicas: el crédito queda cerca de la tarjeta (sin el alto de pantalla completa) */
.refp-wrap { min-height: 0; padding-bottom: 28px; }
body.refp .sa-credit { margin: 0 auto 24px; position: relative; z-index: 1; color: #8D9AB8; }
@media (max-width: 1179px) { .refp-wrap { padding-bottom: 300px; } }
@media (max-width: 560px) { .refp-wrap { padding-bottom: 268px; } }

.utm-box { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.utm-box summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }

/* Buscador: resultados que cambian suave y cambio de página más limpio */
.sr-box { transition: opacity .18s ease; overflow-x: hidden; }
.sr-box.sr-loading { opacity: .6; }
.sr-box.sr-gone { display: none !important; animation: none !important; }
.sr-item { transition: background-color .14s ease; }
::view-transition-old(root) { animation: .2s cubic-bezier(.4,0,1,1) both sa-fade reverse; }
::view-transition-new(root) { animation: .28s cubic-bezier(.16,1,.3,1) both sa-page-in; }
@keyframes sa-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
::view-transition-old(topbar), ::view-transition-old(sidebar) { display: none; }
::view-transition-new(topbar), ::view-transition-new(sidebar) { animation: none; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* Estadísticas de SMS (LabsMobile) */
.sms-rings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sms-ring { text-align: center; padding: 16px 14px 12px; }
.sms-ring h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sms-ring svg { display: block; margin: 0 auto; }
.sms-ring .hint { margin: 8px 0 0; }
@media (max-width: 900px) { .sms-rings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Dashboard: resumen de envíos */
.db-envios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.db-envios a { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.db-envios a:hover { border-color: var(--yellow); background: var(--yellow-50); }
.db-envios span { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.db-envios b { font-size: 24px; }
.db-envios small { font-size: 12px; color: var(--muted); }
@media (max-width: 600px) { .db-envios { grid-template-columns: 1fr; } }

/* Gráficas de envíos con los colores de Studio Amarillo (claro: azul marino; oscuro: amarillo) */
:root { --ch-ok: #2B4A8F; --ch-mid: #A3AEC6; --ch-bad: #E4432C; }
[data-theme="dark"] { --ch-ok: #FFB400; --ch-mid: #5F6E8F; --ch-bad: #FF6B57; }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-val { font-size: 11px; font-weight: 700; fill: var(--text); font-variant-numeric: tabular-nums; }
.ch-hit { fill: transparent; }
.ch-stack .ch-col { transition: opacity .18s ease; }
.ch-stack:hover .ch-col { opacity: .4; }
.ch-stack:hover .ch-col:hover { opacity: 1; }
.ch-stack .ch-col:hover .ch-hit { fill: var(--line); fill-opacity: .35; }
/* Tarjetas de datos (en lugar de anillos) */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.kpi-l { font-size: 12px; font-weight: 600; color: var(--muted); }
.kpi-v { font-size: 28px; line-height: 1.1; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.kpi-sm .kpi-v { font-size: 20px; }
.kpi-tile small { font-size: 12px; color: var(--muted); }
.kpi-bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 4px 0 2px; }
.kpi-bar i { display: block; height: 100%; border-radius: 99px; background: var(--ch-ok); transition: width .5s cubic-bezier(.16,1,.3,1); }
.kpi-bar i.bad { background: var(--ch-bad); }
.kpi-bar i.accent { background: var(--yellow); }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Roles y permisos por módulo */
.permisos-table .perm-grp td { background: var(--bg-soft, rgba(127,127,127,.06)); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-top: 10px; padding-bottom: 6px; }
.permisos-table td.center input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--navy); cursor: pointer; }
[data-theme="dark"] .permisos-table td.center input[type="checkbox"] { accent-color: var(--yellow); }
.permisos-table .rol-th { min-width: 118px; vertical-align: bottom; }
.permisos-table .rol-name { font-weight: 700; text-align: center; padding: 5px 6px; font-size: 13px; min-width: 100px; }
.permisos-table .rol-del { font-size: 12px; color: var(--red); margin-top: 2px; }
.permisos-table tbody tr:not(.perm-grp):hover td { background: rgba(255,180,0,.06); }
.acc-box { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 14px; }
.acc-toggle { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.acc-toggle input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--navy); }
.acc-toggle span { display: grid; gap: 2px; }
.acc-toggle small { color: var(--muted); font-size: 12.5px; }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 18px; transition: opacity .25s ease; }
.acc-box:has(.acc-toggle input:not(:checked)) .acc-grid { opacity: .45; pointer-events: none; }
.acc-col { display: grid; gap: 6px; align-content: start; }
.acc-h { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.acc-it { display: flex; gap: 8px; align-items: center; font-size: 13.5px; cursor: pointer; }
.acc-it input { width: 16px; height: 16px; accent-color: var(--navy); }
[data-theme="dark"] .acc-it input, [data-theme="dark"] .acc-toggle input { accent-color: var(--yellow); }
.permisos-table td:first-child { min-width: 200px; }
.permisos-table .rol-th { min-width: 104px; }
.permisos-table .rol-name { min-width: 112px; max-width: 132px; }

/* Tablas: lo corto no se parte en líneas; si no cabe, la tabla se desplaza hacia el lado */
.table td.td-nw, .table th.td-nw { white-space: nowrap; }
.table td.td-wrap { min-width: 240px; }
.table .badge, .table .pill, .table .money, .table .mk-badge, .table time, .table td.right { white-space: nowrap; }
.table td.td-nw .cell-sub { white-space: nowrap; }

/* Listas en línea de las fichas (Responsable, Cliente de, Origen...): no se salen de la columna; si el nombre es largo, se parte en dos líneas */
.prop dd { min-width: 0; }
.prop dd .ss-inline { display: block; min-width: 0; max-width: 100%; }
.prop dd .ss-inline .ss-btn { white-space: normal; overflow-wrap: anywhere; height: auto; min-height: 30px; padding-top: 4px; padding-bottom: 4px; line-height: 1.35; }

/* Descuento por artículo en el cotizador y en la web */
.qe-pct { display: inline-flex; align-items: center; gap: 4px; }
.qe-pct input { width: 64px; }
.qe-pct i { font-style: normal; color: var(--muted); font-size: 13px; }
.pub-ldesc { color: #12805C; font-weight: 600; }
.pub-amt s { display: block; font-weight: 400; font-size: 12.5px; color: #8E97A9; text-align: right; }
.qe-lines .qe-pct input.num { width: 58px; padding: 0 6px; }
.qe-lines td:has(> input[data-k="qty"]) input.num { width: 64px; }
.qe-lines .money-input { width: 128px; }
.tpl-search { min-width: 320px; flex: 1 1 320px; }
.tpl-search input, .tpl-search input:focus { border: 0 !important; box-shadow: none !important; background: transparent !important; height: 36px; padding: 0; min-width: 0; }
.qe-hist { display: inline-flex; gap: 4px; margin-left: auto; }
.qe-hist .btn:disabled { opacity: .55; cursor: default; }
.qe-hist .btn:not(:disabled) { border-color: var(--navy); color: var(--navy); font-weight: 600; }
[data-theme="dark"] .qe-hist .btn:not(:disabled) { border-color: var(--yellow); color: var(--yellow); }

/* Vista previa de mensajes enviados: entra suave; WhatsApp y SMS en una ventana angosta tipo iPhone */
#msg-modal:not(.hidden) .msg-card { animation: msg-pop .32s cubic-bezier(.2,.8,.2,1); }
@keyframes msg-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
#msg-modal.msg-chat .msg-card { width: min(430px, 100%); }
#msg-modal.msg-chat .msg-frame { min-height: 0; height: min(560px, calc(100vh - 140px)); background: #fff; }
@media (prefers-reduced-motion: reduce) { #msg-modal:not(.hidden) .msg-card { animation: none; } }
.inline-date { font: inherit; color: inherit; background: var(--surface); border: 1.5px solid var(--yellow); border-radius: 8px; padding: 2px 8px; margin-left: 6px; box-shadow: 0 0 0 3px rgba(255,180,0,.2); height: 30px; }
.inline-edit.editing:has(+ .inline-date) { display: none; }
.inline-date.dp-input { width: 150px; }
#msg-modal.msg-chat .msg-frame { flex: none; }
.qe-hist { order: 9; }
.prop dd .ss-inline .ss-btn .pill { white-space: normal; max-width: 100%; }

/* Automatizaciones: el texto completo de los mensajes */
.flow-text { white-space: pre-wrap; font-size: 13px; line-height: 1.45; color: var(--text); background: var(--surface-2); border-radius: 10px; padding: 8px 11px; margin-top: 6px; max-height: 320px; overflow-y: auto; overflow-wrap: anywhere; }
.flow-text.whatsapp { background: rgba(10,132,255,.08); }
.flow-text.sms { background: rgba(52,199,89,.10); }
.flow-tpl { display: grid; gap: 4px; }
.flow-area { width: 100%; min-height: 70px; resize: vertical; font: inherit; line-height: 1.45; }

/* Vista de WhatsApp y SMS enviados, como en el iPhone (con la letra del CRM) */
.msg-view { flex: 1; overflow-y: auto; background: #fff; padding: 18px 16px 22px; max-height: min(600px, calc(100vh - 140px)); }
.mv-loading { text-align: center; color: #8A8A8E; padding: 40px 0; }
.mv-top { text-align: center; margin-bottom: 12px; }
.mv-av { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(#A5AAB5, #858A96); color: #fff; display: grid; place-items: center; margin: 0 auto 6px; font-weight: 600; font-size: 19px; letter-spacing: .02em; }
.mv-name { font-weight: 700; font-size: 15px; color: #111; }
.mv-num { font-size: 12.5px; color: #6E6E73; margin-top: 1px; }
.mv-ch { font-size: 11px; color: #8A8A8E; margin-top: 2px; }
.mv-day { text-align: center; font-size: 11px; color: #8A8A8E; margin: 6px 0 10px; }
.mv-day b { font-weight: 600; text-transform: capitalize; }
.mv-row { display: flex; flex-direction: column; align-items: flex-end; animation: mv-in .35s cubic-bezier(.2,.8,.2,1); }
.mv-bub { max-width: 84%; color: #fff; padding: 9px 13px; border-radius: 19px 19px 5px 19px; font-size: 14.5px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; background: #0A84FF; }
.mv-bub.sms { background: #34C759; }
.mv-bub a { color: #fff; text-decoration: underline; }
.mv-meta { font-size: 11px; color: #8A8A8E; margin: 5px 4px 0; text-align: right; }
.mv-meta b { color: #3C3C43; font-weight: 600; }
.mv-err { color: #D93025; }
@keyframes mv-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
#msg-modal.msg-chat .msg-card { max-height: calc(100vh - 32px); }
.qe-prov { margin-top: 6px; width: 100%; }


/* Vista previa de plantillas y mensajes de WhatsApp (azul) y SMS (verde), como en el iPhone */
.mv-phone { background: #fff; color: #111; border: 1px solid var(--line); border-radius: 22px; padding: 18px 14px 22px; min-height: 360px; font-family: var(--font); }
.mv-phone .mv-row { animation: none; }
.mv-phone .mv-bub { min-height: 22px; }
.mv-bub u { color: #fff; text-decoration: underline; }
.mv-pop { animation: mv-in .3s cubic-bezier(.2,.8,.2,1); }

/* Automatizaciones: desencadenador por fecha y condiciones al estilo Bigin */
.flow-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.flow-tabs button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 7px 12px; border-radius: 7px; cursor: pointer; transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
.flow-tabs button.on { background: var(--ink); color: #fff; }
.flow-fecha { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px 16px; align-items: center; max-width: 640px; }
.ff-l { font-size: 13px; color: var(--muted); font-weight: 600; }
.ff-cuando { display: flex; flex-direction: column; gap: 8px; }
.ff-radio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; cursor: pointer; }
.ff-radio input[type=radio] { accent-color: var(--ink); margin: 0; }
.ff-n { width: 70px !important; }
.ff-hora { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cond-q { margin: 0 0 8px; font-weight: 600; font-size: 13.5px; }
.cond-mode { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.cond-row { display: grid; grid-template-columns: 26px minmax(140px, 1fr) minmax(120px, .8fr) minmax(180px, 1.6fr) 32px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px dashed var(--line); animation: sa-rise .24s var(--ease-out); }
.cond-row:first-of-type { border-top: 0; }
.cond-val { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.cond-val > select, .cond-val > .ss { flex: 1 1 140px; min-width: 120px; }
.cond-chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(18,128,92,.1); color: #12805C; font-size: 12.5px; font-weight: 600; padding: 3px 4px 3px 10px; border-radius: 999px; animation: st-pop .18s var(--ease-out); }
.cond-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; width: 18px; height: 18px; border-radius: 50%; }
.cond-chip button:hover { background: rgba(18,128,92,.18); }
.cond-txt, .cond-in { flex: 1 1 140px; min-width: 120px; }
.cond-match { margin-top: 10px; font-size: 13.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cond-match select { width: auto; }
@media (max-width: 720px) {
  .flow-fecha { grid-template-columns: 1fr; gap: 6px; }
  .ff-l { margin-top: 6px; }
  .cond-row { grid-template-columns: 26px minmax(0, 1fr) 32px; }
  .cond-row > :nth-child(3), .cond-row > .cond-val { grid-column: 2; }
}
.flow-col > .flow-card { max-width: 760px; }
.ff-radio .input, .cond-val .input { height: 36px; }
.ff-radio > .ss, .ff-radio > select { flex: none; width: 150px; }
.cond-row > .ss, .cond-row > select { min-width: 0; }
/* Los campos dentro de una tabla no se encogen hasta quedar inservibles */
.table td > input.input:not([type=checkbox]):not([type=radio]), .table td > select.input { min-width: 110px; }

/* Avisos de Cliq en Ajustes: cada aviso con su interruptor y el mensaje como se ve en el canal */
.ca-row { display: flex; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin: 6px 0; overflow: hidden; transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.ca-row:hover { border-color: var(--line-strong); }
.ca-row:has(.ca-det[open]) { box-shadow: var(--shadow); }
.ca-row > .ca-sw { margin: 11px 0 0 12px; }
.ca-det { flex: 1; min-width: 0; }
.ca-det > summary { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; list-style: none; }
.ca-det > summary::-webkit-details-marker { display: none; }
.ca-title { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--text); min-width: 0; }
.ca-ver { font-size: 12.5px; color: var(--blue); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.ca-ver::after { content: '▾'; transition: transform var(--t) var(--ease-out); }
.ca-det[open] .ca-ver::after { transform: rotate(180deg); }
.ca-sw { position: relative; flex: none; width: 34px; height: 20px; cursor: pointer; }
.ca-sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ca-sw span { position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong); transition: background-color var(--t) ease; }
.ca-sw span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--t) var(--ease-out); }
.ca-sw input:checked + span { background: #12805C; }
.ca-sw input:checked + span::after { transform: translateX(14px); }
.ca-sw input:focus-visible + span { box-shadow: 0 0 0 3px rgba(255,180,0,.35); }
.ca-msg { display: flex; gap: 10px; padding: 2px 14px 14px 12px; }
.ca-bot { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 9.5px; font-weight: 800; display: grid; place-items: center; letter-spacing: .02em; }
.ca-body { background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px 12px 12px 12px; padding: 10px 14px; font-size: 13.5px; line-height: 1.55; color: var(--text); max-width: 460px; min-width: 0; }
.ca-head { font-weight: 700; font-size: 14px; }
.ca-line { overflow-wrap: anywhere; }
.ca-line b { font-weight: 600; }
.ca-gap { height: 8px; }
.ca-var { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--blue); background: rgba(46,108,223,.1); border-radius: 5px; padding: 0 6px; line-height: 19px; vertical-align: 1px; }
@media (max-width: 600px) { .ca-ver { font-size: 0; } .ca-ver::after { font-size: 13px; } }
.pct-total { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: rgba(232,65,38,.08); color: var(--text); font-size: 14px; transition: background-color var(--t) ease; }
.pct-total b { font-size: 18px; }
.pct-total .pct-falta { margin-left: auto; font-size: 12.5px; font-weight: 600; color: #C2361F; }
.pct-total.ok { background: rgba(18,128,92,.1); }
.pct-total.ok .pct-falta { color: #12805C; }
[data-theme="dark"] .pct-total .pct-falta { color: #FF8A73; }
[data-theme="dark"] .pct-total.ok .pct-falta { color: #4CD3A0; }

/* Resumen del cliente con IA */
.ia-card { border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, rgba(255,180,0,.07), transparent 70%), var(--surface); padding: 14px 16px; margin-bottom: 14px; }
.ia-head { display: flex; align-items: center; gap: 12px; }
.ia-head > div { flex: 1; min-width: 0; }
.ia-head b { display: block; font-size: 14.5px; }
.ia-spark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,180,0,.18); font-size: 17px; flex: none; }
.ia-loading .ia-spark { animation: ia-pulse 1.2s ease-in-out infinite; }
@keyframes ia-pulse { 50% { transform: scale(.88); opacity: .6; } }
.ia-body { overflow: hidden; margin-top: 12px; padding-top: 4px; border-top: 1px dashed var(--line); font-size: 13.8px; line-height: 1.55; }
.ia-body h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 12px 0 4px; }
.ia-body ul { margin: 0; padding-left: 18px; }
.ia-body li { margin: 3px 0; }
.ia-body p { margin: 4px 0; }
.ia-err { color: var(--red); font-size: 13px; }

/* ---------- Proyectos ---------- */
.pj-bar { height: 7px; min-width: 80px; flex: 1; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.pj-bar i { display: block; height: 100%; background: #12805C; border-radius: 999px; transition: width .5s var(--ease-out), background-color .5s ease; }
.pj-prog { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.pj-head { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 14px; border-top: 4px solid #FFB400; }
.pj-head.fn { border-top-color: #EED902; }
.pj-head-main { flex: 1; min-width: 240px; }
.pj-head h1 { margin: 4px 0 6px; font-size: 21px; text-wrap: balance; }
.pj-eyebrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.pj-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); align-items: center; }
.pj-meta b { color: var(--text); font-weight: 600; }
.pj-avs .avatar { margin-left: -4px; box-shadow: 0 0 0 2px var(--surface); }
.pj-head-side { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.pj-group { margin-bottom: 12px; overflow: hidden; padding: 0; }
.pj-group > summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; background: var(--surface-2); border-bottom: 1px solid var(--line); list-style: none; }
.pj-group > summary::-webkit-details-marker { display: none; }
.pj-group:not([open]) > summary { border-bottom: 0; }
.pj-car { color: var(--muted); transition: transform var(--t) var(--ease-out); display: inline-block; }
.pj-group:not([open]) .pj-car { transform: rotate(-90deg); }
.pj-row { display: grid; grid-template-columns: 26px minmax(200px, 1fr) 150px 120px 150px 34px; align-items: center; gap: 10px; padding: 7px 14px; border-bottom: 1px solid var(--line); transition: background-color var(--t-fast) ease; overflow: hidden; }
.pj-row:hover { background: var(--surface-2); }
.pj-row .pj-del { opacity: 0; transition: opacity var(--t-fast) ease, color var(--t-fast) ease; }
.pj-row:hover .pj-del, .pj-del:focus-visible, .pj-del.pj-del-sure { opacity: 1; }
.pj-del.pj-del-sure { color: var(--red); }
.pj-name { min-width: 0; }
.pj-title { display: block; width: 100%; max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.35; cursor: text; }
.pj-row.done .pj-title { text-decoration: line-through; color: var(--muted); }
.pj-id { font-size: 11px; color: var(--muted); font-weight: 600; }
.pj-edit { height: 32px; }
.pj-ck { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-strong); background: var(--surface); cursor: pointer; display: grid; place-items: center; padding: 0; color: #fff; font-size: 12px; transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease; }
.pj-ck.on { background: #12805C; border-color: #12805C; }
.pj-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 2px 10px 2px 4px; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; }
.pj-chip .avatar { margin: 0; }
.pj-chip.empty { padding-left: 10px; color: var(--muted); border-style: dashed; }
.pj-st { border: 0; border-radius: 7px; width: 112px; padding: 5px 0; color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: filter var(--t-fast) ease; }
.pj-st:hover { filter: brightness(1.06); }
.pj-due { border: 0; background: none; font: inherit; font-size: 12.5px; padding: 3px 6px; border-radius: 6px; cursor: pointer; color: var(--text); text-align: left; white-space: nowrap; }
.pj-due:hover { background: var(--surface-2); }
.pj-due.late, .pj-late { color: var(--red); font-weight: 600; }
.pj-add { padding: 8px 14px 10px 50px; }
.pj-add input { width: 100%; max-width: 460px; border: 1px dashed var(--line-strong); background: transparent; border-radius: 8px; padding: 7px 10px; font: inherit; color: var(--text); transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.pj-add input:focus { outline: 0; border-style: solid; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,180,0,.2); }
.pj-pop { position: fixed; z-index: 95; min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; animation: sa-pop .18s var(--ease-out); }
.pj-pop button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 7px 9px; border-radius: 7px; cursor: pointer; text-align: left; font: inherit; font-size: 13px; color: var(--text); }
.pj-pop button:hover { background: var(--surface-2); }
.pj-pop i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pj-pop-date { display: flex; flex-direction: column; gap: 4px; padding: 7px 9px; font-size: 12px; color: var(--muted); }
.pj-pop-date .dp-input, .pj-pop-date input { height: 32px; }
.pj-kan { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.pj-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-height: 220px; transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease; }
.pj-col.over { border-color: var(--yellow); background: rgba(255,180,0,.1); }
.pj-col h4 { margin: 2px 4px 10px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.pj-col h4 i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pj-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 8px; cursor: grab; box-shadow: var(--shadow); transition: transform var(--t-fast) ease, opacity var(--t-fast) ease; }
.pj-card:hover { transform: translateY(-1px); }
.pj-card.drag { opacity: .45; }
.pj-card p { margin: 0 0 8px; font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.pj-card { min-width: 0; }
.pj-card-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pj-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.pj-alert .stat-value { color: var(--red); }
.pj-mem { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pj-mem:last-of-type { border-bottom: 0; }
.pj-mem > div { flex: 1; min-width: 0; }
.pj-mem small { display: block; color: var(--muted); font-size: 12px; }
.pj-ent { display: grid; grid-template-columns: minmax(0, 1fr) 110px 52px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.pj-ent b { text-align: right; }
.pj-flow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.pj-flow a, .pj-flow span { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; }
.pj-flow i { color: var(--muted); font-style: normal; }
.pj-rule { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pj-rule:last-child { border-bottom: 0; }
.pj-rule .ca-sw { margin-top: 2px; }
.pj-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 13.5px; z-index: 95; box-shadow: var(--shadow-lg); animation: sa-rise .3s var(--ease-out); max-width: calc(100% - 32px); }
@media (max-width: 860px) {
  .pj-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-row { grid-template-columns: 26px minmax(0, 1fr) auto; row-gap: 6px; }
  .pj-row > .pj-ck { grid-row: 1; grid-column: 1; }
  .pj-row > .pj-name { grid-row: 1; grid-column: 2; }
  .pj-row > .pj-c-x { grid-row: 1; grid-column: 3; }
  .pj-row > .pj-c-who { grid-row: 2; grid-column: 2; min-width: 0; }
  .pj-row > .pj-c-st { grid-row: 2; grid-column: 3; }
  .pj-row > .pj-c-due { grid-row: 3; grid-column: 2 / 4; }
  .pj-row .pj-del { opacity: 1; }
  .pj-add { padding-left: 14px; }
}
/* Portal del cliente: sus proyectos */
.pub-proj { border: 1px solid var(--line); border-radius: 12px; margin: 0 0 12px; background: var(--surface); overflow: hidden; }
.pub-proj > summary { display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; list-style: none; }
.pub-proj > summary::-webkit-details-marker { display: none; }
.pub-proj > summary > div:first-child { flex: 1; min-width: 0; }
.pub-proj > summary p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.pub-proj-pct { display: flex; align-items: center; gap: 8px; min-width: 150px; font-weight: 700; font-size: 13px; }
.pub-proj-list { padding: 4px 16px 12px; }
.pub-proj-list h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 10px 0 4px; }
.pub-proj-t { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.pub-proj-t:last-child { border-bottom: 0; }
.pub-proj-ck { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-size: 11px; color: #fff; flex: none; }
.pub-proj-t.ok .pub-proj-ck { background: #12805C; border-color: #12805C; }
.pub-proj-t.ok .pub-proj-name { color: var(--muted); }
.pub-proj-name { flex: 1; min-width: 0; }
.pub-proj-st { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pub-proj-st.st-curso { background: rgba(30,167,225,.14); color: #0E7DB0; }
.pub-proj-st.st-revision { background: rgba(142,108,239,.14); color: #6B4FD8; }
.pub-proj-st.st-hecha { background: rgba(18,128,92,.12); color: #12805C; }
.pub-proj-d { font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-width: 560px) { .pub-proj > summary { flex-wrap: wrap; } .pub-proj-pct { min-width: 0; width: 100%; } .pub-proj-d { display: none; } }
.pj-noch { display: block; margin-bottom: 12px; }
.pj-head-side .pj-bar { flex: none; }
/* Caja de comentarios de la cotización pública: esquinas redondeadas como el resto de campos */
.pub-form textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); resize: vertical; min-height: 84px; transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.pub-form textarea:focus { outline: 0; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,180,0,.2); }
/* Proyectos: barra de arriba editable y avisos enviados */
.pj-hbtn { border: 0; background: none; font: inherit; color: var(--muted); padding: 3px 6px; margin: -3px -6px; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: background-color var(--t-fast) ease; }
.pj-hbtn:hover { background: var(--surface-2); }
.pj-hbtn b { color: var(--text); font-weight: 600; }
.pj-caret { font-size: 10px; color: var(--muted); }
[data-pj-name] { cursor: text; }
.pj-edit-h { font-size: 19px; font-weight: 700; height: 40px; margin: 4px 0 6px; max-width: 560px; }
.pj-pop-wide { min-width: 260px; max-width: 320px; }
.pj-pop-h { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 9px 4px; }
.pj-pop-mem { display: flex; align-items: center; gap: 8px; padding: 5px 9px; font-size: 13px; }
.pj-pop-mem > span:nth-child(2) { flex: 1; min-width: 0; }
.pj-log { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); z-index: 92; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(0,21,60,.14); display: flex; flex-direction: column; transform: translateX(105%); transition: transform .38s var(--ease-out); }
.pj-log.open { transform: none; }
.pj-log-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.pj-log-b { flex: 1; overflow-y: auto; padding: 12px 4px; }
.pj-log-b .ca-msg { padding: 6px 12px; }
.pj-log-b .ca-body { max-width: none; }
.pj-log-when { font-size: 11px; color: var(--muted); margin-top: 6px; }
.pj-log-err { color: var(--red); font-weight: 600; }
.pj-log-f { padding: 12px 16px; border-top: 1px solid var(--line); }
.pj-task { width: min(480px, 100%); }
.pj-task-b { flex: 1; overflow-y: auto; padding: 16px 18px; }
.pj-task-title { width: 100%; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; margin: 0 0 10px -8px; font-family: inherit; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--text); background: transparent; resize: none; overflow: hidden; transition: border-color .2s, background .2s; }
.pj-task-title:hover { background: var(--surface-2); }
.pj-task-title:focus { outline: none; border-color: var(--line); background: var(--surface); }
.pj-task-grid { display: grid; grid-template-columns: 110px 1fr; gap: 10px 12px; align-items: center; }
.pj-task-grid .input { max-width: 220px; }
.pj-task-l { font-size: 13px; color: var(--muted); display: block; }
.pj-task-dur { margin: 12px 0 16px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.pj-task-desc { width: 100%; margin-top: 6px; border-radius: 10px; resize: vertical; }
.pj-task-meta { margin: 12px 0 0; }
.pj-task-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
button.pj-title { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.pj-title:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pj-card[data-pj-open] { cursor: pointer; }
@media (max-width: 560px) { .pj-task-grid { grid-template-columns: 1fr; gap: 4px; } }
.pj-pop .pj-pop-mem .icon-btn { width: 28px; height: 28px; flex: none; justify-content: center; padding: 0; }

/* ---------- Mesa de noticias (Fórum News) ---------- */
.nw-btn-fn { background: #EED902; border-color: #EED902; color: #2B2100; font-weight: 700; }
.nw-btn-fn:hover { filter: brightness(1.04); }
.nw-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.nw-canal { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; }
.nw-canal b { font-weight: 600; }
.nw-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.nw-colh { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; font-size: 14px; }
.nw-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px; margin-bottom: 10px; animation: sa-rise .3s var(--ease-out); }
.nw-thumb { width: 96px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; font-size: 22px; }
.nw-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t) var(--ease-out); }
.nw-thumb:hover img { transform: scale(1.04); }
.nw-main { min-width: 0; }
.nw-main h3 { margin: 0 0 4px; font-size: 14.5px; line-height: 1.3; text-wrap: balance; }
.nw-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--muted); }
.nw-meta b { color: var(--text); font-weight: 600; }
.nw-avs .avatar { margin-left: -4px; box-shadow: 0 0 0 2px var(--surface); }
.nw-tag { font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.nw-tag.late { background: var(--red-50); color: var(--red); }
.nw-tag.ok { background: var(--green-50); color: var(--green); }
.nw-tag.soon { background: #FFF3D1; color: #8A5A00; }
.nw-tag.propia { background: var(--blue-50); color: var(--blue); }
.nw-tag.video { background: #FDE8E4; color: #B5391F; }
.nw-peso { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.nw-peso .input { width: 64px; height: 32px; text-align: center; }
.nw-tag.programada { background: #EFE8FD; color: #6A43D6; }
[data-theme="dark"] .nw-tag.soon { background: #3A2E10; color: #FFD36A; }
.nw-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.nw-body { margin-top: 6px; font-size: 13px; }
.nw-body summary { cursor: pointer; color: var(--blue); font-size: 12.5px; font-weight: 600; list-style: none; }
.nw-body summary::-webkit-details-marker { display: none; }
.nw-body p { margin: 6px 0 0; white-space: pre-wrap; color: var(--text); }
.nw-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.nw-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 5px; cursor: pointer; font-size: 13px; transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease; position: relative; }
.nw-chip input { position: absolute; opacity: 0; pointer-events: none; }
.nw-chip.on { border-color: var(--navy); background: var(--surface-2); font-weight: 600; }
[data-theme="dark"] .nw-chip.on { border-color: var(--yellow); }
.nw-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.nw-g { margin-bottom: 14px; }
.nw-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 8px; }
.nw-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; }
.nw-svg text { fill: var(--muted); font: 11px var(--font, inherit); }
.nw-svg .nw-grid { stroke: var(--line); }
.nw-svg .nw-hbar { fill: #D9822B; }
.nw-rank { display: grid; grid-template-columns: 22px minmax(0, 1fr) 54px 70px 70px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; font-variant-numeric: tabular-nums; }
.nw-rank:last-of-type { border-bottom: 0; }
.nw-rank.h { font-size: 11.5px; color: var(--muted); font-weight: 600; padding-top: 0; }
.nw-rank .r { text-align: right; }
.nw-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nw-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.nw-pct { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.nw-hist { padding: 10px 0; border-bottom: 1px solid var(--line); }
.nw-hist:last-child { border-bottom: 0; }
.nw-hist > div:first-child { display: flex; justify-content: space-between; gap: 10px; }
@media (max-width: 860px) {
  .nw-cols { grid-template-columns: 1fr; }
  .nw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nw-canal { margin-left: 0; }
  .nw-item { grid-template-columns: 72px minmax(0, 1fr); }
  .nw-thumb { width: 72px; height: 56px; }
}
.cliq-code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font: 12.5px/1.5 ui-monospace, Menlo, monospace; color: var(--text); white-space: pre; overflow-x: auto; margin: 6px 0 0; user-select: all; }

/* ---------- Ficha de la nota (Mesa de noticias), estilo Zoho ToDo ---------- */
.nw-item[data-nw-ficha] { cursor: pointer; transition: box-shadow var(--t) var(--ease-out), border-color var(--t) ease, transform var(--t) var(--ease-out); }
.nw-item[data-nw-ficha]:hover { box-shadow: var(--shadow-lg); border-color: var(--line-strong); transform: translateY(-1px); }
html.nwf-lock { overflow: hidden; }
.nwf-ov { position: fixed; inset: 0; z-index: 90; background: rgba(0,21,60,.45); display: none; place-items: center; padding: 24px 16px; }
.nwf-ov.open { display: grid; }
.nwf { position: relative; width: min(920px, 100%); max-height: calc(100vh - 48px); background: var(--surface); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,21,60,.28); display: flex; flex-direction: column; overflow: hidden; will-change: transform; }
.nwf-x { width: 32px; height: 32px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer; transition: transform var(--t-fast) ease, background var(--t-fast) ease; }
.nwf-x:hover { transform: scale(1.08); }
.nwf-h { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 22px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.nwf-st { border: 1px solid #F0D98A; background: #FFF6DE; color: #7A5600; font: inherit; font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: filter var(--t-fast) ease; }
.nwf-st.pub { border-color: #A8DCC4; background: var(--green-50); color: var(--green); }
.nwf-st:hover { filter: brightness(.97); }
.nwf-hf { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 0; background: none; padding: 4px 8px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--text); text-align: left; transition: background var(--t-fast) ease; }
.nwf-hf:hover { background: rgba(0,21,60,.06); }
.nwf-hf small { font-size: 11.5px; color: var(--muted); }
.nwf-hf b { font-weight: 500; font-size: 14px; }
.nwf-avs { display: flex; min-height: 24px; align-items: center; }
.nwf-avs .avatar { margin-left: -4px; box-shadow: 0 0 0 2px var(--surface-2); }
.nwf-avs .avatar:first-child { margin-left: 0; }
.nwf-sep { width: 1px; height: 28px; background: var(--line-strong); }
.nwf-acts { margin-left: auto; display: flex; gap: 2px; align-items: center; }
.nwf-acts .icon-btn { font-size: 15px; }
.nwf-b { flex: 1; overflow-y: auto; padding: 20px 26px 12px; overscroll-behavior: contain; }
.nwf-tit { display: flex; gap: 10px; align-items: flex-start; }
.nwf-ic { font-size: 18px; margin-top: 6px; }
.nwf-tit textarea { flex: 1; border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; margin-left: -8px; font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1.35; color: var(--text); background: transparent; resize: none; overflow: hidden; transition: border-color var(--t-fast), background var(--t-fast); }
.nwf-tit textarea:hover { background: var(--surface-2); }
.nwf-tit textarea:focus { outline: none; border-color: var(--line-strong); background: var(--surface); }
.nwf-ctx { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 16px 30px; font-size: 13.5px; }
.nwf-pill { border: 0; border-radius: 6px; padding: 4px 9px; background: var(--blue-50); color: var(--blue); font: inherit; font-size: 13.5px; cursor: pointer; }
.nwf-pill.fn { background: #FBF6C4; color: #5E5200; cursor: default; font-weight: 600; }
button.nwf-pill:hover { filter: brightness(.96); }
.nwf-pubbox { margin: 0 0 16px 30px; padding: 10px 12px; border-radius: 10px; background: var(--green-50); color: var(--text); font-size: 13.5px; }
.nwf-sh { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; font-size: 14px; font-weight: 700; list-style: none; cursor: default; }
.nwf-sh span { width: 20px; text-align: center; color: var(--muted); font-weight: 400; }
summary.nwf-sh { cursor: pointer; }
summary.nwf-sh::-webkit-details-marker { display: none; }
.nwf-desc, .nwf-att, .nwf-drop, .nwf-tl ol, .nwf-coms { margin-left: 30px; }
.nwf-desc-v { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; max-height: 320px; overflow-y: auto; cursor: text; transition: border-color var(--t-fast); }
.nwf-desc-v:hover { border-color: var(--line-strong); }
.nwf-desc-v.empty { color: var(--faint); }
.nwf-desc textarea { width: 100%; border-radius: 10px; resize: vertical; line-height: 1.6; padding: 12px 14px; height: auto; }
.nwf-desc .hidden { display: none; }
.nwf-att { display: inline-flex; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; background: var(--surface-2); border-radius: 10px; max-width: 100%; }
.nwf-att-img { width: 64px; height: 48px; border-radius: 6px; overflow: hidden; flex: none; }
.nwf-att-img img { width: 100%; height: 100%; object-fit: cover; }
.nwf-att b { display: block; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.nwf-att small { color: var(--muted); font-size: 12px; }
.nwf-att-a { font-size: 12.5px; margin-top: 2px; }
.linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--blue); cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }
.nwf-drop { display: block; width: calc(100% - 30px); border: 1.5px dashed var(--line-strong); border-radius: 10px; padding: 14px; background: none; color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast); }
.nwf-drop:hover { border-color: var(--navy); color: var(--text); }
.nwf-tl ol { list-style: none; padding: 0 0 0 14px; margin-top: 4px; border-left: 2px solid var(--line); }
.nwf-tl li { position: relative; padding: 5px 0 5px 4px; font-size: 13px; color: var(--muted); }
.nwf-tl li b { color: var(--text); font-weight: 500; }
.nwf-tl li::before { content: ''; position: absolute; left: -21px; top: 10px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); }
.nwf-tl li:first-child::before { border-color: var(--ink); }
.nwf-coms { margin-top: 16px; border-top: 1px solid var(--line); }
.nwf-com { display: flex; gap: 10px; padding: 12px; background: var(--surface-2); border-radius: 10px; margin-top: 8px; }
.nwf-com b { font-size: 13.5px; }
.nwf-com p { margin: 2px 0 4px; font-size: 13.5px; white-space: pre-wrap; }
.nwf-com small { color: var(--muted); font-size: 11.5px; }
.nwf-f { display: flex; gap: 10px; align-items: center; padding: 12px 22px; border-top: 1px solid var(--line); background: var(--surface-2); }
.nwf-f .input { flex: 1; }
.nwf-pop button.on { background: var(--surface-2); font-weight: 600; }
.nwf-pop .nwf-ck { margin-left: auto; color: var(--green); font-weight: 700; }
.nwf-pop button > span:nth-child(2) { flex: 1; }
.nwf-horas { max-height: 300px; overflow-y: auto; min-width: 150px; }
@media (max-width: 640px) {
  .nwf-ov { padding: 0; place-items: end stretch; }
  .nwf { max-height: 94vh; border-radius: 16px 16px 0 0; width: 100%; }
  .nwf-h { padding: 14px 16px; gap: 8px; }
  .nwf-sep { display: none; }
  .nwf-b { padding: 16px; }
  .nwf-desc, .nwf-att, .nwf-drop, .nwf-tl ol, .nwf-coms, .nwf-ctx, .nwf-pubbox { margin-left: 0; }
  .nwf-drop { width: 100%; }
  .nwf-f { padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) { .nw-item[data-nw-ficha]:hover { transform: none; } }
[data-theme="dark"] .nwf-st { background: #2E250C; border-color: #5A4A1A; color: #FFD66B; }
[data-theme="dark"] .nwf-st.pub { background: #10291F; border-color: #1E5A40; color: #6FD3A5; }
[data-theme="dark"] .nwf-pill.fn { background: #2E2B0C; color: #EED902; }
[data-theme="dark"] .nwf-hf:hover { background: rgba(255,255,255,.06); }

/* ---------- Barra de etapas del negocio: columnas parejas, nombre centrado bajo su punto y avance suave ---------- */
.stepper { align-items: flex-start; }
.st2 { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); flex: 1 1 600px; min-width: 0; }
.st2-rail { position: absolute; top: 16px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 3px; border-radius: 3px; background: var(--line); }
.st2-rail i { display: block; height: 100%; border-radius: 3px; background: var(--green); transition: width .6s var(--ease-out); }
.st2-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 0 4px; text-align: center; min-width: 0; }
.st2-dot { width: 34px; height: 34px; display: grid; place-items: center; border: 0; padding: 0; background: none; cursor: pointer; }
.st2-dot span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line-strong); background: var(--surface); color: transparent; transition: width .35s var(--ease-out), height .35s var(--ease-out), background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease, transform .2s ease; }
.st2-dot:hover span { transform: scale(1.15); border-color: var(--yellow); }
.st2-node.done .st2-dot span { background: var(--green); border-color: var(--green); color: #fff; }
.st2-node.cur .st2-dot { cursor: default; }
.st2-node.cur .st2-dot span { width: 28px; height: 28px; background: var(--yellow); border-color: var(--yellow); color: #00153C; box-shadow: 0 0 0 6px rgba(255,180,0,.22); transform: none; }
.st2-name { font-size: 12px; line-height: 1.25; color: var(--muted); max-width: 130px; padding: 2px 8px; border-radius: 999px; transition: background-color .35s ease, color .35s ease; text-wrap: balance; }
.st2-node.done .st2-name { color: var(--text); }
.st2-node.cur .st2-name { background: var(--yellow); color: #00153C; font-weight: 700; }
.stepper .st-ends { display: flex; align-self: stretch; align-items: flex-start; gap: 4px; padding: 0 2px 0 16px; border-left: 1px solid var(--line); }
.stepper .st-end { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 84px; margin: 0; }
.stepper .st-end button { width: 34px; height: 34px; transition: background-color .35s ease, border-color .35s ease, transform .2s ease; }
.stepper .st-end button:hover { transform: scale(1.08); }
.stepper .st-end .st-label { position: static; transform: none; width: auto; margin: 0; padding: 2px 4px; font-size: 12px; line-height: 1.25; text-align: center; white-space: normal; }
.stepper .st-end.cur .st-label { font-weight: 700; color: var(--text); }
@media (prefers-reduced-motion: reduce) { .st2-rail i, .st2-dot span, .st2-name { transition: none; } }
@media (min-width: 761px) and (max-width: 1280px) {
  .stepper .st-ends { flex-basis: 100%; justify-content: center; border-left: 0; border-top: 1px solid var(--line); padding: 12px 0 0; }
}
/* Tareas de proyectos que duran varios días: una barra que cruza de un día al otro */
.cal-ev.span-start { margin-right: -7px; border-radius: 5px 0 0 5px; }
.cal-ev.span-mid { margin: 0 -7px; border-radius: 0; border-left-color: transparent; }
.cal-ev.span-end { margin-left: -7px; border-radius: 0 5px 5px 0; border-left-color: transparent; }
.cal-ev.span-mid, .cal-ev.span-end { padding-left: 13px; color: var(--muted); }
.cal-day.out .cal-ev.span-mid, .cal-day.out .cal-ev.span-end, .cal-day.out .cal-ev.span-start { opacity: .7; }
.cw-allday .cal-ev.span-start { margin-right: -5px; }
.cw-allday .cal-ev.span-mid { margin: 0 -5px; }
.cw-allday .cal-ev.span-end { margin-left: -5px; }
.cal-ev[class*="span-"] { transition: filter var(--t-fast) ease; }
.cal-ev[class*="span-"]:hover { filter: brightness(.96); }
.cal-ev.cal-hueco { visibility: hidden; border-left-color: transparent; background: none; }
.cal-ev.cal-hueco::before { content: '\00a0'; }
/* Iconos de acciones al final de una fila (como Bigin): se ven al pasar el mouse; en el celular siempre */
.row-acts { display: inline-flex; gap: 2px; align-items: center; opacity: .35; transition: opacity var(--t-fast) ease; }
tr:hover .row-acts, .row-acts:focus-within { opacity: 1; }
.row-acts .icon-btn.danger:hover { color: var(--red); }
@media (hover: none) { .row-acts { opacity: 1; } }

/* Avance de cada lista de tareas, a la derecha de su título */
.pj-lprog { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; width: min(220px, 40%); }
.pj-lprog .pj-bar { min-width: 60px; }
.pj-lprog b { min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .pj-group > summary { flex-wrap: wrap; row-gap: 6px; } .pj-lprog { width: 100%; margin-left: 22px; } }
/* Asignar tarea de una vez: responsable, fecha y hora */
.pj-asig { width: 300px; max-width: calc(100vw - 16px); padding: 8px; }
.pj-asig-people { display: grid; gap: 2px; max-height: 210px; overflow-y: auto; }
.pj-pop .pj-asig-people button.on { background: var(--surface-2); font-weight: 700; box-shadow: inset 3px 0 0 var(--yellow); }
.pj-asig-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 9px 8px; }
.pj-pop .pj-asig-quick button { width: auto; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; }
.pj-pop .pj-asig-quick button.on { border-color: var(--ink); background: var(--surface-2); font-weight: 700; }
.pj-asig-when { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px; padding: 0 9px 8px; }
.pj-asig-when .input, .pj-asig-when .ss, .pj-asig-when .dp { min-width: 0; width: 100%; }
.pj-asig-f { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 9px 4px; border-top: 1px solid var(--line); }
.pj-pop .pj-asig-f button { width: auto; }
.pj-task-when { display: flex; gap: 8px; flex-wrap: wrap; }
.pj-task-when > * { flex: 1 1 130px; min-width: 0; max-width: 220px; }
.pj-pop .pj-asig-f .btn-primary { background: var(--yellow); color: #00153C; border: 1px solid var(--yellow); justify-content: center; }
.pj-pop .pj-asig-f .btn:not(.btn-primary) { border: 1px solid var(--line-strong); background: var(--surface); justify-content: center; }
.pj-pop .pj-asig-when .ss-btn { width: 100%; border: 1px solid var(--line-strong); background-color: var(--surface); border-radius: 8px; padding: 8px 28px 8px 10px; }
.pj-pop .pj-asig-when .ss-list button { width: 100%; }

/* ---------- Balance general (Contabilidad) ---------- */
.bg { display: grid; gap: 16px; margin-top: 14px; }
.bg-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bg-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bg-kpi { padding: 16px 18px; display: grid; gap: 6px; }
.bg-l { font-size: 11.5px; color: var(--muted); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.bg-v { font-size: 25px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.bg-d { font-size: 12.5px; color: var(--muted); }
.bg-in { color: var(--green); } .bg-out { color: var(--red); }
.bg-net { background: #00153C; border-color: #00153C; }
.bg-net .bg-l, .bg-net .bg-d { color: rgba(255,255,255,.72); }
.bg-net .bg-v { color: #FFB400; }
.bg-accs { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.bg-acc { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.bg-acc-top { display: flex; gap: 10px; align-items: center; }
.bg-acc-top > div { min-width: 0; flex: 1; }
.bg-acc-top b { display: block; font-size: 14.5px; }
.bg-acc-top small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.bg-bank { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 15px; letter-spacing: -.02em; background: var(--surface-2); color: var(--muted); flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.bg-bank.sm { font-size: 11px; }
.bg-pill { font-size: 10.5px; font-weight: 700; background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 1px 7px; vertical-align: 1px; }
.bg-acc-bal { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bg-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.bg-flow div { background: var(--surface-2); border-radius: 8px; padding: 6px 8px; min-width: 0; overflow-wrap: anywhere; }
.bg-flow small { display: block; color: var(--faint); font-size: 11px; }
.bg-pk { display: grid; gap: 8px; }
.bg-pk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.bg-pk-bar { grid-column: 1 / -1; height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bg-pk-bar i { display: block; height: 100%; border-radius: 999px; background: var(--green); transition: width .5s var(--ease-out); }
.bg-pk-lnk { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); }
.bg-pk-lnk .linkbtn { font-size: 11.5px; }
.bg-libre { border-top: 1px dashed var(--line); padding-top: 8px; }
.bg-add-pk { justify-self: start; }
.bg-cuadre { font-size: 12px; color: var(--green); background: var(--green-50); border-radius: 8px; padding: 6px 9px; }
.bg-cuadre.warn { color: #8A5A00; background: #FFF3D1; }
.bg-cuadre-f { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bg-cuadre-f .input, .bg-cuadre-f .money-input { width: 140px; height: 32px; }
.bg-g2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.bg-legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; margin-bottom: 6px; }
.bg-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.bg-sw-in, .bg-b-in { background: var(--green); fill: var(--green); }
.bg-sw-out, .bg-b-out { background: var(--red); fill: var(--red); }
.bg-sw-net { background: var(--yellow); }
.bg-chart svg { width: 100%; height: 240px; display: block; overflow: visible; }
.bg-chart text { fill: var(--faint); font: 11px var(--font, inherit); }
.bg-chart text.bg-on { fill: var(--text); font-weight: 700; }
.bg-grid { stroke: var(--line); }
.bg-net-line { stroke: var(--yellow); }
.bg-net-dot { fill: var(--yellow); stroke: var(--surface); }
.bg-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-variant-numeric: tabular-nums; color: var(--text); }
.bg-row:last-child { border-bottom: 0; }
.bg-row > span { min-width: 0; }
.bg-row small { display: block; color: var(--faint); font-size: 11.5px; }
.bg-row > b { font-weight: 600; white-space: nowrap; text-align: right; }
.bg-row.sub > span:first-child { padding-left: 14px; color: var(--muted); }
a.bg-link { text-decoration: none; border-radius: 6px; transition: background var(--t-fast) ease; }
a.bg-link:hover { background: var(--surface-2); }
.bg-age { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; width: fit-content; margin-left: auto; }
.bg-age.ok { background: var(--green-50); color: var(--green); } .bg-age.mid { background: #FFF3D1; color: #8A5A00; } .bg-age.bad { background: var(--red-50); color: var(--red); }
.bg-res { display: flex; justify-content: space-between; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--green-50); color: var(--green); font-weight: 800; font-variant-numeric: tabular-nums; }
.bg-res.neg { background: var(--red-50); color: var(--red); }
.bg-eq { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 14px; }
.bg-eq > div { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; text-align: center; }
.bg-eq small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.bg-eq b { font-size: 17px; font-variant-numeric: tabular-nums; }
.bg-eq > span { color: var(--faint); font-weight: 700; font-size: 18px; }
.bg-eq-res b { color: var(--green); }
.bg-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.bg-h3 { margin: 0 0 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); display: flex; justify-content: space-between; }
.bg-tot { display: flex; justify-content: space-between; padding-top: 10px; margin-top: 4px; border-top: 2px solid var(--line-strong); font-weight: 800; font-variant-numeric: tabular-nums; }
.bg-mov { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); align-items: center; font-variant-numeric: tabular-nums; }
.bg-mov:last-child { border-bottom: 0; }
.bg-mov time { color: var(--faint); font-size: 12px; }
.bg-mov small { display: block; color: var(--faint); font-size: 11.5px; }
.bg-mk { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.bg-mk.sa { background: #00153C; color: #fff; } .bg-mk.fn { background: #EED902; color: #2B2100; }
[data-theme="dark"] .bg-mk.sa { background: #E9EDF5; color: #00153C; }
@media (max-width: 1100px) { .bg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bg-g2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .bg-kpis, .bg-cols, .bg-eq { grid-template-columns: minmax(0, 1fr); } .bg-eq > span { display: none; } .bg-accs { grid-template-columns: minmax(0, 1fr); } }

/* ===== Marketing → Redes sociales ===== */
.rs-page [hidden], .rs-pub [hidden], .rs-mbox [hidden] { display: none !important; }
.rs-page { display: grid; gap: 16px; animation: rs-rise .35s cubic-bezier(.16,1,.3,1); }
@keyframes rs-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rs-page > .card, .rs-page .card { margin-bottom: 0; }
.rs-alert { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 10px; background: var(--blue-50); color: var(--text); font-size: 13.5px; margin-bottom: 12px; }
.rs-alert.warn { background: var(--orange-50); }
.rs-alert .i { margin-top: 2px; color: var(--muted); }
.rs-net { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: #fff; font-size: 10px; font-weight: 800; flex: none; letter-spacing: 0; line-height: 1; vertical-align: middle; }
.rs-net.xs { width: 15px; height: 15px; font-size: 7.5px; border-radius: 4px; }
.rs-facebook { background: #1877F2; } .rs-instagram { background: #D62976; } .rs-twitter { background: #111; } .rs-tiktok { background: #111; color: #25F4EE; } .rs-youtube { background: #E62117; }
[data-theme="dark"] .rs-twitter, [data-theme="dark"] .rs-tiktok { box-shadow: inset 0 0 0 1px #3A4560; }
.rs-up { color: var(--green); font-weight: 700; } .rs-down { color: var(--red); font-weight: 600; } .rs-warn { color: var(--orange); font-weight: 700; }
.link-btn { border: 0; background: none; padding: 0; color: var(--blue); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.rs-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.rs-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.rs-inline select, .rs-inline .ss { min-width: 190px; }
.rs-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.rs-seg a { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 7px; color: var(--muted); font-weight: 600; font-size: 12.5px; text-decoration: none !important; transition: background .2s, color .2s; }
.rs-seg a:hover { color: var(--text); }
.rs-seg a.on { background: var(--navy); color: #fff; }
[data-theme="dark"] .rs-seg a.on { background: #24365E; }
.rs-seg .rs-net { width: 18px; height: 18px; font-size: 8px; }
/* Compositor */
.rs-comp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rs-fl { display: grid; gap: 16px; }
.rs-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rs-comp textarea, .rs-comp input:not([type]), .rs-comp input[type="text"], .rs-fl textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 9px; padding: 10px 12px; background: var(--surface); line-height: 1.5; }
.rs-comp textarea:focus, .rs-comp input:not([type]):focus, .rs-fl textarea:focus { outline: 0; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,180,0,.2); }
.rs-comp .field-label, .rs-main > .card-body > div > .field-label { display: block; margin-bottom: 6px; }
.rs-accs { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 12px 4px 4px; background: var(--surface); font-size: 13px; cursor: pointer; opacity: .55; transition: opacity .2s, border-color .2s, background .2s, transform .15s; }
.rs-chip:hover { opacity: .85; }
.rs-chip:active { transform: scale(.97); }
.rs-chip.on { opacity: 1; border-color: var(--text); background: var(--surface-2); font-weight: 600; }
.rs-chip small { color: var(--faint); font-weight: 500; }
.rs-chip.warn { border-style: dashed; }
.rs-ntabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.rs-ntabs:empty { display: none; }
.rs-ntabs button { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: border-color .2s, color .2s; }
.rs-ntabs button .rs-net { width: 18px; height: 18px; font-size: 8px; }
.rs-ntabs button.on { border-color: var(--text); color: var(--text); background: var(--surface-2); }
.rs-ntabs button.mod::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.rs-cnt { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.rs-cnt .bad { color: var(--red); font-weight: 700; }
.rs-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; border-radius: 12px; transition: background .2s; }
.rs-media.over { background: var(--yellow-50); }
.rs-media.ro { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); margin: 12px 0; }
.rs-ph { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); cursor: grab; transition: transform .2s, box-shadow .2s, opacity .2s; }
.rs-ph img, .rs-ph video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-ph > i { position: absolute; top: 6px; left: 6px; background: rgba(0,21,60,.75); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px; }
.rs-ph .rs-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 22px; text-shadow: 0 1px 6px rgba(0,0,0,.5); pointer-events: none; }
.rs-x { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,21,60,.75); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .2s; }
.rs-ph:hover .rs-x, .rs-ph:focus-within .rs-x { opacity: 1; }
@media (hover: none) { .rs-x { opacity: 1; } }
.rs-ph.drag { opacity: .4; }
.rs-ph.over { box-shadow: 0 0 0 3px var(--yellow); }
.rs-ph.add { display: grid; place-items: center; border: 1.5px dashed var(--line-strong); color: var(--muted); font-weight: 600; font-size: 12.5px; text-align: center; background: none; cursor: pointer; }
.rs-ph.add small { font-weight: 500; color: var(--faint); }
.rs-ph.add:hover { border-color: var(--yellow); color: var(--text); }
.rs-ph.up { display: grid; align-content: center; gap: 6px; padding: 10px; cursor: default; }
.rs-ph.up small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-prog { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.rs-prog i { display: block; height: 100%; background: var(--yellow); transition: width .2s; }
.rs-sw { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); cursor: pointer; }
.rs-sw input { margin-top: 3px; accent-color: #12805C; width: 16px; height: 16px; flex: none; }
.rs-sw small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.rs-caps { display: grid; gap: 6px; margin-top: 8px; }
.rs-cap { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; align-items: center; }
.rs-cap img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
.rs-cap input { padding: 7px 10px !important; font-size: 13px; }
.rs-seo { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 12px; background: linear-gradient(180deg, rgba(230,33,23,.05), transparent 60%); }
.rs-seo h3 { margin: 0; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.rs-tags { display: flex; flex-wrap: wrap; gap: 6px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 6px; background: var(--surface); cursor: text; }
.rs-tag { display: inline-flex; gap: 4px; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 12.5px; animation: rs-rise .2s ease; }
.rs-tag button { border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }
.rs-tags input { border: 0 !important; box-shadow: none !important; padding: 4px !important; flex: 1; min-width: 140px; background: none !important; }
.rs-cover { display: flex; gap: 6px; flex-wrap: wrap; }
.rs-cv { height: 64px; min-width: 40px; padding: 0 10px; border: 1.5px dashed var(--line-strong); border-radius: 8px; background: none; font-size: 11.5px; color: var(--muted); cursor: pointer; }
.rs-cv.img { width: 36px; padding: 0; border-style: solid; overflow: hidden; }
.rs-cv.img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-cv.on { outline: 3px solid var(--yellow); outline-offset: 1px; border-color: transparent; color: var(--text); font-weight: 600; }
.rs-when { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rs-when > select, .rs-when .ss { width: auto; min-width: 150px; }
.rs-fecha .dp, .rs-fecha input { min-width: 150px; }
.rs-err { background: var(--red-50); color: var(--red); border-radius: 10px; padding: 10px 12px; font-size: 13px; font-weight: 600; }
.rs-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); padding-top: 14px; }
.rs-mbox .rs-foot { border-top: 0; padding-top: 6px; }
.rs-busy { opacity: .7; cursor: progress; }
/* Vistas previas */
.rs-prevs { display: grid; gap: 14px; position: sticky; top: 76px; }
.rs-pv { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); animation: rs-rise .3s ease; }
.rs-pv-empty { padding: 26px 18px; text-align: center; color: var(--muted); border-style: dashed; }
.rs-pv-empty p { margin: 0; }
.rs-pv-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12.5px; font-weight: 700; border-bottom: 1px solid var(--line); }
.rs-pv-h span:last-child:not(.rs-net) { margin-left: auto; color: var(--faint); font-weight: 500; }
.rs-pv-b { padding: 12px; font-size: 13px; line-height: 1.45; display: grid; gap: 8px; }
.rs-pv-t { white-space: pre-wrap; overflow-wrap: anywhere; }
.rs-pv-t.small { font-size: 12.5px; }
.rs-who { display: flex; align-items: center; gap: 8px; }
.rs-who b { display: block; font-size: 13px; } .rs-who small { color: var(--faint); font-size: 11.5px; }
.rs-av { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); object-fit: cover; flex: none; display: inline-block; }
.rs-av.sm { width: 30px; height: 30px; background: var(--yellow); color: #00153C; display: grid; place-items: center; font-weight: 800; font-size: 11px; }
.rs-pv-g { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: 8px; overflow: hidden; }
.rs-pv-g.n1 { grid-template-columns: 1fr; }
.rs-pv-g.n3 figure:first-child { grid-column: span 2; aspect-ratio: 2/1; }
.rs-pv-g figure { margin: 0; aspect-ratio: 1; position: relative; overflow: hidden; background: var(--surface-2); }
.rs-pv-g.n1 figure { aspect-ratio: 4/3; }
.rs-pv-g img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-pv-g figcaption { position: absolute; left: 6px; right: 6px; bottom: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 10.5px; border-radius: 5px; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-pv-g .mas { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,21,60,.55); color: #fff; font-size: 22px; font-weight: 800; }
.rs-pv-sq { aspect-ratio: 1; border-radius: 6px; overflow: hidden; } .rs-pv-sq img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-dots { display: flex; gap: 4px; justify-content: center; } .rs-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); } .rs-dots i.on { background: var(--blue); }
.rs-pv-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; }
.rs-pv-vert { aspect-ratio: 9/16; border-radius: 10px; overflow: hidden; background: #000; max-height: 360px; }
.rs-pv-vert.wide { aspect-ratio: 16/9; }
.rs-pv-vert img, .rs-pv-vert video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-pv-vert.vacio { display: grid; place-items: center; color: var(--faint); background: var(--surface-2); font-size: 11.5px; text-align: center; padding: 8px; aspect-ratio: 9/12; }
.rs-pv-yt { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
.rs-pv-v { width: 100%; max-height: 420px; border-radius: 10px; background: #000; }
.rs-ias { display: grid; gap: 10px; margin: 12px 0; max-height: 60vh; overflow: auto; }
.rs-iav { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 8px; justify-items: start; font-size: 13.5px; }
.rs-mt { font-size: 17px; margin: 0 0 4px; }
.rs-mbox { max-width: 560px; }
.rs-linkbox { display: flex; gap: 8px; margin: 14px 0; }
.rs-linkbox input { flex: 1; min-width: 0; height: 38px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 10px; background: var(--surface-2); font-size: 12.5px; }
/* Publicaciones */
.rs-list { display: grid; gap: 10px; }
.rs-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: var(--shadow); transition: border-color .2s; }
.rs-item:hover { border-color: var(--line-strong); }
.rs-thumb { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; position: relative; color: var(--faint); font-weight: 800; text-decoration: none !important; }
.rs-thumb img, .rs-thumb video { width: 100%; height: 100%; object-fit: cover; }
.rs-thumb i { position: absolute; color: #fff; font-style: normal; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.rs-item-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rs-item-h small { color: var(--faint); }
.rs-item-t { margin: 4px 0 8px; color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.rs-item-n { display: flex; gap: 6px; flex-wrap: wrap; }
.rs-tchip { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px 2px 2px; max-width: 100%; }
.rs-tchip .rs-net { width: 18px; height: 18px; font-size: 8px; border-radius: 50%; }
.rs-tchip a, .rs-tchip span:not(.rs-net) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; color: var(--text); }
.rs-tchip em { font-style: normal; font-weight: 700; }
.rs-tchip.publicada em { color: var(--green); } .rs-tchip.error { border-color: var(--red); } .rs-tchip.error em { color: var(--red); } .rs-tchip.en_buffer em { color: var(--blue); }
.rs-coment { margin: 8px 0 0; font-size: 12.5px; background: var(--orange-50); border-radius: 8px; padding: 6px 10px; }
.rs-coment.err { background: var(--red-50); color: var(--red); }
.rs-item-a { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.rs-view { display: grid; gap: 12px; }
.rs-view-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rs-view-h small { display: block; color: var(--faint); }
.rs-view-t { white-space: pre-wrap; overflow-wrap: anywhere; }
.rs-tlist { display: grid; gap: 6px; }
.rs-trow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.rs-trow small { display: block; }
.rs-tst { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.rs-tst.publicada { color: var(--green); } .rs-tst.error { color: var(--red); } .rs-tst.en_buffer { color: var(--blue); }
/* Calendario */
.rs-calw { display: grid; gap: 12px; }
.rs-mesnav { display: flex; align-items: center; gap: 8px; }
.rs-mesnav b { font-size: 18px; min-width: 150px; text-align: center; }
.rs-mesnav .icon-btn { font-size: 20px; text-decoration: none !important; }
.rs-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); align-items: center; }
.rs-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.rs-legend i.ok, .rs-ev.ok { --c: var(--green); } .rs-legend i.prog, .rs-ev.prog { --c: var(--blue); } .rs-legend i.wait, .rs-ev.wait { --c: var(--orange); } .rs-legend i.err, .rs-ev.err { --c: var(--red); }
.rs-legend i { background: var(--c); }
.rs-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rs-dow { background: var(--surface-2); text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); padding: 8px 0; }
.rs-d { background: var(--surface); min-height: 116px; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rs-d.out { background: var(--surface-2); }
.rs-d.out .rs-dn span { opacity: .45; }
.rs-dn { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12.5px; font-weight: 700; text-decoration: none !important; border-radius: 6px; padding: 1px 2px; }
.rs-dn i { font-style: normal; opacity: 0; transition: opacity .2s; color: var(--text); font-weight: 600; width: 20px; text-align: center; }
.rs-d:hover .rs-dn i { opacity: 1; }
.rs-d.today .rs-dn span { background: var(--yellow); color: #00153C; border-radius: 999px; min-width: 24px; text-align: center; }
.rs-ev { display: flex; align-items: center; gap: 5px; font-size: 11.5px; border-radius: 6px; padding: 3px 5px; background: var(--surface-2); border-left: 3px solid var(--c); overflow: hidden; white-space: nowrap; color: var(--text); text-decoration: none !important; transition: background .2s, transform .15s; }
.rs-ev:hover { background: var(--line); }
.rs-ev b { font-variant-numeric: tabular-nums; }
.rs-ev span { overflow: hidden; text-overflow: ellipsis; }
.rs-more { font-size: 11px; color: var(--muted); }
/* Estadísticas */
.rs-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rs-kpi { padding: 14px 16px; display: grid; gap: 4px; margin: 0; }
.rs-kpi .l { font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.rs-kpi .v { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.rs-kpi .d { font-size: 12.5px; color: var(--muted); }
.rs-sg { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.rs-chart { width: 100%; height: 230px; display: block; overflow: visible; }
.rs-chart text { fill: var(--faint); font-size: 11px; font-family: var(--font); }
.rs-grid { stroke: var(--line); }
.rs-area { fill: var(--yellow); opacity: .16; }
.rs-line { fill: none; stroke: var(--yellow-600); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rs-hit rect { fill: transparent; }
.rs-hit line { stroke: var(--line-strong); opacity: 0; vector-effect: non-scaling-stroke; }
.rs-hit circle { fill: var(--yellow-600); stroke: var(--surface); stroke-width: 2; opacity: 0; transition: opacity .15s; }
.rs-hit:hover circle, .rs-hit:hover line { opacity: 1; }
.rs-bars { display: grid; gap: 10px; }
.rs-br { display: grid; grid-template-columns: 120px minmax(0, 1fr) 70px; gap: 10px; align-items: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.rs-br span:first-child { display: inline-flex; gap: 6px; align-items: center; }
.rs-br .rs-net { width: 18px; height: 18px; font-size: 8px; }
.rs-br b { text-align: right; }
.rs-tr { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.rs-tr i { display: block; height: 100%; border-radius: 4px; transition: width .6s cubic-bezier(.16,1,.3,1); }
.rs-fill-facebook { background: #1877F2; } .rs-fill-instagram { background: #D62976; } .rs-fill-twitter { background: #5F6B82; } .rs-fill-tiktok { background: #00B2B9; } .rs-fill-youtube { background: #E62117; }
.rs-heat { display: grid; gap: 3px; font-size: 10.5px; color: var(--muted); }
.rs-heat .h { text-align: center; line-height: 1.15; }
.rs-heat i { display: block; height: 22px; border-radius: 4px; background: var(--yellow); }
.rs-tp { display: flex; gap: 10px; align-items: center; }
.rs-tp img, .rs-tp-x { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: none; background: var(--surface-2); display: grid; place-items: center; color: var(--faint); font-weight: 800; font-size: 12px; }
.rs-tp small { display: block; color: var(--faint); font-size: 12px; }
/* Informes */
.rs-reps { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 16px; align-items: start; }
.rs-replist { display: grid; gap: 4px; }
.rs-rep { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; border-radius: 10px; color: var(--text); text-decoration: none !important; border: 1px solid transparent; transition: background .2s, border-color .2s; }
.rs-rep:hover { background: var(--surface-2); border-color: var(--line); }
.rs-rep small { color: var(--faint); grid-column: 1 / -1; }
.rs-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.rs-repv { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rs-doc { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: #fff; }
.rs-doc iframe { width: 100%; height: 1100px; border: 0; display: block; }
.rs-repv .card form.inline { display: inline-block; margin: 6px 6px 0 0; }
/* Cuentas */
.rs-conns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.rs-conn h3 { margin: 0 0 6px; font-size: 16px; } .rs-conn h3 small { display: block; color: var(--muted); font-weight: 500; font-size: 12.5px; margin-top: 2px; }
.rs-conn p { margin: 6px 0; }
.rs-ok { font-weight: 700; color: var(--faint); } .rs-ok.on { color: var(--green); }
.rs-acclist { display: grid; gap: 6px; }
.rs-acc { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(180px, 280px) auto; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; transition: opacity .2s; }
.rs-acc.off { opacity: .5; }
.rs-acc-n { display: flex; gap: 8px; align-items: center; min-width: 0; }
.rs-acc-n span { min-width: 0; } .rs-acc-n b, .rs-acc-n small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rs-acc-n small { color: var(--faint); font-size: 12px; }
.rs-acc-c { margin: 0; }
.rs-steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; line-height: 1.55; }
.rs-steps code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: 12px; overflow-wrap: anywhere; }
/* Página del cliente (aprobar) */
.rs-pub { max-width: 760px; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-left)) 40px; }
.rs-pub-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #00153C; color: #fff; padding: 14px 18px; border-radius: 14px 14px 0 0; }
.rs-pub-h b { font-size: 17px; white-space: nowrap; } .rs-pub-h span { color: #FFB400; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.rs-pub-card { background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; padding: 18px; display: grid; gap: 14px; }
.rs-pub-card h1 { font-size: 21px; margin: 0; }
.rs-pub-k { margin: 0; color: var(--muted); font-weight: 600; }
.rs-pub-prevs { display: grid; gap: 12px; }
.rs-pub-done { background: var(--green-50); color: var(--green); border-radius: 10px; padding: 12px 14px; font-weight: 600; }
.rs-pub-f { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.rs-pub-f textarea, .rs-pub-f input { width: 100%; }
.rs-pub-b { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.btn-lg { height: 44px; padding: 0 20px; font-size: 15px; }
@media (max-width: 1150px) { .rs-comp, .rs-sg, .rs-reps, .rs-repv { grid-template-columns: minmax(0, 1fr); } .rs-prevs { position: static; } .rs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rs-doc iframe { height: 80vh; } }
@media (max-width: 760px) {
  .rs-g2, .rs-conns { grid-template-columns: minmax(0, 1fr); }
  .rs-d { min-height: 74px; padding: 4px; } .rs-ev span, .rs-ev b { display: none; } .rs-ev { padding: 3px; justify-content: center; }
  .rs-item { grid-template-columns: 56px minmax(0, 1fr); } .rs-thumb { width: 56px; height: 56px; } .rs-item-a { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .rs-acc { grid-template-columns: 36px minmax(0, 1fr); } .rs-acc-c, .rs-acc > form.inline { grid-column: 2; }
  .rs-br { grid-template-columns: 96px minmax(0, 1fr) 56px; }
  .rs-trow { grid-template-columns: auto minmax(0, 1fr); } .rs-trow .rs-tst, .rs-trow .btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 460px) { .rs-kpis { grid-template-columns: minmax(0, 1fr); } .rs-pv-row { grid-template-columns: 90px minmax(0, 1fr); } .rs-foot .btn { flex: 1 1 auto; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .rs-page, .rs-pv, .rs-tag { animation: none; } }
.rs-conn h3 .rs-net { width: 20px; height: 20px; font-size: 9px; margin-right: 2px; vertical-align: -3px; }
.rs-conn code, .rs-datos code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: 12px; overflow-wrap: anywhere; }
.rs-datos { display: grid; gap: 16px; }
.rs-dato { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.rs-dato:last-child { border-bottom: 0; }
.rs-dato > span:first-child { color: var(--muted); }
.rs-copyrow { display: flex; gap: 8px; align-items: center; min-width: 0; }
.rs-copyrow code { flex: 1; min-width: 0; }
.rs-legal .rs-pub-card h1 { font-size: 24px; } .rs-legal .rs-pub-card h3 { margin: 6px 0 0; font-size: 15px; } .rs-legal ul, .rs-legal ol { margin: 0; padding-left: 20px; line-height: 1.6; } .rs-legal p { margin: 0; line-height: 1.6; }
@media (max-width: 760px) { .rs-dato { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.rs-tt { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 12px; background: linear-gradient(180deg, rgba(37,244,238,.06), transparent 60%); }
.rs-tt h3 { margin: 0; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.rs-tt-quien { display: grid; gap: 6px; }
.rs-tt-c { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.rs-tt-c .rs-av { width: 34px; height: 34px; }
.rs-tt-c b { display: block; font-size: 13px; } .rs-tt-c small { color: var(--faint); font-size: 12px; }
.rs-tt-c.err small { color: var(--red); }
.rs-tt-priv, .rs-tt-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-radio, .rs-chk { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; background: var(--surface); transition: border-color .2s, background .2s; }
.rs-radio input, .rs-chk input { accent-color: #12805C; margin: 0; }
.rs-radio.on { border-color: var(--text); background: var(--surface-2); font-weight: 600; }
.rs-radio.off { opacity: .45; cursor: not-allowed; }
.rs-chk:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.rs-tt-com { display: grid; gap: 8px; padding-left: 6px; }
.rs-tt-com .rs-chk { border-radius: 10px; align-items: flex-start; }
.rs-tt-com .rs-chk input { margin-top: 3px; }
.rs-tt-com .rs-chk small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.rs-tt-legal { margin: 0; font-size: 12.5px; color: var(--muted); }
.rs-verif { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; margin-top: 6px; }
.rs-verif input { height: 34px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 10px; background: var(--surface); min-width: 0; }
@media (max-width: 760px) { .rs-verif { grid-template-columns: minmax(0, 1fr); } }
.rs-tt .rs-radio input, .rs-tt .rs-chk input { width: 16px; height: 16px; padding: 0; flex: none; border: 0; box-shadow: none; }
.rs-radio, .rs-chk { white-space: nowrap; }
.rs-tt-com .rs-chk { white-space: normal; }

/* ===== Redes sociales v2 (actualización 140): rv- = cómo se ve en cada red, ventanas y gráfica · rx- = el módulo ===== */
:root { --pv-bg: #FFFFFF; --pv-tx: #0F1419; --pv-sub: #65676B; --pv-line: #DADDE1; --pv-soft: #F0F2F5; --pv-link: #0064D1; --rx-fb: #1877F2; --rx-ig: #D62976; --rx-li: #0A66C2; --rx-yt: #FF0033; --rx-tt: #13B5B1; --rx-gbp: #1A73E8; --rx-x: #5B6B86; --ease2: cubic-bezier(.2,.8,.2,1); }
:root[data-theme="dark"] { --pv-bg: #16181C; --pv-tx: #E7E9EA; --pv-sub: #8B98A5; --pv-line: #2F3336; --pv-soft: #22262B; --pv-link: #4EA8F0; }
html.rv-lock, html.rv-lock body { overflow: hidden; }
.rx [hidden], .rv-modal [hidden] { display: none !important; }
@keyframes rx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rx-grow { from { transform: scaleX(0); } }
.rx { display: grid; gap: 16px; animation: rx-in .35s var(--ease2); }
.rx .card { margin-bottom: 0; }
/* Logos de red */
.rv-net { --c: var(--muted); display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--c); color: #fff; flex: none; vertical-align: middle; }
.rv-net svg { width: 11px; height: 11px; fill: currentColor; }
.rv-net.lg { width: 22px; height: 22px; } .rv-net.lg svg { width: 13px; height: 13px; }
.rv-facebook { --c: var(--rx-fb); } .rv-instagram { --c: linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF); background: var(--c); } .rv-twitter, .rv-tiktok, .rv-threads { --c: #111; }
.rv-youtube { --c: var(--rx-yt); } .rv-linkedin { --c: var(--rx-li); } .rv-gbp { --c: var(--rx-gbp); }
[data-theme="dark"] .rv-twitter, [data-theme="dark"] .rv-tiktok, [data-theme="dark"] .rv-threads { box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.rv-spark { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
/* Tarjeta de red (vista previa) */
.rv-prev { background: var(--pv-bg); color: var(--pv-tx); border: 1px solid var(--pv-line); border-radius: 12px; overflow: hidden; font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.38; text-align: left; animation: rx-in .3s var(--ease2); }
.rv-prev .ui { flex: none; display: block; }
.rv-ava { width: 38px; height: 38px; border-radius: 50%; background: #FFD84D; color: #111; display: inline-grid; place-items: center; font-weight: 800; font-size: 11px; flex: none; object-fit: cover; }
.rv-ava.sq { border-radius: 8px; }
.rv-top { display: flex; gap: 10px; align-items: center; padding: 12px; }
.rv-top b { font-weight: 600; display: block; line-height: 1.2; }
.rv-top small { color: var(--pv-sub); font-size: 12px; display: flex; gap: 4px; align-items: center; }
.rv-more { margin-left: auto; color: var(--pv-sub); align-self: flex-start; }
.rv-txt { padding: 0 12px 10px; white-space: pre-wrap; word-wrap: break-word; }
.rv-prev .ht, .rv-prev a { color: var(--pv-link); }
.rv-ph { position: relative; background: var(--pv-soft); overflow: hidden; min-height: 0; }
.rv-ph img, .rv-ph video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-ph-x { background: linear-gradient(135deg, var(--pv-soft), var(--pv-line)); }
.rv-grid { display: grid; gap: 2px; grid-template-columns: 1fr 1fr; height: 280px; }
.rv-grid.n1 { grid-template-columns: 1fr; height: auto; aspect-ratio: 1.25; }
.rv-grid.n3 > div:first-child { grid-row: span 2; }
.rv-grid .mas { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; font-size: 26px; font-weight: 700; }
.rv-link { margin: 0 12px 10px; border: 1px solid var(--pv-line); border-radius: 10px; overflow: hidden; }
.rv-link .im { aspect-ratio: 1.91; background: var(--pv-soft); } .rv-link .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-link .t { padding: 8px 10px; background: var(--pv-soft); } .rv-link small { color: var(--pv-sub); font-size: 11.5px; text-transform: uppercase; } .rv-link b { display: block; font-weight: 600; line-height: 1.3; }
.rv-link.x { border-radius: 16px; } .rv-link.x .t { background: transparent; }
.rv-sum { display: flex; align-items: center; gap: 6px; padding: 8px 12px; color: var(--pv-sub); font-size: 13.5px; }
.rv-sum .ic { display: inline-flex; } .rv-sum .r { margin-left: auto; }
.rv-rx { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; box-shadow: 0 0 0 2px var(--pv-bg); margin-left: -4px; font-size: 9px; }
.rv-rx:first-child { margin-left: 0; } .rv-rx .ui { width: 10px; height: 10px; } .rv-rx.e { font-size: 14px; background: none; }
.rv-act { display: flex; justify-content: space-around; border-top: 1px solid var(--pv-line); padding: 4px; color: var(--pv-sub); font-size: 13px; font-weight: 600; }
.rv-act span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px; }
.rv-act.li { justify-content: space-between; padding: 4px 8px; } .rv-act.li span { font-size: 12.5px; }
.rv-cms { padding: 6px 12px 12px; display: grid; gap: 8px; border-top: 1px solid var(--pv-line); }
.rv-cms .rel { color: var(--pv-sub); font-weight: 600; font-size: 13px; padding-top: 6px; }
.rv-cm { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 8px; }
.rv-cm .a, .rv-cmi .a { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
.rv-cm .bub { background: var(--pv-soft); border-radius: 16px; padding: 7px 12px; display: inline-block; font-size: 13.5px; line-height: 1.3; }
.rv-cm .bub.sq { border-radius: 0 10px 10px 10px; } .rv-cm .bub b { display: block; font-size: 12.5px; font-weight: 600; }
.rv-cm small { display: flex; align-items: center; padding: 2px 12px; color: var(--pv-sub); font-size: 12px; font-weight: 600; }
.rv-cm .lk { display: inline-flex; align-items: center; gap: 3px; margin-left: 10px; } .rv-cm .lk .rv-rx { width: 15px; height: 15px; box-shadow: none; }
.rv-igtop { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-weight: 600; font-size: 13.5px; }
.rv-igtop small { display: block; font-weight: 400; font-size: 12px; }
.rv-ava.ring { width: 30px; height: 30px; box-shadow: 0 0 0 2px var(--pv-bg), 0 0 0 3.5px #D62976; }
.rv-igimg > div { width: 100%; }
.rv-car1, .rv-car { position: relative; overflow: hidden; }
.rv-car1 > .rv-ph { height: 100%; }
.rv-car { touch-action: pan-y; user-select: none; }
.rv-car-tr { display: flex; height: 100%; transition: transform .38s var(--ease2); }
.rv-car-tr > div { flex: 0 0 100%; height: 100%; }
.rv-car-b { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #111; font-size: 18px; line-height: 1; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: opacity .2s; z-index: 2; cursor: pointer; }
.rv-car-b.p { left: 8px; } .rv-car-b.n { right: 8px; } .rv-car-b[disabled] { opacity: 0; pointer-events: none; }
.rv-car-n { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; z-index: 2; }
.rv-car-d { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; z-index: 2; }
.rv-car-d i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); transition: background .2s, transform .2s; } .rv-car-d i.on { background: #fff; transform: scale(1.2); }
.rv-igvacio { aspect-ratio: 4/5; display: grid; place-items: center; text-align: center; padding: 20px; background: var(--pv-soft); color: var(--pv-sub); font-size: 13px; }
.rv-igic { display: flex; gap: 14px; padding: 10px 12px 6px; align-items: center; } .rv-igic span { display: inline-flex; } .rv-igic .sv { margin-left: auto; }
.rv-igcap { padding: 4px 12px 12px; font-size: 13.5px; white-space: pre-wrap; } .rv-igcap b { font-weight: 600; } .rv-igcap .nota { color: var(--pv-sub); }
.rv-igcms { padding: 0 12px 12px; display: grid; gap: 6px; font-size: 13.5px; } .rv-igcms b { font-weight: 600; margin-right: 4px; } .rv-igcms .mas { color: var(--pv-sub); } .rv-igcms .fecha { font-size: 11px; text-transform: uppercase; }
.rv-x, .rv-th { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 10px; padding: 12px; position: relative; }
.rv-th { grid-template-columns: 36px minmax(0,1fr); } .rv-th .rv-ava { width: 36px; height: 36px; }
.rv-x.hilo::after { content: ''; position: absolute; left: 31px; top: 56px; bottom: -4px; width: 2px; background: var(--pv-line); }
.rv-x.sep, .rv-th.sep { border-top: 1px solid var(--pv-line); }
.rv-xh { display: flex; align-items: center; gap: 4px; min-width: 0; } .rv-xh b { font-weight: 700; }
.rv-xh .h { color: var(--pv-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .rv-xh .rv-more { margin-left: auto; }
.rv-xb { white-space: pre-wrap; word-wrap: break-word; margin-top: 2px; font-size: 14.5px; }
.rv-xmed { margin-top: 10px; border-radius: 14px; overflow: hidden; border: 1px solid var(--pv-line); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; aspect-ratio: 16/9; }
.rv-xmed.n1 { grid-template-columns: 1fr; } .rv-xmed.n3 { grid-template-rows: 1fr 1fr; } .rv-xmed.n3 > div:first-child { grid-row: span 2; } .rv-xmed.n4 { grid-template-rows: 1fr 1fr; }
.rv-xact { display: flex; justify-content: space-between; color: var(--pv-sub); margin-top: 10px; font-size: 13px; }
.rv-xact span { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; } .rv-xact .r { gap: 12px; }
.rv-poll { margin-top: 10px; display: grid; gap: 6px; } .rv-poll div { border: 1px solid var(--pv-link); color: var(--pv-link); border-radius: 999px; padding: 6px; text-align: center; font-weight: 700; } .rv-poll small { color: var(--pv-sub); }
.rv-poll.th div { border-color: var(--pv-line); color: var(--pv-tx); border-radius: 12px; text-align: left; padding: 8px 12px; font-weight: 500; }
.rv-thmed { display: flex; gap: 6px; overflow-x: auto; margin-top: 8px; scrollbar-width: none; } .rv-thmed > div { flex: 0 0 72%; aspect-ratio: 4/5; border-radius: 10px; } .rv-thmed > div:only-child { flex-basis: 100%; aspect-ratio: 1.2; }
.rv-thact { display: flex; gap: 18px; margin-top: 10px; font-size: 13px; } .rv-thact span { display: inline-flex; gap: 5px; align-items: center; }
.rv-lipoll { margin: 0 12px 10px; border: 1px solid var(--pv-line); border-radius: 8px; padding: 12px; display: grid; gap: 8px; }
.rv-lipoll div { border: 1px solid #0A66C2; color: #0A66C2; border-radius: 999px; padding: 6px; text-align: center; font-weight: 600; } .rv-lipoll small { color: var(--pv-sub); }
.rv-gbp .im { margin: 0 12px 10px; border-radius: 10px; overflow: hidden; aspect-ratio: 1.6; } .rv-gbp .im > .rv-ph { height: 100%; }
.rv-gbp .bt { margin: 0 12px 12px; display: inline-flex; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--pv-line); color: var(--pv-link); font-weight: 600; font-size: 13px; }
/* Videos verticales (TikTok, Shorts, historias) */
.rv-vert { max-width: 290px; margin: 0 auto; font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
.rv-vt { aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; position: relative; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: var(--shadow-lg); background: #111; }
.rv-vt > .rv-ph { position: absolute; inset: 0; background: #222; }
.rv-vt::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.6)); pointer-events: none; }
.rv-vt .ui { display: block; }
.rv-vt-top { position: absolute; top: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 16px; font-size: 14px; z-index: 2; color: rgba(255,255,255,.75); }
.rv-vt-top b { color: #fff; font-weight: 700; border-bottom: 2px solid #fff; padding-bottom: 2px; }
.rv-vt-side { position: absolute; right: 8px; bottom: 74px; display: grid; gap: 13px; justify-items: center; z-index: 2; }
.rv-vt-side > span { display: grid; justify-items: center; gap: 2px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.rv-vt-side b { font-size: 11.5px; font-weight: 600; }
.rv-vt-av { position: relative; margin-bottom: 6px; } .rv-vt-av .rv-ava { width: 40px; height: 40px; border: 1.5px solid #fff; }
.rv-vt-av em { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background: #FE2C55; color: #fff; font-style: normal; font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.rv-vt .disc { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, #FFD84D 0 26%, #222 28% 100%); border: 4px solid #333; animation: rv-gira 4s linear infinite; }
@keyframes rv-gira { to { transform: rotate(360deg); } }
.rv-vt-cap { position: relative; z-index: 2; padding: 0 64px 14px 12px; font-size: 13px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.rv-vt-cap > b { font-size: 15px; display: block; margin-bottom: 3px; }
.rv-vt-cap p { margin: 0 0 6px; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rv-vt-cap .ht { color: #fff; font-weight: 700; } .rv-vt-cap small { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.rv-vt-views { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.rv-vert.yt .rv-vt-side { bottom: 90px; }
.rv-ych { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .rv-ych .rv-ava { width: 30px; height: 30px; font-size: 10px; }
.rv-ych .sub { background: #fff; color: #0F0F0F; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; text-shadow: none; }
.rv-ytv .pl { aspect-ratio: 16/9; position: relative; } .rv-ytv .pl > .rv-ph { height: 100%; }
.rv-ytv .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 64px; height: 44px; border-radius: 12px; background: rgba(255,0,51,.92); display: grid; place-items: center; }
.rv-ytv .play svg { width: 28px; height: 28px; fill: #fff; }
.rv-ytv .b { padding: 10px 12px 12px; display: grid; gap: 10px; } .rv-ytv .tit { font-size: 16px; font-weight: 700; line-height: 1.3; }
.rv-ytv .rv-ych b { display: block; } .rv-ytv .rv-ych small { color: var(--pv-sub); font-size: 12px; } .rv-ytv .rv-ych .sub { margin-left: auto; background: var(--pv-tx); color: var(--pv-bg); }
.rv-ytv .pills { display: flex; gap: 8px; } .rv-ytv .pills span { display: inline-flex; align-items: center; gap: 6px; background: var(--pv-soft); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.rv-ytv .desc { background: var(--pv-soft); border-radius: 12px; padding: 10px 12px; font-size: 13px; white-space: pre-wrap; }
.rv-story .bars { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 3px; z-index: 2; } .rv-story .bars i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.45); } .rv-story .bars i.on { background: #fff; }
.rv-story .st-top { position: absolute; top: 18px; left: 10px; right: 10px; display: flex; align-items: center; gap: 8px; z-index: 2; font-size: 13px; } .rv-story .st-top .rv-ava { width: 30px; height: 30px; } .rv-story .st-top small { opacity: .75; }
.rv-story .st-txt { position: absolute; left: 16px; right: 16px; top: 40%; text-align: center; font-weight: 700; font-size: 18px; z-index: 2; text-shadow: 0 2px 6px rgba(0,0,0,.45); }
.rv-story .st-bot { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px; }
.rv-story .st-in { flex: 1; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; padding: 8px 14px; font-size: 13px; }
/* Ventana */
.rv-modal { position: fixed; inset: 0; z-index: 900; background: rgba(5,12,28,.55); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.rv-modal.open { opacity: 1; pointer-events: auto; }
.rv-mbox { width: min(1120px, 100%); height: min(860px, calc(100vh - 40px)); max-height: calc(100vh - 40px); background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); overflow: hidden; transform: translateY(12px) scale(.98); transition: transform .28s var(--ease2); }
.rv-modal.open .rv-mbox { transform: none; }
.rv-mbox.sm { width: min(560px, 100%); height: auto; grid-template-columns: 1fr; }
.rv-ml { background: var(--surface-2); padding: 20px; overflow: auto; min-height: 0; overscroll-behavior: contain; }
.rv-mr { overflow: auto; display: flex; flex-direction: column; min-height: 0; overscroll-behavior: contain; }
.rv-mh { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.rv-mh h3 { font-size: 16px; font-weight: 600; margin: 0; } .rv-mh .sp, .rv-sec .sp { flex: 1; }
.rv-close { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 0; background: var(--surface-2); font-size: 20px; line-height: 1; display: grid; place-items: center; color: var(--muted); cursor: pointer; transition: background .15s; }
.rv-close:hover { background: var(--line); color: var(--text); }
.rv-mb { padding: 16px 20px 22px; display: grid; gap: 18px; }
.rv-mk { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.rv-mk div { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; } .rv-mk small { display: block; color: var(--muted); font-size: 11.5px; } .rv-mk b { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rv-sec { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.rv-reac { display: grid; gap: 9px; }
.rv-rr { display: grid; grid-template-columns: 28px 108px 1fr 54px; align-items: center; gap: 8px; font-size: 13px; }
.rv-rr .emj { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); }
.rv-rr .emj .rv-rx { box-shadow: none; margin: 0; width: 22px; height: 22px; } .rv-rr .emj .rv-rx .ui { width: 12px; height: 12px; } .rv-rr .emj .rv-rx.e { font-size: 17px; }
.rv-rr .tr { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .rv-rr .tr i { display: block; height: 100%; border-radius: 999px; background: var(--c); animation: rx-grow .7s var(--ease2) both; transform-origin: left; }
.rv-rr b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .rv-rr > span:nth-child(2) { color: var(--muted); }
.rv-sent { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; margin: 2px 0 8px; } .rv-sent i { display: block; height: 100%; animation: rx-grow .7s var(--ease2) both; transform-origin: left; }
.rv-sent .pos, .rv-leg i.pos { background: #2E9E6B; } .rv-sent .neu, .rv-leg i.neu { background: #9AA3B5; } .rv-sent .neg, .rv-leg i.neg { background: #D9483B; }
.rv-leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); } .rv-leg span { display: inline-flex; gap: 6px; align-items: center; } .rv-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .rv-leg b { color: var(--text); font-weight: 600; }
.rv-ai { padding: 12px 14px; border-radius: 12px; background: var(--yellow-50); font-size: 13.5px; line-height: 1.5; margin-top: 8px; }
.rv-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; } .rv-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rv-pill.pos { background: var(--green-50); color: var(--green); } .rv-pill.neu { background: var(--surface-2); color: var(--muted); } .rv-pill.neg { background: var(--red-50); color: var(--red); }
.rv-cmlist { display: grid; }
.rv-cmi { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); } .rv-cmi:last-child { border-bottom: 0; }
.rv-cmi .n { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .rv-cmi .n b { font-weight: 600; font-size: 13.5px; } .rv-cmi .n small { color: var(--faint); font-size: 12px; }
.rv-cmi p { margin: 2px 0 0; font-size: 13.5px; } .rv-cmi .resp { margin-top: 5px; font-size: 12.5px; padding: 6px 10px; background: var(--surface-2); border-radius: 8px; border-left: 3px solid var(--green); } .rv-cmi .pide { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--orange); }
/* Gráfica */
.rv-chart { position: relative; height: 240px; } .rv-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rv-chart .g { stroke: var(--line); } .rv-chart .yl, .rv-chart .xl { font-size: 11.5px; fill: var(--faint); font-family: var(--font); } .rv-chart .hit { fill: transparent; } .rv-chart .b { transition: opacity .15s; } .rv-chart .hoy { stroke: var(--line-strong); stroke-dasharray: 3 3; }
.rv-tip { position: absolute; pointer-events: none; background: var(--navy); color: #fff; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; box-shadow: var(--shadow-lg); white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); opacity: 0; transition: opacity .12s; z-index: 4; } .rv-tip b { display: block; font-size: 15px; } .rv-tip.on { opacity: 1; }
@media (max-width: 900px) {
  .rv-modal { padding: 0; align-items: end; }
  .rv-mbox { grid-template-columns: 1fr; overflow: auto; overscroll-behavior: contain; height: auto; max-height: 94vh; border-radius: 18px 18px 0 0; }
  .rv-ml, .rv-mr { overflow: visible; } .rv-mh { position: static; }
}
/* ---- El módulo ---- */
.rx-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .rx-bar .sp { flex: 1; }
.rx-chips { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; flex-wrap: wrap; }
.rx-chips a, .rx-chips button { border: 0; background: none; padding: 5px 10px; border-radius: 7px; display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); font-weight: 500; text-decoration: none !important; cursor: pointer; }
.rx-chips .on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.rx-chips .n { color: var(--faint); font-size: 12px; }
.rx-note { display: flex; gap: 10px; padding: 11px 14px; border-radius: 12px; background: var(--blue-50); font-size: 13.5px; align-items: flex-start; }
.rx-note.warn { background: var(--yellow-50); }
.rx-tab-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; margin-left: 4px; }
.rx-sw { position: relative; width: 38px; height: 22px; flex: none; display: inline-block; }
.rx-sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.rx-sw i { position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong); transition: background .2s; }
.rx-sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease2); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.rx-sw input:checked + i { background: var(--green); } .rx-sw input:checked + i::after { transform: translateX(16px); }
.rx-lab { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
/* Compositor */
.rx-cmp { display: grid; grid-template-columns: minmax(0, 1fr) 280px 360px; gap: 16px; align-items: start; }
.rx-cmp > .card { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.rx-ctop { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.rx-ctop .ss, .rx-ctop select { min-width: 200px; }
.rx-accs { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 16px 4px; }
.rx-acc { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 0; padding: 0; background: none; cursor: pointer; transition: transform .18s var(--ease2); }
.rx-acc:hover { transform: translateY(-2px); }
.rx-acc .pic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--yellow); color: #00153C; filter: grayscale(1); opacity: .45; transition: filter .2s, opacity .2s, box-shadow .2s; overflow: hidden; }
.rx-acc .pic img { width: 100%; height: 100%; object-fit: cover; }
.rx-acc.on .pic { filter: none; opacity: 1; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--yellow); }
.rx-acc.warn .pic { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--red); }
.rx-acc > .rv-net { position: absolute; right: -3px; bottom: -3px; box-shadow: 0 0 0 2px var(--surface); }
.rx-acc .tip { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 5; }
.rx-acc:hover .tip { opacity: 1; }
.rx-acc-add { width: 46px; height: 46px; border-radius: 50%; border: 1.5px dashed var(--line-strong); background: none; color: var(--muted); font-size: 22px; display: grid; place-items: center; text-decoration: none !important; }
.rx-etabs { display: flex; gap: 6px; padding: 12px 16px 0; flex-wrap: wrap; align-items: center; }
.rx-etabs button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 12px 5px 6px; display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); font-weight: 500; cursor: pointer; }
.rx-etabs button.gen { padding-left: 12px; } .rx-etabs button.on { border-color: var(--text); color: var(--text); background: var(--surface-2); }
.rx-etabs .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.rx-etabs .hint { margin-left: auto; font-size: 12px; color: var(--faint); }
.rx-ed { margin: 12px 16px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.rx-ed:focus-within { border-color: var(--line-strong); box-shadow: 0 0 0 3px var(--yellow-50); }
.rx-ed textarea { width: 100%; min-height: 150px; border: 0; outline: 0; resize: vertical; padding: 14px 16px; background: transparent; font-size: 15px; line-height: 1.55; color: var(--text); }
.rx-meta { display: flex; gap: 8px; align-items: center; padding: 0 16px 10px; font-size: 12px; color: var(--faint); flex-wrap: wrap; }
.rx-meta .cnt { margin-left: auto; font-variant-numeric: tabular-nums; } .rx-meta .cnt.mal { color: var(--red); font-weight: 600; }
.rx-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; color: var(--text); max-width: 100%; }
.rx-tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-tag button { border: 0; background: none; color: var(--faint); padding: 0; font-size: 14px; line-height: 1; cursor: pointer; }
.rx-media { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 16px 12px; }
.rx-ph { width: 92px; height: 92px; border-radius: 10px; position: relative; overflow: hidden; flex: none; background: var(--surface-2); cursor: grab; }
.rx-ph img, .rx-ph video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rx-ph .x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; opacity: 0; transition: opacity .15s; cursor: pointer; }
.rx-ph:hover .x { opacity: 1; } .rx-ph .n { position: absolute; left: 5px; bottom: 5px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; }
.rx-ph .play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 20px; text-shadow: 0 1px 4px rgba(0,0,0,.5); pointer-events: none; }
.rx-ph.up { display: grid; place-items: center; padding: 8px; text-align: center; font-size: 11px; color: var(--muted); cursor: default; }
.rx-ph.up .prog { width: 100%; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; } .rx-ph.up .prog i { display: block; height: 100%; background: var(--yellow); transition: width .2s; }
.rx-ph.drag { opacity: .4; } .rx-ph.over { box-shadow: 0 0 0 2px var(--yellow); }
.rx-drop { width: 92px; height: 92px; border-radius: 10px; border: 1.5px dashed var(--line-strong); display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 12px; background: var(--surface-2); padding: 6px; cursor: pointer; }
.rx-media.over .rx-drop { border-color: var(--yellow); background: var(--yellow-50); }
.rx-tool { display: flex; gap: 2px; align-items: center; padding: 8px 10px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.rx-tb { position: relative; width: 38px; height: 38px; border-radius: 9px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s; }
.rx-tb:hover { background: var(--surface-2); color: var(--text); } .rx-tb.on { background: var(--yellow-50); color: var(--yellow-600); } .rx-tb[disabled] { opacity: .3; cursor: not-allowed; }
.rx-tb svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rx-tb .tt { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 6; }
.rx-tb:hover .tt { opacity: 1; }
.rx-tool .sep { width: 1px; height: 22px; background: var(--line); margin: 0 6px; } .rx-tool .ia { margin-left: auto; }
.rx-pop { position: absolute; z-index: 950; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); width: 340px; max-width: calc(100vw - 32px); padding: 12px; animation: rx-in .18s var(--ease2); }
.rx-pop h4 { font-size: 13px; font-weight: 600; margin: 0 0 8px; display: flex; gap: 6px; align-items: center; }
.rx-pop input[type=text], .rx-pop input:not([type]) { width: 100%; height: 36px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 12px; background: var(--surface); outline: 0; color: var(--text); }
.rx-pop input:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-50); }
.rx-lst { display: grid; gap: 2px; margin-top: 8px; max-height: 280px; overflow: auto; }
.rx-lst button { display: flex; gap: 10px; align-items: center; text-align: left; border: 0; background: none; border-radius: 9px; padding: 8px; cursor: pointer; color: var(--text); }
.rx-lst button:hover { background: var(--surface-2); }
.rx-lst .nt { width: 44px; height: 44px; border-radius: 8px; flex: none; object-fit: cover; background: var(--surface-2); }
.rx-lst b { font-weight: 500; display: block; font-size: 13.5px; line-height: 1.3; } .rx-lst small { color: var(--faint); font-size: 12px; }
.rx-emo { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; } .rx-emo button { border: 0; background: none; font-size: 21px; height: 36px; border-radius: 8px; cursor: pointer; } .rx-emo button:hover { background: var(--surface-2); }
.rx-hsets { display: grid; gap: 8px; }
.rx-hset { border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: left; background: var(--surface); cursor: pointer; color: var(--text); }
.rx-hset:hover { border-color: var(--line-strong); background: var(--surface-2); } .rx-hset b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; } .rx-hset span { color: var(--blue); font-size: 13px; }
.rx-extra { margin: 12px 16px 0; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); animation: rx-in .25s var(--ease2); }
.rx-extra-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 600; font-size: 13.5px; } .rx-extra-h .sp { flex: 1; }
.rx-extra input:not([type=checkbox]):not([type=radio]), .rx-extra textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 9px; padding: 8px 12px; background: var(--surface); outline: 0; margin-bottom: 6px; color: var(--text); }
.rx-thr { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.rx-thr i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--muted); }
.rx-seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.rx-seg button { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 5px 10px; font-size: 13px; cursor: pointer; color: var(--text); }
.rx-seg button.on { border-color: var(--text); font-weight: 600; }
.rx-cfoot { display: flex; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line); margin-top: 14px; flex-wrap: wrap; position: sticky; bottom: 0; background: var(--surface); } .rx-cfoot .sp { flex: 1; }
.rx-err { margin: 12px 16px 0; padding: 10px 12px; border-radius: 10px; background: var(--red-50); color: var(--red); font-size: 13.5px; }
.rx-opt-row { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.rx-radio { display: flex; gap: 10px; align-items: center; padding: 11px 16px; border: 0; background: none; width: 100%; text-align: left; border-bottom: 1px solid var(--line); cursor: pointer; color: var(--text); }
.rx-radio .o { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex: none; display: grid; place-items: center; }
.rx-radio.on .o { border-color: var(--text); } .rx-radio.on .o::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--text); } .rx-radio b { font-weight: 500; }
.rx-sched { padding: 10px 16px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; animation: rx-in .2s var(--ease2); }
.rx-when { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rx-fake { min-width: 0; height: 36px; border: 1px solid var(--line-strong); border-radius: 9px; display: flex; align-items: center; gap: 6px; padding: 0 8px; background: var(--surface); font-size: 13px; cursor: pointer; color: var(--text); text-align: left; }
.rx-fake:hover { border-color: var(--faint); } .rx-fake span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-slots-h { display: flex; align-items: center; gap: 6px; padding: 14px 16px 6px; font-size: 13px; font-weight: 600; }
.rx-slots { display: grid; gap: 6px; padding: 0 16px 14px; }
.rx-slot { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; background: var(--surface); text-align: left; cursor: pointer; color: var(--text); transition: border-color .15s, background .15s; }
.rx-slot:hover { border-color: var(--line-strong); } .rx-slot.on { border-color: var(--yellow); background: var(--yellow-50); }
.rx-slot b { font-weight: 600; display: flex; align-items: center; gap: 6px; } .rx-slot small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.rx-slot .gain { font-size: 12px; font-weight: 600; color: var(--green); } .rx-slot .gain.down { color: var(--muted); }
.rx-slot .nets { display: inline-flex; gap: 2px; } .rx-slot .nets .rv-net { width: 14px; height: 14px; } .rx-slot .nets .rv-net svg { width: 8px; height: 8px; }
.rx-prevs { display: grid; gap: 14px; }
.rx-prev-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.rx-empty-prev { border: 1.5px dashed var(--line-strong); border-radius: 14px; padding: 36px 20px; text-align: center; color: var(--muted); }
.rx-dp-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .rx-dp-h b { flex: 1; text-align: center; font-weight: 600; }
.rx-dp-n { width: 30px; height: 30px; border-radius: 8px; border: 0; background: var(--surface-2); font-size: 18px; cursor: pointer; color: var(--text); }
.rx-dp-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .rx-dp-g .dw { text-align: center; font-size: 11.5px; color: var(--faint); padding: 4px 0; }
.rx-dpd { height: 34px; border: 0; background: none; border-radius: 8px; font-variant-numeric: tabular-nums; cursor: pointer; color: var(--text); }
.rx-dpd:hover:not([disabled]) { background: var(--surface-2); } .rx-dpd.hoy { box-shadow: inset 0 0 0 1px var(--line-strong); } .rx-dpd.on { background: var(--yellow); color: #00153C; font-weight: 700; } .rx-dpd[disabled] { color: var(--faint); opacity: .45; cursor: default; }
.rx-dp-f { display: flex; justify-content: space-between; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.rx-hl { max-height: 240px; overflow: auto; margin-top: 8px; display: grid; gap: 1px; }
.rx-hl button { display: flex; align-items: center; justify-content: space-between; border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: 8px; font-variant-numeric: tabular-nums; cursor: pointer; color: var(--text); }
.rx-hl button:hover { background: var(--surface-2); } .rx-hl button.on { background: var(--yellow-50); font-weight: 600; }
.rx-pop.ytp { padding: 0; display: flex; flex-direction: column; max-height: min(580px, calc(100vh - 120px)); }
.rx-ytp-h { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 10px; border-bottom: 1px solid var(--line); }
.rx-ytp-h .rv-close { margin-left: auto; width: 30px; height: 30px; }
.rx-ytp-b { padding: 12px 14px; overflow: auto; display: grid; gap: 12px; overscroll-behavior: contain; }
.rx-f { display: grid; gap: 6px; } .rx-f > span { font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; } .rx-f em { font-style: normal; font-weight: 400; color: var(--faint); font-size: 12px; }
.rx-f textarea, .rx-f input:not([type=checkbox]):not([type=radio]) { width: 100%; border: 1px solid var(--line-strong); border-radius: 9px; padding: 8px 12px; background: var(--surface); outline: 0; resize: vertical; color: var(--text); font: inherit; }
.rx-f input:focus, .rx-f textarea:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-50); }
.rx-cov { width: 64px; height: 40px; border-radius: 8px; cursor: pointer; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .15s; object-fit: cover; border: 0; padding: 0; background: var(--surface-2); }
.rx-cov.on { outline-color: var(--yellow); } .rx-cov.up { display: grid; place-items: center; border: 1.5px dashed var(--line-strong); font-size: 12px; color: var(--muted); }
.rx-ytp-ft { display: flex; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--line); }
.rx-tt-panel { margin: 12px 16px 0; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; }
.rx-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.rx-feed > div { aspect-ratio: 4/5; position: relative; overflow: hidden; background: var(--surface-2); }
.rx-feed img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rx-feed .nw { outline: 3px solid var(--yellow); outline-offset: -3px; }
.rx-feed em { position: absolute; top: 6px; left: 6px; font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; } .rx-feed .nw em { background: var(--yellow); color: #00153C; }
/* Publicaciones */
.rx-plist { display: grid; gap: 10px; }
.rx-prow { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; }
.rx-thumb { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; color: var(--faint); font-weight: 700; position: relative; text-decoration: none !important; }
.rx-thumb img, .rx-thumb video { width: 100%; height: 100%; object-fit: cover; }
.rx-thumb i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-style: normal; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.rx-prow .h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .rx-prow .h b { font-weight: 600; }
.rx-prow p { margin: 4px 0 6px; font-size: 13.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.rx-tch { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rx-tc { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px 2px 3px; color: var(--text); text-decoration: none !important; }
.rx-tc em { font-style: normal; font-weight: 700; } .rx-tc.ok em { color: var(--green); } .rx-tc.err em { color: var(--red); } .rx-tc.wait em { color: var(--faint); }
.rx-st { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.rx-st.green { background: var(--green-50); color: var(--green); } .rx-st.blue { background: var(--blue-50); color: var(--blue); } .rx-st.orange { background: var(--yellow-50); color: var(--orange); } .rx-st.red { background: var(--red-50); color: var(--red); } .rx-st.gray { background: var(--surface-2); color: var(--muted); }
.rx-prow .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rx-coment { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); } .rx-coment.err { color: var(--red); }
/* Calendario */
.rx-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.rx-cal .dh { padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--muted); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.rx-cal .dc { min-height: 118px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: background .15s; }
.rx-cal .dc:hover { background: var(--surface-2); } .rx-cal .dc.fuera { background: var(--surface-2); opacity: .55; }
.rx-cal .dn { font-size: 12.5px; font-weight: 600; color: var(--muted); display: flex; justify-content: space-between; align-items: center; text-decoration: none !important; }
.rx-cal .dc.hoy .dn span { background: var(--yellow); color: #00153C; border-radius: 999px; padding: 1px 7px; }
.rx-cal .dn i { font-style: normal; opacity: 0; color: var(--faint); font-size: 16px; } .rx-cal .dc:hover .dn i { opacity: 1; }
.rx-ce { display: flex; gap: 5px; align-items: center; border: 0; text-align: left; border-radius: 7px; padding: 3px 6px; font-size: 11.5px; background: var(--surface-2); border-left: 3px solid var(--c, var(--line-strong)); min-width: 0; color: var(--text); text-decoration: none !important; transition: transform .15s var(--ease2); }
.rx-ce:hover { transform: translateX(2px); } .rx-ce .rv-net { width: 14px; height: 14px; } .rx-ce .rv-net svg { width: 8px; height: 8px; }
.rx-ce span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rx-ce b { font-weight: 600; flex: none; }
.rx-ce.ok { --c: var(--green); } .rx-ce.prog { --c: var(--blue); } .rx-ce.wait { --c: var(--yellow); } .rx-ce.err { --c: var(--red); }
.rx-more { font-size: 11.5px; color: var(--muted); padding-left: 6px; }
.rx-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); } .rx-legend span { display: inline-flex; gap: 6px; align-items: center; } .rx-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* Bandeja */
.rx-inbox { display: grid; grid-template-columns: 320px minmax(0, 1fr) 280px; height: calc(100vh - 260px); min-height: 560px; overflow: hidden; padding: 0; }
.rx-ibl { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.rx-ibf { padding: 12px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.rx-iblist { overflow: auto; flex: 1; overscroll-behavior: contain; }
.rx-cv { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); text-decoration: none !important; color: var(--text); transition: background .15s; }
.rx-cv:hover { background: var(--surface-2); } .rx-cv.on { background: var(--yellow-50); }
.rx-cv .av { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; }
.rx-cv .av .rv-net { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; box-shadow: 0 0 0 2px var(--surface); } .rx-cv .av .rv-net svg { width: 9px; height: 9px; }
.rx-cv b { font-weight: 600; font-size: 13.5px; display: block; } .rx-cv small { color: var(--muted); font-size: 12.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-cv .t { font-size: 11.5px; color: var(--faint); text-align: right; } .rx-cv .un { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin-top: 6px; }
.rx-cv.unread b { font-weight: 700; } .rx-cv.unread small { color: var(--text); } .rx-cv.res { opacity: .6; }
.rx-ibc { display: flex; flex-direction: column; min-height: 0; }
.rx-ibh { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); } .rx-ibh b { font-weight: 600; } .rx-ibh .sp { flex: 1; }
.rx-msgs { flex: 1; overflow: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); overscroll-behavior: contain; }
.rx-msg { max-width: 72%; padding: 9px 13px; border-radius: 18px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; animation: rx-in .25s var(--ease2); }
.rx-msg.in { background: var(--surface); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 6px; }
.rx-msg.out { background: var(--navy); color: #fff; align-self: flex-end; border-bottom-right-radius: 6px; }
[data-theme="dark"] .rx-msg.out { background: #2B4C8C; }
.rx-msg small { display: block; font-size: 11px; opacity: .65; margin-top: 3px; } .rx-day { align-self: center; font-size: 11.5px; color: var(--faint); margin: 6px 0; }
.rx-reply { border-top: 1px solid var(--line); padding: 10px 12px; display: grid; gap: 8px; }
.rx-reply textarea { width: 100%; min-height: 64px; border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 12px; background: var(--surface); outline: 0; resize: none; color: var(--text); font: inherit; }
.rx-reply textarea:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-50); }
.rx-reply .rb { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .rx-reply .rb .sp { flex: 1; }
.rx-ibr { border-left: 1px solid var(--line); overflow: auto; padding: 16px; display: grid; gap: 16px; align-content: start; }
.rx-ibr h4 { font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.rx-kv { display: grid; gap: 6px; font-size: 13px; } .rx-kv div { display: flex; justify-content: space-between; gap: 10px; } .rx-kv span { color: var(--muted); }
.rx-vacio { display: grid; place-items: center; text-align: center; color: var(--muted); padding: 40px 20px; height: 100%; }
/* Comentarios */
.rx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; }
.rx-kpi .v, .rx-kpi .d { display: block; }
.rx-kpi { padding: 14px 16px; position: relative; }
.rx-kpi .l { font-size: 12.5px; color: var(--muted); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.rx-kpi .q { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--line-strong); display: inline-grid; place-items: center; font-size: 10px; color: var(--faint); cursor: help; }
.rx-kpi .v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.rx-kpi .d { font-size: 12px; margin-top: 2px; color: var(--muted); } .rx-kpi .d b { font-weight: 600; }
.rx-kpi.star { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow) inset, var(--shadow); }
.rx-kpi .why { display: inline-block; margin-bottom: 6px; font-size: 10.5px; font-weight: 700; color: var(--orange); background: var(--yellow-50); padding: 2px 7px; border-radius: 999px; }
.rx-up { color: var(--green); } .rx-down { color: var(--red); }
.rx-clist { display: grid; gap: 10px; }
.rx-ci { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; padding: 14px; }
.rx-ci > .rx-thumb { width: 56px; height: 56px; }
.rx-ci > .rx-thumb > .rv-net { position: absolute; left: 4px; top: 4px; box-shadow: 0 0 0 2px var(--surface); }
.rx-ci .who { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .rx-ci .who b { font-weight: 600; } .rx-ci .who small { color: var(--faint); }
.rx-ci p { margin: 4px 0 6px; font-size: 14px; }
.rx-ci .en { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.rx-ci .acts { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; }
.rx-stars { color: #F2A900; letter-spacing: 1px; font-size: 13px; }
.rx-resp { font-size: 12.5px; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border-left: 3px solid var(--green); }
.rx-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: var(--surface); box-shadow: var(--shadow-lg); z-index: 960; transform: translateX(105%); transition: transform .32s var(--ease2); display: flex; flex-direction: column; }
.rx-drawer.open { transform: none; }
.rx-dh { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); } .rx-dh h3 { font-size: 16px; font-weight: 600; margin: 0; } .rx-dh .sp { flex: 1; }
.rx-db { flex: 1; overflow: auto; padding: 16px 18px; display: grid; gap: 14px; align-content: start; overscroll-behavior: contain; }
.rx-db label.f { display: grid; gap: 6px; font-size: 13px; font-weight: 600; } .rx-db label.f small { font-weight: 400; color: var(--muted); }
.rx-db textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; background: var(--surface); outline: 0; resize: vertical; font: inherit; color: var(--text); min-height: 74px; }
.rx-db textarea:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-50); }
.rx-quote { border-left: 3px solid var(--line-strong); padding: 6px 10px; font-size: 13.5px; background: var(--surface-2); border-radius: 0 10px 10px 0; }
.rx-opt { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; background: var(--surface); animation: rx-in .3s var(--ease2) both; } .rx-opt b { font-size: 12px; font-weight: 600; color: var(--muted); }
.rx-scrim { position: fixed; inset: 0; background: rgba(5,12,28,.35); z-index: 955; opacity: 0; pointer-events: none; transition: opacity .25s; } .rx-scrim.open { opacity: 1; pointer-events: auto; }
.rx-dots { display: inline-flex; gap: 4px; } .rx-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: rx-bl 1s infinite; } .rx-dots i:nth-child(2) { animation-delay: .15s; } .rx-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes rx-bl { 50% { opacity: .2; } }
.rx-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 990; opacity: 0; transition: opacity .2s, transform .3s var(--ease2); font-weight: 500; max-width: calc(100vw - 32px); }
.rx-toast.on { opacity: 1; transform: translate(-50%, 0); } .rx-toast.err { background: var(--red); }
/* Estadísticas */
.rx-g2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.rx-ch { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); } .rx-ch h3 { font-size: 15px; font-weight: 600; margin: 0; } .rx-ch .sp { flex: 1; }
.rx-cb { padding: 16px 18px; }
.rx-temas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.rx-gridh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rx-gridh h3 { font-size: 16px; font-weight: 600; margin: 0; } .rx-gridh .sp { flex: 1; }
.rx-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.rx-post { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; overflow: hidden; padding: 0; box-shadow: var(--shadow); transition: transform .2s var(--ease2), box-shadow .2s; display: flex; flex-direction: column; cursor: pointer; color: var(--text); font: inherit; }
.rx-post:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.rx-post .im { aspect-ratio: 1; position: relative; background: var(--surface-2); }
.rx-post .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rx-post .im > .rv-net { position: absolute; top: 8px; left: 8px; box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
.rx-post .im .kind { position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 700; background: rgba(0,0,0,.55); color: #fff; padding: 2px 8px; border-radius: 999px; }
.rx-post .im .txt { position: absolute; inset: 36px 12px 12px; font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rx-post .bd { padding: 10px 12px 12px; display: grid; gap: 8px; flex: 1; }
.rx-post .tx { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rx-post .mt { display: flex; gap: 10px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; flex-wrap: wrap; } .rx-post .mt b { color: var(--text); font-weight: 600; }
.rx-post .ft { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--faint); margin-top: auto; gap: 6px; }
.rx-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rx-tbl th { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rx-tbl td { padding: 11px 12px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; } .rx-tbl tr:last-child td { border-bottom: 0; } .rx-tbl .r { text-align: right; }
.rx-split { display: grid; gap: 10px; }
.rx-srow { display: grid; grid-template-columns: 150px 1fr 60px; gap: 10px; align-items: center; font-size: 13px; }
.rx-srow .tr { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .rx-srow .tr i { display: block; height: 100%; border-radius: 999px; background: var(--rx-gbp); animation: rx-grow .7s var(--ease2) both; transform-origin: left; }
.rx-srow b { text-align: right; font-weight: 600; }
.rx-kw div { display: flex; justify-content: space-between; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid var(--line); } .rx-kw div:last-child { border-bottom: 0; }
/* Informe del cliente */
.rx-rep { max-width: 1000px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.rx-reph { background: var(--navy); color: #fff; padding: 28px 32px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.rx-reph .logo { width: 54px; height: 54px; border-radius: 14px; background: var(--yellow); color: #00153C; display: grid; place-items: center; font-weight: 800; font-size: 18px; overflow: hidden; } .rx-reph .logo img { width: 100%; height: 100%; object-fit: cover; }
.rx-reph h1 { font-size: 22px; font-weight: 700; margin: 0; color: #fff; } .rx-reph p { margin: 2px 0 0; color: rgba(255,255,255,.7); } .rx-reph .sp { flex: 1; }
.rx-reph .btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.rx-cover { padding: 32px; display: grid; gap: 24px; background: radial-gradient(120% 90% at 100% 0%, var(--yellow-50), transparent 60%), var(--surface); }
.rx-kick { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.rx-headline { font-size: 26px; font-weight: 700; margin: 4px 0 0; max-width: 760px; line-height: 1.25; }
.rx-big3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rx-big { border-radius: 16px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.rx-big small { display: block; color: var(--muted); font-size: 13px; } .rx-big b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; } .rx-big em { font-style: normal; font-size: 13px; font-weight: 600; }
.rx-finds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rx-find { border-radius: 16px; padding: 18px; display: grid; gap: 10px; align-content: start; border: 1px solid var(--line); background: var(--surface); }
.rx-find .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; }
.rx-find h4 { font-size: 15px; font-weight: 600; margin: 0; } .rx-find p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.rx-find .tp { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; border: 0; padding: 0; background: none; text-align: left; cursor: pointer; color: var(--text); font: inherit; }
.rx-find .tp .rx-thumb { width: 56px; height: 56px; } .rx-find .tp small { color: var(--blue); font-weight: 600; font-size: 12.5px; display: flex; gap: 4px; align-items: center; }
.rx-ia { display: grid; gap: 6px; } .rx-ia h4 { margin: 10px 0 2px; font-size: 14px; } .rx-ia ul { margin: 0; padding-left: 18px; line-height: 1.6; font-size: 14px; } .rx-ia p { margin: 0; }
.rx-recos { display: grid; gap: 8px; counter-reset: r; }
.rx-recos li { list-style: none; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; font-size: 14px; }
.rx-recos li::before { counter-increment: r; content: counter(r); width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12.5px; }
[data-theme="dark"] .rx-recos li::before { background: var(--yellow); color: #00153C; }
.rx-fmts { display: flex; gap: 8px; flex-wrap: wrap; }
.rx-fmt { display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 8px 12px; font-size: 13px; color: var(--muted); cursor: pointer; font: inherit; transition: border-color .15s, background .15s; }
.rx-fmt b { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .rx-fmt.on { border-color: var(--text); background: var(--surface-2); color: var(--text); }
.rx-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; grid-auto-flow: dense; }
.rx-gi { position: relative; border: 0; padding: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 1; text-align: left; color: #fff; background: var(--surface-2); cursor: pointer; transition: transform .2s var(--ease2), box-shadow .2s; animation: rx-in .35s var(--ease2) both; font: inherit; }
.rx-gi:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.rx-gi > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rx-gi.v9 { aspect-ratio: 1 / 2; grid-row: span 2; }
.rx-gi.txt { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); }
.rx-gi .p { position: absolute; inset: 34px 10px 30px; margin: 0; font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rx-gi > .rv-net { position: absolute; top: 8px; left: 8px; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.rx-gi .kind { position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 700; background: rgba(0,0,0,.55); color: #fff; padding: 2px 8px; border-radius: 999px; }
.rx-gi.txt .kind { background: var(--surface); color: var(--muted); }
.rx-gi .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 8px 7px; font-size: 11.5px; font-weight: 600; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.rx-gi.txt .cap { background: none; color: var(--muted); }
.rx-gi .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.45); display: grid; place-items: center; font-size: 13px; }
.rx-more-btn { justify-self: center; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-weight: 600; box-shadow: var(--shadow); cursor: pointer; color: var(--text); font: inherit; transition: transform .2s var(--ease2), box-shadow .2s; }
.rx-more-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); } .rx-more-btn .ch { transition: transform .35s var(--ease2); } .rx-more-btn.on .ch { transform: rotate(180deg); }
.rx-expand { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease2); } .rx-expand.on { grid-template-rows: 1fr; }
.rx-expand > div { overflow: hidden; } .rx-expand .inner { opacity: 0; transform: translateY(-8px); transition: opacity .4s .1s, transform .45s var(--ease2); } .rx-expand.on .inner { opacity: 1; transform: none; }
.rx-repb { padding: 24px 32px 32px; display: grid; gap: 16px; }
.rx-rnet { border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.rx-rnet .hh { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-weight: 600; font-size: 15px; }
.rx-rk { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.rx-rk div { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; } .rx-rk small { display: block; font-size: 12px; color: var(--muted); } .rx-rk b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } .rx-rk em { font-style: normal; font-size: 12px; font-weight: 600; margin-left: 4px; }
.rx-pdf { position: fixed; right: 18px; bottom: 18px; border-radius: 999px; background: var(--yellow); color: #00153C; font-weight: 700; padding: 12px 18px; text-decoration: none !important; box-shadow: 0 6px 18px rgba(0,21,60,.2); z-index: 50; }
/* Ajustes y cuentas */
.rx-set { display: grid; gap: 16px; max-width: 900px; }
.rx-acclist { display: grid; }
.rx-arow { display: grid; grid-template-columns: minmax(0, 1fr) 220px auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.rx-arow:last-child { border-bottom: 0; } .rx-arow.off { opacity: .6; }
.rx-arow .who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.rx-arow .who img, .rx-arow .who .av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--yellow); display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #00153C; flex: none; }
.rx-arow .who b { display: block; font-weight: 600; } .rx-arow .who small { color: var(--muted); font-size: 12.5px; }
.rx-arow .acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 1320px) { .rx-cmp { grid-template-columns: minmax(0, 1fr) 300px; } .rx-cmp .rx-colprev { grid-column: 1 / -1; } .rx-prevs { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; } }
@media (max-width: 1100px) { .rx-inbox { grid-template-columns: 280px minmax(0, 1fr); } .rx-ibr { display: none; } }
@media (max-width: 1000px) { .rx-cmp { grid-template-columns: 1fr; } .rx-cmp > .card { position: static; max-height: none; } .rx-g2 { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .rx-big3, .rx-finds { grid-template-columns: 1fr; }
  .rx-inbox { grid-template-columns: 1fr; height: auto; } .rx-ibl { max-height: 320px; }
  .rx-cal { font-size: 11px; } .rx-cal .dc { min-height: 70px; } .rx-ce .ce-c > span { display: none; }
  .rx-prow { grid-template-columns: 48px minmax(0, 1fr); } .rx-prow .rx-thumb { width: 48px; height: 48px; } .rx-prow .acts { grid-column: 1 / -1; justify-content: flex-start; }
  .rx-ci { grid-template-columns: 44px minmax(0, 1fr); } .rx-ci > .rx-thumb { width: 44px; height: 44px; } .rx-ci .acts { grid-column: 1 / -1; justify-content: flex-start; }
  .rx-cover, .rx-repb, .rx-reph { padding-left: 18px; padding-right: 18px; } .rx-headline { font-size: 21px; }
  .rx-srow { grid-template-columns: 110px 1fr 50px; } .rx-arow { grid-template-columns: 1fr; } .rx-arow .acts { justify-content: flex-start; }
  .rv-rr { grid-template-columns: 28px 86px 1fr 44px; }
  .rx-kpi .v { font-size: 22px; }
}
/* Menú lateral en el celular: se arrastra a la izquierda para cerrarlo */
.sidebar-scrim { display: none; }
@media (max-width: 820px) {
  .sidebar-scrim { display: block; position: fixed; inset: 0; background: rgba(5,12,28,.45); z-index: 59; opacity: 0; pointer-events: none; transition: opacity .25s; }
  .sidebar-scrim.on { opacity: 1; pointer-events: auto; }
  .sidebar.drag { transition: none !important; }
}

/* ===== Redes sociales (actualización 142): buscadores, formato por red, portada, grupos, permisos, feed de Instagram ===== */
.rx-cmp > .card { scrollbar-width: none; overflow-x: hidden; }
.rx-cmp > .card::-webkit-scrollbar { display: none; }
.rx-cmp > .card > * { min-width: 0; }
.rx-ctop { gap: 10px; }
.rx-combo { position: relative; flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 8px; height: 38px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 10px; background: var(--surface); color: var(--muted); }
.rx-combo:focus-within { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-50); }
.rx-combo input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; height: 100%; }
.rx-combo.on { border-style: solid; background: var(--surface-2); }
.rx-combo-sel { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; color: var(--text); }
.rx-combo-sel b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-combo-sel button { margin-left: auto; border: 0; background: none; color: var(--faint); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.rx-combo-l { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; max-height: 280px; overflow: auto; animation: rx-in .16s var(--ease2); }
.rx-combo-l button { display: flex; width: 100%; align-items: center; gap: 8px; justify-content: space-between; border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 8px; color: var(--text); cursor: pointer; }
.rx-combo-l button:hover { background: var(--surface-2); } .rx-combo-l small { color: var(--faint); font-size: 12px; flex: none; }
.rx-combo-l button > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-fred { margin: 10px 16px 0; }
.rx-elige { padding: 4px 2px 8px; color: var(--muted); font-size: 13.5px; width: 100%; }
.rx-accs { gap: 8px; }
.rx-acc, .rx-acc .pic, .rx-acc-add { width: 38px; height: 38px; }
.rx-acc .pic { font-size: 11px; }
.rx-acc > .rv-net { width: 16px; height: 16px; right: -3px; bottom: -3px; } .rx-acc > .rv-net svg { width: 9px; height: 9px; }
.rx-acc-add { font-size: 18px; }
.rx-etabs { overflow: hidden; }
.rx-etabs .hint { flex-basis: 100%; margin-left: 0; text-align: right; }
.rx-tool { row-gap: 6px; }
.rx-tb .tt { display: none; }
.rx-tipf { position: fixed; z-index: 1000; pointer-events: none; background: var(--navy); color: #fff; font-size: 12px; padding: 5px 9px; border-radius: 7px; white-space: nowrap; opacity: 0; transition: opacity .12s; box-shadow: var(--shadow-lg); }
.rx-tipf.on { opacity: 1; }
.rx-fmtrow { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; padding: 10px 14px 0; font-size: 13px; }
.rx-fmtrow > b { font-weight: 600; margin-right: 2px; }
.rx-rd { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text); }
.rx-rd input { position: absolute; opacity: 0; pointer-events: none; }
.rx-rd .o { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; transition: border-color .15s; }
.rx-rd.on .o { border-color: var(--green); } .rx-rd.on .o::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.rx-rd.off { opacity: .4; cursor: not-allowed; }
.rx-rd input:focus-visible + .o { box-shadow: 0 0 0 3px var(--yellow-50); }
.rx-fmtnota { flex-basis: 100%; font-size: 12px; color: var(--orange); }
.rx-por { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 180px); gap: 14px; align-items: start; }
.rx-por-v { display: grid; gap: 6px; }
.rx-por-v video { width: 100%; max-height: 260px; border-radius: 10px; background: #000; object-fit: contain; }
.rx-por-v input[type=range] { width: 100%; accent-color: var(--yellow); }
.rx-por-a { display: grid; gap: 8px; }
.rx-por-actual { aspect-ratio: 16/10; border-radius: 10px; border: 1px dashed var(--line-strong); overflow: hidden; display: grid; place-items: center; color: var(--muted); font-size: 13px; background: var(--surface); }
.rx-por-actual img { width: 100%; height: 100%; object-fit: cover; }
.rv-fecha { display: inline-block; font-size: 12.5px; color: var(--blue); text-decoration: none; margin-top: 2px; }
.rv-fecha:hover { text-decoration: underline; }
span.rv-fecha { color: var(--muted); }
.rv-mh h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-filtros .rx-lab input[type=date], .rx-filtros .dp-input { height: 34px; }
.rx-filtros .ss { min-width: 200px; max-width: 280px; }
.rx-ci > .rx-thumb { border: 0; padding: 0; cursor: pointer; }
.rx-ci .en { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font: inherit; font-size: 12px; color: var(--muted); }
.rx-ci .en:hover { color: var(--blue); text-decoration: underline; }
.rx-sentbtn { border: 0; background: none; padding: 0; display: inline-flex; align-items: center; gap: 2px; cursor: pointer; font: inherit; }
.rx-sentbtn .ch { font-size: 10px; color: var(--faint); }
.rx-sentmenu { display: grid; gap: 4px; padding: 10px; }
.rx-sentmenu button { border: 0; background: none; text-align: left; padding: 6px; border-radius: 8px; cursor: pointer; }
.rx-sentmenu button:hover, .rx-sentmenu button.on { background: var(--surface-2); }
.rx-grupo { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; }
.rx-grupo input[name=n] { height: 36px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 12px; background: var(--surface); color: var(--text); }
.rx-colores { display: flex; gap: 4px; flex-wrap: wrap; }
.rx-colores label { cursor: pointer; } .rx-colores input { position: absolute; opacity: 0; }
.rx-colores .pill { width: 26px; height: 26px; padding: 0; display: grid; place-items: center; font-size: 12px; border: 2px solid transparent; }
.rx-colores input:checked + .pill { border-color: var(--text); }
.rx-gcuentas { display: flex; flex-wrap: wrap; gap: 6px; }
.rx-gc { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px 4px 6px; font-size: 13px; cursor: pointer; background: var(--surface); }
.rx-gc:has(input:checked) { border-color: var(--yellow); background: var(--yellow-50); }
.rx-gc input { margin: 0; accent-color: var(--yellow-600); }
.rx-acceso { display: grid; gap: 8px; }
/* Perfil de Instagram (vista del feed) */
.rx-igp { font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
.rx-igp-h { display: flex; align-items: center; gap: 22px; padding: 4px 4px 12px; }
.rx-igp-h .av { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none; background: var(--yellow); display: grid; place-items: center; font-weight: 800; color: #00153C; }
.rx-igp-n { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.rx-igp-n b { display: block; font-size: 17px; font-weight: 600; } .rx-igp-n span { font-size: 13px; color: var(--muted); }
.rx-igp-b { padding: 0 4px 12px; display: grid; gap: 2px; font-size: 14px; }
.rx-igp-b b { font-weight: 600; } .rx-igp-b p { margin: 0; white-space: pre-wrap; } .rx-igp-b a { color: #00376B; font-weight: 600; text-decoration: none; }
[data-theme="dark"] .rx-igp-b a { color: #E0F1FF; }
.rx-feed { gap: 2px; }
.rx-feed > div { aspect-ratio: 3/4; }
.rx-feed .t { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.rx-feed .t svg { width: 18px; height: 18px; }
.rx-feed .pg { outline: 3px solid var(--blue); outline-offset: -3px; }
.rx-feed .pg em { background: var(--blue); }
@media (max-width: 1320px) { .rx-colprev { max-height: none; } }
@media (max-width: 700px) { .rx-por { grid-template-columns: 1fr; } .rx-ctop { flex-direction: column; align-items: stretch; } .rx-combo { flex: none; } }
/* Vista de la publicación: la foto completa (con su proporción) y los videos con su reproductor */
.rv-grid.n1 { aspect-ratio: auto; height: auto; }
.rv-grid.n1 > .rv-ph img { height: auto; max-height: 720px; object-fit: contain; background: var(--pv-soft); }
.rv-car1 { aspect-ratio: auto !important; }
.rv-car1 > .rv-ph img { height: auto; max-height: 720px; object-fit: contain; }
.rv-play { cursor: pointer; position: relative; }
.rv-play > img { height: auto !important; max-height: 720px; object-fit: contain; }
.rv-playb { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(0,0,0,.55); display: grid; place-items: center; transition: transform .18s var(--ease2), background .18s; }
.rv-playb svg { width: 30px; height: 30px; fill: #fff; margin-left: 3px; }
.rv-play:hover .rv-playb { transform: translate(-50%, -50%) scale(1.08); background: rgba(0,0,0,.7); }
.rv-play.on { cursor: default; }
.rv-play iframe { display: block; width: 100%; border: 0; background: #000; }
.rv-vt > .rv-play { position: absolute; inset: 0; }
.rv-vt > .rv-play > img { height: 100% !important; object-fit: cover; }
.rv-vt > .rv-play iframe { height: 100% !important; }

/* ===== 143: grupos y permisos con buscador, tipo de contenido, bandeja asignada, informe ===== */
/* Selector con buscador (grupos de redes y permisos) */
.pk { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.pk-bar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pk-q { flex: 1 1 220px; min-width: 0; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--muted); }
.pk-q:focus-within { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-50); }
.pk-q input { flex: 1; min-width: 0; border: 0 !important; outline: 0; background: transparent; box-shadow: none !important; padding: 0 !important; height: 100%; font: inherit; color: var(--text); margin: 0; }
.pk-fil { display: flex; gap: 4px; flex-wrap: wrap; }
.pk-fil button, .pk-solo { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.pk-fil button .rv-net { width: 16px; height: 16px; }
.pk-fil button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
[data-theme="dark"] .pk-fil button.on { background: var(--yellow); border-color: var(--yellow); color: #00153C; }
.pk-solo { margin-left: auto; } .pk-solo b { background: var(--surface-2); border-radius: 999px; padding: 0 7px; font-size: 11.5px; color: var(--text); }
.pk-solo[aria-pressed="true"] { border-color: var(--yellow); background: var(--yellow-50); color: var(--text); }
.pk-list { max-height: 340px; overflow: auto; padding: 6px 10px 10px; overscroll-behavior: contain; }
.pk-h { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 10px 2px 6px; }
.pk-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 6px; }
.pk-it { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; min-width: 0; transition: border-color .15s, background .15s; }
.pk-it:hover { border-color: var(--line-strong); background: var(--surface-2); }
.pk-it input { position: absolute; opacity: 0; pointer-events: none; }
.pk-it:has(input:checked) { border-color: var(--yellow); background: var(--yellow-50); }
.pk-it:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--yellow-50); }
.pk-av { position: relative; width: 32px; height: 32px; flex: none; }
.pk-av img, .pk-av b { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--surface-2); color: var(--text); font-size: 11px; font-weight: 700; }
.pk-av.pk-cli b { border-radius: 9px; background: var(--blue-50, #E8EFFC); }
.pk-av .rv-net { position: absolute; right: -4px; bottom: -3px; width: 15px; height: 15px; border: 2px solid var(--surface); border-radius: 50%; }
.pk-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--surface-2); }
.pk-tx { min-width: 0; flex: 1; display: grid; }
.pk-l { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-tx small { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-tx .pill { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pk-ck { width: 18px; height: 18px; flex: none; border-radius: 6px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.pk-it:has(input:checked) .pk-ck { background: var(--yellow); border-color: var(--yellow); }
.pk-it:has(input:checked) .pk-ck::after { content: ''; width: 9px; height: 5px; border: 2px solid #00153C; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.pk-vacio { margin: 4px 12px 12px; }
.rx-grupo { display: grid; gap: 10px; }

/* Permisos de redes en Roles y permisos */
.ra-list { display: grid; gap: 8px; }
.ra-u { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ra-u > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; }
.ra-u > summary::-webkit-details-marker { display: none; }
.ra-av { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.ra-n { display: grid; min-width: 0; } .ra-n b { font-weight: 600; } .ra-n small { color: var(--faint); font-size: 12px; }
.ra-r { margin-left: auto; font-size: 12.5px; color: var(--muted); text-align: right; max-width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra-r.lim { color: var(--text); }
.ra-ch { color: var(--faint); transition: transform .2s; } .ra-u[open] .ra-ch { transform: rotate(180deg); }
.ra-f { display: grid; gap: 12px; padding: 4px 14px 14px; border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 640px) { .ra-r { display: none; } }

/* Compositor: tipo de contenido al lado de las cuentas */
.rx-accs { align-items: center; }
.rx-fmtsel { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.rx-fmtg { display: flex; align-items: center; gap: 8px; padding: 3px 3px 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.rx-fmtg > .rv-net { width: 18px; height: 18px; }
.rx-fseg { display: flex; gap: 2px; }
.rx-fseg button { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .18s var(--ease2), color .18s, box-shadow .18s; }
.rx-fseg button:hover:not(:disabled):not(.on) { color: var(--text); background: var(--surface); }
.rx-fseg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,21,60,.14), 0 0 0 1px var(--line); }
.rx-fseg button:disabled { opacity: .38; cursor: not-allowed; }
.rx-fseg svg { flex: none; }
.rx-fmtnota { margin: 4px 16px 0; font-size: 12px; color: var(--muted); }
@media (max-width: 700px) { .rx-fmtsel { margin-left: 0; width: 100%; justify-content: flex-start; } .rx-fseg button span { display: none; } .rx-fseg button { padding: 0 9px; } }

/* Compositor: editar y crear grupos desde el buscador */
.rx-combo-r { display: flex; align-items: center; gap: 2px; }
.rx-combo-r > button:first-child { flex: 1; min-width: 0; }
.rx-combo-l .ed, .rx-combo-sel .ed { flex: none; width: 30px !important; height: 30px; padding: 0 !important; display: grid !important; place-items: center; border-radius: 8px; color: var(--faint); justify-content: center !important; }
.rx-combo-l .ed:hover, .rx-combo-sel .ed:hover { color: var(--text); background: var(--surface-2); }
.rx-combo-sel .ed { margin-left: auto; } .rx-combo-sel .ed + [data-combo-x] { margin-left: 0; }
.rx-combo-l .rx-combo-nuevo { border-top: 1px solid var(--line) !important; border-radius: 0 0 8px 8px !important; margin-top: 4px; color: var(--text); font-weight: 600; justify-content: flex-start !important; }
.rx-gmodal { position: fixed; inset: 0; z-index: 90; background: rgba(0, 12, 34, .45); display: grid; place-items: center; padding: 16px; animation: rx-in .16s var(--ease2); }
.rx-gmodal.closing { opacity: 0; transition: opacity .16s; }
.rx-gcard { width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 18px; display: grid; gap: 12px; animation: sa-pop .2s var(--ease2); }
.rx-gcard-h { display: flex; align-items: center; justify-content: space-between; } .rx-gcard-h h3 { margin: 0; font-size: 17px; }

/* Portada del video: quitarla */
.rx-por-actual { position: relative; }
.rx-por-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .15s, transform .15s; }
.rx-por-x:hover { background: #B3261E; transform: scale(1.06); }

/* Compositor: las listas de opciones (proyecto) se abren dentro de la tarjeta, sin cortarse ni mover la columna */
.rx-cmp > .card .ss-box { position: static; margin-top: 6px; width: 100%; min-width: 0; max-width: none; box-shadow: none; animation: none; }
.rx-cmp > .card .ss-box.up { margin-top: 6px; }

/* Bandeja: asignar conversaciones */
.rx-dechips { margin-top: 2px; }
.rx-asig { position: relative; }
.rx-asig-b { display: inline-flex; align-items: center; gap: 6px; } .rx-asig-b .ch { font-size: 10px; color: var(--faint); }
.rx-asig-b.on { border-color: var(--yellow); }
.rx-asig-av { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; flex: none; }
[data-theme="dark"] .rx-asig-av { background: var(--yellow); color: #00153C; }
.rx-cv .t .rx-asig-av { width: 20px; height: 20px; font-size: 8.5px; margin-top: 4px; }
.rx-asig-m { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: grid; gap: 4px; animation: rx-in .16s var(--ease2); }
.rx-asig-m input { height: 34px; margin: 0; }
.rx-asig-l { max-height: 260px; overflow: auto; display: grid; }
.rx-asig-m button { display: flex; align-items: center; gap: 9px; border: 0; background: none; text-align: left; padding: 7px 8px; border-radius: 8px; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; }
.rx-asig-m button:hover, .rx-asig-m button.on { background: var(--surface-2); } .rx-asig-m button b { margin-left: auto; color: var(--green); }
.rx-asig-m .rx-asig-quitar { color: #B3261E; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }

/* Informe: lo que proponemos ordenado, nota del equipo, fotos de las cuentas, aprobación */
.rx-recos { display: grid; gap: 10px; counter-reset: r; padding: 0; margin: 0; }
.rx-recos li { list-style: none; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.rx-recos li::before { width: 24px; height: 24px; font-size: 11.5px; margin-top: 0; }
.rx-recos li > span { min-width: 0; } .rx-recos li b { font-weight: 700; color: var(--text); }
.rx-nota-eq { display: flex; gap: 14px; border: 1px solid var(--line); border-left: 4px solid var(--yellow); border-radius: 4px 14px 14px 4px; background: linear-gradient(90deg, var(--yellow-50), var(--surface) 60%); padding: 16px 20px; }
.rx-nota-eq .q { font-size: 46px; line-height: .8; color: var(--yellow); font-family: Georgia, serif; flex: none; }
.rx-nota-eq small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.rx-nota-eq p { margin: 0; font-size: 15px; line-height: 1.6; white-space: pre-line; max-width: 75ch; }
.rx-nota-eq em { display: block; margin-top: 8px; font-style: normal; font-size: 13px; color: var(--muted); font-weight: 600; }
.rx-repaccs { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.rx-repacc { position: relative; width: 30px; height: 30px; }
.rx-repacc img, .rx-repacc b { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; font-size: 10px; border: 2px solid rgba(255,255,255,.85); }
.rx-repacc .rv-net { position: absolute; right: -4px; bottom: -3px; width: 14px; height: 14px; border: 1.5px solid var(--navy); border-radius: 50%; }
.rx-repside { display: grid; gap: 14px; align-content: start; }
.rx-aprob { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 12px; flex-wrap: wrap; }
.rx-aprob .ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; flex: none; background: var(--surface-2); color: var(--muted); }
.rx-aprob > div { display: grid; min-width: 0; flex: 1 1 180px; } .rx-aprob small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.rx-aprob.ok { border-color: color-mix(in srgb, var(--green) 40%, transparent); background: color-mix(in srgb, var(--green) 7%, var(--surface)); } .rx-aprob.ok .ic { background: var(--green); color: #fff; }
.rx-aprob.pend { border-color: color-mix(in srgb, #C97D1F 45%, transparent); background: color-mix(in srgb, #FFB400 9%, var(--surface)); } .rx-aprob.pend .ic { background: #FFB400; color: #00153C; }
.rx-sinaprob { font-size: 12px; font-weight: 600; color: #8A5A00; background: color-mix(in srgb, #FFB400 18%, var(--surface)); border-radius: 999px; padding: 4px 10px; }
[data-theme="dark"] .rx-sinaprob { color: #FFD27A; }

/* Reproductor grande: el video completo, con su forma */
.rv-player { position: fixed; inset: 0; z-index: 3000; background: rgba(0, 6, 20, .82); display: grid; place-items: center; animation: rx-in .16s var(--ease2); }
.rv-player.closing { opacity: 0; transition: opacity .16s; }
.rv-player-b { max-width: 94vw; max-height: 92vh; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.rv-player-b iframe { width: 100%; height: 100%; border: 0; display: block; }
.rv-player-x { position: fixed; top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 24px; cursor: pointer; }
.rv-player-x:hover { background: rgba(255,255,255,.26); }
.rv-sinposter { display: block; width: 100%; aspect-ratio: 9/16; max-height: 520px; background: linear-gradient(160deg, #1d2333, #0b0e16); }

/* Ajustes de archivos: el desglose */
.rx-kv > div > span { min-width: 0; }
.pk-fil button.ic { width: 30px; padding: 0; justify-content: center; }
.pk-fil button.ic.on .rv-net { box-shadow: 0 0 0 2px #fff; border-radius: 50%; }
.rx-gcard .rx-grupo { border: 0; padding: 0; background: none; box-shadow: none; }
.pk [hidden] { display: none !important; }

/* ===== 146: cuenta completa (como en Meta) y público ===== */
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.mc { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.mc h4 { margin: 0; font-size: 14px; font-weight: 700; }
.mc-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.mc-top small { color: var(--muted); font-size: 12px; }
.mc-v { font-size: 26px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mc-v em, .mc-r em { font-style: normal; font-size: 12.5px; font-weight: 600; }
.mc-sp { width: 110px; height: 34px; flex: none; }
.mc-r { display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 6px; }
.mc-r b { color: var(--text); font-variant-numeric: tabular-nums; margin-left: auto; }
.mc-r + .mc-r { border-top: 0; padding-top: 0; }
.pb-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.pb-tabs .rv-net { width: 16px; height: 16px; }
.pb-panel { display: grid; gap: 18px; }
.pb [hidden] { display: none !important; }
.pb-cols { display: flex; gap: 10px; align-items: flex-end; padding: 8px 4px 0; border-bottom: 1px solid var(--line); }
.pb-col { flex: 1; display: grid; gap: 6px; min-width: 0; }
.pb-bars { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 140px; }
.pb-bars i { width: min(28px, 40%); border-radius: 5px 5px 0 0; min-height: 2px; transition: height .5s var(--ease2); }
.pb-bars .f, .pb-ley .f { background: #8ECDF0; } .pb-bars .m, .pb-ley .m { background: #2E7FBF; }
.pb-col > span { text-align: center; font-size: 12px; color: var(--muted); padding-bottom: 6px; }
.pb-ley { display: flex; gap: 18px; justify-content: center; margin-top: 10px; font-size: 13px; color: var(--muted); }
.pb-ley i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; } .pb-ley b { color: var(--text); }
.pb-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px 28px; }
.pb-r { display: grid; gap: 3px; margin-bottom: 8px; font-size: 13px; }
.pb-r > div { display: flex; align-items: center; gap: 8px; }
.pb-r i { height: 8px; border-radius: 4px; background: #0E7C70; min-width: 3px; }
.pb-r b { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.pb-bars { height: 130px; } .pb-col { grid-template-rows: 130px auto; height: auto; } .pb-cols { height: auto; }

/* Selector de fechas al estilo Bigin */
.rx-rango { position: relative; }
.rx-rango > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 13.5px; cursor: pointer; user-select: none; transition: border-color .15s, box-shadow .15s; white-space: nowrap; }
.rx-rango > summary::-webkit-details-marker { display: none; }
.rx-rango > summary .i { color: var(--muted); }
.rx-rango > summary .ch { font-size: 10px; color: var(--faint); transition: transform .2s; }
.rx-rango[open] > summary { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-50); }
.rx-rango[open] > summary .ch { transform: rotate(180deg); }
.rx-rango > summary.on { background: var(--yellow-50); border-color: color-mix(in srgb, var(--yellow) 60%, var(--line-strong)); font-weight: 600; }
.rx-rango-p { position: absolute; z-index: 45; top: calc(100% + 6px); left: 0; display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; animation: rx-in .16s var(--ease2); }
.rx-rango-a { display: grid; padding: 6px; min-width: 170px; border-right: 1px solid var(--line); background: var(--surface-2); }
.rx-rango-a a { padding: 8px 12px; border-radius: 8px; color: var(--text); font-size: 13.5px; text-decoration: none; }
.rx-rango-a a:hover { background: var(--surface); }
.rx-rango-a a.on { background: var(--surface); font-weight: 700; box-shadow: inset 3px 0 0 var(--yellow); }
.rx-rango-a a.quitar { color: var(--muted); border-top: 1px solid var(--line); border-radius: 0; margin-top: 4px; padding-top: 10px; }
.rx-rango-c { display: grid; gap: 10px; padding: 14px; min-width: 210px; align-content: start; }
.rx-rango-c b { font-size: 13px; }
.rx-rango-c label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.rx-rango-c input { height: 36px; margin: 0; }
@media (max-width: 560px) { .rx-rango-p { flex-direction: column; left: auto; right: 0; } .rx-rango-a { border-right: 0; border-bottom: 1px solid var(--line); } }

/* Selector de fechas como el de Meta */
.fr { position: relative; }
.fr-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap; transition: border-color .15s, box-shadow .15s; }
.fr-btn .i { color: var(--muted); } .fr-btn .ch { font-size: 10px; color: var(--faint); transition: transform .2s; }
.fr-btn.open { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-50); } .fr-btn.open .ch { transform: rotate(180deg); }
.fr-btn.on { font-weight: 600; }
.fr-pop { position: absolute; z-index: 70; top: calc(100% + 6px); right: 0; display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; animation: rx-in .16s var(--ease2); max-width: calc(100vw - 24px); }
.fr-pop.closing { opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; }
.fr-presets { display: grid; align-content: start; padding: 8px; border-right: 1px solid var(--line); min-width: 190px; }
.fr-pr { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--text); }
.fr-pr:hover { background: var(--surface-2); }
.fr-pr input { position: absolute; opacity: 0; pointer-events: none; }
.fr-pr .o { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; flex: none; transition: border-color .15s; }
.fr-pr.on .o { border-color: var(--navy); } .fr-pr.on .o::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--navy); }
[data-theme="dark"] .fr-pr.on .o { border-color: var(--yellow); } [data-theme="dark"] .fr-pr.on .o::after { background: var(--yellow); }
.fr-main { display: grid; min-width: 0; }
.fr-cal { position: relative; display: flex; gap: 26px; padding: 14px 22px 8px; }
.fr-nav { position: absolute; top: 12px; left: 14px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--text); font-size: 20px; cursor: pointer; }
.fr-nav.n { left: auto; right: 14px; } .fr-nav:hover { background: var(--surface-2); }
.fr-mt { text-align: center; font-weight: 700; font-size: 14px; margin: 4px 0 10px; }
.fr-dias { display: grid; grid-template-columns: repeat(7, 36px); row-gap: 3px; }
.fr-dias b { font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: center; padding-bottom: 4px; }
.fr-d { height: 32px; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; border-radius: 0; font-variant-numeric: tabular-nums; }
.fr-d:hover:not(.off) { background: var(--surface-2); border-radius: 8px; }
.fr-d.in { background: color-mix(in srgb, #2E7FBF 22%, var(--surface)); }
.fr-d.ini, .fr-d.fin { background: #1D5FA8; color: #fff; font-weight: 700; border-radius: 8px; }
.fr-d.ini:not(.fin) { border-radius: 8px 0 0 8px; } .fr-d.fin:not(.ini) { border-radius: 0 8px 8px 0; }
.fr-d.hoy:not(.ini):not(.fin) { color: #1D5FA8; font-weight: 700; }
.fr-d.off { color: var(--faint); cursor: default; }
.fr-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.fr-sum { display: grid; } .fr-sum b { font-size: 13.5px; } .fr-sum small { font-size: 11.5px; color: var(--faint); }
@media (max-width: 860px) { .fr-pop { flex-direction: column; right: auto; left: 0; } .fr-presets { grid-template-columns: repeat(2, 1fr); border-right: 0; border-bottom: 1px solid var(--line); } .fr-cal .fr-mes + .fr-mes { display: none; } .fr-cal { justify-content: center; } }
@media (max-width: 420px) { .fr-dias { grid-template-columns: repeat(7, 34px); } }
.fm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.fm-col { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; align-content: start; gap: 4px; }
.fm-col h4 { margin: 0; font-size: 14px; } .fm-col > small { margin-bottom: 6px; }
.fm-r { display: grid; gap: 3px; font-size: 13px; margin-top: 6px; }
.fm-r > div { display: flex; align-items: center; gap: 8px; }
.fm-r i { height: 10px; border-radius: 3px; background: #2E7FBF; min-width: 3px; }
.fm-r b { font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc-sk { min-height: 120px; gap: 12px; }
.mc-sk i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: mc-sk 1.2s linear infinite; }
.mc-sk i:nth-child(1) { width: 40%; } .mc-sk i:nth-child(2) { width: 70%; height: 22px; } .mc-sk i:nth-child(3) { width: 55%; }
@keyframes mc-sk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .mc-sk i { animation: none; } }
.mc-cop { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.mc-ing { grid-column: span 1; }
.mc-ing > summary { list-style: none; cursor: pointer; display: grid; gap: 8px; }
.mc-ing > summary::-webkit-details-marker { display: none; }
.mc-ing h4 { display: flex; align-items: center; gap: 8px; }
.mc-mas { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--blue); }
.mc-ing[open] .mc-mas { color: var(--muted); }
.mc-ing:hover { border-color: var(--line-strong); }
.mc-ing[open] { grid-column: 1 / -1; }
.mc-ingd { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 2px; animation: rx-in .18s var(--ease2); }
.mc-ingp { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 0; background: none; padding: 6px 4px; border-radius: 8px; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.mc-ingp:hover { background: var(--surface-2); }
.mc-ingp img, .mc-ingp > span:first-child { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--surface-2); }
.mc-ingp .t { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-ingp b { font-variant-numeric: tabular-nums; color: #0E7C66; }
/* Informes: lista con acciones como en Bigin */
.rx-ilist { display: grid; gap: 8px; }
.rx-ibar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--yellow-50); font-size: 13.5px; font-weight: 600; }
.rx-irow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .15s, background .15s; }
.rx-irow:hover { border-color: var(--line-strong); }
.rx-irow.sel { border-color: var(--yellow); background: var(--yellow-50); }
.rx-ick { position: relative; display: grid; place-items: center; cursor: pointer; }
.rx-ick input { position: absolute; opacity: 0; }
.rx-ick span { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.rx-ick input:checked + span { background: var(--yellow); border-color: var(--yellow); }
.rx-ick input:checked + span::after { content: ''; width: 9px; height: 5px; border: 2px solid #00153C; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.rx-ick input:focus-visible + span { box-shadow: 0 0 0 3px var(--yellow-50); }
.rx-imain { display: grid; min-width: 0; text-decoration: none !important; color: var(--text); }
.rx-imain b { font-weight: 600; } .rx-imain small { color: var(--muted); font-size: 12.5px; }
.rx-iacts { display: flex; gap: 2px; }
.rx-ib { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; text-decoration: none !important; transition: background .15s, color .15s; }
.rx-ib:hover { background: var(--surface-2); color: var(--text); }
.rx-ib.danger:hover { color: #B3261E; background: color-mix(in srgb, #B3261E 10%, var(--surface)); }
@media (max-width: 640px) { .rx-irow { grid-template-columns: auto minmax(0, 1fr) auto; } .rx-iacts { grid-column: 2 / -1; } }
.sa-tip { position: fixed; left: 0; top: 0; z-index: 4000; pointer-events: none; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 7px 10px; font-size: 12.5px; display: grid; gap: 2px; max-width: 260px; }
.sa-tip b { font-weight: 700; } .sa-tip span { color: var(--muted); font-variant-numeric: tabular-nums; }
[data-tip] { cursor: default; }
.mc-sp rect { fill: transparent; } .mc-sp rect:hover { fill: currentColor; fill-opacity: .08; }

/* Opinión del cliente al final del informe */
.op { border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: linear-gradient(180deg, var(--yellow-50), var(--surface) 70%); display: grid; gap: 12px; }
.op h3 { margin: 0; font-size: 19px; text-wrap: balance; }
.op-caras { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 560px; }
.op-c { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; transition: transform .15s var(--ease2), border-color .15s, background .15s; }
.op-c input { position: absolute; opacity: 0; pointer-events: none; }
.op-c .e { font-size: 30px; line-height: 1; filter: grayscale(.5); transition: filter .15s, transform .15s; }
.op-c small { font-size: 11.5px; color: var(--muted); text-align: center; }
.op-c:hover { transform: translateY(-2px); } .op-c:hover .e { filter: none; }
.op-c.on { border-color: var(--yellow); background: var(--yellow-50); } .op-c.on .e { filter: none; transform: scale(1.12); } .op-c.on small { color: var(--text); font-weight: 600; }
.op-c:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--yellow-50); }
.op-t { display: grid; gap: 6px; font-size: 14px; max-width: 640px; } .op-t textarea, .op-t input { margin: 0; }
.op-f { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.op-ok { font-weight: 600; color: var(--green); animation: rx-in .2s var(--ease2); }
.op-ver { background: var(--surface); } .op-h { display: flex; gap: 12px; align-items: center; } .op-h small { display: block; color: var(--muted); }
.op-cara { font-size: 34px; line-height: 1; } .op-ver p { margin: 0; line-height: 1.6; white-space: pre-line; }
.rx-iest { display: inline-flex; align-items: center; gap: 8px; } .rx-iop { font-size: 20px; line-height: 1; cursor: default; }
@media (max-width: 480px) { .op-caras { gap: 4px; } .op-c small { font-size: 10px; } .op-c .e { font-size: 26px; } }
.op-t textarea, .op-t input { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; background: var(--surface); color: var(--text); transition: border-color .15s, box-shadow .15s; }
.op-t textarea:focus, .op-t input:focus { outline: 0; border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-50); }
.rx-ksent { gap: 4px; }
.rx-ks3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.rx-ks3 > span { display: grid; gap: 1px; padding: 6px 8px; border-radius: 10px; }
.rx-ks3 b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.rx-ks3 small { font-size: 11.5px; font-weight: 600; }
.rx-ks3 .pos { background: color-mix(in srgb, #1E8A4C 12%, var(--surface)); } .rx-ks3 .pos b, .rx-ks3 .pos small { color: #1E8A4C; }
.rx-ks3 .neu { background: color-mix(in srgb, #8E97A9 16%, var(--surface)); } .rx-ks3 .neu b, .rx-ks3 .neu small { color: var(--muted); }
.rx-ks3 .neg { background: color-mix(in srgb, #D93B2F 12%, var(--surface)); } .rx-ks3 .neg b, .rx-ks3 .neg small { color: #D93B2F; }
[data-theme="dark"] .rx-ks3 .pos b, [data-theme="dark"] .rx-ks3 .pos small { color: #5FD08E; } [data-theme="dark"] .rx-ks3 .neg b, [data-theme="dark"] .rx-ks3 .neg small { color: #FF7A70; }
.fa-autores { display: grid; gap: 6px; }
.fa-a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.fa-a > span { display: grid; min-width: 0; } .fa-a small { color: var(--muted); font-size: 12px; }
@media (max-width: 560px) { .fa-a { grid-template-columns: 1fr; } }

/* ===== Estadísticas → Sitio web (Google Analytics) ===== */
.ws-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ws-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 16px; }
@media (max-width: 1000px) { .ws-g3, .ws-g2 { grid-template-columns: 1fr; } }
.ws-rows { display: grid; gap: 10px; }
.ws-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; font-size: 13px; }
.ws-row .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ws-row b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ws-row .tr { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ws-row .tr i { display: block; height: 100%; border-radius: 999px; animation: rx-grow .7s var(--ease2) both; transform-origin: left; }
.ws-live { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ws-live .big { font-size: 38px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ws-live .pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--green); animation: ws-pulso 1.6s infinite; }
@keyframes ws-pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.ws-nota { display: grid; gap: 2px; min-width: 240px; max-width: 520px; }
.ws-nota a, .ws-nota b { font-weight: 600; color: var(--text); }
.ws-nota small { color: var(--faint); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-who { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; white-space: nowrap; }
.ws-who b { width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: none; }
.ws-tbl td { vertical-align: middle; }
.ws-rep { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--surface); }
.ws-big { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
@media (max-width: 760px) { .ws-big { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ws-big .rx-big { padding: 14px 16px; min-width: 0; }
.ws-big .rx-big b { font-size: clamp(20px, 2vw, 28px); line-height: 1.15; }
.ws-base td { color: var(--muted); }
.ws-tbl td.r, .ws-tbl th.r { white-space: nowrap; }

/* ===== Celular: estadísticas, Google Cloud e informes ===== */
.rx > *, .rx-g2 > *, .ws-g3 > *, .ws-g2 > * { min-width: 0; }
.rx-g2.ws-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 760px) { .rx-g2.ws-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .rx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rx-kpi { padding: 12px; }
  .rx-kpi .v { font-size: 20px; }
  .rx-kpi .l { font-size: 12px; }
  .rx-kpi .d { font-size: 11px; line-height: 1.35; }
  .rx-ch { flex-wrap: wrap; row-gap: 2px; padding: 12px 14px; }
  .rx-ch > .muted.small { flex-basis: 100%; order: 3; }
  .rx-chips { max-width: 100%; }
  .rx-bar > p { flex-basis: 100%; }
  .rx .fr { flex: 1 1 100%; width: 100%; } .rx .fr-btn .ch { flex: none; margin-left: 0; } .fr, .fr-btn { max-width: 100%; } .rx .fr .fr-btn { width: 100%; }
  .fr-btn [data-fr-txt] { overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; text-align: left; }
  .rx-arow select, .rx-arow form { width: 100%; max-width: 100%; }
  .ws-live .big { font-size: 30px; }
  .ws-nota { min-width: 170px; }
  .rx-tbl th, .rx-tbl td { padding-left: 10px; padding-right: 10px; }
}
.hint code { word-break: break-all; }
.fr-btn .ch { width: auto; flex: none; }

/* ===== Marketing → Campañas ===== */
.cp { display: grid; gap: 16px; }
.cp > * { min-width: 0; }
.cp-ed { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.cp-main { display: grid; gap: 16px; min-width: 0; }
.cp-side { display: grid; gap: 12px; position: sticky; top: 76px; }
@media (max-width: 960px) { .cp-ed { grid-template-columns: minmax(0, 1fr); } .cp-side { position: static; } }
.cp-fl { display: grid; gap: 12px; }
.cp-canales { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-canal, .cp-chip, .cp-tpl { position: relative; }
.cp-canal input, .cp-chip input, .cp-tpl input { position: absolute; left: 0; top: 0; width: 1px !important; height: 1px; min-width: 0; opacity: 0; pointer-events: none; margin: 0; }
.cp-canal span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: 13.5px; }
.cp-canal input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 210px; overflow: auto; padding: 8px 0 2px; }
.cp-chip { position: relative; }
.cp-chip span { display: inline-block; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; background: var(--surface); cursor: pointer; }
.cp-chip input:checked + span { background: var(--yellow-50); border-color: var(--yellow); font-weight: 600; }
.cp-det { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.cp-det > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.cp-tpls { display: grid; gap: 8px; }
.cp-tpl { position: relative; }
.cp-tpl > span { display: grid; gap: 2px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--surface); }
.cp-tpl small { color: var(--muted); } .cp-tpl em { font-style: normal; font-size: 12.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-tpl input:checked + span { border-color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow-50); }
.cp-cuenta .card-body { display: grid; gap: 2px; }
.cp-n { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.cp-prog { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.cp-prog .tr { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .cp-prog .tr i { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.cp-con { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 900px) { .cp-con { grid-template-columns: minmax(0, 1fr); } }
.cp-vars { display: grid; gap: 6px; } .cp-vars > div { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 10px; font-size: 13px; align-items: baseline; } .cp-vars code { word-break: break-all; }
@media (max-width: 640px) { .cp-vars > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.cp-pasos { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.5; font-size: 13.5px; }
.cp-tbl td { vertical-align: middle; }
.cp-tq { width: 100%; }
.cp-tpls { max-height: 380px; overflow: auto; padding: 2px; }
.cp-tpl[hidden] { display: none !important; }

/* ===== Vista previa: nombres en una línea y videos verticales a escala ===== */
.rv-xh b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; max-width: 62%; }
.rv-xh .h { flex: 1 1 0; }
/* Shorts, TikTok y Reels: los íconos y textos crecen y se encogen con el tamaño del video (como en el celular) */
.rv-vt { container-type: inline-size; }
.rv-vt-top { top: 3.5cqw; font-size: max(9px, 4cqw); gap: 4.5cqw; }
.rv-vt-side { right: 2.5cqw; bottom: 22cqw; gap: 4cqw; }
.rv-vt-side svg { width: 7.5cqw !important; height: 7.5cqw !important; }
.rv-vt-side b { font-size: max(8px, 3.1cqw); }
.rv-vt-av { margin-bottom: 1.5cqw; } .rv-vt-av .rv-ava { width: 11cqw; height: 11cqw; }
.rv-vt-av em { width: 5cqw; height: 5cqw; font-size: 3.6cqw; bottom: -2.2cqw; }
.rv-vt .disc { width: 8.5cqw; height: 8.5cqw; border-width: 1.1cqw; }
.rv-vt-cap { padding: 0 17cqw 4cqw 3.5cqw; font-size: max(9px, 3.7cqw); }
.rv-vt-cap > b { font-size: max(10px, 4.2cqw); }
.rv-vt-cap small { font-size: max(8px, 3.3cqw); }
.rv-vert.yt .rv-vt-side { bottom: 25cqw; }
.rv-vt .rv-ych { gap: 2.2cqw; margin-bottom: 1.6cqw; min-width: 0; }
.rv-vt .rv-ych .rv-ava { width: 8cqw; height: 8cqw; font-size: 2.6cqw; flex: none; }
.rv-vt .rv-ych b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: max(9px, 3.6cqw); }
.rv-vt .rv-ych .sub { font-size: max(8px, 3.2cqw); padding: 1.3cqw 3.2cqw; flex: none; }

/* Ingresos de Facebook por fuente (como en Meta) */
.mc-fu { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 4px; }
.mc-fu > div { min-width: 0; background: var(--surface-2); border-radius: 9px; padding: 8px 10px; display: grid; gap: 2px; }
.mc-fu small { font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.mc-fu b { font-size: 15px; font-variant-numeric: tabular-nums; }
.mc-fu em { font-size: 11px; font-style: normal; }

.fa-log { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.fa-log > summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.fa-l { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.fa-l > span { min-width: 0; flex: 1 1 220px; display: grid; gap: 2px; }
.fa-l small { color: var(--muted); font-size: 12px; }
.fa-l em { font-style: normal; font-size: 12.5px; max-width: 100%; }

/* Calendario de redes: cada publicación con un fondo suave del color de su red y el borde del color de su estado */
.rx-ce { --nc: var(--line-strong); background: color-mix(in srgb, var(--nc) 13%, var(--surface)); }
.rx-ce.n-facebook { --nc: #1877F2; } .rx-ce.n-instagram { --nc: #C13584; } .rx-ce.n-twitter { --nc: #6B7280; } .rx-ce.n-threads { --nc: #4B5563; }
.rx-ce.n-linkedin { --nc: #0A66C2; } .rx-ce.n-youtube { --nc: #E62117; } .rx-ce.n-tiktok { --nc: #13B5B1; } .rx-ce.n-gbp { --nc: #34A853; }
.rx-ce:hover { background: color-mix(in srgb, var(--nc) 22%, var(--surface)); }
.rx-ce.prog { --c: #F08A24; } .rx-ce.wait { --c: #E8B500; }
.cal-est { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cal-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; }
.cal-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cal-pill.ok { color: #1E7A47; background: color-mix(in srgb, #2E9E5B 16%, var(--surface)); }
.cal-pill.prog { color: #B5600C; background: color-mix(in srgb, #F08A24 18%, var(--surface)); }
.cal-pill.err { color: #B4342A; background: color-mix(in srgb, #D9483B 16%, var(--surface)); }
.cal-pill.wait { color: #8A6A00; background: color-mix(in srgb, #E8B500 22%, var(--surface)); }
.cal-err { margin: 0; color: var(--red); font-size: 13px; }

.mc-crudo { margin-top: 6px; font-size: 12px; color: var(--muted); }
.mc-crudo summary { cursor: pointer; }
.mc-crudo code { display: block; margin-top: 4px; padding: 8px; border-radius: 8px; background: var(--surface-2); word-break: break-all; white-space: pre-wrap; font-size: 11px; }

/* Calendario: filtros por estado y modo encogido / expandido */
.cal-bar { margin-top: -4px; }
.cal-ver a i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 2px; }
.cal-modo button { min-height: 32px; }
.rx-ce { flex-direction: column; align-items: stretch; gap: 0; }
.rx-ce .ce-c { display: flex; gap: 5px; align-items: center; min-width: 0; }
.rx-ce .ce-x { display: none; }
.rx-ce.extra { display: none; }
.dc.todo .rx-ce.extra, .rx-cal.exp .rx-ce.extra { display: flex; }
.rx-cal.exp [data-cal-mas] { display: none; }
button.rx-more { border: 0; background: none; padding: 2px 4px; text-align: left; cursor: pointer; font: inherit; }
.rx-cal.exp .rx-ce { padding: 7px 8px; border-radius: 9px; }
.rx-cal.exp .rx-ce .ce-c { display: none; }
.rx-cal.exp .rx-ce .ce-x { display: grid; gap: 6px; min-width: 0; }
.ce-h { display: flex; gap: 6px; align-items: center; min-width: 0; }
.ce-h b { font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ce-b { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.ce-t { flex: 1; min-width: 0; font-size: 11.5px; line-height: 1.35; color: var(--text-2, var(--muted)); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: normal !important; }
.ce-b img, .ce-v { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; flex: none; }
.ce-v { display: grid; place-items: center; background: color-mix(in srgb, var(--nc) 30%, var(--surface)); color: var(--text); font-size: 14px; }
.ce-f { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--muted); }
.ce-f span { font-weight: 600; color: var(--c); }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
@media (max-width: 700px) { .rx-cal.exp .rx-ce { padding: 4px; } .rx-cal.exp .ce-t, .rx-cal.exp .ce-h b, .rx-cal.exp .ce-f { display: none; } .rx-cal.exp .ce-h { justify-content: space-between; } .rx-cal.exp .ce-b { display: block; } .rx-cal.exp .ce-b img, .rx-cal.exp .ce-v { width: 100%; height: auto; aspect-ratio: 1; } }
/* Cuentas conectadas agrupadas por red */
.rx-grps { display: flex; flex-direction: column; }
.rx-grp { border-bottom: 1px solid var(--line); }
.rx-grp:last-child { border-bottom: 0; }
.rx-grp > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; user-select: none; }
.rx-grp > summary::-webkit-details-marker { display: none; }
.rx-grp > summary:hover { background: var(--hover, rgba(0,0,0,.03)); }
.rx-grp > summary b { font-weight: 600; }
.rx-grp > summary .muted { font-size: 13px; }
.rx-grp > summary .chev { margin-left: auto; font-size: 20px; line-height: 1; color: var(--muted); transition: transform .15s; }
.rx-grp[open] > summary .chev { transform: rotate(90deg); }
.rx-grp[open] > summary { border-bottom: 1px solid var(--line); }
.rx-grp .rx-acclist .rx-arow { padding-left: 28px; }
@media (max-width: 700px) { .rx-grp .rx-acclist .rx-arow { padding-left: 16px; } }
/* Cuentas conectadas: conexiones en fichas compactas */
.rs-conns2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 16px; }
.rs-tile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.rs-tile .ic { display: flex; gap: 2px; flex: none; }
.rs-tile .tx { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.rs-tile .tx b { font-weight: 600; font-size: 14px; }
.rs-tile .tx small { color: var(--muted); font-size: 12.5px; }
.rs-tile .btn { flex: none; }
.rs-tile.falta { border-style: dashed; }
.rs-tile.falta .tx small { color: var(--warn, #b45309); }
/* Responsive: rejillas con columnas fijadas en línea y elementos que no se encogían */
.form-grid > *, .field, .rx-g2 > *, .rx-inbox > * { min-width: 0; }
.ss-btn { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 760px) {
  .form-grid[style*="grid-template-columns"], .rx-g2[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .rx-inbox { grid-template-columns: minmax(0, 1fr) !important; }
  .rx-chips { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rx-chips::-webkit-scrollbar { display: none; }
  .rx-chips > * { flex: none; }
}
body { overflow-wrap: break-word; }
@media (max-width: 760px) {
  .rx-ibh { flex-wrap: wrap; }
  .rx-ibh .rx-asig-m { right: auto; left: 0; max-width: calc(100vw - 32px); }
}
.rs-ayuda { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--surface-2); }
.rs-ayuda > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.rs-ayuda[open] > summary { margin-bottom: 8px; }
.rs-ayuda .cp-pasos { margin: 0; }
.rx-note > span, .rx-note > div { min-width: 0; }
.rs-ayuda .cp-pasos, .rs-ayuda .cp-pasos li { color: var(--text); opacity: 1; }
/* Vista de una publicación: cabe en el celular y abre/cierra suave */
.rv-modal { transition: opacity .3s cubic-bezier(.2,.8,.2,1), backdrop-filter .3s; }
.rv-mbox { transition: transform .38s cubic-bezier(.16,1,.3,1), opacity .3s ease; opacity: 0; }
.rv-modal.open .rv-mbox { opacity: 1; }
.rv-ml, .rv-mr, .rv-mb, .rv-mb > * { min-width: 0; }
.rv-ml img, .rv-ml video { max-width: 100%; }
@media (max-width: 900px) {
  .rv-mbox { width: 100% !important; max-width: 100vw; grid-template-columns: minmax(0, 1fr); transform: translateY(100%); opacity: 1; transition: transform .42s cubic-bezier(.16,1,.3,1); padding-top: 18px; position: relative; }
  .rv-modal.open .rv-mbox { transform: translateY(0); }
  .rv-mbox::before { content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 99px; background: var(--line-strong); }
  .rv-ml { padding: 12px; }
  .rv-mh { padding: 12px 14px; flex-wrap: wrap; }
  .rv-mb { padding: 12px 14px 22px; }
  .rv-mk { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .rv-rr { grid-template-columns: 26px minmax(70px, 96px) minmax(0, 1fr) 44px; }
  .rv-mbox.arrastrando { transition: none; }
}
@media (prefers-reduced-motion: reduce) { .rv-modal, .rv-mbox { transition: none !important; } }
/* Comentarios: el cuadro de sentimiento no se sale (ocupa dos columnas y sus tres cifras se encogen) */
.rx-ksent { grid-column: span 2; min-width: 0; }
.rx-ks3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rx-ks3 > span { min-width: 0; }
.rx-ks3 b { font-size: clamp(16px, 4.6vw, 20px); white-space: nowrap; }
.rx-ks3 small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-kpi { min-width: 0; }
@media (max-width: 760px) { .rx-ksent { grid-column: 1 / -1; } }
/* La X de cerrar la publicación se queda arriba a la derecha */
@media (max-width: 900px) { .rv-mh { flex-wrap: nowrap; } .rv-mh > :not(.rv-close):not(.btn) { min-width: 0; } .rv-mh h3 { overflow-wrap: anywhere; } }
/* Comentarios: toda la tarjeta abre la publicación */
.rx-ci:has([data-rx-pub]) { cursor: pointer; transition: box-shadow .18s ease, transform .18s ease; }
.rx-ci:has([data-rx-pub]):hover { box-shadow: var(--shadow-lg); }
/* Acciones de cada comentario dentro del panel de la publicación */
.rv-cma { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.rv-cmi .rx-sentbtn { padding: 0; }
/* Computador: la ventana nace del centro de la pantalla y crece suave; al cerrar se encoge al centro */
@media (min-width: 901px) {
  .rv-modal { place-items: center; }
  .rv-mbox { transform: scale(.94); transform-origin: 50% 50%; opacity: 0; transition: transform .34s cubic-bezier(.16,1,.3,1), opacity .22s ease; will-change: transform, opacity; }
  .rv-modal.open .rv-mbox { transform: scale(1); opacity: 1; }
  .rv-modal:not(.open) .rv-mbox { transition: transform .2s ease-in, opacity .18s ease-in; }
}
/* Público: en el celular (o con más de 6 cuentas) se escoge la cuenta en una lista con buscador */
.pb-sel { min-width: 240px; max-width: 100%; }
.pb-sel.movil { display: none; }
@media (max-width: 760px) {
  .pb .rx-ch { flex-wrap: wrap; }
  .pb .pb-tabs { display: none; }
  .pb-sel, .pb-sel.movil { display: block; width: 100%; min-width: 0; }
}
/* Navegación suave: mientras llega el contenido nuevo, la página se atenúa un poco (sin saltar) */
main.content { transition: opacity .18s ease; }
main.content.sa-cargando { opacity: .55; pointer-events: none; }
.rx-lk td.r, .rx-lk th.r { text-align: right; white-space: nowrap; } .rx-lk th .rv-net { vertical-align: middle; }

/* Ordenar el menú: dejar presionado un panel y arrastrarlo dentro de su sección */
.nav-item[data-href] { -webkit-touch-callout: none; user-select: none; }
.nav-edit .nav-item[data-href] { animation: sa-tiembla .26s ease-in-out infinite alternate; animation-delay: var(--d, 0s); cursor: grab; touch-action: none; }
.nav-edit .nav-item[data-href]::after { content: ''; position: absolute; right: 8px; top: 50%; width: 10px; height: 8px; margin-top: -4px; background: linear-gradient(currentColor 0 0) 0 0/100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 50%/100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 100%/100% 2px no-repeat; opacity: .45; }
.nav-edit .nav-item.nav-drag { animation: none; cursor: grabbing; z-index: 5; background: var(--navy-700); color: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); transition: box-shadow .15s; }
.nav-edit .nav-label { opacity: .85; }
.nav-edit .nav-group { border-radius: 10px; outline: 1px dashed rgba(255, 255, 255, .14); outline-offset: 2px; }
@keyframes sa-tiembla { from { transform: rotate(-1.1deg); } to { transform: rotate(1.1deg); } }
@media (prefers-reduced-motion: reduce) { .nav-edit .nav-item[data-href] { animation: none; outline: 1px dashed rgba(255, 255, 255, .25); } }
.nav-edit-bar { position: sticky; bottom: 10px; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); padding: 8px 10px; border-radius: 10px; background: var(--yellow); color: #00153C; font-size: 12.5px; font-weight: 600; animation: sa-baja .2s ease-out; }
.nav-edit-bar button { border: 0; border-radius: 7px; background: #00153C; color: #fff; font: inherit; font-size: 12.5px; padding: 4px 10px; cursor: pointer; }
@keyframes sa-baja { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.nav-mini .nav-edit-bar span { display: none; }
.nav-mini .nav-edit-bar { justify-content: center; padding: 6px; }
.nav-mini .nav-edit .nav-item[data-href]::after { display: none; }
.nav-edit .nav-count { display: none; }

/* Etiquetas con @ en el compositor */
.rx-ed { position: relative; }
.mx-pop { position: absolute; left: 10px; right: 10px; z-index: 40; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow-lg); max-height: 340px; overflow-y: auto; animation: mx-sale .14s ease-out; }
@keyframes mx-sale { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.mx-sec { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.mx-op { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--text); font: inherit; }
.mx-op:hover, .mx-op.on { background: var(--yellow-50); }
.mx-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; object-fit: cover; background: var(--navy-700); color: #fff; font-weight: 700; font-size: 11px; }
.mx-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mx-n { font-weight: 600; font-size: 13.5px; }
.mx-u { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-v { color: var(--blue); font-size: 11px; }
.mx-seg { color: var(--faint); font-size: 11.5px; white-space: nowrap; }
.mx-pill { font-size: 11px; border-radius: 999px; padding: 2px 8px; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.mx-pill.ok { background: var(--green-50); color: var(--green); }
.mx-pill.cost { background: var(--orange-50); color: var(--orange); }
.mx-bus { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 13px; }
.mx-bus > span:first-child { flex: 1; min-width: 140px; }
.mx-pie { padding: 8px 12px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); }
.mx-pie.sin { border-top: 0; }

/* Etiquetas (@usuario) en las vistas previas, con el color de cada red */
.rv-prev .mn { color: var(--pv-link); font-weight: 600; cursor: pointer; }
.rv-prev .mn:hover { text-decoration: underline; }
.rv-x .mn { color: #1D9BF0; font-weight: 400; }
.rv-igcap .mn { color: #00376B; font-weight: 400; }
.rv-th .mn { color: #0095F6; font-weight: 400; }
.rv-pfb .mn { color: #0064D1; font-weight: 600; }
.rv-pli .mn { color: #0A66C2; font-weight: 600; }
.rv-vt-cap .mn { color: #fff; font-weight: 700; }
:root[data-theme="dark"] .rv-igcap .mn { color: #E0F1FF; }
:root[data-theme="dark"] .rv-th .mn { color: #4CB5F9; }
:root[data-theme="dark"] .rv-pfb .mn { color: #4EA8F0; }
:root[data-theme="dark"] .rv-pli .mn { color: #70B5F9; }
.mx-v { vertical-align: -3px; margin-left: 2px; flex: none; }
.rx-act { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .rx-act small { font-size: 11.5px; }
.rx-mnota { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); width: 100%; }
/* Link in bio: lista de publicaciones desplegable */
.rs-bio-pubs { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.rs-bio-pubs > summary { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; }
.rs-bio-pubs > summary::after { content: '▾'; margin-left: auto; color: var(--muted); transition: transform .2s var(--ease-out, ease); }
.rs-bio-pubs[open] > summary::after { transform: rotate(180deg); }
/* Portada del video: tira de cuadros con recuadro que se arrastra (como en Instagram) */
.rx-tira { position: relative; height: 64px; border-radius: 10px; overflow: visible; cursor: grab; touch-action: none; user-select: none; outline: none; }
.rx-tira.on { cursor: grabbing; }
.rx-tira-f { position: absolute; inset: 6px 0; display: flex; border-radius: 8px; overflow: hidden; background: var(--line); }
.rx-tira-f i { flex: 1; background: #1b1f27 center / cover no-repeat; opacity: .55; transition: opacity .2s var(--ease-out, ease); }
.rx-tira:hover .rx-tira-f i { opacity: .7; }
.rx-tira-sel { position: absolute; top: 0; left: 0; height: 64px; aspect-ratio: 9 / 16; border-radius: 8px; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 6px 18px rgba(0,0,0,.35); background: #000; overflow: hidden; will-change: transform; transition: box-shadow .2s, scale .15s; }
.rx-tira-sel span { display: block; width: 100%; height: 100%; background: center / cover no-repeat; }
.rx-tira.on .rx-tira-sel { scale: 1.08; box-shadow: 0 0 0 2px var(--yellow), 0 10px 24px rgba(0,0,0,.4); }
.rx-tira:focus-visible .rx-tira-sel { box-shadow: 0 0 0 3px var(--yellow); }
.rx-tira-t { display: flex; justify-content: space-between; gap: 8px; }
.rx-tira-t b { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
/* Video publicado reproduciéndose dentro de la ventana de estadísticas */
.rv-vivo-c { background: #000; display: grid; place-items: center; animation: rx-in .3s var(--ease2, ease); }
.rv-vivo-c video.rv-vivo { width: 100%; height: 100%; max-height: 72vh; object-fit: contain; display: block; background: #000; }
.rv-vivo-c iframe.rv-vivo { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.rv-vivo-c.tt iframe.rv-vivo { aspect-ratio: 9 / 16; max-height: 72vh; }
/* Ajustes → Consumo de APIs */
.api-h { display: inline-flex; align-items: center; gap: 8px; }
.api-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.api-r b { font-variant-numeric: tabular-nums; text-align: right; }
.api-r small { grid-column: 1 / -1; }
.api-mod { margin-top: 8px; } .api-mod > summary { color: var(--muted); padding: 4px 0; }
.api-b { margin-top: 12px; display: flex; justify-content: flex-end; }
/* Marketing → Monitoreo de medios */
.mo-form { display: grid; gap: 12px; max-width: 640px; }
.mo-form .field small { display: block; margin-top: 4px; }
.mo-q { display: block; font-size: 11.5px; white-space: normal; word-break: break-word; background: var(--surface-2, #F4F5F8); padding: 6px 8px; border-radius: 6px; margin: 6px 0; color: var(--muted); }
.mo-temas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.mo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-weight: 600; font-size: 13px; text-decoration: none; transition: background .15s, border-color .15s; }
.mo-chip small { color: var(--muted); font-weight: 500; } .mo-chip b { color: var(--muted); font-weight: 600; }
.mo-chip.on { background: var(--yellow); border-color: var(--yellow); color: #111; } .mo-chip.on small, .mo-chip.on b { color: #333; }
.mo-chip.off { opacity: .55; }
.mo-filtros .sp, .mo-m-h .sp { flex: 1; }
.mo-ya { display: flex; align-items: center; gap: 10px; margin: -6px 0 14px; flex-wrap: wrap; }
.mo-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-bottom: 16px; }
.mo-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line); margin: 8px 0 6px; }
.mo-bar i { display: block; } .mo-bar .pos { background: #1E9E61; } .mo-bar .neu { background: #A9B1C2; } .mo-bar .neg { background: #D63B3B; } .mo-bar .sin { background: var(--line); }
.mo-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .mo-g { grid-template-columns: 1fr; } }
.mo-feed { display: grid; gap: 10px; }
.mo-m { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; animation: rx-in .3s var(--ease2, ease); }
.mo-m-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.mo-t { font-size: 15.5px; font-weight: 700; color: var(--text); text-decoration: none; line-height: 1.35; }
.mo-t:hover { text-decoration: underline; }
.mo-m p { margin: 0; }
.mo-sel select { height: 28px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 12px; font-weight: 600; background: var(--surface); color: var(--text); }
.mo-m .mo-sel select.s-pos { background-color: #E3F6EC; color: #13784A; border-color: #BFE8D2; } .mo-m .mo-sel select.s-neg { background-color: #FDE7E7; color: #B42525; border-color: #F6C5C5; } .mo-m .mo-sel select.s-neu { background-color: var(--line); }
.mo-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; width: 26px; height: 26px; border-radius: 50%; }
.mo-x:hover { background: var(--line); color: var(--text); }
.mo-side { display: grid; gap: 16px; }
.mo-graf .b { fill: var(--yellow); } .mo-graf .ax { stroke: var(--line-strong); } .mo-graf text { font-size: 10px; fill: var(--muted); }
.mo-med { display: grid; grid-template-columns: minmax(0, 1fr) 34px; grid-template-rows: auto 6px; gap: 3px 8px; font-size: 13px; color: var(--text); text-decoration: none; margin-bottom: 8px; }
.mo-med span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mo-med b { text-align: right; grid-row: 1; grid-column: 2; }
.mo-med i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #0E7C70; min-width: 4px; }
.mo-med:hover span { text-decoration: underline; }
.mo-tema { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mo-tema small { display: block; }
.mo-acc { display: flex; gap: 4px; flex-wrap: wrap; } .mo-acc form { margin: 0; }
/* Descuento en % o en valor fijo (cotizaciones) */
.desc-in { display: flex; gap: 6px; align-items: stretch; }
.desc-in > span { flex: 1; min-width: 0; display: flex; } .desc-in > span input { width: 100%; }
.desc-in[data-desc-tipo="pct"] [data-desc="valor"], .desc-in[data-desc-tipo="valor"] [data-desc="pct"] { display: none; }
.desc-in select { width: auto; flex: none; }
.qe-dt { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); border-radius: 6px; font-weight: 700; min-width: 28px; height: 28px; cursor: pointer; margin-left: 4px; transition: background .15s; }
.qe-dt:hover { background: var(--yellow); border-color: var(--yellow); color: #111; }
.qe-dv input { width: 92px !important; }

.rv-telegram { --c: #229ED9; }
/* Vista previa del canal de Telegram */
.rv-tg { padding: 0; }
.rv-tg-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--pv-line); }
.rv-tg-h small { display: block; color: var(--pv-sub); font-size: 12px; }
.rv-tg-chat { background: linear-gradient(160deg, #C9E6B4, #8FC7A0); padding: 14px 12px 16px; }
:root[data-theme="dark"] .rv-tg-chat { background: linear-gradient(160deg, #1E3B2D, #12261D); }
.rv-tg-msg { background: var(--pv-bg); border-radius: 12px 12px 12px 4px; overflow: hidden; max-width: 94%; box-shadow: 0 1px 1px rgba(0,0,0,.12); }
.rv-tg-msg .rv-txt { padding: 8px 10px 0; white-space: pre-wrap; font-size: 14px; }
.rv-tg-msg .rv-txt a { color: #2481CC; }
.rv-tg-link { margin: 8px 10px 0; border-left: 3px solid #2481CC; padding: 4px 8px; display: grid; gap: 2px; font-size: 13px; background: rgba(36,129,204,.07); border-radius: 4px; }
.rv-tg-link img { width: 100%; border-radius: 6px; max-height: 200px; object-fit: cover; margin-bottom: 4px; }
.rv-tg-link b { color: #2481CC; font-size: 12.5px; }
.rv-tg-t { display: block; text-align: right; color: var(--pv-sub); font-size: 11px; padding: 2px 10px 6px; }

/* Google Cloud: canales que se abren con el detalle de fuentes */
.ws-det > summary { list-style: none; cursor: pointer; }
.ws-det > summary::-webkit-details-marker { display: none; }
.ws-det > summary .t::before { content: '▸ '; color: var(--muted); }
.ws-det[open] > summary .t::before { content: '▾ '; }
.ws-sub { margin: 4px 0 10px 14px; padding-left: 10px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ws-sub p { margin: 0 0 4px; }
.ws-sub > div { display: flex; justify-content: space-between; gap: 10px; }
.ws-sub > div span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }

.rx-por-actual { position: relative; }
.rx-por-tag { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 6px; }
/* Globo de ayuda de los "?" */
.sa-tip { position: absolute; z-index: 9999; max-width: min(300px, calc(100vw - 16px)); background: #ECEEF2; color: #17203A; border: 1px solid #D3D8E0; font-size: 12.5px; line-height: 1.4; font-weight: 500; padding: 8px 10px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); pointer-events: none; white-space: normal; text-align: left; }
.sa-tip[hidden] { display: none; }
.q[data-ayuda], .q[tabindex] { cursor: help; }
.q:focus-visible { outline: 2px solid var(--accent, #2563C9); outline-offset: 2px; }
[data-theme="dark"] .sa-tip { background: #2E3648; color: #E3E8F1; border-color: #3C465C; }
/* Una cuenta del banco por dentro (Contabilidad → Balance general → Abrir cuenta) */
.bg-acc-open { display: block; color: inherit; text-decoration: none; border-radius: 10px; margin: -6px; padding: 6px; transition: background .15s; }
.bg-acc-open:hover { background: var(--surface-2); }
.bg-acc-ver { font-size: 12.5px; font-weight: 600; color: var(--blue, #2563C9); }
.bk { max-width: 760px; margin: 0 auto; display: grid; gap: 14px; }
.bk-back { font-size: 13px; color: var(--muted); text-decoration: none; }
.bk-hero { background: linear-gradient(135deg, #00153C, #1B2E63); color: #fff; border-radius: 20px; padding: 22px 22px 18px; display: grid; gap: 4px; box-shadow: var(--shadow); }
.bk-id { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.bk-id b { display: block; font-size: 16px; }
.bk-id small { color: rgba(255,255,255,.7); font-size: 12.5px; }
.bk-l { font-size: 12px; text-transform: uppercase; letter-spacing: .7px; color: rgba(255,255,255,.7); font-weight: 700; }
.bk-saldo { font-size: clamp(30px, 7vw, 42px); font-weight: 800; letter-spacing: -.5px; line-height: 1.1; }
.bk-sub { font-size: 12.5px; color: rgba(255,255,255,.75); }
.bk-flow { display: flex; gap: 22px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.15); }
.bk-flow small { display: block; font-size: 11.5px; color: rgba(255,255,255,.65); }
.bk-flow .in { color: #6EE7B7; } .bk-flow .out { color: #FCA5A5; }
.bk-warn { margin: 0; background: #FEF3F2; color: #B42318; border: 1px solid #FECDCA; border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.bk-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); min-width: 0; }
.bk-card h3 { margin: 0 0 12px; font-size: 15px; }
.bk-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-2); gap: 2px; }
.bk-bar i { display: block; height: 100%; }
.bk-leg { display: grid; gap: 10px; margin-top: 14px; }
.bk-leg > div { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; }
.bk-leg .dot { width: 10px; height: 10px; border-radius: 50%; }
.bk-leg small { display: block; color: var(--muted); font-size: 12px; }
.bk-leg .neg, .bk-pk .neg { color: var(--red); }
.bk-pks { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.bk-pk { border: 1px solid var(--line); border-radius: 14px; padding: 12px; text-decoration: none; color: inherit; display: grid; gap: 2px; background: var(--surface-2); transition: border-color .15s, transform .15s; }
.bk-pk:hover { border-color: #7C3AED; transform: translateY(-1px); }
.bk-pk span { font-size: 13px; color: var(--muted); font-weight: 600; }
.bk-pk b { font-size: 18px; }
.bk-pk small { font-size: 11.5px; color: var(--faint); }
.bk-mh { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.bk-mh h3 { margin: 0; }
.bk-mes select { min-width: 190px; }
.bk-dia { font-size: 12px; font-weight: 700; color: var(--muted); padding: 14px 0 6px; border-bottom: 1px solid var(--line); }
.bk-mv { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
a.bk-mv:hover { background: var(--surface-2); }
.bk-ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; background: var(--surface-2); }
.bk-ico.in { background: #DCFCE7; color: #0E7C66; } .bk-ico.gasto { background: #FEE2E2; color: #B42318; } .bk-ico.eq { background: #DBEAFE; } .bk-ico.prov { background: #FEF3C7; } .bk-ico.tr { background: #EDE9FE; color: #6D28D9; }
.bk-tx { min-width: 0; }
.bk-tx b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-tx small, .bk-am small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.bk-am { text-align: right; }
.bk-am b { font-size: 14.5px; } .bk-am .in { color: #0E7C66; } .bk-am .out { color: var(--text); }
[data-theme="dark"] .bk-ico.in { background: #12352B; } [data-theme="dark"] .bk-ico.gasto { background: #3B1C1C; } [data-theme="dark"] .bk-ico.eq { background: #1B2B4A; } [data-theme="dark"] .bk-ico.prov { background: #3A2E12; } [data-theme="dark"] .bk-ico.tr { background: #2A2147; }
[data-theme="dark"] .bk-warn { background: #3B1C1C; border-color: #5C2626; color: #FCA5A5; }
[data-theme="dark"] .bk-am .in { color: #6EE7B7; }
.bk-dia::first-letter { text-transform: uppercase; }

/* Editar la distribución de una orden */
.rp-ed { display: grid; gap: 6px; max-width: 560px; }
.rp-ed h4 { margin: 12px 0 2px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.rp-ed-r { display: grid; grid-template-columns: 1fr 180px; gap: 10px; align-items: center; }
.rp-ed-r input { margin: 0; }
.rp-ed-tot { display: flex; gap: 12px; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); max-width: 560px; }
.rp-ed-tot b { font-size: 18px; }
@media (max-width: 520px) { .rp-ed-r { grid-template-columns: 1fr 130px; } }


/* Nómina: órdenes que se pagan (chips como en Bigin), datos para pagar y pagos registrados */
.pg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; cursor: pointer; background: var(--surface); transition: background .12s, border-color .12s; user-select: none; }
.pg-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pg-chip span { font-weight: 600; }
.pg-chip small { color: var(--muted); font-size: 11.5px; }
.pg-chip:hover { border-color: var(--line-strong); }
.pg-chip:has(input:checked) { background: #E8EEFC; border-color: #2A62CE; color: #1B3F94; }
.pg-chip:has(input:checked) small { color: #1B3F94; }
.pg-chip:has(input:focus-visible) { outline: 2px solid #2A62CE; outline-offset: 2px; }
[data-theme="dark"] .pg-chip:has(input:checked) { background: #1B2B4A; border-color: #5B8DEF; color: #CFE0FF; }
.pg-datos, .pg-pagos { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.pg-datos-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 6px; }
.pg-datos-l { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-dato { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; padding: 4px 8px; font: inherit; font-size: 12.5px; cursor: pointer; color: inherit; }
.pg-dato span { color: var(--muted); }
.pg-dato:hover { border-color: var(--line-strong); }
.pg-dato.ok { border-color: #0E7C66; }
.pg-pago { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pg-pago:last-child { border-bottom: 0; }
.pg-pago-i b { display: block; font-size: 14px; }
.pg-pago-i small { color: var(--muted); font-size: 12px; }
.pg-pago-a { display: flex; gap: 6px; flex-wrap: wrap; }
.env-ico.env-cliq { background: #0B9A6C; }

/* ---------- Google Cloud → Autores más leídos ---------- */
.au-rank { display: grid; gap: 12px; }
.au-row { display: grid; grid-template-columns: 30px minmax(150px, 220px) minmax(0, 1fr) auto 52px; gap: 12px; align-items: center; font-size: 13.5px; }
.au-row b { font-variant-numeric: tabular-nums; }
.au-m { font-size: 18px; text-align: center; }
.au-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; }
.au-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.au-bar i { display: block; height: 100%; border-radius: 999px; animation: rx-grow .7s var(--ease2) both; transform-origin: left; }
.au-p { text-align: right; }
.au-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.au-card .rx-ch { gap: 8px; }
.au-notas { margin: 0; padding: 0; list-style: none; counter-reset: au; display: grid; gap: 10px; font-size: 13px; }
.au-notas li { counter-increment: au; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; }
.au-notas li::before { content: counter(au) "."; color: var(--faint); font-variant-numeric: tabular-nums; }
.au-notas b { font-variant-numeric: tabular-nums; }
.au-notas a { color: var(--text); font-weight: 500; }
@media (max-width: 700px) { .au-row { grid-template-columns: 26px minmax(0, 1fr) auto; } .au-row .au-bar { grid-column: 2 / -1; grid-row: 2; } .au-row .au-p { display: none; } }

/* ---------- Órdenes de Fórum → Ajustar lo que incluye ---------- */
.ent-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0; }
.ent-incluye > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ent-incluye > summary::-webkit-details-marker { display: none; }
.ent-inc-form + .ent-inc-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.ent-inc-rows { display: grid; gap: 8px; }
.ent-inc-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }
.ent-inc-row > * { min-width: 0; width: 100%; max-width: 100%; }
.ent-incluye { min-width: 0; max-width: 100%; }
@media (max-width: 600px) { .ent-inc-row { grid-template-columns: minmax(0, 1fr) 96px; } }

/* Tarjetas plegables (data-plegar): el encabezado abre y cierra la tarjeta */
[data-plegar] > .rx-ch, [data-plegar] > .card-head { cursor: pointer; user-select: none; }
[data-plegar] > .rx-ch::after, [data-plegar] > .card-head::after { content: ''; flex: none; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--muted, #8a93a6); border-bottom: 2px solid var(--muted, #8a93a6); transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
[data-plegar].plegada > .rx-ch::after, [data-plegar].plegada > .card-head::after { transform: translateY(1px) rotate(-45deg); }
[data-plegar].plegada > :not(.rx-ch):not(.card-head) { display: none; }
[data-plegar].plegada > .rx-ch, [data-plegar].plegada > .card-head { border-bottom-color: transparent; }
[data-plegar] > .rx-ch:focus-visible, [data-plegar] > .card-head:focus-visible { outline: 2px solid var(--accent, #F5B800); outline-offset: -2px; }
.rx-ia-top { background: var(--surface); }

/* ---------- Marketing → Calendario clientes ---------- */
.cc-nuevo { padding: 16px 18px; margin-bottom: 16px; }
.cc-nuevof { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.cc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cc-card { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; color: inherit; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.cc-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.cc-card.on { border: 2px solid var(--yellow); padding: 13px; }
.cc-cardt { display: flex; align-items: center; gap: 10px; }
.cc-cardt .av { width: 36px; height: 36px; border-radius: 50%; background: var(--yellow-50); color: var(--navy); display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.cc-cardt b { display: block; } .cc-cardt small { color: var(--muted); }
.cc-bar { display: block; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; } .cc-bar i { display: block; height: 100%; background: var(--green); border-radius: 6px; }
.cc-cardf { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.cc-cardf em { font-style: normal; font-weight: 600; } .cc-cardf em.sug { color: var(--orange); } .cc-cardf em.ok { color: var(--green); }
.cc-cal { overflow: hidden; }
.cc-calh { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.cc-calh h2 { margin: 0; font-size: 18px; }
.cc-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cc-fil { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 0; align-items: center; }
.cc-fil a:not(.btn) { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 20px; padding: 6px 12px; font-size: 13px; color: var(--text); text-decoration: none; min-height: 34px; box-sizing: border-box; }
.cc-fil a.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.cc-fil .cc-add { margin-left: auto; }
.cc-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--faint); }
.cc-dot.wait { background: var(--yellow-600); } .cc-dot.sug { background: var(--orange); } .cc-dot.ok { background: var(--green); } .cc-dot.prod { background: var(--blue); } .cc-dot.pub { background: var(--muted); }
.cc-body { display: flex; flex-wrap: wrap; gap: 18px; padding: 16px 18px 20px; }
.cc-gridw { flex: 999 1 560px; min-width: 0; overflow-x: auto; }
.cc-grid { min-width: 640px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cc-dh { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); text-align: center; padding: 4px 0; }
.cc-day { min-height: 96px; border: 1px solid var(--line); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); min-width: 0; }
.cc-day.fuera { background: var(--surface-2); border-style: dashed; }
.cc-day.hoy { border-color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); }
.cc-dn { font-size: 12px; font-weight: 700; color: var(--text); text-decoration: none; align-self: flex-start; border-radius: 6px; padding: 0 4px; }
.cc-dn:hover { background: var(--yellow-50); }
.cc-chip { display: flex; align-items: center; gap: 5px; border-radius: 7px; padding: 4px 6px; font-size: 12px; font-weight: 600; text-decoration: none; border: 1px solid transparent; min-width: 0; transition: transform .15s ease, box-shadow .15s ease; }
.cc-chip span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 21, 60, .12); }
.cc-chip.sel { border: 2px solid var(--navy); padding: 3px 5px; }
.cc-chip.wait { background: var(--yellow-50); color: #6E5200; } .cc-chip.sug { background: var(--orange-50); color: #7A4510; } .cc-chip.ok { background: var(--green-50); color: #0B5E43; } .cc-chip.prod { background: var(--blue-50); color: #1D4E9E; } .cc-chip.pub { background: var(--surface-2); color: var(--muted); }
.cc-icos { display: inline-flex; flex: none; } .cc-icos .cc-ico + .cc-ico { margin-left: -4px; box-shadow: 0 0 0 1.5px var(--surface); }
.cc-ico { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #fff; font-size: 8px; font-weight: 800; text-transform: uppercase; flex: none; }
.cc-ico.g { width: 26px; height: 26px; font-size: 10px; }
.cc-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cc-det { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.cc-det h3 { margin: 0; font-size: 16px; }
.cc-det-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cc-est { font-size: 12px; font-weight: 700; border-radius: 20px; padding: 2px 10px; }
.cc-est.wait { background: var(--yellow-50); color: #6E5200; } .cc-est.sug { background: var(--orange-50); color: #7A4510; } .cc-est.ok { background: var(--green-50); color: #0B5E43; } .cc-est.prod { background: var(--blue-50); color: #1D4E9E; } .cc-est.pub { background: var(--line); color: var(--text); } .cc-est.act { background: var(--blue-50); color: #1D4E9E; }
.cc-sug { background: var(--orange-50); border-radius: 10px; padding: 10px 12px; } .cc-sug small { font-weight: 700; color: #7A4510; } .cc-sug p { margin: 4px 0 0; color: #3A2A10; }
.cc-copys { display: flex; flex-direction: column; gap: 8px; }
.cc-copy { display: flex; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; } .cc-copy .cc-ico { width: 20px; height: 20px; font-size: 9px; margin-top: 1px; }
.cc-copy p { margin: 3px 0 0; white-space: pre-line; font-size: 13px; }
.cc-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cc-editar > summary { cursor: pointer; font-weight: 600; color: var(--blue); }
.cc-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.cc-f2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.cc-redesf { display: flex; flex-direction: column; gap: 6px; }
.cc-redf { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.cc-redf > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; list-style: none; }
.cc-redf > summary::-webkit-details-marker { display: none; }
.cc-redf textarea, .cc-redf input { width: 100%; box-sizing: border-box; margin-top: 8px; }
.cc-box { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.cc-box.ok { border-color: #CDEBDD; } .cc-box.ok .cc-boxh { background: var(--green-50); color: #0B5E43; }
.cc-box.prod .cc-boxh { background: var(--blue-50); color: #1D4E9E; }
.cc-boxh { display: flex; align-items: center; gap: 8px; padding: 10px 14px; } .cc-boxh span { margin-left: auto; font-weight: 700; }
.cc-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); }
.cc-row a { flex: 1; min-width: 0; color: inherit; text-decoration: none; } .cc-row a b { display: block; font-size: 13px; } .cc-row a small { color: var(--muted); }
.cc-pad { margin: 0; padding: 12px 14px; }
.cc-ev { list-style: none; margin: 0; padding: 4px 14px 12px; display: grid; gap: 8px; font-size: 13px; } .cc-ev li { display: flex; gap: 8px; } .cc-ev .cc-dot { margin-top: 6px; }

/* Enlace del cliente */
.ccp-body { background: #F4F5F8; }
.ccp { font-size: 15px; line-height: 1.5; color: #17203A; min-height: 100vh; background: #F4F5F8; }
.ccp-h { background: #00153C; color: #fff; padding: 22px max(16px, 4vw) 72px; }
.ccp-in { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.ccp-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .ccp-top span { margin-left: auto; font-size: 13px; color: #C9D2E6; }
.ccp-logo { font-size: 18px; font-weight: 800; }
.ccp-k { font-size: 12px; letter-spacing: .1em; color: #FFB400; font-weight: 700; text-transform: uppercase; }
.ccp-h h1 { margin: 0; font-size: 32px; font-weight: 800; color: #fff; }
.ccp-h p { margin: 0; color: #C9D2E6; max-width: 62ch; }
.ccp-main { max-width: 880px; margin: -52px auto 0; padding: 0 max(16px, 4vw) 48px; display: flex; flex-direction: column; gap: 14px; }
.ccp-res { background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 21, 60, .10); padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ccp-n b { font-size: 26px; color: #00153C; } .ccp-n span { color: #5F6B82; }
.ccp-bar { height: 10px; border-radius: 10px; background: #E3E6EC; overflow: hidden; margin-top: 8px; } .ccp-bar i { display: block; height: 100%; background: #12805C; border-radius: 10px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.ccp-listo { margin: 0; font-weight: 700; color: #0B5E43; background: #E3F5EE; border-radius: 12px; padding: 12px 16px; }
.ccp-nombre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: #3A4560; }
.ccp-nombre input { font: inherit; border: 1px solid #CDD2DB; border-radius: 10px; padding: 8px 12px; background: #fff; color: #17203A; flex: 0 1 260px; }
.ccp-toast { align-self: center; background: #00153C; color: #fff; border-radius: 30px; padding: 10px 18px; font-weight: 600; font-size: 14px; opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; position: sticky; top: 12px; z-index: 5; }
.ccp-toast:empty { display: none; } .ccp-toast.on { opacity: 1; transform: none; } .ccp-toast.err { background: #C93838; }
.ccp-sem { display: flex; flex-direction: column; gap: 10px; }
.ccp-sem h2 { margin: 10px 0 0; font-size: 13px; letter-spacing: .08em; color: #5F6B82; font-weight: 700; text-transform: uppercase; }
.ccp-pz { background: #fff; border: 1px solid #E3E6EC; border-radius: 16px; padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 14px; overflow: hidden; transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1), max-height .45s ease .12s, padding .45s ease .12s, margin .45s ease .12s, border-width .45s ease .12s; }
.ccp-pz.sale { background: #E3F5EE; border-color: #CDEBDD; }
.ccp-pz.fuera { opacity: 0; transform: translateX(70px) scale(.95); max-height: 0 !important; padding-top: 0; padding-bottom: 0; margin: -5px 0; border-width: 0; }
.ccp-fecha { flex: none; width: 58px; text-align: center; background: #F8F9FB; border-radius: 12px; padding: 8px 0; align-self: flex-start; }
.ccp-fecha small { display: block; font-size: 11px; font-weight: 700; color: #5F6B82; } .ccp-fecha b { font-size: 24px; color: #00153C; line-height: 1.1; }
.ccp-cuerpo { flex: 1 1 300px; min-width: 0; }
.ccp-meta { font-size: 13px; font-weight: 600; color: #3A4560; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ccp-tag { font-size: 12px; font-weight: 700; border-radius: 20px; padding: 2px 9px; } .ccp-tag.act { color: #1D4E9E; background: #E7EFFC; } .ccp-tag.sug { color: #8A4F0E; background: #FBE8D0; }
.ccp-pz h3 { margin: 6px 0 10px; font-size: 18px; color: #00153C; }
.ccp-copys { display: flex; flex-direction: column; gap: 8px; }
.ccp-copy { display: flex; gap: 10px; background: #F8F9FB; border-radius: 12px; padding: 10px 12px; } .ccp-copy small { font-size: 12px; font-weight: 700; color: #3A4560; } .ccp-copy p { margin: 2px 0 0; white-space: pre-line; max-width: 62ch; }
.ccp-botones { flex: 1 1 170px; max-width: 200px; display: flex; flex-direction: column; gap: 8px; align-self: center; }
.ccp-botones[hidden] { display: none; }
.ccp-btn { font: inherit; font-weight: 700; border-radius: 12px; padding: 11px 16px; cursor: pointer; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; }
.ccp-btn.ok { background: #12805C; color: #fff; } .ccp-btn.nav { background: #00153C; color: #fff; } .ccp-btn.ghost { background: #fff; color: #00153C; border: 1px solid #CDD2DB; font-weight: 600; }
.ccp-btn:hover { filter: brightness(.96); } .ccp-btn:disabled { opacity: .6; cursor: default; }
.ccp-btn:focus-visible, .ccp textarea:focus, .ccp select:focus, .ccp input:focus { outline: 2px solid #FFB400; outline-offset: 2px; }
.ccp-sugf { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.ccp-sugf label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.ccp-sugf select, .ccp-sugf textarea { font: inherit; font-weight: 400; border: 1px solid #CDD2DB; border-radius: 10px; padding: 9px 12px; background: #fff; color: #17203A; }
.ccp-sugf select { max-width: 260px; }
.ccp-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ccp-ya { background: #fff; border: 1px solid #E3E6EC; border-radius: 14px; padding: 14px 18px; margin-top: 8px; } .ccp-ya summary { cursor: pointer; font-weight: 700; color: #00153C; } .ccp-ya ul { margin: 10px 0 0; padding-left: 18px; color: #3A4560; display: grid; gap: 4px; }
.ccp-pie { margin: 8px 0 0; text-align: center; font-size: 13px; color: #5F6B82; }
@media (max-width: 560px) { .ccp-botones { max-width: none; flex-direction: row; } .ccp-botones .ccp-btn { flex: 1; } .ccp-h h1 { font-size: 27px; } }
@media (prefers-reduced-motion: reduce) { .ccp-pz, .ccp-bar i, .ccp-toast { transition: none; } }
.ccp-sugf[hidden] { display: none; }
/* Calendario clientes ↔ Proyectos */
.cc-chip.done { background: #DDF3F1; color: #0E5C55; } .cc-est.done { background: #DDF3F1; color: #0E5C55; } .cc-dot.done { background: #14A39A; }
.cc-box.done .cc-boxh { background: #DDF3F1; color: #0E5C55; }
.cc-tarea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--blue-50); color: #1D4E9E; border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.cc-tarea a { margin-left: auto; font-weight: 600; } .cc-tarea.sin { background: var(--surface); border: 1px dashed var(--line-strong); color: var(--muted); }
.cc-aviso { margin: 14px 18px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.cc-aviso form { display: inline-flex; gap: 8px; flex-wrap: wrap; } .cc-aviso select { max-width: 280px; }
.cc-reglas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; }
.cc-desc { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; } .cc-desc small { font-weight: 700; color: var(--muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; } .cc-desc p { margin: 3px 0 0; white-space: pre-line; font-size: 13px; }
.ccp-desc { margin: -4px 0 12px; color: #3A4560; white-space: pre-line; max-width: 62ch; }
.cc-pilar { display: inline-block; font-size: 12px; font-weight: 700; background: #EFE9FC; color: #5A3FA8; border-radius: 20px; padding: 2px 10px; }
.ccp-tag.pil { color: #5A3FA8; background: #EFE9FC; }
.ccp-copy.gen { margin-bottom: 8px; background: #FFF6DE; }

/* Enlace del cliente v2: tarjetas en cuadrícula (horizontal en computador) y copys por pestañas */
.ccp-in, .ccp-main { max-width: 1240px; }
.ccp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; align-items: stretch; }
.ccp-pz { flex-direction: column; flex-wrap: nowrap; gap: 12px; padding: 16px; transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease; }
.ccp-pz:hover { box-shadow: 0 8px 24px rgba(0, 21, 60, .08); }
.ccp-pz.fuera { opacity: 0; transform: translateY(-14px) scale(.9); max-height: none !important; padding: 16px; margin: 0; border-width: 1px; }
.ccp-ph { display: flex; gap: 12px; align-items: flex-start; }
.ccp-fecha { width: 52px; padding: 6px 0; }
.ccp-fecha b { font-size: 22px; }
.ccp-hd { min-width: 0; flex: 1; }
.ccp-meta { gap: 6px; font-size: 12.5px; }
.ccp-pz h3 { margin: 4px 0 0; font-size: 17px; line-height: 1.3; }
.ccp-desc { margin: 0; font-size: 14px; color: #3A4560; }
.ccp-cd { border-top: 1px solid #E3E6EC; padding-top: 10px; }
.ccp-cd > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; font-weight: 700; color: #00153C; font-size: 14px; min-height: 40px; }
.ccp-cd > summary::-webkit-details-marker { display: none; }
.ccp-cd > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid #5F6B82; border-bottom: 2px solid #5F6B82; transform: rotate(45deg) translateY(-2px); margin-left: auto; transition: transform .2s ease; }
.ccp-cd[open] > summary::after { transform: rotate(-135deg); }
.ccp-cd-icos { display: inline-flex; } .ccp-cd-icos .cc-ico + .cc-ico { margin-left: -4px; box-shadow: 0 0 0 1.5px #fff; }
.ccp-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.ccp-tab { font: inherit; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #E3E6EC; background: #fff; color: #3A4560; border-radius: 20px; padding: 6px 11px; cursor: pointer; min-height: 34px; }
.ccp-tab.on { background: #00153C; border-color: #00153C; color: #fff; }
.ccp-panel { background: #F8F9FB; border-radius: 12px; padding: 10px 12px; } .ccp-panel small { display: block; font-size: 12px; font-weight: 700; color: #3A4560; } .ccp-panel p { margin: 0; white-space: pre-line; font-size: 14px; }
.ccp-pz .ccp-sugf { margin-top: 0; }
.ccp-botones { flex: none; max-width: none; flex-direction: row; margin-top: auto; align-self: stretch; }
.ccp-botones .ccp-btn { flex: 1; min-height: 44px; padding: 10px 12px; }
@media (min-width: 900px) { .ccp-cd > summary { display: none; } .ccp-cd { border-top: 0; padding-top: 0; } }
@media (max-width: 560px) { .ccp-grid { grid-template-columns: minmax(0, 1fr); } }
img.ccp-logo { height: 30px; width: auto; display: block; }
.cc-redes-sel { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-redchk { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 20px; padding: 5px 10px; font-size: 13px; cursor: pointer; background: var(--surface); }
.cc-redchk:has(input:checked) { border-color: var(--navy); background: var(--blue-50); }
.ccp-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #2563C9; text-decoration: none; background: #E7EFFC; border-radius: 10px; padding: 7px 11px; align-self: flex-start; max-width: 100%; }
.ccp-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Mesa de noticias · Revisión y videos */
.nw-cnt { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--red, #B3261E); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.nw-rv { padding: 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.nw-rv-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nw-rv-top .sp { flex: 1; }
.nw-rv-why { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 6px; background: var(--surface-2); color: var(--text); }
.nw-rv-t { margin: 0; font-size: 16px; line-height: 1.3; }
.nw-rv-firmas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nw-rv-firma { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; font-weight: 600; }
.nw-rv-firma.ok { background: var(--green-50); color: var(--green); }
.nw-rv-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 10px; }
.nw-rv-dec > summary { list-style: none; cursor: pointer; }
.nw-rv-dec > summary::-webkit-details-marker { display: none; }
.nw-rv-dec[open] { flex-basis: 100%; }
.nw-rv-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.nw-rv-form textarea { height: auto; }
.nw-rv-hist summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.nw-rv-ev { font-size: 13px; padding: 6px 8px; border-radius: 8px; margin-top: 4px; }
.nw-rv-ev.com { background: var(--surface-2); }
.nw-rv-sec { margin-bottom: 14px; }
.nw-btn-ok { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
.nw-vk-wrap { overflow-x: auto; }
.nw-vk { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; min-width: 900px; }
.nw-vk-col { background: var(--surface-2); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.nw-vk-card { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; color: inherit; text-decoration: none; }
.nw-vk-card:hover { border-color: var(--navy); }
.nw-kpi { padding: 12px 14px; display: flex; flex-direction: column; }
.nw-kpi small { color: var(--muted); }
.nw-kpi b { font-size: 22px; }
.nw-enl { display: grid; gap: 6px; }
.nw-enl-row { display: grid; grid-template-columns: minmax(130px, 190px) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.nw-enl-row:has(> :nth-child(2):last-child) { grid-template-columns: minmax(130px, 190px) minmax(0, 1fr); }
.nw-up { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .nw-up > :first-child { flex: 1 1 220px; min-width: 0; }
.nw-vf { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.nw-vf-h { font-size: 14px; margin: 16px 0 6px; }
.nw-vf-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.nw-vf-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
@media (max-width: 900px) { .nw-vf { grid-template-columns: minmax(0, 1fr); } .nw-enl-row { grid-template-columns: minmax(0, 1fr); } }
.nw-rv-texto { max-width: 72ch; margin-top: 8px; display: flex; flex-direction: column; gap: 10px; line-height: 1.6; }
.nw-rv-texto p { margin: 0; white-space: pre-line; }
/* Instrucciones para diseño / edición (solo el equipo) */
.cc-instr { display: flex; flex-direction: column; gap: 6px; border-color: var(--accent, #e2b719); border-style: dashed; }
.cc-instr small .muted { text-transform: none; letter-spacing: 0; font-weight: 500; }
.cc-instr textarea { width: 100%; min-height: 64px; resize: vertical; font-size: 13px; line-height: 1.45; box-sizing: border-box; }
.cc-instr .cc-acts { align-items: center; gap: 8px; flex-wrap: wrap; }
/* Calendario de clientes: arrastrar piezas entre días */
.cc-chip[draggable="true"] { cursor: grab; }
.cc-chip.cc-arrastrando { opacity: .45; }
.cc-day.cc-sobre { outline: 2px dashed var(--accent, #e2b719); outline-offset: -2px; background: color-mix(in srgb, var(--accent, #e2b719) 10%, var(--surface)); }
.cc-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); opacity: 0; background: #00153c; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 21, 60, .25); transition: opacity .2s ease, transform .2s ease; z-index: 9999; max-width: calc(100vw - 32px); }
.cc-toast.in { opacity: 1; transform: translate(-50%, 0); }
.cc-toast.mal { background: #b42318; }
/* Calendario de clientes: ficha de la pieza en ventana (como las tareas) */
.cc-fov .nwf { width: min(880px, 100%); }
.cc-fst.ok { border-color: #A8DCC4; background: var(--green-50); color: var(--green); }
.cc-fst.sug { border-color: #F0D98A; background: #FFF6DE; color: #7A5600; }
.cc-fst.prod, .cc-fst.pub { border-color: var(--line-strong); background: var(--blue-50); color: var(--blue); }
.cc-ftit { margin: 2px 0 0; font-size: 20px; line-height: 1.3; text-wrap: balance; }
.cc-fbox { margin: 0 0 12px 30px; }
.cc-fbtns { margin: 0 0 4px 30px; flex-wrap: wrap; gap: 6px; }
.cc-ficha .cc-instr { margin-left: 30px; border: 1px dashed var(--accent, #e2b719); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.cc-ficha .nwf-desc .cc-desc { margin-bottom: 8px; }
.cc-ficha .cc-copys { display: flex; flex-direction: column; gap: 8px; }
.cc-fev { margin-left: 30px; }
.cc-ficha .cc-editar > summary { list-style: none; }
.cc-ficha .cc-editar > summary::-webkit-details-marker { display: none; }
@media (max-width: 640px) { .cc-fov { padding: 0; } .cc-fov .nwf { max-height: 100vh; height: 100%; border-radius: 0; } .cc-ficha .nwf-sep { display: none; } .nwf-desc, .cc-fbox, .cc-fbtns, .cc-ficha .cc-instr, .cc-fev { margin-left: 0; } }
.cc-fst.wait { border-color: var(--line-strong); background: var(--surface); color: var(--muted); }
.cc-fst.done { border-color: #A8DCC4; background: var(--green-50); color: var(--green); }
.cc-ficha a.nwf-x { display: grid; place-items: center; text-decoration: none; font-size: 20px; line-height: 1; color: var(--text); }
/* Ficha de la pieza editable en el sitio (como Zoho ToDo) */
.cc-ficha .cc-hf-f { display: contents; }
.cc-ficha select.nwf-st { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.cc-ficha label.nwf-hf { cursor: pointer; }
.cc-ficha .cc-hf-in, .cc-ficha label.nwf-hf select, .cc-ficha label.nwf-hf .dp-view, .cc-ficha label.nwf-hf input:not([type=hidden]) { border: 1px solid transparent; background: transparent; font: inherit; font-weight: 500; font-size: 14px; color: var(--text); padding: 2px 4px; margin: 0 -4px; border-radius: 6px; min-width: 0; max-width: 190px; height: auto; box-shadow: none; }
.cc-ficha label.nwf-hf :is(input, select):hover { border-color: var(--line); }
.cc-ficha label.nwf-hf :is(input, select):focus { outline: none; border-color: var(--line-strong); background: var(--surface); }
.cc-ed { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.55; background: var(--surface); color: var(--text); resize: none; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
.cc-ed:hover { border-color: var(--line-strong); }
.cc-ed:focus { outline: none; border-color: var(--accent, #e2b719); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #e2b719) 22%, transparent); }
.cc-ed::placeholder { color: var(--faint, #9aa3b5); }
.cc-ed-tit { border-color: transparent; font-size: 20px; font-weight: 700; padding: 4px 8px; margin-left: -8px; line-height: 1.3; }
.cc-ed-instr { border-style: dashed; border-color: var(--accent, #e2b719); }
.cc-pill-in { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border-radius: 6px; padding: 2px 4px 2px 8px; font-size: 12.5px; color: var(--muted); }
.cc-pill-in input { border: 0; background: transparent; font: inherit; color: var(--text); width: 110px; padding: 2px 4px; height: auto; }
.cc-pill-in input:focus { outline: none; background: var(--surface); border-radius: 4px; }
.cc-fcopys .cc-copy { align-items: flex-start; }
.cc-fcopys .cc-copy > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cc-ico.gen { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); display: inline-grid; place-items: center; font-size: 12px; flex: 0 0 auto; }
.cc-avisar-hint { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px 30px; padding: 9px 12px; border-radius: 10px; background: #FFF6DE; color: #7A5600; font-size: 13px; }
.cc-avisar-hint[hidden] { display: none; }
.cc-guardado { position: sticky; top: 0; float: right; margin: -8px -10px 0 0; font-size: 12px; font-weight: 600; color: var(--green); opacity: 0; transition: opacity .2s ease; pointer-events: none; z-index: 2; background: var(--surface); padding: 2px 8px; border-radius: 6px; }
.cc-guardado.on { opacity: 1; }
.cc-guardado.mal { color: #b42318; }
.cc-fcom { display: flex; gap: 8px; padding: 12px 22px; border-top: 1px solid var(--line); background: var(--surface); }
.cc-fcom .input { flex: 1; }
.cc-fev li.com .cc-com { display: block; background: var(--surface-2); border-radius: 8px; padding: 6px 10px; margin: 3px 0; white-space: pre-wrap; }
.cc-dot.com { background: var(--blue, #2563eb); }
@media (max-width: 640px) { .cc-avisar-hint { margin-left: 0; } .cc-ficha .nwf-acts { width: 100%; justify-content: flex-end; } }
/* Ficha: los selectores (estado y responsable) con el estilo de Zoho ToDo */
.cc-ficha .nwf-h { gap: 10px 14px; }
.cc-ficha .nwf-h .ss:has(> select.nwf-st) .ss-btn { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-weight: 600; font-size: 14px; padding: 8px 30px 8px 14px; border-radius: 8px; height: auto; min-height: 0; }
.cc-ficha .nwf-h .ss:has(> select.cc-fst.ok) .ss-btn, .cc-ficha .nwf-h .ss:has(> select.cc-fst.done) .ss-btn { border-color: #A8DCC4; background: var(--green-50); color: var(--green); }
.cc-ficha .nwf-h .ss:has(> select.cc-fst.sug) .ss-btn { border-color: #F0D98A; background: #FFF6DE; color: #7A5600; }
.cc-ficha .nwf-h .ss:has(> select.cc-fst.prod) .ss-btn, .cc-ficha .nwf-h .ss:has(> select.cc-fst.pub) .ss-btn { border-color: #B9CCF5; background: var(--blue-50); color: var(--blue); }
.cc-ficha label.nwf-hf .ss { width: auto; }
.cc-ficha label.nwf-hf .ss-btn { border: 1px solid transparent; background: transparent; box-shadow: none; padding: 2px 22px 2px 4px; margin: 0 -4px; height: auto; min-height: 0; font-weight: 500; font-size: 14px; width: auto; max-width: 200px; }
.cc-ficha label.nwf-hf .ss-btn:hover { border-color: var(--line); }
.cc-ficha label.nwf-hf .dp-input { width: 110px; }
.cc-ficha label.nwf-hf input[list] { width: 120px; }
.cc-fcopys .cc-copy > div > b + .muted { margin-top: -2px; }
/* Ficha: diseño / video para el cliente */
.cc-arch { display: flex; flex-direction: column; gap: 10px; }
.cc-arch-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cc-arch-l:empty { display: none; }
.cc-arch-i { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface-2); display: flex; flex-direction: column; }
.cc-arch-i img, .cc-arch-i video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: #000; max-width: 100%; }
.cc-arch-doc { display: grid; place-items: center; aspect-ratio: 4 / 5; font-size: 34px; text-decoration: none; }
.cc-arch-i figcaption { padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; min-width: 0; }
.cc-arch-i figcaption > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cc-arch-i .link-btn.danger { color: #b42318; font-size: 12px; padding: 0; align-self: flex-start; }
.cc-arch-up { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1.5px dashed var(--line-strong); border-radius: 10px; padding: 14px; cursor: pointer; text-align: center; font-weight: 600; font-size: 13.5px; color: var(--text); }
.cc-arch-up:hover { border-color: var(--accent, #e2b719); background: color-mix(in srgb, var(--accent, #e2b719) 8%, transparent); }
.cc-arch-up small { font-weight: 400; }
.cc-arch-prog { position: relative; height: 26px; border-radius: 8px; background: var(--surface-2); overflow: hidden; font-size: 12.5px; }
.cc-arch-prog i { position: absolute; inset: 0 auto 0 0; width: 0; background: color-mix(in srgb, var(--accent, #e2b719) 45%, transparent); transition: width .2s ease; }
.cc-arch-prog span { position: relative; display: block; padding: 4px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-arch-prog.mal span { color: #b42318; }
.cc-dis { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; background: var(--surface-2); }
.cc-dis.ok { background: var(--green-50); color: var(--green); }
.cc-dis.sug { background: #FFF6DE; color: #7A5600; }
/* Enlace del cliente: diseños para aprobar */
.ccp-dis-intro { margin: -6px 0 12px; color: #5b6478; font-size: 14px; }
.ccp-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 10px 0; }
.ccp-gal img, .ccp-gal video { width: 100%; max-width: 100%; border-radius: 10px; display: block; background: #000; aspect-ratio: 4 / 5; object-fit: cover; }
.ccp-gal video { object-fit: contain; }
.ccp-gal:has(> video:only-child) { grid-template-columns: 1fr; }
.ccp-gal:has(> video:only-child) video { aspect-ratio: 9 / 16; max-height: 70vh; }
.ccp-doc { display: block; padding: 10px; border: 1px solid #e3e6ee; border-radius: 10px; text-decoration: none; }
.cc-avisar-hint { align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--surface-2); color: var(--text); }
.cc-avisar-bt { display: inline-flex; gap: 6px; }
/* Calendario de clientes: menú al tocar un día */
.cc-day[data-fecha] { cursor: pointer; }
.cc-dmenu { position: fixed; z-index: 95; min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 21, 60, .18); padding: 6px; opacity: 0; transform: translateY(-4px) scale(.97); transform-origin: top left; transition: opacity .16s ease, transform .16s cubic-bezier(.2, .8, .2, 1); }
.cc-dmenu.in { opacity: 1; transform: none; }
.cc-dmenu small { display: block; padding: 4px 10px 6px; font-size: 11.5px; color: var(--muted); }
.cc-dmenu-it { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: var(--text); font-weight: 600; font-size: 14px; }
.cc-dmenu-it:hover, .cc-dmenu-it:focus { background: color-mix(in srgb, var(--accent, #e2b719) 16%, transparent); outline: none; }
.cc-dmenu-ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--accent, #e2b719); color: #00153c; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .cc-dmenu { transition: none; } }
/* Pieza nueva en ventana */
.cc-nueva { display: contents; }
.cc-nueva-pie { align-items: center; }
.cc-nueva-pie .sp { flex: 1; }
.cc-ficha .cc-redes-sel { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-ficha .cc-redchk { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 12px 5px 6px; cursor: pointer; font-size: 13.5px; font-weight: 500; transition: background .15s ease, border-color .15s ease; }
.cc-ficha .cc-redchk input { position: absolute; opacity: 0; pointer-events: none; }
.cc-ficha .cc-redchk:has(input:checked) { border-color: var(--accent, #e2b719); background: color-mix(in srgb, var(--accent, #e2b719) 16%, transparent); font-weight: 600; }
.cc-ficha .cc-copy[hidden] { display: none; }
.cc-ed-fmt { padding: 6px 10px; font-size: 13px; }
.cc-ficha textarea.cc-ed { min-height: 46px; }
.cc-ficha textarea.cc-ed-tit { min-height: 38px; }
.cc-ficha label.nwf-hf .dp-input { width: 128px; }
.cc-ficha label.nwf-hf input[list] { width: 160px; }
/* Listas estilo Bigin dentro de la ficha */
.cc-pill-in .ss { width: auto; }
.cc-pill-in .ss-btn { border: 0; background: transparent; min-height: 0; height: auto; padding: 2px 22px 2px 4px; font-size: 12.5px; color: var(--text); width: auto; min-width: 70px; }
.cc-ficha .cc-copy .ss-btn { min-height: 34px; font-size: 13px; }
.cc-ficha .ss-box input[type=search] { border: 1px solid var(--line-strong); background: var(--surface); max-width: none; width: 100%; margin: 0; padding: 7px 10px; font-weight: 400; box-sizing: border-box; }
/* Ficha: menú ⋯ (avisar al cliente, borrar) */
.cc-mas { position: relative; }
.cc-mas > summary { list-style: none; display: grid; place-items: center; cursor: pointer; font-size: 18px; line-height: 1; color: var(--text); }
.cc-mas > summary::-webkit-details-marker { display: none; }
.cc-mas-m { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 250px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 21, 60, .18); padding: 6px; animation: ccMas .16s cubic-bezier(.2, .8, .2, 1); }
.cc-mas-m form { margin: 0; }
.cc-mas-it { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; text-align: left; padding: 9px 10px; border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
.cc-mas-it:hover { background: var(--surface-2); }
.cc-mas-it.danger { color: #b42318; }
@keyframes ccMas { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cc-ficha .nwf { overflow: visible; }
.cc-arch.cc-sobre-arch .cc-arch-up, .cc-sobre-arch { border-color: var(--accent, #e2b719); background: color-mix(in srgb, var(--accent, #e2b719) 10%, transparent); }
.env-modal { z-index: 120; }
/* Revisión: decididas esta semana en corto */
.nw-dec { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.nw-dec-f { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
.nw-dec-f:first-child { border-top: 0; }
.nw-dec-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-dec-t a { color: var(--text); text-decoration: none; }
.nw-dec-t a:hover { text-decoration: underline; }
.nw-dec-f small { white-space: nowrap; }
.nw-dec-f.frenada .nw-dec-t { color: var(--muted); }
.nw-dec-mas { margin-top: 6px; }
.nw-dec-mas > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--blue, #2563eb); padding: 4px 2px; }
.nw-dec-mas[open] > summary { margin-bottom: 6px; }
@media (max-width: 640px) { .nw-dec-f { grid-template-columns: auto minmax(0, 1fr); } .nw-dec-f small { grid-column: 2; } }