/* =========================================================
   5. ENCABEZADO DE PAGINA (titulo, migas, acciones)
   ========================================================= */
.content-header,
.page-header {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 0 24px;
    position: relative;
}

.content-header > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 0;
}

.content-header > .row > [class*="col-"] {
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
    padding: 0;
}

/* Las migas van encima del titulo aunque el HTML las ponga despues. */
.content-header > .row > [class*="col-"]:has(.breadcrumb) {
    order: -1;
    flex: 0 0 100%;
}

.content-header > .row > [class*="col-"]:has(> .btn),
.content-header > .row > [class*="col-"]:has(> a.btn),
.content-header > .row > .text-right:not(:has(.breadcrumb)),
.content-header > .row > .text-end:not(:has(.breadcrumb)) {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.content-header .header-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
    margin: 0;
}

.content-header h1,
.content-header h2,
.page-header h1 {
    margin: 0;
    font-size: var(--ds-text-2xl);
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.25;
    color: var(--ds-ink-900);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.content-header h3,
.content-header h4 {
    margin: 0;
    font-size: var(--ds-text-lg);
    font-weight: 600;
    color: var(--ds-ink-900);
}

.content-header h1 i,
.content-header h2 i {
    font-size: 18px;
    color: var(--ds-ink-500);
}

.content-header h1 small,
.content-header h2 small {
    font-size: var(--ds-text-sm);
    font-weight: 400;
    color: var(--ds-ink-500);
    margin-left: 4px;
}

.breadcrumb,
ul.breadcrumb,
ol.breadcrumb,
.breadcrumb-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent;
    font-size: var(--ds-text-sm);
    line-height: 1.4;
    color: var(--ds-ink-500);
}

.breadcrumb > li,
.breadcrumb > .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    color: var(--ds-ink-500);
}

.breadcrumb > li + li::before,
.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    float: none;
    padding: 0;
    color: var(--ds-ink-300);
}

.breadcrumb a {
    color: var(--ds-ink-600);
}

.breadcrumb a:hover {
    color: var(--ds-ink-900);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.breadcrumb > li:last-child,
.breadcrumb > li:last-child a,
.breadcrumb > .active {
    color: var(--ds-ink-700);
}

/* El titulo de la barra superior repite el encabezado de la pagina. */
@media (min-width: 576px) {
    body:has(#page-content .content-header) header.navbar .navbar-nav-custom > li.d-sm-block {
        display: none !important;
    }
}

/* =========================================================
   6. TARJETAS (block, widget, card, panel)
   ========================================================= */
.block,
.widget,
.panel,
.card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-ink-200);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow-1);
    margin-bottom: 24px;
    transition: box-shadow var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease);
}

/* Modelo ProUI: el titulo compensa el relleno del bloque. */
.block,
.block.full {
    padding: 0 var(--ds-card-pad) var(--ds-card-pad);
    overflow: visible;
}

.block-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    min-height: 56px;
    margin: 0 calc(-1 * var(--ds-card-pad)) var(--ds-card-pad);
    padding: 10px var(--ds-card-pad);
    background: transparent;
    border-bottom: 1px solid var(--ds-ink-150);
    border-radius: var(--ds-radius) var(--ds-radius) 0 0;
}

.block-title::before,
.block-title::after {
    display: none;
}

.block-title h1,
.block-title h2,
.block-title h3,
.block-title h4,
.block-title h5 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--ds-text-lg);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
    text-transform: none;
    color: var(--ds-ink-900);
}

.block-title h1 i,
.block-title h2 i,
.block-title h3 i,
.block-title h4 i {
    font-size: 15px;
    color: var(--ds-ink-500);
}

.block-title h2 small,
.block-title h3 small {
    font-size: var(--ds-text-sm);
    font-weight: 400;
    color: var(--ds-ink-500);
}

.block-title > .pull-right,
.block-title > .float-end,
.block-title > .block-options {
    float: none;
    margin-left: auto;
}

.block-title .block-options {
    display: flex;
    align-items: center;
    gap: 8px;
    height: auto;
    padding: 0;
}

.block-title .block-options .btn {
    opacity: 1;
}

.block > .block-content-full,
.block .block-content-full,
.block.full .block-content-full {
    margin: 0 calc(-1 * var(--ds-card-pad)) calc(-1 * var(--ds-card-pad));
}

.block-content {
    padding: 0;
}

.block-section {
    margin-bottom: var(--ds-space-5);
}

.block > :last-child {
    margin-bottom: 0;
}

.widget-content {
    padding: var(--ds-card-pad);
    background: transparent;
}

.panel-heading,
.card-header {
    padding: 14px var(--ds-card-pad);
    background: transparent;
    border-bottom: 1px solid var(--ds-ink-150);
    border-radius: var(--ds-radius) var(--ds-radius) 0 0;
    font-weight: 600;
    color: var(--ds-ink-900);
}

.panel-heading h2,
.panel-heading h3,
.panel-heading h4,
.panel-title,
.card-header h2,
.card-header h3,
.card-header h4,
.card-title {
    margin: 0;
    font-size: var(--ds-text-lg);
    font-weight: 600;
    color: var(--ds-ink-900);
}

.panel-body,
.card-body {
    padding: var(--ds-card-pad);
}

.panel-footer,
.card-footer {
    padding: 12px var(--ds-card-pad);
    background: var(--ds-ink-50);
    border-top: 1px solid var(--ds-ink-150);
    border-radius: 0 0 var(--ds-radius) var(--ds-radius);
}

/* Solo las tarjetas que son enlaces responden al puntero. */
a.widget:hover,
a.block:hover,
a.card:hover,
.stat-card:hover,
.dashboard-mini-card:hover {
    border-color: var(--ds-ink-300);
    box-shadow: var(--ds-shadow-2);
}

/* Mensajes (mensajes.php), antes en la página. */
/* Layout scoped de mensajes.php (clase .msgx-page, solo esta vista).
   El layout legacy inner-sidebar dependia de un padding-left de 240px
   que las reglas globales de #page-content anulan con !important, lo
   que superponia el panel lateral sobre el card de mensajes. Se apila
   el contenido en un solo card: acciones en la cabecera y paginacion
   al pie. No se tocan reglas globales ni otras vistas. */
.msgx-page .msgx-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.msgx-page .msgx-list-head h2 { padding: 0; }
.msgx-page .msgx-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.msgx-page .msgx-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 18px;
    border-top: 1px solid var(--srx-border-soft, #e5e9f0);
}
.msgx-page .msgx-pager {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.msgx-page .msgx-pageinfo {
    color: var(--srx-text-muted, #6b7280);
    font-size: 12.5px;
    white-space: nowrap;
}
.msgx-page .msgx-empty {
    margin: 0;
    padding: 24px 18px;
    color: var(--srx-text-muted, #6b7280);
}
/* El CSS legacy anima .modal-dialog con la clase .in (BS3); BS5 aplica
   .show, por lo que el dialogo del composer quedaba en opacity 0 y
   scale(.6). Se restaura solo para el modal de esta pagina. */
#modal-compose.modal.show .modal-dialog {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
@media (max-width: 576px) {
    .msgx-page .msgx-list-head h2 { font-size: 14px; }
    .msgx-page table td img.img-circle {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Gráficas (generar_graficas.php), antes en la página. */
/* Grid de cards de graficas (tokens --srx-*) */
.grafica-card {
    height: calc(100% - 20px);
    display: flex;
    flex-direction: column;
}
.grafica-form {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.grafica-body {
    flex: 1;
}
.grafica-desc {
    color: var(--srx-text-muted, #64748b);
    font-size: 13px;
    margin: 0 0 12px;
}
.grafica-form .form-label {
    font-weight: 500;
    color: var(--srx-text, #0f172a);
    margin-bottom: 6px;
}
.grafica-form .btn {
    align-self: flex-start;
    margin-top: 4px;
}