/* ============================================================================
   JuridicoDigital.cl — Design Tokens (Sistema de Diseño)
   Fuente de verdad visual para los 3 portales MVC (consumido desde Web.Core).
   Alineado al Manual de Marca v1.0 (DYW LTDA).
   ----------------------------------------------------------------------------
   Primarios oficiales: Azul #0F2042 · Dorado #C9A14A
   Soporte: Crema #FAFAF7 (no formalizado en el manual; adoptado como fondo)
   Tipografía digital: Cormorant Garamond (display) + Inter Tight (texto)
                       fallback a las oficiales del manual: Georgia / Helvetica
   ============================================================================ */

:root {
  /* ---- Marca / primarios ------------------------------------------------ */
  --jd-navy:            #0F2042;  /* institucional, "JURIDICO", headers, texto fuerte */
  --jd-navy-deep:       #0A1530;  /* gradientes, hover sobre navy */
  --jd-navy-darkest:    #060D1F;  /* footer, overlays */
  --jd-gold:            #C9A14A;  /* acento, "DIGITAL", CTA, isotipo */
  --jd-gold-light:      #D9B669;  /* hover dorado, detalles */
  --jd-gold-dim:        #8A6D2F;  /* dorado apagado sobre fondos claros */
  --jd-cream:           #FAFAF7;  /* fondo de aplicación */
  --jd-cream-text:      #E8E3D6;  /* texto claro sobre navy */
  --jd-white:           #FFFFFF;

  /* ---- Neutrales / UI --------------------------------------------------- */
  --jd-ink:             #1A1F2B;  /* texto principal sobre fondo claro */
  --jd-muted:           #5B6472;  /* texto secundario */
  --jd-border:          #E2E0D8;  /* bordes, divisores */
  --jd-surface:         #FFFFFF;  /* tarjetas, paneles */
  --jd-surface-alt:     #F3F1EA;  /* zonas alternas, filas pares */

  /* ---- Semánticos (estados de causa / feedback) ------------------------- */
  --jd-success:         #2E7D32;  /* pagada / resuelta */
  --jd-info:            #1565C0;  /* en trámite */
  --jd-warning:         #E65100;  /* observada / atención */
  --jd-danger:          #B00020;  /* anulada / error / plazo vencido */
  --jd-pending:         #C9A14A;  /* pendiente de pago (usa dorado) */

  /* ---- Tipografía ------------------------------------------------------- */
  --jd-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --jd-font-body:    "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --jd-font-hand:    "Caveat", cursive; /* firmas / detalles cálidos (uso muy puntual) */

  /* Escala fluida (clamp) — breakpoints de marca 768/480 */
  --jd-fs-display:  clamp(2.2rem, 1.6rem + 2.6vw, 3.5rem);  /* titulares hero */
  --jd-fs-h1:       clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem);
  --jd-fs-h2:       clamp(1.4rem, 1.2rem + 1.0vw, 1.9rem);
  --jd-fs-h3:       1.25rem;
  --jd-fs-body:     1rem;
  --jd-fs-sm:       0.875rem;
  --jd-fs-xs:       0.75rem;

  --jd-fw-regular:  400;
  --jd-fw-medium:   500;
  --jd-fw-semibold: 600;
  --jd-fw-bold:     700;
  --jd-lh-tight:    1.2;
  --jd-lh-body:     1.6;
  --jd-tracking-caps: 0.12em;  /* versalitas espaciadas del tagline */

  /* ---- Espaciado (escala 4px) ------------------------------------------ */
  --jd-sp-1: 0.25rem;  --jd-sp-2: 0.5rem;  --jd-sp-3: 0.75rem;
  --jd-sp-4: 1rem;     --jd-sp-5: 1.5rem;  --jd-sp-6: 2rem;
  --jd-sp-7: 3rem;     --jd-sp-8: 4rem;

  /* ---- Radios / sombras / bordes --------------------------------------- */
  --jd-radius-sm: 4px;
  --jd-radius:    8px;
  --jd-radius-lg: 14px;
  --jd-radius-pill: 999px;
  --jd-shadow-sm: 0 1px 2px rgba(15,32,66,0.06);
  --jd-shadow:    0 4px 16px rgba(15,32,66,0.10);
  --jd-shadow-lg: 0 12px 32px rgba(15,32,66,0.16);
  --jd-ring:      0 0 0 3px rgba(201,161,74,0.35); /* focus dorado accesible */

  /* ---- Layout ----------------------------------------------------------- */
  --jd-container:   1200px;
  --jd-container-narrow: 760px;  /* wizards / formularios */
  --jd-header-h:    64px;
  --jd-bp-tablet:   768px;
  --jd-bp-mobile:   480px;
  --jd-transition:  160ms ease;
}

/* ---- Acento por portal (mismo sistema, distinto énfasis) ---------------- */
:root[data-portal="usuario"]     { --jd-accent: var(--jd-gold); }
:root[data-portal="profesional"] { --jd-accent: var(--jd-info); }   /* productividad, foco en datos */
:root[data-portal="admin"]       { --jd-accent: var(--jd-navy); }   /* backoffice sobrio */

/* ---- Primitivas base ---------------------------------------------------- */
body {
  font-family: var(--jd-font-body);
  font-size: var(--jd-fs-body);
  line-height: var(--jd-lh-body);
  color: var(--jd-ink);
  background: var(--jd-cream);
}
h1,h2,h3,.jd-display { font-family: var(--jd-font-display); line-height: var(--jd-lh-tight); color: var(--jd-navy); }
.jd-tagline { font-family: var(--jd-font-body); text-transform: uppercase; letter-spacing: var(--jd-tracking-caps); color: var(--jd-gold-dim); }

/* Botones */
.jd-btn { display:inline-flex; align-items:center; gap:var(--jd-sp-2); padding:var(--jd-sp-3) var(--jd-sp-5);
          border-radius:var(--jd-radius); font-weight:var(--jd-fw-semibold); border:1px solid transparent;
          cursor:pointer; transition:var(--jd-transition); text-decoration:none; }
.jd-btn--primary   { background:var(--jd-gold); color:var(--jd-navy); }
.jd-btn--primary:hover { background:var(--jd-gold-light); }
.jd-btn--secondary { background:transparent; color:var(--jd-navy); border-color:var(--jd-navy); }
.jd-btn--secondary:hover { background:var(--jd-navy); color:var(--jd-cream); }
.jd-btn:focus-visible { outline:none; box-shadow:var(--jd-ring); }

/* Tarjeta / panel */
.jd-card { background:var(--jd-surface); border:1px solid var(--jd-border);
           border-radius:var(--jd-radius-lg); box-shadow:var(--jd-shadow-sm); padding:var(--jd-sp-5); }

/* Badge de estado de causa (color por --jd-estado-*) */
.jd-badge { display:inline-flex; align-items:center; gap:var(--jd-sp-2); padding:2px var(--jd-sp-3);
            border-radius:var(--jd-radius-pill); font-size:var(--jd-fs-xs); font-weight:var(--jd-fw-semibold);
            background:color-mix(in srgb, var(--jd-estado, var(--jd-muted)) 14%, transparent);
            color:var(--jd-estado, var(--jd-muted)); }

/* Header de marca */
.jd-header { height:var(--jd-header-h); background:var(--jd-navy); color:var(--jd-cream);
             display:flex; align-items:center; }