/* ========================================================================== Ya Cayó — sistema visual ========================================================================== PRINCIPIO RECTOR: el verde es la respuesta, no la marca. Verde, ámbar y rojo están RESERVADOS para estados de pago. Nunca se usan en botones, enlaces, pestañas activas ni adornos. Si el verde aparece en la decoración, deja de significar algo el día que de verdad entra la plata. (Misma lección que quedó escrita en el CSS de Contratos C48, al revés.) Los interactivos van en tinta. La única excepción es el punto de la marca: es la tilde de la Ó y enseña qué significa el verde antes de que el cajero vea su primera confirmación. TIPOGRAFÍA: Archivo es variable con eje de ancho (font-stretch 62%–125%). Un solo tipo hace tres trabajos: 62% + mayúsculas → rótulos, encabezados de tabla, estados 100% → interfaz y texto corrido 125% + peso 800 → cifras de dinero (anchas: se leen desde lejos) IBM Plex Mono queda para salida de máquina: lo que escribió el banco se ve como lo que es. TEMA: tres estados. :root desnudo lleva la paleta clara COMPLETA; la media query solo redefine tokens y va acotada con :not([data-theme="light"]) para que una elección explícita gane sobre el sistema operativo. caja.html marca data-theme="dark" en el a propósito: es la cara de un aparato, no un documento, y así hereda la paleta oscura en vez de pelearse con ella. ========================================================================== */ :root { /* ---- tinta y papel ---------------------------------------------------- */ --tinta: #0e1a14; /* verde-negra: texto, botones, marca */ --tinta-hover: #22362b; /* botón primario al pasar el cursor */ --tinta-2: #55635b; /* secundario */ --tinta-3: #8a968f; /* metadatos, marca apagada */ --papel: #f0f3ee; /* papel frío con leve sesgo verde */ --superficie: #ffffff; --superficie-2: #e7ebe4; /* hundido: campos de código, celdas */ --linea: #d8ded6; --linea-fuerte: #bcc5bc; /* ---- ESTADOS DE PAGO — reservados ------------------------------------- */ --verde: #00b24a; /* señal: el punto encendido */ --verde-tenue: #ddf0e4; /* fondo de píldora */ --verde-texto: #067034; /* texto sobre tenue */ --ambar: #e08a00; --ambar-tenue: #fbebd2; --ambar-texto: #90520a; --rojo: #d4342a; --rojo-tenue: #fadedc; --rojo-texto: #a3211a; /* ---- espacio ---------------------------------------------------------- */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 72px; /* ---- radio por rol (no un radio estampado en todo) --------------------- */ --r-control: 10px; /* botones, campos: cosas que se tocan */ --r-placa: 18px; /* objetos físicos: la placa del QR, el aparato */ --r-pildora: 999px; /* estados */ /* ---- tipografía ------------------------------------------------------- */ --fuente: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --t-micro: 0.75rem; --t-menor: 0.875rem; --t-base: 1rem; --t-mayor: 1.125rem; --t-h3: 1.25rem; --t-h2: clamp(1.5rem, 3vw, 1.875rem); --t-h1: clamp(2rem, 5vw, 3.25rem); /* ---- sombra: se gasta por jerarquía ----------------------------------- */ --sombra-1: 0 1px 2px rgba(14, 26, 20, 0.06); --sombra-2: 0 2px 4px rgba(14, 26, 20, 0.05), 0 14px 32px rgba(14, 26, 20, 0.08); /* ---- capas ------------------------------------------------------------ */ --z-pantalla: 20; --z-velo: 30; --z-toast: 50; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --tinta: #e5ece6; --tinta-hover: #c6d2c8; --tinta-2: #96a79b; --tinta-3: #6b7c71; --papel: #0a110d; --superficie: #121b15; --superficie-2: #1a241d; --linea: #29352c; --linea-fuerte: #3d4c41; --verde: #19c95e; --verde-tenue: #0d2e1c; --verde-texto: #56dd8b; --ambar: #f2a53a; --ambar-tenue: #35260c; --ambar-texto: #f0b869; --rojo: #f0645a; --rojo-tenue: #3a1714; --rojo-texto: #f5928a; --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4); --sombra-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 14px 32px rgba(0, 0, 0, 0.45); color-scheme: dark; } } :root[data-theme='dark'] { --tinta: #e5ece6; --tinta-hover: #c6d2c8; --tinta-2: #96a79b; --tinta-3: #6b7c71; --papel: #0a110d; --superficie: #121b15; --superficie-2: #1a241d; --linea: #29352c; --linea-fuerte: #3d4c41; --verde: #19c95e; --verde-tenue: #0d2e1c; --verde-texto: #56dd8b; --ambar: #f2a53a; --ambar-tenue: #35260c; --ambar-texto: #f0b869; --rojo: #f0645a; --rojo-tenue: #3a1714; --rojo-texto: #f5928a; --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4); --sombra-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 14px 32px rgba(0, 0, 0, 0.45); color-scheme: dark; } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* El JS alterna estados con el atributo `hidden` (#vista-idle, #vista-espera, .seccion, #aviso-conectar…). Como los contenedores llevan display explícito, sin esto los tres estados de la caja se dibujarían uno encima de otro. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--fuente); font-size: var(--t-base); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; } h1 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.035em; } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); } p { margin: 0 0 var(--e3); } p:last-child { margin-bottom: 0; } a { color: var(--tinta); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 3px; } img { max-width: 100%; } /* ========================================================================== Marca — la tilde que cae ========================================================================== El nombre es «Ya Cayó» y el logo es la tilde de la Ó: un punto que cae desde arriba y aterriza sobre la letra. Es una marca que solo funciona en español y solo con este nombre. */ .marca { display: inline-flex; align-items: baseline; gap: 0; font-weight: 800; font-stretch: 105%; font-size: var(--t-mayor); letter-spacing: -0.02em; color: var(--tinta); text-decoration: none; white-space: nowrap; } .marca:hover { text-decoration: none; } .marca-o { position: relative; display: inline-block; } /* El punto. `.punto` se conserva por compatibilidad con el marcado viejo. */ .marca .punto, .marca-tilde { position: absolute; left: 50%; bottom: 100%; width: 0.3em; height: 0.3em; margin-bottom: 0.04em; transform: translateX(-50%); border-radius: 50%; background: var(--verde); } /* Cae una sola vez al cargar. Parte de una posición visible, nunca de opacity 0. */ @media (prefers-reduced-motion: no-preference) { .marca-tilde.cae { animation: caer 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) both; } } @keyframes caer { 0% { transform: translateX(-50%) translateY(-0.9em); background: var(--tinta-3); } 55% { transform: translateX(-50%) translateY(0.06em); background: var(--tinta-3); } 70% { transform: translateX(-50%) translateY(-0.12em); background: var(--verde); } 100% { transform: translateX(-50%) translateY(0); background: var(--verde); } } /* ========================================================================== Maquetación ========================================================================== */ .contenedor { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 var(--e5); } .contenedor.estrecho { max-width: 760px; } .barra { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); padding: var(--e4) 0; flex-wrap: wrap; } .barra nav { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; } .fila { display: flex; gap: var(--e3); flex-wrap: wrap; align-items: center; } .rejilla { display: grid; gap: var(--e5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* La línea de aterrizaje: separa secciones sin encerrarlas en una tarjeta. No todo es una tarjeta — el borde, el radio y la sombra se gastan por rol. */ .bloque { padding-top: var(--e7); margin-top: var(--e7); border-top: 1px solid var(--linea); } .bloque:first-child { padding-top: 0; margin-top: 0; border-top: 0; } .rotulo { font-stretch: 62%; font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-2); } .pie { padding: var(--e7) 0 var(--e6); margin-top: var(--e8); border-top: 1px solid var(--linea); color: var(--tinta-2); font-size: var(--t-menor); } /* ========================================================================== Botones — siempre en tinta. El verde es para los estados de pago. ========================================================================== */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); padding: 11px var(--e4); border: 1px solid transparent; border-radius: var(--r-control); background: var(--tinta); color: var(--papel); font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.06s ease; } .boton:hover { background: var(--tinta-hover); text-decoration: none; } .boton:active { transform: translateY(1px); } .boton[disabled] { opacity: 0.45; cursor: not-allowed; } .boton.suave { background: var(--superficie); color: var(--tinta); border-color: var(--linea-fuerte); } .boton.suave:hover { background: var(--superficie-2); } .boton.peligro { background: var(--rojo); color: #fff; } .boton.chico { padding: 6px var(--e3); font-size: var(--t-menor); } .boton.grande { padding: 15px var(--e5); font-size: var(--t-mayor); border-radius: 14px; } /* ========================================================================== Superficies ========================================================================== */ /* Objeto físico: la placa del QR, el aparato, el bloque que representa algo. */ .placa { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-placa); padding: var(--e5); } /* Se conserva por el marcado existente; ahora es una placa. */ .tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-placa); padding: var(--e5); } .tarjeta + .tarjeta { margin-top: var(--e4); } @media (max-width: 640px) { .placa, .tarjeta { padding: var(--e4); } .contenedor { padding: 0 var(--e4); } } /* ========================================================================== Formularios ========================================================================== */ .campo { display: flex; flex-direction: column; gap: var(--e1); margin-bottom: var(--e4); } .campo label { font-weight: 600; font-size: var(--t-menor); } .campo .pista { color: var(--tinta-2); font-size: var(--t-menor); } input[type='text'], input[type='email'], input[type='password'], input[type='number'], select, textarea { width: 100%; padding: 10px var(--e3); border: 1px solid var(--linea-fuerte); border-radius: var(--r-control); background: var(--superficie); color: var(--tinta); font: inherit; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; border-color: var(--tinta); } textarea { min-height: 120px; resize: vertical; font-family: var(--mono); font-size: var(--t-menor); } /* ========================================================================== Tablas ========================================================================== */ .tabla-envoltura { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: var(--t-menor); } th, td { text-align: left; padding: var(--e3) var(--e2); border-bottom: 1px solid var(--linea); vertical-align: top; } th { font-stretch: 62%; font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-2); white-space: nowrap; } td.cifra-celda, .tabular { font-variant-numeric: tabular-nums; white-space: nowrap; } /* ========================================================================== Estados de pago — píldoras y avisos ========================================================================== Estas clases viajan dentro de plantillas de JavaScript (panel.html las escribe con innerHTML). Se rediseñan pero NO se renombran. */ .etiqueta { display: inline-block; padding: 3px 10px; border-radius: var(--r-pildora); background: var(--superficie-2); color: var(--tinta-2); font-stretch: 62%; font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .etiqueta.verde { background: var(--verde-tenue); color: var(--verde-texto); } .etiqueta.ambar { background: var(--ambar-tenue); color: var(--ambar-texto); } .etiqueta.roja { background: var(--rojo-tenue); color: var(--rojo-texto); } .aviso { padding: var(--e3) var(--e4); border-radius: var(--r-control); border-left: 3px solid var(--ambar); background: var(--ambar-tenue); color: var(--ambar-texto); font-size: var(--t-menor); } .aviso.verde { border-left-color: var(--verde); background: var(--verde-tenue); color: var(--verde-texto); } .aviso.rojo { border-left-color: var(--rojo); background: var(--rojo-tenue); color: var(--rojo-texto); } .aviso.gris { border-left-color: var(--linea-fuerte); background: var(--superficie-2); color: var(--tinta-2); } /* ========================================================================== Pestañas ========================================================================== */ .pestanas { display: flex; gap: var(--e1); flex-wrap: wrap; border-bottom: 1px solid var(--linea); margin-bottom: var(--e5); } .pestanas button { padding: var(--e3) var(--e4); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--tinta-2); font: inherit; font-weight: 600; cursor: pointer; } .pestanas button:hover { color: var(--tinta); } .pestanas button.activa { color: var(--tinta); border-bottom-color: var(--tinta); } .seccion { display: block; } /* ========================================================================== Texto y utilidades ========================================================================== */ .silencioso { color: var(--tinta-2); font-size: var(--t-menor); } .mono { font-family: var(--mono); font-size: 0.92em; } .cifra { font-stretch: 125%; font-weight: 800; font-size: clamp(1.75rem, 4vw, 2.25rem); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; } .copiable { display: inline-flex; align-items: center; padding: var(--e2) var(--e3); border: 1px solid var(--linea); border-radius: var(--r-control); background: var(--superficie-2); font-family: var(--mono); font-size: var(--t-menor); word-break: break-all; } /* Secuencia real de pasos: la numeración informa, no decora. */ .pasos { counter-reset: paso; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); } .pasos > li { position: relative; padding-left: 44px; } .pasos > li::before { counter-increment: paso; content: counter(paso); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--tinta); color: var(--papel); font-size: var(--t-menor); font-weight: 700; } .mensaje-flotante { position: fixed; left: 50%; bottom: var(--e5); transform: translateX(-50%) translateY(6px); z-index: var(--z-toast); padding: var(--e3) var(--e4); border-radius: var(--r-control); background: var(--tinta); color: var(--papel); font-weight: 600; font-size: var(--t-menor); box-shadow: var(--sombra-2); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .mensaje-flotante.visible { opacity: 1; transform: translateX(-50%) translateY(0); }