/* Control Business — design system "Ledger" (v1.4) */
:root {
  /* Neutrals (cool ink scale) */
  --gray-50: #f4f6f9;
  --gray-100: #e9eef4;
  --gray-200: #d5dde8;
  --gray-300: #b8c3d1;
  --gray-400: #8b97a8;
  --gray-500: #647084;
  --gray-600: #4a5568;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0b1220;

  --blue-50: #ecfeff;
  --blue-100: #cffafe;
  --blue-500: #06b6d4;
  --blue-600: #0891b2;
  --blue-700: #0e7490;

  --green-50: #ecfdf5;
  --green-100: #d1fae5;
  --green-600: #059669;
  --green-700: #047857;

  --red-50: #fff1f2;
  --red-100: #ffe4e6;
  --red-500: #f43f5e;
  --red-600: #e11d48;
  --red-700: #be123c;

  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-600: #d97706;
  --amber-700: #b45309;

  --white: #ffffff;

  /* Surfaces & chrome */
  --surface: #eef1f6;
  --surface-elevated: #ffffff;
  --ink: #0b1220;
  --ink-muted: #5b677a;

  /* Shape */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 4px 14px rgba(11, 18, 32, 0.04);
  --shadow-md: 0 8px 28px rgba(11, 18, 32, 0.08);
  --shadow-lg: 0 24px 56px rgba(11, 18, 32, 0.18);
  --shadow-glow: 0 12px 40px color-mix(in srgb, var(--accent) 28%, transparent);

  --sidebar-w: 228px;
  --main-gap: 0;
  --header-h: 56px;
  --bottom-nav-h: 60px;

  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);

  /* Default theme: ink + teal (commerce) */
  --sidebar-bg: #0b1220;
  --sidebar-fg: rgba(236, 242, 248, 0.78);
  --accent: #0d9488;
  --accent-hover: #0f766e;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 28%, transparent);
  --accent-contrast: #ffffff;
}

html[data-theme="ocean"] {
  --sidebar-bg: #0c4a6e;
  --accent: #0284c7;
  --accent-hover: #0369a1;
}

html[data-theme="forest"] {
  --sidebar-bg: #14532d;
  --accent: #16a34a;
  --accent-hover: #15803d;
}

html[data-theme="wine"] {
  --sidebar-bg: #4c0519;
  --accent: #e11d48;
  --accent-hover: #be123c;
}

html[data-theme="indigo"] {
  --sidebar-bg: #1e1b4b;
  --accent: #6366f1;
  --accent-hover: #4f46e5;
}

html[data-theme="charcoal"] {
  --sidebar-bg: #171717;
  --accent: #a3a3a3;
  --accent-hover: #737373;
}

html[data-theme="sunset"] {
  --sidebar-bg: #7c2d12;
  --accent: #ea580c;
  --accent-hover: #c2410c;
}

html[data-theme="rose"] {
  --sidebar-bg: #881337;
  --accent: #f43f5e;
  --accent-hover: #e11d48;
}

html[data-theme="teal"] {
  --sidebar-bg: #134e4a;
  --accent: #2dd4bf;
  --accent-hover: #14b8a6;
}

html[data-theme="amber"] {
  --sidebar-bg: #78350f;
  --accent: #f59e0b;
  --accent-hover: #d97706;
}

html[data-theme="plum"] {
  --sidebar-bg: #4c1d95;
  --accent: #c084fc;
  --accent-hover: #a855f7;
}

html[data-theme="mocha"] {
  --sidebar-bg: #292524;
  --accent: #d6a15c;
  --accent-hover: #b45309;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--font);
  background: var(--surface);
  color: var(--gray-800);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  letter-spacing: -0.01em;
}

body.modal-open {
  overflow: hidden;
}

@media (display-mode: standalone) {
  body {
    min-height: 100dvh;
    overscroll-behavior: none;
  }
}

h1,
h2,
h3,
p {
  margin: 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 1rem;
}

button {
  cursor: pointer;
}

img {
  max-width: 100%;
}

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.is-hidden {
  display: none !important;
}

@keyframes ledger-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ledger-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ledger-shimmer {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* —— Gate crítico (base.css carga primero; !important gana a CSS viejo en SW) —— */
.welcome-screen,
.login-screen {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;
  box-sizing: border-box;
  margin: 0;
}

body:not(.is-authed) .app,
body:not(.is-authed) .bottom-nav,
body:not(.is-authed) .fab {
  display: none !important;
}

body.is-welcome:not(.is-authed) .welcome-screen {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

body.is-login:not(.is-authed) .login-screen {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

body:not(.is-login):not(.is-authed) .login-screen {
  display: none !important;
}

body:not(.is-welcome):not(.is-authed) .welcome-screen {
  display: none !important;
}

body.is-authed .welcome-screen,
body.is-authed .login-screen {
  display: none !important;
}

@keyframes ledger-toast-in {
  from {
    opacity: 0;
    transform: translateX(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ledger-toast-out {
  to {
    opacity: 0;
    transform: translateX(12px) scale(0.96);
  }
}

@keyframes ledger-kpi-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}