/*
=================================================================
 ARCHIVO DE ESTILOS PERSONALIZADO PARA EL BLOG DE CIBERSEGURIDAD
=================================================================
*/


/*
 * =================================
 * ESTILOS DEL ENCABEZADO (HEADER)
 * =================================
 */

/* 1. Aplicamos la imagen de fondo SOLAMENTE al encabezado */
header .bg-black {
  /* La ruta a tu imagen */
  background-image: url('/images/CiberRedes.jpg') !important;
  background-color: transparent !important;

  /* Ajustes para que la imagen se vea bien */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 2. Cambiar el color del título grande y añadir una sombra para máxima legibilidad */
.light-silver {
    color: #EAEAEA !important; /* Mantenemos un color de letra claro */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Sombra para contraste */
}

/* 3. Estilos para el bloque con tu nombre y LinkedIn en la barra de navegación */
.name-linkedin-container {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  padding: 0.5rem 1rem; /* Añade espacio para separarlo de la esquina */
}

/* 4. Tu nombre con el tamaño ajustado */
.nav-name {
  font-size: 1rem;
  font-weight: 500;
  color: #F5F5F5;
}

/* ===> AÑADE ESTA NUEVA REGLA AQUÍ <=== */
/* Tu profesión con letra más pequeña */
.nav-title {
  font-size: 0.85rem;      /* Más pequeña que el nombre (1rem) */
  font-weight: 300;        /* Una letra más fina (light) para que no compita con el nombre */
  color: #CCCCCC;          /* Un gris claro, un poco menos prominente que el nombre */
  margin-top: 2px;         /* Un pequeño espacio para separarlo del nombre */
}

/* 5. El enlace de "LinkedIn" (que contiene el icono y el texto) */
.name-linkedin-container a {
  color: #00E5FF;
  font-size: 0.8rem;
  font-weight: bold;
  text-decoration: none;
  display: flex;
  align-items: center;
  margin-top: 2px;
}

/* 6. El icono SVG de LinkedIn */
.linkedin-icon {
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 5px;
  fill: currentColor; /* El icono hereda el color del enlace */
}

/* 7. Efecto hover para el enlace de LinkedIn */
.name-linkedin-container a:hover {
  text-decoration: underline;
  color: #FFFFFF;
}


/*
 * =================================
 * ESTILOS DEL CONTENIDO PRINCIPAL
 * =================================
 */

/* 1. Color para los títulos de los posts en la PÁGINA PRINCIPAL */
.athelas a {
  color: #2A7AE2 !important; /* Azul profesional */
}
.athelas a:hover {
  color: #5599FF !important;
  opacity: 1;
}

/* 2. Tamaño de letra para el texto DENTRO de un post individual */
body.single .lh-copy {
  font-size: 1.15rem; /* Letra grande para leer */
  line-height: 1.7;
}

/* 3. Tamaño de letra para el RESUMEN en la PÁGINA PRINCIPAL */
body.list .lh-copy {
  font-size: 0.95rem; /* Letra más pequeña para el resumen */
  line-height: 1.6;
}


/*
 * =================================
 * ESTILOS DEL PIE DE PÁGINA (FOOTER)
 * =================================
 */

/* 1. Fondo negro sólido para el footer */
footer.bg-black {
  background-image: none !important;
  background-color: #000000 !important;
}

/* 2. Color del texto del copyright en el footer */
footer .white-70 {
  color: #F5F5F5 !important;
  opacity: 1 !important; /* Forzamos opacidad al 100% para que se lea bien */
}

/*
 /*
 * =============================================
 * ESTILOS DEFINITIVOS V2 PARA EL TAMAÑO DE LA LETRA
 * =============================================
 */

/* 1. Estilo para el texto DENTRO de un post individual (letra grande) */
.single .f6.f5-l.lh-copy {
  font-size: 1.15rem !important;
  line-height: 1.7 !important;
}

/* 2. Estilo para el resumen en la PÁGINA PRINCIPAL (letra pequeña) */
.list .f6.f5-l.lh-copy {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}



/*
 * =========================================================
 * ESTILOS PARA EL MENÚ DE NAVEGACIÓN DESPLEGABLE (DROPDOWN)
 * =========================================================
 */

/* Contenedor principal del menú */
.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* Pone los elementos principales en horizontal */
  align-items: center;
}

/* Cada elemento del menú principal (ej. "Inicio", "Conceptos Clave") */
.nav-menu-item {
  position: relative; /* Clave para posicionar el sub-menú debajo */
  margin-left: 1.5rem; /* Espacio entre los elementos del menú */
}

/* Estilo de los enlaces y textos del menú principal */
.nav-menu-item a,
.nav-menu-item span {
  color: #F5F5F5;
  text-decoration: none;
  font-weight: 500;
  padding: 10px 5px;
  display: block;
  cursor: default; /* Pone el cursor normal en los no-enlaces */
}
.nav-menu-item a:hover {
  color: #00E5FF; /* Color al pasar el ratón */
}

/* El sub-menú (el dropdown) - OCULTO por defecto */
.sub-menu {
  display: none; /* ¡Aquí lo ocultamos! */
  position: absolute;
  top: 100%; /* Lo posiciona justo debajo del elemento padre */
  left: 0;
  background-color: #1a1d24; /* Un fondo oscuro semitransparente */
  list-style: none;
  padding: 10px 0;
  margin: 0;
  min-width: 250px; /* Ancho mínimo del desplegable */
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5); /* Sombra para darle profundidad */
  z-index: 1000; /* Asegura que se muestre por encima de todo */
}

/* Estilo de los enlaces dentro del sub-menú */
.sub-menu-item a {
  padding: 8px 15px;
  white-space: nowrap; /* Evita que el texto se parta en dos líneas */
}

/* ¡LA MAGIA! Mostramos el sub-menú cuando pasamos el ratón sobre su padre */
.nav-menu-item.has-children:hover > .sub-menu {
  display: block; /* ¡Aquí lo mostramos! */
}



/*
 * =========================================================
 * AJUSTE DE ALTURA PARA EL ENCABEZADO (HERO BANNER)
 * =========================================================
 */

/*
 * Reducimos el relleno inferior (padding-bottom) en pantallas grandes
 * para hacer el encabezado más compacto.
 */
.pb6-l {
  padding-bottom: 3rem !important; /* El valor original es 8rem. ¡Prueba con 3rem o 4rem! */
}



table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 1em;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
}
th {
  background-color: #f4f4f4;
}
tr:nth-child(even) {
  background-color: #fafafa;
}
tr:hover {
  background-color: #f1f1f1;
}