/* Sistema de diseño del backoffice (Claude Design → CSS). El acento (--accent) lo inyecta el layout desde gimnasio.color_primario: los neutros son fijos y sólo el acento cambia por gimnasio. Ver docs/44-brief-diseno-visual.md. */ :root { --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Acento índigo soft por defecto; el layout lo pisa con el color del gimnasio (white-label). */ --accent: #4f46e5; --accent-fg: #ffffff; --bg: #f4f5f8; --surface: #ffffff; --surface-2: #f7f8fb; --surface-3: #eef0f4; --border: #ecedf1; --border-strong: #e3e5ea; --fg: #111726; --fg-muted: #525a6b; --fg-subtle: #98a0b0; --success: #0a7a44; --warning: #b45309; --danger: #c92a2a; --info: #2f5bd0; color-scheme: light; --rad: 10px; --rad-md: 12px; --rad-lg: 16px; /* Altura de la franja superior: la comparten el header (.bo-topbar) y la marca del sidebar (.bo-marca) para que sus bordes inferiores queden en la misma línea (#22). */ --bo-top-alto: 66px; --ease: cubic-bezier(.32, .72, 0, 1); /* Sombras suaves y esparcidas: la firma del look soft (profundidad por sombra, no por líneas). */ --shadow-sm: 0 1px 2px rgba(17, 23, 38, .05), 0 1px 3px rgba(17, 23, 38, .05); --shadow-md: 0 1px 2px rgba(17, 23, 38, .04), 0 14px 30px -12px rgba(17, 23, 38, .14); --shadow-lg: 0 1px 2px rgba(17, 23, 38, .04), 0 30px 60px -20px rgba(17, 23, 38, .22); } /* Claro es el default y vive en :root. El oscuro cuelga de data-tema, que decide el usuario. La opción "sistema" se resuelve a claro/oscuro en el antes del primer pintado, así los tokens oscuros viven en un solo lugar. */ [data-tema="oscuro"] { /* Los controles nativos (calendario, scrollbars, desplegables) siguen al tema. */ color-scheme: dark; --bg: #0e1014; --surface: #181b21; --surface-2: #14161b; --surface-3: #121419; --border: #252932; --border-strong: #2e333d; --fg: #e7e9ee; --fg-muted: #a5adbd; --fg-subtle: #6b7382; --success: #57cd90; --warning: #e6b45f; --danger: #f0918f; --info: #8fabf0; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 34px -12px rgba(0, 0, 0, .6); --shadow-lg: 0 1px 2px rgba(0, 0, 0, .3), 0 34px 64px -20px rgba(0, 0, 0, .7); } * { box-sizing: border-box; } body.bo { margin: 0; font-family: var(--font); background: var(--bg); color: var(--fg); /* Derivadas del acento que el layout fija por gimnasio en el : en :root quedaban congeladas al default y rompían el hover/tinte para gimnasios de otro color. */ --accent-press: color-mix(in srgb, var(--accent) 80%, #000); --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--surface)); --accent-ink: var(--accent-press); } .bo a { color: var(--accent); text-decoration: none; } /* Excluye los botones-link (``): si no, en hover el texto tomaba el color del fondo (--accent-press) y desaparecía. El color del texto de cada botón lo fija su propia regla. */ .bo a:not([class*="btn"]):hover { color: var(--accent-press); } /* ============================ SHELL ============================ */ /* Capado al viewport (#71): el shell NO crece con el contenido, así el sidebar y el topbar quedan fijos y sólo scrollea el contenido (.bo-nav y .bo-contenido ya tienen overflow-y). 100dvh (no vh) para no cortar bajo la barra de URL de iOS; overflow:hidden para que el shell nunca scrollee por su cuenta. */ .bo-shell { display: flex; height: 100dvh; overflow: hidden; } .bo-sidebar { width: 250px; flex: 0 0 250px; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); } .bo-marca { display: flex; align-items: center; gap: 11px; min-height: var(--bo-top-alto); padding: 0 18px; border-bottom: 1px solid var(--border); } .bo-marca__sigla { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px; background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; letter-spacing: -.02em; } .bo-marca__nombre { font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bo-marca__sub { font-size: 11px; font-weight: 500; color: var(--fg-muted); letter-spacing: .02em; } /* Acento detrás del logo horizontal: un logo blanco/claro sobre el sidebar claro sería invisible (mismo caso que el header de la PWA). El ícono (.bo-marca__sigla) ya lo tiene. */ .bo-marca__logo { max-width: 100%; max-height: 40px; object-fit: contain; background: var(--accent); border-radius: 10px; padding: 6px 10px; } .bo-nav { flex: 1 1 auto; overflow-y: auto; padding: 12px 12px 20px; } /* `.bo-nav .bo-nav__grupo` (dos clases) a propósito: el header ahora es un