/* ============================================================ 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); }