/* nanoBootstrap — l'estat base del que manipula lib/nanoBootstrap.js.
 *
 * Fase 4a de la retirada de Bootstrap (.claude/plans/unificacio-bootstrap-eliminacio.md).
 *
 * La Fase 3 va substituir `bootstrap.min.js` per lib/nanoBootstrap.js i va deixar la seva
 * dependència de CSS **implícita**: el JS posa i treu `in`, `show`, `collapse`, `collapsing`,
 * `active`, `modal-open` i `tab-pane`, però el que volen dir —sobretot **amagat**— ho deia el
 * CSS de Bootstrap. Aquest fitxer ho diu ara, i és la condició per poder treure el `<link>` de
 * Bootstrap de cap superfície.
 *
 * ⚠️ **El mode de fallada de no tenir-lo és mut i no s'assembla a un error**: el modal de
 * «Sessió exhaurida», que és al chrome de tota l'àrea privada, es pinta com a **text al peu de
 * cada pàgina** —sense error de consola, sense res al log— (mesurat l'01/09/2026 amb Chrome
 * headless). Regressió: `php scripts/provaNanoBootstrapCss.php`.
 *
 * ⚠️ **Es carrega ABANS del `<link>` de Bootstrap** (primera entrada de `css` a
 * `extranetSuperficies()`, webServices/views/comunes/head/head.php). Mentre Bootstrap hi sigui,
 * ell guanya per cascada i aquest full **no canvia res**; el dia que una vista deixi de
 * carregar-lo, aquest full pren el relleu. Per això aquí no hi ha res que Bootstrap no digués
 * igual.
 *
 * ⚠️ **Les DUES gramàtiques alhora**, com el JS: BS3 marca obert amb `.in` i BS4 amb `.show`;
 * el desplegable és `.open` al pare (BS3) i `.show` al pare/menú (BS4); la diapositiva és
 * `.item` (BS3) i `.carousel-item` (BS4). Les quatre superfícies comparteixen aquest fitxer.
 *
 * ⚠️ **Contracte d'estat, no disseny.** Aquí només hi ha display, posició, apilament,
 * desbordament, opacitat i transicions —el que fa que el component *funcioni*—, més la
 * superfície mínima perquè un modal sigui llegible (fons negre i caixa blanca). Els colors,
 * les vores i la tipografia són de la capa pròpia de l'extranet (`aurora.css` /
 * `web-views.css`), que va després i mana. No hi entrin ni la graella ni els botons.
 */

/* --------------------------------------------------------------------------
 * fade — l'esvaïment compartit per modal, backdrop i alerta
 * -------------------------------------------------------------------------- */

.fade {
    opacity: 0;
    transition: opacity .15s linear;
}

.fade.in,
.fade.show {
    opacity: 1;
}

/* --------------------------------------------------------------------------
 * Modal — el JS obre amb `style.display = 'block'` + `.in`/`.show`, i tanca
 * tornant a `display: none`. L'estat INICIAL no porta cap estil en línia: si
 * `.modal` no és `display: none` aquí, el contingut es veu sempre.
 * -------------------------------------------------------------------------- */

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    outline: 0;
}

/* Amb el modal obert, el desplaçament és del modal i no del cos. */
.modal-open {
    overflow: hidden;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-dialog {
    position: relative;
    width: auto;
    max-width: 600px;
    margin: 30px auto;
}

/* Entrada des de dalt, com les dues versions (BS3 −25%, BS4 −50px). */
.modal.fade .modal-dialog {
    transform: translate(0, -40px);
    transition: transform .3s ease-out;
}

.modal.in .modal-dialog,
.modal.show .modal-dialog {
    transform: translate(0, 0);
}

.modal-content {
    position: relative;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    outline: 0;
}

/* El crea el JS (`modal-backdrop fade` + `in`/`show`), amb el z-index dels
 * encavalcats escrit en línia: aquí només l'estat de repòs. */
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}

.modal-backdrop.fade {
    opacity: 0;
}

.modal-backdrop.in,
.modal-backdrop.show {
    opacity: .5;
}

/* --------------------------------------------------------------------------
 * Collapse i acordió — el JS anima `style.height` mentre dura `.collapsing` i
 * en surt deixant `.collapse` + `.in`/`.show`. Sense el `display: none` de
 * `.collapse`, tot acordió neix obert.
 * -------------------------------------------------------------------------- */

.collapse {
    display: none;
}

.collapse.in,
.collapse.show {
    display: block;
}

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    transition: height .35s ease;
}

/* --------------------------------------------------------------------------
 * Dropdown — `.open` al pare (BS3) o `.show` al menú (BS4)
 * -------------------------------------------------------------------------- */

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    margin: 2px 0 0;
    list-style: none;
    background-clip: padding-box;
}

.open > .dropdown-menu,
.dropdown-menu.show {
    display: block;
}

/* --------------------------------------------------------------------------
 * Pestanyes — el JS treu `.active`/`.show`/`.in` dels germans i les posa a la
 * triada. El selector és el de les dues versions: `.tab-content > .tab-pane`.
 * -------------------------------------------------------------------------- */

.tab-content > .tab-pane {
    display: none;
}

.tab-content > .active {
    display: block;
}

/* --------------------------------------------------------------------------
 * Carrusel — `.item` (BS3) i `.carousel-item` (BS4). El JS afegeix les classes
 * de direcció de BS4 (`carousel-item-next|prev|left|right`) a les dues.
 * -------------------------------------------------------------------------- */

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-inner > .item,
.carousel-item {
    position: relative;
    display: none;
    width: 100%;
    transition: transform .6s ease-in-out;
}

.carousel-inner > .item.active,
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
    display: block;
}

.carousel-item-next:not(.carousel-item-left),
.carousel-item-right.active {
    transform: translateX(100%);
}

.carousel-item-prev:not(.carousel-item-right),
.carousel-item-left.active {
    transform: translateX(-100%);
}

.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
    transform: translateX(0);
}

/* --------------------------------------------------------------------------
 * Botó en espera — `.button('loading')` hi posa `.disabled` i l'atribut
 * `disabled`; el rètol el bescanvia el JS amb `data-loading-text`.
 * -------------------------------------------------------------------------- */

.disabled,
[disabled] {
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
 * Qui ha demanat menys moviment, no en té
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .fade,
    .collapsing,
    .modal.fade .modal-dialog,
    .carousel-inner > .item,
    .carousel-item {
        transition: none;
    }
}