/* ──────────────────────────────────────────────────────────────────────────────────────────────────────────
noddatech.css · Identidad de Noddatech para webs y productos · versión 1.0 · octubre de 2026
Uso: (con la carpeta fuentes/ al lado)
Modo: claro u oscuro según el sistema. Para fijarlo: o .
Alcance: todo va con el prefijo --nd- / .nd- para no chocar con el CSS de cada producto. Los estilos base
usan :where(), que no pesa nada: cualquier regla del producto los sustituye sin pelear.
Letra: Sora (licencia libre OFL, ver fuentes/OFL.txt), alojada con la página. Nunca se carga desde Google.
Colores: rojo, ámbar y verde son SOLO para estados (error, aviso, correcto). Nunca como color de marca.
────────────────────────────────────────────────────────────────────────────────────────────────────────── */
@font-face {
font-family: "Sora";
src: url("fuentes/Sora-variable.woff2") format("woff2");
font-weight: 100 800;
font-style: normal;
font-display: swap;
}
:root {
/* Marca */
--nd-ultramar: #1F1FFF; /* símbolo, botones, enlaces · 7,8:1 sobre blanco */
--nd-ultramar-profundo: #1414B8; /* pulsado y visitado · 11,5:1 sobre blanco */
--nd-ultramar-claro: #9C9CFF; /* acento sobre oscuro · 7,4:1 sobre grafito */
--nd-hielo: #E9E9FF; /* fondos suaves y realces */
--nd-grafito: #15171D; /* texto y nombre · 17,9:1 sobre blanco */
--nd-blanco: #FFFFFF;
/* Apoyo */
--nd-pizarra: #5A606B; /* texto secundario · 6,3:1 sobre blanco */
--nd-niebla: #DCDEE5; /* filetes y bordes */
--nd-nube: #F4F5F8; /* fondos de sección */
/* Estados: solo para estados, nunca como color de marca */
--nd-correcto: #137A4B; --nd-correcto-fondo: #E4F4EC; /* 5,4:1 sobre blanco */
--nd-aviso: #9A5800; --nd-aviso-fondo: #FDF0DC; /* 5,6:1 sobre blanco */
--nd-error: #C42420; --nd-error-fondo: #FCE8E7; /* 5,8:1 sobre blanco */
/* Papeles · modo claro */
--nd-fondo: var(--nd-blanco);
--nd-fondo-suave: var(--nd-nube);
--nd-superficie: var(--nd-blanco);
--nd-texto: var(--nd-grafito);
--nd-texto-suave: var(--nd-pizarra);
--nd-linea: var(--nd-niebla);
--nd-acento: var(--nd-ultramar);
--nd-acento-pulsado: var(--nd-ultramar-profundo);
--nd-sobre-acento: var(--nd-blanco);
--nd-realce: var(--nd-hielo);
--nd-foco: var(--nd-ultramar);
--nd-logo-simbolo: var(--nd-ultramar);
--nd-logo-texto: var(--nd-grafito);
--nd-estado-correcto: var(--nd-correcto); --nd-estado-correcto-fondo: var(--nd-correcto-fondo);
--nd-estado-aviso: var(--nd-aviso); --nd-estado-aviso-fondo: var(--nd-aviso-fondo);
--nd-estado-error: var(--nd-error); --nd-estado-error-fondo: var(--nd-error-fondo);
/* Letra */
--nd-letra: "Sora", Arial, "Helvetica Neue", sans-serif;
--nd-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--nd-peso-texto: 400;
--nd-peso-medio: 500;
--nd-peso-titulo: 600;
--nd-peso-fuerte: 700;
/* Tamaños: escala de 1,25 sobre 16 px */
--nd-t-xs: 0.75rem; /* 12 px · notas al pie, el sello */
--nd-t-s: 0.875rem; /* 14 px · etiquetas, tablas */
--nd-t-m: 1rem; /* 16 px · texto */
--nd-t-l: 1.25rem; /* 20 px · entradillas */
--nd-t-xl: 1.5625rem; /* 25 px · títulos de tercer nivel */
--nd-t-2xl: 1.9531rem; /* 31 px · títulos de segundo nivel */
--nd-t-3xl: 2.4414rem; /* 39 px · títulos de página */
--nd-t-4xl: 3.0518rem; /* 49 px · portadas */
--nd-t-5xl: 3.8147rem; /* 61 px · cabeceras grandes */
--nd-interlineado: 1.6;
--nd-interlineado-titulo: 1.1;
--nd-espaciado-titulo: -0.025em;
/* Espacio: base de 4 px */
--nd-e-1: 4px; --nd-e-2: 8px; --nd-e-3: 12px; --nd-e-4: 16px; --nd-e-5: 24px;
--nd-e-6: 32px; --nd-e-7: 48px; --nd-e-8: 64px; --nd-e-9: 96px; --nd-e-10: 128px;
/* Formas */
--nd-radio-s: 6px;
--nd-radio-m: 10px;
--nd-radio-l: 16px;
--nd-radio-total: 999px;
--nd-sombra: 0 1px 2px rgb(21 23 29 / 0.06), 0 10px 28px -14px rgb(21 23 29 / 0.22);
--nd-ancho-texto: 68ch;
--nd-ancho-pagina: 1200px;
/* Movimiento */
--nd-curva: cubic-bezier(0.2, 0, 0, 1);
--nd-rapido: 140ms;
--nd-normal: 240ms;
color-scheme: light;
}
/* Papeles · modo oscuro (automático con el sistema, salvo que se fije data-tema="claro") */
@media (prefers-color-scheme: dark) {
:root:not([data-tema="claro"]) {
--nd-fondo: #15171D;
--nd-fondo-suave: #1A1C23;
--nd-superficie: #1E2129;
--nd-texto: #F2F3F7;
--nd-texto-suave: #A7ACB8;
--nd-linea: #2D313C;
--nd-acento: var(--nd-ultramar-claro);
--nd-acento-pulsado: #C4C4FF;
--nd-sobre-acento: #15171D;
--nd-realce: #23264A;
--nd-foco: var(--nd-ultramar-claro);
--nd-logo-simbolo: var(--nd-ultramar-claro);
--nd-logo-texto: #FFFFFF;
--nd-estado-correcto: #4CC38A; --nd-estado-correcto-fondo: #10291E;
--nd-estado-aviso: #F2B55B; --nd-estado-aviso-fondo: #2E2210;
--nd-estado-error: #FF8A80; --nd-estado-error-fondo: #331716;
color-scheme: dark;
}
}
:root[data-tema="oscuro"] {
--nd-fondo: #15171D;
--nd-fondo-suave: #1A1C23;
--nd-superficie: #1E2129;
--nd-texto: #F2F3F7;
--nd-texto-suave: #A7ACB8;
--nd-linea: #2D313C;
--nd-acento: var(--nd-ultramar-claro);
--nd-acento-pulsado: #C4C4FF;
--nd-sobre-acento: #15171D;
--nd-realce: #23264A;
--nd-foco: var(--nd-ultramar-claro);
--nd-logo-simbolo: var(--nd-ultramar-claro);
--nd-logo-texto: #FFFFFF;
--nd-estado-correcto: #4CC38A; --nd-estado-correcto-fondo: #10291E;
--nd-estado-aviso: #F2B55B; --nd-estado-aviso-fondo: #2E2210;
--nd-estado-error: #FF8A80; --nd-estado-error-fondo: #331716;
color-scheme: dark;
}
/* ── Base (peso cero: el producto manda) ─────────────────────────────────────────────────────────────── */
:where(body) {
margin: 0;
background: var(--nd-fondo);
color: var(--nd-texto);
font-family: var(--nd-letra);
font-size: var(--nd-t-m);
font-weight: var(--nd-peso-texto);
line-height: var(--nd-interlineado);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
:where(h1, h2, h3, h4) {
margin: 0 0 0.5em;
font-weight: var(--nd-peso-titulo);
line-height: var(--nd-interlineado-titulo);
letter-spacing: var(--nd-espaciado-titulo);
text-wrap: balance;
}
:where(h1) { font-size: var(--nd-t-3xl); }
:where(h2) { font-size: var(--nd-t-2xl); }
:where(h3) { font-size: var(--nd-t-xl); }
:where(h4) { font-size: var(--nd-t-l); letter-spacing: -0.01em; }
:where(p, li) { max-width: var(--nd-ancho-texto); }
:where(small) { font-size: var(--nd-t-s); color: var(--nd-texto-suave); }
:where(a) { color: var(--nd-acento); text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
:where(a:hover) { color: var(--nd-acento-pulsado); }
:where(code, kbd, pre, samp) { font-family: var(--nd-mono); font-size: 0.92em; }
:where(hr) { border: 0; border-top: 1px solid var(--nd-linea); margin: var(--nd-e-6) 0; }
:where(table) { border-collapse: collapse; font-variant-numeric: tabular-nums; }
:where(th, td) { text-align: left; padding: var(--nd-e-2) var(--nd-e-3); border-bottom: 1px solid var(--nd-linea); }
:where(th) { font-weight: var(--nd-peso-titulo); font-size: var(--nd-t-s); color: var(--nd-texto-suave); }
:where(:focus-visible) { outline: 2px solid var(--nd-foco); outline-offset: 2px; }
::selection { background: var(--nd-realce); color: var(--nd-texto); }
/* ── Utilidades ─────────────────────────────────────────────────────────────────────────────────────── */
.nd-cifras { font-variant-numeric: tabular-nums; } /* cifras de ancho fijo: recuentos, tablas */
.nd-entradilla { font-size: var(--nd-t-l); color: var(--nd-texto-suave); line-height: 1.5; }
.nd-titular { font-size: var(--nd-t-5xl); font-weight: var(--nd-peso-titulo); line-height: 1.02; letter-spacing: -0.035em; }
.nd-contenedor { max-width: var(--nd-ancho-pagina); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.nd-solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ── Logotipo en línea (pega el SVG con estas clases y cambia solo con el modo claro/oscuro) ─────────── */
.nd-logo { display: inline-block; height: var(--nd-logo-alto, 32px); width: auto; vertical-align: middle; }
.nd-logo .nd-logo__simbolo { fill: var(--nd-logo-simbolo); }
.nd-logo .nd-logo__texto { fill: var(--nd-logo-texto); }
.nd-logo--una-tinta .nd-logo__simbolo,
.nd-logo--una-tinta .nd-logo__texto { fill: currentColor; }
/* ── Botones ────────────────────────────────────────────────────────────────────────────────────────── */
.nd-boton {
display: inline-flex; align-items: center; justify-content: center; gap: var(--nd-e-2);
min-height: 44px; padding: 0 var(--nd-e-5);
border: 1px solid transparent; border-radius: var(--nd-radio-m);
background: var(--nd-acento); color: var(--nd-sobre-acento);
font: var(--nd-peso-titulo) var(--nd-t-m)/1 var(--nd-letra);
text-decoration: none; cursor: pointer;
transition: background-color var(--nd-rapido) var(--nd-curva), transform var(--nd-rapido) var(--nd-curva);
}
.nd-boton:hover { background: var(--nd-acento-pulsado); color: var(--nd-sobre-acento); }
.nd-boton:active { transform: scale(0.98); }
.nd-boton--secundario { background: transparent; color: var(--nd-texto); border-color: var(--nd-linea); }
.nd-boton--secundario:hover { background: var(--nd-fondo-suave); color: var(--nd-texto); }
.nd-boton--texto { background: transparent; color: var(--nd-acento); padding-inline: var(--nd-e-2); }
.nd-boton--texto:hover { background: var(--nd-realce); color: var(--nd-acento-pulsado); }
.nd-boton:disabled, .nd-boton[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
/* ── Tarjeta, etiqueta y estados ────────────────────────────────────────────────────────────────────── */
.nd-tarjeta { background: var(--nd-superficie); border: 1px solid var(--nd-linea); border-radius: var(--nd-radio-l); padding: var(--nd-e-5); }
.nd-etiqueta {
display: inline-flex; align-items: center; gap: 0.4em; padding: 0.2em 0.65em;
border-radius: var(--nd-radio-total); background: var(--nd-realce); color: var(--nd-texto);
font-size: var(--nd-t-s); font-weight: var(--nd-peso-medio); line-height: 1.4;
}
.nd-estado { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.2em 0.7em; border-radius: var(--nd-radio-total); font-size: var(--nd-t-s); font-weight: var(--nd-peso-titulo); line-height: 1.4; }
.nd-estado::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; }
.nd-estado--correcto { color: var(--nd-estado-correcto); background: var(--nd-estado-correcto-fondo); }
.nd-estado--aviso { color: var(--nd-estado-aviso); background: var(--nd-estado-aviso-fondo); }
.nd-estado--error { color: var(--nd-estado-error); background: var(--nd-estado-error-fondo); }
/* ── El sello para productos de clientes: «Con tecnología de Noddatech» ─────────────────────────────── */
/* Va en una sola tinta, del color del texto del pie del cliente. El logotipo mide lo mismo que el cuerpo
del texto (1em) y nunca baja de 12 px. Ejemplo:
Con tecnología de */
.nd-sello { display: inline-flex; align-items: center; gap: 0.42em; white-space: nowrap; color: inherit; font-size: max(12px, 1em); }
.nd-sello .nd-logo { height: 1em; --nd-logo-alto: 1em; }
/* ── Piloto «en directo»: el nodo encendido ─────────────────────────────────────────────────────────── */
/* Un punto en el color de acento que respira despacio mientras el sistema está en directo. No es una alarma:
nunca se pone rojo ni parpadea deprisa. */
.nd-piloto { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--nd-acento); box-shadow: 0 0 0 0 color-mix(in srgb, var(--nd-acento) 45%, transparent); animation: nd-respira 3.2s ease-in-out infinite; }
@keyframes nd-respira {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nd-acento) 40%, transparent); }
50% { box-shadow: 0 0 0 0.5em color-mix(in srgb, var(--nd-acento) 0%, transparent); }
}
/* El nodo del símbolo se enciende al conectar (para el símbolo en línea: añade .nd-encender al