/* ============================================================
   BRAND JUNGLE SYSTEM — controles

   Botones, campos, tablas, badges, avisos y tarjetas, en clave oscura.
   Las clases .crm-* existían ya y las usan las páginas actuales: se
   conservan con el mismo nombre para que migrar una pantalla sea cambiar
   el layout, no reescribir su markup.

   Reglas duras del brandbook v3.0 que se respetan aquí:
   · botón de acción = fondo verde + texto --c-ink (8.5:1)
   · texto blanco sobre verde: prohibido (2.3:1)
   · sobre oscuro, el acento de texto es --c-litoria-hi, nunca --c-green
   ============================================================ */

/* ---------- Tarjeta ---------- */
.crm-card,
.bjs-panel {
  padding: clamp(1.125rem, 2.5vw, 1.5rem);
  border-radius: var(--radius-panel);
  border: 1px solid var(--sf-hair);
  background: var(--sf-plate);
}

/* El espaciado entre paneles lo reparte .bjs-stack / .bjs-grid. Ponerlo
   también aquí lo sumaba dos veces. */

.bjs-panel-label {
  margin-bottom: 0.875rem;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--tx-2);
}

.bjs-panel-foot {
  margin-top: 0.875rem;
  font-size: 0.6875rem;
  color: var(--tx-3);
}

/* Rejilla de paneles: se parten en dos cuando hay sitio, nunca antes. */
.bjs-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.bjs-stack { display: grid; gap: 1rem; }

/* Un hijo de rejilla mide, por defecto, lo que mide su contenido: sin esto
   una tabla ancha estira el panel y saca la barra de scroll a la página
   entera en vez de quedarse dentro de .bjs-scroll-x. */
.bjs-stack > *, .bjs-grid > * { min-width: 0; }

/* ---------- Títulos ---------- */
h1.crm-title,
h2.crm-subtitle,
.bjs-h {
  font-family: var(--f-ui);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tx-1);
}

h1.crm-title { font-size: 1.375rem; margin: 0 0 1.25rem; }
h2.crm-subtitle, .bjs-h { font-size: 1rem; margin: 0 0 0.875rem; }

.crm-muted, .bjs-muted { color: var(--tx-2); font-size: var(--fs-small); }

/* Sólo para lectores de pantalla: encabezados de columna sin texto visible
   y etiquetas de <select> que la columna ya explica. */
.bjs-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.bjs-lead { color: var(--tx-2); max-width: 62ch; }

/* ---------- Avisos ---------- */
.crm-flash {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: 10px;
  font-size: var(--fs-small);
}

.crm-flash.success {
  background: rgba(156, 176, 1, 0.14);
  border: 1px solid rgba(169, 220, 92, 0.42);
  color: var(--tx-1);
}

.crm-flash.error {
  background: var(--c-danger-bg);
  border: 1px solid rgba(255, 107, 74, 0.45);
  color: #ffd6cb;
}

/* ---------- Campos ---------- */
.crm-field { margin-bottom: 1rem; }

.crm-field label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--tx-3);
}

.crm-field input,
.crm-field select,
.crm-field textarea,
.bjs-select {
  width: 100%;
  padding: 0.625rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--sf-hair);
  background-color: rgba(6, 8, 1, 0.55);
  color: var(--tx-1);
  font-family: inherit;
  font-size: 0.9375rem;

}

/* Las opciones sí las pinta el sistema: en Windows y Linux heredan el fondo
   de la página y quedarían texto claro sobre claro. */
.bjs-select option {
  background: var(--sf-band-b);
  color: var(--tx-1);
}

.crm-field input::placeholder,
.crm-field textarea::placeholder { color: var(--tx-3); }

.crm-field input:hover,
.crm-field select:hover,
.crm-field textarea:hover,
.bjs-select:hover { border-color: var(--sf-hair-hi); }

/* Sólo los <select>: sin appearance:none el navegador dibuja su propio cromo
   claro y se come el fondo y el color, dejando una caja gris del sistema en
   mitad del panel oscuro. Al quitarlo hay que traer la flecha uno mismo.
   OJO: esto NO puede ir en el bloque de arriba, que lo comparte con
   .crm-field input y textarea — les saldría una flecha a los campos de texto. */
.crm-field select,
.bjs-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23a9dc5c'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.85rem;
}

/* El padding derecho deja sitio a la flecha; sin él el texto la pisa. */
.bjs-select { width: auto; padding: 0.4375rem 1.75rem 0.4375rem 0.625rem; font-size: var(--fs-small); }
.crm-field select { padding-right: 2rem; }

/* El select nativo hereda el fondo del sistema en su lista desplegable;
   forzar el color en las opciones evita texto blanco sobre blanco. */
.crm-field select option,
.bjs-select option { background: var(--sf-band-b); color: var(--tx-1); }

.crm-checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

.crm-checks label {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin: 0;
  font-size: var(--fs-small);
  text-transform: none;
  letter-spacing: normal;
  color: var(--tx-1);
}

.crm-checks input[type="checkbox"] { width: auto; accent-color: var(--c-green); }

/* ---------- Botones ---------- */
.crm-btn,
.bjs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  padding: 0.5625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  background: var(--grad-cta);
  color: var(--c-ink);
  box-shadow: var(--glow-cta);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) ease,
              border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.crm-btn:hover, .bjs-btn:hover { transform: translateY(-1px); background: var(--grad-cta-hover); }
.crm-btn:active, .bjs-btn:active { transform: translateY(0); }

.crm-btn.secondary,
.bjs-btn.secondary {
  background: transparent;
  border-color: var(--sf-hair);
  color: var(--tx-1);
  box-shadow: none;
}

.crm-btn.secondary:hover,
.bjs-btn.secondary:hover { background: var(--sf-plate-hi); border-color: var(--sf-hair-hi); }

.crm-btn.danger,
.bjs-btn.danger {
  background: transparent;
  border-color: rgba(255, 107, 74, 0.55);
  color: var(--c-danger);
  box-shadow: none;
}

.crm-btn.danger:hover,
.bjs-btn.danger:hover { background: var(--c-danger-bg); }

.bjs-btn.small { padding: 0.375rem 0.875rem; font-size: var(--fs-small); }

/* Chips de filtro: es un filtro, no una fila de llamadas a la acción. */
.bjs-chips { display: flex; flex-wrap: wrap; gap: 0.4375rem; }

.bjs-chip {
  padding: 0.3125rem 0.8125rem;
  border: 1px solid var(--sf-hair);
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: var(--fs-label);
  color: var(--tx-2);
  text-decoration: none;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.bjs-chip:hover { background: var(--nav-hover-bg); color: var(--tx-1); }

.bjs-chip.is-on {
  background: var(--nav-on-bg);
  border-color: var(--sf-hair-hi);
  color: var(--tx-1);
  font-weight: 600;
}

/* ---------- Tablas ---------- */
.crm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }

.crm-table th,
.crm-table td {
  padding: 0.6875rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--sf-hair);
}

.crm-table thead th {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--tx-3);
  white-space: nowrap;
}

.crm-table tbody tr:last-child td { border-bottom: none; }
.crm-table tbody tr:hover td { background: var(--sf-plate); }

/* Dentro de una tabla o de una lista de filas casi todo es enlace. Pintarlos
   todos de verde convierte la pantalla en un campo de minas: el color se
   reserva para el que tienes debajo del cursor. */
.crm-table a, .bjs-rows a {
  color: inherit;
  text-decoration-color: var(--sf-hair);
  text-underline-offset: 3px;
}

.crm-table a:hover, .bjs-rows a:hover { color: var(--c-litoria-hi); text-decoration-color: currentColor; }
.crm-table td { color: var(--tx-2); }
.crm-table td:first-child { color: var(--tx-1); font-weight: 600; }

/* Envoltura para tablas anchas: se desplaza la tabla, nunca la página. */
.bjs-scroll-x { overflow-x: auto; }
.bjs-scroll-x > .crm-table { min-width: 640px; }

/* Ficha clave/valor. Antes era una <table> sin thead haciendo de lista;
   una <dl> dice lo que es y colapsa mejor. */
.bjs-dl {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: 0 1.25rem;
  font-size: var(--fs-small);
}

.bjs-dl dt {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--sf-hair);
  font-size: 0.625rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--tx-3);
}

.bjs-dl dd {
  margin: 0;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--sf-hair);
  color: var(--tx-1);
  overflow-wrap: anywhere;
}

.bjs-dl dt:last-of-type, .bjs-dl dd:last-of-type { border-bottom: none; }

/* ---------- Badges de etapa ---------- */
.crm-badge {
  display: inline-block;
  padding: 0.1875rem 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.crm-badge.prospecto  { background: var(--sf-plate-hi); border-color: var(--sf-hair); color: var(--tx-2); }
.crm-badge.contactado { background: rgba(156, 176, 1, 0.16); border-color: rgba(169, 220, 92, 0.35); color: var(--c-litoria-hi); }
.crm-badge.propuesta  { background: rgba(220, 220, 98, 0.20); border-color: rgba(220, 220, 98, 0.45); color: var(--c-chartreuse); }
.crm-badge.contrato   { background: rgba(169, 220, 92, 0.32); border-color: var(--sf-hair-hi); color: var(--tx-1); }
.crm-badge.cliente    { background: var(--grad-cta); color: var(--c-ink); }
.crm-badge.perdido    { background: var(--c-danger-bg); border-color: rgba(255, 107, 74, 0.42); color: #ffb2a0; }

.crm-row-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.crm-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* si no, badge y select se estiran a todo el ancho de la celda */
  gap: 0.4375rem;
}
.crm-login { max-width: none; margin: 0; }

/* ---------- Adaptación ---------- */
@media (max-width: 719px) {
  /* La tabla se apila como fichas. Cada celda lleva su etiqueta en
     data-label; sin eso los valores quedarían huérfanos. */
  .crm-table.is-stacked thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .crm-table.is-stacked, .bjs-scroll-x > .crm-table.is-stacked { display: block; min-width: 0; }
  .crm-table.is-stacked tbody, .crm-table.is-stacked tr, .crm-table.is-stacked td { display: block; }

  .crm-table.is-stacked tr {
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--sf-hair);
  }

  .crm-table.is-stacked td {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 0.75rem;
    padding: 0.3125rem 0;
    border-bottom: none;
  }

  .crm-table.is-stacked td::before {
    content: attr(data-label);
    font-size: 0.625rem;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--tx-3);
  }

  /* Badge y boton son elementos de rejilla: sin esto se estiran a lo
     ancho de la columna y un badge de 90px acaba midiendo 340. */
  .crm-table.is-stacked td > * { justify-self: start; }
  .crm-table.is-stacked td:empty { display: none; }
  .bjs-dl { grid-template-columns: 1fr; gap: 0; }
  .bjs-dl dt { border-bottom: none; padding-bottom: 0; }
}

/* Dentro de una tabla, el dato secundario va en su propia línea: pegado al
   principal se lee como si fuera parte del mismo valor ("Ana Ruiz
   ana@cliente.test" parecía un solo campo). */
.crm-table td .crm-muted {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
}