/* Admin-only layout: sidebar shell, data tables, filters, pagination. */

/* The admin's own look: a cool grey page, white cards without borders
   under a wide soft shadow, blue as the one brand colour. It redefines
   main.css's tokens for everything inside the admin (and its login page,
   .admin-skin), so the public pages keep theirs. The look before this one
   is the git tag theme-classic. */
.admin-body, .admin-skin {
    /* The brand colour: the account's own when it has set one
       (App\Classes\Brand puts --brand... on <body>), this blue otherwise. */
    --color-primary: var(--brand, #487FFF);
    --color-primary-dark: var(--brand-dark, #486CEA);
    --color-primary-light: var(--brand-light, #E4F1FF);
    --color-primary-rgb: var(--brand-rgb, 72, 127, 255);
    --color-on-primary: var(--brand-on, #FFFFFF);
    --color-link: var(--brand-link, #487FFF);

    /* No gold here: what used it (pending, warnings, accents) is orange. */
    --color-gold: #FF9F29;
    --color-gold-dark: #F08C00;
    --color-gold-light: #FFF3DF;
    --color-gold-text: #B45F06;
    --color-accent: var(--color-primary);

    --color-bg: #FFFFFF;
    --color-bg-alt: #F3F4F6;
    --color-bg-sunken: #F5F6FA;
    --color-border: #EBECEF;
    --color-border-strong: #D1D5DB;
    --color-text: #111827;
    --color-text-muted: #6B7280;
    --color-bg-input: #FFFFFF;
    --color-nav: #4B5563;

    --color-danger: #DC2626;
    --color-danger-bg: #FDE8E8;
    --color-danger-border: #F5B5B5;
    --color-success: #16A34A;
    --color-success-bg: #E3F4E9;
    --color-warning: #F08C00;

    --radius: 0.5rem;
    --radius-sm: 0.5rem;
    --radius-lg: 0.75rem;

    --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05);
    --shadow-card: 0 0.25rem 1.875rem rgba(46, 45, 116, 0.05);
    --shadow-card-hover: 0 0.5rem 2rem rgba(46, 45, 116, 0.10);
    --shadow-modal: 0 24px 64px rgba(17, 24, 39, 0.28);

    color: var(--color-text);
    line-height: 1.6;
}

/* The dark look -- neutral charcoal surfaces, no blue in them: the same
   tokens again, for when admin-theme.js has put
   data-theme="dark" on <html> (the switch is in the sidebar's user menu). */
html[data-theme="dark"] .admin-body, html[data-theme="dark"] .admin-skin {
    color-scheme: dark;

    --color-primary: var(--brand-dm, #487FFF);
    --color-primary-dark: var(--brand-dm-dark, #486CEA);
    --color-primary-light: var(--brand-dm-light, #2A3A5C);
    --color-primary-rgb: var(--brand-dm-rgb, 72, 127, 255);
    --color-on-primary: var(--brand-dm-on, #FFFFFF);
    --color-link: var(--brand-dm-link, #7AA2FF);

    --color-gold-light: #4A3A22;
    --color-gold-text: #FFB966;

    --color-bg: #232428;
    --color-bg-alt: #2C2D32;
    --color-bg-sunken: #1A1B1E;
    --color-bg-input: #2A2B30;
    --color-border: #34353B;
    --color-border-strong: #46474F;
    --color-text: #FFFFFF;
    --color-text-muted: #B4B6BC;
    --color-nav: #D1D5DB;

    --color-danger: #F87171;
    --color-danger-bg: #4A2A30;
    --color-danger-border: #7A3A40;
    --color-success: #4ADE80;
    --color-success-bg: #1F4034;
    --color-warning: #FFB966;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-card: 0 0.25rem 1.875rem rgba(0, 0, 0, 0.25);
    --shadow-card-hover: 0 0.5rem 2rem rgba(0, 0, 0, 0.35);
    --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.6);

    /* the rich-text editor (wysiwyg.css) */
    --wysiwyg-border-color: #46474F;
    --wysiwyg-divider-color: #34353B;
    --wysiwyg-bar-bg-start: #2C2D32;
    --wysiwyg-bar-bg-mid1: #2C2D32;
    --wysiwyg-bar-bg-mid2: #2C2D32;
    --wysiwyg-bar-bg-end: #2C2D32;
    --wysiwyg-hover-bg: #34353B;
    --wysiwyg-active-bg: #46474F;
    --wysiwyg-text-color: #FFFFFF;
    --wysiwyg-surface-bg: #2A2B30;
}
/* A logo is shown as uploaded: on a light plate, so dark lettering stays readable. */
html[data-theme="dark"] .admin-sidebar__logo { background: #fff; border-radius: var(--radius); padding: var(--space-2); }
html[data-theme="dark"] .admin-body .status-pill--info { color: var(--color-link); }

.admin-body { background: var(--color-bg-sunken); }

.admin-shell {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: 17rem;
    flex-shrink: 0;
    background: var(--color-bg);
    color: var(--color-text);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    padding: var(--space-6) var(--space-4);
}
.admin-sidebar__brand {
    display: flex;
    align-items: center;
    /* Centred in the sidebar; beside the menu button on a phone, where it only takes its own width. */
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
    padding: 0 var(--space-3);
    margin-bottom: 15px;
}
.admin-sidebar__brand .icon { width: 1.6rem; height: 1.6rem; color: var(--color-primary); }
.admin-sidebar__logo { max-width: 180px; height: auto; }
/* A development copy's pill (App\Classes\Environment), on a line of its own
   under the logo -- on a phone too, where the brand sits beside the menu
   button. Never drawn on live. */
.admin-sidebar__brand:has(.admin-env) { flex-wrap: wrap; }
.admin-env { flex-basis: 100%; display: flex; justify-content: center; }
.admin-env__pill { background: var(--color-warning); color: #fff; letter-spacing: 0.08em; }

/* Pure state holder for the mobile dropdown toggle -- never shown itself,
   the label (.admin-nav-toggle-btn) is what's clickable. Hidden checkboxes
   still toggle normally via their <label for>. */
.admin-nav-toggle-input { display: none; }
.admin-nav-toggle-btn { display: none; }

/* Desktop: the user/logout block sits right under the logo (always in
   reach), then the nav, flex:1, fills the rest of the sidebar. */
.admin-nav-dropdown {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}
.admin-nav__link {
    padding: 0.625rem var(--space-3);
    border-radius: var(--radius);
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-nav);
    transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.admin-nav__link .icon { color: currentColor; transition: color 150ms var(--ease); }
.admin-nav__link:hover { background: var(--color-primary-light); color: var(--color-primary); }
.admin-nav__link.is-active, .admin-nav__link.is-active:hover {
    background: var(--color-primary);
    color: var(--color-on-primary);
}
/* Under the menu: what the plan leaves out of it, and the way to a higher plan. */
.admin-nav-upsell {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
}
.admin-nav-upsell__text { font-size: var(--text-sm); line-height: 1.4; color: var(--color-text-muted); }

.admin-sidebar__user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
}
.admin-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 700;
    font-size: var(--text-sm);
}
.admin-avatar--sm { width: 1.75rem; height: 1.75rem; font-size: 0.65rem; vertical-align: middle; margin-right: var(--space-2); }
/* The user card is a button (details/summary) opening the account menu:
   header (name, email, roles), items, Cerrar sesión. Floats below the card
   on desktop; in place inside the phone menu (see the 768px block).
   admin-user-menu.js closes it on an outside click, Esc or a choice. */
.admin-user-menu { position: relative; flex: 1; min-width: 0; }
.admin-user-menu__toggle { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; list-style: none; min-width: 0; border-radius: var(--radius-sm); }
.admin-user-menu__toggle::-webkit-details-marker { display: none; }
.admin-user-menu__toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.admin-user-menu__chevron { flex: none; width: 1rem; height: 1rem; color: var(--color-text-muted); transition: transform 150ms var(--ease); }
.admin-user-menu[open] .admin-user-menu__chevron { transform: rotate(180deg); }
.admin-user-menu__panel {
    position: absolute; top: calc(100% + var(--space-4)); left: calc(-1 * var(--space-3)); right: calc(-1 * var(--space-3));
    z-index: 30; overflow: hidden; background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.admin-user-menu__head { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4); border-bottom: 1px solid var(--color-border); min-width: 0; }
.admin-user-menu__name { font-weight: 700; color: var(--color-text); overflow-wrap: anywhere; }
.admin-user-menu__email { font-size: var(--text-sm); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-menu__roles { margin-top: var(--space-1); font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); }
.admin-user-menu__items { display: flex; flex-direction: column; padding: var(--space-2); border-bottom: 1px solid var(--color-border); }
.admin-user-menu__link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); min-height: 40px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.admin-user-menu__link .icon { flex: none; width: 1.15rem; height: 1.15rem; color: var(--color-text-muted); }
.admin-user-menu__link:hover { background: var(--color-bg-alt); }
button.admin-user-menu__link { width: 100%; background: none; border: 0; text-align: left; cursor: pointer; font-family: inherit; }
.admin-user-menu__foot { margin: 0; padding: var(--space-2); }
.admin-user-menu__logout {
    display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 40px;
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
    background: var(--color-danger-bg); color: var(--color-danger); font-size: var(--text-sm); font-weight: 600; text-align: left;
    transition: filter 150ms var(--ease);
}
.admin-user-menu__logout .icon { flex: none; width: 1.15rem; height: 1.15rem; }
.admin-user-menu__logout:hover { filter: brightness(0.96); }
.admin-sidebar__user-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.admin-sidebar__user-label { font-size: var(--text-xs); color: var(--color-text-muted); }
.admin-sidebar__user-name { font-weight: 700; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.admin-main {
    flex: 1;
    /* Lets wide tables scroll inside .table-wrap instead of widening the page. */
    min-width: 0;
    padding: var(--space-6);
}

@media (max-width: 768px) {
    .admin-shell { flex-direction: column; }
    .admin-sidebar { width: 100%; position: relative; padding: var(--space-3) var(--space-4); }
    .admin-sidebar__header { display: flex; align-items: center; justify-content: space-between; }
    .admin-sidebar__brand { margin-bottom: 0; }
    .admin-nav-toggle-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: var(--radius-sm);
        color: var(--color-text-muted);
        cursor: pointer;
        flex-shrink: 0;
    }
    .admin-nav-toggle-btn:hover { background: var(--color-bg-alt); }
    .admin-nav-toggle-btn .icon { width: 1.5rem; height: 1.5rem; }

    /* Collapsed by default; the checkbox (sibling of this, see layout.view.php)
       reveals it as an absolutely-positioned panel below the header. */
    .admin-nav-dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 20;
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-top: none;
        box-shadow: var(--shadow-card);
        padding: var(--space-2) var(--space-4) var(--space-4);
    }
    .admin-nav-toggle-input:checked ~ .admin-nav-dropdown { display: flex; }

    .admin-nav { flex-direction: column; flex-wrap: nowrap; }
    .admin-sidebar__user { margin: var(--space-2) 0 var(--space-3); }
    .admin-user-menu__panel { position: static; margin-top: var(--space-3); box-shadow: none; }
    .admin-main { padding: var(--space-4); }
}

/* Filters */
.filter-bar {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}
.filter-bar .form-input { width: auto; min-width: 12rem; }

/* Data table and status pills moved to main.css: cart.php (public,
   calendar/layout only links main.css) uses .table-wrap/.data-table
   too, so admin-only chrome can't own them. */

/* ==========================================================================
   Admin lists (.admin-list) -- every admin list page (events, categories,
   organizations, alerts, accounts, store items and orders) uses this one
   div-based markup: aligned rows while the list is at least 950px wide,
   one card per row below that. It's a container query on the list's own
   width, so the sidebar (or its absence) is accounted for.

   Rows are CSS subgrids of .admin-list__table, so every row shares the
   same column tracks.

   Markup:
     <div class="admin-list" style="--cols: minmax(0,2fr) 8rem max-content">
       <div class="admin-list__table" role="table">
         <div class="admin-list__row admin-list__row--header" role="row">
           <span class="admin-list__cell" role="columnheader">Nombre</span> ...
         </div>
         <div class="admin-list__row" role="row">
           <div class="admin-list__cell admin-list__cell--title" role="cell">
             [thumbnail] <span class="admin-list__title" title="...">...</span>
           </div>
           <div class="admin-list__cell" role="cell" data-label="Precio">...</div>
           <div class="admin-list__cell admin-list__cell--actions" role="cell">
             [forms/buttons]
           </div>
         </div>
       </div>
     </div>

   --cols: one grid track per column. Text columns take minmax(0, Nfr) so
   they shrink and truncate; pills/prices/dates/actions take max-content
   and are never cut.
   data-label: the column's name, shown before the value on cards (use the
   same string as the header cell). The title and actions cells have none.
   A labeled cell's value must be elements -- a pill/badge, or text inside
   .admin-list__line (one line each, several stack) -- never bare text,
   which can't truncate beside the card label. Text ends in an ellipsis;
   put the full text in a title attribute.
   ========================================================================== */
.admin-list {
    container: admin-list / inline-size;
    width: 100%;
}
.admin-list__table {
    /* One grid for the whole list; rows are subgrids of it, so max-content
       columns size to the widest cell across all rows and stay aligned. */
    display: grid;
    grid-template-columns: var(--cols);
    column-gap: var(--space-4);
    background: var(--color-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.admin-list__row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    padding: var(--space-4);
    font-size: var(--text-sm);
}
.admin-list__row:not(:last-child) { border-bottom: 1px solid var(--color-border); }
.admin-list__row:not(.admin-list__row--header):hover { background: var(--color-bg-alt); }
.admin-list__row--header {
    background: var(--color-bg-sunken);
    font-weight: 600;
    color: var(--color-text);
}
.admin-list__cell {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Truncating a badge/pill that holds free text (e.g. a category name). */
.admin-list__cell .badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}
.admin-list__cell--title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.admin-list__title-group { display: flex; flex-direction: column; min-width: 0; }
.admin-list__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.admin-list__thumb {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
}
.admin-list__cell--title .admin-avatar--sm { flex: none; margin-right: 0; }
.admin-list__line {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-list__line--muted { color: var(--color-text-muted); font-size: var(--text-xs); }
.admin-list__cell--actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    overflow: visible;
}
.admin-list__cell--actions form { display: inline; }
/* "+N" after a value (e.g. an event's co-sponsors), names in its title. */
.admin-list__more {
    display: inline-block;
    margin-left: var(--space-1);
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: help;
}

@container admin-list (max-width: 949.98px) {
    .admin-list__table {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        background: transparent;
        border: none;
        box-shadow: none;
        overflow: visible;
    }
    .admin-list__row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-card);
        padding: var(--space-4);
    }
    .admin-list__row:not(:last-child) { border-bottom: 1px solid var(--color-border); }
    .admin-list__row:not(.admin-list__row--header):hover { background: var(--color-bg); }
    .admin-list__row--header { display: none; }

    /* Title first (whatever its column), up to two lines. */
    .admin-list__cell--title { order: -1; font-size: var(--text-base); }
    .admin-list__cell--title .admin-list__title {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow-wrap: anywhere;
    }

    /* "LABEL  value": a fixed label column (from data-label; long labels
       wrap) and a value column whose children shrink and truncate. Every
       value is an element -- a pill/badge or an .admin-list__line -- since
       bare text beside the label couldn't truncate. */
    .admin-list__cell[data-label] {
        display: grid;
        grid-template-columns: 8.5rem minmax(0, 1fr);
        column-gap: var(--space-3);
        align-items: center;
    }
    .admin-list__cell[data-label]::before {
        content: attr(data-label);
        grid-column: 1;
        grid-row: 1;
        white-space: normal;
        font-size: var(--text-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-text-muted);
    }
    .admin-list__cell[data-label] > * {
        grid-column: 2;
        justify-self: start;
        max-width: 100%;
    }

    .admin-list__cell--actions {
        order: 99;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-top: var(--space-1);
        padding-top: var(--space-3);
        border-top: 1px solid var(--color-border);
    }
}

/* ==========================================================================
   Calendar dashboard (admin/calendar -- pages/admin/calendar/dashboard.php)

   Desktop (dashboard >= 1150px wide): top row Information 200px, Calendar
   500px, Today's events the rest, 336px tall; bottom row Categories 350px,
   Require review 350px, Upcoming the rest, filling the screen below. Both
   rows line up on the same 4 tracks (200 | 120 | 350 | rest, 30px gaps):
   200 + 30 + 120 + 30 + 350 = 730 = 350 + 30 + 350, and 120 + 30 + 350 = 500.
   Narrower: two columns, then one, each block its content's height.
   ========================================================================== */
.cal-dash {
    container: cal-dash / inline-size;
    --cal-dash-gap: 30px;
    --cal-dash-top: 336px;
}
.cal-dash__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cal-dash-gap);
}
.cal-dash__block {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.cal-dash__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 2.25rem;
    margin-bottom: var(--space-2);
}
.cal-dash__title {
    margin: 0;
    font-size: var(--text-lg);
    color: var(--color-primary);
}
.cal-dash__card {
    flex: 1;
    min-height: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: var(--space-4);
}
.cal-dash__card--list { overflow-y: auto; padding: var(--space-2); }
.cal-dash__empty { margin: 0; padding: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }
.cal-dash__list { display: flex; flex-direction: column; gap: var(--space-2); }
.cal-dash__more {
    display: block;
    padding: var(--space-2) var(--space-3) var(--space-1);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* Two columns: Information + Calendar, Today, Categories + Review, Upcoming. */
.cal-dash__block--info { flex: 0 0 200px; }
.cal-dash__block--calendar { flex: 1 1 0; }
.cal-dash__block--today,
.cal-dash__block--upcoming { flex: 1 1 100%; }
.cal-dash__block--categories,
.cal-dash__block--review { flex: 1 1 calc(50% - var(--cal-dash-gap) / 2); }
.cal-dash__block--info .cal-dash__card,
.cal-dash__block--calendar .cal-dash__card { height: var(--cal-dash-top); flex: none; }
.cal-dash__block--today .cal-dash__card--list,
.cal-dash__block--upcoming .cal-dash__card--list { max-height: 30rem; }
.cal-dash__block--categories .cal-dash__card--list,
.cal-dash__block--review .cal-dash__card--list { max-height: 22rem; }

@container cal-dash (min-width: 1150px) {
    .cal-dash__grid {
        display: grid;
        grid-template-columns: 200px 120px 350px minmax(0, 1fr);
        grid-template-rows: auto minmax(15rem, 1fr);
        grid-template-areas:
            "info cal  cal    today"
            "cats cats review upcoming";
        /* The bottom row fills the window below the top row (the tab bar,
           heading and page padding take 12rem: 160px above the grid, 32px
           below). An alert banner above the page adds its own height. */
        height: max(calc(100vh - 12rem), calc(var(--cal-dash-top) + 2 * 2.75rem + var(--cal-dash-gap) + 15rem));
    }
    .cal-dash__block--info       { grid-area: info; }
    .cal-dash__block--calendar   { grid-area: cal; }
    .cal-dash__block--today      { grid-area: today; }
    .cal-dash__block--categories { grid-area: cats; }
    .cal-dash__block--review     { grid-area: review; }
    .cal-dash__block--upcoming   { grid-area: upcoming; }
    .cal-dash__block--today .cal-dash__card { height: var(--cal-dash-top); flex: none; }
    .cal-dash__block .cal-dash__card--list { max-height: none; }
}

/* Phones: one column, in reading order; Categories shows 5 rows. */
@container cal-dash (max-width: 699.98px) {
    .cal-dash__block { flex: 1 1 100%; }
    .cal-dash__block--info .cal-dash__card,
    .cal-dash__block--calendar .cal-dash__card { height: auto; }
    .cal-dash__block--categories .cal-dash__card--list { max-height: calc(5 * 2.5rem + 2 * var(--space-2)); }
}

/* Information: four equal rows, caption over a large value. */
.cal-dash__stats {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    padding: var(--space-2) var(--space-4);
}
.cal-dash__stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: var(--space-2) 0;
}
.cal-dash__stat:not(:last-child) { border-bottom: 1px solid var(--color-border); }
.cal-dash__stat-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.cal-dash__stat-value {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-primary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.cal-dash__countdown { font-size: var(--text-base); }
.cal-dash__stat-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Event rows (Today / Upcoming / Require review). */
.dash-event { margin: 0; }
.dash-event__button {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-left: 4px solid var(--event-color, var(--color-border));
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.dash-event__button:hover,
.dash-event__button:focus-visible { background: var(--color-bg-sunken); }
.dash-event__line {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.dash-event__line--muted { color: var(--color-text-muted); font-size: var(--text-xs); }
.dash-event__title,
.dash-event__org {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-event__title { font-weight: 700; font-size: var(--text-sm); }
.dash-event__time { flex: none; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.dash-event__category {
    flex: 0 1 auto;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    padding: 1px var(--space-2);
}

/* Categories block rows. */
.dash-category {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.5rem;
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}
.dash-category:nth-child(odd) { background: var(--color-bg-alt); }
.dash-category__order { flex: none; min-width: 1.5rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.dash-category .color-swatch { flex: none; margin-right: 0; }
.dash-category__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

/* Compact month (after vault/tests/cal.php): day numbers in circles that
   scale with the block width; a ring in the first event's
   category color (the number keeps the normal text color); red badge
   with the count when a day has 2+ events. */
.mini-cal {
    container: mini-cal / inline-size;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.mini-cal.is-loading { opacity: 0.5; }
.mini-cal__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding-bottom: var(--space-2);
}
.mini-cal__label { font-weight: 700; text-transform: capitalize; min-width: 10rem; text-align: center; }
.mini-cal__nav {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.mini-cal__nav:hover { background: var(--color-bg-alt); color: var(--color-text); }
.mini-cal__grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: auto repeat(6, 1fr);
    row-gap: 2px;
}
.mini-cal__weekday {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    padding-bottom: var(--space-1);
}
.mini-cal__day {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.mini-cal__num {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(2.4rem, 12cqw);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid transparent;
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.mini-cal__day.is-outside .mini-cal__num { color: var(--color-border); }
.mini-cal__day.is-today .mini-cal__num { border-color: var(--color-border-strong); background: var(--color-bg-alt); }
.mini-cal__day.has-events .mini-cal__num {
    border-color: var(--event-color);
    cursor: help;
}
.mini-cal__day.has-events.is-outside .mini-cal__num { opacity: 0.45; }
.mini-cal__count {
    position: absolute;
    top: -0.35rem;
    right: -0.45rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 3px;
    border-radius: var(--radius-pill);
    background: var(--color-danger);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
}

/* A pill beside a list title (e.g. "Importante" on a category) never shrinks. */
.admin-list__cell--title .status-pill { flex: none; }

/* ==========================================================================
   Forms module admin (pages/admin/forms/*): the question builder
   (form-builder.js), the locked-questions list, reset panel and QR page.
   ========================================================================== */
.form-editor__heading { font-size: var(--text-lg); color: var(--color-primary); margin: var(--space-6) 0 var(--space-3); }
.form-editor__locked { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--space-2); }
.form-builder { display: flex; flex-direction: column; gap: var(--space-3); }
.form-builder__card {
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-gold);
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    padding: var(--space-3) var(--space-4);
}
.form-builder__card.has-errors { border-left-color: var(--color-danger); }
.form-builder__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.form-builder__type { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.form-builder__tools { display: flex; gap: var(--space-2); }
.form-builder__errors { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.form-builder__body .form-group { margin-bottom: var(--space-3); }
.form-builder__body textarea.form-input { min-height: 6rem; resize: vertical; }
/* A grid's "Obligatoria": what it requires, in a list to the checkbox's
   right (under it where there is no room). */
.form-builder__required { flex-wrap: wrap; }
.form-builder__required .form-builder__beside { flex: 0 1 20rem; width: auto; min-width: 0; margin-left: var(--space-3); }
@media (max-width: 640px) {
    .form-builder__required .form-builder__beside { flex-basis: 100%; margin-left: 0; margin-top: var(--space-2); }
}
/* An "Imagen" card: the picture it keeps, small. */
.form-builder__preview { display: block; max-width: 14rem; max-height: 9rem; margin-bottom: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.form-builder__add { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.form-reset { margin-top: var(--space-6); border-color: var(--color-danger-bg); }
.form-reset__title { font-size: var(--text-base); color: var(--color-danger); margin: 0 0 var(--space-2); }

/* Shared QR page (pages/admin/qr.php) and its buttons (_qr_button.php:
   a one-button form, so it sits inline among other row actions). */
.qr-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); max-width: 28rem; }
.qr-card__image { width: 14rem; height: 14rem; image-rendering: pixelated; border-radius: var(--radius-sm); }
.qr-card__url { margin: 0; overflow-wrap: anywhere; }
.qr-button { display: inline-flex; margin: 0; }

/* ==========================================================================
   Store dashboard (admin/store -- pages/admin/store/dashboard.php)
   Row 1: 7 stat boxes, 165px tall. Row 2: top products + heat map, auto
   height. Row 3: payments, discounts, size x color grid, 336px tall.
   30px gaps, like the Calendar dashboard. Container queries on the
   dashboard's own width: 4 boxes per row under 1150px, rows stack under
   950px, 2 boxes per row under 600px.
   ========================================================================== */
.store-dash__header { flex-wrap: wrap; gap: var(--space-3); }
.store-dash__period { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.store-dash__period .form-input { width: auto; min-height: 36px; height: 36px; padding-top: 0; padding-bottom: 0; }
.store-dash__custom { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.store-dash__custom[hidden] { display: none; }

.store-dash {
    container: store-dash / inline-size;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.store-dash__stats {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 30px;
}
.store-dash__stat,
.store-dash__card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    min-width: 0;
}
.store-dash__stat {
    /* The big number scales with the box (cqi) so "$12,345.67" fits. */
    container-type: inline-size;
    height: 165px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-2);
    text-align: center;
}
.store-dash__stat-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.store-dash__stat-value {
    max-width: 100%;
    font-family: var(--font-heading);
    font-size: min(2.25rem, 17cqi);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.store-dash__stat-sub,
.store-dash__stat-label {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.store-dash__stat-sub { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }

.store-dash__row { display: grid; gap: 30px; }
/* Side by side, both cards take the taller one's height (the heat map's,
   normally) and the bar chart grows into it; stacked (below), each card
   keeps its own height. */
.store-dash__row--middle { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); align-items: stretch; }
.store-dash__card--products { display: flex; flex-direction: column; }
.store-dash__card--products .store-dash__chart { flex: 1; }
.store-dash__row--bottom { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr); }
.store-dash__row--bottom .store-dash__card { height: 336px; display: flex; flex-direction: column; }
.store-dash__card { padding: var(--space-4); }
.store-dash__title { margin: 0 0 var(--space-3); font-size: var(--text-lg); color: var(--color-primary); }
.store-dash__title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.store-dash__title-row .store-dash__title { margin: 0; }
.store-dash__empty { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.store-dash__chart { position: relative; width: 100%; }
.store-dash__chart--fill { flex: 1; min-height: 0; }
.store-dash__grid { flex: 1; min-height: 0; overflow: auto; }
.store-dash__grid.is-loading { opacity: 0.5; }
.store-dash__grid-select { width: auto; max-width: 55%; min-height: 32px; height: 32px; padding-top: 0; padding-bottom: 0; font-size: var(--text-sm); }

.store-dash__discounts { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; }
.store-dash__discount {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name kind" "uses amount";
    gap: 2px var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}
.store-dash__discount:last-child { border-bottom: none; }
.store-dash__discount-name { grid-area: name; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-dash__discount .status-pill { grid-area: kind; justify-self: end; }
.store-dash__discount-uses { grid-area: uses; color: var(--color-text-muted); }
.store-dash__discount-amount { grid-area: amount; justify-self: end; font-weight: 600; color: var(--color-danger); font-variant-numeric: tabular-nums; }

@container store-dash (max-width: 1149.98px) {
    .store-dash__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container store-dash (max-width: 949.98px) {
    .store-dash__row--middle,
    .store-dash__row--bottom { grid-template-columns: minmax(0, 1fr); }
}
/* Phones: the boxes become full-width rectangles, one per row -- title and
   its line below on the left, the big number on the right. */
@container store-dash (max-width: 599.98px) {
    .store-dash__stats { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    .store-dash__stat {
        height: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "label value" "sub value";
        align-items: center;
        column-gap: var(--space-4);
        row-gap: var(--space-1);
        padding: var(--space-3) var(--space-4);
        text-align: left;
    }
    .store-dash__stat-label { grid-area: label; }
    .store-dash__stat-sub { grid-area: sub; }
    .store-dash__stat-value { grid-area: value; font-size: 1.75rem; }
}

/* Day x hour heat map (_heatmap.php). Fixed 20x10px cells, 1px gaps,
   sitting to the right of the box; a period too long to fit scrolls
   sideways (store-dashboard.js starts at the newest day). */
.day-heatmap { --heat-cell-w: 20px; --heat-cell-h: 10px; --heat-gap: 1px; --heat-label: 2.4rem; }
.day-heatmap__scroll { overflow-x: auto; padding-bottom: var(--space-1); }
.day-heatmap__grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: max-content;
    margin-left: auto;
}
.day-heatmap__promos,
.day-heatmap__months,
.day-heatmap__cells,
.day-heatmap__days {
    display: grid;
    grid-template-columns: repeat(var(--heat-days), var(--heat-cell-w)) var(--heat-label);
    column-gap: var(--heat-gap);
}
.day-heatmap__promos { grid-template-rows: repeat(var(--promo-rows), 5px); row-gap: 2px; margin-bottom: 2px; }
.day-heatmap__promo { display: block; height: 5px; border-radius: 3px; background: var(--color-gold); }
.day-heatmap__promo--coupon { background: var(--cat-6, #177880); }
.day-heatmap__months,
.day-heatmap__days,
.day-heatmap__hour { font-size: 0.65rem; line-height: 1; color: var(--color-text-muted); }
.day-heatmap__month,
.day-heatmap__day { white-space: nowrap; overflow: visible; text-transform: capitalize; }
.day-heatmap__day { justify-self: center; }
.day-heatmap__cells { grid-template-rows: repeat(var(--heat-rows), var(--heat-cell-h)); row-gap: var(--heat-gap); }
/* Hour labels (every other hour): the grid's last column, pinned to the
   right edge while a long period scrolls. */
.day-heatmap__hour {
    position: sticky;
    right: 0;
    align-self: center;
    padding-left: 6px;
    background: var(--color-bg);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.day-heatmap__cell { display: block; width: var(--heat-cell-w); height: var(--heat-cell-h); border-radius: 2px; }
.day-heatmap__cell--0 { background: transparent; box-shadow: inset 0 0 0 1px var(--color-border); }
.day-heatmap__cell--1 { background: rgba(var(--color-primary-rgb), 0.22); }
.day-heatmap__cell--2 { background: rgba(var(--color-primary-rgb), 0.45); }
.day-heatmap__cell--3 { background: rgba(var(--color-primary-rgb), 0.7); }
.day-heatmap__cell--4 { background: var(--color-primary); }
.day-heatmap__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 3px var(--space-1);
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.day-heatmap__legend-item { display: inline-flex; }
.day-heatmap__legend-promo { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: var(--space-3); }
.day-heatmap__legend-promo .day-heatmap__promo { width: 18px; }

/* Size x color grid (_grid.php): cells shaded by units (--heat 0..1). */
.store-grid-table { border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.store-grid-table th,
.store-grid-table td { padding: var(--space-1) var(--space-2); text-align: center; border: 1px solid var(--color-border); white-space: nowrap; }
.store-grid-table thead th { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); }
.store-grid-table thead th .color-swatch { margin-right: 4px; }
.store-grid-table__head { display: inline-block; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.store-grid-table tbody th,
.store-grid-table tfoot th { text-align: left; font-weight: 700; }
.store-grid-table__cell { min-width: 2.5rem; background: rgba(var(--color-primary-rgb), calc(var(--heat, 0) * 0.55)); font-weight: 600; }
.store-grid-table__total { background: var(--color-bg-alt); font-weight: 700; }
.store-grid-table__grand { color: var(--color-primary); }

/* "Confirm payment" dialog on the order page (orders/view.php). */
.store-approve-dialog {
    width: min(26rem, calc(100vw - 2rem));
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: var(--space-6);
    background: var(--color-bg);
    color: var(--color-text);
}
/* reset.css zeroes dialog margins; put back the browser's centering. */
.store-approve-dialog[open] { margin: auto; }
.store-approve-dialog::backdrop { background: rgba(17, 24, 39, 0.45); }
.store-approve-dialog .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.store-approve-dialog__title { margin: 0 0 var(--space-2); font-size: var(--text-lg); color: var(--color-primary); }
.store-approve-dialog__total { margin: 0 0 var(--space-4); }
.store-approve-dialog .form-actions { margin-top: var(--space-4); }

/* Pagination */
.pagination { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.pagination__link {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
}
.pagination__link.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }

.quick-links { display: flex; gap: var(--space-3); }

/* Content card (form sections, options lists) */
.admin-panel {
    background: var(--color-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}
.admin-panel h2 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
    color: var(--color-text);
}

/* Consejo (pages/admin/settings.php): one column of cards, each with a
   title and a one-line intro, capped at the forms' usual 40rem. The first
   card sits outside the form (its QR button is a form of its own). */
.settings-islands { max-width: 40rem; }
.settings-islands__form { max-width: none; }
.settings-island > .form-group:last-child { margin-bottom: 0; }
.admin-panel .settings-island__title { margin-bottom: var(--space-1); }
.settings-island__intro { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.settings-islands .form-actions { margin-top: 0; }
/* Address row: the link (ellipsis when long), Copiar and QR on the right. */
.settings-address { display: flex; align-items: center; gap: var(--space-3); }
.settings-address__url { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.settings-address__actions { display: flex; flex: 0 0 auto; gap: var(--space-2); }

/* Miembros (pages/admin/members/*): facts list, action buttons, term row. */
.member-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); font-size: var(--text-sm); }
.member-facts dt { color: var(--color-text-muted); }
.member-facts dd { margin: 0; overflow-wrap: anywhere; }
.member-facts__strong { font-weight: 700; font-size: var(--text-base); }
.member-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.member-actions form { margin: 0; }
.member-actions .form-help { flex-basis: 100%; margin: 0; }
.member-term-row { display: flex; gap: var(--space-2); }
.member-term-row select:first-child { max-width: 6rem; }
.member-term-now { font-weight: 600; }
.member-term-close { border-color: var(--color-danger-bg); }
/* My account (pages/admin/account/*): code inputs, 2FA steps, backup codes. */
.account-code-input { max-width: 12rem; font-family: monospace; font-size: var(--text-lg); letter-spacing: 0.15em; }
.account-steps { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--space-6); }
.account-steps > li > strong { display: block; margin-bottom: var(--space-2); }
.account-steps .form-group { margin-bottom: 0; }
.account-totp__qr { display: block; width: 12.5rem; height: 12.5rem; image-rendering: pixelated; margin: var(--space-2) 0; }
.account-totp__secret { display: inline-block; padding: var(--space-2) var(--space-3); background: var(--color-bg-alt); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.account-codes { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.account-codes code { display: block; text-align: center; padding: var(--space-2); background: var(--color-bg-alt); border-radius: var(--radius-sm); }
.account-danger { border-color: var(--color-danger-bg); }

/* Checkbox option row (item form: size/color selection) */
.row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
}
.row label { font-weight: 500; }

/* Store admin: item CRUD, sizes/colors, order approval */
.store-admin-tabs {
    display: inline-flex;
    gap: var(--space-1);
    margin-bottom: var(--space-6);
    padding: var(--space-1);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    /* Four tabs don't fit a phone: scroll inside the bar, not the page. */
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.store-admin-tabs::-webkit-scrollbar { display: none; }
.store-admin-tabs .btn { box-shadow: none; flex: none; }
.store-admin-tabs .btn-secondary { background: transparent; border-color: transparent; }
.store-admin-tabs .btn-secondary:hover { background: var(--color-primary-light); color: var(--color-primary); }

.store-options-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-8);
    align-items: start;
}
.store-options-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.store-options-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}
.store-options-list li form { margin-left: auto; }
/* Payment methods: label / info / delete on one line, then the customer
   message and its collapsible editor underneath. */
.store-options-list .store-payment-item { flex-wrap: wrap; }
.store-payment-item__message, .store-payment-item__edit { flex: 0 0 100%; margin: 0; }
.store-payment-item__edit summary { cursor: pointer; color: var(--color-primary); font-weight: 600; font-size: var(--text-sm); }
.store-payment-item__edit form { margin: var(--space-3) 0 0; }
.store-options-list .store-payment-item__edit form { margin-left: 0; }
/* Discount/coupon rows: same wrap-then-full-width-details shape as
   .store-payment-item (label/value/actions on one line, the collapsible
   edit form -- .store-payment-item__edit, reused as-is -- wrapping onto
   its own row below). */
.store-options-list .store-discount-item { flex-wrap: wrap; }
.store-discount-item .form-static { color: var(--color-text-muted); }
.store-color-item__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.store-color-item__actions form { margin-left: 0; }
.store-options-list__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.store-options-list__actions form { margin-left: 0; }
.store-color-photo-form { display: flex; align-items: center; gap: var(--space-2); }
.store-color-photo-form .form-input { max-width: 12rem; }

/* Right side of the page header when it holds search plus an action. */
.store-admin-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }
.store-admin-toolbar .store-admin-search { margin-bottom: 0; }
.store-admin-search .form-input { height: 36px; min-height: 36px; padding-top: 0; padding-bottom: 0; }
.store-admin-search { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); }
.store-admin-search .form-input { width: auto; min-width: 16rem; }
@media (max-width: 600px) {
    .store-admin-search { width: 100%; }
    .store-admin-search .form-input { flex: 1; min-width: 0; }
    .store-admin-toolbar { width: 100%; }
}
.store-orders-filter { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
/* The orders list's discount filter, its sortable Date header (a link in
   the header row, and above the list where that row is hidden) and the
   discount line under a row's status (docs/STORE_ORDER_FILTERS.md). */
.store-orders-discount { display: flex; gap: var(--space-2); align-items: center; }
.store-orders-discount .form-input { width: auto; max-width: 18rem; height: 36px; min-height: 36px; padding-top: 0; padding-bottom: 0; }
.admin-list__sort { color: inherit; text-decoration: none; }
.admin-list__sort:hover, .store-orders-sort-narrow a:hover { text-decoration: underline; }
.store-orders-sort-narrow { display: none; margin: 0 0 var(--space-2); font-size: var(--text-sm); text-align: right; }
.store-orders-sort-narrow a { color: inherit; text-decoration: none; font-weight: 600; }
@container admin-list (max-width: 949.98px) {
    .store-orders-sort-narrow { display: block; }
}
.store-order-discount { margin-top: var(--space-1); }

/* Event form's organization picker (org-picker.js): chips for what's
   checked, a filter box, and a scrollable checkbox list. */
.org-picker { display: flex; flex-direction: column; gap: var(--space-2); }
.org-picker__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.org-picker__chips:empty { display: none; }
.org-picker__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-pill);
    background: var(--color-primary-light);
    color: var(--color-primary);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}
.org-picker__chip span { font-size: 1.1em; line-height: 1; }
.org-picker__list {
    max-height: 14rem;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) 0;
    background: var(--color-bg);
}
.org-picker__option { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); cursor: pointer; }
.org-picker__option[hidden] { display: none; }
.org-picker__option:hover { background: var(--color-bg-alt); }

/* Orders "All" tab: how many orders it leaves out, and where to find them. */
.store-orders-hidden-note {
    margin: var(--space-4) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
}

/* Store order page: emails the server couldn't send, each with Resend. */
.email-failures {
    border: 1px solid var(--color-danger);
    background: var(--color-danger-bg);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
}
.email-failures__title { color: var(--color-danger); font-size: var(--text-base); margin: 0 0 var(--space-3); }
.email-failures__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
}
.email-failures__info { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1 1 16rem; }
.email-failures__meta { font-size: var(--text-sm); color: var(--color-text-muted); }
.email-failures__error { font-size: var(--text-xs); color: var(--color-danger); overflow-wrap: anywhere; }
.email-unsent-badge { margin-top: var(--space-1); }

/* The html5-qrcode scanner UI (icon, "Request Camera Permissions" button)
   is styled inline in vault/pages/admin/store/orders/scan.php itself, not
   here -- confirmed by a direct A/B test that identical rules placed here
   don't take effect on that page, while the inline version reliably does. */

/* A module's state control (pages/admin/_module_state.php) */
.module-state__option { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) 0; cursor: pointer; }
.module-state__option input { margin-top: 0.3rem; accent-color: var(--color-primary); flex: none; }
.module-state__option .form-help { display: block; margin-top: 0; }

/* Consejo -> Módulos: the order of the home page's tiles */
.settings-modules { display: flex; flex-direction: column; }
.settings-modules__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--color-border); }
.settings-modules__row:first-child { border-top: none; }
.settings-modules__name { flex: 1; min-width: 0; font-weight: 600; }
.settings-modules__state { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; }
.settings-modules__state--active { color: var(--color-success); font-weight: 600; }
.settings-modules__link { font-size: var(--text-sm); color: var(--color-gold-text); font-weight: 600; white-space: nowrap; }
.settings-modules__move { display: flex; gap: var(--space-1); }
.settings-modules__move .btn[disabled] { opacity: 0.4; cursor: default; }

/* Página de inicio (pages/admin/home/index.php): what waits to be published,
   and a block as a row with its settings folded under it */
.home-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.home-status__text { flex: 1 1 14rem; margin: 0; }
.home-status__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.home-status__actions form, .home-block__actions form { margin: 0; }
.home-blocks { display: flex; flex-direction: column; }
.home-block { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.home-block:first-child { border-top: none; padding-top: 0; }
.home-block__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.home-block__name { flex: 1 1 10rem; min-width: 0; font-weight: 600; }
.home-block__note { display: block; font-weight: 400; font-size: var(--text-sm); color: var(--color-text-muted); }
.home-block__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.home-block__actions .btn[disabled] { opacity: 0.4; cursor: default; }
.home-block details { margin-top: var(--space-2); }
.home-block summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; color: var(--color-link); }
.home-block details > * + * { margin-top: var(--space-3); }
.home-figure { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.home-figure__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }

/* A section the council's plan doesn't include (pages/admin/locked.php) */
.module-locked { max-width: 34rem; margin: var(--space-12) auto; text-align: center; }
.module-locked__icon { width: 2.75rem; height: 2.75rem; margin: 0 auto var(--space-4); color: var(--color-text-muted); display: block; }
.module-locked__text { color: var(--color-text-muted); }
.settings-modules__state--locked { color: var(--color-warning); font-weight: 600; }

/* Organizaciones -> editar: the "Subcuenta" panel (pages/admin/organizations/form.php) */
.subaccount__facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.subaccount__facts dt { font-weight: 600; }
.subaccount__facts dd { margin: 0; overflow-wrap: anywhere; }
.subaccount__actions { display: flex; flex-direction: column; gap: var(--space-6); }
.subaccount__inline { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.subaccount__inline .form-group { flex: 1; min-width: 14rem; margin-bottom: 0; }

/* How many items wait: the Organizaciones menu item and its Panel tab */
.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    margin-left: auto;
    border-radius: var(--radius-pill);
    background: var(--color-danger);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1;
}
.store-admin-tabs .count-badge { margin-left: var(--space-1); }

/* Organizaciones -> Panel: counters and the review queue (pages/admin/organizations/panel.php) */
.review-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.review-counter { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: 0; }
.review-counter__number { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; color: var(--color-primary); line-height: 1; }
.review-counter--waiting .review-counter__number { color: var(--color-danger); }
.review-counter__label { font-size: var(--text-sm); color: var(--color-text-muted); }
.review-item__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.review-item__head a { font-weight: 600; color: var(--color-primary); }
.review-item__when { margin-left: auto; font-size: var(--text-sm); color: var(--color-text-muted); }
.review-item__title { margin-bottom: var(--space-3); }
.review-item__text { white-space: pre-line; }
.review-item__decide { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }

/* An organization's roster (pages/admin/roster/list.php) */
.roster-request { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.roster-request:first-of-type { border-top: none; }
.roster-request__who { flex: 1; min-width: 12rem; display: flex; flex-direction: column; }
.roster-request__reject { display: flex; gap: var(--space-2); flex: 1; min-width: 16rem; }
.roster-request__reject .form-input { min-height: 36px; }
.member-organizations { display: flex; flex-direction: column; gap: var(--space-1); }
.roster-answer { font-size: var(--text-sm); }
/* What one person answered on the membership form, behind "Ver respuestas" (roster/list.php). */
.roster-answers__list { margin: 0; max-height: 60vh; overflow-y: auto; }
.roster-answers__list dt { margin-top: var(--space-3); font-size: var(--text-sm); font-weight: 600; }
.roster-answers__list dt:first-child { margin-top: 0; }
.roster-answers__list dd { margin: var(--space-1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Confirming a payment (roster/list.php): what was paid for, how much, how, and a note. */
.roster-pay__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); flex: 1 1 28rem; }
.roster-pay__form label { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.roster-pay__form .form-label { font-size: var(--text-sm); }
.roster-pay__note { flex: 1 1 12rem; }
/* A plan's payment options, a row each (roster/plan.php). */
.roster-plan-option { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); padding: var(--space-2) 0; }
.roster-plan-option label { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 10rem; min-width: 0; }
/* A voided payment stays in the list (roster/payments.php). */
.roster-payment--void .admin-list__title, .roster-payment--void .admin-list__cell > .admin-list__line:first-child { text-decoration: line-through; color: var(--color-text-muted, #6b7280); }
.roster-request__reject select.form-input { min-height: 36px; width: auto; }
/* A paid request: "Ya pagó" sits under the name, and rejecting it (with the refund) wraps rather than squeezing its button. */
.roster-request__who .status-pill { align-self: flex-start; }
/* Pagos: room between the totals and the date range under them. */
.roster-payments__figures { margin-bottom: var(--space-6); }
/* Miembros -> Configuración: the organization's own questions start apart from the council's (and their Guardar). */
.roster-settings__own { margin-top: var(--space-6); }
.roster-request__reject--refund { flex-wrap: wrap; min-width: 20rem; }
.roster-request__reject--refund .form-input:first-of-type { flex: 1 1 10rem; }
.roster-request__reject--refund .btn { white-space: nowrap; }

/* Mensajes -> Buzón (pages/admin/messages/list.php) */
.message-settings__sub { margin-left: var(--space-6); }

/* Encuestas (pages/admin/polls/) */
.poll-choices { display: flex; flex-direction: column; gap: var(--space-2); }
.poll-choices__row { display: flex; gap: var(--space-2); }
.poll-choices__row .poll-choices__emoji { flex: none; width: 4.5rem; text-align: center; }
.poll-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 var(--space-6); }
.poll-voters { list-style: none; padding: 0; margin: 0; }
.poll-voters li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--color-border); }
.poll-voters li:first-child { border-top: none; }
.poll-voters li form { margin: 0; }
.poll-people__group { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.poll-people__members { max-height: 20rem; overflow-y: auto; margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.poll-choices__row { align-items: center; flex-wrap: wrap; }
.poll-choices__row > .form-input:not(.poll-choices__emoji) { flex: 1 1 12rem; min-width: 0; }
.poll-choices__thumb { width: 2.5rem; height: 2.5rem; object-fit: cover; border-radius: var(--radius); flex: none; }
.poll-choices__file { flex: 0 1 15rem; min-width: 0; font-size: var(--text-sm); }
.poll-dynamic { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); margin: 0 0 var(--space-4); }
.poll-dynamic legend { padding: 0 var(--space-2); }
.poll-waiting__text { flex: 1; min-width: 12rem; display: flex; flex-direction: column; }
.poll-manage { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.poll-manage:first-of-type { border-top: none; }
.poll-manage form { display: flex; gap: var(--space-2); margin: 0; }
.poll-manage__rename { flex: 1 1 16rem; }
.poll-manage__rename .form-input { flex: 1; min-width: 0; }
.poll-manage__merge .form-input, .poll-waiting__as .form-input { width: auto; max-width: 14rem; }
.poll-manage__count { flex: none; min-width: 6.5rem; }
.poll-waiting__as { display: flex; gap: var(--space-2); margin: 0; }

/* Espacios (pages/admin/spaces/) */
.space-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-4); }
.space-form__dims { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.space-form__dims .form-input { width: auto; flex: 1 1 7rem; max-width: 12rem; }
.space-form__checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-1) var(--space-4); }
.space-form__check { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; cursor: pointer; }
.space-form__check input { accent-color: var(--color-primary); flex: none; }
.space-form__check .icon { flex: none; color: var(--color-text-muted); }
.space-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-4); }
.space-photos__item { margin: 0; }
.space-docs { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.space-docs__item { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg-sunken); }
.space-docs__item .form-group:last-child { margin-bottom: 0; }
.space-docs__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.space-docs__file { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.space-docs__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.space-docs__new { margin-top: var(--space-4); }
.space-docs__nofile { font-size: var(--text-sm); color: var(--color-text-muted); }
.space-res-docs__title { font-size: var(--text-base); margin: var(--space-4) 0 var(--space-2); }
.space-res-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.space-res-docs__item { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); }
.space-res-docs__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.space-res-docs__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.space-res-docs__exempt { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 18rem; }
.space-res-docs__exempt .form-input { flex: 1 1 10rem; }
.space-week__flag { display: inline-flex; vertical-align: middle; color: var(--color-danger); }
.space-week__flag .icon { width: 14px; height: 14px; }
.space-panel-owed { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.space-photos__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--color-bg-sunken); }
.space-photos__item figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-top: var(--space-2); }
.space-photos__item form { margin: 0; }
.space-hours { display: flex; flex-direction: column; gap: var(--space-2); }
.space-hours__row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.space-hours__day { display: flex; align-items: center; gap: var(--space-2); min-width: 8.5rem; text-transform: capitalize; cursor: pointer; }
.space-hours__day input { accent-color: var(--color-primary); }
.space-hours__row .form-input { width: auto; }
.space-res-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.space-res-filters label { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 10rem; }
.space-res-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin: 0 0 var(--space-4); }
.space-res-line label { display: flex; flex-direction: column; gap: var(--space-1); }
.space-res-line .form-input { width: auto; }
.space-res-line > span { flex: 1 1 14rem; }
.space-week__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.space-week__bar .form-input { width: auto; max-width: 20rem; }
.space-week__nav { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.space-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-6); }
.space-week__day { min-width: 0; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); }
.space-week__day.is-today { border-color: var(--color-primary); }
.space-week__date { font-size: var(--text-sm); font-weight: 700; text-transform: capitalize; margin: 0; }
.space-week__hours { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.space-week__item { display: flex; flex-direction: column; padding: var(--space-2); margin-top: var(--space-1); border-radius: var(--radius); border-left: 3px solid var(--color-success); background: var(--color-success-bg); color: var(--color-text); text-decoration: none; font-size: var(--text-xs); overflow-wrap: anywhere; }
.space-week__item:hover { box-shadow: var(--shadow-xs); }
.space-week__item--pending { border-left-color: var(--color-gold-text); background: var(--color-gold-light); }
.space-week__item--block { border-left-color: var(--color-text-muted); background: var(--color-bg-sunken); }
.space-week__time { font-weight: 700; }
.space-week__note { color: var(--color-text-muted); }
.space-week__empty { margin: 0; color: var(--color-border); text-align: center; }
@media (max-width: 60rem) { .space-week { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .space-week { grid-template-columns: 1fr; } }

/* ==========================================================================
   main.css's shared pieces (buttons, fields, tables, pills, titles) as the
   admin wears them. main.css itself stays as the public pages need it.
   ========================================================================== */
.admin-body h1, .admin-body h2, .admin-body h3,
.admin-skin h1, .admin-skin h2, .admin-skin h3 { font-weight: 600; letter-spacing: 0; color: var(--color-text); }
.admin-body .page-title { font-size: 1.5rem; margin-bottom: var(--space-6); color: var(--color-text); }

.admin-body .btn, .admin-skin .btn, .admin-skin .auth-card button[type="submit"] { border-radius: var(--radius); padding: 0.5625rem 1.25rem; font-weight: 500; }
.admin-body .btn-sm { padding: var(--space-1) var(--space-3); }
.admin-body .btn-icon { padding-left: var(--space-3); padding-right: var(--space-3); }
.admin-body .btn-primary, .admin-skin .btn-primary, .admin-skin .auth-card button[type="submit"] { background: var(--color-primary); color: var(--color-on-primary); box-shadow: none; }
.admin-body .btn-primary:hover, .admin-skin .btn-primary:hover, .admin-skin .auth-card button[type="submit"]:hover { background: var(--color-primary-dark); box-shadow: none; transform: none; }
.admin-body .btn-secondary { border-color: var(--color-border-strong); }
.admin-body .btn-secondary:hover { border-color: var(--color-border-strong); }
.admin-body .btn-danger { border-color: var(--color-danger-border); }

.admin-body .form-input, .admin-skin .form-input, .admin-skin .auth-card input { border-color: var(--color-border-strong); background: var(--color-bg-input); }
.admin-body .form-input:focus, .admin-skin .form-input:focus, .admin-skin .auth-card input:focus { border-color: var(--color-primary); }
:where(.admin-body, .admin-skin) a { color: var(--color-link); }
.admin-body .form-help a { color: var(--color-link); }
/* Under a field left empty that something needs in order to work. */
.form-help--needed { color: var(--color-gold-text); font-weight: 600; }
.admin-skin .auth-shell__brand .icon { color: var(--color-primary); }
.admin-skin .auth-card a { color: var(--color-link); }
.admin-body input[type="checkbox"], .admin-body input[type="radio"] { accent-color: var(--color-primary); }

.admin-body .table-wrap { border: none; }
.admin-body .data-table th, .admin-body .data-table td { padding: var(--space-4); }
.admin-body .data-table th { background: var(--color-bg-sunken); color: var(--color-text); font-size: var(--text-sm); font-weight: 600; text-transform: none; letter-spacing: 0; }

.admin-body .status-pill { font-weight: 600; border-radius: var(--radius-sm); padding: 0.25em var(--space-3); }
.admin-body .status-pill--neutral { background: var(--color-border); }
.admin-body .status-pill--alert-warning { background: var(--color-gold-light); color: var(--color-gold-text); }

/* The colour fields of an account or an organization (pages/admin/_brand_fields.php). */
.brand-field { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.brand-field .form-input--color { flex: none; width: 4.5rem; }

/* ==========================================================================
   Organizaciones: the grid of cards (pages/admin/organizations/list.php).
   Each card carries its organization's colours as --k... in its style
   attribute (App\Classes\Brand::CardStyle()).
   The card itself (.org-tile, its banner and patterns, logo, figures and
   button) is in main.css: the public directory wears it too. Here, what only
   the admin has: the panel around the grid, the pills, the menu, the dark look.
   ========================================================================== */
.org-tiles { padding: 0; }
.org-tiles__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); }
.org-tiles__bar .store-admin-search { margin-bottom: 0; }
.org-tiles .empty-state { padding: var(--space-8) var(--space-6); }
.org-tiles__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-4); padding: var(--space-6); }

html[data-theme="dark"] .org-tile { --c-light: var(--k-dm-light); --c-link: var(--k-dm-link); }

.org-tile__pills { position: absolute; top: var(--space-3); left: var(--space-3); right: 3.5rem; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.org-tile__pills .status-pill { box-shadow: var(--shadow-xs); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.org-tile__pills .status-pill--neutral { background: var(--color-bg); color: var(--color-text-muted); }
.org-tile__pills .status-pill--success, .org-tile__pills .status-pill--warning, .org-tile__pills .status-pill--danger { background-image: linear-gradient(var(--color-bg), var(--color-bg)); background-blend-mode: normal; background-color: var(--color-bg); }

/* The menu on the banner's corner: a <details>, like the sidebar's user menu. */
.org-tile__menu { position: absolute; top: var(--space-3); right: var(--space-3); }
.org-tile__menu summary { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.25); color: #fff; cursor: pointer; list-style: none; backdrop-filter: blur(4px); }
.org-tile__menu summary::-webkit-details-marker { display: none; }
.org-tile__menu summary:hover, .org-tile__menu[open] summary { background: rgba(0, 0, 0, 0.35); }
.org-tile__menu summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.org-tile__menu summary .icon { width: 1.1rem; height: 1.1rem; fill: currentColor; stroke: none; }
.org-tile__menu-panel { position: absolute; z-index: 30; top: calc(100% + var(--space-2)); right: 0; min-width: 12rem; padding: var(--space-2); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-card-hover); }
.org-tile__menu-panel form { margin: 0; }
.org-tile__action { display: block; width: 100%; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text); font-family: inherit; font-size: var(--text-sm); font-weight: 500; text-align: left; cursor: pointer; }
.org-tile__action:hover { background: var(--color-bg-alt); }
.org-tile__action--danger { color: var(--color-danger); }
.org-tile__action--danger:hover { background: var(--color-danger-bg); }

.admin-body .org-tile__name { max-width: 100%; margin: var(--space-2) 0 0; font-size: var(--text-lg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.brand-banner { display: block; width: 100%; max-width: 24rem; aspect-ratio: 3 / 1; object-fit: cover; border-radius: var(--radius); margin-bottom: var(--space-2); }

/* ==========================================================================
   Mensajes: the inbox laid out like a mail program (pages/admin/messages/
   mailbox.php) -- folders and conversations on the left, the one chosen on
   the right. Each pane scrolls by itself; on a narrow screen one shows at a
   time (.mailbox--open = a conversation is chosen).
   ========================================================================== */
.mailbox { display: grid; grid-template-columns: 22rem minmax(0, 1fr); height: calc(100vh - 8rem); min-height: 30rem; background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.mailbox__side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--color-border); }
.mailbox__new { margin: var(--space-4) var(--space-4) 0; width: auto; }
.mailbox__folders { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4) var(--space-3) var(--space-3); }
.mailbox__folder { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius); color: var(--color-nav); font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
.mailbox__folder span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailbox__folder .icon { flex: none; width: 1.15rem; height: 1.15rem; }
.mailbox__folder:hover { background: var(--color-bg-alt); color: var(--color-text); }
.mailbox__folder.is-active { background: var(--color-primary-light); color: var(--color-link); font-weight: 600; }
.mailbox__folder .count-badge { margin-left: 0; }
.mailbox__find { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.mailbox__find .form-input { min-height: 38px; font-size: var(--text-sm); }
.mailbox__find input { flex: 1; min-width: 0; }
.mailbox__find select { flex: none; width: auto; }
.mailbox__note { margin: var(--space-3) var(--space-4); }
.mailbox__list { flex: 1; min-height: 0; overflow-y: auto; }
.mailbox__list .empty-state { padding: var(--space-8) var(--space-4) var(--space-2); }

.mail-row { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); border-left: 3px solid transparent; color: var(--color-text-muted); font-size: var(--text-sm); text-decoration: none; }
.mail-row:hover { background: var(--color-bg-alt); }
.mail-row.is-current { background: var(--color-primary-light); border-left-color: var(--color-primary); }
.mail-row__top, .mail-row__bottom { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.mail-row__who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); font-weight: 500; }
.mail-row__when { flex: none; font-size: var(--text-xs); }
.mail-row__subject, .mail-row__preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row__subject { color: var(--color-text); }
.mail-row__preview { flex: 1; min-width: 0; font-size: var(--text-xs); min-height: 1.2em; }
.mail-row.is-unread .mail-row__who, .mail-row.is-unread .mail-row__subject { font-weight: 700; }
.mail-row.is-unread .mail-row__when { color: var(--color-link); font-weight: 600; }
.mail-row__dot { display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: var(--space-2); border-radius: 50%; background: var(--color-primary); }
.mail-row__tag { flex: none; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-border); color: var(--color-text-muted); font-size: 0.6875rem; font-weight: 600; line-height: 1.6; }
.mail-row__tag--waiting { background: var(--color-gold-light); color: var(--color-gold-text); }

.mailbox__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mailbox__back { display: none; align-items: center; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
.mailbox__back .icon { width: 1.1rem; height: 1.1rem; }
.mailbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); }
.mailbox__bar form { margin: 0; flex: none; }
.mailbox__title { min-width: 0; }
.admin-body .mailbox__title h2 { margin: 0; font-size: var(--text-lg); overflow-wrap: anywhere; }
.mailbox__title p { margin: 2px 0 0; color: var(--color-text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.mailbox__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.mailbox__blank { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-8); color: var(--color-text-muted); text-align: center; }
.mailbox__blank .icon { width: 3rem; height: 3rem; opacity: 0.5; }
.mailbox__blank p { margin: 0; }

/* A one-way item (a suggestion, a notice) reads as a letter. */
.mail-block { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); }
.mail-block__from { margin: 0 0 var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-sm); }
.mail-block__from strong { color: var(--color-text); }
.admin-body .mail-block h3 { margin: 0 0 var(--space-2); font-size: var(--text-base); }
.mail-block.stack-form { max-width: none; }

@media (max-width: 900px) {
    .mailbox { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
    .mailbox__side { border-right: 0; }
    .mailbox__list { max-height: none; overflow: visible; }
    .mailbox__main { display: none; }
    .mailbox--open .mailbox__side { display: none; }
    .mailbox--open .mailbox__main { display: flex; min-height: 70vh; }
    .mailbox__back { display: flex; }
    .mailbox__bar, .mailbox__body { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* A chat in the mailbox, drawn the way messaging apps do
   (pages/admin/messages/_thread.php, admin-chat.js). */
.mailbox__bar .admin-avatar { flex: none; }
.mailbox__bar .mailbox__title { flex: 1; }
.wa { display: flex; flex-direction: column; gap: var(--space-1); margin-top: auto; }
.wa__day { display: flex; justify-content: center; margin: var(--space-3) 0 var(--space-2); }
.wa__day span { padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--color-bg-alt); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; }
.wa__msg { display: flex; flex-direction: column; align-items: flex-start; max-width: min(78%, 34rem); }
.wa__msg--mine { align-self: flex-end; align-items: flex-end; }
.wa__author { margin: var(--space-2) var(--space-2) 2px; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; }
.wa__bubble { padding: var(--space-2) var(--space-3); border-radius: 1rem; border-bottom-left-radius: 0.25rem; background: var(--color-bg-alt); color: var(--color-text); font-size: var(--text-sm); line-height: 1.45; overflow-wrap: anywhere; text-align: left; }
.wa__msg--mine .wa__bubble { border-radius: 1rem; border-bottom-right-radius: 0.25rem; background: var(--color-primary); color: var(--color-on-primary); }
.wa__bubble a { color: inherit; text-decoration: underline; }
.wa__meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 0.45em 0 -0.15em var(--space-3); font-size: 0.6875rem; line-height: 1; opacity: 0.75; white-space: nowrap; }
/* One tick = sent; the second is drawn once the member has seen it. */
.wa__tick { width: 1.05rem; height: 0.7rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wa__tick-2 { display: none; }
.wa__tick.is-seen .wa__tick-2 { display: inline; }
.wa__meta:has(.wa__tick.is-seen) { opacity: 1; }

.wa-compose { padding: var(--space-3) var(--space-6) var(--space-3); border-top: 1px solid var(--color-border); }
.wa-compose__row { display: flex; align-items: flex-end; gap: var(--space-3); }
.wa-compose textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 150px; padding: 0.625rem var(--space-4); border-radius: 1.375rem; resize: none; line-height: 1.4; }
.wa-compose__send { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); cursor: pointer; transition: background-color 150ms var(--ease); }
.wa-compose__send:hover { background: var(--color-primary-dark); }
.wa-compose__send:disabled { opacity: 0.6; cursor: default; }
.wa-compose__send .icon { width: 1.25rem; height: 1.25rem; fill: currentColor; stroke: none; }
.wa-compose .form-help { margin: var(--space-2) var(--space-4) 0; font-size: var(--text-xs); }
.wa-compose__error { margin: 0 var(--space-4) var(--space-2); }
@media (max-width: 900px) { .wa-compose { padding-left: var(--space-4); padding-right: var(--space-4); } }

/* ==========================================================================
   "Mi panel" (pages/admin/dashboard.php) and the pin buttons that feed it
   (App\Classes\Pins::Button(), on each pinnable piece of a dashboard).
   ========================================================================== */
.pin { margin: 0; }
.pin__button { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: var(--radius); background: none; color: var(--color-text-muted); cursor: pointer; opacity: 0.55; transition: opacity 150ms var(--ease), background-color 150ms var(--ease), color 150ms var(--ease); }
.pin__button .icon { width: 1rem; height: 1rem; }
.pin__button:hover, .pin__button:focus-visible { opacity: 1; background: var(--color-bg-alt); color: var(--color-text); }
.pin__button.is-pinned { opacity: 1; color: var(--color-link); }
.pin__button.is-pinned .icon { fill: currentColor; }
.pin__button:disabled { opacity: 0.25; cursor: default; background: none; }
/* On a dashboard's own figure: in its corner. */
.store-dash__stat, .cal-dash__stat { position: relative; }
.store-dash__stat > .pin, .cal-dash__stat > .pin { position: absolute; top: 2px; right: 2px; }
.cal-dash__stat > .pin { top: 50%; right: 0; transform: translateY(-50%); }

.my-panel__figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: var(--space-4); margin-bottom: var(--space-3); }
.my-panel__figure { container-type: inline-size; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; min-height: 10.5rem; padding: var(--space-8) var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--color-bg); box-shadow: var(--shadow-card); text-align: center; }
.my-panel__tools { position: absolute; top: 2px; right: 2px; left: 2px; display: flex; justify-content: flex-end; gap: 0; }
.my-panel__tools form { margin: 0; }
.my-panel__label { max-width: 100%; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-panel__label span { display: block; color: var(--color-link); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.my-panel__label:hover { color: var(--color-text); }
.my-panel__value { max-width: 100%; font-size: min(2.25rem, 17cqi); font-weight: 700; line-height: 1.1; color: var(--color-primary); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-panel__value.cal-dash__countdown { font-size: min(1.5rem, 11cqi); }
.my-panel__sub { max-width: 100%; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-panel__empty { max-width: 34rem; text-align: center; padding: var(--space-8) var(--space-6); }
.my-panel__empty > .icon { width: 2.5rem; height: 2.5rem; color: var(--color-text-muted); opacity: 0.6; }
.my-panel__empty p { color: var(--color-text-muted); }
.my-panel__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-bottom: 0; }
@media (max-width: 480px) { .my-panel__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .my-panel__figure { min-height: 9.5rem; padding-left: var(--space-2); padding-right: var(--space-2); } }

/* A block's title with what goes beside it (its pin, a link). */
.message-list__heading { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-3); }
.panel-block__head { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-6) 0 var(--space-3); }
.panel-block__head .message-list__heading { margin: 0 auto 0 0; }
.cal-dash__head .cal-dash__title { margin-right: auto; }
.store-dash__title-row .store-dash__title { margin-right: auto; }
.store-dash__card > .store-dash__title-row { min-height: 1.75rem; }

/* "Mi panel": the whole blocks, two to a row, the wide ones across. */
.my-panel__blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; margin-top: var(--space-6); }
.my-panel__block { min-width: 0; }
.my-panel__block--wide { grid-column: 1 / -1; }
.my-panel__from { display: block; margin-bottom: var(--space-1); color: var(--color-link); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; }
.my-panel__tools--block { position: static; display: inline-flex; flex: none; }
.my-panel__block .panel-block__head { margin-top: 0; }
.my-panel__block .cal-dash__card--list { max-height: 22rem; }
.my-panel__block .store-dash__card { padding: var(--space-4); }
.my-panel__block .store-dash__card--payments, .my-panel__block .store-dash__card--discounts { height: 336px; display: flex; flex-direction: column; }
.my-panel__block .store-dash__card--products .store-dash__chart { height: 280px; }
@media (max-width: 900px) { .my-panel__blocks { grid-template-columns: minmax(0, 1fr); } }

/* The "Panel" of the modules ModuleDash draws (pages/admin/_module_panel.php):
   figures in a row, then short lists (_dash_list.php, also on "Mi panel"). */
.mod-dash__figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: var(--space-6); }
.mod-dash__figures .store-dash__stat { border: 0; }
.mod-dash__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-6); align-items: start; }
.mod-dash__lists--one { grid-template-columns: minmax(0, 1fr); max-width: 48rem; }
.dash-list { background: var(--color-bg); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.dash-list__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); color: var(--color-text); font-size: var(--text-sm); text-decoration: none; }
.dash-list__row:not(:last-child) { border-bottom: 1px solid var(--color-border); }
.dash-list__row:hover { background: var(--color-bg-alt); }
.dash-list__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-list__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-list__line { color: var(--color-text-muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-list__right { flex: none; color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
.dash-list__row .status-pill { flex: none; }
.dash-list__empty { background: var(--color-bg); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: var(--space-6); }
@media (max-width: 900px) { .mod-dash__lists { grid-template-columns: minmax(0, 1fr); } .dash-list__right { display: none; } }
.panel-block__head { min-height: 2.25rem; }
.mod-dash__lists { margin-top: var(--space-2); }

/* Miembros of an organization: "Cambiar inicio" on a running membership. */
.roster-start { position: relative; }
.roster-start summary { list-style: none; }
.roster-start summary::-webkit-details-marker { display: none; }
.roster-start__form { position: absolute; z-index: 20; top: calc(100% + var(--space-2)); right: 0; width: 18rem; padding: var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-card-hover); text-align: left; white-space: normal; }
.roster-start__form .form-help { margin: var(--space-2) 0 var(--space-3); }
.admin-list:has(.roster-start[open]) .admin-list__table, .admin-list__cell:has(.roster-start[open]) { overflow: visible; }

/* ==========================================================================
   Tienda: one order laid out as an invoice (pages/admin/store/orders/view.php).
   A bar with its state and the next step, then the sheet; only the sheet
   prints.
   ========================================================================== */
.invoice { background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.invoice__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); }
.invoice__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.invoice__actions form { margin: 0; }
.invoice__body { padding: var(--space-8) var(--space-6); }
.invoice__sheet { max-width: 52rem; margin: 0 auto; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 4px 8px 24px rgba(17, 24, 39, 0.06); font-size: var(--text-sm); color: var(--color-text-muted); }
.invoice__sheet p { margin: 0 0 var(--space-1); }
.invoice__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); border-bottom: 1px solid var(--color-border); }
.admin-body .invoice__number { margin: 0 0 var(--space-2); font-size: var(--text-xl); }
.invoice__issuer { max-width: 20rem; text-align: right; }
/* The letterhead's lines sit close together under the logo. */
.invoice__issuer p { margin: 0; line-height: 1.4; }
.invoice__issuer strong { color: var(--color-text); }
.invoice__logo { display: block; max-width: 11rem; max-height: 4rem; margin: 0 0 var(--space-2) auto; }
html[data-theme="dark"] .invoice__logo { background: #fff; border-radius: var(--radius); padding: var(--space-1); }
.invoice__content { padding: var(--space-6); }
.invoice__parties { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-6); }
.admin-body .invoice__parties h3 { margin: 0 0 var(--space-2); font-size: var(--text-base); }
.invoice__facts { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--space-3); margin: 0; }
.invoice__facts dt::after { content: ":"; }
.invoice__facts dd { margin: 0; color: var(--color-text); overflow-wrap: anywhere; }
.invoice__table-wrap { overflow-x: auto; }
.invoice__table { width: 100%; border-collapse: collapse; }
.invoice__table th, .invoice__table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: middle; }
.invoice__table th { background: var(--color-bg-sunken); color: var(--color-text); font-weight: 600; white-space: nowrap; }
.invoice__table td { color: var(--color-text); }
.invoice__table .invoice__num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.invoice__item { display: flex; align-items: center; gap: var(--space-3); }
.invoice__item small { display: block; color: var(--color-text-muted); }
.invoice__photo { flex: none; width: 2.5rem; height: 2.5rem; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-bg-alt); }
.invoice__summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); }
.invoice__notes strong { color: var(--color-text); }
.invoice__totals { width: auto; min-width: 15rem; flex: none; border-collapse: collapse; margin-left: auto; }
.invoice__totals td { padding: 2px 0 2px var(--space-8); text-align: right; font-variant-numeric: tabular-nums; }
.invoice__totals td:first-child { padding-left: 0; text-align: left; }
.invoice__totals td:last-child { color: var(--color-text); font-weight: 600; }
.invoice__total td { padding-top: var(--space-2); border-top: 1px solid var(--color-border); color: var(--color-text); font-size: var(--text-base); font-weight: 700; }
.invoice__signatures { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-6); margin-top: var(--space-12); }
.invoice__signature { display: flex; flex-direction: column; align-items: center; min-width: 12rem; }
.invoice__signature img { max-width: 12rem; max-height: 5rem; margin-bottom: var(--space-1); background: #fff; border-radius: var(--radius-sm); }
.invoice__signature span { width: 100%; padding: var(--space-2) var(--space-3) 0; border-top: 1px solid var(--color-border-strong); color: var(--color-text); text-align: center; }
@media (max-width: 640px) {
    .invoice__bar, .invoice__body { padding-left: var(--space-3); padding-right: var(--space-3); }
    .invoice__head, .invoice__content { padding: var(--space-4); }
    .invoice__issuer { text-align: left; }
    .invoice__logo { margin-left: 0; }
    .invoice__table th, .invoice__table td { padding: var(--space-2); }
}

/* On paper: the sheet alone, in ink on white whatever look is on screen. */
@media print {
    .admin-body, html[data-theme="dark"] .admin-body {
        --color-bg: #fff; --color-bg-alt: #f3f4f6; --color-bg-sunken: #f5f6fa; --color-border: #d1d5db; --color-border-strong: #9ca3af;
        --color-text: #111827; --color-text-muted: #4b5563;
        background: #fff;
    }
    .admin-sidebar, .store-admin-tabs, .page-header, .invoice__bar, .email-failures, .form-success--banner, .form-error--banner, .store-approve-dialog { display: none !important; }
    .admin-shell { display: block; }
    .admin-main { padding: 0; }
    .invoice { box-shadow: none; }
    .invoice__body { padding: 0; }
    .invoice__sheet { max-width: none; border: 0; box-shadow: none; }
    .invoice__table th { background: #f5f6fa !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .invoice__table tr, .invoice__signatures { break-inside: avoid; }
}

/* A table of what is held and a list to add from (pages/admin/_pick.php,
   scripts/admin-pick.js): Cuentas' roles and single permissions. */
.pick { max-width: 40rem; }
.pick__list { background: var(--color-bg); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: var(--space-2); }
.pick__list:empty { display: none; }
.pick__group { padding: var(--space-2) var(--space-4); background: var(--color-bg-sunken); font-size: var(--text-sm); font-weight: 600; }
.pick__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.pick__row + .pick__row, .pick__group + .pick__row, .pick__row + .pick__group { border-top: 1px solid var(--color-border); }
.pick__row--child { padding-left: var(--space-8); }
.pick__empty { margin: 0 0 var(--space-2); }
.pick-dialog { width: min(32rem, calc(100vw - 2rem)); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: var(--space-6); background: var(--color-bg); color: var(--color-text); }
.pick-dialog[open] { margin: auto; }
.pick-dialog::backdrop { background: rgba(17, 24, 39, 0.45); }
.pick-dialog .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pick-dialog__title { margin: 0 0 var(--space-4); font-size: var(--text-lg); color: var(--color-primary); }
.pick-dialog__list { max-height: 50vh; overflow-y: auto; margin-top: var(--space-4); }
.pick-dialog__group { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-sm); font-weight: 600; }
.pick-dialog__group:first-child { margin-top: 0; }
.pick-dialog__option { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-1) 0; font-size: var(--text-sm); cursor: pointer; }
.pick-dialog__option--child { padding-left: var(--space-4); }
.pick-dialog__option[hidden], .pick-dialog__group[hidden] { display: none; }
.pick-dialog .form-actions { margin-top: var(--space-4); }

/* The bar an Institutional Super Admin sees on every page: read-only, and the account being looked at. */
.institutional-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.institutional-bar label { display: inline-flex; align-items: center; gap: var(--space-2); }
.institutional-bar .form-input { width: auto; min-width: 12rem; }

/* Facturación: the platform kit's billing pages (PlatformKit\BillingPages),
   dressed as the admin. The class names are the kit's. */
.plt-billing { max-width: 52rem; }
.plt-card { background: var(--color-bg); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: var(--space-6); margin: 0 0 var(--space-4); }
.plt-title { margin: 0 0 var(--space-3); font-size: var(--text-lg); color: var(--color-primary); }
.plt-subtitle { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.plt-plan { font-weight: 600; margin: 0 0 var(--space-1); }
.plt-muted { color: var(--color-text-muted); font-size: var(--text-sm); }
.plt-pre { white-space: pre-line; margin: 0; }
.plt-notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius); margin: 0 0 var(--space-4); font-size: var(--text-sm); }
.plt-notice--ok { background: var(--color-success-bg, #e6f4ea); color: var(--color-success, #1e6b33); }
.plt-notice--error { background: var(--color-danger-bg); color: var(--color-danger); }
.plt-form { display: grid; gap: var(--space-3); margin-top: var(--space-3); max-width: 32rem; }
.plt-label { display: grid; gap: var(--space-1); font-size: var(--text-sm); font-weight: 600; }
.plt-input { font: inherit; font-weight: 400; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); color: var(--color-text); }
.plt-check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); }
.plt-button { font: inherit; font-size: var(--text-sm); font-weight: 600; min-height: 36px; padding: var(--space-1) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); color: var(--color-text); cursor: pointer; justify-self: start; }
.plt-button--primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.plt-button--danger { color: var(--color-danger); border-color: var(--color-danger); }
.plt-details { margin-top: var(--space-3); font-size: var(--text-sm); }
.plt-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.plt-table th, .plt-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); }
.plt-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.plt-state { font-size: var(--text-sm); padding: 0 var(--space-2); border-radius: 999px; background: var(--color-bg-sunken); }
.plt-state--paid { background: var(--color-success-bg, #e6f4ea); color: var(--color-success, #1e6b33); }
.plt-state--overdue { background: var(--color-danger); color: #fff; }
.plt-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); font-size: var(--text-sm); }
.plt-totals { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4); max-width: 20rem; margin: var(--space-4) 0 0 auto; font-size: var(--text-sm); }
.plt-totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.plt-pay { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.plt-list { margin: 0; padding-left: var(--space-4); font-size: var(--text-sm); }
/* The "change plan" view (kit 0.8.8, ?view=plan) */
a.plt-button { display: inline-flex; align-items: center; text-decoration: none; }
a.plt-button--primary, a.plt-button--primary:hover { color: #fff; }
.plt-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; }
.plt-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.plt-facts div { background: var(--color-bg-alt); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
.plt-facts dt { font-size: var(--text-sm); color: var(--color-text-muted); }
.plt-facts dd { margin: 0; font-weight: 600; }
.plt-option { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-3); }
.plt-option p { margin: var(--space-1) 0 0; }
.plt-warn { color: var(--color-danger); font-size: var(--text-sm); }
.plt-small { font-size: var(--text-sm); }
.plt-notice--info { background: var(--color-bg-alt); color: var(--color-text); border: 1px solid var(--color-border); }
.plt-notice p { margin: 0 0 var(--space-2); }
/* Closing the account (kit 0.8.10, ?view=close) */
.plt-list li { margin: var(--space-1) 0; }
.plt-closing { border-color: var(--color-danger); }
.plt-close { margin: var(--space-6) 0 0; font-size: var(--text-sm); }

/* Soporte (PlatformKit\SupportPages) and the platform's announcements */
.plt-support { max-width: 52rem; }
.plt-message { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); }
.plt-message--team { margin-left: var(--space-6); background: var(--color-bg-sunken); }
.plt-message p { margin: 0; }
.plt-message .plt-message-body { margin-top: var(--space-1); overflow-wrap: anywhere; }
.plt-rate { margin: var(--space-4) 0; }
.plt-rate .plt-form { display: flex; gap: var(--space-2); }
.plt-state--ticket-open, .plt-state--open { background: var(--color-warning-bg, #fff4d6); color: var(--color-warning, #7a5200); }
.plt-state--ticket-solved { background: var(--color-success-bg, #e6f4ea); color: var(--color-success, #1e6b33); }
textarea.plt-input { width: 100%; resize: vertical; }
.platform-announcement { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); }

/* A support session of the platform (SupportSession): its bar on every page,
   and the list of pages it may open. */
.support-session-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.support-session-bar span { flex: 1 1 260px; }

/* A draft kept in the browser is offered above its form (drafts.js). */
.draft-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.draft-offer span { flex: 1 1 260px; }
.support-session-links { margin: 0; padding-left: 20px; columns: 2 220px; }
.support-session-links li { margin: 0 0 6px; break-inside: avoid; }
.support-visits { margin-top: 24px; }

/* The picture a card of Enlaces has now (links/form.php). */
.link-form__image { display: block; max-width: 16rem; max-height: 10rem; border-radius: var(--radius); border: 1px solid var(--color-border); }