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

/* ---- LEGO Inventory portal ---- */
.card {
    background: #fff;
    border: 1px solid #e3e3ea;
    border-radius: 12px;
    padding: 16px;
    margin: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    max-width: 720px;
}
.card h2 { margin-top: 0; }
/* ---- Hub tabs (Sets / Minifiguras) ---- */
.tabstrip { display:flex; gap:4px; flex-wrap:wrap; border-bottom:2px solid #e5e7eb; margin:0 0 14px; }
.tabstrip .tab { padding:8px 16px; text-decoration:none; color:#6b7280; font-weight:600; font-size:14px; border-bottom:2px solid transparent; margin-bottom:-2px; }
.tabstrip .tab:hover { color:#374151; }
.tabstrip .tab.active { color:#2a5bd7; border-bottom-color:#2a5bd7; }

/* ---- Area dashboard KPI cards ---- */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; margin:12px 0; }
.kpi { background:#f7f8fa; border:1px solid #e5e7eb; border-radius:8px; padding:14px 16px; }
.kpi-num { font-size:26px; font-weight:700; color:#2a5bd7; line-height:1.1; }
.kpi-num.kpi-green { color:#1e8e5a; }
.kpi-num.kpi-amber { color:#b7791f; }
.kpi-lbl { color:#6b7280; font-size:12px; margin-top:4px; }
.field {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 6px 0 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 16px;
}
.field.narrow { width: 120px; display: inline-block; }
.btn {
    display: inline-block;
    background: #2a5bd7;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    margin: 4px 6px 4px 0;
}
.btn.secondary { background: #5b6472; }
.btn:disabled { opacity: .6; cursor: default; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.search-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.muted { color: #6b7280; }
.small { font-size: 13px; }
.big { font-size: 18px; font-weight: 600; }
.error { color: #c0392b; font-weight: 600; }
.owned { color: #1e7e34; }
.not-owned { color: #b34700; }
.result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}
.result:hover { background: #f6f8ff; }
.check { display: block; margin: 8px 0; }
table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #eee; }

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;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- Gate 9B: dashboard tiles, badges, filters, responsive lists ---- */
.card.full { max-width: none; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tile { background: #fff; border: 1px solid #e3e3ea; border-radius: 12px; padding: 14px; }
.tile .label { color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.tile .value { font-size: 26px; font-weight: 700; margin-top: 4px; line-height: 1.1; }
.tile .sub { color: #6b7280; font-size: 12px; margin-top: 2px; }
.section-title { margin: 18px 12px 2px; font-weight: 600; color: #374151; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.green { background: #e7f6ec; color: #1e7e34; }
.badge.grey { background: #eef0f3; color: #5b6472; }
.badge.yellow { background: #fff6e0; color: #9a6700; }
.badge.red { background: #fdecea; color: #c0392b; }
.badge.blue { background: #e8f0fe; color: #1a56db; }
.badge.orange { background: #fff0e6; color: #b34700; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters .field, .filters select.field { width: auto; margin: 4px 0; min-width: 130px; }
.list-card { display: flex; gap: 12px; align-items: center; padding: 10px; border-bottom: 1px solid #eee; text-decoration: none; color: inherit; }
.list-card:hover { background: #f6f8ff; }
.thumb { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: #f3f4f6; flex: 0 0 auto; }
.thumb.lg { width: 140px; height: 140px; }
.grow { flex: 1 1 auto; min-width: 0; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pager { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.skeleton { background: linear-gradient(90deg,#eee,#f5f5f5,#eee); border-radius: 8px; height: 16px; margin: 8px 0; animation: pulse 1.2s infinite; }
@keyframes pulse { 0% { opacity: .6 } 50% { opacity: 1 } 100% { opacity: .6 } }
.progress { background: #eef0f3; border-radius: 999px; height: 10px; overflow: hidden; margin: 6px 0; }
.progress > span { display: block; height: 100%; background: #2a5bd7; }
.env-badge { background: #9a6700; color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 6px; margin-left: 8px; }

/* ---- LEGO theme (Gate 9B aesthetics) ---- */
:root {
    /* Paleta inspirada en bloques de construcción (genérica, sin branding oficial). */
    --brick-red: #D62828;
    --brick-yellow: #FBBF24;
    --brick-blue: #2563EB;
    --brick-green: #16A34A;
    --ink: #111827;
    --bg: #F3F4F6;
    --border: #E5E7EB;
    --card: #FFFFFF;
    /* Alias de compatibilidad con clases existentes. */
    --lego-red: #D62828;
    --lego-yellow: #FBBF24;
    --lego-blue: #2563EB;
    --lego-green: #16A34A;
    --lego-ink: #111827;
}
body { background: var(--bg); color: var(--ink); }
h1, h2, h3, h4 { color: var(--lego-ink); }
a, .btn-link { color: var(--lego-blue); }

.card {
    border: 1px solid #e6e8ef;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(20, 30, 60, 0.06);
}

.btn {
    background: var(--lego-blue);
    border-radius: 10px;
    box-shadow: 0 2px 0 #00518c;
    font-weight: 600;
}
.btn:hover { background: #0a78c9; }
.btn:active { box-shadow: none; transform: translateY(1px); }
.btn.secondary { background: #5b6472; box-shadow: 0 2px 0 #434a55; }
.btn.secondary:hover { background: #6a7382; }

.tile { transition: box-shadow .12s ease, transform .12s ease; }
.tile:hover { box-shadow: 0 6px 16px rgba(20, 30, 60, 0.10); transform: translateY(-1px); }
.tile .value { color: var(--lego-ink); }

/* Two little LEGO studs before each section title */
.section-title { display: flex; align-items: center; color: var(--lego-ink); font-weight: 700; }
.section-title::before {
    content: "";
    width: 12px; height: 12px; border-radius: 3px;
    background: var(--lego-red);
    box-shadow: 16px 0 0 0 var(--lego-yellow);
    margin-right: 24px;
}

.list-card { border-radius: 10px; }
.list-card:hover { background: #eef3ff; }
.progress > span { background: var(--lego-blue); }
.badge.green { background: #e6f5ec; color: var(--lego-green); }

/* ===== UI Branding v1 — header, footer, estados, accesibilidad ===== */
.app-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 10px 16px; margin: 0 0 14px;
    background: var(--ink); color: #fff;
    border-radius: 0 0 14px 14px;
}
.app-brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.app-brick { width: 30px; height: 30px; flex: 0 0 auto; }
.app-title {
    font-weight: 700; font-size: 16px; color: #fff; line-height: 1.15;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-user { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.app-header a { color: #cfe0ff; }
.app-header .btn { color: #fff; }
.btn.sm { padding: 6px 10px; font-size: 13px; box-shadow: none; }
.app-footer {
    margin: 26px 12px 8px; padding: 14px 4px; border-top: 1px solid var(--border);
    color: #6b7280; font-size: 13px;
    display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap;
}
.app-footer .brand-mini { font-weight: 600; color: var(--ink); }

/* Estados / mensajes (no dependen solo del color: llevan icono + texto). */
.alert { border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: 14px; border: 1px solid transparent; }
.alert .ico { margin-right: 6px; }
.alert.info    { background: #e8f0fe; color: #1e429f; border-color: #c7dbff; }
.alert.success { background: #e6f5ec; color: var(--brick-green); border-color: #b7e3c6; }
.alert.warning { background: #fff6e0; color: #9a6700; border-color: #f6e0a8; }
.alert.error   { background: #fdecea; color: #b42318; border-color: #f6c9c4; }
.empty-state { text-align: center; color: #6b7280; padding: 28px 12px; }
.empty-state .ico { font-size: 34px; display: block; margin-bottom: 6px; opacity: .7; }

/* Botones por intención. */
.btn.success { background: var(--brick-green); box-shadow: 0 2px 0 #0f7a37; }
.btn.danger  { background: var(--brick-red);  box-shadow: 0 2px 0 #a51f1f; }
.btn.warning { background: var(--brick-yellow); color: #3a2c00; box-shadow: 0 2px 0 #d99e00; }

/* Accesibilidad: foco siempre visible. */
a:focus-visible, button:focus-visible, .btn:focus-visible, .field:focus-visible,
input:focus-visible, select:focus-visible {
    outline: 3px solid #93c5fd; outline-offset: 2px;
}
.btn { transition: background .12s ease, transform .05s ease; }
.thumb { background: var(--bg); }

/* Responsive: en móvil el título puede ajustar a varias líneas. */
@media (max-width: 640px) {
    .app-title { white-space: normal; font-size: 15px; }
    .app-header { padding: 10px 12px; }
}