html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.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."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}
/* Todas las tarjetas con igual altura y acciones abajo */
.card-stretch {
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .card-stretch .card-grow {
        flex: 1 1 auto;
    }

/* Paletas suaves según estado */
/* ===== Tarjetas por estado (bordes más gruesos) ===== */
.mud-card.flow-border {
    overflow: visible !important;
}
.card-ok {
    border: 1px solid rgba(76, 175, 80, .35); /* antes 1px */
    box-shadow: 0 6px 18px rgba(0,0,0,.05);
    background: rgba(76, 175, 80, .02);
}

.card-alerta-ambar {
    border: 1px solid rgba(255, 193, 7, .45); /* antes 1px */
    box-shadow: 0 10px 26px rgba(255, 193, 7, .18);
    background: rgba(255, 193, 7, .06);
}

.card-alerta-roja {
    border: 1px solid rgba(221, 44, 44, .5); /* antes 1px */
    box-shadow: 0 12px 30px rgba(221, 44, 44, .22);
    background: rgba(221, 44, 44, .07);
}

    /* Efecto de foco/hover consistente (ligero ring) */
    .card-ok:hover,
    .card-alerta-ambar:hover,
    .card-alerta-roja:hover,
    .metric-card:hover {
        box-shadow: 0 0 0 3px rgba(0,0,0,.06), 0 12px 30px rgba(0,0,0,.08);
        transform: translateY(-1px);
        transition: box-shadow .15s ease, transform .15s ease;
    }

/* ===== KPI cards (bordes más gruesos) ===== */
.metric-card {
    border: 2px solid rgba(33, 150, 243, .25);
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
    background: rgba(33, 150, 243, .02);
}

    .metric-card.warn {
        border-color: rgba(255, 193, 7, .5);
        background: rgba(255, 193, 7, .04);
    }

    .metric-card.danger {
        border-color: rgba(221, 44, 44, .5);
        background: rgba(221, 44, 44, .04);
    }

/* ===== Columnas de zona ===== */
.zona-col {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 220px);
    min-height: 480px;
}

.zona-header {
    flex: 0 0 auto;
    padding: 6px 4px;
    margin-bottom: 4px;
    border-bottom: 2px dashed rgba(0,0,0,.1); /* más visible */
}

.zona-list {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

/* ===== Tarjeta compacta ===== */
.dense-card {
    padding: 4px !important;
}

    .dense-card .mud-card-content {
        padding-top: 4px !important;
        padding-bottom: 8px !important;
    }

    /* ===== Accesibilidad: foco con teclado ===== */
    .dense-card:focus-within,
    .dense-card:focus {
        outline: 0;
        box-shadow: 0 0 0 3px rgba(33, 150, 243, .25) !important;
    }

/* ===== Modo oscuro (si usas PaletteDark) – opcional ===== */
@media (prefers-color-scheme: dark) {
    .zona-header {
        border-bottom-color: rgba(255,255,255,.12);
    }

    .metric-card {
        box-shadow: 0 8px 20px rgba(0,0,0,.35);
    }

    .card-ok, .card-alerta-ambar, .card-alerta-roja {
        box-shadow: 0 10px 26px rgba(0,0,0,.35);
    }
}
/* ==== Borde animado tipo "flujo" para tarjetas ==== */
/* Aplica esta clase adicional: .flow-border */
/* ==== Borde animado tipo flujo (con mask, súper visible) ==== */
/* ==== Borde animado visible y compatible (sin mask) ==== */
/* ==== Borde animado corregido - fluye alrededor de la tarjeta ==== */
.mud-card.flow-border {
    position: relative;
    border: 1px solid transparent !important;
    border-radius: 14px;
    background: var(--mud-palette-surface) padding-box;
    overflow: hidden;
}

    .mud-card.flow-border::before {
        content: '';
        position: absolute;
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        border-radius: 15px;
        background: conic-gradient( from 0deg at 50% 50%, var(--flow-c1) 0%, var(--flow-c2) 25%, var(--flow-c3) 50%, var(--flow-c4) 75%, var(--flow-c1) 100% );
        background-size: 200% 200%;
        animation: flow-around 2s linear infinite;
        z-index: 0;
    }

    .mud-card.flow-border > * {
        position: relative;
        z-index: 1;
        background: inherit;
    }

/* Animación que hace fluir el gradiente alrededor del borde */
@keyframes flow-around {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 200% 200%;
    }
}

/* Alternativa más suave - usando transform-origin */
.mud-card.flow-border.alternative::before {
    background: conic-gradient( var(--flow-c1) 0%, var(--flow-c2) 25%, var(--flow-c3) 50%, var(--flow-c4) 75%, var(--flow-c1) 100% );
    animation: rotate-conic 3s linear infinite;
    transform-origin: center center;
}

@keyframes rotate-conic {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Otra alternativa - efecto de barrido circular */
.mud-card.flow-border.sweep::before {
    background: conic-gradient( transparent 0deg, var(--flow-c1) 10deg, var(--flow-c2) 90deg, transparent 100deg );
    animation: sweep-around 1.5s linear infinite;
}

@keyframes sweep-around {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Versión más simple y efectiva */
.mud-card.flow-border.simple::before {
    background: conic-gradient( from 0deg, var(--flow-c1), var(--flow-c2), var(--flow-c3), var(--flow-c4), var(--flow-c1) );
    animation: spin-border 2s linear infinite;
}

@keyframes spin-border {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Paletas por estado */
.card-ok {
    box-shadow: 0 6px 18px rgba(0,0,0,.05);
    background: rgba(76, 175, 80, .02);
    --flow-c1: #4caf50;
    --flow-c2: #2e7d32;
    --flow-c3: #1b5e20;
    --flow-c4: #81c784;
}

.card-alerta-ambar {
    box-shadow: 0 10px 26px rgba(255, 193, 7, .18);
    background: rgba(255, 193, 7, .06);
    --flow-c1: #ffc107;
    --flow-c2: #ff9800;
    --flow-c3: #f57c00;
    --flow-c4: #ffd54f;
}

.card-alerta-roja {
    box-shadow: 0 12px 30px rgba(221, 44, 44, .22);
    background: rgba(221, 44, 44, .07);
    --flow-c1: #f44336;
    --flow-c2: #d32f2f;
    --flow-c3: #b71c1c;
    --flow-c4: #ef5350;
}

/* Asegurar que el contenido tenga fondo */
.mud-card.flow-border .mud-card-content {
    background: inherit;
    border-radius: 11px;
    margin: 1px;
}
/* 1) Si hay flow-border, elimina el borde fijo de estado */
.mud-card.flow-border.card-ok,
.mud-card.flow-border.card-alerta-ambar,
.mud-card.flow-border.card-alerta-roja {
    border: 0 !important;
}

/* 2) Anillo animado más delgado (1px) usando mask para recortar el centro */
.mud-card.flow-border::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; /* sin “-1px” extra */
    padding: 1px; /* grosor del anillo */
    border-radius: 14px; /* igual al card */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* 3) Por si algún estilo vuelve a forzar overflow */
.mud-card.flow-border {
    overflow: hidden !important;
}