/* app.rutaok.cl/assets/css/nivel.css Acabado por nivel de plan — RutaOk v9. Se carga SIEMPRE, despues de app.css, y no pinta nada por su cuenta: todo lo que hay aca cuelga de body[data-nivel="pro"] o body[data-nivel="elite"], que escribe layout.php leyendo el plan de la cuenta. ----------------------------------------------------------------------------- LA REGLA ----------------------------------------------------------------------------- El nivel base no se toca. Ni un color mas apagado, ni una sombra menos, ni un efecto retirado. Una cuenta gratuita ve exactamente la misma pantalla que veia ayer. Lo que hace este archivo es SUMAR sobre eso: pro la luz ambiental sube, las tarjetas ganan un filo vivo que va del verde al marino, el boton principal proyecta mas lejos y la barra lleva el sello del plan. elite todo lo de pro, mas un hilo de oro contenido -bordes, sello, filos- y una tercera capa calida en la luz de fondo. Si alguien mira las tres pantallas juntas, el orden se lee solo. Si mira solo la gratuita, no le falta nada. ----------------------------------------------------------------------------- POR QUE ORO Y NO OTRO COLOR ----------------------------------------------------------------------------- El verde ya significa algo en RutaOk: "al dia", "aprobado", el medidor sano. Usarlo para decir "plan caro" es pisar un significado que la app ya usa en cada documento. El marino es la estructura. Quedaba libre un calido, y el oro -desaturado, en hairlines de 1px y nunca como fondo- es el unico que dice categoria sin discutirle el semaforo a ningun dato. Nada de esto toca los estados: rojo sigue siendo vencido y ambar sigue siendo por vencer en los tres niveles. Las tarjetas con color semantico quedan excluidas a proposito de los bordes de nivel. Indice ------ 00 Tokens por nivel 01 Sello del plan 02 Pro 03 Elite 04 Responsive, movimiento reducido e impresion */ /* ============================================================================= 00 TOKENS POR NIVEL ----------------------------------------------------------------------------- Se redefinen sobre body y no sobre :root porque el nivel es de la cuenta, no del documento. Heredan igual a todo -incluidos body::before y body::after-, asi que la luz de fondo cambia sin una sola regla extra. ============================================================================= */ body[data-nivel="pro"], body[data-nivel="elite"] { /* La luz de la firma, mas presente. Mismo color, mas materia. */ --luz-a: rgba(34, 197, 94, .22); --luz-b: rgba(28, 82, 160, .17); --luz-opacidad: 1; --sombra-alta: 0 2px 4px rgba(10, 31, 61, .07), 0 34px 68px -26px rgba(10, 31, 61, .34); --glow-verde: 0 0 0 1px color-mix(in srgb, var(--verde-400) 30%, transparent), 0 24px 54px -16px color-mix(in srgb, var(--verde-600) 50%, transparent); /* El filo de las superficies: verde arriba a la izquierda, marino abajo a la derecha. Es el mismo recorrido que hace la luz al cruzar la pantalla. */ --nivel-borde: linear-gradient(140deg, color-mix(in srgb, var(--verde-400) 52%, var(--borde-suave)) 0%, var(--borde-suave) 38%, var(--borde-suave) 62%, color-mix(in srgb, var(--marino-600) 42%, var(--borde-suave)) 100%); --nivel-borde-vivo: linear-gradient(140deg, var(--verde-400) 0%, color-mix(in srgb, var(--verde-500) 45%, var(--borde-suave)) 42%, color-mix(in srgb, var(--marino-600) 65%, var(--borde-suave)) 100%); } html[data-theme="oscuro"] body[data-nivel="pro"], html[data-theme="oscuro"] body[data-nivel="elite"] { --luz-a: rgba(34, 197, 94, .38); --luz-b: rgba(22, 72, 127, .50); } body[data-nivel="elite"] { /* Oro desaturado. En claro tiene que leerse contra blanco; en oscuro, no encandilar. Son dos valores distintos por eso, no por gusto. */ --oro: #c09a55; --oro-alto: #e0c38a; --oro-hilo: color-mix(in srgb, var(--oro) 45%, transparent); --oro-halo: color-mix(in srgb, var(--oro) 22%, transparent); --nivel-borde: linear-gradient(140deg, color-mix(in srgb, var(--verde-400) 48%, var(--borde-suave)) 0%, var(--borde-suave) 34%, var(--borde-suave) 58%, color-mix(in srgb, var(--oro) 46%, var(--borde-suave)) 84%, color-mix(in srgb, var(--marino-600) 40%, var(--borde-suave)) 100%); --nivel-borde-vivo: linear-gradient(140deg, var(--verde-400) 0%, color-mix(in srgb, var(--verde-500) 40%, var(--borde-suave)) 34%, var(--oro) 72%, color-mix(in srgb, var(--marino-600) 70%, var(--borde-suave)) 100%); } html[data-theme="oscuro"] body[data-nivel="elite"] { --oro: #e3c68d; --oro-alto: #f4e2bb; } /* ============================================================================= 01 SELLO DEL PLAN ----------------------------------------------------------------------------- Va pegado a la marca, en la barra. Dice el nombre del plan contratado, no una categoria inventada: si la persona paga "Flota", ahi dice Flota. En base no existe -no hay nada que sellar- y el marcado ni siquiera se imprime, asi que la barra de una cuenta gratuita queda igual que siempre. ============================================================================= */ .sello-plan { display: inline-flex; align-items: center; gap: .34rem; flex: 0 0 auto; margin-left: -.4rem; padding: .16rem .5rem .16rem .42rem; border-radius: 999px; border: 1px solid transparent; font-family: "Space Grotesk", sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1.5; white-space: nowrap; user-select: none; text-decoration: none; transition: transform var(--vel) var(--curva), box-shadow var(--vel) ease; } /* Es un enlace a "Mi plan", no un adorno: quien mira su sello suele estar yendo justo ahi. Se mueve apenas para que se note que se puede tocar. */ .sello-plan:hover { transform: translateY(-1px); } .sello-plan:focus-visible { outline: 2px solid var(--verde-500); outline-offset: 3px; } /* El punto: el mismo que usa el pie de marca. Es la firma en tamano minimo. */ .sello-plan::before { content: ""; width: .38rem; height: .38rem; border-radius: 50%; flex: 0 0 auto; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); } .sello-plan--pro { color: var(--verde-600); background: color-mix(in srgb, var(--verde-400) 12%, transparent); border-color: color-mix(in srgb, var(--verde-500) 30%, transparent); } .sello-plan--elite { position: relative; overflow: hidden; color: var(--oro); background: linear-gradient(120deg, color-mix(in srgb, var(--oro) 14%, transparent), color-mix(in srgb, var(--marino-600) 12%, transparent)); border-color: var(--oro-hilo); box-shadow: 0 6px 18px -12px color-mix(in srgb, var(--oro) 70%, transparent); } /* Un destello lento cruza el sello elite. Es el unico elemento de la interfaz con animacion permanente: uno solo, chico y a 9 segundos, porque una pantalla que titila en varios lados deja de verse cara y empieza a verse barata. */ .sello-plan--elite::after { content: ""; position: absolute; top: -60%; bottom: -60%; left: -70%; width: 40%; background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--oro-alto) 60%, transparent), transparent); transform: skewX(-20deg); animation: sello-brillo 9s var(--curva-firme) infinite; pointer-events: none; } @keyframes sello-brillo { 0%, 72% { transform: skewX(-20deg) translateX(0); opacity: 0; } 78% { opacity: 1; } 100% { transform: skewX(-20deg) translateX(560%); opacity: 0; } } /* ============================================================================= 02 PRO ----------------------------------------------------------------------------- Cuatro cosas: el filo de las superficies, el alcance del boton principal, la barra y los medidores. Nada de tipografia ni de espaciado: el layout de la aplicacion es el mismo en los tres niveles, y tiene que serlo, porque es la misma aplicacion. ============================================================================= */ /* --- Superficies con filo vivo --------------------------------------------- Doble fondo: el color real en padding-box y el degradado en border-box. Da un borde de 1px con degradado sin un solo pseudo-elemento, que estan todos ocupados (::before es el reflejo del cursor, ::after la barra de la metrica). Quedan fuera las tarjetas con color semantico -limite, critica, atenta-: ahi el borde ES el dato, y pintarlo de verde y marino seria taparlo. */ body[data-nivel="pro"] .tarjeta:not(.limite):not(.es-critica):not(.es-atenta), body[data-nivel="elite"] .tarjeta:not(.limite):not(.es-critica):not(.es-atenta), body[data-nivel="pro"] .ficha__cabecera, body[data-nivel="elite"] .ficha__cabecera, body[data-nivel="pro"] .vehiculo, body[data-nivel="elite"] .vehiculo { border-color: transparent; background: linear-gradient(var(--superficie), var(--superficie)) padding-box, var(--nivel-borde) border-box; box-shadow: var(--sombra), var(--filo); } body[data-nivel="pro"] .tarjeta:not(.limite):not(.es-critica):not(.es-atenta):hover, body[data-nivel="elite"] .tarjeta:not(.limite):not(.es-critica):not(.es-atenta):hover, body[data-nivel="pro"] .vehiculo:hover, body[data-nivel="elite"] .vehiculo:hover { border-color: transparent; background: linear-gradient(var(--superficie), var(--superficie)) padding-box, var(--nivel-borde-vivo) border-box; box-shadow: var(--glow-verde); } /* La barra lateral de las metricas: mismo recorrido que el filo. */ body[data-nivel="pro"] .tarjeta--metrica:not(.es-critica):not(.es-atenta)::after, body[data-nivel="elite"] .tarjeta--metrica:not(.es-critica):not(.es-atenta)::after { width: 5px; background: linear-gradient(180deg, var(--verde-400), var(--verde-600) 62%, var(--marino-600)); } /* --- El boton principal proyecta mas lejos --------------------------------- */ body[data-nivel="pro"] .boton--principal, body[data-nivel="elite"] .boton--principal { box-shadow: 0 1px 2px rgba(10, 31, 61, .12), 0 18px 38px -14px var(--verde-glow), 0 0 0 1px color-mix(in srgb, var(--verde-400) 32%, transparent), var(--filo-boton); } body[data-nivel="pro"] .boton--principal:hover, body[data-nivel="elite"] .boton--principal:hover { box-shadow: 0 1px 2px rgba(10, 31, 61, .12), 0 28px 56px -16px var(--verde-glow), 0 0 0 1px color-mix(in srgb, var(--verde-400) 70%, transparent), var(--filo-boton); } /* --- Barra superior -------------------------------------------------------- El hilo verde del borde inferior ya existia al 50%. Aca sube y se ensancha apenas: es la primera pieza que se ve al entrar y la que fija el tono. EL `:not(.barra--conducir)` NO ES COSMETICO Y NO SE PUEDE SACAR. El HUD del chofer es una barra verde -o negra en modo ruta- con TEXTO BLANCO encima. Esta regla le ponia el fondo claro de la superficie: blanco sobre blanco. La barra entera desaparecia -el boton de volver, el reloj, la patente, todo- y el chofer se quedaba sin ninguna salida de la pantalla, porque el modo conductor no tiene menu. Y solo pasaba en las cuentas Pro y Elite, que son las que traen data-nivel: una cuenta base se veia bien. Por eso paso desapercibido. La causa de fondo es la especificidad: `body[data-nivel] .barra` pesa mas que `.barra--conducir`, y este archivo ademas se carga DESPUES de app.css. El acabado por plan es para la aplicacion de administrar; la pantalla del que maneja no cambia de aspecto segun cuanto pague su empresa. */ body[data-nivel="pro"] .barra:not(.barra--conducir)::after, body[data-nivel="elite"] .barra:not(.barra--conducir)::after { opacity: .9; height: 1.5px; } body[data-nivel="pro"] .barra:not(.barra--conducir), body[data-nivel="elite"] .barra:not(.barra--conducir) { background: color-mix(in srgb, var(--superficie) 88%, transparent); } /* --- Medidores ------------------------------------------------------------- La pista gana profundidad y el relleno un halo. El color no cambia: verde sano y ambar cuando queda poco, igual que en base. Un medidor no puede significar cosas distintas segun el plan. */ body[data-nivel="pro"] .medidor__pista, body[data-nivel="elite"] .medidor__pista { height: 7px; box-shadow: inset 0 1px 3px rgba(10, 31, 61, .14); } body[data-nivel="pro"] .medidor__relleno:not(.es-lleno), body[data-nivel="elite"] .medidor__relleno:not(.es-lleno) { box-shadow: 0 0 12px -1px var(--verde-glow); } /* --- Placa patente --------------------------------------------------------- Un filo exterior calido, de 1px, alrededor de la placa. La placa en si no se toca: fondo blanco, letras negras y verde para electricos, como en la calle. */ body[data-nivel="pro"] .placa { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 2px 6px -1px rgba(10, 31, 61, .28); } /* ============================================================================= 03 ELITE ----------------------------------------------------------------------------- Lo de pro, y encima el hilo de oro. Todo lo que sigue son bordes, filos y una capa de luz: cero fondos dorados, cero tipografia dorada sobre texto largo. ============================================================================= */ /* --- La luz de fondo gana una tercera capa, calida y muy abierta ------------ Se reescribe ::after entero porque es una sola propiedad con tres gradientes; no hay forma de agregarle uno sin repetir los otros dos. */ body[data-nivel="elite"]::after { background: radial-gradient(900px circle at var(--luz-x) var(--luz-y), var(--luz-b), transparent 72%), radial-gradient(1100px 480px at 12% -8%, color-mix(in srgb, var(--verde-400) 8%, transparent), transparent 60%), radial-gradient(920px 520px at 92% 4%, color-mix(in srgb, var(--oro) 10%, transparent), transparent 62%); } /* --- Barra: hilo doble ------------------------------------------------------ El verde sigue siendo el hilo; el oro es la sombra que proyecta hacia abajo. Puesto asi, el oro nunca compite con el verde de marca: lo acompana. */ body[data-nivel="elite"] .barra:not(.barra--conducir)::after { box-shadow: 0 1.5px 0 0 var(--oro-hilo); } body[data-nivel="elite"] .barra.es-desplazada:not(.barra--conducir) { box-shadow: 0 1px 0 var(--borde-suave), 0 16px 38px -22px rgba(10, 31, 61, .55), 0 0 42px -18px var(--oro-halo); } /* --- La marca, con el filo calido al final del degradado ------------------- */ body[data-nivel="elite"] .barra__marca-texto { background: linear-gradient(120deg, var(--marino-900), var(--verde-600) 78%, var(--oro) 130%); -webkit-background-clip: text; background-clip: text; } body[data-nivel="elite"] .barra__marca:hover img { box-shadow: 0 8px 22px -8px var(--oro-halo), 0 0 0 1px var(--oro-hilo); } /* --- Boton principal: anillo de oro al pasar el mouse ---------------------- Solo en hover, y solo en el principal. Un boton dorado permanente convierte cada pantalla en una promocion; un filo que aparece cuando la mano llega es lo que se siente caro. */ body[data-nivel="elite"] .boton--principal:hover { box-shadow: 0 1px 2px rgba(10, 31, 61, .12), 0 28px 56px -16px var(--verde-glow), 0 0 0 1px color-mix(in srgb, var(--oro) 60%, transparent), 0 0 26px -10px var(--oro-halo), var(--filo-boton); } /* --- Boton marino: el mismo tratamiento en la accion de confirmar ---------- */ body[data-nivel="elite"] .boton--marino:hover { box-shadow: 0 1px 2px rgba(7, 22, 51, .2), 0 22px 46px -14px rgba(10, 31, 61, .9), 0 0 0 1px color-mix(in srgb, var(--oro) 45%, transparent), var(--filo-boton); } /* --- Panel del menu de cuenta: filo superior ------------------------------- */ body[data-nivel="elite"] .menu-cuenta__panel { border-top: 1px solid var(--oro-hilo); box-shadow: var(--sombra-alta), 0 0 30px -20px var(--oro-halo); } /* --- Placa patente: anillo calido ------------------------------------------ La placa de una cuenta elite se apoya sobre una sombra tibia. Sigue siendo una placa chilena; lo que cambia es el aire alrededor. */ body[data-nivel="elite"] .placa { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 1px var(--oro-hilo), 0 3px 10px -2px color-mix(in srgb, var(--oro) 35%, transparent); } body[data-nivel="elite"] .placa--baja { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 1px 2px rgba(10, 31, 61, .22); } /* --- Insignias: el filo tambien llega a las etiquetas ---------------------- */ body[data-nivel="elite"] .insignia--empresa { background: linear-gradient(120deg, color-mix(in srgb, var(--marino-600) 12%, transparent), color-mix(in srgb, var(--oro) 10%, transparent)); box-shadow: inset 0 0 0 1px var(--oro-hilo); } /* --- Pie de marca ---------------------------------------------------------- */ body[data-nivel="elite"] .pie__marca .punto { box-shadow: 0 0 0 3px var(--oro-halo); } /* ============================================================================= 04 RESPONSIVE, MOVIMIENTO REDUCIDO E IMPRESION ============================================================================= */ /* En el telefono la barra se aprieta: el sello pierde el texto y queda como el punto solo, que es lo unico que ahi todavia se lee. */ @media (max-width: 620px) { .sello-plan { margin-left: -.15rem; padding: .16rem; gap: 0; } .sello-plan span { display: none; } .sello-plan::before { width: .42rem; height: .42rem; } } /* Sin cursor no hay hover: el filo vivo de las superficies no se alcanza nunca. Se deja el estado en reposo un punto mas presente para compensar. */ @media (hover: none), (pointer: coarse) { body[data-nivel="pro"] .tarjeta:not(.limite):not(.es-critica):not(.es-atenta), body[data-nivel="elite"] .tarjeta:not(.limite):not(.es-critica):not(.es-atenta) { background: linear-gradient(var(--superficie), var(--superficie)) padding-box, var(--nivel-borde-vivo) border-box; } } @media (prefers-reduced-motion: reduce) { .sello-plan--elite::after { animation: none; opacity: 0; } } /* En papel no hay niveles: un documento impreso es el mismo para todos. */ @media print { .sello-plan { display: none !important; } body[data-nivel="pro"] .tarjeta, body[data-nivel="elite"] .tarjeta, body[data-nivel="pro"] .vehiculo, body[data-nivel="elite"] .vehiculo, body[data-nivel="pro"] .ficha__cabecera, body[data-nivel="elite"] .ficha__cabecera { background: #fff; border: 1px solid #ccc; box-shadow: none; } body[data-nivel="elite"] .placa { box-shadow: none; } }