/* ══════════════════════════════════════════════════════════════════════════
brand.css — capa de identidad compartida por todo nexoagenda.com.ar
──────────────────────────────────────────────────────────────────────────
La web tenía su propia paleta (azul-noche #070B14) mientras la app ya había
pasado al marfil + verde (ver app.json → splash, src/theme/index.ts y
src/components/AnimatedSplash.tsx). Esto es la traducción de esa identidad
a CSS, en UN solo archivo: cada página lo linkea y después sólo define su
layout. Si el marfil o el verde cambian, se cambian acá.
Fuente de verdad de los valores:
marfil #FAECDC → app.json splash.backgroundColor
verde #0E7A50 → marca (la N del ícono)
acento #1FAE7C → theme lightColors.primary
tinta #7F5F35 → AnimatedSplash DOODLE_INK (la textura)
Las capas del fondo, de atrás para adelante:
.nx-bg marfil plano + aurora verde radial (= )
.nx-doodles patrón de doodles tono sobre tono (= )
.nx-veil degradé de marfil que apaga el centro para que el texto respire
.nx-grain grano finito, le saca el plano digital al color
══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');
:root {
/* ── Marfil / superficies ───────────────────────────────────────────── */
--cream: #FAECDC;
--cream-2: #F5E2CC; /* marfil más tostado, para degradés */
--paper: #FFFCF7; /* cards sólidas */
--paper-glass: rgba(255,252,247,.74);/* cards con blur sobre la textura */
--paper-soft: rgba(255,252,247,.55);
/* ── Tinta cálida (el negro puro sobre marfil se ve sucio) ──────────── */
--ink: #221A10; /* 15:1 sobre marfil */
--ink-2: #4A3E2E; /* 8.6:1 — cuerpo de texto */
--muted: #6B5C46; /* 5.4:1 — secundario, AA */
--dim: #7A6950; /* 4.6:1 — el más claro que todavía pasa AA en 13px */
/* ── Verde ──────────────────────────────────────────────────────────── */
--brand: #0E7A50; /* 4.6:1 sobre marfil → el verde que puede ir en TEXTO */
--brand-deep: #0A5C3C;
--accent: #1FAE7C; /* sólo relleno/íconos: 2.5:1, no alcanza para texto */
--accent-soft:#45C79A;
--mint: #DCF1E6;
/* ── Líneas, tintes y sombras (cálidas, no negras) ──────────────────── */
--line: rgba(14,122,80,.18);
--line-soft: rgba(127,95,53,.14);
--tint: rgba(14,122,80,.07);
--tint-strong: rgba(14,122,80,.13);
--shadow-1: 0 2px 10px rgba(94,67,31,.06);
--shadow-2: 0 10px 30px rgba(94,67,31,.10);
--shadow-3: 0 22px 60px rgba(94,67,31,.14);
--glow: 0 10px 30px rgba(14,122,80,.24);
--doodle: #7F5F35;
/* ── Tipografía (las mismas dos familias que la app) ────────────────── */
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
/* ── Radios (theme/index.ts → radius) ───────────────────────────────── */
--r-card: 22px;
--r-btn: 16px;
--r-bubble: 20px;
--r-pill: 9999px;
}
/* ══ Fondo ════════════════════════════════════════════════════════════════
Cuatro capas fijas. Van todas con pointer-events:none y z-index bajo; el
contenido de la página tiene que ir en z-index ≥ 10 (igual que antes). */
.nx-bg,
.nx-doodles,
.nx-veil,
.nx-grain {
position: fixed;
inset: 0;
pointer-events: none;
}
/* Marfil + aurora verde — el eco del de la app */
.nx-bg {
z-index: 0;
background:
radial-gradient(68% 56% at 12% 2%, rgba(31,174,124,.26), transparent 72%),
radial-gradient(62% 56% at 92% 97%, rgba(14,122,80,.20), transparent 72%),
radial-gradient(48% 42% at 62% 46%, rgba(69,199,154,.14), transparent 74%),
var(--cream);
}
/* La textura del splash: doodles tono sobre tono, repetidos */
.nx-doodles {
z-index: 0;
background-image: url('/doodles.svg');
background-repeat: repeat;
background-size: 440px 440px;
opacity: .24;
}
/* Apaga la textura donde va el contenido (mismo truco que el splash) */
.nx-veil {
z-index: 1;
background:
radial-gradient(62% 52% at 50% 30%,
rgba(250,236,220,.94) 0%,
rgba(250,236,220,.62) 44%,
rgba(250,236,220,0) 78%);
}
/* Grano: sobre marfil lee como papel, no como ruido de pantalla */
.nx-grain {
z-index: 2;
opacity: .05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Móvil: menos textura y aurora más contenida (la pantalla es chica y el texto
ocupa casi todo el ancho, así que los doodles competirían con la lectura). */
@media (max-width: 640px) {
.nx-doodles { background-size: 340px 340px; opacity: .15; }
.nx-veil {
background: radial-gradient(90% 60% at 50% 34%,
rgba(250,236,220,.95) 0%, rgba(250,236,220,.70) 50%, rgba(250,236,220,.15) 88%);
}
}
/* El marfil también es el color del navegador (barra de scroll, overscroll) */
html { background: var(--cream); }
::selection { background: rgba(31,174,124,.26); color: var(--ink); }
/* Cadenas largas sin espacios (URLs, scopes de OAuth) empujaban el ancho de la
página: en privacidad.html el scope de Google Calendar hacía que en un
teléfono se pudiera scrollear 60px para el costado. */
code, pre { overflow-wrap: anywhere; }
img, video { max-width: 100%; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--cream-2); }
::-webkit-scrollbar-thumb {
background: rgba(14,122,80,.30);
border: 3px solid var(--cream-2);
border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(14,122,80,.48); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}