/* ============================================================
   Integra360 Libros · Identidad visual
   Acento: azul profundo · Modo claro + oscuro
   ------------------------------------------------------------
   Edita SOLO --i360-primary y la escala --i360-blue-* para
   cambiar el color de marca. Las variables legacy
   (indigo-*, purple-*) son ALIAS hacia los semánticos —
   toda la app se repinta automáticamente.
   La fuente Inter se carga vía <link> en el <head> de cada HTML.
   ============================================================ */

/* ----- MODO CLARO (por defecto) ----- */
:root,
[data-theme="light"] {
  /* Escala azul profundo de marca */
  --i360-blue-50:  #E1ECF7;
  --i360-blue-100: #B9D2EE;
  --i360-blue-200: #88B2E0;
  --i360-blue-400: #3D82CC;
  --i360-blue-600: #15559E;
  --i360-blue-800: #0C447C;
  --i360-blue-900: #062E55;

  /* Acento semántico */
  --i360-primary:       #15559E;
  --i360-primary-hover: #0C447C;
  --i360-primary-bg:    #E1ECF7;
  --i360-primary-text:  #0C447C;
  --i360-on-primary:    #FFFFFF;

  /* Superficies / lienzo / bordes
     (receta v0 2026-08: lienzo frío para que las tarjetas blancas floten) */
  --i360-canvas:    #EEF2F7;   /* fondo de página */
  --i360-surface:   #FFFFFF;   /* cards, modales, sidebar */
  --i360-surface-2: #F3F6FA;   /* filas hover, surface alterno */
  --i360-border:    #E2E8F0;
  /* Alias: varias pantallas React usan --i360-bg (no existía) y en tema oscuro
     quedaban con fondos claros fantasma. Resuelve al surface alterno del tema. */
  --i360-bg:        var(--i360-surface-2);

  /* Texto */
  --i360-text:       #1F1F1D;
  --i360-text-muted: #6B6B66;
  --i360-text-faint: #9A9A93;

  /* Estados (base + bg + text) */
  --i360-success:      #15803D;
  --i360-success-bg:   #E3F3E8;
  --i360-success-text: #105E2E;
  --i360-warning:      #B45309;
  --i360-warning-bg:   #FBEFD8;
  --i360-warning-text: #8A4108;
  --i360-danger:       #C0322F;
  --i360-danger-bg:    #FBE6E5;
  --i360-danger-text:  #8F211F;
  --i360-info:         var(--i360-primary);
  --i360-info-bg:      var(--i360-primary-bg);
  --i360-info-text:    var(--i360-primary-text);

  /* Forma */
  --i360-radius-sm: 6px;
  --i360-radius-md: 8px;
  --i360-radius-lg: 12px;

  /* Sombras (solo modales/popovers; tarjetas usan border) */
  --i360-shadow-sm: 0 1px 2px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.05);
  --i360-shadow-md: 0 4px 6px rgba(0,0,0,0.04), 0 10px 24px rgba(21,85,158,0.06);
  --i360-shadow-lg: 0 10px 15px rgba(0,0,0,0.05), 0 20px 40px rgba(21,85,158,0.08);
  --i360-shadow-glow: 0 0 0 1px rgba(21,85,158,0.10), 0 8px 24px rgba(21,85,158,0.12);
  --i360-shadow-pop: 0 8px 24px rgba(15, 23, 42, 0.12);

  /* Gradientes (en transición; ideal SOLO para login/marketing) */
  --i360-gradient:      linear-gradient(135deg, var(--i360-primary) 0%, var(--i360-blue-400) 100%);
  --i360-gradient-soft: linear-gradient(135deg, rgba(21,85,158,0.08) 0%, rgba(61,130,204,0.08) 100%);

  /* ---- ALIASES LEGACY → semánticos ----
     Mientras Fase B migra HTML/JS, los nombres viejos
     siguen funcionando y se repintan al azul. */
  --i360-indigo-50:  var(--i360-primary-bg);
  --i360-indigo-100: var(--i360-primary-bg);
  --i360-indigo-200: var(--i360-blue-100);
  --i360-indigo-300: var(--i360-blue-200);
  --i360-indigo-500: var(--i360-primary);
  --i360-indigo-600: var(--i360-primary);
  --i360-indigo-700: var(--i360-primary-hover);
  --i360-purple-500: var(--i360-blue-400);
  --i360-purple-600: var(--i360-primary);
  --i360-purple-700: var(--i360-primary-hover);
}

/* ----- MODO OSCURO ----- */
[data-theme="dark"] {
  --i360-primary:       #4A8FD6;
  --i360-primary-hover: #6BA6E2;
  --i360-primary-bg:    #15335A;
  --i360-primary-text:  #CFE2F5;
  --i360-on-primary:    #FFFFFF;

  /* Receta v0 en oscuro: lienzo hundido y tarjetas elevadas azuladas */
  --i360-canvas:    #07090D;
  --i360-surface:   #151B24;
  --i360-surface-2: #1F2732;
  --i360-border:    #2B333F;

  --i360-text:       #ECECEC;
  --i360-text-muted: #9A9AA2;
  --i360-text-faint: #6A6A72;

  --i360-success:      #3FB873;
  --i360-success-bg:   #14331F;
  --i360-success-text: #8EE0AE;
  --i360-warning:      #E0A93B;
  --i360-warning-bg:   #3A2A0E;
  --i360-warning-text: #F2CE84;
  --i360-danger:       #E8706D;
  --i360-danger-bg:    #3A1A19;
  --i360-danger-text:  #F3ABA9;

  --i360-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5);

  --i360-gradient:      linear-gradient(135deg, var(--i360-primary) 0%, var(--i360-blue-200) 100%);
  --i360-gradient-soft: linear-gradient(135deg, rgba(74,143,214,0.10) 0%, rgba(136,178,224,0.10) 100%);
}

/* Respeta el tema del SO la primera vez (sin preferencia guardada) */
@media (prefers-color-scheme: dark) {
  /* Sin tema elegido, el sistema manda: también aquí la raíz tiene que declarar su
     color-scheme, o el lienzo por defecto del navegador sigue siendo blanco. */
  :root:not([data-theme]), :root:not([data-theme]) body { color-scheme: dark; }
  :root:not([data-theme]) {
    --i360-primary:       #4A8FD6;
    --i360-primary-hover: #6BA6E2;
    --i360-primary-bg:    #15335A;
    --i360-primary-text:  #CFE2F5;
    --i360-canvas:    #07090D;
    --i360-surface:   #151B24;
    --i360-surface-2: #1F2732;
    --i360-border:    #2B333F;
    --i360-text:       #ECECEC;
    --i360-text-muted: #9A9AA2;
    --i360-text-faint: #6A6A72;
    --i360-success: #3FB873; --i360-success-bg: #14331F; --i360-success-text: #8EE0AE;
    --i360-warning: #E0A93B; --i360-warning-bg: #3A2A0E; --i360-warning-text: #F2CE84;
    --i360-danger:  #E8706D; --i360-danger-bg:  #3A1A19; --i360-danger-text:  #F3ABA9;
  }
}

/* ----- Base ----- */
* { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
body {
  color-scheme: light dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--i360-canvas);
  color: var(--i360-text);
  font-weight: 400;
}

/* Evita que la página se "salga" al deslizar horizontal con mouse/trackpad.
   - overflow-x: clip recorta el desbordamiento horizontal SIN crear un
     contenedor de scroll (no rompe position: sticky del topbar/thead).
   - overscroll-behavior-x evita el gesto de "atrás/adelante" del navegador
     y que el scroll de una tabla arrastre la página. */
html, body {
  overflow-x: clip;
  overscroll-behavior-x: none;
  max-width: 100%;
}
/* El contenido ancho (tablas) se desplaza dentro de su propio contenedor,
   sin contagiar el scroll a la página. */
.overflow-x-auto, .overflow-auto {
  overscroll-behavior-x: contain;
}

/* Atar color-scheme al tema elegido: los controles nativos
   (input[type=date]/time/number, selects) pintan su valor según
   color-scheme. Si el tema de la app no coincide con el del SO, el
   texto de la fecha quedaba invisible. Forzamos a que coincida. */
:root[data-theme="light"] body { color-scheme: light; }
:root[data-theme="dark"]  body { color-scheme: dark; }
/* …y en la RAÍZ también, junto con el fondo.
   Medido el 27-ago en modo oscuro: `html` no pintaba nada (rgba(0,0,0,0)) y su
   color-scheme quedaba en el valor por defecto. Mientras el documento es más corto que la
   ventana —al cambiar de pantalla, con el indicador de carga puesto— lo que se ve detrás
   del body es el lienzo POR DEFECTO del navegador, que es blanco. De ahí el fogonazo que
   reportó Alexis: «se corta con blanco, estoy en modo oscuro». Pintar la raíz lo cierra en
   todas las pantallas, no solo en la que lo destapó. */
:root { background: var(--i360-canvas); }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }
/* Respaldo: el valor de los date/time toma el color del texto del tema.
   El valor se pinta en pseudo-elementos separados (día/mes/año), hay que
   colorearlos todos o el valor queda gris/invisible. */
.form-input::-webkit-datetime-edit,
.form-input::-webkit-datetime-edit-fields-wrapper,
.form-input::-webkit-datetime-edit-text,
.form-input::-webkit-datetime-edit-year-field,
.form-input::-webkit-datetime-edit-month-field,
.form-input::-webkit-datetime-edit-day-field,
.form-input::-webkit-datetime-edit-hour-field,
.form-input::-webkit-datetime-edit-minute-field,
.form-input::-webkit-datetime-edit-ampm-field { color: var(--i360-text); }
input[type="date"].form-input,
input[type="time"].form-input,
input[type="datetime-local"].form-input { color: var(--i360-text); }
/* El ícono del calendario también debe verse en oscuro. */
[data-theme="dark"] .form-input::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.7); }

/* Tipografía refinada */
h1 { letter-spacing: -0.02em; }
h2, h3 { letter-spacing: -0.01em; }

/* ---- Fondos ---- */
.gradient-bg {
  background:
    radial-gradient(circle at 0% 0%, rgba(79,70,229,0.05) 0%, transparent 50%),
    radial-gradient(circle at 100% 0%, rgba(124,58,237,0.05) 0%, transparent 50%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
  background-attachment: fixed;
}
.gradient-text {
  background: var(--i360-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Animación de pulso para los indicadores ---- */
.pulse-dot { animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Entrada suave de las cards */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: slide-up 0.35s ease-out backwards; }

/* ---- Inputs uniformes ---- */
/* El ancho va en :where() (especificidad 0) para que un w-* de Tailwind lo gane.
   Con .form-input a secas ganaba esta regla por orden de carga y TODO input salía
   a ancho completo, aunque pidiera w-28/w-32 (ticket #25: botón cortado por el input estirado). */
:where(.form-input) { width: 100%; }
.form-input {
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--i360-border);
  border-radius: 0.6rem;
  background-color: var(--i360-surface);
  transition: all 0.15s ease;
  font-size: 0.95rem;
  color: var(--i360-text);
}
.form-input::placeholder { color: var(--i360-text-faint); }
.form-input:hover { border-color: var(--i360-primary-bg); }
.form-input:focus {
  outline: none;
  border-color: var(--i360-primary);
  box-shadow: 0 0 0 4px var(--i360-primary-bg);
}

/* ============================================================
   Tiles (radio + checkbox card style)
   ============================================================ */
.tile {
  position: relative;
  display: block;
  background: var(--i360-surface);
  border: 2px solid var(--i360-border);
  border-radius: 0.85rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: all 0.18s ease;
  overflow: hidden;
}
.tile:hover {
  border-color: var(--i360-primary);
  background: var(--i360-primary-bg);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(21,85,158,0.08);
}
.tile-content { position: relative; z-index: 1; }
.tile-title { font-weight: 600; font-size: 0.95rem; color: rgb(17 24 39); line-height: 1.2; margin-bottom: 0.25rem; }
.tile-desc  { font-size: 0.78rem; color: rgb(107 114 128); line-height: 1.35; }
.tile-check {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--i360-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.18s ease;
}

/* Estado seleccionado (radio y checkbox usan misma regla) */
.tile:has(input:checked) {
  border-color: var(--i360-primary);
  background: linear-gradient(135deg, var(--i360-primary-bg), var(--i360-primary-bg));
  box-shadow: 0 6px 16px rgba(21,85,158,0.12);
}
.tile:has(input:checked) .tile-check {
  opacity: 1;
  transform: scale(1);
}
.tile:has(input:focus-visible) {
  outline: 2px solid var(--i360-primary);
  outline-offset: 2px;
}

/* ============================================================
   Status de procesamiento (pasos)
   ============================================================ */
.step-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  border-radius: 0.55rem;
  background: var(--i360-surface-2);
  color: rgb(107 114 128);
  transition: all 0.2s ease;
}
.step-row.is-doing  { background: var(--i360-primary-bg); color: var(--i360-primary-text); font-weight: 500; }
.step-row.is-ok     { background: rgb(220 252 231); color: rgb(21 128 61); }
.step-row.is-fail   { background: rgb(254 226 226); color: rgb(185 28 28); }
.step-icon          { font-size: 0.95rem; line-height: 1; }

/* ============================================================
   Detalles varios
   ============================================================ */
code {
  font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
  font-size: 0.85em;
}

#empresa-error span:last-child, #login-error { white-space: pre-line; }

/* Chips de bloques en el preview */
.chip {
  display: inline-flex;
  align-items: center;
  background: var(--i360-surface);
  color: var(--i360-primary-text);
  border: 1px solid var(--i360-primary-bg);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Cards module visuales que se "elevan" en hover */
.module-card { transition: all 0.3s ease; }
.module-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.06); }

/* ---- Spinner robusto (no depende de Tailwind) ---- */
.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--i360-primary-bg);
  border-top-color: var(--i360-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* (.nav-tab del header horizontal legacy: eliminado en Fase D3 junto con
   renderHeader; toda la navegación vive ahora en el sidebar de renderShell.) */

/* ============================================================
   Inputs pequeños (para tablas inline)
   ============================================================ */
.form-input-sm {
  padding: 0 0.5rem;
  font-size: 0.82rem;
  min-width: 0;
  height: 34px;
  line-height: 1.2;
  box-sizing: border-box;
  vertical-align: middle;
}
/* Ocultar spinners de input[type=number] para que las celdas tengan ancho consistente */
.form-input-sm[type=number]::-webkit-outer-spin-button,
.form-input-sm[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.form-input-sm[type=number] { -moz-appearance: textfield; appearance: textfield; }
/* Selects pequeños — misma altura que los inputs */
select.form-input-sm {
  padding-right: 1.6rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 0.7rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Selects grandes (.form-input): quitar apariencia nativa para que el
   texto use el color del tema (macOS pintaba el valor en gris). Se
   excluyen los listbox (size>1), que deben conservar su lista. */
select.form-input:not([size]),
select.form-input[size="1"] {
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 0.8rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}


/* ============================================================
   Tile compacto (modal de auxiliares)
   ============================================================ */
.tile.compact { padding: 0.75rem 0.85rem; }
.tile.compact .tile-desc { font-size: 0.72rem; }

/* ============================================================
   Check tag (etiquetas multi-check de auxiliares)
   ============================================================ */
.check-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  background: var(--i360-surface-2);
  border: 1px solid var(--i360-border);
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.82rem;
  transition: all 0.15s ease;
}
.check-tag:hover { background: var(--i360-primary-bg); }
.check-tag:has(input:checked) {
  background: var(--i360-primary-bg);
  border-color: var(--i360-primary);
  color: var(--i360-primary-text);
}
.check-tag input { accent-color: var(--i360-primary); }

/* ============================================================
   Switch toggle (interruptor on/off estilo iOS)
   ============================================================ */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.switch-slider {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.switch-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform 0.22s ease;
}
.switch input:checked + .switch-slider {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}
.switch input:checked + .switch-slider::before {
  transform: translateX(18px);
}
.switch input:focus-visible + .switch-slider {
  outline: 2px solid var(--i360-primary);
  outline-offset: 2px;
}

/* Bloque de detalle que se oculta cuando el switch maestro está apagado */
.section-card[data-lotes="off"] #lotes-detalle {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.5);
}

/* ============================================================
   Tile radio (tarjetas seleccionables tipo Apple settings)
   ============================================================ */
.tile-radio {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.65rem 0.5rem;
  border: 1px solid var(--i360-border);
  border-radius: 0.65rem;
  background: white;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgb(55 65 81);
  cursor: pointer;
  transition: all 0.15s;
  min-height: 44px;
}
.tile-radio:hover {
  border-color: var(--i360-primary);
  background: rgb(248 250 252);
}
.tile-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tile-radio:has(input:checked) {
  border-color: var(--i360-primary);
  background: var(--i360-primary-bg);
  color: var(--i360-primary-text);
  box-shadow: 0 0 0 3px rgba(21,85,158,0.12);
}
.tile-radio span { line-height: 1.2; }

/* ============================================================
   Tags (roles del auxiliar en el listado)
   ============================================================ */
.tag {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 600;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}
.tag-cliente   { background: #dbeafe; color: #1e40af; }
.tag-proveedor { background: #fef3c7; color: #92400e; }
.tag-empleado  { background: #dcfce7; color: #166534; }
.tag-socio     { background: #fce7f3; color: #9d174d; }
.tag-rel       { background: #ede9fe; color: #5b21b6; }
.tag-agente    { background: #cffafe; color: #155e75; }
.tag-especial  { background: #fef9c3; color: #854d0e; }

/* ============================================================
   Badges
   ============================================================ */
.badge-bank, .badge-pers {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
}
.badge-bank { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; }
.badge-pers { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }

.badge-ok      { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 0.18rem 0.6rem; border-radius: 9999px; background: #dcfce7; color: #15803d; }
.badge-warn    { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 0.18rem 0.6rem; border-radius: 9999px; background: #fef9c3; color: #854d0e; }
.badge-neutral { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 0.18rem 0.6rem; border-radius: 9999px; background: #e5e7eb; color: #374151; }
.badge-info    { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 0.18rem 0.6rem; border-radius: 9999px; background: #dbeafe; color: #1d4ed8; }

/* Colores de chip/badge que se adaptan a claro/oscuro (solo fondo+texto;
   el tamaño/padding lo pone el span que los usa). */
.b-azul   { background: rgba(37,99,235,.14);  color: #1d4ed8; }
.b-ambar  { background: rgba(217,119,6,.16);  color: #b45309; }
.b-rojo   { background: rgba(220,38,38,.14);  color: #b91c1c; }
.b-morado { background: rgba(124,58,237,.14); color: #6d28d9; }
.b-verde  { background: rgba(5,150,105,.14);  color: #047857; }
.b-gris   { background: rgba(100,116,139,.16); color: #475569; }
[data-theme="dark"] .b-azul   { background: rgba(96,165,250,.20); color: #bfdbfe; }
[data-theme="dark"] .b-ambar  { background: rgba(251,191,36,.20); color: #fde68a; }
[data-theme="dark"] .b-rojo   { background: rgba(248,113,113,.20); color: #fecaca; }
[data-theme="dark"] .b-morado { background: rgba(167,139,250,.22); color: #ddd6fe; }
[data-theme="dark"] .b-verde  { background: rgba(52,211,153,.20); color: #a7f3d0; }
[data-theme="dark"] .b-gris   { background: rgba(148,163,184,.20); color: #cbd5e1; }

/* ============================================================
   Tipo cuenta (movimiento / grupo)
   ============================================================ */
.tipo-mov   { display: inline-block; font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 9999px; background: #eef2ff; color: #4338ca; }
.tipo-grupo { display: inline-block; font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 9999px; background: #f3f4f6; color: #4b5563; }
.row-grupo  { background: var(--i360-surface-2); }
.row-grupo  td { font-weight: 500; }
.row-mov    { background: var(--i360-surface); }

.chip-bloque {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #475569;
}

/* ============================================================
   Filter tabs (auxiliares + reportes)
   ============================================================ */
.filter-tab, .rep-tab {
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  color: var(--i360-text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  font-weight: 500;
  transition: all 0.15s ease;
}
.filter-tab:hover, .rep-tab:hover { color: var(--i360-text); }
.filter-tab-active, .rep-tab-active {
  color: var(--i360-primary-text);
  border-bottom-color: var(--i360-primary);
  font-weight: 600;
}

/* ============================================================
   Dropdown de autocomplete genérico (cliente, producto, cuenta)
   ============================================================ */
.cuenta-dropdown,
.dropdown-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--i360-surface);
  border: 1px solid var(--i360-border);
  border-radius: 0.5rem;
  box-shadow: 0 8px 18px rgba(0,0,0,0.1);
  max-height: 360px;
  overflow-y: auto;
  z-index: 30;
  margin-top: 2px;
}
.dropdown-autocomplete.hidden,
.cuenta-dropdown.hidden { display: none; }
.dropdown-hint {
  position: sticky;
  top: 0;
  background: var(--i360-primary-bg);
  color: var(--i360-primary-text);
  font-size: 0.72rem;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--i360-primary-bg);
  z-index: 1;
}
.dropdown-empty {
  padding: 0.7rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgb(107 114 128);
}
.cuenta-dropdown.open { display: block; }
/* El dropdown se oculta salvo cuando está abierto (.open). Sin esto quedaba visible
   tras seleccionar la cuenta, porque el JS solo togglea .open (nunca .hidden). */
.cuenta-dropdown:not(.open) { display: none; }
.inv-dropdown:not(.open) { display: none; }
/* Dropdown de producto en la línea del Detalle: clase propia (no inv-dropdown) para que
   los handlers globales que cierran .inv-dropdown no lo cierren con un flash. */
.line-dropdown:not(.open) { display: none; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  font-size: 0.82rem;
  width: 100%;
  text-align: left;
  border-bottom: 1px solid var(--i360-surface-2);
  cursor: pointer;
}
.dropdown-item:hover { background: var(--i360-primary-bg); }
.dropdown-item code {
  background: var(--i360-surface-2);
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  font-size: 0.72rem;
  color: rgb(75 85 99);
  flex-shrink: 0;
}

.cuenta-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--i360-primary-bg);
  border: 1px solid var(--i360-primary);
  border-radius: 0.45rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.82rem;
}
.cuenta-tag code {
  background: var(--i360-surface);
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  font-size: 0.72rem;
  color: rgb(75 85 99);
}

/* ============================================================
   KPI Cards (Dashboard Vista Gerente)
   ============================================================ */
.kpi-card {
  display: block;
  background: var(--i360-surface);
  border: 1px solid var(--i360-border);
  border-radius: var(--i360-radius-lg);
  padding: 1.15rem 1.3rem;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  animation: slide-up 0.4s ease-out backwards;
}
a.kpi-card:hover {
  border-color: var(--kpi-accent, var(--i360-primary));
  transform: translateY(-1px);
  box-shadow: var(--i360-shadow-md);
}
/* Barra de acento superior según estado (color de estado por token) */
.kpi-card::before {
  content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px;
  background: var(--kpi-accent, var(--i360-primary));
}
.kpi-card[data-state="success"] { --kpi-accent: var(--i360-success); }
.kpi-card[data-state="danger"]  { --kpi-accent: var(--i360-danger); }
.kpi-card[data-state="warning"] { --kpi-accent: var(--i360-warning); }
.kpi-card[data-state="neutral"] { --kpi-accent: var(--i360-primary); }

.kpi-header { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.7rem; }
.kpi-icon {
  width: 32px; height: 32px; border-radius: 0.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--kpi-accent, var(--i360-primary)) 14%, var(--i360-surface));
  color: var(--kpi-accent, var(--i360-primary));
}
.kpi-title { font-size: 0.78rem; font-weight: 500; color: var(--i360-text-muted); }
.kpi-value {
  font-size: 1.7rem; font-weight: 500; color: var(--i360-text);
  line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.kpi-foot { margin-top: 0.4rem; font-size: 0.74rem; color: var(--i360-text-faint); }
.kpi-trend { font-weight: 500; }
.kpi-trend.up   { color: var(--i360-success); }
.kpi-trend.down { color: var(--i360-danger); }
.kpi-spark { margin-top: 0.65rem; height: 34px; }
.kpi-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Section cards (alertas, tops, chart) */
.section-card {
  background: var(--i360-surface);
  border-radius: 1rem;
  border: 1px solid var(--i360-border);
  box-shadow: var(--i360-shadow-sm);
  overflow: hidden;
  animation: slide-up 0.5s ease-out backwards;
}
.section-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--i360-border);
  background: var(--i360-surface-2);
}

/* Alertas (Dashboard) — solo aparecen si hay algo que atender */
.alert-item {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.85rem 1.25rem; font-size: 0.85rem;
}
.alert-item + .alert-item { border-top: 1px solid var(--i360-border); }
.alert-ico {
  width: 32px; height: 32px; border-radius: 0.5rem; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--alert-accent, var(--i360-primary)) 14%, var(--i360-surface));
  color: var(--alert-accent, var(--i360-primary));
}
.alert-item[data-nivel="danger"]  { --alert-accent: var(--i360-danger); }
.alert-item[data-nivel="warning"] { --alert-accent: var(--i360-warning); }
.alert-item[data-nivel="info"]    { --alert-accent: var(--i360-primary); }
.alert-text { flex: 1; color: var(--i360-text); }
.alert-text strong { font-weight: 500; }
.alert-action {
  font-size: 0.8rem; color: var(--i360-primary); font-weight: 500;
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.alert-action:hover { color: var(--i360-primary-hover); }
.alert-empty {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 1.75rem 1rem; color: var(--i360-text-muted); font-size: 0.85rem;
}
.alert-empty .i360-ico { color: var(--i360-success); }

/* Top deudores / acreedores */
.top-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1.25rem;
}
.top-item + .top-item { border-top: 1px solid var(--i360-border); }
.top-item .name { font-weight: 500; color: var(--i360-text); font-size: 0.85rem; }
.top-item .meta { font-size: 0.72rem; color: var(--i360-text-faint); margin-top: 0.1rem; }
.top-item .amount { font-weight: 500; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.top-empty { padding: 1.5rem 1rem; text-align: center; color: var(--i360-text-faint); font-size: 0.85rem; }

/* ============================================================
   SHELL: Sidebar + Topbar (identidad i360)
   ============================================================ */
/* Desde 2026-08-11 no hay barra lateral: la navegación vive en el Inicio (cuadros
   que se despliegan) y aquí arriba queda la miga de pan. Se conserva la clase
   .shell porque muchas reglas cuelgan de ella (topbar, toggle flotante). */
body.shell {
  padding-left: 0;
  background: var(--i360-canvas);
  min-height: 100vh;
}

/* Placeholder de la franja del sidebar: evita el flash negro mientras el JS
   pinta el menú al navegar de pantalla en pantalla. */
/* (La franja placeholder del sidebar se retiró junto con la barra.) */

/* ---- SIDEBAR ---- */
.i360-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  background: var(--i360-surface);
  border-right: 1px solid var(--i360-border);
  display: flex;
  flex-direction: column;
  z-index: 40;
  overflow-y: auto;
  box-shadow: 1px 0 0 rgba(0,0,0,0.02);
}
.i360-sidebar::-webkit-scrollbar { width: 6px; }
.i360-sidebar::-webkit-scrollbar-thumb { background: var(--i360-border); border-radius: 3px; }
.i360-sidebar::-webkit-scrollbar-thumb:hover { background: var(--i360-text-faint); }

@media (max-width: 768px) {
  .i360-sidebar { transform: translateX(-100%); transition: transform 0.25s; }
  .i360-sidebar.open { transform: translateX(0); }
}

/* Branding del sidebar */
.i360-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--i360-border);
  position: relative;
}
.i360-sidebar-brand::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 1.25rem; right: 1.25rem;
  height: 2px;
  background: var(--i360-gradient);
  opacity: 0.18;
  border-radius: 1px;
}
.i360-sidebar-brand .logo {
  width: 38px; height: 38px;
  background: var(--i360-primary);
  border-radius: 0.6rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--i360-on-primary); font-weight: 700; font-size: 0.72rem;
  letter-spacing: -0.01em;
}
.i360-sidebar-brand .name {
  font-size: 0.88rem; font-weight: 700; color: var(--i360-text); line-height: 1.1; letter-spacing: -0.01em;
}
.i360-sidebar-brand .lab {
  font-size: 0.62rem; color: #B45309; font-weight: 500;
  display: flex; align-items: center; gap: 0.3rem; margin-top: 0.15rem;
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* Banner de empresa activa */
.i360-empresa-banner {
  padding: 0.85rem 1.25rem;
  background: var(--i360-primary-bg);
  border-bottom: 1px solid var(--i360-border);
  position: relative;
}
.i360-empresa-banner .lbl {
  font-size: 0.58rem; color: var(--i360-primary); text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 700;
}
.i360-empresa-banner .name {
  font-size: 0.85rem; font-weight: 700; color: var(--i360-text); margin-top: 0.2rem; line-height: 1.2;
  letter-spacing: -0.01em;
}
.i360-empresa-banner .cambiar {
  font-size: 0.68rem; color: var(--i360-primary); cursor: pointer; margin-top: 0.3rem;
  font-weight: 500; display: inline-block;
  transition: color 0.12s;
}
.i360-empresa-banner .cambiar:hover { color: var(--i360-primary-hover); }

/* Navegación principal */
.i360-nav {
  flex: 1;
  padding: 0.6rem 0.5rem;
}
.i360-mod {
  list-style: none;
  margin: 0 0 0.1rem 0; padding: 0;
}
.i360-mod-header {
  display: flex; align-items: center;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  user-select: none;
  font-size: 0.85rem;
  color: var(--i360-text-muted);
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 0.15s ease;
  position: relative;
}
.i360-mod-header:hover {
  background: var(--i360-surface-2);
  color: var(--i360-text);
}
.i360-mod-header.active {
  background: var(--i360-primary-bg);
  color: var(--i360-primary-text);
  font-weight: 600;
}
.i360-mod-header.active::before {
  content: '';
  position: absolute;
  left: -0.5rem; top: 0.4rem; bottom: 0.4rem;
  width: 3px;
  background: var(--i360-gradient);
  border-radius: 0 2px 2px 0;
}
.i360-mod.open > .i360-mod-header {
  color: var(--i360-text);
}
/* Ícono de línea inline (Lucide), alineado con texto adyacente */
.i360-ico {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: -0.18em;
  flex-shrink: 0;
}
.i360-ico.spin svg { animation: spin 0.8s linear infinite; }
/* Input de búsqueda con ícono prefijado */
.input-search { position: relative; display: block; }
.input-search > .input-search-ico {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--i360-text-faint); pointer-events: none;
}
.input-search > .form-input { padding-left: 32px; }

.i360-mod-icon {
  width: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 0.65rem;
  opacity: 0.95;
}
.i360-mod-icon svg { width: 18px; height: 18px; }
.i360-mod-label { flex: 1; }
.i360-mod-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--i360-text-faint);
  transition: transform 0.2s ease;
}
.i360-mod-arrow svg { width: 14px; height: 14px; }
.i360-mod.open .i360-mod-arrow { transform: rotate(90deg); color: var(--i360-primary); }

/* Sub-menu */
.i360-submenu {
  list-style: none;
  margin: 0.15rem 0 0.3rem 0; padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}
.i360-sub-grupo {
  margin: .45rem .75rem .15rem;
  padding-top: .45rem;
  border-top: 1px solid var(--i360-border);
  color: var(--i360-text-faint);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.i360-sub-grupo:first-child { margin-top: .1rem; padding-top: 0; border-top: 0; }
.i360-mod.open .i360-submenu { max-height: 600px; }
.i360-sub-item {
  display: flex;
  align-items: center;
  padding: 0.42rem 0.75rem 0.42rem 2.6rem;
  margin: 0.05rem 0;
  font-size: 0.78rem;
  color: var(--i360-text-muted);
  text-decoration: none;
  border-radius: 0.45rem;
  position: relative;
  transition: all 0.12s ease;
}
.i360-sub-item::before {
  content: '';
  position: absolute;
  left: 1.45rem; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px;
  background: var(--i360-text-faint);
  border-radius: 50%;
  transition: all 0.12s;
}
.i360-sub-item:hover {
  background: var(--i360-surface-2);
  color: var(--i360-text);
}
.i360-sub-item:hover::before { background: var(--i360-primary); }
.i360-sub-item.active {
  background: var(--i360-primary-bg);
  color: var(--i360-primary-text);
  font-weight: 600;
}
.i360-sub-item.active::before {
  background: var(--i360-primary);
  box-shadow: 0 0 0 3px var(--i360-primary-bg);
}
.i360-sub-item.disabled {
  color: var(--i360-text-faint);
  cursor: not-allowed;
}
.i360-sub-item.disabled::before { background: var(--i360-border); }
.i360-sub-item.disabled:hover { background: transparent; color: var(--i360-text-faint); }
.i360-sub-item.disabled:hover::before { background: var(--i360-border); }
.i360-sub-item.disabled::after {
  content: 'próx';
  margin-left: auto;
  font-size: 0.55rem;
  background: var(--i360-surface-2);
  color: var(--i360-text-faint);
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Footer del sidebar */
.i360-sidebar-footer {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--i360-border);
  background: var(--i360-surface-2);
  font-size: 0.7rem;
  color: var(--i360-text-faint);
}

/* ---- Encabezado de sección ---- */
.i360-section {
  padding: 0.7rem 0.85rem 0.3rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--i360-text-faint);
}
.i360-nav > .i360-section:first-child { padding-top: 0.25rem; }

/* ---- Módulo como link plano (Inicio, Dashboard) ---- */
.i360-mod-header.flat { text-decoration: none; }
.i360-mod-header.flat.active { background: var(--i360-primary-bg); color: var(--i360-primary-text); }
.i360-mod-header.flat.disabled { cursor: default; color: var(--i360-text-faint); }
.i360-mod-header.flat.disabled:hover { background: transparent; }
.i360-soon {
  margin-left: auto; font-size: 0.6rem; color: var(--i360-text-faint);
  border: 1px solid var(--i360-border); border-radius: 999px; padding: 0.02rem 0.4rem;
}
.i360-mod-tag {
  font-size: 0.55rem; background: var(--i360-warning-bg); color: var(--i360-warning-text);
  padding: 0.05rem 0.3rem; border-radius: 6px; margin-left: 0.3rem;
}

/* ---- Módulo bloqueado (vendible no contratado) / próximamente (Fase G) ---- */
.i360-mod-header.locked, .i360-mod-header.soon { cursor: default; color: var(--i360-text-faint); }
.i360-mod--locked .i360-mod-icon, .i360-mod--soon .i360-mod-icon { opacity: 0.5; }
.i360-mod-badge {
  font-size: 0.55rem; font-weight: 500; white-space: nowrap;
  padding: 0.05rem 0.4rem; border-radius: 999px;
  border: 1px solid var(--i360-border); color: var(--i360-text-faint);
}
.i360-mod-lock { display: inline-flex; color: var(--i360-text-faint); margin-left: 0.35rem; }

/* ---- Botón de colapso a riel ---- */
.i360-collapse-btn {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  padding: 0.6rem 1rem; border: none; background: transparent; cursor: pointer;
  border-top: 1px solid var(--i360-border);
  color: var(--i360-text-muted); font-size: 0.78rem; font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.i360-collapse-btn:hover { background: var(--i360-surface-2); color: var(--i360-text); }
.i360-collapse-ico { display: inline-flex; }
.i360-collapse-ico svg { width: 16px; height: 16px; transform: rotate(180deg); transition: transform 0.2s ease; }

/* Botón colapsar arriba (dentro del brand, siempre visible sin scroll) */
.i360-collapse-top {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  color: var(--i360-text-muted); background: transparent; border: 1px solid transparent;
  cursor: pointer; transition: all 0.15s ease;
}
.i360-collapse-top:hover { background: var(--i360-surface-2); color: var(--i360-text); }
.i360-collapse-top svg { width: 16px; height: 16px; transform: rotate(180deg); }
/* Colapsado: la flecha se queda ARRIBA bajo el logo (siempre visible, sin scroll) apuntando a expandir */
@media (min-width: 769px) {
  body.i360-collapsed .i360-sidebar-brand { flex-direction: column; gap: 4px; }
  body.i360-collapsed .i360-collapse-top { display: inline-flex; margin: 0 auto; }
  body.i360-collapsed .i360-collapse-top svg { transform: rotate(0deg); }
}
@media (max-width: 768px) { body.i360-collapsed .i360-collapse-top { display: inline-flex; } }

/* Enlace "volver al módulo" en el topbar */
.i360-back-mod {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.8rem; font-weight: 600; color: var(--i360-primary);
  padding: 3px 8px; border-radius: 8px; text-decoration: none; white-space: nowrap;
}
.i360-back-mod:hover { background: var(--i360-primary-bg); }
.i360-back-mod svg { width: 15px; height: 15px; }

/* ============================================================
   Modo colapsado a riel (solo escritorio; en móvil = drawer)
   ============================================================ */
@media (min-width: 769px) {
  /* La barra sigue haciendo scroll comprimida; los flyouts salen con position:fixed (no se recortan) */
  body.i360-collapsed .i360-sidebar { width: 64px; overflow-y: auto; overflow-x: hidden; }

  /* Oculta lo textual, conserva íconos */
  body.i360-collapsed .i360-sidebar-brand > div:not(.logo),
  body.i360-collapsed .i360-empresa-banner,
  body.i360-collapsed .i360-section,
  body.i360-collapsed .i360-mod-label,
  body.i360-collapsed .i360-mod-arrow,
  body.i360-collapsed .i360-soon,
  body.i360-collapsed .i360-mod-badge,
  body.i360-collapsed .i360-mod-lock,
  body.i360-collapsed .i360-sidebar-footer,
  body.i360-collapsed .i360-collapse-lbl { display: none; }

  body.i360-collapsed .i360-sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; }
  body.i360-collapsed .i360-mod-header { justify-content: center; padding-left: 0; padding-right: 0; }
  body.i360-collapsed .i360-mod-icon { margin-right: 0; }
  body.i360-collapsed .i360-nav { padding: 0.6rem 0.35rem; }
  body.i360-collapsed .i360-collapse-btn { justify-content: center; }
  body.i360-collapsed .i360-collapse-ico svg { transform: rotate(0deg); }

  /* Submenú → flyout al pasar el mouse */
  body.i360-collapsed .i360-mod { position: relative; }
  body.i360-collapsed .i360-submenu { display: none; }
  body.i360-collapsed .i360-mod:hover > .i360-submenu {
    display: block; position: fixed; left: 64px;
    min-width: 210px; max-height: none; overflow: visible;
    background: var(--i360-surface); border: 1px solid var(--i360-border);
    border-radius: var(--i360-radius-lg); box-shadow: var(--i360-shadow-pop);
    padding: 0.5rem 0.6rem 0.6rem; z-index: 60;
  }
  body.i360-collapsed .i360-mod:hover > .i360-submenu::before {
    content: attr(data-label); display: block;
    font-size: 0.7rem; font-weight: 500; color: var(--i360-text-faint);
    padding: 0 0.4rem 0.35rem; margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--i360-border);
  }
}

/* ---- Trigger de búsqueda (⌘K) en la barra ---- */
.i360-cmdk-trigger {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0.6rem 0.75rem 0.2rem; padding: 0.5rem 0.7rem;
  width: calc(100% - 1.5rem);
  background: var(--i360-surface-2); border: 1px solid var(--i360-border);
  border-radius: 0.6rem; color: var(--i360-text-faint);
  font-size: 0.8rem; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.i360-cmdk-trigger:hover { border-color: var(--i360-primary); color: var(--i360-text-muted); }
.i360-cmdk-ico { display: inline-flex; }
.i360-cmdk-lbl { flex: 1; text-align: left; }
.i360-cmdk-kbd {
  font-size: 0.62rem; border: 1px solid var(--i360-border);
  border-radius: 5px; padding: 0.05rem 0.3rem; color: var(--i360-text-faint);
}
@media (min-width: 769px) {
  body.i360-collapsed .i360-cmdk-trigger { justify-content: center; margin: 0.6rem 0.35rem 0.2rem; padding: 0.5rem 0; width: auto; }
  body.i360-collapsed .i360-cmdk-lbl,
  body.i360-collapsed .i360-cmdk-kbd { display: none; }
}

/* ---- Paleta de comandos (overlay + panel) ---- */
.i360-cmdk-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 1rem 1rem;
}
.i360-cmdk-overlay[hidden] { display: none; }
.i360-cmdk-panel {
  width: 100%; max-width: 560px;
  background: var(--i360-surface); border: 1px solid var(--i360-border);
  border-radius: var(--i360-radius-lg); box-shadow: var(--i360-shadow-pop);
  overflow: hidden;
}
.i360-cmdk-search {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1rem; border-bottom: 1px solid var(--i360-border);
}
.i360-cmdk-search-ico { display: inline-flex; color: var(--i360-text-faint); }
.i360-cmdk-search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 0.95rem; color: var(--i360-text);
}
.i360-cmdk-search input::placeholder { color: var(--i360-text-faint); }
.i360-cmdk-list { list-style: none; margin: 0; padding: 0.4rem; max-height: 50vh; overflow-y: auto; }
.i360-cmdk-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.7rem; border-radius: 0.5rem; cursor: pointer;
}
.i360-cmdk-item-ico { display: inline-flex; color: var(--i360-text-muted); }
.i360-cmdk-item-label { flex: 1; font-size: 0.88rem; color: var(--i360-text); }
.i360-cmdk-item-group { font-size: 0.7rem; color: var(--i360-text-faint); }
.i360-cmdk-item.active { background: var(--i360-primary-bg); }
.i360-cmdk-item.active .i360-cmdk-item-label { color: var(--i360-primary-text); }
.i360-cmdk-item.active .i360-cmdk-item-ico { color: var(--i360-primary); }
.i360-cmdk-empty { padding: 1.2rem; text-align: center; color: var(--i360-text-faint); font-size: 0.85rem; }
.i360-cmdk-foot {
  display: flex; gap: 1rem; padding: 0.5rem 1rem;
  border-top: 1px solid var(--i360-border);
  font-size: 0.68rem; color: var(--i360-text-faint);
}

/* ---- Inicio: tiles de módulo (tinte por categoría) + upsell ---- */
.inicio-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.inicio-tile {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.1rem 1.2rem;
  background: color-mix(in srgb, var(--tile-accent) 9%, var(--i360-surface));
  border: 1px solid var(--i360-border);
  border-radius: var(--i360-radius-lg);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.inicio-tile:hover {
  border-color: var(--tile-accent);
  transform: translateY(-1px);
  box-shadow: var(--i360-shadow-md);
}
.inicio-tile-ico {
  width: 40px; height: 40px; border-radius: 0.6rem;
  background: var(--i360-surface);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tile-accent);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.inicio-tile-label { font-weight: 500; color: var(--i360-text); }
.inicio-tile-desc { font-size: 0.78rem; line-height: 1.3; color: var(--i360-text-muted); }

/* Tiles "Amplía": bloqueado (contratable→demo) y próximamente (teaser) */
.inicio-tile--locked, .inicio-tile--soon {
  background: var(--i360-surface);
  border-style: dashed;
  font: inherit; text-align: left; width: 100%;
}
.inicio-tile--locked { cursor: pointer; }
.inicio-tile--soon { cursor: default; }
.inicio-tile--locked .inicio-tile-ico, .inicio-tile--soon .inicio-tile-ico {
  background: var(--i360-surface-2); color: var(--i360-text-faint); box-shadow: none;
}
.inicio-tile--locked .inicio-tile-label, .inicio-tile--soon .inicio-tile-label { color: var(--i360-text-muted); }
.inicio-tile--locked:hover { border-color: var(--i360-primary); transform: none; box-shadow: none; }
.inicio-tile--soon:hover { border-color: var(--i360-border); transform: none; box-shadow: none; }
.inicio-tile-lock { display: inline-flex; vertical-align: -2px; color: var(--i360-text-faint); }
.inicio-tile-badge {
  align-self: flex-start; font-size: 0.6rem; font-weight: 500;
  padding: 0.1rem 0.45rem; border-radius: 999px;
  border: 1px solid var(--i360-border); color: var(--i360-text-faint);
}

.inicio-upsell {
  margin-top: 1.5rem; padding: 0.85rem 1.1rem;
  border: 1px dashed var(--i360-border); border-radius: var(--i360-radius-md);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: 0.85rem; color: var(--i360-text-muted);
}
.inicio-upsell a { color: var(--i360-primary); font-weight: 500; text-decoration: none; white-space: nowrap; }
.inicio-upsell a:hover { color: var(--i360-primary-hover); }

/* ---- Demo de módulo bloqueado (Fase G/4b) ---- */
.i360-demo-overlay {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(15, 23, 42, 0.5);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.i360-demo-overlay[hidden] { display: none; }
.i360-demo-panel {
  width: 100%; max-width: 560px; position: relative;
  background: var(--i360-surface); border: 1px solid var(--i360-border);
  border-radius: var(--i360-radius-lg); box-shadow: var(--i360-shadow-pop);
  padding: 1.5rem;
}
.i360-demo-close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  display: inline-flex; padding: 0.3rem; border: none; background: transparent;
  color: var(--i360-text-faint); cursor: pointer; border-radius: 0.4rem;
}
.i360-demo-close:hover { background: var(--i360-surface-2); color: var(--i360-text); }
.i360-demo-head { display: flex; align-items: flex-start; gap: 0.9rem; margin-bottom: 1.1rem; padding-right: 1.5rem; }
.i360-demo-ico {
  width: 46px; height: 46px; border-radius: 0.7rem; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--demo-accent) 14%, var(--i360-surface));
  color: var(--demo-accent);
}
.i360-demo-title { font-size: 1.05rem; font-weight: 500; color: var(--i360-text); display: flex; align-items: center; gap: 0.5rem; }
.i360-demo-badge { font-size: 0.6rem; font-weight: 500; padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid var(--i360-border); color: var(--i360-text-faint); }
.i360-demo-pitch { font-size: 0.88rem; color: var(--i360-text-muted); margin-top: 0.25rem; line-height: 1.4; }
.i360-demo-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.2rem; }
@media (max-width: 520px) { .i360-demo-body { grid-template-columns: 1fr; } }
.i360-demo-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.i360-demo-bullets li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; color: var(--i360-text); }
.i360-demo-bullets li svg { color: var(--i360-success); flex-shrink: 0; margin-top: 1px; }
.i360-demo-preview {
  border: 1px solid var(--i360-border); border-radius: var(--i360-radius-md);
  background: var(--i360-surface-2); padding: 0.7rem; overflow: hidden;
}
.i360-demo-pv-bar { display: flex; gap: 0.3rem; margin-bottom: 0.6rem; }
.i360-demo-pv-bar span { height: 8px; border-radius: 999px; background: var(--demo-accent); }
.i360-demo-pv-bar span:first-child { width: 38%; opacity: 0.9; }
.i360-demo-pv-bar span:last-child { width: 20%; opacity: 0.4; }
.i360-demo-pv-rows { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.7rem; }
.i360-demo-pv-rows i { height: 7px; border-radius: 999px; background: var(--i360-border); }
.i360-demo-pv-rows i:nth-child(2) { width: 80%; }
.i360-demo-pv-rows i:nth-child(3) { width: 90%; }
.i360-demo-pv-rows i:nth-child(4) { width: 70%; }
.i360-demo-pv-chart { display: flex; align-items: flex-end; gap: 0.35rem; height: 42px; }
.i360-demo-pv-chart b { flex: 1; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--demo-accent) 55%, transparent); }
.i360-demo-pv-chart b:nth-child(1){height:40%} .i360-demo-pv-chart b:nth-child(2){height:65%}
.i360-demo-pv-chart b:nth-child(3){height:50%} .i360-demo-pv-chart b:nth-child(4){height:85%}
.i360-demo-pv-chart b:nth-child(5){height:70%}
.i360-demo-pv-tag { font-size: 0.6rem; color: var(--i360-text-faint); margin-top: 0.5rem; text-align: center; }
.i360-demo-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.i360-demo-note { font-size: 0.75rem; color: var(--i360-text-faint); }
.i360-demo-err { flex-basis: 100%; font-size: 0.78rem; color: var(--i360-danger); margin-top: 0.1rem; }
.i360-demo-ok { text-align: center; padding: 1rem 0.5rem; }
.i360-demo-ok-ico {
  width: 54px; height: 54px; border-radius: 999px; margin: 0 auto 0.8rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--i360-success-bg); color: var(--i360-success);
}
.i360-demo-ok .i360-demo-title { justify-content: center; }
.i360-demo-ok .i360-demo-pitch { margin: 0.4rem 0 1.1rem; }

/* ---- TOPBAR ---- */
.i360-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--i360-surface) 85%, transparent);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border-bottom: 1px solid var(--i360-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1.75rem;
  height: 58px;
}
.i360-topbar-left {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.88rem; color: var(--i360-text); font-weight: 500;
  min-width: 0;
}
/* Marca del tenant: vuelve al Inicio */
.i360-marca { display: inline-flex; align-items: center; flex: none; border-radius: 8px; padding: 3px 6px;
  background: #fff; border: 1px solid var(--i360-border); }
.i360-marca img { height: 26px; max-width: 120px; object-fit: contain; display: block; }
.i360-marca:hover { border-color: var(--i360-primary); }
/* Miga de pan: el rastro de dónde estás (reemplaza a la barra lateral) */
.i360-migas { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden;
  font-size: 0.88rem; white-space: nowrap; }
.i360-migas a { color: var(--i360-primary); font-weight: 600; text-decoration: none; }
.i360-migas a:hover { text-decoration: underline; }
.i360-migas b { color: var(--i360-text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.i360-miga-sep { color: var(--i360-text-faint); }
/* Empresa activa: clic = cambiar de empresa (antes vivía en el banner del sidebar) */
.i360-empresa-chip { flex: none; font-size: 0.75rem; font-weight: 600; font-family: inherit; cursor: pointer;
  color: var(--i360-text-muted); background: var(--i360-surface-2); border: 1px solid var(--i360-border);
  border-radius: 99px; padding: 4px 11px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.i360-empresa-chip:hover { border-color: var(--i360-primary); color: var(--i360-primary); }
@media (max-width: 900px) { .i360-empresa-chip { display: none; } }
@media (max-width: 640px) {
  /* En móvil solo el tramo actual: el rastro completo no cabe. */
  .i360-migas a, .i360-miga-sep { display: none; }
  .i360-migas a:first-child, .i360-migas .i360-miga-sep:first-of-type { display: none; }
}
/* Buscador en la barra superior (antes vivía en el sidebar) */
.i360-topbar .i360-cmdk-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--i360-surface-2); border: 1px solid var(--i360-border);
  color: var(--i360-text-muted); border-radius: 9px; padding: 6px 11px; font-size: 0.78rem;
  cursor: pointer; font-family: inherit;
}
.i360-topbar .i360-cmdk-trigger:hover { border-color: var(--i360-primary); color: var(--i360-primary); }
.i360-topbar .i360-cmdk-kbd { font-size: 0.68rem; color: var(--i360-text-faint); border: 1px solid var(--i360-border);
  border-radius: 5px; padding: 1px 5px; }
@media (max-width: 900px) { .i360-topbar .i360-cmdk-lbl, .i360-topbar .i360-cmdk-kbd { display: none; } }
.i360-topbar-right {
  display: flex; align-items: center; gap: 1rem;
  font-size: 0.82rem;
}
.i360-topbar-right span.text-gray-500 { color: var(--i360-text-faint); }
.i360-topbar #i360-logout {
  background: var(--i360-surface-2);
  color: var(--i360-text-muted);
  font-weight: 500;
  padding: 0.35rem 0.8rem;
  border-radius: 0.45rem;
  font-size: 0.78rem;
  transition: all 0.15s;
}
.i360-topbar #i360-logout:hover {
  background: var(--i360-danger-bg);
  color: var(--i360-danger-text);
}
.i360-topbar .menu-btn { display: none; }
@media (max-width: 768px) {
  .i360-topbar .menu-btn {
    display: inline-flex;
    background: var(--i360-gradient);
    color: white;
    padding: 0.35rem 0.7rem;
    border-radius: 0.45rem;
    border: none;
    font-size: 0.9rem;
  }
}

.i360-content {
  padding: 1.75rem 1.5rem;
  max-width: 1600px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .i360-content { padding: 2rem 2.25rem; }
}

/* ============================================================
   Tabs de Parámetros contables (cnt-tab)
   ============================================================ */
.cnt-tab {
  padding: 0.65rem 1rem;
  font-size: 0.82rem;
  color: var(--i360-text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  font-weight: 500;
  transition: all 0.15s;
}
.cnt-tab:hover { color: var(--i360-text); background: var(--i360-surface-2); }
.cnt-tab-active {
  color: var(--i360-primary-text);
  border-bottom-color: var(--i360-primary);
  font-weight: 600;
  background: var(--i360-gradient-soft);
}

/* ============================================================
   Section number (compra form)
   ============================================================ */
.section-num {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  background: var(--i360-primary);
  color: #fff;
  border-radius: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
}

/* ============================================================
   Toast
   ============================================================ */
.toast-in  { animation: toast-in 0.25s ease-out; }
.toast-out { animation: toast-out 0.3s ease-in forwards; }
@keyframes toast-in  { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toast-out { to { transform: translateX(20px); opacity: 0; } }

/* ============================================================
   Botón de tema en el topbar (Fase A)
   ============================================================ */
.i360-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--i360-radius-sm);
  color: var(--i360-text-muted);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
}
.i360-theme-btn:hover {
  background: var(--i360-surface-2);
  color: var(--i360-text);
  border-color: var(--i360-border);
}

/* ============================================================
   Utility classes para Fase B (migración indigo/purple → azul)
   Reutilizables en todas las pantallas. NO usan gradientes.
   ============================================================ */

/* --- Botones --- */
.btn-i360-primary {
  background: var(--i360-primary);
  color: var(--i360-on-primary);
  border: 1px solid var(--i360-primary);
  transition: background 0.15s, border-color 0.15s;
}
.btn-i360-primary:hover {
  background: var(--i360-primary-hover);
  border-color: var(--i360-primary-hover);
}

.btn-i360-outline {
  background: var(--i360-surface);
  color: var(--i360-primary);
  border: 1px solid var(--i360-primary-bg);
  transition: all 0.15s;
}
.btn-i360-outline:hover {
  background: var(--i360-primary-bg);
}

.btn-i360-soft {
  background: var(--i360-surface);
  color: var(--i360-text);
  border: 1px solid var(--i360-border);
  transition: all 0.15s;
}
.btn-i360-soft:hover {
  background: var(--i360-surface-2);
}

/* --- Links --- */
.link-i360 { color: var(--i360-primary); transition: color 0.15s; }
.link-i360:hover { color: var(--i360-primary-hover); }

/* --- Tags / badges contextuales (módulo Ventas, Compras, etc.) --- */
.tag-i360-accent {
  background: var(--i360-primary-bg);
  color: var(--i360-primary-text);
}

/* --- Cajas de información sutiles --- */
.info-i360 {
  background: var(--i360-primary-bg);
  border: 1px solid var(--i360-primary-bg);
  color: var(--i360-primary-text);
}

/* --- Superficie con tokens (para reemplazar bg-white) --- */
.surface-i360 { background: var(--i360-surface); box-shadow: var(--i360-shadow-sm); }
.surface-i360-2 { background: var(--i360-surface-2); }
/* Receta v0 en oscuro: la sombra no se ve sobre negro; la tarjeta flota con un
   filo de luz arriba (luz cenital) y una sombra profunda. */
[data-theme="dark"] .surface-i360,
[data-theme="dark"] .section-card {
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 20px rgba(0,0,0,.45);
}

/* --- Texto con tokens --- */
.text-i360       { color: var(--i360-text); }
.text-i360-muted { color: var(--i360-text-muted); }
.text-i360-faint { color: var(--i360-text-faint); }
.border-i360     { border-color: var(--i360-border) !important; }
.divide-i360 > :not([hidden]) ~ :not([hidden]) { border-color: var(--i360-border) !important; }

/* --- Hover row (tablas) --- */
.row-i360-hover:hover { background: var(--i360-primary-bg); }

/* --- Encabezado de grupo colapsable (listas agrupadas: recetas, kardex, productos, movimientos, lotes) --- */
.i360-grupo-header {
  background: rgba(21, 85, 158, 0.12);
  border-top: 1px solid var(--i360-border);
  border-bottom: 1px solid var(--i360-border);
  color: var(--i360-primary);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.i360-grupo-header.is-click { cursor: pointer; user-select: none; }
.i360-grupo-header.is-click:hover { background: rgba(21, 85, 158, 0.18); }
.i360-grupo-header .js-chev { display: inline-block; width: 1.1em; text-align: center; }

/* --- Pestañas internas de página (Recetas: Fórmulas / Empaque) --- */
.rec-tab {
  padding: 0.5rem 0.9rem; font-size: 0.875rem; font-weight: 600;
  color: var(--i360-text-muted); background: none;
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
}
.rec-tab:hover { color: var(--i360-text); }
.rec-tab.active { color: var(--i360-primary); border-bottom-color: var(--i360-primary); }

/* --- Sub-navegación por links (Existencias: Stock / Bodega PT / Kardex / Valorización) --- */
.i360-subnav { display: flex; gap: 2px; border-bottom: 1px solid var(--i360-border); margin-bottom: 1.25rem; flex-wrap: wrap; }
.i360-subnav a {
  padding: 0.5rem 0.9rem; font-size: 0.875rem; font-weight: 600;
  color: var(--i360-text-muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.i360-subnav a:hover { color: var(--i360-text); }
.i360-subnav a.active { color: var(--i360-primary); border-bottom-color: var(--i360-primary); }

/* --- Badges de estado del workflow de pedidos --- */
/* Mantenemos diferenciación visual con dos tonos: primary-bg (más claro)
   y una mezcla más profunda. Si querés agregar otro color de marca, se
   define como nuevo token. */
.badge-i360-programado {
  background: var(--i360-primary-bg);
  color: var(--i360-primary);
}
.badge-i360-facturar {
  background: var(--i360-primary);
  color: var(--i360-on-primary);
}
/* Verde de «ya quedó hecho». Tema-aware, a diferencia de .badge-ok, que trae los
   colores fijos. Lo usa el rol por área: solo el área contabilizada va en verde. */
.badge-i360-ok {
  background: var(--i360-success-bg);
  color: var(--i360-success-text);
}

/* --- Botón seleccionado en modal cambio de estado --- */
.ce-opt-active {
  background: var(--i360-primary-bg) !important;
  border-color: var(--i360-primary) !important;
  color: var(--i360-primary-text);
}

/* --- Highlight efímero (autocompletado de form) --- */
.ring-i360-pulse {
  box-shadow: 0 0 0 2px var(--i360-primary-bg), 0 0 0 4px var(--i360-primary);
  transition: box-shadow 0.2s;
}

/* --- Toasts con tokens semánticos --- */
.bg-i360-toast-info  { background: var(--i360-primary); color: var(--i360-on-primary); }
.bg-i360-toast-ok    { background: var(--i360-success); color: #FFFFFF; }
.bg-i360-toast-error { background: var(--i360-danger);  color: #FFFFFF; }

/* ============================================================
   Dark coherence — fixes globales de patrón (no por pantalla)
   ============================================================ */

/* (a) Inputs/selects: el utility .bg-white no debe ganarle al token.
   Selector calificado por elemento → sube especificidad sobre .bg-white.
   Funciona en claro (surface = blanco) y oscuro (surface = oscuro). */
input.form-input,
select.form-input,
textarea.form-input {
  background-color: var(--i360-surface);
  color: var(--i360-text);
}

/* (b) Tabs por estado (pedidos/facturas): movidas aquí desde los <style>
   locales y tokenizadas. Antes: background white + gradiente morado. */
.estado-tab {
  background: var(--i360-surface);
  border: 1px solid var(--i360-border);
  color: var(--i360-text-muted);
  font-size: 0.8rem; font-weight: 600; padding: 0.5rem 0.85rem;
  border-radius: 0.5rem; white-space: nowrap; cursor: pointer;
  transition: all 0.15s; display: inline-flex; align-items: center; gap: 0.4rem;
}
.estado-tab:hover { border-color: var(--i360-primary); background: var(--i360-surface-2); }
.estado-tab-active { background: var(--i360-primary); border-color: transparent; color: #fff; }
.estado-tab .tab-count {
  background: color-mix(in srgb, var(--i360-text) 14%, transparent);
  color: inherit; font-size: 0.65rem; padding: 0.05rem 0.4rem;
  border-radius: 9999px; font-weight: 700;
}
.estado-tab-active .tab-count { background: rgba(255,255,255,0.25); }

/* (c) Dark polish FINAL — override romo de las utilities neutras de Tailwind,
   SOLO en oscuro y scopeado a la app (body.shell). Reemplaza los puentes
   anteriores y cubre también las clases que pinta el JS dinámicamente.
   Claro y login (sin .shell) quedan intactos.
   QA: vigilar texto/íconos sobre FONDO DE COLOR (un text-gray sobre azul/badge
   no debe oscurecerse hasta ser ilegible) — esos casos se corrigen en Bloque 2. */
[data-theme="dark"] body.shell .bg-white { background-color: var(--i360-surface); }
[data-theme="dark"] body.shell .bg-gray-50,
[data-theme="dark"] body.shell .bg-gray-100 { background-color: var(--i360-surface-2); }
[data-theme="dark"] body.shell .hover\:bg-gray-50:hover,
[data-theme="dark"] body.shell .hover\:bg-gray-100:hover { background-color: var(--i360-surface-2); }
[data-theme="dark"] body.shell .border-gray-100,
[data-theme="dark"] body.shell .border-gray-200,
[data-theme="dark"] body.shell .border-gray-300 { border-color: var(--i360-border); }
[data-theme="dark"] body.shell .text-gray-900,
[data-theme="dark"] body.shell .text-gray-800,
[data-theme="dark"] body.shell .text-gray-700 { color: var(--i360-text); }
[data-theme="dark"] body.shell .text-gray-600,
[data-theme="dark"] body.shell .text-gray-500 { color: var(--i360-text-muted); }
[data-theme="dark"] body.shell .text-gray-400,
[data-theme="dark"] body.shell .text-gray-300 { color: var(--i360-text-faint); }
/* Tinte de tiles del Inicio más vivo en oscuro (solo tiles de color = <a>) */
[data-theme="dark"] a.inicio-tile { background: color-mix(in srgb, var(--tile-accent) 16%, var(--i360-surface)); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) body.shell .bg-white { background-color: var(--i360-surface); }
  :root:not([data-theme]) body.shell .bg-gray-50,
  :root:not([data-theme]) body.shell .bg-gray-100 { background-color: var(--i360-surface-2); }
  :root:not([data-theme]) body.shell .hover\:bg-gray-50:hover,
  :root:not([data-theme]) body.shell .hover\:bg-gray-100:hover { background-color: var(--i360-surface-2); }
  :root:not([data-theme]) body.shell .border-gray-100,
  :root:not([data-theme]) body.shell .border-gray-200,
  :root:not([data-theme]) body.shell .border-gray-300 { border-color: var(--i360-border); }
  :root:not([data-theme]) body.shell .text-gray-900,
  :root:not([data-theme]) body.shell .text-gray-800,
  :root:not([data-theme]) body.shell .text-gray-700 { color: var(--i360-text); }
  :root:not([data-theme]) body.shell .text-gray-600,
  :root:not([data-theme]) body.shell .text-gray-500 { color: var(--i360-text-muted); }
  :root:not([data-theme]) body.shell .text-gray-400,
  :root:not([data-theme]) body.shell .text-gray-300 { color: var(--i360-text-faint); }
  :root:not([data-theme]) a.inicio-tile { background: color-mix(in srgb, var(--tile-accent) 16%, var(--i360-surface)); }
}

/* Radios y checkboxes en color de marca (claro y oscuro) */
input[type="radio"], input[type="checkbox"] { accent-color: var(--i360-primary); }

/* ============================================================
   Árbol de categorías — movido desde el <style> de categorias.html (tokenizado)
   ============================================================ */
.arbol-nodo { border-radius: 0.5rem; transition: background 0.15s; }
.arbol-nodo:hover { background: var(--i360-surface-2); }
.arbol-nodo-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; min-height: 36px; }
.arbol-toggle {
  width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--i360-text-muted); transition: transform 0.15s; border-radius: 0.25rem;
}
.arbol-toggle:hover { background: var(--i360-surface-2); }
.arbol-toggle.expandido { transform: rotate(90deg); }
.arbol-toggle.sin-hijos { visibility: hidden; }
.arbol-children { display: none; margin-left: 1.5rem; border-left: 1px dashed var(--i360-border); padding-left: 0.5rem; }
.arbol-nodo.expandido > .arbol-children { display: block; }
.arbol-icono { font-size: 1rem; }
.arbol-codigo { font-family: ui-monospace, monospace; font-weight: 500; color: var(--i360-text); font-size: 0.8rem; }
.arbol-nombre { color: var(--i360-text); font-size: 0.9rem; }
.arbol-conteo {
  font-size: 0.7rem; color: var(--i360-text-muted);
  background: var(--i360-surface-2); padding: 0.05rem 0.4rem; border-radius: 0.25rem;
}
.arbol-acciones { margin-left: auto; display: none; gap: 0.25rem; }
.arbol-nodo-row:hover .arbol-acciones { display: flex; }
.arbol-btn {
  padding: 0.2rem 0.5rem; font-size: 0.7rem; font-weight: 500;
  border-radius: 0.25rem; border: 1px solid transparent; cursor: pointer;
}
.arbol-btn-add { background: var(--i360-primary-bg); color: var(--i360-primary-text); }
.arbol-btn-add:hover { background: color-mix(in srgb, var(--i360-primary) 18%, var(--i360-surface)); }
.arbol-btn-prod { background: var(--i360-success-bg); color: var(--i360-success-text); }
.arbol-btn-prod:hover { background: color-mix(in srgb, var(--i360-success) 22%, var(--i360-surface)); }
.arbol-btn-edit { background: var(--i360-surface); color: var(--i360-text-muted); border-color: var(--i360-border); }
.arbol-badge { font-size: 0.65rem; font-weight: 500; text-transform: uppercase; padding: 0.05rem 0.35rem; border-radius: 0.25rem; }

/* ============================================================
   Dark polish (Bloque 3): cajas/badges semánticos de Tailwind → tokens de
   estado SOLO en oscuro (look nativo; en claro quedan como Tailwind).
   Mapea bg/text/border de red+rose→danger, amber/orange/yellow→warning,
   emerald/green→success, blue/sky/indigo/cyan→info(primary). Scope body.shell.
   ============================================================ */
[data-theme="dark"] body.shell .bg-red-50, [data-theme="dark"] body.shell .bg-red-100,
[data-theme="dark"] body.shell .bg-rose-50, [data-theme="dark"] body.shell .bg-rose-100 { background-color: var(--i360-danger-bg); }
[data-theme="dark"] body.shell .bg-amber-50, [data-theme="dark"] body.shell .bg-amber-100,
[data-theme="dark"] body.shell .bg-orange-50, [data-theme="dark"] body.shell .bg-yellow-50 { background-color: var(--i360-warning-bg); }
[data-theme="dark"] body.shell .bg-emerald-50, [data-theme="dark"] body.shell .bg-emerald-100,
[data-theme="dark"] body.shell .bg-green-50, [data-theme="dark"] body.shell .bg-green-100 { background-color: var(--i360-success-bg); }
[data-theme="dark"] body.shell .bg-blue-50, [data-theme="dark"] body.shell .bg-sky-50,
[data-theme="dark"] body.shell .bg-indigo-50, [data-theme="dark"] body.shell .bg-cyan-50 { background-color: var(--i360-primary-bg); }

[data-theme="dark"] body.shell .text-red-600, [data-theme="dark"] body.shell .text-red-700,
[data-theme="dark"] body.shell .text-red-800, [data-theme="dark"] body.shell .text-red-900,
[data-theme="dark"] body.shell .text-rose-600, [data-theme="dark"] body.shell .text-rose-700 { color: var(--i360-danger-text); }
[data-theme="dark"] body.shell .text-amber-600, [data-theme="dark"] body.shell .text-amber-700,
[data-theme="dark"] body.shell .text-amber-800, [data-theme="dark"] body.shell .text-amber-900,
[data-theme="dark"] body.shell .text-orange-700 { color: var(--i360-warning-text); }
[data-theme="dark"] body.shell .text-emerald-600, [data-theme="dark"] body.shell .text-emerald-700,
[data-theme="dark"] body.shell .text-emerald-800, [data-theme="dark"] body.shell .text-emerald-900,
[data-theme="dark"] body.shell .text-green-600, [data-theme="dark"] body.shell .text-green-700,
[data-theme="dark"] body.shell .text-green-800, [data-theme="dark"] body.shell .text-green-900 { color: var(--i360-success-text); }
[data-theme="dark"] body.shell .text-blue-700, [data-theme="dark"] body.shell .text-blue-800,
[data-theme="dark"] body.shell .text-blue-900, [data-theme="dark"] body.shell .text-sky-700 { color: var(--i360-primary-text); }

[data-theme="dark"] body.shell .border-red-100, [data-theme="dark"] body.shell .border-red-200,
[data-theme="dark"] body.shell .border-rose-100, [data-theme="dark"] body.shell .border-rose-200 { border-color: color-mix(in srgb, var(--i360-danger) 35%, transparent); }
[data-theme="dark"] body.shell .border-amber-100, [data-theme="dark"] body.shell .border-amber-200,
[data-theme="dark"] body.shell .border-amber-300 { border-color: color-mix(in srgb, var(--i360-warning) 35%, transparent); }
[data-theme="dark"] body.shell .border-emerald-100, [data-theme="dark"] body.shell .border-emerald-200,
[data-theme="dark"] body.shell .border-green-100, [data-theme="dark"] body.shell .border-green-200 { border-color: color-mix(in srgb, var(--i360-success) 35%, transparent); }
[data-theme="dark"] body.shell .border-blue-100, [data-theme="dark"] body.shell .border-blue-200 { border-color: color-mix(in srgb, var(--i360-primary) 35%, transparent); }

/* Flag 2: hover de color en tiles (pedido.js) → tinte de estado oscuro, no claro */
[data-theme="dark"] body.shell .hover\:bg-emerald-50:hover { background-color: var(--i360-success-bg); }
[data-theme="dark"] body.shell .hover\:bg-amber-50:hover { background-color: var(--i360-warning-bg); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) body.shell .bg-red-50, :root:not([data-theme]) body.shell .bg-red-100,
  :root:not([data-theme]) body.shell .bg-rose-50, :root:not([data-theme]) body.shell .bg-rose-100 { background-color: var(--i360-danger-bg); }
  :root:not([data-theme]) body.shell .bg-amber-50, :root:not([data-theme]) body.shell .bg-amber-100,
  :root:not([data-theme]) body.shell .bg-orange-50, :root:not([data-theme]) body.shell .bg-yellow-50 { background-color: var(--i360-warning-bg); }
  :root:not([data-theme]) body.shell .bg-emerald-50, :root:not([data-theme]) body.shell .bg-emerald-100,
  :root:not([data-theme]) body.shell .bg-green-50, :root:not([data-theme]) body.shell .bg-green-100 { background-color: var(--i360-success-bg); }
  :root:not([data-theme]) body.shell .bg-blue-50, :root:not([data-theme]) body.shell .bg-sky-50,
  :root:not([data-theme]) body.shell .bg-indigo-50, :root:not([data-theme]) body.shell .bg-cyan-50 { background-color: var(--i360-primary-bg); }

  :root:not([data-theme]) body.shell .text-red-600, :root:not([data-theme]) body.shell .text-red-700,
  :root:not([data-theme]) body.shell .text-red-800, :root:not([data-theme]) body.shell .text-red-900,
  :root:not([data-theme]) body.shell .text-rose-600, :root:not([data-theme]) body.shell .text-rose-700 { color: var(--i360-danger-text); }
  :root:not([data-theme]) body.shell .text-amber-600, :root:not([data-theme]) body.shell .text-amber-700,
  :root:not([data-theme]) body.shell .text-amber-800, :root:not([data-theme]) body.shell .text-amber-900,
  :root:not([data-theme]) body.shell .text-orange-700 { color: var(--i360-warning-text); }
  :root:not([data-theme]) body.shell .text-emerald-600, :root:not([data-theme]) body.shell .text-emerald-700,
  :root:not([data-theme]) body.shell .text-emerald-800, :root:not([data-theme]) body.shell .text-emerald-900,
  :root:not([data-theme]) body.shell .text-green-600, :root:not([data-theme]) body.shell .text-green-700,
  :root:not([data-theme]) body.shell .text-green-800, :root:not([data-theme]) body.shell .text-green-900 { color: var(--i360-success-text); }
  :root:not([data-theme]) body.shell .text-blue-700, :root:not([data-theme]) body.shell .text-blue-800,
  :root:not([data-theme]) body.shell .text-blue-900, :root:not([data-theme]) body.shell .text-sky-700 { color: var(--i360-primary-text); }

  :root:not([data-theme]) body.shell .border-red-100, :root:not([data-theme]) body.shell .border-red-200,
  :root:not([data-theme]) body.shell .border-rose-100, :root:not([data-theme]) body.shell .border-rose-200 { border-color: color-mix(in srgb, var(--i360-danger) 35%, transparent); }
  :root:not([data-theme]) body.shell .border-amber-100, :root:not([data-theme]) body.shell .border-amber-200,
  :root:not([data-theme]) body.shell .border-amber-300 { border-color: color-mix(in srgb, var(--i360-warning) 35%, transparent); }
  :root:not([data-theme]) body.shell .border-emerald-100, :root:not([data-theme]) body.shell .border-emerald-200,
  :root:not([data-theme]) body.shell .border-green-100, :root:not([data-theme]) body.shell .border-green-200 { border-color: color-mix(in srgb, var(--i360-success) 35%, transparent); }
  :root:not([data-theme]) body.shell .border-blue-100, :root:not([data-theme]) body.shell .border-blue-200 { border-color: color-mix(in srgb, var(--i360-primary) 35%, transparent); }

  :root:not([data-theme]) body.shell .hover\:bg-emerald-50:hover { background-color: var(--i360-success-bg); }
  :root:not([data-theme]) body.shell .hover\:bg-amber-50:hover { background-color: var(--i360-warning-bg); }
}

/* ============================================================
   Pantallas FUERA del shell (login, lobby/elegir empresa,
   crear-empresa, confirmacion): toggle de tema flotante +
   soporte de modo oscuro. Scope body.i360-auth — NO añade
   layout (sin padding de sidebar), solo coherencia de color.
   ============================================================ */
.i360-theme-float {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 60;
  background: var(--i360-surface);
  border-color: var(--i360-border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
body.shell .i360-theme-float { display: none; } /* en Inicio manda el topbar */

/* --- modo oscuro EXPLÍCITO (data-theme="dark") --- */
[data-theme="dark"] body.i360-auth { background-color: var(--i360-canvas); }
/* .gradient-bg tiene una capa blanca opaca (linear-gradient #FFF→#FAFBFC) que
   tapa el background-color: en oscuro reemplazamos TODO el background por canvas
   con glows azules sutiles (no morados). */
[data-theme="dark"] body.i360-auth.gradient-bg {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--i360-primary) 12%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--i360-primary) 10%, transparent) 0%, transparent 45%),
    var(--i360-canvas);
}
[data-theme="dark"] body.i360-auth .bg-white,
[data-theme="dark"] body.i360-auth .bg-white\/80 { background-color: var(--i360-surface); }
[data-theme="dark"] body.i360-auth .bg-gray-50,
[data-theme="dark"] body.i360-auth .bg-gray-100 { background-color: var(--i360-surface-2); }
[data-theme="dark"] body.i360-auth .text-gray-900,
[data-theme="dark"] body.i360-auth .text-gray-800,
[data-theme="dark"] body.i360-auth .text-gray-700 { color: var(--i360-text); }
[data-theme="dark"] body.i360-auth .text-gray-600,
[data-theme="dark"] body.i360-auth .text-gray-500 { color: var(--i360-text-muted); }
[data-theme="dark"] body.i360-auth .text-gray-400,
[data-theme="dark"] body.i360-auth .text-gray-300 { color: var(--i360-text-faint); }
[data-theme="dark"] body.i360-auth .border-gray-100,
[data-theme="dark"] body.i360-auth .border-gray-200,
[data-theme="dark"] body.i360-auth .border-gray-200\/60 { border-color: var(--i360-border); }
/* cajas/badges semánticos → tokens de estado (consistente con la app) */
[data-theme="dark"] body.i360-auth .bg-red-50 { background-color: var(--i360-danger-bg); }
[data-theme="dark"] body.i360-auth .text-red-700 { color: var(--i360-danger-text); }
[data-theme="dark"] body.i360-auth .border-red-200 { border-color: color-mix(in srgb, var(--i360-danger) 35%, transparent); }
[data-theme="dark"] body.i360-auth .bg-green-50,
[data-theme="dark"] body.i360-auth .bg-green-100 { background-color: var(--i360-success-bg); }
[data-theme="dark"] body.i360-auth .text-green-600,
[data-theme="dark"] body.i360-auth .text-green-700 { color: var(--i360-success-text); }
[data-theme="dark"] body.i360-auth .border-green-100 { border-color: color-mix(in srgb, var(--i360-success) 35%, transparent); }
[data-theme="dark"] body.i360-auth .bg-amber-50,
[data-theme="dark"] body.i360-auth .bg-amber-100 { background-color: var(--i360-warning-bg); }
[data-theme="dark"] body.i360-auth .text-amber-700,
[data-theme="dark"] body.i360-auth .text-amber-800,
[data-theme="dark"] body.i360-auth .text-amber-900 { color: var(--i360-warning-text); }
[data-theme="dark"] body.i360-auth .border-amber-200 { border-color: color-mix(in srgb, var(--i360-warning) 35%, transparent); }

/* --- modo oscuro del SISTEMA sin preferencia explícita --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) body.i360-auth { background-color: var(--i360-canvas); }
  :root:not([data-theme]) body.i360-auth.gradient-bg {
    background:
      radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--i360-primary) 12%, transparent) 0%, transparent 45%),
      radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--i360-primary) 10%, transparent) 0%, transparent 45%),
      var(--i360-canvas);
  }
  :root:not([data-theme]) body.i360-auth .bg-white,
  :root:not([data-theme]) body.i360-auth .bg-white\/80 { background-color: var(--i360-surface); }
  :root:not([data-theme]) body.i360-auth .bg-gray-50,
  :root:not([data-theme]) body.i360-auth .bg-gray-100 { background-color: var(--i360-surface-2); }
  :root:not([data-theme]) body.i360-auth .text-gray-900,
  :root:not([data-theme]) body.i360-auth .text-gray-800,
  :root:not([data-theme]) body.i360-auth .text-gray-700 { color: var(--i360-text); }
  :root:not([data-theme]) body.i360-auth .text-gray-600,
  :root:not([data-theme]) body.i360-auth .text-gray-500 { color: var(--i360-text-muted); }
  :root:not([data-theme]) body.i360-auth .text-gray-400,
  :root:not([data-theme]) body.i360-auth .text-gray-300 { color: var(--i360-text-faint); }
  :root:not([data-theme]) body.i360-auth .border-gray-100,
  :root:not([data-theme]) body.i360-auth .border-gray-200,
  :root:not([data-theme]) body.i360-auth .border-gray-200\/60 { border-color: var(--i360-border); }
  :root:not([data-theme]) body.i360-auth .bg-red-50 { background-color: var(--i360-danger-bg); }
  :root:not([data-theme]) body.i360-auth .text-red-700 { color: var(--i360-danger-text); }
  :root:not([data-theme]) body.i360-auth .border-red-200 { border-color: color-mix(in srgb, var(--i360-danger) 35%, transparent); }
  :root:not([data-theme]) body.i360-auth .bg-green-50,
  :root:not([data-theme]) body.i360-auth .bg-green-100 { background-color: var(--i360-success-bg); }
  :root:not([data-theme]) body.i360-auth .text-green-600,
  :root:not([data-theme]) body.i360-auth .text-green-700 { color: var(--i360-success-text); }
  :root:not([data-theme]) body.i360-auth .border-green-100 { border-color: color-mix(in srgb, var(--i360-success) 35%, transparent); }
  :root:not([data-theme]) body.i360-auth .bg-amber-50,
  :root:not([data-theme]) body.i360-auth .bg-amber-100 { background-color: var(--i360-warning-bg); }
  :root:not([data-theme]) body.i360-auth .text-amber-700,
  :root:not([data-theme]) body.i360-auth .text-amber-800,
  :root:not([data-theme]) body.i360-auth .text-amber-900 { color: var(--i360-warning-text); }
  :root:not([data-theme]) body.i360-auth .border-amber-200 { border-color: color-mix(in srgb, var(--i360-warning) 35%, transparent); }
}

/* ============================================================
   IMPRESIÓN — el papel siempre claro, sin tocar el tema de pantalla.
   Forzar tokens claros SOLO en print: la pantalla NO cambia (sin parpadeo),
   y se oculta el "chrome" de la app (sidebar/topbar) que no debe imprimirse.
   ============================================================ */
@media print {
  /* Hoja uniforme para TODOS los documentos imprimibles */
  @page { size: A4; margin: 12mm; }
  :root, :root[data-theme="dark"], :root:not([data-theme]) {
    --i360-canvas: #ffffff !important;
    --i360-surface: #ffffff !important;
    --i360-surface-2: #f3f4f6 !important;
    --i360-border: #cccccc !important;
    --i360-text: #111111 !important;
    --i360-text-muted: #555555 !important;
    --i360-text-faint: #777777 !important;
  }
  html, body, body.shell { background: #ffffff !important; color: #111111 !important; padding-left: 0 !important;
    min-height: 0 !important; height: auto !important; }
  /* Ocultar TODO el chrome de la app (por clase Y por id, por si el CSS llega
     en caché): barra lateral, topbar, banner de soporte y placeholder del shell */
  .i360-sidebar, #i360-sidebar,
  .i360-topbar, #i360-topbar,
  #i360-soporte-bar, #app-shell, #app-header,
  .no-print { display: none !important; }
  main.i360-content { margin: 0 !important; padding: 0 !important; max-width: none !important; min-height: 0 !important; height: auto !important; }
  .bg-white { background: #ffffff !important; }
  /* El documento no debe forzar segunda hoja */
  #doc { margin: 0 !important; }
}

/* ══ iPhone ══════════════════════════════════════════════════════════════════
   Tres cosas rompían el ERP en el teléfono:

   1. ZOOM AL TOCAR UN CAMPO. Safari amplía solo cualquier campo con fuente menor
      a 16px, y al salir deja la página corrida. Los campos usaban 13px, así que
      pasaba SIEMPRE. En móvil van a 16px: no es capricho de diseño, es lo que
      apaga el zoom.
   2. EL NOTCH Y LA BARRA DE ABAJO tapaban contenido: no había ni una regla de
      área segura en todo el proyecto.
   3. TABLAS CORTADAS. Se salían de la pantalla sin poder desplazarlas.        */
@media (max-width: 820px) {
  input, select, textarea,
  .form-input, .form-input-sm, .pa-input, .field {
    font-size: 16px !important;
  }
  /* El área táctil mínima cómoda es 44px: debajo de eso se falla el toque. */
  button, .btn-i360-primary, .btn-i360-outline, a.btn { min-height: 42px; }
  /* Las tablas se desplazan solas en vez de cortarse. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Respeta el notch y la barra inferior de Safari. */
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  main { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* Al cerrar el panel de armado se vuelve al pedido donde estabas y se marca un
   momento: entre veinte pedidos parecidos, encontrarlo a ojo costaba. */
@keyframes pl-vuelvo-anim {
  0%, 100% { background: transparent; }
  15%, 70% { background: rgba(21, 85, 158, .14); }
}
.pl-vuelvo { animation: pl-vuelvo-anim 2.2s ease; border-radius: 8px; }