/* Estilos para los iconos de expandir/colapsar categorías */

.com-content-categories.categories-list a,
.com-content-categories.categories-list span.category-no-link {
  font-size: 13px;
}

.com-content-categories.categories-list button {
  padding: 8px 12px;
}

/* Indentación clara para subcategorías */
.com-content-categories__children {
  padding-left: 25px;
  margin-top: 5px;
  border-left: 1px dashed #ddd; /* Línea guía vertical sutil */
  margin-left: 15px;
}

.com-content-categories__item {
  margin-bottom: 8px;
  padding-top: 5px;
}

/* Estilos para los iconos de expandir/colapsar categorías */

/* Refinamiento del botón +/- */
.com-content-categories__item-title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.com-content-categories.categories-list button {
  background-color: #6c757d;
  border: none;
  border-radius: 4px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.com-content-categories.categories-list button:hover {
  background-color: #5a6268;
}

/* Estilos base para los iconos */
[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Icono de Plus (+) */
.icon-plus:before {
  content: "+";
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
}

/* Icono de Minus (-) */
.icon-minus:before {
  content: "−";
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
}

/* Alternativa con símbolos Unicode más elegantes */
/* Descomenta estas líneas si prefieres estos símbolos */
/*
.icon-plus:before {
  content: "\002B";
  font-size: 14px;
}

.icon-minus:before {
  content: "\2212";
  font-size: 14px;
}
*/

/* Alternativa con caracteres especiales */
/* Descomenta si prefieres flechas */
/*
.icon-plus:before {
  content: "\25BC";
  font-size: 12px;
}

.icon-minus:before {
  content: "\25B2";
  font-size: 12px;
}
*/

/* ============================================
   ESTILOS PARA EL BOTÓN "EXPANDIR/CONTRAER TODO"
   ============================================ */

.categories-toggle-all-wrapper {
  margin: 15px 0 20px 0;
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
}

/* Corregir el botón superior de mostrar más */
.categories-toggle-all-wrapper #toggle-all-categories {
  display: inline-flex; /* Asegura que el contenido se alinee bien */
  align-items: center;
  width: auto; /* Evita que se estire al 100% */
  margin-bottom: 10px;
}

/* Evitar que la línea guía vertical suba hasta el botón de arriba */
.com-content-categories
  > .com-content-categories__item
  > .com-content-categories__children {
  border-left: none; /* Quita la línea en el primer nivel raíz */
  margin-left: 0;
}

#toggle-all-categories {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #ccc;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
}

#toggle-all-categories:hover {
  background-color: #f5f5f5;
  border-color: #999;
}

#toggle-all-categories:active {
  background-color: #e8e8e8;
}

#toggle-all-categories.expanded {
  background-color: #f0f0f0;
  border-color: #999;
}

#toggle-all-categories .toggle-icon {
  display: inline-block;
  margin-right: 8px;
  font-weight: bold;
  font-size: 16px;
  min-width: 14px;
  text-align: center;
}

#toggle-all-categories .toggle-text {
  display: inline-block;
}

/* Responsive: texto más corto en móviles */
@media (max-width: 480px) {
  #toggle-all-categories {
    font-size: 13px;
    padding: 6px 12px;
  }

  .categories-toggle-all-wrapper {
    margin: 10px 0 15px 0;
  }
}

/* Mejora de interactividad en los títulos con link */
.com-content-categories__item-title a:not(.category-toggle-link) {
  color: #333;
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: 500;
}

.com-content-categories__item-title a:not(.category-toggle-link):hover {
  color: #7e2982; /* Tu color púrpura corporativo */
  text-decoration: underline;
}

/* 1. Títulos que llevan a IMÁGENES (Color distintivo y puntero de mano) */
.category-view-link {
  color: #7e2982 !important; /* Tu púrpura corporativo */
  font-weight: 600;
  text-decoration: none;
}

.category-view-link:hover {
  text-decoration: underline;
}

/* 2. Títulos que solo DESPLIEGAN (Color neutro pero con puntero) */
.category-toggle-title {
  color: #333 !important;
  text-decoration: none;
  cursor: pointer;
}

.category-toggle-title:hover {
  color: #000 !important;
}

/* 3. Títulos sin ninguna acción (Texto plano) */
.category-no-link {
  color: #999;
  cursor: default;
}

/* ============================================
   BUSQUEDA DE IMAGENES
   ============================================ */
/* 1. Contenedor de filtros en cuadrícula (2 columnas en escritorio) */
#finder-filter-window .filter-branch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  padding: 15px 0;
}

/* 2. Estilo de los bloques de control */
#finder-filter-window .control-group {
  margin-bottom: 0; /* El gap del grid ya maneja el espacio */
}

/* 3. Etiquetas (Labels) más profesionales */
#finder-filter-window .control-label label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: #495057;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 4. Estilo moderno para los Selects */
#finder-filter-window select.form-select.advancedSelect {
  width: 100%;
  height: auto;
  padding: 10px 15px;
  border: 1px solid #ced4da;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 0.95rem;
  color: #333;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}

/* 5. Efecto Focus con el color naranja del botón "Buscar" */
#finder-filter-window select.form-select.advancedSelect:focus {
  border-color: #ff5a3d; /* Ajustado al naranja de tu captura */
  box-shadow: 0 0 0 0.25rem rgba(255, 90, 61, 0.2);
  outline: none;
}

/* 6. Mejorar la caja de ejemplos (Tips de búsqueda) */
.com-finder__filter + div,
#finder-filter-window ~ div[style*="border"] {
  background: #f8f9fa;
  border: none !important;
  border-left: 5px solid #ff5a3d !important;
  border-radius: 6px;
  padding: 20px !important;
  margin-bottom: 30px;
  font-size: 0.9rem;
  color: #666;
}

/* 7. Responsividad para móviles (1 columna) */
@media (max-width: 768px) {
  #finder-filter-window .filter-branch {
    grid-template-columns: 1fr;
  }
}
/* 8. Ocultar bloques de Tipo, Autor y Categoría */
#finder-filter-window .control-group:has(#tax-type),
#finder-filter-window .control-group:has(#tax-author) {
  display: none;
}

/***============================================
   ESTILOS PARA ARTICULOS
   ============================================ */

/* Contenedor principal del artículo */
.item-page {
  max-width: 900px;
  margin: 0 auto;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #333;
  line-height: 1.6;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

/* Imagen principal y contenedor */
.entry-image.full-image {
  margin-bottom: 30px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.entry-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Encabezado y Título */
.entry-header h1 {
  font-size: 1.8rem;
  color: #004a87; /* Azul médico/institucional */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 15px;
  border-left: 5px solid #004a87;
  padding-left: 15px;
}

/* Categoría */
.category-name {
  font-size: 0.9rem;
  background: #f0f4f8;
  padding: 8px 12px;
  border-radius: 4px;
  color: #555;
  margin-bottom: 25px;
}

.category-name a {
  color: #d9534f; /* Color para destacar la categoría */
  text-decoration: none;
  font-weight: 600;
}

/* Lista de campos técnicos (Fields Container) */
.fields-container {
  list-style: none;
  padding: 0;
  margin: 30px 0;
  display: grid;
  gap: 15px;
}

.field-entry {
  background: #fdfdfd;
  border: 1px solid #eee;
  padding: 15px;
  border-radius: 6px;
  transition: transform 0.2s;
}

.field-entry:hover {
  background: #f9f9f9;
}

.field-label {
  display: block;
  font-weight: bold;
  color: #004a87;
  font-size: 0.85rem;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.field-value {
  display: block;
  font-size: 1rem;
}

/* Descripción de la morfología (Cuerpo del artículo) */
.com-content-article__body {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 6px;
  border-top: 3px solid #dee2e6;
  font-style: italic;
  font-size: 0.95rem;
  color: #444;
}

/* Ocultar el título repetido si es necesario */
.field-entry.titulo {
  display: none;
}

/* Compartir en redes (Helix Social) */
.helix-social-share {
  margin-top: 40px;
  text-align: center;
}

.helix-social-share ul {
  list-style: none;
  display: inline-flex;
  gap: 15px;
  padding: 0;
}

.helix-social-share a {
  color: #aaa;
  font-size: 1.2rem;
  transition: color 0.3s;
}

.helix-social-share a:hover {
  color: #004a87;
}

/* 1. Seleccionamos específicamente el párrafo que sigue al SEGUNDO título h4 */
.com-content-article__body h4:nth-of-type(2) + p {
  display: block !important;
  column-count: 3 !important; /* Tres columnas */
  column-gap: 40px !important; /* Espacio entre ellas */
  column-rule: 1px solid #eee !important; /* Línea divisoria sutil */

  /* Evitamos que el padding lateral rompa el diseño de columnas */
  padding-left: 0 !important;
  margin-top: 20px !important;

  /* Para que los nombres no se corten a la mitad entre columnas */
  orphans: 3;
  widows: 3;
}

/* 2. Ajuste para tablets (2 columnas) */
@media (max-width: 992px) {
  .com-content-article__body h4:nth-of-type(2) + p {
    column-count: 2 !important;
  }
}

/* 3. Ajuste para móviles (1 sola columna) */
@media (max-width: 600px) {
  .com-content-article__body h4:nth-of-type(2) + p {
    column-count: 1 !important;
    column-rule: none !important;
  }
}

/* Opcional: Limpiar los espacios vacíos del final que ensucian el diseño */
.com-content-article__body p:empty,
.com-content-article__body p:has(br:only-child) {
  display: none !important;
}

/* ============================================
   ESTILOS PARA EL FOOTER
   ============================================ */
/* 1. Títulos en Blanco */
#sp-footer h3.sp-module-title {
  color: #ffffff !important;
  text-align: left !important;
}

/* 2. Alineación a la izquierda de todos los elementos */
#sp-footer .sp-column,
#sp-footer .sp-module-content,
#sp-footer ul.nav.mod-list {
  text-align: left !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  align-items: flex-start !important; /* Por si el contenedor es flex */
}

/* 3. Asegurar que los items de la lista no tengan centrado interno */
#sp-footer ul.nav.mod-list li {
  width: 100%;
  text-align: left !important;
  display: block !important;
}

#sp-footer ul.nav.mod-list li a {
  text-align: left !important;
  display: block !important;
  padding-left: 0 !important;
}

/* 4. Ajuste del Copyright para que también siga la alineación izquierda */
#sp-footer .sp-copyright {
  text-align: left !important;
  display: block;
  margin-top: 20px;
}

/* 5. Ajuste del Banner para que no flote al centro */
#sp-footer4 .mod-custom {
  text-align: left !important;
}

#sp-footer4 img {
  margin-left: 0 !important;
}

/* ============================================
   ESTILOS PARA CATEGORÍAS (BLOG)
   ============================================ */
.view-category .blog article.item.column- ul.fields-container {
  display: none;
}
/* Estilo minimalista para el contador de imágenes (13) */
.view-categories span.badge.bg-info {
  background-color: #f0f0f0 !important;
  color: #666 !important;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 5px;
  border: 1px solid #e0e0e0;
}

.site #sp-top-bar {
  background-color: #7e2982;
}

/* botones portfolio */
.sp-simpleportfolio-description p a {
  font-size: 100%;
  line-height: 1.4;
  border-color: #7e2982;
  background-color: #7e2982;
  color: #fff;
  outline: 0;
}
.sp-simpleportfolio-description p a {
  -webkit-transition:
    color 400ms,
    background-color 400ms,
    border-color 400ms;
  -moz-transition:
    color 400ms,
    background-color 400ms,
    border-color 400ms;
  -o-transition:
    color 400ms,
    background-color 400ms,
    border-color 400ms;
  transition:
    color 400ms,
    background-color 400ms,
    border-color 400ms;
  padding: 8px 28px;
  margin-right: 3px;
  outline: 0;
}
.sp-simpleportfolio-description p a:hover {
  background-color: #ebcfe6;
  color: #7e2982;
  border: #000;
}

img.search {
  max-width: 200px;
}

/* Estilo para los elementos del breadcrumb que no tienen link */
.no-link-breadcrumb {
    color: #666; /* Un color más tenue que el link activo */
    cursor: default;
    font-weight: normal;
}