/* ======================================================================
   ASFALTO · Dashboard MATCH — alineación 1:1 con el prototipo
   ----------------------------------------------------------------------
   Apunta al DOM REAL del template [listeo_dashboard] (no a markup propio).
   Pegar en WP Code como snippet CSS · Site Wide. Carga DESPUÉS del theme.
   Reemplaza/ajusta §14 y §18 con selectores verificados del HTML real:
     .row.listeo-dashoard-widgets > a > .col-lg-3 > .dashboard-stat.color-N
       .dashboard-stat-content (h4 + span) + .dashboard-stat-icon > svg
   Respeta body.dark-dashboard y body.asfalto (no toca wp-admin).
   ====================================================================== */

/* Tokens locales (por si se pega suelto, sin el child theme) */
body.asfalto{
  --as-core:#FF5733; --as-gold:#FF914D; --as-violet:#8F52FF; --as-green:#1F8A5B;
  --as-ink:#0C0C0E; --as-surf:#FFFFFF; --as-surf-2:#FAF9F6;
  --as-hair:rgba(12,12,14,.08); --as-radius:18px;
  --as-shadow:0 10px 30px rgba(12,12,14,.07);
  --as-display:'Playfair Display',Georgia,serif;
  --as-ui:'Plus Jakarta Sans',system-ui,sans-serif;
  --as-mono:'Space Mono',monospace;
}

/* ---- Fila de stat cards: aire + alturas iguales --------------------- */
/* Listeo ya las pone 4-en-fila con Bootstrap; sólo añadimos box-sizing y
   aire, sin romper su grilla. El flex se activa como refuerzo robusto. */
body.asfalto .row.listeo-dashoard-widgets{
  display:flex !important; flex-wrap:wrap; align-items:stretch;
  margin-left:-10px !important; margin-right:-10px !important;
}
body.asfalto .row.listeo-dashoard-widgets > a,
body.asfalto .row.listeo-dashoard-widgets > .col-lg-3{
  box-sizing:border-box !important;
  padding-left:10px !important; padding-right:10px !important;
  margin-bottom:20px !important; text-decoration:none !important;
  display:flex; flex:0 0 25%; max-width:25%;
}
body.asfalto .row.listeo-dashoard-widgets > a > .col-lg-3{ box-sizing:border-box !important; width:100% !important; max-width:100% !important; flex:1 1 100%; padding:0 !important; margin:0 !important; }
@media (max-width:991px){ body.asfalto .row.listeo-dashoard-widgets > a,
  body.asfalto .row.listeo-dashoard-widgets > .col-lg-3{ flex:0 0 50%; max-width:50%; } }
@media (max-width:575px){ body.asfalto .row.listeo-dashoard-widgets > a,
  body.asfalto .row.listeo-dashoard-widgets > .col-lg-3{ flex:0 0 100%; max-width:100%; } }

/* ---- La tarjeta: borde de GRADIENTE real + glow + aire -------------- */
body.asfalto .dashboard-stat{
  position:relative; isolation:isolate;
  width:100%; min-height:128px;
  display:flex; flex-direction:column; justify-content:center;
  padding:24px 26px !important;
  border:1px solid transparent !important;
  border-radius:var(--as-radius) !important;
  background:var(--as-surf) !important;
  background-clip:padding-box;
  box-shadow:var(--as-shadow) !important;
  overflow:hidden;
}
/* hairline de gradiente alrededor (mask-composite) — reemplaza la cinta de §14 */
body.asfalto .dashboard-stat::before{
  content:""; position:absolute; inset:0; z-index:0;
  border-radius:inherit; padding:1.4px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; opacity:.9;
  height:auto; width:auto; background:transparent;
}
body.asfalto .dashboard-stat.color-1::before{ background:linear-gradient(135deg,var(--as-green),#7ED9A8); }
body.asfalto .dashboard-stat.color-2::before{ background:linear-gradient(135deg,var(--as-ink),#5a5a64); }
body.asfalto .dashboard-stat.color-3::before{ background:linear-gradient(135deg,var(--as-gold),#FFC78A); }
body.asfalto .dashboard-stat.color-4::before{ background:linear-gradient(135deg,var(--as-core),var(--as-violet)); }
/* glow de esquina difuminado */
body.asfalto .dashboard-stat::after{
  content:""; position:absolute; z-index:-1;
  width:130px; height:130px; right:-34px; top:-38px;
  border-radius:50%; filter:blur(36px); opacity:.20; pointer-events:none;
}
body.asfalto .dashboard-stat.color-1::after{ background:var(--as-green); }
body.asfalto .dashboard-stat.color-2::after{ background:var(--as-ink); opacity:.10; }
body.asfalto .dashboard-stat.color-3::after{ background:var(--as-gold); }
body.asfalto .dashboard-stat.color-4::after{ background:var(--as-core); }

/* ---- Número + label (count-up lo anima vía asfalto-dashboard.js) ----- */
body.asfalto .dashboard-stat .dashboard-stat-content{ position:relative; z-index:1; }
body.asfalto .dashboard-stat .dashboard-stat-content h4{
  font-family:var(--as-ui) !important; font-weight:800 !important;
  font-size:40px !important; line-height:1 !important; letter-spacing:-.01em !important;
  color:var(--as-ink) !important; margin:0 0 6px !important;
}
body.asfalto .dashboard-stat.color-1 .dashboard-stat-content h4{ color:var(--as-green) !important; }
body.asfalto .dashboard-stat.color-3 .dashboard-stat-content h4{ color:#C8651F !important; }
body.asfalto .dashboard-stat.color-4 .dashboard-stat-content h4{ color:var(--as-core) !important; }
body.asfalto .dashboard-stat .dashboard-stat-content span{
  font-family:var(--as-ui) !important; font-size:13.5px !important;
  color:rgba(12,12,14,.55) !important; display:block; max-width:62%;
}

/* ---- Ícono nativo de Listeo: tamaño + tinte por métrica ------------- */
body.asfalto .dashboard-stat .dashboard-stat-icon{
  position:absolute; right:22px; top:50%; transform:translateY(-50%);
  width:46px; height:46px; opacity:.9; z-index:1;
}
body.asfalto .dashboard-stat .dashboard-stat-icon svg{ width:46px; height:46px; }
body.asfalto .dashboard-stat .dashboard-stat-icon svg path,
body.asfalto .dashboard-stat .dashboard-stat-icon svg circle,
body.asfalto .dashboard-stat .dashboard-stat-icon svg rect{ fill:var(--as-ink) !important; }
body.asfalto .dashboard-stat.color-1 .dashboard-stat-icon svg *{ fill:var(--as-green) !important; }
body.asfalto .dashboard-stat.color-3 .dashboard-stat-icon svg *{ fill:var(--as-gold) !important; }
body.asfalto .dashboard-stat.color-4 .dashboard-stat-icon svg *{ fill:var(--as-core) !important; }

/* ---- Cajas inferiores (actividad + chart) -------------------------- */
body.asfalto .dashboard-list-box{
  border:1px solid var(--as-hair) !important;
  border-radius:var(--as-radius) !important;
  box-shadow:var(--as-shadow) !important;
  background:var(--as-surf) !important;
}
body.asfalto .dashboard-list-box > h4{
  font-family:var(--as-display) !important; font-weight:800 !important;
  font-size:19px !important; color:var(--as-ink) !important;
  border-bottom:1px solid var(--as-hair) !important;
}
body.asfalto .dashboard-list-box .clear-all-activities,
body.asfalto #listeo-clear-activities{
  color:var(--as-core) !important; background:rgba(255,87,51,.08) !important;
  border-radius:999px !important;
}
body.asfalto #listeo-activities-list .activity-time{ font-family:var(--as-mono) !important; font-size:11px !important; }

/* ---- Navegación lateral: activo con barra sunset ------------------- */
body.asfalto .dashboard-nav .dashboard-nav-inner ul li.active > a{
  background:linear-gradient(90deg,rgba(255,87,51,.16),rgba(255,87,51,0)) !important;
  box-shadow:inset 3px 0 0 var(--as-core) !important;
  color:#fff !important;
}
body.asfalto .dashboard-nav .dashboard-nav-inner ul li.active > a i{ color:var(--as-core) !important; }
body.asfalto .dashboard-nav .dashboard-nav-inner ul li > a{ border:0 !important; }

/* ---- Titlebar "Hola Asfalto" en editorial -------------------------- */
body.asfalto #titlebar h1,
body.asfalto #titlebar h2{
  font-family:var(--as-display) !important; font-weight:800 !important;
  letter-spacing:-.01em !important; color:var(--as-ink) !important;
}
body.asfalto #titlebar #breadcrumbs li,
body.asfalto #titlebar #breadcrumbs a{ font-family:var(--as-mono) !important; font-size:11px !important; letter-spacing:.4px; }

/* ======================================================================
   §22 · MIS RESERVAS / BOOKINGS (template de listado de Listeo)
   ----------------------------------------------------------------------
   DOM real (/my-bookings):
     .dashboard-list-box.margin-top-0
       .headline-with-filters.list-view
         .booking-requests-filter > #booking-date-range-enabler > span
         h4 "Tus Reservas"
       ul#no-bookings-information  (estado vacío)
       ul > li.list-box-listing … (cuando hay reservas) + .booking-status
     #small-dialog (popup "Enviar mensaje") + textarea + .button
   ====================================================================== */
body.asfalto .headline-with-filters{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; padding-bottom:14px !important;
  border-bottom:1px solid var(--as-hair) !important;
}
body.asfalto .headline-with-filters h4{
  font-family:var(--as-display) !important; font-weight:800 !important;
  font-size:19px !important; color:var(--as-ink) !important; margin:0 !important; border:0 !important;
}
/* Filtro de fecha → pill de marca */
body.asfalto #booking-date-range-enabler,
body.asfalto #booking-date-range{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--as-surf-2) !important; border:1px solid var(--as-hair) !important;
  border-radius:999px !important; padding:9px 16px !important; cursor:pointer;
  font-family:var(--as-ui) !important; font-weight:600 !important; font-size:13px !important;
  color:var(--as-ink) !important;
}
body.asfalto #booking-date-range-enabler::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--as-core);
}
/* Estado vacío más amable */
body.asfalto #no-bookings-information{
  text-align:center; color:rgba(12,12,14,.5) !important;
  font-size:14.5px !important; padding:40px 20px !important;
  background:var(--as-surf-2) !important; border-radius:14px !important;
  margin-top:18px !important; list-style:none !important;
}
/* Spinner de carga → tinte de marca */
body.asfalto .booking-loading-icon{ color:var(--as-core) !important; }

/* ----------------------------------------------------------------------
   Tarjeta de reserva · componente NUEVO de Listeo (.booking-card)
   Carga su propio dashboard-booking.css; lo revestimos a marca.
   Markup real: .booking-card[.border-l-4 .border-green-500|blue|red]
     .booking-card-header (.booking-title a, .booking-subtitle, .booking-status-badge)
     .booking-content-grid > .booking-content-grid-details > .booking-section …
       .booking-section-header(svg+h4) .booking-date-value .booking-price
     .booking-card-footer (.booking-meta, .booking-actions > .booking-btn-*)
   ---------------------------------------------------------------------- */
body.asfalto .booking-card{
  background:var(--as-surf) !important;
  border:1px solid var(--as-hair) !important;
  border-left-width:4px !important;
  border-radius:var(--as-radius) !important;
  box-shadow:var(--as-shadow) !important;
  margin-bottom:16px !important; overflow:hidden;
}
/* Acento del borde izquierdo por estado → paleta Asfalto */
body.asfalto .booking-card.border-green-500{ border-left-color:var(--as-green) !important; }
body.asfalto .booking-card.border-blue-500{  border-left-color:var(--as-gold) !important; }
body.asfalto .booking-card.border-red-500{   border-left-color:var(--as-core) !important; }
body.asfalto .booking-card.border-yellow-500{ border-left-color:var(--as-gold) !important; }

body.asfalto .booking-card-header{ border-bottom:1px solid var(--as-hair) !important; }
body.asfalto .booking-title,
body.asfalto .booking-title a{
  font-family:var(--as-display) !important; font-weight:800 !important;
  color:var(--as-ink) !important; letter-spacing:-.01em !important;
}
body.asfalto .booking-subtitle{ font-family:var(--as-mono) !important; font-size:11.5px !important; color:rgba(12,12,14,.5) !important; }

/* Badge de estado (utilidades bg-*-100/text-*-800 → tinte de marca) */
body.asfalto .booking-status-badge{
  font-family:var(--as-mono) !important; font-weight:700 !important;
  letter-spacing:.3px; border-radius:999px !important; border:0 !important;
}
body.asfalto .booking-status-badge.bg-green-100{ background:rgba(31,138,91,.13) !important; color:#1F8A5B !important; }
body.asfalto .booking-status-badge.bg-blue-100{  background:rgba(255,145,77,.16) !important; color:#C8651F !important; }
body.asfalto .booking-status-badge.bg-red-100{   background:rgba(255,87,51,.13) !important; color:var(--as-core) !important; }
body.asfalto .booking-status-badge.bg-yellow-100{ background:rgba(255,145,77,.16) !important; color:#C8651F !important; }

/* Secciones internas */
body.asfalto .booking-section-header h4{
  font-family:var(--as-ui) !important; font-weight:700 !important;
  font-size:12.5px !important; color:rgba(12,12,14,.55) !important;
}
body.asfalto .booking-section-header svg{ color:var(--as-core) !important; }
body.asfalto .booking-date-label{ font-family:var(--as-mono) !important; font-size:10px !important; color:rgba(12,12,14,.4) !important; text-transform:uppercase; }
body.asfalto .booking-date-value,
body.asfalto .booking-guest-count,
body.asfalto .booking-guest-name a,
body.asfalto .booking-detail-content{ color:var(--as-ink) !important; font-family:var(--as-ui) !important; }
body.asfalto .booking-contact-link{ color:var(--as-core) !important; }
body.asfalto .booking-price{
  font-family:var(--as-ui) !important; font-weight:800 !important;
  font-size:18px !important; color:var(--as-ink) !important;
}

/* Footer + acciones */
body.asfalto .booking-card-footer{ border-top:1px solid var(--as-hair) !important; background:var(--as-surf-2) !important; }
body.asfalto .booking-meta,
body.asfalto .booking-expires{ font-family:var(--as-mono) !important; font-size:11px !important; color:rgba(12,12,14,.5) !important; }
body.asfalto .booking-btn{
  border-radius:999px !important; font-family:var(--as-ui) !important;
  font-weight:700 !important; border:1px solid transparent !important;
}
body.asfalto .booking-btn-primary{
  background:var(--as-sunset, linear-gradient(95deg,#FF914D,#FF5733 55%,#8F52FF)) !important;
  color:#fff !important; box-shadow:0 6px 16px rgba(255,87,51,.28) !important;
}
body.asfalto .booking-btn-secondary{
  background:var(--as-surf) !important; color:var(--as-ink) !important;
  border-color:var(--as-hair) !important;
}
body.asfalto .booking-btn-danger{
  background:transparent !important; color:var(--as-core) !important;
  border-color:rgba(255,87,51,.4) !important;
}

/* Filtros select2 (productor) → pill de marca */
body.asfalto .booking-requests-filter .select2-selection{
  border:1px solid var(--as-hair) !important; border-radius:999px !important;
  background:var(--as-surf-2) !important;
}

/* Botones de aprobar/cancelar y "Enviar mensaje" */
body.asfalto #small-dialog .button,
body.asfalto .send-message-to-owner.button{
  border-radius:999px !important; font-family:var(--as-ui) !important; font-weight:700 !important;
}
body.asfalto #small-dialog .button{
  background:var(--as-sunset, linear-gradient(95deg,#FF914D,#FF5733 55%,#8F52FF)) !important;
  color:#fff !important; border:0 !important;
}
/* Popup "Enviar mensaje" */
body.asfalto #small-dialog{ border-radius:var(--as-radius) !important; }
body.asfalto #small-dialog .small-dialog-header h3{
  font-family:var(--as-display) !important; font-weight:800 !important; color:var(--as-ink) !important;
}
body.asfalto #small-dialog textarea#contact-message{
  border:1px solid var(--as-hair) !important; border-radius:12px !important;
  font-family:var(--as-ui) !important;
}
body.asfalto #small-dialog textarea#contact-message:focus{ border-color:var(--as-core) !important; }

/* Barra de pestañas unificada de Bookings (inyectada por asfalto-bookings-tabs.js) */
body.asfalto .asfalto-booking-tabs{
  display:flex; gap:6px; flex-wrap:wrap;
  padding:6px; margin:0 0 18px; border-radius:14px;
  background:var(--as-surf-2); border:1px solid var(--as-hair);
}
body.asfalto .asfalto-bk-tab{
  flex:1 1 auto; text-align:center; white-space:nowrap;
  padding:10px 16px; border-radius:10px;
  font-family:var(--as-ui) !important; font-weight:600; font-size:13.5px;
  color:rgba(12,12,14,.55) !important; text-decoration:none !important; transition:.15s;
}
body.asfalto .asfalto-bk-tab:hover{ color:var(--as-ink) !important; background:rgba(12,12,14,.04); }
body.asfalto .asfalto-bk-tab.is-active{
  background:var(--as-sunset, linear-gradient(95deg,#FF914D,#FF5733 55%,#8F52FF)) !important;
  color:#fff !important; box-shadow:0 6px 16px rgba(255,87,51,.26);
}

/* ======================================================================
   §23 · MENSAJES (template de inbox de Listeo)
   ----------------------------------------------------------------------
   DOM real (/messages):
     .messages-container.margin-top-0
       .messages-headline > h4 "Bandeja de entrada"
       .messages-inbox > ul > li (a > avatar + nombre + extracto)  |  vacío
   ====================================================================== */
body.asfalto .messages-container{
  background:var(--as-surf) !important; border:1px solid var(--as-hair) !important;
  border-radius:var(--as-radius) !important; box-shadow:var(--as-shadow) !important; overflow:hidden;
}
body.asfalto .messages-headline{ border-bottom:1px solid var(--as-hair) !important; }
body.asfalto .messages-headline h4{
  font-family:var(--as-display) !important; font-weight:800 !important;
  font-size:19px !important; color:var(--as-ink) !important;
}
body.asfalto .messages-headline input,
body.asfalto .messages-headline .search-field{
  border:1px solid var(--as-hair) !important; border-radius:999px !important; font-family:var(--as-ui) !important;
}
/* Ítems de conversación */
body.asfalto .messages-inbox ul li a,
body.asfalto .messages-inbox ul li{ border-color:var(--as-hair) !important; }
body.asfalto .messages-inbox ul li.active-message,
body.asfalto .messages-inbox ul li:hover{ background:var(--as-surf-2) !important; }
body.asfalto .messages-inbox .message-avatar img{ border-radius:50% !important; }
body.asfalto .messages-inbox .message-by-headline h5,
body.asfalto .messages-inbox .message-by h5{
  font-family:var(--as-ui) !important; font-weight:700 !important; color:var(--as-ink) !important;
}
body.asfalto .messages-inbox .message-by-headline span{ font-family:var(--as-mono) !important; font-size:10.5px !important; color:rgba(12,12,14,.4) !important; }
/* Conversación abierta / burbujas */
body.asfalto .message-content .message-bubble .message-text{ border-radius:16px !important; }
body.asfalto .message-content .message-bubble.me .message-text{
  background:var(--as-sunset, linear-gradient(95deg,#FF914D,#FF5733)) !important; color:#fff !important;
}
/* Composer / responder */
body.asfalto .message-reply textarea,
body.asfalto .messages-container textarea{
  border:1px solid var(--as-hair) !important; border-radius:14px !important; font-family:var(--as-ui) !important;
}
body.asfalto .message-reply textarea:focus{ border-color:var(--as-core) !important; }
body.asfalto .message-reply button.button,
body.asfalto .messages-container .button{
  border-radius:999px !important; font-family:var(--as-ui) !important; font-weight:700 !important;
  background:var(--as-sunset, linear-gradient(95deg,#FF914D,#FF5733)) !important; color:#fff !important; border:0 !important;
}
/* Estado vacío */
body.asfalto .messages-inbox ul li p{
  text-align:center; color:rgba(12,12,14,.5) !important; font-size:14.5px !important;
}