/* NorthClick · Oleada 1 · Átomos. CSS sin dependencias. Prefijo .nc-
   Basado en los pasos aprobados: color, tipografía, forma (E0–E3, sombras duras), movimiento (Levantar/Hundir).
   Modo oscuro: poner data-theme="dark" en el contenedor. Estados de demostración: .is-hover .is-active .is-focus */
@font-face{font-family:"Bricolage Grotesque";src:url("../assets/fuentes/bricolage-grotesque-normal-latin.woff2?v=11f6ab2d0f") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Figtree";src:url("../assets/fuentes/figtree-normal-latin.woff2?v=57fd1acf8d") format("woff2");font-weight:300 900;font-display:swap}
:root{
  /* primitivos (Paso 4) */
  --nc-color-frio-900:#0B1A4F;--nc-color-frio-50:#EEF4F9;--nc-color-frio-100:#DDEAF2;--nc-color-frio-200:#BAD5E5;--nc-color-frio-300:#98C0D8;--nc-color-frio-600:#406694;--nc-color-frio-700:#25497D;--nc-color-frio-800:#173166;
  --nc-color-plumon-100:#FDD5D7;--nc-color-plumon-300:#EF7880;--nc-color-plumon-600:#D42F42;--nc-color-plumon-700:#B3202F;--nc-color-ambar-100:#F8E7CC;--nc-color-ambar-500:#D9962B;
  --nc-color-verde-100:#D2E7DB;--nc-color-verde-700:#1F6B43;--nc-color-papel-100:#F6F2EA;--nc-color-nieve:#FFFFFF;
  /* semánticos (modo claro) */
  --nc-fondo-superficie:var(--nc-color-nieve);--nc-texto-principal:var(--nc-color-frio-900);--nc-texto-secundario:var(--nc-color-frio-700);--nc-trazo:var(--nc-color-frio-900);--nc-sombra:var(--nc-color-frio-900);
  --nc-foco:#976618;--nc-campo-fondo:var(--nc-color-nieve);--nc-campo-placeholder:var(--nc-color-frio-600);--nc-texto-error:var(--nc-color-plumon-700);--nc-texto-exito:var(--nc-color-verde-700);
  --nc-deshabilitado-fondo:var(--nc-color-frio-50);--nc-deshabilitado-texto:var(--nc-color-frio-600);--nc-deshabilitado-trazo:var(--nc-color-frio-300);
  /* forma y movimiento (Pasos 6 y 7) */
  --nc-trazo-normal:2px;--nc-radio-campo:10px;--nc-radio-pildora:999px;
  --nc-sombra-xs:1px 2px 0 var(--nc-sombra);--nc-sombra-sm:2px 3px 0 var(--nc-sombra);--nc-sombra-md:4px 5px 0 var(--nc-sombra);--nc-sombra-lg:7px 8px 0 var(--nc-sombra);
  --nc-curva-salida:cubic-bezier(.16,1,.3,1);--nc-curva-rebote:cubic-bezier(.34,1.56,.64,1);--nc-t-hover:220ms;--nc-t-foco:120ms;
}
[data-theme="dark"]{
  --nc-fondo-superficie:var(--nc-color-frio-800);--nc-texto-principal:var(--nc-color-nieve);--nc-texto-secundario:var(--nc-color-frio-200);--nc-trazo:var(--nc-color-frio-300);--nc-sombra:var(--nc-color-frio-900);
  --nc-foco:var(--nc-color-frio-300);--nc-campo-fondo:var(--nc-color-frio-900);--nc-campo-placeholder:var(--nc-color-frio-300);--nc-texto-error:var(--nc-color-plumon-300);--nc-texto-exito:#85B899;
  --nc-deshabilitado-fondo:var(--nc-color-frio-700);--nc-deshabilitado-texto:var(--nc-color-frio-200);--nc-deshabilitado-trazo:var(--nc-color-frio-600);
}
.nc-root{font-family:"Figtree",system-ui,sans-serif;color:var(--nc-texto-principal);background:var(--nc-fondo-superficie)}
.nc-root *,.nc-root *::before,.nc-root *::after{box-sizing:border-box}
:where(.nc-root) :focus-visible,.nc-focus{outline:3px solid var(--nc-foco);outline-offset:3px}
/* con foco, el anillo sustituye a la sombra dura: evita el doble contorno */
.nc-btn:focus-visible,.nc-btn.nc-focus{box-shadow:none}
/* ---------- Icon ---------- */
.nc-icon{display:inline-block;width:1.25em;height:1.25em;flex:none;vertical-align:-.2em}
.nc-icon--16{width:16px;height:16px}.nc-icon--20{width:20px;height:20px}.nc-icon--24{width:24px;height:24px}.nc-icon--32{width:32px;height:32px}.nc-icon--48{width:48px;height:48px}
/* ---------- Button ---------- */
.nc-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 24px;font:600 16px/1.25 "Figtree",sans-serif;
  color:var(--nc-texto-principal);background:var(--nc-color-nieve);border:var(--nc-trazo-normal) solid var(--nc-trazo);border-radius:var(--nc-radio-pildora);box-shadow:var(--nc-sombra-sm);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform var(--nc-t-hover) var(--nc-curva-salida),box-shadow var(--nc-t-hover) var(--nc-curva-salida),background-color 120ms}
.nc-btn--sm{height:36px;padding:0 16px;font-size:14px;gap:8px}.nc-btn--lg{height:58px;padding:0 32px;gap:12px}.nc-btn--block{display:flex;width:100%}
.nc-btn--primary{background:var(--nc-color-plumon-600);color:var(--nc-color-nieve)}                       /* solo sobre superficies neutras (E0 y fondo de sección) */
.nc-btn--secondary{background:var(--nc-color-nieve);color:var(--nc-color-frio-900)}
.nc-btn--tinta{background:var(--nc-color-frio-900);color:var(--nc-color-nieve);border-color:var(--nc-color-frio-900)}
[data-theme="dark"] .nc-btn--primary{background:var(--nc-color-plumon-300);color:var(--nc-color-frio-900)}
[data-theme="dark"] .nc-btn--tinta{background:var(--nc-color-frio-300);color:var(--nc-color-frio-900);border-color:var(--nc-color-frio-300)}
[data-theme="dark"] .nc-btn--secondary{background:var(--nc-color-frio-700);color:var(--nc-color-nieve)}
.nc-btn--ghost{background:transparent;color:var(--nc-texto-principal);border-color:transparent;box-shadow:none;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;padding:0 12px}
.nc-btn:hover,.nc-btn.is-hover{transform:translateY(-2px);box-shadow:var(--nc-sombra-md)}                         /* Levantar: sube 2 px y la sombra sube un nivel */
.nc-btn:active,.nc-btn.is-active{transform:translate(2px,3px);box-shadow:none;transition-duration:var(--nc-t-foco)} /* Hundir */
.nc-btn--primary:hover,.nc-btn--primary.is-hover{background:var(--nc-color-plumon-700)}
[data-theme="dark"] .nc-btn--primary:hover,[data-theme="dark"] .nc-btn--primary.is-hover{background:#F8A8AB}
.nc-btn--ghost:hover,.nc-btn--ghost.is-hover{transform:none;box-shadow:none;background:var(--nc-color-plumon-100);color:var(--nc-color-frio-900)}
.nc-btn--ghost:active,.nc-btn--ghost.is-active{transform:none}
.nc-btn:disabled,.nc-btn[aria-disabled="true"]{cursor:not-allowed;transform:none;box-shadow:none;background:var(--nc-deshabilitado-fondo);color:var(--nc-deshabilitado-texto);border-color:var(--nc-deshabilitado-trazo);text-decoration:none}
.nc-btn[aria-busy="true"]{cursor:progress;pointer-events:none}
.nc-btn[aria-busy="true"]::after{content:"";width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:nc-spin 800ms linear infinite}
@keyframes nc-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.nc-btn[aria-busy="true"]::after{animation:none;border-right-color:currentColor}.nc-btn,.nc-check__box,.nc-switch__thumb{transition:none}}
/* ---------- IconButton ---------- */
.nc-iconbtn{width:46px;padding:0}.nc-iconbtn.nc-btn--sm{width:36px;padding:0}.nc-iconbtn.nc-btn--lg{width:58px;padding:0}
/* ---------- Badge ---------- */
.nc-badge{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;font:600 12px/1.3 "Figtree",sans-serif;color:var(--nc-color-frio-900);background:var(--nc-color-papel-100);border:var(--nc-trazo-normal) solid var(--nc-color-frio-900);border-radius:var(--nc-radio-pildora);white-space:nowrap}
.nc-badge .nc-icon{width:14px;height:14px}
.nc-badge--info{background:var(--nc-color-frio-100)}.nc-badge--ok{background:var(--nc-color-verde-100)}.nc-badge--warn{background:var(--nc-color-ambar-100)}.nc-badge--danger{background:var(--nc-color-plumon-100)}
/* ---------- Eyebrow ---------- */
.nc-eyebrow{font:600 12px/1.3 "Bricolage Grotesque",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--nc-color-plumon-700)}
[data-theme="dark"] .nc-eyebrow{color:var(--nc-color-plumon-300)}
/* ---------- Campo (Input / Textarea) ---------- */
.nc-field{display:flex;flex-direction:column;gap:8px;max-width:420px}
.nc-field__label{display:flex;justify-content:space-between;gap:8px;font:600 14px/1.25 "Figtree",sans-serif;color:var(--nc-texto-principal)}
.nc-field__opt{font-weight:400;color:var(--nc-texto-secundario)}
.nc-field__msg{display:flex;align-items:flex-start;gap:6px;font:400 14px/1.5 "Figtree",sans-serif;color:var(--nc-texto-secundario)}
.nc-field__msg--error{color:var(--nc-texto-error);font-weight:600}.nc-field__msg--ok{color:var(--nc-texto-exito);font-weight:600}
.nc-input{width:100%;height:50px;padding:0 16px;font:400 16px/1.6 "Figtree",sans-serif;color:var(--nc-texto-principal);background:var(--nc-campo-fondo);border:var(--nc-trazo-normal) solid var(--nc-trazo);border-radius:var(--nc-radio-campo);box-shadow:none;
  transition:box-shadow var(--nc-t-hover) var(--nc-curva-salida),transform var(--nc-t-hover) var(--nc-curva-salida)}
textarea.nc-input{height:auto;min-height:120px;padding:12px 16px;resize:vertical}
.nc-input::placeholder{color:var(--nc-campo-placeholder);opacity:1}
.nc-input:hover,.nc-input.is-hover{box-shadow:var(--nc-sombra-xs)}
.nc-input:focus,.nc-input.is-focus{outline:3px solid var(--nc-foco);outline-offset:3px;box-shadow:none}
.nc-input[aria-invalid="true"]{border-color:var(--nc-texto-error);box-shadow:var(--nc-sombra-sm)}
.nc-input[data-valid="true"]{border-color:var(--nc-texto-exito)}
.nc-input:disabled{cursor:not-allowed;background:var(--nc-deshabilitado-fondo);color:var(--nc-deshabilitado-texto);border-color:var(--nc-deshabilitado-trazo);box-shadow:none}
/* ---------- Checkbox y Radio (input nativo oculto, caja dibujada) ---------- */
.nc-check{display:inline-flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;cursor:pointer;font:400 16px/1.5 "Figtree",sans-serif;color:var(--nc-texto-principal)}
.nc-check input{position:absolute;opacity:0;width:24px;height:24px;margin:0}
.nc-check__box{position:relative;flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;background:var(--nc-campo-fondo);border:var(--nc-trazo-normal) solid var(--nc-trazo);border-radius:7px;box-shadow:var(--nc-sombra-xs);color:var(--nc-color-nieve);transition:transform 220ms var(--nc-curva-rebote),background-color 120ms}
.nc-check--radio .nc-check__box{border-radius:50%}
.nc-check__box svg{width:16px;height:16px;opacity:0;transform:scale(.4)}
.nc-check--radio .nc-check__box::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--nc-color-nieve);transform:scale(0);transition:transform 220ms var(--nc-curva-rebote)}
.nc-check input:checked + .nc-check__box{background:var(--nc-color-frio-900);border-color:var(--nc-color-frio-900)}
[data-theme="dark"] .nc-check input:checked + .nc-check__box{background:var(--nc-color-frio-300);border-color:var(--nc-color-frio-300);color:var(--nc-color-frio-900)}
[data-theme="dark"] .nc-check--radio input:checked + .nc-check__box::after{background:var(--nc-color-frio-900)}
.nc-check input:checked + .nc-check__box svg{opacity:1;transform:none;transition:all 220ms var(--nc-curva-rebote)}
.nc-check--radio input:checked + .nc-check__box::after{transform:scale(1)}
.nc-check:hover .nc-check__box{box-shadow:var(--nc-sombra-sm)}
.nc-check:active .nc-check__box{transform:scale(.92)}
.nc-check input:focus-visible + .nc-check__box,.nc-check.is-focus .nc-check__box{outline:3px solid var(--nc-foco);outline-offset:3px;box-shadow:none}
.nc-check input[aria-invalid="true"] + .nc-check__box{border-color:var(--nc-texto-error)}
.nc-check input:disabled + .nc-check__box{background:var(--nc-deshabilitado-fondo);border-color:var(--nc-deshabilitado-trazo);box-shadow:none}
.nc-check:has(input:disabled){cursor:not-allowed;color:var(--nc-deshabilitado-texto)}
.nc-check__desc{display:block;font-size:14px;color:var(--nc-texto-secundario)}
/* ---------- Switch (checkbox con role="switch") ---------- */
.nc-switch{display:inline-flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font:600 14px/1.25 "Figtree",sans-serif;color:var(--nc-texto-principal)}
.nc-switch input{position:absolute;opacity:0;width:52px;height:30px;margin:0}
.nc-switch__track{position:relative;flex:none;width:52px;height:30px;background:var(--nc-campo-fondo);border:var(--nc-trazo-normal) solid var(--nc-trazo);border-radius:var(--nc-radio-pildora);box-shadow:var(--nc-sombra-xs);transition:background-color 120ms}
.nc-switch__thumb{position:absolute;top:2px;left:2px;display:grid;place-items:center;width:22px;height:22px;background:var(--nc-color-nieve);border:var(--nc-trazo-normal) solid var(--nc-color-frio-900);border-radius:50%;color:var(--nc-color-verde-700);transition:transform 220ms var(--nc-curva-rebote)}
.nc-switch__thumb svg{width:12px;height:12px;opacity:0}
.nc-switch input:checked + .nc-switch__track{background:var(--nc-color-verde-700);border-color:var(--nc-color-frio-900)}
[data-theme="dark"] .nc-switch input:checked + .nc-switch__track{background:#85B899}
.nc-switch input:checked + .nc-switch__track .nc-switch__thumb{transform:translateX(22px)}
.nc-switch input:checked + .nc-switch__track .nc-switch__thumb svg{opacity:1}
.nc-switch input:focus-visible + .nc-switch__track,.nc-switch.is-focus .nc-switch__track{outline:3px solid var(--nc-foco);outline-offset:3px;box-shadow:none}
.nc-switch input:disabled + .nc-switch__track{background:var(--nc-deshabilitado-fondo);border-color:var(--nc-deshabilitado-trazo);box-shadow:none}
.nc-switch input:disabled + .nc-switch__track .nc-switch__thumb{border-color:var(--nc-deshabilitado-trazo);color:var(--nc-deshabilitado-texto)}
.nc-switch:has(input:disabled){cursor:not-allowed;color:var(--nc-deshabilitado-texto)}
