/* Morris × Opazo — UI aligned al pack mkmedico-ui de la biblia (workspace default)
   ───────────────────────────────────────────────────────────────────
   Se carga DESPUÉS de tokens.css. Las variables legacy (--ink-*, --brand-*, etc.)
   son alias que apuntan a los tokens --dsmk-* del pack. Cualquier código nuevo
   debe usar directamente los tokens dsmk. Los componentes .dsmk-* están al final.
   Tema en <body data-theme="enconsultamedica"> (paleta azul confianza).
*/

:root {
  /* ── Ink / grises (alias del pack) ── */
  --ink-900: var(--dsmk-ink-900);
  --ink-800: var(--dsmk-ink-800);
  --ink-700: var(--dsmk-ink-700);
  --ink-600: var(--dsmk-ink-600);
  --ink-500: var(--dsmk-ink-500);
  --ink-400: var(--dsmk-ink-400);
  --ink-300: var(--dsmk-ink-300);
  --ink-200: var(--dsmk-ink-200);
  --ink-100: var(--dsmk-ink-100);
  --ink-50:  var(--dsmk-ink-50);

  /* ── Brand (alias del pack) ── */
  --brand-700: var(--dsmk-brand-700);
  --brand-600: var(--dsmk-brand-600);
  --brand-500: var(--dsmk-brand-500);
  --brand-100: var(--dsmk-brand-100);
  --brand-50:  var(--dsmk-brand-50);

  /* ── Semánticos (alias del pack) ── */
  --mint-700: var(--dsmk-success-700, #047857);
  --mint-600: var(--dsmk-success-600);
  --mint-500: var(--dsmk-success-500);
  --mint-50:  var(--dsmk-success-50);
  --amber-500: var(--dsmk-amber-500);
  --amber-50:  var(--dsmk-amber-50);
  --red-600: var(--dsmk-error-600);
  --red-50:  var(--dsmk-error-50);

  /* Borde de cuadros (paneles, tablas, tarjetas): un tono más oscuro que ink-200, que sobre el fondo
     casi blanco no se distinguía (2026-10-20: "ningún borde sin verse"). */
  --card-border: #cbd5e1;   /* = ink-300. Valor fijo: los --dsmk-ink-* viven en [data-theme] (body), no en :root */

  /* ── Aliases funcionales legacy ── */
  --bg: var(--dsmk-ink-50);
  --surface: #ffffff;
  --surface-2: var(--dsmk-ink-100);
  --border: var(--dsmk-ink-200);
  --text: var(--dsmk-ink-900);
  --text-soft: var(--dsmk-ink-600);
  --muted: var(--dsmk-ink-500);
  --brand: #ff7a00;
  --brand-dark: #cf6300;
  --primary: var(--dsmk-brand-600);
  --primary-soft: var(--dsmk-brand-50);
  --success: var(--dsmk-success-600);
  --danger: var(--dsmk-error-600);
  --warning: var(--dsmk-amber-500);

  /* ── Tipografía (system stack del pack) ── */
  --font-body: var(--dsmk-font-body);
  --font-mono: var(--dsmk-font-mono);

  /* ── Radios (alias del pack) ── */
  --radius-xs: var(--dsmk-r-xs);
  --radius-sm: var(--dsmk-r-sm);
  --radius-md: var(--dsmk-r-md);
  --radius-lg: var(--dsmk-r-lg);
  --radius-full: var(--dsmk-r-pill);
  --radius: var(--dsmk-r-sm);

  /* ── Sombras (alias del pack) ── */
  --shadow-sm: var(--dsmk-sh-sm);
  --shadow-md: var(--dsmk-sh-md);
  --shadow-lg: var(--dsmk-sh-lg);
  --shadow: var(--dsmk-sh-sm);

  /* ── Layout ── */
  --sidebar-w: 240px;
  --topbar-h: 56px;
  --tr: var(--dsmk-t-base);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* el atributo hidden debe ganar sobre display de clases (ej. .form-row grid) */
/* Tipografía fluida (biblia, mkmedico-ui §Tipografía fluida): la raíz la define tokens.css en `html` y aquí
   NO se fija (pisarla encoge todo). El texto base va en body. Todos los tamaños de letra en rem. */
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--dsmk-ink-800); }
body { font-family: var(--dsmk-font-body); font-size: .75rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { color: var(--dsmk-ink-900); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── App shell (sidebar + main) ─── */
.app-body { background: var(--bg); }
.app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

/* Sidebar — alineado al pack .dsmk-sidebar (patrón admin team+dcic).
   Morris usa .app-sidebar/.sidebar-link como nomenclatura legacy, replicamos el look. */
/* Menú lateral azul marino Morris (2026-10-20): texto blanco, activo con barra celeste de la marca. */
.app-sidebar {
  --sb-bg: #0c2340;
  --sb-text: rgba(255,255,255,.78);
  --sb-icon: rgba(255,255,255,.55);
  --sb-hover: rgba(255,255,255,.08);
  --sb-active: rgba(255,255,255,.14);
  --sb-line: rgba(255,255,255,.10);
  width: var(--sidebar-w);
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-bg);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
  padding: 16px 12px 24px;
  font-family: var(--dsmk-font-body);
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 18px;
  font-size: .9375rem; font-weight: 700; color: #fff;
  border-bottom: 1px solid var(--sb-line);
  margin-bottom: 14px;
}
.sidebar-brand-logo { display: block; height: 52px; width: auto; max-width: 100%; }
.sidebar-brand:hover { text-decoration: none; }
.sidebar-logo {
  width: 34px; height: 34px; border-radius: var(--dsmk-r-sm);
  background: var(--dsmk-brand-grad);
  color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
  overflow: hidden;
  font-weight: 700; font-size: .875rem;
  box-shadow: 0 0 12px rgba(31,111,235,.25);
}
.sidebar-logo .material-symbols-rounded { font-size: 1.25rem; }
/* Cuando hay imagen, sin fondo (el logo aporta el suyo) */
.sidebar-logo-img-wrap { background: #fff; border: 1px solid var(--dsmk-ink-200); box-shadow: none; }
.sidebar-logo-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sidebar-brand-name { font-weight: 700; font-size: .9375rem; letter-spacing: -.01em; line-height: 1.2; color: var(--dsmk-ink-900); }
.sidebar-brand-sub  { color: var(--dsmk-ink-500); font-size: .7188rem; margin-top: 2px; font-family: var(--dsmk-font-mono); letter-spacing: .04em; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; flex: 1; position: relative; }
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--dsmk-r-sm);
  color: var(--sb-text); font-size: .8438rem; font-weight: 500;
  transition: all var(--dsmk-t-fast);
  position: relative;
}
.sidebar-link:hover { background: var(--sb-hover); color: #fff; text-decoration: none; }
.sidebar-link.active {
  background: var(--sb-active);
  color: #fff;
  font-weight: 600;
}
.sidebar-link.active::before {
  content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--dsmk-brand-500);
}
.sidebar-link .material-symbols-rounded {
  font-size: 1.1875rem; flex: none; color: var(--sb-icon);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.sidebar-link:hover .material-symbols-rounded { color: #fff; }
.sidebar-link.active .material-symbols-rounded {
  color: var(--dsmk-brand-500);
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.sidebar-label { flex: 1; }

.sidebar-footer { padding: 12px 8px 4px; margin-top: 8px; border-top: 1px solid var(--sb-line); }
.sidebar-logout {
  display: flex; align-items: center; gap: 10px;
  color: var(--sb-text); font-size: .8125rem;
  padding: 9px 12px; border-radius: var(--dsmk-r-sm);
  transition: all var(--dsmk-t-fast);
}
.sidebar-logout:hover { color: #fff; background: rgba(220,38,38,.35); text-decoration: none; }
.sidebar-logout .material-symbols-rounded { font-size: 1.125rem; }

/* .app-main es el scroll port principal — altura de viewport para que los scrollbars
   (horizontal y vertical) queden pegados al viewport, siempre visibles sin bajar. */
.app-main { display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow: auto; }
.app-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  height: var(--topbar-h);
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
  flex-shrink: 0; /* en .app-main (flex column + overflow) se encogía a ~23px en páginas largas */
}
.topbar-title { font-size: .9375rem; font-weight: 600; color: var(--text); }
.topbar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.topbar-actions { display: inline-flex; gap: 6px; align-items: center; }
.topbar-user {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text); font-size: .8125rem;
}
.topbar-user .material-symbols-rounded { font-size: 1.25rem; color: var(--text-soft); }

/* Selector "Ver como" (solo admin) y franja del modo solo lectura. */
.topbar-vercomo { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.topbar-vercomo .material-symbols-rounded { font-size: 1.125rem; color: var(--text-soft); }
.topbar-vercomo select { max-width: 220px; padding: 5px 8px; font-size: .75rem; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; }
.vercomo-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0;
  padding: 8px 28px; background: #fef3c7; border-bottom: 1px solid #fde68a; color: #78350f; font-size: .8125rem;
}
.vercomo-bar .material-symbols-rounded { font-size: 1.125rem; }
.vercomo-bar .btn { margin-left: auto; }

/* Chip "Último sync OPP" en el topbar (freshness + atajo a re-import). */
.topbar-sync-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text-soft); font-size: .75rem; line-height: 1.2;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.topbar-sync-chip:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); text-decoration: none; }
.topbar-sync-chip .material-symbols-rounded { font-size: .9375rem; }
.topbar-sync-chip-text .muted { color: var(--muted); font-weight: 600; }
@media (max-width: 600px) { .topbar-sync-chip-text { display: none; } }

/* Chip informativo del Marketing Tag ID (topbar derecho). */
.topbar-mkt-tag {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 300px; padding: 4px 10px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .7188rem; line-height: 1.2; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.topbar-mkt-tag:hover { border-color: var(--text-soft); color: var(--text); }
.topbar-mkt-tag .material-symbols-rounded { font-size: .9375rem; }
.topbar-mkt-tag-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-mkt-tag.copied { background: #d1fae5; border-color: #10b981; color: #065f46; }
.topbar-mkt-tag.copied::after { content: ' ✓ copiado'; }
@media (max-width: 900px) { .topbar-mkt-tag { max-width: 140px; } }
@media (max-width: 600px) { .topbar-mkt-tag-text { display: none; } .topbar-mkt-tag { max-width: none; } }

/* Ancho de notebook estándar (pantalla de 1366 px menos el menú lateral), igual que team.mkmedico:
   en monitores grandes el contenido queda centrado y se ve como en un notebook. La barra superior sigue a todo el ancho. */
.app-content { padding: 24px 28px 40px; max-width: 1200px; width: 100%; min-width: 0; margin: 0 auto; box-sizing: border-box; }
.app-footer  { padding: 16px 28px; border-top: 1px solid var(--border); margin-top: auto; background: var(--surface); font-size: .75rem; }

/* Flashbar dentro del main */
.flashbar { padding: 14px 28px 0; max-width: 1400px; width: 100%; }
.flash { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 8px; border: 1px solid; }
.flash-success { background: #e8f7ef; border-color: #b8e1cb; color: #1f6b46; }
.flash-error   { background: #fdecea; border-color: #f1c0bb; color: #8a1d12; }
.flash-info    { background: #e8f0fe; border-color: #bccff5; color: #0e3b8a; }
.flash-warn    { background: #fff5d6; border-color: #f0d480; color: #6b4d00; }

/* Panel / card — alineado al .dsmk-card del pack */
.panel { background: #fff; border: 1px solid var(--card-border); border-radius: var(--dsmk-r-lg);
  padding: 20px; box-shadow: var(--dsmk-sh-sm); margin-bottom: 20px;
  transition: border-color var(--dsmk-t-base), box-shadow var(--dsmk-t-base); }
.panel h1, .panel h2, .panel h3 { margin-top: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; flex-wrap: wrap; }
.panel-head h1, .panel-head h2 { margin: 0; }
/* Dato breve junto al título (contador, filtro activo) en vez de una línea de subtítulo aparte. */
.h1-meta { font-size: .55em; font-weight: 500; color: var(--dsmk-ink-500); margin-left: 6px; letter-spacing: 0; }

/* ─── Botones (refresh design) — aplica a <button>, <a>, <input class="btn"> ─── */
.btn, button.btn, a.btn, input.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 22px; font-size: .8438rem; font-weight: 600;
  border-radius: var(--radius-full);
  border: 1px solid var(--dsmk-brand-600);
  background: var(--dsmk-brand-600); color: #fff !important; cursor: pointer;
  transition: background var(--tr), border-color var(--tr), transform var(--tr), box-shadow var(--tr);
  text-decoration: none; line-height: 1;
}
.btn:hover, a.btn:hover {
  background: var(--dsmk-brand-700); border-color: var(--dsmk-brand-700);
  transform: translateY(-1px); box-shadow: var(--shadow-md);
  text-decoration: none; color: #fff !important;
}
.btn .material-symbols-rounded { font-size: 1.125rem; }
/* Variantes de botón — usan !important porque .btn base tiene selectores element-scoped
   (a.btn, button.btn) que suben la specificity y ganan a los modifiers de una sola clase. */
.btn.btn-secondary, a.btn.btn-secondary, button.btn.btn-secondary {
  background: #fff !important;
  color: var(--dsmk-ink-800) !important;
  border-color: var(--dsmk-ink-300) !important;
}
.btn.btn-secondary:hover, a.btn.btn-secondary:hover {
  background: var(--dsmk-ink-50) !important;
  color: var(--dsmk-ink-900) !important;
  border-color: var(--dsmk-ink-400) !important;
}

.btn.btn-success, a.btn.btn-success, button.btn.btn-success {
  background: var(--dsmk-success-600) !important;
  border-color: var(--dsmk-success-600) !important;
  color: #fff !important;
}
.btn.btn-success:hover { background: var(--dsmk-success-700, #047857) !important; border-color: var(--dsmk-success-700, #047857) !important; }

.btn.btn-danger, a.btn.btn-danger, button.btn.btn-danger {
  background: var(--dsmk-error-600) !important;
  border-color: var(--dsmk-error-600) !important;
  color: #fff !important;
}
.btn.btn-danger:hover { background: #b91c1c !important; border-color: #b91c1c !important; }

.btn.btn-warn, a.btn.btn-warn, button.btn.btn-warn {
  background: var(--dsmk-amber-500) !important;
  border-color: var(--dsmk-amber-500) !important;
  color: #fff !important;
}
.btn.btn-warn:hover { background: #d97706 !important; border-color: #d97706 !important; }

.btn.btn-link, a.btn.btn-link {
  background: transparent !important;
  border: none !important;
  color: var(--dsmk-brand-600) !important;
  padding: 0 !important;
}

.btn-sm { padding: 6px 12px; font-size: .7812rem; }
.btn-sm .material-symbols-rounded { font-size: 1rem; }
.btn-link { background: none; border: none; color: var(--brand-600); cursor: pointer; padding: 0; }

/* Forms */
.form { display: grid; gap: 14px; max-width: 720px; }
.form-row { display: grid; gap: 6px; }
.form-row label {
  font-family: var(--dsmk-font-body);
  font-size: var(--dsmk-fs-sm);
  font-weight: 600;
  color: var(--dsmk-ink-800);
  margin-bottom: 2px;
}
/* Inputs alineados al pack .dsmk-input (bordes visibles + focus ring del brand) */
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  font-family: var(--dsmk-font-body);
  font-size: var(--dsmk-fs-sm);
  color: var(--dsmk-ink-800);
  background: #fff;
  border: 1px solid var(--dsmk-ink-300);
  border-radius: var(--dsmk-r-md);
  padding: 9px 12px;
  transition: border-color var(--dsmk-t-fast), box-shadow var(--dsmk-t-fast);
  outline: none;
}
.form-row input:hover, .form-row select:hover, .form-row textarea:hover {
  border-color: var(--dsmk-ink-400);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  border-color: var(--dsmk-brand-600);
  box-shadow: 0 0 0 3px var(--dsmk-brand-50);
}
.form-row input::placeholder, .form-row textarea::placeholder {
  color: var(--dsmk-ink-400);
}
.form-row input[aria-invalid="true"], .form-row select[aria-invalid="true"], .form-row textarea[aria-invalid="true"] {
  border-color: var(--dsmk-error-600);
}
.form-row input[aria-invalid="true"]:focus, .form-row select[aria-invalid="true"]:focus, .form-row textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--dsmk-error-50);
}
.form-row textarea { min-height: 90px; resize: vertical; line-height: var(--dsmk-lh-normal); }
.form-row .hint { color: var(--dsmk-ink-500); font-size: .75rem; margin-top: 3px; }
/* Selects con apariencia consistente con los inputs (flecha propia) */
.form-row select, .filters select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 32px; cursor: pointer; line-height: 1.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
}
/* Filtro de mes del dashboard (acorde al resto de selects) */
.dash-filter { display: flex; align-items: center; gap: 8px; }
.dash-filter select {
  padding: 7px 30px 7px 11px; border: 1px solid var(--border); border-radius: 6px;
  background-color: var(--surface); color: var(--text); font: inherit; cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 14px;
}
/* Cuando search-select.js convierte el <select> en combobox, el wrap pierde el ancho del select nativo: */
.dash-filter .ss-wrap { width: auto; min-width: 140px; display: inline-block; vertical-align: middle; }
.dash-filter .ss-trigger { min-width: 140px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; } }
.form-actions { display: flex; gap: 8px; align-items: center; }

/* CRUD split: listado + formulario lado a lado (patrón de catálogos simples). */
.crud-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.crud-split > .panel { margin-bottom: 0; }
.crud-split .crud-form-title { margin: 0 0 12px; font-size: .9375rem; font-weight: 600; }
@media (max-width: 960px) { .crud-split { grid-template-columns: 1fr; } }

/* Tablas — alineadas al pack .dsmk-table pero compactas por default para admins densos.
   La clase .t y .dsmk-table comparten estilos para que ambas nomenclaturas rindan igual.
   border-collapse: separate es OBLIGATORIO para que position: sticky en thead th funcione.
   NO usar overflow: hidden acá — rompe el sticky del thead. */
table.t, table.dsmk-table {
  width: 100%; max-width: 100%;
  border-collapse: separate; border-spacing: 0; background: #fff;
  border: 1px solid var(--card-border); border-radius: var(--dsmk-r-md);
  table-layout: auto;
  font-family: var(--dsmk-font-body); font-size: .75rem; color: var(--dsmk-ink-800);
}
table.t th, table.t td,
table.dsmk-table th, table.dsmk-table td {
  padding: 6px 8px; text-align: left;
  border-bottom: 1px solid var(--dsmk-ink-100); vertical-align: top;
  overflow-wrap: break-word;
}
/* Headers siempre centrados verticalmente (una línea o dos, quedan alineados al medio). */
table.t thead th, table.dsmk-table thead th { vertical-align: middle; }
/* Variante --comfortable si algún caller quiere el padding original del pack. */
table.dsmk-table--comfortable th, table.dsmk-table--comfortable td { padding: 11px 14px; font-size: var(--dsmk-fs-sm); }

/* Ocultar columnas de baja prioridad cuando el viewport es angosto (evita scroll horizontal).
   El PHP marca la columna en el th Y en el td con la misma clase. */
@media (max-width: 1600px) {
  table.t .col-hide-lg, table.dsmk-table .col-hide-lg { display: none; }
}
@media (max-width: 1300px) {
  table.t .col-hide-md, table.dsmk-table .col-hide-md { display: none; }
}
@media (max-width: 1000px) {
  table.t .col-hide-sm, table.dsmk-table .col-hide-sm { display: none; }
}
/* Column-width utilities (biblia): .col-min .col-num .col-actions .col-fill */
table.t th.col-min, table.t td.col-min,
table.dsmk-table th.col-min, table.dsmk-table td.col-min { width: 1%; white-space: nowrap; }
table.t th.col-num, table.t td.col-num,
table.dsmk-table th.col-num, table.dsmk-table td.col-num {
  width: 1%; white-space: nowrap; text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--dsmk-font-mono); font-size: .7812rem;
}
table.t th.col-actions, table.t td.col-actions,
table.dsmk-table th.col-actions, table.dsmk-table td.col-actions {
  width: 1%; white-space: nowrap; text-align: right;
}
table.t th.col-fill, table.t td.col-fill,
table.dsmk-table th.col-fill, table.dsmk-table td.col-fill { width: auto; }
/* Variante que quiebra palabras largas por la mitad (más agresivo). */
table.t.dsmk-table--wrap th, table.t.dsmk-table--wrap td,
table.dsmk-table--wrap th, table.dsmk-table--wrap td { word-break: break-word; }
/* Una sola tipografía: encabezados de tabla como las etiquetas de campo (tipo oración, gris, sin monoespaciada). */
table.t thead th, table.dsmk-table thead th {
  background: var(--dsmk-ink-50);
  font-family: var(--dsmk-font-body);
  font-size: .75rem; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--dsmk-ink-500);
  border-bottom: 1px solid var(--dsmk-ink-200);
}
table.t tbody tr:last-child td, table.dsmk-table tbody tr:last-child td { border-bottom: 0; }
/* Esquinas: el fondo del thead (y el hover de la última fila) es cuadrado y tapaba la curva del borde
   redondeado de la tabla. Las celdas de las esquinas copian el radio (menos el grosor del borde). */
table.t thead tr:first-child th:first-child, table.dsmk-table thead tr:first-child th:first-child { border-top-left-radius: calc(var(--dsmk-r-md) - 1px); }
table.t thead tr:first-child th:last-child,  table.dsmk-table thead tr:first-child th:last-child  { border-top-right-radius: calc(var(--dsmk-r-md) - 1px); }
table.t tbody tr:last-child td:first-child,  table.dsmk-table tbody tr:last-child td:first-child  { border-bottom-left-radius: calc(var(--dsmk-r-md) - 1px); }
table.t tbody tr:last-child td:last-child,   table.dsmk-table tbody tr:last-child td:last-child   { border-bottom-right-radius: calc(var(--dsmk-r-md) - 1px); }
/* Primera/última columna con aire: los botones de acciones no pisan el borde del cuadro. */
table.t th:first-child, table.t td:first-child { padding-left: 12px; }
table.t th:last-child, table.t td:last-child { padding-right: 12px; }
table.t tbody tr:hover td, table.dsmk-table tbody tr:hover td { background: var(--dsmk-ink-50); }
table.t .num, table.dsmk-table .num, table.dsmk-table td.num, table.dsmk-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--dsmk-font-mono); font-size: .7812rem;
}
table.t .actions, table.dsmk-table .actions, table.dsmk-table td.actions {
  white-space: nowrap; text-align: right;
}
table.t .mono, table.dsmk-table .mono, table.dsmk-table td.mono {
  font-family: var(--dsmk-font-mono); font-size: .75rem; color: var(--dsmk-ink-700);
}
table.t .row-muted td, table.dsmk-table .row-muted td { color: var(--dsmk-ink-500); }
/* Variantes del pack */
.dsmk-table--striped tbody tr:nth-child(odd) td { background: var(--dsmk-ink-50); }
.dsmk-table--striped tbody tr:nth-child(odd):hover td { background: var(--dsmk-ink-100); }
.dsmk-table--compact th, .dsmk-table--compact td { padding: 7px 12px; font-size: .7812rem; }
.dsmk-table--flush { border: 0; border-radius: 0; }
.dsmk-table--flush thead th { border-top: 0; }
.dsmk-table-wrap { overflow-x: auto; border-radius: var(--dsmk-r-md); }
/* /eventos/ tabla: ajuste de ancho de columnas específicas */
table.t th.col-financiamiento, table.t td.col-financiamiento { width: 65px; }
table.t th.col-gasto, table.t td.col-gasto { min-width: 140px; white-space: nowrap; }

/* Matriz de accesos por rol (radios en columna, centrados). */
table.t.rol-accesos-t td.num { text-align: center; padding: 8px; }
table.t.rol-accesos-t td.num input[type="radio"] { width: 18px; height: 18px; cursor: pointer; margin: 0; }
table.t.rol-accesos-t th.num { text-align: center; }

/* Fila separadora de grupos dentro de una <table.t> (ej. agrupar eventos por mes). */
table.t tr.t-group-sep td {
  background: var(--bg); color: var(--text-soft);
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 8px 12px; border-top: 2px solid var(--border);
}
table.t tr.t-group-sep:hover td { background: var(--bg); }
table.t tr.t-group-sep .t-group-count { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 8px; }
/* Cabecera de tabla fija al hacer scroll de la página (queda debajo de la topbar). */
/* Sticky thead deshabilitado — con el patrón de agrupación por mes (una tabla por mes)
   el sticky pierde sentido: cada tabla tiene su propio thead visible arriba de sus filas.
   Se mantiene sticky sólo para las tablas embebidas en scroll propio (pickers). */
#gastos-relacionar thead th, #mdf-ev-table thead th, #opps-relacionar thead th {
  position: sticky; top: 0; z-index: 5;
  box-shadow: inset 0 -1px 0 var(--dsmk-ink-200);
}
/* Truncar la columna Campaña (4ª) del picker de OPP — strings largos rompen layout, pero el filtro busca en data-s. */
#opps-relacionar td:nth-child(4) { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { padding: 40px; text-align: center; color: var(--muted); }

/* Filtros */
.filters { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; align-items: end; }
.filters .form-row { margin: 0; }
/* Filtros fijos bajo la topbar al hacer scroll (el scroll vive en .app-main). */
.filters-sticky { position: sticky; top: var(--topbar-h); z-index: 9; background: var(--surface, #fff); padding: 12px 0; margin-top: -12px; border-bottom: 1px solid var(--dsmk-ink-200); }
/* Cabecera de página fija bajo la topbar (título + filtros / acciones). Fondo = fondo de página.
   margin-top negativo = padding superior de .app-content, para que pegue sin hueco. */
.page-sticky { position: sticky; top: var(--topbar-h); z-index: 9; background: #fff; padding: 16px 0 12px; margin-top: -24px; border-bottom: 1px solid var(--dsmk-ink-200); margin-bottom: 16px; }
.page-sticky .panel-head { margin-bottom: 12px; }
.page-sticky .filters { margin-bottom: 0; }
.filters .form-row.w-grow { flex: 1 1 260px; min-width: 200px; }
@media (max-width: 760px) { .page-sticky { position: static; margin-top: 0; } }   /* en celular ocuparía media pantalla */
.filters input, .filters select {
  padding: 7px 10px; min-width: 110px;
  border: 1px solid var(--dsmk-ink-300);
  border-radius: var(--dsmk-r-md);
  background: #fff;
  color: var(--dsmk-ink-800);
  font-family: var(--dsmk-font-body);
  transition: border-color var(--dsmk-t-fast), box-shadow var(--dsmk-t-fast);
}
.filters input:hover, .filters select:hover { border-color: var(--dsmk-ink-400); }
.filters input:focus, .filters select:focus {
  outline: none;
  border-color: var(--dsmk-brand-600);
  box-shadow: 0 0 0 3px var(--dsmk-brand-50);
}
/* Search-select trigger — mismo look que inputs (borde visible dsmk-ink-300 en vez del legacy ink-200) */
.ss-trigger {
  border-color: var(--dsmk-ink-300) !important;
  border-radius: var(--dsmk-r-md) !important;
}
.ss-trigger:hover { border-color: var(--dsmk-ink-400) !important; }
/* Modifier: filtros compactos (para Año, Mes, País, Estado que muestran strings cortos) */
.filters .form-row.w-sm { width: 108px; flex: 0 0 108px; }
.filters .form-row.w-xs { width: 78px; flex: 0 0 78px; }
.filters .form-row.w-date { width: 140px; flex: 0 0 140px; }   /* input date: dd/mm/aaaa + ícono */
/* Selector múltiple sin JS (<details> + casillas), p. ej. Formularios en /crm/.
   Clase .ms-drop (no .multi-select: esa ya existe para <select multiple> con min-height 130px). */
.filters .form-row.w-multi { flex: 0 0 300px; width: 300px; grid-template-columns: minmax(0, 1fr); }   /* la grilla no crece con el nombre del form */
.ms-drop summary { min-width: 0; }
.ms-drop { position: relative; width: 100%; }
.ms-drop summary { list-style: none; cursor: pointer; padding: 8px 34px 8px 12px; border: 1px solid var(--dsmk-ink-300); border-radius: var(--dsmk-r-md); background: #fff; font-size: var(--dsmk-fs-sm); color: var(--dsmk-ink-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.ms-drop summary::-webkit-details-marker { display: none; }
.ms-drop summary::after { content: "expand_more"; font-family: 'Material Symbols Rounded'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 1.125rem; color: var(--dsmk-ink-500); }
.ms-drop[open] summary { border-color: var(--dsmk-brand-600); }
.ms-drop:not([open]) .ms-drop-list { display: none; }
.ms-drop-list { position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; min-width: 100%; max-height: 320px; overflow: auto; background: #fff; border: 1px solid var(--card-border); border-radius: var(--dsmk-r-md); box-shadow: 0 10px 30px rgba(11,18,32,.12); padding: 6px; }
.ms-drop-list label { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: var(--dsmk-fs-sm); font-weight: 400; color: var(--dsmk-ink-800); white-space: nowrap; cursor: pointer; }
.ms-drop-list label:hover { background: var(--dsmk-ink-50); }
.filters .ms-drop-list input[type="checkbox"] { width: 16px; min-width: 0; height: 16px; padding: 0; margin: 0; flex: none; }
.filters .form-row.w-sm select,
.filters .form-row.w-sm input,
.filters .form-row.w-xs select,
.filters .form-row.w-xs input {
  width: 100% !important; min-width: 0 !important;
  padding: 6px 24px 6px 8px;
  background-position: right 6px center;
  font-size: .8125rem;
}
/* Selects de filtros (header): mismo criterio de ancho que el de "Financiamiento" (no 100%) */
.filters .ss-wrap { width: auto; min-width: 160px; display: inline-block; vertical-align: middle; }
.filters .ss-trigger { min-width: 160px; }
/* Compact override — cuando el form-row es w-sm/w-xs, el ss-wrap y ss-trigger deben respetar el ancho contenedor */
.filters .form-row.w-sm .ss-wrap,
.filters .form-row.w-xs .ss-wrap {
  width: 100%; min-width: 0; display: block;
}
.filters .form-row.w-sm .ss-trigger,
.filters .form-row.w-xs .ss-trigger {
  width: 100%; min-width: 0;
  padding: 6px 8px;
  font-size: .8125rem;
}
.filters .form-row.w-sm .ss-label,
.filters .form-row.w-xs .ss-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* Trigger compacto pero el dropdown se expande para leer opciones completas */
.filters .form-row.w-sm .ss-drop,
.filters .form-row.w-xs .ss-drop {
  right: auto; min-width: 220px; width: max-content; max-width: 340px;
}
.filtros-acciones { display: flex !important; flex-direction: row !important; gap: 6px; align-items: stretch; flex: 0 0 auto; min-width: 80px; }
/* Botones NO icon-only crecen a igual ancho; los icon-only se quedan en su tamaño mínimo. */
.filtros-acciones .btn { justify-content: center; white-space: nowrap; }
.filtros-acciones .btn:not(.btn-icon-only) { flex: 1; }
.filtros-acciones .btn.btn-icon-only {
  flex: 0 0 auto !important;
  min-width: 38px !important;
  width: 38px;
  height: 34px;
  padding: 0 !important;
  background: var(--dsmk-brand-600) !important;
  color: #fff !important;
  border: 1px solid var(--dsmk-brand-600) !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
}
.filtros-acciones .btn.btn-icon-only.btn-secondary {
  background: #fff !important;
  color: var(--dsmk-ink-700) !important;
  border-color: var(--dsmk-ink-300) !important;
}
.filtros-acciones .btn.btn-icon-only .material-symbols-rounded {
  font-size: 1.125rem; line-height: 1;
}

/* Filtros en dos rows: principal (búsqueda + fechas + botones) + secundaria (selects) */
.filters-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.filters-stack .filters { margin-bottom: 0; }
.filters-secondary {
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.filters-secondary .form-row label { font-size: .7188rem; color: var(--text-soft); }

/* Badges / chips */
.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: .75rem; font-weight: 500;
  background: #eef1f6; color: var(--text-soft); border: 1px solid var(--border); }
.badge-success { background: #e8f7ef; color: #1f6b46; border-color: #b8e1cb; }
.badge-danger  { background: #fdecea; color: #8a1d12; border-color: #f1c0bb; }
.badge-warn    { background: #fff5d6; color: #6b4d00; border-color: #f0d480; }
.badge-info    { background: #eef4ff; color: #1e40af; border-color: #c7d7fe; }   /* colores fijos: --primary-soft no resuelve en :root */
.badge-muted   { background: #eef1f6; color: var(--muted); }

/* Stat cards */
.stat-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 16px; }
/* Stat card con acento brand — barra superior + gradiente sutil + número en color brand. */
/* Tarjetas de dato (KPI): simples y compactas — fondo blanco, una sola tipografía, sin franja ni degradado. */
.stat {
  position: relative;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--dsmk-r-md);
  padding: 12px 14px;
}
.stat .label { color: var(--dsmk-ink-500); font-size: .75rem; font-weight: 400; }
.stat .value {
  font-size: 1.125rem; font-weight: 600; color: var(--dsmk-ink-900);
  margin-top: 2px; font-variant-numeric: tabular-nums; line-height: 1.25;
}
.stat .sub { color: var(--dsmk-ink-500); font-size: .75rem; margin-top: 2px; overflow-wrap: anywhere; }

/* Login */
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 28px;
  box-shadow: var(--shadow); width: 100%; max-width: 380px; }
.auth-card h1 { margin: 0 0 6px; font-size: 1.375rem; }
.auth-card .sub { color: var(--muted); margin-bottom: 18px; font-size: .8438rem; }
.auth-card .form { gap: 12px; }
.auth-card .btn { width: 100%; padding: 10px; }
.auth-card .credits { text-align: center; margin-top: 14px; font-size: .75rem; color: var(--muted); }

/* Footer / env */
.muted { color: var(--muted); }
.env-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; }
.env-local { background: var(--primary-soft); color: var(--primary); }
.env-prod  { background: #fdecea; color: #8a1d12; }

/* Paginación */
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.pager a, .pager span {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-soft);
  background: var(--surface); font-size: .8125rem;
}
.pager a:hover { background: var(--bg); text-decoration: none; }
.pager .current { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tabs a { padding: 8px 14px; color: var(--text-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 500; }

/* Link ir-al-evento en labels de forms */
.ev-link {
  display: inline-flex; align-items: center; margin-left: 6px;
  color: var(--muted); text-decoration: none; vertical-align: middle;
}
.ev-link:hover { color: var(--primary); }
.ev-link .material-symbols-rounded { font-size: 1rem; }

/* Utilidades */
.hidden { display: none !important; }
.row-flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.right { text-align: right; }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.gap { display: flex; gap: 8px; flex-wrap: wrap; }
.hide-sm { }
@media (max-width: 640px) { .hide-sm { display: none; } }
.nowrap { white-space: nowrap; }
small { color: var(--muted); }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .7812rem; }

/* OPP chips dentro del listado de eventos */
.opp-list { max-width: 200px; line-height: 1.6; }
.opp-chip {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .7188rem;
  padding: 2px 7px;
  margin: 1px 2px 1px 0;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid #bccff5;
  white-space: nowrap;
}
.opp-chip:hover { background: #d6e3fb; text-decoration: none; }
.opp-chip-more { background: var(--surface-2); color: var(--text-soft); border-color: var(--border); }

/* Botones icon-only */
.btn.btn-sm.btn-icon-only { padding: 6px; min-width: 32px; }

/* Motor de matching — workspace dual */
.motor-filters { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end;
                 padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border);
                 border-radius: var(--radius-sm); margin-bottom: 14px; }
.motor-actions { display: flex; gap: 6px; align-items: center; }
.motor-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 80px; }
.motor-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.motor-panel-head { display: flex; justify-content: space-between; align-items: center;
                    padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.motor-panel-head h2 { margin: 0; font-size: .9375rem; }
.motor-panel-head .check-all { font-size: .75rem; color: var(--text-soft); display: flex; gap: 6px; align-items: center; }
.motor-t { font-size: .8125rem; }
.motor-t td, .motor-t th { padding: 6px 8px; }
.motor-t .motor-matched { background: rgba(11,18,32,.04); color: var(--text-soft); }
.motor-t .motor-score { font-weight: 600; color: var(--text-soft); }
.motor-t .motor-score.motor-mid { color: #8a5a00; background: #fff6e0; }
.motor-t .motor-score.motor-hi  { color: #1f6b46; background: #e8f7ef; }

/* Modo "Sugerir combinaciones": tint por filas según cuántos criterios matchean con el otro panel. */
.motor-t tr.motor-tint-1 td { background: var(--dsmk-brand-50); }
.motor-t tr.motor-tint-2 td { background: var(--dsmk-brand-100); }
.motor-t tr.motor-tint-3 td { background: var(--dsmk-brand-100); box-shadow: inset 3px 0 0 var(--dsmk-brand-600); }
.motor-t tr.motor-tint-1:hover td,
.motor-t tr.motor-tint-2:hover td,
.motor-t tr.motor-tint-3:hover td { background: var(--dsmk-brand-100); }

/* Botón toggle "Sugerir combinaciones" activo */
#motor-suggest-btn.is-active {
  background: var(--dsmk-brand-600) !important;
  border-color: var(--dsmk-brand-600) !important;
  color: #fff !important;
}
#motor-suggest-btn.is-active .material-symbols-rounded { color: #fff; }
.motor-lig-badge { font-size: .6875rem; margin-right: 3px; }
.motor-lig-badge a { color: inherit; text-decoration: none; }
.motor-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
             background: #0e1729; color: #f4f6fb; padding: 12px 20px;
             display: flex; justify-content: space-between; align-items: center;
             box-shadow: 0 -6px 20px rgba(0,0,0,.15); }
.motor-bar-info { font-size: .875rem; }
.motor-bar-info .muted { color: #8a99b5; }
.motor-bar-actions .btn { min-width: 200px; }
.motor-bar-actions .btn[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 1100px) {
  .motor-dual { grid-template-columns: 1fr; }
  .motor-filters { grid-template-columns: 1fr; }
}

/* Rich text editor */
.rt-container { border: 1px solid var(--dsmk-ink-300); border-radius: var(--dsmk-r-md); background: #fff; overflow: hidden; transition: border-color var(--dsmk-t-fast); }
/* Botón "Agregar subtarea": tamaño natural, alineado a la izquierda (el .form-row es grid y lo estiraba). */
.btn-add-sub { justify-self: start; width: auto; padding: 4px 12px; font-size: .7812rem; font-weight: 500; }
.btn-add-sub .material-symbols-rounded { font-size: 1rem; }
/* Form de tarea: campos del lateral apilados con aire (el panel no es flex por defecto). */
.tarea-side > .panel { display: flex; flex-direction: column; gap: 14px; }
.rt-container:focus-within { border-color: var(--dsmk-brand-600); box-shadow: 0 0 0 3px var(--dsmk-brand-50); }
.rt-toolbar { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--dsmk-ink-200); background: var(--dsmk-ink-50); border-radius: var(--dsmk-r-md) var(--dsmk-r-md) 0 0; flex-wrap: wrap; align-items: center; }
.rt-btn { padding: 4px 10px; border: 1px solid var(--dsmk-ink-200); background: #fff; border-radius: 4px; cursor: pointer; font-size: .8125rem; min-width: 28px; color: var(--dsmk-ink-800); }
.rt-btn:hover { background: var(--dsmk-brand-50); border-color: var(--dsmk-brand-500); }
.rt-ic { font-size: 1.05em; line-height: 1; vertical-align: -0.15em; }   /* íconos Material en botones chicos (editor, motor) */
.rt-sep { display: inline-block; width: 1px; height: 20px; background: var(--dsmk-ink-200); margin: 0 4px; }
.rt-body { padding: 10px 12px; min-height: 70px; outline: none; font: inherit; line-height: 1.5; color: var(--dsmk-ink-800); background: #fff; }
.rt-body p { margin: 0 0 8px 0; }
.rt-body ul, .rt-body ol { margin: 8px 0; padding-left: 24px; }
.rt-body a { color: var(--dsmk-brand-600); }

/* Variante inline compacta — para uso dentro de celdas de tabla (min-height chico + toolbar compacta) */
.rt-editor-inline + .rt-container,
.rt-container.rt-inline { min-width: 260px; }
.rt-editor-inline ~ .rt-container .rt-body,
.rt-container.rt-inline .rt-body { min-height: 60px; padding: 4px 8px; font-size: .75rem; line-height: 1.35; }
/* Ajuste de márgenes de párrafos/listas dentro del editor inline para no inflar el alto vacío */
.rt-editor-inline ~ .rt-container .rt-body p:first-child,
.rt-container.rt-inline .rt-body p:first-child { margin-top: 0; }
.rt-editor-inline ~ .rt-container .rt-body p:last-child,
.rt-container.rt-inline .rt-body p:last-child { margin-bottom: 0; }
.rt-editor-inline ~ .rt-container .rt-toolbar,
.rt-container.rt-inline .rt-toolbar { padding: 3px 5px; }
.rt-editor-inline ~ .rt-container .rt-btn,
.rt-container.rt-inline .rt-btn { padding: 2px 6px; font-size: .6875rem; min-width: 22px; }
/* Subtareas: una línea del alto de los selects; la barra de formato aparece solo al escribir en la subtarea. */
.subtarea-row .rt-container .rt-toolbar { display: none; }
.subtarea-row .rt-container:focus-within .rt-toolbar { display: flex; }
.subtarea-row .rt-container .rt-body { min-height: 0; padding: 8px 10px; font-size: .8125rem; }

/* /mkt_play/ — esquema explícito de anchos por columna (suma 100%).
   Ajustable: Evento 30 · País 8 · Fecha 10 · Mkt Play 12 · Acciones 40 = 100 */
table.t.t-mkt-play { table-layout: fixed; }
table.t.t-mkt-play th.col-mkt-evento,   table.t.t-mkt-play td.col-mkt-evento   { width: 30%; }
table.t.t-mkt-play th.col-mkt-pais,     table.t.t-mkt-play td.col-mkt-pais     { width: 8%; }
table.t.t-mkt-play th.col-mkt-fecha,    table.t.t-mkt-play td.col-mkt-fecha    { width: 10%; }
table.t.t-mkt-play th.col-mkt-play,     table.t.t-mkt-play td.col-mkt-play     { width: 12%; }
table.t.t-mkt-play th.col-mkt-acciones, table.t.t-mkt-play td.col-mkt-acciones { width: 40%; }

/* URL de Recursos debajo del editor rich text en /mkt_play/ */
.mkt-recursos-url {
  font-size: .7188rem; line-height: 1.35;
  padding: 4px 8px;
  background: var(--dsmk-ink-50);
  border-radius: var(--dsmk-r-sm);
  border: 1px solid var(--dsmk-ink-200);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mkt-recursos-url a { color: var(--dsmk-brand-600); text-decoration: none; }
.mkt-recursos-url a:hover { text-decoration: underline; color: var(--dsmk-brand-700); }

/* Bloques colapsables por mes en /mkt_play/ (usa <details>/<summary>) */
/* overflow: visible (antes hidden) para que el dropdown de los selects (.ss-drop) no se recorte
   al abrirse fuera del bloque del mes. El redondeo se preserva redondeando el summary (abajo). */
.mkt-mes-block { border: 1px solid var(--card-border); border-radius: var(--dsmk-r-md); background: #fff; margin-bottom: 12px; overflow: visible; }
.mkt-mes-block[open] { box-shadow: var(--dsmk-sh-sm); }
.mkt-mes-summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; user-select: none; background: var(--dsmk-ink-50); border-bottom: 1px solid transparent; transition: background var(--dsmk-t-fast); }
.mkt-mes-summary::-webkit-details-marker { display: none; }
.mkt-mes-summary:hover { background: var(--dsmk-brand-50); }
.mkt-mes-block[open] .mkt-mes-summary { border-bottom-color: var(--dsmk-ink-200); background: #fff; }
/* Redondeo del summary (reemplaza el clip que daba overflow:hidden del bloque). */
.mkt-mes-summary { border-radius: calc(var(--dsmk-r-md) - 1px); }
.mkt-mes-block[open] .mkt-mes-summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.mkt-mes-summary h2 { font-size: .9375rem; font-weight: 700; color: var(--dsmk-ink-900); flex: 1; }
.mkt-mes-summary .muted { font-size: .75rem; color: var(--dsmk-ink-500); }   /* misma tipografía del sistema */
.mkt-mes-chevron { color: var(--dsmk-ink-500); transition: transform var(--dsmk-t-base); }
.mkt-mes-block[open] .mkt-mes-chevron { transform: rotate(180deg); color: var(--dsmk-brand-600); }
.mkt-mes-block table.t { border: 0; border-radius: 0 0 var(--dsmk-r-md) var(--dsmk-r-md); background: transparent; }   /* curva inferior del bloque visible */
.mkt-mes-block table.t thead tr:first-child th { border-radius: 0; }   /* arriba la tabla va pegada al título del mes */

/* Status auto-save del rich text editor */
.rt-status { margin-left: auto; font-family: var(--dsmk-font-mono); font-size: .6562rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; padding: 2px 8px; border-radius: var(--dsmk-r-pill); transition: all var(--dsmk-t-base); }
.rt-status-saving { background: var(--dsmk-amber-50); color: #8a5a00; }
.rt-status-ok     { background: var(--dsmk-success-50); color: var(--dsmk-success-600); }
.rt-status-err    { background: var(--dsmk-error-50); color: var(--dsmk-error-600); }

/* Mkt Play — swatch + badge + dot indicador de estado en la fila */
.mkt-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; border: 1px solid rgba(0,0,0,.1); margin-right: 4px; }
.mkt-badge { display: inline-block; padding: 3px 8px; border-radius: 12px; font-size: .75rem; font-weight: 500; border: 1px solid rgba(0,0,0,.06); color: #1a2033; }
.mkt-color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); vertical-align: -1px; margin-right: 6px; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
/* En mkt_play la fila lleva su propio color de fondo (por estado).
   - Bloquear el hover para que el color se mantenga visible al pasar el mouse.
   - Hacer transparentes los td y el .rt-container inline (que tienen fondo blanco propio)
     para que el color de la fila se vea también debajo del editor de Acciones Marketing. */
table.t.t-mkt-play tbody tr td { background: transparent !important; }
table.t.t-mkt-play tbody tr:hover td { background: transparent !important; }
table.t.t-mkt-play .rt-editor-inline ~ .rt-container,
table.t.t-mkt-play .rt-container.rt-inline { background: transparent !important; }

/* Mkt Play — vista Calendario mensual (1 / 2 / 3 meses) */
.cal-nav { display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap; }
.cal-nav .cal-title { margin: 0 2px; font-size: 1rem; font-weight: 600; min-width: 120px; text-align: center; color: var(--dsmk-ink-900); }
/* Cabecera del calendario: una línea con título + navegación; otra con filtros y total. */
.cal-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cal-bar h1 { margin: 0; }
.cal-bar-end { margin-left: auto; }
.cal-bar .cal-filtros { display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: nowrap; flex: 0 0 auto; width: auto; }
.cal-bar .cal-filtros .form-row { flex: 0 0 130px; margin: 0; }
.cal-bar .cal-filtros .filtros-acciones { flex: 0 0 auto; min-width: 0; }
.cal-view-toggle { display: inline-flex; border: 1px solid var(--dsmk-ink-200); border-radius: var(--dsmk-r-md); overflow: hidden; margin-left: 8px; }
.cal-view-btn { padding: 6px 10px; font-size: .75rem; font-weight: 600; color: var(--dsmk-ink-600); background: #fff; text-decoration: none; border-right: 1px solid var(--dsmk-ink-200); transition: background var(--dsmk-t-fast), color var(--dsmk-t-fast); }
.cal-view-btn:last-child { border-right: 0; }
.cal-view-btn:hover { background: var(--dsmk-ink-50); color: var(--dsmk-ink-900); text-decoration: none; }
.cal-view-btn.is-active { background: var(--dsmk-brand-600); color: #fff; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; font-size: .75rem; }   /* leyenda simple, sin caja */
.cal-legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--dsmk-ink-700); }
.cal-legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.12); }

/* Grid multi-mes: 1 / 2 / 3 meses lado a lado */
.cal-months { display: grid; gap: 20px; }
.cal-months--1 { grid-template-columns: 1fr; }
.cal-months--2 { grid-template-columns: repeat(2, 1fr); }
.cal-months--3 { grid-template-columns: repeat(3, 1fr); }
.cal-month { display: flex; flex-direction: column; gap: 8px; }
.cal-month-head { font-size: .875rem; font-weight: 600; color: var(--dsmk-ink-900); text-align: center; padding: 6px 0; border-bottom: 1px solid var(--dsmk-ink-200); }

/* Grilla: header + N filas (una por semana). N columnas = --cal-cols (default 7).
   Las columnas (día de semana) sin eventos en el mes se filtran en PHP, achicando el grid. */
.cal-month { --cal-cols: 7; }
.cal-weekdays { display: grid; grid-template-columns: repeat(var(--cal-cols), 1fr); gap: 4px; margin-bottom: 4px; }
.cal-week { display: grid; grid-template-columns: repeat(var(--cal-cols), 1fr); gap: 4px; margin-bottom: 4px; }
/* Semana entera sin eventos → colapsa a una fila mínima (mantiene el contexto de que existe) */
.cal-week.cal-week--empty .cal-cell { min-height: 14px; padding: 1px 4px; border-color: transparent; background: transparent !important; }
.cal-week.cal-week--empty .cal-cell .cal-day-num { font-size: .5938rem; color: var(--dsmk-ink-300); font-weight: 400; text-align: center; padding: 0; }
.cal-week.cal-week--empty { margin-bottom: 2px; }
.cal-head { padding: 6px 8px; text-align: center; font-weight: 600; color: var(--dsmk-ink-600); text-transform: uppercase; font-size: .6875rem; letter-spacing: .04em; background: var(--dsmk-ink-50); border-radius: 4px; }
.cal-head.cal-weekend-head { color: var(--dsmk-brand-600); }
.cal-cell { min-height: 110px; padding: 6px; border: 1px solid var(--card-border); border-radius: 6px; background: #fff; display: flex; flex-direction: column; gap: 3px; overflow: hidden; position: relative; }
.cal-cell.cal-empty { background: transparent !important; border-color: transparent; min-height: 14px; }
.cal-cell.cal-outside { background: #fafbfc; }
.cal-cell.cal-outside .cal-day-num { color: var(--dsmk-ink-300); }
.cal-cell.cal-weekend:not(.cal-has-events) { background: #fafbfc; }
.cal-cell.cal-today { border-color: var(--dsmk-brand-500); border-width: 2px; padding: 5px; box-shadow: 0 0 0 2px rgba(23, 92, 211, .08); }
.cal-day-num { font-size: .75rem; font-weight: 600; color: var(--dsmk-ink-600); margin-bottom: 2px; text-align: right; padding: 0 2px; }
.cal-today .cal-day-num { color: var(--dsmk-brand-700); font-size: .8125rem; }

/* Chips de evento dentro de la celda (solo vista 1 mes) */
.cal-ev { display: block; padding: 3px 6px; border-radius: 3px; font-size: .6875rem; line-height: 1.25; color: #1a2033; text-decoration: none; border: 1px solid rgba(0,0,0,.15); background-color: rgba(255,255,255,.55); background-blend-mode: overlay; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform var(--dsmk-t-fast), box-shadow var(--dsmk-t-fast); }
.cal-ev:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.15); text-decoration: none; }
/* Tarea de marketing: mismo chip pero borde dashed para distinguir a golpe de vista */
.cal-ev.cal-ev--tarea { border-style: dashed; border-color: rgba(0,0,0,.3); }
.cal-legend-dot.cal-legend-dot--tarea { border-style: dashed; }
/* Detalles de Oportunidad — 3 columnas responsive (auto ajuste a viewport). */
.opp-fields-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; }
.opp-field { min-width: 0; padding: 8px 0; border-bottom: 1px solid var(--dsmk-ink-100); }
.opp-field-lbl { font-size: .6875rem; font-weight: 600; color: var(--dsmk-ink-500); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.opp-field-val { font-size: .875rem; color: var(--dsmk-ink-900); word-wrap: break-word; overflow-wrap: break-word; line-height: 1.4; }
.opp-field-val a { color: var(--dsmk-brand-600); text-decoration: none; }
.opp-field-val a:hover { text-decoration: underline; }
@media (max-width: 900px) { .opp-fields-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .opp-fields-grid { grid-template-columns: 1fr; } }

/* CRM · ver.php — Datos del formulario compactos (label arriba + input abajo, 2 col responsive) */
.lead-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.lead-field, .fld { min-width: 0; }
.lead-field--full, .fld--full { grid-column: 1 / -1; }
/* Etiqueta discreta (tipo oración, gris) para que resalte el dato y no el nombre del campo. */
.lead-field-lbl, .fld-lbl { display: block; font-size: .75rem; font-weight: 400; color: var(--dsmk-ink-500); margin-bottom: 4px; line-height: 1.3; }
.lead-field-text { white-space: pre-wrap; word-break: break-word; line-height: 1.4; }
.lead-field-val { font-size: .8438rem; color: var(--dsmk-ink-900); word-break: break-word; }
@media (max-width: 640px) { .lead-fields { grid-template-columns: 1fr; } }

/* Ficha del lead (crm/ver.php): encabezado + 3 columnas (datos · gestión/atribución/historial · journey) */
.lead-head { margin-bottom: 16px; }   /* sin recuadro: identidad + Volver / Guardar */
.lead-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lead-head-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.lead-head-sep { color: var(--dsmk-ink-300); font-weight: 400; }
.lead-head-dato { font-size: var(--dsmk-fs-md); font-weight: 400; color: var(--dsmk-ink-600); }
.lead-3col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.lead-3col > div { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.lead-3col > div > .panel { margin-bottom: 0; }
/* Datos del lead: campos cortos de a dos; email y textos largos a lo ancho (.lead-field--full). dense rellena huecos. */
.lead-3col .lead-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
.lead-3col .lead-field { display: flex; flex-direction: column; justify-content: flex-end; }   /* inputs alineados abajo aunque una etiqueta ocupe 2 líneas */
/* Campos con fondo claro y sin borde marcado; al editar pasan a blanco con borde de marca. */
.lead-field-input, .fld-in { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: .8438rem; color: var(--dsmk-ink-900); background: #f3f6fa; transition: background var(--dsmk-t-fast), border-color var(--dsmk-t-fast); }
.lead-field-input:hover, .fld-in:hover { background: #edf1f7; }
.lead-field-input:focus, .fld-in:focus { outline: none; background: #fff; border-color: var(--dsmk-brand-600); box-shadow: 0 0 0 3px var(--dsmk-brand-50); }
textarea.lead-field-input, textarea.fld-in { resize: vertical; line-height: 1.45; }
/* Dato de solo lectura con el mismo aspecto que .lead-field-input (Atribución). */
.lead-field-box { padding: 9px 11px; border-radius: 8px; background: #f3f6fa; font-size: .8438rem; color: var(--dsmk-ink-900); min-height: 38px; box-sizing: border-box; word-break: break-word; }
.lead-field-box--mono { font-family: var(--dsmk-font-mono); font-size: .7812rem; word-break: break-all; }
.lead-attr-k { width: 42%; }
.lead-attr-mono { font-size: .75rem; word-break: break-all; }
.lead-mini { font-size: .6875rem; }
/* Bandeja: columna Origen (campaña arriba + de dónde vino debajo, máx. 2 líneas). */
.lead-origen { max-width: 360px; }
.lead-origen-camp { font-weight: 600; color: var(--dsmk-ink-900); }
.lead-origen-src { font-size: .75rem; color: var(--dsmk-ink-600); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.lead-journey, .lead-historial { margin: 0; padding-left: 18px; }
.lead-journey li { margin-bottom: 8px; word-break: break-word; }
.lead-journey li::marker { color: var(--dsmk-ink-400); font-size: .75rem; }
.lead-journey-pag { display: block; color: var(--dsmk-ink-900); font-size: .8125rem; }
.lead-journey-t { display: block; color: var(--dsmk-ink-500); font-size: .7188rem; margin-top: 1px; }
.lead-historial li { margin-bottom: 6px; }
@media (max-width: 1200px) { .lead-3col { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lead-3col > div:last-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .lead-3col { grid-template-columns: 1fr; } .lead-head-top { flex-direction: column; } }

/* Dot para el listado de tareas */
.tarea-color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); vertical-align: -1px; margin-right: 6px; }
.tarea-color-dot--after { margin-right: 0; margin-left: 6px; }
/* Anchos fijos por columna en /tareas/. Reduce Tarea (~10% menos que col-fill puro)
   y garantiza que Estado se vea completo sin cortarse. */
table.t.t-tareas { table-layout: fixed; }
table.t.t-tareas th, table.t.t-tareas td { overflow: hidden; text-overflow: ellipsis; }
table.t.t-tareas th.col-tar-fecha,    table.t.t-tareas td.col-tar-fecha    { width: 116px; white-space: nowrap; }
table.t.t-tareas th.col-tar-tarea,    table.t.t-tareas td.col-tar-tarea    { width: 36%; }
table.t.t-tareas th.col-tar-estado,   table.t.t-tareas td.col-tar-estado   { width: 118px; white-space: nowrap; }
table.t.t-tareas th.col-tar-subs,     table.t.t-tareas td.col-tar-subs     { width: 140px; }
table.t.t-tareas th.col-tar-desc,     table.t.t-tareas td.col-tar-desc     { width: auto; }
table.t.t-tareas th.col-tar-resp,     table.t.t-tareas td.col-tar-resp     { width: 18%; }
table.t.t-tareas th.col-tar-evento,   table.t.t-tareas td.col-tar-evento   { width: auto; }
table.t.t-tareas th.col-tar-acciones, table.t.t-tareas td.col-tar-acciones { width: 100px; white-space: nowrap; }
table.t.t-tareas td.col-tar-tarea { word-break: break-word; overflow: visible; white-space: normal; }
.tarea-titulo { text-transform: uppercase; letter-spacing: .01em; }
.tarea-evento { display: flex; align-items: flex-start; gap: 4px; margin-top: 3px; font-size: .7812rem; font-weight: 600; color: var(--dsmk-error-600, #dc2626); }
.tarea-evento:hover { color: #b91c1c; }
.tarea-evento .material-symbols-rounded { font-size: .9375rem; flex: none; margin-top: 1px; }
.tarea-subs, .tarea-subs.sub-breakdown { display: flex; margin-top: 4px; font-size: .75rem; }
.tarea-subs-n { font-weight: 600; color: var(--dsmk-ink-600); margin-right: 2px; }
.tarea-desc { font-size: .7812rem; line-height: 1.45; color: var(--dsmk-ink-600); }
.tarea-estado { margin-top: 6px; font-family: var(--dsmk-font-body); }
/* Progreso de subtareas en el listado */
.tarea-sub-progress { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px; background: var(--dsmk-ink-50); color: var(--dsmk-ink-700); font-size: .6875rem; font-family: var(--dsmk-font-mono); font-weight: 600; }
/* Subtareas — form (Tarea | Responsable | Estado | quitar) */
.subtareas-wrap { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
/* Subtarea en una línea: Tarea | Responsable | Estado | quitar (los selects son celdas de la grilla vía display:contents). */
.subtarea-head, .subtarea-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 170px 140px 36px; gap: 8px; align-items: center; }
.subtarea-head { font-size: .75rem; font-weight: 400; color: var(--dsmk-ink-500); padding: 0 4px; margin-bottom: 2px; }
.subtarea-row input[type="text"], .subtarea-row input[type="date"] { padding: 7px 10px; border: 1px solid var(--dsmk-ink-200); border-radius: var(--dsmk-r-md); font: inherit; width: 100%; min-width: 0; box-sizing: border-box; }
.subtarea-row input[type="text"]:focus, .subtarea-row input[type="date"]:focus { outline: none; border-color: var(--dsmk-brand-600); box-shadow: 0 0 0 3px var(--dsmk-brand-50); }
.subtarea-row select { padding: 7px 10px; border: 1px solid var(--dsmk-ink-200); border-radius: var(--dsmk-r-md); font: inherit; background: #fff; }
/* La subtarea es un editor rich (toolbar + cuerpo, más alto que los selects): alinear la fila arriba. */
.subtarea-row { align-items: center; }
.subtarea-meta { display: contents; }
.subtarea-row select { margin-top: 0; width: 100%; min-width: 0; }
/* HTML de la subtarea renderizado en listados: compacto, sin márgenes de <p>. */
.rt-content p { margin: 0 0 4px 0; }
.rt-content p:last-child { margin-bottom: 0; }
.rt-content ul, .rt-content ol { margin: 4px 0; padding-left: 20px; }
.rt-content a { color: var(--dsmk-brand-600); }
/* Colores por estado de la subtarea (pintan el select entero como los de Mkt Play) */
.sub-estado { -webkit-appearance: none; appearance: none; color-scheme: light; padding-right: 26px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23334' d='M0 0l5 6 5-6z'/></svg>"); background-repeat: no-repeat; background-position: right 8px center; }
.sub-estado--sin_iniciar { background-color: #e5e7eb; }
.sub-estado--en_proceso  { background-color: #bfdbfe; }
.sub-estado--realizado   { background-color: #a7f3d0; }
.sub-estado--no_procesado { background-color: #d1d5db; color: #374151; }
.sub-estado--urgente     { background-color: #fecaca; color: #991b1b; }
/* /tareas/: bloque de urgentes debajo de los filtros, con borde rojo. */
.tareas-urgentes { border: 2px solid #dc2626; border-radius: 14px; background: #fff5f5; padding: 12px 16px; margin: 4px 0 16px; }
.tareas-urgentes-head { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #b91c1c; font-size: .875rem; margin-bottom: 6px; }
.tareas-urgentes-head .material-symbols-rounded { font-size: 1.25rem; }
.tareas-urgentes-n { background: #dc2626; color: #fff; border-radius: 999px; padding: 0 8px; font-size: .75rem; line-height: 1.6; }
.tarea-urgente { display: flex; align-items: center; gap: 12px; padding: 5px 0; border-top: 1px solid #fecaca; font-size: .8125rem; }
.tarea-urgente:first-of-type { border-top: 0; }
.tarea-urgente-fecha { color: #991b1b; font-weight: 600; flex-shrink: 0; }
.tarea-urgente-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Contador regresivo (días restantes) — listado /tareas/, dashboard y correo. */
.cd-badge { display: inline-block; flex-shrink: 0; font-weight: 700; font-size: .75rem; padding: 2px 9px; border-radius: 999px; white-space: nowrap; line-height: 1.5; }
.cd-vencida { background: #7f1d1d; color: #fff; }
.cd-critico { background: #dc2626; color: #fff; }
.cd-alto    { background: #f59e0b; color: #1a2033; }
.cd-medio   { background: #e0e7ff; color: #3730a3; }
.cd-neutro  { background: #e5e7eb; color: #374151; }
/* Widget de pendientes en el dashboard (solo admins, antes de Bienvenido). */
.dash-pendientes { border: 2px solid #dc2626; border-radius: 14px; background: #fff5f5; padding: 14px 18px; margin: 0 0 18px; }
.dash-pendientes-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #b91c1c; margin-bottom: 8px; }
.dash-pendientes-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid #fecaca; font-size: .875rem; }
.dash-pendientes-row:first-of-type { border-top: 0; }
.dash-pendientes-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Badge de estado (tarea/subtarea) reutilizable en listados */
.sub-estado-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .6875rem; font-weight: 600; border: 1px solid rgba(0,0,0,.08); color: #1a2033; }
/* Breakdown de subtareas por estado (chips chiquitos) */
.sub-breakdown { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sub-chip { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: .6875rem; font-weight: 600; font-family: var(--dsmk-font-mono); border: 1px solid rgba(0,0,0,.08); color: #1a2033; }
@media (max-width: 720px) {
  .subtarea-head, .subtarea-row { grid-template-columns: 1fr; }
  .subtarea-head { display: none; }
}

/* Modo compacto (multi-mes): días sin actividad casi invisibles, con actividad muestran nombre */
.cal-month--compact .cal-cell { min-height: 64px; padding: 3px; gap: 2px; }
.cal-month--compact .cal-cell.cal-empty { min-height: 30px; }
.cal-month--compact .cal-day-num { font-size: .6875rem; padding: 0 1px; }
.cal-month--compact .cal-head { padding: 4px 2px; font-size: .625rem; }
/* Celdas vacías (sin eventos) en compacto: casi invisibles */
.cal-month--compact .cal-cell.cal-dim { background: transparent !important; border-color: transparent; }
.cal-month--compact .cal-cell.cal-dim .cal-day-num { color: var(--dsmk-ink-300); font-weight: 400; }
/* Chip de evento en modo compacto: nombre truncado, más chico */
.cal-ev--mini { font-size: .625rem; padding: 1px 4px; line-height: 1.15; border-radius: 2px; }
.cal-count-mini { align-self: flex-end; font-family: var(--dsmk-font-mono); font-size: .625rem; font-weight: 700; color: var(--dsmk-ink-700); background: rgba(255,255,255,.75); border-radius: 8px; padding: 0 6px; }

@media (max-width: 1100px) {
  .cal-months--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .cal-months--2, .cal-months--3 { grid-template-columns: 1fr; }
  .cal-cell { min-height: 80px; }
  .cal-ev { font-size: .625rem; padding: 2px 4px; }
  .cal-nav .cal-title { min-width: 140px; font-size: 1rem; }
}
/* -webkit-appearance:none es CRÍTICO — sin él Chrome/Windows usa el renderer nativo del select,
   que sobrescribe el background-color inline al terminar de cargar. */
.mkt-inline-form select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  color-scheme: light;
  font-size: .75rem; padding: 4px 22px 4px 8px;
  min-width: 0; max-width: 150px;
  border: 1px solid var(--dsmk-ink-300);
  border-radius: var(--dsmk-r-sm);
  color: var(--dsmk-ink-900); font-weight: 500;
  cursor: pointer;
  /* Chevron dibujado con SVG para no depender del ícono nativo (que se pierde con appearance:none) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center;
}
.col-mkt-play { max-width: 160px; }

/* Display de acciones_marketing (read-only) */
.rt-display { padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); line-height: 1.5; }
.rt-display p { margin: 0 0 8px 0; }
.rt-display p:last-child { margin-bottom: 0; }
.rt-display ul, .rt-display ol { margin: 8px 0; padding-left: 24px; }

/* Inline edit de use_case en tabla eventos */
.uc-inline-form select {
  font-size: .75rem; padding: 4px 22px 4px 6px;
  min-width: 0; max-width: 140px;
  background-position: right 4px center;
}
.col-use-case { max-width: 150px; }

/* Zona peligrosa al pie del detalle */
.danger-zone { border-color: #f1c0bb; background: #fdf5f4; }
.danger-zone h2 { color: #8a1d12; }
.danger-zone .btn-danger .material-symbols-rounded { font-size: 1.125rem; }

/* Evento seleccionado en form de gastos */
.evento-selected { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; flex-wrap: wrap; }
.evento-selected .btn-link { margin-left: auto; font-size: .7812rem; }

/* Celda del evento en el listado (nombre + meta debajo) */
.evento-cell { min-width: 160px; max-width: 320px; }
.evento-cell a { display: inline-block; line-height: 1.3; }
.evento-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; align-items: center; }
.evento-meta-date { color: var(--text-soft); font-size: .75rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.evento-meta-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .7188rem; padding: 1px 7px; border-radius: 10px;
  background: var(--surface-2); color: var(--text-soft);
  border: 1px solid var(--border);
}
.evento-meta-chip .material-symbols-rounded { font-size: .8125rem; }
.evento-meta-country { background: var(--primary-soft); color: var(--primary); border-color: #bccff5; }

/* ─── MDF · panel mensual con estilo refresh ─── */
.mdf-title-icon {
  font-size: 1.75rem; color: var(--brand-600); vertical-align: -6px; margin-right: 6px;
}

.mdf-mes-card {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--tr), box-shadow var(--tr);
}
.mdf-mes-card:hover { border-color: var(--ink-400); box-shadow: var(--shadow-md); }

.mdf-mes-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--ink-100);
}
.mdf-mes-title { display: flex; align-items: flex-start; gap: 12px; }
.mdf-mes-icon {
  font-size: 2.25rem; color: var(--brand-600); flex-shrink: 0;
  background: var(--brand-50); border-radius: var(--radius-md);
  width: 56px; height: 56px; display: grid; place-items: center;
}
.mdf-mes-title h2 {
  margin: 0; font-size: 1.375rem; font-weight: 700; color: var(--ink-900);
  letter-spacing: -0.01em;
}
.mdf-mes-meta {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px;
  color: var(--ink-500); font-size: .8125rem;
}
.mdf-mes-meta span { display: inline-flex; align-items: center; gap: 4px; }
.mdf-mes-meta .material-symbols-rounded { font-size: 1rem; color: var(--ink-400); }

.mdf-mes-total { text-align: right; flex-shrink: 0; }
.mdf-mes-total-label {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-500); margin-bottom: 2px;
}
.mdf-mes-total-value {
  font-size: 1.375rem; font-weight: 700; color: var(--ink-900);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.mdf-mes-total-sub { margin-top: 6px; }

.mdf-mes-tabla { font-size: .8125rem; box-shadow: none; border: 1px solid var(--ink-100); }
.mdf-mes-tabla th { background: var(--ink-50); }

/* Descripción del evento debajo del título en tablas */
.evento-desc {
  font-size: .75rem; color: var(--ink-500); margin-top: 3px; line-height: 1.4;
  max-width: 380px;
}

/* Badges estilo refresh (ecm-badge) usados en /mdf/ */
.ecm-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; font-size: .6875rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.ecm-badge--dark  { background: var(--ink-900); color: #fff; }
.ecm-badge--brand { background: var(--brand-50); color: var(--brand-700); }
.ecm-badge--mint  { background: var(--mint-50); color: var(--mint-700); }
.ecm-badge--amber { background: var(--amber-50); color: #92400e; }
.ecm-badge .material-symbols-rounded { font-variation-settings: 'FILL' 1; }

.ecm-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; background: var(--ink-50); border: 1px solid var(--ink-100);
  border-radius: var(--radius-full); font-size: .75rem; color: var(--ink-600); font-weight: 500;
}

/* Ícono de tarjeta (solo /mdf/): oculto — las tarjetas son simples e iguales en todo el sistema. */
.stat .stat-icon { display: none; }

/* Preview del branding en /configuracion/branding.php */
.brand-preview {
  display: flex; align-items: center; gap: 10px;
  padding: 16px;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}

/* Monto compacto en tablas: nowrap + tipografía reducida para que entre en una línea */
.monto-tight { font-size: .75rem; letter-spacing: -0.01em; }

/* ─── Barra de acciones masivas (bulk update) ─── */
.bulk-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  position: sticky; top: 0; z-index: 9;
  box-shadow: var(--shadow-sm);
}
/* `display: flex` pisa al atributo HTML `hidden`. Forzar la ocultación. */
.bulk-bar[hidden] { display: none !important; }
.bulk-bar-info {
  display: flex; align-items: center; gap: 8px;
  color: var(--brand-700); font-size: .8438rem;
}
.bulk-bar-info .material-symbols-rounded { font-size: 1.125rem; color: var(--brand-600); }
.bulk-bar-info strong { font-weight: 700; font-size: .9375rem; }
.bulk-bar-info .btn-link { font-size: .7812rem; margin-left: 4px; }
.bulk-bar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bulk-bar-actions label { font-size: .8125rem; color: var(--ink-700); font-weight: 600; }
.bulk-bar-actions select { padding: 6px 10px; font-size: .8125rem; min-width: 200px; }
/* El select buscable (.ss-wrap es width:100%) debe quedar inline en la barra, no romper la fila */
.bulk-bar-actions .ss-wrap { width: auto; min-width: 220px; display: inline-block; vertical-align: middle; }
.bulk-bar-actions .ss-trigger { min-width: 220px; }
.bulk-sep { display: inline-block; width: 1px; align-self: stretch; min-height: 28px; background: var(--border); margin: 0 6px; }
/* Buscador del panel "Relacionar gastos" (input suelto, fuera de .form-row) */
#gasto-search, #opp-search { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font: inherit; color: var(--text); }
.bulk-col { width: 36px; text-align: center; }
.bulk-col input[type="checkbox"] { cursor: pointer; }
.bulk-table tbody tr:has(.bulk-chk:checked) { background: var(--brand-50); }

/* Highlight breve cuando se llega a una fila por #fragment (ej. después de cambiar MDF) */
@keyframes row-flash {
  0%   { background-color: var(--brand-50); }
  100% { background-color: transparent; }
}
table.t tr:target td { animation: row-flash 1.6s ease-out 1; }
table.t tr:target { scroll-margin-top: 70px; }

/* MDF inline en listado de eventos */
.mdf-inline-form { margin: 0; }
.mdf-select {
  padding: 4px 6px; font-size: .7812rem;
  border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-soft);
  min-width: 180px; max-width: 240px;
}
/* La celda de financiamiento usa el select buscable: darle ancho cómodo */
.mdf-inline .ss-wrap { min-width: 190px; }
.mdf-select.mdf-state-pendiente { background: #fff5d6; color: #6b4d00; border-color: #f0d480; font-weight: 600; }
.mdf-select.mdf-state-propio    { background: var(--surface-2); color: var(--text-soft); border-color: var(--border); font-weight: 600; }
.mdf-select.mdf-state-si        { background: var(--primary-soft); color: var(--primary); border-color: #bccff5; font-weight: 600; }

/* Equipo Relacionado (responsables) en listado de eventos */
.responsables-cell { max-width: 190px; }
.resp-chip {
  display: inline-block;
  font-size: .7188rem;
  padding: 1px 8px;
  margin: 1px 2px 1px 0;
  border-radius: 10px;
  background: #e6f5ef;
  color: #1f6b46;
  border: 1px solid #b8e1cb;
  white-space: nowrap;
}
.resp-chip-more { background: var(--surface-2); color: var(--text-soft); border-color: var(--border); }
.resp-chip-suelto { background: var(--surface-2); color: var(--text-soft); border-color: var(--border); display: inline-flex; align-items: center; gap: 3px; }
.resp-chip-suelto .material-symbols-rounded { font-size: .8125rem; }
.resp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

/* Caja de nombres en gastos (legacy, sigue usándose en otras vistas) */
.nombres-gasto-box {
  margin-top: 12px; padding: 12px;
  background: var(--surface-2); border: 1px dashed var(--border); border-radius: 6px;
}
.nombres-gasto-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--text-soft); font-size: .8125rem; }
.nombres-gasto-head .material-symbols-rounded { font-size: 1.125rem; }
.nombres-gasto-box small { color: var(--muted); font-size: .7188rem; }

.nombres-gasto-list {
  display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start;
  padding: 10px; min-height: 90px; max-height: 200px; overflow-y: auto;
  background: var(--surface-2); border: 1px dashed var(--border); border-radius: 6px;
}

.placeholder-empty {
  display: flex; align-items: center; gap: 8px;
  padding: 16px; background: var(--surface-2); border: 1px dashed var(--border);
  border-radius: 6px; color: var(--muted); min-height: 90px;
}
.placeholder-empty .material-symbols-rounded { font-size: 1.25rem; }

/* Lista plana de personas del Equipo Relacionado */
.personas-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.personas-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 12px; border-bottom: 1px solid var(--border); font-size: .8125rem;
}
.personas-list li:last-child { border-bottom: none; }
.personas-list li:nth-child(odd) { background: var(--bg); }
.personas-list-name { color: var(--text); font-weight: 500; flex: 1; min-width: 0; }
.personas-list-meta { color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.personas-list-actions { display: inline-flex; gap: 4px; align-items: center; }

/* ─── Form compacto ─── */
.form-toolbar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 10px; margin-bottom: 12px;
}
.form-toolbar > div:first-child { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-toolbar .form-title { margin: 0; font-size: 1.125rem; }

/* Header editable del form de evento */
.panel-head-form { align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.panel-head-form .phf-main { flex: 1; min-width: 0; }
/* Botones inline en la fila descripción + fechas */
.phf-actions-inline {
  display: flex !important; flex-direction: row;
  gap: 8px; align-items: flex-end; justify-content: flex-end;
}
.phf-line { align-items: stretch; }
.phf-line .form-row.col-2 input[type="date"] {
  padding: 8px 11px; height: 80px; font-size: .875rem; line-height: 1.4;
}
.phf-line .form-row.col-2 label { font-size: .75rem; }
/* Gasto: concepto y fechas (gasto/pago) a la misma altura */
#gasto-form .phf-line .form-row input { height: 40px; font-size: .875rem; }
.panel-head-form h1 { font-size: 1.375rem; line-height: 1.2; margin: 4px 0 0; letter-spacing: -0.01em; }
.panel-head-form textarea {
  font-size: .875rem; line-height: 1.45; padding: 8px 11px; resize: vertical;
  min-height: 80px; height: 80px;
}
.phf-line .form-row input[type="date"] { height: 56px; }
.panel-head-form .form-row label small { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }

/* Display de OPP / lectura dentro del form */
.data-readonly {
  padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-soft); font-size: .8438rem;
  display: flex; align-items: center; min-height: 38px;
}

/* Form en 2 columnas (legacy / fallback) */
.form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-cols .form-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (max-width: 880px) { .form-cols { grid-template-columns: 1fr; gap: 20px; } }

/* Form en 3 columnas: Identificación (más ancha) | Datos | Financiamiento */
.form-row3 {
  display: grid; gap: 16px;
  grid-template-columns: 2fr 1fr 1fr;
  align-items: stretch;
}
.form-row3 > .panel { margin-bottom: 0; display: flex; flex-direction: column; }
@media (max-width: 1100px) { .form-row3 { grid-template-columns: 1fr 1fr; } .form-row3 > .panel:first-child { grid-column: 1 / -1; } }
@media (max-width: 720px)  { .form-row3 { grid-template-columns: 1fr; } .form-row3 > .panel:first-child { grid-column: auto; } }
/* Layout de 2 columnas iguales para secciones lado a lado (ej. Datos + Financiamiento) */
.form-row2 {
  display: grid; gap: 16px;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  margin-bottom: 20px;
}
.form-row2 > .panel { margin-bottom: 0; display: flex; flex-direction: column; }
@media (max-width: 720px) { .form-row2 { grid-template-columns: 1fr; } }
.personas-list-wide { max-height: 200px; }

/* Grid de 12 columnas para campos dentro de los paneles */
.form-grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 14px; }
.form-grid-12 .col-1  { grid-column: span 1; }
.form-grid-12 .col-2  { grid-column: span 2; }
.form-grid-12 .col-3  { grid-column: span 3; }
.form-grid-12 .col-4  { grid-column: span 4; }
.form-grid-12 .col-5  { grid-column: span 5; }
.form-grid-12 .col-6  { grid-column: span 6; }
.form-grid-12 .col-7  { grid-column: span 7; }
.form-grid-12 .col-8  { grid-column: span 8; }
.form-grid-12 .col-9  { grid-column: span 9; }
.form-grid-12 .col-10 { grid-column: span 10; }
.form-grid-12 .col-11 { grid-column: span 11; }
.form-grid-12 .col-12 { grid-column: span 12; }
@media (max-width: 880px) {
  .form-grid-12 .col-1, .form-grid-12 .col-2, .form-grid-12 .col-3, .form-grid-12 .col-4,
  .form-grid-12 .col-5, .form-grid-12 .col-6, .form-grid-12 .col-7, .form-grid-12 .col-8,
  .form-grid-12 .col-9, .form-grid-12 .col-10, .form-grid-12 .col-11 { grid-column: span 12; }
}

.placeholder-compact { padding: 10px; min-height: auto; }

.form-actions-bottom {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 18px;
}

/* Multi-select del Equipo Relacionado en el form */
.multi-select { min-height: 130px; padding: 4px; }
.multi-select option { padding: 4px 8px; border-radius: 4px; }
.multi-select option:checked { background: var(--primary-soft) linear-gradient(0deg, var(--primary-soft), var(--primary-soft)); color: var(--primary); font-weight: 500; }

/* Códigos de evento pendientes de mapeo (gastos huérfanos) */
.codigos-pendientes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.codigos-pendientes .opp-chip { background: #fff5d6; color: #6b4d00; border-color: #f0d480; font-weight: 600; }
.codigos-pendientes .opp-chip:hover { background: #ffeab0; text-decoration: none; }

/* Botón eliminar inline en la tabla de acciones */
.inline-del { display: inline; margin: 0; }
.inline-del button { background: transparent; color: var(--danger); border-color: transparent; }
.inline-del button:hover { background: #fdecea; border-color: #f1c0bb; }

/* Choice list: cards clickeables para radios con título + descripción larga.
   Usa :has() (soportado en todos los navegadores modernos). */
.choice-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.choice {
  display: block; position: relative; cursor: pointer;
  padding: 14px 16px; border: 1.5px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--tr), background var(--tr), box-shadow var(--tr);
}
.choice:hover { border-color: var(--text-soft); }
.choice input[type="radio"], .choice input[type="checkbox"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.choice:has(input:checked) {
  border-color: var(--primary); background: var(--primary-soft);
  box-shadow: 0 0 0 3px rgba(63, 105, 199, .12);
}
.choice-title {
  display: flex; align-items: center; gap: 8px;
  font-size: .875rem; font-weight: 600; color: var(--text); margin: 0;
}
.choice-title .material-symbols-rounded { font-size: 1.25rem; color: var(--text-soft); }
.choice:has(input:checked) .choice-title .material-symbols-rounded { color: var(--primary); }
.choice-desc { margin: 4px 0 0; font-size: .7812rem; color: var(--text-soft); line-height: 1.4; }
.choice:has(input:focus-visible) { outline: 2px solid var(--primary-soft); outline-offset: 2px; }

/* Selector "¿cómo se paga?" en form de evento */
.pago-mdf-options { display: flex; gap: 8px; flex-wrap: wrap; }
.pago-mdf-opt { cursor: pointer; }
.pago-mdf-opt input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.pago-mdf-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px; font-size: .8438rem; font-weight: 500;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text-soft);
  transition: all var(--tr);
}
.pago-mdf-opt:hover .pago-mdf-label { border-color: var(--text-soft); color: var(--text); }
.pago-mdf-opt input:checked + .pago-mdf-pendiente { background: #fff5d6; color: #6b4d00; border-color: #f0d480; }
.pago-mdf-opt input:checked + .pago-mdf-si        { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.pago-mdf-opt input:checked + .pago-mdf-no        { background: var(--surface-2); color: var(--text); border-color: var(--text-soft); }
.pago-mdf-opt input:focus-visible + .pago-mdf-label { outline: 2px solid var(--primary-soft); outline-offset: 2px; }

/* Hub de configuración */
.config-section { margin-bottom: 28px; }
.config-section:last-child { margin-bottom: 0; }
.config-section-head {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; padding: 0 2px;
  color: var(--text-soft);
}
.config-section-head .material-symbols-rounded { font-size: 1.25rem; }
.config-section-head h2 {
  margin: 0; font-size: .7812rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft);
}
.config-section-head .config-section-count {
  margin-left: auto; font-size: .75rem; color: var(--muted); font-weight: 500;
}
.config-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.config-card {
  display: flex; align-items: center; gap: 16px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--dsmk-r-lg);
  padding: 20px;
  box-shadow: var(--dsmk-sh-sm);
  color: var(--dsmk-ink-900) !important;
  transition: all var(--dsmk-t-base);
  position: relative; overflow: hidden;
}
.config-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--dsmk-brand-600); opacity: 0;
  transition: opacity var(--dsmk-t-base);
}
.config-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--dsmk-brand-500);
  box-shadow: var(--dsmk-sh-md);
  color: var(--dsmk-ink-900) !important;
}
.config-card:hover::before { opacity: 1; }
.config-card-icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--dsmk-r-md);
  background: var(--dsmk-brand-50); display: grid; place-items: center;
  border: 1px solid var(--dsmk-brand-100);
  transition: background var(--dsmk-t-base), border-color var(--dsmk-t-base);
}
.config-card:hover .config-card-icon {
  background: var(--dsmk-brand-100); border-color: var(--dsmk-brand-500);
}
.config-card-icon .material-symbols-rounded { font-size: 1.625rem; color: var(--dsmk-brand-600); }
.config-card-body { flex: 1; min-width: 0; }
.config-card-body h2 { margin: 0 0 4px; font-size: 1rem; color: var(--dsmk-ink-900); font-weight: 700; }
.config-card-body p  { margin: 0 0 8px; color: var(--dsmk-ink-600); font-size: .8125rem; line-height: 1.45; }
.config-card-meta { font-size: .7812rem; color: var(--dsmk-ink-500); font-family: var(--dsmk-font-mono); }
.config-card-arrow { color: var(--dsmk-ink-400); font-size: 1.375rem; flex-shrink: 0; transition: color var(--dsmk-t-base), transform var(--dsmk-t-base); }
.config-card:hover .config-card-arrow { color: var(--dsmk-brand-600); transform: translateX(3px); }

/* ─── Login (sin sidebar) ─── */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.auth-logo .sidebar-logo { width: 36px; height: 36px; }

/* ─── Responsive: sidebar pasa a barra horizontal con scroll ─── */
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-sidebar {
    position: static; height: auto;
    width: 100%; box-sizing: border-box;   /* sin esto conserva --sidebar-w (240px) y no llega al borde */
    flex-direction: row; align-items: center;
    overflow-x: auto; padding: 10px 12px; gap: 10px;
    scrollbar-width: none;                 /* se desliza con el dedo; la barra de scroll sobra */
    border-right: none; border-bottom: 1px solid var(--sb-bg);
  }
  .sidebar-brand-logo { height: 36px; }
  .app-sidebar::-webkit-scrollbar { display: none; }
  .sidebar-link.active::before { display: none; }
  .sidebar-brand {
    padding: 0 10px 0 4px; margin: 0; border: none; flex-shrink: 0;
  }
  .sidebar-brand-name { font-size: .8125rem; }
  .sidebar-brand-sub { display: none; }
  .sidebar-nav { flex-direction: row; padding: 0; gap: 4px; flex-shrink: 0; }
  .sidebar-link { white-space: nowrap; padding: 7px 10px; }
  .sidebar-label { display: none; }
  .sidebar-footer { border: none; margin-left: auto; padding: 0; }
  .sidebar-logout .material-symbols-rounded { font-size: 1.25rem; }
  .sidebar-logout span:not(.material-symbols-rounded) { display: none; }
  .app-topbar { padding: 0 16px; }
  .app-content { padding: 18px 16px 30px; }
  .flashbar { padding: 12px 16px 0; }
}
@media (max-width: 520px) {
  .topbar-user span:not(.material-symbols-rounded):not(.badge) { display: none; }
}

/* =========================================================================
   MKMEDICO Design System · Componentes .dsmk-* (mkmedico-ui pack)
   Fuente: a_brainClaude/05_design-system/mkmedico-ui/design-system.html
   Los tokens --dsmk-* viven en /assets/css/tokens.css.
   ========================================================================= */

/* ── 1. BUTTONS ── */
.dsmk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--dsmk-font-body);font-size:var(--dsmk-fs-sm);font-weight:600;padding:11px 22px;border-radius:var(--dsmk-r-pill);border:1px solid transparent;cursor:pointer;transition:all var(--dsmk-t-base);text-decoration:none;line-height:1;white-space:nowrap}
.dsmk-btn--primary{background:var(--dsmk-brand-600);color:#fff}
.dsmk-btn--primary:hover{background:var(--dsmk-brand-700);color:#fff;transform:translateY(-1px);box-shadow:var(--dsmk-sh-md)}
.dsmk-btn--secondary{background:#fff;border-color:var(--dsmk-ink-200);color:var(--dsmk-ink-800)}
.dsmk-btn--secondary:hover{border-color:var(--dsmk-ink-400);color:var(--dsmk-ink-900)}
.dsmk-btn--ghost{background:transparent;color:var(--dsmk-ink-600)}
.dsmk-btn--ghost:hover{background:var(--dsmk-ink-100);color:var(--dsmk-ink-900)}
.dsmk-btn--dark{background:var(--dsmk-ink-900);color:#fff}
.dsmk-btn--dark:hover{background:var(--dsmk-ink-800);color:#fff;transform:translateY(-1px)}
.dsmk-btn--sm{padding:7px 14px;font-size:var(--dsmk-fs-xs)}
.dsmk-btn--lg{padding:14px 28px;font-size:var(--dsmk-fs-md)}
.dsmk-btn--block{width:100%}
.dsmk-btn[disabled]{opacity:.5;pointer-events:none}
.dsmk-btn .material-symbols-outlined{font-size:1.125rem}

/* ── 2. FORMS ── */
.dsmk-input,.dsmk-textarea,.dsmk-select{width:100%;font-family:var(--dsmk-font-body);font-size:var(--dsmk-fs-base);color:var(--dsmk-ink-800);background:#fff;border:1px solid var(--dsmk-ink-200);border-radius:var(--dsmk-r-md);padding:11px 14px;transition:border-color var(--dsmk-t-fast),box-shadow var(--dsmk-t-fast);outline:none}
.dsmk-input:focus,.dsmk-textarea:focus,.dsmk-select:focus{border-color:var(--dsmk-brand-600);box-shadow:0 0 0 3px var(--dsmk-brand-50)}
.dsmk-input::placeholder,.dsmk-textarea::placeholder{color:var(--dsmk-ink-400)}
.dsmk-input[aria-invalid="true"]{border-color:var(--dsmk-error-600)}
.dsmk-input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--dsmk-error-50)}
.dsmk-label{display:block;font-family:var(--dsmk-font-body);font-size:var(--dsmk-fs-sm);font-weight:600;color:var(--dsmk-ink-800);margin-bottom:6px}
.dsmk-help{margin-top:5px;font-size:.75rem;color:var(--dsmk-ink-500)}
.dsmk-help.err{color:var(--dsmk-error-600)}
.dsmk-field{margin-bottom:16px}
.dsmk-check{display:inline-flex;align-items:center;gap:9px;font-size:.875rem;color:var(--dsmk-ink-700);cursor:pointer}
.dsmk-check input{width:16px;height:16px;accent-color:var(--dsmk-brand-600);flex:none}

/* ── 3. CHIPS · TAGS · BADGES ── */
.dsmk-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:#fff;border:1px solid var(--dsmk-ink-200);border-radius:var(--dsmk-r-pill);font-size:var(--dsmk-fs-sm);color:var(--dsmk-ink-600);font-weight:500;white-space:nowrap;cursor:pointer;transition:all var(--dsmk-t-fast)}
.dsmk-chip:hover{border-color:var(--dsmk-ink-400);color:var(--dsmk-ink-900)}
.dsmk-chip.is-active{background:var(--dsmk-ink-900);color:#fff;border-color:var(--dsmk-ink-900)}
.dsmk-tag{display:inline-block;padding:4px 10px;background:var(--dsmk-ink-50);border:1px solid var(--dsmk-ink-100);border-radius:var(--dsmk-r-pill);font-size:var(--dsmk-fs-xs);color:var(--dsmk-ink-600);font-weight:500}
.dsmk-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:var(--dsmk-r-sm)}
.dsmk-badge--dark{background:var(--dsmk-ink-900);color:#fff}
.dsmk-badge--brand{background:var(--dsmk-brand-50);color:var(--dsmk-brand-700)}
.dsmk-badge--success{background:var(--dsmk-success-50);color:var(--dsmk-success-600)}
.dsmk-badge--amber{background:var(--dsmk-amber-50);color:#92400e}
.dsmk-badge--error{background:var(--dsmk-error-50);color:var(--dsmk-error-600)}

/* ── 3.5 TABLES (dsmk-table pack) ── */
.dsmk-table{width:100%;max-width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--card-border);border-radius:var(--dsmk-r-md);overflow:hidden;font-family:var(--dsmk-font-body);font-size:var(--dsmk-fs-sm);color:var(--dsmk-ink-800);table-layout:auto}
.dsmk-table th,.dsmk-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--dsmk-ink-100);vertical-align:middle;overflow-wrap:break-word}
.dsmk-table th.col-min,.dsmk-table td.col-min{width:1%;white-space:nowrap}
.dsmk-table th.col-num,.dsmk-table td.col-num{width:1%;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;font-family:var(--dsmk-font-mono);font-size:.7812rem}
.dsmk-table th.col-actions,.dsmk-table td.col-actions{width:1%;white-space:nowrap;text-align:right}
.dsmk-table th.col-fill,.dsmk-table td.col-fill{width:auto}
.dsmk-table--wrap th,.dsmk-table--wrap td{word-break:break-word}
.dsmk-table thead th{background:var(--dsmk-ink-50);font-family:var(--dsmk-font-mono);font-size:.6562rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dsmk-ink-500);border-bottom:1px solid var(--dsmk-ink-200)}
.dsmk-table tbody tr:last-child td{border-bottom:0}
.dsmk-table tbody tr:hover td{background:var(--dsmk-ink-50)}
.dsmk-table--striped tbody tr:nth-child(odd) td{background:var(--dsmk-ink-50)}
.dsmk-table--striped tbody tr:nth-child(odd):hover td{background:var(--dsmk-ink-100)}
.dsmk-table--compact th,.dsmk-table--compact td{padding:7px 12px;font-size:.7812rem}
.dsmk-table--flush{border:0;border-radius:0}
.dsmk-table--flush thead th{border-top:0}
.dsmk-table td.num,.dsmk-table th.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--dsmk-font-mono);font-size:.7812rem}
.dsmk-table td.mono{font-family:var(--dsmk-font-mono);font-size:.75rem;color:var(--dsmk-ink-700)}
.dsmk-table td.actions{white-space:nowrap;text-align:right}
.dsmk-table .row-muted td{color:var(--dsmk-ink-500)}
.dsmk-table-wrap{overflow-x:auto;border-radius:var(--dsmk-r-md)}

/* ── 4. CARDS ── */
.dsmk-card{background:#fff;border:1px solid var(--card-border);border-radius:var(--dsmk-r-lg);padding:var(--dsmk-sp-6);transition:border-color var(--dsmk-t-base),box-shadow var(--dsmk-t-base)}
.dsmk-card:hover{border-color:var(--dsmk-ink-400);box-shadow:var(--dsmk-sh-md)}
.dsmk-card--featured{border-color:var(--dsmk-brand-100);background:linear-gradient(180deg,var(--dsmk-brand-50) 0%,#fff 40%)}

/* ── 5. ALERTS ── */
.dsmk-alert{border:1px solid;border-radius:var(--dsmk-r-md);padding:14px 18px;display:flex;gap:12px;align-items:flex-start;font-size:.875rem;line-height:1.5}
.dsmk-alert .material-symbols-outlined{font-size:1.25rem;flex:none;margin-top:1px}
.dsmk-alert--info{border-color:var(--dsmk-brand-100);background:var(--dsmk-brand-50);color:var(--dsmk-ink-900)}
.dsmk-alert--info .material-symbols-outlined{color:var(--dsmk-brand-600)}
.dsmk-alert--success{border-color:#a7f3d0;background:var(--dsmk-success-50);color:var(--dsmk-ink-900)}
.dsmk-alert--success .material-symbols-outlined{color:var(--dsmk-success-600)}
.dsmk-alert--error{border-color:#fecaca;background:var(--dsmk-error-50);color:var(--dsmk-ink-900)}
.dsmk-alert--error .material-symbols-outlined{color:var(--dsmk-error-600)}
.dsmk-alert--amber{border-color:#fde68a;background:var(--dsmk-amber-50);color:#92400e}
.dsmk-alert--amber .material-symbols-outlined{color:var(--dsmk-amber-500)}

/* ── 6. TOAST ── */
.toast-tray .dsmk-toast{pointer-events:auto;animation:tin .3s ease}
.dsmk-toast{display:inline-flex;align-items:center;gap:10px;padding:11px 16px;background:#fff;border:1px solid var(--dsmk-ink-200);border-radius:var(--dsmk-r-md);box-shadow:var(--dsmk-sh-lg);font-size:.8438rem;color:var(--dsmk-ink-900);font-weight:500}
.dsmk-toast .material-symbols-outlined{color:var(--dsmk-success-600);font-size:1.25rem}
@keyframes tin{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* ── 7. SIDEBAR ── */
.dsmk-sidebar{width:260px;background:#fff;border-right:1px solid var(--dsmk-ink-200);display:flex;flex-direction:column;overflow-y:auto;padding:16px 12px 24px;font-family:var(--dsmk-font-body)}
.dsmk-sidebar-brand{display:flex;align-items:center;gap:10px;padding:10px 12px 18px;font-size:.9375rem;font-weight:700;color:var(--dsmk-ink-900);border-bottom:1px solid var(--dsmk-ink-100);margin-bottom:14px}
.dsmk-sidebar-brand .brand-dot{width:12px;height:12px;border-radius:4px;background:var(--dsmk-brand-grad);flex:none;box-shadow:0 0 12px rgba(59,183,232,.4)}
.dsmk-sidebar-brand img{height:26px;width:auto}
.dsmk-sidebar-section{margin-bottom:16px}
.dsmk-sidebar-section-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 4px}
.dsmk-sidebar-section-label{font-family:var(--dsmk-font-mono);font-size:.6562rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dsmk-ink-400);font-weight:700}
.dsmk-sidebar-add{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:var(--dsmk-r-sm);color:var(--dsmk-ink-500);transition:all var(--dsmk-t-fast)}
.dsmk-sidebar-add:hover{background:var(--dsmk-ink-100);color:var(--dsmk-brand-600)}
.dsmk-sidebar-add .material-symbols-outlined{font-size:1rem}
.dsmk-sidebar-select{width:calc(100% - 4px);margin:0 2px 8px;position:relative}
.dsmk-sidebar-select select{width:100%;padding:9px 30px 9px 30px;font-family:inherit;font-size:.8125rem;color:var(--dsmk-ink-800);background:var(--dsmk-ink-50);border:1px solid var(--dsmk-ink-200);border-radius:var(--dsmk-r-sm);appearance:none;-webkit-appearance:none;cursor:pointer;transition:all var(--dsmk-t-fast);background-repeat:no-repeat;background-position:right 10px center;background-size:10px 6px}
.dsmk-sidebar-select select:focus{outline:none;border-color:var(--dsmk-brand-500);background-color:#fff}
.dsmk-sidebar-select .dot{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:3px;background:var(--dsmk-brand-500);pointer-events:none}
.dsmk-nav-link{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--dsmk-r-sm);font-size:.8438rem;font-weight:500;color:var(--dsmk-ink-700);transition:all var(--dsmk-t-fast);position:relative}
.dsmk-nav-link:hover{background:var(--dsmk-ink-100);color:var(--dsmk-ink-900)}
.dsmk-nav-link.is-active{background:var(--dsmk-brand-50);color:var(--dsmk-brand-700);font-weight:600}
.dsmk-nav-link.is-active::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--dsmk-brand-600)}
.dsmk-nav-link .material-symbols-outlined{font-size:1.1875rem;flex:none;color:var(--dsmk-ink-500)}
.dsmk-nav-link.is-active .material-symbols-outlined{color:var(--dsmk-brand-600)}
.dsmk-nav-link .dsmk-nav-count{margin-left:auto;font-family:var(--dsmk-font-mono);font-size:.6875rem;font-weight:700;background:var(--dsmk-ink-100);color:var(--dsmk-ink-600);padding:2px 8px;border-radius:var(--dsmk-r-pill);letter-spacing:.02em}
.dsmk-nav-link.is-active .dsmk-nav-count{background:var(--dsmk-brand-100);color:var(--dsmk-brand-700)}
.dsmk-nav-sublink{padding-left:38px;font-size:.7812rem;color:var(--dsmk-ink-600);font-weight:500}
.dsmk-nav-sublink .material-symbols-outlined{font-size:1rem;color:var(--dsmk-ink-400)}
.dsmk-nav-sublink.is-active{background:transparent;color:var(--dsmk-brand-700);font-weight:600}
.dsmk-nav-sublink.is-active::before{display:none}
.dsmk-nav-sublink.is-active .material-symbols-outlined{color:var(--dsmk-brand-600)}
.dsmk-nav-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;margin-right:2px}

/* ── 8. TOPBAR ── */
.dsmk-topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;height:56px;padding:0 20px;background:#fff;border-bottom:1px solid var(--dsmk-ink-200);font-family:var(--dsmk-font-body)}
.dsmk-topbar-left{display:flex;align-items:center;gap:8px}
.dsmk-topbar-burger{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--dsmk-r-sm);color:var(--dsmk-ink-700);transition:all var(--dsmk-t-fast)}
.dsmk-topbar-burger:hover{background:var(--dsmk-ink-100)}
.dsmk-topbar-back{display:inline-flex;align-items:center;gap:6px;padding:7px 12px 7px 8px;border-radius:var(--dsmk-r-sm);font-size:.8125rem;font-weight:500;color:var(--dsmk-ink-600);transition:all var(--dsmk-t-fast)}
.dsmk-topbar-back:hover{background:var(--dsmk-ink-100);color:var(--dsmk-ink-900)}
.dsmk-topbar-back .material-symbols-outlined{font-size:1.125rem}
.dsmk-topbar-center{display:flex;align-items:center;gap:20px;min-width:0}
.dsmk-topbar-titleblock{display:flex;flex-direction:column;justify-content:center;min-width:0;gap:2px}
.dsmk-topbar-crumbs{display:flex;align-items:center;gap:6px;font-family:var(--dsmk-font-mono);font-size:.625rem;letter-spacing:.08em;color:var(--dsmk-ink-500);text-transform:uppercase;font-weight:600}
.dsmk-topbar-crumbs a{color:var(--dsmk-ink-500);transition:color var(--dsmk-t-fast)}
.dsmk-topbar-crumbs a:hover{color:var(--dsmk-brand-600)}
.dsmk-topbar-crumbs .sep{color:var(--dsmk-ink-300)}
.dsmk-topbar-crumbs .cur{color:var(--dsmk-ink-800)}
.dsmk-topbar-title{font-size:.9375rem;font-weight:700;color:var(--dsmk-ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.005em}
.dsmk-topbar-search{position:relative;display:flex;align-items:center;max-width:340px;flex:1;min-width:180px}
.dsmk-topbar-search input{width:100%;height:36px;padding:0 12px 0 36px;font-family:inherit;font-size:.8125rem;color:var(--dsmk-ink-800);background:var(--dsmk-ink-100);border:1px solid transparent;border-radius:var(--dsmk-r-md);outline:none;transition:all var(--dsmk-t-fast)}
.dsmk-topbar-search input:focus{background:#fff;border-color:var(--dsmk-brand-500);box-shadow:0 0 0 3px var(--dsmk-brand-50)}
.dsmk-topbar-search .material-symbols-outlined{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:1.125rem;color:var(--dsmk-ink-500);pointer-events:none}
.dsmk-topbar-search kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:var(--dsmk-font-mono);font-size:.625rem;color:var(--dsmk-ink-500);background:#fff;border:1px solid var(--dsmk-ink-200);border-radius:4px;padding:2px 5px;font-weight:600}
.dsmk-topbar-right{display:flex;align-items:center;gap:6px}
.dsmk-topbar-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;font-size:.8125rem;font-weight:600;color:var(--dsmk-ink-700);background:var(--dsmk-ink-100);border-radius:var(--dsmk-r-md);transition:all var(--dsmk-t-fast)}
.dsmk-topbar-btn:hover{background:var(--dsmk-ink-200);color:var(--dsmk-ink-900)}
.dsmk-topbar-btn--primary{background:var(--dsmk-brand-600);color:#fff}
.dsmk-topbar-btn--primary:hover{background:var(--dsmk-brand-700);color:#fff}
.dsmk-topbar-btn .material-symbols-outlined{font-size:1.0625rem}
.dsmk-topbar-user{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;margin:0 8px 0 4px;line-height:1.2;padding-left:12px;border-left:1px solid var(--dsmk-ink-100)}
.dsmk-topbar-user b{font-size:.8125rem;color:var(--dsmk-ink-900);font-weight:600}
.dsmk-topbar-user small{font-family:var(--dsmk-font-mono);font-size:.5938rem;letter-spacing:.08em;color:var(--dsmk-ink-500);text-transform:uppercase;font-weight:600;margin-top:2px}
.dsmk-topbar-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--dsmk-r-sm);color:var(--dsmk-ink-700);transition:all var(--dsmk-t-fast);position:relative}
.dsmk-topbar-icon:hover{background:var(--dsmk-ink-100);color:var(--dsmk-ink-900)}
.dsmk-topbar-icon .material-symbols-outlined{font-size:1.1875rem}
.dsmk-topbar-notif-badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;background:var(--dsmk-error-600);color:#fff;border-radius:8px;font-family:var(--dsmk-font-mono);font-size:.5938rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;letter-spacing:0;box-shadow:0 0 0 2px #fff;line-height:1}
@media(max-width:820px){.dsmk-topbar{grid-template-columns:auto 1fr auto;gap:8px;padding:0 12px}.dsmk-topbar-search,.dsmk-topbar-titleblock .dsmk-topbar-crumbs{display:none}.dsmk-topbar-btn span:not(.material-symbols-outlined){display:none}.dsmk-topbar-user{display:none}}

/* ── 9. BREADCRUMBS ── */
.dsmk-crumbs{display:flex;gap:8px;font-size:var(--dsmk-fs-sm);color:var(--dsmk-ink-500);align-items:center;flex-wrap:wrap}
.dsmk-crumbs a{color:inherit}
.dsmk-crumbs a:hover{color:var(--dsmk-brand-600)}
.dsmk-crumbs .sep{color:var(--dsmk-ink-400)}
.dsmk-crumbs .current{color:var(--dsmk-ink-900);font-weight:600}

/* ── 10. DOT ── */
.dsmk-dot{display:inline-block;width:8px;height:8px;background:var(--dsmk-success-500);border-radius:50%;box-shadow:0 0 0 3px var(--dsmk-success-50)}
.dsmk-dot--pulse{animation:dspulse 2s ease-in-out infinite}
@keyframes dspulse{0%,100%{box-shadow:0 0 0 3px var(--dsmk-success-50)}50%{box-shadow:0 0 0 6px rgba(16,185,129,.2)}}

/* ── 11. LOGIN SPLIT ── */
.dsmk-login-split{display:grid;grid-template-columns:1fr minmax(380px,460px);min-height:100vh;background:#fff;font-family:var(--dsmk-font-body);color:var(--dsmk-ink-800)}
.dsmk-login-hero{position:relative;background-color:var(--dsmk-brand-700);background-image:var(--dsmk-brand-grad);background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden;color:#fff;min-height:100%}
.dsmk-login-hero--photo{background-color:var(--dsmk-ink-900)}
.dsmk-login-hero--photo::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(11,18,32,.55) 0%,var(--dsmk-brand-700) 60%,var(--dsmk-brand-500) 100%);opacity:.75;pointer-events:none;mix-blend-mode:multiply}
.dsmk-login-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45));pointer-events:none}
.dsmk-login-hero-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:48px 44px;z-index:1}
.dsmk-login-hero-title{font-size:var(--dsmk-fs-4xl);font-weight:400;line-height:1.1;letter-spacing:-.015em;margin:0 0 18px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35),0 4px 24px rgba(0,0,0,.2)}
.dsmk-login-hero-tagline{font-family:var(--dsmk-font-mono);font-size:var(--dsmk-fs-md);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.92);margin:0;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.dsmk-login-panel{background:#fff;display:flex;flex-direction:column;justify-content:center;padding:48px 44px;box-shadow:-12px 0 40px rgba(11,18,32,.06);position:relative;z-index:2}
.dsmk-login-panel-inner{width:100%;max-width:340px;margin:0 auto}
.dsmk-login-logo{margin-bottom:26px;display:flex;align-items:center;gap:10px}
.dsmk-login-logo img{height:64px;width:auto;max-width:100%}
.dsmk-login-logo .brand-mark{width:32px;height:32px;border-radius:var(--dsmk-r-sm);background:var(--dsmk-brand-grad);display:inline-flex;align-items:center;justify-content:center;color:#fff}
.dsmk-login-logo b{font-size:1rem;font-weight:700;color:var(--dsmk-ink-900);letter-spacing:-.005em}
.dsmk-login-panel form{display:flex;flex-direction:column;gap:16px}
.dsmk-login-panel form .dsmk-btn{align-self:flex-start;margin-top:8px}
/* Campo con label flotante (estilo Google): el label se ve dentro del input y sube al borde al enfocar o con valor.
   Requiere placeholder=" " en el input y el <label> después del input. :autofill cubre el autocompletado del navegador. */
.float-field{position:relative}
.float-field .dsmk-input{padding:14px 14px}
.float-field label{position:absolute;left:10px;top:50%;transform:translateY(-50%);padding:0 4px;background:#fff;color:var(--dsmk-ink-500);font-size:var(--dsmk-fs-base);line-height:1;pointer-events:none;transition:top var(--dsmk-t-fast),font-size var(--dsmk-t-fast),color var(--dsmk-t-fast)}
.float-field .dsmk-input:focus + label,
.float-field .dsmk-input:not(:placeholder-shown) + label{top:0;font-size:var(--dsmk-fs-xs)}
/* Autofill en reglas separadas: un selector que el navegador no conoce invalida toda la regla. */
.float-field .dsmk-input:-webkit-autofill + label{top:0;font-size:var(--dsmk-fs-xs)}
.float-field .dsmk-input:autofill + label{top:0;font-size:var(--dsmk-fs-xs)}
.float-field .dsmk-input:focus + label{color:var(--dsmk-brand-600)}
.dsmk-login-pills{display:flex;padding:4px;gap:4px;background:var(--dsmk-ink-100);border-radius:var(--dsmk-r-pill);margin-bottom:22px}
.dsmk-login-pill{flex:1;text-align:center;padding:9px 14px;border-radius:var(--dsmk-r-pill);font-size:var(--dsmk-fs-sm);font-weight:600;color:var(--dsmk-ink-500);transition:all var(--dsmk-t-fast);display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.dsmk-login-pill:hover{color:var(--dsmk-ink-900)}
.dsmk-login-pill.is-active{background:#fff;color:var(--dsmk-ink-900);box-shadow:var(--dsmk-sh-sm)}
.dsmk-login-pill .material-symbols-outlined{font-size:.875rem}
@media(max-width:820px){.dsmk-login-split{grid-template-columns:1fr}.dsmk-login-hero{min-height:220px}.dsmk-login-hero-content{padding:28px}.dsmk-login-hero-title{font-size:var(--dsmk-fs-2xl)}.dsmk-login-panel{padding:32px 22px;box-shadow:none}}
/* Portada pública (/): mismo hero que el login (foto + mensaje) a pantalla completa, logo blanco
   (assets/img/logo-blanco.png, PNG transparente) sobre el título. */
.home-hero{min-height:100vh}
.home-hero-logo{margin-bottom:28px}
.home-hero-logo img{display:block;height:88px;width:auto;max-width:60vw}
@media(max-width:820px){.home-hero-logo{margin-bottom:18px}.home-hero-logo img{height:60px}}

/* Flash 'ok' (flash_set('ok', ...)) = mismo look que success. */
.flash-ok { background: #e8f7ef; border-color: #b8e1cb; color: #1f6b46; }

/* CRM · Notificaciones */
.notif-form { max-width: none; }
.notif-stat-value { overflow-wrap: anywhere; }
.notif-preview {
  display: block; width: 100%; height: 640px;
  border: 1px solid var(--dsmk-ink-200); border-radius: var(--dsmk-r-md); background: #F8FAFC;
}
/* .choice con la casilla visible (on/off simple, donde el estado tiene que leerse sin highlight). */
.choice.choice-check input[type="checkbox"] {
  position: static; opacity: 1; pointer-events: auto;
  width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--primary); cursor: pointer;
}

/* Gastos del evento: línea compacta desplegable; totales + tabla solo al abrir. */
.gasto-box {
  background: #F8FAFC; border: 1px solid var(--card-border); border-radius: var(--dsmk-r-md);
  font-size: .8125rem; color: var(--dsmk-ink-600);
}
.gasto-box > summary {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  cursor: pointer; list-style: none; font-weight: 600; color: var(--dsmk-ink-800);
}
.gasto-box > summary::-webkit-details-marker { display: none; }
.gasto-box > summary .material-symbols-rounded { font-size: 1.125rem; color: var(--dsmk-ink-500); }
.gasto-box .gasto-box-chev { margin-left: auto; transition: transform var(--dsmk-t-fast); }
.gasto-box[open] .gasto-box-chev { transform: rotate(180deg); }
.gasto-box[open] { background: #fff; padding-bottom: 8px; }
.gasto-box .t { margin: 0; }
.gasto-box .empty { padding: 16px; }
.gasto-line {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 8px 12px 10px; border-top: 1px solid var(--dsmk-ink-200);
  font-size: .7812rem; color: var(--dsmk-ink-600);
}
.gasto-line strong { color: var(--dsmk-ink-800); font-weight: 600; }

/* Ficha de evento en 2 columnas: principal (izq) + lateral MRR/equipo (der). Mobile: 1 columna, lateral arriba. */
.ev-layout {
  display: grid; gap: 20px; align-items: start;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas: "main side";
}
.ev-main { grid-area: main; min-width: 0; }
.ev-side { grid-area: side; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.ev-side .panel { margin-bottom: 0; }
.ev-main > :first-child { margin-top: 0; }
@media (max-width: 980px) {
  .ev-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "main"; }
  .ev-side { position: static; }
}

/* Listado de eventos: columnas Evento | Acciones | Estatus | Opciones (cada celda apila sus controles). */
.evento-meta-date--alert { color: var(--dsmk-error-600, #dc2626); font-weight: 600; }
table.t td.evento-cell { max-width: 420px; }
table.t th.ev-col-acciones, table.t td.ev-col-acciones { width: 600px; min-width: 600px; max-width: 600px; }   /* Gestión: 4 selectores en una fila */
table.t th.ev-col-estatus,  table.t td.ev-col-estatus  { width: 290px; min-width: 290px; max-width: 290px; }
.ev-stack { display: flex; flex-direction: column; gap: 6px; }
.ev-stack-item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ev-stack-item > form { margin: 0; min-width: 0; }
.ev-stack-lbl {
  flex: none; width: 96px;
  font-family: var(--dsmk-font-mono); font-size: .625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--dsmk-ink-500);
}
.ev-col-estatus .ev-stack-lbl { width: 64px; }
/* Listado de eventos: Financiamiento | Use case y Estado | Mkt Estado, cada par en una línea y del mismo ancho. */
.ev-col-acciones .ev-stack, .ev-col-estatus .ev-stack { flex-direction: row; align-items: center; }
.ev-col-acciones .ev-stack-item, .ev-col-estatus .ev-stack-item { flex: 1 1 0; min-width: 0; }
.ev-col-acciones .ev-stack-item > form, .ev-col-estatus .ev-stack-item > form { flex: 1 1 auto; width: 100%; }
.ev-col-acciones .ev-stack-item select,
.ev-col-acciones .ev-stack-item .ss-wrap,
.ev-col-estatus .ev-stack-item select,
.ev-col-estatus .ev-stack-item .ss-wrap { width: 100% !important; min-width: 0 !important; max-width: none !important; }
.ev-col-acciones .ss-trigger, .ev-col-estatus .ss-trigger { min-width: 0; width: 100%; }   /* el texto largo lo corta .ss-label con … */
.ev-stack-item.opp-list { max-width: none; align-items: flex-start; }
.ev-recursos-link { display: inline-flex; align-items: center; gap: 3px; font-size: .75rem; white-space: nowrap; }
.ev-recursos-link .material-symbols-rounded { font-size: .9375rem; }
.ev-col-acciones select.is-placeholder { color: var(--dsmk-ink-400); }
.ev-col-acciones select.is-placeholder option { color: var(--dsmk-ink-800); }

/* Formulario de evento: 70% principal | 30% lateral. Mobile/tablet: 1 columna (lateral debajo). */
.evf-layout {
  display: grid; gap: 20px; align-items: start;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
}
.evf-main, .evf-side { min-width: 0; }
.evf-stack, .evf-side { display: flex; flex-direction: column; gap: 16px; }
.evf-stack > .panel, .evf-side > .panel { margin-bottom: 0; }
.evf-main > form + * { margin-top: 20px; }
@media (max-width: 1100px) {
  .evf-layout { grid-template-columns: minmax(0, 1fr); }
}
/* En el lateral las etiquetas largas quiebran en 2 líneas: alinear los campos de cada fila por abajo. */
.evf-side .form-grid-12 { align-items: end; }
/* Recurso de tarea: Nombre | Link | Abrir en una fila. */
.recurso-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 6px; align-items: center; }
/* /tareas/: filas de "Acciones marketing" de eventos en vivo (aún no convertidas en tarea). */
table.t.t-tareas tr.tarea-row--evento > td { background: #fbfaf5; }
.tarea-ev-tag { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 3px; font-size: .75rem; font-weight: 600; color: var(--dsmk-ink-600); }
.tarea-ev-tag .material-symbols-rounded { font-size: .9375rem; }
.tarea-ev-tag .muted { font-weight: 400; }
/* Form POST de un solo botón dentro de una celda/acciones (sin estilos de borrado). */
.inline-form { display: inline; margin: 0; }
/* Etiqueta de campo con una acción a la derecha (ej. "Acciones marketing" + Convertir en tarea). */
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Form de evento · lateral "Info evento": bloque Financiamiento dentro del grid + título único de Recursos. */
.evf-fin { display: flex; flex-direction: column; gap: 8px; }
.evf-fin-lbl { font-family: var(--dsmk-font-body); font-size: var(--dsmk-fs-sm); font-weight: 600; color: var(--dsmk-ink-800); }
.evf-fin > .form-row { margin: 0; }
/* Ficha de evento · lateral: resumen etiqueta/valor en 2 columnas (mismos bloques que el form). */
.opp-fields-grid.opp-fields-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.opp-field--full { grid-column: 1 / -1; }
.ev-res-ico { font-size: .9375rem; vertical-align: -3px; }
/* Ficha de evento: meta bajo el título, 2 columnas Descripción | Acciones, vacío compacto. */
.ev-head-meta { margin-top: 6px; }
.ev-dos-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.ev-dos-col > .panel { margin-bottom: 0; }
.ev-empty { display: flex; align-items: center; gap: 8px; padding: 14px 18px; color: var(--dsmk-ink-500); font-size: .8125rem; }
.ev-empty .material-symbols-rounded { font-size: 1.125rem; }

/* ─── Menú lateral colapsable (escritorio). Clase html.sb-collapsed: solo íconos, tooltip vía title. ─── */
.sidebar-link-sub { padding-left: 38px; font-size: .8125rem; }
.sidebar-link-sub .material-symbols-rounded { font-size: 1.125rem; }
.topbar-title { display: flex; align-items: center; }
.topbar-toggle {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--dsmk-ink-200); border-radius: var(--dsmk-r-md); background: #fff;
  color: var(--dsmk-ink-600); cursor: pointer; transition: background var(--dsmk-t-fast), color var(--dsmk-t-fast);
}
.topbar-toggle:hover { background: var(--dsmk-ink-100); color: var(--dsmk-ink-900); }
.topbar-toggle .material-symbols-rounded { font-size: 1.25rem; }
@media (min-width: 901px) {
  .app-shell { transition: grid-template-columns .18s ease; }
  html.sb-collapsed { --sidebar-w: 72px; }
  html.sb-collapsed .app-sidebar { padding: 16px 10px 24px; overflow-x: hidden; }
  html.sb-collapsed .sidebar-brand { justify-content: center; padding: 10px 0 18px; }
  html.sb-collapsed .sidebar-brand-logo { height: auto; width: 100%; }
  html.sb-collapsed .sidebar-brand > div:not(.sidebar-logo),
  html.sb-collapsed .sidebar-label { display: none; }
  html.sb-collapsed .sidebar-nav { padding: 0; }
  html.sb-collapsed .sidebar-link,
  html.sb-collapsed .sidebar-link-sub,
  html.sb-collapsed .sidebar-logout { justify-content: center; padding: 9px 0; gap: 0; }
  html.sb-collapsed .sidebar-link-sub .material-symbols-rounded { font-size: 1.0625rem; opacity: .85; }
  html.sb-collapsed .sidebar-link.active::before { left: -10px; }
  html.sb-collapsed .sidebar-footer { padding: 12px 0 4px; }
}
@media (max-width: 900px) { .topbar-toggle { display: none; } }
/* /tareas/: responsable con su estado en la tarea (colores de .sub-estado--*). */
.resp-estados { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.resp-estado { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: .75rem; line-height: 1.5; white-space: nowrap; }
.resp-estado-n { font-weight: 600; color: var(--dsmk-ink-900); }
.resp-estado-e { color: var(--dsmk-ink-700); }
.resp-estado-e::before { content: "·"; margin-right: 6px; color: var(--dsmk-ink-500); }

/* ── Dashboard: "Presencia en el mundo" (mapa jsVectorMap + línea de tiempo, assets/js/dashboard-mapa.js) ── */
.presencia-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.presencia-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.presencia-filtros select, .presencia-filtros .ss-wrap { width: auto; min-width: 150px; display: inline-block; vertical-align: middle; }
.presencia-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--dsmk-fs-sm); color: var(--dsmk-ink-700); white-space: nowrap; }
.presencia-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; }
.presencia-body > * { min-width: 0; }
.presencia-mapa-wrap { background: var(--dsmk-ink-50); border-radius: var(--dsmk-r-md); padding: 8px; }
/* Doble clase: el CSS de jsVectorMap pone .jvm-container{height:100%} y pisaría el alto. */
.presencia-mapa, .presencia-mapa.jvm-container { height: 440px; position: relative; }
.presencia-play { display: flex; align-items: center; gap: 12px; padding: 8px 4px 2px; }
.presencia-play input[type="range"] { flex: 1; accent-color: var(--dsmk-brand-600); }
.presencia-fecha { min-width: 86px; text-align: right; color: var(--dsmk-ink-700); font-size: var(--dsmk-fs-sm); }
.presencia-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.presencia-kpis div { background: var(--dsmk-ink-50); border-radius: var(--dsmk-r-md); padding: 10px 12px; }
.presencia-kpis b { display: block; font-size: var(--dsmk-fs-2xl); color: var(--dsmk-ink-900); line-height: 1.1; }
.presencia-kpis span { font-size: var(--dsmk-fs-xs); color: var(--dsmk-ink-500); text-transform: uppercase; letter-spacing: .06em; }
.presencia-ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.presencia-ranking li { display: grid; grid-template-columns: 1fr auto; row-gap: 3px; font-size: var(--dsmk-fs-sm); }
.presencia-ranking .pm-r-nombre { color: var(--dsmk-ink-800); display: inline-flex; align-items: center; gap: 8px; }
.pm-bandera { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(11,18,32,.12); vertical-align: -2px; }
.presencia-ranking b { color: var(--dsmk-ink-900); }
.presencia-ranking i { grid-column: 1 / -1; display: block; height: 4px; border-radius: 2px; background: #1a73e8; transition: width .2s; }
.presencia-nota { font-size: var(--dsmk-fs-xs); margin: 14px 0 0; }
/* Punto nuevo durante la reproducción: aparece grande y transparente y se asienta (estilo GA). */
.presencia-mapa .jvm-marker.pm-nuevo { transform-box: fill-box; transform-origin: center; animation: pm-pop .7s ease-out; }
@keyframes pm-pop { from { transform: scale(3.2); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
.presencia-mapa .jvm-zoom-btn { background: #fff; color: var(--dsmk-ink-700); border: 1px solid var(--dsmk-ink-200); }
@media (max-width: 900px) { .presencia-body { grid-template-columns: 1fr; } .presencia-mapa, .presencia-mapa.jvm-container { height: 320px; } }

/* Enlace "Descargar QR" en listados de formularios (sin miniatura: el QR se genera al descargar). */
.qr-link { display: inline-flex; align-items: center; gap: 4px; font-size: .7812rem; font-weight: 500; color: var(--dsmk-brand-600); white-space: nowrap; }
.qr-link .material-symbols-rounded { font-size: 1rem; }
.qr-link:hover { color: var(--dsmk-brand-700); }


/* ── Campos genéricos (mismo look que la ficha del lead): .fld-grid / .fld / .fld-lbl / .fld-in ──
   Usado en el editor de formularios (crm/formularios/form.php). */
.fld-grid { display: grid; grid-template-columns: repeat(var(--fld-cols, 2), minmax(0, 1fr)); gap: 10px 14px; align-items: start; }
.fld--end { align-self: end; }   /* p. ej. una casilla a la altura de los inputs vecinos */
.fld-grid--3 { --fld-cols: 3; }
.fld-grid--4 { --fld-cols: 4; }
/* Apariencia en una línea: 3 colores (angostos) + radio + alto + etiquetas. */
.fld-grid--apariencia { grid-template-columns: auto auto auto minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1.4fr); }
.fld-in[type="color"] { width: 56px; height: 38px; padding: 4px; cursor: pointer; }
.fld-check { display: inline-flex; align-items: center; gap: 8px; font-size: .8438rem; color: var(--dsmk-ink-900); cursor: pointer; min-height: 38px; }
.fld-hint { font-size: .75rem; color: var(--dsmk-ink-500); margin: 4px 0 0; line-height: 1.4; }
@media (max-width: 760px) { .fld-grid, .fld-grid--3, .fld-grid--4 { --fld-cols: 1; } .fld-grid--apariencia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Editor de formulario */
.ff-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }   /* Apariencia más ancha */
.ff-cols > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ff-cols .panel { margin-bottom: 0; }
.ff-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ff-panel-head h3 { margin: 0; }
.ff-plantilla { display: flex; align-items: center; gap: 6px; }
.ff-plantilla select { width: 200px; }
/* Guardado en línea sin recargar (assets/js/inline-save.js): estado del select + aviso flotante. */
select.inline-saving { opacity: .6; cursor: progress; }
select.inline-ok { box-shadow: 0 0 0 3px #bbf7d0; border-color: #22c55e; transition: box-shadow .2s; }
.inline-toast { position: fixed; right: 20px; bottom: 20px; z-index: 200; max-width: 360px; padding: 10px 16px; border-radius: 10px;
  background: #065f46; color: #fff; font-size: .8125rem; box-shadow: 0 10px 30px rgba(15, 23, 42, .2);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.inline-toast.is-visible { opacity: 1; transform: none; }
.inline-toast--err { background: #b91c1c; }

/* Auditoría: detalle de campos de un cambio (desplegable). */
.aud-t td { vertical-align: top; }
.aud-det summary { cursor: pointer; color: var(--dsmk-brand-600, #1f6feb); font-size: .75rem; }
.aud-campos { display: grid; grid-template-columns: minmax(90px, max-content) minmax(0, 1fr); gap: 3px 12px; margin: 6px 0 0; font-size: .75rem; max-width: 520px; }
.aud-campos dt { color: var(--dsmk-ink-500); }
.aud-campos dd { margin: 0; overflow-wrap: anywhere; }

/* Pantalla 403 (_layout/forbidden.php): tarjeta centrada, ícono, acciones y atajos a sus secciones. */
.denied { max-width: 560px; margin: 48px auto; padding: 40px 36px 32px; text-align: center; background: #fff; border: 1px solid #cbd5e1; border-radius: 20px; box-shadow: 0 18px 40px rgba(15, 23, 42, .06); }
.denied-icon { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #e8f0fe, #f1f5ff); color: var(--dsmk-brand-600, #1f6feb); }
.denied-icon .material-symbols-rounded { font-size: 2.25rem; }
.denied-title { margin: 0 0 8px; font-size: 1.375rem; color: var(--dsmk-ink-900); }
.denied-text { margin: 0 auto 22px; max-width: 420px; color: var(--dsmk-ink-600); font-size: .875rem; line-height: 1.55; }
.denied-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.denied-atajos { margin-top: 28px; padding-top: 20px; border-top: 1px solid #e2e8f0; }
.denied-atajos-lbl { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--dsmk-ink-500); margin-bottom: 10px; }
.denied-atajos-list { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.denied-atajo { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #f3f6fa; color: var(--dsmk-ink-800); font-size: .8125rem; font-weight: 500; text-decoration: none; transition: background .15s, color .15s; }
.denied-atajo:hover { background: var(--dsmk-brand-50, #eef4ff); color: var(--dsmk-brand-700, #1857c9); }
.denied-atajo .material-symbols-rounded { font-size: 1.05rem; }
@media (max-width: 600px) { .denied { margin: 16px auto; padding: 28px 18px 22px; } }

/* Ventana emergente (<dialog class="dlg">): cabecera fija + cuerpo con scroll. */
.dlg { border: 0; border-radius: 12px; padding: 0; width: min(760px, 94vw); max-height: 82vh; box-shadow: 0 20px 50px rgba(15, 23, 42, .25); }
.dlg::backdrop { background: rgba(15, 23, 42, .45); }
.dlg[open] { display: flex; flex-direction: column; }
.dlg-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #e2e8f0; }
.dlg-head h3 { white-space: nowrap; }
.dlg-head .fld-in { flex: 1; min-width: 0; }
.dlg-body { overflow-y: auto; padding: 8px 18px 16px; }
.dlg-body table.t td { vertical-align: middle; }
.dlg-body .actions { white-space: nowrap; text-align: right; }

/* Vista previa de un formulario (embed.php). */
.ff-preview { border: 1px dashed #cbd5e1; border-radius: 8px; padding: 12px; background: #f8fafc; }
.ff-preview iframe { display: block; width: 100%; border: 0; background: #fff; border-radius: 6px; }
table.t.ff-campos td { vertical-align: middle; padding-top: 5px; padding-bottom: 5px; }
/* Columnas: Campo (ancho) · Tipo · Oblig. · Opciones · acciones. */
table.t.ff-campos th:nth-child(1) { width: 38%; }
table.t.ff-campos th:nth-child(2) { width: 15%; }
table.t.ff-campos .fld-in { padding: 7px 9px; font-size: .8125rem; }
table.t.ff-campos textarea.fld-in { min-height: 34px; }
table.t.ff-campos textarea.fld-in:not(:disabled) { min-height: 64px; }   /* listas: se ven ~3 opciones */
table.t.ff-campos textarea.fld-in:disabled { opacity: .35; cursor: not-allowed; }
.ff-col-req { width: 1%; text-align: center; }
.ff-col-x { width: 1%; }
.ff-acceso, .roles-check { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ff-acceso label, .roles-check label { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: #f3f6fa; cursor: pointer; min-width: 0; }
.ff-acceso label:has(input:checked), .roles-check label:has(input:checked) { background: var(--dsmk-brand-50); }
.ff-acceso b, .roles-check b { display: block; font-size: .8125rem; font-weight: 600; }
.ff-acceso small { display: block; font-size: .7188rem; color: var(--dsmk-ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Roles en la ficha de usuario: tarjeta con nombre y qué permite (texto completo, en varias líneas). */
.roles-check { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.roles-check label { align-items: flex-start; padding: 10px 12px; }
.roles-check input { margin-top: 3px; }
.roles-check small { display: block; font-size: .7188rem; color: var(--dsmk-ink-500); line-height: 1.4; margin-top: 2px; }
@media (max-width: 900px) { .ff-cols { grid-template-columns: 1fr; } }

/* Celdas marcadas .mono dentro de tablas (fechas, slugs, IDs): misma letra que el resto, números alineados. */
table.t .mono, table.dsmk-table .mono { font-family: var(--dsmk-font-body); font-variant-numeric: tabular-nums; }

/* Listado de eventos, celda Evento: línea 2 = globos de persona(s), país y fecha (bajan de línea si no entran); recursos en negrita. */
.evento-persona-fecha { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* Variantes de globo: país (verde azulado), fecha (gris), estado del evento (azul). */
.resp-chip--pais { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
.resp-chip--fecha { background: var(--dsmk-ink-50); color: var(--dsmk-ink-600); border-color: var(--dsmk-ink-200); }
.resp-chip--estado { background: #eef4ff; color: #1e40af; border-color: #c7d7fe; }
.resp-chip--cliente { background: #f5f3ff; color: #5b21b6; border-color: #ddd6fe; }
.resp-chip--link { background: #fff; color: var(--dsmk-ink-900); border-color: var(--dsmk-ink-300); font-weight: 600; text-decoration: none; }
.resp-chip--link:hover { border-color: var(--dsmk-brand-600); color: var(--dsmk-brand-700); text-decoration: none; }
.evento-recursos { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

.evento-opps { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }

/* Listado de eventos en celular: cada evento es una tarjeta (sin scroll horizontal).
   Fila: casilla + ID + evento; debajo Gestión (selectores de a dos) y los botones. */
@media (max-width: 760px) {
  table.ev-table, table.ev-table tbody { display: block; width: 100%; }
  table.ev-table thead { display: none; }
  table.ev-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; padding: 12px; border-bottom: 1px solid var(--dsmk-ink-100); }
  table.ev-table td { display: block; padding: 0 !important; border: 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; }
  /* Fila 1: casilla + ID. Debajo, todo a lo ancho y alineado a la izquierda. */
  table.ev-table td.evento-cell, table.ev-table td.ev-col-acciones, table.ev-table td.col-actions { grid-column: 1 / -1; }
  table.ev-table .ev-col-acciones .ev-stack { flex-wrap: wrap; }
  table.ev-table .ev-col-acciones .ev-stack-item { flex: 1 1 calc(50% - 6px); }
  table.ev-table td.col-actions { text-align: left; }
}
/* Más aire entre eventos (se veían muy pegados). */
@media (min-width: 761px) { table.ev-table tbody td { padding-top: 22px; padding-bottom: 22px; } }
@media (max-width: 760px) { table.ev-table tr { padding: 22px 12px; } }
/* Filas intercaladas en el listado de eventos (fondo alterno muy suave; el hover sigue marcando la fila). */
table.ev-table tbody tr:nth-child(even) td { background: #f6f8fb; }
table.ev-table tbody tr:hover td { background: #eef3f9; }
@media (max-width: 760px) { table.ev-table tbody tr:nth-child(even) { background: #f6f8fb; } }
/* Gestión: Financiamiento al final de la fila (Use case · Estado · Mkt Estado · Financiamiento). */
.ev-col-acciones .ev-stack-item.mdf-inline { order: 9; }

/* Filas intercaladas genéricas (.t-zebra), p. ej. Agenda. */
table.t-zebra tbody tr:nth-child(even) td { background: #f6f8fb; }
table.t-zebra tbody tr:hover td { background: #eef3f9; }

/* Pestañas compactas tipo segmento (junto al título), con contador. Ej.: Agenda. */
.seg-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--dsmk-ink-100); border-radius: 999px; flex-wrap: wrap; }
.seg-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .8125rem; color: var(--dsmk-ink-600); text-decoration: none; white-space: nowrap; }
.seg-tabs a span { font-size: .7188rem; color: var(--dsmk-ink-500); }
.seg-tabs a:hover { color: var(--dsmk-ink-900); text-decoration: none; }
.seg-tabs a.active { background: #fff; color: var(--dsmk-ink-900); font-weight: 600; box-shadow: 0 1px 2px rgba(11,18,32,.08); }

/* Filtros compactos (muchos filtros sin etiqueta): se reparten parejo y bajan de línea si no entran. Ej.: Eventos. */
.filters.filters--compact { gap: 8px; }
.filters.filters--compact .form-row { flex: 1 1 105px; width: auto; min-width: 0; }
.filters.filters--compact .form-row.w-grow { flex: 1.6 1 170px; }
.filters.filters--compact .form-row.filtros-acciones { flex: 0 0 auto; min-width: 0; }
.filters.filters--compact .form-row select, .filters.filters--compact .form-row .ss-wrap { width: 100%; min-width: 0; max-width: none; }

/* /tareas/: columna Actividad = descripción + una línea por responsable (estado + avance de sus subtareas). */
.resp-lineas { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.resp-linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.resp-linea-det { font-size: .75rem; color: var(--dsmk-ink-500); }
.tarea-desc + .resp-lineas { margin-top: 8px; }
.col-tar-desc .resp-lineas:first-child { margin-top: 0; }
/* /tareas/: más aire entre filas (como el listado de eventos). */
table.t.t-tareas tbody td { padding-top: 18px; padding-bottom: 18px; }
table.t.t-tareas .tarea-desc { line-height: 1.5; }

/* Tarea: "Color en calendario" con muestra del color real (mismo hex que usa el calendario). */
.tarea-color-pick { display: flex; align-items: center; gap: 8px; }
.tarea-color-swatch { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 6px; border: 1px solid rgba(0,0,0,.15); }
.tarea-color-pick select { flex: 1 1 auto; min-width: 0; }

/* Calendario: globo con fondo oscuro (p. ej. tarea en rojo) → texto blanco. */
.cal-ev.cal-ev--oscuro, .cal-ev.cal-ev--oscuro:hover { color: #fff; border-color: rgba(0,0,0,.15); }

/* Línea separadora en el menú lateral (antes de ítems marcados con 'sep', p. ej. Planificación Macro). */
.sidebar-sep { height: 1px; background: var(--sb-line, rgba(255,255,255,.10)); margin: 8px 12px; }
@media (max-width: 900px) { .sidebar-sep { width: 1px; height: 22px; margin: 0 4px; align-self: center; } }

/* /eventos/: al final de cada mes, oportunidades Approved sin ligar con el caso de uso de un evento del mes. */
.mes-opps { border-top: 1px solid var(--card-border); background: #fbfcfe; padding: 12px 14px 14px; border-radius: 0 0 var(--dsmk-r-md) var(--dsmk-r-md); }
.mes-opps-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: .8438rem; }
.mes-opps-n { font-size: .75rem; color: var(--dsmk-ink-500); }
.mes-opps-hint { font-size: .75rem; color: var(--dsmk-ink-500); }
table.t.mes-opps-t { background: #fff; }
table.t.mes-opps-t td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }
.mes-opps-fecha, .mes-opps-proy { font-size: .75rem; color: var(--dsmk-ink-500); }
.mes-opps-stage { font-size: .75rem; color: var(--dsmk-ink-600); }
.mes-opps-ligar { width: 1%; white-space: nowrap; }
.mes-opps-form { display: flex; align-items: center; gap: 6px; margin: 0; }
.mes-opps-form select { max-width: 240px; padding: 6px 8px; border: 1px solid var(--dsmk-ink-300); border-radius: var(--dsmk-r-md); font: inherit; font-size: .7812rem; background: #fff; }
.mkt-mes-block table.t + .mes-opps { margin-top: 0; }

/* /eventos/: pestañas Eventos | Opps dentro de cada mes. */
.mes-tabs { display: flex; gap: 4px; padding: 8px 14px 0; border-bottom: 1px solid var(--dsmk-ink-200); background: #fff; }
.mes-tab { appearance: none; border: 0; background: transparent; padding: 8px 12px; font: inherit; font-size: .8125rem; color: var(--dsmk-ink-600); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.mes-tab span { font-size: .7188rem; color: var(--dsmk-ink-500); margin-left: 2px; }
.mes-tab:hover { color: var(--dsmk-ink-900); }
.mes-tab.is-active { color: var(--dsmk-ink-900); font-weight: 600; border-bottom-color: var(--dsmk-brand-600); }
.mes-panel[hidden] { display: none; }
.mes-panel .mes-opps { border-top: 0; }

/* Editor de formulario: banner superior (vista previa + selector de archivo). */
.ff-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ff-banner-prev { display: block; width: 320px; max-width: 100%; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--card-border); }
.ff-banner-ctrl { display: flex; flex-direction: column; gap: 6px; flex: 1 1 260px; min-width: 0; }

/* Editor de formulario: acciones por fila (mover al inicio / subir / bajar / quitar). */
.ff-row-acc { display: flex; gap: 4px; justify-content: flex-end; }
.ff-row-acc .btn-icon-only .material-symbols-rounded { font-size: 1rem; }
table.t.ff-campos tr.ff-row-movida td { background: var(--dsmk-brand-50, #eef4ff); transition: background .6s; }