/* =========================================================
   CT THEME UI
   Azul noche · Violeta neón · Sombras 3D
   ========================================================= */

html {
  color-scheme: light;
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  background: #080d1b;
}

/* Evitar el cursor de texto en tarjetas y elementos decorativos.
   Los campos editables conservan el cursor de escritura. */

*,
*::before,
*::after {
  cursor: default;
}

a,
button,
select,
summary,
[role="button"],
.file-button,
.check-label,
input[type="checkbox"],
input[type="radio"],
input[type="file"] {
  cursor: pointer;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea,
[contenteditable="true"] {
  cursor: text;
}

button:disabled {
  cursor: not-allowed;
}

/* =========================================================
   BOTÓN DE TEMA
   ========================================================= */

.theme-toggle {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 39px;
  padding: 8px 12px;
  border: 1px solid #b9c8ec;
  border-radius: 10px;
  color: #344b91;
  background: #ffffff;
  box-shadow: 0 3px 0 #d7e0f3, 0 6px 12px rgba(19, 35, 80, 0.07);
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  transition:
    transform 0.16s,
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.16s;
}

.theme-toggle:hover {
  transform: translateY(-2px);
  border-color: #8d82e8;
  color: #4b3ab9;
  background: #f4f1ff;
  box-shadow: 0 5px 0 #d0c9f1, 0 8px 14px rgba(63, 48, 135, 0.10);
}

.theme-toggle:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #d0c9f1;
}

.theme-toggle-icon {
  display: inline-grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

/* =========================================================
   BOTÓN FLOTANTE PARA VOLVER ARRIBA
   ========================================================= */

.back-to-top {
  position: fixed;
  right: 23px;
  bottom: 23px;
  z-index: 999;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #5e78d7;
  border-radius: 12px;
  color: #ffffff;
  background: linear-gradient(140deg, #2458bb, #493b9e);
  box-shadow: 0 4px 0 #15295f, 0 8px 18px rgba(0, 0, 0, 0.18);
  font-family: Manrope, sans-serif;
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(9px);
  transition:
    opacity 0.2s,
    visibility 0.2s,
    transform 0.2s,
    background 0.2s,
    box-shadow 0.2s;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  border-color: #8299ff;
  background: linear-gradient(140deg, #2d70dc, #6548bd);
  box-shadow:
    0 5px 0 #1a3273,
    0 0 14px rgba(83, 103, 234, 0.18);
  transform: translateY(-3px);
}

.back-to-top:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #1a3273;
}

/* =========================================================
   TEMA OSCURO GENERAL
   ========================================================= */

html[data-theme="dark"] body {
  color: #e9edff;
  background-color: #080d1b;
}

html[data-theme="dark"] .site-header {
  border-color: #273452;
  background: rgba(10, 16, 32, 0.97);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .brand {
  color: #f0f3ff;
}

html[data-theme="dark"] .brand-mark {
  background: linear-gradient(135deg, #256ce1, #6446d2);
  box-shadow:
    0 4px 0 #203a82,
    0 0 13px rgba(67, 111, 245, 0.16);
}

html[data-theme="dark"] .header-nav {
  color: #bec9e3;
}

html[data-theme="dark"] .header-nav > a:not(.header-contact):hover,
html[data-theme="dark"] .back-link:hover {
  color: #a1baff;
}

html[data-theme="dark"] .header-contact {
  border: 1px solid #425bb7;
  color: #ffffff;
  background: linear-gradient(110deg, #1c3672, #433686);
  box-shadow:
    0 4px 0 #111d3c,
    0 0 12px rgba(73, 98, 226, 0.14);
}

html[data-theme="dark"] .header-contact:hover {
  border-color: #6a82e5;
  background: linear-gradient(110deg, #2858b4, #6043ad);
  box-shadow:
    0 5px 0 #15285b,
    0 0 17px rgba(79, 110, 245, 0.23);
}

html[data-theme="dark"] .theme-toggle {
  border-color: #48578a;
  color: #e2eaff;
  background: linear-gradient(130deg, #172545, #242247);
  box-shadow: 0 3px 0 #0b142b, 0 5px 11px rgba(0, 0, 0, 0.21);
}

html[data-theme="dark"] .theme-toggle:hover {
  border-color: #7e7be1;
  color: #ffffff;
  background: linear-gradient(130deg, #203c75, #463478);
  box-shadow:
    0 4px 0 #111c3b,
    0 0 14px rgba(106, 100, 232, 0.18);
}

html[data-theme="dark"] .button-primary {
  color: #ffffff;
  background: linear-gradient(110deg, #2865d5, #4d43b6);
  box-shadow:
    0 4px 0 #1b3d8e,
    0 7px 14px rgba(38, 78, 191, 0.19);
}

html[data-theme="dark"] .button-primary:hover {
  background: linear-gradient(110deg, #3279ef, #6850cf);
  box-shadow:
    0 5px 0 #1e408f,
    0 0 16px rgba(56, 107, 238, 0.18);
}

html[data-theme="dark"] .button-primary:active {
  box-shadow: 0 1px 0 #1e408f;
}

html[data-theme="dark"] .button-outline {
  border-color: #3b4a70;
  color: #d3ddfa;
  background: #151f38;
  box-shadow: 0 3px 0 #0b1326;
}

html[data-theme="dark"] .button-outline:hover {
  border-color: #7181ce;
  color: #ffffff;
  background: #202e51;
  box-shadow: 0 4px 0 #0b1326, 0 0 12px rgba(92, 112, 225, 0.12);
}

html[data-theme="dark"] .button-outline:active {
  box-shadow: 0 1px 0 #0b1326;
}

html[data-theme="dark"] .button-light {
  color: #e8edff;
  background: #1b2947;
  box-shadow: 0 4px 0 #0b1326, 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* =========================================================
   PORTADA PÚBLICA
   ========================================================= */

html[data-theme="dark"] .hero {
  background:
    radial-gradient(ellipse at 90% 12%, rgba(42, 93, 193, 0.20), transparent 37%),
    radial-gradient(ellipse at 6% 4%, rgba(93, 58, 161, 0.17), transparent 36%),
    linear-gradient(115deg, #0c1428, #111a32 63%, #0e192b);
}

html[data-theme="dark"] .hero::before {
  border-color: rgba(104, 112, 226, 0.19);
}

html[data-theme="dark"] .eyebrow {
  color: #93adff;
}

html[data-theme="dark"] .eyebrow-dot {
  background: #538dff;
  box-shadow: 0 0 0 4px rgba(83, 141, 255, 0.11);
}

html[data-theme="dark"] .hero h1 {
  color: #f1f4ff;
}

html[data-theme="dark"] .hero h1 span {
  background: linear-gradient(95deg, #70b4ff, #9c82ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html[data-theme="dark"] .hero-description {
  color: #bac7e2;
}

html[data-theme="dark"] .hero-trust {
  color: #c0cce5;
}

html[data-theme="dark"] .hero-trust span {
  border-color: #2d3b5d;
  color: #c5d1e9;
  background: rgba(18, 28, 51, 0.94);
}

html[data-theme="dark"] .hero-image-frame {
  border-color: #405384;
  background: #101b33;
  box-shadow:
    0 7px 0 #070d1b,
    0 17px 36px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .hero-image-frame::after {
  background: linear-gradient(100deg, rgba(10, 18, 42, 0.07), transparent 60%);
}

html[data-theme="dark"] .hero-image-glow {
  background: rgba(74, 83, 207, 0.17);
}

html[data-theme="dark"] .floating-tag {
  border-color: #3b496d;
  color: #e8edff;
  background: rgba(17, 27, 49, 0.97);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .floating-tag small {
  color: #aab9d7;
}

html[data-theme="dark"] .tag-icon {
  color: #c6d2ff;
  background: #29345a;
}

html[data-theme="dark"] .hero-sticker {
  border-color: #4b5aa4;
  color: #ffffff;
  background: linear-gradient(120deg, #17274e, #35337c);
  box-shadow: 0 4px 0 #0a1328, 0 9px 17px rgba(0, 0, 0, 0.26);
}

html[data-theme="dark"] .hero-sticker span {
  color: #a7d9ff;
}

/* =========================================================
   TARJETAS, FILTROS Y BÚSQUEDA
   ========================================================= */

html[data-theme="dark"] .benefit-row {
  border-color: #273451;
}

html[data-theme="dark"] .benefit-row b {
  color: #e7edff;
}

html[data-theme="dark"] .benefit-row small {
  color: #a9b7d2;
}

html[data-theme="dark"] .benefit-icon {
  border-color: #314475;
  color: #91b4ff;
  background: #182748;
}

html[data-theme="dark"] .benefit-row > div:nth-child(2) .benefit-icon {
  border-color: #255267;
  color: #73dfeb;
  background: #132f42;
}

html[data-theme="dark"] .benefit-row > div:nth-child(3) .benefit-icon {
  border-color: #594531;
  color: #ffca91;
  background: #35271e;
}

html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .finance-banner h2,
html[data-theme="dark"] .contact-section h2 {
  color: #edf2ff;
}

html[data-theme="dark"] .section-subtitle {
  color: #abb9d6;
}

html[data-theme="dark"] .heading-accent {
  color: #9a8dff;
}

html[data-theme="dark"] .search-box {
  border-color: #344363;
  color: #b5c3df;
  background: #111b32;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.15);
}

html[data-theme="dark"] .search-box:focus-within {
  border-color: #6c78d6;
  box-shadow: 0 0 0 3px rgba(92, 111, 228, 0.11);
}

html[data-theme="dark"] .search-box input {
  color: #eef2ff;
}

html[data-theme="dark"] .search-box input::placeholder {
  color: #8998b6;
}

html[data-theme="dark"] .search-box kbd {
  color: #d1d8ff;
  background: #252f53;
}

html[data-theme="dark"] .catalog-promo-strip {
  border-color: #34466d;
  color: #bbc8e2;
  background: linear-gradient(105deg, #141e39, #132638);
}

html[data-theme="dark"] .catalog-promo-strip strong {
  color: #eef2ff;
}

html[data-theme="dark"] .promo-icon {
  background: linear-gradient(135deg, #315ee8, #684bd2);
  box-shadow: 0 3px 0 #1b327b;
}

html[data-theme="dark"] .catalog-status {
  color: #aab8d4;
}

html[data-theme="dark"] .filter-chip {
  border-color: #34415f;
  color: #c1cce4;
  background: #121b31;
}

html[data-theme="dark"] .filter-chip:hover {
  border-color: #6979c9;
  color: #f2f4ff;
  background: #202b50;
}

html[data-theme="dark"] .filter-chip.active {
  border-color: #5269c4;
  color: #ffffff;
  background: linear-gradient(110deg, #214382, #403581);
  box-shadow: 0 3px 0 #101e42, 0 0 12px rgba(76, 104, 215, 0.12);
}

html[data-theme="dark"] .product-card {
  position: relative;
  border-color: #2d3b5b;
  color: #e9eeff;
  background: #111a30;
  box-shadow: 0 4px 0 #080f20, 0 8px 17px rgba(0, 0, 0, 0.22);
  transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
}

html[data-theme="dark"] .product-card:hover {
  border-color: #6479d5;
  transform: translateY(-4px);
  box-shadow:
    0 5px 0 #080f20,
    0 12px 25px rgba(0, 0, 0, 0.31),
    0 0 10px rgba(76, 96, 210, 0.12);
}

html[data-theme="dark"] .product-image {
  background: linear-gradient(135deg, #192746, #152036);
}

html[data-theme="dark"] .product-image img,
html[data-theme="dark"] .dialog-image img {
  mix-blend-mode: normal;
}

html[data-theme="dark"] .photo-placeholder {
  color: #9aabc9;
}

html[data-theme="dark"] .placeholder-icon {
  color: #7184ad;
}

html[data-theme="dark"] .product-badge {
  border-color: #435275;
  color: #e5ebff;
  background: #192542;
}

html[data-theme="dark"] .featured-badge {
  border-color: #6165b3;
  color: #dce0ff;
  background: #292d5c;
}

html[data-theme="dark"] .product-category {
  color: #91aaff;
}

html[data-theme="dark"] .product-card h3 {
  color: #f0f3ff;
}

html[data-theme="dark"] .product-description {
  color: #b0bdd8;
}

html[data-theme="dark"] .spec-pill {
  border-color: #354361;
  color: #c5d0e7;
  background: #1b2740;
}

html[data-theme="dark"] .product-price-label {
  color: #a4b3ce;
}

html[data-theme="dark"] .product-price {
  color: #a6c2ff;
  background: none;
  -webkit-text-fill-color: currentColor;
}

html[data-theme="dark"] .product-price-secondary {
  color: #b3c0d9;
}

html[data-theme="dark"] .product-financing {
  border-color: #314873;
  color: #bfd3ff;
  background: #192b4a;
}

html[data-theme="dark"] .buy-button {
  border-color: #4968c9;
  color: #ffffff;
  background: linear-gradient(110deg, #234da2, #3b3687);
  box-shadow: 0 3px 0 #162853, 0 6px 11px rgba(0, 0, 0, 0.20);
}

html[data-theme="dark"] .buy-button:hover {
  border-color: #7593f1;
  background: linear-gradient(110deg, #286aca, #5945b2);
  box-shadow:
    0 5px 0 #1b3478,
    0 0 14px rgba(73, 103, 233, 0.18);
}

html[data-theme="dark"] .detail-button {
  border-color: #3b4e7b;
  color: #c1ceff;
  background: #1a2947;
  box-shadow: 0 3px 0 #101c35;
}

html[data-theme="dark"] .detail-button:hover {
  border-color: #6275ca;
  background: #273967;
}

/* =========================================================
   ENVÍOS, FINANCIAMIENTO Y CONTACTO
   ========================================================= */

html[data-theme="dark"] .empty-state {
  border-color: #3a496b;
  color: #aab8d5;
  background: #111a30;
}

html[data-theme="dark"] .empty-state h3 {
  color: #eef2ff;
}

html[data-theme="dark"] .shipping-card {
  border-color: #2d3a57;
  color: #e9eeff;
  background: #111a30;
  box-shadow: 0 4px 0 #080f20, 0 7px 14px rgba(0, 0, 0, 0.20);
}

html[data-theme="dark"] .shipping-card:hover {
  border-color: #586bac;
  box-shadow: 0 5px 0 #080f20, 0 12px 20px rgba(0, 0, 0, 0.26);
}

html[data-theme="dark"] .shipping-number {
  color: #283657;
}

html[data-theme="dark"] .shipping-card h3 {
  color: #edf2ff;
}

html[data-theme="dark"] .shipping-card p {
  color: #afbdd7;
}

html[data-theme="dark"] .shipping-label {
  color: #c4cfe4;
  background: #222e49;
}

html[data-theme="dark"] .shipping-label.label-free {
  color: #8ee3c0;
  background: #153b36;
}

html[data-theme="dark"] .finance-banner {
  border-color: #344982;
  color: #edf2ff;
  background:
    radial-gradient(ellipse at 92% 0%, rgba(43, 104, 196, 0.19), transparent 30%),
    linear-gradient(115deg, #101a32, #1b2850 65%, #292650);
  box-shadow: 0 5px 0 #080f20, 0 12px 24px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .finance-symbol {
  border-color: #4a5d9c;
  color: #d7e4ff;
  background: linear-gradient(140deg, #244b99, #443889);
}

html[data-theme="dark"] .finance-banner .eyebrow {
  color: #a1b9ff;
}

html[data-theme="dark"] .finance-banner p:not(.eyebrow) {
  color: #c3cee5;
}

html[data-theme="dark"] .contact-section {
  border-color: #2c3d6b;
  background: linear-gradient(115deg, #111d38, #17213c 70%, #1c203d);
  box-shadow: 0 5px 0 #080f20;
}

html[data-theme="dark"] .contact-section h2 {
  color: #eff3ff;
}

html[data-theme="dark"] .contact-section p:not(.eyebrow) {
  color: #b4c2dd;
}

html[data-theme="dark"] .site-footer {
  border-color: #25314e;
  color: #a3b1ce;
  background: #0b1223;
}

html[data-theme="dark"] .footer-brand {
  color: #edf1ff;
}

/* =========================================================
   DETALLES DEL PRODUCTO Y COLORES
   ========================================================= */

html[data-theme="dark"] .product-dialog {
  border-color: #354367;
  color: #e9eeff;
  background: #10192d;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.50);
}

html[data-theme="dark"] .product-dialog::backdrop {
  background: rgba(3, 7, 18, 0.80);
}

html[data-theme="dark"] .dialog-close {
  border-color: #3a4969;
  color: #eff3ff;
  background: #192543;
}

html[data-theme="dark"] .dialog-image {
  background: linear-gradient(135deg, #172442, #152039);
}

html[data-theme="dark"] .dialog-detail h2,
html[data-theme="dark"] .dialog-detail h3 {
  color: #e9efff;
}

html[data-theme="dark"] .dialog-detail p,
html[data-theme="dark"] .dialog-specs {
  color: #b2bfd9;
}

html[data-theme="dark"] .product-color-heading {
  color: #a9b8d6;
}

html[data-theme="dark"] .product-color-chip {
  border-color: #394763;
  color: #c9d5eb;
  background: #18243d;
}

html[data-theme="dark"] .dialog-color-card {
  border-color: #34415d;
  background: #131e35;
}

html[data-theme="dark"] .dialog-color-image {
  background: #202b45;
}

html[data-theme="dark"] .dialog-color-info strong {
  color: #e8edff;
}

html[data-theme="dark"] .color-availability.available {
  color: #95e7c2;
  background: #173f38;
}

html[data-theme="dark"] .color-availability.order {
  color: #ffcc88;
  background: #49341f;
}

html[data-theme="dark"] .dialog-color-info a {
  color: #9bb8ff;
}

/* =========================================================
   ADMINISTRACIÓN
   ========================================================= */

html[data-theme="dark"] .admin-body {
  color: #e9eeff;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(47, 88, 174, 0.17), transparent 34%),
    radial-gradient(ellipse at 100% 12%, rgba(101, 70, 172, 0.14), transparent 30%),
    #090f20;
}

html[data-theme="dark"] .admin-header {
  background: rgba(10, 16, 32, 0.97);
}

html[data-theme="dark"] .admin-header .back-link {
  color: #bbc7e1;
}

html[data-theme="dark"] .admin-main h1 {
  color: #eef2ff;
}

html[data-theme="dark"] .admin-main .section-subtitle {
  color: #acbad7;
}

html[data-theme="dark"] .admin-alert {
  color: #bdc9e2;
}

html[data-theme="dark"] .login-panel {
  border-color: #34415f;
  color: #e9eeff;
  background: #111a30;
  box-shadow: 0 5px 0 #080f20, 0 18px 38px rgba(0, 0, 0, 0.29);
}

html[data-theme="dark"] .login-panel h1 {
  color: #eff3ff;
}

html[data-theme="dark"] .login-panel .section-subtitle,
html[data-theme="dark"] .admin-help {
  color: #b0bdd7;
}

html[data-theme="dark"] .admin-help code {
  color: #d4dfff;
  background: #222e49;
}

html[data-theme="dark"] .admin-form label {
  color: #dbe4f8;
}

html[data-theme="dark"] .admin-form input:not([type="checkbox"]):not([type="file"]),
html[data-theme="dark"] .admin-form select,
html[data-theme="dark"] .admin-form textarea {
  border-color: #3a4969;
  color: #edf2ff;
  background: #0d162a;
}

html[data-theme="dark"] .admin-form input::placeholder,
html[data-theme="dark"] .admin-form textarea::placeholder {
  color: #8292b2;
}

html[data-theme="dark"] .admin-form input:focus,
html[data-theme="dark"] .admin-form select:focus,
html[data-theme="dark"] .admin-form textarea:focus {
  border-color: #7887e5;
  background: #111b32;
  box-shadow: 0 0 0 3px rgba(93, 108, 229, 0.11);
}

html[data-theme="dark"] .admin-form small {
  color: #abb9d6;
}

html[data-theme="dark"] .form-status {
  color: #b0bed9;
}

html[data-theme="dark"] .form-status.error {
  color: #ffa3a3;
}

html[data-theme="dark"] .form-status.success {
  color: #82e3ba;
}

html[data-theme="dark"] .admin-welcome {
  border-color: #364a83;
  color: #edf2ff;
  background:
    radial-gradient(ellipse at 0% 100%, rgba(20, 140, 190, 0.16), transparent 36%),
    linear-gradient(115deg, #101a33, #1a2b55 68%, #292652);
  box-shadow: 0 5px 0 #070d1b, 0 12px 24px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .admin-welcome-kicker {
  color: #a5defd;
}

html[data-theme="dark"] .admin-welcome h2,
html[data-theme="dark"] .admin-welcome h2 span {
  color: #eaf0ff;
}

html[data-theme="dark"] .admin-welcome h2 span {
  color: #a4baff;
}

html[data-theme="dark"] .admin-welcome-copy > p:not(.admin-welcome-kicker) {
  color: #c4cfe6;
}

html[data-theme="dark"] .admin-welcome-tags span {
  border-color: #40517c;
  color: #dde6ff;
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .admin-welcome-image {
  border-color: #3d4f7b;
  background: #172444;
  box-shadow: 0 5px 0 #080f20, 0 11px 22px rgba(0, 0, 0, 0.26);
}

html[data-theme="dark"] .admin-image-badge {
  border-color: #485b8e;
  color: #edf1ff;
  background: rgba(12, 22, 46, 0.91);
}

html[data-theme="dark"] .admin-card {
  border-color: #2c3957;
  color: #e8edff;
  background: #111a30;
  box-shadow: 0 4px 0 #080f20, 0 8px 17px rgba(0, 0, 0, 0.20);
}

html[data-theme="dark"] .admin-card:hover {
  border-color: #465a8b;
  box-shadow: 0 4px 0 #080f20, 0 10px 21px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .card-heading h2,
html[data-theme="dark"] .import-card h2,
html[data-theme="dark"] .team-preview-heading h2 {
  color: #eaf0ff;
}

html[data-theme="dark"] .card-heading p,
html[data-theme="dark"] .import-card p,
html[data-theme="dark"] .team-preview-heading p:not(.eyebrow) {
  color: #acbad7;
}

html[data-theme="dark"] .text-button {
  color: #a9bfff;
}

html[data-theme="dark"] .check-label {
  border-color: #34415d;
  color: #d6e0f5;
  background: #151f37;
}

html[data-theme="dark"] .admin-product-row {
  border-color: #303e5d;
  background: #121d34;
}

html[data-theme="dark"] .admin-product-row:hover {
  border-color: #5969a5;
  box-shadow: 0 6px 13px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .admin-product-thumb {
  border-color: #354360;
  background: #202d49;
}

html[data-theme="dark"] .admin-product-name {
  color: #edf1ff;
}

html[data-theme="dark"] .admin-product-meta {
  color: #a8b7d3;
}

html[data-theme="dark"] .admin-mini-button {
  border-color: #415178;
  color: #cbd8ff;
  background: #1b2948;
  box-shadow: 0 2px 0 #0b1428;
}

html[data-theme="dark"] .admin-mini-button:hover {
  border-color: #7181ce;
  color: #ffffff;
  background: #293b68;
}

html[data-theme="dark"] .admin-mini-button.danger {
  border-color: #6b3d55;
  color: #ffb7c1;
  background: #382133;
}

html[data-theme="dark"] .status-pill {
  color: #ffd291;
  background: #48341f;
}

html[data-theme="dark"] .status-pill.published {
  color: #91e5c0;
  background: #153c35;
}

html[data-theme="dark"] .colors-editor-section {
  border-color: #36456f;
  background: linear-gradient(130deg, #14213d, #132436);
}

html[data-theme="dark"] .colors-editor-heading h3 {
  color: #c3d3ff;
}

html[data-theme="dark"] .colors-editor-heading p {
  color: #aab9d7;
}

html[data-theme="dark"] .colors-empty-hint {
  border-color: #435376;
  color: #aab9d7;
  background: #111c33;
}

html[data-theme="dark"] .color-admin-row {
  border-color: #35425f;
  background: #111a30;
  box-shadow: 0 3px 0 #0a1121;
}

html[data-theme="dark"] .color-admin-row label {
  color: #d6e0f7;
}

html[data-theme="dark"] .color-admin-row input:not([type="file"]),
html[data-theme="dark"] .color-admin-row select {
  border-color: #3a4969;
  color: #edf1ff;
  background: #0d162a;
}

html[data-theme="dark"] .color-admin-row input[type="file"] {
  border-color: #3c4c70;
  color: #bac7e1;
  background: #101a30;
}

html[data-theme="dark"] .color-row-status {
  color: #a7b5d1;
}

/* Equipo y permisos */

html[data-theme="dark"] .team-preview-card {
  background: linear-gradient(135deg, #111a30, #141c34);
}

html[data-theme="dark"] .team-preview-status {
  border-color: #46558b;
  color: #c6d2ff;
  background: #222d50;
}

html[data-theme="dark"] .team-role-card {
  border-color: #35415f;
  background: #141e35;
  box-shadow: 0 3px 0 #080f20;
}

html[data-theme="dark"] .team-role-card:hover {
  border-color: #5969a0;
  box-shadow: 0 4px 0 #080f20, 0 8px 14px rgba(0, 0, 0, 0.23);
}

html[data-theme="dark"] .owner-role .team-role-icon {
  border-color: #286253;
  color: #93e7c5;
  background: #173b36;
}

html[data-theme="dark"] .admin-role .team-role-icon {
  border-color: #3d4d88;
  color: #b9c7ff;
  background: #202d58;
}

html[data-theme="dark"] .editor-role .team-role-icon {
  border-color: #59437d;
  color: #d9bcff;
  background: #352647;
}

html[data-theme="dark"] .viewer-role .team-role-icon {
  border-color: #705333;
  color: #ffd099;
  background: #3e3023;
}

html[data-theme="dark"] .team-role-card h3 {
  color: #e6edff;
}

html[data-theme="dark"] .team-role-card p {
  color: #afbdd9;
}

html[data-theme="dark"] .team-security-note {
  border-left-color: #7186ed;
  color: #bfcae6;
  background: #1a294b;
}

html[data-theme="dark"] .team-security-note strong {
  color: #c4d1ff;
}

html[data-theme="dark"] .file-button {
  border-color: #3c4e79;
  color: #d6e1ff;
  background: #172442;
  box-shadow: 0 3px 0 #0a1225;
}

html[data-theme="dark"] .file-button:hover {
  background: #21345b;
}

/* =========================================================
   EFECTOS NEÓN MODERADOS
   ========================================================= */

html[data-theme="dark"] .button-primary,
html[data-theme="dark"] .buy-button {
  transition:
    transform 0.15s,
    box-shadow 0.18s,
    border-color 0.18s,
    background 0.18s;
}

html[data-theme="dark"] .button-primary:hover,
html[data-theme="dark"] .buy-button:hover {
  box-shadow:
    0 5px 0 #172f72,
    0 0 13px rgba(69, 114, 244, 0.20);
}

html[data-theme="dark"] .product-card:hover,
html[data-theme="dark"] .admin-product-row:hover {
  border-color: #6075cd;
}

html[data-theme="dark"] .detail-button:hover,
html[data-theme="dark"] .admin-mini-button:hover {
  border-color: #7788d8;
  box-shadow: 0 3px 0 #0d1731, 0 0 10px rgba(100, 119, 225, 0.12);
}

/* Controles no interactivos: cursor de flecha, no de texto */

.product-card,
.product-card *,
.benefit-row,
.benefit-row *,
.shipping-card,
.shipping-card *,
.team-role-card,
.team-role-card *,
.admin-product-row,
.admin-product-name,
.admin-product-meta,
.admin-welcome,
.admin-welcome-copy,
.admin-welcome-copy *,
.card-heading h2,
.card-heading p,
.import-card h2,
.import-card p,
.section-heading h2,
.section-heading p,
.hero-copy,
.hero-copy h1,
.hero-copy p,
.floating-tag,
.floating-tag *,
.catalog-promo-strip,
.catalog-promo-strip *,
.admin-alert,
.status-pill,
.product-badge {
  cursor: default;
}

.product-card a,
.product-card button,
.admin-product-row button,
.admin-product-row a,
.floating-tag a,
.header-nav a,
.site-header a,
.contact-section a,
.finance-banner a,
.shipping-card a,
.theme-toggle,
.back-to-top {
  cursor: pointer;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea,
[contenteditable="true"] {
  cursor: text;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {
  .theme-toggle {
    min-height: 35px;
    padding: 7px 9px;
    gap: 5px;
    font-size: 11px;
  }

  .theme-toggle-label {
    display: none;
  }

  .admin-header .theme-toggle {
    margin-left: auto;
    margin-right: 10px;
  }

  .back-to-top {
    right: 15px;
    bottom: 15px;
    width: 43px;
    height: 43px;
    border-radius: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .back-to-top,
  .product-card,
  .admin-product-row,
  .button,
  .buy-button {
    transition: none !important;
  }
}
/* =========================================================
   CT NEON BOOST — AZUL ELECTRICO + VIOLETA
   Pegar al FINAL de theme-ui.css
   ========================================================= */

/* Línea de neón bajo el encabezado */

html[data-theme="dark"] .site-header {
  position: sticky;
  isolation: isolate;
  border-bottom-color: #293c6a;
}

html[data-theme="dark"] .site-header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    #267bff 22%,
    #7665ff 48%,
    #a45aff 68%,
    transparent
  );
  opacity: .8;
}

/* Logo con iluminación azul-violeta */

html[data-theme="dark"] .brand-mark {
  box-shadow:
    0 4px 0 #172c6a,
    0 0 11px rgba(48, 117, 255, .25),
    0 0 22px rgba(111, 78, 255, .16);
  transition: box-shadow .25s, filter .25s;
}

html[data-theme="dark"] .brand:hover .brand-mark {
  filter: brightness(1.12);
  box-shadow:
    0 4px 0 #172c6a,
    0 0 15px rgba(48, 117, 255, .42),
    0 0 28px rgba(128, 85, 255, .25);
}

/* Botón principal: resplandor más visible al interactuar */

html[data-theme="dark"] .button-primary {
  border: 1px solid #597df0;
  background: linear-gradient(110deg, #225cce, #5544c5);
  box-shadow:
    0 4px 0 #19387e,
    0 0 10px rgba(49, 104, 255, .15);
}

html[data-theme="dark"] .button-primary:hover {
  border-color: #8ab2ff;
  background: linear-gradient(110deg, #2477ed, #6b4ce2);
  box-shadow:
    0 5px 0 #19387e,
    0 0 12px rgba(47, 132, 255, .48),
    0 0 26px rgba(110, 76, 255, .28);
}

html[data-theme="dark"] .button-primary:active {
  box-shadow:
    0 1px 0 #19387e,
    0 0 10px rgba(47, 132, 255, .25);
}

/* WhatsApp y botones de compra */

html[data-theme="dark"] .header-contact,
html[data-theme="dark"] .buy-button {
  border-color: #455ec5;
  box-shadow:
    0 4px 0 #142958,
    0 0 9px rgba(52, 102, 235, .12);
}

html[data-theme="dark"] .header-contact:hover,
html[data-theme="dark"] .buy-button:hover {
  border-color: #7d9cff;
  box-shadow:
    0 5px 0 #142958,
    0 0 13px rgba(52, 122, 255, .45),
    0 0 24px rgba(105, 77, 246, .25);
}

/* Portada: halo frío, más profundo y sin tanta luz blanca */

html[data-theme="dark"] .hero {
  background:
    radial-gradient(
      ellipse at 87% 35%,
      rgba(35, 106, 224, .18),
      transparent 34%
    ),
    radial-gradient(
      ellipse at 42% 102%,
      rgba(98, 61, 202, .13),
      transparent 38%
    ),
    linear-gradient(115deg, #0a1225, #101a35 62%, #0c172b);
}

html[data-theme="dark"] .hero h1 span {
  background: linear-gradient(
    95deg,
    #68b6ff 0%,
    #7388ff 48%,
    #b18aff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html[data-theme="dark"] .hero-image-frame {
  border-color: #435ca2;
  box-shadow:
    0 6px 0 #090f20,
    0 13px 28px rgba(0, 0, 0, .28),
    0 0 13px rgba(47, 103, 220, .15);
}

html[data-theme="dark"] .hero-image-frame:hover {
  border-color: #718bde;
  box-shadow:
    0 6px 0 #090f20,
    0 15px 30px rgba(0, 0, 0, .32),
    0 0 17px rgba(47, 103, 220, .26);
}

/* Tarjetas: borde superior iluminado */

html[data-theme="dark"] .product-card {
  border-color: #2c3d63;
}

html[data-theme="dark"] .product-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 12%;
  width: 76%;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    #368dff 28%,
    #8868ff 68%,
    transparent
  );
  opacity: .62;
  transition: opacity .2s, box-shadow .2s;
}

html[data-theme="dark"] .product-card:hover::before {
  opacity: 1;
  box-shadow:
    0 0 8px rgba(54, 141, 255, .55),
    0 0 15px rgba(136, 104, 255, .28);
}

html[data-theme="dark"] .product-card:hover {
  border-color: #6376c4;
  box-shadow:
    0 5px 0 #080f20,
    0 12px 24px rgba(0, 0, 0, .28),
    0 0 12px rgba(65, 103, 219, .13);
}

/* Categoría activa con acento eléctrico */

html[data-theme="dark"] .filter-chip.active {
  border-color: #6179e7;
  background: linear-gradient(110deg, #214c9b, #4c3a96);
  box-shadow:
    0 3px 0 #101e42,
    0 0 9px rgba(63, 115, 238, .25);
}

html[data-theme="dark"] .filter-chip:hover {
  border-color: #7288ed;
  box-shadow: 0 0 9px rgba(76, 110, 230, .13);
}

/* Panel de administración: acento azul y violeta */

html[data-theme="dark"] .admin-welcome {
  border-color: #3a5194;
  background:
    radial-gradient(
      ellipse at 0% 100%,
      rgba(22, 147, 204, .15),
      transparent 36%
    ),
    radial-gradient(
      ellipse at 85% 0%,
      rgba(109, 75, 209, .18),
      transparent 36%
    ),
    linear-gradient(115deg, #101a34, #1a2b55 68%, #292652);
}

html[data-theme="dark"] .admin-welcome-image {
  border-color: #435da0;
  box-shadow:
    0 5px 0 #080f20,
    0 11px 22px rgba(0, 0, 0, .24),
    0 0 10px rgba(54, 101, 222, .13);
}

html[data-theme="dark"] .admin-card:hover {
  border-color: #4e6092;
  box-shadow:
    0 4px 0 #080f20,
    0 10px 21px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .admin-mini-button:hover {
  border-color: #8279df;
  box-shadow:
    0 2px 0 #0b1428,
    0 0 9px rgba(119, 108, 233, .18);
}

/* Controles de tema y volver arriba */

html[data-theme="dark"] .theme-toggle:hover {
  border-color: #8494f0;
  box-shadow:
    0 4px 0 #111c3b,
    0 0 11px rgba(104, 113, 239, .22);
}

html[data-theme="dark"] .back-to-top:hover {
  border-color: #899cff;
  box-shadow:
    0 5px 0 #1a3273,
    0 0 12px rgba(58, 127, 255, .38),
    0 0 24px rgba(114, 79, 238, .20);
}

/* Animación discreta en hover, sin parpadeo constante */

@media (prefers-reduced-motion: no-preference) {
  html[data-theme="dark"] .product-card:hover {
    transform: translateY(-4px);
  }

  html[data-theme="dark"] .theme-toggle:hover,
  html[data-theme="dark"] .button-primary:hover,
  html[data-theme="dark"] .buy-button:hover {
    filter: brightness(1.06);
  }
}

/* Mantener el enfoque visible para navegación con teclado */

:focus-visible {
  outline: 2px solid #7294ff;
  outline-offset: 3px;
}

html[data-theme="dark"] :focus-visible {
  outline-color: #a39aff;
}
/* =========================================================
   AJUSTES FINALES — TEMA CLARO Y BÚSQUEDA
   Agregar al final de theme-ui.css
   ========================================================= */

/* Tema claro: menos blanco puro y más profundidad */

html[data-theme="light"] body {
  background: #f3f6fc;
  color: #182543;
}

html[data-theme="light"] .site-header {
  background: rgba(248, 250, 255, 0.97);
  border-bottom-color: #dce4f3;
  box-shadow: 0 3px 12px rgba(31, 48, 96, 0.055);
}

html[data-theme="light"] .hero {
  background:
    radial-gradient(
      ellipse at 88% 20%,
      rgba(74, 103, 197, 0.10),
      transparent 36%
    ),
    linear-gradient(
      115deg,
      #eaf0fc 0%,
      #f0f1fc 55%,
      #e9f4fc 100%
    );
}

html[data-theme="light"] .benefit-row {
  background: #edf2fa;
  border-bottom-color: #d6e0f0;
}

html[data-theme="light"] .catalog-section,
html[data-theme="light"] .shipping-section {
  background: transparent;
}

/* Acercar un poco las secciones sin perder espacio visual */

html[data-theme="light"] .catalog-section,
html[data-theme="light"] .shipping-section {
  padding-top: 64px;
  padding-bottom: 64px;
}

html[data-theme="light"] .product-card {
  border-color: #dce4f2;
  background: #fbfcff;
  box-shadow:
    0 3px 0 #dfe6f2,
    0 7px 15px rgba(30, 47, 93, 0.055);
}

html[data-theme="light"] .product-card:hover {
  border-color: #b8c9ef;
  box-shadow:
    0 5px 0 #d4dff2,
    0 13px 25px rgba(30, 47, 93, 0.10);
}

html[data-theme="light"] .product-image {
  background: linear-gradient(135deg, #e9effb, #eaf6fc);
}

html[data-theme="light"] .shipping-card {
  border-color: #dce4f1;
  background: #f9fbff;
  box-shadow:
    0 3px 0 #e0e7f2,
    0 7px 14px rgba(30, 47, 93, 0.045);
}

html[data-theme="light"] .contact-section {
  border-color: #d5dff3;
  background: linear-gradient(110deg, #e8effc, #efedfb 70%, #e9f5fb);
  box-shadow: 0 4px 0 #dfe5f2;
}

html[data-theme="light"] .catalog-promo-strip {
  border-color: #d5e0f4;
  background: linear-gradient(105deg, #eaf0fc, #eaf6fc);
}

html[data-theme="light"] .finance-banner {
  background: linear-gradient(115deg, #172344, #25356d 68%, #32316f);
  box-shadow:
    0 6px 0 #111c37,
    0 12px 24px rgba(28, 37, 80, 0.13);
}

/* BÚSQUEDA: aproximadamente 20 % más grande */

html[data-theme="light"] .search-box {
  min-width: 400px;
  height: 55px;
  gap: 12px;
  padding: 0 15px;
  border-color: #cbd7ec;
  border-radius: 12px;
  background: #fbfcff;
  box-shadow:
    0 4px 0 #e0e7f3,
    0 7px 15px rgba(35, 55, 105, 0.055);
}

html[data-theme="light"] .search-box > span {
  font-size: 27px;
  flex-shrink: 0;
}

html[data-theme="light"] .search-box input {
  min-width: 0;
  font-size: 16px;
}

html[data-theme="light"] .search-box input::placeholder {
  color: #7786a1;
  opacity: 1;
}

html[data-theme="light"] .search-box kbd {
  padding: 5px 8px;
  border-radius: 6px;
  background: #e9efff;
  color: #3853a2;
  font-size: 12px;
}

html[data-theme="light"] .search-box:focus-within {
  border-color: #6e83d9;
  box-shadow:
    0 3px 0 #d8e1f4,
    0 0 0 3px rgba(65, 93, 200, 0.09);
}

/* Mantener la barra adaptada a pantallas pequeñas */

@media (max-width: 760px) {
  html[data-theme="light"] .catalog-section,
  html[data-theme="light"] .shipping-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  html[data-theme="light"] .search-box {
    width: 100%;
    min-width: 0;
    height: 54px;
    padding: 0 12px;
  }

  html[data-theme="light"] .search-box input {
    font-size: 15px;
  }

  html[data-theme="light"] .search-box kbd {
    font-size: 11px;
  }
}

/* No alterar el diseño oscuro */

html[data-theme="dark"] .catalog-section,
html[data-theme="dark"] .shipping-section {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (max-width: 760px) {
  html[data-theme="dark"] .catalog-section,
  html[data-theme="dark"] .shipping-section {
    padding-top: 54px;
    padding-bottom: 54px;
  }
}
/* =========================================================
   CATÁLOGO — TIPOGRAFÍA MÁS GRANDE Y LEGIBLE
   Agregar al final de theme-ui.css
   ========================================================= */

/* Encabezado de la sección */
.section-heading h2 {
  font-size: clamp(30px, 3vw, 38px);
  line-height: 1.25;
}

.section-subtitle {
  font-size: 15px;
  line-height: 1.65;
}

/* Búsqueda */
.search-box input {
  font-size: 18px;
}

.search-box kbd {
  font-size: 13px;
}

/* Categorías */
.filter-chip {
  font-size: 14px;
  padding: 10px 17px;
}

/* Estado del catálogo */
.catalog-status {
  font-size: 14px;
}

/* Tarjetas de los productos */
.product-category {
  font-size: 12px;
  letter-spacing: 0.8px;
}

.product-card h3 {
  min-height: 0;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.45px;
  margin-bottom: 10px;
}

.product-description {
  min-height: 0;
  font-size: 15px;
  line-height: 1.65;
}

.spec-pill {
  font-size: 12px;
  line-height: 1.45;
  padding: 5px 8px;
}

.product-price-label {
  font-size: 12px;
  letter-spacing: 0.7px;
}

.product-price {
  font-size: 27px;
  line-height: 1.35;
}

.product-price-secondary {
  font-size: 14px;
}

.product-financing {
  font-size: 13px;
  line-height: 1.55;
  padding: 9px;
}

.buy-button {
  font-size: 13px;
  line-height: 1.4;
  padding: 12px 8px;
}

.detail-button {
  font-size: 21px;
}

/* Colores disponibles */
.product-color-heading {
  font-size: 11px;
}

.product-color-chip {
  font-size: 12px;
  padding: 5px 8px;
}

.product-color-chip small {
  font-size: 10px;
}

/* Ventana de detalles */
.dialog-detail h2 {
  font-size: 28px;
  line-height: 1.3;
}

.dialog-detail p,
.dialog-specs {
  font-size: 15px;
  line-height: 1.7;
}

.dialog-detail h3,
.dialog-colors h3 {
  font-size: 19px;
}

.dialog-color-info strong {
  font-size: 14px;
}

.dialog-color-info a {
  font-size: 13px;
}

/* Banner y opciones de entrega */
.finance-banner p:not(.eyebrow),
.shipping-card p,
.contact-section p:not(.eyebrow) {
  font-size: 15px;
  line-height: 1.7;
}

.shipping-card h3 {
  font-size: 19px;
}

.shipping-label {
  font-size: 12px;
}

.empty-state h3 {
  font-size: 20px;
}

.empty-state p {
  font-size: 14px;
}

/* Ajuste para móviles */
@media (max-width: 760px) {
  .section-heading h2 {
    font-size: 29px;
  }

  .section-subtitle {
    font-size: 14px;
  }

  .search-box input {
    font-size: 16px;
  }

  .filter-chip {
    font-size: 13px;
    padding: 9px 13px;
  }

  .product-card h3 {
    font-size: 17px;
    line-height: 1.4;
  }

  .product-description {
    font-size: 14px;
  }

  .product-category {
    font-size: 11px;
  }

  .spec-pill {
    font-size: 11px;
  }

  .product-price {
    font-size: 23px;
  }

  .product-price-secondary {
    font-size: 13px;
  }

  .product-financing {
    font-size: 12px;
  }

  .buy-button {
    font-size: 12px;
  }

  .finance-banner p:not(.eyebrow),
  .shipping-card p,
  .contact-section p:not(.eyebrow) {
    font-size: 14px;
  }
}
/* =========================================================
   CT — MEJORAS RESPONSIVE PARA CELULARES
   ========================================================= */

@media (max-width: 760px) {

  /* Encabezado: distribuir los elementos sin apretarlos */
  .site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
  }

  .site-header .brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 145px;
    min-width: 0;
    font-size: 14px;
    line-height: 1.35;
  }

  .site-header .brand-mark {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
  }

  .site-header .header-nav {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
  }

  .site-header .header-nav > a {
    font-size: 12px;
  }

  .site-header .header-contact {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  .site-header .theme-toggle {
    flex: 0 0 auto;
    min-width: 38px;
    min-height: 38px;
    margin: 0;
  }

  /* Separación general entre secciones */
  .hero {
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .benefit-row {
    gap: 16px;
    padding: 22px 18px;
  }

  .catalog-section,
  .shipping-section {
    padding: 42px 18px !important;
  }

  .section-heading {
    gap: 18px;
    margin-bottom: 22px;
  }

  .section-heading h2 {
    margin-bottom: 8px;
  }

  .search-box {
    margin-top: 8px;
    margin-bottom: 10px;
  }

  /* Espacios dentro de los filtros */
  .filter-row {
    gap: 10px;
    margin-top: 18px;
    margin-bottom: 24px;
  }

  .filter-chip {
    min-height: 40px;
    padding: 10px 15px;
  }

  .catalog-status {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  /* Tarjetas y botones con más aire */
  .product-grid {
    gap: 18px;
  }

  .product-card {
    padding-bottom: 16px;
  }

  .product-card h3 {
    margin-top: 8px;
    margin-bottom: 10px;
  }

  .product-description {
    margin-bottom: 12px;
  }

  .product-actions {
    gap: 10px;
    margin-top: 14px;
  }

  .back-to-top {
    right: 16px;
    bottom: 18px;
  }
}

/* Pantallas estrechas: evitar desbordamientos */
@media (max-width: 390px) {
  .site-header {
    padding-right: 11px;
    padding-left: 11px;
  }

  .site-header .brand {
    flex-basis: 125px;
    font-size: 13px;
  }

  .site-header .header-nav {
    gap: 8px;
  }

  .site-header .header-contact {
    font-size: 11px;
    padding: 10px;
  }

  .catalog-section,
  .shipping-section {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }
}
/* =========================================================
   FILTROS DESPLEGABLES EN MÓVIL
   ========================================================= */

@media (max-width: 760px) {
  .filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    position: relative;
  }

  /* Botón selector creado por JavaScript */
  .mobile-category-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 48px;
    padding: 12px 15px;
    border: 1px solid #c9d5ec;
    border-radius: 12px;
    color: #243963;
    background: #f8faff;
    box-shadow: 0 3px 0 #dfe6f4;
    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }

  .mobile-category-toggle .category-toggle-arrow {
    transition: transform .2s ease;
  }

  .mobile-category-toggle[aria-expanded="true"]
  .category-toggle-arrow {
    transform: rotate(180deg);
  }

  .mobile-category-menu {
    display: none;
    flex: 1 1 100%;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid #d5dff0;
    border-radius: 12px;
    background: #f8faff;
    box-shadow: 0 9px 20px rgba(25, 43, 85, .10);
  }

  .mobile-category-menu.is-open {
    display: flex;
  }

  .mobile-category-menu .filter-chip {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    min-height: 42px;
    border-radius: 9px;
    text-align: left;
  }

  /* Modo oscuro */
  html[data-theme="dark"] .mobile-category-toggle {
    border-color: #3c4e79;
    color: #e2eaff;
    background: #141f38;
    box-shadow: 0 3px 0 #0b1428;
  }

  html[data-theme="dark"] .mobile-category-menu {
    border-color: #344466;
    background: #0f192e;
    box-shadow: 0 9px 22px rgba(0, 0, 0, .28);
  }

  html[data-theme="dark"] .mobile-category-menu .filter-chip {
    border-color: #34415f;
    color: #cbd7f1;
    background: #16223b;
  }

  html[data-theme="dark"] .mobile-category-menu .filter-chip.active {
    border-color: #647de6;
    color: #ffffff;
    background: linear-gradient(110deg, #214c9b, #4c3a96);
  }
}

/* En escritorio no se muestra el selector móvil */
@media (min-width: 761px) {
  .mobile-category-toggle,
  .mobile-category-menu {
    display: none !important;
  }
}
/* =========================================================
   CORRECCIÓN DEL ENCABEZADO MÓVIL
   Evita que WhatsApp y el botón de tema se superpongan
   ========================================================= */

@media (max-width: 760px) {
  .site-header {
    height: auto !important;
    min-height: 65px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px !important;
    overflow: visible;
  }

  .site-header > .brand {
    flex: 1 1 145px;
    min-width: 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
  }

  .site-header .brand-mark {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
  }

  /* El catálogo utiliza una segunda fila para las acciones. */
  .site-header .header-nav {
    display: flex !important;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px !important;
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  .site-header .header-nav > a:not(.header-contact) {
    display: none !important;
  }

  .site-header .header-contact {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    justify-content: center;
    margin: 0;
    padding: 9px 12px;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .site-header .theme-toggle {
    flex: 0 0 auto;
    min-width: 42px;
    min-height: 40px;
    margin: 0 !important;
    padding: 8px 10px;
  }

  /* Encabezado de administración: ajustar sus elementos
     aunque no tenga la navegación del catálogo público. */
  .admin-header {
    gap: 10px;
  }

  .admin-header > .brand {
    flex: 1 1 145px;
  }

  .admin-header > .back-link {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 380px) {
  .site-header {
    padding-right: 11px !important;
    padding-left: 11px !important;
    gap: 8px;
  }

  .site-header .header-nav {
    gap: 8px !important;
  }

  .site-header .header-contact {
    padding: 9px;
    font-size: 11px;
  }

  .admin-header > .back-link {
    font-size: 10px;
  }
}
/* =========================================================
   CT — AUMENTO DE TIPOGRAFÍA DEL CATÁLOGO
   Aproximadamente 30 % en escritorio y móvil
   ========================================================= */

html[data-theme] .hero-description {
  font-size: 23px;
  line-height: 1.75;
}

html[data-theme] .hero-trust {
  font-size: 16px;
}

html[data-theme] .benefit-row b {
  font-size: 18px;
}

html[data-theme] .benefit-row small {
  font-size: 15px;
}

html[data-theme] .section-heading h2 {
  font-size: clamp(36px, 3.4vw, 48px);
  line-height: 1.25;
}

html[data-theme] .section-subtitle {
  font-size: 20px;
  line-height: 1.65;
}

html[data-theme] .catalog-promo-strip {
  font-size: 18px;
  line-height: 1.65;
}

html[data-theme] .catalog-status {
  font-size: 19px;
}

html[data-theme] .search-box {
  min-height: 60px;
}

html[data-theme] .search-box input {
  font-size: 23px;
}

html[data-theme] .search-box kbd {
  font-size: 17px;
}

html[data-theme] .filter-chip {
  font-size: 19px;
  padding: 12px 20px;
}

html[data-theme] .product-category {
  font-size: 16px;
}

html[data-theme] .product-card h3 {
  font-size: 28px;
  line-height: 1.35;
}

html[data-theme] .product-description {
  font-size: 21px;
  line-height: 1.65;
}

html[data-theme] .spec-pill {
  font-size: 16px;
}

html[data-theme] .product-price-label {
  font-size: 16px;
}

html[data-theme] .product-price {
  font-size: 36px;
}

html[data-theme] .product-price-secondary {
  font-size: 19px;
}

html[data-theme] .product-financing {
  font-size: 18px;
  line-height: 1.55;
}

html[data-theme] .product-color-heading {
  font-size: 16px;
}

html[data-theme] .product-color-chip {
  font-size: 16px;
}

html[data-theme] .buy-button {
  font-size: 17px;
}

html[data-theme] .shipping-card h3 {
  font-size: 25px;
}

html[data-theme] .shipping-card p,
html[data-theme] .contact-section p:not(.eyebrow),
html[data-theme] .finance-banner p:not(.eyebrow) {
  font-size: 20px;
  line-height: 1.7;
}

html[data-theme] .shipping-label {
  font-size: 16px;
}

html[data-theme] .dialog-detail h2 {
  font-size: 36px;
}

html[data-theme] .dialog-detail p,
html[data-theme] .dialog-specs {
  font-size: 20px;
  line-height: 1.7;
}

html[data-theme] .dialog-color-info strong {
  font-size: 19px;
}

html[data-theme] .dialog-color-info a {
  font-size: 18px;
}

/* En móvil aumentan los textos, pero con límites para
   que las tarjetas de dos columnas no se desborden. */

@media (max-width: 760px) {
  html[data-theme] .hero-description {
    font-size: 19px;
  }

  html[data-theme] .hero-trust {
    font-size: 14px;
  }

  html[data-theme] .benefit-row b {
    font-size: 14px;
  }

  html[data-theme] .benefit-row small {
    font-size: 12px;
  }

  html[data-theme] .section-heading h2 {
    font-size: 34px;
  }

  html[data-theme] .section-subtitle {
    font-size: 17px;
  }

  html[data-theme] .catalog-promo-strip {
    font-size: 15px;
  }

  html[data-theme] .catalog-status {
    font-size: 16px;
  }

  html[data-theme] .search-box {
    min-height: 56px;
  }

  html[data-theme] .search-box input {
    font-size: 18px;
  }

  html[data-theme] .search-box kbd {
    font-size: 13px;
  }

  html[data-theme] .filter-chip {
    font-size: 15px;
    padding: 10px 14px;
  }

  html[data-theme] .product-category {
    font-size: 13px;
  }

  html[data-theme] .product-card h3 {
    font-size: 22px;
  }

  html[data-theme] .product-description {
    font-size: 18px;
  }

  html[data-theme] .spec-pill {
    font-size: 12px;
  }

  html[data-theme] .product-price-label {
    font-size: 13px;
  }

  html[data-theme] .product-price {
    font-size: 29px;
  }

  html[data-theme] .product-price-secondary {
    font-size: 15px;
  }

  html[data-theme] .product-financing {
    font-size: 14px;
  }

  html[data-theme] .product-color-heading {
    font-size: 13px;
  }

  html[data-theme] .product-color-chip {
    font-size: 13px;
  }

  html[data-theme] .buy-button {
    font-size: 14px;
  }

  html[data-theme] .shipping-card h3 {
    font-size: 22px;
  }

  html[data-theme] .shipping-card p,
  html[data-theme] .contact-section p:not(.eyebrow),
  html[data-theme] .finance-banner p:not(.eyebrow) {
    font-size: 17px;
  }

  html[data-theme] .shipping-label {
    font-size: 14px;
  }

  html[data-theme] .dialog-detail h2 {
    font-size: 29px;
  }

  html[data-theme] .dialog-detail p,
  html[data-theme] .dialog-specs {
    font-size: 17px;
  }
}
/* =========================================================
   CT — VARIANTES: EDITOR ADMINISTRATIVO Y SELECTOR PÚBLICO
   Agregar al final de theme-ui.css
   ========================================================= */

/* Editor administrativo */

.variants-editor-section {
  margin-top: 5px;
  padding: 18px;
  border: 1px solid #dbe4f7;
  border-radius: 13px;
  background: linear-gradient(135deg, #f1f5ff, #f3faff);
}

.variants-editor-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 15px;
}

.variants-editor-heading h3 {
  margin: 0 0 7px;
  color: #283e7e;
  font-family: Manrope, sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.variants-editor-heading p {
  margin: 0;
  color: #697793;
  font-size: 14px;
  line-height: 1.65;
}

.variant-palette-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #dae5fa;
  border-radius: 9px;
  color: #52648b;
  background: #eaf1ff;
  font-size: 13px;
  line-height: 1.6;
}

.variant-palette-note span {
  color: #536be8;
  font-size: 18px;
}

.product-variants-list {
  display: grid;
  gap: 14px;
}

.variants-empty-hint {
  margin: 0;
  padding: 16px;
  border: 1px dashed #cbd8ef;
  border-radius: 10px;
  color: #697793;
  background: #ffffff;
  font-size: 13px;
  text-align: center;
}

.variant-admin-row {
  min-width: 0;
  padding: 16px;
  border: 1px solid #d8e2f4;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 3px 0 #e4eaf6;
}

.variant-row-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
  padding-bottom: 11px;
  border-bottom: 1px solid #e4eaf5;
}

.variant-row-title strong {
  color: #2c4176;
  font-family: Manrope, sans-serif;
  font-size: 15px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.variant-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.variant-fields-grid label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  color: #344361;
  font-size: 13px;
  font-weight: 700;
}

.variant-fields-grid input:not([type="color"]):not([type="file"]),
.variant-fields-grid select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid #dbe3f2;
  border-radius: 8px;
  color: #17213a;
  background: #ffffff;
  font-size: 14px;
}

.variant-fields-grid input:focus,
.variant-fields-grid select:focus {
  outline: none;
  border-color: #7887e5;
  box-shadow: 0 0 0 3px rgba(93, 108, 229, 0.10);
}

.variant-hex-control {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
}

.variant-hex-control input[type="color"] {
  width: 49px;
  min-width: 49px;
  height: 42px;
  padding: 3px;
  border: 1px solid #d6deee;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

.variant-hex-control small,
.variant-image-label small {
  color: #697793;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.variant-image-label input[type="file"] {
  width: 100%;
  min-width: 0;
  padding: 9px;
  border: 1px dashed #cbd8ef;
  border-radius: 8px;
  background: #f8faff;
  font-size: 12px;
}

.variant-row-title .admin-mini-button {
  flex-shrink: 0;
}

.variant-admin-row .color-row-status {
  margin-top: 10px;
}

/* Selector público de capacidad, RAM y color */

.variant-intro {
  margin: 14px 0;
  color: #697793;
  font-size: 14px;
  line-height: 1.65;
}

.variant-selector {
  display: grid;
  gap: 20px;
  margin-top: 18px;
}

.variant-option-group h3 {
  margin: 0 0 10px;
  color: #263b6b;
  font-family: Manrope, sans-serif;
  font-size: 16px;
  font-weight: 800;
}

.variant-choice-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.variant-choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  padding: 10px 15px;
  border: 1px solid #bdc7dc;
  border-radius: 10px;
  color: #344361;
  background: #f6f8fc;
  box-shadow: 0 3px 0 #e0e6f1;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  transition:
    border-color .18s,
    background .18s,
    color .18s,
    box-shadow .18s,
    transform .15s;
}

.variant-choice:hover {
  transform: translateY(-2px);
  border-color: #7b8fe0;
  background: #edf1ff;
}

.variant-choice:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #e0e6f1;
}

.variant-choice.selected {
  border-color: #536de2;
  color: #ffffff;
  background: linear-gradient(115deg, #285bca, #4b3bb0);
  box-shadow: 0 3px 0 #1c367f, 0 0 10px rgba(83, 109, 226, .13);
}

.color-choice-list {
  gap: 9px;
}

.variant-choice.color-choice {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 75px;
  min-height: 94px;
  padding: 11px 10px;
}

.variant-color-dot {
  display: block;
  width: 27px;
  height: 27px;
  border: 1px solid #aeb8cc;
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .11);
}

.variant-color-name {
  font-size: 13px;
  line-height: 1.25;
}

.variant-choice.color-choice small {
  color: #64738e;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
}

.variant-choice.color-choice.selected small {
  color: #dbe5ff;
}

.variant-choice.color-choice.selected .variant-color-dot {
  border-color: #dce5ff;
}

.variant-selected-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 22px;
  padding-top: 17px;
  border-top: 1px solid #dfe5ef;
}

.variant-selected-summary > span:first-child {
  color: #697793;
  font-size: 13px;
}

.variant-selected-summary strong {
  color: #24385f;
  font-size: 16px;
  line-height: 1.5;
}

.variant-status-badge {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
}

.variant-status-badge.available {
  color: #087f5b;
  background: #e3f8ed;
}

.variant-status-badge.order {
  color: #8c5f00;
  background: #fff0d4;
}

.variant-price-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 17px;
  padding: 15px;
  border: 1px solid #dce5f7;
  border-radius: 11px;
  background: linear-gradient(110deg, #f0f4ff, #f2f0ff);
}

.variant-price-box > span {
  color: #64738e;
  font-size: 13px;
  font-weight: 700;
}

.variant-price-box strong {
  color: #2c4fa8;
  font-family: Manrope, sans-serif;
  font-size: 29px;
  font-weight: 800;
  line-height: 1.3;
}

.variant-price-box small {
  color: #63718b;
  font-size: 14px;
}

.variant-whatsapp-button {
  width: 100%;
  margin-top: 14px;
  text-align: center;
}

/* Modo oscuro */

html[data-theme="dark"] .variants-editor-section {
  border-color: #36456f;
  background: linear-gradient(130deg, #14213d, #132436);
}

html[data-theme="dark"] .variants-editor-heading h3 {
  color: #c3d3ff;
}

html[data-theme="dark"] .variants-editor-heading p {
  color: #aab9d7;
}

html[data-theme="dark"] .variant-palette-note {
  border-color: #3a4c76;
  color: #c4d0eb;
  background: #192a49;
}

html[data-theme="dark"] .variant-palette-note span {
  color: #9eb4ff;
}

html[data-theme="dark"] .variants-empty-hint {
  border-color: #435376;
  color: #aab9d7;
  background: #111c33;
}

html[data-theme="dark"] .variant-admin-row {
  border-color: #35425f;
  background: #111a30;
  box-shadow: 0 3px 0 #0a1121;
}

html[data-theme="dark"] .variant-row-title {
  border-bottom-color: #34415f;
}

html[data-theme="dark"] .variant-row-title strong {
  color: #d4deff;
}

html[data-theme="dark"] .variant-fields-grid label {
  color: #d6e0f7;
}

html[data-theme="dark"] .variant-fields-grid input:not([type="color"]):not([type="file"]),
html[data-theme="dark"] .variant-fields-grid select {
  border-color: #3a4969;
  color: #edf1ff;
  background: #0d162a;
}

html[data-theme="dark"] .variant-hex-control input[type="color"] {
  border-color: #3b4c70;
  background: #111a30;
}

html[data-theme="dark"] .variant-hex-control small,
html[data-theme="dark"] .variant-image-label small {
  color: #aab9d7;
}

html[data-theme="dark"] .variant-image-label input[type="file"] {
  border-color: #3c4c70;
  color: #bac7e1;
  background: #101a30;
}

html[data-theme="dark"] .variant-intro {
  color: #aab9d7;
}

html[data-theme="dark"] .variant-option-group h3 {
  color: #d7e1ff;
}

html[data-theme="dark"] .variant-choice {
  border-color: #3a4a6a;
  color: #d3def6;
  background: #17233d;
  box-shadow: 0 3px 0 #0b1428;
}

html[data-theme="dark"] .variant-choice:hover {
  border-color: #7184dc;
  color: #ffffff;
  background: #22355d;
}

html[data-theme="dark"] .variant-choice.selected {
  border-color: #8296ff;
  color: #ffffff;
  background: linear-gradient(115deg, #235ab8, #4c3b9e);
  box-shadow: 0 3px 0 #112853, 0 0 11px rgba(82, 113, 255, .17);
}

html[data-theme="dark"] .variant-choice.color-choice small {
  color: #b1c0df;
}

html[data-theme="dark"] .variant-choice.color-choice.selected small {
  color: #e0e7ff;
}

html[data-theme="dark"] .variant-selected-summary {
  border-top-color: #34415f;
}

html[data-theme="dark"] .variant-selected-summary > span:first-child {
  color: #aab9d7;
}

html[data-theme="dark"] .variant-selected-summary strong {
  color: #edf2ff;
}

html[data-theme="dark"] .variant-status-badge.available {
  color: #95e7c2;
  background: #173f38;
}

html[data-theme="dark"] .variant-status-badge.order {
  color: #ffcc88;
  background: #49341f;
}

html[data-theme="dark"] .variant-price-box {
  border-color: #35456f;
  background: linear-gradient(110deg, #172644, #242144);
}

html[data-theme="dark"] .variant-price-box > span {
  color: #b5c3df;
}

html[data-theme="dark"] .variant-price-box strong {
  color: #a8c1ff;
}

html[data-theme="dark"] .variant-price-box small {
  color: #b7c5e0;
}

/* Móvil */

@media (max-width: 760px) {
  .variants-editor-heading {
    flex-direction: column;
  }

  .variant-fields-grid {
    grid-template-columns: 1fr;
  }

  .variant-row-title {
    flex-direction: column;
  }

  .variant-choice {
    min-height: 42px;
    padding: 10px 12px;
  }

  .variant-choice.color-choice {
    min-width: 76px;
    min-height: 92px;
  }

  .variant-price-box strong {
    font-size: 27px;
  }
}

/* Neutraliza el aumento tipográfico global dentro de las tarjetas resumidas. */
html[data-theme] .product-card .product-category { font-size: 10px; }
html[data-theme] .product-card h3 { font-size: 16px; line-height: 1.35; }
html[data-theme] .product-card-capacity { font-size: 12px; line-height: 1.4; }
html[data-theme] .product-card .product-price-label { font-size: 10px; }
html[data-theme] .product-card .product-price { font-size: 22px; line-height: 1.25; }
html[data-theme] .product-card .product-price-secondary { font-size: 11px; }
html[data-theme] .product-card .product-view-button { font-size: 13px; }
@media (max-width:760px) {
  html[data-theme] .product-card .product-category { font-size: 10px; }
  html[data-theme] .product-card h3 { font-size: 14px; }
  html[data-theme] .product-card-capacity { font-size: 11px; }
  html[data-theme] .product-card .product-price-label { font-size: 10px; }
  html[data-theme] .product-card .product-price { font-size: clamp(17px,4.6vw,22px); }
  html[data-theme] .product-card .product-price-secondary { font-size: 10px; }
  html[data-theme] .product-card .product-view-button { font-size: 12px; }
}
@media (max-width:360px) {
  html[data-theme] .product-card .product-price { font-size: 16px; }
}


/* Encabezado móvil del catálogo: marca centrada y tema alineado a la derecha. */
@media (max-width:760px) {
  .site-header {
    position: sticky;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 88px;
    height: auto;
    padding: 14px 62px 14px 14px;
  }

  .site-header .brand {
    display: inline-flex;
    flex: 1 1 100%;
    justify-content: center;
    align-items: center;
    gap: 9px;
    min-width: 0;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    font-family: "Manrope", "DM Sans", sans-serif;
    font-size: clamp(15px, 4.3vw, 19px);
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: -0.65px;
  }

  .site-header .brand-mark {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 12px;
  }

  .site-header #brand-name {
    min-width: 0;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .site-header .header-nav {
    display: none !important;
  }

  .site-header > .theme-toggle {
    position: absolute;
    top: 50%;
    right: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    border-radius: 12px;
  }

  .site-header > .theme-toggle .theme-toggle-icon {
    font-size: 19px;
  }

  .site-header > .theme-toggle:hover {
    transform: translateY(calc(-50% - 1px));
  }
}

@media (max-width:380px) {
  .site-header {
    padding-right: 56px;
    padding-left: 8px;
  }

  .site-header .brand {
    gap: 7px;
    font-size: 14px;
    letter-spacing: -0.45px;
  }

  .site-header .brand-mark {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }

  .site-header > .theme-toggle {
    right: 8px;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }
}


/* Contraste visible del selector de tema en ambos modos. */
.site-header > .theme-toggle {
  border: 1px solid #9eafe0;
  color: #263f8d;
  background: linear-gradient(145deg, #ffffff, #eaf0ff);
  box-shadow: 0 3px 0 #c8d4f1, 0 5px 12px rgba(37, 61, 128, .12);
}
html[data-theme="light"] .site-header > .theme-toggle {
  border-color: #9eafe0;
  color: #263f8d;
  background: linear-gradient(145deg, #ffffff, #eaf0ff);
}
html[data-theme="dark"] .site-header > .theme-toggle {
  border-color: #596aa8;
  color: #f3f5ff;
  background: linear-gradient(145deg, #1b2b50, #29274f);
}
@media (max-width:760px) {
  .site-header > .theme-toggle {
    right: 10px;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
  }
}


/* Catálogo: búsqueda y filtros compactos, con overrides para ambos temas. */
html[data-theme] .section-heading h2 {
  font-size: clamp(25px, 2.5vw, 34px);
}
html[data-theme] .section-subtitle {
  font-size: 14px;
  line-height: 1.45;
}
html[data-theme] .search-box {
  min-height: 44px;
  height: 44px;
  gap: 8px;
  padding: 0 11px;
}
html[data-theme] .search-box input {
  font-size: 14px;
}
html[data-theme] .search-box kbd {
  font-size: 11px;
}
html[data-theme] .filter-row {
  gap: 7px;
  margin: 14px 0 18px;
}
html[data-theme] .filter-chip {
  padding: 7px 12px;
  font-size: 13px;
}
@media (max-width:760px) {
  html[data-theme] .catalog-section {
    padding: 30px 16px 38px;
  }
  html[data-theme] .section-heading {
    gap: 12px;
  }
  html[data-theme] .section-heading h2 {
    font-size: clamp(23px, 6vw, 29px);
    line-height: 1.2;
    margin-bottom: 6px;
  }
  html[data-theme] .section-subtitle {
    font-size: 12px;
    line-height: 1.4;
  }
  html[data-theme] .search-box {
    min-height: 43px;
    height: 43px;
    margin-top: 2px;
  }
  html[data-theme] .search-box input {
    font-size: 14px;
  }
  html[data-theme] .search-box kbd {
    display: none;
  }
  html[data-theme] .filter-row {
    gap: 6px;
    margin: 10px 0 14px;
  }
  html[data-theme] .filter-chip {
    padding: 6px 10px;
    font-size: 12px;
  }
  html[data-theme] .mobile-category-toggle {
    min-height: 42px;
    padding: 8px 12px;
    font-size: 13px;
  }
}
@media (min-width:761px) {
  html[data-theme] .catalog-section {
    padding-top: 54px;
    padding-bottom: 54px;
  }
}


/* Ficha pública compacta: selectores y precio de la variante. */
html[data-theme] .product-dialog .dialog-detail {
  padding: 22px;
}
html[data-theme] .product-dialog .dialog-detail h2 {
  margin: 5px 0 14px;
  font-size: clamp(22px, 4vw, 27px);
}
html[data-theme] .product-dialog .variant-intro {
  display: none;
}
html[data-theme] .product-dialog .variant-selector {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
html[data-theme] .product-dialog .variant-option-group {
  padding: 11px 12px;
  border-radius: 14px;
  box-shadow: none;
}
html[data-theme] .product-dialog .variant-option-group h3 {
  margin: 0 0 9px;
  font-size: 15px;
}
html[data-theme] .product-dialog .variant-choice-list {
  gap: 8px;
}
html[data-theme] .product-dialog .variant-choice:not(.color-choice) {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
}
html[data-theme] .product-dialog .color-choice-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}
html[data-theme] .product-dialog .variant-choice.color-choice {
  display: inline-flex;
  flex: 0 0 66px;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 66px;
  min-height: 0;
  padding: 4px 3px 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--text, #24365f);
}
html[data-theme] .product-dialog .variant-choice.color-choice:hover {
  transform: translateY(-1px);
  border-color: var(--border, #dbe3f0);
  background: rgba(89,109,245,.05);
  box-shadow: none;
}
html[data-theme] .product-dialog .variant-choice.color-choice.selected {
  border-color: rgba(83,109,226,.42);
  background: rgba(83,109,226,.07);
  box-shadow: none;
  color: var(--text, #24365f);
}
html[data-theme] .product-dialog .variant-color-dot {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 2px solid #cbd5e1;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
html[data-theme] .product-dialog .variant-choice.color-choice.selected .variant-color-dot {
  outline: 2px solid #536de2;
  outline-offset: 2px;
  border-color: #fff;
}
html[data-theme] .product-dialog .variant-color-name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}
html[data-theme] .product-dialog .variant-bottom-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(135px, .85fr);
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
html[data-theme] .product-dialog .variant-selected-summary {
  min-width: 0;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
}
html[data-theme] .product-dialog .variant-selected-summary > span:first-child {
  font-size: 11px;
  line-height: 1.3;
}
html[data-theme] .product-dialog .variant-selected-summary strong {
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
html[data-theme] .product-dialog .variant-status-badge {
  align-self: flex-start;
  padding: 3px 7px;
  font-size: 10px;
}
html[data-theme] .product-dialog .variant-price-box {
  min-width: 0;
  gap: 3px;
  margin: 0;
  padding: 9px 10px;
  border-radius: 11px;
}
html[data-theme] .product-dialog .variant-price-box > span {
  font-size: 10px;
  line-height: 1.3;
}
html[data-theme] .product-dialog .variant-price-box strong {
  font-size: clamp(18px, 4.5vw, 23px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
html[data-theme] .product-dialog .variant-price-box small {
  font-size: 11px;
}
html[data-theme] .product-dialog .variant-whatsapp-button {
  display: flex;
  width: fit-content;
  min-height: 42px;
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 11px;
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
}
html[data-theme] .product-dialog .variant-option-group h3:before {
  height: 15px;
}
html[data-theme="dark"] .product-dialog .variant-choice.color-choice,
html[data-theme="dark"] .product-dialog .variant-choice.color-choice.selected {
  color: #d3def6;
  background: transparent;
}
html[data-theme="dark"] .product-dialog .variant-choice.color-choice:hover {
  border-color: #3a4a6a;
  background: rgba(113,132,220,.1);
}
html[data-theme="dark"] .product-dialog .variant-choice.color-choice.selected {
  border-color: rgba(113,132,220,.65);
  background: rgba(113,132,220,.12);
}
@media (max-width: 520px) {
  html[data-theme] .product-dialog .dialog-detail {
    padding: 17px 15px 20px;
  }
  html[data-theme] .product-dialog .variant-selector {
    gap: 9px;
  }
  html[data-theme] .product-dialog .variant-option-group {
    padding: 9px 10px;
  }
  html[data-theme] .product-dialog .variant-choice.color-choice {
    flex-basis: 60px;
    min-width: 60px;
  }
  html[data-theme] .product-dialog .variant-bottom-row {
    grid-template-columns: minmax(0, 1fr) minmax(120px, .8fr);
    gap: 8px;
  }
  html[data-theme] .product-dialog .variant-price-box {
    padding: 8px;
  }
  html[data-theme] .product-dialog .variant-whatsapp-button {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 360px) {
  html[data-theme] .product-dialog .variant-bottom-row {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-theme] .product-dialog .variant-price-box {
    width: fit-content;
    min-width: 135px;
  }
}



/* =========================================================
   FICHA DE PRODUCTO RESPONSIVE — REGLAS ÚNICAS
   La caja conserva su tamaño mientras la imagen se adapta.
   ========================================================= */
.product-dialog {
  box-sizing: border-box;
  width: min(1040px, calc(100vw - 32px));
  max-width: 1040px;
  max-height: min(88vh, 900px);
  max-height: min(88dvh, 900px);
  margin: auto;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 18px;
  scrollbar-gutter: stable;
}
#dialog-content,
.product-dialog .dialog-layout,
.product-dialog .dialog-detail {
  min-width: 0;
  box-sizing: border-box;
}
.product-dialog .dialog-layout {
  display: grid;
  grid-template-columns: minmax(260px, .86fr) minmax(0, 1.14fr);
  align-items: start;
  gap: 0;
}
.product-dialog #dialog-image,
.product-dialog .dialog-image {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(300px, 54vh, 540px);
  min-height: 0;
  max-height: 540px;
  aspect-ratio: auto;
  align-self: start;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
  background: var(--surface-soft, #f2f5fc);
}
.product-dialog #dialog-image > img,
.product-dialog .dialog-image > img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: normal;
}
.product-dialog .dialog-detail {
  padding: clamp(18px, 2.4vw, 30px);
  overflow-wrap: anywhere;
}
.product-dialog .dialog-detail p,
.product-dialog .dialog-detail li,
.product-dialog .dialog-detail strong {
  overflow-wrap: anywhere;
}
.product-dialog .dialog-close {
  position: sticky;
  top: 10px;
  z-index: 10;
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .product-dialog {
    width: calc(100vw - 16px);
    max-width: 680px;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 16px;
  }
  .product-dialog .dialog-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-dialog #dialog-image,
  .product-dialog .dialog-image {
    position: relative;
    width: 100%;
    height: clamp(180px, 32vh, 290px);
    height: clamp(180px, 32dvh, 290px);
    min-height: 180px;
    max-height: 290px;
    padding: 8px;
    aspect-ratio: auto;
  }
  .product-dialog #dialog-image > img,
  .product-dialog .dialog-image > img {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: contain;
  }
  .product-dialog .dialog-detail {
    padding: 16px 15px 22px;
  }
  .product-dialog .dialog-detail h2 {
    font-size: clamp(22px, 5vw, 28px);
    line-height: 1.2;
  }
  .product-dialog .variant-selector {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }
  .product-dialog .variant-option-group {
    min-width: 0;
    padding: 10px;
  }
  .product-dialog .variant-choice-list {
    flex-wrap: wrap;
  }
  .product-dialog .variant-bottom-row {
    grid-template-columns: minmax(0, 1fr) minmax(120px, .8fr);
    gap: 8px;
  }
  .product-dialog .variant-price-box {
    min-width: 0;
    padding: 8px;
  }
  .product-dialog .variant-whatsapp-button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    white-space: normal;
  }
}
@media (max-width: 380px) {
  .product-dialog .variant-bottom-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-dialog .variant-price-box {
    width: fit-content;
    max-width: 100%;
  }
}


/* Acciones de variantes en el flujo principal, debajo de la explicación. */
.variants-editor-heading { display:flex; flex-direction:column; align-items:stretch; gap:12px; }
.variants-editor-copy { width:100%; }
.variants-editor-actions { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:10px; width:100%; margin-top:2px; }
.variants-editor-actions .button { min-height:40px; padding:10px 14px; }
@media (max-width:520px) {
  .variants-editor-actions { display:grid; grid-template-columns:1fr; }
  .variants-editor-actions .button { width:100%; }
}
html[data-theme="dark"] .variants-editor-actions .button { color:#e6ecff; }


/* Galería del producto: mantener el panel compacto de la versión original. */
.product-dialog #dialog-image {
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  align-content:stretch;
  justify-items:stretch;
  gap:8px;
  min-width:0;
  padding:8px;
  overflow:hidden;
  box-sizing:border-box;
  background:var(--surface-soft,#f2f5fc);
}
.product-dialog #dialog-image .dialog-gallery-main {
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  min-height:0;
  min-width:0;
  overflow:hidden;
}
.product-dialog #dialog-image .dialog-gallery-main .dialog-main-image {
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  padding:0;
  margin:0;
  object-fit:contain;
  object-position:center;
  mix-blend-mode:normal;
}
.product-dialog #dialog-image .dialog-gallery-thumbs {
  display:flex;
  flex:0 0 auto;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  width:100%;
  min-width:0;
  padding:0 0 2px;
}
.product-dialog #dialog-image .dialog-gallery-thumb {
  display:grid;
  place-items:center;
  flex:0 0 48px;
  width:48px;
  height:48px;
  padding:3px;
  border:1px solid var(--line,#dce3f2);
  border-radius:8px;
  background:#fff;
  cursor:pointer;
}
.product-dialog #dialog-image .dialog-gallery-thumb.active {
  border:2px solid #586be8;
  box-shadow:0 0 0 2px rgba(88,107,232,.12);
}
.product-dialog #dialog-image .dialog-gallery-thumb img {
  display:block;
  width:100%;
  height:100%;
  max-height:none;
  padding:0;
  margin:0;
  object-fit:contain;
  mix-blend-mode:multiply;
}
html[data-theme="dark"] .product-dialog #dialog-image {
  background:linear-gradient(135deg,#172442,#152039);
}
html[data-theme="dark"] .product-dialog #dialog-image .dialog-gallery-thumb {
  border-color:#344366;
  background:#111a30;
}
html[data-theme="dark"] .product-dialog #dialog-image .dialog-gallery-thumb img,
html[data-theme="dark"] .product-dialog #dialog-image .dialog-gallery-main .dialog-main-image {
  mix-blend-mode:normal;
}

/* Encabezado público: nombre centrado y selector de tema a la derecha. */
.site-header:not(.admin-header) {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:10px;
  justify-content:initial;
  padding-inline:max(3vw,16px);
}
.site-header:not(.admin-header) > .brand {
  grid-column:2;
  justify-self:center;
  max-width:100%;
  gap:11px;
  font-size:clamp(17px,2vw,24px);
  letter-spacing:-.6px;
  white-space:nowrap;
}
.site-header:not(.admin-header) > [data-theme-toggle] {
  grid-column:3;
  justify-self:end;
}
@media (max-width:760px) {
  .site-header:not(.admin-header) {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    grid-auto-flow:row;
    gap:4px;
    width:100%;
    height:66px !important;
    min-height:66px !important;
    padding:8px 10px !important;
    overflow:visible;
  }
  .site-header:not(.admin-header) > .brand {
    grid-column:2;
    grid-row:1;
    display:inline-flex;
    flex:0 1 auto;
    justify-self:center;
    justify-content:center;
    min-width:0;
    gap:7px;
    margin:0;
    font-size:clamp(12px,3.8vw,16px);
    letter-spacing:-.45px;
    line-height:1.2;
  }
  .site-header:not(.admin-header) > .brand .brand-mark {
    flex:0 0 29px;
    width:29px;
    height:29px;
    border-radius:9px;
    font-size:10px;
  }
  .site-header:not(.admin-header) > [data-theme-toggle] {
    position:relative !important;
    top:auto !important;
    right:auto !important;
    grid-column:3;
    grid-row:1;
    justify-self:end;
    align-self:center;
    transform:none !important;
    min-height:34px;
    padding:6px 8px;
    gap:5px;
    font-size:11px;
  }
  .site-header:not(.admin-header) > [data-theme-toggle] .theme-toggle-icon { font-size:15px; }
  .product-dialog #dialog-image {
    grid-template-rows:minmax(0,1fr) auto;
    height:clamp(220px,38vh,310px);
    min-height:220px;
    max-height:310px;
    padding:8px;
    gap:6px;
  }
  .product-dialog #dialog-image .dialog-gallery-main { min-height:0; }
  .product-dialog #dialog-image .dialog-gallery-thumb { flex-basis:42px; width:42px; height:42px; }
}
@media (max-width:380px) {
  .site-header:not(.admin-header) > .brand .brand-mark { display:none; }
  .site-header:not(.admin-header) > .brand { font-size:14px; }
  .site-header:not(.admin-header) > [data-theme-toggle] { width:auto; min-width:0; }
}


/* =========================================================
   DASHBOARD OVERVIEW — corporativo moderno y sobrio
   Solo afecta al panel de inicio del administrador.
   ========================================================= */
.dashboard-overview{margin-top:22px;display:grid;gap:18px}
.dashboard-section-heading,.dashboard-widget-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}
.dashboard-section-heading h3,.dashboard-widget-heading h3{margin:2px 0 0;font-size:clamp(1rem,2vw,1.18rem);letter-spacing:-.025em;color:var(--text,#e8eefb)}
.dashboard-eyebrow{margin:0;color:var(--muted,#91a2c0);font-size:.66rem;font-weight:800;letter-spacing:.14em}
.dashboard-updated{display:flex;align-items:center;gap:8px;color:var(--muted,#91a2c0);font-size:.75rem}
.dashboard-live-dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:#43c59e;box-shadow:0 0 0 3px #43c59e20}
.dashboard-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dashboard-metric{position:relative;min-width:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px 10px;padding:19px;border:1px solid var(--line, #263956);border-radius:16px;background:linear-gradient(145deg,var(--card,#131e32),var(--card-2,#101a2c));box-shadow:0 8px 20px #00000012;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.dashboard-metric:hover{transform:translateY(-3px);border-color:var(--accent,#496cb3);box-shadow:0 13px 26px #00000020}
.metric-icon{grid-column:2;grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#5278bf20;color:#8fb2ff;font-size:1.3rem}
.metric-label{grid-column:1;grid-row:1;color:var(--muted,#9aabc7);font-size:.77rem;font-weight:650}
.dashboard-metric strong{grid-column:1;grid-row:2;font-size:clamp(1.6rem,3vw,2rem);line-height:1.1;letter-spacing:-.05em;color:var(--text,#f0f4ff)}
.dashboard-metric small{grid-column:1/-1;color:var(--muted,#8193b1);font-size:.72rem}
.metric-published .metric-icon{color:#53c9a0;background:#36bd8b1b}.metric-drafts .metric-icon{color:#e5b96a;background:#d6a64b1b}.metric-review .metric-icon{color:#91a9d8;background:#7296d21b}
.dashboard-content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dashboard-widget{min-width:0;padding:20px;border:1px solid var(--line,#263956);border-radius:17px;background:var(--card,#121d30);box-shadow:0 8px 24px #00000012}
.dashboard-widget-heading{margin-bottom:18px}
.dashboard-widget-icon{width:35px;height:35px;display:grid;place-items:center;border-radius:11px;background:var(--soft-accent,#233454);color:var(--accent,#9bbaff);font-size:1.15rem}
.dashboard-status-chart{display:flex;align-items:center;justify-content:space-evenly;gap:22px;padding:4px 0 16px}
.dashboard-chart-ring{--published-ratio:0%;width:136px;height:136px;flex:0 0 136px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#5c83d6 var(--published-ratio),#c6a15a var(--published-ratio) 100%);position:relative}
.dashboard-chart-ring:before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--card,#121d30)}
.dashboard-chart-ring>div{z-index:1;display:grid;text-align:center;gap:2px}.dashboard-chart-ring strong{font-size:1.8rem;letter-spacing:-.05em;color:var(--text,#f0f4ff)}.dashboard-chart-ring span{font-size:.7rem;color:var(--muted,#91a2c0)}
.dashboard-chart-legend{display:grid;gap:15px;min-width:0}.dashboard-chart-legend p{margin:0;display:grid;grid-template-columns:10px auto auto;align-items:center;gap:8px;color:var(--muted,#9aabc7);font-size:.78rem}.dashboard-chart-legend strong{color:var(--text,#f0f4ff);font-size:.9rem}.legend-dot{width:8px;height:8px;border-radius:3px}.legend-published{background:#5c83d6}.legend-drafts{background:#c6a15a}
.dashboard-progress-track{height:5px;border-radius:10px;background:#c6a15a30;overflow:hidden}.dashboard-progress-track span{display:block;height:100%;border-radius:inherit;background:#5c83d6;transition:width .35s ease}.dashboard-widget-note{margin:10px 0 0;color:var(--muted,#91a2c0);font-size:.74rem}
.dashboard-task-row{width:100%;display:grid;grid-template-columns:35px minmax(0,1fr) auto 12px;align-items:center;gap:11px;padding:13px 0;text-align:left;border:0;border-bottom:1px solid var(--line,#263956);background:transparent;color:inherit;cursor:pointer}.dashboard-task-row:last-of-type{border-bottom:0}.dashboard-task-row>span:nth-child(2),.dashboard-quick-action>span:nth-child(2){display:grid;gap:4px}.dashboard-task-row strong,.dashboard-quick-action strong,.dashboard-activity-item strong{font-size:.82rem;font-weight:750;color:var(--text,#eaf0fc)}.dashboard-task-row small,.dashboard-quick-action small,.dashboard-activity-item small{font-size:.72rem;color:var(--muted,#91a2c0);line-height:1.4}.dashboard-task-row>b{min-width:26px;padding:4px 7px;border-radius:8px;text-align:center;background:var(--soft-accent,#233454);color:var(--text,#eaf0fc);font-size:.75rem}.dashboard-task-symbol{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;font-size:1rem;background:#7296d21b;color:#91b2ff}.task-symbol-amber{background:#d6a64b1b;color:#e5b96a}.dashboard-task-arrow{color:var(--muted,#91a2c0)}.dashboard-task-footer{display:flex;align-items:center;gap:8px;margin-top:13px;color:var(--muted,#91a2c0);font-size:.72rem}
.dashboard-activity-list{display:grid}.dashboard-activity-item{display:grid;grid-template-columns:31px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line,#263956)}.dashboard-activity-item:last-child{border-bottom:0}.dashboard-activity-item>div{min-width:0;display:grid;gap:4px}.dashboard-activity-item strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-activity-item time{font-size:.68rem;color:var(--muted,#91a2c0);white-space:nowrap}.dashboard-activity-mark{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#36bd8b1b;color:#53c9a0}.activity-mark-draft{background:#d6a64b1b;color:#e5b96a}.dashboard-empty-state{margin:0;padding:15px 0;color:var(--muted,#91a2c0);font-size:.8rem;line-height:1.6}
.dashboard-quick-action{width:100%;display:grid;grid-template-columns:35px minmax(0,1fr) 14px;align-items:center;gap:11px;padding:11px 0;text-align:left;border:0;border-bottom:1px solid var(--line,#263956);background:transparent;color:inherit;cursor:pointer}.dashboard-quick-action:hover strong,.dashboard-task-row:hover strong{color:var(--accent,#9bbaff)}.quick-action-icon{width:35px;height:35px;display:grid;place-items:center;border:1px solid var(--line,#344866);border-radius:11px;color:var(--accent,#9bbaff);font-size:1.15rem}.dashboard-quick-action>span:last-child{color:var(--muted,#91a2c0)}.dashboard-public-link{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:15px;padding:11px 13px;border:1px solid var(--line,#344866);border-radius:11px;color:var(--text,#eaf0fc);font-size:.78rem;font-weight:750;text-decoration:none;transition:background .2s,border-color .2s}.dashboard-public-link:hover{background:var(--soft-accent,#233454);border-color:var(--accent,#496cb3)}
@media(max-width:900px){.dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-content-grid{grid-template-columns:1fr}}
@media(max-width:540px){.dashboard-overview{gap:13px}.dashboard-section-heading{align-items:flex-start;flex-direction:column}.dashboard-metric{padding:14px;border-radius:13px}.metric-icon{width:34px;height:34px;border-radius:10px}.dashboard-widget{padding:15px;border-radius:14px}.dashboard-status-chart{justify-content:flex-start;gap:18px}.dashboard-chart-ring{width:112px;height:112px;flex-basis:112px}.dashboard-activity-item{grid-template-columns:29px minmax(0,1fr)}.dashboard-activity-item time{grid-column:2}.dashboard-updated{font-size:.7rem}}
@media(prefers-reduced-motion:reduce){.dashboard-metric,.dashboard-progress-track span,.dashboard-public-link{transition:none}}



/* Editor de colores: reglas consolidadas. Este archivo carga después de styles.css. */
.admin-add-color-slot {
  align-self: start !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
}
.admin-add-color-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
}
.admin-add-color-caption { font-size: 11px !important; letter-spacing: .03em; }
.admin-add-color-heading .button {
  width: auto !important;
  min-height: 32px !important;
  padding: 5px 10px !important;
  flex: 0 0 auto !important;
}
.admin-add-color-slot .quick-color-palette {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 10px !important;
  border: 1px solid rgba(122,151,205,.32) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg,#17233b 0%,#121d32 56%,#101a2d 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045),0 4px 0 rgba(3,8,19,.28),0 9px 18px rgba(0,0,0,.14) !important;
}
.admin-add-color-slot .quick-color-palette[hidden] { display: none !important; }
.quick-color-search-label {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  width: 100% !important;
  min-width: 0 !important;
  font-size: 11px !important;
}
.quick-color-search-label input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 7px 9px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}
.quick-color-swatches {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
  align-items: start !important;
  gap: 5px !important;
  width: 100% !important;
  max-height: 230px !important;
  min-width: 0 !important;
  overflow: auto !important;
  padding: 1px !important;
}
.admin-add-color-slot .quick-color-swatch {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 45px !important;
  gap: 4px !important;
  padding: 5px 3px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  color: #e8eefc !important;
  font-size: 10px !important;
}
.admin-add-color-slot .quick-color-swatch:hover,
.admin-add-color-slot .quick-color-swatch:focus-visible {
  transform: translateY(-1px) !important;
  border-color: rgba(113,143,255,.55) !important;
  background: rgba(80,111,220,.10) !important;
  outline: 2px solid rgba(127,156,255,.35) !important;
  outline-offset: 1px !important;
}
.admin-add-color-slot .quick-color-swatch.is-selected {
  border-color: #7f9cff !important;
  background: rgba(84,112,220,.13) !important;
}
.admin-add-color-slot .quick-color-dot {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  border: 2px solid rgba(255,255,255,.78) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 3px rgba(0,0,0,.26),inset 0 0 0 1px rgba(0,0,0,.10) !important;
}
.admin-add-color-slot .quick-color-name {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  text-align: center !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
  color: #aab9d5 !important;
}
.quick-color-code { font: 9px ui-monospace,monospace !important; color: #8fa3c7 !important; }
.quick-color-no-results { grid-column: 1 / -1; margin: 4px; color: #aab9d5; font-size: 11px; }

/* No mantener el gestor de colores comprimido en una sola columna. */
.base-color-manager { display: block !important; width: 100% !important; min-width: 0 !important; }
.base-color-manager .variant-base-group {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.base-color-manager .variant-base-group > .variant-config-group-heading,
.base-color-manager .variant-base-group > .variant-config-fields,
.base-color-manager .variant-base-group .variant-color-section > .variant-add-color { display: none !important; }
.base-color-manager .variant-base-group .variant-color-section {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
}
.base-color-manager .variant-base-group .variant-color-section-title { margin: 0 !important; }
.base-color-manager .variant-base-group .variant-color-section .variant-color-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr)) !important;
  align-items: start !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.base-color-manager .variant-base-group .variant-color-section .variant-color-list > .variants-empty-hint {
  grid-column: 1 / -1 !important;
}
.inline-color-card {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 7px !important;
  border: 1px solid rgba(112,139,190,.27) !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg,#17233a 0%,#121d31 100%) !important;
  box-shadow: 0 3px 0 rgba(2,7,17,.25),inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.inline-color-main {
  grid-template-columns: 18px minmax(0,1fr) 32px 25px !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
}
.inline-color-dot { width: 17px !important; height: 17px !important; }
.inline-color-name-field,
.inline-color-tone-field {
  min-width: 0 !important;
  gap: 3px !important;
  font-size: 9px !important;
}
.inline-color-name-field input {
  min-width: 0 !important;
  min-height: 30px !important;
  padding: 5px 6px !important;
  font-size: 11px !important;
}
.inline-color-tone-field input[type="color"] {
  width: 32px !important;
  height: 30px !important;
  padding: 2px !important;
}
.inline-color-remove {
  min-width: 25px !important;
  min-height: 29px !important;
  padding: 2px !important;
}
.inline-color-details { margin-top: 5px !important; padding-top: 4px !important; }
.inline-color-details > summary { font-size: 10px !important; cursor: pointer !important; }
.inline-color-details[open] > summary { margin-bottom: 7px !important; }
.inline-color-details .variant-color-fields {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: 7px !important;
  min-width: 0 !important;
}
.inline-color-details .variant-color-fields > label { min-width: 0 !important; font-size: 10px !important; }
.inline-color-details .variant-image-label { grid-column: 1 / -1 !important; }
.inline-color-details [data-variant-hex-text] {
  text-transform: uppercase !important;
  font-family: ui-monospace,monospace !important;
  letter-spacing: .02em !important;
}
.inline-color-details .variant-image-preview { min-height: 36px !important; gap: 5px !important; }
.inline-color-details .variant-image-preview img { width: 38px !important; height: 38px !important; flex-basis: 38px !important; }
.inline-color-details .admin-file-picker {
  width: auto !important;
  align-self: flex-start !important;
  min-height: 32px !important;
  padding: 6px 9px !important;
  font-size: 10px !important;
}

/* Una configuración técnica ocupa la fila completa; las tarjetas llenan su ancho. */
.product-variants-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.product-variants-list > [data-variant-group],
.product-variants-list > .variants-empty-hint {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}
.variant-config-group:not(.variant-base-group) {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px !important;
}
.variant-config-group:not(.variant-base-group) .variant-config-fields {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 9px !important;
  width: 100% !important;
  margin: 8px 0 !important;
}
.variant-config-group:not(.variant-base-group) .variant-color-section {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
}
.variant-config-group:not(.variant-base-group) .variant-color-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px),1fr)) !important;
  align-items: start !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.variant-config-group:not(.variant-base-group) .variant-color-list > .variants-empty-hint { grid-column: 1 / -1 !important; }
.variant-config-group:not(.variant-base-group) .variant-add-color {
  justify-self: start !important;
  width: auto !important;
  min-height: 31px !important;
  margin-top: 7px !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
}
.variant-config-group:not(.variant-base-group) .inline-color-card { width:100% !important; padding:7px !important; }
.variant-config-group:not(.variant-base-group) .inline-color-main { grid-template-columns:18px minmax(0,1fr) 32px 25px !important; }
.variant-config-group:not(.variant-base-group) .inline-color-name-field input { min-height:30px !important; padding:5px 6px !important; font-size:11px !important; }
.variant-config-group:not(.variant-base-group) .inline-color-tone-field input[type="color"] { width:32px !important; height:30px !important; }

/* Selector de muestras de 16 tonos: pequeño, interactivo y accesible. */
.variant-swatch-palette {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0,1fr)) !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 6px !important;
  border: 1px solid rgba(122,151,205,.32) !important;
  border-radius: 9px !important;
  background: rgba(20,31,54,.45) !important;
}
.variant-swatch {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1 !important;
  min-height: 20px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  border-radius: 5px !important;
  background: var(--swatch-color) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  touch-action: manipulation;
}
.variant-swatch:hover,
.variant-swatch:focus-visible { outline: 2px solid #9bb8ff !important; outline-offset: 1px !important; transform: scale(1.04) !important; }
.variant-swatch.is-selected { outline: 2px solid #a9bcff !important; outline-offset: 1px !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35) !important; }
.variant-swatch:focus-visible { z-index: 1 !important; }
@media (max-width: 900px) {
  .variant-config-group:not(.variant-base-group) .variant-color-list { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .quick-color-swatches { grid-template-columns: repeat(auto-fit,minmax(64px,1fr)) !important; }
}
@media (max-width: 480px) {
  .variant-config-group:not(.variant-base-group) .variant-color-list { grid-template-columns: minmax(0,1fr) !important; }
  .variant-swatch-palette { grid-template-columns: repeat(8,minmax(0,1fr)) !important; }
  .inline-color-main { grid-template-columns: 18px minmax(0,1fr) 32px 25px !important; }
  .variant-config-group:not(.variant-base-group) .variant-config-fields { grid-template-columns: minmax(0,1fr) !important; }
}

/* Especificaciones junto a garantía: no se desplazan al crecer la lista de colores. */
.warranty-specs-stack {
  display: flex !important;
  flex-direction: column !important;
  align-self: start !important;
  gap: 14px !important;
  min-width: 0 !important;
}
.warranty-specs-stack > label { min-width: 0 !important; }
.warranty-specs-stack .admin-specs-field { grid-column: auto !important; }
.admin-form #product-specs { min-height: 90px !important; height: auto !important; resize: vertical !important; overflow: auto !important; }
 .quick-color-status { display: none !important; margin: 0 !important; font-size: 11px !important; }
.quick-color-status[data-state="error"] { display: block !important; color: #ff9da6 !important; }


/* Tipografía del panel administrativo: aumento adicional del 5%, aislado del catálogo público. */
.admin-body .variant-config-group-heading strong {
  color: #edf3ff !important;
  font-size: 18.5px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
}
.admin-body .variant-config-group-heading small {
  color: #b2c4e5 !important;
  font-size: 14.5px !important;
  line-height: 1.45 !important;
}
.admin-body .variant-config-fields > label {
  color: #d9e5ff !important;
  font-size: 17.4px !important;
  line-height: 1.4 !important;
  gap: 6px !important;
}
.admin-body .variant-config-fields input { font-size: 16.2px !important; }
.admin-body .variant-color-section-title {
  color: #bacbf0 !important;
  font-size: 16.8px !important;
  line-height: 1.4 !important;
  font-weight: 750 !important;
}
.admin-body .inline-color-details > summary {
  color: #a9c9ff !important;
  font-size: 14.5px !important;
  line-height: 1.45 !important;
  font-weight: 750 !important;
  padding: 2px 0 !important;
  cursor: pointer !important;
}
.admin-body .inline-color-details[open] > summary { margin-bottom: 8px !important; }
.admin-body .inline-color-name-field,
.admin-body .inline-color-tone-field {
  color: #c4d3f0 !important;
  font-size: 12.2px !important;
  line-height: 1.35 !important;
}
.admin-body .inline-color-name-field input { font-size: 14.5px !important; }
.admin-body .inline-color-details .variant-color-fields > label {
  color: #d5e1fa !important;
  font-size: 13.9px !important;
  line-height: 1.4 !important;
}
.admin-body .inline-color-details .variant-color-fields select,
.admin-body .inline-color-details [data-variant-hex-text] {
  font-size: 15.1px !important;
  min-height: 36px !important;
}
.admin-body .variant-config-group:not(.variant-base-group) .variant-add-color {
  min-height: 33px !important;
  padding: 6px 12px !important;
  font-size: 14.5px !important;
  line-height: 1.3 !important;
}
.admin-body .admin-add-color-heading .button { font-size: 14.5px !important; }
.admin-body .variants-editor-heading p {
  color: #bac8e4 !important;
  font-size: 15.1px !important;
  line-height: 1.55 !important;
}

/* Los controles de precio conservan el símbolo/unidad integrado en una línea. */
.admin-body .variant-config-fields .admin-input-unit {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  width: 100% !important;
}
.admin-body .variant-config-fields .admin-input-unit input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}
.admin-body .variant-config-fields .admin-input-unit > span {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  font-size: 14.5px !important;
}

/* Etiqueta de almacenamiento: primero la unidad y después el nombre. */
.admin-body .variant-storage-label-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  min-width: 0 !important;
}
.admin-body .variant-storage-unit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px 7px !important;
  border: 1px solid rgba(149,180,255,.28) !important;
  border-radius: 6px !important;
  background: rgba(109,148,255,.15) !important;
  color: #cbdcff !important;
  font-size: .92em !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}
.admin-body select.variant-storage-unit {
  cursor: pointer !important;
  max-width: 76px !important;
  min-height: 32px !important;
  font-family: inherit !important;
}
.admin-body .variant-storage-name { display: inline !important; }

@media(max-width:600px) {
  .admin-body .variant-config-group-heading strong { font-size: 17.4px !important; }
  .admin-body .variant-config-group-heading small { font-size: 13.2px !important; }
  .admin-body .variant-config-fields > label { font-size: 16.2px !important; }
  .admin-body .variant-config-fields input { font-size: 15.4px !important; }
  .admin-body .variant-color-section-title { font-size: 15.6px !important; }
  .admin-body .inline-color-details > summary { font-size: 13.9px !important; }
  .admin-body .inline-color-name-field,
  .admin-body .inline-color-tone-field { font-size: 11.8px !important; }
  .admin-body .inline-color-details .variant-color-fields > label { font-size: 13.2px !important; }
  .admin-body .inline-color-details .variant-color-fields select,
  .admin-body .inline-color-details [data-variant-hex-text] { font-size: 14.4px !important; }
  .admin-body .variant-config-group:not(.variant-base-group) .variant-add-color { font-size: 13.9px !important; }
  .admin-body .admin-add-color-heading .button { font-size: 13.9px !important; }
  .admin-body .variants-editor-heading p { font-size: 14.4px !important; }
}


/* =========================================================
   CAT-LOGO ADMIN — sidebar fija, tipografía Space Grotesk y temas
   Aislado a admin.html; el catálogo público mantiene sus estilos.
   ========================================================= */
body.admin-body {
  --admin-sidebar-width: 264px;
  --admin-header-height: 76px;
  font-family: "Space Grotesk", "DM Sans", sans-serif;
}
body.admin-body,
body.admin-body button,
body.admin-body input,
body.admin-body select,
body.admin-body textarea,
body.admin-body h1,
body.admin-body h2,
body.admin-body h3,
body.admin-body h4,
body.admin-body strong,
body.admin-body .brand,
body.admin-body .eyebrow {
  font-family: "Space Grotesk", "DM Sans", sans-serif !important;
}
body.admin-body .site-header.admin-header {
  min-height: var(--admin-header-height);
  height: var(--admin-header-height);
  gap: 16px;
  padding: 0 clamp(16px, 2.4vw, 38px);
  justify-content: space-between;
  z-index: 1000;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body.admin-body .admin-header-context {
  display: none;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  margin-right: auto;
  margin-left: 5px;
}
body.admin-body .admin-header-context strong {
  color: var(--admin-heading, #172650);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
}
body.admin-body .admin-header-context small {
  color: var(--admin-muted, #7482a6);
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 700;
}
body.admin-body .admin-menu-toggle {
  display: none;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--admin-line, #d8e2fb);
  border-radius: 12px;
  color: var(--admin-heading, #182951);
  background: var(--admin-control, #fff);
  box-shadow: 0 4px 12px rgba(48, 72, 145, .10);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
body.admin-body .admin-menu-toggle:focus-visible,
body.admin-body .admin-nav-button:focus-visible {
  outline: 3px solid rgba(90, 107, 255, .55);
  outline-offset: 3px;
}
body.admin-body.admin-dashboard-active .admin-header > .brand {
  display: none;
}
body.admin-body.admin-dashboard-active .admin-header-context {
  display: flex;
}
body.admin-body.admin-dashboard-active .admin-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 28px clamp(18px, 2.4vw, 40px) 72px calc(var(--admin-sidebar-width) + clamp(18px, 2.4vw, 40px));
}
body.admin-body.admin-dashboard-active #dashboard {
  width: 100%;
  min-width: 0;
}
body.admin-body.admin-dashboard-active .dashboard-top {
  align-items: center;
  gap: 22px;
  margin-bottom: 20px;
}
body.admin-body.admin-dashboard-active .dashboard-top h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 2.35vw, 38px);
  letter-spacing: -.045em;
  line-height: 1.15;
}
body.admin-body.admin-dashboard-active .dashboard-top .section-subtitle {
  margin: 0;
  line-height: 1.55;
}
body.admin-body.admin-dashboard-active #admin-status {
  margin-bottom: 14px;
}
body.admin-body .admin-sidebar {
  position: fixed;
  z-index: 950;
  top: var(--admin-header-height);
  bottom: 0;
  left: 0;
  display: flex;
  width: var(--admin-sidebar-width);
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: 24px 15px 17px;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid var(--admin-line, #dbe5fb);
  background: var(--admin-sidebar-bg, rgba(249, 251, 255, .96));
  box-shadow: 10px 0 30px rgba(52, 75, 145, .045);
  overscroll-behavior: contain;
  transition: transform .24s ease, background .2s ease, border-color .2s ease;
}
body.admin-body .admin-sidebar-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 0 7px 20px;
  border-bottom: 1px solid var(--admin-line, #dbe5fb);
  color: var(--admin-heading, #13234a);
  text-decoration: none;
}
body.admin-body .admin-sidebar-brand .brand-mark {
  display: grid;
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, #2877ff 0%, #5b4dff 55%, #963dff 100%);
  box-shadow: 0 5px 0 rgba(46, 55, 169, .2), 0 8px 24px rgba(90, 80, 255, .23);
  font-size: 14px;
  font-weight: 800;
}
body.admin-body .admin-sidebar-brand-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
body.admin-body .admin-sidebar-brand-copy strong {
  color: var(--admin-heading, #17264e);
  font-size: 17px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.035em;
}
body.admin-body .admin-sidebar-brand-copy small {
  color: var(--admin-muted, #68799f);
  font-size: 12px;
  line-height: 1.3;
}
body.admin-body .admin-sidebar-section-label {
  margin: 0 9px -8px;
  color: var(--admin-muted, #7b89aa);
  font-size: 10px;
  letter-spacing: .13em;
  line-height: 1.4;
  font-weight: 700;
}
body.admin-body .admin-section-nav {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 7px !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.admin-body .admin-nav-button {
  display: flex !important;
  width: 100%;
  min-height: 47px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 11px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  color: var(--admin-nav-text, #4b5d85) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35;
  transform: none !important;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
body.admin-body .admin-nav-button > .admin-nav-icon {
  display: inline-grid !important;
  flex: 0 0 28px;
  width: 28px;
  min-width: 28px !important;
  height: 28px !important;
  place-items: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  color: var(--admin-nav-icon, #596ff2) !important;
  background: var(--admin-icon-bg, #edf0ff) !important;
  box-shadow: none !important;
  font-size: 17px !important;
  font-weight: 700;
}
body.admin-body .admin-nav-button > .admin-nav-label {
  display: block !important;
  flex: 1 1 auto;
  min-width: 0;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: inherit !important;
  line-height: inherit;
  overflow-wrap: anywhere;
  text-align: left;
}
body.admin-body .admin-nav-button > .admin-nav-count {
  display: inline-grid !important;
  flex: 0 0 auto;
  min-width: 23px !important;
  height: 23px !important;
  place-items: center;
  padding: 0 6px !important;
  border: 1px solid var(--admin-count-border, #d8e1ff) !important;
  border-radius: 999px !important;
  color: var(--admin-nav-icon, #5368eb) !important;
  background: var(--admin-count-bg, #eef1ff) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 700;
}
body.admin-body .admin-nav-button:hover {
  color: var(--admin-nav-hover, #293ec3) !important;
  border-color: var(--admin-nav-border, #dbe2ff) !important;
  background: var(--admin-nav-hover-bg, rgba(235, 240, 255, .9)) !important;
  box-shadow: 0 5px 16px rgba(58, 81, 173, .08) !important;
}
body.admin-body .admin-nav-button.active {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(112deg, #246dff 0%, #5648f7 58%, #933aff 100%) !important;
  box-shadow: 0 6px 15px rgba(75, 80, 244, .26), 0 0 0 1px rgba(255,255,255,.16) inset !important;
}
body.admin-body .admin-nav-button.active > .admin-nav-icon {
  color: #fff !important;
  background: rgba(255,255,255,.16) !important;
}
body.admin-body .admin-nav-button.active > .admin-nav-count {
  color: #fff !important;
  border-color: rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.17) !important;
}
body.admin-body .admin-sidebar-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 13px 8px 3px;
  border-top: 1px solid var(--admin-line, #dbe5fb);
  color: var(--admin-heading, #19294e);
}
body.admin-body .admin-sidebar-footer-mark {
  display: grid;
  flex: 0 0 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--admin-count-border, #dbe1ff);
  border-radius: 10px;
  color: #6655f8;
  background: var(--admin-icon-bg, #edf0ff);
  font-size: 16px;
}
body.admin-body .admin-sidebar-footer > span:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}
body.admin-body .admin-sidebar-footer strong {
  font-size: 11px;
  line-height: 1.3;
}
body.admin-body .admin-sidebar-footer small {
  color: var(--admin-muted, #7785a6);
  font-size: 10px;
}
body.admin-body .admin-sidebar-backdrop {
  display: none;
}
body.admin-body .admin-sidebar-backdrop[hidden] {
  display: none !important;
}

/* Claro: lavanda, azul y blanco azulado para evitar una superficie plana. */
html[data-theme="light"] body.admin-body {
  --admin-heading: #14234b;
  --admin-muted: #6d7da2;
  --admin-line: #dce5fb;
  --admin-sidebar-bg: rgba(249, 251, 255, .97);
  --admin-control: #fff;
  --admin-nav-text: #4b5d85;
  --admin-nav-icon: #5368ee;
  --admin-icon-bg: #edf0ff;
  --admin-count-border: #d8e1ff;
  --admin-count-bg: #eef1ff;
  --admin-nav-hover: #293ec3;
  --admin-nav-border: #dbe2ff;
  --admin-nav-hover-bg: rgba(235, 240, 255, .92);
  color: #18264c;
  background:
    radial-gradient(ellipse at 14% 12%, rgba(89, 104, 255, .15), transparent 30%),
    radial-gradient(ellipse at 83% 8%, rgba(35, 191, 235, .11), transparent 27%),
    radial-gradient(ellipse at 78% 70%, rgba(176, 102, 255, .08), transparent 30%),
    linear-gradient(135deg, #f0f5ff 0%, #f9f9ff 52%, #edf6ff 100%);
}
html[data-theme="light"] body.admin-body .site-header.admin-header {
  border-color: rgba(208, 221, 250, .95);
  background: rgba(251, 252, 255, .88);
  box-shadow: 0 5px 22px rgba(47, 75, 147, .07);
}
html[data-theme="light"] body.admin-body .theme-toggle {
  border-color: #bdcbff;
  color: #3f46b8;
  background: linear-gradient(135deg, #ffffff, #edf1ff);
  box-shadow: 0 4px 0 #dce3ff, 0 8px 18px rgba(64, 82, 180, .10);
}
html[data-theme="light"] body.admin-body .theme-toggle:hover {
  border-color: #9184ff;
  color: #4b32d7;
  background: linear-gradient(135deg, #f1f3ff, #f3eaff);
  box-shadow: 0 5px 0 #d5d5ff, 0 0 19px rgba(117, 77, 255, .14);
}
html[data-theme="light"] body.admin-body .dashboard-overview {
  --text: #17264c;
  --muted: #6a7ba0;
  --line: #dce6fa;
  --card: #ffffff;
  --card-2: #f5f8ff;
  --soft-accent: #edf0ff;
  --accent: #5367f0;
}
html[data-theme="light"] body.admin-body .dashboard-metric {
  border-color: #dce6fa;
  background: linear-gradient(145deg, #fff 0%, #f7f9ff 100%);
  box-shadow: 0 8px 24px rgba(56, 82, 150, .08);
}
html[data-theme="light"] body.admin-body .dashboard-metric:hover {
  border-color: #aabaff;
  box-shadow: 0 13px 28px rgba(71, 91, 187, .13);
}
html[data-theme="light"] body.admin-body .dashboard-widget {
  border-color: #dce6fa;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,249,255,.97));
  box-shadow: 0 9px 26px rgba(56, 82, 150, .07);
}
html[data-theme="light"] body.admin-body .dashboard-section-heading h3,
html[data-theme="light"] body.admin-body .dashboard-widget-heading h3,
html[data-theme="light"] body.admin-body .dashboard-metric strong,
html[data-theme="light"] body.admin-body .dashboard-chart-ring strong {
  color: #17264c !important;
}
html[data-theme="light"] body.admin-body .dashboard-eyebrow {
  color: #697aa4 !important;
}
html[data-theme="light"] body.admin-body .metric-label {
  color: #50628b !important;
}
html[data-theme="light"] body.admin-body .dashboard-metric small,
html[data-theme="light"] body.admin-body .dashboard-chart-legend p,
html[data-theme="light"] body.admin-body .dashboard-widget-note,
html[data-theme="light"] body.admin-body .dashboard-chart-ring span,
html[data-theme="light"] body.admin-body .dashboard-task-row small,
html[data-theme="light"] body.admin-body .dashboard-quick-action small,
html[data-theme="light"] body.admin-body .dashboard-task-footer,
html[data-theme="light"] body.admin-body .dashboard-updated,
html[data-theme="light"] body.admin-body .dashboard-empty-state {
  color: #65769b !important;
}
html[data-theme="light"] body.admin-body .dashboard-task-row strong,
html[data-theme="light"] body.admin-body .dashboard-quick-action strong,
html[data-theme="light"] body.admin-body .dashboard-activity-item strong {
  color: #17264c !important;
}
html[data-theme="light"] body.admin-body .dashboard-task-row,
html[data-theme="light"] body.admin-body .dashboard-quick-action,
html[data-theme="light"] body.admin-body .dashboard-activity-item {
  border-color: #e4eaf8;
}
html[data-theme="light"] body.admin-body .dashboard-top-product {
  border-color: #e0e7fa;
  background: rgba(239, 243, 255, .65);
}
html[data-theme="light"] body.admin-body .dashboard-top-product-info strong,
html[data-theme="light"] body.admin-body .dashboard-top-product-stats b {
  color: #17264c !important;
}
html[data-theme="light"] body.admin-body .admin-alert {
  color: #43557d;
}
html[data-theme="light"] body.admin-body .dashboard-chart-ring {
  background: conic-gradient(#08c995 var(--published-ratio), #ff9e37 var(--published-ratio) 100%);
}
html[data-theme="light"] body.admin-body .dashboard-progress-track span {
  background: linear-gradient(90deg, #16c99c, #498dff);
}

/* Oscuro: azul noche con resplandores cian/violeta y bordes luminosos. */
html[data-theme="dark"] body.admin-body {
  --admin-heading: #eff3ff;
  --admin-muted: #91a5d3;
  --admin-line: rgba(83, 116, 211, .30);
  --admin-sidebar-bg: rgba(7, 13, 32, .98);
  --admin-control: #101b3a;
  --admin-nav-text: #b4c5ee;
  --admin-nav-icon: #7fcfff;
  --admin-icon-bg: rgba(43, 87, 166, .24);
  --admin-count-border: rgba(79, 131, 246, .38);
  --admin-count-bg: rgba(50, 89, 170, .23);
  --admin-nav-hover: #f0f5ff;
  --admin-nav-border: rgba(73, 204, 255, .35);
  --admin-nav-hover-bg: rgba(30, 67, 120, .28);
  color: #edf3ff;
  background:
    radial-gradient(ellipse at 10% 8%, rgba(37, 104, 255, .20), transparent 29%),
    radial-gradient(ellipse at 83% 10%, rgba(141, 48, 255, .17), transparent 30%),
    radial-gradient(ellipse at 80% 75%, rgba(0, 197, 255, .07), transparent 28%),
    #070b19;
}
html[data-theme="dark"] body.admin-body .site-header.admin-header {
  border-color: rgba(60, 94, 179, .45);
  background: rgba(6, 12, 29, .92);
  box-shadow: 0 5px 24px rgba(0,0,0,.28), 0 1px 0 rgba(57, 197, 255, .08);
}
html[data-theme="dark"] body.admin-body .admin-header-context strong {
  color: #eef4ff;
}
html[data-theme="dark"] body.admin-body .admin-header-context small {
  color: #91b5eb;
}
html[data-theme="dark"] body.admin-body .admin-header .back-link {
  color: #b5c8f1;
}
html[data-theme="dark"] body.admin-body .theme-toggle {
  border-color: rgba(50, 195, 255, .58);
  color: #e3f7ff;
  background: linear-gradient(135deg, rgba(15, 39, 85, .98), rgba(39, 23, 91, .98));
  box-shadow: 0 4px 0 #080f25, 0 0 17px rgba(0, 174, 255, .12), inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-theme="dark"] body.admin-body .theme-toggle:hover {
  border-color: #58dbff;
  box-shadow: 0 4px 0 #080f25, 0 0 22px rgba(0, 184, 255, .28), 0 0 28px rgba(129, 59, 255, .16);
}
html[data-theme="dark"] body.admin-body .admin-sidebar {
  border-right-color: rgba(62, 109, 218, .32);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(30, 96, 237, .14), transparent 47%),
    linear-gradient(180deg, rgba(8, 15, 36, .99), rgba(6, 10, 27, .99));
  box-shadow: 8px 0 32px rgba(0,0,0,.20), 1px 0 0 rgba(42, 174, 255, .035);
}
html[data-theme="dark"] body.admin-body .admin-sidebar-brand {
  border-bottom-color: rgba(71, 112, 212, .30);
}
html[data-theme="dark"] body.admin-body .admin-sidebar-brand .brand-mark {
  box-shadow: 0 5px 0 #07112a, 0 0 23px rgba(48, 112, 255, .38), 0 0 30px rgba(157, 57, 255, .16);
}
html[data-theme="dark"] body.admin-body .admin-sidebar-brand-copy strong {
  color: #eff4ff;
}
html[data-theme="dark"] body.admin-body .admin-sidebar-brand-copy small,
html[data-theme="dark"] body.admin-body .admin-sidebar-section-label,
html[data-theme="dark"] body.admin-body .admin-sidebar-footer small {
  color: #91a7d1;
}
html[data-theme="dark"] body.admin-body .admin-sidebar-footer {
  border-top-color: rgba(71, 112, 212, .30);
  color: #eaf1ff;
}
html[data-theme="dark"] body.admin-body .admin-sidebar-footer-mark {
  border-color: rgba(86, 117, 255, .30);
  color: #a78bff;
  background: rgba(71, 65, 194, .22);
  box-shadow: 0 0 18px rgba(105, 74, 255, .08);
}
html[data-theme="dark"] body.admin-body .admin-nav-button.active {
  border-color: rgba(69, 225, 255, .84) !important;
  background: linear-gradient(112deg, #0b88f4 0%, #5640fa 58%, #9a2dff 100%) !important;
  box-shadow: 0 7px 20px rgba(35, 91, 255, .30), 0 0 16px rgba(0, 205, 255, .20), 0 0 28px rgba(151, 44, 255, .15), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
html[data-theme="dark"] body.admin-body .dashboard-overview {
  --text: #eef4ff;
  --muted: #91a5cc;
  --line: rgba(72, 111, 199, .34);
  --card: #0e1831;
  --card-2: #0a1329;
  --soft-accent: rgba(52, 85, 153, .33);
  --accent: #59d6ff;
}
html[data-theme="dark"] body.admin-body .dashboard-metric {
  border-color: rgba(59, 117, 224, .43);
  background: linear-gradient(145deg, rgba(15, 30, 58, .98), rgba(8, 16, 35, .98));
  box-shadow: 0 8px 24px rgba(0,0,0,.20), 0 0 15px rgba(45, 99, 255, .045);
}
html[data-theme="dark"] body.admin-body .dashboard-metric:hover {
  border-color: rgba(65, 213, 255, .60);
  box-shadow: 0 12px 26px rgba(0,0,0,.25), 0 0 21px rgba(47, 155, 255, .12);
}
html[data-theme="dark"] body.admin-body .dashboard-widget {
  border-color: rgba(66, 117, 218, .38);
  background: linear-gradient(145deg, rgba(13, 25, 50, .98), rgba(8, 15, 32, .98));
  box-shadow: 0 10px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(150, 193, 255, .035);
}
html[data-theme="dark"] body.admin-body .dashboard-widget:hover {
  border-color: rgba(92, 78, 255, .58);
  box-shadow: 0 10px 29px rgba(0,0,0,.24), 0 0 19px rgba(101, 63, 255, .08);
}
html[data-theme="dark"] body.admin-body .dashboard-chart-ring {
  background: conic-gradient(#08d9ac var(--published-ratio), #ffab40 var(--published-ratio) 100%);
}
html[data-theme="dark"] body.admin-body .dashboard-progress-track span {
  background: linear-gradient(90deg, #08d8ab, #43b6ff);
}
html[data-theme="dark"] body.admin-body .dashboard-task-row:hover,
html[data-theme="dark"] body.admin-body .dashboard-quick-action:hover {
  filter: brightness(1.15);
}
html[data-theme="dark"] body.admin-body .admin-menu-toggle {
  border-color: rgba(59, 199, 255, .55);
  color: #e6f7ff;
  background: linear-gradient(135deg, #102c5e, #302164);
  box-shadow: 0 4px 0 #070f24, 0 0 15px rgba(0, 185, 255, .11);
}
html[data-theme="light"] body.admin-body .admin-menu-toggle {
  border-color: #c9d7ff;
  color: #354cc8;
  background: linear-gradient(135deg, #fff, #eef0ff);
}

/* Pantallas pequeñas: sidebar deslizable detrás del botón hamburguesa. */
@media (max-width: 760px) {
  body.admin-body { --admin-header-height: 64px; --admin-sidebar-width: 264px; }
  body.admin-body .site-header.admin-header {
    height: var(--admin-header-height);
    min-height: var(--admin-header-height);
    gap: 10px;
    padding: 0 13px;
  }
  body.admin-body .admin-menu-toggle { display: inline-flex; }
  body.admin-body .admin-header-context {
    gap: 0;
    margin-left: 0;
  }
  body.admin-body .admin-header-context strong { font-size: 13px; }
  body.admin-body .admin-header-context small { font-size: 8px; letter-spacing: .09em; }
  body.admin-body .admin-sidebar {
    width: min(var(--admin-sidebar-width), calc(100vw - 50px));
    padding: 19px 13px 15px;
    transform: translateX(-105%);
    box-shadow: 10px 0 38px rgba(12, 25, 72, .20);
  }
  body.admin-body.admin-sidebar-open .admin-sidebar { transform: translateX(0); }
  body.admin-body .admin-sidebar-backdrop {
    display: block;
    position: fixed;
    z-index: 940;
    top: var(--admin-header-height);
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border: 0;
    border-radius: 0;
    background: rgba(11, 20, 47, .45);
    backdrop-filter: blur(3px);
    cursor: pointer;
  }
  body.admin-body .admin-sidebar-backdrop[hidden] { display: none !important; }
  body.admin-body.admin-dashboard-active .admin-main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 20px 15px 52px;
  }
  body.admin-body.admin-dashboard-active .dashboard-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
  }
  body.admin-body.admin-dashboard-active .dashboard-top h1 {
    font-size: clamp(25px, 6vw, 32px);
    overflow-wrap: anywhere;
  }
  body.admin-body .admin-header > .back-link {
    font-size: 10px;
    line-height: 1.25;
    text-align: right;
    max-width: 115px;
  }
}
@media (max-width: 430px) {
  body.admin-body .site-header.admin-header { gap: 7px; padding: 0 9px; }
  body.admin-body .admin-menu-toggle { flex-basis: 37px; width: 37px; height: 37px; }
  body.admin-body .admin-header-context strong { font-size: 11px; }
  body.admin-body .admin-header-context small { display: none; }
  body.admin-body .admin-header > .back-link { max-width: 92px; font-size: 9px; }
  body.admin-body.admin-dashboard-active .admin-main { padding-right: 12px; padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body.admin-body .admin-sidebar,
  body.admin-body .admin-nav-button,
  body.admin-body .theme-toggle { transition: none !important; }
}

/* Botón funcional para recargar la actividad reciente desde el inventario. */
body.admin-body .dashboard-activity-refresh {
  flex: 0 0 35px;
  padding: 0;
  border: 1px solid var(--line, rgba(130,155,200,.22));
  cursor: pointer;
}
body.admin-body .dashboard-activity-refresh > span {
  display: inline-block;
  line-height: 1;
}
body.admin-body .dashboard-activity-refresh:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
body.admin-body .dashboard-activity-refresh:disabled {
  opacity: .72;
  cursor: progress;
}
body.admin-body .dashboard-activity-refresh.is-refreshing > span {
  animation: admin-activity-refresh-spin .8s linear infinite;
}
body.admin-body .dashboard-activity-refresh-status {
  display: none;
  margin: 10px 0 0;
  color: var(--muted, #91a2c0);
  font-size: .72rem;
  line-height: 1.45;
}
body.admin-body .dashboard-activity-refresh-status:not(:empty) {
  display: block;
}
html[data-theme="light"] body.admin-body .dashboard-activity-refresh-status {
  color: #52668e;
}
html[data-theme="dark"] body.admin-body .dashboard-activity-refresh-status {
  color: #9fb5df;
}
@keyframes admin-activity-refresh-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  body.admin-body .dashboard-activity-refresh.is-refreshing > span {
    animation: none;
  }
}


/* Interés de clientes: gráfico de pastel animado y rankings por variante. */
body.admin-body {
  --interest-slice-1: #4b76ff;
  --interest-slice-2: #8b5cf6;
  --interest-slice-3: #10b981;
  --interest-slice-4: #f59e0b;
  --interest-slice-5: #ec4899;
  --interest-slice-6: #06b6d4;
  --interest-pie-empty: #dce5f8;
}
body.admin-body .dashboard-analytics-widget {
  display: grid;
  gap: 16px;
}
body.admin-body .dashboard-interest-chart-section {
  padding: 17px;
  border: 1px solid var(--line, rgba(130,155,200,.22));
  border-radius: 16px;
  background: linear-gradient(140deg, var(--card, #fff), var(--card-2, #f5f8ff));
}
body.admin-body .dashboard-interest-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}
body.admin-body .dashboard-interest-section-heading h4,
body.admin-body .dashboard-interest-products-heading h4 {
  margin: 3px 0 0;
  color: var(--text, #17264c);
  font-family: "Space Grotesk", sans-serif;
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
body.admin-body .dashboard-interest-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border: 1px solid var(--line, #dce6fa);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--muted, #6a7ba0);
  background: var(--soft-accent, #edf0ff);
  font-size: .68rem;
  font-weight: 700;
}
body.admin-body .dashboard-interest-chart-layout {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 20px;
}
body.admin-body .dashboard-interest-pie-wrap {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 7px 0;
}
body.admin-body .dashboard-interest-pie {
  display: grid;
  position: relative;
  width: clamp(138px, 16vw, 174px);
  aspect-ratio: 1;
  place-content: center;
  justify-items: center;
  border: 5px solid color-mix(in srgb, var(--card, #fff) 85%, transparent);
  border-radius: 50%;
  background: var(--interest-pie-empty);
  box-shadow: 0 9px 22px rgba(39, 64, 128, .13), 0 0 0 1px var(--line, #dce6fa);
  color: var(--text, #17264c);
  line-height: 1;
  transition: background .35s ease, box-shadow .25s ease;
}
body.admin-body .dashboard-interest-pie::before {
  content: "";
  position: absolute;
  inset: 27%;
  border: 1px solid var(--line, #dce6fa);
  border-radius: 50%;
  background: var(--card, #fff);
  box-shadow: 0 2px 12px rgba(28, 49, 100, .12);
}
body.admin-body .dashboard-interest-pie > span,
body.admin-body .dashboard-interest-pie > small {
  position: relative;
  z-index: 1;
}
body.admin-body .dashboard-interest-pie.is-animated {
  animation: dashboard-interest-pie-in .72s cubic-bezier(.2,.75,.25,1) both;
}
body.admin-body .dashboard-interest-pie-total {
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -.06em;
}
body.admin-body .dashboard-interest-pie small {
  margin-top: 5px;
  color: var(--muted, #6a7ba0);
  font-size: .72rem;
  font-weight: 700;
}
body.admin-body .dashboard-interest-legend {
  display: grid;
  gap: 10px;
  min-width: 0;
}
body.admin-body .dashboard-interest-legend-row {
  display: grid;
  grid-template-columns: 10px minmax(0,1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
body.admin-body .dashboard-interest-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--interest-slice-1);
}
body.admin-body .dashboard-interest-legend-row .interest-slice-1 { background: var(--interest-slice-1); }
body.admin-body .dashboard-interest-legend-row .interest-slice-2 { background: var(--interest-slice-2); }
body.admin-body .dashboard-interest-legend-row .interest-slice-3 { background: var(--interest-slice-3); }
body.admin-body .dashboard-interest-legend-row .interest-slice-4 { background: var(--interest-slice-4); }
body.admin-body .dashboard-interest-legend-row .interest-slice-5 { background: var(--interest-slice-5); }
body.admin-body .dashboard-interest-legend-row .interest-slice-6 { background: var(--interest-slice-6); }
body.admin-body .dashboard-interest-legend-label {
  min-width: 0;
  overflow: hidden;
  color: var(--text, #263963);
  font-size: .76rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.admin-body .dashboard-interest-legend-row > strong {
  color: var(--text, #17264c);
  font-size: .78rem;
  font-weight: 700;
}
body.admin-body .dashboard-interest-legend-row > small {
  min-width: 31px;
  color: var(--muted, #6a7ba0);
  font-size: .68rem;
  text-align: right;
}
body.admin-body .dashboard-interest-rankings {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
body.admin-body .dashboard-interest-ranking {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line, #dce6fa);
  border-radius: 14px;
  background: var(--card, #fff);
}
body.admin-body .dashboard-interest-ranking .dashboard-interest-section-heading {
  margin-bottom: 10px;
}
body.admin-body .dashboard-interest-ranking .dashboard-interest-section-heading h4 {
  font-size: .86rem;
}
body.admin-body .dashboard-interest-rank-list {
  display: grid;
  gap: 12px;
}
body.admin-body .dashboard-interest-rank-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
}
body.admin-body .dashboard-interest-rank-main {
  display: grid;
  min-width: 0;
  gap: 6px;
}
body.admin-body .dashboard-interest-rank-main > strong {
  overflow: hidden;
  color: var(--text, #17264c);
  font-size: .73rem;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.admin-body .dashboard-interest-rank-row > b {
  color: var(--text, #17264c);
  font-size: .76rem;
}
body.admin-body .dashboard-interest-rank-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line, #dce6fa);
}
body.admin-body .dashboard-interest-rank-track > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--interest-slice-1), var(--interest-slice-2));
  animation: dashboard-interest-bar-in .7s ease both;
}
body.admin-body .dashboard-interest-products-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}
body.admin-body .dashboard-interest-products-heading > h4 {
  margin: 0;
}
body.admin-body .dashboard-interest-products-heading > span {
  color: var(--muted, #6a7ba0);
  font-size: .68rem;
}
html[data-theme="light"] body.admin-body {
  --interest-slice-1: #4978ff;
  --interest-slice-2: #8b5cf6;
  --interest-slice-3: #10b981;
  --interest-slice-4: #f59e0b;
  --interest-slice-5: #ed4899;
  --interest-slice-6: #06a6c9;
  --interest-pie-empty: linear-gradient(135deg, #e8eeff, #dbe8ff);
}
html[data-theme="dark"] body.admin-body {
  --interest-slice-1: #37c9ff;
  --interest-slice-2: #a878ff;
  --interest-slice-3: #20e0ac;
  --interest-slice-4: #ffb347;
  --interest-slice-5: #ff62be;
  --interest-slice-6: #4b8dff;
  --interest-pie-empty: linear-gradient(135deg, #142648, #171333);
}
html[data-theme="dark"] body.admin-body .dashboard-interest-chart-section {
  border-color: rgba(68, 131, 239, .30);
  background: linear-gradient(140deg, rgba(15, 29, 57, .94), rgba(10, 18, 39, .94));
  box-shadow: inset 0 1px 0 rgba(156, 193, 255, .035);
}
html[data-theme="dark"] body.admin-body .dashboard-interest-ranking {
  border-color: rgba(62, 119, 221, .30);
  background: linear-gradient(145deg, rgba(13, 25, 51, .95), rgba(8, 15, 33, .96));
}
html[data-theme="dark"] body.admin-body .dashboard-interest-pie {
  box-shadow: 0 9px 25px rgba(0,0,0,.26), 0 0 20px rgba(46, 137, 255, .12), 0 0 34px rgba(151, 62, 255, .07);
}
html[data-theme="dark"] body.admin-body .dashboard-interest-legend-label,
html[data-theme="dark"] body.admin-body .dashboard-interest-legend-row > strong,
html[data-theme="dark"] body.admin-body .dashboard-interest-rank-main > strong,
html[data-theme="dark"] body.admin-body .dashboard-interest-rank-row > b,
html[data-theme="dark"] body.admin-body .dashboard-interest-section-heading h4,
html[data-theme="dark"] body.admin-body .dashboard-interest-products-heading h4 {
  color: #eaf2ff;
}
html[data-theme="dark"] body.admin-body .dashboard-interest-legend-row > small,
html[data-theme="dark"] body.admin-body .dashboard-interest-products-heading > span {
  color: #94acd6;
}
@keyframes dashboard-interest-pie-in {
  from { opacity: .45; transform: scale(.88) rotate(-10deg); filter: saturate(.7); }
  to { opacity: 1; transform: scale(1) rotate(0); filter: saturate(1); }
}
@keyframes dashboard-interest-bar-in {
  from { transform: scaleX(.2); transform-origin: left; opacity: .5; }
  to { transform: scaleX(1); transform-origin: left; opacity: 1; }
}
@media(max-width:760px) {
  body.admin-body .dashboard-interest-chart-layout { grid-template-columns: minmax(0,1fr); gap: 13px; }
  body.admin-body .dashboard-interest-pie { width: min(174px, 55vw); }
  body.admin-body .dashboard-interest-legend { gap: 9px; }
  body.admin-body .dashboard-interest-rankings { grid-template-columns: minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce) {
  body.admin-body .dashboard-interest-pie.is-animated,
  body.admin-body .dashboard-interest-rank-track > i {
    animation: none !important;
  }
}

/* Cat-logo admin fixes: galería principal del producto y pie alineado con el área útil. */
body.admin-body .admin-product-gallery {
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line, rgba(130, 150, 200, .24));
  border-radius: 14px;
  background: rgba(127, 145, 190, .055);
}
body.admin-body .admin-product-gallery-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
}
body.admin-body .admin-product-gallery-heading > div {
  flex: 1 1 250px;
  min-width: 0;
}
body.admin-body .admin-product-gallery-heading h3 {
  margin: 0;
  color: var(--ink, #172544);
  font-size: 15px;
  line-height: 1.4;
}
body.admin-body .admin-product-gallery-heading p {
  margin: 6px 0 0;
  color: var(--muted, #73809e);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
}
body.admin-body .admin-product-gallery .file-button {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  margin: 0;
  white-space: normal;
}
body.admin-body .admin-product-gallery-summary {
  margin: 12px 0 0;
  color: var(--muted, #73809e);
  font-size: 12px;
  line-height: 1.45;
}
body.admin-body #product-images-preview:empty {
  display: none;
}

/* El menú lateral es fijo solo en escritorio; el pie no debe quedar debajo. */
body.admin-body.admin-dashboard-active .site-footer {
  width: calc(100% - var(--admin-sidebar-width));
  margin-left: var(--admin-sidebar-width);
}
@media (max-width: 760px) {
  body.admin-body .admin-product-gallery {
    padding: 13px;
  }
  body.admin-body .admin-product-gallery .file-button {
    width: 100%;
  }
  body.admin-body.admin-dashboard-active .site-footer {
    width: 100%;
    margin-left: 0;
  }
}


/* Encabezado compacto de inicio de sesión: sin menú lateral hasta autenticar. */
body.admin-body:not(.admin-dashboard-active) .site-header.admin-header {
  min-height: 68px;
  height: auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px clamp(12px, 3vw, 24px);
}
body.admin-body:not(.admin-dashboard-active) .admin-menu-toggle {
  display: none !important;
}
body.admin-body:not(.admin-dashboard-active) .admin-header-context {
  display: none !important;
}
body.admin-body:not(.admin-dashboard-active) .admin-header > .brand {
  order: 1;
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin: 0;
  font-size: clamp(14px, 2.3vw, 18px);
  line-height: 1.2;
  white-space: nowrap;
}
body.admin-body:not(.admin-dashboard-active) .admin-header > .brand .brand-mark {
  display: inline-flex;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 13px;
}
body.admin-body:not(.admin-dashboard-active) .admin-header > .brand > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.admin-body:not(.admin-dashboard-active) .admin-header > .back-link {
  order: 2;
  flex: 0 0 auto;
  max-width: none;
  margin: 0;
  padding: 6px 0;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}
body.admin-body:not(.admin-dashboard-active) .admin-header > .theme-toggle {
  order: 3;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  gap: 0;
  justify-content: center;
  border-radius: 13px;
}
body.admin-body:not(.admin-dashboard-active) .admin-header > .theme-toggle .theme-toggle-label {
  display: none;
}
@media (max-width: 430px) {
  body.admin-body:not(.admin-dashboard-active) .site-header.admin-header {
    min-height: 62px;
    gap: 7px;
    padding: 8px 10px;
  }
  body.admin-body:not(.admin-dashboard-active) .admin-header > .brand {
    gap: 7px;
    font-size: 14px;
  }
  body.admin-body:not(.admin-dashboard-active) .admin-header > .brand .brand-mark {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 12px;
  }
  body.admin-body:not(.admin-dashboard-active) .admin-header > .back-link {
    font-size: 10px;
  }
  body.admin-body:not(.admin-dashboard-active) .admin-header > .theme-toggle {
    flex-basis: 38px;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    border-radius: 11px;
  }
}


/* En el inicio de sesión, ocultar el enlace público.
   Al iniciar sesión, admin-dashboard-active se añade al body y el enlace vuelve a mostrarse. */
body.admin-body:not(.admin-dashboard-active) .admin-header > .back-link {
  display: none !important;
}




/* Enlace al catálogo público integrado al menú lateral. */
body.admin-body .admin-sidebar-catalog-link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  margin: 18px 0 14px;
  padding: 10px 13px;
  border: 1px solid var(--admin-catalog-link-border, rgba(83, 113, 238, .38));
  border-radius: 12px;
  color: var(--admin-catalog-link-text, #3853c7);
  background: var(--admin-catalog-link-bg, rgba(235, 241, 255, .92));
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
body.admin-body .admin-sidebar-catalog-link > span:first-child {
  display: inline-grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: inherit;
  background: rgba(74, 103, 224, .12);
  font-size: 17px;
}
body.admin-body .admin-sidebar-catalog-link:hover {
  transform: translateY(-1px);
  border-color: rgba(95, 119, 246, .72);
  background: var(--admin-catalog-link-hover-bg, #e4ebff);
  box-shadow: 0 5px 12px rgba(64, 88, 197, .12);
}
body.admin-body .admin-sidebar-catalog-link:focus-visible {
  outline: 3px solid rgba(109, 139, 255, .8);
  outline-offset: 3px;
}
body.admin-body:not(.admin-dashboard-active) .admin-sidebar-catalog-link {
  display: none !important;
}
html[data-theme="dark"] body.admin-body .admin-sidebar-catalog-link {
  --admin-catalog-link-border: rgba(102, 137, 255, .38);
  --admin-catalog-link-text: #dbe6ff;
  --admin-catalog-link-bg: rgba(35, 55, 112, .42);
  --admin-catalog-link-hover-bg: rgba(47, 70, 140, .58);
}
html[data-theme="light"] body.admin-body .admin-sidebar-catalog-link {
  --admin-catalog-link-border: rgba(77, 103, 218, .26);
  --admin-catalog-link-text: #354bb1;
  --admin-catalog-link-bg: #eef2ff;
  --admin-catalog-link-hover-bg: #e1e8ff;
}
@media (max-width: 760px) {
  body.admin-body .admin-sidebar-catalog-link {
    min-height: 42px;
    margin: 14px 0 12px;
    padding: 9px 11px;
  }
}


/* Cerrar sesión junto a Ver catálogo dentro del menú lateral. */
body.admin-body .admin-sidebar-logout {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 44px;
  margin: 0 0 14px;
  padding: 10px 13px;
  border: 1px solid var(--admin-logout-border, rgba(224, 76, 112, .3));
  border-radius: 12px;
  color: var(--admin-logout-text, #ad2449);
  background: var(--admin-logout-bg, #fff0f4);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
body.admin-body .admin-sidebar-logout > span:first-child {
  display: inline-grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: inherit;
  background: rgba(220, 65, 103, .1);
  font-size: 18px;
}
body.admin-body .admin-sidebar-logout:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(224, 74, 111, .58);
  background: var(--admin-logout-hover-bg, #ffe2ea);
  box-shadow: 0 5px 12px rgba(191, 48, 85, .1);
}
body.admin-body .admin-sidebar-logout:active:not(:disabled) {
  transform: translateY(1px);
}
body.admin-body .admin-sidebar-logout:focus-visible {
  outline: 3px solid rgba(109, 139, 255, .8);
  outline-offset: 3px;
}
body.admin-body .admin-sidebar-logout:disabled {
  cursor: wait;
  opacity: .7;
}
html[data-theme="dark"] body.admin-body .admin-sidebar-logout {
  --admin-logout-border: rgba(255, 105, 142, .32);
  --admin-logout-text: #ffc0d0;
  --admin-logout-bg: rgba(110, 25, 55, .24);
  --admin-logout-hover-bg: rgba(151, 36, 71, .4);
}
html[data-theme="light"] body.admin-body .admin-sidebar-logout {
  --admin-logout-border: rgba(207, 58, 95, .24);
  --admin-logout-text: #ad2449;
  --admin-logout-bg: #fff0f4;
  --admin-logout-hover-bg: #ffe2ea;
}
@media (max-width: 760px) {
  body.admin-body .admin-sidebar-logout {
    min-height: 42px;
    margin-bottom: 12px;
    padding: 9px 11px;
  }
}




/* Cat-logo: compactación conservadora de la interfaz pública.
   Estas reglas no se aplican al panel administrativo (body.admin-body). */
body:not(.admin-body) .catalog-section {
  padding-top: 42px;
  padding-bottom: 46px;
}
body:not(.admin-body) .section-heading {
  gap: 14px;
  margin-bottom: 18px;
}
body:not(.admin-body) .product-grid {
  gap: 16px;
}
body:not(.admin-body) .product-card {
  border-radius: 14px;
}
body:not(.admin-body) .product-image {
  height: 190px;
}
body:not(.admin-body) .product-card-content {
  padding: 14px;
}
body:not(.admin-body) .product-card h3 {
  min-height: 0;
  margin: 0 0 8px;
  line-height: 1.35;
}
body:not(.admin-body) .product-card-capacity {
  margin: 0 0 8px;
}
body:not(.admin-body) .product-card .product-price {
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
body:not(.admin-body) .product-card .product-actions {
  margin-top: 11px;
}
body:not(.admin-body) .product-card .product-view-button {
  min-height: 42px;
}
@media (max-width: 760px) {
  body:not(.admin-body) .hero {
    min-height: 0;
    gap: 14px;
    padding: 28px 16px 20px;
  }
  body:not(.admin-body) .hero h1 {
    margin-bottom: 12px;
    font-size: clamp(31px, 8.4vw, 39px);
    line-height: 1.1;
    letter-spacing: -1.5px;
  }
  body:not(.admin-body) .hero-description {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
  }
  body:not(.admin-body) .hero .button {
    min-height: 42px;
    padding: 10px 14px;
  }
  body:not(.admin-body) .hero-trust {
    gap: 7px 12px;
    margin-top: 13px;
    font-size: 11px;
    line-height: 1.4;
  }
  body:not(.admin-body) .hero-art.hero-visual {
    min-height: 0;
    height: clamp(170px, 48vw, 235px);
    margin: 2px 0 0;
  }
  body:not(.admin-body) .hero-image-frame {
    inset: 0;
    border-radius: 16px;
  }
  body:not(.admin-body) .benefit-row {
    gap: 10px;
    padding: 15px 13px;
  }
  body:not(.admin-body) .benefit-row > div {
    min-width: 0;
    gap: 7px;
  }
  body:not(.admin-body) .benefit-row b {
    font-size: 11px;
    line-height: 1.3;
  }
  body:not(.admin-body) .benefit-row small {
    font-size: 10px;
    line-height: 1.35;
  }
  body:not(.admin-body) .catalog-section {
    padding: 24px 13px 32px !important;
  }
  body:not(.admin-body) .section-heading {
    gap: 10px;
    margin-bottom: 13px;
  }
  body:not(.admin-body) .section-heading h2 {
    margin-bottom: 5px;
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.2;
  }
  body:not(.admin-body) .section-subtitle {
    font-size: 12px;
    line-height: 1.4;
  }
  body:not(.admin-body) .search-box {
    height: 42px;
    min-height: 42px;
    margin: 0;
    border-radius: 11px;
  }
  body:not(.admin-body) .filter-row {
    gap: 6px;
    margin: 9px 0 11px;
  }
  body:not(.admin-body) .filter-chip {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 11px;
  }
  body:not(.admin-body) .catalog-status {
    margin: 10px 0 12px;
    font-size: 11px;
  }
  body:not(.admin-body) .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  body:not(.admin-body) .product-card {
    min-width: 0;
    border-radius: 12px;
    padding-bottom: 0;
  }
  body:not(.admin-body) .product-image {
    height: auto;
    aspect-ratio: 1 / 1;
    min-height: 0;
  }
  body:not(.admin-body) .product-image img {
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: contain;
  }
  body:not(.admin-body) .product-card-content {
    padding: 10px;
  }
  body:not(.admin-body) .product-card .product-category {
    margin-bottom: 5px;
    font-size: 9px;
    letter-spacing: .65px;
  }
  body:not(.admin-body) .product-card h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: 0;
    margin: 0 0 7px;
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  body:not(.admin-body) .product-card-capacity {
    margin: 0 0 7px;
    font-size: 10px;
    line-height: 1.35;
  }
  body:not(.admin-body) .product-card .product-price-label {
    font-size: 9px;
    letter-spacing: .45px;
  }
  body:not(.admin-body) .product-card .product-price {
    margin-top: 2px;
    font-size: clamp(16px, 4.6vw, 20px);
    line-height: 1.2;
  }
  body:not(.admin-body) .product-card .product-price-secondary {
    font-size: 10px;
    line-height: 1.35;
  }
  body:not(.admin-body) .product-card .product-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 9px;
  }
  body:not(.admin-body) .product-card .product-view-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 38px;
    padding: 8px 6px;
    border-radius: 9px;
    font-size: 11px;
    line-height: 1.2;
    white-space: normal;
  }
  body:not(.admin-body) .product-card .product-view-button span {
    margin-left: 4px;
  }
}
@media (max-width: 380px) {
  body:not(.admin-body) .hero {
    padding-right: 12px;
    padding-left: 12px;
  }
  body:not(.admin-body) .hero-art.hero-visual {
    height: 165px;
  }
  body:not(.admin-body) .benefit-row {
    gap: 7px;
    padding-right: 10px;
    padding-left: 10px;
  }
  body:not(.admin-body) .benefit-row > div {
    gap: 5px;
  }
  body:not(.admin-body) .benefit-icon {
    font-size: 15px;
  }
  body:not(.admin-body) .product-grid {
    gap: 8px;
  }
  body:not(.admin-body) .product-card-content {
    padding: 8px;
  }
  body:not(.admin-body) .product-card .product-price {
    font-size: 16px;
  }
  body:not(.admin-body) .product-card .product-view-button {
    font-size: 10px;
  }
}


/* Cat-logo: botones y superficies públicas con más color, profundidad y respuesta.
   Alcance exclusivo del catálogo del cliente; el panel admin queda intacto. */
body:not(.admin-body) .button,
body:not(.admin-body) .buy-button,
body:not(.admin-body) .header-contact,
body:not(.admin-body) .finance-banner .button,
body:not(.admin-body) .product-view-button {
  border: 1px solid rgba(116, 145, 255, .58);
  border-radius: 11px;
  color: #fff !important;
  background: linear-gradient(115deg, #2468e8 0%, #5149df 56%, #7a43d2 100%);
  box-shadow:
    0 4px 0 #273b9d,
    0 8px 16px rgba(39, 75, 205, .24),
    inset 0 1px 0 rgba(255, 255, 255, .2);
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
}
body:not(.admin-body) .button:hover,
body:not(.admin-body) .buy-button:hover,
body:not(.admin-body) .header-contact:hover,
body:not(.admin-body) .finance-banner .button:hover,
body:not(.admin-body) .product-view-button:hover {
  border-color: rgba(178, 194, 255, .95);
  color: #fff !important;
  background: linear-gradient(115deg, #3182f6 0%, #6558ef 55%, #9555e8 100%);
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 #293b9a,
    0 12px 23px rgba(53, 82, 221, .32),
    0 0 18px rgba(107, 92, 255, .17),
    inset 0 1px 0 rgba(255, 255, 255, .24);
  filter: saturate(1.08);
}
body:not(.admin-body) .button:active,
body:not(.admin-body) .buy-button:active,
body:not(.admin-body) .header-contact:active,
body:not(.admin-body) .finance-banner .button:active,
body:not(.admin-body) .product-view-button:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 #273b9d,
    0 3px 8px rgba(39, 75, 205, .18);
}
body:not(.admin-body) .button:focus-visible,
body:not(.admin-body) .buy-button:focus-visible,
body:not(.admin-body) .header-contact:focus-visible,
body:not(.admin-body) .finance-banner .button:focus-visible,
body:not(.admin-body) .product-view-button:focus-visible,
body:not(.admin-body) .filter-chip:focus-visible {
  outline: 3px solid rgba(112, 160, 255, .9);
  outline-offset: 3px;
}
body:not(.admin-body) .theme-toggle,
body:not(.admin-body) .back-to-top {
  border: 1px solid rgba(104, 139, 255, .62);
  color: #fff;
  background: linear-gradient(135deg, #172d59, #34265e 58%, #452b78);
  box-shadow: 0 3px 0 #101d43, 0 7px 15px rgba(25, 42, 103, .24);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
body:not(.admin-body) .theme-toggle:hover,
body:not(.admin-body) .back-to-top:hover {
  transform: translateY(-2px);
  filter: brightness(1.16);
  box-shadow: 0 5px 0 #101d43, 0 10px 20px rgba(66, 77, 190, .32);
}
body:not(.admin-body) .theme-toggle:active,
body:not(.admin-body) .back-to-top:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #101d43;
}
body:not(.admin-body) .filter-chip {
  border-color: #cbd7f4;
  transition: transform .16s ease, color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
body:not(.admin-body) .filter-chip:hover {
  border-color: #778df1;
  color: #3349b9;
  background: linear-gradient(120deg, #eef3ff, #f7efff);
  transform: translateY(-1px);
}
body:not(.admin-body) .filter-chip.active {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(110deg, #286be8, #6547d7);
  box-shadow: 0 3px 0 #283d9c, 0 6px 14px rgba(56, 82, 205, .2);
}
body:not(.admin-body) .finance-banner {
  border-color: rgba(101, 130, 224, .62);
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 95% 4%, rgba(95, 115, 255, .24), transparent 36%),
    radial-gradient(ellipse at 0% 100%, rgba(22, 151, 222, .13), transparent 40%),
    linear-gradient(118deg, #101b36 0%, #1b2850 58%, #30204f 100%);
  box-shadow: 0 5px 0 #080f20, 0 14px 30px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .045);
}
body:not(.admin-body) .finance-symbol {
  border-color: rgba(135, 157, 255, .72);
  border-radius: 12px;
  background: linear-gradient(140deg, #3478f6, #7446d6);
  box-shadow: 0 4px 0 #273b91, 0 7px 15px rgba(60, 76, 200, .26);
}
body:not(.admin-body) .product-card {
  border-color: rgba(106, 130, 190, .36);
  box-shadow: 0 4px 0 rgba(10, 17, 38, .85), 0 8px 18px rgba(7, 14, 31, .15);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body:not(.admin-body) .product-card:hover {
  border-color: rgba(111, 139, 255, .78);
  transform: translateY(-3px);
  box-shadow: 0 5px 0 rgba(10, 17, 38, .8), 0 12px 24px rgba(45, 67, 155, .2), 0 0 15px rgba(102, 90, 231, .09);
}
body:not(.admin-body) .product-image {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(91, 120, 220, .10), transparent 65%),
    linear-gradient(145deg, #f8faff, #edf2ff);
}
html[data-theme="dark"] body:not(.admin-body) .product-image {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(92, 118, 238, .16), transparent 65%),
    linear-gradient(145deg, #1b2a4c, #131d34);
}
html[data-theme="light"] body:not(.admin-body) .finance-banner {
  border-color: rgba(104, 128, 218, .38);
  color: #f6f8ff;
  background:
    radial-gradient(ellipse at 96% 0%, rgba(124, 91, 231, .38), transparent 37%),
    radial-gradient(ellipse at 0% 100%, rgba(37, 145, 230, .25), transparent 40%),
    linear-gradient(115deg, #18366d, #3c3a91 63%, #62409c);
  box-shadow: 0 5px 0 #202d71, 0 12px 25px rgba(43, 64, 151, .2);
}
html[data-theme="light"] body:not(.admin-body) .finance-banner h2,
html[data-theme="light"] body:not(.admin-body) .finance-banner p:not(.eyebrow) {
  color: #f5f7ff;
}
html[data-theme="light"] body:not(.admin-body) .finance-banner .eyebrow {
  color: #c7d6ff;
}
html[data-theme="light"] body:not(.admin-body) .finance-banner .button {
  border-color: rgba(189, 203, 255, .75);
  background: linear-gradient(115deg, #2569e8, #5546dc 58%, #7c43d4);
  box-shadow: 0 4px 0 #252d83, 0 8px 16px rgba(12, 23, 68, .25);
}
@media (prefers-reduced-motion: reduce) {
  body:not(.admin-body) .button,
  body:not(.admin-body) .buy-button,
  body:not(.admin-body) .header-contact,
  body:not(.admin-body) .finance-banner .button,
  body:not(.admin-body) .product-view-button,
  body:not(.admin-body) .theme-toggle,
  body:not(.admin-body) .back-to-top,
  body:not(.admin-body) .product-card {
    transition: none !important;
  }
}


/* Vista de catálogo: colores de variantes en círculos y acabado visual por tema.
   Reglas solo para la interfaz pública; no afectan al panel administrativo. */
body:not(.admin-body) .product-card-colors {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin: 0 0 10px;
}
body:not(.admin-body) .product-card-colors-label {
  flex: 0 0 100%;
  color: var(--catalog-color-label, #7785a1);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .65px;
  line-height: 1.2;
  text-transform: uppercase;
}
body:not(.admin-body) .product-card-color-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 20px;
}
body:not(.admin-body) .product-card-color-swatch {
  display: inline-block;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  border: 2px solid var(--catalog-swatch-ring, #fff);
  border-radius: 50%;
  background: var(--swatch-color, #315a91);
  box-shadow: 0 0 0 1px var(--catalog-swatch-outline, rgba(44, 65, 110, .25)), 0 2px 4px rgba(12, 22, 45, .14);
}
body:not(.admin-body) .product-card-color-swatch[style*="#f3f4f6"],
body:not(.admin-body) .product-card-color-swatch[style*="#aeb7c4"],
body:not(.admin-body) .product-card-color-swatch[style*="#d9c9a8"] {
  box-shadow: 0 0 0 1px rgba(40, 52, 78, .24), inset 0 0 0 1px rgba(40, 52, 78, .08);
}
body:not(.admin-body) .product-card-color-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  color: var(--catalog-color-label, #647391);
  background: var(--catalog-color-more-bg, #e9eef9);
  font-size: 9px;
  font-weight: 800;
}
body:not(.admin-body) .product-card-capacity {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid var(--catalog-capacity-border, #e0e8f7);
  border-radius: 7px;
  color: var(--catalog-capacity-text, #62718f);
  background: var(--catalog-capacity-bg, #f0f4fc);
}
html[data-theme="light"] body:not(.admin-body) {
  --catalog-color-label: #6c7b98;
  --catalog-swatch-ring: #ffffff;
  --catalog-swatch-outline: rgba(37, 58, 102, .22);
  --catalog-color-more-bg: #e8eefb;
  --catalog-capacity-border: #dce5f6;
  --catalog-capacity-text: #58698b;
  --catalog-capacity-bg: #f0f4fc;
}
html[data-theme="light"] body:not(.admin-body) .product-card {
  border-color: #cbd8f3;
  background: linear-gradient(165deg, #ffffff 0%, #f9fbff 100%);
  box-shadow: 0 5px 0 rgba(44, 73, 143, .07), 0 10px 25px rgba(39, 65, 124, .09);
}
html[data-theme="light"] body:not(.admin-body) .product-card:hover {
  border-color: #91a9f1;
  box-shadow: 0 6px 0 rgba(44, 73, 143, .07), 0 15px 30px rgba(54, 79, 166, .16), 0 0 0 1px rgba(108, 132, 232, .08);
}
html[data-theme="light"] body:not(.admin-body) .product-image {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(90, 121, 220, .14), transparent 68%),
    linear-gradient(145deg, #f5f8ff 0%, #e8efff 100%);
}
html[data-theme="light"] body:not(.admin-body) .product-card .product-category {
  color: #355ce0;
}
html[data-theme="light"] body:not(.admin-body) .product-card h3 {
  color: #1b2947;
}
html[data-theme="light"] body:not(.admin-body) .product-card .product-price {
  color: #294ab5;
}
html[data-theme="light"] body:not(.admin-body) .search-box {
  border-color: #cfdbf5;
  background: linear-gradient(135deg, #ffffff, #f7f9ff);
  box-shadow: 0 3px 12px rgba(42, 67, 128, .05);
}
html[data-theme="light"] body:not(.admin-body) .filter-chip {
  border-color: #cbd7f1;
  color: #42547c;
  background: linear-gradient(180deg, #ffffff, #f3f6ff);
}
html[data-theme="light"] body:not(.admin-body) .benefit-row {
  border-color: #d5e0f8;
  background: linear-gradient(115deg, #ffffff, #f0f4ff);
  box-shadow: 0 8px 22px rgba(47, 70, 137, .08);
}
html[data-theme="dark"] body:not(.admin-body) {
  --catalog-color-label: #9eafd2;
  --catalog-swatch-ring: #101a31;
  --catalog-swatch-outline: rgba(193, 207, 255, .28);
  --catalog-color-more-bg: #273657;
  --catalog-capacity-border: #33466b;
  --catalog-capacity-text: #c1cde4;
  --catalog-capacity-bg: #1b2a47;
}
html[data-theme="dark"] body:not(.admin-body) .product-card {
  border-color: #2d416b;
  background: linear-gradient(165deg, #17223d 0%, #111a30 100%);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .2), 0 12px 26px rgba(0, 0, 0, .22);
}
html[data-theme="dark"] body:not(.admin-body) .product-card:hover {
  border-color: #6a83e7;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .2), 0 16px 30px rgba(0, 0, 0, .3), 0 0 17px rgba(94, 109, 230, .12);
}
html[data-theme="dark"] body:not(.admin-body) .product-image {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(93, 120, 236, .19), transparent 68%),
    linear-gradient(145deg, #202f50, #131e35);
}
html[data-theme="dark"] body:not(.admin-body) .product-card .product-category {
  color: #91a9ff;
}
html[data-theme="dark"] body:not(.admin-body) .product-card h3 {
  color: #f0f4ff;
}
html[data-theme="dark"] body:not(.admin-body) .product-card .product-price {
  color: #aabaff;
}
html[data-theme="dark"] body:not(.admin-body) .search-box {
  border-color: #34476d;
  background: linear-gradient(135deg, #131e35, #1a2744);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
}
html[data-theme="dark"] body:not(.admin-body) .filter-chip {
  border-color: #34476d;
  color: #d3def4;
  background: linear-gradient(180deg, #172440, #111b30);
}
html[data-theme="dark"] body:not(.admin-body) .benefit-row {
  border-color: #30436b;
  background: linear-gradient(115deg, #172440, #1b2444);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}
@media (max-width: 760px) {
  body:not(.admin-body) .product-card-colors {
    gap: 5px;
    margin-bottom: 8px;
  }
  body:not(.admin-body) .product-card-color-list {
    gap: 5px;
    min-height: 17px;
  }
  body:not(.admin-body) .product-card-color-swatch {
    flex-basis: 14px;
    width: 14px;
    height: 14px;
  }
  body:not(.admin-body) .product-card-color-more {
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: 8px;
  }
  body:not(.admin-body) .product-card-capacity {
    padding: 3px 5px;
    margin-bottom: 7px;
  }
}


/* Producto destacado: énfasis visible, sin cambiar el tamaño de la tarjeta. */
body:not(.admin-body) .featured-product-card {
  position: relative;
  border-color: #7b80f5;
  box-shadow: 0 0 0 1px rgba(111, 102, 238, .2), 0 8px 24px rgba(75, 75, 190, .16);
}
body:not(.admin-body) .featured-product-card .featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 0 0 10px 0;
  color: #ffffff;
  background: linear-gradient(115deg, #245fe8, #7b35d6);
  box-shadow: 0 3px 12px rgba(54, 55, 176, .3);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .55px;
}
html[data-theme="light"] body:not(.admin-body) .featured-product-card {
  border-color: #8994f7;
  background: linear-gradient(155deg, #ffffff 0%, #f4f5ff 100%);
  box-shadow: 0 0 0 1px rgba(91, 94, 220, .13), 0 10px 26px rgba(72, 79, 184, .14);
}
html[data-theme="dark"] body:not(.admin-body) .featured-product-card {
  border-color: #777bf5;
  background: linear-gradient(155deg, #1b2544 0%, #121b32 100%);
  box-shadow: 0 0 0 1px rgba(125, 119, 255, .2), 0 10px 27px rgba(83, 65, 199, .2);
}
html[data-theme="light"] body:not(.admin-body) .featured-product-card:hover {
  box-shadow: 0 0 0 1px rgba(91, 94, 220, .2), 0 15px 32px rgba(72, 79, 184, .2);
}
html[data-theme="dark"] body:not(.admin-body) .featured-product-card:hover {
  box-shadow: 0 0 0 1px rgba(125, 119, 255, .3), 0 15px 34px rgba(83, 65, 199, .28);
}
@media (max-width: 760px) {
  body:not(.admin-body) .product-card-color-selected-name { margin-top: 2px; font-size: 9px; }
  body:not(.admin-body) .featured-product-card .featured-badge { padding: 5px 7px; font-size: 9px; }
}


/* Nombre permanente bajo cada círculo de color en las tarjetas públicas. */
body:not(.admin-body) .product-card-color-list {
  align-items: flex-start;
  gap: 7px 9px;
}
body:not(.admin-body) .product-card-color-option {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 30px;
  max-width: 64px;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
body:not(.admin-body) .product-card-color-name {
  max-width: 64px;
  color: var(--catalog-color-label, #647391);
  font-size: 9px;
  font-weight: 650;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
body:not(.admin-body) .product-card-color-swatch {
  flex: 0 0 17px;
}
body:not(.admin-body) .dialog-financing-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 4px 0 12px;
  padding: 11px 15px;
  border: 1px solid var(--dialog-financing-border, #c5d3f5);
  border-radius: 12px;
  color: var(--dialog-financing-text, #294ab5);
  background: var(--dialog-financing-bg, #edf2ff);
  box-shadow: 0 3px 0 var(--dialog-financing-shadow, #d5def5);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
body:not(.admin-body) .dialog-financing-button:hover {
  transform: translateY(-1px);
  border-color: var(--dialog-financing-hover-border, #849bea);
  box-shadow: 0 5px 0 var(--dialog-financing-shadow, #d5def5), 0 8px 18px rgba(40, 69, 147, .12);
}
body:not(.admin-body) .dialog-financing-button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--dialog-financing-shadow, #d5def5);
}
body:not(.admin-body) .dialog-financing-button:focus-visible {
  outline: 3px solid rgba(109, 139, 255, .8);
  outline-offset: 3px;
}
html[data-theme="light"] body:not(.admin-body) {
  --dialog-financing-border: #c5d3f5;
  --dialog-financing-text: #294ab5;
  --dialog-financing-bg: #edf2ff;
  --dialog-financing-shadow: #d5def5;
  --dialog-financing-hover-border: #849bea;
}
html[data-theme="dark"] body:not(.admin-body) {
  --dialog-financing-border: #3a5080;
  --dialog-financing-text: #d4deff;
  --dialog-financing-bg: #1c2b4a;
  --dialog-financing-shadow: #101a30;
  --dialog-financing-hover-border: #7186e7;
}
@media (max-width: 760px) {
  body:not(.admin-body) .product-card-color-list {
    gap: 7px 6px;
  }
  body:not(.admin-body) .product-card-color-option {
    min-width: 28px;
    max-width: 52px;
    gap: 3px;
  }
  body:not(.admin-body) .product-card-color-name {
    max-width: 52px;
    font-size: 8px;
  }
  body:not(.admin-body) .dialog-financing-button {
    width: 100%;
    margin-top: 2px;
    padding: 12px;
    text-align: center;
  }
}


/* Nombres de colores permanentes bajo sus muestras, también en dispositivos táctiles. */
body:not(.admin-body) .product-card-color-list {
  align-items: flex-start;
  gap: 7px 9px;
}
body:not(.admin-body) .product-card-color-option {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 30px;
  max-width: 64px;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
body:not(.admin-body) .product-card-color-swatch {
  cursor: default;
  transition: none;
}
body:not(.admin-body) .product-card-color-name {
  max-width: 64px;
  color: var(--catalog-color-label, #647391);
  font-size: 9px;
  font-weight: 650;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: center;
}
@media (max-width: 760px) {
  body:not(.admin-body) .product-card-color-list { gap: 7px 6px; }
  body:not(.admin-body) .product-card-color-option { min-width: 28px; max-width: 52px; gap: 3px; }
  body:not(.admin-body) .product-card-color-name { max-width: 52px; font-size: 8px; }
}


/* La ficha debe distinguir claramente colores agotados de los disponibles. */
body:not(.admin-body) .color-availability.unavailable {
  color: #a12735;
  background: #ffe7e9;
}
html[data-theme="dark"] body:not(.admin-body) .color-availability.unavailable {
  color: #ffc0c6;
  background: #4a222b;
}


/* =========================================================
   CAT-LOGO ADMIN — contraste claro/oscuro y acciones de variantes
   Corrección de etiquetas pálidas en tema claro y jerarquía de botones.
   ========================================================= */

/* Separación y estructura entre la acción y las configuraciones nuevas. */
body.admin-body .variants-editor-actions {
  gap: 12px !important;
  margin: 5px 0 14px !important;
}
body.admin-body .variants-editor-actions .button {
  min-height: 44px !important;
  padding: 11px 16px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
body.admin-body .product-variants-list {
  gap: 18px !important;
  padding-top: 3px !important;
}
body.admin-body .variant-config-group:not(.variant-base-group) {
  border-radius: 16px !important;
  padding: 14px !important;
}
body.admin-body .variant-config-group:not(.variant-base-group) .variant-config-fields {
  gap: 12px !important;
  margin: 14px 0 18px !important;
}

/* El botón de nueva capacidad es la acción principal. */
body.admin-body #add-variant-button {
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
}
body.admin-body #add-base-color-button,
body.admin-body .variant-config-group:not(.variant-base-group) .variant-add-color {
  border-radius: 11px !important;
  font-weight: 800 !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
body.admin-body #add-base-color-button {
  min-height: 42px !important;
  padding: 9px 14px !important;
}
body.admin-body .variant-config-group:not(.variant-base-group) .variant-add-color {
  min-height: 40px !important;
  margin-top: 12px !important;
  padding: 8px 13px !important;
  font-size: 13px !important;
}
body.admin-body #add-variant-button:hover,
body.admin-body #add-base-color-button:hover,
body.admin-body .variant-config-group:not(.variant-base-group) .variant-add-color:hover {
  transform: translateY(-2px);
  filter: brightness(1.035);
}
body.admin-body #add-variant-button:active,
body.admin-body #add-base-color-button:active,
body.admin-body .variant-config-group:not(.variant-base-group) .variant-add-color:active {
  transform: translateY(1px);
}
body.admin-body #add-variant-button:focus-visible,
body.admin-body #add-base-color-button:focus-visible,
body.admin-body .variant-config-group:not(.variant-base-group) .variant-add-color:focus-visible {
  outline: 3px solid #8da4ff !important;
  outline-offset: 3px !important;
}

/* TEMA CLARO: texto oscuro sobre tarjetas y controles claros. */
html[data-theme="light"] body.admin-body .variant-config-group-heading strong {
  color: #1f3156 !important;
}
html[data-theme="light"] body.admin-body .variant-config-group-heading small {
  color: #52627e !important;
}
html[data-theme="light"] body.admin-body .variant-config-fields > label {
  color: #293956 !important;
}
html[data-theme="light"] body.admin-body .variant-color-section-title {
  color: #314574 !important;
}
html[data-theme="light"] body.admin-body .inline-color-details > summary {
  color: #304b8c !important;
}
html[data-theme="light"] body.admin-body .inline-color-name-field,
html[data-theme="light"] body.admin-body .inline-color-tone-field,
html[data-theme="light"] body.admin-body .inline-color-details .variant-color-fields > label {
  color: #43536f !important;
}
html[data-theme="light"] body.admin-body .variants-editor-heading p {
  color: #53627d !important;
}
html[data-theme="light"] body.admin-body .variant-storage-unit {
  border-color: #b7c6f2 !important;
  color: #263e91 !important;
  background: #e9efff !important;
}
html[data-theme="light"] body.admin-body .variant-config-fields input:not([type="color"]):not([type="file"]),
html[data-theme="light"] body.admin-body .variant-config-fields select,
html[data-theme="light"] body.admin-body .inline-color-name-field input,
html[data-theme="light"] body.admin-body .inline-color-details .variant-color-fields select,
html[data-theme="light"] body.admin-body .inline-color-details [data-variant-hex-text] {
  border-color: #c8d4ed !important;
  color: #172744 !important;
  background-color: #ffffff !important;
}
html[data-theme="light"] body.admin-body .variant-config-fields .admin-input-unit {
  border-color: #c8d4ed !important;
  background: #ffffff !important;
}
html[data-theme="light"] body.admin-body .variant-config-fields .admin-input-unit > span {
  color: #415474 !important;
}
html[data-theme="light"] body.admin-body .variant-config-fields .admin-input-unit input {
  color: #172744 !important;
}
html[data-theme="light"] body.admin-body .inline-color-card {
  border-color: #cbd7f1 !important;
  background: linear-gradient(145deg, #ffffff, #f1f5ff) !important;
  box-shadow: 0 3px 0 #e0e7f7, 0 7px 16px rgba(41, 67, 125, .07) !important;
}
html[data-theme="light"] body.admin-body .variant-color-list > .variants-empty-hint {
  border-color: #cbd7ed !important;
  color: #566782 !important;
  background: #ffffff !important;
}
html[data-theme="light"] body.admin-body #add-variant-button {
  border-color: #3c4bd2 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #315fe0, #5b42cf) !important;
  box-shadow: 0 4px 0 #293ca0, 0 8px 17px rgba(59, 72, 190, .20) !important;
}
html[data-theme="light"] body.admin-body #add-variant-button:hover {
  box-shadow: 0 5px 0 #293ca0, 0 12px 22px rgba(59, 72, 190, .25) !important;
}
html[data-theme="light"] body.admin-body #add-base-color-button {
  border: 1px solid #9caef0 !important;
  color: #2d469f !important;
  background: linear-gradient(135deg, #f4f6ff, #e7f8f5) !important;
  box-shadow: 0 3px 0 #d3dcf8, 0 6px 13px rgba(56, 78, 153, .10) !important;
}
html[data-theme="light"] body.admin-body .variant-config-group:not(.variant-base-group) .variant-add-color {
  border: 1px solid #9bd9cf !important;
  color: #12685f !important;
  background: linear-gradient(135deg, #edfffb, #e5f4ff) !important;
  box-shadow: 0 3px 0 #c5e7e3, 0 5px 12px rgba(27, 114, 119, .09) !important;
}

/* TEMA OSCURO: conservar el contraste y la jerarquía con superficies profundas. */
html[data-theme="dark"] body.admin-body .variant-config-group-heading strong {
  color: #edf3ff !important;
}
html[data-theme="dark"] body.admin-body .variant-config-group-heading small {
  color: #b2c4e5 !important;
}
html[data-theme="dark"] body.admin-body .variant-config-fields > label {
  color: #d9e5ff !important;
}
html[data-theme="dark"] body.admin-body .variant-color-section-title {
  color: #bacbf0 !important;
}
html[data-theme="dark"] body.admin-body .inline-color-details > summary {
  color: #a9c9ff !important;
}
html[data-theme="dark"] body.admin-body .inline-color-name-field,
html[data-theme="dark"] body.admin-body .inline-color-tone-field,
html[data-theme="dark"] body.admin-body .inline-color-details .variant-color-fields > label {
  color: #c4d3f0 !important;
}
html[data-theme="dark"] body.admin-body .variants-editor-heading p {
  color: #bac8e4 !important;
}
html[data-theme="dark"] body.admin-body .variant-storage-unit {
  border-color: #526ba8 !important;
  color: #e1eaff !important;
  background: #20345c !important;
}
html[data-theme="dark"] body.admin-body .inline-color-card {
  border-color: #415780 !important;
  background: linear-gradient(145deg, #172543, #101a30) !important;
}
html[data-theme="dark"] body.admin-body .variant-color-list > .variants-empty-hint {
  border-color: #435376 !important;
  color: #aab9d7 !important;
  background: #111c33 !important;
}
html[data-theme="dark"] body.admin-body #add-variant-button {
  border-color: #5975ec !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #2259c9, #5840bb) !important;
  box-shadow: 0 4px 0 #172e73, 0 8px 18px rgba(0, 0, 0, .24) !important;
}
html[data-theme="dark"] body.admin-body #add-base-color-button {
  border: 1px solid #6179c1 !important;
  color: #e5edff !important;
  background: linear-gradient(135deg, #1d2e52, #253b5d) !important;
  box-shadow: 0 3px 0 #111d36, 0 6px 13px rgba(0, 0, 0, .2) !important;
}
html[data-theme="dark"] body.admin-body .variant-config-group:not(.variant-base-group) .variant-add-color {
  border: 1px solid #347e80 !important;
  color: #c7fff1 !important;
  background: linear-gradient(135deg, #143b42, #173052) !important;
  box-shadow: 0 3px 0 #0c222c, 0 5px 12px rgba(0, 0, 0, .2) !important;
}
@media (prefers-reduced-motion: reduce) {
  body.admin-body #add-variant-button,
  body.admin-body #add-base-color-button,
  body.admin-body .variant-config-group:not(.variant-base-group) .variant-add-color {
    transition: none !important;
  }
}


/* Integración de contraste de variantes desde rama de desarrollo */
/* =========================================================
   CAT-LOGO ADMIN — color cards, both themes
   Explicit colors avoid dark-only cards in light mode.
   ========================================================= */
html[data-theme="light"] body.admin-body .variant-config-group:not(.variant-base-group) {
  border-color: #dbe3f0 !important;
  background: linear-gradient(145deg, #ffffff 0%, #f7f9ff 100%) !important;
}
html[data-theme="light"] body.admin-body .variant-config-group-heading {
  border-bottom-color: #dbe3f0 !important;
}
html[data-theme="light"] body.admin-body .variant-config-group-heading strong,
html[data-theme="light"] body.admin-body .variant-color-section-title {
  color: #273853 !important;
}
html[data-theme="light"] body.admin-body .variant-config-group-heading small,
html[data-theme="light"] body.admin-body .variants-empty-hint {
  color: #596980 !important;
}
html[data-theme="light"] body.admin-body .variants-empty-hint {
  border-color: #ccd6e6 !important;
  background: #f8faff !important;
}
html[data-theme="light"] body.admin-body .inline-color-card {
  color: #1f2937 !important;
  border-color: #d5deed !important;
  background: linear-gradient(145deg, #ffffff 0%, #f6f8fd 100%) !important;
  box-shadow: 0 2px 6px rgba(35, 55, 90, .07), inset 0 1px 0 #fff !important;
}
html[data-theme="light"] body.admin-body .inline-color-name-field,
html[data-theme="light"] body.admin-body .inline-color-tone-field,
html[data-theme="light"] body.admin-body .inline-color-details .variant-color-fields > label {
  color: #35435a !important;
}
html[data-theme="light"] body.admin-body .inline-color-details {
  border-top-color: #dfe5ef !important;
}
html[data-theme="light"] body.admin-body .inline-color-details > summary {
  color: #334fba !important;
}
html[data-theme="light"] body.admin-body .inline-color-details .variant-color-fields input:not([type="file"]):not([type="color"]),
html[data-theme="light"] body.admin-body .inline-color-details .variant-color-fields select,
html[data-theme="light"] body.admin-body .quick-color-search-label input {
  border-color: #c7d2e2 !important;
  color: #1f2937 !important;
  background: #ffffff !important;
}
html[data-theme="light"] body.admin-body .inline-color-tone-field input[type="color"] {
  border-color: #b8c4d8 !important;
  background: #ffffff !important;
}
html[data-theme="light"] body.admin-body .inline-color-dot,
html[data-theme="light"] body.admin-body .admin-add-color-slot .quick-color-dot {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 1px #aab6ca, 0 2px 4px rgba(20, 35, 60, .15) !important;
}
html[data-theme="light"] body.admin-body .inline-color-details .color-row-status,
html[data-theme="light"] body.admin-body .quick-color-no-results {
  color: #53637a !important;
}
html[data-theme="light"] body.admin-body .admin-add-color-slot .quick-color-palette {
  border-color: #d3dce9 !important;
  background: linear-gradient(145deg, #ffffff 0%, #f7f9ff 100%) !important;
  box-shadow: 0 3px 8px rgba(35, 55, 90, .08) !important;
}
html[data-theme="light"] body.admin-body .admin-add-color-slot .quick-color-swatch {
  color: #26364e !important;
}
html[data-theme="light"] body.admin-body .admin-add-color-slot .quick-color-name {
  color: #4c5d77 !important;
}
html[data-theme="light"] body.admin-body .quick-color-code {
  color: #596980 !important;
}
html[data-theme="light"] body.admin-body .admin-add-color-slot .quick-color-swatch:hover,
html[data-theme="light"] body.admin-body .admin-add-color-slot .quick-color-swatch:focus-visible,
html[data-theme="light"] body.admin-body .admin-add-color-slot .quick-color-swatch.is-selected {
  border-color: #687be2 !important;
  background: rgba(87, 105, 220, .09) !important;
}
html[data-theme="light"] body.admin-body .variant-storage-unit {
  border-color: #c9d5f0 !important;
  color: #354d9d !important;
  background: #eef2ff !important;
}

html[data-theme="dark"] body.admin-body .variant-config-group:not(.variant-base-group) {
  border-color: #344666 !important;
  background: linear-gradient(145deg, #15223a 0%, #101a2d 100%) !important;
}
html[data-theme="dark"] body.admin-body .inline-color-card {
  color: #e9efff !important;
  border-color: #3a4c70 !important;
  background: linear-gradient(145deg, #17233a 0%, #121d31 100%) !important;
  box-shadow: 0 3px 0 rgba(2, 7, 17, .25), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}
html[data-theme="dark"] body.admin-body .inline-color-name-field,
html[data-theme="dark"] body.admin-body .inline-color-tone-field,
html[data-theme="dark"] body.admin-body .inline-color-details .variant-color-fields > label {
  color: #d5e1fa !important;
}
html[data-theme="dark"] body.admin-body .inline-color-details {
  border-top-color: #344566 !important;
}
html[data-theme="dark"] body.admin-body .inline-color-details > summary {
  color: #a9c9ff !important;
}
html[data-theme="dark"] body.admin-body .inline-color-details .variant-color-fields input:not([type="file"]):not([type="color"]),
html[data-theme="dark"] body.admin-body .inline-color-details .variant-color-fields select,
html[data-theme="dark"] body.admin-body .quick-color-search-label input {
  border-color: #3b4d70 !important;
  color: #edf2ff !important;
  background: #0d162a !important;
}
html[data-theme="dark"] body.admin-body .inline-color-tone-field input[type="color"] {
  border-color: #465a81 !important;
  background: #111b30 !important;
}
html[data-theme="dark"] body.admin-body .inline-color-details .color-row-status,
html[data-theme="dark"] body.admin-body .quick-color-no-results {
  color: #aab9d5 !important;
}
html[data-theme="dark"] body.admin-body .admin-add-color-slot .quick-color-palette {
  border-color: #3c4f75 !important;
  background: linear-gradient(145deg, #17233b 0%, #121d32 56%, #101a2d 100%) !important;
}
html[data-theme="dark"] body.admin-body .admin-add-color-slot .quick-color-swatch {
  color: #e8eefc !important;
}
html[data-theme="dark"] body.admin-body .admin-add-color-slot .quick-color-name {
  color: #aab9d5 !important;
}

/* Improve light-mode readability for all configuration fields around color variants. */
html[data-theme="light"] body.admin-body .variant-config-fields > label {
  color: #35435a !important;
}
html[data-theme="light"] body.admin-body .variant-config-fields input:not([type="checkbox"]):not([type="file"]):not([type="color"]),
html[data-theme="light"] body.admin-body .variant-config-fields select {
  border-color: #c7d2e2 !important;
  color: #1f2937 !important;
  background: #ffffff !important;
}
html[data-theme="light"] body.admin-body .variant-color-section-title {
  color: #273853 !important;
}
html[data-theme="light"] body.admin-body .inline-color-details .variant-image-preview {
  border-color: #d5deed !important;
  background: #f8faff !important;
}
html[data-theme="light"] body.admin-body .inline-color-details .variant-image-placeholder {
  color: #596980 !important;
}
html[data-theme="light"] body.admin-body .inline-color-details .admin-file-picker {
  border-color: #c5d2e6 !important;
  color: #30456b !important;
  background: #eef3ff !important;
}
html[data-theme="light"] body.admin-body .variant-swatch-palette {
  border-color: #d8e1ee !important;
  background: #f8faff !important;
}
html[data-theme="light"] body.admin-body .variant-storage-unit {
  border-color: #c9d5f0 !important;
  color: #354d9d !important;
  background: #eef2ff !important;
}
html[data-theme="light"] body.admin-body .color-row-status[data-state="error"] {
  color: #b42332 !important;
}
html[data-theme="light"] body.admin-body .color-row-status[data-state="success"] {
  color: #067647 !important;
}
html[data-theme="dark"] body.admin-body .inline-color-details .variant-image-preview {
  border-color: #3b4d70 !important;
  background: #0d162a !important;
}
html[data-theme="dark"] body.admin-body .inline-color-details .variant-image-placeholder {
  color: #aab9d5 !important;
}
html[data-theme="dark"] body.admin-body .inline-color-details .admin-file-picker {
  border-color: #415780 !important;
  color: #dbe6ff !important;
  background: #1b2948 !important;
}
html[data-theme="dark"] body.admin-body .variant-swatch-palette {
  border-color: #344666 !important;
  background: #101a2d !important;
}
html[data-theme="dark"] body.admin-body .color-row-status[data-state="error"] {
  color: #ff9caa !important;
}
html[data-theme="dark"] body.admin-body .color-row-status[data-state="success"] {
  color: #82e3ba !important;
}

/* Visible selection rings for the color palette in either theme. */
html[data-theme="light"] body.admin-body .variant-swatch:hover,
html[data-theme="light"] body.admin-body .variant-swatch:focus-visible {
  outline-color: #4157b7 !important;
  outline-width: 2px !important;
}
html[data-theme="light"] body.admin-body .variant-swatch.is-selected {
  outline: 2px solid #354ba8 !important;
  outline-offset: 1px !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .82) !important;
}
html[data-theme="dark"] body.admin-body .variant-swatch:hover,
html[data-theme="dark"] body.admin-body .variant-swatch:focus-visible {
  outline-color: #a9c9ff !important;
  outline-width: 2px !important;
}
html[data-theme="dark"] body.admin-body .variant-swatch.is-selected {
  outline: 2px solid #b8ccff !important;
  outline-offset: 1px !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35) !important;
}


/* AJUSTES DE DISTRIBUCIÓN Y LEGIBILIDAD DEL ADMIN */
.admin-nav-panel:not(.hidden) {
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
  gap:20px !important; min-width:0 !important;
}
.admin-nav-panel:not(.hidden) > .admin-card + .admin-card,
#admin-section-drafts .admin-card + .admin-card { margin-top:0 !important; }
#admin-section-drafts { gap:20px !important; }
#admin-section-drafts > .admin-card { width:100% !important; }

.base-color-manager .variant-base-group .variant-color-list,
.variant-config-group:not(.variant-base-group) .variant-color-list {
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr)) !important;
  grid-auto-rows:4px !important;
  grid-auto-flow:row dense !important;
  align-items:start !important; gap:12px !important; width:100% !important;
}
/* Open cards keep their own column; dense placement fills empty neighboring grid cells. */
.base-color-manager .variant-base-group .variant-color-list > .inline-color-card:has(.inline-color-details[open]),
.variant-config-group:not(.variant-base-group) .variant-color-list > .inline-color-card:has(.inline-color-details[open]) {
  grid-column:auto !important; width:100% !important; max-width:none !important;
}
/* Each color card has room for readable controls; outer columns provide the masonry. */
.inline-color-details .variant-color-fields { grid-template-columns:minmax(0,1fr) !important; }
.inline-color-details .variant-color-library-tools { grid-template-columns:minmax(0,1fr) !important; }
.inline-color-library-actions, .variant-color-library-actions { justify-content:flex-start !important; }
.base-color-manager .variant-base-group .variant-color-list > .variants-empty-hint,
.variant-config-group:not(.variant-base-group) .variant-color-list > .variants-empty-hint {
  grid-column:1 / -1 !important; grid-row:auto / span 8 !important;
}
.inline-color-card { min-width:0 !important; padding:10px !important; border-radius:12px !important; }
.inline-color-main {
  display:grid !important; grid-template-columns:22px minmax(0,1fr) 38px 30px !important;
  align-items:end !important; gap:8px !important; min-width:0 !important;
}
.inline-color-dot { width:18px !important; height:18px !important; align-self:center !important; }
.inline-color-name-field,.inline-color-tone-field {
  min-width:0 !important; gap:5px !important; font-size:12px !important; line-height:1.35 !important;
}
.inline-color-name-field input {
  min-width:0 !important; min-height:36px !important; padding:7px 9px !important;
  font-size:13px !important; line-height:1.3 !important;
}
.inline-color-tone-field input[type="color"] { width:38px !important; height:36px !important; padding:3px !important; }
.inline-color-remove { min-width:30px !important; min-height:34px !important; padding:2px !important; font-size:14px !important; }
.inline-color-details { margin-top:8px !important; padding-top:6px !important; }
.inline-color-details > summary { padding:4px 0 !important; font-size:12px !important; line-height:1.4 !important; cursor:pointer !important; }
.inline-color-details[open] > summary { margin-bottom:10px !important; }
.inline-color-details .variant-color-fields {
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important; align-items:start !important; min-width:0 !important;
}
.inline-color-details .variant-color-fields > label {
  min-width:0 !important; gap:6px !important; font-size:12.5px !important; line-height:1.4 !important;
}
.inline-color-details .variant-color-fields input:not([type="file"]),
.inline-color-details .variant-color-fields select {
  min-width:0 !important; min-height:39px !important; padding:8px 10px !important; font-size:13px !important;
}
.inline-color-details .variant-color-fields .variant-swatch-palette,
.inline-color-details .variant-color-fields .variant-image-label,
.inline-color-details .variant-color-library-tools { grid-column:1 / -1 !important; }
.inline-color-details .variant-color-fields > label.variant-image-label { display:flex !important; }
.inline-color-details .variant-swatch-palette { grid-template-columns:repeat(8,minmax(0,1fr)) !important; gap:6px !important; padding:8px !important; }
.inline-color-details .variant-swatch { min-height:25px !important; border-radius:6px !important; }
.inline-color-details .admin-file-picker { align-self:flex-start !important; min-height:38px !important; padding:8px 12px !important; font-size:12px !important; }

.variant-color-library-tools {
  display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:end !important;
  gap:10px !important; min-width:0 !important; padding:10px !important;
  border:1px solid rgba(116,145,205,.35) !important; border-radius:11px !important; background:rgba(110,135,185,.07) !important;
}
.variant-color-library-tools > label {
  display:flex !important; flex-direction:column !important; gap:6px !important;
  min-width:0 !important; font-size:12.5px !important; line-height:1.35 !important;
}
.variant-color-library-tools input { width:100% !important; min-width:0 !important; min-height:39px !important; font-size:13px !important; }
.variant-color-library-actions { display:flex !important; flex-wrap:wrap !important; justify-content:flex-end !important; gap:7px !important; }
.variant-color-library-actions .admin-mini-button { min-height:36px !important; padding:7px 10px !important; font-size:12px !important; white-space:nowrap !important; }
.variant-color-library-actions [data-toggle-color-favorite].is-favorite { border-color:rgba(245,194,77,.7) !important; color:#ffd878 !important; }
.color-library-toolbar { display:flex !important; align-items:center !important; flex-wrap:wrap !important; gap:8px !important; margin:10px 0 !important; }
.color-library-toolbar button {
  min-height:33px !important; padding:6px 11px !important; border:1px solid var(--line,#344866) !important;
  border-radius:9px !important; background:transparent !important; color:var(--text,#eaf0fc) !important;
  font:inherit !important; font-size:12px !important; font-weight:750 !important; cursor:pointer !important;
}
.color-library-toolbar button.is-active { border-color:#6781f6 !important; background:rgba(83,105,220,.23) !important; }
.color-library-storage-note { color:var(--muted,#91a2c0) !important; font-size:11px !important; }
.quick-color-favorite-mark { color:#ffd878; font-size:12px; margin-left:3px; }

.inline-color-details .variant-image-preview {
  display:grid !important; grid-template-columns:repeat(auto-fill,minmax(105px,1fr)) !important;
  align-items:stretch !important; gap:9px !important; min-height:66px !important; padding:9px !important;
}
.inline-color-details .variant-image-preview .variant-gallery-item {
  width:100% !important; min-width:0 !important; margin:0 !important; padding:6px !important; border-radius:10px !important;
}
.inline-color-details .variant-image-preview .variant-gallery-item img {
  display:block !important; width:100% !important; height:92px !important; flex:initial !important;
  object-fit:contain !important; border-radius:7px !important;
}
.admin-image-order-badge {
  top:8px !important; left:8px !important; display:grid !important; place-items:center !important;
  min-width:27px !important; min-height:27px !important; padding:0 !important;
  border:1px solid rgba(255,255,255,.43) !important; border-radius:9px !important; color:#fff !important;
  background:rgba(52,80,175,.58) !important; backdrop-filter:blur(7px) saturate(1.2) !important;
  -webkit-backdrop-filter:blur(7px) saturate(1.2) !important; box-shadow:0 2px 7px rgba(0,0,0,.18) !important; font-size:12px !important;
}
.admin-image-order-badge.is-cover { width:32px !important; height:32px !important; border-radius:50% !important; background:rgba(87,73,215,.47) !important; }
.admin-image-order-badge svg { display:block; width:18px; height:18px; fill:currentColor; stroke:currentColor; stroke-width:.5; }
.admin-image-order-badge span { color:#fff !important; font-size:12px !important; font-weight:800 !important; }

html[data-theme="dark"] body.admin-body .inline-color-card { border-color:rgba(112,139,190,.38) !important; background:linear-gradient(145deg,#17233a 0%,#121d31 100%) !important; }
html[data-theme="light"] body.admin-body .inline-color-card { border-color:#d0d9ed !important; background:linear-gradient(145deg,#fff 0%,#f4f7fd 100%) !important; box-shadow:0 2px 8px rgba(33,55,100,.08) !important; }
html[data-theme="light"] body.admin-body .inline-color-name-field,
html[data-theme="light"] body.admin-body .inline-color-tone-field,
html[data-theme="light"] body.admin-body .inline-color-details .variant-color-fields > label,
html[data-theme="light"] body.admin-body .variant-color-library-tools > label { color:#344666 !important; }
html[data-theme="dark"] body.admin-body .inline-color-name-field,
html[data-theme="dark"] body.admin-body .inline-color-tone-field,
html[data-theme="dark"] body.admin-body .inline-color-details .variant-color-fields > label,
html[data-theme="dark"] body.admin-body .variant-color-library-tools > label { color:#d8e4ff !important; }
html[data-theme="light"] body.admin-body .inline-color-name-field input,
html[data-theme="light"] body.admin-body .inline-color-library-tools input { border-color:#cad5e8 !important; background:#fff !important; color:#17233a !important; }
html[data-theme="dark"] body.admin-body .inline-color-name-field input,
html[data-theme="dark"] body.admin-body .inline-color-library-tools input { border-color:#3b5075 !important; background:#0d172a !important; color:#f5f8ff !important; }
html[data-theme="light"] body.admin-body .inline-color-details > summary { color:#3559a7 !important; }
html[data-theme="dark"] body.admin-body .inline-color-details > summary { color:#a9caff !important; }

@media (max-width:900px) {
  .base-color-manager .variant-base-group .variant-color-list,
  .variant-config-group:not(.variant-base-group) .variant-color-list { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:620px) {
  .variant-color-library-tools { grid-template-columns:minmax(0,1fr) !important; }
  .variant-color-library-actions { justify-content:flex-start !important; }
  .base-color-manager .variant-base-group .variant-color-list,
  .variant-config-group:not(.variant-base-group) .variant-color-list { grid-template-columns:minmax(0,1fr) !important; }
  .inline-color-details .variant-color-fields { grid-template-columns:minmax(0,1fr) !important; }
  .inline-color-details .variant-color-fields > label,
  .inline-color-details .variant-color-library-tools { grid-column:1 / -1 !important; }
  .inline-color-details .variant-image-preview { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .inline-color-main { grid-template-columns:22px minmax(0,1fr) 36px 30px !important; }
}


/* AJUSTE FINO SOLICITADO · SOLO PANEL ADMIN */
body.admin-body .admin-product-gallery {
  grid-column: auto !important;
  align-self: start !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
body.admin-body .admin-add-color-slot {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
}
body.admin-body .admin-product-gallery-heading { gap: 12px 16px !important; }
body.admin-body .admin-product-gallery-heading h3 {
  font-size: 17px !important; line-height: 1.4 !important; font-weight: 800 !important;
}
body.admin-body .admin-product-gallery-heading p { font-size: 13.5px !important; line-height: 1.55 !important; }
body.admin-body .admin-product-gallery .file-button { font-size: 13.5px !important; min-height: 42px !important; }
body.admin-body .admin-product-gallery-summary { font-size: 13px !important; }

/* Tipografía más legible; no escala los mosaicos de color. */
body.admin-body .inline-color-name-field,
body.admin-body .inline-color-tone-field { font-size: 13.5px !important; line-height: 1.35 !important; }
body.admin-body .inline-color-name-field input {
  font-size: 16px !important; min-height: 38px !important; padding: 7px 9px !important;
}
body.admin-body .inline-color-tone-field input[type="color"] { width: 40px !important; height: 38px !important; }
body.admin-body .inline-color-details > summary { font-size: 15px !important; line-height: 1.45 !important; padding: 5px 0 !important; }
body.admin-body .inline-color-details .variant-color-fields > label,
body.admin-body .variant-color-library-tools > label { font-size: 14.5px !important; line-height: 1.4 !important; }
body.admin-body .inline-color-details .variant-color-fields input:not([type="file"]),
body.admin-body .inline-color-details .variant-color-fields select,
body.admin-body .variant-color-library-tools input { font-size: 15.5px !important; min-height: 41px !important; }
body.admin-body .variant-color-section-title { font-size: 18px !important; line-height: 1.4 !important; }
body.admin-body .variant-config-group-heading strong { font-size: 19px !important; }
body.admin-body .variant-config-group-heading small { font-size: 15px !important; }

/* Paleta compacta: muestras de unos 30–34 px en escritorio. */
body.admin-body .inline-color-details .variant-swatch-palette,
body.admin-body .variant-swatch-palette {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  width: min(100%, 322px) !important;
  max-width: 100% !important;
  justify-self: start !important;
  align-self: start !important;
  gap: 5px !important;
  padding: 7px !important;
  box-sizing: border-box !important;
}
body.admin-body .variant-swatch {
  width: 100% !important; min-width: 0 !important; min-height: 0 !important;
  aspect-ratio: 1 / 1 !important; height: auto !important; border-radius: 5px !important;
}
body.admin-body .variant-color-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)) !important;
  align-items: start !important;
  column-gap: 12px !important;
}
body.admin-body .inline-color-card { box-sizing: border-box !important; min-width: 0 !important; }
body.admin-body .inline-color-details .variant-image-preview {
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)) !important;
}

/* En móvil: muestras más pequeñas, pero claramente distinguibles. */
@media (max-width: 760px) {
  body.admin-body .admin-product-gallery {
    grid-column: 1 / -1 !important;
    align-self: stretch !important;
    padding: 13px !important;
  }
  body.admin-body .admin-product-gallery-heading { flex-direction: column !important; align-items: stretch !important; }
  body.admin-body .admin-product-gallery-heading > div { flex-basis: auto !important; width: 100% !important; }
  body.admin-body .admin-product-gallery .file-button { width: 100% !important; }
  body.admin-body .inline-color-details .variant-swatch-palette,
  body.admin-body .variant-swatch-palette { width: min(100%, 286px) !important; gap: 4px !important; padding: 6px !important; }
  body.admin-body .inline-color-name-field,
  body.admin-body .inline-color-tone-field { font-size: 13px !important; }
  body.admin-body .inline-color-name-field input { font-size: 15px !important; min-height: 38px !important; }
  body.admin-body .inline-color-details > summary { font-size: 14.5px !important; }
  body.admin-body .inline-color-details .variant-color-fields > label,
  body.admin-body .variant-color-library-tools > label { font-size: 14px !important; }
  body.admin-body .inline-color-details .variant-color-fields input:not([type="file"]),
  body.admin-body .inline-color-details .variant-color-fields select,
  body.admin-body .variant-color-library-tools input { font-size: 15px !important; }
  body.admin-body .variant-color-section-title { font-size: 17px !important; }
  body.admin-body .variant-config-group-heading strong { font-size: 18px !important; }
}
@media (max-width: 380px) {
  body.admin-body .inline-color-details .variant-swatch-palette,
  body.admin-body .variant-swatch-palette { width: min(100%, 258px) !important; }
  body.admin-body .inline-color-main { grid-template-columns: 20px minmax(0, 1fr) 36px 29px !important; gap: 5px !important; }
}


/* Corrección estructural: auto-fill evita que una sola tarjeta se estire a todo el panel. */
body.admin-body .base-color-manager .variant-base-group .variant-color-section .variant-color-list,
body.admin-body .variant-config-group:not(.variant-base-group) .variant-color-section .variant-color-list {
  grid-template-columns:repeat(auto-fill,minmax(min(100%,245px),1fr)) !important;
  grid-auto-rows:4px !important;
  grid-auto-flow:row dense !important;
  align-items:start !important;
  gap:12px !important;
}
body.admin-body .base-color-manager .variant-base-group .variant-color-section > .variant-add-color { display:none !important; }
body.admin-body .base-color-manager .variant-base-group .variant-color-section .variant-color-list > .variants-empty-hint,
body.admin-body .variant-config-group:not(.variant-base-group) .variant-color-section .variant-color-list > .variants-empty-hint {
  grid-column:1/-1 !important;
  grid-row:auto / span 8 !important;
}
@media (max-width:760px) {
  body.admin-body .base-color-manager .variant-base-group .variant-color-section .variant-color-list,
  body.admin-body .variant-config-group:not(.variant-base-group) .variant-color-section .variant-color-list {
    grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)) !important;
    gap:10px !important;
  }
}


/* VISTA DE CONSULTA DE PRODUCTO · ADMINISTRACIÓN */
body.admin-body .admin-product-preview-dialog {
  width: min(1120px, calc(100vw - 28px));
  max-width: none;
  max-height: min(92vh, 960px);
  max-height: min(92dvh, 960px);
  padding: 0;
  overflow: auto;
  color: var(--text, #eef3ff);
  background: #101b31;
  border: 1px solid rgba(105, 132, 198, .6);
  border-radius: 18px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .52);
}
body.admin-body .admin-product-preview-dialog::backdrop {
  background: rgba(4, 8, 19, .78);
  backdrop-filter: blur(5px);
}
.admin-product-preview-shell { min-width: 0; }
.admin-product-preview-header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(117, 145, 207, .24);
  background: rgba(16, 27, 49, .96);
  backdrop-filter: blur(12px);
}
.admin-product-preview-header h2 { margin: 3px 0 0; font-size: clamp(19px, 2vw, 25px); line-height: 1.25; }
.admin-preview-eyebrow { margin: 0; color: #95afff; font-size: 10px; letter-spacing: .12em; font-weight: 850; }
.admin-product-preview-close {
  flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid #41557d; border-radius: 11px; color: #e7eeff; background: #1b2947;
  font-size: 25px; line-height: 1; cursor: pointer;
}
.admin-product-preview-content { display: grid; gap: 18px; padding: 20px; min-width: 0; }
.admin-preview-layout { display: grid; grid-template-columns: minmax(260px, .92fr) minmax(0, 1.08fr); align-items: start; gap: 20px; }
.admin-preview-media, .admin-preview-overview,
.admin-preview-section, .admin-preview-notes {
  min-width: 0; border: 1px solid rgba(103, 130, 188, .32); border-radius: 14px; background: rgba(25, 39, 65, .58);
}
.admin-preview-media { padding: 12px; }
.admin-preview-gallery-main, .admin-preview-photo-placeholder {
  display: grid; place-items: center; width: 100%; height: clamp(220px, 34vh, 380px); min-height: 180px;
  overflow: hidden; border-radius: 10px; background: #0b1426;
}
.admin-preview-gallery-main img { display: block; width: 100%; height: 100%; object-fit: contain; }
.admin-preview-photo-placeholder { gap: 8px; color: #91a4c8; font-size: 13px; }
.admin-preview-photo-placeholder span:first-child { font-size: 38px; }
.admin-preview-gallery-thumbs, .admin-preview-variant-photos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.admin-preview-thumb, .admin-preview-variant-thumb {
  display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px; overflow: hidden;
  padding: 3px; border: 1px solid #35486d; border-radius: 9px; background: #111d33; cursor: pointer;
}
.admin-preview-thumb.is-active, .admin-preview-variant-thumb.is-active { border-color: #7a91ff; box-shadow: 0 0 0 2px rgba(93, 115, 241, .24); }
.admin-preview-thumb img, .admin-preview-variant-thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.admin-preview-image-count { margin-top: 8px; color: #96a9cb; font-size: 11px; }
.admin-preview-overview { padding: 18px; }
.admin-preview-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.admin-preview-title-row h3 { margin: 6px 0 0; font-size: clamp(20px, 2.4vw, 29px); line-height: 1.2; overflow-wrap: anywhere; }
.admin-preview-brand-model { margin: 7px 0 0; color: #a9bbde; font-size: 13px; }
.admin-preview-publish-state, .admin-preview-status { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 5px 8px; border-radius: 8px; font-size: 10px; font-weight: 800; }
.admin-preview-publish-state.published, .admin-preview-status.available { border: 1px solid #236b58; color: #a6f0d1; background: rgba(19, 91, 70, .36); }
.admin-preview-publish-state.draft { border: 1px solid #7a5830; color: #ffd39b; background: rgba(106, 69, 28, .34); }
.admin-preview-status.order { border: 1px solid #8a6533; color: #ffd39b; background: rgba(106, 69, 28, .34); }
.admin-preview-status.unavailable { border: 1px solid #80425a; color: #ffbbc8; background: rgba(112, 34, 58, .35); }
.admin-preview-price-summary { display: flex; flex-direction: column; gap: 4px; margin: 16px 0 12px; padding: 13px 14px; border: 1px solid rgba(101, 127, 232, .34); border-radius: 12px; background: linear-gradient(135deg, rgba(63, 89, 194, .20), rgba(83, 55, 159, .18)); }
.admin-preview-price-summary span, .admin-preview-price-summary small { color: #b2c1e0; font-size: 11px; }
.admin-preview-price-summary strong { color: #dce6ff; font-size: 24px; line-height: 1.2; }
.admin-preview-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0 0 16px; }
.admin-preview-facts > div { min-width: 0; padding: 10px; border: 1px solid rgba(111, 137, 191, .22); border-radius: 10px; background: rgba(8, 18, 35, .28); }
.admin-preview-facts dt { color: #9fb2d4; font-size: 10px; margin-bottom: 4px; }
.admin-preview-facts dd { margin: 0; color: #e4ebfb; font-size: 12px; font-weight: 750; overflow-wrap: anywhere; }
.admin-preview-description h4, .admin-preview-notes h4 { margin: 0 0 6px; color: #dce6ff; font-size: 13px; }
.admin-preview-description p, .admin-preview-notes p { margin: 0; color: #c0cce3; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.admin-preview-section { padding: 16px; }
.admin-preview-section > h3 { margin: 0 0 13px; font-size: 16px; }
.admin-preview-spec-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 20px; margin: 0; padding-left: 19px; color: #cbd7ed; font-size: 12px; line-height: 1.55; }
.admin-preview-variant-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.admin-preview-config-group + .admin-preview-config-group { margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(113, 139, 190, .25); }
.admin-preview-config-group h4 { margin: 0 0 10px; color: #a9c1ff; font-size: 13px; }
.admin-preview-variant-card { min-width: 0; padding: 12px; border: 1px solid rgba(111, 138, 197, .30); border-radius: 12px; background: rgba(9, 19, 37, .35); }
.admin-preview-variant-heading { display: flex; align-items: center; gap: 9px; min-width: 0; }
.admin-preview-color-dot { flex: 0 0 23px; width: 23px; height: 23px; border-radius: 50%; border: 2px solid rgba(255,255,255,.65); background: var(--preview-swatch, #315a91); }
.admin-preview-variant-color { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; gap: 2px; }
.admin-preview-variant-color strong { color: #edf3ff; font-size: 13px; overflow-wrap: anywhere; }
.admin-preview-variant-color small { color: #94a8cc; font-size: 10px; }
.admin-preview-variant-prices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.admin-preview-variant-prices > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 9px; border-radius: 9px; background: rgba(67, 89, 147, .14); }
.admin-preview-variant-prices small { color: #95a9cb; font-size: 10px; }
.admin-preview-variant-prices strong { color: #d8e4ff; font-size: 12px; overflow-wrap: anywhere; }
.admin-preview-variant-thumb { flex-basis: 52px; width: 52px; height: 52px; }
.admin-preview-muted { margin: 8px 0 0; color: #91a4c5; font-size: 11px; line-height: 1.5; }
.admin-preview-no-photos { padding: 8px 0 0; }
.admin-preview-notes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 15px; }
.admin-preview-notes > div { min-width: 0; }
body.admin-body .admin-product-preview-dialog:focus { outline: none; }
html[data-theme="light"] body.admin-body .admin-product-preview-dialog { color: #1c2942; background: #f6f8fd; border-color: #c7d4eb; }
html[data-theme="light"] body.admin-body .admin-product-preview-header { background: rgba(246, 248, 253, .96); border-color: #dce4f2; }
html[data-theme="light"] body.admin-body .admin-product-preview-close { color: #263653; background: #fff; border-color: #cbd7ea; }
html[data-theme="light"] body.admin-body .admin-preview-media,
html[data-theme="light"] body.admin-body .admin-preview-overview,
html[data-theme="light"] body.admin-body .admin-preview-section,
html[data-theme="light"] body.admin-body .admin-preview-notes { background: #fff; border-color: #d6deed; }
html[data-theme="light"] body.admin-body .admin-preview-gallery-main,
html[data-theme="light"] body.admin-body .admin-preview-photo-placeholder { background: #edf2fa; }
html[data-theme="light"] body.admin-body .admin-preview-brand-model,
html[data-theme="light"] body.admin-body .admin-preview-description p,
html[data-theme="light"] body.admin-body .admin-preview-notes p,
html[data-theme="light"] body.admin-body .admin-preview-spec-list { color: #435473; }
html[data-theme="light"] body.admin-body .admin-preview-price-summary { background: #eef2ff; border-color: #d0dafa; }
html[data-theme="light"] body.admin-body .admin-preview-price-summary span,
html[data-theme="light"] body.admin-body .admin-preview-price-summary small { color: #56698b; }
html[data-theme="light"] body.admin-body .admin-preview-price-summary strong { color: #2e4dae; }
html[data-theme="light"] body.admin-body .admin-preview-facts > div { background: #f4f7fd; border-color: #dfe6f2; }
html[data-theme="light"] body.admin-body .admin-preview-facts dt { color: #687b9b; }
html[data-theme="light"] body.admin-body .admin-preview-facts dd { color: #263653; }
html[data-theme="light"] body.admin-body .admin-preview-description h4,
html[data-theme="light"] body.admin-body .admin-preview-notes h4,
html[data-theme="light"] body.admin-body .admin-preview-section > h3 { color: #273958; }
html[data-theme="light"] body.admin-body .admin-preview-config-group h4 { color: #3557ac; }
html[data-theme="light"] body.admin-body .admin-preview-variant-card { background: #f8faff; border-color: #dde5f3; }
html[data-theme="light"] body.admin-body .admin-preview-variant-color strong { color: #283957; }
html[data-theme="light"] body.admin-body .admin-preview-variant-color small,
html[data-theme="light"] body.admin-body .admin-preview-variant-prices small,
html[data-theme="light"] body.admin-body .admin-preview-muted { color: #6f809e; }
html[data-theme="light"] body.admin-body .admin-preview-variant-prices > span { background: #eff3fc; }
html[data-theme="light"] body.admin-body .admin-preview-variant-prices strong { color: #304d9e; }
html[data-theme="light"] body.admin-body .admin-preview-thumb,
html[data-theme="light"] body.admin-body .admin-preview-variant-thumb { background: #fff; border-color: #cfd9ed; }
@media (max-width: 760px) {
  body.admin-body .admin-product-preview-dialog { width: calc(100vw - 16px); max-height: 94vh; max-height: 94dvh; border-radius: 14px; }
  .admin-product-preview-header { padding: 13px 14px; }
  .admin-product-preview-content { gap: 12px; padding: 12px; }
  .admin-preview-layout { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .admin-preview-gallery-main, .admin-preview-photo-placeholder { height: 250px; min-height: 180px; }
  .admin-preview-overview { padding: 14px; }
  .admin-preview-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-preview-spec-list { grid-template-columns: minmax(0,1fr); }
  .admin-preview-notes { grid-template-columns: minmax(0,1fr); }
  .admin-preview-variant-grid { grid-template-columns: minmax(0,1fr); }
  .admin-preview-title-row { flex-wrap: wrap; }
}
@media (max-width: 380px) {
  body.admin-body .admin-preview-gallery-main, body.admin-body .admin-preview-photo-placeholder { height: 205px; }
  body.admin-body .admin-preview-variant-prices { grid-template-columns: minmax(0,1fr); }
  body.admin-body .admin-preview-title-row h3 { font-size: 19px; }
}


/* PUBLIC CATALOG · FEATURED SECTION + PRICE FILTER */
.budget-filter-bar { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; margin:14px 0 30px; padding:14px 16px; border:1px solid var(--catalog-filter-border,#d8e1f2); border-radius:15px; background:var(--catalog-filter-surface,#f8faff); box-shadow:0 4px 12px rgba(31,51,93,.045); }
.budget-filter-heading { display:flex; flex-direction:column; gap:4px; min-width:150px; margin-right:auto; }
.budget-filter-heading strong { color:var(--catalog-filter-title,#263756); font-size:14px; font-weight:850; }
.budget-filter-heading small { color:var(--catalog-filter-muted,#7383a0); font-size:11px; }
.budget-price-field { display:flex; flex-direction:column; gap:5px; min-width:135px; color:var(--catalog-filter-muted,#687a9b); font-size:11px; font-weight:800; }
.budget-price-input-wrap { display:flex; align-items:center; gap:7px; min-height:39px; padding:0 10px; border:1px solid var(--catalog-filter-border,#d8e1f2); border-radius:9px; color:var(--catalog-filter-prefix,#5268a2); background:var(--catalog-filter-input,#fff); }
.budget-price-input-wrap input { display:block; width:100%; min-width:0; min-height:37px; padding:6px 0; border:0; outline:0; color:var(--catalog-filter-title,#263756); background:transparent; font:inherit; font-size:13px; font-weight:700; }
.budget-price-input-wrap input:focus-visible { outline:2px solid #738bf4; outline-offset:1px; border-radius:4px; }
.budget-price-input-wrap input::placeholder { color:var(--catalog-filter-placeholder,#9aa8c0); font-weight:500; }
.budget-clear-button { min-height:39px; padding:8px 13px; border:1px solid var(--catalog-filter-border,#d8e1f2); border-radius:9px; color:var(--catalog-filter-title,#33486e); background:var(--catalog-filter-button,#eef2fb); font-size:12px; font-weight:800; cursor:pointer; }
.budget-clear-button:disabled { opacity:.45; cursor:not-allowed; }
.budget-filter-feedback { flex:1 0 100%; min-height:0; color:var(--catalog-filter-error,#b42318); font-size:11px; line-height:1.4; }
.budget-filter-feedback:empty { display:none; }

.featured-section { position:relative; isolation:isolate; overflow:hidden; margin:0 0 32px; padding:22px; border:1px solid var(--featured-border,#d4def4); border-radius:22px; background:var(--featured-surface,linear-gradient(125deg,#f7f9ff,#edf3ff 62%,#f5f0ff)); box-shadow:var(--featured-shadow,0 8px 24px rgba(47,71,133,.08)); }
.featured-section::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,#3c75ec,#7862e8,#df9b5e); z-index:-1; }
.featured-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.featured-section-heading .eyebrow { margin:0 0 5px; color:var(--featured-eyebrow,#536fc2); font-size:10px; letter-spacing:.13em; font-weight:900; }
.featured-section-heading h2 { margin:0; color:var(--featured-title,#1c2d4d); font-size:clamp(25px,3vw,34px); line-height:1.15; letter-spacing:-.04em; }
.featured-section-heading .section-subtitle { margin:8px 0 0; color:var(--featured-muted,#647596); font-size:13px; }
.featured-count { flex:0 0 auto; display:inline-flex; align-items:center; padding:7px 10px; border:1px solid var(--featured-count-border,#d0daf0); border-radius:999px; color:var(--featured-count-text,#485d91); background:var(--featured-count-surface,rgba(255,255,255,.65)); font-size:11px; font-weight:850; }
.featured-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr)); align-items:stretch; gap:16px; }
.featured-grid .product-card { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:stretch; min-width:0; min-height:270px; overflow:hidden; border-color:var(--featured-card-border,#cbd7ef); background:var(--featured-card-surface,#fff); box-shadow:var(--featured-card-shadow,0 5px 0 rgba(43,65,116,.07),0 10px 24px rgba(42,63,115,.08)); }
.featured-grid .product-card:hover { transform:translateY(-3px); }
.featured-grid .product-image { position:relative; min-width:0; min-height:100%; height:100%; aspect-ratio:auto; overflow:hidden; }
.featured-grid .product-image img { display:block; width:100%; height:100%; min-height:270px; object-fit:cover; }
.featured-grid .product-card-content { display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:6px; min-width:0; padding:18px; }
.featured-grid .product-card h3 { font-size:clamp(18px,1.65vw,23px); line-height:1.25; margin:2px 0 4px; overflow-wrap:anywhere; }
.featured-grid .product-card-capacity { margin:0 0 3px; }
.featured-grid .product-color-heading { margin-bottom:5px; }
.featured-grid .product-color-swatches { margin-bottom:3px; }
.featured-grid .product-price-label { margin-top:7px; }
.featured-grid .product-price { font-size:clamp(23px,2.1vw,30px); line-height:1.2; overflow-wrap:anywhere; }
.featured-grid .product-price-secondary { font-size:12px; }
.featured-grid .product-actions { margin-top:9px; }
.featured-grid .product-view-button { min-height:43px; }
.featured-grid .featured-badge { z-index:2; top:12px; left:12px; right:auto; }
.catalog-results-heading { display:flex; align-items:end; justify-content:space-between; gap:14px; margin:8px 0; }
.catalog-results-heading .eyebrow { margin:0 0 4px; color:var(--catalog-filter-muted,#8090ad); font-size:10px; font-weight:850; letter-spacing:.13em; }
.catalog-results-heading h2 { margin:0; color:var(--catalog-filter-title,#263756); font-size:clamp(20px,2.2vw,26px); line-height:1.2; }

.product-contact-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:16px 0 12px; }
.product-contact-actions > * { display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:47px; padding:11px 13px; border-radius:11px; text-align:center; font-size:13px; font-weight:850; line-height:1.35; }
.product-contact-actions .dialog-buy-button { color:#fff; border:1px solid #617bf4; background:linear-gradient(110deg,#2b68e8,#694bd7); box-shadow:0 4px 0 #203e9c; }
.product-contact-actions .dialog-payment-toggle { border:1px solid var(--payment-border,#c9d5eb); color:var(--payment-text,#32486e); background:var(--payment-surface,#f4f7ff); cursor:pointer; }
.product-contact-actions .dialog-payment-toggle.is-expanded { border-color:#7589ef; }
.payment-choice-panel { display:grid; gap:12px; margin:0 0 18px; padding:14px; border:1px solid var(--payment-border,#c9d5eb); border-radius:12px; background:var(--payment-panel,#f7f9ff); }
.payment-choice-panel[hidden] { display:none !important; }
.payment-choice-panel strong { display:block; color:var(--payment-text,#283b5d); font-size:13px; }
.payment-choice-panel p { margin:4px 0 0; color:var(--payment-muted,#697b9a); font-size:12px; line-height:1.5; }
.payment-choice-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.payment-choice-button { display:flex; align-items:center; justify-content:center; min-width:0; min-height:41px; padding:9px 12px; border:1px solid var(--payment-border,#c9d5eb); border-radius:9px; color:var(--payment-text,#34496d); background:var(--payment-surface,#fff); font-size:12px; font-weight:800; line-height:1.35; text-align:center; }
.payment-choice-button:hover { border-color:#7489ed; color:var(--payment-accent,#3456b3); }

html[data-theme="dark"] {
  --catalog-filter-border:#303f60; --catalog-filter-surface:#111a30; --catalog-filter-title:#e7eeff; --catalog-filter-muted:#9eafcf; --catalog-filter-prefix:#b2c4f5; --catalog-filter-input:#0c1528; --catalog-filter-placeholder:#7889a8; --catalog-filter-button:#1b2948; --catalog-filter-error:#ffa3a3;
  --featured-border:#35466e; --featured-surface:radial-gradient(ellipse at 100% 0%,rgba(103,79,209,.16),transparent 34%),linear-gradient(128deg,#111d35,#14213a 58%,#181d3a); --featured-shadow:0 8px 24px rgba(0,0,0,.2); --featured-eyebrow:#a7bbff; --featured-title:#f0f4ff; --featured-muted:#b0bed8; --featured-count-border:#44577e; --featured-count-text:#d5dfff; --featured-count-surface:rgba(18,30,54,.78); --featured-card-border:#3b4d73; --featured-card-surface:#101a30; --featured-card-shadow:0 5px 0 #080f20,0 10px 24px rgba(0,0,0,.18);
  --payment-border:#3a4e75; --payment-text:#dce6ff; --payment-surface:#172542; --payment-muted:#a6b7d6; --payment-panel:#111d34; --payment-accent:#aebdff;
}
html[data-theme="light"] {
  --catalog-filter-border:#d4deef; --catalog-filter-surface:#f8faff; --catalog-filter-title:#263653; --catalog-filter-muted:#687b9b; --catalog-filter-prefix:#435fb0; --catalog-filter-input:#fff; --catalog-filter-placeholder:#98a6bc; --catalog-filter-button:#edf2fc; --catalog-filter-error:#b42318;
  --featured-border:#d1dcf0; --featured-surface:radial-gradient(ellipse at 100% 0%,rgba(121,99,225,.09),transparent 34%),linear-gradient(128deg,#f8faff,#eef4ff 58%,#f5f1ff); --featured-shadow:0 8px 24px rgba(40,62,113,.08); --featured-eyebrow:#4c63b4; --featured-title:#1d2d4c; --featured-muted:#617392; --featured-count-border:#d4def0; --featured-count-text:#43598d; --featured-count-surface:rgba(255,255,255,.78); --featured-card-border:#d4dfef; --featured-card-surface:#fff; --featured-card-shadow:0 4px 0 rgba(43,65,116,.07),0 10px 24px rgba(42,63,115,.08);
  --payment-border:#d0dbee; --payment-text:#2d4268; --payment-surface:#fff; --payment-muted:#657898; --payment-panel:#f5f8ff; --payment-accent:#3855b1;
}
html[data-theme="dark"] .budget-filter-bar, html[data-theme="dark"] .featured-section, html[data-theme="dark"] .featured-grid .product-card, html[data-theme="dark"] .payment-choice-panel { color-scheme:dark; }
html[data-theme="light"] .budget-filter-bar, html[data-theme="light"] .featured-section, html[data-theme="light"] .featured-grid .product-card, html[data-theme="light"] .payment-choice-panel { color-scheme:light; }
.featured-section.hidden { display:none !important; }

@media (max-width:760px) {
  .budget-filter-bar { align-items:stretch; gap:10px; padding:12px; margin-bottom:24px; }
  .budget-filter-heading { flex:1 0 100%; margin-right:0; }
  .budget-price-field { flex:1 1 125px; min-width:0; }
  .budget-clear-button { flex:0 0 auto; align-self:flex-end; }
  .featured-section { padding:15px; margin-bottom:25px; border-radius:17px; }
  .featured-section-heading { align-items:flex-start; gap:10px; margin-bottom:13px; }
  .featured-section-heading h2 { font-size:26px; }
  .featured-count { margin-top:3px; padding:6px 8px; font-size:10px; }
  .featured-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .featured-grid .product-card { grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); min-height:220px; }
  .featured-grid .product-image img { min-height:220px; }
  .featured-grid .product-card-content { padding:12px; gap:4px; }
  .featured-grid .product-card h3 { font-size:18px; }
  .featured-grid .product-price { font-size:23px; }
  .featured-grid .product-price-secondary { font-size:11px; }
  .featured-grid .product-view-button { min-height:40px; font-size:12px; padding:9px 6px; }
  .product-contact-actions { grid-template-columns:minmax(0,1fr); gap:8px; }
  .product-contact-actions > * { min-height:45px; }
  .payment-choice-actions { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:420px) {
  .budget-price-field { flex-basis:calc(50% - 6px); }
  .budget-clear-button { width:100%; }
  .featured-section { padding:12px; }
  .featured-grid .product-card { grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); min-height:205px; }
  .featured-grid .product-image img { min-height:205px; }
  .featured-grid .product-card-content { padding:9px; }
  .featured-grid .product-card h3 { font-size:15px; }
  .featured-grid .product-price { font-size:20px; }
  .featured-grid .product-color-chip { font-size:10px; }
  .featured-grid .product-view-button { font-size:11px; }
  .featured-count { display:none; }
}


/* Fine alignment for the existing color swatches inside featured cards. */
.featured-grid .product-card-colors { margin:0 0 3px; min-width:0; }
.featured-grid .product-card-colors-label { display:block; margin-bottom:4px; }
.featured-grid .product-card-color-list { display:flex; flex-wrap:wrap; align-items:flex-start; gap:5px 8px; }
.featured-grid .product-card-color-option { min-width:0; }
@media (max-width:760px) {
  .featured-grid .product-card-colors-label { font-size:10px; }
  .featured-grid .product-card-color-list { gap:4px 6px; }
  .featured-grid .product-card-color-name { font-size:10px; }
}


/* PERFUMES / FRAGANCIAS · FILTRO SECUNDARIO */
.perfume-family-row {
  align-items:center;
  gap:8px;
  margin-top:-12px;
  margin-bottom:20px;
  padding:10px 12px;
  border:1px solid var(--perfume-family-border,#d7dfef);
  border-radius:13px;
  background:var(--perfume-family-surface,#f8faff);
}
.perfume-family-row.hidden { display:none !important; }
.perfume-family-label {
  padding:0 4px 0 2px;
  color:var(--perfume-family-muted,#71809c);
  font-size:11px;
  font-weight:850;
  white-space:nowrap;
}
.perfume-family-row .filter-chip {
  min-height:34px;
  padding:7px 12px;
  font-size:12px;
}
html[data-theme="dark"] {
  --perfume-family-border:#303f60;
  --perfume-family-surface:#101a30;
  --perfume-family-muted:#9eafcf;
}
html[data-theme="light"] {
  --perfume-family-border:#d7e0f0;
  --perfume-family-surface:#f8faff;
  --perfume-family-muted:#71809c;
}
@media (max-width:760px) {
  .perfume-family-row {
    gap:7px;
    margin-top:-8px;
    margin-bottom:17px;
    padding:9px;
  }
  .perfume-family-label { flex-basis:100%; }
  .perfume-family-row .filter-chip {
    min-height:36px;
    padding:8px 11px;
    font-size:12px;
  }
}


/* DUAL CATALOG ADMIN · CATALOG CONTEXT + FRAGRANCE FORM */
.admin-catalog-context {
  display:grid;
  grid-template-columns:minmax(190px,260px);
  gap:6px;
  min-width:min(290px,100%);
  max-width:360px;
  padding:12px 14px;
  border:1px solid var(--admin-context-border,#35486b);
  border-radius:14px;
  background:var(--admin-context-surface,#111d32);
}
.admin-catalog-context label {
  color:var(--admin-context-label,#a9bcdf);
  font-size:11px;
  font-weight:850;
}
.admin-catalog-context select {
  width:100%;
  min-height:42px;
  padding:9px 12px;
  border:1px solid var(--admin-context-border,#35486b);
  border-radius:10px;
  color:var(--admin-context-text,#eff4ff);
  background:var(--admin-context-input,#0b1528);
  font:inherit;
  font-size:13px;
  font-weight:800;
}
.admin-catalog-context small {
  color:var(--admin-context-muted,#93a7cb);
  font-size:10px;
  line-height:1.45;
}
html[data-theme="dark"] {
  --admin-context-border:#35486b;
  --admin-context-surface:#111d32;
  --admin-context-label:#a9bcdf;
  --admin-context-text:#eff4ff;
  --admin-context-input:#0b1528;
  --admin-context-muted:#93a7cb;
  --admin-perfume-border:#68553a;
  --admin-perfume-surface:linear-gradient(135deg,rgba(63,45,28,.35),rgba(23,30,47,.92));
  --admin-perfume-heading:#efd09c;
  --admin-perfume-muted:#b7c3d9;
}
html[data-theme="light"] {
  --admin-context-border:#cfd9eb;
  --admin-context-surface:#f6f8fd;
  --admin-context-label:#50627f;
  --admin-context-text:#24334e;
  --admin-context-input:#fff;
  --admin-context-muted:#70809b;
  --admin-perfume-border:#e1cfad;
  --admin-perfume-surface:linear-gradient(135deg,#fffaf0,#f7f9fd);
  --admin-perfume-heading:#87622b;
  --admin-perfume-muted:#65738a;
}
.admin-perfume-fields {
  min-width:0;
  margin:8px 0 10px;
  padding:18px;
  border:1px solid var(--admin-perfume-border,#68553a);
  border-radius:15px;
  background:var(--admin-perfume-surface,#111d32);
}
.admin-perfume-fields.hidden { display:none !important; }
.admin-perfume-fields-heading { margin-bottom:15px; }
.admin-perfume-fields-heading .eyebrow { margin:0 0 5px; color:var(--admin-perfume-heading,#efd09c); font-size:10px; font-weight:900; letter-spacing:.13em; }
.admin-perfume-fields-heading h3 { margin:0 0 6px; color:var(--admin-perfume-heading,#efd09c); font-size:19px; }
.admin-perfume-fields-heading p { margin:0; color:var(--admin-perfume-muted,#b7c3d9); font-size:12px; line-height:1.55; }
.admin-perfume-fields-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.admin-perfume-fields-grid > label { min-width:0; }
.admin-perfume-fields-grid textarea { min-height:76px; }
.admin-perfume-original { margin-top:2px; }
.admin-perfume-fields .required-mark { color:#dfa95d; }
body.admin-body .admin-catalog-context select:focus-visible,
body.admin-body .admin-perfume-fields input:focus-visible,
body.admin-body .admin-perfume-fields select:focus-visible,
body.admin-body .admin-perfume-fields textarea:focus-visible {
  outline:2px solid #c4a16a;
  outline-offset:2px;
}
.admin-preview-note-group { min-width:0; }
.admin-preview-note-group .admin-preview-spec-list { margin-top:7px; }
@media (max-width:980px) {
  .admin-catalog-context { min-width:0; max-width:none; grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px) {
  .admin-catalog-context { width:100%; }
  .admin-perfume-fields { padding:13px; }
  .admin-perfume-fields-grid { grid-template-columns:minmax(0,1fr); gap:11px; }
  .admin-perfume-fields-grid .span-2 { grid-column:auto; }
}

/* CROSS-PROMOTION BETWEEN THE TWO PUBLIC CATALOGS */
.cross-catalog-promo {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(180px,.8fr);
  align-items:center;
  gap:24px;
  width:min(1200px,calc(100% - 48px));
  margin:28px auto;
  padding:clamp(20px,3vw,34px);
  overflow:hidden;
  border:1px solid var(--cross-promo-border,#d1dcf0);
  border-radius:20px;
  background:var(--cross-promo-surface,linear-gradient(115deg,#f8faff,#edf2ff 68%,#f7f0ff));
  box-shadow:var(--cross-promo-shadow,0 12px 30px rgba(44,63,112,.08));
}
.cross-catalog-promo-copy { position:relative; z-index:1; min-width:0; }
.cross-catalog-promo-copy .eyebrow { margin:0 0 8px; color:var(--cross-promo-accent,#536bc1); font-size:10px; font-weight:900; letter-spacing:.15em; }
.cross-catalog-promo-copy h2 { margin:0; color:var(--cross-promo-title,#1c2c4a); font-size:clamp(22px,3vw,32px); line-height:1.16; letter-spacing:-.035em; }
.cross-catalog-promo-copy p:not(.eyebrow) { max-width:580px; margin:10px 0 16px; color:var(--cross-promo-muted,#637392); font-size:13px; line-height:1.6; }
.cross-catalog-promo-copy .button { display:inline-flex; align-items:center; gap:8px; }
.cross-catalog-promo-mark { display:grid; place-items:center; gap:7px; min-height:150px; border:1px solid var(--cross-promo-border,#d1dcf0); border-radius:15px; background:var(--cross-promo-mark,#fff); }
.cross-catalog-promo-mark > span { color:var(--cross-promo-accent,#536bc1); font-size:64px; line-height:1; }
.cross-catalog-promo-mark small { color:var(--cross-promo-muted,#637392); font-size:9px; font-weight:900; letter-spacing:.14em; text-align:center; }
html[data-theme="dark"] {
  --cross-promo-border:#34476c;
  --cross-promo-surface:radial-gradient(ellipse at 100% 0%,rgba(198,156,87,.13),transparent 40%),linear-gradient(120deg,#101b30,#151f36 65%,#201c31);
  --cross-promo-shadow:0 12px 30px rgba(0,0,0,.18);
  --cross-promo-accent:#d2b477;
  --cross-promo-title:#f2f5ff;
  --cross-promo-muted:#b0bed8;
  --cross-promo-mark:#111b30;
}
html[data-theme="light"] {
  --cross-promo-border:#d7e0f0;
  --cross-promo-surface:radial-gradient(ellipse at 100% 0%,rgba(198,156,87,.11),transparent 40%),linear-gradient(120deg,#f8faff,#eef3ff 65%,#fbf4e8);
  --cross-promo-shadow:0 12px 30px rgba(44,63,112,.08);
  --cross-promo-accent:#80602e;
  --cross-promo-title:#1c2c4a;
  --cross-promo-muted:#637392;
  --cross-promo-mark:#fffdf9;
}
@media (max-width:760px) {
  .cross-catalog-promo { width:calc(100% - 28px); grid-template-columns:minmax(0,1fr); gap:15px; margin:22px auto; padding:18px; }
  .cross-catalog-promo-mark { min-height:95px; grid-template-columns:auto auto; gap:12px; }
  .cross-catalog-promo-mark > span { font-size:42px; }
}


/* Nota prudente para completar la ficha de perfumería con datos confirmados. */
.admin-perfume-data-note {
  margin:0;
  padding:12px 14px;
  border:1px solid #d9e4f5;
  border-radius:10px;
  color:#5c6b86;
  background:#f4f7ff;
  font-size:12px;
  line-height:1.6;
}

html[data-theme="dark"] .admin-perfume-data-note {
  border-color:#34476c;
  color:#b0bed8;
  background:linear-gradient(120deg,#101b30,#151f36);
}
html[data-theme="light"] .admin-perfume-data-note {
  border-color:#d7e0f0;
  color:#637392;
  background:linear-gradient(120deg,#f8faff,#eef3ff);
}


/* Imagen editorial de perfumería en el catálogo tecnológico. */
.cross-catalog-promo-image {
  display:block;
  position:relative;
  align-self:stretch;
  min-width:0;
  min-height:176px;
  aspect-ratio:2.35 / 1;
  padding:0;
  overflow:hidden;
  border-color:var(--cross-promo-border,#d1dcf0);
  background:#10131b;
}
.cross-catalog-promo-image > img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center 50%;
  transition:transform .45s ease,filter .35s ease;
}
.cross-catalog-promo-image:hover > img {
  transform:scale(1.035);
  filter:saturate(1.08);
}
.cross-catalog-promo-image::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(5,10,23,.78),rgba(5,10,23,.02) 78%);
  pointer-events:none;
}
.cross-catalog-promo-mark .cross-catalog-promo-image-label {
  position:absolute;
  z-index:1;
  right:12px;
  bottom:12px;
  left:12px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  color:#fff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.11em;
  line-height:1.4;
  text-align:left;
  text-shadow:0 1px 5px rgba(0,0,0,.7);
}
.cross-catalog-promo-image-label .promo-separator {
  color:#ead29a;
  font-size:19px;
  font-weight:700;
  letter-spacing:0;
  line-height:1;
  text-shadow:0 1px 5px rgba(0,0,0,.7);
}
@media (max-width:760px) {
  .cross-catalog-promo-image {
    min-height:154px;
    aspect-ratio:2.2 / 1;
  }
  .cross-catalog-promo-image .cross-catalog-promo-image-label {
    right:10px;
    bottom:10px;
    left:10px;
    gap:4px;
    font-size:9px;
    letter-spacing:.08em;
  }
  .cross-catalog-promo-image-label .promo-separator { font-size:17px; }
}
@media (max-width:360px) {
  .cross-catalog-promo-image .cross-catalog-promo-image-label {
    gap:3px;
    font-size:8px;
    letter-spacing:.05em;
  }
  .cross-catalog-promo-image-label .promo-separator { font-size:15px; }
}

/* FIX MÓVIL: la tarjeta destacada pasa a una columna para que
   la imagen no aplaste el título, precio ni el botón de producto. */
@media (max-width:600px) {
  body:not(.admin-body) .featured-grid .product-card {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    min-height:0;
  }

  body:not(.admin-body) .featured-grid .product-image {
    grid-column:1;
    width:100%;
    min-width:0;
    min-height:0;
    height:auto;
    aspect-ratio:16 / 10;
    border-right:0;
    border-bottom:1px solid var(--featured-card-border,#d4dfef);
  }

  body:not(.admin-body) .featured-grid .product-image img {
    display:block;
    width:100%;
    height:100%;
    min-height:0;
    padding:10px;
    object-fit:contain;
  }

  body:not(.admin-body) .featured-grid .product-card-content {
    grid-column:1;
    width:100%;
    min-width:0;
    padding:14px;
    gap:7px;
  }

  body:not(.admin-body) .featured-grid .product-card h3 {
    font-size:17px;
    line-height:1.35;
  }

  body:not(.admin-body) .featured-grid .product-card .product-price {
    font-size:clamp(20px,6vw,25px);
  }

  body:not(.admin-body) .featured-grid .product-actions {
    width:100%;
    margin-top:8px;
  }

  body:not(.admin-body) .featured-grid .product-view-button {
    display:flex;
    width:100%;
    min-width:0;
    min-height:44px;
    justify-content:center;
    white-space:normal;
  }
}

@media (max-width:360px) {
  body:not(.admin-body) .featured-grid .product-card-content {
    padding:11px;
  }

  body:not(.admin-body) .featured-grid .product-image {
    aspect-ratio:4 / 3;
  }
}

/* Ficha de producto: la imagen principal usa el espacio disponible
   con object-fit:contain para conservar la fotografía completa. */
.product-dialog #dialog-image .dialog-gallery-main {
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.product-dialog #dialog-image .dialog-gallery-main .dialog-main-image {
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-width:100%;
  max-height:100%;
  margin:0;
  padding:10px;
  box-sizing:border-box;
  object-fit:contain;
  object-position:center;
}
@media (max-width:760px), (hover:none) and (pointer:coarse) {
  .product-dialog #dialog-image .dialog-gallery-main .dialog-main-image {
    padding:12px;
  }
}

/* Recuperación local: separar claramente las acciones y mejorar el flujo móvil. */
.local-recovery-card #local-recovery-status {
  margin: 16px 0 0;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.local-recovery-card .local-recovery-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.local-recovery-card .local-recovery-actions > .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 12px 18px;
  line-height: 1.35;
  white-space: normal;
  text-align: center;
}
.local-recovery-card .local-recovery-note {
  margin: 16px 0 0;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .local-recovery-card .local-recovery-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .local-recovery-card .local-recovery-actions > .button {
    width: 100%;
    max-width: 340px;
    min-height: 50px;
  }
}

/* PERFUMERÍA: ocultar controles de color y variantes tecnológicas. */
body.admin-body #technology-color-manager.hidden,
body.admin-body #technology-variants-section.hidden {
  display: none !important;
}



/* =========================================================
   FICHA DE PRODUCTO MÓVIL · COLORES Y MINIATURAS
   Selector compacto: el estado se marca en el círculo, no en una tarjeta.
   La galería reserva una fila propia para las miniaturas y evita desbordes.
   ========================================================= */
html[data-theme] .product-dialog .color-choice-list {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:8px 12px;
}

html[data-theme] .product-dialog .variant-choice.color-choice,
html[data-theme] .product-dialog .variant-choice.color-choice:hover,
html[data-theme] .product-dialog .variant-choice.color-choice.selected {
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-start;
  width:max-content;
  min-width:0;
  min-height:0;
  gap:6px;
  padding:4px 2px 6px;
  border:1px solid transparent;
  border-radius:8px;
  color:var(--text, #24365f);
  background:transparent;
  box-shadow:none;
  transform:none;
}

html[data-theme] .product-dialog .variant-choice.color-choice:active {
  transform:none;
  box-shadow:none;
}

html[data-theme] .product-dialog .variant-choice.color-choice:focus-visible {
  outline:2px solid rgba(83,109,226,.68);
  outline-offset:3px;
}

html[data-theme] .product-dialog .variant-color-dot {
  width:34px;
  height:34px;
  flex:0 0 34px;
  box-sizing:border-box;
}

html[data-theme] .product-dialog .variant-choice.color-choice.selected .variant-color-dot {
  outline:2px solid #536de2;
  outline-offset:2px;
  border-color:#fff;
  box-shadow:0 0 0 1px rgba(83,109,226,.12);
}

html[data-theme] .product-dialog .variant-color-name {
  max-width:none;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:manual;
  text-align:center;
  line-height:1.25;
}

html[data-theme="dark"] .product-dialog .variant-choice.color-choice,
html[data-theme="dark"] .product-dialog .variant-choice.color-choice:hover,
html[data-theme="dark"] .product-dialog .variant-choice.color-choice.selected {
  color:#d3def6;
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}

/* La foto principal y la fila de miniaturas comparten una altura limitada. */
.product-dialog #dialog-image {
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  align-items:stretch;
  gap:8px;
  min-width:0;
  overflow:hidden;
}

.product-dialog #dialog-image .dialog-gallery-main {
  display:grid;
  place-items:center;
  width:100%;
  height:auto;
  min-width:0;
  min-height:0;
  max-height:100%;
  overflow:hidden;
}

.product-dialog #dialog-image .dialog-gallery-main .dialog-main-image {
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-width:100%;
  max-height:100%;
  margin:0;
  padding:8px;
  box-sizing:border-box;
  object-fit:contain;
  object-position:center;
}

.product-dialog #dialog-image .dialog-gallery-thumbs {
  display:flex;
  flex:0 0 auto;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:0;
  overflow-x:auto;
  overflow-y:hidden;
  padding:3px 5px 7px;
  box-sizing:border-box;
  scrollbar-width:thin;
  overscroll-behavior-x:contain;
}

.product-dialog #dialog-image .dialog-gallery-thumb {
  display:grid;
  place-items:center;
  position:relative;
  flex:0 0 48px;
  width:48px;
  min-width:48px;
  height:48px;
  min-height:48px;
  padding:3px;
  box-sizing:border-box;
  overflow:hidden;
}

.product-dialog #dialog-image .dialog-gallery-thumb img {
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-width:100%;
  max-height:100%;
  margin:0;
  padding:0;
  box-sizing:border-box;
  object-fit:contain;
  object-position:center;
}

@media (max-width:760px), (hover:none) and (pointer:coarse) {
  .product-dialog #dialog-image {
    grid-template-rows:minmax(0,1fr) auto;
    gap:6px;
  }

  .product-dialog #dialog-image .dialog-gallery-main {
    height:auto;
    min-height:0;
  }

  .product-dialog #dialog-image .dialog-gallery-thumbs {
    justify-content:flex-start;
  }

  .product-dialog #dialog-image .dialog-gallery-thumb {
    flex-basis:46px;
    width:46px;
    min-width:46px;
    height:50px;
    min-height:50px;
  }
}


/* =========================================================
   FIX MÓVIL · SELECTOR DE COLOR SIN TARJETAS + GALERÍA ACOTADA
   La selección se comunica en el círculo de color, no en una caja.
   ========================================================= */
.product-dialog #variant-options-area .variant-option-group:has(.color-choice-list) {
  width:100% !important; min-width:0 !important; margin:8px 0 0 !important;
  padding:0 !important; border:0 !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important;
}
.product-dialog #variant-options-area .variant-option-group:has(.color-choice-list) > h3 {
  margin:0 0 10px !important; padding:0 !important;
}
.product-dialog #variant-options-area .color-choice-list {
  display:flex !important; flex-wrap:wrap !important; align-items:flex-start !important;
  justify-content:flex-start !important; gap:8px 14px !important; width:100% !important; min-width:0 !important;
}
.product-dialog #variant-options-area .variant-choice.color-choice,
.product-dialog #variant-options-area .variant-choice.color-choice:hover,
.product-dialog #variant-options-area .variant-choice.color-choice.selected {
  display:flex !important; flex:0 1 auto !important; flex-direction:column !important;
  align-items:center !important; justify-content:flex-start !important; gap:9px !important;
  width:fit-content !important; min-width:0 !important; max-width:min(42vw,150px) !important;
  min-height:0 !important; margin:0 !important; padding:4px 5px !important;
  border:1px solid transparent !important; border-radius:8px !important;
  background:transparent !important; box-shadow:none !important;
  color:var(--text,#24365f) !important; transform:none !important;
}
.product-dialog #variant-options-area .variant-choice.color-choice:hover { opacity:.9; }
.product-dialog #variant-options-area .variant-choice.color-choice:active { transform:none !important; box-shadow:none !important; }
.product-dialog #variant-options-area .variant-choice.color-choice:focus-visible {
  outline:2px solid rgba(83,109,226,.72) !important; outline-offset:2px !important;
}
.product-dialog #variant-options-area .variant-color-dot {
  display:block !important; flex:0 0 38px !important; width:38px !important; height:38px !important;
  min-width:38px !important; min-height:38px !important; box-sizing:border-box !important; border-radius:50% !important;
}
.product-dialog #variant-options-area .variant-choice.color-choice.selected .variant-color-dot {
  outline:3px solid #536de2 !important; outline-offset:3px !important; border:2px solid #fff !important;
  box-shadow:0 0 0 1px rgba(83,109,226,.16) !important;
}
.product-dialog #variant-options-area .variant-color-name {
  display:block !important; width:max-content !important; max-width:138px !important; min-width:0 !important;
  white-space:normal !important; overflow-wrap:anywhere !important; word-break:normal !important; hyphens:none !important;
  text-align:center !important; font-size:13px !important; line-height:1.3 !important;
}
html[data-theme="dark"] .product-dialog #variant-options-area .variant-choice.color-choice,
html[data-theme="dark"] .product-dialog #variant-options-area .variant-choice.color-choice:hover,
html[data-theme="dark"] .product-dialog #variant-options-area .variant-choice.color-choice.selected {
  color:#e0e9ff !important; border-color:transparent !important; background:transparent !important; box-shadow:none !important;
}

/* Caja de galería con altura definida: evita que miniaturas altas rebasen el modal. */
.product-dialog #dialog-image {
  display:grid !important; grid-template-rows:minmax(0,1fr) 58px !important;
  align-items:stretch !important; gap:7px !important; width:100% !important;
  height:min(64vh,560px) !important; max-height:min(64vh,560px) !important;
  min-width:0 !important; min-height:0 !important; overflow:hidden !important; box-sizing:border-box !important;
}
.product-dialog #dialog-image .dialog-gallery-main {
  display:grid !important; place-items:center !important; width:100% !important; height:100% !important;
  min-width:0 !important; min-height:0 !important; max-height:100% !important;
  overflow:hidden !important; box-sizing:border-box !important;
}
.product-dialog #dialog-image .dialog-gallery-main .dialog-main-image {
  display:block !important; width:100% !important; height:100% !important;
  min-width:0 !important; min-height:0 !important; max-width:100% !important; max-height:100% !important;
  margin:0 !important; padding:6px !important; box-sizing:border-box !important;
  object-fit:contain !important; object-position:center !important;
}
.product-dialog #dialog-image .dialog-gallery-thumbs {
  display:flex !important; flex:0 0 58px !important; flex-wrap:nowrap !important; align-items:center !important;
  justify-content:center !important; gap:7px !important; width:100% !important; max-width:100% !important;
  min-width:0 !important; height:58px !important; min-height:58px !important; max-height:58px !important;
  margin:0 !important; padding:3px 5px 5px !important; overflow-x:auto !important; overflow-y:hidden !important;
  box-sizing:border-box !important; scrollbar-width:thin; overscroll-behavior-x:contain;
}
.product-dialog #dialog-image .dialog-gallery-thumb {
  display:grid !important; flex:0 0 50px !important; width:50px !important; min-width:50px !important;
  max-width:50px !important; height:50px !important; min-height:50px !important; max-height:50px !important;
  padding:3px !important; margin:0 !important; overflow:hidden !important; box-sizing:border-box !important;
}
.product-dialog #dialog-image .dialog-gallery-thumb img {
  display:block !important; width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important;
  max-width:100% !important; max-height:100% !important; padding:0 !important; margin:0 !important;
  object-fit:contain !important; object-position:center !important; box-sizing:border-box !important;
}
@media (max-width:760px), (hover:none) and (pointer:coarse) {
  .product-dialog #variant-options-area .color-choice-list { gap:7px 10px !important; }
  .product-dialog #variant-options-area .variant-choice.color-choice,
  .product-dialog #variant-options-area .variant-choice.color-choice:hover,
  .product-dialog #variant-options-area .variant-choice.color-choice.selected {
    max-width:min(40vw,132px) !important; padding:3px 4px !important;
  }
  .product-dialog #variant-options-area .variant-color-dot {
    flex-basis:36px !important; width:36px !important; height:36px !important; min-width:36px !important; min-height:36px !important;
  }
  .product-dialog #variant-options-area .variant-color-name { max-width:126px !important; font-size:12px !important; }
  .product-dialog #dialog-image {
    grid-template-rows:minmax(0,1fr) 52px !important; height:min(52vh,430px) !important;
    max-height:min(52vh,430px) !important; min-height:220px !important; gap:5px !important;
  }
  .product-dialog #dialog-image .dialog-gallery-thumbs {
    flex-basis:52px !important; height:52px !important; min-height:52px !important; max-height:52px !important;
    justify-content:flex-start !important; padding:2px 3px 4px !important;
  }
  .product-dialog #dialog-image .dialog-gallery-thumb {
    flex-basis:46px !important; width:46px !important; min-width:46px !important; max-width:46px !important;
    height:46px !important; min-height:46px !important; max-height:46px !important;
  }
}
@media (max-width:380px) {
  .product-dialog #variant-options-area .variant-color-name { max-width:108px !important; font-size:11.5px !important; }
  .product-dialog #dialog-image { height:min(49vh,390px) !important; max-height:min(49vh,390px) !important; }
}

/* Marca en el área administrativa: identidad común de los dos catálogos. */
.admin-brand-symbol {
  display:block; flex:0 0 36px; width:36px; height:36px; object-fit:contain; border-radius:10px;
  filter:drop-shadow(0 2px 6px rgba(0,116,255,.15));
}
.admin-sidebar-brand .admin-brand-symbol { flex-basis:39px; width:39px; height:39px; }
.admin-header .brand { gap:10px; }
.admin-header .brand > span:last-child { white-space:nowrap; }
.admin-sidebar-brand-copy strong { letter-spacing:-.02em; }
@media(max-width:600px) {
  .admin-brand-symbol { flex-basis:31px; width:31px; height:31px; }
  .admin-sidebar-brand .admin-brand-symbol { flex-basis:34px; width:34px; height:34px; }
  .admin-header .brand { font-size:14px; gap:7px; }
}


/* JB TECH · mantener la selección en la muestra de color y contener las miniaturas. */
html[data-theme] .product-dialog #variant-options-area .variant-choice.color-choice,
html[data-theme] .product-dialog #variant-options-area .variant-choice.color-choice:hover,
html[data-theme] .product-dialog #variant-options-area .variant-choice.color-choice.selected {
  border-color:transparent !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}
html[data-theme] .product-dialog #variant-options-area .variant-choice.color-choice.selected .variant-color-dot {
  outline:3px solid #536de2 !important;
  outline-offset:3px !important;
  border:2px solid #fff !important;
  box-shadow:0 0 0 1px rgba(83,109,226,.16) !important;
}
html[data-theme] .product-dialog #variant-options-area .variant-color-name {
  width:auto !important;
  max-width:min(46vw,220px) !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  hyphens:none !important;
}
.product-dialog #dialog-image,
.product-dialog #dialog-image .dialog-gallery-main,
.product-dialog #dialog-image .dialog-gallery-thumbs {
  min-width:0 !important;
  max-width:100% !important;
}
.product-dialog #dialog-image .dialog-gallery-thumb {
  flex:0 0 48px;
  width:48px;
  min-width:48px;
  max-width:56px;
  overflow:hidden;
}
.product-dialog #dialog-image .dialog-gallery-thumb img {
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-width:100%;
  max-height:100%;
  padding:0;
  object-fit:contain;
  object-position:center;
  box-sizing:border-box;
}


/* JB TECH · franja panorámica de JB Parfums. El único enlace visible es el CTA integrado. */
.technology-promo-banner {
  position:relative;
  isolation:isolate;
  display:block;
  width:min(1200px,calc(100% - 48px));
  aspect-ratio:3 / 1;
  margin:28px auto;
  overflow:hidden;
  border:1px solid rgba(203,177,125,.32);
  border-radius:20px;
  background:#090c14;
  box-shadow:0 16px 38px rgba(8,12,24,.18);
  line-height:0;
}
.technology-promo-banner > img {
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
}
.technology-promo-banner-cta {
  position:absolute;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  left:37%;
  top:84%;
  width:26%;
  height:13%;
  overflow:hidden;
  border:1px solid rgba(255,223,150,.92);
  border-radius:999px;
  color:#251707;
  background:linear-gradient(180deg,#ffe7ad 0%,#f2c16b 64%,#d79438 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 3px 8px rgba(0,0,0,.28);
  text-decoration:none;
  text-indent:0;
  font-family:"Space Grotesk","Manrope",sans-serif;
  font-size:clamp(11px,1vw,14px);
  font-weight:700;
  letter-spacing:.02em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:filter .15s ease,transform .15s ease;
}
.technology-promo-banner-cta:hover { filter:brightness(1.04); }
.technology-promo-banner-cta:active { filter:brightness(.96); transform:translateY(1px); }
.technology-promo-banner-cta:focus-visible {
  outline:2px solid #fff;
  outline-offset:3px;
  box-shadow:0 0 0 3px rgba(200,155,85,.95);
}
.technology-promo-banner-cta:focus:not(:focus-visible) { outline:none; }
.technology-catalog .product-card {
  font-family:"Space Grotesk","Manrope",sans-serif;
}
.technology-catalog .product-card h3,
.technology-catalog .product-card .product-category,
.technology-catalog .product-card .product-description,
.technology-catalog .product-card .product-card-capacity,
.technology-catalog .product-card .product-price-label,
.technology-catalog .product-card .product-price,
.technology-catalog .product-card .product-price-secondary,
.technology-catalog .product-card .product-view-button {
  font-family:"Space Grotesk","Manrope",sans-serif;
}
@media (max-width:760px) {
  .technology-promo-banner {
    width:calc(100% - 28px);
    margin:22px auto;
    border-radius:14px;
  }
  .technology-promo-banner-cta {
    left:35%;
    top:83%;
    width:30%;
    height:15%;
    font-size:9px;
  }
  .technology-catalog .product-card h3 {
    font-size:13px;
    line-height:1.3;
    font-weight:600;
  }
  .technology-catalog .product-card .product-category {
    font-size:9px;
    letter-spacing:.04em;
  }
  .technology-catalog .product-card .product-card-capacity {
    font-size:10px;
    line-height:1.35;
    margin-bottom:8px;
  }
  .technology-catalog .product-card .product-price-label {
    font-size:9px;
  }
  .technology-catalog .product-card .product-price {
    font-size:clamp(16px,4.1vw,20px);
    line-height:1.2;
  }
  .technology-catalog .product-card .product-price-secondary {
    font-size:9px;
  }
  .technology-catalog .product-card .product-view-button {
    font-size:11px;
    letter-spacing:-.01em;
  }
}
@media (max-width:380px) {
  .technology-catalog .product-card h3 { font-size:12.5px; }
  .technology-catalog .product-card .product-price { font-size:15px; }
}


/* Touch polish: remove Android's blue tap flash on public catalog controls while keeping keyboard focus visible. */
.technology-catalog a,
.technology-catalog button,
.technology-catalog [role="button"],
.perfume-page a,
.perfume-page button,
.perfume-page [role="button"] {
  -webkit-tap-highlight-color:transparent;
}
.technology-catalog a:focus:not(:focus-visible),
.technology-catalog button:focus:not(:focus-visible),
.perfume-page a:focus:not(:focus-visible),
.perfume-page button:focus:not(:focus-visible) {
  outline:none;
}


/* JB TECH · Selección insignia premium, compacta y adaptable. */
.technology-catalog .featured-section {
  border-color:var(--featured-border,#d4dfef);
  box-shadow:var(--featured-shadow,0 8px 24px rgba(40,62,113,.08)),inset 0 0 0 1px rgba(255,255,255,.22);
}
.technology-catalog .featured-section::after {
  content:"";
  position:absolute;
  inset:7px;
  z-index:0;
  border:1px solid rgba(190,153,87,.24);
  border-radius:16px;
  pointer-events:none;
}
.technology-catalog .featured-section > * {
  position:relative;
  z-index:1;
}
.technology-catalog .featured-exclusive-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  max-width:100%;
  margin:0 0 15px;
  padding:8px 13px;
  border:1px solid #cdb47f;
  border-radius:999px;
  color:#4b3c21;
  background:linear-gradient(110deg,rgba(255,250,235,.94),rgba(239,225,191,.82));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 4px 12px rgba(40,46,73,.07);
  font-family:"Space Grotesk","Manrope",sans-serif;
  font-size:10px;
  font-weight:900;
  line-height:1.25;
  letter-spacing:.105em;
  text-transform:uppercase;
}
.technology-catalog .featured-exclusive-badge > span {
  color:#b58b3e;
  font-size:15px;
  line-height:1;
}
.technology-catalog .featured-exclusive-badge i {
  color:#a78d5b;
  font-style:normal;
  opacity:.85;
}
.technology-catalog .featured-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:clamp(10px,1.5vw,18px);
}
body.technology-catalog .featured-grid .product-card {
  min-width:0;
  min-height:286px;
  border:1px solid rgba(190,153,87,.6);
  border-radius:16px;
  box-shadow:var(--featured-card-shadow,0 4px 0 rgba(43,65,116,.07),0 10px 24px rgba(42,63,115,.08));
}
body.technology-catalog .featured-grid .product-image {
  background:radial-gradient(ellipse at 50% 44%,rgba(213,193,145,.17),transparent 72%),linear-gradient(145deg,#f8f6f0,#eae9e5);
}
body.technology-catalog .featured-grid .product-image img {
  object-fit:contain;
  padding:16px;
  box-sizing:border-box;
}
body.technology-catalog .featured-grid .product-card-content {
  padding:clamp(13px,1.5vw,20px);
  gap:7px;
}
body.technology-catalog .featured-grid .product-card h3 {
  font-size:clamp(17px,1.5vw,22px);
  line-height:1.25;
  overflow-wrap:anywhere;
}
body.technology-catalog .featured-grid .product-price {
  color:var(--catalog-filter-title,#1d2d4c);
  font-size:clamp(21px,2vw,29px);
}
html[data-theme="dark"] .technology-catalog .featured-exclusive-badge {
  border-color:#816b42;
  color:#f1dfb5;
  background:linear-gradient(110deg,rgba(37,32,25,.96),rgba(25,30,46,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 5px 14px rgba(0,0,0,.23);
}
html[data-theme="dark"] .technology-catalog .featured-exclusive-badge > span { color:#e3bd71; }
html[data-theme="dark"] .technology-catalog .featured-exclusive-badge i { color:#bca36e; }
html[data-theme="dark"] body.technology-catalog .featured-grid .product-image {
  background:radial-gradient(ellipse at 50% 44%,rgba(190,153,87,.15),transparent 72%),linear-gradient(145deg,#172238,#101829);
}
@media (min-width:761px) and (max-width:1060px) {
  body.technology-catalog .featured-grid .product-card {
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  body.technology-catalog .featured-grid .product-image {
    width:100%;
    height:156px;
    min-height:0;
    aspect-ratio:auto;
    border-right:0;
    border-bottom:1px solid var(--featured-card-border,#d4dfef);
  }
  body.technology-catalog .featured-grid .product-image img {
    min-height:0;
    width:100%;
    height:100%;
    padding:12px;
  }
  body.technology-catalog .featured-grid .product-card-content { padding:14px; }
  body.technology-catalog .featured-grid .product-card h3 { font-size:17px; }
  body.technology-catalog .featured-grid .product-card-colors-label,
  body.technology-catalog .featured-grid .product-card-color-name { display:none; }
}
@media (max-width:760px) {
  .technology-catalog .featured-section { padding:15px; }
  .technology-catalog .featured-exclusive-badge {
    margin-bottom:12px;
    padding:7px 10px;
    font-size:9px;
    letter-spacing:.075em;
  }
  .technology-catalog .featured-section-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
    margin-bottom:14px;
  }
  .technology-catalog .featured-section-heading h2 { font-size:clamp(23px,6vw,29px); }
  .technology-catalog .featured-section-heading .section-subtitle { max-width:42ch; font-size:12px; line-height:1.55; }
  .technology-catalog .featured-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  body.technology-catalog .featured-grid .product-card {
    display:flex;
    flex-direction:column;
    min-height:0;
    border-radius:13px;
  }
  body.technology-catalog .featured-grid .product-image {
    width:100%;
    height:clamp(104px,31vw,132px);
    min-height:0;
    aspect-ratio:auto;
    border-right:0;
    border-bottom:1px solid var(--featured-card-border,#d4dfef);
  }
  body.technology-catalog .featured-grid .product-image img {
    display:block;
    width:100%;
    height:100%;
    min-height:0;
    padding:8px;
    object-fit:contain;
  }
  body.technology-catalog .featured-grid .product-card-content {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:5px;
    width:100%;
    min-width:0;
    padding:10px 9px 11px;
  }
  body.technology-catalog .featured-grid .product-category { font-size:9px; letter-spacing:.045em; }
  body.technology-catalog .featured-grid .product-card h3 {
    min-height:0;
    margin:0;
    font-size:clamp(13px,3.8vw,16px);
    line-height:1.27;
  }
  body.technology-catalog .featured-grid .product-card-capacity { margin:0; font-size:10px; line-height:1.3; }
  body.technology-catalog .featured-grid .product-card-colors { margin:0; }
  body.technology-catalog .featured-grid .product-card-colors-label,
  body.technology-catalog .featured-grid .product-card-color-name { display:none; }
  body.technology-catalog .featured-grid .product-card-color-list { display:flex; flex-wrap:wrap; gap:4px; min-height:13px; }
  body.technology-catalog .featured-grid .product-card-color-option { display:inline-flex; align-items:center; min-width:0; }
  body.technology-catalog .featured-grid .product-card-color-swatch {
    display:inline-block;
    width:10px;
    height:10px;
    border:1px solid rgba(110,120,140,.32);
    border-radius:50%;
  }
  body.technology-catalog .featured-grid .product-price-label { margin-top:2px; font-size:9px; }
  body.technology-catalog .featured-grid .product-price {
    font-size:clamp(16px,4.7vw,20px);
    line-height:1.18;
    overflow-wrap:anywhere;
  }
  body.technology-catalog .featured-grid .product-price-secondary { font-size:10px; }
  body.technology-catalog .featured-grid .product-actions { margin-top:4px; width:100%; }
  body.technology-catalog .featured-grid .product-view-button {
    display:flex;
    width:100%;
    min-width:0;
    min-height:36px;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:8px 5px;
    font-size:11px;
    letter-spacing:0;
    white-space:normal;
    line-height:1.2;
  }
  .technology-catalog .featured-count { display:none; }
}
@media (max-width:380px) {
  .technology-catalog .featured-section { padding:11px; }
  .technology-catalog .featured-grid { gap:7px; }
  body.technology-catalog .featured-grid .product-image { height:100px; }
  body.technology-catalog .featured-grid .product-card-content { padding:8px 7px 9px; }
  body.technology-catalog .featured-grid .product-card h3 { font-size:13px; }
  body.technology-catalog .featured-grid .product-price { font-size:15px; }
  body.technology-catalog .featured-grid .product-view-button { min-height:34px; font-size:10.5px; }
}

/* JB TECH · La información de la franja también vive en HTML para leerse en móvil. */
.technology-promo-caption {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:min(1200px,calc(100% - 48px));
  margin:-12px auto 28px;
  color:var(--catalog-filter-muted,#687b9b);
  font-family:"Space Grotesk","Manrope",sans-serif;
  text-align:center;
}
.technology-promo-audiences {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
  overflow:hidden;
  border:1px solid var(--catalog-filter-border,#d4deef);
  border-radius:12px;
  background:var(--catalog-filter-surface,#f8faff);
  box-shadow:0 5px 14px rgba(30,48,90,.06);
}
.technology-promo-audiences span {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:10px 8px;
  color:var(--catalog-filter-title,#263653);
  font-size:clamp(12px,1.15vw,14px);
  font-weight:850;
  line-height:1.2;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.technology-promo-audiences span + span { border-left:1px solid var(--catalog-filter-border,#d4deef); }
.technology-promo-caption > p {
  margin:0;
  color:var(--catalog-filter-muted,#687b9b);
  font-size:clamp(12px,1vw,13px);
  font-weight:800;
  line-height:1.4;
  letter-spacing:.1em;
  text-transform:uppercase;
}
html[data-theme="dark"] .technology-promo-audiences {
  border-color:#344361;
  background:linear-gradient(110deg,#111c32,#17233d);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
html[data-theme="dark"] .technology-promo-audiences span { color:#e5ecff; }
html[data-theme="dark"] .technology-promo-audiences span + span { border-color:#344361; }
html[data-theme="dark"] .technology-promo-caption > p { color:#bcc8e4; }
@media (max-width:760px) {
  .technology-promo-caption {
    width:calc(100% - 28px);
    gap:7px;
    margin:-8px auto 22px;
  }
  .technology-promo-audiences span {
    padding:9px 4px;
    font-size:clamp(10.5px,3.1vw,12.5px);
    letter-spacing:.025em;
  }
  .technology-promo-caption > p {
    font-size:clamp(11px,3vw,12px);
    letter-spacing:.075em;
  }
  .technology-promo-banner-cta {
    left:33%;
    width:34%;
    font-size:clamp(8.5px,2.35vw,9.5px);
  }
}
html[data-theme="dark"] .technology-promo-caption {
  color:#bcc8e4;
}


/* JB TECH · enlazar el botón ya impreso en la franja sin duplicarlo debajo. */
.technology-promo-banner-link {
  position:absolute;
  z-index:5;
  left:39%;
  top:82%;
  display:block;
  width:22%;
  height:14%;
  margin:0;
  padding:0;
  border:0;
  border-radius:999px;
  color:transparent;
  background:transparent;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.technology-promo-banner-link:focus-visible {
  outline:3px solid #fff;
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(185,148,84,.95);
}
@media(max-width:760px) {
  .technology-promo-banner-link { left:38%; top:82%; width:24%; height:15%; }
}

/* JB TECH · destacados compactos; ambas tarjetas ocupan la misma altura y alinean el CTA. */
@media(max-width:760px) {
  .technology-catalog .featured-section {
    margin-bottom:20px;
    padding:12px;
    border-radius:16px;
  }
  .technology-catalog .featured-exclusive-badge {
    margin-bottom:8px;
    padding:6px 9px;
    font-size:9px;
    letter-spacing:.06em;
  }
  .technology-catalog .featured-section-heading { gap:6px; margin-bottom:10px; }
  .technology-catalog .featured-section-heading h2 { font-size:clamp(21px,5.4vw,25px); line-height:1.18; }
  .technology-catalog .featured-section-heading .section-subtitle {
    margin-top:5px;
    font-size:11.5px;
    line-height:1.45;
  }
  .technology-catalog .featured-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:1fr;
    align-items:stretch;
    gap:9px;
  }
  .technology-catalog .featured-grid .product-card {
    display:flex;
    flex-direction:column;
    align-self:stretch;
    height:100%;
    min-height:0;
    overflow:hidden;
    border:1px solid rgba(153,135,100,.52);
    border-radius:12px;
    box-shadow:0 3px 10px rgba(27,39,70,.07);
  }
  .technology-catalog .featured-grid .product-image {
    flex:0 0 auto;
    width:100%;
    height:clamp(92px,24vw,116px);
    min-height:0;
    aspect-ratio:auto;
    border-right:0;
    border-bottom:1px solid var(--featured-card-border,#d4dfef);
  }
  .technology-catalog .featured-grid .product-image img {
    display:block;
    width:100%;
    height:100%;
    min-height:0;
    padding:6px;
    object-fit:contain;
  }
  .technology-catalog .featured-grid .product-card-content {
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:4px;
    width:100%;
    min-width:0;
    padding:8px 8px 9px;
  }
  .technology-catalog .featured-grid .product-category { margin:0; font-size:8.5px; line-height:1.25; letter-spacing:.035em; }
  .technology-catalog .featured-grid .product-card h3 {
    min-height:0;
    margin:0;
    font-size:clamp(12px,3.35vw,14.5px);
    line-height:1.25;
    overflow-wrap:anywhere;
  }
  .technology-catalog .featured-grid .product-card-capacity {
    margin:0;
    padding:4px 6px;
    font-size:9px;
    line-height:1.2;
  }
  .technology-catalog .featured-grid .product-card-colors { margin:0; min-height:13px; }
  .technology-catalog .featured-grid .product-card-colors-label,
  .technology-catalog .featured-grid .product-card-color-name { display:none; }
  .technology-catalog .featured-grid .product-card-color-list { display:flex; flex-wrap:wrap; gap:4px; min-height:12px; }
  .technology-catalog .featured-grid .product-card-color-swatch { width:10px; height:10px; }
  .technology-catalog .featured-grid .product-price-label { margin-top:1px; font-size:8.5px; line-height:1.2; }
  .technology-catalog .featured-grid .product-price {
    margin:0;
    font-size:clamp(15px,3.9vw,18px);
    line-height:1.2;
    overflow-wrap:anywhere;
  }
  .technology-catalog .featured-grid .product-price-secondary { font-size:9.5px; line-height:1.25; }
  .technology-catalog .featured-grid .product-actions { display:flex; width:100%; margin-top:auto; padding-top:4px; }
  .technology-catalog .featured-grid .product-view-button {
    display:flex;
    width:100%;
    min-width:0;
    min-height:34px;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:7px 5px;
    font-size:10.5px;
    line-height:1.2;
    letter-spacing:0;
    white-space:normal;
  }
}
@media(max-width:380px) {
  .technology-catalog .featured-section { padding:10px; }
  .technology-catalog .featured-grid { gap:7px; }
  .technology-catalog .featured-grid .product-image { height:88px; }
  .technology-catalog .featured-grid .product-card-content { padding:7px 6px 8px; }
  .technology-catalog .featured-grid .product-card h3 { font-size:12px; }
  .technology-catalog .featured-grid .product-price { font-size:14px; }
  .technology-catalog .featured-grid .product-view-button { min-height:32px; font-size:10px; }
}

/* Ficha móvil: fotografía más visible, controles compactos, texto ligeramente más legible. */
@media(max-width:760px) and (hover:none) and (pointer:coarse) {
  .technology-catalog .product-dialog {
    width:calc(100vw - 16px) !important;
    max-width:680px;
    max-height:calc(100dvh - 12px) !important;
    border-radius:17px;
  }
  .technology-catalog .product-dialog .dialog-layout { grid-template-columns:minmax(0,1fr) !important; }
  .technology-catalog .product-dialog #dialog-image,
  .technology-catalog .product-dialog .dialog-image {
    width:100%;
    height:clamp(230px,32dvh,290px) !important;
    min-height:0 !important;
    max-height:290px !important;
    padding:6px !important;
    gap:5px !important;
  }
  .technology-catalog .product-dialog #dialog-image .dialog-gallery-main {
    display:grid;
    place-items:center;
    width:100%;
    min-height:0 !important;
    height:calc(100% - 44px);
    flex:1 1 auto;
  }
  .technology-catalog .product-dialog #dialog-image:not(:has(.dialog-gallery-thumbs)) .dialog-gallery-main { height:100%; }
  .technology-catalog .product-dialog .dialog-image-zoom {
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    padding:0;
    border:0;
    border-radius:9px;
    background:transparent;
    cursor:zoom-in;
    -webkit-tap-highlight-color:transparent;
  }
  .technology-catalog .product-dialog .dialog-image-zoom:focus-visible { outline:3px solid #536de2; outline-offset:2px; }
  .technology-catalog .product-dialog #dialog-image .dialog-gallery-main .dialog-main-image {
    display:block;
    width:100%;
    height:100%;
    max-height:none !important;
    padding:0 !important;
    object-fit:contain;
    mix-blend-mode:multiply;
  }
  html[data-theme="dark"] .technology-catalog .product-dialog #dialog-image .dialog-main-image { mix-blend-mode:normal; }
  .technology-catalog .product-dialog #dialog-image .dialog-gallery-thumbs {
    display:flex;
    flex:0 0 39px;
    height:39px;
    min-height:0;
    justify-content:center;
    gap:6px;
    padding:0;
  }
  .technology-catalog .product-dialog #dialog-image .dialog-gallery-thumb {
    flex:0 0 39px;
    width:39px;
    min-width:39px;
    max-width:39px;
    height:39px;
    padding:2px;
  }
  .technology-catalog .product-dialog .dialog-detail { padding:12px 14px 17px !important; }
  .technology-catalog .product-dialog .dialog-detail h2 {
    margin:2px 0 9px !important;
    font-size:clamp(19px,5vw,21px) !important;
    line-height:1.2;
  }
  .technology-catalog .product-dialog .dialog-detail h3 { margin:0 0 8px !important; font-size:15.5px !important; line-height:1.25; }
  .technology-catalog .product-dialog .product-category { margin-bottom:3px; font-size:10.5px !important; letter-spacing:.07em; }
  .technology-catalog .product-dialog #variant-options-area .variant-option-group:not(:has(.color-choice-list)) {
    padding:9px 10px !important;
    margin:7px 0 0 !important;
    border-radius:12px;
  }
  .technology-catalog .product-dialog #variant-options-area .variant-option-group h3 { margin-bottom:7px !important; font-size:14.5px !important; }
  .technology-catalog .product-dialog #variant-options-area .variant-option-group h3:before { width:3px; height:14px; }
  .technology-catalog .product-dialog #variant-options-area .variant-choice-list { flex-wrap:wrap; gap:6px !important; }
  .technology-catalog .product-dialog #variant-options-area .variant-choice:not(.color-choice) {
    min-height:37px !important;
    padding:7px 10px !important;
    border-radius:9px !important;
    font-size:13.5px !important;
    line-height:1.2;
  }
  .technology-catalog .product-dialog #variant-options-area .variant-option-group:has(.color-choice-list) > h3 { margin:0 0 7px !important; font-size:14.5px !important; }
  .technology-catalog .product-dialog #variant-options-area .color-choice-list { gap:6px 10px !important; }
  .technology-catalog .product-dialog #variant-options-area .variant-choice.color-choice { gap:5px !important; padding:2px 3px !important; }
  .technology-catalog .product-dialog #variant-options-area .variant-color-dot { width:35px !important; height:35px !important; }
  .technology-catalog .product-dialog #variant-options-area .variant-color-name { max-width:96px !important; font-size:11.5px !important; line-height:1.2; }
  .technology-catalog .product-dialog .variant-bottom-row { grid-template-columns:minmax(0,1fr) minmax(110px,.9fr); gap:7px; margin:8px 0; }
  .technology-catalog .product-dialog .variant-selected-summary { gap:6px; margin:5px 0; font-size:11.5px; }
  .technology-catalog .product-dialog .variant-selected-summary strong { font-size:13.5px; line-height:1.25; }
  .technology-catalog .product-dialog .variant-status-badge { padding:5px 7px; font-size:10.5px; }
  .technology-catalog .product-dialog .variant-price-box { min-width:0; padding:7px !important; border-radius:11px; }
  .technology-catalog .product-dialog .variant-price-box > span { font-size:10px; line-height:1.25; }
  .technology-catalog .product-dialog .variant-price-box strong { font-size:19px !important; line-height:1.2; overflow-wrap:anywhere; }
  .technology-catalog .product-dialog .variant-price-box small { font-size:10.5px; }
  .technology-catalog .product-dialog .dialog-product-description {
    margin-top:14px !important;
    font-size:15px !important;
    line-height:1.55;
  }
}
@media(max-width:380px) and (hover:none) and (pointer:coarse) {
  .technology-catalog .product-dialog .variant-bottom-row { grid-template-columns:minmax(0,1fr); }
}

/* La ampliación conserva el foco de teclado y el cierre modal nativo. */
.dialog-image-zoom {
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  cursor:zoom-in;
  -webkit-tap-highlight-color:transparent;
}
.dialog-image-zoom:focus-visible { outline:3px solid #536de2; outline-offset:2px; }
.product-image-lightbox {
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  overflow:hidden;
  color:#fff;
  background:rgba(4,8,18,.97);
}
.product-image-lightbox::backdrop { background:rgba(4,8,18,.97); }
.product-image-lightbox[open] { display:flex; align-items:center; justify-content:center; }
.product-image-lightbox-photo {
  display:block;
  max-width:calc(100vw - 24px);
  max-height:calc(100dvh - 82px);
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  user-select:none;
}
.product-image-lightbox-close {
  position:fixed;
  z-index:1;
  top:max(12px,env(safe-area-inset-top,0px));
  right:max(12px,env(safe-area-inset-right,0px));
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  color:#fff;
  background:rgba(28,35,51,.92);
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.product-image-lightbox-close:focus-visible { outline:3px solid #e8c47b; outline-offset:3px; }


/* JB TECH · última pasada móvil: quitar badge redundante y alinear las tarjetas por estructura. */
.technology-catalog .featured-grid .featured-badge { display:none !important; }
@media (max-width:760px) {
  .technology-catalog .featured-section { padding:11px !important; }
  .technology-catalog .featured-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows:1fr !important;
    align-items:stretch !important;
    gap:8px !important;
  }
  .technology-catalog .featured-grid .product-card {
    display:flex !important;
    flex-direction:column !important;
    height:100% !important;
    min-height:0 !important;
    align-self:stretch !important;
  }
  .technology-catalog .featured-grid .product-image {
    height:clamp(92px,24vw,112px) !important;
    min-height:0 !important;
    flex:0 0 auto !important;
  }
  .technology-catalog .featured-grid .product-card-content {
    display:flex !important;
    flex:1 1 auto !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    min-height:0 !important;
    padding:8px 7px 9px !important;
    gap:4px !important;
  }
  .technology-catalog .featured-grid .product-category {
    margin:0 !important;
    font-size:9px !important;
    line-height:1.25 !important;
  }
  .technology-catalog .featured-grid .product-card h3 {
    min-height:2.5em !important;
    margin:0 !important;
    font-size:clamp(12.6px,3.52vw,15.2px) !important;
    line-height:1.25 !important;
    overflow-wrap:anywhere;
  }
  .technology-catalog .featured-grid .product-card-capacity {
    display:flex;
    align-items:center;
    min-height:22px;
    margin:0 !important;
    padding:4px 6px;
    font-size:9.45px !important;
    line-height:1.2;
  }
  .technology-catalog .featured-grid .product-card-colors {
    min-height:18px !important;
    margin:0 !important;
  }
  .technology-catalog .featured-grid .product-card-colors-label,
  .technology-catalog .featured-grid .product-card-color-name { display:none !important; }
  .technology-catalog .featured-grid .product-card-color-list {
    display:flex;
    min-height:16px;
    align-items:center;
    gap:4px;
  }
  .technology-catalog .featured-grid .product-card-color-swatch { width:10px; height:10px; }
  .technology-catalog .featured-grid .product-price-label {
    min-height:11px;
    margin:0 !important;
    font-size:9px !important;
    line-height:1.2;
  }
  .technology-catalog .featured-grid .product-price {
    min-height:1.2em;
    margin:0 !important;
    font-size:clamp(15.75px,4.1vw,19px) !important;
    line-height:1.2 !important;
  }
  .technology-catalog .featured-grid .product-price-secondary {
    min-height:1.2em;
    font-size:9.5px !important;
    line-height:1.2;
  }
  .technology-catalog .featured-grid .product-actions {
    display:flex !important;
    width:100% !important;
    margin-top:auto !important;
    padding-top:5px !important;
  }
  .technology-catalog .featured-grid .product-view-button {
    display:flex !important;
    width:100% !important;
    min-height:35px !important;
    align-items:center;
    justify-content:center;
    padding:7px 5px !important;
    font-size:11px !important;
    line-height:1.2;
    white-space:normal;
  }
}
@media(max-width:380px) {
  .technology-catalog .featured-grid .product-image { height:86px !important; }
  .technology-catalog .featured-grid .product-card h3 { font-size:12.6px !important; }
  .technology-catalog .featured-grid .product-price { font-size:15.75px !important; }
  .technology-catalog .featured-grid .product-view-button { min-height:33px !important; font-size:10.5px !important; }
}

/* Ficha en teléfono: ampliar la galería sin sacrificar los controles de variante. */
@media(max-width:760px) and (hover:none) and (pointer:coarse) {
  .technology-catalog .product-dialog #dialog-image,
  .technology-catalog .product-dialog .dialog-image {
    height:clamp(300px,40dvh,380px) !important;
    min-height:0 !important;
    max-height:380px !important;
  }
  .technology-catalog .product-dialog #dialog-image .dialog-gallery-main {
    height:calc(100% - 44px) !important;
  }
  .technology-catalog .product-dialog #dialog-image:not(:has(.dialog-gallery-thumbs)) .dialog-gallery-main {
    height:100% !important;
  }
}


/* Ficha móvil: aprovechar mejor el alto disponible y conservar margen al final del contenido. */
@media(max-width:760px) and (hover:none) and (pointer:coarse) {
  .technology-catalog .product-dialog {
    max-height:calc(100dvh - 8px) !important;
    padding-bottom:max(18px,env(safe-area-inset-bottom,0px)) !important;
    overscroll-behavior-y:contain;
  }
  .technology-catalog .product-dialog .dialog-detail {
    padding-bottom:24px !important;
  }
}

/* Pantalla completa con navegación visible y gestos táctiles. */
.product-image-lightbox-photo {
  max-width:calc(100vw - 18px);
  max-height:calc(100dvh - 72px);
  touch-action:pan-y pinch-zoom;
}
.product-image-lightbox-nav {
  position:fixed;
  z-index:2;
  top:50%;
  display:grid;
  place-items:center;
  width:48px;
  height:64px;
  padding:0;
  border:1px solid rgba(255,255,255,.26);
  border-radius:13px;
  color:#fff;
  background:rgba(28,35,51,.72);
  font-family:Arial,sans-serif;
  font-size:48px;
  line-height:1;
  cursor:pointer;
  transform:translateY(-50%);
  -webkit-tap-highlight-color:transparent;
}
.product-image-lightbox-prev { left:max(10px,env(safe-area-inset-left,0px)); }
.product-image-lightbox-next { right:max(10px,env(safe-area-inset-right,0px)); }
.product-image-lightbox-nav[hidden],
.product-image-lightbox-counter[hidden] { display:none !important; }
.product-image-lightbox-nav:focus-visible {
  outline:3px solid #e8c47b;
  outline-offset:3px;
}
.product-image-lightbox-counter {
  position:fixed;
  z-index:2;
  left:50%;
  bottom:max(14px,env(safe-area-inset-bottom,0px));
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  color:#fff;
  background:rgba(28,35,51,.82);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  transform:translateX(-50%);
}
@media(max-width:480px) {
  .product-image-lightbox-nav { width:42px; height:56px; font-size:42px; }
}


/* JB TECH · edición premium para la sección de selección insignia. */
body.technology-catalog .featured-section {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(164,139,83,.42);
  border-radius:23px;
  background:
    radial-gradient(ellipse at 5% 0%,rgba(255,255,255,.98),transparent 48%),
    linear-gradient(135deg,rgba(246,248,255,.98),rgba(237,239,252,.98) 55%,rgba(250,245,235,.92));
  box-shadow:0 16px 36px rgba(31,43,77,.08),inset 0 0 0 5px rgba(255,255,255,.58);
}
body.technology-catalog .featured-section:before {
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#c6a66a,#f1dfad,#6c71e9,#bba1e8,#c6a66a);
}
body.technology-catalog .featured-exclusive-badge {
  border:1px solid rgba(176,145,76,.62);
  background:linear-gradient(135deg,#fff7df,#ead7a7);
  color:#574426;
  box-shadow:0 3px 0 rgba(138,105,44,.1);
}
@media(max-width:760px) {
  body.technology-catalog .featured-section {
    padding:12px !important;
    border-radius:18px;
  }
  body.technology-catalog .featured-section-heading { margin-bottom:12px !important; }
  body.technology-catalog .featured-section-heading .eyebrow {
    font-size:10px !important;
    letter-spacing:.11em;
  }
  body.technology-catalog .featured-section-heading h2 {
    font-size:clamp(22px,5.8vw,27px) !important;
    letter-spacing:-.035em;
  }
  body.technology-catalog .featured-section-heading .section-subtitle {
    max-width:34em;
    font-size:12.2px !important;
    line-height:1.45;
  }
  body.technology-catalog .featured-grid { gap:9px !important; }
  body.technology-catalog .featured-grid .product-card {
    border:1px solid rgba(151,132,87,.56) !important;
    border-radius:14px !important;
    background:linear-gradient(160deg,#fff 0%,#fafaff 62%,#f4f1ff 100%) !important;
    box-shadow:0 5px 14px rgba(34,47,87,.09),inset 0 0 0 2px rgba(255,255,255,.85) !important;
  }
  body.technology-catalog .featured-grid .product-image {
    background:linear-gradient(145deg,#f8f9ff,#e9edf8) !important;
  }
  body.technology-catalog .featured-grid .product-image img {
    padding:5px !important;
    object-fit:contain !important;
  }
  body.technology-catalog .featured-grid .product-card-content {
    padding:9px 8px 10px !important;
  }
  body.technology-catalog .featured-grid .product-card h3 {
    font-size:clamp(13px,3.65vw,15px) !important;
    letter-spacing:-.025em;
  }
  body.technology-catalog .featured-grid .product-price {
    font-size:clamp(16px,4.2vw,19px) !important;
    letter-spacing:-.035em;
  }
  body.technology-catalog .featured-grid .product-view-button {
    border-radius:10px !important;
    box-shadow:0 3px 0 rgba(36,51,133,.85) !important;
  }
}
@media(max-width:380px) {
  body.technology-catalog .featured-section { padding:10px !important; }
  body.technology-catalog .featured-grid { gap:7px !important; }
  body.technology-catalog .featured-grid .product-card-content { padding:8px 6px 9px !important; }
}


/* JB SIGNATURE · borde orbital y destello diagonal visible, sin lavar el contenido. */
body.technology-catalog .featured-section {
  isolation:isolate;
  overflow:hidden;
  --signature-ring-gold:#c4a15d;
  --signature-ring-violet:#7777ed;
  --signature-shine-duration:5200ms;
  --signature-shine-angle:45deg;
}
html[data-theme="light"] body.technology-catalog .featured-section {
  --signature-ring-gold:#c4a15d;
  --signature-ring-violet:#7777ed;
  background:
    radial-gradient(ellipse at 8% 0%,rgba(255,255,255,.96),transparent 48%),
    linear-gradient(135deg,#f5f7ff 0%,#edf0fc 57%,#fbf5e9 100%) !important;
  border-color:rgba(164,139,83,.48) !important;
  color:#1b2946;
}
html[data-theme="dark"] body.technology-catalog .featured-section {
  --signature-ring-gold:#f1d58e;
  --signature-ring-violet:#999bff;
  background:
    radial-gradient(ellipse at 8% 0%,rgba(63,76,124,.34),transparent 50%),
    linear-gradient(135deg,#141e34 0%,#11192b 58%,#211c35 100%) !important;
  border-color:rgba(158,174,222,.48) !important;
  box-shadow:0 16px 36px rgba(0,0,0,.28),inset 0 0 0 4px rgba(155,170,220,.06) !important;
  color:#eff3ff;
}

/* Recorrido del degradado estrictamente limitado al marco exterior. */
body.technology-catalog .featured-section:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  height:auto;
  padding:2px;
  border-radius:inherit;
  box-sizing:border-box;
  background:conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--signature-ring-gold) 42deg,
    var(--signature-ring-violet) 92deg,
    rgba(135,139,255,.12) 142deg,
    transparent 186deg,
    var(--signature-ring-gold) 246deg,
    var(--signature-ring-violet) 302deg,
    transparent 360deg
  );
  pointer-events:none;
  animation:signature-border-pulse 3.6s ease-in-out infinite alternate;
  opacity:.9;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
@keyframes signature-border-pulse {
  from { opacity:.72; }
  to { opacity:1; }
}

/* La pasada cruza el panel completo como una línea estrecha, no como un velo blanco. */
body.technology-catalog .featured-section:after {
  content:"";
  position:absolute;
  top:-40%;
  left:-40%;
  width:180%;
  height:180%;
  z-index:8;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    transparent 48.2%,
    rgba(255,255,255,.02) 49.0%,
    rgba(255,255,255,.20) 49.65%,
    rgba(255,247,222,.46) 50%,
    rgba(255,255,255,.20) 50.35%,
    rgba(255,255,255,.02) 51.0%,
    transparent 51.8%
  );
  filter:none;
  transform-origin:center center;
  transform:rotate(var(--signature-shine-angle,45deg)) translate3d(-100%,0,0);
  will-change:auto;
  mix-blend-mode:normal;
}
html[data-theme="dark"] body.technology-catalog .featured-section:after {
  background:linear-gradient(
    90deg,
    transparent 48.2%,
    rgba(118,150,255,.05) 49.0%,
    rgba(153,175,255,.24) 49.65%,
    rgba(191,202,255,.50) 50%,
    rgba(240,207,139,.32) 50.35%,
    rgba(118,150,255,.05) 51.0%,
    transparent 51.8%
  );
  mix-blend-mode:normal;
}
body.technology-catalog .featured-section.signature-shine-active:after {
  animation:signature-diagonal-shine var(--signature-shine-duration,9000ms) linear both;
}
@keyframes signature-diagonal-shine {
  0% { opacity:0; transform:rotate(var(--signature-shine-angle,45deg)) translate3d(-100%,0,0); }
  10% { opacity:.35; }
  22% { opacity:.82; }
  78% { opacity:.72; }
  100% { opacity:0; transform:rotate(var(--signature-shine-angle,45deg)) translate3d(100%,0,0); }
}
@media(max-width:760px) {
  body.technology-catalog .featured-section { --signature-shine-duration:5800ms; }
  body.technology-catalog .featured-section.signature-shine-active:after {
    animation-duration:var(--signature-shine-duration,10000ms);
  }
}

/* Contenido en primer plano y contraste explícito para tema claro y oscuro. */
body.technology-catalog .featured-section > .featured-exclusive-badge,
body.technology-catalog .featured-section > .featured-section-heading,
body.technology-catalog .featured-section > .featured-grid,
body.technology-catalog .featured-section > #featured-count {
  position:relative;
  z-index:6 !important;
}
body.technology-catalog .featured-exclusive-badge {
  border-color:rgba(185,147,72,.7);
}
html[data-theme="light"] body.technology-catalog .featured-section-heading h2 { color:#192846 !important; }
html[data-theme="light"] body.technology-catalog .featured-section-heading .eyebrow { color:#536db4 !important; }
html[data-theme="light"] body.technology-catalog .featured-section-heading .section-subtitle { color:#5f6f8d !important; }
html[data-theme="dark"] body.technology-catalog .featured-section-heading h2 { color:#f1f4ff !important; }
html[data-theme="dark"] body.technology-catalog .featured-section-heading .eyebrow { color:#b8c5ff !important; }
html[data-theme="dark"] body.technology-catalog .featured-section-heading .section-subtitle { color:#c3cde5 !important; }
html[data-theme="dark"] body.technology-catalog .featured-grid .product-card {
  color:#edf2ff !important;
  border-color:rgba(144,158,207,.58) !important;
  background:linear-gradient(155deg,#1b2742 0%,#151f36 65%,#211e38 100%) !important;
  box-shadow:0 5px 16px rgba(0,0,0,.24),inset 0 0 0 1px rgba(188,199,238,.06) !important;
}
html[data-theme="dark"] body.technology-catalog .featured-grid .product-image {
  background:radial-gradient(ellipse at 50% 40%,rgba(137,143,199,.16),transparent 72%),linear-gradient(145deg,#202c46,#131d31) !important;
  border-bottom-color:#344361 !important;
}
html[data-theme="dark"] body.technology-catalog .featured-grid .product-card-content,
html[data-theme="dark"] body.technology-catalog .featured-grid .product-card h3 { color:#eff3ff !important; }
html[data-theme="dark"] body.technology-catalog .featured-grid .product-category { color:#afc1ff !important; }
html[data-theme="dark"] body.technology-catalog .featured-grid .product-card-capacity {
  color:#d9e4ff !important;
  border-color:#405174 !important;
  background:#202e4c !important;
}
html[data-theme="dark"] body.technology-catalog .featured-grid .product-price-label { color:#b9c5df !important; }
html[data-theme="dark"] body.technology-catalog .featured-grid .product-price { color:#c1ceff !important; }
html[data-theme="dark"] body.technology-catalog .featured-grid .product-price-secondary { color:#bdc9e1 !important; }

@media(prefers-reduced-motion:reduce) {
  body.technology-catalog .featured-section:before { animation:none !important; }
  body.technology-catalog .featured-section.signature-shine-active:after {
    animation:none !important;
    opacity:0 !important;
  }
}


/* Auditoría responsive · tablets en vertical (761–900 px). */
@media (min-width:761px) and (max-width:900px) {
  body.technology-catalog .catalog-section .section-heading {
    align-items:stretch;
    flex-direction:column;
    gap:16px;
  }
  body.technology-catalog .catalog-section .section-heading > div {
    min-width:0;
    width:100%;
  }
  body.technology-catalog .catalog-section .search-box,
  html[data-theme="light"] body.technology-catalog .catalog-section .search-box,
  html[data-theme="dark"] body.technology-catalog .catalog-section .search-box {
    width:min(100%,520px);
    max-width:100%;
    min-width:0;
    flex:0 1 auto;
    box-sizing:border-box;
  }
  body.technology-catalog #product-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }

  /* En tablet angosta el encabezado del dashboard ocupa dos filas, sin apretar el selector. */
  .dashboard-overview-heading {
    align-items:stretch;
    flex-direction:column;
    gap:12px;
  }
  .dashboard-overview-controls {
    align-items:stretch;
    flex-direction:column;
    gap:9px;
  }
  .dashboard-scope-control {
    width:100%;
    min-width:0;
    max-width:420px;
  }
  .dashboard-overview-controls .dashboard-updated {
    align-self:flex-start;
    white-space:normal;
  }
}


/* =========================================================
   JB MANAGER · CONTRASTE DEL TEMA CLARO EN VISTA DE PRODUCTO
   ========================================================= */
html[data-theme="light"] body.admin-body .admin-preview-eyebrow {
  color: #4358a7;
}

html[data-theme="light"] body.admin-body .admin-preview-image-count {
  color: #526480;
}

html[data-theme="light"] body.admin-body .admin-preview-photo-placeholder {
  color: #4b5e7b;
}

html[data-theme="light"] body.admin-body .admin-preview-publish-state.published,
html[data-theme="light"] body.admin-body .admin-preview-status.available {
  border-color: #96d2bd;
  color: #176b53;
  background: #e2f6ed;
}

html[data-theme="light"] body.admin-body .admin-preview-publish-state.draft,
html[data-theme="light"] body.admin-body .admin-preview-status.order {
  border-color: #e5c58d;
  color: #77500b;
  background: #fff3d9;
}

html[data-theme="light"] body.admin-body .admin-preview-status.unavailable {
  border-color: #efb6c0;
  color: #9e2c43;
  background: #fff0f2;
}

html[data-theme="light"] body.admin-body .admin-preview-color-dot {
  border-color: #c3ccdb;
}


/* JB TECH · Fotos de gama alta al mismo tamaño visual que el catálogo normal.
   La tarjeta conserva la imagen completa; solo ampliamos la caja de imagen en móvil. */
@media (max-width:760px) {
  body.technology-catalog .featured-grid .product-image {
    height: clamp(145px, 38vw, 170px) !important;
    min-height: 145px !important;
    flex: 0 0 auto !important;
  }
  body.technology-catalog .featured-grid .product-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 8px !important;
    object-fit: contain !important;
  }
}
@media (max-width:380px) {
  body.technology-catalog .featured-grid .product-image {
    height: 145px !important;
    min-height: 145px !important;
  }
}


/* JB TECH · TARJETAS EXCLUSIVAS: equilibrio de foto y datos en escritorio.
   Evita que las reglas heredadas conviertan la tarjeta exclusiva en una foto gigante. */
@media (hover: hover) and (pointer: fine) {
  body.technology-catalog #featured-grid.featured-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)) !important;
    align-items: stretch !important;
    gap: 18px !important;
  }

  body.technology-catalog #featured-grid.featured-grid > .product-card {
    display: grid !important;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr) !important;
    align-items: stretch !important;
    min-width: 0 !important;
    min-height: 300px !important;
    height: auto !important;
  }

  body.technology-catalog #featured-grid.featured-grid > .product-card > .product-image {
    grid-column: 1 !important;
    align-self: start !important;
    width: 100% !important;
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }

  body.technology-catalog #featured-grid.featured-grid > .product-card > .product-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 300px !important;
    padding: 12px !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  body.technology-catalog #featured-grid.featured-grid > .product-card > .product-card-content {
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 300px !important;
    box-sizing: border-box !important;
    padding: clamp(13px, 1.2vw, 20px) !important;
    gap: 7px !important;
  }

  body.technology-catalog #featured-grid.featured-grid .product-card h3 {
    font-size: clamp(16px, 1.25vw, 21px) !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
  }

  body.technology-catalog #featured-grid.featured-grid .product-price {
    font-size: clamp(19px, 1.6vw, 25px) !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
  }

  body.technology-catalog #featured-grid.featured-grid .product-actions {
    display: flex !important;
    width: 100% !important;
    margin-top: 8px !important;
    padding-top: 0 !important;
  }

  body.technology-catalog #featured-grid.featured-grid .product-view-button {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    white-space: normal !important;
  }

  body.technology-catalog #featured-grid.featured-grid .product-badge.featured-badge {
    display: inline-flex !important;
    align-items: center !important;
    width: max-content !important;
    max-width: calc(100% - 24px) !important;
    white-space: normal !important;
    border-color: rgba(210, 176, 104, .82) !important;
    color: #493719 !important;
    background: linear-gradient(135deg, #fff3cd, #e8cc8d) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: .045em !important;
  }
}


/* PRODUCT DETAIL OVERLAY · keep the technology catalog scroll position intact. */
body.technology-catalog #product-detail-page:not(.hidden) {
  position: fixed !important;
  inset: var(--catalog-detail-overlay-top, 76px) 0 0;
  z-index: 80;
  width: auto;
  max-width: none !important;
  height: auto;
  margin: 0 !important;
  padding: clamp(12px, 2.3vw, 30px) max(14px, 4vw) 32px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  background: #F5F8FF;
  color: #17213A;
}
body.technology-catalog #product-detail-page #dialog-content {
  width: min(1180px, 100%);
  min-width: 0;
  margin: 0 auto;
}
html[data-theme="dark"] body.technology-catalog #product-detail-page:not(.hidden) {
  background: #080D1B;
  color: #E9EDFF;
}
html[data-theme="light"] body.technology-catalog #product-detail-page:not(.hidden) {
  background: #F5F8FF;
  color: #17213A;
}
@media (max-width: 760px) {
  body.technology-catalog #product-detail-page:not(.hidden) {
    padding: 12px 10px max(20px, env(safe-area-inset-bottom, 0px));
  }
}


/* Desktop image-fit refinement: give product photos more of each card without cropping. */
/* Desktop only: use a balanced split and reduce inner whitespace around images.
   object-fit:contain keeps every product fully visible and avoids artificial cropping. */
@media (min-width: 1061px) and (hover: hover) and (pointer: fine) {
  body.technology-catalog #featured-grid.featured-grid > .product-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  body.technology-catalog #featured-grid.featured-grid > .product-card > .product-image {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.technology-catalog #featured-grid.featured-grid > .product-card > .product-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 5px !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
    object-position: center !important;
    image-rendering: auto !important;
    transform: none !important;
  }

  body.technology-catalog #product-grid > .product-card > .product-image img {
    padding: 9px !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
    object-position: center !important;
    image-rendering: auto !important;
  }
}


/* Product badges sit in the text area instead of covering catalog photos. */
body.technology-catalog .product-card-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin: 0 0 3px !important;
  padding: 0 !important;
}
body.technology-catalog .product-card-badges:empty {
  display: none !important;
}
body.technology-catalog .product-card-content .product-card-badges .product-badge {
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
body.technology-catalog .product-card-content .product-card-badges .featured-badge {
  border-color: rgba(210, 176, 104, .82) !important;
  color: #493719 !important;
  background: linear-gradient(135deg, #fff3cd, #e8cc8d) !important;
}
html[data-theme="dark"] body.technology-catalog .product-card-content .product-card-badges .featured-badge {
  border-color: #816b42 !important;
  color: #f1dfb5 !important;
  background: linear-gradient(110deg, rgba(37, 32, 25, .96), rgba(25, 30, 46, .96)) !important;
}


/* JB TECH category sections: organize the default catalog without removing category chips or card badges. */
body.technology-catalog #product-grid.product-grid.is-categorized {
  display: block !important;
  width: 100%;
  min-width: 0;
}
body.technology-catalog .catalog-category-section {
  width: 100%;
  min-width: 0;
  margin: 0;
}
body.technology-catalog .catalog-category-section + .catalog-category-section {
  margin-top: clamp(28px, 3.5vw, 42px);
  padding-top: clamp(20px, 2.5vw, 30px);
  border-top: 1px solid var(--catalog-category-divider, rgba(104, 126, 174, .28));
}
body.technology-catalog .catalog-category-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0 0 14px;
  padding: 0 2px 12px;
  border-bottom: 1px solid var(--catalog-category-divider, rgba(104, 126, 174, .24));
}
body.technology-catalog .catalog-category-heading-mark {
  display: block;
  flex: 0 0 4px;
  width: 4px;
  min-height: 34px;
  border-radius: 999px;
  background: linear-gradient(180deg, #16c9ef, #5b4bf0);
  box-shadow: 0 0 14px rgba(72, 107, 236, .16);
}
body.technology-catalog .catalog-category-heading-copy {
  flex: 1 1 auto;
  min-width: 0;
}
body.technology-catalog .catalog-category-eyebrow {
  margin: 0 0 3px;
  color: var(--catalog-filter-muted, #7787a7);
  font-size: 9px;
  font-weight: 850;
  line-height: 1.3;
  letter-spacing: .13em;
}
body.technology-catalog .catalog-category-heading h3 {
  margin: 0;
  color: var(--catalog-filter-title, #243658);
  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: -.025em;
}
body.technology-catalog .catalog-category-count {
  flex: 0 0 auto;
  max-width: 45%;
  padding: 6px 10px;
  border: 1px solid var(--catalog-category-count-border, rgba(93, 120, 186, .28));
  border-radius: 999px;
  color: var(--catalog-filter-muted, #65799d);
  background: var(--catalog-category-count-bg, rgba(255, 255, 255, .54));
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
}
body.technology-catalog .catalog-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
  width: 100%;
  min-width: 0;
}
html[data-theme="dark"] body.technology-catalog {
  --catalog-category-divider: rgba(136, 158, 206, .22);
  --catalog-category-count-border: rgba(118, 145, 209, .36);
  --catalog-category-count-bg: rgba(22, 34, 59, .7);
}
html[data-theme="light"] body.technology-catalog {
  --catalog-category-divider: rgba(98, 121, 174, .23);
  --catalog-category-count-border: rgba(93, 120, 186, .25);
  --catalog-category-count-bg: rgba(255, 255, 255, .72);
}
@media (min-width: 761px) and (max-width: 1200px) {
  body.technology-catalog .catalog-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}
@media (max-width: 760px) {
  body.technology-catalog .catalog-category-section + .catalog-category-section {
    margin-top: 26px;
    padding-top: 19px;
  }
  body.technology-catalog .catalog-category-heading {
    gap: 9px;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  body.technology-catalog .catalog-category-heading-mark {
    min-height: 29px;
  }
  body.technology-catalog .catalog-category-heading h3 {
    font-size: clamp(18px, 5.2vw, 23px);
  }
  body.technology-catalog .catalog-category-eyebrow {
    font-size: 8px;
  }
  body.technology-catalog .catalog-category-count {
    padding: 5px 8px;
    font-size: 10px;
  }
  body.technology-catalog .catalog-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}
@media (max-width: 350px) {
  body.technology-catalog .catalog-category-grid {
    gap: 7px;
  }
  body.technology-catalog .catalog-category-count {
    max-width: 42%;
    font-size: 9px;
  }
}


/* JB Manager · remember-session controls */
body.admin-body .login-remember-option {
  display: flex !important;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  box-sizing: border-box;
  margin: 2px 0 5px;
  padding: 12px 13px;
  border: 1px solid var(--admin-border, #34415f);
  border-radius: 13px;
  background: rgba(112, 130, 174, .07);
  color: var(--admin-text, inherit);
  cursor: pointer;
}
body.admin-body .login-remember-option:focus-within {
  outline: 2px solid rgba(114, 134, 243, .72);
  outline-offset: 2px;
}
body.admin-body .login-remember-option input[type="checkbox"] {
  flex: 0 0 18px !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  margin: 3px 0 0 !important;
  padding: 0 !important;
  accent-color: #7286f3;
}
body.admin-body .login-remember-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
body.admin-body .login-remember-copy strong {
  color: var(--admin-text, #eaf0ff);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}
body.admin-body .login-remember-copy small {
  display: block;
  color: var(--admin-muted, #9aa9c7);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}
body.admin-body .admin-sidebar-remember {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 8px 12px;
  border: 1px solid rgba(201, 171, 103, .34);
  border-radius: 12px;
  color: var(--admin-text, #dce5ff);
  background: rgba(190, 157, 91, .09);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
body.admin-body .admin-sidebar-remember > span:first-child {
  display: inline-grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: #d9b56c;
  background: rgba(217, 181, 108, .11);
  font-size: 18px;
}
body.admin-body .admin-sidebar-remember[aria-pressed="true"] {
  border-color: rgba(45, 212, 191, .5);
  background: rgba(45, 212, 191, .08);
}
body.admin-body .admin-sidebar-remember[aria-pressed="true"] > span:first-child {
  color: #2dd4bf;
  background: rgba(45, 212, 191, .12);
}
body.admin-body .admin-sidebar-remember:hover:not(:disabled) {
  border-color: rgba(217, 181, 108, .65);
  background: rgba(190, 157, 91, .15);
}
body.admin-body .admin-sidebar-remember:focus-visible {
  outline: 2px solid #7188ef;
  outline-offset: 2px;
}

@media (max-width: 420px) {
  body.admin-body .login-remember-option { padding: 10px; }
  body.admin-body .login-remember-copy small { font-size: 10.5px; }
}