/* ============================================ App D'Origen — Tema unificado Paleta corporativa + tipografía + variables ============================================ */ :root { /* Verdes D'Origen El verde de la marca (#0b542b) es casi negro: 6,6% de luminosidad, 9,1:1 contra el blanco. Sobre una franja entera se leía como "oscuro" y no como "verde", y en un botón pesa como una losa. Sube a #127a3e: sigue siendo un verde serio de alimentación, pero está VIVO — y aún da 5,4:1 con texto blanco encima, holgado sobre el mínimo de 4,5. El de la marca no se pierde: --primary-marca se queda para el logotipo y para donde haga falta el color exacto de D'Origen. */ --primary: #127a3e; --primary-light: #158a46; --primary-dark: #0e6333; --primary-marca: #0b542b; --primary-soft: rgba(18, 122, 62, 0.08); --primary-line: rgba(18, 122, 62, 0.18); --accent: #4fa96a; --accent-soft: rgba(79, 169, 106, 0.12); /* Neutros — SIN VERDE Los neutros llevaban verde dentro: fondo #f5f7f5, bordes #d8e5dc, texto gris verdoso. La idea era "que todo respire la marca", y el efecto era el contrario: teñía la pantalla entera de un gris-verde sucio, el blanco de las tarjetas no destacaba sobre él y el verde de verdad —el del logo, el del botón— se perdía entre tanto pariente cercano. Ahora los neutros son neutros y el fondo es BLANCO. El verde aparece solo donde significa algo, y por eso ahí se ve. Las tarjetas ya no necesitan contrastar contra un fondo de color: las separa su sombra. Y los BORDES se apagan mucho. Los de antes se veían en todo —cada tarjeta, cada input, cada celda— y una pantalla llena de líneas parece una hoja de cálculo. Lo que separa ahora es el fondo y una sombra mínima; el borde queda para cuando de verdad hace falta un límite. */ /* Casi blanco, pero no blanco del todo: media app separa las tarjetas por el contraste entre --surface (blanco) y este fondo. Con los dos en blanco puro, tarjetas, tablas y franjas de estado se disolverían. Este #fafbfc no tiñe nada —es neutro— y deja que el blanco siga destacando. */ --bg: #fafbfc; --surface: #ffffff; --surface-alt: #f6f7f8; --border: #e6e8ea; --border-soft: #eff1f3; --border-fuerte: #d7dbdf; /* solo donde hace falta un límite de verdad */ /* Texto */ --text: #12181c; --text-muted: #5c6670; /* #8a939c daba 3,1:1 sobre blanco y el mínimo legible es 4,5. Se usa en placeholders y metadatos, o sea texto pequeño: ahí es donde más se nota. */ --text-soft: #737d87; /* ── Escala tipográfica ────────────────────────────────────── No existía: casi todo el texto estaba entre 12 y 14px, así que nada destacaba sobre nada. Sin diferencia de tamaño no hay jerarquía, y sin jerarquía el ojo no sabe dónde mirar primero — que es la mitad de la sensación de "esto está bien hecho". */ --t-xs: 11px; /* etiquetas de tabla, metadatos */ --t-sm: 12.5px; /* texto secundario */ --t-base: 14px; /* cuerpo */ --t-md: 15.5px; /* texto destacado dentro de una tarjeta */ --t-lg: 18px; /* título de tarjeta o de bloque */ --t-xl: 22px; /* título de sección */ --t-2xl: 28px; /* título de pantalla */ --t-3xl: 36px; /* la cifra que manda en un panel */ /* ── Escala de espaciado ───────────────────────────────────── Tampoco existía, y por eso cada pantalla usaba sus propios números. Las tarjetas iban a 14px de aire por dentro cuando lo que se ve caro va a 24. */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; /* Estados */ --danger: #b91c1c; --danger-soft: rgba(185, 28, 28, 0.08); --warning: #B8862F; --warning-soft: rgba(184, 134, 47, 0.08); --success: #16803d; --success-soft: rgba(22, 128, 61, 0.08); /* Layout Radios algo mayores y, sobre todo, SOMBRAS de verdad. Antes la sombra era tan tenue (0.04) que no separaba nada del fondo, así que todo tenía que llevar borde. Con una sombra que sí se ve, el borde sobra: es el cambio que más acerca la app a lo que se ve moderno. */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --shadow-xs: 0 1px 2px rgba(13, 31, 20, 0.04); --shadow: 0 1px 2px rgba(13, 31, 20, 0.04), 0 2px 8px -2px rgba(13, 31, 20, 0.07); --shadow-md: 0 2px 4px rgba(13, 31, 20, 0.04), 0 8px 20px -6px rgba(13, 31, 20, 0.10); --shadow-lg: 0 12px 32px -8px rgba(13, 31, 20, 0.16); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; /* El body no scrollea de lado JAMÁS. Las páginas fuera del armazón (login, mi-ruta, la entrada pública) no pasan por .main y necesitan esta red igual que las demás. Dos declaraciones a propósito: `clip` es lo correcto pero es CSS reciente — un Safari que no lo entienda se queda con `hidden`. */ overflow-x: hidden; overflow-x: clip; /* Y el REBOTE elástico de iOS: aunque no haya nada que desplazar, un arrastre lateral "tiraba" de la página entera y asomaban huecos blancos por los bordes. Esto lo apaga; el overflow no puede. */ overscroll-behavior-x: none; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* Utilidad: ocultar */ .hidden { display: none !important; } /* Spinner común */ .spinner { width: 20px; height: 20px; border: 2.5px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ══════════════════════════════════════════════════════════ CUSTOM SELECT — reemplaza el nativo; dentro de un grid-item hereda el stretch por defecto de CSS Grid y ocupa toda la celda — así el wrapper reproduce el ancho que tenía el