/*
Theme Name: SmartMag Child Custom CSS
Theme URI: https://smartmag.theme-sphere.com
Version: 1.0
Description: Archivo adicional de estilos personalizados para el tema hijo de SmartMag.
Author: Carlos Ernesto Marcial Olmedo
*/

/*
-------------------------------------------------------------------------------
Motivo de creación:
-------------------------------------------------------------------------------
Este archivo fue creado porque el archivo style.css del tema hijo no estaba
sobrescribiendo correctamente los estilos del tema padre.

Para asegurar que los estilos personalizados se apliquen de forma efectiva,
se decidió separarlos en este archivo y encolarlo con una prioridad mayor
a través del archivo functions.php.

De ahora en adelante, todos los estilos propios del sitio se colocarán aquí
para evitar conflictos con el tema padre y facilitar el mantenimiento.
-------------------------------------------------------------------------------
*/

/* 
Estructura:

1. =Restablecimientos y elementos predeterminados
 1.1. =Tipografía / Elementos
 1.2. =Principales ayudantes

2. =Estructura global
 2.1. =Cuadrícula

3. =Componentes y bloques
4. =Encabezado y navegación
5. =Widgets

6. =Contenido
 6.1. =Entrada individual
 6.2. =Página individual y otras páginas

7. =Barra lateral principal
8. =Pie de página
9. =Varios
10. =Formulario de Contacto
11. =Elementor
*/

/**
 * 1.1  =Tipografía / Elementos
 */

 /*Colores propios del Portal*/

 :root {
  --c-color-principal: #8c218e;
  --c-color-principal-opaco: rgba(140, 33, 142, 0.6); 
  --c-amarillo: #ffc107;
  --c-azul-oscuro: #003366;
  --c-verde-suave: #2ab391;
  --c-texto-claro: #f0f0f0;
}

/**
 * 4. =Encabezado y navegación
 * ----------------------------------------------------------------------------
 */


 /* Menu superrior - */
#menu-top-links{
padding: 3px;
}

#menu-top-links a{
	color: var(--c-color-principal);
	text-transform: uppercase;
}

#menu-top-links a:hover{
	color: var(--c-texto-claro);
	border-bottom: 3px solid var(--c-color-principal);
}

#menu-top-links .current-menu-item > a {
  color: var(--c-texto-claro);
		border-bottom: 3px solid var(--c-color-principal);
}

 /* Resaltado de la Fecha del dia - posicion menu superior- */

.h-date {
  color: var(--c-texto-claro);
  background-color: var(--c-color-principal);
  padding: 6px 12px;
  font-family: 'Arial', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1);
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 10px;
  text-transform: uppercase;
}

/* Menu Inferrior -*/

.smart-head-row-3 {
 border-bottom: 1px solid var(--c-color-principal-opaco);
 border-top: 1px solid var(--c-color-principal-opaco);
}

#menu-main-menu-1 > li {
	margin-left:7px;
}

/* Submenu del menu Inferrior*/
.navigation .menu ul,
.navigation .menu .sub-menu {
    padding: 0px 0px;
    border-top: 1px solid var(--c-color-principal);
}

.navigation .menu .sub-menu {
  max-height: 500px; 
  font-size: 13px; 
}

.navigation .menu .sub-menu li {
  padding: 2px 10px;
  line-height: 1.2;
}

.navigation .menu .sub-menu a {
  display: block;
  font-size: 13px;
  padding: 5px 8px;
  color: var(--c-nav-text);
  border-radius: 4px;
  
}
/**
 * 5. =Widgets
 * ----------------------------------------------------------------------------
 */

 /* Iconos Sociales Barra lateral*/

 /* Texto de iconos -tamaño */
.spc-social-follow {
  --s-fsize: 14px;
}


/* Css de iconos -contenedor*/

.spc-social-follow .service-link {
  display: flex;
  border-radius: 22px;
  line-height: 44px;
  background: var(--c-texto-claro);
  color: var(--c-color-principal);
  font-weight: 600;
  font-size: var(--s-fsize);
  vertical-align: middle;
}

/* Css de iconos -  icono*/
.spc-social-follow .the-icon {
  display: flex;
  align-items: center;
  justify-content: center;
	margin-right:8px;
  width: 40px;
  height: 40px;
  font-size: 20px;
  color: var(--c-texto-claro);
  background: var(--c-color-principal);
  border-radius: 50%;
  box-shadow: 0 2px 6px 
}

.spc-social-follow .service-link:hover {
  background-color: var(--c-color-principal); 
  color: var(--c-texto-claro);
}

/*
 .the-icon.tsi {
  font-size: 24px;
  border: 1px solid transparent;
  border-radius: 50%;
  background-color: var(--c-color-principal);
}

.spc-social-follow .the-icon {
  color: var(--c-texto-claro); 
}

.spc-social-follow .service-link {
  background-color: var(--c-texto-claro);
/*  padding: 10px;*
  color:  var(--c-color-principal);
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s ease;
  border-bottom: 3px solid  var(--c-color-principal);
  font-size: 16px;
  width: 160px;
}


.spc-social-follow .service-link:hover {
  background-color: var(--c-color-principal); 
  color: var(--c-texto-claro);
}

.spc-social-follow .service-link:hover .the-icon {
  color: var(--c-texto-claro);
}
*/

/**
 * 6.1. =Entrada individual
 * ----------------------------------------------------------------------------
 */

/*Subtitulo de la publicacion*/

/*.s-head-modern .sub-title {
  margin-bottom: 15px;
  margin-top: -3px;
  font-size: 32px;
}*/

/* Apartado de publicaciones (informacion general de edicion y visualizacioon*/
.post-meta-items{
	font-size: 17px;
	line-height: 0.8;
}

/* Seccion de iconos de compartir publicacion */

/* Contenedor de iconos de publicaciones*/
.post-share-bot .share-links {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  --spc-social-space: 16px;
}

/* Css de mensaje de Share*/
.post-share-bot .info {
  font-size: 13px;
  font-weight: 500;
  display: inline-block;
  margin-right: 10px;
  text-transform: uppercase;
  color: var(--c-color-principal);
}

@media (max-width: 767px) {
  .post-share-bot .info {
    display: none;		
  }
}

/*css de iconos de redes sociales*/

.post-share-bot .share-links a {
  flex: 0 0 auto;
  padding: 0;
  width: 42px;
  height: 42px;
  line-height: 32px;
  border-radius: 50%;
  color: var(--c-color-principal);
  background-color: var(--c-texto-claro-);
  font-size: 24px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* sombra suave */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}


.post-share-bot .share-links a:hover {
  filter: brightness(110%);
  color: var(--c-color-principal);
  opacity: 1;
  transform: translateY(-5px); /* Desplaza el ícono hacia arriba */
  box-shadow: 0 0 12px 2px rgba(140, 33, 142, 0.6); /* sombra púrpura más intensa */
}

/**
 * 8. =Pie de pagina
 * ----------------------------------------------------------------------------
 */

 /* menu inferrior*/

.classic-footer-lower .menu {
  flex-wrap: wrap;
  margin-bottom: -7px;
  font-size: 16px;

}

/**
*  10 =Formulario de Contacto
*----------------------------------------------------------------------------
 */

 /* Etiquetas de labels*/
.wpcf7 label {
  font-weight: 700;
  color: var(--c-color-principal);
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  text-transform: capitalize;
  font-family: 'Poppins'
}

/* Espacio debajo de cada campo */
.wpcf7 p {
  margin-bottom: 20px;
}

/*Campo de texto*/
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  transition: border-color 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.4); /* Negro con opacidad del 40% */
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
  border: 2px solid var(--c-color-principal); 
  outline: none;
}

/* Boton de Enviar */
.wpcf7 input[type="submit"] {
  background-color: var(--c-color-principal);
}

/**
*  10 =Elemtor
*----------------------------------------------------------------------------
 */

 /* Iconos de redes sociales */


 .elementor-social-icon {
  border: 2px solid #8c218e;
  border-radius: 50%;
  background: #fff;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* sombra gris suave */
}

.elementor-social-icon:hover {
  box-shadow: 0 0 12px #8c218e; /* sombra morada al pasar el mouse */
  background-color: #8c218e;    /* fondo también se vuelve morado */
  transform: scale(1.1);
}

.elementor-social-icon svg {
  fill: #8c218e;
  transition: fill 0.3s ease;
}

.elementor-social-icon:hover svg {
  fill: #fff;
}