/**
 * Cántico de Fe Music
 * V13.8.4 — Professional Responsive Media List
 *
 * Objetivos:
 * - Vista tipo Finder / Drive / Media Manager
 * - Filas compactas
 * - Columnas alineadas
 * - Miniaturas pequeñas
 * - Badges por tipo
 * - Selección visible
 * - Menú contextual
 * - Responsive
 */

/* ================================================================ */
/* Contenedor principal                                               */
/* ================================================================ */

.media-list-view {
  width: 100%;
  min-width: 0;

  overflow: visible;

  border: 1px solid
    rgba(255, 255, 255, 0.09);

  border-radius: 16px;

  background:
    rgba(10, 15, 18, 0.96);

  box-shadow:
    0 18px 44px
    rgba(0, 0, 0, 0.16);
}

/* ================================================================ */
/* Grid compartido                                                    */
/* ================================================================ */

.media-list-view__header,
.media-list-row {
  display: grid;

  grid-template-columns:
    48px
    minmax(260px, 2.4fr)
    minmax(110px, 0.85fr)
    minmax(100px, 0.7fr)
    minmax(130px, 0.95fr)
    74px;

  align-items: center;

  width: 100%;
  min-width: 0;

  box-sizing: border-box;
}

/* ================================================================ */
/* Encabezado                                                         */
/* ================================================================ */

.media-list-view__header {
  min-height: 44px;

  padding:
    0
    8px;

  border-bottom: 1px solid
    rgba(255, 255, 255, 0.09);

  border-radius:
    15px
    15px
    0
    0;

  background:
    rgba(255, 255, 255, 0.045);
}

.media-list-view__heading {
  min-width: 0;

  padding:
    0
    10px;

  color:
    rgba(255, 255, 255, 0.64);

  font-size: 0.72rem;
  font-weight: 800;

  letter-spacing:
    0.045em;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}

.media-list-view__heading--select {
  padding: 0;
}

.media-list-view__heading--actions {
  text-align: center;
}

/* ================================================================ */
/* Encabezados ordenables                                             */
/* ================================================================ */

.media-list-view__sort-button {
  width: 100%;

  display: inline-flex;
  align-items: center;

  gap: 5px;

  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    rgba(255, 255, 255, 0.58);

  font: inherit;
  font-size: inherit;
  font-weight: inherit;

  letter-spacing: inherit;

  text-transform: inherit;

  text-align: left;

  cursor: pointer;

  transition:
    color 140ms ease,
    opacity 140ms ease;
}

.media-list-view__sort-button:hover {
  color:
    rgba(255, 255, 255, 0.9);
}

.media-list-view__sort-button.is-active {
  color:
    #f4d06f;
}

.media-list-view__sort-indicator {
  display: inline-flex;
  align-items: center;

  min-width: 10px;

  color:
    currentColor;

  font-size: 0.62rem;
  line-height: 1;

  opacity: 0.9;
}

.media-list-view__sort-button:focus-visible {
  outline:
    2px solid #f4d06f;

  outline-offset: 4px;

  border-radius: 4px;
}

/* ================================================================ */
/* Body                                                               */
/* ================================================================ */

.media-list-view__body {
  width: 100%;
  min-width: 0;
}

/* ================================================================ */
/* Fila                                                               */
/* ================================================================ */

.media-list-row {
  position: relative;

  min-height: 56px;

  padding:
    4px
    8px;

  border-bottom: 1px solid
    rgba(255, 255, 255, 0.065);

  color:
    rgba(255, 255, 255, 0.86);

  transition:
    background 130ms ease,
    box-shadow 130ms ease;
}

.media-list-row:last-child {
  border-bottom: 0;

  border-radius:
    0
    0
    15px
    15px;
}

.media-list-row:hover {
  background:
    rgba(255, 255, 255, 0.045);
}

.media-list-row.is-selected {
  background:
    rgba(244, 208, 111, 0.09);

  box-shadow:
    inset 3px 0 0
    rgba(244, 208, 111, 0.78);
}

/* ================================================================ */
/* Celdas                                                             */
/* ================================================================ */

.media-list-row__cell {
  min-width: 0;

  display: flex;
  align-items: center;

  padding:
    0
    10px;

  box-sizing: border-box;

  color:
    rgba(255, 255, 255, 0.74);

  font-size: 0.82rem;
}

.media-list-row__cell--select {
  justify-content: center;

  padding: 0;
}

.media-list-row__cell--name {
  gap: 11px;
}

.media-list-row__cell--actions {
  justify-content: center;

  overflow: visible;
}

/* ================================================================ */
/* Checkbox                                                           */
/* ================================================================ */

.media-list-row__selector {
  position: relative;

  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  cursor: pointer;
}

.media-list-row__checkbox {
  width: 17px;
  height: 17px;

  margin: 0;

  accent-color:
    #d0a000;

  cursor: pointer;
}

.media-list-row__selector-label {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(
    0,
    0,
    0,
    0
  );

  white-space: nowrap;

  border: 0;
}

/* ================================================================ */
/* Miniatura                                                          */
/* ================================================================ */

.media-list-row__thumbnail {
  width: 36px;
  height: 36px;

  flex:
    0
    0
    36px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border: 1px solid
    rgba(255, 255, 255, 0.09);

  border-radius: 9px;

  background:
    rgba(255, 255, 255, 0.055);
}

.media-list-row__thumbnail-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* ================================================================ */
/* Iconos                                                             */
/* ================================================================ */

.media-list-row__file-icon {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  font-size: 1rem;

  line-height: 1;
}

.media-list-row__file-icon--image {
  background:
    rgba(62, 151, 255, 0.12);
}

.media-list-row__file-icon--audio {
  background:
    rgba(156, 83, 255, 0.13);
}

.media-list-row__file-icon--video {
  background:
    rgba(255, 78, 93, 0.13);
}

.media-list-row__file-icon--document {
  background:
    rgba(235, 71, 71, 0.13);
}

.media-list-row__file-icon--file {
  background:
    rgba(255, 255, 255, 0.06);
}

/* ================================================================ */
/* Nombre                                                             */
/* ================================================================ */

.media-list-row__name {
  min-width: 0;

  overflow: hidden;

  color:
    rgba(255, 255, 255, 0.93);

  font-size: 0.86rem;
  font-weight: 700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

/* ================================================================ */
/* Tipo                                                               */
/* ================================================================ */

.media-list-row__type {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 25px;

  padding:
    4px
    9px;

  border: 1px solid
    rgba(255, 255, 255, 0.1);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.055);

  color:
    rgba(255, 255, 255, 0.78);

  font-size: 0.7rem;
  font-weight: 800;

  line-height: 1;

  white-space: nowrap;
}

/* Imagen */

.media-list-row__type--image {
  border-color:
    rgba(56, 145, 255, 0.3);

  background:
    rgba(56, 145, 255, 0.12);

  color:
    #73b7ff;
}

/* Audio */

.media-list-row__type--audio {
  border-color:
    rgba(159, 89, 255, 0.32);

  background:
    rgba(159, 89, 255, 0.13);

  color:
    #ba82ff;
}

/* Video */

.media-list-row__type--video {
  border-color:
    rgba(255, 83, 98, 0.3);

  background:
    rgba(255, 83, 98, 0.12);

  color:
    #ff7f8c;
}

/* PDF */

.media-list-row__type--document {
  border-color:
    rgba(240, 74, 74, 0.3);

  background:
    rgba(240, 74, 74, 0.11);

  color:
    #ff8383;
}

/* Otros */

.media-list-row__type--file {
  border-color:
    rgba(255, 255, 255, 0.12);

  background:
    rgba(255, 255, 255, 0.055);

  color:
    rgba(255, 255, 255, 0.7);
}

/* ================================================================ */
/* Tamaño y fecha                                                     */
/* ================================================================ */

.media-list-row__cell--size,
.media-list-row__cell--date {
  white-space: nowrap;

  color:
    rgba(255, 255, 255, 0.62);

  font-variant-numeric:
    tabular-nums;
}

/* ================================================================ */
/* Menú                                                               */
/* ================================================================ */

.media-list-row__menu {
  position: relative;

  margin: 0;

  overflow: visible;
}

.media-list-row__menu > summary {
  list-style: none;
}

.media-list-row__menu > summary::-webkit-details-marker {
  display: none;
}

.media-list-row__menu-trigger {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid
    transparent;

  border-radius: 9px;

  background:
    transparent;

  color:
    rgba(255, 255, 255, 0.76);

  font-size: 1.25rem;

  line-height: 1;

  cursor: pointer;

  transition:
    background 130ms ease,
    border-color 130ms ease,
    color 130ms ease;
}

.media-list-row__menu-trigger:hover {
  border-color:
    rgba(255, 255, 255, 0.1);

  background:
    rgba(255, 255, 255, 0.065);

  color: #ffffff;
}

/* Panel */

.media-list-row__menu-panel {
  position: absolute;

  z-index: 100;

  top:
    calc(100% + 6px);

  right: 0;

  width: 190px;

  padding: 6px;

  border: 1px solid
    rgba(255, 255, 255, 0.11);

  border-radius: 12px;

  background:
    rgba(10, 15, 18, 0.99);

  box-shadow:
    0 18px 46px
    rgba(0, 0, 0, 0.45);

  backdrop-filter:
    blur(14px);
}

/* ================================================================ */
/* Acciones del menú                                                  */
/* ================================================================ */

.media-list-row__menu-panel
.media-library-item__menu-action {
  width: 100%;
  min-height: 37px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding:
    8px
    10px;

  box-sizing:
    border-box;

  border: 0;
  border-radius: 8px;

  background:
    transparent;

  color:
    rgba(255, 255, 255, 0.84);

  font: inherit;
  font-size: 0.79rem;
  font-weight: 650;

  text-align: left;
  text-decoration: none;

  cursor: pointer;
}

.media-list-row__menu-panel
.media-library-item__menu-action:hover {
  background:
    rgba(255, 255, 255, 0.07);

  color:
    #ffffff;
}

.media-list-row__menu-panel
.media-library-item__menu-action--danger {
  color:
    #ff8b8b;
}

.media-list-row__menu-panel
.media-library-item__menu-action--danger:hover {
  background:
    rgba(205, 55, 55, 0.13);

  color:
    #ffaaaa;
}

.media-list-row__menu-panel
.media-library-item__menu-separator {
  height: 1px;

  margin:
    5px
    4px;

  background:
    rgba(255, 255, 255, 0.08);
}

/* ================================================================ */
/* Empty state                                                        */
/* ================================================================ */

.media-list-view__empty {
  padding: 30px;

  text-align: center;

  color:
    rgba(255, 255, 255, 0.58);
}

.media-list-view__empty p {
  margin: 0;
}

/* ================================================================ */
/* Focus                                                              */
/* ================================================================ */

.media-list-row__checkbox:focus-visible,
.media-list-row__menu-trigger:focus-visible,
.media-list-row__menu-panel
.media-library-item__menu-action:focus-visible {
  outline:
    2px solid #f4d06f;

  outline-offset: 2px;
}

/* ================================================================ */
/* Laptop                                                             */
/* ================================================================ */

@media (
  max-width: 1100px
) {

  .media-list-view__header,
  .media-list-row {
    grid-template-columns:
      44px
      minmax(220px, 2fr)
      minmax(100px, 0.75fr)
      minmax(90px, 0.65fr)
      minmax(120px, 0.85fr)
      64px;
  }

}

/* ================================================================ */
/* Tablet                                                             */
/* ================================================================ */

@media (
  max-width: 820px
) {

  .media-list-view {
    overflow-x: auto;

    border-radius: 14px;
  }

  .media-list-view__header,
  .media-list-row {
    min-width: 760px;
  }

}

/* ================================================================ */
/* Móvil                                                              */
/* ================================================================ */

@media (
  max-width: 560px
) {

  .media-list-view__header {
    display: none;
  }

  .media-list-view {
    overflow: visible;

    border: 0;

    background:
      transparent;

    box-shadow:
      none;
  }

  .media-list-view__body {
    display: grid;

    gap: 8px;
  }

  .media-list-row {
    min-width: 0;

    grid-template-columns:
      38px
      minmax(0, 1fr)
      46px;

    grid-template-areas:
      "select name actions"
      "select meta actions";

    min-height: 72px;

    padding:
      8px;

    border: 1px solid
      rgba(255, 255, 255, 0.09);

    border-radius: 12px;

    background:
      rgba(10, 15, 18, 0.95);
  }

  .media-list-row:last-child {
    border-bottom: 1px solid
      rgba(255, 255, 255, 0.09);

    border-radius: 12px;
  }

  .media-list-row__cell--select {
    grid-area:
      select;

    align-self:
      stretch;
  }

  .media-list-row__cell--name {
    grid-area:
      name;

    padding:
      0
      7px;
  }

  .media-list-row__cell--type {
    grid-area:
      meta;

    padding:
      0
      7px;
  }

  .media-list-row__cell--size,
  .media-list-row__cell--date {
    display: none;
  }

  .media-list-row__cell--actions {
    grid-area:
      actions;

    padding: 0;
  }

  .media-list-row__thumbnail {
    width: 32px;
    height: 32px;

    flex-basis:
      32px;
  }

  .media-list-row__name {
    font-size:
      0.82rem;
  }

  .media-list-row__type {
    min-height:
      22px;

    padding:
      3px
      7px;

    font-size:
      0.65rem;
  }

}