/* ==========================================================
   Filtros que se ocultan al hacer scroll (solo escritorio, >= 1200px)
   - Al bajar para ver los recursos, los filtros se deslizan fuera,
     los recursos ocupan todo el ancho y las tarjetas pasan de 3 a 4 por fila
     (col-xl-3 de Bootstrap = 25%)
   - Al volver al inicio de la pagina reaparecen solos
   - Una pestana lateral "Filtros" permite mostrarlos en cualquier momento
   La logica (umbrales de scroll, estados) esta en filtros_autoocultar.js
   ========================================================== */

/* Tipografia de la pestana "Filtros": Alegreya Sans.
   Si la fuente ya se carga en otra hoja de estilos del sitio, se puede quitar esta linea. */
@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@500;700&display=swap');

/* Colores del asa (boton circular) y de la pestana "Filtros" */
:root {
  --filtros-naranja: #e98b35;         /* fondo en reposo */
  --filtros-naranja-hover: #ed7628;   /* fondo al pasar el mouse */
}

/* Por debajo de 1200px (filtros arriba, en horizontal) no se usa nada de esto */
.filtros-cerrar,
.filtros-linea,
.filtros-tab { display: none; }

@media (min-width: 1200px) {

  /* ---------- Columnas: los recursos se expanden al ocultarse los filtros ---------- */
  .filtros-fila > * {
    transition: flex-basis .7s cubic-bezier(.7, 0, .3, 1),
                max-width .7s cubic-bezier(.7, 0, .3, 1),
                padding .7s cubic-bezier(.7, 0, .3, 1),
                height .7s cubic-bezier(.7, 0, .3, 1);
  }
  .filtros-col {
    min-width: 0;
    overflow-x: clip;               /* lo que sale por la derecha se recorta (no rompe el sticky) */
  }
  /* Paso 1 (JS): fija la altura actual de la columna en px para poder animarla */
  .filtros-fila.filtros-medido > .filtros-col {
    height: var(--filtros-alto);
  }
  /* Paso 2: la columna se cierra tambien en alto; asi el panel oculto ya no
     deja un espacio en blanco al final de la pagina */
  .filtros-fila.filtros-colapsados > .filtros-col {
    flex-basis: 0%;
    max-width: 0%;
    padding-left: 0;
    padding-right: 0;
    height: 0;
    overflow-y: clip;
  }
  .filtros-fila.filtros-colapsados > :not(.filtros-col) {
    flex-basis: 100%;
    max-width: 100%;
  }
  /* Paso 3 (JS, al terminar la animacion): la columna oculta sale del layout por completo,
     asi no puede dejar ningun espacio en blanco debajo de las tarjetas */
  .filtros-fila.filtros-fuera > .filtros-col {
    display: none;
  }

  /* Tarjetas: con los filtros ocultos, de 3 (col-md-4) a 4 por fila (col-xl-3) */
  .filtros-fila.filtros-colapsados .carrera_recurso {
    flex: 0 0 25%;
    max-width: 25%;
  }
  /* El reacomodo de las tarjetas entra con un suave fundido (al ocultar y al mostrar) */
  .filtros-fila.filtros-reflujo .carrera_recurso {
    animation: filtrosTarjeta .6s ease both;
  }
  @keyframes filtrosTarjeta {
    from { opacity: .3; transform: scale(.96); }
    to   { opacity: 1;  transform: none; }
  }

  /* ---------- Panel: estado visible / oculto ---------- */
  #panel_filtros {
    min-width: var(--filtros-ancho, 0px);   /* conserva su ancho mientras la columna se cierra */
    transition: opacity .5s ease .1s, visibility 0s;
  }
  #panel_filtros.filtros-ocultos {
    opacity: 0;
    visibility: hidden;          /* evita que el teclado entre a enlaces ocultos */
    pointer-events: none;
    transition: opacity .5s ease .15s, visibility 0s linear .7s;
  }

  /* ---------- Linea vertical con asa en el borde izquierdo del panel ----------
     El JS deja un carril libre de 2.25rem a la izquierda del panel (padding en linea).
     Dentro de ese carril van la linea (a todo lo alto, con los extremos difuminados)
     y el asa: un circulo con chevron centrado sobre la linea, a media altura del panel
     (sin pasar de 40 % de la altura de la ventana, para que siempre quede a la vista).
     Todo queda dentro de la columna, que recorta lo que sale por los lados. */
  .filtros-linea {
    display: block;
    position: absolute;
    left: 14px;                         /* centro del asa (28 px / 2) */
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom,
                transparent,
                rgba(0, 0, 0, .18) 12%,
                rgba(0, 0, 0, .18) 88%,
                transparent);
    pointer-events: none;
  }
  .filtros-cerrar {
    position: absolute;
    left: 0;                            /* el asa (28 px) queda centrada sobre la linea */
    top: 50%;
    top: min(50%, 40vh);
    margin-top: -14px;                  /* centrado sin transform: el icono queda nitido */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--filtros-naranja);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  }
  .filtros-cerrar svg { width: 16px; height: 16px; }
  .filtros-cerrar:hover,
  .filtros-cerrar:focus-visible {
    background: var(--filtros-naranja-hover);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  }
  .filtros-cerrar:focus { outline: 0; }
  .filtros-cerrar:focus-visible { box-shadow: 0 0 0 3px rgba(0, 123, 255, .35); }

  /* ---------- Al volver a mostrarse: las "pastillas" entran en cascada ---------- */
  #panel_filtros.mostrando .carreras_menu a {
    animation: filtrosChip .45s cubic-bezier(.34, 1.56, .64, 1) both;
    animation-delay: calc(var(--i, 0) * 30ms);
  }
  @keyframes filtrosChip {
    from { opacity: 0; transform: translateX(18px) scale(.9); }
    to   { opacity: 1; transform: none; }
  }

  /* ---------- Pestana lateral (indicador de filtros ocultos) ---------- */
  .filtros-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    height: max-content;                /* con margin auto vertical queda centrado, sin usar transform */
    z-index: 1020;
    margin: auto 0;
    padding: .85rem .5rem;
    border: 1px solid rgba(0, 0, 0, .08);
    border-right: 0;
    border-radius: 14px 0 0 14px;
    background: var(--filtros-naranja);
    color: #fff;
    box-shadow: -6px 6px 18px rgba(0, 0, 0, .12);
    cursor: pointer;
    transform: translateX(110%);
    opacity: 0;
    visibility: hidden;
    transition: transform .4s ease-in,
                opacity .25s ease,
                visibility 0s linear .4s,
                padding .2s ease,
                box-shadow .2s ease,
                background .2s ease;
  }
  .filtros-tab.visible {
    transform: none;                          /* sale con un pequeno rebote; en reposo sin transform = texto nitido */
    opacity: 1;
    visibility: visible;
    transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) .45s,
                opacity .3s ease .45s,
                visibility 0s linear 0s,
                padding .2s ease,
                box-shadow .2s ease,
                background .2s ease;
  }
  .filtros-tab.visible:hover {
    padding-left: .85rem;
    box-shadow: -8px 8px 22px rgba(0, 0, 0, .18);
    background: var(--filtros-naranja-hover);
  }
  .filtros-tab:focus { outline: 0; }
  .filtros-tab:focus-visible { box-shadow: 0 0 0 3px rgba(0, 123, 255, .35); }

  .filtros-tab-txt {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 1rem;                    /* Alegreya Sans se ve mas chica que otras fuentes */
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
  }
  /* Navegadores que soportan sideways-lr leen el texto de abajo hacia arriba sin rotarlo
     (un texto rotado se dibuja con suavizado en escala de grises y se ve menos nitido) */
  @supports (writing-mode: sideways-lr) {
    .filtros-tab-txt {
      writing-mode: sideways-lr;
      transform: none;
    }
  }
  /* Punto con pulso (blanco sobre el fondo naranja): llama la atencion sin ser molesto */
  .filtros-tab-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
  }
  .filtros-tab-dot::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 50%;
    border: 2px solid currentColor;
    animation: filtrosPulso 1.8s ease-out infinite;
  }
  @keyframes filtrosPulso {
    from { transform: scale(1);   opacity: .8; }
    to   { transform: scale(3.2); opacity: 0; }
  }
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .filtros-fila > *,
  #panel_filtros,
  .filtros-tab {
    transition-duration: .01s !important;
    transition-delay: 0s !important;
  }
  .filtros-tab-dot::after,
  .filtros-fila.filtros-reflujo .carrera_recurso,
  #panel_filtros.mostrando .carreras_menu a {
    animation: none !important;
  }
}