/* =========================================================
   UFY PHONE — APP GUARDADOS
   DISEÑO A
   ========================================================= */


/* =========================================================
   PANTALLA
   ========================================================= */

.ufy-phone-app-screen[
  data-ufy-active-app="saved"
]
.ufy-phone-app-screen-content {
  padding: 0;

  overflow: hidden;

  background:
    #030408;
}


.ufy-phone-saved {
  position: relative;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background:
    #030408;

  color: var(--ufy-tone-255,#fff);
}


/* =========================================================
   NAVEGACIÓN
   ========================================================= */

.ufy-phone-saved-navigation {
  flex:
    0 0 auto;

  min-height: 49px;

  padding:
    7px
    8px
    6px;

  box-sizing: border-box;

  display: grid;

  grid-template-columns:
    0.8fr
    0.9fr
    1.45fr
    38px;

  align-items: center;

  gap: 3px;

  border-bottom:
    1px solid
    rgba(var(--ufy-rgb-255,255,255,255),0.10);

  background:
    rgba(3, 4, 8, 0.98);
}


.ufy-phone-saved-filter {
  appearance: none;

  position: relative;

  min-width: 0;
  min-height: 34px;

  padding:
    6px
    5px;

  border: 0;

  display: grid;

  place-items: center;

  background:
    transparent;

  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.48);

  font: inherit;
  font-size:calc(10px * var(--ufy-font-scale,1));
  font-weight: 600;
  line-height: 1;

  white-space: nowrap;

  cursor: pointer;

  transition:
    color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}


.ufy-phone-saved-filter::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 1px;

  width: 16px;
  height: 2px;

  border-radius: 999px;

  background:
    transparent;

  transform:
    translateX(-50%);
}


.ufy-phone-saved-filter.is-active {
  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.98);

  background:
    rgba(157, 77, 255, 0.10);

  border-radius: 9px;
}


.ufy-phone-saved-filter.is-active::after {
  background:
    #9d4dff;

  box-shadow:
    0 2px 7px
    rgba(157, 77, 255, 0.46);
}


.ufy-phone-saved-filter:active {
  transform:
    scale(0.94);
}


/* =========================================================
   BOTÓN DE CARPETAS SIN TEXTO
   ========================================================= */

.ufy-phone-saved-filter.is-folder span {
  position: relative;

  width: 22px;
  height: 16px;

  box-sizing: border-box;

  border:
    1.5px solid
    currentColor;

  border-radius:
    4px;

  background:
    rgba(157, 77, 255, 0.12);
}


.ufy-phone-saved-filter.is-folder span::before {
  content: "";

  position: absolute;

  left: 2px;
  top: -5px;

  width: 10px;
  height: 5px;

  box-sizing: border-box;

  border:
    1.5px solid
    currentColor;

  border-bottom: 0;

  border-radius:
    3px
    3px
    0
    0;

  background:
    #030408;
}


/* =========================================================
   CUERPO DESPLAZABLE
   ========================================================= */

.ufy-phone-saved-body {
  flex:
    1 1 auto;

  min-width: 0;
  min-height: 0;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;

  scrollbar-width: none;

  padding-bottom:
    max(
      14px,
      env(safe-area-inset-bottom)
    );

  box-sizing: border-box;

  -webkit-overflow-scrolling:
    touch;
}


.ufy-phone-saved-body::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   GRUPOS POR FECHA
   ========================================================= */

.ufy-phone-saved-section {
  width: 100%;

  margin: 0;
  padding: 0;

  box-sizing: border-box;
}


.ufy-phone-saved-date {
  margin: 0;

  padding:
    11px
    9px
    6px;

  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.90);

  font-size:calc(12px * var(--ufy-font-scale,1));
  font-weight: 650;
  line-height: 1.2;
}


/* =========================================================
   CUADRÍCULA TRES COLUMNAS
   ========================================================= */

.ufy-phone-saved-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 2px;

  width: 100%;

  box-sizing: border-box;
}


/* =========================================================
   MINIATURA
   ========================================================= */

.ufy-phone-saved-item {
  appearance: none;

  position: relative;

  min-width: 0;

  padding: 0;

  border: 0;
  outline: 0;

  aspect-ratio:
    1 / 1;

  overflow: hidden;

  background:
    rgba(var(--ufy-rgb-255,255,255,255),0.05);

  cursor: pointer;
}


.ufy-phone-saved-item:active {
  opacity: 0.72;
}


.ufy-phone-saved-item-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =========================================================
   MARCADOR MORADO
   ========================================================= */

.ufy-phone-saved-item-marker {
  appearance: none;

  position: absolute;

  right: 5px;
  top: 5px;

  z-index: 4;

  width: 29px;
  height: 29px;

  padding: 2px;

  border: 0;
  outline: 0;
  border-radius: 8px;

  display: grid;
  place-items: center;

  background:
    rgba(var(--ufy-rgb-0,0,0,0),0.34);

  cursor: pointer;

  -webkit-tap-highlight-color:
    transparent;
}


.ufy-phone-saved-item-marker img {
  display: block;

  width: 25px;
  height: 25px;

  object-fit: contain;

  pointer-events: none;

  filter:
    drop-shadow(
      0 2px 5px
      rgba(var(--ufy-rgb-0,0,0,0),0.76)
    );
}


.ufy-phone-saved-item-marker:active {
  transform:
    scale(0.91);
}


.ufy-phone-saved-item-marker:disabled {
  opacity: 0.55;

  cursor: wait;
}


/* =========================================================
   ETIQUETA NEGRA REEL
   ========================================================= */

.ufy-phone-saved-item-reel-label {
  position: absolute;

  left: 5px;
  top: 5px;

  z-index: 3;

  min-height: 18px;

  box-sizing: border-box;

  padding:
    4px
    7px;

  border-radius: 6px;

  background:
    rgba(var(--ufy-rgb-0,0,0,0),0.86);

  color: var(--ufy-tone-255,#fff);

  font-size:calc(9px * var(--ufy-font-scale,1));
  font-weight: 700;
  line-height: 1;

  pointer-events: none;
}


/* =========================================================
   OJO Y VISUALIZACIONES
   ========================================================= */

.ufy-phone-saved-item-views {
  position: absolute;

  left: 5px;
  bottom: 5px;

  z-index: 3;

  min-height: 19px;

  box-sizing: border-box;

  display: inline-flex;

  align-items: center;

  padding:
    3px
    6px
    3px
    23px;

  border:
    1px solid
    rgba(var(--ufy-rgb-255,255,255,255),0.27);

  border-radius: 999px;

  background:
    rgba(var(--ufy-rgb-0,0,0,0),0.66);

  color: var(--ufy-tone-255,#fff);

  font-size:calc(9px * var(--ufy-font-scale,1));
  font-weight: 700;
  line-height: 1;

  pointer-events: none;
}


.ufy-phone-saved-item-views::before {
  content: "";

  position: absolute;

  left: 6px;
  top: 50%;

  width: 10px;
  height: 7px;

  box-sizing: border-box;

  border:
    1.4px solid var(--ufy-tone-255,#fff);

  border-radius:
    50% / 60%;

  background:
    radial-gradient(
      circle at center,
      var(--ufy-tone-255,#fff) 0 1.4px,
      transparent 1.8px
    );

  transform:
    translateY(-50%);
}


/* =========================================================
   VISTA DE CARPETAS
   ========================================================= */

.ufy-phone-saved-folders-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    13px
    10px;

  padding:
    13px
    10px
    20px;

  box-sizing: border-box;
}


.ufy-phone-saved-folder-card {
  appearance: none;

  min-width: 0;

  padding: 0;

  border: 0;

  display: flex;

  flex-direction: column;

  gap: 7px;

  background:
    transparent;

  color: var(--ufy-tone-255,#fff);

  font: inherit;

  text-align: left;

  cursor: pointer;
}


.ufy-phone-saved-folder-card:active {
  opacity: 0.70;
}


/* =========================================================
   COLLAGE DE CARPETA
   ========================================================= */

.ufy-phone-saved-folder-preview {
  position: relative;

  width: 100%;

  aspect-ratio:
    1 / 0.82;

  overflow: hidden;

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  grid-template-rows:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 2px;

  border:
    1px solid
    rgba(var(--ufy-rgb-255,255,255,255),0.15);

  border-radius: 14px;

  box-sizing: border-box;

  background:
    rgba(var(--ufy-rgb-255,255,255,255),0.055);

  box-shadow:
    0 7px 18px
    rgba(var(--ufy-rgb-0,0,0,0),0.22);
}





.ufy-phone-saved-folder-preview img {
  display: block;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  object-fit: cover;
}

.ufy-phone-saved-folder-preview video {
  display: block;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  object-fit: contain;

  background: var(--ufy-tone-0,#000);

  pointer-events: none;
}


.ufy-phone-saved-folder-preview img:only-child {
  grid-column:
    1 / -1;

  grid-row:
    1 / -1;
}


.ufy-phone-saved-folder-preview img:first-child:nth-last-child(2),
.ufy-phone-saved-folder-preview img:first-child:nth-last-child(2) ~ img {
  grid-row:
    1 / -1;
}


/* =========================================================
   CARPETA VACÍA
   ========================================================= */

.ufy-phone-saved-folder-empty-icon {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 46px;
  height: 33px;

  box-sizing: border-box;

  border:
    2px solid
    rgba(199, 151, 255, 0.74);

  border-radius: 8px;

  background:
    rgba(157, 77, 255, 0.12);

  transform:
    translate(
      -50%,
      -43%
    );
}


.ufy-phone-saved-folder-empty-icon::before {
  content: "";

  position: absolute;

  left: 4px;
  top: -9px;

  width: 21px;
  height: 9px;

  box-sizing: border-box;

  border:
    2px solid
    rgba(199, 151, 255, 0.74);

  border-bottom: 0;

  border-radius:
    5px
    5px
    0
    0;

  background:
    #0b0c12;
}


/* =========================================================
   INFORMACIÓN DE CARPETA
   ========================================================= */

.ufy-phone-saved-folder-information {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 3px;

  padding:
    0
    3px;
}


.ufy-phone-saved-folder-information strong {
  overflow: hidden;

  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.96);

  font-size:calc(11px * var(--ufy-font-scale,1));
  font-weight: 680;
  line-height: 1.15;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.ufy-phone-saved-folder-information span {
  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.48);

  font-size:calc(9px * var(--ufy-font-scale,1));
  font-weight: 520;
}


/* =========================================================
   ENCABEZADO DENTRO DE UNA CARPETA
   ========================================================= */

.ufy-phone-saved-folder-heading {
  position: relative;

  z-index: 2;

  flex:
    0 0 auto;

  min-height: 38px;

  padding:
    5px
    10px;

  box-sizing: border-box;

  display: flex;

  align-items: center;
  justify-content: center;

  border-bottom:
    1px solid
    rgba(var(--ufy-rgb-255,255,255,255),0.08);

  background:
    rgba(3, 4, 8, 0.98);
}


.ufy-phone-saved-folder-heading strong {
  max-width: 70%;

  overflow: hidden;

  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.96);

  font-size:calc(12px * var(--ufy-font-scale,1));
  font-weight: 680;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.ufy-phone-saved-folder-back {
  appearance: none;

  position: absolute;

  z-index: 3;

  left: 10px;
  top: 4px;

  width: 29px;
  height: 29px;

  padding: 0;

  border: 0;

  border-radius: 50%;

  display: grid;

  place-items: center;

  background:
    rgba(157, 77, 255, 0.82);

  color: var(--ufy-tone-255,#fff);

  font: inherit;
  font-size:calc(25px * var(--ufy-font-scale,1));
  font-weight: 300;
  line-height: 1;

  cursor: pointer;
}


/* =========================================================
   ADMINISTRAR CARPETA
   ========================================================= */

.ufy-phone-saved-folder-actions {
  position: absolute;

  right: 10px;
  top: 7px;

  z-index: 3;

  display: flex;
  align-items: center;

  gap: 5px;
}


.ufy-phone-saved-folder-edit {
  appearance: none;

  min-height: 24px;

  padding:
    4px
    8px;

  border:
    1px solid
    rgba(180, 120, 255, 0.30);

  border-radius: 999px;

  background:
    rgba(122, 58, 204, 0.26);

  color:
    rgba(235, 216, 255, 0.96);

  font: inherit;
  font-size:calc(9px * var(--ufy-font-scale,1));
  font-weight: 650;

  cursor: pointer;
}


.ufy-phone-saved-folder-edit:active {
  transform:
    scale(0.94);
}


.ufy-phone-saved-folder-delete,
.ufy-phone-saved-folder-delete-cancel {
  appearance: none;

  min-height: 24px;

  padding:
    4px
    8px;

  border:
    1px solid
    rgba(255, 120, 132, 0.28);

  border-radius: 999px;

  background:
    rgba(156, 45, 62, 0.22);

  color:
    rgba(255, 190, 198, 0.96);

  font: inherit;
  font-size:calc(9px * var(--ufy-font-scale,1));
  font-weight: 650;

  cursor: pointer;
}


.ufy-phone-saved-folder-delete.is-confirming {
  border-color:
    rgba(255, 98, 115, 0.60);

  background:
    rgba(190, 42, 62, 0.74);

  color: var(--ufy-tone-255,#fff);
}


.ufy-phone-saved-folder-delete-cancel {
  border-color:
    rgba(var(--ufy-rgb-255,255,255,255),0.14);

  background:
    rgba(var(--ufy-rgb-255,255,255,255),0.07);

  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.72);
}


.ufy-phone-saved-folder-delete:active,
.ufy-phone-saved-folder-delete-cancel:active {
  transform:
    scale(0.94);
}


.ufy-phone-saved-folder-delete:disabled,
.ufy-phone-saved-folder-delete-cancel:disabled {
  opacity: 0.5;

  cursor: wait;
}



.ufy-phone-saved-folder-name-form {
  width:
    min(
      68%,
      260px
    );

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 4px;
}


.ufy-phone-saved-folder-name-input {
  min-width: 0;
  width: 100%;

  height: 27px;

  box-sizing: border-box;

  padding:
    5px
    8px;

  border:
    1px solid
    rgba(178, 116, 255, 0.58);

  outline: 0;

  border-radius: 8px;

  background:
    rgba(var(--ufy-rgb-255,255,255,255),0.08);

  color: var(--ufy-tone-255,#fff);

  font: inherit;
  font-size:calc(11px * var(--ufy-font-scale,1));
  font-weight: 600;
}


.ufy-phone-saved-folder-name-input:focus {
  border-color:
    rgba(195, 145, 255, 0.92);

  box-shadow:
    0 0 0 2px
    rgba(137, 68, 221, 0.18);
}


.ufy-phone-saved-folder-name-save,
.ufy-phone-saved-folder-name-cancel {
  appearance: none;

  min-height: 25px;

  padding:
    4px
    7px;

  border: 0;
  border-radius: 7px;

  font: inherit;
  font-size:calc(8px * var(--ufy-font-scale,1));
  font-weight: 650;

  cursor: pointer;
}


.ufy-phone-saved-folder-name-save {
  background:
    rgba(137, 68, 221, 0.84);

  color: var(--ufy-tone-255,#fff);
}


.ufy-phone-saved-folder-name-cancel {
  background:
    rgba(var(--ufy-rgb-255,255,255,255),0.08);

  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.72);
}


.ufy-phone-saved-folder-name-save:disabled,
.ufy-phone-saved-folder-name-cancel:disabled {
  opacity: 0.5;

  cursor: wait;
}


/* =========================================================
   CARGANDO Y VACÍO
   ========================================================= */

.ufy-phone-saved-loading,
.ufy-phone-saved-empty {
  min-height: 210px;

  padding:
    28px
    18px;

  box-sizing: border-box;

  display: grid;

  place-items: center;

  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.54);

  font-size:calc(11px * var(--ufy-font-scale,1));
  font-weight: 550;

  text-align: center;
}


.ufy-phone-saved-empty.is-error {
  color:
    rgba(255, 154, 154, 0.94);
}


/* =========================================================
   MENSAJE CENTRAL DE GUARDADOS
   ========================================================= */

.ufy-phone-saved-toast {
  position: absolute;

  left: 50%;
  top: 50%;

  z-index: 100;

  width:
    min(
      calc(100% - 48px),
      300px
    );

  box-sizing: border-box;

  padding:
    13px
    16px;

  border:
    1px solid
    rgba(190, 137, 255, 0.38);

  border-radius: 13px;

  background:
    rgba(19, 11, 31, 0.94);

  box-shadow:
    0 12px 34px
    rgba(var(--ufy-rgb-0,0,0,0),0.46);

  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.96);

  font-size:calc(12px * var(--ufy-font-scale,1));
  font-weight: 600;
  line-height: 1.4;

  text-align: center;

  pointer-events: none;

  opacity: 0;

  transform:
    translate(-50%, -44%)
    scale(0.96);

  transition:
    opacity 180ms ease,
    transform 180ms ease;

  backdrop-filter:
    blur(4px);

  -webkit-backdrop-filter:
    blur(4px);
}


.ufy-phone-saved-toast.is-visible {
  opacity: 1;

  transform:
    translate(-50%, -50%)
    scale(1);
}