:root {
    /* Workanda brand palette (workanda.es) */
    --bg: #faf7f7;
    --surface: #ffffff;
    --border: #ecdfe2;
    --text: #3d3d3d;
    --text-soft: #666666;
    --primary: #b0012e;
    --primary-dark: #8a053c;
    --magenta: #760740;
    --orange: #ff5626;
    --orange-dark: #ee3c28;
    --primary-bg: #f9ecef;
    --success: #157347;
    --success-bg: #e6f4ec;
    --error: #b02a37;
    --error-bg: #fbeaec;
    --warning: #8a5a00;
    --warning-bg: #fdf3e2;
    --radius: 12px;
    --brand-gradient: linear-gradient(90deg, #760740 0%, #b0012e 45%, #ee3c28 78%, #ff5626 100%);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
}

a { color: var(--primary); }

/* flex-shrink: 0 on the fixed bands: the body is a column flex box and
   without it the 4px strip could be squeezed. */
.brand-strip {
    height: 4px;
    flex-shrink: 0;
    background: var(--brand-gradient);
}

header.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    flex-shrink: 0;
}

header.topbar .content {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 62px;
    flex-wrap: wrap;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    white-space: nowrap;
}

.brand img { height: 30px; width: auto; display: block; }

.brand .brand-app {
    font-family: "Fredoka One", "Quicksand", sans-serif;
    font-weight: 400;
    font-size: .95rem;
    color: var(--text-soft);
    border-left: 1px solid var(--border);
    padding-left: 10px;
    letter-spacing: .01em;
}

nav.main-nav {
    display: flex;
    gap: 18px;
    flex: 1;
    flex-wrap: wrap;
}

nav.main-nav a {
    text-decoration: none;
    color: var(--text-soft);
    font-size: .93rem;
    font-weight: 600;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}

nav.main-nav a:hover { color: var(--primary); }
nav.main-nav a.active { color: var(--primary); border-bottom-color: var(--orange); }

.user {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .88rem;
    color: var(--text-soft);
}

.user a.user-name {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.user a.user-name:hover,
.user a.user-name.active { color: var(--primary); }

.role-tag {
    background: var(--primary-bg);
    color: var(--primary-dark);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
}

main {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 32px 24px 64px;
    flex: 1;
}

footer.site-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 16px 24px;
    text-align: center;
    font-size: .82rem;
    color: var(--text-soft);
}

footer.site-footer a { text-decoration: none; font-weight: 600; }
footer.site-footer a:hover { text-decoration: underline; }
footer.site-footer .separator { margin: 0 8px; color: var(--border); }

h1, h2, h3 {
    font-family: "Fredoka One", "Quicksand", sans-serif;
    font-weight: 400;
    letter-spacing: .01em;
}

h1 { font-size: 1.6rem; margin: 0 0 4px; color: var(--magenta); }
h2 { font-size: 1.15rem; margin: 32px 0 12px; }
.subtitle { color: var(--text-soft); margin: 0 0 28px; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.project-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.project-card h3 { margin: 0; font-size: 1.05rem; }
.project-card p { margin: 0; color: var(--text-soft); font-size: .9rem; flex: 1; }

.button {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    padding: 9px 20px;
    border-radius: 999px;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.button:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

.button.secondary { background: transparent; color: var(--primary); }
.button.secondary:hover { background: var(--primary-bg); }

.button.danger { background: transparent; color: var(--error); border-color: #e7b9be; }
.button.danger:hover { background: var(--error-bg); }

.button.small { padding: 5px 14px; font-size: .82rem; }

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

th, td {
    text-align: left;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    font-size: .9rem;
    vertical-align: middle;
}

th { background: #faf4f5; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-soft); }
tbody tr:last-child td { border-bottom: none; }

/* Action cells at the end of each admin row. */
td.row-actions { text-align: right; white-space: nowrap; }

/* Key/value tables (a th heading each row). */
table.kv th { width: 220px; }

/* Centered box for the login / password screens. */
.auth-box { max-width: 460px; margin: 40px auto; }

.alert {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: .92rem;
    border: 1px solid transparent;
}

.alert.success { background: var(--success-bg); color: var(--success); border-color: #bfe0cd; }
.alert.error { background: var(--error-bg); color: var(--error); border-color: #eec3c8; }
.alert.warning { background: var(--warning-bg); color: var(--warning); border-color: #ecd6ac; }

.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
}

.badge.yes { background: var(--success-bg); color: var(--success); }
.badge.no { background: #f1ecec; color: var(--text-soft); }
.badge.pending { background: var(--warning-bg); color: var(--warning); }

form .field, form > div { margin-bottom: 18px; }

label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 5px; }

input[type=text], input[type=email], input[type=password], input[type=url], input[type=search], textarea, select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: .93rem;
    font-family: inherit;
    background: #fff;
    color: var(--text);
}

input:focus, textarea:focus, select:focus {
    outline: 2px solid #f2c3cf;
    border-color: var(--primary);
}

.form-help, .help-text { color: var(--text-soft); font-size: .82rem; margin-top: 4px; display: block; }

ul.form-error-messages, .form-error-message {
    color: var(--error);
    font-size: .85rem;
    margin: 5px 0 0;
    padding-left: 18px;
}

fieldset {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0;
}

fieldset legend { font-weight: 600; font-size: .88rem; padding: 0 6px; }

/* Checkboxes and radios. The browser lays them out inline, but the
   `label { display: block }` rule above pushed the text onto its own
   line: hence each box + text pair lives in its own flex container. */
input[type=checkbox], input[type=radio] {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.check, .options .option {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

/* Line the box up with the first line of the text, whose line height is
   taller than the box itself. */
.check input, .options .option input { margin-top: .2rem; }

.check label, .options .option label {
    display: inline;
    font-weight: 400;
    margin: 0;
    cursor: pointer;
}

/* Tag beside an option, for what its own name does not say. */
.options .option .badge { flex: none; margin-top: .12rem; }

.options {
    display: flex;
    flex-direction: column;
    gap: 9px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
}

fieldset label { font-weight: 400; display: inline-flex; align-items: center; gap: 7px; margin: 0 0 6px; }

.actions { display: flex; gap: 10px; align-items: center; margin-top: 26px; flex-wrap: wrap; }

.code-block {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: #3d3d3d;
    color: #f1ecec;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: .84rem;
    overflow-x: auto;
    white-space: pre;
}

code.inline {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: #f1ecec;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: .86rem;
    word-break: break-all;
}

.empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-soft);
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

/* Search bar above a listing: the box, whatever pickers the listing adds
   and the buttons, all on one line that wraps when there is no room. */
.filters {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* The rule for form fields further up gives every direct div a bottom
   margin, which here would only push the buttons off the line. */
.filters > div { margin-bottom: 0; }

.filters .filter { flex: 1 1 200px; min-width: 0; }

.filters .filter label {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-soft);
}

.filters .filter-actions { display: flex; gap: 8px; }

/* How many rows the filters matched, right under the bar. */
.listing-count { margin: 0 0 14px; font-size: .85rem; color: var(--text-soft); }

.pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    font-size: .88rem;
    color: var(--text-soft);
}

.pager .pager-links { display: flex; gap: 8px; }

/* Language switcher: two tags side by side, the current one filled in.
   Small enough to live in the top bar without competing with the
   navigation, and legible enough to be found in the footer. */
.locale-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    /* It sits in a line of text in the footer, where the baseline
       would otherwise leave it hanging below the words. */
    vertical-align: middle;
}

.locale-switcher a {
    padding: 3px 9px;
    border-radius: 999px;
    text-decoration: none;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.25;
    color: var(--text-soft);
}

.locale-switcher a:hover { color: var(--primary); background: var(--primary-bg); }

/* The language being read right now: it is a link like the others, so
   only the colour says which one it is. */
.locale-switcher a[aria-current="true"] {
    background: var(--primary);
    color: #fff;
}

/* ============ Small screens ============ */
@media (max-width: 720px) {
    header.topbar { padding: 0 16px; }

    header.topbar .content {
        gap: 8px 16px;
        padding: 10px 0;
        min-height: 0;
    }

    /* The nav drops to a full-width line of its own under the brand
       and the user block, which share the first line. */
    nav.main-nav { order: 3; flex-basis: 100%; gap: 4px 16px; }
    nav.main-nav a { padding: 4px 0; }

    .user { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }

    main { padding: 24px 16px 48px; }

    h1 { font-size: 1.35rem; }
    .card { padding: 18px 16px; }
    .auth-box { margin: 12px auto 0; }

    /* Below 16px iOS Safari zooms into a focused box. */
    input[type=text], input[type=email], input[type=password], input[type=url], input[type=search], textarea, select {
        font-size: 16px;
    }

    /* Wide listing tables become one card per row, each cell prefixed
       by its column name (the td's data-label). */
    table.stack { display: block; background: none; border: none; border-radius: 0; }
    table.stack thead { display: none; }
    table.stack tbody { display: block; }

    table.stack tr {
        display: block;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 12px;
        padding: 8px 0;
    }

    table.stack td {
        display: flex;
        align-items: baseline;
        gap: 12px;
        border-bottom: none;
        padding: 5px 14px;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    table.stack td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 88px;
        font-weight: 700;
        font-size: .74rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--text-soft);
    }

    table.stack td.row-actions {
        white-space: normal;
        text-align: left;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 10px;
    }

    /* Key/value tables: the heading stacks on top of its value. */
    table.kv th, table.kv td { display: block; width: auto; }
    table.kv th { border-bottom: none; padding-bottom: 2px; }
    table.kv td { padding-top: 0; }
    table.kv tr:last-child th { border-bottom: none; }
}