/* P-11 — CSS verbatim de los bloques de estilo de Pages/Common/Busqueda/ModalBusquedaDocumento.razor. Igual que hoy, es global mientras el componente está en pantalla:
   se enlaza con <link> donde estaba el bloque. Cambios: @@ → @ y capas D-51. */
/* ── Variables Cobalt Elegante ── */
.mbd-overlay {
    position: fixed; inset: 0;
    background: rgba(10,25,70,.45);
    backdrop-filter: blur(3px);
    z-index: var(--z-modal); /* D-51 (era 1080) */
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    animation: mbdFadeIn .18s ease;
}
@keyframes mbdFadeIn { from { opacity:0 } to { opacity:1 } }

.mbd-modal {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(10,25,70,.22), 0 4px 16px rgba(10,25,70,.12);
    width: min(1080px, 100%);
    max-height: calc(100vh - 32px);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: mbdSlideUp .22s cubic-bezier(.16,1,.3,1);
}
@keyframes mbdSlideUp { from { transform:translateY(18px); opacity:0 } to { transform:translateY(0); opacity:1 } }

/* ── Header ── */
.mbd-header {
    background: linear-gradient(135deg, #1a4fba 0%, #0f3494 100%);
    padding: 14px 20px 13px;
    display: flex; align-items: center; gap: 12px;
    flex-shrink: 0;
}
.mbd-header-icon {
    width: 36px; height: 36px; border-radius: 9px;
    background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 16px;
}
.mbd-header-info { flex: 1; min-width: 0; }
.mbd-header-title {
    color: #fff; font-size: 15px; font-weight: 700;
    letter-spacing: .2px; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mbd-header-sub { color: rgba(255,255,255,.72); font-size: 11.5px; margin-top: 1px; }
.mbd-header-badge {
    background: rgba(255,255,255,.18); color: #fff;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 20px; padding: 2px 10px; font-size: 11.5px; font-weight: 600;
    white-space: nowrap;
}
.mbd-btn-close {
    width: 31px; height: 31px; border-radius: 6px; border: none;
    background: rgba(255,255,255,.15); color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 13px; flex-shrink: 0;
    transition: background .15s;
}
.mbd-btn-close:hover { background: rgba(255,255,255,.28); }

/* ── Toolbar ── */
.mbd-toolbar {
    background: #f0f4fb;
    border-bottom: 1px solid #dde5f5;
    padding: 10px 16px;
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; flex-shrink: 0;
}

/* Búsqueda global */
.mbd-search-wrap {
    position: relative; flex: 1; min-width: 220px; max-width: 320px;
}
.mbd-search-wrap i {
    position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
    color: #6b7db3; font-size: 12px;
}
.mbd-search-input {
    width: 100%; height: 31px; border-radius: 5px;
    border: 1px solid #c5d3ef; background: #fff;
    padding: 0 30px 0 28px; font-size: 12.5px; color: #1e293b;
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.mbd-search-input:focus { border-color: #1a4fba; box-shadow: 0 0 0 2.5px rgba(26,79,186,.14); }
.mbd-search-clear {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #94a3b8;
    cursor: pointer; font-size: 11px; padding: 0;
    display: flex; align-items: center;
}

/* Botones toolbar */
.mbd-tbtn {
    height: 31px; border-radius: 5px; border: none;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 0 11px; font-size: 12px; font-weight: 600;
    color: #fff; cursor: pointer; white-space: nowrap;
    transition: filter .15s, transform .1s;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.mbd-tbtn:hover { filter: brightness(1.09); }
.mbd-tbtn:active { transform: scale(.97); }
.mbd-tbtn-excel { background: #16a34a; }
.mbd-tbtn-refresh { background: #374151; }
.mbd-tbtn-cols { background: #6366f1; }

/* Badge filtros activos */
.mbd-filter-badge {
    background: #dc2626; color: #fff;
    border-radius: 10px; font-size: 10px; font-weight: 700;
    padding: 1px 5px; margin-left: -4px; margin-top: -12px;
}

/* ── Barra de filtros de fecha ── */
.mbd-filters {
    background: #f8faff;
    border-bottom: 1px solid #e4ecf8;
    padding: 8px 16px;
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap; flex-shrink: 0;
}
.mbd-filter-label { font-size: 11px; color: #6b7db3; font-weight: 600; margin-right: 2px; }

.mbd-fchip {
    height: 26px; border-radius: 5px;
    border: 1px solid #c5d3ef;
    background: #fff; color: #3d5a99;
    font-size: 11.5px; font-weight: 600;
    padding: 0 10px; cursor: pointer;
    transition: all .14s;
}
.mbd-fchip:hover { border-color: #1a4fba; color: #1a4fba; background: #eef2fb; }
.mbd-fchip.active {
    background: #1a4fba; color: #fff; border-color: #1a4fba;
}

/* Toggle rango personalizado */
.mbd-range-toggle {
    height: 26px; border-radius: 5px;
    border: 1px dashed #b0bfdf;
    background: #f0f4fb; color: #5a7ab5;
    font-size: 11.5px; font-weight: 600;
    padding: 0 10px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    transition: all .14s;
}
.mbd-range-toggle.active { border-style: solid; border-color: #1a4fba; color: #1a4fba; background: #e8eef9; }

.mbd-date-range {
    display: flex; align-items: center; gap: 5px;
    animation: mbdFadeIn .15s ease;
}
.mbd-date-input {
    height: 26px; border-radius: 5px; border: 1px solid #c5d3ef;
    padding: 0 7px; font-size: 12px; color: #1e293b; outline: none;
    background: #fff; transition: border-color .14s;
}
.mbd-date-input:focus { border-color: #1a4fba; }
.mbd-date-sep { color: #94a3b8; font-size: 11px; }
.mbd-btn-apply {
    height: 26px; border-radius: 5px; border: none;
    background: #1a4fba; color: #fff;
    font-size: 11.5px; font-weight: 600; padding: 0 10px;
    cursor: pointer;
}

/* Estados chips */
.mbd-estado-chip {
    height: 22px; border-radius: 11px;
    border: 1px solid transparent;
    font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
    padding: 0 9px; cursor: pointer; transition: all .13s;
    text-transform: uppercase;
}

/* ── Tabla ── */
.mbd-table-wrap {
    flex: 1; overflow: auto; position: relative;
}
.mbd-table {
    width: 100%; border-collapse: collapse;
    font-size: 12.5px; color: #1e293b;
}
.mbd-table thead { position: sticky; top: 0; z-index: 2; }
.mbd-table th {
    background: #1a4fba; color: #fff;
    padding: 9px 12px; font-weight: 600; font-size: 11.5px;
    letter-spacing: .3px; text-align: left;
    border-right: 1px solid rgba(255,255,255,.12);
    white-space: nowrap; user-select: none; cursor: pointer;
}
.mbd-table th:hover { background: #0f3494; }
.mbd-table th.sorted-asc::after { content: " ↑"; opacity: .8; }
.mbd-table th.sorted-desc::after { content: " ↓"; opacity: .8; }
.mbd-table td {
    padding: 7px 12px; border-bottom: 1px solid #eef2fb;
    vertical-align: middle; white-space: nowrap;
}
.mbd-table tr { cursor: pointer; transition: background .1s; }
.mbd-table tr:hover td { background: #eef2fb; }
.mbd-table tr.selected td { background: #dde8fa; }
.mbd-table tr.selected td:first-child {
    border-left: 3px solid #1a4fba;
}
.mbd-table tr:last-child td { border-bottom: none; }

/* Highlight búsqueda */
.mbd-hl { background: #fef08a; border-radius: 2px; padding: 0 1px; }

/* Badge de estado */
.mbd-badge {
    display: inline-block; border-radius: 11px;
    padding: 2px 9px; font-size: 10.5px; font-weight: 700;
    letter-spacing: .3px; text-transform: uppercase;
}
.mbd-badge-green { background: #dcfce7; color: #15803d; }
.mbd-badge-red   { background: #fee2e2; color: #b91c1c; }
.mbd-badge-yellow{ background: #fef9c3; color: #92400e; }
.mbd-badge-gray  { background: #f1f5f9; color: #475569; }
.mbd-badge-blue  { background: #dbeafe; color: #1e40af; }

/* ── Panel detalle ── */
.mbd-detail-panel {
    border-top: 2px solid #e4ecf8;
    background: #f8faff;
    flex-shrink: 0;
    max-height: 200px; overflow: hidden;
    transition: max-height .22s ease, opacity .2s;
}
.mbd-detail-panel.hidden { max-height: 0; opacity: 0; pointer-events: none; }
.mbd-detail-header {
    background: #e8eef9; padding: 6px 16px;
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid #d4e0f5;
}
.mbd-detail-title { font-size: 11.5px; font-weight: 700; color: #1a4fba; flex: 1; }
.mbd-detail-scroll { overflow-y: auto; max-height: 152px; }
.mbd-detail-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.mbd-detail-table th {
    position: sticky; top: 0;
    background: #dde8fa; color: #1a4fba;
    padding: 5px 10px; font-weight: 700;
    border-bottom: 1px solid #c5d3ef; text-align: left;
}
.mbd-detail-table td {
    padding: 5px 10px; border-bottom: 1px solid #eef2fb; color: #334155;
}

/* ── Footer / Paginador ── */
.mbd-footer {
    background: #f0f4fb; border-top: 1px solid #dde5f5;
    padding: 8px 16px;
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0; flex-wrap: wrap;
}
.mbd-footer-info { font-size: 11.5px; color: #6b7db3; flex: 1; min-width: 120px; }
.mbd-pager { display: flex; align-items: center; gap: 4px; }
.mbd-pager-btn {
    width: 28px; height: 28px; border-radius: 5px; border: 1px solid #c5d3ef;
    background: #fff; color: #3d5a99; font-size: 11.5px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .13s;
}
.mbd-pager-btn:hover:not(:disabled) { background: #eef2fb; border-color: #1a4fba; color: #1a4fba; }
.mbd-pager-btn:disabled { opacity: .4; cursor: not-allowed; }
.mbd-pager-btn.active { background: #1a4fba; color: #fff; border-color: #1a4fba; }
.mbd-pager-input {
    width: 40px; height: 28px; border-radius: 5px; border: 1px solid #c5d3ef;
    text-align: center; font-size: 12px; font-weight: 600; color: #1e293b; outline: none;
}
.mbd-pager-sep { color: #94a3b8; font-size: 11.5px; padding: 0 2px; }
.mbd-rows-select {
    height: 28px; border-radius: 5px; border: 1px solid #c5d3ef;
    background: #fff; padding: 0 6px; font-size: 12px; color: #1e293b;
    cursor: pointer; outline: none;
}

/* ── Overlay carga ── */
.mbd-loading-overlay {
    position: absolute; inset: 0;
    background: rgba(255,255,255,.82);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px;
    z-index: 10;
}
.mbd-spinner {
    width: 36px; height: 36px; border-radius: 50%;
    border: 3px solid #dde8fa;
    border-top-color: #1a4fba;
    animation: mbdSpin .7s linear infinite;
}
@keyframes mbdSpin { to { transform: rotate(360deg) } }
.mbd-loading-text { color: #1a4fba; font-size: 13px; font-weight: 600; }

/* ── Estado vacío ── */
.mbd-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 40px 20px; gap: 10px; color: #94a3b8;
}
.mbd-empty i { font-size: 36px; color: #c5d3ef; }
.mbd-empty-title { font-size: 14px; font-weight: 600; color: #64748b; }
.mbd-empty-sub { font-size: 12.5px; }

/* ── Kbd hints ── */
.mbd-kbd { font-size: 10px; background: #e4ecf8; border-radius: 3px; padding: 1px 4px; color: #5a7ab5; font-weight: 600; }

/* Scrollbar suave */
.mbd-table-wrap::-webkit-scrollbar,
.mbd-detail-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
.mbd-table-wrap::-webkit-scrollbar-track,
.mbd-detail-scroll::-webkit-scrollbar-track { background: #f0f4fb; }
.mbd-table-wrap::-webkit-scrollbar-thumb,
.mbd-detail-scroll::-webkit-scrollbar-thumb { background: #c5d3ef; border-radius: 3px; }