/* ============================================================
   TurboTubo — sistema de diseño (6 paletas)
   Por defecto: azul-claro. Cambia con [data-theme] en <html>.
   ============================================================ */

:root,
html[data-theme="azul-claro"] {
  --bg-page: #EEF4FB;
  --surface: #FFFFFF;
  --surface-alt: #DCEAF9;
  --surface-alt-hover: #CBE0F5;
  --border: #B9D3EC;
  --text: #12283F;
  --text-muted: #55738C;
  --accent: #1E6FBE;
  --accent-contrast: #FFFFFF;
  --accent-hover: #185C9E;
  /* campos de formulario: papel blanco con texto oscuro en TODAS las paletas */
  --field-bg: #FFFFFF;
  --field-text: #12283F;
  --field-border: #C7D8EA;
  --field-placeholder: #8199AF;
  --field-label: var(--text);
  --nav-bg: #FFFFFF;
  --nav-text: #12283F;
  --nav-text-muted: #55738C;
  --nav-active-bg: #CFE4F8;
  --danger: #C0392B;
  --danger-contrast: #FFFFFF;
  --danger-hover: #A5301F;
  --success: #1C7A4A;
  --success-contrast: #FFFFFF;
  --success-hover: #166139;
}

html[data-theme="azul-oscuro"] {
  --bg-page: #0E2038;
  --surface: #16324F;
  --surface-alt: #1C3E5F;
  --surface-alt-hover: #23507C;
  --border: rgba(255, 255, 255, 0.12);
  --text: #F3F8FD;
  --text-muted: #93AEC6;
  --accent: #4FA8F5;
  --accent-contrast: #0E2038;
  --accent-hover: #6FBBFB;
  /* en paleta oscura los campos siguen siendo papel claro: texto oscuro legible */
  --field-bg: #FFFFFF;
  --field-text: #12283F;
  --field-border: #B9CBDD;
  --field-placeholder: #7C93A8;
  --field-label: var(--text);
  --nav-bg: #163350;
  --nav-text: #F3F8FD;
  --nav-text-muted: #93AEC6;
  --nav-active-bg: #23507C;
  --danger: #E56B5A;
  --danger-contrast: #34120C;
  --danger-hover: #EF8B7C;
  --success: #6FCF97;
  --success-contrast: #0B2E1B;
  --success-hover: #8FE0AF;
}

html[data-theme="oliva-claro"] {
  --bg-page: #F1F2E6;
  --surface: #FFFFFF;
  --surface-alt: #E2E6D0;
  --surface-alt-hover: #D3D9BC;
  --border: #C7CFAE;
  --text: #2B3324;
  --text-muted: #5C644A;
  --accent: #5C7A2E;
  --accent-contrast: #FFFFFF;
  --accent-hover: #4A6424;
  --field-bg: #FFFFFF;
  --field-text: #2B3324;
  --field-border: #CFD6BB;
  --field-placeholder: #8A916F;
  --field-label: var(--text);
  --nav-bg: #FFFFFF;
  --nav-text: #2B3324;
  --nav-text-muted: #5C644A;
  --nav-active-bg: #D3D9BC;
  --danger: #B4442E;
  --danger-contrast: #FFFFFF;
  --danger-hover: #973824;
  --success: #4A6B1C;
  --success-contrast: #FFFFFF;
  --success-hover: #3C5717;
}

html[data-theme="oliva-oscuro"] {
  --bg-page: #262E1F;
  --surface: #313B27;
  --surface-alt: #3B472E;
  --surface-alt-hover: #4C5934;
  --border: rgba(255, 255, 255, 0.12);
  --text: #F5F6EA;
  --text-muted: #B3B89B;
  --accent: #AAC240;
  --accent-contrast: #262E1F;
  --accent-hover: #BFD766;
  --field-bg: #FFFFFF;
  --field-text: #2B3324;
  --field-border: #C2CBA4;
  --field-placeholder: #82895F;
  --field-label: var(--text);
  --nav-bg: #313B27;
  --nav-text: #F5F6EA;
  --nav-text-muted: #B3B89B;
  --nav-active-bg: #4C5934;
  --danger: #E08A6E;
  --danger-contrast: #34160C;
  --danger-hover: #EBA48C;
  --success: #A9D18E;
  --success-contrast: #17300C;
  --success-hover: #C2E0AC;
}

html[data-theme="rosado"] {
  --bg-page: #FBF0F2;
  --surface: #FFFFFF;
  --surface-alt: #F6DEE4;
  --surface-alt-hover: #F0CBD5;
  --border: #E8B9C6;
  --text: #3F1E28;
  --text-muted: #8C5C6A;
  --accent: #C2447A;
  --accent-contrast: #FFFFFF;
  --accent-hover: #A5335F;
  --field-bg: #FFFFFF;
  --field-text: #3F1E28;
  --field-border: #E3B7C4;
  --field-placeholder: #B98598;
  --field-label: var(--text);
  --nav-bg: #FFFFFF;
  --nav-text: #3F1E28;
  --nav-text-muted: #8C5C6A;
  --nav-active-bg: #F0CBD5;
  /* danger/success quedan semanticos (rojo/verde reales) aunque el acento sea rosado, para que
     un error o un exito nunca se confunda con el color de marca. */
  --danger: #B33A3A;
  --danger-contrast: #FFFFFF;
  --danger-hover: #96302F;
  --success: #21804C;
  --success-contrast: #FFFFFF;
  --success-hover: #186640;
}

html[data-theme="gris"] {
  --bg-page: #F2F2F2;
  --surface: #FFFFFF;
  --surface-alt: #E4E4E4;
  --surface-alt-hover: #D6D6D6;
  --border: #C7C7C7;
  --text: #1F1F1F;
  --text-muted: #6B6B6B;
  --accent: #2B2B2B;
  --accent-contrast: #FFFFFF;
  --accent-hover: #000000;
  --field-bg: #FFFFFF;
  --field-text: #1F1F1F;
  --field-border: #CCCCCC;
  --field-placeholder: #999999;
  --field-label: var(--text);
  --nav-bg: #FFFFFF;
  --nav-text: #1F1F1F;
  --nav-text-muted: #6B6B6B;
  --nav-active-bg: #DDDDDD;
  /* escala de grises a proposito hasta en el acento -- pero danger/success se dejan cromaticos:
     un estado de error/exito en gris puro es dificil de distinguir de un dato normal. */
  --danger: #C0392B;
  --danger-contrast: #FFFFFF;
  --danger-hover: #A5301F;
  --success: #1C7A4A;
  --success-contrast: #FFFFFF;
  --success-hover: #166139;
}

html[data-theme="rosado-oscuro"] {
  --bg-page: #2B1620;
  --surface: #3A1E2A;
  --surface-alt: #472634;
  --surface-alt-hover: #5A2F42;
  --border: rgba(255, 255, 255, 0.12);
  --text: #FBEEF2;
  --text-muted: #C79AA9;
  --accent: #E86A9C;
  --accent-contrast: #2B1620;
  --accent-hover: #F186B0;
  --field-bg: #FFFFFF;
  --field-text: #3F1E28;
  --field-border: #D8B7C2;
  --field-placeholder: #A5788A;
  --field-label: var(--text);
  --nav-bg: #3A1E2A;
  --nav-text: #FBEEF2;
  --nav-text-muted: #C79AA9;
  --nav-active-bg: #5A2F42;
  /* danger/success cromaticos ajustados a fondo oscuro (mismos que las otras paletas oscuras). */
  --danger: #E56B5A;
  --danger-contrast: #34120C;
  --danger-hover: #EF8B7C;
  --success: #6FCF97;
  --success-contrast: #0B2E1B;
  --success-hover: #8FE0AF;
}

html[data-theme="gris-oscuro"] {
  --bg-page: #1C1C1C;
  --surface: #262626;
  --surface-alt: #303030;
  --surface-alt-hover: #3D3D3D;
  --border: rgba(255, 255, 255, 0.12);
  --text: #F1F1F1;
  --text-muted: #A8A8A8;
  --accent: #E0E0E0;
  --accent-contrast: #1C1C1C;
  --accent-hover: #FFFFFF;
  --field-bg: #FFFFFF;
  --field-text: #1F1F1F;
  --field-border: #CCCCCC;
  --field-placeholder: #999999;
  --field-label: var(--text);
  --nav-bg: #262626;
  --nav-text: #F1F1F1;
  --nav-text-muted: #A8A8A8;
  --nav-active-bg: #3D3D3D;
  /* escala de grises hasta el acento, pero danger/success cromaticos (un error/exito en gris
     puro no se distingue de un dato normal). */
  --danger: #E56B5A;
  --danger-contrast: #34120C;
  --danger-hover: #EF8B7C;
  --success: #6FCF97;
  --success-contrast: #0B2E1B;
  --success-hover: #8FE0AF;
}

/* ---------------- base ---------------- */
html, body { height: 100%; }
body {
  background: var(--bg-page);
  color: var(--text);
  transition: background-color .15s ease, color .15s ease;
}
/* Footer siempre al fondo del viewport, aunque el contenido de la página sea corto. */
body.site-body { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

/* ---------------- top nav ---------------- */
.topnav {
  background: var(--nav-bg);
  color: var(--nav-text);
  border-bottom: 1px solid var(--border);
}
.nav-brand {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--accent);
  text-decoration: none;
}
.nav-link {
  color: var(--nav-text-muted);
  padding: .55rem 1rem;
  border-radius: .7rem;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  display: inline-block;
}
.nav-link:hover { background: var(--surface-alt-hover); color: var(--nav-text); }
.nav-link.is-active { background: var(--nav-active-bg); color: var(--accent); }

/* ---------------- buttons ---------------- */
:root {
  /* Una sola altura para todo control de una linea (boton, campo, medio-btn, resumen cerrado de
     un <details>) -- que un formulario se vea "parejo" depende de esto mas que de cualquier otra
     regla suelta. Cambiar este valor cambia la altura de TODO a la vez. */
  --field-height: 2.6rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .62rem 1.25rem;
  border-radius: .75rem;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.2;
  min-height: var(--field-height);
  box-sizing: border-box;
  align-self: center;          /* evita que se estiren dentro de filas flex (form + input) */
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--surface-alt); }
.btn-danger { background: var(--danger); color: var(--danger-contrast); }
.btn-danger:hover { background: var(--danger-hover); }
.btn-success { background: var(--success); color: var(--success-contrast); }
.btn-success:hover { background: var(--success-hover); }

/* ---------------- form fields ----------------
   Los campos de formulario son "papel": fondo claro con texto oscuro en las 4
   paletas, para que nunca queden letras claras sobre fondo blanco. Se distinguen
   a propósito del resto de las cajas (.card, nav) que sí siguen la paleta. */
input[type="text"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input:not([type]),
select,
textarea {
  background-color: var(--field-bg);
  color: var(--field-text);
  border: 1px solid var(--field-border);
  border-radius: .55rem;
  padding: .5rem .65rem;
  box-sizing: border-box;
  font-size: .9rem;
}
/* Misma altura que .btn/.medio-btn en TODO campo de una sola linea -- textarea queda afuera a
   proposito (necesita poder crecer verticalmente para el texto). */
input[type="text"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input:not([type]),
select {
  height: var(--field-height);
}
select option { color: var(--field-text); background-color: var(--field-bg); }
input::placeholder,
textarea::placeholder { color: var(--field-placeholder); opacity: 1; }
input[type="text"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input:not([type]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* labels: heredan el color de texto de la paleta (legibles sobre el fondo del form) */
label { color: var(--field-label); }

/* ---------------- input type=file ----------------
   El navegador arma un boton "Seleccionar archivo" nativo (gris de sistema, no toma la paleta)
   seguido del nombre del archivo. ::file-selector-button SI se puede estilizar (soportado en
   Chrome/Edge/Firefox/Safari modernos) sin recurrir a esconder el input real y fingir un boton
   con JS -- sigue siendo el input real, con su teclado/foco/lector de pantalla nativos. */
input[type="file"] {
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--field-placeholder);
  font-size: .85rem;
}
input[type="file"]::file-selector-button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: var(--field-height);
  margin-right: .75rem;
  padding: 0 1.1rem;
  border: 1px solid transparent;
  border-radius: .75rem;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  transition: background-color .15s ease;
}
input[type="file"]::file-selector-button:hover { background: var(--accent-hover); }
input[type="file"]::file-selector-button::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1'/%3E%3Cpath d='M9 15l3 -3l3 3'/%3E%3Cpath d='M12 12l0 9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1'/%3E%3Cpath d='M9 15l3 -3l3 3'/%3E%3Cpath d='M12 12l0 9'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ---------------- formularios largos (varios campos) ----------------
   Para form.as_p() con muchos campos (ej. Agregar cliente, Mi cuenta): cada <p> que Django
   genera pasa a ser una celda de grilla, en vez de apilarse en una sola columna angosta. */
.grid-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; }
.grid-form p { margin: 0 0 14px; }
.grid-form label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.grid-form .helptext { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.grid-form ul.errorlist { color: var(--danger); font-size: 12px; margin: 2px 0 4px; padding-left: 18px; }
/* A diferencia del resto de la app (donde los inputs se dejan angostos a proposito, ej. las
   barras de filtro en flex-row), un formulario largo en grilla si necesita que cada campo
   ocupe su celda completa. */
.grid-form input, .grid-form select, .grid-form textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 640px) {
  .grid-form { grid-template-columns: 1fr; }
}

/* ---------------- medio picker (multistep gestion) ---------------- */
.medio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--field-height);
  width: var(--field-height);   /* solo icono: cuadrado, mismo lado que el alto */
  padding: 0;
  border-radius: .75rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
}
.medio-btn:hover { background: var(--surface-alt); }
.medio-btn.is-selected {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}
/* WhatsApp sin numero activo: mismo tamano, pero necesita lugar para el triangulo de aviso al
   lado del logo -- unico caso que no es un cuadrado de un solo icono. */
.medio-btn.medio-btn-wide {
  width: auto;
  padding: 0 .85rem;
  gap: .3rem;
}

/* ---------------- selector de contacto (Telefono/Correo, multistep paso 2) ----------
   Boton + panel desplegable con las opciones (radio) de ese tipo -- reemplaza el <select> viejo
   de DemographicSelectionForm. El panel es ESTATICO (no position:absolute): al abrirse empuja
   el resto del formulario hacia abajo en vez de flotar encima -- con absolute, el panel abierto
   quedaba tapando el boton "Siguiente" (bug reportado), porque nada del flujo normal se movia
   para hacerle espacio. Mismo criterio que details.gestion-panel: expandir empuja, no flota. */
.contact-picker { position: relative; }
.contact-picker-btn:disabled { opacity: .5; cursor: not-allowed; }
.contact-picker-panel {
  display: none;
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 6px;
}
.contact-picker-panel.is-open { display: block; }
.contact-picker-option {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .6rem;
  border-radius: .5rem;
  font-size: 13px;
  cursor: pointer;
}
.contact-picker-option:hover { background: var(--surface-alt); }

/* ---------------- paneles desplegables del formulario de gestion (multistep, paso 2) ----------
   Cerrado, cada <details> debe verse como una caja mas de la fila (misma altura que un boton o
   un campo) -- abierto, se expande con su propio padding interno. Sin esto cada <summary> media
   su alto segun su padding fijo, y una fila de "cajas" con botones + inputs + estos paneles no
   queda pareja. */
details.gestion-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 0 1rem;
}
details.gestion-panel > summary {
  display: flex;
  align-items: center;
  min-height: var(--field-height);
  padding: 0;
  list-style: none;
}
details.gestion-panel > summary::-webkit-details-marker { display: none; }
details.gestion-panel > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: .5rem;
  color: var(--text-muted);
  font-size: .75rem;
  transition: transform .12s ease;
}
details.gestion-panel[open] > summary::before { transform: rotate(90deg); }
details.gestion-panel[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: .85rem; }
details.gestion-panel > .gestion-panel-body { padding-bottom: 1rem; }

/* ---------------- surfaces ---------------- */
.card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: .9rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 6px rgba(15, 23, 42, .04);
}
.card-selected {
  background: var(--nav-active-bg);
  border: 1px solid var(--accent);
  border-radius: .9rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 6px rgba(15, 23, 42, .04);
}
.list-head {
  background: var(--surface-alt);
  color: var(--text-muted);
  font-weight: 600;
}
/* Tarjetas lanzadoras por cartera (Pagos / Compromisos): cada una filtra la tabla al hacer clic. */
.launcher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.launcher-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .9rem;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s;
}
.launcher-card:hover { border-color: var(--accent); background: var(--surface-alt); }
.launcher-card.active { border-color: var(--accent); background: var(--nav-active-bg); }
.launcher-card .lc-nm { font-weight: 700; font-size: 13.5px; margin-bottom: 8px; }
.launcher-card .lc-amt { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.launcher-card .lc-ct { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
/* Encabezados de tabla siempre alineados a la izquierda (el <th> por defecto centra). */
.list-head th { text-align: left; }
.row-alt { background: var(--surface-alt); }
.site-footer { background: var(--surface-alt); color: var(--text-muted); }

/* ---------------- alerts / feedback ---------------- */
.alert {
  border-radius: .9rem;
  padding: .9rem 1.1rem;
}
.alert-info { background: var(--accent); color: var(--accent-contrast); }
.alert-danger {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}
.empty-state {
  background: var(--surface-alt);
  color: var(--text-muted);
  border-radius: .9rem;
  padding: 2rem;
  text-align: center;
}

/* ---------------- links ---------------- */
.link { color: var(--accent); text-decoration: none; font-weight: 600; }
.link:hover { color: var(--accent-hover); text-decoration: underline; }

/* ---------------- misc text ---------------- */
.text-success { color: var(--success); }
.field-error { color: var(--danger); font-size: .875rem; }
.muted { color: var(--text-muted); }

/* ---------------- theme switcher (bottom-left) ---------------- */
.theme-switcher {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px;
  border-radius: 999px;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.35);
}
/* Boton-icono de paleta: siempre visible. Al abrir, las opciones se despliegan a la derecha. */
.theme-toggle {
  width: 30px;
  height: 30px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}
.theme-toggle:hover { color: var(--accent); background: var(--surface-alt); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Contenedor de opciones: colapsado (ancho 0) hasta que se abre; se revela de izq a der. */
.theme-options {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width .28s ease, opacity .2s ease, margin-left .28s ease;
  margin-left: 0;
}
.theme-switcher.open .theme-options {
  max-width: 360px;   /* holgado para las 8 pastillas; el transition anima el reveal */
  opacity: 1;
  margin-left: 2px;
}
.theme-swatch {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--sw);
  cursor: pointer;
  padding: 0;
}
.theme-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-swatch[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
}

/* =====================================================================
   Clientes — estilo "Operativo denso" (Opción 2). Todo con tokens de la
   paleta activa (funciona en las 4). Los colores de status son semánticos
   y se adaptan al fondo con color-mix.
   ===================================================================== */
:root {
  --st-slate: #6b7a8a;
  --st-blue:  #2f7fd0;
  --st-teal:  #17a08a;
  --st-green: #2fa254;
  --st-amber: #cf8a1a;
  --st-red:   #d1503f;
  /* Amarillo fuerte, solo para el chip "Sin gestion este mes": el amber de arriba ya lo usa
     Inubicable y es mas apagado, asi que no se distinguirian entre si. */
  --st-yellow: #e6b800;
}

/* barra de chips por status */
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  padding: 6px 11px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--border); color: var(--text); cursor: pointer; text-decoration: none;
  white-space: nowrap;
}
.chip:hover { background: var(--surface-alt); }
.chip .c { font-variant-numeric: tabular-nums; font-weight: 800; }
.chip.active { border-color: var(--accent); background: var(--nav-active-bg); color: var(--accent); }
.chip.fav.active { border-color: #e0a91b; background: color-mix(in srgb, #e0a91b 16%, var(--surface)); color: #a5790a; }
.chip.alert.active { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); }

/* punto + etiqueta de status */
.dot-st { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.dot-st .d { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.st-slate { background: var(--st-slate); } .st-blue { background: var(--st-blue); }
.st-teal { background: var(--st-teal); } .st-green { background: var(--st-green); }
.st-amber { background: var(--st-amber); } .st-red { background: var(--st-red); }
.st-yellow { background: var(--st-yellow); }

/* "días desde última gestión" con urgencia */
.dias { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.dias.ok { color: var(--st-green); }
.dias.warn { color: var(--st-amber); }
.dias.late { color: var(--st-red); }
.dias.na { color: var(--text-muted); font-weight: 600; }

/* tabla densa con header pegajoso y ordenable */
.table-dense { width: 100%; border-collapse: collapse; font-size: 12.5px; }

/* Comentario de una gestion: se corta a un ancho fijo y sigue hacia ABAJO en vez de estirar la
   tabla hacia la derecha. Sin esto un comentario largo empujaba las columnas siguientes fuera de
   la pantalla y habia que hacer scroll horizontal para ver el resto de la gestion. */
.table-dense thead th {
  position: sticky; top: 0; z-index: 1; text-align: left; font-size: 11px; font-weight: 700;
  color: var(--text-muted); background: var(--surface-alt); padding: 9px 12px; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.table-dense thead th.sortable { cursor: pointer; user-select: none; }
.table-dense thead th.sortable:hover { color: var(--text); }
.table-dense thead th .ar { color: var(--accent); font-size: 10px; margin-left: 3px; }
.table-dense tbody td { padding: 7px 12px; border-bottom: 1px solid var(--surface-alt); white-space: nowrap; }
.table-dense tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-alt) 55%, transparent); }
.table-dense tbody tr:hover td { background: var(--nav-active-bg); }
.table-dense .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Comentario de una gestion: ancho fijo y el texto se acumula hacia ABAJO en vez de estirar la
   tabla. Va DESPUES de las reglas de celda a proposito -- "thead th" y "tbody td" traen
   white-space:nowrap, y a igual especificidad gana la ultima regla. */
.table-dense tbody td.comentario-celda,
.table-dense thead th.comentario-celda {
  width: 340px;
  min-width: 340px;
  max-width: 340px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
}

.table-dense .op { font-weight: 700; }

/* Gestion que genero un compromiso de pago: fila en verde claro + la fecha comprometida bajo la
   fecha de la gestion. Es la fila que el cobrador busca cuando revisa un historial largo.

   Va sobre --success (que cada tema redefine) y no sobre un verde fijo, para que el resaltado
   siga siendo suave en los temas oscuros en vez de un bloque saturado.

   La especificidad (tbody tr.X td) tiene que ganarle al rayado alterno de
   "tbody tr:nth-child(even) td", que si no tapa el verde en las filas pares. El hover se
   redefine aparte por lo mismo: sin esto, pasar el mouse borraba el resaltado. */
.table-dense tbody tr.fila-compromiso td {
  background: color-mix(in srgb, var(--success) 13%, var(--surface));
}
.table-dense tbody tr.fila-compromiso:hover td {
  background: color-mix(in srgb, var(--success) 22%, var(--surface));
}

/* La fecha del compromiso bajo la fecha de la gestion. Deliberadamente en dos lineas y no en una
   columna nueva: la tabla ya tiene 8 columnas y agregar otra la empujaba fuera de la pantalla.
   Como solo algunas filas la traen, se reserva el alto siempre (ver .fecha-celda) para que las
   filas con y sin compromiso midan lo mismo y la tabla no quede dispareja. */
.table-dense .fecha-celda { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.table-dense .fecha-celda .fc-compromiso {
  display: block; margin-top: 2px; font-size: 10.5px; font-weight: 700;
  color: var(--success); letter-spacing: .2px;
}
/* Fila fantasma: ocupa el mismo alto que .fc-compromiso en las gestiones que no crearon uno,
   asi todas las filas quedan parejas sin pintar nada. */
.table-dense .fecha-celda .fc-vacio { display: block; margin-top: 2px; font-size: 10.5px; height: 1em; }

/* estrella de favorito */
.fav-star {
  background: none; border: 0; cursor: pointer; font-size: 16px; line-height: 1; padding: 2px;
  color: var(--text-muted); filter: grayscale(1); opacity: .55; transition: all .12s ease;
}
.fav-star:hover { opacity: 1; filter: none; }
.fav-star.is-fav { color: #e0a91b; filter: none; opacity: 1; }

/* punto de alerta: mismo mecanismo que la estrella de favorito, marca casos con gestion
   complicada. Independiente de favoritos -- un lead puede tener ambas marcas. */
.alert-dot {
  background: none; border: 0; cursor: pointer; font-size: 14px; line-height: 1; padding: 2px;
  color: var(--text-muted); opacity: .35; transition: all .12s ease;
}
.alert-dot:hover { opacity: .8; color: var(--danger); }
.alert-dot.is-alert { color: var(--danger); opacity: 1; }

/* acciones compactas */
.row-actions { display: inline-flex; gap: 2px; }
.row-actions a, .row-actions button {
  width: 28px; height: 28px; border-radius: 7px; border: 1px solid transparent; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer;
  text-decoration: none; color: var(--text-muted);
}
.row-actions a:hover, .row-actions button:hover { background: var(--surface-alt-hover); color: var(--text); }

/* paginación compacta */
.pag { display: inline-flex; gap: 4px; }
.pag a {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  border-radius: 7px; height: 32px; min-width: 34px; padding: 0 8px; font-weight: 600; font-size: 12.5px;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.pag a:hover { background: var(--surface-alt); }
.pag a.on { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.pag a.disabled { opacity: .4; cursor: default; pointer-events: none; }

/* =====================================================================
   Detalle de cliente — "ficha lateral fija" (Opción 2): izquierda deuda +
   info, derecha gestiones/notas/pagos en pestañas.
   ===================================================================== */
.detail-grid { display: grid; grid-template-columns: 320px 1fr auto; gap: 20px; align-items: start; }
@media (max-width: 860px) {
  .detail-grid { grid-template-columns: 1fr; }
  .action-rail { position: static; width: auto; }
}

.id-destacado {
  font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--accent); letter-spacing: -.01em; margin-bottom: 4px;
}

/* ---------------- riel de acciones (ficha de cliente) ----------------
   Columna a la derecha de la tarjeta de pestanas, sticky, separada de la tarjeta de identidad --
   las acciones (gestionar, pago, suspender, asignar, etc.) ya no compiten por espacio con los
   datos del cliente. Cada boton lleva icono + nombre (rail-btn-labeled), mismo --field-height
   que el resto de los controles de una linea para que quede parejo. */
.action-rail {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  width: 190px; flex: none;
  position: sticky; top: 16px;
}
.action-rail .rail-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--field-height); padding: 0;
  border-radius: .75rem; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  cursor: pointer; box-sizing: border-box; position: relative;
}
.action-rail .rail-btn.rail-btn-labeled {
  justify-content: flex-start; gap: .55rem; padding: 0 .9rem;
  font-weight: 600; font-size: 13px; text-align: left; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; width: 100%;
}
.action-rail .rail-btn:hover { background: var(--surface-alt); }
.action-rail .rail-btn.rail-btn-primary { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.action-rail .rail-btn.rail-btn-primary:hover { background: var(--accent-hover); }
.action-rail .rail-btn.rail-btn-danger { color: var(--danger); }
.action-rail .rail-btn.rail-btn-danger:hover { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.action-rail form { width: 100%; }
.action-rail .rail-sep { height: 1px; background: var(--border); margin: 4px 0; flex: none; }

/* Popover anclado a un rail-btn: oculto hasta que su boton lo activa (JS agrega .is-open). */
.rail-popover {
  display: none;
  position: fixed;
  z-index: 60;
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .9rem;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.35);
  padding: 14px;
}
.rail-popover.is-open { display: block; }
.rail-popover .rp-title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 8px; }
.debt-highlight {
  margin: 14px 0; padding: 12px; border-radius: 10px; text-align: center;
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
}
.debt-highlight .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.debt-highlight .amt { font-size: 26px; font-weight: 800; color: var(--danger); font-variant-numeric: tabular-nums; }

.kv-list .kv {
  display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
  border-bottom: 1px solid var(--surface-alt); font-size: 13px;
}
.kv-list .kv:last-child { border-bottom: 0; }
.kv-list .kv .k { color: var(--text-muted); }
.kv-list .kv .v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; flex-wrap: wrap; }
.tab-btn {
  padding: 9px 13px; font-size: 13px; font-weight: 600; color: var(--text-muted);
  border: 0; border-bottom: 2px solid transparent; cursor: pointer; background: none; font-family: inherit;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ---------------- descuentos ----------------
   Una oferta de descuento, como caja. Vive aqui y no dentro del modal porque se usa en DOS
   lugares: el modal "%" del listado de Clientes (core/partials/_descuentos_modal.html) y la
   pestaña Descuentos de la ficha -- si las reglas vivieran solo en el modal, la ficha las
   perderia. Mismo borde y radio que .gestion-panel, para que se lea como el resto de la app. */
.descuento-caja {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: .7rem .85rem;
}
.descuento-caja + .descuento-caja { margin-top: .5rem; }
.descuento-titulo {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: .3rem;
  display: flex; justify-content: space-between; gap: .6rem; align-items: baseline;
}
.descuento-texto { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.descuento-obs { font-size: 11.5px; color: var(--text-muted); margin-top: .3rem; }
.descuento-vence { font-weight: 600; white-space: nowrap; }

/* ---------------- colores de campaña de descuento ----------------
   Paleta DISTINTA de la de status (--st-*): el cobrador ve ambos en la misma fila, y un circulo
   verde de campaña se leeria como el status "Pagando". Ocho colores, uno por cada posicion de
   prioridad visible (CampanaDescuento.MAX_CIRCULOS), separables ademas con daltonismo rojo-verde. */
:root {
  --cmp-violeta: #7c4dbe;
  --cmp-fucsia:  #c2317f;
  --cmp-naranja: #e4701e;
  --cmp-lima:    #7fa629;
  --cmp-cian:    #1b9aaa;
  --cmp-indigo:  #3d4ea8;
  --cmp-cafe:    #8a5a3c;
  --cmp-grafito: #4a5560;
}

/* El punto de campaña. Mismo tamaño y forma que .dot-st .d para que la fila se lea pareja,
   pero con borde: el color "sin color" es el fondo mismo y sin borde seria invisible. */
.cmp-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  flex: none; border: 1px solid var(--border); box-sizing: border-box;
  background: var(--surface);   /* "sin color": circulo vacio, no ausencia de circulo */
  vertical-align: middle;
}
.cmp-violeta { background: var(--cmp-violeta); border-color: var(--cmp-violeta); }
.cmp-fucsia  { background: var(--cmp-fucsia);  border-color: var(--cmp-fucsia); }
.cmp-naranja { background: var(--cmp-naranja); border-color: var(--cmp-naranja); }
.cmp-lima    { background: var(--cmp-lima);    border-color: var(--cmp-lima); }
.cmp-cian    { background: var(--cmp-cian);    border-color: var(--cmp-cian); }
.cmp-indigo  { background: var(--cmp-indigo);  border-color: var(--cmp-indigo); }
.cmp-cafe    { background: var(--cmp-cafe);    border-color: var(--cmp-cafe); }
.cmp-grafito { background: var(--cmp-grafito); border-color: var(--cmp-grafito); }

/* Los puntos en la columna Acciones: en filas de hasta 4, y una fila nueva a partir del 5o
   (pedido del cliente) -- asi 8 campañas ocupan el alto de 2 iconos, no el ancho de 8. */
.cmp-dots {
  display: inline-grid; grid-template-columns: repeat(4, 9px); gap: 3px;
  vertical-align: middle; flex: none;
}

/* Opciones coloreadas del selector de color de campaña. Un <option> no admite marcado dentro
   (no se le puede meter el .cmp-dot), pero si acepta color de texto y de fondo: se pinta el
   nombre con el color de la campaña sobre un fondo tenue del mismo tono, asi el supervisor
   elige por color y no solo por nombre.
   Nota: Safari ignora estos estilos en <option> -- ahi se sigue viendo el nombre, que es
   suficiente (degradacion elegante, no un error). */
.sel-color option { font-weight: 600; }
.sel-color option[value="violeta"] { color: var(--cmp-violeta); background: color-mix(in srgb, var(--cmp-violeta) 12%, white); }
.sel-color option[value="fucsia"]  { color: var(--cmp-fucsia);  background: color-mix(in srgb, var(--cmp-fucsia) 12%, white); }
.sel-color option[value="naranja"] { color: var(--cmp-naranja); background: color-mix(in srgb, var(--cmp-naranja) 12%, white); }
.sel-color option[value="lima"]    { color: var(--cmp-lima);    background: color-mix(in srgb, var(--cmp-lima) 12%, white); }
.sel-color option[value="cian"]    { color: var(--cmp-cian);    background: color-mix(in srgb, var(--cmp-cian) 12%, white); }
.sel-color option[value="indigo"]  { color: var(--cmp-indigo);  background: color-mix(in srgb, var(--cmp-indigo) 12%, white); }
.sel-color option[value="cafe"]    { color: var(--cmp-cafe);    background: color-mix(in srgb, var(--cmp-cafe) 12%, white); }
.sel-color option[value="grafito"] { color: var(--cmp-grafito); background: color-mix(in srgb, var(--cmp-grafito) 12%, white); }

/* El punto que acompaña al selector: muestra el color ELEGIDO, que es lo que el <select>
   cerrado no alcanza a comunicar en todos los navegadores. Lo actualiza el script de abajo. */
.sel-color-wrap { display: inline-flex; align-items: center; gap: 7px; }