/*
 * The frame at 10″ and on a large screen (change merch-40a, design decisions 2 … 10; M-240, M-248; P-459 A).
 *
 * Linked by base.html.twig after theme-elibreria.css and main.css. It overrides Metronic from outside — never its bundle —, each rule
 * scoped to a class of ours or to desktop mode (`min-width: 1025px`), so Metronic's tablet mode below that stays as it is. Our own
 * `!important`s are edited where they are written (main.css), not out-ranked here; an `!important` in this file only beats an inline
 * style Metronic's scripts write, and says so.
 *
 * Breakpoints, declared once (infra/docker/e2e/specs/support/screens.json names the same values):
 *   1280 px  the guaranteed floor (a 1280 × 800 screen, 1280 × 680 of it inside the browser);
 *   1440 px  two-column forms and the home's boxes side by side.
 */

/* Touch (decisions 2 and 10): no double-tap zoom on a control, no 300 ms delay; pinch zoom stays the page's. */
a,
button,
[role="button"],
.btn {
    touch-action: manipulation;
}

/* The content column may shrink, so a list's wrapper contains its table instead of the page scrolling sideways (C40-15). */
.m-grid--desktop > .m-wrapper,
.m-grid__item--fluid.m-wrapper {
    min-width: 0;
}

/* text-12: begin — text never under 12 px (decision 4; P-521 A, F-343). Every selector Metronic sets below 12 px, raised to .923rem,
 * 12 px on Metronic's 13 px root: .m-tabs__link, small, .m-badge, .page-link, .btn-sm, .input-group-text, .m-portlet__head-desc,
 * .m-card-user__email, and those the baseline run of task 0.7 found. */
.m-tabs__link,
small,
.small,
.m-badge,
.page-link,
.btn-sm,
.input-group-text,
.m-portlet__head-desc,
.m-card-user__email,
.form-text,
.m-menu__link-text,
.m-nav__link-text,
.dropdown-item,
.m-datatable__pager-info,
.m-topbar__username,
.alert,
.table,
.m-form__help,
.form-control-feedback,
.invalid-feedback,
.badge,
.m-nav__section-text,
.m-list-badge .m-list-badge__items .m-list-badge__item,
.nav.nav-pills.m-nav-pills--btn-sm .m-tabs__link,
code,
kbd {
    font-size: .923rem;
}
/* text-12: end */

/*
 * The header never wraps (decision 5; P-444 A, C40-07, F-331). Desktop only: the stack is a flex row, the crumbs take what the top bar
 * leaves and shorten with an ellipsis (each keeps its full text as `title`); «Inicio» and the section never shrink, the last crumb takes
 * the rest. The header's row itself is merch-47's (css/layout/frame.css); these rules only share the crumbs out. The selectors start at
 * `#m_header_menu` because Metronic lays the list's items out as inline blocks and its crumb link as a flex box of its own, with
 * selectors that out-rank a class.
 */
@media (min-width: 1025px) {
    /* The middle crumbs give way after the last one. */
    #m_header_menu .m-subheader__breadcrumbs.m-nav > li {
        display: inline-flex;
        align-items: center;
        flex: 0 .25 auto;
        min-width: 6rem;
        white-space: nowrap;
    }

    #m_header_menu .m-subheader__breadcrumbs.m-nav > li.m-nav__separator {
        flex: none;
        min-width: 0;
    }

    #m_header_menu .m-subheader__breadcrumbs.m-nav > li:nth-child(1),
    #m_header_menu .m-subheader__breadcrumbs.m-nav > li:nth-child(3) {
        flex-shrink: 0;
        min-width: auto;
    }

    #m_header_menu .m-subheader__breadcrumbs.m-nav > li:last-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    #m_header_menu .m-subheader__breadcrumbs.m-nav .m-nav__item > .breadcrumb_link {
        display: inline-flex;
        max-width: 100%;
        min-width: 0;
    }

    #m_header_menu .m-subheader__breadcrumbs .m-nav__link-text {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }
}

/* The configuration's tabs on one row that scrolls (decision 6; P-447 A, F-332); active-tab.js brings the active one into view. */
.nav-tabs--one-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.nav-tabs--one-row > .nav-item {
    flex: none;
}

.m-portlet__head-tools:has(> .nav-tabs--one-row) {
    min-width: 0;
    flex: 1 1 auto;
}

/*
 * Forms (decision 8; P-520 A, P-529 A, P-445 A, P-446 A). The fields are cells of `.form-body`; from 1440 px a form that does not keep one
 * column lays them out in two, a wide cell — and a fold, which keeps the same grid inside when open — across both. The action row sticks to
 * the bottom of the window while the form runs past it: the same buttons, on the card's background, with a shadow once stuck.
 */
@media (min-width: 1440px) {
    .form-body--columns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2rem;
        align-items: start;
    }

    .form-body--columns > .form-field--wide,
    .form-body--columns > details.form-fold {
        grid-column: 1 / -1;
    }

    .form-body--columns > details.form-fold[open] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2rem;
        align-items: start;
    }

    .form-body--columns > details.form-fold > summary,
    .form-body--columns > details.form-fold > .form-field--wide {
        grid-column: 1 / -1;
    }
}

:root {
    --el-actions-bar-height: 64px;
}

.form-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--el-actions-bar-height);
    margin-top: 1rem;
    padding: 12px 0;
    background: #fff;
}

.form-actions__start,
.form-actions__end {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.form-actions--stuck {
    box-shadow: 0 -8px 12px -10px rgba(0, 0, 0, .35);
}

/* While a bar is stuck the scroll-to-top button would cover «Guardar», and the toasts sit above the bar, still at the bottom right
   (F-349; the owner's place for them, 2026-10-03). */
body.has-stuck-actions #m_scroll_top.m-scroll-top {
    display: none;
}

body.has-stuck-actions #toast-container.toast-bottom-right {
    bottom: calc(var(--el-actions-bar-height) + 16px);
}

/* The client and promotion forms keep their own rows (their opt-out of the grid, P-445 A): `col-12 col-xl-N` columns side by side from
   1440 px — Bootstrap's `xl` here starts at 1200 px, so below 1440 the body's modifier stacks them. */
@media (max-width: 1439px) {
    .form-columns--from-1440 .row > [class*="col-xl-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .form-columns--from-1440 .row > .border-left {
        border-left: 0 !important; /* Bootstrap's .border-left is !important itself: a stacked column has no neighbour to its left */
    }
}

/* On a large screen no single-line control of those forms is wider than 900 px (decision 12's MAX_CONTROL_WIDTH): the address line
   reads as one, not as a bar across the screen. Neither is a control in a wide cell of a generic form (the packs' search) nor a list's
   filter box, on a list of one or two columns, nor a screen's own filter marked `control--capped` (merch-40b). */
.form-columns--from-1440 input.form-control,
.form-columns--from-1440 select.form-control,
.form-body input.form-control,
.form-body select.form-control,
.packs-and-kits__search,
.header-filter,
.control--capped {
    max-width: 900px;
}

/*
 * Lists (decision 9; P-448 A, P-453 A, P-522 A, P-523 A, P-532 A; F-344, F-345, F-347). The classes merch-33b reuses:
 *   .list-scroll     wraps a table, which scrolls inside its card; the page never does;
 *   .list-actions    the action column, as narrow as its buttons, pinned to the card's right edge while the data scrolls under it;
 *   .cell--nowrap    a date, an amount, a code, a NIF or an EAN on one line; names and notes wrap;
 *   .modal--scrollable  a dialog whose body scrolls, its title and buttons always in view (Bootstrap 4.3's modal-dialog-scrollable).
 */
.list-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.list-scroll > .table {
    margin-bottom: 0;
}

.list-actions {
    width: 1%;
    white-space: nowrap;
}

.list-scroll .list-actions {
    position: sticky;
    right: 0;
    z-index: 1;
    background: #fff;
    box-shadow: inset 1px 0 0 #ebedf2, -6px 0 8px -8px rgba(0, 0, 0, .3);
}

.list-scroll thead .list-actions {
    z-index: 2;
}

.cell--nowrap {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.modal--scrollable {
    display: flex;
    max-height: calc(100% - 3.5rem);
}

.modal--scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
    overflow: hidden;
}

.modal--scrollable .modal-body {
    overflow-y: auto;
}

/* Touch targets of 36 px at least (decision 10; P-451 A, P-534 A): row actions, the «…» toggle, the paginator, the header's icons and the
   table-head filters. A hand-written list's actions sit in its last cell without `.list-actions`, and a card head has its own «…». */
.list-actions .btn,
.list-actions a.btn,
.list-actions .dropdown > .btn,
.m-content table tbody td:last-child .btn,
.m-content .dropdown-toggle.btn,
.pagination .page-link,
#m_header_topbar .m-nav__link,
table thead .form-control {
    min-width: 36px;
    min-height: 36px;
}

.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/*
 * The home (decision 11; P-533 A, P-449 A, P-450 A, P-538 A). A statistic is its label above its amount below 1440 px and beside it from
 * there; an amount never breaks. The pie fills its card up to a height; a portlet head with a button lets its title wrap under it.
 */
.home-stat {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.home-stat__label {
    margin: 0;
}

.home-stat__amount {
    font-weight: 600;
}

@media (min-width: 1440px) {
    .home-stat {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
    }
}

.home-pie {
    position: relative;
    max-width: 360px;
    margin: 0 auto;
}

.m-portlet__head-caption,
.m-portlet__head-title {
    min-width: 0;
}

.m-portlet__head-title h3 {
    white-space: normal;
}

/*
 * merch-40b's screens, on the pieces above (design decisions 1 … 5). The sales report's head: the title, the range and the buttons wrap
 * as one group below 1440 px (F-337). A chart fills a box of bounded height (the sales evolution, C40-13). The simple-bill preview: a
 * ticket's width at most, under its messages below 1440 px, its text at 12 px (F-338, F-459).
 */
.m-portlet .m-portlet__head.report-head {
    flex-wrap: wrap;
    height: auto;
    min-height: 70px;
    row-gap: .5rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.report-head__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* The report's filters keep a width to read their choice; its column titles stay on one line, the table scrolling inside its card. */
table thead .report-filter {
    min-width: 15rem;
}

.report-table thead th {
    white-space: nowrap;
}

.chart-box {
    position: relative;
    height: min(420px, 60vh);
}

.simple-bill-preview {
    width: 450px;
    max-width: 100%;
    background-color: #fff;
}

.simple-bill-preview td,
.simple-bill-preview th {
    font-size: 12px;
}

@media (max-width: 1439px) {
    .simple-bill-layout > .col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/*
 * Filters (change merch-33b, design decision 3; P-471 A, M-248): a list's titles row stays one line per column and its filters row gives
 * each kind of filter the width that reads its value, so no title is hidden by a typed filter and no box clips «dd/mm/aaaa». The table
 * scrolls inside `.list-scroll` when the columns need more than the card has.
 */
:root {
    --el-filter-min-string: 7rem;
    --el-filter-min-amount: 6rem;
    --el-filter-min-date: 7.5rem;
    --el-filter-min-month: 6.75rem;
    --el-filter-min-range: 12rem;
    --el-filter-min-select: 8rem;
}

table thead .list-titles th {
    white-space: nowrap;
}

table thead .list-filters th {
    padding-top: .25rem;
    font-weight: normal;
}

.filter_header--string .header-filter { min-width: var(--el-filter-min-string); }
.filter_header--amount .header-filter { min-width: var(--el-filter-min-amount); }
.filter_header--date .header-filter,
.filter_header--datetime .header-filter { min-width: var(--el-filter-min-date); }
.filter_header--month .header-filter { min-width: var(--el-filter-min-month); }
.filter_header--daterange .header-filter,
.filter_header--datetimerange .header-filter { min-width: var(--el-filter-min-range); }
.filter_header--select .header-filter { min-width: var(--el-filter-min-select); }
/* A select keeps its text whole: Metronic's wide inner padding cut «- Seleccione -» to «- Seleccion» (merch-33b browser check). */
.filter_header--select select.header-filter { padding-left: 0.5rem; padding-right: 0.25rem; }