/* ============================================================ Colección de Gemas — hoja de estilos Estética: joyería editorial. Serif (Cormorant) para titulares, Inter para el cuerpo. Borgoña profundo + acento dorado sobre marfil. ============================================================ */ :root{ --burg:#6d1a2e; /* borgoña principal, como TINTA (texto, bordes) */ --burg2:#8b2a3d; /* borgoña hover */ --burg-deep:#4a0f1f; /* borgoña oscuro (degradados) */ /* El borgoña cuando es FONDO y no tinta: la barra de arriba, la cabecera de una tabla, un botón macizo. Son dos trabajos distintos y hacían falta dos fichas: en modo oscuro el borgoña se aclara para poder leerse como texto, y usar ese mismo valor de fondo dejaba la barra superior **más clara de noche que de día**. Con dos fichas, cada uso va por su lado. */ --burg-fondo:#6d1a2e; --burg-fondo-2:#8b2a3d; /* el mismo, al pasar el ratón */ --sobre-burg:#ffffff; /* texto encima de un fondo borgoña */ --gold:#c39b4a; /* dorado acento */ --gold-soft:#e7d3a1; /* dorado claro */ --ink:#2a2320; /* texto principal */ --muted:#8a807a; /* texto secundario */ --line:#ece4dc; /* bordes */ --bg:#fcf9f6; /* fondo marfil */ --card:#ffffff; /* tarjetas */ --ok:#1f7a4d; /* verde éxito */ --shadow:0 8px 30px rgba(74,15,31,.07); --shadow-sm:0 2px 10px rgba(74,15,31,.06); --radius:14px; /* --- Fichas con nombre, no colores sueltos (V-04) --------------------- Antes, cada fondo se escribía a mano aquí y otra vez, con otro valor, en el bloque de modo oscuro del final. Cualquier cosa nueva había que parchearla en los dos sitios, y olvidarse de uno no rompía nada: solo quedaba feo de noche, que es peor porque no se nota hasta que alguien lo ve. Desde aquí, una regla dice QUÉ es (`var(--superficie)`), no de qué color va, y claro y oscuro son solo dos juegos de valores. */ /* Superficies, del fondo de la página hacia arriba. */ --superficie:#fefcf9; /* un bloque dentro de una tarjeta */ --superficie-2:#faf5ee; /* el mismo, al pasar el ratón por encima */ --superficie-3:#f9f3ec; /* hueco de foto, barra, placeholder */ --campo:#fffefd; /* el fondo de un input */ --campo-activo:#ffffff; /* ...cuando tiene el foco */ --chip-fondo:#f4eee8; /* la píldora de un chip neutro */ --sobre-color:#ffffff; /* texto encima de borgoña o de dorado */ /* Los cuatro tonos con significado. Panel = área grande; chip = píldora. Son distintos a propósito: un chip necesita más cuerpo para leerse. */ --ok-panel:#f0f7f2; --ok-borde:#cfe7d9; --ok-chip:#e4f5ec; --aviso-panel:#fdf0e2; --aviso-borde:#eeddc2; --aviso-chip:#fdf0e2; --aviso-tinta:#a86a1f; --oro-panel:#faf5ea; --oro-borde:#ecdfc2; --oro-chip:#f8f0dc; --oro-tinta:#8a6a1f; --peligro-panel:#f4e2e2; --peligro-tinta:#a23b3b; --barra:#f4eee7; /* el carril de una barra de progreso */ --flash-fondo:#fff7e8; /* el aviso que sale arriba tras hacer algo */ --flash-borde:var(--gold-soft); } *{ box-sizing:border-box; } /* `hidden` tiene que ganar SIEMPRE. El atributo del HTML solo aplica `display:none` desde la hoja del navegador, que pierde contra cualquier clase con su propio `display`. Sin esta línea, un `