:root[data-theme="dark"] { color-scheme: dark; --bg-base: #0d0d10; --glass-bg: #131318; --glass-border: rgba(255,255,255,0.07); --grid-line: rgba(255,255,255,0.038); --shadow-card: 0 1px 3px rgba(0,0,0,0.4); --text-primary: #f4f4f5; /* #7f7f84, no #71717a: el gris original medía 3.83:1 sobre --glass-bg (por debajo del 4.5:1 de WCAG AA para texto normal) -- es el color de texto mas usado del producto (labels, hints, meta-texto), asi que el fallo se repetia en casi todas las pantallas. 4.65:1 aca. */ --text-secondary: #7f7f84; --accent-primary: #e8e8ea; --accent-hover: #d4d4d6; --accent-glow: rgba(255,255,255,0.08); --input-bg: rgba(0,0,0,0.25); --input-border: rgba(255,255,255,0.08); --danger: #ef4444; --success: #10b981; /* #f87171, no --danger (#ef4444) fijo, como texto de chip: sobre el 10% de fondo rojo (--danger-bg) --danger da 4.49:1 -- justo en el limite de WCAG AA. #f87171 mide 6.11:1, mismo patron que ya usa --warning-text (mas claro que el --warning base, para leer sobre fondo oscuro). */ --danger-text: #f87171; --danger-bg: rgba(239,68,68,0.10); --danger-border: rgba(239,68,68,0.40); --warning: #f59e0b; --warning-text: #fbbf24; --warning-bg: rgba(245,158,11,0.10); --warning-border: rgba(245,158,11,0.40); --sh-A-bg:#064e3b; --sh-A-bd:#10b981; --sh-A-tx:#6ee7b7; --sh-AR-bg:#065f46; --sh-AR-bd:#34d399; --sh-AR-tx:#a7f3d0; --sh-I1-bg:#1e3a5f; --sh-I1-bd:#3b82f6; --sh-I1-tx:#93c5fd; --sh-I2-bg:#1e3a8a; --sh-I2-bd:#60a5fa; --sh-I2-tx:#bfdbfe; --sh-C-bg:#7c2d12; --sh-C-bd:#f97316; --sh-C-tx:#fed7aa; --sh-CE-bg:#9a3412; --sh-CE-bd:#fb923c; --sh-CE-tx:#ffedd5; --sh-AC-bg:#7f1d1d; --sh-AC-bd:#ef4444; --sh-AC-tx:#fca5a5; --sh-L-bg:#eab308; --sh-L-bd:#a16207; --sh-L-tx:#422006; --sh-DL-bg:#164e63; --sh-DL-bd:#22d3ee; --sh-DL-tx:#a5f3fc; --sh-BL-bg:#4c1d95; --sh-BL-bd:#8b5cf6; --sh-BL-tx:#c4b5fd; --sh-BS-bg:#5b21b6; --sh-BS-bd:#a78bfa; --sh-BS-tx:#ddd6fe; --sh-DLA-bg:#facc15;--sh-DLA-bd:#78350f;--sh-DLA-tx:#422006; --sh-X-bg:rgba(30,30,30,0.5);--sh-X-bd:#555;--sh-X-tx:#aaa; /* Acento de marca — usado para el bloque "Segun periodo" de Dotacion */ --color-50:#E7FEF0; --color-100:#BAFCD4; --color-200:#8EFAB8; --color-300:#62F89C; --color-400:#36F780; --color-500:#0AF262; --color-600:#08C952; --color-700:#079D40; --color-800:#05712E; --color-900:#03451C; --color-950:#01180A; /* Texto legible sobre --color-700: en tema oscuro ese escalon todavia tiene luminancia media (necesita texto oscuro, ~5.2:1); en tema claro ya es un tono oscuro (necesita texto claro, ~4.9:1 vs solo 3.5:1 con texto oscuro) -- por eso este token, y no un valor fijo, resuelve distinto por tema. Verificado con contraste WCAG real, no a ojo. */ --color-ink-700: var(--color-950); } :root[data-theme="light"] { color-scheme: light; /* #f0f0f2, no #f5f5f7: contra --glass-bg (blanco puro) la diferencia media apenas 1.09:1 -- perceptualmente casi ninguna, y sin la vineta radial (los temas oscuro/claro difieren: en oscuro esa vineta ayuda a separar tarjeta y fondo, en claro se apaga del todo mas abajo en este archivo). #f0f0f2 deja margen para que --text-secondary siga sobre 4.5:1 (da 4.52:1) sin acercarse al limite. */ --bg-base: #f0f0f2; --glass-bg: #ffffff; /* rgba(0,0,0,0.12), no 0.08: un borde oscuro sobre fondo claro se percibe mucho mas debil que un borde igual de translucido claro sobre fondo oscuro (asimetria perceptual, no solo matematica) -- 0.08 dejaba la tarjeta casi sin borde visible. */ --glass-border: rgba(0,0,0,0.12); --grid-line: rgba(0,0,0,0.05); /* Blur y alpha mas grandes que antes (3px/0.07 -> 8px/0.09): la sombra original era casi invisible sobre un fondo ya claro; esta da a la tarjeta una sensacion real de estar elevada sobre el canvas. */ --shadow-card: 0 2px 8px rgba(0,0,0,0.09); --text-primary: #09090b; /* #6d6d72, no #71717a: sobre fondo claro el mismo gris medía 4.44:1 contra --bg-base, por debajo del 4.5:1 de WCAG AA (aca: 4.73:1). */ --text-secondary: #6d6d72; --accent-primary: #1a1a1f; --accent-hover: #2a2a30; --accent-glow: rgba(0,0,0,0.15); --input-bg: rgba(255,255,255,0.9); --input-border: rgba(0,0,0,0.1); --danger: #dc2626; --success: #059669; /* #b91c1c, no --danger (#dc2626): sobre el mismo --danger-bg al 10%, --danger medía 4.13:1 en tema claro -- bajo el 4.5:1 de WCAG AA. #b91c1c mide 5.54:1, mismo patron que --warning-text. */ --danger-text: #b91c1c; --danger-bg: rgba(239,68,68,0.10); --danger-border: rgba(239,68,68,0.40); --warning: #f59e0b; --warning-text: #b45309; --warning-bg: rgba(245,158,11,0.10); --warning-border: rgba(245,158,11,0.40); --sh-A-bg:#d1fae5; --sh-A-bd:#059669; --sh-A-tx:#064e3b; --sh-AR-bg:#dcfce7; --sh-AR-bd:#16a34a; --sh-AR-tx:#14532d; --sh-I1-bg:#dbeafe; --sh-I1-bd:#1d4ed8; --sh-I1-tx:#1e3a5f; --sh-I2-bg:#eff6ff; --sh-I2-bd:#3b82f6; --sh-I2-tx:#1e3a8a; --sh-C-bg:#ffedd5; --sh-C-bd:#ea580c; --sh-C-tx:#7c2d12; --sh-CE-bg:#fff7ed; --sh-CE-bd:#f97316; --sh-CE-tx:#9a3412; --sh-AC-bg:#fee2e2; --sh-AC-bd:#dc2626; --sh-AC-tx:#7f1d1d; --sh-L-bg:#fde047; --sh-L-bd:#ca8a04; --sh-L-tx:#422006; --sh-DL-bg:#cffafe; --sh-DL-bd:#0e7490; --sh-DL-tx:#164e63; --sh-BL-bg:#ede9fe; --sh-BL-bd:#7c3aed; --sh-BL-tx:#4c1d95; --sh-BS-bg:#f5f3ff; --sh-BS-bd:#8b5cf6; --sh-BS-tx:#5b21b6; --sh-DLA-bg:#facc15;--sh-DLA-bd:#78350f;--sh-DLA-tx:#422006; --sh-X-bg:#f8fafc; --sh-X-bd:#94a3b8; --sh-X-tx:#374151; /* Acento de marca — usado para el bloque "Segun periodo" de Dotacion */ --color-50:#E7F7FE; --color-100:#BAEAFC; --color-200:#8EDCFA; --color-300:#62CEF8; --color-400:#36C0F7; --color-500:#0AB0F2; --color-600:#0892C9; --color-700:#07729D; --color-800:#055271; --color-900:#033245; --color-950:#011218; --color-ink-700: var(--color-50); } /* Base y radial estatico van en html; el body queda TRANSPARENTE. Si el body tuviera fondo, el orden de pintado CSS lo pondria por encima de #bgFx (z-index:-1) y taparia la grilla/halo animados. */ html { font-size: 16px; background-color: var(--bg-base); background-image: radial-gradient(ellipse at 25% 0%, rgba(255,255,255,0.02) 0%, transparent 50%); } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Outfit', -apple-system, sans-serif; } body { color: var(--text-primary); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Fondo animado en capas anidadas (ver login): #bgFx sigue al cursor y contiene la grilla (deriva por transform) y un halo tenue que se desplaza. Parallax y deriva usan transforms en elementos distintos => no chocan, todo GPU. Detras del contenido; paneles/topbar solidos tapan. */ #bgFx { position: fixed; inset: -60px; z-index: -1; pointer-events: none; transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0); transition: transform 0.5s ease-out; } #bgGrid { position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 48px 48px, 48px 48px; animation: gridDrift 14s linear infinite; } #bgGlow { position: absolute; top: 6%; left: 4%; width: 55%; height: 55%; background: radial-gradient(closest-side, var(--accent-glow), transparent 72%); filter: blur(34px); animation: glowDrift 18s ease-in-out infinite alternate; } @keyframes gridDrift { to { transform: translate(48px, 48px); } } @keyframes glowDrift { from { transform: translate(-6%, -4%); } to { transform: translate(60%, 34%); } } @media (prefers-reduced-motion: reduce) { #bgGrid, #bgGlow { animation: none; } #bgFx { transition: none; } } .glass-panel { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; } .container { max-width: 1400px; margin: 0 auto; padding: 32px 24px; } @media (min-width: 1280px) { .container { padding: 40px 48px; } } /* Topbar */ .topbar { position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 1500; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: var(--bg-base); border-bottom: 1px solid var(--glass-border); } .topbar-brand { display: flex; align-items: center; gap: 9px; font-weight: 500; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--text-secondary); } .topbar-brand .brand-mark { flex-shrink: 0; border-radius: 7px; } .topbar-brand .brand-word-strong { color: var(--text-primary); font-weight: 700; } .topbar-actions { display: flex; align-items: center; gap: 10px; } .topbar-btn { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--glass-border); background: transparent; color: var(--text-primary); cursor: pointer; font-size: 0.85rem; font-family: inherit; transition: background 0.15s, border-color 0.15s; } .topbar-btn:hover { background: rgba(128,128,128,0.12); } .topbar-save-spinner { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex-shrink: 0; border: 2px solid rgba(128,128,128,0.25); border-top-color: var(--text-secondary); animation: spin 0.75s linear infinite; } /* display se maneja por JS (none <-> flex); opacity/transform animan la entrada y salida entre esos dos estados. */ #topbarSaveIndicator { display: none; align-items: center; gap: 5px; font-size: 0.78rem; white-space: nowrap; padding-left: 8px; border-left: 1px solid var(--glass-border); opacity: 0; transform: translateX(-6px); transition: opacity 0.22s ease, transform 0.22s ease; } #topbarSaveIndicator.show { opacity: 1; transform: translateX(0); } .topbar-icon-btn { padding: 7px; display: flex; align-items: center; justify-content: center; } /* Boton de editar (lapiz): circulo con SVG centrado en vez de un caracter unicode (✎), cuyo bounding box no queda centrado dentro del circulo por font metrics. Reutilizado por el nombre de ejecucion (topbar, rojo) y por el nombre de trabajador en Vista Previa (gris, ver .btn-edit-worker). */ .btn-edit-name, .btn-edit-worker { display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border: 1px solid var(--glass-border); background: transparent; cursor: pointer; flex-shrink: 0; transition: background 0.15s, border-color 0.15s, color 0.15s; } .btn-edit-name { width: 22px; height: 22px; color: var(--danger); } .btn-edit-name:hover, .btn-edit-name:focus-visible { background: rgba(239,68,68,0.12); border-color: var(--danger); } .btn-edit-worker { width: 19px; height: 19px; color: var(--text-secondary); vertical-align: middle; } .btn-edit-worker:hover, .btn-edit-worker:focus-visible { background: rgba(128,128,128,0.14); border-color: var(--text-secondary); color: var(--text-primary); } .btn-edit-name:focus-visible, .btn-edit-worker:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } body { padding-top: 56px; } .page-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); margin-bottom: 28px; } /* Stepper */ .stepper { display: flex; justify-content: space-between; position: relative; margin-bottom: 44px; padding: 0 20px; } .stepper::before { content: ''; position: absolute; top: 14px; left: 48px; right: 48px; height: 2px; background: var(--glass-border); z-index: 1; } .stepper-progress { position: absolute; top: 14px; left: 48px; height: 2px; background: var(--accent-primary); z-index: 2; transition: width 0.5s cubic-bezier(0.16,1,0.3,1); width: 0%; } .step { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-secondary); transition: color 0.3s; cursor: pointer; } .step.active { color: var(--text-primary); } .step.completed .step-circle { background: var(--accent-primary); border-color: var(--accent-primary); color: #0d0d10; } .step.active .step-circle { background: var(--accent-primary) !important; border-color: var(--accent-primary) !important; color: #0d0d10 !important; } .step.active.completed .step-circle { color: #0d0d10; } .step-circle { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-base); border: 1px solid var(--glass-border); display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: 0.78rem; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease; } .step-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; } /* Navegación por índice: hover/click en pasos alcanzables */ .step:hover .step-circle { transform: scale(1.12); box-shadow: 0 0 0 4px rgba(255,255,255,0.08); } .step:active .step-circle { transform: scale(0.94); } /* Paso bloqueado (requisitos previos incompletos): cue distinto, sin invitar a avanzar */ .step.step-blocked { cursor: not-allowed; } .step.step-blocked:hover .step-circle { transform: none; box-shadow: 0 0 0 3px rgba(245,158,11,0.32); border-color: var(--warning); } .step.step-blocked:active .step-circle { transform: none; } @keyframes stepShake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-3px); } 40%, 60% { transform: translateX(3px); } } .step-circle.step-shake { animation: stepShake 0.4s ease; } .cell-shake { animation: stepShake 0.4s ease; } @keyframes stepLand { 0% { transform: scale(0.82); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } } .step-circle.step-landing { animation: stepLand 0.4s cubic-bezier(0.16,1,0.3,1); } /* Marca de campo obligatorio */ .req-mark { color: var(--warning); font-weight: 700; } /* Tooltip de requisito faltante (misma base visual que .help-tooltip, acento de advertencia) */ .step-tooltip-warn { border-left: 3px solid var(--warning); } /* Step Sections */ .step-content { display: none; opacity: 0; transform: translateY(8px); } .step-content.active { display: block; opacity: 1; transform: translateY(0); animation: slideUp 0.35s cubic-bezier(0.16,1,0.3,1) forwards; } @keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Cards */ .card { padding: 24px 28px; margin-bottom: 16px; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--glass-bg); box-shadow: var(--shadow-card); transition: border-color 0.2s; } .card:hover { border-color: rgba(255,255,255,0.11); } /* Step 5: expand to full viewport width */ .container:has(#step5.active) { max-width: none; padding-left: 10%; padding-right: 10%; } .container:has(#step5.active) #step5 { margin-left: 0; margin-right: 0; } .section-title { font-size: 0.75rem; font-weight: 700; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.14em; border-bottom: 1px solid var(--glass-border); border-left: 3px solid var(--accent-primary); padding-bottom: 12px; padding-left: 10px; } /* Titulo de panel/bloque (caja mixta, sobrio) — distinto de .section-title, que es una etiqueta pequeña en MAYUSCULAS. Antes se reutilizaba .section-title con overrides a 1.3-1.4rem, mezclando ambos roles. */ .panel-title { font-size: 1.3rem; font-weight: 600; color: var(--text-primary); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; } .hint-text { font-size: 0.88rem; color: var(--text-secondary); margin-top: 4px; display: block; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; } /* Inputs */ .input-group { display: flex; flex-direction: column; gap: 5px; } .input-group label { font-size: 0.72rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.09em; } input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], select { background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-primary); padding: 9px 12px; border-radius: 6px; font-size: 0.9rem; outline: none; font-family: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease; } input:focus, select:focus { border-color: rgba(255,255,255,0.22); box-shadow: 0 0 0 3px rgba(255,255,255,0.06); } input::placeholder { color: var(--text-secondary); opacity: 1; } /* ── Overlay de confirmacion (modales genericos del paso 4/5) ── Mismo lenguaje que #aiChatWindow: fade + scale + traslado sutil, ease-out confiado. pointer-events:none cuando no esta abierto: si por lo que sea el listener de cierre no llega a fijar display:none, el overlay invisible no deja bloqueando los clics. */ .mt-modal-overlay { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .mt-modal-overlay.open { opacity: 1; pointer-events: auto; } .mt-modal-panel { transform: translateY(10px) scale(0.97); transition: transform 0.22s cubic-bezier(0.16,1,0.3,1); } .mt-modal-overlay.open .mt-modal-panel { transform: translateY(0) scale(1); } /* #historyOverlay es una pantalla completa, no una tarjeta flotante sobre scrim: reusa el fade de .mt-modal-overlay pero con su propio traslado (sin scale, que no tiene sentido a pantalla completa). */ #historyOverlay { transform: translateY(10px); transition: transform 0.22s cubic-bezier(0.16,1,0.3,1); } #historyOverlay.open { transform: translateY(0); } /* Icono del toggle de tema (login/admin/app comparten este boton): un giro acumulativo confirma el clic sin depender de que el icono en si cambie (es el mismo sol/luna combinado en los dos temas). --r crece 180deg por clic, nunca vuelve a 0 => el giro siempre continua hacia adelante, sin "rebote" al volver al tema anterior. */ #themeToggle svg { transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); transform: rotate(calc(var(--r, 0) * 1deg)); } /* CCst Tabs */ .ccst-tabs { display: flex; gap: 6px; margin-bottom: 18px; overflow-x: auto; padding-bottom: 6px; } .ccst-tab { background: transparent; border: 1px solid var(--glass-border); color: var(--text-secondary); padding: 5px 14px; border-radius: 10px; cursor: pointer; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.02em; transition: border-color 0.2s, color 0.2s, background 0.2s; white-space: nowrap; } .ccst-tab:hover { border-color: rgba(255,255,255,0.18); color: var(--text-primary); } .ccst-tab.active { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: var(--text-primary); } .ccst-pane { display: none; } .ccst-pane.active { display: block; animation: fadeIn 0.25s ease forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Dynamic Lists */ .dynamic-list { overflow-x: auto; padding-bottom: 6px; } .dynamic-item { display: grid; gap: 10px; align-items: end; background: rgba(0,0,0,0.12); padding: 14px; border-radius: 10px; border: 1px solid var(--glass-border); position: relative; transition: border-color 0.2s; } .dynamic-item:hover { border-color: rgba(255,255,255,0.11); } .btn-add { background: transparent; border: 1px dashed var(--glass-border); color: var(--text-secondary); padding: 10px; width: 100%; border-radius: 10px; cursor: pointer; font-weight: 500; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; margin-top: 12px; letter-spacing: 0.02em; } .btn-add:hover { border-color: rgba(255,255,255,0.2); color: var(--text-primary); } .btn-add:active { transform: scale(0.98); } .btn-remove { background: transparent; color: var(--text-secondary); border: 1px solid var(--glass-border); width: 34px; height: 34px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s, border-color 0.2s; } .btn-remove:hover { background: rgba(239,68,68,0.08); color: var(--danger); border-color: rgba(239,68,68,0.25); } .btn-remove:active { transform: scale(0.95); } .grid-cargo, .dot-period-tabs-grid { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr) 40px; gap: 14px; align-items: stretch; } .dot-period-tabs-grid { display: grid; margin-bottom: 10px; } .grid-cargo > * { min-width: 0; } .grid-cargo select, .grid-cargo input { width: 100%; box-sizing: border-box; } /* Cada fila de cargo/área se agrupa en dos tarjetas de tamaño uniforme. Sucursal/Área+Esquema+N Trab. es un pool fijo para toda la semana: tarjeta neutra, igual al resto de la app. Mín.Ap./Mín.Ci./Rush varía por periodo: lleva el color de marca a fondo completo (--color-700), no un borde o acento decorativo, para que sea inconfundible que ese bloque es el que cambia al apretar un tab de periodo — el mismo color se usa en el tab activo, así quedan ligados visualmente. .dot-period-tabs-grid comparte la grilla para que los tabs queden justo sobre esa tarjeta. */ .cargo-card { display: flex; flex-direction: column; gap: 10px; border-radius: 10px; padding: 12px 14px 14px; } .cargo-card-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .cargo-card-fields { display: grid; gap: 10px; } .cargo-card-fixed { background: var(--glass-bg); border: 1px solid var(--glass-border); } .cargo-card-fixed .cargo-card-label { color: var(--text-secondary); } .cargo-card-fixed .cargo-card-fields { grid-template-columns: minmax(120px,1.7fr) minmax(96px,1fr) minmax(64px,0.75fr); } .cargo-card-period { background: var(--color-700); } /* --color-ink-700 (no --color-100 fijo): --color-700 tiene luminancia media en tema oscuro y oscura en tema claro, asi que el texto legible es oscuro en un tema y claro en el otro -- --color-100 fijo medía 2.9:1 en oscuro, bajo el 4.5:1 de WCAG AA. */ .cargo-card-period .cargo-card-label, .cargo-card-period .input-group label, .cargo-card-period .help-btn { color: var(--color-ink-700); } .cargo-card-period .help-btn { border-color: var(--color-ink-700); } .cargo-card-period .help-btn:hover { border-color: var(--color-ink-700); color: var(--color-ink-700); filter: brightness(1.15); } /* El boton Rush queda sobre --input-bg (el "pocito" del input), no sobre el verde/azul solido de la tarjeta -- usa el mismo color de texto que los demas inputs (ya adaptado por tema) en vez de un tono claro pensado para el fondo solido, que se veia invisible en tema claro. */ .cargo-card-period .cargo-rush-btn { color: var(--text-primary) !important; } .cargo-card-period .cargo-card-fields { grid-template-columns: 1fr 1fr 1.3fr; } .dot-period-tabs-grid > *:nth-child(2) { display: flex; } .dot-split-tab.is-active { background: var(--color-700) !important; border-color: var(--color-700) !important; color: var(--color-ink-700) !important; } .dot-split-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .rush-popup { position:fixed; z-index:9999; background:#15151a; border:1px solid var(--glass-border); border-radius:16px; padding:20px 26px; min-width:546px; max-width:700px; box-shadow:0 24px 64px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.04); } .rush-period-row { display:flex; align-items:center; gap:6px; margin-bottom:8px; } .rush-period-row input { padding:5px 7px; font-size:0.9rem; background:var(--input-bg); border:1px solid var(--input-border); border-radius:6px; color:var(--text-primary); outline:none; } .rush-period-row input[type="text"] { flex:1; min-width:0; cursor:pointer; } .rush-period-row input[type="number"] { width:56px; } .dot-split-tab { transition:all 0.2s; } .grid-turno { grid-template-columns: 48px 0.54fr 90px 90px 92px 130px 130px 148px 32px; min-width: 100%; width: 100%; } .grid-group { grid-template-columns: 2fr 3fr 35px; min-width: 100%; } .grid-minimo { grid-template-columns: 2fr 1fr 1fr 35px; min-width: 100%; } /* Help tooltips */ .help-btn { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; border:1px solid var(--text-secondary); background:none; color:var(--text-secondary); font-size:0.6rem; font-weight:700; cursor:pointer; flex-shrink:0; line-height:1; padding:0; transition:border-color 0.15s, color 0.15s; vertical-align:middle; margin-left:4px; } .help-btn:hover { border-color:var(--accent-primary); color:var(--accent-primary); } .help-tooltip { position:fixed; z-index:10000; background:#1a1a24; border:1px solid var(--glass-border); border-radius:10px; padding:10px 14px; max-width:280px; font-size:0.82rem; color:var(--text-primary); line-height:1.55; box-shadow:0 8px 32px rgba(0,0,0,0.45); pointer-events:none; opacity:1; transition:opacity 1s ease; } [data-theme="light"] .help-tooltip { background:#fff; box-shadow:0 8px 32px rgba(0,0,0,0.13); } /* ── Tutorial por paso (mini-guia arrastrable) ── */ .mt-tutorial-panel { position: fixed; top: 72px; right: 24px; width: 640px; max-width: calc(100vw - 32px); max-height: 82vh; display: flex; flex-direction: column; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,0.35); z-index: 1400; overflow: hidden; } .mt-tutorial-header { display: flex; align-items: center; gap: 8px; padding: 12px 10px 12px 14px; border-bottom: 1px solid var(--glass-border); cursor: move; user-select: none; flex-shrink: 0; } .mt-tutorial-drag-icon { color: var(--text-secondary); font-size: 0.9rem; flex-shrink: 0; } .mt-tutorial-title { flex: 1; font-weight: 700; font-size: 0.95rem; color: var(--text-primary); } .mt-tutorial-body { padding: 14px 16px; overflow-y: auto; font-size: 0.88rem; line-height: 1.55; color: var(--text-primary); } .mt-tutorial-body p { margin-bottom: 10px; } .mt-tutorial-body p:last-child { margin-bottom: 0; } .mt-tutorial-body strong { color: var(--text-primary); } .mt-tutorial-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--glass-border); font-size: 0.82rem; color: var(--text-secondary); flex-shrink: 0; } .mt-tutorial-footer-check { display: flex; align-items: center; gap: 8px; } .mt-tutorial-footer input[type="checkbox"] { cursor: pointer; } .mt-tutorial-footer label { cursor: pointer; user-select: none; } .mt-tutorial-done-btn { border: none; background: var(--accent-primary); color: var(--bg-base); cursor: pointer; font-size: 0.82rem; font-weight: 600; padding: 6px 16px; border-radius: 8px; flex-shrink: 0; } .mt-tutorial-done-btn:hover { filter: brightness(1.08); } .mt-tutorial-diagram { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; } .mt-tutorial-diagram .mt-cell-label { font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 4px; text-align: center; } .mt-tutorial-diagram .mt-cell-badge { display: inline-block; padding: 4px 11px; border-radius: 5px; font-weight: 700; font-size: 0.9rem; border-width: 1px; border-style: solid; } .mt-tutorial-diagram .mt-cell-arrow { font-size: 1.2rem; color: var(--text-secondary); } /* ── Grabacion real en bucle del intercambio de Domingo Libre (paso 5) ── */ .mt-tutorial-anim { margin: 10px 0; } .mt-anim-video { display: block; width: 100%; border-radius: 8px; border: 1px solid var(--glass-border); background: #000; } .mt-anim-caption { text-align: center; color: var(--text-secondary); font-size: 0.78rem; margin-top: 8px; } .mt-tutorial-reopen-btn { /* bottom-izquierda a proposito: el asistente IA (#aiFloatBtn) ya ocupa bottom-derecha con mayor z-index y tamaño, y lo taparia ahi. */ position: fixed; bottom: 24px; left: 24px; width: 40px; height: 40px; border-radius: 50%; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-primary); font-weight: 700; font-size: 1.05rem; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,0.3); z-index: 1300; display: none; align-items: center; justify-content: center; } .mt-tutorial-reopen-btn:hover { background: var(--bg-hover, rgba(128,128,128,0.12)); } /* Deshacer/Rehacer del preview (paso 5) */ #previewUndoBtn:hover:not(:disabled), #previewRedoBtn:hover:not(:disabled) { background: var(--bg-hover, rgba(128,128,128,0.12)); } #previewUndoBtn:disabled, #previewRedoBtn:disabled { opacity: 0.35; cursor: not-allowed; } /* Buttons & Footer */ .wizard-footer { display: flex; justify-content: space-between; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--glass-border); } .btn-nav { padding: 9px 26px; border-radius: 10px; font-size: 0.85rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.25s; border: none; letter-spacing: 0.01em; } .btn-prev { background: transparent; color: var(--text-primary); border: 1px solid var(--glass-border); } .btn-prev:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); } .btn-prev:active { transform: scale(0.97); } .btn-next { background: #e8e8ea; color: #0d0d10; box-shadow: 0 6px 28px -6px rgba(255,255,255,0.08); } .btn-next:hover { background: #f0f0f1; transform: translateY(-1px); box-shadow: 0 10px 32px -6px rgba(255,255,255,0.1); } .btn-next:active { transform: scale(0.97) translateY(0); } .btn-next:disabled { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.2); cursor: not-allowed; transform: none; box-shadow: none; } /* File Upload */ .file-upload { border: 1px dashed var(--glass-border); padding: 40px 20px; text-align: center; border-radius: 12px; cursor: pointer; transition: all 0.2s; background: rgba(0,0,0,0.08); } .file-upload:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.02); } .file-upload input { display: none; } /* Progress Bar */ .progress-bar-container { height: 2px; background: var(--glass-border); border-radius: 1px; overflow: hidden; margin-top: 14px; } .progress-bar { height: 100%; background: var(--accent-primary); width: 0%; transition: width 0.4s cubic-bezier(0.4,0,0.2,1); } .badge { background: rgba(255,255,255,0.06); padding: 4px 12px; border-radius: 10px; font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.1); letter-spacing: 0.04em; text-transform: uppercase; } /* ── Tabs generados por JS (áreas y períodos) ── */ .cargo-subtab { padding: 6px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 1.05rem; transition: all 0.2s; white-space: nowrap; background: transparent; color: var(--text-primary); border: 1px solid var(--glass-border); } .cargo-subtab:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.22); } .cargo-subtab.is-active { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); } .dot-split-tab { padding: 5px 14px; border-radius: 8px; cursor: pointer; font-size: 0.95rem; transition: all 0.2s; background: transparent; color: var(--text-primary); border: 1px solid var(--glass-border); } .dot-split-tab:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.22); } .dot-split-tab.is-active { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); } /* ══════════════════════════════════════════════ LIGHT THEME — overrides completos ══════════════════════════════════════════════ */ [data-theme="light"] body { background-image: none; } [data-theme="light"] .card:hover { border-color: rgba(0,0,0,0.22); } [data-theme="light"] .section-title { border-bottom-color: rgba(0,0,0,0.09); } /* Stepper */ [data-theme="light"] .stepper::before { background: rgba(0,0,0,0.12); } [data-theme="light"] .step-circle { background: #ebebef; border-color: rgba(0,0,0,0.18); } [data-theme="light"] .step.active .step-circle, [data-theme="light"] .step.completed .step-circle { color: #f5f5f7 !important; } [data-theme="light"] .step:hover .step-circle { box-shadow: 0 0 0 4px rgba(0,0,0,0.08); } /* Inputs / selects */ [data-theme="light"] input:focus, [data-theme="light"] select:focus { border-color: rgba(0,0,0,0.32) !important; box-shadow: 0 0 0 3px rgba(0,0,0,0.06) !important; } /* Dynamic items */ [data-theme="light"] .dynamic-item { background: rgba(0,0,0,0.025); border-color: rgba(0,0,0,0.1); } [data-theme="light"] .dynamic-item:hover { border-color: rgba(0,0,0,0.18); } /* Botones add / remove */ [data-theme="light"] .btn-add { border-color: rgba(0,0,0,0.2); } [data-theme="light"] .btn-add:hover { border-color: rgba(0,0,0,0.38); background: rgba(0,0,0,0.04); color: var(--text-primary); } [data-theme="light"] .btn-remove { border-color: rgba(0,0,0,0.15); } /* CCst tabs (clase / estado via JS classList) */ [data-theme="light"] .ccst-tab { border-color: rgba(0,0,0,0.18); } [data-theme="light"] .ccst-tab:hover { border-color: rgba(0,0,0,0.32); color: var(--text-primary); background: rgba(0,0,0,0.05); } [data-theme="light"] .ccst-tab.active { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.28); color: var(--text-primary); } /* Cargo subtabs & dot-split-tabs (JS-generated) */ [data-theme="light"] .cargo-subtab { border-color: rgba(0,0,0,0.18); } [data-theme="light"] .cargo-subtab:hover { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.3); } [data-theme="light"] .cargo-subtab.is-active { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.28); } [data-theme="light"] .dot-split-tab { border-color: rgba(0,0,0,0.18); } [data-theme="light"] .dot-split-tab:hover { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.3); } /* .is-active usa --color-700 a proposito, definido mas arriba (no theme-specific porque --color-700 ya resuelve al tono correcto por tema). */ /* Footer nav */ [data-theme="light"] .wizard-footer { border-color: rgba(0,0,0,0.1); } [data-theme="light"] .btn-prev { border-color: rgba(0,0,0,0.2); } [data-theme="light"] .btn-prev:hover { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.32); } [data-theme="light"] .btn-next { background: #1c1c22; color: #f5f5f7; box-shadow: 0 6px 28px -6px rgba(0,0,0,0.2); } [data-theme="light"] .btn-next:hover { background: #2d2d38; box-shadow: 0 10px 32px -6px rgba(0,0,0,0.28); } [data-theme="light"] .btn-next:disabled { background: rgba(0,0,0,0.1); color: rgba(0,0,0,0.28); box-shadow: none; } /* File upload / drag zone */ [data-theme="light"] .file-upload { border-color: rgba(0,0,0,0.2); background: rgba(0,0,0,0.02); } [data-theme="light"] .file-upload:hover { border-color: rgba(0,0,0,0.36); background: rgba(0,0,0,0.04); } /* Badge */ [data-theme="light"] .badge { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); } /* FAB IA */ [data-theme="light"] #aiFloatBtn { background: #1c1c22 !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.18) !important; } [data-theme="light"] #aiFloatBtn svg { stroke: #f5f5f7; } /* Legend items */ .legend-item { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; background:rgba(0,0,0,0.15); border:1px solid var(--glass-border); break-inside:avoid; margin-bottom:6px; } .legend-item-name { font-size:1.0rem; font-weight:600; color:var(--text-primary); line-height:1.3; } .legend-item-meta { font-size:0.85rem; color:var(--text-secondary); margin-top:1px; } [data-theme="light"] .legend-item { background:rgba(0,0,0,0.04); } /* Alertas de Vista Previa: menu desplegable, no bloque desplegado. #previewAlertasWrap arranca display:none inline en el HTML (evita el flash de un boton vacio antes de que renderAlertas() corra) y renderAlertas() lo oculta/muestra por completo segun haya o no alertas -- no queda un mensaje "sin alertas" ocupando espacio, el boton mismo desaparece. El panel usa el truco grid-template-rows 0fr->1fr (no max-height con numero inventado) para animar una altura de contenido variable sin recortar contenido alto. Color por severidad, no un solo rojo para todo: HEF_EXCESO es una infraccion real del tope legal de horas (el motivo de existir del producto, ver PRODUCT.md) -- eso SI es --danger. L_FIN_SEMANA y MIN_COVERAGE_FALTA son metas operativas que define el propio cliente (dotacion minima, dia libre preferido), no la ley chilena -- quedan en --warning. renderAlertas() marca el boton con .has-danger solo cuando hay al menos una alerta legal, para que se pueda distinguir "hay que revisar" de "hay que corregir ya" sin abrir el menu. */ .alerts-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--warning-border); background: var(--warning-bg); color: var(--warning-text); font-family: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .alerts-toggle:hover { filter: brightness(1.08); } .alerts-collapse.has-danger .alerts-toggle { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-text); } .alerts-toggle-chevron { transition: transform 0.2s ease; flex-shrink: 0; } .alerts-collapse.is-open .alerts-toggle-chevron { transform: rotate(180deg); } /* El espacio entre el boton y el panel abierto vive como padding-top del HIJO del grid (no margin-top animado en el propio grid): con grid-template-rows en 0fr todo el hijo -- padding incluido -- queda recortado por overflow:hidden, asi que el "gap" aparece gratis al crecer a 1fr sin sumar una segunda propiedad de layout a animar. */ .alerts-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s cubic-bezier(0.16,1,0.3,1); } .alerts-collapse.is-open .alerts-panel { grid-template-rows: 1fr; } .alerts-panel > div { overflow: hidden; min-height: 0; padding-top: 12px; } @media (prefers-reduced-motion: reduce) { .alerts-panel, .alerts-toggle-chevron { transition: none; } } /* Preview pan/zoom hint */ .preview-hint { font-size: 0.92rem; color: rgba(148,163,184,0.6); } [data-theme="light"] .preview-hint { color: rgba(0,0,0,0.55); } /* Preview table headers */ [data-theme="light"] #previewTable thead th { background: #dddde3 !important; color: var(--text-primary) !important; } /* Detect-split button */ [data-theme="light"] .btn-detect-split { border-color: rgba(0,0,0,0.18) !important; } /* Rush popup */ [data-theme="light"] .rush-popup { background: #ffffff; box-shadow: 0 8px 40px rgba(0,0,0,0.13), 0 0 0 1px rgba(0,0,0,0.07); } /* History overlay — botones de tarjeta de ejecución. color-950 (no color-50): --color-600 mide luminancia media en los dos temas (0.42 oscuro / 0.25 claro) -- con texto claro el contraste da 2.1:1 / 3.2:1, bajo el 4.5:1 de WCAG AA; con color-950 da 8.4:1 / 5.4:1. El hover oscurece con filter en vez de saltar a --color-700: ese escalon tiene luminancia MAS ALTA que 600 en tema oscuro pero MAS BAJA en tema claro (el ramp no es simetrico entre temas), asi que saltar de escalon podia romper el contraste del texto justo en el hover. */ .hist-load { padding: 8px 18px; border-radius: 10px; border: none; background: var(--color-600); color: var(--color-950); font-weight: 600; font-size: 0.88rem; cursor: pointer; font-family: inherit; transition: filter 0.15s; } .hist-load:hover { filter: brightness(0.88); } .hist-load:disabled { opacity: 0.5; cursor: wait; } .hist-del { padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(239,68,68,0.35); background: transparent; color: var(--danger); font-size: 0.88rem; cursor: pointer; font-family: inherit; transition: background 0.15s, border-color 0.15s; } .hist-del:hover { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.55); } /* Mismo tratamiento que .hist-load/#loginBtn: ahora usa el acento de marca (--color-600/--color-950), asi que el hover tambien es brightness, no opacity (opacity dejaba ver el fondo a traves del boton). */ #btnNewExecution:hover { filter: brightness(0.88); } /* --color-ink-700 (no --color-100 fijo): mismo caso que .cargo-card-period -- --color-100 fijo medía 2.9:1 en tema oscuro sobre --color-700. */ .hist-chip { font-size: 0.75rem; padding: 3px 10px; border-radius: 6px; border: none; background: var(--color-700); color: var(--color-ink-700); white-space: nowrap; } .hist-chip strong { color: var(--color-ink-700); font-weight: 600; } .hist-chip-edit { color: var(--warning-text); border: 1px solid var(--warning-border); background: var(--warning-bg); } /* Drag-and-drop — ambas vistas */ .mz-cell { cursor: grab; } .mz-cell:active, .shift-cell:active { cursor: grabbing; } .shift-mz-badge { display: inline-block; transition: opacity 0.14s, transform 0.14s, box-shadow 0.14s; } .shift-badge { transition: opacity 0.14s, transform 0.14s, box-shadow 0.14s; } /* Hover: animación de invitación a arrastrar (pulso suave, visible en ambos temas) */ @keyframes shift-invite { 0%,100% { transform: scale(1) translateY(0); box-shadow: 0 0 0 rgba(0,0,0,0); } 50% { transform: scale(1.12) translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.3); } } .mz-cell:hover:not(.drag-over) .shift-mz-badge, .shift-cell:hover:not(.drag-over) .shift-badge { animation: shift-invite 1.3s ease-in-out infinite; cursor: grab; } /* Drop target: blanco con resplandor */ .drag-over { background: rgba(255,255,255,0.09) !important; outline: 2px solid rgba(255,255,255,0.52); outline-offset: -2px; } .drag-over .shift-mz-badge, .drag-over .shift-badge { box-shadow: 0 0 0 2px rgba(255,255,255,0.78), 0 0 18px rgba(255,255,255,0.38) !important; animation: none !important; } /* Celda origen al arrastrar */ .mz-cell.mz-drag-src .shift-mz-badge { opacity: 0.22; transform: scale(0.8); } /* Leyenda — hover y grab */ .legend-drag-badge { transition: transform 0.14s, box-shadow 0.14s; display: inline-block; } .legend-drag-badge:hover { animation: shift-invite 1.35s ease-in-out infinite; cursor: grab; } .legend-drag-badge:active { cursor: grabbing; transform: scale(1.12); } /* Textura de rayas diagonales para el Domingo Libre ("DL"): ademas de su propio color (--sh-DL-*), lo distingue del dia libre comun ("L") sin depender solo de un matiz. Va en un ::after (no en background-image del mismo elemento) porque el "background:" inline de getShiftStyle() pisaria cualquier background-image declarado en la misma capa. */ .shift-badge-dl-pattern { position: relative; overflow: hidden; } .shift-badge-dl-pattern::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.22) 0 3px, transparent 3px 8px); } [data-theme="light"] .shift-badge-dl-pattern::after { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.14) 0 3px, transparent 3px 8px); } /* Paso 1 (Carga): chips de días y duración de operación */ .day-chip { position: relative; cursor: pointer; } .day-chip input { position: absolute; opacity: 0; pointer-events: none; } .day-chip span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-secondary); font-size: 0.78rem; font-weight: 600; transition: background 0.15s, color 0.15s, border-color 0.15s; user-select: none; } .day-chip:hover span { border-color: var(--text-secondary); } .day-chip input:checked + span { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--bg-base); } .day-chip input:focus-visible + span { outline: 2px solid var(--accent-primary); outline-offset: 2px; } .locale-period + .locale-period { border-top: 1px dashed var(--glass-border); } /* Minimapa de zoom (paso 5) — sobrio, adaptado a ambos temas */ #previewMinimap { background: rgba(19,19,24,0.95); border: 1px solid var(--glass-border); box-shadow: 0 4px 18px rgba(0,0,0,0.35); } #previewMinimapVP { border: 1.5px solid rgba(244,244,245,0.65); background: rgba(244,244,245,0.1); } #previewMinimap .pz-zoom-label { color: var(--text-primary); } #previewMinimap .pz-mm-title { color: var(--text-secondary); } [data-theme="light"] #previewMinimap { background: rgba(255,255,255,0.97); box-shadow: 0 4px 18px rgba(0,0,0,0.14); } [data-theme="light"] #previewMinimapVP { border-color: rgba(26,26,31,0.55); background: rgba(26,26,31,0.08); } /* Skeleton de carga (paso 5) — placeholder gris con brillo deslizante */ .skeleton { background: rgba(128,128,128,0.13); border-radius: 8px; position: relative; overflow: hidden; } .skeleton::after { content:''; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent); animation: skeleton-shimmer 1.5s infinite; } [data-theme="light"] .skeleton { background: rgba(0,0,0,0.07); } [data-theme="light"] .skeleton::after { background:linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent); } @keyframes skeleton-shimmer { 100% { transform: translateX(100%); } } /* Focus visible en light mode */ :root[data-theme="light"] input:focus, :root[data-theme="light"] select:focus { border-color: rgba(0,0,0,0.3); box-shadow: 0 0 0 3px rgba(0,0,0,0.1); } /* Focus visible global para botones — solo teclado, no mouse */ button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: 4px; } /* prefers-reduced-motion: desactivar animaciones y transiciones */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .stepper-progress { transition: none !important; } .mz-cell:hover:not(.drag-over) .shift-mz-badge, .shift-cell:hover:not(.drag-over) .shift-badge, .legend-drag-badge:hover { animation: none !important; } /* Excepción: spinner de carga — comunica estado, debe seguir girando */ .ai-spinner-arc { animation-duration: 1.2s !important; animation-iteration-count: infinite !important; } } /* --- inline keyframes que estaban junto al --- */ @keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} } @keyframes spin { 100% { transform: rotate(360deg); } } .spinner { animation: spin 1s linear infinite; } /* --- estilos del segundo bloque