/* ═══════════════════════════════════════════════════════════════
   ui.css  —  Sistema de diseño compartido · Aprobador
   Importar en cada página después de Bootstrap CSS.
═══════════════════════════════════════════════════════════════ */

/* ── Tokens base ─────────────────────────────────────────────── */
:root {
  /* Workloops brand · usado SOLO en momentos workloops (header sidebar,
     login, footer "Powered by", CTAs branded). El sistema operativo sigue
     usando --bn2-accent (azul) para no perder densidad/confianza visual. */
  --wl-brand:      #1ec1bd;   /* teal del infinity icon */
  --wl-brand-ink:  #1a3050;   /* navy del wordmark */
  --wl-brand-soft: #e6f8f7;   /* fondo soft del teal */

  --nav-bg:   #0f172a;
  --nav-border: #1e293b;
  --bg:       #f0f2f5;
  --surface:  #ffffff;
  --border:   #e5e7eb;
  --border-md:#d1d5db;
  --text:     #0f172a;
  --text-sm:  #374151;
  --text-muted:#6b7280;
  --text-xs:  #9ca3af;
  --radius:   .875rem;
  --radius-sm:.6rem;
  --shadow-xs: 0 1px 4px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);

  /* ── Tokens tipográficos ──────────────────────────────────── */
  /* Usar estos en lugar de font-size inline para consistencia  */
  --fs-label:  .65rem;   /* etiquetas ALL CAPS, section heads   */
  --fs-meta:   .68rem;   /* fechas, subtítulos secundarios      */
  --fs-micro:  .72rem;   /* chips, pills, badges, nav items     */
  --fs-body:   .82rem;   /* cuerpo de tabla, descripción        */
  --fs-title:  .9rem;    /* títulos de card, drawer             */
  --fs-heading:1.05rem;  /* encabezados de sección              */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  800;
}

/* ── Reset base ──────────────────────────────────────────────── */
body {
  background: var(--bg);
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--text);
}
a { text-decoration: none; }

/* ── Sticky command bar ──────────────────────────────────────── */
.cb {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1040;
  background: var(--nav-bg);
  box-shadow: 0 1px 8px rgba(0,0,0,.25);
}
.cb-top {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1.25rem; flex-wrap: wrap;
}
.cb-client {
  font-weight: 700; font-size: .95rem; color: #fff;
  letter-spacing: -.01em; white-space: nowrap;
}
.cb-title {
  font-size: .88rem; font-weight: 600; color: #e2e8f0;
  white-space: nowrap;
}
.cb-sep   { color: #475569; font-size: .85rem; }
.cb-nav   { display: flex; align-items: center; gap: .3rem; }
.cb-arrow {
  width: 28px; height: 28px; border-radius: .5rem;
  border: 1px solid #334155; display: flex; align-items: center;
  justify-content: center; color: #94a3b8; font-size: .8rem;
  cursor: pointer; text-decoration: none;
}
.cb-arrow:hover { background: #1e293b; color: #fff; }
.cb-month {
  font-size: .88rem; font-weight: 600; color: #e2e8f0;
  padding: .3rem .75rem; border: 1px solid #334155;
  border-radius: .5rem; white-space: nowrap;
}
.cb-modes  { display: flex; gap: .2rem; margin-left: .25rem; }
.cb-mode {
  font-size: .72rem; padding: .25rem .65rem; border-radius: 1rem;
  border: 1px solid #334155; color: #94a3b8; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.cb-mode.active { background: #fff; color: var(--nav-bg); border-color: #fff; font-weight: 600; }
.cb-mode:hover:not(.active) { background: #1e293b; color: #e2e8f0; }
.cb-actions { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
.cb-btn {
  font-size: .73rem; padding: .3rem .7rem; border-radius: .5rem;
  border: 1px solid #334155; color: #94a3b8; cursor: pointer;
  text-decoration: none; white-space: nowrap; background: transparent;
}
.cb-btn:hover { background: #1e293b; color: #e2e8f0; }
.cb-btn-primary { background: #fff; color: var(--nav-bg); border-color: #fff; font-weight: 600; }
.cb-btn-primary:hover { background: #e2e8f0; color: var(--nav-bg); }
.cb-btn-danger { background: #7f1d1d; color: #fca5a5; border-color: #7f1d1d; }
.cb-btn-danger:hover { background: #991b1b; color: #fca5a5; }
.cb-back {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; color: #94a3b8; text-decoration: none;
  padding: .2rem .5rem; border-radius: .4rem;
}
.cb-back:hover { color: #e2e8f0; background: #1e293b; }

/* ── Chips row (segunda línea del navbar) ────────────────────── */
.cb-chips {
  display: flex; gap: .35rem; padding: .45rem 1.25rem;
  border-top: 1px solid var(--nav-border); flex-wrap: wrap;
  overflow-x: auto;
}
.sc {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--fs-micro); padding: .25rem .7rem; border-radius: 1rem;
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: background .12s;
}
.sc-dot  { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sc-count {
  font-size: var(--fs-label); font-weight: var(--fw-bold); min-width: 16px; height: 16px;
  border-radius: 8px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 4px;
}
.sc-all     { color: #94a3b8; border-color: #1e293b; }
.sc-all.active, .sc-all:hover { background: #1e293b; color: #e2e8f0; }
.sc-all .sc-count { background: #1e293b; color: #94a3b8; }
.sc-all.active .sc-count { background: #334155; color: #e2e8f0; }
.sc-cambios { color: #fca5a5; border-color: #7f1d1d30; }
.sc-cambios.active,.sc-cambios:hover { background: #7f1d1d; color: #fca5a5; border-color: #7f1d1d; }
.sc-cambios .sc-count { background: #7f1d1d40; color: #fca5a5; }
.sc-ri  { color: #fcd34d; border-color: #78350f30; }
.sc-ri.active,.sc-ri:hover { background: #78350f; color: #fcd34d; border-color: #78350f; }
.sc-ri .sc-count { background: #78350f40; color: #fcd34d; }
.sc-er  { color: #93c5fd; border-color: #1e3a5f30; }
.sc-er.active,.sc-er:hover { background: #1e3a5f; color: #93c5fd; border-color: #1e3a5f; }
.sc-er .sc-count { background: #1e3a5f40; color: #93c5fd; }
.sc-aprobado { color: #86efac; border-color: #14532d30; }
.sc-aprobado.active,.sc-aprobado:hover { background: #14532d; color: #86efac; border-color: #14532d; }
.sc-aprobado .sc-count { background: #14532d40; color: #86efac; }
.sc-working { color: #fda4af; border-color: #4c0519; }
.sc-working.active,.sc-working:hover { background: #4c0519; color: #fda4af; border-color: #4c0519; }
.sc-working .sc-count { background: #4c051940; color: #fda4af; }

/* ── Body padding según altura del navbar ────────────────────── */
/* .pt-nav-1  → solo cb-top (≈56px) */
/* .pt-nav-2  → cb-top + cb-chips (≈112px) */
.pt-nav-1 { padding-top: 60px; }
.pt-nav-2 { padding-top: 112px; }

/* ── Superficie / contenedor ─────────────────────────────────── */
.surface {
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border);
}
.surface-p { padding: 1.25rem 1.5rem; }

/* ── Tabla ───────────────────────────────────────────────────── */
.tbl-wrap {
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border); overflow: hidden;
}
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.tbl th {
  text-align: left; padding: .55rem .75rem; color: var(--text-xs);
  font-size: var(--fs-meta); font-weight: var(--fw-semi); text-transform: uppercase;
  letter-spacing: .06em; border-bottom: 1px solid #f0f0f0;
  background: #fafafa; white-space: nowrap;
}
.tbl td { padding: .6rem .75rem; border-bottom: 1px solid #f7f7f7; vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: #fafafa; }
.tbl-week { background: #eff6ff !important; }
.tbl-week td {
  padding: .3rem .75rem; font-size: .67rem; font-weight: 700;
  color: #1d4ed8; text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 1px solid #dbeafe !important; border-top: 2px solid #bfdbfe;
}
.tbl-month { background: #f0fdf4 !important; }
.tbl-month td {
  padding: .3rem .75rem; font-size: .67rem; font-weight: 700;
  color: #15803d; text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 1px solid #bbf7d0 !important; border-top: 2px solid #86efac;
}
.tbl-cambios td { background: #fffbeb !important; }
.tbl-cambios:hover td { background: #fef3c7 !important; }

/* ── Status badges ───────────────────────────────────────────── */
.st-badge {
  display: inline-flex; align-items: center; font-size: var(--fs-micro);
  padding: .2em .6em; border-radius: 1em; white-space: nowrap; font-weight: var(--fw-medium);
}
.st-borrador    { background: #f3f4f6; color: #6b7280; }
.st-trabajando  { background: #e0f2fe; color: #0369a1; }
.st-revision    { background: #fef3c7; color: #92400e; }
.st-cliente     { background: #dbeafe; color: #1e40af; }
.st-cambios     { background: #fee2e2; color: #b91c1c; }
.st-aprobado    { background: #dcfce7; color: #15803d; }

/* ── Network pills ───────────────────────────────────────────── */
.net-pill {
  display: inline-flex; align-items: center; gap: .15rem; color: #fff;
  border-radius: .25rem; padding: .1em .35em; font-size: var(--fs-label); font-weight: var(--fw-bold);
}
.net-fb { background: #1877F2; }
.net-ig { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.net-lk { background: #0A66C2; }
.net-tt { background: #010101; }
.net-yt { background: #FF0000; }

/* ── Responsable avatar ──────────────────────────────────────── */
.resp-av {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; flex-shrink: 0;
}

/* ── Deadline badges ─────────────────────────────────────────── */
.dl-badge { font-size: .65rem; padding: .15em .5em; border-radius: .4rem; white-space: nowrap; }
.dl-vencido { background: #fee2e2; color: #b91c1c; }
.dl-prox    { background: #fef3c7; color: #92400e; }

/* ── Publication status ──────────────────────────────────────── */
.pub-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; color: var(--text-muted); cursor: pointer;
  padding: .2rem .5rem; border-radius: .5rem;
}
.pub-badge:hover { background: #f3f4f6; }
.pub-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pub-sin      { background: #d1d5db; }
.pub-prog     { background: #3b82f6; }
.pub-pub      { background: #0f172a; }
.pub-entregado{ background: #16a34a; }
.pub-menu {
  display: none; position: absolute; z-index: 300; top: 100%; left: 0;
  background: #fff; border: 1px solid var(--border); border-radius: .6rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.1); padding: .25rem; min-width: 145px;
}

/* ── Stats strip ─────────────────────────────────────────────── */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .5rem; margin-bottom: .75rem;
}
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .6rem .85rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.stat-lbl {
  font-size: var(--fs-label); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-xs); white-space: nowrap;
}
.stat-val     { font-size: 1.25rem; font-weight: var(--fw-black); color: var(--text); line-height: 1; }
.stat-val-sm  { font-size: .88rem;  font-weight: var(--fw-bold);  color: var(--text); line-height: 1; }
.stat-sub     { font-size: var(--fs-meta); color: var(--text-xs); margin-top: .1rem; }
.stat-trend-up{ color: #16a34a; font-size: var(--fs-label); font-weight: var(--fw-bold); }
.stat-trend-dn{ color: #dc2626; font-size: var(--fs-label); font-weight: var(--fw-bold); }
.stat-trend-eq{ color: #9ca3af; font-size: var(--fs-label); }
.stat-bar     { height: 4px; border-radius: 2px; background: #f0f0f0; overflow: hidden; margin-top: .35rem; }
.stat-bar-fill{ height: 100%; border-radius: 2px; }

/* ── Filter chip bar ─────────────────────────────────────────── */
.fcb { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .75rem; }
.fc-chip {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem;
  padding: .3rem .8rem; border: 1px solid var(--border); border-radius: 1rem;
  background: var(--surface); cursor: pointer; white-space: nowrap;
}
.fc-chip select {
  font-size: .75rem; border: none; background: transparent;
  color: var(--text-sm); padding: 0; outline: none; cursor: pointer; max-width: 120px;
}
.fc-chip select:focus { outline: none; }
.fc-chip.has-value { border-color: #6366f1; background: #eef2ff; }
.fc-chip.has-value select { color: #4f46e5; }
.fcb-search {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 1rem; padding: .3rem .8rem;
}
.fcb-search input {
  font-size: .75rem; border: none; outline: none;
  background: transparent; width: 130px; color: var(--text-sm);
}
.fcb-search input::placeholder { color: var(--text-xs); }
.fc-clear {
  font-size: .72rem; color: var(--text-xs); padding: .3rem .7rem;
  border-radius: 1rem; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.fc-clear:hover { color: var(--text-sm); }

/* ── Action rail ─────────────────────────────────────────────── */
.action-rail { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: .6rem; margin-bottom: 1rem; }
.ar-card { border-radius: var(--radius); padding: .8rem 1rem; border: 1px solid transparent; }
.ar-cambios  { background: #fef2f2; border-color: #fecaca; }
.ar-deadline { background: #fffbeb; border-color: #fde68a; }
.ar-interna  { background: #fff7ed; border-color: #fed7aa; }
.ar-sla      { background: #fef2f2; border-color: #fecaca; }
.ar-label {
  font-size: var(--fs-label); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: .07em; margin-bottom: .45rem;
}
.ar-cambios .ar-label  { color: #b91c1c; }
.ar-deadline .ar-label { color: #92400e; }
.ar-interna .ar-label  { color: #c2410c; }
.ar-sla .ar-label      { color: #b91c1c; }
.ar-item {
  font-size: var(--fs-body); color: #1e293b; padding: .25rem .4rem;
  border-radius: .3rem; background: rgba(255,255,255,.55);
  margin-bottom: .2rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; display: block; text-decoration: none;
}
.ar-item:hover { background: rgba(255,255,255,.85); }
.ar-more { font-size: var(--fs-meta); color: var(--text-xs); padding: .15rem .4rem; }

/* ── Section heading ─────────────────────────────────────────── */
.dash-section-head {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .65rem; margin-top: .15rem;
}
.dash-section-head span {
  font-size: var(--fs-label); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-xs); white-space: nowrap;
}
.dash-section-head::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Budget bar ──────────────────────────────────────────────── */
.budget-inline {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: .75rem; padding: .55rem .9rem;
  background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border);
  font-size: .78rem;
}
.budget-label  { color: var(--text-muted); white-space: nowrap; }
.budget-bar-wrap { flex: 1; min-width: 80px; height: 6px; background: #f0f0f0; border-radius: 4px; overflow: hidden; }
.budget-bar-fill { height: 100%; border-radius: 4px; transition: width .4s; }
.budget-val    { font-weight: 600; color: #111; white-space: nowrap; }

/* ── Preview / future grid ───────────────────────────────────── */
.preview-section  { margin-top: 1.25rem; }
.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .6rem;
}
.preview-card {
  padding: .7rem .85rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface);
  text-decoration: none; color: inherit;
  transition: box-shadow .12s, border-color .12s; display: block;
}
.preview-card:hover { box-shadow: var(--shadow-sm); border-color: #c7d2fe; }
.preview-card-new {
  border-style: dashed; display: flex; align-items: center;
  justify-content: center; color: var(--text-xs); font-size: .78rem; min-height: 72px;
}
.preview-card-new:hover { border-color: #6366f1; color: #6366f1; }
.pc-date  { font-size: var(--fs-meta); color: var(--text-xs); margin-bottom: .2rem; }
.pc-title { font-size: var(--fs-micro); font-weight: var(--fw-semi); color: #111; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: .35rem; }

/* ── Future month blocks ─────────────────────────────────────── */
.fut-mes-block  { margin-bottom: 1.25rem; }
.fut-mes-head   { display: flex; align-items: center; gap: .75rem; margin-bottom: .55rem; flex-wrap: wrap; }
.fut-mes-label  { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text); white-space: nowrap; }
.fut-mes-count  { font-size: var(--fs-meta); color: var(--text-xs); white-space: nowrap; }
.fut-btn-new {
  font-size: .7rem; padding: .25rem .65rem; border-radius: .5rem;
  background: var(--nav-bg); color: #fff; border: none; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.fut-btn-new:hover  { background: #1e293b; color: #fff; }
.fut-btn-ver {
  font-size: .7rem; padding: .25rem .65rem; border-radius: .5rem;
  background: var(--surface); color: var(--text-sm); border: 1px solid var(--border);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.fut-btn-ver:hover { border-color: #9ca3af; color: var(--text); }

/* ── HTMX indicator ──────────────────────────────────────────── */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }

/* ── Row hover actions ───────────────────────────────────────── */
.row-actions { opacity: 0; transition: opacity .12s; display: inline-flex; align-items: center; gap: .2rem; }
tr:hover .row-actions { opacity: 1; }
.unseen-dot { width: 7px; height: 7px; border-radius: 50%; background: #3b82f6; flex-shrink: 0; display: inline-block; }

/* ── Contenido cell ──────────────────────────────────────────── */
.contenido-titulo { font-weight: var(--fw-semi); color: #111; font-size: var(--fs-body); line-height: 1.3; }
.contenido-meta   { font-size: var(--fs-meta); color: var(--text-xs); margin-top: 2px; }

/* ── KPI cards ───────────────────────────────────────────────── */
.kpi {
  background: var(--surface); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; border: 1px solid var(--border);
}
.kpi-label { font-size: var(--fs-meta); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .07em; color: var(--text-xs); margin-bottom: .3rem; }
.kpi-value { font-size: 1.5rem; font-weight: var(--fw-black); color: var(--text); line-height: 1; }
.kpi-sub   { font-size: var(--fs-micro); color: var(--text-muted); margin-top: .25rem; }

/* ── Bulk bar ────────────────────────────────────────────────── */
#bulkBar { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); padding: .6rem 1rem; }

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  .cb, .action-rail, .fcb, #bulkBar, .row-actions { display: none !important; }
  body { padding-top: 0 !important; background: #fff !important; }
}

/* ═══════════════════════════════════════════════════════════════
   HUB — Tarjetas de cliente y alertas
═══════════════════════════════════════════════════════════════ */

/* Encabezado de página */
.page-title {
  font-size: var(--fs-heading); font-weight: var(--fw-black);
  color: var(--text); margin-bottom: 1rem;
}

/* Etiqueta de sección (global) */
.section-label {
  font-size: var(--fs-label, .65rem); text-transform: uppercase;
  letter-spacing: .08em; color: #aaa; font-weight: var(--fw-bold, 700);
  margin-bottom: .3rem;
}

/* Tarjeta de cliente */
.cliente-card { cursor: pointer; transition: border-color .2s; border: 1px solid var(--border); }
.cliente-card:hover { border-color: #6366f1; }
.logo-placeholder {
  width: 48px; height: 48px; background: #1e293b; color: #fff;
  border-radius: .65rem; display: flex; align-items: center;
  justify-content: center; font-size: 1.2rem; font-weight: var(--fw-bold);
}

/* Título del contenido dentro de la tarjeta */
.hub-card-title {
  font-size: var(--fs-title); font-weight: var(--fw-bold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hub-card-meta { font-size: var(--fs-micro); color: var(--text-muted); }

/* Acción del rol */
.hub-rol-accion { font-size: var(--fs-micro); font-weight: var(--fw-semi); }

/* Barra de retainer */
.retainer-bar  { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.retainer-fill { height: 100%; border-radius: 3px; transition: width .4s; }
.retainer-meta { font-size: var(--fs-meta); }

/* Indicador de alerta en tarjeta */
.hub-alert-dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
  animation: pulse 2s infinite;
}
.hub-alert-label { font-size: var(--fs-micro); font-weight: var(--fw-bold); }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.3)} }

/* Footer de tarjeta de cliente */
.hub-card-footer {
  border-top: 1px solid #f3f4f6; padding: .45rem 1rem;
  display: flex; gap: 1.25rem; background: #fafafa;
}
.hub-card-footer-link {
  font-size: var(--fs-micro); font-weight: var(--fw-bold);
  color: var(--text-muted); text-decoration: none;
  display: flex; align-items: center; gap: .3rem;
}
.hub-card-footer-link:hover { color: var(--text); }
.hub-card-footer-link.primary { color: var(--text); }
.hub-badge-tareas {
  background: #6366f1; color: #fff;
  font-size: .58rem; font-weight: var(--fw-black);
  padding: .1em .45em; border-radius: 2rem;
}

/* Subtítulo de sección de alerta */
.ar-sub { font-size: var(--fs-meta); color: #b91c1c; margin-bottom: .5rem; }

/* Label de cliente en badge de alerta */
.hub-cliente-label {
  font-size: var(--fs-label); text-transform: uppercase;
  color: var(--text-muted); display: block; margin-bottom: .1rem;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — Navegación lateral unificada
═══════════════════════════════════════════════════════════════ */
:root {
  --sb-width:           260px;   /* Sprint 19 · más generoso (era 220) */
  --sb-width-collapsed: 64px;
  /* ── Sprint 36 · Workloops revamp · paleta navy gradient ─────────────
     Sustituimos el flat #0f172a por un dégradé navy → ink más marcado.
     #14274a top → #060c1a bottom da más profundidad visual. */
  --sb-bg:        #14274a;       /* navy top — match con el logo */
  --sb-bg-2:      #060c1a;       /* ink bottom — casi negro azul */
  --sb-border:    #1c2942;       /* sutil sobre el gradient */
  --sb-text:      #94a3b8;
  --sb-text-hover:#e2e8f0;
  --sb-active-bg: rgba(30,193,189,.10);   /* teal soft para hover/active */
  --sb-active:    #ffffff;
  --sb-active-indigo: var(--wl-brand, #1ec1bd); /* item activo: teal en vez de indigo */
  --sb-badge-red: #ef4444;
  --sb-accent:    #1ec1bd;        /* workloops teal */
}

/* Cuando el sidebar está activo, el body necesita margen izquierdo */
body.has-sidebar {
  padding-left: var(--sb-width);
  padding-top: 0 !important;   /* anula pt-nav-1 */
  transition: padding-left .25s ease; /* slide suave en toggle */
}
/* Sprint 19 · Estado colapsado del sidebar — body.sidebar-collapsed se setea
   con JS leyendo localStorage. En tablet (641-1199px) el default es colapsado;
   en desktop ≥1200px el default es expandido. Mobile (≤640) se ignora porque
   el sidebar ahí es overlay con hamburguesa. */
body.has-sidebar.sidebar-collapsed {
  padding-left: var(--sb-width-collapsed);
}
@media (max-width: 768px) {
  body.has-sidebar,
  body.has-sidebar.sidebar-collapsed { padding-left: 0; }
}

/* ── El sidebar ───────────────────────────────────────────────── */
/* Sprint 36 · Workloops revamp · gradient sutil navy→ink + glow teal arriba.
   El gradient da sensación premium sin distraer; el radial glow teal en la
   esquina superior es un guiño al logo y se difumina rápidamente. */
.app-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sb-width);
  background:
    radial-gradient(ellipse 420px 280px at 50% -20px, rgba(30,193,189,.22), transparent 65%),
    radial-gradient(ellipse 320px 400px at 100% 100%, rgba(30,193,189,.06), transparent 70%),
    linear-gradient(180deg, var(--sb-bg) 0%, var(--sb-bg-2) 100%);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #1c2942 transparent;
  transition: transform .25s ease, width .25s ease;
  /* Borde derecho casi imperceptible para separarlo del contenido */
  border-right: 1px solid rgba(255,255,255,.04);
}
/* Sprint 19 · estado colapsado del sidebar */
body.sidebar-collapsed .app-sidebar { width: var(--sb-width-collapsed); }
.app-sidebar::-webkit-scrollbar { width: 4px; }
.app-sidebar::-webkit-scrollbar-thumb { background: #1c2942; border-radius: 4px; }

/* ── Brand · Sprint 36 Workloops revamp ──────────────────────────────
   Sin línea divisora dura. El glow teal del .app-sidebar ya da el
   separador visual entre brand y user card. */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 1.15rem 1.1rem .9rem;
  text-decoration: none;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.sidebar-brand-icon { font-size: 1.25rem; color: #fff; opacity: .92; }
.sidebar-brand-name {
  font-size: .98rem; font-weight: 800; color: #fff; letter-spacing: -.01em;
}

/* ── Usuario · Sprint 36 Workloops revamp ────────────────────────────
   Pill glass dark con ring teal sutil alrededor del avatar. Sin línea
   divisora dura — sólo un borde inferior muy ligero. El click hace toda
   la fila acción de dropdown. */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1.1rem;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.sidebar-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  font-size: .85rem; font-weight: 800; color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  /* Sprint 36 · Ring teal sutil alrededor — el guiño workloops */
  box-shadow:
    0 0 0 1.5px rgba(30,193,189,.55),
    0 0 0 4px rgba(30,193,189,.08);
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { font-size: .88rem; font-weight: 700; color: #f1f5f9;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-role { font-size: .68rem; color: var(--sb-text); text-transform: capitalize; margin-top: .05rem;
                     letter-spacing: .04em; }
.sidebar-logout {
  color: var(--sb-text); font-size: .95rem; padding: .35rem;
  border-radius: .35rem; transition: .12s; flex-shrink: 0;
}
.sidebar-logout:hover { color: #fca5a5; background: rgba(239,68,68,.15); }

/* Sprint 36 · User row como botón dropdown trigger.
   Reset de estilos default de <button> + chevron rotativo.
   IMPORTANTE · Bootstrap aplica background-color al <button> via
   --bs-btn-bg / appearance default. Forzamos transparent con !important
   y appearance:none para que el gradient del sidebar pase a través. */
button.sidebar-user-trigger,
button.sidebar-user-trigger:hover,
button.sidebar-user-trigger:focus,
button.sidebar-user-trigger:active {
  width: 100%;
  background: transparent !important;
  background-color: transparent !important;
  border: 0;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background .12s;
}
button.sidebar-user-trigger:hover {
  background: rgba(255,255,255,.04) !important;
  background-color: rgba(255,255,255,.04) !important;
}
button.sidebar-user-trigger:focus-visible {
  outline: none;
  background: rgba(255,255,255,.06) !important;
  background-color: rgba(255,255,255,.06) !important;
}
.sidebar-user-chevron {
  color: var(--sb-text);
  font-size: .7rem;
  opacity: .55;
  flex-shrink: 0;
  transition: transform .15s, opacity .12s;
}
button.sidebar-user-trigger:hover .sidebar-user-chevron { opacity: 1; }
button.sidebar-user-trigger[aria-expanded="true"] .sidebar-user-chevron {
  transform: rotate(180deg);
}

/* ── Nav links · Sprint 19 v2 — más generoso, item activo indigo ── */
.sidebar-nav {
  flex: 1;
  padding: .55rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .85rem;
  border-radius: .55rem;
  font-size: .88rem;
  font-weight: 500;
  color: #e8edf4;             /* Sprint 36 · más blanco, más legible */
  text-decoration: none;
  transition: background .12s, color .12s;
  white-space: nowrap;
  position: relative;
}
.sidebar-link i {
  font-size: 1.05rem; flex-shrink: 0; width: 1.15rem; text-align: center;
  color: #b8c2d1;              /* Sprint 36 · iconos un toque más vivos */
  transition: color .12s;
}
/* Sprint 36 · FIX badge oval — el span del label se estira con flex:1,
   pero ese mismo selector también atrapaba el .sidebar-badge (que es un
   span también) y lo estiraba horizontal. Excluímos badge y dot. */
.sidebar-link span:not(.sidebar-badge):not(.sidebar-client-dot) {
  flex: 1; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-link:hover {
  background: rgba(255,255,255,.04);
  color: var(--sb-text-hover);
}
.sidebar-link:hover i { color: var(--sb-accent); }

/* Sprint 36 · Workloops revamp · active state
   Antes: bloque sólido indigo. Ahora: fondo teal soft + barra teal de
   3px en el borde izquierdo (clase pillar de muchos sidebars premium —
   Stripe, Linear, Notion). El icono toma el color teal del acento. */
.sidebar-link.active {
  background: var(--sb-active-bg);
  color: #ffffff;
  font-weight: 700;
}
.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: -.7rem;   /* alinea con el padding-x del .sidebar-nav */
  top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 70%;
  background: var(--sb-accent);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(30,193,189,.5);
}
.sidebar-link.active i { color: var(--sb-accent); }

/* ── Section labels · Sprint 36 Workloops revamp ──────────────────────
   Más espacio, color muteado, letra-spacing más amplio. El section count
   ahora es un dot teal sutil en vez de pill. */
.sidebar-section-label {
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #5a6779;
  padding: 1.1rem .9rem .4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-section-label .sidebar-section-count {
  background: var(--sb-active-bg); color: var(--sb-text-hover);
  padding: .12rem .5rem; border-radius: 1rem;
  font-size: .6rem; font-weight: 600;
  letter-spacing: 0;
}

/* ── Sprint 36 · Recientes · ítems trackeados en sessionStorage ──────────
   Sección discreta arriba del nav; aparece sólo si hay 1–3 elementos.
   Cada ítem reusa .sidebar-link, pero le ponemos un tinte de teal sutil al
   icono para distinguirlos sin romper la jerarquía visual. */
.sidebar-recientes {
  padding-bottom: .25rem;
  margin-bottom: .15rem;
  border-bottom: 1px solid var(--sb-border);
}
.sidebar-recientes .sidebar-section-label {
  padding-top: .55rem;
}
.sidebar-link.sidebar-reciente i {
  color: var(--wl-brand, #1ec1bd);
  opacity: .85;
}
.sidebar-link.sidebar-reciente:hover i { opacity: 1; }
.sidebar-link.sidebar-reciente span {
  font-weight: 500;
  font-size: .855rem;
}
body.sidebar-collapsed .sidebar-recientes {
  border-bottom-color: transparent;
}
/* Sprint 38 · "Recientes" oculto por ahora — confundía a los usuarios.
   Para reactivarlo, eliminar esta regla (el JS sigue registrando recientes). */
#sidebarRecientes { display: none !important; }

/* Search box · Sprint 30 · Las reglas base de .sidebar-search* se movieron
   a nav.php (diseño Sprint 28: wrap relative + icono/kbd absolutos). Tener
   dos definiciones (flex vs relative) hacía que se mezclaran property-by-
   property y el input se desbordaba del contenedor. Fuente única: nav.php.
   Aquí solo quedan los overrides de estado (body.sidebar-collapsed, más abajo). */

/* Client dots · Sprint 19 v2 — círculos perfectos.
   FIX importante: `.sidebar-link span { flex: 1 }` (regla genérica más arriba)
   estaba aplicándose también al dot porque es un <span>. Resultado: dot ovalado
   estirado al ancho disponible. Forzamos flex 0/0/10px para que no se estire. */
.sidebar-client-dot {
  flex: 0 0 10px !important;
  width: 10px !important; height: 10px !important;
  border-radius: 50%;
  background: var(--sb-text);
  display: inline-block;
}
.sidebar-client-toggle .sidebar-client-name {
  flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .88rem;
}
.sidebar-client-chevron {
  font-size: .65rem; color: var(--sb-text); opacity: .6;
  transition: transform .15s;
}

/* Footer · Sprint 36 Workloops revamp — fila Notificaciones + engrane.
   Borde superior casi imperceptible; hover ahora con teal soft. */
.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,.05);
  padding: .65rem .7rem .5rem;
  flex-shrink: 0;
  background: rgba(0,0,0,.15);  /* sutil tinte oscuro para anclar al pie */
}
.sidebar-footer-row {
  display: flex; align-items: center; gap: .35rem;
}
.sidebar-footer-notif {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .65rem;
  background: transparent; border: 0; border-radius: .5rem;
  color: var(--sb-text-hover); cursor: pointer;
  font-size: .82rem; font-weight: 600;
  text-align: left;
  transition: background .12s, color .12s;
}
.sidebar-footer-notif:hover {
  background: rgba(30,193,189,.10);
  color: #fff;
}
.sidebar-footer-notif:hover i { color: var(--sb-accent); }
.sidebar-footer-notif i { font-size: .95rem; flex-shrink: 0; transition: color .12s; }
.sidebar-footer-notif-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer-cog {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: .5rem;
  color: var(--sb-text); cursor: pointer;
  font-size: 1rem;
  transition: background .12s, color .12s;
}
.sidebar-footer-cog:hover {
  background: rgba(30,193,189,.10);
  color: var(--sb-accent);
}

/* En colapsado: footer en stack vertical (no fila), labels ocultos */
body.sidebar-collapsed .sidebar-footer-row {
  flex-direction: column; gap: .35rem;
}
body.sidebar-collapsed .sidebar-footer-notif-label { display: none; }
body.sidebar-collapsed .sidebar-footer-notif {
  justify-content: center; padding: .5rem;
  width: 36px; height: 36px; align-self: center;
  position: relative;          /* anchor para el badge esquinero */
}
body.sidebar-collapsed .sidebar-footer-notif i {
  font-size: 1.05rem;           /* icono un poco más grande para llenar el botón 36×36 */
}
/* Sprint 36 · El badge en colapsado se convierte en dot esquinero
   sobre el bell, no contiguo. Mantiene el número adentro si cabe. */
body.sidebar-collapsed .sidebar-footer-notif .sidebar-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  font-size: .6rem; font-weight: 700;
  border: 2px solid var(--sb-bg-2, #060c1a);  /* ring oscuro para separarlo del bg */
}

/* Sprint 36 · "Powered by workloops" · marca discreta gris al pie del sidebar.
   Letras pequeñas, gris sutil que combina con el navbar dark.
   Sin teal ni azul — bien plano. Usamos .app-sidebar como prefijo + !important
   para vencer al cascading de Bootstrap que pinta los <a> como link-color. */
.app-sidebar .sidebar-poweredby,
.app-sidebar a.sidebar-poweredby,
.app-sidebar a.sidebar-poweredby:link,
.app-sidebar a.sidebar-poweredby:visited,
.app-sidebar a.sidebar-poweredby:hover,
.app-sidebar a.sidebar-poweredby:active,
.app-sidebar a.sidebar-poweredby:focus {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
  padding: 5px 8px;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #64748b !important;          /* gris medio que matchea el sidebar dark */
  text-decoration: none !important;
  border-radius: 6px;
  opacity: .85;
  transition: opacity .12s, color .12s;
  line-height: 1;
  letter-spacing: .02em;
  background: transparent !important;
}
.app-sidebar a.sidebar-poweredby:hover {
  opacity: 1;
  color: #94a3b8 !important;          /* gris un toque más claro al hover, sin azul */
}
.app-sidebar .sidebar-poweredby-lbl,
.app-sidebar .sidebar-poweredby-wl {
  color: inherit !important;          /* NUNCA color propio — heredan del padre gris */
}
.app-sidebar .sidebar-poweredby-lbl { font-weight: 400; }
.app-sidebar .sidebar-poweredby-wl  { font-weight: 600; letter-spacing: -.005em; }
/* Colapsado: oculto entero (no caben las letras) — specificity boost
   para vencer al .app-sidebar a.sidebar-poweredby { display: flex !important }
   de arriba. Sin este boost se quedaba mostrando "ered worklo" partial. */
body.sidebar-collapsed .app-sidebar .sidebar-poweredby,
body.sidebar-collapsed .app-sidebar a.sidebar-poweredby {
  display: none !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   Sprint 19 · SIDEBAR COLAPSADO
   En body.sidebar-collapsed:
   - Sidebar reduce ancho a 64px
   - Todos los textos (labels, nombres, badges con número) se ocultan
   - Items quedan como iconos centrados
   - Separadores visuales entre grupos (Items / Clientes / Comunicación)
   - Tooltips flotantes al hover muestran el texto oculto
   - Section labels (CLIENTES, COMUNICACIÓN) se ocultan, reemplazados por
     un border-top sutil
   - Submenús del cliente y "Más" se vuelven flyouts/popovers
   ═════════════════════════════════════════════════════════════════════════ */

/* Botón toggle (la flecha del header brand) */
.sidebar-toggle {
  position: absolute;
  top: 1rem; right: .55rem;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: .35rem;
  color: var(--sb-text); cursor: pointer;
  transition: background .12s, color .12s;
  z-index: 2;
}
.sidebar-toggle:hover { background: var(--sb-active-bg); color: var(--sb-active); }
.sidebar-toggle i { font-size: .85rem; transition: transform .25s; }
body.sidebar-collapsed .sidebar-toggle {
  /* Centrado horizontal cuando el sidebar es chico */
  left: 50%; right: auto; transform: translateX(-50%);
}
body.sidebar-collapsed .sidebar-toggle i { transform: rotate(180deg); }

/* ── Ocultar contenidos textuales en colapsado ─────────────── */
body.sidebar-collapsed .sidebar-brand-name,
body.sidebar-collapsed .sidebar-user-info,
body.sidebar-collapsed .sidebar-user-chevron,  /* Sprint 36 · chevron empujaba el avatar fuera del centro */
body.sidebar-collapsed .sidebar-search-input,
body.sidebar-collapsed .sidebar-search-kbd,
body.sidebar-collapsed .sidebar-link span:not(.sidebar-badge):not(.sidebar-client-dot),
body.sidebar-collapsed .sidebar-mas-chevron,
body.sidebar-collapsed .sidebar-client-chevron,
body.sidebar-collapsed .sidebar-section-toggle span,
body.sidebar-collapsed .sidebar-section-chevron,
body.sidebar-collapsed .sidebar-logout {
  display: none !important;
}

/* Section toggles en colapsado (Clientes / Comunicación / Ajustes):
   se vuelven separadores invisibles + el icono opcional (engrane en Ajustes). */
body.sidebar-collapsed .sidebar-section-toggle {
  padding: .5rem .35rem !important;
  justify-content: center !important;
}
body.sidebar-collapsed .sidebar-section-toggle .sidebar-section-icon {
  display: inline-block !important;
  font-size: 1.05rem;
  color: var(--sb-text);
}
/* Sin icono (Clientes, Comunicación) → ocultar el botón entero, dejar solo el border-top */
body.sidebar-collapsed .sidebar-section-toggle:not(:has(.sidebar-section-icon)) {
  display: none !important;
}

/* Brand: centrar el ícono cuando está colapsado */
body.sidebar-collapsed .sidebar-brand {
  justify-content: center;
  padding: 1.1rem .5rem .9rem;
}
body.sidebar-collapsed .sidebar-brand-icon { font-size: 1.4rem; }

/* Sprint 38 · Colapsado: el logo se ve apretado/feo a 64px. Lo ocultamos
   por completo (img y el ícono fallback) y dejamos solo la chevron de
   expandir — apuntando a la derecha y en blanco. */
body.sidebar-collapsed .sidebar-brand img,
body.sidebar-collapsed .sidebar-brand-icon {
  display: none !important;
}
body.sidebar-collapsed .sidebar-toggle {
  color: #fff;
}
body.sidebar-collapsed .sidebar-toggle i {
  font-size: 1rem;
}

/* User: solo avatar */
body.sidebar-collapsed .sidebar-user {
  justify-content: center;
  padding: .65rem .5rem;
}

/* Search: convertir input en icono clickable que abre ⌘K */
body.sidebar-collapsed .sidebar-search {
  justify-content: center;
  padding: .35rem .5rem;
  cursor: pointer;
}
body.sidebar-collapsed .sidebar-search-icon {
  font-size: 1rem; color: var(--sb-text);
}
body.sidebar-collapsed .sidebar-search-results { display: none !important; }

/* Nav items: iconos centrados, padding chico */
body.sidebar-collapsed .sidebar-nav { padding: .5rem .35rem; }
body.sidebar-collapsed .sidebar-link {
  justify-content: center;
  padding: .55rem .35rem;
  gap: 0;
}
body.sidebar-collapsed .sidebar-link i {
  font-size: 1.05rem; width: auto;
}

/* Indicador de activo: dot azul en esquina superior derecha del item */
body.sidebar-collapsed .sidebar-link.active {
  background: var(--sb-active-bg);
  position: relative;
}
body.sidebar-collapsed .sidebar-link.active::after {
  content: '';
  position: absolute; top: 6px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #818cf8; /* indigo-400 */
}

/* Badges: en colapsado se muestran como dot rojo arriba-derecha del icono */
body.sidebar-collapsed .sidebar-link .sidebar-badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 14px; height: 14px; padding: 0 .25rem;
  font-size: .55rem; line-height: 14px;
  border-radius: .7rem;
}

/* "Más" como icono — el details no abre dropdown, click delega a JS para popover */
body.sidebar-collapsed .sidebar-mas { margin-top: 0 !important; }
body.sidebar-collapsed .sidebar-mas[open] > div,
body.sidebar-collapsed .sidebar-mas > div { display: none !important; }
body.sidebar-collapsed .sidebar-mas summary {
  justify-content: center !important;
  padding: .55rem .35rem !important;
  gap: 0 !important;
}

/* Separadores entre grupos cuando está colapsado */
body.sidebar-collapsed .sidebar-section-label {
  display: block !important;
  padding: 0; margin: .35rem .55rem;
  border-top: 1px solid var(--sb-border);
  font-size: 0; /* oculta el texto pero mantiene el border */
  height: 1px;
}

/* Sub-items de cliente colapsados se ocultan (se acceden via flyout) */
body.sidebar-collapsed .sidebar-client-links { display: none !important; }

/* Cliente collapsed: solo el dot de color centrado.
   Asumimos markup: <span class="sidebar-client-dot" style="background:..."> */
body.sidebar-collapsed .sidebar-link.sidebar-client > i,
body.sidebar-collapsed .sidebar-link.sidebar-client > .bi {
  display: none;
}
body.sidebar-collapsed .sidebar-link.sidebar-client .sidebar-client-dot {
  width: 10px; height: 10px;
}

/* ── Tooltips en colapsado ────────────────────────────────────
   Tooltip flotante via CSS al hover sobre cualquier .sidebar-link,
   .sidebar-toggle o avatar. El texto viene del attr data-tip o span hijo.
   Solo aplica cuando body.sidebar-collapsed (y hover capability). */
@media (hover: hover) {
  body.sidebar-collapsed .sidebar-link[data-tip]:hover::before,
  body.sidebar-collapsed .sidebar-toggle[data-tip]:hover::before,
  body.sidebar-collapsed .sidebar-brand[data-tip]:hover::before,
  body.sidebar-collapsed .sidebar-user[data-tip]:hover::before,
  body.sidebar-collapsed .sidebar-search[data-tip]:hover::before,
  body.sidebar-collapsed .sidebar-mas summary[data-tip]:hover::before {
    content: attr(data-tip);
    position: fixed;
    left: calc(var(--sb-width-collapsed) + 8px);
    top: var(--tip-top, auto);
    background: #0f172a;
    color: #f1f5f9;
    font-size: .72rem; font-weight: 600;
    padding: .35rem .55rem;
    border-radius: .35rem;
    border: 1px solid #334155;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
    white-space: nowrap;
    z-index: 2000;
    pointer-events: none;
    transform: translateY(-50%);
    animation: sb-tip-in .14s ease-out;
  }
}
@keyframes sb-tip-in {
  from { opacity: 0; transform: translateY(-50%) translateX(-4px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* ── Flyout panel (popover lateral) para sub-items de cliente o "Más" ── */
.sidebar-flyout {
  position: fixed;
  left: calc(var(--sb-width-collapsed) + 6px);
  background: var(--sb-bg);
  border: 1px solid var(--sb-border);
  border-radius: .55rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  padding: .35rem;
  min-width: 200px;
  z-index: 1050;
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.sidebar-flyout.is-open {
  opacity: 1; transform: translateX(0); pointer-events: auto;
}
.sidebar-flyout-title {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--sb-text); padding: .35rem .55rem .15rem;
  font-weight: 700;
}
.sidebar-flyout a,
.sidebar-flyout button {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .55rem;
  border-radius: .35rem;
  font-size: .8rem; font-weight: 600;
  color: var(--sb-text-hover); text-decoration: none;
  background: transparent; border: 0; cursor: pointer;
  width: 100%; text-align: left;
  transition: background .12s;
}
.sidebar-flyout a:hover,
.sidebar-flyout button:hover { background: var(--sb-active-bg); }
.sidebar-flyout a.active { color: #fff; background: var(--sb-active-bg); }
.sidebar-flyout i { font-size: .85rem; color: var(--sb-text); }
/* Sprint 36 · Item peligroso (Cerrar sesión) — texto e icono en rojo soft */
.sidebar-flyout a.is-danger { color: #fca5a5; }
.sidebar-flyout a.is-danger i { color: #fca5a5; }
.sidebar-flyout a.is-danger:hover {
  background: rgba(220, 38, 38, .18);
  color: #fecaca;
}
.sidebar-flyout a.is-danger:hover i { color: #fecaca; }
/* Separador antes del item danger */
.sidebar-flyout-sep {
  height: 1px;
  background: var(--sb-border);
  margin: 6px 4px 4px;
}

/* ── Spinner del search icon (cuando cmd+K hace fetch) ──────── */
.sb-search-spinning {
  animation: sb-spin 1s linear infinite;
}
@keyframes sb-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

/* ── Toast unificado (window.apvToast) ───────────────────────
   Reemplaza implementaciones legacy: showToast/briefs.php, #tareas-toast/etc. */
.cmp-toast {
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  right:  calc(1.5rem + env(safe-area-inset-right, 0px));
  padding: .65rem 1.1rem;
  border-radius: .65rem;
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 99999;
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
  pointer-events: none;
  max-width: calc(100vw - 2rem);
}
.cmp-toast.show { opacity: 1; transform: translateY(0); }
.cmp-toast-success { background: #16a34a; }
.cmp-toast-danger  { background: #dc2626; }
.cmp-toast-warning { background: #d97706; }
.cmp-toast-info    { background: #2563eb; }

/* ── Confirm modal (window.apvConfirm) ───────────────────────
   Reemplaza confirm() del browser. */
.cmp-confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.55);
  z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity .15s ease;
}
.cmp-confirm-overlay.show { opacity: 1; }
.cmp-confirm-card {
  background: var(--surface, #fff);
  border-radius: .75rem;
  padding: 1.5rem;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 25px 60px rgba(0,0,0,.3);
  transform: scale(.96);
  transition: transform .15s ease;
}
.cmp-confirm-overlay.show .cmp-confirm-card { transform: scale(1); }
.cmp-confirm-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .5rem;
  color: var(--text, #0f172a);
}
.cmp-confirm-msg {
  font-size: .9rem;
  color: var(--text-sm, #374151);
  margin-bottom: 1.25rem;
  line-height: 1.45;
}
.cmp-confirm-actions {
  display: flex; gap: .5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.cmp-confirm-btn {
  padding: .55rem 1.1rem;
  border-radius: .5rem;
  font-size: .85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  transition: background .15s, transform .05s;
}
.cmp-confirm-btn:active { transform: translateY(1px); }
.cmp-confirm-cancel {
  background: var(--surface-2, #f1f5f9);
  color: var(--text-sm, #374151);
}
.cmp-confirm-cancel:hover { background: var(--border, #e2e8f0); }
.cmp-confirm-primary {
  background: var(--nav-bg, #0f172a);
  color: #fff;
}
.cmp-confirm-primary:hover { background: #1e293b; }
.cmp-confirm-danger {
  background: #dc2626;
  color: #fff;
}
.cmp-confirm-danger:hover { background: #b91c1c; }

/* ── Breadcrumbs ──────────────────────────────────────────────
   Navegación contextual en páginas anidadas. Render via cmp_breadcrumbs(). */
.cmp-breadcrumbs {
  display: flex; align-items: center;
  gap: .5rem; flex-wrap: wrap;
  font-size: .8rem;
  color: var(--text-muted);
  margin-bottom: .75rem;
}
.cmp-breadcrumbs a {
  color: var(--text-sm);
  text-decoration: none;
  transition: color .12s;
}
.cmp-breadcrumbs a:hover { color: var(--text); }
.cmp-breadcrumb-sep {
  color: var(--text-xs);
  font-size: .75rem;
}
.cmp-breadcrumb-current {
  color: var(--text);
  font-weight: 600;
}

/* ── Utilidad: fade horizontal en zonas con scroll-x ──────────
   Indica visualmente que hay más contenido a la derecha. Usar en
   `.stats-strip`, `.mt-tabs`, `.cb-chips`, `.view-tabs`, etc. */
.fade-scroll-x {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}

/* ── Touch: en dispositivos sin hover, forzar opacity 1 en
   elementos que dependen de :hover para revelarse (botones de
   acción dentro de bloques en mi-dia, etc.) ──────────────────── */
@media (hover: none) {
  .md-block-actions { opacity: 1 !important; }
}

/* ── Section toggle (colapsable) ─────────────────────────────── */
/* Reset bulletproof: los <button> en macOS/Chrome a veces inyectan
   un background light por -webkit-appearance, ignorando background:none.
   Por eso el appearance:none + box-shadow:none + font-family:inherit. */
.sidebar-section-toggle,
.sidebar-section-toggle:focus,
.sidebar-section-toggle:active {
  display: flex !important;
  align-items: center;
  gap: .4rem;
  width: 100%;
  padding: .75rem .75rem .25rem;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: none;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer;
  font-family: inherit;
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #5a6779;
  text-align: left;
  transition: color .12s;
  margin: 0;
  line-height: 1.2;
  padding: 1.1rem .9rem .4rem !important;
}
.sidebar-section-toggle:hover { color: var(--sb-accent); }
.sidebar-section-toggle > span:first-child { flex: 1; }
.sidebar-section-count {
  font-size: .6rem;
  color: #94a3b8;
  font-weight: 700;
  margin-left: .35rem;
}
.sidebar-section-chevron {
  font-size: .65rem;
  color: #6b7d95;
  transition: transform .2s;
  flex-shrink: 0;
}
.sidebar-section-toggle.is-collapsed .sidebar-section-chevron {
  transform: rotate(-90deg);
}
.sidebar-section-body {
  overflow: hidden;
}
.sidebar-section-body.is-collapsed {
  display: none !important;
}
.sidebar-section-empty {
  padding: .4rem .75rem;
  font-size: .7rem;
  color: #475569;
  font-style: italic;
}
.sidebar-section-empty a { color: #6366f1; text-decoration: none; }
.sidebar-section-empty a:hover { text-decoration: underline; }
/* Footer variant: less top padding (sits below "Notificaciones" button) */
.sidebar-section-toggle-footer {
  padding-top: .35rem;
  padding-bottom: .15rem;
}
.sidebar-section-body-footer {
  padding-bottom: .25rem;
}

/* ── Clientes ────────────────────────────────────────────────── */
.sidebar-client-toggle {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .4rem .75rem;
  border-radius: .6rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .75rem;
  font-weight: 600;
  color: var(--sb-text);
  text-align: left;
  transition: .12s;
}
.sidebar-client-toggle:hover { background: var(--sb-active-bg); color: var(--sb-text-hover); }
.sidebar-client-dot { width: 6px; height: 6px; border-radius: 50%; background: #475569; flex-shrink: 0; }
.sidebar-client-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-client-chevron { font-size: .65rem; color: #475569; transition: transform .2s; flex-shrink: 0; }

.sidebar-client-links { padding-left: 1.75rem; display: flex; flex-direction: column; gap: .05rem; }
.sidebar-sub-link {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .6rem; border-radius: .5rem;
  font-size: .72rem; font-weight: 500; color: #64748b;
  text-decoration: none; transition: .12s;
}
.sidebar-sub-link i { font-size: .72rem; width: .85rem; text-align: center; }
.sidebar-sub-link:hover { background: var(--sb-active-bg); color: var(--sb-text-hover); }
.sidebar-sub-link.active {
  background: var(--sb-active-bg);
  color: var(--sb-text-hover);
  font-weight: var(--fw-bold, 700);
}

/* ── Badge · Sprint 36 Workloops revamp ──────────────────────────
   Circular cuando es 1 dígito (20×20px), pill ovalado natural cuando
   son 2+ caracteres. width:auto + min-width=height = círculo perfecto. */
.sidebar-badge {
  font-size: .68rem; font-weight: 700;
  min-width: 20px; width: auto; height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  text-align: center;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
  letter-spacing: -.01em;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.sidebar-badge-red  { background: var(--sb-badge-red); color: #fff; }
.sidebar-badge-blue { background: #3b82f6; color: #fff; }

/* ── Footer ──────────────────────────────────────────────────── */
.sidebar-footer {
  padding: .5rem .6rem;
  border-top: 1px solid var(--sb-border);
  flex-shrink: 0;
}
.sidebar-link-footer { margin: 0; }

/* ── Overlay mobile ──────────────────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 1039;
  background: rgba(0,0,0,.45);
}
.sidebar-overlay.show { display: block; }

/* ── Hamburguesa mobile ──────────────────────────────────────── */
.sidebar-hamburger {
  display: none;
  position: fixed; top: .75rem; left: .75rem; z-index: 1041;
  background: var(--sb-bg); color: #fff; border: none;
  width: 38px; height: 38px; border-radius: .55rem;
  font-size: 1.1rem; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Sprint 36 · El sidebar arranca DEBAJO del mobile-topbar para que el
     contenido del top (brand / user / search) no quede tapado. El topbar
     mantiene z-index:1050 por encima del sidebar (z-index:1040). */
  .app-sidebar {
    transform: translateX(-100%);
    width: 240px;
    top: calc(54px + env(safe-area-inset-top, 0px));
    height: calc(100vh - 54px - env(safe-area-inset-top, 0px));
    bottom: auto;
  }
  .app-sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.3);
  }
  .sidebar-hamburger { display: flex; align-items: center; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   CALENDARIO
═══════════════════════════════════════════════════════════════ */
.cal-wrap { background: #fff; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; }
.cal-header { display: flex; align-items: center; gap: .75rem; padding: .85rem 1.25rem; border-bottom: 1px solid var(--border); }
.cal-title { font-size: 1rem; font-weight: 800; color: var(--text); flex: 1; }
.cal-nav-btn { background: none; border: 1px solid var(--border); border-radius: .5rem; padding: .3rem .6rem; cursor: pointer; color: var(--text-muted); font-size: .85rem; transition: .12s; }
.cal-nav-btn:hover { background: var(--bg); color: var(--text); }

/* FullCalendar overrides */
.fc { font-family: system-ui, -apple-system, sans-serif !important; font-size: .8rem !important; }
.fc .fc-toolbar-title { font-size: 1rem !important; font-weight: 800 !important; color: var(--text) !important; }
.fc .fc-button { background: none !important; border: 1px solid var(--border) !important; color: var(--text-muted) !important; font-size: .72rem !important; font-weight: 700 !important; box-shadow: none !important; border-radius: .5rem !important; padding: .3rem .65rem !important; }
.fc .fc-button:hover { background: var(--bg) !important; color: var(--text) !important; }
.fc .fc-button-active, .fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--text) !important; color: #fff !important; border-color: var(--text) !important; }
.fc .fc-daygrid-day { min-height: 80px; }
.fc .fc-daygrid-day-number { font-size: .72rem; font-weight: 700; color: var(--text-muted); padding: .4rem !important; }
.fc .fc-day-today { background: #f0f9ff !important; }
.fc .fc-day-today .fc-daygrid-day-number { color: #0ea5e9 !important; font-weight: 900 !important; }
.fc .fc-event { border-radius: .4rem !important; border: none !important; font-size: .7rem !important; font-weight: 700 !important; padding: .1rem .35rem !important; cursor: pointer !important; }
.fc .fc-event:hover { opacity: .85 !important; }
.fc .fc-col-header-cell-cushion { font-size: .7rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .07em !important; color: var(--text-muted) !important; text-decoration: none !important; padding: .5rem !important; }
.fc .fc-timegrid-slot { height: 40px !important; }
.fc .fc-list-event-title a { color: var(--text) !important; font-size: .8rem !important; }

/* ── Leyenda filtros del calendario ──────────────────────────── */
.cal-legend { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--border); }
.cal-legend-item { display: flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; color: var(--text-muted); cursor: pointer; padding: .2rem .6rem; border-radius: 2rem; border: 1.5px solid transparent; transition: .12s; }
.cal-legend-item:hover, .cal-legend-item.active { border-color: currentColor; }
.cal-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ── Popover de evento ───────────────────────────────────────── */
.cal-popover {
  position: fixed; z-index: 9999;
  background: #fff; border: 1px solid var(--border);
  border-radius: .85rem; box-shadow: 0 8px 32px rgba(0,0,0,.12);
  min-width: 260px; max-width: 320px;
  padding: 1rem;
  pointer-events: auto;
}
.cal-popover-close {
  position: absolute; top: .6rem; right: .75rem;
  background: none; border: none; cursor: pointer;
  font-size: 1rem; color: var(--text-muted); line-height: 1;
}
.cal-popover-title { font-size: .9rem; font-weight: 800; color: var(--text); margin-bottom: .5rem; padding-right: 1.5rem; }
.cal-popover-meta { font-size: .72rem; color: var(--text-muted); display: flex; flex-direction: column; gap: .25rem; }
.cal-popover-meta span { display: flex; align-items: center; gap: .4rem; }

/* ═══════════════════════════════════════════════════════════════
   MAIN CONTENT — área derecha del sidebar
═══════════════════════════════════════════════════════════════ */
.main-content {
  min-height: 100vh;
  padding: 1.5rem 1.75rem 2rem;
}
@media (max-width: 768px) {
  .main-content { padding: 3.5rem 1rem 2rem; }
}

/* Quitar padding-top legacy en páginas con sidebar */
body.has-sidebar { padding-top: 0 !important; }

/* ── Notif banner auto-tarea (P1.3) ──────────────────────────── */
.autotarea-toast {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  background: #0f172a;
  color: #fff;
  border-radius: .875rem;
  padding: .85rem 1.1rem;
  min-width: 280px; max-width: 360px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  z-index: 9999;
  display: flex; align-items: flex-start; gap: .75rem;
  animation: slideUpIn .3s ease;
  font-size: .82rem;
}
.autotarea-toast-icon { font-size: 1.3rem; flex-shrink: 0; }
.autotarea-toast-body { flex: 1; }
.autotarea-toast-title { font-weight: 700; font-size: .85rem; margin-bottom: .2rem; }
.autotarea-toast-sub   { color: #94a3b8; font-size: .75rem; line-height: 1.4; }
.autotarea-toast-link  { display: inline-flex; align-items: center; gap: .3rem; color: #818cf8; font-size: .73rem; font-weight: 700; margin-top: .4rem; text-decoration: none; }
.autotarea-toast-link:hover { color: #a5b4fc; }
.autotarea-toast-close { background: none; border: none; color: #475569; cursor: pointer; font-size: 1rem; padding: 0; flex-shrink: 0; }
@keyframes slideUpIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   NOTIF POPUP — dropdown de notificaciones en sidebar
   Sprint 21 · Unificado con el lenguaje visual de .sidebar-flyout:
   mismo radio, sombra, bordes y paleta oscura. Mantiene la
   estructura interna (header con acciones, lista scroll, footer)
   porque el flyout vanilla no la cubre.
═══════════════════════════════════════════════════════════════ */
.notif-popup {
  position: fixed;
  left: calc(var(--sb-width) + 8px);
  bottom: 12px;
  width: 320px;
  max-height: 480px;
  background: var(--sb-bg);
  border: 1px solid var(--sb-border);
  border-radius: .55rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  z-index: 2000;
  flex-direction: column;
  overflow: hidden;
  animation: notifPopupIn .15s ease;
}
/* Cuando el sidebar está colapsado, anclar al ancho colapsado igual que el flyout. */
body.sidebar-collapsed .notif-popup {
  left: calc(var(--sb-width-collapsed) + 6px);
}
@media (max-width: 768px) {
  .notif-popup {
    left: 8px;
    bottom: 64px;
    width: calc(100vw - 16px);
  }
}
@keyframes notifPopupIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

.notif-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .65rem .5rem;
  border-bottom: 1px solid var(--sb-border);
  flex-shrink: 0;
}
.notif-popup-title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sb-text);
}
.notif-popup-action {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--sb-text);
  font-size: .85rem;
  padding: .25rem .4rem;
  border-radius: .35rem;
  text-decoration: none;
  line-height: 1;
  transition: background .12s, color .12s;
}
.notif-popup-action:hover { background: var(--sb-active-bg); color: var(--sb-text-hover); }

.notif-popup-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sb-border) transparent;
  padding: .25rem;
}
.notif-popup-list::-webkit-scrollbar { width: 6px; }
.notif-popup-list::-webkit-scrollbar-thumb {
  background: var(--sb-border); border-radius: 3px;
}

.notif-popup-loading,
.notif-popup-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 2rem 1rem;
  color: var(--sb-text);
  font-size: .78rem;
}
.notif-popup-loading i { font-size: 1.2rem; }
.notif-popup-empty i   { font-size: 1.5rem; opacity: .6; }

.notif-popup-item {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .5rem .55rem;
  border-radius: .35rem;
  text-decoration: none;
  color: var(--sb-text-hover);
  cursor: pointer;
  transition: background .12s;
  position: relative;
}
.notif-popup-item + .notif-popup-item { margin-top: .15rem; }
.notif-popup-item:hover  { background: var(--sb-active-bg); }
/* No leídas: borde-left azul + bg ligeramente tinted, sin contrastar con tema. */
.notif-popup-item.unread {
  background: rgba(59, 130, 246, .08);
  border-left: 2px solid #3b82f6;
  padding-left: calc(.55rem - 2px);
}
.notif-popup-item.unread:hover { background: rgba(59, 130, 246, .14); }

.notif-popup-icon {
  font-size: 1rem; flex-shrink: 0; margin-top: .05rem;
  color: var(--sb-text);
}
.notif-popup-item.unread .notif-popup-icon { color: #93c5fd; }
.notif-popup-body { flex: 1; min-width: 0; }
.notif-popup-item-title {
  font-size: .78rem; font-weight: 600;
  color: var(--sb-text-hover); line-height: 1.3;
}
.notif-popup-item-msg {
  font-size: .7rem; color: var(--sb-text); margin-top: .1rem; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-popup-item-time {
  font-size: .65rem; color: var(--sb-text); margin-top: .2rem;
  opacity: .7;
}
.notif-popup-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #3b82f6; flex-shrink: 0; margin-top: .4rem;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, .2);
}

.notif-popup-footer {
  padding: .45rem .55rem;
  border-top: 1px solid var(--sb-border);
  text-align: center;
  flex-shrink: 0;
}
.notif-popup-ver-todas {
  font-size: .72rem;
  font-weight: 600;
  color: var(--sb-text);
  text-decoration: none;
  display: inline-block;
  padding: .25rem .5rem;
  border-radius: .35rem;
  transition: background .12s, color .12s;
}
.notif-popup-ver-todas:hover {
  background: var(--sb-active-bg);
  color: var(--sb-text-hover);
}

/* Spin animation for loading */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: spin .8s linear infinite; }

/* ═══════════════════════════════════════════════════════════════
   SKELETON LOADERS — placeholders animados (replace "Cargando…")
═══════════════════════════════════════════════════════════════ */
@keyframes skel-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skel {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg,
    #eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
}
/* Variantes */
.skel-line   { height: .85em; margin: .35em 0; }
.skel-line.w-25  { width: 25%; }
.skel-line.w-40  { width: 40%; }
.skel-line.w-60  { width: 60%; }
.skel-line.w-75  { width: 75%; }
.skel-line.w-90  { width: 90%; }
.skel-circle { border-radius: 50%; width: 36px; height: 36px; flex-shrink: 0; }
.skel-card {
  padding: .85rem 1rem;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .5rem;
  animation: none; /* el shimmer va en los hijos */
}
.skel-card .skel-body { flex: 1; min-width: 0; }
.skel-list { padding: .5rem 0; }
/* Skeleton para fila de tarea (reemplaza .mt-item / .tarea-row) */
.skel-task-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  margin-bottom: .4rem;
}
/* Skeleton para mensaje de chat */
.skel-chat-msg {
  display: flex; gap: .7rem;
  padding: .75rem 1.25rem;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — refuerzos globales (≤ 768px)
   No tocar el desktop: todas las reglas viven dentro de @media.
   Estrategia: tablas con scroll horizontal, padding reducido,
   sidebar como drawer, modales/drawers full-width, command-bar
   compacta. Mantiene el look-and-feel desktop intacto.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Evitar scroll horizontal accidental en toda la app */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* ── Sidebar / hamburguesa ─────────────────────────────────── */
  /* Garantizar que la hamburguesa siempre se vea, incluso si
     alguna página inyecta su propio command-bar (.cb) sticky.
     (Solo se renderiza si la página incluye nav.php, así que no
     hace falta ocultarla manualmente en páginas sin sidebar.) */
  .sidebar-hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 1060 !important; /* > .cb (1040) */
  }

  /* Cuerpo del documento — quitar padding-left aplicado en desktop */
  body.has-sidebar { padding-left: 0 !important; }

  /* Cuando el sidebar está abierto, fijamos el body para evitar
     que el contenido de fondo scrollee. */
  body.sidebar-open { overflow: hidden; }

  /* ── Main content — padding reducido. El espacio arriba lo
        provee la mobile-topbar (54px) vía body.has-sidebar. ────── */
  .main-content { padding: 1rem .85rem 1.5rem; }

  /* ── Command bar / navbar superior ────────────────────────── */
  .cb-top {
    padding: .55rem .85rem;
    gap: .5rem;
  }
  .cb-client { font-size: .82rem; }
  .cb-title  { font-size: .78rem; }
  .cb-month  { font-size: .78rem; padding: .25rem .55rem; }
  .cb-mode   { font-size: .68rem; padding: .2rem .55rem; }
  .cb-btn    { font-size: .68rem; padding: .25rem .55rem; }
  .cb-actions { gap: .3rem; }
  .cb-actions .cb-btn:nth-child(n+3) { display: none; } /* ocultar acciones secundarias */
  .cb-chips {
    padding: .35rem .85rem; gap: .3rem;
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cb-chips::-webkit-scrollbar { display: none; }
  .cb-chips .sc { flex-shrink: 0; }

  /* Compensar cuando es una sola línea o dos */
  .pt-nav-1 { padding-top: 52px; }
  .pt-nav-2 { padding-top: 96px; }

  /* ── Tablas — scroll horizontal automático ────────────────── */
  /* Cualquier .tbl dentro de su .tbl-wrap puede ser más ancha
     que el viewport: damos overflow-x al contenedor y un min-width
     más generoso (subido de 640→900) para que las columnas no se
     apretujen en mobile. Sprint 19 · Aplicado a cliente_dashboard,
     inteligencia y metricas (las 3 páginas que usan .tbl). */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl-wrap > .tbl { min-width: 900px; }
  .tbl th, .tbl td { padding: .5rem .55rem; }
  /* Acciones nunca wrap a 2 líneas */
  .tbl th.col-acciones, .tbl td.col-acciones,
  .tbl th[class*="action"], .tbl td[class*="action"] {
    white-space: nowrap;
  }

  /* Cualquier .table de Bootstrap envuelta en un wrapper genérico */
  .table-responsive { -webkit-overflow-scrolling: touch; }

  /* ── Surface / paddings ───────────────────────────────────── */
  .surface-p { padding: 1rem 1rem; }

  /* ── Stats strip / KPI grid ───────────────────────────────── */
  .stats-strip {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .4rem;
  }
  .stat-card { padding: .55rem .65rem; }
  .stat-val { font-size: 1.05rem; }

  /* ── KPI cards ────────────────────────────────────────────── */
  .kpi { padding: .9rem 1rem; }
  .kpi-value { font-size: 1.25rem; }

  /* ── Action rail — apilar en móvil ────────────────────────── */
  .action-rail {
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  /* ── Preview / future grid ────────────────────────────────── */
  .preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: .45rem;
  }

  /* ── Filter chip bar — wrap mejor + búsqueda full-width ───── */
  .fcb { gap: .3rem; }
  .fcb > * { flex-shrink: 0; }
  .fcb-search { flex: 1 1 100%; }
  .fcb-search input { width: 100%; }
  .fc-chip select { max-width: 100px; }

  /* ── Page title más compacto ──────────────────────────────── */
  .page-title { font-size: 1rem; margin-bottom: .75rem; }

  /* ── Notif popup full width en móvil — ya existe, refuerzo ── */
  .notif-popup {
    left: 8px !important; right: 8px;
    width: auto !important;
    bottom: 12px !important;
    max-height: 70vh;
  }

  /* ── Bootstrap offcanvas / drawers — máximo el viewport ──── */
  .offcanvas-end, .offcanvas-start { width: min(92vw, 420px) !important; }
  /* Drawer de tarea con override propio (#drawerTarea: 500px) */
  #drawerTarea { width: min(94vw, 500px) !important; }

  /* ── Modales custom (chat.php #canalModal, etc.) ──────────── */
  .modal-dialog {
    margin: .5rem !important;
    max-width: calc(100vw - 1rem) !important;
  }

  /* ── Hub: tarjetas de cliente apiladas ────────────────────── */
  .cliente-card { width: 100% !important; }
  /* Footer wrap: con 4+ links y badges no cabe en un solo renglón */
  .hub-card-footer { padding: .4rem .75rem; gap: .5rem; flex-wrap: wrap; }

  /* (typography y tap targets viven en el bloque de abajo) */

  /* ── Sidebar search — el dropdown no debe taparse ─────────── */
  .sidebar-search-results {
    width: auto !important;
    left: 8px !important;
    right: 8px !important;
  }

  /* ── Calendario / FullCalendar — toolbar wrap y eventos sin
        cortar; vista 'list' es la más usable en móvil ───────── */
  .fc .fc-toolbar { flex-wrap: wrap; gap: .3rem; }
  .fc .fc-toolbar-title { font-size: .85rem !important; }
  .fc .fc-button { font-size: .72rem !important; padding: .35rem .6rem !important; min-height: 36px; }
  /* Celdas más bajas para que vista mes (6×7) no domine la pantalla */
  .fc .fc-daygrid-day { min-height: 44px; }
  /* Texto de evento legible (estaba .62rem ≈ 9px, ilegible) */
  .fc .fc-event { font-size: .72rem !important; padding: 1px 3px !important; }
  .fc .fc-daygrid-day-number { font-size: .8rem; }
  .cal-header { padding: .65rem .85rem; flex-wrap: wrap; }
  .cal-legend { padding: .55rem .85rem; gap: .35rem; }
  /* Popover de evento → bottom-sheet en móvil (evita salirse del viewport) */
  .cal-popover {
    position: fixed !important;
    left: 8px !important; right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    min-width: 0 !important; max-width: none !important;
    width: auto !important;
    border-radius: 16px !important;
    padding: 1rem 1.1rem !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,.18) !important;
    animation: notifPopupIn .18s ease;
  }
  .cal-popover-close { top: .85rem; right: 1rem; min-width: 32px; min-height: 32px; }
  .cal-popover-title { font-size: 1rem; }

  /* ── Toast auto-tarea no debe pisar la hamburguesa ────────── */
  .autotarea-toast {
    left: .75rem; right: .75rem; bottom: .75rem;
    min-width: 0; max-width: none;
  }

  /* ── Imágenes y media: nunca rebasar el contenedor ────────── */
  img, video, iframe { max-width: 100%; height: auto; }
}

/* Pantallas muy pequeñas (≤ 380px) — ajustes extra */
@media (max-width: 380px) {
  .cb-modes { display: none; } /* el "modos" del cb ocupa mucho */
  .cb-top { padding-left: 3.25rem; }
  .stats-strip { grid-template-columns: 1fr 1fr; }
  .preview-grid { grid-template-columns: 1fr 1fr; }
  .sidebar-hamburger { width: 34px; height: 34px; top: .55rem; left: .55rem; }
}

/* La top bar móvil vive en nav.php (con sus estilos inline) para
   que se cargue junto con su markup. Aquí solo dejamos la regla
   global de esconder la hamburguesa flotante en móvil. */

/* ═══════════════════════════════════════════════════════════════
   MOBILE UX UPGRADE — capa "casi mobile-first" (≤ 768px)
   Encima de las reglas mobile básicas: tap targets ≥44px,
   inputs 16px (anti iOS zoom), bottom-sheets, safe-area, etc.
   100% scoped a @media — desktop intacto.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Safe-area iPhone con notch / home indicator ──────────── */
  /* Variables disponibles en cualquier regla del bloque. */
  body { --sa-top: env(safe-area-inset-top, 0px);
         --sa-bot: env(safe-area-inset-bottom, 0px);
         --sa-left: env(safe-area-inset-left, 0px);
         --sa-right: env(safe-area-inset-right, 0px); }

  /* Toast y notif-popup respetan el home-indicator. La top bar
     ya cubre el notch arriba — la hamburguesa flotante está oculta. */
  .autotarea-toast {
    bottom: calc(.75rem + var(--sa-bot)) !important;
  }
  .notif-popup {
    bottom: calc(12px + var(--sa-bot)) !important;
  }
  /* main-content: padding lateral con safe-area (notch landscape) */
  .main-content {
    padding-left: max(.85rem, var(--sa-left));
    padding-right: max(.85rem, var(--sa-right));
    padding-bottom: calc(1.5rem + var(--sa-bot));
  }

  /* ── Anti-zoom iOS: TODO input que escriba debe ser ≥16px ── */
  /* pwa_head.php pone .form-control y .form-select a .84rem con
     !important — necesitamos sobreescribirlo con !important. */
  input, textarea, select,
  .form-control, .form-select {
    font-size: 16px !important;
  }
  /* Inputs cómodos al tap */
  .form-control, .form-select {
    min-height: 44px;
    padding: .65rem .85rem !important;
    border-radius: .65rem !important;
  }
  textarea.form-control { min-height: 80px; line-height: 1.45; }

  /* Labels más legibles */
  .form-label { font-size: .82rem; font-weight: 600; margin-bottom: .35rem; }

  /* ── Tap targets globales (≥ 44×44px) ─────────────────────── */
  .btn {
    min-height: 44px;
    padding: .55rem 1rem;
    font-size: .95rem;
    border-radius: .65rem !important;
  }
  .btn-sm {
    min-height: 38px;
    padding: .45rem .85rem;
    font-size: .88rem !important; /* override de pwa_head .78rem */
  }
  /* Iconos solos: mantenerlos cuadrados ≥40px */
  .btn-icon, .cb-arrow, .cb-btn[data-icon-only], .notif-popup-action {
    min-width: 40px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Chips del command bar */
  .cb-mode, .cb-btn {
    min-height: 38px;
    font-size: .82rem;
    padding: .45rem .85rem;
  }
  .cb-month {
    min-height: 38px;
    padding: .45rem .85rem;
    font-size: .85rem;
    display: inline-flex; align-items: center;
  }
  /* Status chips (cb-chips row) */
  .sc {
    min-height: 36px;
    font-size: .78rem;
    padding: .35rem .85rem;
  }
  /* Filtro chips (.fc-chip y .filtro-chip) */
  .fc-chip, .filtro-chip {
    min-height: 38px;
    font-size: .82rem;
    padding: .45rem .9rem;
  }
  .fcb-search { min-height: 38px; padding: .35rem .85rem; }
  .fc-clear { min-height: 38px; padding: .45rem .85rem; }

  /* Sidebar links — más cómodos al tap */
  .sidebar-link, .sidebar-client-toggle {
    min-height: 44px;
    padding: .65rem .85rem;
    font-size: .88rem;
  }
  .sidebar-link i, .sidebar-client-toggle i { font-size: 1rem; }
  .sidebar-sub-link {
    min-height: 38px;
    padding: .5rem .75rem;
    font-size: .82rem;
  }

  /* Status badges con un poco más de aire */
  .st-badge, .status-chip { font-size: .78rem; padding: .3em .75em; }

  /* Botón cerrar de Bootstrap — más grande */
  .btn-close {
    width: 18px; height: 18px;
    padding: .85rem !important;
    background-size: 14px;
  }

  /* Eliminar tap highlight feo y delay táctil */
  a, button, .btn, .sc, .fc-chip, .sidebar-link, .filtro-chip,
  .cb-mode, .cb-arrow, .cb-month, .notif-popup-action,
  .preview-card, .cliente-card {
    -webkit-tap-highlight-color: rgba(99,102,241,.15);
    touch-action: manipulation;
  }

  /* ── Tipografía — más legible ─────────────────────────────── */
  body { font-size: 15px; }
  .page-title { font-size: 1.15rem; }
  .kpi-value { font-size: 1.4rem; }
  .stat-val  { font-size: 1.15rem; }
  .contenido-titulo { font-size: .92rem; }

  /* Tablas: filas más altas para tap */
  .tbl td { padding: .75rem .65rem; }
  .tbl th { padding: .55rem .65rem; }

  /* ── Tareas: filas con tap height ─────────────────────────── */
  .tarea-row, .mi-tarea-row, .dash-row {
    min-height: 56px;
    padding-top: .65rem !important; padding-bottom: .65rem !important;
  }

  /* Hub: footer card con tap más cómodo */
  .hub-card-footer-link {
    min-height: 40px;
    display: inline-flex; align-items: center;
    font-size: .8rem;
  }

  /* ── Bootstrap Offcanvas → Bottom Sheet ───────────────────── */
  /* offcanvas-end/start: en lugar de slide lateral, deslizan
     desde abajo, full-width, esquinas redondeadas arriba.
     IMPORTANTE: respeta la topbar móvil (54px + safe-area-top)
     para que el contenido no quede tapado por arriba. */
  .offcanvas-end, .offcanvas-start {
    top: calc(54px + env(safe-area-inset-top, 0px) + 8px) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important; /* el top ya limita la altura */
    border: none !important;
    border-top: 1px solid rgba(0,0,0,.06) !important;
    border-radius: 18px 18px 0 0 !important;
    transform: translateY(100%) !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,.18) !important;
    padding-bottom: var(--sa-bot);
  }
  .offcanvas-end.show, .offcanvas-end.showing,
  .offcanvas-start.show, .offcanvas-start.showing {
    transform: translateY(0) !important;
  }
  .offcanvas-end.hiding, .offcanvas-start.hiding {
    transform: translateY(100%) !important;
  }
  /* Drag handle visual al tope del sheet */
  .offcanvas-end::before, .offcanvas-start::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: #d1d5db; border-radius: 2px;
    margin: .5rem auto .25rem;
    flex-shrink: 0;
  }
  .offcanvas-header { padding: .85rem 1rem .65rem; border-bottom: 1px solid #f1f5f9; }
  .offcanvas-body   { padding: 1rem; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* #drawerTarea hereda lo de offcanvas-end (bottom-sheet, top con topbar) */
  #drawerTarea {
    width: 100% !important;
    max-height: none !important;
  }

  /* ── Modal Bootstrap → Bottom Sheet ───────────────────────── */
  .modal { padding: 0 !important; }
  /* El .modal-dialog ocupa todo el ancho y se ancla abajo, respetando topbar */
  .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    position: fixed !important;
    top: calc(54px + env(safe-area-inset-top, 0px) + 8px) !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    transform: translateY(100%);
    transition: transform .25s ease;
  }
  .modal.show .modal-dialog { transform: translateY(0); }
  .modal-content {
    border-radius: 18px 18px 0 0 !important;
    border: none !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,.18) !important;
    height: 100%;
    max-height: none;
    padding-bottom: var(--sa-bot);
    display: flex;
    flex-direction: column;
  }
  .modal-header { padding: .85rem 1rem .65rem; flex-shrink: 0; }
  .modal-body   { padding: 1rem; flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-footer { padding: .65rem 1rem; gap: .5rem; }
  .modal-footer .btn { flex: 1; } /* botones del footer en línea ocupan ancho parejo */
  /* Drag handle también para modales */
  .modal-content::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: #d1d5db; border-radius: 2px;
    margin: .5rem auto .25rem;
    flex-shrink: 0;
  }
  /* Bootstrap modal-fullscreen-* lo dejamos como está (full pantalla incl. topbar) */
  .modal-fullscreen, .modal-fullscreen-sm-down {
    top: 0 !important;
    transform: none !important;
  }
  .modal-fullscreen .modal-content,
  .modal-fullscreen-sm-down .modal-content {
    border-radius: 0 !important;
    height: 100vh;
    max-height: 100vh;
  }
  .modal-fullscreen .modal-content::before,
  .modal-fullscreen-sm-down .modal-content::before { display: none; }

  /* Modales custom inline (chat.php #canalModal) — usan
     position:fixed con flex centering. Forzar bottom-sheet feel
     vía estilos del wrapper de contenido. */
  #canalModal { align-items: flex-end !important; }
  #canalModal > div {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: 92vh !important;
    padding-bottom: var(--sa-bot);
  }

  /* ── Cards y superficies con más aire ─────────────────────── */
  .surface-p { padding: 1.1rem; }
  .kpi { padding: 1.1rem 1.15rem; }
  .stat-card { padding: .75rem .85rem; }
  .ar-card { padding: 1rem 1.1rem; }
  .preview-card { padding: .85rem; }

  /* Action rail items con más altura tap */
  .ar-item { padding: .5rem .65rem; min-height: 36px; display: flex; align-items: center; }

  /* Búsqueda global · Sprint 30 · override de padding removido — chocaba
     con el diseño de nav.php (icono/kbd absolutos). El input es readonly
     (trigger de ⌘K) así que iOS no hace zoom; no necesita font-size:16px. */

  /* ── Scroll suave / momentum en cualquier scroll ─────────── */
  .tbl-wrap, .cb-chips, .filtros-bar, .view-tabs,
  .grupo-section, .kanban-wrap, .modal-body, .offcanvas-body,
  .chat-mensajes, .notif-popup-list {
    -webkit-overflow-scrolling: touch;
  }
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTES UI — clases consumidas por components.php (cmp_*)
   Centralizan patrones que antes vivían inline en cada página.
   Todas tienen overrides en la sección DARK MODE más abajo.
═══════════════════════════════════════════════════════════════ */

/* ── Card genérica ───────────────────────────────────────────── */
.cmp-card {
  background: var(--surface);
  border-radius: 1rem;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  margin-bottom: 1rem;
}
.cmp-card-p { padding: 1.5rem; }
.cmp-card + .cmp-card { margin-top: 1rem; }
.cmp-card-title {
  font-size: var(--fs-heading); font-weight: var(--fw-bold);
  color: var(--text); margin: 0 0 .75rem 0;
}

/* ── Section label (uppercase muted heading) ─────────────────── */
.cmp-section-label {
  font-size: var(--fs-meta);
  color: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .5rem;
}

/* ── Empty state base (compatible con usos existentes en páginas) ─ */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.empty-state i {
  font-size: 2rem;
  display: block;
  margin-bottom: .65rem;
  color: var(--text-xs);
}
.empty-state strong {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-sm);
  display: block;
}

/* ── Empty state (variante explícita vía cmp_empty_state) ────── */
.cmp-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--text-muted);
  background: var(--surface);
  border-radius: 1rem;
  border: 1px solid var(--border);
}
.cmp-empty-icon {
  font-size: 2.25rem;
  display: block;
  margin-bottom: .65rem;
  color: var(--text-xs);
  opacity: .7;
}
.cmp-empty-title {
  font-size: var(--fs-title);
  font-weight: var(--fw-semi);
  color: var(--text-sm);
  margin-bottom: .25rem;
}
.cmp-empty-msg {
  font-size: var(--fs-body);
  color: var(--text-muted);
  margin-bottom: .85rem;
}
.cmp-empty-cta {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--fs-body);
  padding: .45rem 1rem;
  background: var(--nav-bg);
  color: #fff !important;
  border-radius: .5rem;
  text-decoration: none;
  font-weight: var(--fw-semi);
  margin-top: .5rem;
}
.cmp-empty-cta:hover { background: #1e293b; color: #fff !important; }

/* ── Alert con ícono integrado ───────────────────────────────── */
.cmp-alert {
  border-radius: .75rem;
  border-width: 0;
  padding: .7rem 1rem;
  font-size: var(--fs-body);
  display: flex; align-items: flex-start; gap: .15rem;
}
.cmp-alert.alert-info    { background: #eff6ff; color: #1e40af; border-left: 4px solid #3b82f6; }
.cmp-alert.alert-success { background: #f0fdf4; color: #15803d; border-left: 4px solid #16a34a; }
.cmp-alert.alert-warning { background: #fffbeb; color: #92400e; border-left: 4px solid #d97706; }
.cmp-alert.alert-danger  { background: #fef2f2; color: #b91c1c; border-left: 4px solid #dc2626; }

/* ── Form row ────────────────────────────────────────────────── */
.cmp-form-row { margin-bottom: 1rem; }
.cmp-form-row .form-label { margin-bottom: .35rem; color: var(--text-sm); }

/* Dark mode overrides para componentes */
html[data-theme="dark"] .cmp-card,
html[data-theme="dark"] .cmp-empty-state {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .cmp-empty-title { color: var(--text); }
html[data-theme="dark"] .cmp-empty-msg   { color: var(--text-muted); }
html[data-theme="dark"] .cmp-empty-icon  { color: var(--text-muted); }
html[data-theme="dark"] .cmp-alert.alert-info    { background: rgba(59,130,246,.12); color: #93c5fd; }
html[data-theme="dark"] .cmp-alert.alert-success { background: rgba(34,197,94,.12); color: #86efac; }
html[data-theme="dark"] .cmp-alert.alert-warning { background: rgba(217,119,6,.15); color: #fcd34d; }
html[data-theme="dark"] .cmp-alert.alert-danger  { background: rgba(220,38,38,.12); color: #fca5a5; }
html[data-theme="dark"] .cmp-empty-cta {
  background: var(--surface-2);
  color: var(--text) !important;
}
html[data-theme="dark"] .cmp-empty-cta:hover { background: #374151; color: var(--text) !important; }

/* ── Auth layout (login, recuperar, setup) ───────────────────── */
.auth-page {
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.auth-card {
  background: var(--surface);
  border-radius: 1.25rem;
  box-shadow: 0 4px 32px rgba(0,0,0,.08);
  padding: 2.5rem;
  width: 100%;
  max-width: 440px;
  border: none;
}
.auth-brand {
  width: 52px; height: 52px;
  border-radius: .75rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 1.25rem; overflow: hidden;
  color: #fff;
  /* background se setea inline con el color de marca del cliente */
}
.auth-brand img { width: 100%; height: 100%; object-fit: contain; }
.auth-card .form-control {
  border-radius: .65rem;
  padding: .65rem 1rem;
}
.auth-btn-primary {
  border-radius: .65rem;
  padding: .7rem;
  font-weight: 600;
  border: none;
  color: #fff;
  width: 100%;
  /* background se setea inline con el color de marca */
}
.auth-btn-primary:hover { opacity: .88; color: #fff; }
.auth-reset-url {
  background: var(--surface-2, #f8fafc);
  border: 1.5px dashed var(--border-md, #cbd5e1);
  border-radius: .65rem;
  padding: .85rem 1rem;
  font-size: .78rem;
  word-break: break-all;
  font-family: monospace;
  color: var(--text);
}

/* ── Pill toggle (filtros tipo "Todas"/"No leídas") ──────────── */
.pill-toggle {
  border-radius: 2rem;
  font-size: .78rem;
  font-weight: 700;
  padding: .3rem .85rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--surface);
  color: var(--text-sm);
  border: 1px solid var(--border);
  transition: background .12s, color .12s;
}
.pill-toggle:hover { background: var(--surface-2, #f1f5f9); }
.pill-toggle.active {
  background: var(--nav-bg);
  color: #fff;
  border-color: var(--nav-bg);
}
.pill-toggle.active:hover { background: #1e293b; color: #fff; }
.pill-toggle-count {
  background: #ef4444;
  color: #fff;
  border-radius: .25rem;
  font-size: .6rem;
  padding: .1rem .3rem;
  margin-left: .35rem;
}

/* ── Page header (h1 + subtitle pattern repetido) ────────────── */
.page-h1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 .25rem;
}
.page-sub {
  color: var(--text-muted);
  font-size: .85rem;
  margin: 0 0 1.25rem;
}
.page-wrap {
  padding: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}
.page-wrap-narrow {
  padding: 1.5rem;
  max-width: 720px;
  margin: 0 auto;
}

/* Dark mode overrides para los nuevos componentes */
html[data-theme="dark"] .auth-card { background: var(--surface) !important; }
html[data-theme="dark"] .auth-reset-url {
  background: var(--surface-2) !important;
  border-color: var(--border-md) !important;
  color: var(--text);
}
html[data-theme="dark"] .pill-toggle {
  background: var(--surface) !important;
  color: var(--text-sm) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .pill-toggle.active {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border-md) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — toggle vía [data-theme="dark"] en <html>.
   La preferencia se aplica antes del render (script en pwa_head.php)
   para evitar flash. Usa vars existentes + overrides puntuales.
═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --bg:        #0b1220;
  --surface:   #111827;
  --surface-2: #1f2937;
  --border:    #1f2937;
  --border-md: #374151;
  --text:      #f1f5f9;
  --text-sm:   #cbd5e1;
  --text-muted:#94a3b8;
  --text-xs:   #64748b;
  --page-bg:   #0b1220;
  --shadow-xs: 0 1px 4px rgba(0,0,0,.45);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.55);
  color-scheme: dark;
}

html[data-theme="dark"] body { background: var(--bg); color: var(--text); }

/* Surfaces: cualquier card/panel blanco baja a surface */
html[data-theme="dark"] .surface,
html[data-theme="dark"] .card,
html[data-theme="dark"] .ar-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .ses-card,
html[data-theme="dark"] .skel-card,
html[data-theme="dark"] .skel-task-row,
html[data-theme="dark"] .brief-card,
html[data-theme="dark"] .ret-card,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] [style*="background:#fff"]:not(.cl-fab):not(.bn-item):not(.mobile-bottomnav),
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"] {
  background: var(--surface) !important;
  color: var(--text);
  border-color: var(--border) !important;
}

/* Tipografía muted */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary { color: var(--text-muted) !important; }
html[data-theme="dark"] [style*="color:#0f172a"],
html[data-theme="dark"] [style*="color: #0f172a"] { color: var(--text) !important; }
html[data-theme="dark"] [style*="color:#374151"],
html[data-theme="dark"] [style*="color:#475569"] { color: var(--text-sm) !important; }
html[data-theme="dark"] [style*="color:#64748b"],
html[data-theme="dark"] [style*="color:#6b7280"] { color: var(--text-muted) !important; }
html[data-theme="dark"] [style*="color:#94a3b8"],
html[data-theme="dark"] [style*="color:#9ca3af"] { color: var(--text-xs) !important; }

/* Borders comunes hardcoded */
html[data-theme="dark"] [style*="border:1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border:1px solid #f1f5f9"],
html[data-theme="dark"] [style*="border-bottom:1px solid #f1f5f9"],
html[data-theme="dark"] [style*="border-top:1px solid #e5e7eb"] {
  border-color: var(--border) !important;
}

/* Bootstrap form controls */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-md);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--text-xs); }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
  background: var(--surface);
  color: var(--text);
  border-color: #6366f1;
  box-shadow: 0 0 0 .2rem rgba(99,102,241,.25);
}
html[data-theme="dark"] .input-group-text {
  background: var(--surface-2); color: var(--text-muted); border-color: var(--border-md);
}

/* Modales y offcanvas (bottom-sheets en móvil) */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas {
  background: var(--surface);
  color: var(--text);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .offcanvas-header { border-color: var(--border) !important; }
html[data-theme="dark"] .btn-close { filter: invert(1) brightness(.85); }

/* Alerts con paleta dark */
html[data-theme="dark"] .alert-info    { background:#1e3a5f; color:#bfdbfe; border-color:#1e40af; }
html[data-theme="dark"] .alert-success { background:#14532d; color:#bbf7d0; border-color:#15803d; }
html[data-theme="dark"] .alert-danger  { background:#7f1d1d; color:#fecaca; border-color:#991b1b; }
html[data-theme="dark"] .alert-warning { background:#78350f; color:#fde68a; border-color:#92400e; }

/* Tablas */
html[data-theme="dark"] .tbl thead th { background: var(--surface-2); color: var(--text-sm); }
html[data-theme="dark"] .tbl tbody tr:hover { background: rgba(255,255,255,.03); }
html[data-theme="dark"] .tbl tbody td,
html[data-theme="dark"] .tbl thead th { border-color: var(--border) !important; }

/* Notif popup */
html[data-theme="dark"] .notif-popup { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .notif-popup-item { border-bottom-color: var(--border); }
html[data-theme="dark"] .notif-popup-item:hover { background: var(--surface-2); }
html[data-theme="dark"] .notif-popup-item.unread { background: rgba(59,130,246,.1); }
html[data-theme="dark"] .notif-popup-item.unread:hover { background: rgba(59,130,246,.18); }

/* Sidebar search results (dropdown blanco) */
html[data-theme="dark"] .sidebar-search-results { background: var(--surface); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .sidebar-search-section { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
html[data-theme="dark"] .sidebar-search-item { color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .sidebar-search-item:hover,
html[data-theme="dark"] .sidebar-search-item.active { background: rgba(99,102,241,.18); color: var(--text); }

/* Bottom nav y top bar siguen siendo dark (ya lo eran), nada que cambiar */

/* Skeletons con shimmer en tono dark */
html[data-theme="dark"] .skel {
  background: linear-gradient(90deg, #1f2937 0%, #374151 50%, #1f2937 100%);
}

/* Mention dropdown */
html[data-theme="dark"] .mention-dropdown { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .mention-item { color: var(--text); border-bottom-color: var(--border); }
html[data-theme="dark"] .mention-item:hover,
html[data-theme="dark"] .mention-item.active { background: rgba(99,102,241,.18); }
html[data-theme="dark"] .mention-name { color: var(--text); }

/* Chat */
html[data-theme="dark"] .chat-canales { background: var(--surface-2); }
html[data-theme="dark"] .chat-canal-item { border-bottom-color: var(--border); }
html[data-theme="dark"] .chat-canal-item:hover { background: rgba(99,102,241,.12); }
html[data-theme="dark"] .chat-mensajes,
html[data-theme="dark"] .chat-canales-header,
html[data-theme="dark"] .chat-main-header,
html[data-theme="dark"] .chat-composer { background: var(--surface); border-color: var(--border) !important; }
html[data-theme="dark"] .chat-composer-box { background: var(--surface-2); border-color: var(--border); }
html[data-theme="dark"] .chat-msg-cuerpo { color: var(--text); }
html[data-theme="dark"] .chat-msg-autor  { color: var(--text); }
html[data-theme="dark"] .chat-day-divider::before,
html[data-theme="dark"] .chat-day-divider::after { background: var(--border); }

/* Mi Trabajo */
html[data-theme="dark"] .mt-list { background: transparent; }
html[data-theme="dark"] .mt-item { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .mt-item:hover { background: var(--surface-2); }
html[data-theme="dark"] .mt-tabs { border-bottom-color: var(--border); }
html[data-theme="dark"] .mt-toolbar { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .mt-search-input { background: var(--surface-2); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .mt-tipo-pill { background: var(--surface-2); color: var(--text-sm); border-color: var(--border); }
html[data-theme="dark"] .mt-tipo-pill.active { background: var(--text); color: var(--bg); }
html[data-theme="dark"] .mt-cliente-filter { background: var(--surface-2); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] #mt-status-menu { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] #mt-status-menu button { color: var(--text); }
html[data-theme="dark"] #mt-status-menu button:hover { background: var(--surface-2); }
html[data-theme="dark"] .mt-separator { color: var(--text-muted); }

/* Cliente dashboard — bienvenida y cargos extra */
html[data-theme="dark"] .cli-bienvenida {
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
  color: var(--text);
}
html[data-theme="dark"] .cl-month-bar { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .stats-strip { background: var(--surface-2); border-color: var(--border); }

/* FullCalendar */
html[data-theme="dark"] .fc { color: var(--text); }
html[data-theme="dark"] .fc-theme-standard td,
html[data-theme="dark"] .fc-theme-standard th,
html[data-theme="dark"] .fc-theme-standard .fc-scrollgrid { border-color: var(--border) !important; }
html[data-theme="dark"] .fc-day-today { background: rgba(99,102,241,.1) !important; }
html[data-theme="dark"] .fc-list-event:hover td { background: var(--surface-2) !important; }

/* Briefs / wizard */
html[data-theme="dark"] #wizardOverlay { background: var(--bg) !important; }
html[data-theme="dark"] .tipo-card,
html[data-theme="dark"] .red-card { background: var(--surface); border-color: var(--border-md); color: var(--text); }
html[data-theme="dark"] .opcion-chip { background: var(--surface-2); border-color: var(--border-md); color: var(--text); }
html[data-theme="dark"] .tipo-card.active,
html[data-theme="dark"] .red-card.active,
html[data-theme="dark"] .opcion-chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }

/* Dividers genéricos */
html[data-theme="dark"] hr { border-color: var(--border); }
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background:#f1f5f9"],
html[data-theme="dark"] [style*="background:#fafafa"],
html[data-theme="dark"] [style*="background:#fafff7"],
html[data-theme="dark"] [style*="background:#f9fafb"],
html[data-theme="dark"] [style*="background: #f8fafc"] {
  background: var(--surface-2) !important;
}

/* ── DARK MODE v2 — overrides agresivos para inline styles ───────────────── */

/* Headings sin color custom: forzar a texto claro */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 { color: var(--text); }

/* Más colores oscuros hardcoded → texto claro */
html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color:#111"],
html[data-theme="dark"] [style*="color: #111"],
html[data-theme="dark"] [style*="color:#1e293b"],
html[data-theme="dark"] [style*="color:#1f2937"],
html[data-theme="dark"] [style*="color:#111827"],
html[data-theme="dark"] [style*="color:#0a0a0a"],
html[data-theme="dark"] [style*="color:#212529"] {
  color: var(--text) !important;
}

/* Bootstrap text utilities */
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-black { color: var(--text) !important; }

/* Cualquier elemento con bg blanco/muy claro: surface dark + texto claro
   y FORZAR los hijos directos con color oscuro a texto claro también. */
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:#fff;"],
html[data-theme="dark"] [style*="background: #fff;"],
html[data-theme="dark"] [style*="background:#fff "],
html[data-theme="dark"] [style*="background:#fff)"],
html[data-theme="dark"] [style*="background:white"] {
  background: var(--surface) !important;
  color: var(--text);
}

/* Backgrounds amarillos/avisos hardcoded → mantener tonalidad pero más oscura */
html[data-theme="dark"] [style*="background:#fffbeb"],
html[data-theme="dark"] [style*="background:#fef3c7"],
html[data-theme="dark"] [style*="background:#fef9c3"] {
  background: rgba(217, 119, 6, .15) !important;
  border-color: rgba(217, 119, 6, .35) !important;
}
html[data-theme="dark"] [style*="background:#fef3c7"] *,
html[data-theme="dark"] [style*="background:#fffbeb"] * { color: #fde68a !important; }
html[data-theme="dark"] [style*="color:#92400e"],
html[data-theme="dark"] [style*="color:#b45309"],
html[data-theme="dark"] [style*="color:#78350f"] { color: #fde68a !important; }

/* Backgrounds rojos/errores */
html[data-theme="dark"] [style*="background:#fee2e2"],
html[data-theme="dark"] [style*="background:#fef2f2"],
html[data-theme="dark"] [style*="background:#fff1f2"] {
  background: rgba(220, 38, 38, .15) !important;
  border-color: rgba(220, 38, 38, .35) !important;
}
html[data-theme="dark"] [style*="color:#b91c1c"],
html[data-theme="dark"] [style*="color:#dc2626"],
html[data-theme="dark"] [style*="color:#991b1b"] { color: #fca5a5 !important; }

/* Backgrounds verdes/éxito */
html[data-theme="dark"] [style*="background:#dcfce7"],
html[data-theme="dark"] [style*="background:#f0fdf4"],
html[data-theme="dark"] [style*="background:#bbf7d0"] {
  background: rgba(34, 197, 94, .18) !important;
  border-color: rgba(34, 197, 94, .35) !important;
}
html[data-theme="dark"] [style*="color:#15803d"],
html[data-theme="dark"] [style*="color:#166534"],
html[data-theme="dark"] [style*="color:#14532d"] { color: #86efac !important; }

/* Backgrounds azules/info */
html[data-theme="dark"] [style*="background:#dbeafe"],
html[data-theme="dark"] [style*="background:#eff6ff"],
html[data-theme="dark"] [style*="background:#e0e7ff"],
html[data-theme="dark"] [style*="background:#eef2ff"] {
  background: rgba(59, 130, 246, .18) !important;
  border-color: rgba(59, 130, 246, .35) !important;
}
html[data-theme="dark"] [style*="color:#1d4ed8"],
html[data-theme="dark"] [style*="color:#1e40af"],
html[data-theme="dark"] [style*="color:#3730a3"] { color: #bfdbfe !important; }

/* Botones con fondo blanco/claro hardcoded — mantener legibles */
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-light {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-md);
}
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-outline-secondary:hover { background: var(--surface-2); color: var(--text); }

/* Notif page — items y títulos */
html[data-theme="dark"] .notif-row { background: var(--surface); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .notif-row.unread { background: rgba(59,130,246,.12); }
html[data-theme="dark"] .notif-row:hover { background: var(--surface-2); }
html[data-theme="dark"] .notif-title { color: var(--text); }
html[data-theme="dark"] .notif-msg   { color: var(--text-sm); }
html[data-theme="dark"] .notif-time  { color: var(--text-xs); }
html[data-theme="dark"] .notif-popup-item-title { color: var(--text) !important; }
html[data-theme="dark"] .notif-popup-item-msg   { color: var(--text-muted) !important; }

/* Hub - cards de cliente */
html[data-theme="dark"] .cliente-card { background: var(--surface); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .cliente-card .hub-card-footer { background: var(--surface-2); border-color: var(--border); }
html[data-theme="dark"] .hub-card-footer-link { color: var(--text-sm); }
html[data-theme="dark"] .hub-card-footer-link:hover { color: var(--text); background: rgba(255,255,255,.05); }

/* Cliente dashboard — tablas y wrappers blancos */
html[data-theme="dark"] .tbl-wrap { background: var(--surface) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .tbl-row-revision,
html[data-theme="dark"] .tbl-row-cambios,
html[data-theme="dark"] .tbl-row-aprobado,
html[data-theme="dark"] .tbl-row-produccion,
html[data-theme="dark"] .tbl-row-revision td,
html[data-theme="dark"] .tbl-row-cambios td,
html[data-theme="dark"] .tbl-row-aprobado td { color: var(--text); }
html[data-theme="dark"] .tbl-row-produccion td,
html[data-theme="dark"] .tbl-row-produccion .tbl-titulo { color: var(--text-muted) !important; }
html[data-theme="dark"] .tbl-titulo { color: var(--text) !important; }
html[data-theme="dark"] .tbl-tag { background: var(--surface-2); color: var(--text-sm); }

/* Mi Día — toolbar, sidebar, panels */
html[data-theme="dark"] .md-wrap { background: transparent; }
html[data-theme="dark"] .md-h1 { color: var(--text) !important; }
html[data-theme="dark"] .md-sub { color: var(--text-muted) !important; }
html[data-theme="dark"] .md-toolbar { background: var(--surface) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .md-toolbar button,
html[data-theme="dark"] .md-toolbar select,
html[data-theme="dark"] .md-toolbar input {
  background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border) !important;
}
html[data-theme="dark"] .md-tl-card,
html[data-theme="dark"] .md-side-card,
html[data-theme="dark"] .md-panel { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text); }
html[data-theme="dark"] .md-tl-head { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text); }
html[data-theme="dark"] .md-hour { color: var(--text-xs); border-color: var(--border) !important; }

/* Mi Trabajo — toolbar dark + cards */
html[data-theme="dark"] .mt-search-input::placeholder { color: var(--text-xs); }
html[data-theme="dark"] .mt-tabs-wrap { background: var(--surface) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .mt-tab { color: var(--text-muted); }
html[data-theme="dark"] .mt-tab.active { color: var(--text); border-bottom-color: var(--text); }

/* Anuncios — cards blancos forzar dark */
html[data-theme="dark"] .anuncio-card,
html[data-theme="dark"] [class*="anuncio"] { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text); }

/* Métricas — KPI cards */
html[data-theme="dark"] .kpi { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text); }
html[data-theme="dark"] .kpi-label { color: var(--text-muted); }

/* Selects nativos también */
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border-md) !important;
}

/* Botón "Crear primer contenido futuro" y similares con bg blanco hardcoded */
html[data-theme="dark"] button[style*="background:#fff"],
html[data-theme="dark"] a[style*="background:#fff"] {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border-md) !important;
}

/* Status pills con bg pastel: oscurecer */
html[data-theme="dark"] .st-badge { background: var(--surface-2) !important; color: var(--text) !important; }
html[data-theme="dark"] .st-revision { background: rgba(59,130,246,.18) !important; color: #bfdbfe !important; }
html[data-theme="dark"] .st-cambios  { background: rgba(220,38,38,.18) !important; color: #fca5a5 !important; }
html[data-theme="dark"] .st-aprobado { background: rgba(34,197,94,.18) !important; color: #86efac !important; }

/* "Nuevo contenido" / botones de acción con bg blanco */
html[data-theme="dark"] .btn[style*="background:#fff"] {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border-md) !important;
}

/* Bootstrap default button (sin variante) */
html[data-theme="dark"] .btn { color: var(--text); }
html[data-theme="dark"] .btn-dark { background: #fff; color: #0f172a; border-color: #fff; }
html[data-theme="dark"] .btn-dark:hover { background: #e5e7eb; color: #0f172a; }

/* ═══════════════════════════════════════════════════════════════
   DARK MODE v3 — fix exhaustivo (cubre con/sin espacio en inline)
═══════════════════════════════════════════════════════════════ */

/* ── Texto oscuro hardcoded — TODAS las variantes ─────────────── */
html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color:#0a0a0a"],
html[data-theme="dark"] [style*="color: #0a0a0a"],
html[data-theme="dark"] [style*="color:#111"],
html[data-theme="dark"] [style*="color: #111"],
html[data-theme="dark"] [style*="color:#1f1f1f"],
html[data-theme="dark"] [style*="color: #1f1f1f"],
html[data-theme="dark"] [style*="color:#0f172a"],
html[data-theme="dark"] [style*="color: #0f172a"],
html[data-theme="dark"] [style*="color:#1e293b"],
html[data-theme="dark"] [style*="color: #1e293b"],
html[data-theme="dark"] [style*="color:#334155"],
html[data-theme="dark"] [style*="color: #334155"],
html[data-theme="dark"] [style*="color:#1f2937"],
html[data-theme="dark"] [style*="color: #1f2937"],
html[data-theme="dark"] [style*="color:#111827"],
html[data-theme="dark"] [style*="color: #111827"],
html[data-theme="dark"] [style*="color:#212529"],
html[data-theme="dark"] [style*="color: #212529"],
html[data-theme="dark"] [style*="color:#374151"],
html[data-theme="dark"] [style*="color: #374151"],
html[data-theme="dark"] [style*="color:#475569"],
html[data-theme="dark"] [style*="color: #475569"] {
  color: var(--text) !important;
}

/* Grises medios → text muted */
html[data-theme="dark"] [style*="color:#64748b"],
html[data-theme="dark"] [style*="color: #64748b"],
html[data-theme="dark"] [style*="color:#6b7280"],
html[data-theme="dark"] [style*="color: #6b7280"] {
  color: var(--text-muted) !important;
}

/* Grises claros → text-xs (mantener jerarquía) */
html[data-theme="dark"] [style*="color:#9ca3af"],
html[data-theme="dark"] [style*="color: #9ca3af"],
html[data-theme="dark"] [style*="color:#94a3b8"],
html[data-theme="dark"] [style*="color: #94a3b8"],
html[data-theme="dark"] [style*="color:#cbd5e1"],
html[data-theme="dark"] [style*="color: #cbd5e1"] {
  color: var(--text-xs) !important;
}

/* ── Backgrounds blancos — todas variantes ────────────────────── */
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background-color: #ffffff"] {
  background: var(--surface) !important;
}

/* ── DESCENDIENTES de wrappers blancos sin color propio → claro ─ */
/* Cuando un wrapper tiene bg blanco hardcoded, sus textos hijos
   típicamente también tienen `color:#0f172a` o similar. Ya se cubren
   arriba. Pero hay textos SIN color hardcoded que heredan negro. */
html[data-theme="dark"] [style*="background:#fff"] > div,
html[data-theme="dark"] [style*="background: #fff"] > div,
html[data-theme="dark"] [style*="background:#ffffff"] > div,
html[data-theme="dark"] [style*="background: #ffffff"] > div,
html[data-theme="dark"] [style*="background:#fff"] > span,
html[data-theme="dark"] [style*="background: #fff"] > span,
html[data-theme="dark"] [style*="background:#fff"] > p,
html[data-theme="dark"] [style*="background: #fff"] > p,
html[data-theme="dark"] [style*="background:#fff"] > a:not([class*="btn"]):not([class*="badge"]),
html[data-theme="dark"] [style*="background: #fff"] > a:not([class*="btn"]):not([class*="badge"]),
html[data-theme="dark"] [style*="background:#fff"] > strong,
html[data-theme="dark"] [style*="background: #fff"] > strong,
html[data-theme="dark"] [style*="background:#fff"] > h1,
html[data-theme="dark"] [style*="background:#fff"] > h2,
html[data-theme="dark"] [style*="background:#fff"] > h3,
html[data-theme="dark"] [style*="background:#fff"] > h4,
html[data-theme="dark"] [style*="background: #fff"] > h1,
html[data-theme="dark"] [style*="background: #fff"] > h2,
html[data-theme="dark"] [style*="background: #fff"] > h3,
html[data-theme="dark"] [style*="background: #fff"] > h4 {
  color: var(--text);
}

/* ── Headers de página específicos (con `color:<colorP>` PHP) ─── */
html[data-theme="dark"] .md-h1,
html[data-theme="dark"] .md-h1 *,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .page-title *,
html[data-theme="dark"] .sec-title,
html[data-theme="dark"] .esp-title,
html[data-theme="dark"] .esp-section-title,
html[data-theme="dark"] .ses-title,
html[data-theme="dark"] .cl-titulo,
html[data-theme="dark"] .mh-section-head,
html[data-theme="dark"] .mh-section-title,
html[data-theme="dark"] .cl-month,
html[data-theme="dark"] [style*="color:var(--colorP)"],
html[data-theme="dark"] [style*="color: var(--colorP)"] {
  color: var(--text) !important;
}

/* Headers que llevan emoji + texto: el wrapper y el span interno */
html[data-theme="dark"] h1 *, html[data-theme="dark"] h2 *,
html[data-theme="dark"] h3 *, html[data-theme="dark"] h4 *,
html[data-theme="dark"] h5 *, html[data-theme="dark"] h6 * { color: inherit; }

/* ── Mi Horario — sections con bg claro ───────────────────────── */
html[data-theme="dark"] [class*="mh-card"],
html[data-theme="dark"] [class*="mh-section"],
html[data-theme="dark"] [class*="mh-block"] {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] [class*="mh-card"] *,
html[data-theme="dark"] [class*="mh-section"] * {
  color: inherit;
}
html[data-theme="dark"] [class*="mh-card"] label,
html[data-theme="dark"] [class*="mh-section"] label,
html[data-theme="dark"] form label { color: var(--text); }
html[data-theme="dark"] form small,
html[data-theme="dark"] form .text-muted,
html[data-theme="dark"] form .small,
html[data-theme="dark"] form p { color: var(--text-muted); }

/* Inputs/selects de Mi Horario */
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="search"] {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border-md) !important;
  color-scheme: dark;
}
html[data-theme="dark"] input::placeholder { color: var(--text-xs); }

/* ── Esperando page — tabla y celdas ──────────────────────────── */
html[data-theme="dark"] .esp-tabla,
html[data-theme="dark"] .esp-tabla *,
html[data-theme="dark"] .esp-section,
html[data-theme="dark"] .esp-section *,
html[data-theme="dark"] [class*="esperando"] *,
html[data-theme="dark"] [class*="esp-"] * { color: inherit; }
html[data-theme="dark"] .esp-tabla,
html[data-theme="dark"] .esp-section { color: var(--text); }

/* Tablas — celdas con texto oscuro implícito */
html[data-theme="dark"] table td,
html[data-theme="dark"] table th { color: var(--text); }
html[data-theme="dark"] table thead th,
html[data-theme="dark"] table[class*="-head"] th { color: var(--text-muted); }

/* ── FullCalendar — números de día y headers de columna ───────── */
html[data-theme="dark"] .fc-daygrid-day-number,
html[data-theme="dark"] .fc-col-header-cell-cushion,
html[data-theme="dark"] .fc-toolbar-title { color: var(--text-muted) !important; }
html[data-theme="dark"] .fc-day-today .fc-daygrid-day-number,
html[data-theme="dark"] .fc-toolbar-title { color: var(--text) !important; }
html[data-theme="dark"] .fc-day-other .fc-daygrid-day-number { color: var(--text-xs) !important; }
html[data-theme="dark"] .fc-list-day-cushion { background: var(--surface-2) !important; color: var(--text); }

/* ── Cliente Dashboard — botones empty y CTAs ─────────────────── */
html[data-theme="dark"] [class*="empty"] button[style*="background:#fff"],
html[data-theme="dark"] [class*="empty"] a[style*="background:#fff"],
html[data-theme="dark"] [class*="empty"] [class*="btn"][style*="background:#fff"],
html[data-theme="dark"] .empty-state button,
html[data-theme="dark"] .empty-state a {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border-md) !important;
}

/* "Crear primer contenido futuro" (línea con icon + texto) */
html[data-theme="dark"] [style*="border:2px dashed"],
html[data-theme="dark"] [style*="border: 2px dashed"] {
  border-color: var(--border-md) !important;
  color: var(--text) !important;
}

/* ── Briefs — wizard cards y tipo cards ───────────────────────── */
html[data-theme="dark"] .brief-card,
html[data-theme="dark"] .brief-card * { color: inherit; }
html[data-theme="dark"] .brief-card { background: var(--surface) !important; color: var(--text); }
html[data-theme="dark"] .brief-card .text-muted,
html[data-theme="dark"] .brief-card small { color: var(--text-muted); }

/* ── Métricas — cards y labels ────────────────────────────────── */
html[data-theme="dark"] [class*="metric"] [class*="label"],
html[data-theme="dark"] [class*="metric"] small,
html[data-theme="dark"] .stat-card small,
html[data-theme="dark"] .kpi-sub { color: var(--text-muted) !important; }
html[data-theme="dark"] .stat-card div:not([style*="color:"]):not([class*="badge"]) { color: var(--text); }

/* ── Cliente dashboard — pieza names dentro de tabla ──────────── */
html[data-theme="dark"] .tbl-row-revision .tbl-titulo,
html[data-theme="dark"] .tbl-row-cambios .tbl-titulo,
html[data-theme="dark"] .tbl-row-aprobado .tbl-titulo,
html[data-theme="dark"] .tbl-row-revision a,
html[data-theme="dark"] .tbl-row-cambios a,
html[data-theme="dark"] .tbl-row-aprobado a {
  color: var(--text) !important;
}

/* ── Sec-head con bg claro (Cliente dashboard semanas) ────────── */
html[data-theme="dark"] .sec-head { background: var(--surface-2) !important; color: var(--text); }
html[data-theme="dark"] .sec-head * { color: inherit; }
html[data-theme="dark"] .sec-count { color: var(--text-muted); }

/* ── Login card ───────────────────────────────────────────────── */
html[data-theme="dark"] .login-card { background: var(--surface) !important; color: var(--text); }
html[data-theme="dark"] .login-card * { color: inherit; }
html[data-theme="dark"] .login-card .text-muted,
html[data-theme="dark"] .login-card small { color: var(--text-muted); }

/* ── Inputs con bg blanco hardcoded ───────────────────────────── */
html[data-theme="dark"] input[style*="background:#fff"],
html[data-theme="dark"] input[style*="background: #fff"],
html[data-theme="dark"] textarea[style*="background:#fff"],
html[data-theme="dark"] textarea[style*="background: #fff"],
html[data-theme="dark"] select[style*="background:#fff"],
html[data-theme="dark"] select[style*="background: #fff"] {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE v4 — overrides por nombre de clase específico
   (CSS interno de cada página gana por specificity contra
    [style*=…], necesitamos tocar las clases por nombre)
═══════════════════════════════════════════════════════════════ */

/* ── Esperando (esperando.php) ───────────────────────────────── */
html[data-theme="dark"] .esp-h1 { color: var(--text) !important; }
html[data-theme="dark"] .esp-sub { color: var(--text-muted) !important; }
html[data-theme="dark"] .esp-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .esp-card-header {
  background: var(--surface-2) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .esp-count {
  background: var(--border-md) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .esp-table { color: var(--text); }
html[data-theme="dark"] .esp-table th {
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .esp-table td,
html[data-theme="dark"] .esp-table tr {
  border-bottom-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] .esp-table tr:hover { background: rgba(99,102,241,.08) !important; }
html[data-theme="dark"] .esp-table a { color: var(--text) !important; }
html[data-theme="dark"] .esp-table a:hover { color: #a5b4fc !important; }
html[data-theme="dark"] .esp-empty { color: var(--text-muted) !important; }

/* Body con bg #f8fafc o #f0f2f5 inline */
html[data-theme="dark"] body[style*="background:#f8fafc"],
html[data-theme="dark"] body[style*="background: #f8fafc"],
html[data-theme="dark"] body[style*="background:#f0f2f5"],
html[data-theme="dark"] body[style*="background: #f0f2f5"] {
  background: var(--bg) !important;
}

/* ── Mi Horario (mi-horario.php) ─────────────────────────────── */
html[data-theme="dark"] .mh-h1 { color: var(--text) !important; }
html[data-theme="dark"] .mh-sub { color: var(--text-muted) !important; }
html[data-theme="dark"] .mh-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .mh-card-head {
  background: var(--surface-2) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .mh-card-head h3 { color: var(--text) !important; }
html[data-theme="dark"] .mh-card-head .desc { color: var(--text-muted) !important; }
html[data-theme="dark"] .mh-card-body { background: var(--surface) !important; color: var(--text); }
html[data-theme="dark"] .mh-day-row { border-bottom-color: var(--border) !important; }
html[data-theme="dark"] .mh-day-name { color: var(--text-sm) !important; }
html[data-theme="dark"] .mh-esp-item,
html[data-theme="dark"] .mh-bloq-item {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] .mh-esp-titulo,
html[data-theme="dark"] .mh-bloq-titulo { color: var(--text); }
html[data-theme="dark"] .mh-esp-meta,
html[data-theme="dark"] .mh-bloq-meta { color: var(--text-muted) !important; }
html[data-theme="dark"] .dias-toggle button {
  background: var(--surface-2) !important;
  border-color: var(--border-md) !important;
  color: var(--text-muted) !important;
}

/* ── Cliente dashboard sec-head (semanas) ────────────────────── */
html[data-theme="dark"] .sec-head {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .sec-title { color: var(--text) !important; }
html[data-theme="dark"] .sec-count { color: var(--text-muted) !important; }
html[data-theme="dark"] .cl-month-bar {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] .cl-month-bar * { color: inherit; }
html[data-theme="dark"] .cl-titulo,
html[data-theme="dark"] .cl-month { color: var(--text) !important; }
html[data-theme="dark"] .cli-bienvenida {
  background: linear-gradient(135deg, var(--surface), var(--surface-2)) !important;
  border-color: var(--border) !important;
  color: var(--text);
}

/* Cliente dashboard tablas */
html[data-theme="dark"] .tbl-wrap { background: var(--surface) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .tbl thead th {
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .tbl tbody tr { background: transparent !important; color: var(--text); border-color: var(--border) !important; }
html[data-theme="dark"] .tbl tbody td { border-color: var(--border) !important; color: inherit; }
html[data-theme="dark"] .tbl tbody tr:hover { background: rgba(99,102,241,.06) !important; }
html[data-theme="dark"] .tbl-titulo { color: var(--text) !important; }
html[data-theme="dark"] .tbl-tag { background: var(--surface-2) !important; color: var(--text-sm); border-color: var(--border) !important; }

/* ── Métricas — comparativa y publicaciones ──────────────────── */
html[data-theme="dark"] .met-card,
html[data-theme="dark"] .met-table,
html[data-theme="dark"] .met-comparativa,
html[data-theme="dark"] [class*="metricas"] [class*="card"],
html[data-theme="dark"] [class*="comparativa"] {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] .met-table tr,
html[data-theme="dark"] .met-table td,
html[data-theme="dark"] .met-table th {
  border-color: var(--border) !important;
  background: transparent !important;
  color: var(--text);
}
html[data-theme="dark"] .met-table thead th { color: var(--text-muted) !important; }

/* ── Tareas / Kanban / drawer ─────────────────────────────────── */
html[data-theme="dark"] .tareas-header,
html[data-theme="dark"] .filtros-bar,
html[data-theme="dark"] .view-tabs,
html[data-theme="dark"] .kanban-col,
html[data-theme="dark"] .grupo-section,
html[data-theme="dark"] .grupo-header {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] .tarea-row,
html[data-theme="dark"] .kanban-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] .tarea-row:hover,
html[data-theme="dark"] .kanban-card:hover { background: var(--surface-2) !important; }

/* ── BioFresh "Tareas visibles del cliente" ──────────────────── */
html[data-theme="dark"] [class*="proyecto-card"],
html[data-theme="dark"] [class*="proyecto-bloque"],
html[data-theme="dark"] .proj-card,
html[data-theme="dark"] .proj-row {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] [class*="proyecto-card"] *,
html[data-theme="dark"] [class*="proyecto-bloque"] *,
html[data-theme="dark"] .proj-card *,
html[data-theme="dark"] .proj-row * { color: inherit; }

/* ── Bootstrap card / form-* ──────────────────────────────────── */
html[data-theme="dark"] .card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text); }
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] .card-body { color: var(--text); }
html[data-theme="dark"] .form-check-label { color: var(--text); }
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .form-help { color: var(--text-muted); }

/* ── Tablas Bootstrap ─────────────────────────────────────────── */
html[data-theme="dark"] .table {
  color: var(--text);
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: rgba(255,255,255,.02);
  --bs-table-hover-bg: rgba(99,102,241,.08);
}
html[data-theme="dark"] .table thead { background: var(--surface-2); color: var(--text-muted); }
html[data-theme="dark"] .table-bordered > :not(caption) > * { border-color: var(--border); }

/* ── Anuncios (anuncios.php) ─────────────────────────────────── */
html[data-theme="dark"] .anuncio-card,
html[data-theme="dark"] .anuncio-item,
html[data-theme="dark"] .anuncio-content,
html[data-theme="dark"] [class*="anuncio-"] {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] [class*="anuncio-"] * { color: inherit; }

/* ── Calendario página ────────────────────────────────────────── */
html[data-theme="dark"] .cal-header,
html[data-theme="dark"] .cal-legend,
html[data-theme="dark"] .cal-leyenda,
html[data-theme="dark"] .cal-wrap,
html[data-theme="dark"] .cal-inner {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] .cal-leyenda { background: var(--surface-2) !important; }

/* FullCalendar - fondos de celdas (no override events) */
html[data-theme="dark"] .fc-theme-standard td,
html[data-theme="dark"] .fc-theme-standard th { background: var(--surface) !important; }
html[data-theme="dark"] .fc-day-other { background: var(--surface-2) !important; }
html[data-theme="dark"] .fc-list-day-cushion,
html[data-theme="dark"] .fc-list-table .fc-list-day th { background: var(--surface-2) !important; color: var(--text); }
html[data-theme="dark"] .fc-button-primary {
  background: var(--surface-2) !important;
  border-color: var(--border-md) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .fc-button-primary:hover { background: var(--surface) !important; }

/* ── Toolbar de Mi Trabajo ───────────────────────────────────── */
html[data-theme="dark"] .mt-toolbar { background: var(--surface) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .mt-tabs-wrap { background: var(--surface) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .mt-search-input { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border-md) !important; }
html[data-theme="dark"] .mt-tipo-pill { background: var(--surface-2) !important; color: var(--text-sm) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .mt-tipo-pill.active { background: var(--text) !important; color: var(--bg) !important; }
html[data-theme="dark"] .mt-cliente-filter { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border-md) !important; }

/* ── Mi Día — banner amarillo "tareas en riesgo" y card amarillo "Buenas tardes" ── */
html[data-theme="dark"] .md-resumen-dia,
html[data-theme="dark"] [class*="md-alerta"],
html[data-theme="dark"] [class*="md-banner"] {
  background: linear-gradient(135deg, rgba(217,119,6,.18), rgba(217,119,6,.08)) !important;
  border-color: rgba(217,119,6,.35) !important;
  color: #fde68a;
}
html[data-theme="dark"] .md-resumen-dia *,
html[data-theme="dark"] [class*="md-alerta"] *,
html[data-theme="dark"] [class*="md-banner"] * { color: inherit; }
html[data-theme="dark"] .md-resumen-saludo,
html[data-theme="dark"] .md-resumen-stats { color: #fde68a !important; }

/* ── Sesiones page — cards ya las cubrimos pero refuerzo ─────── */
html[data-theme="dark"] .ses-card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text); }
html[data-theme="dark"] .ses-card * { color: inherit; }
html[data-theme="dark"] .ses-icon { background: var(--surface-2) !important; }
html[data-theme="dark"] .ses-meta { color: var(--text-muted) !important; }
html[data-theme="dark"] .ses-meta * { color: inherit; }

/* ── Briefs cards y wizards ──────────────────────────────────── */
html[data-theme="dark"] .brief-card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text); }
html[data-theme="dark"] .brief-card * { color: inherit; }
html[data-theme="dark"] .brief-card .text-muted,
html[data-theme="dark"] .brief-card small { color: var(--text-muted) !important; }
html[data-theme="dark"] .tipo-card,
html[data-theme="dark"] .red-card,
html[data-theme="dark"] .opcion-chip {
  background: var(--surface-2) !important;
  border-color: var(--border-md) !important;
  color: var(--text);
}
html[data-theme="dark"] .tipo-card.active,
html[data-theme="dark"] .red-card.active,
html[data-theme="dark"] .opcion-chip.active {
  background: var(--text) !important;
  color: var(--bg) !important;
  border-color: var(--text) !important;
}

/* ── Notificaciones page reforzar ────────────────────────────── */
html[data-theme="dark"] .notif-row { background: var(--surface) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .notif-row.unread { background: rgba(59,130,246,.12) !important; }
html[data-theme="dark"] .notif-title { color: var(--text) !important; }
html[data-theme="dark"] .notif-msg { color: var(--text-sm) !important; }
html[data-theme="dark"] .notif-time { color: var(--text-xs) !important; }
html[data-theme="dark"] .notif-row a { color: inherit !important; }
html[data-theme="dark"] [class*="empty-state"] { background: var(--surface) !important; color: var(--text-muted); border-color: var(--border) !important; }
html[data-theme="dark"] [class*="empty-state"] strong { color: var(--text) !important; }

/* ═══════════════════════════════════════════════════════════════
   DARK MODE v5 — clases con bg blanco hardcoded en CSS interno
═══════════════════════════════════════════════════════════════ */

/* ── Mi Trabajo: header, items, quickadd, dashboard ──────────── */
html[data-theme="dark"] .mt-header {
  background: var(--surface) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] .mt-greeting { color: var(--text) !important; }
html[data-theme="dark"] .mt-item {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] .mt-item:hover { background: var(--surface-2) !important; }
html[data-theme="dark"] .mt-item-vencida { background: rgba(220,38,38,.08) !important; border-left-color: #ef4444 !important; }
html[data-theme="dark"] .mt-title { color: var(--text); }
html[data-theme="dark"] .mt-sub  { color: var(--text-muted); }
html[data-theme="dark"] .mt-quickadd-toggle {
  background: var(--surface-2) !important;
  border-color: var(--border-md) !important;
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .mt-quickadd-toggle:hover { color: var(--text) !important; }
html[data-theme="dark"] .mt-quickadd-form {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] #mt-status-menu {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] #mt-status-menu button { color: var(--text); }
html[data-theme="dark"] #mt-status-menu button:hover { background: var(--surface-2); }

/* Dashboard ejecutivo (dentro de Mi Trabajo) */
html[data-theme="dark"] .dash-kpi,
html[data-theme="dark"] .dash-panel,
html[data-theme="dark"] .dash-row {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] .dash-kpi *,
html[data-theme="dark"] .dash-panel *,
html[data-theme="dark"] .dash-row * { color: inherit; }
html[data-theme="dark"] .dash-kpi .text-muted,
html[data-theme="dark"] .dash-panel .text-muted,
html[data-theme="dark"] .dash-row .text-muted { color: var(--text-muted) !important; }
html[data-theme="dark"] .dash-kpi-label,
html[data-theme="dark"] .dash-kpi-sub { color: var(--text-muted) !important; }
html[data-theme="dark"] .dash-progress-txt { color: var(--text-sm); }
html[data-theme="dark"] .dash-tab,
html[data-theme="dark"] .dash-panel-head {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text);
}

/* ── Mi Día: sidebar cards (Pendientes sin agendar, Cómo funciona) ── */
html[data-theme="dark"] .md-side-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] .md-side-head {
  background: var(--surface-2) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] .md-side-body { color: var(--text); }
html[data-theme="dark"] .md-side-tarea { border-bottom-color: var(--border) !important; color: var(--text); }
html[data-theme="dark"] .md-side-tarea a { color: var(--text) !important; }
html[data-theme="dark"] .md-side-tarea a:hover { color: #a5b4fc !important; }
html[data-theme="dark"] .md-side-tarea-meta { color: var(--text-xs) !important; }
html[data-theme="dark"] .md-empty { color: var(--text-muted) !important; }

/* Mi Día — sub-textos y hours */
html[data-theme="dark"] .md-h1 { color: var(--text) !important; }
html[data-theme="dark"] .md-sub { color: var(--text-muted) !important; }
html[data-theme="dark"] .md-tl-card { background: var(--surface) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .md-tl-head { background: var(--surface-2) !important; color: var(--text); border-bottom-color: var(--border) !important; }
html[data-theme="dark"] .md-tl-head * { color: inherit; }
html[data-theme="dark"] .md-toolbar { background: var(--surface) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .md-toolbar * { color: var(--text); }
html[data-theme="dark"] .md-toolbar select,
html[data-theme="dark"] .md-toolbar input { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border-md) !important; }

/* Banner "tareas en riesgo" — el banner amarillo grande */
html[data-theme="dark"] [style*="background:#fffbeb"],
html[data-theme="dark"] [style*="background: #fffbeb"],
html[data-theme="dark"] [style*="background:#fef3c7"],
html[data-theme="dark"] [style*="background: #fef3c7"],
html[data-theme="dark"] [style*="linear-gradient(135deg, #fff7ed"],
html[data-theme="dark"] [style*="linear-gradient(135deg,#fff7ed"] {
  background: linear-gradient(135deg, rgba(217,119,6,.15), rgba(217,119,6,.05)) !important;
  border-color: rgba(217,119,6,.35) !important;
  color: #fde68a;
}
html[data-theme="dark"] [style*="background:#fffbeb"] *,
html[data-theme="dark"] [style*="background: #fffbeb"] *,
html[data-theme="dark"] [style*="background:#fef3c7"] *,
html[data-theme="dark"] [style*="background: #fef3c7"] * { color: #fde68a !important; }

/* ── Inteligencia: cards con style inline #fff ─────────────────
   El selector [style*="background:#fff"] ya las captura, pero
   reforzamos con specificity adicional para que ningún otro
   selector (ej. .stat-card de ui.css con bg explícito) gane. */
html[data-theme="dark"] body [style*="background:#fff"] {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] body [style*="background:#fff"] * { color: inherit; }
html[data-theme="dark"] body [style*="background:#fff"]:not([style*="color"]) { color: var(--text); }

/* Inteligencia tabla "Evolución mes a mes" - row con bg azul claro */
html[data-theme="dark"] [style*="background:#dbeafe"],
html[data-theme="dark"] [style*="background: #dbeafe"],
html[data-theme="dark"] [style*="background:#eff6ff"],
html[data-theme="dark"] [style*="background: #eff6ff"] {
  background: rgba(59,130,246,.15) !important;
  color: var(--text);
}
html[data-theme="dark"] [style*="background:#dbeafe"] *,
html[data-theme="dark"] [style*="background:#eff6ff"] * { color: var(--text); }

/* ── Cliente Dashboard — fila hover con bg blanco ──────────────── */
html[data-theme="dark"] .tbl tbody tr:hover,
html[data-theme="dark"] .tbl-row-revision:hover,
html[data-theme="dark"] .tbl-row-cambios:hover,
html[data-theme="dark"] .tbl-row-aprobado:hover {
  background: rgba(99,102,241,.08) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .tbl tbody tr:hover * { color: inherit; }

/* SEMANA headers (week separators) */
html[data-theme="dark"] [class*="semana-head"],
html[data-theme="dark"] [class*="week-head"],
html[data-theme="dark"] [class*="-week-row"] {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

/* ── Genérico: cualquier elemento con #fff7ed, #ffedd5, etc. ────
   Banners cálidos (warning, info amarillo) se ajustan al tono. */
html[data-theme="dark"] [style*="background:#fff7ed"],
html[data-theme="dark"] [style*="background: #fff7ed"],
html[data-theme="dark"] [style*="background:#ffedd5"] {
  background: rgba(234,88,12,.15) !important;
  color: #fed7aa !important;
}
html[data-theme="dark"] [style*="background:#fff7ed"] *,
html[data-theme="dark"] [style*="background:#ffedd5"] * { color: inherit; }

/* ── Force descendants of any white-bg container ──────────────────
   Si un elemento tiene background:#fff hardcoded por clase, el override
   anterior NO afecta sus hijos textuales. Forzamos via class match. */
html[data-theme="dark"] .mt-header *,
html[data-theme="dark"] .mt-quickadd-form *,
html[data-theme="dark"] .md-side-card *,
html[data-theme="dark"] .md-side-head *,
html[data-theme="dark"] .esp-card *,
html[data-theme="dark"] .esp-card-header *,
html[data-theme="dark"] .mh-card *,
html[data-theme="dark"] .mh-card-head *,
html[data-theme="dark"] .dash-kpi *,
html[data-theme="dark"] .dash-panel *,
html[data-theme="dark"] .ses-card *,
html[data-theme="dark"] .brief-card *,
html[data-theme="dark"] .met-card *,
html[data-theme="dark"] .anuncio-card *,
html[data-theme="dark"] .login-card *,
html[data-theme="dark"] .sec-head *,
html[data-theme="dark"] .cl-month-bar *,
html[data-theme="dark"] .cli-bienvenida *,
html[data-theme="dark"] .tareas-header *,
html[data-theme="dark"] .filtros-bar *,
html[data-theme="dark"] .grupo-header *,
html[data-theme="dark"] .tarea-row *,
html[data-theme="dark"] .kanban-card *,
html[data-theme="dark"] .stat-card *,
html[data-theme="dark"] .kpi *,
html[data-theme="dark"] .ar-card *,
html[data-theme="dark"] .preview-card * {
  color: inherit;
}

/* Pero conservar colores específicos en spans con color custom */
html[data-theme="dark"] .mt-header [style*="color:"],
html[data-theme="dark"] .dash-kpi [style*="color:"],
html[data-theme="dark"] .stat-card [style*="color:"] {
  /* sus colores hardcoded ya son interceptados arriba */
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE v6 — anuncios + métricas + body[style*=fff8] global
═══════════════════════════════════════════════════════════════ */

/* ── Anuncios (anuncios.php) — clases con prefijo .anu- ────────── */
html[data-theme="dark"] .anu-h1 { color: var(--text) !important; }
html[data-theme="dark"] .anu-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] .anu-card * { color: inherit; }
html[data-theme="dark"] .anu-card .text-muted,
html[data-theme="dark"] .anu-card small { color: var(--text-muted) !important; }
html[data-theme="dark"] .anu-card-noleido {
  background: rgba(99,102,241,.12) !important;
  border-left-color: #818cf8 !important;
}
html[data-theme="dark"] .anu-prio-info {
  background: rgba(59,130,246,.18) !important;
  color: #bfdbfe !important;
}
html[data-theme="dark"] .anu-prio-aviso {
  background: rgba(217,119,6,.18) !important;
  color: #fde68a !important;
}
html[data-theme="dark"] .anu-prio-urgente {
  background: rgba(220,38,38,.18) !important;
  color: #fca5a5 !important;
}

/* ── Métricas: cards inline con `style="background:#fff;border-radius:.875rem"`
   (Score eficiencia por formato, Score por cliente, charts, Insights, etc.) ── */
/* Aumentamos specificity con `body div[style*=...]` para ganar contra
   reglas de la página que define background:#fff hardcoded. */
html[data-theme="dark"] body div[style*="background:#fff"],
html[data-theme="dark"] body div[style*="background: #fff"],
html[data-theme="dark"] body div[style*="background:#ffffff"],
html[data-theme="dark"] body div[style*="background: #ffffff"] {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
/* Headings dentro de esos cards */
html[data-theme="dark"] body div[style*="background:#fff"] h1,
html[data-theme="dark"] body div[style*="background:#fff"] h2,
html[data-theme="dark"] body div[style*="background:#fff"] h3,
html[data-theme="dark"] body div[style*="background:#fff"] h4,
html[data-theme="dark"] body div[style*="background:#fff"] h5,
html[data-theme="dark"] body div[style*="background:#fff"] h6,
html[data-theme="dark"] body div[style*="background: #fff"] h1,
html[data-theme="dark"] body div[style*="background: #fff"] h2,
html[data-theme="dark"] body div[style*="background: #fff"] h3,
html[data-theme="dark"] body div[style*="background: #fff"] h4,
html[data-theme="dark"] body div[style*="background: #fff"] h5,
html[data-theme="dark"] body div[style*="background: #fff"] h6 {
  color: var(--text) !important;
}
/* Texto general dentro: respetan herencia */
html[data-theme="dark"] body div[style*="background:#fff"] p,
html[data-theme="dark"] body div[style*="background: #fff"] p,
html[data-theme="dark"] body div[style*="background:#fff"] td,
html[data-theme="dark"] body div[style*="background: #fff"] td,
html[data-theme="dark"] body div[style*="background:#fff"] th,
html[data-theme="dark"] body div[style*="background: #fff"] th {
  color: var(--text);
}
html[data-theme="dark"] body div[style*="background:#fff"] .text-muted,
html[data-theme="dark"] body div[style*="background: #fff"] .text-muted,
html[data-theme="dark"] body div[style*="background:#fff"] small,
html[data-theme="dark"] body div[style*="background: #fff"] small {
  color: var(--text-muted) !important;
}

/* ── Score-bar (métricas) ─────────────────────────────────────── */
html[data-theme="dark"] .score-bar { background: var(--surface-2) !important; }
html[data-theme="dark"] .red-tab {
  background: var(--surface-2) !important;
  border-color: var(--border-md) !important;
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .red-tab.active {
  background: var(--text) !important;
  color: var(--bg) !important;
  border-color: var(--text) !important;
}

/* ── Insights automáticos (cards verde/rojo) ──────────────────── */
html[data-theme="dark"] [class*="insight-"]:not([class*="-badge"]) {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] [style*="background:#dcfce7"],
html[data-theme="dark"] [style*="background: #dcfce7"],
html[data-theme="dark"] [style*="background:#f0fdf4"],
html[data-theme="dark"] [style*="background: #f0fdf4"] {
  background: rgba(34,197,94,.12) !important;
  border-color: rgba(34,197,94,.3) !important;
}
html[data-theme="dark"] [style*="background:#fee2e2"],
html[data-theme="dark"] [style*="background: #fee2e2"],
html[data-theme="dark"] [style*="background:#fef2f2"],
html[data-theme="dark"] [style*="background: #fef2f2"] {
  background: rgba(220,38,38,.12) !important;
  border-color: rgba(220,38,38,.3) !important;
}

/* ── Mi Día - bloques azules / morados con tipografía clara ───── */
/* Los bloques de tareas con bg color status (azul, morado, verde claro)
   tienen colores intencionales, mantener pero asegurar contraste de texto */
html[data-theme="dark"] .md-block {
  /* mantener bg específico del status */
  filter: brightness(1.05);
}
html[data-theme="dark"] .md-block * { color: inherit; }

/* ═══════════════════════════════════════════════════════════════
   DARK MODE v7 — chips/pills/badges/counters con colores
   intencionales. Específicos GANAN contra reglas globales gracias
   a su mayor specificity (clase doble) + !important.
═══════════════════════════════════════════════════════════════ */

/* ── Mi Trabajo: contadores del header ────────────────────────── */
html[data-theme="dark"] .mt-counter,
html[data-theme="dark"] span.mt-counter { font-weight: 700; }
html[data-theme="dark"] .mt-counter.mt-counter-danger,
html[data-theme="dark"] span.mt-counter-danger {
  background: rgba(220,38,38,.18) !important;
  color: #fca5a5 !important;
}
html[data-theme="dark"] .mt-counter.mt-counter-warning,
html[data-theme="dark"] span.mt-counter-warning {
  background: rgba(217,119,6,.18) !important;
  color: #fde68a !important;
}
html[data-theme="dark"] .mt-counter.mt-counter-blue,
html[data-theme="dark"] span.mt-counter-blue {
  background: rgba(59,130,246,.18) !important;
  color: #bfdbfe !important;
}
html[data-theme="dark"] .mt-counter.mt-counter-green,
html[data-theme="dark"] span.mt-counter-green {
  background: rgba(34,197,94,.18) !important;
  color: #86efac !important;
}
html[data-theme="dark"] .mt-counter.mt-counter-gray,
html[data-theme="dark"] span.mt-counter-gray {
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .mt-counter.mt-counter-purple,
html[data-theme="dark"] span.mt-counter-purple {
  background: rgba(139,92,246,.18) !important;
  color: #c4b5fd !important;
}

/* ── Mi Trabajo: badges de tipo (TAREA / CONTENIDO / MENCIÓN) ── */
html[data-theme="dark"] .mt-tipo-badge { font-weight: 700; }
html[data-theme="dark"] .mt-tipo-badge.mt-tipo-tarea {
  background: rgba(59,130,246,.18) !important;
  color: #bfdbfe !important;
  border-color: rgba(59,130,246,.3) !important;
}
html[data-theme="dark"] .mt-tipo-badge.mt-tipo-contenido {
  background: rgba(34,197,94,.18) !important;
  color: #86efac !important;
  border-color: rgba(34,197,94,.3) !important;
}
html[data-theme="dark"] .mt-tipo-badge.mt-tipo-mencion {
  background: rgba(139,92,246,.18) !important;
  color: #c4b5fd !important;
  border-color: rgba(139,92,246,.3) !important;
}

/* ── Mi Trabajo: mt-badge variantes ───────────────────────────── */
html[data-theme="dark"] .mt-badge.mt-badge-danger {
  background: rgba(220,38,38,.2) !important;
  color: #fca5a5 !important;
}
html[data-theme="dark"] .mt-badge.mt-badge-warning {
  background: rgba(217,119,6,.2) !important;
  color: #fde68a !important;
}
html[data-theme="dark"] .mt-badge.mt-badge-green {
  background: rgba(34,197,94,.2) !important;
  color: #86efac !important;
}
html[data-theme="dark"] .mt-badge.mt-badge-blue {
  background: rgba(59,130,246,.2) !important;
  color: #bfdbfe !important;
}
/* mt-badge genérico sin variante: respeta sus inline si existen */
html[data-theme="dark"] .mt-badge:not([class*="-danger"]):not([class*="-warning"]):not([class*="-green"]):not([class*="-blue"]):not(.mt-pieza-link):not([style]) {
  background: var(--surface-2);
  color: var(--text-sm);
}

/* ── Esperando: status pills (.esp-status-pill) ───────────────── */
html[data-theme="dark"] .esp-status-pill {
  background: rgba(99,102,241,.2) !important;
  color: #c7d2fe !important;
}
html[data-theme="dark"] .esp-pill,
html[data-theme="dark"] .esp-badge {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

/* ── Bootstrap badges genéricos (sin tocar variantes con clase) ── */
html[data-theme="dark"] .badge.bg-primary { background: #4f46e5 !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-success { background: #16a34a !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-danger  { background: #dc2626 !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-warning { background: #d97706 !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-info    { background: #0284c7 !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-secondary { background: var(--surface-2) !important; color: var(--text) !important; }
html[data-theme="dark"] .badge.bg-light  { background: var(--surface-2) !important; color: var(--text) !important; }

/* ── Mi Trabajo tab-badge (badge rojo de items urgentes en tabs) ── */
html[data-theme="dark"] .mt-tab-badge { background: #ef4444 !important; color: #fff !important; }

/* ── Bottom nav badges (notif rojo) — ya están en nav.php ──────── */
html[data-theme="dark"] .bn-badge { background: #ef4444 !important; color: #fff !important; }
html[data-theme="dark"] .sidebar-badge.sidebar-badge-red { background: #ef4444 !important; color: #fff !important; }
html[data-theme="dark"] .sidebar-badge.sidebar-badge-blue { background: #3b82f6 !important; color: #fff !important; }
html[data-theme="dark"] .mobile-topbar-badge { background: #ef4444 !important; color: #fff !important; }

/* ── Notif popup badge & dot ──────────────────────────────────── */
html[data-theme="dark"] .notif-popup-dot { background: #818cf8 !important; }
html[data-theme="dark"] .unread-dot { background: #818cf8 !important; }

/* ── Status chips genéricos del cliente_dashboard ─────────────── */
html[data-theme="dark"] .pub-pendiente { color: var(--text-muted) !important; }
html[data-theme="dark"] .pub-programado { color: #93c5fd !important; }
html[data-theme="dark"] .pub-publicado  { color: var(--text) !important; }
html[data-theme="dark"] .pub-entregado  { color: #86efac !important; }

/* ── Chat: badge no leídos del canal ───────────────────────────── */
html[data-theme="dark"] .chat-canal-badge { background: #ef4444 !important; color: #fff !important; }
html[data-theme="dark"] .chat-msg-rol { background: rgba(99,102,241,.18) !important; color: #c7d2fe !important; }

/* ── Sub-info de bloques en Mi Día (atrasado, manual) ─────────── */
html[data-theme="dark"] [class*="md-block-sub"],
html[data-theme="dark"] [class*="md-tag"],
html[data-theme="dark"] [class*="md-chip"] {
  /* respeta colores intencionales del status */
  filter: brightness(1.1);
}

/* ─────────────────────────────────────────────────────────────────
   DARK MODE v8 — gaps que faltaban
───────────────────────────────────────────────────────────────── */

/* ── Mi Trabajo: search wrap (envuelve la lupa + input + clear) ── */
html[data-theme="dark"] .mt-search-wrap {
  background: var(--surface-2) !important;
  border-color: var(--border-md) !important;
}
html[data-theme="dark"] .mt-search-wrap:focus-within {
  background: var(--surface) !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.2) !important;
}
html[data-theme="dark"] .mt-search-input { color: var(--text) !important; }
html[data-theme="dark"] .mt-search-input::placeholder { color: var(--text-xs) !important; }
html[data-theme="dark"] .mt-search-icon { color: var(--text-muted) !important; }
html[data-theme="dark"] .mt-search-clear { color: var(--text-muted) !important; }
html[data-theme="dark"] .mt-search-clear:hover { color: var(--text) !important; }

/* ── Badges de rol con bg pastel: paletas dark proporcionales ─── */

/* Colaborador (gris #f3f4f6 + #374151) */
html[data-theme="dark"] [style*="background:#f3f4f6"],
html[data-theme="dark"] [style*="background: #f3f4f6"] {
  background: var(--surface-2) !important;
}

/* Revisor / Publicación (morado pastel #f3e8ff + #7e22ce) */
html[data-theme="dark"] [style*="background:#f3e8ff"],
html[data-theme="dark"] [style*="background: #f3e8ff"] {
  background: rgba(139,92,246,.18) !important;
}
html[data-theme="dark"] [style*="color:#7e22ce"],
html[data-theme="dark"] [style*="color: #7e22ce"] {
  color: #c4b5fd !important;
}

/* Observador (verde pastel #f0fdf4 + #166534) — ya estaba pero refuerzo */
html[data-theme="dark"] [style*="background:#f0fdf4"],
html[data-theme="dark"] [style*="background: #f0fdf4"] {
  background: rgba(34,197,94,.15) !important;
}

/* Bg gris muy claro (varios usos) */
html[data-theme="dark"] [style*="background:#f5f5f5"],
html[data-theme="dark"] [style*="background: #f5f5f5"],
html[data-theme="dark"] [style*="background:#e5e7eb"],
html[data-theme="dark"] [style*="background: #e5e7eb"],
html[data-theme="dark"] [style*="background:#e2e8f0"],
html[data-theme="dark"] [style*="background: #e2e8f0"] {
  background: var(--surface-2) !important;
  color: var(--text);
}

/* Bg ámbar/naranja pastel (#fef9c3 - Producción) */
html[data-theme="dark"] [style*="background:#fef9c3"],
html[data-theme="dark"] [style*="background: #fef9c3"] {
  background: rgba(217,119,6,.18) !important;
}

/* Bg cyan/celeste pastel (#e0f2fe - Info) */
html[data-theme="dark"] [style*="background:#e0f2fe"],
html[data-theme="dark"] [style*="background: #e0f2fe"] {
  background: rgba(14,165,233,.18) !important;
}
html[data-theme="dark"] [style*="color:#0369a1"],
html[data-theme="dark"] [style*="color: #0369a1"] {
  color: #7dd3fc !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE v9 — fix de clases CSS de páginas con bg claro
   Los overrides anteriores solo matchean inline `style="..."`. Las
   clases definidas en `<style>` de cada página (.md-warn-banner,
   .cli-tarjeta-alerta, .tarea-row, etc.) se renderizaban en cream
   sobre dark. Aquí van los overrides class-based.
═══════════════════════════════════════════════════════════════ */

/* ── Mi Día ────────────────────────────────────────────────────── */
html[data-theme="dark"] .md-warn-banner {
  background: rgba(217,119,6,.12) !important;
  color: #fcd34d !important;
  border-color: rgba(217,119,6,.35) !important;
}
html[data-theme="dark"] .md-warn-banner * { color: inherit !important; }
html[data-theme="dark"] .md-week-col-today {
  background: rgba(217,119,6,.08) !important;
}
html[data-theme="dark"] .md-week-col-today .md-week-col-head {
  background: rgba(217,119,6,.18) !important;
  color: #fcd34d !important;
}
html[data-theme="dark"] .md-side-tarea a { color: var(--text) !important; }
html[data-theme="dark"] .md-empty { color: var(--text-muted) !important; }
html[data-theme="dark"] .md-btn-secondary {
  background: var(--surface-2) !important;
  color: var(--text-sm) !important;
  border-color: var(--border-md) !important;
}
html[data-theme="dark"] .md-btn-secondary:hover { background: var(--surface) !important; }

/* ── Cliente dashboard ─────────────────────────────────────────── */
html[data-theme="dark"] .cli-tarjeta-alerta {
  background: rgba(217,119,6,.12) !important;
  border-color: rgba(217,119,6,.35) !important;
}
html[data-theme="dark"] .cli-tarjeta-alerta * { color: var(--text) !important; }

/* ── Anuncios (prioridad de comunicado) ───────────────────────── */
html[data-theme="dark"] .anu-prio-info {
  background: rgba(14,165,233,.18) !important;
  color: #7dd3fc !important;
}
html[data-theme="dark"] .anu-prio-aviso {
  background: rgba(217,119,6,.18) !important;
  color: #fcd34d !important;
}
html[data-theme="dark"] .anu-prio-urgente {
  background: rgba(220,38,38,.18) !important;
  color: #fca5a5 !important;
}
html[data-theme="dark"] .anu-card-noleido {
  background: rgba(99,102,241,.12) !important;
  border-left-color: #818cf8 !important;
}

/* ── Tareas (kanban + lista agrupada) ──────────────────────────── */
html[data-theme="dark"] .grupo-section,
html[data-theme="dark"] .grupo-header,
html[data-theme="dark"] .tarea-row,
html[data-theme="dark"] .mi-tarea-row,
html[data-theme="dark"] .kanban-card {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .grupo-header:hover,
html[data-theme="dark"] .tarea-row:hover,
html[data-theme="dark"] .mi-tarea-row:hover {
  background: var(--surface-2) !important;
}
html[data-theme="dark"] .grupo-section { border-color: var(--border) !important; }
html[data-theme="dark"] .grupo-name { color: var(--text) !important; }
html[data-theme="dark"] .tarea-header-row {
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .kanban-body {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .kanban-body.drag-over {
  background: rgba(99,102,241,.12) !important;
  border-color: #6366f1 !important;
}
html[data-theme="dark"] .grupo-count {
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .filtros-bar {
  background: var(--surface) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .filtro-chip {
  background: var(--surface) !important;
  color: var(--text-sm) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .filtro-chip.activo {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border-md) !important;
}
html[data-theme="dark"] .view-tabs {
  background: var(--surface) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .view-tab.active {
  color: var(--text) !important;
  border-bottom-color: var(--text) !important;
}
html[data-theme="dark"] .update-bubble {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .update-mio {
  background: rgba(99,102,241,.12) !important;
  border-color: #6366f1 !important;
}
html[data-theme="dark"] .msg-other {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .chat-input-wrap {
  background: var(--surface) !important;
  border-top-color: var(--border) !important;
}

/* ── Hover de filas de .tbl: corregir #fafafa que pasaba ────── */
html[data-theme="dark"] .tbl tbody tr:hover td {
  background: rgba(99,102,241,.08) !important;
}
html[data-theme="dark"] .tbl-cambios td {
  background: rgba(217,119,6,.08) !important;
}
html[data-theme="dark"] .tbl-cambios:hover td {
  background: rgba(217,119,6,.14) !important;
}

/* ── Fila seleccionada / activa en cualquier tabla ─────────── */
html[data-theme="dark"] tr.selected,
html[data-theme="dark"] tr.is-selected,
html[data-theme="dark"] tr.row-active,
html[data-theme="dark"] .tbl tr.selected td,
html[data-theme="dark"] .tbl tr.is-selected td {
  background: rgba(99,102,241,.14) !important;
}

/* ── Mi Trabajo: tarjetas, items, header ─────────────────────── */
html[data-theme="dark"] .mt-header {
  background: var(--surface) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .mt-counter-gray {
  background: var(--surface-2) !important;
  color: var(--text-sm) !important;
}
html[data-theme="dark"] .mt-equipo-cnt {
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .mt-item-vencida {
  background: rgba(220,38,38,.08) !important;
}
html[data-theme="dark"] .mt-tipo-mencion {
  background: rgba(217,119,6,.18) !important;
  color: #fcd34d !important;
  border-color: rgba(217,119,6,.35) !important;
}
html[data-theme="dark"] .mt-quickadd-form,
html[data-theme="dark"] .dash-kpi,
html[data-theme="dark"] .dash-panel {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .dash-progress-bar {
  background: var(--surface-2) !important;
}

/* ── Chat: ventanas, mensajes, composer ─────────────────────── */
html[data-theme="dark"] .chat-app-bar,
html[data-theme="dark"] .chat-header,
html[data-theme="dark"] .chat-canales,
html[data-theme="dark"] .chat-canales-header + div,
html[data-theme="dark"] .chat-mensajes,
html[data-theme="dark"] .chat-composer-wrap {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .chat-composer-box {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .chat-composer-box:focus-within {
  background: var(--surface) !important;
  border-color: #6366f1 !important;
}