/**
 * Shell estilo dashboard (referencia soft UI): sidebar claro, header tipo tarjeta,
 * fondo de lienzo y tarjetas redondeadas. Solo aplica con body.app-shell.
 * No introduce gráficas; estiliza módulos existentes (.card, tablas, breadcrumb).
 */
body.app-shell {
    --dash-canvas: #eef2f7;
    --dash-surface: #ffffff;
    --dash-sidebar: #f8fafc;
    --dash-sidebar-border: #e2e8f0;
    --dash-ink: #0f172a;
    --dash-muted: #64748b;
    --dash-accent: #2563eb;
    --dash-accent-soft: #eff6ff;
    --dash-radius: 14px;
    --dash-radius-sm: 10px;
    --dash-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
    --dash-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
}

body.app-shell .main-content {
    background: var(--dash-canvas) !important;
    padding-top: 0.5rem;
    /* style.css usa overflow:hidden y recorta los dropdowns del header */
    overflow: visible;
}

/* ——— Sidebar ——— */
body.app-shell .sidemenu-area {
    background: var(--dash-sidebar);
    border-right: 1px solid var(--dash-sidebar-border);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    /* Por encima del header (z ~1020–1040); style.css usa 9999 */
    z-index: 10070 !important;
}

body.app-shell .sidemenu-area .sidemenu-header {
    background: var(--dash-surface);
    border-bottom: 1px solid var(--dash-sidebar-border);
    height: 72px;
}

body.app-shell .sidemenu-area .sidemenu-header .navbar-brand span {
    color: var(--dash-ink) !important;
    font-size: 1.1rem;
    font-weight: 700;
}

body.app-shell .sidemenu-area .sidemenu-header .burger-menu span,
body.app-shell .sidemenu-area .sidemenu-header .responsive-burger-menu span {
    background: var(--dash-ink);
}

body.app-shell .app-shell-sidebar__user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    background: var(--dash-surface);
    border-bottom: 1px solid var(--dash-sidebar-border);
}

body.app-shell .app-shell-sidebar__avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border: 2px solid var(--dash-sidebar-border);
}

body.app-shell .app-shell-sidebar__user-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

body.app-shell .app-shell-sidebar__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dash-ink);
    line-height: 1.2;
}

body.app-shell .app-shell-sidebar__email {
    font-size: 0.7rem;
    color: var(--dash-muted);
    max-width: 100%;
}

body.app-shell .app-shell-sidebar__quicksearch {
    background: var(--dash-sidebar);
    border-bottom: 1px solid var(--dash-sidebar-border);
}

body.app-shell .app-shell-sidebar__quicksearch .input-group-text {
    border-color: var(--dash-sidebar-border);
    color: var(--dash-muted);
    border-radius: var(--dash-radius-sm) 0 0 var(--dash-radius-sm) !important;
}

body.app-shell .app-shell-sidebar__quicksearch .form-control {
    border-color: var(--dash-sidebar-border);
    border-radius: 0 var(--dash-radius-sm) var(--dash-radius-sm) 0 !important;
    font-size: 0.8125rem;
}

body.app-shell .app-shell-sidebar__quicksearch .form-control:focus {
    border-color: #94a3b8;
    box-shadow: none;
}

body.app-shell .sidemenu-area .sidemenu-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    height: auto !important;
    background: var(--dash-sidebar);
    box-shadow: none;
}

body.app-shell .sidemenu-area .sidemenu-body .sidemenu-nav {
    padding: 0.75rem 0 1rem;
}

body.app-shell .sidemenu-area .sidemenu-body .sidemenu-nav .nav-item-title {
    color: var(--dash-muted);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    padding-left: 1rem;
    padding-right: 1rem;
}

body.app-shell .sidemenu-area .sidemenu-body .sidemenu-nav .nav-item .nav-link {
    color: var(--dash-ink);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0 var(--dash-radius-sm) var(--dash-radius-sm) 0;
    margin-right: 0.5rem;
    padding: 0.55rem 1rem;
}

body.app-shell .sidemenu-area .sidemenu-body .sidemenu-nav .nav-item .nav-link .icon {
    color: var(--dash-muted);
}

body.app-shell .sidemenu-area .sidemenu-body .sidemenu-nav .nav-item .nav-link::before {
    background: var(--dash-accent);
    border-radius: 0 3px 3px 0;
}

body.app-shell .sidemenu-area .sidemenu-body .sidemenu-nav .nav-item .nav-link:hover {
    background: var(--dash-accent-soft);
    color: var(--dash-accent);
}

body.app-shell .sidemenu-area .sidemenu-body .sidemenu-nav .nav-item .nav-link:hover .icon {
    color: var(--dash-accent);
}

body.app-shell .sidemenu-area .sidemenu-body .sidemenu-nav .nav-item.mm-active .nav-link {
    background: var(--dash-accent-soft);
    color: var(--dash-accent);
}

body.app-shell .sidemenu-area .sidemenu-body .sidemenu-nav .nav-item.mm-active .nav-link .icon {
    color: var(--dash-accent);
}

body.app-shell .sidemenu-area .sidemenu-body .sidemenu-nav .nav-item .sidemenu-nav-second-level .nav-item .nav-link {
    color: var(--dash-muted) !important;
}

body.app-shell .sidemenu-area .sidemenu-body .sidemenu-nav .nav-item .sidemenu-nav-second-level .nav-item .nav-link .icon {
    color: var(--dash-muted) !important;
}

body.app-shell .sidemenu-area .sidemenu-body .sidemenu-nav .nav-item .sidemenu-nav-second-level .nav-item .nav-link:hover {
    color: var(--dash-accent) !important;
}

body.app-shell .sidemenu-area .sidemenu-body .sidemenu-nav .nav-item .sidemenu-nav-second-level .nav-item .nav-link:hover .icon {
    color: var(--dash-accent) !important;
}

body.app-shell .app-shell-sidebar__cta {
    margin: 0.75rem;
    padding: 1rem;
    border-radius: var(--dash-radius);
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    box-shadow: var(--dash-shadow-sm);
}

body.app-shell .app-shell-sidebar__cta p {
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 0.35rem;
    font-size: 0.8125rem;
}

body.app-shell .app-shell-sidebar__cta .btn {
    border-radius: var(--dash-radius-sm);
    font-weight: 600;
    font-size: 0.75rem;
    background: #fff;
    color: #1d4ed8;
    border: none;
}

body.app-shell .app-shell-sidebar__cta .btn:hover {
    background: #f1f5f9;
    color: #1e3a8a;
}

/* Sidebar colapsado: ocultar bloques extra */
body.app-shell .sidemenu-area.toggle-sidemenu-area .app-shell-sidebar__user,
body.app-shell .sidemenu-area.toggle-sidemenu-area .app-shell-sidebar__quicksearch,
body.app-shell .sidemenu-area.toggle-sidemenu-area .app-shell-sidebar__cta {
    display: none !important;
}

body.app-shell .sidemenu-area.toggle-sidemenu-area:hover .app-shell-sidebar__user,
body.app-shell .sidemenu-area.toggle-sidemenu-area:hover .app-shell-sidebar__quicksearch,
body.app-shell .sidemenu-area.toggle-sidemenu-area:hover .app-shell-sidebar__cta {
    display: flex !important;
}

body.app-shell .sidemenu-area.toggle-sidemenu-area:hover .app-shell-sidebar__quicksearch {
    display: block !important;
}

body.app-shell .sidemenu-area.toggle-sidemenu-area:hover .app-shell-sidebar__cta {
    display: block !important;
}

/* ——— Header / top navbar ——— */
body.app-shell .top-navbar.navbar {
    padding: 0.75rem 1.25rem 0.5rem;
}

body.app-shell .top-navbar--app.app-shell-header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow);
    margin: 0.75rem 1.25rem 0.5rem;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

body.app-shell .top-navbar--app.is-sticky {
    margin-top: 0.35rem;
}

body.app-shell .app-shell-header__org {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    background: var(--dash-accent-soft);
    border-radius: 999px;
    border: 1px solid #dbeafe;
}

body.app-shell .app-shell-header__org-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: #22c55e;
    flex-shrink: 0;
}

body.app-shell .app-shell-header__org-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dash-ink);
    white-space: nowrap;
}

body.app-shell .topnav-motonave-search__input-group {
    border-radius: var(--dash-radius-sm) !important;
    border-color: #e2e8f0 !important;
}

/*
 * Header: por encima del contenido de la página, por debajo de modales Bootstrap
 * (backdrop ~1050, modal ~1055) y por debajo del sidebar (10070).
 */
body.app-shell .main-content > .top-navbar.navbar {
    position: relative;
    z-index: 1020;
}

body.app-shell .main-content > .top-navbar.navbar .navbar-collapse {
    overflow: visible;
}

body.app-shell .main-content > .top-navbar.navbar .dropdown-menu {
    z-index: 1040 !important;
}

/* Autocomplete motonave: mismo rango que dropdowns del navbar, debajo de modales */
body.app-shell .topnav-motonave-search__dropdown {
    z-index: 1040;
}

/* ——— Contenido: tarjetas y tablas ——— */
body.app-shell .breadcrumb-area:not(.breadcrumb-page-toolbar),
body.app-shell .card.recent-orders-box,
body.app-shell .card:not(.border-0) {
    border-radius: var(--dash-radius) !important;
    border: 1px solid var(--dash-sidebar-border);
    box-shadow: var(--dash-shadow-sm);
    background: var(--dash-surface);
}

body.app-shell .breadcrumb-area:not(.breadcrumb-page-toolbar) {
    padding-left: 5px !important;
}

body.app-shell .breadcrumb-area.breadcrumb-page-toolbar {
    border-radius: var(--dash-radius) !important;
    padding-left: calc(0.85rem + 5px) !important;
}

/*
 * Migas de pan: primero la ruta (icono inicio + enlaces), luego título contextual (b, h1…)
 * a la derecha — evita “DASHBOARD” u otro texto antes del icono de casita.
 */
body.app-shell .breadcrumb-area:not(.breadcrumb-page-toolbar):not(.rows) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
}

body.app-shell .breadcrumb-area:not(.breadcrumb-page-toolbar):not(.rows) > .breadcrumb {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
}

body.app-shell .breadcrumb-area:not(.breadcrumb-page-toolbar):not(.rows) > b,
body.app-shell .breadcrumb-area:not(.breadcrumb-page-toolbar):not(.rows) > h1,
body.app-shell .breadcrumb-area:not(.breadcrumb-page-toolbar):not(.rows) > h5 {
    order: 2;
    margin-left: auto;
    margin-bottom: 0;
    font-weight: 600;
    color: var(--dash-muted);
    font-size: 0.8125rem;
}

body.app-shell .breadcrumb-area:not(.breadcrumb-page-toolbar):not(.rows) > h1 {
    font-size: 1rem;
    color: var(--dash-ink);
}

/* Primer eslabón: solo icono “inicio”, alineado como chip */
body.app-shell .breadcrumb-area .breadcrumb > .item:first-child > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    padding: 0;
    border-radius: var(--dash-radius-sm);
    background: var(--dash-accent-soft);
    border: 1px solid #dbeafe;
    color: var(--dash-accent) !important;
    line-height: 1;
    vertical-align: middle;
}

body.app-shell .breadcrumb-area .breadcrumb > .item:first-child > a:hover {
    background: #dbeafe;
}

body.app-shell .breadcrumb-area .breadcrumb > .item:first-child > a i {
    font-size: 1.15rem;
}

/* Barra “Descripción motonave”: miga primero en el HTML; separador antes del título */
body.app-shell .breadcrumb-page-toolbar__left {
    flex-direction: row;
    align-items: center;
}

body.app-shell .breadcrumb-page-toolbar__heading {
    border-right: none;
    border-left: 1px solid var(--dash-sidebar-border);
    padding-right: 0;
    padding-left: 0.75rem;
    margin-left: 0.25rem;
}

@media (max-width: 767.98px) {
    body.app-shell .breadcrumb-page-toolbar__heading {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        width: 100%;
    }
}

body.app-shell .card-header {
    border-top-left-radius: var(--dash-radius) !important;
    border-top-right-radius: var(--dash-radius) !important;
    background: #fafbfc !important;
    border-bottom: 1px solid var(--dash-sidebar-border) !important;
}

body.app-shell .card-header h3,
body.app-shell .card-header h4 {
    color: var(--dash-ink);
    font-weight: 600;
}

body.app-shell .table thead th {
    background: #343a40 !important;
    color: #ffffff !important;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    border-color: #404040 !important;
}

body.app-shell .btn-dark {
    border-radius: var(--dash-radius-sm);
}

body.app-shell .footer-area {
    border-top: 1px solid var(--dash-sidebar-border);
    background: var(--dash-surface);
    text-align: center;
}

body.app-shell .footer-area p {
    text-align: center;
}

/* Listados tipo motor-ships (tarjeta contenedora) */
body.app-shell .ms-list-card {
    border-radius: var(--dash-radius) !important;
    border: 1px solid var(--dash-sidebar-border);
    box-shadow: var(--dash-shadow-sm);
    overflow: hidden;
}

@media (max-width: 767.98px) {
    body.app-shell .top-navbar--app.app-shell-header {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    body.app-shell .top-navbar.navbar .responsive-burger-menu span {
        background: var(--dash-ink);
    }
}

/* ——— Modales API placas (BuscarPlacaSinSelección): casi ancho de pantalla y por encima del header app-shell ——— */
.modal-dialog.modal-placas-api-dialog {
    max-width: min(96vw, 1800px);
    width: 96vw;
    margin: 0.75rem auto;
}

/* Modales API (listado tara / vehículos finalizados): ~80 % del ancho de pantalla */
.modal-dialog.modal-placas-api-dialog.modal-placas-api-dialog--80 {
    max-width: 80vw !important;
    width: 80vw !important;
}

.modal-placas-api-table-wrap {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

/*
 * Modales API placas: z-index por encima del header (~1020), sidebar (10070) y sticky legacy (999).
 * show.bs.modal añade body.modal-placas-api-front antes del backdrop (ver BuscarPlacaSinSeleccion).
 * No subimos el header aquí: debe quedar por debajo del backdrop y del modal.
 */
body.modal-placas-api-front .modal-backdrop,
body.modal-placas-api-front .modal-backdrop.fade,
body.modal-placas-api-front .modal-backdrop.show {
    z-index: 119990 !important;
}

body.modal-placas-api-front .modal.modal-placas-api-wide,
body.modal-placas-api-front .modal.modal-placas-api-wide.fade,
body.modal-placas-api-front .modal.modal-placas-api-wide.show {
    z-index: 120000 !important;
}

/* Confirmar “Pasar a terminadas” encima del modal de listado */
.modal-pasar-terminadas-api-overlay {
    z-index: 120050 !important;
}