/*
 * TINTIN — Sistema de superficies 2026
 *
 * Capa visual compartida para la tienda y Super Admin. No modifica contratos
 * de datos, rutas ni eventos: sólo ordena superficies, jerarquía, contraste
 * y comportamiento responsive. Se carga al final de cada shell para que sea
 * la última autoridad visual sin depender de estilos inline de cada módulo.
 */
:root {
  --tt-ui-canvas: #FDECF2;
  --tt-ui-surface: #ffffff;
  --tt-ui-surface-soft: var(--color-brand-accent, #FDECF2);
  --tt-ui-ink: var(--color-text-primary, #222222);
  --tt-ui-muted: var(--color-text-primary, #222222);
  --tt-ui-pink: var(--color-brand-primary, #F8AACA);
  --tt-ui-pink-deep: var(--color-brand-primary, #F8AACA);
  --tt-ui-pink-soft: var(--color-brand-accent, #FDECF2);
  --tt-ui-line: #FDECF2;
  --tt-ui-shadow: 0 18px 48px rgba(125, 38, 77, .11);
  --tt-ui-radius-xl: 28px;
  --tt-ui-radius-lg: 20px;
  --tt-ui-radius-md: 14px;
  --tt-ui-gutter: clamp(16px, 3vw, 32px);
  --tt-ui-inset: clamp(16px, 2.2vw, 28px);
  --tt-ui-gap: clamp(12px, 2vw, 24px);
}

/* Public surfaces ------------------------------------------------------- */
html body:not(:has(.adm-main)) {
  background: var(--tt-ui-canvas) !important;
  color: var(--tt-ui-ink) !important;
}

html body:not(:has(.adm-main)) :is(
  .tt-hero, .tt-trust-bar, .tt-collection-carousel, .tt-look-section,
  .tt-editorial, .tt-home-random-products, .tt-watch-feature,
  .tt-products-section, .tt-related-section, .tt-colls-page-section,
  .tt-product-page, .section
) {
  background: transparent !important;
}

html body:not(:has(.adm-main)) :is(
  .tt-collection-carousel, .tt-look-section, .tt-home-random-products,
  .tt-related-section, .tt-colls-page-section, .tt-reviews-product
) {
  content-visibility: visible;
  contain-intrinsic-size: auto;
}

html body:not(:has(.adm-main)) :is(
  .tt-trust-item, .tt-look-card, .tt-editorial, .tt-watch-feature,
  .tt-product-card, .tt-coll-card, .tt-coll-page-card, .tt-review-card,
  .tt-product-info-panel, .tt-product-actions-panel, .tt-specs-block,
  .tt-reviews-summary, .tt-review-form, .tt-review-thread-message
) {
  border: 1px solid var(--tt-ui-line) !important;
  border-radius: var(--tt-ui-radius-lg) !important;
  box-shadow: 0 10px 30px rgba(125, 38, 77, .07) !important;
}

html body:not(:has(.adm-main)) :is(
  .tt-product-card, .tt-coll-card, .tt-coll-page-card
) {
  overflow: hidden;
  background: var(--tt-ui-surface) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

html body:not(:has(.adm-main)) :is(
  .tt-product-card, .tt-coll-card, .tt-coll-page-card
):hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--tt-ui-pink) 45%, white) !important;
  box-shadow: var(--tt-ui-shadow) !important;
}

html body:not(:has(.adm-main)) :is(
  .tt-section-title, .tt-page-hero-title, .tt-related-heading,
  .tt-editorial-title, .tt-watch-title
) {
  color:var(--color-text-primary,#222222) !important;
  letter-spacing: -.025em;
}

html body:not(:has(.adm-main)) :is(
  .tt-collection-carousel__heading, .tt-look-header, .tt-products-header,
  .tt-related-header, .tt-products-intro
) {
  max-width: 1180px;
  margin-inline: auto;
}

html body:not(:has(.adm-main)) :is(
  .tt-collection-carousel__description, .tt-section-desc,
  .tt-page-hero-sub, .tt-section-sub, .tt-review-date,
  .tt-review-thread-meta time
) {
  color: var(--tt-ui-muted) !important;
}

html body:not(:has(.adm-main)) :is(
  .tt-coll-card-label, .tt-product-badge, .tt-product-status,
  .tt-review-store-like
) {
  background: var(--tt-ui-pink-soft) !important;
  color:var(--color-text-primary,#222222) !important;
  border-color: var(--tt-ui-line) !important;
}

html body:not(:has(.adm-main)) :is(
  .tt-review-comment, .tt-review-thread-text, .tt-review-textarea,
  .tt-review-reply-input
) {
  color: var(--tt-ui-ink) !important;
  line-height: 1.65;
}

html body:not(:has(.adm-main)) :is(
  .tt-review-form, .tt-review-card, .tt-review-thread-message
) {
  background: var(--tt-ui-surface) !important;
}

html body:not(:has(.adm-main)) :is(
  .tt-btn, .tt-btn-primary-full, .tt-cart-checkout-btn,
  .login-email-btn, .login-google, .ck-btn
) {
  min-height: 44px;
  border-radius: 999px !important;
  font-weight: 800;
  letter-spacing: .01em;
}

/* .login-google queda fuera: login-maintenance.css lo define blanco con texto
   de marca (y la G en su caja); pintarlo rosa dejaba la etiqueta en 1.6:1. */
html body:not(:has(.adm-main)) :is(
  .tt-btn, .tt-btn-primary-full, .tt-cart-checkout-btn,
  .login-email-btn, .ck-btn
):not(.tt-btn-outline):not(.tt-btn-outline-full) {
  background: var(--tt-ui-pink) !important;
  border-color: var(--tt-ui-pink) !important;
  color:#222222 !important;
}

/* Super Admin: panel hierarchy, menu and engagement modules ------------- */
html body:has(.adm-main) {
  background: #FDECF2 !important;
  color:#222222 !important;
}

html body:has(.adm-main) .adm-sidebar {
  background: #fff !important;
  border-right: 1px solid #FDECF2 !important;
  box-shadow: 10px 0 28px rgba(125, 38, 77, .06) !important;
  z-index: 300 !important;
}

html body:has(.adm-main) .adm-sidebar-logo {
  min-height: 104px;
  padding: 24px 24px 18px !important;
  border-bottom: 1px solid #f2dfe7 !important;
  background: linear-gradient(180deg, #fff 0%, #FDECF2 100%) !important;
}

html body:has(.adm-main) .adm-sidebar-toggle {
  z-index: 3;
  box-shadow: 0 6px 16px rgba(125, 38, 77, .12);
}

html body:has(.adm-main) .adm-main {
  min-width: 0;
  background: #FDECF2 !important;
}

html body:has(.adm-main) .adm-topbar {
  min-height: 76px;
  background: #fff !important;
  border-bottom: 1px solid #FDECF2 !important;
  box-shadow: 0 5px 20px rgba(125, 38, 77, .05);
  z-index: 200;
}

html body:has(.adm-main) .adm-content {
  max-width: 1600px;
  margin-inline: auto;
  padding: clamp(20px, 3vw, 42px) clamp(16px, 3vw, 44px) 64px !important;
}

html body:has(.adm-main) :is(.adm-card, .adm-table-wrap, .adm-modal, .adm-img-card) {
  border: 1px solid #FDECF2 !important;
  border-radius: var(--tt-ui-radius-lg) !important;
  box-shadow: 0 12px 36px rgba(125, 38, 77, .07) !important;
}

html body:has(.adm-main) .adm-card-head {
  min-height: 64px;
  padding: 18px 22px !important;
  background: linear-gradient(180deg, #fff 0%, #fffafc 100%) !important;
  border-bottom: 1px solid #f2dfe7 !important;
}

html body:has(.adm-main) .adm-card-body {
  padding: clamp(18px, 2.2vw, 28px) !important;
}

html body:has(.adm-main) :is(.adm-engagement-toolbar, .adm-engagement-list,
  .adm-notification-card, .adm-section-header, .adm-bulk-toolbar) {
  border-radius: var(--tt-ui-radius-md) !important;
}

html body:has(.adm-main) :is(.adm-engagement-toolbar, .adm-bulk-toolbar) {
  background: #fff1f6 !important;
  border: 1px solid #FDECF2 !important;
  padding: 12px !important;
}

html body:has(.adm-main) .adm-table-wrap {
  overflow-x: auto;
  background: #fff !important;
}

html body:has(.adm-main) :is(.adm-table, .adm-table th, .adm-table td) {
  border-color: #f2dfe7 !important;
}

html body:has(.adm-main) .adm-table thead th {
  background: #fbe0ea !important;
  color:var(--color-text-primary,#222222) !important;
  font-size: 11px;
  letter-spacing: .055em;
  text-transform: uppercase;
}

html body:has(.adm-main) .adm-nav-item {
  min-height: 44px;
  margin: 3px 12px;
  border-radius: 12px;
}

html body:has(.adm-main) .adm-nav-item.active {
  background: #fbe0ea !important;
  color:var(--color-text-primary,#222222) !important;
  box-shadow: inset 3px 0 0 var(--color-brand-primary, #F8AACA);
}

html body:has(.adm-main) :is(.adm-btn-primary, .adm-btn-save) {
  min-height: 42px;
  border-radius: 999px !important;
  background: var(--color-brand-primary, #F8AACA) !important;
  border-color: var(--color-brand-primary, #F8AACA) !important;
  color:#222222 !important;
  font-weight: 800;
}

html body:has(.adm-main) :is(.adm-btn, .adm-btn-outline) {
  min-height: 42px;
  border-radius: 999px !important;
}

html body:has(.adm-main) :is(.adm-input, .adm-select, .adm-textarea) {
  min-height: 42px;
  border-radius: 12px !important;
  border-color: #e9cbd8 !important;
}

html body:has(.adm-main) :is(.adm-input, .adm-select, .adm-textarea):focus {
  border-color: var(--color-brand-primary, #F8AACA) !important;
  box-shadow: 0 0 0 3px rgba(196, 63, 112, .17) !important;
}

/* Responsive contract: menu never occupies the logo zone and toolbars can
   wrap/scroll without forcing the page wider than the viewport. */
@media (max-width: 900px) {
  html body:has(.adm-main) .adm-content { padding: 18px 16px 48px !important; }
  html body:has(.adm-main) .adm-card-head { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
  html body:has(.adm-main) :is(.adm-engagement-toolbar, .adm-bulk-toolbar) { overflow-x: auto; }
}

@media (max-width: 760px) {
  html body:not(:has(.adm-main)) :is(.tt-product-card, .tt-coll-card, .tt-coll-page-card,
    .tt-review-card, .tt-review-form) { border-radius: 16px !important; }
  html body:has(.adm-main) .adm-sidebar-logo { min-height: 76px; padding: 16px 14px 12px !important; }
  html body:has(.adm-main) .adm-content { padding: 14px 12px 38px !important; }
  html body:has(.adm-main) .adm-card { border-radius: 16px !important; }
  html body:has(.adm-main) .adm-card-body { padding: 16px !important; }
  html body:has(.adm-main) .adm-nav-item { margin-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html body:not(:has(.adm-main)) :is(.tt-product-card, .tt-coll-card, .tt-coll-page-card) {
    transition: none !important;
  }
}

:is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(196, 63, 112, .45) !important;
  outline-offset: 2px;
}

/* Tarjetas compartidas de producto: la etiqueta (Nuevo, Agotado o texto libre del panel) va arriba a la
   izquierda y el corazón (44 px, a 12 px del borde) arriba a la derecha. Un texto largo se corta con
   puntos suspensivos antes del corazón en lugar de meterse debajo. */
.tt-product-card .tt-product-badge {
  max-width: calc(100% - 76px);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Espaciado público compartido. Las tarjetas con imagen reciben el inset
   en su cuerpo; las tarjetas de texto lo reciben en la superficie completa. */
html body:not(:has(.adm-main)) :is(.tt-product-info, .tt-card-info,
  .tt-coll-page-body, .tt-look-card-body, .tt-look-card-foot) {
  padding: clamp(12px, 1.8vw, 20px);
  min-width: 0;
}
html body:not(:has(.adm-main)) :is(.tt-info-block, .tt-contact-info-item,
  .tt-trust-item, .tt-review-card, .tt-review-form, .tt-reviews-summary,
  .tt-review-thread-message, .cat-top, .perfil-card) {
  padding: var(--tt-ui-inset);
  min-width: 0;
}
html body:not(:has(.adm-main)) :is(.tt-editorial-content, .tt-watch-feature-content,
  .ck-panel-body) {
  padding: var(--tt-ui-inset);
}
/* No truncar información para forzar tarjetas de igual altura. */
html body:not(:has(.adm-main)) :is(.tt-product-name, .tt-card-name,
  .tt-coll-page-name, .tt-coll-page-desc, .tt-look-card-name,
  .tt-cart-item-name, .tt-review-comment) {
  -webkit-line-clamp: unset;
  white-space: normal;
  overflow-wrap: anywhere;
  max-height: none;
}
html body:not(:has(.adm-main)) :is(.tt-product-name, .tt-card-name,
  .tt-coll-page-name, .tt-coll-page-desc, .tt-look-card-name) {
  display: block;
  overflow: visible;
}
html body:not(:has(.adm-main)) :is(.tt-product-actions, .tt-card-actions, .tt-card-btns,
  .tt-collections-actions, .tt-404-actions) {
  gap: 10px;
  flex-wrap: wrap;
}
html body:not(:has(.adm-main)) :is(.tt-product-actions, .tt-card-actions, .tt-card-btns) > :is(a, button) {
  min-height: 44px;
  white-space: normal;
}
/* El ancho mínimo del CTA editorial no corresponde a los botones de tarjeta
   que comparten la misma sección de descubrimiento en la portada. */
html body:not(:has(.adm-main)) .tt-home-random-products .tt-product-actions .tt-btn {
  min-width: 0;
  max-width: 100%;
  padding-inline: 12px;
  white-space: normal;
}
html body:not(:has(.adm-main)) :is(.tt-coll-page-body, .tt-product-info,
  .tt-card-info) > :last-child { margin-bottom: 0; }
html body:not(:has(.adm-main)) :is(.tt-info-block, .tt-review-card,
  .tt-contact-info-item) > :first-child { margin-top: 0; }
html body:not(:has(.adm-main)) :is(.tt-info-block, .tt-review-card,
  .tt-contact-info-item) > :last-child { margin-bottom: 0; }

/* Los botones y formularios conservan sus contornos de estado. El bloque
   de características/acciones no necesita otro marco dentro de la ficha. */
html body:not(:has(.adm-main)) :is(.tt-specs-block, .tt-product-actions-panel) {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
html body:not(:has(.adm-main)) .tt-cart-item-info { min-width: 0; }
html body:not(:has(.adm-main)) .tt-cart-item-img { flex-shrink: 0; }
html body:not(:has(.adm-main)) :is(.tt-cart-header, .tt-cart-body, .tt-cart-footer) {
  padding-inline: var(--tt-ui-gutter);
}
html body:not(:has(.adm-main)) :is(.tt-colls-page-grid, .tt-products-grid):not(:has(.tt-skeleton, .tt-coll-page-skeleton)) {
  min-height: 0;
}
@media (max-width: 480px) {
  html body:not(:has(.adm-main)) .tt-product-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  html body:not(:has(.adm-main)) .tt-product-actions > :is(a, button) {
    width: 100%;
    flex: none;
  }
  html body:not(:has(.adm-main)) .cat-top { gap: 12px; }
}

/* Paleta y continuidad compartidas por todas las páginas, incluido el panel.
   Sólo se difumina el fondo: texto, imágenes y controles conservan nitidez. */
:root {
  --tt-flow-light: var(--color-brand-accent, #FDECF2);
  --tt-flow-pink: var(--color-brand-primary, #F8AACA);
  --tt-flow-join: color-mix(in srgb, var(--tt-flow-light) 50%, var(--tt-flow-pink));
  --tt-flow-fade: 70px;
  --tt-flow-canvas: linear-gradient(180deg, var(--tt-flow-light), var(--tt-flow-light));
}

html:root body,
html:root body :is(main, .cat-wrap, .login-page, .ck-body, .perfil-wrap, .tt-404-wrap, .adm-main, .adm-content, .adm-section) {
  background: var(--tt-flow-canvas) var(--tt-flow-light) !important;
  color: var(--color-text-primary, #222222) !important;
}

/* Cada bloque conserva su rosa pleno. Sólo 70 px de cada extremo se mezclan.
   Los bloques ocultos por hidden o display:none no cuentan en la secuencia. */
html:root :is(body, main, [role="main"], .cat-wrap) > :is(section:not([role="dialog"]), .cat-layout, .tt-footer):not([hidden]):not([style*="display: none"]):not([style*="display:none"]) {
  --tt-section-background: var(--color-brand-accent, #FDECF2);
  --tt-footer-logo-filter: url("#tt-brand-logo-tint");
  --tt-section-start: var(--tt-flow-join);
  --tt-section-end: var(--tt-flow-join);
  --tt-section-gradient: linear-gradient(180deg,
    var(--tt-section-start) 0%,
    var(--tt-section-background) min(var(--tt-flow-fade), 25%),
    var(--tt-section-background) max(calc(100% - var(--tt-flow-fade)), 75%),
    var(--tt-section-end) 100%);
  background: var(--tt-section-gradient) var(--tt-section-background) !important;
  color: var(--color-text-primary, #222222) !important;
  border-block-color: transparent !important;
  border-block-width: 0 !important;
  box-shadow: 0 1px 0 var(--tt-section-end) !important;
}

html:root :is(body, main, [role="main"], .cat-wrap) > :nth-child(even of :is(section:not([role="dialog"]), .cat-layout, .tt-footer):not([hidden]):not([style*="display: none"]):not([style*="display:none"])) {
  --tt-section-background: var(--color-brand-primary, #F8AACA);
  --tt-footer-logo-filter: url("#tt-brand-logo-tint-light");
}

html:root :is(body, main, [role="main"], .cat-wrap) > :nth-child(1 of :is(section:not([role="dialog"]), .cat-layout, .tt-footer):not([hidden]):not([style*="display: none"]):not([style*="display:none"])) {
  --tt-section-start: var(--tt-section-background);
}

html:root :is(body, main, [role="main"], .cat-wrap) > :nth-last-child(1 of :is(section:not([role="dialog"]), .cat-layout, .tt-footer):not([hidden]):not([style*="display: none"]):not([style*="display:none"])) {
  --tt-section-end: var(--tt-section-background);
}

html:root body .tt-footer {
  border-top-color: transparent !important;
}

html:root body :is(.tt-trust-item, .tt-look-card, .tt-review-card, .tt-editorial, .tt-watch-feature) {
  background: var(--color-background-surface, #FFFFFF) !important;
  color: var(--color-text-primary, #222222) !important;
}

/* Una capa continua llena el viewport aunque el bloque esté en un container. */
html:root body [data-tt-flow-block] {
  isolation: isolate;
  overflow: visible !important;
  opacity: 1 !important;
  transform: none !important;
}
html:root body [data-tt-flow-block] > [data-tt-flow-background] {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: var(--tt-flow-left, 0px);
  width: var(--tt-flow-width, 100%);
  top: calc(-1 * var(--tt-flow-before, 0px));
  bottom: calc(-1 * var(--tt-flow-after, 0px));
  border-radius: 0;
  background: linear-gradient(180deg,
    var(--tt-section-start) 0%,
    var(--tt-section-background) min(var(--tt-flow-fade), 25%),
    var(--tt-section-background) max(calc(100% - var(--tt-flow-fade)), 75%),
    var(--tt-section-end) 100%) !important;
}
html:root body #hero .tt-hero-media { background: transparent !important; }
html:root body { overflow-x: clip; }
html:root body :is(main,.cat-wrap):has([data-tt-flow-block]) {
  background: none !important; transform: none !important; opacity: 1 !important;
}
html:root body :is(.perfil-wrap,.login-page,.ck-body,[data-tt-visual-zone]):has([data-tt-flow-block]) {
  background: none !important; overflow: visible !important; transform: none !important;
}

/* La foto y el cuerpo forman una tarjeta blanca continua, con aire interior. */
html:root body:not(:has(.adm-main)) :is(.tt-product-card,.cat-product-card,.tt-card:has(.tt-card-img-wrap)) { border-radius:24px !important; overflow:hidden; background:#FFFFFF !important; }
html:root body:not(:has(.adm-main)) :is(.tt-product-card,.cat-product-card,.tt-card:has(.tt-card-img-wrap)) :is(.tt-product-img,.tt-card-img-wrap) { background:#FFFFFF !important; padding:clamp(10px,1.4vw,18px); }
html:root body:not(:has(.adm-main)) :is(.tt-product-card,.cat-product-card,.tt-card:has(.tt-card-img-wrap)) :is(.tt-product-img-real,.tt-card-img) { object-fit:contain; mix-blend-mode:normal; background:#FFFFFF !important; }

/* Marca contrastada sobre ambos rosas, siempre sin tarjeta de fondo. */
html:root body .tt-footer .tt-logo-link { display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0; border-radius:0; box-shadow:none; padding:0; margin-bottom:16px; }
html:root body .tt-footer .tt-logo-img { display:block; width:104px !important; height:56px !important; max-width:104px !important; max-height:56px !important; object-fit:cover !important; filter:var(--tt-footer-logo-filter,url("#tt-brand-logo-tint")) !important; opacity:1 !important; }

html:root body:not(:has(.adm-main)) .tt-product-card .tt-product-img-real { padding:clamp(10px,1.4vw,18px); box-sizing:border-box; }
html:root body.tt-product-maintenance #gallery-main, html:root body.tt-product-maintenance #gallery-main img { background:#FFFFFF !important; }

html:root body :is(.tt-card-color,.tt-variant-option).tt-stock-unavailable::after { white-space:nowrap; width:max-content; }

/* El tono asignado por el flujo decide sólo el tinte del logo. */
html:root body .tt-footer[data-tt-flow-block="light"] { --tt-footer-logo-filter:url("#tt-brand-logo-tint") !important; }
html:root body .tt-footer[data-tt-flow-block="pink"] { --tt-footer-logo-filter:url("#tt-brand-logo-tint-light") !important; }

/* Tarjetas: imagen transparente y separación visible del cuerpo descriptivo. */
html:root body:not(:has(.adm-main)) :is(.tt-product-card,.cat-product-card,.tt-card) :is(.tt-product-img,.tt-card-img-wrap,.tt-product-img-real,.tt-card-img)[class],
html:root body:not(:has(.adm-main)) .tt-card .tt-card-img-wrap > img,
html:root body:not(:has(.adm-main)) .tt-visual-product-card > img { background:transparent !important; }
html:root body:not(:has(.adm-main)) :is(.tt-product-card,.cat-product-card,.tt-card) > :is(.tt-product-info,.tt-card-info) { border-top:1px solid #D1D5DB !important; }
html:root body:not(:has(.adm-main)) .tt-visual-product-card > strong { display:block; border-top:1px solid #D1D5DB; margin-top:12px; padding-top:12px; }
/* El estado se distingue también en una captura, sin depender del botón. */
html:root body:not(:has(.adm-main)) :is(.tt-product-card,.cat-product-card,.tt-card).tt-stock-unavailable,
html:root body:not(:has(.adm-main)) .tt-visual-product-card:has(.tt-stock-label) { background:#F3F4F6 !important; }
html:root body:not(:has(.adm-main)) :is(.tt-product-card,.cat-product-card,.tt-card).tt-stock-unavailable :is(.tt-product-img-real,.tt-card-img-wrap img),
html:root body:not(:has(.adm-main)) .tt-visual-product-card:has(.tt-stock-label) > img { opacity:.55 !important; }

html:root body .tt-stock-label { color:#4B5563 !important; background:#E5E7EB !important; border-color:#9CA3AF !important; }