html, body {
    height: 100%;
    margin: 0;
    font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    background: var(--mud-palette-background);
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}

/* Áreas seguras (notch) en modo standalone / PWA instalada */
.mud-appbar .mud-toolbar {
    padding-top: env(safe-area-inset-top);
    box-sizing: content-box;
}
.mud-main-content {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

/* Recientes: scroll horizontal sin barra (patrón app nativa) */
.apa-scroll-x {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 6px;
    scrollbar-width: none;
}
.apa-scroll-x::-webkit-scrollbar { display: none; }
.apa-scroll-x > * { flex: 0 0 auto; }

/* ---- Vigía: ficha de resultado ---- */
.apa-band { display:flex; align-items:center; gap:12px; padding:16px 18px; color:#fff; }
.apa-band-status { font-size:1.2rem; font-weight:800; line-height:1.1; }
.apa-band-sub { font-size:.8rem; opacity:.92; }
.apa-tag-mono {
    font-family:ui-monospace,Consolas,monospace; font-size:.8rem; font-weight:600;
    padding:3px 9px; border-radius:8px; background:var(--mud-palette-background-gray);
    border:1px solid var(--mud-palette-lines-default); display:inline-flex; align-items:center; gap:4px;
}
.apa-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); gap:8px; }
.apa-stat {
    background:var(--mud-palette-background-gray); border:1px solid var(--mud-palette-lines-default);
    border-radius:12px; padding:10px 6px; text-align:center;
}
.apa-stat .n {
    font-size:1.35rem; font-weight:800; line-height:1; color:var(--mud-palette-primary);
    font-variant-numeric:tabular-nums;
}
.apa-stat .l {
    font-size:.66rem; text-transform:uppercase; letter-spacing:.05em;
    color:var(--mud-palette-text-secondary); margin-top:4px;
}
.apa-sec {
    display:flex; align-items:center; gap:6px; font-size:.7rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.07em; color:var(--mud-palette-text-secondary);
    margin:16px 0 8px;
}
.apa-sec .mud-icon-root { font-size:1rem; }
.apa-flag {
    display:inline-flex; align-items:center; gap:5px; font-size:.8rem; padding:4px 10px;
    border-radius:999px; background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default);
}
.apa-spec {
    font-size:.78rem; padding:4px 9px; border-radius:8px; background:var(--mud-palette-background-gray);
    border:1px solid var(--mud-palette-lines-default);
}
.apa-spec b { color:var(--mud-palette-text-primary); margin-right:3px; }

/* ====== Login "efecto wow" — radar ====== */
.vigia-auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    padding: 24px calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
    background:
        radial-gradient(120% 80% at 50% -10%, #2B6BFF 0%, #1746C6 42%, #0B1B49 100%);
    color: #EAF1FF;
}
.vigia-auth-card {
    width: 100%; max-width: 380px;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
}

/* Radar */
.vigia-radar {
    position: relative; width: 168px; height: 168px; margin-bottom: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(46,110,255,.35), rgba(9,20,52,.15) 70%);
    box-shadow: 0 0 60px rgba(64,140,255,.45), inset 0 0 40px rgba(10,25,70,.6);
}
.vigia-radar .ring {
    position: absolute; inset: 0; margin: auto; border-radius: 50%;
    border: 1.5px solid rgba(180,205,255,.35);
}
.vigia-radar .r1 { width: 44px;  height: 44px; }
.vigia-radar .r2 { width: 100px; height: 100px; }
.vigia-radar .r3 { width: 160px; height: 160px; }
.vigia-radar .grid-v, .vigia-radar .grid-h {
    position: absolute; inset: 0; margin: auto; background: rgba(180,205,255,.22);
}
.vigia-radar .grid-v { width: 1.5px; height: 160px; }
.vigia-radar .grid-h { width: 160px; height: 1.5px; }
.vigia-radar .core {
    position: absolute; inset: 0; margin: auto; width: 8px; height: 8px;
    border-radius: 50%; background: #EAF1FF; box-shadow: 0 0 10px #EAF1FF;
}
.vigia-radar .sweep {
    position: absolute; inset: 0; margin: auto; width: 160px; height: 160px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(52,211,153,.0) 0deg, rgba(52,211,153,.0) 300deg, rgba(52,211,153,.55) 355deg, rgba(52,211,153,.85) 360deg);
    -webkit-mask: radial-gradient(circle, transparent 0, #000 1px);
    animation: vigia-spin 2.6s linear infinite;
}
.vigia-radar .blip {
    position: absolute; width: 11px; height: 11px; border-radius: 50%;
    background: #34D399; box-shadow: 0 0 10px #34D399;
    opacity: 0; animation: vigia-blip 2.6s linear infinite;
}
.vigia-radar .b1 { top: 40px; left: 108px; animation-delay: .5s; }
.vigia-radar .b2 { top: 104px; left: 58px;  animation-delay: 1.7s; }

@keyframes vigia-spin { to { transform: rotate(360deg); } }
@keyframes vigia-blip {
    0%, 12% { opacity: 0; transform: scale(.6); }
    16% { opacity: 1; transform: scale(1); }
    55% { opacity: .5; }
    80%, 100% { opacity: 0; transform: scale(.6); }
}
@media (prefers-reduced-motion: reduce) {
    .vigia-radar .sweep { animation: none; }
    .vigia-radar .blip { animation: none; opacity: .9; }
}

.vigia-brand {
    font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; line-height: 1;
}
.vigia-tagline {
    font-size: .82rem; opacity: .75; margin-top: 4px; margin-bottom: 26px;
    text-transform: uppercase; letter-spacing: .12em;
}

/* Formulario */
.vigia-form { width: 100%; display: flex; flex-direction: column; text-align: left; }
.vigia-label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    opacity: .8; margin: 12px 2px 6px;
}
.vigia-input {
    width: 100%; box-sizing: border-box; height: 50px; padding: 0 16px;
    border-radius: 13px; border: 1px solid rgba(180,205,255,.28);
    background: rgba(255,255,255,.08); color: #fff; font-size: 1rem;
    outline: none; transition: border-color .15s, background .15s, box-shadow .15s;
}
.vigia-input::placeholder { color: rgba(234,241,255,.45); }
.vigia-input:focus {
    border-color: #5E8CFF; background: rgba(255,255,255,.14);
    box-shadow: 0 0 0 3px rgba(94,140,255,.28);
}
.vigia-check {
    display: flex; align-items: center; gap: 8px; font-size: .85rem;
    opacity: .85; margin: 16px 2px 4px; cursor: pointer;
}
.vigia-check input { width: 16px; height: 16px; accent-color: #34D399; }
.vigia-val { color: #FCA5A5; font-size: .78rem; margin: 4px 2px 0; }
.vigia-error {
    background: rgba(220,38,38,.18); border: 1px solid rgba(248,113,113,.5);
    color: #FECACA; padding: 10px 14px; border-radius: 11px; font-size: .86rem; margin-bottom: 6px;
}
.vigia-btn {
    margin-top: 22px; height: 52px; border: none; border-radius: 14px; cursor: pointer;
    background: linear-gradient(180deg, #34D399, #10B981); color: #05261A;
    font-size: 1rem; font-weight: 800; letter-spacing: .01em;
    box-shadow: 0 10px 24px rgba(16,185,129,.35); transition: transform .08s, box-shadow .15s;
    text-decoration: none; display: flex; align-items: center; justify-content: center;
}
.vigia-btn:hover { box-shadow: 0 12px 30px rgba(16,185,129,.5); }
.vigia-btn:active { transform: translateY(1px); }
.vigia-btn-ghost {
    background: transparent; color: #EAF1FF; border: 1px solid rgba(180,205,255,.4);
    box-shadow: none; margin-top: 8px; width: 100%;
}
.vigia-msg { text-align: center; }
.vigia-msg-title { font-size: 1.25rem; font-weight: 800; margin-bottom: 6px; }
.vigia-msg p { opacity: .8; margin: 0 0 18px; }

/* ====== Tarjetas de administración (usuarios / grupos) ====== */
.admin-card {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px; margin-bottom: 8px; background: var(--mud-palette-surface);
}
.admin-card-main { display: flex; align-items: center; gap: 12px; flex: 1 1 220px; min-width: 0; }
.admin-card-title { font-weight: 600; display: flex; align-items: center; gap: 5px; line-height: 1.25; }
.admin-card-sub {
    font-size: .8rem; color: var(--mud-palette-text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-card-acciones { display: flex; align-items: center; }
.admin-stat { font-size: .8rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.admin-stat b { color: var(--mud-palette-text-primary); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    .admin-card-meta { width: 100%; justify-content: space-between; }
    .admin-card-sub { white-space: normal; }
}

/* ====== Explorar el catálogo ====== */
.explorar-hero {
    background: radial-gradient(130% 130% at 0% 0%, #2B6BFF 0%, #1544C0 55%, #0B1B49 100%);
    color: #EAF1FF; border-radius: 20px; padding: 22px 24px;
    box-shadow: 0 12px 30px rgba(21,68,192,.28); position: relative; overflow: hidden;
}
.explorar-hero::after {
    content: ""; position: absolute; top: -60px; right: -40px; width: 220px; height: 220px;
    border-radius: 50%; border: 2px solid rgba(255,255,255,.12);
    box-shadow: 0 0 0 24px rgba(255,255,255,.05), inset 0 0 0 40px rgba(255,255,255,.04);
}
.explorar-hero-title { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.explorar-hero-sub { opacity: .82; font-size: .9rem; margin-top: 3px; }
.explorar-stats { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; position: relative; z-index: 1; }
.explorar-stat {
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px; padding: 12px 16px; flex: 1 1 100px; min-width: 100px;
    cursor: pointer; transition: background .12s, border-color .12s, transform .1s;
}
.explorar-stat:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }
.explorar-stat.activo { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.6); box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset; }
.explorar-stat .n { font-size: 1.7rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.explorar-stat .l { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; opacity: .82; margin-top: 5px; }
.explorar-stat.verde .n { color: #6EE7B7; }
.explorar-stat.roja .n { color: #FCA5A5; }

.exp-facetas { display: flex; flex-wrap: wrap; gap: 22px; }
.exp-chip {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
    font-size: .8rem; padding: 5px 12px; border-radius: 999px;
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default);
    transition: border-color .12s, background .12s, transform .1s;
}
.exp-chip:hover { border-color: #1E5EFF; background: var(--mud-palette-background-gray); transform: translateY(-1px); }
.exp-chip.activo { border-color: #1E5EFF; background: rgba(30,94,255,.10); font-weight: 600; }
.exp-chip b { font-variant-numeric: tabular-nums; color: var(--mud-palette-primary); }

.exp-card {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 14px;
    background: var(--mud-palette-surface); margin-bottom: 8px; cursor: pointer;
    transition: box-shadow .12s, transform .12s, border-color .12s;
}
.exp-card:hover { box-shadow: 0 6px 18px rgba(30,94,255,.13); transform: translateY(-1px); border-color: rgba(30,94,255,.35); }
.exp-card-main { flex: 1; min-width: 0; }
.exp-card-name { font-weight: 700; line-height: 1.3; }
.exp-card-sub {
    color: var(--mud-palette-text-secondary); font-size: .8rem; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.exp-card-meta { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.exp-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.exp-estado { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; }
@media (max-width: 640px) {
    .exp-card-meta { flex-direction: column; align-items: flex-end; gap: 4px; }
    .exp-card-sub { white-space: normal; }
    .explorar-hero { padding: 18px 18px; }
    .explorar-hero-title { font-size: 1.3rem; }
    .explorar-stats { gap: 8px; }
    .explorar-stat { min-width: 0; flex: 1 1 0; padding: 10px 8px; }
    .explorar-stat .n { font-size: 1.3rem; }
    .explorar-stat .l { font-size: .62rem; }
}

/* ====== Tablero kanban del grupo ====== */
.kanban { display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch; }
.kanban-col {
    flex:0 0 auto; width:min(80vw,280px);
    background:var(--mud-palette-background-gray); border:1px solid var(--mud-palette-lines-default);
    border-radius:14px; padding:8px; align-self:flex-start;
}
.kanban-col-head { display:flex; align-items:center; justify-content:space-between; padding:8px; margin-bottom:6px; }
.kanban-count {
    background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default);
    border-radius:999px; font-size:.72rem; font-weight:700; padding:1px 9px; min-width:24px; text-align:center;
}
.kanban-vacio { text-align:center; color:var(--mud-palette-text-secondary); padding:16px 0; font-size:.85rem; }
.kanban-card {
    background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default);
    border-radius:12px; padding:11px 12px; margin-bottom:8px; cursor:pointer;
    transition:box-shadow .12s, transform .12s;
}
.kanban-card:hover { box-shadow:0 4px 14px rgba(0,0,0,.10); transform:translateY(-1px); }
.kanban-pill {
    display:inline-flex; align-items:center; gap:3px; font-size:.72rem; padding:2px 7px; border-radius:999px;
    background:var(--mud-palette-background-gray); border:1px solid var(--mud-palette-lines-default);
}
.kanban-pill .mud-icon-root { font-size:.9rem; }
.apa-coment { padding:8px 0; border-bottom:1px solid var(--mud-palette-lines-default); }

/* En celular: columnas apiladas (una debajo de otra), sin scroll horizontal.
   El estado se cambia desde el detalle, así que no hay arrastre entre columnas. */
@media (max-width: 640px) {
    .kanban { flex-direction: column; overflow-x: visible; gap: 12px; }
    .kanban-col { width: auto; align-self: stretch; }
    .kanban-col-head { margin-bottom: 8px; }
}

/* ====== Escáner por cámara ====== */
.escaner-overlay {
    position: fixed; inset: 0; z-index: 2000; background: #000;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.escaner-video { width: 100%; height: 100%; object-fit: cover; }
.escaner-marco {
    position: absolute; width: min(74vw, 340px); height: min(48vw, 210px);
    border: 3px solid rgba(255,255,255,.92); border-radius: 18px;
    box-shadow: 0 0 0 100vmax rgba(0,0,0,.5);
}
.escaner-linea {
    position: absolute; width: min(74vw, 340px); height: 2px;
    background: linear-gradient(90deg, transparent, #34D399, transparent);
    animation: escaner-scan 2s ease-in-out infinite;
}
@keyframes escaner-scan {
    0%, 100% { transform: translateY(min(-24vw, -105px)); }
    50% { transform: translateY(min(24vw, 105px)); }
}
@media (prefers-reduced-motion: reduce) { .escaner-linea { animation: none; } }
.escaner-top {
    position: fixed; top: 0; left: 0; right: 0; z-index: 2001;
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(10px + env(safe-area-inset-top)) 12px 10px 20px;
    color: #fff; font-weight: 600; background: linear-gradient(#000a, transparent);
}
.escaner-error {
    position: fixed; left: 16px; right: 16px; bottom: calc(40px + env(safe-area-inset-bottom));
    z-index: 2001; text-align: center; color: #fff;
    background: rgba(0,0,0,.7); padding: 16px; border-radius: 14px;
}

/* Error boundary de Blazor */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box;
    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: 0.75rem; top: 0.5rem; }