/* ============================================================
   SISTEMA — la capa que faltaba.
   Antes cada módulo inventaba su propio espaciado (30+ valores de
   padding), su propio radio (19) y su propio tamaño de letra (25).
   Aquí se fija UNA escala y se construyen las primitivas que todos
   los módulos comparten: encabezado de página, panel, tabla y
   control segmentado.

   Se carga DESPUÉS de app.css para poder normalizar lo que ya existe.
   ============================================================ */

:root {
  /* Espaciado — 6 pasos. Si necesitas un valor que no está aquí,
     el problema es el diseño, no la escala. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  /* Tipografía — 7 tamaños. Los .5px que había regados (12.5, 13.5,
     14.5, 11.5) no comunicaban nada: eran deriva. */
  --t-xs: 11px;   /* meta, conteos */
  --t-sm: 12px;   /* secundario, columnas de tabla */
  --t-md: 13px;   /* cuerpo de UI, controles */
  --t-base: 14px; /* nombre de fila, cuerpo */
  --t-lg: 16px;   /* subtítulo de sección */
  --t-xl: 20px;   /* título de vista */
  --t-2xl: 26px;  /* título de página */

  /* Radios — 3 + pastilla. Los botones van en pastilla (brandkit). */
  --rs: 6px;
  --rm: 8px;
  --rl: 12px;
  --rp: 999px;

  /* Iconos — 3 tamaños, no 7. Trazo 1.8 sobre rejilla de 24 (brandkit). */
  --ic-sm: 14px;
  --ic-md: 16px;
  --ic-lg: 20px;

  /* Alturas de golpeo — constantes en toda la app */
  --h-row: 40px;   /* fila de tabla */
  --h-ctl: 32px;   /* botón, select, input de barra */
}

/* Iconografía: un solo peso de trazo en toda la app. El brandkit pide
   1.8 sobre rejilla de 24; el código traía 2 en unos sitios y 1.5 en
   otros, que es por qué la interfaz se sentía "de retazos". */
svg[stroke] { stroke-width: 1.8; }
.ic { flex-shrink: 0; }

/* ── Encabezado de página ─────────────────────────────────────────
   Todos los módulos abrían con su propio <div> y estilos en línea.
   Ahora hay uno solo. */
.ph {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}
.ph-title {
  font-size: var(--t-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.ph-sub {
  font-size: var(--t-md);
  color: var(--text-secondary);
  margin-top: var(--s1);
}
.ph-actions { display: flex; align-items: center; gap: var(--s2); }

/* ── Barra de herramientas de vista ───────────────────────────── */
.tbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border);
}
.tbar-l, .tbar-r { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* Control segmentado (Lista / Cronograma) */
.seg {
  display: inline-flex;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--rm);
  padding: 2px;
  gap: 2px;
}
.seg-btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  height: 28px; padding: 0 var(--s3);
  font-size: var(--t-md); font-weight: 500; font-family: inherit;
  color: var(--text-secondary);
  background: transparent; border: 0; border-radius: var(--rs);
  cursor: pointer;
}
.seg-btn:hover { color: var(--text-primary); }
.seg-btn.active { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Select de barra — mismo alto que todo lo demás de la fila */
.ctl {
  height: var(--h-ctl);
  padding: 0 var(--s3);
  font-size: var(--t-md); font-family: inherit;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--rm);
  cursor: pointer;
}
.ctl:hover { color: var(--text-primary); border-color: var(--border-strong); }
.ctl:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Tabla ────────────────────────────────────────────────────────
   El componente que arregla el problema de fondo: hasta ahora cada
   tarea era una tarjeta de alto variable, así que nada quedaba
   alineado entre filas y no se podía escanear en columna. Aquí toda
   fila mide lo mismo y cada atributo vive en su columna.

   Cada tabla declara sus columnas en --cols (grid-template-columns).
   ────────────────────────────────────────────────────────────── */
.tbl { --cols: 28px minmax(0, 1fr); width: 100%; }

.tbl-wrap { overflow-x: auto; }

.tbl-head,
.tbl-row {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s2);
}

.tbl-head {
  position: sticky; top: 0; z-index: 2;
  height: 34px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-strong);
  font-size: var(--t-sm);
  color: var(--text-muted);
  font-weight: 500;
}
.tbl-head > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tbl-row {
  height: var(--h-row);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: var(--t-md);
  color: var(--text-secondary);
}
.tbl-row:hover { background: var(--bg-hover); }
.tbl-row:last-child { border-bottom: 0; }

/* El nombre es lo único que pesa. Todo lo demás es contexto. */
.tbl-name {
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.tbl-cell {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.tbl-row.is-done { color: var(--text-muted); }
.tbl-row.is-done .tbl-name { color: var(--text-muted); text-decoration: line-through; }

/* Círculo de completar, a la izquierda (como Asana) */
.tbl-check {
  width: 18px; height: 18px; padding: 0;
  display: grid; place-items: center;
  background: transparent;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  color: transparent;
  cursor: pointer;
}
.tbl-check:hover { border-color: var(--green); color: var(--green); }
.tbl-check.is-done { background: var(--green); border-color: var(--green); color: #fff; }
.tbl-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Estado: punto + texto. Sin fondo tintado — el color solo marca
   estado, no etiqueta (regla de sobriedad). */
.st { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; }
.st-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }
.st-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-sel {
  appearance: none;
  height: 26px; padding: 0 var(--s2); max-width: 100%;
  font-size: var(--t-md); font-family: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rs);
  cursor: pointer;
}
.tbl-row:hover .st-sel { border-color: var(--border); background: var(--bg-card); }
.st-sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }

/* Fecha vencida: rojo, y nada más en la fila lleva color. */
.tbl-late { color: var(--red); }

/* Acciones: solo al pasar el mouse. Antes vivían siempre visibles y
   eran ruido permanente en cada fila. */
.tbl-actions { display: flex; align-items: center; gap: var(--s1); justify-content: flex-end; opacity: 0; }
.tbl-row:hover .tbl-actions,
.tbl-row:focus-within .tbl-actions { opacity: 1; }
.tbl-act {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  color: var(--text-muted);
  background: transparent; border: 0; border-radius: var(--rs);
  cursor: pointer;
}
.tbl-act:hover { background: var(--bg-card); color: var(--text-primary); }
.tbl-act.is-danger:hover { color: var(--red); }
.tbl-act:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; }

/* Sección colapsable — el "▾ Ejecución (2)" de Asana */
.tbl-group {
  display: flex; align-items: center; gap: var(--s2);
  width: 100%;
  height: 36px; padding: 0 var(--s3);
  margin-top: var(--s4);
  font-size: var(--t-md); font-weight: 600; font-family: inherit;
  color: var(--text-primary);
  background: transparent; border: 0;
  cursor: pointer;
  text-align: left;
}
.tbl-group:first-child { margin-top: 0; }
.tbl-group:hover { color: var(--accent-light); }
.tbl-group:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--rs); }
.tbl-caret { transition: transform 0.12s ease; color: var(--text-muted); }
.tbl-group[aria-expanded="false"] .tbl-caret { transform: rotate(-90deg); }
.tbl-count { font-size: var(--t-sm); font-weight: 500; color: var(--text-muted); }

/* Estado vacío: una invitación a actuar, no un adorno. */
.tbl-empty {
  padding: var(--s5) var(--s3);
  font-size: var(--t-md);
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .tbl-caret { transition: none; }
}

/* En pantalla angosta la tabla mantiene sus columnas y se desplaza,
   en vez de derrumbarse a tarjetas de alto variable (que es de donde
   veníamos). */
@media (max-width: 860px) {
  .tbl { min-width: 640px; }
}

/* ── Panel ────────────────────────────────────────────────────────
   Contenedor de sección: mismo padding y mismo borde siempre. */
.panel {
  border: 1px solid var(--border);
  border-radius: var(--rl);
  background: var(--bg-card);
  padding: var(--s4);
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.panel-title { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.01em; }

/* ── Agenda (cronograma) ──────────────────────────────────────────
   UN solo componente para el cronograma de Proyectos y el de
   Marketing. Antes eran dos: 7 columnas rígidas con fondos tintados
   en Proyectos, agenda vertical en Marketing. Misma idea, dos
   lenguajes visuales. Gana la agenda: la semana se lee de arriba
   abajo, cada día crece lo que necesite y nada se satura. */
.agenda-cabeza {
  display: flex; align-items: baseline; gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}
.agenda-rango { font-size: var(--t-base); font-weight: 600; }
.agenda-total { font-size: var(--t-md); color: var(--text-secondary); }

.agenda { border-top: 1px solid var(--border); }
.agenda-dia {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--border);
}
.agenda-dia.is-vacio { padding-top: var(--s2); padding-bottom: var(--s2); }

/* Hoy: una línea azul a la izquierda. No un bloque de color de fondo —
   el color marca, no decora. El borde lo llevan TODOS los días en
   transparente, así el día de hoy no se desplaza 2px respecto al resto. */
.agenda-dia { border-left: 2px solid transparent; padding-left: var(--s3); }
.agenda-dia.is-hoy { border-left-color: var(--accent); }

.agenda-fecha { display: flex; align-items: baseline; gap: var(--s2); color: var(--text-secondary); }
.agenda-dow { font-size: var(--t-sm); text-transform: capitalize; }
.agenda-num { font-size: var(--t-lg); font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; }
.agenda-dia.is-hoy .agenda-num { color: var(--accent-light); }
.agenda-mes { font-size: var(--t-xs); color: var(--text-muted); }

.agenda-items { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.agenda-libre { font-size: var(--t-md); color: var(--text-muted); }

.agenda-item {
  display: flex; align-items: center; gap: var(--s2);
  width: 100%;
  padding: var(--s2) var(--s3);
  font-family: inherit; text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--rm);
  cursor: pointer;
}
.agenda-item:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.agenda-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.agenda-item-cuerpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.agenda-item-titulo {
  font-size: var(--t-base); font-weight: 500; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agenda-item-meta {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-sm); color: var(--text-muted);
  overflow: hidden; white-space: nowrap;
}
.agenda-item-estado, .agenda-item-terr { font-size: var(--t-xs); }
.agenda-fuera { margin-top: var(--s3); font-size: var(--t-sm); color: var(--text-muted); }

@media (max-width: 640px) {
  .agenda-dia { grid-template-columns: 1fr; gap: var(--s2); }
}

/* ── Enlaces dentro de una fila de tabla ─────────────────────────── */
.tbl-link { color: inherit; cursor: pointer; text-decoration: none; }
.tbl-link:hover { color: var(--accent-light); text-decoration: underline; }
.tbl-sub { color: var(--text-muted); }

/* ── Panel de proyectos (columna izquierda) ─────────────────────── */
.proy-layout { grid-template-columns: 224px 1fr; gap: var(--s4); }
.proy-aside { padding: var(--s2); border-radius: var(--rl); }
.proy-aside-label {
  padding: var(--s3) var(--s3) var(--s2);
  font-size: var(--t-xs);
  color: var(--text-muted);
  font-weight: 500;
}

/* ── Marketing: cuentas como barra de chips ──────────────────────── */
.mk-plan { display: block; }
.mk-cuentas {
  display: flex; align-items: center; gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}
.mk-cuenta {
  display: inline-flex; align-items: center; gap: var(--s2);
  height: var(--h-ctl); padding: 0 var(--s3);
  font-size: var(--t-md); font-family: inherit;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--rp);
  cursor: pointer;
}
.mk-cuenta:hover { color: var(--text-primary); border-color: var(--border-strong); }
.mk-cuenta.active { color: var(--accent-light); border-color: var(--accent); background: var(--accent-soft); }
.mk-cuenta:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mk-cuenta-n { font-size: var(--t-xs); color: var(--text-muted); }
.mk-cuenta.active .mk-cuenta-n { color: var(--accent-light); }

.mk-resumen { margin-bottom: var(--s5); }

/* Newsletters: archivo plegado */
.mk-archivo { margin-top: var(--s5); border-top: 1px solid var(--border); }
.mk-archivo > summary {
  display: flex; align-items: center; gap: var(--s2);
  height: 44px;
  font-size: var(--t-md); font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}
.mk-archivo > summary::-webkit-details-marker { display: none; }
.mk-archivo > summary:hover { color: var(--accent-light); }
.mk-archivo:not([open]) > summary .tbl-caret { transform: rotate(-90deg); }
.mk-archivo-cuerpo { padding-bottom: var(--s4); }

/* Dentro del resumen plegable las tarjetas van compactas: son consulta, no
   protagonistas. A tamaño completo empujaban el planning fuera de pantalla. */
.mk-resumen .mk-metric { padding: var(--s3) var(--s4); }
.mk-resumen .mk-metric-value { font-size: var(--t-xl); }
.mk-resumen .mk-card { padding: var(--s3) var(--s4); }
.mk-resumen .mk-days { margin: var(--s2) 0; }
.mk-resumen .mk-day { width: 28px; height: 28px; }
.mk-resumen .mk-big { font-size: var(--t-xl); }

/* ── Encabezado heredado ──────────────────────────────────────────
   Contactos, Oportunidades, Calculadora y Certificados siguen usando
   .contactos-head. En vez de reescribir esos módulos, el encabezado
   viejo hereda el tratamiento del nuevo: toda la app abre igual.
   Los tamaños en línea de esos archivos (font-size:24px, margin-top:2px)
   ganan por especificidad, así que se neutralizan aquí. */
.contactos-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s5) !important;
}
.contactos-head h2 {
  font-size: var(--t-2xl) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.contactos-head p {
  font-size: var(--t-md) !important;
  color: var(--text-secondary) !important;
  margin-top: var(--s1) !important;
}

/* Los selects sueltos de filtro (marketing, listas) toman el mismo alto y
   borde que .ctl, para que una barra de filtros no mezcle tres alturas. */
.mk-estado-sel, .mk-filtro-sel {
  height: var(--h-ctl);
  padding: 0 var(--s3);
  font-size: var(--t-md); font-family: inherit;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--rm);
  cursor: pointer;
}
.mk-estado-sel:hover, .mk-filtro-sel:hover { color: var(--text-primary); border-color: var(--border-strong); }

/* ── Cronograma: la semana en 7 columnas ──────────────────────────
   Toda la semana a la vista de un golpe, sin desplazamiento: las 7
   columnas se reparten el ancho disponible. Es la forma original —
   limpiada, no reemplazada.

   Qué cambió frente a la versión vieja:
   · las tarjetas ya no llevan fondo tintado por estado (eran 7 bloques
     de color compitiendo); el estado es un punto de 6px
   · la columna del día más cargado ya no se pinta entera de morado;
     ese dato vive una sola vez, en la línea de resumen
   · el fin de semana se atenúa, así la semana laboral resalta sola
   · un solo tamaño de letra por nivel, en vez de 9/11/12px mezclados */
.cro-resumen {
  display: flex; align-items: baseline; gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
  font-size: var(--t-md);
  color: var(--text-secondary);
}
.cro-rango { font-size: var(--t-base); font-weight: 600; color: var(--text-primary); }
.cro-pico, .cro-fuera { color: var(--text-muted); }

.cronograma {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--s2);
  align-items: start;
}

.cro-col {
  display: flex; flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--rl);
  background: var(--bg-secondary);
  border-top: 2px solid transparent;   /* lo llevan todos: hoy no se desplaza */
}
/* Sábado y domingo: mismo sitio, menos peso. */
.cro-col.is-finde { background: transparent; }
.cro-col.is-finde .cro-dia, .cro-col.is-finde .cro-fecha { color: var(--text-muted); }
/* Hoy: una línea azul arriba y la fecha en azul. Sin bloque de color. */
.cro-col.is-hoy { border-top-color: var(--accent); }
.cro-col.is-hoy .cro-fecha { color: var(--accent-light); }

.cro-head {
  display: flex; align-items: baseline; gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--border);
}
.cro-dia {
  font-size: var(--t-sm);
  color: var(--text-secondary);
  text-transform: capitalize;
}
.cro-fecha { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.02em; }
.cro-n { margin-left: auto; font-size: var(--t-xs); color: var(--text-muted); }

.cro-tasks {
  display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s2);
  min-height: 64px;
}
.cro-vacio { padding: var(--s2) var(--s1); font-size: var(--t-sm); color: var(--text-muted); }

.cro-task {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%;
  padding: var(--s2);
  font-family: inherit; text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--rm);
  cursor: pointer;
}
.cro-task:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.cro-task:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cro-task-top { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.cro-task-titulo {
  font-size: var(--t-md); font-weight: 500; color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.cro-task-meta {
  font-size: var(--t-xs); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-left: 14px;   /* alineado bajo el título, no bajo el punto */
}

/* Por debajo de ~1100px de panel, 7 columnas dejan de caber sin apretar
   el texto: la semana se parte en dos filas de 4 y sigue completa a la
   vista, en vez de obligar a desplazar en horizontal. */
@media (max-width: 1150px) {
  .cronograma { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cronograma { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* En cronograma no hay panel lateral: la semana se queda con todo el ancho. */
.proy-layout--ancho { grid-template-columns: 1fr; }

/* Foco visible al recorrer la tabla con el teclado. */
.tbl-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--rs); }

/* Nombres largos de proyecto en una sola línea: si envuelven, cada item del
   panel mide distinto y la columna deja de leerse pareja. */
.proy-proj-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.proy-proj-top { display: flex; align-items: baseline; gap: var(--s2); }
.proy-proj-cli { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Marketing: la lista habla el mismo idioma que Proyectos y Tareas ──
   Los selects de formato, territorio y objetivo eran píldoras con borde de
   color; en una fila con cuatro, el renglón se volvía un racimo de etiquetas
   y ninguna decía más que las otras. Ahora son texto quieto que solo se
   delata al pasar el mouse, igual que el select de estado de la tabla. */
.mk-pieza { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.mk-logos { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.mk-logos svg, .mk-logos img { width: 14px; height: 14px; }

.mk-fmt-sel, .mk-terr-sel, .mk-obj {
  appearance: none;
  width: 100%; max-width: 100%;
  height: 26px; padding: 0 var(--s2);
  font-size: var(--t-md); font-family: inherit; font-weight: 400;
  text-align: left;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rs);
  cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tbl-row:hover .mk-fmt-sel,
.tbl-row:hover .mk-terr-sel,
.tbl-row:hover .mk-obj { border-color: var(--border); background: var(--bg-card); }
.mk-fmt-sel:focus-visible, .mk-terr-sel:focus-visible, .mk-obj:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 0;
}
/* Sin valor: se atenúa, para que se vea de un vistazo qué falta por definir. */
.mk-fmt-sel:not(.tiene), .mk-terr-sel:not(.tiene) { color: var(--text-muted); }

/* marketing.css pinta el borde de estos selects en azul cuando tienen valor
   (.tiene). Dentro de la tabla eso convertía cada fila en un semáforo: azul
   por tener territorio, gris por no tenerlo. El dato ya lo dice el texto. */
.mk-terr-sel.tiene, .mk-fmt-sel.tiene {
  border-color: transparent;
  color: var(--text-secondary);
}
.tbl-row:hover .mk-terr-sel.tiene,
.tbl-row:hover .mk-fmt-sel.tiene { border-color: var(--border); }

/* El buscador era una caja de 48px de alto y 12px de radio, más grande que
   cualquier control de la app. Se alinea con la barra de herramientas. */
.mk-search {
  height: var(--h-ctl);
  padding: 0 var(--s3);
  font-size: var(--t-md);
  border-radius: var(--rm);
  background: var(--bg-secondary);
  margin-bottom: var(--s3);
  max-width: 340px;
}
.mk-search:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }

/* ── Navegador de semanas (lista y cronograma) ────────────────────────
   El mismo control en las dos vistas. En la lista, el botón del centro
   además enciende y apaga el filtro, y se marca cuando está encendido. */
.mk-sem-nav { display: inline-flex; align-items: center; gap: var(--s1); }
.mk-sem-lbl {
  display: inline-flex; align-items: center; gap: var(--s2);
  height: var(--h-ctl); padding: 0 var(--s3);
  font-size: var(--t-md); font-family: inherit; font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--rp);
  cursor: pointer;
  white-space: nowrap;
}
.mk-sem-lbl:hover { color: var(--text-primary); border-color: var(--border-strong); }
.mk-sem-lbl.active { color: var(--accent-light); border-color: var(--accent); background: var(--accent-soft); }
.mk-sem-lbl:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Cumplimiento: decir de qué semana hablan los círculos ────────────
   El widget mezclaba dos escalas sin avisar: los círculos son de UNA semana
   y el número grande es de todo el periodo del filtro. Verlos juntos sin
   etiqueta hacía que "3 publicados" no cuadrara con 2 círculos verdes. */
.mk-semana-lbl {
  font-size: var(--t-sm);
  color: var(--text-muted);
  margin-top: var(--s2);
}
/* Un día con más de una publicación muestra cuántas; antes se veía igual
   que un día con una sola. */
.mk-day { display: grid; place-items: center; font-size: var(--t-xs); font-weight: 600; }
.mk-day--done { color: #fff; }

/* ── Fecha editable en la fila ────────────────────────────────────────
   Poner la fecha es LA acción del modulo ("elige la parrilla y planifica") y
   era el unico campo que obligaba a abrir la pieza entera. Ahora se edita en
   la fila, con el mismo tratamiento callado que el resto: texto quieto que
   solo se delata al pasar el mouse. */
.mk-fecha {
  width: 100%;
  height: 26px; padding: 0 var(--s2);
  font-size: var(--t-md); font-family: inherit;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rs);
  cursor: pointer;
}
.mk-fecha.tiene { color: var(--text-secondary); }
.mk-fecha.is-tarde { color: var(--red); }
.tbl-row:hover .mk-fecha { border-color: var(--border); background: var(--bg-card); }
.mk-fecha:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
/* El icono del calendario nativo, atenuado para que no compita con el texto */
.mk-fecha::-webkit-calendar-picker-indicator { opacity: 0.35; cursor: pointer; }
.mk-fecha:hover::-webkit-calendar-picker-indicator { opacity: 0.7; }

/* El cumplimiento ya no es una tarjeta suelta: encabeza el módulo */
.mk-resumen .mk-compliance { margin-bottom: 0; }

/* La columna "Edita" se comporta como el resto de selectores de la fila */
.mk-editor-sel {
  appearance: none;
  width: 100%; max-width: 100%;
  height: 26px; padding: 0 var(--s2);
  font-size: var(--t-md); font-family: inherit;
  text-align: left;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rs);
  cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-editor-sel.tiene { color: var(--text-secondary); }
.tbl-row:hover .mk-editor-sel { border-color: var(--border); background: var(--bg-card); }
.mk-editor-sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }

/* ── La semana, en el encabezado del módulo ───────────────────────────
   Gobierna los círculos, la lista y el cronograma, así que va encima de
   todos ellos. Antes vivía en la barra de la lista —debajo del widget al
   que manda— y se leía como un filtro más entre estado y equipo. */
.mk-cabeza-semana {
  display: flex; align-items: center; gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s2);
}
.mk-cabeza-semana .mk-rango { font-size: var(--t-md); color: var(--text-muted); }
.mk-cabeza-semana .mk-link-btn { margin-left: auto; }
/* Ya no es un interruptor: solo dice qué semana se está viendo. */
.mk-sem-lbl { font-weight: 600; color: var(--text-primary); }
.mk-sem-lbl:hover { color: var(--accent-light); }

/* ── Barra de filtros de Marketing ────────────────────────────────────
   TODO lo que acota lo que se ve vive en estas dos filas: vista y búsqueda
   arriba, periodo y filtros abajo. Antes el periodo estaba en la tarjeta de
   cumplimiento, muy por encima, y se leía como parte del widget de la meta
   en vez de como el filtro de la lista que en realidad era. */
.mk-barra { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s3); }
.mk-barra-fila { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.mk-barra .mk-search { margin-bottom: 0; flex: 1 1 240px; max-width: 380px; }
/* El botón de limpiar se va al extremo: es una salida, no un filtro más. */
.mk-barra-fila #mk-filtros-estado:not(:empty) { margin-left: auto; }

/* Periodo: el select manda y las flechas solo aparecen cuando acotan algo.
   Unas flechas en "Todo el tiempo" no tendrían nada que mover. */
.mk-per { display: inline-flex; align-items: center; gap: var(--s1); }
.mk-per-lbl {
  display: inline-flex; align-items: center;
  height: var(--h-ctl); padding: 0 var(--s3);
  font-size: var(--t-md); font-family: inherit; font-weight: 600;
  color: var(--text-primary);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--rp);
  cursor: pointer;
  white-space: nowrap;
}
.mk-per-lbl:hover { color: var(--accent-light); }

/* En la tarjeta de cumplimiento la semana ya no se navega: solo se nombra. */
.mk-sem-lbl-fija {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-md); font-weight: 600; color: var(--text-primary);
}

/* ── OUTREACH: base de contactos en frío ──────────────────────────────
   Reutiliza .tbl, .mk-barra y .mk-estado-sel del resto de la app: esta
   pantalla no necesita un lenguaje visual propio, solo sus dos columnas
   particulares (persona con cargo debajo, y el bloque de acciones). */
.out-persona { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.out-nombre  { font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.out-cargo   { font-size: var(--t-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.out-vacio   { color: var(--text-muted); }
.out-link    { color: var(--accent-light); text-decoration: none; }
.out-link:hover { text-decoration: underline; }
.out-acts    { display: flex; align-items: center; gap: var(--s1); justify-content: flex-end; }

/* Ya convertido: sigue visible (es el historial de lo que funcionó) pero
   apagado, para que no compita con lo que queda por trabajar. */
.out-convertido { opacity: .62; }
.out-convertido .out-nombre { font-weight: 500; }

/* El estado se lee de un vistazo por color: en una lista de cien filas,
   distinguirlos leyendo la palabra es justo lo que no se hace. */
.out-estado { min-width: 110px; }
.out-est-nuevo       { color: var(--text-secondary); }
.out-est-contactado  { color: var(--yellow); }
.out-est-respondio   { color: var(--green); }
.out-est-no_interesa { color: var(--text-muted); }
.out-est-convertido  { color: var(--accent-light); }

.out-pager { display: flex; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s3) 0; }
.out-pager-lbl { font-size: var(--t-md); color: var(--text-secondary); min-width: 130px; text-align: center; }
.out-pager .df-nav[disabled] { opacity: .35; cursor: default; }

/* Importador: el mapeo de columnas en dos columnas, con scroll propio.
   Un CSV de Apollo trae 40 campos y la lista completa no cabe en pantalla. */
.out-imp-resumen {
  margin: var(--s3) 0 var(--s2);
  font-size: var(--t-md); color: var(--text-secondary);
}
.out-imp-mapa {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2);
  max-height: 320px; overflow-y: auto;
  padding: var(--s2); margin-top: var(--s2);
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--rm);
}
.out-imp-fila { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.out-imp-fila label { font-size: var(--t-sm); color: var(--text-muted); }
.out-imp-fila select { width: 100%; }

@media (max-width: 720px) {
  .out-imp-mapa { grid-template-columns: 1fr; }
}

/* Casilla "ya le escribí por LinkedIn". Es una columna estrecha que se
   recorre con la vista en vertical, así que la casilla va centrada y el
   área de clic ocupa toda la celda: marcar cincuenta seguidas apuntando a
   un cuadro de 13px es justo lo que no se puede pedir. */
.out-li {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 28px;
  cursor: pointer; border-radius: var(--r-sm);
}
.out-li:hover { background: var(--bg-hover); }
.out-li input { cursor: pointer; width: 15px; height: 15px; accent-color: var(--accent); margin: 0; }
/* Marcado: se tiñe la celda entera, para distinguir de un vistazo a quién
   ya se escribió sin tener que mirar el cuadrito uno por uno. */
.out-li.marcado { background: var(--accent-soft); }
.out-li.marcado:hover { background: var(--accent-ring); }
/* La cabecera de esa columna es "in": se centra sobre las casillas. */
.tbl-head span[title^="¿Ya le escribiste"] { text-align: center; font-weight: 700; }

/* Importador: aviso cuando no se reconoce nada, y previsualización. */
.out-imp-alerta { color: var(--yellow); }
.out-imp-cabeceras {
  margin-top: 4px; font-size: var(--t-sm); color: var(--text-muted);
  word-break: break-word;
}
.out-prev-wrap { overflow-x: auto; margin-top: var(--s2); }
.out-prev { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.out-prev th, .out-prev td {
  text-align: left; padding: 5px 8px; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.out-prev th { color: var(--text-muted); font-weight: 600; }
.out-prev td { color: var(--text-primary); }
.out-prev td.out-prev-vacio { color: var(--text-muted); }

/* ── Tarea de proyecto: descripción o lista de subtareas ──────────────── */
.pt-detalle-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: 6px; flex-wrap: wrap; }
.pt-seg .seg-btn { font-size: var(--t-sm); }

.pt-chk-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.pt-chk-item { display: flex; align-items: center; gap: var(--s2); }
.pt-chk-item input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); flex-shrink: 0; margin: 0; }
.pt-chk-txt {
  flex: 1; min-width: 0;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 6px 9px;
  color: var(--text-primary); font-family: inherit; font-size: var(--t-md);
}
.pt-chk-txt:focus { outline: none; border-color: var(--accent); }
/* Tachado en cuanto se marca: es la señal de "hecho" que se busca de un vistazo. */
.pt-chk-item.ok .pt-chk-txt { text-decoration: line-through; color: var(--text-muted); }
.pt-chk-vacio { font-size: var(--t-sm); color: var(--text-muted); padding: 2px 0 4px; }
.pt-chk-aviso { font-size: var(--t-sm); color: var(--yellow); margin-top: 6px; }
.pt-chk-aviso:empty { display: none; }

/* Contador junto al título, en la fila de la tarea. */
.pt-chk-badge {
  margin-left: var(--s2);
  padding: 1px 7px;
  font-size: var(--t-sm); font-family: inherit; font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 999px; cursor: pointer;
  vertical-align: middle;
}
.pt-chk-badge:hover, .pt-chk-badge.abierta { color: var(--text-primary); border-color: var(--border-strong); }
.pt-chk-badge.full { color: var(--green); border-color: var(--green); }

/* La lista desplegada ocupa toda la fila: la fila es una rejilla y sin
   esto el bloque se metería dentro de una sola columna. */
.pt-chk-inline {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 2px;
  margin: 6px 0 2px; padding: 8px 10px;
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--rm);
  cursor: default;
}
.pt-chk-inline-item { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-md); cursor: pointer; padding: 2px 0; }
.pt-chk-inline-item input { width: 14px; height: 14px; accent-color: var(--accent); flex-shrink: 0; margin: 0; }
.pt-chk-inline-item.ok span { text-decoration: line-through; color: var(--text-muted); }