/* ============================================================================
   Amatia OpenCore — theme tokens + chrome styles (para Legacy)
   Fuente de verdad: DESIGN_SYSTEM.md §16
   Enlazar en application/views/header.php (link id="theme")
   ========================================================================== */

:root {
  /* Paleta pasteles */
  --color-brand-lavender:#F2DCF1; --color-brand-violet:#E2BBF2; --color-brand-purple:#E6C9F2;
  --color-brand-sky:#C4EEF2; --color-brand-bright:#5FD9D9;
  /* Teal (primary scale) */
  --color-teal-50:#DFF2F2; --color-teal-100:#B6F2EC; --color-teal-150:#A3D9D3;
  --color-teal-200:#79D9CF; --color-teal-300:#67AAAD; --color-teal-400:#14A697;
  --color-teal-500:#009599; --color-teal-600:#007A7D; --color-teal-700:#2C7373;
  --color-teal-800:#00678B; --color-teal-water:#9DF2C5; --color-teal-bright:#5FD9D9;
  /* Navy */
  --color-navy-700:#024959; --color-navy-800:#012640; --color-navy-900:#011A2E;
  /* Indigo */
  --color-indigo-600:#3B37B5; --color-indigo-700:#2A3159; --color-indigo-800:#303473; --color-indigo-900:#48257D;
  /* Alertas (semáforo) */
  --color-alert-ok:#14A697; --color-alert-attention:#F4C12E; --color-alert-warning:#F29D35;
  --color-alert-urgent:#F27649; --color-alert-critical:#F25252;
  /* Auxiliares */
  --color-brand-yellow:#FFFBD2; --color-slate-teal:#6CB7BA; --color-slate-blue:#456694; --color-brand-green:#E8F7EB;
  /* Slate (neutros) */
  --color-slate-50:#f8fafc; --color-slate-100:#f1f5f9; --color-slate-200:#e2e8f0;
  --color-slate-300:#cbd5e1; --color-slate-400:#94a3b8; --color-slate-500:#64748b;
  --color-slate-600:#475569; --color-slate-700:#334155; --color-slate-800:#1e293b; --color-slate-900:#0f172a;
  /* Semánticos estándar */
  --color-green-50:#f0fdf4; --color-green-100:#dcfce7; --color-green-500:#22c55e; --color-green-600:#16a34a; --color-green-700:#15803d;
  --color-red-50:#fef2f2; --color-red-100:#fee2e2; --color-red-500:#ef4444; --color-red-600:#dc2626; --color-red-700:#b91c1c;
  --color-amber-50:#fffbeb; --color-amber-100:#fef3c7; --color-amber-300:#F4C12E; --color-amber-500:#F29D35; --color-amber-600:#F27649; --color-amber-700:#b45309;
  --color-blue-50:#eff6ff; --color-blue-100:#dbeafe; --color-blue-500:#3b82f6; --color-blue-600:#2563eb; --color-blue-700:#1d4ed8;
  /* Tokens semánticos de acción/superficie/texto */
  --color-primary:#009599; --color-primary-hover:#007A7D; --color-primary-active:#006166;
  --color-primary-light:#DFF2F2; --color-primary-muted:#F0FAFA;
  --color-sidebar:#000e16; --color-sidebar-hover:rgba(255,255,255,0.08); --color-sidebar-active:rgba(0,149,153,0.14);
  --color-bg:#F0FAFA; --color-surface:#ffffff; --color-surface-2:#DFF2F2;
  --color-border:#C1D9D9; --color-border-strong:#cbd5e1;
  --color-text-primary:#0f172a; --color-text-secondary:#475569; --color-text-muted:#94a3b8; --color-text-inverse:#ffffff;
  --color-success:#16a34a; --color-warning:#F29D35; --color-error:#dc2626; --color-info:#2563eb;
  --color-danger:#f44336; --color-danger-hover:#d32f2f;
  /* Tipografía */
  --font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --fs-2xs:10px; --fs-xs:11px; --fs-sm:12px; --fs-base:14px; --fs-lg:16px; --fs-xl:18px; --fs-2xl:20px; --fs-3xl:24px;
  --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --lh-tight:1.25; --lh-normal:1.5; --lh-relaxed:1.75;
  /* Espaciado */
  --sp-0:0; --sp-0-5:2px; --sp-1:4px; --sp-1-5:6px; --sp-2:8px; --sp-2-5:10px; --sp-3:12px;
  --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  /* Radios */
  --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:12px; --radius-2xl:16px; --radius-full:9999px;
  /* Sombras */
  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-md:0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --shadow-xl:0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
  /* Transiciones */
  --t-fast:0.1s ease; --t-normal:0.15s ease; --t-slow:0.25s ease;
  /* Z-index tokenizado (NUNCA 2147483647) */
  --z-base:0; --z-raised:10; --z-dropdown:100; --z-sticky:200; --z-overlay:300; --z-drawer:400; --z-modal:500; --z-toast:600;
  /* Medidas shell */
  --shell-header-row1:48px; --shell-header-row2:40px; --shell-sidebar-collapsed:72px;
  --shell-sidebar-expanded:220px; --shell-band:3px; --shell-mega-col1:220px; --shell-mega-col2:280px;
}

/* ============================================================================
   CHROME — estilos del marco (top bar, sidebar, mega, título, barra opciones)
   Prefijo .oc- para no colisionar con Bootstrap 3 legacy.
   ========================================================================== */

.oc-shell, .oc-shell * { box-sizing:border-box; }
.oc-shell {
  font-family:var(--font-family); font-size:var(--fs-base); color:var(--color-text-primary);
  background:var(--color-bg); display:flex; height:100vh; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── Sidebar rail ─────────────────────────────────────────────────────────── */
.oc-sidebar {
  width:var(--shell-sidebar-expanded); flex-shrink:0; background:var(--color-sidebar);
  color:var(--color-text-inverse); display:flex; flex-direction:column; height:100%;
  border-right:var(--shell-band) solid var(--band, var(--color-teal-500)); transition:width var(--t-slow);
}
.oc-sidebar.collapsed { width:var(--shell-sidebar-collapsed); }
.oc-sb-logo {
  height:var(--shell-header-row1); display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--sp-3); border-bottom:1px solid rgba(255,255,255,.06);
}
.oc-sb-logo .oc-logo-wrap { display:flex; align-items:center; gap:var(--sp-2); min-width:0; text-decoration:none; }
.oc-sb-logo .oc-logo-word { height:24px; width:auto; }
.oc-sb-logo .oc-logo-mark { display:none; height:30px; width:auto; }  /* logo reducido (colapsado) */
.oc-env { font-size:9px; font-weight:var(--fw-bold); letter-spacing:.08em; padding:1px 8px; border-radius:var(--radius-full);
  color:#fff; background:var(--env-color,var(--color-warning)); text-transform:uppercase; flex-shrink:0; }
/* badge de entorno: encima de los atajos, siempre cabe (expandido y colapsado) */
.oc-env-row { display:flex; justify-content:center; padding:var(--sp-1) var(--sp-2) var(--sp-1-5); flex-shrink:0; }
.oc-sb-logo .oc-collapse { background:none; border:none; color:var(--color-slate-400); cursor:pointer; font-size:16px; }
/* colapsado: ocultar wordmark, mostrar marca reducida + env sigue visible */
.collapsed .oc-sb-logo { flex-direction:column; height:auto; padding:var(--sp-2) 0; gap:4px; }
.collapsed .oc-logo-wrap { flex-direction:column; gap:4px; }
.collapsed .oc-sb-logo .oc-logo-mark { display:block; }
.collapsed .oc-sb-logo .oc-collapse { display:flex !important; justify-content:center; width:100%; }
.oc-sb-menu-trigger {
  height:var(--shell-header-row2); display:flex; align-items:center; gap:var(--sp-2);
  padding:0 var(--sp-3); background:var(--band, var(--color-teal-500)); color:#fff;
  font-size:var(--fs-sm); font-weight:var(--fw-semibold); cursor:pointer; border:none; width:100%;
  letter-spacing:.02em;
}
.oc-sb-nav { flex:1; overflow-y:auto; padding:var(--sp-2) 0; }
.oc-sb-nav::-webkit-scrollbar { width:6px; } .oc-sb-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:3px; }
.oc-wa {
  display:flex; align-items:center; gap:var(--sp-2-5); padding:var(--sp-2) var(--sp-3);
  cursor:pointer; font-size:var(--fs-sm); color:var(--color-slate-300); border-left:2px solid transparent;
  transition:background var(--t-normal);
}
.oc-wa:hover { background:var(--color-sidebar-hover); color:#fff; }
.oc-wa.active { background:var(--wac,rgba(0,149,153,.14)); border-left-color:var(--wac-solid,var(--color-teal-500)); color:#fff; }
.oc-wa .oc-wa-ico { width:20px; text-align:center; color:var(--wac-solid,inherit); }
.oc-wa .oc-wa-count { margin-left:auto; font-size:var(--fs-2xs); color:var(--color-slate-500); background:rgba(255,255,255,.06); padding:1px 6px; border-radius:var(--radius-full); }
.oc-wa .oc-wa-caret { font-size:9px; color:var(--color-slate-500); margin-left:8px; transition:transform var(--t-normal); }
.oc-wa-group.open > .oc-wa .oc-wa-caret { transform:rotate(180deg); }

/* Acordeón inline (modo expandido): módulos bajo el workarea */
.oc-wa-modules { display:none; padding:2px 0 6px; }
.oc-wa-group.open > .oc-wa-modules { display:block; }
.oc-wa-mod { display:flex; align-items:center; gap:var(--sp-2); padding:6px var(--sp-3) 6px 40px; cursor:pointer;
  font-size:var(--fs-sm); color:var(--color-slate-300); border-left:2px solid transparent; }
.oc-wa-mod:hover { background:var(--color-sidebar-hover); color:#fff; }
.oc-wa-mod.active { background:var(--wac,rgba(0,149,153,.14)); border-left-color:var(--wac-solid,var(--color-teal-500)); color:#fff; }
.oc-wa-mod .ico { width:16px; text-align:center; font-size:13px; flex-shrink:0; }
.oc-wa-mod .lbl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.collapsed .oc-wa-label, .collapsed .oc-wa-count, .collapsed .oc-wa-caret, .collapsed .oc-wa-modules, .collapsed .oc-sb-menu-trigger span, .collapsed .oc-logo-word { display:none !important; }
.collapsed .oc-sb-logo .oc-logo-mark { display:block !important; }
.collapsed .oc-sb-menu-trigger { justify-content:center; }

/* ── Atajos (shortcuts) — zona fija al fondo del sidebar. POR PROYECTO (JSON) ── */
.oc-sb-shortcuts { flex-shrink:0; border-top:1px solid rgba(255,255,255,.1); padding:var(--sp-2) 0 var(--sp-1); }
.oc-sb-shortcuts .oc-sc-title { font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.06em; color:var(--color-slate-500); padding:2px var(--sp-3) 4px; }
.oc-shortcut { display:flex; align-items:center; gap:var(--sp-2-5); padding:var(--sp-1-5) var(--sp-3); cursor:pointer;
  font-size:var(--fs-sm); color:var(--color-slate-300); text-decoration:none; }
.oc-shortcut:hover { background:var(--color-sidebar-hover); color:#fff; }
.oc-shortcut .oc-sc-ico { width:20px; text-align:center; color:var(--color-slate-400); }
.oc-shortcut:hover .oc-sc-ico { color:var(--color-teal-bright); }
.collapsed .oc-sc-label, .collapsed .oc-sc-title { display:none; }
.collapsed .oc-shortcut { justify-content:center; }

/* ── Right column ─────────────────────────────────────────────────────────── */
.oc-main { flex:1; display:flex; flex-direction:column; min-width:0; }
.oc-header { flex-shrink:0; background:var(--color-surface); position:relative; z-index:var(--z-sticky); }

/* Row 1: breadcrumb + topbar */
.oc-row1 { height:var(--shell-header-row1); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--color-slate-100); }
.oc-breadcrumb { display:flex; align-items:center; gap:var(--sp-2); padding:0 var(--sp-4); font-size:var(--fs-sm); min-width:0; }
.oc-crumb { display:flex; align-items:center; gap:6px; color:var(--color-text-secondary); white-space:nowrap; }
.oc-crumb .fa, .oc-crumb .lucide { color:var(--crumb-color,var(--color-slate-400)); }
.oc-crumb-sep { color:var(--color-slate-300); }
.oc-crumb.module { color:var(--color-slate-800); font-weight:var(--fw-semibold); }
.oc-ws { display:flex; align-items:center; gap:6px; padding:4px 8px; border-radius:var(--radius-md); cursor:pointer; }
.oc-ws:hover { background:var(--color-slate-50); }

.oc-topbar { display:flex; align-items:center; gap:var(--sp-3); padding:0 var(--sp-4); }
.oc-tb-btn { background:none; border:none; color:var(--color-slate-400); cursor:pointer; font-size:15px; display:flex; align-items:center; gap:6px; }
.oc-tb-btn:hover { color:var(--color-teal-600); }
.oc-user { display:flex; align-items:center; gap:8px; cursor:pointer; position:relative; }
.oc-user-name { font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--color-text-primary); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oc-user-badge { width:28px; height:28px; border-radius:var(--radius-full); background:var(--color-teal-500); color:#fff; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-weight:var(--fw-semibold); }
.oc-user-menu { position:absolute; right:0; top:100%; width:192px; background:#fff; border:1px solid var(--color-slate-200); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:4px 0; display:none; z-index:var(--z-dropdown); }
.oc-user:hover .oc-user-menu { display:block; }
.oc-user-menu .email { padding:8px 12px; font-size:var(--fs-xs); color:var(--color-slate-400); border-bottom:1px solid var(--color-slate-100); }
.oc-user-menu .logout { padding:8px 12px; font-size:var(--fs-sm); color:var(--color-red-600); cursor:pointer; display:flex; gap:8px; align-items:center; }
.oc-user-menu .logout:hover { background:var(--color-red-50); }

/* Language dropdown — same pattern as oc-user-menu */
.oc-lang { position:relative; }
.oc-lang-menu { position:absolute; right:0; top:100%; width:140px; background:#fff; border:1px solid var(--color-slate-200); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:4px 0; display:none; z-index:var(--z-dropdown); }
.oc-lang:hover .oc-lang-menu { display:block; }
.oc-lang-opt { padding:6px 12px; font-size:var(--fs-sm); color:var(--color-text-secondary); cursor:pointer; display:flex; align-items:center; gap:6px; }
.oc-lang-opt:hover { background:var(--color-slate-50); color:var(--color-text-primary); }
.oc-lang-opt.active { color:var(--color-primary); font-weight:var(--fw-semibold); }

/* Row 2: module options bar — tintada con color del workarea (no plana).
   Sin border-top: Row1 ya cierra con border-bottom → evita desalinear el icono 1px. */
.oc-row2 { height:var(--shell-header-row2); display:flex; align-items:stretch;
  background:var(--row2-tint, rgba(0,149,153,.07)); }
.oc-mod-ico { width:40px; height:100%; display:flex; align-items:center; justify-content:center; background:var(--band,var(--color-teal-500)); color:#fff; font-size:16px; flex-shrink:0; }

/* tabs: scroller horizontal SIN barra visible; flechas Excel-like solo si overflow */
.oc-tabs-wrap { position:relative; display:flex; align-items:stretch; flex:1; min-width:0; }
.oc-tabs { display:flex; align-items:stretch; flex:1; overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth; }
.oc-tabs::-webkit-scrollbar { display:none; }
.oc-tab {
  display:flex; align-items:center; gap:6px; padding:0 var(--sp-3); font-size:var(--fs-sm);
  color:var(--color-text-secondary); cursor:pointer; position:relative; white-space:nowrap; flex-shrink:0;
  border-right:1px solid rgba(0,0,0,.05);
}
.oc-tab .label { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oc-tab:hover:not(.active) { background:rgba(255,255,255,.5); }
/* TAB ACTIVO: mismo blanco del contenido + barra de color arriba (signifier).
   Conecta con el contenido: se estira 1px hacia abajo para tapar la línea divisoria. */
.oc-tab.active {
  background:var(--color-surface); color:var(--color-text-primary); font-weight:var(--fw-semibold);
  position:relative; z-index:3; margin-bottom:-1px; padding-bottom:1px;
}
.oc-tab.active::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--band,var(--color-teal-500)); }
.oc-tab .dot { width:6px; height:6px; border-radius:var(--radius-full); background:var(--band,var(--color-teal-500)); flex-shrink:0; }
.oc-tab .badge { font-size:var(--fs-2xs); background:var(--color-slate-200); color:var(--color-slate-600); padding:0 6px; border-radius:var(--radius-full); }

/* Flechas: absolutas en cada extremo, aparecen SOLO cuando hay contenido oculto en esa dirección */
.oc-tab-arrow {
  position:absolute; top:0; bottom:0; width:26px; display:none; align-items:center; justify-content:center;
  background:var(--color-surface); border:none; cursor:pointer; color:var(--color-slate-500); z-index:2; padding:0;
}
.oc-tab-arrow:hover { color:var(--color-text-primary); }
.oc-tab-arrow.left  { left:0;  box-shadow:8px 0 8px -6px rgba(0,0,0,.25); }
.oc-tab-arrow.right { right:0; box-shadow:-8px 0 8px -6px rgba(0,0,0,.25); }
.oc-tabs-wrap.ovf-left  .oc-tab-arrow.left  { display:flex; }
.oc-tabs-wrap.ovf-right .oc-tab-arrow.right { display:flex; }

.oc-actions { display:flex; align-items:center; gap:4px; padding:0 var(--sp-3); flex-shrink:0; background:var(--color-surface); border-left:1px solid var(--color-slate-100); }
.oc-actions .oc-views-wrap { position:relative; }
.oc-btn { display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); border:none; border-radius:var(--radius-md); padding:5px 10px; cursor:pointer; }
.oc-btn-primary { background:var(--band,var(--color-teal-500)); color:#fff; opacity:.92; }
.oc-btn-primary:hover { opacity:1; }
.oc-btn-ghost { background:transparent; color:var(--color-text-secondary); }
.oc-btn-ghost:hover { background:var(--color-slate-100); }

/* ── Content ──────────────────────────────────────────────────────────────────
   Marco verde MÍNIMO: padding chico = fina franja del bg (teal-tint) alrededor
   del contenedor blanco. El iframe ocupa casi todo (módulos van al pixel).       */
/* Contenido: padding desde la línea punteada (10px top, 5px laterales) + marco
   completo con borde del color del workarea. El iframe llena todo (height:100%
   vía flex → usa todo el alto disponible sin JS de cálculo). */
.oc-content { flex:1; overflow:hidden; padding:12px 10px 10px 10px; background:#ffffff; position:relative; }
.oc-frame {
  height:100%; background:var(--color-surface);
  border:1px solid var(--color-slate-200);
  border-radius:var(--radius-lg); overflow:hidden;
}
.oc-frame > iframe { width:100%; height:100%; border:none; display:block; }
/* solo prototipo: contenido dummy dentro del frame */
.oc-frame .demo-inner { padding:var(--sp-5); }

/* ── DRAWER: se abre SOBRE el contenedor del módulo (nunca sobre menú/título) ──
   Vive dentro de .oc-content (que es position:relative), así solo cubre el área
   del módulo. Ancho 25/50/75%. Reservado; uso opcional. ─────────────────────── */
.oc-drawer-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.18); z-index:calc(var(--z-drawer) - 1);
  opacity:0; visibility:hidden; transition:opacity var(--t-normal); }
.oc-drawer-backdrop.open { opacity:1; visibility:visible; }
.oc-drawer {
  position:absolute; top:0; right:0; bottom:var(--sp-2); width:50%;
  background:var(--color-surface); border-left:1px solid var(--color-border);
  border-radius:0 0 var(--radius-lg) 0; box-shadow:-10px 0 30px rgba(0,0,0,.16);
  transform:translateX(105%); transition:transform var(--t-slow), width var(--t-normal);
  z-index:var(--z-drawer); display:flex; flex-direction:column;
}
.oc-drawer.open { transform:translateX(0); }
.oc-drawer.w25 { width:25%; } .oc-drawer.w50 { width:50%; } .oc-drawer.w75 { width:75%; }
.oc-drawer-head { display:flex; align-items:center; gap:var(--sp-2); height:var(--shell-header-row2);
  padding:0 var(--sp-3); border-bottom:1px solid var(--color-slate-100); flex-shrink:0; }
.oc-drawer-title { display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--color-text-primary); }
.oc-drawer-sizes { margin-left:auto; display:flex; gap:2px; }
.oc-drawer-sizes button { border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text-secondary);
  font-size:var(--fs-2xs); font-weight:var(--fw-semibold); padding:3px 7px; border-radius:var(--radius-sm); cursor:pointer; }
.oc-drawer-sizes button.active { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.oc-drawer-close { border:none; background:none; color:var(--color-slate-500); cursor:pointer; padding:4px; display:flex; }
.oc-drawer-close:hover { color:var(--color-text-primary); }
.oc-drawer-body { flex:1; overflow:auto; padding:var(--sp-5); }
.oc-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--sp-4); }

/* ── Breadcrumb: chip de PRODUCTO/VERTICAL (Ambiental SDE / Contratistas) ──── */
.oc-product { display:flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--radius-full);
  font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:#fff; background:var(--prod,var(--color-navy-800)); white-space:nowrap; }

/* ── Company switcher dropdown ──────────────────────────────────────────── */
.oc-company-switcher { position:relative; cursor:pointer; }
.oc-company-switcher:hover .oc-company-menu { display:block; }
.oc-company-menu { position:absolute; left:0; top:100%; width:280px; max-height:360px; overflow-y:auto; background:#fff; border:1px solid var(--color-slate-200); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:4px 0; display:none; z-index:var(--z-dropdown); }
.oc-company-group { padding:6px 12px 3px; font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--color-slate-400); text-transform:uppercase; letter-spacing:.5px; border-top:1px solid var(--color-slate-100); margin-top:4px; }
.oc-company-group:first-of-type { border-top:none; margin-top:0; }
.oc-company-opt { display:block; padding:5px 12px; font-size:var(--fs-sm); color:var(--color-text-secondary); text-decoration:none; }
.oc-company-opt:hover { background:var(--color-slate-50); color:var(--color-text-primary); }
.oc-company-opt.active { color:var(--color-primary); font-weight:var(--fw-semibold); background:rgba(0,149,153,.06); cursor:default; }

/* ── Slot reservado: franja bajo Row2 para contenido inyectado por el módulo
      (ej. ayuda contextual). Oculto si vacío. NO oculta menú ni título. ──── */
.oc-toolbar-extra { flex-shrink:0; background:var(--color-surface); border-top:1px solid var(--color-slate-100); }
.oc-toolbar-extra:empty { display:none; }

/* ── Mensajes unificados (toast) — colores clásicos tipo SweetAlert ─────────
   Único sistema para mensajes del chrome Y del iframe del módulo.             */
.oc-toast-host { position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:12px; z-index:var(--z-toast); }
/* Toast elaborado: fondo pálido del color, borde + texto en el tono, flotando */
.oc-toast {
  display:flex; align-items:flex-start; gap:12px; min-width:320px; max-width:410px;
  background:var(--t-bg); border:1px solid var(--t-line); border-left:4px solid var(--t-accent);
  border-radius:var(--radius-lg); padding:13px 15px; cursor:pointer;
  box-shadow:0 10px 28px -6px rgba(0,0,0,.18), 0 3px 8px -3px rgba(0,0,0,.10);  /* flotando */
  animation:slide-in-right 220ms cubic-bezier(.2,.8,.2,1);
}
.oc-toast .oc-toast-ico {
  width:30px; height:30px; border-radius:var(--radius-full); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:15px;
  background:var(--t-icobg); color:var(--t-accent);
}
.oc-toast .oc-toast-body { min-width:0; padding-top:1px; }
.oc-toast .oc-toast-title { font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--t-text); letter-spacing:.005em; }
.oc-toast .oc-toast-msg { font-size:var(--fs-xs); color:var(--t-text); opacity:.78; line-height:var(--lh-normal); margin-top:3px; }
.oc-toast .oc-toast-close { margin-left:auto; color:var(--t-text); opacity:.45; font-size:12px; padding-left:6px; }
.oc-toast .oc-toast-close:hover { opacity:.9; }

/* Verde puro (éxito) */
.oc-toast.success { --t-bg:#f2fcf5; --t-line:#bbf0cb; --t-accent:#16a34a; --t-icobg:#dcfce7; --t-text:#14663a; }
/* Rojo puro (error) */
.oc-toast.error   { --t-bg:#fef4f4; --t-line:#f6c9c9; --t-accent:#e11d1d; --t-icobg:#fde0e0; --t-text:#a11515; }
/* Amarillo casi dorado (alerta) — borde y letras doradas sobre amarillo muy pálido */
.oc-toast.warning { --t-bg:#fffdf2; --t-line:#efdca0; --t-accent:#d9a406; --t-icobg:#fbf0c8; --t-text:#8a6400; }
/* Azul (info) */
.oc-toast.info    { --t-bg:#f2f7ff; --t-line:#c3d9f7; --t-accent:#2563eb; --t-icobg:#dbeafe; --t-text:#1a4bb0; }
@keyframes slide-in-right { from{opacity:0; transform:translateX(40px);} to{opacity:1; transform:translateX(0);} }

/* ── Mega menu ────────────────────────────────────────────────────────────── */
.oc-mega-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.2); z-index:var(--z-overlay); display:none; }
.oc-mega-backdrop.open { display:block; }
.oc-mega { position:fixed; top:0; bottom:0; display:flex; z-index:calc(var(--z-overlay) + 1); box-shadow:var(--shadow-xl); animation:oc-mega-slide 180ms ease-out; }
@keyframes oc-mega-slide { from{opacity:0; transform:translateX(-12px);} to{opacity:1; transform:translateX(0);} }
.oc-mega-col1 { width:var(--shell-mega-col1); background:var(--color-sidebar); border-right:1px solid var(--color-navy-700); color:#fff; overflow-y:auto; padding:var(--sp-2) 0; }
.oc-mega-col2 { width:var(--shell-mega-col2); background:var(--color-surface); overflow-y:auto; padding:var(--sp-3); }
.oc-mega-wa { display:flex; align-items:center; gap:var(--sp-2-5); padding:var(--sp-2) var(--sp-3); cursor:pointer; font-size:var(--fs-sm); color:var(--color-slate-300); border-left:2px solid transparent; }
.oc-mega-wa:hover, .oc-mega-wa.hover { color:#fff; }
.oc-mega-wa .ico { width:20px; text-align:center; }
.oc-mega-wa .cnt { margin-left:auto; font-size:var(--fs-2xs); color:var(--color-slate-500); }
.oc-mega-col2 h3 { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em; margin:0 0 var(--sp-2); padding:0 var(--sp-2); }

/* Panel único del mega: nombre del workarea (header) + módulos debajo */
.oc-mega-panel { width:var(--shell-mega-col2); background:var(--color-surface); overflow-y:auto; padding:var(--sp-2); }
.oc-mega-head { display:flex; align-items:center; gap:var(--sp-2-5); padding:var(--sp-2) var(--sp-2) var(--sp-2-5); margin-bottom:var(--sp-1);
  border-bottom:2px solid var(--color-slate-100); }
.oc-mega-head-ico { width:26px; height:26px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; flex-shrink:0; }
.oc-mega-head-name { font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.oc-mega-head-cnt { margin-left:auto; font-size:var(--fs-2xs); font-weight:var(--fw-semibold); color:var(--color-slate-500); background:var(--color-slate-100); padding:1px 7px; border-radius:var(--radius-full); }
.oc-mega-mod { display:flex; align-items:flex-start; gap:var(--sp-2-5); padding:var(--sp-2); border-radius:var(--radius-md); cursor:pointer; }
.oc-mega-mod:hover { background:var(--modtint,var(--color-slate-50)); }
.oc-mega-mod .ico { width:24px; text-align:center; font-size:16px; color:var(--modcolor,var(--color-slate-500)); padding-top:2px; }
.oc-mega-mod .name { font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--color-slate-800); }
.oc-mega-mod .desc { font-size:var(--fs-xs); color:var(--color-slate-400); line-height:var(--lh-tight); }