/* ================================ */ /* ATREZZO BASE STYLES */ /* Variables y utilidades globales */ /* ================================ */ :root { /* ==================================================================== PALETA · paso 1 del modo dia (12-09-2026) -------------------------------------------------------------------- Aqui vive TODO el color que puede cambiar con el tema. La regla es: una variable por FUNCION, no por valor. El tema claro, cuando llegue, solo redefinira estas variables -- el mismo patron que usa desde la Fase 5 confirmacion-chequeo.js con sus --cf-*, que es el unico modo dia que ya funciona en esta casa. DOS COSAS QUE NO SE TOCAN CON EL TEMA: 1. Los colores de los marcadores (--marker-*): se pintan ENCIMA de una fotografia, no de la interfaz. El verde del marcador no es el verde de "correcto": uno tiene que verse sobre cualquier foto y el otro sobre una superficie gris. Confundirlos es el error mas facil de cometer en este bloque. 2. El modal de anotacion, que se queda oscuro siempre. Sus variables se declararan en #annotationModal, no aqui, para que el tema claro no pueda alcanzarlas ni por descuido. LO QUE ESTE PASO NO HACE: no unifica. Un literal se sustituye por una variable con EL MISMO valor; si no coincide con el canonico, se crea su variable "alt" con el valor exacto. Unificar mueve pixeles y se decide aparte, con la pantalla delante. ==================================================================== */ /* ==================================================================== CABECERA DE LA APLICACION (PASO K, 20-09-2026) -------------------------------------------------------------------- NEGRO FIJO EN LOS DOS MODOS, a proposito. Hoy solo pedidos.css sigue a data-tema; el resto de la aplicacion es oscuro y no tiene modo claro. Una cabecera que siguiera el tema dejaria barra clara sobre contenido oscuro en Buscar, FOTOALBARANES, Roturas y Confirmacion. Como ya es una barra oscura sobre Pedidos claro desde el PASO D1 y nadie se ha quejado, se queda fija y el modo claro del resto se decide en el PASO E. ESTAN AQUI, EN UN SOLO SITIO, para que ese dia sean cuatro lineas y no una batida por la hoja entera. Ningun literal de estos se escribe suelto en el CSS. EL NARANJA NO ES --accent-color. --accent-color (#4a9eff, azul) lo usan 29 reglas de cuatro hojas y tres modulos de busqueda avanzada: cambiarlo tenirira media aplicacion. La pestana activa usa --cab-activa. Contraste medido sobre --cab-fondo (#17150F): --cab-texto #F3EFE6 15.90:1 --cab-inactiva #C9C3B6 10.40:1 --cab-activa #E8501C 4.86:1 (llega a AA incluso en texto normal) --cab-suave #FF9466 8.41:1 (el naranja de leer, no el de senalar) ==================================================================== */ --cab-fondo: #17150F; --cab-texto: #F3EFE6; /* titulo */ --cab-inactiva: #C9C3B6; /* subtitulo y pestanas sin elegir */ --cab-activa: #E8501C; /* icono, pestana activa y su subrayado */ --cab-suave: #FF9466; /* naranja para textos pequenos */ --cab-menu: #1E1B14; /* fondo del desplegable del avatar */ --cab-peligro: #FF6B5A; /* "Salir" */ /* Colors */ --bg-color: #0a0a0a; --surface-color: #1e1e1e; --border-color: #333; --text-color: #ffffff; --text-secondary: #888; --accent-color: #4a9eff; --success-color: #4caf50; --error-color: #f44336; --warning-color: #ff9800; --info-color: #2196f3; /* --- Estructurales que faltaban (paso 1) --- */ --surface-2-color: #2a2a2a; /* elevado: input, chip, boton secundario */ --surface-hover-color: rgba(255, 255, 255, 0.07); --border-soft-color: rgba(255, 255, 255, 0.14); --text-muted-color: #555555; /* deshabilitado */ --shadow-color: rgba(0, 0, 0, 0.35); --overlay-color: rgba(0, 0, 0, 0.55); /* velo de modales */ /* --- Semanticas de interfaz (paso 1) --- El cian de DETALLE no tenia variable pese a ser un estado de pleno derecho desde 2025. Los tintes suaves son los fondos al 12%. */ --detail-color: #00bcd4; --success-soft-color: rgba(76, 175, 80, 0.12); --error-soft-color: rgba(244, 67, 54, 0.12); --warning-soft-color: rgba(255, 152, 0, 0.12); --detail-soft-color: rgba(0, 188, 212, 0.12); /* Tinta oscura sobre naranja y sobre cian: sobre esos dos fondos el blanco no llega a AA. Ya se usa asi en las miniaturas. */ --text-on-warning-color: #1a1a1a; --text-on-detail-color: #00323a; /* --- Marcadores del lienzo: NO son del tema. Ver el aviso de arriba. --- */ --marker-ok-color: #00ff00; --marker-roto-color: #ff0000; --marker-falta-color: #ffa500; --marker-detalle-color: #00bcd4; /* --- PENDIENTES DE UNIFICAR -------------------------------------- Valores que NO son el canonico de su familia y que se conservan tal cual para que el paso 1 no mueva un pixel. Cada uno de estos es una decision pendiente: al unificarlos cambiara lo que se ve, asi que se haran de uno en uno y mirando la pantalla. La longitud de esta lista es la medida de cuanta unificacion queda. ESTADO (12-09-2026): - atrezzo-base.css .................. 0 alt - visual-search.css ................ 40 alt, declaradas en SU PROPIA cabecera porque son de esa vista (pestañas de Roturas, busqueda por nombre y resultados), no del visor. Ver el bloque de su :root. - project-management.css (VISOR) ... 31 alt, en el :root que precede al bloque PROJECT VIEWER de esa hoja. Seis de ellas (--pv-filtro-*) repiten valores que en visual-search.css se llaman --vs-*: el panel de filtro por almacen vive en el visor pero esta pintado con la paleta de la pestaña de Roturas. NO se han unificado: es una decision para cuando llegue el tema claro. Pendientes y sin empezar: el modal de anotacion (zona 6, sus variables iran en #annotationModal), las 29 reglas con !important (zona 7), el resto de vistas de esta hoja y los JS que inyectan CSS. ------------------------------------------------------------------ */ /* --- FUERA DEL SISTEMA DE TEMAS, a proposito ---------------------- app.css (index.html) y search-results.css (search-results.html) NO entran en este bloque: son de PALETA CLARA (tarjetas blancas, texto #2d3748, degradado morado), no de la interfaz oscura. Parametrizarlos contra estas variables seria mentir -- su 'white' es una superficie, no la tinta -- y su recuento de alt no mediria nada util. Si algun dia se quiere que esas dos paginas sigan el tema, es una decision propia y hay que empezar por decidir que aspecto tienen. NO los metas aqui sin esa decision. ------------------------------------------------------------------ */ /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Shadows */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4); /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; } /* ======================== */ /* RESET & BASE */ /* ======================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: var(--bg-color); color: var(--text-color); line-height: 1.6; overflow-x: hidden; } /* ==================================================================== EL FONDO SIGUE A LA PESTANA (21-09-2026, antes del PASO E) En tema claro, Pedidos y Confirmacion ya pintaban su contenido en superficies claras, pero lo que las RODEA seguia siendo el negro de --bg-color: una hoja blanca sobre una mesa negra. En Confirmacion se veia mas porque #confirmacion-tab no tiene fondo propio y el relleno de 2rem de .tab-content quedaba negro alrededor de la tabla. SOLO ESAS DOS. Buscar, FOTOALBARANES, Roturas y el visor se quedan oscuros hasta que les toque su paso del PASO E; por eso esto cuelga de data-pestana y no del body a secas. En oscuro no cambia nada: la regla solo existe con data-tema="claro". EL COLOR NO ES NUEVO: --ped-fondo ya existe en pedidos.css y ya cambia solo con el tema (claro en :root, oscuro en :root[data-tema="oscuro"]). Se usa el mismo para las dos para que en Pedidos no se vea junta ninguna linea: su #pedidos-tab ya se pinta con ese color. data-pestana lo escribe el script en linea del de visual_search.html ANTES de las hojas de estilo -- por eso no parpadea al recargar -- y lo mantiene al dia assets/js/tab-hash.js. El color del TEXTO no se toca: las dos pestanas ponen el suyo (#pedidos-tab y .conf-wrap), y lo que queda a la vista del body es espacio vacio. ==================================================================== */ :root[data-tema="claro"][data-pestana="pedidos"] body, :root[data-tema="claro"][data-pestana="confirmacion"] body, :root[data-tema="claro"][data-pestana="search"] body { background: var(--ped-fondo); } /* La barra de desplazamiento de la pagina, con el mismo acotado. Sin esto se queda la barra oscura del bloque de mas abajo (PASO K4) al lado de un fondo claro. Umbral 3:1, que es el de un elemento de interfaz y no el 4,5 del texto, medido igual que en el PASO K: canal --ped-superficie-2 #E6E1D6 pulgar --ped-tenue #665F51 -> 4.85:1 hover --ped-texto-2 #3A362D -> 9.23:1 lo que se NOTA al pasar el raton (reposo contra hover): 1.90:1 el canal contra el fondo de la pagina (#EFEBE3): 1.10:1, a proposito: un canal que se marcara mas seria una raya cruzando la pantalla. VA ACOTADO A .tabs-container, que es el que scrollea la pagina, y NO a todos los elementos. Un `:root[...] ::-webkit-scrollbar-thumb` ganaria por especificidad a las barras que Confirmacion se pinta ella misma (.conf-tabla-wrap y sus menus, medidas en su fichero) y se las llevaria por delante. Por lo mismo siguen intactos los dos sitios que ya las redefinen: #annotationModal .modal-body y .month-content. El ancho, el redondeo y el borde de 2px salen del bloque de mas abajo: aqui solo se cambia el color. */ :root[data-tema="claro"][data-pestana="pedidos"] .tabs-container, :root[data-tema="claro"][data-pestana="confirmacion"] .tabs-container, :root[data-tema="claro"][data-pestana="search"] .tabs-container { scrollbar-color: var(--ped-tenue) var(--ped-superficie-2); } :root[data-tema="claro"][data-pestana="pedidos"] .tabs-container::-webkit-scrollbar-track, :root[data-tema="claro"][data-pestana="confirmacion"] .tabs-container::-webkit-scrollbar-track, :root[data-tema="claro"][data-pestana="search"] .tabs-container::-webkit-scrollbar-track { background: var(--ped-superficie-2); } :root[data-tema="claro"][data-pestana="pedidos"] .tabs-container::-webkit-scrollbar-thumb, :root[data-tema="claro"][data-pestana="confirmacion"] .tabs-container::-webkit-scrollbar-thumb, :root[data-tema="claro"][data-pestana="search"] .tabs-container::-webkit-scrollbar-thumb { background: var(--ped-tenue); border-color: var(--ped-superficie-2); } :root[data-tema="claro"][data-pestana="pedidos"] .tabs-container::-webkit-scrollbar-thumb:hover, :root[data-tema="claro"][data-pestana="confirmacion"] .tabs-container::-webkit-scrollbar-thumb:hover, :root[data-tema="claro"][data-pestana="search"] .tabs-container::-webkit-scrollbar-thumb:hover { background: var(--ped-texto-2); } /* ======================== */ /* LAYOUT */ /* ======================== */ .app-container { min-height: 100vh; display: flex; flex-direction: column; } .app-header { background: var(--cab-fondo); border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: var(--spacing-lg) var(--spacing-xl); text-align: left; } /* El titulo llevaba un degradado azul recortado sobre el texto (-webkit-text-fill-color: transparent + background-clip). Las TRES declaraciones van juntas: quitar una sola deja el titulo invisible. */ .header-content h1 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: 'Archivo', system-ui, sans-serif; font-stretch: 80%; font-weight: 800; font-size: 1.7rem; letter-spacing: -0.01em; color: var(--cab-texto); } .header-left .cab-icono { display: flex; flex: 0 0 auto; color: var(--cab-activa); } .header-left .cab-icono svg { display: block; } .subtitle { margin: 2px 0 0; color: var(--cab-inactiva); font-size: 0.875rem; } /* ======================== */ /* BUTTONS */ /* ======================== */ .btn { padding: 0.75rem 1.5rem; border: 2px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); color: var(--text-color); font-size: 1rem; font-weight: 500; cursor: pointer; transition: all var(--transition-normal); display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-primary { background: var(--accent-color); border-color: var(--accent-color); color: white; } .btn-primary:hover { background: #3a8eef; border-color: #3a8eef; } .btn-secondary { background: transparent; border-color: var(--text-secondary); } .btn-secondary:hover { border-color: var(--text-color); background: rgba(255, 255, 255, 0.05); } .btn-success { background: var(--success-color); border-color: var(--success-color); color: white; } .btn-success:hover { background: #45a049; border-color: #45a049; } .btn-danger { background: var(--error-color); border-color: var(--error-color); color: white; } .btn-danger:hover { background: #e53935; border-color: #e53935; } .btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; } .btn-lg { padding: 1rem 2rem; font-size: 1.125rem; } /* ======================== */ /* LOADING */ /* ======================== */ .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-xl); min-height: 200px; } .spinner { width: 48px; height: 48px; border: 4px solid rgba(255, 255, 255, 0.1); border-top-color: var(--accent-color); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading p { margin-top: var(--spacing-md); color: var(--text-secondary); } /* ======================== */ /* EMPTY STATES */ /* ======================== */ .empty-state { text-align: center; padding: var(--spacing-xl); color: var(--text-secondary); } .empty-state h3 { color: var(--text-color); margin-bottom: var(--spacing-sm); } /* ======================== */ /* ERROR STATES */ /* ======================== */ .error { background: rgba(244, 67, 54, 0.1); border: 2px solid var(--error-color); border-radius: var(--radius-md); padding: var(--spacing-lg); color: var(--error-color); text-align: center; } /* ======================== */ /* CARDS */ /* ======================== */ .card { background: var(--surface-color); border: 2px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--spacing-lg); transition: all var(--transition-normal); } .card:hover { border-color: var(--accent-color); box-shadow: var(--shadow-md); } /* ======================== */ /* SCROLLBAR */ /* ======================== */ /* BARRAS DE DESPLAZAMIENTO (PASO K4) Lo que habia: canal #0a0a0a y pulgar #333 = 1.57:1. Dos negros, por eso no se veia cual era la parte que se arrastra. OJO: los valores que se propusieron al principio (#201D17 / #3A352C) dan 1.38:1, todavia MENOS que lo que habia. Para que un control se distinga del canal hace falta 3:1, y ahi es donde estan estos: canal #201D17 pulgar #7A7262 -> 3.53:1 hover #8A8270 -> 4.41:1 NO se tocan los dos sitios que ya las redefinen con lo suyo: #annotationModal .modal-body (la zona de fotos, que se queda oscura en los dos modos) y .month-content. */ html { scrollbar-width: thin; scrollbar-color: #7A7262 #201D17; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: #201D17; border-radius: 6px; } ::-webkit-scrollbar-thumb { background: #7A7262; border-radius: 6px; border: 2px solid #201D17; /* separa el pulgar del canal */ } ::-webkit-scrollbar-thumb:hover { background: #8A8270; } /* ======================== */ /* RESPONSIVE */ /* ======================== */ @media (max-width: 1024px) { html { font-size: 15px; } } @media (max-width: 768px) { html { font-size: 14px; } .app-header { padding: var(--spacing-md) var(--spacing-lg); } .header-content h1 { font-size: 1.25rem; } /* En movil solo el icono y el titulo: el subtitulo se lleva una linea entera de una pantalla donde el contenido es lo que importa. */ .subtitle { display: none; } } @media (max-width: 480px) { .btn { padding: 0.625rem 1.25rem; font-size: 0.875rem; } } /* ======================== */ /* AVATAR Y SU MENU (PASO K2, 20-09-2026) */ /* ======================== */ /* Lo pinta Auth.renderUserInfo() en assets/js/auth.js, que es la unica duena de #userInfoContainer: lo reescribe entero cada vez que se comprueba la sesion. Por eso el boton de tema vive FUERA de ese contenedor. Contraste dentro del menu (fondo --cab-menu #1E1B14): nombre #F3EFE6 14.97:1 rol #C9C3B6 9.79:1 Salir #FF6B5A 6.14:1 */ .cab-usuario { position: relative; display: flex; align-items: center; } .cab-avatar { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--cab-activa); color: var(--cab-fondo); font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.02em; cursor: pointer; touch-action: manipulation; } .cab-avatar:hover { filter: brightness(1.08); } .cab-avatar:focus-visible { outline: 2px solid var(--cab-texto); outline-offset: 2px; } .cab-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000; min-width: 240px; padding: 6px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; background: var(--cab-menu); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); text-align: left; } .cab-menu[hidden] { display: none; } .cab-menu-quien { padding: 10px 12px 8px; } .cab-menu-nombre { display: block; color: var(--cab-texto); font-weight: 600; font-size: 0.95rem; } .cab-menu-rol { display: block; margin-top: 2px; color: var(--cab-inactiva); font-size: 0.8rem; } .cab-menu-raya { height: 1px; margin: 6px 4px; background: rgba(255, 255, 255, 0.12); } /* 44px de alto: se tocan con el dedo en la tablet. */ .cab-menu a, .cab-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--cab-texto); font: inherit; font-size: 0.95rem; text-align: left; text-decoration: none; cursor: pointer; } .cab-menu a:hover, .cab-menu button:hover { background: rgba(255, 255, 255, 0.08); } .cab-menu a:focus-visible, .cab-menu button:focus-visible { outline: 2px solid var(--cab-activa); outline-offset: -2px; } .cab-menu .cab-salir { color: var(--cab-peligro); }