/* ========== FIXED INCOME DARK THEME ========== */

/* Variables de tema oscuro */
:root {
  --chart-bg: rgba(42, 42, 42, 0.8);
  --chart-text: #e5e5e5;
  --chart-grid: rgba(255, 255, 255, 0.1);
  --chart-color-1: #00bcd4;  /* Cian */
  --chart-color-2: #4caf50;  /* Verde */
  --chart-color-3: #ff9800;  /* Naranja */
  --chart-color-4: #f44336;  /* Rojo */
  --chart-color-5: #9c27b0;  /* Morado */
  --chart-color-6: #3f51b5;  /* Azul índigo */
  --chart-color-7: #607d8b;  /* Azul gris */
  --chart-color-8: #795548;  /* Marrón */
}

/* ==== FIXED INCOME SECTION ==== */

/* Contenedor principal */
.fixed-income-section .chart-container {
  background: var(--chart-bg) !important;
  border: 1px solid rgba(0, 188, 212, 0.3) !important;
  color: var(--chart-text) !important;
  backdrop-filter: blur(15px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Sobrescribir bg-white en fixed income */
.fixed-income-section .bg-white {
  background: var(--chart-bg) !important;
  color: var(--chart-text) !important;
  border: 1px solid rgba(0, 188, 212, 0.3) !important;
}

/* Títulos y texto */
.fixed-income-section h1,
.fixed-income-section h2,
.fixed-income-section h3,
.fixed-income-section h4 {
  color: var(--chart-text) !important;
}

.fixed-income-section p,
.fixed-income-section label,
.fixed-income-section div {
  color: var(--chart-text) !important;
}

/* ==== BOND INPUT ROWS ==== */

.fixed-income-section .bond-input-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.fixed-income-section .bond-input-row input,
.fixed-income-section .bond-input-row select {
  background: rgba(42, 42, 42, 0.8) !important;
  color: var(--chart-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.fixed-income-section .bond-input-row input:focus,
.fixed-income-section .bond-input-row select:focus {
  border-color: var(--chart-color-1) !important;
  box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1) !important;
}

/* ==== METRIC CARDS ==== */

.fixed-income-section .metric-card {
  background: linear-gradient(135deg, var(--chart-color-1) 0%, var(--chart-color-5) 100%) !important;
  color: white !important;
  border: 1px solid rgba(0, 188, 212, 0.3) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.fixed-income-section .metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 188, 212, 0.4) !important;
  transition: all 0.3s ease;
}

/* ==== RISK ALERTS ==== */

.fixed-income-section .risk-alert {
  border-left: 4px solid var(--chart-color-5) !important;
  background-color: rgba(156, 39, 176, 0.1) !important;
  color: var(--chart-text) !important;
}

.fixed-income-section .scenario-positive { 
  background-color: rgba(0, 188, 212, 0.2) !important;
  color: var(--chart-color-1) !important;
}

.fixed-income-section .scenario-negative { 
  background-color: rgba(156, 39, 176, 0.2) !important;
  color: var(--chart-color-5) !important;
}

/* ==== TABLAS ==== */

.fixed-income-section table {
  background: rgba(42, 42, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--chart-text) !important;
}

.fixed-income-section table thead {
  background: rgba(42, 42, 42, 0.9) !important;
}

.fixed-income-section table th,
.fixed-income-section table td {
  color: var(--chart-text) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.fixed-income-section table tbody tr:hover {
  background: rgba(0, 188, 212, 0.1) !important;
}

/* ==== TABS ==== */

.fixed-income-section .tab-button {
  color: var(--chart-text) !important;
  background: transparent !important;
}

.fixed-income-section .tab-button.active,
.fixed-income-section .tab-button[data-tab].border-blue-600 {
  color: var(--chart-color-1) !important;
  border-bottom-color: var(--chart-color-1) !important;
  background: rgba(0, 188, 212, 0.1) !important;
}

/* ==== BOTONES ==== */

.fixed-income-section button {
  transition: all 0.3s ease !important;
}

.fixed-income-section button:not(.metric-card):hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* ==== INPUTS Y SELECTS ==== */

.fixed-income-section input[type="text"],
.fixed-income-section input[type="number"],
.fixed-income-section select {
  background: rgba(42, 42, 42, 0.8) !important;
  color: var(--chart-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.fixed-income-section input[type="text"]:focus,
.fixed-income-section input[type="number"]:focus,
.fixed-income-section select:focus {
  border-color: var(--chart-color-1) !important;
  box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1) !important;
}

.fixed-income-section select option {
  background: rgba(42, 42, 42, 0.9) !important;
  color: var(--chart-text) !important;
}

/* ==== PLOTLY CHARTS ESPECÍFICOS ==== */

.fixed-income-section .js-plotly-plot .plotly .bg {
  fill: transparent !important;
}

.fixed-income-section .js-plotly-plot .main-svg {
  background-color: transparent !important;
}

.fixed-income-section .js-plotly-plot .gtitle,
.fixed-income-section .js-plotly-plot .xtitle,
.fixed-income-section .js-plotly-plot .ytitle {
  fill: var(--chart-text) !important;
}

.fixed-income-section .js-plotly-plot .xtick text,
.fixed-income-section .js-plotly-plot .ytick text {
  fill: var(--chart-text) !important;
}

.fixed-income-section .js-plotly-plot .xgrid,
.fixed-income-section .js-plotly-plot .ygrid {
  stroke: var(--chart-grid) !important;
  stroke-width: 0.5 !important;
}

.fixed-income-section .js-plotly-plot .legend {
  background-color: rgba(42, 42, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
}

.fixed-income-section .js-plotly-plot .legendtext {
  fill: var(--chart-text) !important;
}

/* ==== MODEBAR ==== */

.fixed-income-section .js-plotly-plot .modebar {
  background: rgba(42, 42, 42, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
}

.fixed-income-section .js-plotly-plot .modebar-btn {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--chart-text) !important;
}

.fixed-income-section .js-plotly-plot .modebar-btn:hover {
  background: rgba(0, 188, 212, 0.2) !important;
  border-color: var(--chart-color-1) !important;
}

/* ==== LOADING OVERLAY ==== */

.fixed-income-section #loading-overlay .chart-container {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  color: var(--chart-text) !important;
  border: 1px solid rgba(0, 188, 212, 0.3) !important;
}

/* ==== RESPONSIVE ==== */

@media (max-width: 768px) {
  .fixed-income-section .bond-input-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .fixed-income-section .metric-card {
    padding: 16px;
    font-size: 0.875rem;
  }
  
  .fixed-income-section .chart-container {
    padding: 1rem;
    margin-bottom: 1rem;
  }
}

/* ==== ANIMACIONES ==== */

@keyframes fixedIncomeFadeIn {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

.fixed-income-section .chart-container {
  animation: fixedIncomeFadeIn 0.6s ease-out;
}

/* ==== HOVER EFFECTS ==== */

.fixed-income-section .chart-container:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 188, 212, 0.4) !important;
  transition: all 0.3s ease;
}