/* ============================================================================
   dependencia-archive.css
   Estilos específicos del archive de /dependencias/ (sesión 2026-08-13).
   Se carga SOLO en el archive de dependencia (ver functions.php).

   Las styles de las cards (incluida la variante estándar refactorizada
   2026-08-13) están en palette.css → .card-info. Acá solo va el
   layout del archive: grid 3-col, search-filters bar, paginación,
   empty state, y los estilos de la barra de filtros.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Page-header: la barra de search/filters vive DENTRO del luntha-page-header
   (mismo patrón que educacion_continuada / asociaciones). Por eso
   neutralizamos el margin-bottom del card y dejamos que el spacing lo maneje
   el page-header (12px del title-row + 32px del page-header, = 44px entre
   el H1 y la siguiente <section>). Sin esto, el card sumaba 28px extra
   y se desincronizaba con el resto de archives. Sesión 2026-08-13.
   ---------------------------------------------------------------------------- */
.luntha-page-header .archive-search-filters {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------------------
   Grid 3-col forzado (no auto-fit) — solo en el archive de dependencia.
   En el grid default (modern-styles.css), auto-fit colapsa a 1 col bajo
   820px; aquí forzamos 3 → 2 → 1 con breakpoints explícitos.
   ---------------------------------------------------------------------------- */
.dependencia-archive .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
@media (max-width: 1200px) {
    .dependencia-archive .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .dependencia-archive .grid-3 { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
   Programa académico: misma grilla 3-col forzada (sesión 2026-08-14).
   El default de .grid-3 en modern-styles.css usa auto-fit minmax(260px, 1fr)
   que a 1600px de contenedor (ancho estándar del theme) mete 4 cards por
   fila. Para mantener consistencia visual con /dependencias/, forzamos
   exactamente 3 → 2 → 1 con los mismos breakpoints.
   ---------------------------------------------------------------------------- */
.programa-archive .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
@media (max-width: 1200px) {
    .programa-archive .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .programa-archive .grid-3 { grid-template-columns: 1fr; }
}


/* ============================================================================
   Search + filters bar
   Estilos del partial template-parts/archive-search-filters.php. Esta
   clase se aplica a nivel de la barra (.archive-search-filters), por
   lo que cualquier archive que incluya el partial hereda estos estilos.
   ============================================================================ */
.archive-search-filters {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 28px;
    box-shadow: 0 1px 3px rgba(15, 26, 43, 0.06);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
}
@media (max-width: 900px) {
    .archive-search-filters { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
   Layout --multi: cuando hay 2+ grupos de filtros (ej. archivo de archivos
   con Tipo + Mostrar) el grid default 1fr|auto queda muy alto porque el
   2do grupo desborda dentro de la columna `auto` a una nueva fila. Pasamos
   a una columna única donde el search ocupa el row 1 (full-width) y los
   grupos de filtros se apilan en rows siguientes. El card queda con una
   altura consistente con los archives canónicos (programa, dependencia).
   ---------------------------------------------------------------------------- */
.archive-search-filters--multi {
    grid-template-columns: 1fr;
    align-items: stretch;
}
.archive-search-filters--multi .archive-search {
    grid-column: 1 / -1;
}
.archive-search-filters--multi .archive-filters {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    row-gap: 8px;
}

.archive-search {
    position: relative;
    display: flex;
    align-items: center;
}
.archive-search__icon {
    position: absolute;
    left: 14px;
    width: 18px; height: 18px;
    color: #94a3b8;
    pointer-events: none;
}
.archive-search__input {
    width: 100%;
    padding: 12px 44px 12px 44px;
    font-size: 15px;
    border: 1.5px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #0c2444;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.archive-search__input::placeholder { color: #94a3b8; }
.archive-search__input:focus {
    outline: none;
    border-color: #3D7FCC;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(61, 127, 204, 0.15);
}
.archive-search__clear {
    position: absolute;
    right: 10px;
    width: 26px; height: 26px;
    border: 0;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    cursor: pointer;
    display: none;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}
.archive-search__input:not(:placeholder-shown) ~ .archive-search__clear { display: block; }
.archive-search__clear:hover { background: #cbd5e1; }

.archive-search__no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 14px 0 0;
    color: #94a3b8;
    font-size: 14px;
    display: none;
}
.archive-search__no-results.is-visible { display: block; }


/* ============================================================================
   Filter pills (genérico, varios grupos soportados)
   ============================================================================ */
.archive-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.archive-filters__group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.archive-filters__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #475569;
    margin-right: 4px;
}
.archive-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #0c2444;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
    line-height: 1.2;
}
.archive-pill:hover {
    border-color: #3D7FCC;
    color: #3D7FCC;
    background: #f0f6fc;
}
.archive-pill.is-active {
    background: #3D7FCC;
    border-color: #3D7FCC;
    color: #fff;
    box-shadow: 0 2px 8px rgba(61, 127, 204, 0.3);
}
.archive-pill__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    background: rgba(15, 26, 43, 0.08);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    color: inherit;
}
.archive-pill.is-active .archive-pill__count { background: rgba(255, 255, 255, 0.25); }
.archive-pill:hover:not(.is-active) .archive-pill__count { background: rgba(61, 127, 204, 0.15); }


/* ============================================================================
   Toolbar de la sección tree (educacion_continuada)

   Sesión 2026-08-20: aloja el filtro "Período" (3 pills: Próximos / Pasados /
   Todos) en la sección grid de educacion_continuada y su taxonomía,
   separado del card de search/filters que solo conserva "Tipo" para que
   el card superior mida ~81px como los archives canónicos. Mismo patrón
   estructural que el toolbar de /archivo/ (border-bottom separador, pills
   reusando .archive-pill) pero alineado a la izquierda y sin label — los
   pills se autoexplican visualmente.

   NOTA: este archivo se carga en TODOS los archives estándar (programa,
   dependencia, educacion_continuada, etc.), no solo en dependencia. Las
   reglas aquí son específicas del CPT educacion_continuada (clase
   .edu-continuada-tree-toolbar) y solo aplican donde se renderiza el
   partial `edu-continuada-periodo-toolbar.php`.

   El archivo `file-manager.css` no es buena ubicación para estas reglas
   porque solo se enqueua en páginas del CPT med_archivo (ver
   `med_archivo_enqueue_assets()` en `inc/shortcode-med-archivo.php`).
   ============================================================================ */
.edu-continuada-tree-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 4px;
}
.edu-continuada-tree-toolbar__pills {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.edu-continuada-tree-toolbar__label {
  /* Regla mantenida por compatibilidad hacia atrás (se renderizó label
     "Período" hasta sesión 2026-08-20). Vacía/innocua si no hay label. */
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7c7a72;
  margin-right: 2px;
}
@media (max-width: 600px) {
  .edu-continuada-tree-toolbar { justify-content: flex-end; }
  .edu-continuada-tree-toolbar__pills { width: 100%; }
}


/* ============================================================================
   Empty state (cuando no hay cards visibles)
   ============================================================================ */
.archive-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
    background: #fff;
    border: 1px dashed #e2e8f0;
    border-radius: 12px;
}
.archive-empty__icon {
    width: 48px; height: 48px;
    margin: 0 auto 12px;
    color: #cbd5e1;
}
.archive-empty h3 {
    margin: 0 0 6px;
    font-size: 18px;
    color: #475569;
    font-weight: 600;
}
.archive-empty p { margin: 0; font-size: 14px; }


/* ============================================================================
   Paginación client-side (sesión 2026-08-13)
   El JS de dependencia-archive.js inserta un <nav class="archive-pagination">
   justo después del .grid-3. Estilo consistente con .pagination-modern
   (legacy) y con la dirección de diseño del design system.
   ============================================================================ */
.archive-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 32px;
    padding: 8px 0;
}
.archive-pagination__btn,
.archive-pagination__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #0c2444;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s, transform .05s;
    text-decoration: none;
    user-select: none;
}
.archive-pagination__btn:hover:not(:disabled),
.archive-pagination__num:hover {
    border-color: #3D7FCC;
    color: #3D7FCC;
    background: #f0f6fc;
}
.archive-pagination__num.is-active {
    background: #1a3580;
    border-color: #1a3580;
    color: #fff;
    box-shadow: 0 2px 6px rgba(26, 53, 128, 0.25);
    cursor: default;
}
.archive-pagination__btn:active:not(:disabled),
.archive-pagination__num:active:not(.is-active) {
    transform: scale(0.97);
}
.archive-pagination__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #f8fafc;
    color: #94a3b8;
}
.archive-pagination__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 38px;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 700;
    user-select: none;
}
@media (max-width: 480px) {
    .archive-pagination__btn,
    .archive-pagination__num {
        min-width: 34px;
        height: 34px;
        padding: 0 10px;
        font-size: 13px;
    }
}