/* theme.css — estilos base SOLUFLEX.
   Sustituye al theme.css antiguo (147 líneas con hacks AdminLTE + custom-checkbox).
   Tipografía, foco, scrollbar, links, hr, preloader, motion. */

html, body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-height: 100vh;
  font-weight: var(--font-weight-regular);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-md); }

a {
  color: var(--color-primary-600);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-4) 0;
  opacity: 1;
}

/* Foco accesible global (no anula el de BS5, lo refuerza) */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-ring);
  border-radius: var(--radius-sm);
  transition: box-shadow var(--transition-fast);
}

/* Inputs y selects — fondo, borde, color de texto y placeholder consistentes
   con tokens. Sin esto, BS5 5.3 deja texto casi invisible en modo oscuro
   (color hereda del body pero el placeholder queda gris claro sobre oscuro).
   El fondo usa --color-input-bg (token): en light es la superficie blanca,
   en dark un tono más claro que la tarjeta para que el campo se distinga
   (antes: mismo color que la card → campos "no se distinguían" al cargar XML). */
.form-control,
.form-select {
  background-color: var(--color-input-bg);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.form-control::placeholder,
.form-select::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}
.form-control:focus,
.form-select:focus {
  background-color: var(--color-input-bg);
  color: var(--color-text);
  border-color: var(--color-primary-400);
}
/* Readonly (campos autocompletados al procesar el XML del registro): BS5.3 les
   pone --bs-secondary-bg propio; sin esta regla quedaban fuera de tokens y en
   dark se fundían con la tarjeta. Mismo fondo que un campo editable. */
.form-control[readonly],
.form-select[readonly] {
  background-color: var(--color-input-bg);
}
.form-control:disabled,
.form-select:disabled {
  background-color: var(--color-surface-2);
  color: var(--color-text-muted);
  opacity: 1;
}

/* Scrollbar discreta en superficies principales */
.portal-scrollable {
  scrollbar-width: thin;
  scrollbar-color: var(--color-neutral-300) transparent;
}
.portal-scrollable::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.portal-scrollable::-webkit-scrollbar-thumb {
  background: var(--color-neutral-300);
  border-radius: var(--radius-pill);
}
.portal-scrollable::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-400);
}

/* Preloader SOLUFLEX (sustituye al logo AdminLTE) */
.portal-preloader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  z-index: 9999;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.portal-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
}
.portal-preloader__spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid var(--color-surface-2);
  border-top-color: var(--color-primary-500);
  animation: portal-spin 0.8s linear infinite;
}
.portal-preloader__brand {
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@keyframes portal-spin {
  to { transform: rotate(360deg); }
}

/* Botón flotante de tema (lo pinta nav.php) — círculo limpio, alineado
   verticalmente con el título de página y el botón Salir. */
.portal-theme-toggle {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: 0 var(--space-2);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.portal-theme-toggle:hover {
  background: var(--color-surface-2);
  color: var(--color-primary-700);
  border-color: var(--color-primary-400);
}
.portal-theme-toggle:focus-visible {
  box-shadow: var(--shadow-ring);
  outline: none;
}
.portal-theme-toggle i {
  font-size: 0.95rem;
  line-height: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .portal-preloader__spinner {
    animation: none;
    border-top-color: var(--color-primary-300);
  }
}