@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("./fonts/montserrat-latin-variable.311d352d9323.woff2") format("woff2");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("./fonts/montserrat-latin-variable.311d352d9323.woff2") format("woff2");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("./fonts/montserrat-latin-variable.311d352d9323.woff2") format("woff2");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("./fonts/montserrat-latin-variable.311d352d9323.woff2") format("woff2");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("./fonts/montserrat-latin-variable.311d352d9323.woff2") format("woff2");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("./fonts/montserrat-latin-variable.311d352d9323.woff2") format("woff2");
}

:root {
    --pm-font-sans: "Montserrat", "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --pm-primary: #0b3a6f;
    --pm-primary-strong: #082a4f;
    --pm-primary-soft: #edf4fb;
    --pm-accent: #1d70f7;
    --pm-accent-soft: rgba(29, 112, 247, 0.10);
    --pm-bg: #f4f7fb;
    --pm-surface: #ffffff;
    --pm-surface-soft: #f9fbfd;
    --pm-surface-2: #eef1f5;
    --pm-surface-row: #fafcfe;
    --pm-border: #d7e1ec;
    --pm-border-strong: #c7d4e2;
    --pm-divider: #eef2f6;
    --pm-text: #15263b;
    --pm-text-soft: #5f7084;
    --pm-text-muted: #6e7e92;
    --pm-success: #157347;
    --pm-warning: #b7791f;
    --pm-danger: #b42318;
    --pm-info: #0b5cab;
    --pm-radius-sm: 10px;
    --pm-radius-md: 16px;
    --pm-radius-lg: 22px;
    --pm-shadow-sm: 0 8px 22px rgba(15, 23, 42, 0.06);
    --pm-shadow-md: 0 18px 42px rgba(15, 23, 42, 0.1);
    --pm-shadow-lg: 0 24px 58px rgba(15, 23, 42, 0.14);
    --pm-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
    --pm-shadow-card-hover: 0 2px 4px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.08);
    --pm-shadow-topbar: 0 1px 2px rgba(15, 23, 42, 0.04);
    --pm-shadow-pop: 0 8px 28px rgba(15, 23, 42, 0.16);
    --pm-shadow-card-halo: 0 0 0 1px rgba(11, 58, 111, 0.08), 0 2px 4px rgba(11, 58, 111, 0.04), 0 12px 28px rgba(11, 58, 111, 0.08);
    --pm-shadow-btn-primary: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(11, 58, 111, 0.30);
    --pm-shadow-btn-primary-hover: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(11, 58, 111, 0.36);
    --pm-shadow-btn-primary-active: inset 0 1px 2px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(8, 42, 79, 0.4);
    --pm-ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
    --pm-sidebar-width: 232px;
    --pm-topbar-height: 56px;
    --bs-primary: #0b3a6f;
    --bs-primary-rgb: 11, 58, 111;
    --bs-body-bg: #f4f7fb;
    --bs-body-color: #15263b;
    --bs-border-color: #d7e1ec;
    --bs-link-color: #0b3a6f;
    --bs-link-hover-color: #082a4f;
    --bs-font-sans-serif: var(--pm-font-sans);
}

html,
body {
    min-height: 100%;
}

html {
    /* Densidad Bloomberg-like: base 13px (Linear/Stripe Dashboard usan 14,
       Bloomberg Terminal usa 12). Esto reduce TODOS los rem ~19% sin tocar
       valores en px. Critico: cambiar en html no body porque rem siempre
       se basa en root font-size. */
    font-size: 13px;
}

body {
    margin: 0;
    font-family: var(--bs-font-sans-serif);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--pm-text);
    background:
        radial-gradient(circle at top right, rgba(29, 112, 247, 0.08), transparent 22%),
        linear-gradient(180deg, #f8fbff 0%, var(--pm-bg) 100%);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

/* Links sobre identificadores embebidos en tablas/listados (póliza, cliente,
   aseguradora). Underline animado tipo Stripe: el subrayado aparece desde
   transparent al cobalt con offset y grosor calibrados. Heredan color del
   texto para no romper la jerarquia visual de la tabla. */
.link-entity {
    color: inherit;
    text-decoration: underline transparent;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: auto;
    cursor: pointer;
    transition: text-decoration-color 180ms var(--pm-ease-premium),
                color 180ms var(--pm-ease-premium);
}
.link-entity:hover,
.link-entity:focus {
    color: var(--pm-accent, #1d70f7);
    text-decoration-color: currentColor;
}

img {
    max-width: 100%;
    height: auto;
}

.text-muted {
    color: var(--pm-text-soft) !important;
}

.min-w-0 {
    min-width: 0;
}

.rounded-soft {
    border-radius: var(--pm-radius-md) !important;
}

.border-soft {
    border: 1px solid rgba(11, 58, 111, 0.08) !important;
}

.shadow-soft {
    box-shadow: var(--pm-shadow-sm) !important;
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: var(--pm-sidebar-width);
    flex: 0 0 var(--pm-sidebar-width);
    background:
        radial-gradient(circle at top center, rgba(255, 255, 255, 0.12), transparent 26%),
        linear-gradient(180deg, #0b3a6f 0%, #08284c 100%);
    color: #ffffff;
    box-shadow: 12px 0 28px rgba(8, 24, 44, 0.16);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.22s var(--pm-ease-premium), flex-basis 0.22s var(--pm-ease-premium), opacity 0.18s var(--pm-ease-premium), transform 0.18s var(--pm-ease-premium), box-shadow 0.18s var(--pm-ease-premium);
}

.app-sidebar__inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 100%;
    padding: 14px 12px;
}

.app-sidebar__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.app-sidebar__brand img {
    width: 138px;
    max-width: 138px;
    min-width: 138px;
    object-fit: contain;
    display: block;
}

.sidebar-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-group + .sidebar-group {
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-accordion {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-accordion summary {
    list-style: none;
}

.sidebar-accordion summary::-webkit-details-marker {
    display: none;
}

.sidebar-link--toggle {
    cursor: pointer;
    user-select: none;
}

.sidebar-link__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    transition: transform 0.18s var(--pm-ease-premium), color 0.18s var(--pm-ease-premium);
}

.sidebar-accordion[open] .sidebar-link__chevron {
    transform: rotate(180deg);
    color: #ffffff;
}

.sidebar-accordion__content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-link--child {
    padding-left: 16px;
    font-size: 0.95rem;
}

.sidebar-link--child .sidebar-link__icon {
    opacity: 0.9;
    font-size: 0.95rem;
}

.sidebar-group__label {
    margin: 0 6px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border-radius: var(--pm-radius-sm);
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background-color 0.18s var(--pm-ease-premium), border-color 0.18s var(--pm-ease-premium), color 0.18s var(--pm-ease-premium), transform 0.18s var(--pm-ease-premium), box-shadow 0.18s var(--pm-ease-premium);
}

.sidebar-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateX(1px);
}

/* Focus visible (navegacion con teclado): ring cobalt diferenciado
   del hover para a11y. */
.sidebar-link:focus-visible {
    outline: 2px solid var(--pm-accent);
    outline-offset: 2px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.sidebar-link.active {
    color: #ffffff;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 10px 18px rgba(0, 0, 0, 0.08);
    font-weight: 600;
}

.sidebar-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
}

.sidebar-link__icon {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.sidebar-link__text {
    flex: 1 1 auto;
}

.sidebar-group__divider {
    margin: 2px 8px 0;
    border-color: rgba(255, 255, 255, 0.12);
    opacity: 1;
}

.sidebar-footer {
    margin-top: auto;
    padding: 16px 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-footer__meta {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.84rem;
    line-height: 1.45;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    min-height: var(--pm-topbar-height);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 100%);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(11, 58, 111, 0.08);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.app-topbar__left,
.app-topbar__right {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.app-topbar__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pm-text);
}

.app-topbar__subtitle {
    margin: 0;
    font-size: 0.86rem;
    color: var(--pm-text-soft);
}

.sidebar-collapsed .app-sidebar {
    width: 0;
    flex-basis: 0;
    opacity: 0;
    transform: translateX(-18px);
    box-shadow: none;
    pointer-events: none;
}

.sidebar-collapsed .app-main {
    flex-basis: 100%;
}

.app-main__content {
    padding: 16px;
}

.content-shell {
    max-width: 1680px;
    margin: 0 auto;
}

.page-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
}

.page-header__intro {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 860px;
}

.page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-title {
    margin: 0;
    font-size: clamp(1.5rem, 2.4vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pm-text);
}

.page-subtitle {
    margin: 0;
    max-width: 900px;
    color: var(--pm-text-soft);
    font-size: 0.92rem;
    line-height: 1.5;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.page-actions .btn {
    min-height: 34px;
    white-space: normal;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

.surface-card,
.section-card,
.card {
    background: var(--pm-surface);
    border: 1px solid rgba(11, 58, 111, 0.08);
    border-radius: var(--pm-radius-md);
    box-shadow: var(--pm-shadow-sm);
}

.section-card {
    position: relative;
    overflow: hidden;
    padding: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 252, 255, 0.96) 100%);
}

.section-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(11, 58, 111, 0.16), rgba(29, 112, 247, 0.08), transparent);
}

.section-title-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.section-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--pm-text);
}

.section-description {
    margin: 3px 0 0;
    color: var(--pm-text-soft);
    font-size: 0.85rem;
}

.pm-help-tooltip .tooltip-inner {
    max-width: 320px;
    padding: 10px 12px;
    text-align: left;
    font-size: 0.84rem;
    line-height: 1.45;
}

.metric-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    padding: 12px 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(11, 58, 111, 0.08);
    border-radius: var(--pm-radius-md);
    box-shadow: var(--pm-shadow-sm);
    transition: transform 0.18s var(--pm-ease-premium), box-shadow 0.25s var(--pm-ease-premium);
}

/* Bureau: la metric-card se eleva un toque al pasar el mouse (profundidad
   premium). Sutil. Se anula bajo prefers-reduced-motion (bloque global +
   guard explícito abajo). */
.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--pm-shadow-card-hover);
}

.metric-card::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -24px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(29, 112, 247, 0.12), transparent 66%);
    pointer-events: none;
}

.metric-card__label {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--pm-text-soft);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metric-card__value {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--pm-text);
}

.metric-card__value--md {
    font-size: 1.15rem;
    line-height: 1.22;
}

.metric-card__value--sm {
    font-size: 1rem;
    line-height: 1.25;
}

.metric-card__value--xs {
    font-size: 0.92rem;
    line-height: 1.35;
}

.metric-card__meta {
    margin-top: 6px;
    color: var(--pm-text-soft);
    font-size: 0.82rem;
}

/* Density compaction (Fase 8): reduce gutter de Bootstrap rows */
.row.g-4 {
    --bs-gutter-x: 0.9rem;
    --bs-gutter-y: 0.9rem;
}

.row.g-3 {
    --bs-gutter-x: 0.65rem;
    --bs-gutter-y: 0.65rem;
}

.quick-action-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 14px;
    border-radius: var(--pm-radius-md);
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfe 100%);
    box-shadow: var(--pm-shadow-sm);
    transition: transform 0.18s var(--pm-ease-premium), box-shadow 0.18s var(--pm-ease-premium), border-color 0.18s var(--pm-ease-premium);
}

.quick-action-card:hover {
    transform: translateY(-2px);
    /* Halo navy: ring 1px + sombra tinteada. DESIGN.md "Halo For Action Rule"
       reservado para cards que invitan a accion. */
    box-shadow: var(--pm-shadow-card-halo);
    border-color: transparent;
}

.quick-action-card__icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
    font-size: 1rem;
    margin-bottom: 10px;
}

.quick-action-card__title {
    margin: 0 0 5px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--pm-text);
}

.quick-action-card__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.quick-action-card__title-row .quick-action-card__title {
    margin-bottom: 0;
}

.quick-action-card__text {
    margin: 0 0 12px;
    color: var(--pm-text-soft);
    font-size: 0.84rem;
    line-height: 1.5;
}

.quick-action-card__footer {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.table-selection-col {
    width: 70px;
    min-width: 70px;
    text-align: center;
}

.sg-cuotas-table td {
    vertical-align: top;
}

.sg-cuotas-table__col--quota {
    width: 110px;
    min-width: 110px;
}

.sg-cuotas-table__col--date,
.sg-cuotas-table__col--amount {
    width: 220px;
    min-width: 220px;
}

.sg-cuotas-table__col--delete {
    width: 100px;
    min-width: 100px;
}

.sg-cuotas-table .form-control,
.sg-cuotas-table .form-select {
    min-width: 0;
}

.sg-cuotas-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 12px;
}

.manual-flow-panel {
    background:
        radial-gradient(circle at top right, rgba(29, 112, 247, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.99) 0%, rgba(243, 248, 255, 0.96) 100%);
}

.manual-flow-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px;
    border-radius: 18px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: rgba(11, 58, 111, 0.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.manual-workbench {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(247, 250, 255, 0.97) 100%);
}

.manual-toolbar {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

.manual-help-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.manual-help-grid__item {
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.manual-help-grid__title {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--pm-text);
}

.manual-help-grid__text {
    margin: 0;
    color: var(--pm-text-soft);
    font-size: 0.92rem;
    line-height: 1.55;
}

.ops-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ops-summary-card {
    position: relative;
    overflow: hidden;
}

.ops-summary-card .quick-action-card__icon {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: 12px;
    font-size: 1.1rem;
}

.ops-summary-card__value {
    margin: 0;
    font-size: 1.28rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--pm-text);
}

.ops-summary-card__hint {
    margin: 6px 0 0;
    color: var(--pm-text-soft);
    font-size: 0.88rem;
    line-height: 1.45;
}

.manual-submit-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px dashed rgba(11, 58, 111, 0.12);
}

.mail-confirm-panel {
    background:
        radial-gradient(circle at top right, rgba(29, 112, 247, 0.1), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(247, 250, 255, 0.97) 100%);
}

.mail-batch-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(11, 58, 111, 0.1);
}

.mail-batch-card::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, rgba(29, 112, 247, 0.72) 0%, rgba(11, 58, 111, 0.38) 100%);
}

.mail-batch-card__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.mail-batch-card__eyebrow {
    margin: 0 0 6px;
    color: var(--pm-text-soft);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mail-batch-card__email {
    margin-bottom: 14px;
    font-size: 1.1rem;
    line-height: 1.3;
}

.confirm-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(246, 250, 255, 0.97) 100%);
}

.confirm-callout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(11, 58, 111, 0.1);
    background: linear-gradient(135deg, rgba(238, 245, 255, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: var(--pm-shadow-sm);
}

/* B16: variante compacta - single row, sin "Modo activo" eyebrow ni grid de badges */
.confirm-callout--compact {
    align-items: center;
    padding: 12px 16px;
    border-radius: var(--pm-radius-md);
}

.confirm-callout--compact .confirm-callout__icon {
    width: 36px;
    height: 36px;
}

.confirm-callout--compact .confirm-callout__title {
    font-size: 1rem;
    margin: 0;
}

.confirm-callout__icon,
.confirm-checklist__icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
    font-size: 1.1rem;
}

.confirm-callout__title,
.confirm-checklist__title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pm-text);
}

.confirm-callout__text,
.confirm-checklist__text {
    margin: 0;
    color: var(--pm-text-soft);
    font-size: 0.92rem;
    line-height: 1.55;
}

.confirm-checklist {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.confirm-checklist__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    box-shadow: var(--pm-shadow-sm);
}

.confirm-panel__footnote {
    margin: 0;
    color: var(--pm-text-soft);
    font-size: 0.9rem;
    line-height: 1.55;
    text-align: center;
}

.info-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.info-list__item {
    padding: 16px;
    border-radius: 14px;
    background: var(--pm-surface-soft);
    border: 1px solid rgba(11, 58, 111, 0.07);
    transition: background-color 0.18s var(--pm-ease-premium), border-color 0.18s var(--pm-ease-premium), transform 0.18s var(--pm-ease-premium);
}

.info-list__item:hover {
    background: var(--pm-surface);
    border-color: rgba(11, 58, 111, 0.14);
    transform: translateY(-1px);
}

.info-list__label {
    display: block;
    margin-bottom: 6px;
    color: var(--pm-text-soft);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-list__value {
    display: block;
    color: var(--pm-text);
    font-size: 1rem;
    font-weight: 600;
}

.info-list__text {
    margin: 0;
    color: var(--pm-text-soft);
    font-size: 0.94rem;
    line-height: 1.55;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px;
    border-radius: var(--pm-radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    transition: transform 0.18s var(--pm-ease-premium), box-shadow 0.18s var(--pm-ease-premium), background-color 0.18s var(--pm-ease-premium), border-color 0.18s var(--pm-ease-premium);
}

/* ============================================================
   Press state (Bureau) — los controles se "hunden" un toque al
   tocarlos (feel táctil estilo iOS). .btn ya tiene transition:transform,
   así que baja al apretar y vuelve suave al soltar. Cubre botones,
   chips e íconos-botón (todos son .btn en la app). Se desactiva en
   prefers-reduced-motion (ver bloque al final). */
.btn:active {
    transform: scale(0.97);
}

/* ============================================================
   Toasts premium (Bureau) — avisitos efímeros abajo a la derecha.
   API JS global: window.pmToast(mensaje, {variant, duration}).
   Variants: default (navy) · success · danger · info. Ver base.html.
   Convive con los toasts Bootstrap de mensajes Django / jobs.
   ============================================================ */
.pm-toaster {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1080;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
    max-width: min(360px, calc(100vw - 36px));
}
.pm-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    box-shadow: 0 12px 32px -8px rgba(11, 58, 111, 0.28), 0 2px 6px rgba(15, 23, 42, 0.08);
    color: var(--pm-text);
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.4;
    opacity: 0;
    transform: translateX(16px) scale(0.98);
    transition: opacity 0.28s var(--pm-ease-premium), transform 0.32s var(--pm-ease-premium);
}
.pm-toast.show {
    opacity: 1;
    transform: none;
}
.pm-toast__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: var(--pm-primary);
}
.pm-toast--success .pm-toast__icon { color: var(--pm-success); }
.pm-toast--danger .pm-toast__icon { color: var(--pm-danger); }
.pm-toast--info .pm-toast__icon { color: var(--pm-info); }
.pm-toast__body { flex: 1 1 auto; }
.pm-toast__close {
    flex: 0 0 auto;
    background: none;
    border: 0;
    color: var(--pm-text-muted);
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    font-size: 1.05rem;
    opacity: 0.55;
    transition: opacity 0.15s var(--pm-ease-premium);
}
.pm-toast__close:hover { opacity: 1; }
@media (max-width: 480px) {
    .pm-toaster { left: 18px; right: 18px; max-width: none; }
}

/* ============================================================
   Confirmación premium (Bureau) — reemplaza window.confirm().
   Backdrop navy con blur, card con pop suave (sin rebote), botón
   primario navy y variante peligro (--pm-danger).
   ============================================================ */
.pm-confirm-scrim {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 26, 50, 0.5);
    opacity: 0;
    transition: opacity 0.18s var(--pm-ease-premium);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.pm-confirm-scrim.show { opacity: 1; }
.pm-confirm {
    width: 100%;
    max-width: 420px;
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    box-shadow: var(--pm-shadow-pop);
    padding: 26px 24px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transition: transform 0.2s var(--pm-ease-premium), opacity 0.18s var(--pm-ease-premium);
}
.pm-confirm-scrim.show .pm-confirm { opacity: 1; transform: none; }
.pm-confirm__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    flex: none;
}
.pm-confirm__icon svg { width: 24px; height: 24px; }
.pm-confirm__icon--info { background: var(--pm-primary-soft); color: var(--pm-primary); }
.pm-confirm__icon--danger { background: color-mix(in srgb, var(--pm-danger) 13%, transparent); color: var(--pm-danger); }
.pm-confirm__title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--pm-text);
    margin: 0 0 6px;
}
.pm-confirm__msg {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--pm-text-soft);
    margin: 0 0 20px;
}
.pm-confirm__actions { display: flex; gap: 10px; width: 100%; }
.pm-confirm__btn {
    flex: 1;
    appearance: none;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 10px 16px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.13s var(--pm-ease-premium), border-color 0.13s, box-shadow 0.13s, filter 0.13s;
}
.pm-confirm__btn--cancel { background: var(--pm-surface); border-color: var(--pm-border); color: var(--pm-text-soft); }
.pm-confirm__btn--cancel:hover { background: var(--pm-surface-soft); color: var(--pm-text); }
.pm-confirm__btn--ok { background: var(--pm-primary); color: #fff; }
.pm-confirm__btn--ok:hover { filter: brightness(1.06); }
.pm-confirm__btn--danger { background: var(--pm-danger); }
.pm-confirm__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pm-primary-soft); }
.pm-confirm__btn--danger:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-danger) 32%, transparent); }
@media (prefers-reduced-motion: reduce) {
    .pm-confirm-scrim, .pm-confirm { transition-duration: 0.01ms; }
    .pm-confirm { transform: none; }
}

/* ============================================================
   Modales premium (Bureau) — apertura con pop suave (scale, SIN rebote:
   ease-out), backdrop tinteado al navy con leve blur, sombra tinteada.
   Global sobre los modales Bootstrap. Reduced-motion: el bloque global
   vuelve la transición casi instantánea.
   ============================================================ */
.modal-backdrop {
    background-color: #0a1e38; /* navy profundo en vez de negro puro */
}
.modal-backdrop.show {
    opacity: 0.55;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.modal-content {
    border-radius: var(--pm-radius-md);
    box-shadow: 0 24px 60px -12px rgba(11, 58, 111, 0.35), 0 4px 12px rgba(15, 23, 42, 0.10);
}
.modal.fade .modal-dialog {
    transition: transform 0.32s var(--pm-ease-premium);
    transform: scale(0.97) translateY(8px);
}
.modal.show .modal-dialog {
    transform: none;
}

/* ============================================================
   Botón con estado de carga (Bureau) — spinner + deshabilitado
   mientras procesa. Evita el doble-submit. Se activa con el helper
   window.pmButtonLoading(btn, true[, texto]) o auto en <form data-loading>.
   El spinner hereda el color del texto del botón (blanco en primario,
   navy en outline). Ver base.html.
   ============================================================ */
.btn.is-loading {
    pointer-events: none;
    cursor: default;
}
.pm-btn-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: pmBtnSpin 0.6s linear infinite;
}
@keyframes pmBtnSpin {
    to { transform: rotate(360deg); }
}

/* Bureau: chevron de un disclosure (botón collapse) que rota al expandir.
   Se usa en el toggle "Ver contactos" de consulta_cliente. */
.sg-chev {
    transition: transform 0.3s var(--pm-ease-premium);
}
[aria-expanded="true"] .sg-chev {
    transform: rotate(180deg);
}

/* "Chrome Stays Still Rule": solo CTAs principales levitan al hover.
   Los .btn-light (chrome del topbar: avatar, theme toggle, campana) y
   .btn-outline-secondary (navegación) no se mueven — son estructura, no acción. */
.btn-primary:hover,
.btn-outline-primary:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--pm-primary);
    border-color: var(--pm-primary);
    box-shadow: var(--pm-shadow-btn-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--pm-primary-strong);
    border-color: var(--pm-primary-strong);
    box-shadow: var(--pm-shadow-btn-primary-hover);
}

.btn-primary:active {
    box-shadow: var(--pm-shadow-btn-primary-active);
    transform: translateY(0);
}

.btn-outline-primary {
    border-color: rgba(11, 58, 111, 0.24);
    color: var(--pm-primary);
    background: #ffffff;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: var(--pm-primary-strong);
    background: var(--pm-primary-soft);
    border-color: rgba(11, 58, 111, 0.3);
}

.btn-outline-secondary {
    border-color: rgba(21, 38, 59, 0.16);
    color: var(--pm-text);
    background: #ffffff;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: var(--pm-text);
    background: #f7f9fc;
    border-color: rgba(21, 38, 59, 0.22);
}

.btn-light {
    background: #ffffff;
    border-color: rgba(21, 38, 59, 0.1);
    color: var(--pm-text);
}

.btn-light:hover,
.btn-light:focus {
    color: var(--pm-text);
    background: #f8fafc;
    border-color: rgba(21, 38, 59, 0.16);
}

.form-control,
.form-select,
textarea,
input,
select {
    background: #ffffff;
    border-radius: var(--pm-radius-sm);
    border: 1px solid var(--pm-border);
    min-height: 32px;
    padding: 4px 10px;
    font-size: 0.88rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: border-color 0.18s var(--pm-ease-premium), box-shadow 0.18s var(--pm-ease-premium), background-color 0.18s var(--pm-ease-premium);
}

/* ============================================================
   Input de archivo premium (Bureau) — estiliza el botón nativo
   "Elegir archivo" (::file-selector-button) para que matchee el
   sistema. CSS puro, sin tocar markup: aplica a todos los
   <input type="file"> (comprobantes, imputaciones, etc.).
   ============================================================ */
input[type="file"] {
    cursor: pointer;
}
input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 6px 12px;
    border: 1px solid var(--pm-primary);
    border-radius: var(--pm-radius-sm);
    background: var(--pm-primary);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s var(--pm-ease-premium);
}
input[type="file"]::file-selector-button:hover {
    background: var(--pm-primary-strong);
}

.form-label {
    margin-bottom: 8px;
    color: var(--pm-text);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.form-text {
    color: var(--pm-text-soft);
}

.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder,
input::placeholder {
    color: var(--pm-text-muted);
}

.form-control:hover,
.form-select:hover,
textarea:hover,
input:hover,
select:hover {
    border-color: var(--pm-border-strong);
}

.input-group-text {
    border-radius: var(--pm-radius-sm);
    border-color: var(--pm-border);
    background: #f7f9fc;
    color: var(--pm-text-soft);
}

/* Focus ring: cobalt (accent) en lugar de navy. El cobalt comunica
   "acá hay acción/foco", el navy es estructura/marca. Coherencia con
   DESIGN.md: el accent ≤10% se reserva para señales de interacción. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus {
    box-shadow: 0 0 0 3px rgba(29, 112, 247, 0.20) !important;
    border-color: var(--pm-accent) !important;
}

/* ============================================================
   Foco visible consistente (Bureau) — anillo cobalt al navegar por
   TECLADO (:focus-visible, no molesta al mouse) en interactivos que
   hoy no tienen ring propio: links de texto, íconos-botón, íconos de
   ayuda, dropdown items, summary y elementos con tabindex. Los .btn,
   inputs y sidebar-links ya tienen el suyo y quedan excluidos.
   ============================================================ */
a:not(.btn):not(.sidebar-link):focus-visible,
summary:not(.sidebar-link):focus-visible,
.sg-help-icon:focus-visible,
.iconbtn:focus-visible,
.dropdown-item:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--pm-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================================================
   Controles premium (Bureau) — checkbox + switch (light mode).
   Restyle sobre Bootstrap, sin tocar templates: mejora TODOS los
   form-switch / checkbox de la app de una. El dark mode conserva
   su propio bloque (ver "Form switches en dark", más abajo).
   ============================================================ */

/* Checkbox: navy al marcar, esquinas suaves.
   min-height/padding anulan la regla global de `input` (base.css ~1083) que
   fuerza min-height:32px + padding y deforma checkbox/switch. */
.form-check-input[type="checkbox"] {
    width: 1.15em;
    height: 1.15em;
    min-height: 0;
    padding: 0;
    border-radius: 0.4em;
    border-color: var(--pm-border-strong);
    cursor: pointer;
}
.form-check-input[type="checkbox"]:checked {
    background-color: var(--pm-primary);
    border-color: var(--pm-primary);
}

/* Switch (toggle): pista navy al encender, perilla blanca que desliza.
   Va DESPUÉS del checkbox para ganar width/height/border-radius (misma
   especificidad). min-height:0 + padding:0 anulan la regla global de `input`. */
.form-switch .form-check-input {
    width: 2.5em;
    height: 1.4em;
    min-height: 0;
    padding: 0;
    margin-top: 0.1em;
    border: none;
    border-radius: 999px;
    background-color: var(--pm-border-strong);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.2' fill='%23fff'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.16);
    transition: background-color 0.25s var(--pm-ease-premium),
                background-position 0.28s var(--pm-ease-premium);
    cursor: pointer;
}
.form-switch .form-check-input:checked,
.form-switch .form-check-input:checked:focus {
    background-color: var(--pm-primary);
    border-color: var(--pm-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.2' fill='%23fff'/%3e%3c/svg%3e");
    background-position: right center;
}
.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.2' fill='%23fff'/%3e%3c/svg%3e");
}

/* ============================================================
   Tabular numbers — DESIGN.md "Tabular Numbers Rule"
   Activa figuras tabulares (todos los dígitos mismo ancho) +
   lining nums (sin descenders). Sin esto las columnas no alinean
   y los importes se ven legacy.
   ============================================================ */
.table td,
.table th,
.metric-card__value,
.metric-card__value--md,
.metric-card__value--sm,
.metric-card__value--xs,
.metric-card__meta,
.kpi-inline__value,
.info-list__value,
.sg-job-center__metric-value,
.sys-component-card__hint,
.sys-component-card__denom,
.system-context-card__value {
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-variant-numeric: tabular-nums lining-nums;
}

.table-card {
    overflow: hidden;
    border-radius: var(--pm-radius-md);
    border: 1px solid rgba(11, 58, 111, 0.08);
    box-shadow: var(--pm-shadow-sm);
    background: #ffffff;
}

.table-responsive {
    border-radius: inherit;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: #f8fbff;
    --bs-table-hover-bg: #eef5fd;
    margin-bottom: 0;
    vertical-align: middle;
}

.table > :not(caption) > * > * {
    padding: 8px 12px;
    border-bottom-color: var(--pm-border);
    font-size: 0.88rem;
}

.table thead th {
    background: var(--pm-primary);
    color: #ffffff;
    border-bottom: 0;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.table tbody tr {
    transition: background-color 0.15s var(--pm-ease-premium);
}

.table tbody tr:hover {
    background: var(--pm-primary-soft);
}

.alert {
    border: 0;
    border-radius: 14px;
    box-shadow: var(--pm-shadow-sm);
}

.dropdown-menu {
    border: 1px solid rgba(11, 58, 111, 0.08);
    border-radius: 14px;
    box-shadow: var(--pm-shadow-md);
    padding: 8px;
}

.dropdown-item {
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 500;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: #f3f7fc;
    color: var(--pm-primary);
}


.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid transparent;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
    white-space: nowrap;
}

.status-badge i {
    font-size: 0.95rem;
}

.status-badge--success {
    color: #0f5132;
    background: #e9f8ef;
    border-color: #b8e3c6;
}

/* "Sin datos" (automatizaciones, PROM-50): corrió bien pero la aseguradora no
   tenía novedades. Es un resultado correcto, no un error — va en verde para
   no acostumbrar a nadie a ignorar el panel — pero un verde MÁS CLARO que
   "Completado" para poder distinguirlos de un vistazo. */
.status-badge--success-light {
    color: #3d7a5c;
    background: #f2faf5;
    border-color: #d7ecdf;
}

.status-badge--info {
    color: var(--pm-primary);
    background: #edf4ff;
    border-color: #cfe0ff;
}

.status-badge--warning {
    color: #8a5a12;
    background: #fff4dd;
    border-color: #f1d49a;
}

.status-badge--danger {
    color: #a61b1b;
    background: #fdecec;
    border-color: #f3c2c2;
}

/* Bloqueado por credencial (automatizaciones): distinto de los 2 rojos/naranjas
   de error para que un operador no confunda "hay que llamar a IT" con
   "hay que cambiar una contraseña". */
.status-badge--violeta {
    color: #6b3fa0;
    background: #f2ecfa;
    border-color: #ddc9ef;
}

.status-badge--neutral {
    color: var(--pm-text-soft);
    background: #f5f8fb;
    border-color: #dce5ef;
}

.detail-switcher {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail-switcher__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.detail-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(11, 58, 111, 0.12);
    background: #ffffff;
    color: var(--pm-text);
    border-radius: 14px;
    padding: 12px 16px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    transition: transform 0.18s var(--pm-ease-premium), box-shadow 0.18s var(--pm-ease-premium), border-color 0.18s var(--pm-ease-premium), background-color 0.18s var(--pm-ease-premium);
}

.detail-nav-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(11, 58, 111, 0.22);
    background: #f8fbff;
}

.detail-nav-btn.is-active {
    background: var(--pm-primary);
    color: #ffffff;
    border-color: var(--pm-primary);
    box-shadow: 0 12px 24px rgba(11, 58, 111, 0.18);
}

.detail-nav-btn__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    line-height: 1.15;
}

.detail-nav-btn__title {
    font-size: 0.95rem;
}

.detail-nav-btn__meta {
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.75;
}

.detail-switcher__panel {
    display: none;
}

.detail-switcher__panel.is-active {
    display: block;
}

.detail-switcher__panel-inner {
    border: 1px solid rgba(11, 58, 111, 0.08);
    border-radius: 18px;
    padding: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.detail-switcher__panel-title {
    margin: 0 0 6px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--pm-text);
}

.detail-switcher__panel-subtitle {
    margin: 0 0 18px;
    color: var(--pm-text-soft);
    font-size: 0.94rem;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(11, 58, 111, 0.1);
    color: var(--pm-text);
    font-weight: 600;
}

.sg-job-center__toggle {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(11, 58, 111, 0.12);
}

.sg-job-center__toggle i {
    font-size: 1.05rem;
    color: var(--pm-primary);
}

.sg-job-center__badge {
    position: absolute;
    top: 5px;
    right: 5px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    padding: 0 5px;
    background: #b42318;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
}

.sg-job-center__menu {
    --bs-dropdown-min-width: min(420px, calc(100vw - 24px));
    width: min(420px, calc(100vw - 24px));
    border: 1px solid rgba(11, 58, 111, 0.08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 44px rgba(11, 58, 111, 0.18);
}

.sg-job-center__header {
    padding: 16px 18px 10px;
    border-bottom: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, rgba(11, 58, 111, 0.03), rgba(11, 58, 111, 0.01));
}

.sg-job-center__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--pm-text);
}

.sg-job-center__subtitle {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--pm-text-soft);
    line-height: 1.4;
}

.sg-job-center__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 18px 10px;
    background: linear-gradient(180deg, rgba(11, 58, 111, 0.01), rgba(11, 58, 111, 0.03));
}

.sg-job-center__metric {
    padding: 10px 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(11, 58, 111, 0.08);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sg-job-center__metric-value {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--pm-text);
}

.sg-job-center__metric-label {
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--pm-text-soft);
}

.sg-job-center__hint {
    padding: 0 18px 14px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--pm-text-soft);
}

.sg-job-center__empty-state {
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.sg-job-center__empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(11, 58, 111, 0.08);
    color: var(--pm-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.sg-job-center__empty-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--pm-text);
}

.sg-job-center__empty-copy {
    max-width: 320px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--pm-text-soft);
}

.sg-job-center__feed {
    max-height: min(58vh, 520px);
    overflow: auto;
    padding: 0 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sg-job-center__footer {
    padding: 12px 18px 16px;
    border-top: 1px solid rgba(11, 58, 111, 0.08);
    display: flex;
    justify-content: flex-end;
}

.sg-job-center__link {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--pm-primary);
    text-decoration: none;
    white-space: nowrap;
}

.sg-job-center__item {
    display: block;
    position: relative;
    padding: 13px 14px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(11, 58, 111, 0.08);
    text-decoration: none;
    color: inherit;
    white-space: normal;
}

.sg-job-center__item:hover {
    background: rgba(11, 58, 111, 0.03);
    border-color: rgba(11, 58, 111, 0.14);
}

.sg-job-center__item.is-unread {
    border-color: rgba(11, 92, 171, 0.28);
    box-shadow: 0 0 0 2px rgba(11, 92, 171, 0.06);
}

.sg-job-center__item-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sg-job-center__item-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 58, 111, 0.08);
    color: var(--pm-primary);
    font-size: 0.96rem;
}

.sg-job-center__item-body {
    min-width: 0;
    flex: 1 1 auto;
}

.sg-job-center__item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.sg-job-center__item-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--pm-text);
    line-height: 1.3;
}

.sg-job-center__item-detail {
    margin-top: 5px;
    font-size: 0.79rem;
    color: var(--pm-text-soft);
    line-height: 1.4;
}

.sg-job-center__item-meta {
    margin-top: 7px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.74rem;
    color: var(--pm-text-soft);
}

.sg-job-center__item-open {
    color: var(--pm-primary);
    font-weight: 700;
}

.sg-job-center__item-dot {
    position: absolute;
    top: 11px;
    right: 11px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #0b5cab;
}

.sg-job-center__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.sg-job-center__tag--info {
    background: rgba(11, 92, 171, 0.1);
    color: #0b5cab;
}

.sg-job-center__tag--success {
    background: rgba(21, 115, 71, 0.12);
    color: #157347;
}

.sg-job-center__tag--danger {
    background: rgba(180, 35, 24, 0.12);
    color: #b42318;
}

.toast {
    border-radius: 14px;
    box-shadow: var(--pm-shadow-md);
}

.global-toast-container {
    z-index: 1100;
}

.app-mobile-sidebar {
    background:
        radial-gradient(circle at top center, rgba(255, 255, 255, 0.12), transparent 24%),
        linear-gradient(180deg, #0b3a6f 0%, #08284c 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* Navy nocturno profundo en dark (coherente con el sidebar desktop): casi fundido
   con el fondo oscuro, apenas un matiz navy. */
[data-theme="dark"] .app-mobile-sidebar {
    background:
        radial-gradient(circle at top center, rgba(255, 255, 255, 0.03), transparent 24%),
        linear-gradient(180deg, #0b1c33 0%, #070f1d 100%);
}

.app-mobile-sidebar .offcanvas-title {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.section-title--compact {
    font-size: 1rem;
}

.copy-buffer {
    position: absolute;
    left: -10000px;
    top: -10000px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.brand-media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 20px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #eef4fb 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.brand-media--sm {
    width: 72px;
    height: 72px;
    border-radius: 18px;
}

.brand-media--lg {
    width: 88px;
    height: 88px;
    border-radius: 22px;
}

.brand-media__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.brand-media--sm .brand-media__img {
    padding: 8px;
}

.brand-media__icon {
    font-size: 2rem;
    color: #6b7c8f;
}

.auth-page {
    background:
        radial-gradient(circle at top left, rgba(29, 112, 247, 0.12), transparent 24%),
        linear-gradient(180deg, #f8fbff 0%, var(--pm-bg) 100%);
}

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    background:
        radial-gradient(circle at top left, rgba(29, 112, 247, 0.12), transparent 24%),
        linear-gradient(180deg, #f8fbff 0%, var(--pm-bg) 100%);
}

.auth-layout {
    min-height: 100vh;
}

.auth-aside {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #0b3a6f 0%, #08284c 100%);
    color: #ffffff;
    padding: 44px 42px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.auth-aside::before,
.auth-aside::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.auth-aside::before {
    width: 320px;
    height: 320px;
    top: -120px;
    right: -120px;
}

.auth-aside::after {
    width: 240px;
    height: 240px;
    bottom: -80px;
    left: -80px;
}

.auth-brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 34px;
}

.auth-brand img {
    width: 176px;
    max-width: 100%;
    display: block;
}

.auth-aside__content,
.auth-aside__footer {
    position: relative;
    z-index: 1;
}

.auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.auth-aside h1 {
    margin: 0 0 14px;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #ffffff;
}

.auth-aside p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 520px;
}

.auth-points {
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
}

.auth-points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.96rem;
    line-height: 1.55;
}

.auth-points i {
    font-size: 1rem;
    color: #9ac4ff;
    margin-top: 2px;
}

.auth-form-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.auth-card {
    width: 100%;
    max-width: 460px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(11, 58, 111, 0.09);
    border-radius: 24px;
    box-shadow: var(--pm-shadow-lg);
    padding: 30px;
}

.auth-card__header {
    margin-bottom: 22px;
}

.auth-card__title {
    margin: 0 0 8px;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pm-text);
}

.auth-card__subtitle {
    margin: 0;
    color: var(--pm-text-soft);
    font-size: 0.96rem;
    line-height: 1.6;
}

.auth-field + .auth-field {
    margin-top: 16px;
}

.auth-field .form-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-field .input-group-text {
    border-radius: 12px 0 0 12px;
}

.auth-field .form-control {
    min-height: 48px;
    border-left: 0;
}

.auth-submit {
    width: 100%;
    min-height: 48px;
    margin-top: 22px;
}

.auth-meta {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(11, 58, 111, 0.08);
    color: var(--pm-text-soft);
    font-size: 0.9rem;
    line-height: 1.55;
}

.auth-error-list {
    margin: 10px 0 0;
    padding-left: 18px;
    color: var(--pm-danger);
    font-size: 0.88rem;
}

.auth-footer-note {
    margin-top: 18px;
    color: var(--pm-text-muted);
    font-size: 0.84rem;
    text-align: center;
}

.bg-azul-promecor {
    background-color: var(--pm-primary) !important;
    color: #ffffff !important;
}

@media (max-width: 1199.98px) {
    .app-main__content {
        padding: 14px;
    }

    .page-title {
        font-size: 1.6rem;
    }
}

@media (max-width: 991.98px) {
    .app-topbar {
        padding: 12px 16px;
    }

    .app-main__content {
        padding: 18px 14px 22px;
    }

    .info-list {
        grid-template-columns: 1fr;
    }

    .auth-aside {
        min-height: 320px;
        padding: 32px 24px;
    }

    .auth-aside h1 {
        font-size: 1.8rem;
    }

    .auth-form-wrap {
        padding: 24px 16px 32px;
    }
}

@media (max-width: 767.98px) {
    .page-shell {
        gap: 20px;
    }

    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .page-title {
        font-size: clamp(1.8rem, 8vw, 2.35rem);
    }

    .page-subtitle {
        font-size: 0.96rem;
    }

    .page-actions {
        width: 100%;
        gap: 8px;
    }

    .page-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .metric-card__value {
        font-size: 1.6rem;
    }

    .section-card,
    .metric-card,
    .quick-action-card {
        padding: 18px;
    }

    .bulk-mode-card {
        padding: 20px;
        gap: 16px;
    }

    .lookup-form-shell {
        padding: 16px;
    }

    .guide-card {
        padding: 14px;
    }

    .toolbar-inline {
        width: 100%;
    }

    .toolbar-inline > * {
        max-width: 100%;
    }

    .quick-action-card__footer .btn,
    .bulk-mode-card__footer .btn {
        width: 100%;
    }

    .auth-card {
        padding: 22px 18px;
        border-radius: 20px;
    }

    .auth-card__title {
        font-size: 1.4rem;
    }
}


.sg-extraction-page {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.sg-extraction-overview {
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(237, 244, 255, 0.92) 100%);
}

.sg-extraction-overview__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.sg-extraction-overview__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sg-extraction-grid > [class*="col-"] {
    display: flex;
}

.sg-workflow-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 100%;
    padding: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 251, 254, 0.98) 100%);
}

.sg-workflow-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.sg-workflow-card__eyebrow {
    margin-bottom: 6px;
    color: var(--pm-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sg-workflow-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 16px;
}

.sg-workflow-card__intro-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sg-mini-panel {
    position: relative;
    overflow: hidden;
    min-height: 118px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.sg-mini-panel::after {
    content: "";
    position: absolute;
    right: -18px;
    bottom: -18px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(29, 112, 247, 0.1), transparent 68%);
    pointer-events: none;
}

.sg-mini-panel__label {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--pm-text-soft);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sg-mini-panel__value {
    margin: 0 0 6px;
    color: var(--pm-text);
    font-size: 1rem;
    font-weight: 700;
}

.sg-mini-panel__text {
    margin: 0;
    color: var(--pm-text-soft);
    font-size: 0.9rem;
    line-height: 1.5;
}

.sg-workflow-card__route {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f6f9fd;
    border: 1px solid rgba(11, 58, 111, 0.08);
}

.sg-workflow-card__route-label {
    color: var(--pm-text-soft);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sg-workflow-card__route code {
    color: var(--pm-primary-strong);
    font-size: 0.92rem;
}

.sg-workflow-form {
    margin-top: auto;
    padding: 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    border: 1px solid rgba(11, 58, 111, 0.08);
}

.sg-workflow-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}

.sg-workflow-form__actions .btn {
    min-width: 190px;
}

.sg-workflow-card__hint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fbff;
    border: 1px dashed rgba(11, 58, 111, 0.18);
    color: var(--pm-text-soft);
    font-size: 0.92rem;
}

.sg-workflow-card .alert code {
    word-break: break-all;
}

.sg-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.sg-metric-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sg-metric-grid__code code {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

@media (max-width: 1399.98px) {
    .sg-metric-grid,
    .sg-metric-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .sg-workflow-card {
        padding: 20px;
    }

    .sg-workflow-card__intro-grid,
    .sg-metric-grid,
    .sg-metric-grid--compact {
        grid-template-columns: 1fr;
    }

    .sg-workflow-form__actions .btn {
        width: 100%;
        min-width: 0;
    }
}


.toolbar-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.text-soft {
    color: var(--pm-text-soft);
}

.kpi-inline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.kpi-inline__item {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.kpi-inline__label {
    display: block;
    margin-bottom: 6px;
    color: var(--pm-text-soft);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.kpi-inline__value {
    display: block;
    color: var(--pm-text);
    font-size: 1rem;
    font-weight: 700;
}

.bulk-mode-card {
    padding: 24px;
    gap: 18px;
}

.bulk-mode-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.bulk-mode-card__header .quick-action-card__icon {
    margin-bottom: 0;
}

.bulk-mode-card__badge-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bulk-mode-card__intro {
    margin: 0;
    color: var(--pm-text-soft);
    font-size: 0.95rem;
    line-height: 1.6;
}

.bulk-mode-card__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.bulk-mode-card__fact {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.bulk-mode-card__fact-label {
    display: block;
    margin-bottom: 6px;
    color: var(--pm-text-soft);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bulk-mode-card__fact-value {
    display: block;
    color: var(--pm-text);
    font-size: 1rem;
    font-weight: 700;
}

.bulk-mode-card__list {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--pm-text-soft);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bulk-mode-card__list li::marker {
    color: var(--pm-primary);
}

.bulk-mode-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

@media (max-width: 991.98px) {
    .kpi-inline,
    .bulk-mode-card__facts {
        grid-template-columns: 1fr;
    }
}

.bulk-upload-page,
.kpi-analytics-page {
    gap: 22px;
}

.bulk-upload-panel,
.bulk-rules-panel,
.bulk-result-panel,
.kpi-context-panel {
    position: relative;
    overflow: hidden;
}

.bulk-upload-panel,
.kpi-context-panel {
    background:
        radial-gradient(circle at top right, rgba(29, 112, 247, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.99) 0%, rgba(243, 248, 255, 0.96) 100%);
}

.bulk-rules-panel,
.bulk-result-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(247, 250, 255, 0.97) 100%);
}

.bulk-upload-dropzone {
    padding: 18px;
    border-radius: 20px;
    border: 1px dashed rgba(11, 58, 111, 0.2);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 255, 0.94) 100%);
}

.bulk-upload-dropzone__header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    margin-bottom: 16px;
}

.bulk-upload-dropzone__icon,
.bulk-rule-card__icon,
.bulk-insight-card__icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
    font-size: 1.15rem;
}

.bulk-upload-dropzone__title,
.bulk-rule-card__title,
.bulk-insight-card__title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pm-text);
}

.bulk-upload-dropzone__text,
.bulk-rule-card__text,
.bulk-insight-card__text {
    margin: 0;
    color: var(--pm-text-soft);
    font-size: 0.92rem;
    line-height: 1.55;
}

.bulk-upload-dropzone input[type="file"] {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(11, 58, 111, 0.14);
    background: #ffffff;
    color: var(--pm-text);
}

.bulk-upload-actions {
    align-items: center;
}

.bulk-rules-grid,
.bulk-insight-list {
    display: grid;
    gap: 14px;
}

.bulk-rule-card,
.bulk-insight-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    box-shadow: var(--pm-shadow-sm);
}

.bulk-insight-card__icon--success {
    background: #e9f8ef;
    color: #157347;
}

.bulk-insight-card__icon--warning {
    background: #fff4dd;
    color: #8a5a12;
}

.bulk-insight-card__icon--info {
    background: #edf4ff;
    color: var(--pm-primary);
}

.bulk-action-card {
    border-color: rgba(11, 58, 111, 0.1);
    background:
        radial-gradient(circle at top right, rgba(29, 112, 247, 0.1), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(247, 250, 255, 0.97) 100%);
}

.policy-candidate-card {
    border-color: rgba(11, 58, 111, 0.1);
    background:
        radial-gradient(circle at top right, rgba(29, 112, 247, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(247, 250, 255, 0.97) 100%);
}

.policy-currency-card {
    border-color: rgba(11, 58, 111, 0.1);
}

.sg-endoso-detail-row > td {
    background: #f7fbff;
}

.sg-endoso-detail-box {
    border-top: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}

.sg-endoso-toggle .sg-endoso-toggle__label {
    min-width: 84px;
    display: inline-block;
}

.sg-cuotas-filter-group {
    gap: 8px;
}

.sg-cuotas-filter-group .btn {
    border-radius: 12px !important;
}

.mail-prep-panel {
    background:
        radial-gradient(circle at top right, rgba(29, 112, 247, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.99) 0%, rgba(243, 248, 255, 0.96) 100%);
}

.mail-prep-form-shell {
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(11, 58, 111, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(247, 250, 255, 0.97) 100%);
    box-shadow: var(--pm-shadow-sm);
}

.mail-prep-form-shell__header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    margin-bottom: 16px;
}

.mail-prep-form-shell__icon,
.mail-prep-check-card__icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
    font-size: 1.15rem;
}

.mail-prep-form-shell__title,
.mail-prep-check-card__title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pm-text);
}

.mail-prep-form-shell__text,
.mail-prep-check-card__text {
    margin: 0;
    color: var(--pm-text-soft);
    font-size: 0.92rem;
    line-height: 1.55;
}

.mail-prep-check-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.mail-prep-check-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    box-shadow: var(--pm-shadow-sm);
}

.mail-prep-check-card__icon--info {
    background: #edf4ff;
    color: var(--pm-primary);
}

.mail-prep-check-card__icon--warning {
    background: #fff4dd;
    color: #8a5a12;
}

.mail-prep-check-card__icon--success {
    background: #e9f8ef;
    color: #157347;
}

.lookup-panel {
    background:
        radial-gradient(circle at top right, rgba(29, 112, 247, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.99) 0%, rgba(243, 248, 255, 0.96) 100%);
}

.lookup-form-shell {
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(11, 58, 111, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(247, 250, 255, 0.97) 100%);
    box-shadow: var(--pm-shadow-sm);
}

.lookup-form-shell__header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    margin-bottom: 16px;
}

.lookup-form-shell__icon,
.guide-card__icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
    font-size: 1.15rem;
}

.lookup-form-shell__title,
.guide-card__title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pm-text);
}

.lookup-form-shell__text,
.guide-card__text {
    margin: 0;
    color: var(--pm-text-soft);
    font-size: 0.92rem;
    line-height: 1.55;
}

.guide-card-grid,
.system-context-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.guide-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    box-shadow: var(--pm-shadow-sm);
}

.guide-card__icon--info {
    background: #edf4ff;
    color: var(--pm-primary);
}

.guide-card__icon--neutral {
    background: #f5f8fb;
    color: var(--pm-text-soft);
}

.guide-card__icon--success {
    background: #e9f8ef;
    color: #157347;
}

.guide-card__icon--warning {
    background: #fff4dd;
    color: #8a5a12;
}

.sg-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    padding: 0;
    border-radius: 999px;
    background: rgba(11, 58, 111, 0.08);
    color: var(--pm-text-soft);
    cursor: pointer;
    transition: background-color 0.18s var(--pm-ease-premium), color 0.18s var(--pm-ease-premium), transform 0.18s var(--pm-ease-premium);
}

.sg-help-icon:hover,
.sg-help-icon:focus {
    background: rgba(11, 58, 111, 0.14);
    color: var(--pm-primary);
    transform: translateY(-1px);
}

.pm-compact-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.pm-compact-flow__item,
.sg-legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    box-shadow: var(--pm-shadow-sm);
}

.pm-compact-flow__icon,
.sg-legend-item__icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.pm-compact-flow__item--success .pm-compact-flow__icon,
.sg-legend-item--success .sg-legend-item__icon {
    background: #e9f8ef;
    color: #157347;
}

.pm-compact-flow__item--warning .pm-compact-flow__icon,
.sg-legend-item--warning .sg-legend-item__icon {
    background: #fff4dd;
    color: #8a5a12;
}

.pm-compact-flow__copy,
.sg-legend-item__copy {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 1 1 auto;
}

.pm-compact-flow__label,
.sg-legend-item__label {
    display: block;
    color: var(--pm-text);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

.sg-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sg-section-heading__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pm-text);
}

.sg-section-heading__meta {
    margin: 4px 0 0;
    color: var(--pm-text-soft);
    font-size: 0.88rem;
    line-height: 1.45;
}

.sg-inline-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: rgba(11, 58, 111, 0.03);
}

.sg-inline-status__copy {
    min-width: 0;
    color: var(--pm-text);
    font-size: 0.93rem;
    font-weight: 600;
}

.sg-inline-status__copy strong {
    font-weight: 800;
}

.sg-inline-status--success {
    border-color: rgba(21, 115, 71, 0.12);
    background: rgba(21, 115, 71, 0.06);
}

.sg-inline-status--warning {
    border-color: rgba(138, 90, 18, 0.14);
    background: rgba(183, 121, 31, 0.08);
}

.sg-inline-status--neutral {
    border-color: rgba(11, 58, 111, 0.08);
    background: rgba(11, 58, 111, 0.03);
}

.sg-legend-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.metric-card__top {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
}

.metric-card__top .metric-card__label {
    margin-bottom: 0;
}

.metric-card__hint {
    flex-shrink: 0;
}

.metric-card--success {
    border-color: rgba(21, 115, 71, 0.12);
    background: linear-gradient(180deg, #f5fcf8 0%, #ffffff 100%);
}

.metric-card--danger {
    border-color: rgba(166, 27, 27, 0.14);
    background: linear-gradient(180deg, #fff8f8 0%, #ffffff 100%);
}

.metric-card--warning {
    border-color: rgba(138, 90, 18, 0.14);
    background: linear-gradient(180deg, #fffaf1 0%, #ffffff 100%);
}

.metric-card--info {
    border-color: rgba(29, 112, 247, 0.12);
    background: linear-gradient(180deg, #f6faff 0%, #ffffff 100%);
}

.system-context-panel {
    background:
        radial-gradient(circle at top right, rgba(29, 112, 247, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(247, 250, 255, 0.97) 100%);
}

.system-context-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.system-context-card {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    box-shadow: var(--pm-shadow-sm);
}

.system-context-card__label {
    display: block;
    margin-bottom: 8px;
    color: var(--pm-text-soft);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.system-context-card__value {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pm-text);
    word-break: break-word;
}

.system-context-card__meta {
    margin-top: 6px;
    color: var(--pm-text-soft);
    font-size: 0.86rem;
}

.system-task-card {
    border-color: rgba(11, 58, 111, 0.1);
}

.system-task-card--info .quick-action-card__icon {
    background: #edf4ff;
    color: var(--pm-primary);
}

.system-task-card--success .quick-action-card__icon {
    background: #e9f8ef;
    color: #157347;
}

.system-task-card--danger .quick-action-card__icon {
    background: #fdecec;
    color: #a61b1b;
}

.art-progress-card {
    padding: 22px;
    border-radius: 20px;
    border: 1px solid rgba(11, 58, 111, 0.1);
    background:
        radial-gradient(circle at top right, rgba(29, 112, 247, 0.1), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(247, 250, 255, 0.97) 100%);
    box-shadow: var(--pm-shadow-sm);
}

.art-progress-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.art-progress-card__track {
    height: 16px;
    border-radius: 999px;
    background: #e7eef7;
    overflow: hidden;
}

.art-progress-card__bar {
    background: linear-gradient(90deg, #1d70f7 0%, #0b3a6f 100%);
    font-size: 0.72rem;
    font-weight: 700;
}

.art-progress-card__meta {
    margin-top: 12px;
    color: var(--pm-text-soft);
    font-size: 0.9rem;
    line-height: 1.55;
}

.kpi-context-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kpi-hero-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.kpi-hero-card,
.visual-panel,
.kpi-block,
.rank-panel {
    position: relative;
    overflow: hidden;
    height: 100%;
    padding: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border: 1px solid rgba(11, 58, 111, 0.08);
    border-radius: 18px;
    box-shadow: var(--pm-shadow-sm);
}

.kpi-hero-card::after,
.visual-panel::after,
.kpi-block::after,
.rank-panel::after {
    content: "";
    position: absolute;
    right: -36px;
    bottom: -36px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(29, 112, 247, 0.12), transparent 68%);
    pointer-events: none;
}

.kpi-hero-card--info {
    border-color: rgba(29, 112, 247, 0.12);
    background: linear-gradient(180deg, #f6faff 0%, #ffffff 100%);
}

.kpi-hero-card--success {
    border-color: rgba(21, 115, 71, 0.12);
    background: linear-gradient(180deg, #f5fcf8 0%, #ffffff 100%);
}

.kpi-hero-card--danger {
    border-color: rgba(166, 27, 27, 0.14);
    background: linear-gradient(180deg, #fff8f8 0%, #ffffff 100%);
}

.kpi-hero-card--neutral {
    border-color: rgba(11, 58, 111, 0.1);
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.kpi-hero-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--pm-text-soft);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.kpi-hero-card__value {
    margin: 0;
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    font-weight: 800;
    line-height: 1.02;
    color: var(--pm-text);
}

.kpi-hero-card__meta {
    margin-top: 10px;
    color: var(--pm-text-soft);
    font-size: 0.92rem;
    line-height: 1.5;
}

.visual-panel__header,
.rank-panel__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.visual-panel__title,
.rank-panel__title {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--pm-text);
}

.visual-panel__subtitle,
.rank-panel__subtitle {
    margin: 4px 0 0;
    color: var(--pm-text-soft);
    font-size: 0.92rem;
}

.donut-chart {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}

.donut-chart__ring {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.55);
}

.donut-chart__inner {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    padding: 16px;
}

.donut-chart__label {
    color: var(--pm-text-soft);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.donut-chart__value {
    margin: 6px 0 2px;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--pm-text);
}

.donut-chart__meta {
    color: var(--pm-text-soft);
    font-size: 0.86rem;
    line-height: 1.35;
}

.legend-list {
    display: grid;
    gap: 14px;
}

.legend-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
}

.legend-item__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-item__dot--info {
    background: var(--pm-primary);
}

.legend-item__dot--neutral {
    background: rgba(11, 58, 111, 0.24);
}

.legend-item__dot--danger {
    background: #b42318;
}

.legend-item__label {
    font-weight: 600;
    color: var(--pm-text);
}

.legend-item__value {
    color: var(--pm-text-soft);
    font-weight: 700;
    white-space: nowrap;
}

.legend-item__bar {
    grid-column: 2 / 4;
    height: 8px;
    border-radius: 999px;
    background: #e8eff7;
    overflow: hidden;
}

.legend-item__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.legend-item__fill--neutral {
    background: rgba(11, 58, 111, 0.24);
}

.currency-overview + .currency-overview {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(11, 58, 111, 0.08);
}

.currency-overview__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.currency-overview__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pm-text);
}

.currency-overview__amount {
    margin: 6px 0 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--pm-text);
}

.currency-overview__meta {
    color: var(--pm-text-soft);
    font-size: 0.9rem;
}

.progress-stack {
    height: 12px;
    border-radius: 999px;
    background: #e8eff7;
    overflow: hidden;
    display: flex;
    margin-bottom: 12px;
}

.progress-stack__seg {
    height: 100%;
    display: block;
}

.progress-stack__seg--danger,
.legend-item__fill--danger,
.rank-row__fill--danger {
    background: linear-gradient(90deg, #b42318 0%, #d6453a 100%);
}

.progress-stack__seg--warning,
.legend-item__fill--warning,
.rank-row__fill--warning {
    background: linear-gradient(90deg, #d08a1e 0%, #e9b042 100%);
}

.progress-stack__seg--info,
.legend-item__fill--info,
.rank-row__fill--info {
    background: linear-gradient(90deg, #0b5cab 0%, #3a88d4 100%);
}

.progress-stack__seg--success,
.legend-item__fill--success {
    background: linear-gradient(90deg, #157347 0%, #2f9b66 100%);
}

.mini-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.mini-metric {
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(11, 58, 111, 0.04);
    border: 1px solid rgba(11, 58, 111, 0.08);
}

.mini-metric__label {
    display: block;
    margin-bottom: 8px;
    color: var(--pm-text-soft);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mini-metric__value {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pm-text);
}

.mini-metric__meta {
    margin-top: 6px;
    color: var(--pm-text-soft);
    font-size: 0.86rem;
}

.rank-group + .rank-group {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(11, 58, 111, 0.08);
}

.rank-group__title {
    margin-bottom: 12px;
    color: var(--pm-text-soft);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rank-row + .rank-row {
    margin-top: 14px;
}

.rank-row__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.rank-row__label {
    font-weight: 700;
    color: var(--pm-text);
}

.rank-row__meta {
    color: var(--pm-text-soft);
    font-size: 0.88rem;
    text-align: right;
}

.rank-row__bar {
    height: 10px;
    border-radius: 999px;
    background: #e8eff7;
    overflow: hidden;
}

.rank-row__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
}

@media (max-width: 1199.98px) {
    .guide-card-grid,
    .system-context-grid,
    .mail-prep-check-grid,
    .kpi-hero-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .art-progress-card__header,
    .lookup-form-shell__header,
    .mail-prep-form-shell__header,
    .bulk-upload-dropzone__header,
    .bulk-rule-card,
    .bulk-insight-card {
        grid-template-columns: 1fr;
    }

    .guide-card,
    .system-context-grid,
    .guide-card-grid,
    .mail-prep-check-grid {
        grid-template-columns: 1fr;
    }

    .art-progress-card__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .bulk-upload-actions .btn {
        flex: 1 1 100%;
    }

    .kpi-hero-grid,
    .mini-metrics {
        grid-template-columns: 1fr;
    }

    .donut-chart__ring {
        width: 190px;
        height: 190px;
    }

    .donut-chart__inner {
        width: 116px;
        height: 116px;
    }
}


.filter-bar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filter-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #f6f9fd;
    border: 1px solid rgba(11, 58, 111, 0.08);
    color: var(--pm-text-soft);
    font-size: 0.9rem;
    font-weight: 600;
}

.filter-chip strong {
    color: var(--pm-text);
}

/* B13: chip de filtro activo con error (rojo persistente) */
.filter-chip--alert {
    background: color-mix(in oklch, var(--pm-danger) 8%, var(--pm-surface));
    border-color: color-mix(in oklch, var(--pm-danger) 25%, var(--pm-border));
    color: var(--pm-danger);
}

.filter-chip--alert strong {
    color: var(--pm-danger);
}

.table-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    color: var(--pm-text-soft);
    font-size: 0.88rem;
    font-weight: 600;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 18px;
    text-align: center;
}

.empty-state__icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
    font-size: 1.35rem;
}

.empty-state__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--pm-text);
}

.empty-state__text {
    margin: 0;
    max-width: 540px;
    color: var(--pm-text-soft);
    font-size: 0.94rem;
    line-height: 1.55;
}

.process-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.process-accordion {
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: var(--pm-shadow-sm);
}

.process-accordion summary {
    list-style: none;
}

.process-accordion summary::-webkit-details-marker {
    display: none;
}

.process-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    cursor: pointer;
}

.process-accordion__summary:hover {
    background: rgba(11, 58, 111, 0.02);
}

.process-accordion__summary-main {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.process-accordion__icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
    font-size: 1.2rem;
}

.process-accordion__copy {
    min-width: 0;
}

.process-accordion__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.process-accordion__title {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--pm-text);
}

.process-accordion__subtitle {
    margin: 0;
    color: var(--pm-text-soft);
    font-size: 0.93rem;
    line-height: 1.55;
}

.process-accordion__summary-side {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.process-accordion__count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #f5f8fb;
    border: 1px solid rgba(11, 58, 111, 0.08);
    color: var(--pm-text);
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.process-accordion__chevron {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f5f8fb;
    border: 1px solid rgba(11, 58, 111, 0.08);
    color: var(--pm-primary);
    transition: transform 0.18s var(--pm-ease-premium), background-color 0.18s var(--pm-ease-premium);
}

.process-accordion[open] .process-accordion__chevron {
    transform: rotate(180deg);
    background: var(--pm-primary-soft);
}

.process-accordion__body {
    padding: 0 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.process-accordion__intro {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.process-accordion__meta-card {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.process-accordion__meta-label {
    display: block;
    margin-bottom: 6px;
    color: var(--pm-text-soft);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.process-accordion__meta-value {
    display: block;
    color: var(--pm-text);
    font-size: 1rem;
    font-weight: 700;
}

.process-scrollbox {
    max-height: 430px;
    overflow: auto;
}

.process-scrollbox .table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.process-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: var(--pm-text-soft);
    font-size: 0.9rem;
}

.process-note i {
    color: var(--pm-primary);
}

.process-scope-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.process-scope-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #edf4ff;
    border: 1px solid #cfe0ff;
    color: var(--pm-primary);
    font-size: 0.84rem;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .process-accordion__summary {
        flex-direction: column;
        align-items: stretch;
    }

    .process-accordion__summary-side {
        justify-content: space-between;
    }

    .process-accordion__intro {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .filter-bar__actions .btn {
        width: 100%;
    }

    .table-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .process-scrollbox {
        max-height: 360px;
    }
}


.sg-progress-shell {
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(11, 58, 111, 0.1);
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.sg-progress-shell__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.sg-progress-shell__eyebrow {
    margin: 0 0 4px;
    color: var(--pm-accent);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sg-progress-shell__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pm-text);
}

.sg-progress-shell__percent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 10px 12px;
    border-radius: 999px;
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
    font-size: 1rem;
    font-weight: 800;
}

.sg-progress-shell__bar {
    height: 16px;
    border-radius: 999px;
    background: #e7eef7;
    overflow: hidden;
}

.sg-progress-shell__bar .progress-bar {
    background: linear-gradient(90deg, #1d70f7 0%, #0b3a6f 100%);
    font-size: 0.72rem;
    font-weight: 700;
}

.sg-progress-shell__meta {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--pm-text-soft);
    font-size: 0.9rem;
    font-weight: 600;
}

.sg-progress-shell__file {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f6f9fd;
    border: 1px dashed rgba(11, 58, 111, 0.16);
    color: var(--pm-text-soft);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.sg-progress-shell.is-complete .sg-progress-shell__percent {
    background: #e9f8ef;
    color: #0f5132;
}

.sg-progress-shell.is-error .sg-progress-shell__percent {
    background: #fdecec;
    color: #a61b1b;
}

.sg-progress-shell.is-error .sg-progress-shell__bar .progress-bar {
    background: linear-gradient(90deg, #f87171 0%, #b42318 100%);
}

@media (max-width: 767.98px) {
    .sg-progress-shell__header,
    .sg-progress-shell__meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .sg-progress-shell__percent {
        min-width: 0;
    }
}


.deudores-page {
    gap: 22px;
}

.deudores-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.deudores-switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    cursor: pointer;
}

.deudores-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.deudores-switch__track {
    position: relative;
    width: 52px;
    height: 30px;
    border-radius: 999px;
    background: #d8e3ef;
    transition: background-color 0.18s var(--pm-ease-premium);
    flex: 0 0 auto;
}

.deudores-switch__track::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
    transition: transform 0.18s var(--pm-ease-premium);
}

.deudores-switch input:checked + .deudores-switch__track {
    background: var(--pm-primary);
}

.deudores-switch input:checked + .deudores-switch__track::after {
    transform: translateX(22px);
}

.deudores-switch__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--pm-text);
    line-height: 1.15;
}

.deudores-switch__text strong {
    font-size: 0.95rem;
}

.deudores-switch__text small {
    color: var(--pm-text-soft);
    font-size: 0.8rem;
}

.deudores-scrollbox {
    max-height: 620px;
}

.deudores-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.status-badge--compact {
    padding: 6px 10px;
    font-size: 0.82rem;
    box-shadow: none;
}

.deudores-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.deudores-pagination__meta {
    color: var(--pm-text-soft);
    font-size: 0.92rem;
    font-weight: 600;
}

.deudores-pagination .pagination {
    gap: 4px;
}

.deudores-pagination .page-link {
    border-radius: 10px;
    border-color: rgba(11, 58, 111, 0.12);
    color: var(--pm-primary);
    min-width: 40px;
    text-align: center;
}

.deudores-pagination .page-item.active .page-link {
    background: var(--pm-primary);
    border-color: var(--pm-primary);
}

@media (max-width: 991.98px) {
    .deudores-filter-row {
        align-items: stretch;
    }

    .deudores-badges {
        width: 100%;
    }

    .deudores-pagination {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 767.98px) {
    .deudores-switch {
        width: 100%;
    }
}


.contacts-toggle-row {
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.crm-contacts-collapse {
    overflow: hidden;
}

.crm-contacts-panel {
    padding: 22px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: var(--pm-shadow-sm);
}

.crm-contact-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.crm-contact-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.crm-contact-card__name {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pm-text);
}

.crm-contact-card__role {
    color: var(--pm-text-soft);
    font-size: 0.9rem;
    line-height: 1.45;
}

.crm-contact-card__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.crm-contact-card__item {
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--pm-surface-soft);
    border: 1px solid rgba(11, 58, 111, 0.06);
}

.crm-contact-card__label {
    display: block;
    margin-bottom: 6px;
    color: var(--pm-text-soft);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.crm-contact-card__value {
    color: var(--pm-text);
    font-size: 0.95rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.crm-contact-card__value:hover {
    color: var(--pm-primary);
}

.crm-contact-card__value--muted {
    color: var(--pm-text-muted);
}

@media (max-width: 767.98px) {
    .crm-contact-card__header {
        flex-direction: column;
        align-items: stretch;
    }

    .crm-contact-card__body {
        grid-template-columns: 1fr;
    }
}


.detail-nav-btn--disabled {
    opacity: 0.58;
    cursor: default;
    pointer-events: none;
}

.dashboard-monetary-card {
    padding: 20px;
}

.dashboard-info-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-info-list--single {
    grid-template-columns: 1fr;
}

.dashboard-table-sm .table > :not(caption) > * > * {
    padding-top: 12px;
    padding-bottom: 12px;
}

.ci-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.ci-nav-card {
    min-height: 100%;
}

.ci-nav-card--active {
    border-color: rgba(11, 58, 111, 0.18);
    box-shadow: var(--pm-shadow-md);
    background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
}

.ci-nav-card--disabled {
    opacity: 0.68;
}

.ci-dashboard-intro {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(237, 244, 255, 0.92) 100%);
}

.ci-command-panel {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(29, 112, 247, 0.12), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.99) 0%, rgba(240, 246, 255, 0.96) 100%);
}

.ci-command-panel::after {
    content: "";
    position: absolute;
    right: -48px;
    bottom: -56px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11, 58, 111, 0.08), transparent 68%);
    pointer-events: none;
}

.ci-command-panel__header {
    position: relative;
    z-index: 1;
}

.ci-summary-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.ci-summary-card {
    min-height: 100%;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 1) 100%);
    box-shadow: var(--pm-shadow-sm);
}

.ci-summary-card__label {
    display: block;
    margin-bottom: 8px;
    color: var(--pm-text-soft);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ci-summary-card__value {
    margin: 0 0 8px;
    font-size: 2rem;
    line-height: 1;
    color: var(--pm-text);
}

.ci-summary-card__meta {
    margin: 0;
    color: var(--pm-text-soft);
    font-size: 0.9rem;
    line-height: 1.45;
}

.ci-summary-card--danger {
    border-color: rgba(166, 27, 27, 0.14);
    background: linear-gradient(180deg, #fff8f8 0%, #fffdfd 100%);
}

.ci-summary-card--warning {
    border-color: rgba(138, 90, 18, 0.14);
    background: linear-gradient(180deg, #fffaf1 0%, #fffdf9 100%);
}

.ci-summary-card--info {
    border-color: rgba(29, 112, 247, 0.12);
    background: linear-gradient(180deg, #f4f9ff 0%, #fcfdff 100%);
}

@media (max-width: 1199.98px) {
    .ci-nav-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .manual-help-grid,
    .ops-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-info-list {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1200px) {
    .confirm-panel {
        position: sticky;
        top: 96px;
    }
}

@media (max-width: 767.98px) {
    .manual-help-grid,
    .ops-summary-grid {
        grid-template-columns: 1fr;
    }

    .manual-toolbar {
        padding: 12px;
    }

    .manual-flow-switch,
    .manual-submit-bar {
        width: 100%;
    }

    .manual-flow-switch .btn,
    .manual-submit-bar .btn {
        flex: 1 1 100%;
    }

    .confirm-callout,
    .confirm-checklist__item {
        grid-template-columns: 1fr;
    }
}


.ci-agenda-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ci-agenda-list-scroll {
    max-height: 520px;
    padding-right: 4px;
}

.ci-agenda-row {
    padding: 18px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    box-shadow: var(--pm-shadow-sm);
}

.ci-agenda-row__title-wrap,
.ci-group-accordion__summary-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.ci-agenda-row__title,
.ci-group-accordion__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pm-text);
}

.ci-agenda-row__meta,
.ci-group-accordion__meta {
    margin: 4px 0 0;
    color: var(--pm-text-soft);
    font-size: 0.92rem;
}

.ci-agenda-row__metrics,
.ci-group-accordion__summary-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.ci-agenda-kpi,
.ci-compact-kpi,
.ci-group-currency-card,
.ci-group-account-item {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(11, 58, 111, 0.03);
    border: 1px solid rgba(11, 58, 111, 0.06);
}

.ci-agenda-kpi small,
.ci-compact-kpi small {
    display: block;
    margin-bottom: 4px;
    color: var(--pm-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ci-agenda-kpi strong,
.ci-compact-kpi strong {
    font-size: 1rem;
    color: var(--pm-text);
}

.ci-top-groups-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ci-top-groups-grid--wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ci-group-highlight {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: var(--pm-shadow-sm);
}

.ci-group-highlight__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ci-group-highlight__currencies,
.ci-group-currency-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ci-group-highlight__currency {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(11, 58, 111, 0.03);
    border: 1px solid rgba(11, 58, 111, 0.06);
}

.ci-currency-title,
.ci-group-currency-card__title {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--pm-text-soft);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ci-currency-line,
.ci-group-currency-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--pm-text-soft);
    font-size: 0.92rem;
}

.ci-currency-line + .ci-currency-line,
.ci-group-currency-card__row + .ci-group-currency-card__row {
    margin-top: 6px;
}

.ci-group-highlight__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding-top: 2px;
    color: var(--pm-text-soft);
    font-size: 0.9rem;
}

.ci-group-accordion-scroll {
    max-height: 760px;
    padding-right: 4px;
}

.ci-group-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ci-group-accordion {
    border: 1px solid rgba(11, 58, 111, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    box-shadow: var(--pm-shadow-sm);
    overflow: hidden;
}

.ci-group-accordion summary {
    list-style: none;
    cursor: pointer;
}

.ci-group-accordion summary::-webkit-details-marker {
    display: none;
}

.ci-group-accordion__summary {
    padding: 18px;
}

.ci-group-accordion__body {
    border-top: 1px solid rgba(11, 58, 111, 0.08);
    padding: 18px;
    display: grid;
    gap: 14px;
}

.ci-group-panel__accounts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ci-group-panel__accounts--singlecol {
    grid-template-columns: 1fr;
}

@media (max-width: 1399.98px) {
    .ci-top-groups-grid--wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .ci-top-groups-grid,
    .ci-top-groups-grid--wide,
    .ci-group-highlight__currencies,
    .ci-group-currency-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .ci-agenda-row__title-wrap,
    .ci-group-highlight__header,
    .ci-group-accordion__summary-main {
        flex-direction: column;
        align-items: stretch;
    }

    .ci-agenda-row__metrics,
    .ci-group-accordion__summary-kpis,
    .ci-group-panel__accounts {
        grid-template-columns: 1fr;
    }
}


.ci-priority-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ci-priority-card {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}

.ci-priority-card__icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
    font-size: 1.2rem;
}

.ci-priority-card__label {
    margin: 0 0 4px;
    color: var(--pm-text-soft);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ci-priority-card__value {
    margin: 0;
    font-size: 1.85rem;
    line-height: 1;
    color: var(--pm-text);
}

.ci-priority-card__meta {
    margin: 6px 0 0;
    color: var(--pm-text-soft);
    font-size: 0.9rem;
}

.ci-priority-card__amount {
    justify-self: end;
    color: var(--pm-text);
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}

.ci-priority-card--danger .ci-priority-card__icon {
    background: #fdecec;
    color: #a61b1b;
}

.ci-priority-card--warning .ci-priority-card__icon {
    background: #fff4dd;
    color: #8a5a12;
}

.ci-priority-card--info .ci-priority-card__icon {
    background: #edf4ff;
    color: var(--pm-primary);
}

.ci-radar-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ci-radar-item {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.ci-radar-item__label {
    display: block;
    margin-bottom: 8px;
    color: var(--pm-text-soft);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ci-radar-item__value {
    font-size: 1.4rem;
    color: var(--pm-text);
}

.ci-bar-board {
    display: grid;
    gap: 14px;
}

.ci-bar-card {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    box-shadow: var(--pm-shadow-sm);
}

.ci-bar-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.ci-bar-card__title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pm-text);
}

.ci-bar-card__meta {
    margin: 0;
    color: var(--pm-text-soft);
    font-size: 0.9rem;
}

.ci-bar-list,
.ci-stat-bar-list,
.ci-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ci-bar-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) 88px;
    gap: 10px;
    align-items: center;
}

.ci-bar-row__label,
.ci-bar-row__value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--pm-text);
}

.ci-bar-row__value {
    text-align: right;
}

.ci-bar-row__track,
.ci-stat-bar__track,
.ci-ranking-row__track {
    position: relative;
    overflow: hidden;
    height: 10px;
    border-radius: 999px;
    background: #e8eef6;
}

.ci-bar-row__fill,
.ci-stat-bar__fill,
.ci-ranking-row__fill {
    height: 100%;
    border-radius: inherit;
}

.ci-bar-row__fill--danger,
.ci-ranking-row__fill--danger,
.ci-stat-bar__fill--danger {
    background: linear-gradient(90deg, #f87171 0%, #b42318 100%);
}

.ci-bar-row__fill--warning,
.ci-ranking-row__fill--warning,
.ci-stat-bar__fill--warning {
    background: linear-gradient(90deg, #f7b955 0%, #d97706 100%);
}

.ci-bar-row__fill--info,
.ci-ranking-row__fill--info,
.ci-stat-bar__fill--info {
    background: linear-gradient(90deg, #60a5fa 0%, #1d70f7 100%);
}

.ci-bar-row__fill--neutral,
.ci-ranking-row__fill--neutral,
.ci-stat-bar__fill--neutral {
    background: linear-gradient(90deg, #c7d2e1 0%, #8a9ab1 100%);
}

.ci-stat-bar {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}

.ci-stat-bar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--pm-text);
}

.ci-stat-bar__meta {
    margin: 10px 0 0;
    color: var(--pm-text-soft);
    font-size: 0.88rem;
}

.ci-ranking-row {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(11, 58, 111, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}

.ci-ranking-row__title {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--pm-text);
}

.ci-ranking-row__meta {
    margin: 0;
    color: var(--pm-text-soft);
    font-size: 0.88rem;
}

.ci-ranking-row__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 10px;
    align-items: center;
}

.ci-ranking-row__value {
    text-align: right;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--pm-text);
}

/* Estado de la fila de poliza: tinted background en vez de
   side-stripe border (DESIGN.md "Don't side-stripe borders"). */
.ci-policy-row--danger {
    background: linear-gradient(180deg, rgba(180, 35, 24, 0.06) 0%, transparent 100%);
}

.ci-policy-row--warning {
    background: linear-gradient(180deg, rgba(217, 119, 6, 0.06) 0%, transparent 100%);
}

.ci-policy-row--info {
    background: linear-gradient(180deg, rgba(29, 112, 247, 0.05) 0%, transparent 100%);
}

.ci-policy-row__footer {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ci-policy-row__hint {
    color: var(--pm-text-soft);
    font-size: 0.9rem;
    font-weight: 600;
}

.ci-policy-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ci-collapsible {
    border: 0;
}

.ci-collapsible summary {
    list-style: none;
    cursor: pointer;
}

.ci-collapsible summary::-webkit-details-marker {
    display: none;
}

.ci-collapsible__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ci-collapsible__summary::after {
    content: '\F282';
    font-family: bootstrap-icons;
    color: var(--pm-text-soft);
    font-size: 0.95rem;
    transition: transform 0.18s var(--pm-ease-premium);
}

.ci-collapsible[open] .ci-collapsible__summary::after {
    transform: rotate(180deg);
}

.ci-collapsible__body {
    margin-top: 14px;
}

.process-scrollbox--xs {
    max-height: 240px;
}

.process-scrollbox--sm {
    max-height: 320px;
}

.process-scrollbox--md {
    max-height: 420px;
}

@media (max-width: 1399.98px) {
    .ci-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ci-priority-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .ci-priority-card {
        grid-template-columns: 46px 1fr;
    }

    .ci-priority-card__amount {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .ci-radar-grid {
        grid-template-columns: 1fr;
    }

    .ci-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ci-bar-row,
    .ci-ranking-row__bar {
        grid-template-columns: 1fr;
    }

    .ci-bar-row__value,
    .ci-ranking-row__value {
        text-align: left;
    }
}

@media (max-width: 767.98px) {
    .ci-summary-grid {
        grid-template-columns: 1fr;
    }

    .ci-priority-grid {
        grid-template-columns: 1fr;
    }

    .ci-collapsible__summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .ci-policy-row__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .ci-policy-row__actions .btn {
        width: 100%;
    }
}

/* ============================================================
   Ola 1 — Design system premium (estilo Linear / Vercel)
   Bloque adicivo al final para que sea trivial revertir.
   ============================================================ */

body {
    background-color: var(--pm-bg);
    background-image:
        radial-gradient(circle, rgba(15, 23, 42, 0.022) 1px, transparent 1px),
        radial-gradient(circle at top right, rgba(29, 112, 247, 0.08), transparent 22%),
        linear-gradient(180deg, #f8fbff 0%, var(--pm-bg) 100%);
    background-size: 24px 24px, auto, auto;
    background-position: -1px -1px, 0 0, 0 0;
    background-repeat: repeat, no-repeat, no-repeat;
}

h1, .h1, .pm-h1 {
    letter-spacing: -0.025em;
}

h2, .h2, .pm-h2 {
    letter-spacing: -0.02em;
}

h3, .h3, h4, .h4 {
    letter-spacing: -0.015em;
}

.text-uppercase,
.eyebrow,
[class*="__eyebrow"],
[class*="-eyebrow"] {
    letter-spacing: 0.08em;
}

.pm-num,
.pm-tabular,
.kpi-card .display-6,
.kpi-card .h2,
.kpi-card .display-5,
table.js-datatable td,
table.js-datatable th {
    font-variant-numeric: tabular-nums;
}

.btn.btn-primary,
.btn-primary,
button.btn-primary {
    background: var(--pm-primary);
    border: 1px solid var(--pm-primary);
    color: #fff;
    box-shadow: var(--pm-shadow-btn-primary);
    transition: transform 180ms var(--pm-ease-premium),
                box-shadow 180ms var(--pm-ease-premium),
                background-color 180ms var(--pm-ease-premium),
                border-color 180ms var(--pm-ease-premium);
}

.btn.btn-primary:hover,
.btn-primary:hover,
button.btn-primary:hover {
    background: var(--pm-primary-strong);
    border-color: var(--pm-primary-strong);
    color: #fff;
    box-shadow: var(--pm-shadow-btn-primary-hover);
    transform: translateY(-1px);
}

.btn.btn-primary:active,
.btn-primary:active,
button.btn-primary:active {
    transform: translateY(1px);
    box-shadow: var(--pm-shadow-btn-primary-active);
}

.btn.btn-primary:focus-visible,
.btn-primary:focus-visible {
    outline: 2px solid var(--pm-accent);
    outline-offset: 3px;
}

*:focus-visible {
    outline: 2px solid var(--pm-accent);
    outline-offset: 2px;
    transition: outline-offset 100ms var(--pm-ease-premium);
}

button:focus-visible,
a:focus-visible,
.btn:focus-visible {
    outline-offset: 3px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--pm-accent);
    outline-offset: 0;
    box-shadow: 0 0 0 4px rgba(29, 112, 247, 0.12);
    border-color: var(--pm-accent);
}

.pm-hairline {
    position: relative;
}

.pm-hairline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.10), transparent);
    pointer-events: none;
}

.pm-hairline-light::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}

.pm-card {
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    box-shadow: var(--pm-shadow-card);
    transition: box-shadow 160ms var(--pm-ease-premium),
                transform 160ms var(--pm-ease-premium),
                border-color 160ms var(--pm-ease-premium);
}

.pm-card--clickable {
    cursor: pointer;
}

.pm-card--clickable:hover,
a.pm-card:hover,
a > .pm-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--pm-shadow-card-halo);
    border-color: transparent;
}

.app-topbar {
    background-color: rgba(255, 255, 255, 0.78);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    box-shadow: var(--pm-shadow-topbar);
}

.app-sidebar__brand {
    position: relative;
}

.app-sidebar__brand::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    pointer-events: none;
}

/* Lucide icons inline SVG (reemplazan bootstrap-icons) */
[data-lucide],
.lucide,
svg.lucide {
    width: 1em;
    height: 1em;
    stroke-width: 1.75;
    vertical-align: -0.125em;
    display: inline-block;
    flex-shrink: 0;
}

i[data-lucide] {
    line-height: 1;
}

/* Sidebar item activo estilo Linear */
.sidebar-link {
    transition: background 220ms var(--pm-ease-premium),
                color 220ms var(--pm-ease-premium),
                border-color 220ms var(--pm-ease-premium),
                transform 180ms var(--pm-ease-premium),
                box-shadow 220ms var(--pm-ease-premium);
}

.sidebar-link.active {
    background: linear-gradient(90deg, rgba(29, 112, 247, 0.18) 0%, rgba(29, 112, 247, 0.06) 60%, transparent 100%);
    border-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-weight: 600;
}

.sidebar-link.active::before {
    left: -8px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(180deg, var(--pm-primary) 0%, var(--pm-accent) 100%);
    box-shadow: 0 0 12px rgba(29, 112, 247, 0.4);
    /* Bureau: el riel del ítem activo entra creciendo al cargar la página.
       Se desactiva bajo prefers-reduced-motion (bloque global). */
    transform-origin: center;
    animation: pmRailIn 0.42s var(--pm-ease-premium) both;
}

@keyframes pmRailIn {
    from { transform: scaleY(0); opacity: 0; }
    to { transform: scaleY(1); opacity: 1; }
}

.sidebar-link:hover:not(.active) {
    transform: none;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.05);
}

/* Densidad operativa global (Ola 1B). Override de reglas base. */
.page-shell .row.g-4 {
    --bs-gutter-x: 14px;
    --bs-gutter-y: 14px;
}

.page-shell .page-header {
    gap: 12px;
    padding: 0;
    margin-bottom: 16px;
}

.page-shell .page-header__intro {
    gap: 6px;
}

.page-shell .page-eyebrow {
    padding: 4px 10px;
    font-size: 0.7rem;
}

.page-shell .page-title {
    font-size: clamp(1.5rem, 2.4vw, 1.85rem);
    line-height: 1.1;
}

.page-shell .page-subtitle {
    font-size: 0.88rem;
    line-height: 1.45;
}

.page-shell .page-actions {
    gap: 8px;
}

.page-shell .page-actions .btn {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 0.88rem;
    box-shadow: var(--pm-shadow-sm);
}

.page-shell .metric-card {
    padding: 14px 16px;
    border-radius: 12px;
}

.page-shell .metric-card__label {
    margin-bottom: 6px;
    font-size: 0.7rem;
}

.page-shell .metric-card__value {
    font-size: 1.4rem;
    line-height: 1.15;
}

.page-shell .metric-card__value--md {
    font-size: 1.05rem;
    line-height: 1.25;
}

.page-shell .metric-card::after {
    width: 64px;
    height: 64px;
    right: -16px;
    bottom: -16px;
}

.page-shell .section-card {
    padding: 16px;
    border-radius: 12px;
}

.page-shell .section-card.mb-4 {
    margin-bottom: 14px !important;
}

.page-shell .section-title-row {
    margin-bottom: 12px;
}

.page-shell .section-title {
    font-size: 0.98rem;
}

.page-shell .quick-action-card {
    padding: 14px;
    border-radius: 10px;
}

.page-shell .quick-action-card__icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 1rem;
}

.page-shell .quick-action-card__title {
    margin: 0 0 4px;
    font-size: 0.95rem;
}

.page-shell .quick-action-card__text {
    margin: 0 0 12px;
    font-size: 0.84rem;
    line-height: 1.4;
}

.page-shell .quick-action-card__footer {
    gap: 6px;
}

.page-shell .quick-action-card__footer .btn {
    padding: 5px 10px;
    font-size: 0.84rem;
}

.page-shell .info-list {
    gap: 10px;
}

.page-shell .info-list__item {
    padding: 10px 12px;
    border-radius: 10px;
}

.page-shell .info-list__label {
    margin-bottom: 4px;
    font-size: 0.7rem;
}

.page-shell .info-list__value {
    font-size: 0.9rem;
}

/* Form controls densos */
.page-shell .form-control,
.page-shell .form-select {
    padding: 6px 10px;
    font-size: 0.9rem;
    min-height: 34px;
}

.page-shell .form-label {
    margin-bottom: 4px;
    font-size: 0.82rem;
    font-weight: 600;
}

/* Tablas densas */
.page-shell table.table th,
.page-shell table.table td,
.page-shell table.js-datatable th,
.page-shell table.js-datatable td {
    padding: 8px 10px;
    font-size: 0.86rem;
}

.page-shell table.table th,
.page-shell table.js-datatable thead th {
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
}

/* DataTables wrapper (search, info, pagination) estilo premium */
.dataTables_wrapper {
    font-size: 0.86rem;
    color: var(--pm-text-soft);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    margin: 10px 0;
    color: var(--pm-text-soft);
    font-size: 0.84rem;
}

.dataTables_wrapper .dataTables_filter input {
    margin-left: 8px;
    padding: 5px 10px;
    min-height: 32px;
    font-size: 0.86rem;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    background: var(--pm-surface);
    color: var(--pm-text);
    transition: border-color 160ms var(--pm-ease-premium),
                box-shadow 160ms var(--pm-ease-premium);
}

.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: var(--pm-accent);
    box-shadow: 0 0 0 4px rgba(29, 112, 247, 0.12);
}

.dataTables_wrapper .dataTables_length select {
    margin: 0 6px;
    padding: 4px 8px;
    min-height: 30px;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    background: var(--pm-surface);
    color: var(--pm-text);
    font-size: 0.84rem;
}

.dataTables_wrapper .dataTables_paginate {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 5px 10px !important;
    min-width: 30px;
    border: 1px solid transparent !important;
    border-radius: var(--pm-radius-sm) !important;
    background: transparent !important;
    color: var(--pm-text-soft) !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    transition: background 160ms var(--pm-ease-premium),
                border-color 160ms var(--pm-ease-premium),
                color 160ms var(--pm-ease-premium);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background: var(--pm-primary-soft) !important;
    border-color: transparent !important;
    color: var(--pm-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--pm-primary) !important;
    border-color: var(--pm-primary) !important;
    color: #fff !important;
    box-shadow: var(--pm-shadow-btn-primary);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--pm-text-muted) !important;
    background: transparent !important;
    border-color: transparent !important;
    opacity: 0.5;
    cursor: not-allowed;
}

.dataTables_wrapper .dataTables_info {
    padding: 6px 0;
    font-variant-numeric: tabular-nums;
}

/* Bureau: en consulta_cliente la tabla de pólizas ya tiene su propio contador
   ("N pólizas visibles"), subtotales al pie y chips de filtro, así que los
   controles redundantes de DataTables (largo de página + "Mostrando X de Y")
   sobran. Se ocultan SOLO en esa tabla (scope por id del wrapper). */
#js-polizas-table_wrapper .dataTables_length,
#js-polizas-table_wrapper .dataTables_info {
    display: none;
}

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    cursor: pointer;
    position: relative;
    /* Mantener fondo navy sólido del header (NO usar `background-image: none`,
       que dejaba el texto blanco invisible). El sprite legacy de DataTables
       igual no aparece porque las flechas son los ::after de abajo. */
    background: var(--pm-primary) !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
    padding-right: 22px !important;
}

table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 8px;
    height: 8px;
    transform: translateY(-50%) rotate(45deg);
    border-right: 1.5px solid var(--pm-text-muted);
    border-bottom: 1.5px solid var(--pm-text-muted);
    opacity: 0.55;
    transition: opacity 160ms var(--pm-ease-premium), transform 160ms var(--pm-ease-premium);
}

table.dataTable thead th.sorting_asc::after {
    transform: translateY(-30%) rotate(-135deg);
    opacity: 1;
    border-color: var(--pm-primary);
}

table.dataTable thead th.sorting_desc::after {
    transform: translateY(-70%) rotate(45deg);
    opacity: 1;
    border-color: var(--pm-primary);
}

table.dataTable.no-footer {
    border-bottom: 1px solid var(--pm-divider);
}

table.dataTable tbody tr:hover {
    background-color: var(--pm-surface-row);
}

/* Toasts y dropdowns con look premium */
.toast {
    border-radius: var(--pm-radius-sm) !important;
    box-shadow: var(--pm-shadow-pop) !important;
    border: 1px solid var(--pm-border) !important;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
}

.toast.text-bg-primary,
.toast.text-bg-success,
.toast.text-bg-warning,
.toast.text-bg-danger {
    border-color: transparent !important;
}

.dropdown-menu {
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    box-shadow: var(--pm-shadow-pop);
    padding: 6px;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    background: rgba(255, 255, 255, 0.96);
}

.dropdown-item {
    border-radius: var(--pm-radius-sm);
    padding: 7px 10px;
    font-size: 0.88rem;
    transition: background 140ms var(--pm-ease-premium);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
}

.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus {
    background: rgba(180, 35, 24, 0.08);
    color: var(--pm-danger);
}

.dropdown-divider {
    margin: 6px -2px;
    border-top: 1px solid var(--pm-divider);
}

.dropdown-header {
    padding: 6px 10px 4px;
    color: var(--pm-text-muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

/* Bureau: apertura suave del dropdown (hoy aparece instantáneo). Sin rebote.
   Reduced-motion: el bloque global vuelve la animación casi instantánea. */
.dropdown-menu.show {
    animation: pmDropIn 0.16s var(--pm-ease-premium);
}

@keyframes pmDropIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

/* Tooltips de Bootstrap con tracking + sombra premium */
.tooltip .tooltip-inner {
    padding: 6px 10px;
    font-size: 0.78rem;
    letter-spacing: 0.005em;
    background: rgba(15, 23, 42, 0.94);
    border-radius: var(--pm-radius-sm);
    box-shadow: var(--pm-shadow-pop);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
}

.tooltip .tooltip-arrow::before {
    border-top-color: rgba(15, 23, 42, 0.94);
    border-bottom-color: rgba(15, 23, 42, 0.94);
    border-left-color: rgba(15, 23, 42, 0.94);
    border-right-color: rgba(15, 23, 42, 0.94);
}

/* Avatar con gradient mesh estilo Linear / Vercel */
.pm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background:
        radial-gradient(at 30% 20%, #1d70f7 0%, transparent 55%),
        radial-gradient(at 70% 80%, #0b3a6f 0%, transparent 55%),
        radial-gradient(at 50% 50%, #082a4f 0%, #0b3a6f 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: -0.01em;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
                0 1px 2px rgba(0, 0, 0, 0.10);
    flex-shrink: 0;
}

/* Numero de paso (reemplaza iconos bi-1-circle / bi-2-circle / bi-3-circle) */
.pm-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    background: currentColor;
    color: var(--pm-surface);
    font-weight: 600;
    font-size: 0.78em;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    margin-right: 0.25em;
    vertical-align: -0.05em;
}

.status-badge .pm-step-num,
.btn .pm-step-num {
    color: inherit;
}

/* ============================================================
   Theme toggle (sun/moon icon swap segun data-theme)
   ============================================================ */
.pm-theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--pm-radius-sm);
    overflow: hidden;
    transition: background 160ms var(--pm-ease-premium),
                border-color 160ms var(--pm-ease-premium);
}

/* Ambos iconos siempre presentes, animados via opacity + rotation.
   Cross-fade + rotacion sutil al cambiar tema (efecto premium tipo
   Vercel / Linear). */
.pm-theme-toggle__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    transition: opacity 220ms var(--pm-ease-premium),
                transform 320ms var(--pm-ease-premium);
}

/* Estado light: sun visible (no rotation), moon oculto rotado */
.pm-theme-toggle__icon--light {
    opacity: 1;
}
.pm-theme-toggle__icon--dark {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-60deg) scale(0.8);
}

/* Estado dark: moon visible, sun oculto rotado */
[data-theme="dark"] .pm-theme-toggle__icon--light {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(60deg) scale(0.8);
}
[data-theme="dark"] .pm-theme-toggle__icon--dark {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

/* ============================================================
   Ola 2 - Dark mode
   ============================================================ */
:root[data-theme="dark"] {
    /* Neutrales tinted hacia cobalt #1d70f7 (Tinted Neutrals Rule). */
    --pm-bg: #070d17;
    --pm-surface: #131c2b;
    --pm-surface-soft: #0f1623;
    --pm-surface-2: #1e2a3d;
    --pm-surface-row: #1a2333;
    --pm-border: #21304a;
    --pm-border-strong: #324466;
    --pm-divider: #1a2332;
    --pm-text: #e3ebf5;
    --pm-text-soft: #92a4ba;
    --pm-text-muted: #7a8aa0;
    --pm-primary: #1d70f7;
    --pm-primary-strong: #082a4f;
    --pm-primary-soft: rgba(29, 112, 247, 0.16);
    --pm-accent: #60a5fa;
    --pm-accent-soft: rgba(96, 165, 250, 0.18);
    --pm-success: #34d399;
    --pm-warning: #fbbf24;
    --pm-danger: #f87171;
    --pm-info: #60a5fa;

    --pm-shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 12px rgba(0, 0, 0, 0.4);
    --pm-shadow-md: 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 22px rgba(0, 0, 0, 0.5);
    --pm-shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 38px rgba(0, 0, 0, 0.55);
    --pm-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 16px rgba(0, 0, 0, 0.45);
    --pm-shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.55);
    --pm-shadow-topbar: 0 1px 0 rgba(255, 255, 255, 0.04);
    --pm-shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.6);
    --pm-shadow-card-halo: 0 0 0 1px rgba(96, 165, 250, 0.22), 0 8px 24px rgba(96, 165, 250, 0.10);
    --pm-shadow-btn-primary-active: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(8, 42, 79, 0.55);
    --pm-shadow-btn-primary: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(29, 112, 247, 0.30);
    --pm-shadow-btn-primary-hover: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 4px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(29, 112, 247, 0.36);

    --bs-body-bg: #0a1019;
    --bs-body-color: #e2e8f0;
    --bs-border-color: #1e293b;
    --bs-link-color: #60a5fa;
    --bs-link-hover-color: #93c5fd;
}

/* Body en dark sin pattern de dots (simetria con light). Mas oscuro
   que en versiones anteriores para diferenciar visualmente del
   sidebar gradient navy. */
[data-theme="dark"] body {
    background-color: var(--pm-bg);
    background-image:
        radial-gradient(circle at top right, rgba(29, 112, 247, 0.10), transparent 22%),
        linear-gradient(180deg, #0a1322 0%, var(--pm-bg) 100%);
    color: var(--pm-text);
}

/* Surface y section cards */
[data-theme="dark"] .surface-card,
[data-theme="dark"] .section-card,
[data-theme="dark"] .card {
    background: var(--pm-surface);
    border-color: var(--pm-border);
    color: var(--pm-text);
}

/* Cards en dark: solidas (simetria con light). Eliminado gradient
   vertical para coherencia entre modos. */
[data-theme="dark"] .section-card {
    background: var(--pm-surface);
}

[data-theme="dark"] .section-card::before {
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.20), rgba(29, 112, 247, 0.10), transparent);
}

/* Metric card en dark: solida (simetria con light) */
[data-theme="dark"] .metric-card {
    background: var(--pm-surface);
    border-color: var(--pm-border);
}

[data-theme="dark"] .metric-card::after {
    background: radial-gradient(circle, rgba(96, 165, 250, 0.18), transparent 66%);
}

/* Quick action card en dark: solida (simetria con light) */
[data-theme="dark"] .quick-action-card {
    background: var(--pm-surface);
    border-color: var(--pm-border);
}

[data-theme="dark"] .quick-action-card__icon {
    background: rgba(29, 112, 247, 0.18);
    color: var(--pm-accent);
}

[data-theme="dark"] .quick-action-card__title {
    color: var(--pm-text);
}

[data-theme="dark"] .quick-action-card__text {
    color: var(--pm-text-soft);
}

/* Info list (Prioridades) */
[data-theme="dark"] .info-list__item {
    background: var(--pm-surface-soft);
    border-color: var(--pm-border);
}

[data-theme="dark"] .info-list__value {
    color: var(--pm-text);
}

/* Page eyebrow */
[data-theme="dark"] .page-eyebrow {
    background: rgba(29, 112, 247, 0.18);
    color: var(--pm-accent);
}

[data-theme="dark"] .page-title {
    color: var(--pm-text);
}

[data-theme="dark"] .page-subtitle {
    color: var(--pm-text-soft);
}

[data-theme="dark"] .section-title {
    color: var(--pm-text);
}

[data-theme="dark"] .section-description {
    color: var(--pm-text-soft);
}

/* Topbar translucido en dark - usa shorthand para resetear background-image (gradient blanco original) */
[data-theme="dark"] .app-topbar {
    background: linear-gradient(180deg, rgba(13, 21, 37, 0.94) 0%, rgba(13, 21, 37, 0.86) 100%) !important;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    color: var(--pm-text);
}

[data-theme="dark"] .app-main__content {
    background: transparent;
}

[data-theme="dark"] .app-topbar * {
    color: inherit;
}

/* Sidebar - navy SIEMPRE (regla fija de marca), pero en su version NOCTURNA:
   el navy diurno (#0b3a6f) es mas claro que el fondo dark y "salta"; este navy
   profundo conserva la identidad pero ancla en vez de desentonar. Highlight
   cenital muy tenue para no brillar sobre la paleta oscura. */
[data-theme="dark"] .app-sidebar {
    background:
        radial-gradient(circle at top center, rgba(255, 255, 255, 0.03), transparent 26%),
        linear-gradient(180deg, #0b1c33 0%, #070f1d 100%) !important;
    box-shadow: 6px 0 18px rgba(0, 0, 0, 0.45);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .app-sidebar__brand::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

/* Items del sidebar en dark: levemente mas tenues los inactivos */
[data-theme="dark"] .sidebar-link {
    color: rgba(226, 232, 240, 0.88);
}

[data-theme="dark"] .sidebar-link:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

[data-theme="dark"] .sidebar-link.active {
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.20) 0%, rgba(96, 165, 250, 0.08) 60%, transparent 100%);
}

[data-theme="dark"] .sidebar-link.active::before {
    background: linear-gradient(180deg, var(--pm-accent) 0%, #93c5fd 100%);
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.5);
}

[data-theme="dark"] .sidebar-group__label {
    color: rgba(148, 163, 184, 0.7);
}

/* Inputs en dark con placeholders mas legibles */
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-select::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: rgba(148, 163, 184, 0.6) !important;
    opacity: 1;
}

/* Form switches (toggles) en dark con mas contraste */
[data-theme="dark"] .form-switch .form-check-input,
[data-theme="dark"] input[type="checkbox"].form-check-input {
    background-color: var(--pm-surface-soft);
    border-color: var(--pm-border-strong);
}

[data-theme="dark"] .form-switch .form-check-input:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2394a3b8'/%3e%3c/svg%3e");
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--pm-accent);
    border-color: var(--pm-accent);
}

[data-theme="dark"] .form-check-input:focus {
    border-color: var(--pm-accent);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18);
}

[data-theme="dark"] .form-check-label {
    color: var(--pm-text);
}

/* Status badges chips ("Cada fila representa una cuota", etc) menos saturados */
[data-theme="dark"] .status-badge--info,
[data-theme="dark"] .status-badge--neutral {
    background: rgba(96, 165, 250, 0.10);
    color: #93c5fd;
}

[data-theme="dark"] .status-badge--success {
    background: rgba(52, 211, 153, 0.10);
    color: #6ee7b7;
}

[data-theme="dark"] .status-badge--success-light {
    background: rgba(52, 211, 153, 0.05);
    color: #a7d9c4;
}

[data-theme="dark"] .status-badge--warning {
    background: rgba(251, 191, 36, 0.10);
    color: #fcd34d;
}

[data-theme="dark"] .status-badge--danger {
    background: rgba(248, 113, 113, 0.10);
    color: #fca5a5;
}

[data-theme="dark"] .status-badge--violeta {
    background: rgba(167, 139, 250, 0.10);
    color: #c4b5fd;
}

/* Eyebrow page mas suave en dark */
[data-theme="dark"] .page-eyebrow {
    background: rgba(96, 165, 250, 0.12);
    color: #93c5fd;
}

/* Empty state filter icon en dark */
[data-theme="dark"] [class*="empty-state"] [data-lucide] {
    color: var(--pm-text-muted);
}

/* Form controls — agresivo en dark para cubrir inputs nativos (date, number, select) */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="week"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--pm-surface-soft) !important;
    border-color: var(--pm-border) !important;
    color: var(--pm-text) !important;
    color-scheme: dark;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: rgba(148, 163, 184, 0.55) !important;
    opacity: 1;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .form-control:focus-visible,
[data-theme="dark"] .form-select:focus-visible {
    background-color: var(--pm-surface) !important;
    border-color: var(--pm-accent) !important;
    color: var(--pm-text) !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18) !important;
}

/* Iconos del input date / time picker (calendario, reloj) en dark */
[data-theme="dark"] input::-webkit-calendar-picker-indicator,
[data-theme="dark"] input::-webkit-clear-button,
[data-theme="dark"] input::-webkit-inner-spin-button {
    filter: invert(1) brightness(0.95);
    opacity: 0.6;
    cursor: pointer;
}

[data-theme="dark"] input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Autofill de Chrome en dark: evitar fondo amarillento */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--pm-surface-soft) inset !important;
    -webkit-text-fill-color: var(--pm-text) !important;
    caret-color: var(--pm-text);
    transition: background-color 5000s ease-in-out 0s;
}

[data-theme="dark"] .form-label {
    color: var(--pm-text);
}

[data-theme="dark"] .form-text {
    color: var(--pm-text-muted);
}

/* Buttons outline / light en dark — !important para ganar sobre Bootstrap */
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] button.btn-outline-secondary,
[data-theme="dark"] a.btn-outline-secondary {
    background-color: rgba(15, 22, 35, 0.65) !important;
    border-color: var(--pm-border) !important;
    color: var(--pm-text) !important;
}

[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] button.btn-outline-secondary:hover,
[data-theme="dark"] a.btn-outline-secondary:hover {
    background-color: var(--pm-surface) !important;
    border-color: var(--pm-border-strong) !important;
    color: var(--pm-text) !important;
}

[data-theme="dark"] .btn-outline-primary {
    background: transparent !important;
    border-color: var(--pm-accent) !important;
    color: var(--pm-accent) !important;
}

[data-theme="dark"] .btn-outline-primary:hover {
    background: rgba(96, 165, 250, 0.12) !important;
    color: var(--pm-accent) !important;
}

[data-theme="dark"] .btn-light,
[data-theme="dark"] button.btn-light,
[data-theme="dark"] a.btn-light {
    background-color: rgba(15, 22, 35, 0.65) !important;
    border: 1px solid var(--pm-border) !important;
    color: var(--pm-text) !important;
}

[data-theme="dark"] .btn-light:hover,
[data-theme="dark"] button.btn-light:hover,
[data-theme="dark"] a.btn-light:hover {
    background-color: var(--pm-surface) !important;
    color: var(--pm-text) !important;
}

/* Tablas */
[data-theme="dark"] table.table,
[data-theme="dark"] table.dataTable {
    color: var(--pm-text);
}

[data-theme="dark"] table.dataTable tbody tr {
    background-color: transparent;
}

[data-theme="dark"] table.dataTable tbody tr:hover {
    background-color: var(--pm-surface-row);
}

[data-theme="dark"] table.table th,
[data-theme="dark"] table.dataTable thead th {
    color: var(--pm-text-muted);
    border-bottom-color: var(--pm-border);
    background: transparent;
}

[data-theme="dark"] .table > :not(caption) > * > *,
[data-theme="dark"] .table > tbody > tr > td,
[data-theme="dark"] .table > tbody > tr > th {
    border-bottom-color: var(--pm-divider);
    color: var(--pm-text);
    background: transparent;
}

[data-theme="dark"] table.dataTable.no-footer {
    border-bottom-color: var(--pm-border);
}

/* DataTables wrapper en dark */
[data-theme="dark"] .dataTables_wrapper,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter {
    color: var(--pm-text-soft);
}

[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background: var(--pm-surface-soft);
    border-color: var(--pm-border);
    color: var(--pm-text);
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--pm-text-soft) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background: rgba(29, 112, 247, 0.18) !important;
    color: var(--pm-accent) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--pm-accent) !important;
    color: #082a4f !important;
    border-color: var(--pm-accent) !important;
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background: rgba(15, 23, 42, 0.96);
    border-color: var(--pm-border);
    color: var(--pm-text);
}

[data-theme="dark"] .dropdown-item {
    color: var(--pm-text-soft);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background: rgba(96, 165, 250, 0.12);
    color: var(--pm-accent);
}

[data-theme="dark"] .dropdown-item.text-danger {
    color: #fca5a5 !important;
}

[data-theme="dark"] .dropdown-item.text-danger:hover,
[data-theme="dark"] .dropdown-item.text-danger:focus {
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5 !important;
}

[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--pm-divider);
}

[data-theme="dark"] .dropdown-header {
    color: var(--pm-text-muted);
}

/* Toasts */
[data-theme="dark"] .toast {
    background: rgba(15, 23, 42, 0.94) !important;
    border-color: var(--pm-border) !important;
    color: var(--pm-text);
}

[data-theme="dark"] .toast-body {
    color: var(--pm-text);
}

/* Cuando el toast lleva una variante text-bg-* (warning/success/danger/primary),
   el body debe heredar el color oscuro de la variante en vez del gris claro generico. */
[data-theme="dark"] .toast[class*="text-bg-"] .toast-body,
[data-theme="dark"] .toast[class*="text-bg-"] {
    color: inherit;
}

/* Tooltips - ya tienen bg oscuro, solo asegurar contraste */
[data-theme="dark"] .tooltip .tooltip-inner {
    background: rgba(15, 23, 42, 0.96);
}

/* Status badges - hacerlas con fondos suaves coloreados */
[data-theme="dark"] .status-badge--info,
[data-theme="dark"] .status-badge--neutral {
    background: rgba(96, 165, 250, 0.14);
    color: var(--pm-accent);
}

[data-theme="dark"] .status-badge--success {
    background: rgba(52, 211, 153, 0.14);
    color: var(--pm-success);
}

[data-theme="dark"] .status-badge--success-light {
    background: rgba(52, 211, 153, 0.07);
    color: #a7d9c4;
}

[data-theme="dark"] .status-badge--warning {
    background: rgba(251, 191, 36, 0.14);
    color: var(--pm-warning);
}

[data-theme="dark"] .status-badge--danger {
    background: rgba(248, 113, 113, 0.14);
    color: var(--pm-danger);
}

[data-theme="dark"] .status-badge--violeta {
    background: rgba(167, 139, 250, 0.14);
    color: #c4b5fd;
}

/* Job center notifications */
[data-theme="dark"] .sg-job-center__menu {
    background: var(--pm-surface);
}

[data-theme="dark"] .sg-job-center__title,
[data-theme="dark"] .sg-job-center__subtitle,
[data-theme="dark"] .sg-job-center__metric-label,
[data-theme="dark"] .sg-job-center__hint {
    color: var(--pm-text-soft);
}

[data-theme="dark"] .sg-job-center__metric-value {
    color: var(--pm-text);
}

[data-theme="dark"] .sg-job-center__empty-icon {
    color: var(--pm-text-muted);
}

/* Alerts */
[data-theme="dark"] .alert-danger {
    background: rgba(248, 113, 113, 0.10);
    border-color: rgba(248, 113, 113, 0.25);
    color: #fca5a5;
}

[data-theme="dark"] .alert-warning {
    background: rgba(251, 191, 36, 0.10);
    border-color: rgba(251, 191, 36, 0.25);
    color: #fbbf24;
}

[data-theme="dark"] .alert-success {
    background: rgba(52, 211, 153, 0.10);
    border-color: rgba(52, 211, 153, 0.25);
    color: #6ee7b7;
}

[data-theme="dark"] .alert-info,
[data-theme="dark"] .alert-primary {
    background: rgba(96, 165, 250, 0.10);
    border-color: rgba(96, 165, 250, 0.25);
    color: #93c5fd;
}

/* Text utilities frecuentes */
[data-theme="dark"] .text-muted {
    color: var(--pm-text-muted) !important;
}

[data-theme="dark"] .text-soft {
    color: var(--pm-text-soft);
}

/* Help icon button */
[data-theme="dark"] .sg-help-icon {
    color: var(--pm-text-muted);
}

[data-theme="dark"] .sg-help-icon:hover {
    color: var(--pm-accent);
}

/* Code / kbd / pre */
[data-theme="dark"] code,
[data-theme="dark"] kbd,
[data-theme="dark"] pre {
    background: var(--pm-surface-soft);
    color: var(--pm-text);
    border-color: var(--pm-border);
}

/* Hairline overrides */
[data-theme="dark"] .pm-hairline::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
}

/* Text-bg-* (toasts y badges) en dark mode mantener contraste */
[data-theme="dark"] .text-bg-primary {
    background-color: var(--pm-accent) !important;
    color: #082a4f !important;
}

[data-theme="dark"] .text-bg-success {
    background-color: rgba(52, 211, 153, 0.92) !important;
    color: #052e1f !important;
}

[data-theme="dark"] .text-bg-warning {
    background-color: rgba(251, 191, 36, 0.92) !important;
    color: #422006 !important;
}

[data-theme="dark"] .text-bg-danger {
    background-color: rgba(248, 113, 113, 0.92) !important;
    color: #450a0a !important;
}

/* Borders genericos en dark */
[data-theme="dark"] .border-soft {
    border-color: var(--pm-border) !important;
}

/* Headings */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: var(--pm-text);
}

/* ============================================================
   Sweep amplio de clases con background blanco hardcoded en light
   ============================================================ */

/* Filter chips (los banners "Carga manual queda para excepciones...") */
[data-theme="dark"] .filter-chip {
    background: rgba(15, 22, 35, 0.65) !important;
    border-color: var(--pm-border) !important;
    color: var(--pm-text-soft) !important;
}

[data-theme="dark"] .filter-chip strong {
    color: var(--pm-text);
}

/* Table containers y meta */
[data-theme="dark"] .table-meta,
[data-theme="dark"] .table-card {
    background: var(--pm-surface) !important;
    border-color: var(--pm-border) !important;
    color: var(--pm-text-soft);
}

/* Input groups (addons como prefijo $/€) */
[data-theme="dark"] .input-group-text {
    background: var(--pm-surface-soft) !important;
    border-color: var(--pm-border) !important;
    color: var(--pm-text-soft) !important;
}

/* Manual flow panels (carga manual SG) */
[data-theme="dark"] .manual-flow-panel,
[data-theme="dark"] .manual-flow-switch,
[data-theme="dark"] .manual-workbench,
[data-theme="dark"] .manual-toolbar,
[data-theme="dark"] .manual-help-grid__item {
    background: var(--pm-surface) !important;
    border-color: var(--pm-border) !important;
    color: var(--pm-text);
}

[data-theme="dark"] .manual-flow-switch {
    background: var(--pm-surface-soft) !important;
}

/* Mail / confirm panels (ART enviar mails) */
[data-theme="dark"] .mail-confirm-panel,
[data-theme="dark"] .confirm-panel,
[data-theme="dark"] .confirm-callout {
    background: var(--pm-surface) !important;
    border-color: var(--pm-border) !important;
    color: var(--pm-text);
}

[data-theme="dark"] .confirm-checklist__item {
    background: var(--pm-surface-soft) !important;
    border-color: var(--pm-border) !important;
    color: var(--pm-text);
}

/* Detail nav / switcher (consulta cliente / poliza) */
[data-theme="dark"] .detail-nav-btn {
    background: var(--pm-surface-soft) !important;
    border-color: var(--pm-border) !important;
    color: var(--pm-text-soft) !important;
}

[data-theme="dark"] .detail-nav-btn:hover {
    background: var(--pm-surface) !important;
    color: var(--pm-text) !important;
}

[data-theme="dark"] .detail-nav-btn.is-active {
    background: var(--pm-accent-soft) !important;
    color: var(--pm-accent) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

[data-theme="dark"] .detail-switcher__panel-inner {
    background: var(--pm-surface) !important;
    border-color: var(--pm-border) !important;
    color: var(--pm-text);
}

/* Status pills */
[data-theme="dark"] .status-pill {
    background: var(--pm-surface-soft) !important;
    border-color: var(--pm-border) !important;
    color: var(--pm-text-soft) !important;
}

/* Job center items y metrics */
[data-theme="dark"] .sg-job-center__metric,
[data-theme="dark"] .sg-job-center__item {
    background: var(--pm-surface-soft) !important;
    border-color: var(--pm-border) !important;
    color: var(--pm-text);
}

/* Mobile sidebar offcanvas — ya tiene text-bg-dark de Bootstrap, solo asegurar */
[data-theme="dark"] .app-mobile-sidebar {
    background: linear-gradient(180deg, #0d1828 0%, #070d1a 100%) !important;
    color: var(--pm-text);
}

/* Bulk panels (carga masiva) */
[data-theme="dark"] [class*="bulk-"][class*="-panel"],
[data-theme="dark"] [class*="bulk-"][class*="-card"] {
    background: var(--pm-surface) !important;
    border-color: var(--pm-border) !important;
}

[data-theme="dark"] [class*="bulk-"][class*="-card"] *,
[data-theme="dark"] [class*="bulk-"][class*="-panel"] * {
    color: inherit;
}

/* Cards / paneles genericos no cubiertos arriba */
[data-theme="dark"] [class*="-card"]:not(.metric-card):not(.quick-action-card):not(.toast):not(.dropdown-item):not(.section-card),
[data-theme="dark"] [class*="-panel"]:not(.toast) {
    background-color: var(--pm-surface);
    border-color: var(--pm-border);
    color: var(--pm-text);
}

/* Forzar que los inputs nativos tengan color-scheme dark para los pickers (date/select) */
[data-theme="dark"] {
    color-scheme: dark;
}

/* Tooltip de help icon ya tiene clase pm-help-tooltip */
[data-theme="dark"] .pm-help-tooltip .tooltip-inner {
    background: rgba(15, 23, 42, 0.96) !important;
    color: var(--pm-text);
}

/* Clientes importantes — Tablero de deuda + Prioridades del día */
[data-theme="dark"] .ci-summary-card {
    background: linear-gradient(180deg, rgba(19, 28, 43, 0.96) 0%, rgba(15, 22, 35, 1) 100%) !important;
    border-color: var(--pm-border) !important;
    color: var(--pm-text);
}

[data-theme="dark"] .ci-summary-card__label {
    color: var(--pm-text-muted);
}

[data-theme="dark"] .ci-summary-card__value {
    color: var(--pm-text);
}

[data-theme="dark"] .ci-summary-card__meta {
    color: var(--pm-text-soft);
}

[data-theme="dark"] .ci-summary-card--danger {
    background: linear-gradient(180deg, rgba(248, 113, 113, 0.06) 0%, rgba(15, 22, 35, 1) 100%) !important;
    border-color: rgba(248, 113, 113, 0.22) !important;
}

[data-theme="dark"] .ci-summary-card--warning {
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.06) 0%, rgba(15, 22, 35, 1) 100%) !important;
    border-color: rgba(251, 191, 36, 0.22) !important;
}

[data-theme="dark"] .ci-summary-card--info {
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.07) 0%, rgba(15, 22, 35, 1) 100%) !important;
    border-color: rgba(96, 165, 250, 0.22) !important;
}

[data-theme="dark"] .ci-priority-card {
    background: linear-gradient(180deg, rgba(19, 28, 43, 0.96) 0%, rgba(15, 22, 35, 1) 100%) !important;
    border-color: var(--pm-border) !important;
    color: var(--pm-text);
}

[data-theme="dark"] .ci-priority-card__label {
    color: var(--pm-text-muted);
}

[data-theme="dark"] .ci-priority-card__value,
[data-theme="dark"] .ci-priority-card__amount {
    color: var(--pm-text);
}

[data-theme="dark"] .ci-priority-card__meta {
    color: var(--pm-text-soft);
}

[data-theme="dark"] .ci-priority-card__icon {
    background: rgba(96, 165, 250, 0.15);
    color: var(--pm-accent);
}

[data-theme="dark"] .ci-priority-card--danger .ci-priority-card__icon {
    background: rgba(248, 113, 113, 0.16);
    color: #fca5a5;
}

[data-theme="dark"] .ci-priority-card--warning .ci-priority-card__icon {
    background: rgba(251, 191, 36, 0.16);
    color: #fcd34d;
}

[data-theme="dark"] .ci-priority-card--info .ci-priority-card__icon {
    background: rgba(96, 165, 250, 0.16);
    color: var(--pm-accent);
}

[data-theme="dark"] .ci-dashboard-intro {
    color: var(--pm-text-soft);
}

/* Cualquier otro elemento ci-* (clientes importantes) con bg claro hardcoded */
[data-theme="dark"] [class^="ci-"][class*="-card"]:not(.ci-summary-card):not(.ci-priority-card),
[data-theme="dark"] [class^="ci-"][class*="-panel"],
[data-theme="dark"] [class^="ci-"][class*="-row"] {
    background: var(--pm-surface) !important;
    border-color: var(--pm-border) !important;
    color: var(--pm-text);
}

/* ============================================================
   Sweep masivo dark — overrides para clases con linear-gradient(white)
   hardcoded detectadas por script (79 clases).
   ============================================================ */

[data-theme="dark"] .art-progress-card,
[data-theme="dark"] .brand-media,
[data-theme="dark"] .bulk-action-card,
[data-theme="dark"] .bulk-insight-card,
[data-theme="dark"] .bulk-mode-card__fact,
[data-theme="dark"] .bulk-upload-dropzone,
[data-theme="dark"] .ci-agenda-row,
[data-theme="dark"] .ci-bar-card,
[data-theme="dark"] .ci-command-panel,
[data-theme="dark"] .ci-group-accordion,
[data-theme="dark"] .ci-group-highlight,
[data-theme="dark"] .ci-nav-card--active,
[data-theme="dark"] .ci-radar-item,
[data-theme="dark"] .ci-ranking-row,
[data-theme="dark"] .crm-contact-card,
[data-theme="dark"] .crm-contacts-panel,
[data-theme="dark"] .contacts-toggle-row,
[data-theme="dark"] .deudores-pagination,
[data-theme="dark"] .deudores-switch,
[data-theme="dark"] .guide-card,
[data-theme="dark"] .kpi-context-panel,
[data-theme="dark"] .kpi-hero-card--danger,
[data-theme="dark"] .kpi-hero-card--info,
[data-theme="dark"] .kpi-hero-card--neutral,
[data-theme="dark"] .kpi-hero-card--success,
[data-theme="dark"] .kpi-inline__item,
[data-theme="dark"] .lookup-form-shell,
[data-theme="dark"] .lookup-panel,
[data-theme="dark"] .mail-prep-check-card,
[data-theme="dark"] .mail-prep-form-shell,
[data-theme="dark"] .mail-prep-panel,
[data-theme="dark"] .metric-card--danger,
[data-theme="dark"] .metric-card--info,
[data-theme="dark"] .metric-card--success,
[data-theme="dark"] .metric-card--warning,
[data-theme="dark"] .policy-candidate-card,
[data-theme="dark"] .process-accordion,
[data-theme="dark"] .process-accordion__meta-card,
[data-theme="dark"] .rank-panel,
[data-theme="dark"] .pm-compact-flow__item,
[data-theme="dark"] .sg-legend-item,
[data-theme="dark"] .sg-endoso-detail-box,
[data-theme="dark"] .sg-extraction-overview,
[data-theme="dark"] .sg-mini-panel,
[data-theme="dark"] .sg-progress-shell,
[data-theme="dark"] .sg-workflow-card,
[data-theme="dark"] .sg-workflow-form,
[data-theme="dark"] .system-context-card,
[data-theme="dark"] .system-context-panel,
[data-theme="dark"] .auth-page,
[data-theme="dark"] .auth-shell {
    background: linear-gradient(180deg, rgba(19, 28, 43, 0.96) 0%, rgba(15, 22, 35, 1) 100%) !important;
    border-color: var(--pm-border) !important;
    color: var(--pm-text);
}

/* Variantes de color en cards con tinte sutil sobre fondo dark */
[data-theme="dark"] .metric-card--danger,
[data-theme="dark"] .kpi-hero-card--danger {
    background: linear-gradient(180deg, rgba(248, 113, 113, 0.06) 0%, rgba(15, 22, 35, 1) 100%) !important;
    border-color: rgba(248, 113, 113, 0.22) !important;
}

[data-theme="dark"] .metric-card--warning,
[data-theme="dark"] .kpi-hero-card--warning {
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.06) 0%, rgba(15, 22, 35, 1) 100%) !important;
    border-color: rgba(251, 191, 36, 0.22) !important;
}

[data-theme="dark"] .metric-card--success,
[data-theme="dark"] .kpi-hero-card--success {
    background: linear-gradient(180deg, rgba(52, 211, 153, 0.06) 0%, rgba(15, 22, 35, 1) 100%) !important;
    border-color: rgba(52, 211, 153, 0.22) !important;
}

[data-theme="dark"] .metric-card--info,
[data-theme="dark"] .kpi-hero-card--info {
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.07) 0%, rgba(15, 22, 35, 1) 100%) !important;
    border-color: rgba(96, 165, 250, 0.22) !important;
}

/* pm-compact-flow icon (ART consulta, etc.) — variantes de color con tinte dark */
[data-theme="dark"] .pm-compact-flow__icon,
[data-theme="dark"] .sg-legend-item__icon {
    background: rgba(96, 165, 250, 0.16);
    color: var(--pm-accent);
}

[data-theme="dark"] .pm-compact-flow__item--success .pm-compact-flow__icon,
[data-theme="dark"] .sg-legend-item--success .sg-legend-item__icon {
    background: rgba(52, 211, 153, 0.16);
    color: #6ee7b7;
}

[data-theme="dark"] .pm-compact-flow__item--warning .pm-compact-flow__icon,
[data-theme="dark"] .sg-legend-item--warning .sg-legend-item__icon {
    background: rgba(251, 191, 36, 0.16);
    color: #fcd34d;
}

[data-theme="dark"] .pm-compact-flow__item--danger .pm-compact-flow__icon,
[data-theme="dark"] .sg-legend-item--danger .sg-legend-item__icon {
    background: rgba(248, 113, 113, 0.16);
    color: #fca5a5;
}

/* Bulk upload dropzone con borde dashed visible en dark */
[data-theme="dark"] .bulk-upload-dropzone {
    border-color: rgba(96, 165, 250, 0.3) !important;
    border-style: dashed !important;
}

[data-theme="dark"] .bulk-upload-dropzone:hover {
    background: linear-gradient(180deg, rgba(29, 28, 43, 1) 0%, rgba(15, 22, 35, 1) 100%) !important;
    border-color: var(--pm-accent) !important;
}

/* Guide card icon variants */
[data-theme="dark"] .guide-card__icon--info {
    background: rgba(96, 165, 250, 0.16) !important;
    color: var(--pm-accent) !important;
}

[data-theme="dark"] .guide-card__icon--success {
    background: rgba(52, 211, 153, 0.16) !important;
    color: #6ee7b7 !important;
}

[data-theme="dark"] .guide-card__icon--warning {
    background: rgba(251, 191, 36, 0.16) !important;
    color: #fcd34d !important;
}

[data-theme="dark"] .guide-card__icon--neutral {
    background: var(--pm-surface-soft) !important;
    color: var(--pm-text-soft) !important;
}

/* Process accordion en SG procesos */
[data-theme="dark"] .process-accordion summary,
[data-theme="dark"] .process-accordion__head {
    background: var(--pm-surface-soft) !important;
    color: var(--pm-text);
}

/* Aseguradoras listado — los cards de cada compañía */
[data-theme="dark"] [class*="aseguradora"][class*="-card"],
[data-theme="dark"] [class*="insurer"][class*="-card"],
[data-theme="dark"] [class*="company"][class*="-card"] {
    background: linear-gradient(180deg, rgba(19, 28, 43, 0.96) 0%, rgba(15, 22, 35, 1) 100%) !important;
    border-color: var(--pm-border) !important;
    color: var(--pm-text);
}

/* ============================================================
   Clientes importantes — Tablero rediseñado
   ============================================================ */

/* --- Tabs principales (reemplazan al "Centro de control") --- */
.ci-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-radius: var(--pm-radius-md);
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    box-shadow: var(--pm-shadow-card);
}

.ci-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 12px;
    color: var(--pm-text-soft);
    font-weight: 600;
    font-size: 0.92rem;
    transition: background-color 0.18s var(--pm-ease-premium), color 0.18s var(--pm-ease-premium);
}

.ci-tab i {
    width: 16px;
    height: 16px;
}

.ci-tab:hover {
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
}

.ci-tab.is-active {
    background: var(--pm-primary);
    color: #fff;
    box-shadow: var(--pm-shadow-btn-primary);
}

.ci-tabs__hint {
    margin-left: auto;
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

@media (max-width: 767.98px) {
    .ci-tabs__hint {
        margin-left: 0;
        width: 100%;
    }
}

/* --- Hero "Estado de hoy" --- */
.ci-hero {
    background:
        radial-gradient(circle at top right, rgba(29, 112, 247, 0.10), transparent 35%),
        linear-gradient(135deg, #ffffff 0%, #f4f9ff 100%);
}

.ci-hero__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.ci-hero__title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ci-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pm-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ci-hero__eyebrow i {
    width: 14px;
    height: 14px;
}

.ci-hero__title {
    margin: 0;
    color: var(--pm-text);
    font-size: 1.6rem;
    font-weight: 700;
}

.ci-hero__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ci-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    font-size: 0.85rem;
    color: var(--pm-text);
}

.ci-hero-chip i {
    width: 14px;
    height: 14px;
}

.ci-hero-chip strong {
    font-weight: 700;
}

.ci-hero-chip--danger {
    background: rgba(180, 35, 24, 0.06);
    border-color: rgba(180, 35, 24, 0.22);
    color: var(--pm-danger);
}

.ci-hero-chip--warning {
    background: rgba(183, 121, 31, 0.06);
    border-color: rgba(183, 121, 31, 0.22);
    color: var(--pm-warning);
}

.ci-hero-chip--info {
    background: rgba(11, 92, 171, 0.06);
    border-color: rgba(11, 92, 171, 0.22);
    color: var(--pm-info);
}

.ci-hero__copy {
    transition: background-color 0.18s var(--pm-ease-premium), color 0.18s var(--pm-ease-premium);
}

.ci-hero__copy.is-success {
    background: var(--pm-success);
    border-color: var(--pm-success);
    color: #fff;
}

.ci-hero__currencies {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.ci-hero-currency {
    padding: 18px;
    border-radius: var(--pm-radius-md);
    border: 1px solid var(--pm-border);
    background: var(--pm-surface);
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--pm-shadow-card);
}

.ci-hero-currency--alert {
    border-color: rgba(180, 35, 24, 0.30);
    background: linear-gradient(180deg, #fff8f7 0%, #ffffff 100%);
}

.ci-hero-currency__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.ci-hero-currency__moneda {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--pm-primary);
    letter-spacing: 0.02em;
}

.ci-hero-currency--alert .ci-hero-currency__moneda {
    color: var(--pm-danger);
}

.ci-hero-currency__meta {
    color: var(--pm-text-soft);
    font-size: 0.85rem;
}

.ci-hero-currency__main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.ci-hero-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(11, 58, 111, 0.04);
    border: 1px solid rgba(11, 58, 111, 0.08);
    text-decoration: none;
    color: var(--pm-text);
    transition: transform 0.16s var(--pm-ease-premium), box-shadow 0.16s var(--pm-ease-premium);
}

a.ci-hero-metric:hover {
    transform: translateY(-1px);
    box-shadow: var(--pm-shadow-card-hover);
    color: var(--pm-text);
}

.ci-hero-metric--danger {
    background: rgba(180, 35, 24, 0.06);
    border-color: rgba(180, 35, 24, 0.22);
}

.ci-hero-metric--warning {
    background: rgba(183, 121, 31, 0.06);
    border-color: rgba(183, 121, 31, 0.22);
}

.ci-hero-metric__label {
    color: var(--pm-text-muted);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ci-hero-metric__value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--pm-text);
}

.ci-hero-metric--danger .ci-hero-metric__value {
    color: var(--pm-danger);
}

.ci-hero-metric--warning .ci-hero-metric__value {
    color: var(--pm-warning);
}

.ci-hero-metric__hint {
    color: var(--pm-text-soft);
    font-size: 0.78rem;
}

.ci-hero-currency__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ci-hero-currency__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(11, 58, 111, 0.04);
    border: 1px solid var(--pm-border);
    color: var(--pm-text-soft);
    font-size: 0.82rem;
    text-decoration: none;
    transition: background-color 0.16s var(--pm-ease-premium), color 0.16s var(--pm-ease-premium);
}

.ci-hero-currency__pill:hover {
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
}

.ci-hero-currency__pill i {
    width: 14px;
    height: 14px;
}

.ci-hero-currency__pill strong {
    color: var(--pm-text);
    font-weight: 700;
}

.ci-hero-currency__pill--info {
    background: rgba(11, 92, 171, 0.06);
    border-color: rgba(11, 92, 171, 0.20);
    color: var(--pm-info);
}

@media (max-width: 575.98px) {
    .ci-hero-currency__main {
        grid-template-columns: 1fr;
    }
    .ci-hero__title {
        font-size: 1.3rem;
    }
}

/* --- "Empezá por acá" con tabs internas --- */
.ci-todo__nav {
    margin-top: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--pm-divider);
    padding-bottom: 8px;
    gap: 6px;
}

.ci-todo__nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    background: transparent;
    color: var(--pm-text-soft);
    font-weight: 600;
    border: 1px solid transparent;
    transition: background-color 0.16s var(--pm-ease-premium), color 0.16s var(--pm-ease-premium);
}

.ci-todo__nav-btn i {
    width: 15px;
    height: 15px;
}

.ci-todo__nav-btn:hover {
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
}

.ci-todo__nav-btn.active {
    background: var(--pm-primary);
    color: #fff !important;
}

.ci-todo__nav-btn--danger.active {
    background: var(--pm-danger);
}

.ci-todo__nav-btn--warning.active {
    background: var(--pm-warning);
}

.ci-todo__nav-btn--info.active {
    background: var(--pm-info);
}

.ci-todo__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 0 7px;
    height: 20px;
    border-radius: 10px;
    background: rgba(11, 58, 111, 0.10);
    color: var(--pm-text);
    font-size: 0.75rem;
    font-weight: 700;
}

.ci-todo__nav-btn.active .ci-todo__count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.ci-todo-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 480px;
    overflow-y: auto;
    padding-right: 4px;
}

.ci-todo-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--pm-border);
    background: var(--pm-surface);
    transition: box-shadow 0.16s var(--pm-ease-premium), transform 0.16s var(--pm-ease-premium);
}

.ci-todo-row:hover {
    box-shadow: var(--pm-shadow-card-hover);
    transform: translateY(-1px);
}

/* Estado del to-do: tinted background en vez de side-stripe. */
.ci-todo-row--danger {
    background: linear-gradient(180deg, rgba(180, 35, 24, 0.06) 0%, var(--pm-surface) 100%);
    border-color: rgba(180, 35, 24, 0.20);
}

.ci-todo-row--warning {
    background: linear-gradient(180deg, rgba(183, 121, 31, 0.06) 0%, var(--pm-surface) 100%);
    border-color: rgba(183, 121, 31, 0.20);
}

.ci-todo-row--info {
    background: linear-gradient(180deg, rgba(11, 92, 171, 0.05) 0%, var(--pm-surface) 100%);
    border-color: rgba(11, 92, 171, 0.18);
}

.ci-todo-row__main {
    min-width: 0;
}

.ci-todo-row__title {
    font-weight: 700;
    color: var(--pm-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ci-todo-row__meta {
    color: var(--pm-text-soft);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ci-todo-row__amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.ci-todo-row__moneda {
    color: var(--pm-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ci-todo-row__value {
    font-weight: 700;
    color: var(--pm-text);
    font-size: 1.05rem;
}

.ci-todo-row--danger .ci-todo-row__value {
    color: var(--pm-danger);
}

.ci-todo-row__focus {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.ci-todo-row__deadline {
    color: var(--pm-text-soft);
    font-size: 0.78rem;
}

.ci-todo-row__actions {
    display: flex;
    gap: 6px;
}

.ci-todo-row__actions .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ci-todo-row__actions .btn i {
    width: 15px;
    height: 15px;
}

@media (max-width: 991.98px) {
    .ci-todo-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "main amount"
            "focus actions";
        gap: 8px;
    }
    .ci-todo-row__main { grid-area: main; }
    .ci-todo-row__amount { grid-area: amount; }
    .ci-todo-row__focus { grid-area: focus; flex-direction: row; align-items: center; gap: 8px; }
    .ci-todo-row__actions { grid-area: actions; }
}

/* --- Charts (Chart.js) --- */
.ci-chart-card .ci-chart-canvas-wrap {
    margin-top: 10px;
    position: relative;
    height: 280px;
}

.ci-chart-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 4px 0 8px;
    color: var(--pm-text-soft);
    font-size: 0.86rem;
}

.ci-chart-meta strong {
    color: var(--pm-text);
    font-weight: 700;
}

.ci-chart-toggle .btn {
    font-weight: 700;
    min-width: 56px;
}

/* --- Acordeón de respaldo --- */
.ci-accordion {
    margin-top: 12px;
}

.ci-accordion .accordion-item {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 8px;
    border: 1px solid var(--pm-border);
}

.ci-accordion .accordion-button {
    background: var(--pm-surface);
    color: var(--pm-text);
    font-weight: 600;
    box-shadow: none;
}

.ci-accordion .accordion-button:not(.collapsed) {
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
    box-shadow: none;
}

.ci-accordion .accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(11, 58, 111, 0.16);
}

.ci-accordion .accordion-body {
    background: var(--pm-surface-soft);
}

/* --- Dark theme overrides --- */
[data-theme="dark"] .ci-tabs {
    background: var(--pm-surface);
    border-color: var(--pm-border);
}

[data-theme="dark"] .ci-hero {
    background: linear-gradient(180deg, rgba(19, 28, 43, 0.96) 0%, rgba(15, 22, 35, 1) 100%) !important;
    border-color: var(--pm-border) !important;
}

[data-theme="dark"] .ci-hero-currency {
    background: rgba(255, 255, 255, 0.02);
    border-color: var(--pm-border);
}

[data-theme="dark"] .ci-hero-currency--alert {
    background: linear-gradient(180deg, rgba(248, 113, 113, 0.06) 0%, rgba(15, 22, 35, 1) 100%) !important;
    border-color: rgba(248, 113, 113, 0.22) !important;
}

[data-theme="dark"] .ci-hero-currency__moneda {
    color: var(--pm-accent);
}

[data-theme="dark"] .ci-hero-currency--alert .ci-hero-currency__moneda {
    color: #fca5a5;
}

[data-theme="dark"] .ci-hero-metric {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--pm-border);
    color: var(--pm-text);
}

[data-theme="dark"] a.ci-hero-metric:hover {
    color: var(--pm-text);
}

[data-theme="dark"] .ci-hero-metric--danger {
    background: rgba(248, 113, 113, 0.08);
    border-color: rgba(248, 113, 113, 0.22);
}

[data-theme="dark"] .ci-hero-metric--warning {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.22);
}

[data-theme="dark"] .ci-hero-metric__value {
    color: var(--pm-text);
}

[data-theme="dark"] .ci-hero-metric--danger .ci-hero-metric__value {
    color: #fca5a5;
}

[data-theme="dark"] .ci-hero-metric--warning .ci-hero-metric__value {
    color: #fcd34d;
}

[data-theme="dark"] .ci-hero-currency__pill {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--pm-border);
}

[data-theme="dark"] .ci-hero-currency__pill strong {
    color: var(--pm-text);
}

[data-theme="dark"] .ci-hero-chip {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--pm-border);
    color: var(--pm-text);
}

[data-theme="dark"] .ci-hero-chip--danger {
    background: rgba(248, 113, 113, 0.08);
    border-color: rgba(248, 113, 113, 0.24);
    color: #fca5a5;
}

[data-theme="dark"] .ci-hero-chip--warning {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.24);
    color: #fcd34d;
}

[data-theme="dark"] .ci-hero-chip--info {
    background: rgba(96, 165, 250, 0.08);
    border-color: rgba(96, 165, 250, 0.24);
    color: var(--pm-accent);
}

[data-theme="dark"] .ci-todo-row {
    background: rgba(255, 255, 255, 0.02);
    border-color: var(--pm-border);
    color: var(--pm-text);
}

[data-theme="dark"] .ci-todo-row__title,
[data-theme="dark"] .ci-todo-row__value {
    color: var(--pm-text);
}

[data-theme="dark"] .ci-todo-row--danger .ci-todo-row__value {
    color: #fca5a5;
}

[data-theme="dark"] .ci-accordion .accordion-button {
    background: rgba(255, 255, 255, 0.03);
    color: var(--pm-text);
}

[data-theme="dark"] .ci-accordion .accordion-button:not(.collapsed) {
    background: rgba(96, 165, 250, 0.10);
    color: var(--pm-accent);
}

[data-theme="dark"] .ci-accordion .accordion-body {
    background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .ci-todo__count {
    background: rgba(255, 255, 255, 0.08);
    color: var(--pm-text);
}


/* ===================================================================
   Banner de ambiente (staging) — base.html
   =================================================================== */
.env-banner {
  position: sticky;
  top: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  border-bottom: 2px solid;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.env-banner--staging {
  background: linear-gradient(90deg, #fde68a 0%, #fcd34d 50%, #fde68a 100%);
  color: #78350f;
  border-bottom-color: #d97706;
}

.env-banner__icon {
  font-size: 1.05rem;
  line-height: 1;
}

.env-banner__text strong {
  letter-spacing: 0.05em;
  font-weight: 700;
}

.env-banner__text a {
  color: #78350f;
  text-decoration: underline;
  font-weight: 700;
}

.env-banner__text a:hover {
  color: #451a03;
}

/* Acentuar visualmente todo el body cuando es staging
   (borde superior naranja-amarillo más intenso) */
body.env-staging {
  border-top: 4px solid #d97706;
}

@media (max-width: 640px) {
  .env-banner {
    padding: 6px 10px;
    font-size: 0.75rem;
    gap: 8px;
  }
}

/* =====================================================================
   Estado del sistema  (core/templates/core/estado_sistema.html)
   ---------------------------------------------------------------------
   Componentes específicos de la pantalla de diagnóstico:
   - sys-health-banner   → banner global verde/amarillo/rojo
   - sys-alert-center    → centro de alertas activas
   - sys-component-card  → tarjetas de DB/Broker/Sync con dot indicator
   - sys-detail-card     → borde lateral según estado
   - sys-row--*          → filas resaltadas en tablas según severidad
   - sys-alert-strip     → alerts inline con icono prominente
   - sys-error-link      → botón clickeable para mostrar error completo
   ===================================================================== */

.sys-status-page {
  gap: 1.25rem;
}

/* ─── 1. Banner global ────────────────────────────────────────────── */
.sys-health-banner {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 26px;
  border-radius: var(--pm-radius-lg);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  box-shadow: var(--pm-shadow-md);
}

.sys-health-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.55), transparent 55%),
    radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.35), transparent 60%);
}

.sys-health-banner__icon {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.sys-health-banner__icon i,
.sys-health-banner__icon svg {
  width: 32px;
  height: 32px;
}

.sys-health-banner__body {
  position: relative;
  z-index: 1;
  flex-grow: 1;
  min-width: 0;
}

.sys-health-banner__eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 4px;
}

.sys-health-banner__title {
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.sys-health-banner__text {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.85;
}

.sys-health-banner__meta {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  text-align: right;
}

.sys-health-banner__time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

.sys-health-banner__time i,
.sys-health-banner__time svg {
  width: 14px;
  height: 14px;
}

.sys-health-banner--ok {
  color: #0f5132;
  background: linear-gradient(135deg, #d9f5e3 0%, #f5fcf8 100%);
  border-color: #b8e3c6;
}
.sys-health-banner--ok .sys-health-banner__icon { color: #157347; }

.sys-health-banner--warning {
  color: #6f4914;
  background: linear-gradient(135deg, #ffe9c0 0%, #fff7e4 100%);
  border-color: #f1d49a;
}
.sys-health-banner--warning .sys-health-banner__icon { color: #b7791f; }
.sys-health-banner--warning .sys-health-banner__icon {
  animation: sys-pulse-warning 2.4s ease-in-out infinite;
}

.sys-health-banner--critical {
  color: #7a1313;
  background: linear-gradient(135deg, #fbcfcf 0%, #fff0f0 100%);
  border-color: #f3a6a6;
}
.sys-health-banner--critical .sys-health-banner__icon { color: #b42318; }
.sys-health-banner--critical .sys-health-banner__icon {
  animation: sys-pulse-critical 1.6s ease-in-out infinite;
}

/* Estados sin señal de salud (no corrió / en curso): nunca verde. */
.sys-health-banner--neutral {
  color: var(--pm-text-soft);
  background: linear-gradient(135deg, #e9eef5 0%, #f7fafc 100%);
  border-color: #d5dfeb;
}
.sys-health-banner--neutral .sys-health-banner__icon { color: #64748b; }

@keyframes sys-pulse-warning {
  0%, 100% { box-shadow: 0 6px 18px rgba(183, 121, 31, 0.18); }
  50%      { box-shadow: 0 6px 24px rgba(183, 121, 31, 0.45); }
}
@keyframes sys-pulse-critical {
  0%, 100% { box-shadow: 0 6px 18px rgba(180, 35, 24, 0.20); }
  50%      { box-shadow: 0 6px 28px rgba(180, 35, 24, 0.55); }
}

/* ─── 2. Centro de alertas ────────────────────────────────────────── */
.sys-alert-center {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-lg);
  box-shadow: var(--pm-shadow-sm);
  padding: 20px 22px;
}

.sys-alert-center__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.sys-alert-center__title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sys-alert-center__icon {
  width: 22px;
  height: 22px;
  color: var(--pm-warning);
}

.sys-alert-center__title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--pm-text);
  margin: 0;
}

.sys-alert-center__sub {
  font-size: 0.85rem;
  color: var(--pm-text-muted);
}

.sys-alert-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sys-alert {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--pm-radius-md);
  border: 1px solid var(--pm-border);
  background: #ffffff;
  box-shadow: var(--pm-shadow-sm);
  transition: transform 0.15s var(--pm-ease-premium), box-shadow 0.15s var(--pm-ease-premium);
}
.sys-alert:hover {
  transform: translateY(-1px);
  box-shadow: var(--pm-shadow-md);
}

.sys-alert__bullet {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
}
.sys-alert__bullet i,
.sys-alert__bullet svg { width: 20px; height: 20px; }

.sys-alert__body {
  flex-grow: 1;
  min-width: 0;
}

.sys-alert__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  color: var(--pm-text);
}

.sys-alert__heading strong {
  font-size: 0.98rem;
  font-weight: 700;
}

.sys-alert__sub {
  font-size: 0.82rem;
  color: var(--pm-text-muted);
  font-weight: 500;
}

.sys-alert__chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}

.sys-alert__chip--critical {
  background: #b42318;
  color: #ffffff;
}
.sys-alert__chip--warning {
  background: #b7791f;
  color: #ffffff;
}

.sys-alert__text {
  font-size: 0.9rem;
  color: var(--pm-text-soft);
  margin: 0;
  line-height: 1.45;
}

.sys-alert__detail {
  display: block;
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(15, 23, 42, 0.04);
  border-radius: 8px;
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.78rem;
  color: var(--pm-text);
  word-break: break-word;
}

.sys-alert__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pm-primary);
  text-decoration: none;
}
.sys-alert__action:hover {
  color: var(--pm-primary-strong);
  text-decoration: underline;
}
.sys-alert__action i,
.sys-alert__action svg { width: 14px; height: 14px; }

.sys-alert--critical {
  background: linear-gradient(180deg, #fff5f5 0%, #ffffff 100%);
  border-color: #f3c2c2;
}
.sys-alert--critical .sys-alert__bullet {
  background: #fdecec;
  color: #b42318;
}

.sys-alert--warning {
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
  border-color: #f1d49a;
}
.sys-alert--warning .sys-alert__bullet {
  background: #fff4dd;
  color: #b7791f;
}

/* ─── 3. Tarjetas de componente (DB / Broker / Sync) ──────────────── */
.sys-cards-row .sys-component-card {
  position: relative;
  /* Sin side-stripe border: el estado se comunica via tinted background
     y via el .sys-dot pulsante. DESIGN.md "Don't side-stripe borders". */
  transition: transform 0.22s var(--pm-ease-premium), box-shadow 0.22s var(--pm-ease-premium);
}

.sys-cards-row .sys-component-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--pm-shadow-md);
}

.sys-component-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.sys-component-card__hint {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--pm-text-muted);
  font-weight: 500;
}

.sys-component-card__denom {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--pm-text-muted);
}

/* Estado de cada componente: tinted background. El sys-dot color y
   pulse comunican el estado de forma activa. */
.sys-component-card--ok {
  background: linear-gradient(180deg, rgba(21, 115, 71, 0.04) 0%, var(--pm-surface) 100%);
}
.sys-component-card--danger {
  background: linear-gradient(180deg, rgba(180, 35, 24, 0.06) 0%, var(--pm-surface) 100%);
  border-color: rgba(180, 35, 24, 0.18);
}
.sys-component-card--warning {
  background: linear-gradient(180deg, rgba(183, 121, 31, 0.05) 0%, var(--pm-surface) 100%);
  border-color: rgba(183, 121, 31, 0.18);
}
.sys-component-card--info {
  background: linear-gradient(180deg, rgba(11, 58, 111, 0.04) 0%, var(--pm-surface) 100%);
}

/* dot indicator */
.sys-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.sys-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  opacity: 0;
}
.sys-dot--ok {
  background: var(--pm-success);
  box-shadow: 0 0 0 3px rgba(21, 115, 71, 0.18);
}
.sys-dot--info {
  background: var(--pm-primary);
  box-shadow: 0 0 0 3px rgba(11, 58, 111, 0.18);
}
.sys-dot--warning {
  background: var(--pm-warning);
  box-shadow: 0 0 0 3px rgba(183, 121, 31, 0.20);
  animation: sys-dot-pulse-warn 2s ease-in-out infinite;
}
.sys-dot--danger {
  background: var(--pm-danger);
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.20);
  animation: sys-dot-pulse-danger 1.2s ease-in-out infinite;
}

@keyframes sys-dot-pulse-warn {
  0%, 100% { box-shadow: 0 0 0 3px rgba(183, 121, 31, 0.20); }
  50%      { box-shadow: 0 0 0 7px rgba(183, 121, 31, 0.08); }
}
@keyframes sys-dot-pulse-danger {
  0%, 100% { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.20); }
  50%      { box-shadow: 0 0 0 8px rgba(180, 35, 24, 0.05); }
}

/* ─── 4. Detail cards (DB y Broker en grande) ─────────────────────── */
.sys-detail-card {
  border-top: 3px solid transparent;
}
.sys-detail-card--ok     { border-top-color: var(--pm-success); }
.sys-detail-card--danger { border-top-color: var(--pm-danger); }

/* ─── 5. Filas resaltadas en tablas ───────────────────────────────── */
/* Estado de fila: solo tinted background. Sin side-stripe border. */
.sys-table tbody .sys-row {
  transition: background-color 0.15s var(--pm-ease-premium);
}

.sys-table tbody .sys-row--success,
.sys-table tbody .sys-row--ok {
  /* fila OK: sin tinte, fila neutra */
}

.sys-table tbody .sys-row--warning {
  background-color: rgba(183, 121, 31, 0.07);
}
.sys-table tbody .sys-row--warning:hover {
  background-color: rgba(183, 121, 31, 0.12);
}

.sys-table tbody .sys-row--danger {
  background-color: rgba(180, 35, 24, 0.07);
}
.sys-table tbody .sys-row--danger:hover {
  background-color: rgba(180, 35, 24, 0.13);
}

.sys-table tbody .sys-row--info,
.sys-table tbody .sys-row--neutral {
  /* neutral / info → sin tinte */
}

.sys-empty {
  color: var(--pm-text-muted);
}

/* ─── Píldora de frescura del auto-refresh ────────────────────────── */
.sys-refresh-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--pm-border);
  background: var(--pm-surface-soft);
  color: var(--pm-text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sys-refresh-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pm-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-success) 18%, transparent);
  transition: background 220ms ease, box-shadow 220ms ease;
}
.sys-refresh-pill.is-stale {
  border-color: color-mix(in srgb, var(--pm-warning) 42%, var(--pm-border));
  color: var(--pm-warning);
}
.sys-refresh-pill.is-stale .sys-refresh-pill__dot {
  background: var(--pm-warning);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-warning) 20%, transparent);
}

/* ─── Tarjeta de costo de mantenimiento ───────────────────────────── */
.sys-cost-card {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 26px;
  padding: 24px 28px;
  border-radius: var(--pm-radius-lg);
  border: 1px solid var(--pm-border);
  border-left: 4px solid var(--pm-primary);
  background: var(--pm-surface);
  box-shadow: var(--pm-shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 220ms ease;
}
.sys-cost-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pm-shadow-md);
  color: inherit;
  text-decoration: none;
}
.sys-cost-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-primary) 34%, transparent);
}
.sys-cost-card--warning { border-left-color: var(--pm-warning); }
.sys-cost-card--danger  { border-left-color: var(--pm-danger); }

.sys-cost-card__main { min-width: 0; }
.sys-cost-card__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pm-primary);
}
.sys-cost-card__label i,
.sys-cost-card__label svg { width: 14px; height: 14px; }

.sys-cost-card__figure {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 8px;
}
.sys-cost-card__amount {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--pm-text);
  line-height: 1.05;
}
.sys-cost-card__period {
  font-size: 0.82rem;
  color: var(--pm-text-muted);
}
.sys-cost-card__delta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
}
.sys-cost-card__vs {
  font-size: 0.78rem;
  color: var(--pm-text-soft);
}

.sys-cost-trend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sys-cost-trend i,
.sys-cost-trend svg { width: 13px; height: 13px; }
.sys-cost-trend--down {
  color: var(--pm-success);
  background: color-mix(in srgb, var(--pm-success) 12%, transparent);
}
.sys-cost-trend--up {
  color: var(--pm-danger);
  background: color-mix(in srgb, var(--pm-danger) 12%, transparent);
}
.sys-cost-trend--flat {
  color: var(--pm-text-muted);
  background: color-mix(in srgb, var(--pm-text-muted) 12%, transparent);
}

.sys-cost-card__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  min-width: 210px;
  max-width: 340px;
  text-align: right;
}
.sys-cost-card__note {
  font-size: 0.72rem;
  color: var(--pm-text-muted);
  line-height: 1.5;
}
.sys-cost-card__note--empty { max-width: 320px; }
.sys-cost-card__note code {
  font-size: 0.94em;
  color: var(--pm-text-soft);
}
.sys-cost-card__annual {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pm-text-soft);
  font-variant-numeric: tabular-nums;
}
.sys-cost-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--pm-primary);
}
.sys-cost-card__cta i,
.sys-cost-card__cta svg {
  width: 13px;
  height: 13px;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sys-cost-card:hover .sys-cost-card__cta i,
.sys-cost-card:hover .sys-cost-card__cta svg { transform: translateX(3px); }

/* Sparkline del costo mensual */
.sys-spark {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 52px;
  width: 100%;
  /* Acotado a propósito: sin tope las barras se ensanchan tanto que dejan de
     leerse como una tendencia y parecen bloques sueltos. */
  max-width: 168px;
  min-width: 120px;
  margin-left: auto;
}
.sys-spark__bar {
  flex: 1;
  min-height: 4px;
  border-radius: 3px 3px 1px 1px;
  background: color-mix(in srgb, var(--pm-primary) 26%, transparent);
  transition: background 220ms ease;
}
.sys-spark__bar.is-current {
  background: var(--pm-primary);
}

/* ─── Workers y colas ─────────────────────────────────────────────── */
.sys-block-lead {
  margin: -2px 0 16px;
  font-size: 0.84rem;
  color: var(--pm-text-soft);
  max-width: 78ch;
}

.sys-queue-card {
  height: 100%;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--pm-border);
  border-left: 3px solid var(--pm-border-strong, var(--pm-border));
  background: var(--pm-surface-soft);
}
.sys-queue-card--success { border-left-color: var(--pm-success); }
.sys-queue-card--warning { border-left-color: var(--pm-warning); }
.sys-queue-card--danger  {
  border-left-color: var(--pm-danger);
  background: color-mix(in srgb, var(--pm-danger) 5%, var(--pm-surface-soft));
}

.sys-queue-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.sys-queue-card__name {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--pm-text);
}
.sys-queue-card__desc {
  display: block;
  margin-top: 2px;
  font-size: 0.74rem;
  color: var(--pm-text-muted);
}
.sys-queue-card__stats {
  display: flex;
  gap: 26px;
  margin: 14px 0 10px;
}
.sys-queue-stat__value {
  display: block;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--pm-text);
}
.sys-queue-stat__label {
  font-size: 0.72rem;
  color: var(--pm-text-muted);
}
.sys-queue-card__detail {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--pm-text-soft);
}

.sys-worker-list {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--pm-divider);
}
.sys-worker-list__label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pm-text-muted);
}
.sys-worker-list__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sys-worker-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--pm-border);
  background: var(--pm-surface);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--pm-text-soft);
}
.sys-worker-chip i,
.sys-worker-chip svg { width: 13px; height: 13px; color: var(--pm-primary); }
.sys-worker-chip em {
  font-style: normal;
  font-weight: 500;
  color: var(--pm-text-muted);
}
.sys-worker-chip em::before { content: "· "; }

/* ─── Grilla de métricas (DB / broker) ────────────────────────────── */
.sys-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.sys-metric {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--pm-divider);
  background: var(--pm-surface-soft);
}
.sys-metric--alerta {
  border-color: color-mix(in srgb, var(--pm-warning) 45%, var(--pm-divider));
  background: color-mix(in srgb, var(--pm-warning) 7%, var(--pm-surface-soft));
}
.sys-metric__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pm-text-muted);
}
.sys-metric__value {
  display: block;
  margin-top: 4px;
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--pm-text);
}
.sys-metric__value--sm {
  font-size: 0.86rem;
  font-weight: 600;
  word-break: break-word;
}
.sys-metric__meta {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--pm-text-muted);
}

/* ─── Integraciones externas ──────────────────────────────────────── */
.sys-integracion-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.sys-integracion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--pm-divider);
}
.sys-integracion:last-child { border-bottom: none; }
.sys-integracion__body {
  min-width: 0;
  flex: 1;
}
.sys-integracion__name {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--pm-text);
}
.sys-integracion__detail {
  display: block;
  margin-top: 1px;
  font-size: 0.78rem;
  color: var(--pm-text-soft);
}
.sys-integracion__extra {
  font-size: 0.72rem;
  color: var(--pm-text-muted);
  text-align: right;
  white-space: nowrap;
}

/* ─── Franja de resultados Celery ─────────────────────────────────── */
.sys-celery-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.sys-celery-strip__main {
  display: flex;
  flex-direction: column;
}
.sys-celery-strip__value {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--pm-text);
}
.sys-celery-strip__label {
  font-size: 0.74rem;
  color: var(--pm-text-muted);
}
.sys-celery-strip__bar {
  flex: 1;
  min-width: 180px;
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--pm-divider);
}
.sys-celery-strip__seg--ok   { background: var(--pm-success); }
.sys-celery-strip__seg--fail { background: var(--pm-danger); }
.sys-celery-strip__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.78rem;
  color: var(--pm-text-muted);
  font-variant-numeric: tabular-nums;
}
.sys-celery-strip__legend b { color: var(--pm-text); font-weight: 700; }
.sys-celery-strip__legend .is-ok b   { color: var(--pm-success); }
.sys-celery-strip__legend .is-fail b { color: var(--pm-danger); }

.system-context-card__value--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .sys-cost-card {
    flex-direction: column;
    padding: 20px;
    gap: 18px;
  }
  .sys-cost-card__aside {
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    max-width: none;
    width: 100%;
  }
  .sys-celery-strip { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .sys-cost-card,
  .sys-cost-card__cta i,
  .sys-cost-card__cta svg,
  .sys-refresh-pill__dot {
    transition: none;
  }
  .sys-cost-card:hover { transform: none; }
}

/* =====================================================================
   Flujo diario (sg/templates/sg/flujo_diario.html)
   ---------------------------------------------------------------------
   - sys-filter-card     → tarjeta de filtros arriba
   - flujo-tally         → mini-tally por fase en la tabla histórica
   - flujo-day-row       → fila clickeable que expande detalle
   - flujo-detail        → bloque expandido con tabla por aseguradora
   - flujo-weekday       → "lun" / "mar" en gris al lado de la fecha
   ===================================================================== */

.sys-filter-card {
  padding: 14px 18px;
}

.flujo-weekday {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--pm-text-muted);
  text-transform: lowercase;
}

.flujo-today-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pm-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 2px;
}

/* ─── Tally compacto por fase ─── */
.flujo-tally {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.flujo-tally__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}
.flujo-tally__item i,
.flujo-tally__item svg {
  width: 13px;
  height: 13px;
}

.flujo-tally__item--ok {
  background: #e9f8ef;
  color: #0f5132;
  border: 1px solid #b8e3c6;
}
.flujo-tally__item--warn {
  background: #fff4dd;
  color: #8a5a12;
  border: 1px solid #f1d49a;
}
.flujo-tally__item--err {
  background: #fdecec;
  color: #a61b1b;
  border: 1px solid #f3c2c2;
}
.flujo-tally__item--running {
  background: #edf4ff;
  color: var(--pm-primary);
  border: 1px solid #cfe0ff;
}
.flujo-tally__item--none {
  background: #f5f8fb;
  color: var(--pm-text-muted);
  border: 1px solid #dce5ef;
}

/* ─── Fila clickeable del histórico ─── */
.flujo-day-row {
  cursor: pointer;
  transition: background-color 0.15s var(--pm-ease-premium);
}
.flujo-day-row:hover {
  background-color: rgba(11, 58, 111, 0.03);
}
.flujo-day-row--inactive {
  opacity: 0.7;
  cursor: default;
}
.flujo-day-row--inactive:hover {
  background-color: transparent;
}
.flujo-day-row--expanded {
  background-color: rgba(11, 58, 111, 0.04) !important;
}
.flujo-day-row--expanded .flujo-detail-toggle i {
  transform: rotate(180deg);
}

.flujo-detail-toggle i,
.flujo-detail-toggle svg {
  transition: transform 0.2s var(--pm-ease-premium);
  width: 16px;
  height: 16px;
}

/* ─── Detail row ─── */
.flujo-detail-row > .flujo-detail-cell {
  padding: 0;
  background: rgba(11, 58, 111, 0.025);
  border-top: none;
}

.flujo-detail {
  padding: 18px 22px;
}

.flujo-detail__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.flujo-detail__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
  color: var(--pm-text);
}
.flujo-detail__title i,
.flujo-detail__title svg {
  width: 18px;
  height: 18px;
  color: var(--pm-primary);
}

.flujo-detail__table {
  background: #ffffff;
  border-radius: var(--pm-radius-md);
  overflow: hidden;
  border: 1px solid var(--pm-border);
}

/* ─── Celdas por fase en el detalle ─── */
.flujo-fase-cell {
  vertical-align: top;
  min-width: 220px;
}

.flujo-fase-cell__meta {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--pm-text-soft);
}

.flujo-fase-cell__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(180, 35, 24, 0.06);
  color: var(--pm-danger);
  font-size: 0.82rem;
}
.flujo-fase-cell__error i,
.flujo-fase-cell__error svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

.flujo-fase-cell__topErrors {
  margin-top: 8px;
}

.flujo-error-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin-right: 4px;
  margin-bottom: 4px;
  border-radius: 6px;
  background: rgba(180, 35, 24, 0.08);
  color: #7a1313;
  font-size: 0.78rem;
}
.flujo-error-chip code {
  background: transparent;
  color: inherit;
  font-weight: 700;
}

/* Desglose del download: descargadas / con error / pendientes / ya en local */
.flujo-desglose {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.flujo-desglose__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.flujo-desglose__item i,
.flujo-desglose__item svg {
  width: 12px;
  height: 12px;
}
.flujo-desglose__item--ok {
  background: #e9f8ef;
  color: #0f5132;
  border-color: #b8e3c6;
}
.flujo-desglose__item--err {
  background: #fdecec;
  color: #a61b1b;
  border-color: #f3c2c2;
}
.flujo-desglose__item--warn {
  background: #fff4dd;
  color: #8a5a12;
  border-color: #f1d49a;
}
.flujo-desglose__item--muted {
  background: #f5f8fb;
  color: var(--pm-text-muted);
  border-color: #dce5ef;
}

/* Breakdown de errores por categoría (portal vs nuestro) */
.flujo-error-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}
.flujo-error-breakdown__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pm-text-muted);
  margin-right: 2px;
}
.flujo-error-breakdown__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.flujo-error-breakdown__item i,
.flujo-error-breakdown__item svg {
  width: 12px;
  height: 12px;
}
.flujo-error-breakdown__item--portal {
  background: #fff4dd;
  color: #8a5a12;
  border-color: #f1d49a;
}
.flujo-error-breakdown__item--our {
  background: #fdecec;
  color: #a61b1b;
  border-color: #f3c2c2;
}

/* Aviso "es del portal" cuando TODOS los errores son del portal */
.flujo-fase-cell__note--portal {
  background: rgba(183, 121, 31, 0.08);
  border: 1px solid rgba(183, 121, 31, 0.25);
}
.flujo-fase-cell__note--portal i,
.flujo-fase-cell__note--portal svg {
  color: #b7791f;
}

[data-theme="dark"] .flujo-error-breakdown__item--portal {
  background: rgba(183, 121, 31, 0.18);
  color: #f0c269;
  border-color: rgba(183, 121, 31, 0.40);
}
[data-theme="dark"] .flujo-error-breakdown__item--our {
  background: rgba(180, 35, 24, 0.18);
  color: #ff9b9b;
  border-color: rgba(180, 35, 24, 0.40);
}
[data-theme="dark"] .flujo-fase-cell__note--portal {
  background: rgba(183, 121, 31, 0.14);
  border-color: rgba(183, 121, 31, 0.35);
}
[data-theme="dark"] .flujo-fase-cell__note--portal i,
[data-theme="dark"] .flujo-fase-cell__note--portal svg {
  color: #f0c269;
}

.flujo-failures-link {
  font-size: 0.8rem;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.flujo-failures-link i,
.flujo-failures-link svg {
  width: 14px;
  height: 14px;
}

[data-theme="dark"] .flujo-desglose__item--ok {
  background: rgba(21, 115, 71, 0.18);
  color: #6bd49b;
  border-color: rgba(21, 115, 71, 0.40);
}
[data-theme="dark"] .flujo-desglose__item--err {
  background: rgba(180, 35, 24, 0.18);
  color: #ff9b9b;
  border-color: rgba(180, 35, 24, 0.40);
}
[data-theme="dark"] .flujo-desglose__item--warn {
  background: rgba(183, 121, 31, 0.18);
  color: #f0c269;
  border-color: rgba(183, 121, 31, 0.40);
}
[data-theme="dark"] .flujo-desglose__item--muted {
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
  border-color: rgba(255, 255, 255, 0.08);
}

/* Nota informativa arriba del detalle */
.flujo-detail__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: var(--pm-radius-md);
  background: rgba(11, 58, 111, 0.05);
  border: 1px solid rgba(11, 58, 111, 0.12);
  color: var(--pm-text-soft);
  font-size: 0.85rem;
  line-height: 1.45;
}
.flujo-detail__note-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--pm-primary);
}

/* Nota chica adentro de una celda de fase */
.flujo-fase-cell__note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(11, 58, 111, 0.04);
  color: var(--pm-text-soft);
  font-size: 0.78rem;
}
.flujo-fase-cell__note i,
.flujo-fase-cell__note svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--pm-primary);
}

/* Bloque "Lotes cargados a BD este día" al final del detalle */
.flujo-lotes-resumen {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--pm-border);
}
.flujo-lotes-resumen__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 12px 0;
  color: var(--pm-text);
}
.flujo-lotes-resumen__title i,
.flujo-lotes-resumen__title svg {
  width: 18px;
  height: 18px;
  color: var(--pm-primary);
}
.flujo-lotes-resumen__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.flujo-lotes-resumen__card {
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-md);
}
.flujo-lotes-resumen__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.flujo-lotes-resumen__shared {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(11, 58, 111, 0.08);
  color: var(--pm-primary);
}
.flujo-lotes-resumen__meta {
  font-size: 0.85rem;
  color: var(--pm-text-soft);
}

[data-theme="dark"] .flujo-detail__note {
  background: rgba(126, 182, 255, 0.06);
  border-color: rgba(126, 182, 255, 0.18);
  color: #b3c0d0;
}
[data-theme="dark"] .flujo-detail__note-icon {
  color: #7eb6ff;
}
[data-theme="dark"] .flujo-fase-cell__note {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .flujo-lotes-resumen__card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .flujo-lotes-resumen__shared {
  background: rgba(126, 182, 255, 0.12);
  color: #b8d4ff;
}

.flujo-lote-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pm-primary);
  text-decoration: none;
}
.flujo-lote-link:hover {
  color: var(--pm-primary-strong);
  text-decoration: underline;
}

/* ─── Counts inline ─── */
.flujo-counts {
  font-size: 0.85rem;
  color: var(--pm-text-soft);
}
.flujo-counts__icon {
  display: inline-block;
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 2px;
  color: var(--pm-text-muted);
}

/* Banner para "Hoy" en flujo diario - ajustes mínimos */
.flujo-today-banner .sys-health-banner__title {
  font-size: 1.55rem;
}

/* ─── Dark mode ─── */
[data-theme="dark"] .flujo-day-row:hover {
  background-color: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .flujo-day-row--expanded {
  background-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .flujo-detail-row > .flujo-detail-cell {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme="dark"] .flujo-detail__table {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .flujo-tally__item--ok {
  background: rgba(21, 115, 71, 0.20);
  color: #6bd49b;
  border-color: rgba(21, 115, 71, 0.45);
}
[data-theme="dark"] .flujo-tally__item--warn {
  background: rgba(183, 121, 31, 0.20);
  color: #f0c269;
  border-color: rgba(183, 121, 31, 0.45);
}
[data-theme="dark"] .flujo-tally__item--err {
  background: rgba(180, 35, 24, 0.20);
  color: #ff9b9b;
  border-color: rgba(180, 35, 24, 0.45);
}
[data-theme="dark"] .flujo-tally__item--running {
  background: rgba(126, 182, 255, 0.15);
  color: #b8d4ff;
  border-color: rgba(126, 182, 255, 0.35);
}
[data-theme="dark"] .flujo-tally__item--none {
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .flujo-fase-cell__error {
  background: rgba(180, 35, 24, 0.14);
  color: #ff9b9b;
}
[data-theme="dark"] .flujo-error-chip {
  background: rgba(180, 35, 24, 0.18);
  color: #ff9b9b;
}

/* Icono de ayuda en cabeceras de tabla */
.sys-th-help {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 4px;
  vertical-align: -2px;
  color: var(--pm-text-muted);
  cursor: help;
  opacity: 0.7;
  transition: opacity 0.15s var(--pm-ease-premium);
}
.sys-th-help:hover { opacity: 1; color: var(--pm-primary); }

/* ─── 6. Alert strip (versión mejorada de Bootstrap alert) ────────── */
.sys-alert-strip {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-radius: var(--pm-radius-md);
}

.sys-alert-strip__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}

/* ─── 7. Error link (tooltip-able) ────────────────────────────────── */
.sys-error-link {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.85rem;
  color: var(--pm-danger);
  text-align: left;
  text-decoration: underline dotted;
  cursor: help;
  max-width: 280px;
  display: inline-block;
  white-space: normal;
  word-break: break-word;
}
.sys-error-link:hover {
  color: #7a1313;
}

/* ─── 8. Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sys-health-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
  }
  .sys-health-banner__meta {
    width: 100%;
    text-align: left;
  }
  .sys-alert {
    flex-direction: column;
  }
  .sys-alert__bullet {
    width: 32px;
    height: 32px;
  }
}

/* ─── 9. Dark mode ────────────────────────────────────────────────── */
[data-theme="dark"] .sys-health-banner--ok {
  color: #b8f0d0;
  background: linear-gradient(135deg, rgba(21, 115, 71, 0.30) 0%, rgba(21, 115, 71, 0.12) 100%);
  border-color: rgba(21, 115, 71, 0.55);
}
[data-theme="dark"] .sys-health-banner--ok .sys-health-banner__icon { color: #6bd49b; }

[data-theme="dark"] .sys-health-banner--warning {
  color: #ffd99e;
  background: linear-gradient(135deg, rgba(183, 121, 31, 0.30) 0%, rgba(183, 121, 31, 0.12) 100%);
  border-color: rgba(183, 121, 31, 0.55);
}
[data-theme="dark"] .sys-health-banner--warning .sys-health-banner__icon { color: #f0c269; }

[data-theme="dark"] .sys-health-banner--critical {
  color: #ffcfcf;
  background: linear-gradient(135deg, rgba(180, 35, 24, 0.32) 0%, rgba(180, 35, 24, 0.12) 100%);
  border-color: rgba(180, 35, 24, 0.55);
}
[data-theme="dark"] .sys-health-banner--critical .sys-health-banner__icon { color: #ff8a8a; }

[data-theme="dark"] .sys-health-banner--neutral {
  color: #b6c2d4;
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.18) 0%, rgba(148, 163, 184, 0.07) 100%);
  border-color: rgba(148, 163, 184, 0.40);
}
[data-theme="dark"] .sys-health-banner--neutral .sys-health-banner__icon { color: #9fb0c5; }

[data-theme="dark"] .sys-health-banner::before {
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.06), transparent 55%),
    radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.04), transparent 60%);
}
[data-theme="dark"] .sys-health-banner__icon {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30);
}
[data-theme="dark"] .sys-health-banner__time {
  background: rgba(255, 255, 255, 0.10);
  color: inherit;
}

[data-theme="dark"] .sys-alert-center {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .sys-alert-center__title { color: #e5ecf3; }
[data-theme="dark"] .sys-alert-center__sub { color: #94a3b8; }

[data-theme="dark"] .sys-alert {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme="dark"] .sys-alert__heading { color: #e5ecf3; }
[data-theme="dark"] .sys-alert__text { color: #b3c0d0; }
[data-theme="dark"] .sys-alert__sub { color: #94a3b8; }
[data-theme="dark"] .sys-alert__detail {
  background: rgba(255, 255, 255, 0.06);
  color: #e5ecf3;
}

[data-theme="dark"] .sys-alert--critical {
  background: linear-gradient(180deg, rgba(180, 35, 24, 0.16) 0%, rgba(180, 35, 24, 0.04) 100%);
  border-color: rgba(180, 35, 24, 0.45);
  border-left-color: #ff7a7a;
}
[data-theme="dark"] .sys-alert--critical .sys-alert__bullet {
  background: rgba(180, 35, 24, 0.25);
  color: #ff9b9b;
}
[data-theme="dark"] .sys-alert--warning {
  background: linear-gradient(180deg, rgba(183, 121, 31, 0.18) 0%, rgba(183, 121, 31, 0.04) 100%);
  border-color: rgba(183, 121, 31, 0.45);
  border-left-color: #f0c269;
}
[data-theme="dark"] .sys-alert--warning .sys-alert__bullet {
  background: rgba(183, 121, 31, 0.25);
  color: #f0c269;
}

[data-theme="dark"] .sys-alert__action {
  color: #7eb6ff;
}
[data-theme="dark"] .sys-alert__action:hover {
  color: #b8d4ff;
}

[data-theme="dark"] .sys-table tbody .sys-row--warning {
  background-color: rgba(183, 121, 31, 0.10);
}
[data-theme="dark"] .sys-table tbody .sys-row--warning:hover {
  background-color: rgba(183, 121, 31, 0.16);
}
[data-theme="dark"] .sys-table tbody .sys-row--danger {
  background-color: rgba(180, 35, 24, 0.12);
}
[data-theme="dark"] .sys-table tbody .sys-row--danger:hover {
  background-color: rgba(180, 35, 24, 0.18);
}

[data-theme="dark"] .sys-error-link {
  color: #ff9b9b;
}
[data-theme="dark"] .sys-error-link:hover {
  color: #ffcfcf;
}

/* ============================================================
   Iconos Lucide — stroke mas fino para sensacion premium
   Default de Lucide es stroke-width: 2. Bajar a 1.75 da un look
   editorial moderno (Linear, Vercel, Stripe usan esa medida).
   ============================================================ */
svg.lucide {
    stroke-width: 1.75;
}

/* ============================================================
   Cards entrando en cascada (Fase 6)
   Cuando carga una pantalla, las metric-cards y quick-action-cards
   aparecen secuenciadas con 60ms de delay entre cada una. Fade-in
   + slide-up de 8px con curva premium. backwards keyframe = el estado
   inicial (opacity:0) se aplica antes del animation-delay para evitar
   flicker. Maximo 8 cards animadas (despues entran sin delay).
   ============================================================ */
@keyframes pm-card-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.row > * > .quick-action-card,
.row > * > .metric-card,
.row > * > .sys-component-card,
.row > * > .surface-card {
    animation: pm-card-enter 320ms var(--pm-ease-premium) backwards;
}

.row > *:nth-child(1) > .quick-action-card,
.row > *:nth-child(1) > .metric-card,
.row > *:nth-child(1) > .sys-component-card,
.row > *:nth-child(1) > .surface-card { animation-delay: 20ms; }

.row > *:nth-child(2) > .quick-action-card,
.row > *:nth-child(2) > .metric-card,
.row > *:nth-child(2) > .sys-component-card,
.row > *:nth-child(2) > .surface-card { animation-delay: 80ms; }

.row > *:nth-child(3) > .quick-action-card,
.row > *:nth-child(3) > .metric-card,
.row > *:nth-child(3) > .sys-component-card,
.row > *:nth-child(3) > .surface-card { animation-delay: 140ms; }

.row > *:nth-child(4) > .quick-action-card,
.row > *:nth-child(4) > .metric-card,
.row > *:nth-child(4) > .sys-component-card,
.row > *:nth-child(4) > .surface-card { animation-delay: 200ms; }

.row > *:nth-child(5) > .quick-action-card,
.row > *:nth-child(5) > .metric-card,
.row > *:nth-child(5) > .sys-component-card,
.row > *:nth-child(5) > .surface-card { animation-delay: 260ms; }

.row > *:nth-child(6) > .quick-action-card,
.row > *:nth-child(6) > .metric-card,
.row > *:nth-child(6) > .sys-component-card,
.row > *:nth-child(6) > .surface-card { animation-delay: 320ms; }

.row > *:nth-child(7) > .quick-action-card,
.row > *:nth-child(7) > .metric-card { animation-delay: 380ms; }

.row > *:nth-child(8) > .quick-action-card,
.row > *:nth-child(8) > .metric-card { animation-delay: 440ms; }

/* Page header tambien entra con fade sutil (sin cascada) */
.page-header {
    animation: pm-page-header-enter 360ms var(--pm-ease-premium) backwards;
}

@keyframes pm-page-header-enter {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   Preview inline del lote de mails ART (Mejora #8)
   Aparece debajo del form de enviar_mails cuando hay fecha + hoja
   seleccionados. Hace fetch al endpoint y muestra los KPIs.
   ============================================================ */
.preview-lote {
    padding: 12px 14px;
    background: var(--pm-primary-soft);
    border: 1px solid rgba(11, 58, 111, 0.12);
    border-radius: var(--pm-radius-sm);
    font-size: 0.88rem;
}

.preview-lote__loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--pm-text-soft);
}

.preview-lote__spin {
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.preview-lote__error {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--pm-danger);
}

.preview-lote__error i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.preview-lote__header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--pm-primary);
    font-size: 0.85rem;
    margin-bottom: 10px;
}

.preview-lote__header i {
    width: 16px;
    height: 16px;
}

.preview-lote__hint {
    color: var(--pm-text-soft);
    font-weight: 400;
}

.preview-lote__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
}

.preview-lote__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: var(--pm-surface);
    border-radius: var(--pm-radius-sm);
}

.preview-lote__stat--deuda {
    background: linear-gradient(180deg, var(--pm-surface) 0%, rgba(180, 35, 24, 0.04) 100%);
}

.preview-lote__stat--intimables {
    background: linear-gradient(180deg, var(--pm-surface) 0%, rgba(183, 121, 31, 0.06) 100%);
}

.preview-lote__num {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pm-text);
    font-variant-numeric: tabular-nums lining-nums;
    line-height: 1.15;
}

.preview-lote__stat--deuda .preview-lote__num { color: var(--pm-danger); }
.preview-lote__stat--intimables .preview-lote__num { color: var(--pm-warning); }

.preview-lote__label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pm-text-muted);
}

/* ============================================================
   Trigger del Command Palette (boton search del topbar)
   ============================================================ */
.pm-cmdk-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 6px 10px;
}

.pm-cmdk-trigger i {
    width: 14px;
    height: 14px;
}

.pm-cmdk-kbd {
    margin-left: 8px;
    padding: 1px 6px;
    background: var(--pm-surface-soft);
    border: 1px solid var(--pm-border);
    border-radius: 4px;
    color: var(--pm-text-muted);
    font-size: 0.66rem;
    font-weight: 600;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    line-height: 1.4;
}

/* ============================================================
   Metric card HERO (Deuda actual en consulta detalle ART)
   Doble ancho, valor mas grande, jerarquia visual clara.
   ============================================================ */
.metric-card--hero .metric-card__value {
    font-size: 2.4rem;
    line-height: 1.05;
    margin-top: 4px;
    letter-spacing: -0.02em;
}

.metric-card--hero .metric-card__meta {
    font-size: 0.92rem;
    margin-top: 8px;
}

/* ============================================================
   Empty state como CTA (vs empty state pasivo)
   ============================================================ */
.empty-state--cta {
    background: linear-gradient(180deg, var(--pm-primary-soft) 0%, transparent 100%);
    padding: 32px 24px;
}

.empty-state--cta .empty-state__icon {
    color: var(--pm-primary);
}

.empty-state--cta .empty-state__title {
    color: var(--pm-text);
    font-size: 1.05rem;
    max-width: 480px;
    margin: 0 auto;
}

.empty-state--cta .empty-state__text {
    max-width: 520px;
    margin: 6px auto 0;
    color: var(--pm-text-soft);
}

/* ============================================================
   Botón WhatsApp — color institucional, NO usar .btn-success
   (verde del sistema = "Activo"/"OK", confunde semántica).
   ============================================================ */
.btn-whatsapp {
    background: #25d366;
    border: 1px solid #25d366;
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(37, 211, 102, 0.28);
}

.btn-whatsapp:hover,
.btn-whatsapp:focus {
    background: #1ebe57;
    border-color: #1ebe57;
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 2px 4px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(37, 211, 102, 0.36);
}

.btn-whatsapp:active {
    background: #18a64a;
    border-color: #18a64a;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(24, 166, 74, 0.4);
    transform: translateY(0);
}

/* ============================================================
   Skeleton placeholder para KPIs cargados con JS (Fase E ART)
   Cuando .dash-kpi__value esta vacio (mientras carga el JSON),
   muestra un guion del color muted en vez del "salto visual".
   ============================================================ */
.dash-kpi__value:empty::before {
    content: "—";
    color: var(--pm-text-muted);
    font-weight: 400;
    opacity: 0.5;
}

/* ============================================================
   Page transitions — View Transitions API (Fase 3)
   Habilita transiciones cinematograficas entre paginas (cross-fade
   + slide-up de 8px) usando la View Transitions API nativa del
   navegador. Funciona en Chrome 111+, Safari 18+, Firefox 132+.
   Browsers sin soporte simplemente cargan como antes (graceful
   degradation, sin flicker).

   Curva premium ease-out-quart, 220ms — alineado con DESIGN.md.
   ============================================================ */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: 180ms cubic-bezier(0.16, 1, 0.3, 1) both pm-page-fade-out;
}

::view-transition-new(root) {
    animation: 260ms cubic-bezier(0.16, 1, 0.3, 1) both pm-page-fade-in;
}

@keyframes pm-page-fade-out {
    to {
        opacity: 0;
    }
}

@keyframes pm-page-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

/* ============================================================
   Reduced motion — accessibility fallback
   Usuarios con prefers-reduced-motion activado (motion sickness,
   ADHD, vestibular disorders) reciben transiciones casi instantaneas.
   PRODUCT.md compromete WCAG AA + esta consideracion explicita.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Sin "hundido" al tocar (press state) para reduced-motion */
    .btn:active {
        transform: none !important;
    }

    /* Sin elevación de cards al hover para reduced-motion */
    .metric-card:hover {
        transform: none !important;
    }

    /* El spinner de carga es esencial (indica actividad): sigue girando. */
    .pm-btn-spinner {
        animation-duration: 0.6s !important;
    }

    /* Page transitions tambien se desactivan */
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
}

/* =========================================================================
   SG Operaciones - hero stats + pipeline horizontal + tools list
   (Fase SG-1: reemplaza el grid 3-cards-iguales por jerarquia operativa real)
   ========================================================================= */

.ops-hero {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-lg);
    box-shadow: var(--pm-shadow-sm);
    overflow: hidden;
}

.ops-hero__stat {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border-right: 1px solid var(--pm-border);
    position: relative;
    background: var(--pm-surface);
    transition: background-color 220ms var(--pm-ease-premium);
}

.ops-hero__stat:last-child {
    border-right: none;
}

.ops-hero__stat--alert {
    background: linear-gradient(180deg, var(--pm-surface) 0%, color-mix(in oklch, var(--pm-danger) 5%, var(--pm-surface)) 100%);
}

.ops-hero__stat--alert .ops-hero__num {
    color: var(--pm-danger);
}

.ops-hero__label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--pm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ops-hero__num {
    font-family: var(--pm-font-sans);
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-size: 2rem;
    font-weight: 700;
    color: var(--pm-text);
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.ops-hero__num--time {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--pm-text);
}

.ops-hero__num--muted {
    color: var(--pm-text-muted);
    font-weight: 500;
}

.ops-hero__hint {
    font-size: 0.78rem;
    color: var(--pm-text-muted);
    margin-top: 0.15rem;
}

.ops-hero__hint a {
    color: var(--pm-danger);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ops-hero__hint a:hover {
    color: color-mix(in oklch, var(--pm-danger) 75%, black);
}

/* Variante de 5 columnas (KPIs SG + rechazos abiertos). Las media queries de
   .ops-hero de abajo (992 -> 2 cols, 576 -> 1 col) la sobrescriben en mobile. */
.ops-hero--5 {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 992px) {
    .ops-hero {
        grid-template-columns: repeat(2, 1fr);
    }
    .ops-hero__stat {
        border-right: 1px solid var(--pm-border);
        border-bottom: 1px solid var(--pm-border);
    }
    .ops-hero__stat:nth-child(2n) {
        border-right: none;
    }
    .ops-hero__stat:nth-last-child(-n+2) {
        border-bottom: none;
    }
}

@media (max-width: 576px) {
    .ops-hero {
        grid-template-columns: 1fr;
    }
    .ops-hero__stat {
        border-right: none !important;
        border-bottom: 1px solid var(--pm-border);
    }
    .ops-hero__stat:last-child {
        border-bottom: none;
    }
}

/* Pipeline horizontal Descarga -> Extraccion -> Carga */

.ops-pipeline-panel {
    position: relative;
}

.ops-pipeline {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
    margin-top: 0.5rem;
}

.ops-pipeline__step {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-lg);
    background: var(--pm-surface);
    color: var(--pm-text);
    text-decoration: none;
    box-shadow: var(--pm-shadow-sm);
    transition: transform 220ms var(--pm-ease-premium),
                box-shadow 220ms var(--pm-ease-premium),
                border-color 220ms var(--pm-ease-premium);
    position: relative;
}

.ops-pipeline__step:hover,
.ops-pipeline__step:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--pm-shadow-md);
    border-color: var(--pm-primary);
    color: var(--pm-text);
    text-decoration: none;
}

.ops-pipeline__step-index {
    font-family: var(--pm-font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--pm-primary);
    background: var(--pm-primary-soft);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ops-pipeline__step-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--pm-radius-sm);
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ops-pipeline__step-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.ops-pipeline__step-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.ops-pipeline__step-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--pm-text);
}

.ops-pipeline__step-hint {
    font-size: 0.8rem;
    color: var(--pm-text-muted);
}

.ops-pipeline__connector {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pm-border);
    padding: 0 0.35rem;
}

.ops-pipeline__connector svg {
    width: 1.5rem;
    height: 1.5rem;
}

@media (max-width: 992px) {
    .ops-pipeline {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
    .ops-pipeline__connector {
        transform: rotate(90deg);
        padding: 0.15rem 0;
    }
}

/* Tools list (reemplaza el grid 4 cards iguales del bloque "Apoyo operativo") */

.ops-tools {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.ops-tools__item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    background: var(--pm-surface);
    color: var(--pm-text);
    text-decoration: none;
    transition: background-color 180ms var(--pm-ease-premium),
                border-color 180ms var(--pm-ease-premium);
}

.ops-tools__item:hover,
.ops-tools__item:focus-visible {
    background: var(--pm-surface-elevated, var(--pm-bg));
    border-color: var(--pm-primary);
    color: var(--pm-text);
    text-decoration: none;
}

.ops-tools__icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--pm-radius-sm);
    background: color-mix(in oklch, var(--pm-primary) 8%, var(--pm-surface));
    color: var(--pm-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ops-tools__icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.ops-tools__body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.ops-tools__title {
    font-weight: 600;
    font-size: 0.95rem;
}

.ops-tools__hint {
    font-size: 0.8rem;
    color: var(--pm-text-muted);
}

@media (max-width: 768px) {
    .ops-tools {
        grid-template-columns: 1fr;
    }
}

/* Card destacada (Rechazos) dentro del grid de Gestión */
.ops-tools__item--primary {
    border-color: color-mix(in oklch, var(--pm-primary) 35%, var(--pm-border));
    background: color-mix(in oklch, var(--pm-primary) 5%, var(--pm-surface));
}

.ops-tools__item--primary .ops-tools__icon {
    background: var(--pm-primary);
    color: #fff;
}

/* Bloque "Acciones manuales" colapsable (usa <details class="section-card ops-manual">) */
.ops-manual > .ops-manual__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}

.ops-manual > .ops-manual__summary::-webkit-details-marker {
    display: none;
}

.ops-manual__chevron {
    color: var(--pm-text-muted);
    transition: transform 220ms var(--pm-ease-premium);
    flex-shrink: 0;
}

.ops-manual[open] .ops-manual__chevron {
    transform: rotate(180deg);
}

/* Palanca de priorización del worklist de rechazos (importe <-> antigüedad) */
.rechazo-palanca {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.rechazo-palanca__label {
    font-size: 0.78rem;
    color: var(--pm-text-muted);
    font-weight: 600;
}

.rechazo-palanca__range {
    width: 140px;
}

.rechazo-palanca__value {
    font-size: 0.78rem;
    color: var(--pm-text);
    font-variant-numeric: tabular-nums;
    min-width: 76px;
    text-align: right;
}

/* Timeline de la ficha de rechazo (evolución del caso) */
.rechazo-tl {
    display: flex;
    flex-direction: column;
}

.rechazo-tl__item {
    display: flex;
    gap: 0.75rem;
    padding-bottom: 1rem;
    position: relative;
}

.rechazo-tl__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: 0;
    width: 2px;
    background: var(--pm-border);
}

.rechazo-tl__icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
    z-index: 1;
}

.rechazo-tl__icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

.rechazo-tl__icon--neutral {
    background: #f5f8fb;
    color: var(--pm-text-soft);
}

.rechazo-tl__icon--info {
    background: #edf4ff;
    color: var(--pm-primary);
}

.rechazo-tl__title {
    font-weight: 600;
    font-size: 0.9rem;
}

.rechazo-tl__detalle {
    font-size: 0.85rem;
    color: var(--pm-text);
}

.rechazo-tl__meta {
    font-size: 0.75rem;
    color: var(--pm-text-muted);
    margin-top: 0.1rem;
}

/* Credenciales popover (Descarga polizas - boton "Ver credenciales") */
.creds-popover.popover {
    max-width: 320px;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    box-shadow: var(--pm-shadow-lg);
    background: var(--pm-surface);
}

.creds-popover .popover-header {
    background: var(--pm-bg);
    border-bottom: 1px solid var(--pm-border);
    color: var(--pm-text);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.65rem 0.9rem;
    border-top-left-radius: var(--pm-radius-md);
    border-top-right-radius: var(--pm-radius-md);
}

.creds-popover .popover-body {
    padding: 0.5rem 0.9rem 0.75rem;
    color: var(--pm-text);
    font-size: 0.85rem;
}

.creds-popover__item {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--pm-border);
}

/* Respuesta sin adjunto popover (Emails Automáticos - boton "Respuesta").
   BUG REAL CONFIRMADO 2026-08-07: mismo motivo que .creds-popover -- sin
   clase propia, el header default de Bootstrap queda invisible en esta app
   (tema oscuro tematizado a mano, sin data-bs-theme). */
.respuesta-popover.popover {
    max-width: 360px;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    box-shadow: var(--pm-shadow-lg);
    background: var(--pm-surface);
}

.respuesta-popover .popover-header {
    background: var(--pm-bg);
    border-bottom: 1px solid var(--pm-border);
    color: var(--pm-text);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.65rem 0.9rem;
    border-top-left-radius: var(--pm-radius-md);
    border-top-right-radius: var(--pm-radius-md);
}

.respuesta-popover .popover-body {
    padding: 0.5rem 0.9rem 0.75rem;
    color: var(--pm-text);
    font-size: 0.85rem;
    white-space: pre-wrap;
}

.creds-popover__item:last-of-type {
    border-bottom: none;
}

/* =========================================================================
   Action pair (Fase SG-2 / A5): Carga manual home, dos opciones equivalentes
   pero Linear-style (sin pills decorativas, sin badges internos, sin "stat
   blocks" mal alineados). Cards limpias, mismo ancho, jerarquia tipografica.
   ========================================================================= */

.action-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 0.5rem;
}

.action-pair__card {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.5rem 1.6rem 1.4rem;
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-lg);
    box-shadow: var(--pm-shadow-sm);
    text-decoration: none;
    color: var(--pm-text);
    transition: transform 220ms var(--pm-ease-premium),
                box-shadow 220ms var(--pm-ease-premium),
                border-color 220ms var(--pm-ease-premium);
    position: relative;
}

.action-pair__card:hover,
.action-pair__card:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--pm-shadow-md);
    border-color: var(--pm-primary);
    color: var(--pm-text);
    text-decoration: none;
}

.action-pair__icon {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: var(--pm-radius-md);
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.action-pair__icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

.action-pair__title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
    letter-spacing: -0.005em;
    color: var(--pm-text);
}

.action-pair__text {
    font-size: 0.92rem;
    color: var(--pm-text-muted);
    margin-bottom: 0.85rem;
    line-height: 1.45;
}

.action-pair__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem 1rem;
    margin: 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--pm-border);
}

.action-pair__facts > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.action-pair__facts dt {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--pm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.action-pair__facts dd {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--pm-text);
    margin: 0;
}

.action-pair__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--pm-primary);
    font-size: 0.92rem;
    margin-top: auto;
}

.action-pair__cta svg {
    width: 1rem;
    height: 1rem;
    transition: transform 180ms var(--pm-ease-premium);
}

.action-pair__card:hover .action-pair__cta svg,
.action-pair__card:focus-visible .action-pair__cta svg {
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .action-pair {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   Action asym (Fase SG-2 / A6): Carga masiva home, jerarquia explicita —
   bloque primario grande (col-lg-7 visual), secundario chico al costado.
   ========================================================================= */

.action-asym {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 1.25rem;
    margin-top: 0.5rem;
}

.action-asym__primary {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.75rem 1.85rem 1.6rem;
    background: linear-gradient(170deg,
        color-mix(in oklch, var(--pm-primary) 6%, var(--pm-surface)) 0%,
        var(--pm-surface) 100%);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-lg);
    box-shadow: var(--pm-shadow-sm);
    text-decoration: none;
    color: var(--pm-text);
    transition: transform 220ms var(--pm-ease-premium),
                box-shadow 220ms var(--pm-ease-premium),
                border-color 220ms var(--pm-ease-premium);
    position: relative;
}

.action-asym__primary:hover,
.action-asym__primary:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--pm-shadow-md);
    border-color: var(--pm-primary);
    color: var(--pm-text);
    text-decoration: none;
}

.action-asym__primary-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pm-primary);
}

.action-asym__primary-head {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.action-asym__primary-icon {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: var(--pm-radius-md);
    background: var(--pm-primary);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px -4px color-mix(in oklch, var(--pm-primary) 60%, transparent);
}

.action-asym__primary-icon svg {
    width: 1.7rem;
    height: 1.7rem;
}

.action-asym__primary-title {
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0 0 0.3rem;
    letter-spacing: -0.01em;
    color: var(--pm-text);
}

.action-asym__primary-text {
    font-size: 0.98rem;
    color: var(--pm-text-muted);
    margin: 0;
    line-height: 1.5;
}

.action-asym__facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem 1.4rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--pm-border);
}

.action-asym__facts > div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.action-asym__facts dt {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--pm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.action-asym__facts dd {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--pm-text);
    margin: 0;
}

.action-asym__primary-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: white;
    background: var(--pm-primary);
    font-size: 0.95rem;
    padding: 0.6rem 1.1rem;
    border-radius: var(--pm-radius-sm);
    align-self: flex-start;
    margin-top: auto;
    box-shadow: 0 3px 10px -3px color-mix(in oklch, var(--pm-primary) 50%, transparent);
    transition: background-color 180ms var(--pm-ease-premium),
                transform 180ms var(--pm-ease-premium);
}

.action-asym__primary:hover .action-asym__primary-cta,
.action-asym__primary:focus-visible .action-asym__primary-cta {
    background: color-mix(in oklch, var(--pm-primary) 90%, black);
}

.action-asym__primary-cta svg {
    width: 1rem;
    height: 1rem;
    transition: transform 180ms var(--pm-ease-premium);
}

.action-asym__primary:hover .action-asym__primary-cta svg,
.action-asym__primary:focus-visible .action-asym__primary-cta svg {
    transform: translateX(3px);
}

.action-asym__secondary {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.4rem 1.4rem 1.3rem;
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-lg);
    box-shadow: var(--pm-shadow-sm);
    text-decoration: none;
    color: var(--pm-text);
    transition: transform 220ms var(--pm-ease-premium),
                box-shadow 220ms var(--pm-ease-premium),
                border-color 220ms var(--pm-ease-premium);
}

.action-asym__secondary:hover,
.action-asym__secondary:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--pm-shadow-md);
    border-color: var(--pm-primary);
    color: var(--pm-text);
    text-decoration: none;
}

.action-asym__secondary-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--pm-radius-md);
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.action-asym__secondary-icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.action-asym__secondary-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: var(--pm-text);
    letter-spacing: -0.005em;
}

.action-asym__secondary-text {
    font-size: 0.88rem;
    color: var(--pm-text-muted);
    margin: 0;
    line-height: 1.45;
}

.action-asym__secondary-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--pm-primary);
    font-size: 0.88rem;
    margin-top: auto;
}

.action-asym__secondary-cta svg {
    width: 0.95rem;
    height: 0.95rem;
    transition: transform 180ms var(--pm-ease-premium);
}

.action-asym__secondary:hover .action-asym__secondary-cta svg,
.action-asym__secondary:focus-visible .action-asym__secondary-cta svg {
    transform: translateX(3px);
}

@media (max-width: 992px) {
    .action-asym {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   Flujo diario v2 (Fase SG-4 / A8 + B14 + C28):
   - dot semaforo grande al inicio (lectura at-a-glance)
   - sin tinte de fondo en filas (evita ilusion de stripe horizontal)
   - separador sticky de semana iso (lunes a domingo)
   ========================================================================= */

/* Override: en la tabla v2 no aplica el tint de sys-row */
.flujo-day-table--v2 tbody .flujo-day-row--v2 {
    background: transparent !important;
}

.flujo-col-dot {
    width: 28px;
    padding-left: 12px !important;
    padding-right: 4px !important;
    text-align: center;
}

.flujo-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--pm-border);
    box-shadow: 0 0 0 2px transparent;
    transition: box-shadow 180ms var(--pm-ease-premium);
}

.flujo-dot--ok {
    background: #10b981;
    box-shadow: 0 0 0 2px color-mix(in oklch, #10b981 25%, transparent);
}

.flujo-dot--warning {
    background: #f59e0b;
    box-shadow: 0 0 0 2px color-mix(in oklch, #f59e0b 25%, transparent);
}

.flujo-dot--danger {
    background: var(--pm-danger);
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--pm-danger) 25%, transparent);
}

.flujo-dot--none {
    background: var(--pm-border);
    box-shadow: none;
}

.flujo-day-row--v2:hover .flujo-dot {
    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 15%, transparent);
}

/* Pipeline cell (descarga -> extraccion -> carga inline) */
.flujo-pipeline-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
}

.flujo-pipeline-cell__phase {
    display: inline-flex;
    align-items: center;
}

.flujo-pipeline-cell__sep {
    display: inline-flex;
    align-items: center;
    color: var(--pm-border);
}

.flujo-pipeline-cell__sep svg {
    width: 14px;
    height: 14px;
}

/* Separador de semana (sticky en la tabla) */
.flujo-week-separator > td {
    padding: 0.5rem 0.85rem;
    background: var(--pm-bg);
    border-top: 1px solid var(--pm-border);
    border-bottom: 1px solid var(--pm-border);
    position: sticky;
    top: 0;
    z-index: 1;
}

.flujo-week-separator__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    color: var(--pm-text-muted);
    margin-right: 0.4rem;
    vertical-align: middle;
}

.flujo-week-separator__icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

.flujo-week-separator__label {
    font-weight: 600;
    color: var(--pm-text);
    font-size: 0.85rem;
    letter-spacing: -0.005em;
}

.flujo-week-separator__count {
    margin-left: 0.6rem;
    color: var(--pm-text-muted);
    font-size: 0.78rem;
}

[data-theme="dark"] .flujo-week-separator > td {
    background: color-mix(in oklch, var(--pm-bg) 70%, black);
}

/* =========================================================================
   Preview panel (Fase SG-5 / B15): bloque informativo arriba del form de
   extraccion mostrando ultima corrida + aseguradoras activas.
   ========================================================================= */

.sg-preview-panel {
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    background: color-mix(in oklch, var(--pm-primary) 3%, var(--pm-surface));
    overflow: hidden;
}

.sg-preview-panel__summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--pm-text);
    font-size: 0.92rem;
}

.sg-preview-panel__summary::-webkit-details-marker {
    display: none;
}

.sg-preview-panel__summary > i:first-child {
    color: var(--pm-primary);
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.sg-preview-panel__chevron {
    margin-left: auto;
    transition: transform 200ms var(--pm-ease-premium);
    width: 1rem;
    height: 1rem;
    color: var(--pm-text-muted);
}

.sg-preview-panel[open] .sg-preview-panel__chevron {
    transform: rotate(180deg);
}

.sg-preview-panel__body {
    padding: 0.4rem 1rem 0.9rem;
    border-top: 1px solid var(--pm-border);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.sg-preview-panel__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: flex-start;
}

.sg-preview-panel__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    width: 11rem;
    flex-shrink: 0;
    padding-top: 0.1rem;
}

.sg-preview-panel__value {
    font-size: 0.88rem;
    color: var(--pm-text);
    flex: 1;
    min-width: 0;
}

.sg-preview-panel__sep {
    color: var(--pm-text-muted);
    margin: 0 0.25rem;
}

.sg-preview-panel__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.sg-preview-panel__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--pm-text);
}

@media (max-width: 768px) {
    .sg-preview-panel__label {
        width: 100%;
    }
}

/* =========================================================================
   Ultima carga panel (Fase SG-6 / B17): Recordatorio del ultimo lote
   de carga masiva, arriba del form de subida. Reduce el "no se cuando fue
   la ultima vez" sin tener que abrir Procesos en otra tab.
   ========================================================================= */

.ultima-carga-panel {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    padding: 0.85rem 1.1rem;
    background: color-mix(in oklch, var(--pm-primary) 4%, var(--pm-surface));
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
}

.ultima-carga-panel__icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--pm-radius-sm);
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ultima-carga-panel__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.ultima-carga-panel__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.ultima-carga-panel__label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--pm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ultima-carga-panel__main {
    font-size: 0.92rem;
    color: var(--pm-text);
}

.ultima-carga-panel__main strong {
    color: var(--pm-text);
    font-weight: 700;
}

.ultima-carga-panel__sep {
    color: var(--pm-text-muted);
    margin: 0 0.2rem;
}

.ultima-carga-panel__hint {
    font-size: 0.78rem;
    color: var(--pm-text-muted);
}

.ultima-carga-panel__hint code {
    color: var(--pm-text);
    background: var(--pm-surface);
    padding: 0.05rem 0.35rem;
    border-radius: var(--pm-radius-xs, 4px);
    border: 1px solid var(--pm-border);
    font-size: 0.75rem;
}

@media (max-width: 576px) {
    .ultima-carga-panel {
        flex-wrap: wrap;
    }
}

/* =========================================================================
   Consulta operativa SG (Fase SG-7 / A10): tabs Cliente / Poliza
   en un solo card unificado en lugar de 2 cards paralelos.
   ========================================================================= */

.consulta-unified {
    overflow: visible;
}

.consulta-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--pm-border);
    margin: -1px -1px 1rem;
}

.consulta-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-weight: 500;
    color: var(--pm-text-muted);
    font-size: 0.95rem;
    cursor: pointer;
    transition: color 180ms var(--pm-ease-premium),
                border-color 180ms var(--pm-ease-premium);
    margin-bottom: -1px;
}

.consulta-tab:hover {
    color: var(--pm-text);
}

.consulta-tab.is-active {
    color: var(--pm-primary);
    border-bottom-color: var(--pm-primary);
    font-weight: 600;
}

.consulta-tab i,
.consulta-tab svg {
    width: 1rem;
    height: 1rem;
}

.consulta-panel {
    display: none;
}

.consulta-panel.is-active {
    display: block;
}

/* Tip Ctrl+K (consulta home, consulta cliente vacia) */
.consulta-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border-radius: var(--pm-radius-sm);
    background: color-mix(in oklch, var(--pm-primary) 4%, var(--pm-surface));
    border: 1px solid var(--pm-border);
    color: var(--pm-text-muted);
    font-size: 0.82rem;
}

.consulta-shortcut i,
.consulta-shortcut svg {
    width: 0.95rem;
    height: 0.95rem;
    color: var(--pm-primary);
    flex-shrink: 0;
}

.consulta-shortcut kbd {
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: 4px;
    padding: 0.05rem 0.4rem;
    font-size: 0.74rem;
    color: var(--pm-text);
    box-shadow: 0 1px 0 var(--pm-border);
    font-family: var(--pm-font-sans);
    font-weight: 600;
}

/* Empty state CRM-amplio (Fase SG-7 / C24): cuando una cuenta no tiene
   polizas SG, ofrecer otras dimensiones CRM en vez de "no tiene deuda". */
.empty-state--crm {
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px dashed var(--pm-border);
    border-radius: var(--pm-radius-md);
    background: color-mix(in oklch, var(--pm-primary) 2%, var(--pm-surface));
}

.empty-state--crm .empty-state__icon {
    margin: 0 auto 0.75rem;
    width: 3rem;
    height: 3rem;
    color: var(--pm-text-muted);
}

.empty-state--crm .empty-state__icon svg {
    width: 100%;
    height: 100%;
}

.empty-state--crm .empty-state__title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--pm-text);
}

.empty-state--crm .empty-state__text {
    color: var(--pm-text-muted);
    margin-bottom: 1rem;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}

.empty-state__actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

/* =========================================================================
   KPIs cuenta (Fase SG-11a): nuevos componentes
   - kpi-health-grid: grilla de 4 KPIs accionables (Riesgo, Recurrencia, etc.)
   - mini-metric con hint: añade subtexto de contexto
   ========================================================================= */

.kpi-health-panel .section-title i {
    color: var(--pm-primary);
}

.kpi-health-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 0.5rem;
}

.kpi-health-card {
    padding: 1rem 1.1rem;
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transition: border-color 180ms var(--pm-ease-premium);
}

.kpi-health-card--danger {
    border-color: color-mix(in oklch, var(--pm-danger) 35%, var(--pm-border));
    background: color-mix(in oklch, var(--pm-danger) 4%, var(--pm-surface));
}

.kpi-health-card--warning {
    border-color: color-mix(in oklch, #f59e0b 35%, var(--pm-border));
    background: color-mix(in oklch, #f59e0b 4%, var(--pm-surface));
}

.kpi-health-card--success {
    border-color: color-mix(in oklch, #10b981 30%, var(--pm-border));
    background: color-mix(in oklch, #10b981 3%, var(--pm-surface));
}

.kpi-health-card__label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--pm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kpi-health-card__value {
    font-family: var(--pm-font-sans);
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--pm-text);
    letter-spacing: -0.01em;
    line-height: 1.05;
}

.kpi-health-card--danger .kpi-health-card__value {
    color: var(--pm-danger);
}

.kpi-health-card__unit {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--pm-text-muted);
    margin-left: 0.15rem;
}

.kpi-health-card__hint {
    font-size: 0.75rem;
    color: var(--pm-text-muted);
}

@media (max-width: 1100px) {
    .kpi-health-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .kpi-health-grid {
        grid-template-columns: 1fr;
    }
}

/* mini-metric con hint pequeño abajo */
.mini-metric__hint {
    font-size: 0.7rem;
    color: var(--pm-text-muted);
    margin-top: 0.1rem;
    display: block;
}

/* Wrapper para canvases de Chart.js en la página de KPIs cuenta (SG-11b).
   Altura fija para que el responsive de Chart.js funcione sin colapsar. */
.kpi-chart-wrap {
    position: relative;
    height: 320px;
    width: 100%;
    padding: 0.5rem 0;
}

.kpi-chart-wrap--donut {
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .kpi-chart-wrap {
        height: 260px;
    }
}

/* Sparkline en el hero stat "Deuda total" (Fase SG-11c) */
.ops-hero__spark {
    margin-top: 0.4rem;
    height: 42px;
    width: 100%;
}

/* Variación mes a mes (↑/↓/→) */
.kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-weight: 600;
}
.kpi-trend--up { color: var(--pm-danger); }
.kpi-trend--down { color: #10b981; }
.kpi-trend--flat { color: var(--pm-text-muted); }

/* =========================================================================
   Card de aseguradora en listado (ASEG-1 / A1):
   Status real de la ficha (CBU / contactos / calendario / rechazos) en lugar
   de chips decorativos "Ficha" / "Ver detalle".
   ========================================================================= */
.aseg-card__status {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 0.85rem;
    border-top: 1px solid var(--pm-border);
    padding-top: 0.75rem;
}

.aseg-card__status-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--pm-text);
}

.aseg-card__status-item.is-ok {
    color: var(--pm-text);
}

.aseg-card__status-item.is-missing {
    color: var(--pm-text-muted);
}

.aseg-card__status-icon {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 999px;
    padding: 1px;
    flex-shrink: 0;
}

.aseg-card__status-item.is-ok .aseg-card__status-icon {
    background: color-mix(in oklch, #10b981 18%, var(--pm-surface));
    color: #0a7a52;
}

.aseg-card__status-item.is-missing .aseg-card__status-icon {
    background: color-mix(in oklch, var(--pm-text-muted) 18%, var(--pm-surface));
    color: var(--pm-text-muted);
}

/* ============================================================
   Detalle aseguradora · hero compacto (ASEG-2 / A4)
   - Brand + badges en una sola fila densa.
   - Meta strip horizontal abajo (CUIT/Alias/Cuenta/Update/Calendario).
   ============================================================ */
.aseg-hero {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 0.9rem;
}

.aseg-hero__logo {
    flex-shrink: 0;
}

.aseg-hero__body {
    flex: 1;
    min-width: 0;
}

.aseg-hero__meta {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    overflow: hidden;
    background: var(--pm-surface);
}

.aseg-hero__meta-item {
    padding: 0.7rem 0.9rem;
    border-right: 1px solid var(--pm-border);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.aseg-hero__meta-item:last-child {
    border-right: none;
}

.aseg-hero__meta-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--pm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.aseg-hero__meta-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--pm-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .aseg-hero__meta {
        grid-template-columns: repeat(2, 1fr);
    }
    .aseg-hero__meta-item {
        border-right: 1px solid var(--pm-border);
        border-bottom: 1px solid var(--pm-border);
    }
    .aseg-hero__meta-item:nth-child(2n) {
        border-right: none;
    }
}

@media (max-width: 576px) {
    .aseg-hero {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   Listado aseguradoras · toggle vista + tabla + avatar fallback (ASEG-3)
   ============================================================ */

/* Toggle grilla/tabla */
.aseg-view-toggle {
    display: inline-flex;
    gap: 0.4rem;
    margin: 0.9rem 0 1.1rem;
}

/* Show/hide views según data-aseg-view-container */
.aseg-view .aseg-view__grilla { display: none; }
.aseg-view .aseg-view__tabla { display: none; }
.aseg-view--grilla .aseg-view__grilla { display: flex; flex-wrap: wrap; }
.aseg-view--tabla .aseg-view__tabla { display: block; }

/* Avatar fallback: cuadro con inicial + color hash. Reemplaza el icon
   building genérico cuando una aseguradora no tiene logo cargado. */
.aseg-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: var(--pm-radius-sm);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

.aseg-avatar-fallback--xs {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    font-size: 0.78rem;
}

/* brand-media variantes md y xs (faltaban) */
.brand-media--md {
    width: 56px;
    height: 56px;
}

.brand-media--xs {
    width: 28px;
    height: 28px;
    border-radius: 4px;
}

.brand-media--xs .brand-media__img {
    border-radius: 4px;
}

/* Iconos check/x compactos para la columna de tabla */
.aseg-table__icon {
    width: 16px;
    height: 16px;
}

.aseg-table__icon.is-ok { color: #0a7a52; }
.aseg-table__icon.is-missing { color: var(--pm-text-muted); }

/* ============================================================
   Detalle aseguradora · tabs inline (ASEG-4 / C13)
   ============================================================ */
.aseg-tabs {
    border-bottom: 1px solid var(--pm-border);
    gap: 0.25rem;
    padding-bottom: 0;
    margin-bottom: 0 !important;
}

.aseg-tabs .nav-link {
    color: var(--pm-text-muted);
    border-radius: var(--pm-radius-sm) var(--pm-radius-sm) 0 0;
    border: none;
    padding: 0.55rem 1rem;
    font-weight: 500;
    font-size: 0.92rem;
    background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.aseg-tabs .nav-link:hover {
    color: var(--pm-text);
    background: var(--pm-bg);
}

.aseg-tabs .nav-link.active {
    background: var(--pm-surface);
    color: var(--pm-primary);
    font-weight: 600;
    border-bottom-color: var(--pm-primary);
}

.aseg-tab-content {
    padding-top: 1.1rem;
}

/* Tabla compacta de contactos (C12) */
.aseg-contactos-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pm-text-muted);
    font-weight: 600;
}

.aseg-contactos-table td {
    font-size: 0.9rem;
    padding: 0.6rem 0.85rem;
}

/* Detalle aseguradora · bloque "Descarga automática" (ASEG-5 / B11) */
.aseg-descarga {
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    padding: 0.6rem 0.85rem;
    background: var(--pm-bg);
}

.aseg-descarga__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.aseg-descarga__head i[data-lucide] {
    width: 16px;
    height: 16px;
}

.aseg-descarga__meta {
    line-height: 1.4;
}

/* Botones de accion al pie de una table-card (ej. Agregar cuota - C25) */
.table-card__footer-actions {
    padding: 0.6rem 0.85rem;
    border-top: 1px solid var(--pm-border);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
}

/* =====================================================================
   Flujo diario · aviso de CREDENCIAL INVÁLIDA (login fallido)
   Aparece arriba cuando la última corrida de una aseguradora falló por
   contraseña cambiada. Incluye el cuadro inline para actualizar la pass.
   Acento ámbar (acción requerida, no catástrofe) sobre identidad navy.
   ===================================================================== */
.flujo-cred-alert {
    border: 1px solid #f0c987;
    background: linear-gradient(180deg, #fff8ec 0%, #fdf1de 100%);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 20px;
    box-shadow: 0 8px 22px -14px rgba(11, 58, 111, 0.35);
}
.flujo-cred-alert__head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}
.flujo-cred-alert__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #f0a02e;
    color: #fff;
}
.flujo-cred-alert__icon i { width: 22px; height: 22px; }
.flujo-cred-alert__title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--pm-navy, #0b3a6f);
    margin: 0;
}
.flujo-cred-alert__sub {
    font-size: 0.85rem;
    color: #8a6d3f;
    margin: 2px 0 0;
}
.flujo-cred-alert__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.flujo-cred-card {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #f3e2c4;
    border-radius: 10px;
    padding: 10px 14px;
}
.flujo-cred-card__info {
    display: flex;
    flex-direction: column;
    min-width: 180px;
}
.flujo-cred-card__name {
    font-weight: 700;
    color: var(--pm-navy, #0b3a6f);
}
.flujo-cred-card__err {
    font-size: 0.76rem;
    color: #9a7b4f;
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.flujo-cred-card__form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.flujo-cred-card__select,
.flujo-cred-card__pass { min-width: 168px; }
.flujo-cred-card__cred {
    font-size: 0.8rem;
    color: var(--pm-text-muted);
    align-self: center;
}
/* Chip "Revisar contraseña" en la celda de Descarga del detalle */
.flujo-cred-flag { margin-left: 6px; }

[data-theme="dark"] .flujo-cred-alert {
    border-color: rgba(240, 160, 46, 0.45);
    background: linear-gradient(180deg, rgba(240, 160, 46, 0.14) 0%, rgba(240, 160, 46, 0.06) 100%);
    box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .flujo-cred-alert__title { color: #ffd9a0; }
[data-theme="dark"] .flujo-cred-alert__sub { color: #d6b483; }
[data-theme="dark"] .flujo-cred-card {
    background: var(--pm-surface, #16202c);
    border-color: rgba(240, 160, 46, 0.3);
}
[data-theme="dark"] .flujo-cred-card__name { color: #ffd9a0; }
[data-theme="dark"] .flujo-cred-card__err { color: #c9a978; }

/* ============================================================================
   Buscador universal (.usearch) — un solo campo por consulta (SG / ART).
   Dropdown en vivo al tipear sobre /api/command-palette/?scope=<sg|art>.
   Mismo componente en ambos módulos → diseño idéntico por construcción.
   Bureau Premium: navy Promecor, Montserrat, easings sin rebote.
   ========================================================================== */
.usearch {
    /* Alineado a la izquierda (lateral), a tono con el título de la página.
       width:100% + sin margin:auto evita que flexbox lo encoja al contenido
       (los márgenes auto en el eje transversal ganan a align-items:stretch). */
    width: 100%;
    max-width: 760px;
}

/* Campo de búsqueda: grande, protagonista, con ring navy al enfocar */
.usearch__field {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.2rem 0.9rem;
    background: var(--pm-surface, #fff);
    border: 1.5px solid var(--pm-border, #dde3ea);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(11, 58, 111, 0.04);
    transition: border-color 0.18s var(--pm-ease-premium, ease),
                box-shadow 0.18s var(--pm-ease-premium, ease);
}
.usearch__field:focus-within {
    border-color: var(--pm-navy, #0b3a6f);
    box-shadow: 0 0 0 4px rgba(11, 58, 111, 0.12),
                0 6px 18px -10px rgba(11, 58, 111, 0.35);
}
.usearch__icon {
    display: inline-flex;
    color: var(--pm-navy, #0b3a6f);
    opacity: 0.85;
    flex: 0 0 auto;
}
.usearch__icon i, .usearch__icon svg { width: 20px; height: 20px; }
.usearch__input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 0.75rem 0;
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--pm-text, #1b2733);
    letter-spacing: 0.01em;
}
.usearch__input::placeholder {
    color: var(--pm-text-muted, #8a97a6);
    font-weight: 500;
}
.usearch__clear {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--pm-text-muted, #8a97a6);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.usearch__clear:hover { background: var(--pm-surface-2, #eef1f5); color: var(--pm-navy, #0b3a6f); }
.usearch__clear i, .usearch__clear svg { width: 16px; height: 16px; }
.usearch__clear[hidden] { display: none; }
.usearch__spinner {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    border: 2px solid rgba(11, 58, 111, 0.22);
    border-top-color: var(--pm-navy, #0b3a6f);
    border-radius: 50%;
    animation: usearchSpin 0.7s linear infinite;
}
.usearch__spinner[hidden] { display: none; }
@keyframes usearchSpin { to { transform: rotate(360deg); } }

/* Panel de resultados: bloque inline debajo del campo (no flotante → sólido) */
.usearch__panel {
    margin-top: 0.85rem;
    min-height: 1px;
}
.usearch__panel[hidden] { display: none; }
.usearch__group + .usearch__group { margin-top: 0.35rem; }
.usearch__group-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--pm-text-muted, #8a97a6);
    padding: 0.5rem 0.65rem 0.3rem;
}
.usearch__group-label--flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.usearch__group-clear {
    border: none;
    background: transparent;
    color: var(--pm-text-muted, #8a97a6);
    font: inherit;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    padding: 0.1rem 0.3rem;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}
.usearch__group-clear:hover { color: var(--pm-navy, #0b3a6f); background: var(--pm-surface-2, #eef1f5); }
[data-theme="dark"] .usearch__group-clear:hover { color: #9cc0f0; background: #1f2b3a; }

/* Fila de resultado */
.usearch__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.7rem;
    border-radius: 11px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.13s ease, border-color 0.13s ease, transform 0.08s var(--pm-ease-premium, ease);
}
.usearch__item:hover,
.usearch__item.is-active {
    background: rgba(11, 58, 111, 0.06);
    border-color: rgba(11, 58, 111, 0.1);
}
.usearch__item.is-active { box-shadow: inset 0 0 0 1px rgba(11, 58, 111, 0.14); }
.usearch__item:active { transform: scale(0.992); }
.usearch__item-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--pm-surface-2, #eef1f5);
    color: var(--pm-navy, #0b3a6f);
}
.usearch__item.is-active .usearch__item-icon { background: rgba(11, 58, 111, 0.12); }
.usearch__item-icon i, .usearch__item-icon svg { width: 17px; height: 17px; }
.usearch__item-main { flex: 1 1 auto; min-width: 0; }
.usearch__item-label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--pm-text, #1b2733);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.usearch__item-hint {
    display: block;
    font-size: 0.76rem;
    color: var(--pm-text-muted, #8a97a6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.05rem;
}
.usearch__item-badge {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    color: var(--pm-navy, #0b3a6f);
    background: rgba(11, 58, 111, 0.09);
}
.usearch__item-badge--art { color: #0b3a6f; background: rgba(11, 58, 111, 0.1); }
.usearch__item-badge--sg { color: #1d6f4c; background: rgba(29, 111, 76, 0.11); }
.usearch__item-badge--sistema { color: #8a5a00; background: rgba(240, 160, 46, 0.14); }

/* Estado vacío / sin resultados */
.usearch__empty {
    text-align: center;
    padding: 2.2rem 1rem;
    color: var(--pm-text-muted, #8a97a6);
}
.usearch__empty i, .usearch__empty svg {
    width: 30px; height: 30px;
    opacity: 0.55;
    margin-bottom: 0.6rem;
}
.usearch__empty strong { color: var(--pm-text, #1b2733); }

/* Pie de ayuda con atajos */
.usearch__foot {
    display: flex;
    gap: 1.1rem;
    justify-content: center;
    align-items: center;
    margin-top: 0.9rem;
    font-size: 0.72rem;
    color: var(--pm-text-muted, #8a97a6);
}
.usearch__foot kbd {
    display: inline-block;
    min-width: 1.3em;
    text-align: center;
    padding: 0.05rem 0.35rem;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--pm-navy, #0b3a6f);
    background: var(--pm-surface-2, #eef1f5);
    border: 1px solid var(--pm-border, #dde3ea);
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(11, 58, 111, 0.08);
}

/* Reduced motion: sin animaciones de transform/scale */
@media (prefers-reduced-motion: reduce) {
    .usearch__field, .usearch__item { transition: none; }
    .usearch__item:active { transform: none; }
    .usearch__spinner { animation: none; }
}

/* Dark theme */
[data-theme="dark"] .usearch__field {
    background: var(--pm-surface, #16202c);
    border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .usearch__field:focus-within {
    border-color: #5b8fd6;
    box-shadow: 0 0 0 4px rgba(91, 143, 214, 0.18);
}
[data-theme="dark"] .usearch__icon { color: #7fa8de; }
[data-theme="dark"] .usearch__input { color: #e7edf4; }
[data-theme="dark"] .usearch__item:hover,
[data-theme="dark"] .usearch__item.is-active { background: rgba(91, 143, 214, 0.14); border-color: rgba(91, 143, 214, 0.22); }
[data-theme="dark"] .usearch__item-icon { background: #1f2b3a; color: #7fa8de; }
[data-theme="dark"] .usearch__item-label { color: #e7edf4; }
[data-theme="dark"] .usearch__item-badge { color: #9cc0f0; background: rgba(91, 143, 214, 0.16); }
[data-theme="dark"] .usearch__item-badge--sg { color: #7fd6ab; background: rgba(29, 111, 76, 0.22); }
[data-theme="dark"] .usearch__item-badge--sistema { color: #f0c06a; background: rgba(240, 160, 46, 0.2); }
[data-theme="dark"] .usearch__foot kbd { background: #1f2b3a; border-color: rgba(255,255,255,0.14); color: #9cc0f0; }

/* ═══ Flujo diario · imputaciones + acciones + casos colapsables ═══ */
.flujo-row-actions { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }
.flujo-counts__imput { color: #0b3a6f; font-weight: 600; }
[data-theme="dark"] .flujo-counts__imput { color: #7fd6ab; }
.flujo-imput-total { font-size: 0.95em; }
.flujo-imput-detalle-btn { margin-top: 4px; }

/* Casos pendientes: sección colapsable (<details>) */
details.casos-pendientes-card > summary.casos-pendientes-summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  list-style: none; padding: 2px 0; user-select: none;
}
details.casos-pendientes-card > summary.casos-pendientes-summary::-webkit-details-marker { display: none; }
details.casos-pendientes-card > summary.casos-pendientes-summary::before {
  content: ""; display: inline-block; width: 0; height: 0;
  border-left: 6px solid currentColor; border-top: 4px solid transparent;
  border-bottom: 4px solid transparent; margin-right: 2px;
  transition: transform 0.15s ease; opacity: 0.55;
}
details.casos-pendientes-card[open] > summary.casos-pendientes-summary::before { transform: rotate(90deg); }
.casos-pendientes-summary .section-title { display: inline-flex; align-items: center; gap: 6px; }
.casos-pendientes-summary__hint { font-style: italic; }
details.casos-pendientes-card[open] .casos-pendientes-summary__hint { display: none; }
.casos-pendientes-body { margin-top: 12px; }
/* Flujo diario · total imputado (columna) + err. extracción movido a Volumen */
.flujo-counts__err { color: #b42318; }
[data-theme="dark"] .flujo-counts__err { color: #f0a0a0; }
.flujo-imput-col { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Flujo diario · imputado desglosado (pagos vs NCs consumidas) */
.flujo-imput-pagos { color: #0b3a6f; font-weight: 600; }
[data-theme="dark"] .flujo-imput-pagos { color: #7fd6ab; }
.flujo-imput-ncs { color: #8a6d1f; }
[data-theme="dark"] .flujo-imput-ncs { color: #d9b25a; }
/* Flujo diario · Volumen con etiquetas (más claro) */
.flujo-counts--labeled { display: flex; flex-wrap: wrap; gap: 3px 14px; align-items: center; }
.flujo-counts--labeled > span { white-space: nowrap; }

/* ── Versión de código de cada worker (Estado del Sistema) ──────────────
   Un worker que corre un commit distinto al de la web ejecuta los bots con
   bugs ya corregidos, y eso no se nota en ningún otro lado: por eso el chip
   se tiñe en vez de dejarlo como un dato gris más. */
.sys-worker-chip__ver {
  margin-left: .35rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: .92em;
}
.sys-worker-chip__ver--gris { font-weight: 500; opacity: .6; }
.sys-worker-chip__ver i,
.sys-worker-chip__ver svg { width: 12px; height: 12px; vertical-align: -2px; }
.sys-worker-chip--alerta {
  border-color: #d8a13a;
  background: #fdf6e6;
}
.sys-worker-chip--alerta .sys-worker-chip__ver,
.sys-worker-chip--alerta .sys-worker-chip__ver i,
.sys-worker-chip--alerta .sys-worker-chip__ver svg { color: #9a6a00; }
[data-theme="dark"] .sys-worker-chip--alerta {
  border-color: #7a5a1c;
  background: rgba(224, 178, 90, .12);
}
[data-theme="dark"] .sys-worker-chip--alerta .sys-worker-chip__ver,
[data-theme="dark"] .sys-worker-chip--alerta .sys-worker-chip__ver i,
[data-theme="dark"] .sys-worker-chip--alerta .sys-worker-chip__ver svg { color: #e0b25a; }

/* ═══════════════════════════════════════════════════════════════════════════
   ART · Notificaciones de deuda  (.nd-*)
   ───────────────────────────────────────────────────────────────────────────
   Pantalla de decisión mensual: el operador mira un lote de avisos de deuda y
   decide si lo manda. La jerarquía la manda esa decisión, no la cantidad de
   datos.

   Por qué NO hay fila de KPI cards: es lo que PRODUCT.md lista como
   anti-referencia ("hero metric gigante con 4 KPI cards idénticas debajo").
   En su lugar el total va dentro de una FRASE — "vas a reclamar $X a N
   clientes" — con el botón al lado. La cifra y la acción son la misma unidad,
   así que viven juntas.
   ═══════════════════════════════════════════════════════════════════════════ */

.nd-decision {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    padding: 22px 26px;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    background: var(--pm-surface);
    box-shadow: var(--pm-shadow-card);
}

.nd-decision__claim {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--pm-text-soft);
    max-width: 62ch;
}

/* La plata es lo único que crece de tamaño en toda la pantalla. */
.nd-decision__money {
    display: block;
    margin: 2px 0 4px;
    font-size: 2.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--pm-primary);
    font-variant-numeric: tabular-nums;
}

.nd-decision__who { color: var(--pm-text); font-weight: 600; }

.nd-decision__split {
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: var(--pm-text-muted);
    font-variant-numeric: tabular-nums;
}

.nd-decision__split b { color: var(--pm-text-soft); font-weight: 600; }

.nd-decision__act { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.nd-decision__note { font-size: 0.8rem; color: var(--pm-text-muted); text-align: right; }

/* ── Controles ─────────────────────────────────────────────────────────────
   Barra fina, no una card. Son ajustes del cálculo, no contenido. */
.nd-controls {
    display: flex;
    flex-wrap: wrap;
    /* flex-start y NO flex-end: los campos tienen distinta altura porque unos
       llevan texto de ayuda debajo y otros no. Con flex-end las etiquetas
       quedaban a distinta altura entre sí. */
    align-items: flex-start;
    gap: 18px 24px;
    padding: 14px 18px;
    border: 1px solid var(--pm-divider);
    border-radius: var(--pm-radius-sm);
    background: var(--pm-surface-soft);
}

.nd-controls__field { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }

.nd-controls__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pm-text-muted);
    /* Altura fija: si una etiqueta ocupa dos líneas y otra una, los campos
       arrancarían a distinta altura. */
    min-height: 1.05rem;
}

/* El botón se alinea con la fila de CAMPOS, salteando la altura de la etiqueta. */
.nd-controls__action { margin-top: calc(1.05rem + 5px); }

.nd-controls__hint { font-size: 0.78rem; color: var(--pm-text-muted); max-width: 34ch; }
.nd-controls__switch { display: flex; flex-direction: column; gap: 5px; max-width: 34ch; }

/* ── Lo que queda afuera ───────────────────────────────────────────────────
   Un libro mayor, no una tabla con cabecera. Se lee de un vistazo y cada
   renglón se puede abrir. Importa tanto como lo que sí se manda. */
.nd-ledger { display: flex; flex-direction: column; }

.nd-ledger__row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: 16px;
    padding: 11px 4px;
    border-bottom: 1px solid var(--pm-divider);
    transition: background-color 0.18s var(--pm-ease-premium);
}

.nd-ledger__row:hover { background: var(--pm-surface-soft); }
.nd-ledger__row:last-of-type { border-bottom: 0; }
.nd-ledger__motivo { font-size: 0.92rem; color: var(--pm-text); }

.nd-ledger__count {
    font-size: 0.8rem;
    color: var(--pm-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.nd-ledger__amount {
    min-width: 12ch;
    text-align: right;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--pm-text-soft);
    font-variant-numeric: tabular-nums;
}

.nd-ledger__toggle {
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.78rem;
    color: var(--pm-primary);
    cursor: pointer;
}

.nd-ledger__toggle:hover { text-decoration: underline; }

.nd-ledger__cases {
    padding: 8px 4px 14px 4px;
    font-size: 0.82rem;
    color: var(--pm-text-muted);
    line-height: 1.7;
    columns: 2;
    column-gap: 32px;
}

@media (max-width: 720px) { .nd-ledger__cases { columns: 1; } }

/* El detalle del motivo, cuando existe: "Traspaso Interno", "Rescindido",
   "Anulada". Es un dato del CRM o de la aseguradora, no texto nuestro, así que
   va marcado como cita y no compite con la razón social. */
.nd-ledger__why {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--pm-surface-2, rgba(11, 58, 111, .06));
    color: var(--pm-text-muted);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

/* ── Lista de avisos ───────────────────────────────────────────────────────
   Densa a propósito: son cientos de filas y el operador escanea. El grupo
   pesa, el contrato se subordina por sangría y tamaño, sin barra lateral. */
.nd-list__group td { border-top: 1px solid var(--pm-border); }
.nd-list__group:first-child td { border-top: 0; }
.nd-list__to { font-weight: 600; color: var(--pm-text); }
.nd-list__mail { font-size: 0.8rem; color: var(--pm-text-muted); }

.nd-list__peek {
    font-size: 0.78rem;
    color: var(--pm-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.18s var(--pm-ease-premium);
}

.nd-list__peek:hover { border-bottom-color: currentColor; }

.nd-list__contract td {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 0.82rem;
    color: var(--pm-text-muted);
    border-bottom-color: var(--pm-divider);
}

.nd-list__contract td:first-child { padding-left: 30px; }

.nd-list .nd-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.nd-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--pm-border);
    background: var(--pm-surface-soft);
    font-size: 0.7rem;
    color: var(--pm-text-soft);
    white-space: nowrap;
}

.nd-section {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin: 26px 0 10px;
}

.nd-section__title { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--pm-text); }
.nd-section__meta { font-size: 0.82rem; color: var(--pm-text-muted); }

[data-theme="dark"] .nd-decision,
[data-theme="dark"] .nd-controls { background: var(--pm-surface); }
[data-theme="dark"] .nd-ledger__row:hover { background: var(--pm-surface-2); }

.nd-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 4px 4px;
}

.nd-pager__count { font-size: 0.85rem; color: var(--pm-text-muted); font-variant-numeric: tabular-nums; }
.nd-pager__nav { display: flex; align-items: center; gap: 12px; }
.nd-pager__at { font-size: 0.85rem; color: var(--pm-text-soft); font-variant-numeric: tabular-nums; }
/* Flujo diario · Volumen con salud de fase fusionada (color en nº + ícono) */
.flujo-vol--ok strong, .flujo-vol--ok .flujo-counts__icon { color: #1a7f52; }
.flujo-vol--warning strong, .flujo-vol--warning .flujo-counts__icon { color: #9a6a00; }
.flujo-vol--danger strong, .flujo-vol--danger .flujo-counts__icon { color: #c0362c; }
.flujo-vol__warn { width: 13px; height: 13px; vertical-align: -2px; color: #9a6a00; }
.flujo-vol--danger .flujo-vol__warn { color: #c0362c; }
[data-theme="dark"] .flujo-vol--ok strong, [data-theme="dark"] .flujo-vol--ok .flujo-counts__icon { color: #6bd39c; }
[data-theme="dark"] .flujo-vol--warning strong, [data-theme="dark"] .flujo-vol--warning .flujo-counts__icon { color: #e0b25a; }
[data-theme="dark"] .flujo-vol--danger strong, [data-theme="dark"] .flujo-vol--danger .flujo-counts__icon { color: #f0a0a0; }
/* Denominador de la fracción (logradas/intentadas): da la escala sin robarle
   protagonismo al número logrado, que es el que se escanea de un vistazo. */
.flujo-vol__den { opacity: .62; font-variant-numeric: tabular-nums; }

/* =========================================================================
   Flujo diario · drill-down de "Volumen"
   Cada métrica de la columna Volumen (descargadas / extraídos / cargados) es
   un <button> que abre un modal Bootstrap con el detalle caso por caso de esa
   fase. El cuerpo lo trae por AJAX sg:flujo_diario_fase_detalle y lo renderiza
   sg/templates/sg/_flujo_fase_detalle.html.

   Tema: casi todo sale de las variables --pm-*, que ya se dan vuelta solas en
   dark. Solo hay overrides explícitos donde el valor es fijo (los tintes de
   tono y el fondo del thead sticky, que en dark queda transparente por la
   regla global de tablas y dejaría pasar las filas por debajo).
   ========================================================================= */

/* --- Trigger en la tabla ------------------------------------------------ */
/* El botón tiene que verse EXACTAMENTE igual que el <span> que reemplazó:
   cero impacto en la grilla de la fila. La affordance de click la pone
   .link-entity (el mismo subrayado animado de los identificadores
   clickeables del resto de las tablas); acá solo se resetea el chrome. */
.flujo-vol-btn {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    line-height: inherit;
    text-align: left;
    white-space: nowrap;
}

.flujo-vol-btn:focus-visible {
    outline: 2px solid var(--pm-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- Modal -------------------------------------------------------------- */
/* Bootstrap baja .modal-xl a 800px por debajo de 1200px y a 500px por debajo
   de 992px: en tablet una tabla de 7 columnas queda impracticable. Acá el
   diálogo usa todo el ancho disponible hasta el tope de modal-xl. */
.flujo-fase-modal__dialog {
    max-width: min(1140px, calc(100% - 3rem));
}

@media (max-width: 575.98px) {
    .flujo-fase-modal__dialog {
        max-width: calc(100% - 1rem);
    }
}

/* Sin padding: la barra de solapas va a sangre y cada panel pone el suyo. */
.flujo-fase-modal__body {
    padding: 0;
}

/* --- Solapas (positiva / negativa) -------------------------------------- */
.flujo-fase__tabs {
    display: flex;
    gap: 0.25rem;
    margin: 0;
    padding: 0 18px;
    list-style: none;
    background: var(--pm-surface-soft);
    border-bottom: 1px solid var(--pm-border);
}

.flujo-fase__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: -1px;
    padding: 0.7rem 0.9rem;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--pm-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 180ms var(--pm-ease-premium),
                border-color 180ms var(--pm-ease-premium);
}

.flujo-fase__tab:hover {
    color: var(--pm-text);
}

.flujo-fase__tab.active {
    color: var(--pm-primary);
    border-bottom-color: var(--pm-primary);
}

/* La solapa negativa manda en rojo cuando está activa: es la que se mira
   para diagnosticar, no tiene que competir con el navy de la positiva. */
.flujo-fase__tab--danger.active {
    color: var(--pm-danger);
    border-bottom-color: var(--pm-danger);
}

.flujo-fase__tab:focus-visible {
    outline: 2px solid var(--pm-accent);
    outline-offset: -2px;
    border-radius: 6px 6px 0 0;
}

/* Contador al lado del nombre de la solapa (mismos tintes que .status-badge) */
.flujo-fase__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 2px 7px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.35;
    font-variant-numeric: tabular-nums lining-nums;
}

.flujo-fase__count--ok {
    color: #0f5132;
    background: #e9f8ef;
    border-color: #b8e3c6;
}

.flujo-fase__count--danger {
    color: #a61b1b;
    background: #fdecec;
    border-color: #f3c2c2;
}

.flujo-fase__count--neutral {
    color: var(--pm-text-soft);
    background: var(--pm-surface-2);
    border-color: var(--pm-border);
}

[data-theme="dark"] .flujo-fase__count--ok {
    color: #6bd39c;
    background: rgba(29, 111, 76, 0.22);
    border-color: rgba(107, 211, 156, 0.28);
}

[data-theme="dark"] .flujo-fase__count--danger {
    color: #f0a0a0;
    background: rgba(180, 35, 24, 0.22);
    border-color: rgba(240, 160, 160, 0.28);
}

/* --- Panel -------------------------------------------------------------- */
.flujo-fase__pane {
    padding: 14px 18px 18px;
}

.flujo-fase__nota {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 12px;
    padding: 9px 12px;
    border-radius: var(--pm-radius-sm);
    background: var(--pm-primary-soft);
    color: var(--pm-text-soft);
    font-size: 0.84rem;
    line-height: 1.45;
}

.flujo-fase__nota-icon {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    color: var(--pm-primary);
}

/* --- Tabla: scroll interno + encabezado sticky -------------------------- */
/* Hasta ~300 filas por solapa: el modal no crece con la lista, scrollea la
   tabla y el thead queda pegado arriba (mismo recurso que .process-scrollbox). */
.flujo-fase__scroll {
    max-height: clamp(200px, 46vh, 460px);
    overflow: auto;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    background: var(--pm-surface);
}

.flujo-fase__scroll:focus-visible {
    outline: 2px solid var(--pm-accent);
    outline-offset: 2px;
}

.flujo-fase__table {
    margin: 0;
    font-variant-numeric: tabular-nums lining-nums;
}

.flujo-fase__table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--pm-primary);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.14);
}

/* En dark la regla global deja los th transparentes: para un thead sticky eso
   significa ver las filas pasar por debajo. Se le devuelve un fondo opaco. */
[data-theme="dark"] .flujo-fase__table thead th {
    background: var(--pm-surface-2);
    color: var(--pm-text-muted);
    box-shadow: inset 0 -1px 0 var(--pm-border);
}

.flujo-fase__table > tbody > tr > td {
    vertical-align: top;
    white-space: nowrap;
}

/* La última columna suele traer la explicación del problema (motivo, error,
   "qué significa") y puede ser larga: es la única que envuelve, con tope de
   ancho para que no se coma la tabla ni rompa la grilla. */
.flujo-fase__table > tbody > tr > td:last-child {
    max-width: 46ch;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
}

.flujo-fase__truncado {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    color: var(--pm-text-muted);
    font-size: 0.8rem;
}

.flujo-fase__truncado i,
.flujo-fase__truncado svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

/* --- Vacío -------------------------------------------------------------- */
.flujo-fase__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 42px 18px;
    border: 1px dashed var(--pm-border);
    border-radius: var(--pm-radius-sm);
    background: var(--pm-surface-soft);
    text-align: center;
}

.flujo-fase__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
}

.flujo-fase__empty-icon i,
.flujo-fase__empty-icon svg {
    width: 20px;
    height: 20px;
}

.flujo-fase__empty-title {
    margin: 0;
    color: var(--pm-text);
    font-weight: 700;
}

.flujo-fase__empty-msg {
    margin: 0;
    color: var(--pm-text-muted);
    font-size: 0.84rem;
}

/* --- Estados del modal: cargando / error -------------------------------- */
.flujo-fase__state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 18px;
    text-align: center;
}

.flujo-fase__state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(180, 35, 24, 0.10);
    color: var(--pm-danger);
}

.flujo-fase__state-icon i,
.flujo-fase__state-icon svg {
    width: 22px;
    height: 22px;
}

.flujo-fase__state-title {
    margin: 0;
    color: var(--pm-text);
    font-weight: 700;
}

.flujo-fase__state-msg {
    max-width: 62ch;
    margin: 0;
    color: var(--pm-text-muted);
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.flujo-fase__state--error .flujo-fase__state-msg {
    color: var(--pm-danger);
}

.flujo-fase__spin {
    width: 26px;
    height: 26px;
    color: var(--pm-primary);
    animation: spin 1s linear infinite;
}

[data-theme="dark"] .flujo-fase__state-icon {
    background: rgba(248, 113, 113, 0.14);
}

/* El spinner indica actividad: es esencial, sigue girando bajo reduced-motion
   (mismo criterio que .pm-btn-spinner). */
@media (prefers-reduced-motion: reduce) {
    .flujo-fase__spin {
        animation-duration: 1.4s !important;
        animation-iteration-count: infinite !important;
    }
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 575.98px) {
    .flujo-fase__tabs {
        padding: 0 12px;
    }

    .flujo-fase__tab {
        padding: 0.65rem 0.6rem;
        font-size: 0.86rem;
    }

    .flujo-fase__pane {
        padding: 12px 12px 14px;
    }

    .flujo-fase__scroll {
        max-height: 58vh;
    }

    .flujo-fase__table > tbody > tr > td:last-child {
        max-width: 28ch;
    }
}

/* Referencia de lote: es un DATO, no un link. Apuntaba al admin de Django y
   ese modelo nunca estuvo registrado, así que siempre dio 404. Se mantiene el
   número porque sirve para cruzar con los logs del cron, pero con aspecto de
   texto para no prometer una navegación que no existe. */
.flujo-lote-ref {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pm-text-muted, #5b6b80);
}

/* Estado de fase como TEXTO (cuando no hay fracción posible: corrida a medias).
   NO usar .text-warning de Bootstrap acá: es #ffc107 y sobre el fondo blanco de
   la tabla da 1,63:1 de contraste, o sea invisible — justo en el caso que hay
   que ver. Estos tonos son los mismos que ya usan los números del Volumen. */
.flujo-estado-txt { font-weight: 600; }
.flujo-estado-txt--ok      { color: #1a7f52; }
.flujo-estado-txt--warning { color: #9a6a00; }
.flujo-estado-txt--danger  { color: #c0362c; }
.flujo-estado-txt--none    { color: var(--pm-text-muted, #5b6b80); font-weight: 500; }
[data-theme="dark"] .flujo-estado-txt--ok      { color: #6bd39c; }
[data-theme="dark"] .flujo-estado-txt--warning { color: #e0b25a; }
[data-theme="dark"] .flujo-estado-txt--danger  { color: #f0a0a0; }

/* Previsualizar UN aviso. Reemplaza al listado completo de destinatarios, que
   eran 763 grupos que nadie revisaba de a uno. */
.nd-peek {
    display: flex;
    gap: 8px;
    align-items: center;
    max-width: 420px;
    margin-bottom: 24px;
}
.nd-peek input[type="email"] { flex: 1 1 auto; }
.nd-peek button { flex: 0 0 auto; white-space: nowrap; }