/* Membresía y precios · estilos provisionales (el rediseño «Marcador» pone la cara final). Todo va dentro de .tcm; los colores salen de variables
 * que toman los del Hub si existen (--accent, --gold, --text-muted…). Sin ellas, se ve bien igual. */
.tcm {
  --m-fondo: var(--bg-card, #111925); --m-borde: var(--border, #26374d); --m-texto: var(--text-main, #eef4fa); --m-suave: var(--text-muted, #93a7bc);
  --m-acento: var(--accent, #00ff88); --m-acento-txt: #04130b; --m-aviso: var(--gold, #f5c451); --m-error: #ff6b78; --m-radio: 12px;
  color: var(--m-texto); font-size: 16px; line-height: 1.4; max-width: 1100px; margin: 0 auto; padding: 0 16px 32px;
}
.tcm *, .tcm *::before, .tcm *::after { box-sizing: border-box; }
.tcm-titulo { margin: 8px 0 14px; font-size: 1.5rem; }
.tcm h3, .tcm h4, .tcm p, .tcm ul { margin-top: 0; }
.tcm h3 { font-size: 1.1rem; margin-bottom: 8px; } .tcm h4 { font-size: 1rem; margin-bottom: 6px; }
.tcm-rejilla { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .tcm-rejilla { grid-template-columns: 1fr 1fr; } }
.tcm-tarjeta, .tcm-escenario { background: var(--m-fondo); border: 1px solid var(--m-borde); border-radius: var(--m-radio); padding: 14px; margin-bottom: 12px; min-width: 0; }
.tcm-rejilla > .tcm-tarjeta { margin-bottom: 0; }
.tcm-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tcm-etiqueta { border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: .8rem; border: 1px solid var(--m-borde); }
.tcm-etiqueta.ok { background: var(--m-acento); color: var(--m-acento-txt); border-color: var(--m-acento); }
.tcm-etiqueta.off { color: var(--m-aviso); border-color: var(--m-aviso); }
.tcm-grande { font-size: 1.4rem; font-weight: 800; margin-bottom: 4px; }
.tcm-precio { font-size: 1.8rem; font-weight: 800; margin-bottom: 6px; } .tcm-precio small { font-size: .9rem; font-weight: 400; color: var(--m-suave); }
.tcm-suave { color: var(--m-suave); font-size: .9rem; }
.tcm-aviso { color: var(--m-aviso); } .tcm-error { color: var(--m-error); }
.tcm-mensaje { border: 1px solid var(--m-acento); border-radius: 8px; padding: 10px 12px; } .tcm-mensaje.error { border-color: var(--m-error); color: var(--m-error); }
.tcm-lista { padding-left: 20px; margin-bottom: 8px; } .tcm-lista li { margin-bottom: 6px; }
.tcm-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.tcm-boton { min-height: 44px; padding: 8px 18px; border-radius: 10px; border: 1px solid var(--m-acento); background: var(--m-acento); color: var(--m-acento-txt); font-weight: 800; font-size: 1rem; cursor: pointer; }
.tcm-boton.sec { background: transparent; color: var(--m-texto); border-color: var(--m-borde); } .tcm-boton.peq { min-height: 36px; padding: 4px 12px; font-size: .9rem; }
.tcm-boton:disabled { opacity: .5; cursor: not-allowed; }
.tcm :focus-visible { outline: 3px solid var(--m-acento); outline-offset: 2px; }
.tcm-campos { display: grid; gap: 10px; }
.tcm-campo label { display: block; font-size: .9rem; margin-bottom: 4px; }
.tcm-entrada { display: flex; align-items: center; gap: 8px; }
.tcm-entrada input, .tcm-grupo input { width: 100%; min-height: 44px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--m-borde); background: rgba(255,255,255,.04); color: inherit; font: inherit; }
.tcm-entrada input[aria-invalid="true"] { border-color: var(--m-error); }
.tcm-unidad { min-width: 64px; color: var(--m-suave); font-size: .85rem; }
.tcm-interruptor { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.tcm-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; } .tcm-grupo input { width: 90px; }
.tcm-barra { background: var(--m-fondo); border: 1px solid var(--m-borde); border-radius: var(--m-radio); padding: 10px 14px; margin: 12px 0; }
.tcm-escenarios { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .tcm-escenarios { grid-template-columns: 1fr 1fr; } }
.tcm-tabla-caja { overflow-x: auto; }
.tcm-tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tcm-tabla th, .tcm-tabla td { padding: 6px 8px; border-bottom: 1px solid var(--m-borde); text-align: right; white-space: nowrap; }
.tcm-tabla th:first-child, .tcm-tabla thead th:first-child, .tcm-tabla tbody th { text-align: left; white-space: normal; font-weight: 400; }
.tcm-tabla tr.fuerte th, .tcm-tabla tr.fuerte td { font-weight: 800; }
.tcm-resumen { font-weight: 800; margin: 8px 0 0; } .tcm-resumen.ok { color: var(--m-acento); } .tcm-resumen.mal { color: var(--m-error); }
.tcm-deslizador { margin: 6px 0; } .tcm-deslizador input[type="range"] { width: 100%; min-height: 32px; accent-color: var(--m-acento); }
.tcm-oculto { position: absolute; left: -9999px; }
.tcm-propuesta { border-top: 1px solid var(--m-borde); padding-top: 10px; margin-top: 10px; }
.tcm-historial { border-top: 1px solid var(--m-borde); padding: 8px 0; } .tcm-historial summary { cursor: pointer; min-height: 32px; }
.tcm-barra input[type="text"], .tcm-propuesta input[type="text"] { width: 100%; min-height: 44px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--m-borde); background: rgba(255,255,255,.04); color: inherit; font: inherit; }

/* Gasto de IA (API) */
.tcm-gasto .tcm-tabla-caja { overflow-x: auto; margin: 10px 0; }
.tcm-gasto .tcm-tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tcm-gasto .tcm-tabla th, .tcm-gasto .tcm-tabla td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--m-borde); }
.tcm-gasto .tcm-total th, .tcm-gasto .tcm-total td { font-weight: 800; }
.tcm-gasto select { background: var(--m-fondo); color: var(--m-texto); border: 1px solid var(--m-borde); border-radius: 8px; padding: 6px 10px; }

/* Renovación automática: datos del período, avisos, historial de cobros y acceso por el cuerpo técnico */
.tcm-datos { margin: 8px 0 0; display: grid; gap: 6px; }
.tcm-dato { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--m-borde); padding-bottom: 4px; }
.tcm-dato dt { color: var(--m-suave); } .tcm-dato dd { margin: 0; font-weight: 700; text-align: right; }
.tcm-renovacion .tcm-mensaje { margin: 8px 0; }
.tcm-historial-cobros, .tcm-renovacion { grid-column: 1 / -1; }
.tcm-tabla tr.tcm-sin-saldo td { color: var(--m-aviso); }
.tcm-tabla td:nth-child(2) { text-align: left; white-space: normal; }
/* Celular: el concepto lleva el nombre del club y es largo; fecha y concepto bajan de línea y solo el monto no se parte (nada se corta a la derecha). */
@media (max-width: 520px) {
  .tcm-historial-cobros .tcm-tabla th, .tcm-historial-cobros .tcm-tabla td { white-space: normal; padding: 6px 4px; text-align: left; overflow-wrap: anywhere; }
  .tcm-historial-cobros .tcm-tabla th:last-child, .tcm-historial-cobros .tcm-tabla td:last-child { white-space: nowrap; text-align: right; overflow-wrap: normal; }
}

/* r17za · Calculadora nueva de «Precios y ganancias» (la de la página suelta, con los colores del portal admin) */
.tcm-calc { display: flex; flex-direction: column; gap: 22px; margin: 18px 0; min-width: 0;
  --m-mal: var(--m-error); --m-mal-suave: rgba(255, 107, 120, .12); --m-ok-suave: rgba(0, 255, 136, .10); --m-ok-suave: color-mix(in srgb, var(--m-acento) 14%, transparent); --m-aviso-suave: rgba(245, 196, 81, .12); }
.tcm-calc .tcm-eyebrow { font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; color: var(--m-acento); font-weight: 800; margin-bottom: -16px; }
.tcm-calc .tcm-calc-titulo { font-size: 1.4rem; margin: 0; }
.tcm-calc .tcm-sec { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tcm-calc .tcm-sec > h3 { margin: 0; font-size: 1.15rem; }
.tcm-panel { background: var(--m-fondo); border: 1px solid var(--m-borde); border-radius: var(--m-radio); padding: 14px; min-width: 0; }
.tcm-calc .tcm-v { font-variant-numeric: tabular-nums; font-weight: 700; }
.tcm-nw { display: inline-flex; align-items: center; gap: 5px; vertical-align: baseline; }
.tcm-i { all: unset; box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--m-suave); color: var(--m-suave); font: italic 700 11px/16px system-ui, sans-serif; text-align: center; cursor: pointer; flex: none; }
.tcm-i:hover, .tcm-i:focus-visible { border-color: var(--m-acento); color: var(--m-acento); }
.tcm-i:focus-visible { outline: 2px solid var(--m-acento); outline-offset: 2px; }
.tcm-globo { position: fixed; z-index: 9999; max-width: min(280px, calc(100vw - 24px)); background: var(--m-texto); color: var(--m-fondo); font-size: .85rem; line-height: 1.4; padding: 8px 10px; border-radius: 8px; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.tcm-globo[hidden] { display: none; }
.tcm-switch { display: flex; gap: 10px 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.tcm-swl { font-weight: 700; }
.tcm-seg { display: flex; gap: 6px; }
.tcm-seg .tcm-boton { min-width: 64px; }
.tcm-boton[aria-pressed="true"] { background: var(--m-acento); color: var(--m-acento-txt); border-color: var(--m-acento); }
.tcm-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tcm-cmp { display: flex; flex-direction: column; gap: 6px; }
.tcm-cmp h3 { margin: 0; font-size: 1rem; }
.tcm-big { font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 800; line-height: 1.1; }
.tcm-cmp.loss .tcm-big, .tcm-calc .neg, .tcm-calc .neg .tcm-v { color: var(--m-mal); }
.tcm-diff { grid-column: 1 / -1; margin: 0; }
.tcm-pricelist { font-size: .8rem; color: var(--m-suave); margin: 0; }
.tcm-pill { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: var(--m-ok-suave); color: var(--m-acento); white-space: nowrap; display: inline-block; }
.tcm-pill.bad { background: var(--m-mal-suave); color: var(--m-mal); }
.tcm-pill.warn { background: var(--m-aviso-suave); color: var(--m-aviso); }
.tcm-pill.cambio { background: transparent; color: var(--m-suave); border: 1px solid var(--m-borde); }
.tcm-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 12px; align-items: start; }
.tcm-fs { border: 1px solid var(--m-borde); background: var(--m-fondo); border-radius: var(--m-radio); padding: 12px 14px 14px; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.tcm-fs legend { font-weight: 800; padding: 0 6px; }
.tcm-fs.dim { opacity: .5; }
.tcm-fld { display: grid; grid-template-columns: 1fr 130px; gap: 2px 10px; align-items: center; }
.tcm-fld > label { font-size: .92rem; min-width: 0; }
.tcm-in { display: flex; align-items: center; gap: 6px; }
.tcm-fld input[type="number"] { width: 100%; min-width: 0; min-height: 40px; padding: 6px 8px; border: 1px solid var(--m-borde); border-radius: 8px; background: rgba(255,255,255,.04); color: inherit; font: inherit; font-variant-numeric: tabular-nums; text-align: right; }
.tcm-u { font-size: .78rem; color: var(--m-suave); min-width: 22px; }
.tcm-eq, .tcm-vig { grid-column: 1 / -1; font-size: .8rem; color: var(--m-suave); font-variant-numeric: tabular-nums; }
.tcm-vig { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tcm-vig .tcm-small, .tcm-vig .tcm-error { flex-basis: 100%; }
.tcm-precio-campo { border-bottom: 1px dashed var(--m-borde); padding-bottom: 10px; }
.tcm-fld.tcm-rng { grid-template-columns: 1fr; }
.tcm-fld.tcm-rng input { width: 100%; accent-color: var(--m-acento); min-height: 32px; }
.tcm-chk { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; }
.tcm-chk input { margin-top: 4px; accent-color: var(--m-acento); }
.tcm-small { font-size: .8rem; color: var(--m-suave); margin: 0; }
.tcm-fixed { display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--m-borde); padding-bottom: 12px; }
.tcm-warnmsg { font-size: .85rem; color: var(--m-aviso); background: var(--m-aviso-suave); padding: 6px 10px; border-radius: 8px; }
.tcm-tarif { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--m-borde); padding-top: 12px; min-width: 0; }
.tcm-tarif h4 { margin: 0; display: flex; gap: 8px; align-items: center; }
.tcm-tscroll { overflow-x: auto; max-width: 100%; }
.tcm-tarif table { border-collapse: collapse; font-size: .82rem; width: 100%; min-width: 420px; }
.tcm-tarif th, .tcm-tarif td { padding: 5px 6px; text-align: right; border-bottom: 1px solid var(--m-borde); white-space: nowrap; }
.tcm-tarif thead th { font-size: .75rem; color: var(--m-suave); font-weight: 700; }
.tcm-tarif tbody th { text-align: left; font-weight: 500; white-space: normal; min-width: 110px; }
.tcm-tcell { width: 76px; font: inherit; font-variant-numeric: tabular-nums; text-align: right; padding: 3px 4px; border: 1px solid var(--m-borde); background: rgba(255,255,255,.04); color: inherit; border-radius: 6px; -moz-appearance: textfield; }
.tcm-tcell:disabled { border-color: transparent; background: transparent; opacity: 1; -webkit-text-fill-color: var(--m-texto); }
.tcm-tcell::-webkit-inner-spin-button { display: none; }
.tcm-sim { text-align: left; }
.tcm-r { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-size: .9rem; }
.tcm-r > span:first-child { color: var(--m-suave); min-width: 0; }
.tcm-r.tot { border-top: 1px solid var(--m-borde); padding-top: 6px; font-weight: 800; }
.tcm-r.tot > span:first-child { color: var(--m-texto); }
.tcm-incluye { border: 1px solid var(--m-acento); background: var(--m-ok-suave); border-radius: var(--m-radio); padding: 12px 14px; max-width: 80ch; }
.tcm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 12px; }
.tcm-card { background: var(--m-fondo); border: 1px solid var(--m-borde); border-radius: var(--m-radio); padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tcm-card > header { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.tcm-card h3 { margin: 0; font-size: 1rem; }
.tcm-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); gap: 10px; }
.tcm-plan { border: 1px solid var(--m-borde); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tcm-plan.loss { border-color: var(--m-mal); background: var(--m-mal-suave); }
.tcm-plan h4 { margin: 0; display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: .95rem; }
.tcm-worst { font-size: .8rem; border-top: 1px dashed var(--m-borde); padding-top: 6px; }
.tcm-worst.loss { color: var(--m-mal); }
.tcm-tbl { display: flex; flex-direction: column; }
.tcm-tbl .tcm-r { padding: 8px 0; border-bottom: 1px solid var(--m-borde); font-size: .95rem; }
.tcm-tbl .tcm-r > span:first-child { color: var(--m-texto); }
.tcm-grp { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--m-acento); font-weight: 800; padding-top: 14px; }
.tcm-final { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; background: var(--m-ok-suave); border-radius: 10px; padding: 12px 14px; margin-top: 8px; }
.tcm-final.loss { background: var(--m-mal-suave); }
.tcm-final .tcm-big { font-size: 1.5rem; }
.tcm-bags { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.tcm-bag { display: flex; flex-direction: column; gap: 6px; }
.tcm-bag h3 { margin: 0; font-size: 1rem; display: flex; gap: 6px; align-items: center; }
.tcm-bagv { font-size: .88rem; color: var(--m-suave); padding-bottom: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tcm-rep-m { display: flex; justify-content: flex-end; padding: 2px 0 8px; border-bottom: 1px solid var(--m-borde); }
.tcm-rep-m.neg { color: var(--m-mal); }
.tcm-barra-rep p { margin: 0 0 6px; }
.tcm-barra-sup { margin-top: 4px; }
.tcm-gastos > summary { cursor: pointer; font-weight: 800; min-height: 32px; }
.tcm-gbody { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.tcm-gfields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px 28px; }
.tcm-falta { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.tcm-bar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; gap: 6px 12px; align-items: baseline; flex-wrap: wrap; background: var(--m-fondo); border: 1px solid var(--m-borde); border-radius: var(--m-radio); padding: 8px 14px; font-size: .88rem; box-shadow: 0 -4px 14px rgba(0,0,0,.25); }
.tcm-bar .tcm-v { font-size: 1.05rem; }
.tcm-bar.loss .tcm-v { color: var(--m-mal); }
#tcm-resumen-reparto td { white-space: normal; }
@media (max-width: 560px) {
  .tcm-compare { grid-template-columns: 1fr; }
  .tcm-fld { grid-template-columns: 1fr 112px; }
}
.tcm-tarif table.tcm-insc { min-width: 0; }
.tcm-tarif thead th:first-child { text-align: left; }
/* La «i» de ayuda es un botón chico: el portal admin pone a todos los botones un alto mínimo de 40 px en el celular; aquí no aplica. */
html body .tcm button.tcm-i { min-height: 0 !important; min-width: 0 !important; width: 18px !important; height: 18px !important; padding: 0 !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; line-height: 16px !important; font-size: 11px !important; }