/* Portal B2B lejan™ — sistema de diseño "Premium editorial". Lienzo crema cálido, verde profundo de marca + terracota de acento, display serif (Fraunces) sobre cuerpo Inter, tablas silenciosas y layout contenido. Rediseño 2026-08 (ver tag v1-paridad-lejan para el estado de paridad con lejan). */ :root { /* ── Rediseño "Modernist" (handoff 2026-08): Archivo, acento ROJO único, radio 0 en todo, reglas divisorias fuertes, fondo gris claro, tinta casi negra. Se conservan los nombres de token (--blue*, --accent*, --r…) para que las 100+ reglas existentes tomen los valores nuevos sin reescribirse. */ /* ── Marca configurable (tokens de /api/portal/branding, ver js/branding.js) ── Cada token llega como variable --brand-* en el style inline de ; aquí solo se lee con var(--token, ). SIN tokens el valor por defecto es el de siempre, así que el portal de MITO PROJECTS no cambia ni un píxel. */ --ink:var(--brand-ink,#201e1d); --ink-2:#605d5d; --ink-3:#7d7979; --paper:var(--brand-paper,#f3f2f2); --surface:var(--brand-surface,#eae9e9); /* --line se queda como literal A PROPÓSITO: son 69 hilos de 1px casi invisibles donde la temperatura del gris no se nota, y abrirlo a un token invita a ponerlos en rojo, lo que dejaría ilegible la retícula de GESTIÓN (/manage carga este mismo app.css). */ --card:var(--brand-card,#f8f4f4); --line:#d3cfcf; --gutter:clamp(1.25rem, 5vw, 4rem); --maxw:1240px; /* Ancho AMPLIO para superficies de rejilla (catálogo): casi a sangre en pantallas grandes, con solo --gutter de canal lateral. Cap alto para no volverse absurdo en monitores 4K. Las páginas de LECTURA siguen usando --maxw (1240). */ --maxw-wide:2400px; /* ══ SISTEMA DE ANCHOS DEL PORTAL ═══════════════════════════════════════════ Hasta aquí había UN ancho (--maxw, 1240) y dos fugas sueltas (catálogo y portada). Con eso, en un monitor de 2560 la tabla de Pedidos se leía en una franja central con 660 px de desierto a cada lado, y en uno de 3440, con 1100. El ancho no es una propiedad de cada pantalla: es una propiedad de lo que la pantalla ENSEÑA. Tres familias, tres topes, y cada vista se adscribe a una — nunca una excepción suelta con su número a mano. 1) LECTURA Y FORMULARIO (--w-read, 1240): perfil, empresa, contacto, alta de cliente, pago. Una línea de texto de 2000 px no se lee y un formulario estirado obliga a barrer la cabeza de un lado a otro para emparejar rótulo y campo. Aquí ANCHO NO ES MEJOR: se queda como está. 2) REJILLA DE DATOS (--w-grid, 2000): pedidos, albaranes, facturas, SAT, clientes, solicitudes, selecciones, análisis, estadísticas, previsión, carritos, tableros y TRAMITACIÓN. Son tablas y cuadrículas de 8-12 columnas: el ancho es literalmente información que hoy no se ve. Se para en 2000 porque un renglón de tabla más largo que eso ya no se sigue con la vista: pegar la tabla al canto es tan malo como encajonarla. La tramitación empezó en la familia 1 y cambió de sitio a propósito: desde que cada artículo del pedido se corrige con SU matriz de tallas entera, lo que se pinta ya no es un formulario de seis campos, sino una cuadrícula de cantidades por talla junto al resumen. A 2000 px vivía en una banda central con medio monitor en blanco a los lados y el campo «Entregas» partido en ocho renglones. Lo que sí sigue siendo lectura dentro de ella (las notas, la dirección) se frena por dentro, en su propia regla. 3) EDITORIAL (--w-bleed, 2400): portada, lookbook, catálogo y ficha de producto. Mandan la imagen y el ritmo, no el renglón, así que van casi a sangre y solo se frenan para que un 4K no pinte una fila de 30 prendas. El canal lateral NUNCA baja del margen del cromo (--rail-min, el mismo clamp de #chrome-nav): así el contenido de cualquier familia arranca a plomo con el logo, y en móvil las tres se comportan igual. */ --rail-min:clamp(1rem, 4vw, 2.4rem); --w-read:var(--maxw); --w-grid:2000px; --w-bleed:var(--maxw-wide); /* El 100 % de estas dos se resuelve contra el contenedor donde se USAN (sustitución diferida de las custom properties): por eso valen como margen fluido y no hay que repetir la media query en cada familia. */ --rail-grid:max(var(--rail-min), calc((100% - var(--w-grid)) / 2)); --rail-x:max(var(--rail-min), calc((100% - var(--w-bleed)) / 2)); /* Medida de LECTURA dentro de una superficie ancha: cuando lo que se pinta es una fila de texto (el Listado del catálogo) el ancho no puede ser el del raíl, porque un renglón de 2400px no se lee. 96rem es el valor que ya fijaba el informe de marca. */ --read-w:96rem; /* ── CONTROLES DE FORMULARIO (desplegable · fecha · texto · grupo de botones) ── Un único alto y un único filete para los cuatro, para que una fila mezclada (Origen + Fecha de inicio + Fecha de fin + «Últimos 12 meses») quede a plomo. Antes no lo estaba: el envoltorio .tb-select medía 43px y los botones de .tb-seg 39px, y esos 4px de escalón son la mitad de la sensación de «crudo» que se ve en Análisis y en Estadísticas. */ --ctl-h:2.6rem; --ctl-pad-x:.72rem; --ctl-bg:#fff; --ctl-line:var(--line-control); /* --muted a #6a6666: el #7d7979 original daba 3,85:1 sobre --paper (#f3f2f2), por debajo de AA. #6a6666 llega a ~5,1:1 sin dejar de leerse como "texto secundario" (oscurecido sutil, misma temperatura). */ --muted:#6a6666; --muted-2:#9b9797; --line-control:#bab6b6; /* Texto de AYUDA (hints, crumbs, labels de simulador): --hint sigue un punto más oscuro (~5,8:1) que --muted para las piezas más pequeñas. */ --hint:#5f5b5b; /* --blue* = ahora el ROJO de marca (acento único). Rojo a tamaño de párrafo usa --accent-deep (#c94b39 ≈ accent-700), no el base, por contraste. */ --blue:#ec3013; --blue-deep:#dd2b0f; --blue-soft:#ffe0d9; /* Rojo para TEXTO PEQUENO (pestanas activas, recuentos, lookups): #b8230c da >=4,5:1 sobre --paper; --blue-deep se queda para fondos y texto grande (D-M7). */ --blue-text:#b8230c; /* Rojo para texto pequeño SOBRE SU PROPIO TINTE (--blue-soft: píldora de unidades, tag de panel). --blue-deep (#dd2b0f) es un oscurecido fijo del 10 % que sobre #ffe0d9 se queda en 3,8:1; #ae1800 da 5,8:1. branding.js lo deriva midiendo contra el tinte cuando la marca tiene otro color (una marca negra sigue dando negro). */ --blue-soft-text:#ae1800; --accent:#e15b47; --accent-deep:#ae1800; --accent-soft:#fff2ef; --ok:#1f7a45; --low:#b07d18; --out:#ec3013; --r:0px; --r-sm:0px; /* Filete de CAPÍTULO (los 2px que abren cada bloque: cabecera de tabla, KPI, precio, resumen del pedido…; NO los hilos de --line): color y grosor de marca. Sin tokens resuelve a «2px solid var(--ink)», que es exactamente lo de hoy. Los sitios cuyo filete iba en gris (--line / --line-control) conservan ese gris como respaldo. */ --rule:var(--brand-rule,var(--ink)); --rule-w:var(--brand-rule-w,2px); --shadow:0 1px 2px color-mix(in srgb,#2d2b2b 14%,transparent); --shadow-card:0 3px 10px color-mix(in srgb,#2d2b2b 16%,transparent); --ease:cubic-bezier(.16,1,.3,1); --header-h:66px; /* Cabecera NEGRA modernist con tinta clara. --header-bg/--header-ink son tokens de marca: branding.js los pisa en el style inline de cuando la instancia los configura. --header-ink-2 y --header-veil (velos, filetes y focos de la cabecera) salen de la tinta, para que sigan viéndose si la cabecera pasa a ser clara. */ --header-bg:#201e1d; --header-ink:#f3f2f2; --header-ink-2:color-mix(in srgb, var(--header-ink) 62%, transparent); --header-veil:#fff; /* Titulares: la familia de display si la instancia la configura (fontFamilyDisplay), si no la de texto (fontFamily) y si no Archivo: sin tokens, exactamente lo de siempre. */ --display:var(--brand-display-font,var(--brand-font,"Archivo")), system-ui, -apple-system, sans-serif; } * { box-sizing:border-box; } /* Barra de scroll (Windows/Firefox) en los grises del sistema: el #c9bfab era el beige de la paleta crema anterior y cualquier instancia lo heredaba aunque su papel fuera blanco. */ html { scrollbar-color:var(--line-control) var(--surface); } body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font:15px/1.55 var(--brand-font,"Archivo"),system-ui,sans-serif; font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; } ::selection { background:var(--blue); color:#fff; } :focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:0; } button { font:inherit; cursor:pointer; border:none; background:none; padding:0; color:inherit; } input, select, textarea { font:inherit; color:inherit; } a { color:inherit; } main { flex:1; outline:none; } [hidden] { display:none !important; } .skip { position:absolute; left:-9999px; top:0; background:var(--blue); color:#fff; padding:.6rem 1rem; z-index:100; } .skip:focus { left:0; } .brand { font-family:var(--display); font-weight:800; letter-spacing:var(--brand-tracking,-.03em); text-transform:var(--brand-caps,none); } .brand sup { font-size:.42em; letter-spacing:0; vertical-align:.95em; } /* Marca configurable: si el despliegue sube logo, sustituye al texto en .brand */ .brand img { display:block; height:28px; width:auto; max-width:220px; object-fit:contain; } .sheet .card .brand img { margin:0 auto; height:34px; } .login-hero .brand img, .cred-hero .brand img { height:34px; } /* ══════════════ Header verde de marca ══════════════ */ #chrome-header { position:sticky; top:0; z-index:20; background:var(--header-bg); color:var(--header-ink); display:flex; align-items:center; gap:1.1rem; padding:0 clamp(1rem,4vw,2.4rem); height:var(--header-h); /* El COLOR toma el token del filete (rule); el grosor solo cambia con headerRuleWidth (--header-rule-w, la banda de marca de POLO CLUB): sin él, el hilo de 1px de siempre. */ border-bottom:var(--header-rule-w,1px) solid var(--brand-rule,rgba(0,0,0,.14)); } /* Wordmark serif en crema; el italic de Fraunces le da carácter editorial */ #chrome-header .brand { font-size:1.7rem; font-style:normal; color:var(--header-ink); text-decoration:none; line-height:1; } /* Caja BLANCA sobre el header negro: es el elemento de mayor contraste de la franja superior en la referencia (01-dashboard.png), con la lupa a la derecha. */ .h-search { position:relative; width:min(20rem,32vw); } .h-search input { width:100%; background:#fff; border:1px solid #d6d5d0; border-radius:var(--r-sm); padding:.62rem 2.6rem .62rem .85rem; color:var(--ink); transition:border-color .15s var(--ease); } .h-search input::placeholder { color:var(--muted); opacity:1; } .h-search input:focus { border-color:var(--blue); } /* Sobre el header negro el azul de marca no contrasta: el foco se marca en blanco */ .h-search input:focus-visible, #chrome-header button:focus-visible, #chrome-header a:focus-visible { outline:2px solid var(--header-veil); outline-offset:2px; } .h-search button { position:absolute; right:.4rem; top:50%; translate:0 -50%; padding:.35rem; color:var(--ink); border-radius:6px; display:grid; place-items:center; } .h-search button:hover { color:var(--blue); } /* La lupa vive DENTRO de la caja blanca: el anillo blanco del header sería invisible ahí, así que aquí se marca en azul (y con más peso que esa regla). */ #chrome-header .h-search button:focus-visible { outline:2px solid var(--blue); outline-offset:1px; } #chrome-header .spacer { flex:1; } .h-user { display:flex; align-items:center; gap:.6rem; position:relative; } .h-user > button { display:flex; align-items:center; gap:.6rem; padding:.3rem .4rem; border-radius:var(--r-sm); transition:background .15s var(--ease); } .h-user > button:hover { background:color-mix(in srgb, var(--header-veil) 12%, transparent); } .avatar { width:2.1rem; height:2.1rem; border-radius:50%; background:var(--accent); color:#fff; flex:none; display:grid; place-items:center; font-weight:700; font-size:.85rem; text-transform:uppercase; } .h-user .who { text-align:left; line-height:1.35; font-size:.8rem; } .h-user .who .l1 { color:var(--header-ink); white-space:nowrap; } .h-user .who .l2 { color:var(--header-ink-2); } .h-menu { position:absolute; top:calc(100% + .6rem); right:0; min-width:15rem; background:#fff; color:var(--ink); border-radius:var(--r-sm); box-shadow:var(--shadow-card); padding:.4rem; z-index:30; } .h-menu a, .h-menu button { display:block; width:100%; text-align:left; padding:.55rem .75rem; border-radius:6px; font-size:.88rem; text-decoration:none; transition:background .12s var(--ease); } .h-menu a:hover, .h-menu button:hover { background:var(--surface); } .h-menu hr { border:none; border-top:1px solid var(--line); margin:.35rem .3rem; } .h-menu .out { color:var(--out); } /* Idioma y vista sin distracciones solo cuelgan del menú cuando el header los oculta */ .h-menu .m-only { display:none; } .h-menu .m-title { display:block; padding:.5rem .75rem .15rem; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .h-icon { color:var(--header-ink); padding:.45rem; border-radius:var(--r-sm); display:grid; place-items:center; transition:background .15s var(--ease), color .15s var(--ease); } .h-icon:hover { background:color-mix(in srgb, var(--header-veil) 12%, transparent); } .h-icon[aria-pressed="true"] { background:var(--header-ink); color:var(--blue); } #chrome-header .sep { width:1px; height:1.6rem; background:color-mix(in srgb, var(--header-veil) 22%, transparent); } .h-lang { display:flex; align-items:center; gap:.35rem; border-radius:999px; border:1px solid color-mix(in srgb, var(--header-veil) 30%, transparent); padding:.45rem .6rem .45rem .8rem; font-size:.82rem; font-weight:600; color:var(--header-ink); text-transform:uppercase; transition:border-color .15s var(--ease), background .15s var(--ease); } .h-lang:hover { border-color:var(--header-ink); background:color-mix(in srgb, var(--header-veil) 8%, transparent); } /* Carrito: acento terracota, el único botón "acción" del header verde */ .h-cart { display:flex; align-items:center; gap:.55rem; background:var(--accent); color:#fff; border-radius:999px; padding:.68rem 1.25rem; font-weight:600; font-size:.83rem; letter-spacing:.02em; transition:background .15s var(--ease), transform .15s var(--ease); white-space:nowrap; } .h-cart:hover { background:var(--accent-deep); transform:translateY(-1px); } /* ══════════════ Barra de navegación ══════════════ */ /* El padding con max() alinea el contenido con la columna centrada de .page sin necesitar un wrapper (el nav pinta directo desde chrome.js). */ /* El nav se alinea con el catálogo (superficie ancha): así las pestañas quedan bajo la cabecera negra sin el salto visual del contenido centrado a 1240. En páginas de lectura el nav queda algo más ancho que el texto, lo cual es habitual en app chrome. */ #chrome-nav { background:var(--card); border-bottom:1px solid var(--line); padding:0 max(clamp(1rem,4vw,2.4rem), calc((100% - var(--maxw-wide)) / 2)); } #chrome-nav a { display:inline-block; padding:.95rem .2rem; margin-right:1.6rem; font-size:.9rem; letter-spacing:.01em; text-decoration:none; border-bottom:2px solid transparent; transition:border-color .15s var(--ease), color .15s var(--ease); } #chrome-nav a:hover { border-bottom-color:var(--blue); color:var(--blue); } /* La referencia no marca "Catálogo" como activo (m11): el estado sigue expuesto en aria-current, pero sin subrayado ni negrita. */ /* ══════════════ Footer ══════════════ */ /* Banda de tinta cálida con el bloque centrado — copyright + 5 iconos sociales. */ #chrome-footer { background:var(--header-bg); color:var(--header-ink); margin-top:4rem; display:flex; align-items:center; justify-content:center; gap:1.5rem; padding:1.8rem; flex-wrap:wrap; } #chrome-footer > span:first-child { font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; opacity:.9; } #chrome-footer .social { display:flex; align-items:center; gap:.9rem; } #chrome-footer .social a { padding:.25rem; border-radius:6px; color:var(--header-veil); opacity:.92; display:grid; place-items:center; transition:opacity .15s var(--ease), background .15s var(--ease); } #chrome-footer .social a:hover { opacity:1; background-color:color-mix(in srgb, var(--header-veil) 16%, transparent); } #chrome-footer .social a:focus-visible { outline:2px solid var(--header-veil); outline-offset:2px; } /* ══════════════ Vistas con chrome ══════════════ */ /* La referencia va casi a sangre: ~1,5 % de canal lateral, sin contenedor centrado. La cabecera negra de las tablas llega prácticamente al borde de la ventana. */ /* Familia por DEFECTO: lectura y formulario. Que sea el defecto es deliberado —si una vista nueva no se adscribe a ninguna familia, el error seguro es quedarse estrecho, no invadir la pantalla. */ .page { max-width:var(--w-read); margin:0 auto; padding:2.4rem var(--gutter) 4.5rem; } /* ── Familia REJILLA DE DATOS ────────────────────────────────────────────────── Dos formas de adscribirse, y las dos a propósito: · por CLASE, para las vistas que ya la traen (.docs = pedidos/albaranes/facturas/ SAT; .cl = clientes/solicitudes/selecciones; .ms-add; .page-analysis; .page-plan; .page-stats); · por CONTENIDO, con :has(), para las que se pintan con `class="page"` a secas. `table.grid` es LA tabla de datos del portal (ui/table.js y carritos) y `.bd-kpis` el tablero de indicadores: si una página las contiene, es una rejilla, se llame como se llame. Así una vista nueva que use la tabla común entra en la familia sin tener que acordarse de poner la clase. */ .page:is(.docs, .cl, .ms-add, .page-analysis, .page-plan, .page-stats, .page-sellthrough, .checkout), .page:has(table.grid), .page:has(.bd-kpis) { max-width:none; margin:0; padding-inline:var(--rail-grid); } /* ── Familia EDITORIAL ───────────────────────────────────────────────────────── .catalog-top y .lookbook traen además su propio padding vertical, así que se declaran ellas; aquí quedan .product y .dash, que solo necesitan el raíl. */ .page:is(.product, .dash) { max-width:none; margin:0; padding-inline:var(--rail-x); } .crumbs { color:var(--muted); font-size:.8rem; letter-spacing:.02em; margin:0 0 .7rem; text-transform:uppercase; } .crumbs a { text-decoration:none; } .crumbs a:hover { color:var(--blue); } .crumbs span { color:var(--ink); } h1.title { font-family:var(--display); font-weight:500; font-size:clamp(2.2rem,4.2vw,3.2rem); letter-spacing:var(--brand-tracking,-.015em); line-height:1.04; margin:0 0 2rem; } .cat-headline { display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; } /* Vista sin distracciones: se va el H1 y las migas se quedan en "Inicio" (20-header-ojo.png) */ body[data-focus="on"] .crumb, body[data-focus="on"] h1.title { display:none; } .panel { background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:2.6rem 2rem; text-align:center; color:var(--muted); } .panel b { display:block; color:var(--ink); font-size:1.05rem; margin-bottom:.35rem; } /* Texto de marca dentro de su propio tinte: --blue-soft-text está medido contra --blue-soft (ver :root); --blue-deep sobre el tinte no llegaba a AA. */ .panel .tag { display:inline-block; margin-top:.9rem; background:var(--blue-soft); color:var(--blue-soft-text); border-radius:999px; padding:.28rem .8rem; font-size:.75rem; font-weight:700; letter-spacing:.04em; } .panel .cta { display:inline-block; margin-top:1.1rem; background:var(--blue); color:#fff; font-weight:700; border-radius:var(--r-btn,var(--r-sm)); padding:.7rem 1.3rem; text-decoration:none; } .panel .cta:hover { background:var(--blue-deep); } /* ══════════════ Portada: carrusel + tarjetas de acceso ══════════════ */ /* Contenido servido por el CMS (portal_content). Las medidas siguen 01-dashboard.png: carrusel ~3.4:1 a ancho de página y dos tarjetas-imagen bajo el H1. */ /* La portada va sobre el papel crema; el carrusel y las tarjetas son piezas editoriales con radio y sombra suave (antes iban a sangre y sin marco). */ body:has(#hero) { background:var(--paper); } /* Hero a sangre estilo editorial de moda (ref. thehoffbrand.com): vídeo o imagen a pantalla completa, título grande superpuesto y CTA mínimo. */ .hero-full { position:relative; width:100%; height:clamp(26rem, 74vh, 46rem); overflow:hidden; background:var(--ink); } .hero-media { position:absolute; inset:0; } .hero-media .carousel { position:absolute; inset:0; aspect-ratio:auto; height:100%; border-radius:0; box-shadow:none; } .hero-media .c-track, .hero-media .c-slide { height:100%; } .hero-media .c-slide img, .hero-media .c-video { width:100%; height:100%; object-fit:cover; } .hero-media .hero-skeleton { position:absolute; inset:0; aspect-ratio:auto; border-radius:0; } /* Movimiento cinematográfico lento en las imágenes hasta que haya vídeo real */ .hero-media .c-slide img { animation:kenburns 20s ease-in-out infinite alternate; } @keyframes kenburns { from { transform:scale(1); } to { transform:scale(1.09) translate(-1.5%,-1%); } } /* El texto per-slide del CMS se calla en el hero a sangre: manda el rótulo grande */ .hero-media .c-caption { display:none; } .hero-media .c-dots, .hero-media .c-arrow { z-index:4; } .hero-media .c-dots { bottom:1.3rem; } /* Velo para que el título blanco lea sobre cualquier imagen o vídeo */ .hero-full::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(16,18,14,.74), rgba(16,18,14,.12) 46%, rgba(16,18,14,.30)); } .hero-overlay { position:absolute; left:0; right:0; bottom:0; z-index:2; color:#fff; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter) clamp(2rem,5vw,3.6rem); display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; } .hero-kicker { font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; opacity:.92; font-style:italic; font-family:var(--display); } .hero-title { font-family:var(--display); font-weight:500; font-size:clamp(2.6rem,7vw,5.5rem); line-height:.98; letter-spacing:var(--brand-tracking,-.02em); margin:.1rem 0 .8rem; text-wrap:balance; text-shadow:0 2px 30px rgba(0,0,0,.35); } .hero-cta { display:inline-flex; align-items:center; gap:.6rem; color:#fff; text-decoration:none; font-weight:600; font-size:.92rem; letter-spacing:var(--brand-cta-tracking,.02em); border:1px solid rgba(255,255,255,.6); border-radius:999px; padding:.72rem 1.5rem; transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); } .hero-cta:hover { background:#fff; color:var(--ink); border-color:#fff; } .hero-cta:focus-visible { outline:2px solid #fff; outline-offset:3px; } .hero-full + .page { padding-top:2.8rem; } /* ── Portada: la banda de ventanas sale al raíl ANCHO ───────────────────────── Las dos tarjetas son el ACCESO al catálogo (elegir con qué ventana se pide), y eran la pieza MÁS ESTRECHA de la pantalla: cabecera, cinta de pestañas, hero y pie van casi a sangre, y la banda se quedaba en la columna de lectura con casi 400px de papel muerto a cada lado. Es un problema de ANCHO, no de tamaño: se ensancha el CONTENEDOR con el mismo max() del nav para que el borde de la banda caiga donde el de las pestañas, y lo demás (los KPI) vuelve a la columna de lectura, con su borde a plomo con el titular del hero. Nada de 100vw ni de márgenes negativos: la barra de scroll clásica metería scroll horizontal en toda la portada. */ .page.dash { max-width:none; padding-inline:max(clamp(1rem,4vw,2.4rem), calc((100% - var(--maxw-wide)) / 2)); } .page.dash > :not(.tiles) { max-width:calc(var(--maxw) - 2 * var(--gutter)); margin-inline:auto; } .hero-full + .page.dash { padding-top:2.2rem; } /* .kpis lleva display:grid y gana al display:none del navegador para [hidden]: sin esto, cuando la API de KPI falla queda una rejilla vacía con su margen. */ .kpis[hidden] { display:none; } @media (prefers-reduced-motion:reduce) { .hero-media .c-slide img { animation:none; } } @media (max-width:48rem) { .hero-full { height:clamp(22rem,82vh,34rem); } } /* ── Portada: saludo editorial + bento de KPIs ── */ .dash-greet { font-family:var(--display); font-weight:500; font-style:italic; font-size:clamp(1.5rem,3vw,2.1rem); color:var(--ink); letter-spacing:var(--brand-tracking,-.01em); margin:0 0 1.3rem; } /* Los KPI van DEBAJO de la banda (ver dashboard.js): el margen deja de ir abajo */ .kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin:3rem 0 0; } .kpi { display:flex; flex-direction:column; gap:.35rem; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.3rem 1.4rem; text-decoration:none; color:var(--ink); box-shadow:var(--shadow); transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); } .kpi:hover { transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:var(--line-control); } .kpi-label { font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .kpi-value { font-family:var(--display); font-weight:500; font-size:2.1rem; line-height:1; letter-spacing:var(--brand-tracking,-.01em); font-variant-numeric:tabular-nums; } .kpi-sub { font-size:.82rem; color:var(--muted); } /* Tarjeta de aviso (deuda vencida): superficie terracota */ .kpi-accent { background:var(--accent-soft); border-color:#e6c8b2; } .kpi-accent .kpi-value { color:var(--accent-deep); } .kpi-accent .kpi-sub { color:var(--accent-deep); font-weight:600; } @media (max-width:52rem) { .kpis { grid-template-columns:1fr 1fr; } } @media (max-width:34rem) { .kpis { grid-template-columns:1fr; } } .carousel { position:relative; overflow:hidden; border-radius:var(--r); background:var(--ink-2); aspect-ratio:3.4/1; box-shadow:var(--shadow-card); } .c-track { display:flex; height:100%; transition:transform .55s var(--ease); } .c-slide { position:relative; flex:0 0 100%; display:block; color:#fff; text-decoration:none; } .c-slide img { width:100%; height:100%; object-fit:cover; display:block; user-select:none; } .c-caption { position:absolute; left:0; right:0; bottom:0; padding:2.4rem 2.2rem 3.2rem; display:flex; flex-direction:column; align-items:flex-start; gap:.35rem; background:linear-gradient(transparent, rgba(13,13,13,.72)); } .c-caption strong { font-family:var(--display); font-size:clamp(1.3rem,2.6vw,2.2rem); letter-spacing:var(--brand-tracking,-.03em); line-height:1.1; } .c-caption span { font-size:clamp(.9rem,1.2vw,1.05rem); color:#e9e9ee; } .c-caption .c-cta { margin-top:.7rem; background:var(--blue); color:#fff; font-weight:700; border-radius:var(--r-sm); padding:.6rem 1.15rem; letter-spacing:var(--brand-cta-tracking,.02em); } .c-slide:hover .c-cta { background:var(--blue-deep); } .c-arrow { position:absolute; top:50%; translate:0 -50%; width:2.6rem; height:2.6rem; border-radius:50%; background:rgba(255,255,255,.9); color:var(--ink); display:grid; place-items:center; opacity:0; transition:opacity .2s var(--ease), background .15s var(--ease); } .c-arrow.prev { left:1rem; rotate:90deg; } .c-arrow.next { right:1rem; rotate:-90deg; } .carousel:hover .c-arrow, .c-arrow:focus-visible { opacity:1; } .c-arrow:hover { background:#fff; } /* Los dots miden 24×24 para el dedo; el punto visible es el ::before interior */ .c-dots { position:absolute; left:0; right:0; bottom:.7rem; display:flex; justify-content:center; align-items:center; gap:.15rem; } .c-dots button { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; } .c-dots button[data-go]::before { content:""; width:.6rem; height:.6rem; border-radius:50%; background:rgba(255,255,255,.55); transition:background .15s var(--ease), scale .15s var(--ease); } .c-dots button[data-go]:hover::before { background:#fff; } .c-dots button[aria-current="true"]::before { background:var(--blue); scale:1.15; } .c-dots .c-play { width:24px; height:24px; color:#fff; opacity:.8; } .c-dots .c-play:hover { opacity:1; } .c-dots button:focus-visible { outline:2px solid #fff; outline-offset:1px; } .hero-skeleton { aspect-ratio:3.4/1; border-radius:var(--r); background:var(--surface); } /* Sin aspect-ratio: la altura la pone la fila de la rejilla, así el esqueleto mide EXACTAMENTE lo que medirá la tarjeta y la banda no salta al pintarse. */ .tile-skeleton { border-radius:var(--r); background:var(--surface); } .hero-skeleton, .tile-skeleton { background-image:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.65) 50%,transparent 80%); background-size:220% 100%; animation:sheen 1.4s var(--ease) infinite; } @keyframes sheen { from { background-position:180% 0; } to { background-position:-80% 0; } } /* ── La banda: ALTURA DE FILA fija, columnas automáticas ────────────────────── El CMS decide cuántas ventanas hay, así que la PROPORCIÓN no puede ser fija: con aspect-ratio la portada cambiaba de alto cada vez que el cliente añadía o quitaba una. Con grid-auto-rows la banda pesa siempre lo mismo y lo único que cambia es el encuadre. El alto es ~la mitad del hero a propósito: la banda debe ser grande pero SUBORDINADA; a 16/9 y ancha serían dos losas compitiendo con la campaña. El suelo de 22rem apila las tarjetas solas en pantallas estrechas, sin media query. */ .tiles { display:grid; gap:clamp(.8rem, 1vw, 1.2rem); grid-template-columns:repeat(auto-fit, minmax(min(22rem,100%), 1fr)); grid-auto-rows:clamp(15rem, 22vw, 25rem); } /* Solo los extremos necesitan matiz: una sola sería un buzón y cuatro saldrían casi cuadradas. Si faltara data-count, la regla de arriba ya sostiene la banda. */ .tiles[data-count="1"] { grid-auto-rows:clamp(17rem, 27vw, 30rem); } .tiles[data-count="4"] { grid-auto-rows:clamp(13rem, 17vw, 20rem); } /* Sin ningún catálogo publicable (una instancia recién montada, o el hueco entre dos campañas) la banda no pinta dos tarjetas que llevarían al mismo sitio: dice la verdad. La rejilla deja de imponer alto de tarjeta para que el texto no quede flotando. */ .tiles[data-count="0"] { grid-auto-rows:auto; } .dash-empty { grid-column:1 / -1; margin:0; padding:clamp(1.2rem,3vw,2rem); border:1px dashed var(--line); border-radius:var(--r); color:var(--muted); font-size:.95rem; text-align:center; } .tile { position:relative; display:block; overflow:hidden; border-radius:var(--r); container-type:inline-size; /* el rótulo se mide contra LA TARJETA, no contra la ventana */ background:var(--ink); color:#fff; text-decoration:none; box-shadow:var(--shadow); } /* Sobre la foto el acento se pierde: el foco se marca en blanco por dentro y con el halo de marca por fuera. Ese halo vive FUERA de la caja, así que la banda conserva canal lateral y nunca debe llevar overflow oculto. */ .tile:focus-visible { outline:3px solid #fff; outline-offset:-3px; box-shadow:0 0 0 3px var(--blue); } .tile img, .tile .t-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:scale .5s var(--ease); } /* 1.04 sobre una tarjeta de 900px era un tirón de 36px; a este tamaño 1.02 se lee mejor. Solo con puntero real: en táctil el :hover se queda pegado tras el toque y la tarjeta tocada quedaba ampliada hasta tocar otra. */ @media (hover:hover) { .tile:hover img, .tile:hover .t-art { scale:1.02; } } /* Sin imagen en el CMS, la tarjeta se sostiene con el color de marca. Planos, no degradados: los tres rojos y los tres grises literales eran los de MITO y una instancia de otro color los heredaba tal cual en su portada. */ .tile[data-window="replenishment"] .t-art { background:var(--blue); } .tile[data-window="scheduled"] .t-art { background:var(--ink); } /* Se retira el velo diagonal a inset:0: oscurecía la foto ENTERA para proteger un texto que vive abajo y, aun así, no llegaba a contraste AA sobre una foto clara. Además el hover lo ACLARABA, bajando la legibilidad justo al interactuar. Ahora el ::after es solo la respuesta al puntero, y oscurece. Capas: imagen (auto) · velo de hover (1) · rótulos (2). */ .tile::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:rgba(13,13,13,.16); opacity:0; transition:opacity .3s var(--ease); } .tile:hover::after, .tile:focus-visible::after { opacity:1; } /* ── Rótulos: un bloque abajo a la izquierda, con su propio velo ────────────── El velo va en el BLOQUE DE TEXTO, no en la tarjeta: cubre exactamente el texto —una línea o dos, en cualquier idioma— y se desvanece dentro de su padding, sin depender del alto de la caja. Sobre una foto reventada de blanco mantiene el contraste AA del rótulo y del subtítulo. El casi-negro es fijo a propósito: es un velo FOTOGRÁFICO, no una superficie de marca. A cambio, los dos tercios de arriba quedan limpios. A la izquierda porque es donde arranca todo el texto de la página, y así los rótulos forman una línea continua a lo largo de la banda con 2, 3 o 4 tarjetas. */ .t-body { position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:.35rem; padding:3.6rem 1.5rem 1.3rem; background:linear-gradient(to top, rgba(13,13,13,.84), rgba(13,13,13,.80) 62%, rgba(13,13,13,0)); } /* cqw y no vw: con cuatro tarjetas el rótulo se dimensionaba con la VENTANA y salía enorme dentro de una caja estrecha. La declaración en vw va delante como respaldo: si el navegador no entiende cqw, invalida la segunda y sobrevive la primera. */ .t-label { font-size:clamp(1.25rem,2.2vw,2.4rem); font-size:clamp(1.25rem,4.4cqw,2.4rem); font-weight:500; line-height:1.1; text-wrap:balance; letter-spacing:var(--brand-tracking,-.02em); text-transform:var(--brand-caps,none); } /* El carrito baja al bloque de texto: un icono de interfaz flotando sobre una foto de campaña es lo más "plantilla" de la pieza, y obligaba a un segundo velo arriba. */ .t-foot { display:inline-flex; align-items:center; gap:.5rem; } .t-cart { color:#fff; opacity:.95; display:inline-flex; } .t-cart svg { width:20px; height:20px; } /* Fuera el resplandor de 18px del rótulo: a este tamaño ensuciaba el trazo sin aportar contraste, que ahora lo da el velo del bloque. */ .t-sub { font-size:.85rem; letter-spacing:.02em; color:#e6e6ec; } @media (prefers-reduced-motion:reduce) { .c-track { transition:none; } .hero-skeleton, .tile-skeleton { animation:none; } .tile img, .tile .t-art, .tile::after { transition:none; } /* Sin esto el zoom seguía ocurriendo al pasar el ratón, solo que de golpe */ .tile:hover img, .tile:hover .t-art { scale:1; } } /* ══════════════ Pantallas sin chrome (login / credenciales) ══════════════ */ /* Modernist: LOGIN split — cartel rojo con display XXL + formulario sobre papel */ body[data-chrome="off"] { background:var(--paper); } body[data-chrome="credentials"] { background:var(--ink); } .login-split { min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; } .login-hero { background:var(--blue); color:#fff; display:flex; flex-direction:column; justify-content:space-between; gap:2rem; padding:clamp(2rem,5vw,3.5rem); } .login-hero .brand { color:#fff; font-size:1.9rem; } /* Foto del acceso (bloque login.background, la inserta ui/access-photo.js). En la base no se pinta: el cartel de color de MITO y ALMA sigue como está; cada marca decide en su bloque cómo la compone. */ .access-photo { display:none; } /* Mayúscula por defecto, pero el token caps=false (--brand-caps:none) la retira: una tagline serif en caja de frase (POLO CLUB). Sin token la variable no existe y queda en uppercase. */ .login-display { font-family:var(--display); font-weight:800; text-transform:var(--brand-caps,uppercase); letter-spacing:var(--brand-tracking,-.03em); line-height:.96; font-size:clamp(2.6rem,6.4vw,5.4rem); margin:0; color:#fff; } .login-panel { display:grid; place-items:center; padding:2rem clamp(1.5rem,5vw,4rem); } .login-panel .login-card { width:min(25rem,100%); background:none; box-shadow:none; padding:0; } .login-h { font-family:var(--display); font-weight:800; font-size:2rem; margin:0 0 1.4rem; letter-spacing:var(--brand-tracking,-.02em); } @media (max-width:52rem) { .login-split { grid-template-columns:1fr; } .login-hero { min-height:36vh; } } /* Selección de credencial: tarjeta centrada sobre negro */ .sheet { min-height:100vh; display:grid; place-items:center; padding:2rem 1rem; } .sheet .card { background:var(--card); border-radius:var(--r); box-shadow:var(--shadow-card); padding:2.8rem 2.4rem; } .sheet .card .brand { display:block; text-align:center; font-style:normal; font-weight:800; font-size:2.6rem; color:var(--ink); margin:0 0 1.9rem; } /* Login (00-inicio.png) */ .login-card { width:min(29rem,100%); } /* El borde va por el token de control (era un #ccc literal, 1,6:1: la caja de Contraseña casi no existía frente a la de Email en foco), así sigue a --line-control de cada instancia. */ .login-card .field { width:100%; border:1px solid var(--line-control); border-radius:4px; padding:.85rem 1rem; margin-bottom:.9rem; transition:border-color .15s var(--ease); } .login-card .field:focus { border-color:var(--blue); } /* Un solo marco de 2px al enfocar (borde + sombra interior pegada), no borde + hueco blanco + anillo: el doble marco se leía como un error de dibujo. Sigue siendo foco visible (WCAG 2.4.7): la sombra va en el color de marca y ocupa el ancho del borde. */ .login-card .field:focus-visible { outline:none; box-shadow:inset 0 0 0 1px var(--blue); } .login-card .field::placeholder { color:var(--muted); } .login-card .forgot { display:block; text-align:right; font-size:.85rem; color:var(--blue); margin:.1rem 0 1.4rem; } .login-card .submit { width:100%; background:var(--blue); color:#fff; font-weight:700; letter-spacing:var(--brand-tracking,.04em); border-radius:var(--r-btn,4px); padding:.95rem; transition:background .15s var(--ease); } .login-card .submit:hover { background:var(--blue-deep); } .login-card .submit[disabled] { opacity:.6; cursor:progress; } .login-card h2 { font-size:.95rem; font-weight:700; margin:1.6rem 0 .7rem; } .login-card p { margin:0 0 .9rem; color:var(--ink-2); } .login-card .create { color:var(--blue); font-weight:600; } .login-card .legal { font-size:.8rem; color:var(--hint); line-height:1.5; margin:1rem 0 0; } .login-card .err { color:var(--out); font-size:.85rem; min-height:1.3em; margin:.7rem 0 0; } /* Activación / recuperación de contraseña (Fase 2). Reutiliza la tarjeta del login */ .activate-card h1 { font-family:var(--display); font-size:1.5rem; margin:0 0 .5rem; color:var(--ink); } .activate-card .activate-lead { color:var(--ink-2); margin:0 0 1.2rem; } .activate-card .activate-form .field { width:100%; border:1px solid var(--line-control); border-radius:4px; padding:.85rem 1rem; font-size:1rem; margin:0 0 .9rem; } .activate-card .activate-form .field:focus { border-color:var(--blue); } .activate-card .activate-form .field:focus-visible { outline:2px solid var(--blue); outline-offset:1px; } .activate-card .activate-hint { font-size:.82rem; color:var(--muted); margin:-.3rem 0 1rem; } .activate-card .submit { width:100%; background:var(--blue); color:#fff; font-weight:700; letter-spacing:var(--brand-tracking,.04em); border:none; border-radius:var(--r-btn,4px); padding:.9rem; font-size:.95rem; cursor:pointer; } .activate-card .submit:hover { background:var(--blue-deep); } .activate-card .submit[disabled] { opacity:.6; cursor:progress; } .activate-card .activate-ok { color:var(--blue-deep); font-size:.9rem; margin:.8rem 0 0; } .activate-card .forgot { display:block; text-align:center; font-size:.9rem; color:var(--blue); margin:1.2rem 0 0; } /* Selección de acceso — "split" (hero rojo + panel de tarjetas), coherente con el login. El hero rojo lleva SOLO display grande (marca + saludo + nombre), como el login: el texto pequeño en blanco sobre el rojo de marca no llega a AA, así que la guía de lectura vive en el panel claro (tinta sobre papel), que además es donde se decide. */ .cred-split { min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; background:var(--paper); } .cred-hero { background:var(--blue); color:#fff; display:flex; flex-direction:column; justify-content:space-between; gap:2rem; padding:clamp(2rem,5vw,3.5rem); } .cred-hero .brand { color:#fff; font-size:1.9rem; } .cred-hero-mid { display:flex; flex-direction:column; } .cred-hero-mid .hero-kicker { font-size:.9rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#fff; margin:0 0 .7rem; font-style:normal; } .cred-hero-name { font-family:var(--display); font-weight:800; text-transform:var(--brand-caps,uppercase); letter-spacing:var(--brand-tracking,-.03em); line-height:.94; font-size:clamp(2.4rem,5.8vw,4.8rem); margin:0; color:#fff; text-wrap:balance; } .cred-panel { display:grid; place-items:center; padding:2rem clamp(1.5rem,5vw,4rem); } .cred-wrap { width:min(30rem,100%); } .cred-h { font-family:var(--display); font-weight:800; font-size:2rem; letter-spacing:var(--brand-tracking,-.02em); margin:0; padding-bottom:1rem; border-bottom:var(--rule-w) solid var(--rule); } .cred-lead { color:var(--ink-2); font-size:.95rem; line-height:1.5; max-width:30rem; margin:1.1rem 0 0; } .cred-cards { display:flex; flex-direction:column; gap:.8rem; margin-top:1.5rem; } .cred-card2 { display:flex; align-items:center; gap:1rem; width:100%; text-align:left; background:var(--card); border:1px solid var(--line); border-left:3px solid transparent; padding:1rem 1.1rem; cursor:pointer; transition:border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); } .cred-card2:hover { border-color:#cfcaca; border-left-color:var(--blue); transform:translateX(3px); box-shadow:var(--shadow-card); } .cred-card2:focus-visible { outline:2px solid var(--blue); outline-offset:2px; } .cred-av { flex:none; width:2.9rem; height:2.9rem; background:var(--blue); color:#fff; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:1.15rem; } .cred-meta { flex:1; min-width:0; display:flex; flex-direction:column; gap:.2rem; } .cred-meta b { font-size:1.02rem; letter-spacing:-.01em; } .cred-sub { font-size:.82rem; color:var(--muted); } .cred-type { font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--blue); font-size:.72rem; } /* Acción explícita: el propio botón dice qué pasará ("Entrar" / "Elegir cliente") */ .cred-action { flex:none; display:flex; align-items:center; gap:.55rem; color:var(--muted); transition:color .15s var(--ease); } .cred-action-label { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); transition:color .15s var(--ease); } .cred-go { display:flex; transition:transform .15s var(--ease); } .cred-card2:hover .cred-action, .cred-card2:focus-visible .cred-action { color:var(--blue); } .cred-card2:hover .cred-action-label, .cred-card2:focus-visible .cred-action-label { color:var(--blue); } .cred-card2:hover .cred-go, .cred-card2:focus-visible .cred-go { transform:translateX(3px); } /* Credencial única: la tarjeta gana presencia (más aire, avatar y nombre mayores) */ .cred-cards.single .cred-card2 { padding:1.5rem 1.4rem; border-left-width:4px; } .cred-cards.single .cred-av { width:3.4rem; height:3.4rem; font-size:1.35rem; } .cred-cards.single .cred-meta b { font-size:1.18rem; } /* Salida discreta y accesible bajo las tarjetas */ .cred-exit { margin:1.4rem 0 0; font-size:.86rem; color:var(--muted); } .cred-exit-link { color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; background:none; border:none; padding:0; cursor:pointer; } .cred-exit-link:hover { color:var(--blue); } .cred-exit-link:focus-visible { outline:2px solid var(--blue); outline-offset:2px; } .cred-empty { color:var(--ink-2); border:1px solid var(--line); padding:1.2rem; line-height:1.5; margin-top:1.5rem; } .cred-empty a { color:var(--blue); font-weight:600; text-underline-offset:3px; } @media (max-width:52rem) { .cred-split { grid-template-columns:1fr; } .cred-hero { min-height:30vh; } /* En apilado, el nombre gigante ya no necesita empujar al fondo: pega al saludo */ .cred-hero { justify-content:flex-start; gap:1.4rem; } } /* En móvil la tarjeta ya es full-width y evidentemente pulsable, y el "lead" ya comunica el siguiente paso: la etiqueta de acción se reduce a la flecha para que el nombre (que puede ser largo) no compita ni envuelva. El aria-label del botón conserva la acción. */ @media (max-width:30rem) { .cred-action-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .cred-meta b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } } @media (prefers-reduced-motion:reduce) { .cred-card2, .cred-card2:hover, .cred-go, .cred-action { transition:none; transform:none; } .cred-card2:hover .cred-go, .cred-card2:focus-visible .cred-go { transform:none; } } /* ══════════════ Piezas comunes (Fase 2) ══════════════ */ .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .btn-primary, .btn-ghost, .btn-danger { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:var(--r-btn,var(--r-sm)); padding:.72rem 1.15rem; font-weight:700; font-size:.82rem; letter-spacing:var(--brand-tracking,.045em); text-transform:uppercase; white-space:nowrap; transition:background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); } .btn-primary { background:var(--blue); color:#fff; } .btn-primary:hover:not([disabled]) { background:var(--blue-deep); } .btn-ghost { background:#fff; color:var(--ink); border:1px solid var(--line-control); } .btn-ghost:hover:not([disabled]) { border-color:var(--ink); } .btn-danger { background:#fff; color:var(--out); border:1px solid var(--out); } .btn-danger:hover:not([disabled]) { background:#fdf1f0; } /* Deshabilitado por tokens, no por grises literales: el #e6e5e0/#75746e eran los grises CÁLIDOS de MITO y sobre un papel frío se veían beige. --surface/--muted dan 4,6:1 en MITO y 4,9:1 en BLOCCO, y siguen la temperatura del papel de cada instancia. */ .btn-primary[disabled], .btn-ghost[disabled], .btn-danger[disabled] { background:var(--surface); color:var(--muted); border-color:transparent; cursor:not-allowed; } .block { width:100%; } .link { color:var(--blue); text-decoration:underline; text-underline-offset:3px; } .skeleton { height:11rem; border-radius:var(--r); margin-bottom:.9rem; background:#eeede9; background-image:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.7) 50%,transparent 80%); background-size:220% 100%; animation:sheen 1.4s var(--ease) infinite; } .skeleton.short { height:6rem; } .notice { display:flex; gap:.7rem; border-radius:var(--r-sm); padding:.9rem 1rem; margin-bottom:1rem; } .notice b { display:block; font-size:.92rem; } .notice span { font-size:.85rem; } .notice svg { flex:none; margin-top:.1rem; } /* La columna de texto del aviso puede llevar un botón (p. ej. "Quitar artículos no disponibles"): sin min-width:0 el hijo ancho empujaba el aviso fuera del panel. */ .notice > div { min-width:0; } /* El aviso de error va en el segundo acento, como los chips y avisos de deuda: --accent-deep se mide contra su propio tinte en branding.js, así que el par siempre cumple AA. */ .notice-error { background:var(--accent-soft); color:var(--accent-deep); } .notice-ok { background:#e8f6ed; color:#0f6b34; } /* Aviso que no es un fallo del comprador: la marca cambio algo (una ventana que se acorta y recorta el dia de servicio ya elegido). Ni rojo de error ni verde de OK. */ .notice-warn { background:#fdf3e2; color:#7a4d05; } /* Diálogo del portal (js/ui/dialog.js): sustituye a confirm()/prompt() del navegador, que no se pueden traducir ni vestir.