/* ============================================================================
   TEMA KÖMMERLING — Presupuestador de Ventanas
   ----------------------------------------------------------------------------
   Aplica la identidad de marca Kömmerling (azul corporativo + naranja de
   acción, formas muy redondeadas) sobre la estructura funcional existente.

   USO (ya cableado en _Layout.cshtml, se activa con appsettings "Tema"):
     <link rel="stylesheet" href="~/css/colors_and_type.css" />
     <link rel="stylesheet" href="~/css/site.css" />
     <link rel="stylesheet" href="~/css/themes/kommerling/theme.css" />   <-- DESPUÉS

   La sección "PUENTE" al final reasigna los tokens REALES del proyecto a los
   valores Kömmerling, de modo que los componentes actuales cambian de tema sin
   tocar su markup.

   NOTA DE INTEGRACIÓN (adaptado a los tokens reales del proyecto):
     · El proyecto NO usa --brand-primary/--brand-accent/--brand-ink. La capa de
       marca real es --brand / --brand-dark / --brand-50 / --brand-ring /
       --brand-shadow, consumida directísimamente (la franja del header es
       .header-accent{ background: var(--brand) }). El puente la reasigna a azul.
     · Los diagramas de ventana (.win-svg) usan la capa LEGACY --svg-* (que
       cuelga de --pv-fg-heading / --soft-2 / --line / --muted / --brand), no
       --pv-svg-*. Se reasigna --svg-* directamente.
     · Los neutros legacy --text / --muted / --line / --soft / --bg / --panel se
       usan mucho (header, tablas, bordes); también se reasignan.

   Fuente tipográfica: Figtree (Google Fonts).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap');

:root {
  /* ── MARCA / PRIMARIO (azul corporativo) ─────────────────────────────── */
  --km-blue:              #009fe3;   /* primario — precios, bordes activos, chips */
  --km-blue-600:          #0088c7;   /* hover del primario */
  --km-blue-700:          #0075bf;   /* texto azul fuerte, cabeceras */
  --km-blue-800:          #005a95;   /* franja superior, importes totales, degradados */
  --km-blue-ink:          #123047;   /* títulos sobre blanco */

  /* ── ACENTO (naranja de acción) ──────────────────────────────────────── */
  --km-orange:            #f39200;   /* botones "Añadir" / "Pedir presupuesto" */
  --km-orange-600:        #e07f00;   /* hover naranja */
  --km-orange-700:        #c86f00;   /* pressed */

  /* ── TINTES / SUPERFICIES SUAVES ─────────────────────────────────────── */
  --km-blue-50:           #eaf6fd;   /* relleno seleccionado, píldora de dato */
  --km-blue-25:           #f4f9fd;   /* relleno de input, celda de precio en reposo */
  --km-blue-row:          #eef7fc;   /* fila seleccionada en la tabla */
  --km-orange-50:         #fff2e0;   /* fondo de icono/badge naranja */
  --km-glass:             #cdeefb;   /* relleno de vidrio en los esquemas SVG */

  /* ── NEUTROS ─────────────────────────────────────────────────────────── */
  --km-page:              #f4f8fb;   /* fondo de página (frío, muy claro) */
  --km-surface:           #ffffff;   /* tarjetas */
  --km-panel:             #f0f6fb;   /* barra de navegación, chips-track, avatar-bg */
  --km-fg:                #1c2b39;   /* texto principal */
  --km-muted:             #5b6b7a;   /* texto secundario */
  --km-muted-soft:        #8a97a4;   /* etiquetas, micro-texto */
  --km-placeholder:       #c3ced8;   /* placeholders, "—", iconos apagados */
  --km-border:            #e4eaf0;   /* borde de control 1.5px */
  --km-border-soft:       #eef3f8;   /* borde de tarjeta */
  --km-divider:           #f0f5f9;   /* separadores/hairlines */

  /* ── SEMÁNTICO ───────────────────────────────────────────────────────── */
  --km-success:           #35b37e;   /* extras activos (persiana) */
  --km-success-bg:        #eafaf3;
  --km-success-text:      #1a7d54;
  --km-danger:            #dc2626;   /* borrar línea (solo en hover) */

  /* ── ESQUEMAS SVG DE VENTANA ─────────────────────────────────────────── */
  --km-svg-frame:         #2f5468;   /* marco exterior grueso + manilla */
  --km-svg-line:          #6b8a9c;   /* diagonales de apertura (practicable/oscilo) */
  --km-svg-line-soft:     #9db4c2;   /* aspa del fijo, borde de hoja */
  --km-svg-arrow:         #f39200;   /* flecha de corredera (acento naranja) */

  /* ── TIPOGRAFÍA ──────────────────────────────────────────────────────── */
  --km-font:              'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --km-font-num:          'Figtree', ui-monospace, monospace; /* usar tabular-nums */

  --km-fs-display:        33px;      /* H1 "Nueva ventana" */
  --km-fs-total:          27px;      /* importe total del carrito */
  --km-fs-card-title:     16px;      /* cabeceras de tarjeta */
  --km-fs-price:          15px;      /* celdas de precio */
  --km-fs-body:           15px;
  --km-fs-body-sm:        13.5px;
  --km-fs-meta:           12px;
  --km-fs-label:          11px;      /* micro-etiquetas MAYÚSCULAS */

  --km-fw-regular:        400;
  --km-fw-medium:         500;
  --km-fw-semi:           600;
  --km-fw-bold:           700;
  --km-fw-black:          800;       /* importes, wordmark, H1 */

  --km-ls-tight:          -0.02em;   /* títulos e importes */
  --km-ls-label:          0.09em;    /* micro-etiquetas */
  --km-ls-eyebrow:        0.12em;    /* eyebrow de página */

  /* ── RADIOS (formas muy redondeadas) ─────────────────────────────────── */
  --km-radius-card:       26px;      /* tarjetas grandes */
  --km-radius-panel:      24px;      /* tarjeta de carrito */
  --km-radius-lg:         16px;      /* inputs, celdas, cajas de total */
  --km-radius-md:         14px;
  --km-radius-sm:         12px;      /* celdas de precio */
  --km-radius-icon:       9px;       /* chips de icono de cabecera */
  --km-radius-pill:       999px;     /* botones, chips, swatches */
  --km-radius-circle:     50%;

  /* ── ESPACIADO ───────────────────────────────────────────────────────── */
  --km-space-1:           4px;
  --km-space-2:           8px;
  --km-space-3:           10px;
  --km-space-4:           14px;
  --km-space-5:           16px;
  --km-space-6:           20px;
  --km-space-7:           24px;
  --km-space-8:           26px;      /* padding interior de tarjeta */
  --km-space-9:           32px;

  /* ── BORDES ──────────────────────────────────────────────────────────── */
  --km-border-w:          1.5px;     /* borde de control */
  --km-border-w-thin:     1px;       /* borde de tarjeta / hairline */
  --km-border-accent-w:   3px;       /* barra izquierda de fila seleccionada */
  --km-accent-bar:        5px;       /* barra superior de la tarjeta */

  /* ── SOMBRAS (suaves, tintadas de azul) ──────────────────────────────── */
  --km-shadow-card:       0 8px 30px rgba(0, 84, 150, 0.07);
  --km-shadow-panel:      0 10px 34px rgba(0, 84, 150, 0.10);
  --km-shadow-header:     0 2px 14px rgba(0, 84, 150, 0.06);
  --km-shadow-blue:       0 6px 16px rgba(0, 159, 227, 0.30);   /* celda/chip activo */
  --km-shadow-orange:     0 8px 20px rgba(243, 146, 0, 0.30);   /* botón naranja */
  --km-shadow-orange-sm:  0 4px 12px rgba(243, 146, 0, 0.26);
  --km-ring-focus:        0 0 0 3px rgba(0, 159, 227, 0.15);

  /* ── DEGRADADOS ──────────────────────────────────────────────────────── */
  --km-grad-total:        linear-gradient(135deg, #0075bf 0%, #009fe3 100%); /* caja total */
  --km-grad-avatar:       linear-gradient(135deg, #009fe3 0%, #0075bf 100%);
  --km-grad-accent-bar:   linear-gradient(90deg, #009fe3 0%, #005a95 100%);  /* barra de acento */

  /* ── MOTION ──────────────────────────────────────────────────────────── */
  --km-tx:                0.15s ease;
}

/* ============================================================================
   PUENTE — reasigna los tokens REALES del proyecto al tema Kömmerling.
   ============================================================================ */
:root {
  /* ── Capa de marca real (--brand*) — la franja del header, la nav activa,
     los degradados de resumen, los eyebrows y form-section cuelgan de aquí. ── */
  --brand:              var(--km-blue);
  --brand-dark:         var(--km-blue-700);
  --brand-50:           var(--km-blue-50);
  --brand-ring:         rgba(0, 159, 227, 0.10);
  --brand-shadow:       rgba(0, 159, 227, 0.25);

  /* Alias rojos hardcodeados en colors_and_type.css (variant-chip, deep). */
  --brand-red-deep:     var(--km-blue-800);
  --brand-red-100:      var(--km-blue-50);
  --brand-red-200:      var(--km-glass);

  /* ── Neutros legacy (header, tablas, bordes, upstream de --svg-*). ──────── */
  --bg:                 var(--km-page);
  --panel:              var(--km-surface);
  --soft:               var(--km-panel);
  --soft-2:             var(--km-blue-25);
  --line:               var(--km-border);
  --text:               var(--km-fg);
  --text-label:         var(--km-muted);
  --muted:              var(--km-muted);
  --font-sans:          var(--km-font);

  /* ── Diagramas de ventana (.win-svg) — capa LEGACY --svg-* real. ───────── */
  --svg-frame:          var(--km-svg-frame);
  --svg-glass:          var(--km-glass);
  --svg-cell-line:      var(--km-svg-line-soft);
  --svg-line:           var(--km-svg-line);
  --svg-handle:         var(--km-svg-frame);
  --svg-arrow:          var(--km-svg-arrow);

  /* ── Primario y acento (capa --pv-*). ──────────────────────────────────── */
  --pv-primary:         var(--km-blue);
  --pv-primary-soft:    var(--km-blue-600);
  --pv-primary-deep:    var(--km-blue-800);
  --pv-primary-darker:  var(--km-blue-700);
  --pv-blue-500:        var(--km-blue);
  --pv-blue-600:        var(--km-blue-700);
  --pv-blue-700:        var(--km-blue-800);
  --pv-blue-light:      var(--km-blue);
  --pv-blue-lighter:    var(--km-glass);

  /* Escala "indigo" (en el base son rojos): tintes de selección/hover. */
  --pv-indigo-100:      var(--km-blue-50);
  --pv-indigo-200:      var(--km-glass);
  --pv-indigo-300:      var(--km-blue);
  --pv-indigo-400:      var(--km-blue);
  --pv-indigo-bg-50:    var(--km-blue-50);
  --pv-indigo-bg-100:   var(--km-blue-row);
  --pv-indigo-bg-150:   var(--km-blue-50);
  --pv-indigo-bg-200:   var(--km-blue-50);
  --pv-indigo-text:     var(--km-blue-800);

  /* ── Superficies y neutros (capa --pv-*). ──────────────────────────────── */
  --pv-bg-page:         var(--km-page);
  --pv-surface:         var(--km-surface);
  --pv-bg-subtle:       var(--km-blue-25);
  --pv-border:          var(--km-border);
  --pv-border-soft:     var(--km-divider);
  --pv-fg:              var(--km-fg);
  --pv-fg-heading:      var(--km-svg-frame);   /* --svg-frame/--svg-arrow cuelgan de aquí */
  --pv-muted:           var(--km-muted);
  --pv-muted-extra:     var(--km-muted-soft);
  --pv-placeholder:     var(--km-placeholder);

  /* ── Semántico. ────────────────────────────────────────────────────────── */
  --pv-success:         var(--km-success);
  --pv-success-bg:      var(--km-success-bg);
  --pv-danger:          var(--km-danger);

  /* ── Acento de acción → naranja Kömmerling. ────────────────────────────── */
  --pv-accent:          var(--km-orange);
  --pv-accent-hover:    var(--km-orange-600);
  --pv-accent-bg:       var(--km-orange-50);
  --pv-accent-contrast: #ffffff;

  /* ── Tipografía y radios. ──────────────────────────────────────────────── */
  --pv-font-family:     var(--km-font);
  --pv-radius-2xl:      var(--km-radius-card);
  --pv-radius-xl:       var(--km-radius-lg);
  --pv-radius-lg:       var(--km-radius-md);
  --pv-radius-md:       var(--km-radius-sm);
  --pv-radius-pill:     var(--km-radius-pill);

  /* ── Sombras, rings y degradados. ──────────────────────────────────────── */
  --pv-shadow-card:        var(--km-shadow-panel);
  --pv-shadow-rest:        var(--km-shadow-card);
  --pv-shadow-hover-soft:  0 2px 8px rgba(0, 159, 227, 0.08);
  --pv-shadow-hover:       0 2px 8px rgba(0, 159, 227, 0.15);
  --pv-shadow-lift:        0 4px 12px rgba(0, 159, 227, 0.15);
  --pv-shadow-glow:        0 4px 14px rgba(0, 159, 227, 0.20);
  --pv-ring-focus:         var(--km-ring-focus);
  --pv-ring-focus-sm:      0 0 0 2px rgba(0, 159, 227, 0.12);
  --pv-ring-active:        0 0 0 2px rgba(0, 159, 227, 0.12);
  --pv-grad-summary:       var(--km-grad-total);
  --pv-grad-accent:        var(--km-grad-accent-bar);
  --pv-grad-prolong-on:    linear-gradient(180deg, var(--km-blue), var(--km-glass));
}

/* Acento naranja: no existe un token base de "call-to-action" naranja, así que
   se expone aparte sobre las clases reales de las CTA de añadir al carrito.
   (Los botones "Guardar" de administración usan .btn-primary y se muestran en
   AZUL Kömmerling — el azul es el primario y el naranja se reserva para la CTA
   principal de añadir. Ver docs/TEMAS.md.) */
.prop-add {
  background: var(--km-orange) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--km-radius-pill) !important;
  font-weight: var(--km-fw-bold);
  box-shadow: var(--km-shadow-orange-sm);
  transition: var(--km-tx);
}
.prop-add:hover {
  background: var(--km-orange-600) !important;
  border-color: transparent !important;
  color: #fff !important;
  transform: translateY(-1px);
}