/**
 * Factoring Portal - Tema claro/oscuro y estilos base
 */
:root {
  /* Tonos grises claros (opuesto al dark), sin blanco puro */
  --fp-bg: 241 245 249;
  --fp-bg-elevated: 226 232 240;
  --fp-text: 15 23 42;
  --fp-text-muted: 71 85 105;
  --fp-border: 203 213 225;
  --fp-accent: 2 132 199;
  --fp-accent-hover: 3 105 161;
  --fp-header-bg: 226 232 240;
  --fp-input-bg: 241 245 249;
  --fp-input-border: 203 213 225;
}

.dark {
  --fp-bg: 15 23 42;
  --fp-bg-elevated: 30 41 59;
  --fp-text: 248 250 252;
  --fp-text-muted: 148 163 184;
  --fp-border: 51 65 85;
  --fp-accent: 56 189 248;
  --fp-accent-hover: 125 211 252;
  --fp-header-bg: 30 41 59;
  --fp-input-bg: 51 65 85;
  --fp-input-border: 71 85 105;
}

/* Evitar parpadeo al cargar tema */
html.dark {
  color-scheme: dark;
}
html:not(.dark) {
  color-scheme: light;
}

body {
  background-color: rgb(var(--fp-bg));
  color: rgb(var(--fp-text));
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Botón de tema */
.theme-toggle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--fp-bg-elevated));
  border: 1px solid rgb(var(--fp-border));
  color: rgb(var(--fp-text));
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.theme-toggle:hover {
  background: rgb(var(--fp-border));
}
.theme-toggle:active {
  transform: scale(0.96);
}

/* Tooltip informativo (icono (i) en pestañas) */
.tooltip-wrap {
  position: relative;
  cursor: help;
  outline: none;
}
.tooltip-wrap .tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 200px;
  max-width: 280px;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  color: rgb(var(--fp-text));
  background: rgb(var(--fp-bg-elevated));
  border: 1px solid rgb(var(--fp-border));
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 50;
  pointer-events: none;
  text-align: center;
}
.tooltip-wrap:hover .tooltip-text,
.tooltip-wrap:focus .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.tooltip-wrap .tooltip-text::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-bottom-color: rgb(var(--fp-bg-elevated));
}
.dark .tooltip-wrap .tooltip-text {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}