/* ============================================================
   BRANDTROPIC SYSTEM — cascarón del panel (admin + portal)

   «Oscuro refinado»: noche tropical. Un negro con un fondo verde muy
   bajo, superficies sólidas por capas en vez de vidrio translúcido, y un
   solo acento —el degradado del logo— reservado para la acción y el
   estado activo. Los colores de estado (coral, ámbar, laguna) sólo
   aparecen cuando significan algo.

   Los tokens oscuros se declaran AQUÍ y no en tokens.css a propósito:
   tokens.css lo comparte la landing, que es clara.

   Tipografía: Space Grotesk para leer, Space Mono para etiquetar
   (eyebrows, cabeceras de tabla, fechas, contadores). Son de la misma
   fundidora y se entienden entre sí.

   Componentes en crm-ui.css, paneles de datos en crm-panels.css. Aquí
   solo va el chasis.
   ============================================================ */

:root {
  /* ---------- Superficies, de la más honda a la más alta ---------- */
  --bt-bg: #080a07;
  --bt-s1: #0e110c;
  --bt-s2: #13170f;
  --bt-s3: #1a1f15;
  --bt-s4: #22281c;

  /* Líneas: separadores (1), bordes de control (2), foco/activo (accent) */
  --bt-line: rgba(232, 240, 220, 0.08);
  --bt-line-2: rgba(232, 240, 220, 0.16);
  --bt-line-field: rgba(232, 240, 220, 0.30);
  --bt-line-accent: rgba(188, 217, 75, 0.50);

  /* ---------- Texto ---------- */
  --bt-tx-1: #f1f4ec;
  --bt-tx-2: #b4bba9;
  --bt-tx-3: #8a917f;

  /* ---------- Acento: el degradado del logo ---------- */
  --bt-lime: #dcdc62;
  --bt-accent: #bcd94b;
  --bt-green: #7fc24a;
  --bt-accent-soft: rgba(188, 217, 75, 0.13);
  --bt-accent-softer: rgba(188, 217, 75, 0.06);
  --bt-grad: linear-gradient(135deg, #dcdc62 0%, #bcd94b 46%, #7fc24a 100%);
  --bt-grad-hover: linear-gradient(135deg, #e6e678 0%, #c8e35a 46%, #8fd257 100%);
  --bt-on-accent: #0b0e05;

  /* ---------- Estados: sólo cuando significan algo ---------- */
  --bt-danger: #ff7a5c;
  --bt-danger-soft: rgba(255, 122, 92, 0.12);
  --bt-warn: #f5b94a;
  --bt-warn-soft: rgba(245, 185, 74, 0.12);
  --bt-info: #5ccfc4;
  --bt-info-soft: rgba(92, 207, 196, 0.12);
  --bt-ok: #7fc24a;
  --bt-ok-soft: rgba(127, 194, 74, 0.13);

  /* Las seis etapas del pipeline, de frío a caliente. Perdido es coral:
     salirse de la línea, no una etapa más. */
  --stage-prospecto: #9aa38e;
  --stage-contactado: #5ccfc4;
  --stage-propuesta: #f5b94a;
  --stage-contrato: #dcdc62;
  --stage-cliente: #7fc24a;
  --stage-perdido: #ff7a5c;

  /* ---------- Tipografía ---------- */
  --f-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-xs: 0.75rem;     /* 12px: el mínimo del panel */
  --fs-sm: 0.8125rem;   /* 13px */
  --fs-md: 0.9375rem;   /* 15px */
  --fs-lg: 1.125rem;    /* 18px */
  --fs-xl: 1.5rem;      /* 24px */
  --fs-2xl: 2.125rem;   /* 34px: cifras */
  --track-mono: 0.08em;

  /* ---------- Espacio, radios, sombras ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --sh-panel: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 1px 2px rgba(0, 0, 0, 0.35);
  --sh-float: 0 18px 48px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
  --sh-accent: 0 0 0 1px rgba(220, 220, 98, 0.28), 0 6px 20px rgba(127, 194, 74, 0.22);

  --bjs-side: 256px;
  --bjs-top: 68px;
  --bjs-main-max: 1280px;

  /* ---------- Alias de los nombres viejos ----------
     Las hojas de cada pantalla (tablero, resumen…) siguen hablando en
     --sf-* / --tx-* / --c-litoria*. Apuntan a la paleta nueva para que
     ninguna se quede con los colores de antes mientras se migran. */
  --sf-page: var(--bt-bg);
  --sf-band-a: var(--bt-s1);
  --sf-band-b: var(--bt-s2);
  --sf-plate: rgba(232, 240, 220, 0.035);
  --sf-plate-hi: rgba(232, 240, 220, 0.065);
  --sf-hair: rgba(232, 240, 220, 0.10);
  --sf-hair-hi: var(--bt-line-accent);
  --tx-1: var(--bt-tx-1);
  --tx-2: var(--bt-tx-2);
  --tx-3: var(--bt-tx-3);
  --c-litoria: var(--bt-green);
  --c-litoria-hi: var(--bt-accent);
  --grad-cta: var(--bt-grad);
  --grad-cta-hover: var(--bt-grad-hover);
  --glow-cta: var(--sh-accent);
  --nav-on-bg: var(--bt-accent-soft);
  --nav-hover-bg: rgba(232, 240, 220, 0.045);
  --c-danger: var(--bt-danger);
  --c-danger-bg: var(--bt-danger-soft);
  --radius-plate: var(--r-md);
  --radius-panel: var(--r-lg);

  color-scheme: dark;
}

* { box-sizing: border-box; }
* { margin: 0; }

html {
  background: var(--bt-bg);
  /* El destello gris que pintan iOS y Android al tocar algo con clic es la
     señal más clara de «esto es una web». Cada control tiene su :active. */
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

/* Sin la espera de 300 ms del doble toque: el clic sale al instante. */
button, a, summary, [role="button"], .bjs-chip { touch-action: manipulation; }

/* Mantener pulsado un control no debe seleccionar su texto. El contenido
   (títulos, notas) sigue siendo seleccionable. */
button, summary, [role="button"], .bjs-chip, .bjs-navlink {
  -webkit-user-select: none;
  user-select: none;
}

/* iOS hace zoom al enfocar un campo de menos de 16 px y no lo deshace. El
   arreglo es el tamaño, nunca bloquear el zoom. !important porque las
   reglas de cada campo (.crm-field input, .bjs-select…) son más específicas
   y en el escritorio sí deben medir menos. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]), textarea, select { font-size: 16px !important; }
}

body {
  min-height: 100dvh;
  font-family: var(--f-ui);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--bt-tx-1);
  background: var(--bt-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--bt-accent); }
ul, ol { padding: 0; }

:focus-visible { outline: 2px solid var(--bt-accent); outline-offset: 2px; }
::selection { background: var(--bt-lime); color: var(--bt-on-accent); }

/* Atmósfera: una luz lima arriba a la derecha y una laguna muy tenue abajo,
   más el grano del brandbook. Fijas al viewport: es luz de sala, no textura
   del documento. Detrás de todo y sin interceptar el puntero. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(720px circle at 92% -4%, rgba(220, 220, 98, 0.07) 0%, transparent 60%),
    radial-gradient(640px circle at 0% 104%, rgba(92, 207, 196, 0.045) 0%, transparent 62%);
}

body::after {
  opacity: 0.04;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Saltar al contenido: invisible hasta que el teclado llega a él. */
.bjs-skip {
  position: fixed;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--bt-grad);
  color: var(--bt-on-accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.bjs-skip:focus-visible { transform: none; }

/* ---------- Rejilla ---------- */
.bjs-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--bjs-side) minmax(0, 1fr);
  min-height: 100dvh;
}

/* ---------- Barra lateral ---------- */
.bjs-side {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: var(--sp-5) var(--sp-3) var(--sp-3);
  border-right: 1px solid var(--bt-line);
  background: var(--bt-s1);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--bt-s4) transparent;
}

.bjs-brand {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-2) var(--sp-1);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
}

.bjs-brand img { width: 28px; height: 32px; object-fit: contain; }

.bjs-brand b {
  display: block;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bt-tx-1);
}

.bjs-brand > span { min-width: 0; }

/* El subtítulo es el segundo <span>, dentro del primero: apuntar a
   «.bjs-brand span» ponía el nombre de la marca en monoespaciada. */
.bjs-brand > span > span {
  display: block;
  margin-top: 0.125rem;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--bt-tx-3);
}

.bjs-nav { flex: 1; margin-top: var(--sp-5); }

/* 17 módulos + el pie tienen que caber en una pantalla de 900px de alto sin
   que el usuario y «Cerrar sesión» queden escondidos bajo el scroll. */

.bjs-group + .bjs-group { margin-top: var(--sp-4); }

.bjs-group-label {
  padding: 0 var(--sp-3) var(--sp-2);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--bt-tx-3);
}

.bjs-group ul { list-style: none; display: flex; flex-direction: column; gap: 1px; }

.bjs-navlink {
  position: relative;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  min-height: 34px;
  padding: 0.375rem var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.3;
  color: var(--bt-tx-2);
  text-decoration: none;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.bjs-navlink .bjs-icon { width: 18px; height: 18px; color: var(--bt-tx-3); transition: color var(--dur-fast) ease; }

/* El cierre de sesión es un <button> dentro de un <form> POST, no un enlace:
   por GET cualquier <img> de un correo podía sacar a alguien de su sesión.
   Hay que quitarle el cromo del navegador para que lea igual que los demás. */
button.bjs-navlink {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.bjs-side-foot form { margin: 0; }

@media (hover: hover) and (pointer: fine) {
  .bjs-navlink:hover { background: var(--nav-hover-bg); color: var(--bt-tx-1); }
}
@media (hover: hover) and (pointer: fine) {
  .bjs-navlink:hover .bjs-icon { color: var(--bt-tx-2); }
}
.bjs-navlink:focus-visible { outline-offset: -2px; }
/* Respuesta al tocar: sin el destello del navegador, ésta es la señal. */
.bjs-navlink:active { background: var(--nav-hover-bg); }

/* Activo: placa con el verde del logo y una barra corta en el borde. La
   barra no llega de arriba abajo: marca, no enmarca. */
.bjs-navlink.is-on {
  background: var(--bt-accent-soft);
  color: var(--bt-tx-1);
  font-weight: 600;
}

.bjs-navlink.is-on .bjs-icon { color: var(--bt-accent); }

.bjs-navlink.is-on::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 50%;
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--bt-grad);
  transform: translateY(-50%);
}

/* Punto hueco = módulo todavía sin datos. Dice de un vistazo qué está vivo
   sin necesidad de entrar a cada sección. */
.bjs-soon-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--bt-tx-3);
  opacity: 0.8;
}

.bjs-navlink.is-on .bjs-soon-dot { border-color: var(--bt-accent); }

/* ---------- Pie de la barra: quién eres y la salida ---------- */
.bjs-side-foot {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--bt-line);
}

.bjs-user {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-3) var(--sp-2);
}

.bjs-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bt-grad);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bt-on-accent);
}

.bjs-user-name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--bt-tx-1);
  overflow-wrap: anywhere;
}

.bjs-user-role {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--bt-tx-3);
}

/* ---------- Columna de contenido ---------- */
.bjs-body { display: flex; flex-direction: column; min-width: 0; }

.bjs-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--bjs-top);
  padding: var(--sp-3) var(--gutter);
  border-bottom: 1px solid var(--bt-line);
  background: rgba(8, 10, 7, 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

@supports not (backdrop-filter: blur(1px)) {
  .bjs-top { background: var(--bt-bg); }
}

.bjs-top-text { min-width: 0; margin-right: auto; }

.bjs-eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--bt-tx-3);
}

.bjs-title {
  font-family: var(--f-ui);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--bt-tx-1);
}

.bjs-top-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

.bjs-main {
  flex: 1;
  width: 100%;
  max-width: var(--bjs-main-max);
  padding: clamp(1.25rem, 3vw, 2rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
}

.bjs-main:focus { outline: none; }

/* ---------- Botón de menú y scrim: solo existen en móvil ---------- */
.bjs-burger,
.bjs-scrim { display: none; }

/* ---------- Página de acceso (login / setup) ---------- */
.bjs-auth {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: clamp(1.5rem, 5vw, 3rem) var(--gutter);
}

.bjs-auth-inner {
  width: 100%;
  max-width: 400px;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--bt-line);
  border-radius: var(--r-xl);
  background: var(--bt-s1);
  box-shadow: var(--sh-float);
}

.bjs-auth-brand {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  text-align: center;
}

.bjs-auth-brand img { width: 48px; height: 56px; object-fit: contain; margin-bottom: var(--sp-2); }

.bjs-auth-brand h1,
.bjs-auth-brand b {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--bt-tx-1);
}

.bjs-auth-brand span { font-size: var(--fs-sm); color: var(--bt-tx-2); }

/* ============================================================
   Adaptación
   ============================================================ */

/* Tablet: la barra se estrecha antes de convertirse en cajón. */
@media (max-width: 1100px) and (min-width: 900px) {
  :root { --bjs-side: 224px; }
}

/* La barra lateral se vuelve cajón. En una tabla de siete columnas, 256px
   de menú fijo son 256px que le faltan al dato. */
@media (max-width: 899px) {
  :root { --bjs-top: 60px; }

  .bjs-shell { grid-template-columns: minmax(0, 1fr); }

  .bjs-side {
    position: fixed;
    inset-block: 0;
    left: 0;
    z-index: 60;
    width: min(86vw, 300px);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 260ms var(--ease-out), visibility 0s linear 260ms;
    box-shadow: var(--sh-float);
  }

  /* visibility:hidden cerrado: sin esto sus enlaces seguían recibiendo el
     foco del tabulador aunque estuvieran fuera de la pantalla. */
  .bjs-side.is-open {
    transform: none;
    visibility: visible;
    transition: transform 260ms var(--ease-out), visibility 0s;
  }

  .bjs-navlink { min-height: 44px; }

  .bjs-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    border: none;
    padding: 0;
    background: rgba(4, 5, 3, 0.66);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 260ms ease, visibility 260ms;
  }

  .bjs-scrim.is-open { opacity: 1; visibility: visible; }

  .bjs-burger {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--bt-line-2);
    border-radius: var(--r-md);
    background: var(--bt-s2);
    color: var(--bt-tx-1);
    cursor: pointer;
  }

  .bjs-burger:hover { background: var(--bt-s3); }

  .bjs-title { font-size: var(--fs-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .bjs-side, .bjs-side.is-open, .bjs-scrim, .bjs-skip { transition: none; }
}

/* Sin JS el cajón no se puede abrir, así que el menú se queda en el flujo
   arriba del contenido en vez de desaparecer. */
@media (max-width: 899px) {
  html:not(.js) .bjs-side {
    position: static;
    width: auto;
    height: auto;
    transform: none;
    visibility: visible;
    box-shadow: none;
    border-right: none;
    border-bottom: 1px solid var(--bt-line);
  }
  html:not(.js) .bjs-burger { display: none; }
}

/* ---------- Menú del equipo en desplegables ----------
   Cada grupo es un <details>: funciona sin JS y con teclado (Enter/Espacio
   sobre el título). crm.js sólo recuerda cuáles dejó abiertos cada persona.
   Los módulos con subpáginas (Marketing, Brand Book) son otro <details>
   dentro del grupo. */
details.bjs-group > summary { list-style: none; cursor: pointer; }
details.bjs-group > summary::-webkit-details-marker { display: none; }

details.bjs-group > .bjs-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--sp-1);
  padding-top: var(--sp-1);
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  details.bjs-group > .bjs-group-label:hover { color: var(--bt-tx-2); }
}
details.bjs-group > .bjs-group-label::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur-fast) ease;
}
details.bjs-group[open] > .bjs-group-label::after { transform: rotate(45deg); }
details.bjs-group[data-active] > .bjs-group-label { color: var(--bt-tx-2); }
details.bjs-group + details.bjs-group { margin-top: var(--sp-2); }

.bjs-navtree > summary { list-style: none; cursor: pointer; }
.bjs-navtree > summary::-webkit-details-marker { display: none; }
.bjs-chevron {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--bt-tx-3);
  border-bottom: 1.5px solid var(--bt-tx-3);
  transform: rotate(-45deg);
  transition: transform var(--dur-fast) ease;
}
.bjs-navtree[open] > summary .bjs-chevron { transform: rotate(45deg); }

.bjs-navtree > ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 var(--sp-2) calc(var(--sp-3) + 8px);
  padding-left: var(--sp-3);
  border-left: 1px solid var(--bt-line);
}

.bjs-sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 30px;
  padding: 0.3125rem var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--bt-tx-2);
  text-decoration: none;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .bjs-sublink:hover { background: var(--nav-hover-bg); color: var(--bt-tx-1); }
}
.bjs-sublink.is-on { color: var(--bt-tx-1); font-weight: 600; background: var(--bt-accent-soft); }

@media (max-width: 899px) {
  .bjs-sublink { min-height: 44px; }
}