/* =======================================================
ARIS v8 · estilos.css
Estructura:
0) Variables / Reset
1) Layout global (body, content, footer)
2) Header + Landing
3) Botones
4) Formularios
5) Chat (shell, stream, burbujas, composer)
6) Compatibilidad legacy
7) Área personal (dashboard)
8) Utilidades y ayudas
9) Responsive
======================================================= */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Raleway:wght@400;500;600;700&display=swap");
/* =======================================================
0) VARIABLES / RESET
======================================================= */
/* Paleta (variables base) */
:root {
/* Tipografías */
--font-display: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto,
Arial, sans-serif;
--font-sans: "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Arial,
sans-serif;
/* Paleta Heyaris (tu Squarespace) */
--c-cream: #fbfbfb; /* fondo claro / texto botones dark */
--c-gray1: #f1ecd7; /* gris claro (borde, superficies suaves) */
--c-gray2: #cfcdc7; /* gris cálido medio (inputs/borde hover) */
--c-gray3: #817a7a; /* texto secundario */
--c-ink: #342e2e; /* texto principal + botón dark */
/* Tokens de verde usados por el chat y botones (faltaban) */
--green: #9bb88a; /* tu verde de usuario */
--green-dark: #7ea06b; /* un tono más oscuro para hover */
/* Mapeo a tokens existentes para no tocar HTML */
--bg: var(--c-cream);
--card: #ffffff;
--text: var(--c-ink);
--muted: var(--c-gray3);
--border: var(--c-gray1);
/* Botones (según tu requerimiento) */
--btn-dark-bg: var(--c-ink); /* fondo #342E2E */
--btn-dark-fg: var(--c-cream); /* texto #FBFBFB */
--btn-light-bg: var(--c-gray1); /* fondo claro */
--btn-light-fg: var(--c-ink); /* texto oscuro */
--btn-light-bd: var(--c-gray2); /* borde sutil en claro */
/* Sombras y radios (como tenías) */
--shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
--radius: 18px;
/* cambia este valor (0–1) */
--header-overlay-opacity: 0;
/* Chat (igual que antes) */
--chat-padding-y: 16px;
--chat-padding-x: 16px;
--chat-gap: 12px;
--chat-bottom-safe: 10px;
/* Alturas bandas fijas */
--header-h: 30px;
--footer-h: 60px;
/* Overlays */
--overlay-dark: rgba(0, 0, 0, 0.42); /* cabecera y pie más oscuros */
--overlay-line: rgba(255, 255, 255, 0.08);
/* Panel “cristal” más oscuro para el contenedor principal */
--panel-glass: rgba(255, 255, 255, 0.16);
--panel-border: rgba(255, 255, 255, 0.26);
/* Offset extra para bajar el hero */
--hero-offset: 20px; /* ajústalo al gusto (20–60px) */
}
/* Reset base */
* {
box-sizing: border-box;
}
html {
min-height: 100%;
height: auto;
}
body {
min-height: 100%;
}
/* =======================================================
1) LAYOUT GLOBAL (body, content, footer)
- Página en columna: header → main → footer
- Footer pegado al final sin ser fixed
- Evita solapes y “pies a mitad de página”
======================================================= */
body.page {
margin: 0;
font-family: var(--font-sans);
color: var(--text);
/* Fondo = imagen de landing */
background: url("/static/img/landing_light.png") no-repeat center center fixed;
background-size: cover;
min-height: 100vh;
display: flex;
flex-direction: column;
position: relative; /* para overlay */
}
/* Overlay por defecto (oscuro ~57%) */
body.page::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.57);
pointer-events: none;
z-index: 0;
}
/* Variante clara (~32%) — actívala con */
body.page.overlay-light::before {
background: rgba(255, 255, 255, 0.32);
}
/* Contenedor central:
- flex:1 0 auto → ocupa el espacio disponible y empuja el footer abajo
- min-height:0 → permite scroll interno de hijos (p.ej., .chat-stream)
- sin overflow raro que haga “flotar” el footer a mitad */
main.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
flex: 1 0 auto; /* importante: no permitir shrink del main */
min-height: 0;
padding: calc(16px + var(--hero-offset)) 16px 16px;
padding-bottom: calc(
var(--footer-h) + max(16px, env(safe-area-inset-bottom))
);
-webkit-overflow-scrolling: touch; /* suavidad iOS */
}
/* Footer global (NUNCA fixed)
- margin-top:auto lo empuja al final de la columna
- flex-shrink:0 evita que se “meta” en medio cuando el main crece */
.site-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 50;
display: flex;
justify-content: space-between;
align-items: center;
/* usamos la misma altura lógica en todo el sitio */
--footer-h: 64px;
min-height: var(--footer-h);
padding: 10px 24px 12px;
background: url("/static/img/landing.png") no-repeat center center;
background-size: cover;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
/* 👇 overlay semitransparente solo sobre la imagen */
.site-footer::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, var(--footer-overlay-opacity));
pointer-events: none;
z-index: -1;
}
.site-footer .legal {
color: var(--text);
font-size: 14px;
}
.site-footer .legal a {
color: #342e2e;
}
.social {
display: flex;
gap: 10px;
}
.social-pill {
background: #cfe0c7;
padding: 8px 12px;
border-radius: 999px;
font-weight: 700;
font-size: 13px;
color: #4f6f3d;
}
.social-pill:hover {
background: #bcd5b0;
}
/* =======================================================
1.1) Elementos flotantes que respetan el footer
- El avatar flotante se separa del footer según su altura
======================================================= */
.floating-avatar {
position: fixed;
right: 18px;
bottom: calc(var(--footer-h) + 12px); /* respeta el footer */
z-index: 50;
width: 56px;
height: 56px; /* tamaño del avatar */
border-radius: 50%;
overflow: hidden;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}
.floating-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* (Opcional) evitar solapes con componentes sticky/fixed puntuales */
.chat-shell,
.dashboard-grid {
position: relative;
}
/* =======================================================
2) HEADER + LANDING
======================================================= */
header {
background: transparent;
color: inherit;
text-align: left;
padding: 28px 18px 8px;
}
/* Cabecera principal de la landing/portada */
.landing-header {
position: relative;
text-align: center;
padding: 16px 18px 4px;
/* 👇 nuevo fondo para cabecera */
background: url("/static/img/landing.png") no-repeat center center;
background-size: cover;
/* opcional: asegura altura mínima */
min-height: var(--header-h);
z-index: 1; /*asegura que el texto esté encima del ::before */
}
/* 👇 capa superpuesta con opacidad */
.landing-header::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, var(--header-overlay-opacity));
pointer-events: none; /* la capa no bloquea interacciones */
z-index: -1; /* queda detrás del contenido, sobre la imagen */
}
/* Título de marca (hero) — en blanco como la landing */
.brand-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 50px;
margin: 2px 0 5px;
color: #ffffff; /* blanco */
letter-spacing: 0.5px;
}
/* Tarjeta principal (fondo translúcido estilo cristal) */
.landing-card {
width: min(900px, 92vw);
background: rgba(255, 255, 255, 0.1); /* overlay suave */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 34px 26px;
margin: 0 auto 32px;
}
.landing-narrow {
width: min(800px, 92vw);
}
/* Títulos de secciones dentro de la landing */
.landing-title {
font-family: var(--font-display);
font-weight: 600;
font-size: 30px;
color: #665c5c; /* blanco como en Squarespace */
text-align: center;
margin: 0 0 16px; /* más aire con respecto al subtítulo */
}
/* Subtítulo bajo el título principal (centrado y legible sobre fondo) */
.landing-subtitle {
font-family: var(--font-sans);
font-weight: 400;
font-size: 25px;
color: #ffffff; /* blanco suavizado para contraste */
text-align: center;
margin: 0 0 8px; /* más espacio antes del contenido */
}
/* ===== Bloque beneficios + avatar =====
Desktop: [ avatar | lista ] */
.benefits-wrap {
display: grid;
grid-template-columns: 200px 1fr;
align-items: center;
column-gap: 40px;
justify-content: center;
margin: 40px auto 24px;
max-width: 720px;
}
/* Lista de beneficios (texto sobre card translúcida: usamos color principal) */
.benefits {
order: 2;
list-style: none;
margin: 0;
padding: 0;
max-width: 480px;
line-height: 1.5;
color: var(--text);
}
.benefits li {
position: relative;
padding-left: 26px;
margin: 12px 0;
}
.benefits li::before {
content: "•";
color: var(--c-ink); /* punto acorde a la paleta */
position: absolute;
left: 8px;
top: 0;
}
/* Logo/semilla alada — SIN círculo ni fondo, color vivo */
.aris-avatar {
order: 1;
width: 160px;
height: auto;
border-radius: 0; /* sin círculo */
overflow: visible;
box-shadow: none; /* sin sombra */
background: none;
display: flex;
align-items: center;
justify-content: center;
justify-self: center;
}
.aris-avatar img {
width: 100%;
height: auto;
object-fit: contain; /* respeta proporción del logo */
display: block;
}
/* CTA coherente (puede quedarse para secciones secundarias) */
.cta-box {
background: var(--green-100);
border: 1px solid var(--border);
border-radius: 14px;
padding: 18px;
margin-top: 40px;
}
.cta-title {
margin: 0 0 15px;
margin-bottom: 5px;
margin-top: 10px;
text-align: center;
color: #665c5c;
}
.cta-actions {
display: flex;
gap: 40px;
justify-content: center;
flex-wrap: wrap;
}
/* === Weglot en header (inline) — robusto === */
/* Coloca SIEMPRE el switcher arriba-derecha, sea #weglot_here o .weglot-container */
.landing-header #weglot_here,
.landing-header .weglot-container {
position: absolute !important;
top: 8px; /* ajusta fino 6–10px si lo ves 1–2px desalineado */
right: 16px;
z-index: 90;
display: inline-flex; /* evita ancho 100% por text-align:center */
align-items: center;
gap: 8px;
}
/* Oculta el weglot flotante duplicado si Weglot lo inyecta al final del body */
body > .weglot-container {
display: none !important;
}
/* Quita “look” de botón al trigger (cubriendo variantes de Weglot) */
.landing-header #weglot_here .country-selector,
.landing-header .weglot-container .country-selector,
.landing-header #weglot_here .weglot-dropdown,
.landing-header .weglot-container .weglot-dropdown {
background: transparent !important;
color: #fff !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-size: 16px;
line-height: 1;
cursor: pointer;
}
/* Oculta banderas si Weglot las muestra (queremos globo + texto) */
.landing-header #weglot_here .wgflag,
.landing-header .weglot-container .wgflag {
display: none !important;
}
/* Texto actual + iconos (globo + caret) */
.landing-header #weglot_here .wgcurrent,
.landing-header .weglot-container .wgcurrent {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
color: #fff;
}
.landing-header #weglot_here .wgcurrent::before,
.landing-header .weglot-container .wgcurrent::before {
content: "";
width: 18px;
height: 18px;
display: inline-block;
background-repeat: no-repeat;
background-size: 18px 18px;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.9;
}
.landing-header #weglot_here .wgcurrent::after,
.landing-header .weglot-container .wgcurrent::after {
content: "▾";
font-size: 14px;
transform: translateY(-1px);
opacity: 0.9;
}
/* Dropdown: caja oscura, texto claro (cubriendo ambas rutas) */
.landing-header #weglot_here .country-selector ul,
.landing-header .weglot-container .country-selector ul {
margin: 8px 0 0;
padding: 6px 0;
list-style: none;
background: rgba(0, 0, 0, 0.86);
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
min-width: 160px;
position: absolute;
z-index: 100;
}
.landing-header #weglot_here .country-selector li,
.landing-header .weglot-container .country-selector li {
margin: 0;
}
.landing-header #weglot_here .country-selector li a,
.landing-header #weglot_here .country-selector li button,
.landing-header .weglot-container .country-selector li a,
.landing-header .weglot-container .country-selector li button {
display: block;
width: 100%;
padding: 8px 12px;
text-decoration: none;
border: 0;
background: transparent;
color: #fff;
font-family: var(--font-sans);
font-size: 14px;
text-align: left;
cursor: pointer;
}
.landing-header #weglot_here .country-selector li:hover a,
.landing-header #weglot_here .country-selector li:hover button,
.landing-header .weglot-container .country-selector li:hover a,
.landing-header .weglot-container .country-selector li:hover button {
background: rgba(255, 255, 255, 0.1);
}
/* Ajuste móvil */
@media (max-width: 640px) {
.landing-header #weglot_here,
.landing-header .weglot-container {
top: 6px;
right: 12px;
}
}
/* =======================================================
3) BOTONES
======================================================= */
/* ===== Botones ===== */
.btn {
display: inline-block;
padding: 14px 18px;
border-radius: 10px; /* ¡mantenemos tu forma! */
border: 1px solid transparent;
cursor: pointer;
transition: transform 0.05s ease, background 0.2s ease, border-color 0.2s ease,
color 0.2s ease;
text-decoration: none;
/* Tipografía del botón */
font-family: var(--font-display);
font-weight: 500; /* pedido: 500 */
font-size: 1rem; /* pedido: 1rem */
}
.btn:hover {
transform: translateY(-1px);
}
/* Botón principal (dark) -> #342E2E con texto #FBFBFB */
.btn-primary {
background: var(--btn-dark-bg);
color: var(--btn-dark-fg);
border-color: var(--btn-dark-bg);
}
.btn-primary:hover {
filter: brightness(1.05);
}
/* Botón claro (alternativa) -> fondo #FBFBFB, texto oscuro, borde sutil */
.btn-outline {
background: var(--btn-light-bg);
color: var(--btn-light-fg);
border-color: var(--btn-light-bd);
}
.btn-outline:hover {
background: #ffffff;
border-color: var(--c-gray3);
}
/* Enlaces tipo botón “Continuar” (alineado a paleta) */
.btn-link {
background: transparent;
border: none;
color: var(--c-ink);
padding: 6px 8px;
font-family: var(--font-display);
font-weight: 500;
text-decoration: underline;
}
.btn-link:hover {
filter: brightness(0.95);
}
.btn-continue {
margin-left: 6px;
}
/* =======================================================
4) FORMULARIOS
======================================================= */
.form-card {
width: min(480px, 92vw);
background: var(--card);
border: 1px solid var(--border); /* #E8E8E8 */
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 22px 18px;
margin: 0 auto 32px;
font-family: var(--font-sans); /* Raleway */
}
.form-card label {
display: block;
font-size: 0.95rem;
font-weight: 500;
margin: 10px 0 6px;
color: var(--text); /* #342E2E */
font-family: var(--font-sans); /* Raleway */
}
.form-card input {
width: 100%;
padding: 0.7rem 0.8rem;
border: 1px solid var(--c-gray1); /* #E8E8E8 */
border-radius: 10px;
background: #fff;
outline: none;
font-family: var(--font-sans); /* Raleway */
font-size: 1rem;
color: var(--text);
}
.form-card input:focus {
border-color: var(--c-gray2); /* #CFCDC7 */
box-shadow: 0 0 0 3px rgba(52, 46, 46, 0.12); /* sutil con #342E2E */
}
.form-card .btn {
margin-top: 14px;
width: 100%;
font-family: var(--font-display); /* Space Grotesk */
font-weight: 500;
}
/* ===== Utilidad: panel translúcido “cristal” (igual que la landing) ===== */
.form-card.card-glass {
/* mismos valores que .landing-card */
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: var(--shadow);
}
/* Mantén inputs sólidos para legibilidad sobre el fondo translúcido */
.form-card.card-glass input {
background: #fff;
}
.link {
margin: 12px 0 0;
color: var(--muted); /* #817A7A */
text-align: center;
font-family: var(--font-sans); /* Raleway */
}
.link a {
color: var(--c-ink); /* #342E2E */
text-decoration: none;
font-weight: 500;
}
.link a:hover {
text-decoration: underline;
}
/* =======================================================
5) CHAT (shell, stream, burbujas, composer)
======================================================= */
/* Contenedor del chat */
.chat-shell {
gap: 14px; /* separación entre stream y composer */
width: min(820px, 92vw);
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0; /* imprescindible para overflow correcto */
}
/* Timeline del chat */
.chat-stream {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 8px 4px;
display: flex;
flex-direction: column;
gap: 10px; /* separación entre burbujas */
background: #fff;
border: 1px solid var(--border);
border-radius: 12px;
-webkit-overflow-scrolling: touch; /* suavidad iOS */
}
/* Burbujas */
.msg {
display: flex;
}
.msg .bubble {
max-width: 82%; /* aire lateral en desktop */
padding: 12px 14px;
line-height: 1.45;
border-radius: 14px;
border: 1px solid var(--border);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
white-space: pre-wrap;
margin: 0; /* evitar saltos verticales inesperados */
}
.msg.bot {
justify-content: flex-start;
}
.msg.user {
justify-content: flex-end;
}
/* Colores y esquinas */
.msg.bot .bubble {
background: #f7f9f4;
color: var(--text);
border-top-left-radius: 6px;
}
.msg.user .bubble {
background: var(--green);
color: #fff;
border-color: transparent;
border-top-right-radius: 6px;
}
/* Metadatos bajo la burbuja del bot (contador de tokens, etc.) */
.bubble-meta {
margin-top: 6px;
font-size: 12px;
color: var(--muted);
padding-left: 4px;
}
/* Composer (caja de escritura) siempre visible al fondo de la columna */
.composer-wrap {
margin-top: auto; /* empuja el composer al final de la columna */
margin-bottom: 2px;
background: transparent;
position: relative;
z-index: 1;
}
.composer {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid var(--c-gray1); /* antes: #cfd8c7 */
border-radius: 14px;
padding: 10px;
box-shadow: var(--shadow);
}
/* Textarea: auto-expansión hasta un tope + scroll interno */
.composer textarea {
flex: 1;
resize: none;
overflow: hidden;
min-height: 38px;
max-height: 320px;
border: none;
outline: none;
font: inherit;
line-height: 1.45;
padding: 6px 8px;
}
.composer textarea::placeholder {
color: #9aa59a;
}
.composer .btn {
align-self: auto;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 14px;
border-radius: 10px;
}
/* =======================================================
6) COMPATIBILIDAD LEGACY (componentes antiguos)
======================================================= */
#chat-container {
flex: 1;
padding: 1rem;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.message {
padding: 0.85rem 0.9rem;
border-radius: 12px;
max-width: 80%;
line-height: 1.35;
border: 1px solid var(--border);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.message.user {
background-color: #9bb88a;
color: #fff;
align-self: flex-end;
border-color: transparent;
}
.message.bot {
background-color: #f7f9f4;
align-self: flex-start;
}
/* Footer chat antiguo */
footer {
background-color: #f5f7f1;
padding: 0.6rem;
border-top: 1px solid var(--border);
}
#chat-form {
display: flex;
gap: 0.5rem;
}
/* Textarea principal de chat_full.html (cuando no uses .composer) */
#user-input {
flex: 1 1 auto;
padding: 0.75rem 0.8rem;
border: 1px solid var(--c-gray1); /* #E8E8E8 */
border-radius: 10px;
background: #fff;
outline: none;
max-height: 220px; /* scroll interno para no tapar botón */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
resize: none;
min-height: 40px;
line-height: 1.4;
scrollbar-gutter: stable; /* evita “bailes” al aparecer la barra */
font-family: var(--font-sans); /* Raleway */
font-size: 1rem;
color: var(--text); /* #342E2E */
}
#user-input:focus {
border-color: var(--c-gray2); /* #CFCDC7 */
box-shadow: 0 0 0 3px rgba(52, 46, 46, 0.12); /* overlay sutil en tono ink */
}
/* Botones genéricos (legacy) */
button,
.button {
padding: 0.75rem 1.1rem;
border: none;
background-color: var(--green);
color: #fff;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
}
button:hover,
.button:hover {
background-color: var(--green-dark);
}
/* =======================================================
7) ÁREA PERSONAL (dashboard)
======================================================= */
.dashboard-grid {
width: min(1100px, 94vw);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: start;
}
.dashboard-card {
background: #fff;
border: 1px solid var(--border);
border-radius: 14px;
padding: 20px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
}
.dashboard-card h2 {
margin-top: 0;
}
.center {
text-align: center;
}
.dashboard-card h2.center {
margin-bottom: 6px;
}
.cta-box.center {
justify-content: center;
}
/* Lista de conversaciones (Mi espacio) */
.conv-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 12px;
}
.conv-item {
background: #fff;
border-radius: 12px;
padding: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
.conv-row {
display: flex;
align-items: center;
gap: 10px;
}
/* Botón principal de conversación */
.conv-btn {
flex: 1;
display: block;
text-align: center;
padding: 12px 14px;
border-radius: 10px;
text-decoration: none;
border: none;
background: #e7f0e3;
color: #2f6f3f;
box-shadow: inset 0 0 0 1px rgba(47, 159, 89, 0.18);
}
.conv-btn:hover {
filter: brightness(0.98);
}
/* Acciones (renombrar/eliminar) */
.conv-actions {
display: flex;
gap: 6px;
}
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
border: 1px solid var(--border);
background: #fff;
cursor: pointer;
}
.icon-btn svg {
opacity: 0.8;
}
.icon-btn:hover svg {
opacity: 1;
}
.icon-btn.danger {
border-color: #f3c9c9;
background: #fff0f0;
}
.icon-btn.danger:hover {
filter: brightness(0.98);
}
/* Form renombrar */
.rename-form {
margin-top: 8px;
display: grid;
grid-template-columns: 1fr auto auto;
gap: 8px;
align-items: center;
}
.rename-form input {
border: 1px solid var(--border);
border-radius: 10px;
padding: 8px 10px;
}
.btn.xs {
padding: 6px 10px;
font-size: 0.9rem;
}
.inline {
display: inline;
}
/* Input inline dentro del botón (rename) */
.conv-edit {
width: 100%;
border: none;
outline: none;
background: transparent;
text-align: center;
font: inherit;
padding: 0;
margin: 0;
color: inherit;
}
.conv-edit:focus {
outline: none;
box-shadow: none;
}
.conv-open[data-editing="1"] {
pointer-events: none;
} /* el botón no navega mientras editas */
.conv-open[data-editing="1"] .conv-edit {
pointer-events: auto;
} /* pero el input sí */
/* =======================================================
8) UTILIDADES Y AYUDAS
======================================================= */
/* ==== Alertas (partials/alerts.html) ==== */
.alert {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--border);
margin: 10px 0;
}
.alert .alert-icon {
font-size: 16px;
}
.alert .alert-text {
flex: 1;
}
.alert .alert-close {
border: none;
background: transparent;
cursor: pointer;
font-size: 18px;
line-height: 1;
}
.alert-error {
background: #fff2f2;
border-color: #f3c9c9;
color: #8a2a2a;
}
.alert-warning {
background: #fff9e6;
border-color: #f3e0a6;
color: #6e5400;
}
.alert-success {
background: #eaf8ef;
border-color: #bfe6cc;
color: #1f6a39;
}
.alert-info {
background: #eef6ff;
border-color: #cfe3ff;
color: #104a82;
}
/* Botón de cierre para alertas (opcional) */
.alert-close {
margin-left: 8px;
background: transparent;
border: none;
font-size: 16px;
line-height: 1;
cursor: pointer;
color: inherit;
padding: 0 4px;
}
.alert-close:hover {
filter: brightness(0.9);
}
.top-actions {
position: absolute;
top: 16px;
right: 16px;
display: flex;
gap: 10px;
z-index: 2;
}
.top-actions .btn {
font-size: 14px;
padding: 10px 16px;
border-radius: 8px;
}
.top-actions .logout-btn {
background: var(--danger, #463e39);
border: none;
color: #fff;
}
.top-actions .logout-btn:hover {
filter: brightness(0.9);
}
.help-text {
color: var(--muted);
font-size: 12px;
text-align: center;
margin: 8px 0 0;
}
/* Accesibilidad: solo-visible-para-lectores */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* =======================================================
9) RESPONSIVE
======================================================= */
/* --- Tablet / desktop estrecho --- */
@media (max-width: 900px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
/* En landing: apila y centra (avatar arriba, lista debajo) */
.benefits-wrap {
grid-template-columns: 1fr; /* una sola columna */
justify-items: center; /* centra ambos */
gap: 20px;
max-width: 560px;
}
.aris-avatar {
width: 130px;
height: 130px;
order: 1; /* avatar arriba */
}
.benefits {
order: 2; /* lista debajo */
max-width: 100%;
text-align: left;
}
}
/* =======================================================
Responsive móvil (≤ 640px)
======================================================= */
@media (max-width: 640px) {
/* Header: título izq + subtítulo centrado y más compacto */
.landing-header {
min-height: 70px;
padding: 16px 14px 6px;
}
.brand-title {
font-size: 26px;
}
.landing-subtitle {
font-size: 14px;
max-width: 90%;
top: 26px; /* si usas posición absoluta del subtítulo */
}
/* Botones top-actions: más pequeños y con gap reducido */
.top-actions .btn {
padding: 6px 10px;
border-radius: 8px;
font-size: 13px;
}
/* Contenedor global: menos padding lateral y reserva footer */
main.content {
padding-left: 12px;
padding-right: 12px;
padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom) + 8px);
}
/* Cards cristal: menos sombra y radios más pequeños para que quepan bien */
.dashboard-card,
.landing-card {
padding: 16px 14px;
border-radius: 12px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
}
/* Grid del área personal: 1 columna 100% */
.dashboard-grid {
width: 94vw;
grid-template-columns: 1fr !important;
gap: 12px;
}
/* Lista de conversaciones: botones full-width */
.conv-open.btn,
.btn {
font-size: 0.95rem;
}
.conv-actions .icon-btn {
width: 34px;
height: 34px;
}
/* Chat: ancho y alto útiles + composer compacto */
.chat-shell {
width: 96vw;
}
.chat-stream {
min-height: 50vh; /* alto inicial útil */
max-height: calc(100vh - 240px); /* header + composer + footer */
padding: 10px 8px;
}
.composer {
gap: 4px;
padding: 8px;
border-radius: 12px;
}
.composer textarea {
min-height: 38px;
max-height: 40vh; /* evita tapar teclado */
scrollbar-width: none;
}
.composer textarea::-webkit-scrollbar {
width: 0;
height: 0;
}
.composer .btn {
min-width: 82px;
height: 40px;
}
/* Footer fijo con safe area */
.site-footer {
padding-bottom: max(10px, env(safe-area-inset-bottom));
}
}
/* Responsive extra compacto (≤ 360px) */
@media (max-width: 360px) {
.brand-title {
font-size: 24px;
}
.top-actions .btn {
padding: 5px 8px;
font-size: 12px;
}
.composer .btn {
min-width: 74px;
}
}
/* --- Móviles estrechos (<560px) --- */
@media (max-width: 560px) {
:root {
--chat-padding-y: 12px;
--chat-padding-x: 12px;
--chat-gap: 10px;
}
/* Si usas el flotante en otras páginas, respeta safe-area + footer */
.floating-avatar {
bottom: max(16px, calc(env(safe-area-inset-bottom) + 72px));
}
.site-footer {
padding: 10px 16px 12px;
} /* footer más compacto */
.chat-shell {
width: 96vw;
} /* chat un pelín más ancho */
.aris-avatar {
width: 96px;
height: 96px;
}
}
/* --- Fix: conv-list nunca muestra bullets ni viñetas heredadas --- */
.conv-list {
list-style: none;
padding-left: 0;
}
.conv-list li::marker {
content: none;
}
.conv-list li::before {
content: none !important;
}
.conv-item .conv-row::before {
content: none !important;
}
/* ===== Registro/Login (coherencia visual) ===== */
.auth-card {
/* separa el card del header; usa la variable que ya tienes */
margin-top: calc(var(--header-h) + 16px);
}
/* Título del formulario (Space Grotesk, tamaño y peso) */
.form-card h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: 28px;
color: var(--text); /* #342E2E sobre card blanco */
margin: 0 0 14px;
}
/* Etiquetas con un poco más de aire */
.form-card label {
margin-top: 12px;
}
/* Inputs consistentes (ya tenías base, afinamos detalles) */
.form-card input {
background: #fff;
line-height: 1.2;
}
/* Texto de ayuda bajo los inputs (color y espaciado) */
.form-card .help-text {
margin-top: 6px;
color: var(--muted); /* #817A7A */
}
/* Botón principal con margen fijo y ancho fluido controlado */
.form-card .btn[type="submit"] {
margin-top: 16px;
width: 100%;
}
/* Responsivo: en pantallas grandes, centra el card y sube un poco */
@media (min-width: 900px) {
.auth-card {
margin-top: calc(var(--header-h) + 8px);
}
}
/* ===========================
Menú hamburguesa (móvil)
=========================== */
/* Botón hamburguesa con fondo de contenedor (cristal) */
.hamburger {
position: absolute;
top: 15px;
right: 12px;
display: none; /* visible solo en móvil */
width: 40px;
height: 36px;
border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.26));
background: var(--panel-glass, rgba(255, 255, 255, 0.16));
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 12px;
padding: 8px 9px;
cursor: pointer;
z-index: 60;
}
.hamburger span {
display: block;
width: 100%;
height: 2px;
border-radius: 2px;
background: #fff;
margin: 4px 0; /* líneas blancas */
}
/* Estado abierto: fondo un poco más sólido */
.hamburger.open {
background: var(--panel-glass, rgba(255, 255, 255, 0.22));
}
/* Panel del menú: estrecho y con el mismo fondo cristal */
.menu-panel {
position: absolute;
top: 64px;
right: 12px;
width: 190px; /* más estrecho */
background: var(--panel-glass, rgba(255, 255, 255, 0.16));
border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.26));
border-radius: 14px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
z-index: 60;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.menu-list {
list-style: none;
margin: 10px 8px;
padding: 0;
display: grid;
gap: 8px;
}
/* Botones del panel con nuestro estilo y separaciones */
.menu-btn {
display: block;
width: 100%;
text-align: center;
border-radius: 10px;
padding: 10px 12px; /* separación uniforme */
box-shadow: none; /* sin sombras extra */
}
/* Responsive: móvil muestra hamburguesa y oculta top-actions */
@media (max-width: 640px) {
.top-actions {
display: none;
}
.hamburger {
display: flex;
align-items: center;
justify-content: center;
}
}
/* Desktop: oculta menú móvil */
@media (min-width: 641px) {
.menu-panel,
.hamburger {
display: none !important;
}
.top-actions {
display: flex;
}
}
/* --- Fix cabecera en móvil: título izq + subtítulo centrado sin solaparse --- */
@media (max-width: 640px) {
/* Solo en Área personal (ajusta el scope si lo usas en más vistas) */
body.page.area-personal .landing-header {
min-height: 90px;
padding: 14px 12px 6px;
display: flex;
flex-direction: column; /* subtítulo debajo del título */
align-items: flex-start; /* título a la izquierda */
justify-content: flex-start;
}
body.page.area-personal .brand-title {
font-size: 26px; /* compacto en móvil */
margin: 0;
}
body.page.area-personal .landing-subtitle {
position: static; /* deja de ser absolute */
transform: none;
width: 100%;
max-width: 100%;
text-align: center; /* centrado en todo el header */
margin-top: 4px; /* separa del título */
font-size: 14px;
}
}
/* === Fix visibilidad del texto en el composer (override global) === */
.chat-shell .composer textarea {
color: var(--text) !important; /* texto oscuro legible */
background-color: #fff !important; /* fondo blanco sólido */
}
/* === Weglot: forzar look "globo + texto" sin botón === */
.landing-header .weglot-container {
position: absolute !important;
top: 8px;
right: 16px;
z-index: 90;
display: inline-flex;
align-items: center;
gap: 8px;
color: #fff;
}
/* Icono globo (independiente de clases internas) */
.landing-header .weglot-container::before {
content: "";
width: 18px;
height: 18px;
margin-right: 8px;
display: inline-block;
background-repeat: no-repeat;
background-size: 18px 18px;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.9;
}
/* Caret genérico por si Weglot no pinta el suyo */
.landing-header .weglot-container::after {
content: "▾";
font-size: 14px;
transform: translateY(-1px);
opacity: 0.9;
}
/* Quita el "botón" a cualquier trigger que use Weglot */
.landing-header .weglot-container button,
.landing-header .weglot-container a,
.landing-header .weglot-container [role="button"],
.landing-header .weglot-container select,
.landing-header .weglot-container .wg-selector,
.landing-header .weglot-container .wg-default,
.landing-header .weglot-container .weglot-dropdown-toggle {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
color: #fff !important;
border-radius: 0 !important;
}
/* Texto actual: alineación limpia (cubriendo nombres de clase frecuentes) */
.landing-header .weglot-container [class*="current"],
.landing-header .weglot-container [class*="wgcurrent"] {
display: inline-flex;
align-items: center;
gap: 8px;
color: #fff !important;
}
/* Dropdown oscuro (independiente del marcado interno) */
.landing-header .weglot-container ul {
margin: 8px 0 0;
padding: 6px 0;
list-style: none;
background: rgba(0, 0, 0, 0.86) !important;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
min-width: 160px;
position: absolute;
z-index: 100;
}
.landing-header .weglot-container li {
margin: 0;
}
.landing-header .weglot-container li a,
.landing-header .weglot-container li button {
display: block;
width: 100%;
padding: 8px 12px;
background: transparent !important;
border: 0;
color: #fff !important;
text-align: left;
cursor: pointer;
}
.landing-header .weglot-container li:hover a,
.landing-header .weglot-container li:hover button {
background: rgba(255, 255, 255, 0.1) !important;
}
/* Sin banderas */
.landing-header .weglot-container .wgflag {
display: none !important;
}
/* Evita el duplicado flotante que Weglot añade al body */
body > .weglot-container {
display: none !important;
}
/* Ajuste fino en móvil */
@media (max-width: 640px) {
.landing-header .weglot-container {
top: 6px;
right: 12px;
}
}
/* === Weglot: trigger como texto (sin botón/blanco) === */
/* Posición y color del contenedor (ya lo tienes a la dcha) */
.landing-header .weglot-container {
position: absolute !important;
top: 12px; /* sube/baja fino 8–14px a tu gusto */
right: 16px;
z-index: 90;
display: inline-flex;
align-items: center;
gap: 8px;
color: #fff;
}
/* 1) Si Weglot usa BUTTON como trigger => quítale “look” de botón */
.landing-header .weglot-container .weglot-dropdown-toggle,
.landing-header .weglot-container .weglot-dropdown button,
.landing-header .weglot-container .wg-default button {
all: unset; /* resetea UA styles */
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1;
color: #fff !important;
cursor: pointer;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
/* 2) Si Weglot usa SELECT => que se vea como texto plano */
.landing-header .weglot-container select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: #fff !important;
padding: 0 !important;
line-height: 1.1;
}
/* Por si Weglot añade un wrapper con fondo/blanco */
.landing-header .weglot-container .weglot-dropdown {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Asegura que el texto del idioma esté visible como inline */
.landing-header .weglot-container .weglot-dropdown-toggle span,
.landing-header .weglot-container .weglot-dropdown button span {
display: inline !important;
color: #fff !important;
}
/* Ya tenemos globo (antes) y caret (después) — no tocamos eso */
/* Si ves doble caret, desactiva el interno del widget: */
.landing-header .weglot-container .weglot-dropdown-toggle::after {
display: none !important;
}
/* === Reemplazo total del UI de Weglot en la cabecera === */
/* 0) Oculta el widget visual de Weglot (botón/select y flecha) */
.landing-header .weglot-container {
display: none !important;
}
/* 1) Nuestro contenedor propio, arriba-derecha */
#weglot_here {
position: absolute;
top: 10px;
right: 16px;
z-index: 90;
display: inline-flex;
align-items: center;
gap: 8px;
color: #fff;
}
/* 2) Globo (igual que antes) */
#weglot_here::before {
content: "";
width: 18px;
height: 18px;
display: inline-block;
background-repeat: no-repeat;
background-size: 18px 18px;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.9;
}
/* 3) Trigger de texto plano (sin botón) */
#weglot_here .lang-trigger {
background: transparent;
border: 0;
padding: 0;
color: #fff;
font-family: var(--font-sans);
font-size: 16px;
line-height: 1;
cursor: pointer;
}
/* 4) Menú propio (oscuro) */
#weglot_here .lang-menu {
position: absolute;
right: 0;
margin-top: 8px;
list-style: none;
padding: 6px 0;
min-width: 160px;
background: rgba(0, 0, 0, 0.86);
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
#weglot_here .lang-menu li {
margin: 0;
}
#weglot_here .lang-option {
width: 100%;
text-align: left;
padding: 8px 12px;
background: transparent;
border: 0;
color: #fff;
font-family: var(--font-sans);
font-size: 14px;
cursor: pointer;
}
#weglot_here .lang-option:hover {
background: rgba(255, 255, 255, 0.1);
}
/* 5) Responsive fino */
@media (max-width: 640px) {
#weglot_here {
top: 8px;
right: 12px;
}
}
/* ---- UI propio idioma: estable y siempre visible ---- */
/* Oculta el UI nativo del widget */
.landing-header .weglot-container {
display: none !important;
}
/* Nuestro contenedor fijo */
#weglot_here {
position: absolute;
top: 10px;
right: 16px;
z-index: 90;
display: inline-flex !important;
align-items: center;
gap: 8px;
color: #fff;
visibility: visible !important;
opacity: 1 !important;
}
/* Globo */
#weglot_here::before {
content: "";
width: 18px;
height: 18px;
display: inline-block;
background: no-repeat center/18px 18px;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.9;
}
/* Texto clicable (solo palabra del idioma) */
#weglot_here .lang-trigger {
background: transparent;
border: 0;
padding: 0;
color: #fff;
font-family: var(--font-sans);
font-size: 16px;
line-height: 1;
cursor: pointer;
}
/* Menú oscuro (si usas menú propio) */
#weglot_here .lang-menu {
position: absolute;
right: 0;
margin-top: 8px;
list-style: none;
padding: 6px 0;
min-width: 160px;
background: rgba(0, 0, 0, 0.86);
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
#weglot_here .lang-option {
width: 100%;
text-align: left;
padding: 8px 12px;
background: transparent;
border: 0;
color: #fff;
font-family: var(--font-sans);
font-size: 14px;
cursor: pointer;
}
#weglot_here .lang-option:hover {
background: rgba(255, 255, 255, 0.1);
}
@media (max-width: 640px) {
#weglot_here {
top: 8px;
right: 12px;
}
}
/* Desplegable idioma: colgar SIEMPRE por debajo del trigger */
#weglot_here .lang-menu{
position: absolute;
right: 0;
top: calc(100% + 12px); /* <- aquí lo “bajamos” */
margin-top: 0 !important; /* anulamos cualquier margen anterior */
z-index: 200; /* por encima del header */
list-style: none;
padding: 6px 0;
min-width: 160px;
background: rgba(0,0,0,.86);
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
/* (opcional) si pones muchos idiomas, que no se salga de pantalla */
#weglot_here .lang-menu{
max-height: 50vh;
overflow: auto;
overscroll-behavior: contain;
}
/* Ajuste fino en móvil */
@media (max-width:640px){
#weglot_here{ top: 8px; right: 12px; }
#weglot_here .lang-menu{ top: calc(100% + 10px); }
}
/* === Área personal — móvil: cabecera más alta + menú alineado === */
@media (max-width: 640px){
/* controla aquí la altura de la cabecera del Área personal */
body.page.area-personal { --ap-header-h: 70px; } /* prueba 90–112px a tu gusto */
body.page.area-personal .landing-header{
min-height: var(--ap-header-h);
padding: 16px 12px 8px;
display: flex;
flex-direction: column; /* subtítulo debajo del título */
align-items: flex-start; /* título a la izquierda */
justify-content: flex-start;
}
body.page.area-personal .brand-title{
font-size: 26px;
margin: 0;
}
body.page.area-personal .landing-subtitle{
position: static; /* no absolute en móvil */
transform: none;
width: 100%;
max-width: 100%;
text-align: center;
margin-top: 6px; /* separa del título */
font-size: 14px;
}
/* Botón hamburguesa un pelín más bajo para “respirar” */
body.page.area-personal .hamburger{
top: 12px;
}
/* Panel: cuélgalo justo bajo la cabecera real */
body.page.area-personal #menu-panel.menu-panel{
top: calc(var(--ap-header-h) + 2px);
}
}
/* === Landing (móvil): CTA con ancho natural, juntos si caben === */
@media (max-width: 640px){
.landing-card .cta-actions{
display: flex;
flex-wrap: wrap; /* si no caben, pasan a la 2ª línea */
justify-content: center; /* centra la fila */
column-gap: 12px; /* espacio horizontal reducido */
row-gap: 10px; /* espacio vertical cuando se apilan */
}
.landing-card .cta-actions .btn{
flex: 0 0 auto; /* NO estirar ni encoger: ancho natural */
width: auto; /* explícito */
white-space: nowrap; /* evita saltos dentro del texto */
padding: 12px 14px; /* opcional: un pelín más compacto que desktop */
}
}
/* === Chat: composer anclado abajo y crecimiento hacia arriba === */
/* Altura mínima “por defecto” del composer; la iremos actualizando por JS */
:root{ --composer-h: 72px; }
/* El shell es el contenedor vertical (stream arriba, composer abajo) */
.chat-shell{ position: relative; }
/* 1) El composer queda pegado al bottom del contenedor scrollable */
.composer-wrap{
position: sticky; /* clave */
bottom: calc(var(--footer-h) + max(6px, env(safe-area-inset-bottom)));
z-index: 60;
margin-bottom: 0; /* no empujar más abajo */
}
/* 2) El timeline reserva espacio bajo igual a la altura del composer */
.chat-stream{
padding-bottom: calc(var(--composer-h) + 16px);
}
/* 3) El textarea puede crecer, pero cuando llegue al tope, hace scroll interno */
.composer textarea{
overflow: auto; /* antes: hidden → no veías lo que escribías */
min-height: 38px;
max-height: 40vh; /* limite razonable en mobile */
}
/* (Opcional recomendado) Mejor gestión del teclado en móvil moderno */
@media (max-width: 640px){
.chat-stream{
/* usar dvh para que el alto útil se adapte cuando aparece el teclado */
min-height: 50dvh;
/* si tienes un cálculo previo con 100vh, puedes sustituirlo por 100dvh */
}
}