/* =====================================================================
   COCUYO — Apps del Estudio y orden de la navegación (24-sep-2026)
   Colores y superficies desde tokens.css (con respaldo por si faltara).
   ===================================================================== */

/* ---------------------------- Botón Apps ----------------------------- */
.st-workspace-nav .st-apps{display:inline-flex;align-items:center;gap:.4rem}
.st-workspace-nav .st-apps .ic{width:18px;height:18px;color:var(--verde-cocuyo,#AFF33E)}
.sm-nav .sm-apps{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.sm-nav .sm-apps .ic{color:var(--verde-cocuyo,#AFF33E)}

/* ------------------------------ Diálogo ------------------------------ */
.capps{width:min(1120px,calc(100vw - 24px));max-height:min(90vh,920px);padding:0;border:1px solid var(--negro-borde,#262626);border-radius:24px;
  background:var(--negro-elevado,#121212);color:var(--blanco-luz,#F8FAFC);box-shadow:0 40px 120px rgba(0,0,0,.65);overflow:auto;overscroll-behavior:contain}
.capps::backdrop{background:rgba(0,0,0,.62);backdrop-filter:blur(6px)}
.capps[open]{animation:capps-entra .22s ease-out}
@keyframes capps-entra{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.capps-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;padding:24px 28px 6px}
.capps-head h2{margin:0 0 4px;font-size:28px;letter-spacing:-.03em;background:linear-gradient(90deg,var(--blanco-luz,#F8FAFC),var(--verde-cocuyo,#AFF33E));-webkit-background-clip:text;background-clip:text;color:transparent}
.capps-head p{margin:0;font-size:14px;color:var(--gris-niebla,#CBD5E1)}
.capps-close{flex:0 0 auto;width:44px;height:44px;border-radius:12px;border:1px solid var(--negro-borde,#262626);background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer}
.capps-close:hover{border-color:var(--verde-cocuyo,#AFF33E)}
.capps-close .ic{width:20px;height:20px}

/* Buscador y categorías: se quedan arriba al desplazarse */
.capps-tools{position:sticky;top:0;z-index:2;display:flex;flex-direction:column;gap:10px;padding:12px 28px 12px;background:linear-gradient(var(--negro-elevado,#121212) 80%,rgba(18,18,18,0))}
.capps-search{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border-radius:14px;border:1px solid var(--negro-borde,#262626);background:var(--negro-abismo,#050505)}
.capps-search:focus-within{border-color:var(--verde-cocuyo,#AFF33E);box-shadow:0 0 0 3px rgba(175,243,62,.15)}
.capps-search .ic{width:18px;height:18px;color:var(--gris-humo,#94A3B8);flex:0 0 auto}
.capps-search input{flex:1 1 auto;min-width:0;height:44px;border:0;background:transparent;color:inherit;font:inherit;font-size:15px;outline:none}
.capps-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.capps-chips::-webkit-scrollbar{display:none}
.capps-chips button{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--negro-borde,#262626);
  background:var(--negro-abismo,#050505);color:inherit;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s}
.capps-chips button .ic{width:16px;height:16px;color:var(--verde-cocuyo,#AFF33E)}
.capps-chips button small{font-size:12px;color:var(--gris-humo,#94A3B8);font-weight:600}
.capps-chips button:hover{border-color:#3d5a1c}
.capps-chips button[aria-pressed="true"]{background:var(--verde-cocuyo,#AFF33E);border-color:var(--verde-cocuyo,#AFF33E);color:var(--negro-abismo,#050505)}
.capps-chips button[aria-pressed="true"] .ic,.capps-chips button[aria-pressed="true"] small{color:var(--negro-abismo,#050505)}

/* Secciones por categoría */
.capps-list{padding:4px 28px 8px}
.capps-sec{margin:14px 0 22px}
.capps-sec-head{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.capps-sec-head h3{margin:0;font-size:18px;letter-spacing:-.01em}
.capps-sec-head p{margin:2px 0 0;font-size:13px;color:var(--gris-humo,#94A3B8)}
.capps-sec-head>div{flex:1 1 auto}
.capps-sec-icon{flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#2d4d12,var(--verde-profundo,#14532D));color:var(--verde-cocuyo,#AFF33E);box-shadow:0 0 18px rgba(175,243,62,.18)}
.capps-sec-icon .ic{width:19px;height:19px}
.capps-count{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid var(--negro-borde,#262626);color:var(--gris-niebla,#CBD5E1)}
.capps-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}

/* Tarjeta de app */
.capps-card{position:relative;display:flex;flex-direction:column;padding:0;border-radius:18px;border:1px solid var(--negro-borde,#262626);background:var(--negro-abismo,#050505);
  color:inherit;font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  animation:capps-tarjeta .35s ease-out both;animation-delay:calc(var(--i,0) * 22ms)}
@keyframes capps-tarjeta{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.capps-card:hover:not([disabled]):not([aria-disabled="true"]),.capps-card:focus-visible{transform:translateY(-3px);border-color:var(--verde-cocuyo,#AFF33E);box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 0 1px rgba(175,243,62,.25);outline:none}
.capps-card[disabled],.capps-card[aria-disabled="true"]{cursor:default;opacity:.55}
.capps-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0b0f09}
.capps-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease,filter .3s ease;filter:saturate(.95) brightness(.88)}
.capps-card:hover .capps-thumb img,.capps-card:focus-visible .capps-thumb img{transform:scale(1.06);filter:saturate(1.08) brightness(1)}
.capps-thumb::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(5,5,5,.85));pointer-events:none}
.capps-badge{position:absolute;left:10px;bottom:10px;z-index:1;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:rgba(10,16,7,.72);border:1px solid rgba(175,243,62,.45);color:var(--verde-cocuyo,#AFF33E);backdrop-filter:blur(6px);box-shadow:0 0 16px rgba(175,243,62,.28)}
.capps-badge .ic{width:20px;height:20px}
.capps-tag{position:absolute;top:10px;left:10px;z-index:1;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--verde-cocuyo,#AFF33E);color:var(--negro-abismo,#050505)}
.capps-tag-beta{background:#2b1f4a;color:#d9c8ff;border:1px solid #6b4fb3}
.capps-guide .capps-tag{position:static;vertical-align:middle;margin-left:4px}
.capps-medio{position:absolute;right:10px;bottom:12px;z-index:1;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(5,5,5,.7);color:var(--gris-niebla,#CBD5E1);border:1px solid rgba(255,255,255,.12)}
.capps-body{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px}
.capps-body b{font-size:15px;line-height:1.3}
.capps-body small{font-size:13px;line-height:1.4;color:var(--gris-niebla,#CBD5E1)}
.capps-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.capps-meta em,.capps-meta i{font-style:normal;font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--negro-borde,#262626);color:var(--gris-humo,#94A3B8)}
.capps-meta i{color:var(--verde-cocuyo,#AFF33E);border-color:#2f4a15}

/* Muy pronto */
.capps-card-soon{flex-direction:row;align-items:center;gap:12px;padding:12px;border-style:dashed;cursor:default;animation:none}
.capps-card-soon .capps-badge{position:static;box-shadow:none;border-color:#2f4a15}
.capps-card-soon .capps-body{padding:0}

/* Agente (solo con acceso) */
.capps-agent{display:flex;align-items:center;gap:14px;width:100%;margin:10px 0 4px;padding:14px 16px;border-radius:18px;border:1px solid #3d5a1c;
  background:linear-gradient(110deg,#142009,var(--negro-abismo,#050505) 70%);color:inherit;font:inherit;text-align:left;cursor:pointer}
.capps-agent>span:nth-child(2){flex:1 1 auto;display:flex;flex-direction:column;gap:2px}
.capps-agent small{font-size:13px;color:var(--gris-niebla,#CBD5E1)}
.capps-agent>.ic{width:18px;height:18px;color:var(--verde-cocuyo,#AFF33E)}
.capps-agent:hover{border-color:var(--verde-cocuyo,#AFF33E)}
.capps-empty{margin:30px 0;text-align:center;color:var(--gris-humo,#94A3B8)}
.capps-status{margin:0;padding:0 28px 20px;font-size:14px;color:var(--peligro,#F87171);min-height:1em}

@media (max-width:1100px){.capps-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.capps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .capps{width:100vw;max-width:100vw;max-height:94vh;border-radius:22px 22px 0 0;margin:auto auto 0}
  .capps-head{padding:18px 16px 4px}.capps-head h2{font-size:24px}
  .capps-tools{padding:10px 14px}
  .capps-list{padding:2px 14px 8px}
  .capps-grid{gap:10px}
  .capps-body{padding:10px 11px 12px}
  .capps-body b{font-size:14px}
  .capps-body small{font-size:12.5px}
  .capps-badge{width:34px;height:34px;border-radius:10px;left:8px;bottom:8px}
  .capps-badge .ic{width:17px;height:17px}
  .capps-meta em{display:none}
}
@media (prefers-reduced-motion:reduce){
  .capps[open],.capps-card{animation:none}
  .capps-card,.capps-thumb img{transition:none}
  .capps-card:hover .capps-thumb img{transform:none}
}

/* ------------------- Guía de la app encima del editor ---------------- */
.capps-guide{display:flex;align-items:center;gap:14px;margin:0 auto 10px;padding:10px 12px;max-width:960px;border-radius:18px;
  border:1px solid #2f4a15;background:linear-gradient(110deg,#11190b,#0a0d08);color:var(--blanco-luz,#F8FAFC);animation:capps-entra .25s ease-out}
.capps-guide[hidden]{display:none}
.capps-guide-thumb{position:relative;flex:0 0 auto;width:112px;aspect-ratio:16/9;border-radius:12px;overflow:hidden}
.capps-guide-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.capps-guide-thumb .capps-badge{width:30px;height:30px;border-radius:9px;left:6px;bottom:6px}
.capps-guide-thumb .capps-badge .ic{width:15px;height:15px}
.capps-guide b{display:block;font-size:15px}
.capps-guide small{font-size:12px;color:var(--gris-humo,#94A3B8)}
.capps-guide ol{margin:6px 0 0;padding-left:18px;font-size:14px;line-height:1.5;color:var(--gris-niebla,#CBD5E1)}
.capps-guide>div:nth-child(2){flex:1 1 auto;min-width:0}
.capps-guide-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.capps-guide-actions button[data-capps-otra]{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid #3d5a1c;background:transparent;color:var(--verde-cocuyo,#AFF33E);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.capps-guide-close{width:36px;height:36px;border-radius:10px;border:0;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer}
.capps-guide-close .ic{width:18px;height:18px}
@media (max-width:560px){.capps-guide-thumb{display:none}.capps-guide{align-items:flex-start}}

/* ------------- Orden de la navegación (dueño, 24-sep-2026) ------------ */
/* Biblioteca/Sesiones sale de la cabecera: se abre desde Proyectos. */
.studio-topbar .studio-session-switch,.studio-topbar #studioSessionToggle{display:none!important}
/* Menú de cuenta: sin «Planes del Estudio»; Idioma directo; sin Novedades. */
#accmenu [data-cocuyo-plan]{display:none!important}
#accmenu [data-account-section="preferences"]{display:none!important}
#accmenu .acc-language-directo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;min-height:44px}
body.studio-workbench #accmenu .acc-language.acc-language-directo{align-items:center;justify-content:flex-start;gap:11px;padding:4px 6px 4px 12px;min-height:44px}
body.studio-workbench #accmenu .acc-language-directo>[data-account-text="idioma"]{margin:0 auto 0 0;padding:0;font-size:13px;font-weight:inherit;line-height:1.3;align-self:center}
#accmenu .acc-language-icono{flex:none;opacity:.85}
/* En escritorio la Ayuda ya está arriba: no se repite en la cuenta. */
@media (min-width:901px){#accmenu #btnchat{display:none!important}}

/* ------------------- Móvil: textos y toques cómodos ------------------- */
@media (max-width:900px){
  .sm-nav [data-sm-text],.sm-nav span{font-size:12px!important}
  .sm-nav button,.sm-nav a{min-height:48px}
  .agente-beta{font-size:10.5px!important}
  .studio-topbar [data-top-models]{min-width:36px}
}