/* ==========================================================================
   WhatsMarketing · Estructura 2026 del panel de 2015 (menú, barra y componentes)
   Traslada las maquetas de design/app/masivas/ al panel real. Solo se carga con
   el interruptor wm2026 (customized/parts/wm2026-switch.php) y body.wm2026-shell.
   Componentes con prefijo mv- para no chocar con Materialize.
   ========================================================================== */

body.wm2026-shell {
  --bg: #F7F3F6; --surface: #FFFFFF; --surface-alt: #FBF3F8; --surface-hover: #FEF6FA; --surface-sunken: #F1EBEF;
  --border: #EEE3EB; --border-strong: #E0D2DB; --border-hover: #EFC1DC;
  --text: #241E22; --text-secondary: #4C4650; --text-tertiary: #8A8189;
  --primary: #C81591; --primary-hover: #AD0F7A; --primary-tint: #FBE6F2; --primary-ring: rgba(200, 21, 145, .28);
  --secondary: #F37648; --secondary-tint: #FDEBE3;
  --success: #1F9D6B; --success-tint: #E3F6EC; --warn: #C88A15; --warn-tint: #FBF1E0;
  --danger: #D6322B; --danger-tint: #FBE7E6; --info: #2B6CB0; --info-tint: #E6F0FA; --whatsapp: #25D366;
  --side-bg: #1F1B1F; --side-text: #D8D2D6; --side-border: #3A333A; --side-active: rgba(200, 21, 145, .22);
  --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-headline: 'Space Grotesk', 'Geist', sans-serif;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --sh-sm: 0 1px 2px rgba(36, 30, 34, .06); --sh-md: 0 8px 24px rgba(36, 30, 34, .08); --sh-lg: 0 20px 48px rgba(36, 30, 34, .12);
  --side-w: 248px;
  background: var(--bg) !important;
  font-size: 14px;
}

/* ---------- maquetación general: menú fijo + barra + contenido ---------- */
body.wm2026-shell #main {
  padding-left: var(--side-w) !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  min-height: calc(100vh - 60px);
}
body.wm2026-shell #main .content-wrapper-before { display: none !important; }
body.wm2026-shell #main > .row > .col.s12 { padding: 0 !important; }
body.wm2026-shell #main .container { width: 100% !important; max-width: 1180px; margin: 0 auto; padding: 0 28px; }
body.wm2026-shell #main .section { padding-top: 0; }
body.wm2026-shell #breadcrumbs-wrapper { padding: 26px 0 14px !important; }
body.wm2026-shell #breadcrumbs-wrapper .container { padding: 0 28px; }
body.wm2026-shell #breadcrumbs-wrapper .breadcrumbs-title,
body.wm2026-shell #breadcrumbs-wrapper .breadcrumbs-title span { font-size: 1.6rem !important; font-weight: 700; color: var(--text) !important; }
body.wm2026-shell .vertical-modern-dashboard > .col.l10.offset-l1 { width: 100% !important; margin-left: 0 !important; }
body.wm2026-shell footer.page-footer { margin-left: var(--side-w); padding-top: 0 !important; background: transparent !important; }
body.wm2026-shell footer.page-footer > .container { display: none; }
body.wm2026-shell footer.page-footer .footer-copyright { background: transparent !important; color: var(--text-tertiary) !important; padding: 18px 28px 26px; }
body.wm2026-shell footer.page-footer .footer-copyright a { color: var(--text-tertiary) !important; }

/* ---------- menú lateral ---------- */
.mv-side {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--side-w); z-index: 998;
  background: var(--side-bg); color: var(--side-text); display: flex; flex-direction: column;
  border-right: 1px solid var(--side-border); font-family: var(--font-body);
}
.mv-brand { padding: 16px 18px 14px; border-bottom: 1px solid var(--side-border); display: flex; align-items: center; gap: 10px; }
.mv-brand img { height: 38px; width: auto; display: block; }
.mv-brand span { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8F8790; line-height: 1.3; }
.mv-nav { flex: 1; overflow-y: auto; padding: 8px 12px; scrollbar-width: thin; scrollbar-color: #4A424A transparent; }
.mv-group { font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #8F8790; padding: 14px 10px 6px; }
body.wm2026-shell .mv-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  color: var(--side-text) !important; font-size: .88rem; font-weight: 500; text-decoration: none; line-height: 1.35;
}
body.wm2026-shell .mv-link:hover { background: rgba(255, 255, 255, .06); color: #fff !important; }
body.wm2026-shell .mv-link[aria-current="page"] { background: var(--side-active); color: #fff !important; }
.mv-link .ico { font-size: 18px; width: 20px; text-align: center; flex-shrink: 0; color: #A79FA6; }
.mv-link[aria-current="page"] .ico { color: #FF7AD0; }
.mv-side-foot { padding: 12px; border-top: 1px solid var(--side-border); }
body.wm2026-shell .mv-back { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: #fff !important; font-size: .82rem; font-weight: 600; text-decoration: none; }
body.wm2026-shell .mv-back:hover { background: rgba(255, 255, 255, .1); }
.mv-box { margin: 10px 0; border-radius: 14px; padding: 4px 6px 8px; border: 1px solid var(--side-border); }
.mv-box .mv-group { padding: 10px 8px 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mv-box-destacada { background: rgba(255, 255, 255, .045); border-color: #4A424A; box-shadow: inset 3px 0 0 var(--primary); }
.mv-box-destacada .mv-group { color: #fff; letter-spacing: .07em; }
.mv-box-destacada.is-here { background: rgba(200, 21, 145, .12); border-color: rgba(200, 21, 145, .55); }
.mv-box-neutra { background: transparent; }
.mv-group em { font-style: normal; font-size: .58rem; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: var(--secondary); color: #fff; text-transform: none; }
.mv-credbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 2px 4px 8px; padding: 8px 6px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid var(--side-border); }
.mv-credbar span { font-size: .6rem; color: #8F8790; text-align: center; line-height: 1.3; }
.mv-credbar b { display: block; font-family: var(--font-headline); font-size: .78rem; color: #fff; }
.mv-side-velo { display: none; }

/* ---------- barra superior ---------- */
.mv-top {
  position: sticky; top: 0; z-index: 997; margin-left: var(--side-w);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 28px; background: var(--surface); border-bottom: 1px solid var(--border); font-family: var(--font-body);
}
.mv-top-izq { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mv-top .crumbs { font-size: .8rem; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-top .crumbs b { color: var(--text); font-weight: 600; }
.mv-credit { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--text-secondary); }
.mv-credit > b { font-family: var(--font-headline); font-size: 1rem; color: var(--text); }
.mv-credit .notification-button { position: relative; }
.mv-credit .notification-badge { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; border-radius: 999px; background: var(--primary); color: #fff; font-size: .62rem; font-style: normal; }
.mv-credit .material-icons { font-size: 20px; line-height: 1; }
.mv-menu-btn { display: none; border: 0; background: transparent; padding: 6px; border-radius: 8px; color: var(--text); cursor: pointer; }
.mv-top .dropdown-content { min-width: 200px; }
body.wm2026-shell #notifications-dropdown { width: 360px !important; max-width: 92vw; }

/* ---------- componentes de las maquetas ---------- */
body.wm2026-shell .mv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body);
  font-weight: 600; font-size: .875rem; line-height: 1; padding: 11px 18px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s;
  height: auto; text-transform: none; box-shadow: none;
}
body.wm2026-shell .mv-btn-primary { background: var(--primary); color: #fff !important; }
body.wm2026-shell .mv-btn-primary:hover { background: var(--primary-hover); }
body.wm2026-shell .mv-btn-sec { background: var(--surface); color: var(--text) !important; border-color: var(--border-strong); }
body.wm2026-shell .mv-btn-sec:hover { border-color: var(--primary); color: var(--primary) !important; }
body.wm2026-shell .mv-btn-ghost { background: transparent; color: var(--text-secondary) !important; }
body.wm2026-shell .mv-btn-ghost:hover { background: var(--surface-alt); color: var(--text) !important; }
body.wm2026-shell .mv-btn-sm { padding: 7px 12px; font-size: .8rem; border-radius: 8px; }
body.wm2026-shell .mv-btn[disabled], body.wm2026-shell .mv-btn:disabled { opacity: .55; cursor: not-allowed; }

.mv-content { padding: 26px 28px 40px; max-width: 1180px; width: 100%; margin: 0 auto; font-family: var(--font-body); color: var(--text); }
.mv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
body.wm2026-shell .mv-head h1 { font-family: var(--font-headline) !important; font-size: 1.6rem; font-weight: 700; margin: 0; line-height: 1.2; color: var(--text); letter-spacing: -.01em; }
.mv-head p { color: var(--text-secondary); margin: 4px 0 0; max-width: 60ch; }
body.wm2026-shell .mv-content h2, body.wm2026-shell .mv-content h3 { font-family: var(--font-headline) !important; margin: 0; line-height: 1.25; color: var(--text); }
body.wm2026-shell .mv-content h2 { font-size: 1.25rem; font-weight: 700; }
body.wm2026-shell .mv-content h3 { font-size: 1.05rem; font-weight: 600; }

.mv-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sh-sm); }
.mv-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.mv-card-head p { color: var(--text-secondary); font-size: .85rem; margin: 2px 0 0; }
.mv-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; min-width: 0; }
.mv-stat .mv-label { font-size: .8rem; font-weight: 500; color: var(--text-secondary); }
.mv-stat .mv-value { font-family: var(--font-headline); font-size: 1.7rem; font-weight: 700; margin-top: 4px; color: var(--text); overflow-wrap: anywhere; }
.mv-stat .mv-delta { font-size: .78rem; font-weight: 600; margin-top: 6px; color: var(--text-tertiary); }
.mv-stat .mv-delta.up { color: var(--success); }
.mv-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; line-height: 1.4; background: var(--surface-alt); color: var(--text-secondary); border: 1px solid var(--border); white-space: nowrap; }
.mv-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mv-badge-success { background: var(--success-tint); color: var(--success); border-color: transparent; }
.mv-badge-warn { background: var(--warn-tint); color: var(--warn); border-color: transparent; }
.mv-badge-danger { background: var(--danger-tint); color: var(--danger); border-color: transparent; }
.mv-badge-info { background: var(--info-tint); color: var(--info); border-color: transparent; }
.mv-badge-primary { background: var(--primary-tint); color: var(--primary); border-color: transparent; }
.mv-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: .86rem; line-height: 1.5; }
.mv-alert a { font-weight: 600; text-decoration: underline; color: inherit !important; }
.mv-alert-info { background: var(--info-tint); color: var(--info); }
.mv-alert-warn { background: var(--warn-tint); color: #8A5D07; }
.mv-alert-danger { background: var(--danger-tint); color: var(--danger); }
.mv-alert-success { background: var(--success-tint); color: var(--success); }
.mv-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
body.wm2026-shell .mv-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
body.wm2026-shell .mv-table th { text-align: left; padding: 11px 14px; background: var(--surface-alt); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); border-bottom: 1px solid var(--border); white-space: nowrap; border-radius: 0; }
body.wm2026-shell .mv-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
body.wm2026-shell .mv-table tr:last-child td { border-bottom: 0; }
.mv-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mv-muted { color: var(--text-secondary); }

/* dashboard */
.mv-dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.mv-promo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: center; background: linear-gradient(120deg, var(--primary-tint), var(--secondary-tint)); border: 0; margin-bottom: 16px; }
body.wm2026-shell .mv-promo h2 { font-size: 1.35rem; margin: 10px 0 8px; }
.mv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mv-chips span { font-size: .74rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.mv-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.wm2026-shell .mv-quick a { display: block; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); color: inherit !important; text-decoration: none; transition: border-color .15s, transform .15s; }
body.wm2026-shell .mv-quick a:hover { border-color: var(--primary); transform: translateY(-2px); }
.mv-quick b { display: block; margin-bottom: 4px; color: var(--text); }
.mv-quick small { color: var(--text-secondary); font-size: .8rem; }
.mv-quick .ico { font-size: 22px; display: block; margin-bottom: 8px; color: var(--primary); }

/* ---------- móvil ---------- */
@media (max-width: 992px) {
  body.wm2026-shell { --side-w: 0px; }
  .mv-side { width: 270px; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--sh-lg); }
  .mv-side.is-open { transform: none; }
  .mv-side-velo.is-open { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 996; }
  .mv-menu-btn { display: inline-flex; }
  .mv-top { padding: 10px 16px; gap: 10px; }
  .mv-top .crumbs { max-width: 40vw; }
  .mv-credit { gap: 6px; }
  .mv-credit-txt { display: none; }
  .mv-content, body.wm2026-shell #main .container, body.wm2026-shell #breadcrumbs-wrapper .container { padding-left: 16px; padding-right: 16px; }
  .mv-dash, .mv-quick, .mv-grid-3 { grid-template-columns: 1fr; }
  .mv-promo { grid-template-columns: 1fr; }
  .mv-head .mv-btn { width: 100%; }
}
@media (max-width: 480px) {
  .mv-top .crumbs { display: none; }
}

/* ---------- crear campaña (maqueta crear.html) ---------- */
.mv-steps { display: flex; gap: 8px; margin-bottom: 22px; counter-reset: paso; }
body.wm2026-shell .mv-step { flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); font-weight: 600; font-size: .86rem; color: var(--text-secondary) !important; text-decoration: none; }
body.wm2026-shell .mv-step:hover { border-color: var(--border-hover); }
.mv-step::before { counter-increment: paso; content: counter(paso); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunken); font-family: var(--font-headline); font-size: .8rem; color: var(--text-secondary); flex-shrink: 0; }
body.wm2026-shell .mv-step.is-done { color: var(--text) !important; }
.mv-step.is-done::before { content: '✓'; background: var(--success-tint); color: var(--success); }
body.wm2026-shell .mv-step.is-now { border-color: var(--primary); color: var(--text) !important; box-shadow: 0 0 0 3px var(--primary-tint); }
.mv-step.is-now::before { background: var(--primary); color: #fff; }
.mv-step small { display: block; font-weight: 400; font-size: .74rem; color: var(--text-tertiary); }
.mv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.mv-layout > * { min-width: 0; }
.mv-section { scroll-margin-top: 80px; }
.mv-section + .mv-section { margin-top: 16px; }
.mv-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); font-family: var(--font-headline); font-size: .8rem; font-weight: 700; margin-right: 8px; vertical-align: 2px; }
.mv-privacy { display: flex; gap: 6px; align-items: center; font-size: .78rem; color: var(--text-secondary); margin: 12px 0 0; }
.mv-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.mv-actions-der { display: flex; gap: 10px; flex-wrap: wrap; }
.mv-preview { position: sticky; top: 76px; }
.mv-sep { height: 1px; background: var(--border); margin: 16px 0 12px; }
.mv-summary { display: grid; gap: 8px; margin-top: 10px; font-size: .84rem; }
.mv-summary div { display: flex; justify-content: space-between; gap: 12px; }
.mv-summary span { color: var(--text-secondary); }
.mv-summary b { text-align: right; overflow-wrap: anywhere; }
body.wm2026-shell .mv-crear .help { font-size: .78rem; color: var(--text-tertiary); margin: 8px 0 0; }

/* campos de Materialize dentro de las tarjetas del rediseño */
body.wm2026-shell .mv-section .input-field { margin: 14px 0 18px; }
body.wm2026-shell .mv-section p { margin: 6px 0; }
body.wm2026-shell .mv-section .file-field .btn { height: 40px; line-height: 40px; border-radius: 10px; }
body.wm2026-shell .mv-section .file-field .btn span { text-transform: none; }
body.wm2026-shell .mv-section textarea#text { min-height: 180px; padding: 12px; border: 1.5px solid var(--border-strong) !important; border-radius: 10px; background: var(--surface); box-shadow: none !important; }
body.wm2026-shell .mv-section textarea#text:focus { border-color: var(--primary) !important; }
body.wm2026-shell .mv-section .cta_button_div h2 { font-size: 1rem !important; margin: 12px 0 0; }
body.wm2026-shell .mv-section .form_Control { border: 1.5px solid var(--border-strong) !important; border-radius: 10px; padding: 0 12px !important; height: 40px; box-sizing: border-box; background: var(--surface); }
body.wm2026-shell .mv-section .alert-card { border-radius: 12px; box-shadow: none; }
body.wm2026-shell .mv-section .alert-card.cyan { background: var(--info-tint) !important; }
body.wm2026-shell .mv-section .alert-card .cyan-text { color: var(--info) !important; }
body.wm2026-shell #loading_submit { margin-top: 12px; }

/* vista previa tipo WhatsApp */
.mv-wa { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: #EFE7DE; }
.mv-wa-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #075E54; color: #fff; }
.mv-wa-bar .material-icons { font-size: 20px; color: #fff; opacity: .9; }
.mv-wa-back { margin-right: -4px; }
.mv-wa-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: #0A4BE0; }
.mv-wa-who { flex: 1; min-width: 0; line-height: 1.2; }
.mv-wa-who b { display: block; font-size: .88rem; font-weight: 600; color: #fff; white-space: nowrap; }
.mv-wa-who small { font-size: .7rem; color: #CFE9E4; }
.mv-wa-chat {
  padding: 16px 12px 22px; min-height: 240px;
  background-color: #EFE7DE;
  background-image: radial-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px);
  background-size: 14px 14px;
}
.mv-bubble { background: #fff; border-radius: 4px 12px 12px 12px; padding: 8px 10px 20px; font-size: .84rem; line-height: 1.45; color: #111B21; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); position: relative; max-width: 94%; overflow-wrap: anywhere; font-family: var(--font-body); }
.mv-bubble time { position: absolute; right: 9px; bottom: 4px; font-size: .64rem; color: #667781; }
.mv-bubble mark { background: var(--primary-tint); color: var(--primary); border-radius: 4px; padding: 0 3px; }
.mv-bubble .mv-wa-link { color: #027EB5; text-decoration: none; }
.mv-bubble b { font-weight: 700; }

@media (max-width: 1100px) {
  .mv-layout { grid-template-columns: 1fr; }
  .mv-preview { position: static; }
}
@media (max-width: 992px) {
  .mv-steps { flex-direction: column; }
  .mv-actions, .mv-actions-der { flex-direction: column-reverse; align-items: stretch; }
  .mv-actions .mv-btn { width: 100%; }
}

/* ---------- mis campañas (maqueta campanas.html) ---------- */
.mv-stats { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.mv-next { display: flex; align-items: center; gap: 16px; }
.mv-ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--surface-sunken) 0); display: grid; place-items: center; flex-shrink: 0; }
.mv-ring span { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-family: var(--font-headline); font-weight: 700; font-size: .82rem; }
.mv-trunc { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding: 10px 14px 0; overflow-x: auto; scrollbar-width: none; }
body.wm2026-shell .mv-tab { padding: 10px 12px; font-weight: 600; font-size: .84rem; color: var(--text-secondary); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; cursor: pointer; font-family: var(--font-body); white-space: nowrap; }
body.wm2026-shell .mv-tab:hover { color: var(--text); background: none; }
body.wm2026-shell .mv-tab[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.mv-cuenta { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-secondary); font-size: .72rem; text-align: center; margin-left: 4px; }
.mv-name b { display: block; color: var(--text); }
.mv-name small, .mv-campanas td small { font-size: .76rem; }
.mv-error { color: var(--danger); font-size: .76rem; }
.mv-cards { display: none; gap: 10px; padding: 14px; }
.mv-fila-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mv-fila dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 12px; font-size: .82rem; }
.mv-fila dt { color: var(--text-tertiary); }
.mv-fila dd { margin: 0; text-align: right; }
.mv-fila-acc { display: flex; gap: 8px; flex-wrap: wrap; }
.mv-empty { text-align: center; padding: 48px 20px; border: 1px dashed var(--border-strong); border-radius: var(--r-lg); color: var(--text-secondary); background: var(--surface); }
.mv-empty .material-icons { font-size: 40px; color: var(--primary); margin-bottom: 8px; }
.mv-empty p { margin: 6px 0 16px; }
body.wm2026-shell .mv-paginas { display: flex; justify-content: center; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
body.wm2026-shell .mv-paginas a, body.wm2026-shell .mv-paginas span { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border-strong); color: var(--text) !important; background: var(--surface); font-size: .84rem; text-decoration: none; }
body.wm2026-shell .mv-paginas .current { background: var(--primary); border-color: var(--primary); color: #fff !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 992px) {
  .mv-stats { grid-template-columns: 1fr; }
  .mv-solo-escritorio { display: none; }
  .mv-cards { display: grid; }
}

/* ---------- acceso (maqueta login.html) ---------- */
body.wm2026-out .page-topbar, body.wm2026-out aside.sidenav-main, body.wm2026-out footer.page-footer > .container { display: none !important; }
body.wm2026-out #main.mv-login { padding-left: 0 !important; }
body.wm2026-out footer.page-footer { margin-left: 0; }
.mv-login { min-height: 100vh; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); font-family: var(--font-body); }
.mv-login-aside { background: var(--side-bg); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.mv-login-aside::after { content: ""; position: absolute; right: -120px; bottom: -140px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, var(--primary) 0%, transparent 68%); opacity: .5; }
.mv-login-aside img { height: 54px; width: auto; align-self: flex-start; }
body.wm2026-shell .mv-login-aside h2 { color: #fff !important; font-family: var(--font-headline) !important; font-size: 1.9rem; line-height: 1.15; max-width: 16ch; position: relative; z-index: 1; margin: 0; }
.mv-login-aside p { color: #C9C1C7; margin-top: 12px; max-width: 40ch; position: relative; z-index: 1; }
.mv-login-aside ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; color: #D8D2D6; font-size: .9rem; position: relative; z-index: 1; }
.mv-login-aside small { color: #8F8790; position: relative; z-index: 1; }
.mv-login-main { display: grid; place-items: center; padding: 40px 24px; background: var(--bg); }
.mv-login-card { width: 100%; max-width: 400px; }
body.wm2026-shell .mv-login-card h1 { font-family: var(--font-headline) !important; font-size: 1.7rem; margin: 0 0 6px; color: var(--text); }
.mv-login-lang { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 28px; flex-wrap: wrap; }
.mv-login-form { display: grid; gap: 14px; margin-top: 22px; }
.mv-field { display: flex; flex-direction: column; gap: 6px; }
.mv-label { font-size: .82rem; font-weight: 600; color: var(--text); }
.mv-help { font-size: .76rem; color: var(--text-tertiary); }
body.wm2026-shell input.mv-input { font: inherit; font-size: .92rem; width: 100%; height: 44px; padding: 0 13px; border: 1.5px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); outline: none; box-sizing: border-box; margin: 0; box-shadow: none; }
body.wm2026-shell input.mv-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.mv-input-group { position: relative; }
.mv-input-group .mv-input { padding-right: 46px; }
.mv-ojo { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; padding: 8px; color: var(--text-tertiary); cursor: pointer; border-radius: 8px; }
.mv-login-fila { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .82rem; }
body.wm2026-shell .mv-btn-block { width: 100%; padding: 13px 18px; }
.mv-divider { display: flex; align-items: center; gap: 12px; color: var(--text-tertiary); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 20px 0 12px; }
.mv-divider::before, .mv-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.mv-social { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mv-social .mdi { font-size: 18px; }
@media (max-width: 860px) {
  .mv-login { grid-template-columns: 1fr; }
  .mv-login-aside { display: none; }
  .mv-login-lang { justify-content: flex-start; }
}

/* ---------- Todo en Uno: crear, campañas y detalle (paleta de las maquetas) ---------- */
body.wm2026-shell #main.aio-create-wrapper, body.wm2026-shell .campaign-page-wrap { padding-top: 26px !important; }
body.wm2026-shell .aio-create-wrapper .col.l8.offset-l2 { width: 100% !important; margin-left: 0 !important; max-width: 900px; }
body.wm2026-shell .aio-create-card, body.wm2026-shell .campaign-page-card, body.wm2026-shell .campaign-stat-card, body.wm2026-shell .campaign-info-item {
  background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; box-shadow: var(--sh-sm) !important;
}
body.wm2026-shell .aio-create-card::before { display: none !important; }
body.wm2026-shell .aio-title, body.wm2026-shell .campaign-page-title { font-family: var(--font-headline) !important; color: var(--text) !important; font-weight: 700 !important; letter-spacing: -.01em; }
body.wm2026-shell .aio-subtitle, body.wm2026-shell .campaign-page-subtitle { color: var(--text-secondary) !important; }
body.wm2026-shell .aio-badge, body.wm2026-shell .campaign-badge { background: var(--primary-tint) !important; color: var(--primary) !important; border: 0 !important; }
body.wm2026-shell .campaign-topbar { background: transparent !important; border: 0 !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; }
body.wm2026-shell .aio-label i, body.wm2026-shell .campaign-stat-icon, body.wm2026-shell .campaign-wa-item i { color: var(--primary) !important; }
body.wm2026-shell .aio-input-text, body.wm2026-shell .aio-textarea, body.wm2026-shell .aio-select { border: 1.5px solid var(--border-strong) !important; border-radius: 10px !important; background: var(--surface) !important; }
body.wm2026-shell .aio-input-text:focus, body.wm2026-shell .aio-textarea:focus, body.wm2026-shell .aio-select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-ring) !important; }
body.wm2026-shell .aio-upload-box { border: 1.5px dashed var(--border-strong) !important; background: var(--surface-alt) !important; border-radius: var(--r-lg) !important; }
body.wm2026-shell .aio-upload-box:hover { border-color: var(--primary) !important; background: var(--primary-tint) !important; }
body.wm2026-shell .aio-var-chip { background: var(--surface) !important; border: 1px solid var(--border-strong) !important; color: var(--text) !important; border-radius: 999px !important; }
body.wm2026-shell .aio-var-chip:hover { border-color: var(--primary) !important; color: var(--primary) !important; }
body.wm2026-shell .aio-channels-card { background: var(--surface-alt) !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; }
body.wm2026-shell .aio-channel-item { border: 1px dashed var(--border-strong) !important; background: var(--surface) !important; border-radius: var(--r-md) !important; }
body.wm2026-shell .aio-channel-item.selected { border: 1px solid var(--success) !important; background: var(--success-tint) !important; }
body.wm2026-shell .aio-step-badge { background: var(--success) !important; color: #fff !important; }
body.wm2026-shell .aio-submit-btn, body.wm2026-shell .aio-file-select-btn, body.wm2026-shell .campaign-create-btn, body.wm2026-shell .campaign-search-btn,
body.wm2026-shell .aio-all-toggle-btn.active {
  background: var(--primary) !important; background-image: none !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important; text-transform: none !important;
}
body.wm2026-shell .aio-submit-btn:hover, body.wm2026-shell .campaign-create-btn:hover, body.wm2026-shell .campaign-search-btn:hover { background: var(--primary-hover) !important; }
body.wm2026-shell .aio-back-btn, body.wm2026-shell .aio-sample-dl-btn, body.wm2026-shell .campaign-back-btn, body.wm2026-shell .campaign-view-btn, body.wm2026-shell .aio-all-toggle-btn {
  background: var(--surface) !important; background-image: none !important; color: var(--text) !important; border: 1px solid var(--border-strong) !important; border-radius: 10px !important; box-shadow: none !important; text-transform: none !important;
}
body.wm2026-shell .aio-back-btn:hover, body.wm2026-shell .aio-sample-dl-btn:hover, body.wm2026-shell .campaign-back-btn:hover, body.wm2026-shell .campaign-view-btn:hover { border-color: var(--primary) !important; color: var(--primary) !important; }
body.wm2026-shell .campaign-delete-btn { border-radius: 10px !important; }
body.wm2026-shell .campaign-stat-card--blue { background: var(--primary-tint) !important; border-color: transparent !important; }
body.wm2026-shell .campaign-table-wrap { border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; overflow-x: auto; }
body.wm2026-shell .campaign-table th { background: var(--surface-alt) !important; color: var(--text-tertiary) !important; font-size: .72rem !important; text-transform: uppercase; letter-spacing: .05em; }
body.wm2026-shell .campaign-pagination li.active a { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
body.wm2026-shell .campaign-pagination li a:hover { background: var(--surface-alt) !important; }
body.wm2026-shell .campaign-status-badge, body.wm2026-shell .campaign-situation-badge { border-radius: 999px !important; font-weight: 600 !important; }

/* ---------- WhatsApp API for Business: campañas, plantillas y números ---------- */
body.wm2026-shell .tab__main_section, body.wm2026-shell .body__table_section, body.wm2026-shell .insights_container {
  background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; box-shadow: var(--sh-sm) !important;
}
body.wm2026-shell .insights_header, body.wm2026-shell .heading { font-family: var(--font-headline) !important; color: var(--text) !important; }
body.wm2026-shell .nav-tabs .nav-link.active, body.wm2026-shell .nav-tabs .nav-link:hover { color: var(--primary) !important; border-bottom-color: var(--primary) !important; }
body.wm2026-shell .nav-tabs .nav-link { color: var(--text-secondary) !important; font-weight: 600; }
body.wm2026-shell .btn_bg, body.wm2026-shell .modal_button { background: var(--primary) !important; color: #fff !important; border-radius: 10px !important; border: 0 !important; }
body.wm2026-shell .dropdown_button, body.wm2026-shell .search_div, body.wm2026-shell .search_container { border-radius: 10px !important; border-color: var(--border-strong) !important; }
body.wm2026-shell .table thead th, body.wm2026-shell .body__table_section th { background: var(--surface-alt) !important; color: var(--text-tertiary) !important; font-size: .72rem !important; text-transform: uppercase; letter-spacing: .05em; }
body.wm2026-shell .badge.bg-success { background: var(--success-tint) !important; color: var(--success) !important; }
body.wm2026-shell .badge.badge-dark { background: var(--surface-sunken) !important; color: var(--text-secondary) !important; }
body.wm2026-shell .custom_modal .modal_content { border-radius: var(--r-lg) !important; }

/* ---------- la plantilla vieja estiliza <nav> y <nav i>: se neutraliza dentro del menú nuevo ---------- */
body.wm2026-shell nav.mv-nav { background: transparent !important; background-color: transparent !important; height: auto !important; line-height: normal !important; box-shadow: none !important; color: var(--side-text) !important; width: auto !important; }
body.wm2026-shell nav.mv-nav i, body.wm2026-shell nav.mv-nav i.material-icons, body.wm2026-shell nav.mv-nav [class^="mdi-"], body.wm2026-shell nav.mv-nav .material-icons { display: inline-block !important; height: auto !important; line-height: 1 !important; font-size: 18px !important; float: none !important; }
body.wm2026-shell nav.mv-nav a { line-height: 1.35 !important; height: auto !important; }
body.wm2026-shell nav.mv-nav .mv-group, body.wm2026-shell nav.mv-nav .mv-credbar, body.wm2026-shell nav.mv-nav section { line-height: 1.3 !important; height: auto !important; }
body.wm2026-shell nav.mv-nav .mv-group em { line-height: 1.4 !important; height: auto !important; display: inline-block; }
body.wm2026-shell nav.mv-nav ul, body.wm2026-shell nav.mv-nav li { float: none; }

/* pasos: también son <nav> */
body.wm2026-shell nav.mv-steps { background: transparent !important; background-color: transparent !important; height: auto !important; line-height: normal !important; box-shadow: none !important; color: var(--text) !important; }
body.wm2026-shell nav.mv-steps a.mv-step { line-height: 1.3 !important; height: auto !important; }
body.wm2026-shell nav.mv-steps .mv-step span { display: block; }
/* botón de descarga del ejemplo: sin recortar */
body.wm2026-shell .mv-section a.btn.gradient-45deg-indigo-light-blue { height: auto !important; line-height: 1.3 !important; padding: 10px 14px !important; white-space: normal; text-align: left; }

/* ---------- crear campaña: igual que crear.html (campos en recuadro, zona de archivo, fila de envío) ---------- */
body.wm2026-shell .mv-crear .input-field { position: relative; margin: 0 0 16px !important; display: flex; flex-direction: column-reverse; gap: 6px; }
body.wm2026-shell .mv-crear .input-field > label,
body.wm2026-shell .mv-crear .input-field > label.active {
  position: static !important; transform: none !important; font-size: .82rem !important; font-weight: 600; color: var(--text) !important; line-height: 1.3; pointer-events: auto;
}
body.wm2026-shell .mv-crear .input-field > input:not([type=hidden]):not(.select-dropdown),
body.wm2026-shell .mv-crear .select-wrapper input.select-dropdown {
  height: 44px !important; margin: 0 !important; padding: 0 13px !important; box-sizing: border-box !important;
  border: 1.5px solid var(--border-strong) !important; border-radius: 10px !important; background: var(--surface) !important;
  box-shadow: none !important; font-size: .92rem !important; color: var(--text) !important;
}
body.wm2026-shell .mv-crear .input-field > input:focus:not(.select-dropdown),
body.wm2026-shell .mv-crear .select-wrapper input.select-dropdown:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-ring) !important; }
body.wm2026-shell .mv-crear .select-wrapper .caret { right: 12px; fill: var(--text-tertiary); }
body.wm2026-shell .mv-crear .select-wrapper { width: 100%; }
body.wm2026-shell .mv-crear .input-field > textarea#text { order: 0; }
body.wm2026-shell .mv-crear #paso-mensaje .input-field { flex-direction: column; }
body.wm2026-shell .mv-crear #paso-mensaje .input-field > label { order: -1; }
body.wm2026-shell .mv-crear .helper-text { font-size: .76rem; color: var(--text-tertiary); }

/* fecha, rango y país en una fila; el texto «Fecha de envío» como título */
body.wm2026-shell .mv-crear .wm-fila-envio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
body.wm2026-shell .mv-crear .wm-fila-envio > p.mb-4 { grid-column: 1 / -1; margin: 4px 0 0 !important; font-weight: 600; font-size: .86rem; color: var(--text); }

/* zona de archivo (lista, imagen y foto de perfil): toda la caja es clicable y admite arrastrar */
body.wm2026-shell .mv-crear .file-field.input-field {
  position: relative; display: block; text-align: center; padding: 22px 18px 18px; margin: 4px 0 14px !important;
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-alt);
  transition: border-color .15s, background .15s;
}
body.wm2026-shell .mv-crear .file-field.input-field:hover,
body.wm2026-shell .mv-crear .file-field.input-field.is-over { border-color: var(--primary); background: var(--primary-tint); }
body.wm2026-shell .mv-crear .file-field.input-field > p { font-weight: 700; font-size: .92rem; color: var(--text); margin: 0 0 4px !important; }
body.wm2026-shell .mv-crear .file-field .btn { float: none !important; display: inline-flex !important; align-items: center; height: 38px !important; line-height: 38px !important; margin: 8px auto 0 !important; position: static !important; }
body.wm2026-shell .mv-crear .file-field input[type=file] { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; cursor: pointer; z-index: 2; font-size: 0 !important; }
body.wm2026-shell .mv-crear .file-field .file-path-wrapper { padding: 6px 0 0 !important; height: auto; }
body.wm2026-shell .mv-crear .file-field .file-path-wrapper input.file-path { border: 0 !important; box-shadow: none !important; text-align: center; height: 24px !important; color: var(--success) !important; font-weight: 600; }
body.wm2026-shell .mv-crear .file-field .helper-text { display: block; margin-top: 4px; }
body.wm2026-shell .mv-crear .wm-drop-hint { display: block; font-size: .8rem; color: var(--text-secondary); margin-top: 2px; }
body.wm2026-shell .mv-crear .mv-card-head .wm-descarga { margin-left: auto; }
body.wm2026-shell .mv-crear .mv-card-head .wm-descarga.btn { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border-strong) !important; height: auto !important; line-height: 1.2 !important; padding: 8px 12px !important; font-size: .8rem !important; border-radius: 8px !important; margin: 0 !important; }

/* Telegram como interruptor (los dos radios siguen en el formulario, ocultos) */
body.wm2026-shell .mv-crear .wm-telegram-original { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wm-switch-fila { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md); margin: 4px 0 14px; background: var(--surface); }
.wm-switch-fila b { color: var(--text); }
.wm-switch-fila small { color: var(--text-secondary); font-size: .78rem; display: block; margin-top: 2px; }
.wm-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.wm-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; pointer-events: auto !important; }
.wm-switch i { position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px; transition: background .15s; }
.wm-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: var(--sh-sm); }
.wm-switch input:checked + i { background: var(--primary); }
.wm-switch input:checked + i::after { transform: translateX(18px); }
.wm-switch input:focus-visible + i { box-shadow: 0 0 0 3px var(--primary-ring); }

/* burbuja: negritas visibles */
body.wm2026-shell .mv-bubble b, body.wm2026-shell .mv-bubble strong { font-weight: 700 !important; color: #111B21; }

@media (max-width: 760px) {
  body.wm2026-shell .mv-crear .wm-fila-envio { grid-template-columns: 1fr; }
}

/* crear: fuera la imagen de ejemplo del Excel, el recuadro morado antiguo y los botones CTA (pedido de Gonzalo, 2026-10-06). Los campos CTA siguen en el formulario, vacíos. */
body.wm2026-shell .mv-crear img[src*="msg_custom_screen"], body.wm2026-shell .mv-crear #paso-mensaje .card-content.purple, body.wm2026-shell .mv-crear .cta_button_div { display: none !important; }
.wm-vars { margin: 4px 0 16px; }
.mv-vars { display: flex; flex-wrap: wrap; gap: 6px; }
body.wm2026-shell .mv-var { border: 1px solid var(--border-strong); background: var(--surface); border-radius: 999px; padding: 5px 11px; font-size: .78rem; cursor: pointer; font-family: var(--font-body); color: var(--text); }
body.wm2026-shell .mv-var:hover { border-color: var(--primary); color: var(--primary); }
.mv-var code { font-family: ui-monospace, monospace; font-size: .74rem; color: var(--text-tertiary); margin-left: 4px; background: none; }
body.wm2026-shell .mv-crear .alert-card.cyan { background: transparent !important; box-shadow: none !important; margin: 0 !important; }
body.wm2026-shell .mv-crear .alert-card.cyan .card-content { padding: 0 !important; }
body.wm2026-shell .mv-crear .alert-card.cyan p { font-size: .78rem !important; color: var(--text-tertiary) !important; }

/* ventana «Vista previa»: mismo formato que la tarjeta */
body.wm2026-shell #preview-container #msg-text b, body.wm2026-shell #preview-container #msg-text strong { font-weight: 700 !important; }
body.wm2026-shell #preview-container #msg-text mark { background: var(--primary-tint); color: var(--primary); border-radius: 4px; padding: 0 3px; }
body.wm2026-shell #preview-container #msg-text .mv-wa-link { color: #027EB5; text-decoration: none; }

/* ---------- Todo en Uno: crear (maqueta todo-en-uno-crear.html) ---------- */
.mv-tu .mv-field { margin-bottom: 16px; }
body.wm2026-shell .mv-tu select.mv-input { height: 44px; padding: 0 13px; border: 1.5px solid var(--border-strong); border-radius: 10px; background: var(--surface); font: inherit; font-size: .92rem; color: var(--text); width: 100%; }
body.wm2026-shell .mv-tu textarea.mv-textarea { min-height: 130px; height: auto; padding: 12px 13px; border: 1.5px solid var(--border-strong); border-radius: 10px; background: var(--surface); font: inherit; font-size: .92rem; color: var(--text); width: 100%; box-sizing: border-box; resize: vertical; }
body.wm2026-shell .mv-tu textarea.mv-textarea:focus, body.wm2026-shell .mv-tu select.mv-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); outline: none; }
.mv-tu .mv-vars { margin: 8px 0 4px; }
.tu-fila-label { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.tu-canales-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.tu-canales { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
body.wm2026-shell .tu-canal { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px dashed var(--border-strong); color: var(--text-tertiary); cursor: pointer; transition: border-color .15s, background .15s; }
body.wm2026-shell .tu-canal:hover { border-color: var(--primary); }
body.wm2026-shell .tu-canal input[type=checkbox] { position: absolute !important; opacity: 0 !important; pointer-events: none; }
.tu-canal .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-sunken); flex-shrink: 0; }
.tu-canal .ico .material-icons { font-size: 18px; color: var(--text-secondary); }
.tu-canal b { display: block; font-size: .88rem; color: var(--text-secondary); }
.tu-canal small { font-size: .74rem; }
.tu-canal .tu-on { display: none; }
body.wm2026-shell .tu-canal.selected { border-style: solid; border-color: var(--success); background: var(--success-tint); color: var(--success); }
.tu-canal.selected .ico { background: var(--success); }
.tu-canal.selected .ico .material-icons { color: #fff; }
.tu-canal.selected b { color: var(--text); }
.tu-canal.selected .tu-on { display: block; }
.tu-canal.selected .tu-off { display: none; }
body.wm2026-shell .tu-canal .aio-step-badge { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; font-size: .7rem; font-weight: 700; background: var(--success) !important; color: #fff !important; }
body.wm2026-shell .tu-canal .aio-step-badge:empty { display: none; }
body.wm2026-shell .mv-drop.tu-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 22px 18px; margin-top: 8px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-alt); cursor: pointer; transition: border-color .15s, background .15s; }
body.wm2026-shell .mv-drop.tu-drop:hover, body.wm2026-shell .mv-drop.tu-drop.is-over { border-color: var(--primary); background: var(--primary-tint); }
.tu-drop b { font-size: .92rem; color: var(--text); }
.tu-drop .aio-file-name-display { font-size: .8rem; color: var(--text-secondary); }
body.wm2026-shell .tu-drop input[type=file] { position: absolute !important; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mv-tu .aio-loader-panel { margin-top: 10px; }
@media (max-width: 1100px) { .tu-canales { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .tu-canales { grid-template-columns: 1fr 1fr; } }

/* Todo en Uno: sin la casilla de Materialize sobre el icono del canal */
body.wm2026-shell .tu-canal [type="checkbox"] + span.ico, body.wm2026-shell .tu-canal [type="checkbox"]:checked + span.ico { padding-left: 0 !important; height: 34px !important; line-height: normal !important; display: grid !important; font-size: inherit; }
body.wm2026-shell .tu-canal [type="checkbox"] + span.ico::before, body.wm2026-shell .tu-canal [type="checkbox"] + span.ico::after { display: none !important; content: none !important; }

/* ---------- Todo en Uno: campañas y detalle (maquetas todo-en-uno-campanas.html y todo-en-uno-detalle.html) ---------- */
body.wm2026-shell .campaign-page-wrap { max-width: 1180px; margin: 0 auto; padding: 26px 28px 40px !important; }
body.wm2026-shell .campaign-page-card { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
body.wm2026-shell .campaign-page-title { font-size: 1.6rem !important; margin: 10px 0 4px !important; }
body.wm2026-shell .campaign-topbar { margin-bottom: 18px !important; align-items: flex-end !important; }
body.wm2026-shell .campaign-page-card form input[type="text"],
body.wm2026-shell .campaign-page-card form select { border: 1.5px solid var(--border-strong) !important; border-radius: 10px !important; background: var(--surface) !important; height: 44px !important; box-shadow: none !important; }
body.wm2026-shell .campaign-page-card form button[type="submit"]:not(.campaign-delete-btn) { background: var(--primary) !important; border-radius: 10px !important; }
body.wm2026-shell .campaign-page-card form button[type="submit"]:not(.campaign-delete-btn):hover { background: var(--primary-hover) !important; }
body.wm2026-shell .campaign-table-wrap { background: var(--surface) !important; box-shadow: var(--sh-sm) !important; }
body.wm2026-shell .campaign-table td:first-child { font-family: ui-monospace, monospace; font-size: .8rem; color: var(--text-secondary); }
body.wm2026-shell .campaign-table tr:nth-child(odd) td, body.wm2026-shell .campaign-table tr td { background: transparent !important; }
body.wm2026-shell .campaign-table tbody tr:hover td { background: var(--surface-hover) !important; }
body.wm2026-shell .campaign-table .chip { background: var(--success-tint) !important; color: var(--success) !important; border-radius: 999px !important; font-weight: 600; }

/* detalle */
body.wm2026-shell .campaign-info-grid { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; padding: 16px !important; box-shadow: var(--sh-sm); gap: 10px !important; }
body.wm2026-shell .campaign-info-item { box-shadow: none !important; background: var(--surface-alt) !important; border: 0 !important; border-radius: var(--r-md) !important; padding: 10px 12px !important; }
body.wm2026-shell .campaign-info-label { font-size: .7rem !important; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary) !important; font-weight: 700 !important; }
body.wm2026-shell .campaign-info-value { color: var(--text) !important; font-size: .9rem !important; }
body.wm2026-shell .campaign-info-value .chip { background: var(--success-tint) !important; color: var(--success) !important; border-radius: 999px !important; font-weight: 600; }
body.wm2026-shell .campaign-stats-grid { gap: 14px !important; margin-top: 16px !important; }
body.wm2026-shell .campaign-stat-card, body.wm2026-shell .campaign-stat-card--blue { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; box-shadow: var(--sh-sm) !important; padding: 18px !important; }
body.wm2026-shell .campaign-stat-label { font-family: var(--font-headline) !important; font-size: 1.05rem !important; font-weight: 700 !important; color: var(--text) !important; margin-bottom: 10px !important; }
body.wm2026-shell .campaign-stat-icon { background: var(--surface-sunken) !important; border-radius: 10px !important; }
body.wm2026-shell .campaign-stat-btn, body.wm2026-shell .view_report_button { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border-strong) !important; border-radius: 10px !important; box-shadow: none !important; }
body.wm2026-shell .campaign-stat-btn:hover, body.wm2026-shell .view_report_button:hover { border-color: var(--primary) !important; color: var(--primary) !important; }
body.wm2026-shell .campaign-wa-stats { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; background: transparent !important; }
body.wm2026-shell .campaign-wa-item { background: var(--surface-sunken) !important; border: 0 !important; border-radius: var(--r-md) !important; padding: 10px !important; text-align: center; box-shadow: none !important; min-width: 0 !important; }
body.wm2026-shell .campaign-wa-count { font-family: var(--font-headline) !important; font-size: 1.25rem !important; font-weight: 700 !important; color: var(--text) !important; display: block; }
body.wm2026-shell .campaign-wa-name { font-size: .72rem !important; color: var(--text-secondary) !important; }
body.wm2026-shell .campaign-wa-item:nth-child(4) .campaign-wa-count, body.wm2026-shell .campaign-wa-item:nth-child(5) .campaign-wa-count, body.wm2026-shell .campaign-wa-item:nth-child(6) .campaign-wa-count { color: var(--success) !important; }
body.wm2026-shell .campaign-wa-item:nth-child(7) .campaign-wa-count { color: var(--danger) !important; }
@media (max-width: 760px) { body.wm2026-shell .campaign-wa-stats { grid-template-columns: 1fr 1fr !important; } body.wm2026-shell .campaign-page-wrap { padding: 18px 16px 40px !important; } }

/* ---------- WhatsApp API: lista de campañas (maqueta api-campanas.html) ---------- */
body.wm2026-shell #main a.badge.badge-primary { display: inline-flex; align-items: center; background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border-strong); border-radius: 8px !important; padding: 4px 9px !important; font-size: .74rem !important; font-weight: 600; margin-bottom: 4px; }
body.wm2026-shell #main a.badge.badge-primary:hover { border-color: var(--primary); color: var(--primary) !important; }
body.wm2026-shell #main a.badge.badge-dark { background: var(--surface-sunken) !important; color: var(--text) !important; border-radius: 8px !important; }
body.wm2026-shell #main span.badge.badge-success, body.wm2026-shell #main span.badge.bg-success { background: var(--success-tint) !important; color: var(--success) !important; border-radius: 999px !important; font-weight: 600; }
body.wm2026-shell #main span.badge.badge-info { background: var(--info-tint) !important; color: var(--info) !important; border-radius: 999px !important; font-weight: 600; }
body.wm2026-shell #main span.badge.badge-secondary, body.wm2026-shell #main span.badge.bg-secondary { background: var(--surface-sunken) !important; color: var(--text-secondary) !important; border-radius: 999px !important; font-weight: 600; }
body.wm2026-shell #main .progress { background: var(--surface-sunken) !important; border-radius: 999px !important; height: 8px !important; overflow: hidden; }
body.wm2026-shell #main .progress [data-progress] { background: var(--primary) !important; border-radius: 999px !important; }
body.wm2026-shell #main .search_div button, body.wm2026-shell #main a.btn__inner_item, body.wm2026-shell #main .open_div_btn { border-radius: 10px !important; }
body.wm2026-shell #main .progress { height: 16px !important; }
body.wm2026-shell #main .progress [data-progress], body.wm2026-shell #main .progress p { font-size: .66rem !important; line-height: 16px !important; color: #fff !important; }
body.wm2026-shell #main a[href="/servidordedicado/create_campaign.php"] { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; border-radius: 10px !important; }
body.wm2026-shell #main a[href="/servidordedicado/create_campaign.php"] p, body.wm2026-shell #main a[href="/servidordedicado/create_campaign.php"] i { color: #fff !important; }

/* recuento de la lista y coste en créditos */
.wm-recuento { margin: -4px 0 14px; }
.mv-result { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mv-result div { padding: 12px; border-radius: var(--r-md); background: var(--surface-sunken); text-align: center; }
.mv-result b { display: block; font-family: var(--font-headline); font-size: 1.3rem; color: var(--text); }
.mv-result span { font-size: .74rem; color: var(--text-secondary); }
.mv-result .ok b { color: var(--success); } .mv-result .ko b { color: var(--danger); }
.wm-recuento .mv-help { margin: 8px 0 0; display: block; }

/* ===== Todo en Uno (campañas y detalle) y WhatsApp API (campañas) ===== */
.mv-mono { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
.mv-acciones-fila { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; justify-content: flex-end; }
.mv-acciones-fila form { margin: 0; display: inline-flex; }
body.wm2026-shell .mv-volver { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary) !important; font-size: .86rem; text-decoration: none; margin-bottom: 6px; }
body.wm2026-shell .mv-volver:hover { color: var(--primary) !important; }
.mv-meta { color: var(--text-secondary); }
.mv-head-acc { display: flex; gap: 8px; flex-wrap: wrap; }

/* filtros plegables de Todo en Uno */
.mv-filtros { margin-bottom: 16px; padding: 0; }
.mv-filtros > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 14px 18px; font-weight: 600; font-size: .9rem; color: var(--text); }
.mv-filtros > summary::-webkit-details-marker { display: none; }
.mv-filtros > summary .material-icons { font-size: 20px; color: var(--text-tertiary); }
.mv-filtros[open] > summary { border-bottom: 1px solid var(--border); }
.mv-filtros-form { display: grid; grid-template-columns: minmax(200px, 1.4fr) minmax(150px, .8fr) repeat(2, minmax(220px, 1fr)); gap: 14px; padding: 16px 18px 18px; align-items: end; }
.mv-filtros-acc { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
.mv-fecha-triple { border: 0; padding: 0; margin: 0; min-width: 0; }
.mv-fecha-triple legend { padding: 0; margin-bottom: 6px; }
.mv-fecha-triple > div { display: grid; grid-template-columns: .8fr 1.3fr 1fr; gap: 6px; }
body.wm2026-shell select.mv-input { font: inherit; font-size: .9rem; width: 100%; height: 44px; padding: 0 10px; border: 1.5px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); outline: none; box-sizing: border-box; margin: 0; display: block; }
body.wm2026-shell select.mv-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }

/* barra de búsqueda y filtros (API) y buscador de contactos (detalle) */
.mv-barra-filtros { display: flex; gap: 10px; padding: 14px 16px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--border); }
.mv-buscador { display: flex; gap: 8px; align-items: center; flex: 1 1 320px; margin: 0; max-width: 520px; }
body.wm2026-shell .mv-buscador input.mv-input { height: 38px; }
.mv-select-filtro { flex: 0 0 200px; margin: 0; }
body.wm2026-shell .mv-select-filtro select.mv-input { height: 38px; }

/* menú de acciones (⋮) */
.mv-menu { position: relative; }
.mv-menu > summary { list-style: none; cursor: pointer; }
.mv-menu > summary::-webkit-details-marker { display: none; }
.mv-menu-lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-md); padding: 6px; display: flex; flex-direction: column; }
body.wm2026-shell .mv-menu-lista a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--text) !important; font-size: .86rem; text-decoration: none; white-space: nowrap; }
body.wm2026-shell .mv-menu-lista a:hover { background: var(--surface-hover); }
body.wm2026-shell .mv-menu-lista a.mv-peligro { color: var(--danger) !important; }
body.wm2026-shell .mv-table-wrap:has(.mv-menu[open]) { overflow: visible; }

/* barra de progreso del envío (la rellena el script de siempre) */
body.wm2026-shell .progress.mv-progreso { height: 4px; margin: 6px 0 0; background: var(--surface-sunken); border-radius: 999px; max-width: 120px; overflow: hidden; }
body.wm2026-shell .progress.mv-progreso > div { height: 100%; background: var(--primary); }
.mv-resultados .mv-btn { white-space: nowrap; }

/* pestañas de página (API) */
.mv-tabs-pagina { padding: 0; margin-bottom: 16px; }
body.wm2026-shell a.mv-tab { text-decoration: none; display: inline-block; }

/* tarjetas por canal del detalle */
.tu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.tu-stat.is-off { background: var(--surface-alt); border-style: dashed; }
.tu-stat.is-off h3 { color: var(--text-tertiary); }
body.wm2026-shell .tu-stat h3 { display: flex; align-items: center; gap: 10px; font-family: var(--font-headline); font-size: 1rem; font-weight: 600; margin: 0; color: var(--text); }
.tu-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-tint); color: var(--primary); flex-shrink: 0; }
.tu-ico .material-icons { font-size: 18px; }
.tu-stat.is-off .tu-ico { background: var(--surface-sunken); color: var(--text-tertiary); }
.tu-metricas { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 0; }
.tu-metricas > div { background: var(--surface-alt); border-radius: 10px; padding: 8px 10px; }
.tu-metricas dt { font-size: .72rem; color: var(--text-tertiary); font-weight: 600; }
.tu-metricas dd { margin: 2px 0 0; font-family: var(--font-headline); font-size: 1.15rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.tu-metricas .ok dd { color: var(--success); }
.tu-metricas .ko dd { color: var(--danger); }

@media (max-width: 992px) {
  .mv-filtros-form { grid-template-columns: 1fr 1fr; }
  .mv-filtros-buscar { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .mv-filtros-form { grid-template-columns: 1fr; }
  .mv-filtros-acc .mv-btn { flex: 1; }
  .mv-select-filtro { flex: 1 1 100%; }
  .mv-buscador { max-width: none; }
  .mv-head-acc { width: 100%; }
  .mv-head-acc .mv-btn { flex: 1; }
}

/* ===== Dashboard: panel «Novedades del panel 2026» a la izquierda ===== */
.mv-dash-wrap { display: grid; grid-template-columns: 270px minmax(0, 1180px); justify-content: center; gap: 4px; align-items: start; padding-left: 20px; }
.mv-dash-wrap > .mv-content { margin: 0; box-sizing: border-box; min-width: 0; }
.mv-novedades, .mv-novedades * { box-sizing: border-box; }
.mv-novedades { position: sticky; top: 84px; margin-top: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; font-family: var(--font-body); }
.mv-novedades-cab { padding: 18px 18px 14px; background: linear-gradient(135deg, var(--primary-tint), var(--secondary-tint)); }
body.wm2026-shell .mv-novedades h2 { font-family: var(--font-headline) !important; font-size: 1.05rem; font-weight: 700; margin: 10px 0 4px; line-height: 1.25; color: var(--text); }
.mv-novedades-cab p { margin: 0; font-size: .8rem; color: var(--text-secondary); line-height: 1.45; }
.mv-novedades ul { list-style: none; margin: 0; padding: 8px 10px; }
body.wm2026-shell .mv-novedades li { display: flex; gap: 10px; padding: 9px 8px; border-radius: 10px; list-style: none; }
.mv-novedades li + li { border-top: 1px solid var(--border); }
.mv-novedades li .material-icons { font-size: 18px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--primary-tint); color: var(--primary); flex-shrink: 0; }
.mv-novedades li b { display: block; font-size: .84rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.mv-novedades li span { display: block; font-size: .76rem; color: var(--text-secondary); line-height: 1.45; margin-top: 2px; }
.mv-novedades-pie { margin: 0; padding: 10px 18px 16px; font-size: .76rem; color: var(--text-tertiary); }
@media (max-width: 1499px) {
  .mv-dash-wrap { display: flex; flex-direction: column-reverse; padding-left: 0; }
  .mv-dash-wrap > .mv-content { margin: 0 auto; padding-bottom: 16px; }
  .mv-novedades { position: static; margin: 0 auto 40px; width: calc(100% - 56px); max-width: 1124px; }
  .mv-novedades ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 8px; }
  .mv-novedades li + li { border-top: 0; }
}
@media (max-width: 992px) {
  .mv-novedades { width: calc(100% - 32px); }
}

/* filtros de plantillas: las filas ocultas no deben reaparecer por estilos de tabla */
body.wm2026-shell [data-cat][hidden] { display: none !important; }

/* el contenido nunca se pasa del ancho aunque la página no traiga box-sizing global */
body.wm2026-shell .mv-content, body.wm2026-shell .mv-content *, body.wm2026-shell .mv-content *::before, body.wm2026-shell .mv-content *::after { box-sizing: border-box; }

/* ===== Crear campaña: foto de perfil en ventana de recorte ===== */
.wm-recorte[hidden] { display: none !important; }
.wm-recorte { position: fixed; inset: 0; z-index: 1005; display: flex; align-items: center; justify-content: center; padding: 16px; }
.wm-recorte-velo { position: absolute; inset: 0; background: rgba(36, 30, 34, .55); }
.wm-recorte-caja { position: relative; width: 100%; max-width: 380px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 22px 22px 18px; text-align: center; font-family: var(--font-body); }
body.wm2026-shell .wm-recorte-caja h3 { font-family: var(--font-headline) !important; font-size: 1.1rem; font-weight: 700; margin: 0 0 4px; color: var(--text); }
.wm-recorte-caja .mv-help { margin: 0 0 14px; }
.wm-recorte-zona { display: flex; justify-content: center; }
.wm-recorte-zona .cr-boundary { border-radius: 12px; background: var(--surface-sunken); }
.wm-recorte-zona .cr-slider-wrap { margin: 14px auto 4px; width: 150px; }
.wm-recorte-acc { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
body.wm2026-shell .wm-recorte-acc #btn-upload-profile { height: auto; line-height: 1.2; text-transform: none; box-shadow: none; }
body.wm2026-shell .wm-recorte-acc #btn-upload-profile[disabled] { opacity: .45; cursor: not-allowed; }
body.wm-recorte-abierto { overflow: hidden; }
.wm-perfil-resultado { display: flex; align-items: center; gap: 14px; margin: 12px 0 0 !important; }
.wm-perfil-resultado .col { width: auto !important; float: none !important; padding: 0 !important; display: flex; align-items: center; gap: 14px; text-align: left !important; }
.wm-perfil-resultado #upload-demo-i { width: 72px !important; height: 72px !important; padding: 0 !important; border-radius: 50% !important; overflow: hidden; border: 1px dashed var(--border-strong); background: var(--surface-alt) !important; flex-shrink: 0; }
.wm-perfil-resultado #upload-demo-i img { width: 100%; height: 100%; object-fit: cover; }
.wm-perfil-ayuda { margin: 0 !important; }

/* ===== Todo en Uno: informe, estadísticas y ficha del contacto ===== */
.seg-gris { background: #B9B0B7; } .seg-azul { background: var(--info); } .seg-verde { background: var(--success); }
.seg-turquesa { background: #1C9CA6; } .seg-rosa { background: var(--primary); } .seg-rojo { background: var(--danger); }
.tu-barra { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-sunken); margin: 8px 0 8px; }
.tu-barra span { display: block; height: 100%; min-width: 3px; }
.tu-leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; font-size: .78rem; color: var(--text-secondary); }
body.wm2026-shell .tu-leyenda li { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.tu-leyenda li i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.tu-leyenda b { color: var(--text); font-variant-numeric: tabular-nums; }
.tu-informe-lista { display: flex; flex-direction: column; gap: 12px; }
.tu-informe-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
body.wm2026-shell .tu-informe h3 { font-family: var(--font-headline) !important; font-size: 1.08rem; font-weight: 700; margin: 0 0 2px; color: var(--text); }
.tu-informe .mv-meta { margin: 0; font-size: .82rem; }
.tu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tu-chips .mv-badge::before { display: none; }
.tu-informe-cuerpo { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(0, 1.4fr); gap: 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); align-items: start; }
.tu-informe-cuerpo > .tu-informe-canal:nth-child(3) { grid-column: 2; }
.tu-informe-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tu-informe-kpis > div { background: var(--surface-alt); border-radius: 10px; padding: 8px 10px; }
.tu-informe-kpis b { display: block; font-family: var(--font-headline); font-size: 1.15rem; color: var(--text); font-variant-numeric: tabular-nums; }
.tu-informe-kpis span { font-size: .72rem; color: var(--text-tertiary); font-weight: 600; }
.tu-informe-kpis .ok b { color: var(--success); } .tu-informe-kpis .ko b { color: var(--danger); }
.tu-informe-canal .mv-label { font-size: .8rem; }
.tu-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tu-dos { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; }
.tu-embudo { display: flex; flex-direction: column; gap: 10px; }
.tu-embudo-fila { display: grid; grid-template-columns: 110px minmax(0, 1fr) 70px 52px; align-items: center; gap: 10px; font-size: .86rem; }
.tu-embudo-fila b { text-align: right; font-variant-numeric: tabular-nums; }
.tu-embudo-fila small { text-align: right; }
.tu-embudo-barra { height: 14px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.tu-embudo-barra i { display: block; height: 100%; border-radius: 999px; min-width: 3px; }
body.wm2026-shell .tu-tabla-simple th { background: transparent; padding: 6px 4px; }
body.wm2026-shell .tu-tabla-simple td { padding: 8px 4px; }
.tu-dias { display: flex; gap: 6px; align-items: flex-end; overflow-x: auto; padding-bottom: 4px; }
.tu-dia { flex: 1 0 34px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tu-dia-col { width: 100%; max-width: 38px; height: 150px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--surface-alt); border-radius: 6px; overflow: hidden; }
.tu-dia-col i { display: block; width: 100%; }
.tu-dia small { font-size: .66rem; color: var(--text-tertiary); white-space: nowrap; }
.mv-ficha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; margin: 0; }
.mv-ficha dt { font-size: .74rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; }
.mv-ficha dd { margin: 3px 0 0; font-size: .95rem; color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 992px) {
  .tu-informe-cuerpo, .tu-dos { grid-template-columns: 1fr; }
  .tu-informe-cuerpo > .tu-informe-canal:nth-child(3) { grid-column: auto; }
  .tu-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mv-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .tu-informe-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tu-embudo-fila { grid-template-columns: 90px minmax(0, 1fr) 56px; }
  .tu-embudo-fila small { display: none; }
  .mv-ficha { grid-template-columns: 1fr; }
  .tu-informe-cab .mv-head-acc { width: 100%; }
}

/* chips del informe: el nombre de la voz con el mismo tamaño que el resto */
body.wm2026-shell .tu-chips .mv-badge span { font-size: inherit; }

/* crear campaña: aviso de formato de la lista */
.wm-alerta-formato { margin-top: 10px; }
.wm-alerta-formato b { display: inline; }
body.wm2026-shell .wm-alerta-formato a.mv-btn { color: #fff !important; text-decoration: none; }

/* ===== Campanita: novedades del panel ===== */
body.wm2026-shell #notifications-dropdown.wm-novedades-lista { width: 400px !important; max-width: 94vw; max-height: 72vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 0; font-family: var(--font-body); }
body.wm2026-shell #notifications-dropdown.wm-novedades-lista > li { min-height: 0; line-height: 1.4; cursor: default; background: transparent; list-style: none; }
body.wm2026-shell #notifications-dropdown.wm-novedades-lista > li:hover { background: transparent; }
body.wm2026-shell .wm-nov-cab { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 16px 12px !important; background: linear-gradient(135deg, var(--primary-tint), var(--secondary-tint)) !important; position: sticky; top: 0; z-index: 1; }
body.wm2026-shell .wm-nov-cab b { display: block; font-family: var(--font-headline); font-size: 1.05rem; color: var(--text); margin-top: 8px; }
body.wm2026-shell .wm-nov-cerrar { border: 0; background: rgba(255, 255, 255, .7); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--text-secondary); flex-shrink: 0; }
body.wm2026-shell .wm-nov-cerrar .material-icons { font-size: 18px; }
body.wm2026-shell .wm-nov-item { display: flex !important; gap: 12px; padding: 12px 16px !important; border-top: 1px solid var(--border); }
body.wm2026-shell .wm-nov-item > .material-icons { font-size: 18px; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--primary-tint); color: var(--primary); flex-shrink: 0; }
body.wm2026-shell .wm-nov-item b { display: block; font-size: .88rem; font-weight: 600; color: var(--text); }
body.wm2026-shell .wm-nov-item span { display: block; font-size: .8rem; color: var(--text-secondary); margin-top: 2px; }
body.wm2026-shell .wm-nov-item ul { margin: 4px 0 0; padding-left: 16px; }
body.wm2026-shell .wm-nov-item ul li { list-style: disc; font-size: .8rem; color: var(--text-secondary); margin: 2px 0; padding: 0; min-height: 0; line-height: 1.4; }
body.wm2026-shell .wm-nov-pie { padding: 12px 16px 16px !important; border-top: 1px solid var(--border); font-size: .76rem; color: var(--text-tertiary); }
body.wm2026-shell #notifications-dropdown.wm-novedades-lista[style*="display: block"] { opacity: 1 !important; }