/* =============================================================
   TINTIN — Superficies de marca responsive
   Cuenta, carrito, buscador, colecciones, checkout, formularios y modales.
   Esta hoja solo refuerza presentación: no cambia datos ni flujos.
   ============================================================= */

:root {
  --tt-brand-pink: var(--color-brand-primary, #F8AACA);
  --tt-brand-pink-deep: var(--color-brand-primary, #F8AACA);
  --tt-brand-pink-soft: #fff0f7;
  --tt-brand-copy: var(--color-text-primary, #222222);
  --tt-brand-muted: var(--color-text-primary, #222222);
  --tt-brand-border: #efbdd2;
  --tt-brand-white: #ffffff;
  --tt-fit-gutter: clamp(16px, 4vw, 72px);
  --tt-fit-radius: clamp(18px, 2.2vw, 30px);
  --tt-fit-shadow: 0 24px 68px rgba(122, 0, 61, .16);
}

/* Nunca usar negro puro en las superficies de interacción de la tienda. */
:is(
  .tt-account-drawer,
  .tt-cart-drawer,
  .tt-search-panel,
  .tt-collections-sheet,
  .ck-body,
  .ck-panel,
  .ck-summary-card,
  .perfil-card,
  .perfil-section,
  .modal,
  .adm-modal
) {
  color: var(--tt-brand-copy);
}

/* =============================================================
   MI CUENTA — cabecera rosa sólida, marca blanca y layout tipo app
   ============================================================= */
.tt-account-drawer {
  overflow: hidden;
  border-left-color: var(--tt-brand-border) !important;
  background: var(--tt-brand-pink-soft) !important;
}

.tt-account-drawer-header {
  position: relative;
  isolation: isolate;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: clamp(112px, 13vh, 146px) !important;
  padding:
    max(20px, env(safe-area-inset-top))
    clamp(20px, 4vw, 34px)
    20px !important;
  overflow: hidden;
  border: 0 !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.18), transparent 38%),
    linear-gradient(135deg, var(--color-brand-primary, #F8AACA) 0%, var(--color-brand-primary, #F8AACA) 52%, var(--color-brand-primary, #F8AACA) 100%) !important;
  box-shadow: 0 14px 34px rgba(111, 0, 55, .22);
}

.tt-account-drawer-header::before {
  content: "";
  width: clamp(92px, 11vw, 126px);
  height: clamp(58px, 7vw, 78px);
  display: block;
  grid-column: 1;
  grid-row: 1;
  background: url("../../assets-tintin/images/general/logo.png?v=tintin-20261004-final-integration-2-master-20261007-1-encomienda-20261008-1-checkout-20261008-2") center / contain no-repeat;
  filter: brightness(0) invert(1) drop-shadow(0 7px 15px rgba(85,0,43,.18));
  opacity: .98;
}

.tt-account-drawer-header h2 {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  width: max-content;
  margin: 0 0 1px clamp(112px, 13vw, 150px) !important;
  color:#222222 !important;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(.78rem, 1.5vw, .96rem) !important;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .16em !important;
  text-shadow: 0 3px 12px rgba(67,0,33,.24);
}

.tt-account-drawer-header h2::before {
  content: "T\2665NT\2665N";
  display: block;
  margin-bottom: 8px;
  color:#222222;
  font-size: clamp(1.04rem, 2.2vw, 1.34rem);
  font-weight: 900;
  letter-spacing: .08em;
}

.tt-account-drawer-header button {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: 46px;
  min-width: 46px !important;
  height: 46px;
  min-height: 46px !important;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.14) !important;
  color:#222222 !important;
  font-size: 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26);
  transition: transform .2s ease, background-color .2s ease;
}

.tt-account-drawer-header button:hover,
.tt-account-drawer-header button:focus-visible {
  background: #fff !important;
  color: var(--tt-brand-pink-deep) !important;
  transform: rotate(5deg) scale(1.04);
}

.tt-account-drawer .tt-account-panel {
  gap: 10px !important;
  padding: clamp(20px, 4vw, 34px) !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 100% 0%, rgba(202,1,105,.07), transparent 35%),
    var(--tt-brand-pink-soft) !important;
}

.tt-account-drawer .tt-account-header {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 68px;
  margin-bottom: 6px;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 20px;
  background: linear-gradient(135deg, var(--color-brand-primary, #F8AACA), var(--color-brand-primary, #F8AACA)) !important;
  color:#222222 !important;
  box-shadow: 0 12px 28px rgba(151,0,79,.18);
}

.tt-account-drawer .tt-account-header span {
  min-width: 0;
  color:#222222 !important;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.tt-account-drawer .tt-account-panel-avatar {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px;
  border: 2px solid rgba(255,255,255,.84);
  border-radius: 50%;
  object-fit: cover;
}

.tt-account-drawer .tt-account-item {
  min-height: 52px !important;
  padding: 13px 16px !important;
  border: 1px solid var(--tt-brand-border) !important;
  border-radius: 17px !important;
  background: #fff !important;
  color: var(--tt-brand-copy) !important;
  font-weight: 720;
  line-height: 1.35;
  box-shadow: 0 6px 18px rgba(126,0,63,.055);
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}

.tt-account-drawer .tt-account-item:hover,
.tt-account-drawer .tt-account-item:focus-visible {
  border-color: var(--color-brand-primary, #F8AACA) !important;
  background: #FDECF2 !important;
  color: var(--tt-brand-pink-deep) !important;
  transform: translateY(-1px);
}

.tt-account-drawer .tt-account-logout {
  margin-top: auto;
  color:var(--color-text-primary,#222222) !important;
}

.tt-account-drawer .tt-account-divider {
  height: 1px;
  margin: 4px 2px;
  background: rgba(202,1,105,.16);
}

.tt-account-drawer .tt-account-guest-copy {
  margin: 0 0 8px;
  padding: 16px;
  border: 1px solid var(--tt-brand-border);
  border-radius: 18px;
  background: #fff;
  color: var(--tt-brand-copy);
  font-weight: 600;
  line-height: 1.55;
}

/* =============================================================
   CARRITO, COLECCIONES Y BUSCADOR — misma familia visual
   ============================================================= */
.tt-cart-drawer,
.tt-collections-sheet,
.tt-search-panel {
  border-color: var(--tt-brand-border) !important;
  background: #FDECF2 !important;
  box-shadow: var(--tt-fit-shadow) !important;
}

:is(.tt-cart-header, .tt-sheet-header) {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--color-brand-primary, #F8AACA), var(--color-brand-primary, #F8AACA)) !important;
  color:#222222 !important;
}

:is(.tt-cart-header, .tt-sheet-header) :is(h2, h3, span) {
  color:#222222 !important;
}

:is(.tt-cart-header, .tt-sheet-header) button {
  border: 1px solid rgba(255,255,255,.7) !important;
  background: rgba(255,255,255,.16) !important;
  color:#222222 !important;
}

.tt-search-panel {
  color: var(--tt-brand-copy) !important;
}

.tt-search-panel .tt-search-input {
  min-height: 54px;
  border: 1px solid var(--tt-brand-border) !important;
  border-radius: 17px !important;
  background: #fff !important;
  color: var(--tt-brand-pink-deep) !important;
}

.tt-search-panel .tt-search-input::placeholder {
  color: var(--tt-brand-muted) !important;
}

:is(.tt-cart-item, .tt-sheet-item, .tt-search-result-item) {
  border-color: var(--tt-brand-border) !important;
  background: #fff !important;
  color: var(--tt-brand-copy) !important;
}

/* =============================================================
   CHECKOUT Y FORMULARIOS — ancho útil real y textos de marca
   ============================================================= */
html:has(.ck-body) body {
  background: #FFFFFF !important;
  background-image: var(--tt-flow-canvas, none) !important;
  color: var(--tt-brand-copy) !important;
}

.ck-body {
  width: min(100%, 1560px) !important;
  margin-inline: auto !important;
  padding-inline: var(--tt-fit-gutter) !important;
}

:is(.ck-panel, .ck-summary-card, .ck-step, .tt-map-block) {
  border-color: var(--tt-brand-border) !important;
  background: #fff !important;
  color: var(--tt-brand-copy) !important;
  box-shadow: 0 10px 30px rgba(126,0,63,.075);
}

:is(.ck-panel, .ck-summary-card, .tt-map-block) :is(h1, h2, h3, h4, label, strong) {
  color: var(--tt-brand-copy) !important;
}

:is(.ck-panel, .ck-summary-card, .tt-map-block) :is(p, small, .muted, .ck-muted) {
  color: var(--tt-brand-muted) !important;
}

:is(.ck-panel, .tt-map-block) :is(input, select, textarea) {
  border-color: var(--tt-brand-border) !important;
  background: #fff !important;
  color: var(--tt-brand-pink-deep) !important;
}

:is(.ck-panel, .tt-map-block) :is(input, textarea)::placeholder {
  color:var(--color-text-primary,#222222) !important;
  opacity: 1;
}

:is(.ck-btn-primary, .tt-map-locate, #btn-save-profile) {
  background: linear-gradient(135deg, var(--color-brand-primary, #F8AACA), var(--color-brand-primary, #F8AACA)) !important;
  color:#222222 !important;
  box-shadow: 0 12px 28px rgba(151,0,79,.22);
}

/* =============================================================
   MODALES Y TARJETAS DE PERFIL
   ============================================================= */
:is(.modal, .adm-modal, .login-exit-card, .perfil-card, .perfil-section) {
  border-color: var(--tt-brand-border) !important;
  background: #fff !important;
  color: var(--tt-brand-copy) !important;
  box-shadow: var(--tt-fit-shadow);
}

:is(.modal, .adm-modal, .login-exit-card, .perfil-card, .perfil-section) :is(h1, h2, h3, h4, label, strong) {
  color: var(--tt-brand-copy) !important;
}

:is(.modal, .adm-modal, .login-exit-card, .perfil-card, .perfil-section) :is(p, small) {
  color: var(--tt-brand-muted) !important;
}

/* =============================================================
   BREAKPOINTS REALES
   ============================================================= */
@media (min-width: 1100px) {
  .tt-account-drawer,
  .tt-cart-drawer {
    width: clamp(470px, 34vw, 560px) !important;
    max-width: min(94vw, 560px) !important;
  }

  .ck-body {
    padding-inline: clamp(48px, 5vw, 96px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .tt-account-drawer,
  .tt-cart-drawer {
    width: min(74vw, 680px) !important;
    max-width: calc(100vw - 28px) !important;
  }

  .ck-body {
    padding-inline: clamp(26px, 4vw, 52px) !important;
  }
}

@media (max-width: 767px) {
  .tt-account-drawer,
  .tt-cart-drawer {
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .tt-account-drawer-header {
    min-height: 122px !important;
    padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right)) !important;
  }

  .tt-account-drawer-header::before {
    width: 92px;
    height: 60px;
  }

  .tt-account-drawer-header h2 {
    margin-left: 108px !important;
  }

  .tt-account-drawer .tt-account-panel {
    padding:
      20px
      max(16px, env(safe-area-inset-right))
      calc(82px + env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left)) !important;
  }

  .tt-search-panel,
  .tt-collections-sheet {
    border-radius: 0 !important;
  }

  .ck-body {
    width: 100% !important;
    padding-inline: clamp(14px, 4vw, 22px) !important;
  }

  :is(.ck-panel, .ck-summary-card, .tt-map-block, .perfil-card, .perfil-section) {
    border-radius: 20px !important;
  }
}

@media (max-width: 380px) {
  .tt-account-drawer-header h2::before {
    font-size: .98rem;
  }

  .tt-account-drawer-header h2 {
    margin-left: 101px !important;
    font-size: .72rem !important;
  }
}

/* El reveal global agrega .tt-visible una sola vez y luego deja el elemento
   asentado. Esta regla evita que otra hoja vuelva a esconderlo. */
.tt-auto-reveal.tt-visible,
.tt-auto-reveal.tt-reveal-settled {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (prefers-reduced-motion: reduce) {
  .tt-account-drawer-header button,
  .tt-account-drawer .tt-account-item {
    transition: none !important;
  }
}