/* ============================================================ LingualCoffe — tema café para la red social Sobrescribe el look de Bootstrap/admin con la paleta de la app principal y añade soporte de modo oscuro (clase .dark en ). ============================================================ */ :root { --lc-50: #faf6f1; --lc-100: #f0e6d9; --lc-200: #e2cfb6; --lc-300: #d4b896; --lc-400: #bf9a6f; --lc-500: #a67c52; --lc-600: #886440; --lc-700: #6f4e2e; --lc-800: #54381f; --lc-900: #3d2817; --lc-950: #241710; /* Tokens semánticos (modo claro) */ --lc-bg: var(--lc-50); --lc-surface: #ffffff; --lc-border: var(--lc-100); --lc-text: var(--lc-900); --lc-muted: var(--lc-700); --lc-subtle: var(--lc-500); --lc-accent: var(--lc-700); --lc-accent-text: #ffffff; --lc-sidebar: #ffffff; } html.dark { --lc-bg: var(--lc-950); --lc-surface: var(--lc-900); --lc-border: var(--lc-700); --lc-text: var(--lc-50); --lc-muted: var(--lc-200); --lc-subtle: var(--lc-400); --lc-accent: var(--lc-500); --lc-accent-text: var(--lc-950); --lc-sidebar: var(--lc-900); } /* ---------- Base ---------- */ body { background-color: var(--lc-bg) !important; color: var(--lc-text) !important; transition: background-color 0.2s ease, color 0.2s ease; } a { color: var(--lc-accent); } a:hover { color: var(--lc-500); } /* ---------- Cabecera ---------- */ .app-header { background-color: var(--lc-accent) !important; border-bottom: 1px solid var(--lc-border) !important; } .app-header__logo, .app-nav__item { color: var(--lc-accent-text) !important; } .app-nav__item:hover { background-color: rgba(0, 0, 0, 0.12) !important; } .app-search__input { background-color: rgba(255, 255, 255, 0.15); border: none; border-radius: 999px; color: #fff; padding: 6px 14px; } .app-search__input::placeholder { color: rgba(255, 255, 255, 0.75); } .app-search__button { color: #fff; background: transparent; border: none; } /* ---------- Barra lateral ---------- */ .app-sidebar { background-color: var(--lc-sidebar) !important; border-right: 1px solid var(--lc-border); } .app-sidebar__user { border-bottom: 1px solid var(--lc-border); } .app-sidebar__user-name { color: var(--lc-text) !important; font-weight: 600; } .app-sidebar__user-designation { color: var(--lc-subtle) !important; } .app-sidebar__user-avatar { border-radius: 50%; object-fit: cover; border: 2px solid var(--lc-300); } .app-menu__item { color: var(--lc-muted) !important; border-left-color: transparent !important; } .app-menu__item:hover, .app-menu__item.active { background-color: var(--lc-100) !important; color: var(--lc-900) !important; border-left-color: var(--lc-accent) !important; } html.dark .app-menu__item:hover, html.dark .app-menu__item.active { background-color: var(--lc-800) !important; color: var(--lc-50) !important; } .treeview-item { color: var(--lc-muted) !important; } .treeview-item:hover { color: var(--lc-accent) !important; background-color: transparent !important; } .treeview-menu { background-color: transparent !important; } /* ---------- Contenido / tarjetas ---------- */ .app-content, .app-title { color: var(--lc-text); } .app-title { border-bottom: 1px solid var(--lc-border); } .tile, .card, .panel, .widget-small { background-color: var(--lc-surface) !important; color: var(--lc-text) !important; border: 1px solid var(--lc-border) !important; border-radius: 12px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .tile-title, .card-title { color: var(--lc-text) !important; } /* ---------- Botones ---------- */ .btn-primary, .btn-info, .btn-success { background-color: var(--lc-accent) !important; border-color: var(--lc-accent) !important; color: var(--lc-accent-text) !important; border-radius: 8px !important; font-weight: 600; } .btn-primary:hover, .btn-info:hover, .btn-success:hover { background-color: var(--lc-900) !important; border-color: var(--lc-900) !important; } html.dark .btn-primary:hover, html.dark .btn-info:hover, html.dark .btn-success:hover { background-color: var(--lc-300) !important; border-color: var(--lc-300) !important; } .btn-secondary, .btn-default { background-color: transparent !important; border: 1px solid var(--lc-300) !important; color: var(--lc-muted) !important; border-radius: 8px !important; } html.dark .btn-secondary, html.dark .btn-default { border-color: var(--lc-700) !important; color: var(--lc-100) !important; } /* ---------- Formularios ---------- */ .form-control, input[type='text'], input[type='email'], input[type='password'], textarea, select { background-color: var(--lc-surface) !important; border: 1px solid var(--lc-300) !important; color: var(--lc-text) !important; border-radius: 8px !important; } html.dark .form-control, html.dark input[type='text'], html.dark input[type='email'], html.dark input[type='password'], html.dark textarea, html.dark select { border-color: var(--lc-700) !important; } .form-control:focus { border-color: var(--lc-500) !important; box-shadow: none !important; } /* ---------- Tablas y listas ---------- */ .table { color: var(--lc-text) !important; } .table thead th { border-bottom: 2px solid var(--lc-border) !important; color: var(--lc-muted) !important; } .table td, .table th { border-top: 1px solid var(--lc-border) !important; } .list-group-item { background-color: var(--lc-surface) !important; border-color: var(--lc-border) !important; color: var(--lc-text) !important; } .dropdown-menu { background-color: var(--lc-surface) !important; border: 1px solid var(--lc-border) !important; } .dropdown-item { color: var(--lc-text) !important; } .dropdown-item:hover { background-color: var(--lc-100) !important; } html.dark .dropdown-item:hover { background-color: var(--lc-800) !important; } /* ---------- Barra superior de LingualCoffe ---------- */ .lc-topbar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--lc-surface); border-bottom: 1px solid var(--lc-border); font-size: 14px; } .lc-topbar__back { display: inline-flex; align-items: center; gap: 6px; color: var(--lc-accent) !important; font-weight: 600; text-decoration: none; } .lc-topbar__back:hover { text-decoration: underline; } .lc-topbar__spacer { margin-left: auto; } .lc-theme-toggle { border: 1px solid var(--lc-300); background: transparent; border-radius: 999px; padding: 4px 10px; cursor: pointer; font-size: 16px; line-height: 1; color: var(--lc-text); } html.dark .lc-theme-toggle { border-color: var(--lc-700); } .lc-theme-toggle:hover { background: var(--lc-100); } html.dark .lc-theme-toggle:hover { background: var(--lc-800); } /* ---------- Login / Registro ---------- */ .material-half-bg .cover { background: linear-gradient(135deg, var(--lc-700), var(--lc-900)) !important; } html.dark .material-half-bg .cover { background: linear-gradient(135deg, var(--lc-800), var(--lc-950)) !important; } .login-content .logo h1 { color: #ffffff !important; font-weight: 700; } .login-box { background: var(--lc-surface) !important; border: 1px solid var(--lc-border) !important; border-radius: 14px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .login-head, .login-form label, .login-box a { color: var(--lc-text) !important; } .login-box a { color: var(--lc-accent) !important; } /* Botón "Continuar con Google": sobrescribe el color de enlace de .login-box a y da más altura a la tarjeta para que no se recorte ni se solape. */ .login-content .login-box { min-height: 560px; } .login-content .login-box .btn-google, .login-content .login-box a.btn-google { display: block; margin-top: 12px; background: #db4437 !important; border-color: #c23321 !important; color: #ffffff !important; } .login-content .login-box a.btn-google:hover { background: #c23321 !important; } /* Avatar con iniciales cuando no hay foto */ .lc-avatar-fallback { width: 48px; height: 48px; border-radius: 50%; background: var(--lc-300); color: var(--lc-900); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; } html.dark .lc-avatar-fallback { background: var(--lc-700); color: var(--lc-50); } /* ============================================================ Feed moderno estilo red social (columna única + tarjetas) ============================================================ */ /* Unifica el color del logo de la cabecera (quita el recuadro descoordinado). */ .app-header__logo { background: transparent !important; color: var(--lc-accent-text) !important; } /* El área de contenido de la plantilla admin fija un gris claro; que herede el fondo del tema para que el modo oscuro sea coherente. */ .app-content, body.app { background: var(--lc-bg) !important; } /* Contenedor del feed: una sola columna centrada. */ .lc-feed { max-width: 620px; margin: 0 auto; padding: 8px 0 40px; } .lc-feed__heading { font-size: 1.4rem; font-weight: 700; color: var(--lc-text); margin: 8px 4px 20px; } /* Tarjeta de publicación. */ .lc-post { background: var(--lc-surface); border: 1px solid var(--lc-border); border-radius: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); padding: 16px 18px; margin-bottom: 18px; } .lc-post__head { display: flex; align-items: center; gap: 12px; } .lc-post__avatar img, .lc-post__avatar .lc-avatar-fallback { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; font-size: 18px; } .lc-post__meta { display: flex; flex-direction: column; line-height: 1.2; } .lc-post__author { font-weight: 700; color: var(--lc-text) !important; } .lc-post__author:hover { text-decoration: underline; } .lc-post__date { font-size: 0.78rem; color: var(--lc-subtle); } .lc-post__tools { margin-left: auto; display: flex; gap: 4px; } .lc-icon-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: none; background: transparent; color: var(--lc-subtle); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .lc-icon-btn:hover { background: var(--lc-100); color: var(--lc-accent); } html.dark .lc-icon-btn:hover { background: var(--lc-800); } .lc-post__title { font-size: 1.15rem; font-weight: 700; color: var(--lc-text); margin: 14px 0 4px; } .lc-post__text { color: var(--lc-text); margin: 8px 0 0; white-space: pre-wrap; word-break: break-word; } .lc-post__image { display: block; width: 100%; max-height: 30rem; object-fit: cover; border-radius: 12px; margin-top: 12px; } /* Barra de acciones (Me gusta / Comentar / contador). */ .lc-post__actions { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--lc-border); } .lc-post__actions form { margin: 0; } .lc-action { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: none; background: transparent; color: var(--lc-muted) !important; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .lc-action:hover { background: var(--lc-100); color: var(--lc-accent) !important; text-decoration: none; } html.dark .lc-action:hover { background: var(--lc-800); } .lc-action--active { color: var(--lc-accent) !important; } .lc-action--count { margin-left: auto; cursor: default; color: var(--lc-subtle) !important; } .lc-action--count:hover { background: transparent; } /* Estado vacío. */ .lc-empty { text-align: center; background: var(--lc-surface); border: 1px dashed var(--lc-300); border-radius: 16px; padding: 40px 20px; color: var(--lc-muted); } .lc-empty .btn { margin-top: 14px; } /* Paginación. */ .lc-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 8px; } .lc-page { min-width: 34px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--lc-border); background: var(--lc-surface); color: var(--lc-muted) !important; font-size: 0.85rem; text-align: center; } .lc-page:hover { background: var(--lc-100); text-decoration: none; } .lc-page--active { background: var(--lc-accent); border-color: var(--lc-accent); color: var(--lc-accent-text) !important; } /* ============================================================ Componentes reutilizables del rediseño (todas las páginas) ============================================================ */ /* Contenedor centrado de página. */ .lc-container { max-width: 720px; margin: 0 auto; padding: 8px 0 40px; } /* Encabezado de página (reemplaza .app-title + migas de pan). */ .lc-page-head { margin: 8px 4px 20px; } .lc-page-head h1 { font-size: 1.45rem; font-weight: 700; color: var(--lc-text); margin: 0; } .lc-page-head p { color: var(--lc-subtle); margin: 4px 0 0; } /* Barra de búsqueda. */ .lc-searchbar { display: flex; gap: 8px; margin-bottom: 20px; } .lc-searchbar input { flex: 1; } /* Tarjeta de usuario (listas de usuarios / amigos / peticiones). */ .lc-user { display: flex; align-items: center; gap: 14px; background: var(--lc-surface); border: 1px solid var(--lc-border); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; } .lc-user__avatar img, .lc-user__avatar .lc-avatar-fallback { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; font-size: 20px; } .lc-user__info { flex: 1; min-width: 0; } .lc-user__name { font-weight: 700; color: var(--lc-text) !important; } .lc-user__name:hover { text-decoration: underline; } .lc-user__sub { color: var(--lc-subtle); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lc-user__action { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; } .lc-badge-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--lc-accent); font-weight: 600; font-size: 0.9rem; } /* Botones compactos para acciones de usuario. */ .lc-btn-sm { padding: 7px 14px; border-radius: 8px; font-weight: 600; font-size: 0.88rem; border: 1px solid var(--lc-accent); background: var(--lc-accent); color: var(--lc-accent-text) !important; cursor: pointer; } .lc-btn-sm:hover { filter: brightness(0.92); text-decoration: none; } .lc-btn-sm--outline { background: transparent; color: var(--lc-accent) !important; } .lc-btn-sm--danger { background: transparent; border-color: #c0392b; color: #c0392b !important; } .lc-btn-sm--danger:hover { background: #c0392b; color: #fff !important; } /* Tarjetas de estadística del panel. */ .lc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; } .lc-stat { display: flex; align-items: center; gap: 14px; background: var(--lc-surface); border: 1px solid var(--lc-border); border-radius: 14px; padding: 16px; } .lc-stat__icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; flex-shrink: 0; } .lc-stat__num { font-size: 1.5rem; font-weight: 700; color: var(--lc-text); line-height: 1; } .lc-stat__label { color: var(--lc-subtle); font-size: 0.82rem; } /* Perfil: portada + avatar. */ .lc-profile { margin-bottom: 24px; } .lc-profile__cover { height: 150px; background: linear-gradient(135deg, var(--lc-500), var(--lc-800)); border-radius: 16px 16px 0 0; } .lc-profile__bar { background: var(--lc-surface); border: 1px solid var(--lc-border); border-top: none; border-radius: 0 0 16px 16px; padding: 0 24px 18px; display: flex; align-items: flex-end; gap: 18px; } .lc-profile__avatar img, .lc-profile__avatar .lc-avatar-fallback { width: 112px; height: 112px; border-radius: 50%; border: 4px solid var(--lc-surface); object-fit: cover; margin-top: -56px; font-size: 40px; background: var(--lc-300); } .lc-profile__meta { padding-bottom: 4px; } .lc-profile__name { font-size: 1.4rem; font-weight: 700; color: var(--lc-text); margin: 0; } .lc-profile__sub { color: var(--lc-subtle); margin: 2px 0 0; } /* Comentarios (detalle de post). */ .lc-comment { display: flex; gap: 10px; margin-bottom: 12px; } .lc-comment__avatar .lc-avatar-fallback { width: 38px; height: 38px; border-radius: 50%; font-size: 16px; } .lc-comment__body { background: var(--lc-100); border-radius: 14px; padding: 10px 14px; flex: 1; } html.dark .lc-comment__body { background: var(--lc-800); } .lc-comment__author { font-weight: 700; color: var(--lc-text) !important; font-size: 0.92rem; } .lc-comment__title { font-weight: 600; color: var(--lc-text); } .lc-comment__text { color: var(--lc-text); margin: 2px 0 0; white-space: pre-wrap; } .lc-comment__date { color: var(--lc-subtle); font-size: 0.75rem; } /* Tarjeta de formulario (crear/editar/comentar). */ .lc-form-card { background: var(--lc-surface); border: 1px solid var(--lc-border); border-radius: 16px; padding: 20px 22px; } .lc-form-card h2, .lc-form-card h4 { color: var(--lc-text); margin-top: 0; } .lc-form-card label { display: block; font-weight: 600; color: var(--lc-muted); margin: 12px 0 4px; } /* ---------- Reacciones (👍 ❤️ 😆 😮 😢 😡) ---------- */ .lc-react { position: relative; display: inline-flex; align-items: center; gap: 8px; } .lc-react__trigger { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: none; background: transparent; color: var(--lc-muted); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .lc-react__trigger:hover { background: var(--lc-100); color: var(--lc-accent); } html.dark .lc-react__trigger:hover { background: var(--lc-800); } .lc-react__trigger--active { color: var(--lc-accent); } .lc-react__picker { position: absolute; bottom: calc(100% + 6px); left: 0; display: none; gap: 4px; padding: 6px 8px; background: var(--lc-surface); border: 1px solid var(--lc-border); border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); z-index: 50; } .lc-react--open .lc-react__picker, .lc-react:hover .lc-react__picker { display: flex; } .lc-react__picker button { border: none; background: transparent; font-size: 24px; line-height: 1; padding: 4px; border-radius: 50%; cursor: pointer; transition: transform 0.1s ease; } .lc-react__picker button:hover { transform: scale(1.3); } .lc-react__picker button.is-active { background: var(--lc-100); } html.dark .lc-react__picker button.is-active { background: var(--lc-800); } .lc-react__summary { color: var(--lc-subtle); font-size: 0.85rem; } /* ---------- Menciones @usuario ---------- */ .lc-mention { color: var(--lc-accent) !important; font-weight: 600; text-decoration: none; } .lc-mention:hover { text-decoration: underline; } .lc-mention-wrap { position: relative; } .lc-mention-suggest { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--lc-surface); border: 1px solid var(--lc-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); z-index: 60; overflow: hidden; max-height: 240px; overflow-y: auto; } .lc-mention-suggest button { display: block; width: 100%; text-align: left; border: none; background: transparent; padding: 9px 14px; cursor: pointer; color: var(--lc-text); font-size: 0.9rem; } .lc-mention-suggest button:hover { background: var(--lc-100); } html.dark .lc-mention-suggest button:hover { background: var(--lc-800); } .lc-mention-suggest button span { color: var(--lc-subtle); } /* ---------- Chat / mensajería en tiempo real ---------- */ .lc-chat { display: flex; height: calc(100vh - 170px); min-height: 420px; max-width: 960px; margin: 0 auto; background: var(--lc-surface); border: 1px solid var(--lc-border); border-radius: 16px; overflow: hidden; } .lc-chat__sidebar { width: 280px; flex-shrink: 0; border-right: 1px solid var(--lc-border); display: flex; flex-direction: column; } .lc-chat__sidebar-head { padding: 16px 18px; border-bottom: 1px solid var(--lc-border); } .lc-chat__sidebar-head h2 { font-size: 1.15rem; margin: 0; color: var(--lc-text); } .lc-chat__friends { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; } .lc-chat__friend { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; } .lc-chat__friend:hover, .lc-chat__friend.is-active { background: var(--lc-100); } html.dark .lc-chat__friend:hover, html.dark .lc-chat__friend.is-active { background: var(--lc-800); } .lc-chat__friend-av { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--lc-300); color: var(--lc-900); font-weight: 700; overflow: hidden; } .lc-chat__friend-av img { width: 100%; height: 100%; object-fit: cover; } html.dark .lc-chat__friend-av { background: var(--lc-700); color: var(--lc-50); } .lc-chat__friend-name { flex: 1; min-width: 0; color: var(--lc-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lc-chat__badge { background: #e53935; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; line-height: 18px; text-align: center; } .lc-chat__main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .lc-chat__header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--lc-border); } .lc-chat__peer { font-weight: 700; color: var(--lc-text); } .lc-chat__back { display: none; border: none; background: transparent; font-size: 20px; cursor: pointer; color: var(--lc-text); } .lc-chat__messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; background: var(--lc-bg); } .lc-chat__msg { display: flex; } .lc-chat__msg--out { justify-content: flex-end; } .lc-chat__bubble { max-width: 72%; padding: 9px 13px; border-radius: 14px; background: var(--lc-surface); border: 1px solid var(--lc-border); color: var(--lc-text); word-break: break-word; } .lc-chat__msg--out .lc-chat__bubble { background: var(--lc-accent); border-color: var(--lc-accent); color: var(--lc-accent-text); } .lc-chat__time { display: block; font-size: 0.68rem; opacity: 0.7; margin-top: 3px; text-align: right; } .lc-chat__composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--lc-border); } .lc-chat__composer input { flex: 1; } .lc-chat__hint { color: var(--lc-subtle); padding: 16px; text-align: center; font-size: 0.9rem; } .lc-chat__hint--center { margin: auto; } /* Estado en línea (punto verde sobre el avatar). */ .lc-chat__friend-av { position: relative; } .lc-chat__dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--lc-subtle); border: 2px solid var(--lc-surface); } .lc-chat__dot.is-on { background: #35c759; } /* Imagen dentro de un mensaje. */ .lc-chat__img { display: block; max-width: 220px; max-height: 240px; border-radius: 10px; margin-bottom: 4px; } .lc-chat__txt { display: block; } /* Indicador "escribiendo…". */ .lc-chat__typing { padding: 4px 18px 6px; font-size: 0.8rem; color: var(--lc-subtle); display: flex; align-items: center; gap: 8px; } .lc-chat__typing[hidden] { display: none; } .lc-chat__typing-dots { display: inline-flex; gap: 3px; } .lc-chat__typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--lc-subtle); display: inline-block; animation: lcTyping 1s infinite ease-in-out; } .lc-chat__typing-dots i:nth-child(2) { animation-delay: 0.15s; } .lc-chat__typing-dots i:nth-child(3) { animation-delay: 0.3s; } @keyframes lcTyping { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* Botón de adjuntar imagen y vista previa. */ .lc-chat__attach { display: inline-flex; align-items: center; justify-content: center; width: 40px; flex-shrink: 0; cursor: pointer; color: var(--lc-muted); font-size: 18px; margin: 0; } .lc-chat__attach:hover { color: var(--lc-accent); } .lc-chat__preview { position: relative; padding: 8px 12px 0; display: inline-block; } .lc-chat__preview[hidden] { display: none; } .lc-chat__preview img { max-height: 90px; border-radius: 8px; border: 1px solid var(--lc-border); } .lc-chat__preview button { position: absolute; top: 4px; right: 8px; border: none; background: rgba(0, 0, 0, 0.6); color: #fff; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; line-height: 1; } .lc-chat__preview audio { max-height: 40px; vertical-align: middle; } /* Visto (✓ enviado / ✓✓ leído). */ .lc-chat__check { margin-left: 4px; } .lc-chat__msg--out .lc-chat__check { color: rgba(255, 255, 255, 0.7); } .lc-chat__msg--out .lc-chat__check.is-read { color: #9fd0ff; } /* Audio dentro de un mensaje. */ .lc-chat__audio { display: block; max-width: 220px; height: 40px; margin-bottom: 4px; } /* Buscador dentro de la conversación. */ .lc-chat__search { margin-left: auto; max-width: 240px; width: 42%; border: 1px solid var(--lc-border); border-radius: 999px; padding: 6px 12px; background: var(--lc-bg); color: var(--lc-text); font-size: 0.85rem; } .lc-chat__search[hidden] { display: none; } /* Botón de micrófono (nota de voz). */ .lc-chat__mic { display: inline-flex; align-items: center; justify-content: center; width: 40px; flex-shrink: 0; border: none; background: transparent; color: var(--lc-muted); font-size: 18px; cursor: pointer; } .lc-chat__mic:hover { color: var(--lc-accent); } .lc-chat__mic.is-recording { color: #e53935; animation: lcPulse 1s infinite; } @keyframes lcPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* Barra de grabación de voz. */ .lc-chat__recording { display: flex; align-items: center; gap: 8px; padding: 8px 14px; color: var(--lc-text); font-size: 0.85rem; border-top: 1px solid var(--lc-border); } .lc-chat__recording[hidden] { display: none; } .lc-chat__rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #e53935; animation: lcPulse 1s infinite; } .lc-chat__rec-stop { margin-left: auto; border: 1px solid var(--lc-border); background: var(--lc-surface); color: var(--lc-text); border-radius: 8px; padding: 4px 12px; cursor: pointer; font-weight: 600; } /* Botón "Enviar mensaje" en el perfil de un amigo. */ .lc-profile__actions { margin-left: auto; align-self: center; } /* ---------- Perfil enriquecido: bio, idiomas, portada ---------- */ .lc-profile__extra { background: var(--lc-surface); border: 1px solid var(--lc-border); border-top: none; border-radius: 0 0 16px 16px; margin-top: -1px; padding: 0 24px 18px; } .lc-profile__bio { color: var(--lc-text); margin: 0 0 12px; white-space: pre-wrap; word-break: break-word; } .lc-lang-badges { display: flex; flex-wrap: wrap; gap: 8px; } .lc-lang { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; border: 1px solid var(--lc-border); } .lc-lang--native { background: var(--lc-100); color: var(--lc-900); } html.dark .lc-lang--native { background: var(--lc-800); color: var(--lc-50); } .lc-lang--learning { background: var(--lc-accent); border-color: var(--lc-accent); color: var(--lc-accent-text); } /* Cuando hay bloque extra, la barra del perfil no redondea abajo. */ .lc-profile__extra + * { clear: both; } .lc-profile:has(.lc-profile__extra) .lc-profile__bar { border-radius: 0; } /* Filas de dos columnas en formularios (nombre/apellidos, idiomas, fotos). */ .lc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .lc-form-row > div { min-width: 0; } /* ============================================================ Notificaciones: campana, desplegable y página ============================================================ */ .lc-notif { position: relative; } .lc-notif__bell { position: relative; } .lc-notif__badge { position: absolute; top: 6px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e53935; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--lc-accent); } .lc-notif__menu { position: absolute; top: 100%; right: 0; width: 340px; max-width: 92vw; background: var(--lc-surface); border: 1px solid var(--lc-border); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); z-index: 1200; overflow: hidden; } .lc-notif__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--lc-border); } .lc-notif__head strong { color: var(--lc-text); } .lc-notif__head a { color: var(--lc-accent) !important; font-size: 0.85rem; font-weight: 600; } .lc-notif__list { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow-y: auto; } .lc-notif__loading, .lc-notif__empty { padding: 22px 16px; text-align: center; color: var(--lc-subtle); font-size: 0.9rem; } .lc-notif__item a { display: flex; align-items: flex-start; gap: 10px; padding: 11px 16px; text-decoration: none; border-bottom: 1px solid var(--lc-border); } .lc-notif__item:last-child a { border-bottom: none; } .lc-notif__item a:hover { background: var(--lc-100); } html.dark .lc-notif__item a:hover { background: var(--lc-800); } .lc-notif__item--unread a { background: var(--lc-50); } html.dark .lc-notif__item--unread a { background: rgba(255, 255, 255, 0.05); } .lc-notif__ico { font-size: 18px; line-height: 1.3; flex-shrink: 0; } .lc-notif__body { display: flex; flex-direction: column; min-width: 0; } .lc-notif__msg { color: var(--lc-text); font-size: 0.9rem; } .lc-notif__time { color: var(--lc-subtle); font-size: 0.75rem; margin-top: 2px; } /* Página completa de notificaciones */ .lc-notif-page { background: var(--lc-surface); border: 1px solid var(--lc-border); border-radius: 16px; overflow: hidden; } .lc-notif-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; text-decoration: none; border-bottom: 1px solid var(--lc-border); } .lc-notif-row:last-child { border-bottom: none; } .lc-notif-row:hover { background: var(--lc-100); text-decoration: none; } html.dark .lc-notif-row:hover { background: var(--lc-800); } .lc-notif-row--unread { background: var(--lc-50); } html.dark .lc-notif-row--unread { background: rgba(255, 255, 255, 0.05); } .lc-notif-row__avatar .lc-avatar-fallback { width: 44px; height: 44px; border-radius: 50%; font-size: 18px; } .lc-notif-row__body { display: flex; flex-direction: column; min-width: 0; } .lc-notif-row__msg { color: var(--lc-text); font-weight: 500; } .lc-notif-row__date { color: var(--lc-subtle); font-size: 0.78rem; margin-top: 2px; } /* ---------- Reels (vídeos cortos verticales) ---------- */ .lc-reels { position: relative; max-width: 460px; margin: 0 auto; } .lc-reels__feed { height: calc(100vh - 150px); overflow-y: scroll; scroll-snap-type: y mandatory; border-radius: 16px; background: #000; -webkit-overflow-scrolling: touch; } .lc-reel { position: relative; height: 100%; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; background: #000; } .lc-reel__video { width: 100%; height: 100%; object-fit: contain; background: #000; cursor: pointer; } .lc-reel__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 18px; pointer-events: none; } .lc-reel__info { color: #fff; max-width: 72%; pointer-events: auto; } .lc-reel__author { color: #fff !important; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); } .lc-reel__author:hover { text-decoration: underline; } .lc-reel__desc { color: #fff; margin: 6px 0 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); white-space: pre-wrap; } .lc-reel__actions { display: flex; flex-direction: column; gap: 16px; align-items: center; pointer-events: auto; } .lc-reel__like { background: transparent; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; font-weight: 700; } .lc-reel__heart { font-size: 34px; line-height: 1; } .lc-reel__count { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .lc-reel__mute { font-size: 22px; cursor: pointer; } .lc-reels__fab { position: absolute; right: 16px; bottom: 16px; width: 54px; height: 54px; border-radius: 50%; background: var(--lc-accent); color: var(--lc-accent-text) !important; display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .lc-reels__hint { color: var(--lc-subtle); text-align: center; padding: 48px 20px; } /* ---------- Barra de navegación inferior (solo móvil) ---------- */ .lc-bottomnav { display: none; } /* ============================================================ Responsive / móvil (teléfonos) El rediseño está pensado a columna única, así que en móvil solo hace falta ajustar gutters, compactar y apilar filas de acciones. ============================================================ */ @media (max-width: 640px) { /* Gutters garantizados: el contenido nunca toca el borde de la pantalla. */ .lc-container, .lc-feed { padding-left: 12px; padding-right: 12px; padding-bottom: 80px; /* espacio para la barra inferior */ } /* Barra de navegación inferior fija. */ .lc-bottomnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; background: var(--lc-surface); border-top: 1px solid var(--lc-border); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08); padding-bottom: env(safe-area-inset-bottom, 0); } .lc-bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 7px 2px 6px; font-size: 0.66rem; font-weight: 600; color: var(--lc-subtle) !important; text-decoration: none; } .lc-bottomnav a span { font-size: 20px; line-height: 1; } .lc-bottomnav a.is-active { color: var(--lc-accent) !important; } /* El chat y los reels ocupan el alto disponible sobre la barra inferior. */ .lc-chat { height: calc(100vh - 205px); } .lc-reels__feed { height: calc(100vh - 205px); } /* Titulares un poco más compactos para que no ocupen 2-3 líneas. */ .lc-feed__heading { font-size: 1.2rem; margin-left: 0; margin-right: 0; } .lc-page-head { margin-left: 0; margin-right: 0; } .lc-page-head h1 { font-size: 1.25rem; } /* Publicación: menos padding y acciones que no se parten en dos líneas. */ .lc-post { padding: 14px 14px; } .lc-post__actions { gap: 2px; } .lc-action { padding: 9px 10px; font-size: 0.85rem; white-space: nowrap; } /* Tarjeta de usuario (usuarios / amigos / peticiones): avatar + nombre en la primera fila y los botones a lo ancho debajo, para que el nombre tenga espacio y los botones sean fáciles de tocar. */ .lc-user { flex-wrap: wrap; gap: 12px; } .lc-user__action { margin-left: 0; flex-basis: 100%; width: 100%; } .lc-user__action form { flex: 1; margin: 0; } .lc-user__action > .lc-btn-sm { flex: 1; } .lc-user__action .lc-btn-sm { width: 100%; text-align: center; } /* Objetivos táctiles más grandes (mín. ~44px de alto recomendado). */ .lc-btn-sm { padding: 11px 14px; } /* Perfil: reducir portada, avatar y padding para que el nombre respire. */ .lc-profile__cover { height: 110px; } .lc-profile__bar { padding: 0 16px 16px; gap: 12px; } .lc-profile__avatar img, .lc-profile__avatar .lc-avatar-fallback { width: 88px; height: 88px; margin-top: -44px; font-size: 30px; } .lc-profile__name { font-size: 1.2rem; } /* Tarjetas de formulario y comentario: menos padding lateral. */ .lc-form-card { padding: 16px 16px; } /* Paginación: que quepa y se pueda tocar sin desbordar. */ .lc-pagination { flex-wrap: wrap; } /* Filas de dos columnas: una sola columna en móvil. */ .lc-form-row { grid-template-columns: 1fr; } .lc-profile__extra { padding: 0 16px 16px; } /* Chat: en móvil se ve la lista O la conversación, no ambas. */ .lc-chat__sidebar { width: 100%; } .lc-chat__main { display: none; } .lc-chat--conversando .lc-chat__sidebar { display: none; } .lc-chat--conversando .lc-chat__main { display: flex; } .lc-chat__back { display: inline-block; } }