/* ============================================================
   theme-v2.css — Mi Guía Comercial — Diseño Azul 2025
   Basado en el logo azul eléctrico con símbolo de peso
   Sobreescribe variables y estilos del tema verde original
   ============================================================ */

/* ── FUENTE NUEVA ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── VARIABLES GLOBALES ───────────────────────────────────── */
:root {
  --pri:    #0EA5E9;   /* Azul cielo — logo principal */
  --pri2:   #0369A1;   /* Azul profundo — hover, sidebar */
  --pri3:   #E0F2FE;   /* Azul ultra suave — fondos de chips */
  --acc:    #10B981;   /* Verde esmeralda — "Publicar Gratis", éxito */
  --acc2:   #059669;   /* Verde oscuro — hover acento */
  --gold:   #F59E0B;   /* Ámbar — destacados, estrellas */
  --bg:     #F0F9FF;   /* Azul casi blanco — fondo general */
  --card:   #FFFFFF;   /* Blanco puro — tarjetas */
  --text:   #0F172A;   /* Casi negro — textos principales */
  --muted:  #64748B;   /* Gris azulado — subtextos */
  --border: #BAE6FD;   /* Azul claro — bordes */
  --r:      16px;      /* Radio de bordes */
  --shadow: 0 4px 24px rgba(14,165,233,.10);
  --shadow-lg: 0 12px 40px rgba(14,165,233,.18);
  --danger: #EF4444;
  --success:#10B981;
}

/* ── TIPOGRAFÍA ───────────────────────────────────────────── */
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* ═══════════════════════════════════════════════════════════
   INDEX.HTML — DIRECTORIO PÚBLICO
═══════════════════════════════════════════════════════════ */

/* Header */
header {
  background: linear-gradient(135deg, #0369A1 0%, #0EA5E9 100%) !important;
  box-shadow: 0 2px 20px rgba(3,105,161,.35) !important;
}
.logo-text { color: #fff !important; }
.btn-outline {
  border-color: rgba(255,255,255,.5) !important;
  border-radius: 100px !important;
}
.btn-outline:hover { background: rgba(255,255,255,.2) !important; }
.btn-register {
  background: var(--acc) !important;
  border-radius: 100px !important;
  font-weight: 800 !important;
  padding: .48rem 1.2rem !important;
  box-shadow: 0 4px 12px rgba(16,185,129,.35) !important;
}
.btn-register:hover {
  background: var(--acc2) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16,185,129,.4) !important;
}

/* Barra de búsqueda */
.search-bar {
  background: linear-gradient(180deg, #0369A1 0%, #0284C7 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 4px 16px rgba(3,105,161,.3) !important;
}
.sb-group select, .sb-group input {
  border-radius: 10px !important;
  border-color: rgba(255,255,255,.25) !important;
}
.sb-group select:focus, .sb-group input:focus {
  border-color: rgba(255,255,255,.7) !important;
  background: rgba(255,255,255,.22) !important;
}
.sb-group select option { background: #0369A1 !important; }
.btn-buscar {
  background: var(--acc) !important;
  border-radius: 100px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(16,185,129,.3) !important;
}
.btn-buscar:hover { background: var(--acc2) !important; }
.btn-ofertas {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  border-radius: 100px !important;
  border: 1.5px solid rgba(255,255,255,.35) !important;
}
.btn-ofertas:hover, .btn-ofertas.active {
  background: #fff !important;
  color: var(--pri2) !important;
}

/* Barra móvil */
.mob-action-bar {
  background: #fff !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 2px 12px rgba(14,165,233,.10) !important;
}
.mob-search-trigger {
  border-color: var(--border) !important;
  border-radius: 100px !important;
  color: var(--muted) !important;
}
.mob-search-trigger:hover { border-color: var(--pri) !important; }
.mob-search-trigger i:first-child { color: var(--pri) !important; }
.mob-publish-btn {
  background: var(--acc) !important;
  border-radius: 100px !important;
  font-weight: 800 !important;
}
.mob-install-btn { background: var(--pri) !important; border-radius: 100px !important; }

/* Sidebar izquierdo */
.promo-card {
  background: linear-gradient(145deg, #0369A1, #0EA5E9) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-lg) !important;
}
.btn-promo {
  background: var(--acc) !important;
  border-radius: 100px !important;
  font-weight: 800 !important;
}
.btn-promo:hover { background: var(--acc2) !important; }
.metrics-card, .cats-card {
  border-radius: 20px !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}
.metric-label i, .cat-item i { color: var(--pri) !important; }
.metric-val { color: var(--pri) !important; }
.cat-item:hover { background: var(--pri3) !important; color: var(--pri2) !important; }

/* Tarjetas de negocios destacados */
.card-dest {
  border: 2px solid var(--gold) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow) !important;
}
.card-dest:hover { box-shadow: var(--shadow-lg) !important; }
.card-dest-badge { background: var(--gold) !important; color: #fff !important; }
.card-dest-cat { color: var(--pri) !important; }

/* Tarjetas del grid principal */
.card-negocio {
  border-radius: 20px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
}
.card-negocio:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
}
.card-cat { color: var(--pri) !important; letter-spacing: .07em !important; }
.badge-oferta { background: var(--acc) !important; border-radius: 100px !important; }
.badge-ver { background: var(--gold) !important; border-radius: 100px !important; color: #fff !important; }
.card-rating .stars { color: var(--gold) !important; }
.card-rating .score { color: var(--pri2) !important; font-weight: 800 !important; }

/* Botones de acción en tarjetas */
.btn-action { border-radius: 100px !important; }
.btn-tel { background: var(--pri3) !important; color: var(--pri2) !important; }
.btn-tel:hover { background: var(--pri) !important; color: #fff !important; }
.btn-wa { background: #dcfce7 !important; color: #166534 !important; }
.btn-wa:hover { background: #16a34a !important; color: #fff !important; }
.btn-ver { background: var(--bg) !important; border-color: var(--border) !important; }
.btn-ver:hover { background: var(--pri) !important; color: #fff !important; border-color: var(--pri) !important; }

/* Drawer sidebar móvil */
#drawer-overlay { background: rgba(3,105,161,.45) !important; }
.nav-cta {
  background: linear-gradient(135deg, var(--acc), var(--acc2)) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(16,185,129,.3) !important;
}

/* Sección features — fondo oscuro con texto blanco → cambiar a claro con texto oscuro */
.features-section {
  background: linear-gradient(180deg, #EFF6FF 0%, #DBEAFE 100%) !important;
  padding: 2.5rem 1.5rem !important;
}
.features-section .features-title {
  color: var(--text) !important;
  font-weight: 800 !important;
}
.feat-card {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow) !important;
}
.feat-card:hover {
  background: var(--pri3) !important;
  border-color: var(--pri) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-lg) !important;
}
.feat-card h4 { color: var(--text) !important; font-weight: 700 !important; }
.feat-card p  { color: var(--muted) !important; }
.feat-icon {
  background: var(--pri3) !important;
  border-radius: 14px !important;
}
.feat-icon i { color: var(--pri) !important; }

/* Paginación */
.page-btn { border-radius: 100px !important; border-color: var(--border) !important; }
.page-btn.active, .page-btn:hover {
  background: var(--pri) !important;
  color: #fff !important;
  border-color: var(--pri) !important;
}

/* ═══════════════════════════════════════════════════════════
   PANEL.HTML — CLIENTE
═══════════════════════════════════════════════════════════ */

/* Login screen */
#login-screen {
  background: linear-gradient(135deg, #0369A1 0%, #0EA5E9 60%, #06B6D4 100%) !important;
}
.login-card {
  border-radius: 24px !important;
  box-shadow: 0 24px 64px rgba(3,105,161,.35) !important;
}
.login-card h2 { color: var(--pri2) !important; }
.btn-login {
  background: linear-gradient(135deg, var(--pri), var(--pri2)) !important;
  border-radius: 100px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 16px rgba(14,165,233,.35) !important;
}
.btn-login:hover {
  background: linear-gradient(135deg, #0284C7, #075985) !important;
  transform: translateY(-1px);
}

/* App header */
.app-header {
  background: linear-gradient(135deg, #0369A1 0%, #0EA5E9 100%) !important;
  box-shadow: 0 2px 20px rgba(3,105,161,.3) !important;
}
.sb-toggle { border-radius: 12px !important; }
.btn-logout { border-radius: 100px !important; }

/* Sidebar */
.sidebar {
  background: #0F172A !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
}
.nav-item { border-left-width: 3px !important; border-color: transparent !important; }
.nav-item:hover { background: rgba(14,165,233,.15) !important; color: #fff !important; }
.nav-item.active {
  background: rgba(14,165,233,.2) !important;
  color: #fff !important;
  border-left-color: var(--pri) !important;
}
.nav-cta {
  margin: .75rem .6rem !important;
  background: linear-gradient(135deg, var(--acc), #059669) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(16,185,129,.3) !important;
}

/* Stats cards */
.stat-card {
  border-radius: 20px !important;
  border-top-color: var(--pri) !important;
  box-shadow: var(--shadow) !important;
}
.stat-val { color: var(--pri2) !important; font-weight: 800 !important; }

/* Negocio cards en panel */
.neg-card {
  border-radius: 20px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}
.btn-edit { background: var(--pri3) !important; color: var(--pri2) !important; }
.btn-edit:hover { background: var(--pri) !important; color: #fff !important; }

/* Page titles */
.page-title { color: var(--pri2) !important; }

/* CTA dashboard */
[onclick*="servicios"][style*="gradient"] {
  background: linear-gradient(135deg, var(--acc), #059669) !important;
  box-shadow: 0 4px 18px rgba(16,185,129,.3) !important;
}

/* Créditos */
.credits-banner { background: linear-gradient(135deg, var(--pri2), var(--pri)) !important; }
.plan-card {
  border-radius: 20px !important;
  border-color: var(--border) !important;
}
.plan-card.selected {
  border-color: var(--pri) !important;
  background: var(--pri3) !important;
}
.plan-card:hover { border-color: var(--pri) !important; }
.plan-creds { color: var(--pri) !important; }
.btn-pagar {
  background: linear-gradient(135deg, var(--pri), var(--pri2)) !important;
  border-radius: 100px !important;
}

/* Servicios MGC */
.btn-more { border-radius: 100px !important; }

/* Tablas */
table { border-radius: 20px !important; box-shadow: var(--shadow) !important; }
th { color: var(--pri2) !important; }

/* ═══════════════════════════════════════════════════════════
   NEGOCIO.HTML — PERFIL PÚBLICO
═══════════════════════════════════════════════════════════ */

.neg-hero .hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(3,105,161,.2), rgba(3,105,161,.6));
  pointer-events: none;
}
.hero-name { color: var(--text) !important; }
.badge-ver { background: var(--pri) !important; color: #fff !important; border-radius: 100px !important; }
.badge-of  { background: var(--acc) !important; color: #fff !important; border-radius: 100px !important; }

.sec-title { color: var(--pri2) !important; }
.sec-title i { color: var(--pri) !important; }

/* Botones de contacto */
.btn-contact {
  border-radius: 100px !important;
  font-weight: 700 !important;
  transition: all .2s !important;
}
.btn-wa  { background: #dcfce7 !important; color: #166534 !important; border: 1.5px solid #bbf7d0 !important; }
.btn-wa:hover  { background: #16a34a !important; color: #fff !important; }
.btn-tel { background: var(--pri3) !important; color: var(--pri2) !important; border: 1.5px solid var(--border) !important; }
.btn-tel:hover { background: var(--pri) !important; color: #fff !important; }
.btn-mail { background: #ede9fe !important; color: #5b21b6 !important; border: 1.5px solid #ddd6fe !important; }
.btn-mail:hover { background: #7c3aed !important; color: #fff !important; }
.btn-cita  { background: linear-gradient(135deg, var(--pri), var(--pri2)) !important; border: none !important; box-shadow: 0 4px 12px rgba(14,165,233,.35) !important; }
.btn-cita:hover  { box-shadow: 0 6px 20px rgba(14,165,233,.45) !important; transform: translateY(-1px) !important; }
.btn-pedido { background: linear-gradient(135deg, var(--acc), var(--acc2)) !important; border: none !important; box-shadow: 0 4px 12px rgba(16,185,129,.35) !important; }
.btn-pedido:hover { box-shadow: 0 6px 20px rgba(16,185,129,.45) !important; transform: translateY(-1px) !important; }
.btn-maps { background: linear-gradient(135deg, #3B82F6, #1D4ED8) !important; border: none !important; box-shadow: 0 4px 12px rgba(59,130,246,.35) !important; }
.btn-maps:hover { transform: translateY(-1px) !important; }

/* Contact card */
.contact-card {
  border-radius: 24px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Horario */
.horario-row { border-radius: 8px !important; }
.tag-cerrado { background: #fee2e2 !important; color: var(--danger) !important; border-radius: 100px !important; }

/* Galería */
.galeria-grid .gal-thumb { border-radius: 16px !important; }
.btn-ver-galeria { border-radius: 100px !important; color: var(--pri) !important; border-color: var(--border) !important; }
.btn-ver-galeria:hover { background: var(--pri) !important; color: #fff !important; border-color: var(--pri) !important; }

/* Reseñas */
.rating-summary { border-radius: 20px !important; border-color: var(--border) !important; }
.rating-big { color: var(--pri2) !important; }
.resena-card { border-radius: 16px !important; border-color: var(--border) !important; }
.resena-stars { color: var(--gold) !important; }
.resena-autor { color: var(--pri2) !important; }
.form-resena { border-radius: 20px !important; border-color: var(--border) !important; }
.form-resena h4 { color: var(--pri2) !important; }
.star-selector span.sel { color: var(--gold) !important; }
#btn-resena { border-radius: 100px !important; background: linear-gradient(135deg, var(--pri), var(--pri2)) !important; }

/* Modales */
.modal-box {
  border-radius: 24px !important;
  box-shadow: 0 24px 64px rgba(3,105,161,.25) !important;
}
.btn-ok {
  border-radius: 100px !important;
  background: linear-gradient(135deg, var(--pri), var(--pri2)) !important;
  box-shadow: 0 4px 14px rgba(14,165,233,.35) !important;
}
.btn-ok:hover { box-shadow: 0 6px 20px rgba(14,165,233,.45) !important; }
.modal-close { border-radius: 100px !important; }

/* Slots de citas */
.slot-btn { border-radius: 100px !important; }
.slot-btn.sel { background: var(--pri) !important; border-color: var(--pri) !important; }
.slot-btn:hover:not(:disabled) { background: var(--pri) !important; color: #fff !important; border-color: var(--pri) !important; }

/* Oferta box */
.oferta-box {
  background: linear-gradient(135deg, #FEF9C3, #FEF3C7) !important;
  border: 1.5px solid var(--gold) !important;
  border-radius: 20px !important;
}

/* ═══════════════════════════════════════════════════════════
   REGISTRO.HTML — FORMULARIO
═══════════════════════════════════════════════════════════ */

.hero {
  background: linear-gradient(135deg, #0369A1 0%, #0EA5E9 60%, #06B6D4 100%) !important;
}
.hero-badge {
  background: rgba(255,255,255,.18) !important;
  border-radius: 100px !important;
  border-color: rgba(255,255,255,.35) !important;
}

/* Stepper */
.step.active .step-num { background: var(--pri) !important; box-shadow: 0 0 0 4px rgba(14,165,233,.3) !important; }
.step.done  .step-num { background: var(--acc) !important; }
.step-line  { background: var(--border) !important; }
.step.done .step-line { background: var(--acc) !important; }

/* Cards del wizard */
.step-panel {
  border-radius: 24px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}
.section-title { color: var(--pri2) !important; }
.section-title i { color: var(--pri) !important; }

/* Inputs */
input:focus, select:focus, textarea:focus {
  border-color: var(--pri) !important;
  box-shadow: 0 0 0 3px rgba(14,165,233,.15) !important;
  outline: none !important;
}

/* Tipo cliente cards — estilos manejados directamente en registro.html */

/* Botón submit */
#btn-submit {
  border-radius: 100px !important;
  background: linear-gradient(135deg, var(--acc), var(--acc2)) !important;
  box-shadow: 0 4px 18px rgba(16,185,129,.4) !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
}
#btn-submit:hover {
  box-shadow: 0 8px 24px rgba(16,185,129,.5) !important;
  transform: translateY(-2px) !important;
}

/* Botones navegación wizard */
.btn-next, .btn-prev {
  border-radius: 100px !important;
  font-weight: 700 !important;
}
.btn-next { background: var(--pri) !important; box-shadow: 0 4px 12px rgba(14,165,233,.3) !important; }
.btn-next:hover { background: var(--pri2) !important; }
.btn-prev { border-color: var(--border) !important; color: var(--muted) !important; }
.btn-prev:hover { background: var(--pri3) !important; border-color: var(--pri) !important; color: var(--pri) !important; }

/* GPS y mapa */
.gps-btn, .btn-gps {
  border-radius: 100px !important;
  background: var(--pri3) !important;
  color: var(--pri2) !important;
  border-color: var(--border) !important;
}
.gps-btn:hover, .btn-gps:hover { background: var(--pri) !important; color: #fff !important; }

/* Upload zones */
.upload-zone {
  border-color: var(--border) !important;
  border-radius: 20px !important;
}
.upload-zone:hover { border-color: var(--pri) !important; background: var(--pri3) !important; }
.upload-zone i { color: var(--pri) !important; }

/* ═══════════════════════════════════════════════════════════
   ADMIN — DASHBOARD
═══════════════════════════════════════════════════════════ */
.sidebar { background: #0F172A !important; }

/* ═══════════════════════════════════════════════════════════
   GLOBAL — SCROLLBAR PERSONALIZADO
═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--pri); }

/* ═══════════════════════════════════════════════════════════
   ANIMACIONES SUAVES
═══════════════════════════════════════════════════════════ */
.card-negocio, .neg-card, .stat-card, .plan-card,
.card-dest, .feature-card, .svc-item, .resena-card {
  transition: transform .2s ease, box-shadow .2s ease !important;
}

/* Links activos */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--pri) !important;
  outline-offset: 3px !important;
}