/* ============================================================
style.css — Estilos compartidos de ÉLIX (v2: HUD + tema claro/oscuro)
- TODOS los colores viven como variables en :root (tema oscuro AMOLED por defecto
y tema claro en :root[data-tema="claro"])
- TODAS las tipografías vienen de Google Fonts (se cargan con en el
de cada página) y son variables en :root
- TODOS los iconos son Material Symbols (fonts.google.com/icons)
============================================================ */
:root {
color-scheme: dark; /* controles nativos (scroll, inputs) acordes al tema */
/* ---- Tipografías (Google Fonts) ---- */
--fuente-logo: 'Turret Road', 'Oxanium', sans-serif; /* marca ÉLIX */
--fuente-titulo: 'Oxanium', sans-serif; /* títulos y botones (estilo HUD) */
--fuente-texto: 'Space Grotesk', sans-serif; /* texto general y chat */
--fuente-mono: 'JetBrains Mono', monospace; /* códigos de 6 dígitos y link */
--fuente-hud: 'Share Tech Mono', monospace; /* relojes y lecturas tipo HUD */
--fuente-codigo: 'Cutive Mono', monospace; /* texto en formato "código" de los mensajes y descripciones */
--fuente-iconos: 'Material Symbols Rounded';
/* ---- Paleta base, tema oscuro AMOLED (negro + morado de ÉLIX) ---- */
--color-fondo: #000000;
--color-fondo-2: #14001F;
--color-tarjeta: #0B0B10;
--color-tarjeta-2: #15151C;
--color-morado: #B83DBA;
--color-morado-claro: #CF5AD1;
--color-morado-medio: #AF39B1;
--color-morado-oscuro: #651866;
--color-acento: #9200D1;
--color-texto: #E6E6EA;
--color-texto-suave: #9A9AA6;
--color-gris: #2B2B36;
--color-gris-claro: #666672;
--color-blanco: #FFFFFF;
--color-negro: #000000;
/* ---- Colores de estado (definidos por el proyecto) ---- */
--color-success: #22c55e;
--color-warning: #facc15;
--color-error: #ef4444;
--color-info: #3b82f6;
/* Versión para TEXTO (en el tema claro se oscurecen para tener contraste) */
--color-success-texto: var(--color-success);
--color-warning-texto: var(--color-warning);
--color-error-texto: var(--color-error);
--color-info-texto: var(--color-info);
/* Tintes de fondo para avisos e insignias */
--color-success-suave: color-mix(in srgb, var(--color-success) 14%, transparent);
--color-warning-suave: color-mix(in srgb, var(--color-warning) 14%, transparent);
--color-error-suave: color-mix(in srgb, var(--color-error) 14%, transparent);
--color-info-suave: color-mix(in srgb, var(--color-info) 14%, transparent);
/* ---- Colores extra para avatares por defecto (iniciales) ---- */
--color-azul: #3D7BBA;
--color-turquesa: #3DBAA8;
--color-naranja: #BA7A3D;
/* Paleta de colores de texto de las descripciones (rojo/verde/amarillo/azul usan los colores de estado de arriba) */
--color-rosa-texto: #F472B6;
--color-cian-texto: #22D3EE;
--color-naranja-texto: #FB923C;
--avatar-1: var(--color-morado);
--avatar-2: var(--color-azul);
--avatar-3: var(--color-turquesa);
--avatar-4: var(--color-naranja);
--avatar-5: var(--color-morado-oscuro);
--avatar-6: var(--color-acento);
/* ---- QR: módulos oscuros sobre fondo claro (en ambos temas, para que se pueda escanear) ---- */
--color-qr-oscuro: #0D0D0D;
--color-qr-claro: #FFFFFF;
/* ---- Transparencias y efectos HUD ---- */
--color-velo: color-mix(in srgb, var(--color-negro) 65%, transparent);
--color-velo-suave: color-mix(in srgb, var(--color-negro) 25%, transparent);
--color-morado-suave: color-mix(in srgb, var(--color-morado) 15%, transparent);
--color-morado-borde: color-mix(in srgb, var(--color-morado) 45%, transparent);
--color-cuadricula: color-mix(in srgb, var(--color-morado) 8%, transparent);
--color-halo: color-mix(in srgb, var(--color-acento) 30%, transparent);
--sombra-morado: 0 0 22px color-mix(in srgb, var(--color-morado) 38%, transparent);
--sombra-tarjeta: 0 6px 22px color-mix(in srgb, var(--color-negro) 55%, transparent);
/* ---- Degradados ---- */
--gradiente-principal: linear-gradient(135deg, var(--color-morado), var(--color-morado-oscuro));
--gradiente-fondo: linear-gradient(160deg, var(--color-fondo), var(--color-fondo-2));
/* Logo: brillo blanco que barre una sola vez al cargar la bienvenida */
--gradiente-logo: linear-gradient(100deg, var(--color-morado-claro) 0%, var(--color-acento) 42%, var(--color-blanco) 50%, var(--color-acento) 58%, var(--color-morado-claro) 100%);
/* ---- Radios (esquinas más rectas, estilo HUD) ---- */
--radio-sm: 4px;
--radio-md: 8px;
--radio-lg: 12px;
/* ---- Movimiento: duraciones y curvas usadas por TODAS las animaciones ---- */
--mov-rapido: 150ms; /* micro-interacciones (hover, pulsación) */
--mov-medio: 260ms; /* aperturas, entradas, cambios de estado */
--mov-lento: 480ms; /* momentos destacados (llenado, destello) */
--ease-salida: cubic-bezier(0.16, 1, 0.3, 1); /* arranca rápido y frena suave (entradas) */
--ease-entrada: cubic-bezier(0.7, 0, 0.84, 0); /* acelera al final (salidas) */
--ease-suave: cubic-bezier(0.4, 0, 0.2, 1); /* transiciones de color/borde */
--ease-rebote: cubic-bezier(0.34, 1.56, 0.64, 1); /* pequeño rebote (pop, selección) */
--color-prueba-emoji: #FF00FF; /* solo para detectar qué emojis dibuja el dispositivo (no se ve) */
--ancho-contenedor: 520px; /* ancho de las pantallas (crece en tablets y escritorio) */
--sombra-morado-fuerte: 0 0 30px color-mix(in srgb, var(--color-morado) 55%, transparent);
/* ---- v1.5.0: errores de formulario y advertencias (rojo) + resaltado de la búsqueda en el chat (amarillo) ---- */
--color-error-borde: color-mix(in srgb, var(--color-error) 55%, transparent); /* contorno tenue rojo */
--color-error-fondo: color-mix(in srgb, var(--color-error) 9%, var(--color-tarjeta)); /* fondo de la ventana de advertencia */
--color-velo-error: color-mix(in srgb, var(--color-error) 20%, transparent); /* tinte rojo detrás de la advertencia */
--sombra-error: 0 0 26px color-mix(in srgb, var(--color-error) 38%, transparent);
--sombra-error-fuerte: 0 0 40px color-mix(in srgb, var(--color-error) 60%, transparent);
--color-resaltado: color-mix(in srgb, var(--color-warning) 42%, transparent); /* coincidencias de la búsqueda */
--color-resaltado-activo: var(--color-warning); /* la coincidencia seleccionada */
/* ---- v1.8.0: recortador de imágenes y reproductor de video ---- */
--color-recorte-borde: var(--color-morado-claro); /* borde y asideros del recuadro de recorte */
--color-recorte-guia: color-mix(in srgb, var(--color-blanco) 38%, transparent); /* líneas guía (tercios) dentro del recuadro */
--color-video-barra: color-mix(in srgb, var(--color-negro) 82%, transparent); /* fondo de los controles del video */
--color-video-etiqueta: color-mix(in srgb, var(--color-negro) 62%, transparent); /* fondo de la etiqueta con la duración */
/* v1.9.0 — Selector de emojis, "visto por", votación, menciones y visor protegido */
--emoji-ancho: 42px; /* ancho mínimo de cada emoji del selector (define cuántos caben por fila) */
--emoji-alto: 42px; /* alto de cada emoji (46 px en pantallas táctiles: ver el final del archivo) */
--color-visto: color-mix(in srgb, var(--color-blanco) 62%, var(--color-gris-claro)); /* ojo y contador de "visto por": gris claro que se lee sobre la burbuja morada */
--color-sobre-error: var(--color-blanco); /* texto sobre un fondo rojo (botón "Sí, expulsar" elegido) */
--color-sobre-exito: var(--color-negro); /* texto sobre un fondo verde (botón "No" elegido) */
--color-mencion-texto: var(--color-morado-claro); /* @menciones en los mensajes de otras personas (v1.10.0: moradas) */
--color-mencion-fondo: color-mix(in srgb, var(--color-morado) 24%, transparent);
--color-mencion-borde: var(--color-morado-claro); /* borde de la burbuja donde te mencionaron */
--color-marca-agua: var(--color-blanco); /* marca de agua del visor de mensajes de 1 vez */
--color-visor-fondo: color-mix(in srgb, var(--color-negro) 92%, transparent); /* fondo del visor de mensajes de 1 vez */
/* v1.9.1 — Animaciones de carga (esqueletos con brillo) */
--color-esqueleto: color-mix(in srgb, var(--color-morado) 22%, var(--color-tarjeta-2)); /* base del marcador de carga (un poco más clara que las tarjetas para que se note) */
--color-esqueleto-brillo: color-mix(in srgb, var(--color-morado) 50%, var(--color-tarjeta-2)); /* franja de luz que lo recorre */
--mov-esqueleto: 1.4s; /* vuelta completa del brillo */
/* v1.10.0 — Mensajes "apagados" (mensaje de 1 vez ya abierto, encuesta finalizada), enlaces y tarjeta de biografía (negro y rojo) */
--color-apagado-fondo: color-mix(in srgb, var(--color-gris) 70%, var(--color-tarjeta)); /* burbuja en gris */
--color-apagado-borde: color-mix(in srgb, var(--color-gris) 55%, var(--color-texto-suave));
--color-apagado-texto: var(--color-texto-suave);
--color-enlace-otro: var(--color-morado-claro); /* enlaces en mensajes de otras personas (moradas y subrayadas) */
--color-enlace-propio: var(--color-blanco); /* enlaces en mis mensajes (blancos) */
--color-bio-negro: #060607;
--color-bio-negro-2: #121216;
--color-bio-rojo: #E01B2F;
--color-bio-rojo-claro: #FF5A69;
--color-bio-rojo-oscuro: #6E0A14;
--color-bio-texto: #EDEDF0;
--color-bio-suave: #A7A7B0;
--sombra-bio: 0 0 26px color-mix(in srgb, var(--color-bio-rojo) 40%, transparent);
/* v1.12.0 — Lista de chats (no leídos, borrador, escribiendo), visto por todos, selección múltiple, fragmentos, visor con zoom, cámara, editor de video y tarjeta morada */
--color-no-leidos: var(--color-morado); /* burbuja con la cantidad de mensajes no vistos */
--color-no-leidos-texto: var(--color-blanco);
--color-no-leidos-silenciado: var(--color-gris-claro); /* la misma burbuja en un grupo silenciado */
--color-escribiendo-lista: var(--color-morado-claro); /* "Escribiendo…" y "[Borrador]" en las listas */
--color-visto-todos: #F3C6FF; /* ojo + contador cuando TODOS vieron tu mensaje: morado muy claro que se lee sobre la burbuja morada */
--color-visto-todos-fondo: color-mix(in srgb, var(--color-negro) 34%, transparent); /* pastilla oscura detrás del ojo morado (contraste en ambos temas) */
--sombra-visto-todos: 0 0 10px color-mix(in srgb, var(--color-visto-todos) 55%, transparent);
--color-seleccion: color-mix(in srgb, var(--color-morado) 24%, transparent); /* fondo de los mensajes elegidos (selección múltiple) */
--color-seleccion-borde: color-mix(in srgb, var(--color-morado-claro) 55%, transparent);
--color-subrayado: var(--color-warning); /* subrayado del fragmento / voto al que se respondió */
--color-subrayado-fondo: color-mix(in srgb, var(--color-warning) 22%, transparent);
--color-reaccion-fondo: var(--color-tarjeta-2); /* pastilla de las reacciones montadas sobre el borde de la burbuja */
--color-reaccion-borde: var(--color-gris);
--color-visor-medios: color-mix(in srgb, var(--color-negro) 94%, transparent); /* fondo del visor a pantalla completa (fotos con zoom) */
--color-visor-barra: color-mix(in srgb, var(--color-negro) 55%, transparent);
--color-camara-fondo: var(--color-negro);
--color-camara-texto: var(--color-blanco);
--color-camara-disparo: var(--color-blanco);
--color-camara-grabando: var(--color-error);
--color-camara-flash: var(--color-blanco);
--color-subida: color-mix(in srgb, var(--color-negro) 55%, transparent); /* velo de la miniatura mientras se sube */
--color-bio2-negro: #07030C; /* tarjeta del segundo programador: paleta morado oscuro */
--color-bio2-negro-2: #140A22;
--color-bio2-morado: #6D28D9;
--color-bio2-morado-claro: #A78BFA;
--color-bio2-morado-oscuro: #2E1065;
--color-bio2-texto: #EDE9FE;
--color-bio2-suave: #A79BC4;
--sombra-bio2: 0 0 26px color-mix(in srgb, var(--color-bio2-morado) 45%, transparent);
/* v1.13.0 — Descripciones (editor visual), banners, botón para bajar, anti-spam, chats privados y notas del parche */
--color-desc-vacia: var(--color-gris-claro); /* "Sin descripción" (gris oscuro, en cursiva) */
--color-editor-fondo: var(--color-tarjeta-2); /* área del editor visual */
--color-editor-borde: var(--color-gris);
--color-editor-foco: var(--color-morado);
--color-banner-fondo: var(--color-tarjeta-2); /* banner vacío o mientras carga */
--color-banner-borde: var(--color-gris);
--color-bajar-fondo: var(--color-tarjeta-2); /* botón redondo para bajar al final del chat */
--color-bajar-icono: var(--color-morado-claro);
--color-bajar-borde: var(--color-morado-borde);
--color-bajar-contador: var(--color-no-leidos); /* burbuja morada con los no leídos */
--color-bajar-contador-texto: var(--color-no-leidos-texto);
--sombra-bajar: 0 4px 16px color-mix(in srgb, var(--color-negro) 45%, transparent);
--color-spam: var(--color-error-texto); /* aviso "suspendido por Spam" y pantalla roja */
--color-aceptar: var(--color-success); /* cuadrado verde "Aceptar" (chat privado) */
--color-aceptar-fondo: var(--color-success-suave);
--color-rechazar: var(--color-error); /* cuadrado rojo "Rechazar" */
--color-rechazar-fondo: var(--color-error-suave);
--color-privado: var(--color-morado-claro); /* candado y separador de los chats privados */
--color-accion-morada: var(--color-morado-claro); /* opciones de menú en morado ("Hacer Admin", "Invitar a chat privado") */
--color-nota-actual: var(--color-morado); /* versión actual en las notas del parche */
--color-subida-avance: var(--color-morado); /* barra de subida de las imágenes del editor */
/* ---- v1.14.0: foto sobre el banner, chats privados temporales, códigos por SMS, notas del parche y programadores nuevos ---- */
--color-anillo-foto: var(--color-tarjeta); /* aro alrededor de la foto montada sobre el banner (separa la foto del banner) */
--tam-foto-banner: 96px; /* tamaño de la foto sobre el banner en las pantallas (avatar xl) */
--tam-foto-banner-grande: 120px; /* tamaño de la foto sobre el banner al tocar una foto (avatar xxl) */
--color-privado-temporal: var(--color-warning-texto); /* aviso "Chat temporal" del chat privado */
--color-privado-temporal-fondo: var(--color-warning-suave);
--color-privado-temporal-borde: color-mix(in srgb, var(--color-warning) 55%, transparent);
--color-privado-guardado: var(--color-success-texto); /* aviso "Chat guardado" (los 2 se registraron) */
--color-privado-guardado-fondo: var(--color-success-suave);
--color-privado-guardado-borde: color-mix(in srgb, var(--color-success) 55%, transparent);
--color-codigo-prueba: var(--color-warning-texto); /* código mostrado en modo prueba (sin proveedor de SMS) */
--color-boton-lleno: var(--color-gris); /* "Crear grupo (3/3)": botón apagado */
/* Etiquetas de las notas del parche */
--color-etiqueta-nuevo: var(--color-success-texto);
--color-etiqueta-mejora: var(--color-info-texto);
--color-etiqueta-arreglo: var(--color-error-texto);
--color-etiqueta-seguridad: var(--color-warning-texto);
--color-etiqueta-diseno: var(--color-rosa-texto);
--color-etiqueta-servidor: var(--color-cian-texto);
/* Tarjetas de los programadores 3 a 6 (Centro de ayuda): VERDE, AZUL, CELESTE y AMARILLO (mismos papeles que --color-bio-*: fondo, fondo 2, principal, claro, oscuro, texto, suave) */
--color-bio3-negro: #030A05; --color-bio3-negro-2: #0B1F12; --color-bio3-principal: #16A34A; --color-bio3-claro: #4ADE80; --color-bio3-oscuro: #14532D; --color-bio3-texto: #E8FBEF; --color-bio3-suave: #9CC7AB;
--color-bio4-negro: #03050D; --color-bio4-negro-2: #0B1433; --color-bio4-principal: #2563EB; --color-bio4-claro: #60A5FA; --color-bio4-oscuro: #1E3A8A; --color-bio4-texto: #E7EEFF; --color-bio4-suave: #9DB0D9;
--color-bio5-negro: #020A0D; --color-bio5-negro-2: #082029; --color-bio5-principal: #0EA5E9; --color-bio5-claro: #7DD3FC; --color-bio5-oscuro: #0C4A6E; --color-bio5-texto: #E6F8FF; --color-bio5-suave: #97C4D6;
--color-bio6-negro: #0B0902; --color-bio6-negro-2: #221B06; --color-bio6-principal: #EAB308; --color-bio6-claro: #FDE047; --color-bio6-oscuro: #713F12; --color-bio6-texto: #FFFBE6; --color-bio6-suave: #D2C58F;
}
/* ---- Tema claro: solo cambia valores de variables; se activa con ---- */
:root[data-tema="claro"] {
color-scheme: light;
--color-fondo: #F5F3F8;
--color-fondo-2: #E9DDF3;
--color-tarjeta: #FFFFFF;
--color-tarjeta-2: #F1EEF5;
--color-morado: #A62FA8;
--color-morado-claro: #8F2A91;
--color-morado-medio: #9A3299;
--color-acento: #7A00B0;
--color-texto: #1B1722;
--color-texto-suave: #5B5566;
--color-gris: #D5CFDD;
--color-gris-claro: #8B8596;
--color-success-texto: #15803d;
--color-warning-texto: #a16207;
--color-error-texto: #dc2626;
--color-info-texto: #1d4ed8;
--color-rosa-texto: #be185d;
--color-cian-texto: #0e7490;
--color-naranja-texto: #c2410c;
--color-halo: color-mix(in srgb, var(--color-morado) 18%, transparent);
--color-cuadricula: color-mix(in srgb, var(--color-morado) 9%, transparent);
--color-velo: color-mix(in srgb, var(--color-negro) 45%, transparent);
--sombra-tarjeta: 0 6px 20px color-mix(in srgb, var(--color-morado-oscuro) 14%, transparent);
--sombra-morado: 0 4px 18px color-mix(in srgb, var(--color-morado) 30%, transparent);
}
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--fuente-texto);
/* Fondo HUD: cuadrícula tenue + halo morado superior + degradado */
background:
linear-gradient(var(--color-cuadricula) 1px, transparent 1px) 0 0 / 34px 34px,
linear-gradient(90deg, var(--color-cuadricula) 1px, transparent 1px) 0 0 / 34px 34px,
radial-gradient(ellipse 80% 45% at 50% -8%, var(--color-halo), transparent),
var(--gradiente-fondo);
background-attachment: fixed;
color: var(--color-texto);
min-height: 100dvh;
line-height: 1.45;
display: flex;
flex-direction: column;
}
a { color: var(--color-morado-claro); text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--color-morado-claro); outline-offset: 2px; }
/* Icono Material Symbols: nombre */
.material-symbols-rounded {
font-family: var(--fuente-iconos);
font-weight: normal; font-style: normal; font-size: 24px; line-height: 1;
letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap;
direction: ltr; -webkit-font-smoothing: antialiased; font-feature-settings: 'liga'; user-select: none;
}
/* ---------- Estructura ---------- */
/* Márgenes que respetan los bordes seguros (notch, esquinas redondeadas y barra de gestos) */
.contenedor { width: 100%; max-width: var(--ancho-contenedor); margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); flex: 1; }
.contenedor--centrado { display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.pila { display: flex; flex-direction: column; gap: 14px; }
/* Dos columnas iguales; si un elemento está oculto ([hidden]) el visible ocupa todo el ancho (ej. "Tomar foto" / "Repetir foto") */
.fila-2 { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.btn { white-space: nowrap; } /* los botones no parten su texto en dos líneas */
.separador { display: flex; align-items: center; gap: 12px; color: var(--color-texto-suave); font-size: 13px; }
.separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: var(--color-gris); }
.nota { font-size: 12px; color: var(--color-texto-suave); text-align: center; }
.pie { text-align: center; padding: 14px; font-family: var(--fuente-hud); font-size: 12px; color: var(--color-texto-suave); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; } /* v1.5.0: fila para la etiqueta Beta */
.vacio { text-align: center; color: var(--color-texto-suave); padding: 40px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vacio .material-symbols-rounded { font-size: 64px; color: var(--color-gris-claro); }
/* Tarjeta y modal con esquinas "HUD": dos corchetes morados en esquinas opuestas */
.tarjeta, .modal { position: relative; background: var(--color-tarjeta); border: 1px solid var(--color-gris); border-radius: var(--radio-md); box-shadow: var(--sombra-tarjeta); }
.tarjeta { padding: 20px; }
.tarjeta::before, .tarjeta::after, .modal::before, .modal::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid var(--color-morado); pointer-events: none; }
.tarjeta::before, .modal::before { top: -1px; left: -1px; border-right: none; border-bottom: none; border-top-left-radius: var(--radio-md); }
.tarjeta::after, .modal::after { bottom: -1px; right: -1px; border-left: none; border-top: none; border-bottom-right-radius: var(--radio-md); }
/* ---------- Marca ---------- */
.logo { font-family: var(--fuente-logo); font-weight: 800; font-size: 68px; letter-spacing: 0.10em; text-align: center; background: var(--gradiente-logo); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px var(--color-halo)); animation: barrido 1.8s ease-out 0.2s 1 both; }
.hero { text-align: center; padding-top: 24px; }
.hero__lema { font-family: var(--fuente-hud); font-size: 15px; color: var(--color-texto-suave); margin-top: 6px; letter-spacing: 0.06em; }
.icono-titulo { display: flex; justify-content: center; }
.icono-titulo .material-symbols-rounded { font-size: 88px; color: var(--color-morado); filter: drop-shadow(0 0 12px var(--color-halo)); }
/* Título de sección con barra lateral (indica dónde empieza cada bloque) */
.titulo-seccion { font-family: var(--fuente-titulo); font-size: 16px; font-weight: 700; color: var(--color-texto); border-left: 3px solid var(--color-morado); padding-left: 10px; letter-spacing: 0.02em; }
/* ---------- Barra superior ---------- */
.appbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); background: var(--color-tarjeta); border-bottom: 1px solid var(--color-gris); }
.appbar::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 88px; height: 1px; background: var(--color-morado); box-shadow: var(--sombra-morado); }
.appbar__titulo { flex: 1; font-family: var(--fuente-titulo); font-weight: 700; font-size: 17px; text-align: center; letter-spacing: 0.04em; }
.appbar__espacio { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; } /* v1.5.0: min-width (antes width fijo) para que quepan la foto de la cuenta y el engranaje */
.ajustes-flotante { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 30; display: flex; align-items: center; gap: 4px; } /* v1.5.0: fila (foto de cuenta + engranaje) */
/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: var(--radio-sm); font-family: var(--fuente-titulo); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; border: 1px solid transparent; text-align: center; transition: transform var(--mov-rapido), filter var(--mov-rapido), background var(--mov-rapido), box-shadow var(--mov-rapido); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primario { background: var(--gradiente-principal); color: var(--color-blanco); border-color: var(--color-morado-claro); box-shadow: var(--sombra-morado); }
.btn--primario:hover:not(:disabled) { filter: brightness(1.15); }
.btn--secundario { background: var(--color-tarjeta-2); border-color: var(--color-morado-borde); color: var(--color-texto); }
.btn--secundario:hover { background: var(--color-morado-suave); border-color: var(--color-morado); }
.btn--fantasma { color: var(--color-morado-claro); }
.btn--fantasma:hover { background: var(--color-morado-suave); }
.btn--peligro { background: var(--color-error-suave); border-color: var(--color-error); color: var(--color-error-texto); }
.btn--exito { background: var(--color-success-suave); border-color: var(--color-success); color: var(--color-success-texto); }
.btn--grande { padding: 16px 24px; font-size: 16px; }
.btn--bloque { width: 100%; }
.btn-icono { width: 40px; height: 40px; border-radius: var(--radio-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--color-texto); flex-shrink: 0; transition: background var(--mov-rapido), color var(--mov-rapido); }
.btn-icono:hover { background: var(--color-morado-suave); color: var(--color-morado-claro); }
/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo__etiqueta { font-size: 13px; color: var(--color-texto-suave); font-weight: 500; }
.campo__entrada { width: 100%; background: var(--color-fondo); border: 1px solid var(--color-gris); border-radius: var(--radio-md); padding: 12px 14px; font-size: 16px; outline: none; transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido); } /* 16 px: evita el zoom automático de iPhone al enfocar */
.campo__entrada:focus { border-color: var(--color-morado); box-shadow: var(--sombra-morado); }
.campo__entrada--error { border-color: var(--color-error); }
textarea.campo__entrada { resize: vertical; min-height: 96px; }
.campo__ayuda { font-size: 12px; color: var(--color-texto-suave); }
.campo__contador { align-self: flex-end; font-family: var(--fuente-hud); font-size: 12px; color: var(--color-texto-suave); }
.campo__envoltorio { position: relative; display: flex; align-items: center; }
.campo__ojo { position: absolute; right: 4px; }
.mensaje-form { font-size: 13px; min-height: 18px; text-align: center; }
.mensaje-form--error { color: var(--color-error-texto); }
.mensaje-form--ok { color: var(--color-success-texto); }
.buscador { position: relative; flex: 1; }
.buscador > .material-symbols-rounded { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-texto-suave); }
.buscador .campo__entrada { padding-left: 44px; padding-right: 44px; }
/* Avisos en línea (info, aviso, error, éxito) con los colores de estado */
.aviso { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radio-md); border: 1px solid; font-size: 14px; }
.aviso .material-symbols-rounded { font-size: 22px; flex-shrink: 0; }
.aviso__cuerpo { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.aviso--info { background: var(--color-info-suave); border-color: var(--color-info); }
.aviso--info .material-symbols-rounded { color: var(--color-info-texto); }
.aviso--warning { background: var(--color-warning-suave); border-color: var(--color-warning); }
.aviso--warning .material-symbols-rounded { color: var(--color-warning-texto); }
.aviso--error { background: var(--color-error-suave); border-color: var(--color-error); }
.aviso--error .material-symbols-rounded { color: var(--color-error-texto); }
.aviso--success { background: var(--color-success-suave); border-color: var(--color-success); }
.aviso--success .material-symbols-rounded { color: var(--color-success-texto); }
/* Urgencia del tiempo restante: menos de 1 hora (aviso) y menos de 5 minutos (error) */
.urgencia--aviso { color: var(--color-warning-texto); }
.urgencia--error { color: var(--color-error-texto); }
/* Chips de duración */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 14px; border-radius: var(--radio-sm); border: 1px solid var(--color-gris); background: var(--color-fondo); font-size: 14px; }
.chip--activo { background: var(--color-morado-suave); border-color: var(--color-morado); color: var(--color-morado-claro); }
/* Tarjetas de opción (radio visual) */
.opcion { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--color-gris); border-radius: var(--radio-md); cursor: pointer; text-align: left; width: 100%; background: var(--color-tarjeta); transition: border-color var(--mov-rapido); }
.opcion:hover { border-color: var(--color-morado-borde); }
.opcion .material-symbols-rounded { color: var(--color-morado-claro); margin-top: 2px; }
.opcion--activa { border-color: var(--color-morado); background: var(--color-morado-suave); }
.opcion__titulo { font-family: var(--fuente-titulo); font-weight: 700; color: var(--color-texto); }
.opcion__texto { font-size: 13px; color: var(--color-texto-suave); }
/* ---------- Insignias ---------- */
.insignia { display: inline-flex; align-items: center; gap: 4px; font-family: var(--fuente-titulo); font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: var(--radio-sm); background: var(--color-morado-suave); color: var(--color-morado-claro); }
.insignia .material-symbols-rounded { font-size: 14px; }
.insignia--gris { background: var(--color-gris); color: var(--color-texto); }
.insignia--exito { background: var(--color-success-suave); color: var(--color-success-texto); }
.insignia--error { background: var(--color-error-suave); color: var(--color-error-texto); }
.insignia--aviso { background: var(--color-warning-suave); color: var(--color-warning-texto); }
.insignia--info { background: var(--color-info-suave); color: var(--color-info-texto); }
/* ---------- Avatares ---------- */
.avatar { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; font-family: var(--fuente-titulo); font-weight: 700; color: var(--color-blanco); text-transform: uppercase; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 32px; height: 32px; font-size: 13px; }
.avatar--md { width: 40px; height: 40px; font-size: 15px; }
.avatar--lg { width: 56px; height: 56px; font-size: 20px; }
.avatar--xl { width: 96px; height: 96px; font-size: 34px; }
.avatar--c1 { background: var(--avatar-1); } .avatar--c2 { background: var(--avatar-2); }
.avatar--c3 { background: var(--avatar-3); } .avatar--c4 { background: var(--avatar-4); }
.avatar--c5 { background: var(--avatar-5); } .avatar--c6 { background: var(--avatar-6); }
.avatar--grupo { background: var(--gradiente-principal); }
.avatar--grupo .material-symbols-rounded { font-size: 1.5em; }
/* ---------- Lista de grupos ---------- */
.grupo-item { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--color-tarjeta); border: 1px solid var(--color-gris); border-left: 3px solid var(--color-morado); border-radius: var(--radio-md); color: var(--color-texto); transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido); }
.grupo-item:hover { border-color: var(--color-morado); box-shadow: var(--sombra-morado); }
.grupo-item__datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.grupo-item__nombre { font-weight: 700; font-family: var(--fuente-titulo); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grupo-item__meta { font-size: 12px; color: var(--color-texto-suave); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.encabezado-lista { display: flex; align-items: center; gap: 12px; }
.contador-lista { font-family: var(--fuente-hud); font-size: 14px; color: var(--color-texto); white-space: nowrap; }
/* ---------- Pestañas / selector segmentado ---------- */
.pestanas { display: flex; background: var(--color-fondo); border: 1px solid var(--color-gris); border-radius: var(--radio-md); padding: 4px; gap: 4px; }
.pestana { flex: 1; padding: 8px; border-radius: var(--radio-sm); font-family: var(--fuente-titulo); font-size: 13px; font-weight: 700; color: var(--color-texto-suave); display: flex; align-items: center; justify-content: center; gap: 6px; }
.pestana .material-symbols-rounded { font-size: 18px; }
.pestana--activa { background: var(--gradiente-principal); color: var(--color-blanco); }
/* ---------- Ajustes ---------- */
.ajuste-fila { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--color-gris); border-radius: var(--radio-md); color: var(--color-texto); transition: border-color var(--mov-rapido); }
.ajuste-fila:hover { border-color: var(--color-morado); }
.ajuste-fila__datos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ajuste-fila__titulo { font-family: var(--fuente-titulo); font-weight: 700; }
.ajuste-fila__sub { font-size: 12px; color: var(--color-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---------- Código de 6 dígitos ---------- */
.cajas-codigo { display: flex; gap: 8px; justify-content: center; }
.caja-codigo { width: 46px; height: 58px; text-align: center; font-family: var(--fuente-mono); font-size: 26px; font-weight: 700; background: var(--color-fondo); border: 1px solid var(--color-gris); border-radius: var(--radio-md); outline: none; }
.caja-codigo:focus { border-color: var(--color-morado); box-shadow: var(--sombra-morado); }
.codigo-grande { font-family: var(--fuente-mono); font-weight: 700; font-size: 38px; letter-spacing: 0.15em; color: var(--color-success-texto); text-align: center; }
/* ---------- Visor de cámara (QR y foto de perfil) ---------- */
.visor { position: relative; aspect-ratio: 1; width: 100%; max-width: 340px; margin: 0 auto; border-radius: var(--radio-lg); overflow: hidden; background: var(--color-negro); border: 2px solid var(--color-morado); }
.visor video, .visor img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visor--espejo video { transform: scaleX(-1); }
.visor__marco { position: absolute; inset: 18%; border: 3px solid var(--color-morado-claro); border-radius: var(--radio-md); pointer-events: none; }
.visor__vacio { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--color-texto-suave); text-align: center; padding: 16px; font-size: 14px; }
.visor__vacio .material-symbols-rounded { font-size: 56px; }
#contenedorQR { display: flex; justify-content: center; padding: 14px; background: var(--color-qr-claro); border-radius: var(--radio-md); width: fit-content; margin: 0 auto; }
/* ---------- Vista previa de grupo ---------- */
.previa { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.previa__nombre { font-family: var(--fuente-titulo); font-size: 26px; font-weight: 800; color: var(--color-texto); overflow-wrap: anywhere; }
.previa__dato { font-size: 14px; color: var(--color-texto-suave); }
.previa__descripcion { text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; width: 100%; padding-top: 12px; border-top: 1px solid var(--color-gris); }
/* ---------- Reloj del grupo ---------- */
.reloj { font-family: var(--fuente-hud); font-size: 38px; letter-spacing: 0.06em; color: var(--color-morado-claro); text-shadow: 0 0 14px var(--color-halo); }
.progreso { height: 6px; background: var(--color-gris); border-radius: var(--radio-sm); overflow: hidden; }
.progreso__barra { height: 100%; width: var(--valor, 0%); background: var(--gradiente-principal); box-shadow: var(--sombra-morado); transition: width 1s linear; }
/* ---------- Miembros ---------- */
.miembro { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-gris); }
.miembro:last-child { border-bottom: none; }
.miembro__datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.miembro__nombre { font-weight: 500; color: var(--color-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.miembro__insignias { display: flex; flex-wrap: wrap; gap: 4px; }
/* ---------- Modal ---------- */
.modal-fondo { position: fixed; inset: 0; z-index: 100; background: var(--color-velo); display: flex; align-items: flex-end; justify-content: center; animation: aparecer var(--mov-rapido) ease-out; }
.modal { width: 100%; max-width: 460px; max-height: 92dvh; overflow: auto; border-radius: var(--radio-lg) var(--radio-lg) 0 0; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.modal__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.modal__titulo { font-family: var(--fuente-titulo); font-size: 18px; font-weight: 700; }
.modal__cuerpo { display: flex; flex-direction: column; gap: 12px; }
.modal__acciones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.medio--grande { max-width: 100%; max-height: 70dvh; border-radius: var(--radio-md); margin: 0 auto; display: block; }
@media (min-width: 600px) {
.modal-fondo { align-items: center; padding: 16px; }
.modal { border-radius: var(--radio-md); }
}
/* ---------- Menú flotante (acciones de mensaje y miembro) ---------- */
.menu-flotante { position: fixed; z-index: 120; min-width: 190px; background: var(--color-tarjeta-2); border: 1px solid var(--color-gris); border-radius: var(--radio-md); box-shadow: var(--sombra-tarjeta); overflow: hidden; }
.menu-flotante__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; font-size: 14px; text-align: left; color: var(--color-texto); }
.menu-flotante__item:hover { background: var(--color-morado-suave); }
.menu-flotante__item--peligro { color: var(--color-error-texto); }
/* ---------- Avisos breves (toast) ---------- */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { background: var(--color-tarjeta-2); border: 1px solid var(--color-info); color: var(--color-texto); padding: 10px 18px; border-radius: var(--radio-md); font-size: 14px; max-width: 90vw; box-shadow: var(--sombra-tarjeta); animation: aparecer var(--mov-medio) ease-out; }
.toast--info { border-color: var(--color-info); }
.toast--ok { border-color: var(--color-success); }
.toast--aviso { border-color: var(--color-warning); }
.toast--error { border-color: var(--color-error); }
/* ---------- Bloqueo de pantalla completa (grupo eliminado / expulsado) ---------- */
.bloqueo { position: fixed; inset: 0; z-index: 300; background: var(--color-fondo); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; }
.bloqueo .material-symbols-rounded { font-size: 72px; color: var(--color-morado); }
/* ---------- Chat ---------- */
.body-chat { height: 100dvh; overflow: hidden; }
.chat { height: var(--alto-visual, 100dvh); width: 100%; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; background: var(--gradiente-fondo); border-left: 1px solid var(--color-gris); border-right: 1px solid var(--color-gris); }
.chat__cabecera { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--color-tarjeta); border-bottom: 1px solid var(--color-gris); }
.chat__info { flex: 1; min-width: 0; cursor: pointer; }
.chat__nombre { font-family: var(--fuente-titulo); font-weight: 700; color: var(--color-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__estado { font-family: var(--fuente-hud); font-size: 13px; color: var(--color-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__cuerpo { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 3px; }
.fecha-sep { align-self: center; background: var(--color-tarjeta-2); border: 1px solid var(--color-gris); color: var(--color-texto-suave); font-family: var(--fuente-hud); font-size: 12px; padding: 3px 12px; border-radius: var(--radio-sm); margin: 10px 0 6px; }
.sistema { align-self: center; font-size: 12px; font-style: italic; color: var(--color-texto-suave); padding: 4px 12px; text-align: center; }
.sistema--entra { color: var(--color-success-texto); }
.sistema--sale { color: var(--color-error-texto); }
.fila { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; }
.fila--propia { align-self: flex-end; flex-direction: row-reverse; }
.fila--otra { align-self: flex-start; }
.fila__hueco { width: 32px; flex-shrink: 0; }
.burbuja { position: relative; padding: 7px 10px 5px; border-radius: var(--radio-lg); min-width: 84px; max-width: 100%; overflow-wrap: anywhere; }
.fila--propia .burbuja { background: var(--gradiente-principal); color: var(--color-blanco); border-bottom-right-radius: var(--radio-sm); }
.fila--otra .burbuja { background: var(--color-tarjeta); border: 1px solid var(--color-gris); border-bottom-left-radius: var(--radio-sm); }
.burbuja__autor { font-family: var(--fuente-titulo); font-size: 12px; font-weight: 700; color: var(--color-morado-claro); margin-bottom: 2px; }
.burbuja__texto { white-space: pre-wrap; font-size: 15px; }
.burbuja__eliminada { display: flex; align-items: center; gap: 6px; font-style: italic; opacity: .75; font-size: 14px; }
.burbuja__eliminada .material-symbols-rounded { font-size: 18px; }
.burbuja__pie { display: flex; justify-content: flex-end; font-family: var(--fuente-hud); font-size: 11px; opacity: .7; margin-top: 2px; }
.burbuja__menu { position: absolute; top: 2px; right: 2px; width: 26px; height: 26px; border-radius: var(--radio-sm); display: flex; align-items: center; justify-content: center; opacity: 0; background: var(--color-velo-suave); color: inherit; transition: opacity var(--mov-rapido); }
.burbuja:hover .burbuja__menu, .burbuja__menu:focus-visible { opacity: 1; }
@media (hover: none) { .burbuja__menu { opacity: .8; } }
.medio { display: block; width: 100%; max-width: 280px; border-radius: var(--radio-md); margin-bottom: 4px; }
.medio--imagen { cursor: zoom-in; }
.burbuja audio { width: 240px; max-width: 100%; display: block; }
.archivo { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--color-velo-suave); border-radius: var(--radio-md); color: inherit; min-width: 200px; }
.archivo .material-symbols-rounded { font-size: 32px; }
.archivo__datos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.archivo__nombre { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archivo__tam { font-size: 12px; opacity: .75; }
/* Barra de entrada del chat */
.entrada-envoltorio { position: relative; background: var(--color-tarjeta); border-top: 1px solid var(--color-gris); padding-bottom: env(safe-area-inset-bottom); }
.entrada { display: flex; align-items: flex-end; gap: 6px; padding: 10px; }
.entrada__texto { flex: 1; background: var(--color-fondo); border: 1px solid var(--color-gris); border-radius: var(--radio-lg); padding: 10px 16px; max-height: 120px; resize: none; outline: none; font-size: 16px; line-height: 1.4; }
.entrada__texto:focus { border-color: var(--color-morado); box-shadow: var(--sombra-morado); }
.btn-enviar { width: 44px; height: 44px; border-radius: 50%; background: var(--gradiente-principal); color: var(--color-blanco); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--sombra-morado); }
.adjuntar-menu { position: absolute; bottom: 100%; left: 10px; margin-bottom: 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px; background: var(--color-tarjeta-2); border: 1px solid var(--color-gris); border-radius: var(--radio-md); box-shadow: var(--sombra-tarjeta); }
.adjuntar-menu button { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--color-texto); min-width: 62px; }
.adjuntar-menu .material-symbols-rounded { width: 46px; height: 46px; border-radius: 50%; background: var(--gradiente-principal); color: var(--color-blanco); display: flex; align-items: center; justify-content: center; }
/* v1.7.0: la barra de grabación se SUPERPONE a la fila de escribir (.entrada-fila) en vez de ocultar el formulario, para que el botón del micrófono
siga bajo el dedo mientras se mantiene presionado. data-modo="sostenido" (dedo puesto): deja libre el hueco del micrófono a la derecha;
data-modo="fijado" (manos libres): ocupa toda la fila. Cada modo muestra solo sus controles (.grabando__solo-fijado / .grabando__solo-sostenido). */
.entrada-fila { position: relative; }
.grabando { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--color-tarjeta); transition: right var(--mov-medio) var(--ease-salida); }
.grabando[data-modo="sostenido"] { right: 64px; }
.grabando[data-modo="sostenido"] .grabando__solo-fijado, .grabando[data-modo="fijado"] .grabando__solo-sostenido { display: none; }
.grabando__punto { width: 12px; height: 12px; border-radius: 50%; background: var(--color-error); animation: latido 1s infinite; flex-shrink: 0; }
.grabando__tiempo { font-family: var(--fuente-hud); font-size: 18px; }
.grabando__pista { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--color-texto-suave); white-space: nowrap; } /* "Desliza para cancelar" */
.grabando__pista .material-symbols-rounded { font-size: 20px; }
.grabando .btn-una-vez { margin-left: auto; } /* con la grabación fijada, "1 vez" y enviar quedan a la derecha */
/* ---------- v1.7.0: botón "1 vez" ----------
Qué hace: interruptor (aria-pressed) que se usa en la previsualización de adjuntos y en la barra de grabación.
Para qué sirve: enviar el audio, la foto o el video para que se puedan ver/escuchar una sola vez. Comparte estado con el "1 vez" del menú de adjuntar. */
.btn-una-vez { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px 0 8px; border: 1px solid var(--color-gris); border-radius: var(--radio-md); background: transparent; color: var(--color-texto-suave); font-family: var(--fuente-titulo); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: color var(--mov-rapido) var(--ease-suave), background-color var(--mov-rapido) var(--ease-suave), border-color var(--mov-rapido) var(--ease-suave), box-shadow var(--mov-rapido) var(--ease-suave); }
.btn-una-vez .material-symbols-rounded { font-size: 20px; }
.btn-una-vez:hover { color: var(--color-morado-claro); border-color: var(--color-morado-borde); }
.btn-una-vez[aria-pressed="true"] { color: var(--color-morado-claro); border-color: var(--color-morado); background: var(--color-morado-suave); box-shadow: var(--sombra-morado); }
/* ---------- v1.7.0: previsualización de adjuntos (arriba del cuadro de texto) ----------
Qué hace: muestra, antes de enviar, cada foto/video (miniatura) o audio/documento (ficha con nombre y tamaño), cada uno con su X para quitarlo.
Para qué sirve: revisar lo que se va a mandar; los archivos solo se envían al tocar Enviar. */
.adjuntos-previa { display: flex; align-items: center; gap: 8px; padding: 10px 10px 0; }
.adjuntos-previa--enviando { opacity: .6; pointer-events: none; } /* mientras se envían no se puede quitar nada */
.adjuntos-previa__lista { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.adjunto { position: relative; flex: 0 0 auto; height: 72px; border-radius: var(--radio-md); overflow: hidden; background: var(--color-tarjeta-2); border: 1px solid var(--color-gris); animation: pop var(--mov-medio) var(--ease-rebote) backwards; }
.adjunto--medio { width: 72px; display: flex; align-items: center; justify-content: center; color: var(--color-texto-suave); } /* foto / video */
.adjunto__miniatura { display: block; width: 100%; height: 100%; object-fit: cover; }
.adjunto--archivo { width: 176px; display: flex; align-items: center; gap: 8px; padding: 0 34px 0 10px; color: var(--color-texto); } /* audio / documento */
.adjunto--archivo > .material-symbols-rounded { font-size: 28px; color: var(--color-morado-claro); flex-shrink: 0; }
.adjunto__datos { display: flex; flex-direction: column; min-width: 0; }
.adjunto__nombre { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adjunto__tam { font-size: 11px; color: var(--color-texto-suave); }
.adjunto__quitar { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-velo); color: var(--color-blanco); transition: background-color var(--mov-rapido) var(--ease-suave); }
.adjunto__quitar::after { content: ''; position: absolute; inset: -4px; } /* zona de toque más grande que el círculo visible */
.adjunto__quitar .material-symbols-rounded { font-size: 16px; }
.adjunto__quitar:hover { background: var(--color-error); }
.adjunto__insignia { position: absolute; left: 4px; bottom: 4px; display: flex; color: var(--color-blanco); filter: drop-shadow(0 0 3px var(--color-negro)); pointer-events: none; } /* marca de "video" */
.adjunto__insignia .material-symbols-rounded { font-size: 22px; }
/* ---------- v1.7.0: notas de voz estilo WhatsApp ----------
Qué hace: el micrófono admite gestos (mantener presionado, deslizar arriba para fijar, izquierda para cancelar): no debe desplazar la pantalla ni
seleccionar texto. Mientras se mantiene presionado (.btn-mic--sostenido) se agranda (el tamaño lo pone chat.js con transform) y sigue al dedo.
El candado aparece sobre el micrófono: deslizar hasta él fija la grabación. */
.btn-mic { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.btn-enviar.btn-mic--sostenido { z-index: 3; transition: none; box-shadow: var(--sombra-morado-fuerte); }
.candado-grab { position: absolute; right: 10px; bottom: calc(100% + 10px); z-index: 3; width: 44px; padding: 8px 0; display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: var(--radio-lg); background: var(--color-tarjeta-2); border: 1px solid var(--color-morado-borde); color: var(--color-morado-claro); box-shadow: var(--sombra-tarjeta); transform: translateY(calc(var(--prog, 0) * -8px)); pointer-events: none; }
.candado-grab .material-symbols-rounded { font-size: 22px; }
@media (pointer: coarse) { .candado-grab { width: 48px; } .btn-una-vez { height: 44px; } } /* el micrófono mide 48 px en pantallas táctiles; objetivos de toque de 44 px */
@media (max-width: 359px) { .grabando .onda-grab { display: none; } } /* en pantallas muy angostas el ecualizador no cabe junto a "1 vez" */
/* ============================================================
MOVIMIENTO — animaciones de todas las interacciones (v3)
Qué hace: define las entradas de pantalla, hover/pulsación, ondas al tocar, apertura y cierre de
modales/menús/paneles, avisos, mensajes del chat, cámara/QR y estados del tiempo.
Para qué sirve: dar respuesta visual a cada acción de la persona.
Todo usa los tokens --mov-* y --ease-* del :root y se desactiva con prefers-reduced-motion.
============================================================ */
/* ---------- Keyframes ---------- */
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes desvanecer { to { opacity: 0; } }
@keyframes latido { 50% { opacity: .25; } }
@keyframes pulso { 50% { opacity: .55; } }
@keyframes barrido { from { background-position: 100% 0; } to { background-position: 0% 0; } } /* brillo único del logo */
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } } /* aparece subiendo */
@keyframes pop { 0% { opacity: 0; transform: scale(.85); } 60% { opacity: 1; transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes seleccion { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes sacudir { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes onda { to { transform: scale(1); opacity: 0; } }
@keyframes extender { from { width: 0; } }
@keyframes llenar { from { width: 0; } }
@keyframes menu-entra { from { opacity: 0; transform: scale(.92) translateY(-4px); } }
@keyframes panel-sube { from { opacity: 0; transform: translateY(12px); } }
@keyframes modal-entra { from { opacity: 0; transform: translateY(40px); } } /* móvil: sube desde abajo */
@keyframes modal-entra-centro { from { opacity: 0; transform: scale(.94) translateY(8px); } } /* escritorio: escala al centro */
@keyframes modal-sale { to { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes toast-entra { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes toast-sale { to { opacity: 0; transform: translateY(8px); } }
@keyframes entrar-derecha { from { opacity: 0; transform: translateX(18px) scale(.96); } }
@keyframes entrar-izquierda { from { opacity: 0; transform: translateX(-18px) scale(.96); } }
@keyframes destello { 0% { transform: scale(1.05); box-shadow: var(--sombra-morado-fuerte); } 100% { transform: scale(1); } }
@keyframes flash { from { opacity: .9; } to { opacity: 0; } }
@keyframes escanear { from { top: 0; } to { top: calc(100% - 2px); } }
@keyframes ecualizador { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@keyframes vt-salir { to { opacity: 0; } }
@keyframes vt-entrar { from { opacity: 0; } }
/* ---------- Cambio de pantalla y de tema: fundido cruzado (navegadores con View Transitions) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-salir var(--mov-medio) var(--ease-suave) both; }
::view-transition-new(root) { animation: vt-entrar var(--mov-medio) var(--ease-suave) both; }
/* Alternativa para el cambio de tema cuando no hay View Transitions: colores que se funden */
:root.tema-cambiando, :root.tema-cambiando *, :root.tema-cambiando *::before, :root.tema-cambiando *::after {
transition: background-color var(--mov-medio) var(--ease-suave), color var(--mov-medio) var(--ease-suave), border-color var(--mov-medio) var(--ease-suave), box-shadow var(--mov-medio) var(--ease-suave) !important;
}
/* ---------- Entrada de pantalla: los bloques suben en cascada (también al cambiar de paso en Unirme) ---------- */
.contenedor > *, .contenedor > form.pila > :not(.mensaje-form) { animation: entrar var(--mov-medio) var(--ease-salida) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.contenedor > :nth-child(2), .contenedor > form.pila > :nth-child(2) { --i: 1; }
.contenedor > :nth-child(3), .contenedor > form.pila > :nth-child(3) { --i: 2; }
.contenedor > :nth-child(4), .contenedor > form.pila > :nth-child(4) { --i: 3; }
.contenedor > :nth-child(5), .contenedor > form.pila > :nth-child(5) { --i: 4; }
.contenedor > :nth-child(n+6), .contenedor > form.pila > :nth-child(n+6) { --i: 5; }
.contenedor > section[id^="paso"] { --i: 0; } /* los pasos de Unirme entran sin demora */
.appbar::after { animation: extender var(--mov-lento) var(--ease-salida) backwards; } /* la línea morada de la barra se extiende */
/* Utilidad para listas: JS le pone la clase y el índice (style="--i:n") solo cuando corresponde animar */
.anim-entra { animation: entrar var(--mov-medio) var(--ease-salida) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
/* ---------- Hover, pulsación y ondas ---------- */
/* Elementos "tocables": posición relativa + recorte para que la onda no se salga */
.btn, .btn-icono, .opcion, .chip, .pestana, .select__opcion, .menu-flotante__item, .grupo-item, .ajuste-fila, .btn-enviar, .emoji, .adjuntar-menu button { position: relative; overflow: hidden; }
.btn-icono.campo__ojo, .buscador__limpiar { position: absolute; }
/* Onda que nace en el punto donde se toca (la crea comun.js); usa el color del texto del propio elemento */
.onda { position: absolute; border-radius: 50%; background: currentColor; opacity: .28; transform: scale(0); pointer-events: none; animation: onda var(--mov-lento) var(--ease-salida) forwards; }
.btn, .btn-icono, .chip, .opcion, .pestana, .grupo-item, .ajuste-fila, .btn-enviar, .miembro, .menu-flotante__item, .emoji {
transition: transform var(--mov-rapido) var(--ease-suave), background-color var(--mov-rapido) var(--ease-suave), border-color var(--mov-rapido) var(--ease-suave), box-shadow var(--mov-rapido) var(--ease-suave), color var(--mov-rapido) var(--ease-suave), filter var(--mov-rapido) var(--ease-suave);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.97); }
.btn--primario:hover:not(:disabled) { box-shadow: var(--sombra-morado-fuerte); }
.btn-icono:hover { transform: scale(1.08); }
.btn-icono:active { transform: scale(.92); }
.chip:hover, .pestana:hover:not(.pestana--activa) { transform: translateY(-1px); }
.chip:active, .opcion:active, .pestana:active, .ajuste-fila:active { transform: scale(.97); }
.grupo-item:hover { transform: translateX(3px); }
.grupo-item:active { transform: scale(.985); }
.btn-enviar:hover { transform: translateY(-1px) scale(1.06); box-shadow: var(--sombra-morado-fuerte); }
.btn-enviar:active { transform: scale(.92); }
.emoji:hover { transform: scale(1.25); }
.emoji:active { transform: scale(.9); }
.miembro { margin: 0 -8px; padding: 10px 8px; border-radius: var(--radio-md); }
.miembro:hover { background: var(--color-morado-suave); }
.menu-flotante__item:hover { padding-left: 18px; }
/* Iconos: cada uno reacciona a su botón */
.material-symbols-rounded { transition: transform var(--mov-medio) var(--ease-rebote); }
.btn:hover .material-symbols-rounded { transform: scale(1.14); }
[aria-label="Ajustes"]:hover .material-symbols-rounded { transform: rotate(60deg); }
[aria-label^="Volver"]:hover .material-symbols-rounded { transform: translateX(-3px); }
.btn-enviar:hover .material-symbols-rounded { transform: translateX(2px) rotate(-10deg); }
[aria-label^="Grabar"]:hover .material-symbols-rounded { transform: scale(1.2); }
.grupo-item:hover > .material-symbols-rounded:last-child, .ajuste-fila:hover > .material-symbols-rounded:last-child { transform: translateX(4px); }
.opcion:hover > .material-symbols-rounded { transform: scale(1.15) rotate(-6deg); }
.campo__ojo:hover .material-symbols-rounded { transform: scale(1.15); }
.adjuntar-menu button:hover .material-symbols-rounded { transform: translateY(-3px) scale(1.06); }
/* Tarjetas HUD: los corchetes de las esquinas se abren al pasar el mouse */
.tarjeta::before, .tarjeta::after, .modal::before, .modal::after { transition: width var(--mov-medio) var(--ease-salida), height var(--mov-medio) var(--ease-salida); }
.tarjeta:hover::before, .tarjeta:hover::after { width: 26px; height: 26px; }
/* Campos: la etiqueta se ilumina al enfocar */
.campo__etiqueta { transition: color var(--mov-rapido) var(--ease-suave); }
.campo:focus-within .campo__etiqueta { color: var(--color-morado-claro); }
.caja-codigo { transition: transform var(--mov-rapido) var(--ease-suave), border-color var(--mov-rapido) var(--ease-suave), box-shadow var(--mov-rapido) var(--ease-suave); }
.caja-codigo:focus { transform: translateY(-2px); }
.caja-codigo:not(:placeholder-shown) { animation: pop var(--mov-rapido) var(--ease-rebote); border-color: var(--color-morado-borde); } /* el dígito escrito "salta" */
/* ---------- Selección (chips, opciones, pestañas, tema) ---------- */
.chip--activo, .opcion--activa, .pestana--activa { animation: seleccion var(--mov-medio) var(--ease-rebote); }
/* ---------- Errores y avisos en línea ---------- */
.efecto-sacudir { animation: sacudir 420ms var(--ease-suave); } /* validación fallida (mensaje y tarjeta) */
.efecto-pop { animation: pop var(--mov-medio) var(--ease-rebote); } /* confirmación correcta */
.aviso:not([hidden]) { animation: entrar var(--mov-medio) var(--ease-salida) backwards; }
/* ---------- Modales, menús, paneles y avisos flotantes ---------- */
.modal-fondo { animation: aparecer var(--mov-rapido) var(--ease-suave) both; }
.modal { animation: modal-entra var(--mov-medio) var(--ease-salida) backwards; }
@media (min-width: 600px) { .modal { animation-name: modal-entra-centro; } }
.modal-fondo--salir { animation: desvanecer var(--mov-rapido) var(--ease-entrada) forwards; } /* comun.js quita el modal al terminar */
.modal-fondo--salir .modal { animation: modal-sale var(--mov-rapido) var(--ease-entrada) forwards; }
.menu-flotante { transform-origin: top right; animation: menu-entra var(--mov-rapido) var(--ease-salida) backwards; }
.emoji-panel:not([hidden]), .grabando:not([hidden]) { animation: panel-sube var(--mov-medio) var(--ease-salida) backwards; }
.adjuntar-menu:not([hidden]) { animation: panel-sube var(--mov-medio) var(--ease-salida) backwards; }
.adjuntar-menu:not([hidden]) button { animation: pop var(--mov-medio) var(--ease-rebote) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.adjuntar-menu button:nth-child(2) { --i: 1; } .adjuntar-menu button:nth-child(3) { --i: 2; } .adjuntar-menu button:nth-child(4) { --i: 3; }
.toast { animation: toast-entra var(--mov-medio) var(--ease-rebote) backwards, toast-sale var(--mov-medio) var(--ease-entrada) 2.8s forwards; }
.bloqueo { animation: aparecer var(--mov-medio) var(--ease-suave) backwards; }
.bloqueo .material-symbols-rounded { animation: pop var(--mov-lento) var(--ease-rebote) 120ms backwards; }
/* ---------- Chat ---------- */
/* Mensajes nuevos: los propios entran desde la derecha y los ajenos desde la izquierda (chat.js pone .nuevo) */
.fila.nuevo.fila--propia { transform-origin: bottom right; animation: entrar-derecha var(--mov-medio) var(--ease-salida) backwards; }
.fila.nuevo.fila--otra { transform-origin: bottom left; animation: entrar-izquierda var(--mov-medio) var(--ease-salida) backwards; }
.sistema.nuevo, .fecha-sep.nuevo { animation: aparecer var(--mov-medio) var(--ease-suave) backwards; }
.fila--transformada .burbuja { animation: destello var(--mov-lento) var(--ease-salida); } /* mensaje recién eliminado */
.medio--imagen { transition: transform var(--mov-medio) var(--ease-salida); }
.medio--imagen:hover { transform: scale(1.03); }
.btn-enviar:not([hidden]) { animation: pop var(--mov-medio) var(--ease-rebote) backwards; } /* alterna enviar / micrófono */
.burbuja__menu { transition: opacity var(--mov-rapido) var(--ease-suave), transform var(--mov-rapido) var(--ease-suave); }
.burbuja__menu:hover { transform: scale(1.12); }
/* Ecualizador mientras se graba una nota de voz */
.onda-grab { display: inline-flex; align-items: center; gap: 3px; height: 24px; }
.onda-grab i { display: block; width: 3px; height: 100%; border-radius: 2px; background: var(--color-morado-claro); animation: ecualizador 900ms ease-in-out infinite; animation-delay: calc(var(--i, 0) * 110ms); }
/* ---------- Cámara y escáner ---------- */
.visor--flash::after { content: ''; position: absolute; inset: 0; background: var(--color-blanco); pointer-events: none; animation: flash var(--mov-lento) ease-out forwards; } /* destello al sacar la foto */
.visor img:not([hidden]) { animation: pop var(--mov-medio) var(--ease-rebote); }
.visor--escaneo .visor__marco::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--color-morado-claro); box-shadow: var(--sombra-morado); animation: escanear 2s ease-in-out infinite alternate; } /* línea que recorre el marco */
.previa--anim > * { animation: entrar var(--mov-medio) var(--ease-salida) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
.previa--anim > :nth-child(2) { --i: 1; } .previa--anim > :nth-child(3) { --i: 2; } .previa--anim > :nth-child(4) { --i: 3; } .previa--anim > :nth-child(n+5) { --i: 4; }
.previa--anim > .avatar { animation-name: pop; animation-timing-function: var(--ease-rebote); }
/* ---------- Tiempo del grupo ---------- */
.progreso__barra { animation: llenar 900ms var(--ease-salida) backwards; } /* la barra se llena al abrir Info */
.reloj.urgencia--error, .tiempo.urgencia--error, .chat__estado.urgencia--error { animation: pulso 1.2s ease-in-out infinite; } /* menos de 5 minutos */
/* Colores de urgencia sobre el reloj y el estado del chat (más específicos que sus colores base) */
.reloj.urgencia--aviso, .chat__estado.urgencia--aviso { color: var(--color-warning-texto); }
.reloj.urgencia--error, .chat__estado.urgencia--error { color: var(--color-error-texto); }
/* ---------- Animaciones reducidas: lo decide tema.js (Ajustes > Animaciones, o el sistema en modo Automático) ---------- */
:root[data-movimiento="reducido"] *, :root[data-movimiento="reducido"] *::before, :root[data-movimiento="reducido"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
:root[data-movimiento="reducido"]::view-transition-group(*), :root[data-movimiento="reducido"]::view-transition-old(*), :root[data-movimiento="reducido"]::view-transition-new(*) { animation: none !important; }
/* ============================================================
ELEMENTOS DEL SISTEMA CON LA ESTÉTICA DE ÉLIX (v4)
Barras de desplazamiento, selección de texto, cursor, autocompletado, listas desplegables,
números, buscadores, reproductores de audio/video y barras de progreso.
============================================================ */
:root { accent-color: var(--color-morado); }
html { -webkit-tap-highlight-color: transparent; }
/* Barras de desplazamiento finas, del color de la app (Firefox/Chrome nuevos: scrollbar-*; Chrome/Safari: ::-webkit-scrollbar) */
* { scrollbar-width: thin; scrollbar-color: var(--color-morado-borde) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-morado-borde); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--color-morado); background-clip: padding-box; }
::-webkit-scrollbar-button { display: none; } /* sin flechas de las barras clásicas */
::selection { background: var(--color-morado-borde); color: var(--color-texto); }
input, textarea { caret-color: var(--color-morado-claro); }
::placeholder { color: var(--color-texto-suave); opacity: .75; }
/* Autocompletado del navegador (fondo amarillo/azul por defecto) con los colores de la app */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill {
-webkit-text-fill-color: var(--color-texto); caret-color: var(--color-morado-claro);
box-shadow: 0 0 0 1000px var(--color-fondo) inset; transition: background-color 9999s ease-out;
}
/* Números sin flechitas del navegador; buscadores sin la "x" nativa (ÉLIX pone la suya) */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button { -webkit-appearance: none; appearance: none; display: none; }
.buscador__limpiar { right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: var(--radio-sm); display: flex; align-items: center; justify-content: center; color: var(--color-texto-suave); }
.buscador__limpiar:hover { color: var(--color-morado-claro); background: var(--color-morado-suave); }
.buscador__limpiar .material-symbols-rounded { position: static; transform: none; font-size: 20px; color: inherit; }
/* ---------- Lista desplegable propia (reemplaza al