/* =========================================================
   UFY PHONE — APP CAMISAS: DETALLE Y CONFIRMACIÓN
   Parte 3 de shirts.css (se carga justo después de la
   parte anterior, en el mismo orden). Detalle de una camisa
   (métricas e iconos), confirmación central de camisa conectada,
   cargando y error, pantallas pequeñas y botón del historial.
   ========================================================= */

/* DETALLE DE UNA CAMISA */

.ufy-phone-shirts-detail {
  min-height: 450px;
  padding-top: 15px;

  text-align: center;
}


.ufy-phone-shirts-detail-header {
  padding:
    7px
    42px
    0;

  text-align: center;
}

.ufy-phone-shirts-detail-heading {
  margin: 0;

  color: #171220;

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

.ufy-phone-shirts-detail-heading
.is-accent {
  color: #6d3caf;
}

.ufy-phone-shirts-detail-heading-accent {
  display: block;

  width: 46px;
  height: 2px;

  margin:
    14px
    auto
    4px;

  border-radius: 999px;

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

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






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

  margin-top: 10px;

  color: #171220;

  font-size:calc(22px * var(--ufy-font-scale,1));
  font-weight: 740;
  line-height: 1.15;
  letter-spacing: 0.45px;
}

.ufy-phone-shirts-detail-connected-state {
  margin:
    8px
    0
    0;

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

  color: #27943e;

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

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

  border-radius: 50%;

  background: #22ad42;

  box-shadow:
    0 0 7px
    rgba(34, 173, 66, 0.34);
}

.ufy-phone-shirts-detail-metrics {
  width: 100%;

  margin-top: 24px;

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

.ufy-phone-shirts-detail-metric {
  position: relative;

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

  padding: 0 8px;
  box-sizing: border-box;

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

  text-align: center;
}

.ufy-phone-shirts-detail-metric +
.ufy-phone-shirts-detail-metric {
  border-left:
    1px solid
    rgba(83, 59, 112, 0.20);
}

.ufy-phone-shirts-detail-metric-value {
  max-width: 100%;

  color: #1d1726;

  font-size:calc(14px * var(--ufy-font-scale,1));
  font-weight: 720;
  line-height: 1.18;

  overflow-wrap: anywhere;
}

.ufy-phone-shirts-detail-metric-label {
  color:
    rgba(55, 43, 70, 0.66);

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

.ufy-phone-shirts-detail-metric-icon {
  position: relative;

  width: 23px;
  height: 23px;

  margin-bottom: 2px;

  display: block;
  flex: 0 0 auto;

  color: #6939a9;
}

.ufy-phone-shirts-detail-metric-icon.is-scans {
  background:
    linear-gradient(
      currentColor 0 0
    )
    left top /
    8px 2px
    no-repeat,

    linear-gradient(
      currentColor 0 0
    )
    left top /
    2px 8px
    no-repeat,

    linear-gradient(
      currentColor 0 0
    )
    right top /
    8px 2px
    no-repeat,

    linear-gradient(
      currentColor 0 0
    )
    right top /
    2px 8px
    no-repeat,

    linear-gradient(
      currentColor 0 0
    )
    left bottom /
    8px 2px
    no-repeat,

    linear-gradient(
      currentColor 0 0
    )
    left bottom /
    2px 8px
    no-repeat,

    linear-gradient(
      currentColor 0 0
    )
    right bottom /
    8px 2px
    no-repeat,

    linear-gradient(
      currentColor 0 0
    )
    right bottom /
    2px 8px
    no-repeat;
}

.ufy-phone-shirts-detail-metric-icon.is-time {
  border:
    2px solid
    currentColor;

  border-radius: 50%;

  box-sizing: border-box;
}

.ufy-phone-shirts-detail-metric-icon.is-time::before,
.ufy-phone-shirts-detail-metric-icon.is-time::after {
  content: "";

  position: absolute;
  left: 50%;
  top: 50%;

  width: 2px;

  border-radius: 999px;

  background: currentColor;

  transform-origin:
    50%
    100%;
}

.ufy-phone-shirts-detail-metric-icon.is-time::before {
  height: 7px;

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

.ufy-phone-shirts-detail-metric-icon.is-time::after {
  height: 6px;

  transform:
    translate(
      -50%,
      -100%
    )
    rotate(125deg);
}

.ufy-phone-shirts-detail-metric-icon.is-owner::before {
  content: "";

  position: absolute;
  left: 8px;
  top: 1px;

  width: 7px;
  height: 7px;

  border:
    2px solid
    currentColor;

  border-radius: 50%;
}

.ufy-phone-shirts-detail-metric-icon.is-owner::after {
  content: "";

  position: absolute;
  left: 4px;
  bottom: 1px;

  width: 15px;
  height: 9px;

  border:
    2px solid
    currentColor;

  border-bottom: 0;

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


/* CONFIRMACIÓN CENTRAL DE CAMISA CONECTADA */

.ufy-phone-shirts-success-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;

  padding: 24px;
  box-sizing: border-box;

  display: grid;
  place-items: center;

  background:
    rgba(29, 17, 46, 0.24);

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

  opacity: 0;

  transition:
    opacity 250ms ease;

  pointer-events: none;
}

.ufy-phone-shirts-success-overlay.is-visible {
  opacity: 1;
}

.ufy-phone-shirts-success-card {
  width: min(100%, 290px);

  padding: 26px 22px;
  box-sizing: border-box;

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

  border-radius: 27px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  background:
    linear-gradient(
      145deg,
      rgba(250, 247, 255, 0.94),
      rgba(224, 211, 244, 0.88)
    );

  color: #1c1527;
  text-align: center;

  box-shadow:
    inset 0 1px 0
    rgba(var(--ufy-rgb-255,255,255,255),0.96),
    0 20px 48px
    rgba(38, 19, 67, 0.32),
    0 0 30px
    rgba(133, 73, 221, 0.24);

  transform:
    translateY(12px)
    scale(0.94);

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

.ufy-phone-shirts-success-overlay.is-visible
.ufy-phone-shirts-success-card {
  transform:
    translateY(0)
    scale(1);
}

.ufy-phone-shirts-success-icon {
  width: 52px;
  height: 52px;

  border-radius: 50%;

  display: grid;
  place-items: center;

  background:
    linear-gradient(
      145deg,
      #8d57d5,
      #6633ad
    );

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

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

  box-shadow:
    0 9px 22px
    rgba(105, 52, 176, 0.30),
    0 0 18px
    rgba(139, 78, 230, 0.26);
}

.ufy-phone-shirts-success-title {
  color: #21172e;

  font-size:calc(21px * var(--ufy-font-scale,1));
  font-weight: 760;
  line-height: 1.15;
}

.ufy-phone-shirts-success-text {
  max-width: 230px;

  color:
    rgba(48, 37, 62, 0.72);

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



/* CARGANDO Y ERROR */

.ufy-phone-shirts-loading,
.ufy-phone-shirts-error {
  min-height: 260px;
  padding: 24px;

  box-sizing: border-box;

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

  color:
    rgba(239, 234, 248, 0.76);

  font-size:calc(13px * var(--ufy-font-scale,1));
  text-align: center;
}

.ufy-phone-shirts-error {
  flex-direction: column;
  gap: 7px;
}

.ufy-phone-shirts-error strong {
  color: rgba(255, 164, 180, 0.96);
  font-size:calc(14px * var(--ufy-font-scale,1));
}

.ufy-phone-shirts-error span {
  max-width: 290px;

  color: rgba(237, 226, 242, 0.68);
  line-height: 1.4;
}


/* PANTALLAS PEQUEÑAS */

@media (max-width: 360px) {
  .ufy-phone-shirts {
    padding: 10px 8px 18px;
  }

  .ufy-phone-shirts-panel,
  .ufy-phone-shirts-detail {
    padding-left: 12px;
    padding-right: 12px;

    border-radius: 24px;
  }

  .ufy-phone-shirts-title {
    font-size:calc(20px * var(--ufy-font-scale,1));
  }

  .ufy-phone-shirts-app-icon.is-card {
    width: 62px;
    height: 62px;
  }

  .ufy-phone-shirts-app-icon.is-detail {
    width: 136px;
    height: 136px;
  }
}


/* ACCESO AL HISTORIAL — DETALLE DE CAMISA */

.ufy-phone-shirts-history-button {
  width: 100%;
  min-height: 54px;
  margin-top: 28px;
  padding: 14px 18px;

  border: 1px solid rgba(var(--ufy-rgb-255,255,255,255),0.8);
  border-radius: 18px;

  color: #61359c;
  background: linear-gradient(
    145deg,
    rgba(var(--ufy-rgb-255,255,255,255),0.55),
    rgba(231, 219, 250, 0.4)
  );

  box-shadow:
    inset 0 1px 0 rgba(var(--ufy-rgb-255,255,255,255),0.7),
    0 7px 20px rgba(64, 34, 103, 0.09);

  font: inherit;
  font-size:calc(15px * var(--ufy-font-scale,1));
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.ufy-phone-shirts-history-button:active {
  transform: scale(0.98);
}

.ufy-phone-shirts-history-button:focus-visible {
  outline: 2px solid #8247df;
  outline-offset: 3px;
}