/* ------------------------------------------------------------------
    SINGLE RANKING
    Estilos para el custon post type 'rankings'
------------------------------------------------------------------ */
.single-ranking {
  /*! .wrapper */
  /* Footer */
  /* Para animaciones de carga */
}
.single-ranking .wrapper {
  padding: 0px;
  /* ====================== TITULO ====================== */
  /** CONTENIDO DEL POST **/
  /*! .container */
}
.single-ranking .wrapper .table_post_title {
  background: var(--c1);
  width: 100%;
  margin-bottom: 40px;
  padding: 10px 20px 1px 20px;
  text-align: center;
  position: relative;
  top: -1px;
  animation: slideBottom 1.5s ease-in;
  z-index: -1;
}
.single-ranking .wrapper .table_post_title h1 {
  color: var(--white);
  text-transform: uppercase;
}
.single-ranking .wrapper .container {
  outline: none;
  /* Animacion de carga de contenido */
  /* Titulo por defecto */
  /* ====================== AJUSTES ====================== */
  /*! .ajustes-ranking */
  /* ====================== TABLA ====================== */
  /*! .wdtscroll */
}
.single-ranking .wrapper .container .loading {
  position: relative;
}
.single-ranking .wrapper .container .loading:after {
  content: "";
  background: linear-gradient(90deg, #eee, #f9f9f9, #eee);
  background-size: 200%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  animation: loading 1s infinite reverse;
}
.single-ranking .wrapper .container h2.wpdt-c {
  display: none;
}
.single-ranking .wrapper .container #ajustes-ranking {
  margin-bottom: 28px;
  opacity: 1;
  animation: fadeIn 2s ease-in;
}
.single-ranking .wrapper .container #ajustes-ranking #sel-tb-gr, .single-ranking .wrapper .container #ajustes-ranking #sel-res-det, .single-ranking .wrapper .container #ajustes-ranking #sel-date {
  /* ============= ENLACES A CONTENIDO ============= */
  /* =================== VISTAS ==================== */
  /* ================== VERSIONES ================= */
}
.single-ranking .wrapper .container #ajustes-ranking #sel-tb-gr .opcion-body, .single-ranking .wrapper .container #ajustes-ranking #sel-res-det .opcion-body, .single-ranking .wrapper .container #ajustes-ranking #sel-date .opcion-body {
  height: 100%;
  border-radius: 0px var(--br-2) var(--br-2) var(--br-2);
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.single-ranking .wrapper .container #ajustes-ranking #sel-tb-gr .contenido-body a, .single-ranking .wrapper .container #ajustes-ranking #sel-res-det .contenido-body a, .single-ranking .wrapper .container #ajustes-ranking #sel-date .contenido-body a {
  background-color: var(--c1);
  width: 114px;
  border: 1px var(--c1) solid;
  border-radius: var(--br-2);
  color: var(--white);
  text-align: center;
  text-decoration: none;
  padding: 8px 14px;
  cursor: pointer;
  /* Iconos */
}
.single-ranking .wrapper .container #ajustes-ranking #sel-tb-gr .contenido-body a:first-child, .single-ranking .wrapper .container #ajustes-ranking #sel-res-det .contenido-body a:first-child, .single-ranking .wrapper .container #ajustes-ranking #sel-date .contenido-body a:first-child {
  margin-right: 16px;
}
.single-ranking .wrapper .container #ajustes-ranking #sel-tb-gr .contenido-body a:hover, .single-ranking .wrapper .container #ajustes-ranking #sel-res-det .contenido-body a:hover, .single-ranking .wrapper .container #ajustes-ranking #sel-date .contenido-body a:hover {
  background: var(--c1-l);
  border: 1px var(--c1-l) solid;
}
.single-ranking .wrapper .container #ajustes-ranking #sel-tb-gr .contenido-body a i, .single-ranking .wrapper .container #ajustes-ranking #sel-res-det .contenido-body a i, .single-ranking .wrapper .container #ajustes-ranking #sel-date .contenido-body a i {
  margin-right: 2px;
}
.single-ranking .wrapper .container #ajustes-ranking #sel-tb-gr .visualizacion-body, .single-ranking .wrapper .container #ajustes-ranking #sel-res-det .visualizacion-body, .single-ranking .wrapper .container #ajustes-ranking #sel-date .visualizacion-body {
  /* Para ambas vistas */
  /* Vista resumen */
  /* Vista detallada */
}
.single-ranking .wrapper .container #ajustes-ranking #sel-tb-gr .visualizacion-body div, .single-ranking .wrapper .container #ajustes-ranking #sel-res-det .visualizacion-body div, .single-ranking .wrapper .container #ajustes-ranking #sel-date .visualizacion-body div {
  border: 1px var(--c1) solid;
  padding: 8px 18px;
  cursor: pointer;
  /* Opcion como activa */
  /* Hover: para ambas vistas */
}
.single-ranking .wrapper .container #ajustes-ranking #sel-tb-gr .visualizacion-body div.active, .single-ranking .wrapper .container #ajustes-ranking #sel-res-det .visualizacion-body div.active, .single-ranking .wrapper .container #ajustes-ranking #sel-date .visualizacion-body div.active {
  background: var(--c1);
  color: var(--white);
}
.single-ranking .wrapper .container #ajustes-ranking #sel-tb-gr .visualizacion-body div:hover, .single-ranking .wrapper .container #ajustes-ranking #sel-res-det .visualizacion-body div:hover, .single-ranking .wrapper .container #ajustes-ranking #sel-date .visualizacion-body div:hover {
  background: var(--c1-l);
  color: var(--white);
  border: 1px var(--c1-l) solid;
}
.single-ranking .wrapper .container #ajustes-ranking #sel-tb-gr .visualizacion-body .vista-resumen-container, .single-ranking .wrapper .container #ajustes-ranking #sel-res-det .visualizacion-body .vista-resumen-container, .single-ranking .wrapper .container #ajustes-ranking #sel-date .visualizacion-body .vista-resumen-container {
  border-radius: var(--br-2) 0px 0px var(--br-2);
}
.single-ranking .wrapper .container #ajustes-ranking #sel-tb-gr .visualizacion-body .vista-detallada-container, .single-ranking .wrapper .container #ajustes-ranking #sel-res-det .visualizacion-body .vista-detallada-container, .single-ranking .wrapper .container #ajustes-ranking #sel-date .visualizacion-body .vista-detallada-container {
  border-left: none;
  border-radius: 0px var(--br-2) var(--br-2) 0px;
}
.single-ranking .wrapper .container #ajustes-ranking #sel-tb-gr .versiones-body span, .single-ranking .wrapper .container #ajustes-ranking #sel-res-det .versiones-body span, .single-ranking .wrapper .container #ajustes-ranking #sel-date .versiones-body span {
  color: var(--c1);
  margin-right: 16px;
}
.single-ranking .wrapper .container #ajustes-ranking #sel-tb-gr .versiones-body select, .single-ranking .wrapper .container #ajustes-ranking #sel-res-det .versiones-body select, .single-ranking .wrapper .container #ajustes-ranking #sel-date .versiones-body select {
  border-radius: var(--br-2);
  padding: 4px 20px 3px 20px;
}
.single-ranking .wrapper .container .wdtscroll {
  /* Scroll solo si es necesario */
  /*! table */
}
.single-ranking .wrapper .container .wdtscroll table {
  /* Espacio entre celdas */
  border-collapse: separate;
  border-spacing: 0px 6px;
  /* Ocultamos todo al principio y mostramos las que nos interesa */
  /* .oculto */
  /* ----- HEADER ----- */
  /*! thead */
  /* ----- BODY ----- */
  /*! tbody */
}
.single-ranking .wrapper .container .wdtscroll table.shortTable {
  /* 0px 15px; */
  width: 55% !important;
  transition: width 1s ease-in-out;
}
.single-ranking .wrapper .container .wdtscroll table.longTable {
  width: 100% !important;
  transition: display 1s ease-in-out;
}
.single-ranking .wrapper .container .wdtscroll table thead tr th, .single-ranking .wrapper .container .wdtscroll table tbody tr td, .single-ranking .wrapper .container .wdtscroll table tfoot tr td {
  display: none;
  /* En este caso, lo contrario seria ' display: table-cell; ' */
  animation: fadeIn 500ms ease-in-out;
}
.single-ranking .wrapper .container .wdtscroll table thead tr th {
  background: var(--c1) !important;
  border: none !important;
  color: var(--white) !important;
  font-size: 16px;
  text-transform: lowercase;
  padding: 14px 20px 8px 20px !important;
  /* Primera leta */
  /* Flecha de ordenacion */
}
.single-ranking .wrapper .container .wdtscroll table thead tr th:first-letter {
  text-transform: capitalize;
}
.single-ranking .wrapper .container .wdtscroll table thead tr th.sorting:after {
  border-bottom-color: var(--white) !important;
  /* Flecha hacia arriba: de A a Z */
}
.single-ranking .wrapper .container .wdtscroll table thead tr th.sorting_desc:after {
  border-top-color: var(--white) !important;
  /* Flecha hacia arriba: de Z a A */
}
.single-ranking .wrapper .container .wdtscroll table tbody {
  /*! fila */
}
.single-ranking .wrapper .container .wdtscroll table tbody tr {
  box-shadow: var(--bs-1);
  /* Hover de la fila */
  /* Hover en la fila, pero en el color en las columnas de esa fila */
  /* Todas las filas */
  /* Filas impares */
  /* El color de fondo de las pares es el blanco */
}
.single-ranking .wrapper .container .wdtscroll table tbody tr:hover td {
  color: var(--white) !important;
}
.single-ranking .wrapper .container .wdtscroll table tbody tr td {
  border: none !important;
  font-size: 14px;
  padding: 6px 20px;
  /* 14px 20px; */
  /* Alinear contenido de celdas */
  /**
                                *   - Columna "Posicion"
                                *   - Columna "total_engagement" (resultado total)
                                *   
                                */
  /* Columna "posicion" */
  /* Columna resultado total "total_engagement" */
}
.single-ranking .wrapper .container .wdtscroll table tbody tr td.column-posicion, .single-ranking .wrapper .container .wdtscroll table tbody tr td.column-total_engagement {
  text-align: center !important;
}
.single-ranking .wrapper .container .wdtscroll table tbody tr td.column-posicion {
  color: var(--c1);
  font-weight: bold;
}
.single-ranking .wrapper .container .wdtscroll table tbody tr.odd td {
  background-color: var(--c1-ls);
}
.single-ranking #footer {
  margin-top: 70px;
}
.single-ranking .dataTables_paginate, .single-ranking .dataTables_info, .single-ranking #ranking-graficos, .single-ranking #footer {
  display: none;
}
/*! .single-ranking */
/* =================================== */
/*            MEDIA QUERIES            */
/* =================================== */
@media (max-width: 768px) {
  .single-ranking .wrapper {
    /* ==== TITULO === */
    /* ==== CONTENIDO === */
  }
  .single-ranking .wrapper .table_post_title {
    margin-bottom: 20px;
  }
  .single-ranking .wrapper .container {
    /* Ajustes tabla */
    /* Tabla */
  }
  .single-ranking .wrapper .container #ajustes-ranking {
    margin-bottom: 10px;
  }
  .single-ranking .wrapper .container #ajustes-ranking #sel-tb-gr, .single-ranking .wrapper .container #ajustes-ranking #sel-res-det, .single-ranking .wrapper .container #ajustes-ranking #sel-date {
    margin-bottom: 14px;
  }
  .single-ranking .wrapper .container #ajustes-ranking #sel-tb-gr:last-child, .single-ranking .wrapper .container #ajustes-ranking #sel-res-det:last-child, .single-ranking .wrapper .container #ajustes-ranking #sel-date:last-child {
    margin-bottom: 0px;
  }
  .single-ranking .wrapper .container .wdtscroll #ranking-tabla {
    /* Botones de exportacion */
  }
  .single-ranking .wrapper .container .wdtscroll #ranking-tabla .dt-buttons {
    width: 100%;
    height: 40px;
    margin: 0px;
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
  }
  .single-ranking .wrapper .container .wdtscroll table {
    width: 100%;
    display: block;
    overflow-x: auto;
  }
  .single-ranking .wrapper .container .wdtscroll table.shortTable {
    width: 100% !important;
  }
}