/*
Theme Name:     Asfalto — Listeo Child
Theme URI:      https://asfalto.org/
Description:     Child theme de Listeo para Asfalto.org — infraestructura digital de la cultura independiente. Reviste el theme con el sistema visual Asfalto: editorial, premium, urbano y cálido. La fotografía es protagonista; la interfaz flota sobre ella. Mobile-first (390px).
Author:         Asfalto.org
Template:       listeo
Version:        1.0.0
License:        GNU General Public License v2 or later
Text Domain:    asfalto
*/

/* ============================================================
   ASFALTO · CHILD THEME
   ------------------------------------------------------------
   Cómo se usa:
   1. Carpeta  wp-content/themes/asfalto-child/
   2. Archivos: style.css (este) + functions.php (encola fuentes
      y el style del padre). Activar "Asfalto — Listeo Child".
   3. NO reescribe Listeo: sólo sobreescribe sus selectores y
      variables. Si Listeo actualiza, los overrides persisten.

   Mapa de overrides:
   · Tokens de marca + remapeo de variables Listeo  → §1
   · Tipografía editorial (Playfair + Jakarta)      → §2
   · Botones y acciones (a.button, CTAs, like)       → §3
   · Listings — sistema nuevo (.listing-card-nl)     → §4
   · Listings — sistema clásico (.listing-item-*)    → §5
   · Badges / estados (badge-nl, listing-badge)      → §6
   · Header / buscador                               → §7
   · Formularios e inputs                            → §8
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;0,800;0,900;1,600;1,800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

/* ============================================================
   §1 · TOKENS DE MARCA + REMAPEO DE VARIABLES LISTEO
   ============================================================ */
:root {
  /* Paleta Asfalto */
  --as-asphalt:      #0C0C0E;   /* Asphalt Dark   */
  --as-cream:        #F8F7F4;   /* Alabaster Cream*/
  --as-cream-2:      #EEECE7;
  --as-core:         #FF5733;   /* Sunset Core    */
  --as-gold:         #FF914D;   /* Golden Dusk    */
  --as-violet:       #8F52FF;   /* Sunset Violet  */
  --as-sunset:       linear-gradient(95deg, #FF914D 0%, #FF5733 50%, #8F52FF 100%);

  /* Tinta */
  --as-ink:          #0C0C0E;
  --as-ink-70:       rgba(12,12,14,.70);
  --as-ink-55:       rgba(12,12,14,.55);
  --as-ink-40:       rgba(12,12,14,.40);
  --as-hair:         rgba(12,12,14,.08);
  --as-hair-2:       rgba(12,12,14,.14);

  /* Tipografía */
  --as-display:      'Playfair Display', Georgia, serif;
  --as-ui:           'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --as-mono:         'Space Mono', ui-monospace, monospace;

  /* Geometría */
  --as-radius:       18px;
  --as-radius-sm:    12px;
  --as-shadow:       0 10px 30px rgba(12,12,14,.07);
  --as-shadow-lg:    0 18px 44px rgba(12,12,14,.14);

  /* ── Remapeo de variables nativas de Listeo ───────────── */
  --listeo-primary-color:        #FF5733;
  --listeo-primary-color-light:  rgba(255,87,51,.10);
  --primary-green:               #1F8A5B;   /* "abierto/activo" → verde sobrio */
  --primary-yellow:              #FF914D;   /* estrellas → golden dusk         */
  --dark-text:                   #0C0C0E;
  --medium-text:                 #56555A;
  --light-gray-border:           rgba(12,12,14,.10);
  --icon-bg:                     #F1EFEA;
  --card-shadow:                 0 10px 30px rgba(12,12,14,.07);
}

/* Color de acento global de Listeo (links, iconos de tema) */
body { background-color: var(--as-cream); }

a, a:hover, a:focus { color: var(--as-core); }
.color, .listing-item h3 a:hover { color: var(--as-core) !important; }

/* ============================================================
   §2 · TIPOGRAFÍA EDITORIAL
   ============================================================ */
body,
input, button, select, textarea,
.listing-title-nl, .listing-location-nl, .price-nl {
  font-family: var(--as-ui);
  -webkit-font-smoothing: antialiased;
}

/* Titulares en Playfair Display, peso editorial */
h1, h2, h3,
.listing-title-nl,
.listing-item-inner h3,
.listing-item-content h3,
.page-title h1,
.fs-listings .listing-title-nl {
  font-family: var(--as-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--as-ink);
}

h1 { line-height: 1.06; }
h2, h3 { line-height: 1.12; }

/* Etiqueta mono "eyebrow" reutilizable sobre la marca */
.as-eyebrow {
  font-family: var(--as-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--as-ink-40);
}

/* ============================================================
   §3 · BOTONES Y ACCIONES
   Listeo base: a.button / button.button (gris #66676b)
   Asfalto:     primario = gradiente sunset; secundario = asfalto
   ============================================================ */
button.button,
a.button,
input[type="submit"],
.booking-confirmation-btn,
.button.preview {
  background: var(--as-sunset) !important;
  background-color: var(--as-core) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--as-ui) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 6px 18px rgba(255,87,51,.30);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

button.button:hover,
a.button:hover,
input[type="submit"]:hover,
.booking-confirmation-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(255,87,51,.40);
  opacity: 1;
}

/* Listeo usa un ::before para el hover-tint — lo desactivamos */
button.button:before,
a.button:before { display: none !important; }

/* Botón "borde" → secundario asfalto, contorno fino */
button.button.border,
a.button.border {
  background: transparent !important;
  color: var(--as-ink) !important;
  border: 1.5px solid var(--as-ink) !important;
  box-shadow: none !important;
}
button.button.border:hover,
a.button.border:hover {
  background: var(--as-ink) !important;
  color: #fff !important;
}

/* Botón blanco (sobre foto) → cristal */
a.button.white {
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none !important;
}

/* CTA de carrito / checkout WooCommerce */
.listeo-cart-container .woocommerce-mini-cart__buttons a.button.checkout,
.woocommerce-mini-cart__buttons a.button.checkout {
  background: var(--as-sunset) !important;
}

/* Botón "reservar/book now" del card nuevo */
.book-now-nl, .listing-booking-nl .button {
  border-radius: 999px !important;
}

/* Like / bookmark — corazón */
.like-button .like-icon,
span.like-icon {
  border-radius: 50% !important;
  transition: background-color .18s, color .18s, transform .18s;
}
span.like-icon.liked,
.listing-item-container.list-layout span.like-icon.liked,
.listing-item-container.list-layout span.like-icon:hover,
span.like-icon:hover {
  background-color: var(--as-core) !important;
  color: #fff !important;
}

/* ============================================================
   §4 · LISTINGS — SISTEMA NUEVO (.listing-card-nl)
   El "listing" es una pieza editorial: foto grande, sombra
   suave, tipografía Playfair, esquinas generosas.
   ============================================================ */
.listing-card-nl,
.fs-listings .listing-card-nl {
  background: #fff !important;
  border: 1px solid var(--as-hair) !important;
  border-radius: var(--as-radius) !important;
  box-shadow: var(--as-shadow) !important;
  overflow: hidden;
}

.listing-card-container-nl { transition: transform .25s ease, box-shadow .25s ease; }
.listing-card-container-nl:hover { transform: translateY(-4px); }
.listing-card-container-nl:hover .listing-card-nl {
  box-shadow: var(--as-shadow-lg) !important;
  border-color: rgba(12,12,14,.12) !important;
}

/* La imagen manda: bordes amplios y zoom sutil al hover */
.listing-image-container-nl { border-radius: var(--as-radius) 0 0 var(--as-radius) !important; }
.new-grid-layout-nl .listing-image-container-nl { border-radius: var(--as-radius) var(--as-radius) 0 0 !important; }
.slider-image-nl,
.listing-image-container-nl img { transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.listing-card-container-nl:hover .slider-image-nl { transform: scale(1.04); }

/* Título y ubicación */
.listing-title-nl {
  font-family: var(--as-display) !important;
  font-weight: 800 !important;
  font-size: 21px !important;
  line-height: 1.16 !important;
}
.listing-location-nl { color: var(--as-ink-55) !important; }
.listing-location-nl:before { color: var(--as-core) !important; }

/* Precio — número en Jakarta, peso fuerte; "desde" en mono */
.price-nl {
  font-family: var(--as-ui) !important;
  font-weight: 800 !important;
  color: var(--as-ink) !important;
  font-size: 19px !important;
}
.price-period-nl {
  font-family: var(--as-mono) !important;
  font-size: 11px !important;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--as-ink-40) !important;
}

/* Rating */
.listing-rating-nl { background: var(--as-cream-2) !important; }
.stars-nl { color: var(--as-gold) !important; }
.rating-text-nl { color: var(--as-ink) !important; }

/* Tags de features / disciplina — chips suaves de marca */
.feature-tag-nl {
  background: var(--listeo-primary-color-light) !important;
  color: var(--as-core) !important;
  border-radius: 999px !important;
  font-family: var(--as-ui) !important;
  font-weight: 600 !important;
}
.amenity-icon-nl { background: var(--icon-bg) !important; }
.instant-badge-nl { background: var(--as-ink) !important; }

/* Slider arrows sobre la foto */
.slider-arrow-nl { box-shadow: 0 4px 14px rgba(12,12,14,.18) !important; }

/* Sidebar de detalle del card */
.details-sidebar-col-nl { border-color: var(--as-hair) !important; }

/* ============================================================
   §5 · LISTINGS — SISTEMA CLÁSICO (.listing-item-container)
   ============================================================ */
.listing-item-container {
  background: #fff !important;
  border: 1px solid var(--as-hair) !important;
  border-radius: var(--as-radius) !important;
  box-shadow: var(--as-shadow) !important;
  overflow: hidden;
}
.listing-item-container:hover { transform: translate3d(0,-5px,0); }
.listing-item-container:hover { box-shadow: var(--as-shadow-lg) !important; }

.listing-item { border-radius: 0 !important; }

/* Degradado inferior sobre la foto para que el texto flote legible */
.listing-item:before {
  background: linear-gradient(to top, rgba(12,12,14,.82) 0%, rgba(12,12,14,.10) 55%, rgba(12,12,14,0) 100%) !important;
}

.listing-item-content h3,
.listing-item-inner h3 {
  font-family: var(--as-display) !important;
  font-weight: 800 !important;
}

/* List layout (fila) */
.listing-item-container.list-layout {
  background: #fff !important;
  border-radius: var(--as-radius) !important;
}
.listing-item-container.list-layout:hover { transform: translate3d(5px,0,0); }
.listing-item-container.list-layout .listing-item-inner h3 { color: var(--as-ink) !important; }

/* Tag sobre la tarjeta */
.listing-item-content span.tag,
.listing-item-container.list-layout span.tag {
  background: rgba(255,255,255,.16) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff !important;
  border-radius: 999px !important;
  font-family: var(--as-mono) !important;
  font-size: 11px !important;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.listing-item-container.compact .listing-item-content span.tag { background: rgba(255,87,51,.92) !important; }

/* Estrellas */
.star-rating .star.filled:before,
.star-rating .star:before { color: var(--as-gold); }

/* ============================================================
   §6 · BADGES / ESTADOS
   Mapeo cultural: Agotado · Pocos · Promo · Gratis · Nueva
   ============================================================ */
.badge-nl {
  border-radius: 999px !important;
  font-family: var(--as-mono) !important;
  font-weight: 700 !important;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-size: 10.5px !important;
}
.badge-nl.featured-nl {
  background: var(--listeo-primary-color-light) !important;
  color: var(--as-core) !important;
}
.badge-nl.sponsored-nl {
  background: var(--as-sunset) !important;
  color: #fff !important;
}

/* Badge clásico flotando sobre la foto */
.listing-badge {
  background: var(--as-ink) !important;
  border-radius: 999px !important;
  font-family: var(--as-mono) !important;
  font-weight: 700 !important;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-size: 10.5px !important;
  padding: 6px 12px !important;
  margin: 14px !important;
}
.listing-badge.now-open  { background: #1F8A5B !important; }
.listing-badge.now-closed{ background: rgba(12,12,14,.62) !important; backdrop-filter: blur(8px); }

/* Botón-estado del card nuevo (abierto/cerrado) */
.status-button-nl {
  background: #1F8A5B !important;
  border-radius: 999px !important;
  font-family: var(--as-mono) !important;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.status-button-nl.closed-nl { background: rgba(12,12,14,.62) !important; }

/* ============================================================
   §7 · HEADER / BUSCADOR
   ============================================================ */
#header.cloned { background: rgba(248,247,244,.92) !important; backdrop-filter: blur(16px); }

/* Botón "sign in" / CTA del header */
.header-widget .sign-in,
.user_not_logged_in .header-widget .sign-in {
  border-radius: 999px !important;
}
.header-widget .button {
  border-radius: 999px !important;
  background: var(--as-sunset) !important;
}

/* Navegación: hover/activo con tinta asfalto en vez de gris */
#navigation.style-1 > ul > li.current-menu-ancestor > a,
#navigation.style-1 > ul > li:hover > a {
  background: var(--as-ink) !important;
  color: #fff !important;
}

/* Buscador principal (main search) — píldoras suaves */
.main-search-input,
.main-search-input-item input {
  border-radius: var(--as-radius-sm) !important;
}
.main-search-input .button.fullwidth { border-radius: 999px !important; }

/* ============================================================
   §8 · FORMULARIOS E INPUTS
   ============================================================ */
input, input[type="text"], input[type="password"],
input[type="email"], input[type="number"], textarea, select {
  border: 1px solid var(--as-hair-2) !important;
  border-radius: var(--as-radius-sm) !important;
  box-shadow: none !important;
  color: var(--as-ink) !important;
  font-family: var(--as-ui) !important;
  font-weight: 500;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--as-core) !important;
  box-shadow: 0 0 0 3px rgba(255,87,51,.12) !important;
}

/* Selección de texto con acento de marca */
::selection { background: rgba(255,87,51,.22); }

/* ============================================================
   §10 · MAPA — Leaflet + OpenStreetMap (Listeo Core)
   ------------------------------------------------------------
   Listeo Core renderiza los templates split-map / listings-map
   con Leaflet sobre tiles OSM:  #map.split-map  +  marcadores
   DivIcon  +  Leaflet.markercluster  +  popups.
   Estos overrides estilizan ESAS clases reales — no hace falta
   un tile server propio: tintamos los tiles OSM por CSS.
   ============================================================ */

/* Contenedor + layout fijo del split */
#map.split-map,
.full-page-map-container #map,
#map-container #map {
  border-radius: 0 !important;
  background: var(--as-asphalt) !important;   /* fondo mientras cargan tiles */
}
.fs-inner-container.map-fixed,
.full-page-map-container.map-fixed { background: var(--as-asphalt); }
.leaflet-container {
  background: var(--as-asphalt) !important;
  font-family: var(--as-ui) !important;
}

/* ── Tinte de los tiles OSM ───────────────────────────────────
   "Noche editorial" (asfalto cálido) por defecto. Sólo afecta a
   los <img.leaflet-tile>, así que marcadores y popups quedan a
   todo color encima. Ajustá el filter a gusto o desactivalo. */
#map .leaflet-tile,
.split-map .leaflet-tile {
  filter: grayscale(.45) invert(1) brightness(.78) contrast(1.04)
          sepia(.38) saturate(.7) hue-rotate(8deg) !important;
}
/* Variante "Alabastro" (mapa claro desaturado y cálido):
   añadí la clase  asfalto-map-light  al <body> desde Elementor. */
body.asfalto-map-light #map .leaflet-tile,
body.asfalto-map-light .split-map .leaflet-tile {
  filter: grayscale(.55) brightness(1.05) contrast(.9)
          sepia(.16) saturate(.8) hue-rotate(-6deg) !important;
}

/* ── Marcador de precio (DivIcon de Listeo Core) ──────────────
   Listeo monta el marcador como  .leaflet-marker-icon.marker-container
   con una tarjeta interna + flecha. */
.leaflet-marker-icon.marker-container,
.marker-container { background: transparent !important; border: 0 !important; }

.marker-container .marker-card,
.leaflet-marker-icon .marker-card {
  background: var(--as-ink) !important;
  color: #fff !important;
  font-family: var(--as-ui) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  box-shadow: 0 6px 18px rgba(12,12,14,.45) !important;
  transition: transform .18s ease, background-color .18s ease;
}
/* Hover / activo / destacado → gradiente sunset */
.marker-container:hover .marker-card,
.marker-container.clicked .marker-card,
.marker-container.active .marker-card,
.leaflet-marker-icon.active .marker-card {
  background: var(--as-sunset) !important;
  transform: translateY(-2px) scale(1.04);
}
.marker-container .marker-arrow,
.leaflet-marker-icon .marker-arrow {
  border-top-color: #fff !important;   /* la flechita hereda el borde blanco */
}

/* Pin simple (cuando no hay precio) */
.leaflet-marker-icon.pin-marker { filter: drop-shadow(0 4px 10px rgba(12,12,14,.5)); }

/* ── Clusters (Leaflet.markercluster) ─────────────────────────*/
.marker-cluster { background: transparent !important; }
.marker-cluster div {
  background: var(--as-sunset) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.85) !important;
  box-shadow: 0 6px 18px rgba(255,87,51,.4) !important;
  font-family: var(--as-ui) !important;
  font-weight: 800 !important;
  width: 38px !important; height: 38px !important;
  margin-left: 1px !important; margin-top: 1px !important;
}
.marker-cluster span { line-height: 34px !important; }

/* ── Popups → tarjeta editorial Asfalto ───────────────────────
   El wrapper se vuelve transparente para que el listing-card
   interno (§4/§5) muestre su propio estilo. */
.leaflet-popup-content-wrapper {
  background: #fff !important;
  border-radius: var(--as-radius) !important;
  box-shadow: var(--as-shadow-lg) !important;
  padding: 0 !important;
  overflow: hidden;
}
.leaflet-popup-content { margin: 0 !important; width: 264px !important; line-height: 1.4; }
.leaflet-popup-content .listing-card-nl,
.leaflet-popup-content .listing-item-container { box-shadow: none !important; border: 0 !important; }
.leaflet-popup-tip { background: #fff !important; box-shadow: var(--as-shadow) !important; }
.leaflet-popup-close-button {
  width: 26px !important; height: 26px !important;
  top: 8px !important; right: 8px !important;
  background: rgba(12,12,14,.5) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 16px !important; line-height: 26px !important;
  backdrop-filter: blur(6px);
  z-index: 2;
}

/* ── Controles de zoom + atribución ───────────────────────────*/
.leaflet-bar,
.leaflet-control-zoom {
  border: 0 !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(12,12,14,.35) !important;
}
.leaflet-bar a,
.leaflet-control-zoom a {
  background: rgba(12,12,14,.55) !important;
  color: #fff !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  width: 38px !important; height: 38px !important;
  line-height: 38px !important; font-size: 19px !important;
}
.leaflet-bar a:hover,
.leaflet-control-zoom a:hover { background: var(--as-core) !important; }
.leaflet-control-attribution {
  background: rgba(12,12,14,.5) !important;
  color: rgba(255,255,255,.55) !important;
  font-family: var(--as-mono) !important;
  font-size: 10px !important;
  border-radius: 8px 0 0 0 !important;
  padding: 3px 8px !important;
}
.leaflet-control-attribution a { color: var(--as-gold) !important; }

/* ── Botón "Show / Hide Map" del split ────────────────────────*/
.show-map-button {
  background: var(--as-ink) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-family: var(--as-ui) !important;
  font-weight: 700 !important;
  border: 0 !important;
  box-shadow: 0 6px 18px rgba(12,12,14,.3);
}
.show-map-button:before { background: var(--as-core) !important; }   /* el ping/punto */

/* ============================================================
   §12 · DASHBOARD DE USUARIO (template-dashboard.php)
   ------------------------------------------------------------
   Panel de Listeo para Espectador (subscriber) y Productor
   (owner/seller). Mismos selectores reales del theme:
   #dashboard · .dashboard-nav · .nav-tag · #titlebar · etc.
   El gating por rol lo resuelve Listeo en PHP; acá sólo damos
   el estilo Asfalto a lo que cada rol ve.
   ============================================================ */

/* Sidebar de navegación → asfalto editorial */
#dashboard .dashboard-nav {
  background: linear-gradient(185deg, #16120F 0%, var(--as-asphalt) 70%) !important;
  border-radius: var(--as-radius) !important;
  box-shadow: var(--as-shadow-lg) !important;
}
.dashboard-nav ul { padding-bottom: 6px; }

/* Título de cada grupo (Main / Listings / Account) — eyebrow mono dorado */
.dashboard-nav ul[data-submenu-title]:before {
  content: attr(data-submenu-title);
  font-family: var(--as-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase;
  color: rgba(255,255,255,.4) !important;
  padding: 18px 28px 8px !important;
}

/* Ítems */
.dashboard-nav ul li a {
  color: rgba(255,255,255,.72) !important;
  font-family: var(--as-ui) !important;
  font-weight: 500 !important;
  border: 0 !important;
  transition: color .15s, background-color .15s;
}
.dashboard-nav ul li a:hover { color: #fff !important; background: rgba(255,255,255,.05) !important; }
.dashboard-nav ul li a i { color: var(--as-gold) !important; }

/* Ítem activo → barra y tinte sunset */
.dashboard-nav ul li.active > a,
.dashboard-nav ul li.active-submenu > a {
  background: linear-gradient(90deg, rgba(255,87,51,.18), rgba(255,87,51,0)) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--as-core) !important;
}
.dashboard-nav ul li.active > a i { color: var(--as-core) !important; }

/* Submenús anidados (Bookings, My Listings) */
.dashboard-nav ul li ul { background: rgba(0,0,0,.22) !important; }
.dashboard-nav ul li ul li a { color: rgba(255,255,255,.6) !important; font-size: 14px !important; }

/* Contadores nav-tag → píldoras de estado */
.nav-tag {
  border-radius: 999px !important;
  font-family: var(--as-mono) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: .3px;
  padding: 2px 8px !important;
}
.nav-tag.green    { background: #1F8A5B !important; color: #fff !important; }
.nav-tag.blue     { background: var(--as-violet) !important; color: #fff !important; }
.nav-tag.red      { background: var(--as-core) !important; color: #fff !important; }
.nav-tag.messages { background: var(--as-sunset) !important; color: #fff !important; }

/* Trigger responsive */
.dashboard-responsive-nav-trigger {
  background: var(--as-ink) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-family: var(--as-ui) !important;
  font-weight: 600 !important;
}

/* Contenido + titlebar */
.dashboard-content #titlebar h1,
.dashboard-content #titlebar h2 {
  font-family: var(--as-display) !important;
  font-weight: 800 !important;
  color: var(--as-ink) !important;
}
#breadcrumbs ul li, #breadcrumbs ul li a { font-family: var(--as-mono) !important; font-size: 11px !important; letter-spacing: .4px; }
#breadcrumbs ul li a { color: var(--as-core) !important; }

/* Notificaciones del dashboard */
.dashboard-content .notification,
.dashboard-content .notice {
  border-radius: var(--as-radius-sm) !important;
  border: 1px solid var(--as-hair) !important;
  font-family: var(--as-ui) !important;
}

/* ── FAB de "otras herramientas" (fuera del menú) ─────────────
   Botón flotante Asfalto: NO existe en Listeo de fábrica.
   Inyectá el markup en el hook  listeo/dashboard-menu/end  (o
   por Elementor) con esta estructura:
     <div class="asfalto-fab-wrap">
       <div class="asfalto-fab-menu"> …<a class="asfalto-fab-item"> </div>
       <button class="asfalto-fab">+</button>
     </div>
   Da acceso rápido a herramientas que no están en el nav del rol
   activo (QR Scan, Add Listing, Wallet, Mensajes, Alertas…). */
.asfalto-fab-wrap { position: fixed; right: 26px; bottom: 26px; z-index: 9990; }
.asfalto-fab {
  width: 60px; height: 60px; border-radius: 50%; border: 0;
  background: var(--as-sunset); color: #fff; cursor: pointer;
  box-shadow: 0 10px 28px rgba(255,87,51,.45);
  display: grid; place-items: center; font-size: 28px; line-height: 1;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.asfalto-fab-wrap.open .asfalto-fab { transform: rotate(45deg); }
.asfalto-fab-menu {
  position: absolute; right: 4px; bottom: 74px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  opacity: 0; transform: translateY(12px) scale(.96); pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.asfalto-fab-wrap.open .asfalto-fab-menu { opacity: 1; transform: none; pointer-events: auto; }
.asfalto-fab-item {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--as-ink) !important;
  font-family: var(--as-ui); font-weight: 600; font-size: 13.5px;
  padding: 9px 15px 9px 11px; border-radius: 999px; text-decoration: none;
  box-shadow: var(--as-shadow-lg);
}
.asfalto-fab-item-ic {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,87,51,.10); color: var(--as-core);
  display: grid; place-items: center; flex-shrink: 0;
}
.asfalto-fab-item-ic svg { display: block; }
.asfalto-fab-item-lb { white-space: nowrap; }
.asfalto-fab-item i { color: var(--as-core); }

/* ============================================================
   §13 · MOBILE-FIRST (390px) — ajustes de densidad
   ============================================================ */
@media (max-width: 767px) {
  .listing-title-nl { font-size: 19px !important; }
  .listing-card-nl,
  .listing-item-container { border-radius: 16px !important; }
  button.button, a.button, input[type="submit"] { width: 100%; text-align: center; }
  /* En mobile el split colapsa: mapa arriba, listado en sheet */
  #map.split-map { border-radius: 0 0 18px 18px !important; }
  .marker-container .marker-card { font-size: 12px !important; padding: 5px 10px !important; }
}