/* ============================================================
   telltotrust — "Azul Medianoche & Crema" global theme skin
   Capa de override sobre el tema nativo de WoWonder 4.3.4.
   Se carga DESPUÉS de style.css (gana la cascada). Solo cambia
   la identidad visual (paleta + tipografía); ninguna estructura.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800&family=Spectral:wght@500;600;700&display=swap');

:root{
  --tt-navy:#0B192C; --tt-navy-2:#1a2d46; --tt-navy-3:#22374f;
  --tt-cream:#EDE7DB; --tt-card:#FBF9F4; --tt-card-2:#F5F0E5;
  --tt-light:#F9F6F0; --tt-input:#FFFDF9;
  --tt-gold:#E6C79C; --tt-gold-2:#C9A24B; --tt-gold-ink:#3a2a05; --tt-gold-deep:#8a6a1e;
  --tt-border:#E4DCCD; --tt-border-2:#E0D8C6; --tt-hair:#EEE7D8;
  --tt-slate:#43556E; --tt-muted:#6E7B8C; --tt-ink:#0B192C;
}

/* ---- Base ---- */
body, html { background: var(--tt-cream) !important; }
body { font-family: 'Public Sans', system-ui, -apple-system, sans-serif !important; color: var(--tt-ink); }
body.is-night, body.is-night * { }  /* respeta night-mode si el usuario lo activa */
a { color: var(--tt-slate); }
a:hover { color: var(--tt-navy); }

/* ---- Top header / navbar → navy ---- */
.header-container,
.navbar-fixed-top,
.header-fixed1000,
.header-fixed1200,
header .navbar-default { background: var(--tt-navy) !important; border: 0 !important; box-shadow: 0 1px 0 #12233c !important; }
.header-container .navbar-nav > li > a,
.header-container a, .header-container .link, .header-container i,
.navbar-default .navbar-nav > li > a { color: #cdd7e4 !important; }
.header-container .navbar-nav > li > a:hover,
.header-container .navbar-nav > li.active > a { color: var(--tt-light) !important; }
.header-container .form-control, .header-container input[type=text],
.header-container .search input { background: var(--tt-light) !important; color: var(--tt-ink) !important; border: 0 !important; border-radius: 9px !important; }
.header-brand, .brand.header-brand { color: var(--tt-light) !important; }

/* ---- Content surfaces → cream cards ---- */
.post-wrapper, .main-box, .box, .panel, .panel-default, .card, .well,
.js-status-poster, .user-box, .list-group, .sidebar .list-group,
.profile-header, .profile-details, .side-bar, .widget, .wo_content,
.comments-list, .settings-menu, .story-item, .group-box, .page-box,
.newsfeed-items > .post, ._post, .post-box, .create-post,
.left-sidebar .list-group-item, .right-sidebar .box {
  background: var(--tt-card) !important;
  border-color: var(--tt-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(11,25,44,.05) !important;
}
.list-group-item { background: transparent !important; border-color: var(--tt-hair) !important; }
.main-container, .container-fluid, #main-content, .wo-main { background: transparent !important; }

/* ---- Buttons: primary/accent red → navy; secondary accents → gold ---- */
.btn-main, .btn-primary, .add-btn, .btn-add, .btn-follow, .btn-danger,
.btn-post, .js-post-submit, button.post, .publish-btn {
  background: var(--tt-navy) !important;
  border-color: var(--tt-navy) !important;
  color: var(--tt-light) !important;
  border-radius: 10px !important;
}
.btn-main:hover, .btn-primary:hover, .add-btn:hover, .btn-danger:hover { background: var(--tt-navy-2) !important; }
.btn-default, .btn-light, .btn-white { background: var(--tt-card) !important; border-color: var(--tt-border-2) !important; color: var(--tt-ink) !important; border-radius: 10px !important; }

/* ---- Accent red text/badges → gold ---- */
.text-danger, .text-red, .badge-danger, .label-danger,
.notification-count, .messages-count, .noti-count, .count-label {
  color: var(--tt-gold-deep) !important;
}
.badge, .label { border-radius: 20px !important; }
.notification-count, .messages-count, .noti-count { background: var(--tt-gold) !important; color: var(--tt-navy) !important; }

/* ---- Inputs ---- */
input[type=text], input[type=search], input[type=email], input[type=password],
input[type=number], textarea, select, .form-control {
  background: var(--tt-input) !important;
  border-color: var(--tt-border-2) !important;
  border-radius: 9px !important;
  color: var(--tt-ink) !important;
}
input:focus, textarea:focus, select:focus, .form-control:focus {
  border-color: var(--tt-navy) !important;
  box-shadow: 0 0 0 3px rgba(11,25,44,.10) !important;
}

/* ---- Headings: Spectral for big titles ---- */
h1, .page-title, .box-title, .section-title { font-family: 'Spectral', serif; color: var(--tt-ink); }

/* ---- Sidebar active/links ---- */
.left-sidebar .list-group-item a, .sidebar a { color: var(--tt-slate) !important; }
.left-sidebar .list-group-item a:hover, .sidebar a:hover { color: var(--tt-navy) !important; }
.left-sidebar .list-group-item svg path { }  /* iconos conservan su fill inline */

/* ---- Links/tabs highlight → gold underline ---- */
.nav-tabs > li.active > a, .tab.active, .active-tab { border-bottom-color: var(--tt-gold-2) !important; color: var(--tt-navy) !important; }

/* ---- Cookie consent bar ---- */
.cc-window, #cookie-bar, .cookie-consent, .cookies-notification { background: var(--tt-navy) !important; }
.cc-window .cc-btn, .cc-btn.cc-dismiss, #cookie-bar .cc_btn, .cookie-consent .btn,
.cookies-notification a.button, [aria-label="dismiss cookie message"] {
  background: var(--tt-gold-2) !important; color: var(--tt-gold-ink) !important; border-color: var(--tt-gold-2) !important; border-radius: 8px !important;
}

/* ---- Usernames / content links (WoWonder blue) → navy ---- */
.user-name a, .user_name a, .name a, .author a, .post-user-name a, .user-link,
.newsfeed-items .user-name, .comment-author, .profile-name, .username, .p_name,
a.user_status, .profile-usernames a, .side-title a { color: var(--tt-navy) !important; }
.follow-btn, .btn-follow, a.follow, .add-friend { color: var(--tt-gold-deep) !important; }

/* ---- Pro / promo cards keep gold ---- */
.pro-members, .go-pro-box, .promo-box { background: linear-gradient(135deg,#C9A24B,#E6C79C) !important; color: var(--tt-gold-ink) !important; }

/* ---- Brand logo: usar el logo telltotrust del feed en TODO el chrome nativo ---- */
.header-brand img, .brand.header-brand img, a.brand img, .navbar-brand img { display: none !important; }
/* PNG con transparencia real: se ve limpio sobre cualquier fondo, sin depender
   de mix-blend-mode (que falla cuando un ancestro aísla el contexto de apilado) */
.header-brand, .brand.header-brand, a.brand.header-brand {
  display: inline-block !important;
  width: 150px !important; height: 30px !important;
  background: url('/themes/wowonder/img/telltotrust-logo-alpha.png') left center / contain no-repeat !important;
}

/* ---- Welcome / Login / Register (guest landing) ---- */
/* panel izquierdo: granate → navy; texto legible */
.login_left_combo_parent { background: linear-gradient(135deg,#0B192C 0%,#22374f 100%) !important; }
.login_left_combo_parent > svg { display: none !important; }
.login_left_combo, .login_left_combo h1, .login_left_combo p,
.register_left_combo, .register_left_combo h1, .register_left_combo p { color: #F9F6F0 !important; }
/* El logo original trae el fondo negro incrustado y se veía como un recuadro
   sobre el navy: se oculta el <img> y se pinta el PNG con alfa como fondo. */
.login_left_combo .logo img, .register_left_combo .logo img { display: none !important; }
.login_left_combo .logo, .register_left_combo .logo {
  display: inline-block !important;
  width: 200px !important; height: 42px !important;
  background: url('/themes/wowonder/img/telltotrust-logo-alpha.png') left center / contain no-repeat !important;
}
/* títulos rojos del formulario (lado derecho) → navy — SIN tocar los h1 del panel izquierdo */
.title.main, .dec.main, .main, #login .title, #register .title { color: #0B192C !important; }
/* botones rojos → navy (login/register/welcome header) */
#login button[type=submit], #register button[type=submit], form#login button, form#register button,
.login .mdbtn, .register .mdbtn, #welcomeheader .mdbtn, .mdbtn.main, .login button.main {
  background: #0B192C !important; border-color: #0B192C !important; color: #F9F6F0 !important; border-radius: 9px !important;
}
#welcomeheader .mdbtn:hover, .login .mdbtn:hover { filter: brightness(1.15); }
/* enlaces (Register / Forgot password) rojos → dorado */
.login a:not(.mdbtn), .register a:not(.mdbtn), .login_signup_combo a, .help-block-welcome a { color: #8a6a1e !important; }
.login input[type=checkbox], .register input[type=checkbox] { accent-color: #0B192C; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar-thumb { background: #D6CCB8 !important; border-radius: 20px; }