/* =========================================================
   UFY PHONE — BIBLIOTECA PRIVADA: BANDEJA INFERIOR Y PANEL PARA ELEGIR DESTINO
   Parte 2 de camera-library.css (se carga justo después de la
   parte anterior, en el mismo orden). Cubre la bandeja inferior
   (contador de seleccionados y botón de destino), los ajustes para
   pantallas estrechas y el panel para elegir dónde publicar
   (opciones, texto opcional del post, error y botones finales).
   ========================================================= */

/* =========================================================
   BANDEJA INFERIOR
   ========================================================= */

.ufy-phone-camera-library-bottom {
  position: relative;

  z-index: 2;

  flex: 0 0 auto;

  box-sizing: border-box;

  padding:
    11px 14px 14px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.08);

  background:
    rgba(7, 7, 9, 0.94);

  backdrop-filter:
    blur(2px);

  -webkit-backdrop-filter:
    blur(2px);

  box-shadow:
    0 -12px 32px
    rgba(0, 0, 0, 0.24);
}


.ufy-phone-camera-library-privacy {
  margin:
    0 0 9px;

  color:
    rgba(255, 255, 255, 0.48);

  font-size: 10px;
  font-weight: 520;
  line-height: 1.35;

  text-align: center;
}


.ufy-phone-camera-library-selection-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr) auto;

  align-items: center;

  gap: 10px;
}


.ufy-phone-camera-library-selected-count {
  min-width: 0;

  overflow: hidden;

  color:
    rgba(255, 255, 255, 0.70);

  font-size: 11px;
  font-weight: 620;
  line-height: 1.3;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.ufy-phone-camera-library-destination {
  min-height: 40px;

  box-sizing: border-box;

  padding:
    0 17px;

  border:
    1px solid
    rgba(255, 255, 255, 0.94);

  border-radius: 999px;

  color: #050506;

  background: #fff;

  font: inherit;
  font-size: 12px;
  font-weight: 760;
  line-height: 1;

  cursor: pointer;

  transition:
    opacity 150ms ease,
    transform 150ms ease;

  -webkit-tap-highlight-color:
    transparent;
}


.ufy-phone-camera-library-destination:active:not(:disabled) {
  transform:
    scale(0.97);
}


.ufy-phone-camera-library-destination:disabled {
  border-color:
    rgba(255, 255, 255, 0.10);

  color:
    rgba(255, 255, 255, 0.30);

  background:
    rgba(255, 255, 255, 0.06);

  cursor: default;
}


/* =========================================================
   AJUSTES PARA PANTALLAS ESTRECHAS
   ========================================================= */

@media (max-width: 360px) {
  .ufy-phone-camera-library-content {
    padding-right: 10px;
    padding-left: 10px;
  }

  .ufy-phone-camera-library-grid {
    gap: 4px;
  }

  .ufy-phone-camera-library-origin {
    left: 5px;
    top: 5px;

    padding:
      3px 5px;

    font-size: 7px;
  }

  .ufy-phone-camera-library-selection {
    right: 5px;
    top: 5px;

    width: 20px;
    height: 20px;
  }

  .ufy-phone-camera-library-selection-row {
    grid-template-columns: 1fr;
  }

  .ufy-phone-camera-library-selected-count {
    text-align: center;
  }

  .ufy-phone-camera-library-destination {
    width: 100%;
  }
}


/* =========================================================
   PANEL PARA ELEGIR DESTINO
   ========================================================= */

.ufy-phone-camera-library-publish-panel {
  position: absolute;

  inset: 0;

  z-index: 30;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  box-sizing: border-box;

  padding:
    18px 14px;

  background:
    rgba(0, 0, 0, 0.68);

  backdrop-filter:
    blur(2px);

  -webkit-backdrop-filter:
    blur(2px);
}


.ufy-phone-camera-library-publish-dialog {
  width:
    min(100%, 390px);

  box-sizing: border-box;

  padding:
    20px 17px 17px;

  border:
    1px solid
    rgba(255, 255, 255, 0.13);

  border-radius: 24px;

  color: #fff;

  background:
    rgba(10, 10, 12, 0.98);

  box-shadow:
    0 20px 60px
    rgba(0, 0, 0, 0.62);
}


.ufy-phone-camera-library-publish-title {
  margin: 0;

  color: #fff;

  font-size: 18px;
  font-weight: 760;
  line-height: 1.2;

  text-align: center;
}


.ufy-phone-camera-library-publish-summary {
  margin:
    6px 0 17px;

  color:
    rgba(255, 255, 255, 0.52);

  font-size: 11px;
  font-weight: 540;
  line-height: 1.35;

  text-align: center;
}


.ufy-phone-camera-library-publish-options {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 8px;
}


.ufy-phone-camera-library-publish-option {
  min-height: 46px;

  box-sizing: border-box;

  padding:
    0 12px;

  border:
    1px solid
    rgba(255, 255, 255, 0.13);

  border-radius: 14px;

  color:
    rgba(255, 255, 255, 0.70);

  background:
    rgba(255, 255, 255, 0.055);

  font: inherit;
  font-size: 12px;
  font-weight: 720;
  line-height: 1;

  cursor: pointer;

  -webkit-tap-highlight-color:
    transparent;
}


.ufy-phone-camera-library-publish-option.is-active {
  border-color: #fff;

  color: #050506;

  background: #fff;
}


.ufy-phone-camera-library-publish-option:disabled {
  color:
    rgba(255, 255, 255, 0.22);

  background:
    rgba(255, 255, 255, 0.025);

  cursor: default;
}


/* TEXTO OPCIONAL DEL POST */

.ufy-phone-camera-library-caption-group {
  display: grid;

  gap: 7px;

  margin-top: 14px;
}


.ufy-phone-camera-library-caption-group[hidden] {
  display: none;
}


.ufy-phone-camera-library-caption-label {
  color:
    rgba(255, 255, 255, 0.60);

  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
}


.ufy-phone-camera-library-caption {
  display: block;

  width: 100%;
  min-height: 78px;

  box-sizing: border-box;

  resize: vertical;

  padding:
    11px 12px;

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  border-radius: 13px;

  outline: none;

  color: #fff;

  background:
    rgba(255, 255, 255, 0.05);

  font: inherit;
  font-size: 12px;
  line-height: 1.4;
}


.ufy-phone-camera-library-caption:focus {
  border-color:
    rgba(255, 255, 255, 0.44);

  background:
    rgba(255, 255, 255, 0.075);
}


.ufy-phone-camera-library-caption::placeholder {
  color:
    rgba(255, 255, 255, 0.28);
}


/* ERROR DEL PANEL */

.ufy-phone-camera-library-publish-error {
  margin:
    12px 0 0;

  padding:
    9px 10px;

  border:
    1px solid
    rgba(255, 110, 110, 0.20);

  border-radius: 11px;

  color:
    rgba(255, 165, 165, 0.96);

  background:
    rgba(130, 20, 20, 0.14);

  font-size: 10px;
  line-height: 1.4;

  text-align: center;
}


.ufy-phone-camera-library-publish-error[hidden] {
  display: none;
}


/* ACCIONES FINALES */

.ufy-phone-camera-library-publish-actions {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 8px;

  margin-top: 17px;
}


.ufy-phone-camera-library-publish-cancel,
.ufy-phone-camera-library-publish-confirm {
  min-height: 44px;

  box-sizing: border-box;

  padding:
    0 13px;

  border-radius: 999px;

  font: inherit;
  font-size: 12px;
  font-weight: 760;
  line-height: 1;

  cursor: pointer;

  -webkit-tap-highlight-color:
    transparent;
}


.ufy-phone-camera-library-publish-cancel {
  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  color: #fff;

  background:
    rgba(255, 255, 255, 0.055);
}


.ufy-phone-camera-library-publish-confirm {
  border:
    1px solid #fff;

  color: #050506;

  background: #fff;
}


.ufy-phone-camera-library-publish-confirm:disabled {
  border-color:
    rgba(255, 255, 255, 0.10);

  color:
    rgba(255, 255, 255, 0.28);

  background:
    rgba(255, 255, 255, 0.05);

  cursor: default;
}


.ufy-phone-camera-library-publish-cancel:disabled {
  opacity: 0.42;

  cursor: default;
}


