/* 006 · Cero en la computadora: la ventana, la barra lateral y la de arriba.
   Copia de cero-platform (origin/main, 26/09): app-sidebar.tsx, sidebar-nav.tsx,
   topbar.tsx y los colores de globals.css. Todo se mide en puntos de una
   pantalla de 1280 × 800 y se escala entero con --k. */

.ventana { position: absolute; left: var(--x, 62%); top: var(--y, 52%); width: 1280px; height: 834px; margin: -417px 0 0 -640px; transform-style: preserve-3d; will-change: transform; }
.ventana-cuerpo { width: 1280px; height: 834px; transform: scale(var(--k, .5)); transform-origin: 50% 50%; border-radius: 14px; overflow: hidden; background: #F7F3EA; box-shadow: 0 70px 120px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(247,243,234,.12); }
.cromo { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: #E9E3D5; border-bottom: 1px solid #DED7C8; }
.cromo i { width: 11px; height: 11px; border-radius: 50%; background: #C9C1B1; }
.cromo span { margin-left: 16px; flex: 0 1 460px; height: 22px; border-radius: 7px; background: #F7F3EA; display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 12px; color: #5E6883; font-family: var(--font-mono); }
.app-c { display: grid; grid-template-columns: 240px 1fr; height: 800px; font-family: var(--font-sans); color: #0B1220; }

/* La barra lateral: obsidiana, grupos en mono, el activo con la raya cobre */
.lateral { position: relative; background: #0B1220; color: #B7C1D0; padding: 16px 12px; overflow: hidden; }
.lateral .org { display: flex; align-items: center; gap: 10px; padding: 0 6px 16px; margin: 0 -12px 12px; padding-left: 18px; border-bottom: 1px solid rgba(247,243,234,.08); }
.lateral .org span:first-child { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #1E2B3F; color: #F7F3EA; }
.lateral .org span:first-child svg { width: 28px; height: 28px; }
.lateral .org b { font-size: 14px; font-weight: 600; line-height: 1.2; color: #F7F3EA; }
.lateral .grupo { margin: 14px 8px 6px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: #5A6A83; }
.lateral .item { position: relative; display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13.5px; }
.lateral .item svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: none; }
.lateral .item.hijo { padding-left: 36px; height: 28px; font-size: 13px; color: #8796AD; }
.lateral .item[data-activo="1"] { background: rgba(247,243,234,.07); color: #F7F3EA; }
.lateral .item[data-activo="1"]::before { content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: #C96A1B; }
.lateral .item.hijo[data-activo="1"] { background: transparent; color: #E38A32; }
.lateral .item.hijo[data-activo="1"]::before { display: none; }
.lateral .contador { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #C96A1B; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }

/* La barra de arriba */
.arriba-c { height: 60px; display: flex; align-items: center; gap: 16px; padding: 0 22px; background: #F7F3EA; border-bottom: 1px solid #E0D9C8; }
.arriba-c .fecha-c { font-size: 15px; font-weight: 500; color: #11192C; }
.arriba-c .buscar { margin-left: 18px; flex: 0 1 440px; height: 38px; border-radius: 10px; border: 1px solid #DED7C8; background: #FCFBF8; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 13.5px; color: #8C93A6; }
.arriba-c .buscar kbd { margin-left: auto; padding: 1px 6px; border: 1px solid #DED7C8; border-radius: 5px; font-family: var(--font-mono); font-size: 11px; color: #8C93A6; }
.arriba-c .derecha-c { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.arriba-c .soporte { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid #DED7C8; display: flex; align-items: center; font-size: 13px; font-weight: 500; }
.arriba-c .campana-c { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #DED7C8; background: #FCFBF8; }
.arriba-c .campana-c svg { width: 16px; height: 16px; stroke: #11192C; fill: none; stroke-width: 1.8; }
.arriba-c .yo-c { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #E38A32, #A95315); color: #fff; font-size: 12px; font-weight: 700; }
.principal { position: relative; overflow: hidden; }
.pantalla-c { position: absolute; inset: 60px 0 0; padding: 22px 24px; overflow: hidden; visibility: hidden; background: #F7F3EA; }

/* Piezas comunes de las pantallas */
.banda { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 16px; background: linear-gradient(120deg, #121D2D, #0B1220 60%, #1E2B3F); color: #F7F3EA; }
.banda .ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(201,106,27,.18); color: #F5A85A; }
.banda .ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.banda h2 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.banda p { margin-top: 2px; font-size: 13px; color: #8796AD; }
.banda .acciones-c { margin-left: auto; display: flex; gap: 8px; }
.pestanas { display: flex; gap: 22px; margin: 14px 4px 0; border-bottom: 1px solid #DED7C8; }
.pestanas span { padding: 8px 2px 10px; font-size: 14px; color: #5E6883; }
.pestanas span.on { color: #A95315; font-weight: 600; box-shadow: inset 0 -3px 0 #C96A1B; }
.tarjeta-c { border: 1px solid #DED7C8; border-radius: 14px; background: #FCFBF8; }
.tarjeta-c > .cab-c { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #E9E3D5; font-size: 15px; font-weight: 600; }
.b-c { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 9px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.b-c.cobre { background: #C96A1B; color: #fff; box-shadow: 0 8px 18px -10px rgba(201,106,27,.8); }
.b-c.linea { border: 1px solid #DED7C8; background: #FCFBF8; color: #11192C; }
.b-c.claro { border: 1px solid rgba(247,243,234,.2); color: #F7F3EA; }
.b-c svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.pl { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pl.ok { background: #E9F1E7; color: #1F6B47; }
.pl.info { background: #E2E6EE; color: #0B2D4D; }
.pl.warn { background: #F8E9D2; color: #7A4910; }
.pl.error { background: #F7E1DC; color: #8E2418; }
.pl.cobre { background: #FFF4E8; color: #843F13; }
.pl.gris { background: #EFEAD9; color: #36415A; }
.pl.solido { background: #C96A1B; color: #fff; }
.tabla-c { width: 100%; font-size: 13px; }
.tabla-c .f { display: grid; align-items: center; min-height: 42px; padding: 0 14px; border-bottom: 1px solid #EFEAD9; }
.tabla-c .f.cab { min-height: 36px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5E6883; background: #F7F3EA; }
.tabla-c .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-c .mono { font-family: var(--font-mono); font-size: 12px; color: #36415A; }
.cifra-c { font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dato-c small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5E6883; }
.cursor { position: absolute; z-index: 20; left: 0; top: 0; width: 22px; height: 22px; pointer-events: none; opacity: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }