/*
Theme Name: Mexe Noticias
Theme URI: https://www.mexe.mx
Author: Mexe Media
Author URI: https://www.mexe.mx
Description: Theme de noticias para Mexe Media. Portada tipo mosaico, consultas ciudadanas, encuestas de coyuntura, eventos, opinión, reacciones y métricas. Compatible con Elementor mediante el plugin Mexe Elementor Widgets.
Version: 1.3.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mexe
Tags: news, magazine, elementor
*/

/* ═══ Ajustes específicos de WordPress (el diseño base vive en assets/estilos.css) ═══ */

/* Admin bar + nav sticky */
body.admin-bar nav.main{top:32px}
@media (max-width:782px){ body.admin-bar nav.main{top:46px} }

/* Menú principal generado por wp_nav_menu (walker plano) */
.nav-inner a.current-menu-item,
.nav-inner a.current_page_item{color:var(--bone)}

/* Buscador desplegable del nav */
.nav-search-form{display:none;position:absolute;right:0;top:100%;background:var(--deep);padding:12px;border-radius:0 0 0 var(--r);box-shadow:var(--shadow);z-index:70}
.nav-search-form.abierto{display:flex;gap:8px}
.nav-search-form input[type=search]{border:none;border-radius:6px;padding:10px 14px;font-family:var(--sans);font-size:.85rem;min-width:230px}
.nav-search-form button{background:var(--jade);border:none;border-radius:6px;padding:10px 16px;font-family:var(--sans);font-weight:800;cursor:pointer}
nav.main .nav-inner{position:relative}

/* Contenido clásico de WP dentro de la nota */
.art-body img{border-radius:10px;height:auto}
.art-body .wp-caption{max-width:100%}
.art-body .wp-caption-text,.art-body figcaption{font-family:var(--sans);font-size:.72rem;color:var(--gris);padding:8px 2px}
.art-body ul,.art-body ol{margin:0 0 1.1em 1.4em}
.art-body a{color:var(--teal);text-decoration:underline;text-decoration-color:var(--jade)}
.alignleft{float:left;margin:6px 22px 12px 0}
.alignright{float:right;margin:6px 0 12px 22px}
.aligncenter{margin-left:auto;margin-right:auto}

/* Formularios de comentarios / password (por si se usan) */
.post-password-form input{padding:8px}

/* Paginación: la página actual llega como <span> desde paginate_links */
.pager span{min-width:42px;height:42px;padding:0 12px;border-radius:12px;border:1.5px solid #D5DFDC;background:var(--bone);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;color:var(--gris)}
.pager span.on{background:var(--deep);color:var(--bone);border-color:var(--deep)}

/* Aviso de nada encontrado */
.mexe-vacio{font-family:var(--sans);color:var(--gris);padding:30px 0;font-size:.95rem}

/* Página genérica */
.pagina-generica .art-body{margin-top:20px}

/* Chips como enlaces */
.chips a.chip{display:inline-flex;text-decoration:none}

/* ═══ Compatibilidad Elementor ═══
   Los widgets Mexe traen su propio contenedor .wrap; la página Inicio se arma
   con secciones de ancho completo y estas clases controlan caja y ritmo. */
.elementor .mexe-widget{width:100%}
.elementor-widget-container>.mexe-widget .wrap{max-width:var(--maxw)}

/* El padding genérico de <section> del diseño no debe aplicar a las secciones de Elementor */
section.elementor-section{padding:0}

/* Sección encajonada al ancho del sitio (para widgets sin .wrap propio) */
.elementor-section.mexe-boxed>.elementor-container{max-width:var(--maxw);margin:0 auto;width:100%;padding:44px 24px 6px;display:block}
.elementor-section.mexe-boxed.sin-alto>.elementor-container{padding-top:0}

/* Columnas con las proporciones del diseño */
.elementor-section.mexe-cols>.elementor-container{display:flex;gap:44px;align-items:flex-start}
.elementor-section.mexe-cols>.elementor-container>.elementor-column{min-width:0;width:auto;flex:1 1 0}
.elementor-section.mexe-cols-split>.elementor-container>.elementor-column:first-child{flex:1.35 1 0}
@media(max-width:900px){
  .elementor-section.mexe-cols>.elementor-container{flex-direction:column}
  .elementor-section.mexe-cols>.elementor-container>.elementor-column{width:100%;flex:1 1 auto}
}

/* ═══ Consultas: cuadrícula según número de opciones y estado cerrado ═══ */
.cons-grid.n2{grid-template-columns:repeat(2,1fr);max-width:560px}
.cons-grid.n3{grid-template-columns:repeat(3,1fr);max-width:820px}
.cons-grid.n5,.cons-grid.n6{grid-template-columns:repeat(3,1fr)}
@media(max-width:1024px){
  .cons-grid.n3,.cons-grid.n5,.cons-grid.n6{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .cons-grid.n2,.cons-grid.n3,.cons-grid.n5,.cons-grid.n6{grid-template-columns:1fr 1fr;gap:12px}
}
.cons-slide .opt:disabled{cursor:default}
.cons-slide.cerrada .opt:hover{transform:none}
.estado-consulta{display:inline-flex;margin-left:12px;font-family:var(--sans);font-weight:800;font-size:.6rem;letter-spacing:.18em;padding:5px 13px;border-radius:99px;background:var(--jade);color:var(--ink);vertical-align:middle}
.estado-consulta.cerrada{background:rgba(255,255,255,.15);color:#9BC4BD}

/* ═══ Blindaje de imágenes de portada ═══
   Plugins de caché/lazy-load y restos de CSS de themes anteriores suelen forzar
   height:auto en las imágenes; estas reglas garantizan que las portadas
   llenen su espacio con recorte (object-fit) en todos los bloques. */
.tile img,
.pol-lead img,
.op-cover img,
.sb-cover img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:100%!important;object-fit:cover!important}
.card .ph img,
.ev .imgwrap img{width:100%!important;height:100%!important;max-width:100%!important;object-fit:cover!important}
.mini img{width:110px!important;height:100%!important;min-height:92px!important;object-fit:cover!important}
.sb-card .mini img{width:100%!important;min-height:64px!important}
.rank img{width:96px!important;height:70px!important;object-fit:cover!important}
.card .ph,.ev .imgwrap{overflow:hidden}
.opt img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;z-index:0}
.enc-row img{width:52px!important;height:52px!important;object-fit:cover!important}
@media(max-width:740px){ .rank img{display:none!important} }

/* ═══ Iconos de redes sociales (paquete SVG o imagen subida) ═══ */
.socials a svg{width:16px;height:16px;display:block}
.socials a img{width:16px;height:16px;object-fit:contain;display:block}
.socials a span{font-family:var(--sans);font-size:.7rem;font-weight:800}
.share a svg,.share button svg{width:15px;height:15px;display:block}

/* ═══ Detalle de evento ═══ */
.evento-hero{position:relative;overflow:visible;margin-bottom:44px}
.evento-hero img{border-radius:var(--r)}
.evento-hero .fecha-box{position:absolute;left:22px;bottom:-26px;background:var(--deep);color:var(--bone);border-radius:14px;padding:14px 22px;text-align:center;line-height:1;box-shadow:0 10px 26px rgba(10,62,70,.35);z-index:2;border:2px solid var(--jade)}
.evento-hero .fecha-box .d{font-family:var(--serif);font-weight:800;font-size:2.1rem}
.evento-hero .fecha-box .m{font-family:var(--sans);font-weight:800;font-size:.66rem;letter-spacing:.2em;color:var(--jade);margin-top:5px}
.evento-hero .fecha-box .y{font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.12em;color:#9BC4BD;margin-top:3px}
.evento-datos{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center;background:var(--bone);border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;margin-bottom:30px}
.evento-datos .dato{display:flex;gap:12px;align-items:center}
.evento-datos .dato svg{width:26px;height:26px;stroke:var(--teal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.evento-datos .dato b{display:block;font-family:var(--sans);font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.evento-datos .dato span{font-family:var(--sans);font-size:.88rem;font-weight:600;color:var(--ink)}
.evento-datos .acciones{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.evento-datos .acciones .btn-ver:hover{transform:translateY(-2px)}
.evento-datos .acciones .btn-ver.wa{background:var(--deep);color:var(--bone)}
@media(max-width:700px){
  .evento-datos{flex-direction:column;align-items:flex-start;gap:14px}
  .evento-datos .acciones{margin-left:0}
}

/* Dentro del editor de Elementor: sin animaciones de entrada, todo visible */
.elementor-editor-active .tile,
.elementor-editor-active .reveal{opacity:1!important;transform:none!important;animation:none!important}
.elementor-editor-active .sec-head .rule::before{width:100%}
.elementor-editor-active .pct-fill{transition:none}

/* Fallback del formulario WhatsApp */
.sus-form .msg-ok{font-family:var(--sans);font-weight:700;color:var(--jade-soft)}

/* ═══ Anuncios administrados ═══ */
.mexe-anuncio{position:relative;text-align:center}
.mexe-anuncio img{margin:0 auto;border-radius:10px;max-width:100%;height:auto}
.mexe-anuncio .tag{display:block;font-family:var(--sans);font-size:.56rem;font-weight:700;letter-spacing:.22em;color:#8FA8A3;padding-bottom:5px;text-transform:uppercase}
.ad-box.ad-300{aspect-ratio:300/250;max-width:300px;margin:0 auto}

/* ═══ Layout con laterales en páginas individuales ═══ */
.single-layout{display:grid;gap:30px;align-items:start;padding-top:6px}
.single-layout.con-der{grid-template-columns:minmax(0,1fr) 300px}
.single-layout.con-izq{grid-template-columns:280px minmax(0,1fr)}
.single-layout.con-izq.con-der{grid-template-columns:280px minmax(0,1fr) 300px}
.single-main{min-width:0}
.single-main .art{padding-left:0;padding-right:0}
.single-main .wrap{padding-left:0;padding-right:0}
.single-main .ad-slot{padding-left:0;padding-right:0}
.mexe-sb{display:flex;flex-direction:column;gap:20px;position:sticky;top:74px;padding-top:34px}
@media(max-width:1080px){
  .single-layout,.single-layout.con-izq,.single-layout.con-der,.single-layout.con-izq.con-der{grid-template-columns:1fr}
  .mexe-sb{position:static;padding-top:0}
  .sb-izq{order:2}.sb-der{order:3}.single-main{order:1}
}

/* Tarjetas de widgets del lateral */
.sb-card{background:var(--bone);border:1px solid var(--line);border-radius:var(--r);padding:18px;overflow:hidden}
.sb-card .sb-tit{font-family:var(--sans);font-weight:800;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);border-bottom:2px solid var(--jade);padding-bottom:8px;margin-bottom:14px}
.sb-card .mini-list{display:flex;flex-direction:column;gap:12px}
.sb-card .mini{grid-template-columns:84px 1fr}
.sb-card .mini img{height:100%;object-fit:cover;min-height:64px}
.sb-card .mini h4{font-size:.88rem;line-height:1.3}
.sb-card .mini .txt{padding:10px 12px 10px 0}
.sb-card .mini .meta{font-size:.66rem}
.sb-card .ca{padding:20px 18px}
.sb-card .ca h3{font-size:1.02rem;line-height:1.3}
.sb-card .encuesta-band{padding:22px 18px;border-radius:14px;margin-top:0}
.sb-card .enc-grid{display:flex;flex-direction:column;gap:16px}
.sb-card .enc-info h2{font-size:1.1rem;line-height:1.3}
.sb-card .enc-info p{font-size:.8rem}
.sb-card .enc-info .ficha{font-size:.62rem}
.sb-card .enc-row img{width:38px;height:38px}
.sb-card .mexe-anuncio img{width:100%}

/* Tarjetas de portada del lateral (Lo más popular / Lo más reciente) */
.sb-cover-list{display:flex;flex-direction:column;gap:12px}
.sb-cover{position:relative;display:flex;align-items:flex-end;border-radius:12px;overflow:hidden;aspect-ratio:16/10;isolation:isolate}
.sb-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease;z-index:0}
.sb-cover:hover img{transform:scale(1.07)}
.sb-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,10,11,.88) 0%,rgba(4,10,11,.42) 46%,rgba(4,10,11,0) 72%);z-index:1;transition:background .3s}
.sb-cover:hover::after{background:linear-gradient(0deg,rgba(4,10,11,.94) 0%,rgba(4,10,11,.5) 52%,rgba(4,10,11,.06) 78%)}
.sb-cover h4{position:relative;z-index:2;color:var(--bone);font-size:.94rem;line-height:1.32;font-weight:700;padding:12px 14px;margin:0;text-wrap:balance}
.sb-cover:hover h4{text-decoration:underline;text-decoration-color:var(--jade);text-decoration-thickness:2px;text-underline-offset:3px}
.sb-cover .sb-badge{position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;background:rgba(4,10,11,.6);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);color:var(--bone);font-family:var(--sans);font-weight:800;font-size:.74rem;padding:5px 11px;border-radius:99px;border:1px solid rgba(255,255,255,.14)}
.sb-cover .sb-badge .e{font-size:.9rem;line-height:1}