/* ── Logistics animations for Landing page ── */
@keyframes float-card {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-12px); }
}
@keyframes float-card-delayed {
    0%, 100% { transform: translateY(-6px); }
    50%       { transform: translateY(6px); }
}
@keyframes slide-in-right {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes pulse-live {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%       { opacity: 0.4; transform: scale(0.75); }
}
@keyframes truck-bounce {
    0%, 100% { transform: translateX(0) rotate(-1deg); }
    50%       { transform: translateX(8px) rotate(1deg); }
}
@keyframes fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes bar-grow {
    from { width: 0; }
    to   { width: var(--bar-w, 100%); }
}
@keyframes progress-run {
    0%   { width: 15%; }
    100% { width: 85%; }
}

.logi-card         { animation: float-card 4s ease-in-out infinite; }
.logi-card-delayed { animation: float-card-delayed 4s ease-in-out infinite; }
.logi-pulse        { animation: pulse-live 1.8s ease-in-out infinite; }
.logi-truck        { animation: truck-bounce 2.2s ease-in-out infinite; display:inline-block; }
.logi-fadein       { animation: fade-up 0.6s ease forwards; }
.logi-fadein-2     { animation: fade-up 0.6s ease 0.2s both; }
.logi-fadein-3     { animation: fade-up 0.6s ease 0.4s both; }
.logi-progress     { animation: progress-run 4s ease-in-out infinite alternate; }

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 3.5rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }
/* Landing */
.sn-landing {
    background: #f6f7f2;
    color: #0d1520;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.sn-header {
    align-items: center;
    background: rgba(13, 21, 32, .94);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    gap: 24px;
    height: 68px;
    justify-content: space-between;
    left: 0;
    padding: 0 40px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000;
}

.sn-brand,
.sn-link-button,
.sn-primary-button,
.sn-hero-cta,
.sn-hero-secondary {
    cursor: pointer;
    font: inherit;
}

.sn-brand {
    background: transparent;
    border: 0;
    color: #fff;
    font-family: Georgia, serif;
    font-size: 1.35rem;
    font-weight: 700;
    padding: 0;
}

.sn-brand strong,
.sn-footer strong {
    color: #f97316;
}

.sn-primary-button,
.sn-hero-cta,
.sn-solution-grid i,
.sn-feature-list i {
    color: #f97316;
}

.sn-nav {
    align-items: center;
    display: flex;
    gap: 30px;
}

.sn-nav a {
    color: rgba(255, 255, 255, .76);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.sn-actions,
.sn-hero-actions {
    align-items: center;
    display: flex;
    gap: 12px;
}

.sn-link-button,
.sn-primary-button {
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    padding: 9px 18px;
}

.sn-link-button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
}

.sn-primary-button,
.sn-hero-cta {
    background: #f97316;
    border: 1px solid #f97316;
    color: #fff;
}

.sn-hero {
    min-height: 94vh;
    overflow: hidden;
    position: relative;
}

.sn-hero-image,
.sn-hero-shade {
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.sn-hero-image {
    object-fit: cover;
}

.sn-hero-shade {
    background: linear-gradient(90deg, rgba(6, 10, 16, .92) 0%, rgba(6, 10, 16, .68) 42%, rgba(6, 10, 16, .18) 100%);
}

.sn-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 780px;
    min-height: 94vh;
    padding: 128px 40px 80px;
    position: relative;
    width: min(70vw, 780px);
}

.sn-eyebrow {
    color: #67e8d1;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0 0 16px;
    text-transform: uppercase;
}

.sn-eyebrow.dark {
    color: #087568;
}

.sn-hero h1 {
    color: #fff;
    font-size: clamp(2.5rem, 6vw, 5.2rem);
    font-weight: 800;
    line-height: 1;
    margin: 0 0 24px;
    max-width: 760px;
}

.sn-hero-copy {
    color: rgba(255, 255, 255, .82);
    font-size: 1.1rem;
    line-height: 1.75;
    margin: 0 0 34px;
    max-width: 620px;
}

.sn-hero-cta,
.sn-hero-secondary {
    border-radius: 4px;
    font-size: 16px;
    font-weight: 800;
    padding: 14px 24px;
}

.sn-hero-secondary {
    background: rgba(13, 21, 32, .72);
    border: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
}

.sn-metrics {
    background: #111b27;
    color: #fff;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0 40px;
}

.sn-metrics article {
    border-right: 1px solid rgba(255, 255, 255, .12);
    padding: 34px 24px;
}

.sn-metrics strong {
    display: block;
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: 8px;
}

.sn-metrics span {
    color: rgba(255, 255, 255, .68);
    font-size: 14px;
}

.sn-section {
    padding: 96px 40px;
}

.sn-split {
    display: grid;
    gap: 72px;
    grid-template-columns: minmax(280px, 430px) 1fr;
    margin: 0 auto;
    max-width: 1180px;
}

.sn-section h2,
.sn-image-band h2,
.sn-final-cta h2 {
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.08;
    margin: 0 0 22px;
}

.sn-section p,
.sn-image-band p {
    color: #4b5563;
    font-size: 1rem;
    line-height: 1.8;
    margin: 0;
}

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

.sn-solution-grid article,
.sn-card-grid article {
    background: #fff;
    border: 1px solid #dfe4dc;
    border-radius: 8px;
    padding: 24px;
}

.sn-solution-grid i {
    color: #00a98f;
    font-size: 22px;
    margin-bottom: 18px;
}

.sn-solution-grid h3,
.sn-card-grid h3 {
    font-size: 1.05rem;
    margin: 0 0 10px;
}

.sn-image-band {
    align-items: stretch;
    background: #fff;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    min-height: 620px;
}

.sn-image-band-media {
    min-height: 440px;
}

.sn-image-band-media img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.sn-image-band-content {
    align-self: center;
    padding: 80px 56px;
}

.sn-feature-list {
    display: grid;
    gap: 12px;
    margin-top: 28px;
}

.sn-feature-list span {
    align-items: center;
    color: #172033;
    display: flex;
    font-weight: 700;
    gap: 10px;
}

.sn-feature-list i {
    color: #00a98f;
}

.sn-section-heading {
    margin: 0 auto 40px;
    max-width: 700px;
    text-align: center;
}

.sn-showcase {
    background: #fff;
}

.sn-showcase-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 auto;
    max-width: 1180px;
}

.sn-showcase-grid article {
    background: #f8fafc;
    border: 1px solid #dfe4dc;
    border-radius: 8px;
    overflow: hidden;
}

.sn-showcase-grid img {
    background: #fff;
    display: block;
    width: 100%;
}

.sn-showcase-grid article > div {
    padding: 24px;
}

.sn-showcase-grid h3 {
    font-size: 1.25rem;
    margin: 0 0 10px;
}

.sn-cards {
    background: #eef1ea;
}

.sn-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 auto;
    max-width: 1120px;
}

.sn-card-grid span {
    color: #087568;
    display: block;
    font-size: .85rem;
    font-weight: 900;
    margin-bottom: 32px;
}

.sn-final-cta {
    align-items: center;
    background: #0d1520;
    color: #fff;
    display: flex;
    gap: 32px;
    justify-content: space-between;
    padding: 76px 40px;
}

.sn-final-cta > div {
    max-width: 760px;
}

.sn-final-cta h2 {
    margin-bottom: 0;
}

.sn-footer {
    align-items: center;
    background: #080d13;
    color: rgba(255, 255, 255, .8);
    display: flex;
    justify-content: space-between;
    padding: 28px 40px;
}

.sn-footer span {
    color: #fff;
    font-family: Georgia, serif;
    font-size: 1.1rem;
    font-weight: 700;
}

@media (max-width: 900px) {
    .sn-header {
        padding: 0 18px;
    }

    .sn-nav {
        display: none;
    }

    .sn-actions {
        gap: 8px;
    }

    .sn-link-button,
    .sn-primary-button {
        padding: 8px 10px;
    }

    .sn-hero-content {
        padding: 112px 22px 56px;
        width: 100%;
    }

    .sn-hero-shade {
        background: linear-gradient(90deg, rgba(6, 10, 16, .94), rgba(6, 10, 16, .58));
    }

    .sn-hero-actions,
    .sn-final-cta {
        align-items: stretch;
        flex-direction: column;
    }

    .sn-metrics,
    .sn-split,
    .sn-image-band,
    .sn-showcase-grid,
    .sn-card-grid {
        grid-template-columns: 1fr;
    }

    .sn-metrics {
        padding: 0 22px;
    }

    .sn-metrics article {
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        border-right: 0;
        padding: 24px 0;
    }

    .sn-section,
    .sn-image-band-content,
    .sn-final-cta {
        padding: 64px 22px;
    }

    .sn-solution-grid {
        grid-template-columns: 1fr;
    }

    .sn-footer {
        align-items: flex-start;
        flex-direction: column;
        padding: 28px 22px;
    }
}

/* ── App Responsive — tablas y contenido en móvil ── */
@media (max-width: 599px) {
    /* Tablas con scroll horizontal */
    .mud-table-container { overflow-x: auto !important; }
    .mud-simple-table     { display: block; overflow-x: auto !important; }
    .mud-table-cell { padding: 6px 8px !important; }

    /* Barras de filtro/búsqueda: apilar campos en pantallas pequeñas.
       Aplica a mud-stack-row dentro de mud-paper (tarjeta de filtros)
       pero NO dentro de celdas de tabla ni chips de color pequeños. */
    .mud-paper > .mud-stack.mud-stack-row,
    .mud-paper > div > .mud-stack.mud-stack-row {
        flex-wrap: wrap !important;
        gap: 8px;
    }

    /* Inputs y selects con min-width explícito dentro de filtros */
    .mud-paper .mud-stack.mud-stack-row .mud-input-control {
        min-width: auto !important;
        flex: 1 1 140px;
    }
}
@media (max-width: 599px) {
    /* Diálogos: máximo ancho de pantalla menos margen en móvil */
    .mud-dialog {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: 8px !important;
    }
    .mud-dialog-content {
        padding: 12px 16px !important;
    }
}
@media (max-width: 899px) {
    /* Tablets */
    .mud-main-content { padding: 8px !important; }
}

/* ── SeccionCard — componente de agrupación ── */
.sn-section-card {
    background: #ffffff;
    border: 1px solid #CBD5E1;
    border-left: 3px solid #2563EB;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}
.sn-section-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
}
.sn-section-card__title {
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
    flex: 1;
    line-height: 1.3;
}
.sn-section-card__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}
.sn-section-card__body {
    padding: 16px;
}