/* ==========================================================================
   BodegaApp · Tema Futurista
   Capa de tematización sobre Vali Admin + Bootstrap 4.
   Paleta corporativa: #0D0D0D (negro) · #FFDB24 (amarillo) · #F5F5F5 (blanco humo)
   Se carga después de main.css / estilos.css para tomar precedencia en cascada.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

/* --------------------------------------------------------------------------
   1. Variables de tema
   -------------------------------------------------------------------------- */
:root {
  --corp-black: #0D0D0D;
  --corp-yellow: #FFDB24;
  --corp-white: #F5F5F5;

  --font-display: "Sora", "Lato", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", "Lato", -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Modo claro (por defecto) ---- */
  --bg: #F5F5F5;
  --bg-soft: #ECECEC;
  --surface: #FFFFFF;
  --surface-alt: #FBFBFB;
  --surface-raised: #FFFFFF;
  --border: rgba(13, 13, 13, 0.09);
  --border-strong: rgba(13, 13, 13, 0.16);
  --text: #0D0D0D;
  --text-muted: rgba(13, 13, 13, 0.58);
  --text-faint: rgba(13, 13, 13, 0.4);
  --accent: #FFDB24;
  --accent-strong: #E9C300;
  --accent-ink: #0D0D0D;
  --accent-glow: rgba(255, 219, 36, 0.35);
  --shadow-color: 220 20% 15%;
  --shadow-sm: 0 1px 2px rgba(13, 13, 13, 0.06), 0 1px 1px rgba(13, 13, 13, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(13, 13, 13, 0.16), 0 2px 8px rgba(13, 13, 13, 0.06);
  --shadow-lg: 0 20px 45px -12px rgba(13, 13, 13, 0.22);
  --header-bg: linear-gradient(180deg, #141414 0%, #0D0D0D 100%);
  --sidebar-bg: var(--surface);
  --scrollbar-thumb: rgba(13, 13, 13, 0.22);
}

:root[data-theme="dark"] {
  --bg: #0D0D0D;
  --bg-soft: #131313;
  --surface: #161616;
  --surface-alt: #1B1B1B;
  --surface-raised: #1D1D1D;
  --border: rgba(245, 245, 245, 0.08);
  --border-strong: rgba(245, 245, 245, 0.16);
  --text: #F5F5F5;
  --text-muted: rgba(245, 245, 245, 0.62);
  --text-faint: rgba(245, 245, 245, 0.4);
  --accent: #FFDB24;
  --accent-strong: #FFE562;
  --accent-ink: #0D0D0D;
  --accent-glow: rgba(255, 219, 36, 0.25);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 25px 60px -15px rgba(0, 0, 0, 0.7);
  --header-bg: linear-gradient(180deg, #121212 0%, #0A0A0A 100%);
  --sidebar-bg: #121212;
  --scrollbar-thumb: rgba(245, 245, 245, 0.18);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg) !important;
  color: var(--text);
  font-family: var(--font-body);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

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

/* Scrollbar futurista */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   2. Header
   -------------------------------------------------------------------------- */
.app-header {
  background: var(--header-bg) !important;
  border-bottom: 1px solid rgba(255, 219, 36, 0.18);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
}

.app-header__logo h3 {
  font-family: var(--font-display) !important;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, var(--corp-yellow), #fff2b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700 !important;
}

.app-sidebar__toggle:hover,
.app-sidebar__toggle:focus {
  background-color: rgba(255, 219, 36, 0.12) !important;
  color: var(--corp-yellow) !important;
}

.app-search__input {
  background: rgba(245, 245, 245, 0.06);
  border: 1px solid rgba(245, 245, 245, 0.12);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: #fff;
  transition: all 0.2s var(--ease);
}

.app-search__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.app-search__input::placeholder {
  color: rgba(245, 245, 245, 0.4);
}

.app-search__button {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(245, 245, 245, 0.06);
  border: 1px solid rgba(245, 245, 245, 0.12);
  border-left: none;
  color: #fff;
  transition: all 0.2s var(--ease);
}

.app-search__button:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

.app-nav__item:hover,
.app-nav__item:focus {
  background-color: rgba(255, 219, 36, 0.1) !important;
  color: var(--corp-yellow) !important;
}

/* Toggle de tema (sol / luna) */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 9px 6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 219, 36, 0.25);
  background: rgba(255, 219, 36, 0.06);
  color: var(--corp-yellow);
  cursor: pointer;
  transition: transform 0.35s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.theme-toggle:hover {
  background: var(--corp-yellow);
  color: var(--corp-black);
  box-shadow: 0 0 18px var(--accent-glow);
  transform: rotate(20deg);
}

.theme-toggle i {
  font-size: 16px;
  pointer-events: none;
}

.theme-toggle .fa-sun-o {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .fa-moon-o {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .fa-sun-o {
  display: inline-block;
}

/* --------------------------------------------------------------------------
   3. Sidebar / menú
   -------------------------------------------------------------------------- */
.app-sidebar {
  background-color: var(--sidebar-bg) !important;
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.app-sidebar__user {
  border-bottom: 1px solid var(--border);
  padding-bottom: 18px;
}

.app-sidebar__user-avatar img {
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}

.app-sidebar__user-name {
  color: var(--text) !important;
  font-weight: 600;
  font-family: var(--font-display);
}

.app-menu__item {
  color: var(--text-muted) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 2px 8px 2px 0;
  font-family: var(--font-body) !important;
}

.app-menu__item.active,
.app-menu__item:hover,
.app-menu__item:focus {
  background: linear-gradient(90deg, rgba(255, 219, 36, 0.16), rgba(255, 219, 36, 0.02)) !important;
  border-left-color: var(--corp-yellow) !important;
  color: var(--text) !important;
}

.app-menu__item.active {
  font-weight: 700;
}

.app-menu__item.active .app-menu__icon,
.app-menu__item:hover .app-menu__icon {
  color: var(--corp-yellow);
}

.app-menu__icon {
  color: var(--text-faint);
  transition: color 0.2s var(--ease);
}

/* Submenús (treeview) - ej. "Reportes" */
.treeview.is-expanded [data-toggle='treeview'] {
  background: rgba(255, 219, 36, 0.1) !important;
  border-left-color: var(--corp-yellow) !important;
  color: var(--text) !important;
}

.treeview-menu {
  background: var(--surface-alt) !important;
}

.treeview-item {
  color: var(--text-muted) !important;
}

.treeview-item.active,
.treeview-item:hover,
.treeview-item:focus {
  background: rgba(255, 219, 36, 0.12) !important;
  color: var(--text) !important;
}

/* --------------------------------------------------------------------------
   4. Contenido / encabezados de vista
   -------------------------------------------------------------------------- */
.app-content {
  background: var(--bg);
}

.app-title {
  background: var(--surface) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.app-title h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-title h1 .fa {
  color: var(--corp-black);
  background: var(--accent);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

:root[data-theme="dark"] .app-title h1 .fa {
  color: var(--accent-ink);
}

.app-title span,
.app-title small {
  color: var(--text-muted) !important;
}

/* --------------------------------------------------------------------------
   5. Tarjetas / tiles
   -------------------------------------------------------------------------- */
.tile,
.card,
.menu,
.menu-sp {
  background: var(--surface) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--text);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.tile:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--border-strong);
}

.tile .tile-title,
.tile .tile-title-w-btn .title {
  font-family: var(--font-display);
  color: var(--text);
}

.tile .tile-title-w-btn {
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}

.tile .tile-footer {
  border-top: 1px solid var(--border);
}

.tile h6.text-muted,
.tile .text-muted {
  color: var(--text-faint) !important;
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.tile h3,
.tile h4 {
  font-family: var(--font-display);
  font-weight: 700;
}

.card-body,
.card-header {
  background: transparent;
  border-color: var(--border);
}

/* --------------------------------------------------------------------------
   6. Botones
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary,
.badge-primary {
  background: linear-gradient(135deg, var(--corp-yellow), #E9C300) !important;
  border-color: var(--corp-yellow) !important;
  color: var(--accent-ink) !important;
}

.btn-primary:hover {
  box-shadow: 0 8px 20px -6px var(--accent-glow);
  transform: translateY(-1px);
}

.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

.btn-secondary {
  background: transparent !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}

.btn-secondary:hover {
  background: var(--surface-alt) !important;
  border-color: var(--corp-yellow) !important;
  color: var(--text) !important;
}

.btn-outline-primary {
  border-color: var(--corp-yellow) !important;
  color: var(--text) !important;
}

.btn-outline-primary:hover {
  background: var(--corp-yellow) !important;
  color: var(--accent-ink) !important;
}

.btn-block.btn-primary {
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   7. Formularios
   -------------------------------------------------------------------------- */
.form-control,
select.form-control,
.custom-select {
  background-color: var(--surface-alt) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.form-control::placeholder {
  color: var(--text-faint);
}

.form-control:focus,
select.form-control:focus {
  background-color: var(--surface) !important;
  border-color: var(--corp-yellow) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
  color: var(--text) !important;
}

label,
.control-label {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   8. Tablas / DataTables
   -------------------------------------------------------------------------- */
.table {
  color: var(--text);
}

.table thead th {
  border-bottom: 2px solid var(--border-strong);
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  font-family: var(--font-display);
  background: var(--surface-alt);
}

.table td,
.table th {
  border-color: var(--border);
  vertical-align: middle;
}

.table-hover tbody tr:hover {
  background-color: rgba(255, 219, 36, 0.08);
  color: var(--text);
}

.table-bordered {
  border-color: var(--border);
}

.table-bordered td,
.table-bordered th {
  border-color: var(--border);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing {
  color: var(--text-muted);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background-color: var(--surface-alt);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm) !important;
  border: 1px solid transparent !important;
  color: var(--text) !important;
  margin-left: 3px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--corp-yellow) !important;
  border-color: var(--corp-yellow) !important;
  color: var(--accent-ink) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--surface-alt) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}

/* --------------------------------------------------------------------------
   9. Badges / alertas / popovers
   -------------------------------------------------------------------------- */
.badge {
  border-radius: 999px;
  font-weight: 700;
  padding: 0.35em 0.75em;
}

.popover {
  background-color: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
}

.popover-body {
  color: var(--text);
}

.bs-popover-top > .arrow::after,
.bs-popover-auto[x-placement^="top"] > .arrow::after {
  border-top-color: var(--surface);
}

.dropdown-item {
  color: var(--text);
  border-radius: var(--radius-sm);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(255, 219, 36, 0.14);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   10. Widgets varios (dashboard / perfiles)
   -------------------------------------------------------------------------- */
.widget-small {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all 0.2s var(--ease);
}

.widget-small:hover {
  background: rgba(255, 219, 36, 0.1) !important;
  opacity: 1 !important;
  border-color: var(--corp-yellow);
}

.nombre,
.usuario {
  color: var(--text) !important;
}

.perfil {
  color: var(--text-muted) !important;
}

.ingreso,
.ganancia {
  background-color: rgba(255, 219, 36, 0.14) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm);
}

.gananciaInterna {
  color: var(--text-muted) !important;
}

/* --------------------------------------------------------------------------
   11. SweetAlert2
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] .swal2-popup {
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--border);
}

:root[data-theme="dark"] .swal2-title,
:root[data-theme="dark"] .swal2-content {
  color: var(--text);
}

.swal2-styled.swal2-confirm {
  background: var(--corp-yellow) !important;
  color: var(--accent-ink) !important;
  border-radius: var(--radius-sm) !important;
}

.swal2-styled.swal2-cancel {
  border-radius: var(--radius-sm) !important;
}

/* --------------------------------------------------------------------------
   12. Loader / progreso
   -------------------------------------------------------------------------- */
.pace .pace-progress {
  background: var(--corp-yellow) !important;
  height: 3px;
  box-shadow: 0 0 10px var(--accent-glow);
}

/* fakeLoader pinta su color de fondo inline (bgColor: "#F0F0F0" en plantilla.php),
   lo que provocaba un flash claro con puntos azules sobre el tema oscuro.
   El !important gana sobre el estilo inline y lo deja siempre en sintonía con el tema activo. */
#fakeLoader {
  background-color: var(--bg) !important;
}

.spinner7 > div {
  background-color: var(--corp-yellow) !important;
  box-shadow: 0 0 10px var(--accent-glow);
}

/* --------------------------------------------------------------------------
   13. Login
   -------------------------------------------------------------------------- */
.login-content {
  background: radial-gradient(circle at 15% 20%, rgba(255, 219, 36, 0.12), transparent 45%),
              radial-gradient(circle at 85% 80%, rgba(255, 219, 36, 0.08), transparent 40%),
              var(--corp-black);
  min-height: 100vh;
}

body > .row {
  background: var(--corp-black);
  min-height: 100vh;
}

body > .row > .col-lg-8 {
  position: relative;
}

body > .row > .col-lg-8::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(13, 13, 13, 0.15) 0%, rgba(13, 13, 13, 0.75) 100%);
}

@media (max-width: 991px) {
  body > .row > .col-lg-8 {
    display: none;
  }
}

.login-content .login-box {
  background: rgba(23, 23, 23, 0.85) !important;
  border: 1px solid rgba(255, 219, 36, 0.18);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
  color: var(--corp-white);
}

.login-content .login-box label,
.login-content .login-box .login-head {
  color: var(--corp-white) !important;
  border-color: rgba(255, 255, 255, 0.12);
  font-family: var(--font-display);
}

.login-content .login-box .form-control {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}

.login-content .login-box .form-control:focus {
  border-color: var(--corp-yellow) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

.login-content .login-box .form-control::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.login-content .login-box a {
  color: var(--corp-yellow);
}

/* --------------------------------------------------------------------------
   14. Utilidades responsivas / transición global de tema
   -------------------------------------------------------------------------- */
.app-header,
.app-sidebar,
.app-title,
.tile,
.card,
.form-control,
.table,
.login-content .login-box {
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

@media print {
  .theme-toggle {
    display: none;
  }
}