/* ============================================================
   GD GLOBAL THEME — Overrides activos cuando GdTheme aplica tokens
   Se carga desde base.html DESPUÉS de output.css y gd_homepage.css
   Usa las variables --gd-* definidas por gd_theme.js en :root
   
   Principio: NO usar !important salvo cuando sea estrictamente necesario
   para ganar especificidad sobre estilos Tailwind/inline existentes.

   ── REGLA DEL PAR (2026-08-30) ────────────────────────────
   Este fichero se carga DESPUES que todo lo demas, asi que sus !important
   ganan incluso a un <style> escrito dentro de la plantilla. Quien construya
   algo nuevo no ve estas reglas y no entiende por que su estilo no se aplica.

   Por eso, aqui dentro:

     Si una regla pinta un FONDO, tiene que decir tambien de que COLOR va el
     texto encima. Las dos declaraciones van juntas o no va ninguna.

   No es cosmetica. El 2026-08-30 `.gd-cat-badge` ponia
   `background: var(--gd-primary) !important` y nada mas; el texto heredaba
   --gd-primary de otro sitio y salia azul sobre azul: una pastilla maciza,
   sin texto legible, en todas las micropaginas. El fallo no da error, no
   aparece en ningun registro y solo se ve mirando la pagina.

   El color del texto se toma de --gd-on-primary, con #fff de reserva, para
   que un vertical que use un primario claro pueda corregirlo sin tocar esto.

   Excepciones legitimas, y son solo dos clases:
     - barras de progreso (.gd-onb-progress-fill, .gd-analytics-bar): no
       llevan texto dentro.
     - los tintes .gd-style-filled: el fondo es un color-mix claro, y ahi el
       texto debe seguir siendo oscuro.
============================================================ */

/* ── NAVBAR PÚBLICO ─────────────────────────────────────── */
/* Logo icon circle */
.gd-logo-icon {
  background: var(--gd-primary) !important;
  color: var(--gd-on-primary, #fff) !important;
}
/* Logo text color */
.gd-logo-text {
  color: var(--gd-primary) !important;
}
/* Nav links hover y active */
.gd-nav-link:hover,
.gd-nav-link.active,
.gd-nav-explore.active {
  color: var(--gd-primary) !important;
}
/* Nav explore underline */
.gd-nav-explore::after {
  background: var(--gd-primary) !important;
}
/* GD Admin link en menú de usuario */
.gd-user-item i[style*="#121663"] {
  color: var(--gd-primary) !important;
}

/* ── BOTONES PRIMARIOS GLOBALES ──────────────────────────── */
/* Clase usada en homepage, business_detail, onboarding */
.gd-btn-primary,
.gd-cta-btn,
.gd-btn-main,
[class*="gd-btn"][class*="primary"] {
  background: var(--gd-primary) !important;
  border-color: var(--gd-primary) !important;
  color: var(--gd-on-primary, #fff) !important;
}
.gd-btn-primary:hover,
.gd-cta-btn:hover {
  background: var(--gd-primary-dark, #0c0f4a) !important;
}

/* ── LINKS CON COLOR PRIMARIO ────────────────────────────── */
a.gd-primary-link,
.gd-link-primary {
  color: var(--gd-primary) !important;
}

/* ── HOMEPAGE HERO ────────────────────────────────────────── */
/* Botón de búsqueda del hero */
#gd-hero-search-btn,
.gd-hero-cta {
  background: var(--gd-primary) !important;
  color: var(--gd-on-primary, #fff) !important;
}
/* Badge/chip activo en categorías */
.gd-cat-chip.active,
.gd-filter-chip.active {
  background: var(--gd-primary) !important;
  border-color: var(--gd-primary) !important;
  color: #fff !important;
}

/* ── BUSINESS DETAIL / MICROPÁGINAS ─────────────────────── */
/* Tab activo */
.gd-tab.active,
.gd-tab-btn.active,
[data-tab].active {
  color: var(--gd-primary) !important;
  border-bottom-color: var(--gd-primary) !important;
}
/* Headings de sección */
.gd-section-title,
.gd-card-title {
  color: var(--gd-primary) !important;
}
/* Badge de categoria.
   Tenia `background: var(--gd-primary) !important` y el texto tambien usa
   --gd-primary, asi que salia azul sobre azul: un bloque macizo sin texto
   legible. Retirado el 2026-08-30. Si algun dia se quiere pastilla de color,
   hay que poner ADEMAS un color de texto que contraste. */
/* Botón CTA de micropágina */
.gd-detail-cta,
.gd-contact-btn {
  background: var(--gd-primary) !important;
  color: var(--gd-on-primary, #fff) !important;
}
/* Live Card header gradient */
.gd-live-card-header,
.gd-lc-header {
  background: linear-gradient(135deg, var(--gd-primary), var(--gd-cluster, #AF3BB3)) !important;
  color: var(--gd-on-primary, #fff) !important;
}
/* Rating stars fill */
.gd-rating-fill,
.gd-stars-active {
  color: var(--gd-primary) !important;
}

/* ── ONBOARDING ───────────────────────────────────────────── */
/* Step indicator activo */
.gd-step.active .gd-step-circle,
.gd-onb-step.active {
  background: var(--gd-primary) !important;
  border-color: var(--gd-primary) !important;
  color: var(--gd-on-primary, #fff) !important;
}
/* Botón siguiente/continuar */
.gd-onb-btn-next,
.gd-onb-submit {
  background: var(--gd-primary) !important;
  color: var(--gd-on-primary, #fff) !important;
}
/* Progress bar */
.gd-onb-progress-fill {
  background: var(--gd-primary) !important;
}

/* ── PANEL VENDEDOR (base_seller) ─────────────────────────── */
/* Sidebar item activo */
.gd-sidebar-item.active,
.gd-sidebar .active {
  background: var(--gd-primary) !important;
  color: var(--gd-on-primary, #fff) !important;
}
/* Sidebar item hover */
.gd-sidebar-item:hover {
  color: var(--gd-primary) !important;
}
/* Panel cards con gradiente */
.gd-panel-card.gd-primary-card {
  background: linear-gradient(135deg, var(--gd-primary), color-mix(in srgb, var(--gd-primary) 80%, #1a2070)) !important;
  color: var(--gd-on-primary, #fff) !important;
}
/* Botón acción principal en panel */
.gd-action-btn-primary,
.gd-panel .btn-primary {
  background: var(--gd-primary) !important;
  color: var(--gd-on-primary, #fff) !important;
}
/* Progreso/barra de analíticas */
.gd-analytics-bar,
.gd-progress-primary {
  background: linear-gradient(90deg, var(--gd-primary), var(--gd-cluster, #AF3BB3)) !important;
}

/* ── LOCALIZADOR (complemento a --loc-* ya migrado) ─────── */
/* Chips de categoría activos */
.gd-loc-chip.active {
  background: var(--gd-primary) !important;
  border-color: var(--gd-primary) !important;
  color: var(--gd-on-primary, #fff) !important;
}
/* Botones de acción del localizador */
.gd-loc-action-btn {
  background: var(--gd-primary) !important;
  color: var(--gd-on-primary, #fff) !important;
}
/* Card del localizador button */
.gd-loc-card-btn {
  background: var(--gd-primary) !important;
  color: var(--gd-on-primary, #fff) !important;
}

/* ── FORMS GLOBALES ──────────────────────────────────────── */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: var(--gd-primary) !important;
  outline-color: var(--gd-primary) !important;
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--gd-primary) !important;
}

/* ── CARD / CONTAINER STYLES ─────────────────────────────
   Activados por clase en <body> que pone gd_theme.js:
   gd-style-filled | gd-style-outlined | gd-style-elevated | gd-style-glass | gd-style-flat
───────────────────────────────────────────────────────── */

/* Selector común: cualquier tarjeta/contenedor de la plataforma */
.gd-card, .gd-panel-card, .gd-loc-card, .gd-biz-card,
.gd-result-card, .gd-cat-card, .gd-onb-card,
.gd-seller-card, .gd-detail-card {
  border-radius: var(--gd-card-radius, 12px) !important;
  border-width:  var(--gd-card-border-width, 1px) !important;
  border-style:  solid !important;
  box-shadow:    var(--gd-card-shadow, none) !important;
  transition:    border-color .2s, box-shadow .2s, background .2s !important;
}

/* ── OUTLINED (default) ── */
.gd-style-outlined .gd-card,
.gd-style-outlined .gd-panel-card,
.gd-style-outlined .gd-loc-card,
.gd-style-outlined .gd-biz-card,
.gd-style-outlined .gd-result-card {
  background:    var(--gd-card-bg, #fff) !important;
  border-color:  var(--gd-card-border, #dde1f0) !important;
}

/* ── FILLED ── */
.gd-style-filled .gd-card,
.gd-style-filled .gd-panel-card,
.gd-style-filled .gd-loc-card,
.gd-style-filled .gd-biz-card,
.gd-style-filled .gd-result-card {
  background:    color-mix(in srgb, var(--gd-primary, #121663) 6%, #fff) !important;
  border-color:  color-mix(in srgb, var(--gd-primary, #121663) 20%, transparent) !important;
}

/* ── ELEVATED ── */
.gd-style-elevated .gd-card,
.gd-style-elevated .gd-panel-card,
.gd-style-elevated .gd-loc-card,
.gd-style-elevated .gd-biz-card,
.gd-style-elevated .gd-result-card {
  background:    var(--gd-card-bg, #fff) !important;
  border-color:  transparent !important;
  box-shadow:    0 4px 20px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06) !important;
}
.gd-style-elevated .gd-card:hover,
.gd-style-elevated .gd-loc-card:hover {
  box-shadow:    0 8px 32px rgba(0,0,0,.14) !important;
  transform:     translateY(-2px);
}

/* ── GLASS ── */
.gd-style-glass .gd-card,
.gd-style-glass .gd-panel-card,
.gd-style-glass .gd-loc-card,
.gd-style-glass .gd-biz-card,
.gd-style-glass .gd-result-card {
  background:    var(--gd-glass-bg, rgba(255,255,255,.72)) !important;
  backdrop-filter: var(--gd-glass-blur, blur(12px)) !important;
  -webkit-backdrop-filter: var(--gd-glass-blur, blur(12px)) !important;
  border-color:  var(--gd-glass-border, rgba(255,255,255,.45)) !important;
}

/* ── PREMIUM UTILITIES (Fase 3) ── */
.gd-glass-panel {
  background: var(--gd-glass-bg);
  backdrop-filter: var(--gd-glass-blur);
  -webkit-backdrop-filter: var(--gd-glass-blur);
  border: 1px solid var(--gd-glass-border);
}

.gd-shadow-premium {
  box-shadow: var(--gd-shadow-md);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.gd-shadow-premium:hover {
  box-shadow: var(--gd-shadow-hover);
  transform: translateY(-2px);
}

.gd-text-gradient {
  background: linear-gradient(135deg, var(--gd-primary), var(--gd-cluster));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* Tipografía de Encabezados (Display) */
h1, h2, h3, h4, h5, h6, .gd-title, .gd-display-font {
  font-family: var(--gd-font-display);
}

/* ── FLAT ── */
.gd-style-flat .gd-card,
.gd-style-flat .gd-panel-card,
.gd-style-flat .gd-loc-card,
.gd-style-flat .gd-biz-card,
.gd-style-flat .gd-result-card {
  background:    var(--gd-panel-bg, #f8f9fc) !important;
  border-color:  transparent !important;
  box-shadow:    none !important;
}

/* ── CHIPS / PILLS (filtros, categorías) ─────────────────────── */
.gd-chip, .gd-filter-chip, .gd-cat-chip,
.gd-loc-chip, .gd-badge-chip {
  border-radius: var(--gd-card-radius, 12px) !important;
  border-width:  var(--gd-card-border-width, 1px) !important;
  border-style:  solid !important;
}

.gd-style-filled .gd-chip:not(.active),
.gd-style-filled .gd-filter-chip:not(.active) {
  background:   color-mix(in srgb, var(--gd-primary) 8%, #fff) !important;
  border-color: color-mix(in srgb, var(--gd-primary) 25%, transparent) !important;
  color:        var(--gd-primary) !important;
}

.gd-style-flat .gd-chip:not(.active),
.gd-style-flat .gd-filter-chip:not(.active) {
  background:   var(--gd-panel-bg, #f0f2f8) !important;
  border-color: transparent !important;
}

/* ── RADIUS PRESETS (aplicados via --gd-card-radius) ─────────── */
/* pill: border-radius 999px — se aplica via slider en el tema */
/* rounded: 12px (default) */
/* soft: 6px */
/* square: 0px */

/* =========================================================================
   ROOM FIGMA — Hotel / Hospedaje / Motel
   ========================================================================= */

.gd-roomfigma-list { display: flex; flex-direction: column; gap: 1.5rem; }

.gd-roomfigma-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e8eaf6;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(18,22,99,0.07);
    transition: box-shadow 0.2s;
    position: relative;
}
.gd-roomfigma-card:hover { box-shadow: 0 6px 28px rgba(18,22,99,0.13); }
.gd-roomfigma-card--motel { border-color: #ede7f6; }

/* Header */
.gd-roomfigma-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.1rem 1.5rem 0.9rem;
    border-bottom: 1px solid #f0f2ff;
}
.gd-roomfigma-name {
    font-family: var(--gd-font-display, 'Outfit', sans-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gd-text-dark, #0f1432);
    margin: 0;
}
.gd-roomfigma-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.gd-roomfigma-badge {
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}
.gd-badge-offer   { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; border-radius: 20px; padding: 2px 10px; font-size: 0.74rem; font-weight: 600; }
.gd-badge-discount{ background: #ede7f6; color: #6a1b9a; border: 1px solid #ce93d8; border-radius: 20px; padding: 2px 10px; font-size: 0.74rem; font-weight: 700; }
.gd-badge-privacy { background: #ede7f6; color: #6a1b9a; border: 1px solid #ce93d8; }
.gd-badge-urgency {
    position: absolute;
    top: -1px;
    right: 16px;
    background: #7c5cbf;
    color: #fff;
    border-radius: 0 0 10px 10px;
    padding: 4px 14px;
    font-size: 0.74rem;
    font-weight: 700;
    z-index: 2;
    box-shadow: 0 3px 8px rgba(124,92,191,0.3);
}

/* Body: horizontal split */
.gd-roomfigma-body {
    display: flex;
    min-height: 380px;
}

/* LEFT: foto */
.gd-roomfigma-left {
    flex: 0 0 43%;
    display: flex;
    flex-direction: column;
    padding: 1rem 0.75rem 1rem 1rem;
}
.gd-roomfigma-main-photo {
    position: relative;
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(160deg, #e8eaf6 0%, #d1d5f0 100%);
    min-height: 260px;
}
.gd-roomfigma-main-img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.gd-roomfigma-main-photo:hover .gd-roomfigma-main-img { transform: scale(1.04); }
.gd-roomfigma-img-empty {
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #e8eaf6 0%, #d1d5f0 100%);
    color: #9fa8da;
}

/* Flechas de navegación de fotos */
.gd-roomfigma-photo-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.85);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--gd-text-dark, #0f1432);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: background 0.15s, transform 0.15s;
    z-index: 2;
}
.gd-roomfigma-photo-arrow:hover {
    background: rgba(255,255,255,1);
    transform: translateY(-50%) scale(1.08);
}
.gd-roomfigma-photo-arrow--prev { left: 8px; }
.gd-roomfigma-photo-arrow--next { right: 8px; }

/* RIGHT: detalles */
.gd-roomfigma-right {
    flex: 1;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    border-left: 1px solid #f0f2ff;
}
.gd-roomfigma-desc {
    font-family: var(--gd-font-body, 'Inter', sans-serif);
    font-size: 0.87rem;
    color: #374151;
    line-height: 1.6;
    margin: 0;
    flex-shrink: 0;
}

/* Amenidades */
.gd-roomfigma-am-title {
    font-family: var(--gd-font-display, 'Outfit', sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gd-text-dark, #0f1432);
    margin-bottom: 0.25rem;
}
.gd-roomfigma-am-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem 1rem;
}
.gd-roomfigma-am-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #374151;
}
.gd-roomfigma-am-item .fa,
.gd-amenity-acc-icon {
    color: var(--gd-blue, #2d31a6);
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

/* Footer: precio + CTA */
.gd-roomfigma-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 0.75rem;
    border-top: 1px solid #f0f2ff;
}
.gd-roomfigma-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-direction: column;
}
.gd-roomfigma-price-big {
    font-family: var(--gd-font-display, 'Outfit', sans-serif);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--gd-blue, #2d31a6);
}
.gd-roomfigma-price-unit {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gd-blue, #2d31a6);
    margin-left: 2px;
}
.gd-roomfigma-cta {
    background: #2d31a6;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.4rem;
    font-family: var(--gd-font-display, 'Outfit', sans-serif);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, transform 0.15s;
    white-space: nowrap;
}
.gd-roomfigma-cta:hover {
    background: #1a1e7a;
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px) {
    .gd-roomfigma-body { flex-direction: column; min-height: auto; }
    .gd-roomfigma-left { flex: none; padding: 0.75rem; }
    .gd-roomfigma-right { border-left: none; border-top: 1px solid #f0f2ff; padding: 0.75rem; }
    .gd-roomfigma-am-grid { grid-template-columns: 1fr; }
    .gd-roomfigma-footer { flex-direction: column; align-items: flex-start; }
    .gd-roomfigma-price-big { font-size: 1.3rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTENEDOR CENTRAL
   ═══════════════════════════════════════════════════════════════════════
   Las plantillas publicas envuelven cada seccion en <div class="container">
   desde siempre, pero la unica regla .container del proyecto es la de
   Tailwind (output.css), que solo declara width:100% y un max-width por
   breakpoint. Tailwind NO centra el contenedor salvo que se le active
   `center: true` en la configuracion, y aqui no esta activado.

   Resultado: en pantallas anchas el contenido medía 1280px o 1536px y se
   quedaba pegado al borde izquierdo, sin margen y sin aire lateral. Es el
   desbordamiento que se ve en las capturas de la portada.

   Se fija el ancho de DESIGN.md (1200px) y se centra. Va en esta hoja
   porque base.html la carga despues de output.css: misma especificidad
   (0,1,0), gana la ultima, y las media queries de Tailwind no suman
   especificidad, asi que este max-width se impone en todos los tamaños.

   El !important de output.css esta sobre `.\!container`, una utilidad
   distinta que aqui no se usa; no interfiere.
   ═══════════════════════════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.25rem;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .container { padding-inline: 1rem; }
}

/* Botones de pedido en apps externas.
   Cada plataforma con su color: el cliente reconoce el boton antes de leerlo,
   que es justo lo que hace que funcione. */
.gd-pedir { display: flex; flex-direction: column; gap: .5rem; }

.gd-pedir-btn {
  display: block; text-align: center; text-decoration: none;
  font-weight: 700; font-size: .88rem; padding: .7rem 1rem;
  border-radius: 10px; color: #fff;
  background: var(--gd-primary, #121663);
  transition: filter .15s ease;
}
.gd-pedir-btn:hover { filter: brightness(1.08); }

.gd-pedir-btn--pedidosya { background: #ff2f5f; }
.gd-pedir-btn--ubereats  { background: #06c167; }
.gd-pedir-btn--rappi     { background: #ff441f; }
.gd-pedir-btn--doordash  { background: #ff3008; }
.gd-pedir-btn--glovo     { background: #ffc244; color: #1a1a1a; }
.gd-pedir-btn--hugo      { background: #f04e23; }
.gd-pedir-btn--didifood  { background: #ff7a45; }