/* Neuroenergia + Apple Modern UI Theme */

:root {
  /* Brand Colors - logicBESS Navy */
  --primary-color: #134362;
  /* logicBESS Navy */
  --primary-dark: #0d2f44;
  /* Darker Navy for Hover */
  --primary-light: #2a6a9a;
  /* Lighter Navy Accent */
  --secondary-color: #273A4B;
  /* Pickled Bluewood (unchanged) */
  --secondary-dark: #1A2834;
  --accent-color: #134362;
  /* Using primary as accent */

  /* Apple-style Neutrals */
  --text-primary: #1D1D1F;
  --text-secondary: #86868B;
  --text-light: #9E9E9E;
  --bg-body: #F5F5F7;
  /* Apple Light Grey */
  --bg-surface: #FFFFFF;
  --bg-secondary: #F5F5F7;
  --border-color: #D2D2D7;

  /* Shadows - Stronger for card differentiation */
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.10);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 20px 52px rgba(0, 0, 0, 0.20);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Transitions */
  --transition-base: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Base Styles */
/* Source Sans 3 is loaded via Google Fonts in app.py external_stylesheets.
   Myriad Pro is kept as a local-only fallback for machines that have it installed. */
@font-face {
  font-family: "Myriad Pro";
  src: local("Myriad Pro"), local("MyriadPro-Regular");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Myriad Pro";
  src: local("Myriad Pro Bold"), local("MyriadPro-Bold");
  font-weight: 700;
  font-style: normal;
}

body {
  background: var(--bg-body);
  /* Source Sans 3 (web font, loaded via Google Fonts) → Myriad Pro (local fallback) → system UI */
  font-family: "Source Sans 3", "Myriad Pro", "Myriad", "Gill Sans Nova", "Gill Sans", Calibri, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Cards - Apple Style */
.card,
.apple-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.02);
  /* Very subtle border */
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: var(--transition-base);
}

.card:hover,
.apple-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Buttons - Pills & Soft Rectangles */
.btn {
  border-radius: var(--radius-md);
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  letter-spacing: -0.01em;
  border: none;
  transition: var(--transition-base);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-primary {
  background-color: var(--primary-color) !important;
  color: white !important;
}

.btn-primary:hover {
  background-color: var(--primary-dark) !important;
  box-shadow: 0 8px 16px rgba(19, 67, 98, 0.30);
}

.btn-secondary {
  background-color: var(--bg-body) !important;
  color: var(--text-primary) !important;
}

.btn-secondary:hover {
  background-color: #E8E8ED !important;
}

/* ── Consistent outline button style (items 3 & 8) ─────────────── */
.btn-outline-brand {
  background-color: transparent !important;
  color: var(--primary-color) !important;
  border: 1.5px solid var(--primary-color) !important;
  font-weight: 500;
}

.btn-outline-brand:hover {
  background-color: rgba(19, 67, 98, 0.07) !important;
  color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

/* Sidebar - Modern Glass/Clean */
#sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border-color);
  width: 280px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  padding: 2rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

/* Sidebar Navigation */
.sidebar-link {
  color: var(--text-secondary) !important;
  font-weight: 500;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: var(--transition-base);
}

.sidebar-link:hover {
  background-color: var(--bg-body);
  color: var(--text-primary) !important;
}

.sidebar-link.active,
.sidebar-link.active:hover {
  /* Outline-only active state — no fill, brand color border + text */
  background-color: transparent !important;
  color: var(--primary-color) !important;
  border: 1.5px solid var(--primary-color) !important;
  font-weight: 600;
}

/* Explicitly target children for brand color */
.sidebar-link.active *,
.sidebar-link.active:hover * {
  color: var(--primary-color) !important;
}

.sidebar-link.active i {
  color: var(--primary-color) !important;
}

.sidebar-section-title {
  color: var(--text-light);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
  padding-left: 1rem;
}

/* Header/Navbar */
.app-header {
  background: transparent;
  /* Clean look */
  padding: 1rem 0;
  /* Removing side padding as it's inside wrapper */
  /* margin-left: 280px;  REMOVED: Wrapper handles offset */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.app-logo {
  height: 48px;
  /* Restrict height */
  width: auto;
  /* Maintain aspect ratio */
  display: block;
}

.app-title {
  font-size: 1.5rem;
  /* Slight reduction for elegance */
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

/* Main Content Area */
.main-content-wrapper {
  margin-left: 280px;
  width: calc(100% - 280px);
  max-width: calc(100vw - 280px);
  padding: 2rem 3rem;
  min-height: 100vh;
  background: var(--bg-surface);
  box-sizing: border-box;
  overflow-x: auto;
}

/* Dashboard shell: fixed sidebar + main column (Entradas and other subpages) */
#main-layout-container {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

#main-layout-container > .d-flex.flex-column.w-100 {
  margin-left: 280px;
  width: calc(100% - 280px);
  max-width: calc(100vw - 280px);
  min-width: 0;
  box-sizing: border-box;
}

#main-layout-container .top-navbar-container {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

#main-layout-container .main-content-wrapper {
  margin-left: 0;
  width: 100%;
  max-width: 100%;
}

.main-panel,
.main-section {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.modelo-inputs-accordion,
.modelo-inputs-accordion .accordion-body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Let open dropdown menus extend past card/accordion bounds without clipping */
.modelo-inputs-accordion .accordion-collapse,
.modelo-inputs-accordion .accordion-body,
.modelo-inputs-accordion .card,
.modelo-inputs-accordion .card-body,
.modelo-inputs-accordion .dash-dropdown-wrapper {
  overflow: visible !important;
}

#modelo-tecnicos-matrix-wrapper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#page-content {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* Form Controls */
.form-control,
.form-select {
  background-color: var(--bg-body);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  transition: var(--transition-base);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--bg-surface);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(19, 67, 98, 0.12);
}

/* Metrics Cards (Admin Dashboard Style) */
.metric-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
}

.metric-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.metric-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Tables */
.table {
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
  border-color: var(--border-color);
}

.table th {
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  border-bottom-width: 1px;
  padding: 1rem;
}

.table td {
  padding: 1rem;
  color: var(--text-primary);
  vertical-align: middle;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: #D2D2D7;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #86868B;
}

/* Graphs */
.js-plotly-plot .plotly .main-svg {
  background: transparent !important;
}

/* --- Admin Specific Overrides --- */

/* Glassmorphism Sidebar */
.admin-sidebar {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Dash DataTable Styling to match Apple Table */
.dash-spreadsheet-container .dash-spreadsheet-inner th {
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
  color: var(--text-secondary) !important;
  background-color: var(--bg-body) !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-top: none !important;
  padding: 12px 16px !important;
  font-family: inherit !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner td {
  color: var(--text-primary) !important;
  font-size: 0.9rem !important;
  padding: 12px 16px !important;
  font-family: inherit !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

.dash-table-container {
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm);
}

/* Nav Link Styling for Admin Sidebar */
.admin-nav-link {
  color: var(--text-secondary);
  font-weight: 500;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 4px;
  transition: all 0.2s ease;
  border: none !important;
}

.admin-nav-link:hover {
  background-color: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}

.admin-nav-link.active {
  /* Outline-only active state for admin nav */
  background-color: transparent !important;
  color: var(--primary-color) !important;
  border: 1.5px solid var(--primary-color) !important;
  box-shadow: none;
}

/* Page Headers */
.page-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.page-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  font-weight: 400;
}

/* Clean Auth Overrides - Animation removed */

/* --- Hybrid Apple/Google Cloud Theme Overrides --- */

/* Clean Navbar */
.clean-navbar {
  background-color: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  /* Subtle border */
  transition: background-color 0.4s ease;
}

.clean-nav-link {
  color: #1d1d1f !important;
  /* Apple Text Color */
  font-size: 13px !important;
  /* Apple text size is usually small (~12-14px) and clear */
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  padding: 8px 16px !important;
  transition: color 0.2s ease, opacity 0.2s ease;
  opacity: 0.8;
}

.clean-nav-link:hover {
  color: var(--primary-color) !important;
  opacity: 1;
}

/* Hero Section */
.hero-section-clean {
  background-color: #ffffff;
  color: #1d1d1f;
  text-align: center;
  padding: 120px 20px 80px 20px;
  position: relative;
  overflow: hidden;
}

.hero-title {
  font-size: 56px;
  /* Large Mac-style header */
  line-height: 1.07143;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #1d1d1f;
  margin-bottom: 16px;
}

.hero-subtitle {
  font-size: 24px;
  line-height: 1.16667;
  font-weight: 400;
  letter-spacing: 0.009em;
  color: #1d1d1f;
  /* Keep dark */
  margin-bottom: 40px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Apple/Google Style Buttons */
.btn-apple-primary {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
  border-radius: 980px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.022em;
  border: 1px solid transparent !important;
  transition: all 0.3s cubic-bezier(0, 0, 0.5, 1) !important;
  box-shadow: none !important;
}

.btn-apple-primary:hover {
  background-color: var(--primary-dark) !important;
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(19, 67, 98, 0.30) !important;
}

.btn-apple-secondary {
  background-color: transparent !important;
  color: var(--primary-color) !important;
  border-radius: 980px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: 1px solid transparent !important;
}

.btn-apple-secondary:hover {
  text-decoration: underline !important;
  background-color: rgba(19, 67, 98, 0.06) !important;
}

/* Feature Cards - Super Clean */
.clean-card {
  background-color: #f5f5f7;
  /* Apple light gray for contrast against white bg */
  border-radius: 20px;
  padding: 40px;
  height: 100%;
  text-align: left;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: none;
}

.clean-card:hover {
  transform: scale(1.015);
}

.clean-card-icon {
  font-size: 48px;
  margin-bottom: 20px;
  background: -webkit-linear-gradient(45deg, var(--primary-color), var(--primary-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.clean-card-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #1d1d1f;
}

.clean-card-text {
  font-size: 17px;
  line-height: 1.47059;
  font-weight: 400;
  letter-spacing: -0.022em;
  color: #86868b;
}

/* Pricing Section Overrides */
.pricing-card-clean {
  background: white;
  border-radius: 18px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.pricing-card-clean:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  /* Stronger hover shadow */
  transform: translateY(-5px);
}

.pricing-highlight {
  border: 2px solid var(--primary-color);
  position: relative;
  overflow: hidden;
}

.pricing-badge {
  background-color: var(--primary-color);
  color: white;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 12px;
  position: absolute;
  top: 20px;
  right: 20px;
}


/* --- Navbar Tweaks --- */

.clean-nav-link {
  font-size: 17px !important;
  /* Increased from 13px */
  font-weight: 500 !important;
  color: #1d1d1f !important;
  padding: 8px 24px !important;
  /* Wider tap target */
  transition: all 0.2s ease;
}

.clean-nav-link.active {
  color: var(--primary-color) !important;
  font-weight: 600 !important;
}

.clean-nav-link:hover {
  color: var(--primary-color) !important;
  background-color: transparent !important;
}


/* --- Clean Auth Overrides --- */
.clean-auth-wrapper {
  background-color: #ffffff !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.clean-auth-card {
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  /* Subtle border */
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  max-width: 480px;
  /* Slightly wider for larger text */
  width: 100%;
}

/* Large, Simple Typography Overrides for Auth Pages */
.clean-auth-card h2 {
  font-size: 40px !important;
  /* Large, bold title */
  font-weight: 700 !important;
  color: #1d1d1f !important;
  letter-spacing: -0.01em;
  margin-bottom: 12px !important;
}

.clean-auth-card p {
  font-size: 19px !important;
  /* Larger body text */
  color: #86868b !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

/* Override existing label classes inside clean-auth-card */
.clean-auth-card .form-label {
  font-size: 19px !important;
  /* Large readable label */
  font-weight: 600 !important;
  color: #1d1d1f !important;
  text-transform: none !important;
  /* Remove uppercase */
  letter-spacing: 0 !important;
  margin-top: 10px !important;
  margin-bottom: 8px !important;
}

/* Inputs */
.clean-auth-card .form-control {
  font-size: 19px !important;
  /* Large text input */
  padding: 16px 18px !important;
  /* Taller inputs */
  border-radius: 14px !important;
  /* Smooth corners */
  height: auto !important;
  background-color: rgba(0, 0, 0, 0.03) !important;
  /* Very subtle background */
  border: 1px solid transparent !important;
  color: #1d1d1f !important;
}

.clean-auth-card .form-control:focus {
  background-color: #fff !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 4px rgba(19, 67, 98, 0.15) !important;
}

/* Buttons */
.clean-auth-card .btn-apple-primary {
  font-size: 19px !important;
  /* Larger button text */
  padding: 16px 32px !important;
  /* Larger button area */
  font-weight: 600 !important;
  margin-top: 20px !important;
  border-radius: 14px !important;
  /* Less pill-like, more squircle-ish for forms, or keep consistent? Apple uses pills. */
}

/* Link adjustments */
.clean-auth-card a {
  font-size: 17px !important;
}

/* Hide small text or make it normal size if strictly simple */
.clean-auth-card small,
.clean-auth-card .small {
  font-size: 15px !important;
  color: #86868b !important;
}

/* --- Password Field Specifics (Input Group) --- */
/* User requested: right border of password field to be default box (square) */
.clean-auth-card .input-group .form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
  /* Remove right border to merge with button */
}

/* Stylize the toggle button to match the large input */
.clean-auth-card .input-group .password-toggle-btn {
  background-color: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid transparent !important;
  border-left: none !important;
  color: #86868b !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
  padding: 0 18px !important;
  /* Match horizontal padding */
  margin-top: 0 !important;
  /* Prevent button margin override */
  display: flex;
  align-items: center;
  font-size: 19px !important;
}

.clean-auth-card .input-group .password-toggle-btn:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: #1d1d1f !important;
}

/* Create a unified focus look for the group */
.clean-auth-card .input-group:focus-within .form-control,
.clean-auth-card .input-group:focus-within .password-toggle-btn {
  background-color: #fff !important;
  border-color: #0071e3 !important;
  box-shadow: none !important;
}

.clean-auth-card .input-group:focus-within .password-toggle-btn {
  border-left: 1px solid #0071e3 !important;
  /* Add divider on focus */
}

.clean-auth-card .input-group:focus-within {
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15) !important;
  border-radius: 14px !important;
}

/* --- Matrix Grid Customizations --- */
:root {
  --matrix-col-width: 46px;
  --matrix-row-header-width: 52px;
}

.matrix-grid-table td {
  padding: 0 !important;
  vertical-align: middle;
  border: 1px solid var(--border-color) !important;
}

.matrix-grid-table-compact th.matrix-grid-header.text-center,
.matrix-grid-table-compact td.matrix-grid-cell {
  width: var(--matrix-col-width);
  min-width: var(--matrix-col-width);
  max-width: var(--matrix-col-width);
  padding: 0 !important;
  box-sizing: border-box;
}

.matrix-grid-table-compact th.matrix-grid-row-header,
.matrix-grid-table-compact th.matrix-grid-header-month {
  width: var(--matrix-row-header-width);
  min-width: var(--matrix-row-header-width);
  max-width: var(--matrix-row-header-width);
  box-sizing: border-box;
}

.matrix-grid-table-compact .matrix-grid-cell-inner,
.matrix-grid-table-compact .matrix-grid-cell-value {
  width: var(--matrix-col-width);
  max-width: var(--matrix-col-width);
}

.matrix-grid-table-compact .matrix-grid-column-label {
  display: block;
  font-size: 0.75rem;
  line-height: 1.2;
}

.matrix-grid-table-compact .matrix-grid-input {
  padding: 5px 3px !important;
  min-width: var(--matrix-col-width);
  max-width: var(--matrix-col-width);
  width: var(--matrix-col-width);
  font-size: 0.78rem !important;
  line-height: 1.2;
  box-sizing: border-box;
}

.matrix-grid-input {
  border: 1px solid transparent !important;
  background-color: transparent !important;
  padding: 8px 4px !important;
  border-radius: 0 !important;
  height: 100% !important;
  width: 100% !important;
  min-width: 40px;
  box-shadow: none !important;
  outline: none !important;
  font-family: inherit;
  color: inherit;
  transition: all 0.2s ease;
}

.matrix-grid-input:focus {
  border-color: var(--primary-color) !important;
  background-color: #ffffff !important;
  color: #1d1d1f !important;
  box-shadow: inset 0 0 0 1px var(--primary-color) !important;
}

.matrix-grid-input.is-invalid {
  border-color: #dc3545 !important;
  background-color: #fff5f5 !important;
  color: #842029 !important;
  box-shadow: inset 0 0 0 1px #dc3545 !important;
}

.matrix-grid-input.selected {
  background-color: rgba(19, 67, 98, 0.12) !important;
  border: 1px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  box-shadow: inset 0 0 0 1px var(--primary-color) !important;
}

/* Scroll wide operation matrices inside the white content area */
.matrix-container {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-sizing: border-box;
}

.matrix-grid-table {
  width: max-content;
  min-width: 100%;
  margin-bottom: 0;
}

.matrix-grid-table.matrix-grid-table-compact {
  width: max-content;
  min-width: max-content;
  table-layout: auto;
}

.theme-dark .matrix-container {
  background: var(--bg-surface);
  border-color: var(--border-color);
}

.theme-dark .main-content-wrapper {
  background: var(--bg-surface);
}

/* --- Dark Mode Theme Styles --- */
.theme-dark {
  --text-primary: #F5F5F7;
  --text-secondary: #D2D2D7;
  --text-light: #9E9E9E;
  --bg-body: #1C1C1E;
  --bg-surface: #2C2C2E;
  --bg-secondary: #3A3A3C;
  --border-color: #48484A;

  background: var(--bg-body);
  color: var(--text-primary);
}

.theme-dark .card,
.theme-dark .apple-card,
.theme-dark .clean-card {
  background: var(--bg-surface);
  border-color: var(--border-color);
}

.theme-dark .table th,
.theme-dark .table td,
.theme-dark .dash-spreadsheet-inner th,
.theme-dark .dash-spreadsheet-inner td {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.theme-dark .form-control,
.theme-dark .form-select,
.theme-dark .apple-input {
  background-color: var(--bg-body) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.theme-dark .form-control:focus,
.theme-dark .form-select:focus,
.theme-dark .apple-input:focus {
  background-color: var(--bg-surface) !important;
  border-color: var(--primary-color) !important;
}

.theme-dark .alert-info {
  background-color: rgba(19, 67, 98, 0.20) !important;
  color: var(--primary-light) !important;
  border-color: rgba(19, 67, 98, 0.35) !important;
}

.theme-dark .sidebar-link {
  color: var(--text-secondary) !important;
}

.theme-dark .sidebar-link:hover {
  background-color: var(--bg-body);
  color: var(--text-primary) !important;
}

.theme-dark .text-muted {
  color: var(--text-secondary) !important;
}

.theme-dark .text-dark {
  color: var(--text-primary) !important;
}

.theme-dark .bg-white {
  background-color: var(--bg-surface) !important;
}

.theme-dark .bg-light {
  background-color: var(--bg-body) !important;
}

.theme-dark .table-light,
.theme-dark .table-light th,
.theme-dark .table-light td {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark h5,
.theme-dark h6 {
  color: var(--text-primary) !important;
}

/* ── Item 4: Logout / Cerrar sesión button ────────────────────────────────── */
/* Remove red fill; keep a dark red border + text only */
#sidebar-logout-btn,
#top-navbar-logout-btn,
.btn-logout,
.sidebar-logout-btn {
  background-color: transparent !important;
  color: #8B1A1A !important;
  border: 1.5px solid #8B1A1A !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

#sidebar-logout-btn:hover,
#top-navbar-logout-btn:hover,
.btn-logout:hover,
.sidebar-logout-btn:hover {
  background-color: rgba(139, 26, 26, 0.08) !important;
  color: #6b1111 !important;
  border-color: #6b1111 !important;
}

/* ── Item 8: Global consistent outline button overrides ──────────────────── */
/* All outline buttons across admin and user pages use brand navy */
.btn-outline-primary,
.btn-outline-secondary {
  border: 1.5px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  background-color: rgba(19, 67, 98, 0.07) !important;
  color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

/* ── Item 9: Unidad / Sin Unidad toggle switch ──────────────────────────── */
.toggle-switch-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 500;
}

.toggle-switch-label {
  color: var(--text-secondary);
  user-select: none;
}

.toggle-switch-label.active {
  color: var(--primary-color);
  font-weight: 600;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #D2D2D7;
  border-radius: 26px;
  transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.toggle-switch .slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.20);
}

.toggle-switch input:checked+.slider {
  background-color: var(--primary-color);
}

.toggle-switch input:checked+.slider:before {
  transform: translateX(22px);
}

/* ── Member status badge (item 6) ────────────────────────────────────────── */
.member-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1.5px solid currentColor;
}

.member-status-badge.badge-platinum {
  color: #5a5a7a;
  background: linear-gradient(135deg, rgba(192, 192, 220, 0.25), rgba(210, 210, 240, 0.15));
  border-color: #b0b0c8;
}

.member-status-badge.badge-gold {
  color: #7a5c00;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.20), rgba(255, 190, 0, 0.12));
  border-color: #c9a800;
}

.member-status-badge.badge-silver {
  color: #4a4a4a;
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.20), rgba(160, 160, 160, 0.10));
  border-color: #909090;
}

.member-status-corner {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 10;
}

/* ── Download Toast Notification ─────────────────────────────────────────── */
@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(calc(100% + 1.5rem));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.download-toast {
  animation: toast-slide-in 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  border: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Header bar */
.download-toast .toast-header {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  border-radius: 12px 12px 0 0 !important;
  border-bottom: none !important;
  padding: 0.55rem 0.9rem !important;
}

/* Close button inside header */
.download-toast .toast-header .btn-close {
  filter: invert(1) brightness(2) !important;
  opacity: 0.75;
}

.download-toast .toast-header .btn-close:hover {
  opacity: 1;
}

/* Body */
.download-toast .toast-body {
  background-color: rgba(255, 255, 255, 0.96) !important;
  color: var(--text-primary) !important;
  padding: 0.65rem 0.9rem !important;
  border-radius: 0 0 12px 12px !important;
  line-height: 1.4;
}

/* Dark mode support */
.theme-dark .download-toast .toast-body {
  background-color: rgba(44, 44, 46, 0.97) !important;
  color: var(--text-primary) !important;
}

/* ── Main app sidebar nav links (app.py sidebar_navigation) ──────────────── */
/* Bootstrap nav-pills overrides our vars, so we target these explicitly.    */

/* Inactive links: brand navy text, no background */
.sidebar-subnav .nav-link,
.sidebar-nav .nav-link {
  color: var(--primary-color) !important;
  background-color: transparent !important;
  border: 1.5px solid transparent !important;
  border-radius: var(--radius-md) !important;
  font-weight: 500;
  padding: 0.55rem 1rem;
  margin-bottom: 2px;
  transition: var(--transition-base);
}

.sidebar-subnav .nav-link:hover,
.sidebar-nav .nav-link:hover {
  background-color: rgba(19, 67, 98, 0.07) !important;
  color: var(--primary-dark) !important;
  border-color: transparent !important;
}

/* Active link: outline style — brand color border, transparent fill */
.sidebar-subnav .nav-link.active,
.sidebar-nav .nav-link.active,
.nav-pills .sidebar-subnav .nav-link.active {
  background-color: transparent !important;
  color: var(--primary-color) !important;
  border: 1.5px solid var(--primary-color) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* Section titles (INDICADORES / MODELO labels) */
.sidebar-nav-group .sidebar-section-title {
  color: var(--text-light) !important;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding-left: 0.5rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* ── Dropdown z-index + scroll fix ──────────────────────────────────────────
   Dash 2.x uses react-select + ReactVirtualized for its dcc.Dropdown.
   DOM structure:
     .Select-menu-outer  ← react-select outer panel (was getting overflow-y:auto
                            from react-select base CSS → produced 2nd scrollbar)
       .Select-menu      ← already overflow:hidden via Dash's inline menuStyle
         .VirtualSelectGrid / .ReactVirtualized__Grid  ← ONLY real scrollbar

   Fix: hide overflow on the outer panel so only the virtualized grid scrolls.
   The grid already limits itself via the maxHeight prop (default 200px) and
   adds its own scrollbar, so all items remain reachable.
   ─────────────────────────────────────────────────────────────────────────── */

/* Dash 2.x react-select outer panel — suppress the second scrollbar */
.dash-dropdown .Select-menu-outer {
  z-index: 9999 !important;
  overflow: hidden !important;      /* remove outer scrollbar; grid scrolls */
  max-height: none !important;      /* let virtualized grid control its height */
}

/* The inner .Select-menu must be at least as tall as the grid; hidden overflow
   is set inline by Dash, so we just ensure it does not clip the grid. */
.dash-dropdown .Select-menu {
  overflow: hidden !important;
  max-height: none !important;
}

/* Ensure the virtualized grid itself has its scrollbar (already set by JS but
   override any accidental 'hidden' that a parent scroll-fix might apply). */
.dash-dropdown .VirtualSelectGrid,
.dash-dropdown .ReactVirtualized__Grid {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* ── Responsive dashboard layout (Entradas matrices on narrow screens) ─────── */
@media (max-width: 991.98px) {
  .main-content-wrapper {
    padding: 1.25rem 1rem;
  }
}

@media (max-width: 767.98px) {
  .main-content-wrapper {
    padding: 1rem 0.75rem;
  }
}