/* ========================================================================= LA PUERTA DE CRISTAL — entrar y crear cuenta ------------------------------------------------------------------------- Lo unico de esta pantalla que no existe en app.html. Su puerta vive en acceso.html porque el servidor la protege y redirige; esta pagina si puede abrirse sin sesion, asi que necesita la suya. Los dos formularios estan siempre puestos, uno a cada lado, y una cuchilla barre entre ellos. La diagonal sale de clip-path y NO de skewX: un sesgo rasteriza el texto dentro de la capa y luego deforma la capa entera, y las letras salen borrosas aunque el contra-sesgo las enderece. ========================================================================= */ /* ========================================================================== LO QUE LA REFERENCIA NO TRAÍA: ENTRAR Y CREAR CUENTA -------------------------------------------------------------------------- El proyecto de referencia empieza ya dentro del panel. Estas dos pantallas están escritas en su mismo lenguaje —misma consola de cristal, mismas esquinas, mismo oro— para que la puerta y lo que hay detrás no parezcan dos productos distintos. ========================================================================== */ .fc-puerta{ position:relative;z-index:2; width:100%;min-height:100dvh; /* Columna y no place-items: ahora cuelgan DOS cosas, la consola y el aviso legal de debajo. Con place-items se apilaban centradas una sobre otra. */ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:18px;padding:20px; } /* EL AVISO LEGAL. Faltaba en esta puerta y estaba en la clasica; desde que /app sirve esta, es la que ve todo el mundo. Dice que la herramienta es de analisis y estructura y que no sustituye asesoria legal, fiscal ni contable. En reparacion de credito esa frase protege de verdad, y tiene que estar donde la persona ACEPTA —al crear la cuenta— no enterrada en una pagina de terminos. */ /* EL COLOR SIGUE AL TEMA, y aqui eso SI es lo correcto: a diferencia de la tarjeta azul o del papel del documento, la superficie de este pie ES el lienzo de la pagina, y el lienzo cambia con el tema. Lo puse primero en claro fijo (#8FA8C8) y en tema CLARO daba 2.44:1 contra el lienzo blanco — el enlace, 1.39. La misma trampa de siempre, y esta vez la cogi midiendo antes de subirlo en vez de esperar a que la viera Daniel. */ .fc-pie{ position:relative;z-index:2;text-align:center; font-size:12px;line-height:1.65;color:var(--pc-txt2,#8FA8C8); max-width:min(1000px,100%); } .fc-pie a{ color:var(--pc-txt,#CBDCF5);font-weight:600;text-decoration:none; border-bottom:1px solid currentColor; } .fc-pie a:hover{opacity:.8} .fc-consola{ position:relative; width:min(1000px,100%);min-height:560px; border-radius:26px;overflow:hidden; background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,rgba(20,20,28,.45) 40%,rgba(10,10,14,.68) 100%); -webkit-backdrop-filter:blur(30px) saturate(150%); backdrop-filter:blur(30px) saturate(150%); border:1px solid rgba(255,255,255,.14); box-shadow:0 40px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12); } /* En pantalla estrecha no cabe una cuchilla que barre: se apaga y queda el formulario solo, centrado. Un barrido en 380px de ancho tapa el formulario entero y no descubre nada. */ @media(max-width:860px){ .fc-hoja{display:none} .fc-lado{position:static;width:100%;opacity:1;pointer-events:auto;transform:none} .fc-consola[data-modo="entrar"] .fc-lado-crear, .fc-consola[data-modo="registro"] .fc-lado-entrar{display:none} } /* LOS ESQUINEROS SE QUITARON. Eran cuatro angulos marcando las esquinas, y con el filo de luz recorriendo el borde sobran: dos cosas dibujando el mismo contorno se estorban. La clase se deja vacia para no romper nada que la mencione. */ .fc-chip{display:none} /* --- El lado de la marca --- */ .fc-lado-marca{ position:relative;padding:46px 42px;display:flex;flex-direction:column;justify-content:space-between; background:linear-gradient(152deg,rgba(47,132,240,.30) 0%,rgba(19,66,132,.24) 45%,rgba(10,10,16,.30) 100%); /* Sin borde derecho. Este panel va DEBAJO de la cuchilla, que ya trae su propia diagonal; el borde pintaba una raya vertical recta que cruzaba la diagonal por el medio y partia el diseno en dos. La separacion entre los dos lados la hace el corte de la cuchilla, no una linea. */ } .fc-lado-marca::after{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(520px 320px at 88% -10%, rgba(143,192,250,.16) 0%, transparent 60%); } .fc-logo{display:flex;align-items:center;gap:11px;position:relative;z-index:1} .fc-logo-marca{ width:38px;height:38px;border-radius:11px;display:grid;place-items:center; background:linear-gradient(145deg,#BBD9FD,#8FC0FA);color:#0A1E3C; font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px; box-shadow:0 8px 22px rgba(143,192,250,.30); } .fc-logo b{font-family:'Space Grotesk',sans-serif;font-size:18px;letter-spacing:-.02em} .fc-logo span{display:block;font-size:9.5px;letter-spacing:2.2px;color:#8FC0FA;font-weight:700} .fc-lema{position:relative;z-index:1;margin:30px 0 0} .fc-lema h2{ font-family:'Space Grotesk',sans-serif;font-size:31px;line-height:1.16; letter-spacing:-.035em;font-weight:700;margin-bottom:12px; } .fc-lema h2 em{font-style:normal;color:#8FC0FA} .fc-lema p{font-size:14px;line-height:1.65;color:#CBDCF5;max-width:36ch} /* ========================================================================= LA PILA DE DOCUMENTOS ------------------------------------------------------------------------- Sustituye a la lista de cinco entregables que habia aqui. Aquella lista CONTABA lo que sale de la app; esto lo ENSEÑA, y en la puerta de entrada una imagen de lo que vas a tener pesa mas que cinco renglones de texto que nadie lee mientras escribe su contraseña. Va en CSS y no como imagen a proposito: escala sola en cualquier pantalla, no añade ni un byte de descarga, y el dia que cambie la marca se cambia un color aqui en vez de volver a exportar un PNG. Las rayas grises son un documento sin leer, y eso es lo que se quiere: lo unico que tiene que llegar desde el otro lado es que hay un papel, que lleva la firma del cliente y que esta listo. ========================================================================= */ .fc-pila{ position:relative;z-index:1; /* El alto lo manda la tarjeta de delante; las de detras van absolutas. */ padding:14px 0 0 0; perspective:900px; } .fc-doc{ border-radius:14px; background:#FFFFFF; box-shadow:0 18px 40px rgba(4,14,32,.34), 0 2px 6px rgba(4,14,32,.16); } /* Las dos de detras: solo se les ve el canto, asomando por arriba y por la derecha. Mas claras cuanto mas lejos, que es como se lee la profundidad. */ .fc-doc-2,.fc-doc-3{position:absolute;left:0;right:0;height:60px} .fc-doc-2{top:6px; transform:translateX(16px) scale(.985); background:rgba(255,255,255,.38)} .fc-doc-3{top:0; transform:translateX(32px) scale(.97); background:rgba(255,255,255,.18)} .fc-doc-1{position:relative;padding:20px 22px 16px} .fc-doc-et{ font-size:9.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase; color:#1C63BE;margin-bottom:14px; } /* El texto del documento, sin texto. Lo que importa no es que se lea: es que se entienda que hay algo escrito. */ .fc-raya{height:7px;border-radius:99px;background:#DCE6F5;margin-bottom:9px} .fc-doc-pie{ display:flex;align-items:flex-end;justify-content:space-between;gap:14px; margin-top:26px; } .fc-firma{font-size:11px;color:#5C6578;line-height:1.2} .fc-firma span{ display:block;width:104px;height:1.5px;background:#12203A;margin-bottom:6px; } .fc-listo{ font-size:11.5px;font-weight:700;color:#14672F; background:#D9F2E3;border-radius:99px;padding:6px 14px;white-space:nowrap; } /* --- El lado del formulario --- */ .fc-lado-forma{padding:46px 42px;display:flex;flex-direction:column;justify-content:center} @media(max-width:520px){.fc-lado-forma{padding:34px 24px}} .fc-forma-cab{margin-bottom:26px} .fc-forma-cab h1{ font-family:'Space Grotesk',sans-serif;font-size:25px;font-weight:700; letter-spacing:-.03em;margin-bottom:6px; } .fc-forma-cab p{font-size:13.5px;color:#CBDCF5;line-height:1.6} .fc-campo{margin-bottom:14px} .fc-campo label{ display:block;font-size:10px;font-weight:800;letter-spacing:1.3px; text-transform:uppercase;color:#A9C0DE;margin-bottom:7px; } .fc-campo input{ width:100%;padding:13px 15px;font-size:14.5px;font-family:inherit;color:#fff; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.13);border-radius:13px; transition:border-color .18s,background .18s,box-shadow .18s; } .fc-campo input::placeholder{color:#8FA8C8} .fc-campo input:focus{ outline:0;background:rgba(255,255,255,.085); border-color:rgba(143,192,250,.55); box-shadow:0 0 0 3px rgba(143,192,250,.13); } /* El relleno automático de Chrome pinta el campo de blanco y el texto de negro. Se le da la vuelta con una sombra interior del tamaño del campo: es el único modo que respeta el navegador. */ .fc-campo input:-webkit-autofill, .fc-campo input:-webkit-autofill:hover, .fc-campo input:-webkit-autofill:focus{ -webkit-text-fill-color:#fff; -webkit-box-shadow:0 0 0 1000px #17171F inset; transition:background-color 9999s ease-out; } .fc-dos{display:grid;grid-template-columns:1fr 1fr;gap:11px} @media(max-width:520px){.fc-dos{grid-template-columns:1fr}} .fc-btn{ width:100%;margin-top:8px;padding:14px;border:0;border-radius:13px;cursor:pointer; font-family:'Space Grotesk',sans-serif;font-size:14.5px;font-weight:700;letter-spacing:-.01em; color:#0A1E3C;background:linear-gradient(180deg,#BBD9FD 0%,#8FC0FA 100%); box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 5px 0 #134284,0 12px 26px rgba(143,192,250,.26); transition:transform .12s,box-shadow .12s,filter .15s; } .fc-btn:hover:not(:disabled){filter:brightness(1.05)} .fc-btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 #134284} .fc-btn:disabled{opacity:.55;cursor:progress} .fc-cambiar{margin-top:18px;text-align:center;font-size:13px;color:#A9C0DE} /* La casilla de Terminos (29-sep-2026). */ .fc-acepto{display:flex;gap:10px;align-items:flex-start;margin:4px 0 14px;font-size:13px;line-height:1.45;color:#54627C;cursor:pointer} .fc-acepto input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:#1976D2} .fc-acepto a{color:#1C63BE;font-weight:600;text-decoration:underline} .fc-cambiar button{ background:0;border:0;padding:0;cursor:pointer;font:inherit;font-weight:700;color:#8FC0FA; border-bottom:1px solid rgba(143,192,250,.35); } .fc-aviso{ margin-top:14px;padding:11px 14px;border-radius:12px;font-size:13px;line-height:1.55;display:none; } .fc-aviso.mal{display:block;background:rgba(244,63,94,.12);border:1px solid rgba(244,63,94,.34);color:#ffb4bf} .fc-aviso.bien{display:block;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.34);color:#7ff0c4} /* El enlace para reenviar el correo del alta: discreto, debajo del aviso. */ .fc-reenviar{display:block;margin:10px auto 0;padding:8px 12px;border:0;background:none;color:#1565C0;font-size:13.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer} .fc-reenviar[hidden]{display:none} .fc-reenviar:disabled{color:#5A6A84;text-decoration:none;cursor:default} .fc-sello{ margin-top:20px;display:flex;align-items:center;gap:8px;justify-content:center; font-size:11.5px;color:#8FA8C8; } .fc-sello i{width:6px;height:6px;border-radius:50%;background:#10b981;box-shadow:0 0 8px #10b981} /* El envoltorio #pantalla no puede existir para la maqueta. .glassy-dashboard-container es un flex que centra a SU HIJO, y su hijo era este div, no la consola. La consola pedia width:100% de un padre sin ancho, asi que se quedaba en la mitad de la pantalla. Con display:contents el div desaparece de la maqueta y la consola pasa a ser hija directa, que es lo que el CSS de la referencia espera. */ #pantalla{display:contents} /* .gd-view-wrapper es flex-direction:column en la referencia —apila tarjetas— y aqui hace falta en fila: menu a la izquierda, contenido a la derecha. Se dice con una clase propia y no con un style en linea, que no puede ganarle a una regla de la hoja. */ .fc-fila{flex-direction:row !important;gap:0 !important} /* ========================================================================== AÑADIDOS AL PANEL -------------------------------------------------------------------------- La referencia traía tres pestañas de ejemplo. Aquí hacen falta trece secciones, así que el dock lateral no basta: se añade una columna de menú dentro del panel, en el mismo vidrio. ========================================================================== */ .fc-menu{ width:186px;flex-shrink:0;overflow-y:auto;padding:4px 8px 4px 0; border-right:1px solid rgba(255,255,255,.08);margin-right:14px; } .fc-menu::-webkit-scrollbar{width:4px} .fc-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:4px} .fc-menu-sep{ font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase; color:#8FA8C8;padding:14px 10px 6px; } .fc-menu-sep:first-child{padding-top:4px} .fc-menu button{ width:100%;display:flex;align-items:center;gap:9px; padding:8px 10px;margin-bottom:2px;border:0;border-radius:10px;cursor:pointer; font:inherit;font-size:12.5px;font-weight:500;text-align:left; color:#CBDCF5;background:transparent; transition:background .15s,color .15s; } .fc-menu button:hover{background:rgba(255,255,255,.06);color:#fff} .fc-menu button.on{ background:linear-gradient(135deg,rgba(143,192,250,.16),rgba(143,192,250,.06)); color:#8FC0FA;font-weight:600; box-shadow:inset 0 0 0 1px rgba(143,192,250,.22); } .fc-menu button svg{flex-shrink:0;opacity:.85} .fc-menu button.on svg{opacity:1} .fc-cuerpo{flex:1;min-width:0;overflow-y:auto;padding-right:4px} .fc-cuerpo::-webkit-scrollbar{width:5px} .fc-cuerpo::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:4px} /* Las cifras del panel, en el vidrio de la referencia. */ .fc-cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px} @media(max-width:1100px){.fc-cifras{grid-template-columns:repeat(2,1fr)}} .fc-cifra{ padding:14px 16px;border-radius:16px; background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,rgba(22,22,30,.42) 50%,rgba(12,12,18,.58) 100%); -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%); border:1px solid rgba(255,255,255,.12); } .fc-cifra .et{ display:block;font-size:9px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase; color:#A9C0DE;margin-bottom:7px; } .fc-cifra .n{ font-family:'Space Grotesk',sans-serif;font-size:27px;font-weight:700; letter-spacing:-.04em;line-height:1; } .fc-cifra .n small{font-size:13px;font-weight:500;color:#A9C0DE;letter-spacing:0} .fc-cifra .pie{display:block;margin-top:6px;font-size:11.5px;color:#A9C0DE} .fc-cifra.oro .n{color:#8FC0FA} .fc-tabla{width:100%;border-collapse:collapse;font-size:12.5px} .fc-tabla th{ text-align:left;padding:9px 12px;font-size:9px;font-weight:800;letter-spacing:1.3px; text-transform:uppercase;color:#A9C0DE; border-bottom:1px solid rgba(255,255,255,.10); } .fc-tabla td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.055)} .fc-tabla tbody tr{transition:background .14s} .fc-tabla tbody tr:hover{background:rgba(255,255,255,.035)} .fc-tabla .nom{font-weight:600;color:#fff} .fc-tabla .sub{display:block;font-size:11px;color:#A9C0DE;margin-top:1px} .fc-etapa{ display:inline-block;padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:700; background:rgba(47,132,240,.18);color:#8FC0FA;border:1px solid rgba(47,132,240,.32); } .fc-vacio{padding:34px 16px;text-align:center;color:#A9C0DE;font-size:13px} .fc-nota{ padding:13px 16px;border-radius:14px;font-size:12.5px;line-height:1.6; color:#CBDCF5; background:rgba(143,192,250,.06);border:1px solid rgba(143,192,250,.18); } .fc-nota b{color:#8FC0FA} /* ========================================================================== LAS SECCIONES Todo en el vidrio de la referencia: mismos fondos, mismos bordes, mismo oro. ========================================================================== */ .fc-dos-col{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px} @media(max-width:1000px){.fc-dos-col{grid-template-columns:1fr}} .fc-lista{display:grid;gap:6px} .fc-item{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:10px 13px;border-radius:12px; background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08); } .fc-item b{font-size:13px;font-weight:600;display:block} .fc-item .sub{display:block;font-size:11px;color:#A9C0DE;margin-top:1px} .fc-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px} .fc-mini{ position:relative;padding:13px 15px;border-radius:14px; background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,rgba(22,22,30,.40) 50%,rgba(12,12,18,.55) 100%); border:1px solid rgba(255,255,255,.11); } .fc-mini.oro{border-color:rgba(143,192,250,.34);background:linear-gradient(135deg,rgba(143,192,250,.10),rgba(22,22,30,.42))} .fc-mini b{display:block;font-size:13px;font-weight:600;margin-bottom:4px;padding-right:26px} .fc-mini p{font-size:11.5px;line-height:1.55;color:#A9C0DE} .fc-cuando{ display:inline-block;margin-top:8px;padding:2px 8px;border-radius:20px; font-size:9.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase; color:#8FC0FA;background:rgba(143,192,250,.12);border:1px solid rgba(143,192,250,.24); } .fc-num{ position:absolute;top:10px;right:13px; font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700; line-height:1;color:#8FC0FA;opacity:.22; } .fc-ir{display:inline-block;margin-top:8px;font-size:11.5px;font-weight:700;color:#8FC0FA;text-decoration:none} .fc-ir:hover{text-decoration:underline} /* El bloque destacado de cada sección: el azul de la referencia con el oro. */ .fc-destacado{ padding:24px 26px;border-radius:20px;margin-bottom:12px; background:linear-gradient(152deg,rgba(47,132,240,.34) 0%,rgba(19,66,132,.30) 45%,rgba(10,10,16,.42) 100%); border:1px solid rgba(143,192,250,.26); box-shadow:0 18px 44px rgba(3,6,18,.34), inset 0 1px 0 rgba(255,255,255,.12); } .fc-et-oro{ display:block;font-size:9px;font-weight:800;letter-spacing:1.6px; text-transform:uppercase;color:#8FC0FA;margin-bottom:6px; } .fc-destacado h2{ font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:700; letter-spacing:-.03em;margin-bottom:8px; } .fc-destacado p{font-size:13.5px;line-height:1.65;color:#E8EFFA;max-width:62ch} .fc-destacado p b{color:#fff} .fc-acciones{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px} .fc-btn-oro{ padding:10px 18px;border-radius:11px;text-decoration:none; font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700; color:#0A1E3C;background:linear-gradient(180deg,#BBD9FD,#8FC0FA); box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 4px 0 #134284,0 9px 20px rgba(143,192,250,.24); transition:transform .12s,box-shadow .12s; } .fc-btn-oro:active{transform:translateY(3px);box-shadow:0 1px 0 #134284} .fc-btn-fantasma{ padding:10px 18px;border-radius:11px;text-decoration:none;font-size:13px;font-weight:600; color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22); transition:background .15s; } .fc-btn-fantasma:hover{background:rgba(255,255,255,.18)} /* Tu marca */ .fc-previo{ display:flex;align-items:center;gap:13px;padding:16px 18px;border-radius:14px;margin-bottom:14px; background:linear-gradient(152deg,#1B2130,#0B0E16);border:1px solid rgba(255,255,255,.10); } .fc-previo img{max-height:42px;max-width:170px;object-fit:contain} .fc-inicial{ width:42px;height:42px;border-radius:10px;display:grid;place-items:center;flex-shrink:0; font-weight:800;font-size:18px;background:rgba(255,255,255,.14); } .fc-previo .sub{display:block;font-size:11px;color:#A9C0DE} .fc-previo b{display:block;font-size:15px;font-weight:700;margin-top:2px} .fc-datos{display:grid;grid-template-columns:1fr 1fr;gap:8px} @media(max-width:820px){.fc-datos{grid-template-columns:1fr}} .fc-dato{ padding:9px 13px;border-radius:11px; background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07); } .fc-dato span{ display:block;font-size:9px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase; color:#A9C0DE;margin-bottom:3px; } .fc-dato b{font-size:13px;font-weight:600;word-break:break-word} /* Plan y consumo */ .fc-plan-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px} .fc-plan-cab h2{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;letter-spacing:-.03em} .fc-precio{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:700;color:#8FC0FA;letter-spacing:-.03em} .fc-precio small{font-size:13px;font-weight:500;color:#A9C0DE} .fc-medidores{display:grid;gap:12px} .fc-medidor-cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px} .fc-medidor-cab span{font-size:11.5px;color:#CBDCF5} .fc-medidor-cab b{font-size:12.5px;font-weight:700} .fc-barra{height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden} .fc-barra i{ display:block;height:100%;border-radius:6px; background:linear-gradient(90deg,#2F84F0,#1C63BE); transition:width .5s cubic-bezier(.16,1,.3,1); } /* ========================================================================== EL FILO DE LUZ QUE GIRA -------------------------------------------------------------------------- Un anillo de luz recorriendo el borde de la tarjeta. POR QUE CON MASCARA Y NO TAPANDO. El primer intento fue: conico girando detras y encima otra capa que dejara ver solo el borde. No vale con una tarjeta de cristal — esa capa es translucida a proposito, el conico se ve a traves y la tarjeta entera se pinta de amarillo. Aqui se RECORTA el anillo: lo de dentro no se tapa, no llega a dibujarse. Y como la mascara gira con el elemento, el movimiento no puede venir de `rotate`: viene de animar el angulo del degradado con @property. Donde no exista, el anillo se queda quieto y sigue siendo un borde dorado correcto. ========================================================================== */ @property --fc-ang{syntax:'';initial-value:0deg;inherits:false} .fc-consola{isolation:isolate} .fc-consola::before{ content:'';position:absolute;inset:0;z-index:4;pointer-events:none; border-radius:inherit;padding:1.5px; background:conic-gradient( from var(--fc-ang), transparent 0deg, transparent 276deg, rgba(47,132,240,.30) 306deg, rgba(143,192,250,.92) 336deg, #ffffff 349deg, rgba(47,132,240,.82) 357deg, transparent 360deg); /* El recorte: se pinta todo y se resta el interior. Queda el marco. */ -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude; animation:fc-filo 4.6s linear infinite; } @keyframes fc-filo{to{--fc-ang:360deg}} @media(prefers-reduced-motion:reduce){ .fc-consola::before{animation:none;--fc-ang:320deg} } /* ========================================================================== LA CUCHILLA QUE BARRE -------------------------------------------------------------------------- Una pieza con la marca que se desliza de un lado al otro y descubre el formulario de debajo. Los DOS formularios estan siempre puestos, uno a cada lado; lo unico que se mueve es la cuchilla. LA DIAGONAL SALE DE clip-path, NO DE skewX. Es la leccion que costo cara en acceso.html: un sesgo rasteriza el texto DENTRO de la capa y despues deforma la capa entera, asi que las letras se vuelven a muestrear y salen borrosas. El contra-sesgo las endereza, pero ya emborronadas. Recortando, el contenido no pasa por ninguna transformacion. Se anima solo `translate`, que va en la tarjeta grafica. Animar `left` obligaria a recalcular la maqueta en cada fotograma. ========================================================================== */ /* 46% y no 52%: la cuchilla ocupa 52 y el formulario empieza en 54, asi que quedan dos puntos de aire. Con 52 se montaban ocho puntos y la diagonal cortaba el titulo y los campos. */ .fc-lado{ position:absolute;top:0;bottom:0;width:46%;z-index:2; display:flex;flex-direction:column;justify-content:center; padding:44px 42px; transition:opacity .34s ease; } .fc-lado-entrar{right:0} .fc-lado-crear{left:0} @media(max-width:520px){.fc-lado{padding:34px 24px}} /* El que no toca se apaga y deja de recibir clics: si siguiera activo, el tabulador se metería en un formulario que no se ve. */ .fc-consola[data-modo="entrar"] .fc-lado-crear, .fc-consola[data-modo="registro"] .fc-lado-entrar{opacity:0;pointer-events:none} .fc-consola[data-modo="entrar"] .fc-lado-crear *, .fc-consola[data-modo="registro"] .fc-lado-entrar *{visibility:hidden} .fc-hoja{ position:absolute;top:-3%;bottom:-3%;left:0; width:52%;z-index:3;overflow:hidden; background:linear-gradient(152deg,#2F84F0 0%,#1C63BE 34%,#134284 68%,#0E2F60 100%); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%); border-right:1px solid rgba(143,192,250,.34); box-shadow:16px 0 44px rgba(3,6,20,.44); /* 70px de desnivel: el mismo aire que daba el sesgo de 7 grados. */ clip-path:polygon(70px 0, 100% 0, calc(100% - 70px) 100%, 0 100%); translate:var(--barrido,0%) 0; transition:translate .62s cubic-bezier(.76,0,.24,1); will-change:translate; } /* 100% y no 78%: la cuchilla tiene que salirse del todo por la derecha, o al descubrir "crear cuenta" seguiria tapandole el lado izquierdo. */ .fc-consola[data-modo="registro"] .fc-hoja{--barrido:100%} .fc-hoja-dentro{ height:100%;display:flex;flex-direction:column;justify-content:space-between; /* La cuchilla asoma por los lados al barrer; el contenido tiene que caber en la parte que SE VE, de ahi la holgura. */ padding:46px 15% 46px 12%; } .fc-hoja::after{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(460px 300px at 82% -12%, rgba(143,192,250,.20) 0%, transparent 62%); } @media(prefers-reduced-motion:reduce){ .fc-hoja{transition:none} .fc-lado{transition:none} } /* ========================================================================= AZUL CON BLANCO ------------------------------------------------------------------------- Decisión de Daniel el 22-sep: la puerta es azul y blanco. Ni gris ni oro. El gris no era una elección: la consola empezaba con rgba(255,255,255,.08) sobre un fondo oscuro, y blanco a baja opacidad SOBRE OSCURO da gris, siempre. Es el mismo error que ya se corrigió en la piel; esta hoja se extrajo antes y se quedó con él. Va al final del fichero a propósito: a igualdad de especificidad gana la regla más tardía, así que revierte lo de arriba sin tener que ir a buscarlo línea por línea. ========================================================================= */ /* ---------- El lado del formulario: blanco de verdad ---------- */ .fc-consola{ background:#FFFFFF !important; border:1px solid rgba(19,66,132,.16) !important; box-shadow:0 30px 70px rgba(10,30,70,.22), 0 2px 8px rgba(10,30,70,.08) !important; } /* La capa interior del filo de luz tiene que ser del mismo blanco, o se ve un marco de otro color por dentro del borde. */ .fc-consola::after{background:#FFFFFF !important} .fc-lado-entrar,.fc-lado-crear{color:#12203A} .fc-forma-cab h1{color:#0E2F60} .fc-forma-cab p{color:#54627C} .fc-campo label{color:#54627C} .fc-campo input{ background:#F6F9FE; border:1px solid rgba(19,66,132,.18); color:#12203A; } .fc-campo input::placeholder{color:#8792A8} .fc-campo input:focus{ background:#fff; border-color:#2F84F0; box-shadow:0 0 0 3px rgba(47,132,240,.16); } /* Chrome pinta el relleno automático a su manera; aquí el campo ya es claro, así que solo hay que fijar el color del texto. */ .fc-campo input:-webkit-autofill, .fc-campo input:-webkit-autofill:hover, .fc-campo input:-webkit-autofill:focus{ -webkit-text-fill-color:#12203A !important; -webkit-box-shadow:0 0 0 1000px #F6F9FE inset !important; } /* ---------- El botón: azul, no dorado ---------- */ .fc-btn{ background:linear-gradient(180deg,#1976D2 0%,#1565C0 100%) !important; color:#fff !important; box-shadow:0 1px 0 rgba(255,255,255,.30) inset, 0 5px 0 #134284, 0 12px 26px rgba(28,99,190,.30) !important; } .fc-btn:active:not(:disabled){box-shadow:0 1px 0 #134284 !important} .fc-cambiar{color:#54627C} .fc-cambiar button{color:#1C63BE;border-bottom-color:rgba(28,99,190,.34)} .fc-sello{color:#6B7789} /* ========================================================================= EL FILO DE LUZ CAMBIA DE COLOR SEGUN POR DONDE VA ------------------------------------------------------------------------- El haz era azul en toda la vuelta. Sobre el lado blanco se ve perfecto, y sobre la cuchilla azul desaparecia: azul sobre azul. Daniel: "cuando entre en la parte azul que se ponga blanca". ACTUALIZADO EL 23-sep. Daniel otra vez: "la rayita o luz que circula, en el azul que sea amarillo, pero en la parte blanca que sea azul". El mecanismo no cambia ni un grado —la geometria de abajo sigue siendo la medida— solo el color del tramo que va sobre la cuchilla: blanco pasa a oro. Y encaja mejor de lo que estaba: sobre el azul de la hoja el oro es la marca, y el blanco de antes competia con el papel del documento que hay justo debajo. Lo primero que se me ocurrio fue un segundo haz encima, recortado por la diagonal. No cabe: ::before es el haz y ::after ya es el fondo blanco de la consola, y meter un elemento nuevo obliga a tocar el HTML de la puerta. Lo que si cabe: el haz esta SIEMPRE en el mismo sitio del degradado, o sea que su posicion en la vuelta la da --fc-ang y nada mas. Si la posicion es una funcion del tiempo, el color tambien puede serlo. Se anima el color con la MISMA duracion, y cambia justo cuando el haz cruza la diagonal. De donde salen los numeros (medidos, no a ojo): consola 917 x 600 borde de la hoja 52.5% del ancho, a media altura esquinas 56.8 grados desde el centro el haz va 11 grados por detras de --fc-ang (pico en 349deg) Con eso, el haz esta sobre la cuchilla cuando --fc-ang va de 186.6 a 360 y de 0 a 15.4 grados. En porcentaje de la vuelta: blanco hasta el 4.3%, azul del 7% al 48.8%, y blanco otra vez desde el 51.8%. Los tramos de 3% son el cruce, para que no de un salto seco al cambiar de lado. En "crear cuenta" la cuchilla se va al lado contrario (--barrido:68%). No hacen falta otros fotogramas: media vuelta de desfase es exactamente eso, y media vuelta es -2.3s de retraso en la animacion del color. ========================================================================= */ @property --fc-luz {syntax:'';initial-value:#1C63BE;inherits:false} @property --fc-luz-b{syntax:'';initial-value:rgba(47,132,240,.95);inherits:false} .fc-consola::before{ background:conic-gradient( from var(--fc-ang), transparent 0deg, transparent 276deg, rgba(47,132,240,.35) 306deg, var(--fc-luz-b) 338deg, var(--fc-luz) 350deg, var(--fc-luz-b) 358deg, transparent 360deg) !important; animation:fc-filo 4.6s linear infinite, fc-filo-color 4.6s linear infinite !important; animation-delay:0s, 0s !important; } @keyframes fc-filo-color{ 0% {--fc-luz:#F5BC4A; --fc-luz-b:rgba(232,160,32,.92)} 4.3% {--fc-luz:#F5BC4A; --fc-luz-b:rgba(232,160,32,.92)} 7.3% {--fc-luz:#1C63BE; --fc-luz-b:rgba(47,132,240,.95)} 48.8% {--fc-luz:#1C63BE; --fc-luz-b:rgba(47,132,240,.95)} 51.8% {--fc-luz:#F5BC4A; --fc-luz-b:rgba(232,160,32,.92)} 100% {--fc-luz:#F5BC4A; --fc-luz-b:rgba(232,160,32,.92)} } /* La cuchilla al otro lado: media vuelta de desfase, solo en el color. */ .fc-consola[data-modo="registro"]::before{ animation-delay:0s, -2.3s !important; } /* Sin movimiento: el haz se queda quieto arriba a la izquierda, que cae sobre la cuchilla, asi que ahi el color que toca es el oro. */ @media(prefers-reduced-motion:reduce){ .fc-consola::before{ animation:none !important; --fc-ang:320deg; --fc-luz:#F5BC4A; --fc-luz-b:rgba(232,160,32,.92); } } /* ========================================================================= QUE EL AZUL LLEGUE A TODO EL CONTENEDOR ------------------------------------------------------------------------- El recorte diagonal mete el borde 70px hacia dentro arriba y abajo, así que por esas esquinas asomaba el fondo de la consola. Se ensancha la cuchilla lo suficiente para que el recorte caiga FUERA del contenedor y solo se vea la diagonal que sí se quiere. ========================================================================= */ .fc-hoja{ top:-6%;bottom:-6%; width:64%; background:linear-gradient(152deg,#2F84F0 0%,#1C63BE 34%,#134284 68%,#0E2F60 100%) !important; border-right:0 !important; } /* Entrar: la cuchilla nace fuera por la izquierda, así el recorte de arriba queda fuera de la vista y el azul llega al borde. */ .fc-consola[data-modo="entrar"] .fc-hoja{--barrido:-12%} /* Crear cuenta: sale por la derecha lo bastante para que el recorte de abajo tampoco asome. */ .fc-consola[data-modo="registro"] .fc-hoja{--barrido:68%} /* El formulario se aparta de la diagonal en los dos modos. */ .fc-lado{width:44%} .fc-lado-entrar{right:0} .fc-lado-crear{left:0} /* ========================================================================= LA PUERTA NO SIGUE AL TEMA DE LA PÁGINA ------------------------------------------------------------------------- El formulario es BLANCO en los dos temas, así que su texto tiene que ser oscuro en los dos. Estaba heredando el color del tema de la página: con el fondo oscuro, el título salía en rgb(232,235,242) —casi blanco— sobre tarjeta blanca. Invisible. Se fija aquí, con el peso suficiente para ganarle a las reglas de tema de la piel, porque este contraste no depende del tema: depende de que la tarjeta sea blanca, y lo es siempre. ========================================================================= */ .piel-cristal .fc-consola .fc-forma-cab h1{color:#0E2F60 !important} .piel-cristal .fc-consola .fc-forma-cab p{color:#54627C !important} .piel-cristal .fc-consola .fc-campo label{color:#54627C !important} .piel-cristal .fc-consola .fc-campo input{color:#12203A !important} .piel-cristal .fc-consola .fc-cambiar{color:#54627C !important} .piel-cristal .fc-consola .fc-sello{color:#6B7789 !important} /* Y el de la cuchilla, blanco en los dos: su fondo es azul siempre. */ .piel-cristal .fc-hoja h2, .piel-cristal .fc-hoja .fc-logo b{color:#fff !important} /* El documento de la pila es PAPEL BLANCO, no vidrio: su texto va oscuro en los dos temas. Es la regla de siempre — el color lo manda la superficie donde cae el texto, no el tema de la pagina. */ .piel-cristal .fc-hoja .fc-doc-et{color:#1C63BE !important} .piel-cristal .fc-hoja .fc-firma{color:#5C6578 !important} .piel-cristal .fc-hoja .fc-listo{color:#14672F !important} .piel-cristal .fc-hoja p{color:#E8EFFA !important} /* ========================================================================= QUE EL CONTENIDO QUEPA Y VAYA CENTRADO ------------------------------------------------------------------------- Medido: el contenido de la cuchilla ocupaba 625px dentro de una consola de 560. Los 65 que sobran se comían el último entregable — "El contrato" quedaba cortado por abajo. Y estaba pegado al borde izquierdo, no centrado: la cuchilla nace FUERA de la consola por la izquierda (x = -49) para que su recorte diagonal no asome, así que un relleno simétrico deja el contenido descentrado respecto a la parte que SE VE. El relleno compensa ese desbordamiento. ========================================================================= */ .fc-consola{min-height:600px} .fc-hoja-dentro{ padding:38px 15% 38px 17% !important; justify-content:center !important; gap:22px; } .fc-lema{margin:0 !important} .fc-lema h2{font-size:27px !important;margin-bottom:10px !important} .fc-lema p{font-size:13.5px !important} /* En pantallas justas la pila encoge antes que el titular: el titular es el mensaje, la pila es el adorno que lo sostiene. */ .fc-doc-1{padding:16px 18px !important} .fc-raya{height:6px !important;margin-bottom:7px !important} .fc-doc-pie{margin-top:20px !important} .fc-logo{margin-bottom:0} @media(max-width:860px){ .fc-consola{min-height:auto} } /* ========================================================================= FUERA EL AMARILLO ------------------------------------------------------------------------- Daniel: "vamos a quitar el amarillo de la jugada". Escaneando la puerta ya pintada —no el archivo, que tiene mucho oro muerto que el bloque "sobre blanco" ya pisaba— salia amarillo en ocho sitios y en todos por la misma razon: son lo que va ENCIMA de la cuchilla azul. Cambiar el oro por azul claro y ya esta no vale, y conviene entender por que: el oro sobre el azul de la cuchilla daba 2.6:1. Nunca destaco por luminancia — destacaba por TONO, que es un amarillo contra un azul. En cuanto el acento tambien es azul, esa ventaja desaparece y hay que conseguir la jerarquia con luz, con peso o con un subrayado. Por eso aqui no hay un color de sustitucion unico: - El logotipo va BLANCO, como "Financore" que tiene al lado. Arriba la cuchilla esta en su azul mas claro (#2F84F0) y ahi no se lee nada que no sea blanco: el azul claro daba 2.3:1. Se distinguen por tamano y peso, que es como se distinguen las piezas de un logotipo. - "el cierre" no puede ser mas brillante que el blanco del titular que lo rodea, asi que el enfasis deja de ser color y pasa a ser un SUBRAYADO. La palabra se queda blanca y debajo lleva una barra azul clara. - El resplandor de la esquina era oro sobre azul; en azul sobre azul directamente no existe. Pasa a ser un velo blanco muy bajo, que es lo que hacia de verdad: dar luz a esa esquina, no color. ========================================================================= */ /* EL LOGO DE LA PUERTA, IGUAL QUE EN acceso.html (23-sep) Daniel, enseñando las dos: "aqui cambio a Financore App, con el App en amarillo, o sea como esta antes; es que lo quiero". Aqui se habia quedado todo blanco —"Financore App Credit Intelligence" en un solo bloque— mientras la puerta de verdad (acceso.html) lleva desde siempre el logotipo blanco y el "App" en oro. Dos entradas a la misma app que no se parecen es un fallo de marca, no de gusto. Y "Credit Intelligence" se retira, que es lo que ya decidimos en glassy-piel.css para el riel del panel: la pieza de marca es logotipo + App, y nada mas. */ .fc-logo b{color:#FFFFFF !important} /* OJO: la regla de arriba en este mismo archivo dice `.fc-logo span{display: block;font-size:9.5px}`, y ese selector alcanza TAMBIEN al "App", que vive dentro del . Por eso salia en renglon aparte y diminuto. No se toca esa regla —es la del subtitulo— se le devuelve aqui al "App" lo suyo. */ .fc-logo b span{ display:inline !important; color:#F5BC4A !important; font-size:inherit !important; font-weight:800; letter-spacing:-.02em !important; } .fc-logo-sub{display:none !important} .fc-lema h2 em{ color:#FFFFFF !important; /* El subrayado va con box-shadow y no con border-bottom: asi se pega a la linea de base del texto y no se separa cuando el titular hace dos lineas. */ box-shadow:inset 0 -0.20em 0 0 #8FC0FA; padding-bottom:.04em; } /* Los cinco rotulos van en la mitad baja de la cuchilla, donde el azul ya es hondo (#134284 hacia abajo) y un azul claro si se lee. */ .fc-mini i, .fc-lema i{color:#BBD9FD !important} .fc-lado-marca::after, .fc-hoja::after{ background:radial-gradient(460px 300px at 82% -12%, rgba(255,255,255,.16) 0%, transparent 62%) !important; } /* ========================================================================= LA PUERTA EN PANTALLA ESTRECHA — ESTABA ROTA ------------------------------------------------------------------------- Medido a 760px: la consola quedaba en 2px de alto y el formulario flotaba fuera de ella. En un telefono, la pantalla de entrar no se podia usar. La causa es la de siempre en esta hoja, y ya es la tercera vez: UNA MEDIA QUERY NO SUMA ESPECIFICIDAD. Arriba del todo hay un @media(max-width:860px) que pone .fc-lado en position:static, pero doscientas lineas mas abajo hay un .fc-lado{position:absolute} sin condicion. Misma especificidad, gana el ultimo: la regla movil no se aplicaba NUNCA, a ningun ancho. Con los dos lados en absolute y la cuchilla en display:none, dentro de la consola no quedaba nada que ocupara alto. De ahi los 2px. Este bloque va al FINAL a proposito: es el unico sitio donde gana. ========================================================================= */ @media(max-width:860px){ .fc-hoja{display:none !important} .fc-consola{min-height:auto !important;height:auto !important} .fc-lado{ position:static !important; width:100% !important; opacity:1 !important; pointer-events:auto !important; transform:none !important; translate:none !important; } /* Solo se enseña el lado que toca; el otro deja de existir, no se esconde con opacidad: en flujo normal seguiria ocupando su alto. */ .fc-consola[data-modo="entrar"] .fc-lado-crear, .fc-consola[data-modo="registro"] .fc-lado-entrar{display:none !important} /* Sin cuchilla no hay a que apartarse, y el filo de luz se queda: es lo unico de la referencia que sobrevive aqui y no estorba. */ .fc-lado-entrar,.fc-lado-crear{right:auto !important;left:auto !important} } /* El unico objetivo tactil pequeno que queda en la puerta: "Crea tu cuenta", 21px de alto. Es el enlace que cambia de modo, o sea el que pulsa todo el que llega por primera vez. En un telefono 21px se falla mas de lo que se acierta; 44 es el minimo con el que el dedo no tapa el objetivo. */ @media(max-width:860px){ .fc-cambiar button{ display:inline-flex;align-items:center; min-height:44px;padding:0 6px; } } /* ========================================================================= LA CUCHILLA NO RECIBE UN SOLO CLIC 23-sep-2026 ------------------------------------------------------------------------- El mismo fallo que en acceso.html, y aqui es peor porque la cuchilla va mas arriba todavia: .fc-hoja (la cuchilla azul) z-index 3 pointer-events auto .fc-lado (el formulario) z-index 2 Medido en el navegador. La decoracion esta ENCIMA del formulario y acepta clics: donde la diagonal pisa un campo, el campo deja de existir para el raton. El clic se lo lleva la cuchilla, el foco no se mueve, y lo que se escribe sigue cayendo en el campo anterior — el correo. Asi salio en el video de un socio: "info@jsinnovationgroup.comkkkkkkk". Las "k" eran la contraseña. No se reproduce siempre porque depende del ancho: la cuchilla ocupa el 64% y el formulario el 44%, asi que a ciertos anchos se solapan y a otros no. Uno lo sufre, otro no, y parece cosa de su ordenador. La cuchilla lleva aria-hidden="true": esta DECLARADA como decoracion. Una decoracion que intercepta clics es un fallo. El z-index se queda —lo necesita para el recorte diagonal— y se le quita el puntero. ========================================================================= */ .fc-hoja, .fc-hoja *{pointer-events:none} /* Si algun dia entra algo pulsable dentro de la cuchilla, va aqui. */ .fc-hoja a, .fc-hoja button, .fc-hoja input{pointer-events:auto} /* ========================================================================= EL AVISO DE LA PUERTA, QUE NO SE PODIA LEER 23-sep-2026 ------------------------------------------------------------------------- En el video del socio se ve el recuadro rojo debajo de "Entrar" y no se lee nada. No es la camara: medido en el navegador, el texto del aviso daba 1,43:1. color #FFB4BF (rosa claro) fondo rgba(244,63,94,.12) sobre la tarjeta BLANCA Los dos tonos se eligieron para una tarjeta oscura. La tarjeta de la puerta es BLANCA en los dos temas —esta escrito doscientas lineas mas arriba— asi que el rosa claro se disuelve en ella. Y esto no es un detalle de estilo: es el unico sitio donde la app le dice al usuario POR QUE no ha podido entrar. Un mensaje de error que no se lee deja a la persona probando la misma contraseña una y otra vez. Es exactamente lo que se ve en el video. Rojo oscuro sobre el rosa palido: 7,4:1. Y el verde igual, que tenia el mismo problema al confirmar el correo. ========================================================================= */ .fc-aviso.mal{ color:#A01021 !important; background:rgba(244,63,94,.10) !important; border-color:rgba(160,16,33,.34) !important; font-weight:600; } .fc-aviso.bien{ color:#0A6B4B !important; background:rgba(16,185,129,.10) !important; border-color:rgba(10,107,75,.32) !important; font-weight:600; } /* ========================================================================= LA RAYA DEL MEDIO: UNA SOMBRA CORTADA A CUCHILLO 23-sep-2026 ------------------------------------------------------------------------- Daniel, dos veces: "se le puso esa raya de en medio" y "esa raya sigue apareciendo". Una linea vertical fina, gris, de arriba abajo, justo despues del filo azul. No era un borde, ni un elemento de 1px, ni el limite del formulario. Lo busque las tres veces y no habia nada ahi. Lo que hay es esto: .fc-hoja clip-path: polygon(70px 0, 100% 0, ...) <- la diagonal box-shadow: 16px 0 44px rgba(3,6,20,.44) <- la sombra `clip-path` recorta TODO lo que pinta el elemento, y la sombra tambien. Asi que la sombra, que deberia desvanecerse en 44px hacia la derecha, se corta EN SECO en el borde del recorte. Un degradado cortado a cuchillo se ve como lo que es: una raya. Comprobado quitando la sombra en el navegador a 3 aumentos: la raya desaparece y el filo azul queda limpio. `filter: drop-shadow()` se aplica DESPUES del recorte, asi que la sombra sigue la silueta ya recortada —la diagonal— y se desvanece de verdad. El desenfoque va a la mitad: drop-shadow mide el radio distinto que box-shadow y con 44 saldria una mancha. ========================================================================= */ .fc-hoja{ box-shadow:none !important; filter:drop-shadow(14px 0 20px rgba(3,6,20,.38)); } /* ========================================================================= EL LOGO DE LA PUERTA, EN GRANDE 23-sep-2026 ------------------------------------------------------------------------- Daniel: "ponle el logo pero en grande, con el App en amarillo". Medido antes de tocar: el icono sale a 128x128 —su tamaño natural, porque .fc-logo-img no tenia UNA SOLA regla— y el texto a 18px. De ahi la sensacion de pequeño: no lo es el logo, lo es la palabra. Un icono siete veces mas alto que su propia marca se lee como un icono con una etiqueta, no como un logotipo. La cuchilla deja 435px utiles de ancho (639 menos los dos padinges) y el bloque ya ocupaba 434. O sea que no habia sitio para crecer los dos: el icono baja un poco y la palabra sube bastante. icono 128 -> 112 palabra 18 -> 32 Y al icono se le pone medida explicita, que es lo que faltaba: hoy el PNG es de 128 y cuadra de milagro. El dia que alguien exporte uno de 512 la puerta se parte, y no habria nada en el CSS que lo impidiera. ========================================================================= */ .fc-hoja .fc-logo{gap:16px} .fc-hoja .fc-logo-img{ width:112px;height:112px; flex:0 0 auto; /* que no lo encoja el flex al crecer el texto */ object-fit:contain; } .fc-hoja .fc-logo b{ font-size:32px; line-height:1.05; letter-spacing:-.025em; } /* El "App" acompaña al tamaño, y el oro es el de fondo oscuro: la cuchilla es navy en los dos temas. */ .fc-hoja .fc-logo b span{ font-size:32px !important; color:#F5BC4A !important; font-weight:800; } /* En pantalla estrecha la cuchilla se esconde entera, pero si algun dia se enseña, el logo no puede desbordarla. */ @media(max-width:1100px){ .fc-hoja .fc-logo-img{width:92px;height:92px} .fc-hoja .fc-logo b, .fc-hoja .fc-logo b span{font-size:27px !important} } /* ========================================================================= EL AVISO LEGAL DE DEBAJO, ATADO A SU SUPERFICIE 23-sep-2026 ------------------------------------------------------------------------- Daniel: "siempre que hacemos cambios se pierde algo, revisar!" — y el ejemplo era este pie, que se quedo casi invisible. Tiene razon y el motivo es siempre el mismo. Este texto NO va sobre la tarjeta: va sobre el fondo de la pagina, que es otra superficie. Estaba escrito con `var(--pc-txt2)`, o sea heredando el tono secundario de la piel. Esta tarde subi esa escala entera para que el tema oscuro se leyera mejor —#CBDCF5 paso a #E4EDFB— y con ella se fue tambien este pie, que vive en otro sitio y no necesitaba subir nada. Esa es la leccion, escrita por cuarta vez en este proyecto: un texto que cuelga de un token compartido se mueve cuando alguien mueve el token, aunque su superficie no haya cambiado. Los sitios que estan FUERA de la superficie habitual llevan su color escrito, no heredado. #4A5872 sobre el lienzo claro -> 7,4:1. Y el enlace, medio tono mas firme que el texto, que para eso es enlace. 24-sep-2026: aqui habia ademas una variante para el tema oscuro (#C9D9F3, "sobre el lienzo #07101F"). Ese lienzo no existe detras de la puerta: body::before pinta #FAFCFF por encima en LOS DOS temas, asi que en oscuro el pie salia crema sobre blanco, 1,4:1. Se ve en la captura de Daniel. Otra vez "tema oscuro" no significaba "fondo oscuro". Un solo color. */ .fc-pie{color:#4A5872 !important} .fc-pie a{color:#12203A !important} /* ========================================================================= SI NO CABE, QUE SE PUEDA BAJAR 23-sep-2026 ------------------------------------------------------------------------- Medido a 1280x600 —una ventana de portatil de las normales, con la barra del navegador puesta—: la tarjeta de 20 a 620 (20px por debajo de la ventana) el aviso legal de 638 a 678 (78px FUERA) body overflow:hidden scrollHeight 720 = innerHeight -> no se puede bajar O sea: en cualquier pantalla de menos de ~700px de alto, el final de la tarjeta se corta y el aviso legal NO EXISTE. No es que se lea mal: no hay forma de llegar a el. Y es el texto que dice que esto no sustituye asesoria legal ni fiscal, que es justo el que no puede faltar. El `overflow:hidden` del body viene de la maqueta, donde el panel se desplaza por dentro y la pagina no. En la puerta no hay nada que se desplace por dentro, asi que ahi sobra. `safe center` y no `center` a secas: centrado mientras quepa, y en cuanto no quepa se pega arriba en vez de cortar por los dos lados. Un centrado normal, cuando el contenido es mas alto que el hueco, se come el principio Y el final — y ahi no hay scroll que valga porque lo de arriba queda en coordenadas negativas. ========================================================================= */ /* El que recorta no es el body: es la caja de la maqueta, clavada a la altura de la ventana con max-height y overflow:hidden. Medido: .fc-puerta alto 706 (lo que necesita) .glassy-dashboard-container alto 600, max-height 600, hidden body alto 600 Esa caja es el armazon del panel, donde el contenido SI se desplaza por dentro. Con la puerta dentro no hay nada que se desplace por dentro, asi que deja de tener sentido y lo unico que hace es cortar. */ .glassy-dashboard-container:has(.fc-puerta){ height:auto !important; max-height:none !important; min-height:100dvh; overflow:visible !important; } body:has(.fc-puerta){ overflow-y:auto !important; overflow-x:hidden !important; height:auto !important; } .fc-puerta{ justify-content:safe center; padding-top:24px; padding-bottom:24px; } /* ========================================================================= PUERTA O CONSOLA, NUNCA LAS DOS 24-sep-2026 ------------------------------------------------------------------------- El video de Daniel: al entrar y al salir, un cuadro partido en dos, mitad blanca y mitad azul marino. Eran la puerta (aun vacia, dejando ver el blanco del lienzo) y la consola, pintadas A LA VEZ una al lado de la otra mientras /api/yo contestaba. La consola trae el atributo `hidden`, pero la piel le pone display:flex y un display gana al atributo: no escondia nada. Ahora el de glassy.html pone data-puerta antes de pintar, con la pista que deja glassy.js (dentro / fuera). Sin pista no se enseña ninguna de las dos hasta que se sepa: un fotograma de lienzo liso es mejor que uno partido. */ #consolaCristal[hidden]{display:none !important} html:not([data-puerta]) #consolaCristal, html:not([data-puerta]) #puerta, html[data-puerta="fuera"] #consolaCristal, html[data-puerta="dentro"] #puerta{display:none !important} html[data-puerta="dentro"] #consolaCristal{display:flex !important} /* Los formularios del lado de entrar se alternan con `hidden`. */ .fc-puerta form[hidden]{display:none !important} /* El lema de la puerta, en el oro del "App" del logo (1-oct-2026, Daniel: "esas letras en amarillo, el mismo de la palabra App, para darle un remarque"). La cuchilla es navy en los dos temas, asi que se lee igual. */ /* Con .piel-cristal .fc-hoja delante: la regla de la piel que pinta de blanco todo h2 de la hoja (.piel-cristal .fc-hoja h2) tambien es !important y pesa mas que un .fc-lema h2 a secas. */ .fc-lema h2, .piel-cristal .fc-hoja .fc-lema h2, .piel-cristal .fc-hoja .fc-lema h2 em{color:#F5BC4A !important} /* Alta enviada (2-oct-2026): solo el aviso del correo, sin el formulario. */ #fCrear.enviado :is(.fc-forma-cab,.fc-campo,.fc-dos,.fc-acepto,.fc-btn,.fc-cambiar){display:none !important} .fc-enviado[hidden]{display:none} .fc-enviado{text-align:center;margin-bottom:14px} .fc-enviado-ico{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:30px;color:#fff;background:linear-gradient(135deg,#1976D2,#1565C0);box-shadow:0 10px 28px rgba(21,101,192,.35)} .fc-enviado h1,.piel-cristal .fc-consola .fc-enviado h1{margin:0;font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;letter-spacing:-.03em;color:#0E2F60 !important} #fCrear.enviado .fc-aviso{font-size:15px;line-height:1.55;text-align:center} .fc-corregir{display:block;margin:4px auto 0;padding:6px 12px;border:0;background:none;color:#54627C;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer} .fc-corregir[hidden]{display:none}