/* ======================================================================
   ASFALTO · REFINAMIENTOS DE PRODUCCIÓN
   ----------------------------------------------------------------------
   Ajustes finos sobre el DOM REAL de Listeo en asfalto.org (desktop):
   dashboard de usuario, navegación lateral, tarjetas del listado con
   mapa y controles de filtro. Pensado para pegarse en WP Code (CSS) o
   cargarse desde el child theme (ya enqueuado en functions.php).

   Depende de los tokens de Asfalto (:root en style.css §1). Si lo usás
   suelto en WP Code, las variables --as-* ya están definidas por el
   child theme activo.

   §14 · Dashboard stat cards (Escritorio)
   §15 · Navegación lateral del dashboard (bordes/activo)
   §16 · Tarjetas del listado con mapa (.listing-card-nl) + gradiente
   §17 · Controles de filtro / sort / toolbar
   §18 · Stat cards · borde con gradiente + glow + count-up (escritorio refinado)
   §19 · Billetera del productor · panel de retiro (payout)
   §20 · Submit-listing · modalidades de precio + programación recurrente
   §21 · Bookings / tickets · estados (Confirmada / Pendiente / Lista de espera)
   ====================================================================== */

/* ======================================================================
   §14 · DASHBOARD STAT CARDS  (Escritorio: publicaciones, vistas, reseñas, guardado)
   ----------------------------------------------------------------------
   Listeo las pinta en pasteles (verde/gris/amarillo/rosa) fuera de marca.
   Las llevamos a tarjeta editorial blanca + acento Asfalto por métrica.
   ====================================================================== */
.dashboard-stat {
  border-radius: var(--as-radius, 18px) !important;
  border: 1px solid var(--as-hair, rgba(12,12,14,.08)) !important;
  box-shadow: var(--as-shadow, 0 10px 30px rgba(12,12,14,.07)) !important;
  background: #fff !important;
  overflow: hidden;
  position: relative;
}
/* Matar los gradientes pastel del tema (light-dashboard) */
body.light-dashboard.page-template-template-dashboard .dashboard-stat.color-1,
body.light-dashboard.page-template-template-dashboard .dashboard-stat.color-2,
body.light-dashboard.page-template-template-dashboard .dashboard-stat.color-3,
body.light-dashboard.page-template-template-dashboard .dashboard-stat.color-4 {
  background: #fff !important;
}
/* Acento superior por métrica (cinta sunset/violeta/oro/verde sobrio) */
.dashboard-stat::before {
  content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%;
}
.dashboard-stat.color-1::before { background: #1F8A5B; }                 /* publicaciones activas */
.dashboard-stat.color-2::before { background: var(--as-ink, #0C0C0E); }  /* vistas */
.dashboard-stat.color-3::before { background: var(--as-gold, #FF914D); } /* reseñas */
.dashboard-stat.color-4::before { background: var(--as-core, #FF5733); } /* guardado */

/* Números en tinta editorial (no en el color pastel) */
.dashboard-stat-content h4,
.dashboard-stat h4 span,
.dashboard-stat .woocommerce-Price-currencySymbol {
  font-family: var(--as-ui, 'Plus Jakarta Sans', sans-serif) !important;
  color: var(--as-ink, #0C0C0E) !important;
  font-weight: 800 !important;
}
.color-1 span, .color-1 .dashboard-stat-content h4 { color: #1F8A5B !important; }
.color-3 span, .color-3 .dashboard-stat-content h4 { color: var(--as-gold, #FF914D) !important; }
.color-4 span, .color-4 .dashboard-stat-content h4 { color: var(--as-core, #FF5733) !important; }
.dashboard-stat-content span { color: var(--as-ink-55, rgba(12,12,14,.55)) !important; }

/* Íconos a juego con el acento de cada tarjeta */
.color-1 .dashboard-stat-icon svg path, .color-1 .dashboard-stat-icon svg g,
.color-1 .dashboard-stat-icon svg rect, .color-1 .dashboard-stat-icon svg circle { fill: #1F8A5B !important; opacity: .9; }
.color-2 .dashboard-stat-icon svg path, .color-2 .dashboard-stat-icon svg g,
.color-2 .dashboard-stat-icon svg rect, .color-2 .dashboard-stat-icon svg circle { fill: var(--as-ink, #0C0C0E) !important; opacity: .85; }
.color-3 .dashboard-stat-icon svg path, .color-3 .dashboard-stat-icon svg g,
.color-3 .dashboard-stat-icon svg rect, .color-3 .dashboard-stat-icon svg circle { fill: var(--as-gold, #FF914D) !important; opacity: .9; }
.color-4 .dashboard-stat-icon svg path, .color-4 .dashboard-stat-icon svg g,
.color-4 .dashboard-stat-icon svg rect, .color-4 .dashboard-stat-icon svg circle { fill: var(--as-core, #FF5733) !important; opacity: .9; }

/* Caja de gráfico / actividades: tarjeta blanca coherente */
.dashboard-list-box, .dashboard-stats-box {
  border-radius: var(--as-radius, 18px) !important;
  border: 1px solid var(--as-hair, rgba(12,12,14,.08)) !important;
  box-shadow: var(--as-shadow, 0 10px 30px rgba(12,12,14,.07)) !important;
}
.dashboard-list-box-headline, .dashboard-list-box h4 {
  font-family: var(--as-display, 'Playfair Display', serif) !important;
  font-weight: 800 !important;
  color: var(--as-ink, #0C0C0E) !important;
  border-bottom: 1px solid var(--as-hair, rgba(12,12,14,.08)) !important;
}
/* "Borrar todo" y títulos rojos de actividad → marca */
.dashboard-list-box .close-list-item, .recent-activity-name a { color: var(--as-core, #FF5733) !important; }

/* ======================================================================
   §15 · NAVEGACIÓN LATERAL DEL DASHBOARD  (bordes / activo)
   ----------------------------------------------------------------------
   Limpia las líneas duras entre ítems y unifica el estado activo con la
   firma sunset. Complementa §12 de style.css.
   ====================================================================== */
#dashboard .dashboard-nav,
.dashboard-nav {
  border: 0 !important;
}
.dashboard-nav ul li,
.dashboard-nav ul li a {
  border-bottom: 0 !important;
  border-top: 0 !important;
}
/* Separador sutil entre grupos, no entre cada ítem */
.dashboard-nav ul + ul { border-top: 1px solid rgba(255,255,255,.07) !important; }

/* Estado activo: barra sunset a la izquierda + tinte, sin caja gris dura */
.dashboard-nav ul li.active a,
.dashboard-nav ul li.active-submenu > a {
  background: linear-gradient(90deg, rgba(255,87,51,.16), rgba(255,87,51,0)) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--as-core, #FF5733) !important;
  border-radius: 0 !important;
}
.dashboard-nav ul li.active a i,
.dashboard-nav ul li.active a svg { color: var(--as-core, #FF5733) !important; fill: var(--as-core, #FF5733) !important; }
.dashboard-nav ul li a:hover { background: rgba(255,255,255,.05) !important; }

/* ======================================================================
   §16 · TARJETAS DEL LISTADO CON MAPA  (.listing-card-nl)
   ----------------------------------------------------------------------
   DOM real: .listing-card-container-nl > .listing-card-nl >
     .listing-image-container-nl (slider) + a.listing-details-nl >
       .details-main-col-nl ( h2.listing-title-nl, p.listing-location-nl,
       .listing-features-nl, .listing-amenities-nl )
   Objetivo: tarjeta editorial premium con foto protagonista, título
   Playfair, ubicación legible, chips/pill de marca y gradiente sutil
   sobre la imagen.
   ====================================================================== */
.listing-card-nl {
  background: #fff !important;
  border: 1px solid var(--as-hair, rgba(12,12,14,.08)) !important;
  border-radius: var(--as-radius, 18px) !important;
  box-shadow: var(--as-shadow, 0 10px 30px rgba(12,12,14,.07)) !important;
  overflow: hidden !important;
}
.listing-card-container-nl { transition: transform .25s ease; }
.listing-card-container-nl:hover { transform: translateY(-4px); }
.listing-card-container-nl:hover .listing-card-nl {
  box-shadow: var(--as-shadow-lg, 0 18px 44px rgba(12,12,14,.14)) !important;
  border-color: rgba(12,12,14,.12) !important;
}

/* Imagen: gradiente sutil "encima" para dar profundidad y unificar marca */
.listing-image-container-nl { position: relative !important; }
.listing-image-container-nl::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,12,14,.28) 0%, rgba(12,12,14,0) 34%, rgba(12,12,14,0) 62%, rgba(12,12,14,.30) 100%);
}
.listing-image-container-nl img,
.listing-image-container-nl .slider-image-nl { transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.listing-card-container-nl:hover .listing-image-container-nl img { transform: scale(1.04); }

/* Título editorial Playfair (forzar sobre Raleway heredado) */
.listing-card-nl .listing-title-nl,
h2.listing-title-nl {
  font-family: var(--as-display, 'Playfair Display', serif) !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  color: var(--as-ink, #0C0C0E) !important;
  line-height: 1.16 !important;
}
.listing-card-nl .listing-title-nl a { color: var(--as-ink, #0C0C0E) !important; }
.listing-card-nl .listing-location-nl { color: var(--as-ink-55, rgba(12,12,14,.55)) !important; }
.listing-card-nl .listing-location-nl::before,
.listing-card-nl .listing-location-nl i { color: var(--as-core, #FF5733) !important; }

/* Badge de disciplina sobre la foto (Música, Teatro…) → cristal/sunset */
.listing-badges-nl .badge-nl,
.listing-image-container-nl .badge-nl,
.listing-image-container-nl .listing-badge {
  font-family: var(--as-mono, 'Space Mono', monospace) !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  background: var(--as-sunset, linear-gradient(90deg,#FF914D,#FF5733)) !important;
  color: #fff !important;
}

/* Favorito / bookmark (corazón): círculo cristal, activo sunset */
.listing-image-container-nl .like-icon,
.listing-card-nl .bookmark-icon-nl,
.listing-card-nl .like-button {
  background: rgba(12,12,14,.42) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #fff !important;
  border-radius: 50% !important;
}
.listing-image-container-nl .like-icon.liked,
.listing-card-nl .like-icon.liked { background: var(--as-core, #FF5733) !important; border-color: var(--as-core,#FF5733) !important; }

/* Chips de features (disciplina/horario) → suaves de marca */
.listing-features-nl .feature-tag-nl {
  background: rgba(255,87,51,.10) !important;
  color: var(--as-core, #FF5733) !important;
  border-radius: 999px !important;
  font-family: var(--as-ui, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 600 !important;
}

/* Pill de fecha del evento ("18/06/2026 a las 8:00 pm") → marca */
.listing-amenities-nl .amenity-tag-nl,
.listing-amenities-nl > span,
.event-date-nl, .listing-event-date {
  background: rgba(255,87,51,.10) !important;
  color: var(--as-core, #FF5733) !important;
  border-radius: 999px !important;
  font-family: var(--as-ui, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 600 !important;
}
/* Check de verificado en el título → violeta de marca */
.listing-title-nl .verified-badge,
.listing-title-nl svg path { fill: var(--as-violet, #8F52FF) !important; }

/* Botón "reservar/ver" del card → sunset, pill */
.listing-card-nl a.button,
.listing-details-nl .book-now-nl,
.listing-card-nl .listing-booking-nl .button {
  background: var(--as-sunset, linear-gradient(95deg,#FF914D,#FF5733 55%,#8F52FF)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 18px rgba(255,87,51,.30);
}

/* ======================================================================
   §17 · CONTROLES DE FILTRO / SORT / TOOLBAR
   ----------------------------------------------------------------------
   "Mostrar Filtros" verde + tabs (Todos / Música) → marca Asfalto.
   ====================================================================== */
/* Botón verde de filtros → asfalto oscuro (secundario) */
.fs-listings .show-filters,
a.show-filters-button, .show-filters-button,
.panel-dropdown.float-left > a,
.fs-inner-container .button.show-filters {
  background: var(--as-ink, #0C0C0E) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
}
.fs-listings .show-filters i, .show-filters-button i { color: var(--as-core, #FF5733) !important; }

/* Tabs/segmentos de disciplina (Todos / Música) — activo sunset */
.listing-tabs a.active, .fs-switcher .active,
.fw-carousel-nav .active, .layout-switcher a.active {
  background: var(--as-ink, #0C0C0E) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

/* Toolbar/sort: pills consistentes */
.sort-by-select .select2-container--default .select2-selection--single .select2-selection__rendered,
.sort-by .chosen-container-single .chosen-single { border-radius: 999px !important; }

/* Marcador/cluster del mapa con ícono (música) — círculo de marca */
.leaflet-marker-icon .marker-icon-inner, .map-marker-icon {
  background: #fff !important; color: var(--as-core, #FF5733) !important;
  border: 2px solid #fff !important;
  box-shadow: 0 6px 18px rgba(12,12,14,.4) !important;
}

/* ======================================================================
   §18 · STAT CARDS · BORDE CON GRADIENTE + GLOW (escritorio refinado)
   ----------------------------------------------------------------------
   Sube el listón de §14: borde de gradiente sutil por métrica + glow de
   esquina (estilo "Zyforia"), más aire. El gradiente se pinta con la
   técnica mask-composite para no requerir markup extra. El count-up lo
   maneja assets/js/asfalto-dashboard.js (clase .asfalto-dash-js en <html>).
   ====================================================================== */
.asfalto-dash-js .dashboard-stat,
.dashboard-stat {
  position: relative;
  isolation: isolate;
}
/* glow de esquina difuminado, detrás del contenido */
.dashboard-stat::after {
  content: ""; position: absolute; z-index: -1;
  width: 120px; height: 120px; right: -30px; top: -34px;
  border-radius: 50%; filter: blur(34px); opacity: .20; pointer-events: none;
}
.dashboard-stat.color-1::after { background: #1F8A5B; }
.dashboard-stat.color-2::after { background: var(--as-ink, #0C0C0E); opacity: .12; }
.dashboard-stat.color-3::after { background: var(--as-gold, #FF914D); }
.dashboard-stat.color-4::after { background: var(--as-core, #FF5733); }
/* número más grande y aireado (count-up lo anima) */
.dashboard-stat .dashboard-stat-content h4 {
  font-size: 38px !important; line-height: 1.05 !important; letter-spacing: -.01em !important;
}
.dashboard-stat-content span { margin-top: 8px !important; display: inline-block; }
/* anti-FOUC del count-up: arranca en su valor si no hay JS */
.asfalto-dash-js .dashboard-stat .dashboard-stat-content h4 { will-change: contents; }

/* ======================================================================
   §19 · BILLETERA DEL PRODUCTOR · PANEL DE RETIRO (payout)
   ----------------------------------------------------------------------
   Estilos para el bloque de Ganancias + Solicitar retiro. Se aplican a la
   sección de Earnings/Payouts de Listeo y a markup propio marcado .as-*.
   ====================================================================== */
.as-payout-card, .listeo-earnings .earnings-box {
  background: linear-gradient(150deg,#1b1512,var(--as-asphalt,#0C0C0E)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: var(--as-radius, 18px) !important;
  color: #fff !important;
  box-shadow: var(--as-shadow-lg, 0 18px 44px rgba(12,12,14,.14)) !important;
}
.as-fee-badge {
  display: inline-block; font-family: var(--as-mono, monospace); font-size: 10px;
  font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--as-gold, #FF914D); background: rgba(255,145,77,.16);
  padding: 3px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle;
}
/* botón Solicitar retiro / Withdraw → sunset pill */
.as-withdraw-btn, .listeo-earnings .withdraw, a.payout-request {
  background: var(--as-sunset, linear-gradient(95deg,#FF914D,#FF5733 55%,#8F52FF)) !important;
  color: #fff !important; border: 0 !important; border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(255,87,51,.3) !important;
}
/* método de pago (radio MP / transferencia) */
.as-pm { display: flex; gap: 13px; align-items: flex-start; border: 1px solid var(--as-hair-2, rgba(12,12,14,.12)); border-radius: 14px; padding: 14px 16px; cursor: pointer; margin-bottom: 12px; }
.as-pm.is-on { border-color: var(--as-core, #FF5733); background: rgba(255,87,51,.04); }
.as-pm-note { background: rgba(42,111,219,.08); border: 1px solid rgba(42,111,219,.2); color: var(--as-ink-70, rgba(12,12,14,.7)); font-size: 12px; border-radius: 10px; padding: 10px 12px; line-height: 1.5; }
.as-wd-summary { background: var(--as-cream-2, #EEECE7); border-radius: 12px; padding: 14px 16px; }
.as-wd-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--as-ink-70, rgba(12,12,14,.7)); padding: 5px 0; }
.as-wd-row.is-total { border-top: 1px solid var(--as-hair, rgba(12,12,14,.08)); margin-top: 6px; padding-top: 11px; font-weight: 800; color: var(--as-ink, #0C0C0E); font-size: 15px; }

/* ======================================================================
   §20 · SUBMIT-LISTING · MODALIDADES DE PRECIO + PROGRAMACIÓN RECURRENTE
   ----------------------------------------------------------------------
   Estilos para los campos Asfalto añadidos al formulario de carga de
   Listeo (ver inc/asfalto-listeo-hooks.php): segmented de modalidad
   (De pago / Aporte voluntario / Gratis) y filas día+horario de cartelera.
   ====================================================================== */
.as-seg { display: inline-flex; background: var(--as-cream-2, #EEECE7); border: 1px solid var(--as-hair, rgba(12,12,14,.08)); border-radius: 11px; padding: 3px; gap: 2px; }
.as-seg button, .as-seg label { border: 0; background: none; padding: 9px 14px; border-radius: 8px; font-family: var(--as-ui, sans-serif); font-weight: 600; font-size: 12.5px; color: var(--as-ink-55, rgba(12,12,14,.55)); cursor: pointer; }
.as-seg .is-on, .as-seg input:checked + label { background: var(--as-sunset, linear-gradient(95deg,#FF914D,#FF5733)) !important; color: #fff !important; }
.as-vol-check { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--as-hair-2, rgba(12,12,14,.12)); border-radius: 13px; padding: 13px 15px; }
.as-vol-check.is-on { border-color: var(--as-core, #FF5733); background: rgba(255,87,51,.04); }
/* filas de cartelera (día + horario + quitar) */
.as-run-row { display: grid; grid-template-columns: 1fr 118px 42px; gap: 10px; align-items: center; margin-bottom: 10px; }
.as-run-row .as-del { height: 44px; border: 1px solid var(--as-hair-2, rgba(12,12,14,.12)); border-radius: 11px; background: var(--as-cream-2, #EEECE7); color: var(--as-ink-55, rgba(12,12,14,.55)); cursor: pointer; }
.as-add-day { background: none; border: 1px dashed var(--as-hair-2, rgba(12,12,14,.12)); border-radius: 10px; padding: 10px 14px; color: var(--as-core, #FF5733); font-weight: 600; font-size: 12.5px; cursor: pointer; width: 100%; }
.as-add-day:hover { border-color: var(--as-core, #FF5733); background: rgba(255,87,51,.05); }

/* ======================================================================
   §21 · BOOKINGS / TICKETS · ESTADOS
   ----------------------------------------------------------------------
   Pills de estado coherentes para la lista de reservas/bookings de Listeo
   y para el pase digital (markup propio .as-ticket, opcional).
   ====================================================================== */
.booking-status, .as-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--as-mono, monospace); font-size: 10px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
}
.as-pill::before, .booking-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.as-pill.is-ok,   .booking-status.confirmed  { background: rgba(31,138,91,.13);  color: #1F8A5B; }
.as-pill.is-warn, .booking-status.pending    { background: rgba(255,145,77,.16); color: #C8651F; }
.as-pill.is-wait, .booking-status.waitlist   { background: rgba(143,82,255,.16); color: var(--as-violet, #8F52FF); }
.as-pill.is-cancel, .booking-status.cancelled { background: rgba(12,12,14,.10); color: var(--as-ink-55, rgba(12,12,14,.55)); }
/* pase digital con QR (si se renderiza markup propio) */
.as-ticket { border-radius: 22px; overflow: hidden; background: radial-gradient(120% 80% at 50% -10%,#1c1714,#0C0C0E 70%); border: 1px solid rgba(255,255,255,.08); box-shadow: var(--as-shadow-lg, 0 18px 44px rgba(12,12,14,.2)); color: #fff; }
.as-ticket-head { background: var(--as-sunset, linear-gradient(95deg,#FF914D,#FF5733)); padding: 14px 18px; }
.as-ticket-qr { width: 118px; height: 118px; background: #fff; border-radius: 12px; padding: 9px; box-sizing: border-box; }
.as-ticket-qr.is-dim { filter: grayscale(.4); opacity: .9; }
.as-ticket-qr.is-locked { filter: blur(1px) grayscale(.6); opacity: .5; }