/* ============================================================
   Carbon Design System — Layout, Cards, Alerts, Badges, Utils
   Referencia: https://carbondesignsystem.com/guidelines/layout/
   ============================================================ */

html, body { overflow-y: auto; max-width: 100%; }
.container-fluid { max-width: 100%; overflow-x: hidden; }
.chart-container, .bb-chart-container { max-width: 100%; overflow: hidden; }
svg { max-width: 100%; height: auto; }
.content { padding-top: var(--carbon-spacing-05); }

/* ── Blazor loading ── */
.loading-progress {
    position: absolute; display: block;
    width: 8rem; height: 8rem;
    inset: 20vh 0 auto 0; margin: 0 auto;
}
.loading-progress circle {
    fill: none; stroke: var(--carbon-ui-03);
    stroke-width: 0.6rem; transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--carbon-blue);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute; text-align: center; font-weight: 400;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

#blazor-error-ui {
    color-scheme: light only;
    background: var(--carbon-red-light);
    border-top: 3px solid var(--carbon-red);
    bottom: 0; box-sizing: border-box; display: none;
    left: 0; padding: 0.75rem 1.5rem;
    position: fixed; width: 100%; z-index: 1000;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 0.875rem; color: var(--carbon-red);
    border-radius: 0;
}
#blazor-error-ui .dismiss {
    cursor: pointer; position: absolute; right: 1rem; top: 0.625rem;
    color: var(--carbon-red);
}
.blazor-error-boundary {
    background: var(--carbon-red);
    padding: 1rem 1rem 1rem 3.5rem;
    color: white;
    border-radius: 0;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ── Cards — Carbon "Tile" style ── */
.card {
    background-color: var(--carbon-bg-2) !important;
    border: 1px solid var(--carbon-separator) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: none !important;
    animation: none !important;
}
.card:hover {
    box-shadow: var(--carbon-shadow-sm) !important;
    transform: none !important;
}
.card-header {
    background-color: var(--carbon-ui-01) !important;
    border-bottom: 1px solid var(--carbon-separator) !important;
    border-radius: 0 !important;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.16px;
    color: var(--carbon-text-01) !important;
    padding: 0.875rem 1rem;
}
.card-body { padding: 1rem; }
.card-title {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--carbon-text-01);
    margin-bottom: 0;
    letter-spacing: 0;
}

/* ── Alerts — Carbon "Notification" style ── */
.alert {
    border-radius: 0 !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 0.875rem;
    padding: 0.875rem 1rem;
    animation: none !important;
}
.alert-info {
    background-color: var(--carbon-blue-subtle) !important;
    color: var(--carbon-text-01) !important;
    border-left-color: var(--carbon-blue) !important;
}
.alert-success {
    background-color: var(--carbon-green-light) !important;
    color: var(--carbon-text-01) !important;
    border-left-color: var(--carbon-green) !important;
}
.alert-warning {
    background-color: var(--carbon-yellow-light) !important;
    color: var(--carbon-text-01) !important;
    border-left-color: var(--carbon-yellow) !important;
}
.alert-danger {
    background-color: var(--carbon-red-light) !important;
    color: var(--carbon-text-01) !important;
    border-left-color: var(--carbon-red) !important;
}

/* ── Badges — Carbon "Tag" style ── */
.badge {
    border-radius: 0 !important;       /* Carbon tags son rectangulares */
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.32px;
    padding: 0.125rem 0.5rem;
    line-height: 1.5rem;
    display: inline-flex;
    align-items: center;
}
.badge.bg-primary {
    background-color: var(--carbon-blue-subtle) !important;
    color: var(--carbon-blue) !important;
    outline: 1px solid var(--carbon-blue-light);
}
.badge.bg-secondary {
    background-color: var(--carbon-ui-03) !important;
    color: var(--carbon-text-02) !important;
    outline: 1px solid var(--carbon-ui-03);
}
.badge.bg-success {
    background-color: var(--carbon-green-light) !important;
    color: var(--carbon-green) !important;
    outline: 1px solid #a7f0ba;
}
.badge.bg-warning {
    background-color: var(--carbon-yellow-light) !important;
    color: #8a6000 !important;
    outline: 1px solid var(--carbon-yellow);
}
.badge.bg-danger {
    background-color: var(--carbon-red-light) !important;
    color: var(--carbon-red) !important;
    outline: 1px solid #ffb3b8;
}
.badge.bg-info {
    background-color: #d9fbfb !important;
    color: var(--carbon-teal) !important;
    outline: 1px solid #9ef0f0;
}
.badge.bg-light {
    background-color: var(--carbon-ui-01) !important;
    color: var(--carbon-text-01) !important;
    outline: 1px solid var(--carbon-ui-03);
}
.badge.bg-dark {
    background-color: var(--carbon-ui-05) !important;
    color: #ffffff !important;
}
.badge.bg-success-subtle {
    background-color: var(--carbon-green-light) !important;
    color: var(--carbon-green) !important;
}

/* ── Spinners ── */
.spinner-border, .spinner-border-sm {
    color: var(--carbon-blue) !important;
    border-width: 2px;
}

/* ── Utilities ── */
hr { border-color: var(--carbon-separator); opacity: 1; }
.text-muted   { color: var(--carbon-text-02) !important; }
.text-primary { color: var(--carbon-blue) !important; }
.text-success { color: var(--carbon-green) !important; }
.text-danger  { color: var(--carbon-red) !important; }
.text-warning { color: var(--carbon-orange) !important; }
.bg-light     { background-color: var(--carbon-ui-01) !important; }
.bg-white     { background-color: var(--carbon-bg-2) !important; }
.border       { border: 1px solid var(--carbon-separator) !important; }
.border-end   { border-right: 1px solid var(--carbon-separator) !important; }
.rounded      { border-radius: 0 !important; }     /* Carbon override: sin radius */
.cursor-pointer { cursor: pointer; }
.hover-bg-light:hover { background-color: var(--carbon-hover-ui) !important; }

/* ── Validation ── */
.valid.modified:not([type=checkbox]) {
    outline: 2px solid var(--carbon-green) !important;
    outline-offset: -2px;
    box-shadow: none !important;
}
.invalid {
    outline: 2px solid var(--carbon-red) !important;
    outline-offset: -2px;
    box-shadow: none !important;
}
.validation-message {
    color: var(--carbon-red);
    font-size: 0.75rem;
    letter-spacing: 0.32px;
    margin-top: 0.25rem;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

/* ── Jumbotron / Hero ── */
.jumbotron.bg-primary {
    background: var(--carbon-blue) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 768px) { .chart-container { padding: 4px; } }