/**
 * Theme Name:     ListingHive Child
 * Author:         Ignacio
 * Template:       listinghive
 * Text Domain:	   listinghive-child
 * Description:    A multipurpose WordPress theme that allows you to build any type of directory and listing websites. Whether it’s a business directory, job board, real estate, classifieds or basically any listing website — ListingHive is a great choice for it.
 */

/* Ocultar el mapa en la plantilla de vista de anuncio */
.hp-template--listing-view-page .hp-map {
  display: none;
}

/* Fuerza font-display:swap para Font Awesome Solid 900 de HivePress */
@font-face{
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap; /* <- clave */
  src:
    url("/wp-content/plugins/hivepress/assets/webfonts/fa-solid-900.woff2") format("woff2"),
    url("/wp-content/plugins/hivepress/assets/webfonts/fa-solid-900.woff") format("woff");
}

/* =========================================================
   HEADER TRANSPARENTE DEFINITIVO (Estructura ListingHive)
   ========================================================= */

/* 1. HACER FLOTAR SOLO LA BARRA DE MENÚ */
.header-navbar {
    position: absolute !important; /* Sacamos el menú del flujo */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100; /* Lo ponemos encima de la foto */
    background: transparent !important; /* Fondo transparente */
    border-bottom: none !important;
}

/* 2. EMPUJAR EL CONTENIDO DE LA PORTADA HACIA ABAJO */
/* Como el menú ahora flota encima, necesitamos bajar el texto para que no quede tapado */
.header-hero {
    padding-top: 140px !important; /* Espacio extra arriba */
    background-position: center !important; 
}

/* 4. MENÚ DE NAVEGACIÓN (Letras Blancas) */
.header-navbar__menu > ul > li > a,
.header-navbar__menu > ul > li > span {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Sombra para lectura */
}

/* Color Amarillo/Dorado al pasar el mouse */
.header-navbar__menu > ul > li > a:hover {
    color: #fbbf24 !important;
    opacity: 1;
}

/* 5. ICONOS Y EXTRAS EN BLANCO */
.header-navbar i, 
.header-navbar__toggle i {
    color: #ffffff !important;
}

/* =========================================
   AJUSTES DE SEGURIDAD PARA MÓVIL
   ========================================= */
@media (max-width: 768px) {
    /* En móvil, a veces necesitamos fondo oscuro al abrir el menú */
    .header-navbar__menu {
        background: #0f172a !important; /* Azul oscuro si se despliega */
        margin-top: 10px;
        border-radius: 10px;
        padding: 10px;
    }
    
    /* Asegurar que la portada tenga altura en móvil */
    .header-hero {
        padding-top: 100px !important;
    }
}


/* =========================================
   BOTÓN MÓVIL "PUBLICAR" (Versión Flexbox Pro)
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. CONTENEDOR DEL BOTÓN */
    .header-navbar .hp-menu__item--listing-submit {
        width: auto !important;
        padding-left: 18px !important;  /* Un pelín más de aire */
        padding-right: 18px !important;
        border-radius: 50px !important;
        aspect-ratio: auto !important;
        
        /* MEJORA 1: Flexbox para alineación perfecta */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important; /* Espacio entre icono y texto */
    }

    /* 2. TEXTO VISIBLE */
    .header-navbar .hp-menu__item--listing-submit span {
        display: inline-block !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        
        /* MEJORA 2: Evita que el texto se parta en 2 líneas */
        white-space: nowrap !important; 
        
        /* Ya no necesitamos margins aquí gracias al 'gap' de arriba */
        margin: 0 !important; 
    }
    
    /* 3. ICONO (+) */
    .header-navbar .hp-menu__item--listing-submit i {
        /* MEJORA 3: Aseguramos que no tenga márgenes extraños */
        margin: 0 !important;
        line-height: 1 !important;
    }
}
 
 
/* =========================================
   LOGO HD (RETINA READY)
   ========================================= */

/* Controlamos el tamaño visual, pero mantenemos la calidad de la imagen grande */
.header-logo img, 
.custom-logo-link img {
    /* Tamaño visual deseado */
    height: 30px !important;  
    width: auto !important;   /* El ancho se ajusta solo */
    
    /* Filtro para volverlo blanco (ya lo tenías, lo mantenemos) */
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
    
    /* Suavizado de bordes */
    -webkit-backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
}

/* Ajuste específico para Celular */
@media (max-width: 768px) {
    .header-logo img, 
    .custom-logo-link img {
        height: 20px !important; /* Un poco más chico en móvil */
    }
}
/* =========================================================
   ARREGLO INTELIGENTE: PÁGINAS INTERNAS (BLINDADO TOTAL)
   Aplica a: Internas, Búsquedas (?s=), Categorías y Archivos
   ========================================================= */

/* 1. CONFIGURACIÓN DE LA BARRA NEGRA */
/* Agregamos body.search y body.archive para que NO falle nunca */
body:not(.home) .header-navbar,
body.search .header-navbar,
body.search-results .header-navbar,
body.archive .header-navbar {
    position: relative !important;
    background: #111111 !important;  /* COLOR NEGRO */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    padding-bottom: 15px !important;
    padding-top: 15px !important;
    width: 100% !important;
    top: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    visibility: visible !important;
}

/* 2. AJUSTE DEL LOGO */
body:not(.home) .header-logo,
body.search .header-logo,
body.archive .header-logo {
    margin-top: 0 !important;
    display: block !important;
}

/* 3. EMPUJAR CONTENIDO (Para que no se esconda) */
body:not(.home) .site-content,
body.search .site-content,
body.archive .site-content {
    margin-top: 0 !important;
    padding-top: 30px !important;
}

/* =========================================
   BONUS: MEJORA DEL BOTÓN "FILTRO" (Lo mantenemos igual)
   ========================================= */
.hp-button--mobile-filter {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
    margin-bottom: 25px !important;
    width: 100% !important;
    max-width: 300px !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 12px !important;
}

/* =========================================
   ASEGURAR ICONO BLANCO EN MÓVIL (Blindado)
   ========================================= */
@media (max-width: 768px) {
    
    /* Icono Hamburguesa BLANCO en todas las internas y búsquedas */
    body:not(.home) .header-navbar__toggle i,
    body.search .header-navbar__toggle i,
    body.archive .header-navbar__toggle i {
        color: #ffffff !important;
    }
    
    /* Ajustes de relleno móvil */
    body:not(.home) .header-navbar,
    body.search .header-navbar,
    body.archive .header-navbar {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }

    /* Ajuste Logo Móvil */
    body:not(.home) .header-logo img,
    body.search .header-logo img {
        height: 20px !important;
        margin-top: 0 !important;
    }
}
/* =========================================================
   PORTADA "CLEAN & BRIGHT MODERN" (Estilo LinkedIn/Stripe)
   ========================================================= */

/* 1. EL FONDO (Preparado para imagen luminosa) */
.header-hero {
    position: relative;
    z-index: 1;
    padding-top: 160px !important; 
    padding-bottom: 160px !important;
    background-position: center center !important;
    background-size: cover !important;
}

/* Overlay Sutil Claro (Opcional: Aclara la imagen si es necesario) */
.header-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Capa blanca muy transparente para asegurar legibilidad */
    background: rgba(255, 255, 255, 0.1);
    z-index: -1;
}


/* 3. BUSCADOR "CÁPSULA LIMPIA" */
.hp-form--listing-search {
    background: #ffffff !important; /* Blanco puro */
    border: 1px solid rgba(0, 0, 0, 0.08) !important; /* Borde gris muy sutil */
    border-radius: 100px !important;
    padding: 8px !important;
    /* Sombra suave y limpia */
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15) !important;
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hp-form--listing-search:hover {
    transform: translateY(-3px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2) !important;
}

.hp-form--listing-search .hp-field__input::placeholder {
    color: #94a3b8;
}

/* 4. EL BOTÓN QUE TE GUSTÓ (Dark Bonito) */
.hp-form--listing-search .hp-btn,
button.hp-form__button.button-primary {
    border-radius: 50px !important;
    padding: 0 45px !important;
    height: 60px !important; /* Igual que el input */
    margin-left: auto;
    
    /* El Mismo Gradiente Dark que te gustó */
    background: #111111 !important;
    font-size: 1.05rem !important;
    border: none !important;
    box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.4) !important;
    transition: all 0.3s ease;
    text-transform: capitalize !important;
}

/* --- AJUSTES MÓVIL --- */
@media (max-width: 768px) {
    .header-hero { padding-top: 100px !important; padding-bottom: 100px !important; }
    .header-hero__title { font-size: 2.4rem !important; }
    
    .hp-form--listing-search {
        flex-direction: column;
        border-radius: 24px !important;
        padding: 15px !important;
        box-shadow: 0 10px 30px -10px rgba(0,0,0,0.15) !important;
    }
    
    .hp-form--listing-search .hp-field__input {
        width: 100%;
        text-align: center;
        padding-left: 0 !important;
        margin-bottom: 12px;
        border-bottom: 1px solid #f1f5f9 !important;
        height: 50px !important;
    }
    
    .hp-form--listing-search .hp-btn {
        width: 100% !important;
        height: 55px !important;
    }
}




/* ==========================================================================
   UNDATO — UI CURSOS (CPT "curso" + taxonomías)
   ----------------------------------------------------------------------------
   Controla:
   - Layout general (contenedor, títulos, secciones)
   - Single curso (2 columnas: contenido + ficha)
   - Cards reutilizables (archive /cargo/ /categoria-curso/)
   - Filtros (buscador + selects + inputs + botones)
   ----------------------------------------------------------------------------
   Ajustes incluidos en esta versión:
   - Tipografía más pequeña en móvil
   - Mejor simetría/ritmo (line-height, márgenes y paddings consistentes)
   ========================================================================== */


/* ==========================================================================
   0) BASE TIPOGRÁFICA (solo en módulos UNDATO)
   ========================================================================== */

/* Evita letras demasiado grandes heredadas del theme */
.ud-wrap {
  font-size: 16px;
  line-height: 1.55;
}

/* En móvil: baja un poco el tamaño general */
@media (max-width: 900px) {
  .ud-wrap {
    font-size: 14px;
    line-height: 1.5;
  }
}


/* ==========================================================================
   1) CONTENEDOR Y CABECERA
   ========================================================================== */

.ud-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px;
}

.ud-hero {
  margin-bottom: 16px;
}

.ud-h1 {
  font-size: 32px;
  margin: 0 0 8px;
  line-height: 1.2;
}

.ud-desc {
  margin: 0;
  opacity: 0.9;
}

/* En móvil: H1 más pequeño */
@media (max-width: 900px) {
  .ud-h1 {
    font-size: 24px;
    margin-bottom: 6px;
  }
}


/* ==========================================================================
   2) CHIPS / PILLS (Cargo, Categoría)
   ========================================================================== */

.ud-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.ud-pill {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.1;
  text-decoration: none;
}

/* En móvil: pills levemente más compactas */
@media (max-width: 900px) {
  .ud-pill {
    font-size: 12px;
    padding: 5px 9px;
  }
}


/* ==========================================================================
   3) LAYOUT SINGLE CURSO (2 COLUMNAS)
   ========================================================================== */

.ud-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

@media (max-width: 900px) {
  .ud-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.ud-section {
  margin: 16px 0;
}

.ud-section h2 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.25;
}

@media (max-width: 900px) {
  .ud-section {
    margin: 14px 0;
  }
  .ud-section h2 {
    font-size: 18px;
  }
}


/* ==========================================================================
   4) TARJETAS Y FILAS (FICHA DEL CURSO / BLOQUES)
   ========================================================================== */

.ud-card {
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 16px;
  background: #fff;
}

@media (max-width: 900px) {
  .ud-card {
    padding: 14px;
  }
}

/* Fila ficha: simetría y alineación */
.ud-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #f1f1f1;
}

.ud-row span {
  opacity: 0.85;
}

.ud-row strong {
  font-weight: 600;
}

.ud-row:last-child {
  border-bottom: 0;
}


/* ==========================================================================
   5) BOTONES (CTA)
   ========================================================================== */

.ud-btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #111;
  background: #fff;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.1;
}

.ud-btn-ghost {
  border-color: #e5e5e5;
}

/* En móvil: botones un poco más compactos */
@media (max-width: 900px) {
  .ud-btn {
    padding: 9px 12px;
    border-radius: 10px;
  }
}


/* ==========================================================================
   6) GRID DE CARDS (ARCHIVE / TAXONOMÍAS)
   ========================================================================== */

.ud-grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .ud-grid-cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* ==========================================================================
   7) CARD DE CURSO (template-parts/curso-card.php)
   ========================================================================== */

.ud-card-curso .ud-h2 {
  font-size: 18px;
  margin: 10px 0 6px;
  line-height: 1.25;
}

@media (max-width: 900px) {
  .ud-card-curso .ud-h2 {
    font-size: 16px;
    margin: 10px 0 6px;
  }
}

.ud-thumb img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.ud-card-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0 10px;
}

.ud-excerpt {
  margin: 0 0 12px;
  opacity: 0.95;
}

.ud-card-ficha {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.ud-mini {
  font-size: 13px;
  padding: 5px 10px;
  border: 1px solid #eee;
  border-radius: 999px;
  line-height: 1.1;
}

@media (max-width: 900px) {
  .ud-mini {
    font-size: 12px;
    padding: 5px 9px;
  }
}

.ud-card-cta {
  margin: 0;
}


/* ==========================================================================
   8) FILTROS (template-parts/curso-filters.php)
   ========================================================================== */

.ud-filters {
  margin: 14px 0 18px;
}

.ud-filters-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.ud-input,
.ud-select {
  padding: 10px 12px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.2;
}

.ud-input {
  min-width: 220px;
}

.ud-input-sm {
  width: 90px;
  min-width: 90px;
}

/* En móvil: controles más compactos y búsqueda full width */
@media (max-width: 900px) {
  .ud-input,
  .ud-select {
    padding: 9px 10px;
    font-size: 13px;
  }

  .ud-input {
    min-width: 100%;
  }

  .ud-input-sm {
    width: 92px;
    min-width: 92px;
  }
}


/* ==========================================================================
   9) ELEMENTOS AUXILIARES (contador, paginación)
   ========================================================================== */

.ud-count {
  margin: 8px 0 14px;
  font-size: 14px;
  opacity: 0.9;
}

@media (max-width: 900px) {
  .ud-count {
    font-size: 13px;
  }
}

.ud-pagination {
  margin-top: 18px;
}


/* ==========================================================================
   10) ESTADOS / VARIANTES
   ========================================================================== */

.ud-pill-lock {
  background: #f7f7f7;
  border-color: #e5e5e5;
}



/* ==========================================================================
   AJUSTE MÓVIL: SINGLE CURSO MÁS COMPACTO
   (solo afecta páginas single del curso)
   ========================================================================== */

@media (max-width: 900px) {

  /* Contenedor más compacto */
  .ud-curso.ud-wrap {
    padding: 16px 14px;
  }

  /* Título principal ya lo bajamos, pero reforzamos */
  .ud-curso .ud-h1 {
    font-size: 22px;
    line-height: 1.2;
  }

  /* Títulos de secciones (h2) más pequeños */
  .ud-curso .ud-section h2 {
    font-size: 17px;
    line-height: 1.25;
    margin: 0 0 6px;
  }

  /* Texto del contenido más compacto */
  .ud-curso .ud-section p,
  .ud-curso .ud-section li,
  .ud-curso .ud-section div {
    font-size: 13px;
    line-height: 1.5;
  }

  /* Temario: reduce sangría y separaciones */
  .ud-curso .ud-temario {
    padding-left: 18px;
    margin: 8px 0 0;
  }

  .ud-curso .ud-temario-item {
    margin: 0 0 10px;
  }

  /* Ficha del curso: menos padding */
  .ud-curso .ud-card {
    padding: 14px;
  }

  /* Filas de ficha: más compactas */
  .ud-curso .ud-row {
    padding: 7px 0;
  }

  /* Botón cotizar ligeramente más pequeño */
  .ud-curso .ud-btn {
    padding: 9px 12px;
  }
}


/* ==========================================================================
   AJUSTE MÓVIL: FICHA DEL CURSO MÁS COMPACTA
   (solo en single curso)
   ========================================================================== */
@media (max-width: 900px) {

  /* Encabezado de la tarjeta */
  .ud-curso .ud-card h3 {
    font-size: 16px;
    margin: 0 0 10px;
    line-height: 1.2;
  }

  /* Reduce padding solo de la ficha del curso */
  .ud-curso .ud-side .ud-card {
    padding: 12px;
  }

  /* Filas más compactas */
  .ud-curso .ud-side .ud-row {
    padding: 6px 0;
    gap: 8px;
  }

  /* Texto de la fila (label) */
  .ud-curso .ud-side .ud-row span {
    font-size: 12px;
    line-height: 1.2;
  }

  /* Valor (strong) */
  .ud-curso .ud-side .ud-row strong {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
  }

  /* Botón cotizar más compacto y ancho completo */
  .ud-curso .ud-side .ud-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 9px 12px;
    font-size: 13px;
  }

  /* Reduce el margen superior del botón */
  .ud-curso .ud-side p[style*="margin-top"] {
    margin-top: 10px !important;
  }
}