/*
 * CELDA · Sistema de gestión integrado
 * Rediseño UI/UX — Bloque 1
 * Alcance: sistema visual base, identidad, sidebar y topbar.
 * No contiene lógica de negocio ni modifica contratos API.
 */

html[data-celda-design="sgi"]{
  --sgi-blue:#2878ed;
  --sgi-blue-strong:#1766da;
  --sgi-blue-soft:#eaf3ff;
  --sgi-ink:#16345f;
  --sgi-text:#20324d;
  --sgi-muted:#718096;
  --sgi-line:#e3eaf3;
  --sgi-page:#f5f8fc;
  --sgi-surface:#ffffff;
  --sgi-success:#159b70;
  --sgi-warning:#d99019;
  --sgi-danger:#dc5964;
  --sgi-radius:14px;
  --sgi-shadow:0 12px 34px rgba(38,72,112,.08);

  /* La nueva identidad es deliberadamente clara y uniforme. Las preferencias
     antiguas siguen existiendo durante la transición, pero el shell usa esta base. */
  --ink:var(--sgi-text);
  --ink-soft:var(--sgi-muted);
  --paper:var(--sgi-page);
  --surface:var(--sgi-surface);
  --surface-subtle:#f8fafd;
  --control-bg:#fff;
  --line:var(--sgi-line);
  --copper:var(--sgi-blue);
  --copper-soft:var(--sgi-blue-soft);
  --green:var(--sgi-success);
  --green-soft:#e9f8f2;
  --red:var(--sgi-danger);
  --red-soft:#fff0f2;
  --warning-soft:#fff8e9;
  --warning-line:#f0d090;
  --sidebar-bg:#fbfdff;
  --sidebar-text:var(--sgi-text);
  --sidebar-muted:#6f8097;
  --sidebar-hover:#f0f6ff;
  --sidebar-active:var(--sgi-blue);
  --sidebar-foot:#8492a6;
  --focus-ring:rgba(40,120,237,.18);
  --font-display:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

html[data-celda-design="sgi"] body{
  margin:0;
  background:
    radial-gradient(circle at 82% -8%,rgba(65,139,234,.09),transparent 30%),
    linear-gradient(180deg,#eef5fc 0,#f7f9fc 260px,#f5f8fc 100%);
  color:var(--sgi-text);
}

html[data-celda-design="sgi"] #erp-root{
  position:relative;
  min-height:720px;
  border:1px solid #dfe8f2;
  border-radius:18px;
  overflow:hidden;
  background:var(--sgi-page);
  box-shadow:0 20px 56px rgba(39,74,113,.10);
}

/* ---------- Identidad / sidebar ---------- */
html[data-celda-design="sgi"] #erp-root .sidebar{
  position:relative;
  z-index:30;
  width:244px;
  padding:22px 16px 18px;
  gap:17px;
  color:var(--sgi-text);
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 72%,#f8fbff 100%);
  border-right:1px solid var(--sgi-line);
  box-shadow:none;
}

html[data-celda-design="sgi"] #erp-root .brand{
  display:block;
  padding:2px 10px 16px;
  border-bottom:1px solid #edf1f6;
  font-family:var(--font-display);
  letter-spacing:normal;
  color:var(--sgi-text);
}
html[data-celda-design="sgi"] #erp-root .brand .brand-kicker{
  display:block;
  margin-bottom:5px;
  color:#7890ad;
  font-size:9px;
  line-height:1.2;
  font-weight:750;
  letter-spacing:.12em;
  text-transform:uppercase;
}
html[data-celda-design="sgi"] #erp-root .brand strong{
  display:block;
  max-width:190px;
  color:var(--sgi-ink);
  font-size:17px;
  line-height:1.18;
  font-weight:750;
  letter-spacing:-.018em;
}
html[data-celda-design="sgi"] #erp-root .brand .brand-subtitle{
  display:block;
  margin-top:6px;
  color:#8a99ad;
  font-size:9.5px;
  line-height:1.35;
  font-weight:500;
}

html[data-celda-design="sgi"] #erp-root .nav{
  gap:3px;
}
html[data-celda-design="sgi"] #erp-root .nav button{
  min-height:38px;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:9px;
  color:#526981;
  font-size:12.5px;
  font-weight:600;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease;
}
html[data-celda-design="sgi"] #erp-root .nav button:hover{
  color:#245eaa;
  background:#f1f6fd;
  border-color:#e6eef8;
  transform:none;
}
html[data-celda-design="sgi"] #erp-root .nav button.active,
html[data-celda-design="sgi"] #erp-root .nav button.nav-sub.active{
  color:#fff;
  background:linear-gradient(135deg,#3b8af4 0%,#2878ed 100%);
  border-color:#2a79ec;
  box-shadow:0 8px 18px rgba(40,120,237,.18);
}
html[data-celda-design="sgi"] #erp-root .nav .tag{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  flex:0 0 24px;
  border-radius:7px;
  background:#f1f5fa;
  color:#7188a5;
  font:650 8px/1 var(--font-mono);
  opacity:1;
}
html[data-celda-design="sgi"] #erp-root .nav button.active .tag{
  color:#fff;
  background:rgba(255,255,255,.17);
}
html[data-celda-design="sgi"] #erp-root .nav button.nav-sub{
  min-height:31px;
  padding:5px 9px 5px 39px;
  border-radius:8px;
  color:#718198;
  font-size:11.5px;
  font-weight:550;
}
html[data-celda-design="sgi"] #erp-root .nav button.nav-sub:hover{
  color:#2769bd;
  background:#f3f7fc;
}

/* Se conserva el logo real inferior de CELDA; solo cambia su tratamiento. */
html[data-celda-design="sgi"] #erp-root .sidebar-logo-wrap{
  margin:8px 4px 0;
  padding:11px 12px;
  border:1px solid #e5ecf4;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,251,255,.96));
  box-shadow:0 8px 24px rgba(36,72,113,.07);
}
html[data-celda-design="sgi"] #erp-root .sidebar-logo-wrap img{
  max-height:47px;
  object-fit:contain;
}
html[data-celda-design="sgi"] #erp-root .sidebar-foot{
  margin-top:0;
  padding:0 7px;
  color:#8b99aa;
  font:500 9px/1.45 var(--font-body);
  letter-spacing:.01em;
}

/* ---------- Topbar visual ---------- */
@media (min-width:761px){
  html[data-celda-design="sgi"] #erp-root::after{
    content:"";
    position:absolute;
    z-index:20;
    top:0;
    left:244px;
    right:0;
    height:66px;
    pointer-events:none;
    background:rgba(255,255,255,.93);
    border-bottom:1px solid var(--sgi-line);
    box-shadow:0 4px 14px rgba(44,76,111,.035);
    backdrop-filter:blur(12px) saturate(1.05);
  }

  html[data-celda-design="sgi"] #erp-root .main{
    position:relative;
    z-index:10;
    padding:88px 30px 38px;
    max-height:780px;
    background:linear-gradient(180deg,#f8fafd 0,#f5f8fc 210px,#f5f8fc 100%);
  }

  /* Los controles existentes se reutilizan; solo se integran visualmente en la topbar. */
  html[data-celda-design="sgi"] #celda-context-hub{
    top:12px!important;
    right:132px!important;
    z-index:10000!important;
  }
  html[data-celda-design="sgi"] #celda-context-hub .celda-context-actions{
    gap:4px!important;
    padding:3px!important;
    border:1px solid #e5ebf3!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.88)!important;
    box-shadow:none!important;
    backdrop-filter:blur(10px)!important;
  }
  html[data-celda-design="sgi"] #celda-context-hub .cch-button{
    min-width:34px!important;
    width:34px!important;
    height:34px!important;
    padding:0!important;
    border:0!important;
    border-radius:9px!important;
    background:transparent!important;
    color:#526b86!important;
    box-shadow:none!important;
  }
  html[data-celda-design="sgi"] #celda-context-hub .cch-button:hover,
  html[data-celda-design="sgi"] #celda-context-hub .cch-button:focus-visible{
    background:#eef5ff!important;
    color:#236ecb!important;
  }
  html[data-celda-design="sgi"] #celda-context-hub .cch-badge{
    background:#f2a51a!important;
    border:2px solid #fff!important;
    box-shadow:none!important;
  }

  html[data-celda-design="sgi"] #celda-system-bar{
    top:12px!important;
    right:16px!important;
    bottom:auto!important;
    z-index:10002!important;
  }
  html[data-celda-design="sgi"] #celda-system-toggle{
    min-height:40px!important;
    padding:6px 10px!important;
    gap:7px!important;
    border:1px solid #e4eaf2!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.94)!important;
    color:#315270!important;
    box-shadow:none!important;
    backdrop-filter:blur(10px)!important;
  }
  html[data-celda-design="sgi"] #celda-system-toggle:hover,
  html[data-celda-design="sgi"] #celda-system-toggle:focus-visible{
    border-color:#cfe0f5!important;
    background:#f7faff!important;
    color:#1e68c4!important;
    box-shadow:none!important;
  }
  html[data-celda-design="sgi"] #celda-system-toggle .cs-dot{
    width:9px!important;
    height:9px!important;
    box-shadow:none!important;
  }
  html[data-celda-design="sgi"] #celda-system-toggle .cs-label{
    max-width:68px!important;
    color:inherit!important;
    font-size:11px!important;
  }
  html[data-celda-design="sgi"] #celda-system-panel{
    top:48px!important;
    right:0!important;
    bottom:auto!important;
    width:min(430px,calc(100vw - 28px))!important;
    border:1px solid #dfe7f1!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 22px 58px rgba(31,58,90,.18)!important;
  }
}

/* ---------- Base tipográfica de contenido ---------- */
html[data-celda-design="sgi"] #erp-root .view-title{
  color:#193a66;
  font-family:var(--font-display);
  font-size:28px;
  line-height:1.08;
  font-weight:750;
  letter-spacing:-.025em;
}
html[data-celda-design="sgi"] #erp-root .view-sub{
  color:#78879a;
  font-size:12.5px;
  line-height:1.55;
}
html[data-celda-design="sgi"] #erp-root .section-head h2{
  color:#243f65;
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.015em;
}

/* Mantener accesibilidad y reducir movimiento cuando la preferencia ya existente lo pide. */
html[data-celda-design="sgi"][data-celda-motion="reduced"] #erp-root .nav button,
html[data-celda-design="sgi"][data-celda-motion="reduced"] #celda-system-toggle,
html[data-celda-design="sgi"][data-celda-motion="reduced"] #celda-context-hub .cch-button{
  transition:none!important;
}

@media (max-width:760px){
  /* Responsive integral pertenece al Bloque 4. En este checkpoint se conserva
     la navegación móvil ya estable de R2-A1 y solo se aplica la identidad. */
  html[data-celda-design="sgi"] #erp-root .sidebar{
    background:#fff;
  }
  html[data-celda-design="sgi"] #erp-root .brand strong{
    font-size:16px;
  }
}

/* ========================================================================== 
   BLOQUE 2 · Componentes globales + refinamiento visual del shell
   Objetivo: acercar el frontend real al mockup aprobado sin alterar contratos
   de datos ni lógica de negocio. También corrige el doble scroll y evita que
   la topbar tape los encabezados al desplazarse.
   ========================================================================== */

html[data-celda-design="sgi"]{
  --sgi-topbar-h:60px;
  --sgi-sidebar-w:216px;
  --sgi-card-radius:11px;
  --sgi-control-radius:8px;
  --sgi-card-border:#e1e8f1;
  --sgi-card-shadow:0 2px 10px rgba(34,68,104,.045);
  --sgi-card-shadow-hover:0 8px 24px rgba(34,68,104,.075);

  --sgi-icon-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.8 12 3l9 7.8'/%3E%3Cpath d='M5.2 9.2V21h5.1v-6.4h3.4V21h5.1V9.2'/%3E%3C/svg%3E");
  --sgi-icon-cube:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2.8 8 4.5v9.4l-8 4.5-8-4.5V7.3z'/%3E%3Cpath d='m4.4 7.5 7.6 4.4 7.6-4.4M12 12v8.8'/%3E%3C/svg%3E");
  --sgi-icon-calculator:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2.8' width='16' height='18.4' rx='2.2'/%3E%3Cpath d='M7.5 6.5h9M8 11h.01M12 11h.01M16 11h.01M8 15h.01M12 15h.01M16 15h.01M8 18.5h.01M12 18.5h4'/%3E%3C/svg%3E");
  --sgi-icon-users:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-1.7a4.3 4.3 0 0 0-4.3-4.3H6.3A4.3 4.3 0 0 0 2 19.3V21'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-1.7a4.3 4.3 0 0 0-3.2-4.2M16.2 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E");
  --sgi-icon-flask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.8h6M10 2.8v6L4.8 18a2.1 2.1 0 0 0 1.8 3.2h10.8a2.1 2.1 0 0 0 1.8-3.2L14 8.8v-6'/%3E%3Cpath d='M7.8 14h8.4'/%3E%3C/svg%3E");
  --sgi-icon-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 20 6v5.6c0 5.1-3.4 8.3-8 10-4.6-1.7-8-4.9-8-10V6z'/%3E%3Cpath d='m8.5 12 2.2 2.2 4.8-5'/%3E%3C/svg%3E");
  --sgi-icon-database:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5.2' rx='8' ry='3.2'/%3E%3Cpath d='M4 5.2v6.7c0 1.8 3.6 3.2 8 3.2s8-1.4 8-3.2V5.2M4 11.9v6.7c0 1.8 3.6 3.2 8 3.2s8-1.4 8-3.2v-6.7'/%3E%3C/svg%3E");
  --sgi-icon-trend-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 17 6-6 4 4 8-9'/%3E%3Cpath d='M15 6h6v6'/%3E%3C/svg%3E");
  --sgi-icon-trend-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 7 6 6 4-4 8 9'/%3E%3Cpath d='M15 18h6v-6'/%3E%3C/svg%3E");
  --sgi-icon-scale:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M6 21h12M4 7h16M7 7 3.5 14h7zM17 7l-3.5 7h7z'/%3E%3C/svg%3E");
  --sgi-icon-file:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2.8h8l4 4V21H6z'/%3E%3Cpath d='M14 2.8V7h4M9 12h6M9 16h6'/%3E%3C/svg%3E");
  --sgi-icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 2.6 2.6L16.5 9'/%3E%3C/svg%3E");
  --sgi-icon-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='5' width='18.4' height='14' rx='2.2'/%3E%3Cpath d='M2.8 9.5h18.4M7 15h3'/%3E%3C/svg%3E");
  --sgi-icon-list:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E");
  --sgi-icon-gear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1a1.7 1.7 0 0 0 1.9.3 1.7 1.7 0 0 0 1-1.6v-.2h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1z'/%3E%3C/svg%3E");
  --sgi-icon-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.1 2.5 18a2 2 0 0 0 1.7 3h15.6a2 2 0 0 0 1.7-3L13.7 4.1a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}

/* ---------- Corrección de scroll y topbar ---------- */
@media (min-width:761px){
  html[data-celda-design="sgi"],
  html[data-celda-design="sgi"] body{
    height:100%;
    min-height:0;
    overflow:hidden;
  }
  html[data-celda-design="sgi"] body{
    padding:12px;
  }
  html[data-celda-design="sgi"] #erp-root{
    width:100%;
    height:calc(100dvh - 24px)!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden;
  }
  html[data-celda-design="sgi"] #erp-root::after{
    left:var(--sgi-sidebar-w);
    height:var(--sgi-topbar-h);
    z-index:19;
  }
  html[data-celda-design="sgi"] #erp-root .sidebar{
    width:var(--sgi-sidebar-w);
    height:100%;
    min-height:0;
    overflow:hidden;
  }
  html[data-celda-design="sgi"] #erp-root .main{
    height:calc(100% - var(--sgi-topbar-h));
    min-height:0;
    max-height:none;
    margin-top:var(--sgi-topbar-h);
    padding:20px 24px 28px;
    overflow-x:hidden;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:#aab7c7 transparent;
  }
  html[data-celda-design="sgi"] #erp-root .main::-webkit-scrollbar{width:8px;}
  html[data-celda-design="sgi"] #erp-root .main::-webkit-scrollbar-track{background:transparent;}
  html[data-celda-design="sgi"] #erp-root .main::-webkit-scrollbar-thumb{background:#b6c1cf;border:2px solid transparent;border-radius:999px;background-clip:padding-box;}
  html[data-celda-design="sgi"] #erp-root .main::-webkit-scrollbar-thumb:hover{background:#94a4b7;background-clip:padding-box;}

  /* Los controles viven en la franja superior; el contenido empieza físicamente debajo. */
  html[data-celda-design="sgi"] #celda-context-hub{
    top:10px!important;
    right:196px!important;
  }
  html[data-celda-design="sgi"] #celda-system-bar{
    top:9px!important;
    right:16px!important;
  }
}

/* ---------- Sidebar refinado + iconografía ---------- */
html[data-celda-design="sgi"] #erp-root .sidebar{
  padding:18px 14px 16px;
  gap:13px;
}
html[data-celda-design="sgi"] #erp-root .brand{
  padding:1px 9px 13px;
}
html[data-celda-design="sgi"] #erp-root .brand .brand-kicker{font-size:8.5px;margin-bottom:4px;}
html[data-celda-design="sgi"] #erp-root .brand strong{max-width:170px;font-size:16px;line-height:1.16;}
html[data-celda-design="sgi"] #erp-root .brand .brand-subtitle{margin-top:5px;font-size:9px;}
html[data-celda-design="sgi"] #erp-root .nav{gap:2px;min-height:0;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding-right:2px;scrollbar-width:none;}
html[data-celda-design="sgi"] #erp-root .nav::-webkit-scrollbar{display:none;}
html[data-celda-design="sgi"] #erp-root .nav button{
  min-height:34px;
  padding:6px 8px;
  gap:7px;
  border-radius:8px;
  font-size:11.8px;
}
html[data-celda-design="sgi"] #erp-root .nav .nav-label{flex:1;min-width:0;}
html[data-celda-design="sgi"] #erp-root .nav .tag{
  width:auto;height:auto;min-width:17px;flex:0 0 auto;
  padding:0;background:transparent;border-radius:0;
  color:#99a9bc;font-size:7.5px;font-weight:650;
}
html[data-celda-design="sgi"] #erp-root .nav button.active .tag{background:transparent;color:rgba(255,255,255,.72);}
html[data-celda-design="sgi"] #erp-root .nav-icon{
  --nav-icon:var(--sgi-icon-home);
  width:17px;height:17px;flex:0 0 17px;
  display:block;background:#55718f;
  -webkit-mask:var(--nav-icon) center/contain no-repeat;
  mask:var(--nav-icon) center/contain no-repeat;
}
html[data-celda-design="sgi"] #erp-root .nav button[data-nav-key="dashboard"] .nav-icon{--nav-icon:var(--sgi-icon-home);}
html[data-celda-design="sgi"] #erp-root .nav button[data-nav-key="inventario"] .nav-icon{--nav-icon:var(--sgi-icon-cube);}
html[data-celda-design="sgi"] #erp-root .nav button[data-nav-key="contabilidad"] .nav-icon{--nav-icon:var(--sgi-icon-calculator);}
html[data-celda-design="sgi"] #erp-root .nav button[data-nav-key="administracion"] .nav-icon{--nav-icon:var(--sgi-icon-users);}
html[data-celda-design="sgi"] #erp-root .nav button[data-nav-key="laboratorio"] .nav-icon{--nav-icon:var(--sgi-icon-flask);}
html[data-celda-design="sgi"] #erp-root .nav button[data-nav-key="calidad"] .nav-icon{--nav-icon:var(--sgi-icon-shield);}
html[data-celda-design="sgi"] #erp-root .nav button[data-nav-key="base-datos"] .nav-icon{--nav-icon:var(--sgi-icon-database);}
html[data-celda-design="sgi"] #erp-root .nav button.active .nav-icon,
html[data-celda-design="sgi"] #erp-root .nav button.contains-active .nav-icon{background:#fff;}
html[data-celda-design="sgi"] #erp-root .nav .nav-chevron{margin-left:auto;font-size:10px;color:#9aabbc;}
html[data-celda-design="sgi"] #erp-root .nav button.active .nav-chevron{color:#fff;}
html[data-celda-design="sgi"] #erp-root .nav button.nav-sub{
  min-height:27px;
  padding:4px 7px 4px 31px;
  gap:7px;
  font-size:10.5px;
}
html[data-celda-design="sgi"] #erp-root .nav-sub-dot{width:4px;height:4px;border-radius:50%;background:#b6c3d2;flex:0 0 4px;}
html[data-celda-design="sgi"] #erp-root .nav button.nav-sub.active .nav-sub-dot{background:#fff;}
html[data-celda-design="sgi"] #erp-root .sidebar-logo-wrap{
  margin:0 2px;
  padding:8px 11px;
  border-radius:10px;
  box-shadow:0 5px 15px rgba(36,72,113,.05);
}
html[data-celda-design="sgi"] #erp-root .sidebar-logo-wrap img{max-height:38px;}
html[data-celda-design="sgi"] #erp-root .sidebar-foot{padding:0 5px;font-size:8.4px;line-height:1.4;}

/* ---------- Topbar: panel personal como ancla visual ---------- */
@media (min-width:761px){
  html[data-celda-design="sgi"] #celda-context-hub .celda-context-actions{
    min-height:40px;
    border-radius:11px!important;
    padding:2px!important;
  }
  html[data-celda-design="sgi"] #celda-context-hub .cch-button{
    width:34px!important;height:34px!important;min-width:34px!important;
    color:#4c6886!important;
    font-size:15px!important;
  }
  html[data-celda-design="sgi"] #celda-system-toggle{
    min-width:164px!important;
    max-width:210px!important;
    min-height:42px!important;
    padding:4px 8px 4px 5px!important;
    gap:7px!important;
    justify-content:flex-start!important;
    border-radius:12px!important;
  }
  html[data-celda-design="sgi"] #celda-system-toggle .cs-avatar-compact{
    width:31px;height:31px;flex:0 0 31px;display:grid;place-items:center;
    border-radius:50%;background:#5478a4;color:#fff;font:700 10.5px/1 var(--font-body);
  }
  html[data-celda-design="sgi"] #celda-system-toggle .cs-user-compact{
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
    min-width:0;max-width:112px;line-height:1.1;
  }
  html[data-celda-design="sgi"] #celda-system-toggle .cs-user-compact b{
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    color:#294764;font-size:10.5px;font-weight:700;
  }
  html[data-celda-design="sgi"] #celda-system-toggle .cs-user-compact small{
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    margin-top:2px;color:#8a9aab;font-size:8.5px;font-weight:500;
  }
  html[data-celda-design="sgi"] #celda-system-toggle .cs-user-compact ~ .cs-label{
    position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
  }
  html[data-celda-design="sgi"] #celda-system-toggle .cs-user-compact ~ .cs-dot{margin-left:auto;flex:0 0 auto;}
  html[data-celda-design="sgi"] #celda-system-toggle .cs-badge:empty,
  html[data-celda-design="sgi"] #celda-system-toggle .cs-badge{font-size:8px!important;}
}

/* ---------- Componentes globales reutilizables ---------- */
html[data-celda-design="sgi"] #erp-root .card{
  border:1px solid var(--sgi-card-border);
  border-radius:var(--sgi-card-radius);
  background:#fff;
  box-shadow:var(--sgi-card-shadow);
}
html[data-celda-design="sgi"] #erp-root button.btn{
  padding:8px 13px;
  border-radius:var(--sgi-control-radius);
  background:linear-gradient(180deg,#3287f3 0%,#2477e7 100%);
  color:#fff;
  box-shadow:0 3px 9px rgba(40,120,237,.16);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
html[data-celda-design="sgi"] #erp-root button.btn:hover{
  background:linear-gradient(180deg,#2b80ef 0%,#1969d9 100%);
  box-shadow:0 6px 14px rgba(40,120,237,.2);
  transform:translateY(-1px);
}
html[data-celda-design="sgi"] #erp-root button.btn-ghost{
  padding:6px 10px;
  border:1px solid #dfe7f0;
  border-radius:7px;
  background:#fff;
  color:#50667e;
}
html[data-celda-design="sgi"] #erp-root button.btn-ghost:hover{
  border-color:#c9d9ec;background:#f5f9ff;color:#246bc2;
}
html[data-celda-design="sgi"] #erp-root :is(input,select,textarea){
  min-height:36px;
  padding:8px 10px;
  border-color:#dce5ef;
  border-radius:var(--sgi-control-radius);
  background:#fff;
  color:#24384f;
  box-shadow:inset 0 1px 1px rgba(31,61,92,.018);
}
html[data-celda-design="sgi"] #erp-root textarea{min-height:76px;}
html[data-celda-design="sgi"] #erp-root :is(input,select,textarea):hover:not(:disabled){border-color:#c8d7e8;}
html[data-celda-design="sgi"] #erp-root :is(input,select,textarea):focus{
  border-color:#72a7ea;
  outline:3px solid rgba(44,126,234,.11);
  outline-offset:0;
  box-shadow:0 0 0 1px rgba(44,126,234,.05);
}
html[data-celda-design="sgi"] #erp-root label{color:#65788f;font-size:10.5px;font-weight:600;}

html[data-celda-design="sgi"] #erp-root .table-scroll{
  border:1px solid #e7edf4;
  border-radius:9px;
  background:#fff;
}
html[data-celda-design="sgi"] #erp-root table{font-size:11.5px;}
html[data-celda-design="sgi"] #erp-root th{
  padding:8px 9px;
  background:#f8fafc;
  border-bottom-color:#e5ebf2;
  color:#61748b;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.025em;
  text-transform:none;
}
html[data-celda-design="sgi"] #erp-root td{
  padding:8px 9px;
  border-bottom-color:#edf1f5;
}
html[data-celda-design="sgi"] #erp-root tbody tr:hover td{background:#f8fbff;}

html[data-celda-design="sgi"] #erp-root .stamp{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 8px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:9px;
  font-weight:650;
  letter-spacing:0;
}
html[data-celda-design="sgi"] #erp-root .stamp::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.9;}
html[data-celda-design="sgi"] #erp-root .stamp.green{color:#12835f;background:#eaf8f2;border-color:#d1efe3;}
html[data-celda-design="sgi"] #erp-root .stamp.red{color:#d84f5e;background:#fff0f2;border-color:#ffd8de;}
html[data-celda-design="sgi"] #erp-root .stamp.copper{color:#c98211;background:#fff7e6;border-color:#f7e4b8;}
html[data-celda-design="sgi"] #erp-root .empty{
  padding:25px 12px;
  border-radius:9px;
  color:#8494a6;
  font-size:11.5px;
}
html[data-celda-design="sgi"] #erp-root .bar-row{margin-bottom:6px;}
html[data-celda-design="sgi"] #erp-root .bar-track{height:6px;background:#eef3f8;}

/* ---------- Dashboard: fidelidad visual al mockup ---------- */
html[data-celda-design="sgi"] #erp-root .celda-dashboard{padding-bottom:4px;}
html[data-celda-design="sgi"] #erp-root .celda-dashboard-hero{
  align-items:flex-start;
  margin-bottom:14px;
  gap:18px;
}
html[data-celda-design="sgi"] #erp-root .celda-dashboard-heading .view-title{
  font-size:27px;
  line-height:1.04;
  margin-bottom:3px;
}
html[data-celda-design="sgi"] #erp-root .celda-dashboard-heading .view-sub{font-size:11.5px;line-height:1.35;}
html[data-celda-design="sgi"] #erp-root .celda-eyebrow{font-size:8.7px;letter-spacing:.13em;margin-bottom:4px;color:#2878ed;}
html[data-celda-design="sgi"] #erp-root .celda-period-picker{grid-template-columns:auto minmax(230px,320px) auto;gap:7px;align-self:6px;}
html[data-celda-design="sgi"] #erp-root .celda-period-picker label{font-size:10px;}
html[data-celda-design="sgi"] #erp-root .celda-period-picker select{min-width:230px;height:36px;}

html[data-celda-design="sgi"] #erp-root .celda-kpi-grid{gap:12px;}
html[data-celda-design="sgi"] #erp-root .celda-kpi-card{
  --kpi-accent:#2878ed;
  --kpi-soft:#f4f9ff;
  --kpi-icon:var(--sgi-icon-database);
  min-height:104px;
  padding:14px 50px 13px 62px;
  border-color:#dce7f3;
  background:var(--kpi-soft);
  box-shadow:0 2px 10px rgba(34,68,104,.04);
}
html[data-celda-design="sgi"] #erp-root .celda-kpi-card::before{display:none;}
html[data-celda-design="sgi"] #erp-root .celda-kpi-card:nth-child(1){--kpi-accent:#2f7fdc;--kpi-soft:#f5faff;--kpi-icon:var(--sgi-icon-database);}
html[data-celda-design="sgi"] #erp-root .celda-kpi-card:nth-child(2){--kpi-accent:#159b70;--kpi-soft:#f0faf6;--kpi-icon:var(--sgi-icon-trend-up);border-color:#d9eee5;}
html[data-celda-design="sgi"] #erp-root .celda-kpi-card:nth-child(3){--kpi-accent:#df5965;--kpi-soft:#fff3f5;--kpi-icon:var(--sgi-icon-trend-down);border-color:#f4dce0;}
html[data-celda-design="sgi"] #erp-root .celda-kpi-card:nth-child(4){--kpi-accent:#158b68;--kpi-soft:#f1faf6;--kpi-icon:var(--sgi-icon-scale);border-color:#d9eee6;}
html[data-celda-design="sgi"] #erp-root .celda-kpi-card .stat-label{margin:0 0 5px;color:#6e8095;font-size:9.2px;line-height:1.25;}
html[data-celda-design="sgi"] #erp-root .celda-kpi-card .stat-label::before{
  content:"";position:absolute;left:15px;top:16px;width:31px;height:31px;border-radius:8px;
  background:var(--kpi-accent);opacity:.95;
  -webkit-mask:var(--kpi-icon) center/18px 18px no-repeat;
  mask:var(--kpi-icon) center/18px 18px no-repeat;
  box-shadow:0 0 0 7px color-mix(in srgb,var(--kpi-accent) 10%,transparent);
}
/* El halo real del icono se dibuja con un segundo nivel en el contenedor. */
html[data-celda-design="sgi"] #erp-root .celda-kpi-card .stat-value{font-size:22px;line-height:1.08;color:#1b365a;}
html[data-celda-design="sgi"] #erp-root .celda-kpi-card:nth-child(2) .stat-value{color:#078a63;}
html[data-celda-design="sgi"] #erp-root .celda-kpi-card:nth-child(3) .stat-value{color:#d94d5b;}
html[data-celda-design="sgi"] #erp-root .celda-kpi-card:nth-child(4) .stat-value{color:#087b5c;}
html[data-celda-design="sgi"] #erp-root .celda-kpi-card small{margin-top:6px;color:#75869a;font-size:9.2px;line-height:1.35;}
html[data-celda-design="sgi"] #erp-root .celda-kpi-card::after{
  content:"";position:absolute;right:13px;bottom:15px;width:38px;height:28px;opacity:.22;
  background:
    linear-gradient(var(--kpi-accent),var(--kpi-accent)) 0 100%/6px 9px no-repeat,
    linear-gradient(var(--kpi-accent),var(--kpi-accent)) 10px 100%/6px 15px no-repeat,
    linear-gradient(var(--kpi-accent),var(--kpi-accent)) 20px 100%/6px 22px no-repeat,
    linear-gradient(var(--kpi-accent),var(--kpi-accent)) 30px 100%/6px 27px no-repeat;
  border-radius:2px;
}

html[data-celda-design="sgi"] #erp-root .celda-dashboard-section{margin-top:15px;}
html[data-celda-design="sgi"] #erp-root .celda-dashboard-section-head{margin-bottom:9px;}
html[data-celda-design="sgi"] #erp-root .celda-dashboard-section-head h2{font-size:16px;}
html[data-celda-design="sgi"] #erp-root .celda-dashboard-section-head p{font-size:9.8px;margin-top:2px;}
html[data-celda-design="sgi"] #erp-root .celda-ops-grid{gap:10px;}
html[data-celda-design="sgi"] #erp-root .celda-ops-card{
  --ops-accent:#4a79a8;
  --ops-icon:var(--sgi-icon-file);
  position:relative;
  min-height:78px;
  padding:12px 13px 11px 55px;
  justify-content:center;
  box-shadow:0 1px 7px rgba(35,68,103,.035);
}
html[data-celda-design="sgi"] #erp-root .celda-ops-card::before{
  content:"";position:absolute;left:13px;top:14px;width:30px;height:30px;border-radius:8px;
  background:color-mix(in srgb,var(--ops-accent) 10%,white);
  border:1px solid color-mix(in srgb,var(--ops-accent) 16%,white);
}
html[data-celda-design="sgi"] #erp-root .celda-ops-card::after{
  content:"";position:absolute;left:20px;top:21px;width:16px;height:16px;background:var(--ops-accent);
  -webkit-mask:var(--ops-icon) center/contain no-repeat;mask:var(--ops-icon) center/contain no-repeat;
}
html[data-celda-design="sgi"] #erp-root .celda-ops-card:nth-child(1){--ops-icon:var(--sgi-icon-file);--ops-accent:#3473ad;}
html[data-celda-design="sgi"] #erp-root .celda-ops-card:nth-child(2){--ops-icon:var(--sgi-icon-check);--ops-accent:#3d779e;}
html[data-celda-design="sgi"] #erp-root .celda-ops-card:nth-child(3){--ops-icon:var(--sgi-icon-card);--ops-accent:#4e779a;}
html[data-celda-design="sgi"] #erp-root .celda-ops-card:nth-child(4){--ops-icon:var(--sgi-icon-list);--ops-accent:#4f7698;}
html[data-celda-design="sgi"] #erp-root .celda-ops-card:nth-child(5){--ops-icon:var(--sgi-icon-gear);--ops-accent:#477697;}
html[data-celda-design="sgi"] #erp-root .celda-ops-card:nth-child(6){--ops-icon:var(--sgi-icon-alert);--ops-accent:#5f7892;}
html[data-celda-design="sgi"] #erp-root .celda-ops-card>span{font-size:9.4px;color:#64778e;}
html[data-celda-design="sgi"] #erp-root .celda-ops-card>b{margin:3px 0 2px;font-size:18px;color:#1d395e;}
html[data-celda-design="sgi"] #erp-root .celda-ops-card>small{font-size:8.8px;line-height:1.3;color:#7b8b9d;}

html[data-celda-design="sgi"] #erp-root .celda-dashboard-section-grid{margin-top:11px;gap:11px;}
html[data-celda-design="sgi"] #erp-root .celda-dashboard>.celda-demand-card{margin-top:11px;}
html[data-celda-design="sgi"] #erp-root .celda-dashboard-card{padding:13px 15px;}
html[data-celda-design="sgi"] #erp-root .celda-dashboard-card .section-head{margin:0 0 9px;gap:10px;}
html[data-celda-design="sgi"] #erp-root .celda-dashboard-card .section-head h2{font-size:14.5px;line-height:1.2;}
html[data-celda-design="sgi"] #erp-root .celda-dashboard-card .section-head p{margin-top:3px;font-size:9.2px;line-height:1.35;}
html[data-celda-design="sgi"] #erp-root .celda-metric-quadrants{gap:13px 22px;}
html[data-celda-design="sgi"] #erp-root .celda-metric-quadrants h3,
html[data-celda-design="sgi"] #erp-root .celda-metric-split h3{margin-bottom:7px;font-size:10.5px;}
html[data-celda-design="sgi"] #erp-root .celda-flex-label{font-size:10.3px;}
html[data-celda-design="sgi"] #erp-root .celda-row-meta{font-size:8.8px;}
html[data-celda-design="sgi"] #erp-root .celda-metric-number{font-size:10.3px;}
html[data-celda-design="sgi"] #erp-root .celda-total-strip{margin-top:11px;}
html[data-celda-design="sgi"] #erp-root .celda-total-strip>div{padding:9px 10px;}
html[data-celda-design="sgi"] #erp-root .celda-total-strip span{font-size:9px;}
html[data-celda-design="sgi"] #erp-root .celda-total-strip b{font-size:14.5px;}
html[data-celda-design="sgi"] #erp-root .celda-rate-orb{width:70px;height:70px;background:#fff9e8;border-color:#e5a826;color:#9d6a0d;}
html[data-celda-design="sgi"] #erp-root .celda-rate-orb b{font-size:18px;}
html[data-celda-design="sgi"] #erp-root .celda-rate-orb span{font-size:6.8px;}
html[data-celda-design="sgi"] #erp-root .celda-empty-compact{padding:14px 8px;}

/* ---------- Notificaciones y overlays con la misma gramática visual ---------- */
html[data-celda-design="sgi"] #celda-notification-stack .celda-note{
  border-radius:11px!important;
  border-color:#dce7f1!important;
  box-shadow:0 14px 34px rgba(34,66,99,.14)!important;
}
html[data-celda-design="sgi"] .modal-overlay{
  background:rgba(29,48,72,.38);
  backdrop-filter:blur(3px);
}
html[data-celda-design="sgi"] #celda-system-panel,
html[data-celda-design="sgi"] .celda-context-panel{
  border-color:#dce6f0!important;
  box-shadow:0 20px 54px rgba(31,58,90,.17)!important;
}

/* El rediseño sigue siendo único aunque los selectores de apariencia heredados
   continúen activos durante la transición. Esta capa gana visualmente sin borrar
   todavía ninguna dependencia antigua. */
html[data-celda-design="sgi"] #erp-root :is(.card,button,input,select,textarea){
  font-family:var(--font-body);
}

@media (max-width:1180px) and (min-width:761px){
  html[data-celda-design="sgi"]{--sgi-sidebar-w:204px;}
  html[data-celda-design="sgi"] #erp-root .main{padding-left:18px;padding-right:18px;}
  html[data-celda-design="sgi"] #erp-root .celda-kpi-card{padding-right:42px;padding-left:56px;}
  html[data-celda-design="sgi"] #erp-root .celda-kpi-card .stat-value{font-size:19px;}
  html[data-celda-design="sgi"] #erp-root .celda-kpi-card .stat-label::before{left:13px;}
}

/* ========================================================================== 
   BLOQUE 3 · Aplicación visual a módulos + analítica ejecutiva
   - La franja superior deja de comportarse como un banner permanente.
   - El chrome contextual se oculta al desplazarse y reaparece al volver arriba.
   - Corrige iconos de grupos con hijos activos.
   - Añade gráficas del Resumen derivadas de datos ya presentes en el frontend.
   ========================================================================== */

@media (min-width:761px){
  /* Ya no hay una banda blanca estática que tape títulos al desplazarse. */
  html[data-celda-design="sgi"] #erp-root::after{display:none!important;content:none!important;}
  html[data-celda-design="sgi"] #erp-root .main{
    height:100%;
    margin-top:0;
    padding:68px 24px 30px;
    scroll-padding-top:14px;
  }

  /* Acciones superiores: sin caja grupal. Cada icono queda limpio y solo gana
     una superficie suave al hover/focus. */
  html[data-celda-design="sgi"] #celda-context-hub{
    top:18px!important;
    right:216px!important;
    transition:opacity .18s ease,transform .18s ease,visibility .18s ease!important;
  }
  html[data-celda-design="sgi"] #celda-context-hub .celda-context-actions{
    min-height:38px!important;
    padding:0!important;
    gap:3px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }
  html[data-celda-design="sgi"] #celda-context-hub .cch-button{
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    border:1px solid transparent!important;
    border-radius:9px!important;
    background:transparent!important;
    color:#55708d!important;
    box-shadow:none!important;
  }
  html[data-celda-design="sgi"] #celda-context-hub .cch-button:hover,
  html[data-celda-design="sgi"] #celda-context-hub .cch-button:focus-visible,
  html[data-celda-design="sgi"] #celda-context-hub .cch-button[aria-expanded="true"]{
    border-color:#dce7f3!important;
    background:#fff!important;
    color:#1f70d1!important;
    box-shadow:0 5px 14px rgba(40,84,132,.08)!important;
  }

  /* El perfil queda como una única cápsula independiente, no como parte de una
     caja compartida con los iconos. */
  html[data-celda-design="sgi"] #celda-system-bar{
    top:14px!important;
    right:18px!important;
    transition:opacity .18s ease,transform .18s ease,visibility .18s ease!important;
  }
  html[data-celda-design="sgi"] #celda-system-toggle{
    border-color:#dfe7f0!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 4px 14px rgba(37,72,111,.055)!important;
  }

  /* Al bajar, desaparece el chrome superior. Así nunca flota por encima de
     encabezados, tablas o formularios. */
  html[data-celda-design="sgi"] #erp-root.sgi-main-scrolled ~ #celda-context-hub,
  html[data-celda-design="sgi"] #erp-root.sgi-main-scrolled ~ #celda-system-bar,
  html[data-celda-design="sgi"] body:has(#erp-root.sgi-main-scrolled) #celda-context-hub,
  html[data-celda-design="sgi"] body:has(#erp-root.sgi-main-scrolled) #celda-system-bar{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-9px)!important;
  }
}

/* Fallback para navegadores sin :has(): app.js añade la clase también al root;
   el bloque superior ya no existe, por lo que aun sin ocultación no tapa una
   franja completa de contenido. */

/* ---------- Sidebar: grupos e hijos ---------- */
html[data-celda-design="sgi"] #erp-root .nav button.nav-group.contains-active .nav-icon,
html[data-celda-design="sgi"] #erp-root .nav button.nav-group.expanded .nav-icon{
  background:#5d7898!important;
}
html[data-celda-design="sgi"] #erp-root .nav button.nav-group.contains-active:hover .nav-icon,
html[data-celda-design="sgi"] #erp-root .nav button.nav-group.expanded:hover .nav-icon{
  background:#2878ed!important;
}
html[data-celda-design="sgi"] #erp-root .nav button.nav-group.contains-active{
  color:#31577f!important;
}
html[data-celda-design="sgi"] #erp-root .nav button.nav-sub.active{
  color:#fff!important;
  background:linear-gradient(135deg,#3b8af4 0%,#2878ed 100%)!important;
  border-color:#2878ed!important;
  box-shadow:0 6px 14px rgba(40,120,237,.14)!important;
}
html[data-celda-design="sgi"] #erp-root .nav button.nav-sub.active .nav-sub-dot{background:#fff!important;}

/* ---------- Aplicación amplia del lenguaje visual a módulos ---------- */
html[data-celda-design="sgi"] #erp-root .section-head{
  gap:12px;
  margin-bottom:10px;
}
html[data-celda-design="sgi"] #erp-root .section-head h2{
  font-size:15px;
  line-height:1.2;
}
html[data-celda-design="sgi"] #erp-root .section-head p,
html[data-celda-design="sgi"] #erp-root .celda-help-text{
  color:#7a8b9e;
  font-size:10.5px;
  line-height:1.4;
}
html[data-celda-design="sgi"] #erp-root .form-row{gap:11px 12px;}
html[data-celda-design="sgi"] #erp-root .celda-module-toolbar,
html[data-celda-design="sgi"] #erp-root .user-directory-toolbar{
  padding:12px 14px;
  border:1px solid #e2eaf3;
  border-radius:11px;
  background:#fbfdff;
  box-shadow:none;
}
html[data-celda-design="sgi"] #erp-root .celda-inline-actions{gap:7px;}
html[data-celda-design="sgi"] #erp-root .cart-item,
html[data-celda-design="sgi"] #erp-root .celda-position-node,
html[data-celda-design="sgi"] #erp-root .celda-history-list article{
  border-color:#e7edf4;
  border-radius:9px;
  background:#fff;
  box-shadow:0 1px 5px rgba(35,68,103,.025);
}
html[data-celda-design="sgi"] #erp-root .modal-overlay{
  background:rgba(29,48,72,.34)!important;
  backdrop-filter:blur(4px)!important;
}
html[data-celda-design="sgi"] #erp-root .modal-toolbar{
  border-color:#e2e9f1;
  background:#fbfdff;
}
html[data-celda-design="sgi"] #erp-root button:not(.btn):not(.btn-ghost):not(.nav-group):not(.nav-sub):not([class*="cch-"]){
  border-radius:8px;
}

/* ---------- Resumen · panel de gráficas ---------- */
html[data-celda-design="sgi"] #erp-root .sgi-dashboard-analytics{margin-top:14px;}
html[data-celda-design="sgi"] #erp-root .sgi-analytics-heading{margin-bottom:9px;}
html[data-celda-design="sgi"] #erp-root .sgi-analytics-heading h2{font-size:16px;}
html[data-celda-design="sgi"] #erp-root .sgi-analytics-heading p{margin-top:2px;font-size:9.8px;}
html[data-celda-design="sgi"] #erp-root .sgi-chart-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
}
html[data-celda-design="sgi"] #erp-root .sgi-chart-card{
  min-height:230px;
  padding:14px 15px 13px;
  overflow:hidden;
}
html[data-celda-design="sgi"] #erp-root .sgi-chart-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
html[data-celda-design="sgi"] #erp-root .sgi-chart-head>div:first-child>span{
  display:block;
  margin-bottom:3px;
  color:#7a8da3;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
}
html[data-celda-design="sgi"] #erp-root .sgi-chart-head h3{
  margin:0;
  color:#203f66;
  font-size:13.5px;
  font-weight:700;
}
html[data-celda-design="sgi"] #erp-root .sgi-chart-total{
  min-width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#eff6ff;
  color:#2878ed;
  font-size:13px;
}
html[data-celda-design="sgi"] #erp-root .sgi-chart-legend{
  display:flex;
  align-items:center;
  gap:6px;
  color:#7b8c9f;
  font-size:8.5px;
}
html[data-celda-design="sgi"] #erp-root .sgi-chart-legend i{width:7px;height:7px;border-radius:2px;}
html[data-celda-design="sgi"] #erp-root .sgi-chart-legend i.income{background:#22a77b;}
html[data-celda-design="sgi"] #erp-root .sgi-chart-legend i.expense{background:#e45b67;}

html[data-celda-design="sgi"] #erp-root .sgi-column-chart{
  height:155px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  align-items:end;
  gap:10px;
  padding:13px 8px 0;
  border-left:1px solid #edf1f5;
  border-bottom:1px solid #dfe7ef;
  background:repeating-linear-gradient(to top,transparent 0 37px,#f1f4f8 38px 39px);
}
html[data-celda-design="sgi"] #erp-root .sgi-chart-month{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
}
html[data-celda-design="sgi"] #erp-root .sgi-chart-bars{
  width:100%;
  height:124px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:4px;
}
html[data-celda-design="sgi"] #erp-root .sgi-chart-bars span{
  width:min(16px,35%);
  min-height:2px;
  border-radius:4px 4px 1px 1px;
  transition:height .2s ease;
}
html[data-celda-design="sgi"] #erp-root .sgi-chart-bars .income{background:linear-gradient(180deg,#35bb91,#1a9b72);}
html[data-celda-design="sgi"] #erp-root .sgi-chart-bars .expense{background:linear-gradient(180deg,#f1848d,#dd5964);}
html[data-celda-design="sgi"] #erp-root .sgi-chart-month small{color:#8191a3;font-size:8.5px;text-transform:capitalize;}

html[data-celda-design="sgi"] #erp-root .sgi-donut-layout{
  min-height:157px;
  display:grid;
  grid-template-columns:145px minmax(0,1fr);
  align-items:center;
  gap:18px;
}
html[data-celda-design="sgi"] #erp-root .sgi-donut{
  width:132px;height:132px;
  display:grid;place-items:center;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(42,72,106,.03);
}
html[data-celda-design="sgi"] #erp-root .sgi-donut>div{
  width:84px;height:84px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 10px rgba(33,66,99,.06);
}
html[data-celda-design="sgi"] #erp-root .sgi-donut b{color:#213f64;font-size:23px;line-height:1;}
html[data-celda-design="sgi"] #erp-root .sgi-donut span{margin-top:4px;color:#8493a5;font-size:8.5px;}
html[data-celda-design="sgi"] #erp-root .sgi-donut-legend{display:grid;gap:8px;}
html[data-celda-design="sgi"] #erp-root .sgi-donut-legend>div{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:7px;font-size:9.5px;}
html[data-celda-design="sgi"] #erp-root .sgi-donut-legend i{width:7px;height:7px;border-radius:50%;}
html[data-celda-design="sgi"] #erp-root .sgi-donut-legend span{color:#6f8298;}
html[data-celda-design="sgi"] #erp-root .sgi-donut-legend b{color:#254260;font-size:10px;}

html[data-celda-design="sgi"] #erp-root .sgi-horizontal-chart,
html[data-celda-design="sgi"] #erp-root .sgi-service-chart{display:grid;gap:10px;}
html[data-celda-design="sgi"] #erp-root .sgi-horizontal-row>div:first-child,
html[data-celda-design="sgi"] #erp-root .sgi-service-row>div:first-child{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px;
}
html[data-celda-design="sgi"] #erp-root .sgi-horizontal-row span,
html[data-celda-design="sgi"] #erp-root .sgi-service-row span{color:#647a92;font-size:9.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html[data-celda-design="sgi"] #erp-root .sgi-horizontal-row b,
html[data-celda-design="sgi"] #erp-root .sgi-service-row b{color:#274563;font-size:9.5px;white-space:nowrap;}
html[data-celda-design="sgi"] #erp-root .sgi-horizontal-track,
html[data-celda-design="sgi"] #erp-root .sgi-service-track{height:7px;border-radius:999px;background:#edf2f7;overflow:hidden;}
html[data-celda-design="sgi"] #erp-root .sgi-horizontal-track i,
html[data-celda-design="sgi"] #erp-root .sgi-service-track i{display:block;height:100%;border-radius:inherit;background:#438ae9;}
html[data-celda-design="sgi"] #erp-root :is(.sgi-horizontal-row,.sgi-service-row).tone-1 i{background:#25a87d;}
html[data-celda-design="sgi"] #erp-root :is(.sgi-horizontal-row,.sgi-service-row).tone-2 i{background:#e6aa33;}
html[data-celda-design="sgi"] #erp-root :is(.sgi-horizontal-row,.sgi-service-row).tone-3 i{background:#df616c;}
html[data-celda-design="sgi"] #erp-root :is(.sgi-horizontal-row,.sgi-service-row).tone-4 i{background:#8a78db;}

@media (max-width:1180px) and (min-width:761px){
  html[data-celda-design="sgi"] #erp-root .sgi-chart-grid{grid-template-columns:1fr 1fr;}
  html[data-celda-design="sgi"] #erp-root .sgi-donut-layout{grid-template-columns:120px 1fr;gap:12px;}
  html[data-celda-design="sgi"] #erp-root .sgi-donut{width:112px;height:112px;}
  html[data-celda-design="sgi"] #erp-root .sgi-donut>div{width:72px;height:72px;}
}


/* ========================================================================== 
   UI BLOQUE 4 · Resumen visual, indicadores y modo expandido permanente
   ========================================================================== */

/* El área de trabajo de escritorio queda definitivamente expandida. */
@media (min-width:761px){
  html[data-celda-design="sgi"] #erp-root{
    width:calc(100vw - 24px);
    max-width:none;
  }
  html[data-celda-design="sgi"] #celda-workspace-toggle{display:none!important;}
}

/* KPI principales: el número permanece legible, pero la lectura se apoya en
   icono + micrográfico real de los últimos meses. */
html[data-celda-design="sgi"] #erp-root .sgi-kpi-visual-grid{gap:10px;}
html[data-celda-design="sgi"] #erp-root .sgi-kpi-visual{
  position:relative;
  min-height:112px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 60px;
  align-items:center;
  gap:10px;
  overflow:hidden;
  padding:13px 14px;
}
html[data-celda-design="sgi"] #erp-root .sgi-kpi-icon{
  width:31px;height:31px;display:grid;place-items:center;
  border-radius:9px;background:#edf5ff;color:#2878ed;
  font-size:17px;font-weight:750;
}
html[data-celda-design="sgi"] #erp-root .celda-kpi-card.success .sgi-kpi-icon{background:#e8f8f2;color:#159b70;}
html[data-celda-design="sgi"] #erp-root .celda-kpi-card.danger .sgi-kpi-icon{background:#fff0f2;color:#dc5964;}
html[data-celda-design="sgi"] #erp-root .sgi-kpi-copy{min-width:0;}
html[data-celda-design="sgi"] #erp-root .sgi-kpi-copy .stat-label{margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html[data-celda-design="sgi"] #erp-root .sgi-kpi-copy .stat-value{font-size:22px;line-height:1.05;}
html[data-celda-design="sgi"] #erp-root .sgi-kpi-copy small{display:block;margin-top:7px;color:#8291a4;font-size:8.6px;}
html[data-celda-design="sgi"] #erp-root .sgi-kpi-spark{
  height:52px;display:flex;align-items:flex-end;justify-content:flex-end;gap:4px;
  padding:5px 0 2px;
}
html[data-celda-design="sgi"] #erp-root .sgi-kpi-spark i{
  width:6px;min-height:2px;border-radius:3px 3px 1px 1px;
  background:#78aef1;opacity:.72;
}
html[data-celda-design="sgi"] #erp-root .sgi-kpi-spark.tone-green i{background:#67c9aa;}
html[data-celda-design="sgi"] #erp-root .sgi-kpi-spark.tone-red i{background:#f09ba2;}
html[data-celda-design="sgi"] #erp-root .sgi-kpi-spark.tone-blue i{background:#77acf0;}

/* Panorama operativo: sustituye seis contadores textuales por tres lecturas
   gráficas compactas, conservando exactamente las mismas fuentes de datos. */
html[data-celda-design="sgi"] #erp-root .sgi-operational-section{margin-top:12px;}
html[data-celda-design="sgi"] #erp-root .sgi-operational-grid{
  display:grid;grid-template-columns:1.2fr 1fr .9fr;gap:10px;
}
html[data-celda-design="sgi"] #erp-root .sgi-ops-chart-card{
  min-height:168px;padding:13px 14px;
}
html[data-celda-design="sgi"] #erp-root .sgi-ops-bars{display:grid;gap:10px;}
html[data-celda-design="sgi"] #erp-root .sgi-ops-bar>div:first-child{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;
}
html[data-celda-design="sgi"] #erp-root .sgi-ops-bar span{color:#6e8299;font-size:9.2px;}
html[data-celda-design="sgi"] #erp-root .sgi-ops-bar b{color:#274563;font-size:9.6px;white-space:nowrap;}
html[data-celda-design="sgi"] #erp-root .sgi-ops-track{height:7px;border-radius:999px;background:#edf2f7;overflow:hidden;}
html[data-celda-design="sgi"] #erp-root .sgi-ops-track i{display:block;height:100%;border-radius:inherit;background:#3c88eb;}
html[data-celda-design="sgi"] #erp-root .sgi-ops-bar.tone-green i{background:#25a87d;}
html[data-celda-design="sgi"] #erp-root .sgi-ops-bar.tone-red i{background:#e35d68;}
html[data-celda-design="sgi"] #erp-root .sgi-ops-bar.tone-amber i{background:#e5a832;}
html[data-celda-design="sgi"] #erp-root .sgi-ops-bar.tone-blue i{background:#3c88eb;}
html[data-celda-design="sgi"] #erp-root .sgi-ring-layout{
  display:grid;grid-template-columns:102px minmax(0,1fr);align-items:center;gap:13px;min-height:108px;
}
html[data-celda-design="sgi"] #erp-root .sgi-ring{
  --sgi-ring-value:0;
  width:96px;height:96px;display:grid;place-items:center;border-radius:50%;
  background:conic-gradient(#e45d68 calc(var(--sgi-ring-value) * 1%),#edf2f7 0);
}
html[data-celda-design="sgi"] #erp-root .sgi-ring>div{
  width:70px;height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(35,68,103,.06);
}
html[data-celda-design="sgi"] #erp-root .sgi-ring b{font-size:18px;color:#243f60;line-height:1;}
html[data-celda-design="sgi"] #erp-root .sgi-ring span{margin-top:4px;color:#8795a6;font-size:8px;}
html[data-celda-design="sgi"] #erp-root .sgi-ring-stats{display:grid;gap:8px;}
html[data-celda-design="sgi"] #erp-root .sgi-ring-stats>div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:6px;border-bottom:1px solid #eef2f6;}
html[data-celda-design="sgi"] #erp-root .sgi-ring-stats>div:last-child{border-bottom:0;padding-bottom:0;}
html[data-celda-design="sgi"] #erp-root .sgi-ring-stats span{color:#7e8fa3;font-size:8.7px;}
html[data-celda-design="sgi"] #erp-root .sgi-ring-stats b{color:#294664;font-size:9.5px;}

/* Gráficas ejecutivas: algo más protagonistas y con menos texto alrededor. */
html[data-celda-design="sgi"] #erp-root .sgi-dashboard-analytics{margin-top:12px;}
html[data-celda-design="sgi"] #erp-root .sgi-chart-card{min-height:218px;}
html[data-celda-design="sgi"] #erp-root .sgi-analytics-heading{margin-bottom:7px;}

/* Responsive del nuevo Resumen. */
@media (max-width:1280px) and (min-width:761px){
  html[data-celda-design="sgi"] #erp-root .sgi-kpi-visual{grid-template-columns:31px minmax(0,1fr) 48px;padding:11px 12px;}
  html[data-celda-design="sgi"] #erp-root .sgi-kpi-copy .stat-value{font-size:19px;}
  html[data-celda-design="sgi"] #erp-root .sgi-operational-grid{grid-template-columns:1fr 1fr;}
  html[data-celda-design="sgi"] #erp-root .sgi-receivable-visual{grid-column:1/-1;}
}
@media (max-width:980px) and (min-width:761px){
  html[data-celda-design="sgi"] #erp-root .sgi-kpi-visual-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  html[data-celda-design="sgi"] #erp-root .sgi-chart-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  html[data-celda-design="sgi"] #erp-root .sgi-kpi-visual-grid{grid-template-columns:1fr;}
  html[data-celda-design="sgi"] #erp-root .sgi-kpi-visual{grid-template-columns:34px minmax(0,1fr) 68px;min-height:104px;}
  html[data-celda-design="sgi"] #erp-root .sgi-operational-grid{grid-template-columns:1fr;}
  html[data-celda-design="sgi"] #erp-root .sgi-chart-grid{grid-template-columns:1fr;}
  html[data-celda-design="sgi"] #erp-root .sgi-ring-layout{grid-template-columns:94px 1fr;}
}
html[data-celda-design="sgi"] #erp-root .sgi-kpi-visual .stat-label::before,
html[data-celda-design="sgi"] #erp-root .sgi-kpi-visual::after{display:none!important;content:none!important;}
html[data-celda-design="sgi"] #erp-root .sgi-kpi-icon{
  background:color-mix(in srgb,var(--kpi-accent) 10%,#fff)!important;
  position:relative;
}
html[data-celda-design="sgi"] #erp-root .sgi-kpi-icon::before{
  content:"";width:18px;height:18px;background:var(--kpi-accent);
  -webkit-mask:var(--kpi-icon) center/18px 18px no-repeat;
  mask:var(--kpi-icon) center/18px 18px no-repeat;
}

/* ========================================================================== 
   UI BLOQUE 4.1 · Pulido visual de Resumen y coherencia minimalista
   ========================================================================== */
html[data-celda-design="sgi"] #erp-root .sgi-inline-rate{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  min-width:118px;
  padding:10px 12px;
  border:1px solid #d9ece4;
  border-radius:14px;
  background:linear-gradient(180deg,#f8fdfa,#f1faf5);
  box-shadow:0 1px 6px rgba(28,80,58,.04);
}
html[data-celda-design="sgi"] #erp-root .sgi-inline-rate b{
  color:#16966d;
  font-size:20px;
  line-height:1;
}
html[data-celda-design="sgi"] #erp-root .sgi-inline-rate span{
  margin-top:4px;
  color:#46667a;
  font-size:9px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
html[data-celda-design="sgi"] #erp-root .sgi-inline-rate small{
  margin-top:3px;
  color:#7f91a4;
  font-size:8.5px;
}
html[data-celda-design="sgi"] #erp-root .sgi-demand-grid{
  gap:16px 22px;
}
html[data-celda-design="sgi"] #erp-root .sgi-demand-grid > div{
  min-width:0;
}
html[data-celda-design="sgi"] #erp-root .sgi-demand-grid h3{
  margin-bottom:10px;
}
html[data-celda-design="sgi"] #erp-root .sgi-demand-grid .sgi-service-row{
  margin-bottom:9px;
}
html[data-celda-design="sgi"] #erp-root .sgi-demand-grid .sgi-service-row:last-child{
  margin-bottom:0;
}
html[data-celda-design="sgi"] #erp-root .sgi-demand-grid .sgi-service-track{
  height:8px;
}
html[data-celda-design="sgi"] #erp-root .sgi-demand-grid .sgi-service-row span,
html[data-celda-design="sgi"] #erp-root .sgi-demand-grid .sgi-service-row b{
  font-size:9.4px;
}
html[data-celda-design="sgi"] #erp-root .celda-dashboard-card .empty{
  color:#8292a3;
}
html[data-celda-design="sgi"] #erp-root .celda-dashboard-card details summary,
html[data-celda-design="sgi"] #erp-root .celda-dashboard-card .link,
html[data-celda-design="sgi"] #erp-root .celda-dashboard-card button.btn-ghost{
  font-weight:600;
}
html[data-celda-design="sgi"] #erp-root button.btn-ghost{
  border-radius:10px;
  background:#f7faff;
}
html[data-celda-design="sgi"] #erp-root button.btn-ghost:hover{
  background:#eef5ff;
}
html[data-celda-design="sgi"] #erp-root .celda-total-strip{
  margin-top:14px;
}
html[data-celda-design="sgi"] #erp-root .celda-total-strip>div{
  border-radius:12px;
  background:#fbfdff;
}
@media (max-width:980px){
  html[data-celda-design="sgi"] #erp-root .sgi-inline-rate{
    align-items:flex-start;
  }
}

/* ========================================================================== 
   UI BLOQUE 4.2 · Diversidad de gráficas y pulido de controles
   ========================================================================== */
/* Evita repetir el mismo patrón de barras horizontales en todos los indicadores. */
html[data-celda-design="sgi"] #erp-root .sgi-segmented-meter{display:grid;gap:14px;padding-top:6px;}
html[data-celda-design="sgi"] #erp-root .sgi-segmented-track{
  height:16px;display:flex;overflow:hidden;border-radius:999px;background:#edf2f7;border:1px solid #e7edf3;
}
html[data-celda-design="sgi"] #erp-root .sgi-segmented-track i{display:block;height:100%;min-width:0;transition:width .2s ease;}
html[data-celda-design="sgi"] #erp-root .sgi-segmented-track .tone-blue{background:#438ae9;}
html[data-celda-design="sgi"] #erp-root .sgi-segmented-track .tone-green{background:#25a87d;}
html[data-celda-design="sgi"] #erp-root .sgi-segmented-track .tone-red{background:#e45d68;}
html[data-celda-design="sgi"] #erp-root .sgi-segmented-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
html[data-celda-design="sgi"] #erp-root .sgi-segmented-legend>div{
  position:relative;padding:9px 10px 9px 22px;border:1px solid #e7edf3;border-radius:10px;background:#fbfdff;
}
html[data-celda-design="sgi"] #erp-root .sgi-segmented-legend>div::before{
  content:"";position:absolute;left:9px;top:13px;width:7px;height:7px;border-radius:50%;background:#438ae9;
}
html[data-celda-design="sgi"] #erp-root .sgi-segmented-legend>div.tone-green::before{background:#25a87d;}
html[data-celda-design="sgi"] #erp-root .sgi-segmented-legend>div.tone-red::before{background:#e45d68;}
html[data-celda-design="sgi"] #erp-root .sgi-segmented-legend span{display:block;color:#72869b;font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html[data-celda-design="sgi"] #erp-root .sgi-segmented-legend b{display:block;margin-top:3px;color:#284663;font-size:13px;}

/* Solicitudes por estado: una sola barra apilada + leyenda, distinta a los rankings. */
html[data-celda-design="sgi"] #erp-root .sgi-status-distribution{display:grid;gap:15px;padding-top:8px;}
html[data-celda-design="sgi"] #erp-root .sgi-status-stack{height:22px;display:flex;overflow:hidden;border-radius:999px;background:#edf2f7;border:1px solid #e5ecf3;}
html[data-celda-design="sgi"] #erp-root .sgi-status-stack i{display:block;height:100%;min-width:0;}
html[data-celda-design="sgi"] #erp-root .sgi-status-stack .tone-0{background:#438ae9;}
html[data-celda-design="sgi"] #erp-root .sgi-status-stack .tone-1{background:#25a87d;}
html[data-celda-design="sgi"] #erp-root .sgi-status-stack .tone-2{background:#e7a629;}
html[data-celda-design="sgi"] #erp-root .sgi-status-stack .tone-3{background:#df616c;}
html[data-celda-design="sgi"] #erp-root .sgi-status-stack .tone-4{background:#8a78db;}
html[data-celda-design="sgi"] #erp-root .sgi-status-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 14px;}
html[data-celda-design="sgi"] #erp-root .sgi-status-legend>div{display:grid;grid-template-columns:8px minmax(0,1fr) auto auto;align-items:center;gap:6px;padding:7px 8px;border-radius:9px;background:#fbfdff;}
html[data-celda-design="sgi"] #erp-root .sgi-status-legend>div::before{content:"";width:7px;height:7px;border-radius:50%;background:#438ae9;}
html[data-celda-design="sgi"] #erp-root .sgi-status-legend>div.tone-1::before{background:#25a87d;}
html[data-celda-design="sgi"] #erp-root .sgi-status-legend>div.tone-2::before{background:#e7a629;}
html[data-celda-design="sgi"] #erp-root .sgi-status-legend>div.tone-3::before{background:#df616c;}
html[data-celda-design="sgi"] #erp-root .sgi-status-legend>div.tone-4::before{background:#8a78db;}
html[data-celda-design="sgi"] #erp-root .sgi-status-legend span{color:#657c93;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html[data-celda-design="sgi"] #erp-root .sgi-status-legend b{color:#294663;font-size:10px;}
html[data-celda-design="sgi"] #erp-root .sgi-status-legend small{color:#8a98a8;font-size:8px;}

/* Valor cotizado por servicio: columnas compactas, no otro ranking horizontal. */
html[data-celda-design="sgi"] #erp-root .sgi-service-columns{
  min-height:155px;display:flex;align-items:flex-end;justify-content:center;gap:28px;padding:8px 14px 2px;
}
html[data-celda-design="sgi"] #erp-root .sgi-service-column{width:min(92px,22%);display:grid;grid-template-rows:auto 112px auto;gap:6px;align-items:end;text-align:center;}
html[data-celda-design="sgi"] #erp-root .sgi-service-column>b{color:#294663;font-size:9px;white-space:nowrap;}
html[data-celda-design="sgi"] #erp-root .sgi-service-column>div{height:112px;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid #dfe7ef;background:linear-gradient(to top,#f2f5f8 1px,transparent 1px) 0 0/100% 28px;}
html[data-celda-design="sgi"] #erp-root .sgi-service-column i{display:block;width:34px;min-height:5px;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,#65a8f0,#3d88e8);}
html[data-celda-design="sgi"] #erp-root .sgi-service-column.tone-1 i{background:linear-gradient(180deg,#45c29a,#25a87d);}
html[data-celda-design="sgi"] #erp-root .sgi-service-column.tone-2 i{background:linear-gradient(180deg,#efc15d,#e3a62a);}
html[data-celda-design="sgi"] #erp-root .sgi-service-column.tone-3 i{background:linear-gradient(180deg,#ed8c94,#df616c);}
html[data-celda-design="sgi"] #erp-root .sgi-service-column.tone-4 i{background:linear-gradient(180deg,#a493e7,#8a78db);}
html[data-celda-design="sgi"] #erp-root .sgi-service-column>span{color:#71859a;font-size:8.7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Clarifica la tarjeta de cartera. */
html[data-celda-design="sgi"] #erp-root .sgi-receivable-visual .sgi-chart-head small{display:block;margin-top:4px;color:#8796a7;font-size:8.3px;font-weight:500;}

/* Las tiras de totales ya no parecen controles viejos o paneles incrustados. */
html[data-celda-design="sgi"] #erp-root .celda-total-strip{
  gap:8px!important;padding-top:0!important;border-top:0!important;background:transparent!important;
}
html[data-celda-design="sgi"] #erp-root .celda-total-strip>div{
  border:1px solid #e6edf4!important;background:#f9fbfd!important;box-shadow:none!important;
}

/* Controles secundarios: que existan visualmente sin competir con las acciones primarias. */
html[data-celda-design="sgi"] #erp-root button.btn-ghost{
  border:1px solid #dbe6f1!important;background:#f8fbff!important;color:#315f93!important;box-shadow:0 1px 2px rgba(31,62,96,.025);
}
html[data-celda-design="sgi"] #erp-root button.btn-ghost:hover{border-color:#bcd2ea!important;background:#edf5ff!important;color:#245b98!important;}
html[data-celda-design="sgi"] #erp-root select:hover,
html[data-celda-design="sgi"] #erp-root input:hover{border-color:#cbd8e6;}
html[data-celda-design="sgi"] #erp-root select:focus,
html[data-celda-design="sgi"] #erp-root input:focus{border-color:#7faee7;box-shadow:0 0 0 3px rgba(61,136,232,.10);}

@media (max-width:980px){
  html[data-celda-design="sgi"] #erp-root .sgi-segmented-legend{grid-template-columns:1fr;}
  html[data-celda-design="sgi"] #erp-root .sgi-service-columns{justify-content:flex-start;overflow-x:auto;}
  html[data-celda-design="sgi"] #erp-root .sgi-service-column{min-width:82px;}
}

/* ========================================================================== 
   UI FASE 4 FINAL · Interfaz única, Panel personal y responsive
   ========================================================================== */
/* El sistema de apariencia heredado queda retirado de la experiencia visible.
   Los atributos internos permanecen en valores canónicos solo para conservar
   compatibilidad con componentes históricos que todavía consultan esos tokens. */
html[data-celda-design="sgi"]{
  color-scheme:light;
}

/* ---------- Panel personal / opciones ---------- */
html[data-celda-design="sgi"] #celda-system-panel{
  width:min(560px,calc(100vw - 28px))!important;
  max-height:min(760px,calc(100dvh - 78px))!important;
  padding:14px!important;
  border:1px solid #dce6f1!important;
  border-radius:18px!important;
  background:#fff!important;
  color:#263f5b!important;
  box-shadow:0 24px 64px rgba(28,57,88,.18)!important;
  scrollbar-gutter:stable;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-head{
  margin:-14px -14px 12px!important;
  padding:13px 14px 11px!important;
  border-bottom:1px solid #e8eef5!important;
  background:rgba(255,255,255,.97)!important;
  backdrop-filter:blur(12px)!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-panel-tabs{
  position:sticky!important;
  top:44px!important;
  z-index:5!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:4px!important;
  margin:0 0 13px!important;
  padding:4px!important;
  border:1px solid #e3eaf2!important;
  border-radius:12px!important;
  background:#f7faff!important;
  box-shadow:none!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-panel-tabs button{
  min-height:36px!important;
  padding:7px 8px!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:#708297!important;
  font-size:11.5px!important;
  font-weight:700!important;
  box-shadow:none!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-panel-tabs button:hover,
html[data-celda-design="sgi"] #celda-system-panel .cs-panel-tabs button:focus-visible{
  background:#eef5ff!important;
  color:#245e9f!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-panel-tabs button.active{
  background:#fff!important;
  color:#236dcc!important;
  box-shadow:0 1px 5px rgba(42,83,125,.08)!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-pane-heading{
  margin:2px 2px 12px!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-pane-heading span{
  color:#2878ed!important;
  font-size:9px!important;
  letter-spacing:.12em!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-pane-heading b{
  color:#203e63!important;
  font-size:18px!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-pane-heading small{
  margin-top:4px!important;
  color:#7b8da1!important;
  font-size:11.5px!important;
  line-height:1.45!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-settings-card,
html[data-celda-design="sgi"] #celda-system-panel .cs-section,
html[data-celda-design="sgi"] #celda-system-panel .cs-accordion{
  border:1px solid #e4ebf3!important;
  border-radius:13px!important;
  background:#fff!important;
  box-shadow:none!important;
}

html[data-celda-design="sgi"] #celda-system-panel .cs-preferences-card-clean{
  display:grid;
  gap:9px;
  padding:10px!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-official-design-card,
html[data-celda-design="sgi"] #celda-system-panel .cs-preference-row-clean{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  min-height:66px;
  padding:11px 12px;
  border:1px solid #e5ecf4;
  border-radius:11px;
  background:#fbfdff;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-official-design-icon{
  width:32px;height:32px;display:grid;place-items:center;
  border-radius:9px;background:#eaf8f2;color:#16875f;
  font-size:15px;font-weight:800;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-official-design-card>div,
html[data-celda-design="sgi"] #celda-system-panel .cs-preference-row-clean>div{min-width:0;}
html[data-celda-design="sgi"] #celda-system-panel .cs-official-design-card b,
html[data-celda-design="sgi"] #celda-system-panel .cs-preference-row-clean b{
  display:block;color:#284560;font-size:12.5px;font-weight:750;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-official-design-card small,
html[data-celda-design="sgi"] #celda-system-panel .cs-preference-row-clean small{
  display:block;margin-top:3px;color:#7d8fa3;font-size:10.5px;line-height:1.4;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-clean-select select{
  min-width:118px;min-height:36px;padding:7px 30px 7px 9px;
  border:1px solid #dbe6f1!important;border-radius:9px!important;
  background:#fff!important;color:#315574!important;font-size:11.5px!important;
  box-shadow:none!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-profile-preference button{
  min-height:36px!important;padding:7px 11px!important;
  border:1px solid #d7e5f4!important;border-radius:9px!important;
  background:#f4f8ff!important;color:#2864a5!important;
  font-size:11.5px!important;font-weight:700!important;box-shadow:none!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-profile-preference button:hover{
  background:#eaf3ff!important;border-color:#bfd5ef!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-preference-note{
  display:flex;align-items:flex-start;gap:8px;padding:9px 10px;
  border-radius:10px;background:#f6f9fc;color:#718399;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-preference-note>span{
  width:19px;height:19px;display:grid;place-items:center;flex:0 0 19px;
  border:1px solid #cad9e8;border-radius:50%;color:#47749f;font-size:10px;font-weight:800;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-preference-note p{
  margin:1px 0 0;font-size:9.8px;line-height:1.45;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-status-pill.good{
  background:#eaf8f2!important;color:#15845f!important;
}

/* Menú de opciones del perfil: superficie clara, compacta y coherente. */
html[data-celda-design="sgi"] .cs-profile-menu.cs-profile-menu-clean{
  min-width:224px!important;max-height:min(330px,calc(100dvh - 140px))!important;
  padding:6px!important;border:1px solid #dce6f1!important;border-radius:12px!important;
  background:#fff!important;color:#294763!important;
  box-shadow:0 18px 42px rgba(28,57,88,.18)!important;
  backdrop-filter:none!important;
}
html[data-celda-design="sgi"] .cs-profile-menu-clean .cs-profile-menu-title{
  padding:7px 9px 8px;color:#8594a6;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
}
html[data-celda-design="sgi"] .cs-profile-menu-clean button{
  display:grid!important;grid-template-columns:25px minmax(0,1fr)!important;align-items:center!important;
  gap:7px!important;width:100%!important;min-height:36px!important;padding:6px 8px!important;
  border:0!important;border-radius:8px!important;background:transparent!important;color:#35536e!important;
  text-align:left!important;font-size:11.5px!important;font-weight:650!important;box-shadow:none!important;
}
html[data-celda-design="sgi"] .cs-profile-menu-clean button:hover,
html[data-celda-design="sgi"] .cs-profile-menu-clean button:focus-visible{
  background:#eef5ff!important;color:#2367b2!important;
}
html[data-celda-design="sgi"] .cs-profile-menu-clean .cs-option-glyph{
  width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:#f2f6fb;color:#6082a4;font-size:12px;
}
html[data-celda-design="sgi"] .cs-profile-menu-clean .cs-option-muted{color:#708296!important;}
html[data-celda-design="sgi"] .cs-profile-menu-clean .cs-profile-menu-separator{height:1px;margin:5px 6px;background:#edf1f5;}

/* ---------- Responsive final ---------- */
@media (max-width:1180px) and (min-width:761px){
  html[data-celda-design="sgi"] #erp-root .grid.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  html[data-celda-design="sgi"] #erp-root .grid.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  html[data-celda-design="sgi"] #erp-root .form-row{column-gap:10px!important;}
}
@media (max-width:760px){
  html[data-celda-design="sgi"] #erp-root{width:100vw!important;min-height:100dvh!important;border-radius:0!important;border-left:0!important;border-right:0!important;}
  html[data-celda-design="sgi"] #erp-root .main{padding:72px 12px 24px!important;}
  html[data-celda-design="sgi"] #erp-root :is(.grid.grid-4,.grid.grid-3,.grid.grid-2){grid-template-columns:1fr!important;}
  html[data-celda-design="sgi"] #erp-root .form-row{grid-template-columns:1fr!important;gap:9px!important;}
  html[data-celda-design="sgi"] #erp-root .form-row>*{grid-column:1/-1!important;}
  html[data-celda-design="sgi"] #erp-root .section-head{align-items:flex-start!important;flex-wrap:wrap!important;}
  html[data-celda-design="sgi"] #erp-root .section-head>:last-child{max-width:100%;}
  html[data-celda-design="sgi"] #erp-root .card{border-radius:10px!important;}
  html[data-celda-design="sgi"] #erp-root .table-scroll{max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch;}
  html[data-celda-design="sgi"] #erp-root table{min-width:max-content;}
  html[data-celda-design="sgi"] #erp-root :is(input,select,textarea,button.btn,button.btn-ghost){font-size:16px;}

  html[data-celda-design="sgi"] #celda-system-panel{
    position:fixed!important;top:58px!important;right:10px!important;bottom:10px!important;left:10px!important;
    width:auto!important;max-height:none!important;padding:12px!important;border-radius:15px!important;overflow:auto!important;
  }
  html[data-celda-design="sgi"] #celda-system-panel .cs-head{top:-12px!important;margin:-12px -12px 10px!important;padding:12px!important;}
  html[data-celda-design="sgi"] #celda-system-panel .cs-panel-tabs{position:static!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  html[data-celda-design="sgi"] #celda-system-panel .cs-official-design-card,
  html[data-celda-design="sgi"] #celda-system-panel .cs-preference-row-clean{grid-template-columns:auto minmax(0,1fr)!important;}
  html[data-celda-design="sgi"] #celda-system-panel .cs-official-design-card .cs-status-pill,
  html[data-celda-design="sgi"] #celda-system-panel .cs-clean-select,
  html[data-celda-design="sgi"] #celda-system-panel .cs-profile-preference button{grid-column:1/-1;justify-self:stretch;width:100%;}
  html[data-celda-design="sgi"] #celda-system-panel .cs-clean-select select{width:100%;font-size:16px!important;}
  html[data-celda-design="sgi"] .cs-profile-menu.cs-profile-menu-clean{min-width:min(240px,calc(100vw - 44px))!important;}
}
@media (max-width:430px){
  html[data-celda-design="sgi"] #erp-root .main{padding-inline:9px!important;}
  html[data-celda-design="sgi"] #celda-system-panel{left:6px!important;right:6px!important;bottom:6px!important;}
}

/* Utilidad accesible local del panel. */
html[data-celda-design="sgi"] .sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-profile-banner{
  min-height:104px!important;
  margin-bottom:12px!important;
  padding:14px 14px 16px!important;
  border:1px solid #e1eaf3!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#f4f8fd,#edf4fb)!important;
  box-shadow:none!important;
  overflow:visible!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-profile-cover{
  border-radius:13px!important;
  opacity:.92!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-profile-copy>span,
html[data-celda-design="sgi"] #celda-system-panel .cs-profile-copy>small,
html[data-celda-design="sgi"] #celda-system-panel .cs-profile-copy>em{color:#72869b!important;text-shadow:none!important;}
html[data-celda-design="sgi"] #celda-system-panel .cs-profile-copy>b{color:#203f65!important;text-shadow:none!important;}
html[data-celda-design="sgi"] #celda-system-panel .cs-profile-avatar{
  border:3px solid #fff!important;
  background:#4f78a8!important;
  color:#fff!important;
  box-shadow:0 5px 14px rgba(36,70,105,.14)!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-profile-menu-trigger{
  border:1px solid #d9e4ef!important;
  background:rgba(255,255,255,.94)!important;
  color:#54728f!important;
  box-shadow:0 2px 7px rgba(40,72,104,.07)!important;
  backdrop-filter:blur(8px)!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-profile-menu-trigger:hover,
html[data-celda-design="sgi"] #celda-system-panel .cs-profile-menu-trigger:focus-visible{
  background:#eef5ff!important;color:#2567ad!important;border-color:#bdd3eb!important;transform:none!important;
}

/* ========================================================================== 
   BLOQUE 4.4 · Realineación visual del panel personal y eventos globales
   Basado en los mockups aprobados: opciones más premium, menú de cuenta tipo
   ficha, tarjetas de cuenta más claras y lenguaje visual consistente en eventos.
   ========================================================================== */

html[data-celda-design="sgi"] #celda-system-panel{
  border-radius:20px!important;
  border:1px solid #dce6f1!important;
  background:linear-gradient(180deg,#fbfdff 0%,#f5f8fc 100%)!important;
  box-shadow:0 28px 72px rgba(25,55,90,.18)!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-head.cs-head-profile-mode{
  padding:6px 2px 10px!important;
  margin-bottom:2px!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-head-profile-mode .cs-panel-status{
  color:#6c8197!important;
  font-size:13px!important;
  letter-spacing:.04em!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-head-profile-mode .cs-close{
  width:28px;height:28px;border-radius:50%;
  color:#47617f;background:transparent;border:1px solid transparent;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-head-profile-mode .cs-close:hover,
html[data-celda-design="sgi"] #celda-system-panel .cs-head-profile-mode .cs-close:focus-visible{
  background:#eef4fb;border-color:#d5e3f2;color:#245fa1;outline:none;
}

html[data-celda-design="sgi"] #celda-system-panel .cs-profile-banner{
  min-height:132px!important;
  padding:18px 18px 18px!important;
  border-radius:18px!important;
  border:1px solid #dbe7f3!important;
  background:
    radial-gradient(circle at 82% 24%,rgba(94,226,255,.35),transparent 28%),
    linear-gradient(135deg,#0f4ea5 0%,#145eb8 28%,#1779d5 62%,#1f90dd 100%)!important;
  box-shadow:0 18px 44px rgba(19,82,153,.18)!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-profile-banner::before{
  background:
    linear-gradient(90deg,rgba(6,31,62,.18),rgba(5,29,51,.06) 48%,rgba(255,255,255,.04)),
    repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 18px,rgba(255,255,255,.03) 18px 42px)!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-profile-copy>span{
  color:rgba(226,240,255,.82)!important;
  font-size:11.8px!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-profile-copy>b{
  margin-top:3px!important;
  color:#fff!important;
  font-size:22px!important;
  letter-spacing:-.02em!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-profile-copy>small{
  margin-top:8px!important;
  background:rgba(255,255,255,.94)!important;
  color:#2f5f88!important;
  font-size:10.8px!important;
  box-shadow:0 4px 12px rgba(6,23,43,.12);
}
html[data-celda-design="sgi"] #celda-system-panel .cs-profile-copy>em{
  margin-top:14px!important;
  color:rgba(255,255,255,.92)!important;
  font-size:11px!important;
  letter-spacing:.14em!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-profile-avatar{
  width:74px!important;height:74px!important;
  border:3px solid rgba(255,255,255,.92)!important;
  background:#4f78a8!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(8,24,45,.22)!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-profile-menu-wrap{
  position:absolute;right:12px;top:12px;z-index:6;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-profile-menu-trigger{
  width:36px!important;height:32px!important;
  border-radius:14px!important;
  font-size:18px!important;
  font-weight:900!important;
}

html[data-celda-design="sgi"] #celda-system-panel .cs-panel-tabs{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px!important;
  padding:4px!important;
  border:1px solid #dae5f0!important;
  border-radius:16px!important;
  background:#eef3f8!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-panel-tabs button{
  min-height:40px!important;
  border-radius:12px!important;
  background:transparent!important;
  color:#6a7f95!important;
  font-size:12px!important;
  font-weight:750!important;
  box-shadow:none!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-panel-tabs button.active{
  background:#fff!important;
  color:#2368b8!important;
  box-shadow:0 4px 14px rgba(38,93,155,.08)!important;
}

html[data-celda-design="sgi"] #celda-system-panel .cs-settings-card,
html[data-celda-design="sgi"] #celda-system-panel .cs-section,
html[data-celda-design="sgi"] #celda-system-panel .cs-accordion{
  border-radius:18px!important;
  border:1px solid #dfe8f2!important;
  background:#fff!important;
  box-shadow:0 8px 24px rgba(32,64,98,.05)!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-section-head b,
html[data-celda-design="sgi"] #celda-system-panel .cs-pane-heading b{
  color:#18395d!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-section-head small,
html[data-celda-design="sgi"] #celda-system-panel .cs-pane-heading small{
  color:#7f92a5!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-inline-metrics span{
  border-radius:12px;
  background:#f6f9fc;
  border:1px solid #e7eef5;
  padding:11px 12px;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-wide-action{
  min-height:42px!important;
  border-radius:12px!important;
  background:#f7fafc!important;
  border:1px solid #d9e6f2!important;
  color:#236bb7!important;
  font-weight:800!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-wide-action:hover,
html[data-celda-design="sgi"] #celda-system-panel .cs-wide-action:focus-visible{
  background:#edf5ff!important;border-color:#bcd3eb!important;outline:none!important;
}

html[data-celda-design="sgi"] .cs-profile-menu.cs-profile-menu-clean{
  min-width:286px!important;
  max-width:306px!important;
  max-height:min(74vh,560px)!important;
  padding:10px!important;
  border-radius:18px!important;
  border:1px solid #dbe7f2!important;
  background:#fff!important;
  color:#284560!important;
  box-shadow:0 28px 56px rgba(24,57,92,.2)!important;
  overflow:auto!important;
}
html[data-celda-design="sgi"] .cs-profile-menu-clean .cs-profile-menu-head{
  display:grid;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:center;
  padding:10px 10px 12px;
  border-radius:14px;
  background:linear-gradient(180deg,#f7fbff,#eff4fb);
  border:1px solid #e2ebf5;
  margin-bottom:8px;
}
html[data-celda-design="sgi"] .cs-profile-menu-clean .cs-profile-menu-avatar{
  width:54px;height:54px;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(135deg,#5376a5,#365f96);color:#fff;font-size:18px;font-weight:800;
  box-shadow:0 8px 18px rgba(32,69,110,.15);
}
html[data-celda-design="sgi"] .cs-profile-menu-clean .cs-profile-menu-user{min-width:0;}
html[data-celda-design="sgi"] .cs-profile-menu-clean .cs-profile-menu-user b{
  display:block;color:#17395d;font-size:14px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[data-celda-design="sgi"] .cs-profile-menu-clean .cs-profile-menu-user small{
  display:block;margin-top:3px;color:#476784;font-size:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[data-celda-design="sgi"] .cs-profile-menu-clean .cs-profile-menu-user em{
  display:inline-flex;margin-top:7px;padding:4px 9px;border-radius:999px;
  background:#fff;color:#5a7591;font-style:normal;font-size:10px;font-weight:800;
  border:1px solid #d9e5f1;
}
html[data-celda-design="sgi"] .cs-profile-menu-clean .cs-profile-menu-title{
  padding:6px 10px 7px!important;
  color:#8294a7!important;
  font-size:9px!important;
  letter-spacing:.12em!important;
}
html[data-celda-design="sgi"] .cs-profile-menu-clean button{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:flex-start!important;
  width:100%!important;
  min-height:54px!important;
  padding:10px 10px!important;
  border:1px solid transparent!important;
  border-radius:14px!important;
  color:#2c4965!important;
}
html[data-celda-design="sgi"] .cs-profile-menu-clean button .cs-option-glyph{
  width:34px;height:34px;border-radius:12px!important;
  background:#eef4fb!important;color:#5b7896!important;font-size:14px!important;
}
html[data-celda-design="sgi"] .cs-profile-menu-clean button .cs-option-copy{display:block;min-width:0;}
html[data-celda-design="sgi"] .cs-profile-menu-clean button .cs-option-copy b{
  display:block;color:#17395d;font-size:12.6px;font-weight:760;line-height:1.22;
}
html[data-celda-design="sgi"] .cs-profile-menu-clean button .cs-option-copy small{
  display:block;margin-top:4px;color:#73879c;font-size:10.7px;line-height:1.42;
}
html[data-celda-design="sgi"] .cs-profile-menu-clean button:hover,
html[data-celda-design="sgi"] .cs-profile-menu-clean button:focus-visible{
  background:#f6faff!important;
  border-color:#d6e5f4!important;
  color:#2267b6!important;
  outline:none!important;
}
html[data-celda-design="sgi"] .cs-profile-menu-clean button:hover .cs-option-glyph,
html[data-celda-design="sgi"] .cs-profile-menu-clean button:focus-visible .cs-option-glyph{
  background:#e5f0ff!important;color:#2267b6!important;
}
html[data-celda-design="sgi"] .cs-profile-menu-clean .cs-option-muted .cs-option-copy b,
html[data-celda-design="sgi"] .cs-profile-menu-clean .cs-option-muted .cs-option-copy small{color:#6e8195!important;}
html[data-celda-design="sgi"] .cs-profile-menu-clean .cs-option-danger{
  background:#fff7f7!important;border-color:#f3d6da!important;color:#d1495b!important;
}
html[data-celda-design="sgi"] .cs-profile-menu-clean .cs-option-danger .cs-option-glyph{
  background:#ffecef!important;color:#d1495b!important;
}
html[data-celda-design="sgi"] .cs-profile-menu-clean .cs-option-danger .cs-option-copy b,
html[data-celda-design="sgi"] .cs-profile-menu-clean .cs-option-danger .cs-option-copy small{color:#c54355!important;}
html[data-celda-design="sgi"] .cs-profile-menu-clean .cs-profile-menu-separator{
  margin:8px 6px!important;
}

html[data-celda-design="sgi"] #celda-system-panel .cs-account-summary-hero{
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:center!important;
  padding:12px!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#f7fbff,#f2f6fb)!important;
  border:1px solid #e1eaf4!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-account-summary-hero .cs-account-avatar-mini{
  width:54px!important;height:54px!important;flex:0 0 54px!important;font-size:17px!important;
  box-shadow:0 8px 20px rgba(34,67,108,.12)!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-account-summary-hero b{
  font-size:14px!important;color:#17395d!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-account-summary-hero small{
  color:#476784!important;font-size:11px!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-account-summary-hero em{
  display:inline-flex;margin-top:6px;padding:4px 9px;border-radius:999px;
  border:1px solid #d9e6f2;background:#fff;color:#698097;font-size:10px;font-style:normal;font-weight:800;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-account-actions-list{
  display:grid!important;gap:8px!important;margin-top:10px!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-account-action{
  min-height:58px!important;
  border-radius:14px!important;
  border:1px solid #dfe9f3!important;
  background:#fff!important;
  box-shadow:none!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-account-action:hover,
html[data-celda-design="sgi"] #celda-system-panel .cs-account-action:focus-visible{
  transform:none!important;outline:none!important;
  border-color:#c8dced!important;background:#f7fbff!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-account-action-icon{
  width:32px!important;height:32px!important;border-radius:10px!important;
  background:#eef4fb!important;color:#557595!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-account-action-copy b{
  color:#18395d!important;font-size:12.6px!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-account-action-copy small{
  color:#7a8ea2!important;font-size:10.8px!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-danger-action{
  border-color:#f3d8dc!important;background:#fff8f9!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-danger-action .cs-account-action-icon{
  background:#ffecef!important;color:#d44f61!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-danger-action .cs-account-action-copy b,
html[data-celda-design="sgi"] #celda-system-panel .cs-danger-action .cs-account-action-copy small,
html[data-celda-design="sgi"] #celda-system-panel .cs-danger-action .cs-account-action-arrow{
  color:#c64759!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-account-note{
  margin-top:11px!important;
  padding:11px 12px!important;
  border-radius:14px!important;
  background:#f6f9fc!important;
  border:1px solid #e5edf5!important;
  color:#74889c!important;
}

html[data-celda-design="sgi"] #celda-system-panel .cs-preferences-card-clean{
  gap:10px!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-preference-note{
  border:1px solid #e3ecf4!important;
}

html[data-celda-design="sgi"] #celda-notification-stack .celda-note{
  border-radius:16px!important;
  border:1px solid #dde8f2!important;
  background:linear-gradient(180deg,#fff,#f9fbfd)!important;
  box-shadow:0 18px 40px rgba(23,56,91,.14)!important;
}

html[data-celda-design="sgi"] #celda-conflict-overlay{
  backdrop-filter:blur(8px)!important;
  background:rgba(8,25,43,.36)!important;
}
html[data-celda-design="sgi"] #celda-conflict-dialog{
  border-radius:24px!important;
  border:1px solid #dce7f2!important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbfd 100%)!important;
  box-shadow:0 34px 90px rgba(11,31,53,.24)!important;
}
html[data-celda-design="sgi"] #celda-conflict-dialog .ccd-head{
  padding:22px 24px 18px!important;
  background:linear-gradient(180deg,#f8fbff,#f1f6fb)!important;
  border-bottom:1px solid #e2ebf4!important;
}
html[data-celda-design="sgi"] #celda-conflict-dialog .ccd-head-icon{
  width:52px!important;height:52px!important;
  border-radius:18px!important;
  background:#fff4df!important;
  color:#c88a16!important;
  box-shadow:inset 0 0 0 1px #f0d8a1!important;
}
html[data-celda-design="sgi"] #celda-conflict-dialog .ccd-eyebrow{
  color:#b07a14!important;
  letter-spacing:.14em!important;
}
html[data-celda-design="sgi"] #celda-conflict-dialog h2{
  color:#18395d!important;
}
html[data-celda-design="sgi"] #celda-conflict-dialog .ccd-head p,
html[data-celda-design="sgi"] #celda-conflict-dialog .ccd-summary span,
html[data-celda-design="sgi"] #celda-conflict-dialog .ccd-version-meta,
html[data-celda-design="sgi"] #celda-conflict-dialog .ccd-decision-note,
html[data-celda-design="sgi"] #celda-conflict-dialog .ccd-no-diff{
  color:#72879b!important;
}
html[data-celda-design="sgi"] #celda-conflict-dialog .ccd-status{
  border-radius:999px!important;
  background:#fff7e8!important;
  border:1px solid #f0d7a1!important;
  color:#936516!important;
}
html[data-celda-design="sgi"] #celda-conflict-dialog .ccd-compare-head,
html[data-celda-design="sgi"] #celda-conflict-dialog .ccd-diff-list,
html[data-celda-design="sgi"] #celda-conflict-dialog .ccd-version-pill,
html[data-celda-design="sgi"] #celda-conflict-dialog .ccd-decision-note,
html[data-celda-design="sgi"] #celda-conflict-dialog .ccd-no-diff{
  border-radius:16px!important;
  border-color:#dfe8f1!important;
  background:#fff!important;
}
html[data-celda-design="sgi"] #celda-conflict-dialog .ccd-compare-head{
  background:#f4f8fc!important;color:#6f8498!important;
}
html[data-celda-design="sgi"] #celda-conflict-dialog .ccd-diff-row{background:#fff!important;}
html[data-celda-design="sgi"] #celda-conflict-dialog .ccd-diff-label{
  background:#f8fbfd!important;color:#6f8498!important;border-color:#e2ebf4!important;
}
html[data-celda-design="sgi"] #celda-conflict-dialog .ccd-diff-value.local span{
  background:#edf6ff!important;color:#236fb5!important;border-left-color:#2c82dc!important;
}
html[data-celda-design="sgi"] #celda-conflict-dialog .ccd-diff-value.server span{
  background:#fff5e7!important;color:#a06b14!important;border-left-color:#d79a2b!important;
}
html[data-celda-design="sgi"] #celda-conflict-dialog .ccd-actions{
  padding:16px 22px 22px!important;
  background:#f7fafc!important;
  border-top:1px solid #e3ecf4!important;
}
html[data-celda-design="sgi"] #celda-conflict-dialog button{
  min-height:46px!important;
  border-radius:14px!important;
  border:1px solid #d7e4ef!important;
  background:#fff!important;
  color:#234b73!important;
  box-shadow:none!important;
}
html[data-celda-design="sgi"] #celda-conflict-dialog button.primary{
  background:linear-gradient(180deg,#2f8fe0,#2b7fd6)!important;
  border-color:#2b7fd6!important;
  color:#fff!important;
}
html[data-celda-design="sgi"] #celda-conflict-dialog button.danger{
  background:#fff4f5!important;
  border-color:#efc9cf!important;
  color:#c44757!important;
}

@media (max-width:1280px) and (min-width:761px){
  html[data-celda-design="sgi"] #celda-context-hub{right:196px!important;}
  html[data-celda-design="sgi"] #celda-system-toggle{min-width:152px!important;max-width:186px!important;}
  html[data-celda-design="sgi"] #celda-system-toggle .cs-user-compact{max-width:96px!important;}
}
@media (max-width:760px){
  html[data-celda-design="sgi"] #celda-system-panel{border-radius:18px!important;}
  html[data-celda-design="sgi"] #celda-system-panel .cs-panel-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  html[data-celda-design="sgi"] .cs-profile-menu.cs-profile-menu-clean{min-width:min(290px,calc(100vw - 42px))!important;max-width:min(290px,calc(100vw - 42px))!important;}
  html[data-celda-design="sgi"] #celda-system-panel .cs-profile-banner{min-height:120px!important;padding:16px!important;}
  html[data-celda-design="sgi"] #celda-system-panel .cs-profile-copy>b{font-size:18px!important;}
  html[data-celda-design="sgi"] #celda-system-panel .cs-profile-avatar{width:60px!important;height:60px!important;}
  html[data-celda-design="sgi"] #celda-system-panel .cs-inline-metrics{grid-template-columns:1fr!important;}
}

/* ========================================================================== 
   BLOQUE 4.5 · Entrada compacta de cuenta según mockup
   El clic en la identidad superior ya no abre directamente el panel grande:
   primero muestra un menú de cuenta compacto; las secciones profundas siguen
   disponibles desde ese menú sin cambiar su lógica funcional.
   ========================================================================== */
html[data-celda-design="sgi"] #celda-system-toggle .cs-toggle-chevron{
  width:18px;height:18px;display:grid;place-items:center;margin-left:1px;
  color:#7690aa;font-size:13px;font-weight:900;transition:transform .16s ease;
}
html[data-celda-design="sgi"] #celda-system-toggle[aria-expanded="true"] .cs-toggle-chevron{
  transform:rotate(180deg);color:#2b6fb8;
}
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-menu{
  position:absolute;
  right:0;
  top:50px;
  width:292px;
  padding:12px;
  border:1px solid #dce6f1;
  border-radius:18px;
  background:#fff;
  color:#263f5b;
  box-shadow:0 28px 64px rgba(25,55,88,.20);
  animation:celdaQuickAccountIn .16s ease-out;
  overflow:hidden;
}
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-menu[hidden]{display:none!important;}
@keyframes celdaQuickAccountIn{
  from{opacity:0;transform:translateY(-6px) scale(.985)}
  to{opacity:1;transform:none}
}
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-head{
  display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:center;
  padding:8px 7px 10px;
}
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-avatar{
  width:58px;height:58px;display:grid;place-items:center;overflow:hidden;
  border-radius:50%;background:linear-gradient(135deg,#5c7eaa,#315c93);color:#fff;
  font-size:18px;font-weight:800;box-shadow:0 8px 18px rgba(31,68,109,.16);
}
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-avatar img{
  width:100%;height:100%;display:block;object-fit:cover;
}
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-head>div{min-width:0;}
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-head b{
  display:block;color:#18395d;font-size:14px;line-height:1.18;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-head small{
  display:block;margin-top:4px;color:#59718a;font-size:10.8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-head span{
  display:flex;align-items:center;gap:6px;margin-top:7px;color:#2d7d61;font-size:10.5px;font-weight:700;
}
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-head span i{
  width:7px;height:7px;border-radius:50%;background:#17a775;box-shadow:0 0 0 3px #e9f8f2;
}
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-separator{
  height:1px;margin:5px 3px;background:#e9eef4;
}
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-menu button{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) 18px!important;
  gap:10px!important;align-items:center!important;
  width:100%!important;min-height:58px!important;padding:9px 8px!important;
  border:1px solid transparent!important;border-radius:13px!important;
  background:transparent!important;color:#294966!important;text-align:left!important;
  box-shadow:none!important;cursor:pointer!important;
}
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-menu button:hover,
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-menu button:focus-visible{
  background:#f5f9ff!important;border-color:#dce8f5!important;outline:none!important;
}
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-menu button .cs-quick-icon{
  width:34px;height:34px;display:grid;place-items:center;border-radius:11px;
  background:#eef4fb;color:#537594;font-size:14px;font-weight:800;
}
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-menu button>span:nth-child(2){min-width:0;}
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-menu button b{
  display:block;color:#193b5f;font-size:12.5px;font-weight:760;line-height:1.2;
}
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-menu button small{
  display:block;margin-top:4px;color:#76899c;font-size:10.3px;line-height:1.35;
}
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-menu button em{
  color:#9aabba;font-size:19px;font-style:normal;line-height:1;
}
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-menu button.danger{
  background:#fff8f9!important;
}
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-menu button.danger .cs-quick-icon{
  background:#ffecef;color:#d84b5e;
}
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-menu button.danger b,
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-menu button.danger small,
html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-menu button.danger em{
  color:#c94a5b;
}

/* El panel profundo queda como segunda capa: ligeramente más compacto y menos
   parecido a un formulario administrativo. */
html[data-celda-design="sgi"] #celda-system-panel{
  width:min(590px,calc(100vw - 24px))!important;
  padding:14px!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-section{
  padding:13px!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-section-head b{
  font-size:15px!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-section-head small{
  font-size:11.7px!important;line-height:1.45!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-inline-metrics{
  gap:8px!important;font-size:11.5px!important;
}
html[data-celda-design="sgi"] #celda-system-panel .cs-inline-metrics span{
  flex:1 1 160px;
}

@media(max-width:760px){
  html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-menu{
    position:fixed;top:58px;right:8px;left:8px;width:auto;max-height:calc(100dvh - 72px);overflow:auto;
  }
  html[data-celda-design="sgi"] :is(#celda-system-bar,#tp-profile-configuration) .cs-quick-account-menu button{min-height:60px!important;}
}