/* ==========================================================
   Helados Reysan — CSS base 6B-MEDIA-STYLE-01
   Paleta:
     --reysan-pink:       #EF5A86  (rosa pastel)
     --reysan-pink-dark:  #CC446E  (rosa oscuro — principal)
     --reysan-pink-light: #E298B0  (rosa claro)
     --reysan-bg:         #F7F8E4  (beige fondo)
     --reysan-brown:      #4D2003  (café texto)
   ========================================================== */

:root {
  --reysan-pink:        #EF5A86;
  --reysan-pink-dark:   #CC446E;
  --reysan-pink-light:  #E298B0;
  --reysan-bg:          #F7F8E4;
  --reysan-brown:       #4D2003;
  --reysan-pink-hover:  #a83458;
  --reysan-pink-subtle: #fce8ef;
  --reysan-gold:        #FEA621;
  --reysan-gray:        #e0d5d8;
  --reysan-gray-dark:   #7a6570;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--reysan-brown);
  background: var(--reysan-bg);
  text-transform: uppercase;
}

a { color: var(--reysan-pink-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 1rem; }
h2 { font-size: 1.2rem; font-weight: 600; margin: 1.25rem 0 0.75rem; color: var(--reysan-brown); }
p  { margin: 0 0 0.75rem; }

/* --- Layout --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* --- Site Header --- */
.site-header {
  background: var(--reysan-pink-dark);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.7rem 1.25rem;
}

.nav-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  color: #ffffff;
  white-space: nowrap;
  /* deja espacio a la izquierda para el logo absolutamente posicionado */
  margin-left: calc(36px + 0.75rem);
}
.nav-brand:hover { text-decoration: none; opacity: 0.9; }

.nav-brand__text {
  display: inline-block;
  text-align: center;
}

/* --- Nav brand group (toggle + logo) --- */
.nav-brand-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* --- Catalog mode toggle (iOS-style) --- */
.catalog-mode-toggle__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: rgba(255,255,255,0.7);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}
.catalog-mode-toggle__pill:hover { color: #ffffff; text-decoration: none; }
.catalog-mode-toggle__pill--on  { color: #ffffff; }

.catalog-mode-toggle__track {
  display: inline-block;
  position: relative;
  width: 32px;
  height: 18px;
  background: rgba(255,255,255,0.28);
  border-radius: 9px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.catalog-mode-toggle__pill--on .catalog-mode-toggle__track {
  background: var(--reysan-gold);
}
.catalog-mode-toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-radius: 50%;
  transition: left 0.2s;
}
.catalog-mode-toggle__pill--on .catalog-mode-toggle__knob { left: 16px; }

.nav-brand__logo {
  position: absolute;
  right: calc(100% + 0.45rem);
  top: 50%;
  transform: translateY(-50%);
  height: 36px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* --- Nav toggle (checkbox trick — mobile burger) --- */
.nav-toggle-input { display: none; }

.nav-toggle-label {
  display: none;
  cursor: pointer;
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  user-select: none;
  align-items: center;
}
.nav-toggle-label:hover { background: rgba(0,0,0,0.15); }

/* --- Nav links --- */
.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li { display: flex; align-items: center; }

.nav-links a {
  color: #ffffff;
  font-size: 0.88rem;
  padding: 0.25rem 0.45rem;
  border-radius: 4px;
  white-space: nowrap;
}
.nav-links a:hover { background: rgba(0,0,0,0.15); text-decoration: none; }

.nav-links .nav-admin a {
  color: rgba(255,255,255,0.85);
  font-size: 0.83rem;
}

.nav-logout-form { display: inline; }
.nav-logout-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.45);
  color: #ffffff;
  font-size: 0.88rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.nav-logout-btn:hover { background: rgba(0,0,0,0.15); }

/* --- Nav profile dropdown --- */
.nav-profile-menu { position: relative; }

.nav-profile-details { position: relative; display: inline-block; }

.nav-profile-summary {
  color: #ffffff;
  font-size: 0.88rem;
  padding: 0.25rem 0.45rem;
  border-radius: 4px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  user-select: none;
}
.nav-profile-summary::-webkit-details-marker,
.nav-profile-summary::marker { display: none; content: ''; }
.nav-profile-summary:hover { background: rgba(0,0,0,0.15); }

.nav-profile-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--reysan-pink-dark);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  list-style: none;
  padding: 0.35rem 0;
  margin: 0;
  min-width: 175px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
  z-index: 200;
}
.nav-profile-dropdown li a {
  display: block;
  color: #ffffff;
  padding: 0.42rem 1rem;
  font-size: 0.88rem;
  white-space: nowrap;
  text-decoration: none;
}
.nav-profile-dropdown li a:hover {
  background: rgba(0,0,0,0.18);
  text-decoration: none;
}

/* --- Admin view mode toggle (inside Perfil dropdown) --- */
.nav-profile-dropdown__toggle-row {
  padding: 0.35rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 0.2rem;
}
.admin-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255,255,255,0.65);
  font-size: 0.8rem;
  text-decoration: none;
  cursor: pointer;
}
.admin-view-toggle--admin { color: #ffffff; }
.admin-view-toggle:hover { color: #ffffff; text-decoration: none; }
.admin-view-toggle__track {
  position: relative;
  width: 32px;
  height: 18px;
  background: rgba(255,255,255,0.25);
  border-radius: 9px;
  flex-shrink: 0;
  transition: background 0.2s;
}
.admin-view-toggle--admin .admin-view-toggle__track { background: var(--reysan-gold); }
.admin-view-toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-radius: 50%;
  transition: left 0.2s;
}
.admin-view-toggle--admin .admin-view-toggle__knob { left: 16px; }

/* --- Nav admin dropdown summary --- */
.nav-admin-summary {
  color: rgba(255,255,255,0.85);
  font-size: 0.83rem;
  font-style: italic;
  padding: 0.3rem 0.75rem;
  border-radius: 4px;
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.nav-admin-summary::-webkit-details-marker,
.nav-admin-summary::marker { display: none; content: ''; }
.nav-admin-summary:hover { background: rgba(0,0,0,0.15); }

/* --- Nav cart icon link --- */
.nav-cart-link {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding: 0.25rem 0.5rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

/* --- Main Content --- */
main.container {
  padding-top: 1.75rem;
  padding-bottom: 3rem;
  min-height: 60vh;
}

/* --- Messages --- */
.messages { margin: 1rem 0 0; }

.message {
  padding: 0.7rem 1rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  font-size: 0.93rem;
  border: 1px solid transparent;
}
.message.error   { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.message.success { background: #f0fdf4; border-color: #86efac; color: #166534; }
.message.warning { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.message.info    { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }

/* --- Tables --- */
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; margin-bottom: 1rem; }
th, td { padding: 0.6rem 0.9rem; border: 1px solid #e0e0e0; text-align: left; }
th { background: var(--reysan-pink-subtle); font-weight: 600; color: var(--reysan-pink-hover); }
tfoot th { background: var(--reysan-bg); }
tr:nth-child(even) td { background: #fdfdfd; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Buttons --- */
.btn,
button[type="submit"],
input[type="submit"] {
  display: inline-block;
  background: var(--reysan-pink-dark);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 0.55rem 1.3rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: background 0.15s;
}
.btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--reysan-pink-hover);
  color: #ffffff;
  text-decoration: none;
}

.btn-secondary {
  background: #ffffff;
  color: var(--reysan-pink-dark);
  border: 1.5px solid var(--reysan-pink-dark);
}
.btn-secondary:hover { background: var(--reysan-pink-subtle); color: var(--reysan-pink-dark); }

.btn-danger { background: #dc2626; }
.btn-danger:hover { background: #b91c1c; }

.btn-success { background: #16a34a; }
.btn-success:hover { background: #15803d; color: #ffffff; text-decoration: none; }

.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.82rem; }

/* --- Forms --- */
label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
  color: var(--reysan-brown);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="file"],
select,
textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d0d0d0;
  border-radius: 5px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #ffffff;
  color: var(--reysan-brown);
  transition: border-color 0.15s;
}
input[type="number"] { max-width: 80px; }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--reysan-pink-dark);
  box-shadow: 0 0 0 2px rgba(204,68,110,0.15);
}

/* --- Uppercase exclusions: campos de entrada --- */
input,
textarea,
select,
option {
  text-transform: none;
}

/* --- Form page (login / registro) --- */
.form-page {
  max-width: 420px;
  margin: 2rem auto;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 2rem 2rem 1.5rem;
}
.form-page h1 { text-align: center; margin-bottom: 1.5rem; }

/* --- Min-order notice --- */
.min-order-notice {
  margin: 1rem 0;
  padding: 0.7rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  border: 1px solid transparent;
}
.min-order-notice.ok   { background: #f0fdf4; border-color: #86efac; color: #166534; }
.min-order-notice.warn { background: #fffbeb; border-color: #fcd34d; color: #92400e; }

/* --- Flavor grid — tarjetas tipo etiqueta vertical --- */
.flavor-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.flavor-card {
  display: contents;
}

.flavor-card__item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  position: relative;
}

.flavor-card__link {
  display: block;
  aspect-ratio: 300 / 486;
  background: #ffffff;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid #e0d5d8;
  transition: box-shadow 0.18s, transform 0.18s;
  text-decoration: none;
  line-height: 0;
}
.flavor-card__link:hover {
  box-shadow: 0 4px 16px rgba(204,68,110,0.2);
  transform: translateY(-2px);
  text-decoration: none;
}

.flavor-card__admin-tools {
  text-align: center;
}

.flavor-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* --- Catalog image mode modifiers --- */
.flavor-card__img--label,
.variant-detail__img--label {
  object-fit: contain;
  object-position: center center;
}

.flavor-card__img--portrait,
.variant-detail__img--portrait {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.flavor-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--reysan-pink-subtle);
  padding: 1rem;
}
.flavor-card__placeholder-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--reysan-pink-dark);
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
}

/* --- Variant detail --- */
.variant-detail {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
  margin-top: 1rem;
}

.variant-detail__image-wrap {
  flex: 0 0 auto;
  width: 260px;
  aspect-ratio: 300 / 486;
  background: #ffffff;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid #e0d5d8;
}

.variant-detail__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.variant-detail__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--reysan-pink-subtle);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--reysan-pink-dark);
  text-align: center;
  padding: 1rem;
}

.variant-detail__info {
  flex: 1 1 auto;
}

.variant-detail__price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--reysan-pink-dark);
  margin: 0.5rem 0 0.75rem;
}

.variant-detail__form {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.variant-detail__qty-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4b5563;
}

.variant-detail__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.15rem;
}

.variant-detail__desc {
  margin-top: 1.25rem;
  color: var(--reysan-brown);
  font-size: 0.95rem;
  max-width: 480px;
  opacity: 0.85;
}

.variant-detail__admin-strip {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--reysan-gray);
}

/* --- Variant detail: image section with lateral nav --- */
.variant-detail__image-section {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}

.flavor-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 100%;
  background: var(--reysan-pink-subtle);
  color: var(--reysan-pink-dark);
  font-size: 2.2rem;
  font-weight: 300;
  line-height: 1;
  text-decoration: none;
  border: 1px solid #e0d5d8;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  user-select: none;
  flex-shrink: 0;
}
.flavor-nav:hover { background: var(--reysan-pink-light); color: #ffffff; text-decoration: none; }
.flavor-nav--disabled { opacity: 0.25; cursor: default; pointer-events: none; }

/* --- Quantity control --- */
.qty-control {
  display: flex;
  align-items: center;
  gap: 0;
}

.qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--reysan-pink-subtle);
  color: var(--reysan-pink-dark);
  border: 1px solid #d0d0d0;
  border-radius: 0;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  flex-shrink: 0;
}
.qty-btn:hover { background: var(--reysan-pink-light); color: #ffffff; }
.qty-btn--dec { border-radius: 5px 0 0 5px; }
.qty-btn--inc { border-radius: 0 5px 5px 0; }

.qty-input {
  width: 60px !important;
  max-width: 60px !important;
  text-align: center;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  height: 40px;
  padding: 0 !important;
}

/* --- Back to catalog button --- */
.btn-volver-catalogo {
  margin-top: 1.75rem;
  display: inline-block;
}

/* --- Cart actions --- */
.cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1.25rem;
}

/* --- Cart totals mobile (shown only on small screens) --- */
.cart-totals-mobile { display: none; }

.cart-totals-row {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0;
  font-size: 0.9rem;
  border-bottom: 1px solid #f0e8ea;
}
.cart-totals-row--total {
  font-weight: 700;
  font-size: 1rem;
  border-bottom: none;
  margin-top: 0.25rem;
  color: var(--reysan-pink-dark);
}

/* --- Promociones --- */
.cart-discount-row { color: var(--reysan-pink-dark); }
.promotion-line { font-style: italic; }
.promotion-summary {
  margin: 0.5rem 0;
  padding: 0.4rem 0.75rem;
  background: #fff0f4;
  border-left: 3px solid var(--reysan-pink-dark);
  border-radius: 4px;
  font-size: 0.88rem;
}
.promotion-badge {
  display: inline-block;
  background: var(--reysan-pink-dark);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.promotion-muted { color: #9e8a8e; font-size: 0.82rem; }

/* --- Badges --- */
.badge-disponible {
  display: inline-block;
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
}
.badge-no-disponible {
  display: inline-block;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
}

/* --- Product grid (legado — product_detail tabla) --- */
.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.product-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 1rem;
  flex: 1 1 200px;
  max-width: 260px;
  text-align: center;
}
.product-card img {
  width: 100%;
  max-width: 120px;
  height: auto;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

/* --- Home hero --- */
.home-hero {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 2.5rem 0 2rem;
}
.home-hero__content { flex: 1 1 auto; }
.home-hero__image   { flex: 0 0 auto; width: 300px; }
.home-hero h1 { font-size: 2.2rem; color: var(--reysan-pink-dark); margin-bottom: 0.5rem; }
.home-hero p  { font-size: 1.05rem; color: var(--reysan-brown); max-width: 440px; margin: 0 0 1.5rem; opacity: 0.85; }
.home-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* --- Home hero — banner ancho --- */
.home-hero--wide {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  margin-top: -1.75rem;
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}
.home-hero__banner {
  width: 100%;
  line-height: 0;
}
.home-hero__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.home-hero--wide .home-hero__content {
  padding: 1.75rem 1.25rem 1.5rem;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}
.home-hero--wide .home-actions { justify-content: center; }

/* --- Home sections (imagen + texto alternados) --- */
.home-section {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 2rem 0;
  border-top: 1px solid #e0d5d8;
}
.home-section--alt      { flex-direction: row-reverse; }
.home-section__image    { flex: 0 0 auto; width: 320px; }
.home-section__content  { flex: 1 1 auto; text-align: center; }
.home-section__content h2 { margin-top: 0; }
.home-section__content p  { max-width: 420px; margin: 0 auto 1.1rem; }

/* --- Home section: variante compacta --- */
.home-section--compact { padding: 1.25rem 0; }
.home-section__image--sm { width: 180px; }

/* --- Home articles (4 artículos principales alternados) --- */
.home-articles {
  margin-top: 0.5rem;
  border-top: 1px solid #e0d5d8;
}
.home-article {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 2.75rem 0;
  border-bottom: 1px solid #e0d5d8;
}
.home-article--reverse { flex-direction: row-reverse; }
.home-article__image {
  flex: 0 0 auto;
  width: 300px;
}
.home-article__content { flex: 1 1 auto; text-align: center; }
.home-article__content h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-top: 0;
  color: var(--reysan-pink-dark);
}
.home-article__content p {
  font-size: 1rem;
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.65;
}

/* --- Home feature grid (4 tarjetas) --- */
.home-feature-section {
  border-top: 1px solid #e0d5d8;
  padding: 2rem 0 1rem;
}
.home-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.home-feature-card {
  background: #ffffff;
  border: 1px solid #e0d5d8;
  border-radius: 10px;
  padding: 1.25rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.home-feature-card img {
  width: 100%;
  max-height: 150px;
  object-fit: contain;
  border-radius: 6px;
}
.home-feature-card h3 {
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--reysan-pink-dark);
  margin: 0;
}
.home-feature-card p {
  font-size: 0.85rem;
  color: var(--reysan-brown);
  opacity: 0.85;
  margin: 0;
  line-height: 1.45;
}

/* --- Reysan web images (base) --- */
.reysan-web-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* --- Admin tools (visibles solo para ADMIN/SUPERADMIN) --- */
.admin-tool-link {
  display: inline-block;
  font-size: 0.72rem;
  color: var(--reysan-pink-dark);
  border: 1px solid var(--reysan-pink-light);
  border-radius: 3px;
  padding: 0.1rem 0.45rem;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.15s, background 0.15s;
  line-height: 1.4;
}
.admin-tool-link:hover {
  opacity: 1;
  background: var(--reysan-pink-subtle);
  text-decoration: none;
}

/* --- Variant image form --- */
.variant-image-form__note {
  font-size: 0.9rem;
  color: var(--reysan-pink-dark);
  margin-bottom: 1rem;
  opacity: 0.85;
}
.variant-image-form__preview {
  margin: 1rem 0;
  text-align: center;
}
.variant-image-form__img {
  max-height: 200px;
  max-width: 100%;
  object-fit: contain;
  border: 1px solid #e0d5d8;
  border-radius: 4px;
  display: inline-block;
}
.variant-image-form__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

/* --- Portrait crop editor --- */
.crop-editor-page {
  max-width: 780px;
  margin: 0 auto;
}
.crop-editor__note {
  font-size: 0.92rem;
  color: var(--reysan-pink-dark);
  opacity: 0.85;
  margin-bottom: 1.5rem;
  text-transform: none;
}
.crop-editor__section-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.crop-editor__processed-preview {
  margin-bottom: 1.75rem;
}
.crop-editor__processed-img {
  display: block;
  max-height: 220px;
  width: auto;
  object-fit: contain;
  border: 1px solid #e0d5d8;
  border-radius: 4px;
}
.crop-editor__workspace {
  margin-bottom: 1.75rem;
}
.crop-editor__image-wrap {
  max-width: 620px;
  max-height: 520px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.crop-editor__image-wrap img {
  display: block;
  max-width: 100%;
}
.crop-editor__controls {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.crop-editor__no-image {
  color: #888;
  font-style: italic;
  margin-bottom: 1.5rem;
}
.crop-editor__upload-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e0d5d8;
}
.crop-editor__footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e0d5d8;
}

/* --- Portrait premium frame --- */
/*
  Estructura del marco:
    borde exterior  → 1.5px negro sólido (border)
    borde interior  → 2px dorado inset (box-shadow)
    glow dorado     → sombra inset difusa muy sutil (enriquece el tono plano)
*/
.portrait-frame {
  border: 1.5px solid #0f0f0f;
  box-shadow:
    inset 0 0 0 2px #C49A2A,
    inset 0 0 6px rgba(196,154,42,0.14);
}

/* Hover: preserva el marco dorado + añade el lift rosado */
.flavor-card__link.portrait-frame:hover {
  box-shadow:
    inset 0 0 0 2px #C49A2A,
    inset 0 0 6px rgba(196,154,42,0.14),
    0 4px 16px rgba(204,68,110,0.2);
}

/* --- Portada de la home (banner ancho, sin recorte) --- */
.home-cover {
  margin-top: -1.75rem;
  margin-left: -1.25rem;
  margin-right: -1.25rem;
  line-height: 0;
}
.home-cover__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* --- Home hero variante centrada --- */
.home-hero--centered {
  justify-content: center;
  padding: 2rem 0 1.25rem;
}
.home-hero--centered .home-hero__content {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
/* Centra el párrafo descriptivo dentro del bloque de contenido */
.home-hero--centered .home-hero__content p {
  margin-left: auto;
  margin-right: auto;
}
.home-hero--centered .home-actions { justify-content: center; }

/* --- Home flavor showcase — slider individual de sabores --- */
.home-flavor-showcase {
  padding: 1.5rem 0 1.25rem;
  border-top: 1px solid #e0d5d8;
  text-align: center;
}

.home-flavor-showcase__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

.home-flavor-slider {
  width: 220px;
  aspect-ratio: 300 / 486;
  background: #ffffff;
  border: 1px solid #e0d5d8;
  overflow: hidden;
  flex-shrink: 0;
}

.home-flavor-slide {
  display: none;
  width: 100%;
  height: 100%;
}
.home-flavor-slide.is-active { display: block; }

.home-flavor-slider__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.home-flavor-slider__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--reysan-pink-dark);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  transition: background 0.15s;
  user-select: none;
}
.home-flavor-slider__btn:hover { background: var(--reysan-pink-hover); }

.home-flavor-slider__label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--reysan-pink-dark);
  margin: 0.65rem 0 0.2rem;
  min-height: 1.4em;
}

.home-flavor-slider__counter {
  font-size: 0.78rem;
  color: #999;
  margin: 0;
  letter-spacing: 0.04em;
}

/* --- Site Footer --- */
.site-footer {
  text-align: center;
  padding: 1.25rem 1rem;
  font-size: 0.8rem;
  color: #888;
  border-top: 1px solid #e0d5d8;
  margin-top: 2rem;
}

/* --- Responsive --- */

/* Tablet: 3 columnas catálogo, 2 columnas features */
@media (max-width: 860px) {
  .flavor-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .home-hero__image   { width: 240px; }
  .home-section__image { width: 260px; }
  .home-section__image--sm { width: 150px; }
  .home-article { gap: 2rem; }
  .home-article__image { width: 220px; }
}

/* Landscape (móvil/tablet horizontal): 5 columnas, gap reducido */
@media (max-width: 900px) and (orientation: landscape) {
  .flavor-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.65rem;
  }
}

@media (max-width: 600px) {
  /* Nav: brand + burger on same row, links collapse below */
  .nav-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    gap: 0;
  }

  .nav-brand-group { flex: 1; }

  .catalog-mode-toggle__lbl { display: none; }

  .nav-toggle-label {
    display: flex;
    align-items: center;
  }

  .nav-links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    flex-wrap: nowrap;
    padding: 0.35rem 0 0.5rem;
  }

  .nav-toggle-input:checked ~ .nav-links {
    display: flex;
  }

  .nav-links a,
  .nav-logout-btn {
    font-size: 0.95rem;
    padding: 0.4rem 0.5rem;
    width: 100%;
    display: block;
    text-align: left;
  }

  .nav-links li { width: 100%; }

  h1 { font-size: 1.3rem; }

  .form-page { padding: 1.25rem 1rem; margin: 1rem auto; }

  th, td { padding: 0.4rem 0.6rem; }
  table  { font-size: 0.83rem; }

  /* Home hero: columna, imagen arriba */
  .home-hero {
    flex-direction: column-reverse;
    gap: 1.25rem;
    padding: 1.5rem 0 1rem;
    text-align: center;
  }
  .home-hero__image { width: 100%; max-width: 260px; margin: 0 auto; }
  .home-hero h1 { font-size: 1.5rem; }
  .home-hero p  { max-width: 100%; margin-bottom: 1.1rem; }
  .home-actions { justify-content: center; }

  /* Hero wide: imagen full-width en móvil */
  .home-hero--wide {
    flex-direction: column;
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 0;
    gap: 0;
  }
  .home-hero--wide .home-hero__content {
    padding: 1.25rem 1rem 1rem;
    text-align: center;
  }

  /* Portada: márgenes negativos ajustados al padding del container móvil */
  .home-cover {
    margin-left: -1rem;
    margin-right: -1rem;
  }

  /* Flavor showcase: slider más pequeño en móvil */
  .home-flavor-slider { width: 170px; }
  .home-flavor-slider__btn { width: 38px; height: 38px; font-size: 1.6rem; }

  /* Nav brand: ajuste de margen izquierdo para logo absoluto en móvil */
  .nav-brand { margin-left: calc(32px + 0.6rem); }

  /* Profile dropdown: inline en móvil */
  .nav-profile-dropdown {
    position: static;
    box-shadow: none;
    border: none;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding: 0.2rem 0 0.2rem 0.75rem;
    background: transparent;
    min-width: auto;
    margin-top: 0.1rem;
    border-radius: 0;
  }
  .nav-profile-dropdown li a {
    padding: 0.35rem 0.5rem;
    font-size: 0.92rem;
  }
  .nav-profile-summary {
    font-size: 0.95rem;
    padding: 0.4rem 0.5rem;
    display: block;
    width: 100%;
  }
  .nav-admin-summary {
    font-size: 0.95rem;
    padding: 0.4rem 0.5rem;
    display: block;
    width: 100%;
  }
  .nav-profile-menu { width: 100%; }

  /* Home sections: apiladas */
  .home-section       { flex-direction: column; gap: 1.25rem; }
  .home-section--alt  { flex-direction: column; }
  .home-section__image { width: 100%; max-width: 300px; margin: 0 auto; }

  /* Feature grid: 2 columnas en móvil */
  .home-feature-grid  { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .home-feature-card  { padding: 0.85rem 0.65rem; }
  .home-feature-card img { max-height: 110px; }

  /* Móvil portrait: 2 columnas */
  .flavor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .variant-detail {
    flex-direction: column;
    gap: 1.5rem;
  }
  .variant-detail__image-wrap {
    width: 100%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }
  .variant-detail__info {
    width: 100%;
  }

  /* Nav buttons on mobile: keep as side strips, shrink width slightly */
  .flavor-nav {
    width: 30px;
    font-size: 1.8rem;
  }

  /* Qty control: larger touch targets */
  .qty-btn { width: 44px; height: 44px; }
  .qty-input { height: 44px; }

  /* Variant detail: stack action buttons on mobile */
  .variant-detail__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .variant-detail__actions .btn-reysan {
    justify-content: center;
  }

  /* Back to catalog: full width on mobile */
  .btn-volver-catalogo {
    display: block;
    width: 100%;
    text-align: center;
  }

  /* Cart actions: stack vertically, full-width buttons */
  .cart-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cart-actions .btn,
  .cart-actions button { text-align: center; width: 100%; }
  .cart-actions form { width: 100%; }

  /* Home section compact: reducir imagen */
  .home-section--compact { padding: 1rem 0; }
  .home-section__image--sm { width: 100%; max-width: 160px; }

  /* Home articles: apilados verticalmente */
  .home-article {
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.75rem 0;
  }
  .home-article--reverse { flex-direction: column; }
  .home-article__image { width: 100%; max-width: 260px; margin: 0 auto; }
  .home-article__content h2 { font-size: 1.15rem; text-align: center; }
  .home-article__content p  { text-align: center; max-width: 100%; }

  /* Cart table: card layout on mobile */
  .cart-table thead { display: none; }
  .cart-table tfoot  { display: none; }
  .cart-totals-mobile {
    display: block;
    background: #ffffff;
    border: 1px solid #e0d5d8;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
  }
  .cart-table tbody tr {
    display: block;
    border: 1px solid #e0d5d8;
    border-radius: 8px;
    margin-bottom: 0.65rem;
    padding: 0.6rem 0.85rem;
    background: #ffffff;
  }
  .cart-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    padding: 0.25rem 0;
    font-size: 0.9rem;
  }
  .cart-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--reysan-pink-dark);
    font-size: 0.82rem;
    margin-right: 0.5rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .cart-table tbody td[data-label=""] { justify-content: flex-end; }
  .cart-table tbody td[data-label=""]::before { display: none; }
}

/* =========================================================
   6C — Checkout / Order Status / Payment Instructions
   ========================================================= */

/* --- Cart: optional delivery date --- */
.cart-delivery-date {
  margin-bottom: 1rem;
}
.cart-delivery-date label {
  display: block;
  font-size: 0.9rem;
  color: var(--reysan-gray-dark);
  margin-bottom: 0.25rem;
}
.cart-delivery-date input[type="date"] {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--reysan-gray);
  border-radius: 6px;
  font-size: 0.95rem;
}

/* --- Order success (pedido_registrado) --- */
.order-success {
  max-width: 860px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.order-success__header {
  text-align: center;
  margin-bottom: 2rem;
}
.order-success__title {
  font-size: 1.8rem;
  color: var(--reysan-pink-dark);
}
.order-success__subtitle {
  color: var(--reysan-gray-dark);
}
.order-success__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  background: var(--reysan-pink-light, #fff0f5);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 2rem;
}
.order-success__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.order-success__meta-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--reysan-gray-dark);
}
.order-success__meta-value {
  font-size: 1.05rem;
  font-weight: 600;
}
.order-success__folio {
  color: var(--reysan-pink-dark);
}
.order-success__total {
  color: var(--reysan-pink-dark);
}
.order-success__section-title {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.order-success__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.order-success__flavor {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
}
.order-success__flavor-img {
  width: 90px;
  height: 120px;
  object-fit: contain;
  border-radius: 0;
  margin-bottom: 0.4rem;
  background: var(--reysan-cream, #fdf6ee);
}
.order-success__flavor-placeholder {
  width: 90px;
  height: 120px;
  border-radius: 0;
  margin-bottom: 0.4rem;
  background: var(--reysan-pink-subtle);
  border: 2px dashed var(--reysan-pink-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--reysan-pink-dark);
  letter-spacing: 0.04em;
}
.order-success__flavor-name {
  font-size: 0.82rem;
  text-align: center;
  font-weight: 600;
}
.order-success__flavor-qty {
  font-size: 0.78rem;
  color: var(--reysan-gray-dark);
}
.order-success__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.order-success__cta-primary {
  font-size: 1.05rem;
  padding: 0.7rem 1.5rem;
  font-weight: 700;
}

/* ── Order success next steps (14B) ─────────────────────────────────────── */
.order-success__next-steps {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
}
.order-success__steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  counter-reset: step-counter;
}
.order-success__step {
  font-size: 0.85rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.order-success__step::before {
  counter-increment: step-counter;
  content: counter(step-counter) ".";
  font-weight: 700;
  color: #9ca3af;
  min-width: 1rem;
}
.order-success__step--done {
  color: #065f46;
  font-weight: 600;
}
.order-success__step--done::before { color: #10b981; }
.order-success__step--active {
  color: var(--reysan-brown);
  font-weight: 700;
}
.order-success__step--active::before { color: var(--reysan-pink-dark); }

/* ── Checkout next steps note (14B) ─────────────────────────────────────── */
.checkout-next-steps {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-left: 3px solid var(--reysan-pink-light);
  border-radius: 0 8px 8px 0;
  padding: 0.55rem 0.85rem;
  margin-bottom: 0.75rem;
}
.checkout-next-steps__text {
  font-size: 0.82rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}

/* --- Payment instructions --- */
.payment-instructions {
  max-width: 760px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.payment-instructions__title {
  font-size: 1.6rem;
  color: var(--reysan-pink-dark);
  margin-bottom: 0.5rem;
}
.payment-instructions__folio,
.payment-instructions__amount {
  font-size: 1rem;
  margin-bottom: 0.35rem;
}
.payment-instructions__card {
  background: #fff;
  border: 1px solid var(--reysan-gray, #ddd);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}
.payment-instructions__card h2 {
  margin-top: 0;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}
.payment-instructions__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.payment-instructions__table th {
  text-align: left;
  color: var(--reysan-gray-dark);
  font-weight: 500;
  padding: 0.3rem 0.5rem 0.3rem 0;
  width: 110px;
}
.payment-instructions__table td {
  padding: 0.3rem 0;
}
.payment-instructions__clabe {
  font-family: monospace;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.payment-instructions__extra {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--reysan-gray-dark);
}
.payment-instructions__upload {
  margin-top: 1.5rem;
}
.payment-instructions__upload h2 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

/* --- Payment reference pill --- */
.payment-reference {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--reysan-gray, #ddd);
  font-size: 0.9rem;
}
.payment-reference p {
  margin: 0 0 0.25rem;
  color: var(--reysan-gray-dark);
}
.payment-reference__code {
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: var(--reysan-pink-dark);
}

/* --- Payment status cards --- */
.payment-status-card {
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  font-size: 1rem;
}
.payment-status-card--review {
  background: #fff8e1;
  border: 1px solid #ffe082;
}
.payment-status-card--confirmed {
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
}
.payment-hidden-note {
  font-size: 0.9rem;
  color: var(--reysan-gray-dark);
  margin-top: 1rem;
  font-style: italic;
}

/* ==========================================================
   6C-ACCOUNT-VERIFICATION-01 — Perfil y verificación
   ========================================================== */

/* --- Tarjeta de perfil --- */
.profile-verification {
  max-width: 540px;
  margin: 0 auto;
}

.verification-card {
  background: #fff;
  border: 1px solid var(--reysan-gray);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}

.verification-card__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--reysan-gray);
}
.verification-card__row:last-child { border-bottom: none; }

.verification-card__label {
  font-size: 0.82rem;
  color: var(--reysan-gray-dark);
  font-weight: 600;
  min-width: 110px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.verification-card__value {
  flex: 1;
  font-size: 0.95rem;
  color: var(--reysan-brown);
  word-break: break-all;
}

/* --- Badges de estado --- */
.verification-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

.verification-badge--ok {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.verification-badge--pending {
  background: #fff8e1;
  color: #b8860b;
  border: 1px solid #ffe082;
}

/* --- Aviso de perfil incompleto --- */
.profile-warning {
  background: var(--reysan-pink-subtle);
  border: 1px solid var(--reysan-pink-light);
  border-radius: 8px;
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  color: var(--reysan-brown);
  margin-bottom: 1rem;
}

.profile-warning--soft {
  background: #fff8e1;
  border: 1px solid #ffe082;
  color: #7a6000;
  margin-top: 1.5rem;
}

.profile-warning__link {
  display: inline-block;
  margin-top: 0.35rem;
  font-weight: 600;
  color: var(--reysan-pink-dark);
  text-decoration: underline;
}

/* --- Acciones de perfil --- */
.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
  align-items: center;
}

/* --- Mensajes de formulario --- */
.form-messages {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.form-message {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.93rem;
  margin-bottom: 0.4rem;
}

.form-message--success, .form-message--successmessage { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.form-message--warning, .form-message--warningmessage { background: #fff8e1; color: #7a6000; border: 1px solid #ffe082; }
.form-message--error,   .form-message--errormessage   { background: #fce4ec; color: #b71c1c; border: 1px solid #ef9a9a; }
.form-message--info,    .form-message--infomessage    { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }

@media (max-width: 600px) {
  .verification-card__row { flex-direction: column; align-items: flex-start; }
  .verification-card__label { min-width: unset; }
}

/* ==========================================================
   6C-PICKUP-PARTNERS-01 — Socios y puntos de recogida
   ========================================================== */

/* --- Lista de puntos --- */
.pickup-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* --- Tarjeta de punto --- */
.pickup-card {
  background: #fff;
  border: 1px solid var(--reysan-gray);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
}

.pickup-card--locked {
  background: #f9f7f8;
  border-color: var(--reysan-pink-light);
  opacity: 0.9;
}

.pickup-card__header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.pickup-card__name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--reysan-brown);
}

.pickup-card__label {
  font-size: 0.88rem;
  color: var(--reysan-gray-dark);
  margin: 0 0 0.5rem;
}

.pickup-card__address {
  font-size: 0.93rem;
  color: var(--reysan-brown);
  margin: 0.35rem 0;
}
.pickup-card__address p { margin: 0 0 0.2rem; }

.pickup-card__instructions {
  font-size: 0.88rem;
  color: var(--reysan-gray-dark);
  margin-top: 0.4rem;
  font-style: italic;
}

.pickup-card__instructions--private {
  color: var(--reysan-pink-dark);
}

/* --- Dirección bloqueada --- */
.pickup-card__locked-note {
  font-size: 0.9rem;
  color: var(--reysan-brown);
  margin: 0.25rem 0;
}

.sensitive-locked {
  color: var(--reysan-gray-dark);
  font-style: italic;
}

/* --- Aviso de verificación requerida --- */
.verification-required-notice {
  background: var(--reysan-pink-subtle);
  border: 1px solid var(--reysan-pink-light);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* --- Selector de pickup en carrito --- */
.pickup-select {
  margin: 1rem 0;
}

.pickup-select label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pickup-select select {
  width: 100%;
  max-width: 400px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--reysan-gray);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  background: #fff;
  color: var(--reysan-brown);
}

/* --- Resumen de pickup en pedido registrado --- */
.pickup-summary {
  margin: 1.5rem 0;
  border-top: 1px solid var(--reysan-gray);
  padding-top: 1rem;
}

@media (max-width: 600px) {
  .pickup-card { padding: 0.9rem 1rem; }
  .verification-required-notice { flex-direction: column; align-items: flex-start; }
  .pickup-select select { max-width: 100%; }
}

/* ==========================================================
   Inventario — badges y resumen (6C-INVENTORY-ORDERS-01)
   ========================================================== */

.inventory-badge {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}

.inventory-badge--available {
  background: #d4edda;
  color: #155724;
}

.inventory-badge--low {
  background: #fff3cd;
  color: #856404;
}

.inventory-badge--producible {
  background: #cce5ff;
  color: #004085;
}

.inventory-badge--tolerance {
  background: #ffe5b4;
  color: #7a4f00;
}

.inventory-badge--unavailable {
  background: #f8d7da;
  color: #721c24;
}

.inventory-summary {
  margin: 1rem 0 0.5rem;
  padding: 0.75rem 1rem;
  background: #f9f5f0;
  border-left: 3px solid var(--reysan-pink);
  border-radius: 0 6px 6px 0;
  font-size: 0.9rem;
}

.inventory-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  font-size: 0.88rem;
  color: #5c4700;
  margin-top: 0.75rem;
}

/* ==========================================================
   Selección rápida en catálogo (6C-CATALOG-SELECTION-UX-01)
   ========================================================== */

/* Necesario para posicionar el qty-pill dentro de la imagen */
.flavor-card__link {
  position: relative;
}

/* ── Meta: nombre + precio ── */
.flavor-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.15rem 0.1rem 0;
  gap: 0.25rem;
}
.flavor-card__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--reysan-brown);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flavor-card__price {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--reysan-pink-dark);
  white-space: nowrap;
}

/* ── Estado seleccionado ── */
.flavor-card--selected .flavor-card__link {
  border-color: #00C97A;
  box-shadow:
    0 0 0 2px #00C97A,
    0 0 14px rgba(0, 201, 122, 0.28);
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.flavor-card--selected .flavor-card__link:hover {
  box-shadow:
    0 0 0 2px #00C97A,
    0 4px 18px rgba(0, 201, 122, 0.4);
}

/* ── Pill de cantidad sobre la imagen ── */
.flavor-card__qty-pill {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 0.3rem;
  background: #00C97A;
  color: #fff;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

/* ── Controles +/- ── */
.flavor-card__quick-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
}
.flavor-card__quick-actions form {
  margin: 0;
  padding: 0;
  display: contents;
}
.flavor-card__qty-btn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: transparent;
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.14s, color 0.14s;
}
.flavor-card__qty-btn--dec {
  color: var(--reysan-brown);
  border-color: var(--reysan-brown);
}
.flavor-card__qty-btn--dec:hover {
  background: var(--reysan-brown);
  color: #fff;
}
.flavor-card__qty-btn--inc {
  color: var(--reysan-pink-dark);
  border-color: var(--reysan-pink-dark);
}
.flavor-card__qty-btn--inc:hover {
  background: var(--reysan-pink-dark);
  color: #fff;
}
.flavor-card__qty-control {
  font-size: 1.05rem;
  font-weight: 700;
  min-width: 1.8rem;
  text-align: center;
  color: var(--reysan-brown);
  user-select: none;
}

/* ── Botón "Agregar" ── */
.flavor-card__add-btn {
  display: block;
  width: 100%;
  padding: 0.42rem 0.5rem;
  background: var(--reysan-pink-dark);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.14s;
  margin-top: 0.3rem;
  box-sizing: border-box;
}
.flavor-card__add-btn:hover {
  background: var(--reysan-pink-hover);
  color: #fff;
  text-decoration: none;
}
.flavor-card__add-btn--login {
  background: #c8bfc2;
  color: var(--reysan-brown);
}
.flavor-card__add-btn--login:hover {
  background: #b8aea2;
  color: var(--reysan-brown);
}
.flavor-card__add-form {
  margin: 0;
}

/* ── Barra "Ir al carrito" ── */
.catalog-cart-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 1rem 1.25rem;
  background: linear-gradient(to bottom, transparent 0%, rgba(247, 248, 228, 0.97) 35%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  z-index: 20;
  pointer-events: none;
  margin-top: 1.5rem;
}
.catalog-cart-bar__button {
  pointer-events: all;
  display: inline-block;
  padding: 0.7rem 2.2rem;
  background: var(--reysan-pink-dark);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 3px 14px rgba(204, 68, 110, 0.4);
  transition: background 0.14s, box-shadow 0.14s, transform 0.14s;
  white-space: nowrap;
}
.catalog-cart-bar__button:hover {
  background: var(--reysan-pink-hover);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 5px 18px rgba(204, 68, 110, 0.5);
  transform: translateY(-1px);
}

/* Móvil: barra slim sticky */
@media (max-width: 600px) {
  .catalog-cart-bar {
    padding: 0.45rem 0.75rem 0.6rem;
  }
  .catalog-cart-bar__button {
    padding: 0.55rem 1.6rem;
    font-size: 0.9rem;
  }
  .flavor-card__qty-btn {
    width: 38px;
    height: 38px;
    font-size: 1.25rem;
  }
}

/* ==========================================================
   Loyalty / Fidelidad
   ========================================================== */

.loyalty-card {
  background: #fff;
  border: 1px solid var(--reysan-gray);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0 1rem;
}
.loyalty-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--reysan-pink-dark);
  margin: 0 0 1rem;
}
.loyalty-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0;
  border-top: 1px solid var(--reysan-gray);
  font-size: 0.95rem;
  gap: 0.5rem;
}

.loyalty-points {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.loyalty-points__label {
  font-size: 0.9rem;
  color: var(--reysan-gray-dark);
}
.loyalty-points__value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--reysan-pink-dark);
  line-height: 1;
}

.loyalty-tier {
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  color: var(--reysan-gray-dark);
}
.loyalty-tier__label {
  color: var(--reysan-brown);
}

.trusted-customer-badge {
  display: inline-block;
  background: var(--reysan-gold);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 999px;
  padding: 0.2rem 0.85rem;
  margin: 0.5rem 0 0.75rem;
}

.rewards-muted-note {
  font-size: 0.85rem;
  color: var(--reysan-gray-dark);
  margin: 0.75rem 0 0;
  font-style: italic;
  text-transform: none;
}

@media (max-width: 600px) {
  .loyalty-card {
    padding: 1rem 1rem;
  }
  .loyalty-points__value {
    font-size: 1.6rem;
  }
}

/* ==========================================================
   Order Status / Timeline / Cards
   ========================================================== */

/* --- Status page wrapper --- */
.order-status-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}
.order-status-page__header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.order-status-current {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.order-status-date {
  font-size: 0.85rem;
  color: var(--reysan-gray-dark);
}

/* --- Status badge --- */
.order-status-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 0.2rem 0.85rem;
  background: var(--reysan-gray);
  color: var(--reysan-brown);
  white-space: nowrap;
}
/* Specific status colors */
.order-status-badge--draft           { background: #f3e5d0; color: #6b3a10; }
.order-status-badge--payment_pending { background: #fff3cd; color: #856404; }
.order-status-badge--payment_under_review { background: #fff3cd; color: #856404; }
.order-status-badge--confirmed       { background: #d4edda; color: #155724; }
.order-status-badge--in_production   { background: #cce5ff; color: #004085; }
.order-status-badge--ready_for_pickup{ background: var(--reysan-pink-subtle); color: var(--reysan-pink-dark); }
.order-status-badge--completed       { background: #d4edda; color: #155724; }
.order-status-badge--cancelled,
.order-status-badge--expired,
.order-status-badge--failed_pickup   { background: #f8d7da; color: #721c24; }
.order-status-badge--ready_for_delivery   { background: #fff3e0; color: #e65100; }
.order-status-badge--delivered_to_partner { background: #e8f5e9; color: #1b5e20; }

/* --- Timeline --- */
.order-timeline {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  position: relative;
}
.order-timeline::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--reysan-gray);
}
.order-timeline__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.55rem 0 0.55rem 0;
  position: relative;
}
.order-timeline__dot {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--reysan-gray);
  background: var(--reysan-bg);
  position: relative;
  z-index: 1;
  margin-top: 1px;
}
.order-timeline__item--done .order-timeline__dot {
  background: var(--reysan-pink-dark);
  border-color: var(--reysan-pink-dark);
}
.order-timeline__item--current .order-timeline__dot {
  background: var(--reysan-gold);
  border-color: var(--reysan-gold);
  box-shadow: 0 0 0 3px rgba(254, 166, 33, 0.3);
}
.order-timeline__item--pending .order-timeline__dot {
  background: var(--reysan-bg);
  border-color: var(--reysan-gray);
}
.order-timeline__content {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.order-timeline__label {
  font-size: 0.95rem;
}
.order-timeline__item--pending .order-timeline__label {
  color: var(--reysan-gray-dark);
  font-weight: 400;
}
.order-timeline__desc {
  font-size: 0.82rem;
  color: var(--reysan-gray-dark);
  text-transform: none;
}
.order-timeline--admin {
  margin-left: 0;
}

/* --- Cancelled notice --- */
.order-cancelled-notice {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  color: #721c24;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}

/* --- Payment / Pickup summary blocks --- */
.order-payment-summary,
.order-pickup-summary {
  background: #fff;
  border: 1px solid var(--reysan-gray);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 0 0 1.25rem;
}
.order-payment-summary h2,
.order-pickup-summary h2 {
  margin-top: 0;
  font-size: 1rem;
  margin-bottom: 0.6rem;
}

/* --- Payment status card (reused) --- */
.payment-status-card--rejected {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
}

/* --- Payment badge (small inline) --- */
.order-payment-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  background: var(--reysan-gray);
  color: var(--reysan-brown);
}
.order-payment-badge--ok       { background: #d4edda; color: #155724; }
.order-payment-badge--rejected { background: #f8d7da; color: #721c24; }
.order-payment-badge--review   { background: #fff3cd; color: #856404; }
.order-payment-badge--pending  { background: #f3e5d0; color: #6b3a10; }

/* --- Orders list (mis pedidos) --- */
.orders-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.order-card {
  background: #fff;
  border: 1px solid var(--reysan-gray);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}
.order-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.order-card__folio {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--reysan-pink-dark);
}
.order-card__meta {
  display: flex;
  gap: 1.25rem;
  font-size: 0.88rem;
  color: var(--reysan-gray-dark);
  margin-bottom: 0.4rem;
}
.order-card__pickup,
.order-card__schedule,
.order-card__payment {
  font-size: 0.88rem;
  margin-bottom: 0.3rem;
}
.order-card__schedule--pending {
  color: var(--reysan-gray-dark);
  font-style: italic;
  text-transform: none;
}
.order-card__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

/* --- Empty state --- */
.orders-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--reysan-gray-dark);
}
.orders-empty p {
  margin-bottom: 1rem;
}

/* --- Admin manage panel --- */
.admin-manage-panel {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.admin-manage-section {
  flex: 1;
  min-width: 260px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 10px;
  padding: 1rem 1.25rem;
}
.admin-manage-section h2 {
  margin-top: 0;
  font-size: 1rem;
  margin-bottom: 0.75rem;
}
.admin-manage-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.6rem;
}
.admin-manage-row label {
  font-size: 0.82rem;
  color: var(--reysan-gray-dark);
  font-weight: 600;
  text-transform: uppercase;
}
.admin-manage-row input,
.admin-manage-row select {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--reysan-gray);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  color: var(--reysan-brown);
  text-transform: none;
}

/* --- Mobile --- */
@media (max-width: 600px) {
  .order-status-page {
    padding: 1rem 0.75rem 2rem;
  }
  .admin-manage-panel {
    flex-direction: column;
  }
  .order-timeline::before {
    left: 9px;
  }
  .order-card__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================
   6E — UI Premium Foundation & Cart Polish
   ========================================================== */

/* ── Botón X circular sobre tarjeta de catálogo ── */
.flavor-card__remove-form {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 10;
  margin: 0;
  padding: 0;
  display: flex;
}

.ui-remove-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(204, 68, 110, 0.88);
  color: #fff;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  transition: background 0.15s, transform 0.12s;
  font-family: inherit;
  padding: 0;
}

/* ==========================================================
   6F — Cart & Checkout UX Alignment
   ========================================================== */

/* ── Página de carrito ── */
.cart-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.cart-header {
  margin-bottom: 1.5rem;
}

.cart-header h1 {
  margin-bottom: 0.2rem;
}

.cart-header .section-help {
  color: var(--reysan-gray-dark);
  font-size: 0.9rem;
  margin: 0;
}

/* ── Layout de 2 columnas en desktop ── */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.5rem;
  align-items: start;
}

/* ── Secciones colapsables / checkout ── */
.checkout-section {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(77, 32, 3, 0.07);
  border: 1px solid #f0e8ea;
  overflow: hidden;
  margin-bottom: 1rem;
}

.checkout-section--active {
  border-color: var(--reysan-pink-light);
}

.checkout-section--pickup {
  background: var(--reysan-bg);
  border: 1px solid #e8e0b0;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.checkout-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid #f0e8ea;
  background: #fdf8f9;
}

.checkout-section--pickup .checkout-section__header {
  padding: 0.6rem 0.9rem;
  background: transparent;
  border-bottom-color: #e8e0b0;
}

.checkout-section__header h2,
.checkout-section__header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--reysan-brown);
}

.checkout-section__header h3 {
  font-size: 0.9rem;
}

.checkout-section__body {
  padding: 1rem 1.25rem;
}

.checkout-section--pickup .checkout-section__body {
  padding: 0.6rem 0.9rem;
}

/* ── Botón vaciar carrito ── */
.cart-clear-form {
  margin: 0;
  padding: 0;
}

.cart-clear-btn {
  background: none;
  border: 1px solid #e0c0ca;
  color: var(--reysan-pink-dark);
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.cart-clear-btn:hover {
  background: var(--reysan-pink-subtle);
  border-color: var(--reysan-pink-dark);
}

/* ── Tarjeta de producto en carrito ── */
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cart-item-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid #f0e8ea;
  border-radius: 10px;
  transition: box-shadow 0.15s;
}

.cart-item-card:hover {
  box-shadow: 0 3px 10px rgba(77, 32, 3, 0.09);
}

/* Miniatura */
.cart-item-card__thumb {
  width: 48px;
  height: 72px;
  border-radius: 0;
  background: var(--reysan-cream, #fdf6ee);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cart-item-card__thumb--placeholder {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--reysan-pink-dark);
  letter-spacing: 0.05em;
  text-align: center;
}

/* Cuerpo de la tarjeta */
.cart-item-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.cart-item-card__title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--reysan-brown);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-card__meta {
  font-size: 0.8rem;
  color: var(--reysan-gray-dark);
}

/* Controles de cantidad */
.cart-item-card__controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.cart-item-card__controls form {
  margin: 0;
  padding: 0;
}

.cart-item-card__qty-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}

.cart-item-card__qty-btn--minus {
  color: #b45b6a;
}

.cart-item-card__qty-btn--minus:hover {
  background: #fce8ef;
}

.cart-item-card__qty-btn--plus {
  color: #3a8a4a;
}

.cart-item-card__qty-btn--plus:hover {
  background: #e8f5eb;
}

.cart-item-card__qty {
  font-size: 0.95rem;
  font-weight: 700;
  min-width: 1.5ch;
  text-align: center;
  color: var(--reysan-brown);
}

/* Columna derecha: subtotal + X */
.cart-item-card__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.cart-item-card__subtotal {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--reysan-pink-dark);
  white-space: nowrap;
}

.cart-item-card__remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: none;
  border: 2px solid #e8a0a8;
  color: #b45b6a;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  padding: 0;
}

.cart-item-card__remove:hover {
  background: #fce8ef;
  border-color: var(--reysan-pink-dark);
  color: var(--reysan-pink-dark);
}

.cart-item-card__remove form {
  margin: 0;
  padding: 0;
}

/* ── Ticket / Resumen ── */
.cart-ticket {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(77, 32, 3, 0.07);
  border: 1px solid #f0e8ea;
  padding: 1.25rem;
  position: sticky;
  top: 1rem;
}

.cart-ticket__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0;
  font-size: 0.9rem;
  border-bottom: 1px solid #f5eff1;
  color: var(--reysan-brown);
}

.cart-ticket__row:last-of-type {
  border-bottom: none;
}

.cart-ticket__row--promo {
  color: var(--reysan-pink-dark);
  font-style: italic;
}

.cart-ticket__row--total {
  font-weight: 700;
  font-size: 1.05rem;
  border-top: 2px solid #f0e8ea;
  margin-top: 0.2rem;
  padding-top: 0.6rem;
  border-bottom: none;
  color: var(--reysan-brown);
}

/* ── Mínimo de compra ── */
.cart-minimum {
  margin: 1rem 0;
  padding: 0.85rem;
  background: var(--reysan-bg);
  border-radius: 8px;
  border: 1px solid #e8e0b0;
}

.cart-minimum__bar-wrap {
  margin-bottom: 0.5rem;
}

.cart-minimum__bar {
  height: 6px;
  background: #e8dfe3;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 0.3rem;
}

.cart-minimum__fill {
  height: 100%;
  background: var(--reysan-gold);
  border-radius: 99px;
  transition: width 0.3s ease;
  max-width: 100%;
}

.cart-minimum__progress {
  font-size: 0.8rem;
  color: var(--reysan-gray-dark);
  text-align: right;
}

.cart-minimum__message {
  font-size: 0.82rem;
  line-height: 1.4;
  margin-top: 0.3rem;
}

.cart-minimum__message--ok {
  color: #2e7d32;
}

.cart-minimum__message--warn {
  color: var(--reysan-brown);
}

.cart-minimum__faq {
  margin-top: 0.5rem;
  font-size: 0.8rem;
}

.cart-minimum__faq summary {
  cursor: pointer;
  color: var(--reysan-pink-dark);
  list-style: none;
}

.cart-minimum__faq summary::-webkit-details-marker { display: none; }

.cart-minimum__faq p {
  margin: 0.3rem 0 0;
  color: var(--reysan-gray-dark);
  font-size: 0.78rem;
  line-height: 1.45;
}

.cart-minimum__block-note {
  font-size: 0.8rem;
  color: var(--reysan-gray-dark);
  margin: 0.5rem 0 0;
  text-align: center;
}

/* ── Botón de confirmación ── */
.checkout-primary-action {
  margin-top: 1rem;
}

.checkout-primary-action__btn {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 10px;
  text-align: center;
  display: block;
}

.checkout-primary-action__btn--locked {
  background: #e0d5d8;
  color: #9e8a8e;
  border: 1px solid #ccc0c4;
  cursor: not-allowed;
}

/* ── Acciones secundarias ── */
.cart-ticket__secondary-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.cart-ticket__secondary-actions .btn {
  text-align: center;
}

.cart-optional {
  font-weight: 400;
  font-style: italic;
  color: var(--reysan-gray-dark);
  font-size: 0.85em;
}

/* ── Estado vacío del carrito ── */
.cart-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(77, 32, 3, 0.06);
  border: 1px solid #f0e8ea;
  max-width: 480px;
  margin: 2rem auto;
}

.cart-empty-state__icon {
  font-size: 2rem;
  font-weight: 700;
  color: var(--reysan-pink-light);
  margin-bottom: 0.75rem;
}

.cart-empty-state h2 {
  margin: 0 0 0.5rem;
}

.cart-empty-state p {
  color: var(--reysan-gray-dark);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

.cart-empty-state .btn {
  margin: 0.25rem;
}

/* ── Responsive: una columna en móvil ── */
@media (max-width: 700px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }

  .cart-ticket {
    position: static;
  }

  .cart-item-card {
    grid-template-columns: 40px 1fr auto;
  }

  .cart-item-card__thumb {
    width: 40px;
    height: 60px;
  }

  .checkout-primary-action__btn {
    font-size: 1.05rem;
    padding: 1rem;
  }
}
.ui-remove-btn:hover {
  background: var(--reysan-pink-hover);
  transform: scale(1.12);
}

/* ── Botón "Deseleccionar todo" en barra catálogo ── */
.catalog-deselect-form {
  pointer-events: all;
  margin: 0;
}

.catalog-deselect-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.3rem;
  background: rgba(255, 255, 255, 0.88);
  color: var(--reysan-brown);
  border: 1.5px solid rgba(77, 32, 3, 0.5);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.catalog-deselect-btn:hover {
  background: var(--reysan-brown);
  color: #fff;
  border-color: var(--reysan-brown);
}

/* ── Tarjetas y paneles reutilizables ── */
.ui-card {
  background: #ffffff;
  border: 1px solid var(--reysan-gray);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  box-shadow: 0 2px 12px rgba(77, 32, 3, 0.06);
}

.ui-card--soft {
  background: var(--reysan-bg);
  border-color: var(--reysan-pink-light);
  border-radius: 14px;
}

.ui-panel {
  background: #ffffff;
  border: 1px solid var(--reysan-gray);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 1px 8px rgba(77, 32, 3, 0.05);
}

.ui-section { margin: 2rem 0; }

.ui-section-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--reysan-pink-dark);
  letter-spacing: 0.01em;
  margin: 0 0 1rem;
  text-transform: none;
}

.ui-premium-heading {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--reysan-pink-dark);
  letter-spacing: 0.01em;
  text-transform: none;
}

.ui-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
}

.ui-pill {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--reysan-pink-subtle);
  color: var(--reysan-pink-dark);
  border: 1px solid var(--reysan-pink-light);
}

.ui-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: var(--reysan-gray);
  color: var(--reysan-brown);
}

/* ── Tabla premium envuelta en tarjeta ── */
.ui-table-card {
  background: #ffffff;
  border: 1px solid var(--reysan-gray);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(77, 32, 3, 0.06);
  margin: 1rem 0;
}
.ui-table-card table { margin: 0; border-collapse: collapse; }
.ui-table-card th {
  background: var(--reysan-pink-subtle);
  border-color: var(--reysan-pink-light);
  color: var(--reysan-pink-dark);
}
.ui-table-card td { border-color: #f0e8ea; }
.ui-table-card tfoot th { background: #fdf8fb; }
.ui-table-card tr:last-child td { border-bottom: none; }

.ui-data-grid { display: grid; gap: 1rem; }

.ui-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--reysan-gray-dark);
}
.ui-empty-state p { margin-bottom: 1.25rem; }

.ui-soft-shadow { box-shadow: 0 3px 16px rgba(77, 32, 3, 0.08); }

/* ── Botón circular de peligro (quitar/eliminar) ── */
.ui-danger-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.ui-danger-circle:hover { background: #721c24; color: #fff; }

/* ── Badge muted — para "Opcional" en perfil teléfono ── */
.verification-badge--muted {
  background: #f3f3f3;
  color: #9e8a8e;
  border: 1px solid #e0d5d8;
}

/* ==========================================================
   Catálogo UX — controles superiores y barra fondo (6F)
   ========================================================== */

/* Fila centrada con selector de modo + deseleccionar todo */
.catalog-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.25rem 0 0.75rem;
  flex-wrap: wrap;
}

.catalog-mode-switcher {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.catalog-mode-switcher__label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--reysan-gray-dark);
}

.catalog-mode-switcher__actions {
  display: flex;
  gap: 0.3rem;
}

.catalog-mode-switcher__button {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  border: 1.5px solid var(--reysan-gray);
  color: var(--reysan-gray-dark);
  background: transparent;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.catalog-mode-switcher__button:hover {
  background: var(--reysan-pink-subtle);
  color: var(--reysan-pink-dark);
  border-color: var(--reysan-pink-light);
  text-decoration: none;
}

.catalog-mode-switcher__button--active {
  background: var(--reysan-brown);
  color: #fff;
  border-color: var(--reysan-brown);
}

.catalog-mode-switcher__button--active:hover {
  background: var(--reysan-brown);
  color: #fff;
  text-decoration: none;
}

/* Botón grande estático "Ir al carrito" al fondo del catálogo */
.catalog-cart-bottom {
  text-align: center;
  padding: 1.25rem 1rem 2rem;
  margin-top: 0.5rem;
}
.catalog-cart-bottom__button {
  display: inline-block;
  padding: 0.9rem 2.8rem;
  background: var(--reysan-pink-dark);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(204, 68, 110, 0.4);
  transition: background 0.14s, box-shadow 0.14s, transform 0.14s;
  white-space: nowrap;
}
.catalog-cart-bottom__button:hover {
  background: var(--reysan-pink-hover);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(204, 68, 110, 0.5);
  transform: translateY(-1px);
}
@media (max-width: 600px) {
  .catalog-cart-bottom__button {
    display: block;
    text-align: center;
    padding: 1rem;
    font-size: 1.05rem;
  }
}

/* ==========================================================
   6F-PAYMENT-PROOF-UX-AUDIT-01 — Pago premium y comprobantes
   ========================================================== */

/* ── Página de pago ── */
.payment-page {
  max-width: 560px;
  margin: 2rem auto;
  padding: 0 1rem 3rem;
}
.payment-page__title {
  font-size: 1.6rem;
  color: var(--reysan-pink-dark);
  margin-bottom: 1.25rem;
}
.payment-page__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.payment-page__back-links {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--reysan-gray-dark);
}

/* ── Ticket de pago ── */
.payment-ticket {
  background: #fff;
  border: 1.5px solid var(--reysan-pink-light);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 10px rgba(204, 68, 110, 0.07);
}
.payment-ticket--bank {
  border-color: var(--reysan-gold);
  box-shadow: 0 2px 12px rgba(254, 166, 33, 0.10);
}
.payment-ticket__header {
  border-bottom: 1px dashed var(--reysan-gray);
  padding-bottom: 0.65rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.payment-ticket__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid #f3ecee;
  flex-wrap: wrap;
}
.payment-ticket__row:last-child {
  border-bottom: none;
}
.payment-ticket__label {
  font-size: 0.8rem;
  color: var(--reysan-gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 90px;
  flex-shrink: 0;
}
.payment-ticket__value {
  font-weight: 600;
  color: var(--reysan-brown);
  font-size: 1rem;
}
.payment-ticket__value--folio {
  font-size: 1.15rem;
  color: var(--reysan-pink-dark);
  letter-spacing: 0.06em;
}
.payment-ticket__value--amount {
  font-size: 1.35rem;
  color: var(--reysan-brown);
}
.payment-ticket__extra {
  font-size: 0.85rem;
  color: var(--reysan-gray-dark);
  margin: 0.75rem 0 0;
  font-style: italic;
}

/* ── Campo copiable ── */
.payment-copy-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  flex-wrap: wrap;
}
.payment-copy-field--reference {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.payment-copy-field__value {
  font-weight: 600;
  color: var(--reysan-brown);
}
.payment-copy-field__value--ref {
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  color: var(--reysan-pink-dark);
}
.payment-copy-field__masked {
  font-family: monospace;
  font-size: 1rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--reysan-brown);
}

/* ── Botón copiar ── */
.payment-copy-button {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  background: var(--reysan-pink-subtle);
  color: var(--reysan-pink-dark);
  border: 1px solid var(--reysan-pink-light);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.13s, color 0.13s;
  white-space: nowrap;
}
.payment-copy-button:hover {
  background: var(--reysan-pink-light);
  color: #fff;
}
.payment-copy-button--primary {
  padding: 0.45rem 1.2rem;
  font-size: 0.88rem;
  background: var(--reysan-pink-dark);
  color: #fff;
  border-color: var(--reysan-pink-dark);
}
.payment-copy-button--primary:hover {
  background: var(--reysan-pink-hover);
  color: #fff;
}
.payment-copy-button--copied {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
  border-color: #a5d6a7 !important;
}

/* ── Tarjeta de referencia ── */
.payment-reference-card {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1.5px dashed var(--reysan-pink-light);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* ── Panel siguiente paso (upload) ── */
.payment-proof-next-step {
  background: #fff;
  border: 1.5px solid var(--reysan-pink-light);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  margin-top: 1.25rem;
  text-align: center;
}
.payment-proof-next-step p {
  margin-bottom: 0.75rem;
  font-size: 0.97rem;
  color: var(--reysan-brown);
}
.payment-proof-next-step__btn {
  min-width: 200px;
}

/* ── Estado del comprobante ── */
.payment-proof-status {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  border-radius: 14px;
  padding: 1.1rem 1.4rem;
  margin-bottom: 1.25rem;
}
.payment-proof-status__icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.payment-proof-status p {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
}
.payment-proof-status--review {
  background: #fff8e1;
  border: 1.5px solid #ffe082;
}
.payment-proof-status--approved {
  background: #e8f5e9;
  border: 1.5px solid #a5d6a7;
}
.payment-proof-status--approved .payment-proof-status__icon {
  color: #2e7d32;
}
.payment-proof-status--rejected {
  background: #fdecea;
  border: 1.5px solid #ef9a9a;
}
.payment-proof-status__folio {
  font-weight: 700;
  color: var(--reysan-pink-dark);
  letter-spacing: 0.06em;
  font-size: 0.95rem;
}

/* ── Pasos siguientes post-comprobante ── */
.payment-review-next-steps {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 12px;
  padding: 1.1rem 1.3rem 0.9rem;
  margin-bottom: 1.25rem;
}
.payment-review-next-steps__title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--reysan-gray-dark);
  margin: 0 0 0.6rem;
}
.payment-review-next-steps__list {
  margin: 0 0 0.65rem;
  padding-left: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.payment-review-next-steps__item {
  font-size: 0.9rem;
  color: var(--reysan-gray-dark);
}
.payment-review-next-steps__item--done {
  color: #388e3c;
  opacity: 0.75;
  text-decoration: line-through;
}
.payment-review-next-steps__item--active {
  color: var(--reysan-pink-dark);
  font-weight: 600;
}
.payment-review-next-steps__note {
  font-size: 0.84rem;
  color: var(--reysan-gray-dark);
  margin: 0;
  line-height: 1.5;
  border-top: 1px dashed #ffe082;
  padding-top: 0.6rem;
}

/* ── Pasos de pago (13B) ─────────────────────────────────────────────────── */
.payment-steps {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
}
.payment-steps__title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--reysan-brown);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
}
.payment-steps__list {
  margin: 0;
  padding-left: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.payment-steps__item {
  font-size: 0.85rem;
  color: #4b5563;
  line-height: 1.4;
}
.payment-steps__item--active {
  color: var(--reysan-brown);
  font-weight: 600;
}
.payment-steps__item--done {
  color: #9ca3af;
  text-decoration: line-through;
}

/* ── Tarjeta de upload ── */
.payment-upload-card {
  background: #fff;
  border: 1.5px solid var(--reysan-gray);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.25rem;
}
.payment-upload-card--replace {
  background: #fff8e1;
  border-color: #ffe082;
}
.payment-upload-card__label {
  display: block;
  font-size: 0.85rem;
  color: var(--reysan-gray-dark);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.payment-upload-card__input {
  display: block;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1.5px solid var(--reysan-pink-light);
  border-radius: 8px;
  font-size: 0.95rem;
  background: var(--reysan-bg);
  margin-bottom: 1rem;
  cursor: pointer;
}
.payment-upload-card__ref-row {
  margin-bottom: 1rem;
}
.payment-upload-card__text {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1.5px solid var(--reysan-gray);
  border-radius: 8px;
  font-size: 0.95rem;
  background: #fff;
  margin-top: 0.35rem;
}
.payment-upload-card__submit {
  width: 100%;
  padding: 0.85rem;
  font-size: 1.05rem;
}

/* ── Historial de comprobantes (admin) ── */
.payment-proof-history {
  margin-top: 0.5rem;
}
.payment-proof-history__note {
  font-size: 0.8rem;
  color: var(--reysan-gray-dark);
  margin: 0.4rem 0 0;
  font-style: italic;
}

/* ── Admin: tarjeta de comprobante ── */
.payment-admin-proof-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.payment-admin-proof-card--archived {
  opacity: 0.55;
}
.payment-proof-thumb {
  width: 60px;
  height: 45px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--reysan-gray);
  display: block;
  flex-shrink: 0;
}
.payment-proof-thumb__meta {
  font-size: 0.78rem;
  color: var(--reysan-gray-dark);
  line-height: 1.3;
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .payment-page {
    padding: 0 0.75rem 2rem;
  }
  .payment-ticket,
  .payment-upload-card,
  .payment-proof-next-step,
  .payment-proof-status {
    border-radius: 10px;
    padding: 1rem 1rem;
  }
  .payment-ticket__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
  .payment-copy-field {
    flex-direction: row;
  }
  .payment-page__actions {
    flex-direction: column;
  }
  .payment-page__actions .btn {
    text-align: center;
  }
}

/* ==========================================================
   6F-ORDERS-CARDS-TIMELINE-UX-01 — Mis pedidos y detalle
   ========================================================== */

/* ── Badge adicionales de estado ── */
.order-status-badge--packaging      { background: #ede7f6; color: #4527a0; }
.order-status-badge--admin_review   { background: #fce4ec; color: #880e4f; }
.order-status-badge--new            { background: #e3f2fd; color: #0d47a1; }
.order-status-badge--in_production  { background: #cce5ff; color: #004085; }

/* ── Página Mis pedidos ── */
.orders-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}
.orders-header {
  margin-bottom: 1.5rem;
}
.orders-header__title {
  font-size: 1.6rem;
  color: var(--reysan-pink-dark);
  margin: 0 0 0.25rem;
}
.orders-header__sub {
  font-size: 0.88rem;
  color: var(--reysan-gray-dark);
  margin: 0;
}
.orders-card-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* ── Tarjeta clicable ── */
.order-card {
  display: block;
  background: #fff;
  border: 1.5px solid var(--reysan-pink-light);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  color: var(--reysan-brown);
  box-shadow: 0 2px 8px rgba(204, 68, 110, 0.06);
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.12s;
  cursor: pointer;
}
.order-card:hover {
  border-color: var(--reysan-pink-dark);
  box-shadow: 0 4px 18px rgba(204, 68, 110, 0.14);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--reysan-brown);
}
.order-card__summary {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--reysan-brown);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.order-card__meta {
  display: flex;
  gap: 1rem;
  font-size: 0.88rem;
  color: var(--reysan-gray-dark);
  margin-bottom: 0.55rem;
  flex-wrap: wrap;
  align-items: center;
}
.order-card__total {
  font-weight: 700;
  color: var(--reysan-brown);
}
.order-card__pieces {
  background: var(--reysan-pink-subtle);
  color: var(--reysan-pink-dark);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ── Miniaturas de sabores ── */
.order-card__flavors {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}
.order-card__flavor-thumb {
  width: 40px;
  height: 60px;
  border-radius: 0;
  object-fit: contain;
  border: 1px solid var(--reysan-gray);
  display: block;
  flex-shrink: 0;
  background: var(--reysan-cream, #fdf6ee);
}
.order-card__flavor-initial {
  background: var(--reysan-pink-subtle);
  color: var(--reysan-pink-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  border: none;
}
.order-card__flavor-extra {
  background: var(--reysan-gray);
  color: var(--reysan-gray-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  border: none;
}

/* ── Mini timeline ── */
.order-mini-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0.6rem 0;
  overflow-x: auto;
}
.order-mini-timeline__step {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.order-mini-timeline__step:not(:last-child)::after {
  content: "";
  display: block;
  height: 2px;
  flex: 1;
  background: var(--reysan-gray);
  margin: 0 0.25rem;
}
.order-mini-timeline__step--done::after  { background: var(--reysan-pink-dark); }
.order-mini-timeline__step--current::after { background: var(--reysan-pink-light); }
.order-mini-timeline__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--reysan-gray);
  border: 2px solid var(--reysan-gray);
}
.order-mini-timeline__step--done .order-mini-timeline__dot {
  background: var(--reysan-pink-dark);
  border-color: var(--reysan-pink-dark);
}
.order-mini-timeline__step--current .order-mini-timeline__dot {
  background: #fff;
  border-color: var(--reysan-pink-dark);
  box-shadow: 0 0 0 3px var(--reysan-pink-subtle);
}
.order-mini-timeline__label {
  display: none;
}
@media (min-width: 420px) {
  .order-mini-timeline__label {
    display: block;
    font-size: 0.68rem;
    color: var(--reysan-gray-dark);
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    margin-left: 0.2rem;
    line-height: 1.2;
    max-width: 80px;
  }
  .order-mini-timeline__step--done .order-mini-timeline__label,
  .order-mini-timeline__step--current .order-mini-timeline__label {
    color: var(--reysan-brown);
    font-weight: 600;
  }
}
/* ── Grid de retratos de productos en tarjeta ── */
.order-card__products-grid {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.65rem;
  flex-wrap: nowrap;
  overflow: hidden;
}
.order-card__product-portrait {
  width: 40px;
  height: 60px;
  border-radius: 0;
  object-fit: contain;
  border: 1px solid var(--reysan-gray);
  background: var(--reysan-cream, #fdf6ee);
  display: block;
  flex-shrink: 0;
}
.order-card__product-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--reysan-pink-dark);
  border: none;
  background: var(--reysan-pink-subtle);
}
.order-card__product-more {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--reysan-gray-dark);
  background: var(--reysan-gray);
  border: none;
}

/* ── Fila pago + comprobante ── */
.order-card__payment-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* ── Comprobante miniatura en tarjeta ── */
.order-card__proof {
  display: flex;
  align-items: center;
}
.order-card__proof-thumb {
  width: 36px;
  height: 48px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--reysan-gray);
  display: block;
  opacity: 0.85;
}
.order-card__proof-badge {
  font-size: 0.72rem;
  color: var(--reysan-gray-dark);
  background: var(--reysan-gray);
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
}

.order-card__cancelled-note {
  font-size: 0.85rem;
  color: #721c24;
  background: #f8d7da;
  border-radius: 6px;
  padding: 0.35rem 0.7rem;
  margin: 0.5rem 0;
  display: inline-block;
}

/* ── 13A: New order card elements ───────────────────────────────────────── */
.order-card--pickup-ready {
  border-color: #10b981;
  background: linear-gradient(to bottom, #f0fdf4 0%, #fff 40%);
}
.order-card--incident {
  border-color: #d97706;
  opacity: 0.92;
}

.order-card__header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.order-card__folio {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--reysan-brown);
}
.order-card__date-chip {
  font-size: 0.75rem;
  color: var(--reysan-gray-dark);
  white-space: nowrap;
}

.order-card__closed-state {
  margin: 0.4rem 0 0.5rem;
}
.order-card__closed-badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 0.25rem 0.65rem;
}
.order-card__closed-badge--review   { background: #fff3cd; color: #856404; }
.order-card__closed-badge--cancelled { background: #f8d7da; color: #721c24; }
.order-card__closed-badge--neutral  { background: #e9ecef; color: #495057; }

.order-card__status-desc {
  font-size: 0.83rem;
  color: var(--reysan-gray-dark);
  margin: 0.3rem 0 0.55rem;
  line-height: 1.4;
}
.order-card__status-desc--alert   { color: #c2410c; font-weight: 600; }
.order-card__status-desc--success { color: #065f46; font-weight: 600; }
.order-card__status-desc--info    { color: #92400e; }

.order-card__cold-point {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--reysan-gray-dark);
  margin: 0.3rem 0 0.5rem;
  flex-wrap: wrap;
}

.order-card__credit-note {
  display: block;
  font-size: 0.78rem;
  color: #92400e;
  background: #fef3c7;
  border-radius: 5px;
  padding: 0.2rem 0.55rem;
  margin: 0.3rem 0 0.5rem;
}

/* ── Order card direct actions (13B) ─────────────────────────────────────── */
.order-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.85rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--reysan-pink-light);
}
.order-card__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.4rem 1rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  min-height: 2rem;
}
.order-card__action-btn--primary {
  background: var(--reysan-pink-dark);
  color: #fff;
  border: none;
}
.order-card__action-btn--primary:hover {
  background: #c2346b;
  color: #fff;
  text-decoration: none;
}
.order-card__action-btn--secondary {
  background: transparent;
  color: var(--reysan-pink-dark);
  border: 1.5px solid var(--reysan-pink-dark);
}
.order-card__action-btn--secondary:hover {
  background: var(--reysan-pink-subtle);
  text-decoration: none;
}
@media (max-width: 340px) {
  .order-card__action-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Pickup en tarjeta ── */
.order-card__pickup {
  font-size: 0.85rem;
  color: var(--reysan-gray-dark);
  margin: 0.4rem 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.order-card__pickup-icon { font-style: normal; }
.order-card__pickup-date { opacity: 0.8; }
.order-card__payment { margin-top: 0.45rem; }

/* ── Customer order card v2 (10Q / 10Q.1) ── */

/* Título centrado */
.order-card__title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--reysan-brown);
  margin-bottom: 0.6rem;
  text-align: center;
}

/* Timeline: dots en fila, labels debajo centrados */
.order-mini-timeline--card {
  align-items: flex-start;
  overflow: visible;
  margin: 0 0 0.75rem;
}
.order-mini-timeline--card .order-mini-timeline__step {
  flex-direction: column;
  align-items: center;
  position: relative;
}
/* Línea horizontal entre dots, posicionada absolutamente */
.order-mini-timeline--card .order-mini-timeline__step:not(:last-child)::after {
  content: "";
  display: block;
  position: absolute;
  top: 6px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--reysan-gray);
  flex: none;
  margin: 0;
  z-index: 0;
}
.order-mini-timeline--card .order-mini-timeline__step--done:not(:last-child)::after {
  background: var(--reysan-pink-dark);
}
.order-mini-timeline--card .order-mini-timeline__step--current:not(:last-child)::after {
  background: var(--reysan-pink-light);
}
/* Dot más visible, encima de la línea */
.order-mini-timeline--card .order-mini-timeline__dot {
  width: 12px;
  height: 12px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin-bottom: 0.3rem;
}
/* Label siempre visible, centrado debajo del dot */
.order-mini-timeline--card .order-mini-timeline__label {
  display: block !important;
  text-align: center;
  font-size: 0.52rem;
  margin-left: 0;
  max-width: none;
  width: 100%;
  line-height: 1.3;
  overflow-wrap: break-word;
  white-space: normal;
  hyphens: auto;
  color: var(--reysan-gray-dark);
}
.order-mini-timeline--card .order-mini-timeline__step--done .order-mini-timeline__label,
.order-mini-timeline--card .order-mini-timeline__step--current .order-mini-timeline__label {
  color: var(--reysan-brown);
  font-weight: 600;
}

/* Fila fecha + tags */
.order-card__date-tags-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.order-card__date-text {
  font-size: 0.83rem;
  color: var(--reysan-gray-dark);
  flex-shrink: 0;
  padding-top: 0.05rem;
}
.order-card__tags-list {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.order-card__tag {
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}
.order-card__tag--green  { background: #d4edda; color: #155724; }
.order-card__tag--blue   { background: #cce5ff; color: #004085; }
.order-card__tag--orange { background: #fff3cd; color: #856404; }
.order-card__tag--red    { background: #f8d7da; color: #721c24; }
.order-card__tag--gray   { background: var(--reysan-gray); color: var(--reysan-gray-dark); }

/* Sección resumen del pedido */
.order-card__summary-section {
  margin-bottom: 0.75rem;
}
.order-card__summary-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--reysan-brown);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.45rem;
}

/* Grid 5 columnas: desktop → tablet → móvil */
.order-card__items-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem 0.4rem;
}
@media (max-width: 700px) {
  .order-card__items-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 380px) {
  .order-card__items-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Columna de item: imagen + nombre + cantidad */
.order-card__item-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  width: 100%;
}
.order-card__item-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 68px;
  object-fit: contain;
  background: transparent;
  border: none;
}
.order-card__item-initial {
  width: 44px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--reysan-pink-dark);
  background: var(--reysan-pink-subtle);
  border-radius: 3px;
}
.order-card__item-name {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--reysan-brown);
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
  overflow-wrap: break-word;
}
.order-card__item-qty {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--reysan-pink-dark);
  text-align: center;
}

/* Footer: badge de pago + total en la misma fila */
.order-card__footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--reysan-pink-light);
  flex-wrap: nowrap;
}
.order-card__footer-row .order-payment-badge {
  flex-shrink: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.25;
  padding: 0.3rem 0.75rem;
  min-height: 1.8rem;
  white-space: normal;
}
.order-card__total-label {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--reysan-brown);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 300px) {
  .order-card__footer-row {
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .order-card__total-label {
    align-self: flex-end;
  }
}

/* ── Empty state ── */
.order-empty-state {
  text-align: center;
  padding: 3rem 1rem 2rem;
  color: var(--reysan-gray-dark);
}
.order-empty-state__text {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--reysan-brown);
  margin-bottom: 0.35rem;
}
.order-empty-state__sub {
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

/* ── Detalle de pedido ── */
.order-detail-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}
.order-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.order-detail-hero__label {
  font-size: 0.78rem;
  color: var(--reysan-gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.15rem;
}
.order-detail-hero__folio {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--reysan-pink-dark);
  letter-spacing: 0.08em;
  margin: 0;
}
.order-detail-summary {
  background: #fff;
  border: 1.5px solid var(--reysan-pink-light);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.1rem;
}
.order-detail-summary h2 {
  font-size: 1rem;
  color: var(--reysan-gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.75rem;
}

/* ── Ítems en detalle ── */
.order-detail-items {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.order-detail-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.order-detail-item__thumb {
  width: 40px;
  height: 60px;
  border-radius: 0;
  object-fit: contain;
  background: var(--reysan-cream, #fdf6ee);
  border: 1px solid var(--reysan-gray);
  flex-shrink: 0;
}
.order-detail-item__initial {
  background: var(--reysan-pink-subtle);
  color: var(--reysan-pink-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  border: none;
}
.order-detail-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.order-detail-item__name {
  font-weight: 600;
  font-size: 0.95rem;
}
.order-detail-item__meta {
  font-size: 0.8rem;
  color: var(--reysan-gray-dark);
}
.order-detail-item__price {
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* ── Timeline completo ── */
.order-full-timeline {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  position: relative;
}
.order-full-timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--reysan-gray);
}
.order-full-timeline__step {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.5rem 0 0.5rem 0;
  position: relative;
}
.order-full-timeline__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--reysan-gray);
  border: 3px solid var(--reysan-bg);
  position: relative;
  z-index: 1;
  margin-top: 1px;
}
.order-full-timeline__step--done .order-full-timeline__dot {
  background: var(--reysan-pink-dark);
}
.order-full-timeline__step--current .order-full-timeline__dot {
  background: #fff;
  border: 3px solid var(--reysan-pink-dark);
  box-shadow: 0 0 0 4px var(--reysan-pink-subtle);
}
.order-full-timeline__step--pending .order-full-timeline__dot {
  background: var(--reysan-gray);
}
.order-full-timeline__content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-bottom: 0.5rem;
  flex: 1;
}
.order-full-timeline__label {
  font-size: 0.95rem;
  font-weight: 600;
}
.order-full-timeline__step--pending .order-full-timeline__label {
  color: var(--reysan-gray-dark);
  font-weight: 400;
}
.order-full-timeline__desc {
  font-size: 0.82rem;
  color: var(--reysan-gray-dark);
  line-height: 1.4;
}

/* ── Datos sensibles cerrados ── */
.order-sensitive-closed {
  background: var(--reysan-pink-subtle);
  border: 1px solid var(--reysan-pink-light);
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  font-size: 0.88rem;
  color: var(--reysan-gray-dark);
  margin-bottom: 1.1rem;
  font-style: italic;
  text-transform: none;
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .orders-page, .order-detail-page {
    padding: 1rem 0.75rem 2.5rem;
  }
  .order-card {
    border-radius: 10px;
    padding: 0.9rem 1rem;
  }
  .order-detail-hero {
    flex-direction: column;
  }
  .order-detail-summary {
    border-radius: 10px;
    padding: 0.9rem 1rem;
  }
}

/* ==========================================================
   PERFIL — Membresía y Recompensas
   ========================================================== */

.profile-page {
  max-width: 560px;
  margin: 0 auto;
  padding: 1.25rem 1rem 4rem;
}

/* ── Tarjeta de membresía ── */
.profile-membership-card {
  background: linear-gradient(135deg, var(--reysan-brown) 0%, #7a3a18 100%);
  color: #fff;
  border-radius: 16px;
  padding: 1.75rem 1.75rem 1.4rem;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(77,32,3,0.22);
}
.profile-membership-card::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}
.profile-membership-card__brand {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--reysan-gold);
  margin-bottom: 0.6rem;
}
.profile-membership-card__user {
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.2rem;
  word-break: break-word;
}
.profile-membership-card__level {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--reysan-gold);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.profile-membership-card__since {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.65);
}

/* ── Hero de recompensas ── */
.profile-rewards-hero {
  background: #fff;
  border: 1.5px solid var(--reysan-gray);
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  text-align: center;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 8px rgba(77,32,3,0.06);
}
.profile-rewards-hero__points {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--reysan-pink-dark);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.profile-rewards-hero__points--zero {
  color: var(--reysan-gray-dark);
  font-size: 2rem;
}
.profile-rewards-hero__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--reysan-brown);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}
.profile-rewards-hero__meta {
  font-size: 0.82rem;
  color: var(--reysan-gray-dark);
}

/* ── Accesos rápidos ── */
.profile-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-bottom: 1.4rem;
}
.profile-quick-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid var(--reysan-gray);
  border-radius: 12px;
  padding: 0.85rem 0.4rem 0.75rem;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
  position: relative;
  min-height: 72px;
}
.profile-quick-action-card:hover {
  border-color: var(--reysan-pink-dark);
  box-shadow: 0 2px 10px rgba(204,68,110,0.12);
  text-decoration: none;
}
.profile-quick-action-card--soon {
  opacity: 0.6;
  cursor: default;
}
.profile-quick-action-card--soon:hover {
  border-color: var(--reysan-gray);
  box-shadow: none;
}
.profile-quick-action-card__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--reysan-brown);
  text-align: center;
  line-height: 1.2;
}
.profile-quick-action-card__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--reysan-gold);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  text-transform: uppercase;
}

/* count badge on quick action card (14A) */
.profile-quick-action-card__count {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--reysan-pink-dark);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.2rem;
  line-height: 1;
}
.profile-quick-action-card__count--credits {
  background: var(--reysan-gold, #d4a017);
}

/* ── Sección pedidos con atención (14A) ─────────────────────────────────── */
.profile-attention-section {
  margin-bottom: 1.25rem;
}
.profile-attention-section__title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #c2410c;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.55rem;
}
.profile-attention-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.profile-attention-card {
  background: #fff;
  border: 1.5px solid var(--reysan-pink-light);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.profile-attention-card--pickup {
  border-color: #10b981;
  background: #f0fdf4;
}
.profile-attention-card--urgent {
  border-color: var(--reysan-pink-dark);
  background: #fff5f8;
}
/* title without warning icon (14B rename) */
.profile-attention-section__title {
  color: var(--reysan-brown);
}
.profile-attention-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}
.profile-attention-card__folio {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--reysan-brown);
}
.profile-attention-card__label {
  font-size: 0.8rem;
  color: #374151;
}
.profile-attention-card__cp {
  font-size: 0.75rem;
  color: #6b7280;
}
.profile-attention-card__cta {
  font-size: 0.8rem;
  padding: 0.3rem 0.85rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Grid de verificación ── */
.profile-verification-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.profile-verification-card {
  background: #fff;
  border: 1.5px solid var(--reysan-gray);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.profile-verification-card--ok {
  border-color: #52a77a;
  background: #f0faf4;
}
.profile-verification-card--pending {
  border-color: var(--reysan-gold);
  background: #fffbf0;
}
.profile-verification-card--info {
  border-color: var(--reysan-pink-light);
  background: var(--reysan-pink-subtle);
}
.profile-verification-card--muted {
  background: #fafafa;
}
.profile-verification-card__icon-col {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  margin-top: 1px;
}
.profile-verification-card--ok .profile-verification-card__icon-col {
  background: #52a77a;
  color: #fff;
}
.profile-verification-card--pending .profile-verification-card__icon-col {
  background: var(--reysan-gold);
  color: #fff;
}
.profile-verification-card--info .profile-verification-card__icon-col,
.profile-verification-card--muted .profile-verification-card__icon-col {
  background: var(--reysan-gray);
  color: var(--reysan-brown);
}
.profile-verification-card__body {
  flex: 1;
  min-width: 0;
}
.profile-verification-card__label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--reysan-gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.profile-verification-card__value {
  font-size: 0.82rem;
  color: var(--reysan-brown);
  word-break: break-all;
  margin-bottom: 0.2rem;
}
.profile-verification-card__status {
  font-size: 0.72rem;
  font-weight: 600;
}
.profile-verification-card__status--ok { color: #52a77a; }
.profile-verification-card__status--warn { color: #b07800; }
.profile-optional-tag {
  font-size: 0.62rem;
  font-weight: 600;
  background: var(--reysan-gray);
  color: var(--reysan-gray-dark);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.profile-check { color: #52a77a; font-weight: 700; }
.profile-exclamation { color: var(--reysan-gold); font-weight: 700; }
.profile-neutral { color: var(--reysan-gray-dark); }

/* ── Secciones colapsables ── */
.profile-collapsible {
  background: #fff;
  border: 1.5px solid var(--reysan-gray);
  border-radius: 12px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.profile-collapsible[open] {
  border-color: var(--reysan-pink-light);
}
.profile-collapsible__summary {
  list-style: none;
  cursor: pointer;
  padding: 0.95rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--reysan-brown);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
}
.profile-collapsible__summary::-webkit-details-marker,
.profile-collapsible__summary::marker { display: none; content: ""; }
.profile-collapsible__summary::after {
  content: "›";
  margin-left: auto;
  font-size: 1.1rem;
  transition: transform 0.18s;
  color: var(--reysan-pink-dark);
}
.profile-collapsible[open] .profile-collapsible__summary::after {
  transform: rotate(90deg);
}
.profile-collapsible__summary:hover {
  background: var(--reysan-pink-subtle);
}
.profile-collapsible__body {
  padding: 0 1.25rem 1.1rem;
  border-top: 1px solid var(--reysan-gray);
}
.profile-collapsible__count {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--reysan-gray-dark);
}

/* ── Estadísticas de recompensas ── */
.profile-rewards-stats {
  display: flex;
  gap: 0.75rem;
  margin: 0.85rem 0 0.75rem;
}
.profile-rewards-stat {
  flex: 1;
  text-align: center;
  background: var(--reysan-pink-subtle);
  border-radius: 10px;
  padding: 0.75rem 0.5rem;
}
.profile-rewards-stat__value {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--reysan-pink-dark);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.profile-rewards-stat__label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--reysan-gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.profile-rewards-note {
  font-size: 0.82rem;
  color: var(--reysan-gray-dark);
  margin: 0.5rem 0 0;
  font-style: italic;
}

/* ── Coming soon ── */
.profile-coming-soon {
  background: var(--reysan-bg);
  border: 1px dashed var(--reysan-gray);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 0.6rem 0 0;
}
.profile-coming-soon p {
  font-size: 0.88rem;
  color: var(--reysan-gray-dark);
  margin: 0 0 0.5rem;
}
.profile-coming-soon p:last-child { margin-bottom: 0; }
.profile-coming-soon__list {
  margin: 0.4rem 0 0 1rem;
  padding: 0;
  font-size: 0.82rem;
  color: var(--reysan-gray-dark);
  line-height: 1.7;
}

/* ── Pedidos recientes ── */
.profile-recent-orders {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.75rem 0 0.6rem;
}
.profile-recent-order-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--reysan-bg);
  border: 1px solid var(--reysan-gray);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.profile-recent-order-card:hover {
  border-color: var(--reysan-pink-dark);
  box-shadow: 0 2px 8px rgba(204,68,110,0.1);
  text-decoration: none;
}
.profile-recent-order-card__folio {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--reysan-pink-dark);
  min-width: 0;
  flex-shrink: 0;
}
.profile-recent-order-card__status {
  flex: 1;
  font-size: 0.82rem;
  color: var(--reysan-brown);
  min-width: 0;
}
.profile-recent-order-card__meta {
  font-size: 0.78rem;
  color: var(--reysan-gray-dark);
  flex-shrink: 0;
}
.profile-recent-order-card__arrow {
  font-size: 1.1rem;
  color: var(--reysan-pink-dark);
  flex-shrink: 0;
}
.profile-see-all-link {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  color: var(--reysan-pink-dark);
  font-weight: 600;
  padding: 0.4rem 0;
  text-decoration: none;
}
.profile-see-all-link:hover { text-decoration: underline; }
.profile-empty-state {
  text-align: center;
  padding: 1rem 0;
}
.profile-empty-state p {
  font-size: 0.88rem;
  color: var(--reysan-gray-dark);
  margin-bottom: 0.75rem;
}

/* ── Privilegios ── */
.profile-privileges__level {
  font-size: 0.95rem;
  color: var(--reysan-brown);
  margin: 0.75rem 0 0.5rem;
}
.profile-privileges__desc {
  font-size: 0.84rem;
  color: var(--reysan-gray-dark);
  line-height: 1.55;
  margin-bottom: 0.75rem;
}

/* ── Datos de cuenta ── */
.profile-account-data {
  margin: 0.75rem 0 0;
}
.profile-account-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--reysan-gray);
}
.profile-account-row:last-child { border-bottom: none; }
.profile-account-row__label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--reysan-gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 110px;
  flex-shrink: 0;
}
.profile-account-row__value {
  font-size: 0.9rem;
  color: var(--reysan-brown);
  word-break: break-word;
}

/* ── Cerrar sesión ── */
.profile-logout {
  margin-top: 1.75rem;
  text-align: center;
}

/* ── Botones utilitarios ── */
.btn--sm {
  font-size: 0.78rem;
  padding: 0.3rem 0.75rem;
}
.btn--outline {
  background: transparent;
  color: var(--reysan-pink-dark);
  border: 1.5px solid var(--reysan-pink-dark);
}
.btn--outline:hover {
  background: var(--reysan-pink-subtle);
  color: var(--reysan-pink-dark);
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .profile-page { padding: 1rem 0.75rem 3rem; }
  .profile-membership-card { padding: 1.35rem 1.25rem 1.15rem; }
  .profile-quick-actions { grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
  .profile-quick-action-card { padding: 0.7rem 0.25rem 0.6rem; min-height: 62px; }
  .profile-quick-action-card__label { font-size: 0.68rem; }
  .profile-verification-grid { grid-template-columns: 1fr; }
  .profile-rewards-stats { gap: 0.5rem; }
  .profile-rewards-stat { padding: 0.6rem 0.35rem; }
  .profile-rewards-stat__value { font-size: 1.25rem; }
  .profile-collapsible__summary { padding: 0.85rem 1rem; }
  .profile-collapsible__body { padding: 0 1rem 0.9rem; }
  .profile-account-row { flex-direction: column; gap: 0.15rem; }
  .profile-account-row__label { min-width: unset; }
}

/* ══════════════════════════════════════════════════════════════════
   ITER 6G-HOME-NAV-PUBLIC-UX — Home premium · Barra móvil inferior
   ══════════════════════════════════════════════════════════════════ */

/* --- Home: tagline y copia de plataforma --- */
.home-hero__tagline {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--reysan-pink-dark);
  margin: 0 auto 0.5rem;
  max-width: 500px;
  line-height: 1.55;
  text-transform: uppercase;
}
.home-hero__platform {
  font-size: 0.98rem;
  color: var(--reysan-brown);
  opacity: 0.78;
  margin: 0 auto 1.5rem;
  max-width: 440px;
  font-style: italic;
  text-transform: none;
}

/* --- Título de sección home --- */
.home-section-title {
  text-align: center;
  color: var(--reysan-pink-dark);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Cómo comprar: 5 pasos --- */
.home-how-to-buy {
  padding: 2.5rem 0 2rem;
  border-top: 1px solid var(--reysan-gray);
  text-align: center;
}
.home-how-to-buy__steps {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 600px;
}
.home-how-to-buy__step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #ffffff;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  text-align: left;
}
.home-how-to-buy__num {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--reysan-pink-dark);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.97rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-how-to-buy__body strong {
  display: block;
  color: var(--reysan-brown);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.home-how-to-buy__body p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--reysan-brown);
  opacity: 0.75;
  line-height: 1.55;
  text-transform: none;
}

/* --- Puntos de recogida: preview protegido --- */
.home-pickup-preview {
  padding: 2.5rem 0 2rem;
  border-top: 1px solid var(--reysan-gray);
  text-align: center;
}
.home-pickup-preview__desc {
  color: var(--reysan-brown);
  max-width: 500px;
  margin: 0 auto 1.25rem;
  line-height: 1.7;
  font-size: 0.96rem;
  text-transform: none;
}

/* --- Noticias / Promos próximamente --- */
.home-news-preview {
  padding: 2.5rem 1.25rem 2rem;
  border-top: 1px solid var(--reysan-gray);
  border-bottom: 1px solid var(--reysan-gray);
  text-align: center;
  background: var(--reysan-pink-subtle);
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}
.home-news-preview__desc {
  color: var(--reysan-brown);
  max-width: 480px;
  margin: 0 auto 1.25rem;
  line-height: 1.7;
  font-size: 0.96rem;
  text-transform: none;
}

/* --- Barra inferior tipo app — siempre visible (mobile + desktop) --- */
body { padding-bottom: 58px; }
.mobile-bottom-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 58px;
  background: #ffffff;
  border-top: 1px solid var(--reysan-gray);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  z-index: 200;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-around;
}
.mobile-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 0.1rem;
  color: var(--reysan-brown);
  text-decoration: none;
  padding: 0.35rem 0.2rem;
  opacity: 0.55;
  transition: opacity 0.15s, color 0.15s;
  text-transform: uppercase;
}
.mobile-bottom-nav__item:hover,
.mobile-bottom-nav__item--active {
  color: var(--reysan-pink-dark);
  opacity: 1;
  text-decoration: none;
}
.mobile-bottom-nav__icon {
  font-size: 1.3rem;
  line-height: 1;
  display: block;
}
.mobile-bottom-nav__label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: block;
}

@media (max-width: 700px) {

  .home-how-to-buy__steps { max-width: 100%; }

  .home-news-preview {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .home-hero__tagline { font-size: 0.8rem; }
  .home-hero__platform { font-size: 0.88rem; }
}

/* =========================================================
   REYSAN CHESS CAFÉ — Landing Teaser
   ========================================================= */

/* Page wrapper */
.chess-landing-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

/* Shared section title */
.chess-section-title {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--reysan-brown);
  margin-bottom: 1.2rem;
  text-align: center;
}

/* ---- HERO ---- */
.chess-hero {
  position: relative;
  background: linear-gradient(135deg, #2b1c0e 0%, #5a3518 60%, #8b5e3c 100%);
  border-radius: 1rem;
  padding: 2.5rem 1.5rem 2rem;
  margin: 1.5rem 0 2rem;
  overflow: hidden;
  text-align: center;
}
.chess-hero__inner {
  position: relative;
  z-index: 1;
}
.chess-hero__badge {
  display: inline-block;
  background: var(--reysan-pink-dark);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.8rem;
  border-radius: 2rem;
  margin-bottom: 0.9rem;
}
.chess-hero__title {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #f5e9d4;
  margin: 0 0 0.6rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.chess-hero__copy {
  color: #d4b896;
  font-size: 0.97rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.chess-hero__actions {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  flex-wrap: wrap;
}
.chess-hero__deco {
  position: absolute;
  right: -0.5rem;
  bottom: -1rem;
  font-size: 9rem;
  opacity: 0.07;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* ---- CREDITS CARD ---- */
.chess-credit-card {
  background: #faf5ed;
  border: 2px solid #c9a86c;
  border-radius: 0.9rem;
  padding: 1.5rem 1.5rem 1.2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 12px rgba(90,53,24,0.09);
}
.chess-credit-card__inner {
  max-width: 520px;
  margin: 0 auto;
}
.chess-credit-card__heading {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--reysan-brown);
  margin-bottom: 0.9rem;
  text-align: center;
}
.chess-credit-card__balance-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  justify-content: center;
  margin-bottom: 0.8rem;
}
.chess-credit-card__balance {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--reysan-brown);
  line-height: 1;
}
.chess-credit-card__unit {
  font-size: 1rem;
  color: #8b6544;
  font-weight: 600;
}
.chess-credit-card__frozen,
.chess-credit-card__anon {
  text-align: center;
  color: #8b6544;
  font-size: 0.92rem;
  margin-bottom: 0.8rem;
}
.chess-credit-card__anon a {
  color: var(--reysan-pink-dark);
  text-decoration: underline;
}
.chess-credit-card__rules {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.chess-credit-card__rules li {
  font-size: 0.87rem;
  color: #5a3518;
  padding-left: 1.2rem;
  position: relative;
}
.chess-credit-card__rules li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #c9a86c;
}
.chess-credit-card__history {
  margin-top: 1rem;
  border-top: 1px solid #e5d5bb;
  padding-top: 0.8rem;
}
.chess-credit-card__history-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8b6544;
  margin-bottom: 0.4rem;
}
.chess-credit-card__entry {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.83rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid #f0e4cc;
}
.chess-credit-card__entry-type {
  flex: 1;
  color: #5a3518;
}
.chess-credit-card__entry-amount {
  font-weight: 700;
  min-width: 4rem;
  text-align: right;
}
.chess-credit-card__entry-amount--pos { color: #2e7d32; }
.chess-credit-card__entry-amount--neg { color: #c62828; }
.chess-credit-card__entry-date {
  color: #9e8060;
  font-size: 0.78rem;
  white-space: nowrap;
}

/* ---- MODULES GRID ---- */
.chess-modules {
  margin-bottom: 2rem;
}
.chess-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.chess-module-card {
  background: #faf5ed;
  border: 1.5px solid #e0c890;
  border-radius: 0.8rem;
  padding: 1.2rem 1rem;
  text-align: center;
  box-shadow: 0 1px 6px rgba(90,53,24,0.07);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.chess-module-card--locked {
  opacity: 0.82;
}
.chess-module-card__icon {
  font-size: 2rem;
  line-height: 1;
}
.chess-module-card__title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--reysan-brown);
  margin: 0;
}
.chess-module-card__desc {
  font-size: 0.82rem;
  color: #6b4c2a;
  line-height: 1.5;
  flex: 1;
}
.chess-module-card__badge {
  display: inline-block;
  background: #ede0c4;
  color: #6b4c2a;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 2rem;
  margin-top: 0.3rem;
}

/* ---- RULES CARD ---- */
.chess-rules-card {
  background: #2b1c0e;
  border-radius: 0.9rem;
  padding: 1.5rem 1.5rem 1.2rem;
  margin-bottom: 2rem;
}
.chess-rules-card .chess-section-title {
  color: #f5e9d4;
}
.chess-rules-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.chess-rules-card__list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: #d4b896;
  line-height: 1.5;
}
.chess-rules-card__check {
  color: #c9a86c;
  font-weight: 900;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* ---- KING CARD ---- */
.chess-king-card {
  background: linear-gradient(135deg, #f5e9d4 0%, #ede0c4 100%);
  border: 2px solid #c9a86c;
  border-radius: 0.9rem;
  padding: 2rem 1.5rem;
  margin-bottom: 2rem;
  text-align: center;
  box-shadow: 0 2px 12px rgba(90,53,24,0.1);
}
.chess-king-card__crown {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.chess-king-card__title {
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--reysan-brown);
  margin: 0 0 0.9rem;
}
.chess-king-card__quote {
  font-size: 1.1rem;
  font-style: italic;
  color: #3e2409;
  border-left: 4px solid #c9a86c;
  padding-left: 1rem;
  text-align: left;
  margin: 0 auto 0.9rem;
  max-width: 480px;
  line-height: 1.6;
}
.chess-king-card__desc {
  font-size: 0.88rem;
  color: #6b4c2a;
  line-height: 1.6;
  max-width: 420px;
  margin: 0 auto;
}

/* ---- ROADMAP ---- */
.chess-roadmap {
  margin-bottom: 2rem;
}
.chess-roadmap-strip {
  display: flex;
  gap: 0;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}
.chess-roadmap-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 100px;
  padding: 0 0.5rem;
  position: relative;
  flex: 1;
  max-width: 150px;
}
.chess-roadmap-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: calc(50% + 0.7rem);
  width: calc(100% - 1.4rem);
  height: 2px;
  background: #e0c890;
}
.chess-roadmap-step__dot {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2.5px solid #e0c890;
  background: #faf5ed;
  z-index: 1;
}
.chess-roadmap-step--done .chess-roadmap-step__dot {
  background: var(--reysan-brown);
  border-color: var(--reysan-brown);
}
.chess-roadmap-step--current .chess-roadmap-step__dot {
  background: var(--reysan-pink-dark);
  border-color: var(--reysan-pink-dark);
  box-shadow: 0 0 0 3px rgba(var(--reysan-pink-dark-rgb, 183,62,110), 0.2);
}
.chess-roadmap-step--future .chess-roadmap-step__dot {
  background: #faf5ed;
  border-color: #dcc88a;
}
.chess-roadmap-step__label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--reysan-brown);
  text-align: center;
  line-height: 1.3;
}
.chess-roadmap-step--future .chess-roadmap-step__label {
  color: #a08060;
}
.chess-roadmap-step__sub {
  font-size: 0.68rem;
  color: #a08060;
  text-align: center;
}
.chess-roadmap-step--done .chess-roadmap-step__sub { color: var(--reysan-brown); font-weight: 700; }
.chess-roadmap-step--current .chess-roadmap-step__sub { color: var(--reysan-pink-dark); font-weight: 700; }

/* ---- CTA footer ---- */
.chess-cta-footer {
  text-align: center;
  padding: 2rem 1rem;
  border-top: 1px solid #e5d5bb;
  margin-top: 1rem;
}
.chess-cta-footer__copy {
  font-size: 0.95rem;
  color: #5a3518;
  margin-bottom: 1rem;
}

/* ---- Perfil: chess CTA link ---- */
.profile-chess-cta {
  display: inline-block;
  margin-top: 0.8rem;
  padding: 0.5rem 1.2rem;
  background: #2b1c0e;
  color: #f5e9d4;
  border-radius: 0.5rem;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: background 0.15s, color 0.15s;
}
.profile-chess-cta:hover {
  background: var(--reysan-brown);
  color: #fff;
  text-decoration: none;
}

/* ---- Home: chess teaser section ---- */
.home-chess-teaser {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  background: linear-gradient(135deg, #2b1c0e 0%, #5a3518 100%);
  border-radius: 0.9rem;
  padding: 1.5rem 1.5rem;
  margin: 2rem 0;
  box-shadow: 0 2px 10px rgba(90,53,24,0.12);
}
.home-chess-teaser__icon {
  font-size: 3rem;
  opacity: 0.75;
  flex-shrink: 0;
  color: #f5e9d4;
}
.home-chess-teaser__body {
  flex: 1;
}
.home-chess-teaser__title {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f5e9d4;
  margin: 0 0 0.35rem;
}
.home-chess-teaser__desc {
  font-size: 0.85rem;
  color: #d4b896;
  line-height: 1.5;
  margin: 0 0 0.8rem;
}
.home-chess-teaser__cta {
  font-size: 0.85rem;
}

/* ---- Responsive: chess ---- */
@media (max-width: 700px) {
  .chess-hero__title { font-size: 1.45rem; }
  .chess-hero__deco { font-size: 6rem; }
  .chess-modules-grid { grid-template-columns: 1fr 1fr; }
  .chess-roadmap-strip { gap: 0.5rem; }
  .chess-roadmap-step { min-width: 64px; }
  .chess-roadmap-step:not(:last-child)::after { display: none; }

  .home-chess-teaser {
    flex-direction: column;
    text-align: center;
    gap: 0.8rem;
  }
}

@media (max-width: 400px) {
  .chess-modules-grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   Chess Board Preview — 7X-CHESS-BOARD-UX-01
   ========================================================== */

.chess-board-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem 0 3rem;
}

/* --- Header --- */
.chess-board-header {
  text-align: center;
  margin-bottom: 1.5rem;
}
.chess-board-header__back {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--reysan-pink-dark);
  margin-bottom: 0.75rem;
  letter-spacing: 0.04em;
}
.chess-board-header__back:hover { text-decoration: underline; }
.chess-board-header__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--reysan-brown);
  margin: 0 0 0.25rem;
}
.chess-board-header__subtitle {
  font-size: 0.9rem;
  color: var(--reysan-gold);
  font-weight: 600;
  margin: 0 0 0.3rem;
  letter-spacing: 0.06em;
}
.chess-board-header__notice {
  font-size: 0.78rem;
  color: var(--reysan-gray-dark);
  margin: 0;
  letter-spacing: 0.03em;
}

/* --- Layout --- */
.chess-board-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 720px) {
  .chess-board-layout {
    grid-template-columns: auto 1fr;
  }
}

/* --- Board shell (wood border effect) --- */
.chess-board-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

/* --- Board grid --- */
.chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: min(480px, calc(100vw - 2.5rem));
  height: min(480px, calc(100vw - 2.5rem));
  border: 6px solid var(--reysan-brown);
  border-radius: 4px;
  box-shadow:
    0 0 0 3px var(--reysan-gold),
    0 6px 24px rgba(77, 32, 3, 0.35);
  overflow: hidden;
}

/* --- Squares --- */
.chess-square {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background 0.1s;
}
.chess-square--light {
  background: #f0d9b5;
}
.chess-square--dark {
  background: #b58863;
}
.chess-square--selected {
  background: #f6f669 !important;
}
.chess-square--last-move {
  background: rgba(207, 210, 100, 0.65) !important;
}
.chess-square--selected.chess-square--light,
.chess-square--selected.chess-square--dark {
  background: #f6f669 !important;
}

/* --- Pieces --- */
.chess-piece {
  font-size: clamp(1.5rem, 6.8vw, 2.9rem);
  line-height: 1;
  user-select: none;
  pointer-events: none;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.chess-piece-img {
  width: 85%;
  height: 85%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  display: block;
  margin: auto;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35));
}

/* --- Prototype note below board --- */
.chess-board-prototype-note {
  font-size: 0.72rem;
  color: var(--reysan-gray-dark);
  text-align: center;
  max-width: min(480px, calc(100vw - 2.5rem));
  margin: 0;
  line-height: 1.5;
}

/* --- Panel --- */
.chess-board-panel {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.chess-board-panel__card {
  background: #fff;
  border: 1.5px solid var(--reysan-gray);
  border-radius: 10px;
  padding: 0.9rem 1rem;
}

/* --- Status card --- */
.chess-board-status__label {
  font-size: 0.7rem;
  color: var(--reysan-gray-dark);
  margin: 0 0 0.35rem;
  letter-spacing: 0.05em;
}
.chess-board-status__turn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--reysan-brown);
}
.chess-turn-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--reysan-brown);
  display: inline-block;
  flex-shrink: 0;
  background: #ccc;
  transition: background 0.2s;
}
.chess-turn-dot--white {
  background: #f5f0e8;
  border-color: var(--reysan-brown);
}
.chess-turn-dot--black {
  background: #2a1a0e;
  border-color: #2a1a0e;
}
.chess-board-status__message {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--reysan-pink-dark);
  font-weight: 600;
}

/* --- Mode card --- */
.chess-board-panel__mode-title {
  font-size: 0.7rem;
  color: var(--reysan-gray-dark);
  margin: 0 0 0.2rem;
  letter-spacing: 0.05em;
}
.chess-board-panel__mode-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--reysan-gold);
  margin: 0 0 0.5rem;
}
.chess-board-panel__balance {
  font-size: 0.82rem;
  color: var(--reysan-brown);
  margin: 0;
}
.chess-board-panel__balance--anon {
  color: var(--reysan-gray-dark);
}
.chess-board-panel__balance--anon a {
  color: var(--reysan-pink-dark);
}

/* --- Rules mini card --- */
.chess-board-rules-mini__title {
  font-size: 0.7rem;
  color: var(--reysan-gray-dark);
  margin: 0 0 0.4rem;
  letter-spacing: 0.05em;
}
.chess-board-rules-mini__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.chess-board-rules-mini__list li {
  font-size: 0.8rem;
  color: var(--reysan-brown);
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
  line-height: 1.4;
}

/* --- Actions --- */
.chess-board-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.chess-board-actions__btn {
  width: 100%;
  text-align: center;
}

.chess-board-actions__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Foot note --- */
.chess-board-note {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  background: var(--reysan-pink-subtle);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  font-size: 0.75rem;
  color: var(--reysan-brown);
  line-height: 1.5;
}
.chess-board-note__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  line-height: 1.3;
}

/* --- Responsive tweaks for chess board page --- */
@media (max-width: 480px) {
  .chess-board-header__title { font-size: 1.2rem; }
  .chess-board-panel__card { padding: 0.75rem 0.85rem; }
}

@media (min-width: 720px) {
  .chess-board-panel {
    min-width: 240px;
    max-width: 320px;
  }
}

/* ==========================================================
   Chess Board — Rules Validation additions (7X-CHESS-RULES-VALIDATION-01)
   ========================================================== */

/* --- Legal move highlights --- */
.chess-square--legal {
  cursor: pointer;
  position: relative;
}
/* Dot for empty legal destinations (rendered by JS) */
.chess-legal-dot {
  display: block;
  width: 32%;
  height: 32%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.20);
  margin: auto;
}
/* Ring for capture squares (piece present + legal) */
.chess-square--legal-capture {
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.30);
}
/* Crimson tint on king square when in check */
.chess-square--check {
  background: rgba(220, 20, 20, 0.75) !important;
}

/* --- Message variants --- */
.chess-board-message--ok    { color: #2e7d32; }
.chess-board-message--error { color: var(--reysan-pink-dark); }

/* --- Status badge (check / mate / stalemate) --- */
.chess-status-badge {
  margin-top: 0.5rem;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.8rem;
  text-align: center;
  letter-spacing: 0.04em;
}
.chess-status-badge--check {
  background: #fff3e0;
  color: #e65100;
  border: 1.5px solid #e65100;
}
.chess-status-badge--mate {
  background: var(--reysan-brown);
  color: var(--reysan-gold);
}
.chess-status-badge--stalemate {
  background: var(--reysan-gray);
  color: var(--reysan-brown);
}

/* --- Move history card --- */
.chess-move-history__title {
  font-size: 0.7rem;
  color: var(--reysan-gray-dark);
  margin: 0 0 0.45rem;
  letter-spacing: 0.05em;
}
.chess-move-history__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.4rem;
  max-height: 110px;
  overflow-y: auto;
  font-size: 0.82rem;
  font-family: "Courier New", Courier, monospace;
  color: var(--reysan-brown);
  line-height: 1.6;
}
.chess-move-history__num {
  color: var(--reysan-gray-dark);
  font-size: 0.75rem;
  margin-right: 0.05rem;
}
.chess-move-history__item {
  color: var(--reysan-brown);
  font-weight: 500;
}
.chess-move-history__empty {
  font-size: 0.75rem;
  color: var(--reysan-gray-dark);
  font-style: italic;
  font-family: inherit;
}

/* ==========================================================
   Chess Board — External Coordinates (7X-CHESS-KING-CONTROLS-BOARD-COORDS-UX-01)
   ========================================================== */

.chess-board-coordinate-shell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.chess-board-with-ranks {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 3px;
}

.chess-rank-labels {
  display: flex;
  flex-direction: column;
  width: 18px;
  flex-shrink: 0;
  justify-content: space-around;
}

.chess-rank-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 3px;
}

.chess-file-labels-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  height: 18px;
}

.chess-coord-corner {
  width: 18px;
  flex-shrink: 0;
}

.chess-file-labels {
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: space-around;
}

.chess-file-label {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;
}

.chess-coordinate-label {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  color: #fffaf0;
  text-shadow:
    -1px -1px 0 #1a0800,
     1px -1px 0 #1a0800,
    -1px  1px 0 #1a0800,
     1px  1px 0 #1a0800,
     0 0 6px rgba(212, 168, 67, 0.9);
  pointer-events: none;
  user-select: none;
}

/* Adjust board width on small screens to prevent overflow from rank labels */
@media (max-width: 520px) {
  .chess-board-coordinate-shell .chess-board {
    width: min(480px, calc(100vw - 2.5rem - 24px));
    height: min(480px, calc(100vw - 2.5rem - 24px));
  }
  .chess-board-prototype-note {
    max-width: min(480px, calc(100vw - 2.5rem - 24px));
  }
}

/* ==========================================================
   King Status Edit Form — web controls (7X-CHESS-KING-CONTROLS-BOARD-COORDS-UX-01)
   ========================================================== */

.king-status-edit-section {
  padding: 1rem 1.1rem;
}

.king-status-edit__title {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--reysan-brown);
  margin: 0 0 0.4rem;
  text-transform: uppercase;
}

.king-status-edit__current {
  font-size: 0.82rem;
  color: var(--reysan-brown);
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

.king-status-edit__buttons {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.king-status-btn--active {
  background: var(--reysan-gold) !important;
  color: #fff !important;
  border-color: var(--reysan-gold-dark, #b8860b) !important;
}

.king-status-edit-form {
  border-top: 1px solid var(--reysan-gray);
  padding-top: 0.75rem;
  margin-top: 0.1rem;
}

.king-status-edit__fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.king-status-edit__label {
  font-size: 0.82rem;
  color: var(--reysan-brown);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.king-status-edit__input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1.5px solid var(--reysan-gray);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--reysan-brown);
  background: #fff;
  font-family: inherit;
  box-sizing: border-box;
}

.king-challenge-card__blocked {
  font-size: 0.88rem;
  color: var(--reysan-pink-dark);
  font-weight: 600;
  margin: 0.5rem 0 0.75rem;
}

/* ============================================================
   GAMES PROMO CARD — cross-app promotion of Reysan Chess Café
   ============================================================ */

.games-promo-card {
  background: #fdf8ef;
  border: 1.5px solid rgba(254, 166, 33, 0.45);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  margin: 1.75rem 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: 680px;
}

@media (min-width: 600px) {
  .games-promo-card {
    flex-direction: row;
    align-items: center;
    gap: 1.1rem;
  }
}

.games-promo-card__icon {
  font-size: 2.1rem;
  line-height: 1;
  flex-shrink: 0;
}

.games-promo-card__body {
  flex: 1;
}

.games-promo-card__eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--reysan-gray-dark);
  margin: 0 0 0.2rem;
}

.games-promo-card__title {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--reysan-brown);
  margin: 0 0 0.25rem;
  line-height: 1.25;
}

.games-promo-card__text {
  font-size: 0.78rem;
  color: #5a4030;
  margin: 0;
  line-height: 1.5;
}

.games-promo-card__actions {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.games-promo-card__btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--reysan-pink);
  color: #fff;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s;
}

.games-promo-card__btn:hover {
  background: var(--reysan-pink-dark);
  color: #fff;
  text-decoration: none;
}

/* Catalog variant: no top margin (card handles its own spacing) */
.games-promo-card--catalog {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* Cart variant: slightly smaller padding */
.games-promo-card--cart {
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
}

/* Orders variant */
.games-promo-card--orders {
  margin-top: 1.5rem;
}

/* ── Navbar JUEGOS link ──────────────────────────────────────── */

.nav-link--games {
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--reysan-brown) !important;
}

.nav-link--games:hover {
  color: var(--reysan-pink-dark) !important;
}

/* ── Mobile bottom nav JUEGOS item ──────────────────────────── */

.mobile-nav-link--games .mobile-bottom-nav__icon {
  font-size: 1.3rem;
}

/* ═══════════════════════════════════════════════════════════════
   OWNER CHALLENGE — Reto al Rey
   ═══════════════════════════════════════════════════════════════ */

/* ── Challenge section wrapper ── */
.chess-king-challenge-section {
  max-width: 640px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.chess-king-challenge-section__header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}

.chess-king-challenge-section__crown {
  font-size: 2rem;
  color: var(--reysan-gold);
}

/* ── King status card ── */
.king-status-card {
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
  border: 2px solid transparent;
  background: var(--reysan-cream, #fdf6ee);
}

.king-status-card__inner {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.king-status-card__crown {
  font-size: 2rem;
  flex-shrink: 0;
}

.king-status-card__label {
  font-size: 0.78rem;
  color: var(--reysan-brown-light, #a08060);
  margin: 0 0 0.1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.king-status-card__value {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.2rem;
  color: var(--reysan-brown, #5c3d1e);
}

.king-status-card__message {
  font-size: 0.88rem;
  color: var(--reysan-brown-light, #a08060);
  margin: 0.2rem 0 0;
  font-style: italic;
}

.king-status-card__meta {
  font-size: 0.82rem;
  color: var(--reysan-brown-light, #a08060);
  margin: 0.3rem 0 0;
}

/* Status variants */
.king-status-card--available {
  border-color: #b8e0b0;
  background: linear-gradient(135deg, #f2faf0 0%, #fdf6ee 100%);
}

.king-status-card--available .king-status-card__value {
  color: #2e7d32;
}

.king-status-card--busy {
  border-color: var(--reysan-gold);
  background: linear-gradient(135deg, #fffbf0 0%, #fdf6ee 100%);
}

.king-status-card--busy .king-status-card__value {
  color: #b8860b;
}

.king-status-card--away {
  border-color: #d5c5b0;
  background: var(--reysan-cream, #fdf6ee);
}

.king-status-card--away .king-status-card__value {
  color: var(--reysan-brown-light, #a08060);
}

.king-status-card--offline {
  border-color: #ccc;
  background: #f9f9f9;
}

.king-status-card--offline .king-status-card__value {
  color: #777;
}

/* ── Challenge card (user-facing) ── */
.king-challenge-card {
  background: var(--reysan-cream, #fdf6ee);
  border: 1.5px solid var(--reysan-gold);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.2rem;
}

.king-challenge-card__copy {
  font-size: 0.95rem;
  color: var(--reysan-brown, #5c3d1e);
  margin: 0 0 0.8rem;
}

.king-challenge-card__empty {
  font-size: 0.9rem;
  color: var(--reysan-brown-light, #a08060);
  margin: 0 0 1rem;
}

.king-challenge-card__status-line {
  font-size: 0.9rem;
  color: var(--reysan-brown, #5c3d1e);
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.king-challenge-card__game {
  font-size: 0.85rem;
  color: var(--reysan-brown-light, #a08060);
  margin: 0.3rem 0;
}

.king-challenge-card__reward-note {
  font-size: 0.82rem;
  color: var(--reysan-brown-light, #a08060);
  margin: 0.6rem 0 0.8rem;
  font-style: italic;
}

/* Status badges */
.king-challenge-card__status {
  display: inline-block;
  padding: 0.18em 0.6em;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.king-challenge-card__status--pending {
  background: #fff8e0;
  color: #b8860b;
  border: 1px solid #f0d060;
}

.king-challenge-card__status--accepted {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.king-challenge-card__status--rejected {
  background: #fdecea;
  color: #c62828;
  border: 1px solid #ef9a9a;
}

.king-challenge-card__status--cancelled {
  background: #f5f5f5;
  color: #757575;
  border: 1px solid #e0e0e0;
}

.king-challenge-card__status--expired {
  background: #f5f5f5;
  color: #9e9e9e;
  border: 1px solid #e0e0e0;
}

.king-challenge-card__status--completed {
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid #90caf9;
}

/* ── Challenge actions ── */
.king-challenge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

/* ── Admin queue ── */
.king-admin-queue {
  max-width: 720px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}

.king-admin-queue__empty {
  font-size: 0.9rem;
  color: var(--reysan-brown-light, #a08060);
  text-align: center;
  padding: 1rem;
}

/* ── Admin card ── */
.king-admin-card {
  background: var(--reysan-cream, #fdf6ee);
  border: 1.5px solid #d5c5b0;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-bottom: 0.8rem;
}

.king-admin-card--pending {
  border-color: var(--reysan-gold);
}

.king-admin-card--accepted {
  border-color: #a5d6a7;
}

.king-admin-card--rejected,
.king-admin-card--cancelled {
  opacity: 0.75;
}

.king-admin-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font-size: 0.85rem;
  color: var(--reysan-brown, #5c3d1e);
  margin-bottom: 0.6rem;
}

.king-admin-card__id {
  font-weight: 700;
  color: var(--reysan-brown, #5c3d1e);
}

.king-admin-card__user {
  font-weight: 600;
}

.king-admin-card__date {
  color: var(--reysan-brown-light, #a08060);
}

.king-admin-card__color,
.king-admin-card__game,
.king-admin-card__message,
.king-admin-card__reviewer,
.king-admin-card__note {
  font-size: 0.82rem;
  color: var(--reysan-brown-light, #a08060);
  width: 100%;
}

.king-admin-card__message {
  font-style: italic;
}

.king-admin-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* ── Message flash ── */
.chess-messages {
  max-width: 640px;
  margin: 0.8rem auto;
  padding: 0 1rem;
}

.chess-message {
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

.chess-message--success {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.chess-message--warning {
  background: #fff8e0;
  color: #b8860b;
  border: 1px solid #f0d060;
}

.chess-message--error {
  background: #fdecea;
  color: #c62828;
  border: 1px solid #ef9a9a;
}

/* ── Owner Challenge Game ──────────────────────────────────────────── */

.king-game-status {
  max-width: 640px;
  margin: 0.5rem auto;
  padding: 0.6rem 1rem;
  background: var(--reysan-cream, #fff8f0);
  border: 1px solid var(--reysan-gold, #c8a96e);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--reysan-dark, #1a1a2e);
}

.king-turn-badge {
  margin: 0.5rem 0;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

.king-turn-badge--waiting {
  background: #fff8e0;
  color: #b8860b;
  border: 1px solid #f0d060;
}

.king-player-card {
  padding: 1rem;
}

.king-player-card__title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.6rem;
  color: var(--reysan-dark, #1a1a2e);
}

.king-player-card__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.8rem;
  font-size: 0.88rem;
  margin-bottom: 0.6rem;
}

.king-player-card__meta dt {
  font-weight: 600;
  color: #666;
}

.king-player-card__meta dd {
  color: var(--reysan-dark, #1a1a2e);
}

.king-reward-pending {
  margin-top: 0.75rem;
  padding: 0.65rem 0.9rem;
  background: #fff8e0;
  border: 1px solid #f0d060;
  border-radius: 8px;
  font-size: 0.88rem;
  color: #7a5c00;
  line-height: 1.5;
}

.king-reward-pending small {
  color: #999;
}

.king-reward-pending--approved {
  background: #e8f5e9;
  border-color: #a5d6a7;
  color: #2e7d32;
}

.king-reward-pending--none {
  background: #f5f5f5;
  border-color: #ddd;
  color: #666;
}

/* ── Reward review card (admin panel) ───────────────────────────────────── */
.king-reward-review-card {
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1.5px solid #e0c86e;
  background: #fffdf0;
  font-size: 0.88rem;
}

.king-reward-review-card--pending_review {
  border-color: #f0d060;
  background: #fff8e0;
}

.king-reward-review-card--approved_manual {
  border-color: #a5d6a7;
  background: #e8f5e9;
}

.king-reward-review-card--rejected {
  border-color: #ef9a9a;
  background: #fce4e4;
}

.king-reward-review-card--not_eligible {
  border-color: #ddd;
  background: #f9f9f9;
}

.king-reward-review-card__summary {
  margin: 0.4rem 0;
  line-height: 1.5;
  color: #333;
}

.king-reward-review-card__reviewer {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: #666;
}

.king-reward-review-card__note {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: #555;
  font-style: italic;
}

.king-reward-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 0.45rem;
}

.king-reward-badge--pending {
  background: #f0d060;
  color: #7a5c00;
}

.king-reward-badge--approved {
  background: #a5d6a7;
  color: #1b5e20;
}

.king-reward-badge--rejected {
  background: #ef9a9a;
  color: #7f0000;
}

.king-reward-badge--none {
  background: #e0e0e0;
  color: #555;
}

.king-reward-actions {
  margin-top: 0.65rem;
}

.king-reward-actions__form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.king-reward-note {
  padding: 0.4rem 0.6rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.85rem;
  width: 100%;
  max-width: 480px;
  background: #fff;
  color: #222;
}

.king-reward-note__label {
  font-size: 0.82rem;
  color: #555;
  font-weight: 600;
}

.king-reward-ledger-link {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
}

.king-reward-ledger-link a {
  color: var(--reysan-gold, #c8a96e);
  text-decoration: underline;
}

.king-result-card {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1.5px solid var(--reysan-gold, #c8a96e);
  background: var(--reysan-cream, #fff8f0);
}

.king-result-card--white_wins {
  border-color: #aaa;
  background: #fafafa;
}

.king-result-card--black_wins {
  border-color: #555;
  background: #f0f0f0;
}

.king-result-card--draw {
  border-color: #c8a96e;
}

.king-result-card__label {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.king-result-card__value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--reysan-dark, #1a1a2e);
}

/* ══════════════════════════════════════════════════════════════════════════
   Credit History Page — /juegos/creditos/
   ══════════════════════════════════════════════════════════════════════════ */

.credit-history-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
  font-family: var(--reysan-font, 'Inter', sans-serif);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.credit-history-hero {
  margin-bottom: 1.5rem;
  text-align: center;
}

.credit-history-hero__disclaimer {
  margin: 0.75rem auto 0;
  max-width: 440px;
  font-size: 0.82rem;
  color: #888;
  line-height: 1.55;
}

/* ── Balance card ─────────────────────────────────────────────────────── */

.credit-balance-card {
  display: inline-block;
  background: var(--reysan-dark, #1a1a2e);
  color: #fff;
  border-radius: 16px;
  padding: 1.5rem 2.5rem;
  box-shadow: 0 4px 18px rgba(26,26,46,0.18);
  margin-bottom: 0.75rem;
}

.credit-balance-card__amount {
  font-size: 3rem;
  font-weight: 800;
  color: var(--reysan-gold, #c8a96e);
  line-height: 1;
  letter-spacing: -0.02em;
}

.credit-balance-card__label {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  margin-top: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.credit-balance-card__equiv {
  margin-top: 0.45rem;
  font-size: 0.82rem;
  color: var(--reysan-gold, #c8a96e);
  opacity: 0.85;
}

.credit-account-status-notice {
  margin: 0.5rem auto;
  padding: 0.5rem 0.9rem;
  background: #fff3cd;
  border: 1px solid #f0d060;
  border-radius: 8px;
  font-size: 0.85rem;
  color: #7a5c00;
  max-width: 380px;
}

/* ── Progress card ────────────────────────────────────────────────────── */

.credit-progress-card {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--reysan-cream, #fff8f0);
  border: 1.5px solid var(--reysan-gold, #c8a96e);
  border-radius: 12px;
}

.credit-progress-card__label {
  font-size: 0.92rem;
  color: #555;
  margin-bottom: 0.65rem;
}

.credit-progress-card__ready {
  font-size: 0.92rem;
  color: #2e7d32;
  margin-bottom: 0.65rem;
}

.credit-progress-bar {
  height: 10px;
  background: #e0d6c8;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 0.35rem;
}

.credit-progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--reysan-gold, #c8a96e) 0%, #e8c060 100%);
  border-radius: 99px;
  transition: width 0.4s ease;
}

.credit-progress-bar__meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #999;
  margin-top: 0.2rem;
}

/* ── Section titles ───────────────────────────────────────────────────── */

.credit-section-title {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888;
  margin: 0 0 0.65rem;
}

.credit-section-note {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

/* ── Reward status cards ──────────────────────────────────────────────── */

.credit-reward-status-section {
  margin-bottom: 1.5rem;
}

.credit-reward-status-card {
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  border: 1.5px solid #e0c86e;
  background: #fffdf0;
  margin-bottom: 0.65rem;
}

.credit-reward-status-card--pending {
  border-color: #f0d060;
  background: #fff8e0;
}

.credit-reward-status-card--approved {
  border-color: #a5d6a7;
  background: #e8f5e9;
}

.credit-reward-status-card--rejected {
  border-color: #ccc;
  background: #f9f9f9;
}

.credit-reward-status-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--reysan-dark, #1a1a2e);
  margin: 0.3rem 0 0.2rem;
}

.credit-reward-status-card__meta {
  font-size: 0.83rem;
  color: #666;
  margin-bottom: 0.3rem;
}

.credit-reward-status-card__note {
  font-size: 0.82rem;
  color: #888;
  margin: 0.3rem 0 0;
  line-height: 1.5;
}

/* ── Badges ───────────────────────────────────────────────────────────── */

.credit-badge {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.credit-badge--pending {
  background: #f0d060;
  color: #7a5c00;
}

.credit-badge--approved {
  background: #a5d6a7;
  color: #1b5e20;
}

.credit-badge--rejected {
  background: #e0e0e0;
  color: #555;
}

.credit-badge--gold {
  background: var(--reysan-gold, #c8a96e);
  color: #fff;
}

.credit-badge--positive {
  background: #e8f5e9;
  color: #2e7d32;
}

.credit-badge--reversal {
  background: #fce4e4;
  color: #7f0000;
}

.credit-badge--redemption {
  background: #e3f2fd;
  color: #1565c0;
}

.credit-badge--admin {
  background: #ede7f6;
  color: #4527a0;
}

.credit-badge--neutral {
  background: #f5f5f5;
  color: #666;
}

/* ── Ledger list ──────────────────────────────────────────────────────── */

.credit-ledger-section {
  margin-bottom: 1.5rem;
}

.credit-ledger-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.credit-ledger-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  border: 1px solid #ececec;
  background: #fafafa;
  font-size: 0.88rem;
}

.credit-ledger-item--positive {
  border-left: 3px solid #a5d6a7;
}

.credit-ledger-item--negative {
  border-left: 3px solid #ef9a9a;
}

.credit-ledger-item__left {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.credit-ledger-item__desc {
  font-size: 0.85rem;
  color: #555;
  line-height: 1.4;
  word-break: break-word;
}

.credit-ledger-item__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.credit-ledger-item__amount {
  font-size: 1rem;
  font-weight: 700;
  color: var(--reysan-dark, #1a1a2e);
}

.credit-ledger-item--positive .credit-ledger-item__amount {
  color: #2e7d32;
}

.credit-ledger-item--negative .credit-ledger-item__amount {
  color: #c62828;
}

.credit-ledger-item__meta {
  font-size: 0.76rem;
  color: #aaa;
}

.credit-ledger-empty {
  padding: 1.5rem;
  text-align: center;
  color: #aaa;
  font-size: 0.9rem;
  background: #fafafa;
  border-radius: 10px;
  border: 1px dashed #ddd;
}

/* ── Education card ───────────────────────────────────────────────────── */

.credit-education-card {
  margin-bottom: 1.75rem;
  padding: 1.1rem 1.25rem;
  background: #f8f8f8;
  border-radius: 12px;
  border: 1px solid #e8e8e8;
}

.credit-education-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0.65rem 0 0.9rem;
}

@media (max-width: 520px) {
  .credit-education-card__grid {
    grid-template-columns: 1fr;
  }
}

.credit-education-card__subtitle {
  font-size: 0.82rem;
  font-weight: 700;
  color: #555;
  margin: 0 0 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.credit-education-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: #444;
  line-height: 1.5;
}

.credit-education-card__list--restrictions li {
  color: #888;
}

.credit-education-card__conversion {
  font-size: 0.88rem;
  color: #555;
  border-top: 1px solid #e0e0e0;
  padding-top: 0.75rem;
  margin-top: 0.1rem;
}

/* ── Actions ──────────────────────────────────────────────────────────── */

.credit-history-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  margin-top: 1rem;
}

/* ── Profile credits actions (perfil.html) ────────────────────────────── */

.profile-credits-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* ══════════════════════════════════════════════════════════════════════
   Chess Owner Notifications — 7X-CHESS-NOTIFICATIONS-OWNER-01
   ══════════════════════════════════════════════════════════════════════ */

/* ── Badge ─────────────────────────────────────────────────────────── */

.chess-alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  background: var(--reysan-gold);
  color: var(--reysan-brown);
  vertical-align: middle;
  margin-left: 0.25rem;
}

.chess-alert-badge--nav {
  background: var(--reysan-pink-dark);
  color: #fff;
  font-size: 0.65rem;
}

/* ── King alert summary card grid ──────────────────────────────────── */

.king-alert-summary {
  background: #fff;
  border: 2px solid var(--reysan-gold);
  border-radius: 0.75rem;
  padding: 1.25rem 1rem 1rem;
  margin-bottom: 1.5rem;
}

.king-alert-summary--landing {
  border-color: var(--reysan-pink-dark);
  background: var(--reysan-pink-subtle);
}

.king-alert-summary__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.king-alert-summary__crown {
  font-size: 1.4rem;
  color: var(--reysan-gold);
}

.king-alert-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.king-alert-summary__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0.5rem;
  border-radius: 0.5rem;
  background: var(--reysan-bg);
  border: 1px solid var(--reysan-gray);
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

.king-alert-summary__card--active {
  border-color: var(--reysan-gold);
  background: #fffbf0;
}

.king-alert-summary__card--challenges.king-alert-summary__card--active {
  border-color: var(--reysan-pink-dark);
  background: var(--reysan-pink-subtle);
}

.king-alert-summary__card--rewards.king-alert-summary__card--active {
  border-color: var(--reysan-gold);
  background: #fffbea;
}

.king-alert-summary__card--turn.king-alert-summary__card--active {
  border-color: #1a7a3e;
  background: #eafaf1;
}

.king-alert-summary__number {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--reysan-brown);
  display: block;
}

.king-alert-summary__card--active .king-alert-summary__number {
  color: var(--reysan-pink-dark);
}

.king-alert-summary__card--turn.king-alert-summary__card--active .king-alert-summary__number {
  color: #1a7a3e;
}

.king-alert-summary__label {
  font-size: 0.72rem;
  color: var(--reysan-gray-dark);
  margin-top: 0.25rem;
  display: block;
}

.king-alert-summary__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.25rem;
}

/* ── Filter tabs ───────────────────────────────────────────────────── */

.king-alert-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.king-alert-filter-tab {
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--reysan-gray);
  color: var(--reysan-brown);
  background: #fff;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}

.king-alert-filter-tab:hover {
  border-color: var(--reysan-pink-dark);
  background: var(--reysan-pink-subtle);
  text-decoration: none;
}

.king-alert-filter-tab--active {
  background: var(--reysan-pink-dark);
  color: #fff;
  border-color: var(--reysan-pink-dark);
}

/* ── Separator in nav dropdown ─────────────────────────────────────── */

.nav-profile-dropdown__separator {
  height: 1px;
  background: var(--reysan-gray);
  margin: 0.3rem 0;
  pointer-events: none;
}

/* ── Priority indicator ────────────────────────────────────────────── */

.king-alert-priority {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--reysan-gold);
  margin-right: 0.3rem;
  vertical-align: middle;
}

/* ── Empty state ───────────────────────────────────────────────────── */

.king-alert-empty {
  text-align: center;
  color: var(--reysan-gray-dark);
  padding: 1.5rem 0;
  font-size: 0.9rem;
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .king-alert-summary__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .king-alert-summary__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .king-alert-filter-tabs {
    gap: 0.3rem;
  }

  .king-alert-filter-tab {
    font-size: 0.72rem;
    padding: 0.25rem 0.55rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Games Nav Panel UX — 7X-GAMES-NAV-PANEL-UX-01
   ══════════════════════════════════════════════════════════════════════ */

/* ── Admin dropdown — Panel de Juegos entry ────────────────────────── */

.nav-admin-games-link {
  font-weight: 700;
  color: var(--reysan-pink-dark);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-admin-games-link:hover {
  color: var(--reysan-pink-hover);
}

.nav-admin-games-badge {
  background: var(--reysan-gold);
  color: var(--reysan-brown);
}

/* ── Mobile nav — Juegos button ────────────────────────────────────── */

.mobile-nav-icon--controller {
  font-size: 1.3rem;
}

/* Badge inline in mobile nav label */
.chess-alert-badge--mobile-nav {
  background: var(--reysan-pink-dark);
  color: #fff;
  font-size: 0.6rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.2rem;
  margin-left: 0.15rem;
  vertical-align: super;
}

/* Active state for /juegos/ paths already handled by mobile-bottom-nav__item--active */
.mobile-nav-link--games.mobile-bottom-nav__item--active {
  color: var(--reysan-pink-dark);
}

.mobile-nav-link--games.mobile-bottom-nav__item--active .mobile-bottom-nav__icon {
  color: var(--reysan-pink-dark);
}

/* ==========================================================
   Chess polling sync status bar (7X-CHESS-POLLING-SYNC-MVP-01)
   ========================================================== */

.chess-sync-status {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  margin-bottom: 0.6rem;
  text-align: center;
  transition: background 0.2s, color 0.2s;
}

.chess-sync-status--ok {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.chess-sync-status--waiting {
  background: #fff8e0;
  color: #b8860b;
  border: 1px solid #f0d060;
}

.chess-sync-status--error {
  background: #fdecea;
  color: #c62828;
  border: 1px solid #ef9a9a;
}

.chess-sync-status--paused {
  background: #f5f5f5;
  color: #757575;
  border: 1px solid #e0e0e0;
}

/* ── Admin: Resumen de cobranza ── */
.admin-payments-summary {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1rem 0 1.25rem;
}
.admin-payments-summary__card {
  flex: 1 1 120px;
  min-width: 100px;
  background: #fff;
  border-radius: 10px;
  border: 1.5px solid #e0e0e0;
  padding: 0.75rem 1rem;
  text-align: center;
}
.admin-payments-summary__card--pending { border-color: #ffb300; background: #fff8e1; }
.admin-payments-summary__card--approved { border-color: #66bb6a; background: #f1f8e9; }
.admin-payments-summary__card--rejected { border-color: #ef9a9a; background: #fdecea; }
.admin-payments-summary__count {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: #1a1a2e;
}
.admin-payments-summary__label {
  display: block;
  font-size: 0.75rem;
  color: #757575;
  margin-top: 0.25rem;
}

/* ── Admin: Filtros de pagos ── */
.admin-payments-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.btn-active {
  background: #1a1a2e;
  color: #fff;
  border-color: #1a1a2e;
}

/* ── Admin: Formulario de rechazo expandible ── */
.admin-reject-details summary::-webkit-details-marker { display: none; }
.admin-reject-form-panel {
  background: #fdecea;
  border: 1.5px solid #ef9a9a;
  border-radius: 8px;
  padding: 0.75rem;
  margin-top: 0.4rem;
  min-width: 240px;
  position: relative;
  z-index: 10;
}
.admin-reject-label {
  display: block;
  font-size: 0.8rem;
  color: #c62828;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.admin-reject-textarea {
  width: 100%;
  font-size: 0.85rem;
  border: 1px solid #ef9a9a;
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  resize: vertical;
  margin-bottom: 0.5rem;
  font-family: inherit;
  box-sizing: border-box;
}

/* ── Admin nav dropdown section titles ────────────────────────────── */

.nav-admin-section-title {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  padding: 0.55rem 1rem 0.18rem;
  pointer-events: none;
  user-select: none;
}

.nav-admin-badge-inline {
  margin-left: 0.3rem;
  vertical-align: middle;
  font-size: 0.7rem;
}

/* ── Admin mobile bottom nav ──────────────────────────────────────── */

.mobile-bottom-nav--admin {
  background: var(--reysan-brown);
  border-top: 2px solid var(--reysan-pink-dark);
}

.mobile-bottom-nav--admin .mobile-bottom-nav__item {
  color: rgba(255,255,255,0.7);
}

.mobile-bottom-nav--admin .mobile-bottom-nav__item:hover,
.mobile-bottom-nav--admin .mobile-bottom-nav__item--active {
  color: var(--reysan-gold);
  opacity: 1;
}

/* ── Partner (socio) mobile bottom nav — 34A ──────────────────── */

.mobile-bottom-nav--partner {
  background: #fff;
  border-top: 2px solid var(--reysan-pink-light);
}

.mobile-bottom-nav--partner .mobile-bottom-nav__item {
  color: var(--reysan-gray-dark);
}

.mobile-bottom-nav--partner .mobile-bottom-nav__item:hover,
.mobile-bottom-nav--partner .mobile-bottom-nav__item--active {
  color: var(--reysan-pink-dark);
  opacity: 1;
}

/* ── Page shell utilities — 34A ───────────────────────────────── */

.page-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 0.75rem 0 1rem;
}

.role-nav-group {
  border-top: 1px solid var(--reysan-gray);
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

/* ── Admin operations dashboard ────────────────────────────────────── */

.admin-ops-dashboard {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 0 2rem;
}

.admin-ops-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.admin-ops-title {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--reysan-brown);
  margin: 0;
}

.admin-role-badge {
  background: var(--reysan-pink-dark);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  border-radius: 20px;
  padding: 0.2rem 0.75rem;
  text-transform: uppercase;
}

.admin-ops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.admin-ops-card {
  background: #fff;
  border: 1.5px solid #e8d5c0;
  border-radius: 12px;
  padding: 1.1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  box-shadow: 0 2px 8px rgba(100,60,20,0.07);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.admin-ops-card:hover {
  box-shadow: 0 4px 16px rgba(100,60,20,0.13);
}

.admin-ops-card--urgent {
  border-color: var(--reysan-pink-dark);
  background: #fff8f8;
}

.admin-ops-card--games {
  border-color: var(--reysan-gold);
  background: #fffdf5;
}

.admin-ops-card--client {
  border-color: #c8e6c9;
  background: #f9fef9;
}

.admin-ops-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-ops-card__icon {
  font-size: 1.4rem;
  line-height: 1;
}

.admin-ops-card__title {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--reysan-brown);
  text-transform: uppercase;
  margin: 0;
  flex: 1;
}

.admin-ops-card__badge {
  background: var(--reysan-pink-dark);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 0.15rem 0.55rem;
  white-space: nowrap;
}

.admin-ops-card__badge--games {
  background: var(--reysan-gold);
  color: var(--reysan-brown);
}

.admin-ops-card__desc {
  font-size: 0.88rem;
  color: #5a3a1a;
  margin: 0;
  line-height: 1.5;
}

.admin-ops-card__secondary {
  color: #888;
  font-size: 0.83rem;
}

.admin-ops-card__note {
  font-size: 0.75rem;
  color: #aaa;
  margin: 0;
  font-style: italic;
}

.admin-ops-card__cta {
  margin-top: auto;
  align-self: flex-start;
}

.admin-ops-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* ── Admin client shortcuts grid ─────────────────────────────────── */

.admin-client-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.admin-client-shortcuts__link {
  background: #f5f0eb;
  color: var(--reysan-brown);
  border: 1px solid #d4b896;
  border-radius: 8px;
  padding: 0.3rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}

.admin-client-shortcuts__link:hover {
  background: var(--reysan-pink-dark);
  color: #fff;
  border-color: var(--reysan-pink-dark);
  text-decoration: none;
}

/* ── Admin recent orders section ─────────────────────────────────── */

.admin-ops-recent {
  margin-top: 0.5rem;
}

.admin-ops-recent__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--reysan-brown);
  margin-bottom: 0.75rem;
}

/* ── Responsive: dashboard en móvil ──────────────────────────────── */

@media (max-width: 700px) {
  .admin-ops-grid {
    grid-template-columns: 1fr;
  }

  .admin-ops-title {
    font-size: 1.2rem;
  }
}

/* ── Responsive: dashboard en PC (≥ 900px) — secciones horizontales ── */

@media (min-width: 900px) {
  .admin-ops-dashboard {
    max-width: 1200px;
  }

  .admin-ops-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .admin-ops-card {
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    gap: 0;
  }

  .admin-ops-card__header {
    flex: 0 0 190px;
    min-width: 190px;
    flex-wrap: wrap;
    align-content: center;
    padding: 1rem 1.25rem;
    border-right: 1.5px solid #e8d5c0;
  }

  .admin-ops-card--urgent .admin-ops-card__header { border-right-color: var(--reysan-pink-dark); }
  .admin-ops-card--games  .admin-ops-card__header { border-right-color: var(--reysan-gold); }
  .admin-ops-card--client .admin-ops-card__header { border-right-color: #c8e6c9; }

  .admin-ops-card__body {
    flex: 1;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0.85rem 1.5rem;
    min-width: 0;
  }

  .admin-ops-card__desc {
    flex: 1;
    min-width: 200px;
  }

  .admin-ops-card__cta {
    margin-top: 0;
    align-self: center;
    flex-shrink: 0;
  }

  .admin-client-shortcuts {
    align-self: center;
    flex-shrink: 0;
  }
}

/* ==========================================================
   8D — Canje de créditos en checkout
   ========================================================== */

.checkout-section--credits {
  border: 1px solid var(--reysan-gold);
  border-radius: 0.6rem;
  margin: 1rem 0;
  padding: 0;
  background: #fffbf0;
}

.checkout-section--credits .checkout-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid #f3e6c0;
}

.checkout-section--credits h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--reysan-brown);
}

.credits-balance-pill {
  background: var(--reysan-gold);
  color: #fff;
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.checkout-section--credits .checkout-section__body {
  padding: 0.75rem 0.9rem;
}

.credits-conversion-note {
  font-size: 0.82rem;
  color: var(--reysan-gray-dark);
  margin: 0 0 0.65rem;
}

.credits-slider-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.credits-slider {
  flex: 1;
  accent-color: var(--reysan-gold);
  cursor: pointer;
}

.credits-display {
  min-width: 3.5rem;
  text-align: right;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--reysan-brown);
}

.credits-preview {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  color: var(--reysan-gray-dark);
  background: #fff8e1;
  border-radius: 0.4rem;
  padding: 0.4rem 0.6rem;
}

.credits-preview strong {
  color: var(--reysan-brown);
}

/* Ticket rows for credits discount */
.cart-ticket__row--credits .cart-ticket__credits-discount,
.cart-ticket__credits-discount {
  color: #2e7d32;
  font-weight: 700;
}

.cart-ticket__row--final {
  border-top: 2px solid var(--reysan-brown);
  padding-top: 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
}

/* Payment ticket credits row */
.payment-ticket__row--credits .payment-ticket__credits-discount {
  color: #2e7d32;
  font-weight: 700;
}

/* Order success credits discount */
.order-success__credits-discount {
  color: #2e7d32;
  font-weight: 700;
}

/* Order detail credits row */
.order-detail-credits-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}

.order-detail-credits-discount {
  color: #2e7d32;
  font-weight: 700;
}

/* ==========================================================
   8D — Admin Expediente pattern (orders)
   ========================================================== */

.admin-expediente-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 1rem;
}

.admin-expediente-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.admin-expediente-header h1 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--reysan-brown);
}

.admin-expediente-nav {
  display: flex;
  gap: 0.75rem;
  font-size: 0.88rem;
}

.admin-expediente-nav a {
  color: var(--reysan-pink-dark);
}

.admin-expediente-filters {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.admin-expediente-filters select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--reysan-gray);
  border-radius: 0.4rem;
  font-size: 0.9rem;
  background: #fff;
  color: var(--reysan-brown);
}

.admin-expediente-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-expediente-card {
  background: #fff;
  border: 1px solid var(--reysan-gray);
  border-radius: 0.65rem;
  padding: 0.85rem 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 0.35rem 1rem;
}

.admin-expediente-card__top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.admin-expediente-card__folio {
  font-weight: 700;
  font-size: 1rem;
  color: var(--reysan-pink-dark);
  text-decoration: none;
}

.admin-expediente-card__folio:hover {
  text-decoration: underline;
}

.admin-expediente-card__meta {
  grid-column: 1;
  display: flex;
  gap: 1rem;
  font-size: 0.83rem;
  color: var(--reysan-gray-dark);
  flex-wrap: wrap;
}

.admin-expediente-card__financials {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-size: 0.88rem;
  align-items: center;
  color: var(--reysan-brown);
}

.admin-expediente-card__label {
  color: var(--reysan-gray-dark);
  font-size: 0.8rem;
}

.admin-expediente-card__credits {
  color: #2e7d32;
  font-weight: 600;
}

.admin-expediente-card__balance {
  font-weight: 700;
  color: var(--reysan-brown);
}

.admin-expediente-card__action {
  grid-row: 1 / -1;
  grid-column: 2;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--reysan-pink-dark);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  padding-left: 0.5rem;
  border-left: 1px solid var(--reysan-gray);
}

.admin-expediente-card__action:hover {
  color: var(--reysan-pink-hover);
}

@media (max-width: 580px) {
  .admin-expediente-card {
    grid-template-columns: 1fr;
  }

  .admin-expediente-card__action {
    grid-column: 1;
    grid-row: auto;
    border-left: none;
    border-top: 1px solid var(--reysan-gray);
    padding: 0.5rem 0 0;
    margin-top: 0.25rem;
  }
}

/* -- Referral code - checkout & profile --------------------------- */
.checkout-section--referral { margin-top: 1rem; }
.referral-code-label { display: block; font-size: .85rem; color: var(--color-muted, #888); margin-bottom: .35rem; }
.referral-code-input {
  width: 100%; padding: .5rem .75rem; border: 1px solid var(--color-border, #ddd);
  border-radius: 6px; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em;
}
.referral-code-saved-note {
  font-size: .85rem; color: var(--color-success, #2d7a22); margin-bottom: .5rem;
}

/* Profile referral card */
.profile-referral-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 10px; padding: 1rem 1.25rem; margin: 1rem 0;
}
.profile-referral-card__header { margin-bottom: .5rem; }
.profile-referral-card__title { font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: var(--color-muted, #888); }
.profile-referral-card__code {
  font-size: 1.6rem; font-weight: 800; letter-spacing: .12em;
  color: var(--color-primary, #1a1a1a); margin: .25rem 0;
}
.profile-referral-card__stats { font-size: .8rem; color: var(--color-muted, #888); margin-bottom: .5rem; }
.profile-referral-card__note { font-size: .82rem; color: var(--color-muted, #888); margin-bottom: .75rem; }
.profile-referral-card__link-row { display: flex; gap: .5rem; align-items: center; }
.profile-referral-card__link-input {
  flex: 1; padding: .4rem .6rem; font-size: .8rem;
  border: 1px solid var(--color-border, #ddd); border-radius: 6px;
  background: var(--color-background, #f9f9f9); color: var(--color-muted, #555);
}

/* ==========================================================
   Partner / Socios -- 8H-PARTNER-PROFILES-MVP-01
   ========================================================== */

/* ── Pagina general ── */
.partner-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 1rem 0 3rem;
}

/* ── Hero ── */
.partner-hero {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
  background: linear-gradient(135deg, var(--reysan-pink-subtle) 0%, var(--reysan-bg) 100%);
  border-radius: 12px;
  margin-bottom: 1.25rem;
}
.partner-hero--compact { padding: 1.25rem 1rem 1rem; }
.partner-hero__brand {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--reysan-pink-dark);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}
.partner-hero__title {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--reysan-brown);
  margin: 0 0 0.5rem;
}
.partner-hero__subtitle {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.partner-hero__cta { margin-top: 0.5rem; }

/* ── Aviso ── */
.partner-summary-card {
  background: #fffbea;
  border-left: 4px solid var(--reysan-gold, #FEA621);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.partner-summary-card__note {
  font-size: 0.83rem;
  color: var(--reysan-brown);
  margin: 0;
  line-height: 1.55;
}

/* ── Grid de cards ── */
.partner-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.partner-card-grid--sm { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) {
  .partner-card-grid, .partner-card-grid--sm { grid-template-columns: 1fr; }
}

/* ── Card ── */
.partner-card {
  background: #fff;
  border: 1px solid var(--reysan-gray, #e0d5d8);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 0.75rem;
}
.partner-card--profile { border-color: var(--reysan-pink-dark); }
.partner-card--pending { border-color: var(--reysan-gold, #FEA621); background: #fffbea; }
.partner-card--cta { text-align: center; padding: 1.5rem 1rem; }
.partner-card--actions { background: var(--reysan-bg); }
.partner-card--approved-note { background: #f0fef4; border-color: #22c55e; }
.partner-card--rejection-note { background: #fff1f2; border-color: #f87171; }
.partner-card--history, .partner-card--next-steps, .partner-card--feature { background: var(--reysan-bg); }
.partner-card--location { background: #fafafa; }

.partner-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.partner-card__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--reysan-brown);
  margin: 0 0 0.4rem;
}
.partner-card__desc { font-size: 0.87rem; color: #666; line-height: 1.5; margin: 0.25rem 0 0.75rem; }
.partner-card__meta { font-size: 0.83rem; color: #666; margin: 0.2rem 0; }
.partner-card__note { font-size: 0.8rem; color: #888; font-style: italic; margin-top: 0.5rem; }
.partner-card__features {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  font-size: 0.83rem;
  color: var(--reysan-brown);
}
.partner-card__features li::before { content: "✓ "; color: var(--reysan-pink-dark); }
.partner-card__feature-title {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--reysan-brown);
  margin: 0 0 0.5rem;
}
.partner-card__feature-list { list-style: none; padding: 0; margin: 0; font-size: 0.85rem; }
.partner-card__feature-list li { padding: 0.2rem 0; }
.partner-feature--active::before { content: "✓ "; color: #22c55e; }
.partner-feature--inactive { color: #aaa; }
.partner-feature--inactive::before { content: "-- "; color: #ccc; }
.partner-card__coming-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
  font-size: 0.84rem;
  color: #777;
}
.partner-card__coming-list li::before { content: "- "; }
.partner-card__features-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.partner-card__message { border-top: 1px solid var(--reysan-gray, #e0d5d8); padding-top: 0.75rem; margin-top: 0.75rem; }
.partner-card__rejection-note {
  background: #fff1f2;
  border-radius: 8px;
  padding: 0.75rem;
  margin-top: 0.75rem;
  border-left: 3px solid #f87171;
}
.partner-card__approved-note { background: #f0fef4; border-radius: 8px; padding: 0.75rem; margin-top: 0.75rem; }

/* ── Feature chips ── */
.partner-feature-chip {
  background: var(--reysan-pink-subtle, #fce8ef);
  color: var(--reysan-pink-dark);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
}

/* ── Status badge ── */
.partner-status-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  background: var(--reysan-gray, #e0d5d8);
  color: var(--reysan-brown);
}
.partner-status-badge--active { background: #dcfce7; color: #15803d; }
.partner-status-badge--pending { background: #fef9c3; color: #a16207; }
.partner-status-badge--prospect { background: #e0e7ff; color: #3730a3; }
.partner-status-badge--paused { background: #fef3c7; color: #92400e; }
.partner-status-badge--suspended, .partner-status-badge--rejected { background: #fee2e2; color: #b91c1c; }

/* ── Level badge ── */
.partner-level-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.55rem;
  border-radius: 20px;
  background: var(--reysan-pink-subtle, #fce8ef);
  color: var(--reysan-pink-dark);
  border: 1px solid var(--reysan-pink-light, #E298B0);
}
.partner-level-badge--promotor { background: #e0e7ff; color: #3730a3; border-color: #a5b4fc; }
.partner-level-badge--frio { background: #cffafe; color: #0e7490; border-color: #67e8f9; }
.partner-level-badge--renta { background: #fef9c3; color: #a16207; border-color: #fde047; }
.partner-level-badge--completo { background: #dcfce7; color: #15803d; border-color: #86efac; }

/* ── Formulario ── */
.partner-request-form {
  background: #fff;
  border: 1px solid var(--reysan-gray, #e0d5d8);
  border-radius: 12px;
  padding: 1.25rem 1rem;
  margin-bottom: 1rem;
}
.partner-request-form__section {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}
.partner-request-form__section:last-of-type { border-bottom: none; }
.partner-request-form__section-title {
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--reysan-brown);
  margin: 0 0 0.75rem;
}
.partner-request-form__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--reysan-brown);
  margin-bottom: 0.25rem;
  margin-top: 0.75rem;
}
.partner-request-form__input,
.partner-request-form__select,
.partner-request-form__textarea {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  border: 1px solid var(--reysan-gray, #ccc);
  border-radius: 8px;
  background: var(--reysan-bg);
  color: var(--reysan-brown);
  box-sizing: border-box;
}
.partner-request-form__input:focus,
.partner-request-form__select:focus,
.partner-request-form__textarea:focus {
  outline: none;
  border-color: var(--reysan-pink-dark);
  box-shadow: 0 0 0 2px var(--reysan-pink-subtle);
}
.partner-request-form__hint { font-size: 0.78rem; color: #777; margin: 0.3rem 0 0; }
.partner-request-form__checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.87rem;
  color: var(--reysan-brown);
  margin: 0.5rem 0;
  cursor: pointer;
}
.partner-request-form__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }

/* ── Siguiente paso ── */
.partner-next-step-card {
  background: var(--reysan-bg);
  border: 1px solid var(--reysan-gray, #e0d5d8);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.partner-next-step-card__title {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--reysan-brown);
  margin: 0 0 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.partner-next-step-card__steps {
  font-size: 0.87rem;
  color: var(--reysan-brown);
  padding-left: 1.2rem;
  margin: 0 0 0.75rem;
  line-height: 1.7;
}

/* ── Admin ── */
.partner-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.partner-admin-card {
  background: #fff;
  border: 1px solid var(--reysan-gray, #e0d5d8);
  border-radius: 10px;
  padding: 0.75rem 0.6rem;
  text-align: center;
}
.partner-admin-card--urgent { border-color: var(--reysan-pink-dark); background: var(--reysan-pink-subtle); }
.partner-admin-card__icon { display: block; font-size: 1.5rem; margin-bottom: 0.2rem; }
.partner-admin-card__count { display: block; font-size: 1.8rem; font-weight: 900; color: var(--reysan-brown); line-height: 1; }
.partner-admin-card__label { display: block; font-size: 0.72rem; color: #666; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.2rem; }
.partner-admin-filters { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.partner-admin-section-title {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--reysan-brown);
  margin: 1.25rem 0 0.5rem;
}
.partner-admin-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; }
.partner-admin-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid var(--reysan-gray, #e0d5d8);
  border-radius: 8px;
  padding: 0.7rem 0.75rem;
  text-decoration: none;
  color: var(--reysan-brown);
  flex-wrap: wrap;
}
.partner-admin-row:hover { border-color: var(--reysan-pink-dark); background: var(--reysan-pink-subtle); }
.partner-admin-row__main { flex: 1; min-width: 0; }
.partner-admin-row__name { display: block; font-weight: 700; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.partner-admin-row__user { font-size: 0.78rem; color: #888; }
.partner-admin-row__meta { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.partner-admin-row__date, .partner-admin-row__city { font-size: 0.78rem; color: #888; }
.partner-admin-row__arrow { font-size: 1.1rem; color: var(--reysan-pink-dark); flex-shrink: 0; }
.partner-admin-empty { font-size: 0.88rem; color: #888; padding: 0.75rem 0; }

/* ── Admin Order Cards (redesign 10L) ── */
.order-admin-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.order-admin-card {
  background: #fff;
  border: 1.5px solid #e8e0f0;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.order-admin-card:hover {
  border-color: var(--reysan-pink-dark, #b8376e);
  box-shadow: 0 2px 8px rgba(184,55,110,0.07);
}

/* Header link — the clickable top area */
.order-admin-card__header {
  display: block;
  padding: 0.85rem 1rem 0.7rem;
  text-decoration: none;
  color: inherit;
}
.order-admin-card__header:hover { text-decoration: none; }

/* Rows inside header */
.order-admin-card__row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}
.order-admin-card__row:last-child { margin-bottom: 0; }
.order-admin-card__row--two {
  justify-content: space-between;
  flex-wrap: nowrap;
}
.order-admin-card__row--stats {
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* Field: label + value stacked */
.order-admin-card__field {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.order-admin-card__field--right {
  text-align: right;
  align-items: flex-end;
}
.order-admin-card__label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #999;
}
.order-admin-card__value {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-admin-card__folio {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--reysan-pink-dark, #b8376e);
}
.order-admin-card__total {
  font-weight: 800;
  color: #1a1a1a;
}

/* Stat chip (pieces / total) */
.order-admin-card__stat {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

/* Collapsible details */
.order-admin-card__details {
  border-top: 1px solid #f0eaf5;
}

.order-admin-card__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  cursor: pointer;
  list-style: none;
  background: #faf7fd;
  user-select: none;
}
.order-admin-card__summary::-webkit-details-marker { display: none; }
.order-admin-card__summary-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
}
.order-admin-card__summary-arrow {
  font-size: 1rem;
  color: #bbb;
  transition: transform 0.2s;
  display: inline-block;
}
.order-admin-card__details[open] .order-admin-card__summary-arrow {
  transform: rotate(90deg);
}

/* Expanded body */
.order-admin-card__summary-body {
  padding: 0.75rem 1rem 0.85rem;
}

/* Two-column grid for Regular / Mini */
.order-admin-card__summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.25rem;
}
@media (max-width: 480px) {
  .order-admin-card__summary-grid { grid-template-columns: 1fr; }
}

.order-admin-card__col-header {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #555;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 1px solid #f0e8f5;
  padding-bottom: 0.2rem;
}
.order-admin-card__col-count {
  font-weight: 700;
  color: var(--reysan-pink-dark, #b8376e);
}

.order-admin-card__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.12rem 0;
  border-bottom: 1px dashed #f5f0fb;
  font-size: 0.82rem;
}
.order-admin-card__item:last-child { border-bottom: none; }
.order-admin-card__item-name {
  color: #333;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 72%;
}
.order-admin-card__item-qty {
  color: var(--reysan-pink-dark, #b8376e);
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
}

/* ── Nota privada ── */
.partner-private-note {
  background: #fffbea;
  border-left: 3px solid var(--reysan-gold, #FEA621);
  padding: 0.5rem 0.75rem;
  border-radius: 0 6px 6px 0;
  font-size: 0.84rem;
  color: var(--reysan-brown);
  margin: 0.5rem 0;
}

/* ── Request list ── */
.partner-request-list { display: flex; flex-direction: column; gap: 0.4rem; }
.partner-request-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid var(--reysan-gray, #e0d5d8);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  text-decoration: none;
  color: var(--reysan-brown);
}
.partner-request-row:hover { border-color: var(--reysan-pink-dark); }
.partner-request-row__date { font-size: 0.78rem; color: #888; margin-left: auto; }
.partner-request-row__arrow { font-size: 1.1rem; color: var(--reysan-pink-dark); }

/* ── Botones ── */
.btn--approve { background: #22c55e; color: #fff; border: none; }
.btn--approve:hover { background: #16a34a; }
.btn--reject { background: #f87171; color: #fff; border: none; }
.btn--reject:hover { background: #dc2626; }
.btn--active { background: var(--reysan-pink-dark); color: #fff; }

/* ── Back link ── */
.partner-back-link { display: inline-block; font-size: 0.83rem; color: var(--reysan-pink-dark); text-decoration: none; margin-bottom: 1rem; }
.partner-back-link:hover { text-decoration: underline; }

/* ── Perfil card socios ── */
.profile-partner-card {
  background: #fff;
  border: 1px solid var(--reysan-gray, #e0d5d8);
  border-radius: 12px;
  padding: 1rem;
  margin: 1rem 0;
}
.profile-partner-card__header { margin-bottom: 0.4rem; }
.profile-partner-card__title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--reysan-pink-dark);
}
.profile-partner-card__status { font-size: 0.84rem; color: var(--reysan-brown); margin: 0.25rem 0 0.5rem; }
.profile-partner-card__status--active { color: #15803d; font-weight: 700; }
.profile-partner-card__status--pending { color: #a16207; }
.profile-partner-card__desc { font-size: 0.84rem; color: #777; margin: 0.25rem 0 0.5rem; }

/* ============================================================
   CUENTA CORRIENTE DE SOCIOS (8I)
   ============================================================ */

/* ── Resumen de cuenta ── */
.partner-account-summary {
  background: #fdf6f0;
  border: 1px solid #e8d5c0;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin: 0.75rem 0 1rem;
}
.partner-account-summary__note {
  font-size: 0.82rem;
  color: #7a6050;
  margin: 0;
  line-height: 1.5;
}

/* ── Card de cuenta ── */
.partner-account-card {
  background: #fff;
  border: 1px solid var(--reysan-gray, #e0d5d8);
  border-radius: 12px;
  padding: 1.1rem 1rem;
  margin: 0.75rem 0;
}
.partner-account-card__title {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--reysan-pink-dark);
  margin: 0 0 0.75rem;
}
.partner-account-card__note {
  font-size: 0.78rem;
  color: #999;
  margin: 0.5rem 0 0;
}

/* ── Balance grid ── */
.partner-account-balance-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

/* ── Badges de saldo ── */
.partner-balance-badge {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  min-width: 130px;
}
.partner-balance-badge--credit {
  background: #dcfce7;
  border: 1px solid #86efac;
}
.partner-balance-badge--debit {
  background: #fee2e2;
  border: 1px solid #fca5a5;
}
.partner-balance-badge--even {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
}
.partner-balance-badge--cr {
  background: #ede9fe;
  border: 1px solid #c4b5fd;
}
.partner-balance-badge__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #555;
}
.partner-balance-badge__amount {
  font-size: 1.1rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-top: 0.1rem;
}
.partner-balance-badge__sub {
  font-size: 0.72rem;
  color: #888;
}

/* ── Lista de movimientos ledger ── */
.partner-ledger-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.partner-ledger-entry {
  background: #fafafa;
  border: 1px solid #e8e0e4;
  border-radius: 9px;
  padding: 0.75rem 0.9rem;
}
.partner-ledger-entry--credit { border-left: 3px solid #22c55e; }
.partner-ledger-entry--debit  { border-left: 3px solid #f87171; }
.partner-ledger-entry--reversed {
  opacity: 0.55;
  border-left: 3px solid #94a3b8;
  text-decoration: line-through;
  text-decoration-color: #aaa;
}
.partner-ledger-entry__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}
.partner-ledger-entry__type {
  font-size: 0.78rem;
  font-weight: 700;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.partner-ledger-entry__desc {
  font-size: 0.88rem;
  color: #444;
  margin: 0.15rem 0;
}
.partner-ledger-entry__amounts {
  display: flex;
  gap: 0.75rem;
  margin: 0.3rem 0;
}
.partner-ledger-entry__cash {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1a1a;
}
.partner-ledger-entry__cr {
  font-size: 0.85rem;
  font-weight: 700;
  color: #6d28d9;
}
.partner-ledger-entry__note {
  font-size: 0.78rem;
  color: #666;
  margin: 0.2rem 0;
}
.partner-ledger-entry__date {
  font-size: 0.72rem;
  color: #999;
  margin-top: 0.3rem;
}
.partner-ledger-entry__footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

/* ── Acciones admin cuenta ── */
.partner-admin-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* ── Formulario de cuenta ── */
.partner-account-form .partner-request-form__label {
  display: block;
  font-size: 0.83rem;
  font-weight: 600;
  color: #444;
  margin: 0.75rem 0 0.25rem;
}
.partner-account-form .partner-request-form__input,
.partner-account-form .partner-request-form__textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 7px;
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
  background: #fafafa;
}
.partner-account-form .partner-request-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════
   8J — Lotes de mercancia e inventario
   ═══════════════════════════════════════════════════════════════════ */

/* ── Estado del lote ── */
.partner-lot-status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
}
.partner-lot-status--delivered { background: #dcfce7; color: #166534; }
.partner-lot-status--settled   { background: #dbeafe; color: #1e40af; }
.partner-lot-status--cancelled { background: #fee2e2; color: #991b1b; }
.partner-lot-status--draft     { background: #fef3c7; color: #92400e; }
.partner-lot-status--partial   { background: #ede9fe; color: #5b21b6; }

/* ── Pills de stock ── */
.partner-stock-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  white-space: nowrap;
}
.partner-stock-pill--remaining { background: #dcfce7; color: #166534; }
.partner-stock-pill--sold      { background: #dbeafe; color: #1e40af; }
.partner-stock-pill--damaged   { background: #fee2e2; color: #991b1b; }

/* ── Fila de pills de stock ── */
.partner-stock-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.4rem 0;
}

/* ── Alerta de inventario ── */
.partner-inventory-alert {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-left: 4px solid #ea580c;
  border-radius: 9px;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  color: #7c2d12;
  margin-bottom: 1rem;
}

/* ── Grid de acciones del socio (venta / daño) ── */
.partner-lot-action-grid {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

/* ── Lista de items del lote ── */
.partner-lot-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.partner-lot-item-card {
  background: #fafafa;
  border: 1px solid #e8e0e4;
  border-radius: 12px;
  padding: 0.9rem 1rem;
}
.partner-lot-item-card__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.35rem;
}

/* ── Movimiento de inventario ── */
.partner-inventory-movement {
  background: #fafafa;
  border: 1px solid #e8e0e4;
  border-left: 3px solid #c084fc;
  border-radius: 9px;
  padding: 0.65rem 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.partner-inventory-movement .partner-ledger-entry__note {
  width: 100%;
  margin: 0;
}
.partner-inventory-movement .partner-ledger-entry__date {
  width: 100%;
  margin: 0;
}

/* ── Resumen de lotes (grid tarjetas) ── */
.partner-lot-summary {
  margin-bottom: 1.25rem;
}

/* ── Formulario admin de lote (filas de items) ── */
.partner-admin-lot-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.partner-admin-lot-form__row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.partner-admin-lot-form__num {
  font-size: 0.8rem;
  font-weight: 700;
  color: #888;
  min-width: 1.25rem;
  text-align: right;
}
.partner-admin-lot-form__variant { flex: 3; min-width: 160px; }
.partner-admin-lot-form__qty    { flex: 1; min-width: 70px; }
.partner-admin-lot-form__price  { flex: 2; min-width: 110px; }


/* ═══════════════════════════════════════════════════════════════
   PARTNER SETTLEMENTS / CORTES
   ═════════════════════════════════════════════════════════════ */

/* Status badges */
.partner-settlement-status {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: 99px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.settlement-status--draft    { background: #f3f4f6; color: #6b7280; }
.settlement-status--open     { background: #dbeafe; color: #1d4ed8; }
.settlement-status--review   { background: #fef9c3; color: #a16207; }
.settlement-status--objected { background: #fee2e2; color: #b91c1c; }
.settlement-status--approved { background: #dcfce7; color: #15803d; }
.settlement-status--closed   { background: #e9d5ff; color: #6d28d9; }
.settlement-status--cancelled{ background: #f3f4f6; color: #9ca3af; }

/* Summary grid */
.partner-settlement-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}
.partner-settlement-summary__item {
  background: #fff;
  border: 1px solid #e8e0e4;
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.partner-settlement-summary__label {
  font-size: 0.72rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.partner-settlement-summary__value {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a1a2e;
}

/* Balance badges */
.partner-settlement-balance-badge--credit { color: #15803d; font-weight: 700; }
.partner-settlement-balance-badge--debit  { color: #b91c1c; font-weight: 700; }

/* Settlement card list */
.partner-settlement-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
}
.partner-settlement-card {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  background: #fff;
  border: 1px solid #e8e0e4;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s;
}
.partner-settlement-card:hover { box-shadow: 0 2px 10px rgba(80,30,100,0.08); }
.partner-settlement-card__header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.partner-settlement-card__folio {
  font-size: 0.82rem;
  color: #666;
  font-weight: 600;
}
.partner-settlement-card__period {
  font-size: 0.85rem;
  color: #333;
  grid-column: 1;
}
.partner-settlement-card__amounts {
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  grid-column: 1;
}
.partner-settlement-card__cr {
  font-size: 0.75rem;
  color: #7c3aed;
}
.partner-settlement-card__arrow {
  color: #bbb;
  font-size: 1.1rem;
  grid-row: 1 / 3;
  grid-column: 3;
  align-self: center;
}

/* Settlement lines */
.partner-settlement-lines {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.5rem;
}
.partner-settlement-line {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
}
.partner-settlement-line--credit {
  border-left: 3px solid #22c55e;
}
.partner-settlement-line--debit {
  border-left: 3px solid #ef4444;
}
.partner-settlement-line--admin-only {
  opacity: 0.7;
}
.partner-settlement-line__label {
  font-size: 0.85rem;
  color: #333;
  display: block;
  margin-bottom: 0.2rem;
}
.partner-settlement-line__amounts {
  display: flex;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: #555;
  flex-wrap: wrap;
}

/* Objection block */
.partner-settlement-objection {
  border-left: 3px solid #f97316;
  background: #fff7ed;
}

/* Actions row */
.partner-settlement-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* Admin form */
.partner-admin-settlement-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Filter bar */
.partner-admin-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

/* Danger button */
.btn--danger {
  background: #b91c1c;
  color: #fff;
  border-color: #b91c1c;
}
.btn--danger:hover { background: #991b1b; }

/* =========================================================
   8L — Data Cards & Expedients UX
   ========================================================= */

/* --- Data field grid --- */
.data-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.data-field {
  background: #fff;
  border: 1px solid var(--reysan-gray);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.data-field-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--reysan-pink-dark);
}
.data-field-value {
  font-size: 0.92rem;
  color: var(--reysan-brown);
  font-weight: 500;
  word-break: break-word;
}
.data-field--wide {
  grid-column: 1 / -1;
}

/* --- Reysan data panel & table --- */
.reysan-data-panel {
  background: #fff;
  border: 1px solid var(--reysan-gray);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 4px rgba(80,20,40,0.04);
}
.reysan-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin-bottom: 0;
}
.reysan-data-table th {
  background: var(--reysan-pink-dark);
  color: #fff;
  font-weight: 600;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.85rem;
  text-align: center;
  border: none;
}
.reysan-data-table td {
  padding: 0.55rem 0.85rem;
  border: none;
  border-bottom: 1px solid #f0e8eb;
  vertical-align: middle;
  color: var(--reysan-brown);
  text-align: left;
}
.reysan-data-table tbody tr:last-child td {
  border-bottom: none;
}
.reysan-data-table tbody tr:hover td {
  background: #fdf4f7;
}

/* Mobile card conversion */
@media (max-width: 600px) {
  .reysan-data-table--mobile-cards thead {
    display: none;
  }
  .reysan-data-table--mobile-cards tbody tr {
    display: block;
    margin: 0.65rem;
    border: 1px solid var(--reysan-gray);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    background: #fff;
  }
  .reysan-data-table--mobile-cards tbody tr:hover td {
    background: transparent;
  }
  .reysan-data-table--mobile-cards tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.22rem 0;
    border-bottom: 1px solid #f5eff2;
    font-size: 0.88rem;
    text-align: right;
  }
  .reysan-data-table--mobile-cards tbody td:last-child {
    border-bottom: none;
  }
  .reysan-data-table--mobile-cards tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--reysan-pink-dark);
    flex-shrink: 0;
    text-align: left;
    margin-right: 0.5rem;
    padding-top: 0.05rem;
  }
  .reysan-data-table--mobile-cards tbody td[data-label=""] {
    justify-content: flex-end;
    border-bottom: none;
    padding-top: 0.4rem;
  }
  .reysan-data-table--mobile-cards tbody td[data-label=""]::before {
    display: none;
  }
  .reysan-data-panel {
    overflow: visible;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
}

/* --- Horizontal timeline (desktop) / vertical (mobile) --- */
.timeline-h {
  display: flex;
  align-items: flex-start;
  position: relative;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}
.timeline-h::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: var(--reysan-gray);
  z-index: 0;
}
.timeline-h .order-timeline__item {
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 72px;
  text-align: center;
  padding: 0 0.25rem;
  position: relative;
}
.timeline-h .order-timeline__content {
  align-items: center;
}
.timeline-h .order-timeline__dot {
  margin-top: 0;
  z-index: 1;
  position: relative;
}
.timeline-h .order-timeline__label {
  font-size: 0.76rem;
  line-height: 1.25;
  max-width: 80px;
  text-align: center;
}

@media (max-width: 600px) {
  .timeline-h {
    flex-direction: column;
    overflow-x: visible;
    padding-bottom: 0;
    margin-bottom: 1rem;
  }
  .timeline-h::before {
    left: 10px;
    top: 0;
    bottom: 0;
    right: auto;
    width: 2px;
    height: auto;
  }
  .timeline-h .order-timeline__item {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    text-align: left;
    padding: 0.55rem 0;
    min-width: unset;
    flex: unset;
  }
  .timeline-h .order-timeline__content {
    align-items: flex-start;
  }
  .timeline-h .order-timeline__label {
    font-size: 0.92rem;
    max-width: none;
    text-align: left;
  }
}

/* --- Admin manage panel compact --- */
.admin-manage-panel--compact .admin-manage-section {
  padding: 0.65rem 1rem;
}
.admin-manage-panel--compact .admin-manage-section h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--reysan-pink-dark);
  margin-bottom: 0.45rem;
  font-weight: 700;
}
.admin-manage-panel--compact .admin-manage-row {
  margin-bottom: 0.35rem;
}
.admin-manage-panel--compact .admin-manage-row label {
  font-size: 0.72rem;
}
.admin-manage-panel--compact .admin-manage-row input,
.admin-manage-panel--compact .admin-manage-row select {
  padding: 0.25rem 0.5rem;
  font-size: 0.88rem;
}
.admin-manage-panel--compact .btn {
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

/* --- Payment proof preview cards --- */
.proof-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0.4rem 0 0;
}
.proof-preview-card {
  background: #fff;
  border: 1px solid var(--reysan-gray);
  border-radius: 8px;
  padding: 0.55rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  max-width: 180px;
}
.proof-preview-card__img {
  width: 150px;
  height: 100px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid #e8d8de;
  display: block;
}
.proof-preview-card__meta {
  font-size: 0.72rem;
  color: var(--reysan-gray-dark);
  text-align: center;
  line-height: 1.4;
}
.proof-preview-card__link {
  font-size: 0.78rem;
  color: var(--reysan-pink-dark);
  font-weight: 600;
  text-decoration: none;
}
.proof-preview-card__link:hover { text-decoration: underline; }
.proof-preview-card--archived {
  opacity: 0.6;
}

/* =========================================================
   8M — Premium Expedients Visual Redesign
   ========================================================= */

/* --- Expedient page container --- */
.expedient-page {
  max-width: 860px;
  margin: 0 auto;
}

/* --- Page header --- */
.expedient-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.expedient-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--reysan-brown);
  letter-spacing: -0.02em;
  margin: 0;
}
.expedient-header__nav {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

/* --- Status card (hero) --- */
.status-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  border: 2.5px solid #1a1a1a;
  margin-bottom: 1.5rem;
  background: #fff;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.08);
  flex-wrap: wrap;
}
.status-card__badge {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 0.45rem 1rem;
  border-radius: 8px;
  border: 1.5px solid transparent;
  white-space: nowrap;
  background: #f3f4f6;
  color: #374151;
}
.status-card__info {
  flex: 1;
  min-width: 120px;
}
.status-card__customer {
  font-size: 1rem;
  font-weight: 700;
  color: var(--reysan-brown);
}
.status-card__meta-row {
  font-size: 0.8rem;
  color: #888;
  margin-top: 0.15rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.status-card__folio {
  margin-left: auto;
  font-size: 0.68rem;
  color: #bbb;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: right;
}

/* Status color variants for the badge */
.status-card--confirmed .status-card__badge,
.status-card--completed .status-card__badge,
.status-card--payment_approved .status-card__badge {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
.status-card--payment_pending .status-card__badge,
.status-card--draft .status-card__badge {
  background: #fef9c3;
  color: #713f12;
  border-color: #fde047;
}
.status-card--payment_reported .status-card__badge,
.status-card--payment_under_review .status-card__badge {
  background: #dbeafe;
  color: #1e40af;
  border-color: #93c5fd;
}
.status-card--preparing .status-card__badge {
  background: #fff3cd;
  color: #856404;
  border-color: var(--reysan-gold);
}
.status-card--ready_for_pickup .status-card__badge {
  background: #ffe4ed;
  color: var(--reysan-pink-dark);
  border-color: var(--reysan-pink-light);
}
.status-card--cancelled .status-card__badge,
.status-card--expired .status-card__badge,
.status-card--failed_pickup .status-card__badge {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

/* --- Admin controls collapsible drawer --- */
.admin-controls-drawer {
  margin-bottom: 1.5rem;
  border: 1.5px solid #ffe082;
  border-radius: 10px;
  overflow: hidden;
}
.admin-controls-drawer > summary {
  padding: 0.55rem 1rem;
  background: #fff8e1;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #92400e;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  user-select: none;
}
.admin-controls-drawer > summary::-webkit-details-marker { display: none; }
.admin-controls-drawer > summary::after {
  content: "▾";
  margin-left: auto;
  font-size: 0.85rem;
  transition: transform 0.18s;
}
.admin-controls-drawer[open] > summary::after {
  transform: rotate(180deg);
}
.admin-controls-drawer__body {
  padding: 0.75rem;
  background: #fffef5;
}
.admin-controls-drawer__body .admin-manage-panel {
  margin-bottom: 0;
}

/* --- Expedient section module --- */
.expedient-section {
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.06);
}
.expedient-section__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  background: #1a1a1a;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.expedient-section__body {
  padding: 0.9rem;
}
.expedient-section__body .data-card-grid {
  margin-bottom: 0;
}
.expedient-section__empty {
  padding: 0.9rem;
  color: var(--reysan-gray-dark);
  font-size: 0.88rem;
}

/* --- Product card grid --- */
.product-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 0.7rem;
  padding: 0.85rem;
}
.product-card {
  background: #fafafa;
  border: 1.5px solid #e8e8e8;
  border-radius: 10px;
  padding: 0.85rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.product-card:hover {
  border-color: var(--reysan-pink-light);
  box-shadow: 0 2px 8px rgba(239,90,134,0.1);
}
.product-card__flavor {
  font-weight: 800;
  font-size: 0.97rem;
  color: var(--reysan-brown);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.product-card__type {
  font-size: 0.73rem;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}
.product-card__divider {
  border: none;
  border-top: 1px solid #ececec;
  margin: 0.3rem 0;
}
.product-card__qty {
  font-size: 1rem;
  color: var(--reysan-pink-dark);
  font-weight: 800;
}
.product-card__unit-price {
  font-size: 0.73rem;
  color: #aaa;
  margin-bottom: 0.1rem;
}
.product-card__subtotal {
  margin-top: auto;
  font-size: 1rem;
  font-weight: 800;
  color: var(--reysan-brown);
  border-top: 1px solid #f0e8eb;
  padding-top: 0.35rem;
}

/* --- Payment card --- */
.payment-card {
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 1rem;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.05);
}
.payment-card:last-child { margin-bottom: 0; }
.payment-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  background: #1a1a1a;
  color: #fff;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.payment-card__id-amount {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.payment-card__id {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
}
.payment-card__amount {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.payment-card__status-pill {
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.payment-card__status-pill--ok     { background: #dcfce7; color: #166534; }
.payment-card__status-pill--review { background: #dbeafe; color: #1e40af; }
.payment-card__status-pill--rejected { background: #fee2e2; color: #b91c1c; }
.payment-card__status-pill--pending { background: #fef9c3; color: #713f12; }
.payment-card__fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
  padding: 0.85rem;
}
.payment-card__fields .data-field { margin-bottom: 0; }
.payment-card__proofs-section {
  border-top: 1px solid #f0f0f0;
  padding: 0.65rem 0.85rem 0.85rem;
}
.payment-card__proofs-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #aaa;
  margin-bottom: 0.5rem;
}

/* --- History list (status history timeline) --- */
.history-list {
  position: relative;
  padding: 0.6rem 1rem;
}
.history-list::before {
  content: "";
  position: absolute;
  left: calc(1rem + 9px);
  top: 1.1rem;
  bottom: 1.1rem;
  width: 2px;
  background: #e8e8e8;
}
.history-entry {
  display: flex;
  gap: 0.85rem;
  padding: 0.4rem 0;
  position: relative;
}
.history-entry__dot {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid #e0e0e0;
  z-index: 1;
  position: relative;
  margin-top: 0.2rem;
}
.history-entry:first-child .history-entry__dot {
  background: var(--reysan-pink-dark);
  border-color: var(--reysan-pink-dark);
}
.history-entry__body {
  flex: 1;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #f5f5f5;
}
.history-entry:last-child .history-entry__body {
  border-bottom: none;
  padding-bottom: 0;
}
.history-entry__new-status {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--reysan-brown);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.history-entry__meta {
  font-size: 0.74rem;
  color: #aaa;
  margin-top: 0.1rem;
}
.history-entry__note {
  display: inline-block;
  font-size: 0.78rem;
  color: #666;
  margin-top: 0.15rem;
  font-style: italic;
  background: #fafafa;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
}

/* --- Info chip --- */
.info-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.18rem 0.5rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  background: #f5f5f5;
  color: #555;
  border: 1px solid #e8e8e8;
}
.info-chip--gold  { background: #fff8e1; color: #92400e; border-color: var(--reysan-gold); }
.info-chip--pink  { background: #ffe4ed; color: var(--reysan-pink-dark); border-color: var(--reysan-pink-light); }
.info-chip--green { background: #dcfce7; color: #166534; border-color: #86efac; }
.info-chip--red   { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }

/* --- Timeline 8M enhancements (admin only) --- */
.order-timeline--admin.timeline-h .order-timeline__dot {
  width: 28px;
  height: 28px;
}
.order-timeline--admin.timeline-h::before {
  top: 13px;
  height: 3px;
}

/* --- 8M Mobile adjustments --- */
@media (max-width: 600px) {
  .expedient-title { font-size: 1.2rem; }
  .status-card {
    gap: 0.65rem;
    padding: 0.85rem 1rem;
  }
  .status-card__folio {
    width: 100%;
    text-align: left;
    margin-left: 0;
  }
  .product-card-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.65rem;
  }
  .product-card { padding: 0.65rem 0.75rem; }
  .product-card__flavor { font-size: 0.88rem; }
  .product-card__subtotal { font-size: 0.95rem; }
  .payment-card__header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .payment-card__amount { font-size: 1.35rem; }
  .payment-card__fields { grid-template-columns: 1fr 1fr; }
  .expedient-section__body { padding: 0.7rem; }
  .history-list::before { left: calc(0.7rem + 9px); }
  .order-timeline--admin.timeline-h .order-timeline__dot {
    width: 22px;
    height: 22px;
  }
  .order-timeline--admin.timeline-h::before {
    top: 0;
    height: 2px;
  }
}

/* ============================================================
   8N — REYSAN DESIGN SYSTEM FOUNDATION
   Canonical reusable components across all app templates
   ============================================================ */

/* --- summary-stat ----------------------------------------- */
.summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0.5rem;
  text-align: center;
}
.summary-stat__value {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--reysan-brown);
  line-height: 1;
}
.summary-stat__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--reysan-gray-dark);
  margin-top: 0.25rem;
}
.summary-stat--accent .summary-stat__value { color: var(--reysan-pink-dark); }
.summary-stat--gold .summary-stat__value   { color: var(--reysan-gold); }
.summary-stat--positive .summary-stat__value { color: #15803d; }
.summary-stat--negative .summary-stat__value { color: #b91c1c; }

/* --- empty-state ------------------------------------------ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--reysan-gray-dark);
}
.empty-state__icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  opacity: 0.6;
}
.empty-state__title {
  font-size: 0.97rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.35rem;
}
.empty-state__text {
  font-size: 0.85rem;
  margin: 0;
}

/* --- section-header --------------------------------------- */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.section-header__title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}
.section-header__action {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--reysan-pink-dark);
  text-decoration: none;
  white-space: nowrap;
}
.section-header__action:hover { text-decoration: underline; }

/* --- filter-bar ------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

/* --- dashboard-hero --------------------------------------- */
.dashboard-hero {
  background: #1a1a1a;
  color: #fff;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.dashboard-hero__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
}
.dashboard-hero__title {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
}

/* 8N responsive */
@media (max-width: 600px) {
  .summary-stat__value  { font-size: 1.35rem; }
  .dashboard-hero__title { font-size: 1.25rem; }
  .dashboard-hero       { padding: 1rem 1.1rem; }
}

/* ============================================================
   8O — BUTTONS & LINKS VISUAL NORMALIZATION
   Canonical .btn-reysan system. No action should look like
   a plain hyperlink. Every interactive element has visual form.
   ============================================================ */

/* --- Complete the existing .btn system -------------------- */
.btn--xs {
  font-size: 0.72rem;
  padding: 0.18rem 0.55rem;
}
.btn--ghost {
  background: #fff;
  color: #4b5563;
  border: 1.5px solid #d1d5db;
}
.btn--ghost:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #1a1a1a;
  text-decoration: none;
}

/* --- .btn-back -------------------------------------------- */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #4b5563;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  cursor: pointer;
}
.btn-back:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #1a1a1a;
  text-decoration: none;
}

/* --- .btn-reysan — canonical documented button system ----- */
.btn-reysan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.01em;
  border-radius: 6px;
  border: 2px solid var(--reysan-pink-dark);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  background: var(--reysan-pink-dark);
  color: #fff;
}
.btn-reysan:hover {
  background: var(--reysan-pink-hover);
  border-color: var(--reysan-pink-hover);
  color: #fff;
  text-decoration: none;
}
.btn-reysan--primary {
  background: var(--reysan-pink-dark);
  border-color: var(--reysan-pink-dark);
  color: #fff;
}
.btn-reysan--primary:hover {
  background: var(--reysan-pink-hover);
  border-color: var(--reysan-pink-hover);
}
.btn-reysan--secondary {
  background: transparent;
  border-color: var(--reysan-pink-dark);
  color: var(--reysan-pink-dark);
}
.btn-reysan--secondary:hover {
  background: var(--reysan-pink-subtle);
  color: var(--reysan-pink-dark);
}
.btn-reysan--dark {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
.btn-reysan--dark:hover {
  background: #333;
  border-color: #333;
  color: #fff;
}
.btn-reysan--gold {
  background: var(--reysan-gold);
  border-color: var(--reysan-gold);
  color: #1a1a1a;
  font-weight: 800;
}
.btn-reysan--gold:hover {
  background: #c8a43a;
  border-color: #c8a43a;
  color: #1a1a1a;
}
.btn-reysan--danger {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.btn-reysan--danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}
.btn-reysan--success {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.btn-reysan--success:hover {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
}
.btn-reysan--ghost {
  background: #fff;
  border-color: #d1d5db;
  color: #4b5563;
}
.btn-reysan--ghost:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #1a1a1a;
}
.btn-reysan--sm { font-size: 0.78rem; padding: 0.28rem 0.75rem; }
.btn-reysan--lg { font-size: 1.05rem; padding: 0.7rem 1.8rem; }
.btn-reysan--full { width: 100%; display: flex; justify-content: center; }

/* --- Normalize weak custom-class links -------------------- */
/* Override earlier definitions that looked like plain hyperlinks.
   Same selectors, later in cascade — positional properties are
   preserved from earlier rules; only visual properties change. */

.partner-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #4b5563;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.partner-back-link:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #1a1a1a;
  text-decoration: none;
}

.chess-board-header__back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.28rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #4b5563;
  text-decoration: none;
  letter-spacing: 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.chess-board-header__back:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #1a1a1a;
  text-decoration: none;
}

.profile-see-all-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.35rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--reysan-pink-dark);
  border: 1.5px solid var(--reysan-pink-dark);
  border-radius: 6px;
  background: transparent;
  text-decoration: none;
  transition: background 0.12s;
  margin-top: 0.5rem;
}
.profile-see-all-link:hover {
  background: var(--reysan-pink-subtle);
  text-decoration: none;
}

.profile-warning__link {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--reysan-pink-dark);
  border: 1.5px solid var(--reysan-pink-dark);
  border-radius: 6px;
  background: transparent;
  text-decoration: none;
  transition: background 0.12s;
}
.profile-warning__link:hover {
  background: var(--reysan-pink-subtle);
  text-decoration: none;
}

/* Lift color specificity so .btn classes win inside nav components */
.admin-expediente-nav a { color: inherit; }

/* 8O responsive */
@media (max-width: 600px) {
  .btn-reysan--lg { font-size: 0.92rem; padding: 0.55rem 1.3rem; }
  .btn-reysan--full { font-size: 0.88rem; }
  .btn-back { font-size: 0.78rem; }
}

/* ============================================================
   8V — AUTH FORMS UX
   Components: auth-header, auth-field, auth-errors, auth-links
   Applied to: login, registro, editar_telefono
   ============================================================ */

/* Upgrade .form-page to match Reysan physical card style */
.form-page {
  border: 2px solid #1a1a1a;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.10);
}

/* --- auth-header ------------------------------------------ */
.auth-header {
  text-align: center;
  margin-bottom: 1.75rem;
}
.auth-header__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--reysan-pink-dark);
  margin-bottom: 0.5rem;
}
.auth-header__title {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 0.4rem;
  color: var(--reysan-brown);
}
.auth-header__tagline {
  font-size: 0.82rem;
  color: var(--reysan-gray-dark);
  text-transform: none;
  margin: 0;
}

/* --- auth-field ------------------------------------------- */
.auth-field {
  margin-bottom: 1rem;
}
.auth-field__label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
  color: var(--reysan-brown);
}
.auth-field input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1.5px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--reysan-brown);
  background: #fff;
  transition: border-color 0.12s;
  text-transform: none;
}
.auth-field input:focus {
  outline: none;
  border-color: var(--reysan-pink-dark);
}
.auth-field__help {
  font-size: 0.72rem;
  color: var(--reysan-gray-dark);
  margin: 0.25rem 0 0;
  text-transform: none;
  line-height: 1.5;
}
.auth-field__help ul { margin: 0.25rem 0 0 1rem; padding: 0; }
.auth-field__help li { margin-bottom: 0.1rem; }
.auth-field__error {
  font-size: 0.78rem;
  color: #b91c1c;
  font-weight: 700;
  margin: 0.25rem 0 0;
}

/* --- auth-errors (non-field) ------------------------------ */
.auth-errors {
  background: #fef2f2;
  border: 1.5px solid #b91c1c;
  border-radius: 6px;
  padding: 0.6rem 0.85rem;
  margin-bottom: 1rem;
}
.auth-errors p {
  font-size: 0.82rem;
  color: #b91c1c;
  font-weight: 700;
  margin: 0;
}

/* --- auth-submit & auth-links ----------------------------- */
.auth-submit { width: 100%; margin-top: 0.5rem; }

.auth-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--reysan-gray);
}

/* 8V responsive */
@media (max-width: 480px) {
  .auth-header__title { font-size: 1.25rem; }
  .form-page { padding: 1.5rem 1.25rem; }
}

/* ── 9A: Nuevos componentes beta ──────────────────────────────────── */

/* Payment review cards (reemplaza tabla en admin_lista) */
.payment-review-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}
.payment-review-card {
  background: #fff;
  border: 1.5px solid var(--reysan-gray, #e8ddd0);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.payment-review-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.payment-review-card__folio {
  font-weight: 800;
  font-size: 1rem;
  color: var(--reysan-brown, #3b2a1a);
  text-decoration: none;
  letter-spacing: 0.03em;
}
.payment-review-card__folio:hover { text-decoration: underline; }
.payment-review-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  font-size: 0.88rem;
  color: var(--reysan-brown, #3b2a1a);
  margin-bottom: 0.5rem;
}
.payment-review-card__monto { font-weight: 700; }
.payment-review-card__fecha { opacity: 0.6; }
.payment-review-card__rejection-note {
  font-size: 0.82rem;
  color: #c0392b;
  background: #fdf0f0;
  border-left: 3px solid #e74c3c;
  padding: 0.4rem 0.7rem;
  margin: 0.4rem 0;
  border-radius: 0 4px 4px 0;
}
.payment-review-card__proofs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.6rem 0;
}
.payment-review-card__proof-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-decoration: none;
}
.payment-review-card__proof-thumb img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid var(--reysan-gray, #e8ddd0);
}
.payment-review-card__proof-thumb--archived img { opacity: 0.5; filter: grayscale(0.5); }
.payment-review-card__proof-label {
  font-size: 0.68rem;
  color: #888;
  text-align: center;
}
.proof-thumb-fallback {
  width: 72px; height: 72px;
  border-radius: 6px;
  background: #f0ebe5;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #888;
  border: 2px dashed #ccc;
}
.payment-review-card__no-proof { font-size: 0.82rem; margin: 0.4rem 0; }
.payment-review-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  align-items: flex-start;
}
.btn-reysan--positive {
  background: #27ae60; color: #fff; border: none;
  padding: 0.45rem 1.1rem; border-radius: 6px; font-weight: 700;
  cursor: pointer; font-size: 0.9rem;
}
.btn-reysan--positive:hover { background: #219a52; }
.btn-reysan--danger {
  background: #e74c3c; color: #fff; border: none;
  padding: 0.45rem 1.1rem; border-radius: 6px; font-weight: 700;
  cursor: pointer; font-size: 0.9rem; list-style: none; display: block;
}
.btn-reysan--danger:hover { background: #c0392b; }
.payment-reject-details { position: relative; }
.payment-reject-panel {
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 0;
  background: #fff;
  border: 1.5px solid #e8ddd0;
  border-radius: 8px;
  padding: 0.8rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.13);
  z-index: 50;
  min-width: 280px;
}
.payment-reject-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.payment-reject-textarea {
  width: 100%;
  border: 1.5px solid #ccc;
  border-radius: 6px;
  padding: 0.4rem;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  resize: vertical;
}

/* Catalog long-press glow */
@keyframes reysan-longpress-vibe {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-3px); }
  40%  { transform: translateX(3px); }
  60%  { transform: translateX(-2px); }
  80%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
.flavor-card--longpress .flavor-card__link,
.flavor-card--longpress .flavor-card__item {
  border: 3px solid #00ff88 !important;
  box-shadow: 0 0 14px #00ff88, 0 0 28px #d4af37 !important;
  border-radius: 10px;
  animation: reysan-longpress-vibe 0.35s ease-in-out;
}

/* Referral code copy button */
.profile-referral-card__code-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.profile-referral-card__copy-code {
  font-size: 0.8rem;
  padding: 0.25rem 0.75rem;
}

/* Unified code tags in cart */
.code-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 0;
  margin-bottom: 0.5rem;
}
.code-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--reysan-cream, #faf6f0);
  border: 1.5px solid var(--reysan-pink-dark, #c47b8a);
  border-radius: 20px;
  padding: 0.2rem 0.65rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--reysan-brown, #3b2a1a);
  letter-spacing: 0.04em;
}
.code-tag__remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--reysan-pink-dark, #c47b8a);
  padding: 0;
  display: flex;
  align-items: center;
}
.code-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.code-input-row .referral-code-input {
  flex: 1;
  min-width: 0;
}
.code-error {
  font-size: 0.8rem;
  color: #b91c1c;
  background: #fff5f5;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  margin-top: 0.4rem;
}
.code-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.4rem;
}
.code-breakdown__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  padding: 0.25rem 0.6rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
}
.code-breakdown__label { color: #166534; font-weight: 600; }
.code-breakdown__effect { color: #15803d; font-weight: 700; white-space: nowrap; }

/* ==========================================================
   9D — Support Ticket System
   ========================================================== */

/* ── Floating support panel ── */
.support-panel {
  position: fixed;
  bottom: 72px; /* above mobile bottom nav */
  left: 0;
  z-index: 900;
  display: flex;
  align-items: flex-end;
}

.support-tab {
  background: var(--reysan-bg, #F7F8E4);
  border: 2px solid #1a1a1a;
  border-left: none;
  border-radius: 0 6px 6px 0;
  padding: 0.5rem 0.35rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0 #1a1a1a;
  transition: background 0.15s;
}
.support-tab:hover {
  background: var(--reysan-pink-subtle, #fce8ef);
}
.support-tab__text {
  color: var(--reysan-pink-dark, #CC446E);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  line-height: 1;
  text-transform: uppercase;
}

/* Expanded menu */
.support-menu {
  background: var(--reysan-bg, #F7F8E4);
  border: 2px solid #1a1a1a;
  border-left: none;
  border-radius: 0 10px 10px 0;
  box-shadow: 3px 3px 0 #1a1a1a;
  min-width: 220px;
  overflow: hidden;
  animation: support-slide-in 0.18s ease;
}
@keyframes support-slide-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

.support-panel--open .support-tab {
  border-radius: 0;
  border-right: none;
}

.support-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem 0.45rem;
  border-bottom: 2px solid #1a1a1a;
  background: var(--reysan-pink-dark, #CC446E);
}
.support-menu__title {
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.support-menu__close {
  background: none;
  border: none;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.support-menu__options {
  list-style: none;
  margin: 0;
  padding: 0.3rem 0;
}
.support-menu__separator {
  border-top: 1px solid var(--reysan-gray, #e0d5d8);
  margin: 0.25rem 0.5rem;
}

.support-menu__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--reysan-brown, #4D2003);
  text-decoration: none;
  transition: background 0.12s;
}
.support-menu__item:hover {
  background: var(--reysan-pink-subtle, #fce8ef);
  color: var(--reysan-pink-dark, #CC446E);
}
.support-menu__item--admin {
  color: var(--reysan-gray-dark, #7a6570);
}
.support-menu__item--admin:hover {
  color: var(--reysan-gold, #FEA621);
  background: #fff8ee;
}
.support-menu__item-icon {
  font-size: 1rem;
  line-height: 1;
}

@media (min-width: 768px) {
  .support-panel {
    bottom: 1.5rem;
  }
}

/* ── Support form page ── */
.support-form-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 1rem 0 3rem;
}
.support-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.25rem;
}
.support-form__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.support-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.support-field__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--reysan-brown, #4D2003);
  text-transform: uppercase;
}
.support-field input,
.support-field textarea,
.support-field select {
  border: 1.5px solid #1a1a1a;
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  font-size: 0.9rem;
  background: #fff;
  color: var(--reysan-brown, #4D2003);
  width: 100%;
}
.support-field input:focus,
.support-field textarea:focus,
.support-field select:focus {
  outline: 2px solid var(--reysan-pink-dark, #CC446E);
}
.support-field__help {
  font-size: 0.68rem;
  color: var(--reysan-gray-dark, #7a6570);
}
.support-field__error {
  font-size: 0.68rem;
  color: #d32f2f;
  font-weight: 600;
}
.support-field--error input,
.support-field--error textarea,
.support-field--error select {
  border-color: #d32f2f;
}

.support-snapshot-notice {
  background: #fff8ee;
  border: 1.5px solid var(--reysan-gold, #FEA621);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.78rem;
  color: var(--reysan-brown, #4D2003);
  margin-bottom: 0.5rem;
}

/* ── Admin list ── */
.support-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.support-card {
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  padding: 1rem;
  text-decoration: none;
  color: var(--reysan-brown, #4D2003);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 2px 2px 0 #1a1a1a;
  transition: box-shadow 0.1s, transform 0.1s;
}
.support-card:hover {
  box-shadow: 4px 4px 0 var(--reysan-pink-dark, #CC446E);
  transform: translate(-1px, -1px);
}

.support-card__header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.support-card__icon { font-size: 1.1rem; }
.support-card__type { flex: 1; color: var(--reysan-gray-dark, #7a6570); }

.support-card__title {
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
.support-card__description {
  font-size: 0.78rem;
  color: var(--reysan-gray-dark, #7a6570);
  margin: 0;
  line-height: 1.4;
}
.support-card__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.support-card__tags {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.support-card__footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.65rem;
  color: var(--reysan-gray-dark, #7a6570);
  flex-wrap: wrap;
  margin-top: auto;
}
.support-card__reporter { font-weight: 600; }
.support-card__date { margin-left: auto; }
.support-card__attachment-count { color: var(--reysan-pink-dark, #CC446E); }

.support-card__thumbnail-wrap {
  border-radius: 6px;
  overflow: hidden;
  max-height: 120px;
}
.support-card__thumbnail {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

/* ── Status + Priority badges (shared card + detail) ── */
.support-card__status,
.support-card__priority,
.support-card__category {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  border: 1.5px solid currentColor;
}

.support-status--nuevo    { color: var(--reysan-pink-dark, #CC446E); background: var(--reysan-pink-subtle, #fce8ef); }
.support-status--progreso { color: #0077bb; background: #e8f4ff; }
.support-status--completado { color: #2d7a2d; background: #e8f5e8; }
.support-status--archivado { color: var(--reysan-gray-dark, #7a6570); background: var(--reysan-gray, #e0d5d8); }

.support-priority--p0 { color: #b71c1c; background: #ffebee; }
.support-priority--p1 { color: #e65100; background: #fff3e0; }
.support-priority--p2 { color: #1565c0; background: #e3f2fd; }
.support-priority--p3 { color: var(--reysan-gray-dark, #7a6570); background: var(--reysan-gray, #e0d5d8); }

.support-card__category {
  color: var(--reysan-gray-dark, #7a6570);
  background: #f5f5f5;
  border-color: var(--reysan-gray, #e0d5d8);
}

/* ── Tag chips ── */
.support-tag-chip {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.1rem 0.4rem;
  border-radius: 20px;
  background: var(--reysan-pink-subtle, #fce8ef);
  color: var(--reysan-pink-dark, #CC446E);
  border: 1px solid var(--reysan-pink-light, #E298B0);
  text-decoration: none;
  transition: background 0.12s;
}
.support-tag-chip:hover,
.support-tag-chip--active {
  background: var(--reysan-pink-dark, #CC446E);
  color: #fff;
  border-color: var(--reysan-pink-dark, #CC446E);
}
.support-tag-chip--sm { font-size: 0.58rem; padding: 0.08rem 0.32rem; }

/* ── Filter bar support extras ── */
.filter-bar--support { margin-top: 0.5rem; }
.filter-bar__tags {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0.5rem 0 0;
}
.filter-bar__tags-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--reysan-gray-dark, #7a6570);
  text-transform: uppercase;
}

/* ── Admin detail page ── */
.support-detail-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 1rem;
}
.support-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .support-detail-grid {
    grid-template-columns: 1fr 320px;
    align-items: start;
  }
}
.support-detail-description {
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre-wrap;
}
.support-detail-url {
  font-size: 0.78rem;
  word-break: break-all;
  font-family: monospace;
}
.support-detail-small {
  font-size: 0.72rem;
  word-break: break-all;
  font-family: monospace;
  color: var(--reysan-gray-dark, #7a6570);
}

.support-attachments-grid {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.support-attachment-card {
  border: 1.5px solid #1a1a1a;
  border-radius: 8px;
  overflow: hidden;
  width: 150px;
  background: #fff;
  box-shadow: 1px 1px 0 #1a1a1a;
}
.support-attachment-thumb {
  width: 150px;
  height: 100px;
  object-fit: cover;
  display: block;
}
.support-attachment-meta {
  padding: 0.35rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.support-attachment-type {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--reysan-pink-dark, #CC446E);
}
.support-attachment-name {
  font-size: 0.65rem;
  word-break: break-all;
  color: var(--reysan-brown, #4D2003);
}
.support-attachment-size {
  font-size: 0.6rem;
  color: var(--reysan-gray-dark, #7a6570);
}

.support-admin-notes {
  background: #fff8ee;
  border: 1.5px solid var(--reysan-gold, #FEA621);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  margin-top: 0.5rem;
}

/* ── Copy section ── */
.support-copy-section { margin-top: 1rem; }
.support-copy-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.support-copy-preview {
  margin-bottom: 1rem;
}
.support-copy-preview__label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--reysan-gray-dark, #7a6570);
  margin-bottom: 0.35rem;
}
.support-copy-preview__textarea {
  width: 100%;
  font-family: monospace;
  font-size: 0.75rem;
  border: 1.5px solid #1a1a1a;
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  background: #f9f9f9;
  color: var(--reysan-brown, #4D2003);
  resize: vertical;
}

/* ── Update form sidebar ── */
.support-update-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* ── Success page ── */
.support-success-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* ── Dashboard hero support variant ── */
.dashboard-hero--support .dashboard-hero__icon { font-size: 2.5rem; }

/* ── Attachment actions ── */
.support-attachment-actions {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  padding: 0.35rem 0.5rem 0.5rem;
}

/* ==========================================================
   9E — Area Explorer, Dev Tasks, Paint Editor
   ========================================================== */

/* ── Support admin nav quick links ── */
.support-admin-nav {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 0.25rem;
}

/* ── Area Explorer ── */
.area-explorer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
@media (min-width: 900px) {
  .area-explorer {
    grid-template-columns: 260px 1fr;
    align-items: start;
  }
}

/* Tree */
.area-tree {
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  box-shadow: 2px 2px 0 #1a1a1a;
  overflow: hidden;
}
.area-tree__header {
  background: var(--reysan-pink-dark, #CC446E);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 0.5rem 0.75rem;
}
.area-tree__list,
.area-tree__children {
  list-style: none;
  margin: 0;
  padding: 0.3rem 0;
}
.area-tree__children {
  padding-left: 0;
  border-top: 1px solid var(--reysan-gray, #e0d5d8);
  background: #fafafa;
}
.area-tree__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--reysan-brown, #4D2003);
  text-decoration: none;
  transition: background 0.12s;
  cursor: pointer;
}
.area-tree__item:hover { background: var(--reysan-pink-subtle, #fce8ef); }
.area-tree__item--active {
  background: var(--reysan-pink-subtle, #fce8ef);
  color: var(--reysan-pink-dark, #CC446E);
  font-weight: 700;
}
.area-tree__item--child { padding-left: 1.75rem; font-size: 0.68rem; }
.area-tree__icon { font-size: 0.9rem; }
.area-tree__name { flex: 1; }
.area-tree__count {
  font-size: 0.62rem;
  background: var(--reysan-gray, #e0d5d8);
  border-radius: 10px;
  padding: 0.05rem 0.35rem;
  color: var(--reysan-gray-dark, #7a6570);
}
.area-tree__badge {
  font-size: 0.58rem;
  font-weight: 700;
  background: var(--reysan-pink-dark, #CC446E);
  color: #fff;
  border-radius: 10px;
  padding: 0.05rem 0.3rem;
  min-width: 1.2em;
  text-align: center;
}

/* Area content (right side) */
.area-content {
  min-width: 0;
}
.area-content__header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.area-content__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: var(--reysan-brown, #4D2003);
}
.area-content__stats {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.area-content__path {
  font-size: 0.7rem;
  font-family: monospace;
  color: var(--reysan-gray-dark, #7a6570);
  background: #f5f5f5;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  display: inline-block;
}

/* Area summary grid (no selection) */
.area-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.area-summary-card {
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 8px;
  padding: 0.85rem;
  text-decoration: none;
  color: var(--reysan-brown, #4D2003);
  text-align: center;
  box-shadow: 2px 2px 0 #1a1a1a;
  transition: box-shadow 0.1s, transform 0.1s;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.area-summary-card:hover {
  box-shadow: 4px 4px 0 var(--reysan-pink-dark, #CC446E);
  transform: translate(-1px, -1px);
}
.area-summary-card__icon { font-size: 1.5rem; }
.area-summary-card__name { font-size: 0.75rem; font-weight: 700; }
.area-summary-card__count { font-size: 0.65rem; color: var(--reysan-gray-dark, #7a6570); }
.area-summary-card__nuevo {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--reysan-pink-dark, #CC446E);
  background: var(--reysan-pink-subtle, #fce8ef);
  border-radius: 4px;
  padding: 0.05rem 0.25rem;
  display: inline-block;
  margin: 0 auto;
}

/* ── Dev Task styles ── */
.devtask-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.devtask-card {
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  padding: 1rem;
  text-decoration: none;
  color: var(--reysan-brown, #4D2003);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  box-shadow: 2px 2px 0 #1a1a1a;
  transition: box-shadow 0.1s, transform 0.1s;
}
.devtask-card:hover {
  box-shadow: 4px 4px 0 var(--reysan-pink-dark, #CC446E);
  transform: translate(-1px, -1px);
}
.devtask-card__header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.devtask-card__title {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0;
}
.devtask-card__desc {
  font-size: 0.78rem;
  color: var(--reysan-gray-dark, #7a6570);
  margin: 0;
}
.devtask-card__footer {
  display: flex;
  gap: 0.75rem;
  font-size: 0.65rem;
  color: var(--reysan-gray-dark, #7a6570);
}
.devtask-card__iteration {
  font-size: 0.62rem;
  font-weight: 700;
  background: #fff8ee;
  border: 1px solid var(--reysan-gold, #FEA621);
  color: var(--reysan-brown, #4D2003);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
}
.devtask-card__status,
.devtask-status--pendiente,
.devtask-status--parcial,
.devtask-status--completado {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  border: 1.5px solid currentColor;
}
.devtask-status--pendiente { color: #0077bb; background: #e8f4ff; }
.devtask-status--parcial   { color: #e65100; background: #fff3e0; }
.devtask-status--completado { color: #2d7a2d; background: #e8f5e8; }

/* Dev task detail */
.devtask-ticket-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; }
.devtask-ticket-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: #fafafa;
  border: 1px solid var(--reysan-gray, #e0d5d8);
  border-radius: 6px;
  flex-wrap: wrap;
}
.devtask-ticket-link {
  flex: 1;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--reysan-pink-dark, #CC446E);
  text-decoration: none;
}
.devtask-ticket-link:hover { text-decoration: underline; }
.devtask-link-section { margin-top: 0.75rem; }
.devtask-link-summary {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--reysan-pink-dark, #CC446E);
  padding: 0.3rem 0;
}
.devtask-link-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.5rem 0;
}
.support-detail-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.68rem;
  color: var(--reysan-gray-dark, #7a6570);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--reysan-gray, #e0d5d8);
}

/* ── Diary draft ── */
.support-diary-section { margin-top: 0.5rem; }
.support-diary-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: #fff8ee;
  border: 1.5px solid var(--reysan-gold, #FEA621);
  color: var(--reysan-brown, #4D2003);
  margin-bottom: 0.5rem;
}
.support-diary-badge--ok {
  background: #e8f5e8;
  border-color: #2d7a2d;
  color: #2d7a2d;
}
.support-diary-meta {
  font-size: 0.65rem;
  color: var(--reysan-gray-dark, #7a6570);
  margin-left: 0.5rem;
}
.support-diary-text {
  background: #fafafa;
  border: 1.5px solid var(--reysan-gray, #e0d5d8);
  border-radius: 8px;
  padding: 0.75rem;
  font-family: monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
  margin: 0.5rem 0;
  overflow-x: auto;
}
.support-diary-help {
  font-size: 0.75rem;
  color: var(--reysan-gray-dark, #7a6570);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}
.support-diary-confirmed, .support-diary-pending {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ── Paint Editor ── */
.paint-editor-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 900px;
  margin: 0 auto 2rem;
}

.paint-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: var(--reysan-bg, #F7F8E4);
  border: 2px solid #1a1a1a;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  box-shadow: 2px 2px 0 #1a1a1a;
}
.paint-toolbar--inline {
  border-radius: 0 0 8px 8px;
  border-top: none;
  box-shadow: none;
}
.paint-toolbar__group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.paint-tool {
  background: #fff;
  border: 1.5px solid #1a1a1a;
  border-radius: 5px;
  padding: 0.25rem 0.45rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.1s;
  min-width: 2rem;
  text-align: center;
}
.paint-tool:hover { background: var(--reysan-pink-subtle, #fce8ef); }
.paint-tool--active {
  background: var(--reysan-pink-dark, #CC446E);
  color: #fff;
  border-color: var(--reysan-pink-dark, #CC446E);
}
.paint-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--reysan-brown, #4D2003);
}
.paint-color {
  width: 2rem;
  height: 1.8rem;
  border: 1.5px solid #1a1a1a;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}
.paint-size { width: 80px; }

.paint-canvas-wrap {
  border: 2px solid #1a1a1a;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 2px 2px 0 #1a1a1a;
  max-width: 100%;
  overflow-x: auto;
}
.paint-canvas-wrap--inline {
  max-height: 400px;
  overflow-y: auto;
}
#paint-canvas {
  display: block;
  max-width: 100%;
  cursor: crosshair;
  touch-action: none;
}

.paint-text-input {
  position: fixed;
  display: none;
  border: 1.5px dashed var(--reysan-pink-dark, #CC446E);
  background: rgba(255,255,255,0.9);
  padding: 0.2rem 0.4rem;
  font-family: system-ui, sans-serif;
  z-index: 1100;
  border-radius: 4px;
  min-width: 120px;
}

.paint-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.paint-save-note {
  font-size: 0.65rem;
  color: var(--reysan-gray-dark, #7a6570);
}

/* Inline paint (in forms) */
.paint-inline {
  border: 2px solid var(--reysan-pink-light, #E298B0);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 0.25rem;
}
.paint-inline__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--reysan-pink-subtle, #fce8ef);
  padding: 0.4rem 0.75rem;
  border-bottom: 1.5px solid var(--reysan-pink-light, #E298B0);
}
.paint-inline__title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--reysan-pink-dark, #CC446E);
}
.paint-inline__actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: var(--reysan-bg, #F7F8E4);
  border-top: 1.5px solid var(--reysan-pink-light, #E298B0);
  flex-wrap: wrap;
}

/* ==========================================================
   9F — In-Place Capture Overlay
   ========================================================== */

/* Backdrop */
.support-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9998;
}

/* Overlay container */
.support-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}

/* Inner dialog */
.support-overlay__inner {
  background: var(--reysan-bg, #F7F8E4);
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: 4px 4px 0 #1a1a1a;
  width: min(640px, 100%);
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Wider when showing the canvas/editor */
.support-overlay__inner--has-canvas {
  width: min(960px, 100%);
}

.support-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: var(--reysan-pink-dark, #CC446E);
  flex-shrink: 0;
}
.support-overlay__title {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.support-overlay__close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.1rem 0.25rem;
  border-radius: 4px;
  transition: background 0.12s;
}
.support-overlay__close:hover { background: rgba(255,255,255,0.2); }

.support-overlay__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}
@media (min-width: 700px) {
  .support-overlay__body { flex-direction: row; align-items: stretch; }
}

.support-overlay__canvas-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-right: 1px solid var(--reysan-gray, #e0d5d8);
  min-width: 0;
}
@media (max-width: 699px) {
  .support-overlay__canvas-col {
    border-right: none;
    border-bottom: 1px solid var(--reysan-gray, #e0d5d8);
  }
}

.paint-toolbar--overlay {
  border-radius: 0;
  border: none;
  border-bottom: 1.5px solid var(--reysan-gray, #e0d5d8);
  box-shadow: none;
  background: #fafafa;
  flex-shrink: 0;
}

.support-overlay__canvas-scroll {
  flex: 1;
  overflow: auto;
  background: #e5e5e5;
  min-height: 180px;
  max-height: 55vh;
}
.support-overlay__canvas-scroll canvas {
  display: block;
  cursor: crosshair;
  touch-action: none;
  max-width: 100%;
}

.support-overlay__file-section {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--reysan-gray, #e0d5d8);
  background: #fafafa;
}
.support-overlay__file-input {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  width: 100%;
}

.support-overlay__form-col {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  overflow-y: auto;
}
@media (max-width: 699px) { .support-overlay__form-col { flex: none; } }

.support-overlay__textarea {
  width: 100%;
  border: 1.5px solid #1a1a1a;
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  font-size: 0.88rem;
  background: #fff;
  color: var(--reysan-brown, #4D2003);
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
}
.support-overlay__textarea:focus { outline: 2px solid var(--reysan-pink-dark, #CC446E); }

.support-overlay__visitor { display: flex; flex-direction: column; gap: 0.5rem; }

.support-overlay__form-col .support-field input,
.support-overlay__form-col .support-field select {
  border: 1.5px solid #1a1a1a;
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  font-size: 0.85rem;
  background: #fff;
  color: var(--reysan-brown, #4D2003);
  width: 100%;
  font-family: inherit;
}
.support-overlay__form-col .support-field input:focus,
.support-overlay__form-col .support-field select:focus {
  outline: 2px solid var(--reysan-pink-dark, #CC446E);
}

.support-overlay__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
@media (min-width: 400px) {
  .support-overlay__actions { flex-direction: row; flex-wrap: wrap; }
}

.support-overlay__status {
  font-size: 0.75rem;
  font-weight: 600;
  min-height: 1.2em;
  padding: 0.2rem 0;
  color: var(--reysan-gray-dark, #7a6570);
}
.support-overlay__status--success { color: #2d7a2d; }
.support-overlay__status--error   { color: #b71c1c; }
.support-overlay__status--warn    { color: #e65100; }

/* Snapshot fallback form */
.snapshot-capture-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #fff8ee;
  border: 1.5px solid var(--reysan-gold, #FEA621);
  border-radius: 8px;
  flex-wrap: wrap;
}
.snapshot-status {
  font-size: 0.75rem;
  color: var(--reysan-gray-dark, #7a6570);
}
.snapshot-preview-img {
  max-width: 100%;
  border: 2px solid #1a1a1a;
  border-radius: 8px;
  display: block;
  margin-top: 0.5rem;
}
#snapshot-preview-wrap {
  background: #fff;
  border: 1.5px solid var(--reysan-gray, #e0d5d8);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
}

/* ==========================================================
   9G — Autosave, Export, Trash Workflow
   ========================================================== */

/* ── Step indicator ── */
.support-steps {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.45rem 1rem;
  background: #fafafa;
  border-bottom: 1px solid var(--reysan-gray, #e0d5d8);
  flex-wrap: wrap;
  overflow-x: auto;
}
.support-step {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  color: var(--reysan-gray-dark, #7a6570);
  white-space: nowrap;
  position: relative;
}
.support-step + .support-step::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--reysan-gray, #e0d5d8);
}
.support-step--active {
  color: var(--reysan-pink-dark, #CC446E);
  background: var(--reysan-pink-subtle, #fce8ef);
  border-radius: 4px;
}
.support-step--done {
  color: #2d7a2d;
}
.support-step--done::after {
  content: ' ✓';
  font-size: 0.55rem;
}

/* ── Draft badge ── */
.support-draft-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  background: #fff8ee;
  border: 1.5px solid var(--reysan-gold, #FEA621);
  color: var(--reysan-brown, #4D2003);
  margin-bottom: 0.25rem;
}

/* ── Export area ── */
.support-overlay__export-area {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.support-overlay__export-textarea {
  width: 100%;
  font-family: monospace;
  font-size: 0.7rem;
  border: 1.5px solid #1a1a1a;
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  background: #f9f9f9;
  color: var(--reysan-brown, #4D2003);
  resize: vertical;
}

/* 9I: Reinforce overlay hide — style.display='none' is set by JS (inline style wins
   over author CSS). This rule is a belt-and-suspenders fallback via higher specificity. */
#support-overlay[hidden] { display: none !important; }
#support-backdrop[hidden] { display: none !important; }

/* BORRAR button in editor toolbar (visible during annotation phase) */
.support-editor-delete {
  color: var(--reysan-gray-dark, #7a6570);
  border-color: var(--reysan-gray, #e0d5d8);
}
.support-editor-delete:hover {
  color: #b71c1c;
  border-color: #b71c1c;
  background: #ffebee;
}

/* BORRAR button in form actions */
.support-btn-delete {
  color: #b71c1c;
  border-color: #e0d5d8;
}
.support-btn-delete:hover {
  background: #ffebee;
  border-color: #b71c1c;
}

/* ── Trash styles ── */
.support-btn-trash {
  color: #b71c1c;
  border-color: #b71c1c;
}
.support-btn-trash:hover {
  background: #ffebee;
  color: #b71c1c;
}
.support-card--trashed {
  opacity: 0.8;
  border-color: var(--reysan-gray, #e0d5d8);
  box-shadow: 1px 1px 0 var(--reysan-gray, #e0d5d8);
}
.support-trash-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.65rem;
  color: var(--reysan-gray-dark, #7a6570);
  padding: 0.4rem 0;
}
.support-trash-date { color: var(--reysan-gray-dark, #7a6570); }
.support-trash-days { font-weight: 700; color: #e65100; }
.support-trash-days--urgent { color: #b71c1c; }

/* ── BORRADOR status badge ── */
.support-status--borrador {
  color: var(--reysan-gold, #FEA621);
  background: #fff8ee;
  border-color: var(--reysan-gold, #FEA621);
}

/* ── Ref tool button highlight ── */
.paint-tool--ref {
  background: var(--reysan-pink-subtle, #fce8ef);
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════
   10F — Catalog Availability Controls
   ════════════════════════════════════════════════════════ */

/* ── Sold-out visual treatment on flavor cards ── */
.flavor-card--sold-out .flavor-card__img {
  filter: grayscale(100%) opacity(0.52);
}
/* Diagonal band using pseudo-element on flavor-card__item (position:relative, no overflow:hidden) */
.flavor-card--sold-out .flavor-card__item::after {
  content: attr(data-sold-out-text);
  position: absolute;
  top: 32%;
  left: -30%;
  right: -30%;
  transform: translateY(-50%) rotate(-28deg);
  background: rgba(0, 0, 0, 0.76);
  color: #fff;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-align: center;
  padding: 5px 0;
  z-index: 4;
  pointer-events: none;
}
/* Dim the sold-out card frame */
.flavor-card--sold-out .flavor-card__link {
  border-color: #bbb;
}

/* ── Availability badges (public catalog) ── */
.avail-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  margin-top: 2px;
}
.avail-badge--low_stock {
  background: #fff3cd;
  color: #856404;
}
.avail-badge--available_24h {
  background: #cce5ff;
  color: #004085;
}
.avail-public-msg {
  display: block;
  font-size: 0.74rem;
  color: #666;
  margin-top: 2px;
  padding: 0 2px;
  line-height: 1.3;
}

/* ── Availability status badges (admin) ── */
.avail-status-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  letter-spacing: 0.02em;
}
.avail-status-badge--published  { background: #d4edda; color: #155724; }
.avail-status-badge--hidden      { background: #e2e3e5; color: #383d41; }
.avail-status-badge--low_stock   { background: #fff3cd; color: #856404; }
.avail-status-badge--sold_out    { background: #f8d7da; color: #721c24; }
.avail-status-badge--available_24h { background: #cce5ff; color: #004085; }

/* ── Sold-out catalog section ── */
.catalog-sold-out-section {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed #e0d5d8;
}
.catalog-sold-out-section__title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #888;
  margin-bottom: 0.3rem;
}
.catalog-sold-out-section__desc {
  font-size: 0.82rem;
  color: #999;
  margin-bottom: 1rem;
  line-height: 1.4;
}

/* ── Availability notices (variant detail + cart) ── */
.avail-notice {
  border-radius: 6px;
  padding: 0.65rem 1rem;
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 0.75rem 0;
}
.avail-notice--sold-out    { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.avail-notice--available-24h { background: #cce5ff; color: #004085; border: 1px solid #b8daff; }
.avail-notice--low-stock   { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.avail-notice--info        { background: #e9ecef; color: #495057; border: 1px solid #dee2e6; }

/* Cart item inline availability notice */
.cart-avail-notice {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
  display: inline-block;
}
.cart-avail-notice--sold-out    { background: #f8d7da; color: #721c24; }
.cart-avail-notice--available-24h { background: #cce5ff; color: #004085; }
.cart-avail-notice--low-stock   { background: #fff3cd; color: #856404; }

/* ── Consent block for delayed availability items ── */
.cart-delay-consent {
  background: #fff8e1;
  border: 1.5px solid #ffe082;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}
.cart-delay-consent__header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  font-size: 0.92rem;
  color: #5a3e00;
}
.cart-delay-consent__icon { font-size: 1.1rem; }
.cart-delay-consent__detail {
  margin-bottom: 0.6rem;
  font-size: 0.82rem;
  color: #4a3000;
}
.cart-delay-consent__item {
  margin: 0 0 0.3rem 0;
  line-height: 1.4;
}
.cart-delay-consent__label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.83rem;
  color: #5a3e00;
  font-weight: 600;
  cursor: pointer;
}
.cart-delay-consent__label input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--reysan-primary, #e53935);
}

/* Snapshot badges in order detail / pedido registrado */
.avail-snapshot-badge {
  display: inline-block;
  font-size: 0.73rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}
.avail-snapshot-badge--sold_out      { background: #f8d7da; color: #721c24; }
.avail-snapshot-badge--available_24h { background: #cce5ff; color: #004085; }
.avail-snapshot-badge--low_stock     { background: #fff3cd; color: #856404; }
.avail-snapshot-badge--published     { background: #d4edda; color: #155724; }

/* Admin consent record */
.delay-consent-record {
  font-size: 0.8rem;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 5px;
  padding: 0.4rem 0.65rem;
  color: #5a3e00;
  margin-top: 0.35rem;
  margin-bottom: 0.6rem;
}

/* ── Admin Config Grid ── */
.catalog-config-tabs {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0 1.25rem;
  flex-wrap: wrap;
}
.catalog-config-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1.1rem;
  border: 1.5px solid #ddd;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #555;
  text-decoration: none;
  background: #fff;
  transition: all 0.15s;
}
.catalog-config-tab:hover { border-color: var(--reysan-pink, #cc446e); color: var(--reysan-pink, #cc446e); }
.catalog-config-tab--active {
  background: var(--reysan-pink, #cc446e);
  border-color: var(--reysan-pink, #cc446e);
  color: #fff;
}
.catalog-config-tab__note {
  font-size: 0.72rem;
  opacity: 0.75;
}
.section-notice {
  padding: 0.65rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}
.section-notice--info { background: #cce5ff; color: #004085; border: 1px solid #b8daff; }

.avail-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.avail-config-card {
  background: #fff;
  border: 1.5px solid #e0d5d8;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s;
}
.avail-config-card:hover { box-shadow: 0 4px 14px rgba(204,68,110,0.15); }
.avail-config-card--hidden { opacity: 0.55; }
.avail-config-card--sold_out .avail-config-card__thumb img { filter: grayscale(80%) opacity(0.7); }

.avail-config-card__thumb {
  aspect-ratio: 300/300;
  background: #f8f0f3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avail-config-card__thumb img {
  width: 100%; height: 100%; object-fit: contain;
}
.avail-config-card__thumb--placeholder {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ccc;
}
.avail-config-card__body {
  padding: 0.6rem 0.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.avail-config-card__flavor {
  font-weight: 800;
  font-size: 0.92rem;
}
.avail-config-card__product {
  font-size: 0.73rem;
  color: #888;
}
.avail-config-card__msg {
  font-size: 0.73rem;
  color: #666;
  margin-top: 0.2rem;
  line-height: 1.3;
}
.avail-config-card__footer {
  padding: 0.5rem 0.75rem;
  border-top: 1px solid #f0e8eb;
}

/* ── Admin Availability Detail ── */
.avail-detail-thumb {
  width: 160px;
  min-width: 130px;
  border: 1.5px solid #e0d5d8;
  border-radius: 6px;
  overflow: hidden;
  background: #f8f0f3;
  aspect-ratio: 300/486;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avail-detail-thumb img {
  width: 100%; height: 100%; object-fit: contain;
}
.avail-detail-thumb__placeholder {
  font-size: 2rem; font-weight: 800; color: #ccc;
}
.avail-detail-form .reysan-input,
.avail-detail-form select,
.avail-detail-form input[type="text"],
.avail-detail-form input[type="number"],
.avail-detail-form textarea {
  width: 100%;
  max-width: 340px;
  padding: 0.45rem 0.65rem;
  border: 1.5px solid #ddd;
  border-radius: 5px;
  font-size: 0.9rem;
  background: #fff;
  box-sizing: border-box;
}
.avail-detail-form select { max-width: 260px; }

/* ── Simplified status badges (admin order list) ──────────────── */
.simp-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.simp-badge--pending_payment { background: #fff3cd; color: #856404; }
.simp-badge--payment_review  { background: #cce5ff; color: #004085; }
.simp-badge--confirmed       { background: #d4edda; color: #155724; }
.simp-badge--preparing       { background: #ede7f6; color: #4527a0; }
.simp-badge--cold_point      { background: #fff3e0; color: #e65100; }
.simp-badge--completed       { background: #c8e6c9; color: #1b5e20; }
.simp-badge--special         { background: #f8d7da; color: #721c24; }
.simp-badge--unknown         { background: #f3f3f3; color: #555;    }

/* ── Operational tags ─────────────────────────────────────────── */
.op-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 12px;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.op-tag--green  { background: #d4edda; color: #155724; }
.op-tag--blue   { background: #cce5ff; color: #004085; }
.op-tag--orange { background: #fff3e0; color: #e65100; }
.op-tag--red    { background: #f8d7da; color: #721c24; }
.op-tag--gray   { background: #e9ecef; color: #495057; }
.op-tag--purple { background: #ede7f6; color: #4527a0; }

/* ── Aging summary banner (admin order list) ───────────────────────────── */
.aging-summary-banner {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-left: 4px solid #c2410c;
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  margin-bottom: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.aging-summary-banner__title {
  font-weight: 700;
  color: #9a3412;
  font-size: 0.9rem;
  flex: 1 1 100%;
}
.aging-summary-banner__counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.aging-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  text-decoration: none;
  min-width: 80px;
  transition: background 0.15s;
}
.aging-summary-stat:hover { background: #ffedd5; }
.aging-summary-stat--active { background: #ffedd5; border-color: #c2410c; }
.aging-summary-stat__value {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  color: #374151;
}
.aging-summary-stat__value--orange { color: #d97706; }
.aging-summary-stat__value--red    { color: #c2410c; }
.aging-summary-stat__label {
  font-size: 0.72rem;
  color: #6b7280;
  text-align: center;
  margin-top: 0.15rem;
}

/* Tags row inside admin order card */
.order-admin-card__row--tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding-top: 0.25rem;
}

/* ── Admin group filter bar ───────────────────────────────────── */
.admin-group-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}
.admin-group-filter__btn {
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--reysan-gray-dark, #666);
  background: #f3f3f3;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.admin-group-filter__btn:hover {
  background: #e8e8e8;
  text-decoration: none;
}
.admin-group-filter__btn--active {
  background: var(--reysan-pink-subtle, #fce4ec);
  color: var(--reysan-pink-dark, #c2185b);
  border-color: var(--reysan-pink-dark, #c2185b);
}

/* ── Status changer (admin order detail) ─────────────────────── */
.status-changer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 10px;
  padding: 0.65rem 1rem;
  margin-bottom: 0.75rem;
}
.status-changer__title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #555;
  white-space: nowrap;
}
.status-changer-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  flex-wrap: wrap;
}
.status-changer-select {
  flex: 1;
  min-width: 200px;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 0.95rem;
  background: #fafafa;
  cursor: pointer;
  transition: border-color 0.15s;
}
.status-changer-select:focus { border-color: var(--reysan-pink-dark, #c2185b); outline: none; }

/* ── Agenda drawer (admin order detail) ──────────────────────── */
.agenda-drawer {
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 10px;
  padding: 0.65rem 1rem;
  margin-bottom: 0.75rem;
}
.agenda-drawer summary { list-style: none; }
.agenda-drawer summary::-webkit-details-marker { display: none; }
.agenda-drawer__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  color: #333;
}
.agenda-drawer__preview {
  font-size: 0.78rem;
  font-weight: 500;
  color: #555;
}
.agenda-drawer__preview--pending { color: #999; font-style: italic; }
.agenda-drawer__body {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid #f0f0f0;
}
.agenda-drawer__pickup-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 0.6rem;
}

/* ── Order info card (compact multi-row datos del pedido) ─────── */
.order-info-card {
  border: 1.5px solid #ececec;
  border-radius: 10px;
  overflow: hidden;
}
.order-info-card__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem 0.75rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid #f3f3f3;
}
.order-info-card__row:last-child { border-bottom: none; }
.order-info-card__field { display: flex; flex-direction: column; gap: 0.08rem; }
.order-info-card__field--wide { grid-column: span 2; }
.order-info-card__field--full { grid-column: 1 / -1; }
.order-info-card__label {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #999;
}
.order-info-card__value {
  font-size: 0.87rem;
  font-weight: 500;
  color: #1a1a1a;
  word-break: break-all;
}
.order-info-card__value--bold { font-weight: 800; }
.order-info-card__value--accent {
  font-size: 1rem;
  font-weight: 800;
  color: var(--reysan-pink-dark, #c2185b);
}
.order-info-card__note {
  display: block;
  font-size: 0.7rem;
  color: #999;
  font-weight: 400;
}
@media (max-width: 600px) {
  .order-info-card__row { grid-template-columns: repeat(2, 1fr); }
  .order-info-card__field--full { grid-column: 1 / -1; }
}

/* ── Client agenda de recogida (detalle.html) ─────────────────── */
.order-detail-agenda {
  background: #fff;
  border: 1.5px solid #ececec;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.order-detail-agenda summary { list-style: none; }
.order-detail-agenda summary::-webkit-details-marker { display: none; }
.order-detail-agenda__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  color: #1a1a1a;
}
.order-detail-agenda__preview {
  font-size: 0.8rem;
  font-weight: 500;
  color: #555;
}
.order-detail-agenda__preview--pending { color: #aaa; font-style: italic; }
.order-detail-agenda__body {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid #f0f0f0;
}
.order-detail-agenda__date {
  font-size: 0.95rem;
  margin: 0.5rem 0 0;
  color: #333;
}

/* ── Area tools panel (support area_explorer) ─────────────────── */
.area-tools {
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.area-tools__header {
  margin-bottom: 0.6rem;
}
.area-tools__title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.area-tools__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.area-tools__result {
  background: #f8f8f8;
  border-radius: 7px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.65rem;
  font-size: 0.85rem;
}
.area-tools__result-title {
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.3rem;
}
.area-tools__result p { margin: 0.15rem 0; color: #333; }
.area-tools__previews {
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.area-tools__preview-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-family: monospace;
  padding: 0.1rem 0;
}
.area-tools__preview-id   { color: #999; min-width: 3rem; }
.area-tools__preview-old  { color: #b91c1c; }
.area-tools__preview-arrow{ color: #888; }
.area-tools__preview-new  { color: #166534; font-weight: 600; }


/* ── Ubicación aproximada del cliente ─────────────────────────────── */
.location-gate-cta {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: #fffbeb;
  border: 1.5px solid #fbbf24;
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin: 0.25rem 0;
}
.location-gate-cta__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.location-gate-cta__body strong { display: block; margin-bottom: 0.2rem; }
.location-gate-cta__body p { margin: 0; font-size: 0.9rem; color: #555; }

.order-tag--needs-location {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f59e0b;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-weight: 600;
}
.order-tag--has-location {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #10b981;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-weight: 600;
}
.cold-point-status { display:inline-block; padding:0.15rem 0.5rem; border-radius:4px; font-size:0.8rem; font-weight:600; }
.cold-point-status--active   { background:#d1fae5; color:#065f46; }
.cold-point-status--inactive { background:#f3f4f6; color:#6b7280; }
.cold-point-status--testing  { background:#dbeafe; color:#1e40af; }
.cold-point-status--hidden   { background:#f3f4f6; color:#374151; }

/* ── Selector de punto frío ───────────────────────────────────────── */
.cold-point-card {
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
  background: #fff;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.cold-point-card__info { flex: 1; min-width: 180px; }
.cold-point-card__name { font-weight: 700; font-size: 1rem; margin: 0 0 0.2rem; }
.cold-point-card__zone { color: #555; font-size: 0.88rem; margin: 0 0 0.15rem; }
.cold-point-card__hours { color: #6b7280; font-size: 0.82rem; margin: 0 0 0.1rem; }
.cold-point-card__window { color: #6b7280; font-size: 0.82rem; margin: 0; }
.cold-point-card__action { display: flex; flex-direction: column; gap: 0.25rem; min-width: 200px; }

.cold-point-selected-card {
  background: #ecfdf5;
  border: 1.5px solid #10b981;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-top: 0.5rem;
}
.cold-point-selected-card__name { font-weight: 700; margin: 0 0 0.2rem; }
.cold-point-selected-card__zone { color: #555; font-size: 0.88rem; margin: 0 0 0.15rem; }
.cold-point-selected-card__hours { color: #6b7280; font-size: 0.82rem; margin: 0 0 0.1rem; }
.cold-point-selected-card__date { color: #065f46; font-size: 0.9rem; margin: 0.25rem 0 0; }

/* ── Partner cold point order cards (11E) ──────────────────────────── */
.partner-cold-order-card {
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
  background: #fff;
}
.partner-cold-order-card--completed {
  background: #f9fafb;
  opacity: 0.85;
}
.partner-cold-order-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.partner-cold-order-card__folio {
  font-weight: 700;
  font-size: 1rem;
  color: #1f2937;
}
.partner-cold-order-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.65rem;
}
.partner-cold-order-card__row {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  font-size: 0.88rem;
  flex-wrap: wrap;
}
.partner-cold-order-card__label {
  font-weight: 600;
  color: #6b7280;
  min-width: 90px;
  flex-shrink: 0;
}
.partner-cold-order-card__footer {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Mapa aproximado de puntos fríos (11D) ─────────────────────────── */
.cold-point-map { margin-bottom: 1rem; }
.cold-point-map__title { font-weight: 700; font-size: 0.95rem; margin: 0 0 0.2rem; color: var(--text-dark, #1f2937); }
.cold-point-map__note { font-size: 0.8rem; color: #6b7280; margin: 0 0 0.5rem; }
.cold-point-map__canvas {
  width: 100%;
  height: 280px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  background: #f1f5f9;
}
@media (min-width: 640px) {
  .cold-point-map__canvas { height: 360px; }
}
.cold-point-map__fallback {
  font-size: 0.85rem;
  color: #6b7280;
  padding: 0.5rem 0;
}
.cold-point-card--selected {
  border: 2px solid #10b981;
  background: #f0fdf4;
}

/* ==========================================================================
   18B — Urgent Action Banner (admin expediente)
   ========================================================================== */
.urgent-action-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  border-left: 4px solid transparent;
}
.urgent-action-banner--warning {
  background: #fff7ed;
  border-left-color: #d97706;
  color: #92400e;
}
.urgent-action-banner--danger {
  background: #fef2f2;
  border-left-color: #c2410c;
  color: #7f1d1d;
}
.urgent-action-banner__icon {
  font-size: 1.1rem;
  line-height: 1.4;
  flex-shrink: 0;
}
.urgent-action-banner__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.urgent-action-banner__label {
  font-size: 0.9rem;
  font-weight: 700;
}
.urgent-action-banner__desc {
  font-size: 0.82rem;
  opacity: 0.85;
}

/* === 19A: Customer Profile & Account UX Polish === */

.profile-attention-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.profile-attention-section__title {
  margin: 0;
}
.profile-attention-section__all-link {
  font-size: 0.82rem;
  color: var(--reysan-pink-dark, #c2185b);
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}
.profile-attention-section__all-link:hover { text-decoration: underline; }
.profile-attention-section__more {
  text-align: center;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--reysan-gray-dark);
}
.profile-attention-section__more a {
  color: var(--reysan-pink-dark, #c2185b);
  text-decoration: none;
}
.profile-attention-section__more a:hover { text-decoration: underline; }

.profile-attention-empty {
  background: var(--reysan-light, #fff9f9);
  border: 1px solid var(--reysan-pink-light, #fce4ec);
  border-radius: 10px;
  padding: 1.25rem 1rem;
  text-align: center;
}
.profile-attention-empty__text {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: var(--reysan-gray-dark, #555);
}

.profile-phone-masked {
  font-family: monospace;
  letter-spacing: 0.05em;
  font-size: 0.95em;
}

.profile-verification-card__action {
  margin-top: 0.5rem;
}

.profile-whatsapp-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.profile-whatsapp-status--active strong {
  color: var(--reysan-green, #2e7d32);
  font-size: 0.9rem;
}

.profile-whatsapp-note {
  font-size: 0.82rem;
  color: var(--reysan-gray-dark, #555);
  margin: 0 0 0.6rem;
  line-height: 1.5;
}

.profile-account-links {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--reysan-pink-light, #fce4ec);
}

/* === 20A: Customer Order Flow UX Audit === */

.payment-page__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.payment-email-notice {
  margin-top: 1.25rem;
}

.order-detail-payment-action {
  margin-top: 0.6rem;
}

.order-detail-completed-banner {
  margin-bottom: 1rem;
}

.order-detail-catalog-link {
  font-size: 0.88rem;
  color: inherit;
  text-decoration: underline;
}

.order-detail-footer-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.orders-footer-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.order-success__delay-notice {
  margin-bottom: 1rem;
}

.order-success__delay-text {
  font-size: 0.84rem;
  margin: 0;
  color: #5a3e00;
}

@media (max-width: 480px) {
  .payment-page__actions { flex-direction: column; }
  .order-detail-footer-actions { flex-direction: column; }
  .orders-footer-actions { flex-direction: column; }
}

/* === 21A: Admin Templates UX Audit & Button System Cleanup === */

/* Back row below admin content */
.admin-back-row {
  margin-top: 1rem;
}

/* Admin availability notices block in order detail */
.admin-detalle-avail-notices {
  margin-bottom: 0.75rem;
}
.admin-detalle-avail-label {
  font-size: 0.74rem;
  color: #888;
  display: block;
  margin-bottom: 0.3rem;
}

/* Checkout confirm button: self-contained color (removes btn btn-success dependency).
   Uses :not() to avoid overriding the locked variant styling. */
.checkout-primary-action__btn:not(.checkout-primary-action__btn--locked) {
  background: var(--reysan-pink-dark);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.checkout-primary-action__btn:not(.checkout-primary-action__btn--locked):hover {
  background: var(--reysan-pink-hover);
  color: #fff;
  text-decoration: none;
}

/* Admin dashboard: warning/alert CTA variant */
.admin-ops-card__cta--warn {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fed7aa;
  margin-top: 0.4rem;
}
.admin-ops-card__cta--warn:hover {
  background: #ffedd5;
  color: #9a3412;
  border-color: #fdba74;
}

/* Summary stats as clickable links */
a.summary-stat {
  text-decoration: none;
  cursor: pointer;
}
a.summary-stat:hover {
  opacity: 0.88;
}

/* Admin dashboard: inline failed-pickup alert link */
.admin-ops-pickup-alert {
  color: #c2410c;
  font-size: 0.82rem;
  text-decoration: none;
  display: block;
  margin-top: 0.25rem;
}
.admin-ops-pickup-alert:hover {
  text-decoration: underline;
  color: #9a3412;
}

/* Admin dashboard: "ver todos" link in recent orders */
.admin-ops-recent__more {
  margin-top: 0.5rem;
}

/* Admin dashboard: summary grid top margin */
.admin-ops-summary-grid--mt {
  margin-top: 1rem;
}

@media (max-width: 480px) {
  .admin-ops-card__cta--warn { margin-top: 0.3rem; }
}

/* === 22A: Partner Panel Button System === */

/* Button top-margin utilities for partner card layouts */
.partner-card-cta   { margin-top: 0.75rem; }
.partner-card-cta--sm { margin-top: 0.5rem; }
.partner-card-cta--xs { margin-top: 0.4rem; }

/* Right-align reversal action button inside ledger footer (flex row) */
.partner-ledger-reverse-btn { margin-left: auto; font-size: 0.7rem; }

/* === 23A: Games & Chess Panel Button System === */

/* Extra-small size modifier (compact table/list actions) */
.btn-reysan--xs { font-size: 0.72rem; padding: 0.2rem 0.55rem; }

/* Top-spacing for standalone credit buttons in chess-credit-card__inner */
.chess-credit-btn { margin-top: 0.75rem; }

/* === 23B: Support & Users Panel Button System === */

/* Top-spacing for partner CTA inside profile-partner-card (replaces inline margin) */
.profile-partner-cta { margin-top: 0.5rem; }

/* === 25D: Owner Sales Analytics Dashboard === */

.reports-period-label { font-size: 0.82rem; opacity: 0.75; display: block; margin-top: 0.25rem; }

.reports-filter-bar { margin-bottom: 1rem; }

.reports-summary-grid { margin-top: 0.75rem; margin-bottom: 1.25rem; }

.reports-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 640px) {
  .reports-two-col { grid-template-columns: 1fr; }
}

.reports-table { margin-top: 0.5rem; }
.reports-table__num { text-align: right; font-variant-numeric: tabular-nums; }

.reports-definition-note {
  background: #f9f9f9;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
}
.reports-definition-note__text { font-size: 0.8rem; color: #666; margin: 0; line-height: 1.6; }

/* === 26A: Sales Report Enhancements — CSV + Channel Breakdown === */

.reports-channel-filter { margin-bottom: 0.75rem; flex-wrap: wrap; gap: 0.35rem; }

.reports-export-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.reports-export-btn { font-size: 0.78rem; }

.reports-active-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #fce4ed;
  color: #cc446e;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.reports-clear-filter {
  color: #cc446e;
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.reports-channel-link {
  color: var(--reysan-pink-dark, #cc446e);
  text-decoration: none;
  font-size: 0.88rem;
}
.reports-channel-link:hover { text-decoration: underline; }

/* === 26B: Cold Point & Custom Date Range Drilldowns === */

.reports-date-form {
  background: #fdf6fa;
  border: 1px solid #f0dde8;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.85rem;
}

.reports-date-form__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.reports-date-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #666;
  white-space: nowrap;
}

.reports-date-input {
  border: 1px solid #d8b4c8;
  border-radius: 6px;
  padding: 0.22rem 0.5rem;
  font-size: 0.82rem;
  color: #4d2003;
  background: #fff;
  height: 2rem;
}

.reports-filter-select {
  border: 1px solid #d8b4c8;
  border-radius: 6px;
  padding: 0.22rem 0.5rem;
  font-size: 0.82rem;
  color: #4d2003;
  background: #fff;
  height: 2rem;
  max-width: 16rem;
}

.reports-custom-badge {
  pointer-events: none;
  opacity: 0.85;
  cursor: default;
}

@media (max-width: 640px) {
  .reports-date-form__row { flex-direction: column; align-items: flex-start; }
  .reports-date-input, .reports-filter-select { width: 100%; max-width: none; }
}

/* === 27A/27B: Sales Report Charts === */

.reports-chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.reports-chart-card {
  background: #fff;
  border: 1px solid #e8e2e6;
  border-radius: 10px;
  padding: 0.9rem 1rem;
  min-height: 180px;
  overflow: hidden;
}

.reports-chart-card--full {
  grid-column: span 2;
}

.reports-chart-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #4d2003;
  margin: 0 0 0.6rem 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.reports-chart-shell {
  position: relative;
  width: 100%;
}

.reports-chart-shell--trend { height: 280px; }
.reports-chart-shell--small { height: 240px; }

.reports-chart-canvas {
  display: block;
  width: 100% !important;
  max-width: 100%;
}

.reports-chart-empty {
  font-size: 0.8rem;
  color: #999;
  margin: 1.5rem 0;
  text-align: center;
}

.reports-chart-fallback {
  font-size: 0.8rem;
  color: #888;
  background: #fdf6fa;
  border: 1px solid #f0dde8;
  border-radius: 6px;
  padding: 0.65rem 0.85rem;
  margin-top: 0.5rem;
  text-align: center;
}

.reports-chart-noscript {
  font-size: 0.82rem;
  color: #666;
  background: #fdf6fa;
  border: 1px solid #f0dde8;
  border-radius: 6px;
  padding: 0.55rem 0.85rem;
  margin-bottom: 0.75rem;
  text-align: center;
}

/* === 28A: Production Demand Planning Report === */

.production-demand-table td,
.production-demand-table th { white-space: nowrap; }

.production-priority {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.55rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.production-priority--high {
  background: #fde8e8;
  color: #c0392b;
  border: 1px solid #f5c6c6;
}

.production-priority--medium {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffe08a;
}

.production-priority--low {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
}

.production-priority-note {
  font-size: 0.75rem;
  color: #999;
  margin-top: 0.6rem;
  font-style: italic;
}

.mobile-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  .reports-chart-grid { grid-template-columns: 1fr; }
  .reports-chart-card--full { grid-column: span 1; }
  .reports-chart-shell--trend { height: 220px; }
  .reports-chart-shell--small { height: 200px; }
}

/* === 28B: Partner Cold Point Analytics Report === */

.partner-report-table td,
.partner-report-table th { white-space: nowrap; }

.partner-report-table__fail { color: #c0392b; font-weight: 700; }

.partner-signal {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.55rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.partner-signal--risk {
  background: #fde8e8;
  color: #c0392b;
  border: 1px solid #f5c6c6;
}

.partner-signal--pending {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffe08a;
}

.partner-signal--active {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
}

.partner-signal--none {
  background: #f5f5f5;
  color: #888;
  border: 1px solid #e0e0e0;
}

.summary-stat--warning .summary-stat__value { color: #c0392b; }
.summary-stat--warning { border-color: #f5c6c6; }

/* === 29A: Operations Planning Workbook === */

.planning-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  align-items: start;
}

.planning-module-card {
  text-decoration: none;
  display: block;
  color: inherit;
  transition: box-shadow 0.15s;
}

.planning-module-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); }

.planning-table th,
.planning-table td { white-space: nowrap; }

.planning-table__input {
  width: 72px;
  padding: 0.2rem 0.35rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.85rem;
  text-align: right;
}

.planning-table__readonly { color: #555; }

.planning-table__need { color: #c0392b; font-weight: 700; }

.planning-status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.55rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.planning-status--ok {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
}

.planning-status--revisar {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffe08a;
}

.planning-status--urgente {
  background: #fde8e8;
  color: #c0392b;
  border: 1px solid #f5c6c6;
}

.cooler-capacity-badge {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: #f5f5f5;
  color: #888;
  border: 1px solid #e0e0e0;
}

.cooler-capacity-badge--active {
  background: #e3f2fd;
  color: #1565c0;
  border-color: #bbdefb;
}

/* === 29C: Planning Weekly Lifecycle === */

.planning-plan-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.planning-plan-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  flex-wrap: wrap;
}

.planning-plan-card--active {
  border-color: #3b82f6;
  background: #f0f7ff;
}

.planning-plan-card__info {
  flex: 1;
  min-width: 0;
}

.planning-plan-card__meta {
  font-size: 0.78rem;
  color: #888;
  margin-top: 0.25rem;
}

.planning-plan-card__notes {
  font-size: 0.8rem;
  color: #555;
  margin-top: 0.3rem;
  font-style: italic;
}

.planning-plan-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.planning-active-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #3b82f6;
  color: #fff;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
}

/* === 29D: Plan Status Lifecycle === */

.planning-status-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.12rem 0.5rem;
  border-radius: 4px;
  border: 1px solid transparent;
}

.planning-status-badge--active {
  background: #e8f5e9;
  color: #2e7d32;
  border-color: #c8e6c9;
}

.planning-status-badge--draft {
  background: #fff3cd;
  color: #856404;
  border-color: #ffe08a;
}

.planning-status-badge--closed {
  background: #f5f5f5;
  color: #888;
  border-color: #e0e0e0;
}

.planning-closed-warning {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 6px;
  padding: 0.65rem 1rem;
  font-size: 0.88rem;
  color: #6d4c00;
  margin-bottom: 1rem;
}

.planning-filter-tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.planning-filter-tab {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  background: #fafafa;
  color: #555;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}

.planning-filter-tab:hover { background: #f0f0f0; border-color: #bbb; }

.planning-filter-tab--active {
  background: #1a237e;
  color: #fff;
  border-color: #1a237e;
}


/* ── 30B: Weekly Planning Board ─────────────────────────────────────────── */

.planning-weekly-board { max-width: 1100px; }

.planning-weekly-header { margin-bottom: 0.5rem; }

.planning-weekly-header__meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #888;
  margin-bottom: 0.25rem;
}

.planning-weekly-header__notes {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #f8f9fa;
  border-left: 3px solid #1a237e;
  border-radius: 4px;
  font-size: 0.88rem;
  color: #555;
}

.planning-weekly-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.planning-weekly-section {
  margin-bottom: 1.75rem;
}

.planning-weekly-alerts {
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 8px;
}

.planning-weekly-alerts__title {
  font-weight: 700;
  font-size: 0.9rem;
  color: #e65100;
  margin-bottom: 0.5rem;
}

.planning-weekly-alerts__list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.85rem;
  color: #5d4037;
  line-height: 1.7;
}

.planning-weekly-closed-print {
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #b71c1c;
  padding: 0.35rem 0;
  margin-bottom: 0.5rem;
}

/* summary-stat warning variant */
.summary-stat--warning .summary-stat__value { color: #e65100; }
.summary-stat--warning .summary-stat__label { color: #bf360c; }

/* Print mode */
.planning-print-only { display: none; }

@media print {
  .planning-no-print { display: none !important; }
  .planning-print-only { display: block !important; }

  /* Hide site nav, header, footer */
  header, nav, footer, .bottom-nav,
  .admin-ops-dashboard > .planning-weekly-actions { display: none !important; }

  body { background: #fff !important; color: #000 !important; }
  .admin-ops-dashboard { max-width: 100%; padding: 0; }

  .dashboard-hero { padding: 0.5rem 0; border-bottom: 2px solid #000; margin-bottom: 0.75rem; }
  .dashboard-hero__title { font-size: 1.1rem; }
  .dashboard-hero__subtitle { font-size: 0.8rem; }

  .planning-weekly-alerts { page-break-inside: avoid; border: 1px solid #ccc; background: #fff; }
  .planning-weekly-alerts__title { color: #000; }
  .planning-weekly-alerts__list { color: #000; }

  .planning-weekly-section { page-break-inside: avoid; margin-bottom: 1rem; }

  .reysan-data-table { width: 100%; font-size: 0.75rem; border-collapse: collapse; }
  .reysan-data-table th,
  .reysan-data-table td { border: 1px solid #ccc; padding: 0.25rem 0.4rem; }
  .reysan-data-table thead { background: #f0f0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .planning-closed-warning,
  .planning-weekly-closed-print { display: block !important; background: #fff; border: 1px solid #000; color: #000; }

  .data-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .summary-stat { border: 1px solid #ccc; border-radius: 4px; padding: 0.4rem; text-align: center; }
  .summary-stat__value { display: block; font-size: 1.2rem; font-weight: 700; }
  .summary-stat__label { display: block; font-size: 0.7rem; color: #555; }

  .section-header { margin-bottom: 0.4rem; }
  .section-header__title { font-size: 0.9rem; font-weight: 700; margin: 0; }
  .section-header__subtitle { font-size: 0.75rem; color: #555; margin: 0; }

  .planning-weekly-header__notes { border-left: 2px solid #000; background: #fff; }

  a { color: #000; text-decoration: none; }
}


/* ── 30D: Planning Demand Date Range Filter ──────────────────────────────── */

.planning-demand-window {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.planning-demand-window__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.planning-demand-window__icon { font-size: 1rem; }

.planning-demand-window__title {
  font-weight: 600;
  font-size: 0.85rem;
  color: #495057;
}

.planning-demand-tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  align-items: center;
}

.planning-demand-tab {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  border: 1px solid #ced4da;
  font-size: 0.78rem;
  color: #495057;
  text-decoration: none;
  background: #fff;
  transition: background 0.15s, color 0.15s;
}

.planning-demand-tab:hover {
  background: #e9ecef;
  color: #212529;
}

.planning-demand-tab--active {
  background: #1a1a2e;
  color: #fff;
  border-color: #1a1a2e;
  font-weight: 600;
}

.planning-demand-tab--custom-toggle {
  cursor: pointer;
}

.planning-demand-custom {
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.planning-demand-custom form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.planning-demand-custom__label {
  font-size: 0.78rem;
  color: #495057;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.planning-demand-custom__input {
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  font-size: 0.78rem;
  color: #212529;
}

/* Demand pills */
.planning-demand-pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #e9ecef;
  color: #495057;
}

.planning-demand-pill--all { background: #e9ecef; color: #6c757d; }
.planning-demand-pill--today { background: #d4edda; color: #155724; }
.planning-demand-pill--7d { background: #cce5ff; color: #004085; }
.planning-demand-pill--30d { background: #d1ecf1; color: #0c5460; }
.planning-demand-pill--month { background: #fff3cd; color: #856404; }
.planning-demand-pill--custom { background: #f8d7da; color: #721c24; }


/* -- 30E: Planning Workbook Quick Fill ------------------------------------- */

.planning-quickfill {
  border-left: 3px solid #f4a261;
}

.planning-quickfill__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.planning-quickfill__note {
  font-size: 0.78rem;
  color: #6c757d;
  margin: 0;
  font-style: italic;
}


/* -- 49A: Planning Card (section wrapper) ---------------------------------- */

.planning-card {
  background: #fff;
  border: 1.5px solid #e8d5c0;
  border-radius: 12px;
  padding: 1.1rem 1.25rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 8px rgba(100,60,20,0.07);
}

.planning-unit-cell {
  font-size: 0.82rem;
  color: #888;
}

.planning-closed-warning a {
  color: inherit;
  font-weight: 700;
}


/* -- 30F: Planning Workbook Completion Checklist --------------------------- */

.planning-completion {
  padding: 1rem 1.25rem;
}

.planning-completion--complete  { border-left-color: #00C97A; }
.planning-completion--review    { border-left-color: #f4a261; }
.planning-completion--incomplete { border-left-color: #dc3545; }

.planning-completion__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.planning-completion__subtitle {
  font-size: 0.88rem;
  color: #6c757d;
  flex: 1;
}

.planning-completion-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  letter-spacing: 0.03em;
}

.planning-completion-badge--complete  { background: #d1fae5; color: #065f46; }
.planning-completion-badge--review    { background: #fff3cd; color: #856404; }
.planning-completion-badge--incomplete { background: #fde8ea; color: #721c24; }

.planning-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.planning-checklist-item {
  display: grid;
  grid-template-columns: 1.4rem 8rem 1fr;
  gap: 0.4rem 0.6rem;
  align-items: start;
  font-size: 0.88rem;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
}

@media (max-width: 540px) {
  .planning-checklist-item {
    grid-template-columns: 1.4rem 1fr;
  }
  .planning-checklist-msg {
    grid-column: 2;
  }
}

.planning-checklist-item--ok       { background: #f0fdf4; }
.planning-checklist-item--review   { background: #fffbeb; }
.planning-checklist-item--missing  { background: #fff5f5; }

.planning-checklist-icon {
  font-size: 0.9rem;
  text-align: center;
}

.planning-checklist-item--ok      .planning-checklist-icon { color: #00C97A; }
.planning-checklist-item--review  .planning-checklist-icon { color: #f59e0b; }
.planning-checklist-item--missing .planning-checklist-icon { color: #dc3545; }

.planning-checklist-label {
  font-weight: 600;
  color: var(--reysan-brown);
}

.planning-checklist-label a {
  color: inherit;
  text-decoration: underline dotted;
}

.planning-checklist-label a:hover {
  color: var(--reysan-pink-dark);
}

.planning-checklist-msg {
  color: #555;
  font-size: 0.83rem;
  line-height: 1.35;
}

.planning-checklist-note {
  font-size: 0.78rem;
  color: #9ca3af;
  margin-top: 0.65rem;
  font-style: italic;
}

.planning-print-only { display: none; }

@media print {
  .planning-print-only { display: inline; }
  .planning-no-print   { display: none !important; }
  .planning-completion { border-left-width: 2px; }
  .planning-checklist-label a { text-decoration: none; color: inherit; }
}


/* -- 30H: Purchase Gap Summary --------------------------------------------- */

.planning-gap-summary {
  margin-bottom: 0.5rem;
}

.planning-gap-note {
  font-size: 0.78rem;
  color: #9ca3af;
  font-style: italic;
  margin: 0.3rem 0 0.75rem 0;
}

.planning-gap-alert {
  margin-top: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  font-size: 0.88rem;
  color: #5c4700;
}

.planning-gap-alert a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

.planning-gap-status {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.planning-gap-status--complete { background: #d1fae5; color: #065f46; }
.planning-gap-status--review   { background: #fff3cd; color: #856404; }
.planning-gap-status--urgent   { background: #fde8ea; color: #721c24; }


/* -- 30I: Supply Unit Price & MXN Subtotal ---------------------------------- */

.planning-money {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #065f46;
}

.planning-money--muted {
  font-size: 0.8rem;
  color: #9ca3af;
  font-style: italic;
}

.planning-price-note {
  font-size: 0.78rem;
  color: #9ca3af;
  font-style: italic;
  margin: 0.2rem 0 0.5rem 0;
}


/* -- 30K: Cost Summary Export & Print Polish -------------------------------- */

.planning-cost-warning {
  background: #fff3cd;
  border-left: 3px solid #f59e0b;
  color: #92400e;
  padding: 0.55rem 0.9rem;
  font-size: 0.84rem;
  border-radius: 0 4px 4px 0;
  margin: 0.5rem 0;
}

.planning-cost-warning a {
  color: inherit;
  font-weight: 700;
}

.planning-cost-summary {
  margin-bottom: 0.5rem;
}

.planning-cost-summary__grid {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.planning-cost-summary__table {
  min-width: 360px;
}

.planning-cost-summary__total-row td {
  background: #f0fdf4;
  border-top: 2px solid #bbf7d0;
}

.planning-cost-summary__total {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 1.05rem;
  color: #065f46;
}

.planning-cost-muted {
  font-size: 0.78rem;
  color: #9ca3af;
  font-style: italic;
}

@media print {
  .planning-cost-summary__total-row td {
    background: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .planning-cost-warning {
    border-left-width: 2px;
    background: #fffbeb !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}


/* -- 30L: Print Layout & Mobile Polish ------------------------------------- */

/* Print-only header data row (hidden on screen, flex in print) */
.planning-print-header-data {
  display: none; /* shown in print via @media print below */
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.8rem;
  color: #333;
  padding: 0.35rem 0 0.35rem 0;
  border-bottom: 1px solid #ccc;
  margin-bottom: 0.3rem;
}

/* Print footer (hidden on screen, shown in print via @media print below) */
.planning-print-footer {
  display: none; /* shown in print via @media print below */
  margin-top: 1.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #ccc;
  font-size: 0.75rem;
  color: #888;
  text-align: center;
}

/* Mobile: compact planning actions bar on small screens */
@media (max-width: 600px) {
  .planning-weekly-actions {
    gap: 0.3rem;
  }
  .planning-cost-summary__table {
    font-size: 0.82rem;
  }
  .planning-weekly-section {
    margin-bottom: 1.25rem;
  }
}

/* Print page margins */
@page {
  margin: 1.5cm 2cm;
}

@media print {
  /* Show print-only header data as flex */
  .planning-print-header-data {
    display: flex !important;
  }

  /* Show print footer */
  .planning-print-footer {
    display: block !important;
  }

  /* Unblock mobile scroll wrappers — tables must render fully in print */
  .mobile-scroll-x {
    overflow: visible !important;
  }

  /* Cost summary: keep together across pages */
  .planning-cost-summary {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .planning-cost-summary__grid {
    overflow: visible !important;
  }

  /* Allow table rows to break only between rows, not within */
  .planning-table { break-inside: auto; page-break-inside: auto; }
  .planning-table tr { break-inside: avoid; page-break-inside: avoid; }

  /* Compact table cell padding */
  .reysan-data-table th,
  .reysan-data-table td {
    padding: 0.2rem 0.35rem !important;
  }

  /* Compact planning section spacing */
  .planning-weekly-section { margin-bottom: 0.75rem; }

  /* Keep key blocks together */
  .planning-weekly-alerts  { break-inside: avoid; page-break-inside: avoid; }
  .planning-completion     { break-inside: avoid; page-break-inside: avoid; }
  .planning-cost-warning   { break-inside: avoid; page-break-inside: avoid; }
  .planning-weekly-header  { break-inside: avoid; page-break-inside: avoid; }

  /* Reduce table font size for more content per page */
  .planning-table {
    font-size: 0.72rem;
  }

  /* Summary cards in print: 4 columns */
  .reports-summary-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.35rem !important;
  }
}

/* -- 31A: Operational Navigation & Tools Placement -------------------- */

/* Reports hub grid */
.reports-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

/* Tool card */
.ops-tool-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 1.1rem 1.25rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ops-tool-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ops-tool-card__icon {
  font-size: 1.4rem;
  line-height: 1;
}

.ops-tool-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  flex: 1 1 120px;
}

.ops-tool-card__desc {
  font-size: 0.87rem;
  color: #555;
  margin: 0;
  line-height: 1.45;
}

.ops-tool-card__actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

/* Frequency badges */
.tool-frequency-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.tool-frequency-badge--daily {
  background: #e8f5e9;
  color: #2e7d32;
}

.tool-frequency-badge--weekly {
  background: #e3f2fd;
  color: #1565c0;
}

.tool-frequency-badge--audit {
  background: #fff8e1;
  color: #f57f17;
}

/* Admin ops card button row — replaces inline flex style */
.admin-ops-card__btn-row {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

@media (max-width: 600px) {
  .reports-hub-grid {
    grid-template-columns: 1fr;
  }
  .ops-tool-card__actions {
    flex-direction: column;
  }
}

/* -- 32A: Planning Lifecycle Controls --------------------------------- */
.planning-active-panel { border-radius: 10px; border: 2px solid #e8e8e8; padding: 1rem 1.25rem; margin-bottom: 1rem; background: #fff; }
.planning-active-panel--active { border-color: #4caf50; background: #f1f8f1; }
.planning-active-panel--draft { border-color: #ffc107; background: #fffdf0; }
.planning-active-panel--closed { border-color: #bbb; background: #f9f9f9; }
.planning-active-panel__header { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.45rem; }
.planning-active-panel__icon { font-size: 1.25rem; line-height: 1; flex-shrink: 0; }
.planning-active-panel__title-block { flex: 1 1 140px; min-width: 0; }
.planning-active-panel__label { display: block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #888; }
.planning-active-panel__plan-name { margin: 0; font-size: 1rem; font-weight: 700; }
.planning-active-panel__meta { font-size: 0.8rem; color: #666; margin-bottom: 0.6rem; }
.planning-active-panel__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.planning-active-panel__hint { margin: 0.6rem 0 0; font-size: 0.83rem; color: #856404; background: #fff8d6; border: 1px solid #ffc107; border-radius: 6px; padding: 0.4rem 0.7rem; }
.planning-action-close { color: #c0392b !important; border-color: #e74c3c !important; }
.planning-action-close:hover { background: #fdf2f2 !important; }
.planning-plan-card--status-active { border-left: 3px solid #4caf50; }
.planning-plan-card--status-draft { border-left: 3px solid #ffc107; }
.planning-plan-card--status-closed { opacity: 0.78; }
.planning-state-list { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 1rem; align-items: start; margin: 0; }
.planning-state-list dt { margin: 0; padding-top: 0.1rem; }
.planning-state-list dd { margin: 0; font-size: 0.88rem; color: #555; }
@media (max-width: 600px) {
  .planning-active-panel__actions { flex-direction: column; }
  .planning-state-list { grid-template-columns: 1fr; }
}

/* -- 32B: Planning New Week Guided Flow ------------------------------- */
.planning-new-week-options { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.planning-new-week-form { border: 1px solid #e8e8e8; border-radius: 8px; padding: 1rem 1.1rem; background: #fafafa; }
.planning-new-week-form__title { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.3rem; color: #2c3e50; }
.planning-new-week-form__desc { font-size: 0.83rem; color: #666; margin: 0 0 0.75rem; line-height: 1.4; }
.planning-duplicate-options { margin-bottom: 0.6rem; }
.planning-duplicate-check { display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; cursor: pointer; }
.planning-duplicate-check-help { font-size: 0.76rem; color: #888; margin: 0.2rem 0 0 1.35rem; line-height: 1.35; }
.planning-flow-steps { border-top: 1px solid #e8e8e8; padding-top: 0.85rem; margin-top: 0.85rem; }
.planning-flow-steps__title { font-size: 0.88rem; font-weight: 700; margin: 0 0 0.55rem; color: #444; text-transform: uppercase; letter-spacing: 0.04em; }
.planning-flow-step-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.planning-flow-step { display: flex; align-items: baseline; gap: 0.55rem; font-size: 0.85rem; }
.planning-flow-step__number { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #2c3e50; color: #fff; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; }
.planning-flow-steps__note { font-size: 0.75rem; color: #999; margin: 0.55rem 0 0; font-style: italic; }
.planning-dup-form { display: inline-block; vertical-align: middle; }
.planning-dup-controls { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.planning-dup-reset-label { font-size: 0.72rem; color: #666; display: flex; align-items: center; gap: 0.2rem; cursor: pointer; white-space: nowrap; }
@media (max-width: 600px) {
  .planning-new-week-options { grid-template-columns: 1fr; }
}

/* -- 32C: Planning Workbook UX Hardening ----------------------------- */
.planning-form-actions { margin-top: 1rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.planning-form-note { font-size: 0.76rem; color: #888; margin: 0.4rem 0 0; font-style: italic; line-height: 1.4; }
.btn-reysan--danger { color: #c0392b !important; border-color: #e74c3c !important; }
.btn-reysan--danger:hover { background: #fdf2f2 !important; }


/* ── 36A — Global Page Shell, Spacing & Visual Consistency ── */

/* dashboard-hero__subtitle: visible on screen (was only defined inside @media print) */
.dashboard-hero__subtitle {
  display: block;
  font-size: 0.82rem;
  opacity: 0.72;
  line-height: 1.4;
  margin: 0;
}

/* Page section spacing utilities */
.page-section          { margin-top: 1.25rem; }
.page-section--compact { margin-top: 0.75rem; }


/* ── 36B — Role Core Pages Visual Homogenization ── */

/* Catalog page title header */
.catalog-page-header { margin-bottom: 0.75rem; }
.catalog-page-title  { font-size: 1.5rem; font-weight: 800; margin: 0; letter-spacing: 0.02em; }


/* ── 36C — Customer Purchase Flow Visual Polish ── */

/* Product detail page hero image and description */
.catalog-product-image       { border-radius: 8px; margin-bottom: 1rem; }
.catalog-product-description { color: var(--reysan-brown); margin-bottom: 1.25rem; }


/* ── 37A — Partner Benefits Visual Polish ── */

/* Summary hero card */
.partner-benefits-summary {
  background: linear-gradient(135deg, #fdf6ee 0%, #fce8f3 100%);
  margin-bottom: 1rem;
}
.partner-benefits-summary h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c06090;
  margin-bottom: 0.75rem;
}
.partner-benefits-summary .data-card-grid { margin-bottom: 0.5rem; }

/* Type breakdown tag row */
.partner-benefits-type-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #666;
  margin-top: 0.5rem;
}

/* Pending count alert note */
.partner-benefits-pending-note {
  font-size: 0.8rem;
  color: #c06090;
  margin: 0.5rem 0 0;
}

/* Section spacing and gray h2 titles */
.partner-benefits-section { margin-bottom: 1.5rem; }
.partner-benefits-section h2 {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  color: #555;
}

/* Benefit cards list */
.partner-benefits-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Individual benefit card */
.partner-benefits-card { padding: 0.85rem 1rem; margin-bottom: 0; }
.partner-benefits-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.partner-benefits-card__type  { font-weight: 700; font-size: 0.95rem; color: #333; }
.partner-benefits-card__meta  { display: flex; gap: 0.75rem; flex-wrap: wrap; font-size: 0.83rem; color: #555; margin-bottom: 0.35rem; }
.partner-benefits-card__cr    { color: #c06090; }
.partner-benefits-card__ref   { font-size: 0.78rem; color: #aaa; margin: 0 0 0.25rem; }
.partner-benefits-card__note  { font-size: 0.82rem; color: #666; margin: 0; font-style: italic; }

/* Empty state variant */
.partner-benefits-empty {
  background: #faf7f2;
  border: 1px dashed #e5d9c5;
  border-radius: 10px;
  padding: 1.5rem;
}

/* CR movements */
.partner-benefits-cr-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.partner-benefits-cr-entry {
  background: #fdf6ee;
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  font-size: 0.83rem;
  color: #555;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.partner-benefits-cr-amount               { font-weight: 700; }
.partner-benefits-cr-amount--positive     { color: #6ab04c; }
.partner-benefits-cr-amount--negative     { color: #c06090; }
.partner-benefits-cr-entry__date          { color: #aaa; }
.partner-benefits-cr-note                 { font-size: 0.78rem; color: #aaa; margin: 0.5rem 0 0; }
.partner-benefits-cr-note a               { color: #e07a94; }

/* Filter selects and compact buttons inside filter-bar */
.filter-bar select {
  font-size: 0.83rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid #e0d0d0;
  border-radius: 6px;
}
.filter-bar .btn-reysan { font-size: 0.83rem; padding: 0.3rem 0.6rem; }


/* ── 38A — Partner Dashboard & Account Visual Polish ── */

/* data-card-grid inside partner-account-card: spacing before CTA link */
.partner-account-card .data-card-grid { margin-bottom: 0.5rem; }

/* QR / referral code section in partner dashboard */
.partner-dashboard-code-row    { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.partner-dashboard-code-display { font-size: 1.3rem; font-weight: 700; letter-spacing: 0.1em; color: var(--color-rosa-reysan, #e07a94); }
.partner-dashboard-qr-img      { width: 100px; height: 100px; border: 1px solid #e5d9c5; border-radius: 6px; display: block; margin-bottom: 0.5rem; }


/* ── 39A — Partner Settlements & Lots Visual Polish ── */

/* Status badge row directly below dashboard-hero in admin detail pages */
.partner-hero-badge-row { margin: 0.5rem 0 0.75rem; }

/* Right-side meta column in admin settlement list rows */
.partner-settlement-row__right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }

/* Header row inside each settlement line card */
.partner-settlement-line__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.25rem; }

/* Inline form field row (quantity + price fields side by side) */
.partner-form-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; align-items: center; }

/* ── 40A — Admin Partner Profile & Audit Visual Polish ── */
/* Alert list + alert items in audit panels */
.partner-audit-alert-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.partner-audit-alert { padding: 0.5rem 0.75rem; border-radius: 4px; font-size: 0.85rem; border-left: 4px solid transparent; margin-bottom: 1rem; }
.partner-audit-alert-list .partner-audit-alert { margin-bottom: 0; }
.partner-audit-alert--warn { background: #fff3cd; border-left-color: #f0a500; color: #7a5200; }
.partner-audit-alert--ok   { background: #f0faf0; border-left-color: #6ab04c; color: #2d6a2d; }

/* Section title inside reysan-data-panel sections (audit/benefit panels) */
.partner-panel-title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: #666; margin: 0 0 0.75rem; }

/* Recent items list inside audit panels */
.partner-audit-recent-list { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.5rem; }
.partner-audit-recent-item { font-size: 0.83rem; color: #555; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* Admin benefits card list layout */
.partner-benefits-admin-list { display: flex; flex-direction: column; gap: 0.75rem; }
.partner-benefits-admin-card { padding: 0.9rem 1rem; }
.partner-benefits-admin-card__header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.partner-benefits-admin-card__meta   { display: flex; gap: 0.75rem; flex-wrap: wrap; font-size: 0.83rem; color: #444; margin-bottom: 0.5rem; }
.partner-benefits-admin-card__footer { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }

/* Benefit trazabilidad rows in benefit_detail */
.partner-benefit-trace-list { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.84rem; color: #444; }
.partner-benefit-trace-row  { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.partner-benefit-context-box          { margin-top: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.84rem; }
.partner-benefit-context-box--lot     { background: #f5f5f5; }
.partner-benefit-context-box--empty   { background: #fffbe8; font-size: 0.82rem; color: #888; }
.partner-benefit-context-box--cr      { background: #fdf6ee; }

/* ── 42A — Admin Planning Workbook Visual Polish ── */
.section-header--split { flex-wrap: wrap; }
.planning-form--inline { display: inline; }
.planning-plan-card__title-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.planning-config-dl { margin-top: 0.75rem; display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; font-size: 0.88rem; }
.planning-config-dl dt { color: #888; }
.planning-config-full { grid-column: 1 / -1; }
.planning-tfoot-label { text-align: right; font-weight: 700; font-size: 0.82rem; color: #888; }
.planning-tfoot-value { font-weight: 700; }
/* 54B: inline row save */
.planning-row-actions { white-space: nowrap; display: flex; gap: 0.25rem; align-items: center; }

/* ── 43A — Admin Support & Users Visual Polish ── */
.support-form--contents { display: contents; }
.empty-state--compact { padding: 1.25rem 0.5rem; }
.reysan-form__checkbox-label { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; }
.reysan-form__checkbox-label input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; }

/* ── 44A — Admin Orders & Payments Visual Polish ── */
/* order-tag badges inside section titles */
.expedient-section__title .order-tag { margin-left: 0.5rem; font-size: 0.75rem; }
/* data-card-grid bottom spacing */
.data-card-grid--spaced { margin-bottom: 0.75rem; }
/* admin cold point override form */
.admin-override-details { margin-top: 0.5rem; }
.admin-override-summary { cursor: pointer; font-size: 0.85rem; color: #555; font-weight: 600; }
.admin-override-form { margin-top: 0.5rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.75rem; }
.admin-override-label { font-size: 0.8rem; font-weight: 600; display: block; margin-bottom: 0.2rem; }
.admin-override-form .btn-reysan { margin-top: 0.5rem; }
/* failed pickup resolution form */
.order-form-field { margin-bottom: 0.75rem; }
.order-form-label { font-weight: 600; font-size: 0.85rem; display: block; margin-bottom: 0.3rem; }
.order-form-input { padding: 0.4rem 0.6rem; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 0.88rem; }
.order-form-textarea { width: 100%; max-width: 480px; padding: 0.4rem 0.6rem; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 0.85rem; }
/* resolution closed panel */
.order-resolution-panel { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
/* product card availability note */
.product-card__avail-note { font-size: 0.73rem; color: #666; margin-top: 0.3rem; font-style: italic; }
/* payment card no-proof note */
.payment-card__no-proof-note { padding: 0 0.85rem 0.75rem; color: var(--reysan-gray-dark); font-size: 0.85rem; margin: 0; }

/* ── 45A — Remaining Templates Design System Sweep ── */
/* catalog availability hero spacing */
.catalog-hero--top { margin-top: 0.75rem; }
/* tight variant data grid */
.data-card-grid--tight { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
/* crop editor form field */
.crop-form-field { margin-bottom: 1rem; }
/* generic form help note */
.form-help-note { display: block; margin-top: 0.3rem; opacity: 0.75; text-transform: none; }
/* planning form row — bottom-aligned variant */
.reports-date-form__row--bottom { align-items: flex-end; gap: 0.6rem; }
/* planning new-week form field */
.planning-form-field { margin-bottom: 0.6rem; }
/* reward reject form gap inside king-reward-actions */
.king-reward-actions__form + .king-reward-actions__form { margin-top: 0.6rem; }

/* ── 53A: Planning Production Pack ──────────────────────────────────────── */

.planning-pack-checklist {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}
.planning-pack-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.38rem 0;
  border-bottom: 1px solid #f0e8df;
  font-size: 0.9rem;
  color: #2d1a0a;
}
.planning-pack-checklist-item:last-child { border-bottom: none; }

.planning-pack-checkbox {
  display: inline-block;
  width: 16px;
  min-width: 16px;
  height: 16px;
  border: 1.5px solid #aaa;
  border-radius: 3px;
  margin-top: 2px;
  background: #fff;
}

.planning-pack-print-note {
  font-size: 0.78rem;
  color: #888;
  margin-top: 0.6rem;
  font-style: italic;
}

@media print {
  /* planning-card gets same page-break treatment as planning-weekly-section */
  .planning-card { page-break-inside: avoid; margin-bottom: 0.75rem; }
  .planning-pack-checkbox {
    border: 1.5px solid #000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ── 56A Inventory V1A ─────────────────────────────────────────────────────── */

.inventory-badge--ok    { background: #d4edda; color: #155724; }
.inventory-badge--empty { background: #f8d7da; color: #721c24; }

.inventory-item-card {
  background: #fff;
  border: 1.5px solid #e8d5c0;
  border-radius: 10px;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s;
}
.inventory-item-card:hover { box-shadow: 0 4px 12px rgba(100,60,20,0.12); }
.inventory-item-card--alert { border-color: #f5c6cb; }
.inventory-item-card--low   { border-color: #ffc107; }
.inventory-item-card__name  { font-weight: 700; font-size: 0.95rem; color: #2c1810; }
.inventory-item-card__meta  { font-size: 0.8rem; color: #888; }
.inventory-item-card__stock { font-size: 0.88rem; color: #555; }

.inventory-form { max-width: 660px; }
.inventory-form__section {
  background: #f9f5f0;
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.inventory-form__section-title {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8b4513;
  margin: 0 0 0.75rem;
}

.inventory-movement-help {
  font-size: 0.86rem;
  color: #5c4700;
  background: #fff9e6;
  border: 1px solid #ffc107;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.inventory-section-details {
  margin-bottom: 1rem;
}
.inventory-section-details > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.5rem 0.25rem;
  color: #2c1810;
  list-style: none;
  user-select: none;
}
.inventory-section-details > summary::marker,
.inventory-section-details > summary::-webkit-details-marker { display: none; }
.inventory-section-details > summary::before {
  content: "▶ ";
  font-size: 0.68em;
  opacity: 0.6;
}
.inventory-section-details[open] > summary::before { content: "▼ "; }

.inventory-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; font-size: 0.88rem; margin: 0; }
.inventory-dl dt { font-weight: 600; color: #8b4513; white-space: nowrap; }
.inventory-dl dd { color: #333; margin: 0; }

.inventory-pending-count-panel {
  border-left: 4px solid #ffc107;
  margin-bottom: 1rem;
}
.inventory-pending-count-panel__desc {
  font-size: 0.88rem;
  color: #555;
  margin: 0 0 0.9rem;
  line-height: 1.55;
}

.inventory-first-count-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background: #e8f5e9;
  border: 1.5px solid #a5d6a7;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  font-size: 0.88rem;
  color: #1b5e20;
  line-height: 1.55;
}
.inventory-first-count-banner__icon { font-size: 1.6rem; flex-shrink: 0; }
.inventory-first-count-banner p { margin: 0.4rem 0 0; }

/* ── Inventory 56C: Purchase total live display ── */
.inventory-purchase-total {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  background: #f0f7ff;
  border: 1.5px solid #90caf9;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0 0.75rem;
}
.inventory-purchase-total__label {
  font-size: 0.82rem;
  color: #555;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.inventory-purchase-total__value {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1565c0;
}
.inventory-purchase-total__note {
  font-size: 0.8rem;
  color: #777;
  flex-basis: 100%;
}

/* ── Inventory 56D: Movement filter grid and inputs ── */
.inventory-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}
.inventory-filter-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.65rem;
  border: 1.5px solid #d0d5dd;
  border-radius: 6px;
  font-size: 0.9rem;
  background: #fff;
  color: #222;
  line-height: 1.4;
}
.inventory-filter-input:focus {
  outline: none;
  border-color: #90caf9;
  box-shadow: 0 0 0 3px rgba(144, 202, 249, 0.25);
}

/* ── Inventory 56E: Pagination ── */
.inventory-pagination {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.inventory-pagination__info {
  font-size: 0.88rem;
  color: #555;
  font-weight: 600;
}