/* Reusable, opt-in list components; compatible with the current Bootstrap 4 shell. */
:root {
    --app-card-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.app-surface-card {
    box-shadow: var(--app-card-shadow);
}
.drozap-private-ui .app-section-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    padding: .5rem .75rem;
    margin-bottom: .75rem;
    border: 1px solid #dfe5ec;
    border-radius: var(--app-control-radius, 8px);
    background: #fff;
}
.app-section-nav__links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.drozap-private-ui .app-section-nav .nav-link {
    gap: .5rem;
    width: auto;
    margin: 0;
    padding: .55rem .75rem;
    min-height: 40px;
}
.drozap-private-ui .app-section-nav__action {
    margin-left: auto;
    min-height: 40px;
    flex-shrink: 0;
}
.app-list-page > .col-md-12 { padding: 0; }
.app-list-page > .col-md-12 > .card {
    border: 1px solid #dfe5ec;
    border-radius: var(--app-control-radius, 8px);
    box-shadow: var(--app-card-shadow);
}
.app-list-page > .col-md-12 > .card > .card-body { padding: 1rem; }
.app-list-page .dataTables_wrapper.container-fluid { padding: 0; }
.app-list-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: 1rem;
}
.app-list-filters__size {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.app-list-filters__size select { width: auto; min-width: 4.5rem; }
.drozap-private-ui .app-list-filters__size .app-action-btn { min-height: 40px; }
.app-list-filters__search { width: 18rem; max-width: 100%; }
.app-list-filters .form-control {
    min-height: 40px;
    border-color: #cbd5e1;
    border-radius: var(--app-control-radius, 8px);
}
.app-list-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid #e2e8f0;
}
.app-list-footer__summary { margin: 0; font-size: .85rem; color: #526176; }
.app-pagination { max-width: 100%; }
.app-pagination ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.app-pagination button,
.app-pagination [aria-current="page"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 40px;
    padding: .35rem .5rem;
    border: 1px solid #dfe5ec;
    border-radius: var(--app-control-radius, 8px);
    background: #fff;
    color: #334155;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.app-pagination button { cursor: pointer; }
.app-pagination button:hover:not(:disabled) { background: #f1f5f9; border-color: #94a3b8; }
.app-pagination [aria-current="page"] { background: #e8f1ff; border-color: #a9c9ff; color: #1d5fbf; }
.app-pagination button:disabled { background: #f8fafc; color: #94a3b8; cursor: default; }
.app-pagination__gap { color: #64748b; padding: 0 .1rem; }
.app-pagination button:focus-visible,
.app-list-filters .form-control:focus-visible {
    outline: 3px solid #2f6fd6 !important;
    outline-offset: 2px;
}
.drozap-private-ui .app-status {
    display: inline-flex;
    align-items: center;
    padding: .25rem .45rem;
    border: 1px solid var(--app-status-border, #dfe5ec);
    border-radius: 5px;
    background: var(--app-status-bg, #f1f5f9);
    color: var(--app-status-color, #475569);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.25;
}
.app-status--success { --app-status-bg: #edf7f0; --app-status-color: #24603b; --app-status-border: #cde4d5; }
.app-status--danger { --app-status-bg: #fdf0f0; --app-status-color: #963636; --app-status-border: #efd3d3; }
.app-status--warning { --app-status-bg: #faf5e9; --app-status-color: #765719; --app-status-border: #e8dcc0; }
.app-status--primary { --app-status-bg: #eef3fa; --app-status-color: #345a88; --app-status-border: #d5e0ee; }
@media (max-width: 575.98px) {
    .app-pagination__neighbor { display: none; }
    .drozap-private-ui .app-section-nav { padding: .5rem; gap: .5rem; }
    .drozap-private-ui .app-section-nav .nav-link { padding: .5rem; }
    .app-list-page > .col-md-12 > .card > .card-body { padding: .75rem; }
    .app-list-filters__search { width: 100%; }
}

/* Choice chips: radio groups with few options (types, categories, modes) instead of a dropdown. */
.app-choice-legend { font-size: .875rem; font-weight: 600; margin-bottom: .4rem; width: auto; }
.app-choice-group { display: flex; flex-wrap: wrap; gap: .4rem; }
.app-choice { position: relative; margin: 0; cursor: pointer; }
.app-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.app-choice > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 38px;
    padding: .4rem .75rem;
    border: 1px solid #d5dce5;
    border-radius: var(--app-control-radius, 8px);
    background: #fff;
    color: #334155;
    font-size: .875rem;
    line-height: 1.2;
    transition: border-color .12s, background-color .12s;
}
.app-choice > span i { color: #64748b; }
.app-choice:hover > span { border-color: #94a3b8; }
.app-choice input:checked + span { border-color: #1572e8; background: #eef4fd; color: #0f4fa8; font-weight: 600; box-shadow: inset 0 0 0 1px #1572e8; }
.app-choice input:checked + span i { color: #1572e8; }
.app-choice input:focus-visible + span { outline: 2px solid #1572e8; outline-offset: 2px; }
.app-choice input:disabled + span { opacity: .55; cursor: not-allowed; }
.app-choice-meta { color: #64748b; font-weight: 400; }
.app-choice-group--block .app-choice { flex: 1 1 0; min-width: 7.5rem; }
.app-choice-group--block .app-choice > span { width: 100%; justify-content: center; }

/* Botones segmentados (templates/ui/_segmented.html.twig): una de pocas opciones fijas, todas visibles. */
.app-segmented { margin: 0; padding: 0; border: 0; min-width: 0; }
.app-segmented__label { float: none; width: auto; margin: 0 0 .5rem; padding: 0; font-size: inherit; font-weight: 600; color: inherit; }
.app-segmented__options { display: flex; width: 100%; border: 1px solid #c9d2dd; border-radius: 7px; overflow: hidden; background: #fff; }
.app-segmented__option { position: relative; flex: 1 1 auto; min-width: 0; margin: 0; cursor: pointer; }
.app-segmented__option + .app-segmented__option { border-left: 1px solid #c9d2dd; }
.app-segmented__option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.app-segmented__option span { display: block; padding: .375rem .5rem; font-size: .85rem; line-height: 1.25; text-align: center; color: #2a3340; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-segmented__option:hover span { background: #f1f5fa; }
.app-segmented__option input:checked + span { background: #1f5fbf; color: #fff; font-weight: 600; }
.app-segmented__option input:focus-visible + span { outline: 3px solid #8fb6ef; outline-offset: -3px; }
.app-segmented--compact .app-segmented__label { margin-bottom: .125rem; font-size: .68rem; color: #5b6573; text-transform: uppercase; letter-spacing: .02em; }
.app-segmented--compact .app-segmented__option span { padding: .2rem .35rem; font-size: .76rem; }
.app-segmented--wrap .app-segmented__options { flex-wrap: wrap; gap: .375rem; border: 0; border-radius: 0; overflow: visible; background: transparent; }
.app-segmented--wrap .app-segmented__option { flex: 0 1 auto; }
.app-segmented--wrap .app-segmented__option + .app-segmented__option { border-left: 0; }
.app-segmented--wrap .app-segmented__option span { border: 1px solid #c9d2dd; border-radius: 7px; background: #fff; }
.app-segmented[disabled] .app-segmented__option { cursor: not-allowed; opacity: .6; }
/* select2 dentro de un input-group (con botón al lado): ocupa el hueco sin empujar el botón a otra línea. */
.input-group > .select2-container { flex: 1 1 auto; width: 1% !important; min-width: 0; }
/* <select data-segmented> (form-controls.js): el select sigue en el formulario como dato, sin verse. */
select.app-segmented-source { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important; opacity: 0; pointer-events: none; border: 0 !important; }
.app-segmented.is-invalid .app-segmented__options, .app-segmented--wrap.is-invalid .app-segmented__option span { border-color: #dc3545; }
/* Estilo Nítido (docs/specs/features/ui-design-system.md): menú lateral de apartados. Tarjeta blanca, títulos pequeños
   en gris, el apartado elegido en oscuro y, a la derecha, un punto con su estado o un contador. Primer uso:
   /noctime/whatsapp-openwa. Los elementos son <button role="tab"> o enlaces. */
.drozap-private-ui .app-side-nav { background: #fff; border-radius: 10px; padding: 12px; box-shadow: 0 1px 3px rgba(15, 23, 42, .08); position: sticky; top: 80px; }
.drozap-private-ui .app-side-nav__title { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7785; margin: 10px 8px 6px; }
.drozap-private-ui .app-side-nav__title:first-child { margin-top: 2px; }
.drozap-private-ui .app-side-nav__item { display: flex; width: 100%; align-items: center; gap: 8px; border: 0; background: transparent; padding: 9px 10px; border-radius: 8px; font-weight: 700; color: #1f2933; text-align: left; text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.drozap-private-ui .app-side-nav__item:hover { background: #f1f3f5; color: #1f2933; text-decoration: none; }
.drozap-private-ui .app-side-nav__item[aria-selected="true"] { background: #1a2035; color: #fff; }
.drozap-private-ui .app-side-nav__item:focus-visible { outline: 3px solid rgba(47, 111, 214, .35); outline-offset: 2px; }
.drozap-private-ui .app-side-nav__count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 6px; background: #eef1f4; color: #475569; font-size: .75rem; text-align: center; }
.drozap-private-ui .app-side-nav__item[aria-selected="true"] .app-side-nav__count { background: rgba(255, 255, 255, .16); color: #fff; }
@media (max-width: 899px) { .drozap-private-ui .app-side-nav { position: static; } }
/* Punto de estado (verde bien, rojo falla, ámbar ojo, gris sin datos). Acompaña a un texto: nunca solo el color. */
.app-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #9aa5b1; }
.app-side-nav__item .app-dot { margin-left: auto; }
.app-status > .app-dot:first-child { margin-right: 6px; }
.app-dot--ok { background: #16a34a; }
.app-dot--bad { background: #dc2626; }
.app-dot--warn { background: #d97706; }
/* Aviso dentro de una tarjeta: fondo suave y raya a la izquierda, en vez de las .alert de Atlantis. */
.drozap-private-ui .app-callout { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #e8dcc0; border-left: 4px solid #d97706; border-radius: 8px; background: #faf5e9; color: #5c4413; font-size: .875rem; }
.drozap-private-ui .app-callout--danger { border-color: #efd3d3; border-left-color: #dc2626; background: #fdf0f0; color: #7a2b2b; }
/* Tabla Nítido: cabecera con títulos pequeños en gris (como los del menú lateral), filas separadas por una raya fina y
   las etiquetas de estado sin partirse. Va junto a .table de Bootstrap. */
.drozap-private-ui .app-table { margin-bottom: 0; }
.drozap-private-ui .app-table thead th { border-top: 0; border-bottom: 1px solid #e4e7eb; padding: 8px 10px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7785; vertical-align: bottom; }
.drozap-private-ui .app-table td { border-top: 1px solid #eef1f4; padding: 10px; vertical-align: middle; color: #1f2933; }
.drozap-private-ui .app-table .app-status { white-space: nowrap; }

/* Shared filter controls: result options and their total remain compact units. */
.drozap-private-ui #resultsPerPage + .app-segmented { display: inline-flex; flex: 0 0 auto; width: auto; vertical-align: middle; }
.drozap-private-ui #resultsPerPage + .app-segmented .app-segmented__option { flex: 0 0 auto; }
.drozap-private-ui #totalResults { display: inline-block; white-space: nowrap; }
.drozap-private-ui .dataTables_length:has(#resultsPerPage) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.app-list-filters__size { flex: 0 0 auto; flex-wrap: wrap; max-width: 100%; }
.app-list-filters__choices { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; border: 0; padding: 0; margin: 0; min-width: 0; }
.app-list-filters__choices label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 0; cursor: pointer; color: #526176; }
.app-list-filters__field { flex: 1 1 180px; max-width: 300px; }
.app-list-filters__search { margin-left: auto; }
@media (max-width: 575px) {
    .app-list-filters__field, .app-list-filters__search { flex: 1 1 100%; width: 100%; max-width: none; margin-left: 0; }
}

.drozap-private-ui #resultsPerPage + .app-segmented .app-segmented__option span { display: flex; align-items: center; justify-content: center; min-height: 38px; min-width: 36px; padding: 6px 10px; }

/* Common filter panel for equipment, canopies and packing; module callbacks stay local. */
.drozap-private-ui .app-list-filters.app-list-filters--shared { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px 16px; margin: 0 0 16px; padding: 0; }
.drozap-private-ui .app-list-filters--shared .app-list-filters__size { display: flex; align-items: center; gap: 8px; padding: 0; margin: 0; flex: 0 0 auto; }
.drozap-private-ui .app-list-filters--shared .app-list-filters__search { order: 2; flex: 1 1 240px; max-width: 300px; margin-left: auto; }
.drozap-private-ui .app-list-filters--shared .gear-toolbar-actions { display: flex; gap: 8px; order: 1; }
.drozap-private-ui .app-list-filters--shared .app-list-filters__field { flex: 1 1 160px; max-width: 300px; min-width: 0; }
.drozap-private-ui .app-list-filters--shared .form-control { min-height: 40px; border: 1px solid #cbd5e1; border-radius: var(--app-control-radius, 8px); }
.drozap-private-ui .app-list-filters--shared #totalResults { padding: 0; border: 0; background: transparent; color: #64748b; font-size: .85rem; }
.drozap-private-ui .app-list-filters--shared .plegados-filter-label { display: block; margin: 0 0 6px; font-size: .78rem; color: #526176; }
.drozap-private-ui .plegados-filters.app-list-filters--shared { align-items: flex-end; }
@media (max-width: 575px) {
    .drozap-private-ui .app-list-filters--shared .app-list-filters__search,
    .drozap-private-ui .app-list-filters--shared .app-list-filters__field { flex-basis: 100%; max-width: none; margin-left: 0; }
}

/* Visual review: keep the count attached to its options and neutralize legacy search sizing. */
.drozap-private-ui .app-list-filters--shared .app-list-filters__size .app-list-filters__size { flex-wrap: nowrap; }
.drozap-private-ui .app-list-filters--shared .dataTables_filter { width: 100%; margin: 0; text-align: left; }
.drozap-private-ui .app-list-filters--shared .dataTables_filter input { width: 100%; margin: 0; padding-right: 36px; }
.drozap-private-ui .app-list-filters--shared .plegados-toggle-group { justify-content: flex-start; gap: 8px; }
.drozap-private-ui .app-list-filters--shared .plegados-toggle-group .selectgroup-item { flex: 0 0 auto; }
@media (max-width: 575px) {
    .drozap-private-ui .app-list-filters--shared .gear-list-meta { flex-basis: 100%; }
    .app-list-filters--shared .app-list-filters__caption { flex-basis: 100%; }
}

/* Packing rows become labelled cards according to the available list width. */
.drozap-private-ui .plegados-table-wrap { container-type: inline-size; }
@container (max-width: 820px) {
    .drozap-private-ui .plegados-table { display: block; width: 100%; min-width: 0; }
    .drozap-private-ui .plegados-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .drozap-private-ui .plegados-table tbody { display: grid; gap: 14px; padding: 4px; }
    .drozap-private-ui .plegados-table tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #fff; border: 1px solid #dfe5ec; border-radius: 8px; padding: 12px; box-shadow: 0 2px 6px rgba(60,64,67,.15); }
    .drozap-private-ui .plegados-table tbody > tr > td { display: block; min-width: 0; width: auto; padding: 8px; border: 0; text-align: left !important; white-space: normal; overflow-wrap: anywhere; }
    .drozap-private-ui .plegados-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 5px; font-size: .72rem; font-weight: 600; color: #64748b; }
    .drozap-private-ui .plegados-table td:nth-child(4), .drozap-private-ui .plegados-table td:nth-child(6), .drozap-private-ui .plegados-table .plegados-observaciones-cell { grid-column: 1 / -1; }
    .drozap-private-ui .plegados-table td a { display: inline-block; max-width: 100%; white-space: normal; }
    .drozap-private-ui .plegados-table .plegados-empty-row { grid-template-columns: 1fr; }
}
@container (max-width: 260px) {
    .drozap-private-ui .plegados-table tbody > tr { grid-template-columns: minmax(0, 1fr); }
}

/* AAD cards use the available list width, preserving desktop table comparison. */
.drozap-private-ui .aad-table-wrap { container-type: inline-size; }
@container (max-width: 820px) {
    .drozap-private-ui .aad-table { display: block; width: 100%; min-width: 0; }
    .drozap-private-ui .aad-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .drozap-private-ui .aad-table tbody { display: grid; gap: 14px; padding: 4px; }
    .drozap-private-ui .aad-table tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; border: 1px solid #dfe5ec; border-radius: 8px; background: #fff; box-shadow: 0 2px 6px rgba(60,64,67,.15); }
    .drozap-private-ui .aad-table tbody > tr > td { display: block; height: auto !important; min-height: 0; width: auto !important; min-width: 0; padding: 8px; border: 0; text-align: left !important; white-space: normal; overflow-wrap: anywhere; }
    .drozap-private-ui .aad-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 5px; font-size: .72rem; font-weight: 600; color: #64748b; }
    .drozap-private-ui .aad-table td:nth-child(3), .drozap-private-ui .aad-table td:nth-child(5), .drozap-private-ui .aad-table td:nth-child(7), .drozap-private-ui .aad-table td:nth-child(8), .drozap-private-ui .aad-table td:last-child { grid-column: 1 / -1; }
    .drozap-private-ui .aad-table .btn, .drozap-private-ui .aad-table .badge { height: auto; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    .drozap-private-ui .aad-table .ajax-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .drozap-private-ui .aad-table td[colspan] { grid-column: 1 / -1; }
}

@container (max-width: 820px) { .drozap-private-ui .aad-table td:nth-child(6) { grid-column: 1 / -1; } }

/* The selected sidebar entry has the same white surface at every level. */
.sidebar.sidebar-style-2 .nav.nav-primary li.active > a,
.sidebar.sidebar-style-2 .nav.nav-primary li > a.active,
.sidebar.sidebar-style-2 .nav.nav-primary li.active > a:hover,
.sidebar.sidebar-style-2 .nav.nav-primary li.active > a:focus {
    background: #fff !important;
    color: #1a2035 !important;
    box-shadow: none !important;
}
.sidebar.sidebar-style-2 .nav.nav-primary li.active > a i,
.sidebar.sidebar-style-2 .nav.nav-primary li.active > a p,
.sidebar.sidebar-style-2 .nav.nav-primary li.active > a span,
.sidebar.sidebar-style-2 .nav.nav-primary li > a.active i,
.sidebar.sidebar-style-2 .nav.nav-primary li > a.active span {
    color: #1a2035 !important;
}
.sidebar.sidebar-style-2 .nav.nav-primary li.active > a .sidebar-icon-img,
.sidebar.sidebar-style-2 .nav.nav-primary li > a.active .sidebar-icon-img {
    filter: none !important;
}