/* niza/static/tokens.css
 * Design tokens de Niza — estilo Stripe financiero: DM Sans (headings) + Inter (body),
 * navy + dorado + crema. Sin serif, sin monospace.
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* === Primitivos (paleta premium) === */
  --color-deep: #0A1628;       /* navy profundo — autoridad */
  --color-ocre: #C9A84C;       /* dorado — premium financiero */
  --color-accent-soft: #F5EDD6; /* dorado suave — fondos/hover */
  --color-stone: #F8F7F4;      /* crema — fondo general (no gris frío) */
  --color-card: #FFFFFF;

  --color-success: #1A6B3C;
  --color-danger: #991B1B;
  --color-warning: #B45309;
  --color-info: #3D5A7A;

  --color-ink: #1A1A2E;
  --color-muted: #6B6B7B;
  --color-line: #E8E4DC;

  /* === Semánticos === */
  --bg-app: var(--color-stone);
  --bg-card: var(--color-card);
  --bg-header: var(--color-deep);
  --bg-sidebar: var(--color-deep);

  --text-primary: var(--color-ink);
  --text-secondary: var(--color-muted);
  --text-on-deep: var(--color-stone);
  --text-accent: var(--color-deep);
  --text-link: var(--color-info);

  --border-default: var(--color-line);
  --border-strong: var(--color-muted);
  --border-deep: var(--color-deep);

  --state-success-bg: #D1FAE5;
  --state-success-fg: var(--color-success);
  --state-danger-bg: #FEE2E2;
  --state-danger-fg: var(--color-danger);
  --state-warning-bg: #FEF3C7;
  --state-warning-fg: var(--color-warning);

  --accent-primary: var(--color-ocre);
  --accent-soft: var(--color-accent-soft);

  /* Alias de compatibilidad. Hojas y estilos en línea escritos en otro momento piden
     estos nombres; sin definirlos, `var()` no resuelve y la declaración COMPLETA se cae
     (no hay error visible: simplemente no hay borde, ni padding, ni color atenuado).
     Apuntan al token real para que no exista una segunda paleta por la puerta de atrás. */
  --color-text-muted: var(--text-secondary);
  --color-border: var(--border-default);
  --color-accent: var(--accent-primary);
  --surface: var(--bg-card);
  --bg-surface: var(--bg-card);

  /* === Tipografía (Stripe: DM Sans headings + Inter body) === */
  --font-sans: 'Inter', -apple-system, system-ui, sans-serif;     /* body, UI, sidebar, tablas */
  --font-heading: 'DM Sans', 'Inter', sans-serif;                 /* títulos, KPI, montos */
  --font-num: 'DM Sans', 'Inter', sans-serif;                     /* números con tabular-nums */
  --font-mono: 'DM Sans', 'Inter', sans-serif;                    /* compat: ya no es mono */

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* === Espaciado (base 4) === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* === Elevación === */
  --shadow-sm: 0 1px 2px rgba(15, 44, 68, 0.04);
  --shadow-md: 0 2px 6px rgba(15, 44, 68, 0.06);
  --shadow-lg: 0 6px 16px rgba(15, 44, 68, 0.08);

  /* === Radios === */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

/* Reset y defaults globales */

body {
  margin: 0;
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Números financieros: DM Sans con cifras tabulares (alinean en columnas sin romper la
   coherencia visual). NO monospace. */
.numeric-cell,
.amount,
.rfc,
.folio,
.date-cell {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Componentes core de Niza */

.niza-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  /* Un correo o una CLABE son una sola palabra larguísima: sin esto fijan el ancho
     mínimo de la tarjeta y la sacan del margen en vez de partirse. */
  overflow-wrap: break-word;
}

.niza-button-primary {
  background-color: var(--color-deep);
  color: var(--text-on-deep);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.niza-button-primary:hover {
  background-color: #1A3D58; /* deep ligeramente más claro */
}

.niza-button-secondary {
  background-color: transparent;
  color: var(--color-deep);
  border: 1px solid var(--color-deep);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

/* Descarga a CSV: discreto a propósito. Es una salida de datos, no un paso del flujo —
   compite con el botón primario si se le da peso, y quien viene a operar acaba exportando. */
.niza-button-descarga {
  background: none;
  border: none;
  color: var(--color-muted, #6B7B8C);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
}

.niza-button-descarga:hover {
  color: var(--color-deep);
  text-decoration: underline;
}

/* Renglón de botones de descarga (Excel + CSV lado a lado). Ya se usaba sin definir. */
.niza-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.niza-badge-success {
  background-color: var(--state-success-bg);
  color: var(--state-success-fg);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

.niza-badge-danger {
  background-color: var(--state-danger-bg);
  color: var(--state-danger-fg);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

/* Sidebar */

.niza-sidebar {
  background: linear-gradient(180deg, #0A1628 0%, #0D1F3C 100%);
  color: var(--text-on-deep);
  font-family: var(--font-sans);
  padding: var(--space-6) var(--space-4);
  width: 240px;
  flex: 0 0 auto;
  /* El menú y el módulo se desplazan cada uno por su lado: el menú se queda fijo a la
     altura de la ventana con su propio scroll, y al llegar a su final no arrastra al
     módulo (overscroll-behavior). El módulo sigue desplazándose con la página, así que
     lo que depende del scroll de la ventana (anclas, recorrido, desplegables) no cambia. */
  position: sticky;
  top: 0;
  align-self: flex-start;
  box-sizing: border-box;   /* el relleno va dentro de los 100vh */
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Imagotipo (mismo asset que la web pública) como marca por defecto del sidebar cuando
   el tenant no sube su propio logo; ver niza/app/ui/layout.py. */
.niza-logo {
  display: block;
  height: 26px;
  width: auto;
  padding: 0 var(--space-4) var(--space-4) var(--space-4);
}

.niza-sidebar .nav-item {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  display: block;
  margin-bottom: 2px;
  border-left: 3px solid transparent;
}

.niza-sidebar .nav-item:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.95);
}

.niza-sidebar .nav-item.active {
  color: #FFFFFF;
  font-weight: 500;
  border-left: 3px solid var(--accent-primary);
  background-color: rgba(201, 168, 76, 0.15);
}

/* Métricas destacadas en dashboard (donde vive el ocre) */

.niza-metric-hero {
  font-family: var(--font-heading);
  font-size: 36px;                 /* KPI secundarios */
  font-weight: 700;
  color: var(--color-deep);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.1;
}
.niza-metric-hero--grande { font-size: 40px; }   /* Captación, Margen (más importantes) */
.niza-metric-hero--danger { color: var(--color-danger); }

.niza-metric-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.niza-metric-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* KPI card: línea dorada arriba (premium) en vez de la línea decorativa interna */
.niza-kpi {
  border-top: 3px solid var(--accent-primary);
  box-shadow: 0 1px 3px rgba(10, 22, 40, 0.06);
}
.niza-kpi--danger { border-top-color: var(--color-danger); }

/* === Utilitarias y layout (solo composición de tokens; sin hex nuevo) === */

.niza-layout { display: flex; min-height: 100vh; max-width: 100%; }
.niza-content {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  padding: var(--space-8);
  background-color: var(--bg-app);
}

/* Vistas que se dibujan como página suelta (avisos, tableros por rol) reusan la clase y
   acaban ANIDADAS dentro del shell: sin esto pagan el padding dos veces y quedan más
   metidas que el resto de los módulos. */
.niza-content .niza-content { padding: 0; min-height: 0; }

/* La barra superior es una franja, no un bloque más de la página: se saca del padding
   de `.niza-content` para que su línea inferior llegue de extremo a extremo y su
   contenido quede alineado con el título del módulo, no 2rem más adentro. */
.niza-topbar-wrap {
  margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) var(--space-6);
}

.niza-topbar {
  background-color: var(--color-card);
  color: var(--color-ink);
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-4) var(--space-8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.niza-topbar-banner {
  background: var(--color-danger);
  color: var(--color-card);
  padding: var(--space-2) var(--space-8);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
}

.niza-page-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-accent);
  margin: 0 0 var(--space-4) 0;
}

.niza-section-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-accent);
  border-bottom: 1px solid var(--accent-primary);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Saludo del dashboard (Inter) */
.niza-greeting { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 500;
  color: var(--color-deep); margin-top: -0.25rem; }
.niza-greeting-date { color: var(--text-secondary); font-size: var(--text-sm);
  margin: 0 0 var(--space-6) 0; }

.niza-metric-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

.niza-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}

/* Un hijo de grid trae `min-width:auto`: NO se encoge por debajo del ancho de su
   contenido, así que una tabla ancha dentro de una tarjeta estiraba la columna (y con
   ella la página). `min-width:0` deja que el contenedor de scroll haga su trabajo. */
.niza-grid > *, .niza-grid-2 > *,
.niza-form-grid > *, .niza-check-grid > * { min-width: 0; }

/* Variante para bloques anchos (tablas de concentración): máx 2 por renglón. */
.niza-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-6);
}

/* El encabezado de área tiene que leerse como ETIQUETA, no como un ítem más: antes solo
   se distinguía por ser un poco más tenue y a simple vista competía con los enlaces de
   arriba. Más chico, más espaciado y con una línea que separa el bloque anterior. */
.niza-sidebar-group {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.34);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: var(--space-6) 0 var(--space-3) var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin-right: var(--space-4);
}

/* Tu área va primero y se marca discreta: es orientación, no jerarquía. Un acento
   demasiado fuerte convertiría el encabezado en un botón que nadie puede pulsar. */
.niza-sidebar-group--propia { color: rgba(255, 255, 255, 0.62); }

/* Franja «Inicio» (Dashboard, Mi día, Agentes): va SIN título porque no es un área del
   negocio. Solo reserva el espacio que ocuparía el encabezado, para que los tres accesos
   diarios no queden pegados al logo. La regla de abajo le pone una línea de separación
   al primer encabezado real que venga después. */
.niza-sidebar-inicio {
  height: var(--space-2);
}

.niza-sidebar-inicio ~ .niza-sidebar-group:first-of-type {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.niza-badge-warning {
  background-color: var(--state-warning-bg);
  color: var(--state-warning-fg);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

/* Tablas de datos financieros */
/* El scroll horizontal de las tablas financieras vive AQUÍ, no en la tabla. Una <table>
   con width:100% no baja de su ancho mínimo de contenido: con 7-8 columnas (Cobranza,
   Constancias) ensanchaba la página completa. El wrapper la contiene; `max-width:100%`
   más `min-width:0` evitan que un hijo de grid/flex se estire con su contenido. */
.niza-tabla-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; }

/* Mismo criterio para las tablas de Dash (`tabla_datos`): el `overflowX` va en el
   contenedor de la hoja, pero el envoltorio externo crecía con las columnas. */
.dash-table-container { max-width: 100%; min-width: 0; overflow-x: auto; }
.dash-table-container .dash-spreadsheet-container { max-width: 100%; }
table.financial-data { width: 100%; border-collapse: collapse; }

.financial-data th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.financial-data td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.financial-data td.numeric-cell { text-align: right; }
/* Exposición cambiaria por renglón. El color nunca es la única señal: el signo del número
   también lo dice. */
.financial-data tr.fila-fx-perdida td { background-color: var(--state-danger-bg); }
.financial-data tr.fila-fx-umbral td { background-color: var(--state-warning-bg); }
.financial-data tr.fila-fx-holgada td { background-color: var(--state-success-bg); }

/* D183 · Tabla de amortización: muchas columnas. Ninguna celda se parte en dos renglones (una
   fecha partida no se lee) y la columna Estado se queda fija a la derecha mientras la tabla
   se desplaza a lo ancho, para que el estado de cada renglón nunca quede fuera de la vista. */
.niza-tam .financial-data th,
.niza-tam .financial-data td { white-space: nowrap; padding: var(--space-2) var(--space-3); }
.niza-tam .financial-data th:last-child,
.niza-tam .financial-data td:last-child {
  position: sticky; right: 0; z-index: 1;
  background-color: var(--bg-card);
  box-shadow: -1px 0 0 var(--border-default);
}

/* Inputs de formulario */
.niza-input {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: normal;            /* centrado vertical nativo del <input> (no recorta) */
  height: 2.6rem;
  box-sizing: border-box;
  color: var(--text-primary);
  background-color: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  width: 100%;
  max-width: 480px;
  margin: var(--space-2) 0 var(--space-4) 0;
}

.niza-input:focus { outline: none; border-color: var(--border-deep); }

/* Dash 4: `dcc.Input` es un contenedor (que recibe `.niza-input` y el ancho) con el <input>
   real adentro, que trae un ancho fijo de 220px. Sin esto, todo valor largo salía cortado
   aunque la caja se viera ancha (la liga del portal del fondeador: «http://…/for»). */
.niza-input.dash-input-container { display: flex; align-items: center; }
.niza-input .dash-input-element {
  flex: 1 1 auto; min-width: 0; width: auto; height: 100%;
  border: none; background: transparent; color: inherit; font: inherit; padding: 0;
}
.niza-input .dash-input-element:focus { outline: none; }
/* Los +/− de los campos numéricos no se veían antes de esta regla: se quedan ocultos. */
.niza-input .dash-input-stepper { display: none; }
.niza-input:focus-within { border-color: var(--border-deep); }

/* Texto secundario y selector de tipo de pago (cotizador) */
.niza-subtle {
  color: var(--text-secondary);
  margin: var(--space-2) 0 var(--space-4) 0;
}

.niza-radio label {
  display: block;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

/* Pestañas del cotizador (módulos/herramientas diferenciados) */
.niza-tabs { margin-bottom: var(--space-4); border-bottom: 2px solid var(--border-default); }
.niza-tab {
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  padding: var(--space-3) var(--space-5) !important;
  font-weight: var(--font-weight-medium);
  font-family: var(--font-sans);
  border-bottom: 2px solid transparent !important;
}
.niza-tab--sel {
  color: var(--color-deep) !important;
  border-bottom: 2px solid var(--accent-primary) !important;
  background: transparent !important;
  font-weight: 700;
}
/* Calendario de cobro (Cobranza, D182). El estado se lee por la FORMA de la marca
   (círculo, rombo, triángulo) y el color la refuerza: nunca solo el color. */
.cal-nav { display: flex; justify-content: space-between; gap: var(--space-2);
  margin-bottom: var(--space-3); }
.cal-atrasados { display: block; width: 100%; text-align: left; font: inherit;
  color: var(--text-primary); background: var(--state-danger-bg, var(--bg-card));
  border: 1px solid var(--color-danger); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); cursor: pointer; }
.cal-atrasados:hover, .cal-atrasados:focus-visible { box-shadow: inset 0 0 0 1px var(--color-danger); }
.cal-atrasados--cero { cursor: default; border-color: var(--border-default);
  background: var(--bg-card); color: var(--text-secondary); }
.cal-leyenda { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-3); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1); }
.cal-cabecera { font-size: var(--text-xs); color: var(--text-secondary); text-align: center;
  text-transform: uppercase; letter-spacing: .04em; padding: var(--space-1) 0; }
.cal-dia { min-height: 4.75rem; min-width: 0; padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-card); display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; text-align: left; font: inherit; color: var(--text-primary); overflow: hidden; }
.cal-dia--fuera { border-color: transparent; background: transparent; }
.cal-dia--sin { color: var(--text-secondary); }
.cal-dia--con { cursor: pointer; }
.cal-dia--con:hover, .cal-dia--con:focus-visible { border-color: var(--accent-primary); }
.cal-dia--hoy { box-shadow: inset 0 0 0 2px var(--accent-primary); }
.cal-num { font-size: var(--text-xs); font-weight: 700; }
.cal-monto { font-weight: 600; font-variant-numeric: tabular-nums; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-cuotas { font-size: var(--text-xs); color: var(--text-secondary); }
.cal-marcas { display: flex; flex-wrap: wrap; gap: 2px var(--space-1); margin-top: auto; }
.cal-marca { font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.cal-marca--vence { color: var(--color-success); }
.cal-marca--promesa { color: var(--color-warning); }
.cal-marca--vencido { color: var(--color-danger); }
/* Renovaciones (D186): cuatro estados, cada uno con su forma (■ ● ◆ ▲). */
.cal-marca--retiro { color: var(--color-warning); }
.cal-marca--decidir { color: var(--accent-primary); }
.cal-marca--auto { color: var(--color-success); }
.cal-marca--seguimiento { color: var(--accent-primary); }
/* D199 · Tablero por empresa: nueve columnas en una pantalla de 1440 sin desplazar a lo ancho. */
.sep-tablero .financial-data th,
.sep-tablero .financial-data td { padding: var(--space-3) var(--space-2); }
@media (max-width: 640px) {
  .cal-dia { min-height: 3.5rem; padding: 2px; }
  .cal-monto, .cal-cuotas { font-size: 0.65rem; }
}

/* Vista previa de tasa en vivo */
.niza-preview {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  align-items: baseline; padding: var(--space-3) var(--space-4);
  background: var(--color-stone); border-radius: var(--radius-md);
  border-left: 3px solid var(--accent-primary); margin: var(--space-2) 0 var(--space-4) 0;
  font-variant-numeric: tabular-nums;
}
.niza-preview .pv-num { font-size: 1.15rem; font-weight: 700; color: var(--color-deep); }
.niza-preview .pv-lbl { font-size: var(--text-xs); color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .04em; }
.niza-hint { color: var(--text-secondary); font-size: var(--text-sm); margin: 0 0 var(--space-3) 0; }
/* D227 · Ayuda (?) junto a un campo o un título: la explicación sale del cursor, no de la pantalla. */
.niza-ayuda { display: inline-flex; align-items: center; justify-content: center; width: 1.1em;
  height: 1.1em; margin-left: .35em; border-radius: 50%; border: 1px solid var(--text-secondary);
  color: var(--text-secondary); font-size: .75em; font-weight: 600; cursor: help;
  vertical-align: middle; }
.niza-ayuda:focus { outline: 2px solid var(--accent-primary); outline-offset: 1px; }
.niza-aviso { display: block; margin: 0 0 var(--space-3) 0; }

/* Grilla de formularios (wizards) — varias columnas como SYSCAP */
.niza-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-2) var(--space-6);
  margin-bottom: var(--space-4);
}

/* Ritmo vertical del formulario. `dcc.Input` lo traía en `.niza-input` y `dcc.Dropdown`
   no, así que en una misma fila unos campos caían más abajo que otros y el pie del
   bloque quedaba dentado (se ve en Empleados, que mezcla los dos en la misma grilla).
   La etiqueta, además, es un <label> (inline) y su `margin-bottom` no aplicaba. */
.niza-form-grid label { display: block; margin-bottom: var(--space-1); }
.niza-form-grid .dash-dropdown {
  margin: var(--space-2) 0 var(--space-4) 0;
  max-width: 480px;
}
/* Configuración: sub-navegación vertical con dcc.Tabs (cambio client-side, sin callback) */
.niza-cfg-tabs { display: flex !important; gap: var(--space-6); align-items: flex-start; }
.niza-cfg-tablist { width: 232px; flex: 0 0 232px; border: none !important; }
.niza-cfg-tab {
  text-align: left; background: transparent !important; border: none !important;
  font-family: var(--font-sans); font-size: 14px; color: var(--text-secondary) !important;
  padding: 10px 14px !important; border-radius: 8px; border-left: 3px solid transparent !important;
  transition: all .12s ease;
}
.niza-cfg-tab:hover { background: var(--accent-soft) !important; color: var(--text-primary) !important; }
.niza-cfg-tab--sel {
  background: var(--color-stone) !important; color: var(--color-deep) !important; font-weight: 500;
  border-left-color: var(--accent-primary) !important;
}
.niza-cfg-tabs .niza-cfg-panel { flex: 1; min-width: 0; }

/* Configuración: sub-navegación vertical (estilo Stripe/SYSCAP) — versión anterior (botones) */
.niza-cfg-layout { display: grid; grid-template-columns: 232px 1fr; gap: var(--space-6); align-items: start; }
.niza-cfg-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--space-4); }
.niza-cfg-navitem {
  text-align: left; background: transparent; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 14px; font-weight: 400; color: var(--text-secondary);
  padding: 10px 14px; border-radius: 8px; border-left: 3px solid transparent; transition: all .12s ease;
}
.niza-cfg-navitem:hover { background: var(--accent-soft); color: var(--text-primary); }
.niza-cfg-navitem.active {
  background: var(--color-stone); color: var(--color-deep); font-weight: 500;
  border-left-color: var(--accent-primary);
}
.niza-cfg-panel { min-width: 0; }
/* Checklist de módulos en grilla */
.niza-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 18px; }
.niza-check-item { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans);
  font-size: 13px; color: var(--text-primary); cursor: pointer; }
.niza-check-item input { accent-color: var(--accent-primary); }
@media (max-width: 760px) { .niza-cfg-layout { grid-template-columns: 1fr; }
  .niza-cfg-nav { flex-direction: row; flex-wrap: wrap; position: static; } }

.niza-card-sub { border: 1px solid var(--color-line); border-radius: 8px; padding: var(--space-3);
  background: var(--color-stone); }
.niza-btn-danger { color: var(--color-danger); border-color: var(--state-danger-bg); }
.niza-btn-danger:hover { background: var(--state-danger-bg); }

.niza-wizard-steps { display: flex; gap: var(--space-6); flex-wrap: wrap;
  border-bottom: 2px solid var(--border-default); margin-bottom: var(--space-6); }
.niza-step { color: var(--text-secondary); padding-bottom: var(--space-2);
  border-bottom: 2px solid transparent; font-weight: var(--font-weight-medium); }
.niza-step--done { color: var(--color-success); }
.niza-step--active { color: var(--color-deep); border-bottom-color: var(--accent-primary); font-weight: 700; }

/* Badge neutral + chips etiquetados (qué es cada cosa) */
.niza-badge-neutral {
  background-color: var(--color-stone); color: var(--color-muted);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: var(--font-weight-medium);
}
.niza-chip { display: inline-flex; flex-direction: column; gap: 2px; }
.niza-chip-lbl {
  font-size: 0.65rem; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--font-weight-medium);
}

/* Eco con formato de moneda bajo el input (se ve $ y comas al escribir) */
.niza-input-fmt {
  display: block; margin: -0.75rem 0 var(--space-4) 0;
  font-size: var(--text-sm); font-weight: 700; color: var(--color-deep);
  font-variant-numeric: tabular-nums; min-height: 1rem;
}

/* Topbar (fondo blanco): nombre de org en DM Sans 700, usuario secundario */
.niza-topbar-org { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
  color: var(--color-deep); }
.niza-topbar-user { color: var(--text-secondary); font-size: var(--text-sm); }
.niza-topbar-select { color: var(--color-ink); }

/* Hover dorado suave + cursor en filas de tablas accionables */
.financial-data tbody tr:hover { background-color: var(--accent-soft); cursor: pointer; }

/* Días al vencimiento por urgencia */
.dias-urgente { color: var(--color-danger); font-weight: 600; }
.dias-medio { color: var(--color-warning); }
.dias-ok { color: var(--text-secondary); }

/* Subtítulo de sección (bajo el título de tarjeta) */
.niza-section-sub { font-family: var(--font-sans); font-size: 12px; font-weight: 400;
  color: var(--text-secondary); margin: -0.5rem 0 var(--space-4) 0; }

/* Badges con borde sutil (semántica de color consistente) */
.niza-badge-success, .niza-badge-warning, .niza-badge-danger, .niza-badge-neutral {
  border: 1px solid currentColor; font-weight: 600;
}

/* ── Stepper de localización (etapa actual de un pagaré) ── */
.niza-step-status {
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.niza-step-status--muted { color: var(--text-secondary); }
.niza-stepper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}
.niza-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.niza-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1.5px solid var(--border-strong);
  color: var(--text-secondary);
  background: var(--surface);
  flex-shrink: 0;
}
.niza-step-label { font-size: 0.82rem; color: var(--text-secondary); white-space: nowrap; }
.niza-step-line {
  flex: 1 1 1.5rem;
  min-width: 1rem;
  height: 2px;
  background: var(--border-strong);
  opacity: 0.4;
}
.niza-step-line--hecho { background: var(--state-success-fg); opacity: 1; }
.niza-step--hecho .niza-step-dot {
  background: var(--state-success-bg);
  border-color: var(--state-success-fg);
  color: var(--state-success-fg);
}
.niza-step--hecho .niza-step-label { color: var(--text-primary); }
.niza-step--actual .niza-step-dot {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--text-on-deep);
}
.niza-step--actual .niza-step-label { color: var(--text-primary); font-weight: 600; }

/* ── Pedir ayuda (D177): botón flotante con un formulario corto ── */
.niza-ayuda { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 1100; }
.niza-ayuda-boton {
  list-style: none; cursor: pointer; padding: var(--space-3) var(--space-4);
  background: var(--accent-primary); color: var(--text-on-deep); font-weight: 600;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); user-select: none;
}
.niza-ayuda-boton::-webkit-details-marker { display: none; }
.niza-ayuda[open] .niza-ayuda-boton { filter: brightness(0.92); }
.niza-ayuda-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--space-3)); width: 22rem; max-width: 86vw;
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4);
  background: var(--surface, #fff); border: 1px solid var(--border-subtle, #d9d3c4);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.niza-ayuda-titulo { font-weight: 600; color: var(--text-primary); }
.niza-ayuda-urgente { font-size: 0.85rem; color: var(--text-secondary, #5b6672); }
.niza-ayuda-resultado { font-size: 0.85rem; }

/* ── Llenado automático DEMO (aid de pruebas; sólo con NIZA_DEMO_FILL=1) ── */
.niza-demo-fab {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 1200;
  padding: var(--space-3) var(--space-4);
  background: var(--accent-primary);
  color: var(--text-on-deep);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-weight: 600;
  cursor: pointer;
}
.niza-demo-fab:hover { filter: brightness(0.95); }

.niza-demo-toast {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-16);
  z-index: 1200;
  max-width: 22rem;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-header);
  color: var(--text-on-deep);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.niza-demo-toast.visible { opacity: 1; transform: translateY(0); }

/* ── Checklist de arranque (dashboard) ─────────────────────────────────────────
   Solo se pinta mientras la organización no termina de configurarse. El paso que
   toca AHORA se destaca; los ya listos se atenúan pero no se ocultan, para que se
   vea el avance y no solo lo que falta. */
.niza-arranque-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-2);
}
.niza-arranque-titulo { font-weight: 600; font-size: 1.05rem; }
.niza-arranque-conteo {
  font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.niza-arranque-sig {
  font-size: 13px; color: var(--color-text-muted);
  border-left: 3px solid var(--color-accent, #B8860B);
  padding: 2px 0 2px var(--space-3); margin-bottom: var(--space-4);
}
.niza-pasos { display: flex; flex-direction: column; gap: 2px; }
.niza-paso {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3); border-radius: 8px;
}
.niza-paso--ahora { background: var(--state-warning-bg, #FCF3E2); }
.niza-paso--listo { opacity: .55; }
.niza-paso-marca { font-size: 15px; line-height: 1.4; flex: 0 0 auto; width: 16px; }
.niza-check-ok { color: var(--state-success-fg, #1B7F4F); font-weight: 700; }
.niza-check-pend { color: var(--color-text-muted); }
.niza-paso-cuerpo { flex: 1 1 auto; min-width: 0; }
.niza-paso-titulo { font-weight: 600; font-size: 13.5px; }
.niza-paso-detalle { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.45; }
.niza-paso-porque {
  font-size: 12px; color: var(--color-text-muted); font-style: italic; margin-top: 2px;
}
.niza-paso-ir {
  flex: 0 0 auto; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  text-decoration: none; color: var(--color-accent, #B8860B); align-self: center;
}

/* D211 · Mi día: «Ir» es lo que se hace en esta pantalla, así que se ve como botón, y los
   números de arriba se tocan (bajan a su sección). */
.mi-dia-ir {
  display: inline-block; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  text-decoration: none; color: var(--color-deep); border: 1px solid var(--color-deep);
  border-radius: var(--radius-md); padding: 3px 12px;
}
.mi-dia-ir:hover { background-color: var(--color-deep); color: var(--text-on-deep); }
.mi-dia-ir { background: transparent; cursor: pointer; font-family: var(--font-sans); }
.mi-dia-ir--suave { border-color: var(--border-default); color: var(--color-text-muted); }
.mi-dia-avance { margin: .25rem 0 1rem; }

/* D213 · Historia del cliente: una línea de tiempo, lo más reciente arriba. */
.hist-linea { border-left: 2px solid var(--border-default); margin-left: .35rem; }
.hist-evento { display: flex; gap: 1rem; padding: .55rem 0 .55rem 1rem; position: relative; }
.hist-evento::before {
  content: ""; position: absolute; left: -6px; top: .95rem; width: 10px; height: 10px;
  border-radius: 50%; background-color: var(--accent-primary);
}
.hist-fecha { flex: 0 0 9.5rem; font-size: 12.5px; color: var(--color-text-muted); padding-top: 2px; }
.hist-cuerpo { flex: 1 1 auto; min-width: 0; }
.hist-titulo { font-weight: 600; font-size: 13.5px; }
.hist-quien { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.hist-paso { display: flex; align-items: center; gap: .5rem; padding: .4rem 0;
  border-bottom: 1px solid var(--border-default); }
@media (max-width: 640px) { .hist-evento { flex-direction: column; gap: .2rem; } .hist-fecha { flex: none; } }
.mi-dia-riel {
  height: 10px; border-radius: 6px; overflow: hidden; margin-top: .4rem;
  background-color: var(--border-default);
}
.mi-dia-riel-lleno { height: 10px; background-color: var(--accent-primary); }
.mi-dia-kpi > div { height: 100%; transition: transform .12s ease, box-shadow .12s ease; }
.mi-dia-kpi:hover > div { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
html { scroll-behavior: smooth; }

/* ── «Tu rol en 5 minutos» ─────────────────────────────────────────────────────
   La ficha del puesto dentro del portal. Se lee una vez el primer día y rara vez
   después, así que prioriza claridad sobre densidad. */
.niza-rol-nombre { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.niza-rol-lema {
  font-size: 1rem; color: var(--color-text-muted); margin-top: .15rem;
}
.niza-rol-cadena {
  display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1rem;
  padding-top: .9rem; border-top: 1px solid var(--color-border, #E2DED4);
}
.niza-rol-cadena-item { font-size: 13px; }
.niza-rol-eti { color: var(--color-text-muted); }
.niza-rol-pasos { margin: 0; padding-left: 1.2rem; }
.niza-rol-pasos li { margin-bottom: .55rem; line-height: 1.55; }
.niza-rol-auto { line-height: 1.6; margin: 0 0 .4rem; }
.niza-rol-atajos { display: flex; flex-wrap: wrap; gap: .5rem; }
.niza-rol-atajo {
  display: inline-block; padding: .45rem .85rem; border-radius: 8px;
  border: 1px solid var(--color-border, #E2DED4); text-decoration: none;
  font-size: 13px; font-weight: 600; color: inherit; background: #fff;
}
.niza-rol-atajo:hover { background: #F4F1EA; }

/* ── Centro de ayuda (manual dentro del portal) ────────────────────────────── */
.niza-ayuda-lista { display: flex; flex-direction: column; }
.niza-ayuda-item {
  padding: .7rem 0; border-bottom: 1px solid var(--color-border, #E2DED4);
}
.niza-ayuda-item:last-child { border-bottom: none; }
.niza-ayuda-titulo {
  font-weight: 600; font-size: 14px; text-decoration: none; color: inherit;
}
.niza-ayuda-titulo:hover { text-decoration: underline; }
.niza-ayuda-resumen {
  font-size: 12.5px; color: var(--color-text-muted); line-height: 1.45; margin-top: .15rem;
}
.niza-md { line-height: 1.65; }
.niza-md h1 { font-size: 1.5rem; margin: 0 0 .8rem; }
.niza-md h2 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; }
.niza-md h3 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
.niza-md table { border-collapse: collapse; width: 100%; font-size: 13px; margin: .8rem 0; }
.niza-md th, .niza-md td {
  border: 1px solid var(--color-border, #E2DED4); padding: .45rem .6rem; text-align: left;
}
.niza-md blockquote {
  margin: .8rem 0; padding: .5rem .9rem; border-left: 3px solid var(--color-accent, #B8860B);
  background: rgba(184,134,11,.06);
}
.niza-md code { background: #EDE9DF; padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }

/* ── Termómetro de utilización de línea (components.barra_uso) ────────────────
   El color codifica holgura, no decora: verde con margen, ámbar al 75% (la señal
   para hablar de un aumento ANTES de chocar con el techo) y rojo pasando el 90%,
   donde la siguiente disposición probablemente se rechace. */
.niza-barra-uso { margin: .25rem 0 .5rem; }
.niza-barra-encabezado {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  margin-bottom: .45rem;
}
.niza-barra-monto {
  font-family: var(--font-num); font-size: 1.35rem; font-weight: 600;
  color: var(--color-deep); line-height: 1.2;
}
.niza-barra-riel {
  position: relative; height: 14px; border-radius: 999px; overflow: hidden;
  background: var(--color-accent-soft);
  border: 1px solid var(--color-line);
}
.niza-barra-relleno {
  height: 100%; border-radius: 999px;
  /* La transición hace legible el CAMBIO cuando el usuario dispone y la barra crece. */
  transition: width .45s ease-out, background-color .3s ease;
  background: var(--color-deep);
}
.niza-barra--medio .niza-barra-relleno { background: var(--color-warning); }
.niza-barra--alto  .niza-barra-relleno { background: var(--color-danger); }
.niza-barra-pie {
  display: flex; justify-content: space-between; gap: 1rem; margin-top: .4rem;
  font-size: .82rem;
}
.niza-barra-pct { font-family: var(--font-num); font-weight: 600; color: var(--color-deep); }
.niza-barra-pct--medio { color: var(--color-warning); }
.niza-barra-pct--alto  { color: var(--color-danger); }
.niza-barra-resto { color: var(--color-muted); font-family: var(--font-num); }
.niza-barra-cifras {
  font-family: var(--font-num); font-size: 1.2rem; font-weight: 600; color: var(--color-deep);
}

/* Aviso de lo que el PRODUCTO impone en este flujo (plazo, banda, comisión): la
   configuración tiene que verse donde se opera, no solo donde se captura. */
.niza-regla-producto {
  background: var(--color-accent-soft); border-left: 3px solid var(--color-ocre);
  padding: .55rem .75rem; border-radius: 4px; margin-bottom: .75rem;
  font-size: .85rem; color: var(--color-ink);
}
.niza-regla-producto strong { color: var(--color-deep); }

/* D203 · Panel único «Registrar pago». La casilla de cada concepto es el monto con su
   palomita: se marca lo que el cliente pagó, y en el celular la casilla es grande. */
.rp-panel .niza-card { margin-bottom: var(--space-3); }
.rp-modos { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3); }
.rp-modos label { display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; }
.rp-atajos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-3); }
.rp-total { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-cuadricula td { vertical-align: middle; }
.rp-casilla label { display: inline-flex; align-items: center; justify-content: flex-end;
  gap: var(--space-1); cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-casilla input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--accent-primary); }
.rp-celda-vacia { color: var(--text-secondary); font-size: var(--text-xs); }
.rp-acciones { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.rp-upload { border: 1px dashed var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-3); text-align: center; cursor: pointer; background: var(--color-stone); }
.rp-faltante { display: block; margin-top: var(--space-2); white-space: normal; }
.fila-revertida td { opacity: .55; }
@media (max-width: 640px) {
  .rp-total { margin-left: 0; width: 100%; }
  .rp-casilla input[type="checkbox"] { width: 1.35rem; height: 1.35rem; }
}
/* El panel vive dentro de otra tarjeta: sin esto, dos rellenos de 24px más el mínimo de
   220px de la rejilla desbordan los KPI en un celular. */
.rp-panel .niza-card { padding: var(--space-4); }
.rp-panel .niza-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
@media (max-width: 640px) {
  .niza-card .rp-panel { margin: 0 calc(-1 * var(--space-3)); }
  .rp-panel .niza-card { padding: var(--space-3); }
  .rp-panel .niza-metric-hero, .rp-panel .niza-metric-hero--grande { font-size: 26px; }
}
.rp-panel .niza-badge-success, .rp-panel .niza-badge-danger,
.rp-panel .niza-badge-warning { display: inline-block; white-space: normal; line-height: 1.4; }
.cal-marca--excepcion { color: var(--accent-primary); }

/* D203 · Fase 3: línea de tiempo de las disposiciones (una barra por disposición). La
   forma del borde distingue el estado además del color: punteado = con atraso. */
.linea-tiempo { margin-top: var(--space-2); }
.lt-pista { position: relative; display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4) 0 var(--space-2); border-top: 1px solid var(--border-default); }
.lt-hoy { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--accent-primary); }
.lt-hoy span { position: absolute; top: -2px; left: 4px; font-size: var(--text-xs);
  color: var(--accent-primary); font-weight: 700; }
.lt-barra { display: block; font: inherit; font-size: var(--text-xs); text-align: left;
  padding: 4px var(--space-2); border-radius: var(--radius-md); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  border: 1px solid var(--border-default); background: var(--bg-card); color: var(--text-primary); }
.lt-vig { background: var(--state-info-bg, var(--color-stone)); }
.lt-ven { border: 2px dashed var(--color-danger); }
.lt-liq { opacity: .55; }
.lt-sel { box-shadow: inset 0 0 0 2px var(--accent-primary); }
.lt-escala { display: flex; justify-content: space-between; font-size: var(--text-xs);
  color: var(--text-secondary); }
.fila-sel td { background: var(--state-info-bg, var(--color-stone)); }
/* Un estado corto («Con atraso») no se parte en dos renglones dentro de una tabla. */
.financial-data td > span[class^="niza-badge"] { white-space: nowrap; }
.cal-marca--recordatorio { color: var(--text-secondary); }
.rp-recordar { background: none; border: 0; padding: 0 var(--space-1); cursor: pointer;
  font-size: var(--text-xs); color: var(--accent-primary); text-decoration: underline;
  text-underline-offset: 2px; white-space: nowrap; }
.rp-recordar:hover { color: var(--text-primary); }

/* D203 · Fase 6: lotes de dispersión por fecha de pago */
.cal-marca--corte { color: var(--accent-primary); }
.cal-marca--extra { color: var(--color-warning, #b7791f); }
.cal-dia--sel { outline: 2px solid var(--accent-primary); outline-offset: -2px; }
.lt-nav { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
.lt-nav .niza-section-title { margin: 0; min-width: 10rem; text-align: center; }
.lt-avisos { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-2); }
.lt-aviso { text-align: left; white-space: normal; }
.lt-cabeza { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-1); }
.lt-form { margin: var(--space-2) 0; }
.lt-form summary { cursor: pointer; font-weight: 600; margin-bottom: var(--space-1); }
/* D203 · recordatorio junto a la cuota */
.rp-rec-caja { display: inline; }
.rp-rec-ok { color: var(--color-success, #15803d); font-size: var(--text-xs); margin-left: var(--space-1); }
.rp-rec-error { color: var(--color-danger, #b91c1c); font-size: var(--text-xs); margin-left: var(--space-1); }
.rp-rec-manual { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); align-items: center;
  margin-left: var(--space-1); font-size: var(--text-xs); }
.rp-rec-liga { border: 1px solid var(--accent-primary); border-radius: 999px; padding: 0 var(--space-2);
  color: var(--accent-primary); text-decoration: none; white-space: nowrap; }
.rp-rec-liga:hover { background: var(--accent-primary); color: var(--bg-primary, #fff); }
.lt-clabe { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.lt-clabe .niza-input { width: 11rem; }
.lt-aviso-clabe { display: block; white-space: normal; margin: var(--space-1) 0; }
.niza-button-primary:disabled, .niza-button-secondary:disabled { opacity: .45; cursor: not-allowed; }
.lt-sale-de { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-1); }

/* D217 · Banca de desarrollo: frase sin raya (la tarjeta ya trae una), campos con etiqueta,
   botones a su tamaño, acciones en el renglón y el tablero de Hoy. */
.bd-frase { font-weight: 600; color: var(--text-primary); margin: 0 0 var(--space-3) 0; }
.bd-campo { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.bd-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end;
  margin-top: var(--space-3); }
.bd-acciones > button { width: auto; flex: 0 0 auto; }
.bd-nowrap { white-space: nowrap; }
.bd-fila-acciones { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.bd-fila-acciones .mi-dia-ir:disabled { opacity: .45; cursor: not-allowed; }
.bd-panel { border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: var(--space-4); margin-top: var(--space-4); background: var(--bg-surface); }
.bd-orgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3); }
.bd-org { margin: 0; }
.bd-barra { height: 8px; border-radius: 4px; background: var(--color-line); overflow: hidden;
  margin: var(--space-2) 0; }
.bd-barra > div { height: 100%; background: var(--accent-primary); }
.bd-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3); }
.bd-bloque + .bd-bloque { margin-top: var(--space-5); }
.bd-sep { border: 0; border-top: 1px solid var(--border-default); margin: var(--space-5) 0; }
.bd-upload { border: 1px dashed var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-3); text-align: center; cursor: pointer; margin-top: var(--space-3); }
.bd-subtabs { margin-bottom: var(--space-3); }
.bd-solo-movil { display: none; }
.bd-campo-lista { display: grid; gap: var(--space-3); }
.bd-campo-tarjeta { margin: 0; }
.bd-campo-botones { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.bd-campo-botones > button { flex: 1 1 10rem; min-height: 44px; }
.bd-lote label { padding: var(--space-2) 0; border-bottom: 1px solid var(--border-default);
  align-items: baseline; }

/* D217 · En el celular: la tabla de visitas cede su lugar a tarjetas con botones de 44 px
   y los formularios van en una columna. */
@media (max-width: 760px) {
  .bd-solo-escritorio { display: none; }
  .bd-solo-movil { display: block; }
  .bd-panel .niza-form-grid { grid-template-columns: 1fr; }
  .bd-panel .bd-acciones > button { flex: 1 1 auto; min-height: 44px; }
  .bd-subtabs .niza-tab, .niza-tabs .niza-tab { padding-left: var(--space-2); padding-right: var(--space-2); }
}

/* En pantallas angostas el menú lateral se vuelve una barra arriba que se abre al tocarla
   (el menú recibe el foco). Antes ocupaba 240 px fijos y dejaba al módulo sin espacio. */
@media (max-width: 760px) {
  .niza-layout { flex-direction: column; }
  .niza-sidebar { width: 100%; height: auto; max-height: 56px; position: sticky; top: 0;
    z-index: 50; overflow: hidden; padding: var(--space-3) var(--space-4); cursor: pointer; }
  .niza-sidebar .niza-logo, .niza-sidebar img { max-height: 32px; padding: 0 !important; }
  /* Plegado se ve el módulo donde estás; el ☰ dice que se abre al tocarlo. */
  .niza-sidebar:not(:focus-within):not(:focus) .nav-item.active::after { content: "☰";
    float: right; }
  .niza-sidebar:focus-within, .niza-sidebar:focus { max-height: 80vh; overflow-y: auto; }
  .niza-content { padding-left: var(--space-4); padding-right: var(--space-4); }
  .niza-topbar-wrap { margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4)); }
  .niza-topbar { padding-left: var(--space-4); padding-right: var(--space-4); }
}
@media (max-width: 760px) {
  .bd-tabs-carril > .niza-tabs, .bd-tabs-carril .tab-container { overflow-x: auto;
    flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .bd-tabs-carril .niza-tab { flex: 0 0 auto; white-space: nowrap; }
}
/* D227 · Un dato por renglón, sin viñeta, donde antes había un párrafo. */
.niza-lista-datos { list-style: none; padding: 0; margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
.niza-lista-datos li { padding: .15rem 0; }

/* Mi libro · Mis clientes: renglón compacto, la ficha abierta enmarcada y su renglón marcado,
   y la vista previa de WhatsApp con el aspecto del chat. */
.pa-cli-quien { min-width: 15rem; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.pa-cli-quien > span { max-width: 100%; white-space: normal; }
tr.pa-cli-fila--abierta > td { background-color: var(--state-warning-bg, #FCF3E2); }
.pa-cli-ficha {
  scroll-margin-top: 1rem; margin-bottom: 1.5rem; padding: 1rem 1.25rem;
  background: var(--surface); border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent-primary); border-radius: var(--radius-lg);
}
.pa-cli-cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  flex-wrap: wrap; margin-bottom: .5rem;
}
.pa-cli-cabeza > div { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.pa-cli-wa-vista { margin-top: .75rem; }
.wa-chat {
  background: #EFEAE2; border-radius: var(--radius-md); padding: .75rem;
  display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem;
}
.wa-chat .niza-hint { color: #54656F; }
.wa-burbuja {
  align-self: flex-start; max-width: 30rem; white-space: pre-wrap; background: #FFFFFF;
  color: #111B21; font-size: 13.5px; line-height: 1.45; padding: .55rem .75rem;
  border-radius: 2px 8px 8px 8px; box-shadow: 0 1px 1px rgba(11, 20, 26, .13);
}
.pa-cli-wa-vista > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--color-deep); }
@media (max-width: 640px) { .pa-cli-ficha { padding: .75rem; scroll-margin-top: 4.5rem; } }