/* ── Configuración · rediseño (31-oct-2026, aprobado por el dueño) ──────────────────────────
   Lienzo: claude.ai/artifact/PDFR2a7zuUfWe8UPNvERxN. Mismo lenguaje que el Contable nuevo:
   blanco y negro, sin íconos de colores ni sellos en mayúscula (el estado es un punto chico),
   un bloque por fila y cada bloque plegable (_cfgPleg en index.html), naranja solo en acciones.
   Es una capa encima del CSS de siempre: los ids, clases y handlers que lee el resto del
   Sistema no cambian. Todo va bajo #s-config para no tocar otras pantallas. */

/* Riel: una tarjeta, sin íconos; el número en gris y un punto ámbar si hay algo que hacer. */
#s-config .cfg-shell { grid-template-columns: 236px minmax(0, 1fr); gap: 16px; }
#s-config .cfg-rail { top: 12px; padding: 10px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,.04); }
#s-config .cfg-rail-top { padding: 0 0 4px; }
#s-config .cfg-rail-title { display: none; }
#s-config .cfg-rail-search { height: 36px; border-radius: 10px; border-color: var(--border); background: transparent; }
#s-config .cfg-rail-search:focus-within { border-color: color-mix(in srgb, var(--text) 40%, transparent); box-shadow: none; }
#s-config .cfg-rail-grp { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text3); padding: 12px 10px 5px; }
#s-config .cfg-rail-item { min-height: 36px; padding: 0 10px; border-radius: 9px; font-size: 13px; color: var(--text2); }
#s-config .cfg-rail-item svg { display: none; }
#s-config .cfg-rail-item:hover { background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); }
#s-config .cfg-rail-item.active { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); font-weight: 600; }
#s-config .cfg-rail-item:focus-visible { outline: 2px solid color-mix(in srgb, var(--text) 40%, transparent); outline-offset: -2px; }
#s-config .cfg-rail-hint { font-size: 11.5px; font-weight: 500; color: var(--text3); }
#s-config .cfg-rail-item.active .cfg-rail-hint { color: var(--text3); opacity: 1; }
/* "1 pausado", "4" pendientes: algo para hacer = punto ámbar, sin texto. */
#s-config .cfg-rail-hint.warn { font-size: 0; width: 6px; height: 6px; padding: 0; border-radius: 50%; background: var(--amber); flex-shrink: 0; }
#s-config .cfg-rail-hint.warn:empty { display: none; }
#s-config .cfg-rail-foot { padding: 12px 10px 4px; font-size: 11.5px; }

/* Página */
#s-config .cfg-main { max-width: 1240px; }
#s-config .cfg-page-h { margin: 4px 0 16px; }
#s-config .cfg-page-t { font-size: 22px; font-weight: 650; letter-spacing: -.5px; }
#s-config .cfg-page-d { font-size: 13px; color: var(--text2); margin-top: 5px; line-height: 1.5; max-width: 680px; }

/* Un bloque por fila: todas las grillas de tarjetas pasan a una columna. */
#s-config .cfg-ag-grid { columns: auto !important; }
#s-config .cfg-2col, #s-config .cfg-cob-grid, #s-config .cfg-comis-grid, #s-config .cfg-cotiz-grid,
#s-config .cfg-partner-col { display: flex !important; flex-direction: column; gap: 12px; }
#s-config .cfg-2col > .cfg-sec, #s-config .cfg-cob-grid > .pay-card, #s-config .cfg-comis-grid > .card { margin: 0; }
#s-config .cfg-sec, #s-config .pay-card { margin: 0 0 12px; border-radius: 16px; overflow: hidden; }
#s-config .cfg-cob-grid > .pay-card::after { display: none; }
#s-config .cfg-cob-grid > .pay-card:last-child:nth-child(odd) { grid-column: auto; }

/* Encabezado de bloque: sin ícono de color; la flecha a la izquierda pliega (ver _cfgPleg). */
#s-config .cfg-chip { display: none !important; }
#s-config .cfg-head { padding: 15px 22px; gap: 10px 14px; align-items: center; border-bottom: 1px solid var(--border); }
#s-config .cfg-head-l { align-items: flex-start; gap: 10px; }
#s-config .cfg-sec > .cfg-head, #s-config .pay-card > .cfg-head { cursor: pointer; user-select: none; }
#s-config .cfg-sec > .cfg-head > .cfg-head-l::before, #s-config .pay-card > .cfg-head > .cfg-head-l::before {
  content: ""; width: 12px; height: 12px; margin-top: 3px; flex-shrink: 0; background: var(--text3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .18s ease; }
#s-config .cfg-plegada > .cfg-head > .cfg-head-l::before { transform: rotate(-90deg); }
#s-config .cfg-plegada > .cfg-head { border-bottom: 0; }
#s-config .cfg-plegada > .cfg-head .cfg-d { display: none; }
#s-config .cfg-plegada > :not(.cfg-head) { display: none !important; }
#s-config .cfg-t { font-size: 14.5px; font-weight: 650; letter-spacing: -.1px; margin-bottom: 3px; }
#s-config .cfg-d { font-size: 12.5px; color: var(--text3); line-height: 1.5; max-width: 760px; }

/* Filas: etiqueta a la izquierda, el dato a la derecha. Los campos se ven como texto hasta
   que se tocan (editar en el lugar): borde solo al pasar el mouse o al escribir. */
#s-config .cfg-row { grid-template-columns: minmax(200px, 320px) minmax(0, 1fr); gap: 8px 24px; padding: 13px 22px; border-bottom: 1px solid var(--border); }
#s-config .cfg-row:hover { background: color-mix(in srgb, var(--text) 2.5%, transparent); }
#s-config .cfg-row-l b { font-size: 13px; font-weight: 600; }
#s-config .cfg-row-l span { font-size: 12px; color: var(--text3); }
#s-config .cfg-row > .tarif-edit-inp, #s-config .cfg-row .cfg-pct .tarif-edit-inp, #s-config .cfg-row-r > .tarif-edit-inp {
  justify-self: end; width: 100%; max-width: 380px; border-color: transparent; background: transparent; text-align: right;
  font-weight: 500; transition: border-color .12s, background .12s; }
#s-config .cfg-row > textarea.tarif-edit-inp { text-align: left; max-width: 520px; }
#s-config .cfg-row:hover > .tarif-edit-inp, #s-config .cfg-row:hover .cfg-pct .tarif-edit-inp, #s-config .cfg-row:hover .cfg-row-r > .tarif-edit-inp {
  border-color: var(--border2); }
#s-config .cfg-row .tarif-edit-inp:focus { border-color: color-mix(in srgb, var(--text) 45%, transparent) !important; background: var(--bg) !important;
  box-shadow: none !important; text-align: left; }
#s-config .cfg-row .cfg-pct { justify-self: end; }
#s-config .cfg-row .cfg-pct .tarif-edit-inp { width: 90px; }
#s-config .cfg-btn-row { justify-self: end; border-color: var(--border); }
#s-config .cfg-btn-row:hover { border-color: color-mix(in srgb, var(--text) 30%, transparent); }
#s-config .cfg-btn-row svg { color: var(--text3); }
#s-config .cfg-lbl { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text2); }
#s-config .cfg-body { padding: 16px 22px; }
#s-config .cfg-foot, #s-config .cfg-nota, #s-config .cfg-nota-bloque { padding-left: 22px; padding-right: 22px; }
#s-config .cfg-vacio { padding: 20px 22px; }

/* Estados: un punto chico + texto normal. Fuera los sellos en mayúscula con fondo de color. */
#s-config .cfg-st, #s-config .pay-pill, #s-config .usr-chip, #s-config .rol-chip, #s-config .log-tag, #s-config .usr-tag {
  background: none !important; border: 0 !important; padding: 0 !important; text-transform: none !important; letter-spacing: 0 !important;
  font-size: 12px !important; font-weight: 500 !important; color: var(--text2) !important; gap: 7px; }
#s-config .cfg-st::before { width: 7px; height: 7px; }
#s-config .cfg-st.ok::before, #s-config .pay-pill.s-ok .pay-dot { background: var(--green); }
#s-config .cfg-st.warn::before, #s-config .pay-pill.s-warn .pay-dot { background: var(--amber); }
#s-config .cfg-st.off::before, #s-config .pay-pill.s-off .pay-dot { background: color-mix(in srgb, var(--text) 30%, transparent); }
#s-config .pay-pill.s-down .pay-dot { background: var(--red); }
#s-config .log-tag-alta { color: var(--green) !important; }
#s-config .log-tag-baja { color: var(--red) !important; }

/* Interruptores en tinta (prendido = negro/blanco), no en verde. */
#s-config .cfg-toggle { border-color: transparent; background: color-mix(in srgb, var(--text) 16%, transparent); }
#s-config .cfg-toggle span { background: var(--bg2); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
#s-config .cfg-toggle.on { background: var(--text); border-color: var(--text); }
#s-config .cfg-toggle.on span { background: var(--bg2); }
#s-config .usr-mod input, #s-config input[type="checkbox"] { accent-color: var(--text); }

/* Equipo, usuarios y canales: listas en tinta, sin avatares ni etiquetas naranjas. */
#s-config .eq-ini, #s-config .usr-ini { background: color-mix(in srgb, var(--text) 8%, transparent) !important; color: var(--text) !important; }
#s-config .eq-tag { background: none !important; padding: 0 !important; font-size: 12px !important; font-weight: 500 !important; color: var(--text3) !important; }
#s-config .eq-tag + .eq-tag::before { content: "· "; }
#s-config .eq-fila, #s-config .eq-card { background: transparent; }
#s-config .eq-fila { padding-left: 22px; padding-right: 22px; }
#s-config .eq-fila:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
#s-config .eq-card.abierta { box-shadow: inset 2px 0 0 var(--text); background: color-mix(in srgb, var(--text) 2.5%, transparent); }
#s-config .eq-fila:focus-visible { outline: 2px solid color-mix(in srgb, var(--text) 40%, transparent); }
#s-config .cnl-fila { padding-left: 22px; padding-right: 22px; }
#s-config .usr-row, #s-config .usr-cols { padding-left: 22px; padding-right: 22px; }
#s-config .usr-cols span { font-size: 11.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text3); }
#s-config .costo-row { padding-left: 22px; padding-right: 22px; }
#s-config .costo-row.falta { background: transparent; }

/* Datos y respaldo: barras en tinta, ámbar/rojo solo cuando se acerca al tope; línea del 70 %. */
#s-config .cfg-db-bar { position: relative; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: visible; }
#s-config .cfg-db-bar i { border-radius: 99px; background: color-mix(in srgb, var(--text) 55%, transparent); }
#s-config .cfg-db-bar::after { content: ""; position: absolute; left: 70%; top: -3px; bottom: -3px; border-left: 1px dashed color-mix(in srgb, var(--text) 35%, transparent); }

/* Cobranzas: los medios y sus bloques plegables con el mismo encabezado que el resto. */
#s-config .cfg-pleg-sum { padding: 15px 22px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg2);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; flex-direction: row-reverse; justify-content: flex-end; }
#s-config .cfg-pleg-sum:hover { border-color: color-mix(in srgb, var(--text) 20%, transparent); }
#s-config .cfg-pleg-sum:hover .cfg-pleg-chev { color: var(--text); }
#s-config .cfg-pleg-sum > div { flex: 1; }
#s-config .cfg-pleg-t { font-size: 14.5px; font-weight: 650; }
#s-config .cfg-pleg-n { background: none; padding: 0; font-size: 12px; font-weight: 500; }
#s-config .cfg-pleg-chev { width: 12px; height: 12px; transform: rotate(-90deg); }
#s-config .cfg-pleg[open] > .cfg-pleg-sum .cfg-pleg-chev { transform: none; }
#s-config .pay-card .cfg-t { font-size: 14px; }
#s-config .cfg-link-btn, #s-config .cfg-partner-crear { color: var(--text) !important; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent); }

/* Escala de comisiones: tabla limpia, encabezados sin mayúscula. */
#s-config table th { font-size: 11.5px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text3) !important; }
#s-config table td:first-child, #s-config table th:first-child { padding-left: 22px; }

/* ── Resumen nuevo ── */
.cfg-rv { margin: 0 0 12px; border-radius: 16px; overflow: hidden; }
.cfg-rv-h { display: flex; align-items: center; gap: 10px; padding: 15px 22px; }
.cfg-rv-h h3 { margin: 0; font-size: 14.5px; font-weight: 650; color: var(--text); }
.cfg-rv-h .n { font-size: 12px; color: var(--text3); font-variant-numeric: tabular-nums; }
.cfg-rv-h .t { margin-left: auto; font-size: 12px; color: var(--text3); }
.cfg-rv-r { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 14px; padding: 13px 22px;
  border-top: 1px solid var(--border); cursor: pointer; font-family: 'Geist', sans-serif; }
.cfg-rv-r:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.cfg-rv-r:focus-visible { outline: 2px solid color-mix(in srgb, var(--text) 40%, transparent); outline-offset: -2px; }
.cfg-rv-r.estatico { cursor: default; }
.cfg-rv-r.estatico:hover { background: none; }
.cfg-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: color-mix(in srgb, var(--text) 30%, transparent); }
.cfg-dot.ok { background: var(--green); } .cfg-dot.amb { background: var(--amber); } .cfg-dot.red { background: var(--red); }
.cfg-rv-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cfg-rv-l b { font-size: 13px; font-weight: 600; color: var(--text); }
.cfg-rv-l span { font-size: 12px; color: var(--text3); line-height: 1.45; }
.cfg-rv-v { font-size: 13px; font-weight: 500; color: var(--text); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cfg-rv-v.mu { color: var(--text3); font-weight: 400; font-size: 12px; }
.cfg-rv-ir { font-size: 12px; font-weight: 600; color: var(--text2); white-space: nowrap; }
.cfg-rv-r:hover .cfg-rv-ir { color: var(--text); }
.cfg-rv-ok { display: flex; align-items: center; gap: 10px; padding: 13px 22px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text2); }

/* ── Partners: lista con una ficha abierta ── */
#s-config .cfg-partner-grid { display: flex !important; flex-direction: column; gap: 0; background: none; }
.cfg-pt-r { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 14px; padding: 13px 22px;
  border-top: 1px solid var(--border); cursor: pointer; font-family: 'Geist', sans-serif; }
.cfg-pt-r:first-child { border-top: 0; }
.cfg-pt-r:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.cfg-pt-r:focus-visible { outline: 2px solid color-mix(in srgb, var(--text) 40%, transparent); outline-offset: -2px; }
.cfg-pt-r .chv { width: 12px; height: 12px; color: var(--text3); flex-shrink: 0; transform: rotate(-90deg); transition: transform .18s; }
.cfg-pt-r.on .chv { transform: none; }
.cfg-pt-r.on { background: color-mix(in srgb, var(--text) 3%, transparent); }
#s-config .cfg-partner { padding: 6px 22px 16px 48px; background: color-mix(in srgb, var(--text) 3%, transparent); gap: 12px; }
#s-config .cfg-partner-k { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text3); }

@media (max-width: 900px) {
  #s-config .cfg-shell { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #s-config .cfg-rail { padding: 6px; }
  #s-config .cfg-rail-top { display: none; }
  #s-config .cfg-rail-item { min-height: 32px; border: 0; border-radius: 9px; background: transparent; }
  #s-config .cfg-rail-item.active { background: color-mix(in srgb, var(--text) 8%, transparent); }
  #s-config .cfg-page-t { font-size: 19px; }
  #s-config .cfg-head, #s-config .cfg-row, .cfg-rv-h, .cfg-rv-r, .cfg-pt-r, #s-config .cfg-body { padding-left: 16px; padding-right: 16px; }
  #s-config .cfg-row { grid-template-columns: minmax(0, 1fr); }
  #s-config .cfg-row > .tarif-edit-inp, #s-config .cfg-row .cfg-pct, #s-config .cfg-btn-row { justify-self: stretch; max-width: none; text-align: left; }
  #s-config .cfg-row > .tarif-edit-inp { border-color: var(--border2); }
  #s-config .cfg-partner { padding: 6px 16px 14px; }
  .cfg-rv-r { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  #s-config .cfg-head-l::before, .cfg-pt-r .chv { transition: none; }
}

/* Resumen: las dos listas van una debajo de la otra (antes era una grilla de tarjetas). */
#s-config .cfg-tiles { display: block; }

/* Ajustes tras la primera pasada */
#s-config .cfg-comis-grid { align-items: stretch; }
#s-config .cfg-comis-grid > *, #s-config .cfg-2col > *, #s-config .cfg-cob-grid > * { width: 100%; box-sizing: border-box; }
#s-config .cfg-row > .cfg-row-r { justify-self: end; }
#s-config .cfg-row > .sel, #s-config .cfg-row > select { justify-self: end; width: 100%; max-width: 260px; }
#s-config .cfg-aviso-donde { background: none !important; padding: 0 !important; font-weight: 500 !important; color: var(--text3) !important; }
#s-config .cfg-cotiz-r { grid-template-columns: 54px minmax(0, 260px) minmax(0, 260px); padding-left: 22px; padding-right: 22px; }
#s-config .cfg-cotiz-k { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: 0; }
#s-config .cfg-cotiz-v small { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
@media (max-width: 900px) { #s-config .cfg-cotiz-r { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); padding-left: 16px; padding-right: 16px; } }