/* Core Point (point) UI tokens + base primitives
   Reusable in any project for visual consistency. */

:root {
  /* Brand — predeterminado "Ámbar cálido point" (el look Core teal original
     es el preset "Core clásico"; todo esto lo re-escribe el motor de tema) */
  --core-primary: #84600F;
  --core-primary-dark: #563E0A;
  --core-teal: #E3A51A;       /* acento (nombre histórico del token) */
  --core-teal-soft: #F2D798;
  --core-lime: #CAD22B;
  --core-header-bg: #EAA315; /* barra superior = fondo del logo point; editable en Config → Apariencia */

  /* Semantic */
  --core-success: #00A999;
  --core-warning: #E3A51A;
  --core-error: #FB2C36;
  --core-info: #84600F;

  /* Derivados de texto seguros (el motor de tema los recalcula con guardas
     de contraste WCAG; estos son los valores del predeterminado) */
  --core-accent-text: #946B11;   /* acento usado COMO texto (enlaces, tabs) */
  --core-success-text: #0D665D;
  --core-warning-text: #946B11;
  --core-error-text: #E22831;
  --core-on-primary: #FFFFFF;    /* texto sobre fondo primario (botones) */
  --core-on-accent: #101418;     /* texto sobre fondo acento */
  --core-on-header: #101418;     /* texto sobre la barra superior */

  /* Neutrals */
  --core-text: #333333;
  --core-text-secondary: #5C4A21;
  --core-text-muted: #87703F;
  --core-bg: #FDF9EF;
  --core-surface: #FFFFFF;
  --core-surface-subtle: #FEFDF9;
  --core-border: #F7E6BF;
  --core-border-strong: #CBBD9D;

  /* Radius */
  --core-radius-sm: 8px;
  --core-radius-md: 12px;
  --core-radius-lg: 16px;
  --core-radius-xl: 24px;

  /* Elevation */
  --core-shadow-sm: 0 6px 14px rgba(132, 96, 15, 0.08);
  --core-shadow-md: 0 14px 30px rgba(132, 96, 15, 0.12);
  --core-shadow-lg: 0 22px 40px rgba(132, 96, 15, 0.16);

  /* Typography — modelo monday.com (ver Tipografia/tipografia-monday.md):
     Figtree = cuerpo/interfaz · Poppins = títulos · solo pesos 400 y 500. */
  --core-font-sans: "Figtree", Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic",
    "Noto Sans JP", system-ui, sans-serif;
  --core-font-title: "Poppins", Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic",
    "Noto Sans JP", system-ui, sans-serif;
  --core-font-mono: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  --core-weight-regular: 400;
  --core-weight-medium: 500;   /* el "bold" del sistema — no usar >500 */

  /* Escala tipográfica (base 15px, texto de tabla 14px — modelo monday) */
  --core-text-large-title: 28px; --core-lh-large-title: 36px;
  --core-text-title1: 22px;      --core-lh-title1: 30px;
  --core-text-title2: 18px;      --core-lh-title2: 26px;
  --core-text-title3: 16px;      --core-lh-title3: 24px;
  --core-text-headline: 15px;    --core-lh-headline: 22px;   /* énfasis 500 */
  --core-text-body: 15px;        --core-lh-body: 22px;
  --core-text-callout: 14px;     --core-lh-callout: 22px;    /* texto de tabla */
  --core-text-subhead: 13px;     --core-lh-subhead: 18px;
  --core-text-footnote: 12px;    --core-lh-footnote: 18px;
  --core-text-caption1: 11px;    --core-lh-caption1: 16px;   /* regular */
  --core-text-caption2: 10px;    --core-lh-caption2: 14px;   /* medium */

  /* Tracking — base monday (Figtree, espaciado normal) + APRETADO de la casa.
     Monday no usa curva por tamaño; su compacidad viene de la fuente. Por
     preferencia de producto se aplica un tracking NEGATIVO uniforme (−0.025em
     en cuerpo/títulos) para cerrar el interletraje de Figtree, que a 0 se veía
     suelto ("dientes separados"). Texto pequeño lleva menos negativo; los
     labels uppercase mantienen su positivo leve. */
  --core-tracking-large-title: -0.03em;
  --core-tracking-title1: -0.045em;
  --core-tracking-title2: -0.045em;
  --core-tracking-title3: -0.045em;
  --core-tracking-headline: -0.045em;
  --core-tracking-body: -0.045em;
  --core-tracking-callout: -0.045em;
  --core-tracking-subhead: -0.04em;
  --core-tracking-footnote: -0.03em;
  --core-tracking-caption: -0.02em;
  --core-tracking-display: -0.03em;   /* alias legado para titulares grandes */
  --core-tracking-caps: 0.01em;       /* labels uppercase (positivo mínimo) */
  --core-tracking-num: -0.08em;       /* cifras tabulares (IDs, teléfonos, $): más
                                         apretadas que el texto, la tnum ensancha.
                                         -0.06→-0.08 a pedido del usuario (2026-07-08) */

  /* Jerarquía de labels (opacidad sobre el texto base; modelo del sistema) */
  --core-label:   rgba(51, 51, 51, 0.85);
  --core-label-2: rgba(51, 51, 51, 0.50);
  --core-label-3: rgba(51, 51, 51, 0.26);
  --core-label-4: rgba(51, 51, 51, 0.10);
}

/* ── Text styles del sistema (usar SIEMPRE en lugar de font-size sueltos) ──
   Cada estilo expone --_lh para las variantes de leading:
   .is-tight (−2px, filas de lista con altura limitada; evitar con 3+ líneas)
   .is-loose (+2px, columnas anchas o pasajes largos) */
.core-type-large-title { --_lh: var(--core-lh-large-title); font-size: var(--core-text-large-title); line-height: var(--_lh); font-family: var(--core-font-title); font-weight: 500; letter-spacing: var(--core-tracking-large-title); }
.core-type-title1      { --_lh: var(--core-lh-title1); font-size: var(--core-text-title1); line-height: var(--_lh); font-weight: 400; letter-spacing: var(--core-tracking-title1); }
.core-type-title2      { --_lh: var(--core-lh-title2); font-size: var(--core-text-title2); line-height: var(--_lh); font-weight: 400; letter-spacing: var(--core-tracking-title2); }
.core-type-title3      { --_lh: var(--core-lh-title3); font-size: var(--core-text-title3); line-height: var(--_lh); font-weight: 400; letter-spacing: var(--core-tracking-title3); }
.core-type-headline    { --_lh: var(--core-lh-headline); font-size: var(--core-text-headline); line-height: var(--_lh); font-weight: 500; letter-spacing: var(--core-tracking-headline); }
.core-type-body        { --_lh: var(--core-lh-body); font-size: var(--core-text-body); line-height: var(--_lh); font-weight: 400; letter-spacing: var(--core-tracking-body); }
.core-type-callout     { --_lh: var(--core-lh-callout); font-size: var(--core-text-callout); line-height: var(--_lh); font-weight: 400; letter-spacing: var(--core-tracking-callout); }
.core-type-subhead     { --_lh: var(--core-lh-subhead); font-size: var(--core-text-subhead); line-height: var(--_lh); font-weight: 400; letter-spacing: var(--core-tracking-subhead); }
.core-type-footnote    { --_lh: var(--core-lh-footnote); font-size: var(--core-text-footnote); line-height: var(--_lh); font-weight: 400; letter-spacing: var(--core-tracking-footnote); }
.core-type-caption1    { --_lh: var(--core-lh-caption1); font-size: var(--core-text-caption1); line-height: var(--_lh); font-weight: 400; letter-spacing: var(--core-tracking-caption); }
.core-type-caption2    { --_lh: var(--core-lh-caption2); font-size: var(--core-text-caption2); line-height: var(--_lh); font-weight: 500; letter-spacing: var(--core-tracking-caption); }

/* Leading ajustable (tight/loose = ∓2px del interlineado del estilo) */
[class*="core-type-"].is-tight { line-height: calc(var(--_lh) - 2px); }
[class*="core-type-"].is-loose { line-height: calc(var(--_lh) + 2px); }

/* Variantes enfatizadas (peso del estilo enfatizado del sistema):
   Large Title/Title1/Title2 → bold · Headline → heavy · Caption1 → medium ·
   resto → semibold */
[class*="core-type-"].is-emphasized { font-weight: var(--core-weight-medium); }

/* Optional alias layer if your app already expects generic names */
:root {
  --primary: var(--core-primary);
  --primary-dark: var(--core-primary-dark);
  --accent: var(--core-lime);
  --success: var(--core-success);
  --warning: var(--core-warning);
  --error: var(--core-error);
  --text: var(--core-text);
  --text-secondary: var(--core-text-secondary);
  --text-muted: var(--core-text-muted);
  --bg: var(--core-bg);
  --card: var(--core-surface);
  --subtle: var(--core-surface-subtle);
  --border: var(--core-border);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body.core-theme b, body.core-theme strong, body.core-theme th,
body.core-theme h1, body.core-theme h2, body.core-theme h3, body.core-theme h4 {
  font-weight: var(--core-weight-medium);
}
body.core-theme h1, body.core-theme h2, body.core-theme h3, body.core-theme h4 {
  font-family: var(--core-font-title);
}

body.core-theme {
  font-family: var(--core-font-sans);
  font-size: var(--core-text-body);
  line-height: var(--core-lh-body);
  letter-spacing: var(--core-tracking-body);
  -webkit-font-smoothing: antialiased;
  color: var(--core-text);
  background:
    radial-gradient(circle at 100% -10%, color-mix(in srgb, var(--core-teal-soft) 22%, transparent) 0, transparent 34%),
    radial-gradient(circle at -8% -8%, color-mix(in srgb, var(--core-lime) 18%, transparent) 0, transparent 24%),
    var(--core-bg);
}

/* Cards */
.core-card {
  background: var(--core-surface);
  border: 1px solid var(--core-border);
  border-radius: var(--core-radius-lg);
  box-shadow: var(--core-shadow-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.core-card:hover {
  box-shadow: var(--core-shadow-md);
  border-color: var(--core-border-strong);
  transform: translateY(-1px);
}

/* Buttons */
.core-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--core-radius-md);
  font-family: var(--core-font-sans);
  font-weight: var(--core-weight-medium);
  font-size: 0.875rem;
  line-height: 1;
  padding: 10px 16px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.core-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  color: var(--core-text-muted);
  background: color-mix(in srgb, var(--core-text) 8%, var(--core-surface));
}

.core-btn-primary {
  background: var(--core-primary);
  color: var(--core-on-primary, #ffffff);
  border-color: var(--core-primary);
  box-shadow: 0 7px 16px color-mix(in srgb, var(--core-primary) 22%, transparent);
}

.core-btn-primary:hover:not(:disabled) {
  background: var(--core-primary-dark);
  border-color: var(--core-primary-dark);
  transform: translateY(-1px);
}

.core-btn-secondary {
  background: var(--core-surface);
  color: var(--core-text);
  border-color: var(--core-border);
  box-shadow: var(--core-shadow-sm);
}

.core-btn-secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--core-text) 5%, var(--core-surface));
  border-color: color-mix(in srgb, var(--core-text) 20%, var(--core-surface));
}

/* Inputs */
.core-input,
.core-select,
.core-textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--core-radius-md);
  border: 1px solid var(--core-border);
  background: var(--core-surface);
  color: var(--core-text);
  font-family: var(--core-font-sans);
  font-size: 0.875rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.core-input:focus,
.core-select:focus,
.core-textarea:focus {
  outline: none;
  border-color: var(--core-teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--core-teal) 20%, transparent);
}

.core-input:focus-visible {
  outline: 2px solid var(--core-teal);
  outline-offset: 2px;
}

*:focus-visible {
  outline: 2px solid var(--core-teal);
  outline-offset: 2px;
}

/* KPI pills */
.core-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: var(--core-weight-medium);
  font-size: 0.78rem;
}

.core-pill-ok {
  background: color-mix(in srgb, var(--core-success) 14%, transparent);
  color: var(--core-success-text, #0d665d);
}

.core-pill-warn {
  background: color-mix(in srgb, var(--core-warning) 28%, transparent);
  color: var(--core-warning-text, #5f6500);
}

.core-pill-error {
  background: color-mix(in srgb, var(--core-error) 15%, transparent);
  color: var(--core-error-text, #a1121a);
}

/* Píldora de acento: filtros/alcance activos (NO estados de éxito) */
.core-pill-accent {
  background: color-mix(in srgb, var(--core-teal) 14%, transparent);
  color: var(--core-accent-text);
}

/* Micro chips */
.core-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 99px;
  border: 1px solid var(--core-border);
  background: var(--core-surface);
  font-size: 0.75rem;
  font-weight: var(--core-weight-medium);
}

.core-chip.is-active {
  background: var(--core-primary);
  color: var(--core-on-primary, #ffffff);
  border-color: var(--core-primary);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--core-primary) 18%, transparent);
}

/* Data style — modelo monday: NO se usa monoespaciada. Los IDs, teléfonos,
   códigos y timers van en Figtree con cifras tabulares (los dígitos alinean
   por columna sin el interletraje ancho de una fuente mono, que se veía como
   "dientes separados"). El monospace real queda solo para bloques de código. */
.core-mono {
  font-family: var(--core-font-sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: var(--core-tracking-num);
}