/* Saint ERP — Base Styles */

/* ===========================================================================
   ANTI-FOUC — hide until theme.js applies .dark / removes .js sentinel.
   saint-theme.js adds 'js' to <html> synchronously; after DOMContentLoaded
   initSpaTransitions removes it, triggering the reveal.
   =========================================================================== */
html.js body { visibility: hidden; }

/* ===========================================================================
   THEME CSS VARIABLES — defined here (static CSS) so they work in all
   WebBrowser contexts (WebView2, file://, http://) without depending on
   JS-injected <style> elements (which may be blocked by CSP in FMX hosts).
   saint-theme.js manages only the .dark class toggle on <html>.
   =========================================================================== */

/* Light theme defaults (also :root defaults) - Saint Aurora Tokens */
:root {
  /* color-scheme adapts native UI (scrollbars, form controls, canvas) to theme.
     saint-theme.js toggles .dark on <html>; here we declare both schemes
     supported so the browser can pre-theme before first paint (anti-FOUC). */
  color-scheme: light dark;
  accent-color: var(--saint-accent, #1e88e5);

  --app-base:      #F4F7FB;   /* au-bg — fondo app (Aurora, limpio) */
  --app-surface:   #FFFFFF;   /* au-surface — cards / paneles */
  --app-highlight: #EEF3F9;   /* au-surface-2 — hover sutil */
  --app-border:    #E1E8F0;   /* au-border — borde sutil (sin marco pesado) */
  --app-text-main: #0B1426;   /* au-fg — texto principal */
  --app-text-muted:#5C7390;   /* au-fg-muted — texto secundario */
  --app-text-dim:  #94A3B8;   /* texto apagado */
  /* Direccional: luz desde arriba-izquierda -> sombra al bottom-right. */
  --card-shadow:   inset 1px 1px 0 0 rgba(255, 255, 255, 0.55), 4px 4px 12px -2px rgba(11, 20, 38, 0.13), 2px 2px 5px -1px rgba(11, 20, 38, 0.10); /* elevación direccional (light) */
  --header-bg:     #162C4E;   /* navy de marca (constante en ambos temas) */
  --header-border: #24416D;
  --settings-sidebar-bg: #FAFCFE; /* sidebar de settings integrado a la superficie */

  /* Legacy saint-* vars (kept for backwards compat, updated to Aurora) */
  --saint-primary: #1E88E5;   /* au-accent */
  --saint-accent:  #1E88E5;   /* au-accent */
  /* Divisoria del título en modales de datos (maestros, grupos, usuarios…).
     Azul oscuro derivado del accent: diferencia el header sin robar atención. */
  --saint-head-divider: color-mix(in srgb, var(--saint-accent, #1E88E5) 52%, #000);
  --saint-bg:      #F4F7FB;
  --saint-surface: #FFFFFF;
  --saint-border:  #E1E8F0;
  --saint-text:    #0B1426;
  --saint-text-muted: #5C7390;
}

/* Dark theme — toggled by adding class="dark" to <html>.
   color-scheme: dark narrows native UI to dark, preventing white flashes
   on scrollbars/controls while the .dark class is active. */
.dark {
  color-scheme: dark;
  --app-base:      #0B1426;   /* au-bg — navy Aurora (no gris) */
  --app-surface:   #142238;   /* au-surface — cards sobre el fondo */
  --app-highlight: #1B2D47;   /* au-surface-2 — hover sutil */
  --app-border:    #243756;   /* au-border — borde sutil */
  --app-text-main: #E8EFF7;   /* au-fg — texto principal */
  --app-text-muted:#8FA4BD;   /* au-fg-muted — texto secundario */
  --app-text-dim:  #64748B;   /* texto apagado */
  /* Dark: direccional — luz desde arriba-izquierda. Highlight interno en la
     esquina superior-izquierda + sombra gris (slate) proyectada al bottom-right. */
  --card-shadow:   inset 1px 1px 0 0 rgba(255, 255, 255, 0.06), 5px 5px 14px -3px rgba(71, 85, 105, 0.5), 2px 2px 6px -2px rgba(71, 85, 105, 0.45); /* elevación direccional (dark) */
  --header-bg:     #162C4E;   /* navy de marca (constante) */
  --header-border: #24416D;
  --settings-sidebar-bg: #0F1D30; /* sidebar de settings, navy más profundo */

  --saint-bg:      #0B1426;
  --saint-surface: #142238;
  --saint-border:  #243756;
  --saint-text:    #E8EFF7;
  --saint-text-muted: #8FA4BD;
}

/* ===========================================================================
   FORMS RESET — @tailwindcss/forms base strategy (standalone CLI compatible)
   Provides consistent form element styling across all browsers.
   =========================================================================== */
input:where([type='text']),
input:where([type='password']),
input:where([type='email']),
input:where([type='number']),
input:where([type='url']),
input:where([type='date']),
input:where([type='datetime-local']),
input:where([type='month']),
input:where([type='time']),
input:where([type='week']),
input:where(:not([type])) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--app-surface, #fff);
  border-color: var(--app-border, #cbd5e1);
  border-width: 1px;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--app-text-main, #111827);
  width: 100%;
}
input:where([type='text']):focus,
input:where([type='password']):focus,
input:where([type='email']):focus,
input:where([type='number']):focus,
input:where([type='url']):focus,
input:where([type='date']):focus,
input:where([type='datetime-local']):focus,
input:where([type='month']):focus,
input:where([type='time']):focus,
input:where([type='week']):focus,
input:where(:not([type])):focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, #3b82f6);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  border-color: var(--tw-ring-color, #3b82f6);
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--app-surface, #fff);
  border-color: var(--app-border, #cbd5e1);
  border-width: 1px;
  border-radius: 0.5rem;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--app-text-main, #111827);
  width: 100%;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
}
select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, #3b82f6);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  border-color: var(--tw-ring-color, #3b82f6);
}
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--app-surface, #fff);
  border-color: var(--app-border, #cbd5e1);
  border-width: 1px;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--app-text-main, #111827);
  width: 100%;
  resize: vertical;
}
textarea:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, #3b82f6);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  border-color: var(--tw-ring-color, #3b82f6);
}
input::placeholder,
textarea::placeholder {
  color: var(--app-text-dim, #9ca3af);
}

/* ===========================================================================
   FORM CONTROLS — Acabado Aurora (capa sobre el reset @tailwindcss/forms).
   Unifica inputs, combos y date pickers con el accent Aurora: focus con anillo
   suave, hover sutil, autofill sin caja blanca en dark, y controles nativos
   (checkbox/radio/date) tematizados por accent-color + color-scheme.
   =========================================================================== */
:where(input, select, textarea) {
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}
:where(input, select, textarea):hover:not(:focus):not(:disabled) {
  border-color: var(--au-input-bd, var(--app-text-dim, #94A3B8));
}
input:where([type='text'],[type='password'],[type='email'],[type='number'],[type='url'],[type='date'],[type='datetime-local'],[type='month'],[type='time'],[type='week'],[type='search'],[type='tel'],:not([type])):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--au-accent, var(--saint-accent, #1E88E5));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--au-accent, #1E88E5) 22%, transparent);
}
select { cursor: pointer; }
/* Date/time: el ícono del picker ya lo tematiza color-scheme; solo pulimos hover */
::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .6; transition: opacity .14s ease;
}
::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* Checkbox / radio / range: nativos, tematizados por marca (accesibles) */
input:where([type='checkbox'],[type='radio']) {
  accent-color: var(--au-accent, var(--saint-accent, #1E88E5));
  width: 1rem; height: 1rem; cursor: pointer;
}
input:where([type='range']) { accent-color: var(--au-accent, var(--saint-accent, #1E88E5)); cursor: pointer; }
/* Disabled: apagado y no editable */
:where(input, select, textarea):disabled {
  opacity: .55; cursor: not-allowed;
  background-color: var(--app-highlight, #f1f5f9);
}
/* Autofill: sin caja blanca/amarilla en dark; conserva superficie y texto */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--app-text-main, #111827);
  -webkit-box-shadow: 0 0 0 100px var(--app-surface, #fff) inset;
  caret-color: var(--app-text-main, #111827);
}
/* FIX: el plugin @tailwindcss/forms del vendor usa [type=x] (especificidad
   0,1,0) con background:#fff/border:#6b7280/radius:0 y SIN color — le ganaba a
   nuestro reset input:where([type=x]) (0,0,1). En dark eso dejaba texto claro
   sobre fondo blanco (invisible). Re-declaramos con input[type=x] (0,1,1). */
input[type='text'], input[type='password'], input[type='email'], input[type='number'],
input[type='url'], input[type='date'], input[type='datetime-local'], input[type='month'],
input[type='time'], input[type='week'], input[type='search'], input[type='tel'] {
  background-color: var(--app-surface);
  color: var(--app-text-main);
  border-color: var(--app-border);
  border-radius: 9px;
}

/* Helper utility classes — mirrors Tailwind custom colors in saint-theme.js.
   Defined statically so they work even if JS injection is blocked. */
.bg-app-base      { background-color: var(--app-base); }
.bg-app-surface   { background-color: var(--app-surface); }
.bg-app-highlight { background-color: var(--app-highlight); }
.border-app-border{ border-color: var(--app-border); }
.text-app-text-main  { color: var(--app-text-main); }
.text-app-text-muted { color: var(--app-text-muted); }
.text-app-text-dim   { color: var(--app-text-dim); }
.hover\:bg-app-highlight:hover  { background-color: var(--app-highlight); }
.hover\:text-app-text-main:hover{ color: var(--app-text-main); }

/* Tabular numbers for aligned columns */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Glass effect */
.glass {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.glass-card,
.bg-app-surface.rounded-2xl[class*="border-app-border"],
.bg-app-surface.rounded-xl[class*="border-app-border"] {
  background: var(--app-surface) !important;
  border: 0 !important;
  box-shadow: var(--card-shadow) !important;
}

/* Light mode glass */
.light .glass {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

/* Sidebar */
.sidebar {
  background: var(--app-surface);
  border-right: 1px solid color-mix(in srgb, var(--app-border) 35%, transparent);
  width: 260px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease, transform 0.3s ease;
}

.main-content {
  margin-left: 260px;
  min-height: 100vh;
  transition: margin-left 0.3s ease;
  background-color: var(--app-base);
}

/* Mobile (<1024px): el sidebar fijo de escritorio se OCULTA — la navegación
   móvil es el hamburger del header + overlay #mobile-nav. Sin esto el
   sidebar de 260px se comía la pantalla y el contenido quedaba fuera. */
@media (max-width: 1023px) {
  .sidebar { transform: translateX(-100%); pointer-events: none; }
  .main-content { margin-left: 0; }
}

/* Móvil angosto: el top bar solo conserva lo esencial (hamburger, marca,
   campana, tema, idioma). Estado de red y semáforo de licencia se ocultan —
   viven en Configuración → Licencia. */
@media (max-width: 639px) {
  #network-status-indicator,
  #header-license-badge,
  #top-header .h-5.w-px { display: none !important; }
}

/* Sidebar Collapsed State */
.sidebar.collapsed {
  width: 68px;
}
.sidebar.collapsed .logo-text {
  opacity: 0;
  width: 0;
  pointer-events: none;
}
.sidebar.collapsed .mod-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
}
.sidebar.collapsed .section-label {
  display: none;
}
.sidebar.collapsed .section-divider {
  display: block !important;
}
.sidebar.collapsed .section-header {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.sidebar.collapsed .user-details {
  display: none;
}
.sidebar.collapsed .user-lang-row {
  display: none;
}
.sidebar.collapsed .sidebar-toggle-icon {
  transform: rotate(180deg);
}
.sidebar.collapsed .mod-btn {
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
}
.sidebar.collapsed .user-info-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.sidebar.collapsed #sidebar-user {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.sidebar.collapsed .footer-config-btn {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
.sidebar.collapsed .footer-config-label {
    display: none;
}

.main-content.collapsed-sidebar {
  margin-left: 68px;
}

/* ============================================================
   SPA CONTENT TRANSITIONS — anti-flicker para navigateTo/loadContent
   El #main-content hace fade-out antes del swap y fade-in despues.
   El shell (sidebar, topbar) NUNCA se repinta.
   ============================================================ */
#main-content {
  transition: opacity 0.12s ease-out;
}
#main-content.spa-loading {
  opacity: 0;
  pointer-events: none;
}
/* Capa 2 anti-flicker: HTMX añade htmx-swapping durante el swap:130ms */
#main-content.htmx-swapping {
  opacity: 0;
  transition: opacity 0.08s ease-out;
}
/* Progress bar SPA — aparece en el tope del main-content durante fetch */
#spa-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  z-index: 9999;
  transition: width 0.3s ease, opacity 0.2s ease;
  opacity: 0;
}
#spa-progress.active {
  opacity: 1;
}

/* Animations */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

.animate-fade-in {
  animation: fade-in 0.3s ease forwards;
}

.animate-slide-in {
  animation: slide-in 0.3s ease forwards;
}

/* Sidebar module button */
.mod-btn { transition: all 120ms ease; }
.mod-btn.active {
  background: var(--mod-bg-active, rgba(59, 130, 246, 0.15));
  color: var(--mod-color-active, #60a5fa);
  border-right: 3px solid var(--mod-accent, #3b82f6);
}
.mod-btn:not(.active):hover {
  background: var(--app-highlight);
  color: var(--app-text-main);
}

/* Header themed transition */
#top-header {
  transition: background-color 200ms ease, border-color 200ms ease;
}

/* Dropdown persiana animation */
.dd-menu {
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}
.dd-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Context bar slide */
#context-bar {
  transition: max-height 220ms ease, opacity 180ms ease;
  max-height: 0;
  opacity: 0;
  overflow: visible;
}
#context-bar.visible {
  max-height: 48px;
  opacity: 1;
}

/* Context bar button hover — theme-adaptive */
.ctx-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}
.dark .ctx-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Context menu item active */
.ctx-btn.active-ctx {
  background: var(--ctx-btn-active-bg, var(--app-highlight));
  color: var(--ctx-btn-active-text, #2563eb);
}

/* Context bar dropdown — light: inherit module colors, dark: solid surface */
#context-bar .dd-menu {
  background: inherit;
  color: inherit;
  border-color: var(--app-border);
}
.dark #context-bar .dd-menu {
  background: var(--app-surface);
  color: var(--app-text-main);
}
#context-bar .dd-menu a {
  color: inherit;
  opacity: 0.8;
}
#context-bar .dd-menu a:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
}
.dark #context-bar .dd-menu a:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Header adapts text color to theme when not custom-themed */
#top-header:not(.custom-theme) {
  color: var(--app-text-main);
}
#top-header:not(.custom-theme) .text-white\/90,
#top-header:not(.custom-theme) .text-white\/80 {
  color: var(--app-text-muted);
}
#top-header:not(.custom-theme) .bg-white\/10:hover {
  background-color: var(--app-highlight);
}
#top-header:not(.custom-theme) .bg-black\/10 {
  background-color: var(--app-highlight);
  border-color: var(--app-border);
}
#top-header:not(.custom-theme) .bg-white\/20 {
  background-color: var(--app-border);
}

/* Live status dot */
@keyframes soft-ping {
  0% { opacity: .75; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.2); }
}
.live-ping { animation: soft-ping 1.6s cubic-bezier(0,0,.2,1) infinite; }

/* Header button hover — theme-adaptive */
.header-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}
.dark .header-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
/* Custom-theme header always uses white overlay */
#top-header.custom-theme .header-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}
/* Ensure all header children inherit white text in custom-themed headers */
#top-header.custom-theme,
#top-header.custom-theme button,
#top-header.custom-theme i,
#top-header.custom-theme span,
#top-header.custom-theme .lang-btn {
  color: inherit;
}

/* Light mode: hover:text-white should use text-main instead (white is invisible on light bg) */
:root:not(.dark) .hover\:text-white:hover {
  color: var(--app-text-main);
}

/* Custom scrollbar — dark semi-transparent */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.35);
  border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.55);
}
/* Settings inner sidebar scrollbar */
.settings-scroll::-webkit-scrollbar {
  width: 5px;
}
.settings-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.settings-scroll::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.3);
  border-radius: 3px;
}
.settings-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.5);
}

/* KPI card hover */
.kpi-card { transition: box-shadow 150ms ease, transform 150ms ease; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }

/* Mobile sidebar overlay */
#sidebar-overlay {
  transition: opacity 200ms ease;
  pointer-events: none;
  opacity: 0;
}
#sidebar-overlay.active {
  pointer-events: auto;
  opacity: 1;
}

/* ============================================================
   NATIVE DESKTOP CONTEXT — force desktop layout regardless of
   viewport width. Class 'saint-desktop' is applied to <html>
   by saint-bridge.js when window.__SAINT_DESKTOP__ is set by
   Delphi's InitScript (AddScriptToExecuteOnDocumentCreated).
   ============================================================ */
html.saint-desktop .sidebar {
  transform: none !important;
  z-index: 30;
}
html.saint-desktop .sidebar.open {
  transform: none !important;
}
html.saint-desktop .main-content {
  margin-left: 260px !important;
}
html.saint-desktop .main-content.collapsed-sidebar {
  margin-left: 68px !important;
}
html.saint-desktop .sidebar.collapsed ~ #main-wrapper,
html.saint-desktop #main-wrapper.collapsed-sidebar {
  margin-left: 68px !important;
}
/* Hide mobile-only UI in desktop native context */
html.saint-desktop #sidebar-overlay  { display: none !important; }
html.saint-desktop #mobile-nav       { display: none !important; }
html.saint-desktop .lg\:hidden       { display: none !important; }
html.saint-desktop .lg\:flex         { display: flex !important; }

/* ============================================================
   NATIVE MOBILE CONTEXT
   ============================================================ */
html.saint-mobile .sidebar {
  transform: translateX(-100%);
}
html.saint-mobile .sidebar.open {
  transform: translateX(0);
}
html.saint-mobile .main-content {
  margin-left: 0 !important;
}

@media (max-width: 640px) {
  .glass-card {
    border-radius: 0.75rem;
  }
}

/* Mobile Navigation Overlay — card-based module picker */
#mobile-nav {
  background: var(--app-base);
  animation: fade-in 0.18s ease forwards;
}
#mobile-nav.hidden {
  display: none;
}

/* Module hub card hover */
.group:has(> div > .ph) {
  /* fallback handled via Tailwind classes */
}

/* =====================================================
   Anti-flash HTMX — evitar pestanazos en swaps
   ===================================================== */
.htmx-swapping {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.htmx-added {
  opacity: 0;
}
.htmx-added.htmx-settling {
  opacity: 1;
  transition: opacity 0.2s ease;
}


/* =====================================================
   SPA DUPLICATE HEADER FIX — Sub-pages may include their
   own <header> which duplicates the shell's sticky header.
   Desktop: hide it. Mobile: show inline (no sticky).
   ===================================================== */
@media (min-width: 1024px) {
  #main-wrapper #main-content > #spa-content > header,
  #main-wrapper #main-content > #spa-content > #main-wrapper > header {
    display: none !important;
  }
}
@media (max-width: 1023px) {
  #main-wrapper #main-content > #spa-content > header,
  #main-wrapper #main-content > #spa-content > #main-wrapper > header {
    position: static !important;
    box-shadow: none !important;
  }
}

/* =====================================================
   NATIVE CONTEXT — hide web chrome in native host apps
   ===================================================== */
.ctx-native #sidebar,
.ctx-native #top-header,
.ctx-native #bottom-nav { display: none !important; }
.ctx-native #main-content,
.ctx-native body { padding: 0 !important; }

/* Mobile native: touch targets minimum 44px */
.ctx-mobile button,
.ctx-mobile a,
.ctx-mobile .touch-target { min-height: 44px; min-width: 44px; }

/* Mobile font scale */
.ctx-mobile { font-size: 15px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
.ctx-mobile label, .ctx-mobile .field-label { font-size: 13px; }
.ctx-mobile .section-header { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.ctx-mobile .data-total { font-size: 17px; font-weight: 700; }
.ctx-mobile .font-mono { font-size: 14px; }

/* =====================================================
   Scrollbar — thin dark (compatible dark/light theme)
   Aplicado a todos los contextos: desktop, mobile, WebView2
   ===================================================== */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-text-dim, #4a5568);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted, #8892a4);
}

/* ===========================================================================
   SAINT CONFIG — Settings section component grammar
   Used by /desktop/config/sections/*.html fragments loaded via SPA fetch.
   Doctrina SAINT: solo tokens --app-*, Inter/JetBrains Mono, sin hex, sin CDN.
   Estructura visual: grid 2-col (formulario + lateral logo/licencia),
   tarjetas con header icon+title, inputs consistentes con el resto del shell.
   =========================================================================== */

/* --- Page header: crumb + title + actions --- */
.cfg-section-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 22px;
}
.cfg-section-head .crumb {
  font: 600 11px 'JetBrains Mono', monospace; color: var(--app-text-dim);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px;
}
.cfg-section-head h1 {
  margin: 0; font: 600 21px Inter, sans-serif; color: var(--app-text-main);
  letter-spacing: -0.01em;
}
.cfg-section-head .sub {
  margin: 5px 0 0; font: 400 13.5px Inter, sans-serif; color: var(--app-text-muted);
  max-width: 640px;
}
.cfg-section-head .actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* --- Layout: main form + side rail --- */
.cfg-layout {
  display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start;
}
@media (max-width: 900px) { .cfg-layout { grid-template-columns: 1fr; } }
.cfg-main-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cfg-side-col { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; }

/* --- Card (shared across settings sections) --- */
.saint-card {
  background: var(--app-surface); border: 1px solid var(--app-border);
  border-radius: 14px; overflow: hidden;
}
.saint-card-flush > * + * { border-top: 1px solid var(--app-border); }
.saint-card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--app-border);
}
.saint-card-head-flush { border-bottom: 1px solid var(--app-border); }
.saint-card-icon {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--app-highlight); color: var(--app-text-muted);
  font-size: 17px;
}
.saint-card-icon i { font-size: 18px; }
.saint-card-title {
  margin: 0; font: 600 14px Inter, sans-serif; color: var(--app-text-main);
}
.saint-card-sub {
  margin: 2px 0 0; font: 400 12.5px Inter, sans-serif; color: var(--app-text-muted);
}

/* --- Form fields --- */
.cfg-grid-2 {
  padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 16px;
}
@media (max-width: 640px) { .cfg-grid-2 { grid-template-columns: 1fr; } }
.cfg-field { display: flex; flex-direction: column; min-width: 0; }
.cfg-label {
  font: 500 11.5px Inter, sans-serif; color: var(--app-text-muted);
  margin-bottom: 4px; display: block;
}

/* --- Inputs (consistent with shell) ---
   DOCTRINA WEB: font-size >=1rem evita zoom en iOS; min-height >=44px
   cumple touch targets; :focus-visible garantiza contraste accesible. */
.saint-input {
  width: 100%; border: 1px solid var(--app-border); border-radius: 8px;
  padding: 7px 10px; font: 400 0.875rem/1.4 Inter, sans-serif; color: var(--app-text-main);
  background: var(--app-base); transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 36px; box-sizing: border-box;
}
/* Touch: restaura target accesible (>=44px) y font 1rem (evita zoom iOS) */
@media (pointer: coarse) { .saint-input { min-height: 44px; font-size: 1rem; padding: 10px 12px; } }
select.saint-input { padding-right: 8px; }
.saint-input::placeholder { color: var(--app-text-dim); }
.saint-input:focus-visible {
  outline: none; border-color: var(--saint-accent, #3b82f6);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--saint-accent, #3b82f6) 35%, transparent);
}
.saint-input-mono { font-family: 'JetBrains Mono', monospace; font-size: 0.95rem; font-feature-settings: 'tnum'; }

/* --- Field helpers --- */
.cfg-hint { margin: 4px 0 0; font: 400 11.5px Inter, sans-serif; color: var(--app-text-dim); line-height: 1.45; }
.cfg-note {
  border: 1px solid var(--app-border); border-radius: 8px; padding: 10px 12px;
  background: var(--app-highlight); color: var(--app-text-muted);
  font: 400 12.5px/1.5 Inter, sans-serif;
}
.cfg-field-toggle { flex-direction: row; align-items: center; gap: 10px; }
.cfg-smtp-test-row { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.cfg-smtp-test-row .cfg-hint { margin: 0; }
.cfg-smtp-test-row .cfg-test-ok { color: #16a34a; }
.cfg-smtp-test-row .cfg-test-err { color: #ef4444; }
.cfg-field-toggle > span { font: 500 13px Inter, sans-serif; color: var(--app-text-main); }
.cfg-switch { position: relative; display: inline-flex; flex: none; width: 40px; height: 22px; cursor: pointer; }
.cfg-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cfg-switch-track {
  position: absolute; inset: 0; border-radius: 999px; background: var(--app-border);
  transition: background 0.15s;
}
.cfg-switch-track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.cfg-switch input:checked + .cfg-switch-track { background: var(--saint-accent, #3b82f6); }
.cfg-switch input:checked + .cfg-switch-track::after { transform: translateX(18px); }
.cfg-switch input:disabled + .cfg-switch-track { opacity: 0.5; cursor: default; }

/* --- Buttons --- */
.saint-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none;
  font: 600 0.9rem/1 Inter, sans-serif; padding: 11px 18px; border-radius: 9px;
  cursor: pointer; transition: background 0.15s, opacity 0.15s;
  min-height: 44px; box-sizing: border-box;
}
.saint-btn:disabled { opacity: 0.5; cursor: default; }
.saint-btn-primary { background: var(--saint-accent, #3b82f6); color: #fff; }
.saint-btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--saint-accent, #3b82f6) 88%, #000); }
.saint-btn-ghost {
  background: transparent; color: var(--app-text-muted);
  border: 1px solid var(--app-border);
}
.saint-btn-ghost:hover:not(:disabled) { background: var(--app-highlight); color: var(--app-text-main); }

/* --- Side rail widgets --- */
.cfg-logo-drop {
  margin: 16px 18px; border: 1.5px dashed var(--app-border); border-radius: 10px;
  height: 126px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--app-text-dim); cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.cfg-logo-drop:hover { border-color: var(--saint-accent, #3b82f6); color: var(--saint-accent, #3b82f6); }
.cfg-logo-drop i { font-size: 22px; }
.cfg-logo-drop span { font: 500 12px Inter, sans-serif; }
.cfg-license-row { display: flex; align-items: center; gap: 8px; padding: 16px 18px; }
.cfg-license-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; flex: none; }
.cfg-license-meta { margin: 0; padding: 0 18px 16px; font: 400 12px Inter, sans-serif; color: var(--app-text-muted); line-height: 1.5; }

/* --- Data table — patrón ÚNICO de tablas de datos (config + maestras) ---
   Tipografía base declarada en .saint-table y HEREDADA por las celdas: al no
   fijarla sobre td/th, cede ante cualquier utilidad inline de la página
   (font-mono, font-bold, colores) sin pelear especificidad. En td solo va
   estructura (padding/borde/hover). Alineación numérica vía helper .num.
   Alto volumen (maestros): modificador .saint-table.is-compact. */
.saint-table {
  width: 100%; border-collapse: collapse;
  font: 400 13.5px Inter, sans-serif; color: var(--app-text-main); text-align: left;
}
.saint-table th {
  text-align: left; padding: 11px 16px; font: 700 11px Inter, sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-text-dim);
  border-bottom: 1px solid var(--app-border); white-space: nowrap;
}
.saint-table td {
  padding: 12px 16px; border-bottom: 1px solid var(--app-border);
  vertical-align: middle; transition: background .12s;
}
.saint-table tr:last-child td { border-bottom: 0; }
.saint-table tbody tr:hover td { background: var(--app-highlight); }
.saint-table .mono { font-family: 'JetBrains Mono', monospace; font-feature-settings: 'tnum'; }
.saint-table .num { text-align: right; }
.saint-empty { padding: 36px 16px; text-align: center; color: var(--app-text-muted); }

/* Densidad para tablas maestras de alto volumen (excepción del patrón base) */
.saint-table.is-compact th,
.saint-table.is-compact td { padding: 7px 14px; }
.saint-table.is-compact td p { line-height: 1.25; }
.saint-table.is-compact td button { min-width: 32px; min-height: 32px; }

/* --- Masters: renderer genérico (toolbar de búsqueda/filtros + paginación) --- */
.saint-toolbar { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.saint-search { position: relative; flex: 1 1 280px; min-width: 220px; }
.saint-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--app-text-dim); font-size: 15px; pointer-events: none; }
.saint-search .saint-input { width: 100%; padding-left: 34px; }
.saint-filter { display: flex; align-items: center; gap: 8px; flex: none; }
.saint-pager { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--app-border); }
.saint-pager-btns { display: flex; align-items: center; gap: 10px; }
.saint-modal-section { font: 700 11px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--app-text-dim); padding: 8px 0 2px; border-top: 1px solid var(--app-border); margin-top: 4px; }
/* Asterisco rojo de campo obligatorio — mecanismo ÚNICO app-wide: cualquier
   .cfg-field cuyo control tenga `required` muestra * en su .cfg-label.
   ::after es pseudo-elemento → sobrevive applyTranslations (que fija textContent). */
.cfg-field:has(:required) .cfg-label::after,
/* también cualquier <label> seguido inmediatamente de un control required
   (estructuras label+input adyacentes: .lic-lbl+.lic-inp, etc.) */
label:has(+ :required)::after { content: " *"; color: #ef4444; font-weight: 700; }
.req-mark { color: #ef4444; font-weight: 700; margin-left: 3px; }
/* Modo "Ver" (detalle read-only): sin asterisco de obligatorio — no se edita.
   Los inputs siguen con `required` (para reusar el mismo form), así que se
   suprime el marcador aquí en vez de tocar el markup. */
.saint-modal.is-view .cfg-field:has(:required) .cfg-label::after,
.saint-modal.is-view label:has(+ :required)::after,
.saint-modal.is-view .req-mark { content: none; display: none; }

/* Document/tax type pills */
.saint-pill {
  display: inline-block; padding: 3px 9px; border-radius: 9999px;
  font: 700 10px Inter, sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
}
.saint-pill-accent { background: color-mix(in srgb, var(--saint-accent, #3b82f6) 18%, transparent); color: var(--saint-accent, #3b82f6); }
.saint-pill-warn   { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #f59e0b; }
.saint-pill-ok     { background: color-mix(in srgb, #16a34a 18%, transparent); color: #16a34a; }
.saint-pill-muted  { background: color-mix(in srgb, var(--app-text-dim) 22%, transparent); color: var(--app-text-muted); }
.saint-pill-default{ background: color-mix(in srgb, var(--saint-accent, #3b82f6) 12%, transparent); color: var(--saint-accent, #3b82f6); }

/* Inline preview chip (mono) */
.saint-preview {
  font-family: 'JetBrains Mono', monospace; background: var(--app-base);
  padding: 4px 9px; border-radius: 4px; border: 1px solid var(--app-border);
  display: inline-block; color: var(--saint-accent, #3b82f6);
  font-weight: 600; font-size: 12px; font-feature-settings: 'tnum';
}

/* Row mini-actions */
.saint-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.saint-btn-mini {
  padding: 5px 11px; font: 500 12px Inter, sans-serif; min-height: 32px;
  border: 1px solid var(--app-border); border-radius: 6px;
  background: transparent; color: var(--app-text-muted); cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.saint-btn-mini:hover { color: var(--app-text-main); border-color: var(--app-text-dim); }
.saint-btn-mini.danger { color: #ef4444; }
.saint-btn-mini.danger:hover { color: #dc2626; border-color: #ef4444; }

/* Station/store tag */
.saint-tag {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font: 500 11px Inter, sans-serif; color: var(--app-text-muted); background: var(--app-highlight);
}
.saint-tag-global { color: var(--saint-accent, #3b82f6); background: color-mix(in srgb, var(--saint-accent, #3b82f6) 12%, transparent); }

/* --- Modal (config sections) --- */
.saint-modal-back {
  position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; padding: 16px;
}
.saint-modal-back.show { display: flex; }
.saint-modal {
  background: var(--app-surface); border: 1px solid var(--app-border);
  border-radius: 14px; width: 100%; max-width: 520px; max-height: 90vh; overflow: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.saint-modal-head { padding: 16px 20px; border-bottom: 2px solid var(--saint-head-divider); }
.saint-modal-head h3 { margin: 0; font: 700 16.5px Inter, sans-serif; letter-spacing: -0.01em; color: var(--app-text-main); }
/* Header reusable para modales de datos hand-rolled (grupos/usuarios/roles):
   misma divisoria azul + título bold que .saint-modal-head. Se aplica junto a
   las utilidades Tailwind existentes (reemplaza `border-b border-app-border`). */
.saint-form-head { border-bottom: 2px solid var(--saint-head-divider) !important; }
.saint-form-head h3, .saint-form-head .saint-form-title { font-weight: 700 !important; letter-spacing: -0.01em; }
.saint-modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.saint-modal-foot { padding: 14px 20px; border-top: 1px solid var(--app-border); display: flex; justify-content: flex-end; gap: 10px; }
.saint-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
@media (max-width: 540px) { .saint-modal-grid { grid-template-columns: 1fr; } }
.saint-modal-preview-box {
  margin-top: 4px; padding: 10px 14px; background: var(--app-base);
  border-radius: 8px; border: 1px solid var(--app-border);
}
.saint-modal-preview-label { font: 600 10px Inter, sans-serif; color: var(--app-text-dim); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; }

/* Visually-hidden helper for accessible labels (WCAG). display:none removes
   from a11y tree, so use the canonical clip-path recipe instead. */
.sr-only {
  position: absolute; clip-path: inset(50%); overflow: hidden;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; white-space: nowrap;
}

/* Status indicator dot (active/inactive rows) */
.saint-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--app-text-dim); }
.saint-status-dot.on { background: #16a34a; }

/* Rate cell (mono, accent-colored, for tax/price values) */
.saint-rate { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--saint-accent, #3b82f6); font-feature-settings: 'tnum'; }

/* Scope pill (national/state/municipal) */
.saint-scope-pill {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font: 700 10px Inter, sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--app-highlight); color: var(--app-text-muted);
}
.saint-scope-pill.national { background: color-mix(in srgb, var(--saint-accent, #3b82f6) 12%, transparent); color: var(--saint-accent, #3b82f6); }

/* Applies-to flags (Vtas/Cmp badges) */
.saint-applies-flags { display: flex; gap: 4px; }
.saint-applies-flag {
  display: inline-block; padding: 2px 7px; border-radius: 3px;
  font: 600 10px Inter, sans-serif; letter-spacing: 0.03em;
  background: var(--app-highlight); color: var(--app-text-muted);
}
.saint-applies-flag.on { background: color-mix(in srgb, #16a34a 14%, transparent); color: #16a34a; }

/* Checkbox row (modal flags) */
.saint-check-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 4px; }
.saint-check-row label {
  display: flex; align-items: center; gap: 8px;
  font: 500 0.85rem Inter, sans-serif; color: var(--app-text-main); cursor: pointer;
}
.saint-check-row input[type=checkbox] { accent-color: var(--saint-accent, #3b82f6); width: 18px; height: 18px; }

/* Small muted helper text */
.saint-muted-small { color: var(--app-text-muted); font-size: 0.75rem; }

/* "Próximamente" placeholder for reserved config sections */
.saint-coming-soon {
  padding: 56px 24px; text-align: center;
}

/* When a settings tab is resolved via legacy fragment fetch, the host pane
   (#settings-params) loses its own border/bg/padding so the inner saint-card
   containers don't appear nested inside a redundant frame. */
#settings-params.settings-legacy-pane {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.saint-coming-soon-icon {
  font-size: 48px; color: var(--app-text-dim); opacity: 0.4; margin-bottom: 14px;
}
.saint-coming-soon-icon i { font-size: 48px; }
.saint-coming-soon h3 {
  margin: 0 0 8px; font: 600 1.05rem Inter, sans-serif; color: var(--app-text-main);
}
.saint-coming-soon p {
  margin: 0 auto; max-width: 480px; font: 400 0.875rem/1.6 Inter, sans-serif; color: var(--app-text-muted);
}

/* Info callout (used by formatos / informational sections) */
.saint-callout {
  margin-top: 24px; padding: 14px 18px;
  background: color-mix(in srgb, var(--saint-accent, #3b82f6) 8%, transparent);
  border-left: 3px solid var(--saint-accent, #3b82f6); border-radius: 6px;
}
.saint-callout-label {
  font: 700 10px Inter, sans-serif; color: var(--saint-accent, #3b82f6);
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px;
}
.saint-callout p { margin: 0; font: 400 0.875rem/1.55 Inter, sans-serif; color: var(--app-text-main); }
.saint-callout code, .saint-code-inline {
  font-family: 'JetBrains Mono', monospace; font-size: 0.8rem;
  padding: 1px 6px; background: var(--app-highlight); border-radius: 3px; color: var(--app-text-main);
}

/* Chrome Autofill styles to prevent white background/white font issues in dark theme */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--app-text-main) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--app-surface) inset !important;
  box-shadow: 0 0 0 1000px var(--app-surface) inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Sidebar header / topbar logo area */
.sidebar-header {
  background-color: var(--header-bg) !important;
  border-bottom: 1px solid var(--header-border) !important;
}
.sidebar-header h1, .sidebar-header p, .sidebar-header i {
  color: #ffffff !important;
}

/* Hide duplicate settings section headers/actions and stack legacy grids */
.settings-legacy-pane .cfg-section-head {
  display: none !important;
}
.settings-legacy-pane .cfg-layout {
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}
.settings-legacy-pane .cfg-side-col {
  position: static !important;
  width: 100% !important;
}

/* Strip cards styling to achieve a flat, continuous settings layout */
.settings-legacy-pane .saint-card,
.settings-legacy-pane .glass-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 24px !important;
}
.settings-legacy-pane .saint-card-head {
  background: transparent !important;
  border-bottom: 1px solid var(--app-border) !important;
  padding: 12px 0 !important;
  margin-bottom: 16px !important;
}

/* === Accessibility: respect reduced-motion preference (WCAG 2.3.3) === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
