/* ARC Créditos · frontend · v1.0.0
   Todos los colores, la fuente y el ancho llegan como variables desde el admin. */

.arc-cred{
  --arc-tinta:#12213A; --arc-acento:#1F3A6B; --arc-detalle:#E0A500;
  --arc-texto:#6B7A90; --arc-linea:#E3E7EE; --arc-fondo:#fff; --arc-hover:#F7F9FC;
  --arc-radio:0px; --arc-peso:600; --arc-ancho:1180px; --arc-fuente:inherit;
  font-family:var(--arc-fuente); color:var(--arc-tinta); background:var(--arc-fondo)
}
.arc-cred *{box-sizing:border-box}
.arc-cred__wrap{max-width:var(--arc-ancho); margin-inline:auto; padding:clamp(24px,4vw,40px) clamp(16px,4vw,32px)}
.arc-cred__head{margin-bottom:26px}
.arc-cred__h{font-size:clamp(1.5rem,3.4vw,2rem); font-weight:var(--arc-peso); letter-spacing:-.02em;
  line-height:1.1; margin:0; color:var(--arc-tinta)}
.arc-cred__lead{font-size:.92rem; color:var(--arc-texto); margin:10px 0 0; line-height:1.6; max-width:56ch}
.arc-cred__nota{font-size:.72rem; color:var(--arc-texto); line-height:1.65; margin:26px 0 0; max-width:70ch; opacity:.85}
.arc-cred__sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.arc-cred__lk{font-size:.82rem; font-weight:var(--arc-peso); color:var(--arc-tinta); background:none;
  border:0; border-bottom:1.5px solid var(--arc-detalle); padding:0 0 3px; margin-right:18px;
  cursor:pointer; text-decoration:none; font-family:inherit}
.arc-cred__lk--g{color:var(--arc-texto); border-bottom-color:var(--arc-linea)}
.arc-cred__lk:focus-visible{outline:2px solid var(--arc-acento); outline-offset:3px}

/* ---------------- Vista eje ---------------- */
.arc-eje__axis{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) minmax(0,1.4fr);
  gap:24px; align-items:end; margin:0 0 6px; font-size:.7rem; color:var(--arc-texto)}
.arc-eje__ticks{display:flex; justify-content:space-between; border-bottom:1px solid var(--arc-tinta); padding-bottom:5px}

.arc-eje__gt{font-size:.78rem; font-weight:var(--arc-peso); color:var(--arc-tinta); padding-bottom:7px;
  border-bottom:2px solid var(--arc-detalle); display:inline-block; margin:26px 0 2px}
.arc-cred--eje .arc-eje__gt:first-of-type{margin-top:22px}

.arc-eje__row{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) minmax(0,1.4fr);
  gap:24px; align-items:center; padding:16px 0; border-bottom:1px solid var(--arc-linea);
  cursor:pointer; width:100%; text-align:left; border-radius:var(--arc-radio)}
.arc-eje__row:hover,.arc-eje__row[aria-expanded="true"]{background:var(--arc-hover)}
.arc-eje__row.is-destacada{box-shadow:inset 3px 0 0 var(--arc-detalle); padding-left:12px}
.arc-eje__row:focus-visible{outline:2px solid var(--arc-acento); outline-offset:3px}

.arc-eje__nm{display:flex; gap:11px; align-items:flex-start}
.arc-eje__ic{width:19px; height:19px; stroke:var(--arc-texto); fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; flex:none; margin-top:2px}
.arc-eje__nm b{display:block; font-size:.94rem; font-weight:var(--arc-peso); line-height:1.25}
.arc-eje__nm i{display:block; font-style:normal; font-size:.78rem; color:var(--arc-texto); line-height:1.45; margin-top:3px}
.arc-eje__cupo{font-size:.84rem; line-height:1.45}
.arc-eje__bar{display:flex; align-items:center; gap:10px}
.arc-eje__track{flex:1; height:9px; background:var(--arc-linea); position:relative; border-radius:var(--arc-radio)}
.arc-eje__fill{position:absolute; left:0; top:0; bottom:0; background:var(--arc-acento); border-radius:var(--arc-radio)}
.arc-eje__mes{font-size:.8rem; font-variant-numeric:tabular-nums; min-width:62px; text-align:right; white-space:nowrap}

.arc-eje__mas{position:relative; flex:none; width:16px; height:16px; margin-left:4px}
.arc-eje__mas::before,.arc-eje__mas::after{content:""; position:absolute; left:50%; top:50%; background:var(--arc-texto)}
.arc-eje__mas::before{width:12px; height:1.5px; transform:translate(-50%,-50%)}
.arc-eje__mas::after{width:1.5px; height:12px; transform:translate(-50%,-50%)}
.arc-eje__row:hover .arc-eje__mas::before,.arc-eje__row:hover .arc-eje__mas::after{background:var(--arc-tinta)}
.arc-eje__row[aria-expanded="true"] .arc-eje__mas::before,
.arc-eje__row[aria-expanded="true"] .arc-eje__mas::after{background:var(--arc-tinta)}
.arc-eje__row[aria-expanded="true"] .arc-eje__mas::after{transform:translate(-50%,-50%) scaleY(0)}

.arc-eje__det{display:none; padding:2px 0 18px; border-bottom:1px solid var(--arc-linea); font-size:.82rem; max-width:60ch}
.arc-eje__det.is-on{display:block}
.arc-eje__det dl{margin:0 0 12px; display:grid; grid-template-columns:auto 1fr; gap:4px 14px}
.arc-eje__det dt{color:var(--arc-texto); margin:0}
.arc-eje__det dd{margin:0}

/* ---------------- Vista tarjetas ---------------- */
.arc-tar__switch{display:flex; justify-content:flex-end; margin-bottom:20px}
.arc-tar__switch button{border:1px solid var(--arc-linea); background:var(--arc-fondo); cursor:pointer;
  font:500 .86rem/1 inherit; color:var(--arc-texto); padding:10px 18px; border-radius:var(--arc-radio)}
.arc-tar__switch button + button{margin-left:-1px}
.arc-tar__switch button.is-on{background:var(--arc-tinta); color:var(--arc-fondo); border-color:var(--arc-tinta)}
.arc-tar__switch button:focus-visible{outline:2px solid var(--arc-acento); outline-offset:2px}

.arc-tar__grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:14px;
  list-style:none; margin:0; padding:0}
.arc-tar__card{display:flex; flex-direction:column; background:var(--arc-fondo);
  border:1px solid var(--arc-linea); border-top:4px solid var(--arc-acento);
  border-radius:var(--arc-radio); padding:20px}
.arc-tar__card.is-destacada{border-top-color:var(--arc-detalle)}
.arc-tar__ic{width:27px; height:27px; stroke:var(--arc-acento); fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; display:block; margin-bottom:10px}
.arc-tar__card h3{font-size:1.06rem; font-weight:var(--arc-peso); margin:0; line-height:1.25; color:var(--arc-tinta)}
.arc-tar__uso{margin:7px 0 15px; font-size:.82rem; line-height:1.5; color:var(--arc-texto); max-width:34ch}
.arc-tar__datos{margin:0 0 17px; border-top:1px solid var(--arc-linea)}
.arc-tar__datos>div{display:grid; grid-template-columns:62px 1fr; gap:10px; padding:9px 0;
  border-bottom:1px solid var(--arc-linea)}
.arc-tar__datos dt{margin:0; font-size:.74rem; color:var(--arc-texto); padding-top:1px}
.arc-tar__datos dd{margin:0; font-size:.84rem; line-height:1.4}
.arc-tar__acciones{display:flex; gap:9px; margin-top:auto; flex-wrap:wrap}
.arc-btn{flex:1 1 120px; text-align:center; text-decoration:none; cursor:pointer; font:600 .84rem/1 inherit;
  padding:11px 12px; border:1px solid var(--arc-tinta); border-radius:var(--arc-radio); color:var(--arc-tinta)}
.arc-btn--sim{background:var(--arc-fondo)}
.arc-btn--sol{background:var(--arc-detalle); border-color:var(--arc-detalle)}
.arc-btn:focus-visible{outline:2px solid var(--arc-acento); outline-offset:2px}

.arc-tar__tablaWrap{overflow-x:auto; border:1px solid var(--arc-linea); border-radius:var(--arc-radio)}
.arc-tar__tabla{width:100%; border-collapse:collapse; font-size:.86rem; min-width:680px}
.arc-tar__tabla th,.arc-tar__tabla td{text-align:left; padding:13px 15px;
  border-bottom:1px solid var(--arc-linea); vertical-align:top; line-height:1.4}
.arc-tar__tabla thead th{background:var(--arc-tinta); color:var(--arc-fondo); font-weight:var(--arc-peso); font-size:.78rem; border:0}
.arc-tar__tabla tbody th{font-weight:var(--arc-peso); width:22%}
.arc-tar__tabla tbody tr:nth-child(even){background:var(--arc-hover)}
.arc-tar__tabla a{color:var(--arc-acento); font-weight:var(--arc-peso); text-decoration:none; white-space:nowrap}
.arc-tar__tabla a:hover{text-decoration:underline}

/* ---------------- Responsivo ---------------- */
@media(max-width:860px){
  .arc-eje__row,.arc-eje__axis{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .arc-eje__bar,.arc-eje__ticks{grid-column:1/-1}
  .arc-eje__cupo{font-size:.8rem}
}
@media(max-width:620px){
  .arc-eje__axis{display:none}
  .arc-eje__row{grid-template-columns:1fr; gap:10px}
  .arc-eje__bar{grid-column:auto}
  .arc-tar__switch{justify-content:stretch}
  .arc-tar__switch button{flex:1}
}
@media(prefers-reduced-motion:no-preference){
  .arc-eje__row,.arc-tar__card,.arc-btn{transition:background-color .15s ease, border-color .15s ease}
  .arc-eje__mas::after{transition:transform .18s ease}
}
@media print{
  .arc-tar__switch,.arc-cred__lk--g,.arc-btn--sim{display:none!important}
  .arc-eje__det{display:block!important}
}