/* Añadidos de la versión SaaS sobre el sistema visual original (app.css no se toca para poder volver a sincronizarlo). */

/* ---- bloque de la cuenta, abajo en el carril (mismo lenguaje que el selector de tienda) */
.usr { margin:0; }
.usr-btn { background:transparent; border-color:transparent; padding:6px 8px; }
.usr-btn:hover, .usr-btn.on { background:var(--rail-hover); border-color:transparent; }
.usr-av { background:var(--solido); border:1px solid var(--rail-linea); color:#fff; font:800 13px var(--titulo); }
.usr .ts-txt small { overflow:hidden; text-overflow:ellipsis; }
.usr .ts-menu { top:auto; bottom:calc(100% + 8px); transform-origin:20% 100%; }
.usr-menu p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.usr-menu form { margin:0; }
.usr-ws { background:var(--lienzo-2); color:var(--tinta); font:800 14px var(--titulo); }
.usr-menu .ts-nueva { margin-top:0; border-top:0; padding:8px; border-radius:10px; }
.usr-menu .ts-nueva:hover { background:var(--hover); color:var(--tinta); }
.usr-menu .ts-nueva svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; color:var(--suave); }
.usr-menu .ts-op + .ts-nueva, .usr-menu form + .ts-nueva { margin-top:4px; border-top:1px solid var(--linea); border-radius:0 0 10px 10px; padding-top:10px; }
.usr-salir button { all:unset; box-sizing:border-box; width:100%; cursor:pointer; display:flex; align-items:center; gap:8px; padding:8px; border-radius:10px; font-size:13px; color:var(--suave); }
.usr-salir button:hover { background:var(--error-claro); color:var(--error); }
.usr-salir button:focus-visible { outline:2px solid var(--accion); outline-offset:-2px; }
.rail-compacta .usr-btn { padding:6px 7px; }

/* ---- miniaturas de plantillas en el inicio (imagen de la demo en lugar del iframe) */
.in-pl-mini img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; transition:transform 3.5s var(--ease-io); }
.in-pl:hover .in-pl-mini img { transform:scale(1.08); }

/* ---- pantalla «llega en el módulo N» */
.pend { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:18px; align-items:start; }
.pend-ic { width:64px; height:64px; border-radius:20px; display:grid; place-items:center; background:var(--solido); color:var(--accion); margin-bottom:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px -16px rgba(20,25,51,.6); }
.pend-ic svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pend-chip { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; border-radius:999px; background:var(--accion-claro); color:var(--accion-osc); border:1px solid var(--accion-borde); font-size:13px; font-weight:650; }
.pend-chip i { width:8px; height:8px; border-radius:50%; background:var(--accion); animation:latido 1.4s ease-in-out infinite; }
.pend-ruta { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.pend-ruta li { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--suave); padding:8px 10px; border-radius:12px; }
.pend-ruta li.hecho { color:var(--tinta); } .pend-ruta li.ahora { background:var(--accion-claro); color:var(--tinta); }
.pend-ruta i { width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center; font:700 11px var(--cifras); font-style:normal; border:2px solid var(--linea-2); color:var(--tenue); }
.pend-ruta li.hecho i { background:var(--ok); border-color:var(--ok); color:#fff; } .pend-ruta li.ahora i { border-color:var(--accion); color:var(--accion); }
.pend-acc { display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; } .pend-acc .boton, .pend-acc button { margin-top:14px; }
@media (max-width:900px) { .pend { grid-template-columns:1fr; } }

/* ---- Mi cuenta */
.cu-ws { display:flex; flex-direction:column; gap:6px; }
.cu-ws form { margin:0; }
.cu-ws button.ws { all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; cursor:pointer; border:1px solid var(--linea); color:var(--tinta); }
.cu-ws button.ws:hover { background:var(--hover); } .cu-ws button.ws.on { background:var(--accion-claro); border-color:var(--accion-borde); }
.cu-ws button.ws:focus-visible { outline:2px solid var(--accion); }
.cu-ws .ts-av { background:var(--solido); color:#fff; }
.cu-ws .ts-txt small { color:var(--suave); }
.cu-nuevo { display:flex; gap:10px; align-items:flex-end; } .cu-nuevo > div { flex:1; } .cu-nuevo button { margin:0 0 0; min-height:42px; }

/* ---- acceso y alta (sin carril) */
.acc-body { min-height:100vh; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); background:var(--lienzo); }
.acc-lado { position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:44px 48px; background:#141933; color:#fff; overflow:hidden; isolation:isolate; }
[data-tema="oscuro"] .acc-lado { background:#06080F; }
.acc-lado::before { content:""; position:absolute; inset:0; z-index:-1; background-image:radial-gradient(rgba(255,255,255,.075) 1px, transparent 1.2px); background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg, transparent 10%, #000 60%); mask-image:linear-gradient(180deg, transparent 10%, #000 60%); }
.acc-lado .logo { padding:0; }
.acc-lado h2 { color:#fff; font-size:38px; line-height:1.04; letter-spacing:-.035em; font-weight:800; margin:0 0 14px; max-width:14ch; }
.acc-lado p { color:rgba(255,255,255,.62); font-size:15.5px; max-width:44ch; margin:0 0 22px; }
.acc-pasos { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.acc-pasos li { display:flex; align-items:center; gap:12px; font-size:14px; color:rgba(255,255,255,.85); }
.acc-pasos i { width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#FF8A5C; font:800 13px var(--cifras); font-style:normal; }
.acc-pie { font-size:12.5px; color:rgba(255,255,255,.4); }
.acc-form { display:flex; align-items:center; justify-content:center; padding:40px 24px; }
.acc-card { width:min(440px, 100%); }
.acc-card h1 { font-size:30px; margin-bottom:4px; }
.acc-card .sub { margin-bottom:8px; }
.acc-card button[type=submit] { width:100%; min-height:46px; margin-top:22px; }
.acc-card .acc-alt { margin:18px 0 0; font-size:13.5px; color:var(--suave); text-align:center; }
.acc-card .acc-alt a { font-weight:650; }
.acc-tema { position:absolute; right:18px; top:18px; display:flex; gap:4px; }
.acc-tema button { margin:0; width:34px; min-height:34px; padding:0; border-radius:10px; background:var(--tarjeta); color:var(--suave); border:1px solid var(--linea); box-shadow:none; }
.acc-tema button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.acc-tema button.on, .acc-tema button:hover { color:var(--tinta); background:var(--hover); filter:none; }
@media (max-width:860px) { .acc-body { grid-template-columns:1fr; } .acc-lado { padding:28px 24px; gap:22px; } .acc-lado h2 { font-size:30px; } .acc-pasos { display:none; } }

/* ---- página de error (sin carril) */
.err-body { min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--lienzo); }
.err-card { width:min(560px, 100%); text-align:center; padding:36px 28px 30px; }
.err-card .pag-ic { margin:0 auto 16px; }
.err-code { font:800 13px var(--cifras); color:var(--accion); letter-spacing:.08em; margin-bottom:8px; }
.err-acc { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---- créditos: saldo en el bloque de cuenta del carril (enlaza a /creditos) ---- */
.usr-cr { text-decoration:none; margin:0; }
.usr-cr .usr-cr-ic { background:rgba(255,255,255,.06); border:1px solid var(--rail-linea); color:#FFC56B; }
.usr-cr .usr-cr-ic svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.usr-cr .ts-txt b { font-variant-numeric:tabular-nums; }
.usr-cr.neg .ts-txt b, .usr-cr.neg .usr-cr-ic { color:#FF8A80; }

/* ---- aviso de coste antes de lanzar una acción (fragments/coste.html + js/coste.js) ---- */
.coste { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:var(--r-peq, 10px); border:1px solid var(--linea);
  background:var(--tarjeta); font-size:13.5px; line-height:1.45; color:var(--tinta); }
.coste[hidden] { display:none; }
.coste-ic { flex:none; width:22px; height:22px; border-radius:7px; display:grid; place-items:center; background:var(--lienzo); color:var(--suave); }
.coste-ic svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.coste-txt { min-width:0; flex:1; }
.coste-txt b { font-weight:650; }
.coste-txt small { display:block; color:var(--suave); font-size:12px; margin-top:2px; }
.coste-txt a { font-weight:600; }
.coste.incluida { border-color:var(--ok-borde); background:var(--ok-claro); } .coste.incluida .coste-ic { color:var(--ok); background:transparent; }
.coste.creditos { border-color:var(--info-borde); background:var(--info-claro); } .coste.creditos .coste-ic { color:var(--info); background:transparent; }
.coste.falta, .coste.bloqueada { border-color:var(--error-borde); background:var(--error-claro); } .coste.falta .coste-ic, .coste.bloqueada .coste-ic { color:var(--error); background:transparent; }
.coste.cargando { opacity:.6; }
.coste.compacto { display:inline-flex; padding:4px 10px; gap:6px; border-radius:99px; font-size:12.5px; }
.coste.compacto .coste-ic { width:16px; height:16px; } .coste.compacto small { display:none; }
.coste-dlg { border:1px solid var(--linea); border-radius:16px; padding:0; width:min(440px, calc(100vw - 32px)); background:var(--tarjeta); color:var(--tinta);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.45); }
.coste-dlg::backdrop { background:rgba(5,7,15,.55); }
.coste-dlg > div { padding:20px; display:flex; flex-direction:column; gap:14px; }
.coste-dlg h3 { margin:0; font-size:18px; }
.coste-dlg .coste-acc { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.coste-dlg .coste-acc > * { margin:0; }
/* Botón con precio (js/precio.js, fragments/precio.html) */
.pb { display:inline-flex; align-items:center; gap:10px; }
.pb-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 7px; border-radius:99px; font:600 12.5px/1.2 var(--cifras);
  font-variant-numeric:tabular-nums; letter-spacing:0; background:rgba(255,255,255,.2); color:inherit; white-space:nowrap; transition:background .2s, opacity .2s; }
.pb-chip svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.pb.sec .pb-chip, .pb.rv-sec .pb-chip { background:var(--lienzo); color:var(--suave); }
.pb-cargando .pb-chip { opacity:.65; }
.pb-pulso { display:block; width:34px; height:9px; border-radius:6px; background:currentColor; opacity:.35; animation:pb-pulso 1s ease-in-out infinite alternate; }
@keyframes pb-pulso { from { opacity:.2; } to { opacity:.5; } }
@media (prefers-reduced-motion: reduce) { .pb-pulso { animation:none; } }
.pb-falta .pb-chip, .pb-bloqueada .pb-chip { background:var(--error-claro); color:var(--error); }
.pb:disabled.pb-falta, .pb:disabled.pb-bloqueada { opacity:1; filter:none; cursor:not-allowed; background:var(--lienzo-2); color:var(--suave); border-color:var(--linea); box-shadow:none; }
.pb-nota { display:block; margin-top:6px; font-size:12.5px; line-height:1.45; color:var(--suave); }
.pb-nota:empty { display:none; }
.pb-nota a { font-weight:600; }
.pb-nota b { color:var(--error); font-weight:650; }
.pb-nota .pb-alt { margin:0; padding:0; border:0; background:none; color:var(--accion-osc); font:inherit; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:2px; box-shadow:none; min-height:0; }
.pb-dlg h3 { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pb-dlg-precio { font:700 20px/1 var(--cifras); font-variant-numeric:tabular-nums; color:var(--accion-osc); white-space:nowrap; }
.pb-cuerpo p { margin:0; }
.pb-lineas { list-style:none; margin:0 0 10px; padding:0; border:1px solid var(--linea); border-radius:12px; overflow:hidden; }
.pb-lineas li { display:flex; justify-content:space-between; gap:12px; padding:9px 12px; font-size:14px; border-top:1px solid var(--linea); }
.pb-lineas li:first-child { border-top:0; }
.pb-lineas li span { color:var(--suave); } .pb-lineas li b { font:650 14.5px/1.3 var(--cifras); font-variant-numeric:tabular-nums; }
.pb-lineas li.pb-saldo { background:var(--lienzo); }
.pb-bolsas { font-size:12.5px; color:var(--suave); margin:0 0 6px !important; }
.pb-letra { font-size:12.5px; color:var(--suave); line-height:1.5; }
.pb-aviso { margin:0; padding:9px 12px; border-radius:10px; background:var(--alerta-claro); color:var(--alerta); font-size:13.5px; font-weight:600; }
.toast .toast-ir { display:inline-block; margin-left:6px; font-weight:650; color:inherit; text-decoration:underline; }

/* ---- Planes de pago, facturación y recibos (planes.html, planes-pagar.html, facturacion.html) ---- */
.su-et { display:inline-block; padding:3px 9px; border-radius:99px; font-size:12px; font-weight:600; white-space:nowrap; background:var(--lienzo); color:var(--suave); }
.su-et.entra { background:var(--ok-claro); color:var(--ok); } .su-et.marcha { background:var(--alerta-claro); color:var(--alerta); }
.su-et.error { background:var(--error-claro); color:var(--error); }
.su-aviso { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px; margin-bottom:14px;
  border-radius:12px; border:1px solid var(--linea); background:var(--tarjeta); font-size:14px; }
.su-aviso .boton, .su-aviso button { margin:0; } .su-aviso.ok { background:var(--ok-claro); border-color:transparent; }
.su-aviso.error { background:var(--error-claro); border-color:var(--error-borde); } .su-aviso.alerta { background:var(--alerta-claro); border-color:transparent; }
.su-periodo { display:inline-flex; padding:3px; border:1px solid var(--linea); border-radius:99px; background:var(--tarjeta); gap:2px; }
.su-periodo button { margin:0; min-height:32px; padding:4px 14px; border-radius:99px; background:transparent; color:var(--suave); border:0; box-shadow:none; font-size:13.5px; }
.su-periodo button.on { background:var(--accion); color:#fff; }
.su-planes { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; margin-top:12px; }
.su-p { background:var(--tarjeta); border:1px solid var(--linea); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:8px; }
.su-p.on { border-color:var(--accion); box-shadow:0 0 0 2px var(--accion-claro); } .su-p.elegido { box-shadow:0 0 0 3px var(--accion); }
.su-p-cab { display:flex; justify-content:space-between; align-items:center; gap:8px; } .su-p h3 { margin:0; }
.su-precio { font:700 26px var(--titulo); letter-spacing:-.02em; } .su-precio small { font:500 13px var(--cuerpo, inherit); color:var(--suave); }
.su-p ul { margin:2px 0 4px; padding-left:18px; line-height:1.75; font-size:14px; }
.su-p .boton, .su-p button { margin:auto 0 0; width:100%; } .su-p .su-nota { font-size:12.5px; color:var(--suave); margin:0; }
.su-p [data-periodo][hidden] { display:none; }
.su-resumen { display:grid; grid-template-columns:1fr auto; gap:6px 18px; font-size:14.5px; margin:10px 0; }
.su-resumen dt { color:var(--suave); } .su-resumen dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.su-resumen .total { font-weight:700; font-size:17px; border-top:1px solid var(--linea); padding-top:8px; }
.su-pagar { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:16px; align-items:start; }
.su-metodo { display:flex; flex-direction:column; gap:10px; }
.su-metodo label.su-op { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--linea); border-radius:12px; margin:0; cursor:pointer; font-weight:500; }
.su-metodo label.su-op:has(input:checked) { border-color:var(--accion); box-shadow:0 0 0 2px var(--accion-claro); }
.su-element { min-height:60px; padding:10px; background:var(--tarjeta); border-radius:10px; border:1px solid var(--linea); }
.su-element[hidden], .su-error[hidden] { display:none; }
.su-error { margin:0; padding:8px 10px; border-radius:8px; background:var(--error-claro); color:var(--error); font-size:13.5px; }
.su-letra { font-size:12.5px; color:var(--suave); margin:0; }
.su-acc { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .su-acc > *, .card .su-acc > * { margin:0; }
.su-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .su-grid .card { margin:0; }
.su-tabla-w { overflow-x:auto; } .su-tabla { width:100%; border-collapse:collapse; font-size:13.5px; }
.su-tabla th { text-align:left; font-size:12px; color:var(--suave); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--linea); white-space:nowrap; }
.su-tabla td { padding:10px; border-bottom:1px solid var(--linea); vertical-align:top; } .su-tabla td small { display:block; color:var(--suave); font-size:12px; }
.su-tabla .num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.su-tarjetas { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.su-tarjetas li { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--linea); border-radius:12px; }
.su-tarjetas li b { min-width:90px; } .su-tarjetas li small { color:var(--suave); } .su-tarjetas li .su-acc { margin-left:auto; }
.su-datos { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; } .su-datos label { margin:6px 0 2px; font-size:12.5px; }
.su-datos input { margin:0; } .su-datos .ancho { grid-column:1 / -1; }
@media (max-width:820px) { .su-pagar, .su-grid, .su-datos { grid-template-columns:1fr; } }
.su-nueva { margin-top:10px; padding:12px; border:1px solid var(--linea); border-radius:12px; background:var(--lienzo); display:flex; flex-direction:column; gap:8px; }
.su-nueva[hidden] { display:none; } .su-nueva .check { margin:0; }

/* ---- Control de calidad de las piezas (fase 1: js/calidad.js) ---- */
.cal-pieza { margin:12px 0; } .cal-pieza[hidden], .cal-pieza:empty { display:none; }
.cal-caja { display:flex; flex-direction:column; gap:8px; padding:11px 13px; border:1px solid var(--linea); border-radius:12px; background:var(--tarjeta); font-size:13.5px; line-height:1.45; }
.cal-caja.ok { border-color:var(--ok-borde); } .cal-caja.error { border-color:var(--error-borde); background:var(--error-claro); }
.cal-caja.alerta { border-color:var(--alerta-borde); background:var(--alerta-claro); } .cal-caja.info { border-color:var(--info-borde); }
.cal-fila { display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap; }
.cal-estado { display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 8px; border-radius:99px; font-size:12.5px; white-space:nowrap; background:var(--lienzo); color:var(--suave); }
.cal-estado svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.cal-estado b { font-weight:650; } .cal-estado i { font-style:normal; font:600 11.5px var(--cifras); opacity:.8; font-variant-numeric:tabular-nums; }
.cal-estado.ok { background:var(--ok-claro); color:var(--ok); } .cal-estado.error { background:var(--tarjeta); color:var(--error); }
.cal-estado.alerta { background:var(--tarjeta); color:var(--alerta); } .cal-estado.info { background:var(--info-claro); color:var(--info); }
.cal-estado.info svg { animation:cal-gira 1.1s linear infinite; }
@keyframes cal-gira { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cal-estado.info svg { animation:none; } }
.cal-frase { color:var(--tinta); min-width:0; flex:1 1 220px; }
.cal-tag { display:inline-block; padding:2px 8px; border-radius:99px; font-size:11.5px; font-weight:600; background:var(--lienzo); color:var(--suave); white-space:nowrap; }
.cal-tag.info { background:var(--info-claro); color:var(--info); }
.cal-probs { margin:0; padding:0 0 0 2px; list-style:none; display:flex; flex-direction:column; gap:3px; }
.cal-probs li { position:relative; padding-left:16px; color:var(--suave); font-size:13px; }
.cal-probs li::before { content:""; position:absolute; left:3px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--alerta); }
.cal-probs li.grave::before { background:var(--error); } .cal-probs li.grave { color:var(--tinta); }
.cal-resp { margin:0; padding:7px 10px; border-radius:8px; background:var(--lienzo); color:var(--suave); font-size:12.5px; }
.cal-acc { display:flex; gap:6px; flex-wrap:wrap; }
.cal-btn { display:inline-flex; align-items:center; gap:6px; margin:0; min-height:32px; padding:5px 11px; border-radius:99px; border:1px solid var(--linea-2);
  background:var(--tarjeta); color:var(--tinta); font-size:12.5px; font-weight:600; box-shadow:none; cursor:pointer; }
.cal-btn:hover { border-color:var(--linea-3); background:var(--hover); } .cal-btn:disabled { opacity:.55; cursor:default; }
.cal-btn svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cal-btn small { font-weight:500; color:var(--suave); }
.cal-rehacer { border-color:var(--accion-borde); color:var(--accion-osc); } .cal-rehacer:hover { background:var(--accion-claro); border-color:var(--accion); }
.cal-mini .cal-caja { padding:8px 10px; gap:6px; font-size:12.5px; } .cal-mini .cal-frase { flex-basis:100%; font-size:12.5px; }
.cal-mini .cal-btn { min-height:28px; padding:3px 9px; font-size:12px; }
.cal-bloq { opacity:.5; pointer-events:auto; cursor:not-allowed !important; filter:grayscale(.6); }
.cal-dlg { width:min(520px, calc(100vw - 32px)); } .cal-dlg > form { margin:0; padding:20px; display:flex; flex-direction:column; gap:10px; }
.cal-dlg .cal-motivos { margin:4px 0 0; } .cal-dlg .pb-letra { margin:0; } .cal-motivos { border:0; margin:12px 0 8px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.cal-motivos label { display:flex; align-items:center; gap:8px; margin:0; padding:9px 11px; border:1px solid var(--linea); border-radius:10px; cursor:pointer; font-size:13.5px; font-weight:500; }
.cal-motivos label:has(input:checked) { border-color:var(--accion); box-shadow:0 0 0 2px var(--accion-claro); }
.cal-motivos input { margin:0; flex:none; } .cal-nota-l { font-size:12.5px; margin:6px 0 4px; display:block; }
.cal-dlg textarea { width:100%; margin:0 0 8px; } .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
@media (max-width:560px) { .cal-motivos { grid-template-columns:1fr; } }
/* actividad de créditos: chip del control */
.cal-mov { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:4px; }

/* ---- Prueba gratis (fase 3): aviso con cuenta atrás y paywall del bloqueo blando ---- */
.pr-aviso { display:flex; align-items:center; gap:12px 14px; flex-wrap:wrap; padding:12px 14px; margin-bottom:14px; border-radius:14px;
  border:1px solid var(--accion-borde); background:linear-gradient(100deg, var(--accion-claro), var(--tarjeta) 70%); }
.pr-aviso.alerta { border-color:var(--alerta-borde); background:var(--alerta-claro); }
.pr-aviso.error { border-color:var(--error-borde); background:linear-gradient(100deg, var(--error-claro), var(--tarjeta) 75%); }
.pr-ic { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex:none; background:var(--accion); color:#fff; }
.pr-aviso.alerta .pr-ic { background:var(--alerta); } .pr-aviso.error .pr-ic { background:var(--error); }
.pr-ic svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pr-txt { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 280px; font-size:14px; }
.pr-txt b { font-weight:650; color:var(--tinta); } .pr-txt small { color:var(--suave); font-size:13px; line-height:1.45; }
.pr-cuenta { display:inline-flex; align-items:baseline; gap:2px; padding:6px 10px; border-radius:10px; background:var(--tarjeta); border:1px solid var(--linea);
  font:700 16px/1 var(--cifras); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pr-cuenta b { font:inherit; color:var(--tinta); } .pr-cuenta em { font:500 11px var(--texto); font-style:normal; color:var(--suave); margin:0 6px 0 1px; } .pr-cuenta em:last-child { margin-right:0; }
.pr-aviso .boton { margin:0; }
.contenido.pw-bloq { position:relative; min-height:70vh; }
.contenido.pw-bloq > :not(.pr-aviso):not(.pw-capa):not(.su-aviso):not(.ok):not(.aviso):not(.integ-banda) { filter:blur(7px) saturate(.7); opacity:.55; pointer-events:none; user-select:none; }
.pw-capa { position:absolute; inset:0; z-index:40; padding:24px 0; background:linear-gradient(to bottom, transparent, var(--lienzo) 85%); }
.pw-tarjeta { position:sticky; top:9vh; margin:24px auto 0; max-width:780px; padding:28px; border-radius:var(--r-xl); background:var(--tarjeta);
  border:1px solid var(--linea); box-shadow:0 30px 80px -30px rgba(10,13,25,.45); text-align:center; }
.pw-et { display:inline-block; padding:4px 12px; border-radius:99px; background:var(--error-claro); color:var(--error); font-size:12.5px; font-weight:650; }
.pw-tarjeta h2 { margin:12px 0 6px; font:700 28px/1.15 var(--titulo); letter-spacing:-.02em; }
.pw-sub { margin:0 auto 18px; max-width:520px; color:var(--suave); font-size:15px; line-height:1.5; }
.pw-planes { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; margin:0 0 18px; text-align:left; }
.pw-plan { position:relative; display:flex; flex-direction:column; gap:4px; padding:16px; border:1px solid var(--linea); border-radius:16px; color:var(--tinta);
  text-decoration:none; background:var(--tarjeta); transition:transform .25s var(--ease-out), border-color .2s, box-shadow .25s; }
.pw-plan:hover { transform:translateY(-2px); border-color:var(--accion); box-shadow:0 14px 30px -18px rgba(255,90,31,.6); }
.pw-plan.on { border-color:var(--accion); box-shadow:0 0 0 2px var(--accion-claro); }
.pw-plan b { font-size:16px; } .pw-precio { font:700 24px/1.1 var(--cifras); letter-spacing:-.01em; } .pw-precio small { font:500 13px var(--texto); color:var(--suave); }
.pw-plan > small { color:var(--suave); font-size:12.5px; line-height:1.4; } .pw-lim { margin-top:auto; padding-top:6px; font-size:12px; color:var(--tenue); }
.pw-chip { position:absolute; top:-10px; right:12px; padding:2px 9px; border-radius:99px; background:var(--accion); color:#fff; font-size:11px; font-weight:650; }
.pw-acc { display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; } .pw-acc > * { margin:0; min-height:44px; }
.pw-letra { margin:12px 0 0; font-size:12.5px; color:var(--suave); }
@media (prefers-reduced-motion: reduce) { .pw-plan { transition:none; } .pw-plan:hover { transform:none; } }
@media (max-width:600px) { .pw-tarjeta { padding:20px 16px; margin-top:24px; } .pw-tarjeta h2 { font-size:23px; } .pr-cuenta { order:3; } }
/* página de la prueba con tarjeta y la tarjeta de la prueba en Facturación */
.pt-linea { display:flex; flex-direction:column; gap:0; margin:12px 0 4px; padding:0; list-style:none; }
.pt-linea li { display:grid; grid-template-columns:22px 1fr; gap:10px; padding:0 0 14px; position:relative; font-size:14px; }
.pt-linea li::before { content:""; width:12px; height:12px; border-radius:50%; background:var(--accion); margin:4px 0 0 5px; box-shadow:0 0 0 4px var(--accion-claro); }
.pt-linea li:not(:last-child)::after { content:""; position:absolute; left:10.5px; top:20px; bottom:2px; width:1px; background:var(--linea-2); }
.pt-linea li.gris::before { background:var(--linea-3); box-shadow:0 0 0 4px var(--lienzo); }
.pt-linea b { display:block; } .pt-linea small { display:block; color:var(--suave); font-size:13px; line-height:1.45; margin-top:2px; }