html {
  font-size: 14px;
}
@media (min-width: 768px) { html { font-size: 16px; } }
:root {
  --ec-primary: #5b3df5; --ec-primary-dark: #2d1d78; --ec-secondary: #ff6b6b; --ec-warning: #ffbe0b; --ec-success: #00b894; --ec-text: #1d1b36; --ec-muted: #6c6a80; --ec-border: rgba(91, 61, 245, 0.12);
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(91, 61, 245, 0.35); }
html { position: relative; min-height: 100%; }
body.elcentro-body { min-height: 100vh; margin: 0; color: var(--ec-text); background: radial-gradient(circle at top left, rgba(255, 190, 11, 0.24), transparent 24%), radial-gradient(circle at top right, rgba(255, 107, 107, 0.20), transparent 22%), linear-gradient(180deg, #fffdf8 0%, #fff7f3 55%, #f8f6ff 100%); }
.elcentro-navbar { background: linear-gradient(135deg, rgba(45, 29, 120, 0.96), rgba(91, 61, 245, 0.96)); backdrop-filter: blur(8px); }
.brand-mark { width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.9rem; background: linear-gradient(135deg, var(--ec-warning), #ffd86b); color: var(--ec-primary-dark); font-size: 1.15rem; }
.navbar-brand small { color: rgba(255,255,255,.68); font-size: .73rem; }
.elcentro-accent-btn, .elcentro-soft-btn { color: var(--ec-primary-dark); font-weight: 700; }
.hero-urban, .plan-detail-card, .plan-mini-card, .panel-commerce-card, .stats-strip, .mobile-section, .mobile-image-card, .commerce-card, .recommendation-block { border: 1px solid var(--ec-border); background: rgba(255,255,255,.88); box-shadow: 0 20px 45px rgba(45, 29, 120, 0.08); }
.hero-urban { background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,246,255,.98)), linear-gradient(135deg, rgba(255,190,11,.08), rgba(91,61,245,.08)); }
.eyebrow-pill { border-radius: 999px; padding: .55rem 1rem; background: rgba(91, 61, 245, 0.08); color: var(--ec-primary); font-weight: 700; font-size: .85rem; }
.search-panel .form-control, .search-panel .form-select, .comercio-mobile-form .form-control, .comercio-mobile-form .form-select { border-radius: 1rem; border-color: rgba(91, 61, 245, 0.15); }
.stats-strip strong { display: block; font-size: 1.5rem; }
.stats-strip span { color: var(--ec-muted); }
.commerce-card { border-radius: 1.5rem; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.commerce-card-image { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.commerce-logo { width: 3.75rem; height: 3.75rem; border-radius: 1rem; object-fit: cover; border: 1px solid rgba(91, 61, 245, 0.14); }
.commerce-card-centro { box-shadow: 0 22px 50px rgba(91, 61, 245, 0.18); }
.commerce-card-vidriera { box-shadow: 0 18px 40px rgba(255, 107, 107, 0.15); }
.plan-badge { position: absolute; top: 1rem; left: 1rem; display: inline-flex; align-items: center; padding: .45rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 700; backdrop-filter: blur(4px); }
.plan-badge-centro { background: rgba(255, 190, 11, 0.92); color: #4b3700; }
.plan-badge-vidriera { background: rgba(255, 107, 107, 0.92); color: white; }
.plan-badge-base { background: rgba(255,255,255,0.92); color: var(--ec-primary-dark); }
.plan-mini-card, .plan-detail-card, .panel-commerce-card { padding: 1.25rem; border-radius: 1.5rem; }
.imagen-inapropiada { border: 3px solid red !important; filter: blur(2px); opacity: 0.8; }
#resultadoEvaluacion { margin-top: 15px; transition: all 0.3s ease; }
.comercio-mobile-form { display: grid; gap: 1rem; }
.comercio-mobile-form .mobile-section { border-radius: 1.25rem; padding: 1rem; margin-bottom: 0; }
.comercio-mobile-form h5 { font-size: 1.05rem; margin-bottom: 0; }
.mobile-image-card { border-radius: 1rem; padding: 1rem; }
.comercio-image-preview { width: 100%; max-height: 240px; object-fit: cover; background: #fff; }
.comercio-map { width: 100%; min-height: 50vh; border-radius: 1rem; border: 1px solid #dee2e6; overflow: hidden; }
@media (min-width: 768px) { .comercio-mobile-form { max-width: 860px; margin: 0 auto; } .comercio-mobile-form .mobile-section { padding: 1.25rem; } .comercio-map { min-height: 420px; } }

.admin-body { background: linear-gradient(180deg, #f6f7ff 0%, #fffaf2 100%); }
.admin-sidebar { background: linear-gradient(180deg, rgba(45,29,120,.98), rgba(57,40,151,.98)); }
.admin-nav .nav-link { color: rgba(255,255,255,.85); border-radius: 1rem; padding: .8rem 1rem; }
.admin-nav .nav-link:hover, .admin-nav .nav-link:focus { background: rgba(255,255,255,.1); color: #fff; }
.admin-card, .admin-stat-card, .admin-list-row, .plan-strip { border: 1px solid var(--ec-border); background: rgba(255,255,255,.92); box-shadow: 0 20px 45px rgba(45, 29, 120, 0.08); border-radius: 1.5rem; }
.admin-card { padding: 1.25rem; }
.admin-stat-card { padding: 1.25rem; height: 100%; }
.admin-stat-card span, .plan-strip span { display: block; color: var(--ec-muted); font-size: .9rem; }
.admin-stat-card strong, .plan-strip strong { display: block; font-size: 2rem; margin-top: .35rem; }
.admin-list-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding: .85rem 1rem; }
.plan-strip { padding: 1rem 1.15rem; }
.plan-strip-centro { background: linear-gradient(135deg, rgba(255,190,11,.22), rgba(255,255,255,.96)); }
.plan-strip-vidriera { background: linear-gradient(135deg, rgba(255,107,107,.16), rgba(255,255,255,.96)); }
.plan-strip-base { background: linear-gradient(135deg, rgba(91,61,245,.10), rgba(255,255,255,.96)); }
.admin-table thead th { background: rgba(91,61,245,.06); color: var(--ec-primary-dark); font-size: .86rem; text-transform: uppercase; letter-spacing: .03em; }
.admin-table td, .admin-table th { padding: 1rem; vertical-align: top; }
.admin-alert { border-radius: 1rem; }
.admin-approval-actions { min-width: min(100%, 320px); }
@media (max-width: 991.98px) { .admin-sidebar { position: sticky; top: 0; z-index: 1020; } }

.zone-quick-nav { scrollbar-width: thin; }
.zone-section { scroll-margin-top: 5rem; }
.zone-section-centro .commerce-card-image { aspect-ratio: 16/9; }
.zone-section-centro .commerce-card { border-width: 2px; }
.zone-section-vidriera .commerce-card-image { aspect-ratio: 16/10; }
.zone-section-base .commerce-card-image { aspect-ratio: 4/3; }
.commerce-card-base { box-shadow: 0 14px 30px rgba(91, 61, 245, 0.10); }
.recommendation-block { background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(247,244,255,.98)); }

@media (min-width: 768px) {
  .zone-section-centro .commerce-card-image { aspect-ratio: 21/9; }
  .zone-section-centro .commerce-logo { width: 4.25rem; height: 4.25rem; }
}

.route-panel { border: 1px solid var(--ec-border); background: rgba(255,255,255,.92); box-shadow: 0 20px 45px rgba(45, 29, 120, 0.08); }
.route-stop-item { border: 1px solid rgba(91, 61, 245, 0.12); background: rgba(248, 246, 255, 0.72); }

@media (max-width: 575.98px) {
  .route-stop-item { flex-direction: column; }
  .route-stop-item .btn { width: 100%; }
}

.hero-urban-compact .display-6 { font-size: clamp(1.65rem, 7vw, 2.35rem); }
.hero-urban-compact { padding-block: 1rem !important; }

.zone-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: .9rem;
  overflow-x: auto;
  padding-bottom: .4rem;
  scroll-snap-type: x mandatory;
}
.zone-carousel .zone-item { scroll-snap-align: start; }

.zone-grid {
  display: grid;
  gap: .65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.commerce-card {
  transition: transform .22s ease, box-shadow .22s ease;
}
.commerce-card:hover,
.commerce-card:focus-within {
  transform: translateY(-2px) scale(1.01);
}

.commerce-card-content { padding: .8rem; }
.commerce-card-centro .commerce-card-content { padding: 1rem; }
.commerce-card-centro .commerce-card-image { aspect-ratio: 16 / 9; }
.commerce-card-centro { box-shadow: 0 22px 50px rgba(91, 61, 245, 0.24); }

.zone-section-vidriera .zone-carousel { grid-auto-columns: 74%; }
.commerce-card-vidriera .commerce-card-content { padding: .9rem; }

.commerce-card-base .commerce-card-image {
  aspect-ratio: 4 / 3;
  filter: grayscale(1);
}
.commerce-card-base .commerce-logo { width: 2.9rem; height: 2.9rem; }
.commerce-card-base .commerce-card-content { padding: .7rem; }

@media (min-width: 768px) {
  .hero-urban-compact { padding-block: 1.3rem !important; }
  .zone-carousel { grid-auto-columns: 48%; }
  .zone-section-vidriera .zone-carousel { grid-auto-columns: 38%; }
  .zone-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
}

@media (min-width: 1200px) {
  .zone-carousel { grid-auto-columns: 34%; }
  .zone-section-vidriera .zone-carousel { grid-auto-columns: 28%; }
}

.contextual-suggestion-popup {
  position: fixed;
  left: .75rem;
  right: .75rem;
  bottom: calc(.75rem + env(safe-area-inset-bottom));
  z-index: 1080;
  border-radius: 1rem;
  border: 1px solid var(--ec-border);
  background: rgba(255,255,255,.98);
  box-shadow: 0 16px 42px rgba(45, 29, 120, 0.2);
  padding: .9rem;
  transform: translateY(18px);
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
  max-height: min(72vh, 420px);
  overflow: auto;
}

.contextual-suggestion-popup.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.contextual-suggestion-item {
  border: 1px solid rgba(91, 61, 245, 0.11);
  border-radius: .8rem;
  padding: .55rem .65rem;
  background: rgba(248, 246, 255, 0.65);
}

@media (min-width: 768px) {
  .contextual-suggestion-popup {
    left: auto;
    width: min(390px, calc(100vw - 2rem));
    right: 1rem;
    bottom: 1rem;
    border-radius: 1.2rem;
  }
}

.pizarra-grid {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.pizarra-card,
.pizarra-detail-card {
  border: 1px solid rgba(42, 30, 14, .25);
  border-radius: 1rem;
  padding: 1rem;
  background: linear-gradient(175deg, #233238 0%, #162126 100%);
  color: #f8f5e8;
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
}

.pizarra-detail-card { max-width: 780px; margin: 0 auto; width: 100%; }
.pizarra-card h2,
.pizarra-detail-card h1,
.pizarra-detail-card h2 { color: #fffef2; }
.pizarra-card .text-secondary,
.pizarra-detail-card .text-secondary { color: #d5d6ca !important; }
.pizarra-logo { width: 44px; height: 44px; border-radius: .7rem; object-fit: cover; border: 1px solid rgba(255,255,255,.35); background: #fff; }
.pizarra-precio { display: inline-flex; font-size: 1.35rem; font-weight: 800; color: #0b1220; background: #ffd86b; border-radius: .7rem; padding: .2rem .65rem; }
.pizarra-level-alta { border-color: rgba(255, 216, 107, .65); }
.pizarra-level-media { border-color: rgba(137, 212, 255, .55); }
.pizarra-level-estandar { border-color: rgba(226, 226, 226, .45); }

@media (min-width: 768px) {
  .pizarra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .pizarra-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}