/* ============================================================
brand-v36.css — Lift de marca completo (v3.6.0, F052)
------------------------------------------------------------
Propaga la plantilla de marca de v3.5.1 (#facturacionOverlay)
al resto de la app. CARGA DESPUÉS de styles.css → gana por cascada.
100% cosmético, reglas scoped por #id. styles.css queda INTACTO.
Recuperación instantánea: quitar el
se agrega en el HTML; aquí solo se alinea dentro del h2.
------------------------------------------------------------ */
#creditsOverlay .packs-head h2,
#plansOverlay .packs-head h2,
#accountOverlay .packs-head h2,
#historyOverlay .packs-head h2,
#retentionOverlay .packs-head h2,
#confirmOverlay .packs-head h2{display:flex;align-items:center;gap:10px}
.brand-mark{flex:none}
/* ------------------------------------------------------------
2) Títulos de sección → estilo "eyebrow" (mono, MAYÚSCULAS,
Cobre, con rayita) — la misma receta que Facturación.
Scoped por #id: NO toca el .section-ttl global ni a otras pantallas.
------------------------------------------------------------ */
#creditsOverlay .section-ttl,
#plansOverlay .section-ttl{
font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.18em;
text-transform:uppercase;color:var(--coral);display:flex;align-items:center;gap:9px}
#creditsOverlay .section-ttl::before,
#plansOverlay .section-ttl::before{content:"";width:22px;height:1px;background:var(--coral);flex:none}
/* Cuenta: las etiquetas de sección (.acct-k, solo en accountOverlay) → eyebrow Cobre + rayita */
#accountOverlay .acct-k{color:var(--coral);letter-spacing:.18em;display:flex;align-items:center;gap:9px}
#accountOverlay .acct-k::before{content:"";width:22px;height:1px;background:var(--coral);flex:none}
/* ------------------------------------------------------------
3) Saldos = las dos voces (Cobre = plan · Agua = premium),
igual que en Facturación. IDs únicos → seguro.
------------------------------------------------------------ */
#ssPlanCred{color:var(--coral)}
#ssPremCred{color:var(--teal)}
#accountOverlay #acctPlanCredits{color:var(--coral)}
#accountOverlay #acctPremiumCredits{color:var(--teal)}
/* ------------------------------------------------------------
4) Mis audios: pestaña activa en Cobre (estado de marca, como .movchip.on)
------------------------------------------------------------ */
#historyOverlay .htab.on{border-color:var(--coral);color:var(--coral)}
/* ------------------------------------------------------------
5) Almacenamiento Premium: el precio destacado en acento Cobre
------------------------------------------------------------ */
#retentionOverlay .addon-price{color:var(--coral)}
/* ------------------------------------------------------------
6) Menú del avatar: micro-acento Cobre en hover (chrome consistente)
------------------------------------------------------------ */
#userMenu .umitem:hover{box-shadow:inset 2px 0 0 var(--coral)}
/* ============================================================
AJUSTES UX de botones (ventana por ventana, v3.6.0)
· Acento Agua (lateral) en hover: UNIVERSAL para botones de gestión/secundarios
(.btn.ghost.sm), salvo #factPortalBtn (CTA Cobre relleno) y .danger (rojo).
· BOTÓN UNIVERSAL de comprar/contratar (.pack .btn): −15% de tamaño + hover
contorno COBRE (CTA de marca). UNA regla para Créditos Premium (Comprar) y
Planes (Suscribirme / Cambiar) — no por página.
============================================================ */
/* Acento Agua (lateral) en HOVER — UNIVERSAL para botones de gestión/secundarios (.btn.ghost.sm):
gestión (#manageSubBtn/#ssUpgradeBtn/#factCreditsBtn/#factManageBtn/#acctPlansBtn), topbar
(#historyBtn/#upgradeOrCreditsBtn), CTAs de medidor/banner, paginación de Movimientos, etc.
Por CLASE → cubre TODAS las ventanas de una vez (no por id, no por página) y es inmune al bug
del elemento que se mueve (una clase aplica viva donde viva el elemento). Excepciones:
#factPortalBtn (CTA Cobre relleno) y .danger (rojo semántico); :not([disabled]) deja fuera la
paginación apagada. */
.btn.ghost.sm:not(.danger):not([disabled]):not(#factPortalBtn):hover{box-shadow:inset 3px 0 0 var(--teal)}
/* Botón UNIVERSAL de comprar/contratar (.pack .btn): aplica a la vez a Créditos
Premium (Comprar) y Planes (Suscribirme / Cambiar). Los deshabilitados ([Plan
inferior] / [Tu plan actual]) se excluyen con :not([disabled]). */
.pack .btn{padding:13px 22px;font-size:13.5px} /* −15% de tamaño */
.pack .btn:not([disabled]):hover{box-shadow:0 0 0 2px var(--coral)} /* hover: contorno Cobre (CTA de marca) */
/* ============================================================
UX "sentido común" (v3.6.0) — copy + presentación localizada.
Todo scoped por #id/clase contenedora. styles.css sigue INTACTO.
============================================================ */
/* T2 · Lista de características de cada plan (reemplaza la antigua .pvalue de una línea).
Scoped a #plansGrid → no afecta las .pack de Créditos Premium (que conservan .pvalue). */
#plansGrid .feats{list-style:none;margin:6px 0 2px;padding:0;text-align:left;
display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:1.35}
#plansGrid .feats .y{color:#DCD7E4} /* incluido (✓) — neutro (color del tooltip) */
#plansGrid .feats .n{color:#6E6880} /* no incluido (—) — apagado */
/* T2 · El plan RECOMENDADO (.featured, dinámico vía decoratePlans) muestra sus ✓ en VERDE;
los demás conservan el neutro de arriba. El verde sigue al plan recomendado automáticamente. */
#plansGrid .pack.featured .feats .y{color:var(--success)}
/* T2 (fix) · UNA copia del toggle del add-on bajo CADA plan elegible (Creator Y Pro). Estilado por
CLASE (hay varias copias, no un id único). Compacto para caber dentro de la card. */
#plansGrid .addon-signup{margin:6px 0 2px;padding:9px 11px;gap:9px;text-align:left;flex-wrap:wrap}
#plansGrid .addon-signup .addon-signup-info{font-size:12.5px}
#plansGrid .addon-signup .addon-price{font-size:14px;margin:1px 0}
/* "Qué incluye": oculto por defecto. Se despliega SOLO al hacer clic en "qué incluye ▾" (.tip-open)
o al ACTIVAR el toggle (.on) — NUNCA en hover. */
#plansGrid .addon-tip{display:none;width:100%;margin-top:7px;padding-top:7px;border-top:1px solid var(--ink-line)}
#plansGrid .addon-signup.on .addon-tip,
#plansGrid .addon-signup.tip-open .addon-tip{display:block}
#plansGrid .addon-tip-toggle{color:var(--teal);cursor:pointer;white-space:nowrap}
#plansGrid .addon-tip-ttl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:4px}
#plansGrid .addon-tip ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
#plansGrid .addon-tip li{font-size:11px;color:#D7D2E2;line-height:1.3}
/* v3.7.0 P7 · Badge de estado del add-on en el título del modal "Almacenamiento Premium".
Estilizado por CLASE propia (el modal no migra, pero seguimos §8.15: nunca scoped a un overlay ancestro). */
.addon-badge{display:inline-block;vertical-align:middle;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
text-transform:uppercase;font-weight:700;padding:2px 9px;border-radius:999px;border:1px solid currentColor;
line-height:1.4;margin-left:6px}
/* T3 · Modal "Cómo funcionan los créditos": dos tarjetas (plan vs premium) + ejemplos. */
#creditosInfoOverlay .ci-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
@media(max-width:520px){#creditosInfoOverlay .ci-cards{grid-template-columns:1fr}}
#creditosInfoOverlay .ci-card{background:var(--ink);border:1px solid var(--ink-line);border-radius:12px;padding:12px}
#creditosInfoOverlay .ci-card.coral{border-top:3px solid var(--coral)}
#creditosInfoOverlay .ci-card.teal{border-top:3px solid var(--teal)}
#creditosInfoOverlay .ci-card .ci-t{font-family:var(--display);font-weight:700;font-size:14px;margin-bottom:5px}
#creditosInfoOverlay .ci-card.coral .ci-t{color:var(--coral)}
#creditosInfoOverlay .ci-card.teal .ci-t{color:var(--teal)}
#creditosInfoOverlay .ci-card ul{margin:0 0 0 16px;font-size:12px;color:#D7D2E2}
#creditosInfoOverlay .ci-card li{margin:3px 0}
#creditosInfoOverlay .ci-ex{background:var(--ink);border:1px solid var(--ink-line);border-radius:10px;
padding:9px 12px;font-size:12.5px;color:#D7D2E2;margin:6px 0}
/* T1 · Fila de transcripción gated (Gratis) en Mis audios: atenuada (informativa, no accionable). */
#historyList .hist-track.gated{opacity:.72}
/* Medidor de cuota: "Almacenamiento Premium" como enlace al modal del add-on (abre openRetention).
Por CLASE propia (§8.15); el label del medidor no migra en el DOM. */
.quota-premium-link{color:var(--teal);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.quota-premium-link:hover{color:#3fe0c8}
/* Legibilidad del texto de ayuda en modales: .acct-hint usaba --muted-ink (#6E6880), demasiado
bajo contraste sobre el fondo. Se sube a --paper-soft (#E8E2D4) en TODA la app. Los .acct-hint
con color inline propio (Cobre #plansContextNote, verde #cycleSaveNote) lo conservan (inline gana).
Enlaces dentro de un hint (p. ej. "Ver planes →") en Agua (--teal #1EC6AE). */
.acct-hint{color:var(--paper-soft)}
.acct-hint a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.acct-hint a:hover{color:#3fe0c8}
/* F058 Fase 2 — «Proyectos»: vista Grid/List, nombre editable, badge de estado, acciones de pista.
Por id/clase propia (§8.15): #historyList no migra entre overlays; nada scoped a un overlay ancestro. */
#historyList.proj-grid{display:grid;grid-template-columns:1fr;gap:10px;align-items:start}
#historyList.proj-list{display:flex;flex-direction:column;gap:8px}
.proj-name{display:flex;align-items:center;gap:7px;min-width:0}
.proj-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:28ch}
.proj-edit{background:none;border:none;cursor:pointer;font-size:13px;opacity:.6;padding:0 2px;line-height:1}
.proj-edit:hover{opacity:1}
.proj-badge{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:1px 7px;border-radius:999px;border:1px solid;margin-right:6px;white-space:nowrap}
.proj-badge.ok{color:var(--green);border-color:rgba(61,214,140,.45)}
.proj-badge.proc{color:var(--amber);border-color:rgba(242,178,74,.45)}
.proj-badge.err{color:var(--red);border-color:rgba(255,90,90,.45)}
.hist-tactions{display:flex;gap:6px;align-items:center}
/* ── F058 Fase 2 · REMEDIACIÓN auditoría 2026-06-19 (v3.8.0) ──────────────────
Todo por id/clase PROPIA (§8.15): #historyList y sus hijos NO migran entre overlays. */
/* F-07 · estado = pill de color. F061 (2026-06-26): se quita el punto «●» a pedido del usuario → pill limpio. */
.proj-badge{display:inline-flex;align-items:center}
.proj-badge::before{content:none}
/* F-09 · punto de color antes de «Voz A/B» en la pista (el color se fija inline en JS). */
.hist-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;flex:none}
/* F-11 · «Descargar todo» = CTA coral primario (mismo botón; solo acento de marca). */
.iconbtn.proj-zip.coral{background:var(--coral);border-color:var(--coral);color:var(--ink);font-weight:600}
.iconbtn.proj-zip.coral:hover{background:#ff8467;border-color:#ff8467}
/* F061 v3.9.3 · refinamiento de la tarjeta de Proyectos (alinear con mockup 2026-06-20).
Scopeado a .hist-job (la tarjeta) -> NO toca la tabla .proj-table ni #subSummary (§8.15). styles.css intacto. */
.hist-job .hist-head{flex-wrap:wrap;align-items:center} /* badge junto al título (fila 1) */
.hist-job .hist-meta{flex-basis:100%;margin-top:2px} /* metadata 📅·👥·⏱ en su propia fila (fila 2) */
.hist-job .proj-title{max-width:30ch} /* un poco más de título (no afecta la tabla) */
.hist-job .hist-foot{flex-wrap:wrap} /* el pie degrada bajando el grupo, no partiendo el texto */
.hist-job .hist-foot .hist-keep{flex:1 1 auto;min-width:0} /* la retención toma el espacio y empuja los botones */
.hist-job .hist-foot .iconbtn{white-space:nowrap} /* «Descargar todo»/«Eliminar» nunca se parten */
/* F-04 · input de renombrado inline (reemplaza el prompt() nativo). */
.proj-edit-input{font:inherit;font-weight:700;color:var(--paper);background:var(--ink);
border:1px solid var(--coral);border-radius:7px;padding:2px 7px;max-width:24ch;min-width:8ch;outline:none}
/* F-01 · vista «Lista» = TABLA densa (mockup v2). La contiene #historyList.proj-list. */
.proj-table{width:100%;border-collapse:collapse;font-size:13.5px;table-layout:fixed}
.proj-table thead th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
text-transform:uppercase;color:var(--paper-soft);font-weight:500;padding:7px 10px;border-bottom:1px solid var(--ink-line)}
.proj-table thead th:last-child{text-align:right}
/* table-layout:fixed -> «Proyecto» (col 1) toma el resto y elide; evita overflow horizontal en el overlay (QA L35). */
.proj-table th:nth-child(2){width:108px} /* Estado */
.proj-table th:nth-child(3){width:60px} /* Duracion */
.proj-table th:nth-child(4){width:48px} /* Voces */
.proj-table th:nth-child(5){width:116px} /* Acciones */
.proj-table td:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-table .proj-title{max-width:none}
.proj-table td{padding:8px 10px;border-bottom:1px solid var(--ink-line);vertical-align:middle}
.proj-table tbody tr:last-child td{border-bottom:none}
.proj-table tbody tr:hover{background:rgba(255,255,255,.025)}
.proj-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.proj-actions .iconbtn,.proj-actions .proj-edit{padding:4px 7px}
.proj-proc{opacity:.75;font-size:15px}
/* F-13 · CTA del banner «expira en <24h» = coral (urgencia > el ghost por defecto). Por id propio. */
#histExpiryCta{background:var(--coral);border-color:var(--coral);color:var(--ink)}
#histExpiryCta:hover{background:#ff8467;border-color:#ff8467}