/* ══════════════════════════════════════════════════════════════════
Escola BetàniaPatmos · Plataforma d'extraescolars — Fase 1A
Shared styles. DS tokens embedded verbatim from the
BetàniaPatmos Design System (colors_and_type.css) + app layout.
Vanilla CSS only.
══════════════════════════════════════════════════════════════════ */
/* ── Brand fonts (self-hosted Akzidenz + Google fallbacks) ───────── */
@font-face {
font-family: "Akzidenz-Grotesk BQ";
src: url("design-system/fonts/AkzidenzGroteskBQ-Reg.woff2") format("woff2"),
url("design-system/fonts/AkzidenzGroteskBQ-Reg.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;700&family=Monda:wght@400;700&family=Courier+Prime:wght@400;700&display=swap');
/* ── DS tokens ───────────────────────────────────────────────────── */
:root {
--bp-red: #FF0000;
--bp-red-ink: #E73C39;
--bp-black: #000000;
--bp-ink: #1D1D1B;
--bp-white: #FFFFFF;
--bp-cream: #FFF7ED;
--bp-grey-50: #EEEEEE;
--bp-grey-100: #E3E3E3;
--bp-grey-200: #D9D9D9;
--bp-grey-500: #9B9B9B;
--bp-grey-700: #666666;
--bp-green: #B4DB62;
--bp-blue: #C1E1E8;
--bp-cyan: #62D4DB;
--bp-sand: #F3E8DA;
--bp-purple: #5E2DC6;
--bp-yellow: #FFE600;
--bp-font-display: "Akzidenz-Grotesk BQ", "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
--bp-font-body: "Akzidenz-Grotesk BQ", "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
--bp-font-button: "DM Sans", "Aeonik", "Helvetica Neue", Arial, sans-serif;
--bp-font-label: "Monda", "Courier New", monospace;
--bp-font-mono: "Courier Prime", "Courier New", monospace;
--bp-fs-h1: 54px;
--bp-fs-h2: 45px;
--bp-fs-h3: 32px;
--bp-fs-h4: 24px;
--bp-fs-body-lg: 24px;
--bp-fs-body: 19px;
--bp-fs-small: 18px;
--bp-fs-micro: 14px;
--bp-lh-display: 0.9;
--bp-lh-tight: 1.0;
--bp-lh-body: 1.25;
--bp-tracking-tight: -0.01em;
--bp-tracking-wide: 0.04em;
--bp-tracking-wider: 0.08em;
--bp-tracking-label: 0.10em;
--bp-space-1:4px; --bp-space-2:8px; --bp-space-3:12px; --bp-space-4:16px;
--bp-space-5:24px; --bp-space-6:32px; --bp-space-7:48px; --bp-space-8:64px;
--bp-space-9:96px; --bp-space-10:128px;
--bp-radius-0:0px; --bp-radius-sm:4px; --bp-radius-md:12px; --bp-radius-pill:73px;
/* Roundness scale — boxy per Jaume's v3 (square surfaces; only pills + circles keep radius) */
--r-sm:0; --r-md:0; --r-lg:0;
--bp-stroke-1:1px; --bp-stroke-2:2px; --bp-stroke-3:3px;
--bp-page-max:1280px;
--bp-page-gutter:64px;
--bp-grid-gap:32px;
/* ── Shadow — soft, diffuse elevation system (low opacity) ── */
--bp-shadow-soft: 0 8px 24px rgba(0,0,0,0.08);
--bp-shadow-card: 0 2px 8px rgba(0,0,0,0.06);
--bp-shadow-drop: 0 4px 12px rgba(0,0,0,0.25);
/* Flat per v3 — resting surfaces lean on borders, not shadow; only floating layers cast a soft shadow */
--elev-header: 0 1px 0 var(--bp-grey-100); /* header bar → hairline rule */
--elev-1: none; /* resting cards: flat, bordered */
--elev-2: var(--bp-shadow-card); /* subtle hover lift */
--elev-3: var(--bp-shadow-soft); /* floating dock / save bar */
--elev-4: var(--bp-shadow-soft); /* modals + popovers */
/* ── Semantic (light) ── */
--bg: var(--bp-white);
--bg-alt: #F4F2EE; /* Inscripcions warm page bg — app page bg + login panel (matches inscripcions.css body) */
--bg-muted: var(--bp-grey-50); /* DS · Grey 50 — hover surfaces */
--surface: var(--bp-white);
--fg: var(--bp-black);
--fg-muted: var(--bp-grey-500);
--accent: var(--bp-red);
--on-accent: var(--bp-white);
--border: var(--bp-grey-100);
--rule: var(--bp-grey-100);
--brand-panel: var(--bp-red);
}
/* ── Reset ───────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--bp-font-body);
color: var(--fg);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100vh;
}
img, svg { display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* ── Type helpers ────────────────────────────────────────────────── */
.h1 { font-family: var(--bp-font-display); font-weight: 400; font-size: var(--bp-fs-h1);
line-height: var(--bp-lh-display); letter-spacing: var(--bp-tracking-tight); text-wrap: balance; margin: 0; }
.h2 { font-family: var(--bp-font-display); font-weight: 400; font-size: var(--bp-fs-h2);
line-height: var(--bp-lh-display); letter-spacing: var(--bp-tracking-tight); margin: 0; }
.h3 { font-family: var(--bp-font-display); font-weight: 400; font-size: var(--bp-fs-h3);
line-height: var(--bp-lh-display); margin: 0; }
.h4 { font-family: var(--bp-font-display); font-weight: 400; font-size: var(--bp-fs-h4);
line-height: var(--bp-lh-tight); margin: 0; }
.body-lg { font-size: var(--bp-fs-body-lg); line-height: var(--bp-lh-body); }
.body { font-size: var(--bp-fs-body); line-height: var(--bp-lh-body); }
.small { font-size: var(--bp-fs-small); line-height: var(--bp-lh-body); }
.micro { font-size: var(--bp-fs-micro); line-height: var(--bp-lh-body); }
.muted { color: var(--fg-muted); }
.eyebrow {
font-family: var(--bp-font-display); font-weight: 400;
font-size: var(--bp-fs-small); letter-spacing: var(--bp-tracking-wider);
text-transform: uppercase; color: var(--accent);
}
.b-red { color: var(--accent); }
/* ══════════════════════════════════════════════════════════════════
HEADER — top nav bar (no sidebars, ever)
══════════════════════════════════════════════════════════════════ */
.app-header {
display: flex; align-items: center; justify-content: space-between;
gap: var(--bp-space-6);
padding: 16px var(--bp-space-6);
background: var(--surface);
border-bottom: var(--bp-stroke-1) solid var(--rule);
position: sticky; top: 0; z-index: 50;
box-shadow: var(--elev-header);
}
.app-header .brand {
display: flex; align-items: baseline; gap: 6px;
font-family: var(--bp-font-display); font-size: 22px;
color: var(--accent); letter-spacing: var(--bp-tracking-tight);
white-space: nowrap;
}
.app-header .brand b { font-weight: 800; }
.app-nav { display: flex; align-items: center; gap: var(--bp-space-5); }
.app-nav a {
font-family: var(--bp-font-display); font-size: 16px; color: var(--fg);
letter-spacing: var(--bp-tracking-wide); text-transform: uppercase;
}
.app-nav a:hover { color: var(--accent); text-decoration: none; }
.app-nav a.is-active { color: var(--accent); }
.header-tools { display: flex; align-items: center; gap: var(--bp-space-4); }
/* ── Auth top bar (minimal — lang + theme only) ──────────────────── */
.auth-topbar {
position: fixed; top: var(--bp-space-4); right: var(--bp-space-6); z-index: 60;
display: flex; align-items: center; justify-content: flex-end; gap: var(--bp-space-4);
}
/* ── Language selector (segmented) ───────────────────────────────── */
/* Language switch — same DS as inscripcions profile menu (square, ink active) */
.lang-switch { display: inline-flex; border: var(--bp-stroke-1) solid var(--bp-grey-100); border-radius: 0; overflow: hidden; }
.lang-switch button {
border: 0; background: var(--bp-white); color: var(--bp-grey-500);
font-family: var(--bp-font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.04em;
padding: 5px 9px; cursor: pointer; transition: color .15s, background .15s;
}
.lang-switch button + button { border-left: var(--bp-stroke-1) solid var(--bp-grey-100); }
.lang-switch button.is-active { background: var(--bp-ink); color: var(--bp-white); }
.lang-switch.on-brand { border-color: rgba(255,255,255,.4); }
.lang-switch.on-brand button { background: transparent; color: rgba(255,255,255,.75); }
.lang-switch.on-brand button + button { border-left-color: rgba(255,255,255,.4); }
.lang-switch.on-brand button.is-active { background: var(--bp-white); color: var(--bp-ink); }
/* ── Theme toggle ────────────────────────────────────────────────── */
.theme-toggle {
width: 40px; height: 40px; border-radius: 50%;
border: var(--bp-stroke-1) solid var(--border); background: transparent;
color: var(--fg); display: inline-flex; align-items: center; justify-content: center;
transition: background .15s, color .15s, border-color .15s;
}
.theme-toggle:hover { background: var(--fg); color: var(--bg); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle.on-brand { border-color: rgba(255,255,255,.4); color: #fff; }
.theme-toggle.on-brand:hover { background: #fff; color: var(--accent); }
/* ══════════════════════════════════════════════════════════════════
AUTH SPLIT LAYOUT
══════════════════════════════════════════════════════════════════ */
.auth {
display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh;
}
.auth-brand {
position: sticky; top: 0; align-self: start; height: 100vh; background: var(--brand-panel); color: var(--bp-white);
padding: var(--bp-space-9) var(--bp-space-8);
display: flex; flex-direction: column; justify-content: space-between;
overflow: hidden;
}
.auth-brand .brand-logo { height: 64px; width: auto; display: block; align-self: flex-start; }
.auth-brand .brand-wordmark {
font-family: var(--bp-font-display); color: var(--bp-white);
font-size: 40px; line-height: 1; letter-spacing: var(--bp-tracking-tight);
}
.auth-brand .brand-wordmark b { font-weight: 800; }
.auth-brand .brand-tagline {
font-family: var(--bp-font-display); font-weight: 400;
font-size: 64px; line-height: var(--bp-lh-display);
letter-spacing: var(--bp-tracking-tight); text-wrap: balance; margin: 0;
max-width: 12ch;
}
.auth-brand .brand-foot {
font-size: var(--bp-fs-small); color: rgba(255,255,255,.85);
border-top: var(--bp-stroke-1) solid rgba(255,255,255,.35);
padding-top: var(--bp-space-4); max-width: 46ch;
}
.auth-panel {
position: relative;
background: var(--bg-alt);
display: flex; flex-direction: column; justify-content: safe center;
min-height: 100vh;
}
/* top-aligned (not margin:auto) so a tall register form scrolls fully — margin:auto would
clip the overflowing top and make it unreachable. Red panel + topbar stay fixed; page scrolls. */
.auth-wrap { width: 100%; max-width: 640px; margin: 0 auto;
padding: var(--bp-space-7) var(--bp-space-7) var(--bp-space-9); }
.auth-view { display: none; }
.auth-view.is-active { display: block; }
.auth-back { display: flex; width: fit-content; align-items: center; gap: 8px; margin-bottom: var(--bp-space-5);
font-size: var(--bp-fs-small); }
.auth-view > .eyebrow { display: block; }
.auth-back svg { width: 18px; height: 18px; }
.auth-card {
width: 100%; max-width: 440px; margin: 0 auto; background: var(--surface);
border: var(--bp-stroke-1) solid var(--border);
padding: 28px 32px;
box-shadow: none; border-radius: var(--r-lg);
}
.auth-card .eyebrow { margin-bottom: 8px; display: block; }
.auth-card h1 { margin-bottom: 22px; }
.auth-view h1, .auth-card h1 { font-size: 40px; line-height: 0.98; }
.auth-sub { margin: 6px 0 16px; color: var(--fg-muted); }
.auth-below {
width: 100%; max-width: 440px; margin: 18px auto 0;
display: flex; flex-direction: column; gap: 8px;
}
.auth-below .row { font-size: var(--bp-fs-small); color: var(--fg-muted); margin: 0; }
/* ══════════════════════════════════════════════════════════════════
FORM FIELDS — DS underline style, uppercase label
══════════════════════════════════════════════════════════════════ */
.field { display: flex; flex-direction: column; gap: 5px; padding: 11px 0; }
.field > label {
font-family: var(--bp-font-display); font-size: 10px; font-weight: 700;
color: var(--bp-grey-700); letter-spacing: 0.12em; text-transform: uppercase;
}
.field .req { color: var(--accent); }
.field input, .field select, .field textarea {
border: 0; border-bottom: var(--bp-stroke-1) solid var(--rule); background: transparent; color: var(--fg);
font-family: var(--bp-font-body); font-size: var(--bp-fs-small);
padding: 4px 0 8px; width: 100%; outline: none;
}
.field textarea { resize: vertical; min-height: 52px; line-height: var(--bp-lh-body); }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-muted); }
.field input:focus, .field select:focus, .field textarea:focus, .field.is-focus input { border-bottom-color: var(--accent); }
/* end-adornment (unit suffix, e.g. %) — underline moves to the wrapper */
.field-adorn { display: flex; align-items: baseline; gap: 6px; border-bottom: var(--bp-stroke-1) solid var(--rule); }
.field-adorn:focus-within { border-bottom-color: var(--accent); }
.field-adorn input { border-bottom: 0; flex: 1; }
.fa-suffix { flex: none; color: var(--fg-muted); font-size: var(--bp-fs-small); padding-bottom: 8px; }
.field select {
appearance: none; -webkit-appearance: none;
background-image: url("assets/icons/caret-down.svg");
background-repeat: no-repeat; background-position: right 2px center; background-size: 16px;
padding-right: 24px; cursor: pointer;
}
.field .with-action { display: flex; align-items: center; gap: var(--bp-space-3); }
.field .with-action input { flex: 1; }
.eye-btn { border: 0; background: transparent; color: var(--fg-muted); padding: 2px; display: inline-flex; }
.eye-btn:hover { color: var(--accent); }
.eye-btn svg { width: 22px; height: 22px; }
.eye-btn .icon-eye-off { display: none; }
.eye-btn.is-shown .icon-eye { display: none; }
.eye-btn.is-shown .icon-eye-off { display: block; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--bp-space-5); }
.form-grid--fill { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* settings: fill the full-width card, no field alone on a new line */
.form-grid .col-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
/* ── Checkboxes (RGPD) ───────────────────────────────────────────── */
.check { display: flex; gap: var(--bp-space-3); align-items: flex-start; padding: var(--bp-space-2) 0; }
.check input[type="checkbox"] {
appearance: none; -webkit-appearance: none; margin: 2px 0 0; flex: none;
width: 22px; height: 22px; border: var(--bp-stroke-2) solid var(--fg);
background: transparent; position: relative; cursor: pointer; border-radius: var(--bp-radius-0);
}
.check input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.check input[type="checkbox"]:checked::after {
content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.check label { font-size: var(--bp-fs-micro); line-height: var(--bp-lh-body); color: var(--fg); cursor: pointer; }
/* ══════════════════════════════════════════════════════════════════
BUTTONS — DS pill system
══════════════════════════════════════════════════════════════════ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border-radius: var(--bp-radius-pill);
padding: 12px 22px; font-family: var(--bp-font-display); font-weight: 700; font-size: 13px;
line-height: 1; letter-spacing: 0.04em; white-space: nowrap;
border: 1.5px solid var(--bp-ink); background: var(--bp-white); color: var(--bp-ink);
transition: all .14s ease; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--bp-ink); color: var(--bp-white); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 4px; }
.btn--block { width: 100%; }
.btn--solid { background: var(--bp-red); color: var(--bp-white); border-color: var(--bp-red); }
.btn--solid:hover { background: var(--bp-ink); border-color: var(--bp-ink); color: var(--bp-white); opacity: 1; }
.btn--white { background: #fff; color: var(--bp-red-ink); border-color: #fff; }
.btn--outline { background: transparent; color: var(--bp-grey-700); border-color: var(--bp-grey-200); }
.btn--outline:hover { background: var(--bp-ink); color: var(--bp-white); border-color: var(--bp-ink); }
.btn--ink { background: var(--bp-ink); color: var(--bp-white); border-color: var(--bp-ink); }
.btn--ink:hover { background: var(--bp-red); border-color: var(--bp-red); color: var(--bp-white); }
.btn--sm { padding: 8px 16px; font-size: 11px; letter-spacing: 0.06em; }
.btnlink {
background: transparent; border: 0; padding: 0; color: var(--accent);
font-family: var(--bp-font-body); font-size: var(--bp-fs-small); cursor: pointer;
}
.btnlink:hover { text-decoration: underline; text-underline-offset: 2px; }
/* ══════════════════════════════════════════════════════════════════
SECTION / STACKED LAYOUT (registre)
══════════════════════════════════════════════════════════════════ */
.page { max-width: 920px; margin: 0 auto; padding: var(--bp-space-8) var(--bp-space-6) var(--bp-space-10); }
.page-head { margin-bottom: var(--bp-space-8); }
.page-head h1 { margin: var(--bp-space-2) 0; }
.section { margin-bottom: var(--bp-space-8); }
.section > .section-head { display: flex; align-items: baseline; gap: var(--bp-space-4);
border-bottom: var(--bp-stroke-3) solid var(--accent); padding-bottom: var(--bp-space-3); margin-bottom: var(--bp-space-5); }
.section > .section-head .num {
font-family: var(--bp-font-display); font-weight: 800; font-size: var(--bp-fs-h3); color: var(--accent); line-height: 1;
}
.section > .section-head h2 { font-size: var(--bp-fs-h3); }
.section > .section-head .sec-opt { margin-left: auto; align-self: center; font-family: var(--bp-font-display); font-size: var(--bp-fs-micro);
letter-spacing: var(--bp-tracking-wide); text-transform: uppercase; color: var(--fg-muted); border: var(--bp-stroke-1) solid var(--border);
border-radius: var(--r-sm); padding: 3px 9px; }
.reg-card { background: var(--surface); border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-lg);
box-shadow: var(--elev-1); padding: 18px 20px; margin-bottom: 16px; }
.reg-card > .section-head { border-bottom-width: var(--bp-stroke-2); margin-bottom: 12px; padding-bottom: 10px; }
.reg-card > .section-head h2, .reg-card > .section-head .num { font-size: 26px; }
.child-block { border: var(--bp-stroke-1) solid var(--border); background: var(--bg-alt); padding: 14px 16px; margin-bottom: 12px; border-radius: var(--r-md); }
.child-block .child-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--bp-space-2); }
.child-block .child-head .child-title { font-family: var(--bp-font-display); font-size: var(--bp-fs-h4);
letter-spacing: var(--bp-tracking-wide); text-transform: uppercase; color: var(--fg); }
.child-remove { border: 0; background: transparent; color: var(--fg-muted); display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.child-remove:hover { color: var(--accent); }
.child-remove svg { width: 16px; height: 16px; }
.form-actions { display: flex; align-items: center; gap: var(--bp-space-5); flex-wrap: wrap; margin-top: var(--bp-space-6); }
/* ── Success state (recuperació) ─────────────────────────────────── */
.success { text-align: left; }
.success .tick {
width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff;
display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--bp-space-5);
}
.success .tick svg { width: 30px; height: 30px; }
.is-hidden { display: none !important; }
/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
.auth { grid-template-columns: 1fr; height: auto; overflow: visible; }
.auth-brand { position: static; height: auto; min-height: 300px; padding: var(--bp-space-8) var(--bp-space-6) var(--bp-space-7); gap: var(--bp-space-6); }
.auth-brand .brand-tagline { font-size: 40px; }
.auth-panel { height: auto; min-height: 0; overflow: visible; }
.auth-wrap { padding: var(--bp-space-6) var(--bp-space-5) var(--bp-space-9); }
.auth-topbar { position: static; justify-content: flex-end; padding: var(--bp-space-4) var(--bp-space-5); }
}
@media (max-width: 560px) {
.app-header { padding: 12px var(--bp-space-5); flex-wrap: wrap; gap: var(--bp-space-3); }
.app-nav { gap: var(--bp-space-4); order: 3; width: 100%; overflow-x: auto; }
.auth-brand .brand-tagline { font-size: 34px; }
.page { padding: var(--bp-space-6) var(--bp-space-4) var(--bp-space-9); }
.section > .section-head h2, .section > .section-head .num { font-size: var(--bp-fs-h4); }
.btn--block { width: 100%; }
}
/* ══════════════════════════════════════════════════════════════════
AUTHENTICATED APP SHELL — header used by every logged-in page
══════════════════════════════════════════════════════════════════ */
.app-header .brand { text-decoration: none; }
.app-header .brand:hover { text-decoration: none; }
.header-tools { gap: var(--bp-space-3); }
/* burger (mobile) */
.burger { display: none; width: 40px; height: 40px; border: var(--bp-stroke-1) solid var(--border);
background: transparent; color: var(--fg); border-radius: 50%; align-items: center; justify-content: center; }
.burger svg { width: 22px; height: 22px; }
/* role / view switch — Família | Administració */
.role-switch { display: inline-flex; border: var(--bp-stroke-1) solid var(--border); border-radius: var(--bp-radius-pill); overflow: hidden; }
.role-switch a, .role-switch button {
border: 0; background: transparent; color: var(--fg-muted);
font-family: var(--bp-font-display); font-size: 14px; letter-spacing: var(--bp-tracking-wide);
text-transform: uppercase; padding: 8px 16px; transition: color .15s, background .15s; text-decoration: none;
}
.role-switch a:hover { text-decoration: none; color: var(--fg); }
.role-switch .is-active { background: var(--accent); color: var(--on-accent); }
/* notifications bell */
.bell { position: relative; width: 40px; height: 40px; border: 0;
background: transparent; color: var(--fg-muted); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
transition: background .15s, color .15s; }
.bell:hover { background: var(--bg-muted); color: var(--fg); }
.bell svg { width: 20px; height: 20px; }
.bell .badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px;
background: var(--accent); color: #fff; border-radius: var(--bp-radius-pill); font-family: var(--bp-font-display);
font-size: 11px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--surface); }
/* user chip + dropdown */
.menu-wrap { position: relative; }
.user-chip { display: inline-flex; align-items: center; gap: 10px; background: var(--surface);
border: var(--bp-stroke-1) solid var(--border); border-radius: var(--bp-radius-pill); padding: 5px 12px 5px 5px;
color: var(--fg); transition: border-color .15s; }
.user-chip:hover { border-color: var(--fg); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff;
display: inline-flex; align-items: center; justify-content: center; font-family: var(--bp-font-display); font-size: 14px; flex: none; }
.user-chip .uname { font-family: var(--bp-font-body); font-size: 15px; white-space: nowrap; }
.user-chip .cx { width: 16px; height: 16px; color: var(--fg-muted); transition: transform .15s; }
.user-chip[aria-expanded="true"] .cx { transform: rotate(180deg); }
.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; background: var(--surface);
border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-md); box-shadow: var(--elev-4); padding: 6px; z-index: 60; display: none; }
.menu.is-open { display: block; }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
padding: 10px 12px; font-family: var(--bp-font-body); font-size: 15px; color: var(--fg); background: transparent; border: 0; }
.menu a:hover, .menu button:hover { background: var(--bg-muted); text-decoration: none; }
.menu svg { width: 18px; height: 18px; }
.menu hr { border: 0; border-top: var(--bp-stroke-1) solid var(--border); margin: 6px 0; }
.menu .danger { color: var(--accent); }
/* ── Inscripcions header (brand · breadcrumb · square-avatar menu) ── */
body[data-app] { background: var(--bp-grey-50); font-size: 15px; line-height: 1.45; } /* neutral-gray page bg (DS grey-50); cards stay white via --surface */
.hdr-left { display: flex; align-items: center; gap: var(--bp-space-4); min-width: 0; }
.app-header .brand { color: var(--fg); font-size: 21px; display: inline-block; letter-spacing: var(--bp-tracking-tight); }
.app-header .brand .b-red { color: var(--accent); }
.hdr-div { width: 1px; height: 22px; background: var(--border); flex: none; }
.crumb { font-family: var(--bp-font-display); font-size: 12px; letter-spacing: var(--bp-tracking-wide); text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; }
.hdr-right { display: flex; align-items: center; gap: var(--bp-space-3); }
.user-block { display: flex; align-items: center; gap: var(--bp-space-3); background: transparent; border: 0; padding: 4px; cursor: pointer; }
.user-block .ub-txt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1; }
.user-block .ub-name { font-family: var(--bp-font-body); font-size: 14px; color: var(--fg); }
.user-block .ub-curs { font-family: var(--bp-font-display); font-size: 10px; letter-spacing: var(--bp-tracking-wide); text-transform: uppercase; color: var(--fg-muted); }
.avatar-sq { width: 40px; height: 40px; border-radius: 0; background: var(--bp-ink); color: #fff; flex: none;
display: inline-flex; align-items: center; justify-content: center; font-family: var(--bp-font-display); font-size: 15px; }
.user-block:hover .avatar-sq { background: #000; }
.menu--user { min-width: 300px; }
.menu-controls { display: flex; flex-direction: column; gap: 16px; padding: 10px 14px 14px; }
.mc-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.mc-label { font-family: var(--bp-font-display); font-size: 11px; letter-spacing: var(--bp-tracking-wide); text-transform: uppercase; color: var(--fg-muted); }
/* Segmented switches inside the user menu (mode + idioma) */
.menu .mode-switch, .menu .lang-switch {
display: flex; width: 100%; gap: 3px; padding: 3px;
background: var(--bg-alt); border: var(--bp-stroke-1) solid var(--border); border-radius: var(--bp-radius-pill); overflow: visible;
}
.menu .mode-switch a, .menu .mode-switch button, .menu .lang-switch button {
flex: 1; width: auto; display: inline-flex; align-items: center; justify-content: center;
padding: 7px 10px; border-radius: var(--bp-radius-pill); border: 0; background: transparent; cursor: pointer;
font-family: var(--bp-font-display); font-size: 12px; letter-spacing: .03em; color: var(--fg-muted); white-space: nowrap; transition: background .15s, color .15s;
}
.menu .mode-switch a:hover, .menu .mode-switch button:hover, .menu .lang-switch button:hover { color: var(--bp-ink); background: transparent; }
.menu .mode-switch .is-active { background: var(--bp-ink); color: #fff; }
.menu .lang-switch button.is-active { background: var(--bp-ink); color: #fff; }
/* ══════════════════════════════════════════════════════════════════
DASHBOARD
══════════════════════════════════════════════════════════════════ */
.dash { max-width: 1120px; margin: 0 auto; padding: var(--bp-space-8) var(--bp-space-8) var(--bp-space-10); }
.dash-greet { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--bp-space-6);
flex-wrap: wrap; padding-bottom: var(--bp-space-6); border-bottom: var(--bp-stroke-3) solid var(--accent); margin-bottom: var(--bp-space-8); }
.dash-greet .greet-eyebrow { display: block; margin-bottom: var(--bp-space-3); }
.dash-greet h1 { margin: 0; }
.dash-greet .greet-context { color: var(--fg-muted); margin: var(--bp-space-3) 0 0; }
.dash-block { margin-bottom: var(--bp-space-9); }
.dash-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bp-space-4);
border-bottom: var(--bp-stroke-1) solid var(--border); padding-bottom: var(--bp-space-3); margin-bottom: var(--bp-space-5); }
.dash-block-head h2 { font-size: var(--bp-fs-h3); }
.dash-block-head .count { font-family: var(--bp-font-display); font-size: var(--bp-fs-small); color: var(--fg-muted);
letter-spacing: var(--bp-tracking-wide); text-transform: uppercase; }
/* children cards */
.children-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--bp-grid-gap); }
.child-card { border: var(--bp-stroke-1) solid var(--border); background: var(--surface); padding: var(--bp-space-6);
display: flex; flex-direction: column; gap: var(--bp-space-4); }
.child-card .child-top { display: flex; align-items: center; gap: var(--bp-space-3); }
.child-card .cdot { width: 16px; height: 16px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.child-card .cname { font-family: var(--bp-font-display); font-size: var(--bp-fs-h4); }
.child-card .cmeta { color: var(--fg-muted); font-size: var(--bp-fs-small); }
.child-card .cact { font-family: var(--bp-font-body); font-size: var(--bp-fs-small); color: var(--fg);
padding-top: var(--bp-space-3); border-top: var(--bp-stroke-1) solid var(--border); }
.child-card .cact b { font-family: var(--bp-font-display); }
.child-card .btn { margin-top: auto; }
/* inscripcions actives table */
.insc { display: block; }
.insc-row { display: grid; grid-template-columns: 2.2fr 1.2fr 2fr auto; gap: var(--bp-space-4); align-items: center;
padding: var(--bp-space-4) 0; border-bottom: var(--bp-stroke-1) solid var(--border); }
.insc-row.head { padding: 0 0 var(--bp-space-3); border-bottom-color: var(--bp-grey-200); }
.insc-row.head span { font-family: var(--bp-font-display); font-size: var(--bp-fs-micro); color: var(--fg-muted);
letter-spacing: var(--bp-tracking-wide); text-transform: uppercase; }
.insc-row .act-name { font-family: var(--bp-font-display); font-size: var(--bp-fs-body); }
.insc-row .cell-label { display: none; }
.insc-row .muted { color: var(--fg-muted); font-size: var(--bp-fs-small); }
/* estat chips */
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: var(--bp-stroke-1) solid var(--border);
font-family: var(--bp-font-display); font-size: var(--bp-fs-micro); letter-spacing: var(--bp-tracking-wide);
text-transform: uppercase; color: var(--fg); white-space: nowrap; }
.chip .cdot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.chip--ok .cdot { background: var(--bp-green); }
.chip--pend .cdot { background: var(--accent); }
.chip--wait .cdot { background: var(--bp-cyan); }
/* avisos / alert cards */
.alerts { display: grid; gap: var(--bp-space-4); }
.alert-card { display: flex; align-items: flex-start; gap: var(--bp-space-4); background: var(--surface);
border: var(--bp-stroke-1) solid var(--border); border-left: var(--bp-stroke-3) solid var(--accent); padding: var(--bp-space-5) var(--bp-space-6); }
.alert-card.is-doc { border-left-color: var(--bp-ink); }
.alert-card .a-icon { color: var(--accent); flex: none; margin-top: 2px; }
.alert-card.is-doc .a-icon { color: var(--fg); }
.alert-card .a-icon svg { width: 26px; height: 26px; }
.alert-card .a-body { flex: 1; }
.alert-card .a-body h4 { margin: 0 0 4px; }
.alert-card .a-body p { margin: 0; color: var(--fg-muted); font-size: var(--bp-fs-small); }
.alert-card .a-action { margin-left: auto; flex: none; align-self: center; }
/* ── Shell / dashboard responsive ────────────────────────────────── */
@media (max-width: 1320px) {
.app-header { flex-wrap: wrap; row-gap: var(--bp-space-3); }
.burger { display: inline-flex; }
.app-nav { order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 0;
border-top: var(--bp-stroke-1) solid var(--border); margin-top: var(--bp-space-2); display: none; }
.app-nav.is-open { display: flex; }
.app-nav a { padding: 14px 0; border-bottom: var(--bp-stroke-1) solid var(--border); }
.user-chip .uname { display: none; }
}
@media (max-width: 820px) {
.dash { padding: var(--bp-space-7) var(--bp-space-5) var(--bp-space-9); }
.dash-greet h1 { font-size: var(--bp-fs-h2); }
}
@media (max-width: 640px) {
.insc-row.head { display: none; }
.insc-row { grid-template-columns: 1fr; gap: var(--bp-space-2); padding: var(--bp-space-5) 0; }
.insc-row .cell-label { display: inline; font-family: var(--bp-font-display); font-size: var(--bp-fs-micro);
color: var(--fg-muted); letter-spacing: var(--bp-tracking-wide); text-transform: uppercase; margin-right: 8px; }
.alert-card { flex-wrap: wrap; }
.alert-card .a-action { margin-left: 0; width: 100%; }
.role-switch a, .role-switch button { padding: 8px 12px; font-size: 13px; }
.header-tools { flex-wrap: wrap; justify-content: flex-end; }
}
/* ══════════════════════════════════════════════════════════════════
INSCRIPCIONS · catalog, filters, cards, modal, basket dock
══════════════════════════════════════════════════════════════════ */
.insc-page { max-width: 1280px; margin: 0 auto; padding: var(--bp-space-5) var(--bp-space-7) 116px; }
/* title + student switcher */
.insc-head { border-bottom: var(--bp-stroke-2) solid var(--accent); padding-bottom: var(--bp-space-4); margin-bottom: var(--bp-space-4); }
.insc-head .eyebrow { display: block; margin-bottom: 6px; font-size: var(--bp-fs-micro); }
.insc-head h1 { margin: 0; font-size: 38px; line-height: 0.98; }
.student-tabs { display: flex; gap: var(--bp-space-2); flex-wrap: wrap; margin-top: var(--bp-space-4); }
.student-tab { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px;
border: var(--bp-stroke-1) solid var(--border); border-radius: var(--bp-radius-pill); background: var(--surface); cursor: pointer;
box-shadow: var(--elev-1); transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.student-tab .cdot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.student-tab .st-name { font-family: var(--bp-font-display); font-size: var(--bp-fs-small); line-height: 1; }
.student-tab .st-course { color: var(--fg-muted); font-size: 12px; }
.student-tab:hover { border-color: var(--bp-grey-200); }
.student-tab.is-active { background: var(--fg); border-color: var(--fg); }
.student-tab.is-active .st-name { color: var(--bg); }
.student-tab.is-active .st-course { color: rgba(255,255,255,.72); }
/* filter bar */
/* filter bar — modern pill-chip groups */
.filter-bar { display: flex; align-items: center; gap: var(--bp-space-3); flex-wrap: wrap; margin: var(--bp-space-4) 0 var(--bp-space-5); }
.fbar-div { width: 1px; align-self: stretch; background: var(--border); margin: 2px 4px; }
.view-toggle { display: inline-flex; border: var(--bp-stroke-1) solid var(--border); border-radius: var(--bp-radius-pill); overflow: hidden; }
.view-toggle button { border: 0; background: var(--surface); color: var(--fg-muted); font-family: var(--bp-font-display);
font-size: 13px; letter-spacing: var(--bp-tracking-wide); padding: 8px 14px; display: inline-flex; align-items: center; gap: 7px; }
.view-toggle button svg { width: 15px; height: 15px; }
.view-toggle button.is-active { background: var(--accent); color: var(--on-accent); }
.chip-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.fchip { display: inline-flex; align-items: center; gap: 7px; border: var(--bp-stroke-1) solid var(--bp-grey-200); background: var(--surface);
color: var(--fg); font-family: var(--bp-font-display); font-size: 12px; padding: 7px 13px; border-radius: var(--r-sm);
cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.fchip:hover { border-color: var(--bp-grey-500); }
.fchip .cdot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
/* selected chip/group: solid ink fill + white text + floating red tick badge in the corner */
.fchip.is-active, .gchip.is-active { position: relative; background: var(--bp-ink); color: var(--bp-white); border-color: var(--bp-ink); font-weight: 700; }
.fchip.is-active::before, .gchip.is-active::before { content: ""; position: absolute; top: -6px; right: -6px; z-index: 2; width: 16px; height: 16px; border-radius: 50%; background: var(--bp-red) url("data:image/svg+xml;utf8,") center/70% no-repeat; box-shadow: 0 0 0 2px var(--surface); }
.filter-clear { margin-left: auto; align-self: center; font-size: 14px; }
/* week grid */
.catalog-wrap { }
.week-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--border); border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.week-col { background: var(--bp-grey-50); display: flex; flex-direction: column; } /* DS · Grey 50 column body */
.week-col:nth-child(even) { background: color-mix(in srgb, var(--bp-grey-50) 45%, #fff); }
.week-col.is-today { background: color-mix(in srgb, var(--accent) 5%, var(--bp-grey-50)); }
.week-col-head { padding: 10px 10px; font-family: var(--bp-font-display); font-size: 13px; letter-spacing: var(--bp-tracking-wide);
text-transform: uppercase; border-bottom: var(--bp-stroke-1) solid var(--border); color: var(--fg); background: var(--bp-grey-100); position: sticky; top: 0; z-index: 1; } /* DS · Grey 100 header band */
.week-col.is-today .week-col-head { background: color-mix(in srgb, var(--accent) 12%, var(--bp-grey-100)); color: var(--accent); }
.week-col-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 110px; }
.week-empty { color: var(--fg-muted); font-size: var(--bp-fs-micro); padding: 6px 2px; }
/* activity card */
.act-card { border: var(--bp-stroke-1) solid var(--border); border-left: 4px solid var(--cat, var(--accent)); background: var(--surface);
padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; border-radius: var(--r-md); box-shadow: var(--elev-1); transition: box-shadow .15s, transform .15s; text-align: left; width: 100%; font: inherit; color: inherit; }
.act-card:hover { box-shadow: var(--elev-2); transform: translateY(-1px); }
.act-card:active { transform: scale(0.99); }
.act-card .ac-cat { font-family: var(--bp-font-display); font-size: 11px; letter-spacing: var(--bp-tracking-wide); text-transform: uppercase; color: var(--cat, var(--accent)); }
.act-card .ac-name { font-family: var(--bp-font-display); font-size: var(--bp-fs-small); line-height: 1.05; }
.act-card .ac-meta { color: var(--fg-muted); font-size: 13px; line-height: 1.3; }
.act-card .ac-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 2px; }
.act-card .ac-price { font-family: var(--bp-font-display); font-size: 15px; }
.act-card .ac-price small { color: var(--fg-muted); font-size: 12px; }
.act-card.is-disabled { cursor: not-allowed; opacity: .6; }
.act-card.is-disabled:hover { box-shadow: none; }
.act-card .ac-reason { color: var(--accent); font-size: 12px; }
/* state pill */
.spill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-sm);
font-family: var(--bp-font-display); font-size: 11px; letter-spacing: var(--bp-tracking-wide); text-transform: uppercase; max-width: 100%; }
.spill span:not(.sd) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spill .sd { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.spill--enrolled { border-color: var(--bp-green); }
.spill--enrolled .sd { background: var(--bp-green); }
.spill--basket { border-color: var(--accent); color: var(--accent); }
.spill--basket .sd { background: var(--accent); }
.spill--full .sd { background: var(--fg-muted); }
.spill--conflict { border-color: var(--accent); color: var(--accent); }
.spill--conflict .sd { background: var(--accent); }
.spill--wait .sd { background: var(--bp-cyan); }
/* list view — one row per category, full-width activity rows */
/* list view — one column per category, same grid frame as the graella */
.list-view { display: grid; gap: 1px; background: var(--border); border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.list-cat { background: var(--bp-grey-50); display: flex; flex-direction: column; min-width: 0; }
.list-cat:nth-child(even) { background: color-mix(in srgb, var(--bp-grey-50) 45%, #fff); }
.list-cat > h3 { font-family: var(--bp-font-display); font-size: var(--bp-fs-h4); text-transform: uppercase; letter-spacing: var(--bp-tracking-wide);
color: var(--cat, var(--fg)); border-bottom: var(--bp-stroke-2) solid var(--cat, var(--border)); padding: 12px 12px 8px; margin: 0; }
.list-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 110px; }
.list-empty { color: var(--fg-muted); font-size: var(--bp-fs-micro); padding: 6px 2px; }
/* day strip (mobile) */
.day-strip { display: none; align-items: center; justify-content: space-between; gap: var(--bp-space-4);
border: var(--bp-stroke-1) solid var(--border); padding: 10px 16px; margin-bottom: var(--bp-space-5); }
.day-strip button { border: 0; background: transparent; color: var(--fg); display: inline-flex; padding: 4px; }
.day-strip button:disabled { color: var(--border); }
.day-strip button svg { width: 22px; height: 22px; }
.day-strip .ds-label { font-family: var(--bp-font-display); font-size: var(--bp-fs-h4); letter-spacing: var(--bp-tracking-wide); text-transform: uppercase; }
/* ── Modal (reusable) ────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center;
padding: var(--bp-space-5); z-index: 200; }
.modal-overlay.is-hidden { display: none; }
.modal { background: var(--surface); width: min(640px, 100%); max-height: 90vh; overflow: auto; border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-lg); box-shadow: var(--elev-4); }
.modal--wide { width: min(960px, 100%); }
.modal-head { padding: 16px 20px; border-bottom: var(--bp-stroke-1) solid var(--border);
display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bp-space-4); position: sticky; top: 0; background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.modal-head .m-cat { display: block; font-family: var(--bp-font-display); font-size: 12px; letter-spacing: var(--bp-tracking-wide);
text-transform: uppercase; color: var(--cat, var(--accent)); margin-bottom: 2px; }
.modal-head h2 { margin: 0; font-size: 28px; line-height: 1.02; }
.modal-head .m-when { font-size: 14px; color: var(--fg-muted); margin-top: 2px; }
.modal-close { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--bg-alt); border: var(--bp-stroke-1) solid var(--border);
color: var(--fg); padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.modal-close:hover { background: var(--bp-grey-200); color: var(--fg); }
.modal-close svg { width: 18px; height: 18px; }
.modal-body { padding: 16px 20px; background: var(--bg-alt); display: flex; flex-direction: column; gap: 12px; } /* DS · Grey 50 content band */
.modal-foot { padding: 12px 20px; border-top: var(--bp-stroke-1) solid var(--border);
display: flex; align-items: center; justify-content: space-between; gap: var(--bp-space-4); position: sticky; bottom: 0; background: var(--surface); }
.foot-actions { display: flex; align-items: center; gap: var(--bp-space-3); margin-left: auto; }
/* ── Checkout wizard ─────────────────────────────────────────────── */
.modal--checkout { width: min(720px, 100%); }
.stepper { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.step { display: inline-flex; align-items: center; gap: 7px; }
.step-num { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
font-family: var(--bp-font-display); font-size: 13px; border: var(--bp-stroke-1) solid var(--border); color: var(--fg-muted); background: var(--surface); }
.step-num svg { width: 14px; height: 14px; }
.step-label { font-family: var(--bp-font-display); font-size: 13px; color: var(--fg-muted); }
.step.is-active .step-num { background: var(--accent); color: #fff; border-color: var(--accent); }
.step.is-active .step-label { color: var(--fg); }
.step.is-done .step-num { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.step.is-done .step-label { color: var(--fg); }
.step-sep { width: 16px; height: 1px; background: var(--border); }
.co-group { display: flex; flex-direction: column; gap: 8px; }
.co-group + .co-group { margin-top: 4px; }
.co-group-head { display: inline-flex; }
.co-card { background: var(--surface); border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-md); box-shadow: var(--elev-1); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.co-card-head { display: flex; align-items: center; gap: 10px; }
.co-curs { color: var(--fg-muted); font-size: 12px; }
.co-subtotal { margin-left: auto; font-family: var(--bp-font-display); font-size: 14px; white-space: nowrap; }
.co-subtotal small { color: var(--fg-muted); }
.co-rows { display: flex; flex-direction: column; gap: 6px; }
.co-card .ins-row { border-color: transparent; border-left: 4px solid var(--cat, var(--accent)); background: transparent; box-shadow: none; border-radius: 0; padding: 4px 0 4px 12px; }
.totals .tot-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; }
.totals .tot-row.tot-main { font-family: var(--bp-font-display); font-size: 16px; }
.totals .tot-label { color: var(--fg-muted); font-size: 14px; }
.totals .tot-sub { font-family: var(--bp-font-display); font-size: var(--bp-fs-micro); text-transform: uppercase; letter-spacing: var(--bp-tracking-wide); color: var(--fg-muted); margin-bottom: 4px; }
.totals .tot-div { border-top: var(--bp-stroke-1) solid var(--border); margin: 8px 0; }
.checkout-total { font-family: var(--bp-font-display); font-size: 16px; white-space: nowrap; }
.checkout-total small { color: var(--fg-muted); }
.pay-fields { margin-top: 10px; }
.pay-methods { margin-bottom: 12px; }
.pay-methods .fchip { padding: 8px 14px; }
.pay-form { display: flex; flex-direction: column; gap: 10px; }
.stripe-field { display: flex; flex-direction: column; gap: 5px; }
.stripe-field > label { font-family: var(--bp-font-display); font-size: var(--bp-fs-micro); text-transform: uppercase; letter-spacing: var(--bp-tracking-wide); color: var(--fg-muted); }
.stripe-input { display: flex; align-items: center; gap: 8px; border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-sm); background: var(--surface); padding: 9px 12px; transition: border-color .15s, box-shadow .15s; }
.stripe-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.stripe-input input { border: 0; background: transparent; outline: none; flex: 1; min-width: 0; font-family: var(--bp-font-body); font-size: 15px; color: var(--fg); }
.stripe-input input::placeholder { color: var(--fg-muted); }
.stripe-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card-brands { display: flex; align-items: center; gap: 4px; flex: none; }
.card-brands svg { display: block; }
.pay-secure { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--fg-muted); font-size: 12px; }
.pay-secure svg { width: 14px; height: 14px; flex: none; }
.pay-note { margin: 10px 0 0; color: var(--fg-muted); font-size: 13px; line-height: var(--bp-lh-body); }
.pay-redirect { margin-top: 10px; display: flex; gap: 10px; align-items: flex-start; border: var(--bp-stroke-1) solid var(--border);
border-radius: var(--r-sm); background: var(--surface); padding: 10px 12px; font-size: 13px; color: var(--fg-muted); }
.pay-redirect svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.co-success { text-align: center; padding: 8px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.co-success .tick { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.co-success .tick svg { width: 28px; height: 28px; }
.co-success h3 { margin: 0; font-family: var(--bp-font-display); font-size: 22px; }
.co-success p { margin: 0; color: var(--fg-muted); font-size: 14px; line-height: var(--bp-lh-body); max-width: 46ch; }
.m-desc { line-height: var(--bp-lh-body); }
.m-card { background: var(--surface); border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-md); padding: 12px 14px; }
.m-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bp-space-3) var(--bp-space-5); }
.m-meta .mi-label { font-family: var(--bp-font-display); font-size: var(--bp-fs-micro); color: var(--fg-muted); letter-spacing: var(--bp-tracking-wide); text-transform: uppercase; }
.m-meta .mi-value { font-size: var(--bp-fs-small); margin-top: 2px; }
.mod-title-row { font-family: var(--bp-font-display); font-size: var(--bp-fs-micro); text-transform: uppercase; letter-spacing: var(--bp-tracking-wide); color: var(--fg-muted); margin-bottom: 8px; }
/* itinerari i continuïtat rail — on a white card inside the grey band */
.itinerari { background: var(--surface); border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-md); padding: 10px 14px; }
.itin-strip { display: flex; align-items: flex-start; margin-top: 8px; }
.itin-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; }
.itin-step::before { content: ""; position: absolute; top: 12px; left: -50%; width: 100%; height: 1px; background: var(--border); z-index: 0; }
.itin-step:first-child::before { display: none; }
.itin-sq { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
border: var(--bp-stroke-1) solid var(--border); background: var(--surface); color: var(--fg-muted); font-family: var(--bp-font-display); font-size: 11px; }
.itin-sq.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.itin-step.current .itin-sq { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--bp-yellow); }
.itin-step.current .itin-sq.on { background: var(--fg); border-color: var(--fg); }
.itin-sub { font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: var(--fg-muted); }
.itin-sub.on { color: var(--accent); }
/* price options as cards */
.priceopts { display: flex; flex-direction: column; gap: 8px; }
.priceopt { position: relative; display: flex; align-items: center; gap: var(--bp-space-4); background: var(--surface);
border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-md); padding: 10px 14px; cursor: pointer; }
.priceopt input { position: absolute; opacity: 0; pointer-events: none; }
.priceopt .po-main { flex: 1; min-width: 0; }
.priceopt .po-name { font-family: var(--bp-font-display); font-size: var(--bp-fs-small); }
.priceopt .po-sub { display: block; color: var(--fg-muted); font-size: 13px; margin-top: 2px; }
.priceopt .po-price { font-family: var(--bp-font-display); font-size: 16px; white-space: nowrap; }
.priceopt.is-sel { border-color: var(--fg); box-shadow: var(--elev-2), inset 0 0 0 1px var(--fg); }
.priceopt.is-disabled { opacity: .45; cursor: not-allowed; }
.priceopt--rec { background: var(--fg); border-color: var(--fg); color: #fff; }
.priceopt--rec .po-sub { color: rgba(255,255,255,.72); }
.priceopt--rec.is-sel { border-color: var(--fg); box-shadow: var(--elev-2), inset 0 0 0 2px var(--accent); }
.mod-hint { color: var(--fg-muted); font-size: 13px; }
.conflict-msg { display: flex; gap: 10px; align-items: flex-start; color: var(--accent); border: var(--bp-stroke-1) solid var(--accent);
padding: 12px 14px; font-size: 14px; line-height: 1.3; }
.conflict-msg svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
/* ── Basket dock ─────────────────────────────────────────────────── */
.basket-dock { position: fixed; left: 16px; right: 16px; bottom: 16px; background: var(--surface); border: var(--bp-stroke-1) solid var(--border);
border-radius: var(--r-lg); display: flex; align-items: center; gap: 6px; padding: 8px 10px; z-index: 150; box-shadow: var(--elev-3); }
.dock-seg-wrap { position: relative; }
.dock-seg { display: inline-flex; align-items: center; gap: 9px; background: transparent; border: 0; border-radius: var(--bp-radius-pill);
padding: 9px 16px; font-family: var(--bp-font-display); font-size: 15px; color: var(--fg); cursor: pointer; transition: background .15s; }
.dock-seg:hover { background: var(--bg-muted); }
.count-badge { min-width: 22px; height: 22px; padding: 0 7px; background: var(--accent); color: #fff; border-radius: var(--bp-radius-pill);
font-family: var(--bp-font-display); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.count-badge.is-zero { background: var(--border); color: var(--fg-muted); }
.dock-actions { margin-left: auto; display: flex; align-items: center; gap: var(--bp-space-4); padding-right: 4px; }
.basket-total { font-family: var(--bp-font-display); font-size: 15px; white-space: nowrap; }
.basket-total small { color: var(--fg-muted); }
.basket-popover { position: absolute; bottom: calc(100% + 12px); left: 0; width: 360px; max-width: 86vw; background: var(--surface);
border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-md); box-shadow: var(--elev-4); padding: var(--bp-space-5); display: none; } /* DS · Grey 100 border */
.basket-popover.is-open { display: block; }
.basket-popover h4 { margin: 0 0 var(--bp-space-4); font-size: var(--bp-fs-micro); text-transform: uppercase; letter-spacing: var(--bp-tracking-wide); color: var(--fg-muted); }
.bp-item { display: flex; gap: 12px; align-items: flex-start; padding: 7px 0; }
.bp-item .bp-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; }
.bp-item .bp-main { flex: 1; }
.bp-item .bp-name { font-family: var(--bp-font-display); font-size: 15px; }
.bp-item .bp-sub { color: var(--fg-muted); font-size: 13px; }
.bp-item .bp-price { font-family: var(--bp-font-display); font-size: 14px; }
.bp-item .bp-remove { border: 0; background: transparent; color: var(--fg-muted); padding: 2px; }
.bp-item .bp-remove:hover { color: var(--accent); }
.bp-item .bp-remove svg { width: 16px; height: 16px; }
.bp-empty { color: var(--fg-muted); font-size: 14px; padding: 4px 0; }
.bp-foot { margin-top: var(--bp-space-4); padding-top: var(--bp-space-4); border-top: var(--bp-stroke-1) solid var(--border); }
/* inscription rows (popovers) */
.ins-list { display: flex; flex-direction: column; gap: 8px; }
.ins-row { border: var(--bp-stroke-1) solid var(--border); border-left: 4px solid var(--cat, var(--accent)); background: var(--surface);
border-radius: var(--r-sm); box-shadow: var(--elev-1); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.ins-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ins-name { font-family: var(--bp-font-display); font-size: 15px; }
.ins-price { font-family: var(--bp-font-display); font-size: 14px; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.ins-price .inc { color: var(--fg-muted); font-family: var(--bp-font-body); font-size: 13px; }
.ins-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ins-tag { display: inline-flex; align-items: center; gap: 6px; border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-sm);
padding: 2px 7px; font-family: var(--bp-font-display); font-size: 10px; letter-spacing: var(--bp-tracking-wide); text-transform: uppercase; color: var(--fg); }
.ins-sq { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.ins-when { color: var(--fg-muted); font-size: 12px; }
.ins-baixa { margin-left: auto; border: 0; background: transparent; color: var(--fg-muted); font-family: var(--bp-font-body); font-size: 12px;
cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 0; }
.ins-baixa:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.ins-baixa svg { width: 13px; height: 13px; }
.ins-chip-pending { margin-left: auto; display: inline-flex; align-items: center; border: var(--bp-stroke-1) solid var(--bp-grey-200);
background: color-mix(in srgb, var(--bp-yellow) 20%, #fff); color: var(--fg); border-radius: var(--r-sm); padding: 2px 8px;
font-family: var(--bp-font-display); font-size: 10px; letter-spacing: var(--bp-tracking-wide); text-transform: uppercase; }
.ins-row.is-pending { opacity: .6; }
.baixa-textarea { width: 100%; margin-top: 8px; border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-sm); background: var(--surface);
color: var(--fg); font-family: var(--bp-font-body); font-size: 15px; line-height: var(--bp-lh-body); padding: 10px 12px; min-height: 92px; resize: vertical; outline: none; }
.baixa-textarea:focus { border-color: var(--accent); }
.baixa-textarea::placeholder { color: var(--fg-muted); }
.ws-baixa { margin-top: 5px; border: 0; background: transparent; color: var(--fg-muted); font-family: var(--bp-font-body); font-size: 11px; cursor: pointer; padding: 0; }
.ws-baixa:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.ws-tag--pend { color: var(--fg); border-color: var(--bp-grey-200); background: color-mix(in srgb, var(--bp-yellow) 20%, #fff); }
.ws-block.is-pending { opacity: .6; }
.ins-remove { border: 0; background: transparent; color: var(--fg-muted); padding: 2px; display: inline-flex; }
.ins-remove:hover { color: var(--accent); }
.ins-remove svg { width: 16px; height: 16px; }
/* weekly schedule modal */
.legend { display: flex; flex-wrap: wrap; gap: var(--bp-space-5); margin-bottom: var(--bp-space-4); }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.legend-item .cdot { width: 12px; height: 12px; border-radius: 50%; }
.wsched { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--border); border: var(--bp-stroke-1) solid var(--border); }
.ws-col { background: var(--bp-grey-50); display: flex; flex-direction: column; }
.ws-col:nth-child(even) { background: color-mix(in srgb, var(--bp-grey-50) 45%, #fff); }
.ws-col.is-today { background: color-mix(in srgb, var(--accent) 5%, var(--bp-grey-50)); }
.ws-col-head { padding: 10px 8px; font-family: var(--bp-font-display); font-size: 12px; letter-spacing: var(--bp-tracking-wide); text-transform: uppercase; border-bottom: var(--bp-stroke-1) solid var(--border); background: var(--bp-grey-100); color: var(--fg); } /* DS · Grey 100 header band */
.ws-col.is-today .ws-col-head { background: color-mix(in srgb, var(--accent) 12%, var(--bp-grey-100)); color: var(--accent); }
.ws-col-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 90px; }
.ws-block { border: var(--bp-stroke-1) solid var(--border); border-left: 4px solid var(--who, var(--accent)); background: var(--surface); border-radius: var(--r-sm); box-shadow: var(--elev-1); padding: 7px 9px; }
.ws-block .wb-time { font-family: var(--bp-font-display); font-size: 11px; color: var(--fg-muted); }
.ws-block .wb-name { font-family: var(--bp-font-display); font-size: 14px; line-height: 1.05; margin: 1px 0; }
.ws-block .wb-who { font-size: 12px; color: var(--fg-muted); }
.ws-block.is-new { border-style: dashed; }
.ws-tag { display: inline-block; margin-top: 4px; font-family: var(--bp-font-display); font-size: 10px; letter-spacing: var(--bp-tracking-wide);
text-transform: uppercase; color: var(--accent); border: var(--bp-stroke-1) solid var(--accent); padding: 1px 6px; }
@media (max-width: 900px) {
.insc-page { padding: var(--bp-space-7) var(--bp-space-5) 172px; }
.m-meta { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.week-grid { grid-template-columns: 1fr; }
.week-col { display: none; }
.week-col.is-active-day { display: flex; }
.week-col-head { display: none; }
.day-strip { display: flex; }
.wsched { grid-template-columns: 1fr 1fr; }
.list-view { grid-template-columns: 1fr 1fr !important; }
.basket-cell { padding: 12px 16px; }
.dock-seg { padding: 8px 12px; font-size: 14px; }
.dock-actions .btn { padding: 12px 18px; font-size: 15px; }
.basket-total { display: none; }
}
@media (max-width: 520px) {
.basket-dock { left: 8px; right: 8px; bottom: 8px; flex-wrap: wrap; }
.dock-actions { width: 100%; margin-left: 0; justify-content: flex-end; }
.dock-actions .btn { flex: 1; }
}
/* ══════════════════════════════════════════════════════════════════
ADMIN — GNA port · area tabs · sidebar master-detail
══════════════════════════════════════════════════════════════════ */
.area-nav { display: flex; align-items: center; gap: 28px; }
.area-nav button {
font-family: var(--bp-font-display); font-size: 13px; letter-spacing: var(--bp-tracking-wide); text-transform: uppercase;
padding: 0 2px; background: transparent; color: var(--fg-muted); border: 0; cursor: pointer;
border-bottom: 2px solid transparent; margin-bottom: -17px; padding-bottom: 15px;
}
.area-nav button:hover { color: var(--bp-ink); }
.area-nav button.is-active { color: var(--bp-ink); border-bottom-color: var(--accent); font-weight: 700; }
.area-nav button { display: inline-flex; align-items: center; gap: 7px; }
.area-nav button svg { width: 15px; height: 15px; }
.adm-layout {
display: grid; grid-template-columns: 264px minmax(0, 1fr);
gap: var(--bp-space-6); align-items: start;
max-width: 1400px; margin: 0 auto;
padding: var(--bp-space-6);
}
/* ── Sidebar ── */
.adm-side {
position: sticky; top: 88px;
background: var(--surface); border: var(--bp-stroke-1) solid var(--border);
border-radius: var(--r-lg); box-shadow: var(--elev-1);
padding: 10px; display: flex; flex-direction: column; gap: 2px;
}
.side-item {
display: flex; align-items: center; gap: 11px;
padding: 9px 12px; border-radius: var(--r-sm);
font-size: var(--bp-fs-small); color: var(--bp-ink);
cursor: pointer; user-select: none;
}
.side-item:hover { background: var(--bg-alt); text-decoration: none; }
.side-item.is-active { background: var(--accent); color: var(--bp-white); }
.side-sec { display: flex; flex-direction: column; gap: 2px; }
.side-sec + .side-sec, .side-item + .side-sec, .side-sec + .side-item { margin-top: 10px; }
.side-label {
display: block; padding: 4px 12px 4px;
font-family: var(--bp-font-display); font-size: 10px; letter-spacing: .08em;
text-transform: uppercase; color: var(--fg-muted);
}
/* ── Content panel ── */
.adm-content { min-width: 0; display: flex; flex-direction: column; gap: var(--bp-space-5); }
.adm-title { position: sticky; top: var(--adm-header-h); z-index: 40;
display: flex; align-items: center; justify-content: space-between; gap: var(--bp-space-4); flex-wrap: wrap;
background: var(--bp-grey-50); border-bottom: 2px solid var(--accent); padding: var(--bp-space-5) 0 12px; }
.adm-title-l { display: flex; align-items: baseline; gap: var(--bp-space-4); flex-wrap: wrap; min-width: 0; }
.adm-title h1 { font-size: 32px; line-height: 1.02; margin: 0; }
.adm-title .where { font-size: var(--bp-fs-small); color: var(--fg-muted); }
/* Editor actions live on the (sticky) title bar — top-only, replacing the old floating footer */
.adm-actions { display: flex; align-items: center; gap: 16px; flex: none; }
.adm-actions .lang-tabs { margin-bottom: 0; }
/* KPI cards */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--bp-space-4); }
.kpi {
background: var(--surface); border: var(--bp-stroke-1) solid var(--border);
border-radius: var(--r-md); box-shadow: var(--elev-1); padding: 14px 16px;
}
.kpi .k-label { font-family: var(--bp-font-display); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.kpi .k-value { font-family: var(--bp-font-display); font-size: 34px; line-height: 1.05; margin-top: 6px; }
.kpi .k-sub { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
/* Module toolbar */
.mod-bar { display: flex; align-items: center; gap: var(--bp-space-4); flex-wrap: wrap; }
.mod-bar .search {
display: flex; align-items: center; gap: 8px; flex: 1 1 220px; max-width: 360px;
background: var(--surface); border: var(--bp-stroke-1) solid var(--border);
border-radius: var(--bp-radius-pill); padding: 8px 14px; box-shadow: var(--elev-1);
}
.mod-bar .search svg { width: 15px; height: 15px; color: var(--fg-muted); flex: none; }
.mod-bar .search input { border: 0; outline: 0; background: transparent; width: 100%; font-size: var(--bp-fs-small); font-family: inherit; color: var(--bp-ink); }
.mod-bar .spacer { flex: 1; }
/* Activity list */
.acts-group { background: var(--surface); border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-lg); box-shadow: var(--elev-1); overflow: hidden; }
.acts-group + .acts-group { margin-top: var(--bp-space-4); }
.acts-group > header {
display: flex; align-items: center; gap: 10px; padding: 12px 18px;
background: var(--bg-alt); border-bottom: var(--bp-stroke-1) solid var(--rule);
font-family: var(--bp-font-display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.acts-group > header .cdot { width: 9px; height: 9px; }
.act-row {
display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(140px, 1fr) 110px 90px 150px auto;
gap: var(--bp-space-4); align-items: center;
padding: 12px 18px; border-left: 4px solid var(--cat, var(--rule));
}
.act-row + .act-row { border-top: var(--bp-stroke-1) solid var(--rule); }
.act-row:hover { background: var(--bg-alt); }
.act-row .a-name { font-weight: 700; }
.act-row .a-meta, .act-row .a-preu { font-size: var(--bp-fs-small); color: var(--fg-muted); }
.act-row .a-preu b { color: var(--bp-ink); font-size: 15px; }
.act-row .a-places { font-size: var(--bp-fs-small); }
.act-row .a-places .bar { height: 4px; border-radius: 2px; background: var(--rule); margin-top: 5px; overflow: hidden; }
.act-row .a-places .bar i { display: block; height: 100%; background: var(--bp-ink); }
.act-row .a-places.is-full .bar i { background: var(--accent); }
.state-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.schip {
font-family: var(--bp-font-display); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
border: var(--bp-stroke-1) solid var(--border); border-radius: var(--bp-radius-pill);
padding: 3px 9px; color: var(--fg-muted); background: var(--surface);
}
.schip.on { border-color: #B7D9A5; background: #F1F8EC; color: #4D7544; }
.schip.draft { border-color: #EFD9A7; background: #FBF4E4; color: #9A7B2D; }
.row-actions { display: flex; gap: 2px; justify-content: flex-end; }
.row-actions button {
border: 0; background: transparent; color: var(--fg-muted); cursor: pointer;
width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center;
}
.row-actions button:hover { background: var(--bg-alt); color: var(--bp-ink); }
.row-actions button.danger:hover { color: var(--accent); }
.row-actions svg { width: 15px; height: 15px; }
/* Placeholder */
.placeholder {
background: var(--surface); border: 1px dashed var(--bp-grey-200); border-radius: var(--r-lg);
padding: 48px 32px; text-align: center; color: var(--fg-muted);
}
.placeholder .ph-icon { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--bp-grey-200); }
.placeholder h2 { font-size: 22px; color: var(--bp-ink); margin: 0 0 6px; }
/* View-as toggle inside profile menu */
.mode-switch { display: inline-flex; border: var(--bp-stroke-1) solid var(--border); border-radius: var(--bp-radius-pill); overflow: hidden; }
.mode-switch a, .mode-switch button {
font-size: 12px; padding: 6px 12px; background: var(--surface); color: var(--fg-muted); border: 0; cursor: pointer;
}
.mode-switch .is-active { background: var(--bp-ink); color: var(--bp-white); }
.mode-switch a:hover { text-decoration: none; color: var(--bp-ink); }
/* Tablet — keep the sidebar, just narrower */
@media (max-width: 1024px) {
.adm-layout { grid-template-columns: 200px minmax(0, 1fr); gap: var(--bp-space-4); padding: var(--bp-space-4); }
.kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
.act-row { grid-template-columns: 1fr auto; grid-auto-flow: dense; }
.act-row .a-meta, .act-row .a-places, .act-row .a-preu { grid-column: 1 / -1; }
}
/* Module sub-tabs (content-area navigation within a gestió) */
.sub-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.sub-tabs button {
font-family: var(--bp-font-body); font-size: var(--bp-fs-small);
border: var(--bp-stroke-1) solid var(--border); border-radius: var(--bp-radius-pill);
background: var(--surface); color: var(--bp-ink); padding: 8px 16px; cursor: pointer;
box-shadow: var(--elev-1);
}
.sub-tabs button:hover { border-color: var(--bp-grey-200); }
.sub-tabs button.is-active { background: var(--accent); border-color: var(--accent); color: var(--bp-white); }
.side-item svg { width: 17px; height: 17px; flex: none; color: var(--fg-muted); }
.side-item:hover svg { color: var(--bp-ink); }
.side-item.is-active svg { color: var(--bp-white); }
/* ── Generic catalog (Etapes/Cursos/Material/…) ─────────────────── */
.cat-card { background: var(--surface); border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-lg); box-shadow: var(--elev-1); overflow: hidden; }
.cat-row {
display: flex; align-items: center; gap: 14px; padding: 10px 16px;
}
.cat-row + .cat-row { border-top: var(--bp-stroke-1) solid var(--rule); }
.cat-row:hover { background: var(--bg-alt); }
.cat-row.is-dragging { opacity: .4; }
.cat-row .drag { cursor: grab; color: var(--bp-grey-200); display: grid; place-items: center; }
.cat-row .drag:hover { color: var(--fg-muted); }
.cat-row .drag svg { width: 14px; height: 14px; }
.cat-row .c-name { font-weight: 700; flex: 1; min-width: 0; }
.cat-row .c-name small { display: block; font-weight: 400; color: var(--fg-muted); }
.cat-row .schip { cursor: pointer; }
.cat-confirm { display: flex; align-items: center; gap: 8px; font-size: var(--bp-fs-small); color: var(--accent); }
.cat-confirm button { border: 0; background: transparent; cursor: pointer; font-size: var(--bp-fs-small); padding: 4px 8px; border-radius: var(--r-sm); }
.cat-confirm .yes { color: var(--bp-white); background: var(--accent); border-radius: var(--bp-radius-pill); padding: 4px 12px; }
.cat-confirm .no { color: var(--fg-muted); }
/* Catalog editor */
.cat-editor { background: var(--surface); border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-lg); box-shadow: var(--elev-1); padding: 20px 24px; max-width: 720px; }
/* Boxy DS segmented control (connected, square, ink-active) — matches .lang-switch, not pills */
.lang-tabs { display: inline-flex; border: var(--bp-stroke-1) solid var(--bp-grey-100); border-radius: 0; overflow: hidden; margin-bottom: 14px; }
.lang-tabs button {
font-family: var(--bp-font-display); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
border: 0; background: var(--surface); color: var(--fg-muted); padding: 7px 12px; cursor: pointer;
}
.lang-tabs button + button { border-left: var(--bp-stroke-1) solid var(--bp-grey-100); }
.lang-tabs button.is-active { background: var(--bp-ink); color: var(--bp-white); }
.cat-editor .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.cat-editor .form-actions { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.editor-back { display: inline-flex; align-items: center; gap: 8px; font-size: var(--bp-fs-small); margin-bottom: 14px; }
.editor-back svg { width: 14px; height: 14px; }
/* Catalog: file attachments */
.cat-row .clip {
display: inline-flex; align-items: center; gap: 5px;
border: 0; background: transparent; color: var(--fg-muted); cursor: pointer;
font-size: 12px; padding: 4px 8px; border-radius: var(--bp-radius-pill);
}
.cat-row .clip:hover { background: var(--bg-alt); color: var(--bp-ink); }
.cat-row .clip svg { width: 14px; height: 14px; }
.file-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.file-chip {
display: inline-flex; align-items: center; gap: 7px;
background: var(--bg-alt); border: var(--bp-stroke-1) solid var(--border);
border-radius: var(--bp-radius-pill); padding: 6px 12px; font-size: var(--bp-fs-small);
}
.file-chip svg { width: 13px; height: 13px; color: var(--fg-muted); }
.file-chip button { border: 0; background: transparent; color: var(--fg-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.file-chip button:hover { color: var(--accent); }
/* ── Horaris/Franges slot cards ─────────────────────────────────── */
.slots { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.slots-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.slot-card { background: var(--bg-alt); border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-md); padding: 18px 20px; }
.slot-card.is-collapsed { padding-bottom: 18px; }
.slot-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.slot-head b { font-size: var(--bp-fs-small); flex: 1; cursor: pointer; }
.slot-card.is-collapsed .slot-head { margin-bottom: 0; }
.slot-toggle { border: 0; background: transparent; color: var(--fg-muted); cursor: pointer; width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; }
.slot-toggle:hover { color: var(--bp-ink); background: var(--surface); }
.slot-toggle svg { width: 16px; height: 16px; transition: transform .18s ease; }
.slot-card.is-collapsed .slot-toggle svg { transform: rotate(-90deg); }
.slot-body { display: block; }
.slot-card.is-collapsed .slot-body { display: none; }
.slot-del { border: 0; background: transparent; color: var(--fg-muted); cursor: pointer; width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; }
.slot-del:hover { color: var(--accent); background: var(--surface); }
.slot-del svg { width: 14px; height: 14px; }
.slot-sec { display: flex; gap: 16px; align-items: flex-start; margin-top: 18px; padding-top: 18px; border-top: var(--bp-stroke-1) solid var(--rule); }
.slot-sec:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.slot-lbl { font-family: var(--bp-font-display); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bp-grey-700); flex: none; width: 74px; padding-top: 6px; }
.slot-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.slot-checks { display: flex; flex-direction: column; gap: 8px; }
.chips-wrap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chips-div { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.gchip {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
font-family: var(--bp-font-display); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
border: var(--bp-stroke-1) solid var(--bp-grey-200); border-radius: var(--r-sm);
background: var(--surface); color: var(--fg-muted); padding: 5px 11px; cursor: pointer;
}
.fchip--xs { font-size: 12px; padding: 4px 10px; }
.day-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.day-cell { display: flex; align-items: center; gap: 8px; background: var(--surface); border: var(--bp-stroke-1) solid var(--bp-grey-200); border-radius: var(--r-sm); padding: 5px 10px 5px 6px; }
.day-cell.is-on { padding-right: 12px; }
.day-cell:not(.is-on) { background: transparent; border-style: dashed; }
.day-cell input[type="time"] { border: 0; background: transparent; font-family: inherit; font-size: 12.5px; color: var(--bp-ink); width: 74px; outline: 0; }
.day-cell .tsep { color: var(--fg-muted); }
/* ── Activitat editor ───────────────────────────────────────────── */
.act-editor { display: flex; flex-direction: column; gap: var(--bp-space-4); max-width: none; } /* fill content width (was 860 → card narrower than the title, wasted space on the right) */
.ed-card { background: var(--surface); border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-lg); box-shadow: var(--elev-1); padding: 18px 22px; }
.ed-card > h3 { margin: 0 0 14px; font-size: 15px; letter-spacing: var(--bp-tracking-wide); text-transform: uppercase; font-family: var(--bp-font-display); color: var(--fg-muted); font-weight: 700; }
.ed-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ed-card-head > h3 { margin: 0; }
.ed-card-head .lang-tabs { margin-bottom: 0; }
/* Single-choice segmented control — reuses the lang-switch pattern (connected, dark active, NO tick) */
.seg-pills { display: inline-flex; flex-wrap: wrap; width: fit-content; max-width: 100%; align-self: flex-start; border: var(--bp-stroke-1) solid var(--bp-grey-200); border-radius: var(--r-sm); overflow: hidden; }
.seg-pills button {
border: 0; background: var(--bp-white); color: var(--bp-grey-500);
font-family: var(--bp-font-display); font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
padding: 7px 14px; cursor: pointer; transition: background .15s, color .15s;
}
.seg-pills button + button { border-left: var(--bp-stroke-1) solid var(--bp-grey-200); }
.seg-pills button:hover:not(.is-active) { color: var(--bp-ink); }
.seg-pills button.is-active { background: var(--bp-ink); color: var(--bp-white); }
.dt-pair { display: flex; align-items: center; gap: 8px; border-bottom: var(--bp-stroke-1) solid var(--rule); padding-bottom: 8px; }
.dt-pair:focus-within { border-bottom-color: var(--accent); }
.dt-pair input { border: 0 !important; background: transparent; font-family: inherit; font-size: 15px; color: var(--bp-ink); padding: 4px 0; outline: 0; }
.rt-toolbar { display: flex; gap: 2px; border: var(--bp-stroke-1) solid var(--border); border-bottom: 0; border-radius: var(--r-sm) var(--r-sm) 0 0; padding: 6px; background: var(--bg-alt); }
.rt-toolbar button { border: 0; background: transparent; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; color: var(--bp-ink); font-size: 13px; }
.rt-toolbar button:hover { background: var(--surface); }
.rt-area { border: var(--bp-stroke-1) solid var(--border); border-radius: 0 0 var(--r-sm) var(--r-sm); min-height: 120px; padding: 12px 14px; font-size: 15px; line-height: 1.5; outline: 0; background: var(--surface); }
.rt-area:focus { border-color: var(--bp-grey-500); }
.slot-extra { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.slot-extra .mini { display: flex; align-items: center; gap: 6px; font-size: var(--bp-fs-small); color: var(--fg-muted); }
.slot-extra input[type="number"] { width: 76px; border: 0; border-bottom: var(--bp-stroke-1) solid var(--rule); background: transparent; font-family: inherit; font-size: 14px; padding: 3px 0; outline: 0; }
.slot-extra input[type="number"]:focus { border-bottom-color: var(--accent); }
.slot-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fg-muted); cursor: pointer; }
.slot-check input { accent-color: var(--accent); }
/* Toggle rows with a helper line (Horaris/Preus editor) */
.slot-checks .slot-check { align-items: flex-start; }
.slot-checks .slot-check > input { margin-top: 2px; flex: none; }
.slot-checks .slot-check > span { display: block; color: var(--bp-ink); font-weight: 600; }
.slot-checks .slot-check > span small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--fg-muted); line-height: 1.4; }
/* Standalone checkbox row with helper line (activity editor: Competició, etc.) */
.field .chk-row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; margin-top: 6px;
font-family: var(--bp-font-body); font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--fg); }
.field .chk-row > input { margin-top: 1px; flex: none; width: auto; accent-color: var(--bp-red); }
.field .chk-row > span small { display: block; margin-top: 2px; font-size: 11px; color: var(--fg-muted); line-height: 1.4; }
/* Descompte input + mode (% / € fix) — input flexes, mode selector fixed */
.preu-tier { display: flex; gap: 6px; align-items: stretch; }
.preu-tier > input { flex: 1 1 auto; width: auto; min-width: 0; }
.preu-tier > .preu-mode { flex: none; width: auto; border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--fg-muted); font-family: var(--bp-font-body); font-size: 12px; padding: 0 6px; cursor: pointer; }
.ed-actions { display: flex; align-items: center; gap: 16px; }
/* (Removed the floating save bar — editor actions now sit on the sticky title bar, top-only) */
@media (max-width: 560px) {
.save-bar { left: 8px; right: 8px; bottom: 8px; }
.sb-main { flex-wrap: wrap; }
.sb-right { width: 100%; margin-left: 0; justify-content: flex-end; }
}
/* ── Usuaris · DataTable ─────────────────────────────────────────── */
.dtable-wrap { background: var(--surface); border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-lg); box-shadow: var(--elev-1); overflow: hidden; }
.dtable { width: 100%; border-collapse: collapse; font-size: var(--bp-fs-small); }
.dtable thead th {
text-align: left; font-family: var(--bp-font-display); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
color: var(--fg-muted); background: var(--bg-alt); padding: 11px 14px; border-bottom: var(--bp-stroke-1) solid var(--border); white-space: nowrap;
}
.dtable tbody td { padding: 11px 14px; border-bottom: var(--bp-stroke-1) solid var(--rule); color: var(--bp-ink); vertical-align: middle; }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr { cursor: pointer; transition: background .12s; }
.dtable tbody tr:hover td { background: var(--bg-alt); }
.dt-code { font-family: var(--bp-font-display); color: var(--accent); }
.dt-name { font-weight: 600; }
.dt-cat { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.dtbl-table .a-places { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dtbl-table .a-places .bar { position: static; display: inline-block; width: 54px; height: 5px; border-radius: 2px; background: var(--bp-grey-100); overflow: hidden; vertical-align: middle; flex: none; }
.dtbl-table .a-places .bar i { display: block; height: 100%; background: var(--bp-ink); }
.dtbl-table .a-places.is-full .bar i { background: var(--accent); }
.dtbl-table .a-preu { white-space: nowrap; }
.dtbl-table .state-chips { display: inline-flex; gap: 6px; }
.dt-mail { color: var(--fg-muted); }
.dt-act { text-align: right; width: 1%; white-space: nowrap; }
.dt-act button { border: 0; background: transparent; color: var(--fg-muted); cursor: pointer; width: 30px; height: 30px; border-radius: var(--r-sm); display: inline-grid; place-items: center; }
.dt-act button:hover { color: var(--accent); background: var(--surface); }
.dt-act svg { width: 16px; height: 16px; }
.vbadge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--bp-font-display); font-size: 11px; letter-spacing: .03em; padding: 3px 10px 3px 8px; border-radius: var(--bp-radius-pill); white-space: nowrap; }
.vbadge svg { width: 13px; height: 13px; }
.vbadge.yes { background: rgba(77,117,68,.12); color: #4D7544; }
.vbadge.no { background: rgba(255,0,0,.10); color: var(--bp-red); }
.per-page { font-size: var(--bp-fs-small); color: var(--fg-muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.per-page select { border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-sm); background: var(--surface); font-family: inherit; font-size: 13px; padding: 5px 8px; color: var(--bp-ink); }
.dt-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.dt-pager { display: flex; align-items: center; gap: 12px; }
.dt-pageno { font-size: var(--bp-fs-small); color: var(--fg-muted); }
.dtable .dt-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dtable td .cdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.btn:disabled { opacity: .45; cursor: default; }
select:disabled { opacity: .55; cursor: default; }
/* ── Info bar (SES / scope notes) ────────────────────────────────── */
.info-bar { display: flex; align-items: flex-start; gap: 9px; background: var(--bg-alt); border: var(--bp-stroke-1) solid var(--border);
border-radius: var(--r-md); padding: 11px 14px; font-size: 13px; color: var(--fg-muted); line-height: 1.5; }
.info-bar svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--fg-muted); }
.info-bar b { color: var(--bp-ink); }
/* ── Comunicacions · templates master-detail ─────────────────────── */
.tmpl-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--bp-space-5); align-items: start; }
.tmpl-list { background: var(--surface); border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-lg); box-shadow: var(--elev-1); overflow: hidden; }
.tmpl-item { padding: 12px 14px; border-bottom: var(--bp-stroke-1) solid var(--rule); cursor: pointer; }
.tmpl-item:last-child { border-bottom: 0; }
.tmpl-item:hover { background: var(--bg-alt); }
.tmpl-item.is-active { background: #FFF7F7; border-left: 3px solid var(--accent); padding-left: 11px; }
.tmpl-item b { font-family: var(--bp-font-display); font-size: 14px; display: block; color: var(--bp-ink); }
.tmpl-item .sub { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.tmpl-editor { background: var(--surface); border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-lg); box-shadow: var(--elev-1); padding: 18px 22px; }
.tmpl-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.tmpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bp-space-5); align-items: start; }
.tmpl-body { width: 100%; min-height: 220px; font-family: var(--bp-font-mono, ui-monospace, monospace); font-size: 13.5px; line-height: 1.6;
border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; resize: vertical; outline: 0; background: var(--surface); color: var(--bp-ink); }
.tmpl-body:focus { border-color: var(--bp-grey-500); }
.ph-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-chip { font-family: var(--bp-font-mono, ui-monospace, monospace); font-size: 12.5px; background: var(--bp-ink); color: var(--bp-white);
border: 0; border-radius: var(--bp-radius-pill); padding: 5px 11px; cursor: pointer; }
.ph-chip:hover { opacity: .9; }
.tmpl-preview { border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.tmpl-preview__hd { background: var(--bg-alt); padding: 10px 14px; border-bottom: var(--bp-stroke-1) solid var(--rule); font-size: 13.5px; color: var(--bp-ink); }
.tmpl-preview__hd .sub { color: var(--fg-muted); font-size: 12.5px; margin-top: 3px; }
.tmpl-preview__bd { padding: 16px; font-size: 14px; line-height: 1.6; color: var(--bp-ink); }
.tmpl-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 18px; }
@media (max-width: 1000px) { .tmpl-layout { grid-template-columns: 1fr; } .tmpl-grid { grid-template-columns: 1fr; } }
/* ── Configuració global ─────────────────────────────────────────── */
.cfg-langs { display: flex; flex-wrap: wrap; gap: 16px; }
.cat-card .cat-row .btn { margin-left: auto; }
/* Dies festius · calendar picker */
.fest-wrap { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--bp-space-5); align-items: start; }
.cal { border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-md); padding: 12px; background: var(--surface); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-title { font-family: var(--bp-font-display); font-size: 14px; color: var(--bp-ink); }
.cal-nav { border: var(--bp-stroke-1) solid var(--border); background: var(--surface); width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; cursor: pointer; color: var(--fg-muted); }
.cal-nav:hover { color: var(--bp-ink); background: var(--bg-alt); }
.cal-nav svg { width: 15px; height: 15px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-family: var(--bp-font-display); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); padding-bottom: 4px; }
.cal-cell { aspect-ratio: 1; border: 0; background: transparent; border-radius: var(--r-sm); font-family: inherit; font-size: 13px; color: var(--bp-ink); cursor: pointer; display: grid; place-items: center; }
.cal-cell:hover { background: var(--bg-alt); }
.cal-cell--empty { pointer-events: none; }
.cal-cell.is-fest { background: var(--accent); color: #fff; font-weight: 700; }
.fest-side { padding-top: 4px; }
.fest-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@media (max-width: 720px) { .fest-wrap { grid-template-columns: 1fr; } }
/* ── Rols i permisos · matriu ────────────────────────────────────── */
.scope-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; font-size: 12.5px; color: var(--fg-muted); }
.scope-legend .sl-txt { margin-right: 6px; }
.scope { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 3px 8px; border-radius: var(--r-sm);
font-family: var(--bp-font-display); font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.scope--yes, .scope--y { background: rgba(46,107,39,.18); color: #276022; }
.scope--read, .scope--r { background: rgba(94,45,198,.18); color: #4A22A8; }
.scope--part, .scope--a, .scope--p, .scope--d, .scope--v, .scope--g { background: rgba(184,84,15,.20); color: #A64B0C; }
.scope--no, .scope--none { background: transparent; color: var(--bp-grey-500); }
/* Scope select cells in the matrix — Design System accents only */
.scope-sel { border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-sm); font-family: var(--bp-font-display); font-size: 11px; font-weight: 700; padding: 4px 4px; cursor: pointer; background: var(--surface); color: var(--bp-grey-700); max-width: 96px; }
.scope-sel--y { background: rgba(46,107,39,.18); color: #276022; border-color: rgba(46,107,39,.45); }
.scope-sel--r { background: rgba(94,45,198,.18); color: #4A22A8; border-color: rgba(94,45,198,.4); }
.scope-sel--a, .scope-sel--p, .scope-sel--d, .scope-sel--v, .scope-sel--g { background: rgba(184,84,15,.20); color: #A64B0C; border-color: rgba(184,84,15,.45); }
.scope-sel--none { color: var(--bp-grey-500); }
.rmatrix-wrap { overflow-x: auto; border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-lg); box-shadow: var(--elev-1); background: var(--surface); }
.rmatrix { border-collapse: collapse; font-size: 12.5px; min-width: 100%; }
.rmatrix th, .rmatrix td { padding: 8px 10px; border-bottom: var(--bp-stroke-1) solid var(--rule); text-align: center; white-space: nowrap; }
.rmatrix thead th { position: sticky; top: 0; background: var(--bp-grey-100); font-family: var(--bp-font-display); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); z-index: 2; }
.rmatrix tbody th { position: sticky; left: 0; background: var(--surface); text-align: left; font-family: var(--bp-font-display); color: var(--bp-ink); z-index: 1; }
.rmatrix thead .rm-corner { left: 0; z-index: 3; text-align: left; }
/* persistent divider on the frozen name column + corner header — translucent so it reads on both the white body cells and the grey header (box-shadow stays visible over scrolled cells) */
.rmatrix tbody th, .rmatrix thead .rm-corner { border-right: 0; box-shadow: 1px 0 0 0 rgba(0,0,0,.14); }
.rmatrix tbody tr:hover th, .rmatrix tbody tr:hover td { background: var(--bp-grey-50); }
.rmatrix td[data-rm] { cursor: pointer; }
.rmatrix tbody tr:last-child th, .rmatrix tbody tr:last-child td { border-bottom: 0; }
.rmatrix tbody th.rm-role { display: flex; align-items: center; gap: 8px; }
.rmatrix th.rm-role .rm-rolename { flex: 1; }
.rmatrix th.rm-role.is-susp .rm-rolename { opacity: .5; text-decoration: line-through; }
.rmatrix .rm-susp { font-style: normal; font-size: 10px; color: var(--bp-red); text-transform: none; letter-spacing: 0; }
/* horizontal-scroll affordance chevrons for the roles matrix */
.rmatrix-scroller { position: relative; }
.rm-chev { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 34px; height: 34px; border-radius: 50%; border: var(--bp-stroke-1) solid var(--border); background: var(--surface); color: var(--bp-ink); box-shadow: var(--elev-2); cursor: pointer; display: grid; place-items: center; transition: opacity .15s ease; }
.rm-chev--l { left: -8px; }
.rm-chev--r { right: -8px; }
.rm-chev:hover { border-color: var(--bp-grey-500); }
.rm-chev.is-hidden { opacity: 0; pointer-events: none; }
.rm-chev svg { width: 18px; height: 18px; }
/* ── Password / security card (admin never sees the password) ────── */
.pw-row { display: flex; align-items: flex-start; gap: 12px; }
.pw-ic { width: 26px; height: 26px; flex: none; color: var(--fg-muted); margin-top: 2px; }
.pw-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-muted); }
.rol-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--bp-radius-pill); background: var(--bg-alt); border: var(--bp-stroke-1) solid var(--border); font-family: var(--bp-font-display); font-size: 11.5px; color: var(--bp-ink); }
/* ── Nou rol modal ───────────────────────────────────────────────── */
.rmodal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 200; }
.rmodal { width: 100%; max-width: 440px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-4); overflow: hidden; }
.rmodal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: var(--bp-stroke-1) solid var(--border); }
.rmodal-head h3 { margin: 0; font-size: 17px; }
.rmodal-x { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--fg-muted); cursor: pointer; }
.rmodal-x:hover { color: var(--bp-ink); }
.rmodal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.rmodal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 14px 20px; border-top: var(--bp-stroke-1) solid var(--border); background: var(--bg-alt); }
/* ── Auditoria · nivell badges ───────────────────────────────────── */
.nlvl { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--bp-radius-pill); font-family: var(--bp-font-display); font-size: 11px; letter-spacing: .03em; }
.nlvl.hi { background: rgba(255,0,0,.10); color: var(--bp-red); }
.nlvl.mid { background: var(--bp-sand, rgba(224,122,43,.16)); color: #A65A1E; }
/* Payment status chips (Stripe back-office) */
.pstat { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--bp-radius-pill); font-family: var(--bp-font-display); font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.pstat--ok { background: rgba(77,117,68,.14); color: #3C6135; }
.pstat--mid { background: var(--bp-sand, rgba(224,122,43,.16)); color: #A65A1E; }
.pstat--off { background: var(--bp-grey-100); color: var(--bp-grey-700); }
/* Payments: DS table paginated/sorted by payment; fill sub-rows grouped under each */
#dt-pagaments .dtbl-row > td { border-bottom: 0; border-top: var(--bp-stroke-1) solid var(--bp-grey-100); vertical-align: top; }
#dt-pagaments .dtbl-table tbody tr.dtbl-row:first-child > td { border-top: 0; }
#dt-pagaments .dtbl-subrow > td { border-bottom: 0; padding-top: 3px; padding-bottom: 3px; color: var(--fg-muted); font-size: 13px; }
#dt-pagaments .dtbl-subrow:hover > td { background: transparent; }
.pay-sub { padding-left: 4px; }
.pay-arrow { color: var(--bp-grey-500); margin-right: 4px; }
.pay-muted { color: var(--fg-muted); font-size: 12px; }
/* ── Processos de sistema ────────────────────────────────────────── */
.proc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--bp-space-4); }
.proc-card { background: var(--surface); border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-lg); box-shadow: var(--elev-1); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.proc-head { display: flex; align-items: center; gap: 10px; }
.proc-head b { font-size: 15px; color: var(--bp-ink); }
.proc-uc { font-family: var(--bp-font-display); font-size: 10px; letter-spacing: .04em; color: var(--fg-muted); border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-sm); padding: 2px 6px; }
.proc-status { margin-left: auto; font-family: var(--bp-font-display); font-size: 11px; padding: 3px 10px; border-radius: var(--bp-radius-pill); }
.proc-status.on { background: rgba(77,117,68,.14); color: #3C6135; }
.proc-status.off { background: var(--bg-alt); color: var(--fg-muted); }
.proc-desc { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-muted); }
.proc-meta { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--fg-muted); }
.proc-meta span { display: flex; align-items: center; gap: 6px; }
.proc-meta svg { width: 14px; height: 14px; flex: none; }
.proc-last { color: var(--bp-grey-500); }
.proc-actions { display: flex; gap: 10px; margin-top: auto; } /* push to card bottom so buttons align across the grid row */
.proc-actions .btn { flex: 1; }
.role-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 8px; }
.role-checks .slot-check { font-size: 13px; color: var(--bp-ink); }
/* Activity editor: tabs + heads */
.ed-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ed-head-actions { display: flex; align-items: center; gap: 14px; }
.ed-tabs { display: flex; gap: 26px; border-bottom: var(--bp-stroke-1) solid var(--rule); }
.ed-tabs button {
font-family: var(--bp-font-display); font-size: 13px; letter-spacing: .02em;
background: transparent; border: 0; cursor: pointer; color: var(--fg-muted);
padding: 10px 2px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ed-tabs button:hover { color: var(--bp-ink); }
.ed-tabs button.is-active { color: var(--bp-ink); border-bottom-color: var(--accent); font-weight: 700; }
.ed-lbl { display: block; font-family: var(--bp-font-display); font-size: 12px; letter-spacing: var(--bp-tracking-wide); text-transform: uppercase; color: var(--fg-muted); margin-bottom: 8px; }
.etapa-rows { display: flex; flex-direction: column; gap: 10px; }
.etapa-row { display: flex; align-items: center; gap: 14px; padding: 4px 0; }
.etapa-row .gchip { min-width: 104px; text-align: center; flex: none; }
.etapa-row .chips-wrap { gap: 8px; }
.dayrows { display: flex; flex-direction: column; gap: 8px; }
.dayrow { display: flex; align-items: center; gap: 12px; }
.dayrow .fchip { min-width: 104px; justify-content: center; text-align: center; flex: none; }
.dayrow select {
border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-sm); background: var(--surface);
font-family: inherit; font-size: 14px; color: var(--bp-ink); padding: 7px 10px; outline: 0; max-width: 240px;
}
/* Token picker (Material / Documents) */
.token {
display: inline-flex; align-items: center; gap: 8px;
background: var(--bp-ink); color: var(--bp-white);
border-radius: var(--bp-radius-pill); padding: 6px 8px 6px 13px; font-size: 13px;
}
.token button { border: 0; background: rgba(255,255,255,.18); color: var(--bp-white); cursor: pointer; width: 18px; height: 18px; border-radius: 50%; line-height: 1; font-size: 13px; display: grid; place-items: center; }
.token button:hover { background: var(--accent); }
.token--flag { padding-right: 6px; }
.token-flag { border: 0; background: rgba(255,255,255,.16); color: var(--bp-white); font-family: var(--bp-font-body); font-size: 11px; border-radius: var(--r-sm); padding: 2px 4px; cursor: pointer; }
.token-flag option { color: var(--bp-ink); }
.pick-search {
display: flex; align-items: center; gap: 8px; max-width: 380px;
background: var(--surface); border: var(--bp-stroke-1) solid var(--border);
border-radius: var(--r-sm); padding: 8px 14px; margin-bottom: 8px;
}
.pick-search svg { width: 14px; height: 14px; color: var(--fg-muted); flex: none; }
.pick-search input { border: 0; outline: 0; background: transparent; width: 100%; font-family: inherit; font-size: 14px; color: var(--bp-ink); }
.pick-list { max-width: 520px; border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.pick-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 14px; cursor: pointer; font-family: inherit; font-size: 14px; color: var(--bp-ink); }
.pick-row + .pick-row { border-top: var(--bp-stroke-1) solid var(--rule); }
.pick-row:hover { background: var(--bg-alt); }
.pick-row .pr-plus { color: var(--accent); font-weight: 700; width: 14px; }
.pick-row .pr-name { flex: 1; min-width: 0; }
.pick-row .pr-sub { font-size: 12px; color: var(--fg-muted); }
.pick-row .pr-price { font-size: 13px; font-weight: 700; }
.pick-more { padding: 8px 14px; font-size: 12.5px; color: var(--fg-muted); border-top: var(--bp-stroke-1) solid var(--rule); }
/* Imatges (activity editor) */
.img-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.img-thumb {
position: relative; width: 132px; height: 96px; border-radius: var(--r-md);
background: var(--bg-alt) center/cover no-repeat; border: var(--bp-stroke-1) solid var(--border);
box-shadow: var(--elev-1); overflow: hidden; display: grid; place-items: center;
}
.img-thumb .it-name { font-size: 11px; color: var(--fg-muted); padding: 6px; word-break: break-all; text-align: center; }
.img-thumb .it-tag {
position: absolute; left: 6px; bottom: 6px; background: var(--bp-ink); color: var(--bp-white);
font-family: var(--bp-font-display); font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
border-radius: var(--bp-radius-pill); padding: 3px 8px;
}
.img-thumb button {
position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border: 0; border-radius: 50%;
background: rgba(29,29,27,.72); color: #fff; cursor: pointer; font-size: 13px; line-height: 1; display: grid; place-items: center;
}
.img-thumb button:hover { background: var(--accent); }
.img-drop {
width: 132px; height: 96px; border: 1.5px dashed var(--bp-grey-200); border-radius: var(--r-md);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
color: var(--fg-muted); font-size: 12px; cursor: pointer; background: var(--surface);
}
.img-drop:hover { border-color: var(--accent); color: var(--bp-ink); }
.img-drop svg { width: 22px; height: 22px; }
/* ══════════════════════════════════════════════════════════════════
RESPONSIVE — tablet keeps sidebar · mobile nested nav · sheets
(desktop layout untouched; everything below is inside @media)
══════════════════════════════════════════════════════════════════ */
.adm-menu-back { display: none; }
/* ── Mobile (≤ 760px) ─────────────────────────────────────────────── */
@media (max-width: 760px) {
/* Header: tighter, drop the crumb, let the area-nav scroll */
.app-header { padding-left: 14px; padding-right: 14px; }
.hdr-left { gap: 10px; }
.app-header .brand { font-size: 17px; }
.hdr-left .crumb, .hdr-left .hdr-div { display: none; }
.area-nav { gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.area-nav::-webkit-scrollbar { display: none; }
.area-nav button { font-size: 11px; white-space: nowrap; }
.area-nav button span, .area-nav button svg { }
.user-block .ub-txt { display: none; }
/* Admin: nested navigation — module list ⇄ page */
.adm-layout { grid-template-columns: 1fr; gap: 0; padding: 14px; }
.adm-side { position: static; box-shadow: none; border: 0; padding: 0; background: transparent; }
.side-item { padding: 15px 14px; border-radius: var(--r-md); background: var(--surface); border: var(--bp-stroke-1) solid var(--border); box-shadow: var(--elev-1); }
.side-item + .side-item, .adm-side .side-item { margin-bottom: 8px; }
.side-item.is-active { background: var(--surface); color: var(--bp-ink); }
.side-item::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--fg-muted); border-top: 2px solid var(--fg-muted); transform: rotate(45deg); margin-left: auto; opacity: .5; }
.side-item.is-active::after { border-color: var(--accent); opacity: 1; }
/* show one pane at a time */
body.adm-menu-view .adm-content { display: none; }
body.adm-menu-view .save-bar { display: none; }
body:not(.adm-menu-view) .adm-side { display: none; }
.adm-menu-back { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; color: var(--accent);
font-family: var(--bp-font-body); font-size: var(--bp-fs-small); padding: 0; margin-bottom: 12px; cursor: pointer; }
.adm-menu-back svg { width: 18px; height: 18px; }
.adm-title h1 { font-size: 26px; }
/* Master-detail modules → stack (list above editor) */
.tmpl-layout { grid-template-columns: 1fr; }
.tmpl-grid { grid-template-columns: 1fr; }
.adm-content, .act-editor, .cat-editor { max-width: 100%; }
.form-grid { grid-template-columns: 1fr; }
.kpis { grid-template-columns: 1fr 1fr; }
.mod-bar { flex-wrap: wrap; }
.mod-bar .search { flex: 1 1 100%; max-width: none; }
/* Wide tables scroll inside their own container */
.dtable-wrap, .rmatrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ── Header dropdown menus → bottom sheets ── */
.menu {
position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%;
min-width: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; border: 0;
box-shadow: 0 -12px 40px rgba(0,0,0,.22); padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
transform: translateY(100%); transition: transform .28s cubic-bezier(0.32,0.72,0,1); display: block;
}
.menu.is-open { transform: translateY(0); }
.menu::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 3px; background: var(--border); margin: 6px auto 10px; }
.menu a, .menu button { padding: 13px 14px; font-size: 16px; }
.menu--user { min-width: 0; }
/* ── Modals (activity/role/checkout) → bottom sheets ── */
.modal-overlay, .rmodal-overlay { align-items: flex-end; padding: 0; }
.modal, .rmodal { width: 100%; max-width: 100%; max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.rmodal-foot, .modal-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
/* Floating save bar spans the width comfortably */
.save-bar { left: 8px; right: 8px; bottom: 8px; }
.sb-inner { padding: 8px 10px; }
.sb-main { gap: 10px; }
.sb-left { order: 2; width: 100%; }
.sb-left .lang-tabs { width: 100%; justify-content: space-between; }
.sb-right { order: 1; width: 100%; justify-content: flex-end; }
body.has-save-bar .adm-layout { padding-bottom: 140px; }
/* Rols matrix: let it scroll, freeze first column already handled */
.rmatrix th, .rmatrix td { padding: 7px 8px; }
/* Processos cards full width */
.proc-grid { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════════════════════
.fi — field with leading icon (v3 parity, DS underline). Non-negotiable
on every form field across auth + admin.
══════════════════════════════════════════════════════════════════ */
.fi { display: flex; align-items: center; gap: 9px; border-bottom: var(--bp-stroke-1) solid var(--bp-grey-200); }
.fi:focus-within { border-bottom-color: var(--bp-red); }
.fi > svg { width: 16px; height: 16px; flex: none; color: var(--bp-grey-500); }
.fi input, .fi select, .fi textarea { flex: 1; border: 0; background: transparent; padding: 9px 0; font: inherit; font-size: 15px; outline: none; color: var(--fg); }
.fi select { cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 22px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B9B9B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right center; background-size: 14px; }
/* the underline now lives on .fi — kill the legacy .field border so fields don't show a double bar */
.field:has(.fi) { border-bottom: 0; }
.fi.fi-area { align-items: flex-start; }
.fi.fi-area > svg { margin-top: 11px; }
.fi textarea { resize: vertical; min-height: 58px; padding-top: 10px; }
/* the eye toggle sits inside .fi for password fields */
.fi .eye-btn { position: static; flex: none; background: transparent; border: 0; padding: 0 2px; color: var(--bp-grey-500); cursor: pointer; display: inline-flex; }
/* ══════════════════════════════════════════════════════════════════
ADMIN APP-SHELL — inscripcions topbar + fixed collapsible sidebar rail
(no bg, vertical divider) + content in the middle; sub-tabs as
open-by-default accordions with red titles.
══════════════════════════════════════════════════════════════════ */
:root { --adm-header-h: 69px; --adm-side-w: 268px; --adm-side-w-min: 66px; --adm-content-max: 1280px; }
.app-header .logo { display: inline-flex; align-items: center; }
.app-header .logo img { height: 32px; width: auto; display: block; }
.adm-layout {
display: grid; grid-template-columns: var(--adm-side-w) minmax(0, 1fr);
gap: 0; max-width: none; margin: 0; padding: 0;
align-items: start; min-height: calc(100vh - var(--adm-header-h));
}
body.side-collapsed .adm-layout { grid-template-columns: var(--adm-side-w-min) minmax(0, 1fr); }
.adm-side {
position: sticky; top: var(--adm-header-h);
height: calc(100vh - var(--adm-header-h));
overflow-y: auto; overflow-x: hidden;
background: var(--bp-white); border: 0; border-right: 1px solid var(--bp-grey-100);
border-radius: 0; box-shadow: none;
padding: 16px 16px 16px 24px; margin-left: 0; display: flex; flex-direction: column; gap: 2px;
}
.adm-content { min-width: 0; display: flex; flex-direction: column; gap: var(--bp-space-5); padding: var(--bp-space-6); }
body.has-save-bar .adm-content { padding-bottom: 104px; }
/* collapse toggle */
/* collapse toggle → floating circular handle straddling the sidebar's right edge (fixed, no wasted top row) */
.side-toggle { position: fixed; top: calc(var(--adm-header-h) + 14px); left: calc(var(--adm-side-w) - 15px); z-index: 60; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--bp-grey-100); background: var(--bp-white); color: var(--bp-grey-700); cursor: pointer; box-shadow: var(--elev-1); transition: left .15s; }
.side-toggle:hover { background: var(--bp-ink); color: var(--bp-white); border-color: var(--bp-ink); }
.side-toggle svg { width: 16px; height: 16px; }
body.side-collapsed .side-toggle { left: calc(var(--adm-side-w-min) - 15px); }
body.side-collapsed .side-toggle svg { transform: rotate(180deg); }
.side-nav { display: flex; flex-direction: column; gap: 1px; }
/* simple item + accordion head share the base look */
.side-item, .side-head {
display: flex; align-items: center; gap: 11px; width: 100%;
padding: 10px 12px; border: 0; background: none; cursor: pointer;
font: inherit; font-size: 15px; color: var(--bp-ink);
text-align: left; text-decoration: none;
}
.side-ic { display: inline-flex; flex: none; color: var(--bp-grey-500); }
.side-ic svg { width: 18px; height: 18px; }
.side-item:hover, .side-head:hover { background: var(--bp-grey-50); }
.side-item.is-active { background: var(--accent); color: var(--bp-white); }
.side-item.is-active .side-ic { color: var(--bp-white); }
/* accordion head = red title */
.side-head { color: var(--bp-red); font-family: var(--bp-font-display); font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.side-head .side-ic { color: var(--bp-red); }
.side-caret { width: 14px; height: 14px; margin-left: auto; color: var(--bp-red); flex: none; transition: transform .15s; }
.side-group:not(.open) > .side-head .side-caret { transform: rotate(-90deg); }
.side-group:not(.open) > .side-sub { display: none; }
.side-sub { display: flex; flex-direction: column; padding: 2px 0 8px; }
.side-sub-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; font-size: 15px; color: var(--bp-ink); text-decoration: none; }
.side-sub-item .side-ic { color: var(--bp-grey-500); }
.side-sub-item:hover { background: var(--bp-grey-50); }
.side-sub-item.is-active { background: var(--accent); color: var(--bp-white); }
.side-sub-item.is-active .side-ic { color: var(--bp-white); }
/* collapsed rail — icons only */
body.side-collapsed .adm-side { padding: 16px 10px; }
body.side-collapsed .side-lbl, body.side-collapsed .side-caret { display: none; }
/* collapsed → flatten: drop accordion heads, surface every sub-item as its own rail icon */
body.side-collapsed .side-head { display: none; }
body.side-collapsed .side-sub,
body.side-collapsed .side-group:not(.open) > .side-sub { display: flex; padding: 0; gap: 4px; }
body.side-collapsed .side-item, body.side-collapsed .side-sub-item { justify-content: flex-start; gap: 0; padding: 11px 12px; }
body.side-collapsed .side-nav { gap: 4px; }
/* Collapsed-sidebar hover tooltip (fixed → escapes the rail's overflow clip) */
.side-tip {
position: fixed; z-index: 80; transform: translateY(-50%); pointer-events: none;
opacity: 0; transition: opacity .12s;
background: var(--bp-ink); color: var(--bp-white);
font-family: var(--bp-font-body); font-size: 12px; font-weight: 600; line-height: 1;
padding: 7px 10px; border-radius: 6px; white-space: nowrap; box-shadow: var(--elev-1);
}
.side-tip.show { opacity: 1; }
.side-tip::before {
content: ""; position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
border: 5px solid transparent; border-right-color: var(--bp-ink);
}
/* ══ Admin topbar → 1B inscripcions-demo look&feel: RED header, white logo,
white text/icons, white-square avatar (red text) ══ */
.app-header {
gap: 24px; padding: 14px var(--bp-space-6);
background: var(--bp-red); border-bottom: 0; box-shadow: none;
}
.app-header .logo img { height: 34px; }
.hdr-div { display: none; }
.area-nav { gap: 2px; padding-left: 24px; border-left: 1px solid rgba(255,255,255,.28); }
.area-nav button {
border: 0; border-bottom: 2px solid transparent; background: none;
font-family: var(--bp-font-display); font-size: 13px; font-weight: 800;
letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,.9);
padding: 4px 10px 6px; margin: 0; cursor: pointer;
display: inline-flex; align-items: center; gap: 7px;
}
.area-nav button svg { width: 15px; height: 15px; }
.area-nav button:hover { color: var(--bp-white); }
.area-nav button.is-active { color: var(--bp-white); border-bottom-color: var(--bp-white); }
/* user block → inscripcions .userline */
.user-block { display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.ub-txt { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.user-block .ub-name { font-size: 13px; color: var(--bp-white); font-weight: 600; }
.user-block .ub-curs { font-family: var(--bp-font-display); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,.9); font-weight: 700; }
.avatar-sq { width: 36px; height: 36px; border-radius: 0; background: var(--bp-white); color: var(--bp-red); display: inline-flex; align-items: center; justify-content: center; font-family: var(--bp-font-display); font-weight: 700; font-size: 13px; }
.user-block:hover .avatar-sq { background: var(--bp-white); color: var(--bp-red); }
/* notifications bell — white on the red header */
.bell { background: none; border: 0; color: rgba(255,255,255,.95); cursor: pointer; position: relative; padding: 6px; display: inline-flex; }
.bell:hover { color: var(--bp-white); background: rgba(255,255,255,.14); border-radius: 8px; }
.bell svg { width: 20px; height: 20px; }
.bell .badge { position: absolute; top: 0; right: 0; background: var(--bp-white); color: var(--bp-red); font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; padding: 0 3px; }
/* header height used by the sticky sidebar */
:root { --adm-header-h: 69px; } /* real .app-header height (was 63 → sidebar/title tucked 6px under header on scroll) */
/* ══ Admin: match inscripcions page constraint — max-width 1480, centered, 40px gutter ══ */
body[data-app] { background: var(--bp-grey-50); }
/* Full-bleed app shell: red header + white sidebar span edge-to-edge; the
neutral-gray canvas (grey-50) is confined to the content column only. */
.app-header { padding: 14px 40px; }
.adm-layout { max-width: none; margin: 0; padding: 0; gap: 0; }
.adm-content { width: 100%; max-width: var(--adm-content-max); margin: 0 auto; padding: 0 40px 32px; } /* width:100% forces a CONSISTENT centered measure — grid shrink-to-fit was collapsing narrow reorder-list screens (Cursos/Etapes) to ~630px while wide dataTables pushed to 1280. Now all screens = min(cell,1280), centered. grey canvas fills the rest of the column. top gap lives in the sticky .adm-title */
/* "General" config page — sub-section header before each stacked block (Curs escolar / Dates / Descomptes / Idiomes) */
.cfg-block-title { font-family: var(--bp-font-display); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bp-ink); margin: 0 0 12px; }
/* Config multi-selectors (Idiomes, Rols assignats) → match the activity-editor .fchip chips: square, ink border + red tick-badge when selected (not a native checkbox) */
.cfg-langs, .role-checks { gap: 8px; }
.cfg-langs .slot-check, .role-checks .slot-check {
position: relative; gap: 7px; padding: 7px 13px; border: var(--bp-stroke-1) solid var(--bp-grey-200); border-radius: var(--r-sm);
background: var(--surface); color: var(--fg); font-family: var(--bp-font-display); font-size: 12px;
transition: background .15s, color .15s, border-color .15s;
}
.cfg-langs .slot-check:hover, .role-checks .slot-check:hover { border-color: var(--bp-grey-500); }
.cfg-langs .slot-check input, .role-checks .slot-check input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.cfg-langs .slot-check:has(input:checked), .role-checks .slot-check:has(input:checked) {
background: var(--bp-ink); color: var(--bp-white); border-color: var(--bp-ink); font-weight: 700;
}
.cfg-langs .slot-check:has(input:checked)::before, .role-checks .slot-check:has(input:checked)::before {
content: ""; position: absolute; top: -6px; right: -6px; z-index: 2; width: 16px; height: 16px; border-radius: 50%;
background: var(--bp-red) url("data:image/svg+xml;utf8,") center/70% no-repeat; box-shadow: 0 0 0 2px var(--surface);
}
/* ══ Admin user menu → match inscripcions .user-menu DS (square, ink border, ink-active switches) ══ */
.menu--user { min-width: 320px; border-color: var(--bp-ink); padding: 8px; }
.menu--user > a, .menu--user > button { padding: 13px 16px; font-size: 15px; gap: 12px; }
.menu--user svg { width: 18px; height: 18px; }
.menu-controls { gap: 14px; padding: 13px 16px 14px; }
.mc-label { font-family: var(--bp-font-display); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--bp-grey-500); font-weight: 700; }
.menu .mode-switch, .menu .lang-switch {
display: inline-flex; width: 100%; gap: 0; padding: 0;
background: var(--bp-white); border: var(--bp-stroke-1) solid var(--bp-grey-100); border-radius: 0; overflow: hidden;
}
.menu .mode-switch a, .menu .mode-switch button, .menu .lang-switch button {
flex: 1; width: auto; display: inline-flex; align-items: center; justify-content: center;
padding: 8px 10px; border: 0; border-radius: 0; background: var(--bp-white); cursor: pointer;
font-family: var(--bp-font-display); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--bp-grey-500); white-space: nowrap; text-decoration: none;
}
.menu .mode-switch > a + a, .menu .mode-switch > a + button, .menu .mode-switch > button + a, .menu .mode-switch > button + button, .menu .lang-switch button + button { border-left: var(--bp-stroke-1) solid var(--bp-grey-100); }
.menu .mode-switch a:hover, .menu .mode-switch button:hover, .menu .lang-switch button:hover { color: var(--bp-ink); background: var(--bg-alt); }
.menu .mode-switch .is-active, .menu .lang-switch button.is-active { background: var(--bp-ink); color: var(--bp-white); }
/* ══ Admin small-form modal (catalog add/edit) — boxy inscripcions modal DS ══ */
.adm-modal-backdrop { position: fixed; inset: 0; z-index: 500; background: rgba(29,29,27,0.45); display: none; align-items: center; justify-content: center; padding: 32px; }
.adm-modal-backdrop.open { display: flex; }
.adm-modal { width: min(560px, 100%); max-height: calc(100vh - 64px); background: var(--bp-white); border: 1px solid var(--bp-ink); box-shadow: var(--bp-shadow-soft); display: flex; flex-direction: column; overflow: hidden; }
.adm-modal-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 28px 16px; border-bottom: 1px solid var(--bp-grey-100); }
.adm-modal-title { font-family: var(--bp-font-display); font-size: 22px; letter-spacing: var(--bp-tracking-tight); color: var(--bp-ink); line-height: 1.1; }
.adm-modal-close { flex: none; background: none; border: 0; font-size: 26px; line-height: 1; color: var(--bp-grey-500); cursor: pointer; padding: 0 2px; }
.adm-modal-close:hover { color: var(--bp-ink); }
.adm-modal-body { flex: 1; overflow-y: auto; padding: 8px 28px 20px; }
.adm-modal-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; border-top: 1px solid var(--bp-grey-100); }
.adm-modal-foot .foot-actions { display: inline-flex; align-items: center; gap: 16px; margin-left: auto; }
.modal-langrow { margin-bottom: 14px; }
.modal-langrow .lang-tabs { margin-bottom: 0; }
/* ══════════════════════════════════════════════════════════════════
dataTable — reusable admin data table DS (Claude Design DataTable + Pagination)
══════════════════════════════════════════════════════════════════ */
.dtbl { background: var(--bp-white); border: var(--bp-stroke-1) solid var(--bp-grey-100); overflow: hidden; }
.dtbl-head { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: var(--bp-stroke-2) solid var(--bp-red); }
.dtbl-titlewrap { display: flex; align-items: baseline; gap: 10px; margin-right: auto; }
.dtbl-title { margin: 0; font-family: var(--bp-font-display); font-size: 24px; font-weight: 400; letter-spacing: -0.01em; color: var(--bp-ink); }
.dtbl-count { font-family: var(--bp-font-label); font-size: 13px; color: var(--bp-grey-500); white-space: nowrap; }
.dtbl-search { display: inline-flex; align-items: center; gap: 8px; width: 272px; margin-right: auto; border-bottom: var(--bp-stroke-1) solid var(--bp-grey-200); padding: 6px 2px; }
.dtbl-search:focus-within { border-bottom-color: var(--bp-red); }
.dtbl-search svg { width: 16px; height: 16px; color: var(--bp-grey-500); flex: none; }
.dtbl-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: inherit; font-size: 14px; color: var(--bp-ink); }
.dtbl-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
/* ── Table filter bar — Jaume's inscripcions filter DS (icon'd dropdowns, uppercase labels, clear button) ── */
/* Match Jaume's family `.filters` card exactly: 16px 20px pad, 1px grey-100 border, flat, square */
.filter-card { padding: 16px 20px; border: 1px solid var(--bp-grey-100); border-radius: 0; box-shadow: none; background: var(--bp-white); }
.filter-card .filter-bar { margin: 0; }
.filter-bar { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.filt { display: flex; flex-direction: column; gap: 6px; flex: 1 1 180px; min-width: 0; }
.filt--search { flex: 2 1 240px; order: -1; } /* search always leftmost */
.filt > label { font-family: var(--bp-font-display); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--bp-grey-700); }
.dt-clear { flex: none; align-self: flex-end; margin-left: auto; } /* clear button — own class so it isn't hit by the pre-existing .filter-clear (14px) rule */
.dsel { position: relative; }
.dsel-field { width: 100%; display: flex; align-items: center; gap: 8px; border: 0; border-bottom: 1px solid var(--bp-ink); background: transparent; padding: 8px 2px; font: inherit; font-size: 14px; color: var(--bp-ink); cursor: pointer; text-align: left; }
.dsel.open .dsel-field { border-bottom-color: var(--bp-red); }
.dsel-icon { display: inline-flex; color: var(--bp-grey-500); flex: none; }
.dsel-icon svg { width: 16px; height: 16px; }
.dsel-value { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsel-chev { width: 16px; height: 16px; color: var(--bp-grey-500); flex: none; transition: transform 0.18s; }
.dsel.open .dsel-chev { transform: rotate(180deg); }
.dsel-pop { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; min-width: 220px; background: var(--bp-white); border: 1px solid var(--bp-ink); box-shadow: var(--bp-shadow-soft); z-index: 200; max-height: 300px; overflow-y: auto; }
.dsel.open .dsel-pop { display: block; }
.dsel-opt { display: block; width: 100%; text-align: left; border: 0; background: var(--bp-white); padding: 10px 14px; font: inherit; font-size: 14px; color: var(--bp-ink); cursor: pointer; }
.dsel-opt:hover { background: var(--bp-grey-50); }
.dsel-opt.is-sel { background: var(--bp-ink); color: var(--bp-white); font-weight: 500; }
.filter-search { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--bp-ink); padding: 8px 2px; }
.filter-search:focus-within { border-bottom-color: var(--bp-red); }
.filter-search svg { width: 16px; height: 16px; color: var(--bp-grey-500); flex: none; }
.filter-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: inherit; font-size: 14px; color: var(--bp-ink); }
.dt-filter { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-muted); white-space: nowrap; }
.dt-filter select { border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-sm); background: var(--surface); font-family: inherit; font-size: 13px; padding: 5px 8px; color: var(--bp-ink); cursor: pointer; }
.dtbl-scroll { overflow-x: auto; }
.dtbl-table { width: 100%; border-collapse: collapse; }
.dtbl-table th { font-family: var(--bp-font-display); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bp-grey-700); font-weight: 400; text-align: left; padding: 12px 16px; white-space: nowrap; background: var(--bp-grey-50); border-bottom: var(--bp-stroke-1) solid var(--bp-grey-100); }
.dtbl-table td { font-family: var(--bp-font-body); font-size: 15px; color: var(--bp-ink); padding: 12px 16px; border-bottom: var(--bp-stroke-1) solid var(--bp-grey-100); vertical-align: middle; }
.dtbl-table tbody tr:last-child td { border-bottom: 0; }
.dt-th { display: inline-flex; align-items: center; gap: 6px; }
.dt-sortable { cursor: pointer; user-select: none; }
.dt-sortable:hover { color: var(--bp-ink); }
.dtbl-sort { width: 14px; height: 14px; color: var(--bp-grey-200); flex: none; }
.dtbl-sort.on { color: var(--bp-red); }
.dtbl-row.is-click { cursor: pointer; }
.dtbl-row:hover td { background: var(--bp-grey-50); }
.dtbl-row.is-sel td { background: #FFF4F4; }
.dtbl-empty { text-align: center; color: var(--bp-grey-500); padding: 40px 16px; }
.dtbl-cb { width: 44px; }
.dt-cbx { display: inline-flex; cursor: pointer; }
.dt-cbx input { width: 18px; height: 18px; accent-color: var(--bp-red); cursor: pointer; margin: 0; }
.dtbl-rowact { width: 56px; text-align: right; white-space: nowrap; }
.dtbl-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-top: var(--bp-stroke-1) solid var(--bp-grey-100); }
.dtbl-range { font-family: var(--bp-font-body); font-size: 15px; color: var(--bp-grey-500); }
.dtpag { display: inline-flex; align-items: center; gap: 4px; }
.dtpag-arrow, .dtpag-num { min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: var(--bp-stroke-1) solid transparent; background: transparent; font-family: var(--bp-font-display); font-size: 16px; line-height: 1; color: var(--bp-ink); cursor: pointer; }
.dtpag-arrow svg { width: 18px; height: 18px; }
.dtpag-arrow[disabled] { color: var(--bp-grey-200); cursor: not-allowed; }
.dtpag-num.on { background: var(--bp-red); border-color: var(--bp-red); color: var(--bp-white); cursor: default; }
.dtpag-num:not(.on):hover { background: var(--bp-grey-50); }
.dtpag-gap { min-width: 24px; text-align: center; color: var(--bp-grey-500); font-family: var(--bp-font-display); }
.dt-filter { display: inline-flex; align-items: center; gap: 6px; font-family: var(--bp-font-display); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bp-grey-500); white-space: nowrap; }
.dt-filter select { border: 0; border-bottom: var(--bp-stroke-1) solid var(--bp-grey-200); background: transparent; font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--bp-ink); padding: 4px 2px; cursor: pointer; }
/* ── Catalog drag-reorder: drop indicator + settle animation ── */
.cat-row { transition: box-shadow .12s ease, opacity .12s ease; }
.cat-row.is-dragging { opacity: 0.4; }
.cat-row.drag-over.over-above { box-shadow: inset 0 3px 0 var(--bp-red); }
.cat-row.drag-over.over-below { box-shadow: inset 0 -3px 0 var(--bp-red); }
@keyframes cat-settle { 0% { background: #FFF4F4; transform: translateY(-8px); } 100% { background: transparent; transform: none; } }
.cat-row.is-moved { animation: cat-settle 0.34s ease; }
/* admin user-menu rows → inline (label left, switch right) — equal to inscripcions um-row */
.menu-controls { gap: 4px; padding: 8px; }
.mc-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; }
.mc-label { font-family: var(--bp-font-display); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--bp-grey-500); font-weight: 700; flex: none; }
.menu .mode-switch, .menu .lang-switch { width: auto; flex: 0 1 auto; }
.menu .mode-switch a, .menu .mode-switch button, .menu .lang-switch button { flex: 0 0 auto; }
/* admin privacitat modal list */
.dt-iconbtn { border: 0; background: none; color: var(--bp-grey-500); cursor: pointer; padding: 4px; display: inline-flex; }
.dt-iconbtn:hover { color: var(--bp-red); }
.dt-iconbtn svg { width: 18px; height: 18px; }
/* Row-action kebab (⋮) + overflow menu — used by every admin table/list */
.rowkebab { position: relative; display: inline-flex; }
.rowkebab-btn { border: 0; background: none; color: var(--bp-grey-500); cursor: pointer; padding: 4px; display: inline-flex; border-radius: var(--r-sm); }
.rowkebab-btn:hover, .rowkebab-btn[aria-expanded="true"] { color: var(--bp-red); background: var(--bp-grey-100); }
.rowkebab-btn svg { width: 18px; height: 18px; }
.rowkebab-menu { z-index: 60; min-width: 194px; padding: 6px; background: var(--surface); border: var(--bp-stroke-1) solid var(--border); border-radius: var(--r-md); box-shadow: 0 10px 30px rgba(0,0,0,.20), 0 2px 8px rgba(0,0,0,.12); }
.rowkebab-menu[hidden] { display: none; }
.rowkebab-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: none; cursor: pointer; border-radius: var(--r-sm); font-family: var(--bp-font-body); font-size: 14px; color: var(--fg); text-align: left; white-space: nowrap; }
.rowkebab-item:hover { background: var(--bp-grey-100); }
.rowkebab-item .rk-ic { display: inline-flex; flex: none; color: var(--bp-grey-500); }
.rowkebab-item .rk-ic svg { width: 17px; height: 17px; }
.rowkebab-item.danger { color: var(--bp-red); }
.rowkebab-item.danger .rk-ic { color: var(--bp-red); }
.rowkebab-item.danger:hover { background: color-mix(in srgb, var(--bp-red) 10%, transparent); }