/* =========================================================
   TENANTS / DEMO CSS
   - Este archivo se carga desde base.html
   - Estilos por tenant (dominio) sin tocar style.css
   ========================================================= */

/* Navbar logo + badge demo (si se usa en base.html) */
.navbar-logo {
  height: 44px;
  width: auto;
  display: block;
}

.tenant-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* ===== Demo topbar (usada por index_demo.html) ===== */
.demo-topbar {
  position: sticky;
  top: 0;
  z-index: 1050;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(15, 23, 42, 0.65);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.demo-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.demo-topbar__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.demo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  flex: 0 0 auto;
}

.demo-text {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-topbar__right {
  flex: 0 0 auto;
}

.demo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  background: rgba(79, 70, 229, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.demo-link:hover {
  text-decoration: none;
  background: rgba(79, 70, 229, 0.68);
}

@media (max-width: 640px) {
  .demo-text { display: none; }
  .demo-topbar__inner { padding: 10px 12px; }
}


.demo-home { min-height: 100vh; }

.demo-hero{
  position: relative;
  background: url('/static/img/index_demo.jpg') no-repeat center center;
  background-size: cover;
}

/* Overlay elegante para “corporate demo” */
.demo-hero__overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(79,70,229,.22), transparent 55%),
    linear-gradient(180deg, rgba(2,6,23,.65), rgba(2,6,23,.82));
}

.demo-hero__inner{
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 16px 44px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
  align-items: start;
}

.demo-hero__title{
  color:#fff;
  font-weight:900;
  line-height:1.05;
  letter-spacing:-.02em;
  margin:0;
  font-size:clamp(34px,3.6vw,54px);
}
.demo-hero__titleAccent{
  display:block;
  color:rgba(255,255,255,.86);
  font-weight:800;
  margin-top:8px;
}
.demo-hero__subtitle{
  color:rgba(255,255,255,.82);
  margin-top:14px;
  font-size:16px;
  line-height:1.55;
  max-width:62ch;
}

.demo-hero__bullets{
  margin:16px 0 0;
  padding-left:18px;
  color:rgba(255,255,255,.82);
}
.demo-hero__bullets li{ margin:8px 0; }

.demo-hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.demo-hero__cta--center{ justify-content:center; }

.demo-hero__note{
  margin-top:14px;
  color:rgba(255,255,255,.72);
  font-size:13px;
}

.demo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  border:1px solid rgba(255,255,255,.18);
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.demo-btn:hover{ transform: translateY(-1px); text-decoration:none; }

.demo-btn--primary{ color:#fff; background: rgba(79,70,229,.75); }
.demo-btn--primary:hover{ background: rgba(79,70,229,.88); }
.demo-btn--ghost{ color:#fff; background: rgba(255,255,255,.08); }
.demo-btn--ghost:hover{ background: rgba(255,255,255,.12); }

.demo-panel{
  background: rgba(2,6,23,.55);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.demo-panel__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
}
.demo-panel__title{ margin-top:12px; color:#fff; font-weight:900; font-size:18px; }
.demo-panel__subtitle{ margin-top:4px; color:rgba(255,255,255,.76); font-size:13px; }

.demo-panel__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.demo-metric{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding:10px;
}
.demo-metric__kpi{ color:#fff; font-weight:900; }
.demo-metric__desc{ color:rgba(255,255,255,.74); font-size:12px; margin-top:4px; }

.demo-panel__footer{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.demo-panel__pill{
  color:rgba(255,255,255,.86);
  font-size:12px;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.demo-main{
  padding: 34px 0 64px;
  background: #0b1220;
}
.demo-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}
.demo-section__title{ color:#fff; font-weight:900; margin:0; font-size:26px; }
.demo-section__subtitle{ color:rgba(255,255,255,.72); margin-top:8px; margin-bottom:18px; }

.demo-cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.demo-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding:16px;
}
.demo-card__title{ color:#fff; font-weight:900; margin:0; font-size:18px; }
.demo-card__text{ color:rgba(255,255,255,.76); margin-top:10px; line-height:1.55; }
.demo-card__list{ margin:12px 0 0; padding-left:18px; color:rgba(255,255,255,.76); }
.demo-card__list li{ margin:6px 0; }

.demo-strip{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px;
  border-radius:18px;
  background: rgba(79,70,229,.14);
  border: 1px solid rgba(255,255,255,.10);
}
.demo-strip__title{ color:#fff; font-weight:900; margin:0; font-size:18px; }
.demo-strip__text{ color:rgba(255,255,255,.76); margin:6px 0 0; }
.demo-strip__actions{ display:flex; flex-wrap:wrap; gap:10px; }

.demo-contact{ margin-top:28px; padding-top:10px; }
.demo-contact__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top:16px;
  margin-bottom:16px;
}
.demo-contact__item{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding:14px;
}
.demo-contact__label{
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.demo-contact__value{ color:#fff; font-weight:900; margin-top:6px; }

@media (max-width: 980px){
  .demo-hero__inner{ grid-template-columns: 1fr; padding-top:44px; }
  .demo-panel__grid{ grid-template-columns: 1fr; }
  .demo-cards{ grid-template-columns: 1fr; }
  .demo-strip{ flex-direction: column; align-items: flex-start; }
  .demo-contact__grid{ grid-template-columns: 1fr; }
}