/*
 * Moros y Cristianos — Elavenn custom overrides
 * Reemplaza el azul Facebook (#1877f2) por colores festeros.
 */

:root {
  --mc-rojo:     #C41E3A;
  --mc-rojo-h:   #a01528;
  --mc-verde:    #1a6b2e;
  --mc-dorado:   #c89b3c;
  --mc-noche:    #1a1a2e;
  --mc-radius:   35px;
}

/* ══════════════════════════════════════════════════════════════
   1. OVERRIDE MASIVO DEL AZUL FACEBOOK (#1877f2 → --mc-rojo)
   ══════════════════════════════════════════════════════════════ */

/* Backgrounds */
.round-check input[type="checkbox"]:checked + label:before,
ul.profile-completion-bar li.completion-bar div.completion-bar-status,
.result-bar,
.wo_setting_sidebar ul .list-group-item,
.login button,
.postCategory h5,
.wo_search_page .nav-tabs li.active a,
.mejs-controls .mejs-time-rail .mejs-time-current,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current,
.list-group-item.black-list,
.profile-top-line,
#bar,
.profile-style .user-follow-button button.btn-active,
.btn-login,
.btn-register,
.btn-main,
.btn-mat,
.add_wow_loader {
  background: var(--mc-rojo) !important;
  background-color: var(--mc-rojo) !important;
}

/* Colors */
.group-messages-wrapper a,
.left-sidebar ul li a i,
.cs-loader-inner,
.main,
.active-wonder,
.list-group-item.black-list.active-list a,
.main-color,
.small-text a,
.panel-login > .panel-heading a.active,
.hash,
.active.fa-thumbs-up,
.blog-dd-ul li span:hover,
.blog-dd-ul li a:hover,
.blog_publ,
.events-list-dropup-menu ul li a:hover,
.order_by ul li.active a {
  color: var(--mc-rojo) !important;
}

/* Borders */
.avtive,
.events-tab-list li,
.events-tab-list li:hover,
#search-nearby-users .nearby-users-relationship-collapse li.active .friends_toggle {
  border-color: var(--mc-rojo) !important;
}
#search-nearby-users .nearby-users-relationship-collapse li.active .friends_toggle:after {
  background: var(--mc-rojo) !important;
}

/* Focus states */
.login input:focus,
ul.profile-completion-bar li.completion-bar div.completion-bar-wrapper,
.edit_grp_info_modal input.form-control:not(textarea):focus,
.verfy_sett_email_phone input.form-control:not(textarea):focus {
  border-color: var(--mc-rojo) !important;
}

/* Messages */
.text-sender-container .outgoing .message-model .message {
  background: var(--mc-rojo) !important;
}

/* Shadows */
.post .panel.active_shadow {
  box-shadow: 0 0 0 1.5px var(--mc-rojo) !important;
}

/* Slider handles */
.ui-widget-header .ui-state-default,
.wo_adv_search_filter_side .ui-slider .ui-slider-range,
.wo_adv_search_filter_side .ui-slider .ui-slider-handle {
  background-color: var(--mc-rojo) !important;
}

/* Button hover */
.login:not(.loading) button:hover,
.btn-main:hover,
.btn-mat:hover {
  background: var(--mc-rojo-h) !important;
}

/* ══════════════════════════════════════════════════════════════
   2. LINKS GLOBALES
   ══════════════════════════════════════════════════════════════ */
a { color: var(--mc-rojo); }
a:hover, a:focus { color: var(--mc-rojo-h); text-decoration: none; }

/* ══════════════════════════════════════════════════════════════
   3. HEADER (welcome + logueado)
   ══════════════════════════════════════════════════════════════ */
#welcomeheader,
#header,
nav.navbar.navbar-default.header-color,
.navbar-default {
  background: #fff !important;
  border-bottom: 2px solid #f0f0f0 !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.08) !important;
}
#welcomeheader .mdbtn,
#welcomeheader .mdbtn:hover {
  background: var(--mc-rojo) !important;
  color: #fff !important;
  border-color: var(--mc-rojo) !important;
  border-radius: var(--mc-radius) !important;
}

/* ══════════════════════════════════════════════════════════════
   4. WELCOME PAGE
   ══════════════════════════════════════════════════════════════ */

/* Fondo */
.welcome .area,
.welcome .wrapper,
.area {
  background: linear-gradient(145deg, var(--mc-noche) 0%, #2d0e0e 50%, #0d0d1a 100%) !important;
}

/* Círculos animados */
.area .circles li {
  background: rgba(196, 30, 58, 0.06) !important;
  border: 1px solid rgba(196, 30, 58, 0.12) !important;
}

/* Panel izquierdo */
.login_left_combo { color: #fff !important; }
.login_left_combo h1 {
  color: #fff !important;
  font-size: 2.6em !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5) !important;
  letter-spacing: -0.5px;
  margin-bottom: 4px !important;
}
.login_left_combo p {
  color: rgba(255,255,255,0.85) !important;
  font-size: 1.05em;
  line-height: 1.6;
}

/* Typing cursor */
.typed-cursor {
  color: var(--mc-dorado) !important;
  font-size: 1.1em;
  animation: mc-blink 0.7s infinite;
}
@keyframes mc-blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Panel login (derecho) */
.login .col-md-6 {
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15), 0 12px 40px rgba(0,0,0,0.1) !important;
}
.login form { padding: 24px !important; }

.login .title {
  color: #1c1e21 !important;
  font-size: 1.3em !important;
  font-weight: 700 !important;
  text-align: center;
  margin-bottom: 20px !important;
}

/* Inputs en el login */
.wow_form_fields input,
.wow_form_fields textarea,
.wow_form_fields select {
  border: 2px solid #e4e6eb !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  transition: border-color 0.2s !important;
}
.wow_form_fields input:focus {
  border-color: var(--mc-rojo) !important;
  box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1) !important;
}

/* Botón login */
.login_signup_combo .login__ .btn {
  background: var(--mc-rojo) !important;
  border-radius: var(--mc-radius) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 46px !important;
  letter-spacing: 0.3px;
  box-shadow: 0 3px 12px rgba(196, 30, 58, 0.3) !important;
  transition: all 0.2s !important;
}
.login_signup_combo .login__ .btn:hover {
  background: var(--mc-rojo-h) !important;
  box-shadow: 0 4px 16px rgba(196, 30, 58, 0.4) !important;
}

/* Link "olvidé contraseña" */
.forgot_password a {
  color: var(--mc-rojo) !important;
  font-size: 0.88em;
}

/* Link "regístrate" */
.signup__ a {
  color: var(--mc-rojo) !important;
  font-weight: 700 !important;
}

/* Footer */
.welcome-footer a {
  transition: color 0.2s;
}
.welcome-footer a:hover {
  color: var(--mc-rojo) !important;
}

/* ══════════════════════════════════════════════════════════════
   5. BOTONES GLOBALES
   ══════════════════════════════════════════════════════════════ */
.btn-mat,
.btn-main,
.add_wow_loader {
  border-radius: var(--mc-radius) !important;
}

/* ══════════════════════════════════════════════════════════════
   6. INPUTS FOCUS GLOBAL
   ══════════════════════════════════════════════════════════════ */
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--mc-rojo) !important;
  box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1) !important;
}

/* ══════════════════════════════════════════════════════════════
   7. SCROLL ANIMATIONS (welcome landing)
   ══════════════════════════════════════════════════════════════ */
.mc-anim { opacity: 0; transition: opacity .6s ease, transform .6s ease; }
.mc-anim.mc-visible { opacity: 1; transform: translate(0,0) !important; }
.mc-anim-up { transform: translateY(30px); }
.mc-delay-1 { transition-delay: .1s; }
.mc-delay-2 { transition-delay: .2s; }
.mc-delay-3 { transition-delay: .3s; }

/* ══════════════════════════════════════════════════════════════
   8. SECCION: Como funciona
   ══════════════════════════════════════════════════════════════ */
.mc-howto {
  background: #f8f8fa;
  padding: 60px 20px;
}
.mc-howto-inner {
  max-width: 980px;
  margin: 0 auto;
}
.mc-section-title {
  font-size: 2em;
  font-weight: 800;
  color: var(--mc-noche);
  text-align: center;
  margin-bottom: 8px;
}
.mc-section-sub {
  text-align: center;
  color: #888;
  margin-bottom: 40px;
  font-size: 1em;
}
.mc-howto-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.mc-howto-step {
  text-align: center;
  padding: 32px 24px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 3px 15px rgba(0,0,0,.07);
  transition: transform .2s, box-shadow .2s;
}
.mc-howto-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,.1);
}
.mc-howto-num {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mc-rojo), var(--mc-dorado));
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.mc-howto-step h3 {
  font-size: 1.1em;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}
.mc-howto-step p {
  font-size: .88em;
  color: #777;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════
   9. SECCION: Features
   ══════════════════════════════════════════════════════════════ */
.mc-features {
  background: #fff;
  padding: 60px 20px;
}
.mc-features-inner {
  max-width: 980px;
  margin: 0 auto;
}
.mc-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mc-feature-card {
  background: #fafafa;
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  border-bottom: 3px solid transparent;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.mc-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,.1);
  border-bottom-color: var(--mc-dorado);
}
.mc-feature-icon {
  font-size: 2.5rem;
  margin-bottom: 14px;
}
.mc-feature-card h3 {
  font-size: 1.05em;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}
.mc-feature-card p {
  font-size: .85em;
  color: #777;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════
   10. SECCION: CTA Final
   ══════════════════════════════════════════════════════════════ */
.mc-cta-final {
  background: linear-gradient(145deg, var(--mc-noche) 0%, #2d0e0e 50%, #0d0d1a 100%);
  padding: 60px 20px;
  text-align: center;
}
.mc-cta-final-inner {
  max-width: 600px;
  margin: 0 auto;
}
.mc-cta-final h2 {
  font-size: 2em;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}
.mc-cta-final p {
  color: rgba(255,255,255,.75);
  font-size: 1.05em;
  margin-bottom: 30px;
  line-height: 1.6;
}
.mc-cta-btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--mc-rojo), var(--mc-dorado));
  color: #fff !important;
  padding: 16px 48px;
  border-radius: var(--mc-radius);
  font-size: 1.2em;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(196,30,58,.4);
  transition: transform .2s, box-shadow .2s;
}
.mc-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(196,30,58,.5);
  color: #fff !important;
  text-decoration: none;
}
.mc-cta-note {
  color: rgba(255,255,255,.5);
  font-size: .8em;
  margin-top: 16px;
}

/* ══════════════════════════════════════════════════════════════
   11. RESPONSIVE: Nuevas secciones
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .mc-howto-steps { grid-template-columns: 1fr; }
  .mc-features-grid { grid-template-columns: 1fr; }
  .mc-section-title { font-size: 1.5em; }
  .mc-cta-final h2 { font-size: 1.5em; }
  .mc-cta-btn { padding: 14px 32px; font-size: 1em; }
}