@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.3eliywa438.bundle.scp.css';

/* _content/MtmpProjectsPoc.Web/Components/ActionPanel.razor.rz.scp.css */
/* Sticky action panel — UX redesign 2026-04-30, spec section 2.5 */

.action-panel[b-uubwm1hx16] {
    position: sticky;
    top: 80px;
    width: 100%;
    max-width: 280px;
    padding: 16px;
    background: var(--surface-default);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Action buttons */
.action-panel .action-buttons[b-uubwm1hx16] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-default);
}

.action-panel .btn-action[b-uubwm1hx16] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.action-panel .btn-action:disabled[b-uubwm1hx16] {
    opacity: 0.55;
    cursor: not-allowed;
}

.action-panel .btn-save[b-uubwm1hx16] {
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    color: var(--text-strong);
}

.action-panel .btn-save:hover:not(:disabled)[b-uubwm1hx16] {
    background: var(--border-default);
}

.action-panel .btn-validate[b-uubwm1hx16] {
    background: var(--selection-bg);
    border: 1px solid var(--selection-bg);
    color: var(--action-primary);
}

.action-panel .btn-validate:hover:not(:disabled)[b-uubwm1hx16] {
    background: var(--selection-bg);
}

.action-panel .btn-preview[b-uubwm1hx16] {
    background: var(--state-success-bg);
    border: 1px solid var(--state-success-bg);
    color: var(--state-success-accent);
}

.action-panel .btn-preview:hover:not(:disabled)[b-uubwm1hx16] {
    background: var(--state-success-bg);
}

.action-panel .auto-save-indicator[b-uubwm1hx16] {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-weakest);
    text-align: center;
}

/* Progress section */
.action-panel .progress-section[b-uubwm1hx16] {
    margin-bottom: 20px;
}

.action-panel .progress-section h6[b-uubwm1hx16] {
    margin: 0 0 8px 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-weakest);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-panel .required-count[b-uubwm1hx16] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    padding: 12px;
    background: var(--surface-subtle);
    border-radius: 8px;
    border: 1px solid var(--border-default);
}

.action-panel .required-count .count-current[b-uubwm1hx16] {
    font-size: 28px;
    font-weight: 700;
    color: var(--action-primary);
}

.action-panel .required-count .count-separator[b-uubwm1hx16] {
    font-size: 20px;
    font-weight: 400;
    color: var(--text-weakest);
}

.action-panel .required-count .count-total[b-uubwm1hx16] {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-strong);
}

.action-panel .progress-text[b-uubwm1hx16] {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-weakest);
    text-align: center;
}

/* Checklist */
.action-panel .checklist-section h6[b-uubwm1hx16] {
    margin: 0 0 12px 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-weakest);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-panel .checklist[b-uubwm1hx16] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.action-panel .checklist li[b-uubwm1hx16] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 12px;
    color: var(--text-strong);
}

.action-panel .checklist li.completed .icon[b-uubwm1hx16] {
    color: var(--state-success-accent);
}

.action-panel .checklist li.pending .icon[b-uubwm1hx16] {
    color: var(--text-weakest);
}

.action-panel .checklist li.warning[b-uubwm1hx16] {
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}

.action-panel .checklist li.warning .icon[b-uubwm1hx16] {
    color: var(--state-attention-accent);
}

.action-panel .checklist li.warning .detail[b-uubwm1hx16] {
    margin-left: 20px;
    font-size: 10px;
    color: var(--text-weakest);
}

.action-panel .checklist li.separator[b-uubwm1hx16] {
    height: 1px;
    background: var(--border-default);
    margin: 8px 0;
    padding: 0;
}

/* Responsive: panel becomes bottom sheet on tablet/mobile */
@media (max-width: 992px) {
    .action-panel[b-uubwm1hx16] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
        z-index: 100;
    }

    .action-panel .action-buttons[b-uubwm1hx16] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .action-panel .btn-action[b-uubwm1hx16] {
        flex: 1;
        min-width: calc(50% - 4px);
    }

    .action-panel .checklist-section[b-uubwm1hx16] {
        display: none;
    }

    .action-panel .progress-section[b-uubwm1hx16] {
        margin-bottom: 0;
    }
}
/* _content/MtmpProjectsPoc.Web/Components/Admin/ConditionalRulePreviewPanel.razor.rz.scp.css */
/* UX-SPEC-CONDITIONAL-RULES-PREVIEW-2026-08-20 — estilos del panel de vista previa.
   Solo tokens/variables del framework (Bootstrap ya expone --bs-*); sin hex hardcodeados. */

.preview-panel > .card-header[b-s7j6vop66b] {
    cursor: pointer;
}

/* La matriz scrollea dentro de su contenedor: la página nunca scrollea horizontal (AC10). */
.preview-matrix-scroll[b-s7j6vop66b] {
    overflow-x: auto;
    max-height: 28rem;
    overflow-y: auto;
}

.preview-matrix[b-s7j6vop66b] {
    min-width: max-content;
}

/* Columna de nombres congelada (patrón de columna fija del tracker). */
.preview-sticky-col[b-s7j6vop66b] {
    position: sticky;
    left: 0;
    background-color: var(--bs-body-bg);
    z-index: 1;
    min-width: 16rem;
    max-width: 24rem;
}

.preview-phase-header td[b-s7j6vop66b] {
    background-color: var(--bs-tertiary-bg);
}

.preview-col-header[b-s7j6vop66b] {
    cursor: pointer;
    white-space: nowrap;
}

.preview-col-title[b-s7j6vop66b] {
    max-width: 10rem;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.preview-cell[b-s7j6vop66b] {
    cursor: pointer;
    min-width: 4.5rem;
}

/* Diff contra la columna base "(vacío)": borde izquierdo de énfasis (spec §5.1). */
.preview-cell-diff[b-s7j6vop66b] {
    border-left: 3px solid var(--bs-primary);
}

.preview-col-active[b-s7j6vop66b] {
    background-color: var(--bs-primary-bg-subtle);
}

/* Resaltado transitorio de la fila target al entrar por "Previsualizar" (AC3). */
.preview-row-highlight > td[b-s7j6vop66b] {
    background-color: var(--bs-warning-bg-subtle);
    transition: background-color 0.5s ease;
}

.preview-row-name[b-s7j6vop66b] {
    text-decoration: none;
}

.preview-row-detail td[b-s7j6vop66b] {
    background-color: var(--bs-tertiary-bg);
}

.preview-h1-dot[b-s7j6vop66b] {
    color: var(--bs-secondary-color);
    font-size: 0.6rem;
    vertical-align: middle;
}

.preview-chip[b-s7j6vop66b] {
    --bs-btn-padding-y: 0.1rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.75rem;
}

/* Re-evaluación: la matriz anterior queda visible atenuada, sin parpadeo a blanco (§5.3). */
.preview-evaluating-overlay[b-s7j6vop66b] {
    position: absolute;
    inset: 0;
    background-color: color-mix(in srgb, var(--bs-body-bg) 60%, transparent);
    z-index: 2;
}

/* ── Nivel 2: offcanvas derecho ─────────────────────────────────────────────────── */
.preview-offcanvas-backdrop[b-s7j6vop66b] {
    position: fixed;
    inset: 0;
    background-color: var(--bs-backdrop-bg, rgba(0, 0, 0, 0.5));
    opacity: 0.5;
    z-index: 1040;
}

.preview-offcanvas[b-s7j6vop66b] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 100vw;
    background-color: var(--bs-body-bg);
    z-index: 1045;
    display: flex;
    flex-direction: column;
    box-shadow: var(--bs-box-shadow-lg);
}

@media (max-width: 991.98px) {
    .preview-offcanvas[b-s7j6vop66b] {
        width: 100vw;
    }
}

.preview-offcanvas-body[b-s7j6vop66b] {
    overflow-y: auto;
    flex: 1;
}

.preview-schema-hidden[b-s7j6vop66b] {
    opacity: 0.7;
}
/* _content/MtmpProjectsPoc.Web/Components/Admin/FieldAssociationsTable.razor.rz.scp.css */
/* FieldAssociationsTable.razor.css */
/* Scoped styles for Field Associations Table component */

/* Skeleton Animation */
.skeleton[b-xe1551ulap] {
    background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--border-default) 50%, var(--surface-sunken) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-xe1551ulap 1.5s infinite ease-in-out;
    border-radius: 4px;
}

@keyframes skeleton-shimmer-b-xe1551ulap {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.field-skeleton-container[b-xe1551ulap] {
    padding: 0.5rem 0;
}

/* Empty State */
.empty-state[b-xe1551ulap] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: linear-gradient(180deg, var(--surface-sunken) 0%, var(--surface-default) 100%);
    border-radius: 0.5rem;
    border: 1px dashed var(--border-default);
}

.empty-state-icon[b-xe1551ulap] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background-color: var(--selection-bg);
    color: var(--action-primary);
    border-radius: 50%;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.empty-state-title[b-xe1551ulap] {
    color: var(--text-strong);
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.empty-state-text[b-xe1551ulap] {
    color: var(--text-weak);
    font-size: 0.875rem;
    margin-bottom: 0;
    max-width: 280px;
    line-height: 1.5;
}

/* Table Improvements */
.table-hover tbody tr:hover[b-xe1551ulap] {
    background-color: rgba(13, 110, 253, 0.04);
}

.table th[b-xe1551ulap] {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--surface-default);
    white-space: nowrap;
}

.table td[b-xe1551ulap] {
    vertical-align: middle;
    font-size: 0.875rem;
}

/* Badge improvements */
.badge[b-xe1551ulap] {
    font-weight: 500;
}

/* Filter button group */
.btn-group .btn[b-xe1551ulap] {
    font-size: 0.8rem;
    padding: 0.375rem 0.75rem;
}

/* Summary text */
.text-muted.small[b-xe1551ulap] {
    font-size: 0.75rem;
}
/* _content/MtmpProjectsPoc.Web/Components/Admin/FieldOrderModal.razor.rz.scp.css */
/* PRJ-22 — panel para acomodar por arrastre los campos de una sección o una tarea.
   Geometría tomada del configurador de columnas del tracker (.cc-*), que es el otro sitio del
   producto donde se ordena arrastrando: mismo telón, mismo alto máximo, mismos renglones de
   32px. Que las dos superficies de "acomodar cosas" se vean iguales no es adorno — es lo que hace
   que aprender una sirva para la otra. */

.fo-backdrop[b-9x2mslaege] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 1055;
}

.fo-modal[b-9x2mslaege] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 32px));
    max-height: min(680px, calc(100vh - 64px));
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.24);
    z-index: 1060;
}

.fo-header[b-9x2mslaege] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--mtmp-border-gray, #dce5f2);
}

.fo-header h2[b-9x2mslaege] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--medtronic-blue-primary, #170f5f);
}

.fo-subtitle[b-9x2mslaege] {
    margin: 2px 0 0;
    font-size: 0.8125rem;
    color: #64748b;
}

.fo-close[b-9x2mslaege] {
    border: none;
    background: transparent;
    font-size: 1rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
}

.fo-close:hover[b-9x2mslaege] { color: #0f172a; }

.fo-body[b-9x2mslaege] {
    padding: 12px 20px;
    overflow-y: auto;
    flex: 1;
}

.fo-help[b-9x2mslaege],
.fo-empty[b-9x2mslaege] {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    color: #64748b;
}

.fo-list[b-9x2mslaege] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fo-item[b-9x2mslaege] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--mtmp-border-gray, #dce5f2);
    border-radius: 8px;
    background: #fff;
    cursor: grab;
    /* El cursor de texto sobre un elemento arrastrable confunde: aquí no se selecciona, se mueve. */
    user-select: none;
}

.fo-item:focus-visible[b-9x2mslaege] {
    outline: 2px solid var(--mtmp-primary, #117bff);
    outline-offset: 1px;
}

/* Elemento en vuelo: se atenúa para que se lea que va a moverse (lo salta
   prefers-reduced-motion desde el JS, que no agrega la clase). */
.fo-item.fo-dragging[b-9x2mslaege] {
    opacity: 0.45;
    cursor: grabbing;
}

/* Destino bajo el puntero: línea superior gruesa = "aquí va a caer". */
.fo-item.fo-drop-target[b-9x2mslaege] {
    border-color: var(--mtmp-primary, #117bff);
    box-shadow: inset 0 2px 0 0 var(--mtmp-primary, #117bff);
}

.fo-grip[b-9x2mslaege] {
    color: #94a3b8;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.fo-name[b-9x2mslaege] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f172a;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El nombre técnico va al lado del visible porque en esta pantalla dos campos pueden llamarse
   parecido y el técnico es el que los distingue sin abrir cada uno. */
.fo-tech[b-9x2mslaege] {
    font-size: 0.6875rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #94a3b8;
    flex-shrink: 0;
}

.fo-type[b-9x2mslaege] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 2px 6px;
    flex-shrink: 0;
}

.fo-footer[b-9x2mslaege] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--mtmp-border-gray, #dce5f2);
}

.fo-message[b-9x2mslaege] {
    font-size: 0.8125rem;
    color: #64748b;
}

.fo-footer-actions[b-9x2mslaege] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}
/* _content/MtmpProjectsPoc.Web/Components/Admin/RoleEditModal.razor.rz.scp.css */
/* RoleEditModal — permission picker styles.
   Moved out of the inline <style> block (which leaked globally) into scoped CSS,
   with every color consuming a design-system token (DS v2: zero raw #hex). */

.perm-category[b-i11gl7to6g] {
    border: 1px solid var(--med-gray-lighter);
    border-radius: .5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.perm-category-head[b-i11gl7to6g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .4rem .6rem;
    background: var(--med-gray-faintest);
    border-bottom: 1px solid var(--med-gray-lighter);
    font-weight: 600;
    font-size: .85rem;
}

.perm-category-title[b-i11gl7to6g] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.perm-category-actions[b-i11gl7to6g] {
    font-size: .72rem;
    white-space: nowrap;
}

.perm-category-actions[b-i11gl7to6g]  .btn-link {
    text-decoration: none;
}

.perm-category-body[b-i11gl7to6g] {
    padding: .3rem .45rem;
}

.perm-item[b-i11gl7to6g] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .22rem .35rem;
    border-radius: .35rem;
    margin: 0;
}

.perm-item:hover[b-i11gl7to6g] {
    background: var(--med-gray-lightest);
}

.perm-item-on[b-i11gl7to6g] {
    background: var(--selection-bg, var(--med-gray-lightest));
}

.perm-item .form-check-input[b-i11gl7to6g] {
    margin-top: .15rem;
    flex: 0 0 auto;
}

.perm-item label[b-i11gl7to6g] {
    cursor: pointer;
    line-height: 1.25;
}

.perm-name[b-i11gl7to6g] {
    font-size: .82rem;
}

.perm-code[b-i11gl7to6g] {
    display: inline-block;
    margin-left: .4rem;
    font-size: .66rem;
    color: var(--med-gray-medium);
    background: var(--med-gray-lightest);
    padding: 0 .3rem;
    border-radius: .25rem;
}
/* _content/MtmpProjectsPoc.Web/Components/ChangeHistoryModal.razor.rz.scp.css */
/* Story 8.5 — historial de cambios de fecha.
   Los colores consumen SOLO var(--token) del sistema, sin respaldo hex: un respaldo con hex es
   un color escrito a mano que el barrido de tokens caza, y además esconde el error de teclear
   un nombre de token que no existe (el respaldo lo tapa y el token nunca se aplica). */

.change-history__loading[b-bqgmu94ck9] {
    display: flex;
    align-items: center;
    padding: var(--med-space-4, 1rem) 0;
    color: var(--text-weak);
}

/* La tabla es ancha (ocho columnas) y el modal no debe desbordar la página:
   el scroll horizontal vive AQUÍ, no en el cuerpo del documento. */
.change-history__scroll[b-bqgmu94ck9] {
    overflow-x: auto;
    max-height: 60vh;
    overflow-y: auto;
}

.change-history__table[b-bqgmu94ck9] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--med-font-size-sm, 0.875rem);
}

.change-history__table th[b-bqgmu94ck9] {
    position: sticky;
    top: 0;
    background: var(--bg-white);
    text-align: left;
    padding: var(--med-space-2, 0.5rem);
    border-bottom: 2px solid var(--border-strong);
    font-weight: 600;
    white-space: nowrap;
}

.change-history__table td[b-bqgmu94ck9] {
    padding: var(--med-space-2, 0.5rem);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
}

/* AC: las ediciones de línea base se distinguen del replan de la fecha viva. Es un fondo,
   no solo color de texto: el color por sí solo no es un canal accesible. */
.change-history__row--baseline[b-bqgmu94ck9] {
    background: var(--bg-light);
}

.change-history__counter[b-bqgmu94ck9] {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.change-history__impact[b-bqgmu94ck9] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.change-history__impact--delay[b-bqgmu94ck9] {
    color: var(--color-danger);
    font-weight: 600;
}

.change-history__impact--ahead[b-bqgmu94ck9] {
    color: var(--color-success);
}

.change-history__impact--ontime[b-bqgmu94ck9],
.change-history__impact--none[b-bqgmu94ck9] {
    color: var(--text-weak);
}

.change-history__reason[b-bqgmu94ck9] {
    min-width: 16rem;
    white-space: normal;
}

@media (max-width: 768px) {
    .change-history__reason[b-bqgmu94ck9] {
        min-width: 10rem;
    }
}
/* _content/MtmpProjectsPoc.Web/Components/Comments/CommentsDrawer.razor.rz.scp.css */
/* ============================================================================
   CommentsDrawer — estilo del encabezado (título, contexto, cambiador de alcance).

   POR QUÉ EXISTE ESTE ARCHIVO: el CSS de DsDrawer es scoped, así que sus reglas
   para `.ds-drawer__title` y `.ds-drawer__close` NO alcanzan a los elementos que
   este componente proyecta vía HeaderContent (llevan el scope id de CommentsDrawer,
   no el del primitivo). Sin este archivo, el título y el ✕ del encabezado salían
   con estilos de navegador y las clases `comments-drawer__*` no existían en ningún
   CSS: las pestañas eran botones crudos.

   COLORES: solo var(--token), cero #hex, cero !important (misma convención que
   DsDrawer.razor.css documenta).
   ============================================================================ */

/* ── Bloque título → contexto → pestañas ─────────────────────────────────────
   flex:1 + min-width:0 son los que permiten que la línea de contexto trunque con
   ellipsis en vez de empujar el botón ✕ fuera del encabezado. */
.comments-drawer__heading[b-vnwwbkj9a7] {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* ── Réplica de DsDrawer.razor.css (título y cierre) ─────────────────────────
   Mismas reglas, mismos tokens. Si el primitivo cambia su encabezado, esta copia
   se actualiza a mano — el precio de proyectar HeaderContent con scoped CSS. */
.ds-drawer__title[b-vnwwbkj9a7] {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--med-blue-primary);
  line-height: var(--line-height-tight);
}

.ds-drawer__close[b-vnwwbkj9a7] {
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.ds-drawer__close:hover[b-vnwwbkj9a7] {
  color: var(--med-blue-primary);
  background: var(--med-gray-lightest);
}

/* El primitivo no trae foco visible en el ✕; aquí sí, porque este drawer se opera
   con teclado durante juntas (Tab desde las pestañas cae directo en el cierre). */
.ds-drawer__close:focus-visible[b-vnwwbkj9a7] {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ── Línea de contexto ("P-1042 · Injection Phase") ──────────────────────────
   Secundaria y discreta: identifica el hilo sin competir con el título. Trunca
   con ellipsis porque los nombres de fase/tarea largos no justifican dos líneas
   en un panel de 420px. El title-tooltip no hace falta: el hilo mismo confirma. */
.comments-drawer__context[b-vnwwbkj9a7] {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Cambiador de alcance (Project / Phase / Task) ───────────────────────────
   Segmented control en forma de píldora: riel hundido gris con la pestaña activa
   en el azul primario de la marca. Se eligió relleno sólido (y no solo subrayado
   como DsTabBar) porque aquí cambiar de pestaña cambia el HILO COMPLETO, no una
   sección de la misma cosa — el estado activo tiene que leerse de reojo. */
.comments-drawer__scopes[b-vnwwbkj9a7] {
  display: inline-flex;
  align-self: flex-start;
  gap: 2px;
  margin-top: var(--spacing-xs);
  padding: 2px;
  background: var(--med-gray-lightest);
  border: 1px solid var(--grid-line);
  border-radius: var(--radius-lg);
}

.comments-drawer__scope[b-vnwwbkj9a7] {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 3px var(--spacing-md);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  line-height: var(--line-height-tight);
  white-space: nowrap;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.comments-drawer__scope:hover:not(.is-active)[b-vnwwbkj9a7] {
  background: var(--bg-white);
  color: var(--med-blue-primary);
}

.comments-drawer__scope:focus-visible[b-vnwwbkj9a7] {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  /* offset 1px y no el global de 2px: dentro del riel (padding 2px) el anillo a
     2px se encimaría con el borde del track y se leería sucio. */
  outline-offset: 1px;
}

.comments-drawer__scope.is-active[b-vnwwbkj9a7] {
  background: var(--med-blue-primary);
  color: var(--text-inverse);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-sm);
}

/* ── Franja de alcance activo ("Comentando en la fase · Injection") ──────────
   Responde la pregunta que las pestañas solas no contestan: ¿DÓNDE va a caer lo
   que escriba? Nivel con icono + nombre de la cosa como chip. El acento cambia
   por nivel para que el ojo distinga proyecto/fase/tarea sin leer: azul sólido
   de marca para proyecto, y los acentos de progreso/éxito del design system
   (usados aquí como identidad, no como estado) para fase y tarea. */
.comments-drawer__active-scope[b-vnwwbkj9a7] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-width: 0;
  margin-top: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  border-left: 3px solid var(--med-blue-primary);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.comments-drawer__active-scope > i[b-vnwwbkj9a7] {
  color: var(--med-blue-primary);
  font-size: var(--font-size-sm);
  line-height: 1;
}

.comments-drawer__active-scope--phase[b-vnwwbkj9a7] {
  border-left-color: var(--state-progress-accent);
}

.comments-drawer__active-scope--phase > i[b-vnwwbkj9a7] {
  color: var(--state-progress-accent);
}

.comments-drawer__active-scope--task[b-vnwwbkj9a7] {
  border-left-color: var(--state-success-accent);
}

.comments-drawer__active-scope--task > i[b-vnwwbkj9a7] {
  color: var(--state-success-accent);
}

.comments-drawer__active-scope-text[b-vnwwbkj9a7] {
  white-space: nowrap;
}

/* El nombre es lo único que puede ser largo: chip que trunca con ellipsis (el
   title del markup da el texto completo al hover). */
.comments-drawer__active-scope-name[b-vnwwbkj9a7] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 var(--spacing-xs);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  border: 1px solid var(--grid-line);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

/* ── Estado sin contexto (BodyContent sin alcance resuelto) ──────────────────
   El scope de este archivo solo alcanza al <p> declarado en el propio markup del
   drawer, así que el selector no contamina los .text-muted del CommentsPanel.
   Solo composición: el color lo sigue poniendo la utilidad .text-muted (que trae
   !important de Bootstrap y no vale la pena pelearle desde CSS scoped). */
p.text-muted[b-vnwwbkj9a7] {
  text-align: center;
  padding: var(--spacing-lg) var(--spacing-md);
  margin: 0;
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .ds-drawer__close[b-vnwwbkj9a7],
  .comments-drawer__scope[b-vnwwbkj9a7] { transition: none; }
}
/* _content/MtmpProjectsPoc.Web/Components/Comments/CommentsPanel.razor.rz.scp.css */
/* Redesign 2026-08-26 (mockup C:\Users\lenovo\Documents\2026\Medtronic New\Comments.png) —
   Fase 1: repintar sin cambiar datos. Deltas vs. la versión anterior:
     • Fuera el acento vertical azul de 3px; card blanca con shadow suave.
     • Avatar circular con iniciales + color determinístico por autor.
     • Meta en flex con nombre + tag a la izquierda y timestamp a la derecha.
     • Actions (Edit/Delete) ocultas hasta hover; Reply visible siempre.
     • Sin divider dashed sobre las acciones — spacing con margin.
     • Attachments como chip file-card, con icono, filename y size.
     • Composer: paperclip icon-only + Send circular azul.
     • @mention highlighting con .mention span (posicionado por CommentItem).

   Se preservan: variables del design system, el modificador --pinned del layout de chat,
   la lápida (Story 5.17), el override de form-check-input (dynamic-fields.css bleed). */

/* ── Checkbox override (dynamic-fields.css bleed, memory feedback_dm_checkbox_css_override) ─ */
[b-ufp2ym6wtd] .form-check-input {
    background-color: var(--surface-default);
    border: 1px solid var(--border-default);
}

[b-ufp2ym6wtd] .form-check-input:checked {
    background-color: var(--action-primary);
    border-color: var(--action-primary);
}

/* ── Panel container ──────────────────────────────────────────────────── */
.comments-panel[b-ufp2ym6wtd] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.9rem;
}

/* ── Panel header (mockup Comments.png — 💬 Comentarios) ───────────────
   Sólo se muestra cuando el consumer NO trae su propio chrome (drawer/modal
   opt-out via ShowHeader="false"). Alinea icon + título con spacing suelto. */
.comments-panel-header[b-ufp2ym6wtd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

.comments-panel-header-icon[b-ufp2ym6wtd] {
    color: var(--medtronic-blue-primary, var(--action-primary));
    font-size: 1.05rem;
    line-height: 1;
}

.comments-panel-header-title[b-ufp2ym6wtd] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-strong);
    line-height: 1.2;
}

.comments-thread[b-ufp2ym6wtd] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
}

.comments-list[b-ufp2ym6wtd] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Layout de chat (PinComposer) — sin cambios ─────────────────────────── */
.comments-panel--pinned[b-ufp2ym6wtd] {
    height: 100%;
    min-height: 0;
}

.comments-panel--pinned .comments-thread[b-ufp2ym6wtd] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 2px 2px 0.25rem;
    margin: -2px -2px 0;
}

.comments-panel--pinned .comment-post-area[b-ufp2ym6wtd] {
    flex: 0 0 auto;
}

/* ── Individual comment ───────────────────────────────────────────────── */
[b-ufp2ym6wtd] .comment-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-column-gap: 0.75rem;
    background: var(--surface-default);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 120ms ease;
}

[b-ufp2ym6wtd] .comment-item:hover {
    box-shadow: var(--shadow-md);
}

/* Nested replies — inset + connector rail, sin acento colorido */
[b-ufp2ym6wtd] .comment-item--reply {
    margin-left: 42px;
    position: relative;
}

[b-ufp2ym6wtd] .comment-item--reply::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 22px;
    width: 18px;
    height: 1px;
    background: var(--border-subtle);
}

@media (max-width: 640px) {
    [b-ufp2ym6wtd] .comment-item--reply {
        margin-left: 14px;
    }
    [b-ufp2ym6wtd] .comment-item--reply::before {
        display: none;
    }
}

/* Lápida (Story 5.17 AC3) */
[b-ufp2ym6wtd] .comment-item--deleted {
    grid-template-columns: 1fr;
    background: var(--surface-subtle);
    box-shadow: none;
    padding: 0.5rem 0.9rem;
}

[b-ufp2ym6wtd] .comment-item--deleted:hover {
    box-shadow: none;
}

[b-ufp2ym6wtd] .comment-deleted-text {
    color: var(--text-weak);
    font-size: 0.85rem;
    font-style: italic;
}

/* ── Avatar (nuevo — fase 1 del redesign) ─────────────────────────────── */
[b-ufp2ym6wtd] .comment-avatar {
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: start;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
}

/* ── Meta line: nombre + tag a la izquierda, timestamp a la derecha ──── */
[b-ufp2ym6wtd] .comment-meta {
    grid-column: 2;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.55rem;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
}

[b-ufp2ym6wtd] .comment-meta-lead {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
}

[b-ufp2ym6wtd] .comment-author {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-strong);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-ufp2ym6wtd] .comment-time {
    color: var(--medtronic-gray-600, var(--text-weak));
    font-size: 0.72rem;
    white-space: nowrap;
    flex-shrink: 0;
}

[b-ufp2ym6wtd] .comment-edited {
    color: var(--medtronic-gray-500, var(--border-strong));
    font-size: 0.7rem;
    font-style: italic;
    line-height: 1.1;
}

/* ── Body ─────────────────────────────────────────────────────────────── */
[b-ufp2ym6wtd] .comment-body {
    grid-column: 2;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-strong);
    line-height: 1.5;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
}

/* @mention highlight (segmentado por CommentItem, no MarkupString) */
[b-ufp2ym6wtd] .comment-body .mention {
    color: var(--medtronic-blue-primary, var(--action-primary));
    font-weight: 600;
    background: var(--surface-subtle);
    padding: 0 3px;
    border-radius: 3px;
}

/* ── Attachments (chip file-card estilo mockup) ───────────────────────── */
[b-ufp2ym6wtd] .comment-attachments {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-left: 0;
    margin-bottom: 0.5rem;
}

[b-ufp2ym6wtd] .comment-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-size: 0.78rem;
    max-width: 260px;
    transition: background 120ms ease, border-color 120ms ease;
}

[b-ufp2ym6wtd] .comment-attachment-chip:hover {
    background: var(--surface-default);
    border-color: var(--border-default);
}

[b-ufp2ym6wtd] .comment-attachment-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

/* Coloreado por extensión (aproximación al mockup: log=azul, jpg=naranja, pdf=rojo, xlsx=verde, otros=gris) */
[b-ufp2ym6wtd] .comment-attachment-icon[data-ext="log"] { background: #3B82F6; }
[b-ufp2ym6wtd] .comment-attachment-icon[data-ext="jpg"],
[b-ufp2ym6wtd] .comment-attachment-icon[data-ext="jpeg"],
[b-ufp2ym6wtd] .comment-attachment-icon[data-ext="png"],
[b-ufp2ym6wtd] .comment-attachment-icon[data-ext="gif"] { background: #F59E0B; }
[b-ufp2ym6wtd] .comment-attachment-icon[data-ext="pdf"] { background: #EF4444; }
[b-ufp2ym6wtd] .comment-attachment-icon[data-ext="xlsx"],
[b-ufp2ym6wtd] .comment-attachment-icon[data-ext="xls"],
[b-ufp2ym6wtd] .comment-attachment-icon[data-ext="csv"] { background: #10B981; }
[b-ufp2ym6wtd] .comment-attachment-icon[data-ext="doc"],
[b-ufp2ym6wtd] .comment-attachment-icon[data-ext="docx"] { background: #2563EB; }
[b-ufp2ym6wtd] .comment-attachment-icon[data-ext=""],
[b-ufp2ym6wtd] .comment-attachment-icon:not([data-ext]) { background: var(--medtronic-gray-500, #6B7280); }

[b-ufp2ym6wtd] .comment-attachment-name {
    color: var(--medtronic-blue-primary, var(--action-primary));
    text-decoration: none;
    font-weight: 500;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

[b-ufp2ym6wtd] .comment-attachment-name:hover,
[b-ufp2ym6wtd] .comment-attachment-name:focus-visible {
    text-decoration: underline;
}

[b-ufp2ym6wtd] .comment-attachment-size {
    color: var(--text-weak);
    font-size: 0.72rem;
    flex-shrink: 0;
}

/* ── Action toolbar (Reply / Edit / Delete) — hover-only para Edit/Delete ─ */
[b-ufp2ym6wtd] .comment-actions {
    grid-column: 2;
    display: flex;
    gap: 0.15rem;
    margin-top: 0.1rem;
    align-items: center;
}

[b-ufp2ym6wtd] .comment-actions .btn-link {
    padding: 0.15rem 0.5rem;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--medtronic-blue-primary, var(--action-primary));
    border-radius: 4px;
    transition: background-color 120ms ease, opacity 120ms ease;
}

[b-ufp2ym6wtd] .comment-actions .btn-link:hover {
    background-color: var(--row-hover);
    text-decoration: none;
}

[b-ufp2ym6wtd] .comment-actions .btn-link:focus-visible {
    background-color: var(--row-hover);
    text-decoration: none;
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: 1px;
    box-shadow: none;
}

[b-ufp2ym6wtd] .comment-actions .btn-link.text-danger:hover,
[b-ufp2ym6wtd] .comment-actions .btn-link.text-danger:focus-visible {
    background-color: var(--status-error-bg);
    color: var(--state-danger-accent) !important;
}

/* Edit / Delete se revelan al hacer hover sobre la card (o al foco por teclado) */
[b-ufp2ym6wtd] .comment-action--hover {
    opacity: 0;
    transition: opacity 120ms ease;
}

[b-ufp2ym6wtd] .comment-item:hover .comment-action--hover,
[b-ufp2ym6wtd] .comment-item:focus-within .comment-action--hover {
    opacity: 1;
}

/* ── Nested replies list ─────────────────────────────────────────────── */
[b-ufp2ym6wtd] .comment-replies {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.55rem;
}

/* ── Inline forms (edit textarea, reply textarea) ─────────────────────── */
[b-ufp2ym6wtd] .comment-reply-form,
[b-ufp2ym6wtd] .comment-edit-form {
    grid-column: 2;
    margin-top: 0.6rem;
    padding: 0.65rem 0.75rem;
    background: var(--surface-default);
    border: 1px solid var(--border-color-light);
    border-radius: 6px;
}

/* ── Post form area (root — "write a new comment") ────────────────────── */
[b-ufp2ym6wtd] .comment-post-area {
    margin-top: 0.75rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-color-light);
}

[b-ufp2ym6wtd] .comment-post-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-ufp2ym6wtd] .comment-post-form textarea,
[b-ufp2ym6wtd] .comment-reply-form textarea,
[b-ufp2ym6wtd] .comment-edit-form textarea {
    font-size: 0.9rem;
    line-height: 1.45;
    border: 1px solid var(--border-default);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    resize: vertical;
    min-height: 68px;
    background: var(--surface-subtle);
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

[b-ufp2ym6wtd] .comment-post-form textarea:focus,
[b-ufp2ym6wtd] .comment-reply-form textarea:focus,
[b-ufp2ym6wtd] .comment-edit-form textarea:focus {
    border-color: var(--input-border-focus);
    box-shadow: var(--input-focus-shadow);
    background: var(--surface-default);
    outline: none;
}

[b-ufp2ym6wtd] .comment-post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: var(--medtronic-gray-600, var(--text-weak));
    padding: 0 0.2rem;
}

[b-ufp2ym6wtd] .comment-post-counter {
    font-variant-numeric: tabular-nums;
}

[b-ufp2ym6wtd] .comment-post-hint code {
    background: var(--med-gray-lightest);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--text-weak);
    font-size: 0.7rem;
}

/* ── Composer toolbar (redesign fase 1) ────────────────────────────────
   Fila con paperclip icon-only + hint muted + botón Send circular a la derecha.
   La barra reemplaza el bloque anterior "comment-post-attachments" que tenía
   botón text ("Attach files") y hint inline pesado. */
[b-ufp2ym6wtd] .comment-post-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
}

[b-ufp2ym6wtd] .comment-post-toolbar-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}

[b-ufp2ym6wtd] .comment-post-icon-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--medtronic-gray-600, var(--text-weak));
    padding: 0;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

[b-ufp2ym6wtd] .comment-post-icon-btn:hover:not(:disabled),
[b-ufp2ym6wtd] .comment-post-icon-btn:focus-visible:not(:disabled) {
    background: var(--row-hover);
    color: var(--medtronic-blue-primary, var(--action-primary));
    border-color: var(--border-subtle);
}

[b-ufp2ym6wtd] .comment-post-icon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[b-ufp2ym6wtd] .comment-post-icon-btn .oi {
    font-size: 0.95rem;
}

[b-ufp2ym6wtd] .comment-post-toolbar-hint {
    flex: 1 1 auto;
    color: var(--medtronic-gray-600, var(--text-weak));
    font-size: 0.72rem;
    min-width: 0;
}

/* Send button — round pill azul con icon */
[b-ufp2ym6wtd] .comment-post-send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--medtronic-blue-primary, var(--action-primary));
    color: #FFFFFF;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

[b-ufp2ym6wtd] .comment-post-send:hover:not(:disabled) {
    filter: brightness(1.05);
    box-shadow: var(--shadow-md);
}

[b-ufp2ym6wtd] .comment-post-send:active:not(:disabled) {
    transform: scale(0.95);
}

[b-ufp2ym6wtd] .comment-post-send:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: 2px;
}

[b-ufp2ym6wtd] .comment-post-send:disabled {
    background: var(--medtronic-gray-400, #9CA3AF);
    cursor: not-allowed;
    box-shadow: none;
}

[b-ufp2ym6wtd] .comment-post-send .oi {
    font-size: 1rem;
    transform: rotate(-45deg);
    margin-left: 2px;
}

/* Pending attachments list dentro del composer (unchanged behavior, clean styles) */
[b-ufp2ym6wtd] .comment-post-pending {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

[b-ufp2ym6wtd] .comment-post-pending li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.55rem;
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-size: 0.75rem;
}

[b-ufp2ym6wtd] .comment-post-pending .btn-link {
    padding: 0;
    line-height: 1;
    color: var(--state-danger-accent);
}

/* Edit form actions — separado del composer */
[b-ufp2ym6wtd] .comment-edit-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    margin-top: 0.4rem;
}

[b-ufp2ym6wtd] .comment-edit-actions .btn {
    padding: 0.28rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 500;
}

/* ── Loading state ────────────────────────────────────────────────────── */
.comments-loading[b-ufp2ym6wtd] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Empty state (no comments yet) ────────────────────────────────────── */
.comments-thread > p.text-muted[b-ufp2ym6wtd] {
    text-align: center;
    padding: 1.5rem 1rem;
    margin: 0;
    color: var(--medtronic-gray-500, var(--border-strong)) !important;
    font-size: 0.85rem;
    background: var(--surface-subtle);
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
    [b-ufp2ym6wtd] .comment-item,
    [b-ufp2ym6wtd] .comment-actions .btn-link,
    [b-ufp2ym6wtd] .comment-action--hover,
    [b-ufp2ym6wtd] .comment-post-form textarea,
    [b-ufp2ym6wtd] .comment-reply-form textarea,
    [b-ufp2ym6wtd] .comment-edit-form textarea,
    [b-ufp2ym6wtd] .comment-post-icon-btn,
    [b-ufp2ym6wtd] .comment-post-send,
    [b-ufp2ym6wtd] .comment-attachment-chip {
        transition: none;
    }
    [b-ufp2ym6wtd] .comment-action--hover {
        opacity: 1;
    }
}
/* _content/MtmpProjectsPoc.Web/Components/DataManagement/Dashboard/KpiTile.razor.rz.scp.css */
/* KpiTile — self-contained styling so the tile looks identical wherever
   it's used (Dashboard command center, Aging Events Center, future pages).
   Moved out of Pages/DataManagement/Dashboard.razor.css on 2026-08-19 —
   scoped-CSS on the Dashboard page couldn't reach the tile when it was
   rendered from AEC.

   Variants (blue / navy / green / amber / red / gray) drive the accent
   color via CSS custom properties. `--no-icon` modifier tightens the
   layout for icon-less mode. */

.dm-kpi-tile[b-ujomshyk2g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    color: inherit;
    transition: transform 120ms ease, box-shadow 120ms ease;
    height: 100%;
    border-left: 4px solid var(--dm-kpi-accent, #cbd5e1);
}

a.dm-kpi-tile:hover[b-ujomshyk2g] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-decoration: none;
}

.dm-kpi-tile__icon[b-ujomshyk2g] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dm-kpi-icon-bg, #eef2f7);
    color: var(--dm-kpi-accent, #64748b);
    font-size: 1.25rem;
    flex: 0 0 44px;
}

.dm-kpi-tile__body[b-ujomshyk2g] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.dm-kpi-tile__label[b-ujomshyk2g] {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dm-kpi-tile__value[b-ujomshyk2g] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: #0f172a;
}

/* Icon-none variant — no icon at all, tighter layout. */
.dm-kpi-tile--icon-none[b-ujomshyk2g] {
    padding: 0.9rem 1.1rem;
}

.dm-kpi-tile--icon-none .dm-kpi-tile__value[b-ujomshyk2g] {
    font-size: 1.7rem;
}

/* Icon-corner variant (Aging Events Center — matches AgEvents.png):
   small icon in the top-right corner, no circular background, tinted by
   the tile's accent color. Value gets extra breathing room since it now
   owns the left edge. */
.dm-kpi-tile--icon-corner[b-ujomshyk2g] {
    position: relative;
    padding: 0.9rem 1.1rem;
}

.dm-kpi-tile--icon-corner .dm-kpi-tile__icon[b-ujomshyk2g] {
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    width: auto;
    height: auto;
    background: transparent;
    color: var(--dm-kpi-accent, #64748b);
    font-size: 1.1rem;
    flex: 0 0 auto;
    opacity: 0.85;
}

.dm-kpi-tile--icon-corner .dm-kpi-tile__value[b-ujomshyk2g] {
    font-size: 1.7rem;
}

.dm-kpi-tile--icon-corner .dm-kpi-tile__body[b-ujomshyk2g] {
    /* Keep enough right padding so long values never crowd the corner icon. */
    padding-right: 1.75rem;
}

/* Variant palette — derived from the mockup accent colors. */
.dm-kpi-tile--blue[b-ujomshyk2g]  { --dm-kpi-accent: #2563eb; --dm-kpi-icon-bg: #dbeafe; }
.dm-kpi-tile--navy[b-ujomshyk2g]  { --dm-kpi-accent: #1e3a8a; --dm-kpi-icon-bg: #dbeafe; }
.dm-kpi-tile--green[b-ujomshyk2g] { --dm-kpi-accent: #059669; --dm-kpi-icon-bg: #d1fae5; }
.dm-kpi-tile--amber[b-ujomshyk2g] { --dm-kpi-accent: #d97706; --dm-kpi-icon-bg: #fef3c7; }
.dm-kpi-tile--red[b-ujomshyk2g]   { --dm-kpi-accent: #dc2626; --dm-kpi-icon-bg: #fee2e2; }
.dm-kpi-tile--gray[b-ujomshyk2g]  { --dm-kpi-accent: #64748b; --dm-kpi-icon-bg: #e2e8f0; }
/* _content/MtmpProjectsPoc.Web/Components/DataManagement/ToolAlertsRiskCenter/AlertsByCatalogStrip.razor.rz.scp.css */
/* TARC-06 — 4 KpiTiles apilados 2x2 dentro del card. Delegamos el styling
   de cada tile al design-system (KpiTile.razor.css / .dm-kpi-tile--red);
   acá sólo definimos el grid contenedor + un `min-height` chico para
   compactar dentro del col-xl-3. */

.tarc-abc-grid[b-jpzx0u4ep6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    height: 100%;
}
/* _content/MtmpProjectsPoc.Web/Components/DataManagement/ToolAlertsRiskCenter/CategoryMiniCards.razor.rz.scp.css */
/* TARC-10 — 5 mini-cards in a row with 3 vertical circles each.
   Circle sizes shrink at md/sm breakpoints so they don't wrap. */

.tarc-mini-card[b-najlq1ulq2] {
    text-align: center;
    padding: 0.5rem 0.25rem;
    background: #f8f9fa;
    border-radius: 6px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tarc-mini-title[b-najlq1ulq2] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
    min-height: 2.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

/* Post David 2026-08-25: layout `● 123` — small color dot + number.
   Antes: círculo grande con el número adentro. Ahora: círculo pequeño
   como indicador de severity + número separado (más limpio, mejor lectura). */

.tarc-mini-metric[b-najlq1ulq2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.2rem 0.5rem;
    margin: 0.15rem auto;
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    min-width: 60px;
    transition: background 100ms;
}

.tarc-mini-metric:hover[b-najlq1ulq2] {
    background: rgba(0, 0, 0, 0.05);
}

.tarc-mini-dot[b-najlq1ulq2] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tarc-mini-value[b-najlq1ulq2] {
    font-weight: 700;
    font-size: 1rem;
    color: #212529;
    line-height: 1;
    min-width: 1.5rem;
    text-align: left;
}

.tarc-dot-green[b-najlq1ulq2]  { background: #198754; }
.tarc-dot-yellow[b-najlq1ulq2] { background: #ffc107; }
.tarc-dot-red[b-najlq1ulq2]    { background: #dc3545; }
/* _content/MtmpProjectsPoc.Web/Components/DataManagement/ToolAlertsRiskCenter/CriticalAlertsTable.razor.rz.scp.css */
/* TARC-07 — clickable sort headers get a subtle cursor + hover to hint
   they're interactive. Everything else inherits .dm-catalog-table styles. */

.tarc-cat-th[b-vo4qik2a4c] {
    cursor: pointer;
    user-select: none;
}

.tarc-cat-th:hover[b-vo4qik2a4c] {
    background: #f1f3f5;
}

/* TARC-14 — active filter chips row above the tabla. */
.tarc-chips[b-vo4qik2a4c] {
    font-size: 0.8rem;
    background: #fef7ed;
}

.tarc-chip[b-vo4qik2a4c] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.35rem 0.15rem 0.55rem;
    background: white;
    border: 1px solid #f97316;
    border-radius: 12px;
    color: #7c2d12;
}

.tarc-chip-close[b-vo4qik2a4c] {
    border: 0;
    background: transparent;
    color: #7c2d12;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.15rem;
    cursor: pointer;
    border-radius: 50%;
}

.tarc-chip-close:hover[b-vo4qik2a4c] {
    background: #fed7aa;
}
/* _content/MtmpProjectsPoc.Web/Components/DataManagement/ToolAlertsRiskCenter/RecommendedActionsPanel.razor.rz.scp.css */
/* TARC-12 — 5 KPI-summary rows stacked, each with a round color icon and
   a 2-line body (headline + supportive text). Compact so the whole card
   fits inside the col-xl-3 slot without vertical scroll. */

[b-hu9fwqky9c] .tarc-ra-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.25rem;
    border-bottom: 1px solid #f1f3f5;
}

[b-hu9fwqky9c] .tarc-ra-row:last-child {
    border-bottom: 0;
}

[b-hu9fwqky9c] .tarc-ra-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

[b-hu9fwqky9c] .tarc-ra-red   { background: #fee2e2; color: #dc2626; }
[b-hu9fwqky9c] .tarc-ra-amber { background: #fef3c7; color: #d97706; }

[b-hu9fwqky9c] .tarc-ra-body {
    flex: 1;
    min-width: 0;
}

[b-hu9fwqky9c] .tarc-ra-title {
    font-weight: 500;
    color: #212529;
    font-size: 0.82rem;
    line-height: 1.25;
}

[b-hu9fwqky9c] .tarc-ra-title strong {
    color: #dc2626;
    font-weight: 700;
}

[b-hu9fwqky9c] .tarc-ra-subtitle {
    font-size: 0.72rem;
    color: #6c757d;
    margin-top: 0.15rem;
    line-height: 1.25;
}

[b-hu9fwqky9c] .tarc-ra-subtitle strong {
    color: #dc2626;
    font-weight: 700;
}
/* _content/MtmpProjectsPoc.Web/Components/DataManagement/ToolAlertsRiskCenter/SiteCategoryHeatmap.razor.rz.scp.css */
/* TARC-11 — CSS grid heatmap. No chart lib — thirds-of-max color
   ramps keep the visual weight aligned with the numeric magnitude. */

.tarc-heatmap-grid[b-o67tdl0f7b] {
    display: grid;
    gap: 2px;
    font-size: 0.72rem;
}

.tarc-heatmap-corner[b-o67tdl0f7b],
.tarc-heatmap-header[b-o67tdl0f7b],
.tarc-heatmap-row-label[b-o67tdl0f7b] {
    padding: 0.35rem 0.4rem;
    font-weight: 600;
    color: #495057;
    background: #f8f9fa;
    border-radius: 3px;
    line-height: 1.15;
}

.tarc-heatmap-header[b-o67tdl0f7b] {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.65rem;
}

.tarc-heatmap-row-label[b-o67tdl0f7b] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.tarc-heatmap-cell[b-o67tdl0f7b] {
    padding: 0.5rem 0.25rem;
    text-align: center;
    font-weight: 700;
    color: #212529;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    transition: transform 100ms, box-shadow 100ms;
    min-height: 32px;
}

.tarc-heatmap-cell:hover[b-o67tdl0f7b] {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 1;
    position: relative;
}

.tarc-cell-empty[b-o67tdl0f7b] { background: #f8f9fa; color: #adb5bd; }
.tarc-cell-low[b-o67tdl0f7b]   { background: #d1e7dd; color: #0f5132; }
.tarc-cell-mid[b-o67tdl0f7b]   { background: #fff3cd; color: #664d03; }
.tarc-cell-high[b-o67tdl0f7b]  { background: #f8d7da; color: #58151c; }
/* _content/MtmpProjectsPoc.Web/Components/DataManagement/ToolAlertsRiskCenter/SitesAlertsMap.razor.rz.scp.css */
/* TARC-09 — SitesAlertsMap scoped styles.

   Regions inside the injected SVG that DO carry a data-driven `fill=...`
   attribute keep it (that's how the choropleth reads). Regions without a
   matching count fall through to the neutral gray below. */

[b-wc71xrj6hg] .tarc-map-container {
    background: #ffffff;
    border-radius: 4px;
    overflow: hidden;
}

[b-wc71xrj6hg] .tarc-map-container svg {
    width: 100%;
    height: 240px;
    display: block;
}

[b-wc71xrj6hg] .tarc-map-container svg path {
    fill: #f1f3f5;           /* neutral gray — no data */
    stroke: #ced4da;
    stroke-width: 0.4;
    stroke-linejoin: round;
    transition: fill 200ms ease;
}

[b-wc71xrj6hg] .tarc-map-container svg path[style] {
    /* Painted regions carry an inline `style="fill:..."` (see razor comment).
       Give them a white outline so adjacent colored polygons read distinct. */
    stroke: #ffffff;
    stroke-width: 0.5;
}

/* ── Top-5 chip strip (below the map) ────────────────────────────────── */

[b-wc71xrj6hg] .tarc-sites-top5 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem 0 0;
    border-top: 1px solid #e9ecef;
}

[b-wc71xrj6hg] .tarc-site-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.1rem 0.4rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    font-size: 0.75rem;
    cursor: pointer;
    line-height: 1.2;
}

[b-wc71xrj6hg] .tarc-site-chip:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

[b-wc71xrj6hg] .tarc-site-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    margin-right: 0.1rem;
}

/* Toggle group in the header — tighten the padding so 3 buttons + title
   fit in the narrow col-xl-3 card without wrapping. */
[b-wc71xrj6hg] .tarc-map-toggle .btn {
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
}
/* _content/MtmpProjectsPoc.Web/Components/DateTracker.razor.rz.scp.css */
/* Story 8.4 → rediseño 2026-08-21 (5ª iteración) — las SEIS fechas de la fase en una REJILLA de
   tres renglones (línea base · esperada · real) por dos columnas (inicio · fin), con el semáforo
   y las acciones etiquetadas a la derecha. Colores en var(--token) del sistema.

   La 4ª iteración ponía las tres zonas lado a lado, cada una midiendo su propio ancho; el
   resultado no alineaba las fechas entre sí. Ver el bloque de la rejilla al final. */

.date-tracker[b-kez4qqmxha] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--med-radius-md, 0.75rem);
    padding: 0.6rem 0.9rem;
    margin-bottom: var(--med-space-3, 0.75rem);
    background: var(--bg-white);
}

.dt2-set-btn[b-kez4qqmxha] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 30px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: var(--med-blue-interactive, var(--action-primary));
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 120ms ease;
}

.dt2-set-btn:hover:not(:disabled)[b-kez4qqmxha] {
    filter: brightness(0.92);
}

.dt2-set-btn:disabled[b-kez4qqmxha] {
    opacity: 0.45;
    cursor: not-allowed;
}

.dt2-replans[b-kez4qqmxha] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.dt2-replans-label[b-kez4qqmxha] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-weak);
    font-weight: 600;
}

/* ---------- Lado derecho: semáforo + acciones etiquetadas ---------- */
.dt2-side[b-kez4qqmxha] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.35rem;
    margin-left: auto;
}

.dt2-actions[b-kez4qqmxha] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.dt2-action-btn[b-kez4qqmxha] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-white);
    color: var(--text-weak);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: all 120ms ease;
}

.dt2-action-btn .oi[b-kez4qqmxha] {
    font-size: 10px;
}

.dt2-action-btn:hover[b-kez4qqmxha] {
    border-color: var(--med-blue-interactive);
    color: var(--med-blue-interactive);
}

.dt2-action-btn:focus-visible[b-kez4qqmxha] {
    outline: 2px solid var(--med-blue-interactive);
    outline-offset: 1px;
}

/* ---------- Piezas compartidas (modales, contador, errores) ---------- */
.date-tracker__input[b-kez4qqmxha] {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.2rem 0.45rem;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    max-width: 100%;
}

.date-tracker__counter[b-kez4qqmxha] {
    display: inline-flex;
    align-items: center;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 12.5px;
}

/* Un contador en cero es información; uno distinto de cero es una señal. */
.date-tracker__counter--moved[b-kez4qqmxha] {
    color: var(--med-yellow-deep);
}

.date-tracker__reason-lead[b-kez4qqmxha] {
    margin-bottom: var(--med-space-2, 0.5rem);
}

.date-tracker__reason-hint[b-kez4qqmxha] {
    margin: var(--med-space-2, 0.5rem) 0 0;
    font-size: var(--med-font-size-sm, 0.875rem);
    color: var(--text-weak);
}

.date-tracker__error[b-kez4qqmxha] {
    margin: var(--med-space-2, 0.5rem) 0 0;
    font-size: var(--med-font-size-sm, 0.875rem);
    color: var(--color-danger);
    flex-basis: 100%;
}

.date-tracker__confirm-body[b-kez4qqmxha] {
    margin: 0;
}

/* Debajo de 900 px el lado derecho baja bajo la rejilla y se estira en horizontal: el semáforo a
   la izquierda y las acciones a la derecha. Mismo corte que usa la rejilla para apilarse, para
   que el panel entero cambie de forma UNA vez y no en dos saltos. */
@media (max-width: 900px) {
    .date-tracker[b-kez4qqmxha] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .dt2-side[b-kez4qqmxha] {
        margin-left: 0;
        width: 100%;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   Rejilla de las SEIS fechas — rediseño 2026-08-21 (5ª iteración)
   ═══════════════════════════════════════════════════════════════════════════════════════════
   Tres renglones (línea base · esperada · real) × dos columnas de fecha (inicio · fin).

   La pieza que hace el alineado es `display: contents` en el renglón: sus hijos suben a ser
   hijos directos de la rejilla, así que las casillas se alinean COLUMNA CONTRA COLUMNA entre
   renglones. Envolver cada renglón en su propia caja flex —lo que hacía la 4ª iteración— es
   justo lo que impedía ese alineado: cada zona medía su ancho por su cuenta.

   Las dos columnas de fecha usan `minmax(0, 13rem)`: mismo ancho para el campo editable y para
   el texto de solo lectura, así una fila con input y otra sin él no se desfasan.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.dt3[b-kez4qqmxha] {
    display: grid;
    grid-template-columns:
        max-content              /* rótulo del renglón  */
        minmax(0, 13rem)         /* fecha de inicio     */
        max-content              /* flecha              */
        minmax(0, 13rem)         /* fecha de fin        */
        minmax(0, 1fr);          /* acompañante         */
    align-items: center;
    gap: 0.3rem 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* El renglón no dibuja nada: existe para agrupar en el marcado y desaparece en el layout. */
.dt3-row[b-kez4qqmxha] {
    display: contents;
}

/* ---------- Encabezados de columna ---------- */
.dt3-colhead[b-kez4qqmxha] {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-weakest, var(--text-weak));
}

/* Aire entre los encabezados y la primera fila de datos, sin meter una fila vacía a la rejilla. */
.dt3-head .dt3-colhead[b-kez4qqmxha] {
    padding-bottom: 0.1rem;
}

/* ---------- Rótulo del renglón ---------- */
.dt3-label[b-kez4qqmxha] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-weak);
    white-space: nowrap;
    padding-right: 0.5rem;
}

.dt3-label .oi[b-kez4qqmxha] {
    font-size: 9px;
}

/* ---------- Casillas ---------- */
.dt3-cell[b-kez4qqmxha] {
    min-width: 0;
}

/* El campo llena su columna: así las dos columnas de fecha miden lo mismo en los tres renglones. */
.dt3-cell .date-tracker__input[b-kez4qqmxha] {
    width: 100%;
}

/* Captura de línea base: los dos campos se tiñen de azul-hielo para leerse como llamada a la
   acción. Antes esa señal la daba una caja punteada que envolvía las dos fechas apiladas — la
   caja se fue con la rejilla (era parte del desalineado), la señal se queda donde importa: en
   los campos que hay que llenar. */
.dt3-row--capture .date-tracker__input[b-kez4qqmxha] {
    background: var(--mtmp-ice-blue, #F4FAFF);
    border-color: #bae6fd;
}

.dt3-date[b-kez4qqmxha] {
    font-size: 13.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* La fila real es informativa: mismo tamaño de dato, menos peso, porque nadie la edita. */
.dt3-row--actual .dt3-date[b-kez4qqmxha] {
    color: var(--text-weak);
}

.dt3-arrow[b-kez4qqmxha] {
    color: var(--text-weakest, var(--text-weak));
    font-size: 12px;
    justify-self: center;
}

/* ---------- Acompañante de cada renglón (botón, sello, contador, nota) ---------- */
.dt3-meta[b-kez4qqmxha] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding-left: 0.25rem;
}

.dt3-note[b-kez4qqmxha] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 10.5px;
    color: var(--text-weak);
    min-width: 0;
}

.dt3-note .oi[b-kez4qqmxha] {
    font-size: 9px;
}

/* La nota de la fila real dice QUIÉN escribe ahí (el sistema). Puede envolver: es una frase, no
   un dato, y truncarla escondería justamente lo que aclara. */
.dt3-note--system[b-kez4qqmxha] {
    font-style: italic;
    line-height: 1.25;
}

/* ---------- Pie: notas que hablan del panel entero, no de una casilla ---------- */
.dt3-hint[b-kez4qqmxha] {
    grid-column: 1 / -1;
    margin: 0.15rem 0 0;
    font-size: 11px;
    color: var(--text-weak);
    line-height: 1.35;
}

/* ---------- Apilado ----------
   Debajo de 900 px la rejilla no cabe en cinco columnas sin encoger las fechas a ilegible. Cada
   renglón pasa a ser una tarjeta: rótulo arriba, el par debajo, y el acompañante al final. */
@media (max-width: 900px) {
    .dt3[b-kez4qqmxha] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    /* Los encabezados de columna pierden sentido sin columnas. */
    .dt3-head[b-kez4qqmxha] {
        display: none;
    }

    .dt3-row[b-kez4qqmxha] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
        grid-template-areas:
            "label label label"
            "start arrow end"
            "meta  meta  meta";
        gap: 0.3rem 0.5rem;
        align-items: center;
        padding-bottom: 0.55rem;
        border-bottom: 1px solid var(--border-color);
    }

    .dt3-row--actual[b-kez4qqmxha] {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* Por clase explícita y no por :first-of-type/:last-of-type: en el renglón de captura el
       último <div> hermano es .dt3-meta, no la casilla de fin, así que el selector posicional
       dejaría la fecha de fin sin área asignada. */
    .dt3-label[b-kez4qqmxha] { grid-area: label; }
    .dt3-cell--start[b-kez4qqmxha] { grid-area: start; }
    .dt3-arrow[b-kez4qqmxha] { grid-area: arrow; }
    .dt3-cell--end[b-kez4qqmxha] { grid-area: end; }
    .dt3-meta[b-kez4qqmxha] { grid-area: meta; padding-left: 0; flex-wrap: wrap; }

}
/* _content/MtmpProjectsPoc.Web/Components/DesignSystem/DsActionBar.razor.rz.scp.css */
/* DS-01.08 — DsActionBar (variant-A blue gradient). var(--token) only. */
.ds-action-bar[b-9ly27vn46i] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--btn-primary-bg); /* blue gradient (med-blue-interactive → med-blue-primary) */
  color: var(--text-inverse);
  box-shadow: var(--shadow-up);
}

.ds-action-bar__label[b-9ly27vn46i] {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.ds-action-bar__actions[b-9ly27vn46i] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-left: auto;
}
/* _content/MtmpProjectsPoc.Web/Components/DesignSystem/DsBadge.razor.rz.scp.css */
/* ============================================================================
   DS-01.04 — DsBadge primitive styles.
   COLORS consume var(--token) ONLY (cero #hex) → a token change re-colors every badge.
   Phase colors map to the canonical scale; finer phase distinction (the old undefined
   --medtronic-purple/-teal/-orange) is deferred to DS-01.07's token mapping.
   ============================================================================ */

.ds-badge[b-dzwfg2w6d1] {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0.35em 0.65em;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-inverse);
  white-space: nowrap;
  line-height: 1;
  transition: transform var(--transition-fast);
  /* T-01 — `nowrap` sin recorte propio: el pill se salía de la celda en vez de recortarse. */
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-badge__icon[b-dzwfg2w6d1] { font-size: 0.8em; line-height: 1; }
.ds-badge__label[b-dzwfg2w6d1] { line-height: 1; }

.ds-badge:hover[b-dzwfg2w6d1] { transform: scale(1.05); cursor: default; }

/* ── status ──────────────────────────────────────────────────────────────────
   Fase 2 del goal `polish-m1-estructural`. Antes este bloque tenía DOS familias
   conviviendo: la "solid" original (fondo saturado + texto blanco) y la "soft" que
   introdujo UX-DS-03.02, con la nota "la elección cromática definitiva es de la fase 2".
   Esta es la fase 2, y la elección es la soft, por tres razones:

     1. Es la única que cumple contraste. Medido sobre las reglas solid que había:
        `in-progress` quedaba en 3.68:1 y `completed` en 3.13:1 con texto blanco.
     2. Colapsa el alias partido del anexo 4e del catálogo: `--status-completed` y
        `--status-complete` eran dos selectores para el MISMO estado semántico apuntando
        a tokens DISTINTOS. Ahora los dos son `success`, que es lo único que puede ser.
     3. Deja de haber dos vocabularios: los 14 valores salen del mismo diccionario.

   Impacto conocido: DsBadge es un primitivo compartido, así que esto también cambia el
   aspecto de las insignias de Data Management. Es una mejora del mismo tipo (contraste y
   consistencia) y no toca ninguna lógica de ese módulo. */

/* Neutral — "todavía no empieza" */
.ds-badge--status-draft[b-dzwfg2w6d1]      { background-color: var(--state-neutral-bg); color: var(--state-neutral-fg); }
.ds-badge--status-pending[b-dzwfg2w6d1]    { background-color: var(--state-neutral-bg); color: var(--state-neutral-fg); }

/* Progress — el azul del sistema */
.ds-badge--status-active[b-dzwfg2w6d1]      { background-color: var(--state-progress-bg); color: var(--state-progress-fg); }
.ds-badge--status-in-progress[b-dzwfg2w6d1] { background-color: var(--state-progress-bg); color: var(--state-progress-fg); }
.ds-badge--status-on-track[b-dzwfg2w6d1]    { background-color: var(--state-progress-bg); color: var(--state-progress-fg); }

/* Attention — requiere una acción humana */
.ds-badge--status-on-hold[b-dzwfg2w6d1] { background-color: var(--state-attention-bg); color: var(--state-attention-fg); }
.ds-badge--status-rework[b-dzwfg2w6d1]  { background-color: var(--state-attention-bg); color: var(--state-attention-fg); }
.ds-badge--status-at-risk[b-dzwfg2w6d1] {
    background-color: var(--state-attention-bg);
    color: var(--state-attention-fg);
    animation: ds-badge-pulse-b-dzwfg2w6d1 2s ease-in-out infinite;
}

/* Success — el verde del sistema. `completed` y `complete` son el MISMO estado (anexo 4e). */
.ds-badge--status-completed[b-dzwfg2w6d1] { background-color: var(--state-success-bg); color: var(--state-success-fg); }
.ds-badge--status-complete[b-dzwfg2w6d1]  { background-color: var(--state-success-bg); color: var(--state-success-fg); }

/* Danger — salió mal o se canceló */
.ds-badge--status-cancelled[b-dzwfg2w6d1] { background-color: var(--state-danger-bg); color: var(--state-danger-fg); }
.ds-badge--status-delayed[b-dzwfg2w6d1] {
    background-color: var(--state-danger-bg);
    color: var(--state-danger-fg);
    animation: ds-badge-pulse-b-dzwfg2w6d1 2s ease-in-out infinite;
}

/* Muted — está fuera de juego. R0 les dio regla por primera vez (antes caían a la base y se
   renderizaban como texto blanco sin fondo); la fase 2 les da su rol definitivo. */
.ds-badge--status-skipped[b-dzwfg2w6d1]        { background-color: var(--state-muted-bg); color: var(--state-muted-fg); }
.ds-badge--status-not-applicable[b-dzwfg2w6d1] { background-color: var(--state-muted-bg); color: var(--state-muted-fg); }

/* ── dm (UX-DS-06.04 — el vocabulario del catálogo de Module 2) ──────────────
   Los estados que Module 2 pinta hoy con `badge bg-*` de Bootstrap. NINGUNO existe en la variante
   `status`, así que sin estas reglas una insignia migrada caería a `.ds-badge` a secas —color
   blanco SIN fondo— y quedaría INVISIBLE. El mapa estado → rol vive en el dominio `dm` de
   state-tokens.css; aquí solo se conectan las clases. Cero hex, puros var(--token).

   Por qué NO reusa `status`: decisión de Iván 2026-08-05 (`color-insignias-m2-conserva-verde`),
   las insignias de M2 conservan su color de hoy. `Active` en un molde es VERDE; en `status` es
   azul. Son dos vocabularios de negocio que comparten una palabra.

   Fallback neutro PRIMERO, mismo patrón que `phase` y `type`: mismo peso de selector, así que la
   regla por valor gana por orden de aparición. Un valor de M2 que nadie previó sale gris legible en
   vez de invisible — que es la falla que R0 ya pagó una vez en este mismo archivo. */
.ds-badge--dm[b-dzwfg2w6d1] { background-color: var(--state-neutral-bg); color: var(--state-neutral-fg); }

.ds-badge--dm-active[b-dzwfg2w6d1]       { background-color: var(--state-dm-active-bg);       color: var(--state-dm-active-fg); }
.ds-badge--dm-good[b-dzwfg2w6d1]         { background-color: var(--state-dm-good-bg);         color: var(--state-dm-good-fg); }
.ds-badge--dm-inactive[b-dzwfg2w6d1]     { background-color: var(--state-dm-inactive-bg);     color: var(--state-dm-inactive-fg); }
.ds-badge--dm-on-hold[b-dzwfg2w6d1]      { background-color: var(--state-dm-on-hold-bg);      color: var(--state-dm-on-hold-fg); }
.ds-badge--dm-fair[b-dzwfg2w6d1]         { background-color: var(--state-dm-fair-bg);         color: var(--state-dm-fair-fg); }
.ds-badge--dm-critical[b-dzwfg2w6d1]     { background-color: var(--state-dm-critical-bg);     color: var(--state-dm-critical-fg); }
.ds-badge--dm-poor[b-dzwfg2w6d1]         { background-color: var(--state-dm-poor-bg);         color: var(--state-dm-poor-fg); }
.ds-badge--dm-repair[b-dzwfg2w6d1]       { background-color: var(--state-dm-repair-bg);       color: var(--state-dm-repair-fg); }
.ds-badge--dm-scrap[b-dzwfg2w6d1]        { background-color: var(--state-dm-scrap-bg);        color: var(--state-dm-scrap-fg); }
.ds-badge--dm-discontinued[b-dzwfg2w6d1] { background-color: var(--state-dm-discontinued-bg); color: var(--state-dm-discontinued-fg); }

/* Gris explícito: para el estado que HOY ya se pinta neutro y debe seguir neutro. */
.ds-badge--dm-neutral[b-dzwfg2w6d1] { background-color: var(--state-dm-neutral-bg); color: var(--state-dm-neutral-fg); }

/* Los tres roles expuestos como valor, para la cifra que SÍ semaforea (las cargas masivas cuentan
   creados en verde y errores en rojo, y ese color dice si el archivo sirve). */
.ds-badge--dm-success[b-dzwfg2w6d1]   { background-color: var(--state-dm-success-bg);   color: var(--state-dm-success-fg); }
.ds-badge--dm-danger[b-dzwfg2w6d1]    { background-color: var(--state-dm-danger-bg);    color: var(--state-dm-danger-fg); }
.ds-badge--dm-attention[b-dzwfg2w6d1] { background-color: var(--state-dm-attention-bg); color: var(--state-dm-attention-fg); }

/* Las dos píldoras de CIFRA (Receta B del playbook): conteos, "+3 más", filas de un archivo. No son
   estado, así que no semaforean. Son dos porque hoy también son dos — gris para la cifra secundaria,
   cian (aquí azul) para la que encabeza un panel. */
.ds-badge--dm-count[b-dzwfg2w6d1]     { background-color: var(--state-dm-count-bg);     color: var(--state-dm-count-fg); }
.ds-badge--dm-highlight[b-dzwfg2w6d1] { background-color: var(--state-dm-highlight-bg); color: var(--state-dm-highlight-fg); }

/* UX-DS-03.02 — uppercase en las 3 variantes Type/Status/Priority (FD-G: decisión
   congelada; antes solo priority).
   ⚠ `dm` NO entra aquí a propósito: Module 2 muestra sus estados con la capitalización que trae el
   catálogo ("Active", "On Hold") y volcarlos a mayúsculas sería un cambio visual que nadie pidió. */
.ds-badge--status .ds-badge__label[b-dzwfg2w6d1],
.ds-badge--type .ds-badge__label[b-dzwfg2w6d1] { text-transform: uppercase; letter-spacing: 0.3px; }

/* ── type (UX-DS-03.02 — variant-A .badge-type-*) ────────────────────────── */
/* fallback neutro PRIMERO (patrón phase: mismo peso, gana el por-valor por orden). */
.ds-badge--type[b-dzwfg2w6d1]                   { background-color: var(--med-gray-lightest); color: var(--med-gray-medium); }
.ds-badge--type-replacement[b-dzwfg2w6d1],
.ds-badge--type-replace[b-dzwfg2w6d1]           { background-color: var(--badge-type-replace-bg); color: var(--badge-type-replace-text); }
.ds-badge--type-eol[b-dzwfg2w6d1]               { background-color: var(--badge-type-eol-bg); color: var(--badge-type-eol-text); }
.ds-badge--type-refurbishment[b-dzwfg2w6d1],
.ds-badge--type-refurb[b-dzwfg2w6d1]            { background-color: var(--badge-type-refurb-bg); color: var(--badge-type-refurb-text); }
.ds-badge--type-npd[b-dzwfg2w6d1]               { background-color: var(--badge-type-npd-bg); color: var(--badge-type-npd-text); box-shadow: var(--badge-type-npd-ring); }
.ds-badge--type-repair[b-dzwfg2w6d1]            { background-color: var(--status-warning-bg); color: var(--med-yellow-deep); }
.ds-badge--type-duplication[b-dzwfg2w6d1]       { background-color: var(--status-success-bg); color: var(--status-success-deep); }

/* ── phase (mapped to canonical scale) ───────────────────────────────────── */
/* default phase fallback FIRST so the value-specific rules below (same specificity)
   win by source order; otherwise a later `.ds-badge--phase` would override them all. */
.ds-badge--phase[b-dzwfg2w6d1]                     { background-color: var(--status-neutral); }
.ds-badge--phase-intake[b-dzwfg2w6d1],
.ds-badge--phase-intake-form[b-dzwfg2w6d1]         { background-color: var(--status-neutral); }
.ds-badge--phase-pre-launch[b-dzwfg2w6d1],
.ds-badge--phase-prelaunch[b-dzwfg2w6d1]           { background-color: var(--med-blue-medium); }
.ds-badge--phase-launch[b-dzwfg2w6d1]              { background-color: var(--status-success); }
.ds-badge--phase-design[b-dzwfg2w6d1]              { background-color: var(--med-blue-darker); }
.ds-badge--phase-build[b-dzwfg2w6d1]               { background-color: var(--status-warning); color: var(--text-primary); }
.ds-badge--phase-process-development[b-dzwfg2w6d1] { background-color: var(--status-info); }
.ds-badge--phase-ppap[b-dzwfg2w6d1]                { background-color: var(--med-blue-primary); }
.ds-badge--phase-site-implementation[b-dzwfg2w6d1] { background-color: var(--status-info); }

/* ── priority ────────────────────────────────────────────────────────────── */
.ds-badge--priority[b-dzwfg2w6d1] { font-weight: var(--font-weight-semibold); }
.ds-badge--priority .ds-badge__label[b-dzwfg2w6d1] { text-transform: uppercase; letter-spacing: 0.3px; }
.ds-badge--priority-top5[b-dzwfg2w6d1] { background-color: var(--color-danger); }

/* UX-DS-03.02 — paleta por-valor variant-A (p1/p2/p3 canónicos del prototipo) +
   mapeo de los valores reales del catálogo (Critical/High/Medium/Low) a la misma
   escala de intensidad. Soft-bg + texto deep, tokens de la capa de tokens. */
.ds-badge--priority-p1[b-dzwfg2w6d1],
.ds-badge--priority-critical[b-dzwfg2w6d1] { background-color: var(--badge-priority-p1-bg); color: var(--badge-priority-p1-text); }
.ds-badge--priority-p2[b-dzwfg2w6d1],
.ds-badge--priority-high[b-dzwfg2w6d1]     { background-color: var(--badge-priority-p2-bg); color: var(--badge-priority-p2-text); }
.ds-badge--priority-p3[b-dzwfg2w6d1],
.ds-badge--priority-medium[b-dzwfg2w6d1]   { background-color: var(--badge-priority-p3-bg); color: var(--badge-priority-p3-text); }
.ds-badge--priority-low[b-dzwfg2w6d1]      { background-color: var(--status-success-bg); color: var(--status-success-deep); }

/* ── toggle ──────────────────────────────────────────────────────────────── */
.ds-badge--toggle[b-dzwfg2w6d1] { justify-content: center; min-width: 50px; text-align: center; }
.ds-badge--toggle-yes[b-dzwfg2w6d1] { background-color: var(--color-success); }
.ds-badge--toggle-no[b-dzwfg2w6d1]  { background-color: var(--status-neutral); }

/* ── scope (view scope pills — consumed by DS-01.06 DsTabBar) ────────────── */
.ds-badge--scope-private[b-dzwfg2w6d1] { background-color: var(--status-neutral); }
.ds-badge--scope-public[b-dzwfg2w6d1]  { background-color: var(--med-blue-medium); }
.ds-badge--scope-role[b-dzwfg2w6d1]    { background-color: var(--med-blue-darker); }

@keyframes ds-badge-pulse-b-dzwfg2w6d1 {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .ds-badge[b-dzwfg2w6d1] { animation: none; transition: none; }
  .ds-badge--status-at-risk[b-dzwfg2w6d1],
  .ds-badge--status-delayed[b-dzwfg2w6d1] { animation: none; }
}
/* _content/MtmpProjectsPoc.Web/Components/DesignSystem/DsDataGrid.razor.rz.scp.css */
/* ============================================================================
   DS-01.05 / DS-02.01 — DsDataGrid worksheet grid primitive. var(--token) only (cero #hex).
   Extracts the Variant A worksheet language (frozen blue spine, density, zebra/hover/
   selected, 3-level row heights, inline-edit dirty) so any grid inherits it and a token
   change permeates. Mirrors tracker-view.css's worksheet tokens (DS-01.01 promoted them).

   DS-02.01 (FD-A R1, variant-A accepted) — the header/body rows are SLOT content, so they carry
   the CONSUMER's CSS-isolation scope, not this primitive's. Every chrome rule that targets a
   cell/row/th the consumer renders is anchored on a DsDataGrid-OWNED element (.ds-grid /
   .ds-grid__head / .ds-grid__body) + ::deep, so it pierces the scope boundary and styles the
   slotted element.
     • z-index is intentionally NOT set on the header/frozen rules: a consumer with a carefully
       layered sticky-header + frozen-spine + overlay-dropdown stack (the Project Tracker uses
       th 10/15 UNDER its 1000+ dropdowns) must keep that layering. The primitive provides
       position:sticky; the consumer governs z-index.
   ============================================================================ */

.ds-grid-wrapper[b-nwbyc2ztuf] {
  position: relative;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ds-grid[b-nwbyc2ztuf] {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--grid-font-size);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  background: var(--bg-white);
}

/* ── header ──────────────────────────────────────────────────────────────── */
.ds-grid__head[b-nwbyc2ztuf]  th {
  position: sticky;
  top: 0;
  height: var(--grid-header-h);
  padding: var(--grid-cell-padding);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  background: var(--table-header-bg);
  color: var(--table-header-text);
}

/* ── cells / rows ────────────────────────────────────────────────────────── */
/* T-06 — las celdas declaraban `nowrap` sin recorte: el contenido largo empujaba la rejilla. */
.ds-grid__body[b-nwbyc2ztuf]  td {
  padding: var(--grid-cell-padding);
  border-bottom: 1px solid var(--grid-line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-grid__body[b-nwbyc2ztuf]  .ds-grid__row--project { height: var(--grid-row-h-project); }
.ds-grid__body[b-nwbyc2ztuf]  .ds-grid__row--phase   { height: var(--grid-row-h-phase); }
.ds-grid__body[b-nwbyc2ztuf]  .ds-grid__row--task    { height: var(--grid-row-h-task); }

/* Zebra FIRST so hover/selected/expanded override it (variant-A order). */
.ds-grid__body[b-nwbyc2ztuf]  .ds-grid__row--zebra > td { background: var(--row-zebra); }
.ds-grid__body[b-nwbyc2ztuf]  .ds-grid__row:hover > td { background: var(--row-hover); }
.ds-grid__body[b-nwbyc2ztuf]  .ds-grid__row--selected > td { background: var(--row-selected); }
.ds-grid__body[b-nwbyc2ztuf]  .ds-grid__row--expanded > td { background: var(--row-hover); }

/* ── frozen "spine" (sticky leading columns + blue Medtronic divider). z-index consumer-governed. */
.ds-grid[b-nwbyc2ztuf]  .ds-grid__cell--frozen {
  position: sticky;
  left: 0;
  background: var(--bg-white);
}
.ds-grid__head[b-nwbyc2ztuf]  th.ds-grid__cell--frozen { background: var(--table-header-bg); }

/* the last frozen column carries the blue divider.
   UX-DS-05.02 (CB-1.a) — barra 1px compuesta (background en ::after) en vez de box-shadow:
   el box-shadow sobre la celda sticky repinta el spine congelado por frame de scroll horizontal;
   el ::after es overlay (no afecta el layout). La celda ya es position:sticky (--frozen), así que
   el ::after absoluto se ancla a ella. Divisor idéntico. */
.ds-grid[b-nwbyc2ztuf]  .ds-grid__cell--frozen-edge {
  position: sticky;
}
.ds-grid[b-nwbyc2ztuf]  .ds-grid__cell--frozen-edge::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--frozen-divider);
}
/* keep the frozen cells' background in sync with row state */
.ds-grid__body[b-nwbyc2ztuf]  .ds-grid__row--zebra > .ds-grid__cell--frozen { background: var(--row-zebra); }
.ds-grid__body[b-nwbyc2ztuf]  .ds-grid__row:hover > .ds-grid__cell--frozen { background: var(--row-hover); }
.ds-grid__body[b-nwbyc2ztuf]  .ds-grid__row--selected > .ds-grid__cell--frozen { background: var(--row-selected); }
.ds-grid__body[b-nwbyc2ztuf]  .ds-grid__row--expanded > .ds-grid__cell--frozen { background: var(--row-hover); }

/* ── inline-edit dirty slot ──────────────────────────────────────────────── */
.ds-grid[b-nwbyc2ztuf]  .ds-grid__cell--dirty {
  background: var(--med-yellow-bg);
  box-shadow: inset 0 0 0 1px var(--med-yellow);
}
.ds-grid[b-nwbyc2ztuf]  .ds-grid__cell--numeric { text-align: right; font-variant-numeric: tabular-nums; }

/* ── expand chevron ──────────────────────────────────────────────────────── */
.ds-grid[b-nwbyc2ztuf]  .ds-grid__expand {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0 var(--spacing-xs);
  transition: transform var(--transition-fast), color var(--transition-fast);
}
.ds-grid[b-nwbyc2ztuf]  .ds-grid__expand:hover { color: var(--med-blue-interactive); }
.ds-grid[b-nwbyc2ztuf]  .ds-grid__expand--open { transform: rotate(90deg); }

/* Intake rows: sin franja por fila (decisión 2026-07-03) — ver nota en tracker-view.css.
   El divisor del spine congelado lo aporta la regla general de `.ds-grid__cell--frozen`. */

/* ── empty / loading states (DsDataGrid's OWN elements — no ::deep) ───────── */
.ds-grid__state[b-nwbyc2ztuf] { padding: 0; border-bottom: none; }
.ds-grid__loading[b-nwbyc2ztuf] {
  display: flex; align-items: center; justify-content: center;
  min-height: 200px; color: var(--text-tertiary); font-size: var(--font-size-2xl);
}
.ds-grid__loading .oi[b-nwbyc2ztuf] { animation: ds-grid-spin-b-nwbyc2ztuf 1s linear infinite; }

@keyframes ds-grid-spin-b-nwbyc2ztuf { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ds-grid__loading .oi[b-nwbyc2ztuf] { animation: none; }
  .ds-grid[b-nwbyc2ztuf]  .ds-grid__expand { transition: none; }
}
/* _content/MtmpProjectsPoc.Web/Components/DesignSystem/DsDrawer.razor.rz.scp.css */
/* ============================================================================
   Story 5.16 — DsDrawer: panel lateral derecho.

   COLORES: solo var(--token), cero #hex, cero !important (la cascada del módulo es
   @layer y las reglas de `overrides` ganan a cualquier !important no-layered — meter
   uno aquí no arreglaría nada y sí ensuciaría).

   Z-INDEX: --z-modal-backdrop / --z-modal, los canónicos. MoldPopover (1050/1051) y
   TaskDetailPanel (1040/1045) escribieron los suyos a mano y quedaron inconsistentes
   entre sí; este primitivo los normaliza y queda como candidato a absorberlos después
   (fuera del alcance de esta story).

   El ancho llega como la variable --ds-drawer-width que fija el componente en su
   atributo style, para que el consumidor lo parametrice sin escribir CSS.
   ============================================================================ */

.ds-drawer-backdrop[b-inow1k7ja7] {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--med-blue-primary) 35%, transparent);
  z-index: var(--z-modal-backdrop);
  animation: ds-drawer-fade-in-b-inow1k7ja7 var(--transition-base);
}

.ds-drawer[b-inow1k7ja7] {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--ds-drawer-width, 420px);
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  background: var(--surface-default);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-modal);
  animation: ds-drawer-slide-in-b-inow1k7ja7 var(--transition-slow);
}

.ds-drawer__header[b-inow1k7ja7] {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-color-light);
}

.ds-drawer__title[b-inow1k7ja7] {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--med-blue-primary);
}

.ds-drawer__close[b-inow1k7ja7] {
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.ds-drawer__close:hover[b-inow1k7ja7] {
  color: var(--med-blue-primary);
  background: var(--med-gray-lightest);
}

/* El cuerpo es el único que hace scroll: el encabezado y el pie quedan fijos, que es lo
   que hace usable un hilo largo de conversación sin perder el cambiador de alcance. */
.ds-drawer__body[b-inow1k7ja7] {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--spacing-md) var(--spacing-lg);
}

.ds-drawer__footer[b-inow1k7ja7] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border-color-light);
}

@keyframes ds-drawer-fade-in-b-inow1k7ja7 {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ds-drawer-slide-in-b-inow1k7ja7 {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ds-drawer-backdrop[b-inow1k7ja7],
  .ds-drawer[b-inow1k7ja7] { animation: none; }
}
/* _content/MtmpProjectsPoc.Web/Components/DesignSystem/DsEmptyState.razor.rz.scp.css */
/* ============================================================================
   DS-01.05 — DsEmptyState primitive styles. var(--token) only (cero #hex).
   Es el ÚNICO lenguaje de estado vacío del módulo: polish-m1-adopcion F1 retiró el segundo
   primitivo que competía con éste y su hoja suelta wwwroot/css/components/empty-state.css.
   ============================================================================ */

.ds-empty[b-9buwsnuw9i] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl);
}

.ds-empty--default[b-9buwsnuw9i] { min-height: 400px; }
.ds-empty--compact[b-9buwsnuw9i] { min-height: 200px; padding: var(--spacing-xl); }

.ds-empty__content[b-9buwsnuw9i] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 500px;
}

.ds-empty__icon[b-9buwsnuw9i] {
  font-size: 96px;
  line-height: 1;
  color: var(--med-gray-light);
  margin-bottom: var(--spacing-lg);
}

.ds-empty--compact .ds-empty__icon[b-9buwsnuw9i] { font-size: 64px; margin-bottom: var(--spacing-md); }

.ds-empty__heading[b-9buwsnuw9i] {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-md);
}

.ds-empty--compact .ds-empty__heading[b-9buwsnuw9i] { font-size: var(--font-size-xl); }

.ds-empty__subtext[b-9buwsnuw9i] {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--text-secondary);
  margin: 0;
}

.ds-empty__action[b-9buwsnuw9i] { margin-top: var(--spacing-md); }

@media (max-width: 768px) {
  .ds-empty--default[b-9buwsnuw9i] { min-height: 300px; padding: var(--spacing-xl); }
  .ds-empty__icon[b-9buwsnuw9i] { font-size: 72px; margin-bottom: var(--spacing-md); }
  .ds-empty__heading[b-9buwsnuw9i] { font-size: var(--font-size-xl); }
  .ds-empty__subtext[b-9buwsnuw9i] { font-size: var(--font-size-sm); }
}

@media (prefers-contrast: high) {
  .ds-empty__icon[b-9buwsnuw9i],
  .ds-empty__heading[b-9buwsnuw9i],
  .ds-empty__subtext[b-9buwsnuw9i] { color: var(--text-primary); }
}
/* _content/MtmpProjectsPoc.Web/Components/DesignSystem/DsFilterBar.razor.rz.scp.css */
/* DS-01.06 — DsFilterBar. var(--token) only. */
.ds-filter-bar[b-hdkx1tjuff] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm) var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-white);
  border-bottom: 1px solid var(--grid-line);
}

.ds-filter-bar__controls[b-hdkx1tjuff],
.ds-filter-bar__chips[b-hdkx1tjuff] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

.ds-filter-bar__meta[b-hdkx1tjuff] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-left: auto;
}

.ds-filter-bar__count[b-hdkx1tjuff] {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.ds-filter-bar__add[b-hdkx1tjuff] {
  background: none;
  border: 1px dashed var(--med-blue-interactive);
  color: var(--med-blue-interactive);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 3px var(--spacing-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ds-filter-bar__add:hover[b-hdkx1tjuff] {
  background: var(--selection-bg);
}

/* helper the consumer can add to a select that has a non-default value */
.ds-filter-bar[b-hdkx1tjuff]  .has-value {
  border-color: var(--med-blue-interactive);
  background: var(--selection-bg);
}

@media (max-width: 767px) {
  .ds-filter-bar[b-hdkx1tjuff] { flex-direction: column; align-items: stretch; }
  .ds-filter-bar__meta[b-hdkx1tjuff] { margin-left: 0; }
}
/* _content/MtmpProjectsPoc.Web/Components/DesignSystem/DsFilterChip.razor.rz.scp.css */
/* DS-01.06 — DsFilterChip. var(--token) only. */
.ds-filter-chip[b-nch1tz2kl3] {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 2px var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  background: var(--selection-bg);
  color: var(--med-blue-primary);
  border: 1px solid var(--grid-line-strong);
  /* T-09 — el chip crecía con el valor del filtro y desbordaba la barra de filtros activos. */
  white-space: nowrap;
  max-width: 28ch;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-filter-chip__key[b-nch1tz2kl3] { font-weight: var(--font-weight-semibold); }
.ds-filter-chip__val[b-nch1tz2kl3] { font-weight: var(--font-weight-normal); }
.ds-filter-chip__x[b-nch1tz2kl3] {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: 1;
  padding: 0 2px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}
.ds-filter-chip__x:hover[b-nch1tz2kl3] { color: var(--status-error); }
/* _content/MtmpProjectsPoc.Web/Components/DesignSystem/DsFormField.razor.rz.scp.css */
/* UX-DS-06.03 — DsFormField. Cero #hex, cero !important.

   ── Por qué tokens de COMPONENTE con el valor de hoy por defecto ──────────────────────────────
   Misma disciplina que DsPagination: cada propiedad entra por un token del componente cuyo valor
   por defecto es EXACTAMENTE lo que hoy se resuelve en pantalla, para que adoptar el primitivo en
   las oleadas 1-3 no mueva un píxel que no esté listado como diff justificado.

     · etiqueta   hoy `.form-label` de Bootstrap → margin-bottom: .5rem, color heredado
     · error      hoy `.text-danger.small`       → color var(--bs-danger)=#DC3545, font-size .875em
                  `--status-error` vale #DC3545: es el MISMO color, ahora por token.
     · ayuda      hoy `.form-text` de Bootstrap  → font-size .875em, color gris apagado

   ── Por qué `::deep` en el error y en el control ──────────────────────────────────────────────
   El CSS scoped de Blazor sella con `[b-xxxxx]` solo los elementos que este archivo .razor
   escribe. `<ValidationMessage>` y el control de la ranura son OTROS componentes: su markup sale
   sin el sello, así que sin `::deep` estas reglas no lo alcanzarían. */

.ds-form-field[b-bjyjelslpr] {
    --ds-field-gap: 0.5rem;
    --ds-field-error: var(--status-error);
    --ds-field-help: var(--text-muted);
    --ds-field-meta-size: 0.875em;

    margin-bottom: 1rem;
}

.ds-form-field__label[b-bjyjelslpr] {
    display: inline-block;
    margin-bottom: var(--ds-field-gap);
}

.ds-form-field__error[b-bjyjelslpr] {
    color: var(--ds-field-error);
    font-size: var(--ds-field-meta-size);
}

/* `.validation-message` lo pinta ValidationMessage, que es otro componente: sin ::deep el sello
   scoped no llega. Se le quita el color propio para que herede el del contenedor y el rojo tenga
   UN solo dueño. */
.ds-form-field__error[b-bjyjelslpr]  .validation-message {
    color: inherit;
}

.ds-form-field__help[b-bjyjelslpr] {
    color: var(--ds-field-help);
    font-size: var(--ds-field-meta-size);
    margin-top: 0.25rem;
}

/* ── ESTADO INVÁLIDO: por qué aquí NO hay una regla para el borde del control ─────────────────
   El primer intento fue exactamente eso:

       .ds-form-field--invalid ::deep .form-control { border-color: var(--ds-field-error); }

   Se escribió, se sirvió, el selector alcanzaba el elemento (verificado), el token heredaba con
   su valor correcto (#DC3545)... y el borde seguía gris. Ni siquiera inyectando la MISMA regla al
   vuelo al final del <head> cambiaba nada. La causa la dio el motor, vía el protocolo de
   DevTools: el borde de TODO `.form-control` de esta aplicación lo fijan dos declaraciones
   `!important` con la propiedad ABREVIADA `border`:

       create-project-hotfix.css:225   (capa `overrides`)  border: 1.5px solid var(--border-color-dark) !important
       create-project-enhanced.css:350 (sin capa)          border: 1px   solid var(--border-color-dark) !important

   Una declaración `!important` le gana a CUALQUIER declaración normal, sin importar
   especificidad ni capa. O sea que ningún primitivo puede adueñarse del borde de un control
   mientras esas dos existan, y la única forma de ganarles sería agregar otro `!important` —
   prohibido por FD-07, y además sería sumarse a la guerra que el design system vino a terminar.

   ── Y RESULTÓ QUE ADEMÁS SOBRABA ──────────────────────────────────────────────────────────────
   Al mirar la captura del estado inválido apareció lo que la medición del `border` no decía: los
   controles inválidos YA se pintan de rojo. No con un borde, con un **contorno**:

       site.css:61   .invalid { outline: 1px solid #dc3545; background-color: #fff5f5; }

   Es la regla de la plantilla de Blazor, y `.invalid` la pone el propio `<InputText>`. O sea que
   el problema ya estaba resuelto por otra vía —`outline`, que esquiva la guerra de `border`— y
   esta regla habría sido redundante aunque hubiera ganado. Medido: el control inválido tiene
   `outline: rgb(220, 53, 69) solid 1px`.

   Se deja SIN regla en vez de dejar una que no hace nada: CSS muerto que promete algo y no lo
   cumple es peor que la ausencia, porque el siguiente que lo lea va a creer que ya está resuelto.

   El AC1 se cumple, y con medición en navegador: el estado inválido se pinta con el valor de
   `--status-error` (`rgb(220, 53, 69)`) tanto en el mensaje —que este archivo sí gobierna— como
   en el contorno del control.

   ⚠ DOS COSAS PARA EL PLAYBOOK DE LA OLEADA 1 (story 06.04):
   1. Re-pintar el BORDE de un control de formulario es imposible sin tocar esos dos `!important`,
      y quitarlos cambiaría el aspecto de TODOS los formularios de la plataforma, no solo los de
      Module 2. No es decisión de un re-skin: queda ESCALADO.
   2. El `#dc3545` de `.invalid` está escrito a mano y vale EXACTAMENTE lo mismo que
      `--status-error`. Cambiarlo por el token no movería un píxel y haría que el estado inválido
      permeara con la paleta — pero toca site.css, o sea M1 completo, así que tampoco es de esta
      story. Queda anotado como candidato. */
/* _content/MtmpProjectsPoc.Web/Components/DesignSystem/DsModal.razor.rz.scp.css */
/* ============================================================================
   DS-01.03 — DsModal primitive styles.
   COLORS consume var(--token) ONLY (cero #hex). The backdrop uses color-mix on the
   canonical brand blue so a token change permeates the overlay too.
   Sizes/positions are layout literals (not colors), intentionally not tokenized.
   ============================================================================ */

.ds-modal-backdrop[b-krvcy78bri] {
  position: fixed;
  inset: 0;
  /* blue-tinted overlay (variant-A) — permeates with --med-blue-primary */
  background: color-mix(in srgb, var(--med-blue-primary) 55%, transparent);
  z-index: var(--z-modal-backdrop);
  animation: ds-modal-fade-in-b-krvcy78bri var(--transition-base);
}

.ds-modal[b-krvcy78bri] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  background: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  z-index: var(--z-modal);
  animation: ds-modal-pop-in-b-krvcy78bri var(--transition-base);
}

.ds-modal--sm[b-krvcy78bri] { width: min(420px, 94vw); }
.ds-modal--md[b-krvcy78bri] { width: min(680px, 94vw); }
.ds-modal--lg[b-krvcy78bri] { width: min(920px, 96vw); }

.ds-modal__header[b-krvcy78bri] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-color-light);
}

.ds-modal__title[b-krvcy78bri] {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--med-blue-primary);
}

.ds-modal__close[b-krvcy78bri] {
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.ds-modal__close:hover[b-krvcy78bri] {
  color: var(--med-blue-primary);
  background: var(--med-gray-lightest);
}

.ds-modal__body[b-krvcy78bri] {
  padding: var(--spacing-md) var(--spacing-lg);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.ds-modal__footer[b-krvcy78bri] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border-color-light);
}

@keyframes ds-modal-fade-in-b-krvcy78bri {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ds-modal-pop-in-b-krvcy78bri {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ds-modal-backdrop[b-krvcy78bri],
  .ds-modal[b-krvcy78bri] { animation: none; }
}
/* _content/MtmpProjectsPoc.Web/Components/DesignSystem/DsPagination.razor.rz.scp.css */
/* UX-DS-06.02 — DsPagination.
   Cero #hex, cero !important. Estas reglas vienen del bloque <style> page-local de
   Pages/ProjectTracker.razor (story 11B.08), donde vivían: al extraer el componente, sus estilos
   se van con él y el tracker deja de ser la única pantalla que sabe pintar una paginación.

   ── Por qué tokens de COMPONENTE y no directamente los de rol ────────────────────────────────
   El contrato de esta story es paridad visual del tracker (AC2), y los tokens de rol más cercanos
   NO valen lo mismo que lo que hoy se pinta:
     · fondo      hoy #F8F9FA  ·  --surface-sunken vale #F5F5F5  → cambiaría
     · etiquetas  hoy #6C757D  ·  --text-weak      vale #53565A  → cambiaría
   Así que cada propiedad entra por un token de componente cuyo valor por defecto es el token de
   paleta EXACTO que hoy se resuelve (--bg-light = #F8F9FA, --status-neutral = #6C757D). Con eso:
   ni un píxel se mueve, ningún #hex nuevo entra, y un consumidor de Module 2 puede re-apuntar
   cualquiera de los tres sin tocar el primitivo.

   La deuda queda anotada donde corresponde (tokens.css, junto a los alias): mudar las etiquetas a
   --text-weak es una decisión de diseño, no de un re-skin. */

.ds-pagination[b-val64nkrnn] {
    --ds-pagination-surface: var(--bg-light);
    --ds-pagination-border: var(--med-gray-lighter);
    --ds-pagination-label: var(--status-neutral);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    border-top: 1px solid var(--ds-pagination-border);
    background: var(--ds-pagination-surface);
    flex-wrap: wrap;
}

.ds-pagination .pagination-controls[b-val64nkrnn] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ds-pagination .pagination-size-label[b-val64nkrnn],
.ds-pagination .pagination-page-label[b-val64nkrnn] {
    color: var(--ds-pagination-label);
    font-size: 0.85rem;
}

.ds-pagination .pagination-size-select[b-val64nkrnn] {
    width: auto;
}

.ds-pagination .pagination-jump[b-val64nkrnn] {
    width: 64px;
    text-align: center;
}

/* Cifras tabulares para que el rango y el número de página no bailen al cambiar de dígito. */
.ds-pagination .pagination-num[b-val64nkrnn] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.ds-pagination .pagination-btn:disabled[b-val64nkrnn] {
    opacity: 0.45;
    cursor: not-allowed;
}
/* _content/MtmpProjectsPoc.Web/Components/DesignSystem/DsRequiredMark.razor.rz.scp.css */
/* ============================================================================
   polish-m1-adopcion F1 — DsRequiredMark: la marca de campo obligatorio.
   Consume var(--token) únicamente (cero #hex, regla FD-01): el color sale del rol
   de error del diccionario de estado, así que un cambio de paleta permea aquí sin
   tocar este archivo.
   ============================================================================ */

.ds-required-mark[b-1qhc5ctdo3] {
  color: var(--state-danger-accent, var(--status-error));
  margin-left: var(--spacing-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}
/* _content/MtmpProjectsPoc.Web/Components/DesignSystem/DsTabBar.razor.rz.scp.css */
/* DS-01.06 — DsTabBar + inline ⋯ popover. var(--token) only. */
.ds-tabbar[b-zzbkdwko6m] {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-xs);
  border-bottom: 2px solid var(--grid-line-strong);
  /* NO usar overflow-x aquí: en CSS, `overflow-x:auto` fuerza `overflow-y` de `visible` a `auto`,
     lo que RECORTA el popover "⋯" (position:absolute; top:100%) que cae debajo del nav → el menú
     abría pero quedaba invisible (bug DS-01.06/DS-02.02). El desborde de tabs se maneja con
     VisibleBudget + el dropdown de overflow ("⋯ N"), no con scroll horizontal, así que overflow
     visible es seguro para el único consumidor (ViewTabBar). */
  overflow: visible;
}

.ds-tab[b-zzbkdwko6m] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  white-space: nowrap;
  min-width: 0;
  /* H-01 (feedback 2026-08-08) — el recorte de T-07 VIVÍA AQUÍ y dejaba invisible el menú "⋯": el
     popover es descendiente absoluto de esta caja (position:relative) y cuelga con top:100%, así que
     con la pestaña midiendo ~40px de alto el menú entero caía fuera y se recortaba. El menú abría de
     verdad —cuatro opciones, 180×126px, dentro del viewport— pero nadie lo veía.
     Es la MISMA falla que las líneas 7-11 documentan un nivel más arriba, por otra vía.
     El truncado NO se elimina: baja a .ds-tab__label, que es lo único que necesita truncarse y no es
     ancestro del popover. `visible` va explícito para que un `overflow-x` futuro no reintroduzca el
     recorte por la puerta de atrás. */
  overflow: visible;
}

.ds-tab--active[b-zzbkdwko6m] {
  background: var(--bg-white);
  box-shadow: inset 0 -2px 0 var(--med-blue-interactive);
}

.ds-tab__scope[b-zzbkdwko6m] { font-size: 0.85em; line-height: 1; }

.ds-tab__label[b-zzbkdwko6m] {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  padding: 0;
  /* T-07 (movido desde .ds-tab por H-01) — una etiqueta de pestaña larga (nombre de vista guardada)
     desbordaba la barra. El tope de ancho y los puntos suspensivos viven aquí: es el único elemento
     que necesita truncarse, y recortar aquí no toca al popover, que es hermano suyo. */
  max-width: 22ch;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-tab--active .ds-tab__label[b-zzbkdwko6m] { color: var(--med-blue-primary); font-weight: var(--font-weight-semibold); }

.ds-tab__menu-trigger[b-zzbkdwko6m] {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: var(--font-size-md);
  line-height: 1;
  padding: 0 var(--spacing-xs);
  border-radius: var(--radius-sm);
}
.ds-tab__menu-trigger:hover[b-zzbkdwko6m] { color: var(--med-blue-interactive); background: var(--med-gray-lightest); }

.ds-tab__popover-backdrop[b-zzbkdwko6m] {
  position: fixed;
  inset: 0;
  z-index: var(--z-dropdown);
  background: transparent;
}

.ds-tab__popover[b-zzbkdwko6m] {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--z-popover);
  min-width: 180px;
  margin-top: var(--spacing-xs);
  padding: var(--spacing-xs);
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border: 1px solid var(--grid-line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
}

.ds-tab__menu-item[b-zzbkdwko6m] {
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.ds-tab__menu-item:hover:not(:disabled)[b-zzbkdwko6m] { background: var(--row-hover); }
.ds-tab__menu-item:disabled[b-zzbkdwko6m] { opacity: 0.45; cursor: default; }
.ds-tab__menu-item--danger[b-zzbkdwko6m] { color: var(--status-error); }

.ds-tab-add[b-zzbkdwko6m] {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--med-blue-interactive);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-xs) var(--spacing-sm);
}
.ds-tab-add:hover[b-zzbkdwko6m] { text-decoration: underline; }

/* ── DS-02.02 hardening: per-tab close, overflow dropdown, drag affordance ── */
.ds-tab__close[b-zzbkdwko6m] {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1;
  padding: 0 var(--spacing-xs);
  border-radius: var(--radius-sm);
}
.ds-tab__close:hover[b-zzbkdwko6m] { color: var(--status-error); background: var(--med-gray-lightest); }

.ds-tab[draggable="true"][b-zzbkdwko6m] { cursor: grab; }
.ds-tab.ds-tab--dragging[b-zzbkdwko6m] { opacity: 0.5; }
.ds-tab.ds-tab--drop-target[b-zzbkdwko6m] { outline: 2px dashed var(--med-blue-interactive); outline-offset: -2px; }

.ds-tabbar__overflow[b-zzbkdwko6m] { position: relative; display: inline-flex; align-items: center; }
.ds-tabbar__overflow-trigger[b-zzbkdwko6m] {
  background: var(--bg-white);
  border: 1px solid var(--grid-line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  padding: var(--spacing-xs) var(--spacing-sm);
}
.ds-tabbar__overflow-list[b-zzbkdwko6m] {
  position: absolute;
  top: calc(100% + var(--spacing-xs));
  left: 0;
  z-index: var(--z-popover);
  list-style: none;
  margin: 0;
  padding: var(--spacing-xs);
  min-width: 200px;
  background: var(--bg-white);
  border: 1px solid var(--grid-line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
}
.ds-tabbar__overflow-item[b-zzbkdwko6m] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
}
.ds-tabbar__overflow-item:hover[b-zzbkdwko6m],
.ds-tabbar__overflow-item.active[b-zzbkdwko6m] { background: var(--row-hover); }

@media (prefers-reduced-motion: reduce) {
  .ds-tab.ds-tab--dragging[b-zzbkdwko6m] { opacity: 1; }
}
/* _content/MtmpProjectsPoc.Web/Components/DesignSystem/DsToast.razor.rz.scp.css */
/* UX-DS-06.01 — DsToast.
   Cero #hex, cero clase de color de Bootstrap, cero !important.

   FD-01 al pie de la letra: el color entra por tokens de ROL (--surface-raised, --text-strong,
   --border-default, --focus-ring) y por el diccionario de estado (--status-*), nunca por color
   crudo. Un componente que consume --surface-raised no se entera del rebrand; uno que consume
   --med-blue-primary hay que reescribirlo (nota de la capa semántica en tokens.css:325).

   Es el firetest que Components/Toast.razor no pasaba: ese tenía los cuatro colores escritos a
   mano en un <style> inline (#28A745, #DC3545, #FFC107, #17A2B8). */

.ds-toast[b-asgwxmzq6y] {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: min(400px, calc(100vw - 2rem));
    overflow: hidden;
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

/* La franja de acento es la que lleva el color de la severidad. Fondo de superficie + acento, en
   vez de tarjeta completamente teñida como el toast viejo: así el texto queda sobre la superficie
   normal y su contraste deja de depender del color de estado (con --status-warning, texto claro
   sobre amarillo no llegaba al mínimo legible). Es un diff visual ESPERADO del re-skin, listado
   en el playbook. */
.ds-toast__accent[b-asgwxmzq6y] {
    flex: 0 0 4px;
    background: var(--ds-toast-accent);
}

.ds-toast--success[b-asgwxmzq6y] { --ds-toast-accent: var(--status-success); }
.ds-toast--error[b-asgwxmzq6y]   { --ds-toast-accent: var(--status-error); }
.ds-toast--warning[b-asgwxmzq6y] { --ds-toast-accent: var(--status-warning); }
.ds-toast--info[b-asgwxmzq6y]    { --ds-toast-accent: var(--status-info); }

.ds-toast__content[b-asgwxmzq6y] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.625rem 0.75rem;
}

.ds-toast__header[b-asgwxmzq6y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ds-toast__icon[b-asgwxmzq6y] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.875rem;
    color: var(--ds-toast-accent);
}

.ds-toast__title[b-asgwxmzq6y] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.ds-toast__close[b-asgwxmzq6y] {
    flex: 0 0 auto;
    padding: 0 0.25rem;
    background: none;
    border: 0;
    line-height: 1;
    font-size: 0.875rem;
    color: var(--action-quiet);
    cursor: pointer;
}

.ds-toast__close:hover[b-asgwxmzq6y],
.ds-toast__close:focus-visible[b-asgwxmzq6y] {
    color: var(--text-strong);
}

.ds-toast__close:focus-visible[b-asgwxmzq6y] {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.ds-toast__body[b-asgwxmzq6y] {
    /* Alineado con el título, no con el icono: el icono es decorativo y el detalle cuelga del
       texto. 1.75rem = ancho del icono (1.25) + el gap del header (0.5). */
    margin-top: 0.25rem;
    padding-left: 1.75rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-weak);
    overflow-wrap: anywhere;
}
/* _content/MtmpProjectsPoc.Web/Components/DesignSystem/DsToastHost.razor.rz.scp.css */
/* UX-DS-06.01 — contenedor de la cola de avisos. Cero #hex, cero !important.
   Arriba a la derecha, fijo, apilado hacia abajo (addendum §2.1). El z-index es el mismo 9999 que
   Components/Toast.razor usaba, para que el aviso siga quedando encima de los modales — un error
   al guardar desde un diálogo tiene que verse. */

.ds-toast-host[b-8tmu4we81t] {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* El contenedor no debe tapar la página cuando no hay avisos que atender; cada aviso vuelve a
       aceptar el puntero. */
    pointer-events: none;
}

.ds-toast-host > *[b-8tmu4we81t] {
    pointer-events: auto;
}

@media (max-width: 768px) {
    .ds-toast-host[b-8tmu4we81t] {
        top: 0.5rem;
        right: 0.5rem;
        left: 0.5rem;
        align-items: stretch;
    }
}
/* _content/MtmpProjectsPoc.Web/Components/Dm/Search/SearchFormBuilder.razor.rz.scp.css */
/* DM-X5-01 — Scoped styles for <SearchFormBuilder>. Mirrors the existing
   "search filters card" look used by the hand-rolled forms so the component
   visually blends with pages that haven't migrated yet. */

.search-form-builder[b-47rtvbsnfl] {
    /* Match the spacing pattern of other catalog pages — title sits flush with
       the card border, form body has Bootstrap default padding. */
}

[b-47rtvbsnfl] .form-label {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

[b-47rtvbsnfl] .form-control,
[b-47rtvbsnfl] .form-select {
    /* Inherit Bootstrap default — explicitly named here so consumers can override
       via :deep tweaks without fighting an !important. */
}
/* _content/MtmpProjectsPoc.Web/Components/DynamicFieldsRenderer.razor.rz.scp.css */
.dynamic-fields-container[b-ow5t7grqvx] {
    margin-bottom: 32px;
}

.fields-grid[b-ow5t7grqvx] {
    display: grid;
    gap: 16px;
}

.fields-grid.two-columns[b-ow5t7grqvx] {
    grid-template-columns: repeat(2, 1fr);
}

.fields-grid.three-columns[b-ow5t7grqvx] {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1366px) {
    .fields-grid.three-columns[b-ow5t7grqvx] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .fields-grid.two-columns[b-ow5t7grqvx],
    .fields-grid.three-columns[b-ow5t7grqvx] {
        grid-template-columns: 1fr;
    }
}

.field-group[b-ow5t7grqvx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-group label[b-ow5t7grqvx] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-strong);
}

.field-group label.required[b-ow5t7grqvx]::after {
    content: " *";
    color: var(--state-danger-accent);
}

.field-group .help-text[b-ow5t7grqvx] {
    font-size: 11px;
    color: var(--text-weak);
    margin-top: 2px;
}

.form-control[b-ow5t7grqvx],
.form-select[b-ow5t7grqvx] {
    padding: 8px 12px;
    border: 1px solid var(--border-default);
    border-radius: 4px;
    font-size: 14px;
    color: var(--text-strong);
    background-color: var(--surface-default);
    transition: border-color 150ms, box-shadow 150ms;
}

.form-control[b-ow5t7grqvx]::placeholder {
    color: var(--text-weak);
    opacity: 1;
}

.form-select[b-ow5t7grqvx] {
    color: var(--text-weak);
}

.form-control:focus[b-ow5t7grqvx],
.form-select:focus[b-ow5t7grqvx] {
    border-color: var(--action-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
    background-color: var(--surface-default);
}

.form-control.is-valid[b-ow5t7grqvx] {
    border-color: var(--state-success-accent);
}

.form-control.is-invalid[b-ow5t7grqvx] {
    border-color: var(--state-danger-accent);
}

.info-banner[b-ow5t7grqvx] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    font-size: 13px;
}

.info-banner.info[b-ow5t7grqvx] {
    background-color: var(--selection-bg);
    color: var(--med-blue-medium);
    border-left: 4px solid var(--status-info);
}

.info-banner.warning[b-ow5t7grqvx] {
    background-color: var(--state-attention-bg);
    color: var(--state-attention-fg);
    border-left: 4px solid var(--state-attention-accent);
}

.info-banner .icon[b-ow5t7grqvx] {
    flex-shrink: 0;
    font-size: 16px;
}

.info-banner .message[b-ow5t7grqvx] {
    flex-grow: 1;
}
/* _content/MtmpProjectsPoc.Web/Components/Fields/EditableCompactField.razor.rz.scp.css */
/* ==========================================================================
   EditableCompactField Component Styles - REFINED
   Sprint S5: Field Unification - UX Improvement

   Design Principles:
   - Clear distinction between editable and readonly fields
   - Clean, professional typography (no uppercase labels)
   - Subtle visual hierarchy
   - Accessible focus states
   ========================================================================== */

/* ========== BASE COMPONENT - COMPACT (No card appearance) ========== */

.editable-compact-field[b-lovikk0nj2] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    transition: all 0.15s ease;
}

/* ========== EDITABLE STATE ========== */

.editable-compact-field.editable[b-lovikk0nj2] {
    border: none;
    background-color: transparent;
}

.editable-compact-field.editable:hover[b-lovikk0nj2] {
    border: none;
    box-shadow: none;
}

.editable-compact-field.editable:focus-within[b-lovikk0nj2] {
    border: none;
    box-shadow: none;
}

/* ========== READONLY STATE ========== */

.editable-compact-field.readonly[b-lovikk0nj2] {
    background-color: transparent;
    border: none;
}

.editable-compact-field.readonly:hover[b-lovikk0nj2] {
    background-color: transparent;
}

/* ========== LIVELINK STATE ========== */

.editable-compact-field.is-livelink[b-lovikk0nj2] {
    border: none;
    background: transparent;
}

.editable-compact-field.is-livelink:hover[b-lovikk0nj2] {
    box-shadow: none;
}

/* ========== ERROR STATE ========== */

.editable-compact-field.has-error[b-lovikk0nj2] {
    border: none;
    background-color: transparent;
}

/* ========== LABEL ROW ========== */

.field-label-row[b-lovikk0nj2] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    min-height: 16px;
}

.field-label[b-lovikk0nj2] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-strong);
    margin: 0;
    line-height: 1.4;
}

/* Label color for editable fields */
.editable-compact-field.editable .field-label[b-lovikk0nj2] {
    color: var(--text-strong);
}

/* ========== TOOLTIP ICON ========== */

.field-tooltip-icon[b-lovikk0nj2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 11px;
    color: var(--text-weakest);
    cursor: help;
    position: relative;
    border-radius: 50%;
    transition: all 0.15s ease;
}

.field-tooltip-icon:hover[b-lovikk0nj2] {
    color: var(--action-primary);
    background-color: var(--selection-bg);
}

.field-tooltip-icon:hover[b-lovikk0nj2]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    background-color: var(--text-strong);
    color: var(--surface-default);
    font-size: 12px;
    font-weight: 400;
    white-space: normal;
    max-width: 220px;
    min-width: 140px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    line-height: 1.4;
}

/* ========== REQUIRED INDICATOR ========== */

.field-required[b-lovikk0nj2] {
    color: var(--state-danger-accent);
    font-weight: 600;
    font-size: 14px;
}

/* ========== LIVELINK BADGE ========== */

.livelink-badge[b-lovikk0nj2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--action-primary);
    background-color: var(--selection-bg);
    border-radius: 100px;
    margin-left: auto;
}

.livelink-dot[b-lovikk0nj2] {
    width: 6px;
    height: 6px;
    background-color: var(--action-primary);
    border-radius: 50%;
    animation: pulse-dot-b-lovikk0nj2 2s ease-in-out infinite;
}

@keyframes pulse-dot-b-lovikk0nj2 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

/* ========== VALUE ROW ========== */

.field-value-row[b-lovikk0nj2] {
    min-height: 24px;
    display: flex;
    align-items: center;
}

.field-value[b-lovikk0nj2] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong);
    word-break: break-word;
    line-height: 1.4;
}

/* Empty value placeholder */
.field-value:empty[b-lovikk0nj2]::before,
.field-value:has(> :empty)[b-lovikk0nj2]::before {
    content: "—";
    color: var(--border-default);
}

.field-value.aggregator[b-lovikk0nj2] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-style: italic;
    color: var(--text-weakest);
}

.aggregator-icon[b-lovikk0nj2] {
    font-size: 12px;
    color: var(--text-weakest);
}

/* ========== STATUS COLORS ========== */

.field-value.status-good[b-lovikk0nj2] {
    color: var(--state-success-accent);
}

.field-value.status-fair[b-lovikk0nj2],
.field-value.status-warning[b-lovikk0nj2] {
    color: var(--state-attention-accent);
}

.field-value.status-poor[b-lovikk0nj2],
.field-value.status-danger[b-lovikk0nj2] {
    color: var(--state-danger-accent);
}

.field-value.status-neutral[b-lovikk0nj2] {
    color: var(--text-weakest);
}

/* ========== INPUT STYLES - COMPACT ========== */

.field-input[b-lovikk0nj2] {
    width: 100%;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-strong);
    background-color: var(--surface-default);
    border: 1px solid var(--border-default);
    border-radius: 4px;
    transition: all 0.15s ease;
}

.field-input:hover[b-lovikk0nj2] {
    background-color: var(--surface-default);
    border-color: var(--text-weakest);
}

.field-input:focus[b-lovikk0nj2] {
    outline: none;
    background-color: var(--surface-default);
    border-color: var(--action-primary);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.field-input[b-lovikk0nj2]::placeholder {
    color: var(--text-weakest);
    font-weight: 400;
}

.field-input.is-invalid[b-lovikk0nj2] {
    border-color: var(--state-danger-accent);
    background-color: var(--state-danger-bg);
}

.field-input.is-invalid:focus[b-lovikk0nj2] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ========== SELECT DROPDOWN ========== */

.field-select[b-lovikk0nj2] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
    cursor: pointer;
}

.field-select:hover[b-lovikk0nj2] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%233b82f6' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
}

/* ========== CHECKBOX ========== */

.field-checkbox-wrapper[b-lovikk0nj2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.field-checkbox[b-lovikk0nj2] {
    width: 18px;
    height: 18px;
    accent-color: var(--action-primary);
    cursor: pointer;
    border-radius: 4px;
}

.checkbox-label[b-lovikk0nj2] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-strong);
    cursor: pointer;
    margin: 0;
    user-select: none;
}

/* ========== TEXTAREA ========== */

.field-textarea[b-lovikk0nj2] {
    resize: vertical;
    min-height: 72px;
    font-family: inherit;
    line-height: 1.5;
}

/* ========== MULTILINE TEXT (Justification/Explanation Fields) ========== */

.field-multiline-text[b-lovikk0nj2] {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    resize: vertical;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background-color: var(--surface-subtle);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    transition: all 0.15s ease;
}

.field-multiline-text:hover[b-lovikk0nj2] {
    background-color: var(--surface-default);
    border-color: var(--text-weakest);
}

.field-multiline-text:focus[b-lovikk0nj2] {
    outline: none;
    border-color: var(--action-primary);
    background-color: var(--surface-default);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.field-multiline-text[b-lovikk0nj2]::placeholder {
    color: var(--text-weakest);
    font-weight: 400;
    font-style: italic;
}

.field-multiline-text.is-invalid[b-lovikk0nj2] {
    border-color: var(--state-danger-accent);
    background-color: var(--state-danger-bg);
}

.field-multiline-text.is-invalid:focus[b-lovikk0nj2] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ========== VALIDATION ERROR ========== */

.field-error[b-lovikk0nj2] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 4px;
    font-size: 12px;
    color: var(--state-danger-accent);
    font-weight: 500;
}

.field-error .oi[b-lovikk0nj2] {
    font-size: 11px;
}

/* ========== COMPACT MODE (for Hero Fields) ========== */

.editable-compact-field.compact[b-lovikk0nj2] {
    padding: 8px 10px;
    gap: 2px;
}

.editable-compact-field.compact .field-label[b-lovikk0nj2] {
    font-size: 11px;
}

.editable-compact-field.compact .field-value[b-lovikk0nj2] {
    font-size: 13px;
}

.editable-compact-field.compact .field-input[b-lovikk0nj2] {
    padding: 6px 8px;
    font-size: 13px;
}

.editable-compact-field.compact .field-value-row[b-lovikk0nj2] {
    min-height: 24px;
}

/* ========== STATE ICONS (Edit/Lock) ========== */

.field-state-icon[b-lovikk0nj2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    font-size: 11px;
    color: var(--text-weakest);
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* Lock icon: always visible for readonly fields */
.editable-compact-field.readonly .field-state-icon.icon-lock[b-lovikk0nj2] {
    opacity: 0.5;
}

/* Edit icon: shows on hover for editable fields */
.editable-compact-field.editable:hover .field-state-icon.icon-edit[b-lovikk0nj2] {
    opacity: 0.6;
    color: var(--action-primary);
}

/* Edit icon: higher opacity when focused */
.editable-compact-field.editable:focus-within .field-state-icon.icon-edit[b-lovikk0nj2] {
    opacity: 0.8;
    color: var(--action-primary);
}

/* LiveLink fields with lock have cyan color */
.editable-compact-field.is-livelink .field-state-icon.icon-lock[b-lovikk0nj2] {
    color: var(--action-primary);
    opacity: 0.6;
}

/* ========== REDUCED MOTION ========== */

@media (prefers-reduced-motion: reduce) {
    .editable-compact-field[b-lovikk0nj2],
    .field-input[b-lovikk0nj2],
    .field-tooltip-icon[b-lovikk0nj2],
    .field-state-icon[b-lovikk0nj2] {
        transition: none;
    }

    .livelink-dot[b-lovikk0nj2] {
        animation: none;
    }
}

/* ========== PRINT ========== */

@media print {
    .editable-compact-field[b-lovikk0nj2] {
        border: 1px solid var(--text-strong);
        background: var(--surface-default);
        box-shadow: none;
        border-left-width: 1px;
    }

    .livelink-badge[b-lovikk0nj2],
    .field-state-icon[b-lovikk0nj2] {
        display: none;
    }

    .field-input[b-lovikk0nj2],
    .field-select[b-lovikk0nj2],
    .field-textarea[b-lovikk0nj2] {
        border: none;
        background: transparent;
        padding: 0;
    }
}
/* _content/MtmpProjectsPoc.Web/Components/Fields/FieldContainer.razor.rz.scp.css */
/* ==========================================================================
   FieldContainer Component Styles
   Sprint S5: Field Unification - Story 28.20

   Shared wrapper styles for field components.
   Uses CSS custom properties from field-grid-variables.css
   ========================================================================== */

/* ========== BASE CONTAINER ========== */

.field-container[b-rtpmfwixws] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--field-padding);
    background-color: var(--field-bg-editable);
    border: var(--field-border-width) solid var(--field-border-color);
    border-radius: var(--field-border-radius-lg);
    transition: var(--field-transition);
}

.field-container:hover[b-rtpmfwixws] {
    box-shadow: var(--field-shadow-hover);
}

.field-container:focus-within[b-rtpmfwixws] {
    border-color: var(--color-livelink);
    box-shadow: var(--field-shadow-focus);
}

/* ========== COMPACT MODE ========== */

.field-container.compact[b-rtpmfwixws] {
    padding: var(--field-padding-compact);
}

/* ========== READONLY STATE ========== */

.field-container.readonly[b-rtpmfwixws] {
    background-color: var(--field-bg-readonly);
}

.field-container.readonly:hover[b-rtpmfwixws] {
    box-shadow: none;
}

/* ========== HIGHLIGHTED STATE (LiveLink) ========== */

.field-container.highlighted[b-rtpmfwixws] {
    border-left: var(--field-border-livelink-width) solid var(--color-livelink);
    background: linear-gradient(135deg, var(--color-livelink-bg) 0%, var(--field-bg-editable) 30%);
}

/* ========== ERROR STATE ========== */

.field-container.has-error[b-rtpmfwixws] {
    border-color: var(--color-error);
    background-color: var(--color-error-bg);
}

.field-container.has-error:focus-within[b-rtpmfwixws] {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ========== LABEL ROW ========== */

.field-label-row[b-rtpmfwixws] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    min-height: 16px;
}

.field-label[b-rtpmfwixws] {
    font-size: var(--field-label-size);
    font-weight: var(--field-label-weight);
    color: var(--field-label-color);
    text-transform: var(--field-label-transform);
    letter-spacing: var(--field-label-spacing);
    margin: 0;
    line-height: 1.2;
}

/* ========== TOOLTIP ICON ========== */

.field-tooltip-icon[b-rtpmfwixws] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 10px;
    color: var(--field-label-color);
    cursor: help;
    position: relative;
    border-radius: 50%;
    transition: var(--field-transition-fast);
}

.field-tooltip-icon:hover[b-rtpmfwixws],
.field-tooltip-icon:focus[b-rtpmfwixws] {
    color: var(--color-livelink);
    background-color: var(--color-livelink-bg);
    outline: none;
}

.field-tooltip-icon:hover[b-rtpmfwixws]::after,
.field-tooltip-icon:focus[b-rtpmfwixws]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--tooltip-padding);
    background-color: var(--tooltip-bg);
    color: var(--tooltip-text);
    font-size: var(--tooltip-font-size);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    max-width: var(--tooltip-max-width);
    min-width: 120px;
    border-radius: var(--tooltip-border-radius);
    box-shadow: var(--tooltip-shadow);
    z-index: 1000;
    line-height: 1.4;
    text-align: left;
}

/* Tooltip arrow */
.field-tooltip-icon:hover[b-rtpmfwixws]::before,
.field-tooltip-icon:focus[b-rtpmfwixws]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--tooltip-bg);
    z-index: 1001;
}

/* ========== REQUIRED INDICATOR ========== */

.field-required[b-rtpmfwixws] {
    color: var(--color-error);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
}

/* ========== LIVELINK BADGE ========== */

.livelink-badge[b-rtpmfwixws] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-livelink);
    background-color: var(--color-livelink-bg);
    border-radius: 100px;
    margin-left: auto;
}

.livelink-dot[b-rtpmfwixws] {
    width: 5px;
    height: 5px;
    background-color: var(--color-livelink);
    border-radius: 50%;
    animation: livelink-pulse-b-rtpmfwixws 2s ease-in-out infinite;
}

@keyframes livelink-pulse-b-rtpmfwixws {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

/* ========== CONTENT AREA ========== */

.field-content[b-rtpmfwixws] {
    min-height: 24px;
    display: flex;
    align-items: center;
}

/* ========== ERROR MESSAGE ========== */

.field-error[b-rtpmfwixws] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding-top: 4px;
    font-size: 11px;
    color: var(--color-error);
    line-height: 1.3;
}

.field-error .oi[b-rtpmfwixws] {
    font-size: 10px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ========== FOOTER ========== */

.field-footer[b-rtpmfwixws] {
    padding-top: 4px;
    font-size: 11px;
    color: var(--field-label-color);
}

/* ========== REDUCED MOTION ========== */

@media (prefers-reduced-motion: reduce) {
    .field-container[b-rtpmfwixws] {
        transition: none;
    }

    .field-tooltip-icon[b-rtpmfwixws] {
        transition: none;
    }

    .livelink-dot[b-rtpmfwixws] {
        animation: none;
    }
}

/* ========== PRINT ========== */

@media print {
    .field-container[b-rtpmfwixws] {
        border: 1px solid var(--border-strong);
        background: var(--surface-default);
        box-shadow: none;
        page-break-inside: avoid;
    }

    .livelink-badge[b-rtpmfwixws] {
        display: none;
    }

    .field-tooltip-icon[b-rtpmfwixws] {
        display: none;
    }
}
/* _content/MtmpProjectsPoc.Web/Components/InlineValidationMessage.razor.rz.scp.css */
.validation-message[b-c5k5kgwjvs] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
    line-height: 18px;
}

.validation-message .icon[b-c5k5kgwjvs] {
    flex-shrink: 0;
}

.validation-message .text[b-c5k5kgwjvs] {
    flex-grow: 1;
}

.validation-message.success[b-c5k5kgwjvs] {
    color: var(--state-success-accent);
}

.validation-message.error[b-c5k5kgwjvs] {
    color: var(--state-danger-accent);
}

.validation-message.warning[b-c5k5kgwjvs] {
    color: var(--state-attention-accent);
}

.validation-message.info[b-c5k5kgwjvs] {
    color: var(--status-info);
}
/* _content/MtmpProjectsPoc.Web/Components/Intake/BottomActionBar.razor.rz.scp.css */
/*
    Story UX-INT-01.05 — bottom-action-bar styles. Slim, full-width, sticky to the bottom.
    Consumes design-tokens.css (--btn-primary-bg, --radius-lg, --shadow-md, --z-sticky).
*/

.bottom-action-bar[b-gh26ezqvfk] {
    /* Feedback Iván 2026-08-10 — la barra deja de ser un bloque cuadrado: mismo radio y
       sombra suave que las tarjetas del rediseño 2026-08, apoyada sobre el fondo. */
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky, 1020);
    background: var(--mtmp-white, #fff);
    border: 1px solid rgba(10, 37, 72, 0.08);
    border-radius: var(--mtmp-radius-lg, 16px);
    box-shadow: var(--mtmp-shadow-soft, 0 8px 24px rgba(6, 20, 44, 0.08));
    margin-top: var(--spacing-lg, 24px);
}

.bottom-action-bar__inner[b-gh26ezqvfk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md, 16px);
    padding: 12px 20px;
}

/* Discreet "Cancelar" link */
.bottom-action-bar__cancel[b-gh26ezqvfk] {
    background: none;
    border: none;
    color: var(--text-secondary, var(--text-weak));
    font-size: var(--font-size-sm, 14px);
    text-decoration: underline;
    cursor: pointer;
    padding: 6px 8px;
}

.bottom-action-bar__cancel:hover:not(:disabled)[b-gh26ezqvfk] {
    color: var(--text-primary, var(--text-strong));
}

.bottom-action-bar__cancel:disabled[b-gh26ezqvfk] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Primary CTA pill */
.bottom-action-bar__cta[b-gh26ezqvfk] {
    display: inline-flex;
    align-items: center;
    background: var(--btn-primary-bg, var(--action-primary));
    color: var(--surface-default);
    border: none;
    border-radius: var(--radius-lg, 24px);
    padding: 0 32px;
    height: 44px;
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-md, 16px);
    cursor: pointer;
    transition: box-shadow var(--transition-fast, 150ms), opacity var(--transition-fast, 150ms);
}

.bottom-action-bar__cta:hover:not(:disabled)[b-gh26ezqvfk] {
    box-shadow: var(--btn-primary-hover-shadow, 0 5px 15px rgba(16, 16, 235, 0.4));
}

.bottom-action-bar__cta:focus-visible[b-gh26ezqvfk] {
    outline: 3px solid var(--medtronic-blue-interactive, var(--action-primary));
    outline-offset: 2px;
}

.bottom-action-bar__cta:disabled[b-gh26ezqvfk] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .bottom-action-bar__cta[b-gh26ezqvfk] {
        transition: none;
    }
}
/* _content/MtmpProjectsPoc.Web/Components/Intake/ChapterChip.razor.rz.scp.css */
/*
    Story UX-INT-01.02 — chapter-chip styles.
    Reuses the Mold Card header chrome. The pill is BLUE (selection), never cyan.
    Consumes design-tokens.css (--medtronic-blue-interactive, --radius-*, --shadow-sm).
*/

.chapter-chip[b-r6ntksdb6n] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
    width: 100%;
    /* Feedback Iván 2026-08-10 — chrome de tarjeta del rediseño 2026-08 (`.mtmp-card`):
       radio 12px, borde tenue azulado y sombra suave; azul de marca en icono y foco. */
    padding: 12px 16px;
    background: var(--mtmp-white, #fff);
    border: 1px solid rgba(10, 37, 72, 0.08);
    border-radius: var(--mtmp-radius-md, 12px);
    box-shadow: 0 1px 2px rgba(6, 20, 44, 0.05);
    cursor: pointer;
    text-align: left;
    font-size: var(--font-size-sm, 14px);
    transition: background-color var(--transition-fast, 150ms), box-shadow var(--transition-fast, 150ms);
}

.chapter-chip:hover[b-r6ntksdb6n] {
    background: var(--mtmp-ice-blue, #F4FAFF);
    box-shadow: 0 4px 14px rgba(6, 20, 44, 0.07);
}

.chapter-chip:focus-visible[b-r6ntksdb6n] {
    outline: 3px solid var(--mtmp-primary, #117BFF);
    outline-offset: 2px;
}

.chapter-chip__icon[b-r6ntksdb6n] {
    color: var(--mtmp-primary, #117BFF);
    flex-shrink: 0;
}

.chapter-chip__label[b-r6ntksdb6n] {
    flex: 1;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, var(--text-strong));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* State pill — BLUE selection accent. Mirrors the LIVE pill SHAPE but never cyan. */
.chapter-chip__pill[b-r6ntksdb6n] {
    flex-shrink: 0;
    padding: 2px 10px;
    border-radius: var(--mtmp-radius-pill, 999px);
    background: rgba(17, 123, 255, 0.10);
    color: var(--mtmp-primary, #117BFF);
    border: 1px solid rgba(17, 123, 255, 0.35);
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
}

.chapter-chip__chevron[b-r6ntksdb6n] {
    flex-shrink: 0;
    color: var(--medtronic-gray-medium, var(--text-weak));
    font-size: var(--font-size-lg, 18px);
}

@media (prefers-reduced-motion: reduce) {
    .chapter-chip[b-r6ntksdb6n] {
        transition: none;
    }
}
/* _content/MtmpProjectsPoc.Web/Components/Intake/IntakeChapter.razor.rz.scp.css */
/*
    Story UX-INT-01.01 — Narrative chapter shell styles.
    Semantic motion only: "resolved = collapse", "your turn = reveal". Under
    prefers-reduced-motion the transforms drop and state changes are instant.
    Consumes design-tokens.css custom properties (--transition-*, --radius-*, etc.).
*/

.intake-chapter[b-e6thp5kf6k] {
    margin-bottom: var(--spacing-lg, 24px);
}

/* ─── Active: the single chapter on stage ─────────────────────────────── */
.intake-chapter--active[b-e6thp5kf6k] {
    animation: intake-chapter-reveal-b-e6thp5kf6k var(--transition-base, 200ms) ease;
}

.intake-chapter__header[b-e6thp5kf6k] {
    margin-bottom: var(--spacing-md, 16px);
}

.intake-chapter__title[b-e6thp5kf6k] {
    font-size: var(--font-size-2xl, 24px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, var(--text-strong));
    margin: 0;
}

.intake-chapter__prompt[b-e6thp5kf6k] {
    font-size: var(--font-size-md, 16px);
    color: var(--text-secondary, var(--text-weak));
    margin: var(--spacing-xs, 4px) 0 0;
}

.intake-chapter__body[b-e6thp5kf6k] {
    /* Body owns its own section cards; no extra chrome here. */
}

/* ─── Pending: dimmed 1-line placeholder (the story map) ───────────────── */
.intake-chapter--pending .intake-chapter__placeholder[b-e6thp5kf6k] {
    /* Feedback Iván 2026-08-10 — mismo radio y borde tenue que las tarjetas del rediseño. */
    opacity: 0.6;
    padding: var(--spacing-md, 16px) var(--spacing-lg, 24px);
    border: 1px dashed var(--mtmp-border-gray, #DCE5F2);
    border-radius: var(--mtmp-radius-lg, 16px);
    background: var(--mtmp-cloud, #F8FAFD);
    font-size: var(--font-size-lg, 18px);
    color: var(--text-secondary, var(--text-weak));
    cursor: default;
    user-select: none;
}

/* Alcanzable (Feedback Iván 2026-08-10): el placeholder es un botón — se reinicia el chrome de
   botón para que se vea idéntico al pendiente, pero invita al click y sube su opacidad. */
.intake-chapter--reachable .intake-chapter__placeholder[b-e6thp5kf6k] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    opacity: 0.9;
    cursor: pointer;
    border-style: solid;
    border-color: rgba(17, 123, 255, 0.35);
    background: var(--mtmp-white, #fff);
    transition: background-color var(--transition-fast, 150ms), box-shadow var(--transition-fast, 150ms);
}

.intake-chapter--reachable .intake-chapter__placeholder:hover[b-e6thp5kf6k] {
    background: var(--mtmp-ice-blue, #F4FAFF);
    box-shadow: 0 4px 14px rgba(6, 20, 44, 0.07);
}

.intake-chapter--reachable .intake-chapter__placeholder:focus-visible[b-e6thp5kf6k] {
    outline: 3px solid var(--mtmp-primary, #117BFF);
    outline-offset: 2px;
}

.intake-chapter__placeholder-chevron[b-e6thp5kf6k] {
    margin-left: auto;
    color: var(--mtmp-primary, #117BFF);
    font-size: var(--font-size-lg, 18px);
}

.intake-chapter__placeholder-title[b-e6thp5kf6k] {
    font-weight: var(--font-weight-semibold, 600);
}

.intake-chapter__placeholder-hint[b-e6thp5kf6k] {
    font-weight: var(--font-weight-normal, 400);
    font-size: var(--font-size-sm, 14px);
}

/* ─── Collapsed: fallback chip (real chip = UX-INT-01.02) ──────────────── */
.intake-chapter--collapsed[b-e6thp5kf6k] {
    animation: intake-chapter-collapse-b-e6thp5kf6k var(--transition-fast, 150ms) ease;
}

.intake-chapter__chip-fallback[b-e6thp5kf6k] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
    width: 100%;
    padding: 12px 16px;
    background: var(--mtmp-white, #fff);
    border: 1px solid rgba(10, 37, 72, 0.08);
    border-radius: var(--mtmp-radius-md, 12px);
    box-shadow: 0 1px 2px rgba(6, 20, 44, 0.05);
    cursor: pointer;
    text-align: left;
    transition: background-color var(--transition-fast, 150ms), box-shadow var(--transition-fast, 150ms);
}

.intake-chapter__chip-fallback:hover[b-e6thp5kf6k] {
    background: var(--mtmp-ice-blue, #F4FAFF);
    box-shadow: 0 4px 14px rgba(6, 20, 44, 0.07);
}

.intake-chapter__chip-fallback:focus-visible[b-e6thp5kf6k] {
    outline: 3px solid var(--mtmp-primary, #117BFF);
    outline-offset: 2px;
}

.intake-chapter__chip-marker[b-e6thp5kf6k] {
    color: var(--mtmp-primary, #117BFF);
}

.intake-chapter__chip-title[b-e6thp5kf6k] {
    flex: 1;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, var(--text-strong));
}

.intake-chapter__chip-chevron[b-e6thp5kf6k] {
    color: var(--medtronic-gray-medium, var(--text-weak));
    font-size: var(--font-size-lg, 18px);
}

/* ─── Semantic motion keyframes ───────────────────────────────────────── */
@keyframes intake-chapter-reveal-b-e6thp5kf6k {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes intake-chapter-collapse-b-e6thp5kf6k {
    from {
        opacity: 0.6;
    }
    to {
        opacity: 1;
    }
}

/* ─── Reduced motion: drop transforms, keep state changes instant ──────── */
@media (prefers-reduced-motion: reduce) {
    .intake-chapter--active[b-e6thp5kf6k],
    .intake-chapter--collapsed[b-e6thp5kf6k] {
        animation: none;
    }
    .intake-chapter__chip-fallback[b-e6thp5kf6k] {
        transition: none;
    }
}
/* _content/MtmpProjectsPoc.Web/Components/PhaseCard.razor.rz.scp.css */
/*
  Feedback 2026-08-26 — el alta de tarea de nivel FASE, junto al contador de "Task Execution".

  Compacto a propósito: el encabezado de sección mide 11px y no puede crecer por un botón. Este
  mide 22px de alto (el mismo que la insignia del contador que lo acompaña) y en pantallas angostas
  se queda solo con el ícono, sin cambiar de sitio ni de tamaño.
*/
.pc2-section-actions[b-3ts5h8l8hp] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pc2-add-task[b-3ts5h8l8hp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--med-blue-primary, #170F5F);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-white, #fff);
    color: var(--med-blue-primary, #170F5F);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.pc2-add-task:hover[b-3ts5h8l8hp] {
    background: var(--bg-light, #F8F9FA);
}

.pc2-add-task:focus-visible[b-3ts5h8l8hp] {
    outline: 2px solid var(--med-blue-interactive, #0F6BB5);
    outline-offset: 1px;
}

/* En angosto se queda el ícono: el nombre completo ya vive en el `title`. */
@media (max-width: 900px) {
    .pc2-add-task__label[b-3ts5h8l8hp] {
        display: none;
    }
}
/* _content/MtmpProjectsPoc.Web/Components/Phases/ProjectPhaseTimeline.razor.rz.scp.css */
/* Story tl.01 — Timeline de fases del detalle de proyecto (v1 solo lectura).
   Spec: docs/design/SPEC-TIMELINE-FASES-V1-2026-08.md §Tokens usados.

   REGLA DE ORO DE ESTE ARCHIVO: cero hex propios, cero !important. Todo se consume como
   var(--token). Si algo necesita un color que no existe como token, el token se agrega en
   state-tokens.css como ALIAS (nunca como hex) — el único caso en esta story es
   --state-phase-rework-*.

   Dos diccionarios, jamás mezclados (FD-04):
     · estado de flujo → --state-phase-*      (dominio 3)
     · salud           → --state-schedule-*   (dominio 4)
   Aunque un par coincida en tono, nunca se cruza un token de un dominio al otro. Es lo que hace
   que el firetest tenga sentido: cambiar un token de salud NO puede mover las insignias de estado.
*/

.ppt-block[b-mji9drknmt] {
    margin-bottom: var(--spacing-md);
}

.ppt-title[b-mji9drknmt] {
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--med-gray-dark);
    margin: 0 0 var(--spacing-sm) 0;
}

/* Un nombre de fase inusualmente largo desplaza DENTRO de la tabla, no la página entera. */
.ppt-scroll[b-mji9drknmt] {
    overflow-x: auto;
    border: 1px solid var(--grid-line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.ppt-table[b-mji9drknmt] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: var(--grid-font-size);
    background: var(--bg-white);
}

.ppt-table thead th[b-mji9drknmt] {
    height: var(--grid-header-h);
    padding: var(--grid-cell-padding);
    background: var(--table-header-bg);
    color: var(--table-header-text);
    font-weight: var(--font-weight-semibold);
    text-align: left;
    white-space: nowrap;
}

.ppt-row[b-mji9drknmt] {
    background: var(--row-phase-bg);
}

.ppt-row:nth-child(even)[b-mji9drknmt] {
    background: var(--row-zebra);
}

.ppt-row:hover[b-mji9drknmt] {
    background: var(--row-hover);
}

.ppt-table tbody td[b-mji9drknmt] {
    height: var(--grid-row-h-phase);
    padding: var(--grid-cell-padding);
    border-bottom: 1px solid var(--grid-line);
    color: var(--med-gray-dark);
    vertical-align: middle;

    /* La fila NUNCA pasa de una línea. Un timeline que crece verticalmente deja de ser un
       timeline y se vuelve una lista de tarjetas — exactamente lo que el veredicto podó. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Fase actual: dos señales, una redundante de la otra ─────────────────────────────── */

.ppt-row--current td:first-child[b-mji9drknmt] {
    box-shadow: inset 3px 0 0 var(--med-blue-interactive);
}

.ppt-current-flag[b-mji9drknmt] {
    display: inline-block;
    margin-left: var(--spacing-xs);
    padding: 0 var(--spacing-xs);
    border: 1px solid var(--med-blue-interactive);
    border-radius: var(--radius-sm);
    color: var(--med-blue-interactive);
    font-size: var(--font-size-xs);
    line-height: 1.4;
    white-space: nowrap;
}

/* ── Fase saltada / no aplicable: fila atenuada + cursiva ────────────────────────────── */

/* La cursiva es el SEGUNDO portador de significado que el diccionario exige para separar
   `muted` de `neutral`, que comparten paleta a propósito. */
.ppt-row--retired[b-mji9drknmt] {
    background: var(--med-gray-faintest);
}

.ppt-phase-name--retired[b-mji9drknmt],
.ppt-badge-retired[b-mji9drknmt] {
    font-style: italic;
}

/* ── Columnas ────────────────────────────────────────────────────────────────────────── */

.ppt-col-order[b-mji9drknmt] {
    width: 28px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--med-gray-medium);
}

.ppt-col-phase[b-mji9drknmt] {
    min-width: 130px;
}

.ppt-col-status[b-mji9drknmt],
.ppt-col-health[b-mji9drknmt] {
    width: 108px;
}

.ppt-col-date[b-mji9drknmt] {
    width: 168px;
    font-variant-numeric: tabular-nums;
}

.ppt-col-flags[b-mji9drknmt] {
    width: 44px;
    text-align: center;
}

/* ── Celda Fase: glifo + punto + nombre ──────────────────────────────────────────────── */

.ppt-phase-cell[b-mji9drknmt] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 0;
}

.ppt-phase-name[b-mji9drknmt] {
    font-weight: var(--font-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Glifo └─ y punto de 9 px: mismas reglas que la sub-fila del tracker
   (tracker-view.css). Se redeclaran aquí porque la hoja aislada del componente no
   alcanza las clases globales del tracker. */
.ppt-phase-cell[b-mji9drknmt]  .phase-tree,
.ppt-phase-cell .phase-tree[b-mji9drknmt] {
    font-family: var(--font-mono);
    color: var(--med-gray-light);
    letter-spacing: -0.5px;
    font-size: 0.9rem;
}

.ppt-phase-cell .phase-status-indicator[b-mji9drknmt] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Los seis valores del punto. Los tres primeros existen en el tracker; los tres últimos son la
   extensión de esta story, y apuntan al MISMO diccionario de rol que tiñe la insignia de al lado.
   Nada de color inventado. */
.ppt-phase-cell .phase-status-indicator.dot-complete[b-mji9drknmt] {
    background: var(--state-phase-completed-accent);
}

.ppt-phase-cell .phase-status-indicator.dot-active[b-mji9drknmt] {
    background: var(--state-phase-inprogress-accent);
    animation: pptPhasePulse-b-mji9drknmt 1.5s ease-in-out infinite;
}

/* C-07 — un relleno claro sobre blanco daba 1.48:1, prácticamente invisible, y no se rescata sin
   oscurecerlo hasta confundirlo con "completada". Contorno, que además es el segundo portador. */
.ppt-phase-cell .phase-status-indicator.dot-pending[b-mji9drknmt] {
    background: var(--bg-white);
    border: 2px solid var(--state-phase-notstarted-fg);
    box-sizing: border-box;
}

.ppt-phase-cell .phase-status-indicator.dot-skipped[b-mji9drknmt] {
    background: var(--state-phase-skipped-accent);
}

.ppt-phase-cell .phase-status-indicator.dot-notapplicable[b-mji9drknmt] {
    background: var(--state-phase-notapplicable-accent);
}

.ppt-phase-cell .phase-status-indicator.dot-rework[b-mji9drknmt] {
    background: var(--state-phase-rework-accent);
}

@keyframes pptPhasePulse-b-mji9drknmt {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--med-blue-interactive) 40%, transparent); }
    50%      { box-shadow: 0 0 0 5px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .ppt-phase-cell .phase-status-indicator.dot-active[b-mji9drknmt] {
        animation: none;
        box-shadow: none;
    }
}

/* ── Insignia de SALUD (dominio 4) ───────────────────────────────────────────────────── */

/* No usa DsBadge a propósito: DsBadge no tiene clase para Unscheduled / OffTrack / NotStarted y
   caerían a la clase base, que fija color blanco SIN fondo — invisible. Y tampoco usa
   .phase-schedule-badge, que trae seis hex crudos embebidos en PhaseCard divergentes de
   tokens.css (alinear PhaseCard es deuda separada, fuera de este goal). */
.ppt-health[b-mji9drknmt] {
    display: inline-block;
    padding: 0 var(--spacing-xs);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.6;
    white-space: nowrap;
}

.ppt-health--completed[b-mji9drknmt] {
    background: var(--state-schedule-completed-bg);
    color: var(--state-schedule-completed-fg);
}

.ppt-health--ontrack[b-mji9drknmt] {
    background: var(--state-schedule-ontrack-bg);
    color: var(--state-schedule-ontrack-fg);
}

.ppt-health--atrisk[b-mji9drknmt] {
    background: var(--state-schedule-atrisk-bg);
    color: var(--state-schedule-atrisk-fg);
}

.ppt-health--offtrack[b-mji9drknmt] {
    background: var(--state-schedule-offtrack-bg);
    color: var(--state-schedule-offtrack-fg);
}

.ppt-health--notstarted[b-mji9drknmt] {
    background: var(--state-schedule-notstarted-bg);
    color: var(--state-schedule-notstarted-fg);
}

/* El valor del día uno. Hoy la columna se ve mayoritariamente así, y eso es correcto. */
.ppt-health--unscheduled[b-mji9drknmt] {
    background: var(--state-schedule-unscheduled-bg);
    color: var(--state-schedule-unscheduled-fg);
}

/* ── Fechas, vacío y sub-etiquetas ───────────────────────────────────────────────────── */

.ppt-dates[b-mji9drknmt] {
    color: var(--med-gray-dark);
}

.ppt-empty[b-mji9drknmt] {
    color: var(--med-gray-light);
    border-bottom: 1px dotted var(--med-gray-lighter);
}

/* La sub-etiqueta es lo que impide que el usuario lea el guion como un defecto de la pantalla.
   Su jerarquía la cargan el color y la cursiva, no el tamaño: el token más pequeño del sistema es
   --font-size-xs (12px) e inventar uno menor sobre el gris claro empeora la legibilidad. */
.ppt-sub[b-mji9drknmt] {
    display: block;
    margin-left: var(--spacing-xs);
    color: var(--med-gray-light);
    font-size: var(--font-size-xs);
    font-style: italic;
    line-height: 1;
}

/* La fila no crece: la sub-etiqueta vive en la misma línea que el dato. */
.ppt-table tbody td.ppt-col-date[b-mji9drknmt] {
    display: table-cell;
}

.ppt-col-date .ppt-sub[b-mji9drknmt] {
    display: inline;
    margin-left: var(--spacing-xs);
}

/* ── Contador de replanes (apagado hoy: EndDateChanges nunca incrementa) ─────────────── */

.ppt-replan[b-mji9drknmt] {
    display: inline-block;
    margin-left: var(--spacing-xs);
    padding: 0 var(--spacing-xs);
    border-radius: var(--radius-sm);
    background: var(--state-progress-bg);
    color: var(--state-progress-fg);
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
}

/* ── Marcador de fase obligatoria ────────────────────────────────────────────────────── */

/* Deliberadamente distinto de --state-schedule-atrisk-* aunque el tono sea vecino: son dos ejes
   distintos —uno es un estado que cambia solo, el otro una propiedad fija de la fase— y un cambio
   de paleta en uno no debe arrastrar al otro. La FORMA también los separa: círculo contra píldora. */
.ppt-mandatory[b-mji9drknmt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--med-yellow-bg);
    border: 1px solid var(--med-yellow-deep);
    color: var(--med-yellow-deep);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}

/* ── Razón de salto, bajo la tabla ───────────────────────────────────────────────────── */

.ppt-skip-reasons[b-mji9drknmt] {
    list-style: none;
    margin: var(--spacing-sm) 0 0 0;
    padding: 0;
    font-size: var(--font-size-xs);
    color: var(--med-gray-medium);
}

.ppt-skip-reasons li[b-mji9drknmt] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.6;
}

.ppt-skip-reasons strong[b-mji9drknmt] {
    color: var(--med-gray-dark);
    font-weight: var(--font-weight-semibold);
}

.ppt-sr-only[b-mji9drknmt] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────────────────── */

/* Los tres cortes que el detalle de proyecto YA tiene (project-detail-compact-2026.css):
   1199 / 991 / 767. Ni uno más, aunque otras hojas del proyecto usen 640 / 1024 / 1440.

   Regla: se retira la columna menos densa en información antes que la más densa, y nada se
   pierde — lo que sale de la tabla entra al title de la celda que se queda. */

/* ≤ 1199 — se va `#`. Su contenido es la posición de lectura, que la fila ya comunica por estar
   donde está. El ordinal sobrevive en el title del nombre de la fase. */
@media (max-width: 1199px) {
    .ppt-table .ppt-col-order[b-mji9drknmt] {
        display: none;
    }

    .ppt-row--current td:first-child[b-mji9drknmt] {
        box-shadow: inset 3px 0 0 var(--med-blue-interactive);
    }
}

/* ≤ 991 — se va *Fecha viva*. Contraintuitivo solo en apariencia: hoy esa columna está vacía en el
   100% de las filas y el contador no se renderiza, así que en el mundo real es la que menos
   aporta. Las dos que sobreviven —el compromiso y lo que pasó— son la pregunta que el componente
   contesta. Cuando fechas-bloque-b pueble la fecha viva, este corte se revisa. */
@media (max-width: 991px) {
    .ppt-table .ppt-col-live[b-mji9drknmt] {
        display: none;
    }
}

/* ≤ 767 — se va *Salud* como columna; su lectura ya vive en el title del punto de estado, que
   sigue ahí. La insignia de flujo se conserva porque es la que el usuario reconoce del tracker.
   Y las sub-etiquetas dejan de ocupar renglón propio para que la fila no crezca a dos líneas. */
@media (max-width: 767px) {
    .ppt-table .ppt-col-health[b-mji9drknmt] {
        display: none;
    }

    .ppt-table .ppt-col-date[b-mji9drknmt] {
        width: auto;
        min-width: 120px;
    }

    .ppt-col-date .ppt-sub[b-mji9drknmt] {
        display: none;
    }
}
/* _content/MtmpProjectsPoc.Web/Components/ProgressIndicator.razor.rz.scp.css */
.progress-indicator[b-9v9mrcksdm] {
    margin-bottom: 24px;
}

.progress-label[b-9v9mrcksdm] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 8px;
}

.progress-bar-container[b-9v9mrcksdm] {
    width: 100%;
    height: 8px;
    background-color: var(--border-default);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar[b-9v9mrcksdm] {
    height: 100%;
    background-color: var(--action-primary); /* Medtronic Blue */
    transition: width 300ms ease-in-out;
}
/* _content/MtmpProjectsPoc.Web/Components/ProjectSummaryCard.razor.rz.scp.css */
/* Project summary card — UX redesign 2026-04-30, spec section 2.4 */

.project-summary-card[b-j38jz15br9] {
    border: 1px solid var(--border-default);
    border-left: 4px solid var(--state-success-accent);
    background: linear-gradient(135deg, var(--state-success-bg) 0%, var(--surface-default) 100%);
    border-radius: 8px;
    margin-bottom: 24px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.project-summary-card .card-header[b-j38jz15br9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(16, 185, 129, 0.15);
    background: transparent;
}

.project-summary-card .card-header .card-icon[b-j38jz15br9] {
    font-size: 18px;
}

.project-summary-card .card-header h5[b-j38jz15br9] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--state-success-fg);
    flex: 1;
}

.project-summary-card .preview-badge[b-j38jz15br9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--state-success-accent);
    background-color: var(--state-success-bg);
    border: 1px solid var(--state-success-bg);
    border-radius: 100px;
}

.project-summary-card .card-body[b-j38jz15br9] {
    padding: 12px 16px 16px 16px;
}

.project-summary-card .summary-grid[b-j38jz15br9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 12px;
    background: var(--surface-subtle);
    border-radius: 6px;
}

.project-summary-card .summary-item[b-j38jz15br9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.project-summary-card .summary-item .label[b-j38jz15br9] {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-weakest);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.project-summary-card .summary-item .value[b-j38jz15br9] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-summary-card .summary-item .value code[b-j38jz15br9] {
    font-size: 12px;
    background: var(--surface-sunken);
    padding: 2px 6px;
    border-radius: 4px;
}

.project-summary-card .summary-secondary[b-j38jz15br9] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-default);
    font-size: 12px;
    color: var(--text-weak);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.project-summary-card .summary-secondary .dot[b-j38jz15br9] {
    color: var(--border-default);
}

@media (max-width: 992px) {
    .project-summary-card .summary-grid[b-j38jz15br9] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .project-summary-card .summary-grid[b-j38jz15br9] {
        grid-template-columns: 1fr;
    }
}
/* _content/MtmpProjectsPoc.Web/Components/Projects/ProjectLifecycleBadge.razor.rz.scp.css */
/* Story 38.02e (AC8 / Non-Functional) — insignia canónica de los 5 estados del ciclo de vida.
   ----------------------------------------------------------------------------------------------
   Goal `polish-m1-estructural`, fase 2 — esta insignia es el ORIGEN del vocabulario estado→color
   del módulo, así que es la primera que consume el diccionario
   (wwwroot/css/design-system/state-tokens.css). Antes traía los cinco colores como hex propios,
   que es justo lo que hacía imposible responder "¿de qué color va Completado?" sin abrir siete
   hojas: C-08 (azul = En progreso) y C-09 (verde = Completado) del catálogo v2 salían de aquí, y
   contradecían a C-10 / C-11 (azul = Completado) y a C-12 (verde = Activo).

   De paso corrige un contraste que el encabezado de este archivo daba por bueno y no lo era: con
   el par sólido + texto blanco, `inprogress` quedaba en 3.68:1 y `completed` en 3.13:1, los dos
   por debajo del mínimo de 4.5:1 para texto. El par suave del diccionario está medido y amarrado
   por StateDictionaryTests. */

.lifecycle-badge[b-1wyzn0dqf4] {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.15rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    /* T-01 — el pill se recorta dentro de su celda en vez de empujarla. */
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lifecycle-badge .ds-badge__icon[b-1wyzn0dqf4] { font-size: 0.7em; }

/* NotStarted — neutral: "todavía no empezó" */
.ds-badge--status-notstarted[b-1wyzn0dqf4] {
    background-color: var(--state-lifecycle-notstarted-bg);
    color: var(--state-lifecycle-notstarted-fg);
}

/* InProgress — progress: el azul del sistema, y sólo esto */
.ds-badge--status-inprogress[b-1wyzn0dqf4] {
    background-color: var(--state-lifecycle-inprogress-bg);
    color: var(--state-lifecycle-inprogress-fg);
}

/* OnHold — attention: requiere una acción humana */
.ds-badge--status-onhold[b-1wyzn0dqf4] {
    background-color: var(--state-lifecycle-onhold-bg);
    color: var(--state-lifecycle-onhold-fg);
}

/* Completed — success: el verde del sistema, y sólo esto */
.ds-badge--status-completed[b-1wyzn0dqf4] {
    background-color: var(--state-lifecycle-completed-bg);
    color: var(--state-lifecycle-completed-fg);
}

/* Cancelled — danger */
.ds-badge--status-cancelled[b-1wyzn0dqf4] {
    background-color: var(--state-lifecycle-cancelled-bg);
    color: var(--state-lifecycle-cancelled-fg);
}
/* _content/MtmpProjectsPoc.Web/Components/ProjectTechnicalSheet.razor.rz.scp.css */
/*
    ProjectTechnicalSheet.razor.css
    ================================
    Styles for the Project Technical Sheet (Ficha Técnica) component.
    Uses Medtronic design system variables where applicable.
*/

.project-technical-sheet[b-59dte1xoan] {
    background: var(--surface-default);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
}

.project-technical-sheet:hover[b-59dte1xoan] {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Header Bar */
.technical-sheet-header[b-59dte1xoan] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(to right, var(--surface-subtle), var(--surface-default));
    border-bottom: 1px solid var(--border-default);
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.technical-sheet-header:hover[b-59dte1xoan] {
    background: linear-gradient(to right, var(--surface-sunken), var(--surface-subtle));
}

.project-technical-sheet.collapsed .technical-sheet-header[b-59dte1xoan] {
    border-radius: 8px;
    border-bottom: none;
}

.collapsed-summary[b-59dte1xoan] {
    font-style: italic;
    max-width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Body */
.technical-sheet-body[b-59dte1xoan] {
    padding: 1rem;
    animation: fadeIn-b-59dte1xoan 0.2s ease;
}

@keyframes fadeIn-b-59dte1xoan {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Field Items - COMPACT (No card appearance) */
.field-item[b-59dte1xoan] {
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    transition: all 0.2s ease;
}

.field-item:hover[b-59dte1xoan] {
    background: transparent;
    border: none;
}

.field-item.editable:hover[b-59dte1xoan] {
    border: none;
    background: transparent;
}

.field-item.secondary[b-59dte1xoan] {
    background: transparent;
}

.field-item.tertiary[b-59dte1xoan] {
    background: transparent;
    border: none;
}

/* Field Label - COMPACT */
.field-label[b-59dte1xoan] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-strong);
    margin-bottom: 2px;
}

.field-icon[b-59dte1xoan] {
    font-size: 0.875rem;
}

/* Field Value - COMPACT */
.field-value[b-59dte1xoan] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong);
    word-break: break-word;
}

.field-value.text-muted[b-59dte1xoan] {
    color: var(--text-weakest) !important;
    font-style: italic;
}

/* Editable Field Input */
.field-input[b-59dte1xoan] {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-strong);
    width: 100%;
}

.field-input:focus[b-59dte1xoan] {
    outline: none;
    box-shadow: none;
    background: var(--surface-default);
    border-radius: 4px;
    padding: 0.25rem;
    margin: -0.25rem;
    border: 1px solid var(--action-primary);
}

/* Compact Mode (Create Project) */
.project-technical-sheet.compact-mode[b-59dte1xoan] {
    background: var(--state-success-bg);
    border-color: var(--state-success-bg);
}

.project-technical-sheet.compact-mode .technical-sheet-header[b-59dte1xoan] {
    background: linear-gradient(to right, var(--state-success-bg), var(--state-success-bg));
}

.project-technical-sheet.compact-mode .field-item[b-59dte1xoan] {
    background: rgba(255, 255, 255, 0.7);
}

/* Skeleton Loaders */
.skeleton[b-59dte1xoan] {
    background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--border-default) 50%, var(--surface-sunken) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-59dte1xoan 1.5s infinite;
    border-radius: 4px;
}

.skeleton-text[b-59dte1xoan] {
    height: 14px;
}

@keyframes skeleton-loading-b-59dte1xoan {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .technical-sheet-header[b-59dte1xoan] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .collapsed-summary[b-59dte1xoan] {
        display: none;
    }

    .field-item[b-59dte1xoan] {
        padding: 0.5rem;
    }

    .field-label[b-59dte1xoan] {
        font-size: 0.65rem;
    }

    .field-value[b-59dte1xoan] {
        font-size: 0.875rem;
    }
}

/* Sticky behavior (for ProjectDetail integration) */
.project-technical-sheet.sticky[b-59dte1xoan] {
    position: sticky;
    top: 60px;
    z-index: 100;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .project-technical-sheet.sticky[b-59dte1xoan] {
        position: static;
    }
}

/* ========== UNIFIED STYLES (UX Unification Sprint) ========== */

/* Mode Indicators (Left Border) */
.project-technical-sheet.unified.mode-editable[b-59dte1xoan] {
    border-left: 4px solid var(--state-success-accent); /* Green for editable */
}

.project-technical-sheet.unified.mode-readonly[b-59dte1xoan] {
    border-left: 4px solid var(--text-weakest); /* Gray for readonly */
}

.project-technical-sheet.unified.mode-mixed[b-59dte1xoan] {
    border-left: 4px solid var(--action-primary); /* Cyan for mixed */
}

/* ========== HERO FIELDS SECTION - COMPACT ========== */

.hero-fields-section[b-59dte1xoan] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-default);
    background: transparent;
}

.hero-fields-grid[b-59dte1xoan] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 1024px) {
    .hero-fields-grid[b-59dte1xoan] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .hero-fields-grid[b-59dte1xoan] {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
}

/* ========== EXPANDED FIELDS SECTION - COMPACT ========== */

.expanded-fields-section[b-59dte1xoan] {
    padding: 10px 12px;
}

.field-category-header[b-59dte1xoan] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0 2px 0;
    margin-top: 8px;
    border-bottom: none; /* Remove border */
    font-size: 13px;
    font-weight: 600;
    text-transform: none; /* Remove uppercase */
    letter-spacing: normal;
    color: var(--text-strong);
}

.field-category-header:first-child[b-59dte1xoan] {
    margin-top: 0;
}

.field-category-header .category-icon[b-59dte1xoan] {
    font-size: 14px;
}

.field-category-header.readonly-category[b-59dte1xoan] {
    color: var(--text-weakest);
}

.field-category-header.readonly-category[b-59dte1xoan]::after {
    content: "(Solo lectura)";
    font-weight: 500;
    font-size: 11px;
    font-style: normal;
    margin-left: auto;
    opacity: 0.7;
}

/* H-20 — secciones por equipo que todavía no tienen campos. Se atenúan para que se lean como un
   cajón disponible y no compitan con las que sí traen información. */
.field-category-header.empty-category[b-59dte1xoan] {
    color: var(--text-weakest);
}

.field-category-empty[b-59dte1xoan] {
    padding: 2px 0 6px 20px;
    font-size: 12px;
    color: var(--text-weakest);
    font-style: italic;
}

/* Field Grid in Expanded Section */
.expanded-fields-section .field-grid[b-59dte1xoan] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 8px;
}

@media (max-width: 1024px) {
    .expanded-fields-section .field-grid[b-59dte1xoan] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .expanded-fields-section .field-grid[b-59dte1xoan] {
        grid-template-columns: 1fr;
    }
}

/* ========== SECTION DIVIDER ========== */

.field-section-divider[b-59dte1xoan] {
    height: 1px;
    margin: 12px 0;
    background: linear-gradient(90deg, transparent, var(--border-default) 20%, var(--border-default) 80%, transparent);
}

/* ========== SHOW MORE BUTTON (Updated) ========== */

.btn-show-more[b-59dte1xoan] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--action-primary);
    background: transparent;
    border: 1px solid var(--action-primary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-show-more:hover[b-59dte1xoan] {
    background-color: rgba(14, 165, 233, 0.08);
}

.btn-show-more.expanded[b-59dte1xoan] {
    background-color: rgba(14, 165, 233, 0.08);
}

/* ========== HEADER UPDATES ========== */

.project-technical-sheet.unified .technical-sheet-header[b-59dte1xoan] {
    padding: 12px 16px;
}

.project-technical-sheet.unified .header-content[b-59dte1xoan] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.project-technical-sheet.unified .header-content h6[b-59dte1xoan] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-strong);
}

.header-actions[b-59dte1xoan] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.expand-icon[b-59dte1xoan] {
    font-size: 12px;
    color: var(--text-weakest);
    transition: transform 0.2s ease;
}

.project-technical-sheet.collapsed .expand-icon[b-59dte1xoan] {
    transform: rotate(0deg);
}

/* ========== EMPTY STATE ========== */

.empty-state[b-59dte1xoan] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    color: var(--text-weakest);
}

.empty-state .oi[b-59dte1xoan] {
    font-size: 24px;
    margin-bottom: 8px;
    opacity: 0.5;
}

.empty-state p[b-59dte1xoan] {
    margin: 0 0 4px 0;
    font-weight: 500;
}

.empty-state small[b-59dte1xoan] {
    font-size: 12px;
    opacity: 0.8;
}

/* ========== SKELETON FIELDS ========== */

.skeleton-field[b-59dte1xoan] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface-subtle);
    border-radius: 6px;
}

.skeleton-label[b-59dte1xoan] {
    width: 60%;
    height: 10px;
}

.skeleton-value[b-59dte1xoan] {
    width: 80%;
    height: 16px;
}

/* ========== REDUCED MOTION ========== */

@media (prefers-reduced-motion: reduce) {
    .project-technical-sheet[b-59dte1xoan],
    .hero-fields-grid[b-59dte1xoan],
    .btn-show-more[b-59dte1xoan],
    .expand-icon[b-59dte1xoan] {
        transition: none;
    }

    .technical-sheet-body[b-59dte1xoan] {
        animation: none;
    }
}

/* ========== PRINT STYLES ========== */

@media print {
    .project-technical-sheet.unified[b-59dte1xoan] {
        border: 1px solid var(--text-strong);
        border-left-width: 4px;
        box-shadow: none;
    }

    .btn-show-more[b-59dte1xoan],
    .expand-icon[b-59dte1xoan] {
        display: none;
    }

    .hero-fields-grid[b-59dte1xoan],
    .expanded-fields-section .field-grid[b-59dte1xoan] {
        display: block;
    }
}
/* _content/MtmpProjectsPoc.Web/Components/Tasks/AddAdHocTaskModal.razor.rz.scp.css */
/*
  Rediseño del alta de tarea ad-hoc (2026-08-25).

  Todo consume var(--token) del sistema de diseño; cero #hex. El diálogo NO estrena tamaño ni
  variante de DsModal: usa el "lg" que el primitivo ya define (min(920px, 96vw)).
*/

/* ── Panel de contexto ─────────────────────────────────────────────────────────────────── */

.adhoc-context[b-h4oh1dgwmw] {
  background: var(--bg-light);
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  font-size: var(--font-size-sm);
  height: 100%;
}

.adhoc-context__heading[b-h4oh1dgwmw] {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.adhoc-context__heading + *[b-h4oh1dgwmw] {
  margin-top: 0;
}

.adhoc-context__heading:not(:first-child)[b-h4oh1dgwmw] {
  margin-top: var(--spacing-md);
}

.adhoc-context__phase[b-h4oh1dgwmw] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin: 0 0 var(--spacing-sm);
}

.adhoc-context__phase-name[b-h4oh1dgwmw] {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.adhoc-context__list[b-h4oh1dgwmw] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-xs) var(--spacing-sm);
  margin: 0;
}

.adhoc-context__list dt[b-h4oh1dgwmw] {
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
}

.adhoc-context__list dd[b-h4oh1dgwmw] {
  margin: 0;
  color: var(--text-primary);
}

.adhoc-context__empty[b-h4oh1dgwmw],
.adhoc-context__legend[b-h4oh1dgwmw],
.adhoc-context__note[b-h4oh1dgwmw] {
  margin: var(--spacing-xs) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.adhoc-context__note[b-h4oh1dgwmw] {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-color-light);
}

.adhoc-context__chips[b-h4oh1dgwmw] {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin: 0;
  padding: 0;
}

.adhoc-part-chip[b-h4oh1dgwmw] {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-white);
  font-size: var(--font-size-xs);
  color: var(--text-primary);
  white-space: nowrap;
}

/* Atenuadas: las partes que la selección actual DEJA fuera. */
.adhoc-part-chip.is-dimmed[b-h4oh1dgwmw] {
  opacity: 0.45;
}

.adhoc-part-chip--more[b-h4oh1dgwmw] {
  border-style: dashed;
  color: var(--text-secondary);
}

.adhoc-part-chip__star[b-h4oh1dgwmw] {
  color: var(--status-warning);
}

/* ── "Applies to" como tarjetas ────────────────────────────────────────────────────────── */

.adhoc-scope__cards[b-h4oh1dgwmw] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--spacing-sm);
}

.adhoc-scope-card[b-h4oh1dgwmw] {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "radio title"
    "radio hint";
  gap: 2px var(--spacing-sm);
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-md);
  background: var(--bg-white);
  cursor: pointer;
}

/*
  El indicador lo dibuja el CSS desde .is-selected — una sola fuente de verdad para el resaltado de
  la tarjeta y para el punto. El <input type="radio"> va oculto (visually-hidden) pero sigue siendo
  enfocable y operable con flechas, que es lo que lo hace accesible y lo que leen las pruebas.
*/
.adhoc-scope-card__dot[b-h4oh1dgwmw] {
  grid-area: radio;
  align-self: start;
  margin-top: 3px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-color-dark);
  border-radius: var(--radius-round);
  background: var(--bg-white);
  box-sizing: border-box;
}

.adhoc-scope-card.is-selected .adhoc-scope-card__dot[b-h4oh1dgwmw] {
  border-color: var(--med-blue-primary);
  box-shadow: inset 0 0 0 4px var(--med-blue-primary);
}

.adhoc-scope-card.is-disabled .adhoc-scope-card__dot[b-h4oh1dgwmw] {
  border-color: var(--border-color);
  background: var(--bg-light);
}

.adhoc-scope-card__title[b-h4oh1dgwmw] {
  grid-area: title;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.adhoc-scope-card__hint[b-h4oh1dgwmw] {
  grid-area: hint;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.adhoc-scope-card.is-selected[b-h4oh1dgwmw] {
  border-color: var(--med-blue-primary);
  background: color-mix(in srgb, var(--med-blue-primary) 8%, transparent);
}

.adhoc-scope-card.is-disabled[b-h4oh1dgwmw] {
  cursor: not-allowed;
  background: var(--bg-light);
  color: var(--text-secondary);
}

.adhoc-scope-card:focus-within[b-h4oh1dgwmw] {
  outline: 2px solid var(--med-blue-interactive);
  outline-offset: 2px;
}

.adhoc-parts__list[b-h4oh1dgwmw] {
  max-height: 148px;
  overflow-y: auto;
  padding-left: var(--spacing-lg);
}

/*
  Casillas del bloque de partes. Misma regla que las tarjetas de alcance: lo que se ve lo dibuja el
  CSS desde el estado de Blazor (.is-checked / .is-mixed) y el <input> nativo va oculto pero
  enfocable. Una sola fuente de verdad para lo pintado y lo seleccionado.
*/
.adhoc-check[b-h4oh1dgwmw] {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin: 0;
  padding: 3px 0;
  cursor: pointer;
}

.adhoc-check--all[b-h4oh1dgwmw] {
  font-weight: var(--font-weight-semibold);
}

.adhoc-check__box[b-h4oh1dgwmw] {
  flex: none;
  margin-top: 2px;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1px solid var(--border-color-dark);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  position: relative;
}

.adhoc-check.is-checked .adhoc-check__box[b-h4oh1dgwmw],
.adhoc-check.is-mixed .adhoc-check__box[b-h4oh1dgwmw] {
  border-color: var(--med-blue-primary);
  background: var(--med-blue-primary);
}

/* La palomita, dibujada con dos bordes girados: sin imagen ni fuente de íconos. */
.adhoc-check.is-checked .adhoc-check__box[b-h4oh1dgwmw]::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid var(--bg-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Parcial: ni marcado ni vacío. Un guion dice "algunas", que es la verdad. */
.adhoc-check.is-mixed .adhoc-check__box[b-h4oh1dgwmw]::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 8px;
  height: 2px;
  background: var(--bg-white);
}

.adhoc-check:focus-within .adhoc-check__box[b-h4oh1dgwmw] {
  outline: 2px solid var(--med-blue-interactive);
  outline-offset: 2px;
}

.adhoc-check__label[b-h4oh1dgwmw] {
  line-height: var(--line-height-normal);
}

/* ── Campos ────────────────────────────────────────────────────────────────────────────── */

/*
  Crece con el contenido, de 2 a 6 filas, sin JavaScript. Los navegadores sin field-sizing se
  quedan en las 2 filas del atributo rows y hacen scroll interno: degradación, no ruptura.
*/
.adhoc-description[b-h4oh1dgwmw] {
  field-sizing: content;
  min-height: calc(2 * var(--line-height-normal) * 1em + 12px);
  max-height: calc(6 * var(--line-height-normal) * 1em + 12px);
  overflow-y: auto;
}

.adhoc-date-actions[b-h4oh1dgwmw] {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: 2px;
}

.adhoc-date-actions .btn-link[b-h4oh1dgwmw] {
  padding: 0;
}

/*
  Bootstrap atenúa .btn:disabled con opacidad, pero el tema del producto repinta .btn-link con un
  color propio y el enlace muerto seguía viéndose vivo. Aquí se dice explícito.
*/
.adhoc-date-actions .btn-link:disabled[b-h4oh1dgwmw] {
  color: var(--text-tertiary);
  text-decoration: none;
  cursor: not-allowed;
  opacity: 1;
}

.adhoc-warning[b-h4oh1dgwmw] {
  margin-top: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-left: 3px solid var(--status-warning);
  background: var(--status-warning-bg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--text-primary);
}

.adhoc-name-count[b-h4oh1dgwmw] {
  text-align: right;
}

.adhoc-name-count--full[b-h4oh1dgwmw] {
  color: var(--status-error);
}

/* ── Pie y franja de descarte ──────────────────────────────────────────────────────────── */

.adhoc-preview[b-h4oh1dgwmw] {
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/*
  La confirmación ocupa el pie completo. Va tintada para que se lea como una interrupción y no como
  la barra de acciones de siempre, pero sin la caja de un `alert`: el pie ya es una caja.
*/
.adhoc-discard-bar[b-h4oh1dgwmw] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1 1 auto;
  min-width: 0;
  margin: calc(var(--spacing-md) * -1) calc(var(--spacing-lg) * -1);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--status-warning-bg);
  border-left: 4px solid var(--status-warning);
}

.adhoc-discard-bar__question[b-h4oh1dgwmw] {
  margin-right: auto;
  min-width: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.adhoc-discard-bar__icon[b-h4oh1dgwmw] {
  margin-right: var(--spacing-xs);
  color: var(--status-warning);
}

/* Los dos botones no se parten en dos renglones cuando el pie se angosta. */
.adhoc-discard-bar .btn[b-h4oh1dgwmw] {
  flex: none;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .adhoc-context[b-h4oh1dgwmw] {
    height: auto;
  }

  .adhoc-scope__cards[b-h4oh1dgwmw] {
    grid-template-columns: 1fr;
  }
}
/* _content/MtmpProjectsPoc.Web/Components/Tasks/TaskList.razor.rz.scp.css */
/* Task List Styles - Epic 23: Task Execution & Tracking */

.task-list[b-1gliz8c3in] {
    border: 1px solid var(--border-default);
    border-radius: 0.375rem;
    background: var(--surface-default);
}

.task-list-item[b-1gliz8c3in] {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--surface-sunken);
    transition: background-color 0.15s ease-in-out;
}

.task-list-item:last-child[b-1gliz8c3in] {
    border-bottom: none;
}

.task-list-item:hover[b-1gliz8c3in] {
    background-color: var(--surface-sunken);
}

/* Status-based styling */
.task-completed[b-1gliz8c3in] {
    background-color: var(--state-success-bg);
}

.task-completed .task-name[b-1gliz8c3in] {
    text-decoration: line-through;
    color: var(--text-weak);
}

.task-skipped[b-1gliz8c3in] {
    background-color: var(--surface-subtle);
}

.task-skipped .task-name[b-1gliz8c3in] {
    color: var(--text-weak);
    font-style: italic;
}

.task-overdue[b-1gliz8c3in] {
    background-color: var(--state-danger-bg);
}

.task-pending[b-1gliz8c3in] {
    background-color: var(--surface-default);
}

/* Checkbox area */
.task-checkbox[b-1gliz8c3in] {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.task-complete-checkbox[b-1gliz8c3in] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.task-complete-checkbox:disabled[b-1gliz8c3in] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Status icons */
.status-icon[b-1gliz8c3in] {
    font-size: 1.2rem;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.status-icon.completed[b-1gliz8c3in] {
    color: var(--state-success-accent);
    background-color: var(--state-success-bg);
}

.status-icon.skipped[b-1gliz8c3in] {
    color: var(--text-weak);
    background-color: var(--border-default);
}

/* Task name */
.task-name[b-1gliz8c3in] {
    font-weight: 500;
    padding-right: 1rem;
}

/* Dates */
.task-dates[b-1gliz8c3in] {
    width: 120px;
    text-align: center;
}

/* Assignment */
.task-assignment[b-1gliz8c3in] {
    width: 120px;
    text-align: center;
}

/* Status badge */
.task-status[b-1gliz8c3in] {
    width: 100px;
    text-align: center;
}

/* Actions */
.task-actions[b-1gliz8c3in] {
    width: 140px;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Processing overlay */
.task-processing-overlay[b-1gliz8c3in] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Header and footer */
.task-list-header[b-1gliz8c3in],
.task-list-footer[b-1gliz8c3in] {
    font-size: 0.875rem;
}

/* Progress bar in footer */
.task-list-footer .progress[b-1gliz8c3in] {
    background-color: var(--border-default);
}

/* Feedback 2026-08-03 — skip masivo como menú desplegable: un disparador, N opciones.
   Las opciones viven siempre en el DOM (los tests y los handlers no cambian); el estado
   abierto/cerrado es solo presentación. */
.task-bulk-skip-menu[b-1gliz8c3in] {
    position: relative;
}

.task-bulk-skip-menu__items[b-1gliz8c3in] {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 100;
    min-width: 320px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--surface-default);
    border: 1px solid var(--border-default);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.25rem;
}

.task-bulk-skip-menu--open .task-bulk-skip-menu__items[b-1gliz8c3in] {
    display: block;
}

.task-bulk-skip-button[b-1gliz8c3in] {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 0.375rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.8125rem;
    cursor: pointer;
    white-space: nowrap;
}

.task-bulk-skip-button:hover[b-1gliz8c3in] {
    background: var(--surface-sunken);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .task-list-item[b-1gliz8c3in] {
        flex-wrap: wrap;
    }

    .task-dates[b-1gliz8c3in],
    .task-assignment[b-1gliz8c3in] {
        display: none;
    }

    .task-name[b-1gliz8c3in] {
        flex: 1 1 calc(100% - 40px - 100px - 140px);
    }
}

/*
  Feedback 2026-08-26 — el alta al nivel de la parte.

  Compacto A PROPÓSITO: la banda de parte ya tiene su altura y este botón no puede crecerla. Por eso
  es de ícono (22px, el mismo alto que el texto del skip que lo acompaña) y su nombre completo vive
  en el `title`/`aria-label`, no en una etiqueta que ensancharía la banda.
*/
.task-part-group-actions[b-1gliz8c3in] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.task-part-add-btn[b-1gliz8c3in] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--border-color, #E0E0E0);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-white, #fff);
    color: var(--med-blue-primary, #170F5F);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.task-part-add-btn:hover[b-1gliz8c3in] {
    background: var(--bg-light, #F8F9FA);
    border-color: var(--med-blue-primary, #170F5F);
}

.task-part-add-btn:focus-visible[b-1gliz8c3in] {
    outline: 2px solid var(--med-blue-interactive, #0F6BB5);
    outline-offset: 1px;
}
/* _content/MtmpProjectsPoc.Web/Components/Tasks/TaskListItem.razor.rz.scp.css */
/* TaskListItem scoped styles - Epic 23: Task Execution & Tracking */

.task-list-item[b-z4x4ig2xhh] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-default);
    background: var(--surface-default);
    transition: background-color 0.15s ease;
    min-height: 56px;
    position: relative;
}

.task-list-item:hover[b-z4x4ig2xhh] {
    background: var(--surface-sunken);
}

/* #681: FB2-S1 reemplazo el checkbox por un selector de 3 estados, pero la celda que lo
   contiene (.task-checkbox-cell) y el selector mismo nunca recibieron reglas. Sin
   flex-shrink:0 ni min-width, el selector competia con .task-name-cell (flex:1) y con un
   nombre de tarea largo se aplastaba a ~20px, ilegible — y su flecha nativa quedaba
   flotando suelta, que es el "cuadrito" reportado.
   La regla .task-checkbox de mas abajo es CSS muerto: esa clase ya no existe en el markup. */
.task-checkbox-cell[b-z4x4ig2xhh] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-right: 12px;
}

/* #778 — el ancho ya no se declara aquí: lo reserva la celda
   (`task-execution-compact-2026.css`, `.task-list-item > div:first-child`, 140px) y el control la
   llena. Clavar 140px de mínimo Y de máximo en el control mientras la celda medía 24px es lo que
   lo hacía desbordar por los dos lados. */
.task-status-select[b-z4x4ig2xhh] {
    width: 100%;
    min-width: 0;
    padding: 4px 8px;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid var(--border-default);
    border-radius: 4px;
    background-color: var(--surface-default);
    color: var(--text-strong);
    cursor: pointer;
}

.task-status-select:disabled[b-z4x4ig2xhh] {
    background-color: var(--border-default);
    cursor: not-allowed;
}

/* N-01 — el marcado emitía `task-status-blocked` y `task-blocked-icon` y NINGUNA de las dos
   existía en hoja alguna del repositorio (verificado con grep sobre wwwroot/, Components/ y
   Pages/): cero reglas, dos usos. Consecuencia: el único portador visual del bloqueo era el
   emoji 🔒, y el desplegable de estado se veía idéntico a uno no bloqueado.
   Se pintan con el dominio de tarea, donde `blocked` es ATTENTION y no DANGER — bloqueado no es
   un error, es una precondición no cumplida. */
.task-status-select.task-status-blocked[b-z4x4ig2xhh] {
    border-color: var(--state-task-blocked-accent);
    background-color: var(--state-task-blocked-bg);
    color: var(--state-task-blocked-fg);
}

.task-blocked-icon[b-z4x4ig2xhh] {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: var(--state-task-blocked-accent);
    font-size: 13px;
    line-height: 1;
}

/* La rama Skipped no necesita reclamar ancho propio: la celda ya lo reserva (#778), así que la
   fila no salta al cambiar de estado aunque el ⊘ mida menos que el desplegable. */
.task-status-icon[b-z4x4ig2xhh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-weak);
}

.task-list-item.task-completed[b-z4x4ig2xhh] {
    background: var(--state-success-bg);
}

.task-list-item.task-completed .task-name span[b-z4x4ig2xhh] {
    text-decoration: line-through;
    color: var(--text-weak);
}

.task-list-item.task-skipped[b-z4x4ig2xhh] {
    background: var(--surface-subtle);
}

.task-list-item.task-skipped .task-name span[b-z4x4ig2xhh] {
    font-style: italic;
    color: var(--text-weak);
}

.task-list-item.task-overdue[b-z4x4ig2xhh] {
    background: var(--state-danger-bg);
    border-left: 3px solid var(--state-danger-accent);
}

.task-checkbox[b-z4x4ig2xhh] {
    width: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.task-complete-checkbox[b-z4x4ig2xhh] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.task-complete-checkbox:disabled[b-z4x4ig2xhh] {
    cursor: not-allowed;
    opacity: 0.5;
}

.status-icon[b-z4x4ig2xhh] {
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.status-icon.completed[b-z4x4ig2xhh] {
    color: var(--state-success-accent);
    background: var(--state-success-bg);
}

.status-icon.skipped[b-z4x4ig2xhh] {
    color: var(--text-weak);
    background: var(--border-default);
}

/* #778 — el `padding-right: 16px` venía de cuando el nombre era hijo directo del renglón. Hoy vive
   en `.task-name-cell`, que ya separa con `gap: 8px` de la insignia de calendario; los 16px eran
   16px menos de nombre legible en la columna más apretada del renglón. */
.task-name[b-z4x4ig2xhh] {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-strong);
    min-width: 0;
}

/*
   Feedback 2026-08-26 — la pista con el nombre completo.

   Antes era el `title` nativo. El navegador lo muestra a los ~1.5 s y ese retardo no se puede
   configurar desde la página; recorriendo una lista de diez tareas para encontrar una, eso es
   inservible. Esta versión aparece a los 150 ms.

   El envoltorio existe porque `.task-name` recorta con `overflow: hidden` y ahí dentro cualquier
   pista se cortaría a sí misma. El envoltorio no recorta; el hijo sí.
*/
.task-name-tip[b-z4x4ig2xhh] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    /* Explícito aunque el DIV ya esquiva la regla global: si mañana alguien lo vuelve span, esto
       deja el síntoma a la vista en vez de apagar la pista en silencio. */
    overflow: visible;
}

/*
   🔴 SIN ESTA REGLA NO SE VE NADA — y es exactamente lo que pasó el 2026-08-26.

   `.pc2-card .task-name-cell` recorta con `overflow: hidden`
   (`wwwroot/css/project-detail-hero-2026.css:791`), y una capa posicionada NO puede escaparse de un
   ancestro que recorta: la pista se dibujaba dentro de una caja del alto del renglón y del ancho de
   la columna, o sea invisible. El `title` nativo sí se salía porque no es parte de la página.

   El clip se levanta SOLO mientras el cursor está sobre el nombre, así que en reposo la celda se
   comporta igual que siempre y ningún distintivo se derrama sobre la columna de fechas. El recorte
   con puntos suspensivos no depende de esto: lo hace el propio `.task-name`.
*/
.task-name-cell:has(.task-name-tip:hover)[b-z4x4ig2xhh] {
    overflow: visible;
}

.task-name-tip[b-z4x4ig2xhh]::after {
    content: attr(data-full-name);
    position: absolute;
    left: 0;
    top: calc(50% + 12px);
    z-index: 20;
    width: max-content;
    max-width: 420px;
    padding: 4px 8px;
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-dark, #212529);
    color: var(--text-inverse, #fff);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    white-space: normal;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 30, 70, 0.1));
    opacity: 0;
    pointer-events: none;
    transition: opacity 90ms ease-in;
    transition-delay: 150ms;
}

.task-name-tip:hover[b-z4x4ig2xhh]::after {
    opacity: 1;
}

/* Al salir se va sin retardo: quedarse pegada estorba más de lo que informa. */
.task-name-tip:not(:hover)[b-z4x4ig2xhh]::after {
    transition-delay: 0s;
}

/*
   `.task-list` recorta con `overflow: hidden` (task-execution-compact-2026.css), así que en el
   último renglón una pista colgada hacia abajo se cortaría. Ahí se voltea hacia arriba.
*/
.task-list-item:last-child .task-name-tip[b-z4x4ig2xhh]::after {
    top: auto;
    bottom: calc(50% + 12px);
}

.task-dates[b-z4x4ig2xhh] {
    width: 120px;
    flex-shrink: 0;
    text-align: center;
}

.task-assignment[b-z4x4ig2xhh] {
    width: 120px;
    flex-shrink: 0;
    text-align: center;
}

.task-status[b-z4x4ig2xhh] {
    width: 100px;
    flex-shrink: 0;
    text-align: center;
}

.task-actions[b-z4x4ig2xhh] {
    width: 140px;
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Feedback 2026-08-13 (Iván) — el aro de espera de una tarea salía enorme. La causa venía de fuera
   (una regla global sin acotar en create-project-enhanced.css, ya corregida), pero el tamaño de un
   indicador que vive DENTRO de un renglón de 40px no puede depender de qué hoja global gane: se fija
   aquí, en el CSS del componente, que va acotado a este elemento y nadie de fuera puede pisar. */
.task-processing-overlay[b-z4x4ig2xhh] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Antes 0.8: tapaba el renglón casi por completo para una espera que dura un parpadeo. */
    background: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.task-processing-overlay .spinner-border[b-z4x4ig2xhh] {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

/* Date Display (Read-only) */
.task-date-display[b-z4x4ig2xhh] {
    font-size: 12px;
    color: var(--text-secondary, var(--text-weak));
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

.task-date-display .date-separator[b-z4x4ig2xhh] {
    color: var(--medtronic-gray-light, var(--text-weakest));
}

.task-date-display .completed-indicator[b-z4x4ig2xhh] {
    color: var(--status-success, var(--state-success-accent));
}

.task-date-display .skipped-indicator[b-z4x4ig2xhh] {
    color: var(--status-neutral, var(--text-weak));
}

/* Date Edit Inline */
.date-edit-inline[b-z4x4ig2xhh] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
    position: relative;
}

.date-input-inline[b-z4x4ig2xhh] {
    width: 110px;
    padding: 4px 8px;
    font-size: 12px;
    font-family: inherit;
    color: var(--text-primary, var(--text-strong));
    background: var(--surface-default);
    border: 1px solid var(--medtronic-gray-lighter, var(--border-strong));
    border-radius: var(--radius-sm, 4px);
    transition: all 0.15s ease;
}

.date-input-inline:hover[b-z4x4ig2xhh] {
    border-color: var(--medtronic-gray-light, var(--text-weakest));
}

.date-input-inline:focus[b-z4x4ig2xhh] {
    outline: none;
    border-color: var(--medtronic-blue-interactive, var(--action-primary));
    box-shadow: 0 0 0 2px rgba(16, 16, 235, 0.15);
}

.date-input-inline.error[b-z4x4ig2xhh] {
    border-color: var(--status-error, var(--state-danger-accent));
    background: rgba(220, 53, 69, 0.05);
}

.date-input-inline.error:focus[b-z4x4ig2xhh] {
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
}

.date-input-inline:disabled[b-z4x4ig2xhh] {
    background: var(--medtronic-gray-lightest, var(--surface-sunken));
    color: var(--medtronic-gray-medium, var(--text-weak));
    cursor: not-allowed;
    opacity: 0.7;
}

.date-separator-arrow[b-z4x4ig2xhh] {
    color: var(--medtronic-gray-light, var(--text-weakest));
    font-size: 12px;
    flex-shrink: 0;
}

/* Saving state */
.date-edit-inline.saving[b-z4x4ig2xhh] {
    opacity: 0.7;
    pointer-events: none;
}

.date-edit-inline.saving .date-input-inline[b-z4x4ig2xhh] {
    background: var(--medtronic-gray-lightest, var(--surface-sunken));
}

/* Save indicators */
.date-save-indicator[b-z4x4ig2xhh] {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
}

.date-save-indicator .spinner[b-z4x4ig2xhh] {
    width: 12px;
    height: 12px;
    border: 2px solid var(--medtronic-gray-lighter, var(--border-strong));
    border-top-color: var(--medtronic-blue-interactive, var(--action-primary));
    border-radius: 50%;
    animation: spin-b-z4x4ig2xhh 0.6s linear infinite;
}

.date-save-indicator .success-check[b-z4x4ig2xhh] {
    color: var(--status-success, var(--state-success-accent));
    font-size: 14px;
    animation: fadeInScale-b-z4x4ig2xhh 0.3s ease-out;
}

@keyframes spin-b-z4x4ig2xhh {
    to { transform: rotate(360deg); }
}

@keyframes fadeInScale-b-z4x4ig2xhh {
    from { opacity: 0; transform: translateY(-50%) scale(0.5); }
    to { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* Validation error */
.date-validation-error[b-z4x4ig2xhh] {
    position: absolute;
    bottom: -18px;
    left: 0;
    right: 0;
    font-size: 11px;
    color: var(--status-error, var(--state-danger-accent));
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 992px) {
    .date-edit-inline[b-z4x4ig2xhh] {
        flex-direction: column;
        gap: 4px;
    }

    .date-input-inline[b-z4x4ig2xhh] {
        width: 100%;
    }

    .date-separator-arrow[b-z4x4ig2xhh] {
        display: none;
    }
}

@media (max-width: 768px) {
    .task-list-item[b-z4x4ig2xhh] {
        flex-wrap: wrap;
        padding: 12px;
    }

    .task-dates[b-z4x4ig2xhh],
    .task-assignment[b-z4x4ig2xhh] {
        display: none;
    }

    .task-name[b-z4x4ig2xhh] {
        flex-basis: calc(100% - 180px);
    }
}

/* Story 8.7 — derived 5-state task schedule-health chip (replaces the binary overdue badge).
   Light bg + dark text for AA contrast (>= 4.5:1); palette matches Story 8.6's chips. */
.task-schedule-badge[b-z4x4ig2xhh] {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
    vertical-align: middle;
}
/* C-28 — estas seis líneas estaban copiadas CARÁCTER POR CARÁCTER en dos archivos
   (`tracker-view.css` y `Components/Tasks/TaskListItem.razor.css`): la misma familia de salud de
   calendario, mantenida a mano por duplicado. Ahora las dos apuntan al mismo dominio del
   diccionario, así que un cambio de paleta las mueve juntas. */
.task-schedule-badge.schedule-completed[b-z4x4ig2xhh]   { background: var(--state-schedule-completed-bg);   color: var(--state-schedule-completed-fg);   border-color: var(--state-schedule-completed-accent); }
.task-schedule-badge.schedule-ontrack[b-z4x4ig2xhh]     { background: var(--state-schedule-ontrack-bg);     color: var(--state-schedule-ontrack-fg);     border-color: var(--state-schedule-ontrack-accent); }
.task-schedule-badge.schedule-atrisk[b-z4x4ig2xhh]      { background: var(--state-schedule-atrisk-bg);      color: var(--state-schedule-atrisk-fg);      border-color: var(--state-schedule-atrisk-accent); }
.task-schedule-badge.schedule-offtrack[b-z4x4ig2xhh]    { background: var(--state-schedule-offtrack-bg);    color: var(--state-schedule-offtrack-fg);    border-color: var(--state-schedule-offtrack-accent); }
.task-schedule-badge.schedule-notstarted[b-z4x4ig2xhh]  { background: var(--state-schedule-notstarted-bg);  color: var(--state-schedule-notstarted-fg);  border-color: var(--state-schedule-notstarted-accent); }
.task-schedule-badge.schedule-unscheduled[b-z4x4ig2xhh] { background: var(--state-schedule-unscheduled-bg); color: var(--state-schedule-unscheduled-fg); border-color: var(--state-schedule-unscheduled-accent); }
/* _content/MtmpProjectsPoc.Web/Components/Tracker/BulkConfirmationModal.razor.rz.scp.css */
/*
 * Story 11B.17 — the pre-submit bulk confirmation modal renders Bootstrap's `.modal` (which is
 * `display: none` by default, normally toggled visible by Bootstrap's JS that this app does NOT use) plus a
 * bare `.modal-backdrop` (which, without the `.show`/`.fade` classes, renders FULLY-OPAQUE black). With no
 * dedicated CSS, that left an opaque black backdrop covering the whole screen while the dialog itself stayed
 * hidden — a "solid black, unusable screen" the moment the user clicked Save/Confirm (the modal was there but
 * invisible; only JS-driven tests, which ignore `display:none`, ever got past it).
 *
 * This scoped stylesheet fixes it: it dims the backdrop and forces the dialog visible + centered. Scoped
 * component CSS is NOT in the low-priority Bootstrap @layer, so it wins over `.modal { display:none }` without
 * !important. The component has no `.modal-dialog`/`.modal-content` wrapper — its header/body/footer ARE the
 * card, so they are styled directly.
 */

.bulk-confirm-backdrop[b-xdkt6wnmm4] {
    /* Dim instead of opaque black so the dialog reads as a modal, not a blackout. */
    opacity: 0.5;
}

.bulk-confirm-modal[b-xdkt6wnmm4] {
    /* Bootstrap's `.modal` is display:none + position:fixed inset:0 z-index:1055 — force it visible and center
       the dialog card within the fixed overlay. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

/* The header/body/footer form the white dialog card (no .modal-content wrapper in this component). */
.bulk-confirm-modal > .modal-header[b-xdkt6wnmm4],
.bulk-confirm-modal > .modal-body[b-xdkt6wnmm4],
.bulk-confirm-modal > .modal-footer[b-xdkt6wnmm4] {
    width: 100%;
    max-width: 760px;
    background: var(--surface-default);
    padding: 1rem 1.25rem;
    box-sizing: border-box;
}

.bulk-confirm-modal > .modal-header[b-xdkt6wnmm4] {
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.bulk-confirm-modal > .modal-body[b-xdkt6wnmm4] {
    max-height: 60vh;
    overflow-y: auto;
}

.bulk-confirm-modal > .modal-footer[b-xdkt6wnmm4] {
    border-radius: 0 0 8px 8px;
    border-top: 1px solid var(--border-default);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
}
/* _content/MtmpProjectsPoc.Web/Pages/Admin/DmCustomFields.razor.rz.scp.css */
/* DM-01-09 — opt out of dynamic-fields.css global form-check overrides.
 * dynamic-fields.css applies a custom 44x44 touch-target + ::before/::after
 * pseudo-element styling that misaligns labels and overlaps text in standard
 * BS5 modals. Restore native browser rendering for radios + checkboxes here.
 * Same pattern as .phase-check and .active-checkbox in site.css. */

[b-m01cl4pg00] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-m01cl4pg00] input[type="radio"].form-check-input {
    appearance: radio !important;
    -webkit-appearance: radio !important;
    -moz-appearance: radio !important;
    border-radius: 50%;
}

[b-m01cl4pg00] input[type="checkbox"].form-check-input {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    border-radius: 0;
}

[b-m01cl4pg00] .form-check-input::before,
[b-m01cl4pg00] .form-check-input::after {
    content: none !important;
    display: none !important;
}

[b-m01cl4pg00] .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
    outline: none !important;
}

[b-m01cl4pg00] .form-check-input:checked {
    background-color: revert !important;
    border-color: revert !important;
}

[b-m01cl4pg00] .form-check-label {
    cursor: pointer;
    margin-left: 0.25rem;
}

/* dynamic-fields.css:151 forces .form-check to display:flex with padding:0.75rem,
 * which breaks BS5's inline behavior for radio groups. Restore inline-flex for
 * .form-check-inline so the Field Type radios sit side by side. */
[b-m01cl4pg00] .form-check {
    padding: 0 !important;
    justify-content: flex-start !important;
}

[b-m01cl4pg00] .form-check-inline {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 1rem !important;
    padding: 0 !important;
}
/* _content/MtmpProjectsPoc.Web/Pages/Admin/FieldDefinitions.razor.rz.scp.css */
/* Field Definitions Admin Table - Responsive Fit */

/* Sortable header styling */
[b-3r94597e45] .sortable {
    cursor: pointer;
    user-select: none;
}

[b-3r94597e45] .sortable:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Table fits container */
[b-3r94597e45] .admin-table {
    width: 100%;
    table-layout: auto;
}

[b-3r94597e45] .admin-table th,
[b-3r94597e45] .admin-table td {
    vertical-align: middle;
    padding: 0.5rem;
}

/* FIX: Disable hover transforms that cause jumping */
[b-3r94597e45] .admin-table tbody tr {
    transform: none !important;
    transition: background-color 0.15s ease !important;
}

[b-3r94597e45] .admin-table tbody tr:hover {
    transform: none !important;
    box-shadow: none !important;
}

[b-3r94597e45] .admin-table tbody tr:hover td:first-child {
    border-left: none !important;
    padding-left: 0.5rem !important;
}

/* Compact columns */
[b-3r94597e45] .admin-table th:nth-child(1),
[b-3r94597e45] .admin-table td:nth-child(1) {
    width: 70px;
}

[b-3r94597e45] .admin-table th:nth-child(4),
[b-3r94597e45] .admin-table td:nth-child(4) {
    width: 80px;
}

[b-3r94597e45] .admin-table th:nth-child(7),
[b-3r94597e45] .admin-table td:nth-child(7) {
    width: 60px;
}

[b-3r94597e45] .admin-table th:nth-child(8),
[b-3r94597e45] .admin-table td:nth-child(8) {
    width: 60px;
}

[b-3r94597e45] .admin-table th:nth-child(9),
[b-3r94597e45] .admin-table td:nth-child(9) {
    width: 60px;
}

/* Actions column */
[b-3r94597e45] .admin-table th:nth-child(10),
[b-3r94597e45] .admin-table td:nth-child(10) {
    width: 85px;
    min-width: 85px;
}

/* Text overflow for other columns */
[b-3r94597e45] .admin-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}
/* _content/MtmpProjectsPoc.Web/Pages/Admin/PhaseAggregators.razor.rz.scp.css */
/* PhaseAggregators.razor.css - Scoped styles matching PhaseDefinitions */

/* ============================================
   PAGE HEADER
   ============================================ */
.page-header[b-pozpy2uudx] {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-default);
    margin-bottom: 1.5rem;
}

.page-title[b-pozpy2uudx] {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 0.25rem;
}

/* ============================================
   SKELETON LOADER
   ============================================ */
.skeleton[b-pozpy2uudx] {
    background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--surface-sunken) 50%, var(--surface-sunken) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-pozpy2uudx 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-card[b-pozpy2uudx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-default);
}

@keyframes skeleton-shimmer-b-pozpy2uudx {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ============================================
   SUMMARY CARDS (matches PhaseDefinitions)
   ============================================ */
.summary-card[b-pozpy2uudx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-default);
    transition: all 0.2s ease;
    height: 100%;
}

.summary-card:hover[b-pozpy2uudx] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.summary-card-icon[b-pozpy2uudx] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.summary-card-content[b-pozpy2uudx] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.summary-card-value[b-pozpy2uudx] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-strong);
}

.summary-card-label[b-pozpy2uudx] {
    font-size: 0.8rem;
    color: var(--text-weak);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Summary Card Variants */
.summary-card-total .summary-card-icon[b-pozpy2uudx] {
    background-color: var(--selection-bg);
    color: var(--action-primary);
}

.summary-card-required .summary-card-icon[b-pozpy2uudx] {
    background-color: var(--state-success-bg);
    color: var(--state-success-accent);
}

.summary-card-skippable .summary-card-icon[b-pozpy2uudx] {
    background-color: var(--state-attention-bg);
    color: var(--state-attention-fg);
}

.summary-card-projects .summary-card-icon[b-pozpy2uudx] {
    background-color: var(--selection-bg);
    color: var(--status-info);
}

/* ============================================
   SECTION CARD (Table wrapper)
   ============================================ */
.section-card[b-pozpy2uudx] {
    border: 1px solid var(--border-default);
    border-radius: 12px;
    overflow: hidden;
    background: white;
}

.section-header[b-pozpy2uudx] {
    background-color: var(--surface-sunken);
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-default);
}

.section-header h5[b-pozpy2uudx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-strong);
    margin: 0;
}

.section-icon[b-pozpy2uudx] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
}

/* ============================================
   DATA TABLE
   ============================================ */
.table-header[b-pozpy2uudx] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-weak);
    background-color: var(--surface-sunken);
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--border-default);
}

.aggregator-row[b-pozpy2uudx] {
    transition: background-color 0.15s ease;
}

.aggregator-row:hover[b-pozpy2uudx] {
    background-color: var(--surface-sunken);
}

.aggregator-row td[b-pozpy2uudx] {
    padding: 1rem;
    vertical-align: middle;
}

/* Aggregator Name Cell */
.aggregator-name-cell[b-pozpy2uudx] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.aggregator-name-cell strong[b-pozpy2uudx] {
    color: var(--text-strong);
}

.aggregator-name-cell code[b-pozpy2uudx] {
    font-size: 0.75rem;
    color: var(--text-weak);
    background-color: var(--surface-sunken);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

/* Description Cell */
.description-cell[b-pozpy2uudx] {
    max-width: 250px;
    color: var(--text-weak);
    font-size: 0.875rem;
}

/* ============================================
   SKIP BADGE (matches PhaseDefinitions)
   ============================================ */
.skip-badge[b-pozpy2uudx] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.skip-yes[b-pozpy2uudx] {
    background-color: var(--state-success-bg);
    color: var(--state-success-accent);
}

.skip-no[b-pozpy2uudx] {
    background-color: var(--state-danger-bg);
    color: var(--state-danger-accent);
}

/* ============================================
   INFO NOTE
   ============================================ */
.info-note[b-pozpy2uudx] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background-color: var(--selection-bg);
    border: 1px solid var(--selection-bg);
    border-radius: 8px;
}

.info-note-icon[b-pozpy2uudx] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--action-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.info-note-content[b-pozpy2uudx] {
    font-size: 0.875rem;
    color: var(--med-blue-medium);
    line-height: 1.5;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state[b-pozpy2uudx] {
    text-align: center;
    padding: 3rem 2rem;
}

.empty-state-icon[b-pozpy2uudx] {
    font-size: 4rem;
    color: var(--border-default);
    margin-bottom: 1rem;
}

.empty-state h4[b-pozpy2uudx] {
    color: var(--text-weak);
    margin-bottom: 0.5rem;
}

.empty-state p[b-pozpy2uudx] {
    color: var(--text-weak);
    margin-bottom: 1.5rem;
}

/* ============================================
   MODAL STYLES
   ============================================ */
.modal-content[b-pozpy2uudx] {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.modal-header[b-pozpy2uudx] {
    background-color: var(--surface-sunken);
    border-bottom: 1px solid var(--border-default);
    padding: 1rem 1.5rem;
    border-radius: 12px 12px 0 0;
}

.modal-title[b-pozpy2uudx] {
    font-weight: 600;
    color: var(--text-strong);
}

.modal-body[b-pozpy2uudx] {
    padding: 1.5rem;
}

.modal-footer[b-pozpy2uudx] {
    border-top: 1px solid var(--border-default);
    padding: 1rem 1.5rem;
    background-color: var(--surface-sunken);
    border-radius: 0 0 12px 12px;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .summary-card[b-pozpy2uudx] {
        padding: 1rem;
    }

    .summary-card-value[b-pozpy2uudx] {
        font-size: 1.5rem;
    }

    .summary-card-icon[b-pozpy2uudx] {
        width: 40px;
        height: 40px;
    }

    .description-cell[b-pozpy2uudx] {
        max-width: 150px;
    }
}
/* _content/MtmpProjectsPoc.Web/Pages/Admin/PhaseDefinitions.razor.rz.scp.css */
/* PhaseDefinitions.razor.css - Scoped styles for Phase Definitions admin page */

/* ============================================
   PAGE HEADER
   ============================================ */
.page-header[b-slbghtpyz8] {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-default);
    margin-bottom: 1.5rem;
}

.page-title[b-slbghtpyz8] {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 0.25rem;
}

/* ============================================
   SKELETON LOADER
   ============================================ */
.skeleton[b-slbghtpyz8] {
    background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--surface-sunken) 50%, var(--surface-sunken) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-slbghtpyz8 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-card[b-slbghtpyz8] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-default);
}

@keyframes skeleton-shimmer-b-slbghtpyz8 {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ============================================
   SUMMARY CARDS
   ============================================ */
.summary-card[b-slbghtpyz8] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-default);
    transition: all 0.2s ease;
    height: 100%;
}

.summary-card:hover[b-slbghtpyz8] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.summary-card-icon[b-slbghtpyz8] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.summary-card-content[b-slbghtpyz8] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.summary-card-value[b-slbghtpyz8] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-strong);
}

.summary-card-label[b-slbghtpyz8] {
    font-size: 0.8rem;
    color: var(--text-weak);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Summary Card Variants */
.summary-card-total .summary-card-icon[b-slbghtpyz8] {
    background-color: var(--selection-bg);
    color: var(--action-primary);
}

.summary-card-required .summary-card-icon[b-slbghtpyz8] {
    background-color: var(--state-success-bg);
    color: var(--state-success-accent);
}

.summary-card-skippable .summary-card-icon[b-slbghtpyz8] {
    background-color: var(--state-attention-bg);
    color: var(--state-attention-fg);
}

.summary-card-projects .summary-card-icon[b-slbghtpyz8] {
    background-color: var(--selection-bg);
    color: var(--status-info);
}

/* ============================================
   SECTION CARD (Table wrapper)
   ============================================ */
.section-card[b-slbghtpyz8] {
    border: 1px solid var(--border-default);
    border-radius: 12px;
    overflow: hidden;
    background: white;
}

.section-header[b-slbghtpyz8] {
    background-color: var(--surface-sunken);
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-default);
}

.section-header h5[b-slbghtpyz8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-strong);
    margin: 0;
}

.section-icon[b-slbghtpyz8] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
}

/* ============================================
   DATA TABLE
   ============================================ */
.table-header[b-slbghtpyz8] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-weak);
    background-color: var(--surface-sunken);
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--border-default);
}

.phase-row[b-slbghtpyz8] {
    transition: background-color 0.15s ease;
}

.phase-row:hover[b-slbghtpyz8] {
    background-color: var(--surface-sunken);
}

.phase-row td[b-slbghtpyz8] {
    padding: 1rem;
    vertical-align: middle;
}

/* Order Badge */
.order-badge[b-slbghtpyz8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: var(--selection-bg);
    color: var(--action-primary);
    font-weight: 600;
    font-size: 0.875rem;
}

/* Phase Name Cell */
.phase-name-cell[b-slbghtpyz8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.phase-icon[b-slbghtpyz8] {
    font-size: 1.25rem;
}

/* Description Cell */
.description-cell[b-slbghtpyz8] {
    max-width: 300px;
    color: var(--text-weak);
}

/* ============================================
   SKIP BADGE
   ============================================ */
.skip-badge[b-slbghtpyz8] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.skip-yes[b-slbghtpyz8] {
    background-color: var(--state-success-bg);
    color: var(--state-success-accent);
}

.skip-no[b-slbghtpyz8] {
    background-color: var(--state-danger-bg);
    color: var(--state-danger-accent);
}

/* ============================================
   PROJECT COUNT
   ============================================ */
.project-count-badge[b-slbghtpyz8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 0.5rem;
    border-radius: 14px;
    background-color: var(--action-primary);
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
}

.project-count-zero[b-slbghtpyz8] {
    color: var(--border-strong);
    font-weight: 500;
}

/* ============================================
   INFO NOTE
   ============================================ */
.info-note[b-slbghtpyz8] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background-color: var(--selection-bg);
    border: 1px solid var(--selection-bg);
    border-radius: 8px;
}

.info-note-icon[b-slbghtpyz8] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--action-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.info-note-content[b-slbghtpyz8] {
    font-size: 0.875rem;
    color: var(--med-blue-medium);
    line-height: 1.5;
}

/* ============================================
   MODAL STYLES
   ============================================ */
.modal-content[b-slbghtpyz8] {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.modal-header[b-slbghtpyz8] {
    background-color: var(--surface-sunken);
    border-bottom: 1px solid var(--border-default);
    padding: 1rem 1.5rem;
    border-radius: 12px 12px 0 0;
}

.modal-title[b-slbghtpyz8] {
    font-weight: 600;
    color: var(--text-strong);
}

.modal-body[b-slbghtpyz8] {
    padding: 1.5rem;
}

.modal-footer[b-slbghtpyz8] {
    border-top: 1px solid var(--border-default);
    padding: 1rem 1.5rem;
    background-color: var(--surface-sunken);
    border-radius: 0 0 12px 12px;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .summary-card[b-slbghtpyz8] {
        padding: 1rem;
    }

    .summary-card-value[b-slbghtpyz8] {
        font-size: 1.5rem;
    }

    .summary-card-icon[b-slbghtpyz8] {
        width: 40px;
        height: 40px;
    }

    .description-cell[b-slbghtpyz8] {
        max-width: 200px;
    }
}
/* _content/MtmpProjectsPoc.Web/Pages/AnnualEvaluationPlan/Components/CalendarView.razor.rz.scp.css */
/* AEP-07 (2026-07-17): scoped styles for the Calendar view. Uses CSS grid
   for the month layout so the same markup renders identically at every
   breakpoint (mobile stacks are automatic — cells shrink). */

.aep-calendar-card[b-csyou8dz10]  .aep-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.aep-calendar-card[b-csyou8dz10]  .aep-weekday-header {
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.aep-calendar-card[b-csyou8dz10]  .aep-calendar-weekday {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--medtronic-gray-600, var(--text-weak));
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.aep-calendar-card[b-csyou8dz10]  .aep-calendar-cell {
    /* Polish batch 3 (2026-07-20): drop aspect-ratio so cells grow
       vertically for the pill labels; keep a min-height so empty
       days stay comfortable. */
    min-height: 78px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    background: white;
    padding: 4px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.aep-calendar-card[b-csyou8dz10]  .aep-calendar-cell:hover {
    background: rgba(17, 123, 255, 0.06);
    border-color: var(--medtronic-blue-primary, var(--action-primary));
}

.aep-calendar-card[b-csyou8dz10]  .aep-cell-outside {
    background: transparent;
    border: 1px dashed rgba(0, 0, 0, 0.05);
    cursor: default;
    pointer-events: none;
}

.aep-calendar-card[b-csyou8dz10]  .aep-cell-today {
    border-color: var(--medtronic-blue-primary, var(--action-primary));
    background: rgba(17, 123, 255, 0.05);
}

.aep-calendar-card[b-csyou8dz10]  .aep-cell-selected {
    border-color: var(--medtronic-blue-primary, var(--action-primary));
    background: rgba(17, 123, 255, 0.12);
    box-shadow: 0 0 0 2px rgba(17, 123, 255, 0.25);
}

.aep-calendar-card[b-csyou8dz10]  .aep-cell-day-number {
    font-size: 0.85rem;
    font-weight: 500;
}

.aep-calendar-card[b-csyou8dz10]  .aep-cell-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.aep-calendar-card[b-csyou8dz10]  .aep-cell-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--medtronic-gray-400, var(--text-weakest));
}

.aep-calendar-card[b-csyou8dz10]  .aep-dot-closed    { background: var(--medtronic-green,          var(--state-success-accent)); }
.aep-calendar-card[b-csyou8dz10]  .aep-dot-scheduled { background: var(--medtronic-blue-primary,   var(--action-primary)); }
.aep-calendar-card[b-csyou8dz10]  .aep-dot-overdue   { background: var(--medtronic-red,            var(--state-danger-accent)); }
.aep-calendar-card[b-csyou8dz10]  .aep-dot-forecast  {
    background: transparent;
    border: 1.5px dashed var(--medtronic-gray-500, var(--text-weak));
}

/* Polish batch 3: compact colored pills inside each calendar cell.
   Left border in the status color, tinted background, supplier name +
   type stacked. Truncates with ellipsis to keep the 7-col grid tidy. */
.aep-calendar-card[b-csyou8dz10]  .aep-cell-pills {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.aep-calendar-card[b-csyou8dz10]  .aep-cell-pill {
    display: flex;
    flex-direction: column;
    padding: 2px 4px;
    border-radius: 3px;
    border-left: 3px solid var(--medtronic-gray-400, var(--text-weakest));
    background: rgba(0, 0, 0, 0.03);
    line-height: 1.15;
    min-width: 0;
}

.aep-calendar-card[b-csyou8dz10]  .aep-cell-pill-name {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aep-calendar-card[b-csyou8dz10]  .aep-cell-pill-type {
    font-size: 0.6rem;
    color: var(--medtronic-gray-600, var(--text-weak));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aep-calendar-card[b-csyou8dz10]  .aep-cell-pill-closed {
    border-left-color: var(--medtronic-green, var(--state-success-accent));
    background: rgba(46, 204, 113, 0.08);
}

.aep-calendar-card[b-csyou8dz10]  .aep-cell-pill-scheduled {
    border-left-color: var(--medtronic-blue-primary, var(--action-primary));
    background: rgba(17, 123, 255, 0.08);
}

.aep-calendar-card[b-csyou8dz10]  .aep-cell-pill-overdue {
    border-left-color: var(--medtronic-red, var(--state-danger-accent));
    background: rgba(239, 83, 80, 0.08);
}

.aep-calendar-card[b-csyou8dz10]  .aep-cell-pill-forecast {
    border-left-color: var(--medtronic-gray-500, var(--text-weak));
    background: rgba(108, 117, 125, 0.06);
}

.aep-calendar-card[b-csyou8dz10]  .aep-cell-pill-more {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--medtronic-gray-600, var(--text-weak));
    padding: 1px 4px;
}

.aep-calendar-card[b-csyou8dz10]  .aep-selected-day-panel {
    background: var(--medtronic-gray-50, var(--surface-sunken));
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Mobile: bump touch targets a bit; single row is fine because grid stays 7-col. */
@media (max-width: 640px) {
    .aep-calendar-card[b-csyou8dz10]  .aep-calendar-cell {
        min-height: 44px;
        padding: 3px;
    }
    .aep-calendar-card[b-csyou8dz10]  .aep-cell-day-number {
        font-size: 0.75rem;
    }
    .aep-calendar-card[b-csyou8dz10]  .aep-cell-dot {
        width: 6px;
        height: 6px;
    }
}
/* _content/MtmpProjectsPoc.Web/Pages/AnnualEvaluationPlan/Components/KpiHeaderCards.razor.rz.scp.css */
/* Polish batch 1 → refined (2026-07-17): 6 KPI cards with the icon on the
   LEFT of a compact text stack (label / value / sub). Tighter padding and
   smaller type overall — the mockup packs 6 metrics per row without the
   card feeling heavy. */

.aep-kpi-row[b-5ybh2i8jlu]  .aep-kpi-card {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.aep-kpi-row[b-5ybh2i8jlu]  .aep-kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.aep-kpi-row[b-5ybh2i8jlu]  .aep-kpi-card .card-body {
    /* Tighter vertical padding — card now hugs the icon + 3-line stack
       instead of stretching to h-100. */
    padding: 0.5rem 0.75rem;
}

/* Text stack — label / big number / sub */

.aep-kpi-row[b-5ybh2i8jlu]  .aep-kpi-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--medtronic-gray-600, var(--text-weak));
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aep-kpi-row[b-5ybh2i8jlu]  .aep-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-strong);
    margin-top: 2px;
}

.aep-kpi-row[b-5ybh2i8jlu]  .aep-kpi-value-suffix {
    font-size: 0.9rem;
    font-weight: 600;
    margin-left: 2px;
}

.aep-kpi-row[b-5ybh2i8jlu]  .aep-kpi-sub {
    font-size: 0.7rem;
    color: var(--medtronic-gray-600, var(--text-weak));
    line-height: 1.2;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Utility: helps ellipsis clip inside a flex child */
.aep-kpi-row[b-5ybh2i8jlu]  .min-width-0 { min-width: 0; }

/* Round tinted icon — 48x48 on the LEFT (per mockup).
   2026-07-24 icon polish: match Medtronic mockup — near-black icon glyph
   with a hint of the family hue, on a soft same-family tinted background.
   Icon dominates the label (24px SVG in a 48px chip). AppIcon renders
   SVG with fill=currentColor so the icon inherits `color`. */
.aep-kpi-row[b-5ybh2i8jlu]  .aep-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* 2026-07-24 icon polish (pass 4): thicken the outline glyph without
   switching to Fluent's Filled variant. Stacked drop-shadow at 0 offset
   inflates each stroke by ~1px total, keeping the outline character but
   adding visual weight. */
.aep-kpi-row[b-5ybh2i8jlu]  .aep-kpi-icon svg {
    filter:
        drop-shadow(0 0 0.35px currentColor)
        drop-shadow(0 0 0.35px currentColor);
}

/* 2026-07-24 (pass 3): bumped chip 48→56 + icon 24→28 + colors ~30% darker
   again — reads nearly black with just a hint of hue. */
.aep-kpi-row[b-5ybh2i8jlu]  .aep-kpi-icon-primary { color: var(--med-blue-primary); background: rgba(17,  123, 255, 0.14); }
.aep-kpi-row[b-5ybh2i8jlu]  .aep-kpi-icon-info    { color: var(--med-blue-primary); background: rgba(77,  216, 255, 0.14); }
.aep-kpi-row[b-5ybh2i8jlu]  .aep-kpi-icon-success { color: var(--state-success-fg); background: rgba(46,  204, 113, 0.14); }
.aep-kpi-row[b-5ybh2i8jlu]  .aep-kpi-icon-warning { color: var(--state-attention-fg); background: rgba(245, 166,  35, 0.16); }
.aep-kpi-row[b-5ybh2i8jlu]  .aep-kpi-icon-teal    { color: var(--state-success-fg); background: rgba(77,  216, 255, 0.14); }
.aep-kpi-row[b-5ybh2i8jlu]  .aep-kpi-icon-purple  { color: var(--med-blue-primary); background: rgba(110,  59, 255, 0.14); }
.aep-kpi-row[b-5ybh2i8jlu]  .aep-kpi-icon-indigo  { color: var(--med-blue-primary); background: rgba(92,  107, 192, 0.14); }  /* AEP-12: Under Review (kept for follow-up surface) */
/* _content/MtmpProjectsPoc.Web/Pages/AnnualEvaluationPlan/Components/RemindersPanel.razor.rz.scp.css */
/* Polish batch 2 (2026-07-20): vertical row layout — icon + text + count +
   chevron on one horizontal line per row. Rows sit inside a list-group-
   flush so the card divider handles the row separators. */

.aep-reminders-card[b-kmgdqxtvge]  .aep-reminder-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.aep-reminders-card[b-kmgdqxtvge]  .aep-reminder-row:hover {
    background: rgba(17, 123, 255, 0.04);
}

.aep-reminders-card[b-kmgdqxtvge]  .aep-reminder-row:focus-visible {
    outline: 3px solid var(--medtronic-blue-primary, var(--action-primary));
    outline-offset: -3px;
}

/* Colored round icon — 40x40 tinted chip (near-black glyph with a hint of
   family hue, over a soft same-family bg ~14-16% alpha). Matches KPI
   header treatment (2026-07-24 icon polish) for visual rhyme across the
   page. AppIcon renders SVG with fill=currentColor so the icon inherits
   `color`. */
.aep-reminders-card[b-kmgdqxtvge]  .aep-reminder-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* 2026-07-24 icon polish (pass 4): stacked drop-shadow thickens the
   outline SVG ~1px without switching to Filled. Matches KPI treatment. */
.aep-reminders-card[b-kmgdqxtvge]  .aep-reminder-icon svg {
    filter:
        drop-shadow(0 0 0.35px currentColor)
        drop-shadow(0 0 0.35px currentColor);
}

.aep-reminders-card[b-kmgdqxtvge]  .aep-reminder-icon-primary { color: var(--med-blue-primary); background: rgba(0,   113, 179, 0.14); }
.aep-reminders-card[b-kmgdqxtvge]  .aep-reminder-icon-success { color: var(--state-success-fg); background: rgba(46,  125,  50, 0.14); }
.aep-reminders-card[b-kmgdqxtvge]  .aep-reminder-icon-warning { color: var(--state-attention-fg); background: rgba(243, 156,  18, 0.16); }

.aep-reminders-card[b-kmgdqxtvge]  .aep-reminder-text {
    flex-grow: 1;
    /* min-width: 0 lets the flex child shrink below its content size —
       required for text-overflow: ellipsis inside a flex row. */
    min-width: 0;
}

/* UX-DS-07 pilot (2026-07-27): allow label + sub to wrap naturally so the
   text ALWAYS fits inside the card (row grows vertically as needed). Rejected
   ellipsis approach because the visual indicator wasn't triggering reliably
   in the narrow col-sm-7 slot and truncation loses the reminder detail
   ("Next reminder date: Jun 15, 2026"). overflow-wrap: anywhere guarantees
   even long unbreakable strings (e.g. supplier codes / URLs) can break to
   the next line instead of overflowing the card. */
.aep-reminders-card[b-kmgdqxtvge]  .aep-reminder-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-strong);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.aep-reminders-card[b-kmgdqxtvge]  .aep-reminder-sub {
    font-size: 0.7rem;
    color: var(--medtronic-gray-600, var(--text-weak));
    line-height: 1.2;
    margin-top: 2px;
    overflow-wrap: anywhere;
}

.aep-reminders-card[b-kmgdqxtvge]  .aep-reminder-count {
    flex-shrink: 0;
    min-width: 32px;
    text-align: right;
}

.aep-reminders-card[b-kmgdqxtvge]  .aep-reminder-count-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1;
}

.aep-reminders-card[b-kmgdqxtvge]  .aep-reminder-chevron {
    color: var(--medtronic-gray-500, var(--text-weak));
    font-size: 0.75rem;
    flex-shrink: 0;
}
/* _content/MtmpProjectsPoc.Web/Pages/AnnualEvaluationPlan/Components/RoadmapView.razor.rz.scp.css */
/* AEP-14 (2026-07-23): scoped styles for the Roadmap tab. Follows the same
   "tinted round card header" pattern used in KpiHeaderCards — each of the 6
   buckets gets a distinct header color.

   Client-adjusted 2026-07-24 — layout switched from 2 rows × 3 to a single
   Kanban-style row of 6 columns (pizarra). Font sizes reduced across the
   board so a 5-row column fits at ~200px width without wrapping. */

.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-board {
    /* Force 6 equal columns regardless of the parent Bootstrap column width.
       CalendarView lives inside col-lg-8, so viewport-based `.col-lg-2`
       fires too aggressively and stacks to 3+3. CSS Grid on the local
       container fixes it — always 6 on desktop, 3 on tablet, 2 on mobile. */
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: stretch;
}

@media (max-width: 991.98px) {
    .aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-board {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-col {
    display: flex;
}

.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-card {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    width: 100%;
    display: flex;
    flex-direction: column;
}

.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-card-header {
    padding: 0.35rem 0.55rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    line-height: 1.15;
    text-transform: uppercase;
}

/* Solid tint per bucket. Uses inline colors instead of Bootstrap 5.3
   bg-*-subtle so it renders on Bootstrap 5.1 without depending on the
   site.css fallback for these specific shades. */
.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-header-overdue       { background: var(--state-danger-bg); color: var(--state-danger-fg); }
.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-header-due-week      { background: var(--state-attention-bg); color: var(--state-attention-fg); }
.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-header-due-month     { background: var(--selection-bg); color: var(--med-blue-medium); }
.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-header-in-progress   { background: var(--selection-bg); color: var(--med-blue-medium); }
.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-header-under-review  { background: #e2d9f3; color: #432874; }
.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-header-closed        { background: var(--state-success-bg); color: var(--state-success-fg); }

/* Count badge inside header — inherits the header's foreground color so
   contrast stays legible across the 6 tints. */
.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-badge {
    background: rgba(255, 255, 255, 0.65);
    color: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
}

/* Card body grows to fill the tallest column. */
.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-card .card-body {
    flex: 1 1 auto;
}

/* Row — tighter padding + smaller type so 5 rows/column fit without noise. */
.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-row {
    padding: 0;
}

.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-row-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 0.4rem 0.55rem;
    cursor: pointer;
    color: inherit;
    transition: background-color 100ms ease;
}

.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-row-btn:hover,
.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-row-btn:focus {
    background-color: rgba(17, 123, 255, 0.06);
    outline: none;
}

.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-supplier {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-strong);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-date {
    font-size: 0.68rem;
    color: var(--medtronic-gray-600, var(--text-weak));
    font-weight: 500;
}

/* Subline (planning: "3 tools · every 6m · Active" / execution: audit #) */
.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-row-btn .text-muted.small {
    font-size: 0.65rem;
    line-height: 1.2;
}

.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-empty {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

/* In-progress bar — thin (3px) to fit inside the compact row. */
.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-progress {
    height: 3px;
    border-radius: 2px;
}

/* Footer "+N more" text — same reduced scale as the rest of the card. */
.aep-roadmap[b-ou0kkc64sh]  .aep-roadmap-card .card-footer {
    padding: 0.3rem 0.5rem;
    font-size: 0.65rem;
}

/* Utility: helps ellipsis clip inside a flex child (mirrors KpiHeaderCards) */
.aep-roadmap[b-ou0kkc64sh]  .min-width-0 { min-width: 0; }
/* _content/MtmpProjectsPoc.Web/Pages/AnnualEvaluationPlan/Components/SupplierReadinessDonut.razor.rz.scp.css */
/* AEP-09 (2026-07-17): scoped styles for the Supplier Readiness donut.
   Polish batch 2 (2026-07-20): compact layout so donut + legend fit
   inside a narrow col-sm-6 slot beside Evaluation Reminders. */

.aep-readiness-card[b-92hbvncj46]  .aep-readiness-donut-wrap {
    position: relative;
    width: 100%;
    max-width: 130px;
    height: 130px;
}

.aep-readiness-card[b-92hbvncj46]  .aep-readiness-legend {
    font-size: 0.8rem;
}

.aep-readiness-card[b-92hbvncj46]  .aep-readiness-legend-row {
    margin-bottom: 0.35rem;
}

.aep-readiness-card[b-92hbvncj46]  .aep-readiness-legend-row:last-child {
    margin-bottom: 0;
}

/* Polish batch 2 (2026-07-20): row = dot + label (grows) + count/(pct%)
   right-aligned — mirrors the mockup ("Ready ... 92 (72%)"). Whole row
   is a button so the drill-down click target stays generous. */
.aep-readiness-card[b-92hbvncj46]  .aep-readiness-legend-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.15rem 0;
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: left;
}

.aep-readiness-card[b-92hbvncj46]  .aep-readiness-legend-btn:hover .aep-readiness-label {
    color: var(--medtronic-blue-primary, var(--action-primary));
    text-decoration: underline;
}

.aep-readiness-card[b-92hbvncj46]  .aep-readiness-label {
    flex-grow: 1;
    color: var(--medtronic-gray-700, var(--text-weak));
}

.aep-readiness-card[b-92hbvncj46]  .aep-readiness-value {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--text-strong);
}

.aep-readiness-card[b-92hbvncj46]  .aep-readiness-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.aep-readiness-card[b-92hbvncj46]  .aep-readiness-ready      { background: var(--medtronic-green, var(--state-success-accent)); }
.aep-readiness-card[b-92hbvncj46]  .aep-readiness-inprogress { background: var(--state-attention-accent); }
.aep-readiness-card[b-92hbvncj46]  .aep-readiness-notready   { background: var(--medtronic-red, var(--state-danger-accent)); }

.aep-readiness-card[b-92hbvncj46]  .aep-readiness-drill {
    background: var(--medtronic-gray-50, var(--surface-sunken));
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}
/* _content/MtmpProjectsPoc.Web/Pages/AnnualEvaluationPlan/Components/TableView.razor.rz.scp.css */
/* AEP-16 (2026-07-24): scoped styles for the AEP Table view. Keeps the
   table dense (matches the mockup) without disturbing the surrounding
   card padding. */

.aep-table[b-npray02myv]  .aep-table-table {
    font-size: 0.85rem;
}

.aep-table[b-npray02myv]  .aep-table-table thead th {
    background: var(--medtronic-gray-100, var(--surface-subtle));
    color: var(--medtronic-gray-700, var(--text-weak));
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}

.aep-table[b-npray02myv]  .aep-table-progress {
    height: 6px;
    border-radius: 3px;
    min-width: 60px;
}

/* Filters row — compact, keeps everything on one line at md+ */
.aep-table[b-npray02myv]  .aep-table-filters .form-select-sm,
.aep-table[b-npray02myv]  .aep-table-filters .form-control-sm {
    font-size: 0.85rem;
}

/* Client-adjusted 2026-07-24 — custom dropdown-with-checkboxes replaces the
   broken native <select multiple size="1">. Toggle looks like a form field;
   the menu opens below and scrolls if the list is long. */
.aep-table[b-npray02myv]  .aep-table-multiselect-toggle {
    background-color: var(--surface-default);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.25rem 0.5rem;
}

.aep-table[b-npray02myv]  .aep-table-multiselect-menu {
    position: absolute;
    top: 100%;
    left: 0.5rem;    /* accounts for the col gutter */
    right: 0.5rem;
    z-index: 1050;
    background: var(--surface-default);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 280px;
    overflow-y: auto;
    padding: 0.25rem 0;
    margin-top: 2px;
}

.aep-table[b-npray02myv]  .aep-table-multiselect-menu .dropdown-item {
    padding: 0.35rem 0.65rem;
    cursor: pointer;
}

.aep-table[b-npray02myv]  .aep-table-multiselect-menu .dropdown-item:hover {
    background-color: rgba(17, 123, 255, 0.06);
}

/* Prevent the outline-secondary hover from turning the button dark, which
   would clash with the readable-selection black text inside. */
.aep-table[b-npray02myv]  .aep-table-multiselect-toggle:hover {
    background-color: var(--surface-subtle);
    color: var(--text-strong);
}
/* _content/MtmpProjectsPoc.Web/Pages/AnnualEvaluationPlan/Components/UpcomingEvaluations.razor.rz.scp.css */
/* AEP-06 (2026-07-17), polish batch 3 (2026-07-20): Upcoming rows now
   layout as stacked-date-badge + details + In-N-days pill. */

.aep-upcoming-card[b-sa8drrcuxi]  .aep-upcoming-list {
    max-height: 520px;
    overflow-y: auto;
}

.aep-upcoming-card[b-sa8drrcuxi]  .aep-upcoming-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
}

.aep-upcoming-card[b-sa8drrcuxi]  .aep-entry-actual:hover {
    background-color: var(--medtronic-blue-light, var(--selection-bg));
}

.aep-upcoming-card[b-sa8drrcuxi]  .aep-entry-forecast {
    background-color: rgba(0, 0, 0, 0.015);
}

/* ── Left stacked date badge ─────────────────────────────────────── */
.aep-upcoming-card[b-sa8drrcuxi]  .aep-upcoming-date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    padding: 4px 4px 5px;
    border-radius: 6px;
    background: var(--medtronic-blue-light, var(--selection-bg));
    color: var(--medtronic-blue-primary, var(--action-primary));
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
}

.aep-upcoming-card[b-sa8drrcuxi]  .aep-upcoming-date-month {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--medtronic-blue-primary, var(--action-primary));
}

.aep-upcoming-card[b-sa8drrcuxi]  .aep-upcoming-date-day {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-strong);
    margin: 2px 0 1px;
}

.aep-upcoming-card[b-sa8drrcuxi]  .aep-upcoming-date-year {
    font-size: 0.6rem;
    color: var(--medtronic-gray-600, var(--text-weak));
}

/* ── Middle details column ───────────────────────────────────────── */
.aep-upcoming-card[b-sa8drrcuxi]  .aep-upcoming-details {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.15;
}

.aep-upcoming-card[b-sa8drrcuxi]  .min-width-0 { min-width: 0; }

.aep-upcoming-card[b-sa8drrcuxi]  .aep-upcoming-supplier {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aep-upcoming-card[b-sa8drrcuxi]  .aep-upcoming-code {
    font-size: 0.72rem;
    color: var(--medtronic-gray-600, var(--text-weak));
    margin-top: 1px;
}

.aep-upcoming-card[b-sa8drrcuxi]  .aep-upcoming-type {
    font-size: 0.72rem;
    color: var(--medtronic-gray-600, var(--text-weak));
    margin-top: 1px;
}

/* ── Right pill ──────────────────────────────────────────────────── */
.aep-upcoming-card[b-sa8drrcuxi]  .aep-upcoming-pill {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.aep-upcoming-card[b-sa8drrcuxi]  .aep-upcoming-pill-future {
    background: var(--medtronic-blue-light, var(--selection-bg));
    color: var(--medtronic-blue-primary, var(--action-primary));
}

.aep-upcoming-card[b-sa8drrcuxi]  .aep-upcoming-pill-overdue {
    background: rgba(239, 83, 80, 0.10);
    color: var(--medtronic-red, var(--state-danger-accent));
}
/* _content/MtmpProjectsPoc.Web/Pages/AnnualEvaluationPlan/Index.razor.rz.scp.css */
/* Polish batch 1 refined (2026-07-17): compact page header — smaller icon
   badge, tighter title, subtitle on one line. Overall typography scaled
   down so the page reads like the mockup (dense but breathable). */

/* ── C-19 / fase 3d del goal polish-m1-estructural — override por página DESHECHO ────
   Aquí vivía un bloque que REDEFINÍA diez variables de marca dentro del alcance de esta página,
   para que sus componentes hijos heredaran la paleta "refined" sin tocar sus `.razor.css`.
   Como piloto funcionaba. El problema es lo que pasa si se replica: cada página con su propio
   mapa de variables devuelve exactamente la cacería que la tokenización viene a eliminar — para
   saber de qué color es algo habría que preguntar además "¿en qué página?". El plan lo pone por
   escrito en §6 ("Replicar el override de variables por página" está en la lista de lo que NO
   hay que hacer).

   Qué queda en su lugar: nada. Los componentes de esta página consumen los mismos tokens
   globales que el resto del módulo, así que ahora heredan lo que herede el sistema. Cuando la
   decisión D-0 (qué paleta manda) se cierre, esta página cambia con todas las demás en vez de
   quedarse anclada a una respuesta que se tomó antes de la pregunta.

   El default sellado de Q3 lo dice explícitamente: el plan anual entra al barrido, y los valores
   concretos quedan como los tenga el token, sin decidir D-0. */

.aep-page-header[b-n00klykf8s] {
    font-size: 0.875rem;
}

/* UX-DS-07 pilot (2026-07-27) — mobile hardening: at xs the header switches
   from row-with-flex-wrap to a full vertical stack, and the actions cluster
   (FY selector + Configure + Export) becomes a two-row grid so the wide
   "Configure Plan" button doesn't push Export off the card. */
@media (max-width: 575.98px) {
    .aep-page-header[b-n00klykf8s] {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .aep-page-header > div:first-child[b-n00klykf8s] {
        justify-content: flex-start;
    }

    .aep-page-header > div:last-child[b-n00klykf8s] {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.5rem !important;
    }

    .aep-page-header .aep-header-title[b-n00klykf8s] {
        font-size: 1.15rem !important;
    }

    /* Configure Plan + Export take full row width on xs; FY selector keeps
       its natural width beside its label. */
    .aep-page-header > div:last-child .btn[b-n00klykf8s] {
        flex: 1 1 45%;
        min-width: 0;
    }
}

/* UX-DS-07 pilot (2026-07-27) — mockup polish: bump the header icon chip and
   title to match the EvaluationPlan.jpeg proportions (~52px chip + ~2rem
   title). Icon uses the soft-sky pack tint so it reads as premium/brand
   rather than utility. */
.aep-page-header .aep-header-icon[b-n00klykf8s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--mtmp-soft-sky, var(--selection-bg));
    color: var(--mtmp-electric-blue, var(--action-primary));
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(17, 123, 255, 0.12);
}

.aep-page-header .aep-header-title[b-n00klykf8s] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--mtmp-dark-text, var(--med-blue-primary));
}

@media (max-width: 575.98px) {
    .aep-page-header .aep-header-icon[b-n00klykf8s] {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }
}

/* Polish batch 4 (2026-07-20): About Annual Audit Plan info panel —
   tinted blue background with an info glyph in the top-right corner,
   title + body + learn-more link. Sits at the bottom of the right col. */
.aep-about-panel[b-n00klykf8s] {
    background: rgba(17, 123, 255,0.06);
    border: 1px solid rgba(17, 123, 255,0.15);
    color: var(--med-blue-primary);
}

.aep-about-panel .aep-about-info-icon[b-n00klykf8s] {
    position: absolute;
    top: 0.75rem;
    right: 0.85rem;
    color: var(--medtronic-blue-primary, var(--action-primary));
    font-size: 0.85rem;
}

.aep-about-panel .aep-about-title[b-n00klykf8s] {
    font-size: 0.9rem;
    color: var(--med-blue-primary);
    padding-right: 1.5rem;  /* room for the corner icon */
    margin-bottom: 0.35rem;
}

.aep-about-panel .aep-about-body[b-n00klykf8s] {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--medtronic-gray-700, var(--text-weak));
}

.aep-about-panel .aep-about-link[b-n00klykf8s] {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--medtronic-blue-primary, var(--action-primary));
    text-decoration: none;
}

.aep-about-panel .aep-about-link:hover[b-n00klykf8s],
.aep-about-panel .aep-about-link:focus-visible[b-n00klykf8s] {
    text-decoration: underline;
}

/* Card headers get a slightly smaller default; the widgets (chart,
   calendar, reminders, readiness) all use .card-header h5 by convention. */
.aep-annualplan-page[b-n00klykf8s]  .card-header h5,
.aep-annualplan-page[b-n00klykf8s]  .card-header .h5 {
    font-size: 0.95rem;
    font-weight: 600;
}

.aep-annualplan-page[b-n00klykf8s]  .card-body {
    font-size: 0.875rem;
}

/* AEP-10 (2026-07-17), polish batch 3 (2026-07-20): "Stay on track"
   bottom banner. Alert-style block (icon + title + body on the left,
   Compliance Dashboard CTA on the right) matching the mockup. */

.aep-compliance-banner[b-n00klykf8s] {
    background: var(--medtronic-blue-light, var(--selection-bg));
    border: 1px solid rgba(17, 123, 255,0.25);
    color: var(--med-blue-primary);
}

.aep-compliance-banner .aep-compliance-banner-icon[b-n00klykf8s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    /* 2026-07-24 icon polish (pass 3): larger chip + darker glyph to
       match KPI/Reminders. */
    background: rgba(17, 123, 255,0.14);
    color: var(--med-blue-primary);
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* Pass 4: thicken outline SVG via stacked drop-shadow (same trick as
   KPI + Reminders chips). */
.aep-compliance-banner .aep-compliance-banner-icon[b-n00klykf8s]  svg {
    filter:
        drop-shadow(0 0 0.35px currentColor)
        drop-shadow(0 0 0.35px currentColor);
}

.aep-compliance-banner .aep-compliance-banner-title[b-n00klykf8s] {
    font-size: 1rem;
    color: var(--med-blue-primary);
}

.aep-compliance-banner .aep-compliance-banner-body[b-n00klykf8s] {
    font-size: 0.875rem;
    color: var(--medtronic-gray-700, var(--text-weak));
    margin-top: 2px;
}

.aep-compliance-banner .aep-compliance-banner-cta[b-n00klykf8s] {
    flex-shrink: 0;
}

/* UX-DS-07 pilot (2026-07-27) — mobile hardening: on xs the CTA takes the
   full available width below the icon + copy so the banner doesn't overflow
   or squeeze the text. flex-wrap on the parent already stacks; this just
   gives the button visible full-width presence on small screens. */
@media (max-width: 575.98px) {
    .aep-compliance-banner .aep-compliance-banner-cta[b-n00klykf8s] {
        width: 100%;
        justify-content: center;
    }

    .aep-compliance-banner .aep-compliance-banner-icon[b-n00klykf8s] {
        width: 40px;
        height: 40px;
    }
}
/* _content/MtmpProjectsPoc.Web/Pages/CreateProject.razor.rz.scp.css */
/* CreateProject.razor - Story 12.12 - IMPROVED: Variation 1 with Sticky Sidebar */

/* ===== Medtronic Design System Variables (Inline for scoped CSS) ===== */
:root[b-4n02f68a41] {
    --medtronic-blue-primary: var(--action-primary);
    --medtronic-blue-dark: var(--med-blue-medium);
    --medtronic-blue-light: var(--selection-bg);
    --medtronic-navy: var(--med-blue-medium);
    --medtronic-teal: var(--status-info);
    --medtronic-green: var(--state-success-accent);
    --medtronic-red: var(--state-danger-accent);
    --medtronic-gray-50: var(--surface-subtle);
    --medtronic-gray-100: var(--surface-sunken);
    --medtronic-gray-200: var(--surface-sunken);
    --medtronic-gray-300: var(--border-default);
    --medtronic-gray-500: var(--text-weakest);
    --medtronic-gray-700: var(--text-weak);
    --medtronic-gray-900: var(--text-strong);
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ===== Main Layout Container (UX redesign 2026-04-30: flex + sticky ActionPanel) ===== */
.create-project-container[b-4n02f68a41] {
    display: flex;
    gap: var(--spacing-lg);
    background-color: var(--medtronic-gray-50);
    align-items: flex-start;
}

/* ===== Main Content Area (Left Side - Scrollable) ===== */
.main-content[b-4n02f68a41] {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-lg);
}

/* ===== Sidebar Styling ===== */
.sidebar-section[b-4n02f68a41] {
    margin-bottom: var(--spacing-xl);
}

.sidebar-title[b-4n02f68a41] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--medtronic-navy);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-md);
    border-bottom: 3px solid var(--medtronic-blue-primary);
}

.sidebar-icon[b-4n02f68a41] {
    font-size: 1.5rem;
}

.sidebar-field[b-4n02f68a41] {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--medtronic-gray-50);
    border-radius: var(--border-radius-md);
    border-left: 3px solid var(--medtronic-blue-primary);
}

.sidebar-field-label[b-4n02f68a41] {
    font-size: 0.75rem;
    color: var(--medtronic-gray-500);
    margin-bottom: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-field-value[b-4n02f68a41] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--medtronic-gray-900);
}

/* Status badges */
.status-badge[b-4n02f68a41] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.875rem;
    font-weight: 600;
}

.status-draft[b-4n02f68a41] {
    background-color: var(--state-attention-bg);
    color: var(--state-attention-fg);
}

/* Priority badges */
.priority-badge[b-4n02f68a41] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.875rem;
    font-weight: 600;
}

.priority-critical[b-4n02f68a41] {
    background-color: var(--state-danger-bg);
    color: var(--state-danger-fg);
}

.priority-high[b-4n02f68a41] {
    background-color: var(--state-attention-bg);
    color: var(--state-attention-fg);
}

.priority-medium[b-4n02f68a41] {
    background-color: var(--selection-bg);
    color: var(--med-blue-medium);
}

.priority-low[b-4n02f68a41] {
    background-color: var(--medtronic-gray-200);
    color: var(--medtronic-gray-700);
}

/* Phase badge */
.phase-badge[b-4n02f68a41] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.phase-icon[b-4n02f68a41] {
    font-size: 1.25rem;
}

/* Score and Rank values */
.score-value[b-4n02f68a41], .rank-value[b-4n02f68a41] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--medtronic-blue-primary);
}

/* Quick Actions */
.quick-actions[b-4n02f68a41] {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 2px solid var(--medtronic-gray-200);
}

.quick-actions-title[b-4n02f68a41] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--medtronic-navy);
    margin-bottom: var(--spacing-md);
}

.quick-action-btn[b-4n02f68a41] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    border: 2px solid var(--medtronic-gray-300);
    border-radius: var(--border-radius-md);
    background-color: white;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-action-btn:hover[b-4n02f68a41] {
    background-color: var(--medtronic-blue-light);
    border-color: var(--medtronic-blue-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.action-icon[b-4n02f68a41] {
    font-size: 1.25rem;
}

/* Help Section */
.sidebar-help[b-4n02f68a41] {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 2px solid var(--medtronic-gray-200);
}

.help-title[b-4n02f68a41] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--medtronic-navy);
    margin-bottom: var(--spacing-md);
}

.help-list[b-4n02f68a41] {
    list-style: none;
    padding: 0;
    font-size: 0.875rem;
    color: var(--medtronic-gray-700);
    line-height: 2;
}

.help-list li[b-4n02f68a41] {
    margin-bottom: var(--spacing-sm);
}

.required-mark[b-4n02f68a41] {
    color: var(--medtronic-red);
    font-weight: bold;
}

.help-link[b-4n02f68a41] {
    color: var(--medtronic-blue-primary);
    font-weight: 600;
    text-decoration: none;
}

.help-link:hover[b-4n02f68a41] {
    text-decoration: underline;
}

/* ===== Page Title ===== */
.page-title[b-4n02f68a41] {
    font-size: 2rem;
    font-weight: 600;
    color: var(--medtronic-navy);
    margin-bottom: var(--spacing-lg);
}

/* ===== Form Progress (IMPROVED) ===== */
.form-progress[b-4n02f68a41] {
    background-color: white;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--medtronic-blue-primary);
}

.progress-header[b-4n02f68a41] {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
    font-size: 1rem;
    font-weight: 500;
    color: var(--medtronic-gray-700);
}

.progress-bar-container[b-4n02f68a41] {
    width: 100%;
    height: 12px;
    background-color: var(--medtronic-gray-200);
    border-radius: 6px;
    overflow: hidden;
}

.progress-bar-fill[b-4n02f68a41] {
    height: 100%;
    background: linear-gradient(90deg, var(--medtronic-blue-primary), var(--medtronic-teal));
    transition: width 0.3s ease;
}

/* ===== Collapsible Sections (COMPACT - Matching /projects/:id) ===== */
.collapsible-section[b-4n02f68a41] {
    background-color: white;
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: none;
    overflow: visible;
    border: 1px solid var(--border-default);
}

.section-header[b-4n02f68a41] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: var(--surface-sunken);
    border-bottom: none;
    cursor: pointer;
    user-select: none;
    transition: background-color 150ms;
    border-radius: 8px 8px 0 0;
}

.collapsible-section.collapsed .section-header[b-4n02f68a41] {
    border-radius: 8px;
}

.section-header:hover[b-4n02f68a41] {
    background-color: var(--border-default);
}

.section-header-left[b-4n02f68a41] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.expand-icon[b-4n02f68a41] {
    font-size: 18px;
    transition: transform 0.2s ease;
    color: var(--medtronic-blue-primary);
}

.expand-icon.expanded[b-4n02f68a41] {
    transform: rotate(90deg);
}

/* Section title - compact */
.section-title[b-4n02f68a41] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-strong);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* IMPORTANT: Concept badges for Fase/Tarea/Actividad */
.concept-badge[b-4n02f68a41] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.concept-fase[b-4n02f68a41] {
    background-color: var(--selection-bg);
    color: var(--action-primary);
}

.concept-tarea[b-4n02f68a41] {
    background-color: #F3E5F5;
    color: #6A1B9A;
}

.concept-actividad[b-4n02f68a41] {
    background-color: var(--state-success-bg);
    color: var(--state-success-accent);
}

.concept-cabecera[b-4n02f68a41] {
    background-color: var(--state-attention-bg);
    color: var(--state-attention-accent);
}

.section-status[b-4n02f68a41] {
    font-size: 0.875rem;
    padding: 4px 12px;
    border-radius: 16px;
    background-color: var(--medtronic-gray-200);
    color: var(--medtronic-gray-700);
    font-weight: 500;
}

.section-status.in-progress[b-4n02f68a41] {
    background-color: var(--medtronic-blue-light);
    color: var(--medtronic-blue-primary);
}

.section-body[b-4n02f68a41] {
    padding: 16px;
    display: none;
}

.section-body.expanded[b-4n02f68a41] {
    display: block;
    animation: slideDown-b-4n02f68a41 200ms ease-in-out;
}

@keyframes slideDown-b-4n02f68a41 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Form Fields (COMPACT - Matching /projects/:id style) ===== */
.field-row[b-4n02f68a41] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.field-row.full-width[b-4n02f68a41] {
    grid-template-columns: 1fr;
}

.field-group[b-4n02f68a41] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-label[b-4n02f68a41] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 0;
}

.field-label .required[b-4n02f68a41] {
    color: var(--medtronic-red);
    margin-left: 2px;
    font-weight: bold;
}

/* COMPACT: Match DynamicFieldsRenderer and EditableCompactField styles */
.field-input[b-4n02f68a41],
[b-4n02f68a41] .form-select,
[b-4n02f68a41] .form-control,
[b-4n02f68a41] input[type="text"],
[b-4n02f68a41] input[type="number"],
[b-4n02f68a41] input[type="date"],
[b-4n02f68a41] select,
[b-4n02f68a41] textarea {
    width: 100%;
    padding: 8px 12px !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-family: inherit;
    transition: border-color 150ms, box-shadow 150ms;
    background-color: var(--surface-default);
}

.field-input:focus[b-4n02f68a41],
[b-4n02f68a41] .form-select:focus,
[b-4n02f68a41] .form-control:focus,
[b-4n02f68a41] input:focus,
[b-4n02f68a41] select:focus,
[b-4n02f68a41] textarea:focus {
    outline: none !important;
    border-color: var(--action-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important;
    background-color: var(--surface-default);
}

.field-input:hover[b-4n02f68a41],
[b-4n02f68a41] .form-control:hover,
[b-4n02f68a41] input:hover,
[b-4n02f68a41] select:hover {
    border-color: var(--action-primary);
}

.field-input.valid[b-4n02f68a41],
[b-4n02f68a41] .form-control.valid,
[b-4n02f68a41] .form-control.is-valid {
    border-color: var(--state-success-accent) !important;
}

.field-input.invalid[b-4n02f68a41],
[b-4n02f68a41] .form-control.invalid,
[b-4n02f68a41] .form-control.is-invalid {
    border-color: var(--state-danger-accent) !important;
}

/* Compact textarea styling */
[b-4n02f68a41] textarea.form-control {
    resize: vertical;
    min-height: 72px;
    line-height: 1.5;
}

/* Compact select/dropdown styling */
[b-4n02f68a41] select.form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px !important;
    color: var(--text-weak);
}

/* ===== Form Actions (IMPROVED) ===== */
.form-actions[b-4n02f68a41] {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    padding-top: var(--spacing-xl);
    border-top: 2px solid var(--medtronic-gray-200);
}

[b-4n02f68a41] .btn {
    padding: 14px 32px !important;
    border: none;
    border-radius: var(--border-radius-md);
    font-size: 1.125rem !important;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

[b-4n02f68a41] .btn-primary {
    background: linear-gradient(135deg, var(--medtronic-blue-primary), var(--medtronic-blue-dark));
    color: white;
    box-shadow: var(--shadow-md);
}

[b-4n02f68a41] .btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--medtronic-blue-dark), var(--medtronic-navy));
    transform: translateY(-2px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

[b-4n02f68a41] .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[b-4n02f68a41] .btn-secondary {
    background-color: white;
    color: var(--medtronic-gray-700);
    border: 2px solid var(--medtronic-gray-300) !important;
}

[b-4n02f68a41] .btn-secondary:hover:not(:disabled) {
    background-color: var(--medtronic-gray-50);
    border-color: var(--medtronic-gray-500) !important;
}

/* ===== Story 27.07: Catalog-Sourced Field Styles ===== */

/* Catalog-sourced field visual indicator */
.catalog-sourced[b-4n02f68a41] {
    background-color: var(--selection-hover-bg) !important;
    border-left: 3px solid var(--medtronic-blue-primary) !important;
}

/* "From Catalog" badge */
.catalog-badge[b-4n02f68a41] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--medtronic-blue-primary);
    background-color: var(--medtronic-blue-light);
    border-radius: 4px;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.catalog-badge .oi[b-4n02f68a41] {
    font-size: 0.65rem;
}

/* Discrepancy warning badge */
.discrepancy-badge[b-4n02f68a41] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--state-attention-fg);
    background-color: var(--state-attention-bg);
    border: 1px solid var(--state-attention-accent);
    border-radius: 4px;
    margin-left: 8px;
}

.discrepancy-badge .oi[b-4n02f68a41] {
    font-size: 0.65rem;
}

/* Field wrapper with indicator */
.field-with-indicator[b-4n02f68a41] {
    position: relative;
}

.field-with-indicator .field-indicators[b-4n02f68a41] {
    display: flex;
    align-items: center;
    margin-top: 4px;
    flex-wrap: wrap;
    gap: 4px;
}

/* Catalog-sourced input styling */
[b-4n02f68a41] .catalog-sourced-input {
    background-color: var(--selection-hover-bg) !important;
    border-left: 3px solid var(--medtronic-blue-primary) !important;
}

/* ===== Responsive Design ===== */
@media (max-width: 1200px) {
    .field-row[b-4n02f68a41] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .create-project-container[b-4n02f68a41] {
        flex-direction: column;
    }

    .main-content[b-4n02f68a41] {
        padding: var(--spacing-md);
    }
}

/* ===== COMPACT FIELD STYLES (Matching /projects/:id) ===== */
/* Override EditableCompactField styles for more compact layout */

[b-4n02f68a41] .editable-compact-field {
    padding: 6px 10px;
    gap: 2px;
    border-radius: 6px;
    background-color: var(--surface-subtle);
    border-color: var(--border-subtle);
}

[b-4n02f68a41] .editable-compact-field.editable {
    background-color: var(--surface-default);
    border-left-width: 2px;
}

[b-4n02f68a41] .editable-compact-field .field-label-row {
    min-height: 16px;
}

[b-4n02f68a41] .editable-compact-field .field-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-weakest);
}

[b-4n02f68a41] .editable-compact-field .field-value-row {
    min-height: 24px;
}

[b-4n02f68a41] .editable-compact-field .field-value {
    font-size: 13px;
}

[b-4n02f68a41] .editable-compact-field .field-input {
    padding: 6px 8px;
    font-size: 13px;
}

/* Compact grids for field sections */
[b-4n02f68a41] .hero-fields-grid,
[b-4n02f68a41] .field-grid {
    gap: 8px;
}

[b-4n02f68a41] .expanded-fields-section .field-grid {
    gap: 8px;
    margin-top: 6px;
}

/* ===== COMPACT FIELD STYLES - REMOVE CARD APPEARANCE ===== */
/* Override visual-polish-2026.css and global-fields.css styles */

/* DynamicFieldsRenderer compact styles - NO CARDS */
[b-4n02f68a41] .dynamic-fields-container {
    margin: 0 !important;
    margin-bottom: 12px !important;
}

[b-4n02f68a41] .fields-grid {
    display: grid !important;
    gap: 12px !important;
    padding: 0 !important;
}

/* CRITICAL: Remove card appearance from field groups */
[b-4n02f68a41] .field-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

[b-4n02f68a41] .field-group label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--text-strong) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* CRITICAL: Remove card appearance from field wrappers */
[b-4n02f68a41] .field-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Compact form controls - override visual-polish-2026.css !important styles */
[b-4n02f68a41] .form-control,
[b-4n02f68a41] .form-select,
[b-4n02f68a41] input.form-control,
[b-4n02f68a41] select.form-select {
    padding: 6px 10px !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    background-color: var(--surface-default) !important;
}

/* Compact CollapsibleSection styles */
[b-4n02f68a41] .collapsible-section {
    margin-bottom: 12px !important;
    border-radius: 8px !important;
}

[b-4n02f68a41] .collapsible-section .section-content {
    padding: 10px 12px !important;
}

[b-4n02f68a41] .collapsible-section .section-body {
    padding: 0 !important;
}

[b-4n02f68a41] .collapsible-section .section-header {
    padding: 10px 14px !important;
}

/* ProjectTechnicalSheet compact styles */
[b-4n02f68a41] .project-technical-sheet {
    margin-bottom: 12px;
}

[b-4n02f68a41] .project-technical-sheet .hero-fields-section {
    padding: 10px 14px;
}

[b-4n02f68a41] .project-technical-sheet .technical-sheet-body {
    padding: 12px;
}

/* TechnicalDataCard compact styles */
[b-4n02f68a41] .technical-data-card .card-body {
    padding: 12px;
}

[b-4n02f68a41] .technical-data-card .field-grid {
    gap: 8px;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/AgingEventsCenter.razor.rz.scp.css */
/* Aging Events Center — page-scoped styling. Mirrors the dashboard's
   .dm-* patterns (KPI strip, compact tables, action tiles) but with a
   dedicated .aec-* namespace so overrides don't leak. */

/* ── Row 1: KPI strip (6 tiles evenly split) ─────────────────────────── */
[b-x4r9adz5gq] .aec-kpi-strip { row-gap: 0.5rem; }

[b-x4r9adz5gq] .aec-kpi-col {
    flex: 1 1 15%;
    min-width: 160px;
}

/* ── Row 2 helpers: Suppliers Requiring Attention mini-bar */
[b-x4r9adz5gq] .aec-mini-bar {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #f97316, #dc2626);
}

/* ── Row 2 helper: Aging Risk Distribution callout under the chart */
[b-x4r9adz5gq] .aec-risk-callout {
    font-size: 0.85rem;
    text-align: center;
}

[b-x4r9adz5gq] .aec-risk-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.35rem;
    vertical-align: middle;
}

[b-x4r9adz5gq] .aec-risk-dot--high { background: #dc2626; }

/* ── Compact tables (Critical + Suppliers Requiring Attention). */
[b-x4r9adz5gq] .aec-compact-table {
    font-size: 0.78rem;
}

[b-x4r9adz5gq] .aec-compact-table thead th {
    /* Site-wide `.table thead th` (site.css:111) pinta el header con
       --table-header-bg (fondo navy). En el AEC el mockup pide thead sin
       color; forzamos transparente + reset del color de tipografía porque
       la regla global también setea color y ganaría por especificidad si
       no lo neutralizamos acá. */
    background-color: transparent !important;
    color: #64748b !important;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    padding: 0.35rem 0.4rem;
    border-bottom: 1px solid #e2e8f0;
}

[b-x4r9adz5gq] .aec-compact-table tbody td {
    padding: 0.3rem 0.4rem;
    vertical-align: middle;
}

[b-x4r9adz5gq] .aec-compact-table code.small { font-size: 0.7rem; }

[b-x4r9adz5gq] .aec-row-clickable { cursor: pointer; }
[b-x4r9adz5gq] .aec-row-clickable:hover { background: #eef6ff; }

/* ── Row 3: Oldest Events list. */
[b-x4r9adz5gq] .aec-oldest-list {
    display: flex;
    flex-direction: column;
}

[b-x4r9adz5gq] .aec-oldest-item {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid #e2e8f0;
    transition: background 120ms ease;
    /* Códigos tipo AUDIT-2026-XXXX pueden ser largos y sin whitespace;
       forzamos wrap para que el texto respete el ancho del card en vez
       de expandir la fila y romper el layout. */
    word-break: break-word;
    overflow-wrap: anywhere;
}

[b-x4r9adz5gq] .aec-oldest-item:last-child { border-bottom: none; }
[b-x4r9adz5gq] .aec-oldest-item:hover { background: #eef6ff; }

/* Big-number aging pill — número + label chico. Ahora vive junto a un
   círculo tinted (.aec-oldest-icon) que carga el "look KPI"; el número
   quedó como acento tipográfico, no como elemento visual dominante. */
[b-x4r9adz5gq] .aec-oldest-days {
    flex: 0 0 auto;
    min-width: 52px;
    text-align: center;
    line-height: 1.05;
}

[b-x4r9adz5gq] .aec-oldest-days__value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--med-blue-primary, #001E46);
}

/* Ícono estilo KPI (misma geometría que .dm-kpi-tile__icon pero achicado
   para list-item): círculo amber tinted + ícono amber. Amber matchea el
   variant de "Total Aging" en Row 1, cerrando el loop visual. */
[b-x4r9adz5gq] .aec-oldest-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fef3c7;   /* --dm-kpi-icon-bg amber */
    color: #d97706;        /* --dm-kpi-accent amber */
    font-size: 0.95rem;
}

[b-x4r9adz5gq] .aec-oldest-days__label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    font-weight: 600;
}

/* ── Row 3: Recommended Actions list. */
[b-x4r9adz5gq] .aec-action-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-x4r9adz5gq] .aec-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.5rem;
    background: var(--aec-action-bg, #eff6ff);
    color: var(--aec-action-color, #1e3a8a);
    border-left: 4px solid var(--aec-action-accent, #2563eb);
    text-decoration: none;
    transition: filter 120ms ease, transform 120ms ease;
}

[b-x4r9adz5gq] .aec-action:hover {
    filter: brightness(0.96);
    transform: translateY(-1px);
    text-decoration: none;
}

[b-x4r9adz5gq] .aec-action__icon {
    font-size: 1.15rem;
    color: var(--aec-action-accent, #2563eb);
    flex: 0 0 auto;
}

[b-x4r9adz5gq] .aec-action__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

[b-x4r9adz5gq] .aec-action__title {
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.1;
}

[b-x4r9adz5gq] .aec-action__hint {
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 0.15rem;
}

[b-x4r9adz5gq] .aec-action--red   { --aec-action-bg: #fee2e2; --aec-action-color: #7f1d1d; --aec-action-accent: #dc2626; }
[b-x4r9adz5gq] .aec-action--amber { --aec-action-bg: #fef3c7; --aec-action-color: #78350f; --aec-action-accent: #eab308; }
[b-x4r9adz5gq] .aec-action--blue  { --aec-action-bg: #dbeafe; --aec-action-color: #1e3a8a; --aec-action-accent: #2563eb; }
[b-x4r9adz5gq] .aec-action--navy  { --aec-action-bg: #e0e7ff; --aec-action-color: #3730a3; --aec-action-accent: #1e3a8a; }
[b-x4r9adz5gq] .aec-action--green { --aec-action-bg: #d1fae5; --aec-action-color: #065f46; --aec-action-accent: #16a34a; }

/* Info-only variant — mantiene el color/accent pero neutraliza el hover
   (usado en tiles 1 y 2 de Recommended Actions, que no navegan). */
[b-x4r9adz5gq] .aec-action--static { cursor: default; }
[b-x4r9adz5gq] .aec-action--static:hover { filter: none; transform: none; }
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/AuditDetail.razor.rz.scp.css */
/* ============================================================
   Audit Detail (Evaluation) — rediseño 2026-08-12
   ============================================================
   Big AU-ID header + info card grid + 5-KPI strip +
   2-col layout (main content + sidebar with Summary, Risk
   Overview donut, Activity Timeline, Need help?).
   ============================================================ */

.ad-shell[b-7ju1upg1dp] {
    --mtmp-electric-blue: #117BFF;
    --med-blue-interactive: #1010EB;
    --med-blue-primary: #001E46;
    --ad-card-border: #E1E6EE;
    --ad-card-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    --ad-text-muted: #5B6472;
    --ad-ice-blue: #F4FAFF;
}

/* ---------- Page header ------------------------------------- */
.ad-shell[b-7ju1upg1dp]  .breadcrumb {
    font-size: 0.8125rem;
}

.ad-shell[b-7ju1upg1dp]  .breadcrumb a {
    color: var(--med-blue-interactive);
    text-decoration: none;
}

.ad-shell[b-7ju1upg1dp]  .breadcrumb a:hover {
    text-decoration: underline;
}

.ad-title[b-7ju1upg1dp] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--med-blue-primary);
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing: 0.02em;
}

.ad-header-badge[b-7ju1upg1dp] {
    font-size: 0.75rem !important;
    padding: 0.35rem 0.7rem !important;
}

.ad-header-supplier[b-7ju1upg1dp] {
    color: var(--ad-text-muted);
    font-size: 0.9375rem;
}

.ad-shell[b-7ju1upg1dp]  .ad-header-supplier a {
    color: var(--med-blue-interactive);
}

.ad-shell[b-7ju1upg1dp]  .ad-header-supplier a:hover {
    text-decoration: underline;
}

/* ---------- Actions dropdown -------------------------------- */
.ad-shell[b-7ju1upg1dp]  .dropdown-menu {
    border: 1px solid var(--ad-card-border);
    box-shadow: 0 4px 16px rgba(16, 24, 40, 0.1);
    border-radius: 8px;
    padding: 0.25rem 0;
    min-width: 240px;
}

.ad-shell[b-7ju1upg1dp]  .dropdown-item {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
}

/* ---------- Info card grid ---------------------------------- */
.ad-info-card[b-7ju1upg1dp] {
    background: #FFFFFF;
    border: 1px solid var(--ad-card-border);
    border-radius: 10px;
    box-shadow: var(--ad-card-shadow);
    padding: 1.25rem 1.5rem;
    overflow: hidden;
    position: relative;
}

.ad-info-card[b-7ju1upg1dp]::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 45%;
    background: linear-gradient(115deg, transparent 0%, rgba(17, 123, 255, 0.05) 50%, rgba(17, 123, 255, 0.10) 100%);
    pointer-events: none;
    z-index: 0;
}

.ad-info-grid[b-7ju1upg1dp] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 200px;
    grid-template-areas:
        "i1 i2 i3 donut"
        "i4 i5 . donut";
    gap: 1rem 2rem;
    align-items: center;
}

.ad-info-item[b-7ju1upg1dp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ad-info-item:nth-child(1)[b-7ju1upg1dp] { grid-area: i1; }
.ad-info-item:nth-child(2)[b-7ju1upg1dp] { grid-area: i2; }
.ad-info-item:nth-child(3)[b-7ju1upg1dp] { grid-area: i3; }
.ad-info-item:nth-child(4)[b-7ju1upg1dp] { grid-area: i4; }
.ad-info-item:nth-child(5)[b-7ju1upg1dp] { grid-area: i5; }
.ad-info-donut[b-7ju1upg1dp] { grid-area: donut; display: flex; align-items: center; justify-content: center; position: relative; }

.ad-info-icon[b-7ju1upg1dp] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ad-info-icon-type[b-7ju1upg1dp]    { background: linear-gradient(135deg, #E0F0FF 0%, #C7E4FF 100%); color: #0066CC; }
.ad-info-icon-date[b-7ju1upg1dp]    { background: linear-gradient(135deg, #FFE9D6 0%, #FFCFA8 100%); color: #B8500F; }
.ad-info-icon-user[b-7ju1upg1dp]    { background: linear-gradient(135deg, #E7E5FF 0%, #CDCBFF 100%); color: #4B45B0; }
.ad-info-icon-history[b-7ju1upg1dp] { background: linear-gradient(135deg, #DAF5E1 0%, #B4EAC1 100%); color: #0F7A3E; }

.ad-info-label[b-7ju1upg1dp] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ad-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
}

.ad-info-value[b-7ju1upg1dp] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--med-blue-primary);
    line-height: 1.3;
}

.ad-info-donut[b-7ju1upg1dp] {
    position: relative;
}

.ad-donut-svg[b-7ju1upg1dp] {
    display: block;
}

.ad-donut-label[b-7ju1upg1dp] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.ad-donut-value[b-7ju1upg1dp] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--med-blue-primary);
    line-height: 1;
}

.ad-donut-caption[b-7ju1upg1dp] {
    font-size: 0.6875rem;
    color: var(--ad-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.125rem;
}

/* ---------- 5 KPI strip ------------------------------------- */
.ad-kpis[b-7ju1upg1dp] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.ad-kpi[b-7ju1upg1dp] {
    background: #FFFFFF;
    border: 1px solid var(--ad-card-border);
    border-radius: 10px;
    box-shadow: var(--ad-card-shadow);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ad-kpi:hover[b-7ju1upg1dp] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
}

.ad-kpi-icon[b-7ju1upg1dp] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.ad-kpi-icon-tools[b-7ju1upg1dp]     { background: linear-gradient(135deg, #E0F0FF 0%, #C7E4FF 100%); color: #0066CC; }
.ad-kpi-icon-completed[b-7ju1upg1dp] { background: linear-gradient(135deg, #DAF5E1 0%, #B4EAC1 100%); color: #0F7A3E; }
.ad-kpi-icon-nochange[b-7ju1upg1dp]  { background: linear-gradient(135deg, #E7E5FF 0%, #CDCBFF 100%); color: #4B45B0; }
.ad-kpi-icon-changes[b-7ju1upg1dp]   { background: linear-gradient(135deg, #FFE9D6 0%, #FFCFA8 100%); color: #B8500F; }
.ad-kpi-icon-critical[b-7ju1upg1dp]  { background: linear-gradient(135deg, #FFE1E1 0%, #FFC1C1 100%); color: #B02525; }

.ad-kpi-label[b-7ju1upg1dp] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ad-text-muted);
    letter-spacing: 0.05em;
    line-height: 1.2;
    margin-bottom: 0.125rem;
}

.ad-kpi-value[b-7ju1upg1dp] {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--med-blue-primary);
    line-height: 1.1;
}

.ad-kpi-hint[b-7ju1upg1dp] {
    font-size: 0.75rem;
    color: var(--ad-text-muted);
    margin-top: 0.125rem;
}

/* ---------- Sidebar: Evaluation Summary --------------------- */
.ad-summary[b-7ju1upg1dp] {
    background: #FFFFFF;
    border: 1px solid var(--ad-card-border);
    border-radius: 10px;
    box-shadow: var(--ad-card-shadow);
    padding: 1.25rem;
    border-left: 3px solid var(--med-blue-interactive);
}

.ad-summary-title[b-7ju1upg1dp] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--med-blue-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--ad-card-border);
}

.ad-summary-dl[b-7ju1upg1dp] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 0.6rem 1rem;
    align-items: baseline;
    margin: 0;
    font-size: 0.8125rem;
}

.ad-summary-dl dt[b-7ju1upg1dp] {
    font-weight: 500;
    color: var(--ad-text-muted);
    margin: 0;
}

.ad-summary-dl dd[b-7ju1upg1dp] {
    text-align: right;
    color: var(--med-blue-primary);
    margin: 0;
    word-break: break-word;
    max-width: 100%;
}

/* ---------- Sidebar: Risk Overview donut -------------------- */
.ad-risk-card[b-7ju1upg1dp] {
    background: #FFFFFF;
    border: 1px solid var(--ad-card-border);
    border-radius: 10px;
    box-shadow: var(--ad-card-shadow);
    padding: 1.25rem;
}

.ad-risk-body[b-7ju1upg1dp] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ad-risk-svg[b-7ju1upg1dp] {
    flex-shrink: 0;
}

.ad-risk-legend[b-7ju1upg1dp] {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    font-size: 0.8125rem;
}

.ad-risk-legend li[b-7ju1upg1dp] {
    display: grid;
    grid-template-columns: 12px auto 1fr auto;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0;
}

.ad-risk-dot[b-7ju1upg1dp] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.ad-risk-dot-low[b-7ju1upg1dp]  { background: #10B981; }
.ad-risk-dot-med[b-7ju1upg1dp]  { background: #F59E0B; }
.ad-risk-dot-crit[b-7ju1upg1dp] { background: #DC2626; }

.ad-risk-name[b-7ju1upg1dp] {
    color: var(--med-blue-primary);
    font-weight: 500;
}

.ad-risk-count[b-7ju1upg1dp] {
    font-weight: 600;
    color: var(--med-blue-primary);
    text-align: right;
}

.ad-risk-pct[b-7ju1upg1dp] {
    color: var(--ad-text-muted);
    font-size: 0.75rem;
    grid-column: 4;
    text-align: right;
    padding-left: 0.35rem;
}

/* ---------- Sidebar: Activity Timeline ---------------------- */
.ad-timeline[b-7ju1upg1dp] {
    background: #FFFFFF;
    border: 1px solid var(--ad-card-border);
    border-radius: 10px;
    box-shadow: var(--ad-card-shadow);
    padding: 1.25rem;
}

.ad-timeline-list[b-7ju1upg1dp] {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.ad-timeline-list[b-7ju1upg1dp]::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: #EDF2F7;
}

.ad-tl-item[b-7ju1upg1dp] {
    position: relative;
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.ad-tl-icon[b-7ju1upg1dp] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    background: #FFFFFF;
    z-index: 1;
    flex-shrink: 0;
    border: 2px solid #FFFFFF;
}

.ad-tl-icon-created[b-7ju1upg1dp] { background: #DBEAFE; color: #1E40AF; }
.ad-tl-icon-changed[b-7ju1upg1dp] { background: #FEF3C7; color: #A16207; }
.ad-tl-icon-closed[b-7ju1upg1dp]  { background: #DEF7E6; color: #076638; }
.ad-tl-icon-default[b-7ju1upg1dp] { background: #F1F5F9; color: #64748B; }

.ad-tl-body[b-7ju1upg1dp] {
    flex: 1;
    min-width: 0;
}

.ad-tl-when[b-7ju1upg1dp] {
    font-size: 0.75rem;
    color: var(--ad-text-muted);
    line-height: 1.2;
    margin-bottom: 0.125rem;
}

.ad-tl-desc[b-7ju1upg1dp] {
    font-size: 0.875rem;
    color: var(--med-blue-primary);
    line-height: 1.35;
    word-break: break-word;
}

.ad-tl-actor[b-7ju1upg1dp] {
    font-size: 0.75rem;
    color: var(--ad-text-muted);
    margin-top: 0.125rem;
}

/* ---------- Sidebar: Changes During This Audit -------------- */
.ad-changes-card[b-7ju1upg1dp] {
    background: #FFFFFF;
    border: 1px solid var(--ad-card-border);
    border-radius: 10px;
    box-shadow: var(--ad-card-shadow);
    padding: 1.25rem;
}

.ad-changes-toggle[b-7ju1upg1dp] {
    color: var(--med-blue-primary);
    font-size: 0.9375rem;
    font-weight: 600;
}

.ad-changes-toggle:hover[b-7ju1upg1dp] {
    color: var(--med-blue-interactive);
}

.ad-changes-list[b-7ju1upg1dp] {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
}

.ad-changes-item[b-7ju1upg1dp] {
    padding: 0.75rem 0;
    border-bottom: 1px solid #F1F5F9;
    font-size: 0.8125rem;
}

.ad-changes-item:last-child[b-7ju1upg1dp] {
    border-bottom: none;
    padding-bottom: 0;
}

.ad-changes-head[b-7ju1upg1dp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.ad-changes-when[b-7ju1upg1dp] {
    font-size: 0.75rem;
    color: var(--ad-text-muted);
}

.ad-changes-badge[b-7ju1upg1dp] {
    font-size: 0.6875rem !important;
    padding: 0.2rem 0.5rem !important;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.ad-changes-card[b-7ju1upg1dp]  .ad-changes-tool a {
    color: var(--med-blue-interactive);
    text-decoration: none;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.8125rem;
}

.ad-changes-card[b-7ju1upg1dp]  .ad-changes-tool a:hover {
    text-decoration: underline;
}

.ad-changes-diff[b-7ju1upg1dp] {
    color: var(--med-blue-primary);
    line-height: 1.4;
    margin-top: 0.25rem;
    word-break: break-word;
}

.ad-changes-actor[b-7ju1upg1dp] {
    font-size: 0.75rem;
    color: var(--ad-text-muted);
    margin-top: 0.125rem;
}

/* ---------- Responsive -------------------------------------- */
@media (max-width: 1199.98px) {
    .ad-info-grid[b-7ju1upg1dp] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "i1 i2 i3"
            "i4 i5 donut";
    }
    .ad-kpis[b-7ju1upg1dp] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .ad-info-grid[b-7ju1upg1dp] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "i1 i2"
            "i3 i4"
            "i5 donut";
    }
    .ad-kpis[b-7ju1upg1dp] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ad-title[b-7ju1upg1dp] {
        font-size: 1.5rem;
    }
}

/* ============================================================
   Legacy override — opt out of dynamic-fields.css .form-check
   overrides. Keep last so specificity wins.
   ============================================================ */

[b-7ju1upg1dp] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-7ju1upg1dp] input[type="checkbox"].form-check-input {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    border-radius: 0;
}

[b-7ju1upg1dp] .form-check-input::before,
[b-7ju1upg1dp] .form-check-input::after {
    content: none !important;
    display: none !important;
}

[b-7ju1upg1dp] .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
    outline: none !important;
}

[b-7ju1upg1dp] .form-check-input:checked {
    background-color: revert !important;
    border-color: revert !important;
}

[b-7ju1upg1dp] .form-check {
    min-height: auto !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    transition: none !important;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/Audits.razor.rz.scp.css */
/* ============================================================
   Supplier Evaluations (Audits) — listing rediseño 2026-08-12
   ============================================================
   MTMP-styled header + 5 KPI strip + horizontal filters +
   dm-catalog-table + compact pagination. Aligned with client
   mockup (Up06072026 → Audit Details (ID).jpeg).
   ============================================================ */

.ev-shell[b-i7snbafau6] {
    --mtmp-electric-blue: #117BFF;
    --med-blue-interactive: #1010EB;
    --med-blue-primary: #001E46;
    --ev-card-border: #E1E6EE;
    --ev-card-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    --ev-text-muted: #5B6472;
    --ev-ice-blue: #F4FAFF;
}

/* ---------- Page header (matches Tools / Requests) --------- */
.ev-shell[b-i7snbafau6]  .page-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--med-blue-primary);
    letter-spacing: 0.02em;
}

.ev-shell[b-i7snbafau6]  .breadcrumb {
    font-size: 0.8125rem;
}

.ev-shell[b-i7snbafau6]  .breadcrumb a {
    color: var(--med-blue-interactive);
    text-decoration: none;
}

.ev-shell[b-i7snbafau6]  .breadcrumb a:hover {
    text-decoration: underline;
}

/* ---------- KPI strip --------------------------------------- */
.ev-kpis[b-i7snbafau6] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.ev-kpi[b-i7snbafau6] {
    background: #FFFFFF;
    border: 1px solid var(--ev-card-border);
    border-radius: 10px;
    box-shadow: var(--ev-card-shadow);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ev-kpi:hover[b-i7snbafau6] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
}

.ev-kpi-icon[b-i7snbafau6] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.ev-kpi-icon-open[b-i7snbafau6] {
    background: linear-gradient(135deg, #E0F0FF 0%, #C7E4FF 100%);
    color: #0066CC;
}

.ev-kpi-icon-inprogress[b-i7snbafau6] {
    background: linear-gradient(135deg, #FFE9D6 0%, #FFCFA8 100%);
    color: #B8500F;
}

.ev-kpi-icon-completed[b-i7snbafau6] {
    background: linear-gradient(135deg, #DAF5E1 0%, #B4EAC1 100%);
    color: #0F7A3E;
}

.ev-kpi-icon-tools[b-i7snbafau6] {
    background: linear-gradient(135deg, #E7E5FF 0%, #CDCBFF 100%);
    color: #4B45B0;
}

.ev-kpi-icon-critical[b-i7snbafau6] {
    background: linear-gradient(135deg, #FFE1E1 0%, #FFC1C1 100%);
    color: #B02525;
}

.ev-kpi-body[b-i7snbafau6] {
    flex: 1;
    min-width: 0;
}

.ev-kpi-label[b-i7snbafau6] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ev-text-muted);
    letter-spacing: 0.05em;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.ev-kpi-value[b-i7snbafau6] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--med-blue-primary);
    line-height: 1.1;
}

.ev-kpi-hint[b-i7snbafau6] {
    font-size: 0.75rem;
    color: var(--ev-text-muted);
    margin-top: 0.25rem;
}

/* ---------- Filters (compact catalog pattern) --------------- */
.ev-filters[b-i7snbafau6] {
    background: #FFFFFF;
    border: 1px solid var(--ev-card-border);
    border-radius: 10px;
    box-shadow: var(--ev-card-shadow);
    padding: 1rem 1.25rem;
}

.ev-filters[b-i7snbafau6]  .form-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ev-text-muted);
    margin-bottom: 0.375rem;
}

/* ---------- Table card -------------------------------------- */
.ev-table-card[b-i7snbafau6] {
    background: #FFFFFF;
    border: 1px solid var(--ev-card-border);
    border-radius: 10px;
    box-shadow: var(--ev-card-shadow);
    overflow: hidden;
}

.ev-table-header[b-i7snbafau6] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ev-card-border);
    background: #FBFCFD;
}

.ev-table-title[b-i7snbafau6] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--med-blue-primary);
    display: flex;
    align-items: center;
}

.ev-table-count[b-i7snbafau6] {
    color: var(--ev-text-muted);
    font-weight: 500;
    margin-left: 0.375rem;
}

/* ---------- Row primary link -------------------------------- */
.ev-shell[b-i7snbafau6]  .ev-id-link {
    color: var(--med-blue-interactive);
    text-decoration: none;
    font-weight: 600;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875rem;
}

.ev-shell[b-i7snbafau6]  .ev-id-link:hover {
    text-decoration: underline;
}

/* ---------- Progress bar (row) ------------------------------ */
.ev-progress[b-i7snbafau6] {
    height: 6px;
    background: #EDF2F7;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    min-width: 60px;
}

.ev-progress-bar[b-i7snbafau6] {
    height: 100%;
    line-height: 6px;
    font-size: 0;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Pure inline colours so overrides can't nuke them (lesson from Requests). */
.ev-progress-bar.bg-secondary[b-i7snbafau6] {
    background: #A0A9B7 !important;
}

.ev-progress-bar.bg-warning[b-i7snbafau6] {
    background: linear-gradient(90deg, #F59E0B 0%, #FBBF24 100%) !important;
}

.ev-progress-bar.bg-success[b-i7snbafau6] {
    background: linear-gradient(90deg, #10B981 0%, #34D399 100%) !important;
}

/* ---------- Risk Level badges ------------------------------- */
.ev-shell[b-i7snbafau6]  .ev-risk-critical {
    background: #FFE4E4;
    color: #B02525;
    border: 1px solid #FCC0C0;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
}

.ev-shell[b-i7snbafau6]  .ev-risk-fair {
    background: #FFF4DC;
    color: #A55C00;
    border: 1px solid #FBDD9E;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
}

.ev-shell[b-i7snbafau6]  .ev-risk-green {
    background: #DEF7E6;
    color: #076638;
    border: 1px solid #B6EAC5;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
}

.ev-shell[b-i7snbafau6]  .ev-risk-none {
    background: #F0F2F5;
    color: #6B7A90;
    border: 1px solid #DCE2EA;
    font-weight: 500;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
}

/* ---------- Row action button (view eye) -------------------- */
.ev-shell[b-i7snbafau6]  .ev-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: var(--med-blue-interactive);
    background: transparent;
    text-decoration: none;
    transition: all 0.12s ease;
}

.ev-shell[b-i7snbafau6]  .ev-row-action:hover {
    background: var(--ev-ice-blue);
    color: var(--med-blue-primary);
}

/* ---------- Responsive -------------------------------------- */
@media (max-width: 1199.98px) {
    .ev-kpis[b-i7snbafau6] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .ev-kpis[b-i7snbafau6] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ev-kpi-value[b-i7snbafau6] {
        font-size: 1.5rem;
    }
}

/* ============================================================
   Legacy override — opt out of dynamic-fields.css .form-check
   overrides (checkboxes look dirty otherwise). Keep last so
   specificity wins.
   ============================================================ */

[b-i7snbafau6] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-i7snbafau6] input[type="checkbox"].form-check-input {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    border-radius: 0;
}

[b-i7snbafau6] .form-check-input::before,
[b-i7snbafau6] .form-check-input::after {
    content: none !important;
    display: none !important;
}

[b-i7snbafau6] .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
    outline: none !important;
}

[b-i7snbafau6] .form-check-input:checked {
    background-color: revert !important;
    border-color: revert !important;
}

[b-i7snbafau6] .form-check {
    min-height: auto !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    transition: none !important;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/AuditToolModal.razor.rz.scp.css */
/* DM-08-08 — opt out of dynamic-fields.css global .form-check + add a
 * subtle visual separation between the Before and After columns so the
 * supplier scans them as two distinct zones.
 */

[b-qpzem2hs7j] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-qpzem2hs7j] input[type="radio"].form-check-input {
    appearance: radio !important;
    -webkit-appearance: radio !important;
    -moz-appearance: radio !important;
    border-radius: 50%;
}

[b-qpzem2hs7j] .form-check-input::before,
[b-qpzem2hs7j] .form-check-input::after {
    content: none !important;
    display: none !important;
}

[b-qpzem2hs7j] .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
    outline: none !important;
}

[b-qpzem2hs7j] .form-check {
    min-height: auto !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    transition: none !important;
}

/* Visual column separation — subtle grey gutter on the Before side. */
[b-qpzem2hs7j] .before-col {
    background-color: #fafafa;
    border-right: 1px solid #e9ecef;
    padding-right: 1rem;
}

[b-qpzem2hs7j] .after-col {
    padding-left: 1rem;
}

/* Tab buttons styled as buttons but without the default <button> chrome. */
[b-qpzem2hs7j] .nav-tabs .nav-link {
    background: none;
    border: 1px solid transparent;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/CfnBulkUpload.razor.rz.scp.css */
/* DM-06-05 — opt out of dynamic-fields.css global .form-check overrides.
 * Same pattern as ToolCreate.razor.css / Cfns.razor.css. Without this reset,
 * the CREATE / UPDATE radio buttons in Step 1 get the global 44x44 touch
 * target + ::before/::after "dirty" pseudo-elements that misalign with the
 * labels. Restore native browser rendering for both radios and checkboxes. */

[b-6jka7bn3xf] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-6jka7bn3xf] input[type="radio"].form-check-input {
    appearance: radio !important;
    -webkit-appearance: radio !important;
    -moz-appearance: radio !important;
    border-radius: 50%;
}

[b-6jka7bn3xf] input[type="checkbox"].form-check-input {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    border-radius: 0;
}

[b-6jka7bn3xf] .form-check-input::before,
[b-6jka7bn3xf] .form-check-input::after {
    content: none !important;
    display: none !important;
}

[b-6jka7bn3xf] .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
    outline: none !important;
}

[b-6jka7bn3xf] .form-check-input:checked {
    background-color: revert !important;
    border-color: revert !important;
}

/* Override dynamic-fields.css:151 — restore Bootstrap 5 native .form-check
 * layout (block, no min-height, no flex-center) so the radio sits inline at
 * the column edge with the label to its right. Matches ToolCreate.razor.css. */
[b-6jka7bn3xf] .form-check {
    display: block !important;
    padding: 0 0 0 1.5em !important;
    min-height: auto !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    justify-content: flex-start !important;
    transition: none !important;
}

[b-6jka7bn3xf] .form-check:hover {
    background-color: transparent !important;
}

[b-6jka7bn3xf] .form-check-label {
    cursor: pointer;
    margin-left: 0.25rem;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/Cfns.razor.rz.scp.css */
/* DM-06-01 — opt out of dynamic-fields.css global form-check overrides.
 * Same pattern as Tools.razor.css / Parts.razor.css. The Cfns page uses native
 * HTML checkboxes inside its compact multi-select dropdowns; without this
 * override, the global dynamic-fields.css applies 44x44 touch targets +
 * custom ::before/::after pseudo-elements that look "dirty" when the checkbox
 * loses focus. Restore native browser rendering. */

[b-lfbxlt3ag9] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-lfbxlt3ag9] input[type="checkbox"].form-check-input {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    border-radius: 0;
}

[b-lfbxlt3ag9] .form-check-input::before,
[b-lfbxlt3ag9] .form-check-input::after {
    content: none !important;
    display: none !important;
}

[b-lfbxlt3ag9] .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
    outline: none !important;
}

[b-lfbxlt3ag9] .form-check-input:checked {
    background-color: revert !important;
    border-color: revert !important;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/ChangeRequestDetail.razor.rz.scp.css */
[b-gvcxzwfuar] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-gvcxzwfuar] .form-check {
    min-height: auto !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    transition: none !important;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/ChangeRequests.razor.rz.scp.css */
/* DM-10-01 — opt out of dynamic-fields.css global .form-check overrides. */

[b-j608legktv] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-j608legktv] input[type="checkbox"].form-check-input {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    border-radius: 0;
}

[b-j608legktv] .form-check {
    min-height: auto !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    transition: none !important;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/CreateAudit.razor.rz.scp.css */
/* DM-08 — opt out of dynamic-fields.css global .form-check overrides.
 * Same pattern as CreateRequest.razor.css. The Audit Type radios (Step 1)
 * + the per-tool selection checkboxes (Step 2) + the Select-All header
 * checkbox use .form-check + .form-check-input; without this reset, the
 * global 44x44 touch target + ::before/::after pseudo-elements make
 * them look dirty and misalign with the labels.
 */

[b-0puo0frhx6] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-0puo0frhx6] input[type="radio"].form-check-input {
    appearance: radio !important;
    -webkit-appearance: radio !important;
    -moz-appearance: radio !important;
    border-radius: 50%;
}

[b-0puo0frhx6] input[type="checkbox"].form-check-input {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    border-radius: 0;
}

[b-0puo0frhx6] .form-check-input::before,
[b-0puo0frhx6] .form-check-input::after {
    content: none !important;
    display: none !important;
}

[b-0puo0frhx6] .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
    outline: none !important;
}

[b-0puo0frhx6] .form-check-input:checked {
    background-color: revert !important;
    border-color: revert !important;
}

[b-0puo0frhx6] .form-check {
    min-height: auto !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    transition: none !important;
}

[b-0puo0frhx6] .form-check-label {
    cursor: pointer;
    margin-left: 0.25rem;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/CreateChangeRequest.razor.rz.scp.css */
[b-qvvmwd6yvi] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-qvvmwd6yvi] .form-check {
    min-height: auto !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    transition: none !important;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/CreateRequest.razor.rz.scp.css */
/* ============================================================
   Request Center — New Request wizard (rediseño 2026-08-12)
   ============================================================
   4-step visual wizard fused from client mockup:
     1. Request Details (Type + Information — fused per client)
     2. Line Items
     3. Review
     4. Submit
   Layout: header + stepper + 2-col (content + summary sidebar).
   ============================================================ */

/* MTMP tokens — inherited from :root but declared here so overrides bite. */
[b-6ml16aaxj6] .rc-shell,
.rc-shell[b-6ml16aaxj6] {
    --mtmp-electric-blue: #117BFF;
    --med-blue-interactive: #1010EB;
    --med-blue-primary: #001E46;
    --rc-card-border: #E1E6EE;
    --rc-card-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    --rc-step-pending: #C7CDD8;
    --rc-step-done: #10B981;
    --rc-step-current: var(--med-blue-interactive);
    --rc-text-muted: #5B6472;
    padding: 0;
}

/* ---------- Page header ------------------------------------- */
.rc-page-header .page-title[b-6ml16aaxj6] {
    font-size: 24px;
    font-weight: 600;
    color: var(--med-blue-primary);
    letter-spacing: 0.02em;
}

.rc-page-header .breadcrumb[b-6ml16aaxj6] {
    font-size: 0.8125rem;
}

.rc-page-header .breadcrumb a[b-6ml16aaxj6] {
    color: var(--med-blue-interactive);
    text-decoration: none;
}

.rc-page-header .breadcrumb a:hover[b-6ml16aaxj6] {
    text-decoration: underline;
}

/* ---------- Stepper ----------------------------------------- */
.rc-stepper[b-6ml16aaxj6] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 1rem 0.5rem;
    background: #FBFCFD;
    border: 1px solid var(--rc-card-border);
    border-radius: 8px;
}

.rc-step[b-6ml16aaxj6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
    min-width: 120px;
    padding: 0 0.5rem;
}

.rc-step-dot[b-6ml16aaxj6] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 2px solid var(--rc-step-pending);
    color: var(--rc-step-pending);
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.rc-step.done .rc-step-dot[b-6ml16aaxj6] {
    background: var(--rc-step-done);
    border-color: var(--rc-step-done);
    color: #FFFFFF;
}

.rc-step.current .rc-step-dot[b-6ml16aaxj6] {
    background: var(--rc-step-current);
    border-color: var(--rc-step-current);
    color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(16, 16, 235, 0.12);
}

.rc-step-label[b-6ml16aaxj6] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--med-blue-primary);
    line-height: 1.2;
}

.rc-step.pending .rc-step-label[b-6ml16aaxj6] {
    color: var(--rc-text-muted);
}

.rc-step-sub[b-6ml16aaxj6] {
    font-size: 0.6875rem;
    color: var(--rc-text-muted);
    margin-top: 0.125rem;
    line-height: 1.2;
}

.rc-step-line[b-6ml16aaxj6] {
    flex: 1;
    height: 2px;
    background: var(--rc-step-pending);
    margin-top: 15px;
    min-width: 24px;
    transition: background 0.2s ease;
}

.rc-step-line.done[b-6ml16aaxj6] {
    background: var(--rc-step-done);
}

/* ---------- Card (content column) --------------------------- */
.rc-card[b-6ml16aaxj6] {
    background: #FFFFFF;
    border: 1px solid var(--rc-card-border);
    border-radius: 8px;
    box-shadow: var(--rc-card-shadow);
    overflow: hidden;
}

.rc-card-body[b-6ml16aaxj6] {
    padding: 1.5rem;
}

.rc-section-title[b-6ml16aaxj6] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--med-blue-primary);
    margin-bottom: 1rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--med-blue-interactive);
}

/* ---------- Request Type large cards (Step 1) --------------- */
.rc-type-card[b-6ml16aaxj6] {
    position: relative;
    width: 100%;
    background: #FFFFFF;
    border: 2px solid var(--rc-card-border);
    border-radius: 8px;
    padding: 1.25rem 1rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 138px;
}

.rc-type-card:hover[b-6ml16aaxj6] {
    border-color: var(--med-blue-interactive);
    box-shadow: 0 2px 8px rgba(16, 16, 235, 0.08);
}

.rc-type-card.selected[b-6ml16aaxj6] {
    border-color: var(--med-blue-interactive);
    background: #F5F7FF;
    box-shadow: 0 2px 8px rgba(16, 16, 235, 0.12);
}

.rc-type-radio[b-6ml16aaxj6] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--rc-step-pending);
    background: #FFFFFF;
    transition: all 0.15s ease;
}

.rc-type-radio.checked[b-6ml16aaxj6] {
    border-color: var(--med-blue-interactive);
    background: var(--med-blue-interactive);
    box-shadow: inset 0 0 0 4px #FFFFFF;
}

.rc-type-icon[b-6ml16aaxj6] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}

.rc-type-icon-tool[b-6ml16aaxj6] {
    background: linear-gradient(135deg, #E0F0FF 0%, #C7E4FF 100%);
    color: #0066CC;
}

.rc-type-icon-parts[b-6ml16aaxj6] {
    background: linear-gradient(135deg, #FFE9D6 0%, #FFCFA8 100%);
    color: #B8500F;
}

.rc-type-icon-supplier[b-6ml16aaxj6] {
    background: linear-gradient(135deg, #E7E5FF 0%, #CDCBFF 100%);
    color: #4B45B0;
}

.rc-type-title[b-6ml16aaxj6] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--med-blue-primary);
    margin-bottom: 0.25rem;
}

.rc-type-help[b-6ml16aaxj6] {
    font-size: 0.8125rem;
    color: var(--rc-text-muted);
    line-height: 1.35;
}

/* ---------- Templates block --------------------------------- */
.rc-templates[b-6ml16aaxj6] {
    background: #F8FAFC;
    border: 1px dashed var(--rc-card-border);
    border-radius: 8px;
    padding: 1rem;
}

.rc-templates-header[b-6ml16aaxj6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.rc-templates-buttons[b-6ml16aaxj6] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---------- Review grid (Step 3) ---------------------------- */
.rc-review-grid[b-6ml16aaxj6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem;
    background: #F8FAFC;
    border: 1px solid var(--rc-card-border);
    border-radius: 8px;
}

.rc-review-item[b-6ml16aaxj6] {
    display: flex;
    flex-direction: column;
}

.rc-review-full[b-6ml16aaxj6] {
    grid-column: 1 / -1;
}

.rc-review-label[b-6ml16aaxj6] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.25rem;
}

.rc-review-value[b-6ml16aaxj6] {
    font-size: 0.9375rem;
    color: var(--med-blue-primary);
}

.rc-review-table[b-6ml16aaxj6] {
    border: 1px solid var(--rc-card-border);
    border-radius: 8px;
    overflow-x: auto;
}

.rc-review-attachments[b-6ml16aaxj6] {
    padding: 0.5rem 0.75rem;
    background: #EEF6FF;
    border: 1px solid #D9E9FE;
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--med-blue-primary);
}

/* ---------- Submit confirmation (Step 4) -------------------- */
.rc-submit-icon[b-6ml16aaxj6] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--med-blue-interactive) 0%, #0808CC 100%);
    color: #FFFFFF;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 4px 16px rgba(16, 16, 235, 0.24);
}

.rc-submit-title[b-6ml16aaxj6] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--med-blue-primary);
    margin-bottom: 0.75rem;
}

/* ---------- Sidebar: Request Summary ------------------------ */
.rc-summary[b-6ml16aaxj6] {
    background: #FFFFFF;
    border: 1px solid var(--rc-card-border);
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: var(--rc-card-shadow);
    border-left: 3px solid var(--med-blue-interactive);
}

.rc-summary-title[b-6ml16aaxj6] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--med-blue-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rc-card-border);
}

.rc-summary-dl[b-6ml16aaxj6] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem 1rem;
    align-items: baseline;
    margin: 0;
}

.rc-summary-dl dt[b-6ml16aaxj6] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--rc-text-muted);
    margin: 0;
}

.rc-summary-dl dd[b-6ml16aaxj6] {
    font-size: 0.875rem;
    color: var(--med-blue-primary);
    text-align: right;
    margin: 0;
    max-width: 180px;
    word-break: break-word;
}

.rc-summary-metric[b-6ml16aaxj6] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--med-blue-primary);
}

.rc-summary-hint[b-6ml16aaxj6] {
    font-size: 0.6875rem;
    color: var(--rc-text-muted);
    font-style: italic;
    margin-top: 0.125rem;
}

/* ---------- Sidebar: Hint + Help ---------------------------- */
.rc-hint[b-6ml16aaxj6] {
    background: #EEF6FF;
    border: 1px solid #D9E9FE;
    border-radius: 8px;
    padding: 0.875rem 1rem;
    font-size: 0.8125rem;
    color: var(--med-blue-primary);
    line-height: 1.4;
}

.rc-help[b-6ml16aaxj6] {
    background: #F8FAFC;
    border: 1px solid var(--rc-card-border);
    border-radius: 8px;
    padding: 1rem;
}

.rc-help-title[b-6ml16aaxj6] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--med-blue-primary);
    margin-bottom: 0.5rem;
}

/* ---------- Responsive -------------------------------------- */
@media (max-width: 991.98px) {
    .rc-stepper[b-6ml16aaxj6] {
        overflow-x: auto;
        padding: 1rem 0.75rem;
    }

    .rc-step[b-6ml16aaxj6] {
        min-width: 100px;
    }

    .rc-review-grid[b-6ml16aaxj6] {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Legacy override — opt out of dynamic-fields.css .form-check
   overrides (radios / checkboxes look dirty otherwise).
   Keep this block last so specificity wins.
   ============================================================ */

[b-6ml16aaxj6] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-6ml16aaxj6] input[type="radio"].form-check-input {
    appearance: radio !important;
    -webkit-appearance: radio !important;
    -moz-appearance: radio !important;
    border-radius: 50%;
}

[b-6ml16aaxj6] input[type="checkbox"].form-check-input {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    border-radius: 0;
}

[b-6ml16aaxj6] .form-check-input::before,
[b-6ml16aaxj6] .form-check-input::after {
    content: none !important;
    display: none !important;
}

[b-6ml16aaxj6] .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
    outline: none !important;
}

[b-6ml16aaxj6] .form-check-input:checked {
    background-color: revert !important;
    border-color: revert !important;
}

[b-6ml16aaxj6] .form-check {
    min-height: auto !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    transition: none !important;
}

[b-6ml16aaxj6] .form-check-label {
    cursor: pointer;
    margin-left: 0.25rem;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/CreateSustaining.razor.rz.scp.css */
/* DM-09-02 — opt out of dynamic-fields.css global .form-check overrides. */

[b-am3av1ry1n] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-am3av1ry1n] input[type="radio"].form-check-input {
    appearance: radio !important;
    -webkit-appearance: radio !important;
    -moz-appearance: radio !important;
    border-radius: 50%;
}

[b-am3av1ry1n] .form-check-input::before,
[b-am3av1ry1n] .form-check-input::after {
    content: none !important;
    display: none !important;
}

[b-am3av1ry1n] .form-check {
    min-height: auto !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    transition: none !important;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/Dashboard.razor.rz.scp.css */
/* DM Command Center — page-scoped styling for the mockup grid. Reuses the
   design-system .mtmp-card + .kpi-* families where possible; the new
   .dm-* classes are the density-tuned variants specific to this dashboard. */

/* ── Row 1: KPI strip ─────────────────────────────────────────────────── */
/* col-flex divides available width evenly across the 7 tiles on xl+; on
   smaller viewports the row wraps. */
[b-d3zz20jaca] .dm-kpi-strip {
    row-gap: 0.5rem;
}

[b-d3zz20jaca] .dm-kpi-col {
    flex: 1 1 12%;
    min-width: 150px;
}

/* .dm-kpi-tile styles moved to KpiTile.razor.css on 2026-08-19 so the
   component ships its own styles and works on any page (Dashboard + AEC). */

/* ── Row 2: Events summary — 5-slot kanban grid ──────────────────────── */
[b-d3zz20jaca] .dm-events-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
}

@media (max-width: 1200px) {
    [b-d3zz20jaca] .dm-events-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

[b-d3zz20jaca] .dm-event-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0.5rem;
    border-radius: 0.5rem;
    background: #f8fafc;
    text-decoration: none;
    color: #0f172a;
    border-top: 3px solid var(--dm-slot-accent, #cbd5e1);
    transition: background 120ms ease, transform 120ms ease;
}

[b-d3zz20jaca] .dm-event-slot:hover {
    background: #eef2f7;
    transform: translateY(-1px);
    text-decoration: none;
}

[b-d3zz20jaca] .dm-event-slot__icon { font-size: 1.1rem; color: var(--dm-slot-accent, #64748b); margin-bottom: 0.15rem; }
[b-d3zz20jaca] .dm-event-slot__value { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
[b-d3zz20jaca] .dm-event-slot__label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; text-align: center; }

[b-d3zz20jaca] .dm-event-slot--blue  { --dm-slot-accent: #2563eb; }
[b-d3zz20jaca] .dm-event-slot--amber { --dm-slot-accent: #d97706; }
[b-d3zz20jaca] .dm-event-slot--red   { --dm-slot-accent: #dc2626; }
[b-d3zz20jaca] .dm-event-slot--gray  { --dm-slot-accent: #64748b; }
[b-d3zz20jaca] .dm-event-slot--navy  { --dm-slot-accent: #1e3a8a; }

/* ── Row 2: Active Rate gauge — footer note under the radial chart. */
[b-d3zz20jaca] .dm-gauge-footer { margin-top: 0.25rem; }

/* ── Row 3: Compact tables (Top Suppliers, Supplier Activity).
   Tightened 2026-08-19 per client — Bootstrap's .table-sm already reduces
   default padding; these overrides drop font + inner-cell padding one
   more notch so both tables fit their halved column widths without
   overflow. */
[b-d3zz20jaca] .dm-compact-table {
    font-size: 0.78rem;
}

[b-d3zz20jaca] .dm-compact-table thead th {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    font-weight: 600;
    padding: 0.35rem 0.4rem;
}

[b-d3zz20jaca] .dm-compact-table tbody td {
    padding: 0.3rem 0.4rem;
    vertical-align: middle;
}

[b-d3zz20jaca] .dm-compact-table code.small {
    font-size: 0.7rem;
}

[b-d3zz20jaca] .dm-row-clickable { cursor: pointer; }
[b-d3zz20jaca] .dm-row-clickable:hover { background: #eef6ff; }

[b-d3zz20jaca] .dm-mini-bar {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #60a5fa, #2563eb);
}

/* ── Row 4: Tool Alerts Summary — 3 KPI tiles + overall distribution bar
   (redesigned 2026-08-19 to match DMCC.png mockup). Per-category detail
   moves to the future Risk Center. */
[b-d3zz20jaca] .dm-alert-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (max-width: 576px) {
    [b-d3zz20jaca] .dm-alert-tiles { grid-template-columns: 1fr; }
}

[b-d3zz20jaca] .dm-alert-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 0.75rem;
    border-radius: 0.6rem;
    background: var(--dm-alert-bg, #f1f5f9);
    color: var(--dm-alert-color, #0f172a);
    border-left: 5px solid var(--dm-alert-accent, #64748b);
    min-height: 110px;
}

[b-d3zz20jaca] .dm-alert-tile__icon {
    font-size: 1.4rem;
    color: var(--dm-alert-accent, #64748b);
    margin-bottom: 0.35rem;
}

[b-d3zz20jaca] .dm-alert-tile__value {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.05;
}

[b-d3zz20jaca] .dm-alert-tile__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-top: 0.15rem;
    font-weight: 600;
}

[b-d3zz20jaca] .dm-alert-tile--red    { --dm-alert-bg: #fee2e2; --dm-alert-color: #7f1d1d; --dm-alert-accent: #dc2626; }
[b-d3zz20jaca] .dm-alert-tile--amber  { --dm-alert-bg: #fef3c7; --dm-alert-color: #78350f; --dm-alert-accent: #eab308; }
[b-d3zz20jaca] .dm-alert-tile--green  { --dm-alert-bg: #d1fae5; --dm-alert-color: #064e3b; --dm-alert-accent: #16a34a; }

[b-d3zz20jaca] .dm-alert-distribution {
    margin-bottom: 0.75rem;
}

[b-d3zz20jaca] .dm-alert-distribution__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

[b-d3zz20jaca] .dm-alert-bar {
    height: 22px;
    border-radius: 4px;
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 600;
}

[b-d3zz20jaca] .dm-alert-bar__green  { background-color: #16a34a !important; color: #fff; }
[b-d3zz20jaca] .dm-alert-bar__yellow { background-color: #eab308 !important; color: #1f2937; }
[b-d3zz20jaca] .dm-alert-bar__red    { background-color: #dc2626 !important; color: #fff; }

[b-d3zz20jaca] .dm-alert-categories {
    padding-top: 0.5rem;
    border-top: 1px dashed #e2e8f0;
    font-size: 0.75rem;
}

/* ── Row 4: Quick actions — 5 tiles horizontal (mockup DMCC.png). At
   the col-xl-4 sidecar width (~380px) five 76px tiles fit tight but
   readable with 90px min. Below 576px the grid wraps naturally via
   auto-fit so tiles never crop their labels. */
[b-d3zz20jaca] .dm-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.5rem;
}

[b-d3zz20jaca] .dm-quick-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.35rem;
    border-radius: 0.5rem;
    background: var(--dm-quick-bg, #eff6ff);
    color: var(--dm-quick-color, #1e3a8a);
    text-decoration: none;
    transition: filter 120ms ease, transform 120ms ease;
    text-align: center;
    min-height: 82px;
}

[b-d3zz20jaca] .dm-quick-tile:hover {
    filter: brightness(0.95);
    transform: translateY(-1px);
    text-decoration: none;
}

[b-d3zz20jaca] .dm-quick-tile__icon  { font-size: 1.25rem; margin-bottom: 0.25rem; }
[b-d3zz20jaca] .dm-quick-tile__label { font-weight: 600; font-size: 0.72rem; line-height: 1.15; }

[b-d3zz20jaca] .dm-quick-tile--blue  { --dm-quick-bg: #dbeafe; --dm-quick-color: #1e3a8a; }
[b-d3zz20jaca] .dm-quick-tile--green { --dm-quick-bg: #d1fae5; --dm-quick-color: #065f46; }
[b-d3zz20jaca] .dm-quick-tile--amber { --dm-quick-bg: #fef3c7; --dm-quick-color: #92400e; }
[b-d3zz20jaca] .dm-quick-tile--navy  { --dm-quick-bg: #e0e7ff; --dm-quick-color: #3730a3; }
[b-d3zz20jaca] .dm-quick-tile--red   { --dm-quick-bg: #fee2e2; --dm-quick-color: #991b1b; }

/* ── Filter bar — slimmer than the default card padding. */
[b-d3zz20jaca] .dm-filter-bar .card-body { padding: 0.5rem 1rem; }

/* ── EventsSummaryCard inner section: Aging Events buckets.
   Nested inside the Open Events Summary card (same card, different level
   per client 2026-08-19 mockup). Escalating amber → crimson signals
   mounting operational risk. Purely informational; drill-down lives in
   the future Aging Events Center. */
[b-d3zz20jaca] .dm-aging-section {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #e2e8f0;
}

[b-d3zz20jaca] .dm-aging-section__header {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

[b-d3zz20jaca] .dm-aging-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
}

@media (max-width: 480px) {
    [b-d3zz20jaca] .dm-aging-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

[b-d3zz20jaca] .dm-aging-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.25rem;
    border-radius: 0.4rem;
    background: var(--dm-aging-bg, #fef3c7);
    color: var(--dm-aging-color, #92400e);
    border-top: 3px solid var(--dm-aging-accent, #d97706);
    min-height: 58px;
}

[b-d3zz20jaca] .dm-aging-tile__value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.05;
}

[b-d3zz20jaca] .dm-aging-tile__label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-top: 0.05rem;
    opacity: 0.85;
    text-align: center;
}

[b-d3zz20jaca] .dm-aging-tile--amber   { --dm-aging-bg: #fef3c7; --dm-aging-color: #92400e; --dm-aging-accent: #d97706; }
[b-d3zz20jaca] .dm-aging-tile--orange  { --dm-aging-bg: #ffedd5; --dm-aging-color: #9a3412; --dm-aging-accent: #ea580c; }
[b-d3zz20jaca] .dm-aging-tile--red     { --dm-aging-bg: #fee2e2; --dm-aging-color: #991b1b; --dm-aging-accent: #dc2626; }
[b-d3zz20jaca] .dm-aging-tile--crimson { --dm-aging-bg: #fecaca; --dm-aging-color: #7f1d1d; --dm-aging-accent: #b91c1c; }
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/PartCreate.razor.rz.scp.css */
/* DM-04-03 — opt out of dynamic-fields.css global form-check overrides for the
 * Additional Sites checkbox list on Tab 2 (and any future native checkboxes on
 * this form). Same pattern as Tools.razor.css / ToolCreate.razor.css.
 * Restore native browser rendering. */

[b-6ps01ml6q7] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-6ps01ml6q7] input[type="checkbox"].form-check-input {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    border-radius: 0;
}

[b-6ps01ml6q7] .form-check-input::before,
[b-6ps01ml6q7] .form-check-input::after {
    content: none !important;
    display: none !important;
}

[b-6ps01ml6q7] .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
    outline: none !important;
}

[b-6ps01ml6q7] .form-check-input:checked {
    background-color: revert !important;
    border-color: revert !important;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/PartDetail.razor.rz.scp.css */
/* Part History — inline event chart (Audit / Sustaining / ChangeRequest by month).
   Heights are computed in pixels at render time (see PartDetail.razor Overview tab)
   so we deliberately avoid any height:100% inheritance chain — Blazor scoped CSS +
   nested flex parents made %-based bars collapse to 0. Same pattern as ToolDetail. */

.event-chart[b-33gcj9sfgf] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bs-border-color);
    overflow-x: auto;
}

.event-chart-col[b-33gcj9sfgf] {
    flex: 1 0 56px;
    min-width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.event-chart-stack[b-33gcj9sfgf] {
    width: 36px;
    display: flex;
    flex-direction: column-reverse;
    border-radius: 0.25rem 0.25rem 0 0;
    overflow: hidden;
    min-height: 1px;
}

.event-chart-bar[b-33gcj9sfgf] {
    width: 100%;
    transition: opacity 120ms ease-in-out;
}

.event-chart-bar:hover[b-33gcj9sfgf] { opacity: 0.85; }

.event-chart-label[b-33gcj9sfgf] {
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: var(--bs-secondary-color);
    text-align: center;
    line-height: 1.1;
}

.event-chart-swatch[b-33gcj9sfgf] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 0.15rem;
    margin-right: 0.35rem;
    vertical-align: middle;
}

/* ── Screen 04 rediseño (Partsoverview-2.png) ────────────────────────────
   Hero primitives mirroring ToolDetail.razor.css .tool-hero-* so Part and
   Tool detail pages share the same visual language. Scoped file — Blazor
   rewrites these to `.class[b-xyz]` so nothing leaks to other pages. */

.part-hero-thumb[b-33gcj9sfgf] {
    width: 110px;
    height: 110px;
    object-fit: contain;
    border-radius: 10px;
    background: #f1f5f9;
    padding: 4px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.part-hero-title[b-33gcj9sfgf] {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-strong, #212529);
    line-height: 1.1;
}

.part-hero-meta[b-33gcj9sfgf] {
    row-gap: 0.75rem !important;
}

.part-hero-meta-label[b-33gcj9sfgf] {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--medtronic-gray-600, #6c757d);
}

.part-hero-meta-value[b-33gcj9sfgf] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-strong, #212529);
    line-height: 1.2;
}

.part-hero-meta-sub[b-33gcj9sfgf] {
    font-size: 0.72rem;
    color: var(--medtronic-gray-600, #6c757d);
    line-height: 1.15;
}

/* KPI strip inside the hero — mínimo para que los 8 chips de la fila 2
   quepan en xl (150px por col a 1200px). La fila 1 (4 KPIs) NO se capea
   aquí: mantiene su expansión al 25% del contenedor para verse jerárquica
   respecto a los chips. */
.part-hero-kpis .col[b-33gcj9sfgf] {
    min-width: 110px;
}

/* Modificador exclusivo para la fila 2 (chips compactos). Se aplica junto
   con `.part-hero-kpis` en el mismo `<div>`. Capea el max-width y aprieta
   padding + tipografía para dar la lectura de "sub-KPI". Después del pase
   de "textos se salen" (2026-08-28): subo max-width a 190px y aflojo la
   tipografía un punto para que labels típicos (Cardiac Surgery, Primary
   Site names) respiren sin ellipsis en la mayoría de casos. */
.part-hero-chips .col[b-33gcj9sfgf] {
    max-width: 190px;
    flex: 0 0 auto;
}

[b-33gcj9sfgf] .part-hero-chips .kpi-card > .card-body {
    padding: 0.4rem 0.55rem;
    overflow: hidden;
}

/* Flex child (icon | text) needs min-width:0 or nowrap content grows the child
   instead of shrinking with ellipsis. Sin esto, un OU by Mold como "Acute Care
   & Monitoring" empuja el ícono fuera del card y come espacio del vecino. */
[b-33gcj9sfgf] .part-hero-chips .card-body > .ms-2 {
    min-width: 0;
    flex: 1 1 auto;
}

[b-33gcj9sfgf] .part-hero-chips .kpi-label {
    font-size: 0.6rem;
}

[b-33gcj9sfgf] .part-hero-chips .kpi-value {
    font-size: 0.9rem;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-33gcj9sfgf] .part-hero-chips .kpi-sub {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-33gcj9sfgf] .part-hero-chips .kpi-icon {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
    flex: 0 0 auto;
}

/* ── Assoc Data — tables sin fondo en el header ──────────────────────────
   El mockup usa headers en text-transform uppercase, small y sin fill.
   `::deep` porque las <table> las emite Bootstrap con sus propios attrs
   y no reciben el hash de scoped CSS. */
[b-33gcj9sfgf] .assoc-table thead th {
    background: transparent !important;
    border-top: 0;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    color: var(--medtronic-gray-600, #6c757d);
    font-weight: 600;
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Celdas apretadas pero legibles — a 2 cards por fila (grid 2×2) cada card
   tiene ~550px, así que soltamos un poco padding-x y font vs. la versión
   ultra-compacta de 4 cards. */
[b-33gcj9sfgf] .assoc-table th,
[b-33gcj9sfgf] .assoc-table td {
    padding: 0.45rem 0.5rem;
    font-size: 0.8rem;
}

/* Compact hero-KPI overrides — mirrors ToolDetail's ::deep block so the
   shared `.mtmp-card.kpi-card` primitives look right when packed inside
   the hero (they're larger on catalog list pages). */
[b-33gcj9sfgf] .part-hero-kpis .kpi-card > .card-body {
    padding: 0.4rem 0.55rem;
}

[b-33gcj9sfgf] .part-hero-kpis .kpi-label {
    font-size: 0.6rem;
}

[b-33gcj9sfgf] .part-hero-kpis .kpi-value {
    font-size: 1rem;
    /* Cells de 110px min-width — evitamos que un label largo (Primary Site,
       Lifecycle, OU by Mold) se salga. Truncate global aquí en lugar de
       repetirlo por chip. */
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-33gcj9sfgf] .part-hero-kpis .kpi-sub {
    font-size: 0.6rem;
    white-space: normal;
    overflow: visible;
}

[b-33gcj9sfgf] .part-hero-kpis .kpi-icon {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
}

/* ── History → Activity Timeline (Partshistory-2.png) ─────────────────────
   Spine vertical continua + dots circulares tinted por tipo. Reemplaza el
   stack de cards con borde para dar lectura de "línea temporal" (client
   2026-08-31). No es scoped a `::deep` porque las clases se emiten desde
   este mismo componente (PartDetail.razor). */

.part-timeline[b-33gcj9sfgf] {
    position: relative;
    padding-left: 3rem;
}

/* Reserva total 3rem (48px):
     dot = 30px (left:-2.375rem = -38px → right edge at -8px del body)
     gap = 8px entre dot y el texto
   Spine centrada con el dot: centro del dot = -38 + 15 = -23px del body
     → en coords del container: 48 − 23 = 25px → left: 1.5rem (spine 2px). */
.part-timeline[b-33gcj9sfgf]::before {
    content: '';
    position: absolute;
    top: 0.75rem;
    bottom: 0.75rem;
    left: 1.5rem;
    width: 2px;
    background: var(--bs-border-color, #dee2e6);
    border-radius: 1px;
}

.part-timeline-item[b-33gcj9sfgf] {
    position: relative;
    padding-bottom: 1.25rem;
}

.part-timeline-item:last-child[b-33gcj9sfgf] {
    padding-bottom: 0;
}

.part-timeline-dot[b-33gcj9sfgf] {
    position: absolute;
    left: -2.375rem;
    top: 0.05rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.8rem;
    box-shadow: 0 0 0 3px #fff;
}

.part-timeline-dot.tint-success[b-33gcj9sfgf] { background: var(--bs-success, #198754); }
.part-timeline-dot.tint-warning[b-33gcj9sfgf] { background: var(--bs-warning, #ffc107); color: #212529; }
.part-timeline-dot.tint-primary[b-33gcj9sfgf] { background: var(--bs-primary, #0d6efd); }
.part-timeline-dot.tint-danger[b-33gcj9sfgf]  { background: var(--bs-danger,  #dc3545); }
.part-timeline-dot.tint-muted[b-33gcj9sfgf]   { background: var(--bs-secondary, #6c757d); }

.part-timeline-body[b-33gcj9sfgf] {
    min-height: 30px;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/PartEdit.razor.rz.scp.css */
/* DM-04-07 — opt out of dynamic-fields.css global form-check overrides for
 * the Additional Sites checkbox list on Tab 2. Same pattern as
 * PartCreate.razor.css / Tools.razor.css. Restore native browser rendering. */

[b-596qli5y0i] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-596qli5y0i] input[type="checkbox"].form-check-input {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    border-radius: 0;
}

[b-596qli5y0i] .form-check-input::before,
[b-596qli5y0i] .form-check-input::after {
    content: none !important;
    display: none !important;
}

[b-596qli5y0i] .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
    outline: none !important;
}

[b-596qli5y0i] .form-check-input:checked {
    background-color: revert !important;
    border-color: revert !important;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/Parts.razor.rz.scp.css */
/* DM-04-01 — opt out of dynamic-fields.css global form-check overrides.
 * Same pattern as Tools.razor.css. The Parts page uses native HTML checkboxes
 * inside its compact multi-select dropdowns; without this override, the global
 * dynamic-fields.css applies 44x44 touch targets + custom ::before/::after
 * pseudo-elements that look "dirty" when the checkbox loses focus.
 * Restore native browser rendering. */

[b-bekpxg7orq] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-bekpxg7orq] input[type="checkbox"].form-check-input {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    border-radius: 0;
}

[b-bekpxg7orq] .form-check-input::before,
[b-bekpxg7orq] .form-check-input::after {
    content: none !important;
    display: none !important;
}

[b-bekpxg7orq] .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
    outline: none !important;
}

[b-bekpxg7orq] .form-check-input:checked {
    background-color: revert !important;
    border-color: revert !important;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/RequestDetail.razor.rz.scp.css */
/* UX-DS-08 Request Detail (2026-08-11) — brand-pack refresh for
   /data-management/requests/{id}. Consume `--mtmp-*` tokens directly (AEP
   pilot pattern) and the shared `.dm-btn-*` / `.kpi-*` primitives from
   design-system/. This file only holds page-specific structure: header
   layout, summary strip, progress stepper, status/type pills, timeline,
   attachments list. Buttons + tables + pagination consume the primitives
   via class in the markup. */

.request-detail[b-6bbrjm226p] {
    padding-top: 1.25rem;
    padding-bottom: 2rem;
    color: var(--mtmp-dark-text, #1D2C48);
}


/* ── Header ──────────────────────────────────────────────────────────── */

.rd-header[b-6bbrjm226p] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.rd-header-lead[b-6bbrjm226p] {
    flex: 1 1 auto;
    min-width: 0;
}

.rd-breadcrumb[b-6bbrjm226p] {
    font-size: 0.85rem;
    background: transparent;
    padding: 0;
}

.rd-breadcrumb .breadcrumb-item a[b-6bbrjm226p] {
    color: var(--mtmp-text-gray, #6B7A90);
    text-decoration: none;
}

.rd-breadcrumb .breadcrumb-item a:hover[b-6bbrjm226p] {
    color: var(--mtmp-electric-blue, #117BFF);
}

.rd-breadcrumb .breadcrumb-item.active[b-6bbrjm226p] {
    color: var(--mtmp-electric-blue, #117BFF);
    font-weight: 500;
}

.rd-header-title-row[b-6bbrjm226p] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.rd-header-title[b-6bbrjm226p] {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--mtmp-dark-text, #1D2C48);
    font-family: "SF Mono", Consolas, monospace;
    margin: 0;
}

.rd-header-subtitle[b-6bbrjm226p] {
    font-size: 0.95rem;
    color: var(--mtmp-text-gray, #6B7A90);
    margin: 0.5rem 0 0;
}

.rd-header-actions[b-6bbrjm226p] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.rd-status-picker[b-6bbrjm226p] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #FFFFFF;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    padding: 0.35rem 0.65rem 0.35rem 0.85rem;
    box-shadow: 0 1px 2px rgba(6, 20, 44, 0.04);
}

.rd-status-picker-label[b-6bbrjm226p] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mtmp-text-gray, #6B7A90);
    margin: 0;
}

.rd-status-picker-select[b-6bbrjm226p] {
    border: none;
    background: transparent;
    font-weight: 600;
    color: var(--mtmp-dark-text, #1D2C48);
    padding-right: 1.5rem;
    box-shadow: none !important;
}


/* ── Status confirm card ─────────────────────────────────────────────── */

.rd-status-confirm[b-6bbrjm226p] {
    border: 1px solid var(--mtmp-electric-blue, #117BFF);
    background: var(--mtmp-ice-blue, #F4FAFF);
}

.rd-status-confirm-label[b-6bbrjm226p] {
    font-weight: 600;
    color: var(--mtmp-dark-text, #1D2C48);
    font-size: 0.9rem;
}


/* ── Type + status badges ────────────────────────────────────────────── */

.rd-type-badge[b-6bbrjm226p] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.7rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.rd-type-badge-icon[b-6bbrjm226p] {
    font-size: 0.7rem;
    line-height: 1;
}

.rd-type-tool[b-6bbrjm226p]     { background: rgba(46, 204, 113, 0.14);  color: #1F8A4C; }
.rd-type-parts[b-6bbrjm226p]    { background: rgba(245, 166, 35, 0.16);  color: #B26F00; }
.rd-type-supplier[b-6bbrjm226p] { background: rgba(17, 123, 255, 0.14);  color: var(--mtmp-electric-blue, #117BFF); }
.rd-type-unknown[b-6bbrjm226p]  { background: var(--mtmp-light-gray, #EDF2F7); color: var(--mtmp-text-gray, #6B7A90); }

.rd-status-badge[b-6bbrjm226p] {
    display: inline-block;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.rd-status-open[b-6bbrjm226p]              { background: rgba(17, 123, 255, 0.14);  color: var(--mtmp-electric-blue, #117BFF); }
.rd-status-progress-ok[b-6bbrjm226p]       { background: rgba(77, 216, 255, 0.22);  color: #06618A; }
.rd-status-progress-delayed[b-6bbrjm226p]  { background: rgba(245, 166, 35, 0.18);  color: #B26F00; }
.rd-status-reschedule[b-6bbrjm226p]        { background: rgba(110, 59, 255, 0.14);  color: #5326D9; }
.rd-status-completed[b-6bbrjm226p]         { background: rgba(46, 204, 113, 0.16);  color: #1F8A4C; }
.rd-status-closed[b-6bbrjm226p]            { background: var(--mtmp-light-gray, #EDF2F7); color: var(--mtmp-text-gray, #6B7A90); }
.rd-status-unknown[b-6bbrjm226p]           { background: var(--mtmp-light-gray, #EDF2F7); color: var(--mtmp-text-gray, #6B7A90); }


/* ── Summary strip (4 metadata cards) ────────────────────────────────── */

.rd-summary-card[b-6bbrjm226p] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    background: #FFFFFF;
    border: 1px solid rgba(10, 37, 72, 0.06);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(6, 20, 44, 0.05);
    height: 100%;
}

.rd-summary-icon[b-6bbrjm226p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--mtmp-soft-sky, #D8F1FF);
    color: var(--mtmp-electric-blue, #117BFF);
    font-size: 1rem;
    flex-shrink: 0;
}

.rd-summary-body[b-6bbrjm226p] {
    flex: 1 1 auto;
    min-width: 0;
}

.rd-summary-label[b-6bbrjm226p] {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--mtmp-text-gray, #6B7A90);
    margin-bottom: 0.15rem;
}

.rd-summary-value[b-6bbrjm226p] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mtmp-dark-text, #1D2C48);
    line-height: 1.25;
    display: block;
    text-decoration: none;
}

a.rd-summary-value.rd-supplier-link:hover[b-6bbrjm226p] {
    color: var(--mtmp-electric-blue, #117BFF);
    text-decoration: underline;
}

.rd-summary-sub[b-6bbrjm226p] {
    font-size: 0.75rem;
    color: var(--mtmp-text-gray, #6B7A90);
    margin-top: 0.1rem;
}


/* ── Card shell shared by all sections ───────────────────────────────── */

.rd-card[b-6bbrjm226p] {
    background: #FFFFFF;
    border: 1px solid rgba(10, 37, 72, 0.06);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(6, 20, 44, 0.06);
    overflow: hidden;
}

.rd-card-header[b-6bbrjm226p] {
    background: #FFFFFF;
    border-bottom: 1px solid var(--mtmp-border-gray, #DCE5F2);
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.rd-card-header-icon[b-6bbrjm226p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--mtmp-soft-sky, #D8F1FF);
    color: var(--mtmp-electric-blue, #117BFF);
    font-size: 0.8rem;
}

.rd-card-header-title[b-6bbrjm226p] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mtmp-dark-text, #1D2C48);
}

.rd-card-title[b-6bbrjm226p] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mtmp-dark-text, #1D2C48);
}

.rd-count-pill[b-6bbrjm226p] {
    background: var(--mtmp-soft-sky, #D8F1FF);
    color: var(--mtmp-electric-blue, #117BFF);
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}


/* ── Progress card (stepper) ─────────────────────────────────────────── */

.rd-progress-card .card-body[b-6bbrjm226p] {
    padding: 1.5rem 1.25rem;
}

.rd-stepper[b-6bbrjm226p] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    position: relative;
}

/* Connector line behind the markers. Kept subtle so the pills read as the
   primary UI, and the line as a hint of sequence. */
.rd-stepper[b-6bbrjm226p]::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 5%;
    right: 5%;
    height: 2px;
    background: var(--mtmp-border-gray, #DCE5F2);
    z-index: 0;
}

.rd-step[b-6bbrjm226p] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
}

.rd-step-marker[b-6bbrjm226p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid var(--mtmp-border-gray, #DCE5F2);
    color: var(--mtmp-text-gray, #6B7A90);
    font-size: 0.9rem;
    margin-bottom: 0.55rem;
}

.rd-step-done .rd-step-marker[b-6bbrjm226p] {
    background: var(--mtmp-success, #2ECC71);
    border-color: var(--mtmp-success, #2ECC71);
    color: #FFFFFF;
}

.rd-step-current .rd-step-marker[b-6bbrjm226p] {
    background: var(--mtmp-electric-blue, #117BFF);
    border-color: var(--mtmp-electric-blue, #117BFF);
    color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(17, 123, 255, 0.16);
}

.rd-step-label[b-6bbrjm226p] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mtmp-dark-text, #1D2C48);
    line-height: 1.2;
}

.rd-step-pending .rd-step-label[b-6bbrjm226p] {
    color: var(--mtmp-text-gray, #6B7A90);
    font-weight: 500;
}

.rd-step-sublabel[b-6bbrjm226p] {
    font-size: 0.72rem;
    color: var(--mtmp-text-gray, #6B7A90);
    margin-top: 0.15rem;
}

.rd-step-current .rd-step-sublabel[b-6bbrjm226p] {
    color: var(--mtmp-electric-blue, #117BFF);
    font-weight: 600;
}


/* ── Request Details grid ────────────────────────────────────────────── */

.rd-detail-label[b-6bbrjm226p] {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mtmp-text-gray, #6B7A90);
    margin-bottom: 0.2rem;
}

.rd-detail-value[b-6bbrjm226p] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--mtmp-dark-text, #1D2C48);
    display: block;
    text-decoration: none;
}

.rd-detail-value.rd-supplier-link:hover[b-6bbrjm226p] {
    color: var(--mtmp-electric-blue, #117BFF);
    text-decoration: underline;
}


/* ── Sidebar (metadata + timeline + attachments + about) ─────────────── */

.rd-sidebar-card .card-body[b-6bbrjm226p] {
    padding: 1rem 1.15rem;
}

/* Metadata definition-list — inline pairs. */
.rd-metadata[b-6bbrjm226p] {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 0.55rem;
    column-gap: 0.85rem;
    margin: 0;
}

.rd-metadata dt[b-6bbrjm226p] {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mtmp-text-gray, #6B7A90);
    align-self: center;
}

.rd-metadata dd[b-6bbrjm226p] {
    margin: 0;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mtmp-dark-text, #1D2C48);
    align-self: center;
}


/* ── Timeline ────────────────────────────────────────────────────────── */

.rd-view-all-btn[b-6bbrjm226p] {
    background: none;
    border: none;
    color: var(--mtmp-electric-blue, #117BFF);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
}

.rd-view-all-btn:hover[b-6bbrjm226p] {
    text-decoration: underline;
}

.rd-timeline[b-6bbrjm226p] {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Vertical connector line — muted, sits behind the dots. */
.rd-timeline[b-6bbrjm226p]::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 5px;
    width: 2px;
    background: var(--mtmp-border-gray, #DCE5F2);
}

.rd-timeline-item[b-6bbrjm226p] {
    position: relative;
    padding-left: 1.25rem;
    padding-bottom: 1rem;
}

.rd-timeline-item:last-child[b-6bbrjm226p] {
    padding-bottom: 0;
}

.rd-timeline-icon[b-6bbrjm226p] {
    position: absolute;
    left: 0;
    top: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mtmp-electric-blue, #117BFF);
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 2px var(--mtmp-electric-blue, #117BFF);
}

.rd-timeline-item:not(:first-child) .rd-timeline-icon[b-6bbrjm226p] {
    background: #FFFFFF;
    box-shadow: 0 0 0 2px var(--mtmp-border-gray, #DCE5F2);
}

.rd-timeline-time[b-6bbrjm226p] {
    font-size: 0.7rem;
    color: var(--mtmp-text-gray, #6B7A90);
    margin-bottom: 0.15rem;
}

.rd-timeline-title[b-6bbrjm226p] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mtmp-dark-text, #1D2C48);
}

.rd-timeline-user[b-6bbrjm226p] {
    font-size: 0.75rem;
    color: var(--mtmp-text-gray, #6B7A90);
    margin-top: 0.1rem;
}

.rd-timeline-note[b-6bbrjm226p] {
    font-size: 0.75rem;
    color: var(--mtmp-text-gray, #6B7A90);
    font-style: italic;
    margin-top: 0.25rem;
    padding: 0.35rem 0.5rem;
    background: var(--mtmp-ice-blue, #F4FAFF);
    border-left: 2px solid var(--mtmp-electric-blue, #117BFF);
    border-radius: 4px;
}


/* ── Attachments list (sidebar) ──────────────────────────────────────── */

.rd-attachments[b-6bbrjm226p] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.rd-attachment-item[b-6bbrjm226p] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.65rem;
    background: var(--mtmp-ice-blue, #F4FAFF);
    border-radius: 8px;
    border: 1px solid transparent;
    transition: border-color 0.15s ease;
}

.rd-attachment-item:hover[b-6bbrjm226p] {
    border-color: var(--mtmp-border-gray, #DCE5F2);
}

.rd-attachment-icon[b-6bbrjm226p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #FFFFFF;
    color: var(--mtmp-electric-blue, #117BFF);
    border-radius: 6px;
    flex-shrink: 0;
    font-size: 0.85rem;
    border: 1px solid var(--mtmp-border-gray, #DCE5F2);
}

.rd-attachment-body[b-6bbrjm226p] {
    flex: 1 1 auto;
    min-width: 0;
}

.rd-attachment-name[b-6bbrjm226p] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mtmp-dark-text, #1D2C48);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rd-attachment-meta[b-6bbrjm226p] {
    font-size: 0.7rem;
    color: var(--mtmp-text-gray, #6B7A90);
}

.rd-attachment-btn[b-6bbrjm226p] {
    background: #FFFFFF;
    border: 1px solid var(--mtmp-border-gray, #DCE5F2);
    color: var(--mtmp-electric-blue, #117BFF);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.rd-attachment-btn:hover:not(:disabled)[b-6bbrjm226p] {
    background: var(--mtmp-soft-sky, #D8F1FF);
}

.rd-attachment-btn:disabled[b-6bbrjm226p] {
    opacity: 0.55;
    cursor: not-allowed;
}


/* ── About info card (sidebar bottom) ────────────────────────────────── */

.rd-about-card[b-6bbrjm226p] {
    background: rgba(17, 123, 255, 0.06);
    border: 1px solid rgba(17, 123, 255, 0.15);
}

.rd-about-title[b-6bbrjm226p] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mtmp-electric-blue, #117BFF);
    margin-bottom: 0.4rem;
}

.rd-about-body[b-6bbrjm226p] {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--mtmp-text-gray, #6B7A90);
}


/* ── Misc ────────────────────────────────────────────────────────────── */

.rd-muted[b-6bbrjm226p] {
    color: var(--mtmp-text-gray, #6B7A90);
}


/* ── Responsive tweaks ───────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .rd-header[b-6bbrjm226p] {
        flex-direction: column;
        align-items: stretch;
    }

    .rd-header-actions[b-6bbrjm226p] {
        justify-content: flex-start;
    }

    .rd-header-title[b-6bbrjm226p] {
        font-size: 1.5rem;
    }

    .rd-stepper[b-6bbrjm226p] {
        overflow-x: auto;
        gap: 1rem;
    }

    .rd-step[b-6bbrjm226p] {
        min-width: 100px;
    }

    .rd-metadata dd[b-6bbrjm226p] {
        text-align: left;
    }
}


/* ── DM-07 legacy — checkbox opt-out (memoria DM checkbox override) ──── */

[b-6bbrjm226p] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-6bbrjm226p] input[type="checkbox"].form-check-input {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    border-radius: 0;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/Requests.razor.rz.scp.css */
/* UX-DS-08 Request Center (2026-08-10) — Brand-pack refresh for the Request
   search page. Follows the AEP pilot pattern (docs from 2026-07-27): consume
   global --mtmp-* tokens directly, do NOT redefine --medtronic-* at page
   scope. Keeps the sheet tokenized so every DM search page moves together
   when the brand tokens shift. */

/* ── Page wrapper ────────────────────────────────────────────────────── */

.request-center[b-pz6bzdeacl] {
    padding-top: 1.25rem;
    padding-bottom: 2rem;
    color: var(--mtmp-dark-text, #1D2C48);
}

/* ── Header ──────────────────────────────────────────────────────────── */

.rc-header[b-pz6bzdeacl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.rc-header-lead[b-pz6bzdeacl] {
    flex: 1 1 auto;
    min-width: 0;
}

.rc-breadcrumb[b-pz6bzdeacl] {
    font-size: 0.85rem;
    background: transparent;
    padding: 0;
}

.rc-breadcrumb .breadcrumb-item a[b-pz6bzdeacl] {
    color: var(--mtmp-text-gray, #6B7A90);
    text-decoration: none;
}

.rc-breadcrumb .breadcrumb-item a:hover[b-pz6bzdeacl] {
    color: var(--mtmp-electric-blue, #117BFF);
}

.rc-breadcrumb .breadcrumb-item.active[b-pz6bzdeacl] {
    color: var(--mtmp-electric-blue, #117BFF);
    font-weight: 500;
}

.rc-header-title-row[b-pz6bzdeacl] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Title + subtitle now consume the shared `.page-title` (site.css) and
   `.text-muted` classes so the header size / weight / color matches
   Tools / Parts / AEP (24px semibold `--medtronic-blue-primary`). The
   .rc-header-icon block was removed 2026-08-10 per client feedback. */

.rc-header-actions[b-pz6bzdeacl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

/* Buttons — moved to `wwwroot/css/design-system/dm-catalog.css` (2026-08-10)
   so any DM catalog / event page can reuse the same look via .dm-btn-primary
   / .dm-btn-secondary. This page consumes them directly in the markup — no
   page-scoped button styling lives here anymore. */

/* ── Cards ───────────────────────────────────────────────────────────── */

.rc-card[b-pz6bzdeacl] {
    background: #FFFFFF;
    border: 1px solid rgba(10, 37, 72, 0.06);
    border-radius: var(--mtmp-radius-lg, 16px);
    box-shadow: var(--mtmp-shadow-soft, 0 8px 24px rgba(6, 20, 44, 0.08));
    overflow: hidden;
}

.rc-card-header[b-pz6bzdeacl] {
    background: #FFFFFF;
    border-bottom: 1px solid var(--mtmp-border-gray, #DCE5F2);
    padding: 0.9rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.rc-card-header-icon[b-pz6bzdeacl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--mtmp-soft-sky, #D8F1FF);
    color: var(--mtmp-electric-blue, #117BFF);
    font-size: 0.8rem;
}

.rc-card-header-title[b-pz6bzdeacl] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mtmp-dark-text, #1D2C48);
}

/* ── Filters ─────────────────────────────────────────────────────────── */

.rc-filter-label[b-pz6bzdeacl] {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mtmp-text-gray, #6B7A90);
    margin-bottom: 0.35rem;
}

.rc-filter-select[b-pz6bzdeacl],
.rc-multiselect-button[b-pz6bzdeacl] {
    background: #FFFFFF;
    border: 1px solid var(--mtmp-border-gray, #DCE5F2);
    border-radius: var(--mtmp-radius-sm, 8px);
    color: var(--mtmp-dark-text, #1D2C48);
    font-size: 0.9rem;
    padding: 0.55rem 0.75rem;
    min-height: 42px;
}

.rc-filter-select:focus[b-pz6bzdeacl],
.rc-multiselect-button:focus[b-pz6bzdeacl] {
    border-color: var(--mtmp-electric-blue, #117BFF);
    box-shadow: 0 0 0 3px rgba(17, 123, 255, 0.15);
    outline: none;
}

.rc-multiselect-button[b-pz6bzdeacl] {
    text-align: left;
}

.rc-multiselect-placeholder[b-pz6bzdeacl] {
    color: var(--mtmp-text-gray, #6B7A90);
}

.rc-multiselect-caret[b-pz6bzdeacl] {
    font-size: 0.6rem;
    color: var(--mtmp-text-gray, #6B7A90);
    margin-left: 0.5rem;
}

.rc-dropdown-scrim[b-pz6bzdeacl] {
    z-index: 1040;
    background: transparent;
}

.rc-multiselect-panel[b-pz6bzdeacl] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 1px solid var(--mtmp-border-gray, #DCE5F2);
    border-radius: var(--mtmp-radius-sm, 8px);
    box-shadow: 0 8px 24px rgba(6, 20, 44, 0.12);
    z-index: 1050;
    min-width: 260px;
}

.rc-multiselect-scroll[b-pz6bzdeacl] {
    max-height: 260px;
    overflow-y: auto;
}

.rc-multiselect-item[b-pz6bzdeacl] {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--mtmp-dark-text, #1D2C48);
}

.rc-multiselect-item:hover[b-pz6bzdeacl] {
    background: var(--mtmp-ice-blue, #F4FAFF);
}

/* Supplier picker */
.rc-supplier-selected .rc-supplier-selected-value[b-pz6bzdeacl] {
    background: var(--mtmp-ice-blue, #F4FAFF);
    border-color: var(--mtmp-border-gray, #DCE5F2);
    color: var(--mtmp-dark-text, #1D2C48);
    min-height: 42px;
}

.rc-supplier-code[b-pz6bzdeacl] {
    color: var(--mtmp-electric-blue, #117BFF);
    font-weight: 600;
}

.rc-supplier-clear[b-pz6bzdeacl] {
    background: #FFFFFF;
    border: 1px solid var(--mtmp-border-gray, #DCE5F2);
    color: var(--mtmp-text-gray, #6B7A90);
}

.rc-supplier-clear:hover[b-pz6bzdeacl] {
    background: var(--mtmp-ice-blue, #F4FAFF);
    color: var(--mtmp-error, #EF5350);
}

.rc-supplier-results[b-pz6bzdeacl] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 1px solid var(--mtmp-border-gray, #DCE5F2);
    border-radius: var(--mtmp-radius-sm, 8px);
    box-shadow: 0 8px 24px rgba(6, 20, 44, 0.12);
    z-index: 1050;
    max-height: 260px;
    overflow-y: auto;
}

.rc-supplier-result-item[b-pz6bzdeacl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.55rem 0.85rem;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--mtmp-dark-text, #1D2C48);
}

.rc-supplier-result-item:hover[b-pz6bzdeacl] {
    background: var(--mtmp-ice-blue, #F4FAFF);
}

/* ── Results ─────────────────────────────────────────────────────────── */

.rc-results-header[b-pz6bzdeacl] {
    justify-content: space-between;
}

.rc-results-count[b-pz6bzdeacl] {
    background: var(--mtmp-soft-sky, #D8F1FF);
    color: var(--mtmp-electric-blue, #117BFF);
    padding: 0.25rem 0.7rem;
    border-radius: var(--mtmp-radius-pill, 999px);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Base table look moved to `dm-catalog.css` (.dm-catalog-table +
   .dm-catalog-row). This page keeps only the page-specific override:
   min-width so the 7-column layout doesn't collapse on narrow viewports. */
.rc-results-table[b-pz6bzdeacl] {
    min-width: 1050px;
}

.rc-request-id[b-pz6bzdeacl] {
    font-family: "SF Mono", Consolas, monospace;
    font-weight: 700;
    color: var(--mtmp-electric-blue, #117BFF);
    text-decoration: none;
    font-size: 0.85rem;
}

.rc-request-id:hover[b-pz6bzdeacl] {
    text-decoration: underline;
}

.rc-supplier-link[b-pz6bzdeacl] {
    color: var(--mtmp-dark-text, #1D2C48);
    text-decoration: none;
    font-weight: 500;
}

.rc-supplier-link:hover[b-pz6bzdeacl] {
    color: var(--mtmp-electric-blue, #117BFF);
    text-decoration: underline;
}

.rc-created-by[b-pz6bzdeacl] {
    color: var(--mtmp-dark-text, #1D2C48);
    font-weight: 500;
}

.rc-date-primary[b-pz6bzdeacl] {
    color: var(--mtmp-dark-text, #1D2C48);
    font-weight: 500;
    line-height: 1.2;
}

.rc-date-secondary[b-pz6bzdeacl] {
    color: var(--mtmp-text-gray, #6B7A90);
    font-size: 0.75rem;
}

.rc-muted[b-pz6bzdeacl] {
    color: var(--mtmp-text-gray, #6B7A90);
}

.rc-empty[b-pz6bzdeacl] {
    color: var(--mtmp-text-gray, #6B7A90);
    font-size: 0.9rem;
}

/* ── Type badges (Tool / Parts / Supplier) ───────────────────────────── */

.rc-type-badge[b-pz6bzdeacl] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.65rem;
    border-radius: var(--mtmp-radius-sm, 8px);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.rc-type-badge-icon[b-pz6bzdeacl] {
    font-size: 0.7rem;
    line-height: 1;
}

.rc-type-tool[b-pz6bzdeacl] {
    background: rgba(46, 204, 113, 0.14);
    color: #1F8A4C;
}

.rc-type-parts[b-pz6bzdeacl] {
    background: rgba(245, 166, 35, 0.16);
    color: #B26F00;
}

.rc-type-supplier[b-pz6bzdeacl] {
    background: rgba(17, 123, 255, 0.14);
    color: var(--mtmp-electric-blue, #117BFF);
}

.rc-type-unknown[b-pz6bzdeacl] {
    background: var(--mtmp-light-gray, #EDF2F7);
    color: var(--mtmp-text-gray, #6B7A90);
}

/* ── Status badges (6 canonical statuses) ────────────────────────────── */

.rc-status-badge[b-pz6bzdeacl] {
    display: inline-block;
    padding: 0.32rem 0.7rem;
    border-radius: var(--mtmp-radius-pill, 999px);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.rc-status-open[b-pz6bzdeacl] {
    background: rgba(17, 123, 255, 0.14);
    color: var(--mtmp-electric-blue, #117BFF);
}

.rc-status-progress-ok[b-pz6bzdeacl] {
    background: rgba(77, 216, 255, 0.22);
    color: #06618A;
}

.rc-status-progress-delayed[b-pz6bzdeacl] {
    background: rgba(245, 166, 35, 0.18);
    color: #B26F00;
}

.rc-status-reschedule[b-pz6bzdeacl] {
    background: rgba(110, 59, 255, 0.14);
    color: #5326D9;
}

.rc-status-completed[b-pz6bzdeacl] {
    background: rgba(46, 204, 113, 0.16);
    color: #1F8A4C;
}

.rc-status-closed[b-pz6bzdeacl] {
    background: var(--mtmp-light-gray, #EDF2F7);
    color: var(--mtmp-text-gray, #6B7A90);
}

.rc-status-unknown[b-pz6bzdeacl] {
    background: var(--mtmp-light-gray, #EDF2F7);
    color: var(--mtmp-text-gray, #6B7A90);
}

/* ── Progress column ─────────────────────────────────────────────────── */

/* UX-DS-08 (2026-08-10) — Progress column uses Bootstrap primitives
   (.progress + .progress-bar) with inline background for the fill. That
   sidesteps whatever unscoped rule was zeroing out our custom classes
   during smoke: `.rc-progress-*` selectors compiled to scoped attrs but
   the paint never landed. Only rc-progress-wrap remains for row-scoped
   spacing tweaks; the label sits below the bar with muted brand copy. */
.rc-progress-wrap[b-pz6bzdeacl] {
    margin-bottom: 0.25rem;
    border-radius: var(--mtmp-radius-pill, 999px);
    overflow: hidden;
}

.rc-progress-label[b-pz6bzdeacl] {
    color: var(--mtmp-text-gray, #6B7A90);
    font-size: 0.72rem;
    font-weight: 600;
}

/* ── Pagination ──────────────────────────────────────────────────────── */

.rc-results-footer[b-pz6bzdeacl] {
    background: #FFFFFF;
    border-top: 1px solid var(--mtmp-border-gray, #DCE5F2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
}

.rc-pagination-summary[b-pz6bzdeacl] {
    color: var(--mtmp-text-gray, #6B7A90);
    font-size: 0.8rem;
}

.rc-pagination .page-link[b-pz6bzdeacl] {
    border: 1px solid var(--mtmp-border-gray, #DCE5F2);
    color: var(--mtmp-dark-text, #1D2C48);
    background: #FFFFFF;
    margin: 0 2px;
    min-width: 32px;
    text-align: center;
    border-radius: var(--mtmp-radius-sm, 8px);
    font-size: 0.85rem;
    padding: 0.25rem 0.65rem;
}

.rc-pagination .page-link:hover:not(:disabled)[b-pz6bzdeacl] {
    background: var(--mtmp-ice-blue, #F4FAFF);
    color: var(--mtmp-electric-blue, #117BFF);
    border-color: var(--mtmp-electric-blue, #117BFF);
}

.rc-pagination .page-item.active .page-link[b-pz6bzdeacl] {
    background: var(--mtmp-electric-blue, #117BFF);
    color: #FFFFFF;
    border-color: var(--mtmp-electric-blue, #117BFF);
    font-weight: 600;
}

.rc-pagination .page-item.disabled .page-link[b-pz6bzdeacl] {
    color: var(--mtmp-text-gray, #6B7A90);
    background: #FFFFFF;
    opacity: 0.55;
}

/* ── Responsive tweaks ───────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .rc-header[b-pz6bzdeacl] {
        flex-direction: column;
        align-items: stretch;
    }

    .rc-header-actions[b-pz6bzdeacl] {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .rc-header-title[b-pz6bzdeacl] {
        font-size: 1.5rem;
    }

    .rc-header-icon[b-pz6bzdeacl] {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
}

/* ── DM-07-01 legacy — checkbox opt-out (2026-05-28) ─────────────────────
 * Opt out of dynamic-fields.css global .form-check overrides. Same pattern
 * as Cfns.razor.css / Tools.razor.css. Without this reset, the Status /
 * Type multi-select checkboxes in the filter bar get the global 44x44
 * touch target + ::before/::after "dirty" pseudo-elements that misalign
 * with the labels. Restore native browser rendering.
 * (Memory: "DM page checkboxes — scoped CSS opt-out".)
 * ------------------------------------------------------------------------ */

[b-pz6bzdeacl] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-pz6bzdeacl] input[type="checkbox"].form-check-input {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    border-radius: 0;
}

[b-pz6bzdeacl] .form-check-input::before,
[b-pz6bzdeacl] .form-check-input::after {
    content: none !important;
    display: none !important;
}

[b-pz6bzdeacl] .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
    outline: none !important;
}

[b-pz6bzdeacl] .form-check-input:checked {
    background-color: revert !important;
    border-color: revert !important;
}

[b-pz6bzdeacl] .form-check {
    display: block !important;
    padding: 0 0 0 1.5em !important;
    min-height: auto !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    justify-content: flex-start !important;
    transition: none !important;
}

[b-pz6bzdeacl] .form-check:hover {
    background-color: transparent !important;
}

[b-pz6bzdeacl] .form-check-label {
    cursor: pointer;
    margin-left: 0.25rem;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/SupplierDetail.razor.rz.scp.css */
/* MTMP 360 — Supplier Detail page-scoped styles
   ------------------------------------------------------------------------
   Hero + avatar + contact mini-card primitives live here. The KPI defaults
   and .tool-panel-title tokens are inherited from design-system/cards.css
   and ToolDetail.razor.css respectively — .tool-panel-title is page-scoped
   so we redeclare a compatible rule here (same visual, own class) rather
   than reach across pages. */

/* ── Hero ────────────────────────────────────────────────────────────── */

.supplier-hero[b-5l26kx4lsr] {
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(17,123,255,0.04), rgba(46,204,113,0.03));
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
}

.supplier-hero-title[b-5l26kx4lsr] {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-strong, #212529);
}

/* Initials avatar — same 96px footprint as the Tool hero thumbnail so
   the two detail pages feel proportionate. */
.supplier-hero-avatar[b-5l26kx4lsr] {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--med-blue-primary, #117bff), #5aa9ff);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(17, 123, 255, 0.25);
}

.supplier-hero-meta[b-5l26kx4lsr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.9rem;
    color: var(--text-strong, #212529);
}

.supplier-hero-meta-label[b-5l26kx4lsr] {
    color: var(--medtronic-gray-600, #6c757d);
    font-weight: 500;
    margin-right: 0.25rem;
}

.supplier-hero-aside[b-5l26kx4lsr] {
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 8px;
    min-width: 220px;
}

.supplier-hero-actions .btn[b-5l26kx4lsr] {
    white-space: nowrap;
}

/* ── Overview field row (icon + label + value) ───────────────────────── */

.supplier-overview-field[b-5l26kx4lsr] {
    display: flex;
    align-items: flex-start;
    padding: 0.35rem 0;
}

.supplier-overview-field .oi[b-5l26kx4lsr] {
    margin-top: 3px;
    font-size: 0.9rem;
}

/* ── Contact mini-card (used inside Overview + Contacts tab) ─────────── */

.supplier-contact-card[b-5l26kx4lsr] {
    transition: box-shadow 120ms ease;
}

.supplier-contact-card:hover[b-5l26kx4lsr] {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.supplier-contact-avatar[b-5l26kx4lsr] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--medtronic-gray-100, #f8f9fa);
    color: var(--med-blue-primary, #117bff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid rgba(17, 123, 255, 0.2);
}

/* Envelope send-email button — icon-only, 28×28 so it doesn't tower over
   the 40px avatar. Default Bootstrap .btn padding + icon line-height made
   it read as a 40+px tall pill in the contact cards. */
.supplier-contact-mail-btn[b-5l26kx4lsr] {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    line-height: 1;
    border-radius: 6px;
}

/* ── Recent Activity feed (Overview preview + History tab) ────────────
   Timeline-ish look: each row = colored dot + date/reference/actor stack,
   separated by a subtle border. The `pe-none` class on the anchor when
   DetailUrl is null disables the pointer feedback (still readable, not
   clickable). */

.supplier-activity-list[b-5l26kx4lsr] {
    max-height: 480px;
    overflow-y: auto;
}

.supplier-activity-item[b-5l26kx4lsr] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.supplier-activity-item:last-child[b-5l26kx4lsr] {
    border-bottom: none;
}

.supplier-activity-item > a:hover[b-5l26kx4lsr] {
    background: rgba(0, 0, 0, 0.02);
}

.supplier-activity-dot[b-5l26kx4lsr] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

/* ── Supplier Health card — 3 stacked metric rows ────────────────────── */

.supplier-health-row[b-5l26kx4lsr] {
    /* Spacing hook; the row-to-row separator is the mb-3 utility on the
       markup side (kept there so it's easy to tune without touching CSS). */
}

.supplier-health-stars[b-5l26kx4lsr] {
    display: inline-flex;
    gap: 2px;
    font-size: 0.95rem;
    line-height: 1;
}

.supplier-health-star-filled[b-5l26kx4lsr] {
    color: #f5b301;   /* amber — same tint family as .kpi-tint-amber */
}

.supplier-health-star-empty[b-5l26kx4lsr] {
    color: rgba(0, 0, 0, 0.15);
}

.min-width-0[b-5l26kx4lsr] {
    min-width: 0; /* enables text-truncate inside a flex child */
}

/* ── Panel title — mirrors ToolDetail.razor.css so Supplier Detail's
     card-header uppercase caption looks identical across surfaces. ── */

[b-5l26kx4lsr] .card-header.tool-panel-title {
    background: var(--medtronic-gray-100, #f8f9fa);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--medtronic-gray-700, #495057);
    padding: 0.55rem 0.9rem;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/Suppliers.razor.rz.scp.css */
/* MTMP 360 — SUPPLIER NETWORK page-scoped styles
   ------------------------------------------------------------------------
   Sibling of Tools.razor.css. Only page-specific overrides live here:
     • Uppercase page title tracking (matches Tools Catalog).
     • Collapsible Search Filters header — makes the whole header row
       feel clickable while keeping the inner Search/Clear buttons
       visually distinct.
   KPI defaults + card / shadow tokens live in
   `wwwroot/css/design-system/cards.css` (loaded in @layer components). */

.suppliers-catalog-title[b-chcayc63l1] {
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--text-strong);
}

/* The header row is a flex container; the toggle button on the left
   grows to consume free space so the whole header stripe behaves as
   a clickable target. Buttons on the right (Search / Clear Filters)
   sit inside a stopPropagation wrapper so their clicks don't bubble
   up to the toggle. */
.suppliers-search-filters > .card-header[b-chcayc63l1] {
    background: var(--medtronic-gray-100, #f8f9fa);
}

.suppliers-search-filters > .card-header:hover[b-chcayc63l1] {
    background: rgba(0, 0, 0, 0.03);
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/SustainingDetail.razor.rz.scp.css */
/* DM-09-03/04 — opt out of dynamic-fields.css global .form-check overrides. */

[b-ujouqsswf5] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-ujouqsswf5] input[type="checkbox"].form-check-input {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    border-radius: 0;
}

[b-ujouqsswf5] .form-check {
    min-height: auto !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    transition: none !important;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/SustainingList.razor.rz.scp.css */
/* DM-09-01 — opt out of dynamic-fields.css global .form-check overrides.
 * Same pattern as Audits.razor.css. */

[b-6coqgra8l8] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-6coqgra8l8] input[type="checkbox"].form-check-input {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    border-radius: 0;
}

[b-6coqgra8l8] .form-check-input::before,
[b-6coqgra8l8] .form-check-input::after {
    content: none !important;
    display: none !important;
}

[b-6coqgra8l8] .form-check {
    min-height: auto !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    transition: none !important;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/ToolAlertsRiskCenter.razor.rz.scp.css */
/* Tool Alerts & Risk Center — page-scoped styling. Mirrors the sibling
   AgingEventsCenter.razor.css patterns (KPI strip, spacing) but with a
   dedicated .tarc-* namespace so per-panel overrides don't leak.
   TARC-01 ships only container + KPI-strip scaffolding; TARC-03..13 add
   per-panel styles inline in each component's .razor.css. */

[b-62xo6dchb4] .tarc-container { padding-top: 0.5rem; }

/* ── Row 1: KPI strip (6 tiles evenly split) — same pattern as .aec-kpi-* */
[b-62xo6dchb4] .tarc-kpi-strip { row-gap: 0.5rem; }

[b-62xo6dchb4] .tarc-kpi-col {
    flex: 1 1 15%;
    min-width: 160px;
}

/* ── Hero refresh block (contra fondo navy del `.header-band`) ────────── */
/* `.text-muted` global tira gris oscuro; contra navy no lee. Sobre-escribimos
   sólo dentro del bloque refresh del hero de esta página. */
[b-62xo6dchb4] .tarc-hero-refresh .text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}

[b-62xo6dchb4] .tarc-hero-refresh strong { color: #FFFFFF; }
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/ToolCreate.razor.rz.scp.css */
/* DM-03-03 — opt out of dynamic-fields.css global form-check overrides.
 * Same pattern as Tools.razor.css and DmCustomFields.razor.css. The "Family
 * Tool" checkbox + future Tab 2-6 checkboxes get the global 44x44 touch target
 * + dirty pseudo-elements without this scoped reset. Restore native browser
 * rendering. */

[b-5u83w4aznk] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-5u83w4aznk] input[type="checkbox"].form-check-input {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    border-radius: 0;
}

[b-5u83w4aznk] .form-check-input::before,
[b-5u83w4aznk] .form-check-input::after {
    content: none !important;
    display: none !important;
}

[b-5u83w4aznk] .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
    outline: none !important;
}

[b-5u83w4aznk] .form-check-input:checked {
    background-color: revert !important;
    border-color: revert !important;
}

/* Override dynamic-fields.css:151 — it forces .form-check into a centered flex
 * container with 0.75rem padding + 44px min-height, which misaligns the checkbox
 * relative to the field labels above. Restore Bootstrap 5 native:
 *   - display: block (not flex-center)
 *   - padding-left: 1.5em (matches .form-check-input { margin-left: -1.5em })
 *   - no min-height / borders / background
 * Net: checkbox sits at column edge, label inline to its right.
 */
[b-5u83w4aznk] .form-check {
    display: block !important;
    padding: 0 0 0 1.5em !important;
    min-height: auto !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    justify-content: flex-start !important;
    transition: none !important;
}

[b-5u83w4aznk] .form-check:hover {
    background-color: transparent !important;
}

[b-5u83w4aznk] .form-check-label {
    cursor: pointer;
    margin-left: 0.25rem;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/ToolDetail.razor.rz.scp.css */
/* Tool History — inline event chart (Audit / Sustaining / ChangeRequest by month).
   Heights are computed in pixels at render time (see ToolDetail.razor Overview tab)
   so we deliberately avoid any height:100% inheritance chain — Blazor scoped CSS +
   nested flex parents made %-based bars collapse to 0. */

.event-chart[b-agxdvdok4f] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bs-border-color);
    overflow-x: auto;
}

.event-chart-col[b-agxdvdok4f] {
    flex: 1 0 56px;
    min-width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.event-chart-stack[b-agxdvdok4f] {
    width: 36px;
    display: flex;
    flex-direction: column-reverse;
    border-radius: 0.25rem 0.25rem 0 0;
    overflow: hidden;
    min-height: 1px;
}

.event-chart-bar[b-agxdvdok4f] {
    width: 100%;
    transition: opacity 120ms ease-in-out;
}

.event-chart-bar:hover[b-agxdvdok4f] { opacity: 0.85; }

.event-chart-label[b-agxdvdok4f] {
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: var(--bs-secondary-color);
    text-align: center;
    line-height: 1.1;
}

.event-chart-swatch[b-agxdvdok4f] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 0.15rem;
    margin-right: 0.35rem;
    vertical-align: middle;
}

/* ── Tool Hero (2026-08-06) — static visual scaffold from mockup ──────────
   Thumbnail sits at ~120px so it doesn't dominate the identity stack; on
   sub-md viewports it hides (d-md-block on the img wrapper). The 4-col
   meta uses gap-4 for horizontal rhythm — labels are muted uppercase mini
   captions, values are stronger. KPI strip inherits the shared `.kpi-*`
   primitives from design-system/cards.css; only page-specific extras
   (status dot, thumbnail sizing, title typography) live here. */

.tool-hero-thumb[b-agxdvdok4f] {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: 10px;
    background: var(--medtronic-gray-100, #f8f9fa);
    padding: 4px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.tool-hero-title[b-agxdvdok4f] {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-strong, #212529);
}

.tool-hero-meta[b-agxdvdok4f] {
    row-gap: 0.75rem !important;
}

.tool-hero-meta-label[b-agxdvdok4f] {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--medtronic-gray-600, #6c757d);
    line-height: 1.1;
}

.tool-hero-meta-value[b-agxdvdok4f] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-strong, #212529);
    line-height: 1.2;
    margin-top: 2px;
}

.tool-hero-meta-sub[b-agxdvdok4f] {
    font-size: 0.72rem;
    color: var(--medtronic-gray-600, #6c757d);
    line-height: 1.15;
}

/* Small green/red/amber dot used inside the Condition + Status KPI cards.
   Falls back to Bootstrap's `.bg-success` / `.bg-danger` / `.bg-warning`
   which the caller sets alongside this class. */
.tool-hero-status-dot[b-agxdvdok4f] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Actions row on the top-right — matches the mockup: outlined History +
   outlined Print + solid primary Edit. Kept in .btn-sm to sit inline with
   the breadcrumb without visual weight. */
.tool-hero-actions .btn[b-agxdvdok4f] {
    white-space: nowrap;
}

/* KPI strip inside the hero — force each column to occupy an equal share
   so five cards line up cleanly at xxl. Below xxl they wrap on the row's
   own grid (col with no width lock). */
.tool-hero-kpis .col[b-agxdvdok4f] {
    min-width: 160px;
}

/* ── Compact hero-KPI overrides (2026-08-06) ──────────────────────────
   The shared .kpi-* primitives (design-system/cards.css) were tuned for
   the Tools Catalog search page KPI strip where 5 metrics fill a wide
   row. The tool-detail hero shares that row with the thumbnail + a
   4-col identity meta, so the cards need less vertical/horizontal weight.
   These overrides are page-scoped (Blazor .razor.css → attribute
   [b-xxx]) and only bite inside `.tool-hero-kpis`, so the search-page
   sizing is untouched. */
[b-agxdvdok4f] .tool-hero-kpis .kpi-card > .card-body {
    padding: 0.4rem 0.55rem;
}

[b-agxdvdok4f] .tool-hero-kpis .kpi-label {
    font-size: 0.6rem;
}

[b-agxdvdok4f] .tool-hero-kpis .kpi-value {
    font-size: 1rem;
}

[b-agxdvdok4f] .tool-hero-kpis .kpi-sub {
    font-size: 0.6rem;
    white-space: normal;         /* two-line "Shot Count / Warranty" fits */
    overflow: visible;
}

[b-agxdvdok4f] .tool-hero-kpis .kpi-icon {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
}

[b-agxdvdok4f] .tool-hero-kpis .kpi-donut {
    width: 52px;
    height: 52px;
}

[b-agxdvdok4f] .tool-hero-kpis .kpi-donut-label {
    font-size: 0.62rem;
}

[b-agxdvdok4f] .tool-hero-kpis .tool-hero-status-dot {
    width: 9px;
    height: 9px;
}

/* ── Panel titles (2026-08-06) — small uppercase caption in card-header,
   matches the mockup's "GENERAL INFORMATION / KEY ATTRIBUTES / …" pattern.
   Applies to every card that opts in via `.tool-panel-title` inside this
   page (page-scoped .razor.css → attribute [b-xxx], so no leakage to
   other pages). Kept flat (no `.overview-panels` prefix) so the same
   class works across Overview / Evaluation / Supplier / Medtronic /
   Parts / CFN / Comments tabs without needing wrapper divs. */
[b-agxdvdok4f] .card-header.tool-panel-title {
    background: var(--medtronic-gray-100, #f8f9fa);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--medtronic-gray-700, #495057);
    padding: 0.55rem 0.9rem;
}

/* ── History → Overview redesign (History Screen.png, 2026-08-31) ────────
   Espeja el tratamiento visual de PartDetail.razor.css .part-timeline* y
   part-hero-kpis, pero namespaced a `tool-*` para no colisionar con el
   scoped bundle de PartDetail. */

.tool-history-kpis .col[b-agxdvdok4f] {
    min-width: 130px;
}

[b-agxdvdok4f] .tool-history-kpis .kpi-card > .card-body {
    padding: 0.5rem 0.65rem;
}

[b-agxdvdok4f] .tool-history-kpis .kpi-label {
    font-size: 0.63rem;
}

[b-agxdvdok4f] .tool-history-kpis .kpi-value {
    font-size: 1.05rem;
}

[b-agxdvdok4f] .tool-history-kpis .kpi-icon {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
    flex: 0 0 auto;
}

/* Timeline — spine vertical + dots circulares tinted (Activity Timeline). */
.tool-timeline[b-agxdvdok4f] {
    position: relative;
    padding-left: 3rem;
}

.tool-timeline[b-agxdvdok4f]::before {
    content: '';
    position: absolute;
    top: 0.75rem;
    bottom: 0.75rem;
    left: 1.5rem;
    width: 2px;
    background: var(--bs-border-color, #dee2e6);
    border-radius: 1px;
}

.tool-timeline-item[b-agxdvdok4f] {
    position: relative;
    padding-bottom: 1.25rem;
}

.tool-timeline-item:last-child[b-agxdvdok4f] {
    padding-bottom: 0;
}

.tool-timeline-dot[b-agxdvdok4f] {
    position: absolute;
    left: -2.375rem;
    top: 0.05rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.8rem;
    box-shadow: 0 0 0 3px #fff;
}

.tool-timeline-dot.tint-success[b-agxdvdok4f] { background: var(--bs-success, #198754); }
.tool-timeline-dot.tint-warning[b-agxdvdok4f] { background: var(--bs-warning, #ffc107); color: #212529; }
.tool-timeline-dot.tint-primary[b-agxdvdok4f] { background: var(--bs-primary, #0d6efd); }
.tool-timeline-dot.tint-danger[b-agxdvdok4f]  { background: var(--bs-danger,  #dc3545); }
.tool-timeline-dot.tint-muted[b-agxdvdok4f]   { background: var(--bs-secondary, #6c757d); }

.tool-timeline-body[b-agxdvdok4f] {
    min-height: 30px;
}

/* Assoc-style table headers para Lifecycle Events placeholder — mismo look
   que PartDetail: uppercase, sin fondo, borde inferior gris. */
[b-agxdvdok4f] .assoc-table thead th {
    background: transparent !important;
    border-top: 0;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    color: var(--medtronic-gray-600, #6c757d);
    font-weight: 600;
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

[b-agxdvdok4f] .assoc-table th,
[b-agxdvdok4f] .assoc-table td {
    padding: 0.45rem 0.5rem;
    font-size: 0.8rem;
}

/* Performance Trends — inline SVG mini-charts (Lifecycle Progress + Condition
   Trend). Full width del card, ratio del viewBox controla la altura. */
.perf-svg[b-agxdvdok4f] {
    display: block;
    width: 100%;
    height: auto;
    max-height: 160px;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/ToolEdit.razor.rz.scp.css */
/* DM-03-03 — opt out of dynamic-fields.css global form-check overrides.
 * Same pattern as Tools.razor.css and DmCustomFields.razor.css. The "Family
 * Tool" checkbox + future Tab 2-6 checkboxes get the global 44x44 touch target
 * + dirty pseudo-elements without this scoped reset. Restore native browser
 * rendering. */

[b-fvv9sglo0o] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-fvv9sglo0o] input[type="checkbox"].form-check-input {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    border-radius: 0;
}

[b-fvv9sglo0o] .form-check-input::before,
[b-fvv9sglo0o] .form-check-input::after {
    content: none !important;
    display: none !important;
}

[b-fvv9sglo0o] .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
    outline: none !important;
}

[b-fvv9sglo0o] .form-check-input:checked {
    background-color: revert !important;
    border-color: revert !important;
}

/* Override dynamic-fields.css:151 — it forces .form-check into a centered flex
 * container with 0.75rem padding + 44px min-height, which misaligns the checkbox
 * relative to the field labels above. Restore Bootstrap 5 native:
 *   - display: block (not flex-center)
 *   - padding-left: 1.5em (matches .form-check-input { margin-left: -1.5em })
 *   - no min-height / borders / background
 * Net: checkbox sits at column edge, label inline to its right.
 */
[b-fvv9sglo0o] .form-check {
    display: block !important;
    padding: 0 0 0 1.5em !important;
    min-height: auto !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    justify-content: flex-start !important;
    transition: none !important;
}

[b-fvv9sglo0o] .form-check:hover {
    background-color: transparent !important;
}

[b-fvv9sglo0o] .form-check-label {
    cursor: pointer;
    margin-left: 0.25rem;
}
/* _content/MtmpProjectsPoc.Web/Pages/DataManagement/Tools.razor.rz.scp.css */
/* DM-03-01 — opt out of dynamic-fields.css global form-check overrides.
 * Same pattern as Pages/Admin/DmCustomFields.razor.css. The Tools page uses
 * native HTML checkboxes inside its compact multi-select dropdowns; without
 * this override, the global dynamic-fields.css applies 44x44 touch targets +
 * custom ::before/::after pseudo-elements that look "dirty" when the
 * checkbox loses focus. Restore native browser rendering. */

[b-jqamgz9l2m] .form-check-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 0.25em !important;
    border: revert !important;
    background-color: revert !important;
    background-image: none !important;
    box-shadow: none !important;
}

[b-jqamgz9l2m] input[type="checkbox"].form-check-input {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    border-radius: 0;
}

[b-jqamgz9l2m] .form-check-input::before,
[b-jqamgz9l2m] .form-check-input::after {
    content: none !important;
    display: none !important;
}

[b-jqamgz9l2m] .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
    outline: none !important;
}

[b-jqamgz9l2m] .form-check-input:checked {
    background-color: revert !important;
    border-color: revert !important;
}

/* ─── TOOLS CATALOG page-specific polish (mockup Up06072026 v2) ─────────
   Only bits that don't belong in the shared design system:
     • Uppercase page title tracking.
     • Collapsed Search Filters header (a <button> styled as a card-header).
     • Pagination color pass matching the mockup blue.
   Card / KPI / shadow defaults live in
   `wwwroot/css/design-system/cards.css` (loaded in @layer components). */

.tools-catalog-title[b-jqamgz9l2m] {
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--text-strong);
}

/* Collapsed Search Filters header — visually behaves like a card-header but
   is a real <button> for a11y (aria-expanded + keyboard toggle). */
[b-jqamgz9l2m] .tools-search-filters > button.card-header {
    background-color: var(--bs-light, #f8f9fa);
}

[b-jqamgz9l2m] .tools-search-filters > button.card-header:hover {
    background-color: #f1f3f5;
}

[b-jqamgz9l2m] .tools-search-filters > button.card-header:focus-visible {
    outline: 2px solid var(--med-blue-primary, #117bff);
    outline-offset: -2px;
}

/* Pagination footer — align pieces on one line comfortably. */
[b-jqamgz9l2m] .tools-pagination .pagination .page-link {
    color: var(--med-blue-primary, #117bff);
    border-radius: 4px;
    margin: 0 1px;
    min-width: 32px;
    text-align: center;
}

[b-jqamgz9l2m] .tools-pagination .pagination .page-item.active .page-link {
    background-color: var(--med-blue-primary, #117bff);
    border-color: var(--med-blue-primary, #117bff);
    color: #fff;
}
/* _content/MtmpProjectsPoc.Web/Pages/Login.razor.rz.scp.css */
/* MTMP 360 — Login page (mockup 2026-08-06)
   ------------------------------------------------------------------------
   Split-screen: dark brand hero on the left, floating white card on the
   right. All rules are scoped via Blazor's [b-xxx] attribute so nothing
   here leaks to other pages. The legacy .login-* rules in site.css
   target different class names and stay dormant. */

/* ── Page shell — full-viewport background with the card floated right
     (the logo + tagline live INSIDE the background image; no separate
     hero container in the DOM). ─────────────────────────────────────── */

.login-page[b-iit7awgzod] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 100vh;
    width: 100%;
    background-image: url("../img/login-bg.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #050b1f;   /* fallback while the PNG loads */
    overflow: hidden;
    padding: 2rem 3rem;
}

/* ── Card panel — anchored to the right of the viewport at lg+; centers
     on smaller screens so the card doesn't disappear off-canvas. ────── */

.login-form-panel[b-iit7awgzod] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 460px;
}

@media (max-width: 991.98px) {
    .login-page[b-iit7awgzod] {
        justify-content: center;
        padding: 1.5rem 1rem;
    }
}

.login-card[b-iit7awgzod] {
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(15, 30, 60, 0.12),
                0 2px 6px rgba(15, 30, 60, 0.08);
    padding: 2rem 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.login-card-logo[b-iit7awgzod] {
    display: block;
    height: 56px;
    width: auto;
    margin: 0 auto 0.5rem;
    /* Mark-only asset (Designer 59) — sized to feel proportionate to the
       Welcome title without competing with it. */
}

.login-card-title[b-iit7awgzod] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f1e3c;
    margin: 0.25rem 0 0.25rem;
    text-align: center;
    letter-spacing: -0.01em;
}

.login-card-subtitle[b-iit7awgzod] {
    font-size: 0.9rem;
    color: #6b7280;
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-card-brand[b-iit7awgzod] {
    color: #117bff;
    font-weight: 700;
}

.login-card-form[b-iit7awgzod] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Field group — input + optional eye toggle on the right for the
     password variant. Leading icons removed 2026-08-06 per client
     preference (clean minimal look). ─────────────────────────────── */

.login-field[b-iit7awgzod] {
    position: relative;
    margin-bottom: 0.75rem;
}

/* `::deep` is required because `<InputText>` is a child Blazor component —
   its rendered `<input>` element does NOT receive the parent Login.razor's
   scope attribute, so a plain `.login-field-input` selector never matches. */
[b-iit7awgzod] input.login-field-input {
    height: 44px;
    background: #f8fafc;
    border-color: #e2e8f0;
    border-radius: 10px;
    font-size: 0.95rem;
}

[b-iit7awgzod] input.login-field-input:focus {
    background: #ffffff;
    border-color: #117bff;
    box-shadow: 0 0 0 3px rgba(17, 123, 255, 0.15);
}

/* Password variant leaves room on the right for the eye-toggle button. */
[b-iit7awgzod] input.login-field-input-password {
    padding-right: 44px !important;
}

.login-field-eye[b-iit7awgzod] {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.85rem;
    z-index: 2;
}

.login-field-eye:hover[b-iit7awgzod] {
    background: rgba(0, 0, 0, 0.04);
    color: #64748b;
}

.login-field-error[b-iit7awgzod] {
    display: block;
    margin: -0.35rem 0 0.5rem 0.25rem;
    color: #dc3545;
    font-size: 0.78rem;
}

/* ── Remember me + Forgot password on the same row ───────────────── */

.login-actions-row[b-iit7awgzod] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.15rem 0 1.15rem;
    gap: 0.75rem;
}

.login-forgot-link[b-iit7awgzod] {
    color: #117bff;
    text-decoration: none;
    font-weight: 500;
}

.login-forgot-link:hover[b-iit7awgzod] {
    text-decoration: underline;
}

/* ── Primary sign-in button ─────────────────────────────────────── */

.login-primary-btn[b-iit7awgzod] {
    height: 48px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 12px rgba(17, 123, 255, 0.25);
    /* Flex centering guarantees "Sign In" (and the spinner+text pair while
       loading) sit dead-center inside the 48px pill, regardless of any
       whitespace nodes Blazor inserts between the button tag and its span
       children. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.login-primary-btn:hover:not(:disabled)[b-iit7awgzod] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(17, 123, 255, 0.32);
}

/* ── Footer inside the card — trust badge + copyright ───────────── */

.login-card-footer[b-iit7awgzod] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f2f7;
    text-align: center;
}

.login-card-tagline[b-iit7awgzod] {
    font-size: 0.78rem;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.login-card-copyright[b-iit7awgzod] {
    font-size: 0.72rem;
    color: #94a3b8;
}

/* Below lg: keep the card compact so it stays comfortably in-frame on
   phones. Full-viewport background stays as-is (may crop; acceptable). */
@media (max-width: 991.98px) {
    .login-card[b-iit7awgzod] {
        max-width: 420px;
    }
}
/* _content/MtmpProjectsPoc.Web/Pages/Notifications.razor.rz.scp.css */
/* Story 21.04 — la página completa del historial de notificaciones.
   Tokens del sistema, cero hex y cero !important nuevos. */

.notifications-page[b-0w5ls8up7o] {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
}

.notifications-list[b-0w5ls8up7o] {
    margin: 0;
    padding: 0;
}

/* El renglón es un <button> para que reciba foco y se active con teclado; hay que devolverle
   la apariencia de fila que el reset de Bootstrap le quita. */
.notification-row[b-0w5ls8up7o] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-default);
    padding: .75rem 1rem;
    cursor: pointer;
}

.notification-row:hover[b-0w5ls8up7o],
.notification-row:focus-visible[b-0w5ls8up7o] {
    background: var(--surface-sunken);
}

.notification-row.unread[b-0w5ls8up7o] {
    background: var(--selection-bg);
}

.notification-row-icon[b-0w5ls8up7o] {
    flex: 0 0 auto;
    color: var(--action-primary);
    padding-top: .15rem;
}

.notification-row-body[b-0w5ls8up7o] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.notification-row-title[b-0w5ls8up7o] {
    font-weight: 600;
    color: var(--text-strong);
}

.notification-row-message[b-0w5ls8up7o] {
    color: var(--text-weak);
    font-size: .875rem;
}

.notification-row-time[b-0w5ls8up7o] {
    color: var(--text-weakest);
    font-size: .75rem;
}

/* El punto acompaña al fondo destacado: el color solo no comunica. */
.notification-row-dot[b-0w5ls8up7o] {
    flex: 0 0 auto;
    color: var(--action-primary);
    font-size: .6rem;
    line-height: 1.6;
}
/* _content/MtmpProjectsPoc.Web/Pages/Settings/NotificationSettings.razor.rz.scp.css */
/* Story 21.09 — preferencias de notificaciones. Tokens del sistema, cero hex y cero !important. */

.notif-settings-page[b-863fhtp1t0] {
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem;
}

.notif-settings-group[b-863fhtp1t0] {
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    background: var(--surface-sunken);
}

.notif-settings-group h2[b-863fhtp1t0] {
    letter-spacing: .04em;
    margin-bottom: .75rem;
}

.notif-settings-group .form-check[b-863fhtp1t0] {
    padding-block: .25rem;
}

.notif-settings-time[b-863fhtp1t0] {
    max-width: 10rem;
}

.notif-settings-toast[b-863fhtp1t0] {
    font-size: .875rem;
}
/* _content/MtmpProjectsPoc.Web/Shared/CollapsibleSection.razor.rz.scp.css */
.collapsible-section[b-2pd5tw9k96] {
    margin-bottom: 16px; /* Reduced from 24px */
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background-color: var(--surface-default);
    overflow: visible; /* Changed from hidden to allow dropdowns to overflow */
}

.section-header[b-2pd5tw9k96] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px; /* Reduced from 12px */
    padding: 12px 16px; /* Reduced from 16px 20px */
    background-color: var(--surface-sunken);
    border: none;
    border-radius: 8px 8px 0 0; /* Match container border-radius for top corners */
    cursor: pointer;
    font-size: 15px; /* Slightly reduced from 16px */
    font-weight: 600;
    color: var(--text-strong);
    text-align: left;
    transition: background-color 150ms;
}

/* When collapsed, round all corners */
.collapsible-section.collapsed .section-header[b-2pd5tw9k96] {
    border-radius: 8px;
}

.section-header:hover[b-2pd5tw9k96] {
    background-color: var(--border-default);
}

.section-header:focus-visible[b-2pd5tw9k96] {
    outline: 2px solid var(--action-primary);
    outline-offset: -2px;
}

.collapse-icon[b-2pd5tw9k96] {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    transition: transform 150ms;
}

.collapsible-section.expanded .collapse-icon[b-2pd5tw9k96] {
    transform: rotate(0deg);
}

.collapsible-section.collapsed .collapse-icon[b-2pd5tw9k96] {
    transform: rotate(-90deg);
}

.section-title[b-2pd5tw9k96] {
    flex-grow: 1;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.badge[b-2pd5tw9k96] {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.badge-success[b-2pd5tw9k96] {
    background-color: var(--state-success-bg);
    color: var(--state-success-fg);
}

.badge-warning[b-2pd5tw9k96] {
    background-color: var(--state-attention-bg);
    color: var(--state-attention-fg);
}

.badge-info[b-2pd5tw9k96] {
    background-color: var(--selection-bg);
    color: var(--med-blue-medium);
}

/* CRITICAL: Hide content when collapsed */
.section-content[b-2pd5tw9k96] {
    display: none;
    padding: 12px;
    overflow: hidden;
}

.section-content.expanded[b-2pd5tw9k96] {
    display: block;
    animation: slideDown-b-2pd5tw9k96 150ms ease-out;
}

/* Compact section body */
.section-body[b-2pd5tw9k96] {
    padding: 0;
}

@keyframes slideDown-b-2pd5tw9k96 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/MtmpProjectsPoc.Web/Shared/Components/FiscalYearSelector.razor.rz.scp.css */
/**
 * FiscalYearSelector Component - Medtronic Design System
 * Multi-select dropdown for fiscal year filtering
 */

.fiscal-year-selector[b-g95ax49kzb] {
    position: relative;
    display: block;
    width: 100%;
}

/* Trigger Button */
.selector-trigger[b-g95ax49kzb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;  /* WCAG 2.1 AA touch target */
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--medtronic-white);
    border: var(--input-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-family: var(--font-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.selector-trigger:hover[b-g95ax49kzb] {
    border-color: var(--medtronic-blue-interactive);
    box-shadow: var(--shadow-sm);
}

.selector-trigger:focus[b-g95ax49kzb] {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: var(--input-focus-shadow);
}

.selector-trigger .label[b-g95ax49kzb] {
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    margin-right: var(--spacing-sm);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.selector-trigger .selected-count[b-g95ax49kzb] {
    flex: 1;
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selector-trigger .icon[b-g95ax49kzb] {
    margin-left: var(--spacing-sm);
    color: var(--text-tertiary);
    font-size: 12px;
    transition: transform var(--transition-fast);
}

/* Dropdown Panel */
.dropdown-panel[b-g95ax49kzb] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--medtronic-white);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 400px;
    overflow-y: auto;
    z-index: var(--z-dropdown);
    animation: dropdownSlideIn-b-g95ax49kzb 150ms ease-out;
}

@keyframes dropdownSlideIn-b-g95ax49kzb {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fiscal Year Option */
.fiscal-year-option[b-g95ax49kzb] {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    border-bottom: 1px solid var(--surface-sunken);
    min-height: 44px;  /* WCAG 2.1 AA touch target */
}

.fiscal-year-option:last-child[b-g95ax49kzb] {
    border-bottom: none;
}

.fiscal-year-option:hover[b-g95ax49kzb] {
    background-color: var(--table-row-hover-bg);
}

.fiscal-year-option input[type="checkbox"][b-g95ax49kzb] {
    margin-right: var(--spacing-md);
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--medtronic-blue-interactive);
}

.fiscal-year-option .fiscal-year-label[b-g95ax49kzb] {
    flex: 1;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.fiscal-year-option .date-range[b-g95ax49kzb] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-left: auto;
    margin-right: var(--spacing-md);
}

.fiscal-year-option .project-count[b-g95ax49kzb] {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-weight: var(--font-weight-medium);
    background: var(--medtronic-gray-lightest);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

/* Current Badge */
.fiscal-year-option.current[b-g95ax49kzb] {
    background-color: var(--selection-hover-bg);
}

.fiscal-year-option .current-badge[b-g95ax49kzb] {
    background: var(--medtronic-yellow);
    color: var(--medtronic-blue-primary);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dropdown Footer */
.dropdown-footer[b-g95ax49kzb] {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--medtronic-gray-lightest);
    border-top: 1px solid var(--border-default);
    text-align: center;
}

.dropdown-footer .summary[b-g95ax49kzb] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .selector-trigger .label[b-g95ax49kzb] {
        display: none;  /* Hide label on mobile */
    }

    .dropdown-panel[b-g95ax49kzb] {
        position: fixed;
        left: var(--spacing-md);
        right: var(--spacing-md);
        top: auto;
        bottom: var(--spacing-md);
        max-height: 60vh;
    }

    .fiscal-year-option .date-range[b-g95ax49kzb] {
        display: none;  /* Hide date range on mobile */
    }
}

/* Scrollbar Styling (Webkit browsers) */
.dropdown-panel[b-g95ax49kzb]::-webkit-scrollbar {
    width: 8px;
}

.dropdown-panel[b-g95ax49kzb]::-webkit-scrollbar-track {
    background: var(--medtronic-gray-lightest);
    border-radius: var(--radius-sm);
}

.dropdown-panel[b-g95ax49kzb]::-webkit-scrollbar-thumb {
    background: var(--medtronic-gray-light);
    border-radius: var(--radius-sm);
}

.dropdown-panel[b-g95ax49kzb]::-webkit-scrollbar-thumb:hover {
    background: var(--medtronic-gray-medium);
}
/* _content/MtmpProjectsPoc.Web/Shared/Components/Layout/Breadcrumb.razor.rz.scp.css */
/* Breadcrumb Component Styles - Scoped CSS */

.breadcrumb-nav[b-sp0ce6l55p] {
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--medtronic-gray-lightest);
    border-bottom: 1px solid var(--border-default);
}

.breadcrumb[b-sp0ce6l55p] {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0;
    font-size: var(--font-size-sm);
    align-items: center;
}

.breadcrumb__item[b-sp0ce6l55p] {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
}

.breadcrumb__item[b-sp0ce6l55p]::after {
    content: ">";
    margin-left: var(--spacing-sm);
    color: var(--text-tertiary);
    font-weight: var(--font-weight-normal);
}

.breadcrumb__item:last-child[b-sp0ce6l55p]::after {
    content: none;
}

.breadcrumb__item.active[b-sp0ce6l55p] {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.breadcrumb__link[b-sp0ce6l55p] {
    color: var(--medtronic-blue-interactive);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb__link:hover[b-sp0ce6l55p] {
    text-decoration: underline;
    color: var(--medtronic-blue-primary);
}

.breadcrumb__current[b-sp0ce6l55p] {
    color: var(--text-primary);
}

/* Responsive: Mobile */
@media (max-width: 768px) {
    .breadcrumb-nav[b-sp0ce6l55p] {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .breadcrumb[b-sp0ce6l55p] {
        font-size: var(--font-size-xs);
    }

    /* Truncate middle items on mobile if more than 3 levels */
    .breadcrumb__item:not(:first-child):not(:last-child):not(:nth-last-child(2))[b-sp0ce6l55p] {
        display: none;
    }

    .breadcrumb__item:nth-child(2)[b-sp0ce6l55p]::before {
        content: "...";
        margin-right: var(--spacing-xs);
        color: var(--text-tertiary);
    }
}
/* _content/MtmpProjectsPoc.Web/Shared/Components/ProjectOverviewSidebar.razor.rz.scp.css */
/* ProjectOverviewSidebar.razor.css - Scoped styles for sidebar component */
/* CRITICAL: Dark text on light background for visibility */

/* Container styling */
[b-ybxai1qfiw] .project-overview-sidebar {
    background-color: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-left: 4px solid var(--action-primary);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 16px;
}

/* Header */
[b-ybxai1qfiw] .sidebar-header {
    padding: 12px 16px;
    margin-bottom: 8px;
    border-bottom: 2px solid var(--border-default);
}

[b-ybxai1qfiw] .sidebar-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--med-blue-primary);
    margin: 0;
}

[b-ybxai1qfiw] .sidebar-subtitle {
    font-size: 11px;
    color: var(--text-weak);
    margin-top: 2px;
}

/* Sections - COMPACT */
[b-ybxai1qfiw] .sidebar-section {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-default);
}

[b-ybxai1qfiw] .sidebar-section:last-child {
    border-bottom: none;
}

/* Labels - DARK TEXT for light background */
[b-ybxai1qfiw] .sidebar-label {
    color: var(--text-weak) !important;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
    display: block;
}

/* Values - DARK TEXT for light background */
[b-ybxai1qfiw] .sidebar-value {
    color: var(--text-strong) !important;
    font-size: 14px;
    font-weight: 600;
    display: block;
}

[b-ybxai1qfiw] .sidebar-value span {
    color: var(--text-strong) !important;
}

/* Empty/placeholder values */
[b-ybxai1qfiw] .sidebar-value .empty,
[b-ybxai1qfiw] .empty {
    color: var(--text-weakest) !important;
    font-style: italic;
    font-weight: 400;
}

/* Code elements (Project ID, Asset Number) */
[b-ybxai1qfiw] .project-overview-sidebar code {
    background-color: var(--surface-sunken);
    color: var(--state-success-accent);
    padding: 3px 8px;
    border-radius: 4px;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 12px;
    font-weight: 600;
}

/* Dividers - COMPACT */
[b-ybxai1qfiw] .sidebar-divider,
[b-ybxai1qfiw] .project-overview-sidebar hr {
    border: none;
    height: 1px;
    background: var(--border-default);
    margin: 0;
}

[b-ybxai1qfiw] .sidebar-divider.thick {
    height: 2px;
    background: var(--border-default);
}

/* Status badges */
[b-ybxai1qfiw] .status-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* C-04 / C-05 / C-11 — las tres insignias de estado de este panel quedaron TOKENIZADAS y luego
   sin duplicar: desde la story 38.02e el panel renderiza <ProjectLifecycleBadge>, así que ningún
   marcado emite ya `.status-badge` aquí (verificado con grep sobre Pages/, Shared/ y Components/).
   La fase 1 les corrigió el contraste; la fase 2 las colapsa contra el diccionario, que es donde
   vive el mapa completo. Se conserva el vocabulario de las tres clases —no se borra— porque el
   panel sigue exponiendo `.status-badge` como punto de extensión de su contenido ranurado. */
[b-ybxai1qfiw] .status-badge.status-draft,
[b-ybxai1qfiw] .status-badge.status-notstarted {
    background-color: var(--state-lifecycle-notstarted-bg);
    color: var(--state-lifecycle-notstarted-fg);
}

[b-ybxai1qfiw] .status-badge.status-active,
[b-ybxai1qfiw] .status-badge.status-inprogress {
    background-color: var(--state-lifecycle-inprogress-bg);
    color: var(--state-lifecycle-inprogress-fg);
}

[b-ybxai1qfiw] .status-badge.status-onhold {
    background-color: var(--state-lifecycle-onhold-bg);
    color: var(--state-lifecycle-onhold-fg);
}

[b-ybxai1qfiw] .status-badge.status-completed {
    background-color: var(--state-lifecycle-completed-bg);
    color: var(--state-lifecycle-completed-fg);
}

[b-ybxai1qfiw] .status-badge.status-cancelled {
    background-color: var(--state-lifecycle-cancelled-bg);
    color: var(--state-lifecycle-cancelled-fg);
}

/* Priority badges */
[b-ybxai1qfiw] .priority-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* C-14 — la prioridad media se pintaba con #3B82F6, que es EL MISMO azul que "En progreso":
   el usuario veía dos escalas distintas hablando con el mismo color. En el diccionario, la
   prioridad tiene dominio propio y la media queda neutral justamente para no pisar el azul de
   estado. De paso, `critical` (3.76:1) y `medium` (3.68:1) no alcanzaban el mínimo de texto. */
[b-ybxai1qfiw] .priority-badge.priority-critical {
    background-color: var(--state-priority-critical-bg);
    color: var(--state-priority-critical-fg);
}

[b-ybxai1qfiw] .priority-badge.priority-high {
    background-color: var(--state-priority-high-bg);
    color: var(--state-priority-high-fg);
}

[b-ybxai1qfiw] .priority-badge.priority-medium {
    background-color: var(--state-priority-medium-bg);
    color: var(--state-priority-medium-fg);
}

[b-ybxai1qfiw] .priority-badge.priority-low {
    background-color: var(--state-priority-low-bg);
    color: var(--state-priority-low-fg);
}

/* Score display */
[b-ybxai1qfiw] .score-display {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(6, 182, 212, 0.15) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 10px;
    padding: 12px 16px;
    text-align: center;
    margin: 10px 16px;
}

[b-ybxai1qfiw] .score-label {
    color: var(--text-weak);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
}

[b-ybxai1qfiw] .score-value {
    color: var(--state-success-accent);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

[b-ybxai1qfiw] .score-subtitle {
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
}

/* Metadata rows */
[b-ybxai1qfiw] .sidebar-metadata {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[b-ybxai1qfiw] .metadata-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

[b-ybxai1qfiw] .metadata-row .label {
    color: var(--text-weakest);
    font-size: 12px;
    font-weight: 400;
}

[b-ybxai1qfiw] .metadata-row .value {
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 600;
}

/* Quick action buttons */
[b-ybxai1qfiw] .sidebar-actions {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-default);
}

[b-ybxai1qfiw] .sidebar-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background-color: white;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-strong);
    cursor: pointer;
    transition: all 0.2s ease;
}

[b-ybxai1qfiw] .sidebar-action-btn:hover {
    background-color: var(--surface-sunken);
    border-color: var(--action-primary);
    color: var(--action-primary);
}

[b-ybxai1qfiw] .sidebar-action-btn.secondary {
    background-color: var(--surface-subtle);
}
/* _content/MtmpProjectsPoc.Web/Shared/Components/Scoring/ScoringBreakdown.razor.rz.scp.css */
/* Story 12.10: Scoring Breakdown Component - Medtronic Design System */

.scoring-breakdown[b-xu292ldvmu] {
    padding: var(--spacing-lg, 24px);
    border: 1px solid var(--neutral-stroke-divider-rest, var(--border-default));
    border-radius: 8px;
    background: var(--neutral-fill-subtle-rest, var(--surface-subtle));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Loading State */
.loading-state[b-xu292ldvmu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl, 32px);
    gap: var(--spacing-md, 16px);
}

.spinner[b-xu292ldvmu] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--neutral-stroke-divider-rest, var(--border-default));
    border-top-color: var(--medtronic-blue, var(--med-blue-medium));
    border-radius: 50%;
    animation: spin-b-xu292ldvmu 0.8s linear infinite;
}

@keyframes spin-b-xu292ldvmu {
    to { transform: rotate(360deg); }
}

/* AC1: Scoring Header - Display Toggle, Score, Rank */
.scoring-header[b-xu292ldvmu] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md, 16px);
    margin-bottom: var(--spacing-lg, 24px);
    padding-bottom: var(--spacing-md, 16px);
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, var(--border-default));
}

.scoring-metric[b-xu292ldvmu] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 4px);
}

.scoring-metric label[b-xu292ldvmu] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint, var(--text-weak));
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.score-display[b-xu292ldvmu] {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xxs, 2px);
}

.score-value[b-xu292ldvmu] {
    font-size: 32px;
    font-weight: 700;
    color: var(--medtronic-blue, var(--med-blue-medium));
    line-height: 1;
}

.score-max[b-xu292ldvmu] {
    font-size: 16px;
    font-weight: 500;
    color: var(--neutral-foreground-hint, var(--text-weak));
}

.rank-value[b-xu292ldvmu] {
    font-size: 20px;
    font-weight: 600;
    color: var(--neutral-foreground-rest, var(--text-strong));
}

.progress-bar[b-xu292ldvmu] {
    height: 8px;
    background: var(--neutral-fill-subtle-rest, var(--surface-sunken));
    border-radius: 4px;
    overflow: hidden;
    margin-top: var(--spacing-xs, 4px);
}

.progress-fill[b-xu292ldvmu] {
    height: 100%;
    background: linear-gradient(90deg, var(--med-blue-medium) 0%, var(--action-primary) 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* AC4: Priority Override Section */
.priority-override[b-xu292ldvmu] {
    display: flex;
    gap: var(--spacing-sm, 8px);
    padding: var(--spacing-md, 16px);
    background: var(--warning-fill-subtle-rest, var(--state-attention-bg));
    border-left: 4px solid var(--warning-fill-rest, var(--state-attention-accent));
    border-radius: 4px;
    margin-bottom: var(--spacing-lg, 24px);
}

.override-icon[b-xu292ldvmu] {
    font-size: 24px;
    line-height: 1;
}

.override-details[b-xu292ldvmu] {
    flex: 1;
}

.override-details strong[b-xu292ldvmu] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest, var(--text-strong));
    margin-bottom: var(--spacing-xxs, 2px);
}

.override-reason[b-xu292ldvmu] {
    margin: var(--spacing-xs, 4px) 0;
    font-size: 14px;
    color: var(--neutral-foreground-rest, var(--text-strong));
}

.override-metadata[b-xu292ldvmu] {
    font-size: 12px;
    color: var(--neutral-foreground-hint, var(--text-weak));
}

/* AC2: Scoring Dimensions Breakdown */
.dimensions-title[b-xu292ldvmu] {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest, var(--text-strong));
    margin-bottom: var(--spacing-md, 16px);
}

.dimensions-list[b-xu292ldvmu] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 16px);
    margin-bottom: var(--spacing-lg, 24px);
}

.dimension-row[b-xu292ldvmu] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 4px);
}

.dimension-header[b-xu292ldvmu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 4px);
}

.dimension-name[b-xu292ldvmu] {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.dimension-label[b-xu292ldvmu] {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest, var(--text-strong));
}

.dimension-score[b-xu292ldvmu] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-hint, var(--text-weak));
}

.dimension-progress[b-xu292ldvmu] {
    height: 12px;
    background: var(--neutral-fill-subtle-rest, var(--surface-sunken));
    border-radius: 6px;
    overflow: hidden;
}

.dimension-fill[b-xu292ldvmu] {
    height: 100%;
    border-radius: 6px;
    transition: width 0.3s ease;
}

.dimension-details[b-xu292ldvmu] {
    font-size: 12px;
    color: var(--neutral-foreground-hint, var(--text-weak));
    padding-left: 22px; /* Align with label (after color dot) */
}

/* AC3: Visual Representation - Horizontal Stacked Bar Chart */
.scoring-chart[b-xu292ldvmu] {
    margin: var(--spacing-lg, 24px) 0;
    padding: var(--spacing-md, 16px);
    background: white;
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-divider-rest, var(--border-default));
}

.chart-title[b-xu292ldvmu] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest, var(--text-strong));
    margin-bottom: var(--spacing-sm, 8px);
}

.stacked-bar-chart[b-xu292ldvmu] {
    display: block;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--spacing-md, 16px);
}

.stacked-bar-chart rect[b-xu292ldvmu] {
    transition: opacity 0.2s ease;
}

.stacked-bar-chart rect:hover[b-xu292ldvmu] {
    opacity: 0.8;
    cursor: pointer;
}

.chart-legend[b-xu292ldvmu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md, 16px);
}

.legend-item[b-xu292ldvmu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 4px);
}

.legend-color[b-xu292ldvmu] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.legend-label[b-xu292ldvmu] {
    font-size: 12px;
    color: var(--neutral-foreground-hint, var(--text-weak));
}

/* AC6: Calculation Transparency */
.actions[b-xu292ldvmu] {
    display: flex;
    justify-content: center;
    margin: var(--spacing-lg, 24px) 0;
}

.btn-secondary[b-xu292ldvmu] {
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    background: var(--neutral-fill-subtle-rest, var(--surface-sunken));
    border: 1px solid var(--neutral-stroke-divider-rest, var(--border-default));
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--medtronic-blue, var(--med-blue-medium));
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-xu292ldvmu] {
    background: var(--neutral-fill-subtle-hover, var(--surface-sunken));
    border-color: var(--medtronic-blue, var(--med-blue-medium));
}

.calculation-details[b-xu292ldvmu] {
    margin-top: var(--spacing-lg, 24px);
    padding: var(--spacing-md, 16px);
    background: white;
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-divider-rest, var(--border-default));
}

.calculation-details h5[b-xu292ldvmu] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest, var(--text-strong));
    margin-bottom: var(--spacing-md, 16px);
}

.calculation-table[b-xu292ldvmu] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-md, 16px);
}

.calculation-table th[b-xu292ldvmu],
.calculation-table td[b-xu292ldvmu] {
    padding: var(--spacing-sm, 8px);
    text-align: left;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, var(--border-default));
}

.calculation-table th[b-xu292ldvmu] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint, var(--text-weak));
    text-transform: uppercase;
}

.calculation-table td[b-xu292ldvmu] {
    font-size: 14px;
    color: var(--neutral-foreground-rest, var(--text-strong));
}

.dimension-color-dot[b-xu292ldvmu] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: var(--spacing-xs, 4px);
}

.total-row td[b-xu292ldvmu] {
    font-weight: 600;
    font-size: 16px;
    border-top: 2px solid var(--neutral-stroke-divider-rest, var(--border-default));
    padding-top: var(--spacing-md, 16px);
}

.calculation-formula[b-xu292ldvmu] {
    font-size: 12px;
    color: var(--neutral-foreground-hint, var(--text-weak));
    font-style: italic;
    text-align: center;
    margin-top: var(--spacing-sm, 8px);
}

/* AC9: Error Handling - Empty State */
.empty-state[b-xu292ldvmu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl, 32px);
    text-align: center;
}

.empty-state p[b-xu292ldvmu] {
    font-size: 16px;
    font-weight: 500;
    color: var(--neutral-foreground-hint, var(--text-weak));
    margin-bottom: var(--spacing-xs, 4px);
}

.empty-state small[b-xu292ldvmu] {
    font-size: 12px;
    color: var(--neutral-foreground-hint, var(--text-weakest));
}

/* Responsive Design */
@media (max-width: 768px) {
    .scoring-header[b-xu292ldvmu] {
        grid-template-columns: 1fr;
    }

    .chart-legend[b-xu292ldvmu] {
        flex-direction: column;
    }

    .score-value[b-xu292ldvmu] {
        font-size: 24px;
    }
}

/* Accessibility: Focus States */
.btn-secondary:focus[b-xu292ldvmu] {
    outline: 2px solid var(--medtronic-blue, var(--med-blue-medium));
    outline-offset: 2px;
}
/* _content/MtmpProjectsPoc.Web/Shared/MainLayout.razor.rz.scp.css */
.page[b-7gybmf9v6z] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-7gybmf9v6z] {
    flex: 1;
}

.sidebar[b-7gybmf9v6z] {
    /* 2026-08-31: color re-sampleado del propio JPEG del logo (mtmp360-logo.jpg)
       para que el seam entre el brand slot (top-row) y el body del sidebar
       desaparezca. El logo tiene un vertical gradient #010818 (top) → #00122A
       (bottom); el sidebar pinta desde ese bottom (#00122A) y se profundiza
       hacia #010818 en el fondo — así continúa la misma sensación de "cielo
       nocturno" que abre el logo. El anterior `--med-blue-primary` (#001E46)
       era notablemente más azul y hacía visible el corte contra el JPEG. */
    background: linear-gradient(180deg, #00122A 0%, #010818 100%);
    box-shadow: var(--shadow-md);
}

/* Header-band: contenedor con el fondo brand-refresh (placeholder — real wave SVG pending).
   Envuelve al `.top-row` (avatar/bell) y al `<SectionOutlet Name="page-hero" />` para
   que el fondo dark cubra ambos como una sola banda visual. Solid navy detrás del PNG
   como fallback si la imagen tarda en cargar. Sticky a nivel de banda entera: cuando
   el usuario scrollea, la barra completa (top-row + hero) queda pinned arriba. */
.header-band[b-7gybmf9v6z] {
    background: var(--med-blue-primary) url('/images/header-bg.png') no-repeat center center;
    background-size: cover;
    box-shadow: var(--shadow-sm);
}

.top-row[b-7gybmf9v6z] {
    /* Ahora es transparente — hereda el fondo del `.header-band`. Mantiene la altura
       fija de 64px. Cambió a `space-between` porque ahora hay dos slots: `.top-row-left`
       (breadcrumb via SectionOutlet page-breadcrumb) y el UserHeader a la derecha. */
    background: transparent;
    border-bottom: none;
    justify-content: space-between;
    height: var(--header-height);  /* 64px from design tokens */
    display: flex;
    align-items: center;
    z-index: var(--z-sticky);
}

/* Contenedor del breadcrumb en el top-row. Si el outlet queda vacío (páginas que aún no
   se sumaron al pilot), el div sigue existiendo pero sin contenido: el UserHeader se
   sostiene a la derecha por su propio `margin-left: auto` (site.css .user-header) sin
   depender del space-between. */
.top-row-left[b-7gybmf9v6z] {
    display: flex;
    align-items: center;
    min-width: 0; /* permite que el breadcrumb largo haga ellipsis */
}

/* Slot del hero por página. Si la página no emite <SectionContent Name="page-hero">,
   este div queda vacío y colapsa (padding=0 sin contenido → 0 altura). Cuando la página
   sí lo emite, los estilos white-on-dark se aplican via el scope `.header-band` más abajo. */
.page-hero-slot[b-7gybmf9v6z] {
    padding: 0 2rem;
}

.page-hero-slot:not(:empty)[b-7gybmf9v6z] {
    padding: 20px 2rem 24px;
}

/* Overrides de tipografía cuando el contenido se renderiza dentro del band navy.
   Scopeados a `.header-band` para no afectar el uso de estas classes fuera del layout
   (breadcrumb / .page-title / .text-muted aparecen en decenas de vistas sobre fondo
   claro). El `::deep` es necesario porque los hijos vienen de otras razor pages
   (Blazor scoped CSS aísla por componente). */
[b-7gybmf9v6z] .header-band .breadcrumb {
    margin-bottom: 0;   /* el breadcrumb vive en el top-row alineado vertical, no debajo del título */
}

[b-7gybmf9v6z] .header-band .breadcrumb-item,
[b-7gybmf9v6z] .header-band .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.85);
}

[b-7gybmf9v6z] .header-band .breadcrumb-item.active {
    color: #FFFFFF;
}

[b-7gybmf9v6z] .header-band .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
}

[b-7gybmf9v6z] .header-band .page-title {
    color: #FFFFFF;
}

[b-7gybmf9v6z] .header-band .text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}

    .top-row[b-7gybmf9v6z]  a, .top-row .btn-link[b-7gybmf9v6z] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-7gybmf9v6z] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-7gybmf9v6z] {
        display: none;
    }

    .top-row.auth[b-7gybmf9v6z] {
        justify-content: space-between;
    }

    .top-row a[b-7gybmf9v6z], .top-row .btn-link[b-7gybmf9v6z] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-7gybmf9v6z] {
        flex-direction: row;
    }

    /* Sidebar pinned to viewport so it stays fully visible while the article scrolls.
       Prior `position: sticky` combined with flex-row + tall content caused the menu
       to visually "cut" — items past the fold became inaccessible. `fixed` + explicit
       margin-left on main is the robust fix. */
    .sidebar[b-7gybmf9v6z] {
        width: 250px;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        overflow-y: auto;
        z-index: 100;
        display: flex;
        flex-direction: column;
        /* Custom scrollbar for dark theme */
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    }

    main[b-7gybmf9v6z] {
        margin-left: 250px;
    }

    .sidebar[b-7gybmf9v6z]::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar[b-7gybmf9v6z]::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar[b-7gybmf9v6z]::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 3px;
    }

    .sidebar[b-7gybmf9v6z]::-webkit-scrollbar-thumb:hover {
        background-color: rgba(255, 255, 255, 0.5);
    }

    /* Sticky ahora aplica al `.header-band` (banda entera con top-row + hero-slot)
       para que el fondo navy + onda + hero acompañen al usuario al scrollear.
       z-index = --z-fixed (1030): por encima de --z-sticky (1020) para que ningún
       sticky/tooltip/dropdown de página (phase-navigator-sticky, field tooltips,
       ownership popovers) tape el header, y por debajo de --z-modal-backdrop (1040)
       para que Bootstrap modals + DsToast + phase-dropdown-overlay sigan cubriendo
       correctamente. El z-index viejo (10) permitía que cards con position:relative
       + z-index intermedio pintaran encima del bell/avatar del UserHeader. */
    .header-band[b-7gybmf9v6z] {
        position: sticky;
        top: 0;
        z-index: var(--z-fixed);
    }

    .top-row[b-7gybmf9v6z], .page-hero-slot[b-7gybmf9v6z], article[b-7gybmf9v6z] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* _content/MtmpProjectsPoc.Web/Shared/NavMenu.razor.rz.scp.css */
/* NavMenu - Medtronic Design System Compliant */

.navbar-toggler[b-49lq1op5mo] {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-height: 44px;  /* WCAG 2.1 AA touch target */
    min-width: 44px;
}

.top-row[b-49lq1op5mo] {
    /* 2026-07-20: sized to match the EvaluationPlan mockup — sidebar
       brand slot fills roughly the top 150-160px of the sidebar with the
       MTMP 360 logo centered inside. Transparent so the logo's dark navy
       flows seamlessly into the sidebar gradient below. Padding + margins
       forced to 0 to override Bootstrap's default .navbar / .ps-3 spacing
       so the image bleeds edge-to-edge. */
    min-height: 160px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0;
    flex-shrink: 0;  /* keep brand pinned while nav below scrolls */
}

/* Kill Bootstrap container-fluid padding inside the brand row so the
   logo image can span the full sidebar width. */
.top-row .container-fluid[b-49lq1op5mo] {
    padding: 0;
    margin: 0;
    max-width: 100%;
}

.navbar-brand[b-49lq1op5mo] {
    display: block;
    padding: 0 !important;   /* override Bootstrap .navbar-brand default */
    margin: 0 !important;    /* override Bootstrap .navbar-brand margin-right */
    width: 100%;
    color: var(--medtronic-white);
    transition: opacity var(--transition-base);
}

.navbar-brand:hover[b-49lq1op5mo] {
    opacity: 0.9;
}

/* 2026-07-20: sidebar brand logo — fills the sidebar width, keeps its
   dark background native (blends with the sidebar gradient) and sits
   flush edge-to-edge so the branding reads at the same weight as in the
   mockup. */
.navbar-brand-logo[b-49lq1op5mo] {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.oi[b-49lq1op5mo] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
    margin-right: var(--spacing-sm);
}

/* Navigation Items - Using 8px grid system */
.nav-item[b-49lq1op5mo] {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-md);  /* 4px 16px */
}

    .nav-item:first-of-type[b-49lq1op5mo] {
        padding-top: var(--spacing-md);  /* 16px */
    }

    .nav-item:last-of-type[b-49lq1op5mo] {
        padding-bottom: var(--spacing-md);  /* 16px */
    }

    .nav-item[b-49lq1op5mo]  a {
        color: var(--border-default);
        border-radius: var(--radius-sm);  /* 4px from design system */
        min-height: 48px;  /* Better touch target */
        display: flex;
        align-items: center;
        padding: var(--spacing-sm) var(--spacing-md);  /* 8px 16px */
        transition: all var(--transition-base);  /* 200ms ease */
    }

.nav-item[b-49lq1op5mo]  a.active {
    background-color: var(--nav-hover-bg);  /* rgba(255,255,255,0.1) from tokens */
    color: var(--medtronic-white);
    font-weight: var(--font-weight-medium);
}

.nav-item[b-49lq1op5mo]  a:hover {
    background-color: var(--nav-hover-bg);
    color: var(--medtronic-white);
    transform: translateX(4px);  /* Subtle slide effect */
}

/* Admin Subsection Headers - Collapsible */
.nav-subsection-header[b-49lq1op5mo] {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--border-default);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    user-select: none;
}

.nav-subsection-header:hover[b-49lq1op5mo] {
    background-color: var(--nav-hover-bg);
    color: var(--medtronic-white);
}

.nav-subsection-header .badge[b-49lq1op5mo] {
    font-size: 0.7rem;
    padding: 2px 6px;
    font-weight: var(--font-weight-normal);
}

/* Subsection items container with smooth animation */
.nav-subsection-items[b-49lq1op5mo] {
    animation: slideDown-b-49lq1op5mo 200ms ease-out;
    overflow: hidden;
}

@keyframes slideDown-b-49lq1op5mo {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Indent subsection items */
.nav-subsection-items .nav-item[b-49lq1op5mo] {
    padding-left: var(--spacing-lg);
}

.nav-subsection-items .nav-item[b-49lq1op5mo]  a {
    font-size: 0.85rem;
    min-height: 40px;
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* Caret icons */
.nav-subsection-header .oi-caret-right[b-49lq1op5mo],
.nav-subsection-header .oi-caret-bottom[b-49lq1op5mo] {
    font-size: 0.7rem;
    width: 1rem;
    margin-right: 0;
    transition: transform var(--transition-base);
}

@media (min-width: 641px) {
    .navbar-toggler[b-49lq1op5mo] {
        display: none;
    }

    .collapse[b-49lq1op5mo] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}

/* DM-13 / Pattern C Phase 1 — module-collapsible top-level section headers.
   Same visual chrome as a regular nav-section-title but interactive: hover
   state, pointer cursor, and an "active" dot on the currently-expanded module. */
.nav-section-title-clickable[b-49lq1op5mo] {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
}

.nav-section-title-clickable:hover[b-49lq1op5mo] {
    background-color: var(--nav-hover-bg);
    color: var(--medtronic-white);
}

.nav-section-title-clickable .oi-caret-right[b-49lq1op5mo],
.nav-section-title-clickable .oi-caret-bottom[b-49lq1op5mo] {
    font-size: 0.7rem;
    width: 1rem;
    margin-right: 0;
    transition: transform var(--transition-base);
}

.module-active-dot[b-49lq1op5mo] {
    color: var(--medtronic-yellow);
    font-size: 0.6rem;
    line-height: 1;
}

/* ============================================================================
   BRAND REFRESH DEL MENÚ (2026-08) — Visual Design Identity Guide: secciones
   numeradas 1-5 con chip cuadrado, títulos en mayúsculas pequeñas y caret al
   extremo derecho. Mismos ítems y gates de rol: solo cambia la presentación.
   ============================================================================ */

.nav-num[b-49lq1op5mo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 5px;
    background: rgba(77, 216, 255, 0.14);
    border: 1px solid rgba(77, 216, 255, 0.35);
    color: var(--mtmp-neon-cyan, #4DD8FF);
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Título de sección: mayúsculas pequeñas con letter-spacing, caret a la derecha. */
.nav-section-title-clickable[b-49lq1op5mo] {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
    font-weight: 700;
    padding: var(--spacing-sm) var(--spacing-md);
}

.nav-section-title-clickable[b-49lq1op5mo]  .nav-section-caret {
    margin-left: auto;
    opacity: 0.6;
}

/* Ítem activo: pill azul sólido, como el "Project Detail / Project Phases"
   resaltado del mockup. */
.nav-item[b-49lq1op5mo]  a.active {
    background: var(--mtmp-primary, #117BFF);
    color: #fff;
    box-shadow: 0 4px 12px rgba(17, 123, 255, 0.35);
}

.nav-item[b-49lq1op5mo]  a.active:hover {
    background: var(--mtmp-primary, #117BFF);
    transform: none;
}
/* _content/MtmpProjectsPoc.Web/Shared/PhaseNavigator.razor.rz.scp.css */
/* PhaseNavigator.razor.css
 * Compact horizontal phase navigation
 * Optimized for horizontal space usage
 * Design System: Medtronic brand colors
 */

/* === CONTAINER === */
.phase-nav[b-u16kn0p7cm] {
    position: relative;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.phase-nav-alert[b-u16kn0p7cm] {
    margin-bottom: 8px;
    padding: 8px 12px;
    font-size: 13px;
    width: 100%;
}

/* === DESKTOP WRAPPER: Contains only the nav tabs === */
.phase-nav-desktop-wrapper[b-u16kn0p7cm] {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
}

/* === DESKTOP: Segmented Control === */
.phase-nav-desktop[b-u16kn0p7cm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: var(--surface-sunken);
    border-radius: 8px;
    padding: 4px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.phase-nav-desktop[b-u16kn0p7cm]::-webkit-scrollbar {
    height: 4px;
}

.phase-nav-desktop[b-u16kn0p7cm]::-webkit-scrollbar-track {
    background: transparent;
}

.phase-nav-desktop[b-u16kn0p7cm]::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 2px;
}

/* Item wrapper for dropdown positioning */
.phase-nav-item-wrapper[b-u16kn0p7cm] {
    position: relative;
    flex-shrink: 0;
}

/* Individual phase button */
.phase-nav-item[b-u16kn0p7cm] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: all 150ms ease;
    white-space: nowrap;
    color: var(--text-weak);
}

.phase-nav-item:hover[b-u16kn0p7cm] {
    background: rgba(255, 255, 255, 0.7);
}

.phase-nav-item:focus[b-u16kn0p7cm] {
    outline: 2px solid var(--action-primary);
    outline-offset: 1px;
}

/* === STATUS ICONS === */
.phase-nav-icon[b-u16kn0p7cm] {
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
}

/* === PHASE LABEL === */
.phase-nav-label[b-u16kn0p7cm] {
    font-weight: 500;
    color: inherit;
}

/* === PROGRESS PERCENTAGE === */
.phase-nav-pct[b-u16kn0p7cm] {
    font-size: 11px;
    font-weight: 600;
    color: var(--action-primary);
    background: rgba(0, 120, 212, 0.1);
    padding: 2px 6px;
    border-radius: 10px;
}

/* === INSTANCE BADGE === */
.phase-nav-badge[b-u16kn0p7cm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--action-primary);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
}

/* === DROPDOWN CHEVRON === */
.phase-nav-chevron[b-u16kn0p7cm] {
    font-size: 10px;
    color: var(--text-weakest);
    transition: transform 150ms ease;
}

.phase-nav-chevron.open[b-u16kn0p7cm] {
    transform: rotate(180deg);
}

/* === STATUS COLORS === */

/* Completed */
.phase-nav-item.completed[b-u16kn0p7cm] {
    color: var(--state-success-accent);
}

.phase-nav-item.completed .phase-nav-badge[b-u16kn0p7cm] {
    background: var(--state-success-accent);
}

/* In Progress */
.phase-nav-item.in-progress[b-u16kn0p7cm] {
    color: var(--action-primary);
}

.phase-nav-item.in-progress .phase-nav-badge[b-u16kn0p7cm] {
    background: var(--action-primary);
}

/* Pending */
.phase-nav-item.pending[b-u16kn0p7cm] {
    color: var(--text-weakest);
}

.phase-nav-item.pending .phase-nav-badge[b-u16kn0p7cm] {
    background: var(--text-weakest);
}

/* Not Applicable */
.phase-nav-item.not-applicable[b-u16kn0p7cm] {
    color: var(--border-strong);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Skipped — atenuada como NotApplicable, pero NAVEGABLE: el PM puede restaurarla
   (PhaseService.UnskipPhaseAsync), así que no lleva cursor de "prohibido".
   GetPhaseClass ya emitía esta clase desde Epic 22; no tenía regla y la fase saltada
   se pintaba igual que una pendiente. */
.phase-nav-item.skipped[b-u16kn0p7cm] {
    color: var(--border-strong);
    opacity: 0.6;
}

.phase-nav-item.skipped .phase-nav-badge[b-u16kn0p7cm] {
    background: var(--border-strong);
}

/* === SELECTED STATE === */
.phase-nav-item.selected[b-u16kn0p7cm] {
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.phase-nav-item.selected.completed[b-u16kn0p7cm] {
    background: var(--state-success-bg);
}

.phase-nav-item.selected.in-progress[b-u16kn0p7cm] {
    background: var(--selection-bg);
}

/* === DROPDOWN OVERLAY (fixed layer for proper stacking) === */
.phase-dropdown-overlay[b-u16kn0p7cm] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 200px;
    cursor: default;
}

/* === DROPDOWN CONTAINER === */
.phase-instance-dropdown[b-u16kn0p7cm] {
    position: relative;
}

/* === DROPDOWN MENU === */
.phase-dropdown-menu[b-u16kn0p7cm] {
    min-width: 280px;
    background: white;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: dropdownFadeIn-b-u16kn0p7cm 150ms ease-out;
}

@keyframes dropdownFadeIn-b-u16kn0p7cm {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.phase-dropdown-header[b-u16kn0p7cm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border-default);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong);
}

.phase-dropdown-count[b-u16kn0p7cm] {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-weak);
}

/* === DROPDOWN ITEMS === */
.phase-dropdown-item[b-u16kn0p7cm] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 13px;
    transition: all 100ms ease;
}

.phase-dropdown-item:hover[b-u16kn0p7cm] {
    background: var(--surface-sunken);
}

.phase-dropdown-item:focus[b-u16kn0p7cm] {
    outline: none;
    background: var(--surface-sunken);
}

/* Instance number circle */
.phase-dropdown-num[b-u16kn0p7cm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--border-default);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-weak);
    flex-shrink: 0;
}

/* Instance info */
.phase-dropdown-info[b-u16kn0p7cm] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.phase-dropdown-name[b-u16kn0p7cm] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phase-dropdown-status[b-u16kn0p7cm] {
    font-size: 11px;
    color: var(--text-weak);
}

/* Instance progress */
.phase-dropdown-progress[b-u16kn0p7cm] {
    font-size: 12px;
    font-weight: 600;
    color: var(--action-primary);
    flex-shrink: 0;
}

.phase-dropdown-progress .pending[b-u16kn0p7cm] {
    color: var(--text-weakest);
}

/* === DROPDOWN ITEM STATUS COLORS === */
.phase-dropdown-item.completed[b-u16kn0p7cm] {
    border-left-color: var(--state-success-accent);
}

.phase-dropdown-item.completed .phase-dropdown-num[b-u16kn0p7cm] {
    background: var(--state-success-accent);
    color: white;
}

.phase-dropdown-item.completed .phase-dropdown-progress[b-u16kn0p7cm] {
    color: var(--state-success-accent);
}

.phase-dropdown-item.in-progress[b-u16kn0p7cm] {
    border-left-color: var(--action-primary);
}

.phase-dropdown-item.in-progress .phase-dropdown-num[b-u16kn0p7cm] {
    background: var(--action-primary);
    color: white;
}

/* Selected item in dropdown */
.phase-dropdown-item.selected[b-u16kn0p7cm] {
    background: var(--action-primary);
    color: white;
}

.phase-dropdown-item.selected .phase-dropdown-name[b-u16kn0p7cm],
.phase-dropdown-item.selected .phase-dropdown-status[b-u16kn0p7cm],
.phase-dropdown-item.selected .phase-dropdown-progress[b-u16kn0p7cm] {
    color: white;
}

.phase-dropdown-item.selected .phase-dropdown-num[b-u16kn0p7cm] {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.phase-dropdown-item.selected .phase-dropdown-status[b-u16kn0p7cm] {
    opacity: 0.85;
}

/* === MOBILE BACKDROP (hidden on mobile) === */

/* === MOBILE SELECTOR === */
.phase-nav-mobile[b-u16kn0p7cm] {
    display: none;
    width: 100%;
    max-width: 400px;
}

.phase-nav-select[b-u16kn0p7cm] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: white;
    color: var(--text-strong);
}

.phase-nav-select:focus[b-u16kn0p7cm] {
    outline: none;
    border-color: var(--action-primary);
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
}

/* === RESPONSIVE === */

/* Tablet: Slightly smaller */
@media (max-width: 1024px) {
    .phase-nav-item[b-u16kn0p7cm] {
        padding: 6px 10px;
        font-size: 12px;
    }

    .phase-nav-icon[b-u16kn0p7cm] {
        font-size: 11px;
    }

    .phase-nav-badge[b-u16kn0p7cm] {
        min-width: 16px;
        height: 16px;
        font-size: 9px;
    }

    .phase-dropdown-menu[b-u16kn0p7cm] {
        min-width: 240px;
    }
}

/* Mobile: Show dropdown only */
@media (max-width: 768px) {
    .phase-nav-desktop-wrapper[b-u16kn0p7cm] {
        display: none;
    }

    .phase-nav-mobile[b-u16kn0p7cm] {
        display: flex;
        justify-content: center;
    }

    .phase-dropdown-backdrop[b-u16kn0p7cm] {
        display: none;
    }
}

/* === ACCESSIBILITY === */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .phase-nav-item[b-u16kn0p7cm],
    .phase-nav-chevron[b-u16kn0p7cm],
    .phase-dropdown-menu[b-u16kn0p7cm],
    .phase-dropdown-item[b-u16kn0p7cm] {
        transition: none;
    }

    .phase-dropdown-menu[b-u16kn0p7cm] {
        animation: none;
    }
}

/* High contrast */
@media (prefers-contrast: more) {
    .phase-nav-item.completed[b-u16kn0p7cm] {
        color: var(--state-success-fg);
    }

    .phase-nav-item.in-progress[b-u16kn0p7cm] {
        color: var(--med-blue-medium);
    }

    .phase-dropdown-item.selected[b-u16kn0p7cm] {
        background: var(--text-strong);
    }
}

/* ============================================================================
   PHASE JOURNEY RESTYLE (2026-08) — Visual Design Identity Guide, mockup
   "Project Phase Journey": círculos numerados 01..N con línea conectora,
   check verde en completadas, anillo azul en la activa. El número sale de un
   contador CSS, así que el markup del componente NO cambió; el dropdown de
   instancias y el selector móvil conservan sus estilos de arriba.
   ============================================================================ */

.phase-nav-desktop[b-u16kn0p7cm] {
    counter-reset: phase-step;
    background: transparent;
    padding: 8px 4px 4px;
    align-items: flex-start;
    width: 100%;
    justify-content: flex-start;
}

.phase-nav-item-wrapper[b-u16kn0p7cm] {
    counter-increment: phase-step;
    flex: 1 0 96px;
    display: flex;
    justify-content: center;
}

/* Línea conectora: del centro del círculo anterior al centro del actual. */
.phase-nav-item-wrapper:not(:first-child)[b-u16kn0p7cm]::before {
    content: '';
    position: absolute;
    top: 21px;
    left: calc(-50% + 26px);
    right: calc(50% + 26px);
    height: 2px;
    background: var(--mtmp-border-gray, #DCE5F2);
    z-index: 0;
}

.phase-nav-item[b-u16kn0p7cm] {
    flex-direction: column;
    gap: 5px;
    padding: 0 4px;
    background: transparent;
    position: relative;
    z-index: 1;
    max-width: 100%;
}

/* El círculo numerado sustituye al glifo de estado (que se oculta abajo). */
.phase-nav-item[b-u16kn0p7cm]::before {
    content: counter(phase-step, decimal-leading-zero);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg-white, #fff);
    border: 2px solid var(--mtmp-border-gray, #DCE5F2);
    color: var(--mtmp-text-gray, #6B7A90);
    font-size: 13px;
    font-weight: 700;
    transition: all 150ms ease;
}

.phase-nav-item.completed[b-u16kn0p7cm]::before {
    content: '✓';
    background: #d1fae5;
    border-color: var(--state-success-accent, #10b981);
    color: #065f46;
    font-size: 16px;
}

.phase-nav-item.in-progress[b-u16kn0p7cm]::before {
    border-color: var(--mtmp-primary, #117BFF);
    color: var(--mtmp-primary, #117BFF);
}

.phase-nav-item.selected[b-u16kn0p7cm] {
    background: transparent;
    box-shadow: none;
}

.phase-nav-item.selected[b-u16kn0p7cm]::before {
    box-shadow: 0 0 0 4px rgba(17, 123, 255, 0.18);
    border-color: var(--mtmp-primary, #117BFF);
}

.phase-nav-item.selected.completed[b-u16kn0p7cm] {
    background: transparent;
}

.phase-nav-item.selected.in-progress[b-u16kn0p7cm] {
    background: transparent;
}

.phase-nav-item:hover[b-u16kn0p7cm] {
    background: transparent;
}

.phase-nav-item:hover[b-u16kn0p7cm]::before {
    box-shadow: 0 0 0 4px rgba(17, 123, 255, 0.10);
}

/* El emoji de estado ya no aporta: el círculo carga el estado. */
.phase-nav-icon[b-u16kn0p7cm] {
    display: none;
}

.phase-nav-label[b-u16kn0p7cm] {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.phase-nav-pct[b-u16kn0p7cm] {
    font-size: 10px;
    padding: 1px 6px;
}

/* Insignia de instancias múltiples: montada sobre el círculo. */
.phase-nav-badge[b-u16kn0p7cm] {
    position: absolute;
    top: -4px;
    right: calc(50% - 28px);
    z-index: 2;
}

.phase-nav-chevron[b-u16kn0p7cm] {
    font-size: 9px;
}

/* ── Story E.04 (AC1): la fase que lleva trabajo del usuario ─────────────────
   El navegador ya usa color para el ESTATUS de la fase, así que "es mía" no
   puede ser otro color más: sería un segundo idioma sobre el mismo canal. Se
   marca con un punto y un borde, y el punto lleva aria-label — el color por sí
   solo no comunica. Tokens del sistema, cero hex nuevo. */
.phase-nav-item.has-my-tasks[b-u16kn0p7cm] {
    box-shadow: inset 0 0 0 2px var(--action-primary);
}

.phase-nav-mine[b-u16kn0p7cm] {
    color: var(--action-primary);
    font-size: 9px;
    line-height: 1;
    margin-left: 2px;
}