/*
Theme Name:   Reco Child - BubbleStudio
Theme URI:    http://estudiopatagon.com/themes/wordpress/recov3
Author:       EstudioPatagon (child theme personalizado por BubbleStudio)
Author URI:   https://1.envato.market/ep-portfolio-themes
Description:  Child theme de Reco. Mantiene intacto el tema comprado (Reco) y aplica encima el diseno visual de BubbleStudio: fondo oscuro y tipografia Manrope. Las esferas de vidrio viven en un plugin aparte.
Template:     reco
Version:      3.13
*/

/* =====================================================
   1. VARIABLES DE DISENO (paleta BubbleStudio)
===================================================== */
:root{
  --bg: #05050c;
  --bg-2: #0a0a16;
  --card: #10101d;
  --card-border: rgba(255,255,255,0.09);
  --text: #f5f5fb;
  --text-dim: #9d9db2;
  --purple: #8b5cf6;
  --blue: #4f92ff;
  --pink: #ff4ecd;
  --cyan: #20d9ff;
  --grad-1: linear-gradient(90deg, var(--purple), var(--blue));
  --grad-2: linear-gradient(90deg, var(--pink), var(--purple) 55%, var(--cyan));
  --radius-lg: 24px;
  --radius-pill: 999px;
}

/* =====================================================
   2. BASE / TIPOGRAFIA GLOBAL
===================================================== */
html{ scroll-behavior: smooth; }

body,
.epcl-button,
input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=submit], input[type=url], textarea, select, select.custom-select,
button, label, .wpcf7 label, #header nav ul.sub-menu li a, .nice-select .list li{
  font-family: 'Manrope', 'Helvetica', 'Arial', sans-serif !important;
}

body{
  background: var(--bg) !important;
  color: var(--text-dim) !important;
}

#wrapper{ background: var(--bg) !important; overflow: hidden; position: relative; }

/* Resplandores ambientales de fondo (equivalentes a las esferas de BubbleStudio) */
#wrapper::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(420px 420px at 8% 0%, rgba(139,92,246,0.20), transparent 60%),
    radial-gradient(380px 380px at 95% 10%, rgba(32,217,255,0.14), transparent 60%),
    radial-gradient(460px 460px at 85% 70%, rgba(255,78,205,0.12), transparent 60%),
    radial-gradient(360px 360px at 5% 80%, rgba(79,146,255,0.14), transparent 60%);
}
#header, #page, main, #footer, .grid-container{ position: relative; z-index: 1; }

a{ color: var(--text) !important; }
a:hover{ color: var(--cyan) !important; }

h1, h2, h3, h4, h5, h6,
.title{ color: var(--text) !important; font-weight: 700 !important; }

.title.white{ color: var(--text) !important; }

div.text, .post-excerpt, p, .entry-content, li, .meta, .description{
  color: var(--text-dim) !important;
}

div.text a:not([class]),
div.text .epcl-button,
.author-meta a,
a:hover{ color: var(--purple) !important; }

div.text blockquote{
  border-left: 3px solid transparent !important;
  border-image: var(--grad-2) 1 !important;
  background: var(--card) !important;
  color: var(--text) !important;
}

hr, .border, .border-effect, .separator{
  border-color: var(--card-border) !important;
  background: var(--card-border) !important;
}

::selection{ background: var(--purple); color: #fff; }

/* =====================================================
   3. HEADER / NAVEGACION
===================================================== */
#header{
  background: rgba(5,5,12,0.75) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--card-border);
}
#header.enable-sticky.sticky{
  background: rgba(5,5,12,0.92) !important;
}
#header .logo a,
#header .logo a.title{
  color: var(--text) !important;
  font-weight: 800 !important;
}
#header .logo a i.fa{
  background: var(--grad-2);
  border-radius: 50%;
}

#header .main-nav ul > li > a{
  color: var(--text-dim) !important;
  font-weight: 600 !important;
  transition: color .2s ease;
}
#header .main-nav ul > li > a:hover,
#header .main-nav ul > li.current-menu-item > a{
  color: var(--text) !important;
}
#header .main-nav ul ul{
  background: var(--card) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
#header .main-nav ul ul li a{ color: var(--text-dim) !important; }
#header .main-nav ul ul li a:hover{ color: var(--text) !important; background: rgba(255,255,255,0.04) !important; }

#header .share-buttons a{ color: var(--text-dim) !important; }
#header .share-buttons a:hover{ color: var(--cyan) !important; }
#header .menu-mobile i{ color: var(--text) !important; }
#header .border{ background: var(--card-border) !important; }

.notice.text{
  background: linear-gradient(90deg, #1a0f2e, #0d1a33) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--card-border);
}

/* =====================================================
   4. BOTONES
===================================================== */
.button.outline,
div.epcl-download a{
  position: relative;
  background: var(--card) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-pill) !important;
  padding: 12px 26px !important;
  font-weight: 600 !important;
  transition: filter .2s ease, transform .2s ease;
}
.button.outline:hover,
div.epcl-download a:hover{
  filter: brightness(1.2);
  transform: translateY(-2px);
  color: var(--text) !important;
  border-color: var(--purple) !important;
}

.epcl-button,
input[type=submit],
.submit,
.woocommerce a.button,
.woocommerce button.button{
  background: var(--grad-1) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 8px 24px -8px rgba(139,92,246,0.6);
}
.epcl-button:hover,
input[type=submit]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover{
  filter: brightness(1.12);
  background: var(--grad-1) !important;
  color: #fff !important;
}

#back-to-top{
  background: var(--grad-1) !important;
  border-radius: 50% !important;
}

/* =====================================================
   5. TARJETAS DE POSTS (loop grid / classic)
   El "espacio" entre tarjetas en Reco es en realidad padding
   interno de cada columna (usado antes solo como aire para el
   texto). Si le ponemos el fondo a esa misma columna, las
   tarjetas quedan pegadas. Por eso el fondo/borde/radio va en
   un div interno (.epcl-card, agregado via partials/loops/grid-article.php
   en este child theme) y dejamos el padding original como
   separacion transparente real entre columnas y filas.
===================================================== */
article.default{
  margin-bottom: 26px;
}
article.default .border{ display: none !important; }

.epcl-card{
  position: relative;
  background: var(--card) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  padding: 22px 24px 20px;
  box-sizing: border-box;
}
.epcl-card > footer.author-meta{
  padding-top: 16px;
}
/* La imagen destacada sangra hasta el borde de la tarjeta,
   igual que en la demo oficial de Reco */
.epcl-card .post-format-wrapper{
  margin: -22px -24px 18px !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.title.gradient-effect a{
  color: var(--text) !important;
  background-image: var(--grad-2) !important;
}
.title.gradient-effect a:hover{
  color: var(--text) !important;
}

article.default .meta,
article.default .meta a,
article.default time,
article.default .comments{
  color: var(--text-dim) !important;
}
article.default .meta svg{ fill: var(--text-dim) !important; }

.author-image.cover{
  border: 2px solid rgba(255,255,255,0.22) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 3px var(--card) !important;
}

/* Filtros / categorias (home). display:flex hace que el buscador, los
   selects (si estan activos) y el boton de Iniciar sesion/Mi dashboard
   queden en UN SOLO renglon, centrados verticalmente entre si
   (align-items:center) - antes el boton vivia en su propio bloque
   flotante aparte, lo que dejaba todo el renglon mas alto de lo
   necesario y al boton pegado abajo en vez de centrado. flex-wrap
   permite que en pantallas angostas cada cosa caiga a su propia linea. */
div.filters{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
div.filters,
div.filters a{
  background: var(--card) !important;
  color: var(--text-dim) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-pill) !important;
}
div.filters a.active,
div.filters a:hover{
  background: var(--grad-1) !important;
  color: #fff !important;
}

/* =====================================================
   6. SIDEBAR / WIDGETS
===================================================== */
#sidebar .widget,
.widget{
  background: var(--card) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text-dim) !important;
}
#sidebar .widget-title,
.widget-title,
.widget h4{
  color: var(--text) !important;
  border-bottom: 1px solid var(--card-border) !important;
}
#sidebar .widget a,
.widget a{ color: var(--text-dim) !important; }
#sidebar .widget a:hover,
.widget a:hover{ color: var(--text) !important; }

.widget_search input[type=search],
.widget_search input[type=text]{
  background: var(--bg-2) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-pill) !important;
}

/* =====================================================
   7. FORMULARIOS / INPUTS
===================================================== */
input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=url], select.custom-select, .inputbox,
.nice-select{
  background: var(--card) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-pill) !important;
}
textarea, select{
  background: var(--card) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
}
input.search-field{
  background: var(--bg-2) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text) !important;
}
.search-form .submit{
  background: transparent !important;
  color: var(--text-dim) !important;
  box-shadow: none !important;
}
input::placeholder, textarea::placeholder{ color: var(--text-dim) !important; opacity: .8; }

/* =====================================================
   8. FOOTER + SUBSCRIBE
===================================================== */
#footer{
  border-top: 1px solid var(--card-border);
}
#footer .subscribe{
  background: linear-gradient(120deg, #120a26, #1a0f2e 60%, #0d1a33) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  border: 1px solid var(--card-border) !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
}
#footer .subscribe:before{
  background: transparent !important;
  opacity: 0 !important;
}
#footer .subscribe .title,
#footer .subscribe p{ color: var(--text) !important; }
#footer .subscribe form .inputbox{ background: rgba(255,255,255,0.05) !important; }

/* Subscribe + widgets forman UNA sola tarjeta continua (como el
   diseno original: morado arriba, fondo de tarjeta abajo, sin
   costura entre ambos, redondeado solo arriba y solo abajo) */
#footer .widgets{
  background: var(--card) !important;
  border: 1px solid var(--card-border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
  margin-top: 0 !important;
}
/* Los widgets individuales NO llevan su propia caja: se ven
   como un solo panel continuo dentro de la tarjeta de arriba */
#footer .widget{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#footer .widget-title,
#footer .widget a,
#footer .published,
#footer .logo a{
  color: var(--text-dim) !important;
}
#footer .widget a:hover{ color: var(--text) !important; }
#footer .logo a{ color: var(--text) !important; font-weight: 800 !important; }

/* Tag Cloud: en el diseno original las etiquetas usaban negro
   translucido sobre fondo rojo; sobre nuestro fondo oscuro eso
   se veia como un gris apagado. Les damos su propio contraste,
   con un tono violeta sutil en reposo y degradado al pasar el mouse. */
.widget_tag_cloud a,
.woocommerce.widget_product_tag_cloud a{
  background: rgba(139,92,246,0.10) !important;
  border: 1px solid rgba(139,92,246,0.28) !important;
  color: var(--text-dim) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.widget_tag_cloud a:hover,
.woocommerce.widget_product_tag_cloud a:hover{
  background: var(--grad-2) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px rgba(168,85,247,0.55);
}
/* El footer necesita su propia regla de hover: la regla de reposo
   de abajo trae #footer en el selector (mas especificidad que .widget_tag_cloud a:hover
   generico de arriba), asi que sin esto el degradado nunca ganaba al pasar el mouse */
#footer .widget_tag_cloud a,
#footer .woocommerce.widget_product_tag_cloud a{
  background: rgba(139,92,246,0.12) !important;
  border: 1px solid rgba(139,92,246,0.3) !important;
  color: var(--text) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
#footer .widget_tag_cloud a:hover,
#footer .woocommerce.widget_product_tag_cloud a:hover{
  background: var(--grad-2) !important;
  border-color: transparent !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px rgba(168,85,247,0.55);
}

/* =====================================================
   9. COMENTARIOS Y PAGINACION
===================================================== */
#comments,
.comment-respond{
  background: transparent !important;
}
#comments .comment,
.comment-body{
  background: var(--card) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-lg) !important;
}
#comments .comment .fn,
.comment-body .fn{ color: var(--text) !important; }
#comments .comment-content,
.comment-body .comment-content{ color: var(--text-dim) !important; }

.pagination div.nav a,
.pagination div.nav > span{
  background: var(--card) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-pill) !important;
}
.pagination div.nav a:hover,
.pagination div.nav > span{
  background: var(--grad-1) !important;
  color: #fff !important;
}

/* =====================================================
   10. WOOCOMMERCE (si esta activo)
===================================================== */
.woocommerce ul.products li.product,
.woocommerce div.product{
  background: var(--card) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text-dim) !important;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product .price{ color: var(--text) !important; }

/* =====================================================
   11. (las esferas decorativas viven en el plugin aparte
   "BubbleStudio - Fondo de Burbujas", no en este theme,
   para evitar que se dupliquen)
===================================================== */

/* =====================================================
   12. CORRECCION: CONTENEDORES BLANCOS
   (.content envuelve el listado de posts, single, page, 404
   y autor; .pagination envuelve el "Page X of Y". Ambos traen
   background:#fff de fabrica en Reco y no habian sido cubiertos)
===================================================== */
.content{
  background: transparent !important;
  box-shadow: none !important;
}
#home .content,
#archives .content,
.author #archives .content{
  background: transparent !important;
}
div.articles article{
  border-bottom: none !important;
}
/* Reducir el espacio horizontal entre columnas de tarjetas
   (antes 30px a cada lado = 60px entre tarjetas) */
div.articles .grid-33,
div.articles .grid-25,
div.articles .grid-50{
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.pagination{
  background: transparent !important;
  border-top: 1px solid var(--card-border) !important;
}

/* Contenido de single/page (texto del post) como panel de vidrio,
   igual que el resto de tarjetas del sitio */
#single.content,
.left-content .post-content,
.left-content{
  background: transparent !important;
}
#single .featured-image{
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  /* Antes esto no tenia ningun tope: si la imagen destacada subida era
     muy grande o con una proporcion mas cuadrada/vertical, salia
     enorme y descuadrada con el resto del post. Con esto queda una
     proporcion fija (ni muy chica ni muy alta) sin importar el
     tamano real de la foto que se suba. */
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 21 / 9 !important;
  max-height: 460px !important;
  margin: 0 auto 26px !important;
}
/* Cubre tanto <img> directo como <a><img></a> dentro del wrapper,
   segun como lo arme el tema padre */
#single .featured-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
#single .featured-image{
  background-size: cover !important;
  background-position: center !important;
}

/* Caja de autor (#author) - traia background rojo (#FF3152) de fabrica */
#author:not(input){
  background: var(--card) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-lg) !important;
}
#author:not(input) div.avatar a{
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--card-border);
}
#author:not(input) div.social a{
  color: var(--text-dim) !important;
}
#author:not(input) div.social a:hover{
  color: var(--cyan) !important;
}
#archives #author{
  margin-top: 40px !important;
}

/* La caja de autor por defecto de Reco, al final de cada entrada,
   quedaba descentrada/rota (ver captura). Se reemplaza por la
   tarjeta de perfil de BubbleStudio (bsc_render_author_card(), en el
   plugin de comunidad) - aqui solo se oculta la de fabrica, y solo en
   el post individual (no en /author/usuario/, que sigue usando la de
   siempre). */
#single #author:not(input){
  display: none !important;
}

/* Separar la barra de busqueda/filtros del listado de tarjetas de abajo.
   OJO: el "margin-top:0" para ".content" iba SIN ningun contexto (aplicaba
   a single/page/404/autor tambien, no solo home/archivos), y por eso el
   post individual y su sidebar quedaban pegados contra el header/menu de
   arriba, sin nada de aire - se quita esa version generica y se deja solo
   la version ya existente, scoped a home/archivos, un poco mas abajo. */
div.filters{
  border-radius: var(--radius-lg) !important;
  margin-bottom: 34px !important;
  box-shadow: 0 10px 30px -15px rgba(0,0,0,0.6);
}
#home .content,
#archives .content{
  margin-top: 0 !important;
}

/* Separacion entre el header/menu y el contenido en el post individual
   (imagen destacada + columna) y su sidebar - antes quedaban pegados
   contra el menu de arriba por el "margin-top:0" generico de arriba.
   Tambien se agrega el mismo aire abajo, antes de llegar al footer. */
body.single .content,
body.single #sidebar{
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

/* =====================================================
   15. SINGLE POST: META, NAVEGACION ANTERIOR/SIGUIENTE
===================================================== */

/* Iconos SVG (calendario, comentarios) del meta del post individual,
   fuera de article.default/#header/#footer que ya estaban cubiertos */
#single svg,
.meta svg,
.info svg{
  fill: var(--text-dim) !important;
}

/* Tarjeta de navegacion anterior/siguiente (imagen de fondo +
   overlay + titulo + boton circular), con espacio y borde
   degradado propio */
#single .prev,
#single .next{
  /* OJO: aqui antes se probo agregar margen HORIZONTAL (22px 10px) para
     separarlas - pero como estas dos tarjetas son columnas flotantes de
     ancho fijo (ej. 50%/48% segun el tema padre), sumarles margen de mas
     hacia los lados se pasaba del 100% de la fila y la segunda columna
     terminaba "brincando" a su propia linea (se veian apiladas, una
     encima de la otra, en vez de una al lado de la otra). Se revierte a
     solo margen vertical (como el original) y en vez de margen
     horizontal, se usa "transform: scale()" para achicarlas un poco -
     eso no cambia el ancho de su columna (no hay riesgo de desbordar/
     apilarse) y de paso dej aire visible entre ambas y contra los
     bordes. */
  margin: 22px 0 !important;
  border-radius: var(--radius-lg) !important;
  padding: 3px;
  background: var(--grad-2) !important;
  overflow: hidden;
  box-sizing: border-box !important;
  transform: scale(0.94);
  transition: transform .2s ease;
}
#single .prev:hover,
#single .next:hover{
  transform: scale(0.97);
}
@media (max-width: 767px){
  #single .prev,
  #single .next{
    transform: none;
  }
}
#single .prev .thumb.cover,
#single .next .thumb.cover{
  border-radius: 18px !important;
}
#single .overlay{
  background: linear-gradient(180deg, rgba(5,5,12,0.15) 0%, rgba(5,5,12,0.85) 100%) !important;
}
#single .prev .info .title,
#single .next .info .title,
#single .prev time,
#single .next time{
  color: var(--text) !important;
}
#single .prev .button,
#single .next .button,
article.next .button,
article.prev .button{
  background: var(--grad-1) !important;
  border: none !important;
  color: #fff !important;
}

/* Botones de compartir: el contenedor podia heredar fondo claro
   en ciertos contextos. NOTA: no tocamos el color/fondo de cada
   icono individual (<a>) porque cada red social trae su propio
   color de marca y tocarlo de mas rompia el icono visualmente */
.share-buttons{
  background: transparent !important;
}

/* Sidebar: refuerzo contra fondos blancos residuales en widgets
   especiales (ej. "Related Articles") que no usan la clase generica .widget,
   y espacio entre widgets (antes quedaban pegados).
   Cubrimos tanto #sidebar como aside .widget por si el markup
   no siempre trae el id="sidebar" */
#sidebar,
aside{
  background: transparent !important;
}
#sidebar .widget,
aside .widget{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 34px !important;
  padding: 45px 10px 50px !important;
  position: relative !important;
  box-sizing: border-box !important;
}
#sidebar .widget:last-child,
aside .widget:last-child{
  margin-bottom: 0 !important;
}
#sidebar .widget *,
aside .widget *,
#sidebar .item,
aside .item,
#sidebar article,
aside article{
  background-color: transparent;
}
#sidebar .widget img,
aside .widget img,
#sidebar .item img,
aside .item img{
  border-radius: 12px;
}
/* Tag Cloud: centrar las etiquetas dentro del widget */
#sidebar .widget_tag_cloud .tagcloud,
aside .widget_tag_cloud .tagcloud,
#sidebar .tagcloud,
aside .tagcloud{
  text-align: center !important;
}
/* Filas dentro de un widget (ej. cada articulo relacionado, cada
   entrada de una lista) - mas aire entre una fila y la siguiente.
   Solo tocamos padding-top/bottom: el padding-left original reserva
   el espacio para la miniatura y no debe pisarse. */
#sidebar .widget > ul > li,
aside .widget > ul > li,
#sidebar .widget .item,
aside .widget .item,
#sidebar .widget article,
aside .widget article{
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--card-border) !important;
}
#sidebar .widget > ul > li:first-child,
aside .widget > ul > li:first-child,
#sidebar .widget .item:first-child,
aside .widget .item:first-child{
  padding-top: 4px !important;
}
#sidebar .widget > ul > li:last-child,
aside .widget > ul > li:last-child,
#sidebar .widget .item:last-child,
aside .widget .item:last-child{
  border-bottom: none !important;
  padding-bottom: 4px !important;
}
#single .next .button,
article.next .button,
article.prev .button{
  background: var(--grad-1) !important;
  border: none !important;
  color: #fff !important;
}

/* =====================================================
   16. AJUSTES VARIOS
===================================================== */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--card); border-radius: 10px; border: 2px solid var(--bg); }

/* Iconos SVG (calendario, comentarios) usados en el meta de los posts */
article.default svg, #header svg, #footer svg{ fill: currentColor !important; }

/* Ocultar el credito "WordPress Theme by EstudioPatagon" del footer */
.epcl-theme-author{
  display: none !important;
}

/* Insignia de calificacion en las tarjetas del listado (promedio de
   1.0 a 5.0, solo se muestra si ya tiene al menos una calificacion).
   Esta version vive dentro de la fila ".meta" (fecha/comentarios) y
   solo aparece si esa fila esta activada en las opciones del tema. */
.bubblestudio-card-rating{
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  color: var(--text) !important;
  font-weight: 700;
  font-size: 13px;
}
.bubblestudio-card-rating::before{ content: none; }

/* Insignia de calificacion superpuesta sobre la miniatura de la
   tarjeta (esquina superior izquierda, opuesta a la etiqueta de
   categoria). A diferencia de la de arriba, esta SIEMPRE se muestra
   si el post ya tiene calificaciones, sin depender de que la fila de
   meta (fecha/comentarios) este activada - por eso se ve en layouts
   como el de "recursos" que no usan esa fila. ".epcl-card" ya tiene
   position:relative y overflow:hidden, asi que sirve de referencia
   para posicionar esto encima de la imagen. */
.bubblestudio-card-rating-badge{
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(5,5,12,0.72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: #f5b43c;
}

/* =====================================================
   14. RESPONSIVE / MOBILE
===================================================== */

/* Menu hamburguesa (fondo blanco + texto oscuro de fabrica) */
@media screen and (max-width: 1023px){
  #header nav{
    background: var(--card) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6) !important;
    /* El tema padre nunca le pone z-index a este panel (solo al
       icono de las 3 lineas que lo abre), asi que en ciertas
       combinaciones queda detras de las tarjetas de post o de las
       burbujas decorativas al abrirlo. Le damos una capa alta y
       propia para que siempre gane. */
    z-index: 9999 !important;
  }
  #header.menu-open{
    /* El contenedor del encabezado tambien necesita quedar por
       encima mientras el menu esta abierto, si no, el panel puede
       recortarse contra el borde de su propio padre. */
    z-index: 9998 !important;
  }
  #header nav ul.menu > li > a{
    color: var(--text-dim) !important;
  }
  #header nav ul.menu > li > a:hover,
  #header nav ul.menu > li.current-menu-item > a{
    color: var(--text) !important;
  }
  #header nav ul.sub-menu{
    background: var(--bg-2) !important;
    box-shadow: none !important;
  }
  #header nav ul.sub-menu li a{
    color: var(--text-dim) !important;
  }
  #header div.menu-mobile i{ color: var(--text) !important; }
}

/* Overlay de busqueda en mobile (traia fondo rojo) */
#search-lightbox .search-wrapper{
  background: var(--bg-2) !important;
  border: 1px solid var(--card-border) !important;
}

@media screen and (max-width: 767px){
  .epcl-card{ padding: 20px 20px 18px; }
  article.default{ margin-bottom: 20px; }

  div.filters{
    padding: 22px 20px !important;
    margin-bottom: 24px !important;
  }
  div.filters .grid-33,
  div.filters .alignright{
    padding: 0 !important;
  }

  .pagination div.nav > span,
  .pagination div.nav a{
    padding: 0 16px !important;
    font-size: 13px !important;
    margin: 0 4px 8px !important;
  }

  #footer .subscribe{ padding: 30px 20px !important; }
  #author:not(input){ margin-top: 30px !important; }
}

/* ---- Boton de Iniciar sesion / Mi dashboard en la barra de filtros ----
   "margin-left:auto" (truco clasico de flexbox) empuja este bloque
   hasta el extremo derecho DENTRO del mismo renglon que el buscador,
   ya centrado verticalmente por "align-items:center" de ".filters" de
   arriba - as no crece la altura de toda la barra ni queda pegado
   abajo, como pasaba con la version anterior (que lo mandaba a su
   propia linea con "clear:both"). */
.bubblestudio-auth-btn-wrap{
  margin-left: auto;
  margin-right: 22px;
  text-align: right;
}
/* Especificidad reforzada ("div.filters a.bubblestudio-auth-btn", no
   solo ".bubblestudio-auth-btn"): la regla generica de mas arriba
   ("div.filters a{ background: var(--card) !important; color:
   var(--text-dim) !important; ... }", pensada para los links de
   categoria/autor del buscador) tambien alcanza a este boton porque
   es un <a> dentro de ".filters", y por especificidad le ganaba a
   esta clase - por eso salia gris/plano en vez del degradado. */
div.filters a.bubblestudio-auth-btn{
  display: inline-block;
  padding: 10px 22px;
  border-radius: var(--radius-pill, 999px) !important;
  background: var(--grad-1, linear-gradient(90deg, #8b5cf6, #4f92ff)) !important;
  border: none !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  transition: filter .2s ease, transform .2s ease;
}
div.filters a.bubblestudio-auth-btn:hover{
  filter: brightness(1.12) !important;
  transform: translateY(-1px);
  color: #fff !important;
}
@media (max-width: 767px){
  /* En angosto, si no cabe junto al buscador, flex-wrap lo manda a su
     propia linea - ahi si queremos que ocupe todo el ancho y quede
     centrado, con su propio margen de arriba. */
  .bubblestudio-auth-btn-wrap{ width:100%; margin-left:0; margin-right:0; text-align:center; margin-top: 12px; }
  div.filters a.bubblestudio-auth-btn{ display:block; width:100%; box-sizing:border-box; }
}