/* =========================================================
   UFY PHONE — SELECTOR DE CARPETA PARA GUARDADOS
   ========================================================= */


/* =========================================================
   CAPA GENERAL
   ========================================================= */

.ufy-phone-save-folder-overlay {
  position: absolute;

  inset: 0;

  z-index: 10060;

  overflow: hidden;

  visibility: hidden;

  opacity: 0;

  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}


.ufy-phone-save-folder-overlay.is-open {
  visibility: visible;

  opacity: 1;
}


.ufy-phone-save-folder-overlay.is-closing {
  pointer-events: none;

  opacity: 0;
}


/* =========================================================
   FONDO
   ========================================================= */

.ufy-phone-save-folder-backdrop {
  appearance: none;

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  padding: 0;

  border: 0;

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

  cursor: pointer;
}


/* =========================================================
   PANEL INFERIOR
   ========================================================= */

.ufy-phone-save-folder-sheet {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 2;

  max-height: 76%;

  box-sizing: border-box;

  overflow: hidden;

  display: flex;
  flex-direction: column;

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

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

  border-bottom: 0;

  border-radius:
    23px
    23px
    0
    0;

  background:
    rgba(10, 11, 17, 0.96);

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

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

  transform:
    translateY(104%);

  transition:
    transform 220ms ease;
}


.ufy-phone-save-folder-overlay.is-open
.ufy-phone-save-folder-sheet {
  transform:
    translateY(0);
}


.ufy-phone-save-folder-overlay.is-closing
.ufy-phone-save-folder-sheet {
  transform:
    translateY(104%);
}


/* =========================================================
   MANIJA
   ========================================================= */

.ufy-phone-save-folder-handle {
  flex:
    0 0 auto;

  width: 38px;
  height: 4px;

  margin:
    0 auto
    8px;

  border-radius: 999px;

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


/* =========================================================
   CABECERA
   ========================================================= */

.ufy-phone-save-folder-header {
  flex:
    0 0 auto;

  min-height: 37px;

  display: flex;

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

  padding:
    0
    2px
    8px;

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


.ufy-phone-save-folder-header h2 {
  margin: 0;

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

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

  text-align: center;
}


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

  position: absolute;

  right: 15px;

  padding:
    5px
    0;

  border: 0;

  background:
    transparent;

  color:
    rgba(188, 133, 255, 0.98);

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

  cursor: pointer;
}


.ufy-phone-save-folder-cancel:active {
  opacity: 0.62;
}


/* =========================================================
   LISTA
   ========================================================= */

.ufy-phone-save-folder-list {
  flex:
    1 1 auto;

  min-height: 74px;

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

  overscroll-behavior: contain;

  scrollbar-width: none;

  padding:
    5px
    0;
}


.ufy-phone-save-folder-list::-webkit-scrollbar {
  display: none;
}


.ufy-phone-save-folder-option {
  appearance: none;

  position: relative;

  width: 100%;
  min-height: 47px;

  padding:
    6px
    34px
    6px
    3px;

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

  display: flex;

  align-items: center;

  gap: 10px;

  background:
    transparent;

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

  font: inherit;

  text-align: left;

  cursor: pointer;
}


.ufy-phone-save-folder-option:active {
  background:
    rgba(157, 77, 255, 0.12);
}


/* =========================================================
   ICONO DE CARPETA
   ========================================================= */

.ufy-phone-save-folder-option-icon {
  position: relative;

  flex:
    0 0 31px;

  width: 31px;
  height: 24px;

  border:
    1.5px solid
    rgba(206, 164, 255, 0.92);

  border-radius:
    5px;

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


.ufy-phone-save-folder-option-icon::before {
  content: "";

  position: absolute;

  left: 3px;
  top: -6px;

  width: 14px;
  height: 7px;

  box-sizing: border-box;

  border:
    1.5px solid
    rgba(206, 164, 255, 0.92);

  border-bottom: 0;

  border-radius:
    4px
    4px
    0
    0;

  background:
    rgba(41, 23, 63, 0.98);
}


/* SIN CARPETA */

.ufy-phone-save-folder-option.is-no-folder
.ufy-phone-save-folder-option-icon {
  height: 30px;

  border: 0;
  border-radius: 0;

  background:
    transparent;
}


.ufy-phone-save-folder-option.is-no-folder
.ufy-phone-save-folder-option-icon::before {
  left: 7px;
  top: 2px;

  width: 18px;
  height: 25px;

  box-sizing: border-box;

  border:
    1.8px solid
    rgba(var(--ufy-rgb-255,255,255,255),0.82);

  border-radius:
    3px
    3px
    2px
    2px;

  background:
    transparent;

  clip-path:
    polygon(
      0 0,
      100% 0,
      100% 100%,
      50% 76%,
      0 100%
    );
}


/* =========================================================
   INFORMACIÓN
   ========================================================= */

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

  display: flex;

  flex-direction: column;

  gap: 3px;
}


.ufy-phone-save-folder-option-information strong {
  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;
  line-height: 1.15;

  text-overflow: ellipsis;

  white-space: nowrap;
}


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

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


/* =========================================================
   MARCA SELECCIONADA
   ========================================================= */

.ufy-phone-save-folder-option-check {
  position: absolute;

  right: 8px;
  top: 50%;

  width: 20px;
  height: 20px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    #9d4dff;

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

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

  opacity: 0;

  transform:
    translateY(-50%)
    scale(0.72);

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


.ufy-phone-save-folder-option.is-selected
.ufy-phone-save-folder-option-check {
  opacity: 1;

  transform:
    translateY(-50%)
    scale(1);
}


/* =========================================================
   CREAR CARPETA
   ========================================================= */

.ufy-phone-save-folder-create-toggle {
  appearance: none;

  flex:
    0 0 auto;

  min-height: 40px;

  padding:
    7px
    4px;

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

  display: flex;

  align-items: center;

  gap: 8px;

  background:
    transparent;

  color:
    rgba(206, 164, 255, 0.98);

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

  cursor: pointer;
}


.ufy-phone-save-folder-create-toggle span {
  width: 22px;
  height: 22px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(206, 164, 255, 0.72);

  border-radius: 50%;

  font-size:calc(16px * var(--ufy-font-scale,1));
  font-weight: 400;
  line-height: 1;
}


.ufy-phone-save-folder-create-toggle:active {
  opacity: 0.64;
}


/* =========================================================
   FORMULARIO NUEVA CARPETA
   ========================================================= */

.ufy-phone-save-folder-create-form {
  position: relative;

  flex:
    0 0 auto;

  padding:
    6px
    0
    2px;

  display: grid;

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

  gap: 7px;
}


.ufy-phone-save-folder-create-form[hidden] {
  display: none;
}


.ufy-phone-save-folder-create-form input {
  min-width: 0;
  min-height: 34px;

  box-sizing: border-box;

  padding:
    7px
    11px;

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

  border-radius: 11px;

  outline: 0;

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

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

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


.ufy-phone-save-folder-create-form input:focus {
  border-color:
    rgba(183, 122, 255, 0.78);
}


.ufy-phone-save-folder-create-form button {
  appearance: none;

  min-height: 34px;

  padding:
    7px
    13px;

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

  border-radius: 11px;

  background:
    #9d4dff;

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

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

  cursor: pointer;
}


.ufy-phone-save-folder-create-form button:disabled {
  opacity: 0.50;

  cursor: wait;
}


.ufy-phone-save-folder-create-error {
  grid-column:
    1 / -1;

  margin: 0;

  color:
    rgba(255, 154, 154, 0.96);

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


/* =========================================================
   MENSAJES
   ========================================================= */

.ufy-phone-save-folder-message {
  min-height: 72px;

  display: grid;

  place-items: center;

  padding: 14px;

  box-sizing: border-box;

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

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

  text-align: center;
}


.ufy-phone-save-folder-message.is-error {
  color:
    rgba(255, 154, 154, 0.96);
}