/* Encabezado y pestañas de Organización y Contexto (3.9.21): mismo lenguaje del Centro de Comando. */
/* Solo con el encabezado presente: si otro módulo vacía #tabs, vuelve su estilo normal. */
#app > .main #tabs:has(> .cg-oc-head) { display:block; margin:0 0 16px; }

.cg-oc-head {
  display:grid; gap:18px;
  padding:22px 24px 16px;
  border:1px solid #1e40af33; border-radius:22px;
  color:#fff;
  background:
    radial-gradient(circle at 86% 18%, #38bdf84d 0, transparent 26%),
    radial-gradient(circle at 12% 110%, #a855f74d 0, transparent 34%),
    linear-gradient(120deg, #0b1d33 0%, #142c44 46%, #2a1f52 100%);
  box-shadow:0 18px 42px #0f172a26;
}
.cg-oc-head__text { display:grid; gap:6px; min-width:0; }
.cg-oc-head__eyebrow { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#93c5fd; }
.cg-oc-head__title { margin:0; font-size:26px; line-height:1.2; font-weight:750; color:#fff; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; }
.cg-oc-head__org { font-size:14px; font-weight:600; color:#cbd5e1; padding:3px 10px; border:1px solid #ffffff33; border-radius:999px; background:#ffffff14; }
.cg-oc-head__lead { margin:0; max-width:820px; font-size:14px; line-height:1.5; color:#dbe7f7; }

.cg-oc-tabs { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; }
.cg-oc-tab {
  display:grid; gap:2px; align-content:start; text-align:left;
  min-height:58px; padding:10px 12px;
  border:1px solid #ffffff2e; border-radius:14px;
  background:#ffffff12; color:#e2e8f0;
  font:inherit; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cg-oc-tab:hover { background:#ffffff24; border-color:#ffffff55; }
.cg-oc-tab.is-active { background:#fff; border-color:#fff; color:#0f2a4a; box-shadow:0 10px 22px #0f172a40; }
.cg-oc-tab__label { font-size:14px; font-weight:700; line-height:1.3; }
.cg-oc-tab__hint { font-size:12px; line-height:1.35; color:#bcd0e8; }
.cg-oc-tab.is-active .cg-oc-tab__hint { color:#475569; }
.cg-oc-tab:focus-visible { outline:3px solid #71dcff; outline-offset:2px; }

/* Los paneles de cada pestaña arrancan pegados al encabezado. */
#app > .main #tabs:has(> .cg-oc-head) + #oc > .card:first-child { margin-top:0; }

@media (max-width:1100px) {
  .cg-oc-tabs { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:640px) {
  .cg-oc-head { padding:18px 16px 14px; border-radius:18px; }
  .cg-oc-head__title { font-size:22px; }
  .cg-oc-tabs { display:flex; overflow-x:auto; gap:8px; padding-bottom:4px; scroll-snap-type:x proximity; }
  .cg-oc-tab { flex:0 0 auto; min-height:44px; scroll-snap-align:start; }
  .cg-oc-tab__hint { display:none; }
}
@media (prefers-reduced-motion:reduce) { .cg-oc-tab { transition:none; } }
@media (forced-colors:active) { .cg-oc-tab.is-active { outline:2px solid Highlight; } }

/* La franja superior (.top) solo aloja el selector de organización. Si está oculto, no reserva espacio
   y el contenido de cada módulo empieza arriba. */
#app.cg-navigation-shell .main > .top:not(:has(#organizationSwitcher:not([hidden]))) { display:none; }

/* 3.9.23: aviso de solo lectura en Procesos, Activos y Terceros. */
.cg-oc-readonly { margin:0; max-width:420px; padding:10px 12px; border:1px solid #cbd5e1; border-radius:12px; background:#f8fafc; color:#334155; font-size:13px; line-height:1.45; }
.cg-oc-readonly b { display:block; color:#0f2a4a; margin-bottom:2px; }
@media (max-width:760px) { .cg-oc-readonly { max-width:none; } }

/* 3.9.25: guía de redacción como nota informativa (antes parecía un botón con la pastilla "Objetivo gobernado"). */
.cg-form-guide { display:grid; gap:4px; margin:0; padding:12px 14px 12px 16px; border:1px solid #c7d2fe; border-left:4px solid #6366f1; border-radius:12px; background:#f5f7ff; color:#334155; }
.cg-form-guide__title { font-size:13px; font-weight:700; color:#312e81; }
.cg-form-guide p { margin:0; font-size:13px; line-height:1.5; }