/* =====================================================================
   Mercado Público - Hoja de estilos principal
   Paleta: Amarillo / Morado / Blanco
   Los valores de --color-primario / --color-secundario pueden ser
   sobreescritos desde el panel admin (Configuración) vía variables
   inline en el <head> de cada página.
   ===================================================================== */

:root{
  --color-primario: #FFC107;     /* Amarillo */
  --color-primario-oscuro: #E0A800;
  --color-secundario: #6A1B9A;   /* Morado */
  --color-secundario-oscuro: #4A148C;
  --color-blanco: #FFFFFF;
  --color-texto: #2b2b2b;
  --color-fondo: #FAFAFA;
  --color-borde: #e6e1ea;
  --sombra: 0 4px 16px rgba(74,20,140,.08);
  --radio: 14px;
  --fuente: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: var(--fuente);
  color: var(--color-texto);
  background: var(--color-fondo);
  line-height: 1.55;
}
img{max-width:100%; display:block;}
a{color: var(--color-secundario); text-decoration:none;}
a:hover{text-decoration:underline;}
.contenedor{max-width:1180px; margin:0 auto; padding:0 20px;}
.btn{
  display:inline-block; padding:10px 22px; border-radius:999px;
  background: var(--color-secundario); color:#fff; border:none; cursor:pointer;
  font-weight:600; font-size:.95rem; transition:.2s;
}
.btn:hover{background:var(--color-secundario-oscuro); text-decoration:none;}
.btn-amarillo{background:var(--color-primario); color:#2b2b2b;}
.btn-amarillo:hover{background:var(--color-primario-oscuro);}
.btn-outline{background:transparent; border:2px solid var(--color-secundario); color:var(--color-secundario);}
.btn-sm{padding:6px 14px; font-size:.82rem;}
.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:.75rem; font-weight:600;}
.badge-borrador{background:#eee; color:#555;}
.badge-publicado{background:#e4f6e8; color:#1e7e34;}
.badge-cancelado{background:#fde3e3; color:#c0392b;}
.badge-vencido{background:#fff3cd; color:#8a6d00;}

/* ---------- Header ---------- */
.site-header{background:var(--color-blanco); border-bottom:4px solid var(--color-primario); position:sticky; top:0; z-index:50;}
.site-header .barra{display:flex; align-items:center; justify-content:space-between; padding:14px 20px;}
.logo-wrap{display:flex; align-items:center; gap:12px;}
.logo-slot{
  width:52px; height:52px; border-radius:12px; background:var(--color-secundario);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
}
.logo-slot img{width:100%; height:100%; object-fit:cover;}
.logo-slot span{color:#fff; font-weight:700; font-size:1.3rem;}
.nombre-sitio{font-weight:700; font-size:1.15rem; color: var(--color-secundario);}
.nav-principal{display:flex; gap:22px; align-items:center;}
.nav-principal a{color:var(--color-texto); font-weight:600; font-size:.95rem;}
.nav-principal a:hover{color:var(--color-secundario); text-decoration:none;}

/* ---------- Banner corredizo ---------- */
.banner-carrusel{position:relative; overflow:hidden; background:var(--color-secundario);}
.banner-slides{display:flex; transition: transform .6s ease;}
.banner-slide{min-width:100%; position:relative;}
.banner-slide img{width:100%; height:420px; object-fit:cover;}
.banner-slide .caption{
  position:absolute; left:0; bottom:0; padding:28px 40px; width:100%;
  background:linear-gradient(to top, rgba(0,0,0,.65), transparent);
  color:#fff;
}
.banner-slide .caption h2{margin:0 0 10px; font-size:1.6rem;}
.banner-dots{position:absolute; bottom:14px; left:0; width:100%; display:flex; justify-content:center; gap:8px;}
.banner-dot{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; border:none;}
.banner-dot.activo{background:var(--color-primario);}
.banner-flecha{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.85);
  border:none; width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:1.1rem; color:var(--color-secundario);
}
.banner-flecha.izq{left:14px;} .banner-flecha.der{right:14px;}
.banner-vacio{padding:50px 20px; text-align:center; color:#fff;}

@media (max-width:640px){
  .banner-slide img{height:230px;}
  .banner-slide .caption{padding:16px 20px;}
  .banner-slide .caption h2{font-size:1.1rem;}
}

/* ---------- Indicadores económicos ---------- */
.indicadores{margin-top:-30px; position:relative; z-index:5;}
.indicadores-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:16px;}
.indicador-card{
  background:#fff; border-radius:var(--radio); box-shadow:var(--sombra); padding:18px 20px;
  border-top:4px solid var(--color-primario);
}
.indicador-card .tipo{font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--color-secundario); font-weight:700;}
.indicador-card .nombre{font-size:.95rem; color:#555; margin:4px 0 8px;}
.indicador-card .valor{font-size:1.5rem; font-weight:700; color:var(--color-texto);}
.indicador-card .fecha{font-size:.75rem; color:#999; margin-top:6px;}
.indicador-card .variacion-pos{color:#1e7e34; font-weight:600; font-size:.85rem;}
.indicador-card .variacion-neg{color:#c0392b; font-weight:600; font-size:.85rem;}

/* ---------- Secciones generales ---------- */
.seccion{padding:46px 0;}
.titulo-seccion{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px;}
.titulo-seccion h2{margin:0; font-size:1.6rem; color:var(--color-secundario); border-left:6px solid var(--color-primario); padding-left:12px;}

/* ---------- Noticias / eventos ---------- */
.grid-noticias{display:grid; grid-template-columns:repeat(auto-fit, minmax(270px,1fr)); gap:22px;}
.card-noticia{background:#fff; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); display:flex; flex-direction:column;}
.card-noticia img{height:170px; object-fit:cover; background:#eee;}
.card-noticia .cuerpo{padding:16px 18px; flex:1; display:flex; flex-direction:column;}
.card-noticia .etiqueta{font-size:.72rem; font-weight:700; text-transform:uppercase; color:var(--color-secundario); margin-bottom:6px;}
.card-noticia h3{margin:0 0 8px; font-size:1.05rem;}
.card-noticia p{color:#666; font-size:.9rem; flex:1;}
.card-noticia .fecha{font-size:.78rem; color:#999; margin-top:10px;}

.galeria-noticia{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:10px; margin:18px 0;}
.galeria-noticia img{border-radius:10px; height:160px; object-fit:cover;}

/* ---------- Vendedores ---------- */
.filtros-vendedores{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px;}
.filtros-vendedores a{
  padding:6px 16px; border-radius:999px; background:#fff; border:1px solid var(--color-borde); font-size:.85rem; color:var(--color-texto);
}
.filtros-vendedores a.activo{background:var(--color-secundario); color:#fff; border-color:var(--color-secundario);}
.grid-vendedores{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:20px;}
.card-vendedor{background:#fff; border-radius:var(--radio); box-shadow:var(--sombra); padding:18px; text-align:center;}
.card-vendedor .foto-local{width:100%; height:140px; object-fit:cover; border-radius:10px; margin-bottom:12px; background:#eee;}
.card-vendedor .logo-local{width:56px; height:56px; border-radius:50%; object-fit:cover; margin:-44px auto 10px; border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.15); background:#fff;}
.card-vendedor h3{margin:4px 0 2px; font-size:1.02rem;}
.card-vendedor .categoria{font-size:.78rem; color:var(--color-secundario); font-weight:600;}
.card-vendedor .propietario{font-size:.85rem; color:#777; margin:6px 0 12px;}
.btn-whatsapp{
  background:#25D366; color:#fff; display:inline-flex; align-items:center; gap:6px;
  padding:8px 18px; border-radius:999px; font-weight:600; font-size:.85rem;
}
.btn-whatsapp:hover{background:#1ebe57; text-decoration:none;}

/* ---------- Footer ---------- */
.site-footer{background:var(--color-secundario); color:#fff; padding:40px 0 20px; margin-top:40px;}
.site-footer .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:26px;}
.site-footer h4{color:var(--color-primario); margin:0 0 10px;}
.site-footer a{color:#f1e9f7;}
.site-footer .copy{text-align:center; margin-top:26px; font-size:.8rem; color:#d9c7ea;}

/* ---------- Mensajes ---------- */
.alerta{padding:12px 18px; border-radius:10px; margin-bottom:18px; font-size:.92rem;}
.alerta-exito{background:#e4f6e8; color:#1e7e34;}
.alerta-error{background:#fde3e3; color:#c0392b;}
.alerta-info{background:#eaf2ff; color:#2c5aa0;}

@media (max-width:760px){
  .nav-principal{display:none;}
}