/* ============================================================================
   libroox-ui.css  ·  Kit de componentes de marca (Libroox / Huakas)
   Basado en el "Manual de marca actualizado 05/08/2026".
   Capa ADITIVA con namespace .lx-*  ->  no pisa nada de index.css.
   Se carga con su propio <link>; queda fuera del sistema SCSS<->CSS
   (inmune a un `gulp sass` que regenere index.css).
   NO cambia comportamiento: solo aspecto. No toca ids/values que lee el JS.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   TOKENS
   ---------------------------------------------------------------------------- */
:root {
  /* Paleta de marca */
  --lx-morado:        #AE419C;   /* acción PRINCIPAL (Aceptar / Exportar) */
  --lx-azul-noche:    #0D1031;   /* texto y trazo */
  --lx-azul-medio:    #4A5AA6;   /* acción SECUNDARIA */
  --lx-cyan:          #6ECAE4;
  --lx-azul:          #449BD0;
  --lx-grad:          linear-gradient(90deg, #6ECAE4 0%, #449BD0 100%);

  /* Neutros / superficies */
  --lx-gris-claro:    #F6F5F7;   /* fondo del CUERPO de emergentes */
  --lx-gris-hover:    #ECEBF0;   /* relleno hover neutro */
  --lx-blanco:        #ffffff;
  --lx-borde:         #E3E2E8;   /* borde neutro (contorno / separadores) */
  --lx-texto:         #0D1031;
  --lx-texto-suave:   #6f6e70;
  --lx-texto-ayuda:   #454A63;   /* textos informativos de modales: gris azulado oscuro (familia #8a8996, tira a azul noche). PRUEBA — ajustar aquí para todo el manual. */

  /* Estados PULSADO (2º tono ~85%). Tinte hacia azul noche.
     NOTA: si el manual trae hex exactos de "pulsado", cámbialos aquí. */
  --lx-morado-85:     color-mix(in srgb, var(--lx-morado) 85%, var(--lx-azul-noche));
  --lx-azul-medio-85: color-mix(in srgb, var(--lx-azul-medio) 85%, var(--lx-azul-noche));

  /* Colores de ESTADO (solo éxito/error/atención/info; NO son de marca) */
  --lx-verde:  #2FA36B;
  --lx-rojo:   #D64545;
  --lx-ambar:  #E0A400;
  --lx-info:   #449BD0;

  /* Vértices */
  --lx-r-campo: 4px;   /* campos, muestras de color, casillas */
  --lx-r-btn:   6px;   /* todos los botones (fijo, no cambia con el tamaño) */
  --lx-r-card:  10px;  /* tarjetas internas y ventanas emergentes */

  /* Tipografía */
  --lx-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Elevación / velo */
  --lx-sombra: 0 14px 34px rgba(13, 16, 49, 0.14);
  --lx-velo:   rgba(13, 16, 49, 0.45);

  /* Alturas de botón */
  --lx-h-compacto: 32px;
  --lx-h-estandar: 40px;
  --lx-h-grande:   46px;
}

/* ----------------------------------------------------------------------------
   BOTONES  (5 tipos · 4 estados: normal / hover / pulsado / desactivado)
   Etiqueta Montserrat Medium 500 · 13px. Radio fijo 6px.
   ---------------------------------------------------------------------------- */
.lx-btn {
  --_bg: transparent;
  --_fg: var(--lx-texto);
  --_bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--lx-h-estandar);
  padding: 0 18px;
  border: 1px solid var(--_bd);
  border-radius: var(--lx-r-btn);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--lx-font);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .1px;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.lx-btn:focus-visible {          /* foco teclado del manual: contorno 2px separado 2px */
  outline: 2px solid var(--lx-morado);
  outline-offset: 2px;
}
.lx-btn .lx-ico { width: 18px; height: 18px; flex: 0 0 auto; }

/* Tamaños */
.lx-btn--compacto { height: var(--lx-h-compacto); padding: 0 14px; }
.lx-btn--grande   { height: var(--lx-h-grande);   padding: 0 22px; }
.lx-btn--block    { display: flex; width: 100%; }

/* Principal — morado relleno (uno por modal, confirma) */
.lx-btn--primario { --_bg: var(--lx-morado); --_fg: #fff; --_bd: var(--lx-morado); }
.lx-btn--primario:hover  { --_bg: color-mix(in srgb, var(--lx-morado) 92%, #000); --_bd: var(--_bg); }
.lx-btn--primario:active { --_bg: var(--lx-morado-85); --_bd: var(--lx-morado-85); }

/* Secundario — azul medio relleno */
.lx-btn--secundario { --_bg: var(--lx-azul-medio); --_fg: #fff; --_bd: var(--lx-azul-medio); }
.lx-btn--secundario:hover  { --_bg: color-mix(in srgb, var(--lx-azul-medio) 92%, #000); --_bd: var(--_bg); }
.lx-btn--secundario:active { --_bg: var(--lx-azul-medio-85); --_bd: var(--lx-azul-medio-85); }

/* Contorno — borde neutro (Cancelar / cerrar). Sustituye al magenta antiguo. */
.lx-btn--contorno { --_bg: #fff; --_fg: var(--lx-texto); --_bd: var(--lx-borde); }
.lx-btn--contorno:hover  { --_bg: var(--lx-gris-hover); }
.lx-btn--contorno:active { --_bg: color-mix(in srgb, var(--lx-gris-hover) 85%, var(--lx-azul-noche)); }

/* Plano — sin fondo (acciones menores) */
.lx-btn--plano { --_bg: transparent; --_fg: var(--lx-texto); --_bd: transparent; padding: 0 12px; }
.lx-btn--plano:hover  { --_bg: var(--lx-gris-hover); }
.lx-btn--plano:active { --_bg: color-mix(in srgb, var(--lx-gris-hover) 85%, var(--lx-azul-noche)); }

/* Destructivo — SIEMPRE contorno rojo, nunca relleno */
.lx-btn--destructivo { --_bg: #fff; --_fg: var(--lx-rojo); --_bd: var(--lx-rojo); }
.lx-btn--destructivo:hover  { --_bg: color-mix(in srgb, var(--lx-rojo) 8%, #fff); }
.lx-btn--destructivo:active { --_bg: color-mix(in srgb, var(--lx-rojo) 16%, #fff); }

/* Ancho completo con degradado — solo barras anchas. Etiqueta a la IZQUIERDA. */
.lx-btn--degradado {
  --_fg: #fff;
  background: var(--lx-grad);
  border: none;
  justify-content: flex-start;
  width: 100%;
  padding: 0 18px;
}
.lx-btn--degradado:hover  { filter: brightness(0.96); }
.lx-btn--degradado:active { filter: brightness(0.90); }

/* Desactivado (para todos) */
.lx-btn:disabled,
.lx-btn.is-disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }

/* ----------------------------------------------------------------------------
   EMERGENTES  ·  anatomía común
   ---------------------------------------------------------------------------- */
.lx-overlay {                       /* velo azul noche 45% */
  position: fixed; inset: 0;
  background: var(--lx-velo);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: 1080;
}
.lx-overlay[hidden] { display: none; }

.lx-modal {
  width: 480px;                     /* Opciones = 480 (ver modificadores) */
  max-width: 100%;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--lx-blanco);
  border-radius: var(--lx-r-card);
  box-shadow: var(--lx-sombra);
  overflow: hidden;
  font-family: var(--lx-font);
  color: var(--lx-texto);
}
.lx-modal--herramientas { width: 400px; }
.lx-modal--tabla        { width: 640px; }

.lx-modal__header {
  position: relative;
  min-height: 52px;                 /* 48–56px */
  display: flex; align-items: center;
  padding: 0 56px 0 20px;           /* deja hueco al aspa */
  background: var(--lx-blanco);
}
.lx-modal__title { font-weight: 300; font-size: 20px; margin: 0; letter-spacing: .2px; }

/* Aspa de cerrar 32px DENTRO de la ventana */
.lx-modal__close {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--lx-r-btn);
  background: transparent; color: var(--lx-texto);
  cursor: pointer;
  transition: background-color .15s ease;
}
.lx-modal__close:hover { background: var(--lx-gris-hover); }
.lx-modal__close svg { width: 18px; height: 18px; }

.lx-modal__body {
  background: var(--lx-gris-claro); /* cuerpo gris claro */
  padding: 16px 20px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}

/* Pie: blanco, acciones a la DERECHA, principal a la derecha del todo, gap 12 */
.lx-modal__footer {
  background: var(--lx-blanco);
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  border-top: 1px solid #D9D8E0; /* línea separadora sutil pero visible sobre gris/blanco */
}
.lx-modal__footer .lx-spacer { margin-right: auto; }  /* empuja acciones a la dcha */

/* Tarjeta blanca (grupo de controles) radio 10 */
.lx-card {
  background: var(--lx-blanco);
  border-radius: var(--lx-r-card);
  padding: 14px 16px;
}
.lx-card + .lx-card { margin-top: 0; }

/* ----------------------------------------------------------------------------
   CONTROLES DE FORMULARIO
   Etiquetas a la IZQUIERDA · Light 300 · 13px · una sola columna
   ---------------------------------------------------------------------------- */
.lx-field { display: flex; flex-direction: column; gap: 6px; }
.lx-field + .lx-field { margin-top: 12px; }
.lx-label { font-weight: 300; font-size: 13px; color: var(--lx-texto); text-align: left; }
.lx-help  { font-weight: 300; font-size: 12px; color: var(--lx-texto-ayuda); line-height: 1.4; }
.lx-help strong { font-weight: 500; }

/* Campo base (input / select nativo con estilo ligero) */
.lx-select, .lx-input {
  width: 100%;
  height: var(--lx-h-estandar);
  padding: 0 12px;
  border: 1px solid var(--lx-borde);
  border-radius: var(--lx-r-campo);
  background: var(--lx-blanco);
  color: var(--lx-texto);
  font-family: var(--lx-font);
  font-weight: 300;
  font-size: 13px;
  line-height: 1;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lx-select:focus, .lx-input:focus {
  outline: none;
  border-color: var(--lx-morado);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lx-morado) 22%, transparent);
}
/* Chevron del select nativo (no cambia el <select>, solo el fondo) */
.lx-select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230D1031' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* ----------------------------------------------------------------------------
   STEPPER  (número con flechas)  ·  libroox-ui.js gestiona +/-
   ---------------------------------------------------------------------------- */
.lx-stepper {
  display: inline-flex; align-items: center;
  height: var(--lx-h-estandar);
  border: 1px solid var(--lx-borde);
  border-radius: var(--lx-r-campo);
  background: var(--lx-blanco);
  overflow: hidden;
}
.lx-stepper__btn {
  width: 34px; height: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--lx-texto);
  cursor: pointer;
  transition: background-color .15s ease;
}
.lx-stepper__btn:hover { background: var(--lx-gris-hover); }
.lx-stepper__btn:disabled { opacity: .35; cursor: not-allowed; }
.lx-stepper__input {
  width: 48px; height: 100%;
  border: none; border-left: 1px solid var(--lx-borde); border-right: 1px solid var(--lx-borde);
  text-align: center;
  font-family: var(--lx-font); font-weight: 300; font-size: 13px; color: var(--lx-texto);
  -moz-appearance: textfield;
}
.lx-stepper__input::-webkit-outer-spin-button,
.lx-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ----------------------------------------------------------------------------
   SLIDER  (deslizador)  ·  libroox-ui.js pinta el relleno con --lx-fill
   ---------------------------------------------------------------------------- */
.lx-slider {
  --lx-fill: 50%;
  width: 100%; height: 4px;
  appearance: none; -webkit-appearance: none;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lx-morado) var(--lx-fill), var(--lx-gris-hover) var(--lx-fill));
  outline: none; cursor: pointer;
}
.lx-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--lx-morado); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(13,16,49,.25);
}
.lx-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--lx-morado); border: 2px solid #fff;
}

/* ----------------------------------------------------------------------------
   AVISOS / TOAST  (tipo C)  ·  360px, esquina inferior derecha
   punto de estado 20px + regla lateral 4px + texto a la izquierda
   ---------------------------------------------------------------------------- */
.lx-toast-stack {
  position: fixed; right: 20px; bottom: 20px;
  display: flex; flex-direction: column; gap: 12px;
  z-index: 1090;
}
.lx-toast {
  --_estado: var(--lx-info);
  position: relative;
  width: 360px; max-width: calc(100vw - 40px);
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px 14px 18px;
  background: var(--lx-blanco);
  border-radius: var(--lx-r-card);
  box-shadow: var(--lx-sombra);
  font-family: var(--lx-font);
  color: var(--lx-texto);
  overflow: hidden;
}
.lx-toast::before {                 /* regla lateral 4px */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--_estado);
}
.lx-toast__dot { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--_estado); margin-top: 1px; }
.lx-toast__body { flex: 1 1 auto; min-width: 0; }
.lx-toast__title { font-weight: 500; font-size: 13px; margin: 0 0 2px; }
.lx-toast__msg   { font-weight: 300; font-size: 13px; margin: 0; color: var(--lx-texto-suave); }
.lx-toast__close {
  flex: 0 0 auto; width: 24px; height: 24px; margin: -4px -6px -4px 0;
  border: none; background: transparent; color: var(--lx-texto-suave);
  border-radius: var(--lx-r-btn); cursor: pointer;
}
.lx-toast__close:hover { background: var(--lx-gris-hover); }

.lx-toast--exito     { --_estado: var(--lx-verde); }
.lx-toast--info      { --_estado: var(--lx-info);  }
.lx-toast--error     { --_estado: var(--lx-rojo);  }
.lx-toast--atencion  { --_estado: var(--lx-ambar); }

/* ----------------------------------------------------------------------------
   PANEL INLINE  (.lx-export)
   El panel de exportación NO es un modal con velo: es un collapse que vive
   dentro del modal flotante compartido "Herramientas". Aquí solo se brandea
   el INTERIOR de #collapseExport (la tarjeta blanca de Bootstrap), sin tocar
   el contenedor compartido ni los id/value que lee el flujo de export.
   ---------------------------------------------------------------------------- */
.lx-export {
  font-family: var(--lx-font);
  color: var(--lx-texto);
  border-radius: var(--lx-r-card);
  border-color: var(--lx-borde);
}
.lx-export__title {
  font-weight: 300;
  font-size: 20px;
  margin: 0 0 14px;
  letter-spacing: .2px;
  text-align: left;
}
.lx-export__footer { margin-top: 16px; }

/* ----------------------------------------------------------------------------
   FILA horizontal  (.lx-row)  ·  etiqueta a la IZQUIERDA · campo a la DERECHA
   Anatomía "Opciones" del manual (modal tipo B).
   ---------------------------------------------------------------------------- */
.lx-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lx-row > .lx-label {
  flex: 0 0 auto;
  width: 150px;
  margin: 0;
}
.lx-row__control {
  flex: 1 1 auto;
  min-width: 0;
}
/* En viewports estrechos, la fila se apila para no romper */
@media (max-width: 520px) {
  .lx-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .lx-row > .lx-label { width: auto; }
}

/* ----------------------------------------------------------------------------
   OVERLAY en modo PANEL: sin velo y click-through, para poder seguir viendo y
   usando el lienzo mientras la ventana (arrastrable) está abierta.
   (El .lx-modal sí captura el puntero.)
   ---------------------------------------------------------------------------- */
.lx-overlay--panel {
  background: transparent;
  pointer-events: none;
}
.lx-overlay--panel > .lx-modal {
  pointer-events: auto;
}

/* Textos de ayuda del modal de exportación alineados a la izquierda.
   El COLOR ahora es el general (--lx-texto-ayuda), común a todos los modales. */
#exportOverlay .lx-help {
  text-align: left;
}

/* ----------------------------------------------------------------------------
   MODALES BOOTSTRAP con anatomía del kit (.lx-modal-bs sobre .modal de BS)
   Reaprovecha el show/hide + velo de Bootstrap; el contenido usa
   .lx-modal__header/body/footer, .lx-card, .lx-row, .lx-btn...
   ---------------------------------------------------------------------------- */
.lx-modal-bs .modal-dialog { max-width: 480px; }
.lx-modal-bs .modal-content {
  border: none;
  border-radius: var(--lx-r-card);
  overflow: hidden;
  padding: 0;
  background: var(--lx-blanco);
  box-shadow: var(--lx-sombra);
  font-family: var(--lx-font);
  color: var(--lx-texto);
  text-align: left; /* mata el `body { text-align:center }` heredado */
}
/* Radios/checkboxes nativos de estos modales en morado de marca */
.lx-modal-bs .form-check-input { accent-color: var(--lx-morado); }
/* Etiqueta del radio "4 (dos al inicio...)": texto INFORMATIVO uniforme con el
   resto (mismo tamaño 13px, peso 300, gris informativo y Montserrat), igual que
   el paréntesis que lo acompaña.
   Especificidad (0,3,0) para GANAR a `.modal-drawer .form-check label {font-size:24px}`
   (0,2,1) SIN depender del orden de carga (index.css se carga DESPUÉS del kit). */
.lx-modal-bs .form-check .form-check-label {
  font-family: var(--lx-font); font-size: 13px; font-weight: 300;
  color: var(--lx-texto-ayuda);
}

/* PILLS: radios estilados como fichas (4/8/16/32/64).
   Prefijadas con .lx-modal-bs para GANAR a `.modal-drawer .form-check*`
   (font-size:24px del label, position:relative del input). */
.lx-modal-bs .lx-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
.lx-modal-bs .lx-pills .form-check { flex: 0 0 auto; padding: 0; margin: 0; min-height: 0; align-items: stretch; }
.lx-modal-bs .lx-pills .form-check-input {
  position: absolute !important; opacity: 0; pointer-events: none;
  margin: 0 !important; width: 0; height: 0; top: 0;
}
.lx-modal-bs .lx-pills .form-check-label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 42px; padding: 0 16px;
  border: 1px solid var(--lx-borde); border-radius: var(--lx-r-btn);
  background: var(--lx-blanco); color: var(--lx-texto);
  font-family: var(--lx-font); font-weight: 500; font-size: 15px; line-height: 1; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.lx-modal-bs .lx-pills .form-check-label:hover { background: var(--lx-gris-hover); }
.lx-modal-bs .lx-pills .form-check-input:checked + .form-check-label {
  background: var(--lx-morado); border-color: var(--lx-morado); color: #fff;
}
.lx-modal-bs .lx-pills .form-check-input:focus-visible + .form-check-label {
  outline: 2px solid var(--lx-morado); outline-offset: 2px;
}

/* NOTA/aviso dentro de modal (Advertencia) — regla lateral + punto de estado */
.lx-note {
  position: relative; display: flex; gap: 10px;
  padding: 12px 14px 12px 18px; border-radius: var(--lx-r-card);
  background: #FBF3E4; overflow: hidden;
}
.lx-note::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--lx-ambar); }
.lx-note__dot {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  background: var(--lx-ambar); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; line-height: 1; margin-top: 1px;
}
.lx-note__title { font-weight: 500; font-size: 13px; margin: 0 0 2px; color: var(--lx-texto); }
.lx-note__msg { font-weight: 300; font-size: 13px; margin: 0; color: var(--lx-texto-ayuda); }

/* Campo de solo lectura (texto a la izquierda + valor a la derecha), con borde.
   P.ej. "Se eliminará a partir de la página seleccionada … N" en Eliminar páginas. */
.lx-readfield {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--lx-borde); border-radius: var(--lx-r-campo);
  background: var(--lx-blanco);
  font-weight: 300; font-size: 13px; color: var(--lx-texto-ayuda);
}
.lx-readfield b { font-weight: 500; color: var(--lx-texto); }

/* Muestra de color y separador interno de tarjeta */
.lx-swatch { display: inline-block; width: 32px; height: 22px; border: 1px solid var(--lx-borde); border-radius: var(--lx-r-campo); cursor: pointer; vertical-align: middle; }
.lx-divider { height: 1px; background: var(--lx-borde); border: 0; margin: 12px 0; }

/* ----------------------------------------------------------------------------
   PANEL DE HERRAMIENTA "SOMBRA" (#collapseShadow, dentro de #content-collapssed)
   Restyle visual conservando los controles reales (color-shadow, #shadow-*).
   ---------------------------------------------------------------------------- */
#collapseShadow .lx-tool { font-family: var(--lx-font); color: var(--lx-texto); text-align: left; }
#collapseShadow .lx-tool-cuerpo { background: transparent; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
#collapseShadow .lx-tool-card { background: #fff; border-radius: var(--lx-r-card); padding: 14px 16px; }
#collapseShadow .lx-tool-pie { background: #fff; padding: 12px 16px; display: flex; justify-content: flex-end; border-top: 1px solid #D9D8E0; }
#collapseShadow .lx-etiqueta { font-family: var(--lx-font); font-size: 12px; font-weight: 500; color: var(--lx-texto); }

/* Steppers (Offset X / Offset Y / Desenfoque) */
#collapseShadow .lx-stepgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#collapseShadow .lx-grupo { display: flex; flex-direction: column; gap: 6px; }
#collapseShadow .lx-stepbox { display: flex; align-items: stretch; height: 40px; border: 1px solid var(--lx-borde); border-radius: var(--lx-r-campo); background: #fff; overflow: hidden; }
#collapseShadow .lx-stepbox input { flex: 1 1 auto; width: 100%; min-width: 0; border: 0; outline: 0; padding: 0 8px; background: transparent; font-family: var(--lx-font); font-size: 14px; color: var(--lx-texto); -moz-appearance: textfield; }
#collapseShadow .lx-stepbox input::-webkit-outer-spin-button,
#collapseShadow .lx-stepbox input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#collapseShadow .lx-stepbox-flechas { display: flex; flex-direction: column; border-left: 1px solid var(--lx-borde); }
#collapseShadow .lx-stepbox-btn { flex: 1 1 0; width: 26px; display: inline-flex; align-items: center; justify-content: center; border: 0; padding: 0; background: #fff; color: var(--lx-texto); cursor: pointer; }
#collapseShadow .lx-stepbox-btn + .lx-stepbox-btn { border-top: 1px solid var(--lx-borde); }
#collapseShadow .lx-stepbox-btn:hover { background: var(--lx-gris-hover); }

/* Slider Intensidad */
#collapseShadow .lx-intensidad { margin-top: 14px; }
#collapseShadow .lx-intensidad-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
#collapseShadow .lx-intensidad-valor { font-size: 13px; font-weight: 500; color: var(--lx-texto); }
#collapseShadow .lx-intensidad-limites { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--lx-texto-ayuda); }
#collapseShadow .lx-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--lx-morado) var(--_p, 100%), var(--lx-gris-hover) var(--_p, 100%)); outline: none; cursor: pointer; }
#collapseShadow .lx-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--lx-morado); box-shadow: 0 1px 3px rgba(13, 16, 49, .25); }
#collapseShadow .lx-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--lx-morado); }

/* Color: chip (input color nativo) + hex + paleta "Mis colores" */
#collapseShadow .lx-color-actual { display: flex; align-items: center; gap: 12px; }
#collapseShadow .lx-color-chip { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--lx-borde); border-radius: var(--lx-r-campo); cursor: pointer; background: transparent; }
#collapseShadow .lx-color-chip::-webkit-color-swatch-wrapper { padding: 0; }
#collapseShadow .lx-color-chip::-webkit-color-swatch { border: none; border-radius: 7px; }
#collapseShadow .lx-color-chip::-moz-color-swatch { border: none; border-radius: 7px; }
#collapseShadow .lx-color-datos { display: flex; flex-direction: column; gap: 2px; }
#collapseShadow .lx-color-hex { font-size: 13px; font-weight: 300; color: var(--lx-texto-ayuda); }
#collapseShadow .lx-paleta-titulo { display: block; margin: 14px 0 8px; font-size: 11px; letter-spacing: normal; text-transform: none; text-align: left; color: var(--lx-texto-ayuda); }
#collapseShadow .lx-paleta { display: flex; flex-wrap: nowrap; gap: 8px; }
#collapseShadow .lx-paleta .color-swatch { flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--lx-r-campo); border: 1px solid rgba(13, 16, 49, .12); cursor: pointer; padding: 0; }
/* Ancho suficiente para que las 10 muestras entren en UNA fila (solo el panel de
   Sombra fuerza este ancho; el resto de tools siguen a su tamaño auto). */
.tools-floating-modal { max-width: 500px; }
#collapseShadow .lx-tool { min-width: 460px; }

/* ----------------------------------------------------------------------------
   CABECERA UNIFICADA de los paneles de herramienta (#content-collapssed).
   Común a TODAS las tools; el título lo pone el JS con el nombre de la activa.
   Override sobre new-style.css (que se carga antes que el kit).
   ---------------------------------------------------------------------------- */
.tools-floating-modal .modal-header-drag {
  background: linear-gradient(90deg, #6ECAE4 0%, #449BD0 100%);
  padding: 0 14px 0 18px;
  min-height: 52px;
}
.tools-floating-modal .modal-title-tools {
  font-family: var(--lx-font);
  font-weight: 300;
  font-size: 18px;
  letter-spacing: .2px;
  color: #fff;
}
.tools-floating-modal .btn-close-modal {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; font-size: 20px; line-height: 1;
  border-radius: var(--lx-r-btn);
  background: rgba(255, 255, 255, 0.22);
  color: #fff; opacity: 1;
  transition: background-color .15s ease;
}
.tools-floating-modal .btn-close-modal:hover { background: rgba(255, 255, 255, 0.35); }

/* ----------------------------------------------------------------------------
   KIT REUTILIZABLE de paneles de herramienta (vocabulario de los mockups):
   .lx-tool / .lx-tool-cuerpo / .lx-tarjeta / .lx-tool-pie / .lx-etiqueta /
   .lx-slider-bloque(+cab/valor/limites) / .lx-range. Sirve para Opacidad y
   las próximas tools sin reescribir CSS. (Sombra ya tiene su bloque scoped.)
   ---------------------------------------------------------------------------- */
.lx-tool { font-family: var(--lx-font); color: var(--lx-texto); text-align: left; }
.lx-tool-cuerpo { background: transparent; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.lx-tarjeta { background: #fff; border: 1px solid var(--lx-borde); border-radius: var(--lx-r-card); padding: 14px 16px; }
.lx-tool-pie { background: #fff; padding: 12px 16px; display: flex; justify-content: flex-end; border-top: 1px solid #D9D8E0; }
.lx-etiqueta { font-family: var(--lx-font); font-size: 12px; font-weight: 500; color: var(--lx-texto); }
.lx-slider-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.lx-slider-valor { font-size: 13px; font-weight: 500; color: var(--lx-texto); }
.lx-slider-limites { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--lx-texto-ayuda); }
.lx-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--lx-morado) var(--_p, 100%), var(--lx-gris-hover) var(--_p, 100%)); outline: none; cursor: pointer; }
.lx-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--lx-morado); box-shadow: 0 1px 3px rgba(13, 16, 49, .25); }
.lx-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--lx-morado); }

/* Color: chip (input color nativo) + hex + paleta "Mis colores" + separador */
.lx-color-actual { display: flex; align-items: center; gap: 12px; }
.lx-color-chip { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--lx-borde); border-radius: var(--lx-r-campo); cursor: pointer; background: transparent; }
.lx-color-chip::-webkit-color-swatch-wrapper { padding: 0; }
.lx-color-chip::-webkit-color-swatch { border: none; border-radius: 7px; }
.lx-color-chip::-moz-color-swatch { border: none; border-radius: 7px; }
.lx-color-datos { display: flex; flex-direction: column; gap: 2px; }
.lx-color-hex { font-size: 13px; font-weight: 300; color: var(--lx-texto-ayuda); }
.lx-paleta-titulo { display: block; margin: 14px 0 8px; font-size: 11px; letter-spacing: normal; text-transform: none; text-align: left; color: var(--lx-texto-ayuda); }
.lx-paleta { display: flex; flex-wrap: wrap; gap: 8px; }
.lx-paleta .color-swatch, .lx-paleta .lx-swatch { width: 30px; height: 30px; border-radius: var(--lx-r-campo); border: 1px solid rgba(13, 16, 49, .12); cursor: pointer; padding: 0; }
.lx-separador { height: 1px; background: var(--lx-borde); margin: 12px 0; }
/* Paleta "Mis colores" del panel Color: rejilla de 5 por fila */
#color-stroke .lx-paleta { display: grid; grid-template-columns: repeat(5, 30px); gap: 8px; justify-content: start; }

/* Fundido: rueda de ángulo (conserva #fadeAngleWheel/#fadeAnglePointer que
   arrastra el JS; se restila con id+clase para ganar a las reglas de 3 ids). */
.lx-ayuda { font-size: 13px; font-weight: 300; color: var(--lx-texto-ayuda); }
#drawer #content-collapssed #fadeAngleWheel.lx-angulo {
  width: 48px; height: 48px; border-radius: 50%;
  background: #fff; border: 2px solid var(--lx-borde);
  position: relative; margin: 0; flex: none; cursor: pointer;
}
#drawer #content-collapssed #fadeAnglePointer.lx-angulo-aguja {
  position: absolute; top: 6px; left: 50%; width: 2px; height: 18px;
  background: var(--lx-morado); border-radius: 2px;
  transform-origin: bottom center; transform: translateX(-50%);
}
/* Disco de ángulo del DEGRADADO: GRANDE y centrado (como la captura). Su JS pone
   transform:rotate() SIN translateX -> centro la aguja con `left` (no translateX). */
#drawer #content-collapssed #angleWheel.lx-angulo {
  width: 48px; height: 48px; border-radius: 50%;
  background: #fff; border: 2px solid var(--lx-borde);
  position: relative; margin: 0; flex: none; cursor: pointer;
}
#drawer #content-collapssed #anglePointer.lx-angulo-aguja {
  position: absolute; top: 6px; left: calc(50% - 1px); width: 2px; height: 18px;
  background: var(--lx-morado); border-radius: 2px;
  transform-origin: bottom center;
}
/* Paleta en rejilla de 5 por fila (modificador reutilizable) */
.lx-paleta--5 { display: grid; grid-template-columns: repeat(5, 30px); gap: 8px; justify-content: start; }

/* Stepper con unidad (vocabulario de los mockups): input + .lx-unidad + flechas */
.lx-stepper { display: flex; align-items: stretch; height: 40px; border: 1px solid var(--lx-borde); border-radius: var(--lx-r-campo); background: #fff; overflow: hidden; }
.lx-stepper > input { flex: 1 1 auto; width: 100%; min-width: 0; border: 0; outline: 0; padding: 0 4px 0 10px; background: transparent; font-family: var(--lx-font); font-size: 14px; color: var(--lx-texto); -moz-appearance: textfield; }
.lx-stepper > input::-webkit-outer-spin-button,
.lx-stepper > input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lx-unidad { display: inline-flex; align-items: center; padding: 0 8px 0 2px; font-size: 12px; color: var(--lx-texto-ayuda); }
.lx-stepper-flechas { display: flex; flex-direction: column; border-left: 1px solid var(--lx-borde); }
.lx-stepper-btn { flex: 1 1 0; width: 26px; display: inline-flex; align-items: center; justify-content: center; border: 0; padding: 0; background: #fff; color: var(--lx-texto); cursor: pointer; }
.lx-stepper-btn + .lx-stepper-btn { border-top: 1px solid var(--lx-borde); }
.lx-stepper-btn:hover { background: var(--lx-gris-hover); }
.lx-color-chip--sm { width: 36px; height: 36px; }

/* Slider BIPOLAR: relleno desde el centro (cero) + marca de cero. El JS pone
   --_lo = min(50%,pct) y --_hi = max(50%,pct). */
.lx-range.lx-slider--bipolar {
  background:
    linear-gradient(var(--lx-borde), var(--lx-borde)) 50% 0 / 2px 100% no-repeat,
    linear-gradient(90deg,
      var(--lx-gris-hover) var(--_lo, 50%),
      var(--lx-morado) var(--_lo, 50%),
      var(--lx-morado) var(--_hi, 50%),
      var(--lx-gris-hover) var(--_hi, 50%));
}