/* Gradient para el header del calendario */
.card-header.gradient-calendar{
  background: linear-gradient(120deg, #fbcfe8 0%, #fecaca 45%, #fed7aa 100%);
  border-bottom: none;
}
.card-header.gradient-calendar .title{ color:#111; }
.card-header.gradient-calendar .legend .chip{
  background: rgba(255,255,255,0.65);
  border-color: rgba(255,255,255,0.7);
  color:#111;
}
.desktop-only{ display:block; }
.mobile-only{ display:none; }

/* Vista móvil segmentada para Calendario */
@media (max-width: 980px){
  .desktop-only{ display:none !important; }
  .mobile-only{ display:block !important; }
  .calendar-mobile{ display:grid; gap:12px; padding:12px }
  .segment{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 6px 18px #0000000d; overflow:hidden }
  .segment-head{ padding:10px 12px; border-bottom:1px dashed #e5e7eb; background:linear-gradient(90deg, #fff, #fff8) }
  .veh-badge{ display:inline-flex; padding:6px 10px; border-radius:999px; border:1px dashed #e5e7eb; font-weight:600; font-size:13px; background:#fff }
  .segment-body{ display:grid; gap:8px; padding:10px }
  .slot-chip{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:12px; border:1px solid #e5e7eb; background:#fff; font-weight:700 }
  .slot-chip.available{ background:#e8f5e9; color:#166534; border-color:#86efac }
  .slot-chip.occupied{ background:#ffe4e6; color:#991b1b; border-color:#f87171 }
  .slot-time{ font-variant-numeric: tabular-nums; }
}

/* Admin: lista de reservas en segmentos móviles */
@media (max-width: 980px){
  .res-list-mobile{ display:grid; gap:12px; padding:12px }
  .res-card{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 6px 18px #0000000d; padding:12px }
  .res-row .badge{ display:inline-flex; padding:6px 10px; border-radius:999px; background:#f1f5f9; border:1px solid #e2e8f0; font-weight:600 }
  .res-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px }
  .res-grid > div{ display:flex; flex-direction:column; gap:4px; font-size:14px }
  .res-actions{ display:flex; justify-content:flex-end; margin-top:8px }
}