/* Página de SBA: tema de la app (almacen/ui/tema.py): Segoe UI Variable, acento #7C5CFF → #FF4D8D,
   tarjetas de 14 px, lateral con la sección elegida en lila. Sigue el claro/oscuro de la web, como la app. */

.tema-sba .pp { font-family: var(--t-fuente); }
.sba-hero { display: grid; gap: 28px; align-items: center; padding-top: 24px; padding-bottom: 48px; }
@media (min-width: 800px) { .sba-hero { grid-template-columns: 220px 1fr; gap: 48px; padding-top: 48px; } }
.sba-hero-logo { width: 160px; position: relative; }
@media (min-width: 800px) { .sba-hero-logo { width: 220px; } }
.sba-hero-logo img { width: 100%; height: auto; filter: drop-shadow(0 20px 40px rgb(124 92 255 / 45%)); animation: sba-giro 8s ease-in-out infinite; }
@keyframes sba-giro { 50% { transform: rotate(-4deg) scale(1.03); } }
.sba-ante { font: 600 .85rem var(--t-fuente); color: var(--t-acento); margin-bottom: 10px; }
.sba-h1 { font: 700 clamp(2.4rem, 8vw, 4.4rem)/1.05 var(--t-titulos); letter-spacing: -0.02em; }
.sba-h1 span { background: linear-gradient(90deg, #8F73FF, #FF6A9F); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sba-lead { font-size: 1.12rem; color: var(--t-texto-2); margin: 18px 0 10px; max-width: 38em; }
.sba-nombre { font-size: .92rem; color: var(--t-texto-2); }
.sba-h2 { font: 700 1.8rem var(--t-titulos); margin-bottom: 18px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.sba-h2 small { font: 600 .75rem var(--t-fuente); padding: 4px 10px; border-radius: 999px; background: var(--t-chip); color: var(--t-acento); }

/* ----- Ventana ----- */
.sba-demo { padding-bottom: 48px; }
.sba-ventana.grande { max-width: none; display: block; border-radius: 10px; box-shadow: 0 30px 70px -30px rgb(60 40 140 / 55%); }
.sba-ventana.grande .sba-app { min-height: 440px; }
.sba-ventana.grande .sba-lateral { width: 220px; display: flex; }
.sba-ventana.grande .sba-nav { font-size: .9rem; padding: 10px 12px; }
@media (max-width: 760px) {
  .sba-ventana.grande .sba-app { flex-direction: column; }
  .sba-ventana.grande .sba-lateral { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--t-borde); padding: 8px; gap: 4px; }
  .sba-ventana.grande .sba-marca { display: none; }
  .sba-ventana.grande .sba-nav { white-space: nowrap; flex: none; }
}
.sba-nav { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--t-texto); font-family: var(--t-fuente); text-align: left; border-radius: 10px; cursor: pointer; }
.sba-nav:hover { background: var(--t-visual); }
.sba-nav[aria-selected="true"] { background: var(--t-chip); font-weight: 600; }
.sba-glifo { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.sba-main { min-width: 0; }
.sba-ventana.grande .sba-main { padding: 22px; }
.sba-panel.entra { animation: sba-entra .25s ease; }
@keyframes sba-entra { from { opacity: 0; transform: translateY(6px); } }
.sba-p-cabeza h3 { font: 700 1.5rem var(--t-titulos); }
.sba-p-cabeza p { color: var(--t-texto-2); font-size: .92rem; margin: 4px 0 18px; }

.sba-inicio { display: grid; gap: 20px; align-items: center; }
@media (min-width: 640px) { .sba-inicio { grid-template-columns: 200px 1fr; } }
.sba-anillo { position: relative; width: 200px; margin: 0 auto; }
.sba-anillo svg { width: 100%; transform: rotate(-90deg); }
.sba-pista { fill: none; stroke: var(--t-pista); stroke-width: 14; }
.sba-arco { fill: none; stroke-width: 14; transition: stroke-width .15s; }
.sba-arco:hover { stroke-width: 18; }
.sba-anillo span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.sba-anillo b { font: 800 1.6rem var(--t-titulos); }
.sba-anillo small { color: var(--t-texto-2); }
.sba-leyenda { display: grid; gap: 8px; }
.sba-leyenda li { display: flex; align-items: center; gap: 10px; font-size: .92rem; }
.sba-leyenda b { margin-left: auto; font-weight: 600; }
.sba-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.sba-atajos { display: grid; gap: 10px; margin-top: 20px; }
@media (min-width: 640px) { .sba-atajos { grid-template-columns: repeat(3, 1fr); } }
.sba-atajos button { text-align: left; font-family: var(--t-fuente); background: var(--t-superficie); color: var(--t-texto); border: 1px solid var(--t-borde); border-radius: 14px; padding: 14px; cursor: pointer; display: grid; gap: 4px; }
.sba-atajos button:hover { border-color: var(--t-acento); }
.sba-atajos span { color: var(--t-texto-2); font-size: .85rem; }

.sba-disco { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; background: var(--t-superficie); border: 1px solid var(--t-borde); border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.sba-disco b { font-size: 1.3rem; }
.sba-disco span, .sba-disco small { color: var(--t-texto-2); font-size: .85rem; align-self: center; }
.sba-barra-disco { grid-column: 1 / -1; height: 10px; border-radius: 5px; background: var(--t-pista); overflow: hidden; }
.sba-barra-disco i, .sba-barras i { display: block; height: 100%; width: var(--pct, 0); border-radius: inherit; background: linear-gradient(90deg, #8F73FF, #FF6A9F); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.sba-barras { display: grid; gap: 10px; }
.sba-barras li { display: grid; grid-template-columns: 120px 1fr 60px; gap: 10px; align-items: center; font-size: .88rem; }
.sba-barras div { height: 10px; border-radius: 5px; background: var(--t-pista); overflow: hidden; }
.sba-barras i { background: var(--c); }
.sba-barras b { text-align: right; }
.sba-lista { display: grid; gap: 8px; }
.sba-lista li { display: flex; align-items: center; gap: 12px; background: var(--t-superficie); border: 1px solid var(--t-borde); border-radius: 12px; padding: 10px 14px; font-size: .92rem; }
.sba-lista b { margin-left: auto; }
.sba-lista small { color: var(--t-texto-2); }
.sba-app-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--t-chip); color: var(--t-acento); font-weight: 700; flex: none; }
.sba-app-ico.dup { background: #84CC1626; color: #65A30D; }

.treemap.grande { height: 260px; grid-template-columns: 3fr 2fr 1.4fr; grid-template-rows: 1fr 1fr 1fr; }
.treemap.grande .tm { border: 0; cursor: pointer; }
.treemap.grande .tm.elegido, .treemap.grande .tm:hover, .treemap.grande .tm:focus-visible { filter: brightness(1.15); outline: 3px solid var(--t-texto); outline-offset: -3px; }
.sba-ruta { margin-top: 12px; font: 600 .92rem ui-monospace, Consolas, monospace; color: var(--t-texto-2); min-height: 1.4em; overflow-wrap: anywhere; }

.sba-limpieza { display: grid; gap: 8px; margin-bottom: 16px; }
.sba-limpieza li { display: flex; align-items: center; gap: 10px; background: var(--t-superficie); border: 1px solid var(--t-borde); border-radius: 12px; padding: 10px 14px; font-size: .92rem; transition: opacity .3s; }
.sba-limpieza label { display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 28px; }
.sba-limpieza input { accent-color: var(--t-acento); width: 18px; height: 18px; }
.sba-limpieza b { margin-left: auto; }
.sba-limpieza .protegida { opacity: .7; }
.sba-limpieza .protegida b { color: #EF4444; font-size: .8rem; }
.sba-limpieza .limpio { opacity: .4; text-decoration: line-through; }
.sba-primario, .sba-sec { font: 600 .92rem var(--t-fuente); border-radius: 10px; padding: 10px 18px; cursor: pointer; min-height: 40px; }
.sba-primario { border: 0; color: #fff; background: linear-gradient(90deg, #7C5CFF, #FF4D8D); }
.sba-primario:hover { background: linear-gradient(90deg, #8F73FF, #FF6A9F); }
.sba-sec { background: var(--t-superficie); color: var(--t-texto); border: 1px solid var(--t-borde); }
.sba-resultado { margin-top: 10px; color: var(--t-texto-2); font-size: .9rem; min-height: 1.4em; }
.sba-dialogo { border: 1px solid var(--t-borde); border-radius: 14px; background: var(--t-superficie); color: var(--t-texto); padding: 22px; max-width: min(420px, calc(100vw - 32px)); font-family: var(--t-fuente); }
.sba-dialogo::backdrop { background: rgb(15 17 23 / 55%); }
.sba-dialogo h3 { font-size: 1.2rem; margin-bottom: 8px; }
.sba-dialogo p { margin-bottom: 8px; overflow-wrap: anywhere; }
.sba-tenue { color: var(--t-texto-2); font-size: .88rem; }
.sba-dialogo-botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }

.sba-porque { padding-bottom: 32px; }
.sba-ssd { background: var(--t-superficie); border: 1px solid var(--t-borde); border-radius: 14px; padding: 18px; margin-bottom: 16px; max-width: 640px; }
.sba-ssd-barra { height: 16px; border-radius: 8px; background: var(--t-pista); overflow: hidden; margin-bottom: 10px; }
.sba-ssd-barra i { display: block; height: 100%; width: 98.6%; background: linear-gradient(90deg, #7C5CFF, #FF4D8D 80%, #EF4444); }
.sba-texto { color: var(--t-texto-2); max-width: 44em; font-size: 1.05rem; }