que pinta cabeceraRx(), y ahí es donde viven el fondo gris, la tinta y la talla del módulo. `.rx-barra` y sus piezas (`-izq`, `-t`, `-fin`, `.rx-icono-app`, `.rx-barra-btn`) ya no las pinta nadie y se han borrado: reglas muertas que nadie se atreve a tocar son lo que convierte una hoja en un desván. =========================================================================== */ /* `.rx-pagina` va DESPUÉS de `.pagina` de app.css en el orden de carga y con la misma especificidad, que es como le quita los anchos y el relleno del panel sin tocar app.css: el módulo trae los suyos en `.rx-lienzo`. */ .rx-pagina{ background:var(--i-fondo); display:flex;flex-direction:column; width:100%;max-width:none;margin:0;padding:0; } /* La talla y la tinta del módulo alcanzan también a lo que rx.js CUELGA DEL —la lista de tratamientos y los dos modales (propiedades y firma)—, que queda fuera de `.rx-pagina`. Es la misma trampa que dejó el diálogo de firma sin color cuando las variables se declararon en `.rx`: lo que se cuelga del body no hereda de la página. */ .rx-pagina,.rx-lista,.rx-modal{ font-size:.875rem; /* 14px · html sigue a 16, no al body */ color:var(--i-tinta); } /* EL ANCHO DE LA PANTALLA, EN UNA SOLA VARIABLE. El módulo tiene dos anchos —1030 el lienzo normal y 1360 el que lleva la carta dental dentro (`.rx-lienzo-rx`)— y hasta ahora solo lo sabía `.rx-lienzo`: los avisos y el pie llevaban 1030 clavado, así que en las TRES pantallas con contenido (New Scan, Pago, Ver Rx) el cartel de administración, el flash de «Receta firmada» y la nota de precios empezaban 80 px a la derecha del borde de la tarjeta que tenían encima y acababan 80 px antes. Se leían como de otra página, que es justo lo que el comentario del pie decía querer evitar. `:has()` mira qué lienzo trae la pantalla y lo dice UNA vez, en el , para que llegue también al pie —que vive fuera de `.rx-pagina`—. Un navegador sin `:has()` se queda con 1030, que es exactamente lo que había antes: se pierde la mejora, no la página. */ body.rx-app{--rx-ancho:1030px} body.rx-app:has(.rx-lienzo-rx){--rx-ancho:1360px} /* Los avisos del cascarón (el cartel de administración a las clínicas y el flash de la acción anterior) dentro del módulo: mismo ancho que el lienzo, y `flex:0 0 auto` porque `.rx-pagina` es una columna flexible y sin eso el aviso se estiraría hasta el pie. */ .rx-avisos{flex:0 0 auto;width:100%;max-width:var(--rx-ancho,1030px);margin:0 auto; padding:14px 14px 0} /* Volver: un chevron de texto, no un botón — no compite con lo que hay al lado. Vive en la cabecera del cuadro de PROPIEDADES (lo pinta rx.js:467), que es lo único que todavía lo usa desde que la barra vieja desapareció. */ .rx-volver{display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px;margin-left:-10px; color:var(--i-chevron);font-size:1.6rem;line-height:1; text-decoration:none;background:none;border:0;cursor:pointer} /* --- la barra de fases · Rx ▸ Upload ▸ View ▸ Send ▸ Pay ------------------ Vive dentro de `.barra-app` del cascarón desde la fase 3. Dónde se coloca (centrada mientras cabe, segunda fila de la barra por debajo de 1290 px) lo decide app.css §15, que es quien conoce ese corte y por qué está ahí; aquí queda solo cómo se ve. */ .rx-fases{display:flex;align-items:center;gap:4px;flex:0 0 auto} .rx-fase{display:inline-flex;flex-direction:column;align-items:center; justify-content:center;gap:2px; min-width:46px;min-height:44px;padding:2px 5px; background:none;border:0;border-radius:var(--i-r);cursor:pointer; color:var(--i-suave);text-decoration:none; font-size:.6875rem;line-height:1.2; /* 11px: es rótulo de icono */ transition:background-color 120ms cubic-bezier(.2,.6,.3,1)} .rx-fase svg{width:26px;height:26px;display:block} .rx-fase b{font-weight:500;font-size:.75rem} /* 12px, el suelo de la casa */ .rx-fase.on{background:var(--i-acento-p);color:var(--i-azul)} .rx-fase.on svg{color:var(--i-acento)} .rx-fase:disabled{cursor:not-allowed;opacity:.45} .rx-fase-sep{color:var(--i-fase-sep);font-size:.75rem;flex:0 0 auto;line-height:1} /* --- el lienzo ------------------------------------------------------------ */ .rx-lienzo{width:100%;max-width:1030px;margin:0 auto;padding:14px 14px 40px; flex:1 1 auto} /* 1360 y no 800: con la carta de CEREC dentro, la columna de iTero dejaba el modelo a 380 px en una pantalla de 1920 (captura de Robmar, 2026-09-08). */ .rx-lienzo-rx{max-width:1360px} /* =========================================================================== 2 · TARJETAS Y CAMPOS =========================================================================== */ .rx-tarj{background:var(--i-papel);border:1px solid var(--i-linea); border-radius:14px;margin-bottom:14px;box-shadow:var(--i-sombra-tarj)} .rx-tarj-cab{padding:12px 16px;border-bottom:1px solid var(--i-linea); display:flex;align-items:center;gap:10px;flex-wrap:wrap} .rx-tarj-t{font-size:.875rem;font-weight:400;color:var(--i-tinta)} .rx-tarj-cuerpo{padding:6px 16px 14px} /* Cabecera del Rx: una fila ancha arriba y dos columnas debajo. Es la disposición exacta de la Fig. 59 — no una rejilla que quedó parecida. */ .rx-cab-fila{display:flex;align-items:center;gap:26px;flex-wrap:wrap; padding:12px 16px;border-bottom:1px solid var(--i-linea)} .rx-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;padding:0 16px 8px} /* El campo: etiqueta a la izquierda, valor subrayado a la derecha. Sin caja. El subrayado llega hasta el final de la columna aunque el valor sea corto: es lo que hace que la pantalla se lea como una ficha y no como un formulario. */ .rx-campo{display:grid;grid-template-columns:104px 1fr;align-items:center; gap:10px;padding:9px 0;min-height:44px} .rx-campo-lab{font-size:.8125rem;color:var(--i-etiq);line-height:1.3} .rx-campo-lab small{display:block;font-size:.75rem;color:var(--i-suave)} .rx-campo-lab.der{text-align:right} .rx-req{color:var(--i-req);font-style:normal;margin-left:3px;font-weight:600} /* Los dos campos de la fila ancha de la cabecera y los tres de la puerta. Van como CLASE y no con `style` puesto a mano: una rejilla en línea gana a cualquier consulta de medios, y en el teléfono dejaba el campo del colegiado estrecho y descolgado a la derecha mientras el resto ya iba a una columna. */ .rx-campo-cab{grid-template-columns:auto auto;gap:14px} .rx-campo-cab-in{grid-template-columns:auto 150px;gap:10px} .rx-campo-puerta{grid-template-columns:110px 1fr} @media (max-width:720px){ .rx-campo-cab,.rx-campo-cab-in,.rx-campo-puerta{grid-template-columns:1fr;gap:2px} } .rx-in,.rx-sel,.rx-txt{ width:100%;min-height:38px; font-family:inherit;font-size:16px;font-weight:400; /* 16px: por debajo, iOS amplía */ color:var(--i-tinta);background:var(--i-campo); border:1px solid var(--i-linea-2);border-radius:10px; padding:6px 30px 6px 12px; transition:border-color 120ms cubic-bezier(.2,.6,.3,1)} .rx-txt{padding-right:12px;resize:vertical;min-height:88px;line-height:1.5} .rx-in::placeholder,.rx-txt::placeholder{color:var(--i-placeholder)} .rx-in:disabled,.rx-sel:disabled,.rx-txt:disabled{color:var(--i-placeholder);cursor:not-allowed} /* El chevron del desplegable es el triángulo relleno del original, en azul claro cuando el campo está vivo y en gris cuando no. Se dibuja con dos degradados para no cargar una imagen por cada select de la pantalla. */ .rx-sel{appearance:none;-webkit-appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--i-chevron) 50%), linear-gradient(135deg,var(--i-chevron) 50%,transparent 50%); background-position:calc(100% - 12px) 55%,calc(100% - 6px) 55%; background-size:6px 6px,6px 6px;background-repeat:no-repeat} .rx-sel:disabled{ background-image:linear-gradient(45deg,transparent 50%,var(--i-chevron-off) 50%), linear-gradient(135deg,var(--i-chevron-off) 50%,transparent 50%)} .rx-in:focus,.rx-sel:focus,.rx-txt:focus{outline:none; border-color:var(--i-acento);box-shadow:0 0 0 3px rgba(0,113,227,.18)} .rx-in:focus-visible,.rx-sel:focus-visible,.rx-txt:focus-visible{ outline:2px solid var(--i-azul);outline-offset:2px;border-radius:10px} .rx-par{display:grid;grid-template-columns:1fr 1fr;gap:14px} /* Fecha: el icono de calendario azul del original, sin esconder el nativo */ .rx-in[type=date]::-webkit-calendar-picker-indicator{ filter:invert(52%) sepia(60%) saturate(600%) hue-rotate(170deg);cursor:pointer} /* Casilla: 18px de dibujo, 44 de blanco táctil, y el check en el azul vivo */ .rx-chk{display:inline-flex;align-items:center;gap:8px;cursor:pointer; min-height:44px;font-size:.8125rem;color:var(--i-etiq)} .rx-chk input{width:18px;height:18px;accent-color:var(--i-acento);cursor:pointer; flex:0 0 auto;margin:0} /* =========================================================================== 3 · BOTONES =========================================================================== */ .rx-btn{display:inline-flex;align-items:center;justify-content:center; min-height:44px;padding:10px 18px;border-radius:980px;cursor:pointer; font-family:inherit;font-size:.9375rem;font-weight:400;text-decoration:none; border:1px solid transparent;background:var(--i-boton-2);color:var(--i-tinta); transition:background-color 120ms cubic-bezier(.2,.6,.3,1), border-color 120ms cubic-bezier(.2,.6,.3,1)} .rx-btn-1{background:var(--i-boton);border-color:var(--i-boton-b); color:var(--i-boton-tx)} .rx-btn-1:disabled,.rx-btn:disabled{background:var(--i-apagado);border-color:var(--i-apagado-b); color:var(--i-apagado-tx);cursor:not-allowed} .rx-btn-borrar{background:var(--i-borrar);border-color:transparent;color:var(--i-borrar-tx); gap:7px;font-weight:500} .rx-btn-borrar svg{width:14px;height:14px} .rx-btn-bloque{width:100%} /* Botón de lista: más bajo que el normal en escritorio y de vuelta a 44 px con dedo, porque la regla táctil de más abajo alcanza a esta clase. Con la altura escrita en un `style` no la alcanzaba ninguna. */ .rx-btn-chico{min-height:34px;padding:6px 14px} /* =========================================================================== 4 · LA CARTA DENTAL · Fig. 63 --------------------------------------------------------------------------- 16 columnas. Arriba 1→16 con la corona abajo; abajo 32→17 con la corona arriba; los dos números en una banda central. Cada columna enfrenta a su antagonista real —el 1 con el 32, el 8 con el 25— que es la correspondencia con la que un dentista habla de la oclusión. =========================================================================== */ .rx-carta{padding:16px 14px 22px;overflow-x:auto;-webkit-overflow-scrolling:touch} .rx-carta-in{min-width:660px} .rx-fila{display:flex;gap:3px} .rx-fila-sup{align-items:flex-end} .rx-fila-inf{align-items:flex-start} .rx-d{flex:1 1 0;min-width:0;background:none;border:0;padding:0 1px; cursor:pointer;display:flex;justify-content:center;align-items:flex-end; min-height:46px;border-radius:2px} .rx-fila-inf .rx-d{align-items:flex-start} /* Altura FIJA y ancho automático: todas las piezas miden lo mismo de alto — como en la carta original — y cada una sale del ancho que le toca por su propio viewBox. Al revés (ancho fijo, alto automático) un molar salía casi el doble de alto que un incisivo y la fila quedaba en dientes de sierra. */ .rx-d svg{height:64px;width:auto;max-width:100%;display:block} .rx-si{fill:var(--i-diente);stroke:var(--i-trazo);stroke-width:2; stroke-linejoin:round;stroke-linecap:round; transition:fill 120ms cubic-bezier(.2,.6,.3,1), stroke-width 120ms cubic-bezier(.2,.6,.3,1)} .rx-si-det{fill:none;stroke:var(--i-trazo);stroke-width:1.5;opacity:.6; stroke-linecap:round} /* Diente con trabajo pedido: el original engorda el trazo y no lo rellena de color. Rellenarlo tapaba el dibujo de la pieza, que es lo que se mira. */ .rx-d.on .rx-si{stroke-width:3.4;fill:var(--i-acento-p)} .rx-d.estado .rx-si{stroke-dasharray:5 4;opacity:.75} .rx-d:focus-visible{outline:2px solid var(--i-azul);outline-offset:1px} .rx-nums{display:flex;gap:3px;padding:5px 0;margin:2px 0} .rx-numcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column; align-items:center;gap:3px} .rx-n{font-size:.75rem;color:var(--i-azul);line-height:1.25; font-variant-numeric:tabular-nums} .rx-n.on{font-weight:700} /* =========================================================================== 5 · LA LISTA DE TRATAMIENTOS · Fig. 64 --------------------------------------------------------------------------- Sale pegada al diente que se acaba de tocar. Texto centrado, filas altas separadas por un pelo de línea, sin precio dentro: el original no lo enseña aquí, y meterlo cambiaría la decisión clínica por una decisión de compra. El precio está en el cuadro de propiedades y en Treatment Information. =========================================================================== */ .rx-lista{position:absolute;z-index:120;background:var(--i-papel); border:1px solid var(--i-linea);border-radius:14px; box-shadow:0 6px 22px rgba(20,28,36,.22); /* 244 y no 222: con 222 «Missing (edentulous space)» se parte en dos líneas y la fila crece al doble. En la captura original entra de una. */ width:244px;max-width:94vw; max-height:min(70dvh,560px);overflow-y:auto;-webkit-overflow-scrolling:touch} .rx-op{display:block;width:100%;min-height:47px;padding:14px 12px; background:var(--i-lista);border:0;border-bottom:1px solid var(--i-lista-linea);cursor:pointer; font-family:inherit;font-size:.875rem;font-weight:400;color:var(--i-tinta); text-align:center; transition:background-color 100ms cubic-bezier(.2,.6,.3,1)} .rx-op:nth-child(even){background:var(--i-papel)} .rx-op:last-child{border-bottom:0} .rx-op.on{background:var(--i-fila-on);color:var(--i-azul)} .rx-op:focus-visible{outline:2px solid var(--i-azul);outline-offset:-2px} /* Separación de lo que este laboratorio vende y el original no lista */ .rx-op.extra:first-of-type{border-top:2px solid var(--i-linea-2)} /* =========================================================================== 6 · PROPIEDADES DE LA RESTAURACIÓN · Fig. 65 =========================================================================== */ .rx-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center; background:var(--i-modal-velo);padding:18px} .rx-modal-caja{background:var(--i-papel);border-radius:18px; width:min(100%,1046px);max-height:94dvh;overflow-y:auto; box-shadow:0 16px 46px rgba(10,16,22,.34)} .rx-modal-cab{display:flex;align-items:center;gap:10px;padding:10px 14px; position:sticky;top:0;background:var(--i-papel);z-index:2} .rx-modal-t{flex:1;font-size:1.375rem;font-weight:400;color:var(--i-tinta)} /* La banda gris con la pieza en su tarjeta blanca */ .rx-pieza{background:var(--i-banda);display:flex;justify-content:center; padding:0} .rx-pieza-caja{background:var(--i-papel);padding:10px 22px 8px;text-align:center; min-width:74px} .rx-pieza-caja svg{height:88px;width:auto;display:block;margin:0 auto} .rx-pieza-n{font-size:.8125rem;color:var(--i-tinta);margin-top:4px} .rx-props{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;padding:16px 22px 20px} .rx-modal-pie{display:flex;gap:10px;justify-content:flex-end;padding:0 22px 18px} /* =========================================================================== 7 · TREATMENT INFORMATION · Fig. 66 --------------------------------------------------------------------------- Una baldosa azul clara por restauración, con el lápiz que la reabre. No es una lista con botón «Quitar»: el original deja EDITAR lo que ya se rellenó, y quitar y volver a poner le hace perder al dentista el material, los tres tonos y los dos diseños para cambiar una letra. =========================================================================== */ .rx-trat{display:flex;flex-wrap:wrap;gap:14px;padding:16px} .rx-trat-b{position:relative;background:var(--i-suelo);border:1px solid var(--i-linea); border-radius:12px;padding:12px 14px;width:246px;max-width:100%; font-size:.8125rem;line-height:1.5;color:var(--i-tinta)} .rx-trat-n{font-size:.9375rem;margin-bottom:8px} .rx-trat-l{display:grid;grid-template-columns:96px 1fr;gap:4px 8px} .rx-trat-l dt{color:var(--i-etiq)} .rx-trat-l dd{margin:0} .rx-trat-sec{margin-top:8px;color:var(--i-etiq)} .rx-lapiz{position:absolute;top:4px;right:4px;width:44px;height:44px; display:inline-flex;align-items:center;justify-content:center; background:none;border:0;cursor:pointer;color:var(--i-acento); border-radius:var(--i-r)} .rx-lapiz svg{width:17px;height:17px} /* Un estado del diente no es una restauración: ni lleva precio ni se edita */ .rx-trat-b.estado{background:var(--i-suelo-2);border-color:var(--i-linea-2);width:auto;min-width:150px} .rx-vacio{padding:26px 16px;text-align:center;color:var(--i-suave); font-size:.8125rem} .rx-total{display:flex;align-items:baseline;justify-content:flex-end;gap:22px; padding:12px 16px;border-top:1px solid var(--i-linea);font-size:.8125rem; color:var(--i-etiq)} .rx-total b{font-family:'Plex',ui-monospace,monospace;font-size:1.0625rem; font-weight:600;color:var(--i-tinta);font-variant-numeric:tabular-nums; margin-left:8px} /* =========================================================================== 8 · TABLAS · Patients y Orders (Fig. 125 y 127) =========================================================================== */ .rx-tabla{width:100%;border-collapse:collapse;font-size:.8125rem} .rx-tabla th{font-weight:500;color:var(--i-suave);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;text-align:left; padding:10px 14px;border-bottom:1px solid var(--i-linea);white-space:nowrap} .rx-tabla td{padding:11px 14px;border-bottom:1px solid var(--i-lista-linea); color:var(--i-tinta);vertical-align:middle} .rx-tabla tbody tr:nth-child(even) td{background:var(--i-zebra)} .rx-tabla tbody tr.on td{background:var(--i-papel)} .rx-tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} /* Rótulo solo para quien lee la pantalla con voz. Con `font-size:0` el auditor lo cuenta como texto de 0 px —y tiene razón: un texto de 0 px es un texto que no se lee—; esto lo saca del flujo sin encogerlo. */ .rx-oculto{position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap} .rx-fila-enlace{cursor:pointer} .rx-td-chk{width:44px} /* La fila de botones que sale bajo el pedido marcado. Sin borde inferior y con el mismo fondo que su fila: tiene que leerse como parte de ella, no como otro pedido de la lista. */ .rx-fila-acc td{border-bottom:1px solid var(--i-lista-linea);padding:0;background:var(--i-papel)} .rx-tabla tbody tr.rx-fila-acc td{background:var(--i-papel)} .rx-acciones{display:flex;gap:10px;flex-wrap:wrap;padding:2px 14px 12px 46px} .rx-acciones .rx-btn{min-height:36px;padding:7px 16px;font-size:.8125rem} .rx-perfil{display:grid;grid-template-columns:206px 1fr;gap:12px;align-items:start} /* Un hijo de rejilla vale `min-width:auto` por defecto: no baja del ancho mínimo de su contenido. Con una tabla de cinco columnas dentro, eso empujaba la PÁGINA ENTERA a 456 px en un teléfono de 390 — la tabla ya tenía su propio desplazamiento y aun así se deslizaba todo el perfil. */ .rx-perfil > *{min-width:0} /* Buscador de Patients: caja gris con ✕ y botón azul con lupa */ .rx-buscar{display:flex;gap:8px;align-items:center;margin-left:auto} .rx-buscar-caja{position:relative;display:flex;align-items:center} .rx-buscar input{width:min(260px,52vw);min-height:34px; font-family:inherit;font-size:16px;font-weight:400; background:var(--i-suelo);border:1px solid transparent;border-radius:980px; padding:5px 34px 5px 14px;color:var(--i-tinta)} .rx-buscar-x{position:absolute;right:0;width:34px;height:34px; display:inline-flex;align-items:center;justify-content:center; background:none;border:0;cursor:pointer;color:var(--i-suave);font-size:1rem; text-decoration:none} .rx-buscar button[type=submit]{min-width:52px;min-height:44px; background:var(--i-boton);border:1px solid var(--i-boton-b); border-radius:980px;cursor:pointer;color:var(--i-boton-tx); display:inline-flex;align-items:center;justify-content:center} .rx-buscar button svg{width:16px;height:16px} /* Timeline (Fig. 130): franja con flechas a los lados y tarjetas de fecha */ .rx-linea-t{display:flex;align-items:center;gap:10px;padding:14px 16px} .rx-linea-t-pistas{flex:1;display:flex;gap:10px;overflow-x:auto; justify-content:flex-end;-webkit-overflow-scrolling:touch} .rx-hito{flex:0 0 auto;border:1px solid var(--i-linea-2);border-radius:10px; background:var(--i-papel);padding:10px 12px 8px;text-align:center; font-size:.75rem;color:var(--i-etiq);cursor:pointer;min-width:82px} .rx-hito input{width:18px;height:18px;accent-color:var(--i-acento);margin:0 0 6px} .rx-flecha-t{width:44px;height:44px;flex:0 0 auto; display:inline-flex;align-items:center;justify-content:center; background:var(--i-suelo);border:1px solid transparent;border-radius:50%; cursor:pointer;color:var(--i-suave)} /* =========================================================================== 9 · ZONA DE SUBIDA (fase Upload) =========================================================================== */ .rx-soltar{border:2px dashed var(--i-linea-2);border-radius:var(--i-r); background:var(--i-soltar);padding:34px 18px;text-align:center;margin:16px; color:var(--i-suave);font-size:.8125rem} .rx-soltar.encima{border-color:var(--i-acento);background:var(--i-soltar-on)} .rx-soltar svg{width:44px;height:44px;color:var(--i-chevron);margin-bottom:10px} .rx-soltar h3{font-size:.9375rem;font-weight:400;color:var(--i-tinta); margin-bottom:6px} .rx-progreso{height:4px;background:var(--i-linea);border-radius:2px; overflow:hidden;margin:12px auto 0;max-width:340px} .rx-progreso i{display:block;height:100%;background:var(--i-acento);width:0; transition:width 200ms linear} .rx-arch{display:flex;align-items:center;gap:12px;padding:11px 16px; border-bottom:1px solid var(--i-linea);font-size:.8125rem} .rx-arch:last-child{border-bottom:0} .rx-arch-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .rx-arch-x{color:var(--i-suave);white-space:nowrap} /* =========================================================================== 10 · EL VISOR 3D · Fig. 116 =========================================================================== */ /* ⚠️ EL LIENZO VA EN POSICIÓN ABSOLUTA, y no es un capricho. `renderer.setSize(w,h,false)` cambia el BÚFER de dibujo y no el tamaño CSS. Con el canvas en el flujo y `height:100%` sobre un padre de altura indefinida, la altura CSS caía en `auto` y el navegador usaba la del búfer — que es la que acabábamos de sacar del padre. Cada cuadro se realimentaba y el visor crecía: medido, 1265 px de alto dentro de una ventana de 455. La cámara quedaba encuadrando por encima de los dientes y solo se veía la encía. Sacándolo del flujo, el canvas ya no puede empujar a su padre. */ .rx-visor{position:relative;background:var(--i-visor);display:flex; min-height:420px} .rx-visor-lienzo{flex:1;min-width:0;position:relative} .rx-visor-lienzo canvas{display:block;position:absolute;inset:0; width:100%;height:100%} /* EL VISOR OCUPA LO QUE QUEDA, Y LO QUE QUEDA NO ES «100dvh MENOS LA BARRA». Antes se restaba solo `--barra-alto` y salía una altura que no cuadraba con la página: encima del lienzo puede ir `.rx-avisos` (el cartel de administración a las clínicas, un flash) y debajo iba el pie del cascarón, así que el documento medía 65-90 px más que la pantalla. El visor «completo» se desplazaba, y al bajar, el modelo se metía debajo de la barra pegajosa y se perdía su franja de arriba. Ahora lo reparte el propio cascarón: `.app-rej` mide 100dvh, `.cuerpo` es una columna y `.rx-pagina` crece dentro de ella, así que con `flex:1 1 auto` este cuadro se queda EXACTAMENTE con lo que sobra —haya avisos o no, y con el pie escondido (app.css §15) o no—. `min-height:0` porque un hijo flexible no encoge por debajo de su contenido sin decírselo, y el canvas está en posición absoluta dentro y no empuja a nadie. Se conserva `height:auto` explícito para pisar cualquier alto heredado y dejar claro que aquí ya no se calcula nada. */ .rx-visor-lleno{flex:1 1 auto;height:auto;min-height:0} /* Navegador de arcadas, arriba a la izquierda. SOLO navegación: aquí no se elige nada. La selección es la carta 2D del Rx, como en el original. */ .rx-nav-arc{position:absolute;top:12px;left:12px;width:104px; pointer-events:none;user-select:none} .rx-nav-arc svg{width:100%;height:auto;display:block} .rx-visor-modos{position:absolute;top:10px;right:10px; display:flex;flex-direction:column;gap:8px} .rx-modo{width:44px;height:44px;display:inline-flex;align-items:center; justify-content:center;background:var(--i-papel);border:1px solid var(--i-linea-2); border-radius:10px;cursor:pointer;color:var(--i-suave);padding:6px} .rx-modo svg{width:24px;height:24px;display:block} .rx-modo.on{background:var(--i-papel);border-color:var(--i-visor-on)} .rx-modo.on svg{color:var(--i-visor-on)} .rx-visor-aviso{position:absolute;inset:0;display:grid;place-items:center; text-align:center;padding:24px;color:var(--i-suave);font-size:.8125rem} .rx-visor-paneles{display:grid;flex:1;min-width:0;gap:2px;background:var(--i-visor-sep)} .rx-visor-paneles.n2{grid-template-rows:1fr 1fr} .rx-visor-paneles.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr} /* =========================================================================== 11 · EL DIÁLOGO DE FIRMA · Fig. 113 =========================================================================== */ .rx-firma-caja{background:var(--i-dialogo);border:1px solid var(--i-linea); border-radius:18px;width:min(100%,594px); box-shadow:0 16px 46px rgba(10,16,22,.34);padding:0 0 18px} .rx-firma-cab{display:flex;align-items:center;gap:10px;padding:8px 12px 4px} .rx-firma-t{flex:1;text-align:center;font-size:.9375rem;color:var(--i-tinta); margin-right:44px} /* compensa la ✕ para que quede centrado */ .rx-firma-cerrar{width:44px;height:44px;display:inline-flex;align-items:center; justify-content:center;background:none;border:0;cursor:pointer; color:var(--i-chevron);font-size:1.5rem;line-height:1} .rx-firma-lienzo{background:#FFFFFF;margin:4px 26px 0 148px;height:150px; touch-action:none;cursor:crosshair;display:block;width:calc(100% - 174px)} .rx-firma-pie{display:grid;grid-template-columns:1fr auto;align-items:end; gap:14px;padding:0 26px} .rx-firma-lab{font-size:.875rem;color:var(--i-tinta); border-bottom:1px solid var(--i-firma-linea);padding:6px 0 8px;margin:0 26px 14px; grid-column:1 / -1} .rx-firma-ops{display:flex;flex-direction:column;gap:2px} .rx-firma-btns{display:flex;flex-direction:column;gap:14px;align-items:flex-end} /* =========================================================================== 12 · LA PUERTA (login) · figura de la pág. 41 =========================================================================== */ .rx-puerta{min-height:100dvh;background:var(--i-fondo);display:grid; place-items:center;padding:20px; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif} .rx-puerta-caja{background:var(--i-papel);border:1px solid var(--i-linea);border-radius:18px; box-shadow:0 8px 40px rgba(0,0,0,.08);width:min(100%,420px);padding:26px 26px 22px} .rx-puerta-t{text-align:center;font-size:1.5rem;font-weight:600;letter-spacing:-.02em; color:var(--i-tinta);margin-bottom:18px} .rx-puerta-btns{display:flex;flex-direction:column;gap:2px;margin-top:16px} .rx-puerta-btns .rx-btn{min-height:44px;padding:10px 6px;font-size:.9375rem; background:transparent;color:var(--i-azul)} .rx-puerta-btns .rx-btn-1{order:-1;background:var(--i-boton);color:var(--i-boton-tx);font-weight:500;margin-bottom:8px} .rx-puerta-marca{display:block;text-align:center;color:var(--i-tinta); font-size:1.5rem;font-weight:600;letter-spacing:-.02em;margin-bottom:26px; text-decoration:none} /* =========================================================================== 13 · AVISOS =========================================================================== */ .rx-aviso{margin:0 0 14px;padding:11px 14px;border-radius:10px; font-size:.8125rem;line-height:1.5;background:var(--i-aviso-info); border-left:0;color:var(--i-azul)} .rx-aviso-mal{color:var(--i-aviso-mal-tx);background:var(--i-aviso-mal)} .rx-aviso-ok{background:var(--i-aviso-ok);color:var(--i-aviso-ok-tx)} .rx-nota{font-size:.75rem;color:var(--i-suave);line-height:1.55;padding:0 16px 14px} /* =========================================================================== 14 · RATÓN, TECLADO Y PANTALLAS PEQUEÑAS =========================================================================== */ @media (hover:hover) and (pointer:fine){ .rx-d:hover .rx-si{stroke-width:3.4} .rx-op:hover{background:var(--i-fila-on)} .rx-btn:hover:not(:disabled){background:var(--i-boton-2-hover)} .rx-puerta-btns .rx-btn:hover:not(:disabled):not(.rx-btn-1){background:var(--i-suelo);text-decoration:underline} .rx-btn-1:hover:not(:disabled){background:#0077ED} .rx-btn-borrar:hover{background:var(--i-borrar-hover)} .rx-fase:hover:not(:disabled):not(.on){background:var(--i-suelo)} .rx-lapiz:hover{background:var(--i-acento-p)} .rx-tabla tbody tr.rx-fila-enlace:hover td{background:var(--i-suelo)} .rx-modo:hover{border-color:var(--i-visor-on)} } /* --------------------------------------------------------------------------- CON DEDO: 44 px de blanco y 8 de separación, sin excepciones --------------------------------------------------------------------------- Va por ANCHO además de por puntero, y eso es deliberado. `pointer:coarse` no lo contesta bien todo el mundo —el iPhone emulado de Chromium dice `fine`, y con la regla colgada solo de ahí la auditoría medía 34 px de campo y 3 px entre dientes en un teléfono— así que la anchura hace de red: cualquier pantalla por debajo de 1100 px se trata como táctil. Un ratón en un monitor grande sigue viendo la talla compacta del original. Los campos suben a 16 px por lo mismo de siempre: por debajo, Safari de iOS amplía la PÁGINA ENTERA al tocar el campo y el dentista se queda mirando un trozo de formulario sin saber qué ha pasado. Dos píxeles y medio de diferencia con la captura no valen eso. --------------------------------------------------------------------------- */ @media (max-width:1100px), (hover:none), (pointer:coarse){ .rx-in,.rx-sel,.rx-txt,.rx-buscar input{min-height:44px;font-size:16px} .rx-btn-chico{min-height:44px;padding:9px 14px} .rx-btn,.rx-modo{min-width:44px} /* 8 px entre fases: con 4 el auditor las daba «pegadas». La separación de la barra y de sus botones ya la pone el cascarón (`.barra-app`). */ .rx-fases{gap:8px} /* 16 dientes × (44 de blanco + 9 de separación) = 848. La carta se desliza dentro de su caja, que es lo que ya hacía; lo que cambia es que ahora cada diente se puede tocar sin darle al vecino. Un blanco de 41 px no es 44. */ .rx-fila,.rx-nums{gap:9px} .rx-carta-in{min-width:848px} } @media (max-width:900px){ .rx-cols{grid-template-columns:1fr;padding-bottom:2px} .rx-props{grid-template-columns:1fr;gap:0;padding:14px 16px 18px} .rx-firma-lienzo{margin:4px 18px 0 18px;width:calc(100% - 36px)} .rx-firma-lab{margin:0 18px 14px} .rx-firma-pie{padding:0 18px} } /* --------------------------------------------------------------------------- DE TABLA A FICHA POR DEBAJO DE 720 px --------------------------------------------------------------------------- La tabla Orders tiene cinco columnas y necesita 456 px; un iPhone tiene 390. Deslizarla de lado para leer el estado de un pedido no es una pantalla, es un castigo. Cada fila pasa a ser una ficha con la cabecera de su columna delante del dato — la etiqueta la pone `tablasAFichas()` leyendo el real, así que no hay una segunda lista de rótulos que se quede desactualizada. --------------------------------------------------------------------------- */ @media (max-width:720px){ .rx-tabla.tabla-fichas, .rx-tabla.tabla-fichas tbody, .rx-tabla.tabla-fichas tr, .rx-tabla.tabla-fichas td, .rx-tabla.tabla-fichas th{display:block;width:auto} .rx-tabla.tabla-fichas thead{position:absolute;width:1px;height:1px; overflow:hidden;clip-path:inset(50%);white-space:nowrap} .rx-tabla.tabla-fichas tbody tr{border:1px solid var(--i-linea); border-radius:var(--i-r);padding:2px 14px;margin-bottom:10px} .rx-tabla.tabla-fichas tbody tr:last-child{margin-bottom:0} .rx-tabla.tabla-fichas tbody td{display:flex;justify-content:space-between; align-items:center;gap:16px;text-align:right; padding:9px 0;border-bottom:1px solid var(--i-lista-linea);min-height:44px} .rx-tabla.tabla-fichas tbody tr td:last-child{border-bottom:0} .rx-tabla.tabla-fichas tbody td::before{content:attr(data-l); color:var(--i-azul);text-align:left;flex:0 0 auto;max-width:45%} /* la fila de botones que sale bajo el pedido marcado no es un dato */ .rx-tabla.tabla-fichas tbody tr.rx-fila-acc{border:0;padding:0;margin:-6px 0 10px} .rx-tabla.tabla-fichas tbody tr.rx-fila-acc td{border:0;padding:0;display:block} .rx-tabla.tabla-fichas tbody tr.rx-fila-acc td::before{content:none} .rx-tabla.tabla-fichas tbody td:not([data-l])::before{content:none} /* Un enlace dentro de una celda medía 21 px de alto. En modo tabla da igual —se pulsa la fila entera— pero en una ficha ESE enlace es el objetivo, y 21 px no son 44. */ .rx-tabla.tabla-fichas tbody td a{min-height:44px;display:flex; align-items:center;justify-content:flex-end} .rx-acciones .rx-btn{flex:1} } @media (max-width:720px){ .rx-lienzo{padding:10px 10px 30px} .rx-campo{grid-template-columns:1fr;gap:2px;padding:8px 0} .rx-campo-lab.der{text-align:left} .rx-par{grid-template-columns:1fr;gap:8px} /* Cinco fases en 358 px: sin separadores y pestañas más estrechas. Con los ► y 5 px de relleno la quinta quedaba fuera de la tira (2026-09-09). Que las fases bajen a una segunda fila de la barra lo hace app.css §15, que es quien conoce el corte del cascarón (1290 px); aquí queda solo lo que cambia de la PIEZA cuando la pantalla es estrecha de verdad. */ .rx-fase-sep{display:none} .rx-fase{min-width:44px;padding:2px 3px} .rx-modal{padding:0} .rx-modal-caja{max-height:100dvh;height:100%;width:100%;border-radius:0} .rx-trat-b{width:100%} .rx-acciones{padding-left:14px} .rx-buscar{width:100%;margin:0} .rx-buscar input{width:100%} .rx-visor{min-height:64dvh} .rx-visor-modos{top:auto;bottom:10px;flex-direction:row} .rx-nav-arc{width:76px} .rx-perfil{grid-template-columns:1fr} .rx-acciones{padding-left:14px} } @media (prefers-reduced-motion:reduce){ .rx-app *,.rx-app *::before,.rx-app *::after, .rx-modal *,.rx-lista *{transition-duration:.001ms !important} } /* la marca del login medía 35 px de alto en el teléfono (auditor 2026-09-03) */ .rx-puerta-marca{min-height:44px;display:inline-flex;align-items:center} /* los dos enlaces de la puerta iban a 2 px uno del otro (auditor 2026-09-09) */ .rx-puerta-btns .rx-btn + .rx-btn{margin-top:8px} /* =========================================================================== LA BARRA DE PEDIDO · «tiene que verse como un pedido como tal» --------------------------------------------------------------------------- Fija abajo en las cuatro fases de New Scan: el paso, el resumen vivo (restauraciones · total · plazo) y los botones Atrás / Continuar CON TEXTO. Antes eran dos botones ‹ › al final de la página, sin rótulo. Mismo material que la barra de arriba. El botón del chat sube por encima. =========================================================================== */ /* EN ESCRITORIO EMPIEZA DONDE EMPIEZA EL CUERPO, no debajo del lateral: una barra que cruza por delante del menú dice que es del navegador y no de la pantalla. `--lateral-ancho` la declara app.css en `body.app` y vale 0 en el teléfono, así que la misma línea sirve para las dos anchuras. z-index 55 está elegido, no heredado: por ENCIMA de la barra de destinos (50), que además se esconde mientras hay pedido, y por DEBAJO del velo (65) y del cajón lateral (70) — con el menú abierto la barra del pedido no puede quedar flotando por delante. */ .rx-pedido{position:fixed;left:var(--lateral-ancho,0px);right:0;bottom:0;z-index:55; background:var(--i-barra);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%); border-top:1px solid var(--i-barra-linea); padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))} .rx-pedido-env{max-width:1360px;margin:0 auto;display:flex;align-items:center;gap:14px} .rx-pedido-res{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px} .rx-pedido-paso{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--i-suave);font-family:var(--i-mono,ui-monospace,monospace)} .rx-pedido-sum{font-size:.9375rem;color:var(--i-tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rx-pedido-sum b{font-weight:600} .rx-pedido-sum .n{font-family:var(--i-mono,ui-monospace,monospace)} .rx-pedido-acc{display:flex;align-items:center;gap:8px;flex:0 0 auto} .rx-pedido-acc .rx-btn{min-height:44px} .rx-pedido-acc .rx-btn-1[aria-disabled="true"]{background:var(--i-apagado);border-color:var(--i-apagado-b);color:var(--i-apagado-tx);cursor:not-allowed} .rx-app.rx-con-pedido .rx-lienzo{padding-bottom:110px} .rx-app.rx-con-pedido .ari-btn{bottom:calc(84px + env(safe-area-inset-bottom,0px))} /* El globo se centra sobre la BARRA DEL PEDIDO, no sobre la ventana. La barra empieza en `--lateral-ancho` desde la fase 3, así que su centro está medio lateral a la derecha del centro de la pantalla: con `left:50%` el aviso («elige la restauración», «hace falta un paciente») salía 125 px descolgado hacia la izquierda, montado sobre el lateral en vez de sobre la barra que lo dispara. En el teléfono la variable vale 0 y la cuenta da lo mismo de siempre, así que esto no toca nada de lo que ya estaba medido. */ .rx-pedido-aviso{position:fixed;left:calc(50% + var(--lateral-ancho,0px) / 2);transform:translateX(-50%);bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:56; max-width:92%;width:max-content;padding:9px 14px;border-radius:8px;background:var(--i-pedido-aviso);color:var(--i-pedido-aviso-tx); font-size:.8125rem;line-height:1.35;text-align:center;opacity:0;pointer-events:none; transition:opacity 160ms cubic-bezier(.2,.6,.3,1)} .rx-pedido-aviso.ver{opacity:1} /* fases hechas (en la pantalla de pago) y apagada (Pagar antes de enviar) */ .rx-fase.hecho{color:var(--i-azul);opacity:.8;cursor:default} .rx-fase.off{opacity:.38;cursor:not-allowed} /* el idioma de la puerta */ .rx-puerta{position:relative} .rx-puerta-esq{position:absolute;right:16px;top:12px;display:flex;align-items:center;gap:8px} .rx-puerta-tema{width:44px;height:44px;border-radius:50%;border:1px solid var(--i-linea);background:var(--i-papel);color:var(--i-tinta)} .rx-puerta-idioma{display:inline-flex;align-items:center;justify-content:center; min-height:44px;min-width:44px;padding:0 14px;border-radius:980px;background:var(--i-papel);border:1px solid var(--i-linea); color:var(--i-azul);text-decoration:none;font-size:.875rem;font-weight:500} @media (max-width:720px){ .rx-pedido{padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px))} .rx-pedido-env{gap:10px} .rx-pedido-paso{display:none} /* El resumen vivo PUEDE partirse en dos líneas, pero no recortarse. En la fase Send la barra lleva dos botones («‹ Back» y «Confirm & Send ›») y al resumen le quedaban ~120 px: con `nowrap` + puntos suspensivos salía «0 restorations · $0.0…» —el precio, que es lo que el resumen existe para enseñar, era justo lo que se perdía (medido a 390 px, 2026-09-10). Dos líneas de 1.3 caben en los 44 px del botón; el corte natural es el « · » que separa la cuenta del importe. */ .rx-pedido-sum{font-size:.875rem;white-space:normal;display:-webkit-box; -webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3} .rx-pedido-acc .rx-btn{padding:10px 14px;font-size:.875rem} .rx-app.rx-con-pedido .rx-lienzo{padding-bottom:96px} } /* =========================================================================== MODO OSCURO DEL MÓDULO · 2026-09-09 Las variables --i-* del principio son el juego claro; este es el oscuro. Lo que iba a pelo (barra, campos, listas, avisos, hovers) ahora tiene nombre y aparece en los dos juegos. El lienzo de la firma sigue blanco en los dos: es lo que se guarda como imagen. =========================================================================== */ :root{ --i-barra:rgba(255,255,255,.72); --i-barra-linea:rgba(0,0,0,.08); --i-campo:#FFFFFF; --i-placeholder:#B4B4B4; --i-boton-2:#E8E8ED; --i-boton-2-hover:#DCDCE1; --i-apagado:#F0F0F0; --i-apagado-b:#E0E0E0; --i-apagado-tx:#A8A8A8; --i-borrar-tx:#D70015; --i-borrar-hover:#F9D9D9; --i-lista:#FFFFFF; --i-lista-linea:#F2F2F2; --i-modal-velo:rgba(30,34,38,.42); --i-suelo:#F5F5F7; --i-suelo-2:#F2F4F6; --i-zebra:#FAFAFA; --i-soltar:#FBFCFD; --i-soltar-on:#F0F9FE; --i-visor-sep:#DFE5EC; --i-firma-linea:#D4D4D4; --i-aviso-info:#E3F0FD; --i-aviso-mal:#FDECEC; --i-aviso-mal-tx:#B3261E; --i-aviso-ok:#E6F6EA; --i-aviso-ok-tx:#1F7A35; --i-sombra-tarj:0 1px 2px rgba(0,0,0,.04),0 8px 30px rgba(0,0,0,.05); --i-pedido-aviso:#1D1D1F; --i-pedido-aviso-tx:#FFFFFF; --i-fase-sep:#2E2E2E; } @media (prefers-color-scheme:dark){ :root:not([data-tema="claro"]){ --i-fondo:#000000; --i-papel:#1D1D1F; --i-visor:#141416; --i-dialogo:#1D1D1F; --i-banda:#2C2C2E; --i-diente:#E5E5EA; --i-acento:#0A84FF; --i-acento-p:#0E2A4A; --i-fila-on:#12335C; --i-boton:#0071E3; --i-boton-b:#0071E3; --i-borrar:#3A1414; --i-chevron:#2997FF; --i-chevron-off:#636366; --i-visor-on:#0A84FF; --i-azul:#2997FF; --i-tinta:#F5F5F7; --i-etiq:#D2D2D7; --i-suave:#A1A1A6; --i-boton-tx:#FFFFFF; --i-req:#FF6B6B; --i-trazo:#8E8E93; --i-linea:#2C2C2E; --i-linea-2:#48484A; --i-barra:rgba(29,29,31,.78); --i-barra-linea:rgba(255,255,255,.1); --i-campo:#2C2C2E; --i-placeholder:#98989D; --i-boton-2:#3A3A3C; --i-boton-2-hover:#48484A; --i-apagado:#2C2C2E; --i-apagado-b:#3A3A3C; --i-apagado-tx:#8E8E93; --i-borrar-tx:#FF7B72; --i-borrar-hover:#4A1A1A; --i-lista:#1D1D1F; --i-lista-linea:#2C2C2E; --i-modal-velo:rgba(0,0,0,.62); --i-suelo:#2C2C2E; --i-suelo-2:#2C2C2E; --i-zebra:#232325; --i-soltar:#161618; --i-soltar-on:#0E2A4A; --i-visor-sep:#3A3A3C; --i-firma-linea:#48484A; --i-aviso-info:#0E2A4A; --i-aviso-mal:#3A1414; --i-aviso-mal-tx:#FF7B72; --i-aviso-ok:#0F2A1A; --i-aviso-ok-tx:#5DD48A; --i-sombra-tarj:0 1px 2px rgba(0,0,0,.5),0 8px 30px rgba(0,0,0,.6); --i-pedido-aviso:#F5F5F7; --i-pedido-aviso-tx:#1D1D1F; --i-fase-sep:#8E8E93; color-scheme:dark; } } :root[data-tema="oscuro"]{ --i-fondo:#000000; --i-papel:#1D1D1F; --i-visor:#141416; --i-dialogo:#1D1D1F; --i-banda:#2C2C2E; --i-diente:#E5E5EA; --i-acento:#0A84FF; --i-acento-p:#0E2A4A; --i-fila-on:#12335C; --i-boton:#0071E3; --i-boton-b:#0071E3; --i-borrar:#3A1414; --i-chevron:#2997FF; --i-chevron-off:#636366; --i-visor-on:#0A84FF; --i-azul:#2997FF; --i-tinta:#F5F5F7; --i-etiq:#D2D2D7; --i-suave:#A1A1A6; --i-boton-tx:#FFFFFF; --i-req:#FF6B6B; --i-trazo:#8E8E93; --i-linea:#2C2C2E; --i-linea-2:#48484A; --i-barra:rgba(29,29,31,.78); --i-barra-linea:rgba(255,255,255,.1); --i-campo:#2C2C2E; --i-placeholder:#98989D; --i-boton-2:#3A3A3C; --i-boton-2-hover:#48484A; --i-apagado:#2C2C2E; --i-apagado-b:#3A3A3C; --i-apagado-tx:#8E8E93; --i-borrar-tx:#FF7B72; --i-borrar-hover:#4A1A1A; --i-lista:#1D1D1F; --i-lista-linea:#2C2C2E; --i-modal-velo:rgba(0,0,0,.62); --i-suelo:#2C2C2E; --i-suelo-2:#2C2C2E; --i-zebra:#232325; --i-soltar:#161618; --i-soltar-on:#0E2A4A; --i-visor-sep:#3A3A3C; --i-firma-linea:#48484A; --i-aviso-info:#0E2A4A; --i-aviso-mal:#3A1414; --i-aviso-mal-tx:#FF7B72; --i-aviso-ok:#0F2A1A; --i-aviso-ok-tx:#5DD48A; --i-sombra-tarj:0 1px 2px rgba(0,0,0,.5),0 8px 30px rgba(0,0,0,.6); --i-pedido-aviso:#F5F5F7; --i-pedido-aviso-tx:#1D1D1F; --i-fase-sep:#8E8E93; color-scheme:dark; }