/* =========================================================
   UFY PHONE — APP CAMISAS
   Colección pública y administración privada
   ========================================================= */

.ufy-phone-shirts {
  width: 100%;
  min-width: 0;
  min-height: 100%;

  padding: 12px 11px 22px;
  box-sizing: border-box;

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

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

  scrollbar-width: none;
}

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

/* CARRUSEL DE PANTALLAS */

.ufy-phone-shirts-carousel {
  width: 100%;
  min-width: 0;

  overflow: hidden;
}

.ufy-phone-shirts-carousel-track {
  width: 100%;

  display: flex;
  align-items: stretch;

  transition:
    transform 520ms
    cubic-bezier(
      0.22,
      0.78,
      0.24,
      1
    );

  will-change: transform;
}

.ufy-phone-shirts-slide {
  flex:
    0 0
    100%;

  width: 100%;
  min-width: 0;

  box-sizing: border-box;

  display: flex;
  align-items: stretch;
}

.ufy-phone-shirts-slide >
.ufy-phone-shirts-panel,
.ufy-phone-shirts-slide >
.ufy-phone-shirts-detail {
  width: min(100%, 390px);
}

.ufy-phone-shirts-carousel-dots {
  min-height: 24px;
  margin-top: 11px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.ufy-phone-shirts-carousel-dot {
  appearance: none;

  width: 7px;
  height: 7px;
  padding: 0;

  border: 0;
  border-radius: 999px;

  background:
    rgba(235, 226, 255, 0.38);

  box-shadow:
    0 0 0
    1px
    rgba(39, 22, 70, 0.16);

  transition:
    width 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease;

  cursor: pointer;
}

.ufy-phone-shirts-carousel-dot.is-active {
  width: 20px;

  background:
    rgba(132, 75, 226, 0.96);

  box-shadow:
    0 0 10px
    rgba(139, 74, 242, 0.58);
}



/* PANEL DE CRISTAL */

.ufy-phone-shirts-panel,
.ufy-phone-shirts-detail {
  position: relative;

  width: min(100%, 390px);
  min-height: 680px;

  margin: 0 auto;
  padding: 25px 18px 22px;

  box-sizing: border-box;

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

  border-radius: 30px;

  background:
    radial-gradient(
      circle at 16% 7%,
      rgba(var(--ufy-rgb-255,255,255,255),0.72),
      transparent 34%
    ),
    linear-gradient(
      150deg,
      rgba(248, 245, 255, 0.82),
      rgba(224, 215, 242, 0.67)
    );

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow:
    inset 0 1px 0
    rgba(var(--ufy-rgb-255,255,255,255),0.88),
    0 18px 38px
    rgba(30, 17, 56, 0.22),
    0 0 28px
    rgba(139, 79, 255, 0.12);

  color: #1d1827;
}


/* ENCABEZADO — MIS CAMISAS */

.ufy-phone-shirts-collection-header {
  padding: 4px 5px 16px;

  text-align: center;
}

.ufy-phone-shirts-title,
.ufy-phone-shirts-subtitle,
.ufy-phone-shirts-section-title,
.ufy-phone-shirts-empty-title,
.ufy-phone-shirts-empty-text,
.ufy-phone-shirts-claim-description,
.ufy-phone-shirts-form-status {
  margin: 0;
}

.ufy-phone-shirts-title {
  color: #171321;

  font-size:calc(32px * var(--ufy-font-scale,1));
  font-weight: 740;
  line-height: 1.08;
  letter-spacing: -1.05px;
}

.ufy-phone-shirts-title-accent {
  display: block;

  width: 46px;
  height: 2px;

  margin: 13px auto 11px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #8b54dc,
      #5f32aa
    );

  box-shadow:
    0 0 9px
    rgba(126, 70, 216, 0.28);
}

.ufy-phone-shirts-subtitle {
  color:
    rgba(45, 37, 60, 0.70);

  font-size:calc(12.5px * var(--ufy-font-scale,1));
  font-weight: 520;
  line-height: 1.35;
}

.ufy-phone-shirts-count {
  width: fit-content;

  margin: 14px auto 0;
  padding: 8px 13px;

  border:
    1px solid
    rgba(113, 73, 175, 0.27);

  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

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

  color: #6334a7;

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

.ufy-phone-shirts-count-dot {
  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: #24ad43;

  box-shadow:
    0 0 7px
    rgba(36, 173, 67, 0.34);
}

/* ICONO OFICIAL DENTRO DE LA APP */

.ufy-phone-shirts-product {
  position: relative;

  display: block;
  flex: 0 0 auto;

  overflow: hidden;

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

  background:
    linear-gradient(
      145deg,
      rgba(var(--ufy-rgb-255,255,255,255),0.16),
      rgba(220, 207, 255, 0.07)
    );

  box-shadow:
    inset 0 1px 0 rgba(var(--ufy-rgb-255,255,255,255),0.35),
    0 10px 25px rgba(var(--ufy-rgb-0,0,0,0),0.18),
    0 0 18px rgba(151, 94, 255, 0.11);

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

.ufy-phone-shirts-product img {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 88%;
  height: 88%;

  display: block;

  object-fit: contain;

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

  pointer-events: none;
  user-select: none;
}

.ufy-phone-shirts-woven-code {
  position: absolute;

  left: 50%;
  top: 58%;

  z-index: 3;

  max-width: 55%;

  overflow: hidden;

  color:
    rgba(202, 165, 255, 0.98);

  font-size:calc(7px * var(--ufy-font-scale,1));
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.25px;

  text-overflow: ellipsis;
  white-space: nowrap;

  text-shadow:
    0 0 4px rgba(158, 91, 255, 0.88),
    0 0 8px rgba(133, 64, 255, 0.50);

  transform:
    translateX(-50%);

  pointer-events: none;
}

.ufy-phone-shirts-corner {
  position: absolute;

  z-index: 4;

  width: 17%;
  height: 17%;

  box-sizing: border-box;

  pointer-events: none;
}

.ufy-phone-shirts-corner.is-top-left {
  left: 8%;
  top: 8%;

  border-top:
    4px solid
    rgba(18, 16, 24, 0.96);

  border-left:
    4px solid
    rgba(18, 16, 24, 0.96);

  border-radius:
    8px 0 0 0;
}

.ufy-phone-shirts-corner.is-top-right {
  right: 8%;
  top: 8%;

  border-top:
    4px solid
    rgba(18, 16, 24, 0.96);

  border-right:
    4px solid
    rgba(18, 16, 24, 0.96);

  border-radius:
    0 8px 0 0;
}

.ufy-phone-shirts-corner.is-bottom-left {
  left: 8%;
  bottom: 8%;

  border-bottom:
    4px solid
    rgba(18, 16, 24, 0.96);

  border-left:
    4px solid
    rgba(18, 16, 24, 0.96);

  border-radius:
    0 0 0 8px;
}

.ufy-phone-shirts-corner.is-bottom-right {
  right: 8%;
  bottom: 8%;

  border-right:
    4px solid
    rgba(18, 16, 24, 0.96);

  border-bottom:
    4px solid
    rgba(18, 16, 24, 0.96);

  border-radius:
    0 0 8px 0;
}

.ufy-phone-shirts-product.is-header {
  width: 58px;
  height: 58px;

  border-radius: 17px;
}

.ufy-phone-shirts-product.is-card {
  width: 68px;
  height: 68px;

  border-radius: 19px;
}

.ufy-phone-shirts-product.is-empty {
  width: 112px;
  height: 112px;

  margin: 0 auto;

  border-radius: 30px;
}

.ufy-phone-shirts-product.is-detail {
  width: 210px;
  height: 250px;

  margin:
    14px auto
    17px;

  border-radius: 34px;
}

.ufy-phone-shirts-product.is-detail img {
  width: 94%;
  height: 94%;
}

.ufy-phone-shirts-product.is-detail
.ufy-phone-shirts-woven-code {
  top: 58%;

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


/* SECCIONES */

.ufy-phone-shirts-collection,
.ufy-phone-shirts-claim {
  padding-top: 17px;
}

.ufy-phone-shirts-section-title {
  color: rgba(var(--ufy-rgb-255,255,255,255),0.96);

  font-size:calc(15px * var(--ufy-font-scale,1));
  font-weight: 680;
  line-height: 1.25;
}


/* CUADRÍCULA DE CAMISAS */

.ufy-phone-shirts-list {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 12px;

  margin-top: 12px;
}


.ufy-phone-shirts-add-card {
  appearance: none;

  width:
    calc(
      100% - 24px
    );
  height: 245px;
  min-height: 0;

  align-self: center;

  margin: 12px auto;
  padding: 18px 10px;
  box-sizing: border-box;

  border:
    2px dashed
    rgba(31, 24, 41, 0.82);

  border-radius: 22px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;

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

  color: #1d1727;
  font: inherit;

  cursor: pointer;

  transition:
    transform 180ms ease,
    background-color 180ms ease;
}

.ufy-phone-shirts-add-card:active {
  transform: scale(0.982);
}

.ufy-phone-shirts-add-icon {
  font-size:calc(55px * var(--ufy-font-scale,1));
  font-weight: 250;
  line-height: 0.8;
}

.ufy-phone-shirts-add-label {
  font-size:calc(13px * var(--ufy-font-scale,1));
  font-weight: 540;
  line-height: 1.2;
}


.ufy-phone-shirts-card {
  appearance: none;

  position: relative;

  width: 100%;
  min-width: 0;
  min-height: 315px;

  padding: 12px 10px 11px;
  box-sizing: border-box;

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

  border-radius: 22px;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background:
    linear-gradient(
      150deg,
      rgba(var(--ufy-rgb-255,255,255,255),0.48),
      rgba(229, 218, 247, 0.26)
    );

  color: #1c1725;
  font: inherit;
  text-align: left;

  box-shadow:
    inset 0 1px 0
    rgba(var(--ufy-rgb-255,255,255,255),0.86),
    0 10px 24px
    rgba(43, 24, 76, 0.10);

  cursor: pointer;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.ufy-phone-shirts-card.is-selected {
  border-color:
    rgba(139, 75, 222, 0.70);

  box-shadow:
    inset 0 1px 0
    rgba(var(--ufy-rgb-255,255,255,255),0.92),
    0 0 0 2px
    rgba(142, 79, 228, 0.13),
    0 12px 27px
    rgba(80, 38, 145, 0.18),
    0 0 18px
    rgba(139, 75, 222, 0.18);
}

.ufy-phone-shirts-card:active {
  transform: scale(0.982);
}

.ufy-phone-shirts-card-recent {
  position: absolute;
  left: 10px;
  top: 9px;
  z-index: 6;

  padding: 5px 8px;

  border-radius: 999px;

  background:
    rgba(229, 214, 255, 0.88);

  color: #6837ad;

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

  box-shadow:
    0 3px 10px
    rgba(81, 44, 135, 0.12);
}

.ufy-phone-shirts-card
.ufy-phone-shirts-product.is-card {
  width: 100%;
  height: 235px;

  margin: 0 auto;

  border-radius: 17px;
}

.ufy-phone-shirts-card.is-recent
.ufy-phone-shirts-product.is-card {
  margin-top: 14px;
  height: 220px;
}

.ufy-phone-shirts-card-information {
  min-width: 0;
  width: 100%;

  margin-top: 9px;

  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ufy-phone-shirts-card-code {
  display: block;

  overflow: hidden;

  color: #17121f;

  font-size:calc(16px * var(--ufy-font-scale,1));
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: -0.25px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.ufy-phone-shirts-card-footer {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.ufy-phone-shirts-card-state {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 6px;

  color: #39944d;

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

.ufy-phone-shirts-card-state-dot {
  flex: 0 0 auto;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #22ad42;

  box-shadow:
    0 0 6px
    rgba(34, 173, 66, 0.32);
}

.ufy-phone-shirts-card-arrow {
  flex: 0 0 auto;

  color: #6938ad;

  font-size:calc(27px * var(--ufy-font-scale,1));
  font-weight: 310;
  line-height: 0.72;
}


/* ESTADO VACÍO */

.ufy-phone-shirts-empty {
  padding: 28px 7px 18px;
  text-align: center;
}

.ufy-phone-shirts-empty-title {
  margin-top: 16px;

  color: #171321;

  font-size:calc(17px * var(--ufy-font-scale,1));
  font-weight: 690;
  line-height: 1.25;
}

.ufy-phone-shirts-empty-text {
  max-width: 285px;

  margin: 8px auto 0;

  color: #4b3d5f;

  font-size:calc(12.5px * var(--ufy-font-scale,1));
  line-height: 1.45;
}