/* ─── Sistema de marca OVAMUS · tokens ──────────────────────
Los tokens (color → type → layout) se cargan como en el
de las plantillas base, ANTES de este archivo. NO con
@import: era encadenado y bloqueante → causaba FOUC (la página
se pintaba en bruto y "saltaba" al llegar los tokens). Conviven
con los tokens viejos del :root de abajo (los nombres no se pisan).
───────────────────────────────────────────────────────────── */
/* ============================================================
DESIGN TOKENS
Los nombres viejos se conservan; los valores ahora apuntan al
sistema de marca v1 (crema · terracota · olivo). Esto rebrandea
globalmente sin renombrar cada `var()` del CSS.
============================================================ */
:root {
/* Backgrounds */
--bg-base: var(--color-bg); /* lienzo crema */
--bg-surface: var(--color-surface); /* card crema */
--bg-elevated: var(--color-surface-2); /* surface más cargada */
--bg-input: #FFFFFF; /* inputs blancos en claro */
/* Borders */
--border: var(--color-border-strong);
--border-muted: var(--color-border);
/* Accents */
--accent: var(--color-primary); /* terracota */
--accent-alt: var(--color-accent); /* olivo */
--accent-grad: var(--color-primary); /* sistema de marca: sin gradientes */
--accent-grad-h: var(--color-primary);
/* Text */
--text-primary: var(--color-text);
--text-secondary: var(--color-text-muted);
--text-muted: var(--color-text-muted);
--text-faint: rgba(30, 26, 20, 0.45);
/* Status */
--danger: var(--color-danger);
--danger-dim: rgba(156, 58, 42, 0.15);
--success: var(--color-success);
--warning: var(--color-warning);
/* Typography */
--font: var(--font-body); /* Plus Jakarta Sans */
--text-xs: 11px;
--text-sm: 13px;
--text-base: 15px;
--text-lg: 18px;
--text-xl: 24px;
/* Radius (valores propios — los del sistema de marca son distintos) */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
/* Shadows */
--shadow-glow: var(--shadow-focus); /* ring terracota */
}
/* ============================================================
BASE
============================================================ */
body {
font-family: var(--font);
background: var(--bg-base);
color: var(--text-primary);
text-align: center;
padding: 10px;
padding-bottom: 80px;
overflow-x: hidden;
}
.container {
width: 90%;
max-width: 500px;
margin: auto;
}
.container-wide {
width: 100%;
max-width: 700px;
margin: auto;
padding: 0 32px;
box-sizing: border-box;
}
@media (min-width: 1101px) {
.container-wide { max-width: none; }
.container { max-width: 560px; }
}
/* Wizard de creación de video: usa .container-wide para aprovechar
pantalla ancha (las 4 cards de "Tipo de video" caben en 1 fila),
pero con un cap para que los inputs de texto largos no queden
estirados grotescamente en monitores muy anchos. */
.container-wide.page-wizard { max-width: 980px; }
h2 {
font-weight: 700;
letter-spacing: -0.01em;
}
label {
display: block;
margin-top: 20px;
font-weight: 600;
font-size: var(--text-sm);
color: var(--text-secondary);
letter-spacing: 0.01em;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
width: 100%;
padding: 10px 14px;
margin-top: 8px;
border-radius: var(--radius-md);
background: var(--bg-input);
border: 1px solid var(--border);
color: var(--text-primary);
font-family: var(--font);
font-size: 16px; /* evita zoom automático en móviles */
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(184, 70, 44, 0.12);
}
input[type="checkbox"],
input[type="radio"] {
accent-color: var(--color-primary);
cursor: pointer;
}
/* ============================================================
BOTONES
============================================================ */
button {
background: var(--accent-grad);
border: none;
padding: 14px 20px;
width: auto;
font-family: var(--font);
font-weight: 700;
font-size: 16px;
cursor: pointer;
border-radius: var(--radius-md);
margin-top: 0;
color: var(--color-text-inverse);
transition: opacity 0.2s, transform 0.1s;
}
button:hover { opacity: 0.88; }
button:active { transform: scale(0.97); }
/* ============================================================
ERRORES
============================================================ */
.error-msg {
color: var(--danger);
font-size: var(--text-sm);
margin-top: 5px;
min-height: 18px;
}
.error-msg.visible {
display: block;
margin-bottom: 16px;
}
.error-block {
display: none;
color: var(--danger);
margin-top: 40px;
}
/* ============================================================
LOADING
============================================================ */
.loading {
display: none;
background: var(--color-surface-2);
padding: 15px;
margin: 10px 0;
border-radius: var(--radius-md);
font-weight: 700;
}
/* ============================================================
COLORES / IMÁGENES
============================================================ */
.color-box {
width: 45px;
height: 45px;
border-radius: var(--radius-md);
cursor: pointer;
border: 2px solid white;
transition: transform 0.15s;
}
.color-box.activo {
border: 3px solid var(--accent-alt);
transform: scale(1.2);
}
.img-box {
width: 90px;
height: 130px;
object-fit: cover;
cursor: pointer;
border: 2px solid transparent;
border-radius: var(--radius-sm);
transition: border-color 0.15s;
}
.img-box.activo {
border: 3px solid var(--accent-alt);
}
/* ============================================================
FLEX
============================================================ */
.flex {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
/* ============================================================
OVA PREVIEW
============================================================ */
.ova-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 12px 0 8px;
}
.duracion-badge {
font-size: var(--text-sm);
color: var(--accent-alt);
font-weight: 700;
}
.btn-regenerar {
background: var(--bg-surface);
border: 1px solid var(--border);
color: var(--text-secondary);
padding: 6px 12px;
border-radius: var(--radius-sm);
font-size: var(--text-sm);
cursor: pointer;
width: auto;
margin: 0;
font-family: var(--font);
}
.btn-regenerar:hover { border-color: var(--accent); color: var(--text-primary); }
.bloque-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 6px 0 10px;
}
.bloque-tag {
display: inline-block;
background: var(--color-surface-2);
color: var(--color-primary);
border-radius: 20px;
padding: 3px 10px;
font-size: var(--text-xs);
font-weight: 600;
}
.escena-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 12px;
margin: 8px 0;
text-align: left;
}
.escena-num {
font-size: var(--text-xs);
color: var(--text-muted);
font-weight: 700;
text-transform: uppercase;
margin-bottom: 6px;
}
.tipo-tag {
background: var(--color-surface-2);
color: var(--accent);
font-size: 10px;
padding: 2px 6px;
border-radius: var(--radius-sm);
margin-left: 6px;
font-weight: normal;
}
.ova-hint {
font-size: var(--text-xs);
color: var(--text-muted);
margin: 4px 0 10px;
text-align: left;
}
.escena-label {
font-size: var(--text-xs);
color: var(--text-muted);
margin: 6px 0 3px;
display: block;
}
.escena-visual-input {
width: 100%;
background: var(--color-surface);
border: 1px solid var(--accent-alt);
color: var(--accent-alt);
font-weight: 700;
font-size: var(--text-base);
border-radius: var(--radius-sm);
padding: 8px 10px;
margin-bottom: 4px;
box-sizing: border-box;
font-family: var(--font);
}
.escena-visual-input:focus {
outline: none;
border-color: var(--accent-alt);
background: var(--color-surface);
box-shadow: 0 0 0 3px rgba(95, 110, 72, 0.10);
}
.escena-voz-input {
width: 100%;
background: var(--bg-input);
border: 1px solid var(--border);
color: var(--color-text);
font-size: var(--text-sm);
line-height: 1.5;
border-radius: var(--radius-sm);
padding: 8px 10px;
box-sizing: border-box;
resize: vertical;
font-family: var(--font);
}
.escena-voz-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(184, 70, 44, 0.10);
}
/* ============================================================
SLIDER VOLUMEN
============================================================ */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 4px;
background: var(--border);
outline: none;
padding: 0;
border: none;
box-shadow: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--accent-grad);
cursor: pointer;
}
/* ============================================================
SELECTOR DE FORMATO
============================================================ */
.formato-toggle {
display: flex;
gap: 12px;
margin-top: 10px;
}
.formato-card {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border: 2px solid var(--border);
border-radius: var(--radius-md);
cursor: pointer;
background: var(--bg-surface);
transition: border-color 0.2s;
text-align: left;
}
.formato-card:hover { border-color: var(--accent); }
.formato-card.activo { border-color: var(--accent); background: var(--color-primary-muted); }
.formato-card strong {
display: block;
font-size: var(--text-base);
color: var(--text-primary);
}
.formato-card span {
font-size: var(--text-xs);
color: var(--text-secondary);
}
/* Banner de recomendación pedagógica: EA con >3 objetivos en 9:16. */
.banner-formato-objetivos {
display: flex; align-items: flex-start; gap: 12px;
margin-top: 12px; padding: 14px 16px;
background: rgba(56, 189, 248, 0.08);
border: 1px solid rgba(56, 189, 248, 0.35);
border-radius: 8px;
}
.banner-formato-objetivos .bfo-icon { font-size: 22px; line-height: 1; }
.banner-formato-objetivos .bfo-body { flex: 1; }
.banner-formato-objetivos .bfo-title {
font-size: 13px; font-weight: 700; color: var(--text-primary);
margin-bottom: 4px;
}
.banner-formato-objetivos .bfo-text {
font-size: 12px; color: var(--text-secondary); line-height: 1.5;
margin-bottom: 10px;
}
.banner-formato-objetivos .bfo-text strong { color: var(--text-primary); }
.banner-formato-objetivos .bfo-actions {
display: flex; gap: 8px; flex-wrap: wrap;
}
/* Aviso BLOQUEANTE (no es recomendación): la entrada está incompleta y el
sistema para en vez de degradar en silencio. Hoy lo usa el EA sin
objetivos de aprendizaje en el OVA Curricular. Tono ámbar para
distinguirlo del banner informativo azul de arriba. */
.aviso-bloqueo {
display: flex; align-items: flex-start; gap: 12px;
margin-top: 12px; padding: 14px 16px;
background: rgba(200, 144, 43, 0.10);
border: 1px solid rgba(200, 144, 43, 0.42);
border-radius: 8px;
}
.aviso-bloqueo strong { font-size: 13px; color: var(--text-primary); }
.aviso-bloqueo-icon { font-size: 20px; line-height: 1; }
.aviso-bloqueo-texto {
font-size: 12px; color: var(--text-secondary);
line-height: 1.5; margin-top: 4px;
}
/* Reemplaza el carácter unicode ▮/▬ por un rectángulo CSS terracota:
el glifo unicode lo pintaban algunas fuentes como emoji ignorando
`color:`, así que el bloque salía negro sobre crema. Con background
puro respeta var(--accent) en cualquier sistema. */
.formato-icon {
display: inline-block;
width: 14px;
height: 28px;
background: var(--accent);
border-radius: 2px;
font-size: 0;
flex-shrink: 0;
align-self: center;
}
.formato-icon.landscape {
width: 28px;
height: 14px;
}
.formato-169 .img-box {
width: 130px;
height: 80px;
}
/* ============================================================
SELECTOR DE MODALIDAD
============================================================ */
.modalidad-toggle {
display: flex;
gap: 10px;
margin-top: 8px;
}
.modalidad-card {
flex: 1;
border: 2px solid var(--border);
border-radius: var(--radius-md);
padding: 12px;
cursor: pointer;
background: var(--bg-surface);
text-align: center;
transition: border-color 0.2s, background 0.2s;
}
.modalidad-card:hover { border-color: var(--accent); }
.modalidad-card.activo { border-color: var(--accent); background: var(--color-primary-muted); }
.modalidad-card-icon { font-size: 20px; }
.modalidad-card-title {
font-weight: 700;
font-size: var(--text-sm);
color: var(--text-primary);
margin-top: 4px;
}
.modalidad-card.activo .modalidad-card-title { color: var(--accent-alt); }
.modalidad-card-sub {
font-size: var(--text-xs);
color: var(--text-faint);
margin-top: 2px;
}
/* ============================================================
CANAL SOCIAL (sub-selector de Micro OVA Social)
============================================================ */
/* auto-fit: subtipo (2 cards) y canal (4 cards) usan el mismo
componente. En desktop ancho, 4 canales caben en 1 fila; al
estrechar, pasa a 2x2 y luego a 1 col. */
.canal-toggle {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 8px;
margin-top: 8px;
}
.canal-card {
border: 2px solid var(--border);
border-radius: var(--radius-md);
padding: 10px 12px;
cursor: pointer;
background: var(--bg-surface);
transition: border-color 0.2s, background 0.2s;
}
.canal-card:hover { border-color: var(--accent); }
.canal-card.activo { border-color: var(--accent); background: var(--color-primary-muted); }
.canal-card-title {
font-weight: 700;
font-size: var(--text-sm);
color: var(--text-primary);
}
.canal-card.activo .canal-card-title { color: var(--accent-alt); }
.canal-card-sub {
font-size: var(--text-xs);
color: var(--text-faint);
margin-top: 2px;
}
/* ============================================================
ORIENTADOR DE DELIMITACIÓN (Micro Video)
============================================================ */
.panel-orientador {
margin-top: 10px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(251,146,60,.10), rgba(251,146,60,.04));
border: 1px solid rgba(251,146,60,.35);
border-left: 3px solid var(--color-warning);
border-radius: var(--radius-md);
}
.panel-orientador .orient-head {
font-size: var(--text-sm);
color: var(--text-primary);
line-height: 1.45;
margin-bottom: 10px;
}
.panel-orientador .orient-num {
display: inline-block;
margin-left: 6px;
padding: 1px 8px;
border-radius: 999px;
background: rgba(251,146,60,.15);
color: var(--color-warning);
font-size: var(--text-xs);
font-weight: 600;
}
.panel-orientador .orient-motivo {
font-size: var(--text-xs);
color: var(--text-faint);
margin-top: 4px;
}
.panel-orientador .orient-opts {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.panel-orientador .orient-opt {
padding: 8px 10px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm, 6px);
}
.panel-orientador .orient-opt-lbl {
font-weight: 700;
font-size: var(--text-sm);
color: var(--accent-alt);
}
.panel-orientador .orient-opt-detail {
font-size: var(--text-xs);
color: var(--text-secondary);
margin-top: 3px;
line-height: 1.4;
}
/* ============================================================
NIVEL FIJO (desde perfil)
============================================================ */
.nivel-fijo {
background: var(--bg-elevated);
border: 1px solid var(--accent-alt);
border-radius: var(--radius-md);
padding: 10px 14px;
margin-top: 8px;
display: flex;
align-items: center;
gap: 10px;
}
.nivel-fijo-label { color: var(--accent-alt); font-weight: 700; }
.nivel-fijo-detalle { color: var(--text-faint); font-size: var(--text-sm); }
/* ============================================================
SELECTOR DE NIVEL
============================================================ */
.nivel-selector {
display: flex;
gap: 10px;
margin: 8px 0 18px;
flex-wrap: wrap;
}
.nivel-card {
flex: 1;
min-width: 120px;
border: 2px solid var(--color-border-strong);
border-radius: var(--radius-md);
padding: 12px 14px;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
background: var(--color-surface);
text-align: center;
}
.nivel-card.activo { border-color: var(--accent); background: var(--color-primary-muted); }
.nivel-card:hover { border-color: var(--color-primary); }
.nivel-label {
font-weight: 700;
font-size: var(--text-base);
color: var(--text-primary);
margin-bottom: 4px;
}
.nivel-card.activo .nivel-label { color: var(--accent-alt); }
.nivel-detalle {
font-size: var(--text-xs);
color: var(--text-muted);
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 480px) {
h2 { font-size: 20px; }
.container { width: 95%; }
.container-wide { padding: 0 14px; }
input, textarea, select { padding: 8px; }
.flex { gap: 8px; }
.color-box { width: 40px; height: 40px; }
.img-box { width: 80px; height: 110px; }
}
/* ============================================================
FOOTER FIJO
============================================================ */
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: var(--bg-base);
padding: 10px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
z-index: 100;
}
.footer button,
.btn-generar-main {
width: 95%;
margin: auto;
display: block;
font-size: 17px;
padding: 15px;
border-radius: var(--radius-lg);
letter-spacing: 0.02em;
box-shadow: var(--shadow-glow);
}
/* ============================================================
UTILITIES
============================================================ */
.oculto { display: none; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }
.text-accent { color: var(--accent); }
.text-accent-alt { color: var(--accent-alt); }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mb-md { margin-bottom: 12px; }
.version-badge {
position: fixed;
top: 10px;
right: 10px;
font-size: var(--text-xs);
color: var(--text-muted);
background: var(--bg-surface);
padding: 3px 8px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
z-index: 999;
pointer-events: none;
}
.label-hint {
font-size: var(--text-xs);
color: var(--text-faint);
font-weight: normal;
margin-left: 8px;
text-decoration: none;
}
.label-hint:hover { color: var(--text-secondary); }
/* ============================================================
BOTONES TIPO LINK (.btn)
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: var(--accent-grad);
border: none;
padding: 11px 20px;
border-radius: var(--radius-md);
text-decoration: none;
color: var(--color-text-inverse);
font-family: var(--font);
font-weight: 700;
font-size: var(--text-sm);
cursor: pointer;
transition: opacity 0.2s, transform 0.1s;
white-space: nowrap;
margin: 0;
width: auto;
}
.btn:hover { opacity: 0.85; }
.btn:active { transform: scale(0.97); }
.btn.secondary {
background: transparent;
border: 1px solid var(--border);
color: var(--text-secondary);
}
.btn.secondary:hover { border-color: var(--accent); color: var(--text-primary); }
.btn.danger {
background: transparent;
border: 1px solid var(--danger-dim);
color: var(--color-danger);
}
.btn.danger:hover { border-color: var(--danger); color: white; }
.btn.sm { padding: 7px 14px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn.admin { background: linear-gradient(45deg, #7c3aed, #a855f7); color: white; }
.btn.lg { padding: 14px 28px; font-size: 16px; border-radius: var(--radius-lg); }
.btn.full { width: 100%; display: flex; margin-top: 10px; }
.empty-state {
text-align: center;
padding: 60px 0;
color: var(--text-faint);
}
.empty-state-icon {
margin-bottom: 20px;
opacity: 0.5;
}
.empty-state p {
font-size: var(--text-base);
color: var(--text-secondary);
margin-bottom: 4px;
}
.empty-state-sub {
font-size: var(--text-sm);
color: var(--text-muted);
margin-bottom: 20px;
}
.acciones {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 16px;
}
/* ============================================================
NAVEGACIÓN SUPERIOR
============================================================ */
.top-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--bg-surface);
}
.top-nav h2 {
margin: 0;
font-size: var(--text-lg);
background: var(--accent-grad-h);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.top-nav-actions {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
/* ============================================================
VIDEO RESULTADO
============================================================ */
.video-container { margin: 20px 0; }
.video-container video {
width: 100%;
max-width: 350px;
border-radius: var(--radius-lg);
}
/* ============================================================
LAYOUT CON SIDEBAR
============================================================ */
body.with-sidebar {
display: flex;
min-height: 100vh;
padding: 0;
text-align: left;
}
/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
width: 220px;
min-width: 220px;
background: var(--color-surface-2);
border-right: 1px solid var(--border-muted);
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 200;
overflow-y: auto;
}
.sidebar-logo {
display: flex;
align-items: center;
padding: 22px 20px 18px;
border-bottom: 1px solid var(--border-muted);
text-decoration: none;
color: var(--color-primary);
}
.sidebar-logo svg {
width: auto;
height: 28px;
display: block;
}
.sidebar-nav {
flex: 1;
padding: 10px 0;
display: flex;
flex-direction: column;
}
.sidebar-link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
color: var(--text-secondary);
text-decoration: none;
font-size: var(--text-sm);
font-weight: 500;
border-left: 3px solid transparent;
transition: color 0.15s, background 0.15s, border-color 0.15s;
white-space: nowrap;
}
.sidebar-link:hover {
color: var(--text-primary);
background: rgba(30, 26, 20, 0.04);
}
.sidebar-link.active {
color: var(--accent);
background: rgba(184, 70, 44, 0.07);
border-left-color: var(--accent);
}
.sidebar-link svg { flex-shrink: 0; opacity: 0.65; transition: opacity 0.15s; }
.sidebar-link:hover svg { opacity: 1; }
.sidebar-link.active svg { opacity: 1; }
.sidebar-divider {
height: 1px;
background: var(--border-muted);
margin: 8px 0;
}
.sidebar-footer {
padding: 14px 20px;
}
.sidebar-user {
font-size: 11px;
color: var(--text-faint);
margin-bottom: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── Contenido principal ────────────────────────────────────── */
.main-content {
flex: 1;
margin-left: 220px;
padding: 32px 40px 80px;
min-height: 100vh;
box-sizing: border-box;
min-width: 0;
}
/* ── Bottom nav (móvil) ─────────────────────────────────────── */
.bottom-nav { display: none; }
.drawer { display: none; }
.drawer-overlay { display: none; }
.auth-mobile-bar { display: none; }
.auth-sheet-handle-bar { display: none; }
/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
.sidebar { display: none; }
.main-content {
margin-left: 0;
padding: 16px 16px 80px;
}
.bottom-nav {
display: flex;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: var(--color-surface-2);
border-top: 1px solid var(--border-muted);
z-index: 200;
}
.bottom-nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 10px 0 12px;
color: var(--text-muted);
text-decoration: none;
font-size: 10px;
font-weight: 500;
transition: color 0.15s;
}
.bottom-nav-item:hover { color: var(--text-primary); }
.bottom-nav-item.active { color: var(--accent); }
.bottom-nav-item svg { opacity: 0.65; }
.bottom-nav-item.active svg { opacity: 1; }
/* Botón "Más" del bottom-nav */
.bottom-nav-more {
background: none; border: none; cursor: pointer; font-family: inherit;
}
/* ── Drawer ─────────────────────────────────────────── */
.drawer-overlay {
display: block;
position: fixed; inset: 0;
background: rgba(0,0,0,.55);
z-index: 300;
opacity: 0;
pointer-events: none;
transition: opacity .25s;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer {
display: block;
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--color-surface-2);
border-top: 1px solid var(--border);
border-radius: 18px 18px 0 0;
z-index: 301;
padding: 8px 0 env(safe-area-inset-bottom, 16px);
transform: translateY(100%);
transition: transform .3s cubic-bezier(.32,0,.67,0);
max-height: 85vh;
overflow-y: auto;
}
.drawer.open { transform: translateY(0); }
.drawer-handle {
width: 40px; height: 4px;
background: var(--border);
border-radius: 2px;
margin: 4px auto 16px;
}
.drawer-user {
display: flex; align-items: center; gap: 12px;
padding: 0 20px 16px;
border-bottom: 1px solid var(--border);
margin-bottom: 8px;
}
.drawer-avatar {
width: 40px; height: 40px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-alt));
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 700; color: var(--color-text-inverse); flex-shrink: 0;
}
.drawer-user-name { font-weight: 600; color: var(--text-primary); font-size: var(--text-sm); }
.drawer-user-email { font-size: var(--text-xs); color: var(--text-muted); }
.drawer-nav { display: flex; flex-direction: column; padding: 0 8px; }
.drawer-link {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px;
color: var(--text-secondary);
text-decoration: none;
font-size: var(--text-sm);
border-radius: var(--radius-sm);
transition: background .15s, color .15s;
}
.drawer-link:hover, .drawer-link.active {
background: var(--bg-elevated); color: var(--text-primary);
}
.drawer-link.active { color: var(--accent); }
.drawer-divider { height: 1px; background: var(--border); margin: 8px 16px; }
.drawer-link-logout { color: var(--text-muted); }
/* Página de creación: siempre mostrar bottom nav en móvil */
/* Dashboard: 2 columnas en móvil */
.video-grid {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.mv-grid-169 {
grid-template-columns: 1fr;
}
/* Result: video más ancho en móvil */
.video-result-wrap video { max-width: 100%; }
/* Result actions: quitar íconos SVG en pantallas pequeñas */
.result-actions .btn svg { display: none; }
.result-actions .btn { padding: 11px 10px; font-size: 12px; }
/* Bottom sheet ocupa ancho completo */
.bottom-sheet { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
/* Wizard nav: botones completos */
.wizard-nav-split .btn { font-size: 13px; }
}
/* ── Tablet (sidebar estrecha) ─────────────────────────────── */
@media (min-width: 769px) and (max-width: 1100px) {
.sidebar {
width: 68px;
min-width: 68px;
}
.sidebar-logo-text,
.sidebar-user,
.sidebar-badge-soon { display: none; }
.sidebar-logo { justify-content: center; padding: 22px 0 18px; }
.sidebar-logo-icon { font-size: 22px; }
.sidebar-link {
padding: 12px 0;
justify-content: center;
gap: 0;
}
.sidebar-label,
.sidebar-badge-soon,
.sidebar-user { display: none; }
.sidebar-footer { padding: 10px 0; }
.sidebar-link svg { opacity: 0.7; }
.main-content { margin-left: 68px; padding: 28px 28px 80px; }
}
/* ── Bottom-sheet: modal centrado en desktop ─────────────────── */
@media (min-width: 769px) {
.bottom-sheet-overlay {
align-items: center;
justify-content: center;
}
.bottom-sheet {
border-radius: var(--radius-lg);
max-width: 420px;
transform: translateY(20px);
opacity: 0;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.bottom-sheet-overlay.open .bottom-sheet {
transform: translateY(0);
opacity: 1;
}
.bottom-sheet-handle { display: none; }
}
/* Logout móvil — oculto en desktop (sidebar tiene logout) */
.mobile-logout { display: none; margin-top: 12px; }
@media (max-width: 768px) {
.mobile-logout { display: block; }
}
/* Títulos de página */
.page-title {
font-size: var(--text-xl);
font-weight: 700;
margin: 0 0 4px;
letter-spacing: -0.01em;
}
/* ============================================================
WIZARD DE CREACIÓN (index)
============================================================ */
.wizard-steps {
display: flex;
align-items: center;
margin: 0 0 28px;
}
.wizard-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
flex-shrink: 0;
}
.wizard-step-circle {
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid var(--border);
background: var(--bg-base);
color: var(--text-muted);
font-size: var(--text-sm);
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.wizard-step.active .wizard-step-circle {
border-color: var(--accent);
background: var(--accent);
color: var(--color-text-inverse);
box-shadow: 0 0 0 4px rgba(184, 70, 44, 0.15);
}
.wizard-step.done .wizard-step-circle {
border-color: var(--accent-alt);
background: var(--accent-alt);
color: var(--color-text-inverse);
}
.wizard-step-label {
font-size: 10px;
color: var(--text-muted);
font-weight: 500;
white-space: nowrap;
}
.wizard-step.active .wizard-step-label { color: var(--accent); font-weight: 600; }
.wizard-step.done .wizard-step-label { color: var(--accent-alt); }
.wizard-line {
flex: 1;
height: 2px;
background: var(--border);
margin: 0 6px 15px;
transition: background 0.3s;
}
.wizard-line.done { background: var(--accent-alt); }
.wizard-nav {
display: flex;
gap: 10px;
margin-top: 20px;
padding-bottom: 20px;
}
.wizard-nav-split .btn { flex: 1; justify-content: center; }
/* ============================================================
AUTH PAGE — split layout (login / register)
============================================================ */
body.auth-page {
padding: 0;
min-height: 100vh;
display: flex;
text-align: left;
}
.auth-split {
display: flex;
width: 100%;
min-height: 100vh;
}
/* ── Panel izquierdo — branding ─────────────────────────── */
.auth-brand {
flex: 1;
background: linear-gradient(150deg, var(--color-surface-2) 0%, var(--color-surface) 55%, var(--color-surface-2) 100%);
border-right: 1px solid var(--border-muted);
display: flex;
align-items: center;
justify-content: center;
padding: 48px;
position: relative;
overflow: hidden;
}
.auth-brand::before {
content: '';
position: absolute;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(184, 70, 44,0.07) 0%, transparent 70%);
top: 25%;
left: 35%;
pointer-events: none;
}
.auth-brand::after {
content: '';
position: absolute;
width: 250px;
height: 250px;
background: radial-gradient(circle, rgba(95, 110, 72,0.05) 0%, transparent 70%);
bottom: 20%;
right: 20%;
pointer-events: none;
}
.auth-brand-inner {
max-width: 400px;
position: relative;
z-index: 1;
}
.auth-logo {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.auth-logo-icon { font-size: 26px; }
.auth-logo-name {
font-size: 22px;
font-weight: 700;
background: var(--accent-grad-h);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.auth-tagline {
font-family: var(--font-display);
font-size: 38px;
font-weight: 500;
color: var(--text-primary);
line-height: 1.08;
margin: 0 0 16px;
letter-spacing: -0.02em;
}
/* ── Badge GRATIS + próximamente ── */
.auth-free-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.auth-free-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, var(--color-surface), var(--color-surface));
border-radius: 8px;
padding: 6px 16px;
box-shadow: 0 0 0 2px var(--accent-alt), 0 0 16px rgba(95, 110, 72,0.2);
flex-shrink: 0;
}
.auth-free-star {
font-size: 12px;
color: var(--accent-alt);
animation: spin-star 6s linear infinite;
}
@keyframes spin-star {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.2); }
100% { transform: rotate(360deg) scale(1); }
}
.auth-free-text {
font-size: 14px;
font-weight: 900;
letter-spacing: 0.1em;
background: var(--accent-grad-h);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.auth-prox {
font-size: 11px;
color: var(--text-muted);
font-style: italic;
}
/* ── Lista de features ── */
.auth-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 13px;
}
.auth-features li {
display: flex;
align-items: flex-start;
gap: 10px;
}
.auth-feature-icon {
width: 30px;
height: 30px;
border-radius: var(--radius-md);
background: rgba(184, 70, 44,0.08);
border: 1px solid rgba(184, 70, 44,0.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.auth-features strong {
display: block;
font-size: var(--text-sm);
color: var(--text-primary);
font-weight: 600;
margin-bottom: 1px;
}
.auth-features span {
font-size: 11px;
color: var(--text-muted);
line-height: 1.35;
}
/* ── Badges sidebar ── */
.sidebar-badge-new {
margin-left: auto;
background: var(--accent-alt);
color: var(--color-text-inverse);
font-size: 9px;
font-weight: 800;
padding: 2px 6px;
border-radius: 20px;
letter-spacing: 0.05em;
text-transform: uppercase;
flex-shrink: 0;
}
.sidebar-badge-soon {
margin-left: auto;
background: transparent;
border: 1px solid var(--color-border-strong);
color: var(--text-faint);
font-size: 9px;
font-weight: 700;
padding: 2px 6px;
border-radius: 20px;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.sidebar-link-soon {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
color: var(--text-faint);
font-size: var(--text-sm);
cursor: default;
opacity: 0.6;
}
.auth-tagline span {
background: var(--accent-grad-h);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Cómo funciona (3 pasos) ── */
.auth-steps {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
flex-wrap: nowrap;
}
.auth-step {
flex: 1;
text-align: center;
background: rgba(184, 70, 44,0.06);
border: 1px solid rgba(184, 70, 44,0.12);
border-radius: var(--radius-md);
padding: 10px 6px;
}
.auth-step-num {
width: 24px; height: 24px;
border-radius: 50%;
background: var(--accent-grad);
color: var(--color-text-inverse);
font-size: 12px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 6px;
}
.auth-step-lbl {
font-size: 10px;
color: var(--text-secondary);
line-height: 1.3;
font-weight: 600;
}
.auth-step-arrow {
color: var(--accent);
font-size: 14px;
flex-shrink: 0;
}
/* ── Chips ── */
.auth-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 20px;
}
.auth-chip {
background: rgba(184, 70, 44,0.06);
border: 1px solid rgba(184, 70, 44,0.15);
border-radius: 20px;
padding: 4px 10px;
font-size: 11px;
color: var(--text-secondary);
font-weight: 600;
white-space: nowrap;
}
/* ── Features 2 columnas ── */
.auth-features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.auth-fg-item {
display: flex;
align-items: flex-start;
gap: 8px;
background: rgba(30, 26, 20,0.03);
border: 1px solid var(--border-muted);
border-radius: var(--radius-md);
padding: 10px;
}
.auth-fg-item > span { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.auth-fg-item strong {
display: block;
font-size: 12px;
color: var(--text-primary);
font-weight: 700;
margin-bottom: 2px;
}
.auth-fg-item span {
font-size: 10px;
color: var(--text-muted);
line-height: 1.3;
}
/* ── Panel derecho — formulario ─────────────────────────── */
.auth-form-panel {
width: 460px;
min-width: 460px;
background: var(--bg-base);
display: flex;
align-items: center;
justify-content: center;
padding: 48px 44px;
box-sizing: border-box;
}
.auth-form-inner {
width: 100%;
max-width: 360px;
}
.auth-form-logo {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 36px;
}
.auth-form-logo-icon { font-size: 22px; }
.auth-form-logo-name {
font-size: 18px;
font-weight: 700;
background: var(--accent-grad-h);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.auth-form-title {
font-family: var(--font-display);
font-size: 30px;
font-weight: 500;
color: var(--text-primary);
margin: 0 0 6px;
letter-spacing: -0.015em;
}
.auth-form-subtitle {
font-size: var(--text-sm);
color: var(--text-muted);
margin: 0 0 28px;
line-height: 1.5;
}
.auth-form-inner label {
margin-top: 16px;
font-size: var(--text-sm);
color: var(--text-secondary);
font-weight: 600;
}
/* Input con botón de ver contraseña */
.input-wrap {
position: relative;
margin-top: 8px;
}
.input-wrap input { margin-top: 0; padding-right: 44px; }
/* Especificidad button.toggle-pwd > button para ganar al reset base */
button.toggle-pwd {
position: absolute;
right: 13px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
box-shadow: none;
color: var(--text-muted);
cursor: pointer;
padding: 4px;
width: auto;
margin: 0;
display: flex;
align-items: center;
font-size: 0;
transition: color 0.15s;
}
button.toggle-pwd:hover { color: var(--text-secondary); opacity: 1; transform: translateY(-50%); }
button.toggle-pwd:active { transform: translateY(-50%); }
.auth-submit {
width: 100%;
margin-top: 24px;
padding: 14px;
background: var(--accent-grad);
border: none;
border-radius: var(--radius-md);
color: var(--color-text-inverse);
font-family: var(--font);
font-size: var(--text-base);
font-weight: 700;
cursor: pointer;
letter-spacing: 0.01em;
transition: opacity 0.2s, transform 0.1s;
box-shadow: var(--shadow-glow);
}
.auth-submit:hover { opacity: 0.88; }
.auth-submit:active { transform: scale(0.98); }
.auth-footer-link {
text-align: center;
margin-top: 20px;
font-size: var(--text-sm);
color: var(--text-muted);
}
.auth-footer-link a { color: var(--accent); text-decoration: none; }
.auth-footer-link a:hover { text-decoration: underline; }
/* Divisor */
.auth-divider {
height: 1px;
background: var(--border-muted);
margin: 24px 0;
position: relative;
}
/* ── Mobile CTA bar (solo móvil) ────────────────────────── */
.auth-mobile-bar { display: none; }
/* ── Mobile: branding completo + sheet de login ─────────── */
@media (max-width: 768px) {
/* El split ocupa toda la pantalla para que el branding llene */
.auth-split {
display: block;
min-height: 100vh;
}
/* Branding: pantalla completa con scroll, espacio para el botón */
.auth-brand {
min-height: 100vh;
padding: 40px 28px 120px; /* 120px para no quedar tapado por el botón */
box-sizing: border-box;
}
.auth-brand-inner { max-width: 100%; gap: 14px; }
.auth-tagline { font-size: 1.75rem; }
/* El formulario se convierte en un bottom sheet */
.auth-form-panel {
position: fixed;
bottom: 0; left: 0; right: 0;
width: 100%;
min-width: 0;
max-height: 90vh;
overflow-y: auto;
background: var(--color-surface-2);
border-top: 1px solid var(--border);
border-radius: 20px 20px 0 0;
padding: 32px 28px 40px;
box-sizing: border-box;
display: block;
z-index: 400;
transform: translateY(100%);
transition: transform .35s cubic-bezier(.32,0,.67,0);
}
.auth-form-panel.open { transform: translateY(0); }
.auth-form-panel::before { content: none; }
.auth-sheet-handle-bar {
display: block;
width: 40px;
height: 4px;
background: var(--border);
border-radius: 2px;
margin: 0 auto 20px;
padding: 12px 30px; /* área táctil amplia */
background-clip: content-box;
cursor: pointer;
box-sizing: content-box;
}
.auth-form-inner { max-width: 100%; width: 100%; }
.auth-form-logo { display: none; }
/* Overlay oscuro detrás del sheet */
.auth-sheet-overlay {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,.55);
z-index: 399;
opacity: 0;
transition: opacity .3s;
}
.auth-sheet-overlay.open { display: block; opacity: 1; }
/* Barra sticky con botón de acceso */
.auth-mobile-bar {
display: flex;
position: fixed;
bottom: 0; left: 0; right: 0;
padding: 16px 24px env(safe-area-inset-bottom, 20px);
background: linear-gradient(to top, var(--color-bg) 60%, transparent);
z-index: 300;
gap: 12px;
align-items: center;
}
.auth-mobile-cta {
flex: 1;
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 16px 24px;
background: var(--accent-grad);
border: none; border-radius: var(--radius-lg);
color: var(--color-surface-2); font-size: 16px; font-weight: 800;
cursor: pointer; letter-spacing: -0.01em;
box-shadow: 0 4px 24px rgba(184, 70, 44,0.35);
}
.auth-mobile-cta-sub {
font-size: 12px; font-weight: 500;
color: rgba(7,20,34,0.7);
white-space: nowrap;
}
}
/* ============================================================
DASHBOARD
============================================================ */
.dash-subtitle {
font-size: var(--text-sm);
color: var(--text-faint);
margin: -16px 0 20px;
text-align: left;
}
.video-count {
font-size: var(--text-base);
color: var(--text-muted);
font-weight: 500;
margin-left: 4px;
}
.video-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
margin-top: 8px;
}
.mv-grid-169 {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}
.video-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.video-card:hover {
border-color: var(--accent);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(184, 70, 44, 0.12);
}
/* Thumbnail wrapper — needed for the play overlay */
.video-thumb-wrap {
position: relative;
display: block;
overflow: hidden;
text-decoration: none;
}
.video-thumb {
width: 100%;
aspect-ratio: 9/16;
object-fit: cover;
display: block;
background: var(--bg-elevated);
transition: transform 0.35s;
}
.video-thumb-wrap:hover .video-thumb { transform: scale(1.04); }
.video-thumb-placeholder {
width: 100%;
aspect-ratio: 9/16;
background: linear-gradient(135deg, var(--color-surface), var(--color-surface-2));
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
color: var(--border);
transition: transform 0.35s;
}
.video-thumb-wrap:hover .video-thumb-placeholder { transform: scale(1.04); }
/* Tarjetas 16:9 — thumbnail horizontal */
.video-card.fmt-169 .video-thumb,
.video-card.fmt-169 .video-thumb-placeholder {
aspect-ratio: 16/9;
}
/* Hover overlay con botón play */
.video-thumb-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
}
.video-thumb-wrap:hover .video-thumb-overlay { opacity: 1; }
.play-icon {
width: 52px;
height: 52px;
background: rgba(255, 255, 255, 0.92);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: var(--color-text-inverse);
padding-left: 3px;
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
transition: transform 0.15s;
}
.video-thumb-wrap:hover .play-icon { transform: scale(1.08); }
.video-card-body { padding: 8px 10px 10px; }
.video-card-name {
font-size: var(--text-sm);
color: var(--text-secondary);
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.video-card-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.video-card-date {
font-size: var(--text-xs);
color: var(--text-faint);
}
.video-card-btns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-top: 10px;
}
/* ── Botones de tarjeta de video ── */
.vcbtn {
position: relative;
height: 32px;
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: transparent;
font-family: var(--font); font-size: 11px; font-weight: 600;
text-decoration: none; cursor: pointer;
white-space: nowrap;
box-sizing: border-box;
transition: border-color .15s, color .15s, background .15s;
color: var(--text-muted);
}
.vcbtn--down { color: var(--color-primary); border-color: rgba(56,189,248,.25); }
.vcbtn--share { color: var(--color-success); border-color: rgba(52,211,153,.25); }
.vcbtn--scorm { color: var(--color-warning); border-color: rgba(251,146,60,.25); }
.vcbtn--del { color: var(--color-danger); border-color: rgba(248,113,113,.25); }
.vcbtn--down:hover { background: rgba(56,189,248,.1); border-color: var(--color-primary); }
.vcbtn--share:hover { background: rgba(52,211,153,.1); border-color: var(--color-success); }
.vcbtn--scorm:hover { background: rgba(251,146,60,.1); border-color: var(--color-warning); }
.vcbtn--del:hover { background: rgba(248,113,113,.1); border-color: var(--color-danger); }
/* Tooltip CSS — aparece en 200ms sin depender del navegador */
.vcbtn::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%; transform: translateX(-50%);
background: var(--color-surface); color: var(--color-text);
font-size: 10px; font-weight: 500; white-space: nowrap;
padding: 4px 8px; border-radius: 4px;
pointer-events: none; opacity: 0;
transition: opacity .15s;
z-index: 50;
}
.vcbtn:hover::after { opacity: 1; }
/* ── btn-sm legacy (mantener compatibilidad) ── */
.btn-sm {
display: inline-flex; align-items: center; justify-content: center;
height: 30px; padding: 0 10px;
border-radius: var(--radius-sm);
border: 1px solid var(--border); background: transparent;
font-family: var(--font); font-size: 11px; font-weight: 600;
text-decoration: none; cursor: pointer; box-sizing: border-box;
transition: border-color .15s, color .15s;
}
.btn-sm.primary { background: var(--accent-grad); color: var(--color-text-inverse); border-color: transparent; }
.btn-sm.secondary { color: var(--text-secondary); }
.btn-sm.secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm.danger { border-color: var(--color-danger); color: var(--color-danger); }
.btn-sm.danger:hover { border-color: var(--danger); color: var(--danger); }
.dash-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.dash-header h2 { margin: 0; }
.dash-user {
font-size: var(--text-sm);
color: var(--text-faint);
margin-bottom: 20px;
}
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.7);
z-index: 1000;
align-items: center;
justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px;
max-width: 320px;
width: 90%;
text-align: center;
}
.modal-box p {
color: var(--text-secondary);
margin: 8px 0 20px;
font-size: var(--text-sm);
}
.modal-btns { display: flex; gap: 10px; justify-content: center; }
/* ============================================================
RESULT PAGE
============================================================ */
/* Video con glow */
.video-result-wrap {
margin: 24px auto;
text-align: center;
}
.video-result-wrap video {
display: block;
margin: 0 auto;
border-radius: var(--radius-lg);
box-shadow: 0 0 48px rgba(184, 70, 44, 0.18), 0 8px 32px rgba(0,0,0,0.4);
}
/* 9:16: ancho máximo fijo para pantallas grandes, height controla en pantallas pequeñas */
.video-result-wrap.fmt-916 video {
width: auto;
max-width: min(340px, 100%);
max-height: 72vh;
}
/* 16:9: ancho completo del contenedor */
.video-result-wrap.fmt-169 video {
width: 100%;
max-width: 100%;
height: auto;
}
/* Botones de acción horizontales */
.result-actions {
display: flex;
gap: 10px;
margin-top: 20px;
}
.result-actions .btn { flex: 1; justify-content: center; }
/* Link secundario */
.result-secondary {
text-align: center;
margin-top: 14px;
}
.result-secondary a {
font-size: var(--text-sm);
color: var(--text-muted);
text-decoration: none;
transition: color 0.15s;
}
.result-secondary a:hover { color: var(--text-secondary); }
/* Bottom sheet — compartir */
.bottom-sheet-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: 400;
align-items: flex-end;
justify-content: center;
}
.bottom-sheet-overlay.open { display: flex; }
.bottom-sheet {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
padding: 8px 20px 32px;
width: 100%;
max-width: 480px;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.bottom-sheet-overlay.open .bottom-sheet { transform: translateY(0); }
.bottom-sheet-handle {
width: 36px;
height: 4px;
background: var(--border);
border-radius: 2px;
margin: 12px auto 20px;
}
.bottom-sheet-title {
font-size: var(--text-base);
font-weight: 700;
text-align: center;
margin-bottom: 16px;
}
/* ============================================================
PROCESSING PAGE — ETAPAS VISUALES
============================================================ */
.processing-stages {
display: flex;
justify-content: center;
gap: 0;
margin: 24px 0 20px;
}
.processing-stage {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex: 1;
max-width: 90px;
position: relative;
}
/* línea conectora entre etapas */
.processing-stage:not(:last-child)::after {
content: '';
position: absolute;
top: 15px;
left: calc(50% + 15px);
width: calc(100% - 30px);
height: 2px;
background: var(--border);
transition: background 0.4s;
}
.processing-stage.done:not(:last-child)::after { background: var(--accent-alt); }
.stage-icon {
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid var(--border);
background: var(--bg-base);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: var(--text-muted);
transition: border-color 0.4s, background 0.4s, color 0.4s;
position: relative;
z-index: 1;
}
.processing-stage.active .stage-icon {
border-color: var(--accent);
background: rgba(184, 70, 44,0.1);
color: var(--accent);
box-shadow: 0 0 0 3px rgba(184, 70, 44,0.12);
}
.processing-stage.done .stage-icon {
border-color: var(--accent-alt);
background: var(--accent-alt);
color: var(--color-text-inverse);
}
.stage-label {
font-size: 10px;
color: var(--text-muted);
white-space: nowrap;
font-weight: 500;
}
.processing-stage.active .stage-label { color: var(--accent); }
.processing-stage.done .stage-label { color: var(--accent-alt); }
.share-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 10px;
}
.share-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px;
border-radius: var(--radius-md);
font-family: var(--font);
font-size: var(--text-sm);
font-weight: 600;
text-decoration: none;
cursor: pointer;
border: none;
transition: opacity 0.2s;
}
.share-btn:hover { opacity: 0.85; }
.share-btn.whatsapp { background: #25D366; color: white; }
.share-btn.copy {
background: var(--bg-surface);
border: 1px solid var(--border);
color: var(--text-secondary);
}
.share-btn.copy.copiado { border-color: var(--accent-alt); color: var(--accent-alt); }
.share-section-title {
font-size: var(--text-xs);
color: var(--text-faint);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 20px 0 8px;
}
.feedback-box {
margin-top: 24px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
}
.feedback-title {
padding: 14px 16px;
font-size: var(--text-sm);
font-weight: 700;
color: var(--warning);
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 8px;
}
.feedback-title::-webkit-details-marker { display: none; }
.feedback-list { padding: 0 12px 12px; }
.feedback-item {
display: grid;
grid-template-columns: 70px 24px 1fr;
gap: 8px;
align-items: start;
padding: 10px 0;
border-bottom: 1px solid var(--border);
font-size: var(--text-sm);
}
.feedback-item:last-child { border-bottom: none; }
.feedback-escena {
background: var(--bg-elevated);
color: var(--color-primary);
font-size: var(--text-xs);
font-weight: 700;
padding: 3px 8px;
border-radius: 20px;
text-align: center;
white-space: nowrap;
}
.feedback-icono { font-size: 16px; padding-top: 1px; }
.feedback-msg { color: var(--color-text); line-height: 1.5; }
.feedback-hint {
font-size: var(--text-xs);
color: var(--text-faint);
padding: 8px 12px 12px;
margin: 0;
}
/* ============================================================
PROCESSING PAGE
============================================================ */
.processing-wrap {
text-align: center;
padding-top: 60px;
}
.progress-wrap {
background: var(--bg-surface);
border-radius: var(--radius-md);
height: 14px;
margin: 20px 0 6px;
overflow: hidden;
}
.progress-bar {
height: 100%;
border-radius: var(--radius-md);
background: linear-gradient(90deg, var(--accent), var(--accent-alt));
transition: width 0.6s ease;
width: 0%;
}
.progress-pct {
font-size: var(--text-sm);
color: var(--accent-alt);
font-weight: 700;
margin-bottom: 18px;
}
.spinner {
display: inline-block;
width: 13px;
height: 13px;
border: 2px solid var(--border);
border-top-color: var(--accent-alt);
border-radius: 50%;
animation: spin 0.8s linear infinite;
vertical-align: middle;
margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.log-box {
background: var(--bg-base);
border: 1px solid var(--bg-surface);
border-radius: var(--radius-md);
padding: 12px 14px;
text-align: left;
max-height: 220px;
overflow-y: auto;
margin-top: 4px;
}
.log-line {
font-size: var(--text-sm);
color: var(--text-muted);
padding: 3px 0;
border-bottom: 1px solid var(--bg-surface);
display: flex;
align-items: center;
gap: 8px;
}
.log-line:last-child { border-bottom: none; color: var(--accent-alt); }
.log-line .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--border);
flex-shrink: 0;
}
.log-line:last-child .dot { background: var(--accent-alt); }
.log-line.done .dot { background: var(--success); }
.log-line.done { color: var(--color-success); }
/* ============================================================
GUION EDITOR
============================================================ */
/* El editor ocupa todo el alto — quita padding-top del main-content */
body.page-guion .main-content { padding-top: 0; }
.guion-header {
position: sticky;
top: 0;
background: var(--bg-base);
border-bottom: 1px solid var(--border-muted);
padding: 12px 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 4px;
}
.guion-titulo {
font-size: var(--text-base);
font-weight: 700;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 300px;
}
.guion-meta {
font-size: var(--text-sm);
color: var(--text-faint);
margin-top: 2px;
}
.escenas-lista {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 16px;
}
.scene-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: border-color 0.2s;
}
.scene-card.dragging { opacity: 0.5; border-color: var(--accent); }
.scene-card.drag-over { border-color: var(--accent-alt); border-style: dashed; }
.scene-header {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px 8px;
border-bottom: 1px solid var(--border-muted);
}
.scene-num {
background: var(--bg-elevated);
color: var(--color-primary);
font-size: var(--text-xs);
font-weight: 700;
padding: 3px 10px;
border-radius: 20px;
flex-shrink: 0;
}
.scene-bloques { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.scene-actions { display: flex; gap: 4px; margin-left: auto; }
.scene-btn {
background: transparent;
border: 1px solid var(--border);
color: var(--text-muted);
border-radius: var(--radius-sm);
padding: 4px 8px;
font-size: var(--text-sm);
cursor: pointer;
width: 30px;
transition: border-color 0.15s, color 0.15s;
font-family: var(--font);
}
.scene-btn:hover { border-color: var(--accent); color: white; }
.scene-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.scene-body { padding: 12px 14px; }
.scene-section-label {
font-size: var(--text-xs);
color: var(--text-faint);
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 10px 0 5px;
}
.scene-section-label:first-child { margin-top: 0; }
.scene-voz {
width: 100%;
background: var(--bg-elevated);
border: 1px solid var(--color-surface-2);
color: var(--text-primary);
border-radius: var(--radius-md);
padding: 10px 12px;
font-size: var(--text-sm);
font-family: var(--font);
line-height: 1.6;
resize: vertical;
min-height: 80px;
box-sizing: border-box;
}
.scene-voz:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(184, 70, 44,0.10); }
.bloques-editor { display: flex; flex-direction: column; gap: 6px; }
.bloque-item {
background: var(--bg-elevated);
border: 1px solid var(--color-surface-2);
border-radius: var(--radius-md);
padding: 8px 12px;
}
.bloque-tipo { font-size: var(--text-xs); color: var(--color-primary); font-weight: 700; margin-bottom: 4px; }
.bloque-contenido { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; }
.drag-handle {
cursor: grab;
color: var(--border);
font-size: 16px;
padding: 0 4px;
flex-shrink: 0;
}
.drag-handle:active { cursor: grabbing; }
.add-scene-btn {
width: 100%;
background: transparent;
border: 1px dashed var(--border);
color: var(--text-faint);
border-radius: var(--radius-md);
padding: 14px;
font-size: var(--text-sm);
font-family: var(--font);
cursor: pointer;
margin-top: 6px;
transition: border-color 0.2s, color 0.2s;
}
.add-scene-btn:hover { border-color: var(--accent); color: var(--accent); }
/* ============================================================
FLASH MESSAGES
============================================================ */
.flash-wrap { padding: 0 16px; margin-bottom: 4px; }
.flash {
padding: 12px 16px;
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: 500;
margin-bottom: 8px;
}
.flash-success { background: rgba(95, 110, 72, 0.10); border: 1px solid var(--color-success); color: var(--color-success); }
.flash-error { background: rgba(156, 58, 42, 0.10); border: 1px solid var(--color-danger); color: var(--color-danger); }
.toast-stack {
position: fixed; top: 24px; right: 24px;
display: flex; flex-direction: column; gap: 8px;
z-index: 9999; pointer-events: none;
}
.toast-stack .flash {
pointer-events: auto;
min-width: 240px; max-width: 360px;
box-shadow: 0 4px 16px rgba(0,0,0,.5);
animation: toast-in .18s ease;
transition: opacity .3s ease;
}
.toast-stack .flash.toast-out { opacity: 0; }
@keyframes toast-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
PERFIL PAGE
============================================================ */
/* Header */
.perfil-header {
display: flex;
align-items: center;
gap: 14px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 18px;
margin-bottom: 10px;
}
.perfil-avatar {
width: 52px; height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-alt));
display: flex; align-items: center; justify-content: center;
font-size: 22px; font-weight: 700; color: var(--color-text-inverse);
flex-shrink: 0;
}
.perfil-header-info { flex: 1; min-width: 0; }
.perfil-nombre-display {
font-size: var(--text-base);
font-weight: 700;
color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.perfil-email-display {
font-size: var(--text-xs);
color: var(--text-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.perfil-inst-display {
font-size: var(--text-xs);
color: var(--text-secondary);
margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plan-badge {
font-size: 10px; font-weight: 800;
padding: 3px 8px;
border-radius: 20px;
flex-shrink: 0;
letter-spacing: 0.06em;
}
.plan-free { background: rgba(95, 110, 72, 0.10); color: var(--color-success); border: 1px solid var(--color-success); }
.plan-pro { background: #1a1a2e; color: var(--accent-alt); border: 1px solid var(--accent-alt); }
/* Stats row */
.perfil-stats {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 18px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
margin-bottom: 16px;
}
.perfil-stat { display: flex; flex-direction: column; align-items: center; }
.perfil-stat-num { font-size: var(--text-base); font-weight: 700; color: var(--accent-alt); }
.perfil-stat-lbl { font-size: var(--text-xs); color: var(--text-muted); }
.perfil-stat-sep { width: 1px; height: 28px; background: var(--border); }
/* Voice grid — 3 columns */
.p-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
/* Firma preview in wizard */
.firma-preview {
font-size: var(--text-sm);
color: var(--text-secondary);
padding: 10px 14px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.firma-preview strong { color: var(--text-primary); }
.firma-preview .label-hint { margin-left: auto; }
.p-section {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 18px;
margin-bottom: 16px;
text-align: left;
}
.p-section h3 {
color: var(--accent-alt);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 12px;
}
.p-label {
font-size: var(--text-sm);
color: var(--text-secondary);
display: block;
margin-bottom: 6px;
font-weight: 500;
}
.p-label.spaced { margin: 12px 0 6px; }
.p-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.p-card {
border: 2px solid var(--border);
border-radius: var(--radius-md);
padding: 12px;
cursor: pointer;
display: flex;
align-items: flex-start;
gap: 8px;
text-align: left;
transition: border-color 0.2s;
box-sizing: border-box;
}
.p-card input { display: none; }
.p-card.activo { border-color: var(--accent); background: var(--color-surface); }
.p-card .p-icon { font-size: 18px; flex-shrink: 0; }
.p-card .p-nombre { font-weight: 700; font-size: var(--text-sm); color: var(--text-primary); }
.p-card.activo .p-nombre { color: var(--accent-alt); }
.p-card .p-desc { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.3; margin-top: 2px; }
.campo-extra { display: none; margin-top: 12px; }
.campo-extra.visible { display: block; }
.hint {
font-size: var(--text-xs);
color: var(--text-faint);
margin: 4px 0 0;
}
/* ============================================================
INVESTIGACIÓN
============================================================ */
/* Hero */
.inv-hero {
text-align: center;
padding: 28px 16px 20px;
}
.inv-hero-icon { font-size: 40px; margin-bottom: 10px; }
.inv-hero-title {
font-size: var(--text-xl);
font-weight: 700;
color: var(--text-primary);
margin: 0 0 8px;
}
.inv-hero-sub {
font-size: var(--text-sm);
color: var(--text-secondary);
max-width: 420px;
margin: 0 auto;
line-height: 1.5;
}
/* Preview cards (before consent) */
.inv-momentos-preview {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.inv-preview-card {
display: flex;
align-items: center;
gap: 12px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 12px 16px;
}
.inv-preview-icon { font-size: 20px; flex-shrink: 0; }
.inv-preview-num { font-size: var(--text-xs); color: var(--text-muted); }
.inv-preview-titulo { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.inv-preview-tiempo { font-size: var(--text-xs); color: var(--text-faint); margin-left: auto; flex-shrink: 0; }
/* Consent body */
.inv-consent-body {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.7;
padding: 4px 0 12px;
border-bottom: 1px solid var(--border);
margin-bottom: 14px;
}
/* Consent checkbox */
.inv-check-label {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: var(--text-sm);
color: var(--text-secondary);
cursor: pointer;
line-height: 1.5;
}
.inv-check-label input[type="checkbox"] {
width: 18px; height: 18px;
flex-shrink: 0;
margin-top: 2px;
accent-color: var(--accent);
}
/* Timeline */
.inv-timeline {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 20px;
}
.inv-momento {
display: flex;
gap: 16px;
padding: 0 0 20px;
}
.inv-momento-track {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
}
.inv-dot {
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700;
border: 2px solid var(--border);
background: var(--bg-surface);
color: var(--text-muted);
flex-shrink: 0;
}
.inv-done .inv-dot { border-color: var(--accent-alt); background: rgba(95, 110, 72, 0.10); color: var(--accent-alt); }
.inv-open .inv-dot { border-color: var(--accent); background: var(--color-surface); color: var(--accent); }
.inv-locked.inv-dot { opacity: 0.5; }
.inv-line {
width: 2px;
flex: 1;
background: var(--border);
margin: 4px 0;
min-height: 16px;
}
.inv-done .inv-line { background: var(--accent-alt); }
.inv-momento-body {
flex: 1;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 14px 16px;
}
.inv-done .inv-momento-body { border-color: var(--color-success); }
.inv-open .inv-momento-body { border-color: var(--accent); }
.inv-locked .inv-momento-body { opacity: 0.6; }
.inv-momento-header {
display: flex;
align-items: flex-start;
gap: 12px;
}
.inv-momento-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.inv-momento-num { font-size: var(--text-xs); color: var(--text-muted); }
.inv-momento-titulo { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); }
.inv-momento-desc { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.inv-momento-meta { margin-left: auto; text-align: right; flex-shrink: 0; }
.inv-fecha { font-size: var(--text-xs); color: var(--text-faint); margin-top: 4px; }
.inv-tiempo { font-size: var(--text-xs); color: var(--text-faint); margin-top: 4px; }
/* Badges */
.inv-badge {
font-size: 10px; font-weight: 700;
padding: 3px 8px; border-radius: 20px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.inv-badge-done { background: rgba(95, 110, 72, 0.10); color: var(--accent-alt); border: 1px solid var(--color-success); }
.inv-badge-open { background: var(--color-surface); color: var(--accent); border: 1px solid var(--accent); }
.inv-badge-locked { background: var(--bg-surface); color: var(--text-faint); border: 1px solid var(--border); }
.inv-footer-note {
font-size: var(--text-xs);
color: var(--text-faint);
text-align: center;
padding: 8px 0 20px;
}
.inv-footer-note a { color: var(--text-muted); }
/* ── Formulario de preguntas ── */
.inv-form-header { margin-bottom: 20px; }
.inv-back {
font-size: var(--text-xs);
color: var(--text-muted);
text-decoration: none;
display: inline-block;
margin-bottom: 14px;
}
.inv-back:hover { color: var(--text-primary); }
.inv-form-meta {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 14px;
}
.inv-form-icon { font-size: 28px; flex-shrink: 0; }
.inv-form-num { font-size: var(--text-xs); color: var(--text-muted); }
.inv-form-titulo{ font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); margin: 2px 0 4px; }
.inv-form-desc { font-size: var(--text-sm); color: var(--text-secondary); }
.inv-form-progress {
display: flex;
gap: 6px;
padding: 4px 0 8px;
}
.inv-prog-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--border);
transition: background 0.2s;
}
.inv-prog-dot.active { background: var(--accent); }
.inv-preg-num { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: 8px; }
.inv-preg-texto{
font-size: var(--text-base);
font-weight: 600;
color: var(--text-primary);
line-height: 1.4;
margin-bottom: 18px;
}
/* Radio options */
.inv-opciones { display: flex; flex-direction: column; gap: 8px; }
.inv-opcion {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 2px solid var(--border);
border-radius: var(--radius-md);
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.inv-opcion input { display: none; }
.inv-opcion:hover { border-color: var(--accent); background: var(--color-surface); }
.inv-opcion.activo { border-color: var(--accent); background: var(--color-surface); }
.inv-opcion-texto { font-size: var(--text-sm); color: var(--text-primary); }
.inv-opcion.activo .inv-opcion-texto { color: var(--accent-alt); font-weight: 600; }
/* Scale */
.inv-escala-labels {
display: flex;
justify-content: space-between;
font-size: var(--text-xs);
color: var(--text-muted);
margin-bottom: 8px;
}
.inv-escala { display: flex; gap: 8px; }
.inv-escala-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
}
.inv-escala-item input { display: none; }
.inv-escala-num {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
border: 2px solid var(--border);
border-radius: var(--radius-md);
font-size: var(--text-base);
font-weight: 700;
color: var(--text-muted);
transition: all 0.15s;
}
.inv-escala-item:hover .inv-escala-num { border-color: var(--accent); color: var(--accent); }
.inv-escala-item.activo .inv-escala-num { border-color: var(--accent); background: var(--color-surface); color: var(--accent-alt); }
.inv-textarea {
width: 100%;
box-sizing: border-box;
font-size: var(--text-sm);
resize: vertical;
}
.inv-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
/* ── Sidebar: investigación aislada ── */
.sidebar-link-research {
opacity: 0.55;
font-size: var(--text-xs);
}
.sidebar-link-research:hover,
.sidebar-link-research.active { opacity: 1; color: var(--accent-alt); }
/* ── Admin: panel de análisis ── */
.inv-admin {
margin-top: 28px;
border-top: 2px dashed var(--border);
padding-top: 20px;
}
.inv-admin-header {
display: flex; align-items: center; gap: 10px;
margin-bottom: 16px;
font-size: 20px;
}
.inv-admin-title { font-size: var(--text-base); font-weight: 700; color: var(--text-primary); }
.inv-admin-sub { font-size: var(--text-xs); color: var(--text-muted); }
/* Stats row */
.inv-stats-row {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
margin-bottom: 16px;
}
.inv-stat-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 12px 10px; text-align: center;
}
.inv-stat-num { font-size: var(--text-xl); font-weight: 800; color: var(--accent-alt); }
.inv-stat-lbl { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
/* Momento data accordion */
.inv-momento-data {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
margin-bottom: 12px;
overflow: hidden;
}
.inv-md-summary {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px;
cursor: pointer; list-style: none;
font-size: var(--text-sm);
}
.inv-md-summary::-webkit-details-marker { display: none; }
.inv-md-icon { font-size: 18px; }
.inv-md-titulo { font-weight: 700; color: var(--text-primary); }
.inv-export-btn {
font-size: var(--text-xs);
color: var(--accent);
border: 1px solid var(--accent);
border-radius: var(--radius-sm);
padding: 3px 8px;
text-decoration: none;
margin-left: 8px;
white-space: nowrap;
}
.inv-export-btn:hover { background: var(--color-surface); }
.inv-empty { color: var(--text-muted); font-size: var(--text-sm); padding: 12px 16px; }
.inv-empty-small { color: var(--text-faint); font-size: var(--text-xs); padding: 4px 0; }
/* Aggregation section */
.inv-agg-section { padding: 0 16px 12px; border-top: 1px solid var(--border); }
.inv-agg-titulo {
font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
letter-spacing: 0.07em; color: var(--accent-alt);
margin: 14px 0 10px;
}
.inv-agg-pregunta { margin-bottom: 16px; }
.inv-agg-q {
font-size: var(--text-sm); color: var(--text-secondary);
margin-bottom: 8px; font-style: italic;
}
/* Bar chart (radio) */
.inv-bar-row {
display: flex; align-items: center; gap: 8px;
margin-bottom: 5px;
}
.inv-bar-label {
font-size: var(--text-xs); color: var(--text-muted);
min-width: 140px; max-width: 140px; flex-shrink: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inv-bar-track {
flex: 1; height: 8px;
background: var(--bg-elevated);
border-radius: 4px; overflow: hidden;
}
.inv-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.4s; }
.inv-bar-cnt { font-size: var(--text-xs); color: var(--text-muted); min-width: 18px; text-align: right; }
/* Column chart (escala) */
.inv-escala-agg { }
.inv-escala-avg { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: 10px; }
.inv-escala-bars { display: flex; align-items: flex-end; gap: 8px; height: 70px; }
.inv-escala-bar-col {
flex: 1; display: flex; flex-direction: column;
align-items: center; height: 100%;
}
.inv-escala-bar-wrap {
flex: 1; width: 100%; display: flex;
align-items: flex-end; background: var(--bg-elevated);
border-radius: 4px; overflow: hidden;
}
.inv-escala-bar-fill {
width: 100%; background: var(--accent);
border-radius: 4px 4px 0 0; transition: height 0.4s;
}
.inv-escala-bar-num { font-size: 10px; color: var(--text-muted); margin-top: 3px; }
.inv-escala-bar-cnt { font-size: 10px; color: var(--accent-alt); font-weight: 700; }
/* Text answers */
.inv-text-lista { display: flex; flex-direction: column; gap: 6px; }
.inv-text-item {
font-size: var(--text-xs); color: var(--text-secondary);
background: var(--bg-elevated);
border-left: 2px solid var(--accent);
padding: 6px 10px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
line-height: 1.5;
}
/* Individual responses table */
.inv-tabla-wrap { padding: 0 16px 16px; border-top: 1px solid var(--border); }
.inv-tabla {
width: 100%; border-collapse: collapse;
font-size: var(--text-xs); text-align: left;
margin-top: 10px;
}
.inv-tabla th {
color: var(--text-muted); font-weight: 700;
padding: 6px 10px; border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.inv-tabla td {
padding: 7px 10px; border-bottom: 1px solid var(--border);
color: var(--text-secondary); vertical-align: top;
}
.inv-tabla tr:last-child td { border-bottom: none; }
.inv-tabla tr:hover td { background: var(--bg-elevated); }
.inv-td-resp { max-width: 160px; }
@media (max-width: 500px) {
.inv-stats-row { grid-template-columns: 1fr 1fr; }
.inv-bar-label { min-width: 100px; max-width: 100px; }
}
/* ── Registro: dominio bloqueado ── */
.auth-dominio-bloqueado {
background: var(--color-surface);
border: 1px solid var(--accent);
border-radius: var(--radius-lg);
padding: 20px;
text-align: center;
margin-bottom: 8px;
}
.auth-dominio-icon { font-size: 32px; margin-bottom: 10px; }
.auth-dominio-bloqueado p {
font-size: var(--text-sm); color: var(--text-secondary);
margin: 0 0 8px; line-height: 1.5;
}
.auth-dominio-hint { color: var(--text-muted) !important; font-size: var(--text-xs) !important; }
/* ── Verificación pendiente ── */
.verif-icon { font-size: 48px; text-align: center; margin: 8px 0 16px; }
.verif-steps {
display: flex; flex-direction: column; gap: 10px;
margin: 20px 0;
}
.verif-step {
display: flex; align-items: center; gap: 12px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 12px 14px;
font-size: var(--text-sm); color: var(--text-secondary);
text-align: left;
}
.verif-step-num {
width: 24px; height: 24px; border-radius: 50%;
background: var(--accent); color: var(--color-text-inverse);
font-weight: 700; font-size: 12px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.verif-hint {
font-size: var(--text-xs); color: var(--text-muted);
text-align: center; margin-top: 12px;
}
.verif-hint a { color: var(--accent); }
/* ============================================================
DASHBOARD
============================================================ */
/* Bienvenida */
.dash-welcome {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 20px 0 16px;
}
.dash-saludo {
font-size: var(--text-sm);
color: var(--text-muted);
margin-bottom: 2px;
}
.dash-nombre {
font-size: var(--text-xl);
font-weight: 800;
color: var(--text-primary);
margin: 0 0 4px;
line-height: 1.2;
}
.dash-inst {
font-size: var(--text-xs);
color: var(--text-muted);
}
/* Stats */
.dash-stats {
display: flex;
align-items: center;
gap: 0;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 14px 20px;
margin-bottom: 14px;
}
.dash-stat {
flex: 1;
text-align: center;
}
.dash-stat-num {
font-size: 28px;
font-weight: 800;
color: var(--accent-alt);
line-height: 1;
margin-bottom: 4px;
}
.dash-stat-num-sm { font-size: 20px; }
.dash-stat-lbl {
font-size: var(--text-xs);
color: var(--text-muted);
line-height: 1.2;
}
.dash-stat-sep {
width: 1px;
height: 36px;
background: var(--border);
flex-shrink: 0;
}
/* CTA crear video */
.dash-cta {
display: flex;
align-items: center;
gap: 14px;
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface) 100%);
border: 1px solid var(--accent);
border-radius: var(--radius-lg);
padding: 16px 18px;
text-decoration: none;
margin-bottom: 14px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.dash-cta:hover {
border-color: var(--accent-alt);
box-shadow: 0 0 0 3px rgba(184, 70, 44, 0.10);
}
.dash-cta-icon {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--accent-grad);
display: flex; align-items: center; justify-content: center;
color: var(--color-text-inverse);
flex-shrink: 0;
}
.dash-cta-title {
font-size: var(--text-base);
font-weight: 700;
color: var(--text-primary);
}
.dash-cta-sub {
font-size: var(--text-xs);
color: var(--text-muted);
margin-top: 2px;
}
.dash-cta-arrow {
margin-left: auto;
color: var(--accent);
flex-shrink: 0;
}
/* Aviso perfil incompleto */
.dash-perfil-aviso {
display: flex;
align-items: center;
gap: 8px;
background: rgba(200, 144, 43, 0.10);
border: 1px solid var(--color-warning);
border-radius: var(--radius-md);
padding: 10px 14px;
font-size: var(--text-xs);
color: var(--color-warning);
text-decoration: none;
margin-bottom: 20px;
}
.dash-perfil-aviso svg { flex-shrink: 0; color: var(--color-warning); }
.dash-aviso-link {
margin-left: auto;
font-weight: 700;
white-space: nowrap;
color: var(--color-warning);
}
/* Sección videos */
.dash-section-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.dash-section-title {
font-size: var(--text-sm);
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0;
}
.dash-section-count {
background: var(--bg-surface);
border: 1px solid var(--border);
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: 20px;
}
/* ── Stats grid 2×2 ── */
.dash-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 14px;
}
.dash-stat-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 16px 14px;
text-align: center;
}
.dash-stat-icon { font-size: 20px; margin-bottom: 6px; }
.dash-stat-num {
font-size: 26px; font-weight: 800;
color: var(--accent-alt); line-height: 1; margin-bottom: 4px;
}
.dash-stat-num.dash-stat-empty { color: var(--text-faint); font-size: 20px; }
.dash-stat-lbl { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.3; }
/* ── Accesos rápidos ── */
.dash-accesos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 6px;
}
.dash-acceso {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-secondary);
text-decoration: none;
transition: border-color 0.15s, color 0.15s;
}
.dash-acceso:hover { border-color: var(--accent); color: var(--text-primary); }
/* ── Video card: duración ── */
.video-card-dur {
font-size: var(--text-xs);
color: var(--text-muted);
margin: 2px 0 6px;
}
/* ============================================================
SELECTOR DE VOCES
============================================================ */
.voice-cards-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
margin-top: 8px;
}
.voice-card {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 7px 4px 5px;
cursor: pointer;
text-align: center;
transition: border-color 0.15s, background 0.15s;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.voice-card input { display: none; }
.voice-card:hover { border-color: var(--accent); background: var(--color-surface); }
.voice-card.activo { border-color: var(--accent); background: var(--color-surface); }
.voice-flag {
font-size: 20px;
line-height: 1.1;
display: block;
min-height: 22px;
}
.voice-name {
font-size: 10px;
font-weight: 600;
color: var(--text-muted);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.voice-card.activo .voice-name { color: var(--accent-alt); }
.voice-play-btn {
background: none;
border: 1px solid var(--border);
border-radius: 20px;
color: var(--text-faint);
font-size: 8px;
padding: 1px 6px;
margin-top: 2px;
cursor: pointer;
width: auto;
transition: border-color 0.15s, color 0.15s;
line-height: 1.7;
}
.voice-play-btn:hover { border-color: var(--accent); color: var(--accent); }
.voice-play-btn.playing { border-color: var(--accent-alt); color: var(--accent-alt); }
@media (max-width: 500px) {
.voice-cards-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 380px) {
.voice-cards-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ============================================================
SELECTOR DE MÚSICA
============================================================ */
.music-cards-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
margin: 8px 0 4px;
}
.music-card {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 8px 4px 5px;
cursor: pointer;
text-align: center;
transition: border-color 0.15s, background 0.15s;
display: flex; flex-direction: column;
align-items: center; gap: 2px;
}
.music-card:hover { border-color: var(--accent); background: var(--color-surface); }
.music-card.activo { border-color: var(--accent); background: var(--color-surface); }
.music-icon { font-size: 18px; line-height: 1.2; }
.music-name {
font-size: 10px; font-weight: 600;
color: var(--text-muted); line-height: 1.2;
}
.music-card.activo .music-name { color: var(--accent-alt); }
@media (max-width: 500px) {
.music-cards-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 380px) {
.music-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
ADMIN REDISEÑADO
============================================================ */
.admin-header {
display: flex; justify-content: space-between;
align-items: flex-start; gap: 12px;
padding: 20px 0 16px;
}
.admin-version { font-size: var(--text-xs); color: var(--text-muted); }
.admin-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-pill {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 6px 14px;
font-size: var(--text-xs);
color: var(--text-secondary);
}
.admin-pill strong { color: var(--accent-alt); }
/* Admin tabla usuarios */
.admin-stats-row {
display: grid; grid-template-columns: repeat(4,1fr);
gap: 10px; margin-bottom: 16px;
}
.admin-stat-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 14px; text-align: center;
}
.admin-stat-num { font-size: 26px; font-weight: 800; color: var(--accent-alt); }
.admin-stat-lbl { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.admin-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-filtro-btn {
padding: 5px 14px; border-radius: 20px;
font-size: var(--text-xs); font-weight: 600;
background: var(--bg-surface); border: 1px solid var(--border);
color: var(--text-muted); text-decoration: none;
transition: border-color 0.15s, color 0.15s;
}
.admin-filtro-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.admin-filtro-btn.activo { border-color: var(--accent); color: var(--accent); background: var(--color-surface); }
.admin-tabla { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.admin-tabla th {
padding: 10px 12px; text-align: left;
color: var(--text-muted); font-weight: 700;
border-bottom: 1px solid var(--border);
background: var(--bg-elevated);
white-space: nowrap;
}
.admin-tabla td {
padding: 10px 12px; border-bottom: 1px solid var(--border);
color: var(--text-secondary); vertical-align: middle;
}
.admin-tabla tr:last-child td { border-bottom: none; }
.admin-tabla tr:hover td { background: var(--bg-elevated); }
.admin-user-cell { display: flex; align-items: center; gap: 10px; }
.admin-avatar {
width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, var(--accent), var(--accent-alt));
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; color: var(--color-text-inverse);
}
.admin-user-name { font-weight: 600; color: var(--text-primary); font-size: var(--text-xs); }
.admin-user-inst { font-size: 10px; color: var(--text-faint); }
.admin-td-email { font-size: 10px; color: var(--text-muted); }
.admin-td-center { text-align: center; font-weight: 700; color: var(--text-primary); }
.admin-td-date { font-size: 10px; white-space: nowrap; }
.admin-badge-ok { font-size: 10px; color: var(--color-success); font-weight: 700; }
.admin-badge-warn { font-size: 10px; color: var(--color-warning); font-weight: 700; }
.admin-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.admin-maestrias-form { display: flex; align-items: center; }
.admin-maestrias-checks { display: flex; gap: 4px; }
.admin-maestria-chk {
display: flex; align-items: center; gap: 2px;
font-size: 15px; cursor: pointer; opacity: 0.35;
transition: opacity .15s;
}
.admin-maestria-chk:has(input:checked) { opacity: 1; }
.admin-select-plan {
font-size: 11px; padding: 4px 8px; border-radius: var(--radius-sm);
background: var(--bg-elevated); border: 1px solid var(--border);
color: var(--text-secondary); cursor: pointer; margin: 0;
width: auto;
}
.admin-legend { display: flex; gap: 14px; margin-bottom: 12px; }
.admin-legend-item { font-size: var(--text-xs); font-weight: 600; }
/* Template cards */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 10px; }
.tpl-card {
border: 1px solid var(--border); border-radius: var(--radius-md);
overflow: hidden; background: var(--bg-elevated);
}
.tpl-approved, .tpl-card.tpl-approved { border-color: var(--color-success); }
.tpl-deleted, .tpl-card.tpl-deleted { border-color: var(--danger); opacity: 0.6; }
.tpl-pending, .tpl-card.tpl-pending { border-color: var(--color-warning); }
.tpl-no-demo {
aspect-ratio: 4/5; display: flex; align-items: center;
justify-content: center; color: var(--text-faint);
font-size: var(--text-xs); background: var(--bg-base);
}
.tpl-name {
font-size: 10px; padding: 6px 8px; color: var(--text-secondary);
font-weight: 600; text-transform: capitalize;
}
.tpl-actions { display: flex; gap: 4px; padding: 0 6px 8px; }
.tpl-btn {
flex: 1; padding: 5px; border: none; border-radius: 4px;
font-size: 11px; font-weight: 700; cursor: pointer;
}
.tpl-btn-ok { background: rgba(95, 110, 72, 0.15); color: var(--color-success); }
.tpl-btn-del { background: rgba(156, 58, 42, 0.15); color: var(--color-danger); }
.tpl-btn-restore { background: var(--color-surface-2); color: var(--color-primary); }
@media (max-width: 500px) {
.admin-stats-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 360px) {
.admin-stats-row { grid-template-columns: 1fr; }
}
/* ── Admin tabs ── */
.admin-tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--border);
margin-bottom: 20px;
flex-wrap: wrap;
}
.admin-tab {
padding: 8px 16px;
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-muted);
text-decoration: none;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
border: 1px solid transparent;
border-bottom: none;
transition: color 0.15s, background 0.15s;
margin-bottom: -1px;
}
.admin-tab:hover { color: var(--text-primary); background: var(--bg-surface); }
.admin-tab.active {
color: var(--accent-alt);
background: var(--bg-surface);
border-color: var(--border);
border-bottom-color: var(--bg-surface);
}
/* ── Progreso generación guión ─────────────────────────────── */
.generar-progress {
margin: 12px 0 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.generar-progress-wrap {
background: var(--bg-surface);
border-radius: var(--radius-md);
height: 6px;
overflow: hidden;
}
.generar-progress-bar {
height: 100%;
border-radius: var(--radius-md);
background: linear-gradient(90deg, var(--accent), var(--accent-alt));
transition: width 0.4s ease;
width: 0%;
}
.generar-progress-label {
font-size: var(--text-xs);
color: var(--text-faint);
text-align: center;
}
/* ── Meta del video (duración + peso) ──────────────────────── */
.video-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin: 12px 0;
font-size: var(--text-sm);
color: var(--text-muted);
}
.video-meta-item {
display: flex;
align-items: center;
gap: 5px;
}
.video-meta-item svg { opacity: 0.6; }
/* ============================================================
PROTOCOLO TG
============================================================ */
.inv-tabs {
display: flex;
gap: 4px;
margin-bottom: 24px;
border-bottom: 1px solid var(--border);
padding-bottom: 0;
}
.inv-tab {
padding: 8px 18px;
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-muted);
text-decoration: none;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
border: 1px solid transparent;
border-bottom: none;
margin-bottom: -1px;
transition: color .15s, background .15s;
}
.inv-tab:hover { color: var(--text-primary); }
.inv-tab.active {
color: var(--accent);
background: var(--bg-surface);
border-color: var(--border);
border-bottom-color: var(--bg-surface);
}
/* Índice rápido */
.tg-indice {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 24px;
}
.tg-indice-item {
display: flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 20px;
border: 1px solid var(--border);
font-size: 11px;
color: var(--text-muted);
text-decoration: none;
transition: border-color .15s, color .15s;
}
.tg-indice-item:hover { border-color: var(--accent); color: var(--accent); }
.tg-indice-item.tg-estado-completada { border-color: var(--color-success)55; color: var(--color-success); }
.tg-indice-item.tg-estado-en_progreso { border-color: var(--accent-alt); color: var(--accent-alt); }
.tg-num { font-weight: 700; }
.tg-titulo-corto { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tarjeta de sección */
.tg-seccion {
border: 1px solid var(--border);
border-radius: var(--radius-md);
margin-bottom: 10px;
background: var(--bg-surface);
overflow: hidden;
scroll-margin-top: 80px;
}
.tg-seccion-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
cursor: pointer;
user-select: none;
gap: 12px;
transition: background .15s;
}
.tg-seccion-header:hover { background: rgba(30, 26, 20,.03); }
.tg-seccion-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tg-seccion-num {
font-size: 11px;
font-weight: 700;
color: var(--accent);
background: rgba(184, 70, 44,.1);
padding: 2px 8px;
border-radius: 10px;
white-space: nowrap;
flex-shrink: 0;
}
.tg-seccion-titulo { font-weight: 600; font-size: var(--text-sm); }
.tg-seccion-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tg-chevron { font-size: 11px; color: var(--text-faint); transition: transform .2s; }
.tg-comment-count { font-size: 11px; color: var(--text-faint); }
/* Badges de estado */
.tg-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.tg-badge-pendiente { background: rgba(30, 26, 20,.05); color: var(--text-faint); }
.tg-badge-en_progreso { background: rgba(251,191,36,.12); color: var(--color-warning); }
.tg-badge-completada { background: rgba(74,222,128,.12); color: var(--color-success); }
/* Cuerpo de sección */
.tg-seccion-body { padding: 0 18px 18px; border-top: 1px solid var(--border-muted); }
/* Guía */
.tg-guia {
margin: 14px 0;
background: rgba(30, 26, 20,.02);
border: 1px solid var(--border-muted);
border-radius: var(--radius-sm);
padding: 10px 14px;
font-size: var(--text-xs);
color: var(--text-faint);
}
.tg-guia summary { cursor: pointer; font-weight: 600; color: var(--text-muted); }
.tg-guia p { margin: 8px 0 0; line-height: 1.6; }
/* Formulario de contenido (admin) */
.tg-form-contenido { margin: 14px 0; }
.tg-form-contenido textarea {
width: 100%;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
padding: 10px 12px;
font-family: var(--font);
font-size: var(--text-sm);
resize: vertical;
box-sizing: border-box;
margin-top: 6px;
}
.tg-select-estado {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-secondary);
padding: 5px 10px;
font-size: var(--text-xs);
font-family: var(--font);
}
/* Contenido solo lectura */
.tg-contenido-view {
margin: 14px 0;
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.7;
}
.tg-contenido-view h1,.tg-contenido-view h2,.tg-contenido-view h3 {
color: var(--text-primary); margin: 12px 0 6px;
}
.tg-contenido-view ul,.tg-contenido-view ol { padding-left: 20px; margin: 6px 0; }
.tg-contenido-view table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 13px; }
.tg-contenido-view td,.tg-contenido-view th {
border: 1px solid var(--border); padding: 6px 10px;
}
.tg-contenido-view th { background: var(--bg-elevated); color: var(--accent); }
/* Comentarios */
.tg-comentarios { margin-top: 18px; border-top: 1px solid var(--border-muted); padding-top: 14px; }
.tg-comentarios-titulo { font-size: var(--text-xs); font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
.tg-comentario { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.tg-comentario-header { display: flex; align-items: center; gap: 8px; }
.tg-avatar {
width: 26px; height: 26px; border-radius: 50%;
background: var(--accent); color: var(--color-text-inverse);
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.tg-autor { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
.tg-ts { font-size: 11px; color: var(--text-faint); }
.tg-comentario-body {
font-size: var(--text-sm);
color: var(--text-secondary);
background: var(--bg-elevated);
border-radius: var(--radius-sm);
padding: 8px 12px;
line-height: 1.6;
}
.tg-btn-del {
background: none; border: none; cursor: pointer;
color: var(--text-faint); font-size: 12px; padding: 2px 6px;
border-radius: var(--radius-sm);
transition: color .15s, background .15s;
}
.tg-btn-del:hover { color: var(--danger); background: rgba(248,113,113,.1); }
.tg-no-comments { font-size: var(--text-xs); color: var(--text-faint); margin-bottom: 10px; }
.tg-form-comentario textarea {
width: 100%;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
padding: 8px 12px;
font-family: var(--font);
font-size: var(--text-sm);
resize: none;
box-sizing: border-box;
}
.tg-form-comentario textarea:focus { outline: none; border-color: var(--accent); }
/* Respuestas anidadas en comentarios TG */
.tg-respuestas {
margin: 8px 0 0 34px;
border-left: 2px solid var(--border-muted);
padding-left: 12px;
}
.tg-respuesta { margin-bottom: 8px; }
.tg-reply-form { margin: 8px 0 0 34px; }
.tg-reply-form textarea {
width: 100%;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
padding: 8px 12px;
font-family: var(--font);
font-size: var(--text-sm);
resize: none;
box-sizing: border-box;
}
.tg-reply-form textarea:focus { outline: none; border-color: var(--accent-alt); }
.tg-btn-reply {
background: none; border: none; cursor: pointer;
color: var(--accent-alt); font-size: 11px; font-weight: 600;
padding: 2px 6px; border-radius: var(--radius-sm);
transition: background .15s;
}
.tg-btn-reply:hover { background: rgba(99,179,255,.1); }
/* ── Evaluación IA ─────────────────────────────────────────────────────────── */
.tg-eval-panel { margin-top: 10px; }
.tg-eval-kpis {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: flex-start;
}
.tg-kpi {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
/* Anillo SVG con variable CSS para el porcentaje */
.tg-kpi-ring {
position: relative;
width: 62px;
height: 62px;
border-radius: 50%;
background: conic-gradient(
var(--color, var(--accent)) calc(var(--pct, 0) * 1%),
rgba(30, 26, 20,.08) 0%
);
display: flex;
align-items: center;
justify-content: center;
}
.tg-kpi-ring::before {
content: '';
position: absolute;
inset: 7px;
border-radius: 50%;
background: var(--bg-card);
}
.tg-kpi-val {
position: relative;
font-size: 12px;
font-weight: 700;
color: var(--text-primary);
}
.tg-kpi-label {
font-size: 10px;
color: var(--text-faint);
text-align: center;
max-width: 62px;
}
.tg-kpi-promedio .tg-kpi-ring { width: 70px; height: 70px; }
.tg-kpi-promedio .tg-kpi-ring::before { inset: 8px; }
/* Datos del TG — formulario de identificación */
.tg-field-label {
display: block;
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 5px;
}
.tg-field-input {
width: 100%;
padding: 8px 12px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: var(--text-sm);
font-family: inherit;
resize: vertical;
box-sizing: border-box;
}
.tg-field-input:focus { outline: none; border-color: var(--accent); }
/* ── Banner límite plan gratuito ───────────────────────────────────────────── */
.limite-banner {
display: flex;
align-items: center;
gap: 16px;
background: var(--color-danger);
border-radius: 12px;
padding: 18px 24px;
margin: 16px auto 24px;
max-width: 860px;
box-shadow: 0 4px 24px rgba(156, 58, 42, 0.25);
}
.limite-banner-icon { font-size: 2rem; flex-shrink: 0; }
.limite-banner-texto { flex: 1; color: var(--color-text-inverse); font-size: 0.95rem; line-height: 1.5; }
.limite-banner-texto strong { font-size: 1.05rem; }
.limite-banner-btn {
flex-shrink: 0;
background: var(--color-bg);
color: var(--color-danger);
font-weight: 700;
font-size: 0.85rem;
padding: 10px 18px;
border-radius: 8px;
text-decoration: none;
white-space: nowrap;
transition: background .15s;
}
.limite-banner-btn:hover { background: var(--color-surface); }
/* ── Selector de paleta ────────────────────────────────────────────────────── */
.paleta-selector {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 6px;
}
.paleta-card {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 8px;
border: 2px solid var(--border);
background: var(--bg-elevated);
cursor: pointer;
font-size: 0.82rem;
color: var(--text-secondary);
transition: border-color .15s, background .15s, color .15s;
user-select: none;
}
.paleta-card:hover {
border-color: var(--accent);
color: var(--text-primary);
}
.paleta-card.activo {
border-color: var(--accent);
background: rgba(0,188,212,.1);
color: var(--text-primary);
font-weight: 600;
}
.paleta-dot {
width: 14px;
height: 14px;
border-radius: 50%;
flex-shrink: 0;
}
.paleta-inst-tag {
margin-left: 4px;
font-size: 11px;
opacity: .75;
}
/* Toggle de marca de agua institucional */
.watermark-row {
margin-top: 10px;
padding: 10px 12px;
background: rgba(184, 70, 44, 0.08);
border: 1px solid rgba(184, 70, 44, 0.25);
border-radius: 8px;
}
.watermark-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
cursor: pointer;
margin: 0;
}
.watermark-label input[type=checkbox] {
width: 18px; height: 18px;
accent-color: var(--accent);
}
/* ── Selector de modo de creación ── */
/* Grid responsive: 4 cards (ova_libre, ova_curricular, micro_video,
video_libre) caben en 1 fila si el contenedor da ≥ ~900px. En tablets
pasa a 2x2; en móviles, 1 columna. auto-fit con minmax evita media
queries específicas y deja al grid resolver el reflow. */
.modo-selector {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 8px;
margin-top: 6px;
margin-bottom: 14px;
}
.modo-card {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
cursor: pointer;
transition: border-color .15s, background .15s;
user-select: none;
}
.modo-card:hover { border-color: var(--accent); }
.modo-card.activo { border-color: var(--accent); background: rgba(184, 70, 44,.07); }
.modo-icon { font-size: 22px; flex-shrink: 0; }
.modo-nombre { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); }
.modo-desc { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
/* Dropdown elementos candidatos */
.cur-dropdown {
border: 1px solid var(--border);
border-radius: var(--radius-md);
max-height: 220px;
overflow-y: auto;
margin-top: 4px;
background: var(--bg-surface);
}
.cur-dropdown-item {
padding: 10px 14px;
cursor: pointer;
border-bottom: 1px solid var(--border-muted);
transition: background .1s;
}
.cur-dropdown-item:last-child { border-bottom: none; }
.cur-dropdown-item:hover { background: var(--bg-elevated); }
.cur-dropdown-nombre { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.cur-dropdown-meta { font-size: 10px; color: var(--text-faint); margin-top: 2px; }
.ea-chip { display:inline-block; font-size:9px; font-weight:700; padding:1px 5px;
border-radius:4px; margin-left:3px; vertical-align:middle; }
.ea-chip.ova { background:rgba(34,197,94,.15); color:var(--color-success); }
.ea-chip.obj { background:rgba(251,191,36,.15); color:var(--color-warning); }
.ea-chip.preg { background:rgba(74,222,128,.12); color:var(--color-success); }
.cur-elemento-sel {
padding: 10px 14px;
border: 1px solid var(--accent);
border-radius: var(--radius-md);
background: rgba(184, 70, 44,.06);
margin-top: 6px;
font-size: var(--text-sm);
}
.cur-elemento-sel .sel-nombre { font-weight: 700; color: var(--text-primary); }
.cur-elemento-sel .sel-meta { font-size: 10px; color: var(--text-muted); margin-top: 3px; }
.cur-elemento-sel .sel-clear { float: right; cursor: pointer; color: var(--text-faint); font-size: 14px; }
/* ───────── Preview de bloque desde el wizard (panel-2) ───────── */
.btn-preview-bloque-mini {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
margin-left: 6px;
padding: 0;
background: rgba(82,162,255,0.15);
color: var(--color-primary);
border: 1px solid rgba(82,162,255,0.35);
border-radius: 50%;
font-size: 12px;
line-height: 1;
cursor: pointer;
transition: all 0.15s;
vertical-align: middle;
}
.btn-preview-bloque-mini:hover {
background: rgba(82,162,255,0.3);
border-color: rgba(82,162,255,0.7);
transform: scale(1.1);
}
.bloque-tag {
display: inline-flex !important;
align-items: center;
gap: 2px;
}
.preview-modal-wizard {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,0.78);
backdrop-filter: blur(6px);
z-index: 1000;
align-items: center;
justify-content: center;
padding: 20px;
}
.preview-modal-wizard.open { display: flex; }
.preview-modal-wizard-content {
background: var(--color-surface);
border: 1px solid rgba(30, 26, 20,0.08);
border-radius: 14px;
max-width: min(92vw, 820px);
max-height: 92vh;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.preview-modal-wizard-close {
position: absolute; top: 10px; right: 10px;
width: 36px; height: 36px;
background: rgba(30, 26, 20,0.08);
border: none; border-radius: 50%;
color: var(--color-text); font-size: 16px; cursor: pointer;
z-index: 2;
}
.preview-modal-wizard-close:hover { background: rgba(30, 26, 20,0.18); }
.preview-modal-wizard-body {
flex: 1;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
padding: 20px;
}
.preview-modal-wizard-body img {
max-width: 100%;
max-height: 75vh;
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.preview-modal-wizard-footer {
padding: 12px 20px;
border-top: 1px solid rgba(30, 26, 20,0.06);
text-align: center;
}
.preview-wiz-loading { color: var(--color-text-muted); font-size: 14px; }
.preview-wiz-error { color: var(--color-danger); font-size: 14px; padding: 16px; text-align: center; }
/* ============================================================
PANEL-1 — LIMPIEZA VISUAL (uniforma cards, label-hint y CTA)
Antes: cards de modo/modalidad/formato tenían bordes (1px vs
2px), paddings y alturas distintos; texto descriptivo de modo
en 10px; botón "Generar guión" en ancho de contenido a la
izquierda. Ahora: misma rejilla visual entre los 3 grupos y
CTA prominente full-width.
============================================================ */
.modo-selector,
.modalidad-toggle,
.formato-toggle { align-items: stretch; }
.modo-card,
.modalidad-card,
.formato-card {
min-height: 72px;
border-width: 1.5px;
box-sizing: border-box;
}
/* Cards "Tipo de video": agrandar descripción y respiración */
.modo-card { padding: 14px; }
.modo-desc {
font-size: var(--text-xs);
line-height: 1.35;
margin-top: 3px;
}
/* "Nivel educativo" — el link "Cambiar en perfil" se va a la
derecha del label en lugar de quedar pegado tras el colon. */
#bloque-nivel > label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
#bloque-nivel > label .label-hint { margin-left: auto; }
/* CTA principal del wizard — full width, prominente, centrado */
#btn-generar-ova {
display: flex;
width: 100%;
margin-top: 24px;
padding: 16px 24px;
font-size: 17px;
align-items: center;
justify-content: center;
gap: 10px;
}
/* ============================================================
PANEL-3 — agrupación visual por sección (Audio / Estilo / Fondo)
============================================================ */
#panel-3 .seccion-titulo {
font-size: 13px;
font-weight: 700;
color: var(--accent-alt);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 28px 0 4px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(82, 162, 255, 0.18);
}
#panel-3 .seccion-titulo:first-child { margin-top: 8px; }
/* Atenuar el grupo no activo (color vs imagen) sin ocultarlo */
#panel-3 .color-box.dim,
#panel-3 .img-box.dim {
opacity: 0.35;
filter: saturate(0.4);
transition: opacity 0.2s, filter 0.2s;
}
#panel-3 .color-box,
#panel-3 .img-box {
transition: opacity 0.2s, filter 0.2s;
}
/* ============================================================
PUBLIC LEGAL PAGES — /privacidad, /terminos
Consolidado desde