/* ============================================================
   TuEdu360 Theme Pro - Línea visual unificada para Web + App
   Inspiración: marketplace inmobiliario/eventos + plataforma educativa.
   Solo modifica presentación. No cambia lógica PHP, consultas ni sesiones.
   ============================================================ */
:root{
  --td360-navy:#0b162c;
  --td360-navy-2:#101f3d;
  --td360-navy-3:#172a4f;
  --td360-blue:#157ed2;
  --td360-blue-2:#2aa4f4;
  --td360-accent:#f2c94c;
  --td360-orange:#f97316;
  --td360-red:#c41230;
  --td360-bg:#f3f6fb;
  --td360-panel:#ffffff;
  --td360-text:#111827;
  --td360-muted:#64748b;
  --td360-soft:#e8eef7;
  --td360-line:rgba(15,23,42,.10);
  --td360-radius:22px;
  --td360-radius-sm:16px;
  --td360-shadow:0 18px 45px rgba(8,19,43,.10);
  --td360-shadow-soft:0 10px 28px rgba(8,19,43,.08);
  --td360-font:'Barlow', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html{scroll-behavior:smooth;}
body{
  font-family:var(--td360-font) !important;
  color:var(--td360-text) !important;
  background:
    radial-gradient(circle at top left, rgba(21,126,210,.10), transparent 30%),
    linear-gradient(180deg,#f7f9fc 0%, var(--td360-bg) 100%) !important;
  letter-spacing:.01em;
}
a{transition:color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;}
img{object-position:center;}
.container{max-width:1240px;}

/* Header premium */
.topbar-yellow{
  background:var(--td360-navy) !important;
  color:rgba(255,255,255,.84) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.header-main,
.main-nav-wrap{
  background:rgba(255,255,255,.94) !important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.site-header{
  box-shadow:0 10px 35px rgba(8,19,43,.08) !important;
  border-bottom:1px solid rgba(15,23,42,.07);
}
.brand-logo{
  background:linear-gradient(135deg,#ffffff,#f9fbff) !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 14px 28px rgba(8,19,43,.12) !important;
}
.brand-text strong{color:var(--td360-navy) !important;letter-spacing:-.035em;}
.brand-text span{color:var(--td360-muted) !important;font-weight:700;}
.header-icon-link{
  color:var(--td360-navy) !important;
  border:1px solid transparent;
}
.header-icon-link:hover{
  background:#f3f6fb !important;
  border-color:var(--td360-line);
}
.header-icon-link.strong,
.nav-cta,
.primary-btn,
button.primary-btn,
.search-submit{
  background:linear-gradient(135deg,var(--td360-navy),#050b17) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 14px 28px rgba(8,19,43,.18) !important;
}
.header-icon-link.strong:hover,
.nav-cta:hover,
.primary-btn:hover,
.search-submit:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 36px rgba(8,19,43,.24) !important;
}
.secondary-btn,
button.secondary-btn{
  background:#fff !important;
  color:var(--td360-navy) !important;
  border:1px solid rgba(15,23,42,.12) !important;
  box-shadow:0 8px 20px rgba(8,19,43,.06) !important;
}
.secondary-btn:hover{border-color:rgba(21,126,210,.35) !important;color:var(--td360-blue) !important;}
.main-menu a{
  color:var(--td360-navy) !important;
  font-weight:800 !important;
  letter-spacing:.01em;
}
.main-menu a:hover,
.main-menu a.active{color:var(--td360-blue) !important;}
.main-menu a.active::after{background:var(--td360-accent) !important;}

/* Buscadores */
.searchbar,
.home-search-hero,
.search-shell,
.schools-filter-panel,
.schools-mobile-filter-panel{
  border:1px solid rgba(15,23,42,.08) !important;
  border-radius:var(--td360-radius) !important;
  box-shadow:var(--td360-shadow-soft) !important;
  background:#fff !important;
}
input,select,textarea,
.form-control,
.searchbar input,
.home-search-hero input,
.home-search-hero select,
.schools-search-input{
  border:1px solid rgba(15,23,42,.10) !important;
  border-radius:14px !important;
  color:var(--td360-text) !important;
  background:#fff !important;
}
input:focus,select:focus,textarea:focus,
.form-control:focus{
  border-color:rgba(21,126,210,.45) !important;
  box-shadow:0 0 0 4px rgba(21,126,210,.10) !important;
}

/* Hero estilo landing premium */
.hero-slider,
.mart-hero,
.home-hero,
.detail-cover,
.detail-hero,
.usuario-hero,
.inst-hero,
.login-side,
.cta-strip,
.offer-banner.primary{
  position:relative;
  overflow:hidden;
  border-radius:30px !important;
  background:linear-gradient(135deg,var(--td360-navy) 0%, #102c55 58%, #0a1325 100%) !important;
  color:#fff !important;
  box-shadow:0 26px 70px rgba(8,19,43,.22) !important;
}
.hero-slider::before,
.usuario-hero::before,
.inst-hero::before,
.login-side::before,
.offer-banner.primary::before,
.cta-strip::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%, rgba(242,201,76,.18), transparent 22%),
    linear-gradient(90deg, rgba(6,12,24,.78), rgba(6,12,24,.38), rgba(6,12,24,.16));
  z-index:0;
}
.hero-content,
.usuario-hero > *,
.inst-hero > *,
.login-side > *,
.offer-banner-content,
.offer-banner-actions,
.cta-strip > *{position:relative;z-index:1;}
.hero-kicker,
.section-eyebrow,
.offer-badge,
.deal-meta-top,
.quick-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  max-width:100%;
  padding:8px 13px !important;
  border-radius:999px !important;
  background:rgba(242,201,76,.14) !important;
  color:var(--td360-accent) !important;
  border:1px solid rgba(242,201,76,.22) !important;
  text-transform:uppercase;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
}
.hero-content h1,
.usuario-hero h2,
.inst-hero h1,
.login-side h1,
.detail-info-panel h1,
.section-topline h2,
.section-title h2{
  letter-spacing:-.055em !important;
  color:inherit;
}
.hero-content p,
.usuario-hero p,
.inst-hero p,
.login-side p{color:rgba(255,255,255,.84) !important;}
.hero-overlay{background:linear-gradient(90deg,rgba(8,19,43,.82),rgba(8,19,43,.43),rgba(8,19,43,.18)) !important;}
.hero-stat-box{
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.hero-arrow,
.carousel-arrow{
  background:#fff !important;
  color:var(--td360-navy) !important;
  box-shadow:var(--td360-shadow-soft) !important;
}

/* Secciones y paneles */
.panel,
.widget,
.login-card,
.usuario-card,
.inst-card,
.module-card,
.schools-card,
.detail-info-panel,
.detail-panel,
.admin-card,
.dashboard-card,
.offer-mini-card,
.marketplace-categories,
.quick-card,
.benefits-bar,
.features-bar,
.contact-card,
.profile-card{
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(15,23,42,.08) !important;
  border-radius:var(--td360-radius) !important;
  box-shadow:var(--td360-shadow-soft) !important;
}
.widget-header,
.section-topline,
.institution-group-head{
  border-bottom-color:rgba(15,23,42,.08) !important;
}
.section-topline h2,
.widget-header h3,
.institution-group-head h3{
  color:var(--td360-navy) !important;
  letter-spacing:-.035em;
}
.small-link,
.institution-group-link{color:var(--td360-blue) !important;font-weight:900 !important;}
.empty-state{
  background:#fff !important;
  border:1px dashed rgba(15,23,42,.18) !important;
  border-radius:18px !important;
  color:var(--td360-muted) !important;
}

/* Cards tipo marketplace */
.school-card,
.promo-card,
.institution-rail-card,
.featured-card,
.deal-card,
.ranked-item,
.marketplace-category-card,
.benefit-item,
.usuario-school-card,
.usuario-program-card,
.usuario-promo-card,
.detail-program-card,
.detail-promo-card,
.school-result-card,
.listing-card{
  background:#fff !important;
  border:1px solid rgba(15,23,42,.08) !important;
  border-radius:22px !important;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(8,19,43,.075) !important;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.school-card:hover,
.promo-card:hover,
.institution-rail-card:hover,
.featured-card:hover,
.deal-card:hover,
.marketplace-category-card:hover,
.benefit-item:hover,
.school-result-card:hover{
  transform:translateY(-4px);
  border-color:rgba(21,126,210,.25) !important;
  box-shadow:0 20px 46px rgba(8,19,43,.14) !important;
}
.school-thumb,
.featured-image-wrap,
.deal-main-image,
.promo-image,
.detail-cover,
.usuario-school-media,
.school-card-image,
.school-result-image{
  background:#dce6f4 !important;
  overflow:hidden;
}
.school-thumb img,
.featured-image-wrap img,
.deal-main-image img,
.promo-image img,
.institution-rail-logo img,
.usuario-school-media img,
.school-card-image img,
.school-result-image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  transition:transform .35s ease;
}
.school-card:hover img,
.featured-card:hover img,
.deal-card:hover img,
.promo-card:hover img,
.school-result-card:hover img{transform:scale(1.04);}
.card-tag,
.verified-badge,
.featured-badge,
.ok,
.badge,
.school-badge,
.detail-badge{
  border-radius:999px !important;
  font-weight:900 !important;
  letter-spacing:.02em;
}
.card-tag,
.verified-badge,
.ok{
  background:rgba(21,126,210,.10) !important;
  color:var(--td360-blue) !important;
}
.featured-badge{background:rgba(242,201,76,.18) !important;color:#9a6b00 !important;}
.home-fav-btn,
.rail-fav,
.favorite-btn{
  background:#fff !important;
  color:var(--td360-red) !important;
  box-shadow:0 10px 24px rgba(8,19,43,.12) !important;
}
.home-fav-btn.active,
.favorite-btn.active{background:var(--td360-red) !important;color:#fff !important;}
.stars span{color:#f5b301 !important;}
.stars .muted{color:#cbd5e1 !important;}

/* Icon cards */
.marketplace-category-icon,
.benefit-icon,
.feature-icon,
.usuario-category-icon,
.usuario-action-icon{
  background:linear-gradient(135deg, rgba(21,126,210,.10), rgba(242,201,76,.22)) !important;
  color:var(--td360-navy) !important;
  border:1px solid rgba(15,23,42,.06);
}
.marketplace-category-card strong,
.benefit-item strong,
.quick-card h3{color:var(--td360-navy) !important;}

/* Perfil / detalle escuela */
.detail-profile-header,
.detail-school-header,
.detail-mobile-profile,
.detail-info-panel{
  border-radius:28px !important;
}
.detail-logo,
.school-logo,
.institution-logo{
  background:#fff !important;
  border:5px solid #fff !important;
  box-shadow:0 16px 38px rgba(8,19,43,.18) !important;
}
.detail-tabs,
.detail-mobile-tabs,
.schools-mobile-chips{
  background:#fff !important;
  border:1px solid rgba(15,23,42,.08) !important;
  border-radius:999px !important;
  box-shadow:0 10px 25px rgba(8,19,43,.07) !important;
}
.detail-tab.active,
.detail-mobile-tab.active,
.schools-chip.active{
  background:var(--td360-navy) !important;
  color:#fff !important;
}

/* Dashboards y tablas */
.usuario-shell,
.inst-shell,
.admin-shell{background:transparent !important;}
.usuario-sidebar,
.inst-sidebar,
.admin-sidebar{
  background:linear-gradient(180deg,var(--td360-navy),#07101f) !important;
  color:#fff !important;
  border-right:1px solid rgba(255,255,255,.08) !important;
}
.usuario-sidebar a,
.inst-sidebar a,
.admin-sidebar a{color:rgba(255,255,255,.78) !important;}
.usuario-sidebar a.active,
.inst-sidebar a.active,
.admin-sidebar a.active,
.usuario-sidebar a:hover,
.inst-sidebar a:hover,
.admin-sidebar a:hover{
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
}
.usuario-topbar,
.inst-topbar,
.admin-topbar{
  background:rgba(255,255,255,.90) !important;
  border:1px solid rgba(15,23,42,.08) !important;
  border-radius:22px !important;
  box-shadow:var(--td360-shadow-soft) !important;
}
table th{background:#f3f7fc !important;color:var(--td360-navy) !important;}
table td, table th{border-color:rgba(15,23,42,.08) !important;}

/* Login / registro */
.login-wrap,
.auth-wrap,
.registro-wrap{
  align-items:stretch;
}
.login-card,
.auth-card,
.register-card{
  border-radius:28px !important;
}
.login-card h2,
.auth-card h2,
.register-card h2{color:var(--td360-navy) !important;letter-spacing:-.035em;}

/* Footer */
.site-footer{
  background:linear-gradient(180deg,var(--td360-navy),#050b17) !important;
  color:rgba(255,255,255,.78) !important;
  border-top:0 !important;
}
.site-footer h3,
.site-footer h4,
.footer-brand strong{color:#fff !important;}
.site-footer a{color:rgba(255,255,255,.78) !important;}
.site-footer a:hover{color:var(--td360-accent) !important;}
.features-bar{
  border-radius:0 !important;
  background:#fff !important;
}

/* Chatbot y app nav consistentes */
.tedu-chatbot-toggle,
.chatbot-fab,
.chatbot-launcher{
  background:linear-gradient(135deg,var(--td360-blue),#0064d8) !important;
  box-shadow:0 18px 34px rgba(21,126,210,.28) !important;
}
.app-bottom-nav{
  background:rgba(255,255,255,.97) !important;
  border-top:1px solid rgba(15,23,42,.09) !important;
}
.app-bottom-nav__item.is-active{
  background:linear-gradient(135deg,rgba(21,126,210,.12),rgba(242,201,76,.20)) !important;
  color:var(--td360-navy) !important;
}

/* Ajuste específico de home para apariencia similar a ejemplos */
.main-layout.mart-layout{gap:24px !important;}
.sidebar .widget{margin-bottom:18px;}
.offer-showcase-clear{gap:18px !important;}
.offer-banner-points span{
  border:1px solid rgba(255,255,255,.22) !important;
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
  border-radius:999px !important;
}
.offer-main-btn{background:#fff !important;color:var(--td360-navy) !important;}
.offer-link-btn{color:#fff !important;border-color:rgba(255,255,255,.3) !important;}

/* Responsive móvil / WebView */
@media (max-width:768px){
  body{
    background:linear-gradient(180deg,#f8fbff 0%,#eef3f8 100%) !important;
  }
  .container{width:calc(100% - 24px) !important;}
  .site-header{border-bottom:0 !important;}
  .header-main{
    padding:8px 0 !important;
    background:var(--td360-accent) !important;
  }
  .main-nav-wrap{
    background:var(--td360-accent) !important;
    border:0 !important;
  }
  .mobile-menu-btn{
    background:var(--td360-navy) !important;
    border-radius:14px !important;
  }
  .main-menu{
    border-radius:18px !important;
    box-shadow:0 18px 42px rgba(8,19,43,.18) !important;
  }
  .hero-slider,
  .mart-hero,
  .home-hero,
  .usuario-hero,
  .inst-hero,
  .login-side,
  .offer-banner.primary{
    border-radius:24px !important;
  }
  .mart-hero{min-height:360px !important;}
  .hero-content{padding:30px 20px !important;}
  .hero-content h1{font-size:34px !important;line-height:1.03 !important;}
  .hero-buttons,
  .offer-banner-actions,
  .deal-actions,
  .school-actions,
  .modal-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .primary-btn,
  .secondary-btn,
  .offer-link-btn{
    min-height:48px !important;
    border-radius:14px !important;
    justify-content:center !important;
    text-align:center !important;
  }
  .panel,
  .widget,
  .home-search-hero,
  .benefits-bar,
  .offer-mini-card,
  .school-card,
  .promo-card,
  .institution-rail-card,
  .featured-card,
  .deal-card,
  .marketplace-category-card,
  .quick-card,
  .login-card,
  .detail-info-panel,
  .detail-panel,
  .schools-card{
    border-radius:20px !important;
  }
  .section-topline{
    gap:8px !important;
  }
  .section-topline h2{font-size:22px !important;line-height:1.1 !important;}
  .sidebar{display:block !important;}
  .main-layout.mart-layout{display:block !important;}
  .sidebar .widget{margin-bottom:16px !important;}
  .featured-image-wrap{height:165px !important;}
  .featured-card{min-height:0 !important;}
  .institution-rail-card{min-width:74vw !important;max-width:74vw !important;}
  .institution-rail-logo{height:118px !important;}
  .school-thumb,.promo-image,.school-card-image,.school-result-image{height:145px !important;}
  .deal-main-image{height:170px !important;}
  .marketplace-category-grid,
  .benefits-grid,
  .quick-categories,
  .offer-mini-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
  }
  .marketplace-category-card,
  .benefit-item{
    min-height:116px !important;
    padding:16px 12px !important;
  }
  .offer-banner.primary{padding:22px 18px !important;}
  .offer-banner.primary h2{font-size:26px !important;line-height:1.08 !important;}
  .offer-banner-points{display:grid !important;grid-template-columns:1fr !important;gap:8px !important;}
  .usuario-topbar,
  .inst-topbar,
  .admin-topbar{
    border-radius:18px !important;
  }
  .detail-tabs,
  .detail-mobile-tabs,
  .schools-mobile-chips{
    border-radius:18px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .detail-tabs::-webkit-scrollbar,
  .detail-mobile-tabs::-webkit-scrollbar,
  .schools-mobile-chips::-webkit-scrollbar{display:none;}
}

@media (max-width:480px){
  .container{width:calc(100% - 20px) !important;}
  .hero-content h1{font-size:31px !important;}
  .institution-rail-card{min-width:78vw !important;max-width:78vw !important;}
  .marketplace-category-grid,
  .benefits-grid,
  .quick-categories,
  .offer-mini-grid{
    grid-template-columns:1fr 1fr !important;
  }
  .school-thumb,.promo-image,.school-card-image,.school-result-image{height:132px !important;}
}