/* ==========================================================================
   Canopy Line — Design System
   Arbórea — sitio web y centro de operaciones

   Import this file first in your build. Every color, type size, spacing
   value, and radius used across the site should come from these tokens —
   don't hardcode raw hex/px values in components.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Color: surfaces ---- */
  --color-bg: #FAFAF8;          /* page background — never pure white */
  --color-panel: #FFFFFF;       /* cards, forms, elevated surfaces */
  --color-line: #E7E6E1;        /* all borders, rules, dividers — 1px only */

  /* ---- Color: text ---- */
  --color-ink: #1E211F;         /* primary text, headings, primary buttons */
  --color-ink-soft: #8A8F89;    /* secondary text, metadata, timestamps */

  /* ---- Color: accent (sage) ---- */
  --color-sage: #6B8068;        /* the one brand accent — active states, links, focus */
  --color-sage-deep: #4C5E49;   /* hover state for --color-ink buttons and sage */
  --color-sage-pale: #EDF1EB;   /* sage at ~10% — subtle fills, info notes */

  /* ---- Color: status (functional only — never decorative) ---- */
  --color-amber: #B98A47;       /* status: en proceso / in progress */
  --color-blue: #5A7590;        /* status: fotos subidas / photos uploaded */
  --color-rose: #B06356;        /* status: programado / scheduled, soft alerts */
  --color-slate: #7C7A70;       /* status: archivado / archived, closed out */

  /* ---- Typography: families ---- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Manrope', -apple-system, sans-serif;

  /* ---- Typography: scale ---- */
  --text-display-1: 600 52px/1.05 var(--font-display);   /* page titles */
  --text-display-2: 600 34px/1.1  var(--font-display);   /* section/detail titles */
  --text-display-3: 600 24px/1.2  var(--font-display);   /* card/subsection titles */
  --text-display-italic: 500 italic 26px/1.3 var(--font-display); /* single emphasis line per page, use sparingly */

  --text-body-lg: 400 16px/1.65 var(--font-body);
  --text-body: 400 14px/1.65 var(--font-body);
  --text-body-soft: 400 13.5px/1.6 var(--font-body);      /* color: var(--color-ink-soft) */
  --text-label: 600 11px/1.4 var(--font-body);            /* uppercase, letter-spacing 1.5px */
  --text-caption: 400 11.5px/1.5 var(--font-body);        /* color: var(--color-ink-soft) */

  /* letter-spacing companions (apply alongside the fonts above) */
  --tracking-label: 1.5px;
  --tracking-eyebrow: 2px;
  --tracking-tight: -0.5px;   /* display-1 headlines only */

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;   /* icon-to-label gap */
  --space-2: 8px;   /* label-to-value gap */
  --space-3: 16px;  /* field padding, nav icon gaps */
  --space-4: 24px;  /* card/panel internal padding */
  --space-5: 32px;  /* between blocks within a section */
  --space-6: 56px;  /* main content side padding, desktop */
  --space-7: 92px;  /* between major page sections */

  /* ---- Radius ---- */
  --radius-sm: 0px;   /* default — most elements */
  --radius-md: 2px;   /* buttons, inputs, thumbnails only */
  /* Never exceed 2px. No shadows anywhere — hierarchy comes from
     1px lines and whitespace, not elevation. */

  /* ---- Layout ---- */
  --sidebar-width: 236px;
  --content-max-width: 1220px;

  /* ---- Motion (used sparingly — see notes at bottom) ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

/* ==========================================================================
   Base element defaults
   ========================================================================== */

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--color-sage);
  color: #fff;
}

a {
  color: inherit;
  text-decoration: none;
}

h1 { font: var(--text-display-1); letter-spacing: var(--tracking-tight); margin: 0; }
h2 { font: var(--text-display-2); margin: 0; }
h3 { font: var(--text-display-3); margin: 0; }

.eyebrow {
  font-size: 12px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-sage);
}

.label {
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

hr, .rule {
  border: none;
  height: 1px;
  background: var(--color-line);
}

/* Tabular numbers for money, dates, times — always */
.numeric, .t-mono {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-md);
  padding: 12px 22px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: background var(--duration-fast) var(--ease);
}

.btn-primary {
  background: var(--color-ink);
  color: #fff;
}
.btn-primary:hover { background: var(--color-sage-deep); }
.btn-primary:disabled {
  background: var(--color-line);
  color: var(--color-ink-soft);
  cursor: not-allowed;
}

.btn-ghost {
  background: none;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
}
.btn-ghost:hover { border-color: var(--color-ink); }

.btn-danger {
  background: var(--color-rose);
  color: #fff;
}
.btn-danger:hover { filter: brightness(0.88); }

.btn-text {
  background: none;
  color: var(--color-sage-deep);
  border: none;
  padding: 12px 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-sm { padding: 8px 16px; font-size: 12px; }

/* ==========================================================================
   Form fields — underline style, not boxed
   ========================================================================== */

.field label {
  display: block;
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-2);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-ink);
  background: none;
  transition: border-color var(--duration-fast) var(--ease);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--color-sage);
}

.field textarea { resize: vertical; min-height: 50px; }

/* ==========================================================================
   Status indicators — dot + label, functional color only
   ========================================================================== */

.status {
  font-size: 12.5px;
  font-weight: 500;
  position: relative;
  padding-left: 16px;
}
.status::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-sage); /* default: completado */
}
.status.scheduled::before { background: var(--color-rose); }
.status.progress::before  { background: var(--color-amber); }
.status.uploaded::before  { background: var(--color-blue); }
.status.archived::before  { background: var(--color-slate); }

/* ==========================================================================
   Layout shell
   ========================================================================== */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

.sidebar {
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 44px;
  border-right: 1px solid var(--color-line);
}

main {
  padding: 44px var(--space-6) 70px;
  max-width: var(--content-max-width);
}

/* Below tablet width, the fixed-width sidebar would eat most of a phone
   screen — collapse it into a horizontal topbar that wraps instead of a
   column that sits beside the content. Only .shell/.sidebar/main structure
   lives here; page-specific content inside main (tables, cards, nav link
   direction) is each page's own responsibility to adapt, same as the rest
   of this design system's split between shared primitives and page CSS. */
@media (max-width: 768px) {
  .shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-right: none;
    border-bottom: 1px solid var(--color-line);
  }
  .sidebar .spacer {
    display: none;
  }
  main {
    padding: var(--space-4) var(--space-3) var(--space-6);
  }
}

/* ==========================================================================
   Confirm dialog (UI.confirm) — replaces the native browser confirm()
   ========================================================================== */
.ui-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: var(--space-4);
}
.ui-confirm-box {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  max-width: 360px;
  width: 100%;
}
.ui-confirm-message {
  font: var(--text-body-lg);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
  line-height: 1.5;
}
.ui-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* ==========================================================================
   Generic modal (form dialogs — new/edit records, change password, etc.)
   Shared by both apps so a new form-style dialog never needs its own CSS.
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
}
.modal {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  width: 420px;
  max-width: 92vw;
  max-height: 86vh;
  overflow-y: auto;
}
.modal h3 { margin-bottom: var(--space-4); }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* ==========================================================================
   Icons
   ========================================================================== */
/* Stroke only, never filled. 1.3–1.5px stroke-width, 16–22px box. */

.icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ==========================================================================
   Application notes for Claude Code
   ========================================================================== */
/*
  1. One solid --color-sage moment per screen, max. Everything else uses
     --color-sage-pale (fills/notes) or the line-based --color-sage in
     .status dots. If a screen already has a sage button, don't also add
     a sage badge or sage icon elsewhere on the same view.

  2. --color-amber / --color-blue / --color-rose / --color-slate are STATUS
     colors only. Never use them for decoration, marketing accents, or
     illustration — if a color appears, it must mean something (scheduled/
     in-progress/photos uploaded/archived) or it breaks the system.

  3. No box-shadow anywhere. Hierarchy comes from --color-line borders
     and spacing (--space-*), never elevation.

  4. Radius never exceeds --radius-md (2px). If a component "wants"
     more rounding to feel friendly, that's a signal it belongs in a
     different design direction, not this one.

  5. Money, dates, and times always get tabular-nums (.numeric class)
     so columns of numbers align.

  6. Motion is minimal: background/border-color transitions on hover
     using --duration-fast, that's it. No entrance animations, no
     scroll-triggered reveals — this system reads as instrumentation,
     not marketing.

  7. Display type (Cormorant Garamond) is for titles only — never body
     copy, never button labels, never table cells. Manrope carries all
     functional UI text.
*/