/* ========================================================================= CRISTAL — la capa de vidrio del panel de trabajo ------------------------------------------------------------------------- Va DESPUES de style.css y no toca la maquetacion: la rejilla, el ancho del menu y el alto pegajoso de la barra lateral siguen siendo los de siempre. Lo unico que cambia es el material: en vez de superficies macizas, paneles de vidrio flotando sobre la seda negra y dorada de la marca. Lo que NO se lleva del diseno de referencia: - El bloqueo a 100vh con overflow:hidden. Aquel panel cabe entero en una pantalla porque su contenido es de mentira. Aqui hay expedientes de 40 cuentas e informes de seis paginas: si no se puede bajar, no sirve. - El desenfoque en las filas de las tablas. backdrop-filter se recalcula en cada scroll; con doscientas filas el raton empieza a arrastrarse. El vidrio se queda en el armazon (menu, paneles, tarjetas), no en las listas. - Sus tipografias. La app ya tiene Inter y Poppins, que son las del resto de la marca. Meter una tercera familia solo para parecerse mas a una captura ajena seria cambiar la marca por una referencia. Y lo que se respeta a rajatabla: el informe, el contrato y los documentos siguen siendo PAPEL BLANCO. Se leen, se imprimen y se le mandan al cliente. Un contrato con el fondo translucido no es un contrato. --------------------------------------------------------------------------- EL TEMA SE DECIDE EXACTAMENTE COMO EN style.css, y no de otra manera. Alli el oscuro se escribe DOS veces: el del sistema, con el :not([data-tema="claro"]) que permite que el boton "Claro" le gane a un sistema puesto en oscuro, y el que se elige a mano. Por defecto —"Auto" con el sistema en claro— manda la paleta CLARA. Si esta hoja se quedara solo con el selector manual, quien tenga el sistema en claro y el tema en Auto recibiria el texto oscuro de style.css sobre el cristal oscuro de aqui: una pantalla ilegible. Por eso los dos bloques de abajo dicen lo mismo palabra por palabra, igual que en style.css. ========================================================================= */ /* ---------- Por defecto: cristal claro (la paleta base de style.css) ---------- */ :root{ --cr-desenfoque:blur(24px) saturate(150%); --cr-fondo:#EAEEF7; --cr-vidrio:linear-gradient(135deg,rgba(255,255,255,.90) 0%,rgba(245,247,252,.80) 100%); --cr-vidrio-alto:rgba(255,255,255,.95); --cr-vidrio-tenue:rgba(240,243,250,.70); --cr-borde:rgba(255,255,255,.72); --cr-sombra:0 20px 48px rgba(13,43,85,.16),0 6px 18px rgba(0,0,0,.06); --cr-velo:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.72) 0%,rgba(234,238,247,.90) 100%); --cr-hover-sombra:0 16px 34px rgba(13,43,85,.16); --cr-nav-ink:#0E4A93; --cr-nav-bg:linear-gradient(135deg,rgba(30,136,229,.24) 0%,rgba(21,101,192,.12) 100%); --cr-nav-borde:rgba(21,101,192,.40); --cr-borde-acento:rgba(21,101,192,.45); } /* ---------- Oscuro del sistema, salvo que se haya elegido claro a mano ---------- */ @media (prefers-color-scheme:dark){:root:not([data-tema="claro"]){ --cr-fondo:#0A0A0C; --cr-vidrio:linear-gradient(135deg,rgba(255,255,255,.07) 0%,rgba(20,22,30,.46) 45%,rgba(10,11,16,.66) 100%); --cr-vidrio-alto:linear-gradient(135deg,rgba(255,255,255,.10) 0%,rgba(26,29,40,.56) 50%,rgba(13,15,22,.74) 100%); --cr-vidrio-tenue:rgba(255,255,255,.05); --cr-borde:rgba(255,255,255,.13); --cr-sombra:0 24px 60px rgba(0,0,0,.62),0 8px 22px rgba(0,0,0,.4); --cr-velo:radial-gradient(ellipse at 50% 30%,rgba(0,0,0,.34) 0%,rgba(0,0,0,.80) 100%); --cr-hover-sombra:0 16px 36px rgba(0,0,0,.42),0 0 26px rgba(45,125,236,.16); --cr-nav-ink:#7DB2F5; --cr-nav-bg:linear-gradient(135deg,rgba(45,125,236,.26) 0%,rgba(21,101,192,.12) 100%); --cr-nav-borde:rgba(90,155,239,.38); --cr-borde-acento:rgba(90,155,239,.42); }} /* ---------- Oscuro elegido a mano ---------- */ :root[data-tema="oscuro"]{ --cr-fondo:#0A0A0C; --cr-vidrio:linear-gradient(135deg,rgba(255,255,255,.07) 0%,rgba(20,22,30,.46) 45%,rgba(10,11,16,.66) 100%); --cr-vidrio-alto:linear-gradient(135deg,rgba(255,255,255,.10) 0%,rgba(26,29,40,.56) 50%,rgba(13,15,22,.74) 100%); --cr-vidrio-tenue:rgba(255,255,255,.05); --cr-borde:rgba(255,255,255,.13); --cr-sombra:0 24px 60px rgba(0,0,0,.62),0 8px 22px rgba(0,0,0,.4); --cr-velo:radial-gradient(ellipse at 50% 30%,rgba(0,0,0,.34) 0%,rgba(0,0,0,.80) 100%); --cr-hover-sombra:0 16px 36px rgba(0,0,0,.42),0 0 26px rgba(45,125,236,.16); --cr-nav-ink:#7DB2F5; --cr-nav-bg:linear-gradient(135deg,rgba(45,125,236,.26) 0%,rgba(21,101,192,.12) 100%); --cr-nav-borde:rgba(90,155,239,.38); --cr-borde-acento:rgba(90,155,239,.42); } /* ---------- El fondo ---------- La seda pesa 49 KB y va fija: no se mueve al bajar, asi que el vidrio de arriba siempre tiene algo distinto detras segun donde estes. */ body{ background:var(--cr-fondo) url('img/seda-azul.webp') no-repeat center center fixed; background-size:cover; } body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background:var(--cr-velo); } /* Sin esto el contenido queda por debajo del velo y se ve apagado. OJO: solo .app lleva position. El aviso flotante, la ventana modal y el chat YA son position:fixed, y ponerles relative se lo quitaba: el aviso se salia de su sitio y aparecia incrustado al final de la pagina como una barra blanca vacia, porque se esconde translandose 90px hacia abajo y en flujo normal eso ya no lo saca de la pantalla. A ellos solo hay que subirles la capa. */ .app{position:relative;z-index:1} /* El aviso aparte y MAS ALTO que el modal: con el mismo z-index quedaba detras, y un error dentro de un modal no se veia. Ver style.css. */ .modal,.chat,.chat-btn{z-index:999} .toast{z-index:1100} /* Los orbes que style.css tenia apagados vuelven, ahora en los dos colores de la marca. Son lo que impide que el vidrio parezca una captura congelada. */ .bg-orb{ display:block;position:fixed;border-radius:50%;filter:blur(92px); pointer-events:none;z-index:0;opacity:.5; } .orb-a{width:540px;height:540px;top:-160px;left:2%; background:radial-gradient(circle,rgba(45,125,236,.34) 0%,rgba(45,125,236,0) 70%); animation:crDerivar 24s ease-in-out infinite alternate} .orb-b{width:480px;height:480px;bottom:-180px;right:4%; background:radial-gradient(circle,rgba(13,43,85,.55) 0%,rgba(13,43,85,0) 70%); animation:crDerivar 28s ease-in-out infinite alternate-reverse} @keyframes crDerivar{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(46px,34px,0) scale(1.14)}} /* ---------- Los dos paneles ---------- La referencia mete todo en UNA consola con el menu dentro. Aqui son dos paneles separados por el mismo hueco: la barra lateral es pegajosa y el contenido crece sin limite, y meterlos en una caja con overflow:hidden rompe el position:sticky. Dos paneles se leen igual y no rompen nada. */ .app{ background:transparent; padding:14px;gap:14px; } .side{ background:var(--cr-vidrio); -webkit-backdrop-filter:var(--cr-desenfoque); backdrop-filter:var(--cr-desenfoque); border:1px solid var(--cr-borde); border-radius:20px; box-shadow:var(--cr-sombra); height:calc(100vh - 28px); top:14px; padding:18px 13px; } main{ background:var(--cr-vidrio); -webkit-backdrop-filter:var(--cr-desenfoque); backdrop-filter:var(--cr-desenfoque); border:1px solid var(--cr-borde); border-radius:20px; box-shadow:var(--cr-sombra); max-width:none; } /* ========================================================================= EL RIEL DESPLEGABLE ------------------------------------------------------------------------- Recogido son 74px: solo iconos. Al pasar el raton se abre ENCIMA del contenido, no empujandolo: si empujara, toda la pantalla daria un salto cada vez que el raton roza el borde izquierdo, y eso marea. El ancho vive en una variable del para que la rejilla de .app y el riel lean el mismo numero y no puedan desincronizarse. ========================================================================= */ :root{--riel-ancho:252px} .app{grid-template-columns:var(--riel-ancho) 1fr} .side{ width:var(--riel-ancho); overflow:hidden; transition:width .26s cubic-bezier(.22,.8,.28,1),box-shadow .26s ease; } /* La etiqueta de cada opcion. No se usa display:none: el texto tiene que seguir existiendo para el lector de pantalla, que es como sabe que ese boton se llama "Clientes" y no "un icono". */ .nav-i{white-space:nowrap} .nav-i .et{ display:inline-block;overflow:hidden;vertical-align:middle; max-width:170px;opacity:1; transition:max-width .24s cubic-bezier(.22,.8,.28,1),opacity .18s ease; } /* ---------- EL RIEL ---------- Aqui si se copia la idea del diseno de referencia: el menu no es un panel translucido mas, es un RIEL DE COLOR macizo, y lo que esta activo es una pastilla clara encima. Contra el vidrio del resto, el riel ancla la pantalla por la izquierda y se ve de un vistazo donde estas. El color es el degradado de la marca, el mismo --fin de style.css. */ .side{ /* El degradado de marca, pero TRANSLUCIDO y sobre la seda, como el resto. La primera version era azul macizo #1E88E5: contra un escritorio hecho de cristal oscuro se veia como una pieza pegada de otra aplicacion. Ahora es el mismo material —vidrio con desenfoque— solo que mas hondo y con el azul dentro, que es lo que lo sigue distinguiendo del contenido. Se queda OSCURO en los dos temas a proposito: la pastilla blanca del activo necesita fondo oscuro para anclar, y un riel oscuro contra una app clara es un patron deliberado, no un descuido. Por eso las opacidades son altas (.80-.90): sobre la seda clara del tema claro tienen que ganar. */ background: linear-gradient(168deg, rgba(30,136,229,.34) 0%, rgba(21,101,192,.62) 28%, rgba(13,43,85,.84) 62%, rgba(8,18,34,.90) 100%); border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter:blur(26px) saturate(155%); backdrop-filter:blur(26px) saturate(155%); box-shadow:0 24px 60px rgba(4,10,22,.52),0 8px 22px rgba(0,0,0,.30), 0 1px 0 rgba(255,255,255,.20) inset; } /* Un brillo muy tenue arriba: es lo que hace que el vidrio parezca vidrio y no un rectangulo con transparencia. */ .side::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 38%); } .side > *{position:relative;z-index:1} /* Todo lo que vive en el riel pasa a tinta clara: el degradado es oscuro en los dos temas, asi que esto NO depende de claro/oscuro. */ .side-logo .t{color:#fff} .side-logo .t span{color:#BFDCFF} .side-logo .s{color:#CBDCF5} .side .logo-mark{background:rgba(255,255,255,.14)} .nav-sep{color:#A9C0DE} .side-foot{border-top:1px solid rgba(255,255,255,.16)} .whoami{color:#CBDCF5} .whoami b{color:#fff} .guardado,.version{color:#A9C0DE} .tema-sel{background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:3px} .tema-sel button{color:#CBDCF5;border-radius:99px} .tema-sel button[aria-pressed="true"]{background:rgba(255,255,255,.92);color:#0D2B55} .side .btn-ghost{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.22)} .side .btn-ghost:hover{background:rgba(255,255,255,.18)} /* La barra de scroll del menu. Por defecto Chrome pinta uno gris macizo que sobre el riel azul se ve como un pegote. */ #nav{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent} #nav::-webkit-scrollbar{width:6px} #nav::-webkit-scrollbar-track{background:transparent} #nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.26);border-radius:99px} #nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.42)} /* ---------- LA PASTILLA LIQUIDA ---------- Una sola pastilla blanca que se DESLIZA de una opcion a la otra en vez de aparecer y desaparecer. Es un unico elemento movido por liquido.js, no un fondo por boton: por eso se ve viajar. Lo liquido es la curva: cubic-bezier(.34,1.56,.64,1) pasa de largo y vuelve, que es lo que hace que parezca que tiene peso y no que se teletransporta. */ #nav{position:relative} .nav-pastilla{ position:absolute;top:0;left:0;z-index:0;pointer-events:none; border-radius:12px; background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.90) 100%); box-shadow:0 6px 18px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.9) inset, 0 -2px 0 rgba(13,43,85,.10) inset; opacity:0; transition:transform .42s cubic-bezier(.34,1.56,.64,1), width .42s cubic-bezier(.34,1.56,.64,1), height .30s ease, border-radius .3s ease, box-shadow .3s ease, opacity .2s ease; } /* Mientras viaja se levanta: la sombra crece y el borde se redondea un poco mas. No se puede aplastar con scale porque el transform ya lleva la posicion, y las dos cosas en la misma propiedad se pelean. */ .nav-pastilla.viajando{ border-radius:15px; box-shadow:0 12px 26px rgba(0,0,0,.30), 0 1px 0 rgba(255,255,255,.95) inset, 0 -2px 0 rgba(13,43,85,.12) inset; } /* Los botones van POR ENCIMA de la pastilla y sin fondo propio: el fondo ahora es ella. Si cada uno se pintara el suyo, se verian dos a la vez durante el viaje. */ .nav-i{ position:relative;z-index:1;background:transparent; color:#E8EFFA; transition:color .22s var(--ease); } .nav-i:hover{background:rgba(255,255,255,.10);color:#fff} .nav-i.on,.nav-i.on:hover{ background:transparent;border:0;box-shadow:none; color:#0D2B55;font-weight:700; } .nav-i.on .ic{opacity:1} .side-logo{padding:2px 6px 0} .side-foot{border-top:1px solid var(--cr-borde)} .tema-sel{background:var(--cr-vidrio-tenue);border:1px solid var(--cr-borde);border-radius:99px;padding:3px} /* ---------- Las tarjetas ---------- Suben 4px al pasar por encima y el borde se aviva. Es el mismo gesto que ya tienen las tarjetas de las webs del ecosistema. */ .card,.stat,.note,.mplan,.tool,.plan{ background:var(--cr-vidrio-alto); border:1px solid var(--cr-borde); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease); } .card:hover,.stat:hover,.tool:hover{ transform:translateY(-4px); border-color:var(--cr-borde-acento); box-shadow:var(--cr-hover-sombra); } .card.flat:hover{transform:none;box-shadow:none;border-color:var(--cr-borde)} /* ---------- PAPEL BLANCO, INTOCABLE ---------- El informe, el contrato, los documentos, los medidores de puntaje y el mensaje que se le manda al cliente. style.css ya les fija la paleta clara dentro; aqui hay que devolverles ademas la superficie maciza, porque las reglas de arriba se la habrian quitado. Es la cuarta vez que un cambio de tema se cuela en el informe (ver tema.test.mjs) — por eso va con nombre y apellido en vez de con un :not(). */ .rep,.doc,.hoja,.contrato,.msg-subida,.ch-mandar,.med, .rep .card,.doc .card,.hoja .card,.contrato .card, .rep .stat,.doc .stat,.rep .note,.doc .note{ background:#fff !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; transform:none !important; } .rep .card:hover,.doc .card:hover,.rep .stat:hover{ transform:none !important;box-shadow:none !important;border-color:#E7EAF0 !important; } /* ---------- Movil ---------- A 900px la barra lateral deja de ser columna y se convierte en una tira horizontal. El alto pegajoso de arriba la dejaria ocupando la pantalla entera. */ /* ========================================================================= MOVIL — el riel se va y vuelve como cajon ------------------------------------------------------------------------- La version anterior dejaba el menu como una tira horizontal encima del contenido: catorce opciones apiladas ocupaban media pantalla antes de llegar a lo que venias a ver. Ahora en el telefono hay una barra de arriba minima y el menu entra desde la izquierda por encima de todo, que es lo que hace cualquier app del telefono. El riel de escritorio no se toca. ========================================================================= */ .movil-top,.velo-movil{display:none} @media(max-width:900px){ .app{display:block;padding:0;gap:0;padding-top:58px} /* ---------- La barra de arriba ---------- */ .movil-top{ display:flex;align-items:center;gap:12px; position:fixed;top:0;left:0;right:0;z-index:40; height:58px;padding:0 12px; background:linear-gradient(168deg,rgba(21,101,192,.72) 0%,rgba(13,43,85,.88) 70%,rgba(8,18,34,.92) 100%); -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%); border-bottom:1px solid rgba(255,255,255,.14); } .mt-btn{ width:42px;height:42px;flex:none;border-radius:12px;cursor:pointer; display:grid;place-items:center; border:1px solid rgba(255,255,255,.20);background:rgba(255,255,255,.10); } /* Las tres rayas, hechas con una caja y dos sombras: sin div extra y sin fuente de iconos. La de en medio es el propio elemento. */ .mt-hamb{ display:block;width:17px;height:1.8px;border-radius:2px;background:#fff; box-shadow:0 -5.5px 0 #fff,0 5.5px 0 #fff; transition:box-shadow .2s ease,background .2s ease; } /* Abierto, las tres rayas se vuelven una X. */ :root[data-cajon="si"] .mt-hamb{background:transparent;box-shadow:none;position:relative} :root[data-cajon="si"] .mt-hamb::before, :root[data-cajon="si"] .mt-hamb::after{ content:"";position:absolute;left:0;top:0;width:17px;height:1.8px; border-radius:2px;background:#fff; } :root[data-cajon="si"] .mt-hamb::before{transform:rotate(45deg)} :root[data-cajon="si"] .mt-hamb::after{transform:rotate(-45deg)} .mt-marca{display:flex;align-items:center;gap:9px;text-decoration:none;min-width:0} .mt-marca img{width:26px;height:26px;flex:none} .mt-marca span{ font-family:var(--fd);font-size:15px;font-weight:600;color:#E8EFFA; letter-spacing:-.02em;white-space:nowrap; } .mt-marca b{color:#fff;font-weight:800} /* EL CAJON. 25-sep-2026, auditoria: el 22-sep se borro este bloque junto con el menu plegable y en movil el riel se quedo metido en la pagina (316px, rotulos cortados) con el contenido debajo de la pantalla. La parte de /app (glassy) va al final de glassy-piel.css, que carga despues. */ .side{ position:fixed !important;top:0 !important;left:0;bottom:0; width:min(300px,86vw);height:100dvh !important;z-index:60; border-radius:0 20px 20px 0 !important;padding:16px 13px; transform:translateX(-101%); transition:transform .26s cubic-bezier(.22,.8,.28,1); overflow-y:auto; } :root[data-cajon="si"] .side{transform:none} .velo-movil{ display:block;position:fixed;inset:0;z-index:50; background:rgba(4,10,22,.58); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); opacity:0;transition:opacity .24s ease; } :root[data-cajon="si"] .velo-movil{opacity:1} /* El velo nunca se queda con los toques si el cajon esta cerrado: con display:block le ganaba a [hidden] y tapaba la pantalla entera. */ .velo-movil[hidden]{display:none} :root:not([data-cajon="si"]) .velo-movil{pointer-events:none} /* ---------- El contenido ---------- */ main{border-radius:0;border-left:0;border-right:0;padding:16px 14px 60px;min-height:calc(100dvh - 58px)} .bg-orb{display:none} /* dos desenfoques de 90px en un movil se notan */ /* Objetivos tactiles: por debajo de 44px la gente falla el toque. */ .nav-i{min-height:46px} .btn{min-height:44px} .btn.tiny{min-height:40px} .tab{min-height:44px;display:flex;align-items:center} .ag-nav{width:34px;height:34px} /* La barra del panel se apila y el buscador ocupa su linea. */ .tope{flex-direction:column;align-items:stretch;gap:10px} .tope-acts .btn{width:100%} /* Tablas: se desplazan de lado y la primera columna se queda fija, que es la que dice de quien es cada fila. Sin eso, al desplazarse a la derecha no se sabe que se esta mirando. */ .tw{-webkit-overflow-scrolling:touch} .tw th:first-child,.tw td:first-child{ position:sticky;left:0;z-index:2; background:var(--cr-vidrio-alto); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); } } /* Con el cajon abierto no se puede seguir bajando lo de detras. */ :root[data-cajon="si"],:root[data-cajon="si"] body{overflow:hidden} @media (prefers-reduced-motion: reduce){ .side,.velo-movil{transition:none} } /* ---------- Imprimir ---------- Sin esto, mandar un informe a la impresora gasta un cartucho entero en una seda negra que nadie pidio. */ @media print{ body{background:#fff !important} body::before,.bg-orb{display:none !important} .app,main,.side{ background:#fff !important;border:0 !important;box-shadow:none !important; -webkit-backdrop-filter:none !important;backdrop-filter:none !important; padding:0 !important;border-radius:0 !important; } } /* Quien pide menos movimiento en su sistema no ve derivar los orbes ni saltar las tarjetas. No desaparecen: dejan de moverse. */ @media (prefers-reduced-motion: reduce){ .bg-orb{animation:none} .card,.stat,.tool,.note,.mplan,.plan,.nav-i, .card:hover,.stat:hover,.tool:hover,.nav-i.on:hover{transition:none;transform:none} /* La pastilla no desaparece: deja de viajar y simplemente aparece donde toca. */ .nav-pastilla{transition:opacity .15s ease} } /* ========================================================================= EL LENGUAJE, EN TODAS LAS PANTALLAS ------------------------------------------------------------------------- Hasta aqui la hoja cambiaba el armazon: fondo, paneles, riel. Esto es lo otro que pidio Daniel, y es lo que de verdad hace que la app "se parezca": que las piezas sueltas —tarjetas, pestanas, insignias, tablas, campos— hablen todas el mismo idioma en TODAS las pantallas, no solo en el panel. Son las primitivas que style.css ya usa por todas partes, asi que tocarlas aqui las cambia en los treinta sitios de golpe, sin editar una sola vista. La gramatica: esquinas mas redondas, bordes suaves, superficies de vidrio, nada de lineas duras, y el estado activo siempre relleno en vez de subrayado. ========================================================================= */ /* ---------- Tarjetas: mas aire y esquinas mas redondas ---------- */ .card{border-radius:18px;padding:20px} .card h4{font-size:15px;letter-spacing:-.01em} /* ---------- Pestanas: de subrayado a pastilla ---------- El subrayado es lo que hace que una pantalla se vea "de formulario viejo". Una pastilla rellena se ve desde el otro lado del escritorio. */ .tabs{ border-bottom:0;gap:4px;padding:4px;margin-bottom:18px; background:var(--cr-vidrio-tenue); border:1px solid var(--cr-borde); border-radius:14px; display:inline-flex;max-width:100%; } .tab{ border-bottom:0;border-radius:10px;padding:9px 16px; transition:background .2s var(--ease),color .2s var(--ease); } .tab:hover{background:var(--cr-vidrio-tenue)} .tab.on{ border-bottom-color:transparent; background:var(--cr-vidrio-alto); color:var(--cr-nav-ink); box-shadow:0 2px 10px rgba(13,43,85,.16),0 1px 0 rgba(255,255,255,.14) inset; } /* ---------- Insignias: redondas del todo ---------- */ .bdg{border-radius:99px;padding:4px 11px} /* ---------- Avisos ---------- */ .find{ border-radius:16px;padding:16px; background:var(--cr-vidrio-alto); border:1px solid var(--cr-borde); border-left-width:3px; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); } .find:hover{box-shadow:var(--cr-hover-sombra)} .find .n{ width:34px;height:34px;flex:none;border-radius:11px; display:grid;place-items:center; background:var(--cr-vidrio-tenue);border:1px solid var(--cr-borde); } /* ---------- Tablas: sin lineas duras ---------- */ .tw{ border-radius:18px; border:1px solid var(--cr-borde); background:var(--cr-vidrio-alto); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); } th{ background:transparent; border-bottom:1px solid var(--cr-borde); padding:13px 14px; } td{ border-bottom:1px solid var(--cr-borde); padding:13px 14px; } tbody tr{transition:background .16s ease} tbody tr:hover td{background:var(--cr-vidrio-tenue)} /* El informe manda sobre esto: alli las tablas son de papel. */ .rep th,.rep td,.doc th,.doc td,.contrato th,.contrato td{ border-color:#E7EAF0;background:transparent; } .rep .tw,.doc .tw{background:#fff;border-color:#E7EAF0;-webkit-backdrop-filter:none;backdrop-filter:none} /* ---------- Campos ---------- */ input,select,textarea{ border-radius:12px;padding:12px 14px; border:1px solid var(--cr-borde); background:var(--cr-vidrio-tenue); transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease); } input:focus,select:focus,textarea:focus{ background:var(--cr-vidrio-alto); border-color:var(--cr-nav-borde); box-shadow:0 0 0 3px rgba(45,125,236,.20); } /* El buscador es de pastilla, como el de la referencia. */ input[type="search"],.buscador input{border-radius:99px;padding-left:16px} /* Dentro del informe los campos vuelven a ser de papel. */ .rep input,.rep select,.rep textarea,.doc input,.doc select,.doc textarea{ background:#fff;border-color:#DDE2EB; } /* ---------- Botones ---------- */ .btn{border-radius:12px} .btn-ghost{ background:var(--cr-vidrio-tenue); border-color:var(--cr-borde); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); } .btn-ghost:hover{background:var(--cr-vidrio-alto)} /* ---------- Notas y vacios ---------- */ .note{border-radius:14px;padding:15px 17px} .empty{ border-radius:18px; border:1px dashed var(--cr-borde); background:var(--cr-vidrio-tenue); } /* ---------- Encabezado de pantalla ---------- */ .ph{margin-bottom:20px} .ph h2{font-size:26px} /* ---------- Barras de progreso ---------- */ .bar{height:9px;background:var(--cr-vidrio-tenue)} /* Las cifras del panel, con la barra de color a la izquierda ya redondeada. */ .cif{border-radius:18px} /* ========================================================================= EL TABLERO DEL PANEL ------------------------------------------------------------------------- Solo el panel. El resto de pantallas se quedan como estaban: lo que pidio Daniel es que la PORTADA se resuma y quepa, no reorganizar la app entera. Antes el panel era una columna de secciones a lo ancho y medía tres pantallas. Ahora son tarjetas en tres columnas: lo que hay que hacer, el dinero y el tiempo, que es el orden en que se mira. ========================================================================= */ /* ---------- La barra de arriba ---------- */ .tope{ display:flex;align-items:center;gap:16px;flex-wrap:wrap; margin-bottom:20px; } .tope-tit{flex:0 0 auto;min-width:0} .tope-tit h2{font-family:var(--fd);font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1.15} .tope-tit p{font-size:13px;color:var(--ink-2);margin-top:2px} .tope-buscar{ flex:1 1 220px;min-width:180px;position:relative;display:flex;align-items:center; } .tope-lupa{ position:absolute;left:14px;width:16px;height:16px;pointer-events:none; color:var(--ink-3);display:grid;place-items:center; } .tope-lupa svg{width:16px;height:16px} .tope-buscar input{padding-left:38px;border-radius:99px;margin:0} .tope-acts{flex:0 0 auto;display:flex;gap:8px;flex-wrap:wrap} /* En el celular se apila. La regla de mas arriba quedaba pisada por esta, y apilado el flex-basis de 220px del buscador se volvia ALTO: salian huecos enormes entre el saludo, el buscador y el boton (30-sep-2026). */ @media(max-width:700px){ .tope{flex-direction:column;align-items:stretch;gap:10px} .tope-tit,.tope-buscar,.tope-acts{flex:none} } /* ---------- Las columnas ---------- A 1400px caben tres; por debajo, dos; en movil, una. No es masonry: son tres columnas independientes, asi que cada una apila lo suyo y no hay huecos raros cuando una tarjeta crece. */ .tablero{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;align-items:start;margin-bottom:8px; } .tb-col{display:flex;flex-direction:column;gap:14px;min-width:0} @media(max-width:1350px){ .tablero{grid-template-columns:repeat(2,minmax(0,1fr))} /* Con dos columnas, la tercera (tiempo) se reparte: el calendario sube. */ .tb-col:nth-child(3){grid-column:1 / -1;flex-direction:row;flex-wrap:wrap} .tb-col:nth-child(3) > *{flex:1 1 320px} } @media(max-width:880px){ .tablero{grid-template-columns:1fr} .tb-col:nth-child(3){grid-column:auto;flex-direction:column} } /* ---------- La tarjeta con cabecera ---------- */ .tj{padding:16px 18px 18px} .tj-h{display:flex;align-items:center;gap:10px;margin-bottom:14px} .tj-h h4{font-size:14.5px;font-weight:700;letter-spacing:-.01em;flex:1;min-width:0} .tj-ic{ width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center; background:var(--cr-nav-bg);border:1px solid var(--cr-nav-borde);color:var(--cr-nav-ink); } .tj-ic svg{width:16px;height:16px} .tj-acts{display:flex;gap:4px;flex:none} .tj-vacio{font-size:13px;color:var(--ink-2);line-height:1.6} /* Dentro de una tarjeta los avisos ya no necesitan su propio marco. */ .tj-avisos .find{padding:12px;border-radius:12px;margin-bottom:8px} .tj-avisos .find:last-child{margin-bottom:0} .tj-avisos .find p{font-size:12px;line-height:1.5} .tj .pl-line{padding:7px 0;font-size:13px} .tj .pt{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px} .tj .gm{gap:10px} /* ---------- El Panel reordenado (30-sep-2026) ---------- Arriba las seis cifras en una fila; debajo dos columnas: lo que hay que hacer (2/3) y el calendario (1/3). Embudo y plan van lado a lado dentro de la columna ancha para que las dos columnas acaben a una altura parecida. */ .tj-cifras{margin-bottom:14px} .cf-g.cf-fila{grid-template-columns:repeat(6,minmax(0,1fr))} .tablero.tablero-2{grid-template-columns:minmax(0,2fr) minmax(0,1fr)} .tablero-2 .tb-col:nth-child(2){grid-column:auto;flex-direction:column} .tablero-2 .tb-col:nth-child(2) > *{flex:none} .tb-par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch} .tb-par > .card{margin:0} /* Dias del calendario mas bajos: cuadrados, la columna de la derecha bajaba mas que la de la izquierda. */ .tablero-2 .ag-d{aspect-ratio:auto;height:44px} @media(max-width:1350px){ .cf-g.cf-fila{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:1100px){ .tablero.tablero-2{grid-template-columns:1fr} } @media(max-width:700px){ .cf-g.cf-fila{grid-template-columns:repeat(2,minmax(0,1fr))} .tb-par{grid-template-columns:1fr} } /* ---------- Las cifras, de cuatro en cuatro ---------- Cada una era una tarjeta entera. Metidas de cuatro en cuatro en UNA, el panel pasa de tres pantallas a una. */ .cf-g{display:grid;grid-template-columns:1fr 1fr;gap:10px} .cf{ padding:12px 13px;border-radius:13px; background:var(--cr-vidrio-tenue);border:1px solid var(--cr-borde); border-left:3px solid var(--t-c,var(--cr-nav-borde)); } .cf-k{font-size:9.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--ink-3);font-weight:700} .cf-v{font-size:21px;font-weight:800;letter-spacing:-.04em;line-height:1.15;margin-top:3px;color:var(--t-c,var(--ink))} .cf-p{font-size:11px;color:var(--ink-3);margin-top:2px;line-height:1.35} /* ---------- El calendario ---------- */ .ag-rej{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:12px} .ag-c{ text-align:center;font-size:9.5px;font-weight:700;letter-spacing:.6px; color:var(--ink-3);padding-bottom:4px; } .ag-d{ position:relative;aspect-ratio:1;display:grid;place-items:center; font-size:11.5px;color:var(--ink-2);border-radius:9px; font-variant-numeric:tabular-nums; } .ag-d.vacio{visibility:hidden} .ag-d.hoy{background:var(--cr-nav-bg);border:1px solid var(--cr-nav-borde);color:var(--cr-nav-ink);font-weight:700} /* El punto de debajo dice que ese dia tiene algo, y de que color de urgencia. Va como punto y no como fondo: con fondo, un mes cargado se vuelve ilegible. */ .ag-d.con::after{ content:"";position:absolute;bottom:3px;left:50%;transform:translateX(-50%); width:4px;height:4px;border-radius:50%; } .ag-d.con{font-weight:700;color:var(--ink)} .ag-d.con.crit::after{background:var(--red)} .ag-d.con.alta::after{background:var(--gold)} .ag-d.con.ok::after{background:var(--green)} .ag-nav{ width:24px;height:24px;border-radius:7px;cursor:pointer; border:1px solid var(--cr-borde);background:var(--cr-vidrio-tenue); color:var(--ink-2);font-size:14px;line-height:1; display:grid;place-items:center;transition:background .18s ease; } .ag-nav:hover{background:var(--cr-vidrio-alto);color:var(--ink)} .ag-atras{ font-size:11.5px;color:var(--red);font-weight:600; padding:7px 10px;border-radius:9px;margin-bottom:10px; background:var(--red-bg);border:1px solid var(--red-line); } .ag-lista{display:flex;flex-direction:column;gap:7px} .ag-ev{ display:flex;gap:10px;align-items:flex-start; padding:9px 10px;border-radius:11px; background:var(--cr-vidrio-tenue);border:1px solid var(--cr-borde); border-left:3px solid var(--cr-borde); transition:background .16s ease,transform .16s ease; } .ag-ev:hover{background:var(--cr-vidrio-alto);transform:translateX(2px)} .ag-ev.crit{border-left-color:var(--red)} .ag-ev.alta{border-left-color:var(--gold)} .ag-ev.ok{border-left-color:var(--green)} .ag-f{ font-family:var(--fm);font-size:10.5px;font-weight:600;color:var(--ink-3); flex:none;padding-top:1px;white-space:nowrap; } .ag-t{min-width:0;line-height:1.35} .ag-t b{display:block;font-size:12.5px;font-weight:600;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ag-t i{font-style:normal;font-size:11px;color:var(--ink-3)} .ag-vacio{font-size:12.5px;color:var(--ink-3);line-height:1.55} @media (prefers-reduced-motion: reduce){ .ag-ev,.ag-ev:hover{transition:none;transform:none} } /* ========================================================================= EL PIE DEL RIEL ------------------------------------------------------------------------- Era texto suelto pegado al borde: nombre, organizacion, plan, version, tres botones de tema y uno de salir, todo del mismo peso. Ahora es una ficha: avatar con iniciales, nombre y despacho, y el plan en pastilla. ========================================================================= */ .side-foot{ margin-top:10px;padding:12px 11px 11px; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.14); border-radius:16px; gap:9px; } .whoami{ display:grid; grid-template-columns:34px minmax(0,1fr); grid-template-areas:"ini txt" "plan plan" "ver ver"; align-items:center;gap:4px 10px;padding:0; } .wa-ini{ grid-area:ini; width:34px;height:34px;border-radius:11px; display:grid;place-items:center; font-size:12.5px;font-weight:800;letter-spacing:.3px;color:#0D2B55; background:linear-gradient(160deg,#fff 0%,#D8E7FA 100%); box-shadow:0 2px 8px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.9) inset; } .wa-txt{grid-area:txt;min-width:0;line-height:1.28} .wa-txt b{ display:block;font-size:12.5px;font-weight:700;color:#fff; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .wa-txt i{ display:block;font-style:normal;font-size:11px;color:#CBDCF5; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* ========================================================================= EL LOGO DEL DESPACHO, AL LADO DE SU NOMBRE ------------------------------------------------------------------------- Lo pidio Daniel. Solo aparece si el despacho subio uno; sin logo, el nombre se pinta igual que siempre y no queda ningun hueco. LA PASTILLA BLANCA NO ES DECORACION. El logo lo sube el consultor y puede ser cualquier cosa: un PNG oscuro sobre transparente, uno blanco sobre transparente, o un JPG con su propio fondo. Y la columna del menu no es del mismo color en los dos sitios — es OSCURA en el panel clasico y CLARA en el de cristal. Sin fondo propio, la mitad de los logos desaparecen en uno de los dos. Con pastilla blanca y un filo de un pixel, cualquier logo se lee en los dos: el oscuro por contraste y el blanco por el filo que lo enmarca. La altura la manda el CONTENEDOR (14px), no el archivo: los logos vienen a cualquier tamano y uno apaisado de 800x120 reventaria la fila. ========================================================================= */ .wa-txt i.con-logo{ display:flex;align-items:center;gap:6px; overflow:visible; /* recorta .wa-org, no la pastilla */ } .wa-logo{ flex:0 0 auto; height:14px;width:auto;max-width:54px; object-fit:contain; background:#fff;border-radius:3px;padding:1px 2px; box-shadow:0 0 0 1px rgba(13,43,85,.18); } /* Los puntos suspensivos se los queda el texto: el logo nunca se corta. */ .wa-org{ min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .wa-plan{ grid-area:plan;justify-self:start;margin-top:5px; font-size:9.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase; color:#CFE3FB;padding:3px 10px;border-radius:99px; background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.20); } .version{ grid-area:ver;display:block;margin-top:5px; font-family:var(--fm);font-size:9.5px;color:#8FA8C8; } /* El aviso de guardado, en pastilla y solo cuando dice algo. */ .guardado{ font-size:10.5px;font-weight:600;border-radius:99px;padding:0; color:#CBDCF5; } .guardado:not(:empty){padding:4px 10px;background:rgba(255,255,255,.10)} .guardado.error:not(:empty){background:rgba(240,112,112,.22);color:#FFC7C7} .guardado.guardado:not(:empty){background:rgba(78,203,123,.20);color:#BFF0D4} /* Tema y salir: mismo peso visual, ninguno grita. */ .side-foot .tema-sel{margin-top:2px} .side-foot .tema-sel button{font-size:10.5px;font-weight:600;padding:6px 10px;flex:1} .side .btn-ghost.tiny{ border-radius:11px;padding:9px 12px;font-size:12px;font-weight:600; } /* El recuadro del logo en el riel: mas contraste y el icono a tamano completo. Con el icono en blanco, la caja tenue de detras ya no hace falta tan marcada. */ .side .logo-mark{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:11px; } .side .logo-mark img{width:70%;height:70%} /* ========================================================================= PASADA 2 — TIPOGRAFIA, ESTADOS Y MEDIDORES ------------------------------------------------------------------------- Lo que separaba esto de una app de fuera no era el color: era que todo el texto pesaba parecido, que no habia nada que mirar mientras carga, y que los medidores eran tarjetas blancas pegadas encima del cristal. ========================================================================= */ /* ---------- Escala tipografica ---------- Antes habia como cuatro tamanos entre 11 y 15px y un titular. Eso es lo que hace que una pantalla se vea "plana": no hay a donde mirar primero. Ahora hay saltos de verdad entre titular, seccion, tarjeta y cuerpo. */ .tope-tit h2,.ph h2{ font-size:clamp(23px,2.1vw,29px);font-weight:800;letter-spacing:-.035em;line-height:1.08; } .tope-tit p,.ph p{font-size:13.5px;color:var(--ink-2);margin-top:4px} h3.sec{ font-size:10px;letter-spacing:1.4px;font-weight:800; margin:26px 0 12px;color:var(--ink-3); } .card h4{font-size:15.5px;font-weight:700;letter-spacing:-.015em} .tj-h h4{font-size:14px;font-weight:700;letter-spacing:-.012em} /* El rotulo pequeno en versalitas es la firma de este tipo de panel. Se usa igual en las cifras, en las estadisticas y en las cabeceras de tabla. */ .cf-k,.stat .k,th{font-size:9.5px;letter-spacing:1.1px;font-weight:800} .cf-v{font-size:22px;letter-spacing:-.045em} .stat .v{font-size:28px;letter-spacing:-.045em} /* ---------- Estados vacios ---------- Antes era un glifo gris al 40% y una linea. Ahora el icono va dentro de un circulo, hay un titulo y una frase que dice que hacer. */ .empty{padding:48px 24px} .empty .ic{ width:56px;height:56px;margin:0 auto 16px;border-radius:50%; display:grid;place-items:center;font-size:0;opacity:1; background:var(--cr-vidrio-tenue);border:1px solid var(--cr-borde); color:var(--ink-3); } .empty .ic svg{width:24px;height:24px} .empty p{font-size:14.5px;color:var(--ink-2);line-height:1.6;max-width:42ch;margin:0 auto} /* ---------- Los medidores de puntaje ---------- Eran tres tarjetas BLANCAS flotando sobre el cristal oscuro: la pieza que mas cantaba de toda la app. El motivo de que fueran blancas es real —el arco de color necesita fondo claro para leerse— pero eso solo aplica DENTRO del informe, que es papel. En la pantalla se visten como el resto. Los colores del texto se fijan a mano porque style.css los clava en #161921 y #586074 dentro de .med, justo para que el informe no se los lleve el tema. Aqui hay que deshacerlo, pero SOLO fuera del informe. */ #view .med:not(.rep .med){ background:var(--cr-vidrio-alto); border:1px solid var(--cr-borde); border-radius:16px; box-shadow:none; } #view .med:not(.rep .med) .med-t{color:var(--ink)} #view .med:not(.rep .med) .med-b, #view .med:not(.rep .med) .med-p{color:var(--ink-3)} /* Y el informe se queda como estaba, papel blanco y letra oscura. */ .rep .med,.doc .med,.hoja .med,.contrato .med{ background:#fff !important;border-color:#E7EAF0 !important; } .rep .med .med-t{color:#161921 !important} .rep .med .med-b,.rep .med .med-p{color:#586074 !important} /* ========================================================================= PASADA 3 — MICRO-INTERACCION Las animaciones viven aqui, no en vida.js: ese archivo solo pone clases. Si el JavaScript falla, la app se ve igual, solo que quieta. ========================================================================= */ /* ---------- La entrada escalonada ---------- */ @keyframes crEntra{ from{opacity:0;transform:translate3d(0,10px,0)} to{opacity:1;transform:none} } .entra{animation:crEntra .38s cubic-bezier(.22,.8,.28,1) both;animation-delay:var(--paso,0ms)} /* ---------- Esqueleto de carga ---------- Lo que se ve mientras llega la cuenta. Antes era la palabra "Cargando" y un glifo: la pantalla parecia rota durante el segundo que tarda. */ .esq{display:flex;flex-direction:column;gap:14px;padding:4px} .esq-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px} .esq-b{ border-radius:16px; background:var(--cr-vidrio-tenue); border:1px solid var(--cr-borde); position:relative;overflow:hidden; } .esq-b.alto{height:150px} .esq-b.medio{height:96px} .esq-b.bajo{height:44px} .esq-b.titulo{height:30px;max-width:260px;border-radius:10px} /* El brillo que recorre la pieza. Es lo que distingue "esta cargando" de "esto se quedo colgado". */ .esq-b::after{ content:"";position:absolute;inset:0; background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.10) 50%,transparent 80%); transform:translateX(-100%); animation:crBrillo 1.35s ease-in-out infinite; } @keyframes crBrillo{to{transform:translateX(100%)}} /* ---------- El aviso flotante ---------- */ .toast{ border-radius:14px;padding:13px 18px; -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%); box-shadow:0 18px 44px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.14) inset; } /* ---------- Filas y tarjetas que responden ---------- */ tbody tr{cursor:default} .tw tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--cr-nav-borde)} .ag-d.con{cursor:default} /* El foco, visible y del mismo azul en toda la app. Antes cada control heredaba el suyo y algunos no tenian ninguno. */ :where(button,a,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--cr-nav-borde); outline-offset:2px; border-radius:8px; } @media (prefers-reduced-motion: reduce){ .entra{animation:none} .esq-b::after{animation:none} } /* ---------- Resultados en vivo del buscador ---------- La lista cuelga del campo. z-index alto porque el tablero que hay debajo lleva tarjetas con sombra propia y si no se mete por detras. */ .tope-buscar{position:relative} .tope-res{ position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:70; padding:6px;border-radius:16px; background:var(--cr-vidrio-alto); border:1px solid var(--cr-borde); -webkit-backdrop-filter:blur(22px) saturate(155%);backdrop-filter:blur(22px) saturate(155%); box-shadow:0 22px 50px rgba(0,0,0,.42); max-height:330px;overflow-y:auto; } .tr-i{ display:flex;align-items:center;gap:11px;width:100%; padding:9px 10px;border:0;border-radius:11px;cursor:pointer; background:transparent;text-align:left;font-family:inherit; transition:background .14s ease; } .tr-i:hover,.tr-i.on{background:var(--cr-nav-bg)} .tr-ini{ width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center; font-size:12.5px;font-weight:800;color:var(--cr-nav-ink); background:var(--cr-vidrio-tenue);border:1px solid var(--cr-borde); } .tr-t{min-width:0;line-height:1.3} .tr-t b{display:block;font-size:13px;font-weight:600;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tr-t i{font-style:normal;font-size:11px;color:var(--ink-3)} /* ========================================================================= PASADA 4 — UNA SOLA FAMILIA DE COLOR, Y PROFUNDIDAD ------------------------------------------------------------------------- Daniel: "una discrepancia entre los colores de la barra lateral y del sistema". Tenia razon y el motivo era concreto: el riel estaba tenido de AZUL y el cristal del contenido era NEUTRO (grises casi negros). Dos familias de color en la misma pantalla, por mucho que el fondo sea el mismo. Aqui el cristal se lleva al azul marino de la marca, que es lo que hace que todo parezca cortado de la misma tela. Y es tambien lo que mas sube el impacto visual: la sensacion de "caro" en una interfaz sale de la coherencia de tono y de una escala de sombra que se respeta, mucho mas que de efectos. ========================================================================= */ @media (prefers-color-scheme:dark){:root:not([data-tema="claro"]){ /* Del gris neutro al navy. Los mismos valores de luminosidad, pero con el azul de la marca dentro. */ --cr-vidrio:linear-gradient(150deg,rgba(120,170,235,.10) 0%,rgba(16,32,58,.50) 45%,rgba(8,18,34,.70) 100%); --cr-vidrio-alto:linear-gradient(150deg,rgba(120,170,235,.13) 0%,rgba(20,40,70,.58) 50%,rgba(10,22,42,.76) 100%); --cr-vidrio-tenue:rgba(130,175,240,.07); --cr-borde:rgba(150,190,245,.15); --cr-sombra:0 24px 60px rgba(3,9,20,.66),0 8px 22px rgba(3,9,20,.44); --cr-velo:radial-gradient(ellipse at 50% 22%,rgba(10,26,50,.30) 0%,rgba(3,8,18,.82) 100%); }} :root[data-tema="oscuro"]{ --cr-vidrio:linear-gradient(150deg,rgba(120,170,235,.10) 0%,rgba(16,32,58,.50) 45%,rgba(8,18,34,.70) 100%); --cr-vidrio-alto:linear-gradient(150deg,rgba(120,170,235,.13) 0%,rgba(20,40,70,.58) 50%,rgba(10,22,42,.76) 100%); --cr-vidrio-tenue:rgba(130,175,240,.07); --cr-borde:rgba(150,190,245,.15); --cr-sombra:0 24px 60px rgba(3,9,20,.66),0 8px 22px rgba(3,9,20,.44); --cr-velo:radial-gradient(ellipse at 50% 22%,rgba(10,26,50,.30) 0%,rgba(3,8,18,.82) 100%); } /* El riel baja de saturacion para encontrarse con el contenido a medio camino: antes empezaba en #1E88E5 puro y era la pieza mas brillante de la pantalla, compitiendo con el propio contenido. */ .side{ background: linear-gradient(168deg, rgba(45,125,236,.30) 0%, rgba(21,80,160,.52) 26%, rgba(13,43,85,.76) 60%, rgba(7,17,33,.88) 100%); } /* ---------- El grano ---------- Dos por ciento de ruido sobre todo el fondo. Es el truco viejo que separa un degradado "de plantilla" de una superficie que parece material: sin el, los degradados grandes muestran bandas y se ven planos. Va en el velo que ya existe, asi no anade ningun elemento nuevo. */ body::after{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml;utf8,\ \ \ "); } /* ---------- Escala de sombra ---------- Tres alturas y solo tres. Antes cada componente tenia la suya inventada y por eso nada parecia estar "a la misma altura" del fondo. */ :root{ --cr-alt-1:0 1px 2px rgba(3,9,20,.28),0 2px 8px rgba(3,9,20,.20); --cr-alt-2:0 4px 10px rgba(3,9,20,.34),0 12px 28px rgba(3,9,20,.28); --cr-alt-3:0 12px 28px rgba(3,9,20,.44),0 28px 64px rgba(3,9,20,.40); } .card,.stat,.note,.mplan,.tool,.plan,.find,.tw{box-shadow:var(--cr-alt-1)} .card:hover,.stat:hover,.tool:hover{box-shadow:var(--cr-alt-2)} .side,main{box-shadow:var(--cr-alt-3)} .tope-res,.modal-box{box-shadow:var(--cr-alt-3)} /* Un filo de luz arriba en cada tarjeta. Es lo que da la impresion de que la pieza tiene canto y no es un rectangulo pintado. */ .card,.tw,.find{position:relative} .card::before,.tw::before,.find::before{ content:"";position:absolute;left:12px;right:12px;top:0;height:1px; border-radius:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(190,220,255,.22),transparent); } /* En el informe no: alli no hay canto que insinuar, hay papel. */ .rep .card::before,.doc .card::before,.rep .tw::before,.contrato .card::before{display:none} @media (prefers-reduced-motion: reduce){ } /* ========================================================================= PASADA 5 — EL TEMA CLARO, EN SERIO ------------------------------------------------------------------------- Daniel: "siento que es todo azul, no se si dejar fondo blanco y los contenedores azules". Tiene razon: al unificar el tono, todo quedo navy sobre navy y nada destacaba. En una herramienta que se mira horas, con tablas densas, el fondo claro gana — y ademas los informes y contratos YA son papel blanco, asi que se acaba el salto al abrirlos. La regla del tema claro: el cristal deja de ser cristal. Sobre un fondo claro y con textura, una superficie translucida no da profundidad: da suciedad. Las tarjetas son BLANCAS y macizas, la separacion la hacen la sombra y un borde finisimo, y el unico sitio donde queda color es el riel. ========================================================================= */ :root[data-tema="claro"], :root:not([data-tema="oscuro"]):not([data-tema="claro"]){ /* La seda se apaga casi del todo: queda como un velo de color en las esquinas, no como una foto de fondo. */ --cr-velo:linear-gradient(160deg,rgba(238,243,251,.93) 0%,rgba(246,248,252,.97) 45%,rgba(240,245,252,.94) 100%); --cr-fondo:#EEF2F9; --cr-vidrio:#FFFFFF; --cr-vidrio-alto:#FFFFFF; --cr-vidrio-tenue:#F4F7FC; --cr-borde:#E4EAF3; --cr-alt-1:0 1px 2px rgba(13,43,85,.05),0 2px 8px rgba(13,43,85,.05); --cr-alt-2:0 6px 14px rgba(13,43,85,.09),0 14px 32px rgba(13,43,85,.07); --cr-alt-3:0 10px 26px rgba(13,43,85,.10),0 24px 56px rgba(13,43,85,.09); --cr-sombra:var(--cr-alt-3); --cr-hover-sombra:var(--cr-alt-2); --cr-nav-ink:#0E4A93; --cr-nav-bg:#E8F0FD; --cr-nav-borde:#BBD4F5; --cr-borde-acento:#8FBDF0; } /* Sin desenfoque: no hay nada translucido que desenfocar, y el blur sobre blanco solo cuesta GPU. */ :root[data-tema="claro"] main, :root[data-tema="claro"] .card, :root[data-tema="claro"] .tw, :root[data-tema="claro"] .find, :root[data-tema="claro"] .tope-res, :root:not([data-tema="oscuro"]):not([data-tema="claro"]) main, :root:not([data-tema="oscuro"]):not([data-tema="claro"]) .card, :root:not([data-tema="oscuro"]):not([data-tema="claro"]) .tw, :root:not([data-tema="oscuro"]):not([data-tema="claro"]) .find{ -webkit-backdrop-filter:none;backdrop-filter:none; } /* El filo de luz de las tarjetas es para el cristal oscuro. En blanco sobre blanco no se ve y solo ensucia el borde de arriba. */ :root[data-tema="claro"] .card::before, :root[data-tema="claro"] .tw::before, :root[data-tema="claro"] .find::before, :root:not([data-tema="oscuro"]):not([data-tema="claro"]) .card::before, :root:not([data-tema="oscuro"]):not([data-tema="claro"]) .tw::before, :root:not([data-tema="oscuro"]):not([data-tema="claro"]) .find::before{display:none} /* El grano tambien: sobre claro se ve como polvo en la pantalla. */ :root[data-tema="claro"] body::after, :root:not([data-tema="oscuro"]):not([data-tema="claro"]) body::after{opacity:.018} /* Y los orbes bajan mucho: sobre fondo claro un orbe al 50% es una mancha. */ :root[data-tema="claro"] .bg-orb, :root:not([data-tema="oscuro"]):not([data-tema="claro"]) .bg-orb{opacity:.22} /* El riel se queda oscuro: es el ancla de color de toda la pantalla y lo que hace que las tarjetas blancas parezcan flotar sobre algo. */ :root[data-tema="claro"] .side, :root:not([data-tema="oscuro"]):not([data-tema="claro"]) .side{ background:linear-gradient(168deg,#2D7DEC 0%,#1560C4 30%,#0D2B55 72%,#092039 100%); border-color:rgba(255,255,255,.16); -webkit-backdrop-filter:none;backdrop-filter:none; box-shadow:0 14px 34px rgba(13,43,85,.26),0 4px 12px rgba(13,43,85,.16), 0 1px 0 rgba(255,255,255,.22) inset; } /* ---------- Contraste dentro del riel ---------- Sobre el degradado navy, varios elementos heredaban tintas pensadas para fondo claro y quedaban al borde de no leerse. Los enlaces externos ("Obtener el reporte", "Entrar a la plataforma") eran los peores: se veian como si estuvieran desactivados cuando son dos de las acciones que mas se usan. */ .side .nav-i.ext{color:#E8EFFA} .side .nav-i.ext:hover{color:#fff} .nav-sep{color:#CBDCF5} .tema-sel button{color:#E8EFFA} .tema-sel button:hover{color:#fff} /* ========================================================================= PASADA 6 — FONDO BLANCO Y UN FILO DE ORO ------------------------------------------------------------------------- EL ORO SE FUE (22-sep-2026). Daniel: "vamos a quitar el amarillo de la jugada". Antes habia aqui una regla que decia que el oro marcaba lo que hay que pulsar y el azul donde estas. Ya no: todo es azul. Lo que se conserva es el SITIO donde iba el oro —la accion principal, el filo del riel, el simbolo de la marca— y el cuerpo del boton. Lo unico que cambia es el tono. Los tokens se llaman --cr-accion* y no --cr-oro* justamente para que el nombre no siga diciendo amarillo. Y la regla nueva, que es la que costo entender: sin el oro, la accion principal ya no destaca por TONO. Destaca por ser lo mas SATURADO y solido de la pantalla contra superficies translucidas y apagadas. Si alguna vez el fondo se vuelve azul vivo, la accion hay que volver a distinguirla, y no sera con otro azul. Los valores son los mismos que usa glassy-piel.css a proposito: dos hojas que visten la misma app no pueden discrepar sobre el color. ========================================================================= */ :root[data-tema="claro"], :root:not([data-tema="oscuro"]):not([data-tema="claro"]){ /* Blanco de verdad. La seda se retira del tema claro: un fondo con textura debajo de tablas densas cansa a la media hora. Queda un lavado de color en las esquinas, tan suave que solo se nota si se quita. */ --cr-velo: radial-gradient(900px 520px at 88% -8%, rgba(47,132,240,.07) 0%, transparent 62%), radial-gradient(1000px 620px at 6% 102%, rgba(45,125,236,.07) 0%, transparent 60%), linear-gradient(#FAFCFF, #FAFCFF); --cr-fondo:#FAFCFF; --cr-accion:#2F84F0; --cr-accion-claro:#4B9BF5; --cr-accion-hondo:#134284; } /* La seda solo se ve en oscuro. */ :root[data-tema="claro"] body, :root:not([data-tema="oscuro"]):not([data-tema="claro"]) body{ background:var(--cr-fondo); } :root[data-tema="claro"] .bg-orb, :root:not([data-tema="oscuro"]):not([data-tema="claro"]) .bg-orb{display:none} :root[data-tema="claro"] body::after, :root:not([data-tema="oscuro"]):not([data-tema="claro"]) body::after{opacity:.012} /* ---------- La accion principal ---------- Es el mismo boton con cuerpo del resto del ecosistema (financoreplatform, solutions, realty): base solida abajo, sube 2px al pasar por encima y se hunde 4 al pulsar. */ .btn-gold,.btn-primary{ background:linear-gradient(180deg,#1976D2 0%,#1565C0 100%); color:#FFFFFF; border-color:transparent; box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 -3px 0 rgba(0,0,0,.13) inset, 0 5px 0 var(--cr-accion-hondo,#134284), 0 10px 22px rgba(47,132,240,.30); transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease); } .btn-gold:hover:not(:disabled),.btn-primary:hover:not(:disabled){ transform:translateY(-2px);filter:brightness(1.04); box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -3px 0 rgba(0,0,0,.14) inset, 0 7px 0 var(--cr-accion-hondo,#134284),0 14px 28px rgba(47,132,240,.36); } .btn-gold:active:not(:disabled),.btn-primary:active:not(:disabled){ transform:translateY(3px); box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -2px 0 rgba(0,0,0,.18) inset, 0 2px 0 var(--cr-accion-hondo,#134284),0 4px 9px rgba(47,132,240,.28); } /* ---------- El filo del riel ---------- Una linea de un pixel en el canto derecho. Es el detalle de la referencia que hace que la pieza parezca tener material y no ser un rectangulo. */ .side{ border-right:1px solid rgba(47,132,240,.42); box-shadow:var(--cr-alt-3), 1px 0 0 rgba(47,132,240,.18), 0 1px 0 rgba(255,255,255,.20) inset; } /* El simbolo de la marca en el riel, en el azul claro de la rampa. */ .side-logo .t span{color:var(--cr-accion-claro,#4B9BF5)} /* Y un toque en lo que YA era dorado por significado, para que el amarillo de la app sea siempre el mismo amarillo. */ .cf.t-oro,.cif.t-oro{border-left-color:var(--cr-accion,#2F84F0)} @media (prefers-reduced-motion: reduce){ .btn-gold,.btn-primary, .btn-gold:hover:not(:disabled),.btn-primary:hover:not(:disabled), .btn-gold:active:not(:disabled),.btn-primary:active:not(:disabled){transform:none;transition:none} } /* ---------- El selector de tema, DENTRO del riel ---------- Habia dos reglas para .tema-sel: la generica del sistema (vidrio claro) y la del riel (fondo oscuro). Ganaba la generica por orden, y en tema claro eso dejaba una pastilla blanca con el texto blanco encima: "Oscuro" y "Auto" desaparecian. Se acota al riel para que no dependa del orden. */ .side .tema-sel{ background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.18); border-radius:99px;padding:3px; } .side .tema-sel button{color:#E8EFFA;background:transparent} .side .tema-sel button:hover{color:#fff;background:rgba(255,255,255,.10)} .side .tema-sel button[aria-pressed="true"]{ background:#fff;color:#0D2B55;font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,.24); } /* ========================================================================= EL CHECKOUT ------------------------------------------------------------------------- Tres estados en el mismo marco: resumen, esperando y listo. La coreografia es la del diseno de referencia; el formulario de tarjeta NO esta y no es un descuido — esos 16 digitos se teclean en Stripe, que es lo que mantiene al despacho fuera del alcance de PCI. ========================================================================= */ .chk{min-width:min(680px,88vw)} .chk-top{display:flex;align-items:center;gap:16px;margin-bottom:22px} /* ---------- Los pasos ---------- */ .chk-pasos{display:flex;align-items:center;gap:10px;flex:1;min-width:0} .chk-paso{ display:inline-flex;align-items:center;gap:8px;flex:none; font-size:12px;font-weight:600;color:var(--ink-3);white-space:nowrap; } .chk-paso i{ width:22px;height:22px;border-radius:50%;display:grid;place-items:center; font-style:normal;font-size:11px;font-weight:700; background:var(--cr-vidrio-tenue);border:1px solid var(--cr-borde); transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease); } .chk-paso.ahora{color:var(--ink)} .chk-paso.ahora i{ background:linear-gradient(180deg,var(--cr-accion-claro,#4B9BF5),var(--cr-accion,#2F84F0)); color:#FFFFFF;border-color:transparent;transform:scale(1.08); } .chk-paso.hecho{color:var(--green)} .chk-paso.hecho i{background:var(--green);color:#fff;border-color:transparent} .chk-linea{flex:1;height:1px;background:var(--cr-borde);min-width:14px} /* ---------- El cuerpo, que cambia de paso ---------- La key en el atributo hace que al repintar el navegador lo trate como contenido nuevo y vuelva a correr la animacion de entrada. */ .chk-cuerpo{animation:crEntra .34s cubic-bezier(.22,.8,.28,1) both} .chk-cols{display:grid;grid-template-columns:1.05fr .95fr;gap:22px} @media(max-width:620px){.chk-cols{grid-template-columns:1fr;gap:16px}.chk{min-width:auto}} .chk-et{font-size:9.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-3)} .chk-plan{font-family:var(--fd);font-size:24px;font-weight:800;letter-spacing:-.03em;margin:4px 0 14px} .chk-lista{list-style:none;display:flex;flex-direction:column;gap:9px} .chk-lista li{font-size:13px;color:var(--ink-2);padding-left:20px;position:relative} .chk-lista li::before{ content:"";position:absolute;left:0;top:6px;width:11px;height:6px; border-left:2px solid var(--green);border-bottom:2px solid var(--green); transform:rotate(-45deg);border-radius:1px; } .chk-lista b{color:var(--ink);font-weight:700} .chk-der{ padding:18px;border-radius:16px; background:var(--cr-vidrio-tenue);border:1px solid var(--cr-borde); } .chk-linea-precio{display:flex;justify-content:space-between;align-items:baseline; font-size:13px;color:var(--ink-2);padding:5px 0} .chk-linea-precio b{color:var(--ink);font-weight:700} .chk-linea-precio.ahorro b{color:var(--green)} .chk-total{ display:flex;justify-content:space-between;align-items:baseline; margin-top:10px;padding-top:12px;border-top:1px solid var(--cr-borde); } .chk-total span{font-size:12px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.9px} .chk-total b{font-family:var(--fd);font-size:27px;font-weight:800;letter-spacing:-.04em;color:var(--ink)} .chk-btn{width:100%;margin-top:16px} .chk-seguro{ display:flex;align-items:flex-start;gap:8px;margin-top:11px; font-size:11.5px;color:var(--ink-3);line-height:1.45; } .chk-seguro span{flex:none;color:var(--green)} .chk-seguro svg{width:14px;height:14px} /* ---------- Esperando y listo ---------- */ .chk-centro{text-align:center;padding:14px 10px 6px} .chk-centro h3{font-family:var(--fd);font-size:20px;font-weight:800;letter-spacing:-.025em;margin:18px 0 8px} .chk-centro p{font-size:13.5px;color:var(--ink-2);line-height:1.6;max-width:44ch;margin:0 auto} .chk-acciones{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px} /* El aro que gira mientras se paga en la otra pestana. */ .chk-aro{ width:54px;height:54px;margin:0 auto;border-radius:50%; border:3px solid var(--cr-borde);position:relative; } .chk-aro i{ position:absolute;inset:-3px;border-radius:50%; border:3px solid transparent;border-top-color:var(--cr-accion,#2F84F0); animation:chkGira .9s linear infinite; } @keyframes chkGira{to{transform:rotate(360deg)}} /* El check que se dibuja solo. Es la unica animacion de la app que existe solo para celebrar, y es justo donde toca: el momento en que alguien acaba de pagar. */ .chk-check{width:64px;height:64px;margin:0 auto;display:block} .chk-check .chk-c{ fill:none;stroke:var(--green);stroke-width:2.6; stroke-dasharray:145;stroke-dashoffset:145; animation:chkTrazo .5s cubic-bezier(.22,.8,.28,1) forwards; } .chk-check .chk-v{ fill:none;stroke:var(--green);stroke-width:3.4; stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:36;stroke-dashoffset:36; animation:chkTrazo .32s cubic-bezier(.22,.8,.28,1) .42s forwards; } @keyframes chkTrazo{to{stroke-dashoffset:0}} @media (prefers-reduced-motion: reduce){ .chk-cuerpo{animation:none} .chk-aro i{animation-duration:2.4s} .chk-check .chk-c,.chk-check .chk-v{animation:none;stroke-dashoffset:0} .chk-paso i{transition:none;transform:none} } /* ========================================================================= LA CONSOLA — todo dentro de un solo marco redondeado ------------------------------------------------------------------------- Es LA diferencia que quedaba con la referencia que Daniel lleva enseñando toda la sesion, y no es de color: alli el riel vive DENTRO del contenedor, y el conjunto es una sola pieza flotando sobre el fondo. Nosotros teniamos dos paneles sueltos con un hueco en medio. Por que no se hizo antes: `.side` es `position:sticky`, y un ancestro con `overflow:hidden` —que es como se suele redondear un contenedor— rompe el sticky. La salida es no recortar nada: el marco pone el borde y la sombra, y cada esquina interior se redondea sola. Sin `overflow`, sin romper nada. ========================================================================= */ .app{ padding:0;gap:0; margin:16px; width:auto; border:1px solid var(--cr-borde); border-radius:24px; box-shadow:var(--cr-alt-3); background:var(--cr-vidrio); min-height:calc(100vh - 32px); } /* El riel, dentro y pegado al borde izquierdo del marco. */ .side{ border:0; border-right:1px solid var(--cr-borde); border-radius:23px 0 0 23px; box-shadow:none; height:calc(100vh - 34px); top:17px; margin:0; } /* Y el contenido, sin marco propio: el marco es el de fuera. */ main{ border:0;border-radius:0 23px 23px 0; box-shadow:none;background:transparent; padding:26px 28px 60px; } /* El filo deja de ser el canto del riel y pasa a ser el canto de la consola entera: una linea fina arriba, que se apaga hacia los lados. */ .side{border-right-color:var(--cr-borde)} .app{position:relative} .app::before{ content:"";position:absolute;left:10%;right:10%;top:0;height:1px;z-index:3; border-radius:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(47,132,240,.55),transparent); } @media(max-width:900px){ /* En movil no hay consola: el riel es un cajon y el contenido ocupa todo. */ .app{margin:0;border:0;border-radius:0;box-shadow:none;min-height:100dvh;background:transparent} .app::before{display:none} main{border-radius:0;padding:16px 14px 60px} .side{border-radius:0 20px 20px 0} } /* ---------- El calendario: dias pulsables ---------- Un dia con algo deja de ser texto y pasa a ser boton. Sin esto, tocar un dia no hacia nada y el calendario se sentia de adorno. */ button.ag-d{ border:0;background:transparent;font:inherit;cursor:pointer; color:var(--ink);font-weight:700; transition:background .16s ease,transform .16s ease; } button.ag-d:hover{background:var(--cr-vidrio-tenue)} button.ag-d.elegido{ background:var(--cr-nav-bg); border:1px solid var(--cr-nav-borde); color:var(--cr-nav-ink); } button.ag-d.elegido::after{bottom:2px} /* El rotulo de lo que se esta mirando, con la salida a "lo que viene". */ .ag-rotulo{ display:flex;align-items:center;justify-content:space-between;gap:10px; margin:2px 0 9px; } .ag-rotulo span{ font-size:9.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase; color:var(--ink-3); } .ag-quitar{ border:0;background:transparent;cursor:pointer;font:inherit; font-size:11.5px;font-weight:600;color:var(--cr-nav-ink); padding:4px 6px;border-radius:7px; } .ag-quitar:hover{background:var(--cr-vidrio-tenue)} /* ========================================================================= OSCURO = FONDO BLANCO Y EL AZUL VIVO ------------------------------------------------------------------------- Peticion de Daniel, con la captura del riel delante: "en oscuro este es el azul que quiero tener, con fondo blanco". O sea: la pagina en blanco en los DOS temas, y lo que cambia es la ropa — en claro tarjetas blancas, en oscuro tarjetas oscuras macizas. El riel es el mismo azul vivo en los dos. Lo importante y lo que fallo la primera vez: sobre pagina blanca, el cristal oscuro TRANSLUCIDO deja pasar el blanco y sale gris sucio. Con fondo claro detras, las superficies oscuras tienen que ser OPACAS. ========================================================================= */ :root[data-tema="oscuro"]{ --cr-fondo:#FAFCFF; --cr-velo: radial-gradient(900px 520px at 88% -8%, rgba(47,132,240,.09) 0%, transparent 60%), radial-gradient(1000px 620px at 6% 102%, rgba(45,125,236,.09) 0%, transparent 58%), linear-gradient(#FAFCFF,#FAFCFF); } :root[data-tema="oscuro"] body{background:#FAFCFF} :root[data-tema="oscuro"] .bg-orb{opacity:.18} :root[data-tema="oscuro"] body::after{opacity:.012} /* La consola y sus superficies, macizas. */ :root[data-tema="oscuro"] .app{background:#121A28;border-color:#22304A} :root[data-tema="oscuro"] main{background:transparent} :root[data-tema="oscuro"] .card, :root[data-tema="oscuro"] .stat, :root[data-tema="oscuro"] .note, :root[data-tema="oscuro"] .tool, :root[data-tema="oscuro"] .plan, :root[data-tema="oscuro"] .mplan, :root[data-tema="oscuro"] .find, :root[data-tema="oscuro"] .tw, :root[data-tema="oscuro"] .tope-res, :root[data-tema="oscuro"] .modal-box{ background:#182234;border-color:#2A3A56; -webkit-backdrop-filter:none;backdrop-filter:none; } :root[data-tema="oscuro"] .cf, :root[data-tema="oscuro"] .ag-ev, :root[data-tema="oscuro"] .chk-der, :root[data-tema="oscuro"] .tabs, :root[data-tema="oscuro"] .bar, :root[data-tema="oscuro"] input, :root[data-tema="oscuro"] select, :root[data-tema="oscuro"] textarea{background:#101A2A;border-color:#2A3A56} :root[data-tema="oscuro"] .tj-ic, :root[data-tema="oscuro"] .tr-ini, :root[data-tema="oscuro"] .empty .ic, :root[data-tema="oscuro"] .tab.on{background:#22304A;border-color:#2A3A56} /* EL AZUL. El mismo en los dos temas: es el color de la marca y el ancla de la pantalla, no una variante del tema. */ :root[data-tema="oscuro"] .side, :root[data-tema="claro"] .side{ background:linear-gradient(152deg,#1B5FB8 0%,#123F7E 38%,#0D2B55 72%,#0A1E3C 100%); -webkit-backdrop-filter:none;backdrop-filter:none; border:0;border-right:1px solid rgba(47,132,240,.40); } /* Los botones de accion, iguales en los dos temas: lo que hay que pulsar no cambia con la luz de la pantalla. */ :root[data-tema="oscuro"] .btn-gold, :root[data-tema="oscuro"] .btn-primary{ background:linear-gradient(180deg,#1976D2 0%,#1565C0 100%); color:#FFFFFF;border-color:transparent; box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -3px 0 rgba(0,0,0,.13) inset, 0 5px 0 #134284,0 10px 22px rgba(47,132,240,.30); } /* ---------- El calendario tiene que RESPONDER ---------- Funcionaba y aun asi Daniel insistia en que no. Al probarlo con el raton se vio por que, y no era la logica: 1. Las flechas de mes median 24px. Eso es un objetivo minusculo: se falla el clic y parece que el boton no hace nada. 2. Solo tres dias del mes eran pulsables. Los otros veintiocho no respondian: el calendario se sentia muerto. 3. El dia elegido casi no se distinguia. Un control que a veces responde y a veces no se percibe como roto, aunque cada vez que responde lo haga bien. */ .ag-nav{ width:32px;height:32px;border-radius:9px;font-size:16px; color:var(--ink);border-color:var(--cr-borde); } .ag-nav:hover{background:var(--cr-nav-bg);border-color:var(--cr-nav-borde);color:var(--cr-nav-ink)} .ag-nav:active{transform:scale(.92)} .tj-acts{gap:6px} /* Todos los dias responden al raton, tengan algo o no. */ button.ag-d{min-height:34px} button.ag-d:hover{background:var(--cr-vidrio-tenue);color:var(--ink)} button.ag-d:active{transform:scale(.90)} button.ag-d.elegido{ background:var(--cr-nav-ink); border:1px solid var(--cr-nav-ink); color:#fff;font-weight:800; box-shadow:0 2px 10px rgba(13,43,85,.30); } button.ag-d.elegido::after{background:#fff !important;bottom:3px} /* Hoy, cuando NO es el elegido, se marca con un anillo en vez de con relleno: asi los dos estados se distinguen de un vistazo. */ button.ag-d.hoy:not(.elegido){ background:transparent; border:1.5px solid var(--cr-nav-borde); color:var(--cr-nav-ink); } @media (prefers-reduced-motion: reduce){ .ag-nav:active,button.ag-d:active{transform:none} } /* ========================================================================= OBTENER EL REPORTE — la mini portada ------------------------------------------------------------------------- La recomendacion arriba y a lo ancho, con las cuatro razones al lado; y debajo, los ocho monitores que la app sabe leer. Ese orden importa: se recomienda uno, pero no se esconden los demas. Un consultor cuyo cliente ya usa SmartCredit tiene que ver que tambien le sirve, o concluye que la herramienta no le vale. ========================================================================= */ .rec{ display:grid;grid-template-columns:1fr 1.15fr;gap:22px;align-items:start; padding:26px 28px;border-radius:20px;margin-bottom:8px; background:linear-gradient(152deg,#2F84F0 0%,#1C63BE 34%,#134284 68%,#0E2F60 100%); border:1px solid rgba(47,132,240,.34); box-shadow:var(--cr-alt-3); } @media(max-width:1000px){.rec{grid-template-columns:1fr;gap:18px}} .rec-et{ display:block;font-size:9px;font-weight:800;letter-spacing:1.5px; text-transform:uppercase;color:#CFE4FF;margin-bottom:6px; } .rec-t h3{ font-family:var(--fd);font-size:26px;font-weight:800;letter-spacing:-.03em; color:#fff;margin-bottom:8px; } .rec-t p{font-size:14px;line-height:1.65;color:#E8EFFA} .rec-t p b{color:#fff} .rec-acc{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px} /* ========================================================================= DENTRO DE LA TARJETA AZUL, LA TINTA ES CLARA — SIEMPRE ------------------------------------------------------------------------- Esto es el mismo fallo que me viene persiguiendo todo el dia, y aqui esta escrito para no repetirlo. .rec tiene fondo azul marino en LOS DOS TEMAS. Sus propios textos ya salen claros (.rec-et, .rec-t h3, .rec-t p), pero lo que NO tiene color propio —un .btn-ghost, por ejemplo— hereda la tinta de la PAGINA. Y en tema claro la tinta de la pagina es #12203A. Resultado medido en el navegador: el boton "Entrar a la plataforma" salia a 1.40:1 sobre el azul. Es el "negro en azul" que Daniel lleva señalando desde ayer, y no se veia en tema oscuro porque alli la tinta ya es clara. LA REGLA: el color del texto lo manda la SUPERFICIE donde cae, no el tema de la pagina. Por eso esto va aqui, junto a la tarjeta, y no repartido en los bloques de cada tema. Es exactamente lo que ya se hacia con el menu (.side .btn-ghost, unas lineas mas arriba): mismo problema, misma forma. ========================================================================= */ .rec{color:#E8EFFA} .rec .btn-ghost{ color:#fff; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.34); } .rec .btn-ghost:hover{background:rgba(255,255,255,.22)} .rec-acc .btn-ghost{ background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.26); } .rec-acc .btn-ghost:hover{background:rgba(255,255,255,.20)} /* Las cuatro razones, en vidrio sobre el azul. */ .rec-v{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(max-width:620px){.rec-v{grid-template-columns:1fr}} .vent{ padding:13px 14px;border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.07) 100%); -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%); border:1px solid rgba(255,255,255,.20); box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 6px 16px rgba(3,14,34,.20); } .vent-n{ font-family:var(--fd);font-size:25px;font-weight:800;letter-spacing:-.04em; line-height:1;color:#CFE4FF; } .vent-t{ font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase; color:#fff;margin:4px 0 6px; } .vent p{font-size:12px;line-height:1.5;color:#E8EFFA} /* Los ocho monitores. */ .mon-g{gap:12px} .mon{display:flex;flex-direction:column;gap:6px;position:relative} .mon-c{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .mon-c h4{font-size:15px} .mon .sub{flex:1;font-size:12.5px;line-height:1.5;color:var(--ink-2)} .mon-ir{ align-self:flex-start;margin-top:2px; font-size:12.5px;font-weight:700;color:var(--cr-nav-ink);text-decoration:none; } .mon-ir:hover{text-decoration:underline} /* El nuestro, marcado sin gritar: un filo dorado a la izquierda. */ .mon-on{border-left:3px solid var(--cr-accion,#2F84F0)} /* El dia de corte, editable en la misma tabla donde se decide el pago. Se apunta una vez por tarjeta y ya no se vuelve a tocar. */ .corte-inp{ width:58px;padding:6px 8px;text-align:center;border-radius:9px; font-family:var(--fm);font-size:12.5px;margin:0; } .corte-inp::-webkit-outer-spin-button, .corte-inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} /* ========================================================================= CERTIFICACIÓN ------------------------------------------------------------------------- Reutiliza .rec y .vent de la landing del reporte a propósito: son la misma clase de pantalla —algo de fuera que se explica aquí dentro— y dos lenguajes distintos para lo mismo es lo que hace que una app parezca hecha a trozos. Lo único propio es el número del módulo y la lista de pasos. ========================================================================= */ .cert-mod{position:relative;padding-top:15px} /* El número va detrás del título, grande y tenue: ordena la lectura sin competir con ella. En un
aparte y aria-hidden no hace falta: es contenido real —el módulo 3 se llama así— y un lector lo lee bien. */ .cert-num{ position:absolute;top:10px;right:14px; font-family:var(--fd);font-size:34px;font-weight:800;line-height:1; letter-spacing:-.05em;color:var(--cr-accion,#2F84F0);opacity:.20;pointer-events:none; } .cert-mod .mon-c{padding-right:34px} .cert-mod .bdg{margin:6px 0 8px} /* Los cuatro pasos. Numerados por CSS y no a mano: si mañana se añade uno, la numeración se corrige sola. */ .cert-pasos{list-style:none;counter-reset:cp;display:grid;gap:9px;margin:0;padding:0} .cert-pasos li{ counter-increment:cp;position:relative; padding:13px 15px 13px 50px;border-radius:14px; /* --cr-fondo es el fondo de la PAGINA, no el de una tarjeta: en oscuro esto salia blanco con el titulo invisible encima. Los mismos tokens que usa .card, que si cambian con el tema. */ background:var(--bg);border:1px solid var(--line); box-shadow:var(--cr-alt-1); } .cert-pasos li::before{ content:counter(cp); position:absolute;left:14px;top:12px; width:24px;height:24px;border-radius:50%; display:grid;place-items:center; font-family:var(--fd);font-size:12.5px;font-weight:800; color:#FFFFFF;background:var(--cr-accion,#2F84F0); } /* EN OSCURO LA NEGRITA NO SE VE. Un sin color propio hereda el del contenedor, y en tema oscuro eso acaba siendo un gris que se pierde contra la tarjeta: el titulo del paso desaparecia y solo quedaba la explicacion. El color va dicho, no heredado. */ .cert-pasos li b{display:block;font-size:13.5px;margin-bottom:2px;color:var(--ink)} .cert-pasos li span{font-size:12.5px;line-height:1.6;color:var(--ink-2)} /* ========================================================================= LA TARJETA QUE GIRA — paso de espera del checkout ------------------------------------------------------------------------- Sustituye al aro de carga. Espera lo mismo y dice lo mismo, pero el gesto es el de un pago y no el de un cargador genérico. NO ES UN FORMULARIO Y NO VA A SERLO. Los dígitos son puntos fijos en el HTML. En cuanto un número de tarjeta real pasara por esta pantalla, el despacho entraría en alcance PCI-DSS —auditoría anual y responsabilidad propia ante una filtración— que es justo lo que se evita mandando el pago a Stripe. El dorso lo dice en voz alta, porque el cliente que ve una tarjeta dibujada merece saber dónde se teclea la suya. ========================================================================= */ .tarj{ width:300px;height:189px;margin:0 auto 22px; perspective:1100px; /* sin esto el giro se ve plano */ } .tarj-in{ position:relative;width:100%;height:100%; transform-style:preserve-3d; animation:tarj-giro 7s cubic-bezier(.62,.03,.35,1) infinite; } /* Tres cuartos de la vuelta se está quieta: el giro llama la atención una vez y luego deja mirar. Una tarjeta girando sin parar marea. */ @keyframes tarj-giro{ 0%,38% {transform:rotateY(0deg)} 50%,88% {transform:rotateY(180deg)} 100% {transform:rotateY(360deg)} } .tarj-cara{ position:absolute;inset:0;border-radius:16px; -webkit-backface-visibility:hidden;backface-visibility:hidden; box-shadow:0 18px 40px rgba(3,14,34,.34),inset 0 1px 0 rgba(255,255,255,.28); overflow:hidden; } .tarj-frente{ padding:17px 19px; background:linear-gradient(152deg,#2F84F0 0%,#1C63BE 34%,#134284 68%,#0E2F60 100%); border:1px solid rgba(47,132,240,.34); } /* El brillo que cruza. Va DEBAJO del contenido y no lo tapa. */ .tarj-frente::after{ content:'';position:absolute;inset:0; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%); transform:translateX(-120%); animation:tarj-brillo 7s ease-in-out infinite; } @keyframes tarj-brillo{0%,20%{transform:translateX(-120%)}34%,100%{transform:translateX(120%)}} .tarj-mar{ font-family:var(--fd);font-size:11px;font-weight:800;letter-spacing:2.2px; color:#CFE4FF; } .tarj-chip{ width:38px;height:28px;border-radius:6px;margin:14px 0 13px; background:linear-gradient(145deg,#4B9BF5,#134284); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } .tarj-num{ font-family:var(--fm,ui-monospace,monospace); font-size:16px;letter-spacing:1.5px;color:#FFFFFF; } .tarj-pie{ position:absolute;left:19px;right:19px;bottom:15px; display:flex;justify-content:space-between;align-items:flex-end;gap:10px; } .tarj-pie span{ display:block;font-size:8px;font-weight:800;letter-spacing:1.3px; color:#CBDCF5;margin-bottom:2px; } .tarj-pie b{ font-family:var(--fd);font-size:14px;font-weight:800;letter-spacing:-.02em;color:#fff; display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .tarj-der{text-align:right} .tarj-der b{color:#CFE4FF;font-size:17px;max-width:none} /* ---- El dorso ---- */ .tarj-dorso{ transform:rotateY(180deg); padding:0; background:linear-gradient(160deg,#0E2F60 0%,#081F42 100%); border:1px solid rgba(47,132,240,.26); } .tarj-banda{height:38px;margin-top:17px;background:#050D1E} .tarj-firma{ display:flex;align-items:center;gap:8px;margin:15px 19px 0; } .tarj-firma i{ flex:1;height:22px;border-radius:4px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.80) 0 6px,rgba(255,255,255,.62) 6px 12px); } .tarj-firma em{ font-family:var(--fm,ui-monospace,monospace);font-style:normal; font-size:10px;font-weight:700;letter-spacing:1.4px;color:#CFE4FF; } .tarj-nota{ margin:12px 19px 0;font-size:10.5px;line-height:1.5; color:#CBDCF5; } /* Quien pidió que no se mueva nada, no ve nada moverse: la tarjeta se queda de frente y quieta. Sigue diciendo el plan y el total, que es lo que informa. */ @media(prefers-reduced-motion:reduce){ .tarj-in{animation:none} .tarj-frente::after{animation:none;opacity:0} } /* ------------------------------------------------------------------------- La tarjeta, al estilo de la referencia que mandó Daniel: negra de cristal. Lo que la separa del resto es que es NEGRA, no el color del chip: tiene que leerse como un objeto aparte apoyado encima, no como un trozo más de la pantalla. Antes el chip y las cifras iban en oro para reforzarlo; ahora van en azul claro y quien hace el trabajo es el negro, que ya lo hacía. ------------------------------------------------------------------------- */ .tarj-frente{ background: radial-gradient(120% 90% at 82% -10%, rgba(47,132,240,.20) 0%, transparent 58%), linear-gradient(152deg,#1B2130 0%,#141926 42%,#0B0E16 100%); border:1px solid rgba(47,132,240,.30); -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%); } .tarj-dorso{ background:linear-gradient(160deg,#141926 0%,#0B0E16 100%); border:1px solid rgba(47,132,240,.22); } /* El hilo de oro del borde superior, que es lo que le da el acabado. */ .tarj-frente::before{ content:'';position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent,rgba(245,188,74,.85),transparent); } .tarj-num{color:#E8EFFA} .tarj-pie b{color:#FFFFFF} /* ------------------------------------------------------------------------- Tu marca: Agenda y Logo en la misma columna. .grid2 son dos columnas y habia tres tarjetas, asi que Logo caia en una fila nueva y dejaba el hueco de abajo a la derecha. Metiendo las dos en un solo contenedor pasan a ser UNA celda y el hueco desaparece. ------------------------------------------------------------------------- */ .mk-col{display:grid;gap:12px;align-content:start} /* ------------------------------------------------------------------------- Sesión prestada: el aviso de que esta cuenta no es tuya. En ámbar y no en el azul del sistema: tiene que leerse como algo que NO es parte normal de la pantalla. Y no se puede cerrar — un aviso que se quita con una X deja de avisar a los diez segundos. ------------------------------------------------------------------------- */ .suplant{ margin:0 0 14px;padding:12px 16px;border-radius:13px; font-size:13px;line-height:1.55; color:#3D2A05;background:linear-gradient(160deg,#FFE3A6 0%,#F9CE73 100%); border:1px solid rgba(184,120,14,.42); box-shadow:0 4px 14px rgba(184,120,14,.18); } .suplant b{color:#2A1D03} /* ========================================================================= CAJA NEGRA ------------------------------------------------------------------------- La tabla es ancha —hasta ocho columnas— y eso en una pantalla de portatil no cabe sin recortar algo. Aqui se recorta el ANCHO DE COLUMNA y no el numero de columnas: un consultor que busca capital necesita ver el buro y el score minimo a la vez, y esconder columnas le obligaria a abrir filas una por una. ========================================================================= */ .cn-tabla{width:100%;border-collapse:collapse;font-size:12.5px} .cn-tabla th{ text-align:left;white-space:nowrap; font-size:10px;letter-spacing:.8px;text-transform:uppercase; padding:9px 10px; } .cn-tabla td{padding:10px;vertical-align:top;line-height:1.4;max-width:230px} .cn-tabla td:first-child{min-width:150px} .cn-tabla tr:hover td{background:rgba(47,132,240,.05)} /* La sigla del banco, detras del nombre y discreta: ayuda a reconocerlo de un vistazo sin competir con el nombre de verdad. */ .cn-sigla{ font-style:normal;font-size:10px;font-weight:700;letter-spacing:.6px; /* Sin opacity: al 60 % median 2,65-2,89:1 (auditoria 29-sep-2026, WCAG 1.4.3). */ margin-left:4px; } /* Los separadores de grupo ("BANCOS NACIONALES — ..."). Son fila de tabla y no un

aparte porque tienen que desplazarse CON la tabla. */ .cn-grupo td{ font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase; padding:14px 10px 6px !important; background:transparent !important; } /* El filtro de consulta suave, al lado del buscador. */ .cn-solo{ display:inline-flex;align-items:center;gap:7px;white-space:nowrap; font-size:12.5px;font-weight:600;cursor:pointer;padding:0 4px; } .cn-solo input{width:16px;height:16px;margin:0;accent-color:#2F84F0} @media(max-width:720px){ /* En un telefono la tabla se desplaza a lo ancho, que es lo unico honesto con ocho columnas. .tw ya trae el scroll; aqui solo se aprieta. */ .cn-tabla{font-size:12px} .cn-tabla td{padding:8px;max-width:190px} .find:has(.cn-solo){flex-wrap:wrap} } /* Los bloques de Estrategia de Caja Negra. */ .cn-est-g{margin-bottom:22px} .cn-est h4{margin:0 0 4px} .cn-est .sub{margin:0 0 10px} .cn-lista{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px} .cn-lista li{ position:relative;padding-left:18px;font-size:13px;line-height:1.45; } .cn-lista li::before{ content:"";position:absolute;left:2px;top:.55em; width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.45; } /* El mapa de buros: el nombre del buro manda y los bancos van debajo. Es lo que se mira de un vistazo antes de que el cliente aplique. */ .cn-buros{display:grid;gap:9px;margin-bottom:10px} .cn-buros > div{ padding:9px 11px;border-radius:11px; background:rgba(47,132,240,.07);border:1px solid rgba(19,66,132,.12); } .cn-buros b{ display:block;font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase; margin-bottom:3px; } .cn-buros span{display:block;font-size:12.5px;line-height:1.4} /* La linea que dice lo que hay que hacer con todo lo de arriba. */ .cn-clave{ margin:0;padding:9px 11px;border-radius:10px;font-size:12.5px;line-height:1.5; background:rgba(47,132,240,.08);border-left:3px solid #2F84F0;font-weight:500; } /* ========================================================================= EL INFORME ES PAPEL BLANCO EN LOS DOS TEMAS ------------------------------------------------------------------------- Daniel: "en el tema oscuro no se ve nada de las letras grises". Medido dentro de .rep con el tema en oscuro: p 1.39:1 texto claro sobre papel blanco h3.cie-k 1.19:1 b (en .box) 1.17:1 texto oscuro sobre caja oscura O sea que fallaba en las DOS direcciones a la vez, y por el mismo motivo: el informe es papel blanco SIEMPRE —esta marcado como intocable porque se imprime y se le entrega al cliente— y las .box de dentro son oscuras SIEMPRE. Ninguna de las dos superficies cambia con el tema, pero el color del texto si lo hacia. Es la sexta vez hoy que aparece lo mismo: EL COLOR DEL TEXTO LO DECIDE LA SUPERFICIE QUE TIENE DEBAJO, NO EL TEMA EN QUE ESTE LA PAGINA. Por eso esto no arregla los tres elementos reportados: recolorea las dos superficies enteras y saca las excepciones. Lo que se anada manana nace legible. ========================================================================= */ /* ---- El papel: tinta oscura, pase lo que pase con el tema ---- */ :is(.rep,.doc,.hoja,.contrato){color:#1E2A3A} :is(.rep,.doc,.hoja,.contrato) :is(h1,h2,h3,h4,h5,p,li,td,th,b,strong,em,i,span,div,small){ color:inherit; } :is(.rep,.doc,.hoja,.contrato) :is(h1,h2,h3,h4,h5){color:#12203A} :is(.rep,.doc,.hoja,.contrato) :is(.sub,.mut,small){color:#4A5872} /* ---- Las cajas de dentro tambien son PAPEL ---- Aqui escribi primero que eran oscuras y que la tinta se invertia. Era falso: su degradado arranca en rgba(...,.12) —casi transparente— y detras hay papel blanco, asi que la caja iba de casi-blanco a casi-negro y no hay color de letra que gane en los dos extremos. Ese degradado esta pensado para el lienzo oscuro de la app, no para una hoja que se imprime. Dentro del informe la caja es un panel opaco y claro, igual en los dos temas, y lo que la distingue es una banda lateral de color en vez del fondo. Asi se ve igual en pantalla que en papel. */ :is(.rep,.doc,.hoja,.contrato) .box{ background:#F4F7FC !important; border:1px solid rgba(19,66,132,.14) !important; color:#1E2A3A !important; -webkit-backdrop-filter:none !important;backdrop-filter:none !important; } :is(.rep,.doc,.hoja,.contrato) .box :is(b,strong){color:#12203A !important} :is(.rep,.doc,.hoja,.contrato) .box.amb{border-left:4px solid #C77700 !important} :is(.rep,.doc,.hoja,.contrato) .box.red{border-left:4px solid #B3261E !important} :is(.rep,.doc,.hoja,.contrato) .box.blu{border-left:4px solid #1C63BE !important} /* ========================================================================= EL ICONO QUE SE COMIA LA PAGINA ------------------------------------------------------------------------- .drop .ic y .empty .ic dimensionan con font-size, que es lo que hacia falta cuando el icono era un emoji. Ahora ahi va un que solo trae viewBox — y un SVG sin width ni height se estira hasta llenar a su padre. De ahi el rayo de mil cuatrocientos pixeles al subir un reporte. Se rompio cuando los iconos pasaron de glifo a SVG y estas dos reglas se quedaron sin actualizar. No se toca el font-size: sigue valiendo si algun dia vuelve a haber un emoji ahi. ========================================================================= */ .drop .ic svg{width:30px;height:30px;display:block;margin:0 auto} .empty .ic svg{width:38px;height:38px;display:block;margin:0 auto} /* Cinturon: cualquier .ic que reciba un SVG suelto no puede desbordarse. */ .ic > svg{max-width:100%;max-height:64px} /* El boton de "sube el reporte para generar el informe". Es el unico que se puede pulsar en esa tarjeta, asi que va en azul y entero. Lleva clase propia y no .btn-blue porque no hace lo mismo: no abre nada, explica que falta — y si manana se quiere distinguir, ya esta separado. */ .btn-azul-falta{ /* Azul de marca: el degradado claro median 3,7:1 con blanco (29-sep-2026). */ background:linear-gradient(180deg,#1976D2 0%,#1565C0 100%); color:#fff; border:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 0 0 1px rgba(19,66,132,.30), 0 6px 16px -5px rgba(28,99,190,.45); } .btn-azul-falta:hover{ filter:brightness(1.05); box-shadow:inset 0 1px 0 rgba(255,255,255,.36), 0 0 0 1px rgba(19,66,132,.36), 0 10px 22px -6px rgba(28,99,190,.55); } .btn-azul-falta:active{box-shadow:inset 0 2px 5px rgba(8,22,48,.36)}