/* ============================================================
   Rebajas Diarias — sistema de diseño del sitio web
   Look editorial/profesional (referencia: comparadores de ofertas
   serios, no "mercadillo"): paleta contenida, mucho blanco,
   acento de color reservado para precio/descuento, tipografía del
   sistema para que cargue rápido y se vea nítida en cualquier SO.
   ============================================================ */

:root {
  --navy: #1e3752;
  --navy-light: #2a4e75;
  --blue: #1aacd6;
  --orange: #ff8e34;
  --red: #d5342e;
  --bg: #f5f6fa;
  --card: #ffffff;
  --border: #e4e7ee;
  --text: #1b2430;
  --text-muted: #5c6672;
  --text-faint: #8a93a1;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-card: 0 1px 2px rgba(20, 30, 50, 0.06), 0 1px 1px rgba(20, 30, 50, 0.04);
  --shadow-card-hover: 0 10px 24px rgba(20, 30, 50, 0.12), 0 2px 6px rgba(20, 30, 50, 0.06);
  --shadow-header: 0 1px 0 rgba(20, 30, 50, 0.06), 0 2px 10px rgba(20, 30, 50, 0.04);
  --max-width: 1240px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

button { font-family: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Barra de utilidad (muy fina, deja el resto sobrio) ---------- */
.utility-bar {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12.5px;
  padding: 6px 0;
}
.utility-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.utility-bar a { color: #fff; font-weight: 600; }
.utility-bar a:hover { text-decoration: underline; }

/* ---------- Cabecera ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  box-shadow: var(--shadow-header);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.brand span {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
  margin-left: 4px;
}
.main-nav a { padding: 6px 0; border-bottom: 2px solid transparent; }
.main-nav a:hover { border-bottom-color: var(--orange); }

.search-form {
  flex: 1;
  display: flex;
  align-items: center;
  max-width: 420px;
  margin-left: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 6px 4px 16px;
}
.search-form input {
  border: none;
  background: transparent;
  outline: none;
  flex: 1;
  font-size: 14px;
  color: var(--text);
  padding: 8px 0;
}
.search-form input::placeholder { color: var(--text-faint); }
.search-form button {
  border: none;
  background: var(--navy);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.search-form button:hover { background: var(--navy-light); }
.search-form svg { width: 16px; height: 16px; }

.nav-toggle {
  display: none;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius-sm);
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ---------- Cuenta (25 ago 2026) ---------- */
.account-btn {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--navy);
  flex-shrink: 0;
  padding: 0;
  overflow: hidden;
}
.account-btn svg { width: 20px; height: 20px; }
.account-btn img { width: 100%; height: 100%; object-fit: cover; }
.account-btn:hover { border-color: var(--navy-light); }

.account-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 45, 0.45);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.account-sheet-overlay[hidden] { display: none; }
@media (min-width: 560px) {
  .account-sheet-overlay { align-items: center; }
}
.account-sheet {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 26px 24px;
  width: 100%;
  max-width: 380px;
  max-height: 88vh;
  overflow-y: auto;
}
@media (min-width: 560px) {
  .account-sheet { border-radius: var(--radius-lg); }
}
.account-sheet h3 { margin: 0 0 8px; font-size: 18px; color: var(--navy); }
.account-sheet p { margin: 0 0 18px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.account-sheet-close {
  position: absolute;
  top: 14px;
  right: 16px;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-faint);
  cursor: pointer;
}
.account-sheet-error {
  color: var(--red);
  font-size: 13px;
  margin: -10px 0 14px;
}
.account-sheet-error[hidden] { display: none; }
.account-sheet-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius-md);
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}
.account-sheet-google-btn:hover { background: var(--bg); }
.account-sheet-user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.account-sheet-user img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
}
.account-sheet-user div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-sheet-user strong { font-size: 15px; color: var(--navy); }
.account-sheet-user span { font-size: 12.5px; color: var(--text-muted); }
.account-sheet-member-since { font-size: 11px !important; opacity: 0.85; }

/* Perfil "profesional" (31 ago 2026) -- publicaciones/respuestas de un vistazo bajo la
   cabecera de la cuenta. */
.account-sheet-stats {
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
}
.account-sheet-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  background: var(--bg);
  border-radius: 10px;
}
.account-sheet-stat-value { font-size: 15px; font-weight: 700; color: var(--navy); }
.account-sheet-stat-label { font-size: 11px; color: var(--text-muted); }

/* "🔔 Mensajes" (31 ago 2026) -- badge de sin leer + lista de respuestas recibidas. */
.account-sheet-messages-badge {
  display: inline-block;
  background: #e53935;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.message-item {
  display: flex;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer;
}
.message-item.unread { background: rgba(37, 99, 235, 0.07); }
.message-item-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e53935;
  margin-top: 5px;
  flex-shrink: 0;
}
.message-item-body { flex: 1; min-width: 0; }
.message-item-body p { margin: 2px 0 0; font-size: 12.5px; }
.message-item-from { font-weight: 700; }
.message-item-date { font-size: 10.5px; color: var(--text-muted); }
.account-sheet-messages-mark-all {
  background: none;
  border: none;
  color: var(--navy);
  font-size: 11.5px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 8px;
}
.account-sheet-signout-btn {
  width: 100%;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius-md);
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
}
.account-sheet-signout-btn:hover { background: var(--bg); }
/* Borrar cuenta (27 ago 2026, guideline 5.1.1(v)) -- mismo tamaño que "Cerrar sesión" pero en
   rojo y sin borde, para que se note que es una acción distinta (irreversible) sin que grite
   tanto como para parecer el botón principal de la hoja. */
.account-sheet-delete-btn {
  width: 100%;
  border: none;
  background: none;
  margin-top: 8px;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #c0392b;
  cursor: pointer;
}
.account-sheet-delete-btn:hover { text-decoration: underline; }

/* Ficha de oferta + comentarios (27 ago 2026) -- reutiliza .account-sheet-overlay/.account-sheet
   como base (mismo overlay/panel), solo un poco más ancha para dejar sitio a la miniatura. */
.comments-sheet { max-width: 480px; padding-top: 24px; }
.comments-offer-preview {
  display: flex;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.comments-offer-preview img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: #fbfbfd;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.comments-offer-preview .offer-title { -webkit-line-clamp: 2; min-height: 0; }
.comments-offer-preview .offer-price-row { margin-top: 6px; }
.comments-offer-cta {
  display: inline-block;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}
.comments-offer-cta:hover { text-decoration: underline; }
.comments-heading {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--navy);
}
.comments-signin-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.comments-signin-hint button {
  flex-shrink: 0;
  border: none;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.comment-form {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.comment-form input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13.5px;
  background: var(--bg);
}
.comment-form input:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
/* :not(.community-category-chip) (30 ago 2026) -- este selector de descendientes también
   atrapaba a los chips de categoría del composer de Comunidad (son <button> dentro del mismo
   <form class="comment-form">), forzándolos a círculos de 40px con el texto cortado. Los
   chips tienen su propio estilo en .community-category-chip más abajo. */
.comment-form button:not(.community-category-chip) {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
.comment-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.comment-item:last-child { border-bottom: none; }
.comment-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--navy);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  overflow: hidden;
}
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment-body { flex: 1; min-width: 0; }
.comment-meta {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 12.5px;
}
.comment-meta strong { color: var(--text); }
.comment-meta span { color: var(--text-faint); font-size: 11.5px; }

/* Insignia de nivel de "cazador" + perfil público (28 ago 2026, misma idea que en la app,
   HunterLevelService/HunterProfilePage) -- ver js/community.js. */
.author-link { cursor: pointer; font-weight: 700; color: var(--text); }
.author-link:hover { text-decoration: underline; }
.comment-avatar.author-link { text-decoration: none; }
.hunter-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(26, 172, 214, 0.12);
  color: var(--navy);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.hunter-profile-header { text-align: center; margin-bottom: 18px; }
.hunter-profile-header strong { display: block; font-size: 18px; color: var(--text); margin-bottom: 8px; }
.hunter-profile-header .hunter-badge { font-size: 12.5px; padding: 5px 12px; }
/* Badge compacto encima del nombre en "Mi cuenta" (31 ago 2026, pedido explícito). */
.hunter-badge-inline { margin-bottom: 3px; }
.hunter-profile-header .account-sheet-hint { margin-top: 6px; }
.hunter-profile-offers { display: flex; flex-direction: column; gap: 8px; }
.hunter-profile-offer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.hunter-profile-offer img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: #fbfbfd;
  border-radius: 8px;
}
.hunter-profile-offer p { margin: 0; font-size: 12.5px; color: var(--text); line-height: 1.3; }
.hunter-profile-offer strong { color: var(--navy); font-size: 14px; }
.hunter-profile-offer-old {
  margin-left: 6px;
  font-size: 11.5px;
  color: var(--text-faint);
  text-decoration: line-through;
}
.comment-body p {
  margin: 3px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text);
  word-wrap: break-word;
}
.comment-delete {
  align-self: flex-start;
  border: none;
  background: none;
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  flex-shrink: 0;
}
.comment-delete:hover { color: var(--red); }
/* Denunciar comentario ajeno (27 ago 2026) -- mismo hueco que comment-delete, solo se muestra
   cuando NO se puede borrar (no es tuyo ni eres admin). */
.comment-report {
  align-self: flex-start;
  border: none;
  background: none;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 3px 4px;
  flex-shrink: 0;
  opacity: 0.55;
}
.comment-report:hover { opacity: 1; }
.comment-report:disabled { cursor: default; opacity: 0.8; }

/* Comunidad (28 ago 2026): mismo .comment-item de arriba para cada publicación del muro, solo
   añade el enlace "Responder" debajo del texto. */
.community-post .comment-body p { margin-bottom: 4px; }
.community-reply-btn {
  border: none;
  background: none;
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 0;
}
.community-reply-btn:hover { text-decoration: underline; }

/* Hilos con nombre + categorías (29 ago 2026) -- "que la gente pudiese crear temas/hilos y
   así estaría todo bien organizado". Composer con título, chips de categoría (lista fija,
   ver RD_AUTH.communityCategories) y el texto; el índice del muro pasa a mostrar título +
   categoría + nº de respuestas en vez del texto completo. */
.community-form { flex-direction: column; align-items: stretch; }
.community-form #community-title-input { margin-bottom: 8px; }
.community-form-row { display: flex; gap: 8px; }
.community-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.community-category-chip {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-faint);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.community-category-chip.selected {
  border-color: var(--navy);
  background: rgba(26, 172, 214, 0.12);
  color: var(--navy);
}
.community-post-title, .community-post-detail-title {
  margin: 3px 0 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
}
.community-post-detail-title { font-size: 16px; }

/* Pestañas de sección + gestión de categorías (29 ago 2026, "que la gente pueda crear temas
   individuales cada uno" + "que podamos añadir nosotros") -- las categorías pasaron de lista
   fija a secciones reales que un admin gestiona sin desplegar nada. */
.community-tabs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 16px;
}
.community-manage-categories {
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}
.community-manage-categories summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
}
.community-manage-category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.community-manage-category-row:last-of-type { border-bottom: none; }
.community-delete-category-btn {
  border: none;
  background: none;
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.community-delete-category-btn:hover { color: var(--red); }
.community-manage-categories #community-add-category-form { margin-top: 10px; margin-bottom: 0; }
.community-category-tag {
  display: inline-block;
  margin-top: 4px;
  background: var(--bg);
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* "Sugerir una oferta" + "Mis sugerencias" + panel de administración (26 ago 2026) */
.account-sheet-section {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-bottom: 18px;
}
.account-sheet-section h4 { margin: 0 0 6px; font-size: 14px; color: var(--navy); }
.account-sheet-hint { margin: 0 0 10px; color: var(--text-muted); font-size: 12.5px; line-height: 1.5; }
.account-sheet-hint a { color: var(--navy); }
.account-sheet-success { color: var(--green, #1a7f37); font-size: 13px; margin: -6px 0 10px; }
.account-sheet-success[hidden] { display: none; }
.account-sheet-submit-form {
  display: flex;
  gap: 8px;
}
.account-sheet-submit-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 13.5px;
}
.account-sheet-submit-form button {
  border: none;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
}
.account-sheet-submit-form button:hover { background: var(--navy-light); }
.account-sheet-submit-form button:disabled { opacity: 0.6; cursor: default; }

/* Buscador del directorio de usuarios en el panel de admin (30 ago 2026) -- mismo estilo que
   los inputs del formulario de arriba, ocupa toda la fila propia. */
.account-sheet-search {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 13.5px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

/* Alertas por palabra clave/marca (27 ago 2026) -- mismo formulario que account-sheet-submit-
   form, chips propios para la lista de palabras guardadas. */
.keyword-alert-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.keyword-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 6px 5px 12px;
  font-size: 12.5px;
  color: var(--text);
}
.keyword-chip-remove {
  border: none;
  background: none;
  color: var(--text-faint);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
}
.keyword-chip-remove:hover { color: var(--red); }

.submission-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.submission-item:last-child { border-bottom: none; }
.submission-item img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm, 6px);
  object-fit: cover;
  background: var(--bg);
  flex-shrink: 0;
}
.submission-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.submission-item-title {
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.submission-item-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.submission-item-date { font-size: 11.5px; color: var(--text-faint); }
.submission-item-reason { font-size: 11.5px; color: var(--red); }
.submission-price { font-size: 12.5px; font-weight: 700; color: var(--navy); }
.submission-status {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.submission-status-pending { background: #fff2df; color: #a4600c; }
.submission-status-approved { background: #e3f5e8; color: #1a7f37; }
.submission-status-rejected { background: #fbe6e6; color: var(--red); }
.submission-item-delete {
  border: none;
  background: none;
  color: var(--text-faint);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  flex-shrink: 0;
}
.submission-item-delete:hover { color: var(--red); }
.submission-item-delete:disabled { opacity: 0.5; cursor: default; }

.account-sheet-admin { background: var(--bg); border-radius: var(--radius-md); padding: 14px; border-top: none; }
.submission-item-admin-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.submission-item-admin-actions button {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius-sm, 6px);
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.submission-item-admin-actions button:hover { background: var(--border); }

/* "Cazadores y administradores" (28 ago 2026, ver js/app.js renderAdminUsers) -- mismo look
   que .submission-item, con controles inline en vez de un botón único de borrar. */
.admin-user-item img {
  border-radius: 50%;
}
.admin-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(230, 57, 70, 0.12);
  color: var(--red);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.admin-user-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
/* Desplegable de rango de cazador (30 ago 2026) -- sustituye al cuadro de número + botón de
   guardar de antes, un solo clic elige el rango y guarda al momento. */
.admin-hunter-rank-select {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius-sm, 6px);
  padding: 4px 6px;
  font-size: 11.5px;
  cursor: pointer;
}
.admin-hunter-rank-select:disabled { opacity: 0.5; cursor: default; }
.admin-toggle-admin-btn {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius-sm, 6px);
  padding: 4px 9px;
  font-size: 11.5px;
  cursor: pointer;
  white-space: nowrap;
}
.admin-toggle-admin-btn:hover { background: var(--border); }
.admin-toggle-admin-btn:disabled { opacity: 0.5; cursor: default; }
.admin-toggle-admin-btn[data-is-admin="1"] { border-color: var(--red); color: var(--red); }

/* Fila de categorías, scroll horizontal en cualquier ancho */
.category-strip {
  border-top: 1px solid var(--border);
  background: #fff;
  /* Fija (24 ago 2026, pedido del usuario): Categorías/Filtros/Tienda se quedan visibles al
     hacer scroll, en vez de desaparecer nada más pasar el hero -- pegada justo debajo de
     .site-header (que ya era sticky), altura real medida por JS en --header-height (ver
     measureHeaderHeight() en app.js) para no depender de un número fijo que se desajuste si
     cambia el contenido del header. z-index un punto por debajo del header para que su sombra
     quede siempre encima. */
  position: sticky;
  top: var(--header-height, 60px);
  z-index: 39;
}
.category-strip .wrap {
  display: flex;
  align-items: center;
  /* Mismo gap que .quick-tiles (25 ago 2026, unificación de estilo -- antes 6px, más apretado
     porque las tarjetas eran más pequeñas). */
  gap: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
  /* Todo en una sola fila con scroll, nunca se parte en dos líneas (25 ago 2026, pedido
     explícito del usuario tras ver "Filtros" encima de las tiendas en móvil, "queda mal" --
     antes esto pasaba a flex-wrap en pantallas estrechas). */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}
.category-strip .wrap::-webkit-scrollbar { height: 4px; }
.category-strip .wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.category-strip-scroll {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scroll-behavior: smooth;
  flex: 1;
  min-width: 0;
  scrollbar-width: thin;
}
.category-strip-scroll::-webkit-scrollbar { height: 5px; }
.category-strip-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.strip-arrow {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--navy);
}
.strip-arrow svg { width: 15px; height: 15px; }
.strip-arrow:hover { background: var(--bg); }
.strip-arrow:disabled { opacity: 0.3; cursor: default; }
.strip-arrow:disabled:hover { background: #fff; }
@media (max-width: 640px) {
  .strip-arrow { display: none; }
}
.cat-pill {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.cat-pill-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  border-radius: 50%;
  background: var(--bg);
}
.cat-pill:hover { background: var(--bg); }
.cat-pill.active { background: var(--navy); color: #fff; }
.cat-pill.active .cat-pill-icon { background: rgba(255,255,255,0.15); }

/* Multi-tienda (24 ago 2026): franja de filtro por tienda, mismo esqueleto que
   .category-strip pero sin scroll horizontal (nunca son muchas) y con logos reales en vez
   de emoji — los PNG de assets/tiendas/ ya traen su propio fondo blanco (bajados de la ficha
   pública de cada anunciante en Awin), así que el pill nunca se rellena de color al activarse
   (se vería una caja blanca flotando dentro); en su lugar se marca el estado activo con un
   anillo de color alrededor, igual de claro sin romper el logo. */
/* Categorías (24 ago 2026): desplegable en vez de franja con scroll horizontal + flechas —
   pedido explícito del usuario, más "profesional" y no depende de deslizar para encontrar una
   categoría. Mismo botón/panel flotante que .filter-btn/.filter-panel (reutilizadas), con un
   check de "seleccionado" pintado por CSS (no hay que re-renderizar el HTML al cambiar). */
/* De vuelta a la vista, con el mismo formato de tarjeta que las tiendas (25 ago 2026, pedido
   explícito: "en vez de todas debería de ser categorías como estaba") -- ocupa el primer
   hueco de la fila, donde antes estaba la tarjeta "Todas [las tiendas]" (ver renderStoreStrip
   en app.js, ya no la pinta). Sin override de tamaño propio: usa .quick-tile tal cual, igual
   que Filtros y cada tienda (25 ago 2026, unificación de estilo -- antes tenía su propio
   tamaño más pequeño, ver comentario junto a .store-strip-inline). */
#category-dropdown-label { text-align: center; line-height: 1.2; }
#category-dropdown-panel {
  /* Selector por id: igual que #store-dropdown-panel más abajo, para ganarle a .filter-panel
     en tamaño sin depender del orden en el archivo. */
  width: 260px;
  max-height: 360px;
  overflow-y: auto;
  padding: 8px;
}
.category-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
}
.category-option:hover { background: var(--bg); }
.category-option.active { background: var(--bg); }
.category-option-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 50%;
  background: var(--bg);
}
.category-option-count {
  margin-left: auto;
  color: var(--text-faint);
  font-weight: 600;
  font-size: 12.5px;
}
.category-option.active::after {
  content: "✓";
  color: var(--navy);
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  margin-left: 6px;
}

/* Multi-tienda: franja de pills con logo (restaurada 24 ago tras probar un desplegable aquí
   también — el usuario prefirió dejarla como estaba, solo pidió el cambio en categorías). */
/* Multi-tienda: pills en la misma fila que Filtros/Categorías (24 ago 2026 — antes una franja
   aparte debajo, con mucho hueco vacío para solo 3-4 pills, aviso real del usuario). Altura
   reducida (34px) para que visualmente acompañen a .filter-btn en vez de dominar la fila. */
/* Mismo formato .quick-tile que Categorías/Filtros, unificado del todo (25 ago 2026 -- antes
   .store-pill tenía su propio tamaño ligeramente distinto, 68px/10px en vez de 84px/11px, y se
   notaba al lado de los accesos rápidos de la portada curada que usaban .quick-tile de verdad;
   aviso real del usuario: "sigue estando duplicado" / "me gusta más el que se ve arriba"). Sin
   borde/hueco divisor a la izquierda -- fluye en la misma fila que Categorías, separado solo
   por el gap normal de tarjeta a tarjeta (mismo criterio que el resto de .quick-tile). */
/* :not([hidden]) (en vez de solo .store-strip-inline{display:contents}) -- una regla de autor
   con display:contents empataría en especificidad con el [hidden]{display:none} del navegador
   y, a igualdad, gana la del autor por origen de cascada, dejando el atributo hidden sin efecto
   y la franja de tiendas siempre visible aunque no haya ninguna más aparte de Amazon. */
.store-strip-inline:not([hidden]) { display: contents; }
.store-strip-inner { display: contents; }

/* "Página de tienda" (store-view-*, 24 ago 2026) — cabecera con logo + descripción cuando se
   filtra por una tienda concreta sin más filtros encima (ver renderStoreView() en app.js). */
.store-view-header {
  padding-top: 4px;
  padding-bottom: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.store-view-intro {
  display: flex;
  align-items: center;
  gap: 16px;
}
.store-view-logo {
  height: 44px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 14px;
  background: #fff;
}
.store-view-logo-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  padding: 8px 20px;
}
.store-view-description {
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--text-faint);
  max-width: 640px;
  line-height: 1.5;
}
@media (max-width: 560px) {
  .store-view-header { flex-direction: column; }
  .store-view-intro { gap: 12px; }
  .store-view-logo, .store-view-logo-text { height: 38px; }
}

/* Aviso de campaña dentro de la página de una tienda (25 ago 2026, pedido explícito: "pero
   dentro de leroy debe estar esa campaña también") -- mismo mensaje que la diapositiva del
   hero, aquí en formato tarjeta simple ya que el hero no aplica dentro de esta vista. */
.store-campaign-banner {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 22px;
}
.store-campaign-banner strong {
  display: block;
  color: var(--navy);
  font-size: 15px;
  margin-bottom: 4px;
}
.store-campaign-banner p {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-faint);
  line-height: 1.5;
}

/* ---------- Filtros ---------- */
/* Categorías/Filtros ya no usan .filter-wrap/.filter-btn (pills con texto+borde divisor) --
   25 ago 2026, unificados al mismo formato .quick-tile que las tiendas y que tenían los
   accesos rápidos de la portada curada (quitados de ahí, ver comentario junto a
   .store-strip-inline: mismo contenido en dos sitios era justo el duplicado que reportó el
   usuario). Solo hace falta el indicador ".dot" de Filtros con activo, reutilizado tal cual
   sobre el nuevo formato de tarjeta. */
.quick-tile .dot {
  display: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  position: absolute;
  top: 6px;
  right: 6px;
}
.quick-tile.active .dot { display: block; }

/* position:fixed en vez de absolute (25 ago 2026, bug real: "categorías no funciona") --
   .category-strip .wrap tiene overflow-x:auto desde la fila única con scroll, y en CSS eso
   fuerza overflow-y a "auto" también (no puede ser "auto" en un eje y "visible" en el otro) --
   ese overflow-y recortaba este panel (descendiente absoluto) a la altura de la fila, dejando
   solo una rendija visible por debajo aunque el panel sí se abría. Con position:fixed el panel
   ya no depende del overflow de ningún ancestro; top/left se calculan en JS
   (positionFloatingPanel() en app.js) a partir de la posición real del botón cada vez que se
   abre. */
.filter-panel {
  display: none;
  position: fixed;
  z-index: 50;
  width: 300px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  padding: 18px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}
.filter-panel.open { display: block; }
.filter-panel h4 {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.filter-chip {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--navy);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.filter-chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.filter-price-row { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.filter-price-row input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 9px;
  font-size: 13px;
  font-family: inherit;
}
.filter-price-row span { color: var(--text-faint); font-size: 12px; }

.filter-sort select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 9px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  margin-bottom: 18px;
}

.filter-actions { display: flex; gap: 10px; }
.filter-actions button {
  flex: 1;
  border-radius: var(--radius-sm);
  padding: 9px 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.filter-clear { border: 1px solid var(--border); background: #fff; color: var(--navy); }
.filter-clear:hover { background: var(--bg); }
.filter-apply { border: none; background: var(--navy); color: #fff; }
.filter-apply:hover { background: var(--navy-light); }

/* ---------- Banner de marca (25 ago 2026) ---------- */
/* La app sigue mostrando esto encima de las pilas nuevas -- restaurado tras quitarse por
   error al portar la portada curada (aviso del usuario: "me has quitado el banner"). */
.hero {
  margin-top: 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
  padding: 36px 40px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,172,214,0.35), transparent 70%);
}
.hero-inner { max-width: 720px; margin: 0 auto; position: relative; }
.hero h1 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  transition: opacity 0.3s ease;
}
.hero p {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14.5px;
  line-height: 1.6;
  transition: opacity 0.3s ease;
}
/* CTA de campaña (25 ago 2026) -- solo visible en la diapositiva de campaña, ver
   finalizeCampaign()/renderHeroContent() en app.js. */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 16px;
  border-radius: 999px;
  text-decoration: none;
  margin-bottom: 20px;
}
.hero-cta:hover { background: rgba(255, 255, 255, 0.9); }
.hero-cta[hidden] { display: none; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 26px; }
/* [hidden] explícito (25 ago 2026) -- .hero-stats{display:flex} es CSS de autor y empataría en
   especificidad con el [hidden]{display:none} del navegador; a igualdad de especificidad gana
   el de autor por origen de cascada, así que sin esta regla el atributo hidden no haría nada
   (mismo motivo que .store-strip-inline[hidden] más arriba). */
.hero-stats[hidden] { display: none; }
.hero-stats div { min-width: 110px; }
.hero-stats strong { display: block; font-size: 20px; font-weight: 800; }
.hero-stats span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
@media (max-width: 560px) {
  .hero { padding: 26px 20px; }
  .hero-stats { gap: 16px; }
}

/* ---------- Portada curada (25 ago 2026) ---------- */
/* Mismo diseño que la app Flutter tras el rediseño de portada ("transforma el html
   exactamente igual que la app", pedido explícito del usuario): oferta del día + elegidas
   para ti hoy, las dos en pila deslizable con scroll nativo (scroll-snap, sin JS de
   carrusel), accesos rápidos y botón para bajar al catálogo completo. Sustituye al
   carrusel único de 7 diapositivas de antes. */
.curated-home {
  margin-top: 28px;
}
/* .campaign-strip (banner de campaña aparte) quitado el 25 ago 2026 -- el aviso de campaña
   ahora es una diapositiva más de la rotación del hero, ver finalizeCampaign() en app.js. */

.otd-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin-bottom: 10px;
}
.otd-label svg { width: 15px; height: 15px; color: #e6a817; }
.otd-block[hidden], .picks-block[hidden] { display: none; }

/* Contenedor de cada pila + sus 2 flechas (25 ago 2026) -- position:relative para anclar los
   botones a los lados sin salirse del ancho del catálogo. */
.stack-wrap { position: relative; }
.stack-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.stack-arrow svg { width: 16px; height: 16px; }
.stack-arrow--prev { left: -14px; }
.stack-arrow--next { right: -14px; }
.stack-arrow:disabled { opacity: 0; pointer-events: none; }
/* Encima del degradado navy de "La oferta del día" hace falta más contraste que el resto. */
.otd-block .stack-arrow { background: #fff; color: var(--navy); }
@media (max-width: 700px) {
  .stack-arrow { display: none; }
}

.otd-stack, .picks-stack {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.otd-stack { margin-bottom: 26px; }
.otd-stack::-webkit-scrollbar, .picks-stack::-webkit-scrollbar { height: 6px; }
.otd-stack::-webkit-scrollbar-thumb, .picks-stack::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

.otd-card {
  scroll-snap-align: start;
  flex: 0 0 min(560px, 88vw);
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 16px;
  text-decoration: none;
}
.otd-card-image {
  position: relative;
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 8px;
}
.otd-card-image img { width: 100%; height: 100%; object-fit: contain; }
.otd-card-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 5px;
}
.otd-card-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.otd-card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.otd-card-reason {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.otd-card-price { font-size: 18px; font-weight: 800; margin-top: 2px; }
.otd-card-price s { font-weight: 400; font-size: 13px; color: rgba(255, 255, 255, 0.55); margin-left: 6px; }

.picks-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.picks-head h2 { font-size: 19px; font-weight: 800; color: var(--navy); margin: 0; }
.picks-head span { font-size: 12.5px; color: var(--text-muted); }

.pick-card {
  scroll-snap-align: start;
  flex: 0 0 220px;
  display: flex;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px;
  text-decoration: none;
  color: var(--text);
}
.pick-card-image {
  position: relative;
  flex-shrink: 0;
  width: 74px;
  height: 74px;
  background: #fbfbfd;
  border-radius: var(--radius-sm);
  padding: 6px;
}
.pick-card-image img { width: 100%; height: 100%; object-fit: contain; }
.pick-card-badge {
  position: absolute;
  top: 3px;
  left: 3px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
}
.pick-card-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; justify-content: center; }
.pick-card-store {
  font-size: 9.5px;
  font-weight: 800;
  color: #b8791f;
  letter-spacing: 0.03em;
}
.pick-card-title {
  font-size: 12.5px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pick-card-price { font-size: 14.5px; font-weight: 800; color: var(--navy); }

/* .quick-tiles (el contenedor de los accesos rápidos en la portada curada) se quitó del HTML
   el 25 ago 2026 (ver comentario en index.html junto a "Ver todo el catálogo") -- .quick-tile
   (el estilo de tarjeta en sí) sigue en uso, ahora en la franja de Categorías/tiendas/Filtros
   de más abajo. */
.quick-tile {
  flex: 0 0 84px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  /* relative (25 ago 2026): ancla el ".dot" de Filtros, que se posiciona absoluto sobre la
     tarjeta. */
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.quick-tile:hover { border-color: var(--navy-light); }
.quick-tile.active {
  border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(30,55,82,0.12);
}
.quick-tile img { height: 22px; width: auto; max-width: 56px; object-fit: contain; }
.quick-tile svg { width: 22px; height: 22px; }
.quick-tile-icon { font-size: 20px; }
.quick-tile span:not(.dot) { text-align: center; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.see-catalog-btn {
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 13px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
}
.see-catalog-btn:hover { background: var(--bg); }

@media (max-width: 560px) {
  .otd-card { flex: 0 0 92vw; padding: 12px; gap: 12px; }
  .otd-card-image { width: 80px; height: 80px; }
  .pick-card { flex: 0 0 180px; }
}
/* Destello breve al saltar a una oferta desde el hero (24 ago 2026) — para que se note cuál
   es entre el resto de la rejilla, ya que el scroll por sí solo puede no ser obvio. */
@keyframes offerHighlightFlash {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 3px var(--orange); }
}
.offer-card--highlight { animation: offerHighlightFlash 1.6s ease; }

/* ---------- Secciones ---------- */
.section {
  margin-top: 48px;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}
.section-head h2 {
  font-size: 19px;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-head .count {
  font-weight: 600;
  color: var(--text-faint);
  font-size: 13px;
}
.section-head a.see-all {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue);
  flex-shrink: 0;
}
.section-head a.see-all:hover { text-decoration: underline; }

/* ---------- Rejilla de ofertas ---------- */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}

.offer-card {
  background: var(--card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.offer-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.offer-card--new {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}
.offer-card--new:hover {
  box-shadow: 0 0 0 1px var(--blue), var(--shadow-card-hover);
}

.offer-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fbfbfd;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-bottom: 1px solid var(--border);
}
.offer-media img {
  /* width/height fijos al 100% del hueco (en vez de max-width/max-height,
     que dependen de que el motor calcule bien el tamaño "auto" del <img>
     dentro de un flex container) — así el tamaño de la caja no depende en
     absoluto del cálculo de flexbox y object-fit hace el resto. El primer
     intento (min-width/min-height: 0) no bastó: seguía recortándose en
     Safari/Chrome iOS en algunos productos. */
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.badge {
  position: absolute;
  top: 8px;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 5px;
  letter-spacing: 0.01em;
}
.badge-discount { left: 8px; background: var(--red); color: #fff; }
.badge-free { left: 8px; background: #1e9e5a; color: #fff; }
.badge-flash {
  /* 8px -> 40px (25 ago 2026): deja hueco fijo al corazón de favoritos, que vive en esa
     misma esquina y está SIEMPRE presente (a diferencia de este badge, que solo aparece en
     ofertas flash) -- así nunca se solapan, se dé o no la combinación. */
  right: 40px;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 3px;
}
.badge-flash svg { width: 10px; height: 10px; }
.offer-fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.offer-fav-btn svg { width: 16px; height: 16px; }
.offer-fav-btn:hover { color: var(--red); }
.offer-fav-btn.active { color: var(--red); }
.offer-fav-btn.active svg { fill: currentColor; }
.badge-new {
  /* abajo a la izquierda: así nunca choca con descuento/gratis (izq-arriba)
     ni con flash (der-arriba), sea cual sea la combinación de badges */
  top: auto;
  bottom: 8px;
  left: 8px;
  background: var(--blue);
  color: #fff;
}
.badge-store {
  /* Multi-tienda (24 ago 2026): abajo a la derecha, el único hueco libre de
     los 4 badges — nunca choca con descuento/gratis (izq-arriba), flash
     (der-arriba) ni "Nuevo" (izq-abajo). Solo se pinta si la oferta no es
     de Amazon (ver offerCardHtml), así que las tarjetas de Amazon se ven
     exactamente igual que siempre. */
  top: auto;
  bottom: 8px;
  right: 8px;
  background: var(--orange);
  color: #fff;
}

.offer-body {
  padding: 12px 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.offer-cat {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.offer-title {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--text);
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.offer-title b { font-weight: 700; color: var(--navy); }

/* Valoración real de Amazon (27 ago 2026) -- estrellas en navy, no en dorado, mismo motivo que
   el resto de esta hoja: el acento de color está reservado para precio/descuento. */
.offer-rating-row {
  display: flex;
  align-items: center;
  gap: 1px;
  font-size: 11px;
}
.offer-rating-row svg { width: 12px; height: 12px; }
/* Dorado/amarillo (28 ago 2026, pedido explícito: "las estrellas de rating quedarían mejor en
   dorado o amarillo") -- mismo cambio que RatingStars en la app, color fijo con o sin tema. */
.offer-rating-row .star-filled { color: #e6a817; }
.offer-rating-row .star-empty { color: var(--border); }
.offer-rating-value { margin-left: 3px; font-weight: 700; color: var(--text); }
.offer-rating-count { color: var(--text-faint); font-weight: 500; }

.offer-price-row {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.price-now {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
}
.price-now.price-free { color: #1e9e5a; }
.price-before {
  font-size: 12.5px;
  color: var(--text-faint);
  text-decoration: line-through;
}
.offer-cta {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
}
.offer-card:hover .offer-cta {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
/* "Sugerida por X" (26 ago 2026, ofertas publicadas vía "Sugerir una oferta") */
.offer-submitted-by {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
}
/* Comentarios en la tarjeta (27 ago 2026) -- botón ligero, no compite visualmente con
   offer-cta (ese es la acción principal, comprar). Ver offerCardHtml()/wireCommentsButtonDelegation. */
.offer-comments-btn {
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: none;
  background: none;
  padding: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-faint);
  cursor: pointer;
}
.offer-comments-btn svg { width: 14px; height: 14px; }
.offer-comments-btn:hover { color: var(--navy); }
/* Kindle Unlimited (26 ago 2026): "gratis" condicionado a la suscripción, nunca se presenta
   como una oferta sin más -- ver badge-free/_check_kindle_unlimited_free en update_offers.py */
.offer-ku-note {
  display: block;
  font-size: 10.5px;
  color: var(--text-faint);
  margin: -2px 0 4px;
}

/* ---------- Aviso no destructivo (fetch en vivo falló, se ve lo horneado) ---------- */
.fetch-notice {
  background: #fff7ec;
  border: 1px solid #ffd9a8;
  color: #8a5a12;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13.5px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.fetch-notice button {
  border: 1px solid #ffd9a8;
  background: #fff;
  color: #8a5a12;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.fetch-notice button:hover { background: #fff2df; }

/* ---------- Estados de carga / error ---------- */
.state-box {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.state-box h3 { color: var(--navy); font-size: 17px; margin: 14px 0 6px; }
.state-box p { font-size: 14px; max-width: 420px; margin: 0 auto; line-height: 1.5; }
.state-box button {
  margin-top: 16px;
  border: none;
  background: var(--navy);
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}
.state-box button:hover { background: var(--navy-light); }

/* Catálogo ampliado (26 ago 2026): botón dentro de .state-box hereda el mismo estilo de
   .state-box button de arriba, sin nada extra que definir. */
.extended-search-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  margin: 4px 0 14px;
}

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}
.skeleton-card {
  height: 300px;
  border-radius: var(--radius-md);
  background: linear-gradient(100deg, #eceef3 30%, #f6f7fa 50%, #eceef3 70%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Cómo funciona ---------- */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.how-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.how-step .icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(30, 55, 82, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
}
.how-step .icon svg { width: 21px; height: 21px; }
.how-step h3 { font-size: 15px; margin: 4px 0 0; color: var(--navy); }
.how-step p { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; margin: 0; }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; }
.faq details {
  border-bottom: 1px solid var(--border);
  padding: 15px 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 400;
  color: var(--text-faint);
  transition: transform 0.15s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 64px;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.72);
}
.footer-top {
  padding: 44px 0 30px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer-brand .brand span { color: #fff; }
.footer-brand p {
  font-size: 13px;
  line-height: 1.6;
  margin-top: 12px;
  max-width: 320px;
  color: rgba(255, 255, 255, 0.6);
}
.site-footer h4 {
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 12px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.site-footer ul a { font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.site-footer ul a:hover { color: #fff; text-decoration: underline; }
.site-footer ul a .cat-pill-icon { width: 18px; height: 18px; font-size: 11px; background: rgba(255,255,255,0.1); flex-shrink: 0; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- Páginas simples (Quiénes somos / Contacto) ---------- */
.breadcrumb {
  margin-top: 22px;
  font-size: 13px;
  color: var(--text-faint);
}
.breadcrumb a { color: var(--text-faint); }
.breadcrumb a:hover { color: var(--navy); }
.breadcrumb span { margin: 0 4px; }
.page-hero {
  padding: 40px 0 8px;
}
.page-hero h1 {
  font-size: 28px;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
}
.content-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin: 24px 0 60px;
  max-width: 760px;
}
.content-card h2 { font-size: 17px; color: var(--navy); margin: 26px 0 8px; }
.content-card h2:first-child { margin-top: 0; }
.content-card p { font-size: 15px; line-height: 1.65; color: var(--text); margin: 0 0 4px; }

/* Guía de compra plegable dentro de una página de categoría (17 ago 2026) — mismo patrón
   nativo <details>/<summary> que el FAQ, sin JS. Plegada por defecto para no tapar el
   catálogo; el contenido sigue en el HTML (Google lo indexa igual esté abierta o no). */
.guide-toggle summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
}
.guide-toggle summary::-webkit-details-marker { display: none; }
.guide-toggle summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 400;
  color: var(--text-faint);
  transition: transform 0.15s ease;
}
.guide-toggle[open] summary::after { transform: rotate(45deg); }
.guide-toggle .guide-body { margin-top: 18px; }

.form-field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 13px; font-weight: 700; color: var(--navy); }
.form-field input,
.form-field textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  resize: vertical;
}
.form-field input:focus,
.form-field textarea:focus { border-color: var(--blue); }
.form-submit {
  border: none;
  background: var(--navy);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
}
.form-submit:hover { background: var(--navy-light); }
.form-submit:disabled { opacity: 0.6; cursor: default; }
.form-note {
  font-size: 13px;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 4px;
}
.form-note.ok { background: #e5f6ea; color: #1e6b32; }
.form-note.err { background: #fdeceb; color: #a3241d; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .utility-bar { display: none; }
  .site-header .wrap { flex-wrap: wrap; }
  .main-nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--border);
  }
  .main-nav.open { display: flex; }
  .main-nav a { width: 100%; padding: 9px 0; }
  /* El icono de perfil debe quedar pegado al menú hamburguesa, no separado por todo el ancho
     de la cabecera (25 ago 2026, pedido explícito: "el icono del perfil debe de estar al lado
     de ese menu") -- el margin-left:auto que empuja el grupo hacia la derecha va en account-btn
     (el primero del grupo), no en nav-toggle, y el hueco entre los dos se recorta a 8px en vez
     de heredar el gap de 24px de .wrap (pensado para separar bloques, no un icono de su botón). */
  .account-btn { margin-left: auto; }
  .nav-toggle { display: flex; margin-left: 8px; }
  .search-form { max-width: none; order: 2; flex-basis: 100%; margin-left: 0; margin-top: 10px; }
  .how-grid { grid-template-columns: 1fr; gap: 22px; }
  .footer-top { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .offer-grid, .skeleton-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}

/* Banner de instalación (14 ago 2026) — solo móvil, oculto en escritorio */
/* Agrandado a petición del usuario (19 ago) — el original (icono 42px, texto 12.5-14px)
   pasaba desapercibido al entrar desde el móvil, sobre todo las instrucciones de iOS
   (sin botón de CTA propio, solo texto). */
.install-banner {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(30, 55, 82, .35), 0 2px 8px rgba(0, 0, 0, .12);
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition: opacity .28s ease, transform .28s ease;
}
.install-banner.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.install-banner-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}
.install-banner-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
  line-height: 1.4;
}
.install-banner-text strong {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.install-banner-text span {
  color: rgba(255, 255, 255, .88);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.install-banner-cta {
  flex-shrink: 0;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: 11px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.install-banner-cta:hover,
.install-banner-cta:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}
.install-banner-close {
  flex-shrink: 0;
  background: rgba(255, 255, 255, .12);
  border: none;
  color: rgba(255, 255, 255, .85);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.install-banner-close:hover { background: rgba(255, 255, 255, .22); }
@media (min-width: 700px) {
  .install-banner { display: none; }
}