/* ============================================================ STEEL & ASPHALT -- sistema de tokens del rebranding visual. Oscuro ("Asfalto") es el tema de bandera y vive en :root. Claro ("Acero") pisa los mismos nombres de variable bajo :root[data-theme="claro"] -- ver aplicarTema() en nav.js, que solo pone/quita ese atributo en . Los NOMBRES de variable se mantienen (--navy, --gold, etc.) para que las ~1600 líneas de app.css y los estilos ya escritos en cada módulo seguían funcionando sin tocar su lógica -- solo cambia lo que cada variable *significa*. ============================================================ */ :root { /* Asfalto (oscuro) -- asfalto húmedo de noche, luz de faros */ --navy: #14161A; /* fondo de la página */ --navy-mid: #1B1E24; /* superficie: tarjetas, topbar, modales */ --navy-light: #333842; /* borde/divisor -- el más usado del sistema */ --surface: #20242B; /* campos, chips, elementos "empotrados" */ --gold: #F2A93B; /* acento -- faro ámbar */ --gold-light: #FFC163; /* acento hover/resalte */ --green: #5FAE72; /* estado positivo (Activo/Liquidado) */ --red: #E4483D; /* estado de peligro (Perdido/Cancelado) */ --yellow: #E0862E; /* estado de alerta (Vencido) -- distinto del acento */ --info: #7FA6C9; /* acero azulado -- acciones secundarias */ --text: #EDEAE3; /* texto principal */ --muted: #9096A0; /* texto secundario */ --focus: var(--gold); --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; color-scheme: dark; } :root[data-theme="claro"] { /* Acero (claro) -- plancha de aluminio cepillado */ --navy: #E7E8EA; --navy-mid: #FFFFFF; --navy-light: #C7C9CD; --surface: #F1F2F3; --gold: #B8791C; --gold-light: #9C6817; --green: #2F8049; --red: #C6392E; --yellow: #A85A17; --info: #3E6E93; --text: #1A1C20; --muted: #63666D; --focus: var(--gold); color-scheme: light; } * { box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* Quita el recuadro gris que Safari/Chrome iOS dibujan al tocar un elemento (botones, tarjetas, links) -- puramente visual, no afecta el comportamiento del tap. */ -webkit-tap-highlight-color: transparent; } /* Excepción: los campos de formulario sí deben permitir seleccionar texto para poder escribir y editar con normalidad. */ input, textarea, select { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } [hidden] { display: none !important; } html, body { -webkit-overflow-scrolling: touch; } /* Evita el rebote elástico de iOS al hacer scroll más allá del límite de la página (el "bote" al llegar arriba/abajo) -- solo dentro de @supports(-webkit-touch-callout), que únicamente Safari/WebKit reconoce (Chrome/Android lo ignora por completo). overscroll-behavion:none sin este scope bloqueaba también el pull-to-refresh nativo de Chrome en Android, que depende del mismo mecanismo de "rebote" al tope de la página que aquí se apaga -- solo afecta al documento completo, no a contenedores internos con su propio scroll (modales, tablas horizontales, etc.), que siguen funcionando normal en ambos sistemas. */ @supports (-webkit-touch-callout: none) { html, body { overscroll-behavior: none; } } body { margin: 0; font-family: var(--font); background: var(--navy); color: var(--text); transition: background 0.2s ease, color 0.2s ease; } /* Foco de teclado visible en todo el sistema -- accesibilidad, no decoración. Los componentes con su propio tratamiento de :focus (campos, ver abajo) lo pisan con algo más discreto. */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-card { width: 100%; max-width: 380px; background: var(--navy-mid); border: 1px solid var(--navy-light); border-top: 2px solid var(--gold); border-radius: 3px; padding: 40px 32px; /* Firma del sistema: esquina superior derecha cortada a 45°, como una placa de acero atornillada. Misma esquina en todo el sistema (ver .btn-primary, .stat-card, .modal, .select-card en app.css). */ clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); } .brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 32px; text-align: center; } .brand-auto { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); } .brand-empeno { color: var(--gold); } .brand-sub { margin-top: 4px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .login-form { display: flex; flex-direction: column; gap: 18px; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 13px; color: var(--muted); } .field input { background: var(--surface); border: 1px solid var(--navy-light); border-radius: 2px; padding: 12px 14px; color: var(--text); font-size: 15px; font-family: inherit; outline: none; transition: border-color 0.15s ease; } .field input:focus { border-color: var(--gold); outline: 2px solid var(--focus); outline-offset: 1px; } .btn-primary { margin-top: 8px; background: var(--gold); color: var(--navy-mid); border: none; border-top: 2px solid var(--gold-light); border-radius: 2px; padding: 13px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.15s ease; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); } .btn-primary:hover { background: var(--gold-light); } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--navy-light); border-radius: 2px; padding: 12px; font-size: 14px; font-family: inherit; cursor: pointer; width: 100%; } .btn-secondary:hover { border-color: var(--gold); color: var(--gold); } .error-message { margin: 0; color: var(--red); font-size: 13px; text-align: center; } /* Actualización de la PWA (punto 4): mismo banner que app.css, duplicado aquí porque el login (única página que solo carga styles.css, no app.css) también carga pwa.js y puede necesitar mostrarlo. NO fixed -- ver el comentario largo en app.css/.banner-actualizacion: en esta página no hay topbar fixed con el que choque, pero se mantiene el mismo criterio (flujo normal) por consistencia con el resto del sistema. */ .banner-actualizacion { background: var(--gold); color: var(--navy-mid); padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; } .banner-actualizacion button { background: var(--navy-mid); color: var(--gold-light); border: none; padding: 6px 14px; border-radius: 2px; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 12.5px; }