.credit_root *, .credit_root *::before, .credit_root *::after { box-sizing: border-box; margin: 0; padding: 0; }

  .credit_root {
    font-family: 'DM Sans', sans-serif;
    background: #f0f4f8;
    color: #111827;
    min-height: 100vh;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
  }

  /* ── TOPBAR ── */
  .credit_topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 28px;
    height: 60px;
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    position: sticky; top: 0; z-index: 100;
    backdrop-filter: blur(12px);
  }
  .credit_topbar-brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 600; font-size: .95rem; letter-spacing: -.01em;
  }
  .credit_topbar-brand .logo {
    width: 30px; height: 30px; border-radius: 8px;
    background: linear-gradient(135deg, #2563eb, #0fa968);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .8rem; color: #fff;
  }
  .credit_topbar-center { display: flex; gap: 4px; }
  .credit_nav-pill {
    padding: 5px 14px; border-radius: 20px; font-size: .82rem;
    font-weight: 500; color: #6b7280; cursor: pointer;
    transition: all .2s; border: none; background: none;
  }
  .credit_nav-pill:hover { color: #111827; background: #f5f7fa; }
  .credit_nav-pill.active { background: rgba(37,99,235,.10); color: #2563eb; }
  .credit_topbar-right { display: flex; align-items: center; gap: 12px; }
  .credit_badge-live {
    display: flex; align-items: center; gap: 6px;
    font-size: .75rem; color: #0fa968; font-weight: 500;
    font-family: 'DM Mono', monospace;
  }
  .credit_badge-live::before {
    content:''; width: 7px; height: 7px; border-radius: 50%;
    background: #0fa968;
    box-shadow: 0 0 0 3px rgba(45,206,137,.25);
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(45,206,137,.25); }
    50%      { box-shadow: 0 0 0 6px rgba(45,206,137,.08); }
  }
  .credit_avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg,#4a9eff,#7b5ea7);
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 600; color: #fff; cursor: pointer;
  }

  /* ── LAYOUT ── */
  .credit_page {
    padding: 24px 28px 48px; 
    max-width: none;
    margin: 0 auto; 
  }
  .credit_page-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
  .credit_page-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
  .credit_page-subtitle { font-size: .82rem; color: #6b7280; margin-top: 2px; }
  .credit_header-actions { display: flex; gap: 8px; }
  .credit_btn { 
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px; border-radius: 8px;
    font-size: .8rem; font-weight: 500; cursor: pointer;
    border: 1px solid rgba(0,0,0,0.08); transition: all .18s;
    font-family: 'DM Sans', sans-serif; text-decoration: none;
  }
  .credit_btn-ghost { background: transparent; color: #6b7280; }
  .credit_btn-ghost:hover { background: #f5f7fa; color: #111827; }
  .credit_btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
  .credit_btn-primary:hover { opacity: .88; }
  .credit_btn-link {
    background: none; border: none; color: #2563eb;
    font-size: .78rem; font-weight: 500; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    font-family: 'DM Sans', sans-serif; padding: 0; transition: opacity .15s;
  }
  .credit_btn-link:hover { opacity: .75; }

  /* ── KPI STRIP ── */
  .credit_kpi-grid {
    display: grid;
    /* grid-template-columns: repeat(5, 1fr); */
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
  }
  .credit_kpi-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex; flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.06);
    transition: transform .2s, box-shadow .2s;
  }
  .credit_kpi-card:hover { transform: translateY(-2px); box-shadow: 0 4px 24px rgba(0,0,0,.12); }
  .credit_kpi-top { display: flex; align-items: center; justify-content: space-between; }
  .credit_kpi-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
  }
  .credit_kpi-icon.green  { background: rgba(15,169,104,.10);  color: #0fa968; }
  .credit_kpi-icon.blue   { background: rgba(37,99,235,.10);   color: #2563eb; }
  .credit_kpi-icon.amber  { background: rgba(217,119,6,.10);  color: #d97706; }
  .credit_kpi-icon.red    { background: rgba(220,38,38,.10);    color: #dc2626; }
  .credit_kpi-trend {
    font-size: .72rem; font-weight: 500; font-family: 'DM Mono', monospace;
    padding: 2px 7px; border-radius: 20px;
  }
  .credit_kpi-trend.up   { background: rgba(15,169,104,.10); color: #0fa968; }
  .credit_kpi-trend.down { background: rgba(220,38,38,.10);   color: #dc2626; }
  .credit_kpi-trend.flat { background: rgba(217,119,6,.10); color: #d97706; }
  .credit_kpi-label { font-size: .76rem; color: #6b7280; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
  .credit_kpi-value { font-size: 1.28rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
  .credit_kpi-sub   { font-size: .76rem; color: #6b7280; }

  /* ── MAIN GRID ── */
  .credit_main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .credit_col-full  { grid-column: 1 / -1; }

  /* ── CARD ── */
  .credit_card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.06);
    display: flex; flex-direction: column;
    height: 400px;
    overflow: hidden;
    transition: box-shadow .2s;
  }
  .credit_card:hover { box-shadow: 0 4px 24px rgba(0,0,0,.12); }
  .credit_card.credit_card--auto { height: auto; }
  .credit_card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px 0;
    flex-shrink: 0;
  }
  .credit_card-title {
    font-size: .88rem; font-weight: 600; color: #111827;
    letter-spacing: -.01em;
  }
  .credit_card-badge {
    font-size: .7rem; font-weight: 600; padding: 2px 8px;
    border-radius: 20px; font-family: 'DM Mono', monospace;
  }
  .credit_card-badge.green  { background: rgba(15,169,104,.10); color: #0fa968; }
  .credit_card-badge.blue   { background: rgba(37,99,235,.10);  color: #2563eb; }
  .credit_card-badge.amber  { background: rgba(217,119,6,.10); color: #d97706; }
  .credit_card-body  { padding: 14px 20px; flex: 1; overflow-y: auto; min-height: 0; }
  .credit_card-footer {
    padding: 10px 20px;
    border-top: 1px solid rgba(0,0,0,0.08);
    display: flex; justify-content: flex-end;
    flex-shrink: 0;
  }

  /* ── PROYECTO ── */
  .credit_project-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px; }
  .credit_project-img-wrap {
    width: 100%; aspect-ratio: 4/3;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f7fa;
    margin-bottom: 10px;
    position: relative;
  }
  .credit_project-img-wrap img { width:100%; height:100%; object-fit: cover; }
  .credit_project-img-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 12px;
    background: linear-gradient(transparent, rgba(0,0,0,.65));
    font-size: .75rem; color: rgba(255,255,255,.85);
    display: flex; align-items: center; gap: 5px;
  }
  .credit_info-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    font-size: .82rem;
  }
  .credit_info-row:last-child { border-bottom: none; }
  .credit_info-label { color: #6b7280; }
  .credit_info-value { font-weight: 500; text-align: right; }
  .credit_info-block-title {
    font-size: .7rem; font-weight: 600; color: #d1d5db;
    text-transform: uppercase; letter-spacing: .07em;
    margin: 10px 0 4px;
  }
  .credit_info-block-title:first-child { margin-top: 0; }

  /* ── DOUGHNUT PANELS ── */
  .credit_doughnut-panel { display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .credit_doughnut-wrap { position: relative; width: 190px; height: 190px; flex-shrink: 0; }
  .credit_doughnut-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    pointer-events: none;
  }
  .credit_doughnut-pct  { font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
  .credit_doughnut-lbl  { font-size: .72rem; color: #6b7280; margin-top: 3px; }
  .credit_legend-list   { display: flex; flex-direction: row; gap: 16px; justify-content: center; flex-wrap: wrap; }
  .credit_legend-item   { display: flex; align-items: center; gap: 6px; font-size: .8rem; }
  .credit_legend-dot    { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
  .credit_legend-name   { flex: 1; color: #6b7280; }
  .credit_legend-pct    { font-weight: 600; font-family: 'DM Mono', monospace; font-size: .75rem; }
  .credit_legend-bar-track { display: none; }
  .credit_legend-bar-fill { height: 100%; border-radius: 2px; }

  /* ── OBRA ETAPAS ── */
  .credit_stage-list { display: flex; flex-direction: column; gap: 9px; }
  .credit_stage-item {}
  .credit_stage-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
  .credit_stage-name { font-size: .8rem; font-weight: 500; }
  .credit_stage-pct  { font-size: .75rem; font-family: 'DM Mono', monospace; color: #6b7280; }
  .credit_prog-track { height: 5px; background: #f5f7fa; border-radius: 3px; overflow: hidden; }
  .credit_prog-fill  { height: 100%; border-radius: 3px; transition: width .8s cubic-bezier(.4,0,.2,1); }

  /* ── MINISTRACIONES ── */
  .credit_ministraciones-layout { display: grid; grid-template-columns: 130px 1fr; gap: 20px; }
  .credit_timeline { display: flex; flex-direction: column; gap: 0; position: relative; }
  .credit_tl-item {
    display: flex; flex-direction: column; align-items: center;
    position: relative; flex: 1;
  }
  .credit_tl-dot {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid #ffffff; z-index: 1; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .credit_tl-dot.done   { background: #0fa968; box-shadow: 0 0 0 4px rgba(15,169,104,.10); }
  .credit_tl-dot.active { background: #d97706; box-shadow: 0 0 0 4px rgba(217,119,6,.10); animation: pulse-amber 2s infinite; }
  .credit_tl-dot.pending{ background: #d1d5db; }
  @keyframes pulse-amber {
    0%,100% { box-shadow: 0 0 0 4px rgba(246,195,68,.2); }
    50%      { box-shadow: 0 0 0 8px rgba(246,195,68,.06); }
  }
  .credit_tl-line {
    width: 2px; flex: 1; min-height: 20px;
    background: rgba(0,0,0,0.08);
  }
  .credit_tl-line.done { background: #0fa968; opacity: .35; }
  .credit_tl-label {
    font-size: .68rem; color: #6b7280; text-align: center;
    margin: 3px 0; line-height: 1.2; max-width: 80px;
  }

  /* ── TABLE ── */
  .credit_table-wrap { overflow-x: auto; }
  .credit_table { width: 100%; border-collapse: collapse; font-size: .8rem; }
  .credit_table .credit_th {
    text-align: left; padding: 8px 12px;
    color: #6b7280; font-weight: 600; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }
  .credit_table .credit_td { padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,0.08); vertical-align: middle; }
  .credit_table .credit_tr:last-child .credit_td { border-bottom: none; }
  .credit_table .credit_tr:hover .credit_td { background: #f5f7fa; }
  .credit_status-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 20px;
    font-size: .72rem; font-weight: 600;
  }
  .credit_status-chip.done   { background: rgba(15,169,104,.10); color: #0fa968; }
  .credit_status-chip.active { background: rgba(217,119,6,.10); color: #d97706; }
  .credit_status-chip.pend   { background: #f5f7fa;  color: #d1d5db; }
  .credit_amount-cell { font-family: 'DM Mono', monospace; font-size: .78rem; font-weight: 500; }

  /* ── FINANCIAL STATUS ── */
  .credit_fin-stat-list { display: flex; flex-direction: column; gap: 0; }
  .credit_fin-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,0.08);
  }
  .credit_fin-row:last-child { border-bottom: none; }
  .credit_fin-row-left { display: flex; flex-direction: column; gap: 2px; }
  .credit_fin-row-label { font-size: .8rem; color: #6b7280; }
  .credit_fin-row-sub   { font-size: .7rem; color: #d1d5db; }
  .credit_fin-row-value { font-size: .95rem; font-weight: 600; font-family: 'DM Mono', monospace; letter-spacing: -.01em; }
  .credit_fin-highlight {
    background: rgba(37,99,235,.10);
    border-radius: 8px; padding: 14px;
    margin-top: 14px; text-align: center;
  }
  .credit_fin-highlight-label { font-size: .72rem; color: #6b7280; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
  .credit_fin-highlight-value { font-size: 1.15rem; font-weight: 700; color: #2563eb; font-family: 'DM Mono', monospace; }
  .credit_fin-highlight-date  { font-size: .72rem; color: #6b7280; margin-top: 3px; }

  /* ── CHART (LINE) ── */
  .credit_chart-wrap { position: relative; height: 200px; }

  /* ── SCROLLBAR ── */
  .credit_root ::-webkit-scrollbar { width: 6px; height: 6px; }
  .credit_root ::-webkit-scrollbar-track { background: #ffffff; }
  .credit_root ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

  /* ── DIVIDER ── */
  .credit_divider { height: 1px; background: rgba(0,0,0,0.08); margin: 10px 0; }

  /* ── RESPONSIVE ── */
  @media (max-width: 1100px) {
    .credit_kpi-grid { grid-template-columns: repeat(3,1fr); }
  }
  @media (max-width: 860px) {
    .credit_main-grid { grid-template-columns: 1fr; }
    .credit_kpi-grid  { grid-template-columns: repeat(2,1fr); }
    .credit_project-layout { grid-template-columns: 1fr; }
    .credit_ministraciones-layout { grid-template-columns: 1fr; }
    .credit_doughnut-panel { grid-template-columns: 1fr; }
  }

  /* ── DOUGHNUT PANEL ROW VARIANT (Avance de Obra) ── */
  .credit_doughnut-panel--row {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 20px;
  }
  .credit_doughnut-panel--row .credit_stage-list {
    flex: 1;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
  }

  /* ── TABLE CELL HELPERS ── */
  .credit_td--num  { color: #d1d5db; font-family: 'DM Mono', monospace; }
  .credit_td--mono { font-family: 'DM Mono', monospace; color: #6b7280; }
  .credit_td--date { color: #6b7280; font-size: .76rem; }

  /* ── INFO-VALUE COLOR HELPERS ── */
  .credit_info-value--blue  { color: #2563eb; font-weight: 600; }
  .credit_info-value--green { color: #0fa968; }
  .credit_info-value--amber { color: #d97706; }

  /* ── FIN ROW VALUE COLOR HELPERS ── */
  .credit_fin-row-value--blue  { color: #2563eb; }
  .credit_fin-row-value--green { color: #0fa968; }
  .credit_fin-row-value--amber { color: #d97706; }
  .credit_fin-row-value--red   { color: #dc2626; }

  /* ── FLUJO LEGEND HELPERS ── */
  .credit_flujo-legend { display: flex; gap: 14px; align-items: center; font-size: .76rem; }
  .credit_flujo-legend-item { display: flex; align-items: center; gap: 5px; }
  .credit_flujo-legend-item--green { color: #0fa968; }
  .credit_flujo-legend-item--blue  { color: #2563eb; }

  .credit_icon-sm  { font-size: 1rem; }
  .credit_icon-xs  { font-size: .85rem; }
  .credit_btn--icon { padding: 6px 10px; }

  .chart-hint{
      font-size:12px;
      color:#6b7280;
      margin-bottom:10px;
  }

  /* ── HEADER BAR ── */
  .header-bar {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 20px;
    border: 1px solid #eef0f4;
  }

  .kpi-block {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    padding-right: 28px;
    border-right: 1px solid #e4e7ed;
  }
  .kpi-block:last-of-type {
    border-right: none;
    padding-right: 0;
    padding-left: 28px;
    flex: initial;
  }
  .kpi-block + .kpi-block {
    padding-left: 28px;
  }

  .kpi-icon {
    width: 40px; height: 40px;
    border-radius: 8px;
    display: grid; place-items: center;
    font-size: 18px;
    flex-shrink: 0;
  }
  .kpi-icon.blue   { background: #eff6ff; color: #3b82f6; }
  .kpi-icon.green  { background: #ecfdf5; color: #10b981; }
  .kpi-icon.orange { background: #fff4ec; color: #f97316; }
  .kpi-icon.teal   { background: #f0fdfa; color: #0d9488; }

  .kpi-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 2px;
  }
  .kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    font-family: 'DM Mono', monospace;
    letter-spacing: -.02em;
  }
  .kpi-value.small { font-size: 16px; }

  .badge-socios {
    background: #f97316;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 8px;
    white-space: nowrap;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding-left: 28px;
    border-left: 1px solid #e4e7ed;
  }

  .btn-icon {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #e4e7ed;
    background: #ffffff;
    color: #6b7280;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
  }

  .btn-icon:hover { background: #f7f8fa; color: #111827; border-color: #c9cdd6; }

  .badge-socios {
    background: #f97316;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius:8px;
    white-space: nowrap;
  }

  .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
  }

  /* Barra progreso */
.avcprogress {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

.avcprogress-bar {
  height: 100%;
  background: #afbd86;
}

.jc-modalavc {
  background: #fff;
  width: 80%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
  animation: fadeIn 0.2s ease;
}

@media (min-width: 1700px) {
  /*cuando la pantalla es mayor a 1700px*/
  .jc-modalavc {
    width:85%;
  }
}

.porcentExc{
  color: #0fa968 !important;
}
.porcentRegular{
  color: orange !important;
}

.porcentBaja{
  color: #ef4444 !important;
}

.flowchart_wrap {
  background: #ffffff;
  border: 1px solid #e2ddd6;
  border-radius: 14px;
  padding: 1.6rem;
  box-shadow: 0 2px 16px rgba(26,23,20,.07);
  font-family: 'Instrument Sans', sans-serif;
  max-width: 900px;
  margin: 2rem auto;
}

.flowchart_header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.4rem;
}

.flowchart_title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #1a1714;
}

.flowchart_tag {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #9d9188;
  border: 1px solid #e2ddd6;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
}