/* ============================================================
   CORRESPONSABILIDAD DESDE EL SUR · Design System
   styles.css — Tokens globales y utilidades base
   Fuente de verdad para CSS custom properties.
   En producción Next.js se usará Tailwind compilado;
   acá se exponen las variables para referencia y uso directo.
   ============================================================ */

/* ── FUENTES ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,400&family=Inter:wght@400;500;600;700&display=swap');

/* ── RESET MÍNIMO ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; display: block; }
button { cursor: pointer; }
a { color: inherit; }

/* ── TOKENS DE COLOR ────────────────────────────────────── */
:root {
  /* Primario: Azul institucional */
  --brand-50:  #eef4fb;
  --brand-100: #d6e6f5;
  --brand-200: #b2ceec;
  --brand-300: #81aedf;
  --brand-400: #4e8ad0;
  --brand-500: #2c6db8;   /* brand primario */
  --brand-600: #1f55a0;
  --brand-700: #1b4585;
  --brand-800: #193a6d;
  --brand-900: #18325c;
  --brand-950: #0f1f3d;

  /* Acento: Ámbar cálido (energía, calidez patagónica) */
  --accent-50:  #fef9ec;
  --accent-100: #fdefc8;
  --accent-200: #fbdc8e;
  --accent-300: #f8c34a;
  --accent-400: #f5aa1e;  /* acento principal */
  --accent-500: #e08c0a;
  --accent-600: #b96908;
  --accent-700: #924e0b;
  --accent-800: #773e10;
  --accent-900: #633412;

  /* Neutrales cálidos (tierra fueguina) */
  --neutral-50:  #f8f8f7;
  --neutral-100: #f0eeec;
  --neutral-200: #dedad6;
  --neutral-300: #c5bfb8;
  --neutral-400: #a89e95;
  --neutral-500: #8d8179;
  --neutral-600: #746b63;
  --neutral-700: #5e5650;
  --neutral-800: #4f4843;
  --neutral-900: #433e39;
  --neutral-950: #242120;

  /* Semánticos */
  --color-success:       #16a34a;
  --color-success-bg:    #dcfce7;
  --color-success-border:#86efac;
  --color-warning:       #d97706;
  --color-warning-bg:    #fef3c7;
  --color-warning-border:#fcd34d;
  --color-danger:        #dc2626;
  --color-danger-bg:     #fee2e2;
  --color-danger-border: #fca5a5;
  --color-info:          #0284c7;
  --color-info-bg:       #e0f2fe;
  --color-info-border:   #7dd3fc;

  /* ── TIPOGRAFÍA ─────────────────────────────────────────── */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Escala tipográfica (rem) */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  /* Line heights */
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* Pesos */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── ESPACIADO (base 4px) ───────────────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ── RADIOS ─────────────────────────────────────────────── */
  --radius-sm:   0.25rem;  /*  4px */
  --radius-md:   0.5rem;   /*  8px */
  --radius-lg:   0.75rem;  /* 12px */
  --radius-xl:   1rem;     /* 16px */
  --radius-2xl:  1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* ── SOMBRAS ────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  --shadow-xl: 0 20px 40px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.08);

  /* ── BORDES ─────────────────────────────────────────────── */
  --border-color:        var(--neutral-200);
  --border-color-strong: var(--neutral-300);

  /* ── TRANSICIONES ───────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;

  /* ── BREAKPOINTS (referencia — no se usan como variables en CSS) ── */
  /* sm: 640px  md: 768px  lg: 1024px  xl: 1280px  2xl: 1536px      */

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --max-w-content: 72rem;   /* 1152px */
  --max-w-text:    48rem;   /*  768px */
  --sidebar-w:     15rem;   /*  240px */
}

/* ── BASE ───────────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--neutral-900);
  background-color: var(--neutral-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  line-height: var(--leading-tight);
  color: var(--brand-900);
}

/* ── UTILIDADES COMPARTIDAS ─────────────────────────────── */

/* Badges de estado */
.badge-done    { background: var(--color-success-bg); color: var(--color-success);  border: 1px solid var(--color-success-border); }
.badge-pending { background: var(--color-warning-bg); color: var(--color-warning);  border: 1px solid var(--color-warning-border); }
.badge-future  { background: var(--neutral-100);      color: var(--neutral-500);    border: 1px solid var(--neutral-200); }
.badge-active  { background: var(--brand-100);        color: var(--brand-700);      border: 1px solid var(--brand-200); }

/* Cards navegables */
.nav-card { transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.nav-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip to content (accesibilidad) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 1rem;
  background: var(--brand-600);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  z-index: 9999;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 0.5rem; }

/* ── TIPOGRAFÍA EDITORIAL ───────────────────────────────── */
.prose {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--neutral-800);
  max-width: 68ch;
}
.prose p + p { margin-top: var(--space-4); }
.prose strong { font-weight: var(--weight-semibold); color: var(--neutral-950); }
.prose em { font-style: italic; }
.prose a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }

/* ── COMPONENTES BASE (no-Tailwind) ─────────────────────── */

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, var(--neutral-200) 25%, var(--neutral-100) 50%, var(--neutral-200) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Toast */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--neutral-950);
  color: white;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  font-size: var(--text-sm);
  max-width: 24rem;
  animation: toast-in var(--transition-base) ease;
}
@keyframes toast-in {
  from { transform: translateY(1rem); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Admin layout */
.admin-layout { display: flex; height: 100vh; overflow: hidden; }
.admin-sidebar { width: var(--sidebar-w); flex-shrink: 0; overflow-y: auto; }
.admin-main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

/* Indicador de breakpoint activo (dev helper) */
.bp-indicator::after { content: "< 640px"; }
@media (min-width: 640px)  { .bp-indicator::after { content: "≥ 640px (sm)"; } }
@media (min-width: 768px)  { .bp-indicator::after { content: "≥ 768px (md)"; } }
@media (min-width: 1024px) { .bp-indicator::after { content: "≥ 1024px (lg)"; } }
@media (min-width: 1280px) { .bp-indicator::after { content: "≥ 1280px (xl)"; } }

/* ── PRINT ──────────────────────────────────────────────── */
@media print {
  .no-print { display: none !important; }
  body { background: white; color: black; }
  a { text-decoration: underline; }
}