/* ═══════════════════════════════════════════════════════════════
 * Gestor+ · Seguimiento — piel propia del módulo
 * ---------------------------------------------------------------
 * Se carga DESPUÉS de gm-shell.css y todo va bajo `body.sg`, así
 * comparte el esqueleto con /formulacion (topbar, aside, tarjetas,
 * matriz de calor…) pero se ve distinto: paleta "miel" (naranja
 * dorado, casi amarillo) con topbar en degradado, aside blanco y
 * fondo cálido, frente al ámbar plano de Formulación.
 *
 * Idea: Formulación es "taller" (ámbar, directo);
 *       Seguimiento es "tablero de control" (miel, profundo, sobrio).
 * ═══════════════════════════════════════════════════════════════ */

body.sg {
  /* Paleta "miel": naranja dorado, casi amarillo. Pariente del ámbar plano
     de Formulación (#D97706 / #F2A020) pero más profundo, cálido y con
     degradado: se reconoce como Gestor+ y a la vez como otro módulo. */
  --sg-honey:       #C4820A;   /* principal (botones, activos, barras) */
  --sg-honey-2:     #E0A106;   /* dorado */
  --sg-honey-3:     #F5C242;   /* oro claro: acentos sobre el topbar oscuro */
  --sg-honey-deep:  #8A5B00;   /* ámbar profundo (texto de acento, hover) */
  --sg-cacao:       #5C3A0E;   /* marrón cálido (sombras, texto sobre dorado) */
  --sg-ink:         #2A1F0A;   /* tinta cálida para títulos */
  --sg-cream:       #FFF4D6;   /* tinte principal */
  --sg-cream-2:     #F3E3B5;
  --sg-sand:        #FAF3E3;   /* tinte suave para fondos secundarios */
  --sg-line:        #EADFC7;
  --sg-shadow:      0 2px 10px rgba(138,91,0,.07), 0 1px 3px rgba(0,0,0,.05);
  --sg-shadow-lg:   0 14px 40px rgba(138,91,0,.16);

  /* Re-mapeo de los tokens del shell */
  --fe-topbar:  linear-gradient(100deg, #B8790A 0%, #CD8A0E 50%, #DE9C18 100%);
  --fe-border:  rgba(92,58,14,.28);
  --fe-sidebar: #ffffff;
  --content-bg: #F8F5EE;
  --amber:      var(--sg-honey);
  --amber-dark: var(--sg-honey-deep);
  --amber-tint: var(--sg-cream);
  --radius-lg:  18px;
  --radius-md:  12px;
  --shadow-card: var(--sg-shadow);
}

/* ── Esqueleto: #app visible y a toda altura ─────────────────────
   El shell lo trae display:none y /formulacion lo enciende por JS tras
   el login; aquí no hay pantalla de carga, así que se muestra por CSS. */
body.sg #app { display: flex; flex-direction: column; height: 100%; min-height: 100vh; }
body.sg .body-row { min-height: 0; }             /* deja que .content-area haga scroll */
body.sg .content-area { min-height: 0; }

/* ── Topbar: miel con brillo, profundidad y panal ──────────────────
   Dorado limpio (nada de marrón) con texto e iconos en tinta oscura:
   contraste real y una personalidad opuesta al blanco-sobre-naranja
   de Formulación. Capas, de abajo hacia arriba:
     1. degradado miel (--fe-topbar)
     2. brillo arriba-izquierda + sombra cálida abajo-derecha (profundidad)
     3. ::before → trama de panal (guiño a la Abeja 360), que aparece
        suavemente hacia la derecha para no competir con la marca
     4. ::after  → banda ámbar profunda de 3 px como base (z-index 0:
        nunca por encima de los menús desplegables, que son hijos con z 1). */
body.sg .topbar {
  position: relative; isolation: isolate;
  background:
    radial-gradient(70% 160% at 10% -30%, rgba(255,255,255,.26), transparent 60%),
    radial-gradient(55% 140% at 100% 130%, rgba(122,78,0,.42), transparent 62%),
    var(--fe-topbar);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 26px rgba(138,91,0,.24);
}
body.sg .topbar::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%23fff' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E") 0 0 / 28px 49px repeat;
  opacity: .16;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 42%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 42%, #000 100%);
}
body.sg .topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; z-index: 0; /* bajo los desplegables (hijos en z-index:1) */
  background: linear-gradient(90deg, var(--sg-honey-deep) 0%, #B8790A 55%, var(--sg-honey-2) 100%);
}
body.sg .topbar > :not(.topbar-search) { position: relative; z-index: 1; }
body.sg .topbar-search { z-index: 1; }

/* Marca, badge y etiqueta de vista: blanco sobre miel (con sombra sutil para el contraste) */
body.sg .topbar-brand img {
  width: 34px; height: 34px; padding: 4px; box-sizing: border-box;
  background: #fff; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(92,58,14,.28), 0 0 0 1px rgba(255,255,255,.35);
}
body.sg .topbar-brand-name { color: #fff; text-shadow: 0 1px 2px rgba(92,58,14,.45); }
body.sg .topbar-badge {
  background: rgba(255,255,255,.16); color: #fff;
  border: 1px solid rgba(255,255,255,.38); letter-spacing: 1.2px;
  text-shadow: 0 1px 1px rgba(92,58,14,.35);
}
body.sg .topbar-badge::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; margin-right: 7px; vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(255,255,255,.22);
}
body.sg .topbar-sep { background: rgba(255,255,255,.30); }
body.sg .topbar-view-label { color: rgba(255,255,255,.80); text-shadow: 0 1px 1px rgba(92,58,14,.3); }
body.sg .topbar-view-label span { color: #fff; }

/* Buscador: cápsula translúcida con texto blanco en reposo; al pasar el mouse o
   enfocar manda el shell (caja blanca con texto oscuro), igual que en Formulación. */
body.sg .topbar-search:not(:hover):not(:focus-within) {
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
body.sg .topbar-search:not(:hover):not(:focus-within) input { color: #fff; }
body.sg .topbar-search:not(:hover):not(:focus-within) input::placeholder { color: rgba(255,255,255,.78); }
body.sg .topbar-search:not(:hover):not(:focus-within) .topbar-search-icon { color: rgba(255,255,255,.85); }
body.sg .topbar-search:not(:hover):not(:focus-within) .topbar-search-kbd {
  color: rgba(255,255,255,.85); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32);
}

/* Campana, apps y usuario */
body.sg .gm-bell-btn, body.sg .gm-apps-btn {
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
body.sg .gm-bell-btn:hover, body.sg .gm-apps-btn:hover { background: #fff; border-color: #fff; color: var(--sg-honey-deep); }
body.sg .gm-nav-actions .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.14); }
body.sg .gm-nav-actions .btn-ghost:hover { background: rgba(255,255,255,.28); }
body.sg .gm-user-trigger:hover { background: rgba(255,255,255,.16); }
body.sg .gm-user-name { color: #fff; text-shadow: 0 1px 2px rgba(92,58,14,.4); }
body.sg .gm-user-chev { color: rgba(255,255,255,.75); }
body.sg .gm-user-avatar { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.45); }
body.sg .gm-user-initials { color: var(--sg-honey-deep); }

/* ── Aside blanco ───────────────────────────────────────────────── */
body.sg .sidebar { background: #fff; border-right: 1px solid var(--sg-line); box-shadow: 4px 0 18px rgba(138,91,0,.04); }
body.sg .sidebar-head { border-bottom-color: var(--sg-line); }
body.sg .sidebar-head-icon,
body.sg .sidebar-head-row-icon { background: var(--sg-cream); color: var(--sg-honey-deep); }
body.sg .sidebar-app-label { color: var(--sg-ink); }
body.sg .sidebar-app-sub   { color: #8A7A5C; }
body.sg .sidebar-section-label { color: var(--sg-honey-deep); letter-spacing: 1.4px; }
body.sg .sidebar-divider { background: var(--sg-line); }
body.sg .sidebar-item { color: #4A3F2A; border-left-color: transparent; border-radius: 0 10px 10px 0; margin-right: 10px; }
body.sg .sidebar-item .si-label { color: inherit; }
body.sg .sidebar-item .si-icon { color: #9C8A62; background: transparent; }
body.sg .sidebar-item:hover { background: var(--sg-sand); color: var(--sg-ink); }
body.sg .sidebar-item:hover .si-icon { color: var(--sg-honey); }
body.sg .sidebar-item.active {
  background: linear-gradient(90deg, var(--sg-cream), rgba(255,244,214,.25));
  border-left-color: var(--sg-honey); color: var(--sg-ink);
}
body.sg .sidebar-item.active .si-icon { color: var(--sg-honey-deep); }
body.sg .si-badge { background: var(--sg-sand); color: var(--sg-cacao); }
body.sg .sidebar-item.active .si-badge { background: var(--sg-honey); color: #fff; }
body.sg .sidebar-toggle { background: #fff; color: var(--sg-honey-deep); border-color: var(--sg-line); }
body.sg .sidebar-toggle:hover { background: var(--sg-honey); color: #fff; }
/* tooltips en modo plegado */
body.sg .sidebar.collapsed .sidebar-item::after { background: var(--sg-ink); color: #fff; }
body.sg .sidebar.collapsed .sidebar-item::before { border-right-color: var(--sg-ink); }
body.sg .sidebar.collapsed .sidebar-item.active .si-icon { background: var(--sg-cream); color: var(--sg-honey-deep); }

/* ── Contenido ──────────────────────────────────────────────────── */
/* Gráficos del tablero: 2×2 equilibrado (la grilla auto-fit dejaba una tarjeta huérfana) */
body.sg .sg-grid--charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 980px) { body.sg .sg-grid--charts { grid-template-columns: minmax(0, 1fr); } }
body.sg .content-area a:not(.btn):not(.sg-proc):not(.gm-app-tile) { color: var(--sg-honey-deep); text-decoration-color: rgba(138,91,0,.35); }
body.sg .content-area {
  background:
    radial-gradient(900px 300px at 12% -10%, rgba(138,91,0,.07), transparent 60%),
    radial-gradient(700px 260px at 95% 0%, rgba(224,161,6,.08), transparent 60%),
    var(--content-bg);
}
body.sg .section-head { align-items: flex-start; }
body.sg .section-head h2 {
  font-family: var(--font-d); font-size: 22px; font-weight: 800; color: var(--sg-ink);
  letter-spacing: -.3px; position: relative; padding-left: 14px;
}
body.sg .section-head h2::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--sg-honey-2) 0%, var(--sg-honey) 100%);
}
body.sg .section-head p { color: #6F6250; padding-left: 14px; }

/* Botones */
body.sg .btn-primary {
  background: linear-gradient(135deg, var(--sg-honey) 0%, var(--sg-honey-2) 100%);
  color: #fff; box-shadow: 0 4px 14px rgba(138,91,0,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
body.sg .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 6px 20px rgba(138,91,0,.34); }
body.sg .btn-ghost { border-color: var(--sg-line); color: var(--sg-ink); background: #fff; }
body.sg .btn-ghost:hover { border-color: var(--sg-honey); color: var(--sg-honey); background: var(--sg-cream); }
body.sg .btn-ghost-amber { border-color: rgba(224,161,6,.55); color: #8A5B00; background: var(--sg-sand); }

/* Tarjetas */
body.sg .card, body.sg .sg-card, body.sg .sg-kpi, body.sg .sg-proc, body.sg .sg-det {
  border-color: var(--sg-line); border-radius: 18px; box-shadow: var(--sg-shadow);
}
body.sg .sg-card__t {
  color: var(--sg-honey); display: flex; align-items: center; gap: 8px;
  padding-bottom: 9px; border-bottom: 1px solid var(--sg-cream-2); margin-bottom: 14px;
}
body.sg .sg-card__t i {
  width: 24px; height: 24px; border-radius: 7px; background: var(--sg-cream); color: var(--sg-honey);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}

/* KPI: numeral grande, barra bronce a la izquierda */
body.sg .sg-kpi { position: relative; overflow: hidden; padding: 16px 18px 15px 20px; }
body.sg .sg-kpi::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--sg-honey-3), var(--sg-honey-2));
}
body.sg .sg-kpi:hover { border-color: var(--sg-honey-2); box-shadow: var(--sg-shadow-lg); }
body.sg .sg-kpi__l { color: #6B7A76; }
body.sg .sg-kpi__l i { width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--sg-cream); font-size: 10px; }
body.sg .sg-kpi__v { color: var(--sg-ink); font-size: 30px; letter-spacing: -.8px; }
body.sg .sg-kpi__s { color: #8A9793; }

/* Tarjetas de proceso */
body.sg .sg-proc { position: relative; padding: 16px 18px; }
body.sg .sg-proc::after {
  content: '\f054'; font: 900 10px 'Font Awesome 6 Free'; position: absolute; right: 16px; top: 18px;
  color: var(--sg-cream-2); transition: color .15s, transform .15s;
}
body.sg .sg-proc:hover { border-color: var(--sg-honey-2); box-shadow: var(--sg-shadow-lg); }
body.sg .sg-proc:hover::after { color: var(--sg-honey); transform: translateX(3px); }
body.sg .sg-proc__slug { background: var(--sg-honey); }
body.sg .sg-chip--n { background: var(--sg-cream); color: var(--sg-honey); }

/* Tablas */
body.sg .hist-table-wrap { border-color: var(--sg-line); border-radius: 18px; }
body.sg .hist-table thead th { background: var(--sg-cream); color: var(--sg-honey); letter-spacing: .6px; }
body.sg .hist-table tbody tr:hover { background: #F4F9F7; }
body.sg .pl-search { border-color: var(--sg-line); }
body.sg .pl-search:focus-within { border-color: var(--sg-honey); box-shadow: 0 0 0 3px rgba(138,91,0,.12); }
body.sg .pl-filter { border-color: var(--sg-line); }
body.sg .pl-result-bar { color: #6F6250; }

/* Migas de pan */
body.sg .sg-bc a { color: var(--sg-honey); }
body.sg .sg-bc a:hover { color: var(--sg-honey-2); }

/* Hero del riesgo: verde profundo con trama sutil y esquina bronce */
body.sg .sg-hero {
  position: relative; overflow: hidden; border-radius: 22px; padding: 24px 28px;
  background:
    radial-gradient(520px 220px at 100% 0%, rgba(245,194,66,.22), transparent 60%),
    linear-gradient(120deg, var(--sg-honey-deep) 0%, var(--sg-honey) 60%, var(--sg-honey-2) 100%);
  box-shadow: var(--sg-shadow-lg);
}
body.sg .sg-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background-image: radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.4px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 40%, #000 100%);
}
body.sg .sg-hero::after {
  content: ''; position: absolute; left: 28px; right: 28px; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--sg-honey-2), transparent);
}
body.sg .sg-hero__id { font-size: 24px; letter-spacing: .4px; text-shadow: 0 2px 8px rgba(0,0,0,.18); }
body.sg .sg-hero__m span { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(4px); }
body.sg .sg-hero__m span.is-gestion { background: rgba(245,194,66,.28); border-color: rgba(245,194,66,.5); color: #fff; }

/* Evidencias como línea de tiempo */
body.sg .sg-timeline { position: relative; padding-left: 6px; }
body.sg .sg-timeline::before {
  content: ''; position: absolute; left: 22px; top: 12px; bottom: 12px; width: 2px;
  background: linear-gradient(180deg, var(--sg-cream-2), transparent);
}
body.sg .sg-ev { border-bottom: none; padding: 10px 0 14px; }
body.sg .sg-ev__i {
  width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--sg-honey);
  border: 2px solid var(--sg-cream-2); box-shadow: 0 0 0 4px #fff; position: relative; z-index: 1;
}
body.sg .sg-ev:first-child .sg-ev__i { border-color: var(--sg-honey-2); color: #8A5B00; }
body.sg .sg-ev__t { color: var(--sg-ink); }
body.sg .sg-ev__m { color: #8A9793; }
body.sg .sg-ev__a {
  background: #F7FAF9; border: 1px solid var(--sg-line); border-radius: 10px; padding: 9px 12px; margin-top: 7px;
}
body.sg .sg-ev a { color: var(--sg-honey) !important; }
body.sg .sg-solo-lectura { background: var(--sg-sand); color: #8A5B00; }

/* Formulario de evidencia */
body.sg #ev-form { background: #F7FAF9 !important; border-color: var(--sg-line) !important; border-radius: 14px !important; }
body.sg .form-input:focus, body.sg .form-select:focus, body.sg .form-textarea:focus {
  border-color: var(--sg-honey); box-shadow: 0 0 0 3px rgba(138,91,0,.12);
}

/* Estados vacíos con más presencia */
body.sg .sg-empty { color: #7A8985; }
body.sg .sg-empty i {
  width: 64px; height: 64px; border-radius: 20px; background: var(--sg-cream); color: var(--sg-honey);
  display: inline-flex; align-items: center; justify-content: center; font-size: 24px; opacity: 1; margin-bottom: 14px;
}
body.sg .sg-empty strong { color: var(--sg-ink); }

/* Encabezado del tablero */
body.sg .sg-bienvenida {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--sg-line); border-radius: 18px; padding: 14px 18px; margin-bottom: 18px;
  box-shadow: var(--sg-shadow);
}
body.sg .sg-bienvenida__t { font-size: 13px; color: #6F6250; }
body.sg .sg-bienvenida__t b { color: var(--sg-ink); }
body.sg .sg-rol {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase; border-radius: 20px; padding: 4px 12px;
}
body.sg .sg-rol--admin  { background: var(--sg-honey); color: #fff; }
body.sg .sg-rol--lider  { background: var(--sg-sand); color: #8A5B00; border: 1px solid rgba(224,161,6,.45); }
body.sg .sg-rol--lector { background: var(--sg-cream); color: var(--sg-honey); }

/* Matriz de calor (mismo componente, tono del módulo en la celda activa) */
body.sg .pi-mat-cell.is-active { box-shadow: 0 0 0 3px rgba(138,91,0,.35), 0 8px 28px rgba(0,0,0,.35); }

/* Toast */
body.sg #gm-toast-wrap > div { border-left: 4px solid var(--sg-honey-2); }

/* Responsive: el aside oscuro en móvil ya lo pliega el shell; aquí solo aire */
@media (max-width: 720px) {
  body.sg .section-head h2 { font-size: 19px; }
  body.sg .sg-hero { padding: 18px 18px 20px; border-radius: 16px; }
  body.sg .sg-hero__id { font-size: 20px; }
}