@font-face {
  font-family: "Space Grotesk";
  src: url("/logvox-brand/SpaceGrotesk-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("/logvox-brand/SpaceMono-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("/logvox-brand/SpaceMono-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --logvox-obsidian: #06070c;
  --logvox-surface-1: #161823;
  --logvox-surface-2: #272936;
  --logvox-border: #4a4e5f;
  --logvox-control-border: #7a7c87;
  --logvox-text: #ffffff;
  --logvox-text-2: #d0d1d8;
  --logvox-muted: #b4b5be;
  --logvox-text-4: #9698a2;
  --logvox-orange: #ff7a00;
  --logvox-state-operacion: #60d185;
  --logvox-state-bloqueado: #ff7b87;
  /* Radios del manual: etiqueta · botón/input/tarjeta · superficie. */
  --logvox-r-1: 2px;
  --logvox-r-2: 4px;
  --logvox-r-3: 6px;
  --logvox-row: 28px;
  --logvox-motion: 180ms cubic-bezier(.2, 0, 0, 1);
  --logvox-motion-fast: 120ms cubic-bezier(.2, 0, 0, 1);
}

html.logvox-crm {
  /*
   * Twenty conserva sus componentes y operaciones, pero todas sus variables
   * visuales pasan por el mismo contrato que usa Conversaciones.
   */
  --t-background-primary: var(--logvox-obsidian);
  --t-background-secondary: var(--logvox-surface-1);
  --t-background-tertiary: var(--logvox-surface-1);
  --t-background-quaternary: var(--logvox-surface-2);
  --t-background-transparent-lighter: rgba(255, 255, 255, .03);
  --t-background-transparent-light: rgba(255, 255, 255, .06);
  --t-background-transparent-medium: rgba(255, 255, 255, .10);
  --t-background-transparent-strong: rgba(255, 255, 255, .14);
  --t-background-transparent-blue: rgba(255, 122, 0, .18);
  --t-border-color-light: var(--logvox-surface-2);
  --t-border-color-medium: var(--logvox-surface-2);
  --t-border-color-strong: var(--logvox-border);
  --t-border-color-blue: var(--logvox-orange);
  --t-font-color-primary: var(--logvox-text);
  --t-font-color-secondary: #d0d1d8;
  --t-font-color-tertiary: var(--logvox-muted);
  --t-font-color-light: var(--logvox-control-border);
  --t-font-color-extra-light: var(--logvox-border);
  --t-font-color-inverted: var(--logvox-obsidian);
  --t-color-gray1: var(--logvox-obsidian);
  --t-color-gray2: var(--logvox-surface-1);
  --t-color-gray3: #1d1f2a;
  --t-color-gray4: var(--logvox-surface-2);
  --t-color-gray5: #313440;
  --t-color-gray6: var(--logvox-border);
  --t-color-gray7: #5e6272;
  --t-color-gray8: var(--logvox-control-border);
  --t-color-gray9: #9295a2;
  --t-color-gray10: var(--logvox-muted);
  --t-color-gray11: #d0d1d8;
  --t-color-gray12: var(--logvox-text);
  --t-color-blue: var(--logvox-orange);
  --t-color-blue1: #1e1308;
  --t-color-blue2: #291807;
  --t-color-blue3: #422306;
  --t-color-blue4: #5d2d05;
  --t-color-blue5: #713704;
  --t-color-blue6: #984903;
  --t-color-blue7: #bd5a01;
  --t-color-blue8: #df6a00;
  --t-color-blue9: var(--logvox-orange);
  --t-color-blue10: #ff8c24;
  --t-color-blue11: #ff9e47;
  --t-color-blue12: #ffe0c2;
}

html.logvox-crm,
html.logvox-crm body,
html.logvox-crm #root {
  background: var(--logvox-obsidian);
}

html.logvox-crm body::before {
  background: var(--logvox-orange);
  content: "";
  height: 3px;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;
}

html.logvox-crm body,
html.logvox-crm button,
html.logvox-crm input,
html.logvox-crm select,
html.logvox-crm textarea {
  font-family: "Space Grotesk", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html.logvox-crm :is(input, select, textarea) {
  border-radius: var(--logvox-r-2) !important;
}

html.logvox-crm :is([role="dialog"], [role="menu"], [role="listbox"]) {
  border-radius: var(--logvox-r-3) !important;
}

html.logvox-crm :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--logvox-orange) !important;
  outline-offset: 2px !important;
}

html.logvox-crm :is(nav, aside, [role="navigation"]) {
  border-color: var(--logvox-surface-2) !important;
}

html.logvox-crm :is([role="dialog"], [role="menu"], [role="listbox"]) {
  border-color: var(--logvox-border) !important;
}

html.logvox-crm :is([aria-current="page"], [aria-selected="true"]) {
  text-decoration: none !important;
}

html.logvox-crm a.navigation-drawer-item[aria-selected="true"] {
  background: var(--logvox-surface-2) !important;
  box-shadow: inset 2px 0 0 var(--logvox-orange);
}

html.logvox-crm [data-variant="primary"][data-accent="blue"] {
  background: var(--logvox-orange) !important;
  border-color: var(--logvox-orange) !important;
  color: var(--logvox-obsidian) !important;
}

html.logvox-crm [data-variant="primary"][data-accent="blue"]:hover {
  background: #e06000 !important;
}

html.logvox-crm :is(table, [role="grid"], [role="row"], [role="cell"], [role="gridcell"]) {
  font-variant-numeric: tabular-nums;
}

html.logvox-crm :is(code, pre, kbd, samp) {
  font-family: "Space Mono", monospace;
}

html.logvox-crm ::selection {
  background: var(--logvox-orange);
  color: var(--logvox-obsidian);
}

html.logvox-crm * {
  scrollbar-color: var(--logvox-border) var(--logvox-obsidian);
  scrollbar-width: thin;
}

html.logvox-crm *::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

html.logvox-crm *::-webkit-scrollbar-thumb {
  background: var(--logvox-border);
  border: 2px solid var(--logvox-obsidian);
  border-radius: 6px;
}

html.logvox-crm *::-webkit-scrollbar-track {
  background: var(--logvox-obsidian);
}

.logvox-brand-mark {
  align-items: center;
  background: rgba(6, 7, 12, .92);
  border: 1px solid var(--logvox-surface-2);
  border-radius: var(--logvox-r-2);
  color: var(--logvox-text);
  display: flex;
  font: 600 12px/1 "Space Grotesk", sans-serif;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  position: fixed;
  right: 18px;
  text-decoration: none;
  top: calc(12px + env(safe-area-inset-top, 0px));
  z-index: 900;
}

.logvox-brand-mark img {
  height: 20px;
  width: 20px;
}

.logvox-password-recovery {
  align-items: center;
  background: transparent;
  border: 1px solid var(--logvox-control-border);
  border-radius: var(--logvox-r-2);
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  color: var(--logvox-text);
  display: inline-flex;
  font: 600 13px/1 "Space Grotesk", sans-serif;
  height: 40px;
  justify-content: center;
  padding: 0 16px;
  position: fixed;
  right: 18px;
  text-decoration: none;
  transition:
    background var(--logvox-motion),
    border-color var(--logvox-motion);
  z-index: 900;
}

.logvox-password-recovery:hover {
  background: var(--logvox-surface-2);
}

/*
 * En el acceso, marca y recuperación se centran sobre el eje de la
 * tarjeta: la pantalla queda simétrica como el resto del sistema.
 */
html.logvox-welcome-page .logvox-brand-mark {
  left: 50%;
  right: auto;
  top: calc(28px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
}

html.logvox-welcome-page .logvox-password-recovery {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/*
 * Conversaciones vive dentro del CRM: ocupa el área de contenido y deja
 * intacta la navegación nativa, así que no se cambia de aplicación.
 */
.logvox-chat-dock {
  background: var(--logvox-obsidian);
  border-left: 1px solid var(--logvox-surface-2);
  bottom: 0;
  display: block;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 200;
}

.logvox-chat-dock[hidden] {
  display: none;
}

.logvox-chat-dock iframe {
  border: 0;
  display: block;
  height: 100%;
  width: 100%;
}

html.logvox-chat-open,
html.logvox-chat-open body {
  overflow: hidden;
}

html.logvox-people-page :is([role="grid"], table) {
  border-color: var(--logvox-surface-2) !important;
  font-variant-numeric: tabular-nums;
}

html.logvox-people-page :is([role="row"], tr) {
  border-color: var(--logvox-surface-2) !important;
}

html.logvox-people-page :is(input, textarea, select) {
  border-color: var(--logvox-control-border) !important;
}

.logvox-navigation-shell {
  padding-bottom: 128px !important;
  position: relative !important;
}

/*
 * Iconografía LogVox: contorno que hereda el color del texto. El naranja
 * se reserva para señalar, nunca para colorear un icono de menú.
 */
/*
 * El color de estos iconos no viene del texto, así que cambiar `color`
 * no basta: se desatura el dibujo entero. Queda contorno monocromo, y el
 * naranja se reserva para señalar.
 */
/*
 * El color vive en el fondo del contenedor del icono, no en el trazo:
 * por eso se desatura ese contenedor y no el dibujo.
 */
.logvox-navigation-shell div:has(> svg) {
  filter: grayscale(1) brightness(1.25);
}

.logvox-navigation-shell
  :is([aria-selected="true"], [aria-current="page"]) div:has(> svg) {
  filter: grayscale(1) brightness(1.7);
}

.logvox-navigation-shell svg {
  color: var(--logvox-muted) !important;
}

.logvox-navigation-shell
  :is([aria-selected="true"], [aria-current="page"]) svg {
  color: var(--logvox-text) !important;
}

/* El monograma y el estado de sesión conservan su color. */
.logvox-navigation-shell [data-testid="workspace-dropdown"] :is(svg, img),
.logvox-tools-state::before {
  filter: none;
}

/* Entradas del CRM base que LogVox no usa. */
.logvox-hidden-upstream {
  display: none !important;
}

/* Etiqueta de sección: Space Mono, caja alta, tracking +13%. */
.logvox-navigation-shell .section-title-label {
  color: var(--logvox-text-4) !important;
  font: 700 10px/1.2 "Space Mono", monospace !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

.logvox-native-inbox-row {
  height: var(--logvox-row);
  width: 100%;
}

/* Mismo alto, radio, gap y color que un ítem de Conversaciones. */
.logvox-native-inbox-link {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--logvox-r-2);
  color: var(--logvox-text-2);
  display: flex !important;
  font: 400 13px/1.4 "Space Grotesk", sans-serif;
  gap: 9px;
  height: var(--logvox-row);
  padding: 0 8px;
  text-decoration: none;
  transition:
    background var(--logvox-motion-fast),
    color var(--logvox-motion-fast);
  width: 100%;
}

.logvox-native-inbox-link:hover {
  background: var(--logvox-surface-2);
  color: var(--logvox-text);
}

/* Mismo estado activo que cualquier objeto del CRM. */
.logvox-native-inbox-link[aria-current="page"] {
  background: var(--logvox-surface-2);
  box-shadow: inset 2px 0 0 var(--logvox-orange);
  color: var(--logvox-text);
}

/* Con Conversaciones abierto, sólo una entrada aparece activa. */
html.logvox-chat-open a.navigation-drawer-item[aria-selected="true"] {
  background: transparent !important;
  box-shadow: none;
}

/*
 * Iconografía LogVox: sólo contorno y hereda el color del texto.
 * El naranja se reserva para señalar, no para rellenar.
 */
.logvox-native-inbox-icon {
  align-items: center;
  color: var(--logvox-muted);
  display: inline-flex;
  flex: none;
  height: 17px;
  justify-content: center;
  width: 17px;
}

.logvox-native-inbox-icon svg {
  height: 16px;
  stroke-width: 1.8;
  width: 16px;
}

.logvox-native-inbox-copy {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pie de sesión: misma retícula y mismos textos que Conversaciones. */
.logvox-admin-tools {
  background: var(--logvox-surface-1);
  border-top: 1px solid var(--logvox-surface-2);
  bottom: 8px;
  display: grid;
  gap: 4px;
  left: 8px;
  padding-top: 8px;
  position: absolute;
  right: 8px;
  z-index: 4;
}

.logvox-tools-header {
  align-items: center;
  display: flex;
  height: 18px;
  padding: 0 8px;
}

.logvox-tools-context {
  display: none;
}

/* Estado funcional: siempre con texto, nunca sólo color. */
.logvox-tools-state {
  align-items: center;
  color: var(--logvox-state-operacion);
  display: flex;
  font: 700 10px/1 "Space Mono", monospace;
  gap: 7px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.logvox-tools-state::before {
  background: currentcolor;
  border-radius: 50%;
  content: "";
  flex: none;
  height: 7px;
  width: 7px;
}

.logvox-tools-state.is-pending {
  color: var(--logvox-muted);
}

.logvox-tools-state.is-error {
  color: var(--logvox-state-bloqueado);
}

.logvox-tools-identity {
  align-items: center;
  border-radius: var(--logvox-r-2);
  color: var(--logvox-text);
  display: grid !important;
  gap: 0 8px;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: 16px 15px;
  min-width: 0;
  padding: 6px 8px !important;
  text-decoration: none;
}

.logvox-tools-identity:hover {
  background: var(--logvox-surface-2);
}

.logvox-tools-avatar {
  align-items: center;
  border: 1px solid var(--logvox-control-border);
  border-radius: 50%;
  color: #d0d1d8;
  display: inline-flex;
  grid-row: 1 / 3;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.logvox-tools-avatar svg {
  height: 14px;
  width: 14px;
}

.logvox-tools-identity :is(strong, span:not(.logvox-tools-avatar)) {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logvox-tools-identity strong {
  font: 600 11px/1.2 "Space Grotesk", sans-serif;
}

.logvox-tools-identity span {
  color: var(--logvox-text-4);
  font: 400 10px/1.2 "Space Mono", monospace;
}

.logvox-tools-actions {
  display: block;
}

.logvox-tools-actions button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--logvox-r-2) !important;
  color: var(--logvox-muted);
  cursor: pointer;
  display: flex;
  font: 400 13px/1.4 "Space Grotesk", sans-serif;
  gap: 9px;
  height: var(--logvox-row);
  padding: 0 8px;
  text-align: left;
  transition:
    background var(--logvox-motion-fast),
    color var(--logvox-motion-fast);
  width: 100%;
}

.logvox-tools-actions button:hover {
  background: var(--logvox-surface-2);
  color: var(--logvox-state-bloqueado);
}

.logvox-tools-actions svg {
  height: 17px;
  stroke-width: 1.8;
  width: 17px;
}

.logvox-tools-actions button:disabled {
  cursor: wait;
  opacity: .65;
}

/*
 * Barra plegada: sólo caben iconos. El pie de sesión se reduce a avatar
 * y salida centrados, sin texto cortado.
 */
html.logvox-nav-rail .logvox-admin-tools {
  left: 4px;
  right: 4px;
}

html.logvox-nav-rail .logvox-tools-header,
html.logvox-nav-rail .logvox-tools-identity strong,
html.logvox-nav-rail .logvox-tools-identity span:not(.logvox-tools-avatar),
html.logvox-nav-rail .logvox-tools-actions button span,
html.logvox-nav-rail .logvox-native-inbox-copy {
  display: none !important;
}

html.logvox-nav-rail .logvox-tools-identity {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
  justify-items: center;
  padding: 6px 0 !important;
}

html.logvox-nav-rail .logvox-tools-avatar {
  grid-row: auto;
}

html.logvox-nav-rail :is(.logvox-tools-actions button, .logvox-native-inbox-link) {
  justify-content: center;
  padding: 0;
}

.logvox-signout-error {
  background: #32161b;
  border: 1px solid var(--logvox-state-bloqueado);
  border-radius: var(--logvox-r-2);
  bottom: calc(138px + env(safe-area-inset-bottom, 0px));
  color: #fff;
  font: 600 13px/1.4 "Space Grotesk", sans-serif;
  max-width: min(380px, calc(100vw - 32px));
  padding: 12px 14px;
  position: fixed;
  right: 18px;
  z-index: 901;
}

html.logvox-crm:has([role="dialog"]) :is(.logvox-brand-mark, .logvox-admin-tools) {
  pointer-events: none;
  visibility: hidden;
}

@media (max-width: 640px) {
  .logvox-brand-mark {
    left: 10px;
    right: auto;
    top: calc(10px + env(safe-area-inset-top, 0px));
  }

  .logvox-password-recovery {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
  }

  html.logvox-welcome-page .logvox-password-recovery {
    left: 12px;
    right: 12px;
    transform: none;
  }

  .logvox-navigation-shell {
    padding-bottom: 0 !important;
  }

  .logvox-admin-tools {
    display: none;
  }

  .logvox-signout-error {
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    left: 10px;
    right: 10px;
  }

}

@media (prefers-reduced-motion: reduce) {
  html.logvox-crm *,
  html.logvox-crm *::before,
  html.logvox-crm *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}