/* ============================================================
   Marketing PM — Global styles
   Built on Prana tokens (see assets/prana-tokens.css)
   ============================================================ */

/* ---------- Theme variables (light) ---------- */
:root {
  /* Neutrals */
  --c-white: #ffffff;
  --c-gray50:  rgb(249,250,251);
  --c-gray75:  rgb(247,247,248);
  --c-gray100: rgb(242,244,247);
  --c-gray150: rgb(234,236,240);
  --c-gray200: rgb(210,211,213);
  --c-gray300: rgb(208,213,221);
  --c-gray400: rgb(107,114,128);
  --c-gray500: rgb(99,102,110);
  --c-gray600: rgb(97,100,108);
  --c-gray700: rgb(69,81,100);
  --c-gray800: rgb(54,58,69);
  --c-gray850: rgb(32,38,49);
  --c-gray900: rgb(24,30,42);
  --c-gray950: rgb(15,19,26);

  /* App shell */
  --bg-app: rgb(242,244,247);

  /* Brand soft tints */
  --c-primary-soft:   rgba(76,48,255,0.08);
  --c-primary-border: rgba(76,48,255,0.18);

  /* Marketing accent */
  --mkt-accent:        rgb(243,99,234);
  --mkt-accent-soft:   rgb(253,233,252);
  --mkt-accent-strong: rgb(193,49,184);

  /* Status */
  --c-success-text:   rgb(6,112,67);
  --c-success-bg:     rgb(232,253,240);
  --c-success-border: rgb(164,238,194);
  --c-warning-text:   rgb(216,102,3);
  --c-warning-bg:     rgb(255,243,224);
  --c-warning-border: rgb(255,214,153);
  --c-error-text:     rgb(213,44,32);
  --c-error-bg:       rgb(254,235,233);
  --c-error-border:   rgb(253,195,190);

  /* Type / chip palettes (per task type) */
  --type-diseño-bg: #FCE7F3;    --type-diseño-fg: #9D174D;
  --type-rrss-bg:   #FFEDD5;    --type-rrss-fg:   #9A3412;
  --type-email-bg:  #DCFCE7;    --type-email-fg:  #166534;
  --type-copy-bg:   #DBEAFE;    --type-copy-fg:   #1E40AF;
  --type-eventos-bg:#EDE9FE;    --type-eventos-fg:#5B21B6;
  --type-paid-bg:   #FEF3C7;    --type-paid-fg:   #92400E;
  --type-seo-bg:    #E0E7FF;    --type-seo-fg:    #3730A3;
  --type-video-bg:  #FEE2E2;    --type-video-fg:  #991B1B;
  --type-branding-bg:#CCFBF1;   --type-branding-fg:#115E59;

  /* Mobile hero gradient (light) */
  --hero-gradient: linear-gradient(135deg, #FBF5FF 0%, #F0EBFF 50%, #FFEEF9 100%);

  /* Scrollbar thumb */
  --scroll-thumb: rgb(210,211,213);
  --scroll-thumb-hover: rgb(208,213,221);

  /* Selected / active state surface — used for any "this is the focused option" UI.
     In light mode it's the high-contrast near-black; in dark it switches to an
     elevated gray so the chip doesn't turn near-white. */
  --c-selected-bg: var(--c-gray950);
  --c-selected-fg: #ffffff;
  --c-selected-border: var(--c-gray950);

  color-scheme: light;
}

/* ---------- Dark theme ---------- */
[data-theme="dark"] {
  /* Elevation ladder (dark): app bg darkest, white = most elevated card */
  --bg-app:    #0E1116;   /* page background, darkest */
  --c-gray100: #181B22;   /* muted bg */
  --c-gray75:  #1C1F27;
  --c-gray50:  #1F232B;   /* secondary surfaces */
  --c-white:   #242832;   /* primary card surface */

  /* Borders & dividers */
  --c-gray150: #2C313C;   /* default border */
  --c-gray200: #353A47;
  --c-gray300: #404656;

  /* Subtle text (still gray-ish) */
  --c-gray400: #6B7387;
  --c-gray500: #8A91A4;
  --c-gray600: #A8AEBD;
  --c-gray700: #C2C7D2;
  --c-gray800: #D6D9E1;
  --c-gray850: #DFE1E7;
  --c-gray900: #EBEDF1;
  --c-gray950: #F5F6F8;   /* primary text */

  --c-primary-soft:   rgba(120,98,255,0.18);
  --c-primary-border: rgba(120,98,255,0.40);

  --mkt-accent-soft:   rgba(243,99,234,0.20);

  /* Status — darker tinted bgs */
  --c-success-text:   #4FE5A1;
  --c-success-bg:     rgba(22,171,102,0.16);
  --c-success-border: rgba(22,171,102,0.38);
  --c-warning-text:   #FFB454;
  --c-warning-bg:     rgba(216,102,3,0.18);
  --c-warning-border: rgba(216,102,3,0.42);
  --c-error-text:     #FF8175;
  --c-error-bg:       rgba(240,64,51,0.16);
  --c-error-border:   rgba(240,64,51,0.42);

  /* Task type chips — darker tints with bright text */
  --type-diseño-bg: rgba(219,39,119,0.18);    --type-diseño-fg: #FF8DB8;
  --type-rrss-bg:   rgba(249,115,22,0.18);    --type-rrss-fg:   #FFB073;
  --type-email-bg:  rgba(22,163,74,0.18);     --type-email-fg:  #74E29F;
  --type-copy-bg:   rgba(37,99,235,0.18);     --type-copy-fg:   #82B4FB;
  --type-eventos-bg:rgba(124,58,237,0.18);    --type-eventos-fg:#BFA3FF;
  --type-paid-bg:   rgba(217,119,6,0.18);     --type-paid-fg:   #FFC172;
  --type-seo-bg:    rgba(79,70,229,0.18);     --type-seo-fg:    #A39DFB;
  --type-video-bg:  rgba(220,38,38,0.18);     --type-video-fg:  #FF8B82;
  --type-branding-bg:rgba(13,148,136,0.18);   --type-branding-fg:#5EE7D6;

  --hero-gradient: linear-gradient(135deg, #1C1632 0%, #1F1838 50%, #2F1A33 100%);

  --scroll-thumb: #2C313C;
  --scroll-thumb-hover: #404656;

  /* Selected/focus state in dark mode — elevated mid-gray (rgb(44,49,60)),
     same as gray150. White text on top. Avoids the near-white that --c-gray950
     would produce in dark. */
  --c-selected-bg: #2C313C;
  --c-selected-fg: #ffffff;
  --c-selected-border: #2C313C;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #root { height: 100%; width: 100%; }
body {
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  background: var(--bg-app);
  color: var(--c-gray950);
  overflow: hidden;
  transition: background-color 0.2s ease;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* Scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 10px;
  border: 2px solid var(--bg-app);
}
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

/* Task type chips — use theme-aware vars */
.type-diseño   { --bg: var(--type-diseño-bg);   --fg: var(--type-diseño-fg);   --dot: #DB2777; }
.type-rrss     { --bg: var(--type-rrss-bg);     --fg: var(--type-rrss-fg);     --dot: #F97316; }
.type-email    { --bg: var(--type-email-bg);    --fg: var(--type-email-fg);    --dot: #16A34A; }
.type-copy     { --bg: var(--type-copy-bg);     --fg: var(--type-copy-fg);     --dot: #2563EB; }
.type-eventos  { --bg: var(--type-eventos-bg);  --fg: var(--type-eventos-fg);  --dot: #7C3AED; }
.type-paid     { --bg: var(--type-paid-bg);     --fg: var(--type-paid-fg);     --dot: #D97706; }
.type-seo      { --bg: var(--type-seo-bg);      --fg: var(--type-seo-fg);      --dot: #4F46E5; }
.type-video    { --bg: var(--type-video-bg);    --fg: var(--type-video-fg);    --dot: #DC2626; }
.type-branding { --bg: var(--type-branding-bg); --fg: var(--type-branding-fg); --dot: #0D9488; }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Utility */
.no-shrink { flex-shrink: 0; }
.scroll-y { overflow-y: auto; }

/* Calendar grid */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--c-gray150);
  border-left: 1px solid var(--c-gray150);
  background: var(--c-white);
}
.cal-grid > .cal-day {
  border-right: 1px solid var(--c-gray150);
  border-bottom: 1px solid var(--c-gray150);
  min-height: 110px;
  display: flex; flex-direction: column;
  padding: 6px 6px 4px;
  background: var(--c-white);
  position: relative;
}
.cal-grid > .cal-day.is-outside { background: var(--c-gray50); }
.cal-grid > .cal-day.is-today .day-num {
  background: var(--color-primary);
  color: #fff;
}

/* Day chip */
.day-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 6px; border-radius: 4px;
  background: var(--bg, var(--c-gray100));
  color: var(--fg, var(--c-gray700));
  font-size: 11px; font-weight: 600; line-height: 1.25;
  cursor: pointer; border: 1px solid transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.day-chip:hover { border-color: var(--dot, var(--c-gray300)); }
.day-chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dot, var(--c-gray400)); flex-shrink: 0;
}

@keyframes timer-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}
.timer-live { animation: timer-pulse 1.6s ease-in-out infinite; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fade-in 0.18s ease-out both; }
.fade-in-fast { animation: fade-in 0.14s ease-out both; }

/* Toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--c-gray950); color: var(--c-white);
  padding: 10px 16px; border-radius: 8px;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-overlay);
  z-index: 1000;
  animation: fade-in 0.2s ease-out;
}

[data-theme="dark"] .toast {
  background: #2A2D35; color: #fff;
  border: 1px solid #353944;
}

/* Dialog backdrop */
.dialog-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 19, 26, 0.5);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  animation: fade-in 0.2s ease-out;
}
[data-theme="dark"] .dialog-backdrop { background: rgba(0,0,0,0.6); }

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--c-gray200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Workload calendar — force visible horizontal scrollbar */
.workload-scroll { scrollbar-width: auto; scrollbar-color: var(--c-gray300) var(--c-gray100); }
.workload-scroll::-webkit-scrollbar { height: 14px !important; width: 14px; -webkit-appearance: none; }
.workload-scroll::-webkit-scrollbar-track { background: var(--c-gray100) !important; border-radius: 7px; }
.workload-scroll::-webkit-scrollbar-thumb {
  background: var(--c-gray300) !important;
  border-radius: 7px;
  border: 3px solid var(--c-gray100) !important;
  min-width: 30px;
}
.workload-scroll::-webkit-scrollbar-thumb:hover { background: var(--c-gray400) !important; }
.workload-scroll::-webkit-scrollbar-corner { background: var(--c-gray100); }
.mkt-accent-bar {
  background: linear-gradient(90deg, var(--color-primary), var(--mkt-accent));
  border-radius: 999px;
}

/* Marketing accent gradient text — used in hero headings */
.mkt-gradient-text {
  background: linear-gradient(90deg, var(--color-primary), var(--mkt-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Hero surface (mobile + desktop requester) */
.hero-gradient { background: var(--hero-gradient); }

/* ============================================================
   Print styles — used by "Exportar PDF" (window.print())
   Strips chrome and keeps only the active screen content.
   ============================================================ */
@media print {
  /* Always print in light theme regardless of UI mode */
  :root, [data-theme="dark"] {
    color-scheme: light;
    --bg-app: #ffffff;
    --c-white: #ffffff;
    --c-gray50: #fafafa;
    --c-gray100: #f4f5f7;
    --c-gray150: #e7e8eb;
    --c-gray950: #15191A;
  }

  html, body, #root {
    background: #ffffff !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* Hide app chrome */
  aside, nav,
  [data-print-hide],
  .tweaks-panel, .tweaks-trigger,
  .toast {
    display: none !important;
  }

  /* Hide top action bar in print — the screen title prints separately */
  body [data-om-id*="AdminTopBar"],
  body [data-print-section] > div > div > div:first-child:has(button) {
    /* fallback: the topbar has IconButtons → hide via class on container in JS */
  }

  /* Show whole page content, no scroll containers */
  div[style*="overflow: hidden"],
  div[style*="overflow: auto"],
  div[style*="overflow-y: auto"],
  div[style*="overflow-x: auto"] {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }

  /* Hide the right-side task detail panel — it duplicates content */
  div[data-task-detail],
  div[role="complementary"] {
    display: none !important;
  }

  /* Card / tile primitives keep their structure but lose box-shadows */
  div[style*="box-shadow"] {
    box-shadow: none !important;
  }

  /* Make cards break-friendly */
  div[style*="border-radius: 12px"],
  div[style*="borderRadius: 12px"] {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Hide all popovers / dialogs (shouldn't be open during print, but JIC) */
  body > div.fade-in,
  .dialog-backdrop {
    display: none !important;
  }

  /* Page setup */
  @page {
    size: A4 landscape;
    margin: 12mm 10mm 12mm 10mm;
  }
}