/* ============================================================================
   strategy-shell.css — panel de navegación enterprise (paridad Mahadi.CRM)
   El sidebar vive dentro del MudDrawer; se repinta como el sidebar dark del CRM.
   Tokens propios --strat-* (calcados de --crm-* del ecosistema).
   ============================================================================ */
/* Tokens de diseño calcados de Mahadi.CRM (--crm-*). Light por defecto; dark vía [data-theme="dark"].
   Los componentes bespoke de Strategy consumen estos tokens; MudBlazor usa StrategyTheme (MudTheme). */
:root, :root[data-theme="light"] {
    --strat-accent:        #6366f1;
    --strat-accent-hover:  #4f46e5;
    --strat-accent-light:  #e0e7ff;
    --strat-bg:            #f1f5f9;
    --strat-surface:       #ffffff;
    --strat-surface-alt:   #f8fafc;
    --strat-border:        #e2e8f0;
    --strat-border-light:  #f1f5f9;
    --strat-text:          #0f172a;
    --strat-text-secondary:#1e293b;
    --strat-text-muted:    #64748b;
    --strat-text-faint:    #94a3b8;
    --strat-sidebar-bg:    #111827;
    --strat-sidebar-brand: #0d1117;
    --strat-sidebar-text:  #9ca3af;
    --strat-sidebar-hover: #1f2937;
    --strat-sidebar-accent:#6366f1;
    --strat-success-bg:    #dcfce7; --strat-success-text: #166534;
    --strat-danger-bg:     #fee2e2; --strat-danger-text:  #991b1b;
    --strat-warning-bg:    #fef9c3; --strat-warning-text: #92400e;
    --strat-info-bg:       #dbeafe; --strat-info-text:    #1e40af;
    --strat-neutral-bg:    #f1f5f9; --strat-neutral-text: #475569;
    --strat-radius-sm:     4px;
    --strat-radius:        6px;
    --strat-radius-md:     8px;
    --strat-shadow-sm:     0 1px 3px rgba(0,0,0,0.08);
    --strat-shadow:        0 4px 16px rgba(0,0,0,0.09);
}

:root[data-theme="dark"] {
    --strat-accent:        #818cf8;
    --strat-accent-hover:  #6366f1;
    --strat-accent-light:  #312e81;
    --strat-bg:            #0f172a;
    --strat-surface:       #1e293b;
    --strat-surface-alt:   #273549;
    --strat-border:        #334155;
    --strat-border-light:  #2d3f55;
    --strat-text:          #f1f5f9;
    --strat-text-secondary:#e2e8f0;
    --strat-text-muted:    #94a3b8;
    --strat-text-faint:    #64748b;
    --strat-sidebar-bg:    #0d1117;
    --strat-sidebar-brand: #080d14;
    --strat-sidebar-text:  #9ca3af;
    --strat-sidebar-hover: #1f2937;
    --strat-sidebar-accent:#818cf8;
    --strat-success-bg:    #14532d; --strat-success-text: #86efac;
    --strat-danger-bg:     #7f1d1d; --strat-danger-text:  #fca5a5;
    --strat-warning-bg:    #78350f; --strat-warning-text: #fde68a;
    --strat-info-bg:       #1e3a5f; --strat-info-text:    #93c5fd;
    --strat-neutral-bg:    #273549; --strat-neutral-text: #94a3b8;
}

/* El MudDrawer que contiene el NavMenu → fondo oscuro, sin padding */
.strategy-nav-drawer .mud-drawer-content { background: var(--strat-sidebar-bg); padding: 0; }
.strategy-nav-drawer.mud-drawer { border: none; background: var(--strat-sidebar-bg); }
.strategy-nav-drawer .mud-navmenu { padding: 0; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.strategy-sidebar { display: flex; flex-direction: column; height: 100%; overflow-x: hidden; }

.strategy-sidebar__header {
    flex-shrink: 0; background: var(--strat-sidebar-brand);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; gap: 0.6rem;
    height: 56px; padding: 0 1.1rem; white-space: nowrap;
}
.strategy-sidebar__brand-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--strat-radius-sm);
    background: var(--strat-accent); color: #fff; font-size: 1rem; flex-shrink: 0;
}
.strategy-sidebar__brand-name { color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; }

.strategy-sidebar__nav { list-style: none; padding: 0.6rem 0; margin: 0; flex: 1; overflow-y: auto; }
.strategy-sidebar__nav li { display: block; }
.strategy-sidebar__section-label {
    padding: 0.9rem 1.1rem 0.3rem; font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.28);
    pointer-events: none;
}
.strategy-sidebar__link {
    display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 1.1rem;
    color: var(--strat-sidebar-text); text-decoration: none; font-size: 0.875rem;
    font-weight: 500; border-left: 3px solid transparent;
    transition: background 0.12s, color 0.12s, border-color 0.12s; white-space: nowrap;
    background: transparent; border-top: none; border-right: none; border-bottom: none;
    width: 100%; cursor: pointer; font-family: inherit; text-align: left;
}
.strategy-sidebar__link:hover { background: var(--strat-sidebar-hover); color: #fff; }
.strategy-sidebar__link.active {
    background: var(--strat-sidebar-hover); color: #fff; border-left-color: var(--strat-sidebar-accent);
}
.strategy-sidebar__link:focus-visible { outline: 2px solid var(--strat-accent); outline-offset: -2px; }
.strategy-sidebar__link-icon {
    flex-shrink: 0; font-size: 1.05rem; line-height: 1; width: 1.15rem; text-align: center;
    color: rgba(255,255,255,0.45);
}
/* iconos por color (paleta CRM) */
.strategy-sidebar__link-icon--home        { color: #818cf8 !important; }
.strategy-sidebar__link-icon--statement   { color: #a78bfa !important; }
.strategy-sidebar__link-icon--plans       { color: #60a5fa !important; }
.strategy-sidebar__link-icon--scorecards  { color: #34d399 !important; }
.strategy-sidebar__link-icon--objectives  { color: #fbbf24 !important; }
.strategy-sidebar__link-icon--themes      { color: #f472b6 !important; }
.strategy-sidebar__link-icon--vectors     { color: #38bdf8 !important; }
.strategy-sidebar__link-icon--segments    { color: #2dd4bf !important; }
.strategy-sidebar__link-icon--initiatives { color: #fb923c !important; }
.strategy-sidebar__link-icon--map         { color: #a5b4fc !important; }
.strategy-sidebar__link-icon--kpis        { color: #4ade80 !important; }
.strategy-sidebar__link-icon--dashboard   { color: #22d3ee !important; }
.strategy-sidebar__link-icon--reviews     { color: #f87171 !important; }

.strategy-sidebar__footer { flex-shrink: 0; padding: 0.6rem 1.1rem; border-top: 1px solid rgba(255,255,255,0.07); }
.strategy-sidebar__user { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.strategy-sidebar__user-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; background: var(--strat-accent);
    color: #fff; font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
}
.strategy-sidebar__user-info { display: flex; flex-direction: column; overflow: hidden; }
.strategy-sidebar__user-name { font-size: 0.8rem; font-weight: 600; color: #e5e7eb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Estado colapsado (mini): solo iconos, centrados (paridad CRM) ──────────── */
.strategy-nav-drawer--mini .strategy-sidebar__brand-name,
.strategy-nav-drawer--mini .strategy-sidebar__link span,
.strategy-nav-drawer--mini .strategy-sidebar__user-info { display: none; }
.strategy-nav-drawer--mini .strategy-sidebar__section-label { height: 0; padding: 0; overflow: hidden; }
.strategy-nav-drawer--mini .strategy-sidebar__header { justify-content: center; padding: 0; }
.strategy-nav-drawer--mini .strategy-sidebar__link { justify-content: center; padding-left: 0; padding-right: 0; }
.strategy-nav-drawer--mini .strategy-sidebar__user { justify-content: center; }
.strategy-nav-drawer--mini .strategy-sidebar__footer { padding-left: 0; padding-right: 0; }

/* ── Componentes compartidos (Ola 2, paridad Mahadi.CRM) ────────────────────── */
/* PageHeader */
.strategy-page-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.strategy-page-header__left { min-width: 0; flex: 1; }
.strategy-page-header__title { font-size: 1.35rem; font-weight: 700; color: var(--strat-text); overflow-wrap: break-word; margin: 0; }
.strategy-page-header__subtitle { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--strat-text-muted); overflow-wrap: break-word; }
.strategy-page-header__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; flex-shrink: 0; }

/* Toolbar de listado */
.strategy-toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.strategy-toolbar__search { flex: 1 1 auto; }
.strategy-toolbar__filters { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.strategy-toolbar__actions { margin-left: auto; display: flex; gap: 0.5rem; }
.strategy-search-input { padding: 0.42rem 0.75rem; border: 1px solid var(--strat-border); border-radius: var(--strat-radius); font-size: 0.855rem; color: var(--strat-text-secondary); background: var(--strat-surface); min-width: 220px; transition: border-color 0.12s, box-shadow 0.12s; }
.strategy-search-input:focus { outline: none; border-color: var(--strat-accent); box-shadow: 0 0 0 2px rgba(99,102,241,0.15); }

/* Empty state */
.strategy-empty-state { padding: 2rem; text-align: center; color: var(--strat-text-faint); font-size: 0.875rem; background: var(--strat-surface-alt); border: 1px dashed var(--strat-border); border-radius: var(--strat-radius); }
.strategy-empty-icon { display: block; font-size: 1.5rem; margin-bottom: 0.4rem; }

/* Badges de estado */
.strategy-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.18rem 0.55rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.strategy-badge .bi { font-size: 0.7rem; }
.strategy-badge-success { background: var(--strat-success-bg); color: var(--strat-success-text); }
.strategy-badge-danger  { background: var(--strat-danger-bg);  color: var(--strat-danger-text); }
.strategy-badge-warning { background: var(--strat-warning-bg); color: var(--strat-warning-text); }
.strategy-badge-info    { background: var(--strat-info-bg);    color: var(--strat-info-text); }
.strategy-badge-default { background: var(--strat-neutral-bg); color: var(--strat-neutral-text); }
.strategy-badge-stage   { border-radius: 9999px; padding: 0.18rem 0.6rem; }
.strategy-badge-stage .bi-circle-fill { font-size: 0.45rem; }

/* ── Fix date pickers: más anchos y navegables a fin de mes ─────────────────── */
.mud-picker-open .mud-picker-container,
.mud-picker-container { min-width: 300px; }
.mud-picker .mud-picker-calendar-container { min-width: 290px; }
/* el input del date picker no debe quedar demasiado angosto en los formularios */
.mud-input-control.mud-picker { min-width: 200px; }

/* ── Ola 5: responsive de tablas apiladas en móvil (fix "cramped") ───────────── */
/* MudTable con Breakpoint apila cada celda: etiqueta (::before) + contenido. Por defecto
   MudBlazor los pone en fila con space-between → el contenido largo se encima. Los apilamos
   verticalmente (etiqueta arriba, valor abajo, alineados a la izquierda) y forzamos el wrap. */
@media (max-width: 600px) {
    .mud-table-cell[data-label] {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 2px;
        padding-top: 0.5rem; padding-bottom: 0.5rem;
    }
    .mud-table-cell[data-label]::before {
        font-weight: 700; font-size: 0.68rem; letter-spacing: 0.04em;
        text-transform: uppercase; color: var(--mud-palette-text-secondary);
        opacity: 0.75; margin: 0;
    }
    .mud-table-cell[data-label] > * { max-width: 100%; overflow-wrap: anywhere; }
    /* que las filas se separen visualmente al apilarse */
    .mud-table-row:not(:last-child) { border-bottom: 1px solid var(--mud-palette-lines-default); }
}

/* Detalle: rejillas y cards nunca desbordan horizontalmente en móvil */
.mud-grid { max-width: 100%; }
.mud-card, .mud-table { max-width: 100%; }
.mud-table-container { overflow-x: auto; }

/* ── Ola 5: accesibilidad — foco visible consistente (paridad CRM) ───────────── */
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.strategy-sidebar__link:focus-visible,
a:focus-visible {
    outline: 2px solid var(--strat-accent);
    outline-offset: 2px;
}

.strategy-actions-cell {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.05rem;
    white-space: nowrap;
}

.strategy-actions-cell .mud-icon-button {
    flex: 0 0 auto;
}

.strategy-method-cell {
    min-width: 12rem;
}

.strategy-method-cell .mud-chip {
    align-self: flex-start;
    margin-left: -0.25rem;
}

.strategy-factor-filter {
    max-width: 24rem;
}

.strategy-factor-dialog-content {
    padding-bottom: 32px;
}