/* ═══════════════════════════════════════════════════
   Bugambilias — Admin Bento Refresh
   Layered on top of theme-green.css
   Modern, soft, rounded "Bento grid" aesthetic
   ═══════════════════════════════════════════════════ */

/* ─── Enhanced Variables ─── */
:root {
  --bento-radius: 20px;
  --bento-radius-sm: 14px;
  --bento-radius-xs: 10px;
  --bento-gap: 16px;
  --bento-surface: rgba(15, 63, 41, 0.55);
  --bento-surface-hover: rgba(20, 78, 50, 0.65);
  --bento-border: rgba(55, 150, 100, 0.25);
  --bento-border-hover: rgba(80, 175, 125, 0.35);
  --bento-glass: blur(12px) saturate(1.3);
  --bento-shadow: 0 8px 32px rgba(0,0,0,0.18);
  --bento-shadow-hover: 0 12px 40px rgba(0,0,0,0.25);
  --bento-pink: #e85c9e;
  --bento-pink-soft: rgba(232, 92, 158, 0.12);
  --bento-green: #25a56b;
  --bento-green-soft: rgba(37, 165, 107, 0.12);
  --bento-text: #f0fff6;
  --bento-text-muted: rgba(220, 255, 240, 0.6);
  --bento-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════════════
   BENTO GRID LAYOUT SYSTEM
   ══════════════════════════════════════════════════ */
.bento-row {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: var(--bento-gap) !important;
  margin-bottom: var(--bento-gap) !important;
  align-items: start;
}
.bento-span-12 { grid-column: span 12 !important; }
.bento-span-8  { grid-column: span 8 !important; }
.bento-span-7  { grid-column: span 7 !important; }
.bento-span-6  { grid-column: span 6 !important; }
.bento-span-5  { grid-column: span 5 !important; }
.bento-span-4  { grid-column: span 4 !important; }
.bento-span-3  { grid-column: span 3 !important; }
@media (max-width: 920px) {
  .bento-row { grid-template-columns: 1fr !important; }
  .bento-span-8, .bento-span-7, .bento-span-6,
  .bento-span-5, .bento-span-4, .bento-span-3 {
    grid-column: span 1 !important;
  }
}

/* ─── Hero Header ─── */
.bento-hero {
  background: linear-gradient(135deg, rgba(232,92,158,0.25) 0%, rgba(15,63,41,0.7) 50%, rgba(37,165,107,0.15) 100%) !important;
  border: 1px solid rgba(232,92,158,0.2) !important;
  border-radius: var(--bento-radius) !important;
  padding: 28px 28px !important;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--bento-gap) !important;
}
.bento-hero::before {
  content: "";
  position: absolute;
  top: -60px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,92,158,0.12), transparent 70%);
  pointer-events: none;
}
.bento-hero::after {
  content: "";
  position: absolute;
  bottom: -40px; left: 30%;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,165,107,0.1), transparent 70%);
  pointer-events: none;
}
.bento-hero h2 {
  position: relative;
  z-index: 1;
}

/* ─── Accent card (quick-link, CTA) ─── */
.bento-accent-card {
  background: linear-gradient(145deg, rgba(232,92,158,0.1), rgba(15,63,41,0.5)) !important;
  border: 1px solid rgba(232,92,158,0.18) !important;
  border-radius: var(--bento-radius) !important;
  padding: 20px !important;
  text-decoration: none !important;
  color: inherit !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  transition: var(--bento-transition) !important;
}
.bento-accent-card:hover {
  background: linear-gradient(145deg, rgba(232,92,158,0.16), rgba(15,63,41,0.55)) !important;
  border-color: rgba(232,92,158,0.3) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(232,92,158,0.12) !important;
}
.bento-accent-card .bento-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  background: rgba(232,92,158,0.12);
  border: 1px solid rgba(232,92,158,0.15);
  flex-shrink: 0;
}
.bento-accent-card .bento-label {
  font-weight: 700; font-size: 0.95rem;
}
.bento-accent-card .bento-sublabel {
  font-size: 0.8rem; opacity: 0.6; margin-top: 2px;
}

/* Alt green accent */
.bento-accent-card.bento-green-accent {
  background: linear-gradient(145deg, rgba(37,165,107,0.1), rgba(15,63,41,0.5)) !important;
  border-color: rgba(37,165,107,0.2) !important;
}
.bento-accent-card.bento-green-accent:hover {
  background: linear-gradient(145deg, rgba(37,165,107,0.16), rgba(15,63,41,0.55)) !important;
  border-color: rgba(37,165,107,0.32) !important;
  box-shadow: 0 12px 32px rgba(37,165,107,0.12) !important;
}
.bento-accent-card.bento-green-accent .bento-icon {
  background: rgba(37,165,107,0.12);
  border-color: rgba(37,165,107,0.18);
}

/* ─── Stats Card (small bento tile) ─── */
.bento-stat {
  background: var(--bento-surface) !important;
  backdrop-filter: var(--bento-glass) !important;
  border: 1px solid var(--bento-border) !important;
  border-radius: var(--bento-radius) !important;
  padding: 18px 20px !important;
  text-align: center;
  transition: var(--bento-transition) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100px;
}
.bento-stat:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--bento-shadow-hover) !important;
  border-color: var(--bento-border-hover) !important;
}

/* ─── Stacked column helper ─── */
.bento-stack {
  display: flex;
  flex-direction: column;
  gap: var(--bento-gap);
}

/* ─── Section Divider ─── */
.bento-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(55,150,100,0.2), rgba(232,92,158,0.1), transparent);
  margin: 8px 0;
  border: none;
}

/* ─── Page Background Enhancement ─── */
body {
  background:
    radial-gradient(ellipse 900px 600px at 80% 10%, rgba(232,92,158,0.06), transparent 60%),
    radial-gradient(ellipse 1200px 800px at 20% 80%, rgba(37,165,107,0.08), transparent 50%),
    radial-gradient(ellipse 800px 500px at 50% 50%, rgba(16,86,52,.4), transparent 55%),
    #041f14 !important;
}

/* ─── Glassmorphism Cards ─── */
.card {
  background: var(--bento-surface) !important;
  backdrop-filter: var(--bento-glass) !important;
  -webkit-backdrop-filter: var(--bento-glass) !important;
  border: 1px solid var(--bento-border) !important;
  border-radius: var(--bento-radius) !important;
  box-shadow: var(--bento-shadow) !important;
  padding: 22px !important;
  transition: var(--bento-transition) !important;
  overflow: visible !important;
}

.card:hover {
  border-color: var(--bento-border-hover) !important;
  box-shadow: var(--bento-shadow-hover) !important;
}

/* Sorbet header cards */
.card.bg-sorbet {
  background: linear-gradient(135deg, rgba(232,92,158,0.35), rgba(180,60,130,0.2), rgba(15,63,41,0.6)) !important;
  border-color: rgba(232,92,158,0.3) !important;
}

/* Calendar card */
.card.cal-card {
  background: var(--bento-surface) !important;
  border-radius: var(--bento-radius) !important;
  padding: 24px !important;
}
.card.cal-card::before {
  background: linear-gradient(165deg, rgba(37,165,107,0.08), rgba(232,92,158,0.04)) !important;
  border-radius: var(--bento-radius) !important;
}

/* ─── Modern Tables ─── */
.tbl {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
}

.tbl thead th {
  background: rgba(15, 63, 41, 0.4) !important;
  color: var(--bento-text-muted) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
  padding: 12px 16px !important;
  border: none !important;
}
.tbl thead th:first-child { border-radius: var(--bento-radius-sm) 0 0 var(--bento-radius-sm) !important; }
.tbl thead th:last-child { border-radius: 0 var(--bento-radius-sm) var(--bento-radius-sm) 0 !important; }

.tbl tbody tr {
  background: var(--bento-surface) !important;
  transition: var(--bento-transition) !important;
}
.tbl tbody tr:nth-child(odd) { background: rgba(15, 63, 41, 0.45) !important; }
.tbl tbody tr:nth-child(even) { background: rgba(18, 72, 48, 0.45) !important; }

.tbl tbody tr:hover {
  background: rgba(232, 92, 158, 0.08) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.tbl tbody td {
  padding: 14px 16px !important;
  border: none !important;
  border-top: none !important;
  color: var(--bento-text) !important;
  vertical-align: middle !important;
}
.tbl tbody tr td:first-child { border-radius: var(--bento-radius-sm) 0 0 var(--bento-radius-sm) !important; }
.tbl tbody tr td:last-child { border-radius: 0 var(--bento-radius-sm) var(--bento-radius-sm) 0 !important; }

/* Table links */
.tbl tbody td a {
  color: var(--bento-pink) !important;
  text-decoration: none !important;
  font-weight: 600;
  transition: color 0.15s ease !important;
}
.tbl tbody td a:hover {
  color: #f590c0 !important;
  text-decoration: none !important;
}

/* Mobile card view for tables */
@media (max-width: 840px) {
  .tbl tbody tr {
    border-radius: var(--bento-radius-sm) !important;
    margin-bottom: 10px !important;
    padding: 14px 16px !important;
    border: 1px solid var(--bento-border) !important;
    box-shadow: var(--bento-shadow) !important;
  }
  .tbl tbody td {
    border-radius: 0 !important;
    padding: 8px 0 !important;
  }
  .tbl tbody tr td:first-child, .tbl tbody tr td:last-child {
    border-radius: 0 !important;
  }
}

/* ─── Buttons Refresh ─── */
.btn {
  border-radius: var(--bento-radius-xs) !important;
  font-weight: 600 !important;
  transition: var(--bento-transition) !important;
  position: relative;
  overflow: hidden;
}

.btn--accent,
.btn.btn--accent {
  background: linear-gradient(135deg, var(--bento-pink) 0%, #c44a85 100%) !important;
  border: 1px solid rgba(232,92,158,0.5) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(232,92,158,0.25) !important;
  border-radius: 999px !important;
}
.btn--accent:hover,
.btn.btn--accent:hover {
  box-shadow: 0 6px 28px rgba(232,92,158,0.35) !important;
  transform: translateY(-2px) !important;
}

.btn--ghost,
.btn.btn--ghost {
  background: rgba(20, 75, 48, 0.5) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--bento-border) !important;
  color: var(--bento-text) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12) !important;
  border-radius: var(--bento-radius-xs) !important;
}
.btn--ghost:hover,
.btn.btn--ghost:hover {
  background: rgba(25, 85, 55, 0.65) !important;
  border-color: var(--bento-border-hover) !important;
}

.btn:not(.btn--ghost):not(.btn--accent):not(.btn--accent-outline):not(.btn-primary):not(.btn-secondary):not(.btn-gradient):not(.btn--danger):not(.btn--sm) {
  background: rgba(20, 75, 48, 0.55) !important;
  border: 1px solid var(--bento-border) !important;
  color: var(--bento-text) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12) !important;
  border-radius: var(--bento-radius-xs) !important;
}

.btn-primary,
.btn.btn-primary,
.btn-gradient,
.btn.btn-gradient {
  background: linear-gradient(135deg, var(--bento-pink), #c44a85) !important;
  border: 1px solid rgba(232,92,158,0.5) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(232,92,158,0.25) !important;
  border-radius: 999px !important;
}

/* Small buttons */
.btn--sm,
.btn.btn--sm {
  border-radius: var(--bento-radius-xs) !important;
  padding: 6px 14px !important;
  font-size: 0.85rem !important;
  min-height: 34px !important;
  height: auto !important;
}

/* ─── Inputs Refresh ─── */
.inp,
.form-control,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="tel"],
input[type="search"],
select,
textarea {
  border-radius: var(--bento-radius-xs) !important;
  transition: var(--bento-transition) !important;
}

.inp:focus,
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--bento-pink) !important;
  outline: 2px solid rgba(232,92,158,0.2) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(232,92,158,0.08) !important;
}

/* ─── Chips / Badges Refresh ─── */
.chip {
  background: rgba(232,92,158,0.1) !important;
  border: 1px solid rgba(232,92,158,0.25) !important;
  color: #f590c0 !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  padding: 5px 12px !important;
  backdrop-filter: blur(4px) !important;
}
.chip--ok {
  background: rgba(37,165,107,0.12) !important;
  border-color: rgba(37,165,107,0.3) !important;
  color: #5cd9a0 !important;
}
.chip--warn {
  background: rgba(245,158,11,0.12) !important;
  border-color: rgba(245,158,11,0.3) !important;
  color: #fbbf24 !important;
}
.chip--muted {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--bento-text-muted) !important;
}

.badge {
  background: linear-gradient(135deg, rgba(232,92,158,0.15), rgba(232,92,158,0.08)) !important;
  border: 1px solid rgba(232,92,158,0.3) !important;
  color: #f590c0 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(232,92,158,0.15) !important;
  padding: 6px 14px !important;
  font-size: 0.78rem !important;
}

/* ─── Sidebar Refresh ─── */
.sb {
  background: linear-gradient(180deg, rgba(8, 38, 24, 0.97), rgba(5, 25, 16, 0.98)) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  border-right: 1px solid rgba(55, 150, 100, 0.15) !important;
  box-shadow: 16px 0 60px rgba(0,0,0,0.4) !important;
}

.sb-header {
  color: var(--bento-text) !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.02em;
  padding: 18px 20px !important;
  border-bottom: 1px solid rgba(55, 150, 100, 0.12) !important;
}

.sb-nav {
  padding: 14px 12px !important;
  gap: 4px !important;
}

.sb-nav a {
  color: rgba(220, 255, 240, 0.8) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--bento-radius-xs) !important;
  padding: 11px 16px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  transition: var(--bento-transition) !important;
}

.sb-nav a:hover {
  background: rgba(37, 165, 107, 0.1) !important;
  border-color: rgba(55, 150, 100, 0.15) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}

.sb-nav a.is-active {
  background: linear-gradient(135deg, rgba(232,92,158,0.15), rgba(232,92,158,0.08)) !important;
  border-color: rgba(232,92,158,0.25) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(232,92,158,0.12) !important;
}

/* Sidebar group toggles */
.sb-group-toggle {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(220, 255, 240, 0.8) !important;
  border-radius: var(--bento-radius-xs) !important;
  padding: 11px 16px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  transition: var(--bento-transition) !important;
}

.sb-group-toggle:hover {
  background: rgba(37, 165, 107, 0.1) !important;
  border-color: rgba(55, 150, 100, 0.15) !important;
  color: #fff !important;
}

.sb-subnav {
  padding-left: 12px !important;
  margin-left: 8px !important;
  border-left: 2px solid rgba(55, 150, 100, 0.15) !important;
}

.sb-subnav a {
  font-size: 0.85rem !important;
  padding: 9px 14px !important;
  opacity: 0.85;
}

.sb-subnav a:hover {
  opacity: 1;
}

/* ─── Heading Enhancements ─── */
h1, h2, h3 {
  color: #fff !important;
  letter-spacing: -0.01em !important;
}

h2 {
  font-size: 1.35rem !important;
}

.section-title h3,
.card h3 {
  font-size: 1.05rem !important;
}

/* ─── Filters Bar Refresh ─── */
.filters-row,
.filters-grid,
.contratos__filters,
form.filters {
  background: rgba(15, 63, 41, 0.35) !important;
  border: 1px solid var(--bento-border) !important;
  border-radius: var(--bento-radius) !important;
  padding: 14px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.filters-row .inp,
.filters-grid .inp,
form.filters .inp {
  background: rgba(10, 45, 28, 0.6) !important;
  border: 1px solid var(--bento-border) !important;
  color: var(--bento-text) !important;
  border-radius: var(--bento-radius-xs) !important;
}

/* ─── Modal Refresh ─── */
.modal-overlay,
.fin-modal-overlay {
  background: rgba(2, 12, 8, 0.7) !important;
  backdrop-filter: blur(8px) !important;
}

.modal-card,
.fin-modal {
  background: rgba(12, 52, 34, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--bento-border) !important;
  border-radius: var(--bento-radius) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4) !important;
}

/* ─── Overlay (sidebar) ─── */
.sb-overlay.is-visible {
  background: rgba(2, 12, 8, 0.5) !important;
  backdrop-filter: blur(6px) !important;
}

/* ─── Dashboard two-col grid ─── */
.two-col-grid {
  gap: var(--bento-gap) !important;
}

/* ─── Page container spacing ─── */
.main-container {
  padding: 20px 16px !important;
  max-width: 1140px !important;
}

@media (min-width: 641px) {
  .main-container {
    padding: 28px 24px !important;
  }
}

/* ─── Finanzas Grid Stats ─── */
.fin-stat {
  background: var(--bento-surface) !important;
  backdrop-filter: var(--bento-glass) !important;
  border: 1px solid var(--bento-border) !important;
  border-radius: var(--bento-radius-sm) !important;
  transition: var(--bento-transition) !important;
}
.fin-stat:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--bento-shadow-hover) !important;
  border-color: var(--bento-border-hover) !important;
}

/* ─── Movimientos / Ingresos table ─── */
.mov-table,
.ingresos-table,
.nom-table,
.nom-hist-table {
  border-spacing: 0 6px !important;
  border-collapse: separate !important;
}

.mov-table th,
.ingresos-table th,
.nom-table th,
.nom-hist-table th {
  background: rgba(15, 63, 41, 0.4) !important;
  color: var(--bento-text-muted) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border: none !important;
}

.mov-table tbody tr,
.ingresos-table tbody tr,
.nom-table tbody tr {
  transition: var(--bento-transition) !important;
}

.mov-table tbody tr:hover,
.ingresos-table tbody tr:hover,
.nom-table tbody tr:hover {
  background: rgba(232, 92, 158, 0.06) !important;
}

/* ─── Quick Links Cards (finanzas sub-modules) ─── */
.card[style*="text-decoration:none"] {
  transition: var(--bento-transition) !important;
}

/* ─── Pagination ─── */
.mov-pagination button {
  border-radius: var(--bento-radius-xs) !important;
  border: 1px solid var(--bento-border) !important;
  background: var(--bento-surface) !important;
  color: var(--bento-text) !important;
  transition: var(--bento-transition) !important;
}
.mov-pagination button:hover:not(:disabled) {
  background: var(--bento-surface-hover) !important;
  border-color: var(--bento-border-hover) !important;
}

/* ─── Ingresos tabs ─── */
.ingresos-tab {
  border-radius: 999px !important;
  transition: var(--bento-transition) !important;
}
.ingresos-tab.active {
  background: linear-gradient(135deg, var(--bento-pink), #c44a85) !important;
  border-color: var(--bento-pink) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(232,92,158,0.2) !important;
}

/* ─── Calendar Day Enhancements ─── */
.card.cal-card .qcal .cal-day {
  border-radius: var(--bento-radius-sm) !important;
  transition: var(--bento-transition) !important;
}

/* ─── Presupuesto cards ─── */
.pres-bal-item,
.nom-bal-item {
  background: var(--bento-surface) !important;
  border: 1px solid var(--bento-border) !important;
  border-radius: var(--bento-radius-sm) !important;
  backdrop-filter: blur(8px) !important;
  transition: var(--bento-transition) !important;
}

.pres-project-card,
.pres-gasto-card {
  background: var(--bento-surface) !important;
  border: 1px solid var(--bento-border) !important;
  border-radius: var(--bento-radius-sm) !important;
  transition: var(--bento-transition) !important;
}

.pres-project-card:hover,
.pres-gasto-card:hover {
  border-color: var(--bento-border-hover) !important;
  transform: translateY(-1px);
}

.pres-progress-bar {
  background: rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
}

/* ─── Empty states ─── */
.empty-state {
  color: var(--bento-text-muted) !important;
}
.empty-state-icon {
  filter: grayscale(0.2) !important;
}

/* ─── Scrollbar styling ─── */
.mov-table-wrap::-webkit-scrollbar,
.ingresos-table-wrap::-webkit-scrollbar,
.nom-table-wrap::-webkit-scrollbar,
.hist-list::-webkit-scrollbar {
  width: 6px;
}

.mov-table-wrap::-webkit-scrollbar-track,
.ingresos-table-wrap::-webkit-scrollbar-track,
.nom-table-wrap::-webkit-scrollbar-track,
.hist-list::-webkit-scrollbar-track {
  background: transparent;
}

.mov-table-wrap::-webkit-scrollbar-thumb,
.ingresos-table-wrap::-webkit-scrollbar-thumb,
.nom-table-wrap::-webkit-scrollbar-thumb,
.hist-list::-webkit-scrollbar-thumb {
  background: rgba(55,150,100,0.25);
  border-radius: 999px;
}

.mov-table-wrap::-webkit-scrollbar-thumb:hover,
.ingresos-table-wrap::-webkit-scrollbar-thumb:hover,
.nom-table-wrap::-webkit-scrollbar-thumb:hover,
.hist-list::-webkit-scrollbar-thumb:hover {
  background: rgba(55,150,100,0.4);
}

/* ─── Smooth animations ─── */
@keyframes bentofadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.card {
  animation: bentofadeIn 0.3s ease-out !important;
}

/* Stagger animation for card children */
.card:nth-child(1) { animation-delay: 0s !important; }
.card:nth-child(2) { animation-delay: 0.05s !important; }
.card:nth-child(3) { animation-delay: 0.1s !important; }
.card:nth-child(4) { animation-delay: 0.15s !important; }
.card:nth-child(5) { animation-delay: 0.2s !important; }

/* ─── Dark Panel Cards ─── */
.card-panel,
.svc-container-card,
.pf-section {
  border-radius: var(--bento-radius) !important;
  border: 1px solid var(--bento-border) !important;
}

/* ─── Form groups in panels ─── */
.form-row,
.form-group,
.quick-form-row {
  gap: 14px !important;
}

/* ─── Categories chips ─── */
.cat-item {
  border-radius: var(--bento-radius-xs) !important;
  border: 1px solid var(--bento-border) !important;
  background: var(--bento-surface) !important;
  transition: var(--bento-transition) !important;
}
.cat-item:hover {
  border-color: var(--bento-border-hover) !important;
}

/* ─── Links general ─── */
a {
  transition: color 0.15s ease;
}

/* ─── Action buttons (movimientos row) ─── */
.mov-actions button,
.table-actions .btn {
  border-radius: 8px !important;
  transition: var(--bento-transition) !important;
}

.mov-actions button:hover {
  background: rgba(232,92,158,0.1) !important;
}

.mov-actions .btn-del:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
}

/* ─── Selection/accent color overrides ─── */
::selection {
  background: rgba(232, 92, 158, 0.3);
  color: #fff;
}

/* ─── Lobby specific cards ─── */
.lobby-card {
  border-radius: var(--bento-radius) !important;
  transition: var(--bento-transition) !important;
}

/* ─── Stepper (cotizador) ─── */
.stepper {
  border-radius: 0 0 var(--bento-radius) var(--bento-radius) !important;
  background: rgba(8, 38, 24, 0.9) !important;
  backdrop-filter: blur(12px) !important;
}

/* ─── FullCalendar harmonization ─── */
.fc .fc-toolbar-title {
  color: #fff !important;
}

/* ─── Search dropdown ─── */
.search-dropdown__list {
  border-radius: var(--bento-radius-sm) !important;
  border: 1px solid var(--bento-border) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3) !important;
  backdrop-filter: blur(12px) !important;
}

.search-dropdown__item:hover {
  background: rgba(232,92,158,0.08) !important;
}

/* ─── Responsive polish ─── */
@media (max-width: 640px) {
  :root {
    --bento-radius: 16px;
    --bento-radius-sm: 12px;
    --bento-gap: 12px;
  }

  .card {
    padding: 16px !important;
  }

  h2 {
    font-size: 1.15rem !important;
  }
}

/* ─── Print friendly (remove glass effects) ─── */
@media print {
  .card {
    backdrop-filter: none !important;
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
  }
}