:root {
--sidebar-bg: #4a3d66;
--main-bg: #35294a;
--card-bg: #2c1e42;
--accent: #ff79c6; /* rosa fucsia cálido – amor/conexión */
--accent-hover: #ff5eb8;
--accent-glow: rgba(255, 121, 198, 0.40);
--text: #fff5fb;
--text-sec: #e9c4ff;
--border: #4a3366;
--sidebar-width: 280px;
--sidebar-collapsed: 80px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
font-family: system-ui, -apple-system, sans-serif;
background: var(--main-bg);
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
}
.layout { display: flex; height: 100vh; }
.sidebar {
width: var(--sidebar-width);
background: var(--sidebar-bg);
border-right: 1px solid var(--border);
height: 100vh;
position: fixed;
left: 0; top: 0;
z-index: 100;
transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
overflow: hidden;
}
.sidebar.collapsed { width: var(--sidebar-collapsed); }
.sidebar-header {
padding: 1.2rem 0.8rem;
min-height: 70px; /* altura mínima para que no desaparezca */
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--border);
background: rgba(0, 255, 133, 0.06);
position: relative;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
overflow: hidden;
transition: opacity 0.4s, width 0.3s;
text-decoration: none;
flex: 1;
}
.logo-icon {
font-size: 1.45rem;
color: var(--accent);
flex-shrink: 0;
filter: drop-shadow(0 0 6px rgba(255,121,198,0.55));
transition: filter 0.3s;
}
.logo-text {
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 0.04em;
white-space: nowrap;
background: linear-gradient(120deg, #fff5fb 0%, #ff79c6 60%, #bd93f9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 8px rgba(255,121,198,0.25));
}
.logo:hover .logo-icon {
filter: drop-shadow(0 0 10px rgba(255,121,198,0.8));
}
.logo-img {
width: 130px;
height: auto;
object-fit: contain;
/* Invierte el logo oscuro a blanco para el fondo oscuro del sidebar */
filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(255,121,198,0.3));
transition: filter 0.3s;
}
.logo-img:hover {
filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(255,121,198,0.6));
}
.sidebar.collapsed .toggle-btn {
right: 16px; /* centrado cuando colapsado */
background: var(--accent-glow);
}
.sidebar.collapsed .logo {
opacity: 0;
width: 0;
overflow: hidden;
}
.toggle-btn {
/* Siempre visible, incluso colapsado */
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 255, 133, 0.25);
color: var(--accent);
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 1.4rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 12px var(--accent-glow);
transition: all 0.3s;
z-index: 10;
}
.toggle-btn:hover {
background: var(--accent-glow);
color: white;
transform: scale(1.1);
}
.nav {
padding: 1.4rem 0.6rem;
}
.nav-item {
display: flex;
align-items: center;
gap: 14px;
padding: 1.05rem 0.8rem 1.05rem 0.9rem; /* ← menos padding izquierdo: de 1.3rem → 0.9rem */
margin: 0.4rem 0;
border-radius: 14px;
color: var(--text-sec);
text-decoration: none;
font-weight: 550;
font-size: 1.07rem;
transition: all 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
.nav-item:hover {
background: rgba(255, 121, 198, 0.20);
color: white;
transform: translateX(6px);
box-shadow: 0 4px 18px var(--accent-glow);
}
}
.nav-item.active {
background: linear-gradient(135deg, rgba(255,121,198,0.40), rgba(255,121,198,0.18));
color: white;
box-shadow: 0 0 30px var(--accent-glow);
}
.nav-icon {
font-size: 1.45rem;
width: 32px;
min-width: 32px; /* asegura que no se achique */
text-align: center;
flex-shrink: 0; /* evita que se comprima */
padding-left: 4px; /* ← pequeño ajuste fino si aún quieres moverlo más a la izquierda */
/* o prueba padding-left: 0; si quieres máximo pegado */
}
@media (hover: hover) and (pointer: fine) {
.nav-item:hover .nav-icon { transform: scale(1.25) rotate(10deg); }
}
.nav-text {
transition: opacity 0.4s ease, transform 0.4s ease;
}
.sidebar.collapsed .nav-text {
opacity: 0;
width: 0;
transform: translateX(-20px);
overflow: hidden;
}
.main-content {
margin-left: var(--sidebar-width);
transition: margin-left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
padding: 3rem 3.2rem;
overflow-y: auto;
height: 100vh;
scrollbar-width: thin;
scrollbar-color: rgba(255, 121, 198, 0.3) transparent;
background: linear-gradient(180deg, var(--main-bg), #2c1f40);
}
.main-content::-webkit-scrollbar { width: 5px; }
.main-content::-webkit-scrollbar-track { background: transparent; }
.main-content::-webkit-scrollbar-thumb {
background: rgba(255, 121, 198, 0.3);
border-radius: 10px;
}
.sidebar.collapsed + .main-content { margin-left: var(--sidebar-collapsed); }
h1 {
/* clamp(mínimo, preferido, máximo) — escala suavemente entre breakpoints */
font-size: clamp(1.6rem, 5vw, 2.8rem);
background: linear-gradient(90deg, var(--accent), #ff9ad1, #ff79c6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 0.6rem;
}
.subtitle {
color: var(--text-sec);
font-size: clamp(1rem, 3vw, 1.25rem);
margin-bottom: clamp(1.5rem, 4vw, 3rem);
}
.card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 20px;
padding: 2.4rem;
box-shadow: 0 12px 35px rgba(255, 121, 198, 0.18); /* glow un poco más suave para no competir con el fondo claro */
}
/* FAB oculto por defecto — solo visible en mobile via media query */
.fab { display: none; }
/* Mobile */
@media (max-width: 1024px) {
.sidebar {
transform: translateX(-100%);
width: var(--sidebar-width) !important;
}
.sidebar.open { transform: translateX(0); }
.main-content { margin-left: 0 !important; padding: 2rem 1.6rem; }
.fab {
position: fixed;
bottom: 24px;
left: 20px;
z-index: 200;
width: 60px;
height: 60px;
background: var(--accent);
color: #000;
border: none;
border-radius: 50%;
font-size: 1.7rem;
box-shadow: 0 8px 28px var(--accent-glow);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
}
.view {
display: none;
}
.view.active {
display: block;
}
/* Opcional: animación suave al cambiar de vista */
.view {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.view.active {
opacity: 1;
transform: translateY(0);
}
/* ── Tarjeta genérica de gráfico ───────────────────────── */
.chart-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 18px;
padding: 1.4rem 1.6rem 1.2rem;
}
.chart-card h3 {
font-size: 0.95rem;
font-weight: 600;
color: rgba(255,255,255,0.75);
margin: 0 0 1rem;
}
/* Ocupa el ancho completo del contenedor padre */
.chart-card.full {
grid-column: 1 / -1;
}
/* ── Tarjeta pequeña (participación, temas) ─────────────── */
.small-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 18px;
padding: 1.4rem 1.6rem;
display: flex;
flex-direction: column;
}
.small-card h4 {
font-size: 0.82rem;
font-weight: 600;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
letter-spacing: 0.6px;
margin: 0 0 1rem;
}
/* ── Barras de participación ────────────────────────────── */
.bars {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 24px;
flex: 1;
min-height: 100px;
padding-bottom: 4px;
}
.bar {
width: 52px;
min-height: 12px;
border-radius: 8px 8px 4px 4px;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 8px;
font-size: 0.72rem;
font-weight: 600;
color: rgba(255,255,255,0.85);
transition: height 0.6s ease;
word-break: break-word;
text-align: center;
}
.bar.tú { background: linear-gradient(180deg, rgba(59,139,212,0.9), rgba(59,139,212,0.5)); }
.bar.otra { background: linear-gradient(180deg, rgba(239,159,39,0.9), rgba(239,159,39,0.5)); }
/* ── Grid principal de contenido ───────────────────────── */
/* Gráfico ancho completo — ya cubierto por .chart-card.full */
/* Fila: diagnóstico + participación + temas */
.analytics-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 1.5rem;
margin-top: 1.5rem;
}
/* Fila: emociones + sentimiento */
.emo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-top: 1.5rem;
}
/* Ocultar el grid cuando no hay tarjetas de emoción visibles */
.emo-grid:not(:has(.emo-card[style*="display: block"])):not(:has(.emo-card[style*="display:block"])) {
display: none;
}
/* Tarjeta de emoción/sentimiento independiente */
.emo-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 18px;
padding: 1.4rem 1.6rem;
}
.emo-card h4 {
font-size: 0.82rem;
font-weight: 600;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
letter-spacing: 0.6px;
margin: 0 0 1rem;
}
/* Tablet: analytics-grid 2 columnas (diagnóstico span 2, participación y temas abajo) */
@media (max-width: 1024px) {
.analytics-grid {
grid-template-columns: 1fr 1fr;
}
.analytics-grid .analysis-panel {
grid-column: 1 / -1;
}
}
/* Mobile: todo en 1 columna */
@media (max-width: 768px) {
.analytics-grid {
grid-template-columns: 1fr;
gap: 1.2rem;
margin-top: 1.2rem;
}
.analytics-grid .analysis-panel {
grid-column: 1;
}
.emo-grid {
grid-template-columns: 1fr;
gap: 1.2rem;
margin-top: 1.2rem;
}
}
.analysis-panel {
background: var(--card-bg);
padding: 1.4rem 1.6rem;
border-radius: 18px;
border: 1px solid var(--border);
}
.gauge {
height: 28px;
background: #3a2a54;
border-radius: 14px;
position: relative;
margin: 12px 0;
overflow: hidden;
}
.gauge-fill {
height: 100%;
background: linear-gradient(90deg, #ff79c6, #ff5eb8);
transition: width 1.2s ease;
}
.gauge-text {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
font-weight: bold;
color: white;
}
.topics-card { display: flex; flex-direction: column; }
.topics-list {
display: flex;
flex-direction: column;
gap: 10px;
padding: 1rem 0;
flex: 1;
justify-content: center;
}
.topics-placeholder {
color: rgba(255,255,255,0.3);
text-align: center;
font-size: 1rem;
}
.topic-item {
display: flex;
flex-direction: column;
gap: 5px;
}
.topic-header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
}
.topic-label {
font-size: 0.82rem;
color: rgba(255,255,255,0.85);
white-space: normal;
line-height: 1.3;
}
.topic-bar-row {
display: flex;
align-items: center;
gap: 8px;
}
/* "X hrs" — número de ventanas horarias, con tooltip explicativo */
.topic-count {
font-size: 0.72rem;
color: rgba(255,255,255,0.35);
white-space: nowrap;
cursor: default;
flex-shrink: 0;
}
/* Porcentaje sobre el total de ventanas del período */
.topic-pct {
font-size: 0.82rem;
font-weight: 600;
color: rgba(255,255,255,0.75);
white-space: nowrap;
flex-shrink: 0;
}
.topic-bar-track {
flex: 1;
background: rgba(255,255,255,0.07);
border-radius: 4px;
height: 5px;
overflow: hidden;
}
.topic-bar-fill {
height: 100%;
border-radius: 4px;
background: linear-gradient(90deg, #bd93f9, #ff79c6);
transition: width 0.4s ease;
}
.topic-bar-fill.top {
background: linear-gradient(90deg, #ff79c6, #ff5555);
}
/* Grid de KPIs - fuerza distribución uniforme y responsive */
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1.2rem 1rem; /* espacio horizontal y vertical */
margin: 2rem 0;
padding: 0 0.5rem; /* evita que se pegue a los bordes en móvil */
}
/* Cada tarjeta KPI - diseño más sólido y visual */
.kpi-card {
background: rgba(255, 121, 198, 0.12); /* fondo sutil con tu color accent */
border: 1px solid rgba(255, 121, 198, 0.28);
border-radius: 16px;
padding: 1.4rem 1.2rem;
text-align: center;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25),
0 2px 8px rgba(255, 121, 198, 0.15);
backdrop-filter: blur(6px); /* efecto glass si el navegador lo soporta */
transition: transform 0.2s ease, box-shadow 0.2s ease;
min-height: 140px; /* altura mínima para uniformidad */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
@media (hover: hover) and (pointer: fine) {
.kpi-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35),
0 4px 16px rgba(255, 121, 198, 0.25);
}
}
/* Icono grande arriba */
.kpi-card .icon {
font-size: 2.6rem;
margin-bottom: 0.8rem;
line-height: 1;
}
/* Etiqueta pequeña */
.kpi-card .label {
font-size: 0.95rem;
color: var(--text-sec);
margin-bottom: 0.5rem;
font-weight: 500;
}
/* Valor principal - destacado */
.kpi-card .value {
font-size: 2.1rem;
font-weight: 700;
line-height: 1.1;
color: white;
}
.kpi-card .value span {
font-size: 1rem;
font-weight: 400;
color: var(--text-sec);
opacity: 0.9;
}
/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
.kpi-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem 0.8rem;
}
.kpi-card {
padding: 1.2rem 1rem;
min-height: 130px;
}
.kpi-card .icon {
font-size: 2.2rem;
}
.kpi-card .value {
font-size: 1.8rem;
}
}
.conversation-selector.modern {
display: flex;
align-items: center;
gap: 1.2rem;
margin-bottom: 2.2rem;
flex-wrap: wrap;
}
.conversation-selector.modern label {
font-weight: 500;
color: var(--text-sec);
font-size: 1.05rem;
white-space: nowrap;
}
/*.select-wrapper {
position: relative;
flex: 1;
min-width: 260px;
max-width: 420px;
}*/
.select-wrapper {
position: relative;
flex: 1;
min-width: 260px;
max-width: 420px;
background: rgba(44, 30, 66, 0.4);
border-radius: 16px;
padding: 4px;
box-shadow:
inset 6px 6px 12px rgba(0,0,0,0.4),
inset -6px -6px 12px rgba(255,255,255,0.05);
backdrop-filter: blur(12px);
}
.select-wrapper select {
appearance: none;
width: 100%;
border: none;
padding: 1rem 2.8rem 1rem 1.4rem;
/*border: 1px solid rgba(255, 121, 198, 0.35);*/
border-radius: 14px;
background: transparent; /* semi-transparente */
color: gray;
font-size: 1.05rem;
font-weight: 500;
cursor: pointer;
transition: all 0.25s ease;
backdrop-filter: blur(10px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.select-wrapper select:hover {
border-color: var(--accent);
box-shadow: 0 6px 24px rgba(255, 121, 198, 0.22);
background: rgba(44, 30, 66, 0.75);
}
.select-wrapper select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(255, 121, 198, 0.3);
}
.select-arrow {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
/*color: var(--accent);*/
color: #ff9ad1;
pointer-events: none;
font-size: 1.2rem;
transition: transform 0.25s ease;
}
.select-wrapper select:hover + .select-arrow {
transform: translateY(-50%) scale(1.15);
}
.select-wrapper select {
background: linear-gradient(135deg, rgba(44,30,66,0.7), rgba(60,40,80,0.6));
border: none;
box-shadow: 0 8px 32px rgba(0,0,0,0.4),
inset 0 2px 8px rgba(255,255,255,0.05);
}
.select-wrapper select:hover {
background: linear-gradient(135deg, rgba(255,121,198,0.18), rgba(44,30,66,0.8));
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(255,121,198,0.28);
}
/* ── Variables de fases ──────────────────────────────────────
Los colores de cada fase se asignan desde JS como inline
style en cada .phase-seg. Estos son los colores sugeridos
para usar en tu array de fases:
Inicio / Conexión inicial : #3B8BD4 (azul)
Escalada / Intensidad alta: #EF9F27 (ámbar)
Tensión / Quiebre : #E24B4A (rojo)
Silencio / Pausa : #8B7BC2 (violeta)
Estabilización / Rutina : #639922 (verde)
JS: phases[i].color = uno de los anteriores
─────────────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════
1. BLOQUE COMPLETO: LÍNEA DE TIEMPO DE FASES
══════════════════════════════════════════════════════════ */
.phase-timeline-block {
background: rgba(255, 255, 255, 0.04);
border: 0.5px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 16px 20px 14px;
margin-bottom: 24px;
}
/* Cabecera: label + badge de fase actual */
.phase-timeline-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.block-label {
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.8px;
color: rgba(255, 255, 255, 0.4);
}
/* Badge "Fase actual: Estable" */
.phase-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 500;
padding: 4px 12px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.07);
border: 0.5px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.8);
white-space: nowrap;
}
/* El punto de color del badge se colorea desde JS:
document.getElementById('current-phase-dot').style.background = phase.color */
.phase-badge-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
background: #639922; /* valor por defecto, JS lo sobreescribe */
}
/* ── Barra de fases segmentada ─────────────────────────────── */
.phase-bar {
display: flex;
height: 28px;
border-radius: 8px;
overflow: hidden;
background: rgba(255, 255, 255, 0.06);
}
/* Estado vacío antes de cargar una conversación */
.phase-bar-empty {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
font-size: 12px;
color: rgba(255, 255, 255, 0.25);
font-style: italic;
}
/* Cada segmento de fase
JS: genera
Nombre
El segmento activo (fase donde está el cursor de tiempo) lleva .active
*/
.phase-seg {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: filter 0.15s ease, transform 0.1s ease;
position: relative;
overflow: hidden;
min-width: 0; /* evita que texto largo fuerce el ancho */
}
.phase-seg:hover {
filter: brightness(1.15);
}
.phase-seg:active {
transform: scaleY(0.95);
}
/* Indicador de fase seleccionada: punto debajo del segmento */
.phase-seg.active::after {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
background: white;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(255,255,255,0.25), 0 2px 6px rgba(0,0,0,0.4);
}
.phase-seg-label {
font-size: 9.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
pointer-events: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 6px;
}
/* Segmentos muy angostos (<60px) ocultan el label */
.phase-seg.narrow .phase-seg-label {
display: none;
}
/* ── Fechas extremas de la timeline ───────────────────────── */
.phase-dates {
display: flex;
justify-content: space-between;
margin-top: 5px;
font-size: 10px;
color: rgba(255, 255, 255, 0.3);
font-family: monospace;
letter-spacing: 0.3px;
}
/* ── Sparkline de intensidad compuesta ────────────────────── */
/*
JS: por cada día del rango total:
1. Calculas intensity_score(day) → valor 0 a 10
2. Creas
3. Si es el día seleccionado/hover, agrega clase .active
*/
.intensity-sparkline {
display: flex;
align-items: flex-end;
gap: 2px;
height: 24px;
margin-top: 10px;
padding: 0 1px;
}
.spark-bar {
flex: 1;
min-height: 3px;
border-radius: 2px 2px 0 0;
opacity: 0.6;
transition: opacity 0.15s, transform 0.15s;
cursor: default;
}
.spark-bar:hover,
.spark-bar.active {
opacity: 1;
transform: scaleY(1.1);
transform-origin: bottom;
}
/* ── Filtro de período ────────────────────────────────────── */
/* Fila que contiene el filtro de período + botón IA */
.period-ia-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
flex-wrap: wrap;
}
.period-filter {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
flex: 1;
}
.period-label {
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
margin-right: 2px;
}
.period-btn {
font-size: 11px;
font-weight: 500;
padding: 4px 12px;
border-radius: 20px;
border: 0.5px solid rgba(255, 255, 255, 0.12);
background: transparent;
color: rgba(255, 255, 255, 0.45);
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.period-btn:hover {
background: rgba(255, 255, 255, 0.07);
color: rgba(255, 255, 255, 0.75);
}
.period-btn.active {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
color: rgba(255, 255, 255, 0.95);
}
/* ── Delta en KPIs (tendencia respecto al período anterior) ─ */
/*
JS: calcula la diferencia entre el valor actual y el del
período anterior del mismo largo. Luego agrega la clase
apropiada y el texto: "▲ +12%" / "▼ -8%" / "→ sin cambio"
*/
.kpi-delta {
font-size: 10px;
margin-top: 4px;
font-weight: 500;
min-height: 14px; /* reserva espacio aunque esté vacío */
}
.kpi-delta.up { color: #8BC34A; } /* mejora */
.kpi-delta.down { color: #E24B4A; } /* empeora */
.kpi-delta.flat { color: rgba(255, 255, 255, 0.3); } /* estable */
/* ══════════════════════════════════════════════════════════
2. PANEL DE DIAGNÓSTICO
══════════════════════════════════════════════════════════ */
/* Nota de período activo encima de las tarjetas */
.panel-period-note {
font-size: 11px;
color: rgba(255, 255, 255, 0.3);
margin: -6px 0 12px;
font-style: italic;
}
/* Contenedor de tarjetas de diagnóstico */
#diagnostics-container {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Estado vacío antes de cargar */
.diag-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 32px 16px;
color: rgba(255, 255, 255, 0.2);
text-align: center;
}
.diag-placeholder i {
font-size: 24px;
opacity: 0.4;
}
.diag-placeholder p {
font-size: 12px;
line-height: 1.6;
}
/* Tarjeta de diagnóstico individual
Tres variantes: .warn (amarillo), .info (azul), .neutral (gris) */
.diag-card {
border-radius: 10px;
padding: 11px 14px;
border-left: 3px solid transparent;
}
.diag-card.warn {
background: rgba(239, 159, 39, 0.1);
border-left-color: #EF9F27;
}
.diag-card.info {
background: rgba(59, 139, 212, 0.1);
border-left-color: #3B8BD4;
}
.diag-card.neutral {
background: rgba(255, 255, 255, 0.05);
border-left-color: rgba(255, 255, 255, 0.15);
}
.diag-title {
font-size: 12px;
font-weight: 500;
margin-bottom: 4px;
color: rgba(255, 255, 255, 0.9);
}
.diag-card.warn .diag-title { color: #FAC775; }
.diag-card.info .diag-title { color: #85B7EB; }
.diag-body {
font-size: 11px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.55);
}
.diag-card.warn .diag-body { color: rgba(250, 199, 117, 0.75); }
.diag-card.info .diag-body { color: rgba(133, 183, 235, 0.75); }
/* Card de upgrade cuando se alcanza límite de análisis (429) */
.upgrade-cta-card {
display: flex;
gap: 14px;
align-items: flex-start;
background: linear-gradient(135deg, rgba(160, 64, 232, 0.12), rgba(255, 121, 198, 0.08));
border: 1px solid rgba(189, 147, 249, 0.25);
border-left: 3px solid #bd93f9;
border-radius: 10px;
padding: 16px;
}
.upgrade-cta-icon {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(189, 147, 249, 0.15);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.upgrade-cta-icon i { font-size: 1rem; color: #bd93f9; }
.upgrade-cta-body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.upgrade-cta-title { font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.9); margin: 0; }
.upgrade-cta-sub { font-size: 0.78rem; color: rgba(255,255,255,0.55); line-height: 1.5; margin: 0; }
.upgrade-cta-btn {
align-self: flex-start;
margin-top: 4px;
padding: 8px 16px;
background: linear-gradient(135deg, #a040e8, #ff79c6);
color: #fff;
border: none;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: opacity 0.2s, transform 0.2s;
}
.upgrade-cta-btn:hover { opacity: 0.88; transform: translateY(-1px); }
@media (max-width: 768px) {
.upgrade-cta-card { flex-direction: column; gap: 10px; }
.upgrade-cta-icon { display: none; }
}
/* ══════════════════════════════════════════════════════════
3. DISTRIBUCIÓN EMOCIONAL
══════════════════════════════════════════════════════════ */
.emotion-section {
margin-top: 18px;
padding-top: 16px;
border-top: 0.5px solid rgba(255, 255, 255, 0.07);
}
.emotion-section h4 {
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 10px;
}
/* Barra horizontal segmentada
JS: genera
*/
.emotion-strip {
display: flex;
height: 10px;
border-radius: 5px;
overflow: hidden;
background: rgba(255,255,255,0.06);
margin-bottom: 10px;
}
.emo-seg {
height: 100%;
transition: filter 0.15s;
cursor: default;
}
.emo-seg:hover {
filter: brightness(1.2);
}
/* Leyenda debajo de la barra */
.emotion-legend {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
}
/* Cada ítem de leyenda
JS: genera
Alegría 38%
*/
.emo-tag {
display: flex;
align-items: center;
gap: 5px;
font-size: 10.5px;
color: rgba(255, 255, 255, 0.5);
}
.emo-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
/*
Colores sugeridos para emociones (usa estos en JS):
Alegría / Positivo : #639922
Afecto / Cariño : #3B8BD4
Tensión / Conflicto : #E24B4A
Nostalgia / Melanc. : #8B7BC2
Humor / Juego : #EF9F27
Neutro : rgba(255,255,255,0.2)
*/
/* ══════════════════════════════════════════════════════════
4. RESPONSIVE — MOBILE
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.phase-timeline-block {
padding: 12px 14px 10px;
}
.phase-timeline-header {
flex-wrap: wrap;
gap: 8px;
}
.phase-badge {
font-size: 10px;
padding: 3px 10px;
}
.phase-seg-label {
font-size: 8px;
}
.period-ia-row {
margin-top: 14px;
}
.period-filter {
gap: 6px;
}
/* Área táctil mínima 44px recomendada por Apple/Google */
.period-btn {
font-size: 12px;
padding: 10px 14px;
min-height: 44px;
display: inline-flex;
align-items: center;
}
#diagnostics-container {
gap: 6px;
}
.diag-card {
padding: 9px 12px;
}
.diag-title {
font-size: 11px;
}
.diag-body {
font-size: 10px;
}
.emotion-legend {
gap: 6px 10px;
}
}
/* ── Vista Conversaciones: zona de upload ───────────────────────────────── */
.upload-zone {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 20px 24px;
background: rgba(255,255,255,0.04);
border: 1px dashed rgba(179,157,219,0.35);
border-radius: 14px;
margin-bottom: 24px;
}
@media (max-width: 600px) {
.upload-zone {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 16px;
}
.upload-btn,
.analyze-btn {
width: 100%;
justify-content: center;
min-height: 44px;
font-size: 0.95rem;
}
.conv-file-name {
text-align: center;
white-space: normal;
word-break: break-all;
}
}
.upload-btn {
background: rgba(103,58,183,0.25);
color: #b39ddb;
border: 1px solid rgba(179,157,219,0.4);
border-radius: 8px;
padding: 10px 18px;
font-size: 0.88rem;
cursor: pointer;
transition: background 0.2s;
}
.upload-btn:hover { background: rgba(103,58,183,0.45); }
.conv-file-name {
font-size: 0.85rem;
color: rgba(255,255,255,0.45);
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.analyze-btn {
background: linear-gradient(135deg, #7B2FBE, #D4537E);
color: #fff;
border: none;
border-radius: 8px;
padding: 10px 20px;
font-size: 0.88rem;
cursor: pointer;
transition: opacity 0.2s;
}
.analyze-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.analyze-btn:not(:disabled):hover { opacity: 0.88; }
}
/* ── Tooltips de KPI ────────────────────────────────────────────────────────── */
.kpi-tooltip-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
/* Sólido y visible — gradiente opaco púrpura→rosa */
background: linear-gradient(145deg, #8a35c9 0%, #d44f8a 100%);
border: 1px solid rgba(255, 160, 220, 0.55);
/* Relieve 3D: highlight blanco arriba (inset), sombra abajo, drop shadow + glow */
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, 0.30), /* highlight superior */
inset 0 -1px 0 rgba(0, 0, 0, 0.25), /* borde inferior oscuro */
0 3px 6px rgba(0, 0, 0, 0.45), /* sombra de profundidad */
0 0 10px rgba(212, 83, 190, 0.35); /* glow exterior */
/* Tipografía: i itálica blanca — contraste máximo */
color: #fff;
font-size: 11px;
font-style: italic;
font-weight: 800;
font-family: Georgia, 'Times New Roman', serif;
line-height: 1;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* legibilidad de la letra */
margin-left: 7px;
position: relative;
vertical-align: middle;
flex-shrink: 0;
cursor: pointer;
user-select: none;
transition: background 0.18s ease, box-shadow 0.18s ease,
border-color 0.18s ease, transform 0.15s ease;
}
.kpi-tooltip-icon:hover,
.kpi-tooltip-icon:focus {
background: linear-gradient(145deg, #a040e8 0%, #f060a8 100%);
border-color: rgba(255, 180, 230, 0.85);
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, 0.40),
inset 0 -1px 0 rgba(0, 0, 0, 0.25),
0 4px 10px rgba(0, 0, 0, 0.55),
0 0 18px rgba(255, 90, 180, 0.65); /* glow intenso */
color: #fff;
outline: none;
transform: scale(1.22) translateY(-1px);
}
/* Área de toque ampliada en móvil sin alterar tamaño visual */
@media (hover: none) {
.kpi-tooltip-icon {
padding: 6px;
margin: -6px -6px -6px 1px; /* compensa el padding para no desplazar layout */
}
}
/* ── Tooltip hover — solo en desktop ── */
@media (hover: hover) and (pointer: fine) {
.kpi-tooltip-icon { cursor: help; }
.kpi-tooltip-text {
display: none;
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
width: 260px;
background: rgba(18, 8, 36, 0.98);
color: rgba(255, 255, 255, 0.82);
font-size: 11.5px;
font-weight: 400;
line-height: 1.55;
padding: 11px 14px;
border-radius: 9px;
border: 1px solid rgba(255, 255, 255, 0.10);
border-left: 3px solid #a040e8;
box-shadow:
0 10px 32px rgba(0, 0, 0, 0.70),
0 2px 8px rgba(0, 0, 0, 0.40),
0 0 20px rgba(130, 40, 200, 0.18);
z-index: 100;
pointer-events: none;
text-align: left;
white-space: normal;
}
/* Título inyectado por JS dentro del tooltip */
.kpi-tooltip-title {
display: block;
font-size: 12.5px;
font-weight: 700;
color: #fff;
letter-spacing: 0.01em;
padding-bottom: 7px;
margin-bottom: 8px;
border-bottom: 1px solid rgba(160, 64, 232, 0.35);
}
.kpi-tooltip-text::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: rgba(18, 8, 36, 0.98);
}
.kpi-tooltip-icon:hover .kpi-tooltip-text,
.kpi-tooltip-icon:focus .kpi-tooltip-text {
display: block;
}
/* Ajuste bordes de grilla */
.kpi-card:first-child .kpi-tooltip-text {
left: 0;
transform: none;
}
.kpi-card:first-child .kpi-tooltip-text::after {
left: 20px;
transform: none;
}
.kpi-card:last-child .kpi-tooltip-text {
left: auto;
right: 0;
transform: none;
}
.kpi-card:last-child .kpi-tooltip-text::after {
left: auto;
right: 20px;
transform: none;
}
}
/* En touch, el .kpi-tooltip-text existe en el DOM pero JS lo usa solo
para leer el contenido — nunca se muestra como tooltip flotante */
@media (hover: none) {
.kpi-tooltip-text { display: none !important; }
}
/* ── Bottom sheet — solo se muestra en móvil (JS lo activa en touch) ── */
.bs-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 200;
opacity: 0;
transition: opacity 0.25s;
}
.bs-overlay.visible {
display: block;
opacity: 1;
}
.bs-sheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #1e1332;
border-radius: 20px 20px 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 12px 24px 32px;
z-index: 201;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
max-height: 70vh;
overflow-y: auto;
}
.bs-sheet.visible {
transform: translateY(0);
}
.bs-handle {
width: 36px;
height: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
margin: 0 auto 20px;
}
.bs-icon {
font-size: 28px;
text-align: center;
margin-bottom: 8px;
}
.bs-title {
font-size: 16px;
font-weight: 700;
color: #fff;
text-align: center;
margin-bottom: 12px;
}
.bs-body {
font-size: 14px;
color: rgba(255, 255, 255, 0.78);
line-height: 1.6;
text-align: center;
margin-bottom: 24px;
}
.bs-close {
display: block;
width: 100%;
padding: 13px;
background: linear-gradient(135deg, #7B2FBE, #D4537E);
color: #fff;
font-size: 14px;
font-weight: 600;
border: none;
border-radius: 12px;
cursor: pointer;
letter-spacing: 0.3px;
}
/* ══════════════════════════════════════════════════════════
SPRINT 2 — BRECHAS MEDIAS
══════════════════════════════════════════════════════════ */
/* ── M1: Breakpoint tablet (769px–1024px) ───────────────────
Entre móvil y desktop hay un hueco: iPad vertical (768px),
iPad horizontal (1024px), laptops pequeñas.
Se ajustan paddings, fuentes y grillas para este rango.
─────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
.main-content {
padding: 2rem 2.2rem;
}
/* KPI grid: 3 columnas en tablet (no 5 ni 1) */
.kpi-grid {
grid-template-columns: repeat(3, 1fr);
}
/* Dashboard: el panel diagnóstico bajo el gráfico */
.dashboard-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
/* analytics-grid en tablet: panel ocupa ancho completo, participación y temas en fila */
.analytics-grid {
grid-template-columns: 1fr 1fr;
}
.analytics-grid .analysis-panel {
grid-column: 1 / -1;
}
/* Selector de conversación: quitar min-width rígido */
.select-wrapper {
min-width: 0;
flex: 1;
}
}
/* ── M3: Selector de conversación 100% en mobile ────────────
En pantallas < 600px el label + select en fila no cabe.
Se apilan verticalmente con el select a ancho completo.
─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
.conversation-selector.modern {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.conversation-selector.modern label {
font-size: 0.9rem;
}
.select-wrapper {
min-width: 0;
max-width: 100%;
width: 100%;
}
}
/* ── M2: Gráficos con altura responsive ─────────────────────
.chart-wrap es el contenedor de todos los canvas de Chart.js.
position:relative es obligatorio para maintainAspectRatio:false.
─────────────────────────────────────────────────────────── */
.chart-wrap {
position: relative;
width: 100%;
height: clamp(220px, 35vh, 360px);
}
/* Variante para gráficos secundarios (días de semana, horario) */
.chart-wrap--sm {
height: clamp(180px, 28vh, 260px);
}
.chart-wrap canvas {
display: block;
width: 100% !important;
height: 100% !important;
}
/* Texto de análisis debajo de cada gráfico */
.chart-analysis {
margin-top: 10px;
font-size: 0.85rem;
color: rgba(255,255,255,0.6);
line-height: 1.6;
min-height: 1.4em;
}
/* Tablet */
@media (max-width: 1024px) {
.chart-wrap {
height: clamp(200px, 30vh, 300px);
}
.chart-wrap--sm {
height: clamp(160px, 24vh, 220px);
}
}
/* Mobile */
@media (max-width: 768px) {
.chart-wrap {
height: 220px;
}
.chart-wrap--sm {
height: 180px;
}
}
/* Gráfico donut de inicios */
#chart-inicios,
#conv-chart-inicios {
height: clamp(140px, 20vh, 200px) !important;
}
@media (max-width: 768px) {
#chart-inicios,
#conv-chart-inicios {
height: 160px !important;
}
}
/* ── M4: Desactivar blur en dispositivos que no lo soportan
o que prefieren animaciones reducidas ───────────────
backdrop-filter: blur() puede causar jank en Android
mid-range y consume batería. Se desactiva cuando:
a) El navegador no lo soporta (@supports not)
b) El usuario activó "reducir movimiento" en el SO
─────────────────────────────────────────────────────────── */
@supports not (backdrop-filter: blur(1px)) {
.kpi-card {
backdrop-filter: none;
background: rgba(255, 121, 198, 0.16); /* color levemente más opaco como compensación */
}
}
@media (prefers-reduced-motion: reduce) {
.kpi-card {
backdrop-filter: none;
transition: none;
}
.nav-item,
.sidebar,
.main-content,
.view {
transition: none !important;
}
.bs-sheet,
.bs-overlay {
transition: none !important;
}
}
/* ══════════════════════════════════════════════════════════
AUTH WORLD
══════════════════════════════════════════════════════════ */
.auth-world {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
background: var(--main-bg);
overflow-y: auto;
padding: 2rem 1rem;
}
.auth-world.hidden { display: none; }
.auth-view { display: none; width: 100%; max-width: 420px; }
.auth-view.active { display: block; }
.auth-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 20px;
padding: 2.4rem 2rem 2rem;
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.auth-logo {
display: flex;
justify-content: center;
align-items: center;
padding: 8px 0 4px;
}
/* Contenedor blanco tipo pastilla para el logo con texto oscuro */
.auth-logo-pill {
background: #ffffff;
border-radius: 16px;
padding: 12px 28px;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow:
0 4px 20px rgba(0,0,0,0.25),
0 0 0 1px rgba(255,255,255,0.12);
}
.auth-logo-img {
width: 160px;
height: auto;
object-fit: contain;
display: block;
}
.auth-title {
font-size: 1.4rem;
font-weight: 600;
color: var(--text);
text-align: center;
margin: 0;
}
.auth-subtitle {
font-size: 0.88rem;
color: rgba(255,255,255,0.55);
text-align: center;
line-height: 1.5;
margin-top: -0.6rem;
}
.auth-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.auth-field label {
font-size: 0.82rem;
color: rgba(255,255,255,0.6);
font-weight: 500;
}
.auth-field input {
background: rgba(255,255,255,0.06);
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.65rem 0.9rem;
color: var(--text);
font-size: 0.95rem;
outline: none;
transition: border-color 0.2s;
width: 100%;
}
.auth-field input:focus {
border-color: var(--accent);
background: rgba(255,255,255,0.09);
}
.password-wrap {
position: relative;
display: flex;
align-items: center;
}
.password-wrap input { padding-right: 2.8rem; }
.toggle-pw {
position: absolute;
right: 0.7rem;
background: none;
border: none;
color: rgba(255,255,255,0.35);
cursor: pointer;
padding: 0.3rem;
font-size: 0.9rem;
transition: color 0.2s;
}
.toggle-pw:hover { color: rgba(255,255,255,0.7); }
.auth-btn {
width: 100%;
padding: 0.75rem;
background: linear-gradient(135deg, #bd93f9, #ff79c6);
border: none;
border-radius: 10px;
color: #fff;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: opacity 0.2s, transform 0.1s;
margin-top: 0.4rem;
}
.auth-btn:hover { opacity: 0.9; }
.auth-btn:active { transform: scale(0.98); }
.auth-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-btn--secondary {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.7);
flex: 0 0 auto;
width: auto;
padding: 0.75rem 1.2rem;
}
.auth-step-label {
font-size: 0.78rem;
color: rgba(255,255,255,0.35);
text-align: center;
margin-bottom: -0.4rem;
letter-spacing: 0.03em;
}
.auth-step-nav {
display: flex;
gap: 0.7rem;
align-items: center;
}
.auth-step-nav .auth-btn:last-child { flex: 1; }
.auth-select {
background: rgba(255,255,255,0.06);
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.65rem 0.9rem;
color: var(--text);
font-size: 0.95rem;
outline: none;
width: 100%;
cursor: pointer;
transition: border-color 0.2s;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='rgba(255,255,255,0.4)' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.9rem center;
padding-right: 2.2rem;
}
.auth-select:focus { border-color: var(--accent); }
.auth-select:disabled { opacity: 0.4; cursor: not-allowed; }
.auth-select option { background: #2c1e42; color: #fff; }
.auth-error {
font-size: 0.83rem;
color: #ff5555;
min-height: 1.2em;
text-align: center;
}
.auth-ok {
font-size: 0.83rem;
color: #50fa7b;
min-height: 1.2em;
text-align: center;
}
.pw-match-hint {
font-size: 0.78rem;
margin: 4px 0 0;
min-height: 1em;
}
.pw-match-hint--ok { color: #50fa7b; }
.pw-match-hint--err { color: #ff5555; }
.auth-links {
display: flex;
justify-content: center;
gap: 0.6rem;
flex-wrap: wrap;
font-size: 0.83rem;
}
.auth-links a {
color: var(--accent);
text-decoration: none;
transition: opacity 0.2s;
}
.auth-links a:hover { opacity: 0.75; }
.auth-links span { color: rgba(255,255,255,0.3); }
/* ══════════════════════════════════════════════════════════
SIDEBAR FOOTER (usuario + logout)
══════════════════════════════════════════════════════════ */
.sidebar-footer {
margin-top: auto;
padding: 1rem 1.2rem;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
gap: 0.7rem;
}
.user-info {
display: flex;
align-items: center;
gap: 0.6rem;
overflow: hidden;
flex: 1;
}
.user-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, #bd93f9, #ff79c6);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
flex-shrink: 0;
color: #fff;
}
.user-details {
display: flex;
flex-direction: column;
overflow: hidden;
}
.user-name {
font-size: 0.85rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-role {
font-size: 0.72rem;
color: rgba(255,255,255,0.4);
text-transform: capitalize;
}
.logout-btn {
background: none;
border: 1px solid var(--border);
border-radius: 8px;
color: rgba(255,255,255,0.45);
padding: 0.4rem 0.6rem;
cursor: pointer;
font-size: 0.9rem;
transition: color 0.2s, border-color 0.2s;
flex-shrink: 0;
}
.logout-btn:hover {
color: #ff5555;
border-color: #ff5555;
}
/* Sidebar colapsado: ocultar footer text */
.sidebar.collapsed .user-details,
.sidebar.collapsed .logout-btn { display: none; }
.sidebar.collapsed .sidebar-footer { justify-content: center; padding: 1rem 0; }
.sidebar.collapsed .user-info { flex: 0 0 auto; justify-content: center; }
/* ══════════════════════════════════════════════════════════
ADMIN — tabla de usuarios
══════════════════════════════════════════════════════════ */
.admin-toolbar {
display: flex;
gap: 0.8rem;
flex-wrap: wrap;
margin-bottom: 1.2rem;
margin-top: 1rem;
}
.admin-btn-crear-externo {
white-space: nowrap;
font-size: 0.87rem;
padding: 8px 16px;
display: flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, #bd93f9, #ff79c6);
border: none;
border-radius: 8px;
color: #fff;
font-weight: 600;
cursor: pointer;
transition: opacity 0.2s, transform 0.1s;
}
.admin-btn-crear-externo:hover { opacity: 0.9; }
.admin-btn-crear-externo:active { transform: scale(0.97); }
/* ── Modal: crear usuario externo ───────────────────────── */
.modal-box--ext-usuario {
max-width: 480px;
display: flex;
flex-direction: column;
gap: 1rem;
}
.modal-box--ext-usuario .auth-field {
margin-bottom: 0; /* gap del flex lo maneja */
}
.modal-ext-desc {
font-size: 0.83rem;
color: rgba(255,255,255,0.45);
margin: -4px 0 4px;
line-height: 1.5;
}
.modal-ext-error {
font-size: 0.84rem;
color: #ff5555;
background: rgba(255,85,85,0.08);
border: 1px solid rgba(255,85,85,0.25);
border-radius: 8px;
padding: 8px 12px;
margin: 0;
}
.req {
color: #ff79c6;
}
.modal-ext-cancel {
padding: 10px 20px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.65);
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.modal-ext-cancel:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); }
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 0.8rem;
margin-top: 4px;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.admin-btn-crear-externo {
width: 100%;
justify-content: center;
}
.modal-box--ext-usuario {
gap: 0.85rem;
}
.modal-actions {
flex-direction: column-reverse;
}
.modal-actions .plan-confirm-btn,
.modal-actions .modal-ext-cancel {
width: 100%;
justify-content: center;
}
}
.admin-search {
flex: 1;
min-width: 180px;
background: rgba(255,255,255,0.06);
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.55rem 0.9rem;
color: var(--text);
font-size: 0.9rem;
outline: none;
}
.admin-search:focus { border-color: var(--accent); }
.admin-filter {
background: #2c1e42;
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.55rem 0.8rem;
color: var(--text);
font-size: 0.88rem;
outline: none;
cursor: pointer;
}
.admin-filter:focus { border-color: var(--accent); }
.admin-filter option { background: #2c1e42; color: var(--text); }
.admin-table-wrap {
overflow-x: auto;
border-radius: 14px;
border: 1px solid var(--border);
}
.admin-table {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
}
.admin-table th {
background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.5);
font-weight: 600;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.75rem 1rem;
text-align: left;
white-space: nowrap;
}
.admin-table td {
padding: 0.75rem 1rem;
border-top: 1px solid rgba(255,255,255,0.05);
color: rgba(255,255,255,0.85);
vertical-align: middle;
}
.admin-table tbody tr:hover td {
background: rgba(255,255,255,0.03);
}
.admin-empty {
text-align: center;
padding: 2rem !important;
color: rgba(255,255,255,0.35);
}
/* Badges de estado y rol */
.badge {
display: inline-block;
padding: 0.2rem 0.6rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: capitalize;
}
.badge--activo { background: rgba(80,250,123,0.15); color: #50fa7b; }
.badge--inactivo { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.45); }
.badge--suspendido { background: rgba(255,85,85,0.15); color: #ff5555; }
.badge--admin { background: rgba(189,147,249,0.2); color: #bd93f9; }
.badge--usuario { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.5); }
/* Select inline en tabla admin */
.admin-select {
background: #2c1e42;
border: 1px solid var(--border);
border-radius: 7px;
padding: 0.3rem 0.5rem;
color: var(--text);
font-size: 0.82rem;
cursor: pointer;
outline: none;
}
.admin-select:focus { border-color: var(--accent); }
.admin-select option { background: #2c1e42; color: var(--text); }
@media (max-width: 768px) {
.admin-table th:nth-child(5),
.admin-table td:nth-child(5),
.admin-table th:nth-child(6),
.admin-table td:nth-child(6) { display: none; }
}
/* ── KPIs operacionales admin ──────────────────────────── */
.admin-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin: 1.2rem 0 1.8rem;
}
.admin-kpi-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 14px;
padding: 1.1rem 1.2rem;
display: flex;
align-items: center;
gap: 1rem;
}
.admin-kpi-icon {
width: 42px;
height: 42px;
border-radius: 10px;
background: rgba(189,147,249,0.15);
color: #bd93f9;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.admin-kpi-icon--green { background: rgba(80,250,123,0.12); color: #50fa7b; }
.admin-kpi-icon--red { background: rgba(255,85,85,0.12); color: #ff5555; }
.admin-kpi-icon--purple { background: rgba(255,121,198,0.12); color: #ff79c6; }
.admin-kpi-data {
display: flex;
flex-direction: column;
gap: 2px;
}
.admin-kpi-value {
font-size: 1.6rem;
font-weight: 700;
color: var(--text);
line-height: 1;
}
.admin-kpi-label {
font-size: 0.75rem;
color: rgba(255,255,255,0.45);
}
@media (max-width: 768px) {
.admin-kpis { grid-template-columns: repeat(2, 1fr); }
}
/* ── Secciones admin ───────────────────────────────────── */
.admin-section-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.8rem;
margin-bottom: 1rem;
}
.admin-section-header h3 {
font-size: 1rem;
font-weight: 600;
color: var(--text);
margin: 0;
}
.admin-refresh-btn {
background: rgba(255,255,255,0.07);
border: 1px solid var(--border);
border-radius: 8px;
color: rgba(255,255,255,0.6);
padding: 0.4rem 0.9rem;
font-size: 0.82rem;
cursor: pointer;
transition: color 0.2s, border-color 0.2s;
display: flex;
align-items: center;
gap: 0.4rem;
}
.admin-refresh-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.3); }
/* Botones de acción en tabla */
.admin-action-btn {
background: none;
border: 1px solid var(--border);
border-radius: 7px;
color: rgba(255,255,255,0.5);
padding: 0.28rem 0.5rem;
font-size: 0.82rem;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.admin-action-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.35); }
.admin-action-btn.btn-reset:hover { color: #f1fa8c; border-color: #f1fa8c; }
.admin-action-btn.btn-eliminar:hover { color: #ff5555; border-color: #ff5555; }
/* ── Log de actividad ──────────────────────────────────── */
.log-exito { color: #50fa7b; font-weight: 600; font-size: 0.78rem; }
.log-fallo { color: #ff5555; font-weight: 600; font-size: 0.78rem; }
.log-accion {
font-size: 0.78rem;
background: rgba(255,255,255,0.06);
border-radius: 5px;
padding: 0.15rem 0.5rem;
color: rgba(255,255,255,0.7);
}
/* ══════════════════════════════════════════════════════════
MI CUENTA
══════════════════════════════════════════════════════════ */
/* Pestañas */
.cuenta-tabs {
display: flex;
gap: 4px;
margin-bottom: 24px;
border-bottom: 2px solid rgba(255,255,255,0.08);
padding-bottom: 0;
}
.cuenta-tab {
background: none;
border: none;
color: var(--text-muted);
font-size: 0.9rem;
font-weight: 500;
padding: 10px 20px;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: color 0.2s, border-color 0.2s;
}
.cuenta-tab:hover { color: var(--text); }
.cuenta-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
/* Paneles */
.cuenta-panel { display: none; }
.cuenta-panel.active { display: block; }
/* Grid de tarjetas */
.cuenta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 768px) {
.cuenta-grid { grid-template-columns: 1fr; }
}
/* Tarjeta */
.cuenta-card {
background: var(--card-bg);
border-radius: 14px;
padding: 24px;
}
.cuenta-card--full { grid-column: 1 / -1; }
.cuenta-card-title {
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.cuenta-card-title i { color: var(--accent); }
/* Header de tarjeta con botón Editar */
.cuenta-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.perfil-edit-btn {
display: flex;
align-items: center;
gap: 6px;
background: rgba(255,121,198,0.08);
border: 1px solid rgba(255,121,198,0.3);
color: var(--accent);
border-radius: 8px;
padding: 5px 14px;
font-size: 0.82rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.perfil-edit-btn:hover {
background: rgba(255,121,198,0.16);
border-color: rgba(255,121,198,0.6);
}
.perfil-edit-btn i { font-size: 0.75rem; }
/* Modo lectura — filas de datos */
.perfil-vista {
display: flex;
flex-direction: column;
gap: 0;
}
.perfil-fila {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding: 10px 0;
border-bottom: 1px solid rgba(74,51,102,0.4);
}
.perfil-fila:last-child { border-bottom: none; }
.perfil-label {
font-size: 0.78rem;
font-weight: 500;
color: var(--text-sec);
text-transform: uppercase;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.perfil-valor {
font-size: 0.92rem;
color: var(--text);
text-align: right;
}
/* Acciones del formulario de edición */
.perfil-form-actions {
display: flex;
gap: 0.75rem;
justify-content: flex-end;
margin-top: 4px;
}
/* Campos */
.cuenta-field {
margin-bottom: 16px;
}
.cuenta-field label {
display: block;
font-size: 0.78rem;
color: var(--text-muted);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.cuenta-input,
.cuenta-select {
width: 100%;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
color: var(--text);
padding: 9px 12px;
font-size: 0.9rem;
box-sizing: border-box;
transition: border-color 0.2s;
}
.cuenta-input:focus,
.cuenta-select:focus { outline: none; border-color: var(--accent); }
.cuenta-input:disabled,
.cuenta-select:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.cuenta-select {
background-color: #2c1e42;
appearance: none;
cursor: pointer;
}
.cuenta-select option { background: #2c1e42; color: var(--text); }
/* Botón guardar */
.cuenta-btn {
margin-top: 8px;
width: 100%;
padding: 11px;
background: linear-gradient(135deg, var(--accent), #bd93f9);
border: none;
border-radius: 8px;
color: #fff;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: opacity 0.2s;
}
.cuenta-btn:hover { opacity: 0.88; }
/* Mensajes de feedback */
.cuenta-msg {
font-size: 0.84rem;
min-height: 0;
margin: 12px 0 0;
padding: 0;
border-radius: 8px;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.25s ease, opacity 0.25s ease, padding 0.25s ease;
}
.cuenta-msg.visible {
max-height: 60px;
opacity: 1;
padding: 10px 14px;
}
.cuenta-msg--ok {
background: rgba(80,250,123,0.12);
border: 1px solid rgba(80,250,123,0.3);
color: #50fa7b;
}
.cuenta-msg--error {
background: rgba(255,85,85,0.12);
border: 1px solid rgba(255,85,85,0.3);
color: #ff5555;
}
/* Loading / empty */
.cuenta-loading { color: var(--text-muted); font-size: 0.88rem; padding: 12px 0; }
.cuenta-empty { color: var(--text-muted); font-size: 0.88rem; padding: 12px 0; }
/* Tabla actividad */
.cuenta-table {
width: 100%;
border-collapse: collapse;
font-size: 0.84rem;
}
.cuenta-table th {
text-align: left;
color: var(--text-muted);
font-weight: 500;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 6px 10px 10px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cuenta-table td {
padding: 9px 10px;
border-bottom: 1px solid rgba(255,255,255,0.05);
color: var(--text);
vertical-align: middle;
}
.cuenta-table tr:last-child td { border-bottom: none; }
.log-ip { color: var(--text-muted); font-size: 0.8rem; }
/* Grid Mi uso */
.cuenta-uso-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 14px;
}
.uso-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 16px;
}
.uso-card-nombres {
font-weight: 600;
font-size: 0.95rem;
margin-bottom: 10px;
color: var(--text);
}
.uso-card-nombres span { color: var(--accent); margin: 0 6px; }
.uso-card-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 0.78rem;
color: var(--text-muted);
margin-bottom: 8px;
}
.uso-card-meta i { color: var(--accent); margin-right: 4px; }
.uso-card-fecha {
font-size: 0.75rem;
color: var(--text-muted);
opacity: 0.7;
}
/* Header de card con botón eliminar */
.uso-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
margin-bottom: 4px;
}
.uso-card-header .uso-card-nombres {
margin-bottom: 0;
flex: 1;
min-width: 0;
}
.uso-card-delete {
flex-shrink: 0;
background: transparent;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 6px;
color: var(--text-muted);
cursor: pointer;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
transition: background 0.15s, border-color 0.15s, color 0.15s;
padding: 0;
line-height: 1;
}
.uso-card-delete:hover {
background: rgba(239,68,68,0.12);
border-color: rgba(239,68,68,0.4);
color: #ef4444;
}
.uso-card-delete--confirm {
background: rgba(245,158,11,0.15);
border-color: rgba(245,158,11,0.5);
color: #f59e0b;
width: auto;
padding: 0 8px;
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
gap: 4px;
}
.uso-card-delete--confirm:hover {
background: rgba(239,68,68,0.2);
border-color: rgba(239,68,68,0.6);
color: #ef4444;
}
/* Estados de eliminación */
.uso-card--eliminando {
opacity: 0.45;
pointer-events: none;
transition: opacity 0.2s;
}
.uso-card--eliminada {
overflow: hidden;
opacity: 0;
max-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin: 0 !important;
border-width: 0 !important;
transition: opacity 0.25s ease, max-height 0.35s ease, padding 0.35s ease,
margin 0.35s ease, border-width 0.35s ease;
}
/* ── Banner de seguimiento post-análisis ─────────────────── */
.uso-seguimiento-banner {
margin-top: 12px;
padding: 12px 14px;
background: rgba(160, 64, 232, 0.08);
border: 1px solid rgba(160, 64, 232, 0.22);
border-radius: 10px;
}
.uso-seg-pregunta {
font-size: 0.82rem;
color: var(--text-muted);
margin: 0 0 10px;
line-height: 1.4;
}
.uso-seg-pregunta strong { color: var(--text); font-weight: 600; }
.uso-seg-btns {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.uso-seg-btn {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 20px;
color: var(--text);
cursor: pointer;
font-size: 0.78rem;
padding: 4px 12px;
transition: background 0.15s, border-color 0.15s, color 0.15s;
line-height: 1.6;
}
.uso-seg-btn:hover:not(:disabled) {
background: rgba(160,64,232,0.2);
border-color: rgba(160,64,232,0.5);
color: #d580ff;
}
.uso-seg-btn:disabled { opacity: 0.4; cursor: default; }
.uso-seg-btn--skip {
color: var(--text-muted);
font-size: 0.73rem;
}
/* Estado ya respondido */
.uso-seguimiento-respondido {
margin-top: 10px;
font-size: 0.78rem;
color: var(--text-muted);
opacity: 0.75;
display: flex;
align-items: center;
gap: 6px;
}
.uso-seguimiento-respondido span { display: flex; align-items: center; gap: 4px; }
/* Animación de entrada al guardar */
.uso-seguimiento-respondido--nuevo {
opacity: 0;
transition: opacity 0.3s ease;
}
.uso-seguimiento-respondido--nuevo.visible { opacity: 0.75; }
/* Plan placeholder */
.cuenta-plan-placeholder { margin-top: 16px; opacity: 0.6; }
.cuenta-plan-txt { color: var(--text-muted); font-size: 0.88rem; margin: 0; }
/* ── Loading overlay dashboard ─────────────────────────── */
.dash-loading-overlay {
position: absolute;
inset: 0;
background: rgba(53, 41, 74, 0.85);
backdrop-filter: blur(3px);
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
}
.dash-loading-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.dash-spinner {
width: 44px;
height: 44px;
border: 4px solid rgba(255,121,198,0.2);
border-top-color: var(--accent);
border-radius: 50%;
animation: dash-spin 0.75s linear infinite;
}
@keyframes dash-spin {
to { transform: rotate(360deg); }
}
.dash-loading-text {
color: var(--text-muted);
font-size: 0.9rem;
margin: 0;
}
/* El contenedor padre necesita position:relative para que el overlay lo cubra */
#view-dashboard {
position: relative;
}
/* ── Modal detalle usuario ─────────────────────────────── */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 500;
background: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.modal-overlay.active {
opacity: 1;
pointer-events: all;
}
.modal-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 18px;
width: 100%;
max-width: 480px;
max-height: 90vh;
overflow-y: auto;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.2rem 1.4rem;
border-bottom: 1px solid var(--border);
}
.modal-header h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--text);
}
.modal-close {
background: none;
border: none;
color: rgba(255,255,255,0.4);
font-size: 1.1rem;
cursor: pointer;
padding: 0.3rem;
transition: color 0.15s;
}
.modal-close:hover { color: var(--text); }
.modal-body {
padding: 1.4rem;
}
.modal-field {
display: flex;
flex-direction: column;
gap: 3px;
margin-bottom: 1rem;
}
.modal-field-label {
font-size: 0.75rem;
color: rgba(255,255,255,0.4);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.modal-field-value {
font-size: 0.92rem;
color: var(--text);
}
/* ── Plan actual (Mi cuenta → Mi uso) ─────────────────────────────────────── */
.plan-current-card { padding: 24px; }
.plan-current-body {
margin: 16px 0 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.plan-current-info {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.plan-current-name {
font-size: 1.25rem;
font-weight: 700;
color: #fff;
letter-spacing: 0.01em;
}
.plan-current-price {
font-size: 1.1rem;
color: #bd93f9;
font-weight: 600;
}
.plan-period {
font-size: 0.8rem;
color: rgba(255,255,255,0.45);
margin-left: 2px;
}
.plan-usage-wrap { display: flex; flex-direction: column; gap: 6px; }
.plan-usage-bar {
width: 100%;
height: 8px;
background: rgba(255,255,255,0.1);
border-radius: 99px;
overflow: hidden;
}
.plan-usage-fill {
height: 100%;
border-radius: 99px;
background: linear-gradient(90deg, #bd93f9, #ff79c6);
transition: width 0.5s ease;
}
.plan-usage-fill--warning { background: linear-gradient(90deg, #f1fa8c, #ffb86c); }
.plan-usage-fill--danger { background: linear-gradient(90deg, #ff5555, #ff79c6); }
.plan-usage-text {
font-size: 0.82rem;
color: rgba(255,255,255,0.55);
margin: 0;
}
.plan-renewal-text {
font-size: 0.85rem;
color: rgba(255,255,255,0.45);
margin: 0;
}
.plan-current-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.cuenta-btn--ghost {
background: transparent;
border: 1px solid rgba(255,255,255,0.18);
color: rgba(255,255,255,0.55);
}
.cuenta-btn--ghost:hover {
border-color: rgba(255,120,120,0.5);
color: #ff6e6e;
}
/* ── Modal de planes ─────────────────────────────────────────────────────────── */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(10,5,20,0.82);
display: flex;
align-items: center;
justify-content: center;
z-index: 400;
padding: 16px;
backdrop-filter: blur(4px);
}
.modal-box {
background: #2c1e42;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
width: 100%;
max-width: 720px;
max-height: 90vh;
overflow-y: auto;
padding: 28px;
box-shadow: 0 24px 60px rgba(0,0,0,0.7);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.modal-header h2 {
font-size: 1.2rem;
font-weight: 700;
color: #fff;
margin: 0;
}
.modal-close-btn {
background: rgba(255,255,255,0.08);
border: none;
color: rgba(255,255,255,0.6);
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: background 0.15s, color 0.15s;
}
.modal-close-btn:hover { background: rgba(255,80,80,0.2); color: #ff6e6e; }
/* Grid de tarjetas de plan */
.planes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
}
.planes-loading {
text-align: center;
color: rgba(255,255,255,0.5);
padding: 32px 0;
font-size: 0.95rem;
}
.plan-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
padding: 20px 16px;
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
transition: border-color 0.2s, background 0.2s;
}
.plan-card:hover { border-color: rgba(189,147,249,0.5); background: rgba(189,147,249,0.06); }
.plan-card--active {
border-color: #bd93f9;
background: rgba(189,147,249,0.08);
}
.plan-card-badge {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #bd93f9, #ff79c6);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
padding: 3px 10px;
border-radius: 99px;
white-space: nowrap;
}
.plan-card-name {
font-size: 1rem;
font-weight: 700;
color: #fff;
margin-top: 8px;
}
.plan-card-price {
display: flex;
align-items: baseline;
gap: 3px;
}
.plan-price-amount {
font-size: 1.4rem;
font-weight: 800;
color: #bd93f9;
}
.plan-price-free {
font-size: 1.2rem;
font-weight: 800;
color: #50fa7b;
}
.plan-price-period {
font-size: 0.78rem;
color: rgba(255,255,255,0.4);
}
.plan-card-limit {
font-size: 0.82rem;
color: rgba(255,255,255,0.55);
}
.plan-card-desc {
font-size: 0.8rem;
color: rgba(255,255,255,0.4);
margin: 0;
line-height: 1.4;
}
.plan-card-btn {
margin-top: auto;
padding: 10px 0;
border-radius: 8px;
border: none;
background: linear-gradient(135deg, #bd93f9, #ff79c6);
color: #fff;
font-weight: 600;
font-size: 0.88rem;
cursor: pointer;
transition: opacity 0.15s, transform 0.1s;
}
.plan-card-btn:hover:not([disabled]) { opacity: 0.9; transform: translateY(-1px); }
.plan-card-btn--disabled {
background: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.4);
cursor: default;
}
.planes-error {
color: #ff6e6e;
font-size: 0.88rem;
text-align: center;
padding: 16px 0 0;
margin: 0;
}
.plan-card--selected {
border-color: #ff79c6;
background: rgba(255,121,198,0.1);
box-shadow: 0 0 0 2px rgba(255,121,198,0.3);
}
.plan-confirm-section {
margin-top: 20px;
padding: 16px 20px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,121,198,0.3);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.plan-confirm-info {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.plan-confirm-label {
font-size: 0.82rem;
color: rgba(255,255,255,0.5);
}
.plan-confirm-nombre {
font-weight: 700;
color: #fff;
font-size: 0.95rem;
}
.plan-confirm-precio {
font-weight: 700;
color: #ff79c6;
font-size: 0.95rem;
}
.plan-confirm-btn {
padding: 10px 24px;
border-radius: 8px;
border: none;
background: linear-gradient(135deg, #bd93f9, #ff79c6);
color: #fff;
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
white-space: nowrap;
transition: opacity 0.15s, transform 0.1s;
display: flex;
align-items: center;
gap: 8px;
}
.plan-confirm-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.plan-confirm-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.plan-card-soon {
margin: 6px 0 0;
font-size: 0.75rem;
color: rgba(255,255,255,0.35);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
/* Aviso de plan vigente en modal de selección */
.planes-activo-msg {
display: none;
align-items: flex-start;
gap: 10px;
background: rgba(255, 184, 0, 0.08);
border: 1px solid rgba(255, 184, 0, 0.3);
border-left: 3px solid #ffb800;
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 16px;
color: rgba(255, 255, 255, 0.85);
font-size: 0.85rem;
line-height: 1.5;
}
.planes-activo-msg.visible {
display: flex;
}
.planes-activo-msg i {
color: #ffb800;
font-size: 1rem;
flex-shrink: 0;
margin-top: 1px;
}
@media (max-width: 768px) {
.plan-current-info { flex-direction: column; gap: 4px; }
.plan-current-actions { flex-direction: column; }
.planes-grid { grid-template-columns: 1fr 1fr; }
.modal-box { padding: 20px 16px; }
.planes-activo-msg { font-size: 0.8rem; padding: 10px 12px; }
}
/* ══════════════════════════════════════════════════════════
AYUDA / MANUAL DE USUARIO
══════════════════════════════════════════════════════════ */
.ayuda-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.4rem;
margin-top: 1.6rem;
}
.ayuda-section {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
}
.ayuda-section-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1.1rem 1.3rem;
background: rgba(160, 64, 232, 0.08);
border-bottom: 1px solid var(--border);
}
.ayuda-section-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(255,121,198,0.2), rgba(189,147,249,0.2));
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
font-size: 1rem;
flex-shrink: 0;
}
.ayuda-section-header h2 {
font-size: 1rem;
font-weight: 600;
color: var(--text);
margin: 0;
}
/* Acordeón */
.ayuda-accordion {
padding: 0.5rem 0;
}
.ayuda-item {
border-bottom: 1px solid rgba(74, 51, 102, 0.5);
}
.ayuda-item:last-child {
border-bottom: none;
}
.ayuda-item-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 1.3rem;
background: none;
border: none;
color: var(--text);
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: background 0.2s, color 0.2s;
}
.ayuda-item-btn:hover {
background: rgba(255,121,198,0.06);
color: var(--accent);
}
.ayuda-item-btn i {
font-size: 0.75rem;
color: var(--text-sec);
flex-shrink: 0;
transition: transform 0.25s ease, color 0.2s;
}
.ayuda-item.open .ayuda-item-btn {
color: var(--accent);
}
.ayuda-item.open .ayuda-item-btn i {
transform: rotate(180deg);
color: var(--accent);
}
.ayuda-item-body {
display: none;
padding: 0 1.3rem 1.1rem;
font-size: 0.875rem;
color: var(--text-sec);
line-height: 1.65;
}
.ayuda-item.open .ayuda-item-body {
display: block;
}
/* Listas dentro del manual */
.ayuda-steps {
padding-left: 1.2rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
color: var(--text-sec);
}
.ayuda-list {
padding-left: 1.2rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
color: var(--text-sec);
list-style: disc;
}
.ayuda-steps li,
.ayuda-list li {
font-size: 0.875rem;
line-height: 1.55;
}
/* Tip destacado */
.ayuda-tip {
display: flex;
gap: 0.6rem;
align-items: flex-start;
margin-top: 0.9rem;
background: rgba(255, 184, 108, 0.08);
border-left: 3px solid #ffb86c;
border-radius: 0 8px 8px 0;
padding: 0.65rem 0.9rem;
font-size: 0.83rem;
color: #ffb86c;
line-height: 1.5;
}
.ayuda-tip i {
flex-shrink: 0;
margin-top: 2px;
font-size: 0.85rem;
}
/* Código inline */
.ayuda-code {
margin-top: 0.7rem;
background: rgba(0,0,0,0.3);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.6rem 0.9rem;
font-family: monospace;
font-size: 0.82rem;
color: #8be9fd;
overflow-x: auto;
}
code {
font-family: monospace;
background: rgba(0,0,0,0.25);
border-radius: 4px;
padding: 1px 5px;
font-size: 0.85em;
color: #8be9fd;
}
/* Tags de temas */
.ayuda-temas-grid {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.75rem;
}
.ayuda-tema-tag {
background: rgba(189,147,249,0.12);
border: 1px solid rgba(189,147,249,0.3);
border-radius: 20px;
padding: 3px 12px;
font-size: 0.8rem;
color: #bd93f9;
white-space: nowrap;
}
/* Responsive ayuda-grid */
@media (max-width: 1024px) {
.ayuda-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.ayuda-section-header { padding: 0.9rem 1rem; }
.ayuda-item-btn { padding: 0.8rem 1rem; font-size: 0.85rem; }
.ayuda-item-body { padding: 0 1rem 0.9rem; }
}
/* ── Acerca de ──────────────────────────────────────────── */
.ayuda-about {
margin-top: 1.4rem;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
}
/* Header: logo + texto */
.about-header {
display: flex;
gap: 2rem;
align-items: flex-start;
padding: 2rem 2rem 1.6rem;
border-bottom: 1px solid var(--border);
}
.about-logo-wrap {
flex-shrink: 0;
width: 120px;
height: 120px;
background: #fff;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.about-logo-img {
width: 100%;
height: auto;
display: block;
}
.about-meta {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.about-title {
font-size: 1.7rem;
font-weight: 700;
color: var(--text);
margin: 0;
line-height: 1;
}
.about-version-badge {
display: inline-block;
background: linear-gradient(135deg, rgba(255,121,198,0.2), rgba(189,147,249,0.2));
border: 1px solid rgba(189,147,249,0.4);
color: #bd93f9;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.05em;
padding: 2px 10px;
border-radius: 20px;
width: fit-content;
}
.about-desc {
font-size: 0.875rem;
color: var(--text-sec);
line-height: 1.65;
margin: 0;
}
.about-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.2rem;
}
.about-tag {
display: flex;
align-items: center;
gap: 5px;
background: rgba(255,255,255,0.05);
border: 1px solid var(--border);
border-radius: 20px;
padding: 3px 12px;
font-size: 0.78rem;
color: var(--text-sec);
}
.about-tag i {
color: var(--accent);
font-size: 0.75rem;
}
/* Historial de versiones */
.about-changelog {
padding: 1.6rem 2rem;
}
.changelog-title {
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 1.4rem;
}
.changelog-title i {
color: var(--accent);
font-size: 0.9rem;
}
.changelog-list {
display: flex;
flex-direction: column;
gap: 0;
border-left: 2px solid var(--border);
padding-left: 1.4rem;
margin-left: 0.4rem;
}
.changelog-entry {
position: relative;
padding-bottom: 2rem;
}
.changelog-entry:last-child {
padding-bottom: 0;
}
.changelog-dot {
position: absolute;
left: -1.85rem;
top: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--border);
border: 2px solid var(--card-bg);
}
.changelog-entry--current .changelog-dot {
background: var(--accent);
box-shadow: 0 0 8px rgba(255,121,198,0.6);
}
.changelog-header {
display: flex;
align-items: center;
gap: 0.7rem;
margin-bottom: 0.5rem;
flex-wrap: wrap;
}
.changelog-version {
font-size: 1rem;
font-weight: 700;
color: var(--text);
}
.changelog-date {
font-size: 0.82rem;
color: var(--text-sec);
}
.changelog-badge {
font-size: 0.72rem;
font-weight: 600;
padding: 1px 9px;
border-radius: 20px;
letter-spacing: 0.04em;
}
.changelog-badge--new {
background: rgba(255,121,198,0.15);
color: var(--accent);
border: 1px solid rgba(255,121,198,0.3);
}
.changelog-badge--stable {
background: rgba(80,250,123,0.1);
color: #50fa7b;
border: 1px solid rgba(80,250,123,0.3);
}
.changelog-summary {
font-size: 0.875rem;
color: var(--text-sec);
margin-bottom: 0.7rem;
}
.changelog-items {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.changelog-items li {
font-size: 0.845rem;
color: var(--text-sec);
padding-left: 1.1rem;
position: relative;
line-height: 1.5;
}
.changelog-items li::before {
content: '✦';
position: absolute;
left: 0;
font-size: 0.55rem;
top: 4px;
color: var(--accent);
opacity: 0.7;
}
/* Footer */
.about-footer {
text-align: center;
font-size: 0.8rem;
color: var(--text-sec);
padding: 1rem 2rem 1.4rem;
border-top: 1px solid var(--border);
opacity: 0.7;
}
.about-link {
color: var(--accent);
text-decoration: none;
}
.about-link:hover {
text-decoration: underline;
}
/* Responsive acerca de */
@media (max-width: 768px) {
.about-header { flex-direction: column; gap: 1.2rem; padding: 1.4rem; }
.about-logo-wrap { width: 80px; height: 80px; border-radius: 16px; }
.about-changelog { padding: 1.2rem 1.4rem; }
.changelog-list { padding-left: 1rem; }
.changelog-dot { left: -1.45rem; }
}
/* ══════════════════════════════════════════════════════════
TÉRMINOS Y CONDICIONES — Checkbox registro + Modal
══════════════════════════════════════════════════════════ */
/* Checkbox en el registro */
.auth-tc-wrap {
margin: 4px 0 12px;
}
.auth-tc-label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: 0.85rem;
color: var(--text-sec);
line-height: 1.5;
}
.auth-tc-label input[type="checkbox"] {
margin-top: 2px;
flex-shrink: 0;
width: 16px;
height: 16px;
accent-color: var(--accent);
cursor: pointer;
}
.auth-link {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
}
/* ── Estilos del contenido T&C inyectado en modal ────────────────────────── */
.tc-doc { font-size: 0.9rem; line-height: 1.7; color: var(--text); }
.tc-h1 { font-size: 1.3rem; font-weight: 800; color: var(--accent-purple); margin-bottom: 0.4rem; }
.tc-meta-doc { font-size: 0.8rem; color: var(--text-sec); margin-bottom: 1rem; }
.tc-doc h2 { font-size: 1rem; font-weight: 700; color: var(--accent-purple); border-bottom: 1px solid rgba(189,147,249,0.2); padding-bottom: 0.4rem; margin: 1.4rem 0 0.6rem; }
.tc-doc h3 { font-size: 0.9rem; font-weight: 700; color: var(--text); margin: 1rem 0 0.4rem; }
.tc-doc p { margin-bottom: 0.7rem; }
.tc-doc ul, .tc-doc ol { padding-left: 1.4rem; margin-bottom: 0.7rem; }
.tc-doc li { margin-bottom: 0.3rem; }
.tc-aviso { background: rgba(109,40,217,0.15); border-left: 3px solid var(--accent-purple); border-radius: 6px; padding: 0.8rem 1rem; margin: 0.8rem 0; font-size: 0.88rem; }
.tc-warning { background: rgba(249,115,22,0.1); border-left: 3px solid #f97316; border-radius: 6px; padding: 0.8rem 1rem; margin: 0.8rem 0; font-size: 0.88rem; }
.tc-highlight { background: rgba(109,40,217,0.1); border-left: 3px solid var(--accent-purple); border-radius: 6px; padding: 0.8rem 1rem; margin: 0.8rem 0; font-size: 0.88rem; }
.tc-legal { font-size: 0.78rem; color: var(--text-sec); font-style: italic; margin-top: -0.3rem; }
.tc-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 0.8rem 0; }
.tc-table th { background: rgba(109,40,217,0.3); color: var(--text); padding: 0.5rem 0.8rem; text-align: left; font-weight: 700; }
.tc-table td { padding: 0.5rem 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.07); vertical-align: top; }
.tc-table tr:nth-child(even) td { background: rgba(255,255,255,0.03); }
.tc-footer-doc { font-size: 0.78rem; color: var(--text-sec); text-align: center; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.08); }
/* Modal T&C */
.modal-box--tc {
max-width: 680px;
width: 95%;
max-height: 85vh;
display: flex;
flex-direction: column;
}
.tc-meta {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 1.5rem;
background: rgba(189,147,249,0.07);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.tc-meta-version {
background: rgba(189,147,249,0.15);
border: 1px solid rgba(189,147,249,0.35);
color: #bd93f9;
font-size: 0.78rem;
font-weight: 600;
padding: 2px 10px;
border-radius: 20px;
}
.tc-meta-fecha {
font-size: 0.8rem;
color: var(--text-sec);
}
.tc-body {
overflow-y: auto;
padding: 1.4rem 1.5rem;
font-size: 0.875rem;
color: var(--text-sec);
line-height: 1.7;
flex: 1;
}
.tc-body p { margin-bottom: 0.8rem; }
.tc-body h2, .tc-body h3 { color: var(--text); margin: 1.2rem 0 0.5rem; }
.tc-body ul, .tc-body ol { padding-left: 1.4rem; margin-bottom: 0.8rem; }
.tc-body li { margin-bottom: 0.3rem; }
.tc-body strong { color: var(--text); }
.tc-loading {
color: var(--text-sec);
font-style: italic;
text-align: center;
padding: 2rem 0;
}
@media (max-width: 768px) {
.modal-box--tc { max-height: 92vh; }
.tc-body { padding: 1rem; }
}
/* ── Overlay de Re-consentimiento ─────────────────────────────────────────── */
.recons-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(10, 4, 22, 0.96);
backdrop-filter: blur(8px);
align-items: center;
justify-content: center;
padding: 1rem;
}
.recons-overlay.active { display: flex; }
.recons-box {
background: var(--card-bg, #1e1230);
border: 1px solid rgba(189,147,249,0.25);
border-radius: 16px;
width: 100%;
max-width: 680px;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}
.recons-header {
padding: 1.5rem 2rem 1rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
text-align: center;
}
.recons-icon {
width: 52px; height: 52px;
background: linear-gradient(135deg, #6d28d9, #c026d3);
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem; color: #fff;
margin: 0 auto 0.8rem;
}
.recons-header h2 { font-size: 1.2rem; font-weight: 800; color: var(--text); margin: 0 0 0.4rem; }
.recons-subtitulo { font-size: 0.9rem; color: var(--text-sec); margin: 0; line-height: 1.5; }
.recons-version-badge {
margin: 0.6rem 2rem 0;
display: inline-block;
font-size: 0.78rem;
font-weight: 700;
background: rgba(109,40,217,0.2);
border: 1px solid rgba(189,147,249,0.3);
border-radius: 20px;
padding: 0.2rem 0.8rem;
color: #a78bfa;
align-self: flex-start;
}
.recons-body {
overflow-y: auto;
padding: 1.2rem 2rem;
flex: 1;
scrollbar-width: thin;
scrollbar-color: rgba(255,121,198,0.3) transparent;
}
.recons-footer {
padding: 1.2rem 2rem;
border-top: 1px solid rgba(255,255,255,0.08);
background: rgba(0,0,0,0.2);
}
.recons-check-label {
display: flex;
align-items: flex-start;
gap: 0.6rem;
cursor: pointer;
font-size: 0.88rem;
color: var(--text);
margin-bottom: 0.8rem;
line-height: 1.4;
}
.recons-check-label input { margin-top: 2px; accent-color: #7c3aed; flex-shrink: 0; }
.recons-error {
font-size: 0.82rem;
color: #ff5555;
min-height: 1.2em;
margin-bottom: 0.6rem;
}
.recons-btn {
width: 100%;
background: linear-gradient(135deg, #7c3aed, #c026d3);
color: #fff;
border: none;
border-radius: 10px;
padding: 0.85rem 1.5rem;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
transition: opacity 0.2s;
margin-bottom: 0.6rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.recons-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.recons-btn:not(:disabled):hover { opacity: 0.9; }
.recons-aviso {
font-size: 0.78rem;
color: var(--text-sec);
text-align: center;
margin: 0 0 0.6rem;
}
.recons-btn-logout {
width: 100%;
background: transparent;
border: 1px solid rgba(255,255,255,0.15);
color: var(--text-sec);
border-radius: 8px;
padding: 0.6rem;
font-size: 0.85rem;
cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 0.4rem;
transition: border-color 0.2s;
}
.recons-btn-logout:hover { border-color: rgba(255,255,255,0.3); color: var(--text); }
@media (max-width: 600px) {
.recons-box { border-radius: 12px; max-height: 95vh; }
.recons-header { padding: 1.2rem 1.2rem 0.8rem; }
.recons-body { padding: 1rem 1.2rem; }
.recons-footer { padding: 1rem 1.2rem; }
.recons-version-badge { margin-left: 1.2rem; }
}
/* ── Admin: Gestión de T&C ────────────────────────────────────────────────── */
.tos-admin-resumen {
display: flex;
gap: 1rem;
margin-bottom: 1.2rem;
flex-wrap: wrap;
}
.tos-stat {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 0.8rem 1.2rem;
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 160px;
}
.tos-stat-label { font-size: 0.78rem; color: var(--text-sec); }
.tos-stat-val { font-size: 1.2rem; font-weight: 800; color: var(--text); }
.tos-form-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 1.5rem;
margin-top: 1.2rem;
}
.tos-form-card h4 { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0 0 0.4rem; }
.tos-form-hint { font-size: 0.82rem; color: var(--text-sec); margin: 0 0 1.2rem; line-height: 1.5; }
.tos-form-row { display: flex; gap: 1rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.tos-form-group { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 160px; }
.tos-form-group--wide { flex: 2; }
.tos-form-group label { font-size: 0.82rem; color: var(--text-sec); font-weight: 600; }
.tos-form-group label .req { color: #ff5555; }
.tos-input {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 8px;
padding: 0.55rem 0.9rem;
color: var(--text);
font-size: 0.9rem;
transition: border-color 0.2s;
}
.tos-input:focus { outline: none; border-color: rgba(189,147,249,0.5); }
.tos-textarea {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 8px;
padding: 0.7rem 0.9rem;
color: var(--text);
font-size: 0.82rem;
font-family: 'Courier New', monospace;
resize: vertical;
width: 100%;
box-sizing: border-box;
transition: border-color 0.2s;
line-height: 1.5;
}
.tos-textarea:focus { outline: none; border-color: rgba(189,147,249,0.5); }
.tos-preview-wrap {
border: 1px solid rgba(189,147,249,0.25);
border-radius: 8px;
margin-bottom: 1rem;
overflow: hidden;
}
.tos-preview-header {
background: rgba(109,40,217,0.15);
padding: 0.5rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
font-weight: 600;
color: #a78bfa;
}
.tos-btn-cerrar-preview {
background: transparent;
border: none;
color: var(--text-sec);
cursor: pointer;
font-size: 0.85rem;
}
.tos-preview-body {
max-height: 400px;
overflow-y: auto;
padding: 1rem 1.5rem;
font-size: 0.85rem;
color: var(--text);
scrollbar-width: thin;
}
.tos-form-actions {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.8rem;
margin-top: 0.8rem;
}
.tos-check-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: var(--text-sec);
cursor: pointer;
}
.tos-check-label input { accent-color: #7c3aed; }
.tos-btns { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.tos-form-msg {
margin-top: 0.8rem;
font-size: 0.85rem;
padding: 0.5rem 0.8rem;
border-radius: 6px;
min-height: 1em;
}
.tos-form-msg--ok { background: rgba(80,250,123,0.1); color: #50fa7b; }
.tos-form-msg--error { background: rgba(255,85,85,0.1); color: #ff5555; }
.admin-btn--primary {
background: linear-gradient(135deg, #7c3aed, #c026d3);
color: #fff; border: none;
padding: 0.6rem 1.2rem;
border-radius: 8px;
font-size: 0.87rem;
font-weight: 700;
cursor: pointer;
display: flex; align-items: center; gap: 0.4rem;
transition: opacity 0.2s;
}
.admin-btn--primary:hover { opacity: 0.85; }
.admin-btn--secondary {
background: rgba(255,255,255,0.06);
color: var(--text);
border: 1px solid rgba(255,255,255,0.12);
padding: 0.6rem 1.2rem;
border-radius: 8px;
font-size: 0.87rem;
font-weight: 600;
cursor: pointer;
display: flex; align-items: center; gap: 0.4rem;
transition: background 0.2s;
}
.admin-btn--secondary:hover { background: rgba(255,255,255,0.1); }
@media (max-width: 768px) {
.tos-admin-resumen { flex-direction: column; }
.tos-form-row { flex-direction: column; }
.tos-form-actions { flex-direction: column; align-items: flex-start; }
.tos-btns { width: 100%; }
.admin-btn--primary, .admin-btn--secondary { width: 100%; justify-content: center; }
}
/* ── Documentos tributarios ── */
.admin-btn {
background: rgba(255,255,255,0.06);
color: var(--text);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 7px;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
padding: 0.45rem 0.85rem;
display: inline-flex; align-items: center; gap: 0.35rem;
transition: background 0.2s;
text-decoration: none;
}
.admin-btn:hover { background: rgba(255,255,255,0.12); }
.admin-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.admin-btn--sm { padding: 0.35rem 0.65rem; font-size: 0.78rem; }
.docs-config-bar {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 0.85rem 1.1rem;
margin-bottom: 1.25rem;
}
.docs-config-label {
color: rgba(255,255,255,0.55);
font-size: 0.85rem;
display: flex; align-items: center; gap: 0.4rem;
}
.docs-modo-select {
background: #2c1e42;
color: var(--text);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 7px;
padding: 0.4rem 0.75rem;
font-size: 0.85rem;
cursor: pointer;
}
.docs-config-hint {
font-size: 0.8rem;
color: rgba(255,255,255,0.45);
font-style: italic;
}
.docs-config-hint--automatico { color: #bd93f9; }
.docs-pendientes-badge {
background: linear-gradient(135deg, #bd93f9, #ff79c6);
color: #fff;
font-size: 0.78rem;
font-weight: 700;
padding: 0.25rem 0.75rem;
border-radius: 20px;
}
.admin-input-month {
background: #2c1e42;
color: var(--text);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 7px;
padding: 0.4rem 0.75rem;
font-size: 0.85rem;
}
.admin-input-month::-webkit-calendar-picker-indicator {
filter: invert(1) opacity(0.5);
}
.docs-estado {
display: inline-block;
font-size: 0.8rem;
font-weight: 600;
padding: 0.2rem 0.6rem;
border-radius: 6px;
}
.docs-estado--pendiente {
background: rgba(255,184,0,0.15);
color: #ffc107;
}
.docs-estado--enviado {
background: rgba(80,200,120,0.15);
color: #50c878;
}
.docs-acciones {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
align-items: center;
}
.docs-btn-upload { position: relative; cursor: pointer; }
.docs-email { font-size: 0.82rem; color: rgba(255,255,255,0.6); }
.docs-table-msg {
min-height: 1.5rem;
font-size: 0.85rem;
padding: 0.4rem 0;
transition: opacity 0.3s;
}
.docs-table-msg--ok { color: #50c878; }
.docs-table-msg--error { color: #ff5555; }
@media (max-width: 768px) {
.docs-config-bar { flex-direction: column; align-items: flex-start; }
.docs-email { display: none; }
}
/* ══════════════════════════════════════════════════════════
OTP — Verificación de email (paso 3 de registro)
══════════════════════════════════════════════════════════ */
.otp-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
text-align: center;
}
.otp-icon {
font-size: 2rem;
color: #a040e8;
}
.otp-desc {
font-size: 0.92rem;
color: rgba(255,255,255,0.75);
line-height: 1.5;
}
.otp-desc strong { color: #fff; }
/* Contenedor de los 6 campos */
.otp-inputs {
display: flex;
gap: 0.5rem;
justify-content: center;
margin-bottom: 1.25rem;
}
/* Campo individual de dígito */
.otp-digit {
width: 44px;
height: 56px;
text-align: center;
font-size: 1.5rem;
font-family: 'Courier New', Courier, monospace;
font-weight: 700;
color: #fff;
background: rgba(255,255,255,0.07);
border: 2px solid rgba(160,64,232,0.5);
border-radius: 10px;
outline: none;
caret-color: #a040e8;
transition: border-color 0.2s, background 0.2s;
}
.otp-digit:focus {
border-color: #a040e8;
background: rgba(160,64,232,0.12);
}
.otp-digit--ok {
border-color: #50c878;
background: rgba(80,200,120,0.1);
}
.otp-digit--err {
border-color: #ff5555;
background: rgba(255,85,85,0.1);
animation: otp-shake 0.3s ease;
}
@keyframes otp-shake {
0%,100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
/* Sección reenvío */
.otp-resend {
display: flex;
align-items: center;
gap: 0.4rem;
justify-content: center;
margin-top: 1rem;
font-size: 0.85rem;
color: rgba(255,255,255,0.55);
flex-wrap: wrap;
}
/* Botón tipo link */
.auth-link-btn {
background: none;
border: none;
color: #a040e8;
cursor: pointer;
font-size: 0.85rem;
padding: 0;
text-decoration: underline;
transition: color 0.2s;
}
.auth-link-btn:hover { color: #c070f0; }
.auth-link-btn:disabled {
color: rgba(255,255,255,0.3);
cursor: not-allowed;
text-decoration: none;
}
#otp-countdown {
color: rgba(255,255,255,0.4);
font-size: 0.8rem;
}
/* Banner: email no verificado en pantalla de login */
.login-unverified-banner {
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(255,184,0,0.12);
border: 1px solid rgba(255,184,0,0.35);
border-radius: 8px;
padding: 0.65rem 0.85rem;
font-size: 0.85rem;
color: #ffc107;
margin-bottom: 0.75rem;
flex-wrap: wrap;
}
.login-unverified-banner .auth-link-btn {
color: #ffc107;
font-size: 0.85rem;
}
.login-unverified-banner .auth-link-btn:hover { color: #ffe066; }
@media (max-width: 480px) {
.otp-digit { width: 38px; height: 50px; font-size: 1.3rem; }
.otp-inputs { gap: 0.35rem; }
}
/* ══════════════════════════════════════════════════════════
ANÁLISIS IA — Botón trigger + Drawer
══════════════════════════════════════════════════════════ */
/* ── Botón IA en la barra de período ───────────────────── */
.ia-trigger-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.85rem;
background: linear-gradient(135deg, rgba(160,64,232,0.2), rgba(232,93,154,0.2));
border: 1px solid rgba(160,64,232,0.5);
border-radius: 20px;
color: #c88cff;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, transform 0.15s;
white-space: nowrap;
flex-shrink: 0;
}
.ia-trigger-btn:hover {
background: linear-gradient(135deg, rgba(160,64,232,0.35), rgba(232,93,154,0.3));
border-color: rgba(160,64,232,0.8);
transform: translateY(-1px);
}
.ia-trigger-icon { font-size: 1rem; }
/* ── Overlay ────────────────────────────────────────────── */
.ia-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(10,4,24,0.6);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: 1100;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s;
}
.ia-drawer-overlay.active {
opacity: 1;
pointer-events: all;
}
/* ── Drawer (panel lateral) ─────────────────────────────── */
.ia-drawer {
position: fixed;
top: 0;
right: 0;
width: 480px;
max-width: 100vw;
height: 100dvh;
background: #1c0f30;
border-left: 1px solid rgba(160,64,232,0.3);
box-shadow: -8px 0 40px rgba(10,4,24,0.6);
z-index: 1101;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.ia-drawer.active { transform: translateX(0); }
/* Evitar scroll del body cuando el drawer está abierto */
body.ia-drawer-open { overflow: hidden; }
/* ── Header ─────────────────────────────────────────────── */
.ia-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: 1px solid rgba(160,64,232,0.2);
background: rgba(160,64,232,0.08);
flex-shrink: 0;
}
.ia-drawer-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
font-weight: 700;
color: #d8a8ff;
}
.ia-drawer-title-icon { font-size: 1.1rem; }
.ia-drawer-close {
background: none;
border: none;
color: rgba(255,255,255,0.5);
font-size: 1.1rem;
cursor: pointer;
padding: 0.3rem 0.5rem;
border-radius: 6px;
transition: color 0.2s, background 0.2s;
}
.ia-drawer-close:hover { color: #fff; background: rgba(255,255,255,0.08); }
/* ── Vistas del drawer ──────────────────────────────────── */
.ia-drawer-view {
display: none;
flex-direction: column;
flex: 1;
overflow-y: auto;
padding: 1.25rem;
gap: 1rem;
}
.ia-view-active { display: flex; }
/* ── Barra de créditos ──────────────────────────────────── */
.ia-credits-bar {
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.75rem 1rem;
background: rgba(160,64,232,0.1);
border: 1px solid rgba(160,64,232,0.25);
border-radius: 10px;
font-size: 0.85rem;
color: #c8a8e8;
}
.ia-credits-bar i { margin-top: 2px; flex-shrink: 0; color: #a040e8; }
.ia-credits-info { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.ia-credits-label { font-weight: 600; color: #d8b8ff; }
.ia-credits-progress {
height: 4px;
background: rgba(255,255,255,0.1);
border-radius: 2px;
overflow: hidden;
}
.ia-credits-fill {
height: 100%;
background: linear-gradient(90deg, #a040e8, #e85d9a);
border-radius: 2px;
transition: width 0.4s;
}
.ia-credits-sub { font-size: 0.75rem; color: rgba(255,255,255,0.4); }
/* ── Etiqueta de sección ────────────────────────────────── */
.ia-section-label {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.35);
margin: 0;
}
.ia-new-section { padding-top: 0.25rem; }
/* ── Análisis previos ───────────────────────────────────── */
.ia-prev-analyses { display: flex; flex-direction: column; gap: 0.5rem; }
.ia-prev-list { display: flex; flex-direction: column; gap: 0.4rem; }
.ia-prev-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.65rem 0.9rem;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
cursor: pointer;
text-align: left;
transition: background 0.2s, border-color 0.2s;
width: 100%;
}
.ia-prev-item:hover { background: rgba(160,64,232,0.12); border-color: rgba(160,64,232,0.35); }
.ia-prev-label { flex: 1; font-size: 0.9rem; color: #d4b8ff; font-weight: 600; }
.ia-prev-date { font-size: 0.78rem; color: rgba(255,255,255,0.35); }
.ia-prev-arrow { color: rgba(255,255,255,0.25); font-size: 0.75rem; }
/* ── Bloques de configuración ───────────────────────────── */
.ia-config-block { display: flex; flex-direction: column; gap: 0.5rem; }
.ia-config-label { font-size: 0.9rem; color: rgba(255,255,255,0.75); margin: 0; }
.ia-ventana-hint {
font-size: 0.78rem;
color: rgba(160,64,232,0.9);
margin: 0;
padding: 0.3rem 0.5rem;
background: rgba(160,64,232,0.08);
border-radius: 6px;
border-left: 2px solid rgba(160,64,232,0.4);
}
.ia-option-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.ia-opt-btn {
padding: 0.5rem 0.9rem;
background: rgba(255,255,255,0.05);
border: 1.5px solid rgba(255,255,255,0.12);
border-radius: 8px;
color: rgba(255,255,255,0.7);
font-size: 0.85rem;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, color 0.2s;
text-align: left;
}
.ia-opt-btn:hover {
background: rgba(160,64,232,0.15);
border-color: rgba(160,64,232,0.4);
color: #fff;
}
.ia-opt-btn.ia-opt-selected {
background: rgba(160,64,232,0.25);
border-color: #a040e8;
color: #d8b8ff;
font-weight: 600;
}
/* ── Mensaje de error de config ─────────────────────────── */
.ia-error-msg {
padding: 0.6rem 0.9rem;
background: rgba(226,75,74,0.12);
border-left: 3px solid #E24B4A;
border-radius: 6px;
color: #ff8a80;
font-size: 0.85rem;
margin: 0;
}
/* ── Botón Generar ──────────────────────────────────────── */
.ia-generate-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.8rem 1.25rem;
background: linear-gradient(135deg, #a040e8, #e85d9a);
border: none;
border-radius: 10px;
color: #fff;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
transition: opacity 0.2s, transform 0.15s;
margin-top: 0.5rem;
}
.ia-generate-btn:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
.ia-generate-btn:disabled { cursor: not-allowed; }
/* ── Vista cargando ─────────────────────────────────────── */
.ia-loading-wrap {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
text-align: center;
padding: 2rem;
}
.ia-loading-spinner {
width: 48px;
height: 48px;
border: 3px solid rgba(160,64,232,0.2);
border-top-color: #a040e8;
border-radius: 50%;
animation: ia-spin 0.8s linear infinite;
}
@keyframes ia-spin { to { transform: rotate(360deg); } }
.ia-loading-title { font-size: 1rem; font-weight: 700; color: #d4b8ff; margin: 0; }
.ia-loading-sub { font-size: 0.85rem; color: rgba(255,255,255,0.45); margin: 0; line-height: 1.5; }
/* ── Resultado ──────────────────────────────────────────── */
.ia-resultado-content { display: flex; flex-direction: column; gap: 1rem; }
.ia-resultado-header {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.ia-resultado-badge {
display: inline-block;
padding: 0.2rem 0.65rem;
background: rgba(160,64,232,0.2);
border: 1px solid rgba(160,64,232,0.4);
border-radius: 20px;
font-size: 0.78rem;
font-weight: 700;
color: #c88cff;
align-self: flex-start;
}
.ia-resultado-title { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0; }
/* Retrato */
.ia-retrato {
padding: 0.9rem 1rem;
background: rgba(255,255,255,0.04);
border-left: 3px solid rgba(160,64,232,0.5);
border-radius: 0 8px 8px 0;
font-size: 0.9rem;
color: rgba(255,255,255,0.8);
line-height: 1.6;
}
.ia-retrato p { margin: 0; }
/* Secciones */
.ia-seccion { display: flex; flex-direction: column; gap: 0.6rem; }
.ia-seccion-titulo {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0;
}
.ia-seccion--verde .ia-seccion-titulo { color: #50c878; }
.ia-seccion--ambar .ia-seccion-titulo { color: #f5a623; }
.ia-seccion--rosa .ia-seccion-titulo { color: #e85d9a; }
.ia-seccion--slate .ia-seccion-titulo { color: #8ea8cc; }
/* Accordion de insights */
.ia-accordion-item {
border-radius: 8px;
border-left: 3px solid transparent;
overflow: hidden;
margin-bottom: 6px;
}
.ia-accordion-item--verde { background: rgba(80,200,120,0.07); border-color: rgba(80,200,120,0.5); }
.ia-accordion-item--ambar { background: rgba(245,166,35,0.08); border-color: rgba(245,166,35,0.5); }
.ia-accordion-item--rosa { background: rgba(232,93,154,0.08); border-color: rgba(232,93,154,0.5); }
.ia-accordion-item--slate { background: rgba(100,120,160,0.08); border-color: rgba(100,120,160,0.4); }
.ia-accordion-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
background: transparent;
border: none;
cursor: pointer;
padding: 0.65rem 0.9rem;
color: #d8d8e8;
font-size: 0.85rem;
font-weight: 700;
text-align: left;
line-height: 1.4;
}
.ia-accordion-btn:hover { color: #fff; }
.ia-accordion-icon {
flex-shrink: 0;
font-size: 0.7rem;
color: rgba(255,255,255,0.4);
transition: transform 0.22s ease;
}
.ia-accordion-item.open .ia-accordion-icon { transform: rotate(180deg); }
.ia-accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease, padding 0.22s ease;
padding: 0 0.9rem;
}
.ia-accordion-body p {
font-size: 0.83rem;
color: rgba(255,255,255,0.65);
line-height: 1.55;
margin: 0;
padding-bottom: 0.7rem;
}
.ia-accordion-item.open .ia-accordion-body { max-height: 200px; }
/* Tips */
.ia-tips {
background: rgba(160,64,232,0.08);
border: 1px solid rgba(160,64,232,0.22);
border-radius: 10px;
padding: 0.85rem 1rem;
}
.ia-tips-titulo {
font-size: 0.82rem;
font-weight: 700;
color: #c084fc;
margin: 0 0 0.65rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
.ia-tips-list {
margin: 0;
padding-left: 1.2rem;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.ia-tips-list li {
font-size: 0.83rem;
color: rgba(255,255,255,0.75);
line-height: 1.5;
}
/* Gauge romántico */
.ia-gauge-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1rem;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(232,93,154,0.2);
border-radius: 12px;
}
.ia-gauge {
position: relative;
width: 160px;
height: 80px;
overflow: hidden;
}
.ia-gauge-body {
width: 160px;
height: 160px;
border-radius: 50%;
border: 14px solid rgba(255,255,255,0.07);
border-bottom-color: transparent;
border-right-color: transparent;
transform: rotate(-45deg);
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
}
.ia-gauge-mask {
position: absolute;
inset: 0;
border-radius: 50%;
border: 14px solid var(--gauge-color, #e85d9a);
border-left-color: transparent;
border-bottom-color: transparent;
transform: rotate(calc(var(--gauge-deg, 0deg) - 135deg));
transition: transform 0.8s cubic-bezier(0.4,0,0.2,1);
box-sizing: border-box;
}
.ia-gauge-center {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
text-align: center;
line-height: 1;
}
.ia-gauge-value { font-size: 1.6rem; font-weight: 800; color: var(--gauge-color, #e85d9a); }
.ia-gauge-label { font-size: 0.7rem; color: rgba(255,255,255,0.35); }
.ia-gauge-titulo { font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.06em; }
.ia-gauge-just { font-size: 0.82rem; color: rgba(255,255,255,0.55); text-align: center; line-height: 1.5; max-width: 280px; }
/* Momento */
.ia-momento {
display: flex;
gap: 0.6rem;
padding: 0.75rem 0.9rem;
background: rgba(160,64,232,0.07);
border-radius: 8px;
font-size: 0.85rem;
color: rgba(255,255,255,0.7);
line-height: 1.55;
}
.ia-momento-icon { flex-shrink: 0; font-size: 1rem; margin-top: 2px; }
.ia-momento p { margin: 0; }
/* Reflexión final */
.ia-reflexion {
display: flex;
gap: 0.6rem;
padding: 0.9rem 1rem;
background: rgba(232,93,154,0.08);
border: 1px solid rgba(232,93,154,0.2);
border-radius: 10px;
font-size: 0.88rem;
color: rgba(255,255,255,0.75);
line-height: 1.6;
font-style: italic;
}
.ia-reflexion-icon { flex-shrink: 0; font-size: 1.1rem; margin-top: 1px; }
.ia-reflexion p { margin: 0; }
/* Botón volver */
.ia-back-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 0.9rem;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
color: rgba(255,255,255,0.5);
font-size: 0.82rem;
cursor: pointer;
transition: background 0.2s, color 0.2s;
margin-top: 1rem;
flex-shrink: 0;
}
.ia-back-btn:hover { background: rgba(255,255,255,0.09); color: #fff; }
/* ── Link de upgrade dentro del credits bar ─────────────── */
.ia-upgrade-link {
color: #c88cff;
text-decoration: underline;
cursor: pointer;
}
.ia-upgrade-link:hover { color: #e0b8ff; }
/* ── Mobile — drawer como bottom sheet ─────────────────── */
@media (max-width: 768px) {
.ia-drawer {
top: auto;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 92dvh;
border-left: none;
border-top: 1px solid rgba(160,64,232,0.35);
border-radius: 20px 20px 0 0;
transform: translateY(100%);
}
.ia-drawer.active { transform: translateY(0); }
.ia-trigger-label { display: none; }
.ia-trigger-btn { padding: 0.45rem 0.65rem; }
.ia-gauge { width: 140px; height: 70px; }
.ia-gauge-body, .ia-gauge-mask { width: 140px; height: 140px; }
.ia-gauge-value { font-size: 1.35rem; }
}