/*
 * Net4Trust · Identidad v2 «Conexión serena» sobre Tabler 1.5.
 * Fuente de los valores: Net4Trust-Identidad-v2/aplicaciones/tokens.json (manual de marca v2, 2026-10-27).
 * ARCHIVO COMPARTIDO: la misma copia, byte por byte, vive en dte-platform (shared/marca, src/.../wwwroot/css, php/public/css)
 * y en Conta (Conta.Web/wwwroot/css). Una prueba de dte-platform vigila que las copias de este repo sean idénticas.
 * Aquí solo va color, tipografía, tamaño de controles y estados; lo propio de cada aplicación va en su site.css / app.css.
 *
 * Tema oscuro: Tabler lo activa con data-bs-theme="dark" en <html>; el manual lo llama data-theme="dark". Se conserva el mecanismo
 * de Tabler y se mapean los valores del manual dentro de html[data-bs-theme="dark"] (el menú lateral lleva su propio
 * data-bs-theme="dark", por eso se usa «html[...]»).
 */
:root {
  /* Marca (manual §Color) */
  --n4t-petroleo: #163C46;
  --n4t-verde: #43877B;
  --n4t-accion: #27685C;
  --n4t-accion-hover: #1F534A; /* hover: la acción oscurecida un 20 %; el manual no define estado hover */
  --n4t-niebla: #DCEAE5;
  --n4t-marfil: #F7F4EE;

  /* Pila de sistema: Segoe UI en Windows; sin archivos de fuente (manual §Tipografía) */
  --tblr-font-sans-serif: "Segoe UI", system-ui, -apple-system, sans-serif;
  --tblr-body-font-family: var(--tblr-font-sans-serif);
  --tblr-body-font-size: 1rem;
  --tblr-body-line-height: 1.5;

  /* Superficies y texto, tema claro */
  --tblr-body-bg: #F7F4EE;
  --tblr-body-color: #163C46;
  --tblr-bg-surface: #FFFFFF;
  --tblr-bg-surface-secondary: color-mix(in srgb, #DCEAE5 35%, #FFFFFF);
  --tblr-bg-surface-tertiary: color-mix(in srgb, #DCEAE5 55%, #FFFFFF);
  --tblr-bg-forms: #FFFFFF;
  --tblr-border-color: #B8CBC5;
  --tblr-border-color-translucent: color-mix(in srgb, #163C46 14%, transparent);
  --tblr-secondary: #52676B;
  --tblr-secondary-color: #52676B;
  --tblr-muted: #52676B;
  --tblr-navbar-bg: #163C46;
  --n4t-borde-control: #789189; /* límite de campos: 3:1 sobre blanco y marfil (WCAG 1.4.11) */

  /* Acción y enlaces: verde acción (blanco sobre él da 6.52:1) */
  --tblr-primary: #27685C;
  --tblr-primary-rgb: 39, 104, 92;
  --tblr-primary-fg: #FFFFFF;
  --tblr-primary-darken: #1F534A;
  --tblr-primary-lt: #DCEAE5;
  --tblr-primary-lt-rgb: 220, 234, 229;
  --tblr-primary-bg-subtle: #DCEAE5;
  --tblr-primary-border-subtle: #B8CBC5;
  --tblr-primary-text-emphasis: #163C46;
  --tblr-link-color: #27685C;
  --tblr-link-color-rgb: 39, 104, 92;
  --tblr-link-hover-color: #1F534A;

  /* Estados (manual §Modo oscuro y estados) */
  --tblr-success: #27685C;
  --tblr-success-rgb: 39, 104, 92;
  --tblr-success-fg: #FFFFFF;
  --tblr-success-darken: #1F534A;
  --tblr-success-lt: #DCEAE5;
  --tblr-success-lt-rgb: 220, 234, 229;
  --tblr-warning: #895700;
  --tblr-warning-rgb: 137, 87, 0;
  --tblr-warning-fg: #FFFFFF;
  --tblr-warning-darken: #6F4700;
  --tblr-warning-lt: #F6EBD3;
  --tblr-warning-lt-rgb: 246, 235, 211;
  --tblr-danger: #B33B3B;
  --tblr-danger-rgb: 179, 59, 59;
  --tblr-danger-fg: #FFFFFF;
  --tblr-danger-darken: #922F2F;
  --tblr-danger-lt: #F7E1E1;
  --tblr-danger-lt-rgb: 247, 225, 225;
  --tblr-info: #245D85;
  --tblr-info-rgb: 36, 93, 133;
  --tblr-info-fg: #FFFFFF;
  --tblr-info-darken: #1C4A6A;
  --tblr-info-lt: #DDEAF4;
  --tblr-info-lt-rgb: 221, 234, 244;
  --tblr-form-valid-color: #27685C;
  --tblr-form-invalid-color: #B33B3B;

  /* Interfaz: radio 8 px en controles y 12 px en tarjetas, múltiplos de 4 px (manual §Aplicación) */
  --tblr-border-radius: 8px;
  --tblr-border-radius-lg: 12px;
}

html[data-bs-theme="dark"] {
  --tblr-body-bg: #102D35;
  --tblr-body-color: #F7F4EE;
  --tblr-bg-surface: #163C46;
  --tblr-bg-surface-secondary: color-mix(in srgb, #102D35 45%, #163C46);
  --tblr-bg-surface-tertiary: color-mix(in srgb, #102D35 70%, #163C46);
  --tblr-bg-forms: #102D35;
  --tblr-border-color: #527078;
  --tblr-border-color-translucent: color-mix(in srgb, #F7F4EE 16%, transparent);
  --tblr-secondary: #B8CBC5;
  --tblr-secondary-color: #B8CBC5;
  --tblr-muted: #B8CBC5;
  --n4t-borde-control: #7F9DA4; /* 3:1 sobre fondo y superficie oscuros */

  --tblr-primary: #9AC8B9;
  --tblr-primary-rgb: 154, 200, 185;
  --tblr-primary-fg: #102D35;
  --tblr-primary-darken: #C8E5DB;
  --tblr-primary-lt: color-mix(in srgb, #9AC8B9 12%, #163C46);
  --tblr-primary-lt-rgb: 38, 77, 84;
  --tblr-primary-bg-subtle: color-mix(in srgb, #9AC8B9 12%, #163C46);
  --tblr-primary-border-subtle: #527078;
  --tblr-primary-text-emphasis: #C8E5DB;
  --tblr-link-color: #9AC8B9;
  --tblr-link-color-rgb: 154, 200, 185;
  --tblr-link-hover-color: #C8E5DB;

  --tblr-success: #9AC8B9;
  --tblr-success-rgb: 154, 200, 185;
  --tblr-success-fg: #102D35;
  --tblr-success-darken: #C8E5DB;
  --tblr-success-lt: color-mix(in srgb, #9AC8B9 12%, #163C46);
  --tblr-success-lt-rgb: 38, 77, 84;
  --tblr-warning: #F0CA7C;
  --tblr-warning-rgb: 240, 202, 124;
  --tblr-warning-fg: #102D35;
  --tblr-warning-darken: #F6DDA6;
  --tblr-warning-lt: color-mix(in srgb, #F0CA7C 16%, #163C46);
  --tblr-warning-lt-rgb: 51, 77, 70;
  --tblr-danger: #FFB4AB;
  --tblr-danger-rgb: 255, 180, 171;
  --tblr-danger-fg: #102D35;
  --tblr-danger-darken: #FFD2CC;
  --tblr-danger-lt: color-mix(in srgb, #FFB4AB 16%, #163C46);
  --tblr-danger-lt-rgb: 62, 74, 77;
  --tblr-info: #B6D7F0;
  --tblr-info-rgb: 182, 215, 240;
  --tblr-info-fg: #102D35;
  --tblr-info-darken: #D3E6F5;
  --tblr-info-lt: color-mix(in srgb, #B6D7F0 16%, #163C46);
  --tblr-info-lt-rgb: 49, 80, 90;
  --tblr-form-valid-color: #9AC8B9;
  --tblr-form-invalid-color: #FFB4AB;
}

/* Menú lateral: Tabler fija --tblr-navbar-bg sobre el propio elemento, así que va aquí y no basta con :root. Petróleo en claro y oscuro. */
.navbar-vertical { --tblr-navbar-bg: #163C46; }

/* Foco visible (tokens focus del manual: petróleo en claro, #C8E5DB en oscuro) */
:focus-visible { outline: 3px solid #163C46; outline-offset: 2px; }
html[data-bs-theme="dark"] :focus-visible { outline-color: #C8E5DB; }
.form-control:focus-visible, .form-select:focus-visible { outline: none; } /* Tabler dibuja su propio anillo */
.form-control:focus, .form-select:focus {
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--tblr-primary-rgb), .3);
}
::selection { background: color-mix(in srgb, var(--tblr-primary) 28%, transparent); }

/* Controles de 40 px; texto operativo nunca bajo 12 px (manual §Aplicación y §Tipografía) */
.form-control, .form-select { min-height: 2.5rem; font-size: 1rem; }
.form-control, .form-select, .form-check-input { border-color: var(--n4t-borde-control); }
.btn { --tblr-btn-padding-y: .5rem; min-height: 2.5rem; font-size: 1rem; }
.btn-sm { min-height: 2rem; font-size: .875rem; }
.badge { font-size: .75rem; }
.form-text, .form-hint, small, .small { font-size: max(.75rem, .875em); }
.table { font-size: .875rem; }
.card { --tblr-card-border-radius: 12px; }

/* Importes: cifras tabulares alineadas a la derecha */
.num, .table .text-end, .value { font-variant-numeric: tabular-nums; }