/*
Theme Name: Gasex 3.1
Theme URI: https://gasex.cl
Author: Efren Muñoz
Author URI: https://efrenmunoz.cl
Description: Tema personalizado Gasex (Mobile First + UX Retail + Footer).
Version: 1.0.1 (Mejoras UX/UI)
Text Domain: gasex
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* =========================================
   1. VARIABLES & RESET (Originales + Mejoras)
   ========================================= */
   :root {
    /* --- COLORES ORIGINALES (INTACTOS) --- */
    --gx-primary: var(--wp--preset--color--primary, #003966);
    --gx-text:    var(--wp--preset--color--foreground, #1f1f1f);
    --gx-muted:   #6b7280;
    --gx-bg:      #ffffff;
    --gx-card:    #ffffff;
    --gx-border:  #e5e7eb;
  
    /* --- NUEVAS VARIABLES UI (Sin romper lo anterior) --- */
    --gx-shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --gx-shadow-md: 0 6px 12px rgba(0,0,0,0.08);
    --gx-radius-md: 12px;
    --gx-radius-lg: 18px;
    --gx-font-heading: 'Montserrat', sans-serif; /* Definimos para consistencia */
  }
  
  /* Reset de seguridad para maquetación */
  *, *::before, *::after {
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    margin: 0;
    font-family: 'Roboto', system-ui, sans-serif; /* Fuente base limpia */
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--adminbar, 0px));
    min-height: calc(100dvh - var(--adminbar, 0px));
  }
  
  /* —— Blog Gasex (Estructura Base) —— */
  .gx-wrap {
    width: min(1200px, 92%);
    margin: 0 auto;
  }
  
  .gx-blog {
    background: var(--gx-bg);
    color: var(--gx-text);
  }


  .gx-section{
    padding: 50px 0;
  }
  
  
  /* =========================================
     2. HERO SECTION (Mejorada)
     ========================================= */
  .gx-hero {
    padding: 40px 0 30px; /* Un poco más de aire */
    border-bottom: 1px solid var(--gx-border);
  }
  
  .gx-hero--withbg {
    background-image: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.4)), var(--gx-hero);
    background-size: cover;
    background-position: center;
    color: #fff;
  }
  
  .gx-hero__title {
    font-family: var(--gx-font-heading);
    font-size: clamp(28px, 3.5vw, 44px); /* Clamp ajustado */
    line-height: 1.1;
    margin: 0 0 16px;
    font-weight: 800;
  }
  
  .gx-hero__desc {
    opacity: .95;
    max-width: 70ch;
    font-size: 1.05rem; /* Un poco más legible */
  }
  
  /* Buscador Estilo App */
  .gx-hero__search {
    display: flex;
    gap: 10px;
    margin-top: 20px;
  }
  
  .gx-hero__search input[type="search"] {
    flex: 1 1 auto;
    padding: 14px 20px; /* Más área táctil */
    border: 1px solid var(--gx-border);
    border-radius: 50px; /* Pill shape moderno */
    font-size: 1rem;
    box-shadow: var(--gx-shadow-sm);
    transition: box-shadow 0.2s, border-color 0.2s;
    outline: none;
  }
  
  .gx-hero__search input[type="search"]:focus {
    border-color: var(--gx-primary);
    box-shadow: 0 0 0 3px rgba(0, 57, 102, 0.1);
  }
  
  .gx-hero__search button {
    padding: 12px 24px;
    border-radius: 50px;
    background: var(--gx-primary);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-weight: 600;
    transition: transform 0.2s, background 0.2s;
  }
  
  .gx-hero__search button:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
  }
  
  .gx-hero__filters { margin-top: 16px; }
  .gx-hero__filters .gx-select {
    padding: 10px 16px;
    border-radius: 50px; /* Coherencia visual */
    border: 1px solid var(--gx-border);
    background: #fff;
    cursor: pointer;
  }
  
  
  /* =========================================
     3. GRID & CARDS (UX Retail)
     ========================================= */
  .gx-grid {
    display: grid;
    gap: 24px;
    padding: 40px 0;
  }
  @media (min-width: 640px) { .gx-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .gx-grid { grid-template-columns: repeat(3, 1fr); } }
  
  /* Tarjeta mejorada con interacción */
  .gx-card {
    background: var(--gx-card);
    border: 1px solid var(--gx-border);
    border-radius: var(--gx-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* UX Improvements */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: var(--gx-shadow-sm);
  }
  
  /* Efecto Levitación al pasar mouse (Estilo Falabella) */
  .gx-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--gx-shadow-md);
    border-color: rgba(0,0,0,0.1);
  }
  
  .gx-card__media {
    display: block;
    position: relative;
    aspect-ratio: 16/9;
    background: #f5f5f7;
    overflow: hidden;
  }
  
  .gx-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
  }
  
  /* Zoom suave en imagen */
  .gx-card:hover .gx-card__media img {
    transform: scale(1.05);
  }
  
  .gx-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  }
  
  .gx-card__body {
    padding: 20px; /* Más espacio interno */
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
  }
  
  .gx-card__meta {
    font-size: 0.8rem;
    color: var(--gx-muted);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
  }
  
  .gx-card__cats a {
    color: var(--gx-primary);
    text-decoration: none;
  }
  
  .gx-card__title {
    font-family: var(--gx-font-heading);
    font-size: clamp(18px, 1.2vw, 22px);
    margin: 0;
    line-height: 1.3;
    font-weight: 700;
  }
  
  .gx-card__title a {
    color: var(--gx-text);
    text-decoration: none;
    transition: color 0.2s;
  }
  
  .gx-card__title a:hover {
    color: var(--gx-primary);
  }
  
  .gx-card__excerpt {
    margin: 0;
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.5;
  }
  
  
  /* =========================================
     4. PAGINACIÓN & EXTRAS
     ========================================= */
  .gx-pagination { padding-bottom: 48px; }
  
  .gx-pagination .nav-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  
  .gx-pagination a, .gx-pagination span {
    padding: 10px 16px;
    border: 1px solid var(--gx-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--gx-text);
    font-weight: 600;
    transition: all 0.2s;
  }
  
  .gx-pagination a:hover {
    border-color: var(--gx-primary);
    color: var(--gx-primary);
  }
  
  .gx-pagination .current {
    background: var(--gx-primary);
    color: #fff;
    border-color: var(--gx-primary);
  }
  
  .gx-empty {
    padding: 60px 0;
    text-align: center;
    color: var(--gx-muted);
    font-size: 1.2rem;
  }
  
  
 
/* =======================================================
   5. FOOTER (Compacto -30% + Cita destacada + UX/UI)
   Mobile First: TODO centrado en mobile
   Desktop: alineado a la izquierda
   ======================================================= */

   .gx-footer {
    background-color: var(--gx-primary);
    color: #ffffff;
    padding: 2.5rem 0 0 0;
    margin-top: auto;
    font-family: var(--gx-font-heading);
  }
  
  .gx-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem 1.75rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  
  /* Columnas — Mobile: TODO centrado */
  .gx-footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    align-items: center;        /* mobile: hijos al centro */
    text-align: center;         /* mobile: texto al centro */
  }
  
  /* Brand */
  .gx-footer-logo img {
    max-width: 130px;
    height: auto;
    filter: brightness(0) invert(1);
  }
  
  .gx-text-logo {
    font-weight: 900;
    font-size: 1.7rem;
    letter-spacing: 2px;
    color: #fff;
  }
  
  .gx-footer-desc {
    font-size: 0.88rem;
    line-height: 1.55;
    color: #cbd5e0;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    max-width: 380px;           /* para que no se estire raro centrado */
  }
  
  /* Títulos — mobile sin border-left (queda mal centrado) */
  .gx-footer-title {
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    color: #fff;
    line-height: 1.2;
    padding-bottom: 8px;
    position: relative;
  }
  
  /* Línea decorativa debajo del título (centrada en mobile) */
  .gx-footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: #3182ce;
    border-radius: 2px;
    transition: all 0.3s ease;
  }
  
  /* Listas de enlaces */
  .gx-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .gx-footer-list li {
    margin-bottom: 0.55rem;
  }
  
  .gx-footer-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #cbd5e0;
    font-size: 0.93rem;
    font-family: 'Roboto', sans-serif;
    transition: color 0.2s ease;
  }
  
  .gx-footer-list a:hover {
    color: #fff;
  }
  
  /* Newsletter */
  .gx-newsletter-text {
    font-size: 0.88rem;
    color: #cbd5e0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    max-width: 380px;
  }
  
  .gx-footer-form {
    margin-top: 0.3rem;
    width: 100%;
    max-width: 380px;
  }
  
  .gx-input-group {
    display: flex;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    padding: 4px;
    transition: border-color 0.2s ease;
  }
  
  .gx-input-group:focus-within {
    border-color: rgba(255,255,255,0.5);
  }
  
  .gx-footer-input {
    background: transparent;
    border: none;
    color: #fff;
    padding: 0.6rem 0.8rem;
    width: 100%;
    outline: none;
    font-size: 0.9rem;
  }
  
  .gx-footer-input::placeholder {
    color: #a0aec0;
  }
  
  .gx-footer-submit {
    background: #fff;
    color: var(--gx-primary);
    border: none;
    width: 40px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  
  .gx-footer-submit:hover {
    background: #f0f0f0;
    transform: translateX(2px);
  }
  
  /* Legal checkbox */
  .gx-legal-check {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 0.72rem;
    color: #a0aec0;
    margin-top: 8px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    line-height: 1.4;
    text-align: left;           /* el legal queda alineado para legibilidad */
  }
  
  .gx-legal-check input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 2px;
  }
  
  /* =======================================================
     SOCIAL ICONS (centrados en mobile)
     ======================================================= */
  
  .gx-social-links {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    justify-content: center;    /* centrados en mobile */
  }
  
  .gx-social-links a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    text-decoration: none;
    transition: all 0.25s ease;
  }
  
  .gx-social-links svg {
    width: 16px;
    height: 16px;
    fill: #ffffff;
    transition: all 0.25s ease;
  }
  
  .gx-social-links a:hover {
    background: #ffffff;
    transform: translateY(-3px);
  }
  
  .gx-social-links a:hover svg {
    fill: var(--gx-primary);
  }
  
  /* =======================================================
     COPYRIGHT BAR
     ======================================================= */
  
  .gx-footer-bottom {
    background-color: rgba(0,0,0,0.25);
    padding: 1.25rem 1.5rem;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  
  .gx-copyright {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;    /* mobile: centrado */
    align-items: center;
    gap: 0.5rem 1.5rem;
    text-align: center;         /* mobile: centrado */
  }
  
  .gx-copy-line {
    flex: 1 1 auto;
    font-size: 0.82rem;
    color: #a0aec0;
    margin: 0;
  }
  
  .gx-copy-line a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
  }
  
  .gx-copy-line a:hover {
    color: #3182ce;
  }
  
  /* ⭐ LA CITA DESTACADA */
  .gx-quote {
    flex: 0 1 auto;
    font-family: var(--gx-font-heading);
    font-style: italic;
    font-size: 1.05rem;
    font-weight: 500;
    margin: 0;
    color: #ffffff;
    opacity: 0.95;
    letter-spacing: 0.3px;
    line-height: 1.4;
    max-width: 600px;
  }
  
  .gx-quote-mark {
    font-size: 1.3em;
    color: #3182ce;
    font-weight: 700;
    font-style: normal;
    vertical-align: middle;
    margin: 0 2px;
  }
  
  /* =======================================================
     RESPONSIVE
     ======================================================= */
  
  /* Tablet: 2 columnas (sigue centrado) */
  @media (min-width: 640px) and (max-width: 991px) {
    .gx-footer-container {
      grid-template-columns: 1fr 1fr;
      gap: 1.75rem 2rem;
    }
  
    .gx-footer-col.brand-col,
    .gx-footer-col.newsletter-col {
      grid-column: 1 / -1;
    }
  }
  
  /* Desktop ≥992px: alineación a la IZQUIERDA */
  @media (min-width: 992px) {
  
    .gx-footer-container {
      grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
      gap: 2.5rem;
    }
  
    /* Columnas: alineadas a la izquierda en desktop */
    .gx-footer-col {
      align-items: flex-start;
      text-align: left;
    }
  
    /* Brand description y newsletter sin max-width */
    .gx-footer-desc,
    .gx-newsletter-text,
    .gx-footer-form {
      max-width: none;
    }
  
    /* Títulos vuelven al border-left clásico */
    .gx-footer-title {
      border-left: 3px solid #3182ce;
      padding-left: 10px;
      padding-bottom: 0;
    }
  
    .gx-footer-title::after {
      display: none;            /* sin la línea inferior en desktop */
    }
  
    /* Listas: hover con flecha y alineadas a la izquierda */
    .gx-footer-list a {
      justify-content: flex-start;
      position: relative;
    }
  
    .gx-footer-list a::before {
      content: '→';
      opacity: 0;
      margin-right: 0;
      width: 0;
      transition: all 0.2s ease;
      color: #3182ce;
      font-weight: 700;
      font-size: 0.85em;
    }
  
    .gx-footer-list a:hover::before {
      opacity: 1;
      margin-right: 6px;
      width: 12px;
    }
  
    /* Social icons a la izquierda */
    .gx-social-links {
      justify-content: flex-start;
    }
  
    /* Copyright en línea a los lados */
    .gx-footer-bottom {
      text-align: left;
    }
  
    .gx-copyright {
      justify-content: space-between;
      text-align: left;
    }
  
    .gx-quote {
      text-align: right;
    }
  }






 /* ================================
   HEADER TYPE 1
================================ */

.gx-header-type1 {
  margin-bottom: 35px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Alineación real */
.gx-header-type1.gx-align-left {
  align-items: flex-start;
  text-align: left;
}

.gx-header-type1.gx-align-center {
  align-items: center;
  text-align: center;
}

.gx-header-type1.gx-align-right {
  align-items: flex-end;
  text-align: right;
}

.gx-header-type1__subtitle {
  font-family: var(--gx-font-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gx-primary);
  margin: 0;
}

.gx-header-type1__title {
  font-family: var(--gx-font-heading);
  font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  color: var(--gx-text);
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin: 0;
  margin: 0 auto 25px auto;
}

/* Línea decorativa */
.gx-header-type1::after {
  content: '';
  width: 60px;
  height: 4px;
  background-color: var(--gx-primary);
  border-radius: 2px;
  margin-top: 18px;
}

/* Alineación de la línea */
.gx-header-type1.gx-align-left::after {
  align-self: flex-start;
}

.gx-header-type1.gx-align-center::after {
  align-self: center;
}

.gx-header-type1.gx-align-right::after {
  align-self: flex-end;
}


/* ================================
   HEADER TYPE 2
================================ */

.gx-header-type2 {
  display: flex;
  align-items: center;
  gap: 25px;
  width: 100%;
  margin-bottom: 35px;
}

/* Líneas */
.gx-header-type2__line {
  height: 2px;
  background: var(--gx-text);
}

/* CENTER */
.gx-header-type2.gx-align-center .gx-header-type2__line {
  flex: 1;
}

/* LEFT */
.gx-header-type2.gx-align-left {
  justify-content: flex-start;
}

.gx-header-type2.gx-align-left .gx-header-type2__line:first-child {
  display: none;
}

.gx-header-type2.gx-align-left .gx-header-type2__line:last-child {
  flex: 1;
}

/* RIGHT */
.gx-header-type2.gx-align-right {
  justify-content: flex-end;
}

.gx-header-type2.gx-align-right .gx-header-type2__line:last-child {
  display: none;
}

.gx-header-type2.gx-align-right .gx-header-type2__line:first-child {
  flex: 1;
}

/* Box */
.gx-header-type2__box {
  border: 2px solid var(--gx-text);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  background: var(--gx-bg);
}

.gx-header-type2__title {
  font-family: var(--gx-font-heading);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gx-text);
  margin: 0;
}


/* ================================
   BASE BUTTON
================================ */


.gx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 28px;
  margin-top: auto;
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 1px solid transparent;
  background: var(--gx-primary);
  color: #fff;
}

.gx-btn:active {
  transform: translateY(1px);
}

.gx-btn:hover {
  background: var(--gx-primary);
  transform: translateY(-2px); /* <--- ESTA LÍNEA */
}


/* PRIMARY */

.gx-btn--primary {
  background-color:black;
  color: #ffffff;
  box-shadow: var(--gx-shadow-sm);
}

.gx-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--gx-shadow-md);
}

/* GLASS */

.gx-btn--glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 28px;
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--gasex-white);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  transition: all 0.25s ease;
}

.gx-btn--glass:hover {
  background-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

/* OUTLINE */

.gx-btn--outline {
  background: transparent;
  border: 2px solid var(--gx-text);
  color: var(--gx-text);
}

.gx-btn--outline:hover {
  background: var(--gx-text);
  color: #ffffff;
}

/* SIZES */

.gx-btn--sm {
  height: 36px;
  padding: 0 20px;
  font-size: 0.8rem;
}

.gx-btn--lg {
  height: 52px;
  padding: 0 36px;
  font-size: 1rem;
}


/* ========================================
   FIX EDITOR WRAPPER
======================================== */

.editor-styles-wrapper .gx-header-type1,
.editor-styles-wrapper .gx-header-type2 {
  width: 100%;
}

.editor-styles-wrapper .gx-combos-banner-editor {
  padding: 20px;
}

.editor-styles-wrapper .gx-header-type1__title,
.editor-styles-wrapper .gx-header-type2__title {
  margin-top: 0;
}














/* ============================
   FILTROS POR CATEGORÍA (BLOG)
============================ */

.gx-blog-filters-wrap {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Botón toggle */
.gx-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #fff;
  border: 1px solid var(--gx-border, #e6e9ef);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gx-primary, #013966);
  cursor: pointer;
  transition: all 0.2s;
}

.gx-filters-toggle:hover {
  background: var(--gx-bg-soft, #f7f9fc);
  border-color: var(--gx-primary, #013966);
}

.gx-filters-toggle .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

.gx-filters-toggle__arrow {
  transition: transform 0.25s ease;
  font-size: 12px;
}

.gx-filters-toggle.is-open .gx-filters-toggle__arrow {
  transform: rotate(180deg);
}

/* Overlay (solo mobile) */
.gx-filters-overlay {
  display: none;
}

/* Header del drawer (solo mobile) */
.gx-filters-drawer-header {
  display: none;
}

/* Contenedor de filtros */
.gx-blog-filters {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.25s ease;
}

.gx-blog-filters.is-open {
  max-height: 800px;
  opacity: 1;
  margin-top: 18px;
}

/* Lista de pills */
.gx-filters-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.gx-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  transition: all 0.2s;
}

.gx-filter-pill:hover {
  border-color: var(--gx-primary, #013966);
  color: var(--gx-primary, #013966);
  transform: translateY(-2px);
}

.gx-filter-pill.is-active {
  background: var(--gx-primary, #013966);
  border-color: var(--gx-primary, #013966);
  color: #fff;
}

.gx-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

.gx-filter-pill.is-active .gx-filter-count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}


/* ============================
   MOBILE: DRAWER LATERAL
============================ */

@media (max-width: 600px) {

  /* Overlay oscuro detrás del drawer */
  .gx-filters-overlay {
    display: block;
    position: fixed;
    top: var(--gx-nav-h, 115px);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 99998;
  }

  .gx-filters-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* El contenedor de filtros se vuelve un drawer lateral */
  .gx-blog-filters {
    position: fixed;
    top: var(--gx-nav-h, 115px);
    right: 0;
    width: 85%;
    max-width: 320px;
    height: calc(100% - var(--gx-nav-h, 115px));
    max-height: calc(100% - var(--gx-nav-h, 115px));
    background: #fff;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
    padding: 0;
    margin: 0 !important;
    opacity: 1;
    overflow-y: auto;
    z-index: 99999;

    /* Oculto: empujado fuera de la pantalla a la derecha */
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  /* En mobile, el is-open de PHP NO abre el drawer (evita parpadeo).
     Solo lo abre la clase is-open-mobile que pone el JS al tocar el botón. */
  .gx-blog-filters.is-open {
    transform: translateX(100%);   /* sigue cerrado aunque tenga is-open */
  }

  .gx-blog-filters.is-open-mobile {
    transform: translateX(0);      /* abierto de verdad en mobile */
    margin-top: 35px !important;
  }

  /* Header del drawer con título y botón cerrar */
  .gx-filters-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--gx-border, #e6e9ef);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
  }

  .gx-filters-drawer-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gx-primary, #013966);
  }

  .gx-filters-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.2s;
  }

  .gx-filters-close:hover {
    background: #f1f5f9;
  }

  /* Lista en columna dentro del drawer */
  .gx-filters-list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 20px;
    justify-content: flex-start;
  }

  .gx-filter-pill {
    width: 100%;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 12px;
  }

  /* Bloquear scroll del body cuando el drawer está abierto */
  body.gx-drawer-open {
    overflow: hidden;
  }
}

/* ── Breadcrumb ─────────────────────────────────────────── */
.gx-breadcrumb-wrap {
  padding: 18px 0 4px;
  border-bottom: 1px solid var(--gx-border);
  margin-bottom: 8px;
}
.gx-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gx-muted);
}
.gx-breadcrumb a {
  color: var(--gx-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.gx-breadcrumb a:hover {
  color: var(--gx-primary);
}
.gx-breadcrumb .gx-bc-sep {
  color: var(--gx-border);
  font-size: 14px;
  line-height: 1;
  user-select: none;
}
.gx-breadcrumb .gx-bc-current {
  color: var(--gx-text);
}

/* Thank you page — centrar pretexto y separador */
.woocommerce-order-received .gx-header-type1 {
  align-items: center;
  text-align: center;
}
.woocommerce-order-received .gx-header-type1::after {
  align-self: center;
}
/* =====================================================
   SEGUIMIENTO DE PEDIDO — /seguir-mi-pedido/
===================================================== */

.gx-tracking-wrap {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}

/* Centrado vertical en la página de seguimiento */
body:has(.gx-tracking-wrap) .entry-content,
body:has(.gx-tracking-wrap) .page-content,
body:has(.gx-tracking-wrap) .woocommerce {
    min-height: calc(100svh - var(--gx-nav-h, 115px));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}

/* Formulario */
.gx-tracking-form-card {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 18px;
    padding: 40px 36px;
    box-shadow: 0 8px 32px rgba(0,57,102,.08);
}

.gx-tracking-form-header {
    text-align: center;
    margin-bottom: 32px;
}

.gx-tracking-form-icon {
    font-size: 2.4rem;
    margin-bottom: 12px;
}

.gx-tracking-form-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px;
}

.gx-tracking-form-subtitle {
    font-size: 0.92rem;
    color: #6b7280;
    margin: 0;
}

.gx-tracking-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
}

.gx-tracking-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gx-tracking-field label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #374151;
}

.gx-tracking-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #111827;
    background: #f9fafb;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.gx-tracking-input:focus {
    outline: none;
    border-color: var(--gx-primary, #003966);
    box-shadow: 0 0 0 3px rgba(0,57,102,.1);
    background: #fff;
}

.gx-tracking-hint {
    font-size: 0.8rem;
    color: #9ca3af;
}

.gx-tracking-submit {
    width: 100%;
    padding: 14px;
    background: var(--gx-primary, #003966);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}

.gx-tracking-submit:hover { opacity: 0.88; }

/* Resultado */
.gx-tracking-result-card {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,57,102,.08);
}

.gx-tracking-result-header {
    padding: 28px 28px 20px;
    border-bottom: 1px solid #f3f4f6;
}

.gx-tracking-result-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.gx-tracking-result-number {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
}

.gx-tracking-result-date {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0;
}

/* Badge de estado */
.gx-order-status-badge {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
.gx-status--success { background: #dcfce7; color: #166534; }
.gx-status--info    { background: #dbeafe; color: #1e40af; }
.gx-status--warning { background: #fef9c3; color: #854d0e; }
.gx-status--error   { background: #fee2e2; color: #991b1b; }
.gx-status--neutral { background: #f3f4f6; color: #374151; }

/* Detalles del resultado */
.gx-tracking-result-details {
    display: flex;
    gap: 1px;
    background: #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
}

.gx-tracking-detail-item {
    flex: 1;
    background: #fff;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gx-tracking-detail-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
}

.gx-tracking-detail-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
}

/* Notas */
.gx-tracking-notes {
    padding: 20px 28px;
    border-bottom: 1px solid #f3f4f6;
}

.gx-tracking-notes-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #374151;
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gx-tracking-notes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gx-tracking-note {
    background: #f9fafb;
    border-radius: 8px;
    padding: 12px 14px;
}

.gx-tracking-note-date {
    display: block;
    font-size: 0.78rem;
    color: #9ca3af;
    margin-bottom: 4px;
}

.gx-tracking-note-text p {
    margin: 0;
    font-size: 0.9rem;
    color: #374151;
}

/* Acciones */
.gx-tracking-result-actions {
    padding: 20px 28px;
    text-align: center;
    border-top: 1px solid #f3f4f6;
}

.gx-tracking-result-actions .gx-btn-ghost {
    display: inline-block;
    padding: 11px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gx-primary, #003966);
    text-decoration: none;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    transition: border-color 0.15s, background 0.15s;
}

.gx-tracking-result-actions .gx-btn-ghost:hover {
    border-color: var(--gx-primary, #003966);
    background: #f0f7ff;
}

/* Detalles del pedido — contenido WooCommerce dentro de la card */
.gx-tracking-order-details {
    padding: 0 28px 24px;
    border-top: 1px solid #f3f4f6;
}

.gx-tracking-order-details h2 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9ca3af;
    margin: 20px 0 12px;
}

/* Tabla de productos */
.gx-tracking-order-details .woocommerce-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    margin-bottom: 0;
    border: 1px solid #f3f4f6;
    border-radius: 10px;
    overflow: hidden;
}

.gx-tracking-order-details .woocommerce-table thead th {
    padding: 10px 14px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    background: #f9fafb;
    border-bottom: 1px solid #f3f4f6;
}

.gx-tracking-order-details .woocommerce-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
    vertical-align: top;
}

.gx-tracking-order-details .woocommerce-table tbody tr:last-child td {
    border-bottom: none;
}

/* Links de producto */
.gx-tracking-order-details .woocommerce-table a {
    color: var(--gx-primary, #003966);
    text-decoration: none;
    font-weight: 500;
}

.gx-tracking-order-details .woocommerce-table a:hover {
    text-decoration: underline;
}

/* Fila NOTA */
.gx-tracking-order-details .woocommerce-table .woocommerce-table__product-name.product-name + td,
.gx-tracking-order-details .woocommerce-table td[data-title="Nota"],
.gx-tracking-order-details .woocommerce-table .notes td {
    font-style: italic;
    color: #6b7280;
    font-size: 0.85rem;
}

/* Totales en tfoot */
.gx-tracking-order-details .woocommerce-table tfoot tr td,
.gx-tracking-order-details .woocommerce-table tfoot tr th {
    padding: 10px 14px;
    border-top: 1px solid #f3f4f6;
    font-weight: 600;
    color: #374151;
    font-size: 0.88rem;
}

.gx-tracking-order-details .woocommerce-table tfoot .order-total td,
.gx-tracking-order-details .woocommerce-table tfoot .order-total th {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gx-primary, #003966);
    background: #f0f7ff;
}

/* Columnas de dirección */
.gx-tracking-order-details .woocommerce-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

.gx-tracking-order-details .woocommerce-column h2 {
    margin: 0 0 8px;
}

.gx-tracking-order-details address {
    font-style: normal;
    font-size: 0.86rem;
    color: #374151;
    line-height: 1.75;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 8px;
    padding: 12px 14px;
}

@media (max-width: 480px) {
    .gx-tracking-form-card { padding: 28px 20px; }
    .gx-tracking-result-details { flex-direction: column; }
    .gx-tracking-order-details .woocommerce-columns { grid-template-columns: 1fr; }
    .gx-tracking-order-details { padding: 20px 16px; }
}