@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 styles ─────────────────────────── */

.sidebar-plan-info--pro {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-plan-pro-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 9999px;
  width: fit-content;
}

.sidebar-plan-renews {
  font-size: 0.7rem;
  color: var(--color-text-muted, rgba(255,255,255,.5));
  padding-left: 2px;
}

.sidebar-upgrade-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-primary, #4f46e5);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.15s;
}

.sidebar-upgrade-link:hover {
  opacity: 1;
  text-decoration: underline;
}
/* ============================================================
   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;
}

/* ─────────────────────────────────────────────────────────
   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); }
/* ═══════════════════════════════════════════════════════════════════════════
   PICTORIAL - Client Project Dashboard Styles
   ═══════════════════════════════════════════════════════════════════════════ */

.cd-dashboard {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8fafc 0%, #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: white;
  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: #0f172a;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.cd-stat__label {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
}

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

/* ═════ CARDS ═════ */
.cd-card {
  background: white;
  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 #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: #f1f5f9;
}

.cd-card__header-icon svg {
  width: 20px;
  height: 20px;
  color: #475569;
  stroke: #475569;
}

.cd-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: #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: #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: #64748b;
  background: #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 {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  flex: 1;
}

.cd-btn--primary:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.cd-btn--secondary {
  background: #f1f5f9;
  color: #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 #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: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cd-info-row__icon svg {
  width: 20px;
  height: 20px;
  color: #64748b;
  stroke: #64748b;
}

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

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

.cd-info-row__value {
  font-size: 0.95rem;
  color: #0f172a;
  font-weight: 500;
}

.cd-info-row__value--muted {
  color: #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: #0f172a;
  margin: 0 0 0.25rem;
}

.cd-photographer__role {
  font-size: 0.875rem;
  color: #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: #f1f5f9;
  color: #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 #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: #64748b;
}

.cd-contract-item__value {
  color: #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: white;
  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: #cbd5e1;
  stroke: #cbd5e1;
  margin-bottom: 1rem;
}

.cd-empty__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #475569;
  margin: 0 0 0.5rem;
}

.cd-empty__text {
  font-size: 0.9rem;
  color: #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: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cd-gallery-section__title svg {
  width: 28px;
  height: 28px;
  color: #3b82f6;
  stroke: #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: rgba(138,123,83,.28);
  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. */
/* PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
   PICTORIAL  Modern Design System
   Un dise�o elegante y profesional para fot�grafos
   PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP */

/* 
   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 */
  --pt-primary: #111827;
  --pt-primary-hover: #1f2937;
  --pt-accent: #3b82f6;
  --pt-accent-hover: #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);
}

/* PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
   RESET & BASE
   PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP */
*, *::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;
}

/* PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
   APP LAYOUT
   PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP */
.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);
}

/* PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
   SIDEBAR COLLAPSED STATE
   PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP */
@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);
  }
}

/* PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
   RESPONSIVE - MOBILE
   PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP */
@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);
  }
}

/* PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
   ADMIN PAGE COMPONENTS
   PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP */
.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;
}

/* PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
   CARDS
   PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP */
.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);
}

/* PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
   FORMS
   PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP */
.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;
}

/* PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
   BUTTONS
   PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP */
.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);
}

/* PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
   ALERTS (Bootstrap Compatibility)
   PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP */
.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);
}

/* PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
   BADGES
   PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP */
.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; }

/* PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
   TABLES
   PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP */
.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); }

/* PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
   UTILITY CLASSES
   PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP */
.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; }

/* PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
   GRID SYSTEM (Bootstrap Compatibility)
   PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP */
.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); }

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

.pg-hero__content {
  color: #ffffff;
}

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

/* PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
   AUTH PAGES (Login, Register, Password Recovery)
   PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP */
.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; }
}

/* PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
   DROPDOWN FIX - Better positioning and visibility
   PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP */
.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);
  }
}

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

/* 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.
═══════════════════════════════════════════════════════════════════════════ */

.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:    #8A7B53;
  --danger:  #A05E45;
  --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; }

/* ── 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: #F4EEE1; 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: rgba(138,123,83,.22); color: #fff; border-color: rgba(138,123,83,.5); }
.proj .hchip.warn .pdot { background: var(--warn); }
.proj .hchip.ok { background: rgba(79,107,92,.28); color: #fff; border-color: rgba(79,107,92,.5); }
.proj .hchip.ok .pdot { background: #7E978A; }
.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 ───────────────────────────────────────────────────── */
.proj .flow {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  margin: 22px 0;
}
.proj .fstep {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px; border-radius: 14px;
  background: var(--bg-1); border: 1px solid var(--line);
}
.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: #F4EEE1; 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: #F4EEE1; 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(4, 1fr); gap: 12px; margin-bottom: 22px; }
.proj .kpi {
  position: relative; padding: 18px; border-radius: 16px;
  background: var(--bg-1); border: 1px solid var(--line); box-shadow: var(--pg-shadow-sm);
}
.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);
}
.proj .kpi.muted { opacity: .72; }
.proj .kpi.accent { background: var(--grad); border-color: transparent; }
.proj .kpi.accent .ki { background: rgba(255,255,255,.18); color: #F4EEE1; }
.proj .kpi.accent .kv,
.proj .kpi.accent .kl { color: #F8F3EA; }
.proj .kpi.accent .ktrend { color: rgba(248,243,234,.8); }

/* ── 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: #F4EEE1; 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: #F4EEE1; 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: #F8F3EA; border: none; transition: transform .2s var(--ease);
}
.proj .btn-wide svg { width: 17px; height: 17px; }
.proj .btn-wide:hover { transform: translateY(-1px); }

/* 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 ───────────────────────────────────────────────────── */
.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 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; }

/* ── 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 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: #F4EEE1;
  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; }
.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 */
.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: rgba(138,123,83,.14); color: var(--warn);
}
.proj .status-row svg { width: 16px; height: 16px; }
.proj .status-row.ok { background: rgba(79,107,92,.16); color: var(--green-d); }

/* 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: #F4EEE1; 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: rgba(138,123,83,.14); color: var(--warn); border-color: rgba(138,123,83,.3); }
.proj .btn-danger { background: rgba(160,94,69,.1); color: var(--danger); border-color: rgba(160,94,69,.3); }
.proj .btn-danger:hover { background: var(--danger); color: #F8F3EA; border-color: transparent; }

/* 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; }

/* 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: #F4EEE1; border-color: transparent; }

/* danger zone card */
.proj .rail-card.danger { border-color: rgba(160,94,69,.3); }
.proj .rail-card.danger .ri { background: rgba(160,94,69,.14); color: var(--danger); }
.proj .rail-card.danger p { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 0 0 14px; }

/* 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;
}

/* ── 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, 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: 14px 18px 0; justify-content: flex-end; }
}
/* ============================================================
   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 — 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);
}

.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;
}