/* ==========================================================================
   VOCAP · app y recorrido de compra (dirección A «Clara y de confianza»)
   /transcribir, /en/transcribe, /creditos-insuficientes, /en/insufficient-credits,
   /success, /cancel y /baja. Se carga DESPUÉS de vocap.css: usa sus tokens (--v-*),
   botones (.v-btn), iconos (.v-i, .v-ico, .v-kind-*) y logo (.v-logo).
   Solo presentación: los estados que activa el JS inline (.show, .collapsed,
   .dragover, data-auth, [hidden], is-done, is-error…) conservan su significado.
   ========================================================================== */

:root {
    /* Iconos para pseudo-elementos (botones cuyo texto reescribe el JS, marcas de
       estado): mismas máscaras que .v-i-* de vocap.css */
    --app-i-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='11.5' height='11.5' rx='2.5'/%3E%3Cpath d='M15.5 8.5V6.5A2.5 2.5 0 0 0 13 4H6.5A2.5 2.5 0 0 0 4 6.5V13a2.5 2.5 0 0 0 2.5 2.5h2'/%3E%3C/svg%3E");
    --app-i-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7.5 10.5 12 15l4.5-4.5M5 20h14'/%3E%3C/svg%3E");
    --app-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    --app-i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.3 2.8 17.5A2 2 0 0 0 4.5 20.5h15a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 17h.01' stroke-width='2.4'/%3E%3C/svg%3E");
    --app-i-audio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9.5 13v3M12 11v7M14.5 13v3'/%3E%3C/svg%3E");
    --app-i-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");
    --app-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
    --app-i-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v4M12 16.5v4M3.5 12h4M16.5 12h4M6 6l2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6'/%3E%3C/svg%3E");
    --app-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    --app-i-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    /* La app y la barra de las páginas de paso usan el ancho del resto del sitio: el logo
       queda en el mismo sitio al entrar desde la portada */
    --app-w: var(--v-wrap);
    /* Tarjeta centrada de las páginas de paso (paywall) */
    --flow-w: 1040px;
}

/* ---------- Base de estas páginas ---------- */
h1, h2, h3, h4, p, ul, ol { margin: 0; }
body { min-height: 100vh; min-height: 100dvh; }
/* App: blanco con el halo azul suave del hero de la portada */
body[data-auth] {
    background:
        radial-gradient(760px 420px at 88% -60px, rgba(31, 95, 239, .09), transparent 70%),
        radial-gradient(520px 320px at 4% 0, rgba(31, 95, 239, .045), transparent 70%)
        var(--v-white) no-repeat;
}
/* Páginas de paso (paywall, pago, baja): gris suave con una tarjeta blanca */
body.flow { background: var(--v-soft); }

/* ==========================================================================
   App de transcripción (/transcribir, /en/transcribe)
   ========================================================================== */

/* ---------- Barra superior ---------- */
.navbar {
    position: sticky; top: 0; z-index: var(--v-z-nav);
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: saturate(1.6) blur(12px);
    backdrop-filter: saturate(1.6) blur(12px);
    border-bottom: 1px solid var(--v-line);
}
.navbar-container {
    max-width: calc(var(--app-w) + 2 * var(--v-gutter)); margin: 0 auto; padding: 0 var(--v-gutter);
    height: var(--v-nav-h); display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.navbar-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.navbar-lang {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px;
    border-radius: var(--v-r-md); color: var(--v-muted-soft); text-decoration: none;
    font: 500 var(--v-fs-ui)/1 var(--v-font-body);
    transition: background-color .15s ease, color .15s ease;
}
.navbar-lang .v-i { --v-i-size: 17px; }
.navbar-lang:hover { background: var(--v-soft); color: var(--v-ink); }

/* Saldo: «2,50 h» + botón azul «+» para comprar horas */
.credits-display {
    display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 5px 0 14px;
    border: 1px solid var(--v-line-2); border-radius: var(--v-r-pill); background: #fff; box-shadow: var(--v-sh-1);
    color: var(--v-ink); text-decoration: none; white-space: nowrap;
    font: 600 var(--v-fs-ui)/1 var(--v-font-body); font-variant-numeric: tabular-nums;
    transition: border-color .15s ease, background-color .15s ease;
}
.credits-value { display: inline-flex; align-items: baseline; gap: .3em; }
#userCredits { font-family: var(--v-font-display); font-weight: 700; }
.credits-plus {
    display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none;
    border-radius: 50%; background: var(--v-brand); color: #fff;
}
.credits-plus .v-i { --v-i-size: 16px; }
.credits-display:hover { border-color: var(--v-line-3); background: var(--v-brand-25); }
.credits-display:hover .credits-plus { background: var(--v-brand-600); }

.user-menu { position: relative; }
.user-button {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 10px;
    border: 1px solid var(--v-line-2); border-radius: var(--v-r-pill); background: #fff; box-shadow: var(--v-sh-1);
    font: 600 var(--v-fs-ui)/1.15 var(--v-font-body); color: var(--v-ink); white-space: nowrap; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.user-button:hover { border-color: var(--v-line-3); background: var(--v-brand-25); }
.user-icon { --v-i-size: 18px; color: var(--v-brand); }
.user-caret { --v-i-size: 15px; color: var(--v-muted); transition: transform .2s ease; }
.user-button[aria-expanded="true"] .user-caret { transform: rotate(180deg); }
#userEmail { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
/* Invitado: «Iniciar sesión» como botón secundario (lo principal está en la franja de registro) */
.user-button.auth-guest-only { padding: 0 16px; border-radius: var(--v-r-md); }

.user-dropdown {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: var(--v-z-dropdown);
    display: none; min-width: 232px; padding: 6px;
    background: #fff; border: 1px solid var(--v-line); border-radius: 14px;
    box-shadow: var(--v-sh-2), 0 2px 6px rgba(13, 27, 46, .05);
}
.user-dropdown.show { display: block; }
.dropdown-item {
    display: flex; align-items: center; width: 100%; min-height: 44px; padding: 8px 12px; margin: 0;
    border: 0; border-radius: var(--v-r-sm); background: none; text-align: left; text-decoration: none;
    font: 500 var(--v-fs-ui)/1.3 var(--v-font-body); color: var(--v-ink); cursor: pointer;
}
.dropdown-item:hover { background: var(--v-soft); color: var(--v-brand-700); }
.dropdown-divider { height: 1px; margin: 4px 8px; background: var(--v-line); }
.dropdown-item.logout { color: var(--v-rose-700); }
.dropdown-item.logout:hover { background: var(--v-rose-50); color: var(--v-rose-700); }

/* ---------- Estado de sesión: data-auth en <body> = pending | guest | user (funcional) ---------- */
body .auth-guest-only { display: none; }
body[data-auth="guest"] .auth-guest-only { display: flex; }
body[data-auth="guest"] .auth-user-only { display: none; }
body[data-auth="pending"] .auth-user-only { visibility: hidden; }
body:not([data-auth="user"]) .history-section { display: none; }
/* Mientras carga la sesión, el hueco reservado del saldo y de la cuenta se ve como dos
   pastillas de carga (pseudo-elementos: nada enfocable ni pulsable), a la derecha de la
   barra, para que «EN» no quede suelto a mitad de camino */
.credits-display { position: relative; }
.user-menu { display: flex; }
body[data-auth="pending"] .credits-display::after,
body[data-auth="pending"] .user-menu::after {
    content: ""; position: absolute; inset: 0; visibility: visible; pointer-events: none;
    border: 1px solid var(--v-line); border-radius: var(--v-r-pill); background: var(--v-soft);
}

/* ---------- Cabecera de la página ---------- */
.page-header {
    max-width: calc(var(--app-w) + 2 * var(--v-gutter)); margin: 0 auto;
    padding: clamp(20px, 3.4vw, 36px) var(--v-gutter) 0;
}
.header-top { margin-bottom: 10px; }
.back-link {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
    font: 600 var(--v-fs-ui)/1.2 var(--v-font-body); color: var(--v-muted-soft); text-decoration: none;
    transition: color .15s ease;
}
.back-icon { --v-i-size: 17px; transform: scaleX(-1); transition: transform .15s ease; }
.back-link:hover { color: var(--v-brand-700); }
.back-link:hover .back-icon { transform: scaleX(-1) translateX(2px); }
.page-title {
    font-size: clamp(2rem, 1.55rem + 1.9vw, 2.75rem); font-weight: 800; line-height: 1.08;
    letter-spacing: -.028em; word-spacing: .03em;
}
.page-subtitle { margin-top: 12px; font-size: var(--v-fs-md); line-height: 1.55; color: var(--v-text); max-width: 60ch; }

/* Franja de registro para visitantes sin cuenta: al pie de la tarjeta de subida, de modo
   que al resolverse la sesión (pending → guest) aparece sin desplazar nada visible */
.guest-banner {
    margin-top: 14px; padding: 14px 14px 14px 16px;
    background: var(--v-brand-25); border: 1px solid var(--v-brand-100); border-radius: var(--v-r-card);
    align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
}
.guest-banner-lead { display: flex; align-items: center; gap: 14px; flex: 1 1 300px; min-width: 0; }
.guest-banner strong {
    font: 700 1.0625rem/1.35 var(--v-font-display); color: var(--v-ink); letter-spacing: -.01em;
}
.guest-banner-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.guest-banner-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
    border: 1px solid var(--v-brand); border-radius: var(--v-r); background: var(--v-brand); color: #fff;
    font: 600 var(--v-fs-ui)/1.2 var(--v-font-body); cursor: pointer; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(13, 27, 46, .12), inset 0 1px 0 rgba(255, 255, 255, .14);
    transition: background-color .15s ease;
}
.guest-banner-btn:hover { background: var(--v-brand-600); border-color: var(--v-brand-600); }
/* Con un archivo elegido, lo principal es «Crear cuenta gratis y transcribir»: la franja pasa a secundaria */
.upload-section:has(.file-info.show) .guest-banner-btn { background: #fff; border-color: var(--v-line-2); color: var(--v-ink); box-shadow: var(--v-sh-1); }
.upload-section:has(.file-info.show) .guest-banner-btn:hover { background: var(--v-brand-25); border-color: var(--v-line-3); }
.guest-banner-link {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
    border: 0; border-radius: var(--v-r); background: none; cursor: pointer;
    font: 600 var(--v-fs-ui)/1.2 var(--v-font-body); color: var(--v-brand-700);
    transition: background-color .15s ease;
}
.guest-banner-link:hover { background: var(--v-brand-50); }

/* ---------- Avisos en la página (JS: className = 'page-notice ' + tipo) ---------- */
.page-notice {
    position: relative; margin-bottom: 16px; padding: 13px 16px 13px 46px;
    background: var(--v-brand-25); border: 1px solid var(--v-brand-100); border-radius: 14px;
    font-size: var(--v-fs-ui); line-height: 1.5; color: var(--v-ink);
}
.page-notice[hidden] { display: none; }
.page-header .page-notice { margin: 16px 0 0; }
.page-notice::before {
    content: ""; position: absolute; left: 16px; top: 14px; width: 20px; height: 20px;
    background-color: var(--v-brand);
    -webkit-mask: var(--app-i-clock) center / contain no-repeat; mask: var(--app-i-clock) center / contain no-repeat;
}
.page-notice.warning { background: var(--v-amber-50); border-color: var(--v-amber-line); }
.page-notice.warning::before { background-color: var(--v-amber); -webkit-mask-image: var(--app-i-alert); mask-image: var(--app-i-alert); }
.page-notice.error { background: var(--v-rose-50); border-color: var(--v-rose-line); color: var(--v-rose-700); }
.page-notice.error::before { background-color: var(--v-rose); -webkit-mask-image: var(--app-i-alert); mask-image: var(--app-i-alert); }
.notice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.notice-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px;
    border: 1px solid var(--v-line-2); border-radius: var(--v-r-md); background: #fff; box-shadow: var(--v-sh-1);
    font: 600 var(--v-fs-ui)/1.2 var(--v-font-body); color: var(--v-ink); text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.notice-btn:hover { border-color: var(--v-line-3); background: var(--v-brand-25); color: var(--v-ink); }
.notice-btn:first-child { background: var(--v-brand); border-color: var(--v-brand); color: #fff; }
.notice-btn:first-child:hover { background: var(--v-brand-600); border-color: var(--v-brand-600); color: #fff; }

/* ---------- Contenedor y zona de subida ---------- */
.container {
    max-width: calc(var(--app-w) + 2 * var(--v-gutter)); margin: 0 auto;
    padding: 24px var(--v-gutter) clamp(56px, 8vw, 96px);
}
.upload-section {
    background: #fff; border: 1px solid var(--v-line); border-radius: var(--v-r-xl);
    box-shadow: var(--v-sh-2); padding: clamp(14px, 2.2vw, 20px);
}
/* El JS alterna style.display entre 'none' y 'block': el diseño no depende de display */
.upload-area {
    display: block; position: relative;
    border: 2px dashed var(--v-brand-dash); border-radius: var(--v-r-card); background: #fff;
    padding: 20px 20px 20px 22px; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.upload-area:hover, .upload-area:focus-within { border-color: var(--v-brand); background: var(--v-brand-25); }
.upload-area.dragover {
    border-style: solid; border-color: var(--v-brand); background: var(--v-brand-50);
    box-shadow: 0 0 0 4px var(--v-brand-100);
}
.upload-body { display: flex; align-items: center; gap: 18px; }
.upload-icon {
    width: 56px; height: 56px; flex: none; border-radius: 14px;
    background: var(--v-brand-50); color: var(--v-brand); display: grid; place-items: center;
}
.upload-icon .v-i { --v-i-size: 26px; }
.upload-txt { flex: 1; min-width: 0; }
.upload-title { font: 700 1.1875rem/1.3 var(--v-font-display); color: var(--v-ink); letter-spacing: -.012em; }
.upload-subtitle { margin-top: 2px; font-size: var(--v-fs-ui); color: var(--v-text); }
.upload-formats { margin-top: 6px; font-size: .84375rem; line-height: 1.45; color: var(--v-muted-soft); }
.btn-upload {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
    min-height: 48px; padding: 0 22px; border: 1px solid var(--v-brand); border-radius: var(--v-r);
    background: var(--v-brand); color: #fff; font: 600 1rem/1.15 var(--v-font-body); white-space: nowrap; cursor: pointer;
    box-shadow: 0 1px 2px rgba(13, 27, 46, .12), inset 0 1px 0 rgba(255, 255, 255, .14);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-upload:hover { background: var(--v-brand-600); border-color: var(--v-brand-600); }
.file-input { display: none; }
/* Con un archivo elegido la zona se compacta: «Transcribir ahora» pasa a ser lo principal */
.upload-section:has(.file-info.show) .upload-area { padding: 10px 10px 10px 16px; border-width: 1.5px; }
.upload-section:has(.file-info.show) .upload-body { gap: 12px; }
.upload-section:has(.file-info.show) .upload-icon,
.upload-section:has(.file-info.show) .upload-subtitle,
.upload-section:has(.file-info.show) .upload-formats { display: none; }
.upload-section:has(.file-info.show) .upload-title { font-size: 1rem; }
.upload-section:has(.file-info.show) .btn-upload {
    min-height: 40px; padding: 0 16px; border-radius: var(--v-r-md); font-size: var(--v-fs-ui);
    background: #fff; border-color: var(--v-line-2); color: var(--v-ink); box-shadow: var(--v-sh-1);
}
.upload-section:has(.file-info.show) .btn-upload:hover { background: var(--v-brand-25); border-color: var(--v-line-3); }

/* Ficha del archivo elegido: cuatro datos en fila (dos por fila en móvil) */
.file-info {
    display: none; margin-top: 14px;
    border: 1px solid var(--v-line); border-radius: 14px; background: #fff; overflow: hidden;
    grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 1fr));
}
.file-info.show { display: grid; }
/* Mientras se sube, el JS oculta la zona (style.display = 'none'): sin hueco encima de la ficha */
.upload-area[style*="display: none"] + .file-info { margin-top: 0; }
.file-info > div { position: relative; min-width: 0; padding: 12px 16px; }
.file-info > div + div { border-left: 1px solid var(--v-line); }
.file-info > div:first-child { padding-left: 64px; }
.file-info > div:first-child::before,
.file-info > div:first-child::after {
    content: ""; position: absolute; top: 50%; left: 16px; width: 36px; height: 36px; margin-top: -18px;
}
.file-info > div:first-child::before { border-radius: 10px; background: var(--v-brand-50); }
.file-info > div:first-child::after {
    left: 25px; width: 18px; height: 18px; margin-top: -9px; background-color: var(--v-brand);
    -webkit-mask: var(--app-i-audio) center / contain no-repeat; mask: var(--app-i-audio) center / contain no-repeat;
}
.file-info strong { display: block; font: 600 .8125rem/1.3 var(--v-font-body); color: var(--v-muted); }
.file-info span {
    display: block; margin-top: 3px; font: 600 var(--v-fs-ui)/1.4 var(--v-font-body); color: var(--v-ink);
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
#fileName { font-family: var(--v-font-display); font-weight: 700; }

.btn-process {
    display: none; align-items: center; justify-content: center; width: 100%; margin-top: 14px;
    min-height: 56px; padding: 12px 20px; border: 1px solid var(--v-brand); border-radius: 14px;
    background: var(--v-brand); color: #fff; font: 600 1.0625rem/1.2 var(--v-font-body); cursor: pointer;
    box-shadow: 0 1px 2px rgba(13, 27, 46, .12), inset 0 1px 0 rgba(255, 255, 255, .14), var(--v-sh-brand);
    transition: background-color .15s ease;
}
.btn-process.show { display: flex; }
.btn-process:hover:not(:disabled) { background: var(--v-brand-600); border-color: var(--v-brand-600); }
.btn-process:disabled {
    cursor: progress; background: var(--v-brand-50); border-color: var(--v-brand-100); color: var(--v-brand-700); box-shadow: none;
}

/* ---------- Registro del proceso (lo rellena el JS) ---------- */
.process-logs {
    display: none; margin-top: 14px; max-height: 420px; overflow-y: auto;
    background: #fff; border: 1px solid var(--v-line); border-radius: var(--v-r-card);
    font-size: .90625rem;
}
.process-logs.show { display: block; animation: app-rise .3s ease both; }
@keyframes app-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Cabecera y progreso fijos dentro del registro (el JS lo desplaza al último mensaje) */
.logs-header {
    position: sticky; top: 0; z-index: 1; background: #fff;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px 12px; border-bottom: 1px solid var(--v-line);
}
.logs-title { display: flex; align-items: center; gap: 10px; font: 700 .96875rem/1.3 var(--v-font-display); color: var(--v-ink); }
/* Punto azul que late mientras se procesa; verde al terminar, rosa si falla */
.logs-title .pulse {
    width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--v-brand);
    box-shadow: 0 0 0 0 rgba(31, 95, 239, .45); animation: app-pulse 1.6s ease-out infinite;
}
@keyframes app-pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 95, 239, .45); } 80%, 100% { box-shadow: 0 0 0 9px rgba(31, 95, 239, 0); } }
.process-logs.is-done .logs-title .pulse { animation: none; background: var(--v-green); box-shadow: none; }
.process-logs.is-error .logs-title .pulse { animation: none; background: var(--v-rose); box-shadow: none; }
.logs-timer {
    padding: 4px 10px; border-radius: var(--v-r-pill); background: var(--v-soft);
    font: 600 .84375rem/1.2 var(--v-font-body); color: var(--v-muted-soft); font-variant-numeric: tabular-nums;
}
.log-entries { display: grid; padding: 4px 18px; }
.log-entry {
    display: grid; grid-template-columns: 18px 64px minmax(0, 1fr); column-gap: 10px; align-items: start;
    padding: 8px 0; border-bottom: 1px solid var(--v-line);
    animation: app-log-in .25s ease both;
}
.log-entry:last-child { border-bottom: 0; }
@keyframes app-log-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
/* Los emojis de estado se sustituyen por marcas propias; el texto del mensaje ya lo dice */
.log-icon { display: none; }
.log-entry::before {
    content: ""; justify-self: center; width: 8px; height: 8px; margin-top: .55em;
    border-radius: 50%; background: var(--v-line-3);
}
.log-entry.success::before, .log-entry.warning::before, .log-entry.error::before {
    width: 17px; height: 17px; margin-top: .12em; border-radius: 0;
    -webkit-mask: var(--app-i-check) center / contain no-repeat; mask: var(--app-i-check) center / contain no-repeat;
}
.log-entry.success::before { background: var(--v-green); }
.log-entry.warning::before { background: var(--v-amber); -webkit-mask-image: var(--app-i-alert); mask-image: var(--app-i-alert); }
.log-entry.error::before { background: var(--v-rose); -webkit-mask-image: var(--app-i-alert); mask-image: var(--app-i-alert); }
.log-entry.processing::before {
    width: 12px; height: 12px; margin-top: .35em; background: none;
    border: 2px solid var(--v-brand-100); border-top-color: var(--v-brand);
    animation: app-spin .8s linear infinite;
}
.log-entry.processing:not(:last-child)::before { animation: none; border-color: var(--v-line-3); }
@keyframes app-spin { to { transform: rotate(360deg); } }
.log-time { color: var(--v-muted); font-size: .8125rem; line-height: 1.75; font-variant-numeric: tabular-nums; }
.log-content { min-width: 0; }
.log-message { color: var(--v-ink); line-height: 1.5; overflow-wrap: anywhere; }
.log-entry.error .log-message { color: var(--v-rose-700); font-weight: 600; }
.log-entry.success .log-message { font-weight: 600; }
.log-detail { margin-top: 2px; font-size: .8125rem; color: var(--v-muted); overflow-wrap: anywhere; }

/* Barra de progreso azul */
.logs-progress { position: sticky; bottom: 0; background: #fff; padding: 14px 18px; border-top: 1px solid var(--v-line); }
.logs-progress-bar { height: 8px; background: var(--v-brand-50); border-radius: var(--v-r-pill); overflow: hidden; }
.logs-progress-fill { height: 100%; width: 0%; background: var(--v-brand); border-radius: var(--v-r-pill); transition: width .5s ease; }
.logs-progress-text { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: .84375rem; color: var(--v-muted); }
#progressPercent { color: var(--v-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.process-logs::-webkit-scrollbar, .collapsible-content::-webkit-scrollbar { width: 8px; }
.process-logs::-webkit-scrollbar-track, .collapsible-content::-webkit-scrollbar-track { background: transparent; }
.process-logs::-webkit-scrollbar-thumb, .collapsible-content::-webkit-scrollbar-thumb { background: var(--v-line-2); border-radius: 4px; }
.process-logs::-webkit-scrollbar-thumb:hover, .collapsible-content::-webkit-scrollbar-thumb:hover { background: var(--v-line-3); }

/* ---------- Resultado: la ventana de la maqueta del hero ----------
   barra (estado) · herramientas (copiar / descargar) · bandeja gris con tarjetas */
.results-section {
    display: none; margin-top: 24px; overflow: hidden;
    background: #fff; border: 1px solid var(--v-line); border-radius: var(--v-r-xl); box-shadow: var(--v-sh-3);
}
.results-section.show { display: block; animation: app-rise .4s ease both; }
/* Barra: el archivo (nombre y minutos de audio) y la pastilla verde de estado, como el hero */
.result-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px 16px;
    padding: 14px 20px; border-bottom: 1px solid var(--v-line);
}
.result-file { display: flex; align-items: center; gap: 12px; min-width: 0; }
.result-file-txt { min-width: 0; }
.result-title {
    font: 700 1.0625rem/1.3 var(--v-font-display); color: var(--v-ink); letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.result-meta { margin-top: 2px; font-size: .84375rem; line-height: 1.3; color: var(--v-muted); font-variant-numeric: tabular-nums; }
.result-meta:empty { display: none; }
.result-status { flex: none; }
/* .v-ico fija su tono azul por defecto después de .v-t-* (vocap.css): se reponen los tonos
   que usa la app para que el icono no salga azul */
.v-ico.v-t-slate { --v-tone: var(--v-slate); --v-tone-bg: var(--v-slate-50); }
.v-ico.v-t-green { --v-tone: var(--v-green); --v-tone-bg: var(--v-green-50); }
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.results-header .result-actions { padding: 12px 20px; border-bottom: 1px solid var(--v-line); }
.btn-action {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 36px; padding: 0 12px; border: 1px solid var(--v-line-2); border-radius: 9px; background: #fff;
    font: 600 .875rem/1.2 var(--v-font-body); color: var(--v-text-2); white-space: nowrap; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Icono por CSS: flashButton() reescribe el texto del botón al copiar */
.btn-action::before {
    content: ""; width: 16px; height: 16px; flex: none; background-color: currentColor;
    -webkit-mask: var(--app-i-copy) center / contain no-repeat; mask: var(--app-i-copy) center / contain no-repeat;
}
.btn-action[onclick*="downloadResult"]::before { -webkit-mask-image: var(--app-i-download); mask-image: var(--app-i-download); }
.btn-action:hover { border-color: var(--v-line-3); background: var(--v-brand-25); color: var(--v-ink); }
/* «Copiar todo», la acción principal */
.btn-action[onclick*="'all'"] { background: var(--v-brand); border-color: var(--v-brand); color: #fff; }
.btn-action[onclick*="'all'"]:hover { background: var(--v-brand-600); border-color: var(--v-brand-600); color: #fff; }

.results-body {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;
    padding: 16px; background: var(--v-soft);
}
.analysis-card {
    grid-column: span 3; min-width: 0;
    background: #fff; border: 1px solid var(--v-line); border-radius: 14px; box-shadow: var(--v-sh-1);
    padding: 16px 18px 17px;
}
.analysis-card.full-width { grid-column: 1 / -1; }
.analysis-card.tipo, .analysis-card.tono, .analysis-card.participantes { grid-column: span 2; }
.analysis-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.analysis-card-title { font: 700 .90625rem/1.25 var(--v-font-display); color: var(--v-ink); letter-spacing: -.005em; }
.analysis-card-content { font-size: .9375rem; line-height: 1.6; color: var(--v-text-2); overflow-wrap: anywhere; }
.analysis-card.resumen .analysis-card-content { font-size: 1rem; line-height: 1.65; max-width: 78ch; }
.analysis-card-content ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.analysis-card-content li { position: relative; padding-left: 16px; }
.analysis-card-content li::before {
    content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%;
    background: var(--v-brand);
}
/* Tareas: casilla de verificación, separadas por una línea (como la maqueta) */
.analysis-card.tareas ul { gap: 0; }
.analysis-card.tareas li { padding: 9px 0 9px 28px; color: var(--v-ink); font-weight: 500; border-top: 1px solid var(--v-line); }
.analysis-card.tareas li:first-child { border-top: 0; padding-top: 1px; }
.analysis-card.tareas li::before {
    left: 0; top: 11px; width: 17px; height: 17px; border-radius: 5px;
    background: #fff; border: 1.6px solid #B8C2D1;
}
.analysis-card.tareas li:first-child::before { top: 3px; }
/* Fechas: marca ámbar (color del tipo) */
.analysis-card.fechas li::before { background: var(--v-amber); }
/* Citas: como la cita destacada de la maqueta */
.analysis-card.citas li {
    padding: 1px 0 1px 14px; border-left: 3px solid var(--v-brand-100);
    font: 600 1rem/1.5 var(--v-font-display); color: var(--v-ink); letter-spacing: -.01em;
}
.analysis-card.citas li::before { display: none; }
/* «No identificado» llega con color en línea (#94a3b8, 2,6:1): gris AA */
.analysis-card-content em { color: var(--v-muted) !important; font-style: normal; }

/* Transcripción completa y análisis en texto: tarjetas plegables */
.result-block {
    grid-column: 1 / -1; min-width: 0;
    background: #fff; border: 1px solid var(--v-line); border-radius: 14px; box-shadow: var(--v-sh-1);
    overflow: hidden;
}
.collapsible-header {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; cursor: pointer;
    -webkit-user-select: none; user-select: none;
}
.collapsible-header h3 { flex: 1; min-width: 0; font: 700 .90625rem/1.3 var(--v-font-display); color: var(--v-ink); letter-spacing: -.005em; }
.collapsible-toggle { border-radius: 4px; }
.collapsible-header:hover h3 { color: var(--v-brand-700); }
.collapsible-arrow {
    display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%;
    background: var(--v-soft); color: var(--v-ink); transform: rotate(180deg); transition: transform .2s ease, background-color .15s ease;
}
.collapsible-arrow .v-i { --v-i-size: 18px; }
.collapsible-header:hover .collapsible-arrow { background: var(--v-brand-50); color: var(--v-brand); }
.collapsible-header.collapsed .collapsible-arrow { transform: none; }
.collapsible-content { max-height: 520px; overflow-y: auto; transition: max-height .3s ease; border-top: 1px solid var(--v-line); }
.collapsible-content.collapsed { max-height: 0; overflow: hidden; border-top-width: 0; }
.result-content { padding: 16px 18px 18px; }
.result-text { white-space: pre-wrap; font-size: .96875rem; line-height: 1.75; color: var(--v-text-2); overflow-wrap: anywhere; }

/* ---------- Historial ---------- */
.history-section {
    margin-top: 24px; background: #fff; border: 1px solid var(--v-line); border-radius: var(--v-r-xl);
    box-shadow: var(--v-sh-1); padding: clamp(18px, 3vw, 26px);
}
.history-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.history-title { font: 700 1.25rem/1.3 var(--v-font-display); color: var(--v-ink); letter-spacing: -.015em; }
.history-list { display: grid; gap: 8px; }
.history-item {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 14px 12px 66px; border: 1px solid var(--v-line); border-radius: 14px; background: #fff;
    cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.history-item::before, .history-item::after { content: ""; position: absolute; top: 50%; }
.history-item::before { left: 14px; width: 38px; height: 38px; margin-top: -19px; border-radius: 10px; background: var(--v-brand-50); }
.history-item::after {
    left: 24px; width: 18px; height: 18px; margin-top: -9px; background-color: var(--v-brand);
    -webkit-mask: var(--app-i-audio) center / contain no-repeat; mask: var(--app-i-audio) center / contain no-repeat;
}
.history-item:hover { border-color: var(--v-line-3); background: var(--v-brand-25); }
.history-item-info { display: grid; gap: 2px; min-width: 0; }
.history-item-name {
    font: 700 .96875rem/1.35 var(--v-font-display); color: var(--v-ink); letter-spacing: -.005em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.history-item-meta { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: .84375rem; color: var(--v-muted); font-variant-numeric: tabular-nums; }
.history-item-meta span + span::before { content: "·"; margin-right: 10px; }
.history-item:hover .history-item-meta { color: var(--v-muted-soft); }
.history-item-summary { margin-top: 2px; font-size: .875rem; color: var(--v-text); max-width: 72ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-item-actions { display: flex; gap: 8px; flex: none; }
.history-btn {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
    border: 1px solid var(--v-line-2); border-radius: 9px; background: #fff; box-shadow: var(--v-sh-1);
    font: 600 .875rem/1.2 var(--v-font-body); color: var(--v-ink); cursor: pointer;
}
.history-btn:hover { border-color: var(--v-brand); color: var(--v-brand-700); }
.history-empty {
    display: grid; justify-items: center; gap: 10px; padding: 28px 16px; text-align: center;
    border: 1px dashed var(--v-line-2); border-radius: 14px; background: var(--v-soft); color: var(--v-muted-soft);
}
.history-empty-icon {
    width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--v-line);
    display: grid; place-items: center;
}
.history-empty-icon::after {
    content: ""; width: 22px; height: 22px; background-color: var(--v-slate);
    -webkit-mask: var(--app-i-doc) center / contain no-repeat; mask: var(--app-i-doc) center / contain no-repeat;
}

/* ---------- Modales ---------- */
.modal-overlay {
    position: fixed; inset: 0; z-index: var(--v-z-modal); display: none; justify-content: center; align-items: center;
    padding: 16px; background: rgba(13, 27, 46, .5);
}
.modal-overlay.show { display: flex; }
.modal-content {
    position: relative; width: 100%; max-width: 880px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
    background: #fff; border-radius: var(--v-r-xl); box-shadow: var(--v-sh-3);
    padding: clamp(20px, 3.4vw, 32px);
}
.modal-close {
    position: absolute; top: 12px; right: 12px; width: 40px; height: 40px;
    display: grid; place-items: center; border: 0; border-radius: var(--v-r-md); background: none;
    font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--v-muted);
}
.modal-close:hover { background: var(--v-soft); color: var(--v-ink); }
.modal-title {
    margin-bottom: 16px; padding-right: 52px;
    font: 700 1.25rem/1.3 var(--v-font-display); color: var(--v-ink); letter-spacing: -.015em; overflow-wrap: anywhere;
}
.modal-actions { margin-bottom: 20px; }
/* El detalle del historial llega con estilos en línea del diseño anterior (morado, grises): se adaptan aquí */
#modalContent > div[style] { background: transparent !important; border-radius: 0 !important; }
#modalContent > div[style]:first-child {
    padding: 12px 14px !important; background: var(--v-soft) !important; border-radius: 12px !important;
    font-size: .875rem; color: var(--v-muted-soft); line-height: 1.6;
}
#modalContent > div[style]:first-child strong { color: var(--v-ink); font-weight: 600; }
#modalContent h4 {
    color: var(--v-ink) !important; font: 700 .9375rem/1.3 var(--v-font-display);
    letter-spacing: -.005em; margin-bottom: 10px !important;
}
#modalContent h4 + div[style] {
    background: var(--v-soft) !important; border-radius: 12px !important;
    font-size: .9375rem; color: var(--v-text-2);
}

/* Modal de créditos insuficientes (dentro de la app) */
.credits-modal-header { display: grid; justify-items: start; gap: 6px; margin-bottom: 20px; padding-right: 44px; }
.credits-modal-icon {
    display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px;
    border-radius: 14px; background: var(--v-brand-50);
}
.credits-modal-icon::after {
    content: ""; width: 24px; height: 24px; background-color: var(--v-brand);
    -webkit-mask: var(--app-i-clock) center / contain no-repeat; mask: var(--app-i-clock) center / contain no-repeat;
}
.credits-modal-title { font: 800 clamp(1.375rem, 1.2rem + .8vw, 1.75rem)/1.2 var(--v-font-display); color: var(--v-ink); letter-spacing: -.022em; text-wrap: balance; }
.credits-modal-subtitle { color: var(--v-text); }
.credits-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.credits-summary-item, .summary-item { min-width: 0; padding: 12px 16px; border-radius: 12px; background: var(--v-soft); border: 1px solid var(--v-line); }
.credits-summary-item .label, .summary-item .label { font: 600 .84375rem/1.3 var(--v-font-body); color: var(--v-muted-soft); }
.credits-summary-item .value {
    margin-top: 4px; font: 800 1.375rem/1.15 var(--v-font-display); color: var(--v-ink);
    letter-spacing: -.015em; font-variant-numeric: tabular-nums;
}
.credits-summary-item.missing, .summary-item.missing { background: var(--v-amber-50); border-color: var(--v-amber-line); }
.credits-summary-item.missing .label, .credits-summary-item.missing .value,
.summary-item.missing .label, .summary-item.missing .value { color: var(--v-amber-700); }
.options-section-title { font: 700 1.0625rem/1.35 var(--v-font-display); color: var(--v-ink); letter-spacing: -.01em; margin: 0 0 18px; }
.credits-modal-footer { margin-top: 18px; text-align: center; }
.credits-modal-footer a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
    font-weight: 600; font-size: var(--v-fs-ui); color: var(--v-brand-700); text-underline-offset: 4px;
}

/* ==========================================================================
   Tarjetas de pack (paywall y modal de la app; el JS genera el marcado)
   ========================================================================== */
.options-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding-top: 4px; }
.option-card {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    background: #fff; border: 1px solid var(--v-line-2); border-radius: var(--v-r-card); box-shadow: var(--v-sh-1);
    padding: 22px 16px 16px; text-align: left; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.option-card:hover { border-color: var(--v-brand); box-shadow: var(--v-sh-2); transform: translateY(-2px); }
.option-card:focus-visible { outline: var(--v-focus); outline-offset: 2px; }
.option-card.recommended {
    border: 2px solid var(--v-brand); padding: 21px 15px 15px;
    background: var(--v-brand-25); box-shadow: var(--v-sh-brand);
}
.option-card.recommended::before,
.option-card.sufficient::after {
    position: absolute; top: -12px; left: 14px;
    font: 700 .75rem/1.2 var(--v-font-body); letter-spacing: 0;
    padding: 4px 10px; border-radius: var(--v-r-pill); white-space: nowrap;
}
.option-card.recommended::before { content: 'Recomendado'; background: var(--v-brand); color: #fff; }
.option-card.sufficient::after { content: 'Suficiente'; background: var(--v-green-50); color: var(--v-green-700); border: 1px solid var(--v-green-line); }
html[lang="en"] .option-card.recommended::before { content: 'Recommended'; }
html[lang="en"] .option-card.sufficient::after { content: 'Enough'; }
.option-card .option-name { font: 600 .875rem/1.3 var(--v-font-body); color: var(--v-muted-soft); }
.option-card .option-hours {
    margin-top: 8px; font: 800 2.25rem/1 var(--v-font-display); color: var(--v-ink);
    letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.option-card .option-price { margin-top: 12px; font: 700 1.25rem/1.2 var(--v-font-display); color: var(--v-ink); font-variant-numeric: tabular-nums; }
.option-card .option-per-hour { font-size: .875rem; color: var(--v-muted-soft); font-variant-numeric: tabular-nums; }
.option-card .option-cost {
    margin-top: 12px; align-self: flex-start; max-width: 100%;
    font: 600 .84375rem/1.3 var(--v-font-body); color: var(--v-brand-700);
    background: var(--v-brand-50); border-radius: var(--v-r-sm); padding: 4px 8px;
}
.option-card .option-left { margin-top: 8px; font-size: .875rem; line-height: 1.45; color: var(--v-text); flex: 1; }
.option-card .option-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 100%;
    margin-top: 14px; min-height: 52px; padding: 8px 12px;
    border: 1px solid var(--v-line-2); border-radius: var(--v-r); background: #fff;
    font: 600 .9375rem/1.2 var(--v-font-body); color: var(--v-ink); text-align: center; text-wrap: balance;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.option-card:hover .option-btn { border-color: var(--v-brand); color: var(--v-brand-700); background: var(--v-brand-25); }
.option-card.recommended .option-btn,
.option-card.recommended:hover .option-btn {
    background: var(--v-brand); border-color: var(--v-brand); color: #fff;
    box-shadow: 0 1px 2px rgba(13, 27, 46, .12), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.option-card.recommended:hover .option-btn { background: var(--v-brand-600); }
/* No cubre el audio: sin opacidad (mantiene el contraste), en gris y con cifras atenuadas */
.option-card.insufficient { background: var(--v-soft); border-color: var(--v-line); box-shadow: none; }
.option-card.insufficient .option-hours,
.option-card.insufficient .option-price { color: var(--v-muted-soft); }
.option-card.insufficient .option-left { color: var(--v-muted-soft); }

/* ==========================================================================
   Páginas de paso (paywall, pago completado, pago cancelado, baja): <body class="flow">
   ========================================================================== */
.flow-top { background: #fff; border-bottom: 1px solid var(--v-line); }
.flow-top-in {
    max-width: calc(var(--app-w) + 2 * var(--v-gutter)); margin: 0 auto; padding: 0 var(--v-gutter);
    height: var(--v-nav-h); display: flex; align-items: center;
}
.flow-main { padding: clamp(24px, 5vw, 56px) var(--v-gutter) clamp(48px, 7vw, 88px); }
.flow-card {
    max-width: var(--flow-w); margin: 0 auto;
    background: #fff; border: 1px solid var(--v-line); border-radius: var(--v-r-xl); box-shadow: var(--v-sh-2);
    padding: clamp(22px, 4.4vw, 48px);
}
.flow-card-narrow { max-width: 560px; text-align: center; }

/* ---------- Paywall (/creditos-insuficientes) ---------- */
.pay-head h1 {
    font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.625rem); font-weight: 800; line-height: 1.12;
    letter-spacing: -.026em; max-width: 20em;
}
#h1Missing { color: var(--v-brand-700); white-space: nowrap; }
.pay-head .subtitle { margin-top: 12px; font-size: 1.0625rem; line-height: 1.6; color: var(--v-text); max-width: 58ch; }
.pay-head .filename {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin-top: 16px; padding: 6px 12px 6px 8px;
    border: 1px solid var(--v-line); border-radius: 10px; background: var(--v-soft);
    font: 600 .875rem/1.4 var(--v-font-body); color: var(--v-ink); overflow-wrap: anywhere;
}
.pay-head .filename::before {
    content: ""; width: 18px; height: 18px; flex: none; background-color: var(--v-brand);
    -webkit-mask: var(--app-i-audio) center / contain no-repeat; mask: var(--app-i-audio) center / contain no-repeat;
}
.pay-head .filename:empty { display: none; }
.summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 26px 0 34px; }
.summary-item { padding: 14px 18px; border-radius: 14px; }
.summary-item .value {
    margin-top: 4px; font: 800 clamp(1.375rem, 1.2rem + .8vw, 1.75rem)/1.15 var(--v-font-display); color: var(--v-ink);
    letter-spacing: -.015em; font-variant-numeric: tabular-nums;
}
.options-title { font: 700 1.1875rem/1.35 var(--v-font-display); color: var(--v-ink); letter-spacing: -.012em; margin-bottom: 22px; }
/* Misma rejilla de 4 columnas que los packs */
.trust-row {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px;
    margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--v-line);
    font-size: .90625rem; line-height: 1.45; color: var(--v-text);
}
/* pretty: sin palabras sueltas en la última línea («Google / Pay») */
.trust-row span { display: flex; align-items: flex-start; gap: 8px; text-wrap: pretty; }
.trust-row span::before {
    content: ""; width: 18px; height: 18px; flex: none; margin-top: .05em; background-color: var(--v-green);
    -webkit-mask: var(--app-i-check) center / contain no-repeat; mask: var(--app-i-check) center / contain no-repeat;
}
.pay-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px;
    margin-top: 20px;
}
.pay-foot a {
    display: inline-flex; align-items: center; min-height: 44px;
    font-weight: 600; font-size: var(--v-fs-ui); color: var(--v-brand-700); text-decoration: none;
}
.pay-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pay-foot .note { font-size: .90625rem; color: var(--v-muted); }

/* ---------- Pago completado / cancelado / baja ---------- */
.status-mark {
    width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%;
    display: grid; place-items: center;
}
.status-mark .v-i { --v-i-size: 30px; }
.status-mark-ok {
    background: var(--v-green-50); color: var(--v-green); box-shadow: 0 0 0 8px rgba(12, 143, 99, .06);
    animation: app-mark-in .45s cubic-bezier(.2, .9, .3, 1.2) .1s both;
}
.status-mark-off { background: var(--v-soft); color: var(--v-ink); border: 1px solid var(--v-line); }
.status-mark-info { background: var(--v-brand-50); color: var(--v-brand); box-shadow: 0 0 0 8px rgba(31, 95, 239, .05); }
.status-mark-error { background: var(--v-rose-50); color: var(--v-rose); }
/* Pago cancelado: «0 €», no se ha cobrado nada */
.status-mark-zero { font: 800 1rem/1 var(--v-font-display); letter-spacing: -.01em; }
@keyframes app-mark-in { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.flow-card-narrow h1 { font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem); font-weight: 800; line-height: 1.12; letter-spacing: -.026em; }
.flow-card-narrow .subtitle { margin: 12px auto 0; font-size: 1.0625rem; line-height: 1.6; color: var(--v-text); max-width: 42ch; }
.credits-box {
    margin: 28px 0 24px; padding: 18px 20px;
    border: 1px solid var(--v-brand-100); border-radius: var(--v-r-card); background: var(--v-brand-25);
}
.credits-label { font: 600 .875rem/1.3 var(--v-font-body); color: var(--v-muted-soft); }
.credits-amount {
    margin-top: 4px; min-height: 1.15em; font: 800 clamp(2rem, 1.6rem + 1.6vw, 2.5rem)/1.15 var(--v-font-display);
    color: var(--v-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.loading {
    display: inline-block; width: 24px; height: 24px; vertical-align: middle;
    border: 2.5px solid var(--v-brand-100); border-top-color: var(--v-brand); border-radius: 50%;
    animation: app-spin .8s linear infinite;
}
.info-text { margin-top: 18px; font-size: var(--v-fs-ui); line-height: 1.55; color: var(--v-muted); }
.info-text:empty { display: none; }
.info-box {
    margin: 28px 0 0; padding: 20px 22px; text-align: left;
    background: var(--v-soft); border: 1px solid var(--v-line); border-radius: var(--v-r-card);
}
.info-box h2 { font: 700 1.0625rem/1.3 var(--v-font-display); color: var(--v-ink); letter-spacing: -.01em; margin-bottom: 12px; }
.info-box ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.info-box li { position: relative; padding-left: 28px; color: var(--v-text); }
.info-box li::before {
    content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; background-color: var(--v-green);
    -webkit-mask: var(--app-i-check) center / contain no-repeat; mask: var(--app-i-check) center / contain no-repeat;
}
.info-box a { font-weight: 600; color: var(--v-brand-700); }
.btn-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.resume-note { margin-top: 16px; font-size: var(--v-fs-ui); color: var(--v-text); }

/* Baja de emails (/baja) */
.unsub-text { display: grid; gap: 12px; margin: 14px auto 0; max-width: 44ch; font-size: 1.0625rem; line-height: 1.6; color: var(--v-text); }
.unsub-form { margin-top: 26px; }
.unsub-actions { display: grid; justify-items: center; gap: 8px; margin-top: 26px; }
.unsub-form + .unsub-actions { margin-top: 10px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
    .options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
    .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .analysis-card.tipo, .analysis-card.tono { grid-column: span 3; }
    .analysis-card.participantes { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    .results-body { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 10px; }
    .analysis-card, .analysis-card.tipo, .analysis-card.tono, .analysis-card.participantes { grid-column: 1 / -1; }
    .log-time { display: none; }
    .log-entry { grid-template-columns: 18px minmax(0, 1fr); }
    .history-item { flex-wrap: wrap; }
    .history-item-summary { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

@media (max-width: 640px) {
    .guest-banner { padding: 14px; }
    .guest-banner-actions { width: 100%; }
    .guest-banner-btn { flex: 1 1 auto; }
    .upload-area { padding: 22px 16px 16px; }
    .upload-body { flex-direction: column; align-items: stretch; text-align: center; gap: 12px; }
    .upload-icon { margin: 0 auto 4px; }
    .btn-upload { width: 100%; min-height: 52px; }
    .upload-section:has(.file-info.show) .upload-body { flex-direction: row; align-items: center; text-align: left; }
    .upload-section:has(.file-info.show) .btn-upload { width: auto; min-height: 40px; }
    .file-info { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .file-info > div:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--v-line); }
    .file-info > div:nth-child(2) { border-left: 0; }
    .file-info > div { padding: 11px 12px; }
    .file-info > div:first-child { padding-left: 62px; }
    .result-bar { padding: 12px 14px; }
    .result-file { gap: 10px; }
    .result-file .v-ico { width: 34px; height: 34px; border-radius: 10px; }
    .result-file .v-ico .v-i { --v-i-size: 18px; }
    .result-title { font-size: .9375rem; }
    /* El estado queda como un check verde (el texto sigue ahí para lectores de pantalla) */
    .result-status { min-height: 26px; padding: 0 6px; gap: 0; font-size: 0; }
    .results-header .result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 14px; }
    .result-actions .btn-action { white-space: normal; min-height: 42px; text-wrap: balance; }
    .results-header .result-actions .btn-action[onclick*="'all'"] { grid-column: 1 / -1; }
    .modal-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .credits-summary, .summary { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .credits-summary-item, .summary-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 14px; }
    .credits-summary-item .value, .summary-item .value { margin-top: 0; font-size: 1.25rem; }
    .pay-foot { flex-direction: column-reverse; align-items: flex-start; }
    .btn-container .v-btn { width: 100%; }
}

/* Móvil estrecho: los packs en una lista (cifra y precio en la misma fila) */
@media (max-width: 560px) {
    .options-grid { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
    /* En lista, el pack recomendado va primero (en escritorio se ven los cuatro a la vez) */
    .option-card.recommended { order: -1; }
    .trust-row { grid-template-columns: minmax(0, 1fr); }
    .option-card {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
        grid-template-areas: "name name" "hours price" "per per" "cost cost" "left left" "btn btn";
        align-items: end;
    }
    .option-card .option-name { grid-area: name; }
    .option-card .option-hours { grid-area: hours; margin-top: 6px; font-size: 2rem; }
    .option-card .option-price { grid-area: price; margin-top: 0; text-align: right; }
    .option-card .option-per-hour { grid-area: per; }
    .option-card .option-cost { grid-area: cost; justify-self: start; margin-top: 10px; }
    .option-card .option-left { grid-area: left; margin-top: 6px; }
    .option-card .option-btn { grid-area: btn; margin-top: 12px; }
    .history-item { align-items: flex-start; padding-left: 64px; }
    .history-item::before { top: 12px; margin-top: 0; }
    .history-item::after { top: 22px; margin-top: 0; }
    .history-item-actions { width: 100%; }
    .history-btn { flex: 1; justify-content: center; }
    .history-item-meta { gap: 0 12px; }
    .history-item-meta span + span::before { content: none; }
}
/* Móvil: las herramientas del resultado siguen en 2 columnas («Copiar todo» a lo ancho),
   para no empujar el resumen fuera de la primera pantalla; en el detalle del historial,
   una por fila */
@media (max-width: 480px) {
    .modal-actions { grid-template-columns: minmax(0, 1fr); }
    .modal-actions .btn-action { justify-content: flex-start; padding: 0 14px; }
    .results-header .result-actions { gap: 6px; }
    /* Si el texto pasa a dos líneas, el icono queda pegado a él (alineado a la izquierda) */
    .results-header .result-actions .btn-action { padding: 0 10px; gap: 7px; justify-content: flex-start; text-align: left; }
    .results-header .result-actions .btn-action[onclick*="'all'"] { justify-content: center; }
}
/* Móvil pequeño: «Copiar transcripción» cabe en su media columna */
@media (max-width: 374px) {
    .results-header .result-actions { padding: 10px 12px; }
    .results-header .result-actions .btn-action { font-size: .8125rem; }
    .results-header .result-actions .btn-action::before { width: 14px; height: 14px; }
}

/* Móvil: el saldo y el menú de usuario caben en la barra */
@media (max-width: 480px) {
    .navbar-container { gap: 8px; }
    .navbar-user { gap: 6px; }
    .navbar-lang { padding: 0 8px; }
    .navbar-lang .v-i { display: none; }
    .credits-display { gap: 8px; padding-left: 12px; }
    #userCreditsLabel { display: none; }
    #userCredits::after { content: " h"; }
    #userEmail { display: none; }
    .user-button { padding: 0 10px; }
    .user-button.auth-guest-only { padding: 0 12px; }
}
@media (max-width: 640px) {
    #userEmail { display: none; }
    .user-button { padding: 0 10px; }
}
/* Con sesión la barra lleva saldo y cuenta: el nombre del logo queda para lectores de pantalla */
@media (max-width: 400px) {
    body[data-auth="user"] .navbar .v-logo-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 359px) {
    .navbar .v-logo-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    .option-card:hover { transform: none; }
    .logs-title .pulse { animation: none; }
}