/* ════════════════════════════════════════════════════════════════
   MUD-OVERRIDES — Overrides GLOBALES de MudBlazor (app-wide)
   ────────────────────────────────────────────────────────────────
   Solo viven aquí reglas cuyo selector apunta a clases .mud-* SIN un
   contenedor de página/feature. Tweaks app-wide del framework.
   Los overrides scopeados a un contenedor propio (.sidebar, .tl-*,
   .po-bpm-dialog, .mx-*, .olm, etc.) NO van aquí: quedan en app.css /
   mx.css junto a su feature.

   Orden de carga (index.html): bootstrap → app.css → mud-overrides.css
   → mx.css. Mantener este orden preserva la especificidad/cascada
   equivalente a cuando estas reglas vivían al final de app.css.
   ════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   DIALOGS GLOBALES — Estilos de marca TrucksLogic
   Paleta: Blue #23519E | Orange #F18A25 | Gold #F18A25
   ═══════════════════════════════════════════ */

/* ─── Base global para TODOS los dialogs ─── */
.mud-dialog-container .mud-dialog {
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden;
    min-height: 320px;
    transition: height 0.2s ease, width 0.2s ease;
}

.mud-dialog-container .mud-overlay {
    backdrop-filter: blur(4px);
    background: rgba(10, 18, 34, 0.4) !important;
}

/* Title bar global */
.mud-dialog-container .mud-dialog-title {
    background: #13203a !important;
    color: #ffffff !important;
    padding: 16px 24px !important;
    border-bottom: none !important;
}

.mud-dialog-container .mud-dialog-title .mud-typography {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.01em;
}

.mud-dialog-container .mud-dialog-title .mud-icon-root {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Ocultar X de cerrar — los modales tienen sus propios botones cancelar */
.mud-dialog-container .mud-dialog-title .mud-button-close,
.mud-dialog-container .mud-dialog .mud-icon-button[aria-label="Close"] {
    display: none !important;
}

/* Content area global */
.mud-dialog-container .mud-dialog-content {
    padding: 24px 28px !important;
    border-top: none !important;
}

/* Actions bar global */
.mud-dialog-container .mud-dialog-actions {
    background: #FAFBFC !important;
    border-top: 1px solid #F3F4F6 !important;
    padding: 14px 24px !important;
}

/* ─── Brand Buttons hover/transitions ─── */
.mud-button-filled[style*="linear-gradient"] {
    transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.mud-button-filled[style*="linear-gradient"]:hover:not(:disabled) {
    filter: brightness(1.1);
    box-shadow: 0 4px 14px rgba(35, 81, 158, 0.35) !important;
    transform: translateY(-1px);
}
.mud-button-filled[style*="linear-gradient"]:active:not(:disabled) {
    transform: translateY(0);
    filter: brightness(0.95);
}
.mud-button-outlined[style*="border-color"] {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.mud-button-outlined[style*="border-color"]:hover:not(:disabled) {
    background-color: rgba(35, 81, 158, 0.06) !important;
}

/* ═══════════════════════════════════════════
   PREMIUM TRANSITIONS
   ═══════════════════════════════════════════ */

/* Step panel fade + slide */
.mud-tab-panel-animate {
    animation: stepFadeSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes stepFadeSlideIn {
    from { opacity: 0; transform: translateY(10px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* FormPanel entrance */
.form-panel {
    animation: formPanelIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes formPanelIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Table row stagger */
.mud-table-body .mud-table-row {
    animation: tableRowIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.mud-table-body .mud-table-row:nth-child(1)  { animation-delay: 0ms; }
.mud-table-body .mud-table-row:nth-child(2)  { animation-delay: 25ms; }
.mud-table-body .mud-table-row:nth-child(3)  { animation-delay: 50ms; }
.mud-table-body .mud-table-row:nth-child(4)  { animation-delay: 75ms; }
.mud-table-body .mud-table-row:nth-child(5)  { animation-delay: 100ms; }
.mud-table-body .mud-table-row:nth-child(6)  { animation-delay: 125ms; }
.mud-table-body .mud-table-row:nth-child(7)  { animation-delay: 150ms; }
.mud-table-body .mud-table-row:nth-child(8)  { animation-delay: 175ms; }
.mud-table-body .mud-table-row:nth-child(9)  { animation-delay: 200ms; }
.mud-table-body .mud-table-row:nth-child(10) { animation-delay: 225ms; }

@keyframes tableRowIn {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Dialog entrance */
.mud-dialog {
    animation: dialogIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

@keyframes dialogIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Chip / Badge pop */
.mud-chip {
    animation: chipPop 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes chipPop {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

/* Button press feedback */
.mud-button-root:active:not(:disabled) {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

/* Smooth hover for all cards/papers */
.mud-paper {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Alert slide in */
.mud-alert {
    animation: alertSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes alertSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}