/* Estilos para el menú desplegable */
:root {
  --color-primario: #141774;
  --color-hover: #0d1261;
  --color-texto: #777;
}

.md-nav {
  background-color: #ffffff;
  color: var(--color-texto);
}

.md-nav__title {
  color: var(--color-primario);
  font-size: 1.2rem;
  padding: 10px 15px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}

.md-nav__list {
  padding: 0;
  margin: 0;
}

.md-nav__item {
  list-style: none;
}

.md-nav__link {
  color: var(--color-texto);
  text-decoration: none;
  padding: 10px 15px;
  display: block;
  font-size: 14px;
  border-bottom: 1px solid #ddd;
  transition: color 0.2s ease;
}

.md-nav__link:hover,
.md-nav__item--active > .md-nav__link {
  color: var(--color-hover);
  font-weight: bold;
}

.md-nav__toggle {
  display: none;
}

.md-nav--primary {
  border-right: 1px solid #ddd;
}

/* Font Awesome icons */
.md-nav__link::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-right: 10px;
  content: "\f105"; /* Arrow icon as default */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .md-nav--primary {
    display: block;
    background-color: #ffffff;
    color: var(--color-texto);
  }

  .md-nav__list {
    display: block;
    padding: 0;
    overflow-y: auto;
    max-height: 70vh;
  }

  .md-nav__toggle {
    display: block;
    background-color: var(--color-primario);
    color: #fff;
    padding: 10px;
    text-align: center;
  }

  .md-nav__toggle:checked + .md-nav__list {
    display: block;
  }

  .md-nav__link {
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }
}


/* Estilos para los campos de entrada */
.input-text {
    font-family: inherit;
    border-radius: 4px;
    outline: 0;
    background: #fff;
    border: 1px solid #eee;
    padding: 13px 20px;
    color: #373737;
    font-size: 16px;
    height: 45px;
    width: 100%;
}

.input-text::placeholder {
    color: #d3d3d3;
}

/* Estilos para los íconos personalizados */
.kb-icon {
    font-family: 'cat-icon';
    font-size: 1.125rem;
    color: inherit;
    text-decoration: inherit;
    text-rendering: optimizeLegibility;
    text-transform: none;
    font-style: normal;
    display: inline-block;
    margin: 0 .2em;
    width: 1em;
    text-align: center;
}

.kb-icon-xsmall { font-size: .75rem; }
.kb-icon-small { font-size: .812rem; }
.kb-icon-medium { font-size: .937rem; }
.kb-icon-large { font-size: 1.25rem; }
.kb-icon-xlarge { font-size: 2rem; }
.kb-icon-xxlarge { font-size: 3rem; }

/* Paginación */
#pagination-container {
    width: 100%;
    background: #fff;
    border: 1px solid #eee;
    padding: 21px 33px;
    text-align: center;
    margin-bottom: 26px;
    border-radius: 5px;
}

.page-button {
    font-size: 16px;
    height: 40px;
    padding: 0 8px;
    margin: 0;
    color: #9c9aa6;
    display: flex;
    align-items: center;
}

.page-button.active {
    color: #373737;
    font-weight: 700;
}

.page-button:hover {
    color: var(--text-color);
    background: var(--primary-color);
    border-radius: 5px;
}

/* Títulos y subtítulos */
.title {
    font-weight: 700;
    font-size: 23px;
    text-align: center;
    color: #373737;
}

.sub-title {
    font-weight: 400;
    font-size: 15px;
    text-align: center;
    color: #373737;
}

/* Avatares de autores */
.authors-avatar {
    display: flex;
    align-items: flex-start;
}

.author-avatar {
    width: 32px;
    height: 32px;
    border: 1px solid #fff;
    position: relative;
    z-index: 3;
    background: #fff;
    border-radius: 3px;
}

.author-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 3px;
}

/* Breadcrumbs */
#breadcrumbs {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

#breadcrumbs .divider {
    margin: 0 13px;
    display: inline-flex;
}

#breadcrumbs .category-crumb {
    display: flex;
    align-items: center;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    #pagination-container {
        padding: 20px;
    }

    #breadcrumbs {
        padding: 0 20px;
        margin-bottom: 20px;
    }
    
    .category-crumb, .current-path, .divider {
        display: none !important;
    }
    
    .last-path {
        display: block !important;
    }
    
    .main-category {
        display: flex !important;
    }
    
    .link {
        display: flex;
        align-items: center;
    }
    
    .link .icon-wrapper {
        margin-right: 5px;
    }
    
    .rtl .link .icon-wrapper {
        margin-left: 5px;
        margin-right: 0;
    }
}

/* Header Styling */
/* Header Styling */
header {
    background-color: #141774 !important;; /* Fondo azul */
    color: #f7f7f9; /* Texto blanco */
    padding: 5px 0; /* Espaciado reducido */
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

header .md-header__title {
    font-size: 1.5rem; /* Tamaño reducido */
    font-weight: 700; /* Texto en negrita */
    margin: 0;
}

header .md-header__nav {
    display: inline-block;
    margin-top: 5px; /* Espaciado reducido */
}

header .md-header__link {
    color: #f7f7f9; /* Texto blanco */
    text-decoration: none; /* Sin subrayado */
    font-size: 1rem; /* Tamaño estándar */
    margin-left: 15px;
}

header .md-search__input {
    background: #f7f7f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 10px; /* Espaciado reducido */
    font-size: 14px;
    color: #3489ff; /* Texto azul */
    margin-left: 0px;
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    header {
        text-align: left;
    }

    header .md-header__title {
        font-size: 1.2rem;
    }

    header .md-header__nav {
        display: block;
        margin-top: 10px;
    }

    header .md-search__input {
        width: 100%;
        margin: 10px 0 0 0;
    }
}



/* Footer Styling */
footer {
    background-color: #141774; /* Fondo azul oscuro */
    color: #ffffff; /* Texto blanco */
    padding: 5px 0;
    text-align: center;
    font-family: 'Arial', sans-serif;
}

footer .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    max-width: 1000px;
    flex-wrap: wrap;
}

footer .col-lg-4 {
    flex: 1;
    padding: 0 5px;
    margin-bottom: 5px;
    min-width: 280px;
}

footer .fa {
    color: #ffffff; /* Iconos en blanco */
    font-size: 14px;
    margin-right: 5px;
}

footer .span-bold {
    font-weight: 600;
    color: #ffffff; /* Texto en blanco */
    font-size: 13px;
}

footer .col-7 {
    text-align: left;
    font-size: 13px;
    line-height: 1.2;
}

footer a {
    color: #ffffff; /* Enlaces en blanco */
    text-decoration: none;
    font-size: 13px;
}

@media (max-width: 768px) {
    footer .row {
        flex-direction: column;
        align-items: flex-start;
    }

    footer .col-5, footer .col-7 {
        text-align: left;
        width: 100%;
    }

    footer .col-lg-4 {
        margin-bottom: 10px;
    }
}

/* Categorias en inicio */
:root {
  --color-primario: #141774;
  --color-hover: #0d1261;
  --color-texto: #777;
}

#categories-block-wrapper {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  padding: 20px;
}

.category-block {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-block:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.link {
  text-decoration: none;
  color: var(--color-texto);
  display: block;
  padding: 20px;
}

.icon-wrapper {
  color: var(--color-primario);
  margin-bottom: 10px;
}

.icon-wrapper i {
  font-size: 36px;
}

.category-details .title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.category-details .total,
.category-details .time {
  font-size: 14px;
  color: var(--color-texto);
}

/* Aplica solo a los índices de las categorías */
.category-index #categories-block-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
}

.category-index .article-block {
  display: flex;
  align-items: center;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 5px;
  transition: background-color 0.3s ease;
}

.category-index .article-block:hover {
  background-color: #f0f0f0;
}

.category-index .icon-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e6f0ff;
}

.category-index .article-details {
  flex-grow: 1;
  margin-left: 15px;
}

.category-index .article-title {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.category-index .time {
  font-size: 0.85rem;
  color: #777;
}

.category-index .article-arrow {
  flex-shrink: 0;
}

.category-index .link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

/* Personalización del buscador */
.md-search__input {
    background-color: #ffffff; /* Fondo blanco para contraste */
    border: 1px solid #ddd; /* Borde sutil */
    border-radius: 25px; /* Bordes redondeados */
    padding: 7px 15px; /* Espaciado interno */
    font-size: 14px; /* Tamaño de fuente */
    color: #3489ff; /* Color de texto */
    transition: all 0.3s ease; /* Transición suave */
}

.md-search__input::placeholder {
    color: #a0a0a0; /* Color de placeholder */
}

.md-search__input:focus {
    outline: none; /* Sin borde al enfocar */
    border-color: #3489ff; /* Cambio de color al enfocar */
    box-shadow: 0 0 5px rgba(52, 137, 255, 0.5); /* Sombra suave */
}

.md-search__icon {
    color: #3489ff; /* Icono de búsqueda en azul */
    margin-right: 10px; /* Espaciado derecho */
}

.md-search__icon:hover {
    color: #0d1261; /* Cambio de color al pasar el ratón */
}

@media (max-width: 768px) {
    .md-search__input {
        width: 100%;
        margin-top: 10px; /* Separación superior en pantallas pequeñas */
    }
}