/* ============================================================================
   Authors Studio 2.0 — portal de autores (authors.metaqare.com)
   Scope: .acai-studio (components/acai/studio/*). Tokens --as-* en vez de
   clases Tailwind con hex fijos; el tema claro se activa con
   [data-theme="light"] (context/ThemeContext.tsx pone el atributo en <html>).
   Referencia estética: propuesta de dirección «authors-studio-2.0.html»
   (28-oct-2026). Las secciones heredadas (Tailwind oscuro) se envuelven en
   .as-legacy hasta que se migren por fases (docs/REDISENO_AUTHORS_STUDIO_PLAN.md §5).
   ========================================================================== */

.acai-studio {
  --as-bg: #070B14; --as-side: #0A111E; --as-card: #0E1625; --as-card2: #121C2E; --as-hover: #16223A;
  --as-line: #1C283C; --as-line2: #243249;
  --as-ink: #EAF0F7; --as-ink2: #A9B6C7; --as-ink3: #6C7B90;
  --as-acc: #5FD3CA; --as-acc2: #3FB8AE; --as-acc-ink: #04211F; --as-acc-soft: rgba(95,211,202,.12); --as-acc-line: rgba(95,211,202,.32);
  --as-blue: #6AA8FF; --as-blue-soft: rgba(106,168,255,.12);
  --as-amber: #F4B940; --as-amber-soft: rgba(244,185,64,.12);
  --as-rose: #FF6B8A; --as-rose-soft: rgba(255,107,138,.12);
  --as-green: #3DD68C; --as-green-soft: rgba(61,214,140,.12);
  --as-violet: #A98BFF; --as-violet-soft: rgba(169,139,255,.12);
  --as-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px rgba(0,0,0,.25);
  --as-grid: rgba(255,255,255,.05);
  --as-logo-filter: brightness(0) invert(1);
  --as-font: "DM Sans", "Inter", system-ui, sans-serif;
  --as-serif: "Playfair Display", Georgia, serif;
  --as-mono: ui-monospace, "JetBrains Mono", Menlo, monospace;
  background: var(--as-bg); color: var(--as-ink); font-family: var(--as-font);
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh;
  color-scheme: dark;
}
[data-theme="light"] .acai-studio {
  --as-bg: #F3F6F9; --as-side: #FFFFFF; --as-card: #FFFFFF; --as-card2: #F6F8FB; --as-hover: #EEF3F7;
  --as-line: #E2E8EF; --as-line2: #D5DEE8;
  --as-ink: #0F1A2A; --as-ink2: #46576C; --as-ink3: #7A8899;
  --as-acc: #0E9C93; --as-acc2: #0B7F78; --as-acc-ink: #FFFFFF; --as-acc-soft: rgba(14,156,147,.09); --as-acc-line: rgba(14,156,147,.35);
  --as-blue: #2F6FD6; --as-blue-soft: rgba(47,111,214,.09);
  --as-amber: #B7791F; --as-amber-soft: rgba(183,121,31,.10);
  --as-rose: #C4415E; --as-rose-soft: rgba(196,65,94,.09);
  --as-green: #1F8F5F; --as-green-soft: rgba(31,143,95,.10);
  --as-violet: #6D4FD8; --as-violet-soft: rgba(109,79,216,.09);
  --as-shadow: 0 1px 2px rgba(15,26,42,.04), 0 8px 24px rgba(15,26,42,.06);
  --as-grid: rgba(15,26,42,.06);
  --as-logo-filter: none;
  color-scheme: light;
}
.acai-studio *, .acai-studio *::before, .acai-studio *::after { box-sizing: border-box; }
.acai-studio button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
.acai-studio input, .acai-studio textarea, .acai-studio select { font: inherit; color: inherit; }
.acai-studio a { color: var(--as-acc); text-decoration: none; }
.acai-studio .as-serif { font-family: var(--as-serif); }
.acai-studio .as-mono { font-family: var(--as-mono); font-size: 12px; }

/* ---------- Layout ---------- */
.acai-studio .as-app { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
/* La barra lateral ocupa TODO el alto de la ventana (sticky); solo la lista de
   secciones (.as-nav) hace scroll si no cabe, y el pie (gemelo, usuario,
   acciones) queda siempre visible. Bajo el zoom global del 90 % de index.html
   (html.mq-zoom) la unidad 100vh se queda corta: se compensa más abajo. */
.acai-studio .as-side { position: sticky; top: 0; height: 100vh; background: var(--as-side); border-right: 1px solid var(--as-line); display: flex; flex-direction: column; padding: 14px 12px 12px; overflow: hidden; z-index: 40; }
.acai-studio .as-logo { display: flex; align-items: center; gap: 10px; padding: 2px 8px 10px; flex: none; }
.acai-studio .as-logo img { width: 176px; max-width: 100%; object-fit: contain; filter: var(--as-logo-filter); }
.acai-studio .as-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--as-line2) transparent; padding-right: 2px; }
.acai-studio .as-nav-sec { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--as-ink3); font-weight: 700; padding: 10px 10px 4px; }
.acai-studio .as-nav > div:first-child .as-nav-sec { padding-top: 2px; }
.acai-studio .as-nav a, .acai-studio .as-nav button.as-nav-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 9px; color: var(--as-ink2); font-weight: 500; font-size: 13px; position: relative; transition: background .15s, color .15s; margin-bottom: 1px; text-align: left; }
.acai-studio .as-nav a:hover, .acai-studio .as-nav button.as-nav-item:hover { background: var(--as-hover); color: var(--as-ink); }
.acai-studio .as-nav .on { background: var(--as-acc-soft); color: var(--as-ink); }
.acai-studio .as-nav .on::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--as-acc); }
.acai-studio .as-nav .on .as-ic { color: var(--as-acc); }
.acai-studio .as-ic { width: 18px; height: 18px; flex: none; }
.acai-studio .as-ic.sm { width: 15px; height: 15px; }
.acai-studio .as-ic.lg { width: 22px; height: 22px; }
.acai-studio .as-nav .as-cnt { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--as-card2); color: var(--as-ink2); border: 1px solid var(--as-line); }
.acai-studio .as-nav .as-cnt.hot { background: var(--as-acc); color: var(--as-acc-ink); border-color: transparent; }
.acai-studio .as-nav .as-soon { margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: var(--as-violet); background: var(--as-violet-soft); padding: 1px 6px; border-radius: 5px; text-transform: uppercase; }
.acai-studio .as-side-foot { flex: none; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--as-line); display: flex; flex-direction: column; gap: 8px; }
.acai-studio .as-readiness-mini { background: var(--as-card2); border: 1px solid var(--as-line); border-radius: 10px; padding: 8px 10px; cursor: pointer; width: 100%; text-align: left; }
.acai-studio .as-readiness-mini .as-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--as-ink2); margin-bottom: 5px; }
.acai-studio .as-readiness-mini b { color: var(--as-acc); }
.acai-studio .as-me { display: flex; align-items: center; gap: 8px; padding: 2px 2px; }
.acai-studio .as-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #1E3A5F, #2C6E78); display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; flex: none; overflow: hidden; border: 1px solid var(--as-line); }
.acai-studio .as-avatar img { width: 100%; height: 100%; object-fit: cover; }
.acai-studio .as-me b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.acai-studio .as-me span { font-size: 11px; color: var(--as-ink3); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.acai-studio .as-foot-actions { display: flex; gap: 6px; align-items: center; }
.acai-studio .as-foot-actions .as-btn { height: 32px; }
.acai-studio .as-foot-actions .as-iconbtn { width: 34px; height: 34px; }

.acai-studio .as-main { min-width: 0; display: flex; flex-direction: column; overflow-x: clip; }
.acai-studio .as-topbar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--as-bg) 86%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--as-line); }
.acai-studio .as-topbar-in { display: flex; align-items: center; gap: 10px; padding: 10px 28px; min-height: 62px; }
.acai-studio .as-iconbtn.as-burger { display: none; }
.acai-studio .as-live-strip { display: flex; align-items: stretch; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.acai-studio .as-live-strip::-webkit-scrollbar { display: none; }
.acai-studio .as-lv { display: flex; flex-direction: column; justify-content: center; padding: 4px 14px; border-right: 1px solid var(--as-line); white-space: nowrap; cursor: pointer; border-radius: 8px; text-align: left; }
.acai-studio .as-lv:hover { background: var(--as-hover); }
.acai-studio .as-lv:last-child { border-right: 0; }
.acai-studio .as-lv small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--as-ink3); font-weight: 700; }
.acai-studio .as-lv b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; }
.acai-studio .as-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--as-green); display: inline-block; box-shadow: 0 0 0 0 var(--as-green); animation: as-pl 1.8s infinite; }
.acai-studio .as-pulse.off { background: var(--as-amber); animation: none; }
@keyframes as-pl { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--as-green) 70%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.acai-studio .as-tb-actions { display: flex; align-items: center; gap: 6px; }
.acai-studio .as-iconbtn { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--as-ink2); border: 1px solid var(--as-line); background: var(--as-card); position: relative; transition: all .15s; }
.acai-studio .as-iconbtn:hover { color: var(--as-ink); border-color: var(--as-line2); }
.acai-studio .as-iconbtn:disabled { opacity: .5; cursor: default; }
.acai-studio .as-iconbtn .as-dot { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 999px; background: var(--as-rose); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--as-bg); }
.acai-studio .as-theme-sw { display: flex; border: 1px solid var(--as-line); border-radius: 10px; background: var(--as-card); padding: 3px; }
.acai-studio .as-theme-sw button { padding: 5px 9px; border-radius: 7px; color: var(--as-ink3); display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.acai-studio .as-theme-sw button.on { background: var(--as-acc-soft); color: var(--as-acc); }

.acai-studio .as-content { padding: 28px 28px 80px; max-width: 1360px; width: 100%; margin: 0 auto; }
.acai-studio .as-crumbs { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--as-acc); font-weight: 700; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.acai-studio .as-crumbs span { color: var(--as-ink3); }
.acai-studio .as-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.acai-studio .as-ph h1 { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.015em; display: flex; align-items: center; gap: 12px; margin: 0; }
.acai-studio .as-ph p { color: var(--as-ink2); max-width: 760px; margin: 6px 0 0; font-size: 14.5px; }
.acai-studio .as-h-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--as-acc-soft); color: var(--as-acc); border: 1px solid var(--as-acc-line); flex: none; }

/* ---------- Components ---------- */
.acai-studio .as-card { background: var(--as-card); border: 1px solid var(--as-line); border-radius: 16px; box-shadow: var(--as-shadow); min-width: 0; }
.acai-studio .as-pad { padding: 20px; } .acai-studio .as-pad-l { padding: 24px; }
.acai-studio .as-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--as-line); flex-wrap: wrap; }
.acai-studio .as-card-h h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 9px; margin: 0; }
.acai-studio .as-card-h h3 .as-ic { color: var(--as-acc); }
.acai-studio .as-card-h p { font-size: 12.5px; color: var(--as-ink3); margin: 2px 0 0; }
.acai-studio .as-grid { display: grid; gap: 16px; }
.acai-studio .as-grid > * { min-width: 0; }
.acai-studio .as-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acai-studio .as-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acai-studio .as-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.acai-studio .as-g-dash { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.acai-studio .as-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 10px; font-weight: 600; font-size: 13px; border: 1px solid var(--as-line); background: var(--as-card); color: var(--as-ink); transition: all .15s; white-space: nowrap; }
.acai-studio .as-btn:hover { border-color: var(--as-line2); background: var(--as-hover); }
.acai-studio .as-btn.pri { background: var(--as-acc); border-color: var(--as-acc); color: var(--as-acc-ink); }
.acai-studio .as-btn.pri:hover { filter: brightness(1.07); }
.acai-studio .as-btn.ghost { background: transparent; border-color: transparent; color: var(--as-ink2); }
.acai-studio .as-btn.ghost:hover { background: var(--as-hover); color: var(--as-ink); }
.acai-studio .as-btn.sm { height: 30px; padding: 0 11px; font-size: 12px; border-radius: 8px; }
.acai-studio .as-btn.ok { background: var(--as-green); border-color: var(--as-green); color: #fff; }
.acai-studio .as-btn.danger { color: var(--as-rose); border-color: color-mix(in srgb, var(--as-rose) 40%, transparent); }
.acai-studio .as-btn:disabled { opacity: .45; pointer-events: none; }
.acai-studio .as-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--as-line); color: var(--as-ink2); background: var(--as-card2); white-space: nowrap; }
.acai-studio .as-chip.acc, .acai-studio .as-chip.on { background: var(--as-acc-soft); color: var(--as-acc); border-color: var(--as-acc-line); }
.acai-studio .as-chip.amber { background: var(--as-amber-soft); color: var(--as-amber); border-color: transparent; }
.acai-studio .as-chip.rose { background: var(--as-rose-soft); color: var(--as-rose); border-color: transparent; }
.acai-studio .as-chip.green { background: var(--as-green-soft); color: var(--as-green); border-color: transparent; }
.acai-studio .as-chip.blue { background: var(--as-blue-soft); color: var(--as-blue); border-color: transparent; }
.acai-studio .as-chip.violet { background: var(--as-violet-soft); color: var(--as-violet); border-color: transparent; }
.acai-studio .as-chip.xs { height: 20px; font-size: 10.5px; padding: 0 8px; }
.acai-studio .as-tag { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--as-ink3); }
.acai-studio .as-muted { color: var(--as-ink3); } .acai-studio .as-ink2 { color: var(--as-ink2); }
.acai-studio .as-small { font-size: 12.5px; } .acai-studio .as-xs { font-size: 11.5px; }
.acai-studio .as-row { display: flex; align-items: center; gap: 10px; }
.acai-studio .as-wrap { flex-wrap: wrap; } .acai-studio .as-between { justify-content: space-between; } .acai-studio .as-grow { flex: 1; min-width: 0; }
.acai-studio .as-stack > * + * { margin-top: 12px; }
.acai-studio .as-hr { height: 1px; background: var(--as-line); margin: 16px 0; }
.acai-studio .as-tabs { display: flex; gap: 4px; border: 1px solid var(--as-line); background: var(--as-card2); padding: 4px; border-radius: 12px; width: max-content; max-width: 100%; overflow-x: auto; }
.acai-studio .as-tabs button { padding: 7px 13px; border-radius: 9px; color: var(--as-ink2); font-weight: 600; font-size: 12.8px; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.acai-studio .as-tabs button.on { background: var(--as-card); color: var(--as-ink); box-shadow: var(--as-shadow); }
.acai-studio .as-tabs button .as-n { font-size: 10.5px; padding: 0 6px; border-radius: 99px; background: var(--as-hover); color: var(--as-ink3); }
.acai-studio .as-field { display: flex; flex-direction: column; gap: 6px; }
.acai-studio .as-field label { font-size: 12px; font-weight: 600; color: var(--as-ink2); }
.acai-studio .as-inp { width: 100%; background: var(--as-card2); border: 1px solid var(--as-line); border-radius: 10px; padding: 9px 12px; outline: none; transition: border .15s, box-shadow .15s; color: var(--as-ink); }
.acai-studio textarea.as-inp { resize: vertical; min-height: 72px; line-height: 1.5; }
.acai-studio .as-inp:focus { border-color: var(--as-acc); box-shadow: 0 0 0 3px var(--as-acc-soft); }
.acai-studio .as-bar { height: 6px; background: var(--as-line); border-radius: 99px; overflow: hidden; }
.acai-studio .as-bar i { display: block; height: 100%; background: var(--as-acc); border-radius: 99px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.acai-studio .as-bar.thin { height: 4px; }
.acai-studio .as-kpi { padding: 18px 20px; position: relative; overflow: hidden; }
.acai-studio .as-kpi small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--as-ink3); font-weight: 700; display: flex; align-items: center; gap: 7px; }
.acai-studio .as-kpi .as-v { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.acai-studio .as-kpi .as-d { font-size: 12px; font-weight: 600; margin-top: 2px; color: var(--as-ink2); }
.acai-studio .as-up { color: var(--as-green); } .acai-studio .as-down { color: var(--as-rose); }
.acai-studio .as-banner { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--as-line); background: var(--as-card2); }
.acai-studio .as-banner.acc { background: linear-gradient(120deg, var(--as-acc-soft), transparent 70%); border-color: var(--as-acc-line); }
.acai-studio .as-banner.amber { background: var(--as-amber-soft); border-color: color-mix(in srgb, var(--as-amber) 35%, transparent); }
.acai-studio .as-banner.violet { background: linear-gradient(120deg, var(--as-violet-soft), transparent 70%); border-color: color-mix(in srgb, var(--as-violet) 35%, transparent); }
.acai-studio .as-empty { padding: 40px 20px; text-align: center; color: var(--as-ink3); }
.acai-studio .as-lbl { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--as-acc); margin-bottom: 10px; }
.acai-studio .as-lbl::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--as-acc); }
.acai-studio .as-ring { position: relative; display: grid; place-items: center; flex: none; }
.acai-studio .as-ring svg { transform: rotate(-90deg); }
.acai-studio .as-ring .as-rv { position: absolute; text-align: center; }
.acai-studio .as-ring .as-rv b { font-size: 26px; font-weight: 700; display: block; line-height: 1; }
.acai-studio .as-ring .as-rv span { font-size: 10.5px; color: var(--as-ink3); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.acai-studio .as-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.acai-studio .as-seg button { flex: 1; min-width: 120px; padding: 11px; border-radius: 11px; border: 1px solid var(--as-line); background: var(--as-card2); font-weight: 600; font-size: 12.8px; display: flex; align-items: center; gap: 8px; justify-content: center; }
.acai-studio .as-seg button.on.g { border-color: var(--as-green); background: var(--as-green-soft); color: var(--as-green); }
.acai-studio .as-seg button.on.r { border-color: var(--as-rose); background: var(--as-rose-soft); color: var(--as-rose); }

/* feed */
.acai-studio .as-feed-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--as-line); cursor: pointer; transition: background .2s; align-items: center; width: 100%; text-align: left; }
.acai-studio .as-feed-item:hover { background: var(--as-hover); }
.acai-studio .as-feed-item:last-child { border-bottom: 0; }
.acai-studio .as-f-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--as-card2); border: 1px solid var(--as-line); color: var(--as-ink2); flex: none; }
.acai-studio .as-f-ic.doctor { background: var(--as-blue-soft); color: var(--as-blue); border-color: transparent; }
.acai-studio .as-f-ic.patient { background: var(--as-acc-soft); color: var(--as-acc); border-color: transparent; }
.acai-studio .as-feed-item .as-q { font-weight: 600; font-size: 13.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acai-studio .as-feed-item .as-m { font-size: 11.5px; color: var(--as-ink3); display: flex; gap: 8px; flex-wrap: wrap; margin-top: 3px; align-items: center; }
.acai-studio .as-feed-item .as-r { display: flex; align-items: center; gap: 6px; color: var(--as-ink3); }

/* drawer */
.acai-studio.as-scrim, .acai-studio .as-scrim { position: fixed; inset: 0; background: rgba(3,6,12,.55); backdrop-filter: blur(3px); z-index: 80; }
.acai-studio .as-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100vw); background: var(--as-card); border-left: 1px solid var(--as-line); z-index: 90; display: flex; flex-direction: column; animation: as-drawer-in .28s cubic-bezier(.2,.8,.2,1); color: var(--as-ink); font-family: var(--as-font); }
@keyframes as-drawer-in { from { transform: translateX(100%); } }
.acai-studio .as-drawer-h { padding: 18px 22px; border-bottom: 1px solid var(--as-line); display: flex; align-items: flex-start; gap: 12px; }
.acai-studio .as-drawer-h h3 { font-size: 17px; margin: 3px 0 0; line-height: 1.35; }
.acai-studio .as-drawer-b { padding: 20px 22px; overflow-y: auto; flex: 1; }
.acai-studio .as-drawer-f { padding: 14px 22px; border-top: 1px solid var(--as-line); display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; background: var(--as-card2); }
.acai-studio .as-bubble { padding: 12px 15px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.acai-studio .as-bubble.u { background: var(--as-acc-soft); border: 1px solid var(--as-acc-line); }
.acai-studio .as-bubble.a { background: var(--as-card2); border: 1px solid var(--as-line); }

/* readiness */
.acai-studio .as-comp { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--as-line); }
.acai-studio .as-comp:last-child { border-bottom: 0; }
.acai-studio .as-comp .as-cname { font-size: 12.5px; color: var(--as-ink2); }
.acai-studio .as-comp .as-cval { font-size: 11.5px; color: var(--as-ink3); }
.acai-studio .as-comp .as-cpts { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.acai-studio .as-comp.nodata .as-cpts { color: var(--as-ink3); font-weight: 500; }
.acai-studio .as-comp .as-bar { grid-column: 1 / -1; }

/* legacy sections (Tailwind oscuro) dentro del shell nuevo */
.acai-studio .as-legacy { color: #EAF0F7; }
[data-theme="light"] .acai-studio .as-legacy { color: #0F1A2A; }
.acai-studio .as-legacy h2 { color: inherit; }

.acai-studio .as-fade { animation: as-fd .3s ease-out; }
@keyframes as-fd { from { opacity: 0; transform: translateY(6px); } }
.acai-studio .as-hide { display: none !important; }
.acai-studio .as-spin { animation: as-spin 1s linear infinite; }
@keyframes as-spin { to { transform: rotate(360deg); } }

/* ---------- Zoom global del 90 % (index.html: html.mq-zoom, solo >= 768px) ----------
   100vh no descuenta el factor de escala: la barra lateral sticky se quedaba al
   90 % del alto con un hueco abajo. Misma compensación que .aoc-landing .rail. */
@media (min-width: 901px) {
  html.mq-zoom .acai-studio .as-side { height: calc(100vh / 0.9); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .acai-studio .as-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acai-studio .as-g-dash { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .acai-studio .as-app { grid-template-columns: 1fr; }
  .acai-studio .as-side { position: fixed; left: 0; top: 0; bottom: 0; height: auto; width: 272px; transform: translateX(-100%); transition: transform .25s; }
  .acai-studio .as-side.open { transform: none; box-shadow: 20px 0 60px rgba(0,0,0,.4); }
  .acai-studio .as-iconbtn.as-burger { display: grid; }
  .acai-studio .as-topbar-in { padding: 10px 16px; }
  .acai-studio .as-content { padding: 20px 16px 80px; }
  .acai-studio .as-g2, .acai-studio .as-g3 { grid-template-columns: 1fr; }
  .acai-studio .as-theme-sw span { display: none; }
  .acai-studio .as-ph h1 { font-size: 24px; }
}
@media (max-width: 560px) {
  .acai-studio .as-g4 { grid-template-columns: 1fr; }
  .acai-studio .as-lv { padding: 4px 10px; }
  .acai-studio .as-lv b { font-size: 14px; }
}