@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&display=swap');

/* ================================================================
   MARKETING MODULE — Precision Studio v3
   ================================================================ */

/* ── Design Tokens ───────────────────────────────────────────── */
:root {
  --mk-font:     'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --mk-ink:      #0d0d0f;
  --mk-ink-2:    #1f2328;
  --mk-ink-3:    #374151;
  --mk-ink-4:    #6b7280;
  --mk-ink-5:    #9ca3af;
  --mk-ink-6:    #c8cdd6;

  --mk-canvas:   #ffffff;
  --mk-canvas-2: #f8fafc;
  --mk-canvas-3: #f1f5f9;

  --mk-line:     #e8ecf0;
  --mk-line-str: #d0d5dd;

  --mk-green:    #059669;
  --mk-green-bg: #ecfdf5;
  --mk-green-br: #a7f3d0;

  --mk-amber:    #d97706;
  --mk-amber-bg: #fffbeb;
  --mk-amber-br: #fcd34d;

  --mk-blue:     #2563eb;
  --mk-blue-bg:  #eff6ff;
  --mk-blue-br:  #bfdbfe;

  --mk-ind:      #4f46e5;
  --mk-ind-bg:   #eef2ff;
  --mk-ind-br:   #c7d2fe;

  /* Shadows — layered for depth */
  --sh-xs: 0 1px 2px rgba(13,13,15,.05);
  --sh-sm: 0 1px 3px rgba(13,13,15,.07), 0 2px 6px rgba(13,13,15,.04);
  --sh-md: 0 4px 8px rgba(13,13,15,.06), 0 12px 24px rgba(13,13,15,.04);
  --sh-lg: 0 8px 24px rgba(13,13,15,.08), 0 24px 48px rgba(13,13,15,.05);
  --sh-focus: 0 0 0 3px rgba(79,70,229,.18);

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* Transition */
  --t:    120ms cubic-bezier(.4,0,.2,1);
  --t-md: 200ms cubic-bezier(.4,0,.2,1);
}

/* ── Font scope ──────────────────────────────────────────────── */
.mk-head, .mk-page-hdr, .mk-kpi, .mk-status-banner,
.mk-seq-card, .mk-settings-card, .mk-step-card,
.mk-tpl-list, .mk-tpl-row, .mk-seq-overview,
.mk-add-step, .mk-wizard-step, .mk-empty,
.mk-segmented, .mk-filter-bar, .mk-sub-header {
  font-family: var(--mk-font);
}

/* ── Live pulse animation ─────────────────────────────────────── */
@keyframes mk-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(5,150,105,.5) }
  70%  { box-shadow: 0 0 0 6px rgba(5,150,105,0) }
  100% { box-shadow: 0 0 0 0 rgba(5,150,105,0) }
}
@keyframes mk-fade-up {
  from { opacity: 0; transform: translateY(6px) }
  to   { opacity: 1; transform: translateY(0)   }
}
@keyframes mk-count-in {
  from { opacity: 0; transform: scale(.85) }
  to   { opacity: 1; transform: scale(1)   }
}

/* ── Segmented Nav ────────────────────────────────────────────── */
.mk-head {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  position: relative;
  z-index: 5;
}

.mk-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mk-font);
  font-weight: 700;
  font-size: 19px;
  color: var(--mk-ink);
  letter-spacing: -.02em;
}

.mk-title-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--mk-ink);
  color: #fff;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--sh-sm);
}

/* macOS-style segmented control */
.mk-segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--mk-canvas-3);
  border: 1px solid var(--mk-line);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}
.mk-segmented::-webkit-scrollbar { display: none }

.mk-segmented .seg-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 9px;
  color: var(--mk-ink-4);
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  transition: all var(--t);
  position: relative;
}
.mk-segmented .seg-item i { font-size: 13px; opacity: .75 }

.mk-segmented .seg-item .count {
  margin-left: 1px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(0,0,0,.06);
  color: var(--mk-ink-4);
  border: none;
  min-width: 18px;
  text-align: center;
}
.mk-segmented .seg-item .count-pair {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 2px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(0,0,0,.06);
  color: var(--mk-ink-4);
}
.mk-segmented .seg-item .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.mk-segmented .seg-item .dot.warn { background: var(--mk-amber) }
.mk-segmented .seg-item .dot.ok   { background: var(--mk-green) }

.mk-segmented .seg-item:hover {
  color: var(--mk-ink-2);
  background: rgba(255,255,255,.6);
}
/* Active: white pill raised above the gray track */
.mk-segmented .seg-item.active {
  background: var(--mk-canvas);
  color: var(--mk-ink);
  border-color: var(--mk-line);
  box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.07);
  font-weight: 600;
}
.mk-segmented .seg-item.active i { opacity: 1 }
.mk-segmented .seg-item.active .count,
.mk-segmented .seg-item.active .count-pair {
  background: var(--mk-canvas-3);
  color: var(--mk-ink-3);
}

/* ── Page header ──────────────────────────────────────────────── */
.mk-page-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.mk-page-hdr h1, .mk-page-hdr h2 {
  margin: 0 0 4px;
  font-family: var(--mk-font);
  font-weight: 700;
  font-size: 21px;
  color: var(--mk-ink);
  line-height: 1.25;
  letter-spacing: -.025em;
}
.mk-page-hdr p {
  margin: 0;
  font-size: 13.5px;
  color: var(--mk-ink-4);
  font-weight: 400;
}
.mk-breadcrumb {
  font-size: 12px;
  color: var(--mk-ink-5);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  letter-spacing: .01em;
}
.mk-breadcrumb a { color: var(--mk-ink-4); text-decoration: none; transition: color var(--t) }
.mk-breadcrumb a:hover { color: var(--mk-ink) }

/* ── KPI Cards ────────────────────────────────────────────────── */
.mk-kpi {
  background: var(--mk-canvas);
  border: 1px solid var(--mk-line);
  border-radius: var(--r-lg);
  padding: 22px 22px 18px;
  box-shadow: var(--sh-sm);
  height: 100%;
  transition: box-shadow var(--t-md), transform var(--t-md);
  position: relative;
  overflow: hidden;
}
.mk-kpi:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
}
/* Subtle decorative corner gradient */
.mk-kpi::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  border-radius: 0 var(--r-lg) 0 50%;
  opacity: .04;
  transition: opacity var(--t-md);
  pointer-events: none;
}
.mk-kpi:hover::after { opacity: .07 }

.mk-kpi__icon {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.mk-kpi__icon.indigo { background: var(--mk-ind-bg);   color: var(--mk-ind) }
.mk-kpi__icon.green  { background: var(--mk-green-bg); color: var(--mk-green) }
.mk-kpi__icon.amber  { background: var(--mk-amber-bg); color: var(--mk-amber) }
.mk-kpi__icon.blue   { background: var(--mk-blue-bg);  color: var(--mk-blue) }
.mk-kpi__icon.slate  { background: var(--mk-canvas-3); color: var(--mk-ink-3) }

.mk-kpi__num {
  font-family: var(--mk-font);
  font-size: 40px;
  font-weight: 800;
  color: var(--mk-ink);
  line-height: 1;
  letter-spacing: -1.5px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  animation: mk-count-in .3s ease both;
}
.mk-kpi__num-sub {
  font-size: 18px;
  font-weight: 500;
  color: var(--mk-ink-5);
  letter-spacing: -.5px;
}
.mk-kpi__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mk-ink-4);
  font-weight: 600;
  margin-top: 6px;
}
.mk-kpi__sub { font-size: 12px; color: var(--mk-ink-5); margin-top: 2px }

/* Colored KPI corner gradients */
.mk-kpi:has(.mk-kpi__icon.green)::after  { background: radial-gradient(circle, #10b981 0%, transparent 70%) }
.mk-kpi:has(.mk-kpi__icon.amber)::after  { background: radial-gradient(circle, #f59e0b 0%, transparent 70%) }
.mk-kpi:has(.mk-kpi__icon.blue)::after   { background: radial-gradient(circle, #3b82f6 0%, transparent 70%) }
.mk-kpi:has(.mk-kpi__icon.indigo)::after { background: radial-gradient(circle, #6366f1 0%, transparent 70%) }

/* Legacy */
.kpi-card .kpi { font-weight: 800; font-size: 28px; line-height: 1 }
.kpi-note { font-size: 12px; color: var(--mk-ink-4) }

/* ── Progress bars ────────────────────────────────────────────── */
.mk-progress {
  height: 4px;
  background: var(--mk-canvas-3);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 14px;
}
.mk-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, #059669, #34d399);
  border-radius: 999px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.progress-mini { height: 5px; background: var(--mk-canvas-3); border-radius: 999px; overflow: hidden }
.progress-mini > span { display: block; height: 100%; background: var(--mk-green) }

/* ── Status badges ────────────────────────────────────────────── */
.mk-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: .01em;
}
.mk-status::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mk-status.sent      { background: var(--mk-green-bg); color: #065f46; border: 1px solid var(--mk-green-br) }
.mk-status.sent::before    { background: var(--mk-green) }
.mk-status.scheduled { background: var(--mk-amber-bg); color: #78350f; border: 1px solid var(--mk-amber-br) }
.mk-status.scheduled::before { background: var(--mk-amber) }
.mk-status.active    { background: var(--mk-green-bg); color: #065f46; border: 1px solid var(--mk-green-br) }
.mk-status.active::before  { background: var(--mk-green); animation: mk-pulse 2.5s infinite }
.mk-status.inactive  { background: var(--mk-canvas-3); color: var(--mk-ink-4); border: 1px solid var(--mk-line) }
.mk-status.inactive::before { background: var(--mk-ink-6) }

.mk-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
}
.mk-pill.gray   { background: var(--mk-canvas-3); color: var(--mk-ink-3); border: 1px solid var(--mk-line) }
.mk-pill.green  { background: var(--mk-green-bg); color: #065f46; border: 1px solid var(--mk-green-br) }
.mk-pill.amber  { background: var(--mk-amber-bg); color: #78350f; border: 1px solid var(--mk-amber-br) }
.mk-pill.red    { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca }
.mk-pill.blue   { background: var(--mk-blue-bg);  color: #1e40af; border: 1px solid var(--mk-blue-br) }
.mk-pill.indigo { background: var(--mk-ind-bg);   color: #3730a3; border: 1px solid var(--mk-ind-br) }

/* Trigger pills */
.mk-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: .01em;
}
.mk-trigger.lead_created        { background: var(--mk-ind-bg); color: #4338ca; border: 1px solid var(--mk-ind-br) }
.mk-trigger.project_created     { background: var(--mk-blue-bg); color: #1d4ed8; border: 1px solid var(--mk-blue-br) }
.mk-trigger.files_first_upload  { background: var(--mk-green-bg); color: #166534; border: 1px solid var(--mk-green-br) }

/* Legacy */
.badge-soft { padding: .25rem .55rem; border-radius: 999px; font-size: 11px; font-weight: 600 }
.badge-soft.green  { background: var(--mk-green-bg); color: #065f46 }
.badge-soft.gray   { background: var(--mk-canvas-3); color: var(--mk-ink-3) }
.badge-soft.orange { background: var(--mk-amber-bg); color: #78350f }
.badge-soft.red    { background: #fef2f2; color: #991b1b }

/* ── Section header ───────────────────────────────────────────── */
.mk-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mk-section-hdr h2 {
  font-family: var(--mk-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--mk-ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  letter-spacing: -.01em;
}
.mk-section-hdr h2 i { color: var(--mk-ink-5); font-size: 14px }

/* ── Status dot ───────────────────────────────────────────────── */
.mk-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  position: relative;
}
.mk-dot.on  {
  background: var(--mk-green);
  animation: mk-pulse 2.5s ease-in-out infinite;
}
.mk-dot.off { background: var(--mk-ink-6) }

/* ── Status banner (dashboard) ────────────────────────────────── */
.mk-status-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  margin-bottom: 28px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  animation: mk-fade-up .3s ease both;
}
/* SVG noise texture overlay for depth */
.mk-status-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: .025;
  pointer-events: none;
}
.mk-status-banner.active {
  background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 60%, #f0fdf4 100%);
  border: 1px solid var(--mk-green-br);
  box-shadow: 0 1px 3px rgba(5,150,105,.08), 0 0 0 1px rgba(5,150,105,.05);
}
.mk-status-banner.paused {
  background: linear-gradient(135deg, #fef9c3 0%, #fffbeb 60%, #fefce8 100%);
  border: 1px solid var(--mk-amber-br);
  box-shadow: 0 1px 3px rgba(217,119,6,.08);
}
.mk-status-banner.setup {
  background: linear-gradient(135deg, #e0e7ff 0%, #eef2ff 60%, #f0f4ff 100%);
  border: 1px solid var(--mk-ind-br);
  box-shadow: 0 1px 3px rgba(79,70,229,.08);
}
.mk-status-banner__icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mk-status-banner.active  .mk-status-banner__icon { background: rgba(5,150,105,.12); color: #059669 }
.mk-status-banner.paused  .mk-status-banner__icon { background: rgba(217,119,6,.12); color: #d97706 }
.mk-status-banner.setup   .mk-status-banner__icon { background: rgba(79,70,229,.12); color: #4f46e5 }
.mk-status-banner__body {
  flex: 1; min-width: 0;
}
.mk-status-banner__body strong {
  display: block;
  font-family: var(--mk-font);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mk-ink);
  margin-bottom: 2px;
  letter-spacing: -.01em;
}
.mk-status-banner__body span {
  font-size: 12.5px;
  color: var(--mk-ink-3);
}
.mk-status-banner.active  .mk-status-banner__body span { color: #065f46 }
.mk-status-banner.paused  .mk-status-banner__body span { color: #78350f }
.mk-status-banner.setup   .mk-status-banner__body span { color: #3730a3 }
.mk-status-banner__actions { flex-shrink: 0; position: relative; z-index: 1 }

/* ── Sequence cards (index) ───────────────────────────────────── */
.mk-seq-card {
  background: var(--mk-canvas);
  border: 1px solid var(--mk-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: border-color var(--t-md), box-shadow var(--t-md), transform var(--t-md);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mk-seq-card:hover {
  border-color: var(--mk-ind-br);
  box-shadow: 0 0 0 1px var(--mk-ind-br), var(--sh-md);
  transform: translateY(-2px);
}
.mk-seq-card.inactive {
  opacity: .6;
  filter: saturate(.6);
}
.mk-seq-card__head {
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--mk-line);
}
.mk-seq-card__name {
  font-family: var(--mk-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--mk-ink);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  letter-spacing: -.02em;
  line-height: 1.3;
}
.mk-seq-card__meta {
  font-size: 12px;
  color: var(--mk-ink-5);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mk-seq-card__meta code {
  background: var(--mk-canvas-3);
  border: 1px solid var(--mk-line);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 10.5px;
  color: var(--mk-ink-3);
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  letter-spacing: .02em;
}
.mk-seq-card__steps {
  padding: 14px 20px;
  flex: 1;
}
.mk-seq-step-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--mk-ink-4);
  padding: 3px 0;
  line-height: 1.5;
}
.mk-seq-step-row .step-name { color: var(--mk-ink-3); font-weight: 500 }
.mk-seq-more {
  font-size: 11.5px;
  color: var(--mk-ink-5);
  margin-top: 6px;
  font-style: italic;
}
.mk-seq-card__foot {
  padding: 12px 16px;
  border-top: 1px solid var(--mk-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--mk-canvas-2);
}

/* ── Settings card ────────────────────────────────────────────── */
.mk-settings-card {
  background: var(--mk-canvas);
  border: 1px solid var(--mk-line);
  border-radius: var(--r-lg);
  padding: 22px 26px;
  margin-bottom: 28px;
  box-shadow: var(--sh-sm);
  font-family: var(--mk-font);
}
/* When filling equal-height grid cells, remove bottom margin */
.mk-settings-card.h-100 {
  margin-bottom: 0;
}

/* ── Toggle switch ────────────────────────────────────────────── */
.mk-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.mk-toggle input[type=checkbox] { display: none !important }
.mk-toggle-track {
  width: 36px; height: 20px;
  background: var(--mk-line-str);
  border-radius: 999px;
  position: relative;
  transition: background var(--t);
  flex-shrink: 0;
}
.mk-toggle-track::after {
  content: '';
  position: absolute;
  left: 2px; top: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform var(--t);
}
.mk-toggle input[type=checkbox]:checked + .mk-toggle-track {
  background: var(--mk-ink);
}
.mk-toggle input[type=checkbox]:checked + .mk-toggle-track::after {
  transform: translateX(16px);
}
.mk-toggle-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--mk-ink-3);
  letter-spacing: -.01em;
}

/* ── Timeline step builder ────────────────────────────────────── */
.mk-timeline { position: relative }

.mk-step-wrap {
  display: flex;
  gap: 0;
  align-items: stretch;
}
.mk-step-wrap.inactive .mk-step-dot { background: var(--mk-canvas-3); color: var(--mk-ink-5); box-shadow: none }
.mk-step-wrap.inactive .mk-step-card { opacity: .6 }

.mk-step-spine {
  width: 52px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 11px;
}
.mk-step-dot {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--mk-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(13,13,15,.2);
  z-index: 1;
  font-family: var(--mk-font);
}
.mk-step-seg {
  flex: 1;
  width: 2px;
  background: linear-gradient(to bottom, var(--mk-line), var(--mk-line-str));
  min-height: 14px;
  margin-top: 4px;
}

.mk-step-card {
  flex: 1;
  background: var(--mk-canvas);
  border: 1px solid var(--mk-line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-xs);
  margin-bottom: 10px;
  min-width: 0;
  transition: box-shadow var(--t-md), border-color var(--t);
}
.mk-step-card:hover { box-shadow: var(--sh-sm); border-color: var(--mk-line-str) }
.mk-step-card__head {
  padding: 11px 16px;
  background: var(--mk-canvas-2);
  border-bottom: 1px solid var(--mk-line);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mk-step-timing {
  font-family: var(--mk-font);
  font-size: 13px;
  font-weight: 700;
  color: var(--mk-ink);
  white-space: nowrap;
  letter-spacing: -.01em;
}
.mk-step-tpl {
  font-size: 13px;
  color: var(--mk-ink-3);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-step-tpl code {
  font-size: 10.5px;
  color: var(--mk-ink-5);
  background: var(--mk-canvas-3);
  border: 1px solid var(--mk-line);
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 5px;
  font-family: 'SFMono-Regular', monospace;
  white-space: nowrap;
}
.mk-step-card__body {
  padding: 14px 16px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.mk-step-del {
  color: #ef4444;
  font-size: 14px;
  text-decoration: none;
  padding: 5px 7px;
  border-radius: 6px;
  transition: background var(--t);
  flex-shrink: 0;
}
.mk-step-del:hover { background: #fee2e2; color: #dc2626 }

/* Gap label between steps */
.mk-step-gap-wrap {
  display: flex;
  align-items: stretch;
  margin-bottom: 0;
}
.mk-step-gap-spine {
  width: 52px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}
.mk-step-gap-line {
  width: 2px;
  background: linear-gradient(to bottom, var(--mk-line), var(--mk-line-str));
  min-height: 24px;
}
.mk-step-gap-label {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 11px;
  color: var(--mk-ink-5);
  padding: 4px 8px;
  gap: 6px;
  letter-spacing: .01em;
  text-transform: uppercase;
  font-weight: 600;
}
.mk-step-gap-label::before {
  content: '↓';
  color: var(--mk-ink-6);
  font-size: 11px;
}

/* Add step card */
.mk-add-step {
  background: var(--mk-canvas);
  border: 1.5px dashed var(--mk-line-str);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  margin-top: 16px;
  transition: border-color var(--t-md), box-shadow var(--t-md);
}
.mk-add-step:hover {
  border-color: var(--mk-ind-br);
  box-shadow: 0 0 0 3px rgba(79,70,229,.06);
}
.mk-add-step__title {
  font-family: var(--mk-font);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mk-ink-3);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -.01em;
}
.mk-add-step__title i { color: var(--mk-ind); font-size: 15px }

/* ── Empty state ──────────────────────────────────────────────── */
.mk-empty {
  text-align: center;
  padding: 52px 24px;
}
.mk-empty i {
  font-size: 36px;
  display: block;
  margin-bottom: 16px;
  color: var(--mk-ink-6);
}
.mk-empty p {
  font-size: 13.5px;
  color: var(--mk-ink-4);
  margin: 0;
  line-height: 1.75;
}

/* ── Template list (index) ────────────────────────────────────── */
.mk-tpl-list {
  background: var(--mk-canvas);
  border: 1px solid var(--mk-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.mk-tpl-list__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--mk-canvas-2);
  border-bottom: 1px solid var(--mk-line);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--mk-ink-5);
}
.mk-tpl-list__col-status  { width: 100px; flex-shrink: 0; text-align: center }
.mk-tpl-list__col-actions { width: 190px; flex-shrink: 0 }

.mk-tpl-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--mk-line);
  transition: background var(--t);
  position: relative;
}
.mk-tpl-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--mk-ind);
  opacity: 0;
  border-radius: 0 3px 3px 0;
  transition: opacity var(--t);
}
.mk-tpl-row:last-child { border-bottom: none }
.mk-tpl-row:hover { background: var(--mk-canvas-2) }
.mk-tpl-row:hover::before { opacity: 1 }
.mk-tpl-row--off { opacity: .55 }
.mk-tpl-row--off:hover { opacity: .75 }

.mk-tpl-row__dot { flex-shrink: 0; display: flex; align-items: center }
.mk-tpl-row__body { flex: 1; min-width: 0 }
.mk-tpl-row__name {
  font-family: var(--mk-font);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mk-ink);
  margin-bottom: 4px;
  letter-spacing: -.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-tpl-row__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mk-tpl-row__key {
  font-size: 10.5px;
  background: var(--mk-canvas-3);
  border: 1px solid var(--mk-line);
  color: var(--mk-ink-4);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  letter-spacing: .03em;
  white-space: nowrap;
}
.mk-tpl-row__subject {
  font-size: 12px;
  color: var(--mk-ink-5);
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.mk-tpl-row__subject span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.mk-tpl-row__updated {
  font-size: 11px;
  color: var(--mk-ink-6);
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.mk-tpl-row__status  { width: 100px; flex-shrink: 0; text-align: center }
.mk-tpl-row__actions {
  width: 190px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

/* ── Template cards (legacy, kept for backward compat) ───────── */
.mk-tpl-card {
  background: var(--mk-canvas);
  border: 1px solid var(--mk-line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color var(--t-md), box-shadow var(--t-md), transform var(--t-md);
}
.mk-tpl-card:hover {
  border-color: var(--mk-ind-br);
  box-shadow: 0 0 0 1px var(--mk-ind-br), var(--sh-md);
  transform: translateY(-1px);
}
.mk-tpl-card.disabled { opacity: .5 }
.mk-tpl-card__head { padding: 16px 18px 12px; border-bottom: 1px solid var(--mk-line) }
.mk-tpl-card__name {
  font-size: 14px; font-weight: 700; color: var(--mk-ink); margin: 0 0 6px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  letter-spacing: -.015em;
}
.mk-tpl-card__key {
  font-family: 'SFMono-Regular', monospace; font-size: 10.5px;
  background: var(--mk-canvas-3); border: 1px solid var(--mk-line);
  color: var(--mk-ink-4); padding: 2px 6px; border-radius: 4px; display: inline-block;
}
.mk-tpl-card__subject { font-size: 12px; color: var(--mk-ink-4); margin-top: 8px; display: flex; align-items: flex-start; gap: 5px }
.mk-tpl-card__subject i { flex-shrink: 0; margin-top: 1px; color: var(--mk-ink-5) }
.mk-tpl-card__foot {
  padding: 10px 14px; border-top: 1px solid var(--mk-line);
  background: var(--mk-canvas-2); display: flex;
  align-items: center; justify-content: space-between; gap: 6px; margin-top: auto;
}
.preview-box {
  border: 1px solid var(--mk-line); border-radius: var(--r-sm);
  padding: 12px; background: var(--mk-canvas); font-size: 12px;
  max-height: 200px; overflow-y: auto;
}

/* ── Filter bar (sends) ───────────────────────────────────────── */
.mk-filter-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.mk-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--mk-ink-3);
  background: var(--mk-canvas);
  border: 1px solid var(--mk-line);
  text-decoration: none;
  transition: all var(--t);
  cursor: pointer;
  letter-spacing: -.01em;
}
.mk-filter-btn:hover { border-color: var(--mk-line-str); background: var(--mk-canvas-2); color: var(--mk-ink) }
.mk-filter-btn.active     { background: var(--mk-ink); color: #fff; border-color: var(--mk-ink) }
.mk-filter-btn.active-warn{
  background: var(--mk-amber-bg); color: #78350f;
  border-color: var(--mk-amber-br); font-weight: 600;
}
.mk-filter-btn.active-ok  {
  background: var(--mk-green-bg); color: #065f46;
  border-color: var(--mk-green-br); font-weight: 600;
}

/* ── Table improvements ───────────────────────────────────────── */
.mk-table { font-size: 13px; font-family: var(--mk-font) }
.mk-table th {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--mk-ink-5);
  padding-top: 11px;
  padding-bottom: 11px;
  white-space: nowrap;
  background: var(--mk-canvas-2);
  border-bottom: 1px solid var(--mk-line);
}
.mk-table td { vertical-align: middle; color: var(--mk-ink-3); padding-top: 11px; padding-bottom: 11px }
.mk-table tbody tr {
  transition: background var(--t);
  position: relative;
}
.mk-table tbody tr:hover td { background: var(--mk-canvas-2) }
.mk-table tbody tr:hover td:first-child { border-left: 2px solid var(--mk-ind) }

/* ── Subscriber search ────────────────────────────────────────── */
.mk-sub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.mk-sub-search {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1;
  max-width: 400px;
}

/* ── Detail card (send show) ──────────────────────────────────── */
.mk-detail-row {
  display: flex;
  gap: 8px;
  padding: 13px 0;
  border-bottom: 1px solid var(--mk-line);
  font-size: 13.5px;
}
.mk-detail-row:last-child { border-bottom: none }
.mk-detail-label {
  font-weight: 600;
  color: var(--mk-ink-4);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  min-width: 130px;
  flex-shrink: 0;
  padding-top: 2px;
}
.mk-detail-value { color: var(--mk-ink) }

/* ── Sticky save bar (template editor) ───────────────────────── */
.sticky-actions {
  position: sticky;
  bottom: 0;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  padding: 12px 24px;
  border-top: 1px solid var(--mk-line);
  z-index: 10;
}

/* ── Preset cards (sequence new) ─────────────────────────────── */
.mk-preset-card {
  border: 1.5px solid var(--mk-line);
  border-radius: var(--r-md);
  padding: 18px 16px;
  cursor: pointer;
  transition: all var(--t-md);
  background: var(--mk-canvas);
  text-align: center;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.mk-preset-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--mk-ind-bg), transparent);
  opacity: 0;
  transition: opacity var(--t-md);
  pointer-events: none;
}
.mk-preset-card:hover {
  border-color: var(--mk-ind-br);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.mk-preset-card:hover::after { opacity: 1 }
.mk-preset-card.selected {
  border-color: var(--mk-ink);
  box-shadow: 0 0 0 3px rgba(13,13,15,.06), var(--sh-sm);
}
.mk-preset-card.selected::after { background: linear-gradient(135deg, var(--mk-canvas-3), transparent); opacity: 1 }
.mk-preset-card input[type=radio] { display: none }
.mk-preset-card__icon {
  font-size: 26px;
  margin-bottom: 10px;
  line-height: 1;
  display: block;
  position: relative;
  z-index: 1;
}
.mk-preset-card__title {
  font-family: var(--mk-font);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mk-ink);
  margin-bottom: 5px;
  letter-spacing: -.015em;
  position: relative; z-index: 1;
}
.mk-preset-card__desc {
  font-size: 12px;
  color: var(--mk-ink-4);
  line-height: 1.55;
  position: relative; z-index: 1;
}

/* ── Wizard steps (new sequence) ─────────────────────────────── */
.mk-wizard-step {
  background: var(--mk-canvas-2);
  border: 1px solid var(--mk-line);
  border-radius: var(--r-md);
  padding: 20px 24px;
}
.mk-wizard-step__label {
  font-family: var(--mk-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--mk-ink);
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -.015em;
}
.mk-wizard-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--mk-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Step builder (add step form in edit) ────────────────────── */
.mk-step-builder {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.mk-step-builder__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mk-step-builder__label {
  font-family: var(--mk-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--mk-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  cursor: default;
  letter-spacing: -.01em;
}
.mk-field-badge {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--mk-ink);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mk-step-builder__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--mk-line);
}

/* ── Day preset buttons ───────────────────────────────────────── */
.mk-days-picker { display: flex; flex-direction: column; gap: 0 }
.mk-days-presets { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px }
.mk-day-btn {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--mk-line);
  background: var(--mk-canvas);
  color: var(--mk-ink-3);
  cursor: pointer;
  transition: all var(--t);
  line-height: 1.4;
  letter-spacing: -.01em;
}
.mk-day-btn:hover { border-color: var(--mk-ind-br); color: var(--mk-ind); background: var(--mk-ind-bg) }
.mk-day-btn.active { background: var(--mk-ink); color: #fff; border-color: var(--mk-ink); font-weight: 600 }
.mk-day-btn:focus { outline: none; box-shadow: var(--sh-focus) }

/* ── Sequence overview (dashboard panel) ─────────────────────── */
.mk-seq-overview { padding: 4px 0 }
.mk-seq-overview-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--mk-line);
  text-decoration: none;
  transition: background var(--t);
  cursor: pointer;
  position: relative;
}
.mk-seq-overview-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--mk-ind);
  opacity: 0;
  border-radius: 0 3px 3px 0;
  transition: opacity var(--t);
}
.mk-seq-overview-row:last-child { border-bottom: none }
.mk-seq-overview-row:hover { background: var(--mk-canvas-2) }
.mk-seq-overview-row:hover::before { opacity: 1 }
.mk-seq-overview-row.inactive { opacity: .58 }
.mk-seq-overview-row__dot { flex-shrink: 0 }
.mk-seq-overview-row__body { flex: 1; min-width: 0 }
.mk-seq-overview-row__name {
  font-family: var(--mk-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--mk-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.015em;
}
.mk-seq-overview-row__meta {
  font-size: 11px;
  color: var(--mk-ink-5);
  display: flex;
  gap: 8px;
  margin-top: 2px;
  letter-spacing: .01em;
}
.mk-seq-overview-row__meta .text-success { font-size: 11px; color: #059669 !important }
.mk-seq-overview-row__status { flex-shrink: 0 }

/* ── Section label ────────────────────────────────────────────── */
.mk-section-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mk-ink-5);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}
.mk-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--mk-line);
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 992px) {
  .mk-title { font-size: 17px }
  .mk-segmented { width: 100%; overflow-x: auto }
  .mk-settings-card { padding: 18px }
  .mk-step-builder { grid-template-columns: 1fr 1fr }
  .mk-tpl-list__col-status { display: none }
  .mk-tpl-row__status { display: none }
  .mk-tpl-row__updated { display: none }
}
@media (max-width: 768px) {
  .mk-step-card__body { flex-direction: column; align-items: stretch }
  .mk-step-card__body .ms-auto { margin-left: 0 !important }
  .mk-seq-card__foot { flex-wrap: wrap }
  .mk-add-step { padding: 18px }
  .mk-page-hdr { flex-direction: column; align-items: flex-start }
  .mk-step-builder { grid-template-columns: 1fr }
  .mk-wizard-step { padding: 16px }
  .mk-status-banner { flex-direction: column; align-items: flex-start; gap: 10px }
  .mk-tpl-list__header { display: none }
  .mk-tpl-row { flex-wrap: wrap }
  .mk-tpl-row__actions { width: 100%; justify-content: flex-start }
}
@media (max-width: 576px) {
  .mk-kpi__num { font-size: 32px }
  .mk-step-spine { width: 42px }
  .mk-step-gap-spine { width: 42px }
  .mk-step-builder__footer { flex-direction: column; align-items: stretch }
  .mk-step-builder__footer .btn { width: 100% }
  .mk-tpl-row__subject { display: none }
  .mk-head { flex-direction: column; align-items: flex-start; gap: 12px }
  .mk-segmented { width: 100% }
}

/* ── Salvia palette bridge (admin-app context) ───────────────
   Remaps mk-* design tokens to sv-* so every marketing card,
   banner, KPI, and table automatically inherits the warm palette.
   ──────────────────────────────────────────────────────────── */
.admin-app {
  --mk-canvas:    var(--sv-card);
  --mk-canvas-2:  var(--sv-bg-1);
  --mk-canvas-3:  var(--sv-bg-2);
  --mk-line:      var(--sv-line);
  --mk-line-str:  var(--sv-line-2);
  --mk-ink:       var(--sv-text);
  --mk-ink-2:     var(--sv-text);
  --mk-ink-3:     var(--sv-muted);
  --mk-ink-4:     var(--sv-muted);
  --mk-ink-5:     var(--sv-faint);
  --mk-ink-6:     var(--sv-line-2);
  --mk-font:      var(--sv-body);
  --mk-green:     var(--sv-act-ver);
  --mk-green-bg:  rgba(85,112,97,.12);
  --mk-green-br:  rgba(85,112,97,.28);
  --mk-amber:     var(--sv-act-clas);
  --mk-amber-bg:  rgba(138,123,83,.12);
  --mk-amber-br:  rgba(138,123,83,.28);
  --sh-xs:        0 1px 2px rgba(74,52,38,.04);
  --sh-sm:        var(--pg-shadow-sm);
  --sh-md:        0 4px 16px rgba(74,52,38,.1), 0 12px 32px rgba(74,52,38,.06);
}
/* ═══════════════════════════════════════════════════════════════════════════
   PICTORIAL - Admin Project Dashboard Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* Header */
.project-dashboard__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5e7eb;
}

.project-dashboard__breadcrumb {
  margin-bottom: 8px;
}

.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #6b7280;
  text-decoration: none;
}

.breadcrumb-link:hover {
  color: #111827;
}

.project-dashboard__title {
  font-size: 32px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px;
  line-height: 1.2;
}

.project-dashboard__description {
  font-size: 15px;
  color: #6b7280;
  margin: 0;
}

/* Stats Cards */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.stat-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #f3f4f6;
  color: #6b7280;
}

.stat-card__icon--primary { background: #dbeafe; color: #2563eb; }
.stat-card__icon--info { background: #e0e7ff; color: #4f46e5; }
.stat-card__icon--secondary { background: #f3e8ff; color: #7c3aed; }
.stat-card__icon--success { background: #d1fae5; color: #059669; }
.stat-card__icon--warning { background: #fef3c7; color: #d97706; }

.stat-card__value {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  line-height: 1;
}

.stat-card__value--success { color: #059669; font-size: 18px; }
.stat-card__value--warning { color: #d97706; font-size: 18px; }

.stat-card__label {
  display: block;
  font-size: 13px;
  color: #6b7280;
  margin-top: 4px;
}

/* Dashboard Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  margin-bottom: 40px;
}

/* Dashboard Cards */
.dashboard-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}

.dashboard-card--compact {
  margin-bottom: 16px;
}

.dashboard-card--danger {
  border: 1px solid #fecaca;
}

.dashboard-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #f3f4f6;
}

.dashboard-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.dashboard-card__title svg {
  color: #6b7280;
}

.dashboard-card__action {
  font-size: 14px;
  color: #3b82f6;
  text-decoration: none;
}

.dashboard-card__action:hover {
  text-decoration: underline;
}

.dashboard-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #6366f1;
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

.dashboard-card__body {
  padding: 20px 24px;
}

/* Info Grid */
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item__label {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-item__value {
  font-size: 15px;
  color: #111827;
  font-weight: 500;
}

.info-item__value--highlight {
  color: #059669;
  font-weight: 700;
}

/* Gallery Preview */
.gallery-preview {
  margin-bottom: 16px;
}

.gallery-preview__stats {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 12px;
}

.gallery-preview__actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.gallery-btn {
  margin-top: 8px;
}

.empty-gallery {
  text-align: center;
  padding: 32px 0;
}

.empty-gallery svg {
  color: #d1d5db;
  margin-bottom: 16px;
}

.empty-gallery p {
  color: #6b7280;
  margin-bottom: 16px;
}

/* Contract Status */
.contract-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f3f4f6;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 12px;
}

.contract-status--success {
  background: #d1fae5;
  color: #059669;
}

.contract-status--warning {
  background: #fef3c7;
  color: #d97706;
}

.contract-client {
  font-size: 14px;
  color: #374151;
  margin-bottom: 12px;
}

/* User List */
.user-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.user-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
}

.user-list__item:last-child {
  border-bottom: none;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}

.user-email {
  display: block;
  font-size: 12px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Gallery Section */
.gallery-section {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #e5e7eb;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.btn--sm { padding: 8px 14px; font-size: 13px; }
.btn--lg { padding: 14px 24px; font-size: 15px; }
.btn--block { width: 100%; }

.btn--primary {
  background: #111827;
  color: white;
}
.btn--primary:hover {
  background: #1f2937;
  color: white;
}

.btn--secondary {
  background: #f3f4f6;
  color: #374151;
}
.btn--secondary:hover {
  background: #e5e7eb;
}

.btn--warning {
  background: #fef3c7;
  color: #92400e;
}
.btn--warning:hover {
  background: #fde68a;
}

.btn--danger {
  background: #fef2f2;
  color: #dc2626;
}
.btn--danger:hover {
  background: #fee2e2;
}

/* Modal */
.modal {
  border: none;
  border-radius: 16px;
  padding: 0;
  max-width: 480px;
  width: calc(100% - 32px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.modal__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.modal__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111827;
  color: white;
  border-radius: 10px;
}

.modal__title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.modal__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: #6b7280;
  border-radius: 8px;
  cursor: pointer;
}

.modal__close:hover {
  background: #f3f4f6;
  color: #111827;
}

.modal__body {
  padding: 24px;
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-radius: 0 0 16px 16px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

.form-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  resize: vertical;
  font-family: inherit;
}

.form-textarea:focus {
  outline: none;
  border-color: #111827;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.1);
}

.form-hint {
  font-size: 13px;
  color: #6b7280;
  margin-top: 8px;
}

/* Utilities */
.text-muted { color: #6b7280; }
.text-sm { font-size: 13px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }

/* Alert */
.alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
}

.alert-success {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.alert-danger {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Responsive */
@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .project-dashboard__header {
    flex-direction: column;
    gap: 16px;
  }

  .project-dashboard__title {
    font-size: 24px;
  }

  .dashboard-stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .stat-card {
    padding: 16px;
  }

  .stat-card__value {
    font-size: 24px;
  }

  .dashboard-card__body {
    padding: 16px;
  }

  .gallery-preview__actions {
    flex-direction: column;
  }

  .modal {
    max-width: 100%;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .modal__footer {
    flex-direction: column-reverse;
    border-radius: 0;
  }

  .modal__footer .btn {
    width: 100%;
  }
}

/* Badge styles for trash bin notifications */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.badge--danger {
  background: #fee2e2;
  color: #dc2626;
}

.badge--warning {
  background: #fef3c7;
  color: #d97706;
}

/* ── Subscription / Billing sidebar ──────────────────────────────────
   Los estilos de .sidebar-plan-* y .sidebar-upgrade-link viven en
   salvia.css (con override de tokens en classic.css). ─────────────── */

/* ── Dashboard: iconos de stat cards tokenizados (temas Salvia/Classic) ─ */
.dk-stat__icon--projects {
  background: var(--sv-grad-soft, rgba(85, 112, 97, .14));
  color: var(--sv-green, #557061);
}
.dk-stat__icon--clients {
  background: color-mix(in srgb, var(--sv-green, #557061) 14%, transparent);
  color: var(--sv-act-ver, #557061);
}
.dk-stat__icon--leads {
  background: color-mix(in srgb, var(--sv-act-clas, #8a7b53) 16%, transparent);
  color: var(--sv-act-clas, #8a7b53);
}
.dk-stat__icon--reservations {
  background: color-mix(in srgb, var(--sv-act-ver, #7e978a) 18%, transparent);
  color: var(--sv-act-ver, #557061);
}
.dk-stat__icon--contracts-alert {
  background: color-mix(in srgb, var(--sv-act-edit, #a05e45) 14%, transparent);
  color: var(--sv-act-edit, #a05e45);
}

/* ── Dashboard: primeros pasos (cuenta nueva) ────────────────────────── */
.dk-firststeps {
  border: 1px solid var(--sv-line, rgba(60, 50, 30, .12));
  background: var(--sv-card, #fffdf9);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 22px;
}
.dk-firststeps__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.dk-firststeps__title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--sv-text, #2b2620);
}
.dk-firststeps__sub {
  margin: 0;
  font-size: 13.5px;
  color: var(--sv-muted, rgba(60, 50, 30, .6));
}
.dk-firststeps__progress {
  flex: none;
  font-weight: 700;
  font-size: 13px;
  color: var(--sv-green, #557061);
  background: color-mix(in srgb, var(--sv-green, #557061) 12%, transparent);
  border-radius: 999px;
  padding: 4px 12px;
}
.dk-firststeps__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.dk-firststep {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--sv-line, rgba(60, 50, 30, .12));
  border-radius: 12px;
  text-decoration: none;
  color: var(--sv-text, #2b2620);
  transition: border-color .15s ease, transform .15s ease;
}
.dk-firststep:hover {
  border-color: var(--sv-green, #557061);
  transform: translateY(-1px);
}
.dk-firststep__check {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--sv-line-2, rgba(60, 50, 30, .25));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.dk-firststep--done .dk-firststep__check {
  background: var(--sv-green, #557061);
  border-color: var(--sv-green, #557061);
}
.dk-firststep--done .dk-firststep__body strong {
  text-decoration: line-through;
  opacity: .65;
}
.dk-firststep__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.dk-firststep__body strong { font-size: 14px; }
.dk-firststep__body span {
  font-size: 12.5px;
  color: var(--sv-muted, rgba(60, 50, 30, .6));
}
.dk-firststep__arrow {
  margin-left: auto;
  flex: none;
  color: var(--sv-faint, rgba(60, 50, 30, .4));
}

/* ── Contratos por firmar (index de contratos/plantillas) ────────────── */
.pending-contracts {
  border: 1px solid color-mix(in srgb, var(--sv-act-edit, #a05e45) 28%, transparent);
  background: color-mix(in srgb, var(--sv-act-edit, #a05e45) 7%, transparent);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 28px;
}
.pending-contracts__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.pending-contracts__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--sv-text, #2b2620);
}
.pending-contracts__count {
  background: var(--sv-act-edit, #a05e45);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 9px;
}
.pending-contracts__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pending-contract {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--sv-card, #fffdf9);
  border: 1px solid var(--sv-line, rgba(60, 50, 30, .12));
  text-decoration: none;
  color: var(--sv-text, #2b2620);
}
.pending-contract:hover {
  border-color: color-mix(in srgb, var(--sv-act-edit, #a05e45) 45%, transparent);
}
.pending-contract__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pending-contract__client { font-weight: 600; font-size: 14px; }
.pending-contract__meta {
  font-size: 12.5px;
  color: var(--sv-muted, rgba(60, 50, 30, .6));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pending-contract__badge {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--sv-act-edit, #a05e45);
  background: color-mix(in srgb, var(--sv-act-edit, #a05e45) 12%, transparent);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.templates-section-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--sv-text, #2b2620);
}

/* ── Header: notificaciones reales ───────────────────────────────────── */
.pictorial-header__icon-btn { position: relative; }

.notif-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sv-act-edit, #a05e45);
  box-shadow: 0 0 0 2px var(--sv-card, #fff);
}

.notif-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--sv-text, #2b2620);
  font-size: 13.5px;
  border-radius: 8px;
}
.notif-item:hover { background: rgba(85, 112, 97, .08); }
.notif-item__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sv-green, #557061);
}
.notif-item__dot--contract { background: var(--sv-act-edit, #a05e45); }
.notif-item__dot--lead { background: var(--sv-act-clas, #8a7b53); }
.notif-item__text { min-width: 0; overflow-wrap: anywhere; }

/* ── Avatar del header superadmin (distintivo, dentro de paleta) ─────── */
/* !important: salvia.css pinta el avatar con var(--sv-grad) !important. */
.pictorial-header__avatar--superadmin {
  background: var(--sv-act-edit, #a05e45) !important;
  color: #fff;
}

/* ── Header: acceso a búsqueda en móvil (la barra se oculta ≤640px) ────
   Especificidad 0,2,0: salvia.css (cargada después del bundle) define
   .pictorial-header__icon-btn con display y empataría a 0,1,0. ─────── */
.pictorial-header__right .header-search-mobile { display: none; }
@media (max-width: 640px) {
  .pictorial-header__right .header-search-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
/*
 * Vendorizado para Pictorial: las fuentes viven en app/assets/fonts y se
 * referencian via asset_path (Sprockets las sirve con fingerprint).
 */
/*!
 * Bootstrap Icons v1.11.3 (https://icons.getbootstrap.com/)
 * Copyright 2019-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE)
 */

@font-face {
  font-display: block;
  font-family: "bootstrap-icons";
  src: url(/assets/bootstrap-icons-4f186bfcba02df32e2e45e64645aa46886457cb855a85bbec8013e1866c8a1f6.woff2) format("woff2"),
url(/assets/bootstrap-icons-69de61f24e1c47410e9c685931afab4ca0ebba40d9ebbf50c669f7496b112f32.woff) format("woff");
}

.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bi-123::before { content: "\f67f"; }
.bi-alarm-fill::before { content: "\f101"; }
.bi-alarm::before { content: "\f102"; }
.bi-align-bottom::before { content: "\f103"; }
.bi-align-center::before { content: "\f104"; }
.bi-align-end::before { content: "\f105"; }
.bi-align-middle::before { content: "\f106"; }
.bi-align-start::before { content: "\f107"; }
.bi-align-top::before { content: "\f108"; }
.bi-alt::before { content: "\f109"; }
.bi-app-indicator::before { content: "\f10a"; }
.bi-app::before { content: "\f10b"; }
.bi-archive-fill::before { content: "\f10c"; }
.bi-archive::before { content: "\f10d"; }
.bi-arrow-90deg-down::before { content: "\f10e"; }
.bi-arrow-90deg-left::before { content: "\f10f"; }
.bi-arrow-90deg-right::before { content: "\f110"; }
.bi-arrow-90deg-up::before { content: "\f111"; }
.bi-arrow-bar-down::before { content: "\f112"; }
.bi-arrow-bar-left::before { content: "\f113"; }
.bi-arrow-bar-right::before { content: "\f114"; }
.bi-arrow-bar-up::before { content: "\f115"; }
.bi-arrow-clockwise::before { content: "\f116"; }
.bi-arrow-counterclockwise::before { content: "\f117"; }
.bi-arrow-down-circle-fill::before { content: "\f118"; }
.bi-arrow-down-circle::before { content: "\f119"; }
.bi-arrow-down-left-circle-fill::before { content: "\f11a"; }
.bi-arrow-down-left-circle::before { content: "\f11b"; }
.bi-arrow-down-left-square-fill::before { content: "\f11c"; }
.bi-arrow-down-left-square::before { content: "\f11d"; }
.bi-arrow-down-left::before { content: "\f11e"; }
.bi-arrow-down-right-circle-fill::before { content: "\f11f"; }
.bi-arrow-down-right-circle::before { content: "\f120"; }
.bi-arrow-down-right-square-fill::before { content: "\f121"; }
.bi-arrow-down-right-square::before { content: "\f122"; }
.bi-arrow-down-right::before { content: "\f123"; }
.bi-arrow-down-short::before { content: "\f124"; }
.bi-arrow-down-square-fill::before { content: "\f125"; }
.bi-arrow-down-square::before { content: "\f126"; }
.bi-arrow-down-up::before { content: "\f127"; }
.bi-arrow-down::before { content: "\f128"; }
.bi-arrow-left-circle-fill::before { content: "\f129"; }
.bi-arrow-left-circle::before { content: "\f12a"; }
.bi-arrow-left-right::before { content: "\f12b"; }
.bi-arrow-left-short::before { content: "\f12c"; }
.bi-arrow-left-square-fill::before { content: "\f12d"; }
.bi-arrow-left-square::before { content: "\f12e"; }
.bi-arrow-left::before { content: "\f12f"; }
.bi-arrow-repeat::before { content: "\f130"; }
.bi-arrow-return-left::before { content: "\f131"; }
.bi-arrow-return-right::before { content: "\f132"; }
.bi-arrow-right-circle-fill::before { content: "\f133"; }
.bi-arrow-right-circle::before { content: "\f134"; }
.bi-arrow-right-short::before { content: "\f135"; }
.bi-arrow-right-square-fill::before { content: "\f136"; }
.bi-arrow-right-square::before { content: "\f137"; }
.bi-arrow-right::before { content: "\f138"; }
.bi-arrow-up-circle-fill::before { content: "\f139"; }
.bi-arrow-up-circle::before { content: "\f13a"; }
.bi-arrow-up-left-circle-fill::before { content: "\f13b"; }
.bi-arrow-up-left-circle::before { content: "\f13c"; }
.bi-arrow-up-left-square-fill::before { content: "\f13d"; }
.bi-arrow-up-left-square::before { content: "\f13e"; }
.bi-arrow-up-left::before { content: "\f13f"; }
.bi-arrow-up-right-circle-fill::before { content: "\f140"; }
.bi-arrow-up-right-circle::before { content: "\f141"; }
.bi-arrow-up-right-square-fill::before { content: "\f142"; }
.bi-arrow-up-right-square::before { content: "\f143"; }
.bi-arrow-up-right::before { content: "\f144"; }
.bi-arrow-up-short::before { content: "\f145"; }
.bi-arrow-up-square-fill::before { content: "\f146"; }
.bi-arrow-up-square::before { content: "\f147"; }
.bi-arrow-up::before { content: "\f148"; }
.bi-arrows-angle-contract::before { content: "\f149"; }
.bi-arrows-angle-expand::before { content: "\f14a"; }
.bi-arrows-collapse::before { content: "\f14b"; }
.bi-arrows-expand::before { content: "\f14c"; }
.bi-arrows-fullscreen::before { content: "\f14d"; }
.bi-arrows-move::before { content: "\f14e"; }
.bi-aspect-ratio-fill::before { content: "\f14f"; }
.bi-aspect-ratio::before { content: "\f150"; }
.bi-asterisk::before { content: "\f151"; }
.bi-at::before { content: "\f152"; }
.bi-award-fill::before { content: "\f153"; }
.bi-award::before { content: "\f154"; }
.bi-back::before { content: "\f155"; }
.bi-backspace-fill::before { content: "\f156"; }
.bi-backspace-reverse-fill::before { content: "\f157"; }
.bi-backspace-reverse::before { content: "\f158"; }
.bi-backspace::before { content: "\f159"; }
.bi-badge-3d-fill::before { content: "\f15a"; }
.bi-badge-3d::before { content: "\f15b"; }
.bi-badge-4k-fill::before { content: "\f15c"; }
.bi-badge-4k::before { content: "\f15d"; }
.bi-badge-8k-fill::before { content: "\f15e"; }
.bi-badge-8k::before { content: "\f15f"; }
.bi-badge-ad-fill::before { content: "\f160"; }
.bi-badge-ad::before { content: "\f161"; }
.bi-badge-ar-fill::before { content: "\f162"; }
.bi-badge-ar::before { content: "\f163"; }
.bi-badge-cc-fill::before { content: "\f164"; }
.bi-badge-cc::before { content: "\f165"; }
.bi-badge-hd-fill::before { content: "\f166"; }
.bi-badge-hd::before { content: "\f167"; }
.bi-badge-tm-fill::before { content: "\f168"; }
.bi-badge-tm::before { content: "\f169"; }
.bi-badge-vo-fill::before { content: "\f16a"; }
.bi-badge-vo::before { content: "\f16b"; }
.bi-badge-vr-fill::before { content: "\f16c"; }
.bi-badge-vr::before { content: "\f16d"; }
.bi-badge-wc-fill::before { content: "\f16e"; }
.bi-badge-wc::before { content: "\f16f"; }
.bi-bag-check-fill::before { content: "\f170"; }
.bi-bag-check::before { content: "\f171"; }
.bi-bag-dash-fill::before { content: "\f172"; }
.bi-bag-dash::before { content: "\f173"; }
.bi-bag-fill::before { content: "\f174"; }
.bi-bag-plus-fill::before { content: "\f175"; }
.bi-bag-plus::before { content: "\f176"; }
.bi-bag-x-fill::before { content: "\f177"; }
.bi-bag-x::before { content: "\f178"; }
.bi-bag::before { content: "\f179"; }
.bi-bar-chart-fill::before { content: "\f17a"; }
.bi-bar-chart-line-fill::before { content: "\f17b"; }
.bi-bar-chart-line::before { content: "\f17c"; }
.bi-bar-chart-steps::before { content: "\f17d"; }
.bi-bar-chart::before { content: "\f17e"; }
.bi-basket-fill::before { content: "\f17f"; }
.bi-basket::before { content: "\f180"; }
.bi-basket2-fill::before { content: "\f181"; }
.bi-basket2::before { content: "\f182"; }
.bi-basket3-fill::before { content: "\f183"; }
.bi-basket3::before { content: "\f184"; }
.bi-battery-charging::before { content: "\f185"; }
.bi-battery-full::before { content: "\f186"; }
.bi-battery-half::before { content: "\f187"; }
.bi-battery::before { content: "\f188"; }
.bi-bell-fill::before { content: "\f189"; }
.bi-bell::before { content: "\f18a"; }
.bi-bezier::before { content: "\f18b"; }
.bi-bezier2::before { content: "\f18c"; }
.bi-bicycle::before { content: "\f18d"; }
.bi-binoculars-fill::before { content: "\f18e"; }
.bi-binoculars::before { content: "\f18f"; }
.bi-blockquote-left::before { content: "\f190"; }
.bi-blockquote-right::before { content: "\f191"; }
.bi-book-fill::before { content: "\f192"; }
.bi-book-half::before { content: "\f193"; }
.bi-book::before { content: "\f194"; }
.bi-bookmark-check-fill::before { content: "\f195"; }
.bi-bookmark-check::before { content: "\f196"; }
.bi-bookmark-dash-fill::before { content: "\f197"; }
.bi-bookmark-dash::before { content: "\f198"; }
.bi-bookmark-fill::before { content: "\f199"; }
.bi-bookmark-heart-fill::before { content: "\f19a"; }
.bi-bookmark-heart::before { content: "\f19b"; }
.bi-bookmark-plus-fill::before { content: "\f19c"; }
.bi-bookmark-plus::before { content: "\f19d"; }
.bi-bookmark-star-fill::before { content: "\f19e"; }
.bi-bookmark-star::before { content: "\f19f"; }
.bi-bookmark-x-fill::before { content: "\f1a0"; }
.bi-bookmark-x::before { content: "\f1a1"; }
.bi-bookmark::before { content: "\f1a2"; }
.bi-bookmarks-fill::before { content: "\f1a3"; }
.bi-bookmarks::before { content: "\f1a4"; }
.bi-bookshelf::before { content: "\f1a5"; }
.bi-bootstrap-fill::before { content: "\f1a6"; }
.bi-bootstrap-reboot::before { content: "\f1a7"; }
.bi-bootstrap::before { content: "\f1a8"; }
.bi-border-all::before { content: "\f1a9"; }
.bi-border-bottom::before { content: "\f1aa"; }
.bi-border-center::before { content: "\f1ab"; }
.bi-border-inner::before { content: "\f1ac"; }
.bi-border-left::before { content: "\f1ad"; }
.bi-border-middle::before { content: "\f1ae"; }
.bi-border-outer::before { content: "\f1af"; }
.bi-border-right::before { content: "\f1b0"; }
.bi-border-style::before { content: "\f1b1"; }
.bi-border-top::before { content: "\f1b2"; }
.bi-border-width::before { content: "\f1b3"; }
.bi-border::before { content: "\f1b4"; }
.bi-bounding-box-circles::before { content: "\f1b5"; }
.bi-bounding-box::before { content: "\f1b6"; }
.bi-box-arrow-down-left::before { content: "\f1b7"; }
.bi-box-arrow-down-right::before { content: "\f1b8"; }
.bi-box-arrow-down::before { content: "\f1b9"; }
.bi-box-arrow-in-down-left::before { content: "\f1ba"; }
.bi-box-arrow-in-down-right::before { content: "\f1bb"; }
.bi-box-arrow-in-down::before { content: "\f1bc"; }
.bi-box-arrow-in-left::before { content: "\f1bd"; }
.bi-box-arrow-in-right::before { content: "\f1be"; }
.bi-box-arrow-in-up-left::before { content: "\f1bf"; }
.bi-box-arrow-in-up-right::before { content: "\f1c0"; }
.bi-box-arrow-in-up::before { content: "\f1c1"; }
.bi-box-arrow-left::before { content: "\f1c2"; }
.bi-box-arrow-right::before { content: "\f1c3"; }
.bi-box-arrow-up-left::before { content: "\f1c4"; }
.bi-box-arrow-up-right::before { content: "\f1c5"; }
.bi-box-arrow-up::before { content: "\f1c6"; }
.bi-box-seam::before { content: "\f1c7"; }
.bi-box::before { content: "\f1c8"; }
.bi-braces::before { content: "\f1c9"; }
.bi-bricks::before { content: "\f1ca"; }
.bi-briefcase-fill::before { content: "\f1cb"; }
.bi-briefcase::before { content: "\f1cc"; }
.bi-brightness-alt-high-fill::before { content: "\f1cd"; }
.bi-brightness-alt-high::before { content: "\f1ce"; }
.bi-brightness-alt-low-fill::before { content: "\f1cf"; }
.bi-brightness-alt-low::before { content: "\f1d0"; }
.bi-brightness-high-fill::before { content: "\f1d1"; }
.bi-brightness-high::before { content: "\f1d2"; }
.bi-brightness-low-fill::before { content: "\f1d3"; }
.bi-brightness-low::before { content: "\f1d4"; }
.bi-broadcast-pin::before { content: "\f1d5"; }
.bi-broadcast::before { content: "\f1d6"; }
.bi-brush-fill::before { content: "\f1d7"; }
.bi-brush::before { content: "\f1d8"; }
.bi-bucket-fill::before { content: "\f1d9"; }
.bi-bucket::before { content: "\f1da"; }
.bi-bug-fill::before { content: "\f1db"; }
.bi-bug::before { content: "\f1dc"; }
.bi-building::before { content: "\f1dd"; }
.bi-bullseye::before { content: "\f1de"; }
.bi-calculator-fill::before { content: "\f1df"; }
.bi-calculator::before { content: "\f1e0"; }
.bi-calendar-check-fill::before { content: "\f1e1"; }
.bi-calendar-check::before { content: "\f1e2"; }
.bi-calendar-date-fill::before { content: "\f1e3"; }
.bi-calendar-date::before { content: "\f1e4"; }
.bi-calendar-day-fill::before { content: "\f1e5"; }
.bi-calendar-day::before { content: "\f1e6"; }
.bi-calendar-event-fill::before { content: "\f1e7"; }
.bi-calendar-event::before { content: "\f1e8"; }
.bi-calendar-fill::before { content: "\f1e9"; }
.bi-calendar-minus-fill::before { content: "\f1ea"; }
.bi-calendar-minus::before { content: "\f1eb"; }
.bi-calendar-month-fill::before { content: "\f1ec"; }
.bi-calendar-month::before { content: "\f1ed"; }
.bi-calendar-plus-fill::before { content: "\f1ee"; }
.bi-calendar-plus::before { content: "\f1ef"; }
.bi-calendar-range-fill::before { content: "\f1f0"; }
.bi-calendar-range::before { content: "\f1f1"; }
.bi-calendar-week-fill::before { content: "\f1f2"; }
.bi-calendar-week::before { content: "\f1f3"; }
.bi-calendar-x-fill::before { content: "\f1f4"; }
.bi-calendar-x::before { content: "\f1f5"; }
.bi-calendar::before { content: "\f1f6"; }
.bi-calendar2-check-fill::before { content: "\f1f7"; }
.bi-calendar2-check::before { content: "\f1f8"; }
.bi-calendar2-date-fill::before { content: "\f1f9"; }
.bi-calendar2-date::before { content: "\f1fa"; }
.bi-calendar2-day-fill::before { content: "\f1fb"; }
.bi-calendar2-day::before { content: "\f1fc"; }
.bi-calendar2-event-fill::before { content: "\f1fd"; }
.bi-calendar2-event::before { content: "\f1fe"; }
.bi-calendar2-fill::before { content: "\f1ff"; }
.bi-calendar2-minus-fill::before { content: "\f200"; }
.bi-calendar2-minus::before { content: "\f201"; }
.bi-calendar2-month-fill::before { content: "\f202"; }
.bi-calendar2-month::before { content: "\f203"; }
.bi-calendar2-plus-fill::before { content: "\f204"; }
.bi-calendar2-plus::before { content: "\f205"; }
.bi-calendar2-range-fill::before { content: "\f206"; }
.bi-calendar2-range::before { content: "\f207"; }
.bi-calendar2-week-fill::before { content: "\f208"; }
.bi-calendar2-week::before { content: "\f209"; }
.bi-calendar2-x-fill::before { content: "\f20a"; }
.bi-calendar2-x::before { content: "\f20b"; }
.bi-calendar2::before { content: "\f20c"; }
.bi-calendar3-event-fill::before { content: "\f20d"; }
.bi-calendar3-event::before { content: "\f20e"; }
.bi-calendar3-fill::before { content: "\f20f"; }
.bi-calendar3-range-fill::before { content: "\f210"; }
.bi-calendar3-range::before { content: "\f211"; }
.bi-calendar3-week-fill::before { content: "\f212"; }
.bi-calendar3-week::before { content: "\f213"; }
.bi-calendar3::before { content: "\f214"; }
.bi-calendar4-event::before { content: "\f215"; }
.bi-calendar4-range::before { content: "\f216"; }
.bi-calendar4-week::before { content: "\f217"; }
.bi-calendar4::before { content: "\f218"; }
.bi-camera-fill::before { content: "\f219"; }
.bi-camera-reels-fill::before { content: "\f21a"; }
.bi-camera-reels::before { content: "\f21b"; }
.bi-camera-video-fill::before { content: "\f21c"; }
.bi-camera-video-off-fill::before { content: "\f21d"; }
.bi-camera-video-off::before { content: "\f21e"; }
.bi-camera-video::before { content: "\f21f"; }
.bi-camera::before { content: "\f220"; }
.bi-camera2::before { content: "\f221"; }
.bi-capslock-fill::before { content: "\f222"; }
.bi-capslock::before { content: "\f223"; }
.bi-card-checklist::before { content: "\f224"; }
.bi-card-heading::before { content: "\f225"; }
.bi-card-image::before { content: "\f226"; }
.bi-card-list::before { content: "\f227"; }
.bi-card-text::before { content: "\f228"; }
.bi-caret-down-fill::before { content: "\f229"; }
.bi-caret-down-square-fill::before { content: "\f22a"; }
.bi-caret-down-square::before { content: "\f22b"; }
.bi-caret-down::before { content: "\f22c"; }
.bi-caret-left-fill::before { content: "\f22d"; }
.bi-caret-left-square-fill::before { content: "\f22e"; }
.bi-caret-left-square::before { content: "\f22f"; }
.bi-caret-left::before { content: "\f230"; }
.bi-caret-right-fill::before { content: "\f231"; }
.bi-caret-right-square-fill::before { content: "\f232"; }
.bi-caret-right-square::before { content: "\f233"; }
.bi-caret-right::before { content: "\f234"; }
.bi-caret-up-fill::before { content: "\f235"; }
.bi-caret-up-square-fill::before { content: "\f236"; }
.bi-caret-up-square::before { content: "\f237"; }
.bi-caret-up::before { content: "\f238"; }
.bi-cart-check-fill::before { content: "\f239"; }
.bi-cart-check::before { content: "\f23a"; }
.bi-cart-dash-fill::before { content: "\f23b"; }
.bi-cart-dash::before { content: "\f23c"; }
.bi-cart-fill::before { content: "\f23d"; }
.bi-cart-plus-fill::before { content: "\f23e"; }
.bi-cart-plus::before { content: "\f23f"; }
.bi-cart-x-fill::before { content: "\f240"; }
.bi-cart-x::before { content: "\f241"; }
.bi-cart::before { content: "\f242"; }
.bi-cart2::before { content: "\f243"; }
.bi-cart3::before { content: "\f244"; }
.bi-cart4::before { content: "\f245"; }
.bi-cash-stack::before { content: "\f246"; }
.bi-cash::before { content: "\f247"; }
.bi-cast::before { content: "\f248"; }
.bi-chat-dots-fill::before { content: "\f249"; }
.bi-chat-dots::before { content: "\f24a"; }
.bi-chat-fill::before { content: "\f24b"; }
.bi-chat-left-dots-fill::before { content: "\f24c"; }
.bi-chat-left-dots::before { content: "\f24d"; }
.bi-chat-left-fill::before { content: "\f24e"; }
.bi-chat-left-quote-fill::before { content: "\f24f"; }
.bi-chat-left-quote::before { content: "\f250"; }
.bi-chat-left-text-fill::before { content: "\f251"; }
.bi-chat-left-text::before { content: "\f252"; }
.bi-chat-left::before { content: "\f253"; }
.bi-chat-quote-fill::before { content: "\f254"; }
.bi-chat-quote::before { content: "\f255"; }
.bi-chat-right-dots-fill::before { content: "\f256"; }
.bi-chat-right-dots::before { content: "\f257"; }
.bi-chat-right-fill::before { content: "\f258"; }
.bi-chat-right-quote-fill::before { content: "\f259"; }
.bi-chat-right-quote::before { content: "\f25a"; }
.bi-chat-right-text-fill::before { content: "\f25b"; }
.bi-chat-right-text::before { content: "\f25c"; }
.bi-chat-right::before { content: "\f25d"; }
.bi-chat-square-dots-fill::before { content: "\f25e"; }
.bi-chat-square-dots::before { content: "\f25f"; }
.bi-chat-square-fill::before { content: "\f260"; }
.bi-chat-square-quote-fill::before { content: "\f261"; }
.bi-chat-square-quote::before { content: "\f262"; }
.bi-chat-square-text-fill::before { content: "\f263"; }
.bi-chat-square-text::before { content: "\f264"; }
.bi-chat-square::before { content: "\f265"; }
.bi-chat-text-fill::before { content: "\f266"; }
.bi-chat-text::before { content: "\f267"; }
.bi-chat::before { content: "\f268"; }
.bi-check-all::before { content: "\f269"; }
.bi-check-circle-fill::before { content: "\f26a"; }
.bi-check-circle::before { content: "\f26b"; }
.bi-check-square-fill::before { content: "\f26c"; }
.bi-check-square::before { content: "\f26d"; }
.bi-check::before { content: "\f26e"; }
.bi-check2-all::before { content: "\f26f"; }
.bi-check2-circle::before { content: "\f270"; }
.bi-check2-square::before { content: "\f271"; }
.bi-check2::before { content: "\f272"; }
.bi-chevron-bar-contract::before { content: "\f273"; }
.bi-chevron-bar-down::before { content: "\f274"; }
.bi-chevron-bar-expand::before { content: "\f275"; }
.bi-chevron-bar-left::before { content: "\f276"; }
.bi-chevron-bar-right::before { content: "\f277"; }
.bi-chevron-bar-up::before { content: "\f278"; }
.bi-chevron-compact-down::before { content: "\f279"; }
.bi-chevron-compact-left::before { content: "\f27a"; }
.bi-chevron-compact-right::before { content: "\f27b"; }
.bi-chevron-compact-up::before { content: "\f27c"; }
.bi-chevron-contract::before { content: "\f27d"; }
.bi-chevron-double-down::before { content: "\f27e"; }
.bi-chevron-double-left::before { content: "\f27f"; }
.bi-chevron-double-right::before { content: "\f280"; }
.bi-chevron-double-up::before { content: "\f281"; }
.bi-chevron-down::before { content: "\f282"; }
.bi-chevron-expand::before { content: "\f283"; }
.bi-chevron-left::before { content: "\f284"; }
.bi-chevron-right::before { content: "\f285"; }
.bi-chevron-up::before { content: "\f286"; }
.bi-circle-fill::before { content: "\f287"; }
.bi-circle-half::before { content: "\f288"; }
.bi-circle-square::before { content: "\f289"; }
.bi-circle::before { content: "\f28a"; }
.bi-clipboard-check::before { content: "\f28b"; }
.bi-clipboard-data::before { content: "\f28c"; }
.bi-clipboard-minus::before { content: "\f28d"; }
.bi-clipboard-plus::before { content: "\f28e"; }
.bi-clipboard-x::before { content: "\f28f"; }
.bi-clipboard::before { content: "\f290"; }
.bi-clock-fill::before { content: "\f291"; }
.bi-clock-history::before { content: "\f292"; }
.bi-clock::before { content: "\f293"; }
.bi-cloud-arrow-down-fill::before { content: "\f294"; }
.bi-cloud-arrow-down::before { content: "\f295"; }
.bi-cloud-arrow-up-fill::before { content: "\f296"; }
.bi-cloud-arrow-up::before { content: "\f297"; }
.bi-cloud-check-fill::before { content: "\f298"; }
.bi-cloud-check::before { content: "\f299"; }
.bi-cloud-download-fill::before { content: "\f29a"; }
.bi-cloud-download::before { content: "\f29b"; }
.bi-cloud-drizzle-fill::before { content: "\f29c"; }
.bi-cloud-drizzle::before { content: "\f29d"; }
.bi-cloud-fill::before { content: "\f29e"; }
.bi-cloud-fog-fill::before { content: "\f29f"; }
.bi-cloud-fog::before { content: "\f2a0"; }
.bi-cloud-fog2-fill::before { content: "\f2a1"; }
.bi-cloud-fog2::before { content: "\f2a2"; }
.bi-cloud-hail-fill::before { content: "\f2a3"; }
.bi-cloud-hail::before { content: "\f2a4"; }
.bi-cloud-haze-fill::before { content: "\f2a6"; }
.bi-cloud-haze::before { content: "\f2a7"; }
.bi-cloud-haze2-fill::before { content: "\f2a8"; }
.bi-cloud-lightning-fill::before { content: "\f2a9"; }
.bi-cloud-lightning-rain-fill::before { content: "\f2aa"; }
.bi-cloud-lightning-rain::before { content: "\f2ab"; }
.bi-cloud-lightning::before { content: "\f2ac"; }
.bi-cloud-minus-fill::before { content: "\f2ad"; }
.bi-cloud-minus::before { content: "\f2ae"; }
.bi-cloud-moon-fill::before { content: "\f2af"; }
.bi-cloud-moon::before { content: "\f2b0"; }
.bi-cloud-plus-fill::before { content: "\f2b1"; }
.bi-cloud-plus::before { content: "\f2b2"; }
.bi-cloud-rain-fill::before { content: "\f2b3"; }
.bi-cloud-rain-heavy-fill::before { content: "\f2b4"; }
.bi-cloud-rain-heavy::before { content: "\f2b5"; }
.bi-cloud-rain::before { content: "\f2b6"; }
.bi-cloud-slash-fill::before { content: "\f2b7"; }
.bi-cloud-slash::before { content: "\f2b8"; }
.bi-cloud-sleet-fill::before { content: "\f2b9"; }
.bi-cloud-sleet::before { content: "\f2ba"; }
.bi-cloud-snow-fill::before { content: "\f2bb"; }
.bi-cloud-snow::before { content: "\f2bc"; }
.bi-cloud-sun-fill::before { content: "\f2bd"; }
.bi-cloud-sun::before { content: "\f2be"; }
.bi-cloud-upload-fill::before { content: "\f2bf"; }
.bi-cloud-upload::before { content: "\f2c0"; }
.bi-cloud::before { content: "\f2c1"; }
.bi-clouds-fill::before { content: "\f2c2"; }
.bi-clouds::before { content: "\f2c3"; }
.bi-cloudy-fill::before { content: "\f2c4"; }
.bi-cloudy::before { content: "\f2c5"; }
.bi-code-slash::before { content: "\f2c6"; }
.bi-code-square::before { content: "\f2c7"; }
.bi-code::before { content: "\f2c8"; }
.bi-collection-fill::before { content: "\f2c9"; }
.bi-collection-play-fill::before { content: "\f2ca"; }
.bi-collection-play::before { content: "\f2cb"; }
.bi-collection::before { content: "\f2cc"; }
.bi-columns-gap::before { content: "\f2cd"; }
.bi-columns::before { content: "\f2ce"; }
.bi-command::before { content: "\f2cf"; }
.bi-compass-fill::before { content: "\f2d0"; }
.bi-compass::before { content: "\f2d1"; }
.bi-cone-striped::before { content: "\f2d2"; }
.bi-cone::before { content: "\f2d3"; }
.bi-controller::before { content: "\f2d4"; }
.bi-cpu-fill::before { content: "\f2d5"; }
.bi-cpu::before { content: "\f2d6"; }
.bi-credit-card-2-back-fill::before { content: "\f2d7"; }
.bi-credit-card-2-back::before { content: "\f2d8"; }
.bi-credit-card-2-front-fill::before { content: "\f2d9"; }
.bi-credit-card-2-front::before { content: "\f2da"; }
.bi-credit-card-fill::before { content: "\f2db"; }
.bi-credit-card::before { content: "\f2dc"; }
.bi-crop::before { content: "\f2dd"; }
.bi-cup-fill::before { content: "\f2de"; }
.bi-cup-straw::before { content: "\f2df"; }
.bi-cup::before { content: "\f2e0"; }
.bi-cursor-fill::before { content: "\f2e1"; }
.bi-cursor-text::before { content: "\f2e2"; }
.bi-cursor::before { content: "\f2e3"; }
.bi-dash-circle-dotted::before { content: "\f2e4"; }
.bi-dash-circle-fill::before { content: "\f2e5"; }
.bi-dash-circle::before { content: "\f2e6"; }
.bi-dash-square-dotted::before { content: "\f2e7"; }
.bi-dash-square-fill::before { content: "\f2e8"; }
.bi-dash-square::before { content: "\f2e9"; }
.bi-dash::before { content: "\f2ea"; }
.bi-diagram-2-fill::before { content: "\f2eb"; }
.bi-diagram-2::before { content: "\f2ec"; }
.bi-diagram-3-fill::before { content: "\f2ed"; }
.bi-diagram-3::before { content: "\f2ee"; }
.bi-diamond-fill::before { content: "\f2ef"; }
.bi-diamond-half::before { content: "\f2f0"; }
.bi-diamond::before { content: "\f2f1"; }
.bi-dice-1-fill::before { content: "\f2f2"; }
.bi-dice-1::before { content: "\f2f3"; }
.bi-dice-2-fill::before { content: "\f2f4"; }
.bi-dice-2::before { content: "\f2f5"; }
.bi-dice-3-fill::before { content: "\f2f6"; }
.bi-dice-3::before { content: "\f2f7"; }
.bi-dice-4-fill::before { content: "\f2f8"; }
.bi-dice-4::before { content: "\f2f9"; }
.bi-dice-5-fill::before { content: "\f2fa"; }
.bi-dice-5::before { content: "\f2fb"; }
.bi-dice-6-fill::before { content: "\f2fc"; }
.bi-dice-6::before { content: "\f2fd"; }
.bi-disc-fill::before { content: "\f2fe"; }
.bi-disc::before { content: "\f2ff"; }
.bi-discord::before { content: "\f300"; }
.bi-display-fill::before { content: "\f301"; }
.bi-display::before { content: "\f302"; }
.bi-distribute-horizontal::before { content: "\f303"; }
.bi-distribute-vertical::before { content: "\f304"; }
.bi-door-closed-fill::before { content: "\f305"; }
.bi-door-closed::before { content: "\f306"; }
.bi-door-open-fill::before { content: "\f307"; }
.bi-door-open::before { content: "\f308"; }
.bi-dot::before { content: "\f309"; }
.bi-download::before { content: "\f30a"; }
.bi-droplet-fill::before { content: "\f30b"; }
.bi-droplet-half::before { content: "\f30c"; }
.bi-droplet::before { content: "\f30d"; }
.bi-earbuds::before { content: "\f30e"; }
.bi-easel-fill::before { content: "\f30f"; }
.bi-easel::before { content: "\f310"; }
.bi-egg-fill::before { content: "\f311"; }
.bi-egg-fried::before { content: "\f312"; }
.bi-egg::before { content: "\f313"; }
.bi-eject-fill::before { content: "\f314"; }
.bi-eject::before { content: "\f315"; }
.bi-emoji-angry-fill::before { content: "\f316"; }
.bi-emoji-angry::before { content: "\f317"; }
.bi-emoji-dizzy-fill::before { content: "\f318"; }
.bi-emoji-dizzy::before { content: "\f319"; }
.bi-emoji-expressionless-fill::before { content: "\f31a"; }
.bi-emoji-expressionless::before { content: "\f31b"; }
.bi-emoji-frown-fill::before { content: "\f31c"; }
.bi-emoji-frown::before { content: "\f31d"; }
.bi-emoji-heart-eyes-fill::before { content: "\f31e"; }
.bi-emoji-heart-eyes::before { content: "\f31f"; }
.bi-emoji-laughing-fill::before { content: "\f320"; }
.bi-emoji-laughing::before { content: "\f321"; }
.bi-emoji-neutral-fill::before { content: "\f322"; }
.bi-emoji-neutral::before { content: "\f323"; }
.bi-emoji-smile-fill::before { content: "\f324"; }
.bi-emoji-smile-upside-down-fill::before { content: "\f325"; }
.bi-emoji-smile-upside-down::before { content: "\f326"; }
.bi-emoji-smile::before { content: "\f327"; }
.bi-emoji-sunglasses-fill::before { content: "\f328"; }
.bi-emoji-sunglasses::before { content: "\f329"; }
.bi-emoji-wink-fill::before { content: "\f32a"; }
.bi-emoji-wink::before { content: "\f32b"; }
.bi-envelope-fill::before { content: "\f32c"; }
.bi-envelope-open-fill::before { content: "\f32d"; }
.bi-envelope-open::before { content: "\f32e"; }
.bi-envelope::before { content: "\f32f"; }
.bi-eraser-fill::before { content: "\f330"; }
.bi-eraser::before { content: "\f331"; }
.bi-exclamation-circle-fill::before { content: "\f332"; }
.bi-exclamation-circle::before { content: "\f333"; }
.bi-exclamation-diamond-fill::before { content: "\f334"; }
.bi-exclamation-diamond::before { content: "\f335"; }
.bi-exclamation-octagon-fill::before { content: "\f336"; }
.bi-exclamation-octagon::before { content: "\f337"; }
.bi-exclamation-square-fill::before { content: "\f338"; }
.bi-exclamation-square::before { content: "\f339"; }
.bi-exclamation-triangle-fill::before { content: "\f33a"; }
.bi-exclamation-triangle::before { content: "\f33b"; }
.bi-exclamation::before { content: "\f33c"; }
.bi-exclude::before { content: "\f33d"; }
.bi-eye-fill::before { content: "\f33e"; }
.bi-eye-slash-fill::before { content: "\f33f"; }
.bi-eye-slash::before { content: "\f340"; }
.bi-eye::before { content: "\f341"; }
.bi-eyedropper::before { content: "\f342"; }
.bi-eyeglasses::before { content: "\f343"; }
.bi-facebook::before { content: "\f344"; }
.bi-file-arrow-down-fill::before { content: "\f345"; }
.bi-file-arrow-down::before { content: "\f346"; }
.bi-file-arrow-up-fill::before { content: "\f347"; }
.bi-file-arrow-up::before { content: "\f348"; }
.bi-file-bar-graph-fill::before { content: "\f349"; }
.bi-file-bar-graph::before { content: "\f34a"; }
.bi-file-binary-fill::before { content: "\f34b"; }
.bi-file-binary::before { content: "\f34c"; }
.bi-file-break-fill::before { content: "\f34d"; }
.bi-file-break::before { content: "\f34e"; }
.bi-file-check-fill::before { content: "\f34f"; }
.bi-file-check::before { content: "\f350"; }
.bi-file-code-fill::before { content: "\f351"; }
.bi-file-code::before { content: "\f352"; }
.bi-file-diff-fill::before { content: "\f353"; }
.bi-file-diff::before { content: "\f354"; }
.bi-file-earmark-arrow-down-fill::before { content: "\f355"; }
.bi-file-earmark-arrow-down::before { content: "\f356"; }
.bi-file-earmark-arrow-up-fill::before { content: "\f357"; }
.bi-file-earmark-arrow-up::before { content: "\f358"; }
.bi-file-earmark-bar-graph-fill::before { content: "\f359"; }
.bi-file-earmark-bar-graph::before { content: "\f35a"; }
.bi-file-earmark-binary-fill::before { content: "\f35b"; }
.bi-file-earmark-binary::before { content: "\f35c"; }
.bi-file-earmark-break-fill::before { content: "\f35d"; }
.bi-file-earmark-break::before { content: "\f35e"; }
.bi-file-earmark-check-fill::before { content: "\f35f"; }
.bi-file-earmark-check::before { content: "\f360"; }
.bi-file-earmark-code-fill::before { content: "\f361"; }
.bi-file-earmark-code::before { content: "\f362"; }
.bi-file-earmark-diff-fill::before { content: "\f363"; }
.bi-file-earmark-diff::before { content: "\f364"; }
.bi-file-earmark-easel-fill::before { content: "\f365"; }
.bi-file-earmark-easel::before { content: "\f366"; }
.bi-file-earmark-excel-fill::before { content: "\f367"; }
.bi-file-earmark-excel::before { content: "\f368"; }
.bi-file-earmark-fill::before { content: "\f369"; }
.bi-file-earmark-font-fill::before { content: "\f36a"; }
.bi-file-earmark-font::before { content: "\f36b"; }
.bi-file-earmark-image-fill::before { content: "\f36c"; }
.bi-file-earmark-image::before { content: "\f36d"; }
.bi-file-earmark-lock-fill::before { content: "\f36e"; }
.bi-file-earmark-lock::before { content: "\f36f"; }
.bi-file-earmark-lock2-fill::before { content: "\f370"; }
.bi-file-earmark-lock2::before { content: "\f371"; }
.bi-file-earmark-medical-fill::before { content: "\f372"; }
.bi-file-earmark-medical::before { content: "\f373"; }
.bi-file-earmark-minus-fill::before { content: "\f374"; }
.bi-file-earmark-minus::before { content: "\f375"; }
.bi-file-earmark-music-fill::before { content: "\f376"; }
.bi-file-earmark-music::before { content: "\f377"; }
.bi-file-earmark-person-fill::before { content: "\f378"; }
.bi-file-earmark-person::before { content: "\f379"; }
.bi-file-earmark-play-fill::before { content: "\f37a"; }
.bi-file-earmark-play::before { content: "\f37b"; }
.bi-file-earmark-plus-fill::before { content: "\f37c"; }
.bi-file-earmark-plus::before { content: "\f37d"; }
.bi-file-earmark-post-fill::before { content: "\f37e"; }
.bi-file-earmark-post::before { content: "\f37f"; }
.bi-file-earmark-ppt-fill::before { content: "\f380"; }
.bi-file-earmark-ppt::before { content: "\f381"; }
.bi-file-earmark-richtext-fill::before { content: "\f382"; }
.bi-file-earmark-richtext::before { content: "\f383"; }
.bi-file-earmark-ruled-fill::before { content: "\f384"; }
.bi-file-earmark-ruled::before { content: "\f385"; }
.bi-file-earmark-slides-fill::before { content: "\f386"; }
.bi-file-earmark-slides::before { content: "\f387"; }
.bi-file-earmark-spreadsheet-fill::before { content: "\f388"; }
.bi-file-earmark-spreadsheet::before { content: "\f389"; }
.bi-file-earmark-text-fill::before { content: "\f38a"; }
.bi-file-earmark-text::before { content: "\f38b"; }
.bi-file-earmark-word-fill::before { content: "\f38c"; }
.bi-file-earmark-word::before { content: "\f38d"; }
.bi-file-earmark-x-fill::before { content: "\f38e"; }
.bi-file-earmark-x::before { content: "\f38f"; }
.bi-file-earmark-zip-fill::before { content: "\f390"; }
.bi-file-earmark-zip::before { content: "\f391"; }
.bi-file-earmark::before { content: "\f392"; }
.bi-file-easel-fill::before { content: "\f393"; }
.bi-file-easel::before { content: "\f394"; }
.bi-file-excel-fill::before { content: "\f395"; }
.bi-file-excel::before { content: "\f396"; }
.bi-file-fill::before { content: "\f397"; }
.bi-file-font-fill::before { content: "\f398"; }
.bi-file-font::before { content: "\f399"; }
.bi-file-image-fill::before { content: "\f39a"; }
.bi-file-image::before { content: "\f39b"; }
.bi-file-lock-fill::before { content: "\f39c"; }
.bi-file-lock::before { content: "\f39d"; }
.bi-file-lock2-fill::before { content: "\f39e"; }
.bi-file-lock2::before { content: "\f39f"; }
.bi-file-medical-fill::before { content: "\f3a0"; }
.bi-file-medical::before { content: "\f3a1"; }
.bi-file-minus-fill::before { content: "\f3a2"; }
.bi-file-minus::before { content: "\f3a3"; }
.bi-file-music-fill::before { content: "\f3a4"; }
.bi-file-music::before { content: "\f3a5"; }
.bi-file-person-fill::before { content: "\f3a6"; }
.bi-file-person::before { content: "\f3a7"; }
.bi-file-play-fill::before { content: "\f3a8"; }
.bi-file-play::before { content: "\f3a9"; }
.bi-file-plus-fill::before { content: "\f3aa"; }
.bi-file-plus::before { content: "\f3ab"; }
.bi-file-post-fill::before { content: "\f3ac"; }
.bi-file-post::before { content: "\f3ad"; }
.bi-file-ppt-fill::before { content: "\f3ae"; }
.bi-file-ppt::before { content: "\f3af"; }
.bi-file-richtext-fill::before { content: "\f3b0"; }
.bi-file-richtext::before { content: "\f3b1"; }
.bi-file-ruled-fill::before { content: "\f3b2"; }
.bi-file-ruled::before { content: "\f3b3"; }
.bi-file-slides-fill::before { content: "\f3b4"; }
.bi-file-slides::before { content: "\f3b5"; }
.bi-file-spreadsheet-fill::before { content: "\f3b6"; }
.bi-file-spreadsheet::before { content: "\f3b7"; }
.bi-file-text-fill::before { content: "\f3b8"; }
.bi-file-text::before { content: "\f3b9"; }
.bi-file-word-fill::before { content: "\f3ba"; }
.bi-file-word::before { content: "\f3bb"; }
.bi-file-x-fill::before { content: "\f3bc"; }
.bi-file-x::before { content: "\f3bd"; }
.bi-file-zip-fill::before { content: "\f3be"; }
.bi-file-zip::before { content: "\f3bf"; }
.bi-file::before { content: "\f3c0"; }
.bi-files-alt::before { content: "\f3c1"; }
.bi-files::before { content: "\f3c2"; }
.bi-film::before { content: "\f3c3"; }
.bi-filter-circle-fill::before { content: "\f3c4"; }
.bi-filter-circle::before { content: "\f3c5"; }
.bi-filter-left::before { content: "\f3c6"; }
.bi-filter-right::before { content: "\f3c7"; }
.bi-filter-square-fill::before { content: "\f3c8"; }
.bi-filter-square::before { content: "\f3c9"; }
.bi-filter::before { content: "\f3ca"; }
.bi-flag-fill::before { content: "\f3cb"; }
.bi-flag::before { content: "\f3cc"; }
.bi-flower1::before { content: "\f3cd"; }
.bi-flower2::before { content: "\f3ce"; }
.bi-flower3::before { content: "\f3cf"; }
.bi-folder-check::before { content: "\f3d0"; }
.bi-folder-fill::before { content: "\f3d1"; }
.bi-folder-minus::before { content: "\f3d2"; }
.bi-folder-plus::before { content: "\f3d3"; }
.bi-folder-symlink-fill::before { content: "\f3d4"; }
.bi-folder-symlink::before { content: "\f3d5"; }
.bi-folder-x::before { content: "\f3d6"; }
.bi-folder::before { content: "\f3d7"; }
.bi-folder2-open::before { content: "\f3d8"; }
.bi-folder2::before { content: "\f3d9"; }
.bi-fonts::before { content: "\f3da"; }
.bi-forward-fill::before { content: "\f3db"; }
.bi-forward::before { content: "\f3dc"; }
.bi-front::before { content: "\f3dd"; }
.bi-fullscreen-exit::before { content: "\f3de"; }
.bi-fullscreen::before { content: "\f3df"; }
.bi-funnel-fill::before { content: "\f3e0"; }
.bi-funnel::before { content: "\f3e1"; }
.bi-gear-fill::before { content: "\f3e2"; }
.bi-gear-wide-connected::before { content: "\f3e3"; }
.bi-gear-wide::before { content: "\f3e4"; }
.bi-gear::before { content: "\f3e5"; }
.bi-gem::before { content: "\f3e6"; }
.bi-geo-alt-fill::before { content: "\f3e7"; }
.bi-geo-alt::before { content: "\f3e8"; }
.bi-geo-fill::before { content: "\f3e9"; }
.bi-geo::before { content: "\f3ea"; }
.bi-gift-fill::before { content: "\f3eb"; }
.bi-gift::before { content: "\f3ec"; }
.bi-github::before { content: "\f3ed"; }
.bi-globe::before { content: "\f3ee"; }
.bi-globe2::before { content: "\f3ef"; }
.bi-google::before { content: "\f3f0"; }
.bi-graph-down::before { content: "\f3f1"; }
.bi-graph-up::before { content: "\f3f2"; }
.bi-grid-1x2-fill::before { content: "\f3f3"; }
.bi-grid-1x2::before { content: "\f3f4"; }
.bi-grid-3x2-gap-fill::before { content: "\f3f5"; }
.bi-grid-3x2-gap::before { content: "\f3f6"; }
.bi-grid-3x2::before { content: "\f3f7"; }
.bi-grid-3x3-gap-fill::before { content: "\f3f8"; }
.bi-grid-3x3-gap::before { content: "\f3f9"; }
.bi-grid-3x3::before { content: "\f3fa"; }
.bi-grid-fill::before { content: "\f3fb"; }
.bi-grid::before { content: "\f3fc"; }
.bi-grip-horizontal::before { content: "\f3fd"; }
.bi-grip-vertical::before { content: "\f3fe"; }
.bi-hammer::before { content: "\f3ff"; }
.bi-hand-index-fill::before { content: "\f400"; }
.bi-hand-index-thumb-fill::before { content: "\f401"; }
.bi-hand-index-thumb::before { content: "\f402"; }
.bi-hand-index::before { content: "\f403"; }
.bi-hand-thumbs-down-fill::before { content: "\f404"; }
.bi-hand-thumbs-down::before { content: "\f405"; }
.bi-hand-thumbs-up-fill::before { content: "\f406"; }
.bi-hand-thumbs-up::before { content: "\f407"; }
.bi-handbag-fill::before { content: "\f408"; }
.bi-handbag::before { content: "\f409"; }
.bi-hash::before { content: "\f40a"; }
.bi-hdd-fill::before { content: "\f40b"; }
.bi-hdd-network-fill::before { content: "\f40c"; }
.bi-hdd-network::before { content: "\f40d"; }
.bi-hdd-rack-fill::before { content: "\f40e"; }
.bi-hdd-rack::before { content: "\f40f"; }
.bi-hdd-stack-fill::before { content: "\f410"; }
.bi-hdd-stack::before { content: "\f411"; }
.bi-hdd::before { content: "\f412"; }
.bi-headphones::before { content: "\f413"; }
.bi-headset::before { content: "\f414"; }
.bi-heart-fill::before { content: "\f415"; }
.bi-heart-half::before { content: "\f416"; }
.bi-heart::before { content: "\f417"; }
.bi-heptagon-fill::before { content: "\f418"; }
.bi-heptagon-half::before { content: "\f419"; }
.bi-heptagon::before { content: "\f41a"; }
.bi-hexagon-fill::before { content: "\f41b"; }
.bi-hexagon-half::before { content: "\f41c"; }
.bi-hexagon::before { content: "\f41d"; }
.bi-hourglass-bottom::before { content: "\f41e"; }
.bi-hourglass-split::before { content: "\f41f"; }
.bi-hourglass-top::before { content: "\f420"; }
.bi-hourglass::before { content: "\f421"; }
.bi-house-door-fill::before { content: "\f422"; }
.bi-house-door::before { content: "\f423"; }
.bi-house-fill::before { content: "\f424"; }
.bi-house::before { content: "\f425"; }
.bi-hr::before { content: "\f426"; }
.bi-hurricane::before { content: "\f427"; }
.bi-image-alt::before { content: "\f428"; }
.bi-image-fill::before { content: "\f429"; }
.bi-image::before { content: "\f42a"; }
.bi-images::before { content: "\f42b"; }
.bi-inbox-fill::before { content: "\f42c"; }
.bi-inbox::before { content: "\f42d"; }
.bi-inboxes-fill::before { content: "\f42e"; }
.bi-inboxes::before { content: "\f42f"; }
.bi-info-circle-fill::before { content: "\f430"; }
.bi-info-circle::before { content: "\f431"; }
.bi-info-square-fill::before { content: "\f432"; }
.bi-info-square::before { content: "\f433"; }
.bi-info::before { content: "\f434"; }
.bi-input-cursor-text::before { content: "\f435"; }
.bi-input-cursor::before { content: "\f436"; }
.bi-instagram::before { content: "\f437"; }
.bi-intersect::before { content: "\f438"; }
.bi-journal-album::before { content: "\f439"; }
.bi-journal-arrow-down::before { content: "\f43a"; }
.bi-journal-arrow-up::before { content: "\f43b"; }
.bi-journal-bookmark-fill::before { content: "\f43c"; }
.bi-journal-bookmark::before { content: "\f43d"; }
.bi-journal-check::before { content: "\f43e"; }
.bi-journal-code::before { content: "\f43f"; }
.bi-journal-medical::before { content: "\f440"; }
.bi-journal-minus::before { content: "\f441"; }
.bi-journal-plus::before { content: "\f442"; }
.bi-journal-richtext::before { content: "\f443"; }
.bi-journal-text::before { content: "\f444"; }
.bi-journal-x::before { content: "\f445"; }
.bi-journal::before { content: "\f446"; }
.bi-journals::before { content: "\f447"; }
.bi-joystick::before { content: "\f448"; }
.bi-justify-left::before { content: "\f449"; }
.bi-justify-right::before { content: "\f44a"; }
.bi-justify::before { content: "\f44b"; }
.bi-kanban-fill::before { content: "\f44c"; }
.bi-kanban::before { content: "\f44d"; }
.bi-key-fill::before { content: "\f44e"; }
.bi-key::before { content: "\f44f"; }
.bi-keyboard-fill::before { content: "\f450"; }
.bi-keyboard::before { content: "\f451"; }
.bi-ladder::before { content: "\f452"; }
.bi-lamp-fill::before { content: "\f453"; }
.bi-lamp::before { content: "\f454"; }
.bi-laptop-fill::before { content: "\f455"; }
.bi-laptop::before { content: "\f456"; }
.bi-layer-backward::before { content: "\f457"; }
.bi-layer-forward::before { content: "\f458"; }
.bi-layers-fill::before { content: "\f459"; }
.bi-layers-half::before { content: "\f45a"; }
.bi-layers::before { content: "\f45b"; }
.bi-layout-sidebar-inset-reverse::before { content: "\f45c"; }
.bi-layout-sidebar-inset::before { content: "\f45d"; }
.bi-layout-sidebar-reverse::before { content: "\f45e"; }
.bi-layout-sidebar::before { content: "\f45f"; }
.bi-layout-split::before { content: "\f460"; }
.bi-layout-text-sidebar-reverse::before { content: "\f461"; }
.bi-layout-text-sidebar::before { content: "\f462"; }
.bi-layout-text-window-reverse::before { content: "\f463"; }
.bi-layout-text-window::before { content: "\f464"; }
.bi-layout-three-columns::before { content: "\f465"; }
.bi-layout-wtf::before { content: "\f466"; }
.bi-life-preserver::before { content: "\f467"; }
.bi-lightbulb-fill::before { content: "\f468"; }
.bi-lightbulb-off-fill::before { content: "\f469"; }
.bi-lightbulb-off::before { content: "\f46a"; }
.bi-lightbulb::before { content: "\f46b"; }
.bi-lightning-charge-fill::before { content: "\f46c"; }
.bi-lightning-charge::before { content: "\f46d"; }
.bi-lightning-fill::before { content: "\f46e"; }
.bi-lightning::before { content: "\f46f"; }
.bi-link-45deg::before { content: "\f470"; }
.bi-link::before { content: "\f471"; }
.bi-linkedin::before { content: "\f472"; }
.bi-list-check::before { content: "\f473"; }
.bi-list-nested::before { content: "\f474"; }
.bi-list-ol::before { content: "\f475"; }
.bi-list-stars::before { content: "\f476"; }
.bi-list-task::before { content: "\f477"; }
.bi-list-ul::before { content: "\f478"; }
.bi-list::before { content: "\f479"; }
.bi-lock-fill::before { content: "\f47a"; }
.bi-lock::before { content: "\f47b"; }
.bi-mailbox::before { content: "\f47c"; }
.bi-mailbox2::before { content: "\f47d"; }
.bi-map-fill::before { content: "\f47e"; }
.bi-map::before { content: "\f47f"; }
.bi-markdown-fill::before { content: "\f480"; }
.bi-markdown::before { content: "\f481"; }
.bi-mask::before { content: "\f482"; }
.bi-megaphone-fill::before { content: "\f483"; }
.bi-megaphone::before { content: "\f484"; }
.bi-menu-app-fill::before { content: "\f485"; }
.bi-menu-app::before { content: "\f486"; }
.bi-menu-button-fill::before { content: "\f487"; }
.bi-menu-button-wide-fill::before { content: "\f488"; }
.bi-menu-button-wide::before { content: "\f489"; }
.bi-menu-button::before { content: "\f48a"; }
.bi-menu-down::before { content: "\f48b"; }
.bi-menu-up::before { content: "\f48c"; }
.bi-mic-fill::before { content: "\f48d"; }
.bi-mic-mute-fill::before { content: "\f48e"; }
.bi-mic-mute::before { content: "\f48f"; }
.bi-mic::before { content: "\f490"; }
.bi-minecart-loaded::before { content: "\f491"; }
.bi-minecart::before { content: "\f492"; }
.bi-moisture::before { content: "\f493"; }
.bi-moon-fill::before { content: "\f494"; }
.bi-moon-stars-fill::before { content: "\f495"; }
.bi-moon-stars::before { content: "\f496"; }
.bi-moon::before { content: "\f497"; }
.bi-mouse-fill::before { content: "\f498"; }
.bi-mouse::before { content: "\f499"; }
.bi-mouse2-fill::before { content: "\f49a"; }
.bi-mouse2::before { content: "\f49b"; }
.bi-mouse3-fill::before { content: "\f49c"; }
.bi-mouse3::before { content: "\f49d"; }
.bi-music-note-beamed::before { content: "\f49e"; }
.bi-music-note-list::before { content: "\f49f"; }
.bi-music-note::before { content: "\f4a0"; }
.bi-music-player-fill::before { content: "\f4a1"; }
.bi-music-player::before { content: "\f4a2"; }
.bi-newspaper::before { content: "\f4a3"; }
.bi-node-minus-fill::before { content: "\f4a4"; }
.bi-node-minus::before { content: "\f4a5"; }
.bi-node-plus-fill::before { content: "\f4a6"; }
.bi-node-plus::before { content: "\f4a7"; }
.bi-nut-fill::before { content: "\f4a8"; }
.bi-nut::before { content: "\f4a9"; }
.bi-octagon-fill::before { content: "\f4aa"; }
.bi-octagon-half::before { content: "\f4ab"; }
.bi-octagon::before { content: "\f4ac"; }
.bi-option::before { content: "\f4ad"; }
.bi-outlet::before { content: "\f4ae"; }
.bi-paint-bucket::before { content: "\f4af"; }
.bi-palette-fill::before { content: "\f4b0"; }
.bi-palette::before { content: "\f4b1"; }
.bi-palette2::before { content: "\f4b2"; }
.bi-paperclip::before { content: "\f4b3"; }
.bi-paragraph::before { content: "\f4b4"; }
.bi-patch-check-fill::before { content: "\f4b5"; }
.bi-patch-check::before { content: "\f4b6"; }
.bi-patch-exclamation-fill::before { content: "\f4b7"; }
.bi-patch-exclamation::before { content: "\f4b8"; }
.bi-patch-minus-fill::before { content: "\f4b9"; }
.bi-patch-minus::before { content: "\f4ba"; }
.bi-patch-plus-fill::before { content: "\f4bb"; }
.bi-patch-plus::before { content: "\f4bc"; }
.bi-patch-question-fill::before { content: "\f4bd"; }
.bi-patch-question::before { content: "\f4be"; }
.bi-pause-btn-fill::before { content: "\f4bf"; }
.bi-pause-btn::before { content: "\f4c0"; }
.bi-pause-circle-fill::before { content: "\f4c1"; }
.bi-pause-circle::before { content: "\f4c2"; }
.bi-pause-fill::before { content: "\f4c3"; }
.bi-pause::before { content: "\f4c4"; }
.bi-peace-fill::before { content: "\f4c5"; }
.bi-peace::before { content: "\f4c6"; }
.bi-pen-fill::before { content: "\f4c7"; }
.bi-pen::before { content: "\f4c8"; }
.bi-pencil-fill::before { content: "\f4c9"; }
.bi-pencil-square::before { content: "\f4ca"; }
.bi-pencil::before { content: "\f4cb"; }
.bi-pentagon-fill::before { content: "\f4cc"; }
.bi-pentagon-half::before { content: "\f4cd"; }
.bi-pentagon::before { content: "\f4ce"; }
.bi-people-fill::before { content: "\f4cf"; }
.bi-people::before { content: "\f4d0"; }
.bi-percent::before { content: "\f4d1"; }
.bi-person-badge-fill::before { content: "\f4d2"; }
.bi-person-badge::before { content: "\f4d3"; }
.bi-person-bounding-box::before { content: "\f4d4"; }
.bi-person-check-fill::before { content: "\f4d5"; }
.bi-person-check::before { content: "\f4d6"; }
.bi-person-circle::before { content: "\f4d7"; }
.bi-person-dash-fill::before { content: "\f4d8"; }
.bi-person-dash::before { content: "\f4d9"; }
.bi-person-fill::before { content: "\f4da"; }
.bi-person-lines-fill::before { content: "\f4db"; }
.bi-person-plus-fill::before { content: "\f4dc"; }
.bi-person-plus::before { content: "\f4dd"; }
.bi-person-square::before { content: "\f4de"; }
.bi-person-x-fill::before { content: "\f4df"; }
.bi-person-x::before { content: "\f4e0"; }
.bi-person::before { content: "\f4e1"; }
.bi-phone-fill::before { content: "\f4e2"; }
.bi-phone-landscape-fill::before { content: "\f4e3"; }
.bi-phone-landscape::before { content: "\f4e4"; }
.bi-phone-vibrate-fill::before { content: "\f4e5"; }
.bi-phone-vibrate::before { content: "\f4e6"; }
.bi-phone::before { content: "\f4e7"; }
.bi-pie-chart-fill::before { content: "\f4e8"; }
.bi-pie-chart::before { content: "\f4e9"; }
.bi-pin-angle-fill::before { content: "\f4ea"; }
.bi-pin-angle::before { content: "\f4eb"; }
.bi-pin-fill::before { content: "\f4ec"; }
.bi-pin::before { content: "\f4ed"; }
.bi-pip-fill::before { content: "\f4ee"; }
.bi-pip::before { content: "\f4ef"; }
.bi-play-btn-fill::before { content: "\f4f0"; }
.bi-play-btn::before { content: "\f4f1"; }
.bi-play-circle-fill::before { content: "\f4f2"; }
.bi-play-circle::before { content: "\f4f3"; }
.bi-play-fill::before { content: "\f4f4"; }
.bi-play::before { content: "\f4f5"; }
.bi-plug-fill::before { content: "\f4f6"; }
.bi-plug::before { content: "\f4f7"; }
.bi-plus-circle-dotted::before { content: "\f4f8"; }
.bi-plus-circle-fill::before { content: "\f4f9"; }
.bi-plus-circle::before { content: "\f4fa"; }
.bi-plus-square-dotted::before { content: "\f4fb"; }
.bi-plus-square-fill::before { content: "\f4fc"; }
.bi-plus-square::before { content: "\f4fd"; }
.bi-plus::before { content: "\f4fe"; }
.bi-power::before { content: "\f4ff"; }
.bi-printer-fill::before { content: "\f500"; }
.bi-printer::before { content: "\f501"; }
.bi-puzzle-fill::before { content: "\f502"; }
.bi-puzzle::before { content: "\f503"; }
.bi-question-circle-fill::before { content: "\f504"; }
.bi-question-circle::before { content: "\f505"; }
.bi-question-diamond-fill::before { content: "\f506"; }
.bi-question-diamond::before { content: "\f507"; }
.bi-question-octagon-fill::before { content: "\f508"; }
.bi-question-octagon::before { content: "\f509"; }
.bi-question-square-fill::before { content: "\f50a"; }
.bi-question-square::before { content: "\f50b"; }
.bi-question::before { content: "\f50c"; }
.bi-rainbow::before { content: "\f50d"; }
.bi-receipt-cutoff::before { content: "\f50e"; }
.bi-receipt::before { content: "\f50f"; }
.bi-reception-0::before { content: "\f510"; }
.bi-reception-1::before { content: "\f511"; }
.bi-reception-2::before { content: "\f512"; }
.bi-reception-3::before { content: "\f513"; }
.bi-reception-4::before { content: "\f514"; }
.bi-record-btn-fill::before { content: "\f515"; }
.bi-record-btn::before { content: "\f516"; }
.bi-record-circle-fill::before { content: "\f517"; }
.bi-record-circle::before { content: "\f518"; }
.bi-record-fill::before { content: "\f519"; }
.bi-record::before { content: "\f51a"; }
.bi-record2-fill::before { content: "\f51b"; }
.bi-record2::before { content: "\f51c"; }
.bi-reply-all-fill::before { content: "\f51d"; }
.bi-reply-all::before { content: "\f51e"; }
.bi-reply-fill::before { content: "\f51f"; }
.bi-reply::before { content: "\f520"; }
.bi-rss-fill::before { content: "\f521"; }
.bi-rss::before { content: "\f522"; }
.bi-rulers::before { content: "\f523"; }
.bi-save-fill::before { content: "\f524"; }
.bi-save::before { content: "\f525"; }
.bi-save2-fill::before { content: "\f526"; }
.bi-save2::before { content: "\f527"; }
.bi-scissors::before { content: "\f528"; }
.bi-screwdriver::before { content: "\f529"; }
.bi-search::before { content: "\f52a"; }
.bi-segmented-nav::before { content: "\f52b"; }
.bi-server::before { content: "\f52c"; }
.bi-share-fill::before { content: "\f52d"; }
.bi-share::before { content: "\f52e"; }
.bi-shield-check::before { content: "\f52f"; }
.bi-shield-exclamation::before { content: "\f530"; }
.bi-shield-fill-check::before { content: "\f531"; }
.bi-shield-fill-exclamation::before { content: "\f532"; }
.bi-shield-fill-minus::before { content: "\f533"; }
.bi-shield-fill-plus::before { content: "\f534"; }
.bi-shield-fill-x::before { content: "\f535"; }
.bi-shield-fill::before { content: "\f536"; }
.bi-shield-lock-fill::before { content: "\f537"; }
.bi-shield-lock::before { content: "\f538"; }
.bi-shield-minus::before { content: "\f539"; }
.bi-shield-plus::before { content: "\f53a"; }
.bi-shield-shaded::before { content: "\f53b"; }
.bi-shield-slash-fill::before { content: "\f53c"; }
.bi-shield-slash::before { content: "\f53d"; }
.bi-shield-x::before { content: "\f53e"; }
.bi-shield::before { content: "\f53f"; }
.bi-shift-fill::before { content: "\f540"; }
.bi-shift::before { content: "\f541"; }
.bi-shop-window::before { content: "\f542"; }
.bi-shop::before { content: "\f543"; }
.bi-shuffle::before { content: "\f544"; }
.bi-signpost-2-fill::before { content: "\f545"; }
.bi-signpost-2::before { content: "\f546"; }
.bi-signpost-fill::before { content: "\f547"; }
.bi-signpost-split-fill::before { content: "\f548"; }
.bi-signpost-split::before { content: "\f549"; }
.bi-signpost::before { content: "\f54a"; }
.bi-sim-fill::before { content: "\f54b"; }
.bi-sim::before { content: "\f54c"; }
.bi-skip-backward-btn-fill::before { content: "\f54d"; }
.bi-skip-backward-btn::before { content: "\f54e"; }
.bi-skip-backward-circle-fill::before { content: "\f54f"; }
.bi-skip-backward-circle::before { content: "\f550"; }
.bi-skip-backward-fill::before { content: "\f551"; }
.bi-skip-backward::before { content: "\f552"; }
.bi-skip-end-btn-fill::before { content: "\f553"; }
.bi-skip-end-btn::before { content: "\f554"; }
.bi-skip-end-circle-fill::before { content: "\f555"; }
.bi-skip-end-circle::before { content: "\f556"; }
.bi-skip-end-fill::before { content: "\f557"; }
.bi-skip-end::before { content: "\f558"; }
.bi-skip-forward-btn-fill::before { content: "\f559"; }
.bi-skip-forward-btn::before { content: "\f55a"; }
.bi-skip-forward-circle-fill::before { content: "\f55b"; }
.bi-skip-forward-circle::before { content: "\f55c"; }
.bi-skip-forward-fill::before { content: "\f55d"; }
.bi-skip-forward::before { content: "\f55e"; }
.bi-skip-start-btn-fill::before { content: "\f55f"; }
.bi-skip-start-btn::before { content: "\f560"; }
.bi-skip-start-circle-fill::before { content: "\f561"; }
.bi-skip-start-circle::before { content: "\f562"; }
.bi-skip-start-fill::before { content: "\f563"; }
.bi-skip-start::before { content: "\f564"; }
.bi-slack::before { content: "\f565"; }
.bi-slash-circle-fill::before { content: "\f566"; }
.bi-slash-circle::before { content: "\f567"; }
.bi-slash-square-fill::before { content: "\f568"; }
.bi-slash-square::before { content: "\f569"; }
.bi-slash::before { content: "\f56a"; }
.bi-sliders::before { content: "\f56b"; }
.bi-smartwatch::before { content: "\f56c"; }
.bi-snow::before { content: "\f56d"; }
.bi-snow2::before { content: "\f56e"; }
.bi-snow3::before { content: "\f56f"; }
.bi-sort-alpha-down-alt::before { content: "\f570"; }
.bi-sort-alpha-down::before { content: "\f571"; }
.bi-sort-alpha-up-alt::before { content: "\f572"; }
.bi-sort-alpha-up::before { content: "\f573"; }
.bi-sort-down-alt::before { content: "\f574"; }
.bi-sort-down::before { content: "\f575"; }
.bi-sort-numeric-down-alt::before { content: "\f576"; }
.bi-sort-numeric-down::before { content: "\f577"; }
.bi-sort-numeric-up-alt::before { content: "\f578"; }
.bi-sort-numeric-up::before { content: "\f579"; }
.bi-sort-up-alt::before { content: "\f57a"; }
.bi-sort-up::before { content: "\f57b"; }
.bi-soundwave::before { content: "\f57c"; }
.bi-speaker-fill::before { content: "\f57d"; }
.bi-speaker::before { content: "\f57e"; }
.bi-speedometer::before { content: "\f57f"; }
.bi-speedometer2::before { content: "\f580"; }
.bi-spellcheck::before { content: "\f581"; }
.bi-square-fill::before { content: "\f582"; }
.bi-square-half::before { content: "\f583"; }
.bi-square::before { content: "\f584"; }
.bi-stack::before { content: "\f585"; }
.bi-star-fill::before { content: "\f586"; }
.bi-star-half::before { content: "\f587"; }
.bi-star::before { content: "\f588"; }
.bi-stars::before { content: "\f589"; }
.bi-stickies-fill::before { content: "\f58a"; }
.bi-stickies::before { content: "\f58b"; }
.bi-sticky-fill::before { content: "\f58c"; }
.bi-sticky::before { content: "\f58d"; }
.bi-stop-btn-fill::before { content: "\f58e"; }
.bi-stop-btn::before { content: "\f58f"; }
.bi-stop-circle-fill::before { content: "\f590"; }
.bi-stop-circle::before { content: "\f591"; }
.bi-stop-fill::before { content: "\f592"; }
.bi-stop::before { content: "\f593"; }
.bi-stoplights-fill::before { content: "\f594"; }
.bi-stoplights::before { content: "\f595"; }
.bi-stopwatch-fill::before { content: "\f596"; }
.bi-stopwatch::before { content: "\f597"; }
.bi-subtract::before { content: "\f598"; }
.bi-suit-club-fill::before { content: "\f599"; }
.bi-suit-club::before { content: "\f59a"; }
.bi-suit-diamond-fill::before { content: "\f59b"; }
.bi-suit-diamond::before { content: "\f59c"; }
.bi-suit-heart-fill::before { content: "\f59d"; }
.bi-suit-heart::before { content: "\f59e"; }
.bi-suit-spade-fill::before { content: "\f59f"; }
.bi-suit-spade::before { content: "\f5a0"; }
.bi-sun-fill::before { content: "\f5a1"; }
.bi-sun::before { content: "\f5a2"; }
.bi-sunglasses::before { content: "\f5a3"; }
.bi-sunrise-fill::before { content: "\f5a4"; }
.bi-sunrise::before { content: "\f5a5"; }
.bi-sunset-fill::before { content: "\f5a6"; }
.bi-sunset::before { content: "\f5a7"; }
.bi-symmetry-horizontal::before { content: "\f5a8"; }
.bi-symmetry-vertical::before { content: "\f5a9"; }
.bi-table::before { content: "\f5aa"; }
.bi-tablet-fill::before { content: "\f5ab"; }
.bi-tablet-landscape-fill::before { content: "\f5ac"; }
.bi-tablet-landscape::before { content: "\f5ad"; }
.bi-tablet::before { content: "\f5ae"; }
.bi-tag-fill::before { content: "\f5af"; }
.bi-tag::before { content: "\f5b0"; }
.bi-tags-fill::before { content: "\f5b1"; }
.bi-tags::before { content: "\f5b2"; }
.bi-telegram::before { content: "\f5b3"; }
.bi-telephone-fill::before { content: "\f5b4"; }
.bi-telephone-forward-fill::before { content: "\f5b5"; }
.bi-telephone-forward::before { content: "\f5b6"; }
.bi-telephone-inbound-fill::before { content: "\f5b7"; }
.bi-telephone-inbound::before { content: "\f5b8"; }
.bi-telephone-minus-fill::before { content: "\f5b9"; }
.bi-telephone-minus::before { content: "\f5ba"; }
.bi-telephone-outbound-fill::before { content: "\f5bb"; }
.bi-telephone-outbound::before { content: "\f5bc"; }
.bi-telephone-plus-fill::before { content: "\f5bd"; }
.bi-telephone-plus::before { content: "\f5be"; }
.bi-telephone-x-fill::before { content: "\f5bf"; }
.bi-telephone-x::before { content: "\f5c0"; }
.bi-telephone::before { content: "\f5c1"; }
.bi-terminal-fill::before { content: "\f5c2"; }
.bi-terminal::before { content: "\f5c3"; }
.bi-text-center::before { content: "\f5c4"; }
.bi-text-indent-left::before { content: "\f5c5"; }
.bi-text-indent-right::before { content: "\f5c6"; }
.bi-text-left::before { content: "\f5c7"; }
.bi-text-paragraph::before { content: "\f5c8"; }
.bi-text-right::before { content: "\f5c9"; }
.bi-textarea-resize::before { content: "\f5ca"; }
.bi-textarea-t::before { content: "\f5cb"; }
.bi-textarea::before { content: "\f5cc"; }
.bi-thermometer-half::before { content: "\f5cd"; }
.bi-thermometer-high::before { content: "\f5ce"; }
.bi-thermometer-low::before { content: "\f5cf"; }
.bi-thermometer-snow::before { content: "\f5d0"; }
.bi-thermometer-sun::before { content: "\f5d1"; }
.bi-thermometer::before { content: "\f5d2"; }
.bi-three-dots-vertical::before { content: "\f5d3"; }
.bi-three-dots::before { content: "\f5d4"; }
.bi-toggle-off::before { content: "\f5d5"; }
.bi-toggle-on::before { content: "\f5d6"; }
.bi-toggle2-off::before { content: "\f5d7"; }
.bi-toggle2-on::before { content: "\f5d8"; }
.bi-toggles::before { content: "\f5d9"; }
.bi-toggles2::before { content: "\f5da"; }
.bi-tools::before { content: "\f5db"; }
.bi-tornado::before { content: "\f5dc"; }
.bi-trash-fill::before { content: "\f5dd"; }
.bi-trash::before { content: "\f5de"; }
.bi-trash2-fill::before { content: "\f5df"; }
.bi-trash2::before { content: "\f5e0"; }
.bi-tree-fill::before { content: "\f5e1"; }
.bi-tree::before { content: "\f5e2"; }
.bi-triangle-fill::before { content: "\f5e3"; }
.bi-triangle-half::before { content: "\f5e4"; }
.bi-triangle::before { content: "\f5e5"; }
.bi-trophy-fill::before { content: "\f5e6"; }
.bi-trophy::before { content: "\f5e7"; }
.bi-tropical-storm::before { content: "\f5e8"; }
.bi-truck-flatbed::before { content: "\f5e9"; }
.bi-truck::before { content: "\f5ea"; }
.bi-tsunami::before { content: "\f5eb"; }
.bi-tv-fill::before { content: "\f5ec"; }
.bi-tv::before { content: "\f5ed"; }
.bi-twitch::before { content: "\f5ee"; }
.bi-twitter::before { content: "\f5ef"; }
.bi-type-bold::before { content: "\f5f0"; }
.bi-type-h1::before { content: "\f5f1"; }
.bi-type-h2::before { content: "\f5f2"; }
.bi-type-h3::before { content: "\f5f3"; }
.bi-type-italic::before { content: "\f5f4"; }
.bi-type-strikethrough::before { content: "\f5f5"; }
.bi-type-underline::before { content: "\f5f6"; }
.bi-type::before { content: "\f5f7"; }
.bi-ui-checks-grid::before { content: "\f5f8"; }
.bi-ui-checks::before { content: "\f5f9"; }
.bi-ui-radios-grid::before { content: "\f5fa"; }
.bi-ui-radios::before { content: "\f5fb"; }
.bi-umbrella-fill::before { content: "\f5fc"; }
.bi-umbrella::before { content: "\f5fd"; }
.bi-union::before { content: "\f5fe"; }
.bi-unlock-fill::before { content: "\f5ff"; }
.bi-unlock::before { content: "\f600"; }
.bi-upc-scan::before { content: "\f601"; }
.bi-upc::before { content: "\f602"; }
.bi-upload::before { content: "\f603"; }
.bi-vector-pen::before { content: "\f604"; }
.bi-view-list::before { content: "\f605"; }
.bi-view-stacked::before { content: "\f606"; }
.bi-vinyl-fill::before { content: "\f607"; }
.bi-vinyl::before { content: "\f608"; }
.bi-voicemail::before { content: "\f609"; }
.bi-volume-down-fill::before { content: "\f60a"; }
.bi-volume-down::before { content: "\f60b"; }
.bi-volume-mute-fill::before { content: "\f60c"; }
.bi-volume-mute::before { content: "\f60d"; }
.bi-volume-off-fill::before { content: "\f60e"; }
.bi-volume-off::before { content: "\f60f"; }
.bi-volume-up-fill::before { content: "\f610"; }
.bi-volume-up::before { content: "\f611"; }
.bi-vr::before { content: "\f612"; }
.bi-wallet-fill::before { content: "\f613"; }
.bi-wallet::before { content: "\f614"; }
.bi-wallet2::before { content: "\f615"; }
.bi-watch::before { content: "\f616"; }
.bi-water::before { content: "\f617"; }
.bi-whatsapp::before { content: "\f618"; }
.bi-wifi-1::before { content: "\f619"; }
.bi-wifi-2::before { content: "\f61a"; }
.bi-wifi-off::before { content: "\f61b"; }
.bi-wifi::before { content: "\f61c"; }
.bi-wind::before { content: "\f61d"; }
.bi-window-dock::before { content: "\f61e"; }
.bi-window-sidebar::before { content: "\f61f"; }
.bi-window::before { content: "\f620"; }
.bi-wrench::before { content: "\f621"; }
.bi-x-circle-fill::before { content: "\f622"; }
.bi-x-circle::before { content: "\f623"; }
.bi-x-diamond-fill::before { content: "\f624"; }
.bi-x-diamond::before { content: "\f625"; }
.bi-x-octagon-fill::before { content: "\f626"; }
.bi-x-octagon::before { content: "\f627"; }
.bi-x-square-fill::before { content: "\f628"; }
.bi-x-square::before { content: "\f629"; }
.bi-x::before { content: "\f62a"; }
.bi-youtube::before { content: "\f62b"; }
.bi-zoom-in::before { content: "\f62c"; }
.bi-zoom-out::before { content: "\f62d"; }
.bi-bank::before { content: "\f62e"; }
.bi-bank2::before { content: "\f62f"; }
.bi-bell-slash-fill::before { content: "\f630"; }
.bi-bell-slash::before { content: "\f631"; }
.bi-cash-coin::before { content: "\f632"; }
.bi-check-lg::before { content: "\f633"; }
.bi-coin::before { content: "\f634"; }
.bi-currency-bitcoin::before { content: "\f635"; }
.bi-currency-dollar::before { content: "\f636"; }
.bi-currency-euro::before { content: "\f637"; }
.bi-currency-exchange::before { content: "\f638"; }
.bi-currency-pound::before { content: "\f639"; }
.bi-currency-yen::before { content: "\f63a"; }
.bi-dash-lg::before { content: "\f63b"; }
.bi-exclamation-lg::before { content: "\f63c"; }
.bi-file-earmark-pdf-fill::before { content: "\f63d"; }
.bi-file-earmark-pdf::before { content: "\f63e"; }
.bi-file-pdf-fill::before { content: "\f63f"; }
.bi-file-pdf::before { content: "\f640"; }
.bi-gender-ambiguous::before { content: "\f641"; }
.bi-gender-female::before { content: "\f642"; }
.bi-gender-male::before { content: "\f643"; }
.bi-gender-trans::before { content: "\f644"; }
.bi-headset-vr::before { content: "\f645"; }
.bi-info-lg::before { content: "\f646"; }
.bi-mastodon::before { content: "\f647"; }
.bi-messenger::before { content: "\f648"; }
.bi-piggy-bank-fill::before { content: "\f649"; }
.bi-piggy-bank::before { content: "\f64a"; }
.bi-pin-map-fill::before { content: "\f64b"; }
.bi-pin-map::before { content: "\f64c"; }
.bi-plus-lg::before { content: "\f64d"; }
.bi-question-lg::before { content: "\f64e"; }
.bi-recycle::before { content: "\f64f"; }
.bi-reddit::before { content: "\f650"; }
.bi-safe-fill::before { content: "\f651"; }
.bi-safe2-fill::before { content: "\f652"; }
.bi-safe2::before { content: "\f653"; }
.bi-sd-card-fill::before { content: "\f654"; }
.bi-sd-card::before { content: "\f655"; }
.bi-skype::before { content: "\f656"; }
.bi-slash-lg::before { content: "\f657"; }
.bi-translate::before { content: "\f658"; }
.bi-x-lg::before { content: "\f659"; }
.bi-safe::before { content: "\f65a"; }
.bi-apple::before { content: "\f65b"; }
.bi-microsoft::before { content: "\f65d"; }
.bi-windows::before { content: "\f65e"; }
.bi-behance::before { content: "\f65c"; }
.bi-dribbble::before { content: "\f65f"; }
.bi-line::before { content: "\f660"; }
.bi-medium::before { content: "\f661"; }
.bi-paypal::before { content: "\f662"; }
.bi-pinterest::before { content: "\f663"; }
.bi-signal::before { content: "\f664"; }
.bi-snapchat::before { content: "\f665"; }
.bi-spotify::before { content: "\f666"; }
.bi-stack-overflow::before { content: "\f667"; }
.bi-strava::before { content: "\f668"; }
.bi-wordpress::before { content: "\f669"; }
.bi-vimeo::before { content: "\f66a"; }
.bi-activity::before { content: "\f66b"; }
.bi-easel2-fill::before { content: "\f66c"; }
.bi-easel2::before { content: "\f66d"; }
.bi-easel3-fill::before { content: "\f66e"; }
.bi-easel3::before { content: "\f66f"; }
.bi-fan::before { content: "\f670"; }
.bi-fingerprint::before { content: "\f671"; }
.bi-graph-down-arrow::before { content: "\f672"; }
.bi-graph-up-arrow::before { content: "\f673"; }
.bi-hypnotize::before { content: "\f674"; }
.bi-magic::before { content: "\f675"; }
.bi-person-rolodex::before { content: "\f676"; }
.bi-person-video::before { content: "\f677"; }
.bi-person-video2::before { content: "\f678"; }
.bi-person-video3::before { content: "\f679"; }
.bi-person-workspace::before { content: "\f67a"; }
.bi-radioactive::before { content: "\f67b"; }
.bi-webcam-fill::before { content: "\f67c"; }
.bi-webcam::before { content: "\f67d"; }
.bi-yin-yang::before { content: "\f67e"; }
.bi-bandaid-fill::before { content: "\f680"; }
.bi-bandaid::before { content: "\f681"; }
.bi-bluetooth::before { content: "\f682"; }
.bi-body-text::before { content: "\f683"; }
.bi-boombox::before { content: "\f684"; }
.bi-boxes::before { content: "\f685"; }
.bi-dpad-fill::before { content: "\f686"; }
.bi-dpad::before { content: "\f687"; }
.bi-ear-fill::before { content: "\f688"; }
.bi-ear::before { content: "\f689"; }
.bi-envelope-check-fill::before { content: "\f68b"; }
.bi-envelope-check::before { content: "\f68c"; }
.bi-envelope-dash-fill::before { content: "\f68e"; }
.bi-envelope-dash::before { content: "\f68f"; }
.bi-envelope-exclamation-fill::before { content: "\f691"; }
.bi-envelope-exclamation::before { content: "\f692"; }
.bi-envelope-plus-fill::before { content: "\f693"; }
.bi-envelope-plus::before { content: "\f694"; }
.bi-envelope-slash-fill::before { content: "\f696"; }
.bi-envelope-slash::before { content: "\f697"; }
.bi-envelope-x-fill::before { content: "\f699"; }
.bi-envelope-x::before { content: "\f69a"; }
.bi-explicit-fill::before { content: "\f69b"; }
.bi-explicit::before { content: "\f69c"; }
.bi-git::before { content: "\f69d"; }
.bi-infinity::before { content: "\f69e"; }
.bi-list-columns-reverse::before { content: "\f69f"; }
.bi-list-columns::before { content: "\f6a0"; }
.bi-meta::before { content: "\f6a1"; }
.bi-nintendo-switch::before { content: "\f6a4"; }
.bi-pc-display-horizontal::before { content: "\f6a5"; }
.bi-pc-display::before { content: "\f6a6"; }
.bi-pc-horizontal::before { content: "\f6a7"; }
.bi-pc::before { content: "\f6a8"; }
.bi-playstation::before { content: "\f6a9"; }
.bi-plus-slash-minus::before { content: "\f6aa"; }
.bi-projector-fill::before { content: "\f6ab"; }
.bi-projector::before { content: "\f6ac"; }
.bi-qr-code-scan::before { content: "\f6ad"; }
.bi-qr-code::before { content: "\f6ae"; }
.bi-quora::before { content: "\f6af"; }
.bi-quote::before { content: "\f6b0"; }
.bi-robot::before { content: "\f6b1"; }
.bi-send-check-fill::before { content: "\f6b2"; }
.bi-send-check::before { content: "\f6b3"; }
.bi-send-dash-fill::before { content: "\f6b4"; }
.bi-send-dash::before { content: "\f6b5"; }
.bi-send-exclamation-fill::before { content: "\f6b7"; }
.bi-send-exclamation::before { content: "\f6b8"; }
.bi-send-fill::before { content: "\f6b9"; }
.bi-send-plus-fill::before { content: "\f6ba"; }
.bi-send-plus::before { content: "\f6bb"; }
.bi-send-slash-fill::before { content: "\f6bc"; }
.bi-send-slash::before { content: "\f6bd"; }
.bi-send-x-fill::before { content: "\f6be"; }
.bi-send-x::before { content: "\f6bf"; }
.bi-send::before { content: "\f6c0"; }
.bi-steam::before { content: "\f6c1"; }
.bi-terminal-dash::before { content: "\f6c3"; }
.bi-terminal-plus::before { content: "\f6c4"; }
.bi-terminal-split::before { content: "\f6c5"; }
.bi-ticket-detailed-fill::before { content: "\f6c6"; }
.bi-ticket-detailed::before { content: "\f6c7"; }
.bi-ticket-fill::before { content: "\f6c8"; }
.bi-ticket-perforated-fill::before { content: "\f6c9"; }
.bi-ticket-perforated::before { content: "\f6ca"; }
.bi-ticket::before { content: "\f6cb"; }
.bi-tiktok::before { content: "\f6cc"; }
.bi-window-dash::before { content: "\f6cd"; }
.bi-window-desktop::before { content: "\f6ce"; }
.bi-window-fullscreen::before { content: "\f6cf"; }
.bi-window-plus::before { content: "\f6d0"; }
.bi-window-split::before { content: "\f6d1"; }
.bi-window-stack::before { content: "\f6d2"; }
.bi-window-x::before { content: "\f6d3"; }
.bi-xbox::before { content: "\f6d4"; }
.bi-ethernet::before { content: "\f6d5"; }
.bi-hdmi-fill::before { content: "\f6d6"; }
.bi-hdmi::before { content: "\f6d7"; }
.bi-usb-c-fill::before { content: "\f6d8"; }
.bi-usb-c::before { content: "\f6d9"; }
.bi-usb-fill::before { content: "\f6da"; }
.bi-usb-plug-fill::before { content: "\f6db"; }
.bi-usb-plug::before { content: "\f6dc"; }
.bi-usb-symbol::before { content: "\f6dd"; }
.bi-usb::before { content: "\f6de"; }
.bi-boombox-fill::before { content: "\f6df"; }
.bi-displayport::before { content: "\f6e1"; }
.bi-gpu-card::before { content: "\f6e2"; }
.bi-memory::before { content: "\f6e3"; }
.bi-modem-fill::before { content: "\f6e4"; }
.bi-modem::before { content: "\f6e5"; }
.bi-motherboard-fill::before { content: "\f6e6"; }
.bi-motherboard::before { content: "\f6e7"; }
.bi-optical-audio-fill::before { content: "\f6e8"; }
.bi-optical-audio::before { content: "\f6e9"; }
.bi-pci-card::before { content: "\f6ea"; }
.bi-router-fill::before { content: "\f6eb"; }
.bi-router::before { content: "\f6ec"; }
.bi-thunderbolt-fill::before { content: "\f6ef"; }
.bi-thunderbolt::before { content: "\f6f0"; }
.bi-usb-drive-fill::before { content: "\f6f1"; }
.bi-usb-drive::before { content: "\f6f2"; }
.bi-usb-micro-fill::before { content: "\f6f3"; }
.bi-usb-micro::before { content: "\f6f4"; }
.bi-usb-mini-fill::before { content: "\f6f5"; }
.bi-usb-mini::before { content: "\f6f6"; }
.bi-cloud-haze2::before { content: "\f6f7"; }
.bi-device-hdd-fill::before { content: "\f6f8"; }
.bi-device-hdd::before { content: "\f6f9"; }
.bi-device-ssd-fill::before { content: "\f6fa"; }
.bi-device-ssd::before { content: "\f6fb"; }
.bi-displayport-fill::before { content: "\f6fc"; }
.bi-mortarboard-fill::before { content: "\f6fd"; }
.bi-mortarboard::before { content: "\f6fe"; }
.bi-terminal-x::before { content: "\f6ff"; }
.bi-arrow-through-heart-fill::before { content: "\f700"; }
.bi-arrow-through-heart::before { content: "\f701"; }
.bi-badge-sd-fill::before { content: "\f702"; }
.bi-badge-sd::before { content: "\f703"; }
.bi-bag-heart-fill::before { content: "\f704"; }
.bi-bag-heart::before { content: "\f705"; }
.bi-balloon-fill::before { content: "\f706"; }
.bi-balloon-heart-fill::before { content: "\f707"; }
.bi-balloon-heart::before { content: "\f708"; }
.bi-balloon::before { content: "\f709"; }
.bi-box2-fill::before { content: "\f70a"; }
.bi-box2-heart-fill::before { content: "\f70b"; }
.bi-box2-heart::before { content: "\f70c"; }
.bi-box2::before { content: "\f70d"; }
.bi-braces-asterisk::before { content: "\f70e"; }
.bi-calendar-heart-fill::before { content: "\f70f"; }
.bi-calendar-heart::before { content: "\f710"; }
.bi-calendar2-heart-fill::before { content: "\f711"; }
.bi-calendar2-heart::before { content: "\f712"; }
.bi-chat-heart-fill::before { content: "\f713"; }
.bi-chat-heart::before { content: "\f714"; }
.bi-chat-left-heart-fill::before { content: "\f715"; }
.bi-chat-left-heart::before { content: "\f716"; }
.bi-chat-right-heart-fill::before { content: "\f717"; }
.bi-chat-right-heart::before { content: "\f718"; }
.bi-chat-square-heart-fill::before { content: "\f719"; }
.bi-chat-square-heart::before { content: "\f71a"; }
.bi-clipboard-check-fill::before { content: "\f71b"; }
.bi-clipboard-data-fill::before { content: "\f71c"; }
.bi-clipboard-fill::before { content: "\f71d"; }
.bi-clipboard-heart-fill::before { content: "\f71e"; }
.bi-clipboard-heart::before { content: "\f71f"; }
.bi-clipboard-minus-fill::before { content: "\f720"; }
.bi-clipboard-plus-fill::before { content: "\f721"; }
.bi-clipboard-pulse::before { content: "\f722"; }
.bi-clipboard-x-fill::before { content: "\f723"; }
.bi-clipboard2-check-fill::before { content: "\f724"; }
.bi-clipboard2-check::before { content: "\f725"; }
.bi-clipboard2-data-fill::before { content: "\f726"; }
.bi-clipboard2-data::before { content: "\f727"; }
.bi-clipboard2-fill::before { content: "\f728"; }
.bi-clipboard2-heart-fill::before { content: "\f729"; }
.bi-clipboard2-heart::before { content: "\f72a"; }
.bi-clipboard2-minus-fill::before { content: "\f72b"; }
.bi-clipboard2-minus::before { content: "\f72c"; }
.bi-clipboard2-plus-fill::before { content: "\f72d"; }
.bi-clipboard2-plus::before { content: "\f72e"; }
.bi-clipboard2-pulse-fill::before { content: "\f72f"; }
.bi-clipboard2-pulse::before { content: "\f730"; }
.bi-clipboard2-x-fill::before { content: "\f731"; }
.bi-clipboard2-x::before { content: "\f732"; }
.bi-clipboard2::before { content: "\f733"; }
.bi-emoji-kiss-fill::before { content: "\f734"; }
.bi-emoji-kiss::before { content: "\f735"; }
.bi-envelope-heart-fill::before { content: "\f736"; }
.bi-envelope-heart::before { content: "\f737"; }
.bi-envelope-open-heart-fill::before { content: "\f738"; }
.bi-envelope-open-heart::before { content: "\f739"; }
.bi-envelope-paper-fill::before { content: "\f73a"; }
.bi-envelope-paper-heart-fill::before { content: "\f73b"; }
.bi-envelope-paper-heart::before { content: "\f73c"; }
.bi-envelope-paper::before { content: "\f73d"; }
.bi-filetype-aac::before { content: "\f73e"; }
.bi-filetype-ai::before { content: "\f73f"; }
.bi-filetype-bmp::before { content: "\f740"; }
.bi-filetype-cs::before { content: "\f741"; }
.bi-filetype-css::before { content: "\f742"; }
.bi-filetype-csv::before { content: "\f743"; }
.bi-filetype-doc::before { content: "\f744"; }
.bi-filetype-docx::before { content: "\f745"; }
.bi-filetype-exe::before { content: "\f746"; }
.bi-filetype-gif::before { content: "\f747"; }
.bi-filetype-heic::before { content: "\f748"; }
.bi-filetype-html::before { content: "\f749"; }
.bi-filetype-java::before { content: "\f74a"; }
.bi-filetype-jpg::before { content: "\f74b"; }
.bi-filetype-js::before { content: "\f74c"; }
.bi-filetype-jsx::before { content: "\f74d"; }
.bi-filetype-key::before { content: "\f74e"; }
.bi-filetype-m4p::before { content: "\f74f"; }
.bi-filetype-md::before { content: "\f750"; }
.bi-filetype-mdx::before { content: "\f751"; }
.bi-filetype-mov::before { content: "\f752"; }
.bi-filetype-mp3::before { content: "\f753"; }
.bi-filetype-mp4::before { content: "\f754"; }
.bi-filetype-otf::before { content: "\f755"; }
.bi-filetype-pdf::before { content: "\f756"; }
.bi-filetype-php::before { content: "\f757"; }
.bi-filetype-png::before { content: "\f758"; }
.bi-filetype-ppt::before { content: "\f75a"; }
.bi-filetype-psd::before { content: "\f75b"; }
.bi-filetype-py::before { content: "\f75c"; }
.bi-filetype-raw::before { content: "\f75d"; }
.bi-filetype-rb::before { content: "\f75e"; }
.bi-filetype-sass::before { content: "\f75f"; }
.bi-filetype-scss::before { content: "\f760"; }
.bi-filetype-sh::before { content: "\f761"; }
.bi-filetype-svg::before { content: "\f762"; }
.bi-filetype-tiff::before { content: "\f763"; }
.bi-filetype-tsx::before { content: "\f764"; }
.bi-filetype-ttf::before { content: "\f765"; }
.bi-filetype-txt::before { content: "\f766"; }
.bi-filetype-wav::before { content: "\f767"; }
.bi-filetype-woff::before { content: "\f768"; }
.bi-filetype-xls::before { content: "\f76a"; }
.bi-filetype-xml::before { content: "\f76b"; }
.bi-filetype-yml::before { content: "\f76c"; }
.bi-heart-arrow::before { content: "\f76d"; }
.bi-heart-pulse-fill::before { content: "\f76e"; }
.bi-heart-pulse::before { content: "\f76f"; }
.bi-heartbreak-fill::before { content: "\f770"; }
.bi-heartbreak::before { content: "\f771"; }
.bi-hearts::before { content: "\f772"; }
.bi-hospital-fill::before { content: "\f773"; }
.bi-hospital::before { content: "\f774"; }
.bi-house-heart-fill::before { content: "\f775"; }
.bi-house-heart::before { content: "\f776"; }
.bi-incognito::before { content: "\f777"; }
.bi-magnet-fill::before { content: "\f778"; }
.bi-magnet::before { content: "\f779"; }
.bi-person-heart::before { content: "\f77a"; }
.bi-person-hearts::before { content: "\f77b"; }
.bi-phone-flip::before { content: "\f77c"; }
.bi-plugin::before { content: "\f77d"; }
.bi-postage-fill::before { content: "\f77e"; }
.bi-postage-heart-fill::before { content: "\f77f"; }
.bi-postage-heart::before { content: "\f780"; }
.bi-postage::before { content: "\f781"; }
.bi-postcard-fill::before { content: "\f782"; }
.bi-postcard-heart-fill::before { content: "\f783"; }
.bi-postcard-heart::before { content: "\f784"; }
.bi-postcard::before { content: "\f785"; }
.bi-search-heart-fill::before { content: "\f786"; }
.bi-search-heart::before { content: "\f787"; }
.bi-sliders2-vertical::before { content: "\f788"; }
.bi-sliders2::before { content: "\f789"; }
.bi-trash3-fill::before { content: "\f78a"; }
.bi-trash3::before { content: "\f78b"; }
.bi-valentine::before { content: "\f78c"; }
.bi-valentine2::before { content: "\f78d"; }
.bi-wrench-adjustable-circle-fill::before { content: "\f78e"; }
.bi-wrench-adjustable-circle::before { content: "\f78f"; }
.bi-wrench-adjustable::before { content: "\f790"; }
.bi-filetype-json::before { content: "\f791"; }
.bi-filetype-pptx::before { content: "\f792"; }
.bi-filetype-xlsx::before { content: "\f793"; }
.bi-1-circle-fill::before { content: "\f796"; }
.bi-1-circle::before { content: "\f797"; }
.bi-1-square-fill::before { content: "\f798"; }
.bi-1-square::before { content: "\f799"; }
.bi-2-circle-fill::before { content: "\f79c"; }
.bi-2-circle::before { content: "\f79d"; }
.bi-2-square-fill::before { content: "\f79e"; }
.bi-2-square::before { content: "\f79f"; }
.bi-3-circle-fill::before { content: "\f7a2"; }
.bi-3-circle::before { content: "\f7a3"; }
.bi-3-square-fill::before { content: "\f7a4"; }
.bi-3-square::before { content: "\f7a5"; }
.bi-4-circle-fill::before { content: "\f7a8"; }
.bi-4-circle::before { content: "\f7a9"; }
.bi-4-square-fill::before { content: "\f7aa"; }
.bi-4-square::before { content: "\f7ab"; }
.bi-5-circle-fill::before { content: "\f7ae"; }
.bi-5-circle::before { content: "\f7af"; }
.bi-5-square-fill::before { content: "\f7b0"; }
.bi-5-square::before { content: "\f7b1"; }
.bi-6-circle-fill::before { content: "\f7b4"; }
.bi-6-circle::before { content: "\f7b5"; }
.bi-6-square-fill::before { content: "\f7b6"; }
.bi-6-square::before { content: "\f7b7"; }
.bi-7-circle-fill::before { content: "\f7ba"; }
.bi-7-circle::before { content: "\f7bb"; }
.bi-7-square-fill::before { content: "\f7bc"; }
.bi-7-square::before { content: "\f7bd"; }
.bi-8-circle-fill::before { content: "\f7c0"; }
.bi-8-circle::before { content: "\f7c1"; }
.bi-8-square-fill::before { content: "\f7c2"; }
.bi-8-square::before { content: "\f7c3"; }
.bi-9-circle-fill::before { content: "\f7c6"; }
.bi-9-circle::before { content: "\f7c7"; }
.bi-9-square-fill::before { content: "\f7c8"; }
.bi-9-square::before { content: "\f7c9"; }
.bi-airplane-engines-fill::before { content: "\f7ca"; }
.bi-airplane-engines::before { content: "\f7cb"; }
.bi-airplane-fill::before { content: "\f7cc"; }
.bi-airplane::before { content: "\f7cd"; }
.bi-alexa::before { content: "\f7ce"; }
.bi-alipay::before { content: "\f7cf"; }
.bi-android::before { content: "\f7d0"; }
.bi-android2::before { content: "\f7d1"; }
.bi-box-fill::before { content: "\f7d2"; }
.bi-box-seam-fill::before { content: "\f7d3"; }
.bi-browser-chrome::before { content: "\f7d4"; }
.bi-browser-edge::before { content: "\f7d5"; }
.bi-browser-firefox::before { content: "\f7d6"; }
.bi-browser-safari::before { content: "\f7d7"; }
.bi-c-circle-fill::before { content: "\f7da"; }
.bi-c-circle::before { content: "\f7db"; }
.bi-c-square-fill::before { content: "\f7dc"; }
.bi-c-square::before { content: "\f7dd"; }
.bi-capsule-pill::before { content: "\f7de"; }
.bi-capsule::before { content: "\f7df"; }
.bi-car-front-fill::before { content: "\f7e0"; }
.bi-car-front::before { content: "\f7e1"; }
.bi-cassette-fill::before { content: "\f7e2"; }
.bi-cassette::before { content: "\f7e3"; }
.bi-cc-circle-fill::before { content: "\f7e6"; }
.bi-cc-circle::before { content: "\f7e7"; }
.bi-cc-square-fill::before { content: "\f7e8"; }
.bi-cc-square::before { content: "\f7e9"; }
.bi-cup-hot-fill::before { content: "\f7ea"; }
.bi-cup-hot::before { content: "\f7eb"; }
.bi-currency-rupee::before { content: "\f7ec"; }
.bi-dropbox::before { content: "\f7ed"; }
.bi-escape::before { content: "\f7ee"; }
.bi-fast-forward-btn-fill::before { content: "\f7ef"; }
.bi-fast-forward-btn::before { content: "\f7f0"; }
.bi-fast-forward-circle-fill::before { content: "\f7f1"; }
.bi-fast-forward-circle::before { content: "\f7f2"; }
.bi-fast-forward-fill::before { content: "\f7f3"; }
.bi-fast-forward::before { content: "\f7f4"; }
.bi-filetype-sql::before { content: "\f7f5"; }
.bi-fire::before { content: "\f7f6"; }
.bi-google-play::before { content: "\f7f7"; }
.bi-h-circle-fill::before { content: "\f7fa"; }
.bi-h-circle::before { content: "\f7fb"; }
.bi-h-square-fill::before { content: "\f7fc"; }
.bi-h-square::before { content: "\f7fd"; }
.bi-indent::before { content: "\f7fe"; }
.bi-lungs-fill::before { content: "\f7ff"; }
.bi-lungs::before { content: "\f800"; }
.bi-microsoft-teams::before { content: "\f801"; }
.bi-p-circle-fill::before { content: "\f804"; }
.bi-p-circle::before { content: "\f805"; }
.bi-p-square-fill::before { content: "\f806"; }
.bi-p-square::before { content: "\f807"; }
.bi-pass-fill::before { content: "\f808"; }
.bi-pass::before { content: "\f809"; }
.bi-prescription::before { content: "\f80a"; }
.bi-prescription2::before { content: "\f80b"; }
.bi-r-circle-fill::before { content: "\f80e"; }
.bi-r-circle::before { content: "\f80f"; }
.bi-r-square-fill::before { content: "\f810"; }
.bi-r-square::before { content: "\f811"; }
.bi-repeat-1::before { content: "\f812"; }
.bi-repeat::before { content: "\f813"; }
.bi-rewind-btn-fill::before { content: "\f814"; }
.bi-rewind-btn::before { content: "\f815"; }
.bi-rewind-circle-fill::before { content: "\f816"; }
.bi-rewind-circle::before { content: "\f817"; }
.bi-rewind-fill::before { content: "\f818"; }
.bi-rewind::before { content: "\f819"; }
.bi-train-freight-front-fill::before { content: "\f81a"; }
.bi-train-freight-front::before { content: "\f81b"; }
.bi-train-front-fill::before { content: "\f81c"; }
.bi-train-front::before { content: "\f81d"; }
.bi-train-lightrail-front-fill::before { content: "\f81e"; }
.bi-train-lightrail-front::before { content: "\f81f"; }
.bi-truck-front-fill::before { content: "\f820"; }
.bi-truck-front::before { content: "\f821"; }
.bi-ubuntu::before { content: "\f822"; }
.bi-unindent::before { content: "\f823"; }
.bi-unity::before { content: "\f824"; }
.bi-universal-access-circle::before { content: "\f825"; }
.bi-universal-access::before { content: "\f826"; }
.bi-virus::before { content: "\f827"; }
.bi-virus2::before { content: "\f828"; }
.bi-wechat::before { content: "\f829"; }
.bi-yelp::before { content: "\f82a"; }
.bi-sign-stop-fill::before { content: "\f82b"; }
.bi-sign-stop-lights-fill::before { content: "\f82c"; }
.bi-sign-stop-lights::before { content: "\f82d"; }
.bi-sign-stop::before { content: "\f82e"; }
.bi-sign-turn-left-fill::before { content: "\f82f"; }
.bi-sign-turn-left::before { content: "\f830"; }
.bi-sign-turn-right-fill::before { content: "\f831"; }
.bi-sign-turn-right::before { content: "\f832"; }
.bi-sign-turn-slight-left-fill::before { content: "\f833"; }
.bi-sign-turn-slight-left::before { content: "\f834"; }
.bi-sign-turn-slight-right-fill::before { content: "\f835"; }
.bi-sign-turn-slight-right::before { content: "\f836"; }
.bi-sign-yield-fill::before { content: "\f837"; }
.bi-sign-yield::before { content: "\f838"; }
.bi-ev-station-fill::before { content: "\f839"; }
.bi-ev-station::before { content: "\f83a"; }
.bi-fuel-pump-diesel-fill::before { content: "\f83b"; }
.bi-fuel-pump-diesel::before { content: "\f83c"; }
.bi-fuel-pump-fill::before { content: "\f83d"; }
.bi-fuel-pump::before { content: "\f83e"; }
.bi-0-circle-fill::before { content: "\f83f"; }
.bi-0-circle::before { content: "\f840"; }
.bi-0-square-fill::before { content: "\f841"; }
.bi-0-square::before { content: "\f842"; }
.bi-rocket-fill::before { content: "\f843"; }
.bi-rocket-takeoff-fill::before { content: "\f844"; }
.bi-rocket-takeoff::before { content: "\f845"; }
.bi-rocket::before { content: "\f846"; }
.bi-stripe::before { content: "\f847"; }
.bi-subscript::before { content: "\f848"; }
.bi-superscript::before { content: "\f849"; }
.bi-trello::before { content: "\f84a"; }
.bi-envelope-at-fill::before { content: "\f84b"; }
.bi-envelope-at::before { content: "\f84c"; }
.bi-regex::before { content: "\f84d"; }
.bi-text-wrap::before { content: "\f84e"; }
.bi-sign-dead-end-fill::before { content: "\f84f"; }
.bi-sign-dead-end::before { content: "\f850"; }
.bi-sign-do-not-enter-fill::before { content: "\f851"; }
.bi-sign-do-not-enter::before { content: "\f852"; }
.bi-sign-intersection-fill::before { content: "\f853"; }
.bi-sign-intersection-side-fill::before { content: "\f854"; }
.bi-sign-intersection-side::before { content: "\f855"; }
.bi-sign-intersection-t-fill::before { content: "\f856"; }
.bi-sign-intersection-t::before { content: "\f857"; }
.bi-sign-intersection-y-fill::before { content: "\f858"; }
.bi-sign-intersection-y::before { content: "\f859"; }
.bi-sign-intersection::before { content: "\f85a"; }
.bi-sign-merge-left-fill::before { content: "\f85b"; }
.bi-sign-merge-left::before { content: "\f85c"; }
.bi-sign-merge-right-fill::before { content: "\f85d"; }
.bi-sign-merge-right::before { content: "\f85e"; }
.bi-sign-no-left-turn-fill::before { content: "\f85f"; }
.bi-sign-no-left-turn::before { content: "\f860"; }
.bi-sign-no-parking-fill::before { content: "\f861"; }
.bi-sign-no-parking::before { content: "\f862"; }
.bi-sign-no-right-turn-fill::before { content: "\f863"; }
.bi-sign-no-right-turn::before { content: "\f864"; }
.bi-sign-railroad-fill::before { content: "\f865"; }
.bi-sign-railroad::before { content: "\f866"; }
.bi-building-add::before { content: "\f867"; }
.bi-building-check::before { content: "\f868"; }
.bi-building-dash::before { content: "\f869"; }
.bi-building-down::before { content: "\f86a"; }
.bi-building-exclamation::before { content: "\f86b"; }
.bi-building-fill-add::before { content: "\f86c"; }
.bi-building-fill-check::before { content: "\f86d"; }
.bi-building-fill-dash::before { content: "\f86e"; }
.bi-building-fill-down::before { content: "\f86f"; }
.bi-building-fill-exclamation::before { content: "\f870"; }
.bi-building-fill-gear::before { content: "\f871"; }
.bi-building-fill-lock::before { content: "\f872"; }
.bi-building-fill-slash::before { content: "\f873"; }
.bi-building-fill-up::before { content: "\f874"; }
.bi-building-fill-x::before { content: "\f875"; }
.bi-building-fill::before { content: "\f876"; }
.bi-building-gear::before { content: "\f877"; }
.bi-building-lock::before { content: "\f878"; }
.bi-building-slash::before { content: "\f879"; }
.bi-building-up::before { content: "\f87a"; }
.bi-building-x::before { content: "\f87b"; }
.bi-buildings-fill::before { content: "\f87c"; }
.bi-buildings::before { content: "\f87d"; }
.bi-bus-front-fill::before { content: "\f87e"; }
.bi-bus-front::before { content: "\f87f"; }
.bi-ev-front-fill::before { content: "\f880"; }
.bi-ev-front::before { content: "\f881"; }
.bi-globe-americas::before { content: "\f882"; }
.bi-globe-asia-australia::before { content: "\f883"; }
.bi-globe-central-south-asia::before { content: "\f884"; }
.bi-globe-europe-africa::before { content: "\f885"; }
.bi-house-add-fill::before { content: "\f886"; }
.bi-house-add::before { content: "\f887"; }
.bi-house-check-fill::before { content: "\f888"; }
.bi-house-check::before { content: "\f889"; }
.bi-house-dash-fill::before { content: "\f88a"; }
.bi-house-dash::before { content: "\f88b"; }
.bi-house-down-fill::before { content: "\f88c"; }
.bi-house-down::before { content: "\f88d"; }
.bi-house-exclamation-fill::before { content: "\f88e"; }
.bi-house-exclamation::before { content: "\f88f"; }
.bi-house-gear-fill::before { content: "\f890"; }
.bi-house-gear::before { content: "\f891"; }
.bi-house-lock-fill::before { content: "\f892"; }
.bi-house-lock::before { content: "\f893"; }
.bi-house-slash-fill::before { content: "\f894"; }
.bi-house-slash::before { content: "\f895"; }
.bi-house-up-fill::before { content: "\f896"; }
.bi-house-up::before { content: "\f897"; }
.bi-house-x-fill::before { content: "\f898"; }
.bi-house-x::before { content: "\f899"; }
.bi-person-add::before { content: "\f89a"; }
.bi-person-down::before { content: "\f89b"; }
.bi-person-exclamation::before { content: "\f89c"; }
.bi-person-fill-add::before { content: "\f89d"; }
.bi-person-fill-check::before { content: "\f89e"; }
.bi-person-fill-dash::before { content: "\f89f"; }
.bi-person-fill-down::before { content: "\f8a0"; }
.bi-person-fill-exclamation::before { content: "\f8a1"; }
.bi-person-fill-gear::before { content: "\f8a2"; }
.bi-person-fill-lock::before { content: "\f8a3"; }
.bi-person-fill-slash::before { content: "\f8a4"; }
.bi-person-fill-up::before { content: "\f8a5"; }
.bi-person-fill-x::before { content: "\f8a6"; }
.bi-person-gear::before { content: "\f8a7"; }
.bi-person-lock::before { content: "\f8a8"; }
.bi-person-slash::before { content: "\f8a9"; }
.bi-person-up::before { content: "\f8aa"; }
.bi-scooter::before { content: "\f8ab"; }
.bi-taxi-front-fill::before { content: "\f8ac"; }
.bi-taxi-front::before { content: "\f8ad"; }
.bi-amd::before { content: "\f8ae"; }
.bi-database-add::before { content: "\f8af"; }
.bi-database-check::before { content: "\f8b0"; }
.bi-database-dash::before { content: "\f8b1"; }
.bi-database-down::before { content: "\f8b2"; }
.bi-database-exclamation::before { content: "\f8b3"; }
.bi-database-fill-add::before { content: "\f8b4"; }
.bi-database-fill-check::before { content: "\f8b5"; }
.bi-database-fill-dash::before { content: "\f8b6"; }
.bi-database-fill-down::before { content: "\f8b7"; }
.bi-database-fill-exclamation::before { content: "\f8b8"; }
.bi-database-fill-gear::before { content: "\f8b9"; }
.bi-database-fill-lock::before { content: "\f8ba"; }
.bi-database-fill-slash::before { content: "\f8bb"; }
.bi-database-fill-up::before { content: "\f8bc"; }
.bi-database-fill-x::before { content: "\f8bd"; }
.bi-database-fill::before { content: "\f8be"; }
.bi-database-gear::before { content: "\f8bf"; }
.bi-database-lock::before { content: "\f8c0"; }
.bi-database-slash::before { content: "\f8c1"; }
.bi-database-up::before { content: "\f8c2"; }
.bi-database-x::before { content: "\f8c3"; }
.bi-database::before { content: "\f8c4"; }
.bi-houses-fill::before { content: "\f8c5"; }
.bi-houses::before { content: "\f8c6"; }
.bi-nvidia::before { content: "\f8c7"; }
.bi-person-vcard-fill::before { content: "\f8c8"; }
.bi-person-vcard::before { content: "\f8c9"; }
.bi-sina-weibo::before { content: "\f8ca"; }
.bi-tencent-qq::before { content: "\f8cb"; }
.bi-wikipedia::before { content: "\f8cc"; }
.bi-alphabet-uppercase::before { content: "\f2a5"; }
.bi-alphabet::before { content: "\f68a"; }
.bi-amazon::before { content: "\f68d"; }
.bi-arrows-collapse-vertical::before { content: "\f690"; }
.bi-arrows-expand-vertical::before { content: "\f695"; }
.bi-arrows-vertical::before { content: "\f698"; }
.bi-arrows::before { content: "\f6a2"; }
.bi-ban-fill::before { content: "\f6a3"; }
.bi-ban::before { content: "\f6b6"; }
.bi-bing::before { content: "\f6c2"; }
.bi-cake::before { content: "\f6e0"; }
.bi-cake2::before { content: "\f6ed"; }
.bi-cookie::before { content: "\f6ee"; }
.bi-copy::before { content: "\f759"; }
.bi-crosshair::before { content: "\f769"; }
.bi-crosshair2::before { content: "\f794"; }
.bi-emoji-astonished-fill::before { content: "\f795"; }
.bi-emoji-astonished::before { content: "\f79a"; }
.bi-emoji-grimace-fill::before { content: "\f79b"; }
.bi-emoji-grimace::before { content: "\f7a0"; }
.bi-emoji-grin-fill::before { content: "\f7a1"; }
.bi-emoji-grin::before { content: "\f7a6"; }
.bi-emoji-surprise-fill::before { content: "\f7a7"; }
.bi-emoji-surprise::before { content: "\f7ac"; }
.bi-emoji-tear-fill::before { content: "\f7ad"; }
.bi-emoji-tear::before { content: "\f7b2"; }
.bi-envelope-arrow-down-fill::before { content: "\f7b3"; }
.bi-envelope-arrow-down::before { content: "\f7b8"; }
.bi-envelope-arrow-up-fill::before { content: "\f7b9"; }
.bi-envelope-arrow-up::before { content: "\f7be"; }
.bi-feather::before { content: "\f7bf"; }
.bi-feather2::before { content: "\f7c4"; }
.bi-floppy-fill::before { content: "\f7c5"; }
.bi-floppy::before { content: "\f7d8"; }
.bi-floppy2-fill::before { content: "\f7d9"; }
.bi-floppy2::before { content: "\f7e4"; }
.bi-gitlab::before { content: "\f7e5"; }
.bi-highlighter::before { content: "\f7f8"; }
.bi-marker-tip::before { content: "\f802"; }
.bi-nvme-fill::before { content: "\f803"; }
.bi-nvme::before { content: "\f80c"; }
.bi-opencollective::before { content: "\f80d"; }
.bi-pci-card-network::before { content: "\f8cd"; }
.bi-pci-card-sound::before { content: "\f8ce"; }
.bi-radar::before { content: "\f8cf"; }
.bi-send-arrow-down-fill::before { content: "\f8d0"; }
.bi-send-arrow-down::before { content: "\f8d1"; }
.bi-send-arrow-up-fill::before { content: "\f8d2"; }
.bi-send-arrow-up::before { content: "\f8d3"; }
.bi-sim-slash-fill::before { content: "\f8d4"; }
.bi-sim-slash::before { content: "\f8d5"; }
.bi-sourceforge::before { content: "\f8d6"; }
.bi-substack::before { content: "\f8d7"; }
.bi-threads-fill::before { content: "\f8d8"; }
.bi-threads::before { content: "\f8d9"; }
.bi-transparency::before { content: "\f8da"; }
.bi-twitter-x::before { content: "\f8db"; }
.bi-type-h4::before { content: "\f8dc"; }
.bi-type-h5::before { content: "\f8dd"; }
.bi-type-h6::before { content: "\f8de"; }
.bi-backpack-fill::before { content: "\f8df"; }
.bi-backpack::before { content: "\f8e0"; }
.bi-backpack2-fill::before { content: "\f8e1"; }
.bi-backpack2::before { content: "\f8e2"; }
.bi-backpack3-fill::before { content: "\f8e3"; }
.bi-backpack3::before { content: "\f8e4"; }
.bi-backpack4-fill::before { content: "\f8e5"; }
.bi-backpack4::before { content: "\f8e6"; }
.bi-brilliance::before { content: "\f8e7"; }
.bi-cake-fill::before { content: "\f8e8"; }
.bi-cake2-fill::before { content: "\f8e9"; }
.bi-duffle-fill::before { content: "\f8ea"; }
.bi-duffle::before { content: "\f8eb"; }
.bi-exposure::before { content: "\f8ec"; }
.bi-gender-neuter::before { content: "\f8ed"; }
.bi-highlights::before { content: "\f8ee"; }
.bi-luggage-fill::before { content: "\f8ef"; }
.bi-luggage::before { content: "\f8f0"; }
.bi-mailbox-flag::before { content: "\f8f1"; }
.bi-mailbox2-flag::before { content: "\f8f2"; }
.bi-noise-reduction::before { content: "\f8f3"; }
.bi-passport-fill::before { content: "\f8f4"; }
.bi-passport::before { content: "\f8f5"; }
.bi-person-arms-up::before { content: "\f8f6"; }
.bi-person-raised-hand::before { content: "\f8f7"; }
.bi-person-standing-dress::before { content: "\f8f8"; }
.bi-person-standing::before { content: "\f8f9"; }
.bi-person-walking::before { content: "\f8fa"; }
.bi-person-wheelchair::before { content: "\f8fb"; }
.bi-shadows::before { content: "\f8fc"; }
.bi-suitcase-fill::before { content: "\f8fd"; }
.bi-suitcase-lg-fill::before { content: "\f8fe"; }
.bi-suitcase-lg::before { content: "\f8ff"; }
.bi-suitcase::before { content: "\f900"; }
.bi-suitcase2-fill::before { content: "\f901"; }
.bi-suitcase2::before { content: "\f902"; }
.bi-vignette::before { content: "\f903"; }
/* ============================================================
   PICTORIAL — "Classic" theme  (slate / blue)
   El diseño previo a Salvia, reconstruido como una capa de tema.

   Comparte TODO el shell estructural (layout fluido, responsive,
   posiciones, tamaños) con salvia.css. Esta hoja se carga DESPUÉS
   de salvia.css y SOLO actúa cuando <body> tiene .design-classic.

   Estrategia: salvia.css es 100% token-driven (--sv-* / --pg-*).
   Aquí redefinimos esos tokens:
     · a nivel <body>  → paleta de CONTENIDO (claro, texto slate, azul)
     · en .pictorial-sidebar / .pictorial-header → CHROME oscuro
       con texto claro (los tokens cascadean al subárbol).
   Así heredamos la distribución de Salvia y solo cambia el color.
   ============================================================ */

/* ─────────────────────────────────────────────────────────
   1 · PALETA DE CONTENIDO  (toda la app en modo clásico)
   ───────────────────────────────────────────────────────── */
body.design-classic {
  /* superficies */
  --sv-bg:      #1e293b;   /* telón de fondo (detrás del contenido) */
  --sv-bg-1:    #ffffff;   /* inputs, menús flotantes */
  --sv-bg-2:    #f1f5f9;   /* superficies suaves */
  --sv-side:    #1e293b;
  --sv-side-2:  #f1f5f9;   /* cabeceras de tabla, covers (en contenido) */
  --sv-card:    #ffffff;

  --sv-line:    rgba(15, 23, 42, .10);
  --sv-line-2:  rgba(15, 23, 42, .16);
  --sv-glass:   rgba(15, 23, 42, .04);
  --sv-glass-2: rgba(15, 23, 42, .03);

  /* texto (oscuro sobre superficies claras) */
  --sv-text:    #1e293b;
  --sv-muted:   rgba(30, 41, 59, .66);
  --sv-faint:   rgba(30, 41, 59, .42);

  /* acentos → azul */
  --sv-green:    #3b82f6;
  --sv-green-2:  #60a5fa;
  --sv-green-d:  #2563eb;
  --sv-coral:    #3b82f6;
  --sv-act-ver:  #16a34a;   /* éxito  */
  --sv-act-clas: #d97706;   /* aviso  */
  --sv-act-edit: #dc2626;   /* peligro */

  --sv-grad:      linear-gradient(105deg, #2563eb, #3b82f6);
  --sv-grad-soft: linear-gradient(105deg, rgba(59,130,246,.16), rgba(96,165,250,.14));
  --sv-glow:      0 0 0 1px rgba(59,130,246,.4), 0 18px 50px -12px rgba(59,130,246,.5);

  /* re-map de tokens legacy --pg-* a la escala slate */
  --pg-white:    #ffffff;
  --pg-black:    #0f172a;
  --pg-gray-50:  #f8fafc;
  --pg-gray-100: #f1f5f9;
  --pg-gray-200: #e2e8f0;
  --pg-gray-300: #cbd5e1;
  --pg-gray-400: #94a3b8;
  --pg-gray-500: #64748b;
  --pg-gray-600: #475569;
  --pg-gray-700: #334155;
  --pg-gray-800: #1e293b;
  --pg-gray-900: #0f172a;

  --pg-primary:       #3b82f6;
  --pg-primary-hover: #2563eb;
  --pg-accent:        #3b82f6;
  --pg-accent-light:  rgba(59,130,246,.16);
  --pg-border:  rgba(15, 23, 42, .10);
  --pg-muted:   rgba(30, 41, 59, .66);
}

/* ─────────────────────────────────────────────────────────
   2 · SIDEBAR  →  chrome oscuro, texto claro
   Redefinimos tokens en el subárbol; las reglas de salvia.css
   (incluidas las !important que usan var(--sv-*)) los heredan.
   ───────────────────────────────────────────────────────── */
.design-classic .pictorial-sidebar {
  --sv-side:    #1e293b;
  --sv-side-2:  #0f172a;
  --sv-card:    #1e293b;
  --sv-text:    #f1f5f9;
  --sv-muted:   rgba(226, 232, 240, .72);
  --sv-faint:   rgba(226, 232, 240, .45);
  --sv-green:   #60a5fa;
  --sv-green-d: #93c5fd;
  --sv-line:    rgba(148, 163, 184, .16);
  --sv-line-2:  rgba(148, 163, 184, .24);
  --sv-glass:   rgba(255, 255, 255, .05);
  --sv-glass-2: rgba(255, 255, 255, .07);
  --sv-grad-soft: linear-gradient(105deg, rgba(59,130,246,.22), rgba(96,165,250,.16));

  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-right: 1px solid rgba(59, 130, 246, .22);
}
.design-classic .pictorial-sidebar__header {
  background: #0f172a;
}
/* indicador de item activo en azul */
.design-classic .pictorial-sidebar .pictorial-nav__link.is-active {
  border-color: rgba(59, 130, 246, .30);
}
.design-classic .pictorial-sidebar .pictorial-nav__link:hover {
  background: rgba(255, 255, 255, .06);
}

/* ─────────────────────────────────────────────────────────
   3 · HEADER (topbar)  →  chrome oscuro, texto claro
   ───────────────────────────────────────────────────────── */
.design-classic .pictorial-header {
  --sv-text:    #f1f5f9;
  --sv-muted:   rgba(226, 232, 240, .75);
  --sv-faint:   rgba(226, 232, 240, .55);
  --sv-line:    rgba(148, 163, 184, .16);
  --sv-line-2:  rgba(148, 163, 184, .24);
  --sv-glass:   rgba(255, 255, 255, .06);
  --sv-glass-2: rgba(255, 255, 255, .08);

  background: #0f172a;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(59, 130, 246, .20);
}

/* ─────────────────────────────────────────────────────────
   4 · DROPDOWN MENUS  (cuelgan del header → reponemos contraste)
   Son tarjetas claras: el texto debe volver a ser oscuro.
   ───────────────────────────────────────────────────────── */
.design-classic .pictorial-dropdown__menu {
  --sv-text:   #1e293b;
  --sv-muted:  rgba(30, 41, 59, .66);
  --sv-faint:  rgba(30, 41, 59, .42);
  --sv-line:   rgba(15, 23, 42, .10);
  --sv-line-2: rgba(15, 23, 42, .14);
  --sv-bg-1:   #ffffff;
  background: #ffffff;
}

/* El panel de búsqueda global también cuelga del header y es tarjeta
   clara: sin esto, sus títulos/estados heredan el texto claro del
   chrome oscuro y quedan blanco sobre blanco. */
.design-classic .gsearch__panel {
  --sv-text:   #1e293b;
  --sv-muted:  rgba(30, 41, 59, .66);
  --sv-faint:  rgba(30, 41, 59, .42);
  --sv-line:   rgba(15, 23, 42, .10);
  --sv-line-2: rgba(15, 23, 42, .14);
  --sv-card:   #ffffff;
  background: #ffffff;
}

/* El modal de notificaciones (shared/_notification_modal) vive en el DOM
   dentro del header (junto a la campana) aunque se pinte en el top layer:
   hereda por ancestro los tokens claros del chrome oscuro. Es tarjeta
   clara, así que repone el contraste igual que los dropdowns de arriba. */
.design-classic dialog.pictorial-notice {
  --sv-text:   #1e293b;
  --sv-muted:  rgba(30, 41, 59, .66);
  --sv-faint:  rgba(30, 41, 59, .42);
  --sv-line:   rgba(15, 23, 42, .10);
  --sv-line-2: rgba(15, 23, 42, .14);
  --sv-card:   #ffffff;
}

/* ─────────────────────────────────────────────────────────
   5 · MAIN / CONTENT / FOOTER
   Mantiene el layout FLUIDO de Salvia; solo cambian colores.
   ───────────────────────────────────────────────────────── */
.design-classic .pictorial-main {
  background: #1e293b;
}
/* contenido: panel blanco a todo el ancho (fluido, como Salvia) */
.design-classic .pictorial-content {
  background: #ffffff;
}
/* footer transparente sobre el slate del main, texto claro tenue */
.design-classic .pictorial-footer {
  --sv-text:  #e2e8f0;
  --sv-muted: rgba(226, 232, 240, .72);
  --sv-faint: rgba(148, 163, 184, .60);
  --sv-line:  rgba(148, 163, 184, .14);
  background: transparent;
  border-top: 1px solid rgba(148, 163, 184, .14);
}

/* overlay móvil en tono slate */
.design-classic .pictorial-overlay {
  background: rgba(15, 23, 42, .55);
}

/* ─────────────────────────────────────────────────────────
   6 · DASHBOARD HERO  →  gradiente azul/slate en lugar del verde Salvia
   ───────────────────────────────────────────────────────── */
.design-classic .dk-hero {
  background: linear-gradient(120deg, #0f2d5c 0%, #1e3a8a 52%, #1d4ed8 100%);
  border-color: rgba(59,130,246,.40);
  box-shadow: 0 22px 50px -22px rgba(30,58,138,.65);
}
.design-classic .dk-hero__bg-orb--1 {
  background: radial-gradient(circle, rgba(255,255,255,.10) 0%, transparent 70%);
}
.design-classic .dk-hero__bg-orb--2 {
  background: radial-gradient(circle, rgba(59,130,246,.25) 0%, transparent 70%);
}

/* ─────────────────────────────────────────────────────────
   7 · DASHBOARD PROYECTOS  →  hover azul en lugar del verde Salvia
   ───────────────────────────────────────────────────────── */
.design-classic .dk-proj:hover {
  border-color: rgba(59,130,246,.35);
  box-shadow: 0 18px 40px -24px rgba(30,58,138,.4);
}
.design-classic .dk-proj__hover {
  background: linear-gradient(105deg, rgba(30,58,138,.88), rgba(29,78,216,.85));
}

/* ─────────────────────────────────────────────────────────
   8 · BARRA DE BÚSQUEDA  →  contraste adecuado sobre header oscuro
   ───────────────────────────────────────────────────────── */
.design-classic .pictorial-search {
  background: rgba(255,255,255,.09);
  border-color: rgba(148,163,184,.32);
}
.design-classic .pictorial-search svg { stroke: rgba(226,232,240,.55); }
.pictorial-app.design-classic .pictorial-search .pictorial-search__input { color: #f1f5f9; }
.pictorial-app.design-classic .pictorial-search .pictorial-search__input::placeholder { color: rgba(226,232,240,.40); }

/* ─────────────────────────────────────────────────────────
   9 · HERO DEL PROYECTO (admin/projects#show)
   Los botones y chips "glass" (.hbtn / .hchip) flotan sobre la
   fotografía de portada, oscurecida por el scrim. Consumen los
   alias locales --glass-2 / --text que .proj resuelve desde los
   tokens del tema: en clásico eso da vidrio casi transparente
   (rgba(15,23,42,.03)) con texto slate oscuro → ilegible sobre
   la foto. Reponemos dentro del hero el vidrio claro esmerilado
   que Salvia logra con su vidrio crema.
   ───────────────────────────────────────────────────────── */
.design-classic .proj .proj-hero {
  --glass:   rgba(255, 255, 255, .60);
  --glass-2: rgba(255, 255, 255, .80);
  --text:    #0f172a;
}

/* Texto sobre superficies de acento: en clásico el acento es azul → blanco
   puro (coherente con .btn--primary), en vez del crema Salvia. */
.design-classic .proj {
  --on-accent: #fff;
}
/* ═══════════════════════════════════════════════════════════════════════════
   PICTORIAL - Client Project Dashboard Styles
   ═══════════════════════════════════════════════════════════════════════════ */

.cd-dashboard {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--sv-bg-1, #f8fafc) 0%, var(--sv-bg-2, #f1f5f9) 100%);
  padding-bottom: 4rem;
}

/* ═════ HEADER HERO ═════ */
.cd-hero {
  position: relative;
  height: 240px;
  overflow: hidden;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

.cd-hero__cover {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cd-hero__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

.cd-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0.3) 0%,
    rgba(15, 23, 42, 0.6) 60%,
    rgba(15, 23, 42, 0.85) 100%
  );
  z-index: 2;
}

.cd-hero__content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.cd-hero__title {
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.cd-hero__subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  margin: 0.5rem 0 0;
  max-width: 600px;
}

.cd-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.cd-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 500;
  color: white;
}

.cd-hero__badge svg {
  width: 16px;
  height: 16px;
  opacity: 0.9;
}

/* ═════ MAIN CONTENT ═════ */
.cd-main {
  max-width: none;
  margin: -2.5rem 0 0;
  padding: 0 1.5rem;
  position: relative;
  z-index: 10;
}

/* ═════ STATS CARDS ═════ */
.cd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.cd-stat {
  background: var(--sv-card, #ffffff);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cd-stat__icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cd-stat__icon--photos {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.cd-stat__icon--videos {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.cd-stat__icon--favorites {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

.cd-stat__icon--contract {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.cd-stat__icon svg {
  width: 28px;
  height: 28px;
  color: white;
  stroke: white;
}

.cd-stat__info {
  flex: 1;
  min-width: 0;
}

.cd-stat__number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sv-text, #0f172a);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.cd-stat__label {
  font-size: 0.875rem;
  color: var(--sv-muted, #64748b);
  font-weight: 500;
}

/* ═════ DASHBOARD GRID ═════ */
.cd-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1.5rem;
}

/* ═════ CARDS ═════ */
.cd-card {
  background: var(--sv-card, #ffffff);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
  overflow: hidden;
}

.cd-card__header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--sv-line, #e2e8f0);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cd-card__header-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sv-bg-2, #f1f5f9);
}

.cd-card__header-icon svg {
  width: 20px;
  height: 20px;
  color: var(--sv-muted, #475569);
  stroke: var(--sv-muted, #475569);
}

.cd-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sv-text, #0f172a);
  margin: 0;
}

.cd-card__content {
  padding: 1.5rem;
}

.cd-card--mt {
  margin-top: 1.5rem;
}

/* ═════ GALLERY CARD ═════ */
.cd-gallery-card {
  position: relative;
}

.cd-gallery-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.cd-gallery-preview__item {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--sv-bg-2, #f1f5f9);
}

.cd-gallery-preview__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.cd-gallery-preview__item:hover img {
  transform: scale(1.05);
}

.cd-gallery-preview__more {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sv-muted, #64748b);
  background: var(--sv-bg-2, #f1f5f9);
}

.cd-gallery-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}

.cd-btn svg {
  width: 18px;
  height: 18px;
}

.cd-btn--primary,
a.cd-btn--primary:link,
a.cd-btn--primary:visited {
  background: var(--sv-grad, linear-gradient(135deg, #3b82f6 0%, #2563eb 100%));
  color: #fff;
  flex: 1;
}

.cd-btn--primary:hover {
  background: var(--sv-grad, linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%));
  filter: brightness(0.96);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}

.cd-btn--secondary {
  background: var(--sv-bg-2, #f1f5f9);
  color: var(--sv-muted, #475569);
}

.cd-btn--secondary:hover {
  background: #e2e8f0;
}

.cd-btn--favorites {
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
  color: #be185d;
}

.cd-btn--favorites:hover {
  background: linear-gradient(135deg, #fbcfe8 0%, #f9a8d4 100%);
}

/* ═════ INFO ROWS ═════ */
.cd-info-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--sv-line, #f1f5f9);
}

.cd-info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cd-info-row:first-child {
  padding-top: 0;
}

.cd-info-row__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--sv-bg-1, #f8fafc);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cd-info-row__icon svg {
  width: 20px;
  height: 20px;
  color: var(--sv-muted, #64748b);
  stroke: var(--sv-muted, #64748b);
}

.cd-info-row__content {
  flex: 1;
  min-width: 0;
}

.cd-info-row__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--sv-faint, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.cd-info-row__value {
  font-size: 0.95rem;
  color: var(--sv-text, #0f172a);
  font-weight: 500;
}

.cd-info-row__value--muted {
  color: var(--sv-muted, #64748b);
  font-weight: 400;
  font-size: 0.875rem;
}

/* ═════ PHOTOGRAPHER CARD ═════ */
.cd-photographer {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.cd-photographer__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  font-weight: 600;
  flex-shrink: 0;
}

.cd-photographer__info {
  flex: 1;
  min-width: 0;
}

.cd-photographer__name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sv-text, #0f172a);
  margin: 0 0 0.25rem;
}

.cd-photographer__role {
  font-size: 0.875rem;
  color: var(--sv-muted, #64748b);
  margin: 0;
}

.cd-btn--whatsapp {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  width: 100%;
}

.cd-btn--whatsapp:hover {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}

.cd-btn--email {
  background: var(--sv-bg-2, #f1f5f9);
  color: var(--sv-muted, #475569);
  width: 100%;
  margin-top: 0.5rem;
}

.cd-btn--email:hover {
  background: #e2e8f0;
}

/* ═════ CONTRACT CARD ═════ */
.cd-contract-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: #f0fdf4;
  border-radius: 10px;
  border: 1px solid #bbf7d0;
}

.cd-contract-status__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #22c55e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd-contract-status__icon svg {
  width: 22px;
  height: 22px;
  color: white;
  stroke: white;
}

.cd-contract-status__text {
  flex: 1;
}

.cd-contract-status__title {
  font-size: 1rem;
  font-weight: 600;
  color: #166534;
  margin: 0;
}

.cd-contract-status__date {
  font-size: 0.8rem;
  color: #15803d;
  margin: 0.25rem 0 0;
}

.cd-contract-details {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sv-line, #e2e8f0);
}

.cd-contract-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.875rem;
}

.cd-contract-item__label {
  color: var(--sv-muted, #64748b);
}

.cd-contract-item__value {
  color: var(--sv-text, #0f172a);
  font-weight: 500;
}

.cd-btn--download {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  width: 100%;
  margin-top: 1rem;
}

.cd-btn--download:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* ═════ EVENT CARD ═════ */
.cd-event-date {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 12px;
  margin-bottom: 1rem;
}

.cd-event-date__calendar {
  width: 56px;
  height: 56px;
  background: var(--sv-card, #ffffff);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cd-event-date__day {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0369a1;
  line-height: 1;
}

.cd-event-date__month {
  font-size: 0.7rem;
  font-weight: 600;
  color: #0ea5e9;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cd-event-date__info {
  flex: 1;
}

.cd-event-date__weekday {
  font-size: 0.8rem;
  color: #0369a1;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.cd-event-date__full {
  font-size: 1rem;
  color: #0c4a6e;
  font-weight: 600;
}

/* ═════ EMPTY STATES ═════ */
.cd-empty {
  text-align: center;
  padding: 3rem 2rem;
}

.cd-empty svg {
  width: 64px;
  height: 64px;
  color: var(--sv-faint, #cbd5e1);
  stroke: var(--sv-faint, #cbd5e1);
  margin-bottom: 1rem;
}

.cd-empty__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sv-muted, #475569);
  margin: 0 0 0.5rem;
}

.cd-empty__text {
  font-size: 0.9rem;
  color: var(--sv-faint, #94a3b8);
  margin: 0;
  max-width: 280px;
  margin: 0 auto;
}

/* ═════ GALLERY SECTION ═════ */
.cd-gallery-section {
  margin-top: 2rem;
}

.cd-gallery-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.cd-gallery-section__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sv-text, #0f172a);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cd-gallery-section__title svg {
  width: 28px;
  height: 28px;
  color: var(--sv-green, #3b82f6);
  stroke: var(--sv-green, #3b82f6);
}

/* ═════ RESPONSIVE ═════ */
@media (max-width: 1024px) {
  .cd-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .cd-hero {
    height: 200px;
  }

  .cd-hero__title {
    font-size: 1.75rem;
  }

  .cd-hero__subtitle {
    font-size: 0.9rem;
    margin-top: 0.25rem;
  }

  .cd-main {
    padding: 0 1rem;
    margin-top: -1.5rem;
  }

  .cd-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .cd-stat {
    padding: 1rem;
  }

  .cd-stat__icon {
    width: 44px;
    height: 44px;
  }

  .cd-stat__number {
    font-size: 1.5rem;
  }

  .cd-gallery-preview {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* =========================================================================
   Global search — buscador del panel admin.
   Usa los tokens --sv-* / --pg-* (sobre-escritos por classic.css), de modo
   que el componente se adapta a los dos temas (salvia y classic) sin reglas
   específicas por tema.
   ========================================================================= */

/* Envoltorio posicionador alrededor de la píldora .pictorial-search */
.gsearch {
  position: relative;
  flex: 1;
  max-width: 560px;
  display: flex;
}
.gsearch .pictorial-search { flex: 1; max-width: none; }

/* Botón "limpiar" dentro de la barra */
.gsearch__clear {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--sv-faint);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 8px;
  line-height: 0;
}
.gsearch__clear:hover { color: var(--sv-text); }
.gsearch.is-filled .gsearch__clear { display: inline-flex; }

/* --- Panel de resultados (dropdown) -------------------------------------- */
.gsearch__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 1200;
  background: var(--sv-card, #fff);
  border: 1px solid var(--sv-line-2, rgba(0,0,0,.12));
  border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(46,32,23,.45), 0 6px 18px -10px rgba(46,32,23,.30);
  overflow: hidden;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  display: none;
  padding: 6px;
}
.gsearch.is-open .gsearch__panel { display: block; }

/* Estados (hint / cargando / vacío) */
.gsearch__state {
  padding: 22px 16px;
  text-align: center;
  color: var(--sv-muted);
  font-family: var(--sv-body);
  font-size: 13px;
}
.gsearch__state strong { color: var(--sv-text); font-weight: 600; }

/* Encabezado de grupo */
.gsearch__group-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 6px;
  font-family: var(--sv-mono, monospace);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sv-faint);
}
.gsearch__group-h .gsearch__count {
  margin-left: auto;
  font-family: var(--sv-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--sv-muted);
}

/* Item de resultado */
.gsearch__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 11px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.gsearch__item:hover,
.gsearch__item.is-active {
  background: var(--sv-grad-soft, rgba(0,0,0,.05));
}
.gsearch__item.is-active { outline: 1px solid var(--sv-line-2); }

.gsearch__avatar {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-family: var(--sv-display, sans-serif);
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  background: var(--sv-grad, #557061);
  letter-spacing: .02em;
}
.gsearch__avatar svg { width: 18px; height: 18px; stroke: #fff; fill: none; }

.gsearch__body { min-width: 0; flex: 1; }
.gsearch__title {
  font-family: var(--sv-body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--sv-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gsearch__title mark {
  background: color-mix(in srgb, var(--sv-act-clas, #8a7b53) 28%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.gsearch__sub {
  font-family: var(--sv-body);
  font-size: 12px;
  color: var(--sv-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gsearch__meta {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}
.gsearch__meta-date {
  font-family: var(--sv-mono, monospace);
  font-size: 10.5px;
  color: var(--sv-faint);
  white-space: nowrap;
}

/* Badge de estado */
.gsearch__badge {
  display: inline-block;
  font-family: var(--sv-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
}
.gsearch__badge.tone-green { background: rgba(79,107,92,.16);  color: var(--sv-act-ver, #4F6B5C); }
.gsearch__badge.tone-amber { background: rgba(138,123,83,.18); color: var(--sv-act-clas, #8A7B53); }
.gsearch__badge.tone-blue  { background: rgba(85,112,97,.14);  color: var(--sv-green, #557061); }
.gsearch__badge.tone-muted { background: rgba(46,32,23,.08);   color: var(--sv-muted, #777); }

/* Pie del panel: "ver todos los resultados" */
.gsearch__footer {
  margin-top: 4px;
  border-top: 1px solid var(--sv-line);
}
.gsearch__all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  font-family: var(--sv-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sv-green-d, #43594D);
  text-decoration: none;
  border-radius: 10px;
}
.gsearch__all:hover { background: var(--sv-grad-soft, rgba(0,0,0,.05)); }
.gsearch__all.is-active { background: var(--sv-grad-soft, rgba(0,0,0,.05)); outline: 1px solid var(--sv-line-2); }

/* =========================================================================
   Página completa de resultados (admin/search/index)
   ========================================================================= */
.gsearch-page { max-width: 1080px; margin: 0 auto; }
.gsearch-page__head { margin-bottom: 22px; }
.gsearch-page__title {
  font-family: var(--sv-display, sans-serif);
  font-weight: 600;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--sv-text);
  margin: 0 0 6px;
}
.gsearch-page__title em { font-style: normal; color: var(--sv-green-d, #43594D); }
.gsearch-page__sub { font-family: var(--sv-body); color: var(--sv-muted); margin: 0; }

.gsearch-page__form { margin: 18px 0 28px; }
.gsearch-page__form .pictorial-search { max-width: 620px; height: 50px; }

.gsearch-section { margin-bottom: 30px; }
.gsearch-section__h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-family: var(--sv-mono, monospace);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sv-faint);
}
.gsearch-section__h .gsearch__count {
  font-family: var(--sv-body); letter-spacing: 0; text-transform: none; color: var(--sv-muted);
}
.gsearch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 12px;
}
.gsearch-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--sv-card, #fff);
  border: 1px solid var(--sv-line);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s var(--sv-ease, ease), transform .15s var(--sv-ease, ease);
}
.gsearch-card:hover {
  border-color: var(--sv-line-2);
  transform: translateY(-1px);
}
.gsearch-card .gsearch__avatar { width: 44px; height: 44px; font-size: 15px; }

.gsearch-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--sv-muted);
  font-family: var(--sv-body);
}
.gsearch-empty svg { width: 46px; height: 46px; stroke: var(--sv-faint); fill: none; margin-bottom: 14px; }
.gsearch-empty strong { display: block; color: var(--sv-text); font-size: 16px; margin-bottom: 4px; }

/* En pantallas chicas la barra del header se oculta (regla salvia existente);
   el dropdown solo aplica donde la barra es visible, así que no requiere
   ajustes móviles adicionales. La página completa ya es fluida. */
/* ════════════════════════════════════════════════════════════════
   PICTORIAL — Landing pública (pages#home)
   Dirección: editorial de galería — papel cálido, tinta, eucalipto.
   Serif editorial (Fraunces) para titulares; Manrope/Space Mono
   (la voz del producto) para cuerpo y microtipografía.
   Todo scoped bajo body.landing / prefijo lp-.
   ════════════════════════════════════════════════════════════════ */
/* NOTA: las fuentes NO se cargan con @import — este archivo viaja concatenado
   dentro del bundle (application.css) y un @import a mitad de archivo es
   ignorado por el navegador. La vista pages/home.html.erb las carga con
   <link> vía content_for :head (Fraunces + Manrope + Space Mono). */

body.landing {
  --lp-paper:      #F2EDE2;
  --lp-paper-2:    #ECE6D9;
  --lp-card:       #FFFDF8;
  --lp-ink:        #2B2620;
  --lp-ink-soft:   rgba(43, 38, 32, .72);
  --lp-ink-faint:  rgba(43, 38, 32, .48);
  --lp-line:       rgba(43, 38, 32, .14);
  --lp-line-soft:  rgba(43, 38, 32, .08);
  --lp-green:      #4D6557;
  --lp-green-deep: #36493E;
  --lp-green-soft: rgba(77, 101, 87, .10);
  --lp-brass:      #8A7B53;
  --lp-terra:      #A05E45;
  --lp-display: "Fraunces", Georgia, serif;
  --lp-body:    "Manrope", system-ui, sans-serif;
  --lp-mono:    "Space Mono", ui-monospace, monospace;
  --lp-ease:    cubic-bezier(.22, .8, .3, 1);

  margin: 0;
  background: var(--lp-paper);
  color: var(--lp-ink);
  font-family: var(--lp-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  overflow-x: clip;
}

/* Textura sutil de papel: viñeta radial cálida, sin filtros SVG */
body.landing::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(138, 123, 83, .07), transparent 70%),
    radial-gradient(900px 500px at 0% 100%, rgba(77, 101, 87, .05), transparent 70%);
}

.landing .lp { position: relative; z-index: 1; }
.landing .lp * { box-sizing: border-box; }
.landing .lp a { color: inherit; }
.landing .lp :focus-visible {
  outline: 2px solid var(--lp-green);
  outline-offset: 3px;
  border-radius: 2px;
}

.landing .lp-wrap {
  width: min(1140px, calc(100% - 48px));
  margin: 0 auto;
}

/* ── Microtipografía editorial ─────────────────────────────────── */
.landing .lp-eyebrow {
  font-family: var(--lp-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lp-brass);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.landing .lp-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--lp-brass);
}
.landing .lp-h2 {
  font-family: var(--lp-display);
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 14px;
}
.landing .lp-h2 em {
  font-style: italic;
  color: var(--lp-green);
}
.landing .lp-lead {
  font-size: clamp(15.5px, 1.8vw, 17.5px);
  color: var(--lp-ink-soft);
  max-width: 56ch;
  margin: 0;
}

/* ── Botones ───────────────────────────────────────────────────── */
.landing .lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--lp-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 16px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--lp-ease), box-shadow .25s var(--lp-ease), background .25s;
}
.landing .lp-btn--primary {
  background: var(--lp-green-deep);
  color: #FBF8F1;
  box-shadow: 0 14px 30px -16px rgba(54, 73, 62, .55);
}
.landing .lp-btn--primary:hover {
  transform: translateY(-2px);
  background: var(--lp-green);
  box-shadow: 0 20px 38px -16px rgba(54, 73, 62, .6);
}
.landing .lp-btn--ghost {
  border-color: var(--lp-line);
  color: var(--lp-ink);
  background: transparent;
}
.landing .lp-btn--ghost:hover { border-color: var(--lp-ink); }
.landing .lp-btn--small { padding: 11px 18px; font-size: 13.5px; }

/* ── Nav ───────────────────────────────────────────────────────── */
.landing .lp-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--lp-paper) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--lp-line-soft);
}
.landing .lp-nav__in {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 0;
}
.landing .lp-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
}
.landing .lp-logo img { width: 30px; height: auto; display: block; }
.landing .lp-logo span {
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -.01em;
}
.landing .lp-nav__links {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.landing .lp-nav__links a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lp-ink-soft);
  text-decoration: none;
}
.landing .lp-nav__links a:hover { color: var(--lp-ink); }
.landing .lp-nav__session {
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  color: var(--lp-ink);
}
@media (max-width: 880px) {
  .landing .lp-nav__links, .landing .lp-nav__session { display: none; }
}
@media (max-width: 480px) {
  .landing .lp-nav__in { gap: 14px; }
  .landing .lp-nav .lp-btn--small { padding: 10px 14px; font-size: 12.5px; white-space: nowrap; }
  .landing .lp-logo span { font-size: 19px; }
}

/* ── Hero ──────────────────────────────────────────────────────── */
.landing .lp-hero {
  padding: clamp(56px, 9vw, 110px) 0 clamp(48px, 7vw, 90px);
  overflow: hidden;
}
.landing .lp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 10fr) minmax(0, 9fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.landing .lp-hero h1 {
  font-family: var(--lp-display);
  font-weight: 500;
  font-size: clamp(40px, 5.6vw, 64px);
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0 0 20px;
}
.landing .lp-hero h1 em {
  font-style: italic;
  color: var(--lp-green);
}
.landing .lp-hero__sub {
  font-size: clamp(15.5px, 1.9vw, 17.5px);
  color: var(--lp-ink-soft);
  max-width: 52ch;
  margin: 0 0 30px;
}
.landing .lp-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.landing .lp-hero__note {
  font-family: var(--lp-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--lp-ink-faint);
  margin: 0;
}
@media (max-width: 880px) {
  .landing .lp-hero__grid { grid-template-columns: 1fr; }
}

/* Reveal de carga, escalonado */
@keyframes lp-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.landing .lp-rise { animation: lp-rise .8s var(--lp-ease) both; }
.landing .lp-rise--2 { animation-delay: .12s; }
.landing .lp-rise--3 { animation-delay: .24s; }
.landing .lp-rise--4 { animation-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .landing .lp-rise { animation: none; }
}

/* ── Collage de mockups del hero (dibujados en CSS) ────────────── */
.landing .lp-collage {
  position: relative;
  min-height: 420px;
}
.landing .lp-shot {
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  box-shadow: 0 30px 60px -30px rgba(43, 38, 32, .35);
}
.landing .lp-shot__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--lp-line-soft);
}
.landing .lp-shot__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lp-line);
}
.landing .lp-shot__title {
  font-family: var(--lp-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--lp-ink-faint);
  margin-left: 4px;
}
/* Galería */
.landing .lp-shot--gallery {
  position: absolute;
  top: 0; left: 0;
  width: min(78%, 380px);
  transform: rotate(-1.2deg);
}
.landing .lp-shot__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  padding: 12px;
}
.landing .lp-ph {
  aspect-ratio: 1;
  border-radius: 7px;
  background: linear-gradient(140deg, #C9CCB8, #99A892);
}
.landing .lp-ph:nth-child(2) { background: linear-gradient(150deg, #D8C8B2, #B49B7F); }
.landing .lp-ph:nth-child(3) { background: linear-gradient(160deg, #B9C4BE, #7E978A); }
.landing .lp-ph:nth-child(4) { background: linear-gradient(140deg, #E0D6C2, #C0A98A); }
.landing .lp-ph:nth-child(5) { background: linear-gradient(135deg, #9FB0A4, #5F7A6B); position: relative; }
.landing .lp-ph:nth-child(5)::after {
  content: "♥";
  position: absolute;
  right: 6px; bottom: 4px;
  font-size: 11px;
  color: #FBF8F1;
}
.landing .lp-ph:nth-child(6) { background: linear-gradient(150deg, #CBBEA8, #A18C6E); }
/* Chat WhatsApp */
.landing .lp-shot--chat {
  position: absolute;
  right: 0;
  top: 16%;
  width: min(62%, 300px);
  transform: rotate(1.6deg);
  z-index: 2;
}
.landing .lp-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
}
.landing .lp-msg {
  max-width: 86%;
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 11px;
  border-radius: 11px;
}
.landing .lp-msg--in {
  align-self: flex-start;
  background: var(--lp-paper-2);
  border-bottom-left-radius: 4px;
}
.landing .lp-msg--out {
  align-self: flex-end;
  background: var(--lp-green-soft);
  border: 1px solid color-mix(in srgb, var(--lp-green) 22%, transparent);
  border-bottom-right-radius: 4px;
}
.landing .lp-msg__who {
  display: block;
  font-family: var(--lp-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lp-green);
  margin-bottom: 3px;
}
/* Tarjeta QR */
.landing .lp-shot--qr {
  position: absolute;
  left: 8%;
  bottom: 0;
  width: 190px;
  padding: 16px;
  text-align: center;
  transform: rotate(-2.4deg);
  z-index: 3;
}
.landing .lp-qr {
  width: 92px;
  height: 92px;
  margin: 6px auto 10px;
  border-radius: 8px;
  background:
    conic-gradient(from 90deg at 12px 12px, var(--lp-ink) 25%, transparent 0) 0 0 / 28px 28px,
    repeating-linear-gradient(90deg, var(--lp-ink) 0 6px, transparent 6px 13px),
    repeating-linear-gradient(0deg, var(--lp-ink) 0 6px, var(--lp-card) 6px 13px);
  border: 5px solid var(--lp-card);
  outline: 1px solid var(--lp-line);
}
.landing .lp-shot--qr strong {
  display: block;
  font-family: var(--lp-display);
  font-size: 15px;
  font-weight: 600;
}
.landing .lp-shot--qr span {
  font-family: var(--lp-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--lp-ink-faint);
}
@media (max-width: 880px) {
  .landing .lp-collage { min-height: 360px; margin-top: 8px; }
}

/* ── Franja del problema ───────────────────────────────────────── */
.landing .lp-problem {
  border-top: 1px solid var(--lp-line-soft);
  border-bottom: 1px solid var(--lp-line-soft);
  background: var(--lp-paper-2);
  padding: clamp(36px, 5vw, 56px) 0;
}
.landing .lp-problem__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.landing .lp-problem h2 {
  font-family: var(--lp-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.25;
  margin: 0;
  color: var(--lp-ink);
}
.landing .lp-problem ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 28px;
}
.landing .lp-problem li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  color: var(--lp-ink-soft);
}
.landing .lp-problem li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--lp-terra);
  font-weight: 700;
}
@media (max-width: 760px) {
  .landing .lp-problem__in { grid-template-columns: 1fr; }
  .landing .lp-problem ul { grid-template-columns: 1fr; }
}

/* ── Secciones ─────────────────────────────────────────────────── */
.landing .lp-section { padding: clamp(56px, 8vw, 104px) 0; }
.landing .lp-section__head { max-width: 720px; margin-bottom: clamp(30px, 4.5vw, 52px); }

/* ── Mis fotos del evento: 3 pasos ─────────────────────────────── */
.landing .lp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  counter-reset: lp-step;
}
.landing .lp-step {
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: 18px;
  padding: 26px 24px 24px;
  position: relative;
}
.landing .lp-step::before {
  counter-increment: lp-step;
  content: "0" counter(lp-step);
  font-family: var(--lp-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--lp-brass);
}
.landing .lp-step h3 {
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: 19px;
  margin: 10px 0 8px;
}
.landing .lp-step p {
  font-size: 14px;
  color: var(--lp-ink-soft);
  margin: 0;
}
.landing .lp-step__icon {
  position: absolute;
  top: 22px;
  right: 22px;
  color: var(--lp-green);
}
@media (max-width: 820px) {
  .landing .lp-steps { grid-template-columns: 1fr; }
}
.landing .lp-privacy-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 22px;
  font-size: 13px;
  color: var(--lp-ink-faint);
  max-width: 62ch;
}
.landing .lp-privacy-note svg { flex: none; margin-top: 2px; color: var(--lp-green); }

/* ── Sección WhatsApp IA ───────────────────────────────────────── */
.landing .lp-wa {
  background: var(--lp-green-deep);
  color: #EFEAE0;
  border-radius: 28px;
  padding: clamp(36px, 5.5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  overflow: hidden;
  position: relative;
}
.landing .lp-wa::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 234, 224, .12), transparent 70%);
}
.landing .lp-wa .lp-eyebrow { color: #C9BC8F; }
.landing .lp-wa .lp-eyebrow::before { background: #C9BC8F; }
.landing .lp-wa h2 {
  font-family: var(--lp-display);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.12;
  margin: 0 0 14px;
  color: #FBF8F1;
}
.landing .lp-wa p { color: rgba(239, 234, 224, .8); font-size: 15.5px; margin: 0 0 18px; max-width: 52ch; }
.landing .lp-wa__badge {
  display: inline-block;
  font-family: var(--lp-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid rgba(201, 188, 143, .5);
  color: #C9BC8F;
  border-radius: 999px;
  padding: 6px 13px;
}
.landing .lp-wa .lp-shot {
  position: relative;
  transform: rotate(1.2deg);
  box-shadow: 0 40px 70px -36px rgba(0, 0, 0, .5);
}
@media (max-width: 880px) {
  .landing .lp-wa { grid-template-columns: 1fr; }
}

/* ── Grid de módulos ───────────────────────────────────────────── */
.landing .lp-modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.landing .lp-module {
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  padding: 24px 22px;
  transition: transform .25s var(--lp-ease), border-color .25s;
}
.landing .lp-module:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--lp-green) 45%, transparent);
}
.landing .lp-module svg { color: var(--lp-green); margin-bottom: 12px; }
.landing .lp-module h3 {
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 6px;
}
.landing .lp-module p { font-size: 13.5px; color: var(--lp-ink-soft); margin: 0; }
@media (max-width: 880px) { .landing .lp-modules { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .landing .lp-modules { grid-template-columns: 1fr; } }

/* ── Cómo funciona ─────────────────────────────────────────────── */
.landing .lp-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--lp-line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--lp-card);
}
.landing .lp-flow__step {
  padding: 30px 26px;
  border-left: 1px solid var(--lp-line-soft);
}
.landing .lp-flow__step:first-child { border-left: none; }
.landing .lp-flow__num {
  font-family: var(--lp-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--lp-brass);
}
.landing .lp-flow__step h3 {
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: 21px;
  margin: 10px 0 8px;
}
.landing .lp-flow__step p { font-size: 14px; color: var(--lp-ink-soft); margin: 0; }
@media (max-width: 760px) {
  .landing .lp-flow { grid-template-columns: 1fr; }
  .landing .lp-flow__step { border-left: none; border-top: 1px solid var(--lp-line-soft); }
  .landing .lp-flow__step:first-child { border-top: none; }
}

/* ── Comparativa honesta ───────────────────────────────────────── */
.landing .lp-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.landing .lp-compare__col {
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: 18px;
  padding: 26px 24px;
}
.landing .lp-compare__col--pictorial {
  border-color: color-mix(in srgb, var(--lp-green) 50%, transparent);
  background: linear-gradient(170deg, var(--lp-card), color-mix(in srgb, var(--lp-green) 7%, var(--lp-card)));
}
.landing .lp-compare__title {
  font-family: var(--lp-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lp-ink-faint);
  margin: 0 0 16px;
}
.landing .lp-compare__col--pictorial .lp-compare__title { color: var(--lp-green); }
.landing .lp-compare ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.landing .lp-compare li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  color: var(--lp-ink-soft);
  border-bottom: 1px dashed var(--lp-line-soft);
  padding-bottom: 10px;
}
.landing .lp-compare li:last-child { border-bottom: none; padding-bottom: 0; }
.landing .lp-compare li strong { font-family: var(--lp-mono); font-size: 12.5px; white-space: nowrap; color: var(--lp-ink); }
.landing .lp-compare__vs {
  display: flex;
  align-items: center;
  font-family: var(--lp-display);
  font-style: italic;
  color: var(--lp-ink-faint);
  font-size: 18px;
}
.landing .lp-compare__total {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--lp-line);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.landing .lp-compare__total strong { font-family: var(--lp-mono); }
.landing .lp-compare__frame {
  margin-top: 26px;
  font-family: var(--lp-display);
  font-style: italic;
  font-size: clamp(17px, 2.2vw, 21px);
  color: var(--lp-green-deep);
  max-width: 56ch;
}
@media (max-width: 820px) {
  .landing .lp-compare { grid-template-columns: minmax(0, 1fr); }
  .landing .lp-compare__vs { justify-content: center; }
}
@media (max-width: 480px) {
  .landing .lp-compare li,
  .landing .lp-compare__total { flex-wrap: wrap; }
  .landing .lp-compare li strong { white-space: normal; }
}

/* ── Planes ────────────────────────────────────────────────────── */
.landing .lp-plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 20px;
  align-items: stretch;
  max-width: 880px;
}
.landing .lp-plan {
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: 22px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
}
.landing .lp-plan--pro {
  border: 1.5px solid var(--lp-green);
  box-shadow: 0 30px 60px -34px rgba(54, 73, 62, .5);
  position: relative;
}
.landing .lp-plan__tag {
  position: absolute;
  top: -12px;
  left: 26px;
  background: var(--lp-green-deep);
  color: #FBF8F1;
  font-family: var(--lp-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.landing .lp-plan__name {
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: 21px;
  margin: 0 0 4px;
}
.landing .lp-plan__for { font-size: 13px; color: var(--lp-ink-faint); margin: 0 0 18px; }
.landing .lp-plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.landing .lp-plan__price strong {
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: 38px;
  letter-spacing: -.02em;
}
.landing .lp-plan__price span { font-size: 13px; color: var(--lp-ink-faint); }
.landing .lp-plan__was {
  font-size: 14px;
  color: var(--lp-ink-faint);
  text-decoration: line-through;
  margin-right: 2px;
}
.landing .lp-plan__launch {
  font-family: var(--lp-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--lp-terra);
  margin: 0 0 18px;
}
.landing .lp-plan ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 18px 0 0;
  border-top: 1px solid var(--lp-line-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.landing .lp-plan li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: var(--lp-ink-soft);
}
.landing .lp-plan li svg { flex: none; margin-top: 3px; color: var(--lp-green); }
.landing .lp-plan li strong { color: var(--lp-ink); font-weight: 700; }
.landing .lp-plans__legal {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--lp-ink-faint);
  max-width: 64ch;
}
@media (max-width: 760px) { .landing .lp-plans { grid-template-columns: 1fr; } }

/* ── FAQ ───────────────────────────────────────────────────────── */
.landing .lp-faq { max-width: 760px; }
.landing .lp-faq details {
  border-bottom: 1px solid var(--lp-line);
}
.landing .lp-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 2px;
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: 17px;
}
.landing .lp-faq summary::-webkit-details-marker { display: none; }
.landing .lp-faq summary::after {
  content: "+";
  font-family: var(--lp-mono);
  font-size: 18px;
  color: var(--lp-brass);
  transition: transform .25s var(--lp-ease);
}
.landing .lp-faq details[open] summary::after { transform: rotate(45deg); }
.landing .lp-faq details p {
  margin: 0;
  padding: 0 2px 18px;
  font-size: 14.5px;
  color: var(--lp-ink-soft);
  max-width: 62ch;
}

/* ── CTA final ─────────────────────────────────────────────────── */
.landing .lp-final {
  background: var(--lp-ink);
  color: #EFEAE0;
  border-radius: 28px;
  text-align: center;
  padding: clamp(48px, 7vw, 84px) 24px;
  position: relative;
  overflow: hidden;
}
.landing .lp-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(560px 280px at 50% -60px, rgba(138, 123, 83, .25), transparent 70%);
}
.landing .lp-final > * { position: relative; }
.landing .lp-final h2 {
  font-family: var(--lp-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 42px);
  margin: 0 0 12px;
  color: #FBF8F1;
}
.landing .lp-final p { color: rgba(239, 234, 224, .72); margin: 0 0 26px; }
.landing .lp-final .lp-btn--primary {
  background: #FBF8F1;
  color: var(--lp-ink);
  box-shadow: none;
}
.landing .lp-final .lp-btn--primary:hover { background: #fff; }
.landing .lp-final__note {
  font-family: var(--lp-mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: rgba(239, 234, 224, .5);
  margin-top: 14px;
}

/* ── Footer ────────────────────────────────────────────────────── */
.landing .lp-footer {
  padding: 40px 0 48px;
  font-size: 13px;
  color: var(--lp-ink-faint);
}
.landing .lp-footer__in {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--lp-line-soft);
  padding-top: 26px;
}
.landing .lp-footer a { color: var(--lp-ink-soft); text-decoration: none; }
.landing .lp-footer a:hover { color: var(--lp-ink); }
.landing .lp-footer__links { display: flex; gap: 20px; flex-wrap: wrap; }
.landing .lp-footer__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--lp-ink);
}
.landing .lp-footer__brand img { width: 22px; height: auto; }
/* ══════════════════════════════════════════════════════════════════════════════
   PICTORIAL — Modern Design System
   Un diseño elegante y profesional para fotógrafos
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   CSS Variables / Design Tokens
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Colores principales */
  --pt-white: #ffffff;
  --pt-black: #0a0a0a;

  /* Escala de grises */
  --pt-gray-50: #fafafa;
  --pt-gray-100: #f4f4f5;
  --pt-gray-200: #e4e4e7;
  --pt-gray-300: #d4d4d8;
  --pt-gray-400: #a1a1aa;
  --pt-gray-500: #71717a;
  --pt-gray-600: #52525b;
  --pt-gray-700: #3f3f46;
  --pt-gray-800: #27272a;
  --pt-gray-900: #18181b;

  /* Accent Colors — conectados al tema activo (Salvia/Classic) con fallback */
  --pt-primary: var(--sv-text, #111827);
  --pt-primary-hover: var(--sv-green-d, #1f2937);
  --pt-accent: var(--sv-green, #3b82f6);
  --pt-accent-hover: var(--sv-green-d, #2563eb);
  --pt-success: #10b981;
  --pt-warning: #f59e0b;
  --pt-danger: #ef4444;

  /* Layout */
  --pt-sidebar-width: 260px;
  --pt-sidebar-collapsed: 72px;
  --pt-header-height: 64px;

  /* Spacing */
  --pt-space-1: 4px;
  --pt-space-2: 8px;
  --pt-space-3: 12px;
  --pt-space-4: 16px;
  --pt-space-5: 20px;
  --pt-space-6: 24px;
  --pt-space-8: 32px;

  /* Border Radius */
  --pt-radius-sm: 6px;
  --pt-radius: 10px;
  --pt-radius-lg: 16px;
  --pt-radius-full: 9999px;

  /* Shadows */
  --pt-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --pt-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --pt-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  --pt-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Transitions */
  --pt-transition-fast: 150ms ease;
  --pt-transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --pt-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Fix for layout shift when dropdowns open - force scrollbar to always be visible */
html {
  overflow-y: scroll !important;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pt-gray-900);
  background: var(--pt-gray-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* Prevent horizontal scroll */
  max-width: 100vw;
}

/* ══════════════════════════════════════════════════════════════════════════════
   APP LAYOUT
   ══════════════════════════════════════════════════════════════════════════════ */
.pictorial-app {
  min-height: 100vh;
  display: flex;
  overflow-x: hidden; /* Prevent horizontal scroll */
  max-width: 100vw;
}

/* ── SIDEBAR ───────────────────────────────────────────────────────────────── */
.pictorial-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--pt-sidebar-width);
  background: var(--pt-primary);
  color: var(--pt-white);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: width var(--pt-transition), transform var(--pt-transition);
}

.pictorial-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pt-space-4) var(--pt-space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  min-height: var(--pt-header-height);
}

.pictorial-sidebar__logo {
  display: flex;
  align-items: center;
  gap: var(--pt-space-3);
  text-decoration: none;
  color: var(--pt-white);
}

.pictorial-sidebar__logo-img {
  width: 36px;
  height: 36px;
  border-radius: var(--pt-radius-sm);
  object-fit: contain;
}

.pictorial-sidebar__logo-text {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.pictorial-sidebar__toggle {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: var(--pt-radius-sm);
  color: var(--pt-white);
  cursor: pointer;
  transition: background var(--pt-transition-fast);
}

.pictorial-sidebar__toggle:hover {
  background: rgba(255, 255, 255, 0.15);
}

.pictorial-sidebar__nav {
  flex: 1;
  padding: var(--pt-space-4) 0;
  overflow-y: auto;
}

.pictorial-nav {
  list-style: none;
  margin: 0;
  padding: 0 var(--pt-space-3);
}

.pictorial-nav__item {
  margin-bottom: var(--pt-space-1);
}

.pictorial-nav__link {
  display: flex;
  align-items: center;
  gap: var(--pt-space-3);
  padding: var(--pt-space-3) var(--pt-space-4);
  border-radius: var(--pt-radius);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-weight: 500;
  transition: all var(--pt-transition-fast);
}

.pictorial-nav__link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--pt-white);
}

.pictorial-nav__link.is-active {
  background: rgba(255, 255, 255, 0.15);
  color: var(--pt-white);
  font-weight: 600;
}

.pictorial-nav__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pictorial-nav__text {
  white-space: nowrap;
  overflow: hidden;
}

.pictorial-sidebar__footer {
  padding: var(--pt-space-4) var(--pt-space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pictorial-sidebar__version {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

/* ── OVERLAY ───────────────────────────────────────────────────────────────── */
.pictorial-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  pointer-events: none; /* CRITICAL: Don't block clicks when hidden */
  transition: opacity var(--pt-transition);
}

.pictorial-overlay.is-visible {
  opacity: 1;
  pointer-events: auto; /* Allow clicks only when visible */
}

/* ── MAIN ───────────────────────────────────────────────────────────────── */
.pictorial-main {
  flex: 1;
  margin-left: var(--pt-sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--pt-transition);
  overflow-x: hidden;
  max-width: 100%;
}

@media (max-width: 1023px) {
  .pictorial-main {
    margin-left: 0;
    max-width: 100vw;
  }
}

/* ── HEADER ───────────────────────────────────────────────────────────────── */
.pictorial-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--pt-space-4);
  padding: 0 var(--pt-space-6);
  height: var(--pt-header-height);
  background: var(--pt-white);
}

.pictorial-header__left {
  display: flex;
  align-items: center;
}

.pictorial-header__menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--pt-radius);
  color: var(--pt-gray-700);
  cursor: pointer;
  transition: background var(--pt-transition-fast);
}

.pictorial-header__menu-btn:hover {
  background: var(--pt-gray-100);
}

.pictorial-header__center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.pictorial-search {
  display: flex;
  align-items: center;
  gap: var(--pt-space-2);
  width: 100%;
  max-width: 400px;
  padding: var(--pt-space-2) var(--pt-space-4);
  background: var(--pt-gray-100);
  border: 1px solid transparent;
  border-radius: var(--pt-radius-full);
  transition: all var(--pt-transition-fast);
}

.pictorial-search:focus-within {
  background: var(--pt-white);
  border-color: var(--pt-gray-300);
  box-shadow: var(--pt-shadow);
}

.pictorial-search svg {
  color: var(--pt-gray-400);
  flex-shrink: 0;
}

.pictorial-search__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--pt-gray-900);
  outline: none;
}

.pictorial-search__input::placeholder {
  color: var(--pt-gray-400);
}

.pictorial-header__right {
  display: flex;
  align-items: center;
  gap: var(--pt-space-2);
}

.pictorial-header__icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--pt-radius);
  color: var(--pt-gray-600);
  cursor: pointer;
  transition: all var(--pt-transition-fast);
}

.pictorial-header__icon-btn:hover {
  background: var(--pt-gray-100);
  color: var(--pt-gray-900);
}

.pictorial-header__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--pt-danger);
  border-radius: var(--pt-radius-full);
  font-size: 11px;
  font-weight: 700;
  color: var(--pt-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pictorial-header__user-btn {
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: var(--pt-space-1);
  border-radius: var(--pt-radius-full);
  cursor: pointer;
  transition: all var(--pt-transition-fast);
}

.pictorial-header__user-btn:hover {
  background: var(--pt-gray-100);
}

.pictorial-header__avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--pt-radius-full);
  object-fit: cover;
}

/* ── DROPDOWN ───────────────────────────────────────────────────────────────── */
.pictorial-dropdown {
  position: relative;
}

.pictorial-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--pt-space-2);
  min-width: 280px;
  background: var(--pt-white);
  border: 1px solid var(--pt-gray-200);
  border-radius: var(--pt-radius-lg);
  box-shadow: var(--pt-shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--pt-transition-fast);
  z-index: 1000;
}

.pictorial-dropdown__menu--right {
  left: auto;
  right: 0;
}

.pictorial-dropdown__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pictorial-dropdown__header {
  padding: var(--pt-space-4);
  border-bottom: 1px solid var(--pt-gray-100);
}

.pictorial-dropdown__header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--pt-gray-900);
}

.pictorial-dropdown__body {
  padding: var(--pt-space-2);
  max-height: 300px;
  overflow-y: auto;
}

.pictorial-dropdown__footer {
  padding: var(--pt-space-3) var(--pt-space-4);
  border-top: 1px solid var(--pt-gray-100);
  text-align: center;
}

.pictorial-dropdown__footer a {
  font-size: 13px;
  font-weight: 600;
  color: var(--pt-accent);
  text-decoration: none;
}

.pictorial-dropdown__footer a:hover {
  text-decoration: underline;
}

.pictorial-dropdown__user-info {
  padding: var(--pt-space-4);
  border-bottom: 1px solid var(--pt-gray-100);
}

.pictorial-dropdown__user-info strong {
  display: block;
  font-size: 15px;
  color: var(--pt-gray-900);
}

.pictorial-dropdown__user-info span {
  display: block;
  font-size: 13px;
  color: var(--pt-gray-500);
  margin-top: 2px;
}

.pictorial-dropdown__divider {
  height: 1px;
  background: var(--pt-gray-100);
  margin: var(--pt-space-2) 0;
}

.pictorial-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--pt-space-3);
  padding: var(--pt-space-3) var(--pt-space-4);
  border-radius: var(--pt-radius);
  font-size: 14px;
  font-weight: 500;
  color: var(--pt-gray-700);
  text-decoration: none;
  transition: all var(--pt-transition-fast);
}

.pictorial-dropdown__item:hover {
  background: var(--pt-gray-50);
  color: var(--pt-gray-900);
}

.pictorial-dropdown__item--danger {
  color: var(--pt-danger);
}

.pictorial-dropdown__item--danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--pt-danger);
}

/* ── NOTIFICATION ───────────────────────────────────────────────────────────── */
.pictorial-notif {
  display: flex;
  gap: var(--pt-space-3);
  padding: var(--pt-space-3);
  border-radius: var(--pt-radius);
  transition: background var(--pt-transition-fast);
}

.pictorial-notif:hover {
  background: var(--pt-gray-50);
}

.pictorial-notif__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pt-gray-100);
  border-radius: var(--pt-radius);
  color: var(--pt-gray-600);
  flex-shrink: 0;
}

.pictorial-notif__icon--info {
  background: rgba(59, 130, 246, 0.1);
  color: var(--pt-accent);
}

.pictorial-notif__content {
  flex: 1;
  min-width: 0;
}

.pictorial-notif__content p {
  margin: 0;
  font-size: 13px;
  color: var(--pt-gray-700);
  line-height: 1.4;
}

.pictorial-notif__time {
  display: block;
  font-size: 12px;
  color: var(--pt-gray-400);
  margin-top: 4px;
}

/* ── CONTENT ───────────────────────────────────────────────────────────────── */
.pictorial-content {
  flex: 1;
  padding: var(--pt-space-6);
  max-width: 100%;
}

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
.pictorial-footer {
  padding: var(--pt-space-6);
  text-align: center;
  color: var(--pt-gray-500);
  font-size: 13px;
  border-top: 1px solid var(--pt-gray-200);
  background: var(--pt-white);
}

.pictorial-footer p {
  margin: 0;
}

.pictorial-footer a {
  color: var(--pt-accent);
  text-decoration: none;
}

.pictorial-footer a:hover {
  text-decoration: underline;
}

.pictorial-footer__heart {
  color: #ef4444;
}

/* ── ALERTS ───────────────────────────────────────────────────────────────── */
.pictorial-alert {
  display: flex;
  align-items: center;
  gap: var(--pt-space-3);
  padding: var(--pt-space-4) var(--pt-space-5);
  border-radius: var(--pt-radius);
  margin-bottom: var(--pt-space-5);
  font-size: 14px;
  font-weight: 500;
}

.pictorial-alert--success {
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.pictorial-alert--error {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ══════════════════════════════════════════════════════════════════════════════
   SIDEBAR COLLAPSED STATE
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .pictorial-sidebar__toggle {
    display: flex;
  }

  [data-sidebar-collapsed="true"] .pictorial-sidebar {
    width: var(--pt-sidebar-collapsed);
  }

  [data-sidebar-collapsed="true"] .pictorial-sidebar__logo-text,
  [data-sidebar-collapsed="true"] .pictorial-nav__text,
  [data-sidebar-collapsed="true"] .pictorial-sidebar__version {
    display: none;
  }

  [data-sidebar-collapsed="true"] .pictorial-sidebar__header {
    justify-content: center;
    padding: var(--pt-space-4) var(--pt-space-3);
  }

  [data-sidebar-collapsed="true"] .pictorial-nav {
    padding: 0 var(--pt-space-2);
  }

  [data-sidebar-collapsed="true"] .pictorial-nav__link {
    justify-content: center;
    padding: var(--pt-space-3);
  }

  [data-sidebar-collapsed="true"] .pictorial-main {
    margin-left: var(--pt-sidebar-collapsed);
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE - MOBILE
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .pictorial-sidebar {
    transform: translateX(-100%);
  }

  .pictorial-sidebar.is-open {
    transform: translateX(0);
  }

  .pictorial-overlay {
    display: block;
  }

  .pictorial-main {
    margin-left: 0;
  }

  .pictorial-header__menu-btn {
    display: flex;
  }

  .pictorial-header {
    padding: 0 var(--pt-space-4);
  }

  .pictorial-content {
    padding: var(--pt-space-4);
  }

  .pictorial-search {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .pictorial-header__center {
    display: none;
  }

  .pictorial-content {
    padding: var(--pt-space-3);
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ADMIN PAGE COMPONENTS
   ══════════════════════════════════════════════════════════════════════════════ */
.admin-page {
  max-width: 1200px;
  margin: 0 auto;
}

.admin-page__header {
  margin-bottom: var(--pt-space-6);
}

.admin-page__breadcrumb {
  margin-bottom: var(--pt-space-4);
}

.admin-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: var(--pt-space-2);
  font-size: 14px;
  font-weight: 500;
  color: var(--pt-gray-600);
  text-decoration: none;
  transition: color var(--pt-transition-fast);
}

.admin-breadcrumb__link:hover {
  color: var(--pt-gray-900);
}

.admin-page__title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--pt-gray-900);
  letter-spacing: -0.5px;
}

.admin-page__subtitle {
  margin: var(--pt-space-2) 0 0;
  font-size: 15px;
  color: var(--pt-gray-500);
}

.admin-page__footer {
  margin-top: var(--pt-space-6);
  padding-top: var(--pt-space-4);
  border-top: 1px solid var(--pt-gray-200);
}

.admin-link {
  display: inline-flex;
  align-items: center;
  gap: var(--pt-space-2);
  font-size: 14px;
  font-weight: 500;
  color: var(--pt-accent);
  text-decoration: none;
}

.admin-link:hover {
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--pt-white);
  border: 1px solid var(--pt-gray-200);
  border-radius: var(--pt-radius-lg);
  box-shadow: var(--pt-shadow-sm);
}

.card-header {
  padding: var(--pt-space-5);
  border-bottom: 1px solid var(--pt-gray-100);
}

.card-header h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--pt-gray-900);
}

.card-body {
  padding: var(--pt-space-5);
}

/* ══════════════════════════════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════════════════════════════ */
.form-label {
  display: block;
  margin-bottom: var(--pt-space-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--pt-gray-700);
}

.form-control {
  display: block;
  width: 100%;
  padding: var(--pt-space-3) var(--pt-space-4);
  font-size: 14px;
  color: var(--pt-gray-900);
  background: var(--pt-white);
  border: 1px solid var(--pt-gray-300);
  border-radius: var(--pt-radius);
  transition: all var(--pt-transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--pt-accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.form-control::placeholder {
  color: var(--pt-gray-400);
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

/* Multiple select styling */
select.form-control[multiple],
select.form-select-clients {
  appearance: auto;
  background-image: none;
  padding-right: var(--pt-space-4);
  height: auto;
  min-height: 120px;
  max-height: 150px;
  overflow-y: auto;
}

select.form-control[multiple] option,
select.form-select-clients option {
  padding: 8px 12px;
  border-bottom: 1px solid var(--pt-gray-100);
}

select.form-control[multiple] option:checked,
select.form-select-clients option:checked {
  background: linear-gradient(0deg, var(--pt-accent) 0%, var(--pt-accent) 100%);
  color: white;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pt-space-2);
  padding: var(--pt-space-3) var(--pt-space-5);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--pt-radius);
  border: none;
  cursor: pointer;
  transition: all var(--pt-transition-fast);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--pt-primary);
  color: var(--pt-white);
}

.btn-primary:hover:not(:disabled) {
  background: var(--pt-primary-hover);
}

.btn-secondary {
  background: var(--pt-gray-100);
  color: var(--pt-gray-700);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--pt-gray-200);
  color: var(--pt-gray-900);
}

.btn-warning {
  background: #f59e0b;
  color: #ffffff;
}

.btn-warning:hover:not(:disabled) {
  background: #d97706;
}

.btn-danger {
  background: var(--pt-danger);
  color: var(--pt-white);
}

.btn-danger:hover:not(:disabled) {
  background: #dc2626;
}

.btn-info {
  background: #dbeafe;
  color: #1e40af;
}

.btn-info:hover:not(:disabled) {
  background: #bfdbfe;
}

.btn-lg {
  padding: var(--pt-space-4) var(--pt-space-6);
  font-size: 15px;
}

.app-btn-primary {
  background: var(--pt-primary);
  color: var(--pt-white) !important;
}

.app-btn-primary:hover {
  background: var(--pt-primary-hover);
}

.app-btn-secondary {
  background: var(--pt-gray-100);
  color: var(--pt-gray-700);
}

.app-btn-secondary:hover {
  background: var(--pt-gray-200);
}

/* ══════════════════════════════════════════════════════════════════════════════
   ALERTS (Bootstrap Compatibility)
   ══════════════════════════════════════════════════════════════════════════════ */
.alert {
  padding: var(--pt-space-4) var(--pt-space-5);
  border-radius: var(--pt-radius);
  margin-bottom: var(--pt-space-4);
  font-size: 14px;
}

.alert-success {
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.alert-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.alert-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #92400e;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.alert-info {
  background: rgba(59, 130, 246, 0.1);
  color: #1e40af;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

/* ══════════════════════════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--pt-radius-full);
}

.bg-primary { background: var(--pt-primary) !important; color: var(--pt-white) !important; }
.bg-secondary { background: var(--pt-gray-500) !important; color: var(--pt-white) !important; }
.bg-success { background: var(--pt-success) !important; color: var(--pt-white) !important; }
.bg-danger { background: var(--pt-danger) !important; color: var(--pt-white) !important; }
.bg-warning { background: var(--pt-warning) !important; color: #fff !important; }
.bg-info { background: var(--pt-accent) !important; color: var(--pt-white) !important; }
.bg-dark { background: var(--pt-gray-800) !important; color: var(--pt-white) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════════════════════════════ */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table th, .table td {
  padding: var(--pt-space-4);
  text-align: left;
  border-bottom: 1px solid var(--pt-gray-200);
}

.table th {
  font-size: 13px;
  font-weight: 600;
  color: var(--pt-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--pt-gray-50);
}

.table tbody tr:hover { background: var(--pt-gray-50); }

/* ══════════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ══════════════════════════════════════════════════════════════════════════════ */
.text-muted { color: var(--pt-gray-500) !important; }
.text-center { text-align: center !important; }
.text-white { color: var(--pt-white) !important; }
.text-dark { color: var(--pt-gray-800) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--pt-space-1) !important; }
.mb-2 { margin-bottom: var(--pt-space-2) !important; }
.mb-3 { margin-bottom: var(--pt-space-3) !important; }
.mb-4 { margin-bottom: var(--pt-space-4) !important; }

.mt-2 { margin-top: var(--pt-space-2) !important; }
.mt-3 { margin-top: var(--pt-space-3) !important; }
.mt-auto { margin-top: auto !important; }

.p-3 { padding: var(--pt-space-3) !important; }
.p-4 { padding: var(--pt-space-4) !important; }
.px-4 { padding-left: var(--pt-space-4) !important; padding-right: var(--pt-space-4) !important; }
.py-3 { padding-top: var(--pt-space-3) !important; padding-bottom: var(--pt-space-3) !important; }

.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-inline-flex { display: inline-flex !important; }
.d-none { display: none !important; }

.flex-column { flex-direction: column !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.flex-wrap { flex-wrap: wrap !important; }

.gap-2 { gap: var(--pt-space-2) !important; }
.gap-3 { gap: var(--pt-space-3) !important; }

.w-100 { width: 100% !important; }

.border-bottom { border-bottom: 1px solid var(--pt-gray-200) !important; }
.border-top { border-top: 1px solid var(--pt-gray-200) !important; }

.rounded { border-radius: var(--pt-radius) !important; }

.shadow-sm { box-shadow: var(--pt-shadow-sm) !important; }

.img-fluid { max-width: 100%; height: auto; }

.position-absolute { position: absolute !important; }
.position-relative { position: relative !important; }
.top-0 { top: 0 !important; }
.start-0 { left: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   GRID SYSTEM (Bootstrap Compatibility)
   ══════════════════════════════════════════════════════════════════════════════ */
.container-xl {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--pt-space-4);
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(-1 * var(--pt-space-3));
}

.col, [class*="col-"] {
  flex: 1;
  padding: 0 var(--pt-space-3);
}

.col-auto { flex: 0 0 auto; width: auto; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 768px) {
  .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 992px) {
  .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
}

.gy-4 > * { margin-bottom: var(--pt-space-4); }

/* ══════════════════════════════════════════════════════════════════════════════
   HERO TITLE FIX - WHITE TEXT
   ══════════════════════════════════════════════════════════════════════════════ */
.pg-hero__title {
  color: #ffffff !important;
}

.pg-hero__content {
  color: #ffffff;
}

.pg-hero__description {
  color: rgba(255, 255, 255, 0.85);
}

/* ══════════════════════════════════════════════════════════════════════════════
   AUTH PAGES (Login, Register, Password Recovery)
   ══════════════════════════════════════════════════════════════════════════════ */
.app-login,
.app-signup,
.app-reset-password {
  min-height: 100vh;
  background: var(--pt-gray-50);
}

.app-auth-wrapper {
  min-height: 100vh;
}

.auth-main-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--pt-white);
}

.auth-background-col {
  position: relative;
  display: none;
  min-height: 100vh;
  overflow: hidden;
}

@media (min-width: 768px) {
  .auth-background-col {
    display: block;
  }
}

.auth-background-col img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-background-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.7) 0%, rgba(17, 24, 39, 0.5) 100%);
}

.auth-background-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 1;
}

.overlay-content {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--pt-white);
}

.overlay-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--pt-white);
  margin-bottom: 8px;
}

.overlay-content div {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.app-auth-body {
  width: 100%;
  max-width: 400px;
  padding: 20px;
}

.app-auth-branding {
  text-align: center;
}

.app-auth-branding img {
  height: 50px;
  width: auto;
}

.auth-heading {
  font-size: 28px;
  font-weight: 800;
  color: var(--pt-gray-900);
  letter-spacing: -0.5px;
  margin-bottom: 32px;
}

.auth-intro {
  font-size: 15px;
  color: var(--pt-gray-500);
  line-height: 1.5;
}

.auth-form-container {
  margin-top: 24px;
}

.auth-form-container .form-control {
  display: block;
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  color: var(--pt-gray-900);
  background: var(--pt-gray-50);
  border: 1px solid var(--pt-gray-200);
  border-radius: var(--pt-radius);
  transition: all var(--pt-transition-fast);
}

.auth-form-container .form-control:focus {
  outline: none;
  background: var(--pt-white);
  border-color: var(--pt-accent);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.auth-form-container .form-control::placeholder {
  color: var(--pt-gray-400);
}

.auth-form-container .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-form-container .form-check-input {
  width: 18px;
  height: 18px;
  border: 2px solid var(--pt-gray-300);
  border-radius: 4px;
  cursor: pointer;
  accent-color: var(--pt-primary);
}

.auth-form-container .form-check-label {
  font-size: 14px;
  color: var(--pt-gray-600);
  cursor: pointer;
}

.auth-form-container .forgot-password a {
  font-size: 14px;
  color: var(--pt-accent);
  text-decoration: none;
  font-weight: 500;
}

.auth-form-container .forgot-password a:hover {
  text-decoration: underline;
}

.auth-form-container .btn.app-btn-primary,
.auth-form-container .btn.theme-btn {
  display: block;
  width: 100%;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--pt-white);
  background: var(--pt-primary);
  border: none;
  border-radius: var(--pt-radius);
  cursor: pointer;
  transition: all var(--pt-transition-fast);
  margin-top: 16px;
}

.auth-form-container .btn.app-btn-primary:hover,
.auth-form-container .btn.theme-btn:hover {
  background: var(--pt-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.2);
}

.auth-option {
  margin-top: 24px;
  font-size: 14px;
  color: var(--pt-gray-500);
}

.auth-option .text-link {
  color: var(--pt-accent);
  text-decoration: none;
  font-weight: 600;
}

.auth-option .text-link:hover {
  text-decoration: underline;
}

.app-auth-footer {
  margin-top: auto;
  padding: 24px 0;
}

.app-auth-footer .copyright {
  font-size: 13px;
  color: var(--pt-gray-400);
}

.app-auth-footer .app-link {
  color: var(--pt-accent);
  text-decoration: none;
}

.app-auth-footer .app-link:hover {
  text-decoration: underline;
}

/* Devise shared links */
.auth-form-container + div a,
.auth-form-container ~ a {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  color: var(--pt-gray-500);
  text-decoration: none;
}

.auth-form-container + div a:hover,
.auth-form-container ~ a:hover {
  color: var(--pt-accent);
}

/* sr-only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Extra row/col utilities for auth */
.g-0 {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

.g-0 > * {
  padding-right: 0;
  padding-left: 0;
}

.p-0 { padding: 0 !important; }
.p-5 { padding: 48px !important; }
.p-lg-5 { padding: 48px !important; }

.h-100 { height: 100% !important; }

.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.text-start { text-align: left !important; }
.text-left { text-align: left !important; }
.text-end { text-align: right !important; }

.align-content-end { align-content: flex-end !important; }

@media (max-width: 767px) {
  .p-5 { padding: 24px !important; }
  .auth-heading { font-size: 24px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   DROPDOWN FIX - Better positioning and visibility
   ══════════════════════════════════════════════════════════════════════════════ */
.pictorial-dropdown {
  position: relative;
  z-index: 1001;
}

.pictorial-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  min-width: 320px;
  max-width: 380px;
  background: var(--pt-white);
  border: 1px solid var(--pt-gray-200);
  border-radius: var(--pt-radius-lg);
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.15), 0 8px 16px -4px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1002;
  overflow: hidden;
}

.pictorial-dropdown__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* First dropdown (notifications) align left */
.pictorial-header__right > .pictorial-dropdown:first-child .pictorial-dropdown__menu {
  right: auto;
  left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(0.98);
  transform-origin: top center;
}

.pictorial-header__right > .pictorial-dropdown:first-child .pictorial-dropdown__menu.is-open {
  transform: translateX(-50%) translateY(0) scale(1);
}

/* User dropdown stays right-aligned */
.pictorial-dropdown__menu--right {
  right: 0;
  left: auto;
  min-width: 240px;
}

/* Improved dropdown header */
.pictorial-dropdown__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--pt-gray-100);
  background: var(--pt-gray-50);
}

.pictorial-dropdown__header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--pt-gray-900);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Improved notification items */
.pictorial-notif {
  display: flex;
  gap: 14px;
  padding: 14px 20px;
  border-radius: 0;
  transition: background var(--pt-transition-fast);
  border-bottom: 1px solid var(--pt-gray-50);
}

.pictorial-notif:last-child {
  border-bottom: none;
}

.pictorial-notif:hover {
  background: var(--pt-gray-50);
}

.pictorial-notif__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pt-gray-100);
  border-radius: var(--pt-radius);
  color: var(--pt-gray-600);
  flex-shrink: 0;
}

.pictorial-notif__icon--info {
  background: rgba(59, 130, 246, 0.1);
  color: var(--pt-accent);
}

.pictorial-notif__content p {
  margin: 0;
  font-size: 14px;
  color: var(--pt-gray-700);
  line-height: 1.5;
}

.pictorial-notif__time {
  display: block;
  font-size: 12px;
  color: var(--pt-gray-400);
  margin-top: 6px;
}

/* Dropdown footer */
.pictorial-dropdown__footer {
  padding: 14px 20px;
  border-top: 1px solid var(--pt-gray-100);
  text-align: center;
  background: var(--pt-gray-50);
}

.pictorial-dropdown__footer a {
  font-size: 14px;
  font-weight: 600;
  color: var(--pt-accent);
  text-decoration: none;
}

.pictorial-dropdown__footer a:hover {
  text-decoration: underline;
}

/* Responsive dropdown */
@media (max-width: 640px) {
  .pictorial-dropdown__menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: 100%;
    max-width: 100%;
    border-radius: var(--pt-radius-lg) var(--pt-radius-lg) 0 0;
    transform: translateY(100%);
    max-height: 70vh;
    overflow-y: auto;
  }

  .pictorial-dropdown__menu.is-open {
    transform: translateY(0);
  }

  .pictorial-header__right > .pictorial-dropdown:first-child .pictorial-dropdown__menu {
    transform: translateY(100%);
  }

  .pictorial-header__right > .pictorial-dropdown:first-child .pictorial-dropdown__menu.is-open {
    transform: translateY(0);
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE TOUCH OPTIMIZATIONS
   Critical fixes for mobile interactivity
   ══════════════════════════════════════════════════════════════════════════════ */

/* Remove tap highlight on all interactive elements */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Enable smooth scrolling on mobile */
html {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Improve touch responsiveness for all buttons and links */
button,
a,
[role="button"],
[data-action],
.pictorial-nav__link,
.pg-card__link,
.pg-card__fav,
.pg-action-btn,
.pg-tab {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}

/* Allow text selection in content areas */
p, span, div:not([role="button"]) {
  -webkit-user-select: text;
  user-select: text;
}

/* Improve sidebar touch responsiveness */
.pictorial-sidebar,
.pictorial-overlay {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* Better touch targets for mobile menu */
@media (max-width: 1023px) {
  /* Increase tap target size for mobile menu button */
  .pictorial-header__menu-btn {
    min-width: 48px;
    min-height: 48px;
    padding: 12px;
  }

  /* Improve nav links touch targets */
  .pictorial-nav__link {
    min-height: 48px;
    padding: 14px 16px;
  }

  /* Better touch for sidebar toggle */
  .pictorial-sidebar__toggle {
    min-width: 44px;
    min-height: 44px;
  }

  /* Improve header icon buttons */
  .pictorial-header__icon-btn,
  .pictorial-header__user-btn {
    min-width: 48px;
    min-height: 48px;
  }

  /* Make sidebar easier to swipe */
  .pictorial-sidebar.is-open {
    touch-action: pan-y;
  }

  /* Prevent body scroll when sidebar is open */
  body:has(.pictorial-sidebar.is-open) {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }

  /* Improve overlay touch area */
  .pictorial-overlay.is-visible {
    display: block;
    touch-action: none;
  }
}

/* Gallery mobile touch optimizations */
@media (max-width: 768px) {
  /* Improve card link touch area */
  .pg-card__link {
    display: block;
    touch-action: manipulation;
    -webkit-user-drag: none;
  }

  /* Better favorite button touch target */
  .pg-card__fav {
    min-width: 48px;
    min-height: 48px;
    top: 8px;
    right: 8px;
    opacity: 1 !important; /* Always visible on mobile */
    transform: scale(1) !important;
  }

  /* Improve tab touch targets */
  .pg-tab {
    min-height: 44px;
    padding: 12px 20px;
  }

  /* Better action buttons */
  .pg-action-btn {
    min-height: 44px;
    padding: 12px 16px;
  }

  /* Lightbox controls - bigger touch targets */
  .pg-lightbox__close {
    width: 56px;
    height: 56px;
    top: 12px;
    right: 12px;
  }

  .pg-lightbox__nav {
    width: 64px;
    height: 64px;
  }

  .pg-lightbox__nav--prev {
    left: 8px;
  }

  .pg-lightbox__nav--next {
    right: 8px;
  }

  /* Prevent image dragging in lightbox */
  .pg-lightbox__img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
  }

  /* Better download button in lightbox */
  .pg-lightbox__download {
    min-height: 48px;
    padding: 14px 24px;
  }
}

/* Prevent double-tap zoom on buttons */
button,
a,
[role="button"] {
  touch-action: manipulation;
}

/* Improve form controls on mobile */
@media (max-width: 768px) {
  select.form-control,
  .pg-sort select {
    min-height: 44px;
    padding: 12px 40px 12px 16px;
    font-size: 16px; /* Prevents zoom on iOS */
  }

  input.form-control,
  textarea.form-control {
    font-size: 16px; /* Prevents zoom on iOS */
    min-height: 44px;
  }
}

/* Fix for iOS Safari bottom bar */
@supports (-webkit-touch-callout: none) {
  .pictorial-main {
    min-height: -webkit-fill-available;
  }

  .pg-lightbox__container {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* Smooth transitions for mobile interactions */
@media (max-width: 1023px) {
  .pictorial-sidebar,
  .pictorial-overlay,
  .pictorial-dropdown__menu {
    will-change: transform, opacity;
  }
}

/* Prevent text selection during touch interactions */
.pictorial-sidebar.is-open *,
.pg-lightbox.is-open *,
.pictorial-dropdown__menu.is-open * {
  -webkit-user-select: none;
  user-select: none;
}

/* Allow text selection in specific areas */
.pictorial-notif__content,
.pg-card__name,
.pg-lightbox__filename {
  -webkit-user-select: text;
  user-select: text;
}

/* Improve dropdown touch on mobile */
@media (max-width: 640px) {
  .pictorial-dropdown__item {
    min-height: 48px;
    padding: 14px 20px;
  }

  .pictorial-notif {
    padding: 16px 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROJECT INFO CARDS — Contract, Photographer, Event Info
═══════════════════════════════════════════════════════════════════════════ */

.pg-info-section {
  padding: 24px 0 0;
}

.pg-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.pg-info-card {
  display: flex;
  gap: 16px;
  padding: 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}

.pg-info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.pg-info-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  flex-shrink: 0;
}

.pg-info-card__icon--success {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #059669;
}

.pg-info-card__content {
  flex: 1;
  min-width: 0;
}

.pg-info-card__title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9ca3af;
  margin: 0 0 4px;
}

.pg-info-card__name {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 12px;
}

.pg-info-card__badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}

.pg-info-card__badge--success {
  background: #d1fae5;
  color: #059669;
}

.pg-info-card__date {
  font-size: 17px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 4px;
}

.pg-info-card__detail {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.pg-info-card__detail svg {
  flex-shrink: 0;
}

/* WhatsApp Button */
.pg-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #25D366;
  color: white !important;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.pg-whatsapp-btn:hover {
  background: #1da851;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
  color: white !important;
}

.pg-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #111827;
  color: white !important;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.pg-contact-btn:hover {
  background: #1f2937;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.2);
  color: white !important;
}

/* Download PDF Button */
.pg-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #f3f4f6;
  color: #374151 !important;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  margin-top: 8px;
}

.pg-download-btn:hover {
  background: #e5e7eb;
  color: #111827 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .pg-info-section {
    padding: 16px 0 0;
  }

  .pg-info-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pg-info-card {
    padding: 20px;
  }

  .pg-info-card__icon {
    width: 44px;
    height: 44px;
  }

  .pg-info-card__name {
    font-size: 16px;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   SALVIA · Project show (admin)
   Structure ported from "Pictorial - Salvia Proyecto.html".
   Scoped under .proj so it only restyles the project dashboard, reusing the
   Salvia design tokens (--sv-*) already loaded by salvia.css.
   Theme-aware: los estados (warn/danger/ok) y el texto sobre acento
   (--on-accent) resuelven a los tokens del tema activo (salvia o classic).
═══════════════════════════════════════════════════════════════════════════ */

.proj {
  /* local aliases → Salvia tokens (keeps markup faithful to the mockup) */
  --line:    var(--sv-line);
  --line-2:  var(--sv-line-2);
  --glass:   var(--sv-glass);
  --glass-2: var(--sv-glass-2);
  --bg-1:    var(--sv-bg-1);
  --bg-2:    var(--sv-bg-2);
  --text:    var(--sv-text);
  --muted:   var(--sv-muted);
  --faint:   var(--sv-faint);
  --green:   var(--sv-green);
  --green-d: var(--sv-green-d);
  --grad:    var(--sv-grad);
  --mono:    var(--sv-mono);
  --display: var(--sv-display);
  --body:    var(--sv-body);
  --warn:    var(--sv-act-clas, #8A7B53);
  --danger:  var(--sv-act-edit, #A05E45);
  --ok:      var(--sv-act-ver, #4F6B5C);
  /* texto sobre superficies de acento (classic lo cambia a #fff) */
  --on-accent: #F4EEE1;
  --ease:    var(--sv-ease);

  font-family: var(--body);
  color: var(--text);
  width: 100%;
  max-width: none;
}

.proj *,
.proj *::before,
.proj *::after { box-sizing: border-box; }

.proj svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* utilidad accesible: texto solo para lectores de pantalla */
.proj .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── breadcrumb ─────────────────────────────────────────────────────────── */
.proj .proj-top { margin-bottom: 18px; }
.proj .crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  color: var(--muted); text-decoration: none; transition: color .2s var(--ease);
}
.proj .crumb svg { width: 15px; height: 15px; }
.proj .crumb:hover { color: var(--green-d); }

/* ── HERO ───────────────────────────────────────────────────────────────── */
.proj .proj-hero {
  position: relative; border-radius: 22px; overflow: hidden;
  min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid var(--line); box-shadow: var(--pg-shadow-md);
}
.proj .proj-hero .ph.cover {
  position: absolute; inset: 0;
  background: var(--grad); background-size: cover; background-position: center;
}
.proj .proj-hero .ph.cover[style*="url"] { filter: saturate(1.02); }
.proj .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,28,22,.05) 0%, rgba(20,28,22,.30) 45%, rgba(20,28,22,.82) 100%);
}
.proj .hgrid {
  position: absolute; inset: 0; opacity: .25; mix-blend-mode: overlay;
  background-image: linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px);
  background-size: 44px 44px;
}
.proj .h-actions {
  position: absolute; top: 18px; right: 18px; z-index: 3;
  display: flex; gap: 10px;
}
.proj .hbtn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--body); font-size: 13px; font-weight: 600;
  padding: 9px 14px; border-radius: 11px; text-decoration: none;
  background: var(--glass-2); color: var(--text);
  border: 1px solid rgba(255,255,255,.5);
  backdrop-filter: blur(8px); transition: transform .2s var(--ease), background .2s;
}
.proj .hbtn svg { width: 15px; height: 15px; }
.proj .hbtn:hover { transform: translateY(-1px); }
.proj .hbtn.primary { background: var(--green-d); color: var(--on-accent); border-color: transparent; }

.proj .h-in { position: relative; z-index: 2; padding: 26px clamp(20px, 4vw, 38px) 30px; }
.proj .h-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.proj .hchip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  padding: 5px 11px; border-radius: 999px;
  background: var(--glass-2); color: var(--text);
  border: 1px solid rgba(255,255,255,.45); backdrop-filter: blur(6px);
}
.proj .hchip .pdot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.proj .hchip.warn {
  background: color-mix(in srgb, var(--warn) 26%, transparent);
  color: #fff;
  border-color: color-mix(in srgb, var(--warn) 50%, transparent);
}
.proj .hchip.warn .pdot { background: var(--warn); }
.proj .hchip.ok {
  background: color-mix(in srgb, var(--ok) 28%, transparent);
  color: #fff;
  border-color: color-mix(in srgb, var(--ok) 50%, transparent);
}
.proj .hchip.ok .pdot { background: color-mix(in srgb, var(--ok) 60%, #fff); }
.proj .h-in h1 {
  font-family: var(--display); font-weight: 700; color: #F8F3EA;
  font-size: clamp(28px, 4.4vw, 44px); line-height: 1.04; margin: 0 0 14px;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.proj .h-meta { display: flex; flex-wrap: wrap; gap: 18px; }
.proj .h-meta .m {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(248,243,234,.86);
}
.proj .h-meta .m b { color: #fff; font-weight: 700; }
.proj .h-meta .m svg { width: 16px; height: 16px; opacity: .85; }

/* ── WORKFLOW TRACKER (ol > li > a.fstep) ───────────────────────────────── */
.proj .flow {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  margin: 22px 0; padding: 0; list-style: none;
}
.proj .flow > li { display: flex; min-width: 0; }
.proj .fstep {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px; border-radius: 14px;
  background: var(--bg-1); border: 1px solid var(--line);
}
.proj a.fstep {
  text-decoration: none; color: inherit; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.proj a.fstep:hover {
  background: color-mix(in srgb, var(--green) 8%, var(--bg-1));
  border-color: var(--line-2);
}
.proj .fdot {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  background: var(--bg-2); color: var(--faint); border: 1px solid var(--line-2);
}
.proj .fdot svg { width: 15px; height: 15px; }
.proj .fstep.done .fdot { background: var(--green); color: var(--on-accent); border-color: transparent; }
.proj .fstep.active { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.proj .fstep.active .fdot { background: var(--green-d); color: var(--on-accent); border-color: transparent; }
.proj .fl { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.proj .fl .k { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.proj .fl .v { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── KPI STRIP ──────────────────────────────────────────────────────────── */
.proj .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 22px; }
.proj .kpi {
  position: relative; padding: 18px; border-radius: 16px; min-width: 0;
  background: var(--bg-1); border: 1px solid var(--line); box-shadow: var(--pg-shadow-sm);
}
.proj a.kpi {
  display: block; color: inherit; text-decoration: none;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.proj a.kpi:hover { border-color: var(--line-2); transform: translateY(-1px); }
.proj .kpi .ki {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--sv-grad-soft); color: var(--green-d); margin-bottom: 12px;
}
.proj .kpi .ki svg { width: 19px; height: 19px; }
.proj .kpi .kv { font-family: var(--display); font-size: 28px; font-weight: 700; line-height: 1; }
.proj .kpi .kl { font-size: 12px; color: var(--muted); margin-top: 4px; }
.proj .kpi .ktrend {
  position: absolute; top: 16px; right: 16px;
  font-family: var(--mono); font-size: 10.5px; color: var(--faint);
}
/* atenuación selectiva: el label conserva contraste AA */
.proj .kpi.muted .ki { opacity: .55; }
.proj .kpi.muted .kv { color: var(--muted); }
.proj .kpi.accent { background: var(--grad); border-color: transparent; }
.proj .kpi.accent .ki { background: rgba(255,255,255,.18); color: var(--on-accent); }
.proj .kpi.accent .kv,
.proj .kpi.accent .kl { color: var(--on-accent); }
.proj .kpi.accent .ktrend { color: color-mix(in srgb, var(--on-accent) 80%, transparent); }

/* ── PRIMEROS PASOS (proyecto recién creado) ────────────────────────────── */
.proj .setup { margin-bottom: 22px; }
.proj .setup-title {
  font-family: var(--display); font-size: 15px; font-weight: 600;
  color: var(--muted); margin: 0 0 12px;
}
.proj .setup-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.proj .setup-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 18px; border-radius: 16px;
  background: var(--bg-1); border: 1px solid var(--line); box-shadow: var(--pg-shadow-sm);
}
.proj .setup-card .si {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--sv-grad-soft); color: var(--green-d);
}
.proj .setup-card .si svg { width: 19px; height: 19px; }
.proj .setup-card h3 { font-family: var(--display); font-size: 15px; font-weight: 600; margin: 0; }
.proj .setup-card p { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 0; flex: 1; }
.proj .setup-card .btn-wide { font-size: 13px; padding: 11px; }
.proj .setup-card .status-row { margin-bottom: 0; width: 100%; }

/* ── TWO-COLUMN GRID ────────────────────────────────────────────────────── */
.proj .proj-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 26vw, 420px); gap: 20px; align-items: start; }
.proj .col-main, .proj .col-rail { display: flex; flex-direction: column; gap: 20px; padding: 0; }

/* ── PANEL ──────────────────────────────────────────────────────────────── */
.proj .panel {
  border-radius: 18px; background: var(--bg-1); border: 1px solid var(--line);
  overflow: hidden; box-shadow: var(--pg-shadow-sm);
}
.proj .panel-h {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
}
.proj .panel-h .pt { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.proj .panel-h .pi {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--sv-grad-soft); color: var(--green-d); flex-shrink: 0;
}
.proj .panel-h .pi svg { width: 19px; height: 19px; }
.proj .panel-h h2 { font-family: var(--display); font-size: 16px; font-weight: 600; margin: 0; }
.proj .panel-h .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.proj .link-act {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--green-d); text-decoration: none; white-space: nowrap;
}
.proj .link-act svg { width: 14px; height: 14px; }
.proj .link-act:hover { color: var(--green); }
.proj .panel-body { padding: 20px; }

/* gallery meta */
.proj .gal-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.proj .gal-meta .big { font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1; }
.proj .gal-meta .big small { font-family: var(--body); font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 7px; }
.proj .gal-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.proj .tool {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--body); font-size: 12.5px; font-weight: 600;
  padding: 8px 12px; border-radius: 10px; text-decoration: none;
  background: var(--bg-2); color: var(--text); border: 1px solid var(--line);
  transition: background .15s, border-color .15s;
}
.proj .tool svg { width: 15px; height: 15px; }
.proj .tool:hover { border-color: var(--line-2); background: var(--glass-2); }
.proj .tool.solid { background: var(--green-d); color: var(--on-accent); border-color: transparent; }

/* category breakdown */
.proj .cats { display: flex; flex-direction: column; gap: 11px; margin-bottom: 18px; }
.proj .cat .cr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.proj .cat .cn { font-size: 13px; font-weight: 600; color: var(--text); }
.proj .cat .cc { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.proj .cat .track { height: 7px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.proj .cat .track i { display: block; height: 100%; border-radius: 999px; background: var(--grad); }

/* thumbnail preview */
.proj .thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 18px; }
.proj .thumbs .ph {
  position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  background: var(--bg-2) center/cover no-repeat; border: 1px solid var(--line);
}
.proj .thumbs .ph.fav::after {
  content: "★"; position: absolute; top: 4px; right: 5px; font-size: 11px; color: #F4D58D;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.proj .thumbs .more {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px;
  background: var(--green-d); color: var(--on-accent); font-family: var(--display); font-weight: 700; font-size: 15px;
  text-decoration: none; line-height: 1.1; text-align: center;
}
.proj .thumbs .more small { display: block; font-family: var(--body); font-size: 9.5px; font-weight: 500; opacity: .8; margin-top: 2px; }

/* wide button */
.proj .btn-wide {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer;
  font-family: var(--body); font-size: 14px; font-weight: 600;
  padding: 13px; border-radius: 12px; text-decoration: none;
  background: var(--grad); color: var(--on-accent); border: none; transition: transform .2s var(--ease);
}
.proj .btn-wide svg { width: 17px; height: 17px; }
.proj .btn-wide:hover { transform: translateY(-1px); }

/* cola de acciones del panel */
.proj .panel-actions { display: flex; flex-direction: column; gap: 12px; }

/* empty gallery */
.proj .gal-empty { text-align: center; padding: 30px 10px; }
.proj .gal-empty svg { width: 46px; height: 46px; color: var(--faint); stroke-width: 1.5; }
.proj .gal-empty p { color: var(--muted); font-size: 14px; margin: 12px 0 16px; }

/* ── PICTOFACE MODULE (tarjeta de marca oscura, autocontenida) ──────────── */
.proj .panel.pf { position: relative; background: #2B392F; border-color: transparent; color: #EAF0EA; }
.proj .pf-bg { position: absolute; inset: 0; background: radial-gradient(120% 120% at 80% 0%, rgba(126,151,138,.4), transparent 55%); }
.proj .pf-grid {
  position: absolute; inset: 0; opacity: .12;
  background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 38px 38px;
}
.proj .pf-in { position: relative; z-index: 1; display: flex; gap: 22px; padding: 24px; align-items: center; }
.proj .pf-qr {
  flex-shrink: 0; width: 122px; height: 122px; padding: 10px; border-radius: 14px; background: #F4EEE1;
  display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); gap: 2px;
}
.proj .pf-qr i { border-radius: 2px; background: #2B392F; }
.proj .pf-qr i.o { background: transparent; }
.proj .pf-right { min-width: 0; }
.proj .pf-tag {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; background: rgba(126,151,138,.22); color: #CFE0D2; margin-bottom: 10px;
}
.proj .pf-tag .live { width: 7px; height: 7px; border-radius: 50%; background: #8FE3A6; box-shadow: 0 0 0 0 rgba(143,227,166,.6); animation: pf-pulse 1.8s infinite; }
@keyframes pf-pulse { 70% { box-shadow: 0 0 0 7px rgba(143,227,166,0); } 100% { box-shadow: 0 0 0 0 rgba(143,227,166,0); } }
.proj .pf-right :is(h2, h3) { font-family: var(--display); font-size: 18px; font-weight: 600; margin: 0 0 6px; color: #F4EEE1; }
.proj .pf-right p { font-size: 13px; line-height: 1.5; color: rgba(234,240,234,.72); margin: 0 0 14px; }
.proj .pf-stats { display: flex; gap: 26px; }
.proj .pf-stat .v { font-family: var(--display); font-size: 22px; font-weight: 700; color: #F4EEE1; }
.proj .pf-stat .v small { font-size: 13px; opacity: .7; }
.proj .pf-stat .k { font-size: 11px; color: rgba(234,240,234,.6); margin-top: 2px; }
.proj .pf-foot {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 9px;
  padding: 16px 24px; border-top: 1px solid rgba(255,255,255,.1);
}
.proj .panel.pf .tool { background: rgba(255,255,255,.08); color: #EAF0EA; border-color: rgba(255,255,255,.14); }
.proj .panel.pf .tool:hover { background: rgba(255,255,255,.16); }
.proj .panel.pf .tool.solid { background: #7E978A; color: #21302A; border-color: transparent; }
/* estado apagado: el módulo se presenta, no domina */
.proj .pf.is-off .pf-qr { opacity: .35; }
.proj .pf.is-off .pf-in { padding: 18px 24px; }
.proj .pf.is-off .pf-tag .live { animation: none; box-shadow: none; background: rgba(234,240,234,.45); }
.proj .pf-note { font-size: 12px; color: rgba(234,240,234,.55); margin: -8px 0 0; }
/* señal de calidad accionable (invitados sin match / fotos sin indexar) */
.proj .pf-alert {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 12.5px; color: rgba(244,238,225,.85); text-decoration: none;
}
.proj .pf-alert .dot { width: 7px; height: 7px; border-radius: 50%; background: #F4D58D; flex-shrink: 0; }
.proj .pf-alert:hover { color: #fff; }

/* ── RIGHT RAIL CARDS ───────────────────────────────────────────────────── */
.proj .rail-card {
  border-radius: 16px; background: var(--bg-1); border: 1px solid var(--line);
  padding: 18px; box-shadow: var(--pg-shadow-sm);
}
.proj .rail-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.proj .rail-h .ri {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--sv-grad-soft); color: var(--green-d); flex-shrink: 0;
}
.proj .rail-h .ri svg { width: 16px; height: 16px; }
.proj .rail-h :is(h2, h3) { font-family: var(--display); font-size: 15px; font-weight: 600; margin: 0; flex: 1; }
.proj .rail-h .link-act { font-size: 12px; }
.proj .badge-n {
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--on-accent);
  background: var(--green); border-radius: 999px; padding: 2px 8px;
}

/* key/value list */
.proj .kv-list { display: flex; flex-direction: column; gap: 11px; }
.proj .kv-list .kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.proj .kv-list .kv .k { font-size: 12.5px; color: var(--muted); }
.proj .kv-list .kv .v { font-size: 13px; font-weight: 600; text-align: right; }
.proj .kv-divider { height: 1px; background: var(--line); margin: 14px 0; }
.proj .rail-card > .kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.proj .rail-card > .kv .k { font-size: 12.5px; color: var(--muted); }
.proj .kv .v.price { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--green-d); }

/* status row (tokens de estado: en classic resuelve a ámbar/verde/rojo) */
.proj .status-row {
  display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600;
  padding: 11px 13px; border-radius: 11px; margin-bottom: 13px;
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  color: color-mix(in srgb, var(--warn) 80%, var(--sv-text));
}
.proj .status-row svg { width: 16px; height: 16px; flex-shrink: 0; }
.proj .status-row.ok {
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: color-mix(in srgb, var(--ok) 80%, var(--sv-text));
}
/* status row accionable (link) */
.proj a.status-row { text-decoration: none; cursor: pointer; transition: filter .15s; }
.proj a.status-row:hover { filter: brightness(.97); }
.proj .status-row.act { margin-bottom: 18px; }

/* party */
.proj .party { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.proj .party .pav {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; background: var(--green); color: var(--on-accent); flex-shrink: 0;
}
.proj .party .pn { font-size: 13.5px; font-weight: 600; }
.proj .party .pr { font-size: 11.5px; color: var(--faint); }

/* soft / danger buttons */
.proj .btn-soft, .proj .btn-danger {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font-family: var(--body); font-size: 13px; font-weight: 600;
  padding: 11px; border-radius: 11px; text-decoration: none;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--text); transition: background .15s, border-color .15s;
}
.proj .btn-soft svg, .proj .btn-danger svg { width: 15px; height: 15px; }
.proj .btn-soft:hover { border-color: var(--line-2); background: var(--glass-2); }
.proj .btn-soft.warn {
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  color: color-mix(in srgb, var(--warn) 80%, var(--sv-text));
  border-color: color-mix(in srgb, var(--warn) 30%, transparent);
}
.proj .btn-danger {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: color-mix(in srgb, var(--danger) 85%, var(--sv-text));
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}
.proj .btn-danger:hover { background: var(--danger); color: var(--on-accent); border-color: transparent; }

/* pila de acciones al pie de una rail-card */
.proj .rail-stack { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.proj .rail-stack .form-hint { margin: -4px 0 0; font-size: 11.5px; color: var(--faint); }
.proj .rail-form { display: block; width: 100%; margin: 0; }

/* empty note */
.proj .empty-note { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.proj .empty-note .ed { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.proj .note-link { color: var(--green-d); font-weight: 600; text-decoration: underline; }
.proj .note-link:hover { color: var(--green); }

/* gallery item */
.proj .gal-item { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.proj .gal-item + .gal-item { margin-top: 8px; }
.proj .gal-item .ph.gth { width: 46px; height: 46px; border-radius: 9px; background: var(--green-d) center/cover no-repeat; flex-shrink: 0; }
.proj .gal-item .gn { font-size: 13.5px; font-weight: 600; }
.proj .gal-item .gm { display: flex; flex-wrap: wrap; gap: 4px; font-size: 11px; color: var(--faint); margin-top: 2px; }
.proj .gal-item .gm span { white-space: nowrap; }
.proj .gal-item > div { flex: 1; min-width: 0; }
.proj .glink {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--bg-1); border: 1px solid var(--line); color: var(--green-d); flex-shrink: 0; text-decoration: none;
}
.proj .glink svg { width: 15px; height: 15px; }
.proj .glink:hover { background: var(--green); color: var(--on-accent); border-color: transparent; }

/* danger zone card (colapsada con <details>) */
.proj .rail-card.danger { border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.proj .rail-card.danger .ri { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.proj .rail-card.danger p { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 0 0 14px; }
.proj .rail-card.danger summary { list-style: none; cursor: pointer; }
.proj .rail-card.danger summary::-webkit-details-marker { display: none; }
.proj .rail-card.danger summary .rail-h { margin-bottom: 0; }
.proj .rail-card.danger details[open] summary .rail-h { margin-bottom: 14px; }
.proj .rail-card.danger .caret {
  margin-left: auto; display: grid; place-items: center; color: var(--danger);
  transition: transform .2s var(--ease);
}
.proj .rail-card.danger .caret svg { width: 16px; height: 16px; }
.proj .rail-card.danger details[open] .caret { transform: rotate(180deg); }

/* footer */
.proj .proj-foot {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: .04em;
}

/* ── FOCUS VISIBLE (teclado) ────────────────────────────────────────────── */
.proj :is(.hbtn, .tool, .btn-soft, .btn-danger, .btn-wide, .link-act, .crumb,
          .glink, .thumbs .more, a.fstep, a.kpi, .note-link, .pf-alert,
          a.status-row):focus-visible {
  outline: 2px solid var(--green-d); outline-offset: 2px;
}
.proj .proj-hero :focus-visible,
.proj .panel.pf :focus-visible { outline-color: #fff; outline-offset: 3px; }
.proj .btn-danger:focus-visible { outline-color: var(--danger); }
.proj summary:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; border-radius: 8px; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (min-width: 1600px) {
  .proj .thumbs { grid-template-columns: repeat(8, 1fr); }
}
@media (max-width: 1080px) {
  .proj .proj-grid { grid-template-columns: 1fr; }
  .proj .flow { grid-template-columns: repeat(3, 1fr); }
  .proj .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .proj .flow { grid-template-columns: repeat(2, 1fr); }
  .proj .thumbs { grid-template-columns: repeat(4, 1fr); }
  .proj .pf-in { flex-direction: column; align-items: flex-start; }
  .proj .h-actions { position: static; margin: 0 18px 18px; justify-content: flex-end; flex-wrap: wrap; }
  .proj .setup-cards { grid-template-columns: 1fr; }
  /* objetivos táctiles ≥44px para el fotógrafo en terreno */
  .proj .tool, .proj .btn-soft, .proj .btn-danger, .proj .hbtn { min-height: 44px; }
  .proj .glink { width: 40px; height: 40px; }
  .proj .link-act { padding: 8px 4px; margin: -8px -4px; }
  /* montos CLP largos en tarjetas angostas: menor cuerpo y ktrend en flujo
     (absolute chocaría con el icono en pantallas de 360px) */
  .proj .kpi .kv { font-size: 22px; }
  .proj .kpi .ktrend { position: static; display: block; margin-top: 6px; }
}
/* ============================================================
   PICTORIAL — "Salvia" theme
   Editorial, neutro que enmarca la foto.
   Papel cálido + eucalipto apagado · latón en estrellas.

   Capa de tema cargada DESPUÉS de application.css.
   - Define el shell completo (pictorial-*) que antes no tenía CSS.
   - Re-mapea los tokens --pg-* al palette Salvia para reskin global.
   - Re-estiliza componentes comunes (botones, cards, forms, tablas…).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap");

/* ─────────────────────────────────────────────────────────
   1 · TOKENS
   ───────────────────────────────────────────────────────── */
:root {
  /* Salvia palette */
  --sv-bg:       #ECE6D9;
  --sv-bg-1:     #F8F3EA;
  --sv-bg-2:     #ECE5D8;
  --sv-side:     #EDE7DB;
  --sv-side-2:   #E6DFD0;
  --sv-card:     #F8F3EA;

  --sv-line:     rgba(74,52,38,.13);
  --sv-line-2:   rgba(74,52,38,.22);
  --sv-glass:    rgba(255,251,244,.55);
  --sv-glass-2:  rgba(255,251,244,.72);

  --sv-text:     #2E2017;
  --sv-muted:    rgba(46,32,23,.62);
  --sv-faint:    rgba(46,32,23,.40);

  --sv-green:    #557061;
  --sv-green-2:  #7E978A;
  --sv-green-d:  #43594D;
  --sv-coral:    #557061;          /* alias usado en componentes */

  --sv-act-ver:  #4F6B5C;          /* ver / éxito  */
  --sv-act-clas: #8A7B53;          /* clasificar / aviso */
  --sv-act-edit: #A05E45;          /* editar / peligro suave */

  --sv-grad:      linear-gradient(105deg, #44604F, #56715F);
  --sv-grad-soft: linear-gradient(105deg, rgba(85,112,97,.16), rgba(126,151,138,.16));
  --sv-glow:      0 0 0 1px rgba(85,112,97,.4), 0 18px 50px -12px rgba(85,112,97,.55);

  --sv-display: "Space Grotesk", system-ui, sans-serif;
  --sv-body:    "Manrope", system-ui, sans-serif;
  --sv-mono:    "Space Mono", ui-monospace, monospace;

  --sv-ease:    cubic-bezier(.2,.7,.2,1);
  --sv-side-w:  264px;
  --sv-bar-h:   66px;

  /* ── Re-map de tokens existentes (--pg-*) al palette Salvia.
        Reskinea automáticamente todo componente que los use. ── */
  --pg-white:       #F8F3EA;
  --pg-black:       #2E2017;
  --pg-gray-50:     #F8F3EA;
  --pg-gray-100:    #ECE6D9;
  --pg-gray-200:    #E6DFD0;
  --pg-gray-300:    rgba(74,52,38,.22);
  --pg-gray-400:    rgba(46,32,23,.40);
  --pg-gray-500:    rgba(46,32,23,.62);
  --pg-gray-600:    rgba(46,32,23,.72);
  --pg-gray-700:    #43594D;
  --pg-gray-800:    #2E2017;
  --pg-gray-900:    #2E2017;

  --pg-primary:       #44604F;
  --pg-primary-hover: #557061;
  --pg-accent:        #A05E45;
  --pg-accent-light:  rgba(160,94,69,.18);

  --pg-border:  rgba(74,52,38,.13);
  --pg-muted:   rgba(46,32,23,.62);

  --pg-radius:     14px;
  --pg-radius-sm:  10px;
  --pg-radius-full:999px;

  --pg-shadow-sm: 0 1px 2px rgba(74,52,38,.06);
  --pg-shadow:    0 8px 24px -16px rgba(74,52,38,.35);
  --pg-shadow-md: 0 18px 40px -22px rgba(74,52,38,.4);
  --pg-shadow-lg: 0 40px 80px -30px rgba(74,52,38,.45);
}

/* ─────────────────────────────────────────────────────────
   2 · BASE
   ───────────────────────────────────────────────────────── */
body.pictorial-app,
body.salvia {
  font-family: var(--sv-body);
  background: var(--sv-bg);
  color: var(--sv-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.pictorial-app h1, .pictorial-app h2, .pictorial-app h3,
.pictorial-app h4, .pictorial-app .page-title,
.pictorial-app .admin-page__title {
  font-family: var(--sv-display);
  letter-spacing: -.02em;
  color: var(--sv-text);
}

.pictorial-app ::selection { background: var(--sv-green); color: #fff; }
.pictorial-app a { color: inherit; }
.pictorial-app .text-muted { color: var(--sv-muted) !important; }
.pictorial-app .mono { font-family: var(--sv-mono); }

/* ─────────────────────────────────────────────────────────
   3 · SHELL  (grid: sidebar fija + main desplazado)
   ───────────────────────────────────────────────────────── */
.pictorial-app {
  min-height: 100vh;
}

.pictorial-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sv-side-w);
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--sv-side);
  border-right: 1px solid var(--sv-line);
  overflow-y: auto;
  transition: transform .4s var(--sv-ease);
}

.pictorial-sidebar__header {
  height: var(--sv-bar-h);
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: var(--sv-side-2);
  border-bottom: 1px solid var(--sv-line);
  flex: none;
}
.pictorial-sidebar__logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--sv-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--sv-text);
  min-width: 0;
}
.pictorial-sidebar__logo::before {
  content: "";
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--sv-grad);
  box-shadow: 0 0 18px -2px rgba(85,112,97,.7);
  flex: none;
  position: relative;
}
/* hueco interior del cuadrado del logo (como en la referencia) */
.pictorial-sidebar__logo::after {
  content: "";
  position: absolute;
  left: 20px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--sv-side-2);
  pointer-events: none;
}
.pictorial-sidebar__logo:has(.pictorial-sidebar__logo-img)::after { display: none; }
.pictorial-sidebar__logo-img {
  width: 30px; height: 30px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
}
/* si hay logo de la cuenta, ocultamos el cuadrado por defecto */
.pictorial-sidebar__logo:has(.pictorial-sidebar__logo-img)::before { display: none; }
.pictorial-sidebar__logo-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}
/* subtítulo "PICTORIAL" bajo el nombre de la cuenta (como la referencia) */
.pictorial-sidebar__logo-text::after {
  content: "PICTORIAL";
  display: block;
  font-family: var(--sv-mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sv-faint);
  margin-top: 1px;
}

/* ── Override de seguridad: el texto del logo SIEMPRE legible (oscuro).
      Gana a cualquier tema legacy que lo fuerce a blanco (--pt-white, etc.). ── */
.pictorial-app .pictorial-sidebar .pictorial-sidebar__logo,
.pictorial-app .pictorial-sidebar .pictorial-sidebar__logo-text {
  color: var(--sv-text) !important;
}
.pictorial-app .pictorial-sidebar .pictorial-sidebar__logo-text {
  font-weight: 700 !important;
}
.pictorial-app .pictorial-sidebar .pictorial-sidebar__logo-text::after {
  color: var(--sv-faint) !important;
  font-weight: 400 !important;
}

.pictorial-sidebar__nav {
  flex: 1;
  padding: 16px 14px;
  overflow-y: auto;
}
.pictorial-nav {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pictorial-nav__item { margin: 0; }

.pictorial-nav__link {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 12px;
  border-radius: 11px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--sv-muted);
  text-decoration: none;
  position: relative;
  transition: .25s var(--sv-ease);
}
/* Match reference: muted nav text, weight 500; high specificity to win any cascade */
.pictorial-app .pictorial-sidebar .pictorial-nav__link,
.pictorial-app .pictorial-sidebar .pictorial-nav__link .pictorial-nav__text {
  color: var(--sv-muted) !important;
  font-weight: 500;
}
.pictorial-app .pictorial-sidebar .pictorial-nav__link:hover,
.pictorial-app .pictorial-sidebar .pictorial-nav__link:hover .pictorial-nav__text {
  color: var(--sv-text) !important;
}
.pictorial-app .pictorial-sidebar .pictorial-nav__link.is-active,
.pictorial-app .pictorial-sidebar .pictorial-nav__link.is-active .pictorial-nav__text {
  color: var(--sv-green-d) !important;
  font-weight: 600;
}
.pictorial-nav__link:hover {
  background: rgba(74,52,38,.06);
  color: var(--sv-text);
}
.pictorial-nav__icon {
  display: grid;
  place-items: center;
  flex: none;
  color: currentColor;
}
.pictorial-nav__icon svg { width: 19px; height: 19px; }
.pictorial-nav__text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pictorial-nav__link.is-active {
  background: var(--sv-grad-soft);
  color: var(--sv-green-d);
  border: 1px solid rgba(85,112,97,.22);
}
.pictorial-nav__link.is-active .pictorial-nav__icon { color: var(--sv-green); }
.pictorial-nav__link.is-active::before {
  content: "";
  position: absolute;
  left: -14px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--sv-grad);
}

.pictorial-nav__link--sub { font-size: 14px; }
.pictorial-nav__link--project { padding-left: 14px; }
.pictorial-nav__link--more { opacity: .75; }
.pictorial-nav__link--more:hover { opacity: 1; }

.pictorial-nav__section-title {
  font-family: var(--sv-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sv-faint);
  padding: 0 12px;
  margin: 22px 0 9px;
  list-style: none;
}
.pictorial-nav__divider {
  height: 1px;
  background: var(--sv-line);
  margin: 12px 6px;
  list-style: none;
}

/* badges / counts en nav */
.pictorial-nav__badge,
.pictorial-nav__count {
  font-family: var(--sv-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
  min-width: 24px;
  text-align: center;
  background: rgba(74,52,38,.07);
  color: var(--sv-muted);
  margin-left: auto;
}
.pictorial-nav__link.is-active .pictorial-nav__badge { background: var(--sv-grad); color: #fff; }
.pictorial-nav__badge--amber  { background: rgba(160,94,69,.14);  color: var(--sv-act-edit); }
.pictorial-nav__badge--purple { background: rgba(126,151,138,.18); color: var(--sv-act-ver); }
.pictorial-nav__badge--green,
.pictorial-nav__count          { background: rgba(85,112,97,.16);  color: var(--sv-act-ver); }

.pictorial-nav__link--superadmin {
  background: rgba(160,94,69,.10);
  border: 1px solid rgba(160,94,69,.28);
  margin: 6px 0;
}
.pictorial-nav__link--superadmin:hover { background: rgba(160,94,69,.16); }
.pictorial-nav__link--superadmin .pictorial-nav__icon { color: var(--sv-act-edit); }

.pictorial-nav__empty { padding: 12px; list-style: none; }

/* sidebar footer / plan info / photographer card */
.pictorial-sidebar__footer {
  flex: none;
  padding: 14px;
  border-top: 1px solid var(--sv-line);
}
.pictorial-sidebar__version {
  font-family: var(--sv-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sv-faint);
}

.sidebar-plan-info {
  border: 1px solid rgba(85,112,97,.25);
  border-radius: 16px;
  background: linear-gradient(170deg, rgba(85,112,97,.12), rgba(126,151,138,.06));
  padding: 16px;
}
.sidebar-plan-info--pro { }
.sidebar-plan-pro-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sv-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--sv-green-d);
}
.sidebar-plan-pro-badge svg { color: var(--sv-act-clas); }
.sidebar-plan-renews { display: block; font-size: 12.5px; color: var(--sv-muted); margin-top: 8px; }
.sidebar-plan-name {
  display: block;
  font-family: var(--sv-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sv-green-d);
  margin-bottom: 8px;
}
.sidebar-plan-usage { display: flex; flex-direction: column; gap: 6px; }
.sidebar-plan-usage span { font-size: 12px; color: var(--sv-muted); }
.sidebar-plan-bar { height: 5px; border-radius: 100px; background: rgba(74,52,38,.1); overflow: hidden; }
.sidebar-plan-bar__fill { height: 100%; background: var(--sv-grad); border-radius: 100px; }
.sidebar-upgrade-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sv-green);
  text-decoration: none;
}
.sidebar-upgrade-link:hover { color: var(--sv-green-d); }

.sidebar-photographer-info { }
.photographer-card { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.photographer-avatar-wrap {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--sv-grad);
  display: grid; place-items: center; flex: none;
  box-shadow: 0 6px 18px -6px rgba(85,112,97,.7);
}
.photographer-avatar-initials { font-family: var(--sv-display); font-weight: 700; font-size: 14px; color: #fff; }
.photographer-details { display: flex; flex-direction: column; min-width: 0; }
.photographer-label {
  font-family: var(--sv-mono);
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sv-faint); font-weight: 700;
}
.photographer-details strong {
  font-size: 13px; color: var(--sv-text); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-signout-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px;
  border-radius: 10px;
  color: var(--sv-muted); text-decoration: none;
  font-size: 13px; font-weight: 600;
  transition: .2s var(--sv-ease);
}
.sidebar-signout-btn:hover { color: var(--sv-text); background: rgba(74,52,38,.06); }

.empty-projects { text-align: center; padding: 18px 12px; color: var(--sv-muted); }
.empty-projects svg { margin-bottom: 10px; opacity: .5; }
.empty-projects p { font-size: 13.5px; margin: 0 0 4px; color: var(--sv-muted); }
.empty-projects span { font-size: 12px; line-height: 1.4; display: block; color: var(--sv-faint); }

/* ─────────── MAIN + HEADER (topbar) ─────────── */
.pictorial-main {
  margin-left: var(--sv-side-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sv-bg);
}

.pictorial-header {
  position: sticky;
  top: 0;
  /* Por encima de las barras sticky / flotante de páginas internas (ej. classify usa 190-300),
     pero por debajo de overlays, drawers y modales full-screen (400+) que sí deben tapar el header. */
  z-index: 350;
  height: var(--sv-bar-h);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 28px;
  background: rgba(236,230,217,.82);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--sv-line);
}
.pictorial-header__left { display: flex; align-items: center; }
.pictorial-header__center { flex: 1; display: flex; justify-content: center; min-width: 0; }
.pictorial-header__right { display: flex; align-items: center; gap: 14px; }

.pictorial-header__menu-btn {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--sv-line);
  background: var(--sv-glass);
  border-radius: 11px;
  color: var(--sv-text);
  cursor: pointer;
  place-items: center;
}

.pictorial-search {
  flex: 1;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 42px;
  padding: 0 18px;
  background: rgba(255,255,255,0.52);
  border: 1px solid rgba(74,52,38,.20);
  border-radius: 100px;
  color: var(--sv-faint);
}
.pictorial-search svg { stroke: var(--sv-faint); flex: none; }
.pictorial-app .pictorial-search .pictorial-search__input {
  flex: 1;
  width: auto;
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--sv-body);
  font-size: 14px;
  color: var(--sv-text);
  outline: none;
}
.pictorial-app .pictorial-search .pictorial-search__input::placeholder { color: var(--sv-faint); }

.pictorial-header__icon-btn {
  width: 42px; height: 42px;
  border-radius: 11px;
  border: 1px solid var(--sv-line);
  background: var(--sv-glass);
  display: grid; place-items: center;
  color: var(--sv-text);
  cursor: pointer;
  position: relative;
  transition: .3s var(--sv-ease);
}
.pictorial-header__icon-btn:hover { border-color: var(--sv-line-2); transform: translateY(-1px); }

.pictorial-header__user-btn {
  border: 0; background: none; cursor: pointer; padding: 0;
  display: grid; place-items: center;
}
.pictorial-header__avatar {
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
  background: var(--sv-grad) !important;
  color: #fff !important;
  font-family: var(--sv-display);
  font-weight: 700 !important;
  font-size: 16px !important;
  display: grid !important;
  place-items: center;
  box-shadow: 0 6px 18px -6px rgba(85,112,97,.7);
}

.header-welcome { font-size: 14px; color: var(--sv-muted); margin-left: 12px; }
.header-welcome strong { color: var(--sv-text); }

/* dropdowns */
.pictorial-dropdown { position: relative; }
.pictorial-dropdown__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 250px;
  background: var(--sv-bg-1);
  border: 1px solid var(--sv-line-2);
  border-radius: 16px;
  box-shadow: var(--pg-shadow-md);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: .22s var(--sv-ease);
}
.pictorial-dropdown__menu.is-open { opacity: 1; visibility: visible; transform: none; }
.pictorial-dropdown__menu--right { right: 0; }
.pictorial-dropdown__header { padding: 10px 12px 6px; }
.pictorial-dropdown__header h4 { font-family: var(--sv-display); font-size: 15px; margin: 0; }
.pictorial-dropdown__body { }
.pictorial-dropdown__user-info { padding: 10px 12px; }
.pictorial-dropdown__user-info strong { display: block; font-size: 14px; }
.pictorial-dropdown__user-info span { display: block; font-size: 12.5px; color: var(--sv-muted); }
.pictorial-dropdown__divider { height: 1px; background: var(--sv-line); margin: 6px 4px; }
.pictorial-dropdown__item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--sv-text);
  text-decoration: none;
  transition: background .2s;
}
.pictorial-dropdown__item:hover { background: rgba(74,52,38,.05); }
.pictorial-dropdown__item--danger { color: var(--sv-act-edit); }
.pictorial-dropdown__item--danger:hover { background: rgba(160,94,69,.10); }

.dropdown-role-badge {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--sv-mono);
  font-size: 9.5px;
  padding: 3px 8px;
  border-radius: 100px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dropdown-role-badge--photographer { background: rgba(85,112,97,.16); color: var(--sv-green-d); }
.dropdown-role-badge--team_member  { background: rgba(126,151,138,.20); color: var(--sv-act-ver); }

.empty-notif { padding: 28px 16px; text-align: center; color: var(--sv-muted); }
.pictorial-notif { display: flex; gap: 10px; padding: 10px 12px; }
.pictorial-notif__icon--success { color: var(--sv-act-ver); }

/* superadmin-specific bits */
.superadmin-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sv-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(160,94,69,.14);
  border: 1px solid rgba(160,94,69,.3);
  color: var(--sv-act-edit);
}
.sidebar-stats {
  display: flex;
  gap: 4px;
  padding: 12px 4px;
  border-top: 1px solid var(--sv-line);
}
.sidebar-stat { flex: 1; text-align: center; padding: 8px; border-radius: 10px; transition: background .2s; }
.sidebar-stat:hover { background: rgba(74,52,38,.05); }
.sidebar-stat__value { display: block; font-family: var(--sv-display); font-size: 18px; font-weight: 700; line-height: 1; color: var(--sv-text); }
.sidebar-stat__label {
  display: block;
  font-family: var(--sv-mono);
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sv-faint); font-weight: 700; margin-top: 4px;
}
.mobile-menu-btn {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--sv-line);
  background: var(--sv-glass);
  border-radius: 11px;
  color: var(--sv-text);
  cursor: pointer;
  margin-right: 8px;
  place-items: center;
}
.header-action-btn {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 11px;
  border: 1px solid var(--sv-line);
  background: var(--sv-glass);
  color: var(--sv-text);
  transition: .3s var(--sv-ease);
}
.header-action-btn:hover { border-color: var(--sv-line-2); transform: translateY(-1px); color: var(--sv-text); }
@media (max-width: 1023px) { .mobile-menu-btn { display: grid; } }

/* quick action button in header */
.header-quick-actions { display: flex; gap: 8px; margin-right: 4px; }
.header-new-project-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: var(--sv-grad);
  color: #fff;
  border-radius: 11px;
  font-family: var(--sv-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 30px -12px rgba(85,112,97,.6);
  transition: .3s var(--sv-ease);
}
.header-new-project-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(85,112,97,.8); color: #fff; }

/* ─────────── CONTENT + FOOTER ─────────── */
/* Fluid: ocupa todo el ancho disponible (sin tope de 1280px),
   con padding lateral que escala según el viewport. */
.pictorial-content {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 34px clamp(18px, 3vw, 56px) 60px;
}
.pictorial-footer {
  padding: 20px clamp(22px, 3vw, 40px) 28px;
  border-top: 1px solid var(--sv-line);
  background: var(--sv-bg-2);
}
.pf-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.pf-brand { display: flex; flex-direction: column; gap: 2px; }
.pf-brand__name {
  font-family: var(--sv-display); font-size: .8125rem; font-weight: 700;
  color: var(--sv-text); line-height: 1.2;
}
.pf-brand__sub {
  font-family: var(--sv-mono); font-size: .6875rem; color: var(--sv-faint);
}
.pf-copy {
  font-family: var(--sv-mono); font-size: .6875rem; color: var(--sv-faint);
}
.pf-links { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.pf-link {
  font-family: var(--sv-mono); font-size: .6875rem; color: var(--sv-muted);
  text-decoration: none; padding: .25rem .5rem; border-radius: 6px;
  transition: background .18s, color .18s;
}
.pf-link:hover { background: var(--sv-line); color: var(--sv-text); }
.pf-sep { color: var(--sv-faint); font-size: .625rem; padding: 0 .125rem; }
@media (max-width: 640px) {
  .pf-inner { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .pf-copy  { order: 3; }
}

/* overlay (mobile sidebar) */
.pictorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(46,32,23,.4);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: .3s var(--sv-ease);
}
.pictorial-overlay.is-visible { opacity: 1; visibility: visible; }

/* ─────────── RESPONSIVE SHELL ─────────── */
@media (max-width: 1023px) {
  .pictorial-sidebar { transform: translateX(-100%); }
  .pictorial-sidebar.is-open { transform: none; box-shadow: var(--pg-shadow-lg); }
  .pictorial-main { margin-left: 0; }
  .pictorial-header__menu-btn { display: grid; }
  .pictorial-content { padding: 22px 18px 48px; }
}
@media (max-width: 640px) {
  .pictorial-search { display: none; }
  .pictorial-header__center { display: none; }
  .header-new-project-btn span,
  .header-new-project-text { display: none; }
  .header-new-project-btn { padding: 11px; }
}

/* ─────────────────────────────────────────────────────────
   4 · ALERTS
   ───────────────────────────────────────────────────────── */
.pictorial-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 12px;
  margin-bottom: 22px;
  position: relative;
  font-size: 14.5px;
}
.pictorial-alert--success {
  background: rgba(85,112,97,.12);
  border: 1px solid rgba(85,112,97,.3);
  color: var(--sv-green-d);
}
.pictorial-alert--error {
  background: rgba(160,94,69,.10);
  border: 1px solid rgba(160,94,69,.3);
  color: var(--sv-act-edit);
}
.alert-close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; color: inherit;
  font-size: 20px; cursor: pointer; opacity: .7;
}
.alert-close:hover { opacity: 1; }

/* ─────────────────────────────────────────────────────────
   5 · BUTTONS (admin-btn, btn, .btn-*)
   ───────────────────────────────────────────────────────── */
.pictorial-app .admin-btn,
.pictorial-app .btn {
  font-family: var(--sv-body);
  font-weight: 600;
  font-size: 14.5px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .25s var(--sv-ease), box-shadow .25s var(--sv-ease), background .25s, border-color .25s;
}
.pictorial-app .admin-btn--primary,
.pictorial-app .btn-primary,
.pictorial-app .btn--primary {
  background: var(--sv-grad);
  color: #fff;
  box-shadow: 0 12px 30px -12px rgba(85,112,97,.6);
}
.pictorial-app .admin-btn--primary:hover,
.pictorial-app .btn-primary:hover,
.pictorial-app .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px rgba(85,112,97,.8);
  color: #fff;
}
.pictorial-app .admin-btn--secondary,
.pictorial-app .btn-secondary,
.pictorial-app .admin-btn--ghost,
.pictorial-app .btn-outline,
.pictorial-app .btn--secondary {
  background: var(--sv-glass-2);
  color: var(--sv-text);
  border-color: var(--sv-line-2);
}
.pictorial-app .admin-btn--secondary:hover,
.pictorial-app .btn-secondary:hover,
.pictorial-app .admin-btn--ghost:hover,
.pictorial-app .btn-outline:hover {
  border-color: rgba(74,52,38,.3);
  transform: translateY(-1px);
}
.pictorial-app .btn-danger,
.pictorial-app .admin-btn--danger {
  background: var(--sv-act-edit);
  color: #fff;
}
.pictorial-app .btn-danger:hover,
.pictorial-app .admin-btn--danger:hover { filter: brightness(1.05); color: #fff; }
.pictorial-app .btn-sm,
.pictorial-app .admin-btn--sm { font-size: 13px; padding: 8px 14px; border-radius: 10px; }

/* ─────────────────────────────────────────────────────────
   6 · CARDS (card, admin-card, stat-card)
   ───────────────────────────────────────────────────────── */
.pictorial-app .card,
.pictorial-app .admin-card,
.pictorial-app .stat-card {
  background: var(--sv-card);
  border: 1px solid var(--sv-line);
  border-radius: 18px;
  box-shadow: var(--pg-shadow-sm);
}
.pictorial-app .card-header,
.pictorial-app .admin-card__header { border-bottom: 1px solid var(--sv-line); padding: 18px 22px; }
.pictorial-app .card-body,
.pictorial-app .admin-card__body { padding: 22px; }

/* stat cards */
.pictorial-app .stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  transition: transform .35s var(--sv-ease), border-color .35s;
}
.pictorial-app .stat-card:hover { transform: translateY(-3px); border-color: var(--sv-line-2); }
.pictorial-app .stat-card__icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--sv-grad-soft);
  border: 1px solid rgba(85,112,97,.25);
  color: var(--sv-green);
  flex: none;
}
.pictorial-app .stat-card__content { min-width: 0; }
.pictorial-app .stat-card__value {
  font-family: var(--sv-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--sv-text);
}
.pictorial-app .stat-card__label { font-size: 13px; color: var(--sv-muted); margin-top: 4px; }

/* ─────────────────────────────────────────────────────────
   7 · PAGE HEADERS
   ───────────────────────────────────────────────────────── */
.pictorial-app .admin-page__header,
.pictorial-app .page-header,
.pictorial-app .admin-projects__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.pictorial-app .admin-page__title,
.pictorial-app .page-title,
.pictorial-app .sa-page-title,
.pictorial-app .admin-projects__title {
  font-family: var(--sv-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -.03em;
  line-height: 1;
  margin: 0;
}
.pictorial-app .admin-page__subtitle,
.pictorial-app .page-subtitle { color: var(--sv-muted); font-size: 15px; margin-top: 6px; }
.pictorial-app .admin-projects__count {
  font-family: var(--sv-mono);
  font-size: 12px;
  color: var(--sv-muted);
  background: var(--sv-glass);
  border: 1px solid var(--sv-line);
  padding: 6px 12px;
  border-radius: 100px;
}
.pictorial-app .admin-projects__title-section { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pictorial-app .admin-projects__controls { display: flex; align-items: center; gap: 12px; }

/* view toggle */
.pictorial-app .admin-view-toggle {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  background: var(--sv-glass);
  border: 1px solid var(--sv-line);
  border-radius: 12px;
}
.pictorial-app .admin-view-btn {
  width: 38px; height: 34px;
  border: 0;
  border-radius: 9px;
  background: none;
  cursor: pointer;
  display: grid; place-items: center;
  color: var(--sv-faint);
  transition: .25s var(--sv-ease);
}
.pictorial-app .admin-view-btn.is-active {
  background: var(--sv-grad);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(85,112,97,.7);
}

/* ─────────────────────────────────────────────────────────
   8 · PROJECT GRID + CARDS
   ───────────────────────────────────────────────────────── */
.pictorial-app .admin-projects__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
}
.pictorial-app .admin-project-card {
  border: 1px solid var(--sv-line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--sv-card);
  display: flex;
  flex-direction: column;
  transition: transform .4s var(--sv-ease), border-color .4s, box-shadow .4s;
}
.pictorial-app .admin-project-card:hover {
  transform: translateY(-4px);
  border-color: var(--sv-line-2);
  box-shadow: 0 26px 50px -28px rgba(74,52,38,.28);
}
.pictorial-app .admin-project-card__cover {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--sv-side-2);
  overflow: hidden;
}
.pictorial-app .admin-project-card__img { width: 100%; height: 100%; object-fit: cover; }
.pictorial-app .admin-project-card__placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: var(--sv-faint);
  background: repeating-linear-gradient(45deg, rgba(74,52,38,.05) 0 1px, transparent 1px 13px), var(--sv-side-2);
}
.pictorial-app .admin-project-card__body { padding: 18px 20px 14px; }
.pictorial-app .admin-project-card__title,
.pictorial-app .admin-project-card__body h3 {
  font-family: var(--sv-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────
   9 · BADGES / PILLS / STATUS
   ───────────────────────────────────────────────────────── */
.pictorial-app .badge,
.pictorial-app .status,
.pictorial-app .tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sv-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(74,52,38,.07);
  color: var(--sv-muted);
}
.pictorial-app .badge-success,
.pictorial-app .badge--success,
.pictorial-app .status--active,
.pictorial-app .status--success { background: rgba(85,112,97,.16); color: var(--sv-act-ver); }
.pictorial-app .badge-warning,
.pictorial-app .badge--warning,
.pictorial-app .status--pending { background: rgba(138,123,83,.16); color: var(--sv-act-clas); }
.pictorial-app .badge-danger,
.pictorial-app .badge--danger,
.pictorial-app .status--cancelled { background: rgba(160,94,69,.14); color: var(--sv-act-edit); }
.tag-on  { background: rgba(85,112,97,.16); color: var(--sv-act-ver); }
.tag-pro { background: var(--sv-grad); color: #fff; }

/* ─────────────────────────────────────────────────────────
   10 · FORMS
   ───────────────────────────────────────────────────────── */
.pictorial-app .form-group,
.pictorial-app .saform-group,
.pictorial-app .edit-form-group,
.pictorial-app .form-row,
.pictorial-app .wa-field,
.pictorial-app .lp-field { margin-bottom: 18px; }

.pictorial-app .form-label,
.pictorial-app label.form-label,
.pictorial-app .acct-info-label,
.pictorial-app .user-profile__label,
.pictorial-app .wa-section__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--sv-text);
  margin-bottom: 6px;
}
.pictorial-app .form-hint,
.pictorial-app .form-text,
.pictorial-app .wa-hint,
.pictorial-app .lp-hint { font-size: 12.5px; color: var(--sv-muted); margin-top: 6px; }

.pictorial-app .form-control,
.pictorial-app input[type="text"],
.pictorial-app input[type="email"],
.pictorial-app input[type="password"],
.pictorial-app input[type="number"],
.pictorial-app input[type="tel"],
.pictorial-app input[type="url"],
.pictorial-app input[type="search"],
.pictorial-app input[type="date"],
.pictorial-app input[type="datetime-local"],
.pictorial-app select,
.pictorial-app textarea {
  width: 100%;
  font-family: var(--sv-body);
  font-size: 14.5px;
  color: var(--sv-text);
  background: var(--sv-bg-1);
  border: 1px solid var(--sv-line-2);
  border-radius: 11px;
  padding: 11px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.pictorial-app .form-control:focus,
.pictorial-app input:focus,
.pictorial-app select:focus,
.pictorial-app textarea:focus {
  outline: none;
  border-color: var(--sv-green);
  box-shadow: 0 0 0 3px rgba(85,112,97,.18);
}
.pictorial-app input::placeholder,
.pictorial-app textarea::placeholder { color: var(--sv-faint); }

.pictorial-app .form-section { margin-bottom: 28px; }
.pictorial-app .form-section__title,
.pictorial-app .wa-section__title {
  font-family: var(--sv-display);
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 14px;
}

/* account / profile info rows */
.pictorial-app .acct-info-row,
.pictorial-app .user-profile__item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sv-line);
}
.pictorial-app .acct-info-value,
.pictorial-app .user-profile__value { color: var(--sv-text); font-weight: 600; }

/* ─────────────────────────────────────────────────────────
   11 · TABLES
   ───────────────────────────────────────────────────────── */
.pictorial-app table.table,
.pictorial-app .admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--sv-card);
  border: 1px solid var(--sv-line);
  border-radius: 14px;
  overflow: hidden;
}
.pictorial-app .admin-table th,
.pictorial-app table.table th {
  text-align: left;
  font-family: var(--sv-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sv-faint);
  background: var(--sv-side-2);
  padding: 12px 16px;
  border-bottom: 1px solid var(--sv-line);
}
.pictorial-app .admin-table td,
.pictorial-app table.table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--sv-line);
  font-size: 14px;
  color: var(--sv-text);
}
.pictorial-app .admin-table tbody tr:last-child td,
.pictorial-app table.table tbody tr:last-child td { border-bottom: 0; }
.pictorial-app .admin-table tbody tr:hover td { background: rgba(74,52,38,.03); }

/* ─────────────────────────────────────────────────────────
   12 · TIMELINE (leads / activity)
   ───────────────────────────────────────────────────────── */
.pictorial-app .timeline-item { border-left: 2px solid var(--sv-line-2); padding-left: 18px; }
.pictorial-app .timeline-date,
.pictorial-app .timeline-label { font-family: var(--sv-mono); font-size: 12px; color: var(--sv-muted); }

/* ─────────────────────────────────────────────────────────
   13 · MOCKUP-NATIVE CLASSES (por si se usan tal cual)
   ───────────────────────────────────────────────────────── */
.ph {
  position: relative;
  background-color: #D8CDB8;
  background-image: repeating-linear-gradient(45deg, rgba(74,52,38,.07) 0 1px, transparent 1px 13px);
  overflow: hidden;
  border-radius: 10px;
}
.ph::after {
  content: attr(data-label);
  position: absolute; left: 11px; bottom: 9px;
  font-family: var(--sv-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,250,242,.85); background: rgba(58,40,28,.55); padding: 3px 7px; border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────
   14 · RESPONSIVE COMPONENTS
   ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .header-welcome { display: none; }
}
/* ============================================================
   PICTORIAL — Superadmin skin
   Capa token-aware para el panel de superadmin. Se carga DESPUÉS
   de salvia.css/classic.css y reskinea los componentes propios del
   superadmin (.sa-*, .ushow-*, .acct-*, .pshow-*, .ws-*, .saform-*,
   .plan-*, .metric-*, .act-*, settings) que las vistas definen con
   colores fijos. Todo va prefijado con .superadmin-app para ganar a
   los <style> inline de las vistas por especificidad (+1 clase).

   Identidad: el acento del superadmin es --sv-act-edit (terracota en
   Salvia, rojo en Classic); el acento secundario/enlaces es --sv-green.
   ============================================================ */

/* ── Lienzo: un fondo tenue para que las tarjetas "floten" (mata el
      mar de blanco plano de los listados). ─────────────────────── */
.superadmin-app .pictorial-content { background: var(--sv-bg-2); }

/* ── Cabecera de página + títulos (centralizado: una sola fuente de
      verdad para todas las vistas, no por-vista) ─────────────────── */
.superadmin-app .sa-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.superadmin-app .sa-page-header__left { flex: 1; min-width: 0; }
.superadmin-app .sa-header-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.superadmin-app .sa-page-title,
.superadmin-app .pictorial-page-title {
  font-family: var(--sv-display);
  letter-spacing: -.02em;
  color: var(--sv-text);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 0.3rem;
}
.superadmin-app .sa-page-subtitle,
.superadmin-app .page-description { color: var(--sv-muted); font-size: 0.9rem; margin: 0; }
.superadmin-app .sa-breadcrumb,
.superadmin-app .page-header__breadcrumb { color: var(--sv-faint); font-size: 0.8rem; margin-bottom: 0.4rem; }
.superadmin-app .sa-breadcrumb a,
.superadmin-app .page-header__breadcrumb a { color: var(--sv-green); text-decoration: none; }
.superadmin-app .sa-breadcrumb a:hover,
.superadmin-app .page-header__breadcrumb a:hover { text-decoration: underline; }
/* Corrige el span del breadcrumb que estaba en blanco (#fff) → invisible
   sobre el contenido claro. */
.superadmin-app .sa-breadcrumb span,
.superadmin-app .page-header__breadcrumb span { color: var(--sv-muted); }

/* ── Formularios genéricos `.form-*` (sólo los usa el form de Planes).
      Les damos el mismo tratamiento de tarjeta + grid de 2 columnas que
      `.saform-*`, que antes no tenían (se veían como una columna larga). ── */
.superadmin-app .plan-form .form-section {
  background: var(--sv-card);
  border: 1px solid var(--sv-line);
  border-radius: var(--pg-radius);
  box-shadow: var(--pg-shadow);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.25rem;
}
.superadmin-app .plan-form .form-section > h3 {
  font-family: var(--sv-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--sv-text);
  margin: 0 0 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--sv-line);
}
.superadmin-app .plan-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.superadmin-app .plan-form .form-row:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .superadmin-app .plan-form .form-row { grid-template-columns: 1fr; } }
.superadmin-app .plan-form .form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.superadmin-app .plan-form .form-group:last-child { margin-bottom: 0; }
.superadmin-app .plan-form .form-checkbox { flex-direction: row; align-items: center; gap: 0.5rem; }
.superadmin-app .plan-form .form-checkbox label { font-weight: 500; margin: 0; }
.superadmin-app .plan-form .form-input { width: 100%; padding: 0.55rem 0.75rem; border-radius: 0.5rem; box-sizing: border-box; }
.superadmin-app .plan-form .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.superadmin-app .plan-form .form-errors {
  background: color-mix(in srgb, var(--sv-act-edit) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--sv-act-edit) 26%, transparent);
  color: var(--sv-act-edit);
  border-radius: 0.6rem;
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
}
/* Botones del form de planes con la identidad del panel */
.superadmin-app .plan-form .form-actions .btn,
.superadmin-app .saform-actions .btn { padding: 0.55rem 1.25rem; border-radius: 0.6rem; font-weight: 600; }
.superadmin-app .plan-form .form-actions .btn-primary {
  background: var(--sv-act-edit);
  color: #fff;
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--sv-act-edit) 80%, transparent);
}
.superadmin-app .plan-form .form-actions .btn-primary:hover { filter: brightness(1.06); color: #fff; }
.superadmin-app .plan-form .form-actions .btn-secondary {
  background: var(--sv-glass-2);
  color: var(--sv-text);
  border: 1px solid var(--sv-line-2);
}

/* ── Selects con chevron propio (consistencia de "selectores") ──── */
.superadmin-app select.sa-filter-select,
.superadmin-app select.saform-input,
.superadmin-app select.form-input,
.superadmin-app select.ushow-select,
.superadmin-app select.ws-select,
.superadmin-app select.settings-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 14px 14px;
  padding-right: 2rem;
}

/* ── Footer del form de settings: botón a la derecha ───────────── */
.superadmin-app .settings-form__footer { display: flex; justify-content: flex-end; }

/* El form de planes no tenía ancho máximo (campos larguísimos); lo igualamos
   a los de cuenta/usuario (820px). */
.superadmin-app .plan-form { max-width: 820px; }

/* ── Superficies: TODAS las tarjetas/paneles del superadmin ───────
      bg tokenizado + borde + sombra real + radio coherente. ─────── */
.superadmin-app .sa-table-card,
.superadmin-app .sa-filters,
.superadmin-app .ushow-card,
.superadmin-app .acct-card,
.superadmin-app .pshow-card,
.superadmin-app .ws-card,
.superadmin-app .ws-steps,
.superadmin-app .saform-card,
.superadmin-app .sauser-form .saform-card,
.superadmin-app .settings-group,
.superadmin-app .dashboard-section,
.superadmin-app .metric-card,
.superadmin-app .act-card,
.superadmin-app .plan-card,
.superadmin-app .plans-empty,
.superadmin-app .stat-card {
  background: var(--sv-card);
  border: 1px solid var(--sv-line);
  border-radius: var(--pg-radius);
  box-shadow: var(--pg-shadow);
}
.superadmin-app .ws-card--primary {
  border-color: color-mix(in srgb, var(--sv-green) 35%, var(--sv-line));
  box-shadow: var(--pg-shadow-md);
}
.superadmin-app .plan-card--default {
  border-color: color-mix(in srgb, var(--sv-act-edit) 55%, transparent);
}

.superadmin-app .stat-card:hover,
.superadmin-app .plan-card:hover {
  box-shadow: var(--pg-shadow-md);
  transform: translateY(-1px);
}

/* Encabezados internos de tarjeta (zonas grises -> token suave) */
.superadmin-app .ushow-card__title,
.superadmin-app .acct-card__title,
.superadmin-app .pshow-card__title,
.superadmin-app .saform-card__title,
.superadmin-app .ws-card__title,
.superadmin-app .metric-card__title,
.superadmin-app .section-header h2 {
  font-family: var(--sv-display);
  color: var(--sv-text);
}
.superadmin-app .acct-card__header,
.superadmin-app .ushow-card__title,
.superadmin-app .acct-card__title,
.superadmin-app .pshow-card__title,
.superadmin-app .saform-card__title,
.superadmin-app .metric-card__title,
.superadmin-app .section-header,
.superadmin-app .ws-card__head,
.superadmin-app .settings-group__header,
.superadmin-app .settings-field {
  border-color: var(--sv-line) !important;
}
.superadmin-app .ws-card__head,
.superadmin-app .settings-group__header,
.superadmin-app .plan-card__header,
.superadmin-app .plan-card__footer {
  background: var(--sv-glass);
}

/* ── Tablas (densidad y jerarquía de nivel pro) ─────────────────── */
/* width:100% es CLAVE: varios índices (cuentas, usuarios) no lo declaraban,
   así que la tabla se encogía a su contenido y dejaba un hueco enorme a la
   derecha en pantallas anchas. Lo forzamos para TODAS las tablas del panel. */
.superadmin-app .pictorial-table { width: 100%; border-collapse: separate; border-spacing: 0; }

/* La celda de acciones tenía `display:flex` en el <td>, lo que lo saca del
   modelo de tabla (columna desalineada y tabla rota a lo ancho). La devolvemos
   a table-cell y alineamos los botones a la derecha de forma fiable. */
.superadmin-app td.sa-cell-actions {
  display: table-cell;
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}
.superadmin-app td.sa-cell-actions > a,
.superadmin-app td.sa-cell-actions > button,
.superadmin-app td.sa-cell-actions > form.button_to {
  display: inline-flex;
  vertical-align: middle;
  margin: 0 0 0 0.3rem;
}
.superadmin-app td.sa-cell-actions > a:first-child,
.superadmin-app td.sa-cell-actions > form.button_to:first-child { margin-left: 0; }
.superadmin-app .pictorial-table th {
  background: transparent;
  color: var(--sv-faint);
  font-family: var(--sv-body);
  font-size: 0.685rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--sv-line-2);
}
.superadmin-app .pictorial-table td {
  color: var(--sv-text);
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--sv-line);
  vertical-align: middle;
}
.superadmin-app .pictorial-table th:first-child,
.superadmin-app .pictorial-table td:first-child { padding-left: 1.4rem; }
.superadmin-app .pictorial-table th:last-child,
.superadmin-app .pictorial-table td:last-child { padding-right: 1.4rem; }
.superadmin-app .pictorial-table tbody tr:last-child td { border-bottom: none; }
.superadmin-app .pictorial-table tbody tr { transition: background .12s ease; }
.superadmin-app .pictorial-table tbody tr:hover,
.superadmin-app .pictorial-table tbody tr:hover td { background: var(--sv-glass); }
.superadmin-app .pictorial-table td a { color: var(--sv-text); }
.superadmin-app .pictorial-table td a:hover { color: var(--sv-green); }

/* Avatares de fila un poco mayores y bien centrados */
.superadmin-app .sa-user-avatar,
.superadmin-app .sa-account-avatar {
  width: 38px; height: 38px; font-size: 0.82rem;
}

/* Iconos de acción: chips definidos, hover claro */
.superadmin-app .sa-cell-actions { gap: 0.35rem; }
.superadmin-app .sa-action-btn {
  width: 32px; height: 32px;
  background: var(--sv-glass);
  border: 1px solid var(--sv-line);
  color: var(--sv-muted);
  border-radius: 9px;
}

/* Chips de rol: más legibles, con definición sutil */
.superadmin-app .sa-role-badge,
.superadmin-app .acct-badge {
  padding: 0.22rem 0.55rem;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

/* ── Texto auxiliar / enlaces ──────────────────────────────────── */
.superadmin-app .sa-cell-muted,
.superadmin-app .acct-cell-muted,
.superadmin-app .pshow-cell-muted,
.superadmin-app .sa-sub,
.superadmin-app .sa-muted,
.superadmin-app .ushow-muted,
.superadmin-app .acct-muted,
.superadmin-app .ushow-section-label,
.superadmin-app .ushow-detail-label,
.superadmin-app .acct-info-label,
.superadmin-app .pshow-label,
.superadmin-app .metric-row__label,
.superadmin-app .acct-count-label,
.superadmin-app .limit-label,
.superadmin-app .stat-card__label,
.superadmin-app .ushow-stat__label { color: var(--sv-muted); }

.superadmin-app .sa-cell-empty,
.superadmin-app .sa-empty,
.superadmin-app .sa-empty-row,
.superadmin-app .dash-empty,
.superadmin-app .acct-empty,
.superadmin-app .metric-empty,
.superadmin-app .act-empty,
.superadmin-app .plans-empty p { color: var(--sv-faint); }

.superadmin-app .sa-empty-row a,
.superadmin-app .acct-link,
.superadmin-app .ushow-link,
.superadmin-app .pshow-link,
.superadmin-app .sa-account-link,
.superadmin-app .section-link,
.superadmin-app .acct-view-all,
.superadmin-app .ws-detail-link:hover,
.superadmin-app .act-link { color: var(--sv-green); }

.superadmin-app .sa-user-name,
.superadmin-app .sa-account-name,
.superadmin-app .ushow-profile-name,
.superadmin-app .ushow-detail-value,
.superadmin-app .acct-info-value,
.superadmin-app .acct-member__name,
.superadmin-app .pshow-value,
.superadmin-app .metric-row__val,
.superadmin-app .stat-card__value,
.superadmin-app .ushow-stat__num,
.superadmin-app .limit-value,
.superadmin-app .metric-kpi__num { color: var(--sv-text); }

.superadmin-app .sa-user-name:hover,
.superadmin-app .sa-account-name:hover,
.superadmin-app .acct-member__name:hover { color: var(--sv-green); }
.superadmin-app .sa-user-email,
.superadmin-app .sa-account-slug,
.superadmin-app .acct-member__email,
.superadmin-app .metric-kpi__label,
.superadmin-app .ushow-profile-email { color: var(--sv-faint); }
.superadmin-app .metric-kpi__num--accent { color: var(--sv-act-edit); }
.superadmin-app .pshow-usage-num { color: var(--sv-act-edit); }

/* ── Avatares / gradientes -> paleta del tema ──────────────────── */
.superadmin-app .sa-user-avatar,
.superadmin-app .sa-account-avatar,
.superadmin-app .ushow-avatar,
.superadmin-app .acct-member__avatar,
.superadmin-app .ws-header__avatar,
.superadmin-app .activity-item__avatar { background: var(--sv-grad) !important; }

/* ── Botón base `.sa-btn` ───────────────────────────────────────
      Varias vistas (usuarios, cuentas, planes) usan `.sa-btn sa-btn--primary`
      pero NO definían la base (solo el dashboard la tenía inline) → "Nuevo
      usuario/cuenta" salía como un enlace rojo subrayado sin forma. Centralizado. */
.superadmin-app .sa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: filter .15s, background .15s, transform .15s, box-shadow .15s;
}
.superadmin-app .sa-btn svg { flex-shrink: 0; }

/* ── Barra de filtros: salvia fija width:100% a todo input/select, así que los
      filtros se apilaban a lo ancho (cada uno ocupando toda la fila). Los
      volvemos compactos e inline (búsqueda crece, selects fijos). ────────── */
.superadmin-app .sa-filters__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.superadmin-app .sa-filter-input {
  width: auto;
  flex: 1 1 260px;
  min-width: 200px;
}
.superadmin-app .sa-filter-select {
  width: auto;
  flex: 0 1 auto;
  min-width: 168px;
}
.superadmin-app .sa-filter-btn,
.superadmin-app .sa-filter-clear { width: auto; flex: 0 0 auto; }

/* ── Botones primarios (identidad roja del superadmin) ─────────── */
.superadmin-app .sa-btn--primary,
.superadmin-app .acct-btn--primary,
.superadmin-app .ushow-action-btn--primary,
.superadmin-app .plan-btn--primary,
.superadmin-app .saform-btn--primary {
  background: var(--sv-act-edit);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--sv-act-edit) 80%, transparent);
}
.superadmin-app .sa-btn--primary:hover,
.superadmin-app .acct-btn--primary:hover,
.superadmin-app .ushow-action-btn--primary:hover,
.superadmin-app .plan-btn--primary:hover,
.superadmin-app .saform-btn--primary:hover {
  filter: brightness(1.06);
  color: #fff;
  transform: translateY(-1px);
}

/* Botón utilitario "Filtrar": oscuro neutro (no rojo) on-palette */
.superadmin-app .sa-filter-btn {
  background: var(--sv-text);
  color: var(--pg-white, #fff);
  border: 1px solid transparent;
}
.superadmin-app .sa-filter-btn:hover { filter: brightness(1.12); }

/* Impersonar conserva su identidad ámbar (.--impersonate); no se toca. */

/* Botones secundarios / fantasma -> superficie tokenizada */
.superadmin-app .sa-btn--ghost,
.superadmin-app .acct-btn--secondary,
.superadmin-app .ushow-btn--secondary,
.superadmin-app .ushow-action-btn--secondary,
.superadmin-app .pshow-btn--secondary,
.superadmin-app .plan-btn--secondary,
.superadmin-app .plan-btn--ghost,
.superadmin-app .saform-btn--secondary,
.superadmin-app .ws-btn--secondary,
.superadmin-app .sa-btn--ghost {
  background: var(--sv-glass-2);
  color: var(--sv-text);
  border: 1px solid var(--sv-line-2);
}
.superadmin-app .sa-btn--ghost:hover,
.superadmin-app .acct-btn--secondary:hover,
.superadmin-app .ushow-btn--secondary:hover,
.superadmin-app .ushow-action-btn--secondary:hover,
.superadmin-app .pshow-btn--secondary:hover,
.superadmin-app .plan-btn--secondary:hover,
.superadmin-app .plan-btn--ghost:hover,
.superadmin-app .saform-btn--secondary:hover,
.superadmin-app .ws-btn--secondary:hover { border-color: var(--sv-line-2); background: var(--sv-glass); }

/* Botón "filtrar"/oscuro y submit oscuros -> token oscuro coherente */
.superadmin-app .ws-btn--primary,
.superadmin-app .saform-btn--primary.is-dark { background: var(--sv-act-edit); }

/* Iconos de acción de tabla */
.superadmin-app .sa-action-btn {
  background: var(--sv-glass);
  border: 1px solid var(--sv-line);
  color: var(--sv-muted);
}
.superadmin-app .sa-action-btn:hover { background: var(--sv-glass-2); color: var(--sv-text); }
.superadmin-app .sa-action-btn--view:hover { color: var(--sv-green); border-color: color-mix(in srgb, var(--sv-green) 30%, transparent); }
.superadmin-app .sa-action-btn--delete:hover { color: var(--sv-act-edit); border-color: color-mix(in srgb, var(--sv-act-edit) 30%, transparent); }

/* ── Inputs / selects / textareas ──────────────────────────────── */
.superadmin-app .sa-filter-input,
.superadmin-app .sa-filter-select,
.superadmin-app .saform-input,
.superadmin-app .ushow-select,
.superadmin-app .ws-input,
.superadmin-app .ws-select,
.superadmin-app .ws-textarea,
.superadmin-app .settings-input,
.superadmin-app .settings-select,
.superadmin-app .form-input,
.superadmin-app .sa-input,
.superadmin-app .sa-textarea {
  background: var(--sv-bg-1);
  border: 1px solid var(--sv-line-2);
  color: var(--sv-text);
}
.superadmin-app .sa-filter-input:focus,
.superadmin-app .sa-filter-select:focus,
.superadmin-app .saform-input:focus,
.superadmin-app .ushow-select:focus,
.superadmin-app .ws-input:focus,
.superadmin-app .ws-select:focus,
.superadmin-app .ws-textarea:focus,
.superadmin-app .settings-input:focus,
.superadmin-app .settings-select:focus,
.superadmin-app .form-input:focus,
.superadmin-app .sa-input:focus {
  border-color: var(--sv-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sv-green) 18%, transparent);
  outline: none;
}
.superadmin-app .saform-group label,
.superadmin-app .ws-label,
.superadmin-app .form-group label,
.superadmin-app .sa-label,
.superadmin-app .settings-field__label { color: var(--sv-text); }
.superadmin-app .saform-hint,
.superadmin-app .form-hint,
.superadmin-app .saform-hint--top,
.superadmin-app .ws-label-hint,
.superadmin-app .settings-field__hint { color: var(--sv-muted); }

/* ── Filtros: clear link ───────────────────────────────────────── */
.superadmin-app .sa-filter-clear { color: var(--sv-faint); }
.superadmin-app .sa-filter-clear:hover { color: var(--sv-text); }

/* ── Badges de estado (consistentes en TODAS las tablas; el índice de
      cuentas no los definía y salían como texto plano). ──────────── */
.superadmin-app .status-badge {
  display: inline-block;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.superadmin-app .status-badge--active {
  background: color-mix(in srgb, var(--sv-act-ver) 14%, transparent);
  color: var(--sv-act-ver);
  border-color: color-mix(in srgb, var(--sv-act-ver) 26%, transparent);
}
.superadmin-app .status-badge--pending {
  background: color-mix(in srgb, var(--sv-act-clas) 15%, transparent);
  color: var(--sv-act-clas);
  border-color: color-mix(in srgb, var(--sv-act-clas) 26%, transparent);
}
.superadmin-app .status-badge--suspended {
  background: color-mix(in srgb, var(--sv-act-edit) 13%, transparent);
  color: var(--sv-act-edit);
  border-color: color-mix(in srgb, var(--sv-act-edit) 26%, transparent);
}
.superadmin-app .status-badge--cancelled {
  background: var(--sv-glass);
  color: var(--sv-faint);
  border-color: var(--sv-line);
}

/* ── Pills / plan / cuenta ─────────────────────────────────────── */
.superadmin-app .sa-plan-pill {
  background: color-mix(in srgb, var(--sv-green) 12%, transparent);
  color: var(--sv-green-d);
}
.superadmin-app .plan-icon {
  background: color-mix(in srgb, var(--sv-act-edit) 12%, transparent);
  color: var(--sv-act-edit);
}

/* ── Empty states con borde punteado ──────────────────────────── */
.superadmin-app .plans-empty,
.superadmin-app .acct-empty { border-color: var(--sv-line); }

/* ── Modal de payout (dialog) ──────────────────────────────────── */
.superadmin-app .sa-dialog {
  background: var(--sv-card);
  color: var(--sv-text);
  border: 1px solid var(--sv-line);
  border-radius: var(--pg-radius);
}
.superadmin-app .sa-dialog__header,
.superadmin-app .sa-dialog__footer { border-color: var(--sv-line); }
.superadmin-app .sa-dialog__title { color: var(--sv-text); }
.superadmin-app .sa-bank { background: var(--sv-glass); border-color: var(--sv-line); }

/* ── Sub-tarjetas internas grises (stats, límites, etc.) ───────── */
.superadmin-app .ushow-stat,
.superadmin-app .limit-item {
  background: var(--sv-glass);
  border-color: var(--sv-line);
}

/* ── Pie/igualar radios de tarjetas con header/footer ──────────── */
.superadmin-app .plan-card,
.superadmin-app .sa-table-card,
.superadmin-app .ws-card,
.superadmin-app .settings-group { overflow: hidden; }
/*




*/

/* ══════════════════════════════════════════════════════════════════════════════
   PICTORIAL — Professional Photography Gallery Styles
   Diseño de clase mundial para fotógrafos profesionales
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   Global Layout Fixes
   ───────────────────────────────────────────────────────────────────────────── */
/* Force scrollbar to always be visible to prevent layout shift when dropdowns open */
html {
  overflow-y: scroll !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CSS Variables / Design Tokens
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Colores */
  --pg-white: #ffffff;
  --pg-black: #0a0a0a;
  --pg-gray-50: #fafafa;
  --pg-gray-100: #f4f4f5;
  --pg-gray-200: #e4e4e7;
  --pg-gray-300: #d4d4d8;
  --pg-gray-400: #a1a1aa;
  --pg-gray-500: #71717a;
  --pg-gray-600: #52525b;
  --pg-gray-700: #3f3f46;
  --pg-gray-800: #27272a;
  --pg-gray-900: #18181b;

  /* Accent */
  --pg-primary: #111827;
  --pg-primary-hover: #1f2937;
  --pg-accent: #f43f5e;
  --pg-accent-light: #fecdd3;

  /* Espaciado */
  --pg-gap: 12px;
  --pg-gap-lg: 20px;
  --pg-radius: 12px;
  --pg-radius-sm: 8px;
  --pg-radius-full: 999px;

  /* Compatibilidad con estilos anteriores */
  --pg-border: #e4e4e7;
  --pg-muted: #71717a;

  /* Transiciones */
  --pg-transition-fast: 150ms ease;
  --pg-transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --pg-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Sombras */
  --pg-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --pg-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --pg-shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --pg-shadow-lg: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ActiveStorage Direct Uploads
   ───────────────────────────────────────────────────────────────────────────── */
.direct-upload{display:inline-block;position:relative;padding:2px 4px;margin:0 3px 3px 0;border:1px solid rgba(0,0,0,.3);border-radius:3px;font-size:11px;line-height:13px}
.direct-upload--pending{opacity:.6}
.direct-upload__progress{position:absolute;top:0;left:0;bottom:0;opacity:.2;background:#0076ff;transition:width 120ms ease-out,opacity 60ms 60ms ease-in;transform:translate3d(0,0,0)}
.direct-upload--complete .direct-upload__progress{opacity:.4}
.direct-upload--error{border-color:red}
input[type=file][data-direct-upload-url][disabled]{display:none}

/* ─────────────────────────────────────────────────────────────────────────────
   Marketing / Dashboard Utils
   ───────────────────────────────────────────────────────────────────────────── */
.marketing-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.marketing-actions{margin-left:auto}
.kpi-card .kpi{font-size:28px;font-weight:800}
.kpi-card small{color:#6c757d}
.table thead th{position:sticky;top:0;background:#fff;z-index:1}
.badge-dot{display:inline-flex;align-items:center;gap:6px}
.badge-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.preview-box{background:#0f172a;color:#e2e8f0;border-radius:10px;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;white-space:pre-wrap}
.card-toolbar{display:flex;gap:8px;align-items:center}
.sticky-actions{position:sticky;bottom:0;background:#fff;padding:10px;border-top:1px solid #eee}
.table-sm td,.table-sm th{padding:.5rem .75rem}

/* ══════════════════════════════════════════════════════════════════════════════
   PICTORIAL GALLERY — HERO SECTION
   ══════════════════════════════════════════════════════════════════════════════ */
.pg-hero {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: var(--pg-radius);
  overflow: hidden;
  background: var(--pg-gray-900);
}

@media (max-width: 768px) {
  .pg-hero {
    border-radius: 0; /* No border radius on mobile for full width */
    margin: 0;
    max-width: 100%;
  }
}

.pg-hero__cover {
  position: relative;
  width: 100%;
  height: 380px;
}

.pg-hero__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pg-hero__gradient {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.pg-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.2) 100%
  );
  pointer-events: none;
}

.pg-hero__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 40px;
  color: var(--pg-white);
}

@media (max-width: 768px) {
  .pg-hero__content {
    padding: 20px 16px;
  }
}

@media (max-width: 500px) {
  .pg-hero__content {
    padding: 16px 12px;
  }
}

.pg-hero__badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pg-hero__badge-row::-webkit-scrollbar {
  display: none;
}

@media (max-width: 500px) {
  .pg-hero__badge-row {
    gap: 6px;
    margin-bottom: 12px;
  }
}

.pg-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--pg-radius-full);
  font-size: 13px;
  font-weight: 600;
  color: var(--pg-white);
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 500px) {
  .pg-hero__badge {
    padding: 6px 10px;
    font-size: 11px;
    gap: 4px;
  }

  .pg-hero__badge svg {
    width: 14px;
    height: 14px;
  }
}

.pg-hero__badge svg {
  opacity: 0.85;
}

.pg-hero__badge--primary {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.25);
}

.pg-hero__title {
  margin: 0 0 8px;
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 500px) {
  .pg-hero__title {
    font-size: 22px;
    line-height: 1.2;
  }
}

.pg-hero__description {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  opacity: 0.85;
  max-width: 600px;
  line-height: 1.5;
}

/* Compatibilidad con Hero anterior */
.pg-hero__shade{position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.45))}
.pg-hero__placeholder{display:grid;place-items:center;height:320px;background:#111827;color:#e5e7eb;font-weight:800;font-size:42px}
.pg-hero__body{position:absolute; inset:auto 0 0 0; padding:18px 22px; color:#fff}
.pg-hero__meta{display:flex;gap:8px;flex-wrap:wrap}
.pg-badge{background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.22); color:#fff; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700}

@media (max-width: 768px) {
  .pg-hero__cover { height: 300px; }
  .pg-hero__content { padding: 24px 20px; }
  .pg-hero__badge { padding: 6px 12px; font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   GALLERY SECTION
   ══════════════════════════════════════════════════════════════════════════════ */
.pg-section {
  padding: 24px 0 48px;
}

.pg-container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 clamp(16px, 3vw, 56px);
}

@media (max-width: 768px) {
  .pg-container {
    padding: 0 12px;
  }
}

@media (max-width: 500px) {
  .pg-container {
    padding: 0 8px;
  }
}

/* Compatibilidad */
.pg-wrap{width:min(1200px,100%); margin:18px auto 0; padding:0 2px}
.pg-sections{width:min(1200px,100%); margin:12px auto 0}
.pg-h2{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size:22px; font-weight:800; letter-spacing:-.01em; color:#0f172a;
  margin:4px 4px 12px;
}

.pg-section-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--pg-gray-900);
}

.pg-count {
  font-size: 14px;
  font-weight: 500;
  color: var(--pg-gray-500);
  padding: 4px 12px;
  background: var(--pg-gray-100);
  border-radius: var(--pg-radius-full);
}

/* ── Toolbar Sticky ───────────────────────────────────────────────────────── */
.pg-toolbar {
  position: sticky;
  top: 16px;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--pg-gray-200);
  border-radius: var(--pg-radius);
  box-shadow: var(--pg-shadow-md);
  max-width: 100%;
  overflow: visible;
}

@media (max-width: 768px) {
  .pg-toolbar {
    position: relative;
    top: auto;
    padding: 10px 8px;
    margin-bottom: 16px;
    gap: 8px;
  }
}

.pg-toolbar--static {
  position: relative;
  top: auto;
  background: var(--pg-white);
  backdrop-filter: none;
}

.pg-toolbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pg-toolbar__left::-webkit-scrollbar {
  display: none;
}

@media (max-width: 768px) {
  .pg-toolbar__left {
    gap: 8px;
  }
}

.pg-toolbar__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Compatibilidad */
.pg-tools{display:flex;align-items:center;gap:10px}
.pg-bulk { display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.pg-btn{
  appearance:none; border:1px solid #e5e7eb; background:#fff; color:#111;
  border-radius:10px; padding:9px 12px; font-weight:700; cursor:pointer;
}
.pg-btn[disabled]{ opacity:.5; cursor:not-allowed }

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.pg-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px;
  max-width: 100%;
}

.pg-tabs::-webkit-scrollbar {
  display: none;
}

@media (max-width: 768px) {
  .pg-tabs {
    gap: 6px;
    padding: 1px;
  }
}

.pg-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--pg-gray-50);
  border: 1px solid var(--pg-gray-200);
  border-radius: var(--pg-radius-full);
  font-size: 14px;
  font-weight: 600;
  color: var(--pg-gray-700);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--pg-transition-fast);
}

.pg-tab:hover {
  background: var(--pg-gray-100);
  border-color: var(--pg-gray-300);
  transform: translateY(-1px);
}

.pg-tab.is-active {
  background: var(--pg-primary);
  border-color: var(--pg-primary);
  color: var(--pg-white);
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.25);
}

.pg-tab--fav {
  color: var(--pg-accent);
  border-color: rgba(244, 63, 94, 0.2);
}

.pg-tab--fav:hover {
  background: rgba(244, 63, 94, 0.05);
  border-color: rgba(244, 63, 94, 0.3);
  color: var(--pg-accent);
  transform: translateY(-1px);
}

.pg-tab--fav.is-active {
  background: var(--pg-accent);
  border-color: var(--pg-accent);
  color: var(--pg-white);
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
}

.pg-tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 5px;
  height: 20px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.pg-tab.is-active .pg-tab__badge {
  background: rgba(255, 255, 255, 0.2);
}

/* Photo counter chip */
.pg-photo-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: var(--pg-gray-100);
  border-radius: var(--pg-radius-full);
  font-size: 12px;
  font-weight: 600;
  color: var(--pg-gray-500);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .pg-photo-count { display: none; }
}

/* ── Actions ───────────────────────────────────────────────────────────────── */
.pg-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pg-action-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--pg-white);
  border: 1px solid var(--pg-gray-200);
  border-radius: var(--pg-radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--pg-gray-700);
  cursor: pointer;
  transition: all var(--pg-transition-fast);
}

.pg-action-btn:hover:not([disabled]) {
  background: var(--pg-gray-50);
  border-color: var(--pg-gray-300);
}

.pg-action-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.pg-action-btn--primary {
  background: var(--pg-primary);
  border-color: var(--pg-primary);
  color: var(--pg-white);
}

.pg-action-btn--primary:hover:not([disabled]) {
  background: var(--pg-primary-hover);
  border-color: var(--pg-primary-hover);
}

.pg-action-btn--fav {
  color: var(--pg-gray-400);
}

.pg-action-btn--fav.has-items,
.pg-action-btn--fav:hover:not([disabled]) {
  color: var(--pg-accent);
  border-color: var(--pg-accent-light);
  background: rgba(244, 63, 94, 0.05);
}

.pg-action-btn.is-loading {
  pointer-events: none;
  opacity: 0.7;
  position: relative;
}

.pg-action-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.pg-action-text {
  display: none;
}

@media (min-width: 768px) {
  .pg-action-text { display: inline; }
}

/* ── Sort ───────────────────────────────────────────────────────────────── */
.pg-sort {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pg-sort select {
  appearance: none;
  padding: 10px 36px 10px 14px;
  background: var(--pg-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--pg-gray-200);
  border-radius: var(--pg-radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--pg-gray-700);
  cursor: pointer;
  transition: all var(--pg-transition-fast);
}

.pg-sort select:hover {
  border-color: var(--pg-gray-300);
}

.pg-sort select:focus {
  outline: none;
  border-color: var(--pg-primary);
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.1);
}

/* ══════════════════════════════════════════════════════════════════════════════
   MASONRY GRID - Uniform Aspect Ratio (Professional Look)
   ══════════════════════════════════════════════════════════════════════════════ */
.pg-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--pg-gap);
}

@media (max-width: 1400px) { .pg-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1000px) { .pg-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .pg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px)  { .pg-grid { grid-template-columns: repeat(1, 1fr); } }

/* ── Card ───────────────────────────────────────────────────────────────── */
.pg-card {
  position: relative;
  display: block;
  border-radius: var(--pg-radius-sm);
  overflow: hidden;
  background: var(--pg-gray-100);
  transition: transform var(--pg-transition), box-shadow var(--pg-transition);
}

.pg-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pg-shadow-lg);
}

.pg-card__link {
  display: block;
  text-decoration: none;
  cursor: zoom-in;
}

.pg-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--pg-gray-100);
  overflow: hidden;
}

.pg-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity var(--pg-transition-slow), transform var(--pg-transition);
}

.pg-card__img.is-loaded {
  opacity: 1;
}

.pg-card:hover .pg-card__img {
  transform: scale(1.03);
}

/* Compatibilidad con pg-img */
.pg-img{display:block; width:100%; height:auto; border-radius:0; background:#f3f4f6}

/* Favorite Button */
.pg-card__fav {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: var(--pg-radius-full);
  cursor: pointer;
  color: var(--pg-gray-300);
  box-shadow: var(--pg-shadow-md);
  opacity: 0;
  transform: scale(0.9);
  transition: all var(--pg-transition);
  z-index: 10;
}

.pg-card:hover .pg-card__fav,
.pg-card__fav[aria-pressed="true"] {
  opacity: 1;
  transform: scale(1);
}

.pg-card__fav:hover {
  color: var(--pg-accent);
  transform: scale(1.1);
}

.pg-card__fav[aria-pressed="true"] {
  background: var(--pg-accent);
  color: var(--pg-white);
}

.pg-card__fav.is-animating {
  animation: heartPop 300ms ease;
}

@keyframes heartPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Compatibilidad con pg-favbtn */
.pg-favbtn{
  position:absolute; top:8px; right:8px;
  width:36px;height:36px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(255,255,255,.9);
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  display:grid;place-items:center;font-size:18px;line-height:1;
}
.pg-favbtn[aria-pressed="true"]{ background:#ff3b30; color:#fff }

/* Info Overlay */
.pg-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 14px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  opacity: 0;
  transition: opacity var(--pg-transition);
  pointer-events: none;
}

.pg-card:hover .pg-card__info {
  opacity: 1;
}

.pg-card__name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--pg-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pg-card__meta {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LOADER & EMPTY STATES
   ══════════════════════════════════════════════════════════════════════════════ */
.pg-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  font-size: 14px;
  font-weight: 500;
  color: var(--pg-gray-500);
}

.pg-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--pg-gray-200);
  border-top-color: var(--pg-primary);
  border-radius: var(--pg-radius-full);
  animation: spin 0.8s linear infinite;
}

.pg-spinner--light {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: var(--pg-white);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.pg-empty,
.pg-empty-project {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
  color: var(--pg-gray-500);
}

.pg-empty svg,
.pg-empty-project svg {
  margin-bottom: 20px;
  color: var(--pg-gray-300);
}

.pg-empty-project h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--pg-gray-700);
}

.pg-empty-project p {
  margin: 0;
  font-size: 15px;
  max-width: 400px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHTBOX
   ══════════════════════════════════════════════════════════════════════════════ */
.pg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.pg-lightbox.is-open {
  display: flex;
}

.pg-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  cursor: pointer;
}

.pg-lightbox__container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 60px 20px 80px;
}

.pg-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: var(--pg-radius-full);
  color: var(--pg-white);
  cursor: pointer;
  transition: all var(--pg-transition-fast);
  z-index: 10;
}

.pg-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.pg-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: var(--pg-radius-full);
  color: var(--pg-white);
  cursor: pointer;
  transition: all var(--pg-transition-fast);
  z-index: 10;
}

.pg-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.pg-lightbox__nav--prev { left: 20px; }
.pg-lightbox__nav--next { right: 20px; }

/* Compatibilidad lightbox anterior */
.pg-lightbox__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.12); color:#fff; border:0; border-radius:999px; width:44px; height:44px; cursor:pointer;
}
.pg-lightbox__btn--prev{left:18px} .pg-lightbox__btn--next{right:18px}

.pg-lightbox__content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(90vw, 1600px);
  max-height: calc(100vh - 160px);
}

.pg-lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 160px);
  object-fit: contain;
  border-radius: var(--pg-radius-sm);
  transition: opacity var(--pg-transition);
}

/* Reproductor de video en el lightbox */
.pg-lightbox__video {
  max-width: min(90vw, 1600px);
  max-height: calc(100vh - 160px);
  width: auto;
  border-radius: var(--pg-radius-sm);
  background: #000;
}

/* Overlay "play" sobre la miniatura de video */
.pg-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
  pointer-events: none;
  transition: background var(--pg-transition), transform var(--pg-transition);
}
.pg-card:hover .pg-card__play { background: rgba(17, 24, 39, 0.78); transform: translate(-50%, -50%) scale(1.06); }

/* Tile genérico para video sin poster / documentos */
.pg-card__filetile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  color: #4f46e5;
}
.pg-card__filetile--doc { background: linear-gradient(135deg, #fef3f2, #fee4e2); color: #b42318; }
.pg-card__filetile-ico { font-size: 40px; line-height: 1; }
.pg-card__filetile-ext { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

/* Card de documento: el tile necesita altura porque no hay <img> que la fije */
.pg-card--document .pg-card__link--doc { position: relative; display: block; aspect-ratio: 1; }

.pg-lightbox__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pg-lightbox__footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
}

.pg-lightbox__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pg-lightbox__filename {
  font-size: 14px;
  font-weight: 600;
  color: var(--pg-white);
}

.pg-lightbox__counter {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.pg-lightbox__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pg-lightbox__fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid transparent;
  border-radius: var(--pg-radius-full);
  cursor: pointer;
  color: var(--pg-gray-400);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pg-lightbox__fav:hover {
  color: var(--pg-accent);
  border-color: var(--pg-accent-light);
  transform: scale(1.1);
}

.pg-lightbox__fav:active {
  transform: scale(0.95);
}

.pg-lightbox__fav[aria-pressed="true"] {
  background: var(--pg-accent);
  color: var(--pg-white);
  border-color: var(--pg-accent);
  box-shadow: 0 4px 16px rgba(244, 63, 94, 0.4);
}

.pg-lightbox__fav[aria-pressed="true"]:hover {
  background: #e11d48;
  border-color: #e11d48;
}

.pg-lightbox__fav.is-animating {
  animation: heartBounce 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pg-lightbox__fav[aria-pressed="true"] svg {
  animation: heartPulse 600ms ease;
}

.pg-lightbox__download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--pg-white);
  border-radius: var(--pg-radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--pg-gray-900);
  text-decoration: none;
  transition: all var(--pg-transition-fast);
}

.pg-lightbox__download:hover {
  background: var(--pg-gray-100);
  transform: translateY(-2px);
}

.pg-lightbox__discard {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--pg-radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all var(--pg-transition-fast);
}

.pg-lightbox__discard[style*="display: "]:not([style*="display: none"]) {
  display: inline-flex;
}

.pg-lightbox__discard:hover {
  background: rgba(239,68,68,0.2);
  border-color: rgba(239,68,68,0.5);
  color: #fca5a5;
}

.pg-lightbox__discard.is-discarded {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.4);
  color: #fca5a5;
}

.pg-lightbox__discard.is-discarded:hover {
  background: rgba(34,197,94,0.15);
  border-color: rgba(34,197,94,0.4);
  color: #86efac;
}

/* Discarded card state */
.pg-card--discarded .pg-card__img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  border-radius: inherit;
  pointer-events: none;
}

.pg-card--discarded .pg-card__img-wrap {
  position: relative;
}

.pg-card--discarded {
  opacity: 0.7;
}

@media (max-width: 768px) {
  .pg-lightbox__nav { width: 44px; height: 44px; }
  .pg-lightbox__nav--prev { left: 8px; }
  .pg-lightbox__nav--next { right: 8px; }
  .pg-lightbox__container { padding: 50px 8px 70px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   LEGACY FILES VIEW
   ══════════════════════════════════════════════════════════════════════════════ */
.pg-legacy .pg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--pg-gap-lg);
}

.pg-legacy .app-card {
  border-radius: var(--pg-radius);
  overflow: hidden;
  border: 1px solid var(--pg-gray-200);
  background: var(--pg-white);
  transition: all var(--pg-transition);
}

.pg-legacy .app-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pg-shadow-lg);
}

/* ══════════════════════════════════════════════════════════════════════════════
   ADMIN UPLOADER STYLES
   ══════════════════════════════════════════════════════════════════════════════ */
.uploader {
  border: 1px solid var(--pg-gray-200);
  border-radius: var(--pg-radius);
  padding: 20px;
  background: var(--pg-white);
  margin-bottom: 24px;
}

.uploader__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.uploader__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--pg-gray-900);
}

.uploader__bar {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
}

.uploader__bar label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--pg-gray-600);
  margin-bottom: 6px;
}

.uploader__bar select,
.uploader__bar input[type="file"] {
  padding: 10px 14px;
  border: 1px solid var(--pg-gray-200);
  border-radius: var(--pg-radius-sm);
  font-size: 14px;
  background: var(--pg-white);
}

.uploader__drop {
  margin-top: 16px;
  border: 2px dashed var(--pg-gray-300);
  border-radius: var(--pg-radius);
  padding: 32px;
  text-align: center;
  color: var(--pg-gray-500);
  background: var(--pg-gray-50);
  cursor: pointer;
  transition: all var(--pg-transition-fast);
}

.uploader__drop:hover,
.uploader__drop.is-over {
  background: #eef2ff;
  border-color: #6366f1;
  color: #4f46e5;
}

.uploader__overall {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.uploader__overall-bar {
  flex: 1;
  height: 8px;
  background: var(--pg-gray-200);
  border-radius: var(--pg-radius-full);
  overflow: hidden;
}

.uploader__overall-bar > span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #60a5fa, #3b82f6);
  transition: width var(--pg-transition);
}

.uploader__overall-text {
  font-weight: 700;
  color: var(--pg-gray-700);
  min-width: 40px;
}

.uploader__counter {
  font-size: 13px;
  color: var(--pg-gray-500);
}

/* Uploader List - Scrollable */
.uploader__list {
  margin-top: 16px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--pg-gray-100);
  border-radius: var(--pg-radius-sm);
  padding: 8px;
}

.uploader__item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--pg-gray-200);
  border-radius: var(--pg-radius-sm);
  background: var(--pg-white);
  margin-bottom: 8px;
  position: relative;
}

.uploader__item:last-child {
  margin-bottom: 0;
}

.uploader-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--pg-radius-sm);
  object-fit: cover;
  background: var(--pg-gray-100);
  flex-shrink: 0;
}

.uploader-body {
  flex: 1;
  min-width: 0;
}

.uploader-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--pg-gray-800);
}

.uploader-meta {
  font-size: 12px;
  color: var(--pg-gray-500);
  margin-top: 2px;
}

.uploader-bar {
  height: 6px;
  background: var(--pg-gray-200);
  border-radius: var(--pg-radius-full);
  overflow: hidden;
  margin-top: 8px;
}

.uploader-bar__fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #60a5fa, #3b82f6);
  transition: width var(--pg-transition-fast);
}

.uploader-state {
  font-size: 12px;
  color: var(--pg-gray-500);
  margin-top: 4px;
}

.uploader-remove {
  position: absolute;
  right: 8px;
  top: 8px;
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  color: var(--pg-gray-400);
  transition: color var(--pg-transition-fast);
}

.uploader-remove:hover {
  color: var(--pg-accent);
}

.uploader__item.is-uploading {
  border-color: #60a5fa;
  background: #eff6ff;
}

.uploader__item.is-done {
  border-color: #34d399;
  background: #ecfdf5;
}

.uploader__item.is-error {
  border-color: #f87171;
  background: #fef2f2;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ADMIN FILES GALLERY (Collapsible)
   ══════════════════════════════════════════════════════════════════════════════ */
.admin-files {
  margin-top: 24px;
}

.admin-files__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--pg-gray-50);
  border: 1px solid var(--pg-gray-200);
  border-radius: var(--pg-radius) var(--pg-radius) 0 0;
  cursor: pointer;
  user-select: none;
}

.admin-files__header:hover {
  background: var(--pg-gray-100);
}

.admin-files__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--pg-gray-800);
}

.admin-files__count {
  font-size: 13px;
  font-weight: 500;
  color: var(--pg-gray-500);
  padding: 4px 10px;
  background: var(--pg-white);
  border-radius: var(--pg-radius-full);
  border: 1px solid var(--pg-gray-200);
}

.admin-files__toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pg-white);
  border: 1px solid var(--pg-gray-200);
  border-radius: var(--pg-radius-sm);
  transition: transform var(--pg-transition-fast);
}

.admin-files.is-collapsed .admin-files__toggle {
  transform: rotate(-90deg);
}

.admin-files__content {
  border: 1px solid var(--pg-gray-200);
  border-top: none;
  border-radius: 0 0 var(--pg-radius) var(--pg-radius);
  padding: 16px;
  max-height: 500px;
  overflow-y: auto;
}

.admin-files.is-collapsed .admin-files__content {
  display: none;
}

.admin-files__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.admin-file {
  position: relative;
  border-radius: var(--pg-radius-sm);
  overflow: hidden;
  background: var(--pg-gray-100);
  aspect-ratio: 1;
}

.admin-file__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-file__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity var(--pg-transition-fast);
}

.admin-file:hover .admin-file__overlay {
  opacity: 1;
}

.admin-file__btn {
  padding: 8px 12px;
  background: var(--pg-white);
  border: none;
  border-radius: var(--pg-radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--pg-gray-800);
  cursor: pointer;
  text-decoration: none;
}

.admin-file__btn--delete {
  background: var(--pg-accent);
  color: var(--pg-white);
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE TOOLBAR
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pg-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
  }

  .pg-toolbar__left,
  .pg-toolbar__right {
    width: 100%;
  }

  .pg-toolbar__right {
    justify-content: space-between;
  }

  .pg-actions {
    flex: 1;
  }

  .pg-sort {
    flex-shrink: 0;
  }

  .pg-sort select {
    padding: 8px 32px 8px 12px;
    font-size: 13px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   LEGACY GALLERY STYLES (Videos, Documentos)
   ══════════════════════════════════════════════════════════════════════════════ */
.pg-subtitle {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--pg-gray-800);
  margin: 32px 0 16px;
}

.pg-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--pg-gap-lg);
}

.pg-video {
  border-radius: var(--pg-radius);
  overflow: hidden;
  background: var(--pg-gray-900);
}

.pg-video video {
  width: 100%;
  display: block;
}

.pg-video .pg-caption {
  padding: 12px 16px;
  background: var(--pg-gray-800);
  color: var(--pg-white);
}

.pg-video .pg-name {
  display: block;
  font-weight: 600;
  font-size: 14px;
}

.pg-video .pg-meta {
  display: block;
  font-size: 12px;
  color: var(--pg-gray-400);
  margin-top: 4px;
}

.pg-mini-btn {
  display: inline-block;
  margin: 0 16px 12px;
  padding: 8px 16px;
  background: var(--pg-white);
  border-radius: var(--pg-radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--pg-gray-800);
  text-decoration: none;
  transition: all var(--pg-transition-fast);
}

.pg-mini-btn:hover {
  background: var(--pg-gray-100);
}

.pg-others {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pg-other {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--pg-gray-50);
  border: 1px solid var(--pg-gray-200);
  border-radius: var(--pg-radius);
}

.pg-fileicon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: var(--pg-white);
  border-radius: var(--pg-radius-sm);
  border: 1px solid var(--pg-gray-200);
}

.pg-other .pg-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--pg-gray-800);
}

.pg-other .pg-meta {
  font-size: 13px;
  color: var(--pg-gray-500);
  margin-top: 2px;
}

.pg-other .pg-mini-btn {
  margin: 0;
  margin-left: auto;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SENTINEL FOR INFINITE SCROLL
   ══════════════════════════════════════════════════════════════════════════════ */
.pg-sentinel {
  height: 1px;
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FAVORITES TAB - Special styling
   ══════════════════════════════════════════════════════════════════════════════ */
.pg-tab--fav {
  display: inline-flex;
  align-items: center;
}

.pg-tab--fav svg {
  flex-shrink: 0;
  transition: all var(--pg-transition-fast);
}

.pg-tab--fav:not(.is-active) svg {
  color: var(--pg-gray-400);
}

.pg-tab--fav:hover:not(.is-active) svg {
  color: var(--pg-accent);
}

.pg-tab--fav.is-active {
  background: var(--pg-accent);
  border-color: var(--pg-accent);
  color: var(--pg-white);
}

.pg-tab--fav.is-active svg {
  color: var(--pg-white);
}

/* ══════════════════════════════════════════════════════════════════════════════
   IMPROVED FAVORITE BUTTON
   ══════════════════════════════════════════════════════════════════════════════ */
.pg-card__fav {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid transparent;
  border-radius: var(--pg-radius-full);
  cursor: pointer;
  color: var(--pg-gray-400);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: scale(0.85);
  transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10;
}

.pg-card:hover .pg-card__fav,
.pg-card__fav[aria-pressed="true"] {
  opacity: 1;
  transform: scale(1);
}

.pg-card__fav:hover {
  color: var(--pg-accent);
  border-color: var(--pg-accent-light);
  transform: scale(1.1);
}

.pg-card__fav:active {
  transform: scale(0.95);
}

.pg-card__fav[aria-pressed="true"] {
  background: var(--pg-accent);
  color: var(--pg-white);
  border-color: var(--pg-accent);
  box-shadow: 0 4px 16px rgba(244, 63, 94, 0.4);
}

.pg-card__fav[aria-pressed="true"]:hover {
  background: #e11d48;
  border-color: #e11d48;
}

/* Heart animation */
.pg-card__fav.is-animating {
  animation: heartBounce 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes heartBounce {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.25); }
  50%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* Heart pulse when favorited */
.pg-card__fav[aria-pressed="true"] svg {
  animation: heartPulse 600ms ease;
}

@keyframes heartPulse {
  0%   { transform: scale(1); }
  15%  { transform: scale(1.3); }
  30%  { transform: scale(0.9); }
  45%  { transform: scale(1.15); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   EMPTY STATE FOR FAVORITES
   ══════════════════════════════════════════════════════════════════════════════ */
.pg-empty--favorites {
  padding: 80px 24px;
}

.pg-empty--favorites svg {
  color: var(--pg-accent-light);
  opacity: 0.6;
}

.pg-empty--favorites h3 {
  margin: 16px 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: var(--pg-gray-700);
}

.pg-empty--favorites p {
  margin: 0;
  font-size: 15px;
  color: var(--pg-gray-500);
  max-width: 360px;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS (for feedback)
   ══════════════════════════════════════════════════════════════════════════════ */
.pg-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: 14px 24px;
  background: var(--pg-gray-900);
  color: var(--pg-white);
  border-radius: var(--pg-radius);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  opacity: 0;
  transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  gap: 10px;
}

.pg-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.pg-toast--success {
  background: #059669;
}

.pg-toast--fav {
  background: var(--pg-accent);
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE TOUCH OPTIMIZATIONS FOR GALLERY
   Critical fixes for mobile photo gallery interactivity
   ══════════════════════════════════════════════════════════════════════════════ */

/* Remove tap highlight on all interactive elements */
.pg-card,
.pg-card__link,
.pg-card__fav,
.pg-tab,
.pg-action-btn,
.pg-lightbox__close,
.pg-lightbox__nav {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Improve touch action for gallery elements */
.pg-card__link {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.pg-card__img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}

/* Better touch targets on mobile */
@media (max-width: 768px) {
  /* Hero section adjustments */
  .pg-hero__badge {
    min-height: 32px;
    padding: 8px 16px;
  }

  /* Toolbar improvements */
  .pg-toolbar {
    position: relative; /* Not sticky on mobile for better scrolling */
    top: auto;
    margin-bottom: 16px;
  }

  /* Tab improvements */
  .pg-tab {
    min-height: 44px;
    padding: 12px 20px;
    font-size: 15px;
    touch-action: manipulation;
  }

  /* Action buttons - bigger touch targets */
  .pg-action-btn {
    min-height: 48px;
    min-width: 48px;
    padding: 12px 16px;
  }

  .pg-action-text {
    display: none; /* Hide text on very small screens */
  }

  /* Sort dropdown */
  .pg-sort select {
    min-height: 44px;
    padding: 12px 40px 12px 16px;
    font-size: 16px; /* Prevents iOS zoom */
  }

  /* Grid spacing adjustments */
  .pg-grid {
    gap: 8px;
  }

  /* Card improvements */
  .pg-card {
    border-radius: 8px;
  }

  /* Favorite button - always visible and bigger on mobile */
  .pg-card__fav {
    min-width: 48px;
    min-height: 48px;
    width: 48px;
    height: 48px;
    top: 8px;
    right: 8px;
    opacity: 1 !important;
    transform: scale(1) !important;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .pg-card__fav svg {
    width: 24px;
    height: 24px;
  }

  /* Card info - better sizing */
  .pg-card__info {
    padding: 24px 12px 12px;
    opacity: 1; /* Always visible on mobile */
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
  }

  .pg-card__name {
    font-size: 14px;
  }

  .pg-card__meta {
    font-size: 12px;
  }

  /* Lightbox improvements */
  .pg-lightbox__container {
    padding: 60px 12px 100px;
  }

  .pg-lightbox__close {
    width: 56px;
    height: 56px;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
  }

  .pg-lightbox__close svg {
    width: 28px;
    height: 28px;
  }

  .pg-lightbox__nav {
    width: 64px;
    height: 64px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
  }

  .pg-lightbox__nav svg {
    width: 36px;
    height: 36px;
  }

  .pg-lightbox__nav--prev {
    left: 8px;
  }

  .pg-lightbox__nav--next {
    right: 8px;
  }

  .pg-lightbox__footer {
    padding: 20px 16px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  .pg-lightbox__fav {
    width: 56px;
    height: 56px;
  }

  .pg-lightbox__fav svg {
    width: 24px;
    height: 24px;
  }

  .pg-lightbox__download {
    min-height: 48px;
    padding: 14px 24px;
    font-size: 15px;
  }

  /* Prevent image interaction in lightbox */
  .pg-lightbox__img {
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
    touch-action: none;
  }

  /* Content area adjustments */
  .pg-lightbox__content {
    max-width: 95vw;
    max-height: calc(100vh - 200px);
  }
}

/* Extra small screens */
@media (max-width: 500px) {
  /* Single column grid */
  .pg-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Toolbar full width */
  .pg-toolbar__left,
  .pg-toolbar__right {
    width: 100%;
  }

  .pg-actions {
    gap: 8px;
  }

  /* Hide action text on small screens */
  .pg-action-text {
    display: none;
  }

  /* Bigger buttons for small screens */
  .pg-action-btn {
    min-width: 52px;
  }

  /* Hero adjustments */
  .pg-hero__content {
    padding: 20px 16px;
  }

  .pg-hero__title {
    font-size: 24px;
  }

  .pg-hero__description {
    font-size: 14px;
  }
}

/* Landscape mobile phones */
@media (max-width: 896px) and (orientation: landscape) {
  .pg-hero__cover {
    height: 240px;
  }

  .pg-lightbox__container {
    padding: 40px 12px 60px;
  }

  .pg-lightbox__content {
    max-height: calc(100vh - 120px);
  }
}

/* Prevent double-tap zoom on gallery elements */
.pg-card,
.pg-card__link,
.pg-tab,
.pg-action-btn {
  touch-action: manipulation;
}

/* Improve scrolling performance */
.pg-grid {
  -webkit-overflow-scrolling: touch;
}

.pg-toolbar {
  -webkit-overflow-scrolling: touch;
}

/* Safe area support for modern phones */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .pg-toolbar {
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
    }

    .pg-container {
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
    }

    .pg-lightbox__footer {
      padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PREVENT HORIZONTAL SCROLL ON MOBILE
   Critical fix to prevent overflow and horizontal scrolling
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Prevent horizontal scroll globally */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Ensure all sections fit within viewport */
  .pg-section,
  .pg-hero,
  .pg-container,
  .pictorial-content {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Prevent toolbar from overflowing */
  .pg-toolbar {
    max-width: calc(100vw - 24px); /* Account for container padding */
  }

  /* Ensure grid doesn't overflow */
  .pg-grid {
    max-width: 100%;
  }

  /* Prevent long text from causing overflow */
  .pg-hero__title,
  .pg-hero__description,
  .pg-card__name {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Make sure images don't overflow */
  img {
    max-width: 100%;
    height: auto;
  }
}

/* Extra precaution for very small screens */
@media (max-width: 500px) {
  /* Tighter constraints for small screens */
  .pg-toolbar {
    max-width: calc(100vw - 16px);
  }

  .pg-container {
    max-width: 100vw;
  }

  /* Ensure flex items don't force overflow */
  .pg-toolbar__left,
  .pg-toolbar__right,
  .pg-actions,
  .pg-tabs {
    max-width: 100%;
  }

  /* Make action buttons stack better */
  .pg-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure select doesn't overflow */
  .pg-sort select {
    max-width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ADMIN INTERFACE COMPONENTS
   Estilos para el panel de administración
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Admin Buttons ───────────────────────────────────────────────────────── */
.admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--pg-radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--pg-transition-fast);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.admin-btn--primary {
  background: var(--pg-primary);
  color: var(--pg-white);
  border-color: var(--pg-primary);
}

.admin-btn--primary:hover {
  background: var(--pg-primary-hover);
  color: var(--pg-white);
  border-color: var(--pg-primary-hover);
}

.admin-btn--secondary {
  background: var(--pg-white);
  color: var(--pg-gray-700);
  border-color: var(--pg-gray-300);
}

.admin-btn--secondary:hover {
  background: var(--pg-gray-50);
  color: var(--pg-gray-900);
  border-color: var(--pg-gray-400);
}

.admin-btn--warning {
  background: #f59e0b;
  color: var(--pg-white);
  border-color: #f59e0b;
}

.admin-btn--warning:hover {
  background: #d97706;
  color: var(--pg-white);
  border-color: #d97706;
}

.admin-btn--info {
  background: #3b82f6;
  color: var(--pg-white);
  border-color: #3b82f6;
}

.admin-btn--info:hover {
  background: #2563eb;
  color: var(--pg-white);
  border-color: #2563eb;
}

.admin-btn--danger {
  background: var(--pg-accent);
  color: var(--pg-white);
  border-color: var(--pg-accent);
}

.admin-btn--danger:hover {
  background: #e11d48;
  color: var(--pg-white);
  border-color: #e11d48;
}

.admin-btn--success-outline {
  background: var(--pg-white);
  color: #059669;
  border-color: #10b981;
}

.admin-btn--success-outline.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.admin-btn--lg {
  padding: 14px 24px;
  font-size: 16px;
}

/* ── Admin Actions Bar ───────────────────────────────────────────────────── */
.admin-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--pg-white);
  border: 1px solid var(--pg-gray-200);
  border-radius: var(--pg-radius);
  flex-wrap: wrap;
}

.admin-actions-bar__left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}

.admin-actions-bar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-left: 16px;
  border-left: 1px solid var(--pg-gray-200);
}

/* Visual separator for button groups */
.admin-actions-bar__left > .admin-btn:first-child {
  margin-right: 6px;
}

.admin-actions-bar__left > .admin-btn--warning {
  margin-right: 6px;
}

/* Responsive adjustments for admin bar */
@media (max-width: 768px) {
  .admin-actions-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
  }

  .admin-actions-bar__left,
  .admin-actions-bar__right {
    width: 100%;
    justify-content: flex-start;
  }

  .admin-actions-bar__left {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-actions-bar__right {
    padding-left: 0;
    border-left: none;
    padding-top: 8px;
    border-top: 1px solid var(--pg-gray-200);
  }

  .admin-btn {
    justify-content: center;
    width: 100%;
  }

  /* Remove visual separators on mobile */
  .admin-actions-bar__left > .admin-btn:first-child,
  .admin-actions-bar__left > .admin-btn--warning {
    margin-right: 0;
  }
}

@media (max-width: 500px) {
  .admin-actions-bar {
    padding: 12px;
  }

  .admin-btn {
    padding: 12px 16px;
    font-size: 13px;
  }

  .admin-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   GALLERY — Goal 1 Enhancements
   ══════════════════════════════════════════════════════════════════════════════ */

/* Shimmer skeleton while images load */
.pg-card__img-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: pg-shimmer 1.4s ease-in-out infinite;
  z-index: 0;
}
.pg-card__img.is-loaded + .pg-card__img-wrap::before,
.pg-card__img.is-loaded ~ *,
.pg-card:has(.pg-card__img.is-loaded) .pg-card__img-wrap::before {
  display: none;
}
@keyframes pg-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Scroll to top button */
.pg-back-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 200;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15,23,42,0.85);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
.pg-back-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.pg-back-top:hover { background: rgba(15,23,42,0.95); }
@media (max-width: 640px) {
  .pg-back-top { bottom: 1rem; right: 1rem; }
}

/* Better card border on hover */
.pg-card:hover {
  outline: 2px solid rgba(59,130,246,0.15);
}

/* Improved pg-card--discarded overlay */
.pg-card--discarded .pg-card__img-wrap::after {
  content: "No seleccionada";
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Flash messages — comportamiento compartido (partial shared/_flash)
   ───────────────────────────────────────────────────────────────────────────── */
.pictorial-alert {
  transition: opacity .4s ease, transform .4s ease;
}
.pictorial-alert.is-dismissing {
  opacity: 0;
  transform: translateY(-6px);
}
.pictorial-alert__text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  padding-right: 20px;
}
/* Páginas sin shell (auth, públicas con layout application): flash flotante */
.flash-standalone {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  z-index: 1080;
}
.flash-standalone .pictorial-alert {
  box-shadow: 0 10px 30px rgba(20, 16, 8, .18);
  background: #fdfbf7;
  margin-bottom: 10px;
}
.flash-standalone .pictorial-alert--success { color: #43584c; }
.flash-standalone .pictorial-alert--error { color: #8a4a33; }

/* ─────────────────────────────────────────────────────────────────────────────
   Diálogo de confirmación con marca (window.pictorialConfirm / turbo_confirm)
   ───────────────────────────────────────────────────────────────────────────── */
dialog.pictorial-confirm {
  border: 1px solid var(--sv-line, rgba(60, 50, 30, .14));
  border-radius: 16px;
  padding: 24px;
  width: min(420px, calc(100vw - 40px));
  background: var(--sv-card, #fffdf9);
  color: var(--sv-text, #2b2620);
  box-shadow: 0 24px 60px rgba(20, 16, 8, .25);
  text-align: center;
}
dialog.pictorial-confirm::backdrop {
  background: rgba(24, 20, 14, .45);
  backdrop-filter: blur(2px);
}
.pictorial-confirm__icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(160, 94, 69, .12);
  color: var(--sv-act-edit, #a05e45);
}
.pictorial-confirm__message {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.pictorial-confirm__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.pictorial-confirm__btn {
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  min-width: 110px;
}
.pictorial-confirm__btn--cancel {
  background: transparent;
  border-color: var(--sv-line, rgba(60, 50, 30, .2));
  color: var(--sv-text, #2b2620);
}
.pictorial-confirm__btn--cancel:hover {
  background: rgba(60, 50, 30, .06);
}
.pictorial-confirm__btn--confirm {
  background: var(--sv-act-edit, #a05e45);
  color: #fff;
}
.pictorial-confirm__btn--confirm:hover {
  filter: brightness(.94);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Notificaciones internas — campana del header + modal de lectura
   (shared/_notifications_bell, shared/_notification_modal,
    notifications_controller.js). Todo sobre tokens --sv-* con fallback para
   que Salvia y Classic lo tiñan solos; el dropdown reutiliza
   .pictorial-dropdown__menu, que Classic ya re-escopa a tarjeta clara.
   ───────────────────────────────────────────────────────────────────────────── */

/* El scope del Stimulus controller no participa del layout del header */
.ntf-bell-scope { display: contents; }

/* Burbuja de no-leídas sobre la campana */
.pictorial-header__icon-btn { position: relative; }
.notif-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--sv-act-edit, #a05e45);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
/* Sin número (solo avisos derivados): punto de presencia. El span debe
   emitirse SIN whitespace interno para que :empty aplique. */
.notif-count:empty { min-width: 10px; height: 10px; padding: 0; top: -2px; right: -2px; }

/* Panel de la campana: header/footer fijos, lista con scroll propio */
.pictorial-dropdown__menu--notif {
  width: min(360px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  max-height: min(70vh, 560px);
}
.pictorial-dropdown__menu--notif .pictorial-dropdown__body {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}
.ntf-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ntf-menu__readall {
  border: 0;
  background: transparent;
  color: var(--sv-green, #557061);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  white-space: nowrap;
}
.ntf-menu__readall:hover {
  background: rgba(85, 112, 97, .1);
  background: color-mix(in srgb, var(--sv-green, #557061) 12%, transparent);
}
.ntf-menu__section {
  padding: 10px 12px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sv-faint, #9aa0a6);
  border-top: 1px solid var(--sv-line, rgba(60, 50, 30, .1));
  margin-top: 6px;
}
.ntf-menu__footer {
  border-top: 1px solid var(--sv-line, rgba(60, 50, 30, .1));
  padding: 8px 12px;
  text-align: center;
}
.ntf-menu__all {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sv-green, #557061);
  text-decoration: none;
}
.ntf-menu__all:hover { text-decoration: underline; }

/* Tarjeta de notificación dentro del dropdown */
.notif-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--sv-text, #2b2620);
  transition: background .15s ease;
}
.notif-card:hover {
  background: rgba(85, 112, 97, .08);
  background: color-mix(in srgb, var(--sv-green, #557061) 9%, transparent);
}
.notif-card--unread {
  background: rgba(85, 112, 97, .07);
  background: color-mix(in srgb, var(--sv-green, #557061) 8%, transparent);
}
.notif-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  margin-top: 6px;
}
.notif-card__dot--info    { background: var(--sv-green, #557061); }
.notif-card__dot--success { background: var(--sv-act-ver, #4f6b5c); }
.notif-card__dot--warning { background: var(--sv-act-clas, #8a7b53); }
.notif-card__dot--urgent  { background: var(--sv-act-edit, #a05e45); }
.notif-card__main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.notif-card__title {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notif-card--unread .notif-card__title { font-weight: 700; }
.notif-card__excerpt {
  font-size: 12px;
  color: var(--sv-muted, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.notif-card__time { font-size: 11px; color: var(--sv-faint, #9aa0a6); margin-top: 2px; }

/* ── Modal de lectura ──────────────────────────────────────────────────────
   Misma familia visual que dialog.pictorial-confirm, con acento por tipo
   (data-kind: info | success | warning | urgent). */
dialog.pictorial-notice {
  --notice-accent: var(--sv-green, #557061);
  position: relative;
  border: 1px solid var(--sv-line, rgba(60, 50, 30, .14));
  border-radius: 18px;
  padding: 0;
  width: min(520px, calc(100vw - 32px));
  max-height: min(82vh, 640px);
  background: var(--sv-card, #fffdf9);
  color: var(--sv-text, #2b2620);
  box-shadow: 0 24px 60px rgba(20, 16, 8, .28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
dialog.pictorial-notice:not([open]) { display: none; }
dialog.pictorial-notice[data-kind="success"] { --notice-accent: var(--sv-act-ver, #4f6b5c); }
dialog.pictorial-notice[data-kind="warning"] { --notice-accent: var(--sv-act-clas, #8a7b53); }
dialog.pictorial-notice[data-kind="urgent"]  { --notice-accent: var(--sv-act-edit, #a05e45); }
dialog.pictorial-notice::backdrop {
  background: rgba(24, 20, 14, .45);
  backdrop-filter: blur(3px);
}
dialog.pictorial-notice[open] {
  animation: pic-notice-in .28s var(--sv-ease, cubic-bezier(.2, .7, .2, 1));
}
dialog.pictorial-notice[open]::backdrop {
  animation: pic-notice-backdrop-in .28s ease;
}
@keyframes pic-notice-in {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes pic-notice-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.pictorial-notice[open],
  dialog.pictorial-notice[open]::backdrop { animation: none; }
}

.pictorial-notice__accent {
  height: 4px;
  flex: none;
  background: var(--notice-accent);
  background: linear-gradient(90deg, var(--notice-accent), color-mix(in srgb, var(--notice-accent) 55%, transparent));
}
.pictorial-notice__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sv-muted, #6b7280);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.pictorial-notice__close:hover {
  background: rgba(60, 50, 30, .08);
  color: var(--sv-text, #2b2620);
}
.pictorial-notice__header {
  padding: 26px 56px 0 26px;
  flex: none;
}
.pictorial-notice__badge {
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(85, 112, 97, .14);
  background: color-mix(in srgb, var(--notice-accent) 14%, transparent);
  color: var(--notice-accent);
}
.pictorial-notice__glyph { display: none; }
dialog.pictorial-notice[data-kind="info"]    .pictorial-notice__glyph--info,
dialog.pictorial-notice[data-kind="success"] .pictorial-notice__glyph--success,
dialog.pictorial-notice[data-kind="warning"] .pictorial-notice__glyph--warning,
dialog.pictorial-notice[data-kind="urgent"]  .pictorial-notice__glyph--urgent { display: block; }
.pictorial-notice__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--notice-accent);
  margin-bottom: 4px;
}
.pictorial-notice__title {
  margin: 0 0 4px;
  font-family: var(--sv-display, inherit);
  font-size: 21px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.pictorial-notice__meta {
  margin: 0;
  font-size: 12.5px;
  color: var(--sv-faint, #9aa0a6);
}
.pictorial-notice__media {
  flex: none;
  margin: 14px 26px 0;
}
.pictorial-notice__img {
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--sv-line, rgba(60, 50, 30, .14));
}
.pictorial-notice__body {
  padding: 14px 26px 4px;
  overflow-y: auto;
  font-size: 15px;
  line-height: 1.65;
}
.pictorial-notice__body p,
.pictorial-notice__paragraph { margin: 0 0 12px; overflow-wrap: anywhere; }
.pictorial-notice__footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 26px 22px;
}
.pictorial-notice__counter {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sv-faint, #9aa0a6);
  white-space: nowrap;
}
.pictorial-notice__actions {
  display: flex;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.pictorial-notice__btn {
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  min-width: 110px;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* El display de la clase le gana al [hidden] del user-agent: sin esta regla
   el CTA oculto se pintaba siempre como una píldora vacía junto a "Entendido". */
.pictorial-notice__btn[hidden] { display: none; }
.pictorial-notice__btn--ghost {
  background: transparent;
  border-color: var(--sv-line, rgba(60, 50, 30, .2));
  color: var(--sv-text, #2b2620);
}
.pictorial-notice__btn--ghost:hover { background: rgba(60, 50, 30, .06); }
.pictorial-notice__btn--primary {
  background: var(--notice-accent);
  color: #fff;
}
.pictorial-notice__btn--primary:hover { filter: brightness(.94); }

@media (max-width: 480px) {
  .pictorial-notice__header { padding: 22px 50px 0 18px; }
  .pictorial-notice__body { padding: 12px 18px 4px; }
  .pictorial-notice__footer { padding: 12px 18px 18px; flex-wrap: wrap; }
  .pictorial-notice__btn { flex: 1; }
}