/* =====================================================================
   DR SITE THEME — web pública con el mismo estilo que los paneles
   Colores sólidos con el morado de marca #8A0BD2: sin sombras,
   resplandores, desenfoques ni degradados. Modo oscuro por defecto y
   modo claro con html[data-theme="light"]. Se activa con body.site-flat.
   ===================================================================== */

body.site-flat {
  --st-page: #300b4d;
  --st-card: #3c0f60;
  --st-card-2: #4a1675;
  --st-hover: #581c89;
  --st-line: #62259a;
  --st-input: #300b4d;
  --st-text: #ffffff;
  --st-muted: #dcbdf2;
  --st-accent: #b44bf0;
  --st-brand: #8a0bd2;
  --st-yellow: #ffd60a;
  --st-r: 14px;
}

html[data-theme="light"] body.site-flat {
  --st-page: #f5ecfb;
  --st-card: #ffffff;
  --st-card-2: #fbf5fe;
  --st-hover: #f1e0fb;
  --st-line: #e8d3f6;
  --st-input: #ffffff;
  --st-text: #2e0a4a;
  --st-muted: #74508f;
  --st-yellow: #a16207;
}

body.site-flat {
  /* variables que usa index.css */
  --bg: var(--st-page);
  --surface: var(--st-card);
  --surface-2: var(--st-card-2);
  --surface-3: var(--st-card-2);
  --glass: var(--st-card);
  --border: var(--st-line);
  --border-h: var(--st-accent);
  --text: var(--st-text);
  --text-soft: var(--st-text);
  --muted: var(--st-muted);
  --bg-main: none;

  background: var(--st-page) !important;
  background-image: none !important;
  color: var(--st-text);
}

/* Fuera efectos pesados */
body.site-flat *,
body.site-flat *::before,
body.site-flat *::after {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.site-flat .hero-particles,
body.site-flat .hero-glow,
body.site-flat .hero::before,
body.site-flat .hero::after { display: none !important; }

/* ---------- Barra superior ---------- */
body.site-flat .info-bar { background: var(--st-brand) !important; border: none !important; }
body.site-flat .info-bar-text { color: #fff !important; }
body.site-flat .info-bar-text strong { color: var(--st-yellow) !important; -webkit-text-fill-color: currentColor !important; }
html[data-theme="light"] body.site-flat .info-bar-text strong { color: #ffe873 !important; }

/* ---------- Navbar ---------- */
body.site-flat .nav {
  background: var(--st-card) !important;
  border-bottom: 1px solid var(--st-line) !important;
}

body.site-flat .nav-brand span { color: var(--st-text) !important; }
html[data-theme="light"] body.site-flat .nav-brand img { content: url("/img/LOGO DR SOLO MORADO.png"); }
body.site-flat .nav-links > a,
body.site-flat .dr-nav-more > summary { color: var(--st-muted) !important; background: transparent !important; border-radius: 9px; }
body.site-flat .nav-links > a:hover,
body.site-flat .dr-nav-more > summary:hover { color: var(--st-text) !important; background: var(--st-hover) !important; }
body.site-flat .nav-links > a.is-active { color: var(--st-text) !important; background: var(--st-hover) !important; }
body.site-flat .nav-links > a.is-active::after { background: var(--st-brand) !important; }
body.site-flat .nav-link-highlight { background: var(--st-brand) !important; color: #fff !important; border: none !important; }
body.site-flat .nav-link-badge { background: #fff !important; color: var(--st-brand) !important; }
body.site-flat .dr-nav-menu { background: var(--st-card) !important; border: 1px solid var(--st-line) !important; }
body.site-flat .dr-nav-menu a { color: var(--st-text) !important; }
body.site-flat .dr-nav-menu a:hover { background: var(--st-hover) !important; }

body.site-flat .nav-actions { display: flex; align-items: center; gap: 8px; }

body.site-flat .nav-action-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px !important;
  background: var(--st-card-2) !important;
  border: 1px solid var(--st-line) !important;
  color: var(--st-text) !important;
}

body.site-flat .nav-action-btn iconify-icon { color: var(--st-text) !important; }
body.site-flat .nav-action-btn:hover { background: var(--st-hover) !important; }
body.site-flat .nav-badge { background: #e052c9 !important; color: #fff !important; border: none !important; }

/* Botón de tema */
body.site-flat .site-theme-btn { display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; }
.st-moon { display: none; }
html[data-theme="light"] .st-sun { display: none; }
html[data-theme="light"] .st-moon { display: inline-block; }

/* Selector de moneda */
.cur-select { position: relative; }

.cur-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--st-card-2);
  border: 1px solid var(--st-line);
  color: var(--st-text);
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.cur-trigger:hover { background: var(--st-hover); }
.cur-trigger img, .cur-menu img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; }
.cur-trigger i { font-size: .7rem; color: var(--st-muted); }

.cur-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1200;
  width: 260px;
  max-height: 340px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--st-card);
  border: 1px solid var(--st-line);
  border-radius: 12px;
}

.cur-menu li {
  display: grid;
  grid-template-columns: 20px 44px 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--st-text);
  font-size: .86rem;
  cursor: pointer;
  outline: none;
}

.cur-menu li span { color: var(--st-muted); text-align: right; }
.cur-menu li:hover, .cur-menu li:focus { background: var(--st-hover); }
.cur-menu li[aria-selected="true"] { background: var(--st-brand); color: #fff; }
.cur-menu li[aria-selected="true"] span { color: #fff; }

/* Chip de usuario (foto + nombre) */
body.site-flat #loginButton {
  height: 38px;
  border-radius: 10px !important;
  background: var(--st-brand) !important;
  border: none !important;
  color: #fff !important;
}

body.site-flat #loginButton.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 4px !important;
  max-width: 200px;
  background: var(--st-card-2) !important;
  border: 1px solid var(--st-line) !important;
  color: var(--st-text) !important;
  font-weight: 700;
}

body.site-flat #loginButton.user-chip:hover { background: var(--st-hover) !important; }

.user-chip-av {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--st-accent);
  color: #fff;
  font-size: .85rem;
}

.user-chip-av img { width: 100%; height: 100%; object-fit: cover; }
.user-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Menú de cuenta (Mi cuenta / Panel de administración si es admin) */
.user-menu { position: relative; }

.user-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1200;
  width: 260px;
  margin: 0;
  padding: 6px;
  background: var(--st-card);
  border: 1px solid var(--st-line);
  border-radius: 12px;
}

.user-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--st-line);
  margin-bottom: 6px;
}

.user-menu-head .user-chip-av { width: 38px; height: 38px; font-size: 1rem; flex-shrink: 0; }

.user-menu-id { min-width: 0; display: flex; flex-direction: column; }
.user-menu-id strong { color: var(--st-text); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-id span { color: var(--st-muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--st-text);
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.user-menu-item iconify-icon { font-size: 1.05rem; color: var(--st-muted); }
.user-menu-item:hover { background: var(--st-hover); }
.user-menu-item.user-menu-danger { color: #ff6b6b; }
.user-menu-item.user-menu-danger iconify-icon { color: #ff6b6b; }

/* ---------- Buscador ---------- */
body.site-flat .top-search { background: var(--st-page) !important; }
body.site-flat .top-search-inner { background: var(--st-card) !important; border: 1px solid var(--st-line) !important; }
body.site-flat .top-search-inner input { color: var(--st-text) !important; background: transparent !important; }
body.site-flat .top-search-inner input::placeholder { color: var(--st-muted) !important; }
body.site-flat .top-search-icon { color: var(--st-muted) !important; }
body.site-flat .top-search-btn { background: var(--st-brand) !important; color: #fff !important; border: none !important; }

/* ---------- Hero ---------- */
body.site-flat .hero { background: transparent !important; }
body.site-flat .hero-eyebrow { background: var(--st-card) !important; border: 1px solid var(--st-line) !important; color: var(--st-text) !important; }
body.site-flat .hero-eyebrow span { color: var(--st-yellow) !important; -webkit-text-fill-color: currentColor !important; }
body.site-flat .hero-title { color: var(--st-text) !important; }
body.site-flat .hero-title span { background: none !important; color: var(--st-accent) !important; -webkit-text-fill-color: currentColor !important; }
body.site-flat .hero-subtitle, body.site-flat .hero-checks { color: var(--st-muted) !important; }
body.site-flat .hero-checks i, body.site-flat .hero-checks svg { color: #16a34a !important; }

/* Botones */
body.site-flat .btn-primary { background: var(--st-brand) !important; color: #fff !important; border: 1px solid var(--st-brand) !important; }
body.site-flat .btn-primary:hover { background: var(--st-accent) !important; border-color: var(--st-accent) !important; }
body.site-flat .btn-outline { background: transparent !important; border: 1px solid var(--st-line) !important; color: var(--st-text) !important; }
body.site-flat .btn-outline:hover { background: var(--st-hover) !important; }
body.site-flat .btn-reload { background: var(--st-card-2) !important; border: 1px solid var(--st-line) !important; color: var(--st-text) !important; }

/* ---------- Catálogo ---------- */
body.site-flat .catalog-header {
  background: var(--st-card) !important;
  border: 1px solid var(--st-line) !important;
  border-radius: var(--st-r) !important;
}

body.site-flat .catalog-heading-icon { background: var(--st-brand) !important; color: #fff !important; }
body.site-flat .catalog-title { color: var(--st-text) !important; }
body.site-flat .catalog-title span { background: none !important; color: var(--st-accent) !important; -webkit-text-fill-color: currentColor !important; }
body.site-flat .sort-container label { color: var(--st-muted) !important; }
body.site-flat .dr-select-trigger { background: var(--st-card-2) !important; border: 1px solid var(--st-line) !important; color: var(--st-text) !important; }
body.site-flat .dr-select-menu { background: var(--st-card) !important; border: 1px solid var(--st-line) !important; }
body.site-flat .dr-select-menu li { color: var(--st-text) !important; }
body.site-flat .dr-select-menu li:hover, body.site-flat .dr-select-menu li.is-selected { background: var(--st-hover) !important; }

body.site-flat .filter-pill {
  background: var(--st-card) !important;
  border: 1px solid var(--st-line) !important;
  color: var(--st-text) !important;
}

body.site-flat .filter-pill:hover { background: var(--st-hover) !important; }
body.site-flat .filter-pill.active { background: var(--st-brand) !important; border-color: var(--st-brand) !important; color: #fff !important; }
body.site-flat .cat-count { background: var(--st-card-2) !important; color: var(--st-muted) !important; }
body.site-flat .filter-pill.active .cat-count { background: rgba(255, 255, 255, 0.25) !important; color: #fff !important; }

body.site-flat .catalog-card {
  background: var(--st-card) !important;
  border: 1px solid var(--st-line) !important;
  border-radius: 12px !important;
}

body.site-flat .catalog-card:hover { border-color: var(--st-accent) !important; transform: none !important; }
body.site-flat .catalog-card .card-image { background: var(--st-card-2) !important; }
body.site-flat .card-price-premium { background: var(--st-brand) !important; color: #fff !important; border: none !important; }
body.site-flat .card-download-free { background: #15803d !important; color: #fff !important; border: none !important; }
body.site-flat .card-download-premium { background: #f97316 !important; color: #fff !important; border: none !important; }
body.site-flat .card-download-gift { background: var(--st-brand) !important; color: #fff !important; border: none !important; }

body.site-flat .page-pill { background: var(--st-card) !important; border: 1px solid var(--st-line) !important; color: var(--st-text) !important; }
body.site-flat .page-pill.is-active { background: var(--st-brand) !important; border-color: var(--st-brand) !important; color: #fff !important; }

/* ---------- Equipo y comunidad ---------- */
body.site-flat .team-header, body.site-flat .comunidad-header { color: var(--st-text) !important; }
body.site-flat .team-header span, body.site-flat .comunidad-header span { background: none !important; color: var(--st-accent) !important; -webkit-text-fill-color: currentColor !important; }
body.site-flat .team-subtitle, body.site-flat .comunidad-subtitle { color: var(--st-muted) !important; }

body.site-flat .team-card,
body.site-flat .comunidad-card {
  background: var(--st-card) !important;
  border: 1px solid var(--st-line) !important;
  border-radius: var(--st-r) !important;
  transform: none !important;
}

body.site-flat .team-card:hover,
body.site-flat .comunidad-card:hover { border-color: var(--st-accent) !important; }
body.site-flat .team-name, body.site-flat .comunidad-nombre { color: var(--st-text) !important; }
body.site-flat .team-role-tag { background: var(--st-brand) !important; color: #fff !important; border: none !important; }
body.site-flat .comunidad-desc { color: var(--st-muted) !important; }
body.site-flat .comunidad-btn { background: #1faa53 !important; color: #fff !important; border: none !important; }

/* ---------- Footer ---------- */
body.site-flat .footer { background: var(--st-card) !important; border-top: 1px solid var(--st-line) !important; color: var(--st-muted) !important; }
body.site-flat .footer a { color: var(--st-text) !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .user-chip-name { display: none; }
  body.site-flat #loginButton.user-chip { padding: 0 4px !important; }
}

@media (max-width: 768px) {
  body.site-flat .nav-links { background: var(--st-card) !important; border: 1px solid var(--st-line) !important; }
  .cur-trigger span { display: none; }
  .cur-menu { right: auto; left: 0; }
  .user-menu-panel { right: auto; left: 0; }
}

/* =====================================================================
   LAYOUT TIPO MAGNIFIC (body.site-layout)
   Menú lateral fijo + barra superior + contenido; catálogo en mosaico.
   ===================================================================== */
.site-side { display: none; }

@media (min-width: 1025px) {
  body.site-layout { --side-w: 236px; padding-left: calc(var(--side-w) + 20px); padding-right: 10px; }

  .site-side {
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    z-index: 900;
    width: var(--side-w);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 12px;
    background: var(--st-card);
    border: 1px solid var(--st-line);
    border-radius: var(--st-r);
    overflow-y: auto;
  }

  /* El navbar pasa a ser la barra superior: sin logo ni enlaces (están en el menú) */
  body.site-layout .nav-brand,
  body.site-layout .nav-links > a,
  body.site-layout .dr-nav-more,
  body.site-layout .nav-toggle { display: none !important; }

  body.site-layout .nav {
    position: sticky;
    top: 10px;
    z-index: 800;
    margin-top: 10px;
    border: 1px solid var(--st-line) !important;
    border-radius: var(--st-r);
  }

  body.site-layout .nav-inner { max-width: none; display: flex; align-items: center; gap: 16px; padding: 10px 16px; }
  body.site-layout .nav-inner .top-search { flex: 1; position: static !important; padding: 0 !important; background: none !important; max-width: 620px; }
  body.site-layout .nav-inner .top-search-inner { max-width: none; margin: 0; height: 42px; border-radius: 10px !important; }
  body.site-layout .nav-links { margin-left: auto; display: flex !important; align-items: center; gap: 8px; position: static !important; background: none !important; border: none !important; padding: 0 !important; }

  body.site-layout .info-bar { border-radius: var(--st-r); margin-top: 10px; overflow: hidden; }
  body.site-layout .footer { border: 1px solid var(--st-line) !important; border-radius: var(--st-r); margin: 10px 0; }
}

/* Menú lateral */
.site-side-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 14px; color: var(--st-text); font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.site-side-brand img { width: 30px; height: auto; object-fit: contain; flex-shrink: 0; }
body.site-flat .nav-brand img { object-fit: contain; flex-shrink: 0; }
body.site-flat .nav-brand picture { flex-shrink: 0; }
.ss-logo-light { display: none; }
html[data-theme="light"] .ss-logo-dark { display: none; }
html[data-theme="light"] .ss-logo-light { display: block; }

.site-side-create { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin-bottom: 8px; border-radius: 10px; color: var(--st-text); font-weight: 600; font-size: .9rem; text-decoration: none; }
.site-side-create span { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--st-brand); color: #fff; }
.site-side-create:hover { background: var(--st-hover); }

.site-side-nav { display: flex; flex-direction: column; gap: 2px; }

.site-side-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--st-text);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-side-nav a iconify-icon { font-size: 1.1rem; color: var(--st-muted); }
.site-side-nav a:hover { background: var(--st-hover); }
.site-side-nav a.is-active { background: var(--st-hover); font-weight: 700; }
.site-side-nav a.is-active iconify-icon { color: var(--st-accent); }
.ss-new { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: #e052c9; color: #fff; font-size: .65rem; font-weight: 700; }
.site-side-sep { height: 1px; margin: 10px 4px; background: var(--st-line); }

/* .site-side-nav y sus enlaces fijan "display" a propósito (flex), lo que
   anula la regla del navegador para [hidden]: sin esto, el bloque de
   Mi cuenta / Panel de administración se vería aunque JS le ponga hidden. */
.site-side-nav[hidden],
.site-side-nav a[hidden] { display: none !important; }

.site-side-foot { margin-top: auto; display: flex; gap: 6px; padding-top: 12px; border-top: 1px solid var(--st-line); }
.site-side-foot a { width: 36px; height: 36px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: var(--st-muted); font-size: 1.15rem; }
.site-side-foot a:hover { background: var(--st-hover); color: var(--st-text); }

/* ---------- Catálogo en mosaico (imágenes grandes, sin marco) ---------- */
body.site-layout .catalogo-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 16px !important; }

body.site-layout .catalog-card {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  overflow: hidden;
}

body.site-layout .catalog-card .card-image,
body.site-layout .catalog-card .design-card-img-wrapper { border-radius: 12px !important; overflow: hidden; background: var(--st-card-2) !important; }
body.site-layout .catalog-card .card-image img { transition: transform .35s ease; }
body.site-layout .catalog-card:hover .card-image img { transform: scale(1.03); }

/* Acciones debajo de la imagen para no tapar el diseño. */
body.site-layout .catalog-card .card-price-container {
  position: relative;
  z-index: 3;
  margin: 0 !important;
  padding: 8px 0 0 !important;
  background: none !important;
}

body.site-layout .catalog-card .card-price-large {
  width: 100%;
  min-height: 44px;
  border-radius: 9px !important;
  font-size: .85rem !important;
}

body.site-flat .card-price-large {
  box-sizing: border-box;
  font-family: inherit;
  text-decoration: none;
  transform: none !important;
  transition: background-color .15s ease;
}

body.site-flat .card-price-large::before,
body.site-flat .card-price-large::after { display: none !important; }
body.site-flat .card-price-large:hover,
body.site-flat .card-price-large:active,
body.site-flat .card-download-btn:hover i { transform: none !important; }
body.site-flat .card-price-large:focus-visible { outline: 2px solid var(--st-text); outline-offset: -4px; }
body.site-flat .card-download-free:hover { background: #166534 !important; }
body.site-flat .card-download-premium:hover { background: #92400e !important; }
body.site-flat .card-download-gift:hover,
body.site-flat .card-price-premium:hover { background: #7309b0 !important; }
body.site-flat .card-download-btn:disabled { opacity: .7; cursor: wait; }

/* Acciones (favorito, compartir, comparar) y descargas: aparecen al pasar el mouse */
body.site-layout .catalog-card .card-actions-top,
body.site-layout .catalog-card .card-downloads-badge { opacity: 0; transition: opacity .2s; }
body.site-layout .catalog-card:hover .card-actions-top,
body.site-layout .catalog-card:hover .card-downloads-badge,
body.site-layout .catalog-card:focus-within .card-actions-top { opacity: 1; }
body.site-layout .btn-card-action { background: var(--st-card) !important; color: var(--st-text) !important; border: 1px solid var(--st-line) !important; }
body.site-layout .card-downloads-badge { background: var(--st-card) !important; color: var(--st-text) !important; border: none !important; }

@media (hover: none) {
  body.site-layout .catalog-card .card-actions-top,
  body.site-layout .catalog-card .card-downloads-badge { opacity: 1; }
}

/* Indicador "N en línea" en la barra superior */
.online-pill { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; color: var(--st-muted); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.online-pill[hidden] { display: none; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }


/* Una sola capa de tarjetas (sin cajas dentro de cajas) */
@media (min-width: 1025px) {
  /* Barra superior sin caja; solo el buscador es un campo */
  body.site-layout .nav {
    background: var(--st-page) !important;
    border: none !important;
    border-bottom: 1px solid var(--st-line) !important;
    border-radius: 0 !important;
    margin-top: 0;
    top: 0;
  }
  body.site-layout .nav-inner { padding: 14px 8px; }
  /* La cinta de avisos no aporta en este diseño */

}

body.site-flat .top-search-inner { background: var(--st-card-2) !important; }

/* Encabezado del catálogo plano (título + orden), sin recuadro */
body.site-flat .catalog-header {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}



/* Secciones sin recuadro exterior: solo sus tarjetas internas */
body.site-flat .comunidad,
body.site-flat .comunidad-inner,
body.site-flat .comunidad-top,
body.site-flat .content-center,
body.site-flat .layout {
  background: transparent !important;
  border: none !important;
}

/* Buscador: el botón queda dentro del campo con margen, sin tocar el borde */
body.site-flat .top-search-inner {
  width: 100% !important;
  height: 46px !important;
  padding: 4px 4px 4px 14px !important;
  border-radius: 12px !important;
  border: 1px solid var(--st-line) !important;
  box-sizing: border-box;
}

body.site-flat .top-search-inner input { flex: 1; min-width: 0; height: 100%; border: none !important; outline: none; }

body.site-flat .top-search-btn {
  height: 36px !important;
  padding: 0 18px !important;
  border-radius: 9px !important;
  line-height: 36px;
}

/* Precio y acción en el flujo normal, nunca superpuestos a la imagen. */
body.site-flat .catalog-card { height: auto !important; }
body.site-flat .catalog-card .card-image-link { flex-shrink: 0; }
body.site-flat .catalog-card-footer {
  position: static !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0 2px;
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
}
body.site-flat .catalog-card-price { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; }
body.site-flat .catalog-card-price span { color: var(--st-muted); font-size: .72rem; }
body.site-flat .catalog-card-price strong { color: var(--st-text); font-size: .95rem; font-weight: 600; white-space: nowrap; }
body.site-flat .catalog-card-cta { position: static !important; width: 100%; }
body.site-flat .catalog-card-cta .card-price-large {
  position: static !important;
  inset: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  box-sizing: border-box;
  transform: none !important;
}

/* Galería de recursos: navegación discreta y protagonismo de las imágenes. */

body.site-layout .browse-intro,
body.site-layout .layout { width: auto; max-width: none; margin: 24px 24px 32px; }
.browse-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0 8px; }
.browse-eyebrow { margin: 0 0 8px; color: var(--st-muted); font-size: .67rem; font-weight: 600; letter-spacing: .12em; }
.browse-intro h1 { margin: 0; font-family: inherit; font-size: clamp(1.4rem, 2.1vw, 2rem); line-height: 1.3; font-weight: 600; letter-spacing: -.035em; }
.browse-description { margin: 10px 0 0; color: var(--st-muted); font-size: .86rem; }
.browse-membership { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 12px 16px; border-radius: 10px; color: var(--st-text); background: var(--st-card-2); font-size: .8rem; font-weight: 600; text-decoration: none; }
.browse-membership:hover { background: var(--st-hover); }
.browse-membership:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 3px; }
body.site-layout .catalog-header { margin-bottom: 16px; padding: 0 !important; }
body.site-layout .catalog-title { font-family: inherit; font-style: normal; font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; }
body.site-layout .catalog-title span { color: var(--st-text) !important; }
body.site-layout .catalog-actions { gap: 12px; }
body.site-layout .btn-reload { min-height: 36px; font-size: .73rem; }
body.site-layout .filter-bar { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 24px; }
body.site-layout .filter-type { border: 0; padding: 0; margin: 0; gap: 8px; }
body.site-layout .filter-cats { flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--st-line) transparent; }
body.site-layout .filter-pill { min-height: 38px; flex-shrink: 0; padding: 8px 16px; font-size: .76rem; font-weight: 500; border-color: transparent !important; background: var(--st-card-2) !important; }
body.site-layout .filter-pill:hover { background: var(--st-hover) !important; }
body.site-layout .catalogo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 24px !important; }
body.site-layout .catalog-card .card-image::after { display: none !important; }
body.site-layout .catalog-card:hover .card-image img { transform: none !important; }
body.site-layout .catalog-card .card-price-container { inset: auto !important; position: relative !important; padding: 10px 0 0 !important; }
body.site-layout .catalog-card .card-price-large { min-height: 44px; height: auto; border-radius: 10px !important; font-size: .8rem !important; }
body.site-layout .card-downloads-badge { bottom: 10px; }


@media (min-width: 1025px) {
  body.site-layout { --side-w: 224px; padding-left: 244px; padding-right: 8px; }
  body.site-layout .site-side { border: none; padding: 20px 14px; border-radius: 16px; }
  body.site-layout .site-side-brand { font-size: 1.05rem; padding-bottom: 20px; }
  body.site-layout .site-side-nav a { padding: 9px 10px; font-size: .8rem; font-weight: 500; }
  body.site-layout .site-side-create { font-size: .8rem; }
  body.site-layout .nav { border-bottom: 0 !important; }
  body.site-layout .nav-inner { min-height: 76px; padding: 12px 24px; gap: 16px; }
  body.site-layout .nav-inner .top-search { max-width: 800px; min-width: 180px; margin-left: auto; margin-right: auto; }
  body.site-layout .top-search-inner { border: none !important; border-radius: 999px !important; }
  body.site-layout .top-search-btn { border-radius: 999px !important; }

  body.site-layout .nav-links { margin-left: 0; }


}
@media (min-width: 769px) and (max-width: 1350px) {
  body.site-layout .catalogo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; }
}
@media (max-width: 1024px) {
  body.site-layout .nav-inner { flex-wrap: wrap; }
  body.site-layout .nav-inner .top-search { position: static !important; order: 3; width: 100%; flex-basis: 100%; padding: 8px 0 0 !important; }
  body.site-layout .browse-intro { margin-top: 12px; }
  .browse-intro { flex-wrap: wrap; gap: 16px; }
}
@media (max-width: 768px) {
  body.site-layout .browse-intro,
  body.site-layout .layout { margin: 16px; }
  body.site-layout .catalogo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 12px !important; }
  body.site-layout .catalog-header { align-items: flex-start; gap: 12px; }
  body.site-layout .catalog-actions { flex-wrap: wrap; }
  body.site-layout .filter-pill { min-height: 40px; padding: 8px 12px; }
  body.site-layout .browse-membership { padding: 10px 12px; }
  body.site-layout .catalog-card .card-price-large { font-size: .72rem !important; padding: 8px 4px; }
}

/* Public site aligned with the dashboard panels. */
body.site-layout .site-side { border: 1px solid var(--st-line); border-radius: var(--st-r); }
body.site-layout .site-side-nav a { min-height: 44px; font-weight: 600; }
body.site-layout .site-side-nav a.is-active { background: var(--st-brand); color: #fff; }
body.site-layout .site-side-nav a.is-active iconify-icon { color: #fff; }
body.site-layout .nav { background: var(--st-card) !important; border: 1px solid var(--st-line) !important; border-radius: var(--st-r); margin-top: 10px; }
body.site-layout .top-search-inner { border: 1px solid var(--st-line) !important; border-radius: 10px !important; }
body.site-layout .top-search-btn { border-radius: 8px !important; }
body.site-layout .hero { min-height: 0 !important; padding: 0 !important; margin: 20px 24px !important; }
body.site-layout .hero-inner { display: block !important; min-height: 0 !important; width: 100%; max-width: none; padding: 24px !important; background: var(--st-card); border: 1px solid var(--st-line); border-radius: var(--st-r); }
body.site-layout .hero-content { width: 100%; max-width: none; text-align: left; }
body.site-layout .hero-title { font-family: inherit; font-style: normal; font-size: clamp(1.5rem, 2.3vw, 2.3rem); line-height: 1.3; margin: 14px 0; }
body.site-layout .hero-title br { display: none; }
body.site-layout .hero-subtitle { max-width: none; font-size: .9rem; margin-bottom: 18px; }
body.site-layout .hero-actions { justify-content: flex-start; }
body.site-layout .hero-checks { justify-content: flex-start; margin-top: 18px; }
body.site-layout .hero-showcase-hidden-stats { display: none; }
body.site-layout .filter-pill { border: 1px solid var(--st-line) !important; border-radius: 9px; }
body.site-layout .online-pill { display: inline-flex; }
@media (max-width: 768px) {
  body.site-layout .hero { margin: 16px !important; }
  body.site-layout .hero-inner { padding: 18px !important; }
  body.site-layout .online-pill { font-size: .72rem; margin-left: auto; }
}

/* Accessible drag control for catalog density. */
body.site-flat .catalog-density { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 40px; max-width: 100%; padding: 6px 12px; box-sizing: border-box; background: var(--st-card); border: 1px solid var(--st-line); border-radius: 9px; color: var(--st-muted); font-size: .75rem; }
body.site-flat .catalog-density input { width: 110px; max-width: 100%; height: 28px; margin: 0; cursor: pointer; accent-color: var(--st-accent); }
body.site-flat .catalog-density input:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 3px; }
body.site-flat .catalog-density output { min-width: 22px; text-align: center; color: var(--st-text); font-weight: 700; }
body.site-flat .catalog-actions { flex-wrap: wrap; }

/* Sin resplandores: también los que usan filter: drop-shadow (texto "premium", iconos) */
body.site-flat *:not(img):not(video):not(picture),
body.site-flat *::before,
body.site-flat *::after { filter: none !important; }
body.site-flat .hero-title span { background: none !important; }

/* Buscador: el texto va directo sobre el campo (sin caja oscura adentro) y el botón con aire */
body.site-flat .top-search-inner input#catalogSearchInput,
body.dr-unified .top-search-inner input#catalogSearchInput {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 8px !important;
  border-radius: 0 !important;
}

body.site-flat .top-search-inner .top-search-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px !important;
  min-width: 96px;
  padding: 0 22px !important;
  margin-left: 6px;
  line-height: 1 !important;
  letter-spacing: .02em;
  font-size: .9rem !important;
}

/* Barra superior compartida (site-shell.js) */
#siteTopbar .top-search { margin: 0; }
#siteSearchInput::-webkit-search-cancel-button { display: none; }
body.site-flat #siteSearchInput { background: transparent !important; border: none !important; padding: 0 8px !important; color: var(--st-text) !important; }

@media (max-width: 1024px) {
  #siteTopbar .nav-inner { flex-wrap: wrap; row-gap: 10px; }
  #siteTopbar .top-search { order: 10; flex: 1 1 100%; position: static !important; padding: 0 !important; background: none !important; }
  #siteTopbar .top-search-inner { max-width: none; margin: 0; }
}

/* Barra superior: misma tarjeta redondeada y mismos márgenes que el contenido */
@media (min-width: 1025px) {
  body.site-layout > header.nav,
  body.site-layout #siteTopbar {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    margin: 10px 24px 0 !important;
    top: 10px !important;
    background: var(--st-card) !important;
    border: 1px solid var(--st-line) !important;
    border-radius: var(--st-r) !important;
    overflow: visible;
  }

  body.site-layout > header.nav .nav-inner { padding: 10px 14px !important; }
  body.site-layout > .info-bar { margin: 10px 24px 0 !important; border-radius: var(--st-r) !important; }
}

/* =====================================================================
   MEMBRESÍA: tarjetas de planes separadas y limpias
   ===================================================================== */
body.site-flat .membresia-hero { padding: 36px 16px 8px !important; background: none !important; }
body.site-flat .membresia-hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem) !important; line-height: 1.15 !important; color: var(--st-text) !important; margin: 10px 0 !important; }
body.site-flat .membresia-hero h1 span { background: none !important; color: var(--st-accent) !important; -webkit-text-fill-color: currentColor !important; }
body.site-flat .membresia-hero p { color: var(--st-muted) !important; max-width: 560px; margin: 0 auto !important; }
body.site-flat .hero-pill { background: var(--st-card) !important; border: 1px solid var(--st-line) !important; color: var(--st-text) !important; }

body.site-flat .planes-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

body.site-flat .plan-card {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  background: var(--st-card) !important;
  border: 1px solid var(--st-line) !important;
  border-radius: var(--st-r) !important;
  overflow: hidden !important;
  transform: none !important;
}

body.site-flat .plan-card.destacado { border: 2px solid var(--st-brand) !important; }

/* Cabecera: icono + nombre, sin el número gigante que se encimaba */
body.site-flat .plan-band {
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 16px 18px !important;
  background: var(--st-card-2) !important;
  border-bottom: 1px solid var(--st-line) !important;
}

body.site-flat .plan-num { display: none !important; }
body.site-flat .plan-band-name { font-size: .82rem !important; letter-spacing: .06em !important; color: var(--st-text) !important; }
body.site-flat .plan-band-icon { background: var(--st-brand) !important; color: #fff !important; border: none !important; }

body.site-flat .plan-badge {
  position: static !important;
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: var(--st-brand) !important;
  color: #fff !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

body.site-flat .plan-body { display: flex !important; flex-direction: column !important; flex: 1 !important; padding: 20px 18px !important; gap: 12px; }
body.site-flat .plan-price { color: var(--st-text) !important; }
body.site-flat .plan-price-pen { align-self: flex-start; background: var(--st-card-2) !important; border: 1px solid var(--st-line) !important; color: var(--st-text) !important; border-radius: 8px !important; padding: 4px 10px !important; }
body.site-flat .plan-features { flex: 1; margin: 4px 0 !important; }
body.site-flat .plan-features li { color: var(--st-text) !important; border-color: var(--st-line) !important; }
body.site-flat .plan-btn { margin: 0 !important; height: 44px; display: flex !important; align-items: center; justify-content: center; border-radius: 10px !important; }
body.site-flat .plan-btn:not(.secondary) { background: var(--st-brand) !important; color: #fff !important; border: none !important; }
body.site-flat .plan-btn.secondary { background: transparent !important; border: 1px solid var(--st-line) !important; color: var(--st-text) !important; }
body.site-flat .planes-label-text { color: var(--st-accent) !important; }
body.site-flat .planes-label-line { background: var(--st-line) !important; }

@media (max-width: 900px) {
  body.site-flat .planes-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Buscador de la barra superior: el campo ocupa todo el espacio y "Buscar" queda a la derecha */
#siteTopbar .top-search { display: flex !important; flex: 1 1 auto !important; min-width: 0; }
#siteTopbar .top-search-inner { display: flex !important; align-items: center !important; width: 100% !important; }
#siteTopbar #siteSearchInput { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }
#siteTopbar .top-search-btn { margin-left: auto !important; flex-shrink: 0; }

/* El contenido empieza debajo de la barra (no se esconde detrás) */
@media (min-width: 1025px) {
  body.site-layout > header.nav { position: relative !important; top: auto !important; margin-bottom: 14px !important; }
}

/* Navegación tipo app entre páginas: el menú lateral y la barra superior no se mueven,
   solo el contenido cambia con un fundido corto. */
@view-transition { navigation: auto; }
.site-side { view-transition-name: dr-side; }
body.site-layout > header.nav { view-transition-name: dr-topbar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
::view-transition-group(dr-side), ::view-transition-group(dr-topbar) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Menú lateral y barra blindados: ningún CSS de página (nav, a, button) los deforma */
.site-side .site-side-nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  gap: 2px !important;
}

.site-side .site-side-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 9px 10px !important;
  text-align: left !important;
  white-space: nowrap !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.site-side .site-side-nav a .ss-new { margin-left: auto !important; }
.site-side .site-side-nav a.is-active { background: var(--st-brand) !important; color: #fff !important; }
.site-side .site-side-nav a.is-active iconify-icon { color: #fff !important; }

#siteTopbar .nav-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  padding: 0 !important;
  line-height: 1 !important;
}

#siteTopbar .nav-actions .nav-badge { position: absolute !important; top: -6px; right: -6px; }
#siteTopbar #loginButton.user-chip { max-width: 220px; }

/* NOX BOT: el hero no fuerza alto de pantalla completa dentro del layout con menú */
body.site-layout .hero { min-height: 0 !important; }

/* Programas: portada grande, a todo el ancho de la tarjeta y completa */
body.site-flat .dr-program-image {
  width: 100% !important;
  height: auto !important;
  max-height: 360px;
  aspect-ratio: auto;
  object-fit: contain !important;
  border-radius: 10px !important;
  background: var(--st-card-2) !important;
  margin-bottom: 12px !important;
}
body.site-flat .dr-program-card { padding: 14px !important; }

/* Usuario prellenado desde la copia guardada: visible desde el primer instante */
[data-login-btn][data-prefilled] { opacity: 1 !important; pointer-events: auto !important; }

/* =====================================================================
   PANTALLAS DE CUENTA (login, registro, recuperar, nueva contraseña...)
   ===================================================================== */
.site-side { box-sizing: border-box !important; }
@media (min-width: 1025px) { body.site-layout .site-side { width: var(--side-w, 236px) !important; } }

body.site-flat .login-page,
body.site-flat .login-main,
body.site-flat .register-main { background: transparent !important; }
body.site-flat .login-main, body.site-flat .register-main { padding: 32px 16px 48px !important; }

body.site-flat .auth-card {
  width: 100%;
  max-width: 460px !important;
  margin: 0 auto !important;
  background: var(--st-card) !important;
  border: 1px solid var(--st-line) !important;
  border-radius: var(--st-r) !important;
  overflow: hidden;
}

body.site-flat .auth-hero {
  background: var(--st-card) !important;
  background-image: none !important;
  padding: 28px 28px 8px !important;
  border: none !important;
  text-align: center;
}

body.site-flat .auth-hero::before,
body.site-flat .auth-hero::after,
body.site-flat .auth-card::before,
body.site-flat .auth-card::after { display: none !important; }

body.site-flat .auth-hero h1,
body.site-flat .auth-hero h2 { color: var(--st-text) !important; font-size: 1.6rem !important; margin: 12px 0 6px !important; }
body.site-flat .auth-hero h1 *,
body.site-flat .auth-hero h2 * { text-decoration: none !important; border: none !important; background: none !important; color: var(--st-accent) !important; -webkit-text-fill-color: currentColor !important; }
body.site-flat .auth-hero p { color: var(--st-muted) !important; font-size: .92rem !important; }
body.site-flat .auth-hero-logo { width: 52px !important; height: auto !important; }
html[data-theme="light"] body.site-flat .auth-hero-logo { content: url("/img/LOGO DR SOLO MORADO.png"); }

body.site-flat .auth-panel {
  background: transparent !important;
  border: none !important;
  padding: 16px 28px 28px !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Campos: un solo recuadro (sin caja oscura dentro) */
body.site-flat .auth-field {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 48px;
  padding: 0 14px !important;
  margin: 0 !important;
  background: var(--st-card-2) !important;
  border: 1px solid var(--st-line) !important;
  border-radius: 10px !important;
}

body.site-flat .auth-field:focus-within { border-color: var(--st-accent) !important; }
body.site-flat .auth-field i,
body.site-flat .auth-field svg,
body.site-flat .auth-field iconify-icon { color: var(--st-muted) !important; flex-shrink: 0; }

body.site-flat .auth-field input,
body.site-flat .auth-field select {
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  color: var(--st-text) !important;
  font-size: .95rem !important;
}

body.site-flat .auth-field input::placeholder { color: var(--st-muted) !important; }
body.site-flat .auth-field input:-webkit-autofill { -webkit-text-fill-color: var(--st-text) !important; -webkit-box-shadow: 0 0 0 40px var(--st-card-2) inset !important; transition: background-color 9999s; }
body.site-flat .toggle-password { background: none !important; border: none !important; color: var(--st-muted) !important; padding: 0 !important; }

/* Botones */
body.site-flat .auth-btn-cta {
  height: 48px;
  width: 100%;
  border: none !important;
  border-radius: 10px !important;
  background: var(--st-brand) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

body.site-flat .auth-btn-cta:hover { background: var(--st-accent) !important; }

body.site-flat .auth-btn-social {
  height: 48px;
  width: 100%;
  border-radius: 10px !important;
  background: var(--st-card-2) !important;
  border: 1px solid var(--st-line) !important;
  color: var(--st-text) !important;
  font-weight: 600 !important;
}

body.site-flat .auth-btn-social:hover { border-color: var(--st-accent) !important; }
body.site-flat .auth-divider { color: var(--st-muted) !important; margin: 4px 0 !important; }
body.site-flat .auth-divider::before,
body.site-flat .auth-divider::after { background: var(--st-line) !important; }
body.site-flat .auth-footer-text { color: var(--st-muted) !important; text-align: center; font-size: .88rem !important; }
body.site-flat .auth-footer-text a { color: var(--st-accent) !important; font-weight: 600; }

/* Checkbox de términos / recordar y mensajes */
body.site-flat .auth-panel label { color: var(--st-muted) !important; }
body.site-flat .auth-panel input[type="checkbox"] { accent-color: var(--st-brand); }

/* Plantilla de dos columnas (recuperar, nueva contraseña, gracias, registro de pago) */
body.site-flat .login-wrapper {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  width: 100%;
  max-width: 940px !important;
  margin: 0 auto !important;
  background: var(--st-card) !important;
  border: 1px solid var(--st-line) !important;
  border-radius: var(--st-r) !important;
  overflow: hidden;
}

body.site-flat .login-wrapper::before,
body.site-flat .login-wrapper::after,
body.site-flat .login-welcome::before,
body.site-flat .login-welcome::after { display: none !important; }

body.site-flat .login-welcome {
  background: var(--st-card-2) !important;
  background-image: none !important;
  border: none !important;
  border-right: 1px solid var(--st-line) !important;
  padding: 32px !important;
  color: var(--st-text) !important;
}

body.site-flat .login-welcome :is(h1, h2, h3) { color: var(--st-text) !important; }
body.site-flat .login-welcome :is(h1, h2, h3) span { background: none !important; color: var(--st-accent) !important; -webkit-text-fill-color: currentColor !important; }
body.site-flat .login-welcome p,
body.site-flat .feature-item { color: var(--st-muted) !important; }
body.site-flat .feature-item i { color: var(--st-accent) !important; }

body.site-flat .login-form-side { background: transparent !important; border: none !important; padding: 32px !important; }
body.site-flat .form-header :is(h1, h2, h3) { color: var(--st-text) !important; }
body.site-flat .form-header p { color: var(--st-muted) !important; }
body.site-flat .header-icon,
body.site-flat .state-icon { background: var(--st-brand) !important; color: #fff !important; border: none !important; }
body.site-flat .state-icon.success { background: #15803d !important; }
body.site-flat .form-group label { color: var(--st-muted) !important; }

body.site-flat .input-container {
  position: relative;
  display: flex !important;
  align-items: center !important;
  height: 48px;
  background: var(--st-card-2) !important;
  border: 1px solid var(--st-line) !important;
  border-radius: 10px !important;
}

body.site-flat .input-container:focus-within { border-color: var(--st-accent) !important; }
body.site-flat .input-container .input-icon { position: static !important; transform: none !important; margin: 0 10px 0 14px; color: var(--st-muted) !important; }
body.site-flat .input-container :is(input, select) {
  flex: 1; min-width: 0; height: 100% !important;
  padding: 0 14px 0 0 !important;
  background: transparent !important; border: none !important; border-radius: 0 !important; outline: none !important;
  color: var(--st-text) !important;
}

body.site-flat .btn-submit {
  height: 48px; width: 100%;
  border: none !important; border-radius: 10px !important;
  background: var(--st-brand) !important; color: #fff !important; font-weight: 700 !important;
}

body.site-flat .btn-submit:hover { background: var(--st-accent) !important; }
body.site-flat .recovery-alert,
body.site-flat .requirements,
body.site-flat .whatsapp-help { background: var(--st-card-2) !important; border: 1px solid var(--st-line) !important; border-radius: 10px !important; color: var(--st-text) !important; }
body.site-flat .form-footer, body.site-flat .page-footer { color: var(--st-muted) !important; }
body.site-flat .form-footer a, body.site-flat .recovery-back { color: var(--st-accent) !important; }
body.site-flat .divider { color: var(--st-muted) !important; }
body.site-flat .divider::before, body.site-flat .divider::after { background: var(--st-line) !important; }

@media (max-width: 860px) {
  body.site-flat .login-wrapper { grid-template-columns: minmax(0, 1fr) !important; }
  body.site-flat .login-welcome { border-right: none !important; border-bottom: 1px solid var(--st-line) !important; }
}

/* Campos: sin caja oscura dentro (supera la regla general de inputs de dr-unified-theme) */
body.site-flat .auth-field input:not(#dr-a):not(#dr-b),
body.site-flat .input-container :is(input, select):not(#dr-a):not(#dr-b) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  height: 100% !important;
}

/* La bienvenida no queda tapada por el formulario */
body.site-flat .auth-hero { overflow: visible !important; height: auto !important; padding-bottom: 16px !important; }
body.site-flat .auth-panel { margin-top: 0 !important; position: relative; top: 0 !important; transform: none !important; }

/* Login/registro: una sola tarjeta. El panel del formulario no tiene caja propia. */
body.site-flat .auth-card .auth-panel:not(#dr-a):not(#dr-b),
body.site-flat .auth-card .auth-hero:not(#dr-a):not(#dr-b) {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

body.site-flat .auth-card .auth-panel:not(#dr-a):not(#dr-b) { border-top: 1px solid var(--st-line) !important; padding-top: 22px !important; }
body.site-flat .auth-card .auth-panel::before,
body.site-flat .auth-card .auth-panel::after { display: none !important; }
body.site-flat .auth-card:not(#dr-a) { background: var(--st-card) !important; background-image: none !important; }

/* Separación entre campos y botón dentro de los formularios de cuenta */
body.site-flat .auth-panel form,
body.site-flat .login-form-side form { display: flex !important; flex-direction: column !important; gap: 12px !important; }
body.site-flat .auth-panel form > *,
body.site-flat .login-form-side form > * { margin-top: 0 !important; margin-bottom: 0 !important; }
body.site-flat .auth-panel form .auth-btn-cta { margin-top: 6px !important; }

/* Campos de la plantilla de dos columnas: texto con margen a ambos lados */
body.site-flat .input-container :is(input, select):not(#dr-a):not(#dr-b) { padding: 0 14px !important; }
body.site-flat .input-container .input-icon:first-child { margin: 0 0 0 14px; }
body.site-flat .input-container .input-icon:first-child ~ :is(input, select):not(#dr-a):not(#dr-b) { padding-left: 10px !important; }
body.site-flat .input-container .input-icon:last-child { order: 2; margin: 0 14px 0 0; }
body.site-flat .form-group { display: flex; flex-direction: column; gap: 6px; }

/* Lista de beneficios (izquierda): todos del mismo ancho y alineados */
body.site-flat .welcome-features { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100%; max-width: 380px; margin: 20px auto 0 !important; }
body.site-flat .feature-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 12px 14px !important;
  background: var(--st-card) !important;
  border: 1px solid var(--st-line) !important;
  border-radius: 10px !important;
  text-align: left !important;
  transform: none !important;
}

/* Enlaces secundarios de la columna derecha: mismo ancho, uno debajo del otro */
body.site-flat .form-footer { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
body.site-flat .form-footer a { display: flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border-radius: 10px !important; }

/* Pie de página: con márgenes como el resto, no de lado a lado */
body.site-flat .page-footer,
body.site-layout > footer {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--st-line) !important;
  margin: 24px 24px 0 !important;
  padding: 18px 0 !important;
  text-align: center;
  color: var(--st-muted) !important;
}

/* Pies de página de todas las páginas: sin caja, solo una línea fina arriba */
body.site-flat :is(footer, .footer, .page-footer, .dr-footer):not(#dr-a):not(#dr-b) {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-top: 1px solid var(--st-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 32px 24px 0 !important;
  padding: 18px 0 !important;
  color: var(--st-muted) !important;
}

/* Sin contorno de foco dentro del campo: el foco lo marca el borde del recuadro */
body.site-flat :is(.auth-field, .input-container, .top-search-inner) :is(input, select, textarea):not(#dr-a):not(#dr-b):is(:focus, :focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}
body.site-flat :is(.auth-field, .input-container, .top-search-inner):focus-within { border-color: var(--st-accent) !important; }
body.site-flat .card-download-premium:hover { background: #fb923c !important; }
body.site-flat .card-download-free:hover { background: #16a34a !important; }

/* Cinta y barra de búsqueda fijas arriba al hacer scroll (escritorio) */
@media (min-width: 1025px) {
  body.site-layout > .info-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 820 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 10px solid var(--st-page) !important;
    background-clip: padding-box !important;
  }
  body.site-layout > header.nav,
  body.site-layout #siteTopbar {
    position: sticky !important;
    top: var(--dr-topbar-top, 10px) !important;
    z-index: 810 !important;
  }
  /* Tapa el hueco entre la cinta y la barra para que el contenido no se vea al pasar por detrás */
  body.site-layout > header.nav::before {
    content: "";
    position: absolute;
    left: -2px; right: -2px; top: -12px;
    height: 11px;
    background: var(--st-page);
  }
}

/* =====================================================================
   HERO: texto a la izquierda + carrusel 3D de diseños a la derecha
   ===================================================================== */
body.site-flat .hero-inner:has(.hero-carousel) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 24px !important;
}

.hero-carousel {
  position: relative;
  height: 380px;
  overflow: hidden;
  perspective: 1800px;
  opacity: 0;
  transition: opacity .6s ease;
  -webkit-mask: linear-gradient(90deg, #0000, #000 12% 88%, #0000);
          mask: linear-gradient(90deg, #0000, #000 12% 88%, #0000);
}

.hero-carousel.is-ready { opacity: 1; }
.hc-ring { position: absolute; inset: 0; transform-style: preserve-3d; }

.hc-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210px;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  transform-style: preserve-3d;
  border: 1px solid var(--st-line);
  background: var(--st-card-2);
  will-change: transform;
}

.hc-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-card:not(.is-hero) { cursor: pointer; }
.hc-card:not(.is-hero) img { filter: brightness(.7) !important; }
.hc-card.is-hero { border-color: var(--st-accent); }

@media (max-width: 1100px) {
  body.site-flat .hero-inner:has(.hero-carousel) { grid-template-columns: minmax(0, 1fr) !important; }
  .hero-carousel { height: 300px; }
  .hc-card { width: 170px; }
}

/* Carrusel: imagen completa, sin recorte (alto según la imagen) */
.hc-card { aspect-ratio: auto !important; height: auto !important; background: transparent !important; }
.hc-card img { height: auto !important; object-fit: contain !important; }

/* Carrusel más grande: ocupa más del hero */
@media (min-width: 1101px) {
  body.site-flat .hero-inner:has(.hero-carousel) { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important; }
  .hero-carousel { height: 420px !important; }
  .hc-card { width: 340px !important; }
}
@media (max-width: 1100px) { .hc-card { width: 240px !important; } .hero-carousel { height: 300px !important; } }

/* Barras fijas: un contorno del color del fondo tapa las esquinas redondeadas
   para que el contenido no asome por ellas al hacer scroll */
@media (min-width: 1025px) {
  body.site-layout > .info-bar:not(#dr-a) {
    top: 10px !important;
    border-top: none !important;
    margin-top: 10px !important;
    box-shadow: 0 0 0 10px var(--st-page) !important;
  }
  body.site-layout > header.nav:not(#dr-a) {
    box-shadow: 0 0 0 10px var(--st-page) !important;
  }
}

/* Campos con candado + ojito: candado a la izquierda, texto al centro, ojito a la derecha */
body.site-flat .input-container .input-icon:not(#dr-a) { order: 0; position: static !important; transform: none !important; margin: 0 0 0 14px !important; }
body.site-flat .input-container :is(input, select):not(#dr-a):not(#dr-b) { order: 1; padding: 0 10px !important; }
body.site-flat .input-container .toggle-password:not(#dr-a) {
  order: 2;
  position: static !important;
  transform: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%;
  margin: 0 4px 0 0 !important;
  flex-shrink: 0;
}