/* ============================================================
   CEAD VIP — Configuración Financiera y Movimientos
   css/14-config-financiera.css
   ============================================================ */

/* ── Contenedor principal ── */
.cfg-fin-container {
  padding: 20px 24px 48px;
  max-width: 1300px;
}

/* ── Navegación por tabs ── */
.cfg-tab-nav {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--slate-200);
  margin-bottom: 22px;
}

.cfg-tab-btn {
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--slate-500);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.cfg-tab-btn:hover { color: var(--cead-dark); }

.cfg-tab-btn.active {
  color: var(--cead-dark);
  border-bottom-color: var(--cead-celeste);
}

/* ── Panel del tab ── */
.cfg-tab-panel {
  animation: cfgFadeIn 180ms ease;
}

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

/* ── Cabecera de sección ── */
.cfg-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.cfg-section-header h3 {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 700;
  color: var(--cead-dark);
  margin: 0 0 4px;
}

.cfg-section-header p {
  font-size: var(--text-sm);
  color: var(--slate-500);
  margin: 0;
}

.cfg-section-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Wrapper de tabla ── */
.cfg-table-wrap {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.cfg-table-wrap .inf-tabla th { position: sticky; top: 0; z-index: 1; }

/* ── Badge categoría en config ── */
.cfg-cat-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: .66rem;
  font-weight: 700;
  border: 1.5px solid currentColor;
  white-space: nowrap;
}

/* ── Margen porcentual ── */
.cfg-margin-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 700;
}

.cfg-margin-chip--high   { background: var(--green-100); color: var(--green-600); }
.cfg-margin-chip--medium { background: var(--amber-100); color: var(--amber-600); }
.cfg-margin-chip--low    { background: var(--rose-100);  color: var(--rose-600); }

/* ── Toggle estado ── */
.cfg-estado-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: opacity var(--transition);
}

.cfg-estado-toggle:hover { opacity: .85; }
.cfg-estado-toggle--activo   { background: var(--green-100); color: var(--green-600); }
.cfg-estado-toggle--inactivo { background: var(--slate-100); color: var(--slate-500); }

/* ── Acciones en tabla config ── */
.cfg-action-btns {
  display: flex;
  gap: 4px;
}

.cfg-btn-edit,
.cfg-btn-del {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--slate-200);
  background: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-400);
  transition: all var(--transition);
}

.cfg-btn-edit:hover { border-color: var(--cead-medium); color: var(--cead-medium); background: var(--blue-50); }
.cfg-btn-del:hover  { border-color: var(--rose-500);    color: var(--rose-500);    background: var(--rose-100); }

/* ── Preview ganancia en modal ── */
.cfg-ganancia-preview {
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: .82rem;
  color: var(--cead-dark);
  margin: 8px 0;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cfg-ganancia-preview strong { color: var(--cead-success); }
.cfg-ganancia-preview.negativa strong { color: var(--cead-danger); }

/* ── Sección de movimientos financieros del paciente ── */
.mov-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.mov-kpi-mini {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 12px 14px;
  border-left: 3px solid var(--slate-300);
}

.mov-kpi-mini--ingreso  { border-left-color: var(--cead-success); }
.mov-kpi-mini--costo    { border-left-color: var(--cead-danger); }
.mov-kpi-mini--ganancia { border-left-color: var(--cead-celeste); }
.mov-kpi-mini--beneficio{ border-left-color: var(--cead-gold); }

.mov-kpi-mini-value {
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 700;
  color: var(--cead-dark-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mov-kpi-mini--ingreso  .mov-kpi-mini-value { color: var(--green-600); }
.mov-kpi-mini--costo    .mov-kpi-mini-value { color: var(--rose-600); }

.mov-kpi-mini-label {
  font-size: .66rem;
  font-weight: 700;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 3px;
}

.mov-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.mov-toolbar-left { display: flex; gap: 8px; align-items: center; }

/* ── Badge tipo movimiento ── */
.mov-tipo-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: .66rem;
  font-weight: 700;
  white-space: nowrap;
}

.mov-tipo-ingreso   { background: var(--green-100); color: var(--green-600); }
.mov-tipo-costo     { background: var(--rose-100);  color: var(--rose-600); }
.mov-tipo-beneficio { background: var(--gold-100);  color: var(--gold-600); }

/* ── Badge estado movimiento ── */
.mov-estado-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: .66rem;
  font-weight: 700;
}

.mov-estado-registrado { background: var(--green-100); color: var(--green-600); }
.mov-estado-anulado    { background: var(--rose-100);  color: var(--rose-600);  text-decoration: line-through; }
.mov-estado-corregido  { background: var(--amber-100); color: var(--amber-600); }

/* ── Fila anulada en tabla ── */
.mov-row-anulado td { opacity: .5; }

/* ── Informe avanzado: top listas ── */
.inf-advanced-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.inf-advanced-card {
  background: var(--white);
  border: 1px solid var(--slate-100);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-xs);
}

.inf-advanced-title {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  color: var(--cead-dark);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 12px;
}

.inf-top-list { list-style: none; margin: 0; padding: 0; }

.inf-top-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--slate-100);
  font-size: var(--text-sm);
}

.inf-top-item:last-child { border-bottom: none; }

.inf-top-rank {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--slate-100);
  color: var(--slate-500);
  font-size: .66rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inf-top-rank--1 { background: var(--gold-100); color: var(--gold-600); }
.inf-top-rank--2 { background: var(--slate-200); color: var(--slate-600); }
.inf-top-rank--3 { background: #fde68a; color: #92400e; }

.inf-top-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inf-top-value { font-family: var(--font-display); font-weight: 700; color: var(--cead-dark-text); white-space: nowrap; }
.inf-top-value--positive { color: var(--green-600); }
.inf-top-value--count    { color: var(--cead-medium); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .mov-kpi-row      { grid-template-columns: repeat(2, 1fr); }
  .inf-advanced-grid { grid-template-columns: 1fr; }
  .cfg-section-header { flex-direction: column; align-items: flex-start; }
  .cfg-section-header-right { flex-wrap: wrap; }
}

@media (max-width: 580px) {
  .mov-kpi-row { grid-template-columns: 1fr 1fr; }
  .cfg-fin-container { padding: 14px 14px 32px; }
}