/* ============================================================
   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) */
/* :not(.tt-pw-toggle) — el ojo de la contraseña también es un <button> dentro de #login */
#login button[type=submit], #register button[type=submit], form#login button:not(.tt-pw-toggle), 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; }

/* ---- Login: ojo para mostrar/ocultar la contraseña ---- */
/* El <input> deja de ser hijo directo de .wow_form_fields, así que el botón se
   ancla a este envoltorio y no al alto total del campo (que incluye el label). */
.tt-pw-field { position: relative; }
/* hueco a la derecha para que el texto no quede por debajo del botón */
.tt-pw-field input { padding-right: 48px !important; }
.tt-pw-toggle {
  position: absolute; top: 50%; right: 7px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; margin: 0;
  border: 0; border-radius: 9px; background: transparent;
  color: var(--tt-muted); cursor: pointer; line-height: 0;
  -webkit-appearance: none; appearance: none;
  transition: color 160ms, background-color 160ms;
}
.tt-pw-toggle:hover { color: var(--tt-navy); background: rgba(11,25,44,.07); }
.tt-pw-toggle:focus { outline: 2px solid var(--tt-gold-2); outline-offset: 2px; }
.tt-pw-toggle:focus:not(:focus-visible) { outline: 0; }
.tt-pw-toggle:focus-visible { outline: 2px solid var(--tt-gold-2); outline-offset: 2px; }
.tt-pw-toggle[disabled] { opacity: .45; cursor: default; }
/* pointer-events: el clic siempre debe llegar al <button>, nunca al <svg> */
.tt-pw-toggle .tt-pw-icon { width: 20px; height: 20px; display: block; pointer-events: none; }
.tt-pw-toggle .tt-pw-icon-hide { display: none; }
.tt-pw-toggle.is-revealed .tt-pw-icon-show { display: none; }
.tt-pw-toggle.is-revealed .tt-pw-icon-hide { display: block; }
@media (max-width: 480px) {
  .tt-pw-toggle { width: 34px; height: 34px; right: 5px; }
  .tt-pw-field input { padding-right: 44px !important; }
}
/* El widget de reCAPTCHA no necesita reglas aquí: welcome.css ya lo reduce
   a scale(.85) para que los 302px del iframe quepan en la columna. */

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

/* El ojo de la contraseña quedaba excluido del repintado navy y heredaba el
   rojo del boton nativo, que no pertenece a la paleta. Va sin fondo, con el
   icono en gris azulado y navy al pasar por encima. */
form#login .tt-pw-toggle,
form#register .tt-pw-toggle,
.login .tt-pw-toggle,
.register .tt-pw-toggle {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #6E7B8C !important;
}
form#login .tt-pw-toggle:hover,
form#register .tt-pw-toggle:hover,
.login .tt-pw-toggle:hover,
.register .tt-pw-toggle:hover { color: #0B192C !important; background: rgba(11,25,44,.06) !important; }
form#login .tt-pw-toggle svg, .login .tt-pw-toggle svg { stroke: currentColor; fill: none; }

/* ============================================================
   Mensajes (/messages) — pantalla nativa de WoWonder
   Son ~2000 lineas de chat en tiempo real que no conviene
   reescribir: se reviste con la paleta apuntando a sus propios
   selectores. Si una actualizacion del script los renombra, esta
   pantalla vuelve a su aspecto original pero sigue funcionando.
   ============================================================ */
.wo_kb_msg_page { background: var(--tt-cream) !important; }
.msg_under_hood {
  background: var(--tt-card) !important;
  border: 1px solid var(--tt-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(11,25,44,.05) !important;
  overflow: hidden;
}

/* Panel izquierdo: buscador y pestañas */
.messages-search-users-form .form-control {
  background: var(--tt-input) !important;
  border: 1px solid var(--tt-border-2) !important;
  border-radius: 9px !important;
}
.wo_msg_tabs { background: transparent !important; border-bottom: 1px solid var(--tt-hair) !important; }
.wo_msg_tabs > li > a { color: var(--tt-muted) !important; font-weight: 600 !important; border: 0 !important; }
.wo_msg_tabs > li.active > a,
.wo_msg_tabs > li > a:hover {
  color: var(--tt-navy) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--tt-gold-2) !important;
}

/* Lista de conversaciones */
.messages-users-list, .messages-chat-list, .messages-group-list { background: transparent !important; }
.messages-recipients-list { border-bottom: 1px solid var(--tt-hair) !important; }
.messages-recipients-list:hover, .messages-recipients-list.active { background: var(--tt-card-2) !important; }
.messages-user-name, .msg_ava_name { color: var(--tt-ink) !important; font-weight: 600 !important; }
.messages-last-sent, .messages-text { color: var(--tt-muted) !important; }

/* Burbujas: las propias en navy, las recibidas en crema */
.message-contnaier, .message-model { background: transparent !important; }
.message-text {
  background: var(--tt-card-2) !important;
  color: var(--tt-ink) !important;
  border: 1px solid var(--tt-hair) !important;
  border-radius: 14px !important;
}
.msg_rght_prt .message-text,
.message.self .message-text,
.message-model.self .message-text {
  background: var(--tt-navy) !important;
  color: var(--tt-light) !important;
  border-color: var(--tt-navy) !important;
}
.msg_rght_prt .message-text a, .message.self .message-text a { color: var(--tt-gold) !important; }
.message-details, .message-seen, .message-typing { color: var(--tt-muted-2) !important; }

/* Barra de escritura y acciones */
.text-sender-container { background: var(--tt-card) !important; border-top: 1px solid var(--tt-hair) !important; }
.msg_usr_info_top_list { background: var(--tt-card) !important; border-bottom: 1px solid var(--tt-hair) !important; color: var(--tt-ink) !important; }
.wo_kb_msg_page .btn.btn-main {
  background: var(--tt-navy) !important;
  border-color: var(--tt-navy) !important;
  color: var(--tt-light) !important;
  border-radius: 9px !important;
}
.wo_kb_msg_page .empty_state, .no-online-users { color: var(--tt-muted) !important; }
.wo_kb_msg_page .feather { stroke: var(--tt-slate); }