/*
 * launcher-centros.css — F126
 * Launcher grid tipo Mission Control para portales de centros (Cobán, Salamá, Petén).
 * Fondo: foto opcional + overlay del color del centro al 80% opacidad.
 * Colores por centro (data-centro): coban #14b8a6, salama #6366f1, peten #f97316.
 */

/* F127e · Login del centro con fondo del color propio (glass card sobre gradient) */
body[data-centro="coban"] #login-view.login-screen { background: #14b8a6 !important; }
body[data-centro="salama"] #login-view.login-screen { background: #6366f1 !important; }
body[data-centro="peten"] #login-view.login-screen { background: #f97316 !important; }

/* Card blanca del login queda como está pero con sombra más pro */
body[data-centro] #login-view.login-screen .login-card {
  box-shadow: 0 32px 80px -20px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

/* Ícono del centro con gradient del color */
body[data-centro="coban"] #login-view .login-icon { background: #14b8a6 !important; color: #fff !important; box-shadow: 0 12px 24px -6px rgba(15, 118, 110, 0.4) !important; }
body[data-centro="salama"] #login-view .login-icon { background: #6366f1 !important; color: #fff !important; box-shadow: 0 12px 24px -6px rgba(67, 56, 202, 0.4) !important; }
body[data-centro="peten"] #login-view .login-icon { background: #f97316 !important; color: #fff !important; box-shadow: 0 12px 24px -6px rgba(194, 65, 12, 0.4) !important; }

/* Botón "Ingresar al Sistema" con contraste correcto */
body[data-centro="coban"] #login-view .btn-primary { background: #0f766e !important; border-color: #0f766e !important; color: #fff !important; }
body[data-centro="salama"] #login-view .btn-primary { background: #4338ca !important; border-color: #4338ca !important; color: #fff !important; }
body[data-centro="peten"] #login-view .btn-primary { background: #c2410c !important; border-color: #c2410c !important; color: #fff !important; }
body[data-centro] #login-view .btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* F127a · Ocultar FAB, cerrar sesión y topbar del centro durante el login */
body:not(.gk-centro-launcher-mode):not(.gk-centro-module-mode) .gk-centro-topbar,
body:not(.gk-centro-launcher-mode):not(.gk-centro-module-mode) .gk-logout-btn-centro,
body:not(.gk-centro-launcher-mode):not(.gk-centro-module-mode) #vm-fab-new-centro,
body:not(.gk-centro-launcher-mode):not(.gk-centro-module-mode) .gk-centro-module-close,
body:not(.gk-centro-launcher-mode):not(.gk-centro-module-mode) #global-search,
body:not(.gk-centro-launcher-mode):not(.gk-centro-module-mode) .smart-search-bar { display: none !important; }

/* F127f · Ocultar buscador global (wrapper completo) en launcher-mode — queda solapado con topbar pill */
body.gk-centro-launcher-mode .smart-search-bar { display: none !important; }


/* Body neutro cuando estamos en launcher-mode (oculta sidebar del centro) */
body.gk-centro-launcher-mode .app-layout { display: block !important; padding: 0 !important; max-width: none !important; margin: 0 !important; }
body.gk-centro-launcher-mode .sidebar { display: none !important; }
body.gk-centro-launcher-mode .main-content { padding: 0 !important; max-width: none !important; margin: 0 !important; width: 100% !important; min-height: 100vh; background: transparent !important; }

/* F127a: Ocultar widgets F30 (buscar, notif, cmd, mobile-nav) en launcher del centro */
body.gk-centro-launcher-mode .f30-topbar,
body.gk-centro-launcher-mode .f30-notif-panel,
body.gk-centro-launcher-mode .f30-cmd,
body.gk-centro-launcher-mode .f30-mobile-bottom { display: none !important; }

/* ── LAUNCHER container ── */
#section-home.gk-launcher-centro {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 40px 40px;
  overflow: hidden;
  isolation: isolate;
  max-width: none;
  margin: 0;
  animation: gkCenLauncherIn .4s cubic-bezier(.22, 1, .36, 1);
}
@keyframes gkCenLauncherIn {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}

/* Colores base por centro (fallback si no hay foto) */
#section-home.gk-launcher-centro[data-centro="coban"]  { background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%); }
#section-home.gk-launcher-centro[data-centro="salama"] { background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); }
#section-home.gk-launcher-centro[data-centro="peten"]  { background: linear-gradient(135deg, #f97316 0%, #c2410c 100%); }

/* Fondo con foto (si existe) — cover, blur ligero */
.gk-launcher-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
  filter: saturate(1.15);
}

/* Overlay del color del centro al 80% — hace que el color domine y la foto se vea sutil */
.gk-launcher-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
#section-home.gk-launcher-centro[data-centro="coban"]  .gk-launcher-overlay { background: linear-gradient(135deg, rgba(20, 184, 166, 0.82) 0%, rgba(15, 118, 110, 0.88) 100%); }
#section-home.gk-launcher-centro[data-centro="salama"] .gk-launcher-overlay { background: linear-gradient(135deg, rgba(99, 102, 241, 0.82) 0%, rgba(67, 56, 202, 0.88) 100%); }
#section-home.gk-launcher-centro[data-centro="peten"]  .gk-launcher-overlay { background: linear-gradient(135deg, rgba(249, 115, 22, 0.82) 0%, rgba(194, 65, 12, 0.88) 100%); }

/* Un degradado sutil arriba para más contraste con la topbar */
.gk-launcher-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.08) 100%);
  pointer-events: none;
}

/* Hero centrado */
#section-home.gk-launcher-centro .gk-launcher-hero {
  text-align: center;
  margin: 40px auto 40px;
  max-width: 640px;
  color: #ffffff;
}
#section-home.gk-launcher-centro .gk-launcher-eyebrow {
  font-family: 'Inter', 'Sora', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 12px;
}
#section-home.gk-launcher-centro .gk-launcher-title {
  font-family: 'Inter', 'Sora', system-ui, sans-serif;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #ffffff;
  line-height: 1.1;
  margin: 0 0 8px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}
#section-home.gk-launcher-centro .gk-launcher-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  margin: 0;
}

/* Grid de tiles */
#section-home.gk-launcher-centro .gk-launcher-grid {
  display: grid;
  grid-template-columns: repeat(4, 140px);
  gap: 30px;
  justify-content: center;
  margin: 0 auto;
  max-width: 900px;
}

/* Tile */
#section-home.gk-launcher-centro .gk-lt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Inter', 'Sora', system-ui, sans-serif;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
#section-home.gk-launcher-centro .gk-lt:hover { transform: translateY(-4px); }
#section-home.gk-launcher-centro .gk-lt:hover .gk-lt-tile {
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.12);
}
#section-home.gk-launcher-centro .gk-lt:active .gk-lt-tile { transform: scale(0.96); }

#section-home.gk-launcher-centro .gk-lt-tile {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.24), 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: box-shadow .25s cubic-bezier(.2, .8, .2, 1), transform .15s cubic-bezier(.2, .8, .2, 1);
}
#section-home.gk-launcher-centro .gk-lt-tile svg {
  width: 46px;
  height: 46px;
  stroke: var(--ct-b, #17123a);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#section-home.gk-launcher-centro .gk-lt-label {
  font-size: 12.5px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
  text-align: center;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Badge de conteo */
#section-home.gk-launcher-centro .gk-lt-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 900;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px -2px rgba(239, 68, 68, 0.5);
  border: 3px solid rgba(0, 0, 0, 0.05);
}
#section-home.gk-launcher-centro .gk-lt-badge:empty,
#section-home.gk-launcher-centro .gk-lt-badge:contains("0") { display: none; }

/* Gradientes por tile */
/* KIT diseno-vimedia (28/07/26): launcher UN-ACENTO — tiles BLANCAS (patrón
   aprobado del launcher SaaS), ícono en el color del centro. Nada multicolor. */
#section-home.gk-launcher-centro .gk-lt-tile { background: #ffffff; }

/* F135.0 · badge "abre en pestaña" del tile catálogo público (mismo patrón que empleados) */
#section-home.gk-launcher-centro .gk-lt-catalogo-pub .gk-lt-tile { position: relative; }
#section-home.gk-launcher-centro .gk-lt-catalogo-pub .gk-lt-tile::after {
  content: '';
  position: absolute; top: 10px; right: 10px; width: 14px; height: 14px;
  background: rgba(255,255,255,0.9);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: .85; pointer-events: none;
}

/* Counter widget compacto abajo del grid */
#section-home.gk-launcher-centro .counter-widget:not(.hidden) {
  margin: 30px auto 0;
  max-width: 560px;
  padding: 14px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  display: flex;
  gap: 14px;
  align-items: center;
}
#section-home.gk-launcher-centro .counter-widget .counter-widget-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.7);
}
#section-home.gk-launcher-centro .counter-widget .counter-widget-number {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
}
#section-home.gk-launcher-centro .counter-widget .counter-widget-detail,
#section-home.gk-launcher-centro .counter-widget .counter-widget-period {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
}

/* Botón "Cerrar sesión" arriba derecha — usa mismo gk-logout-btn del empleados */
.gk-logout-btn-centro {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-family: 'Inter', 'Sora', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: background .15s cubic-bezier(.2,.8,.2,1), transform .15s cubic-bezier(.2,.8,.2,1), border-color .15s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.gk-logout-btn-centro:hover {
  background: rgba(220, 38, 38, 0.85);
  border-color: rgba(220, 38, 38, 0.9);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.35);
}
.gk-logout-btn-centro svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.gk-centro-launcher-mode .gk-logout-btn-centro { display: inline-flex; }
body:not(.gk-centro-launcher-mode) .gk-logout-btn-centro { display: none; }

/* Top-bar identidad del centro (arriba izquierda) */
.gk-centro-topbar {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-family: 'Inter', 'Sora', system-ui, sans-serif;
}
.gk-centro-topbar-avatar {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.22);
  font-weight: 900; font-size: 13px;
}
.gk-centro-topbar-name {
  font-size: 12.5px; font-weight: 800; letter-spacing: -0.01em;
}
.gk-centro-topbar-sub {
  font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, 0.7);
}
body.gk-centro-launcher-mode .gk-centro-topbar { display: inline-flex; }
body:not(.gk-centro-launcher-mode) .gk-centro-topbar { display: none; }

/* FAB "Nueva Solicitud" — más visible que el default (usa color del centro) */
body.gk-centro-launcher-mode .vm-fab,
body.gk-centro-launcher-mode #btn-new-dashboard.vm-fab {
  display: inline-flex !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   F127b · MODO MÓDULO ABIERTO — sidebar rail 88px + section como modal centrado
   con backdrop blur del launcher detrás. Patrón F125 aplicado a centros.
   ═══════════════════════════════════════════════════════════════════════ */
body.gk-centro-module-mode { overflow: hidden; }

/* Sidebar del centro (original) → rail 88px */
body.gk-centro-module-mode .sidebar {
  display: flex !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important; bottom: 0 !important;
  width: 88px !important;
  min-width: 88px !important; max-width: 88px !important;
  padding: 16px 6px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-right: 1px solid var(--gk-ln, #e4e4e7) !important;
  z-index: 800 !important;
  overflow-y: auto; overflow-x: hidden;
  flex-direction: column !important;
  gap: 6px;
  align-items: center !important;
}
/* Ocultar branding + labels de nav en modo rail (solo iconos) */
body.gk-centro-module-mode .sidebar .sidebar-brand,
body.gk-centro-module-mode .sidebar .sidebar-nav .nav-badge,
body.gk-centro-module-mode .sidebar .sidebar-footer > *:not(.gk-rail-inject),
body.gk-centro-module-mode .sidebar .nav-item > *:not(i),
body.gk-centro-module-mode .sidebar .sidebar-nav > span,
body.gk-centro-module-mode .sidebar .sidebar-header { display: none !important; }
body.gk-centro-module-mode .sidebar .nav-item {
  width: 60px !important; height: 60px !important;
  border-radius: 14px !important;
  padding: 0 !important;
  display: grid !important; place-items: center !important;
  font-size: 0 !important; /* F127f: colapsa text-node " Inicio" que va sin span */
  gap: 0 !important;
  margin: 3px 0 !important;
  color: var(--gk-ink2, #3f3f46) !important;
  background: transparent !important;
  transition: all .15s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
  white-space: nowrap;
}
body.gk-centro-module-mode .sidebar .nav-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  transform: scale(1.06);
}
body.gk-centro-module-mode .sidebar .nav-item.active {
  color: #ffffff !important;
  transform: scale(1.06);
}
body[data-centro="coban"].gk-centro-module-mode .sidebar .nav-item.active { background: #14b8a6 !important; }
body[data-centro="salama"].gk-centro-module-mode .sidebar .nav-item.active { background: #6366f1 !important; }
body[data-centro="peten"].gk-centro-module-mode .sidebar .nav-item.active { background: #f97316 !important; }
body.gk-centro-module-mode .sidebar .nav-item i { font-size: 20px !important; }
/* Botón "Inicio" arriba del rail (usa el nav-home existente) */
body.gk-centro-module-mode .sidebar #nav-home {
  background: var(--gk-sur2, #f1f1f4) !important;
  color: var(--gk-ink2, #3f3f46) !important;
  border-radius: 14px !important;
  margin-bottom: 8px !important;
}
body.gk-centro-module-mode .sidebar #nav-home::after {
  content: '';
  display: block;
  width: 40px; height: 1px;
  background: var(--gk-ln, #e4e4e7);
  margin: 8px 0;
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
}
body.gk-centro-module-mode .sidebar #btn-logout { display: none !important; }

/* Main content ocupa el resto con backdrop blur (module modal) */
body.gk-centro-module-mode .main-content {
  position: fixed !important;
  top: 0 !important;
  left: 88px !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 40px !important;
  overflow-y: auto;
  z-index: 700 !important;
  background: rgba(10, 10, 15, 0.35) !important;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  max-width: none !important;
  margin: 0 !important;
}

/* Cada section abierta como modal centrado dentro del main */
body.gk-centro-module-mode .main-content > [id^="section-"]:not(.hidden):not(#section-home) {
  background: var(--gk-sur, #ffffff) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.32), 0 4px 16px -4px rgba(0, 0, 0, 0.16) !important;
  padding: 32px 36px !important;
  max-width: clamp(1280px, calc(100vw - 200px), 2200px) !important; /* F132+F134 */
  width: 100% !important;
  margin: 0 auto !important;
  min-height: calc(100vh - 80px);
  animation: gkModalIn .28s cubic-bezier(.22, 1, .36, 1);
  position: relative;
  z-index: 1;
}

/* Ocultar F30 en module-mode también */
body.gk-centro-module-mode .f30-topbar,
body.gk-centro-module-mode .f30-notif-panel,
body.gk-centro-module-mode .f30-cmd,
body.gk-centro-module-mode .f30-mobile-bottom { display: none !important; }

/* Botón "X" flotante arriba der para volver al escritorio del centro */
.gk-centro-module-close {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 950;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border: none;
  color: var(--gk-ink2, #3f3f46);
  cursor: pointer;
  display: none;
  place-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all .15s cubic-bezier(.2,.8,.2,1);
}
body.gk-centro-module-mode .gk-centro-module-close { display: grid; }
.gk-centro-module-close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; }
.gk-centro-module-close:hover {
  background: #efeff1;
  color: #111214;
  transform: scale(1.04);
}

/* Fix contraste: botones con texto oscuro sobre fondo blanco quedan legibles */
body.gk-centro-module-mode .main-content .btn-primary {
  color: #ffffff !important;
}
body[data-centro="coban"].gk-centro-module-mode .main-content .btn-primary { background: #0f766e !important; border-color: #0f766e !important; }
body[data-centro="salama"].gk-centro-module-mode .main-content .btn-primary { background: #4338ca !important; border-color: #4338ca !important; }
body[data-centro="peten"].gk-centro-module-mode .main-content .btn-primary { background: #c2410c !important; border-color: #c2410c !important; }
body.gk-centro-module-mode .main-content .btn-icon,
body.gk-centro-module-mode .main-content .btn-refresh {
  background: #ffffff !important;
  border: 1.5px solid #e4e4e7 !important;
  color: #3f3f46 !important;
}

/* Fix layout desbordes en portales centros */
body.gk-centro-module-mode .app-layout {
  display: block !important;
  overflow: visible !important;
}

/* Mobile responsive launcher */
@media (max-width: 700px) {
  #section-home.gk-launcher-centro { padding: 30px 16px 20px; }
  #section-home.gk-launcher-centro .gk-launcher-hero { margin: 20px auto 24px; }
  #section-home.gk-launcher-centro .gk-launcher-title { font-size: 28px; }
  #section-home.gk-launcher-centro .gk-launcher-grid {
    grid-template-columns: repeat(3, 108px);
    gap: 18px;
  }
  #section-home.gk-launcher-centro .gk-lt-tile { width: 108px; height: 108px; border-radius: 20px; }
  #section-home.gk-launcher-centro .gk-lt-tile svg { width: 38px; height: 38px; }
  #section-home.gk-launcher-centro .gk-lt-label { font-size: 11.5px; }
  .gk-logout-btn-centro { top: 12px; right: 12px; padding: 8px 12px; font-size: 11.5px; }
  .gk-logout-btn-centro span { display: none; }
  .gk-centro-topbar { top: 12px; left: 12px; padding: 4px 10px 4px 4px; }
  .gk-centro-topbar-avatar { width: 26px; height: 26px; font-size: 11px; }
  .gk-centro-topbar-name { font-size: 11px; }
  .gk-centro-topbar-sub { display: none; }
}
@media (max-width: 480px) {
  #section-home.gk-launcher-centro .gk-launcher-grid {
    grid-template-columns: repeat(2, 120px);
    gap: 16px;
  }
  #section-home.gk-launcher-centro .gk-lt-tile { width: 120px; height: 120px; }
}
@media (max-width: 900px) {
  body.gk-centro-module-mode .sidebar {
    width: 68px !important;
    min-width: 68px !important; max-width: 68px !important;
    padding: 10px 4px !important;
  }
  body.gk-centro-module-mode .sidebar .nav-item {
    width: 52px !important; height: 52px !important;
    font-size: 0 !important; /* F127i fix: 18px acá hacía visibles los labels en mobile */
  }
  body.gk-centro-module-mode .sidebar .nav-item i { font-size: 18px !important; }
  body.gk-centro-module-mode .main-content {
    left: 68px !important;
    padding: 16px !important;
  }
  body.gk-centro-module-mode .main-content > [id^="section-"]:not(.hidden):not(#section-home) {
    border-radius: 12px !important;
    padding: 20px 16px !important;
    min-height: calc(100vh - 32px);
  }
}
@media (max-width: 600px) {
  body.gk-centro-module-mode .main-content > [id^="section-"]:not(.hidden):not(#section-home) {
    padding: 14px 10px !important;
    border-radius: 8px !important;
  }
  .gk-centro-module-close { top: 12px; right: 12px; width: 38px; height: 38px; }
}

@keyframes gkModalIn {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   F127f · FIX CONTRASTE + SIDEBAR RAIL COLAPSA (07/09/26)
   ============================================================
   Bugs vistos en screenshots:
   - .gk-centro-topbar y .gk-logout-btn-centro con fondo rgba(255,255,255,0.14) → invisibles sobre blanco
   - Sidebar rail 88px NO colapsa labels ("Inicio", "Pedidos 0" recortados feos)
   - Sidebar-brand muestra "CB · Centro Cobán · INTECAP Norte" completo en rail
   ============================================================ */

/* Topbar centro con fondo del centro (glass sólido, no transparente) */
.gk-centro-topbar {
  background: rgba(94, 44, 237, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 10px 28px -8px rgba(94, 44, 237, 0.4), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(10px) saturate(140%);
  color: #fff !important;
}
.gk-centro-topbar-name, .gk-centro-topbar-sub { color: #fff !important; }
.gk-centro-topbar-avatar {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

/* Logout con color del centro (contraste alto) */
.gk-logout-btn-centro {
  background: rgba(94, 44, 237, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px -8px rgba(94, 44, 237, 0.45), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: blur(10px);
}
.gk-logout-btn-centro:hover { transform: translateY(-1px); filter: brightness(1.05); }
.gk-logout-btn-centro svg { stroke: #fff !important; }
.gk-logout-btn-centro span { color: #fff !important; }

/* Per-centro overrides: topbar + logout usan el color del centro (más consistente con el fondo) */
body[data-centro="coban"] .gk-centro-topbar {
  background: rgba(20, 184, 166, 0.95) !important;
  box-shadow: 0 10px 28px -8px rgba(15, 118, 110, 0.5), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
body[data-centro="salama"] .gk-centro-topbar {
  background: rgba(99, 102, 241, 0.95) !important;
  box-shadow: 0 10px 28px -8px rgba(67, 56, 202, 0.5), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
body[data-centro="peten"] .gk-centro-topbar {
  background: rgba(249, 115, 22, 0.95) !important;
  box-shadow: 0 10px 28px -8px rgba(194, 65, 12, 0.5), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
body[data-centro="coban"] .gk-logout-btn-centro {
  background: #14b8a6 !important;
  box-shadow: 0 10px 24px -8px rgba(15, 118, 110, 0.55), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}
body[data-centro="salama"] .gk-logout-btn-centro {
  background: #6366f1 !important;
  box-shadow: 0 10px 24px -8px rgba(67, 56, 202, 0.55), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}
body[data-centro="peten"] .gk-logout-btn-centro {
  background: #f97316 !important;
  box-shadow: 0 10px 24px -8px rgba(194, 65, 12, 0.55), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* ─── SIDEBAR RAIL en module-mode: colapsa labels, brand, footer ─── */
body.gk-centro-module-mode .sidebar-brand-text,
body.gk-centro-module-mode .sidebar-brand-sub,
body.gk-centro-module-mode .sidebar-brand > div:not(.sidebar-brand-icon),
body.gk-centro-module-mode .nav-section-label,
body.gk-centro-module-mode #banner-widget-centro,
body.gk-centro-module-mode #center-pill {
  display: none !important;
}
body.gk-centro-module-mode .sidebar-brand {
  justify-content: center !important;
  padding: 18px 0 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  gap: 0 !important;
}
body.gk-centro-module-mode .sidebar-brand-icon {
  margin: 0 !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 14px !important;
  border-radius: 12px !important;
}
body.gk-centro-module-mode .sidebar-nav {
  padding: 10px 0 !important;
  gap: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
body.gk-centro-module-mode .nav-item {
  justify-content: center !important;
  align-items: center !important;
  padding: 12px 0 !important;
  gap: 0 !important;
  font-size: 0 !important;
  width: 56px !important;
  height: 44px !important;
  border-radius: 12px !important;
  position: relative !important;
  color: rgba(255, 255, 255, 0.72) !important;
  background: transparent !important;
}
body.gk-centro-module-mode .nav-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}
body.gk-centro-module-mode .nav-item > i {
  font-size: 18px !important;
  width: 18px !important;
  color: inherit !important;
}
body.gk-centro-module-mode .nav-item > svg {
  width: 18px !important;
  height: 18px !important;
}
body.gk-centro-module-mode .nav-item .nav-badge {
  position: absolute !important;
  top: 4px !important;
  right: 6px !important;
  font-size: 9px !important;
  min-width: 14px !important;
  padding: 1px 4px !important;
  line-height: 1.2 !important;
}
body.gk-centro-module-mode .sidebar-footer {
  padding: 12px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}
body.gk-centro-module-mode .sidebar-footer > * {
  font-size: 0 !important;
  padding: 10px 0 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.7) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
}
body.gk-centro-module-mode .sidebar-footer > *:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}
body.gk-centro-module-mode .sidebar-footer > * > i {
  font-size: 16px !important;
}

/* Modal card del módulo: más padding y sección centrada */
body.gk-centro-module-mode .main-content > [id^="section-"]:not(.hidden):not(#section-home) {
  padding: 36px 42px !important;
  margin: 0 auto !important;
}

/* ============================================================
   F127i · MOBILE = APP REAL — PORTALES CENTROS (07/09/26)
   ============================================================
   - Launcher: tiles + topbar pill + logout + FAB (home de app).
   - Módulo abierto: BOTTOM BAR con los iconos del sidebar,
     contenido full-width, solo la X flotante arriba.
   Este bloque vive al FINAL del archivo para ganar la cascada
   sobre el rail desktop F127b.
   ============================================================ */

/* En modo módulo la X es el único botón flotante (desktop y móvil):
   la topbar pill y el logout viven solo en el escritorio */
body.gk-centro-module-mode .gk-centro-topbar,
body.gk-centro-module-mode .gk-logout-btn-centro { display: none !important; }

/* El hamburger nunca pinta nada: launcher usa tiles, módulo usa rail/bottom bar */
body.gk-centro-launcher-mode .mobile-toggle,
body.gk-centro-launcher-mode #mobile-toggle,
body.gk-centro-module-mode .mobile-toggle,
body.gk-centro-module-mode #mobile-toggle,
body.gk-centro-launcher-mode .sidebar-overlay,
body.gk-centro-module-mode .sidebar-overlay { display: none !important; }

@media (max-width: 700px) {

  /* ── 1 · BOTTOM BAR: el rail pasa abajo, horizontal, scrolleable ── */
  body.gk-centro-module-mode .sidebar {
    display: flex !important;
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 60px !important;
    max-height: 76px !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    transform: none !important;
    border-right: none !important;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.10) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 900 !important;
    background: rgba(255, 255, 255, 0.98) !important;
  }
  body.gk-centro-module-mode .sidebar::-webkit-scrollbar { display: none; }
  body.gk-centro-module-mode .sidebar .sidebar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: max-content !important;
    min-width: 100%;
    justify-content: center;
  }
  /* Icon-only blindado: el @media 900px de arriba re-declara font-size — acá se pisa de nuevo */
  body.gk-centro-module-mode .sidebar .nav-item {
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    font-size: 0 !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  body.gk-centro-module-mode .sidebar .nav-item i {
    font-size: 18px !important;
  }
  body.gk-centro-module-mode .sidebar .nav-item .nav-badge {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    font-size: 9px !important;
    min-width: 14px !important;
    height: 14px !important;
    line-height: 14px !important;
    padding: 0 4px !important;
  }
  body.gk-centro-module-mode .sidebar .sidebar-footer,
  body.gk-centro-module-mode .sidebar .nav-section-label,
  body.gk-centro-module-mode .sidebar .sidebar-brand,
  body.gk-centro-module-mode .sidebar .sidebar-banner { display: none !important; }

  /* ── 2 · Contenido full-width con aire para el bottom bar ── */
  body.gk-centro-module-mode .main-content {
    left: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    background: #f1f2f6 !important;
    backdrop-filter: none !important;
  }
  body.gk-centro-module-mode .main-content > [id^="section-"]:not(.hidden):not(#section-home) {
    border-radius: 0 !important;
    padding: 14px 12px 96px !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    box-shadow: none !important;
  }
  .gk-centro-module-close {
    top: 10px !important;
    right: 10px !important;
    width: 36px !important;
    height: 36px !important;
  }
  /* Sin buscador global en mobile (cada sección tiene el suyo) */
  body[data-centro] .smart-search-bar { display: none !important; }

  /* ── 3 · Topbar pill + logout compactos (solo se ven en launcher) ── */
  .gk-centro-topbar {
    padding: 6px 10px !important;
    gap: 8px !important;
    left: 12px !important;
    top: 10px !important;
    max-width: calc(100vw - 76px);
    border-radius: 999px !important;
  }
  .gk-centro-topbar-avatar { width: 28px !important; height: 28px !important; font-size: 12px !important; }
  .gk-centro-topbar-name { font-size: 12.5px !important; }
  .gk-centro-topbar-sub { font-size: 10px !important; }
  .gk-logout-btn-centro {
    padding: 8px !important;
    top: 10px !important;
    right: 12px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }
  .gk-logout-btn-centro span { display: none !important; }
  .gk-logout-btn-centro svg { width: 18px !important; height: 18px !important; }

  /* ── 4 · Inputs y chips compactos ── */
  #section-pedidos .input,
  #section-publicaciones .input,
  #section-catalogo .input,
  #search-input, #catalogo-search, #pub-search {
    height: 38px !important;
    min-height: 38px !important;
    padding: 8px 14px !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    box-shadow: none !important;
  }
  .chips {
    gap: 5px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 2px !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chips .chip,
  #pedidos-estado-chips .chip {
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    height: 26px !important;
    min-height: 26px !important;
    line-height: 1.2 !important;
    border-radius: 999px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start;
  }

  /* ── 5 · Cards: 2 columnas, altura del contenido (nunca cortadas) ── */
  #section-pedidos .sol-grid,
  #section-publicaciones .sol-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  #section-pedidos .sol-card,
  #section-publicaciones .sol-card {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 12px !important;
  }
  #section-pedidos .sol-card:not(.sol-card-has-bg),
  #section-publicaciones .sol-card:not(.sol-card-has-bg) {
    background: linear-gradient(150deg, #fbfaff 0%, #f0eefa 100%) !important;
  }

  /* Section header compacto */
  .section-header { padding: 10px 0 6px !important; }
  .section-header h1, .section-header h2 { font-size: 18px !important; }
  .btn-icon, .btn-sm { padding: 6px 10px !important; font-size: 12px !important; min-height: 32px !important; }

  /* FAB compacto (launcher) */
  #vm-fab-new-centro {
    width: 52px !important;
    height: 52px !important;
    bottom: 18px !important;
    right: 18px !important;
    font-size: 18px !important;
  }
}

@media (max-width: 380px) {
  #section-pedidos .sol-grid,
  #section-publicaciones .sol-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   F127j · HOVER NAV-ITEM = COLOR DEL CENTRO + ICONO BLANCO (09/07/26)
   El hover gris rgba(0,0,0,0.04) era invisible. Ahora hover = mismo
   gradient que el estado activo (teal/indigo/naranja), ícono blanco.
   Aplica en rail desktop y bottom bar mobile.
   ============================================================ */
body[data-centro="coban"].gk-centro-module-mode .sidebar .nav-item:hover {
  background: #14b8a6 !important;
  color: #ffffff !important;
}
body[data-centro="salama"].gk-centro-module-mode .sidebar .nav-item:hover {
  background: #6366f1 !important;
  color: #ffffff !important;
}
body[data-centro="peten"].gk-centro-module-mode .sidebar .nav-item:hover {
  background: #f97316 !important;
  color: #ffffff !important;
}
body[data-centro].gk-centro-module-mode .sidebar .nav-item:hover i {
  color: #ffffff !important;
}

/* ============================================================
   F127k · NAV-HOME CUADRADO EN BOTTOM BAR (09/07/26)
   El #nav-home traía margin-bottom + ::after (divider vertical del
   rail desktop) que lo deformaba en el bottom bar. En mobile queda
   cuadrado 46px como los demás y sin divider.
   (El ícono fa-grid-2 era PRO → no renderizaba; cambiado a fa-house
   en el HTML de los 3 portales.)
   ============================================================ */
@media (max-width: 700px) {
  body.gk-centro-module-mode .sidebar #nav-home {
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    flex: 0 0 auto !important;
    display: grid !important;
    place-items: center !important;
    font-size: 0 !important;
  }
  body.gk-centro-module-mode .sidebar #nav-home::after { display: none !important; }
}

/* ============================================================
   F127L · CENTRADO REAL DE ICONOS + CASA VISIBLE (09/07/26)
   Causa del descentrado: display:grid + el text-node fantasma
   " Inicio" (font-size 0) creaba una 2ª fila → ícono empujado arriba.
   Flex row centra de verdad (el texto de 0px no desplaza).
   La casa heredaba color blanco del tema oscuro del sidebar → forzado.
   Aplica desktop y mobile (va al final del archivo para ganar cascada).
   ============================================================ */
body.gk-centro-module-mode .sidebar .nav-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}
body.gk-centro-module-mode .sidebar #nav-home {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  background: #e8eaf0 !important;
  color: #3f3f46 !important;
}
body.gk-centro-module-mode .sidebar #nav-home i {
  color: #3f3f46 !important;
  font-size: 18px !important;
}
body.gk-centro-module-mode .sidebar #nav-home:hover i,
body[data-centro].gk-centro-module-mode .sidebar #nav-home:hover i {
  color: #ffffff !important;
}

/* F127L-b · Hover de la casa = color del centro. La regla del fondo gris usa
   #nav-home (ID): ningún selector de solo-clases puede pisarla, así que el
   hover se declara también con el ID y por centro. */
body[data-centro="coban"].gk-centro-module-mode .sidebar #nav-home:hover {
  background: linear-gradient(135deg, #14b8a6, #0f766e) !important;
  color: #ffffff !important;
}
body[data-centro="salama"].gk-centro-module-mode .sidebar #nav-home:hover {
  background: linear-gradient(135deg, #6366f1, #4338ca) !important;
  color: #ffffff !important;
}
body[data-centro="peten"].gk-centro-module-mode .sidebar #nav-home:hover {
  background: linear-gradient(135deg, #f97316, #c2410c) !important;
  color: #ffffff !important;
}

/* ============================================================
   F127m · BUSCADOR GLOBAL INTEGRADO EN DESKTOP (09/07/26)
   En module-mode desktop el .smart-search-bar era una franja gris
   full-width fuera del diseño. Ahora: pill compacto 300px flotante
   arriba-izquierda (simétrico con la X arriba-derecha).
   Solo ≥701px — en mobile sigue oculto (F127i).
   ============================================================ */
@media (min-width: 701px) {
  body.gk-centro-module-mode .smart-search-bar {
    position: fixed !important;
    top: 24px !important;
    left: 112px !important; /* 88px rail + 24px de aire */
    right: auto !important;
    width: 300px !important;
    max-width: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 750 !important;
    display: block !important;
  }
  body.gk-centro-module-mode .smart-search-bar > div {
    max-width: 300px !important;
    width: 300px !important;
  }
  body.gk-centro-module-mode .smart-search-bar #global-search {
    height: 40px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14) !important;
    font-size: 13px !important;
    padding: 0 16px 0 38px !important;
  }
  body.gk-centro-module-mode .smart-search-bar #global-search:focus {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
  }
  /* El dropdown de resultados hereda el ancho del pill */
  body.gk-centro-module-mode .smart-search-bar .search-dropdown {
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
  }
}

/* ============================================================
   F127n · CALIDEZ POR CENTRO EN MODULE-MODE (09/07/26)
   El gris neutro del backdrop/rail/cards se veía triste. Cada
   centro tiñe su módulo con su propio color: backdrop saturado,
   rail con gradiente sutil, cards vacías y tabs con tinte.
   ============================================================ */

/* Tokens de tinte por centro */
body[data-centro="coban"]  { --ct-a: #14b8a6; --ct-b: #0f766e; --ct-soft: rgba(20, 184, 166, 0.12); --ct-soft2: rgba(20, 184, 166, 0.055); }
body[data-centro="salama"] { --ct-a: #6366f1; --ct-b: #4338ca; --ct-soft: rgba(99, 102, 241, 0.12); --ct-soft2: rgba(99, 102, 241, 0.055); }
body[data-centro="peten"]  { --ct-a: #f97316; --ct-b: #c2410c; --ct-soft: rgba(249, 115, 22, 0.12); --ct-soft2: rgba(249, 115, 22, 0.055); }

/* 1 · Backdrop del módulo = color del centro (adiós gris) */
body[data-centro="coban"].gk-centro-module-mode .main-content {
  background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%) !important;
}
body[data-centro="salama"].gk-centro-module-mode .main-content {
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%) !important;
}
body[data-centro="peten"].gk-centro-module-mode .main-content {
  background: linear-gradient(135deg, #f97316 0%, #c2410c 100%) !important;
}

/* 2 · Rail con gradiente sutil hacia el color del centro */
body[data-centro].gk-centro-module-mode .sidebar {
  background: #ffffff !important;
  border-right: 1px solid var(--ct-soft, rgba(0,0,0,0.06)) !important;
}

/* 3 · El cuadro de trabajo queda BLANCO limpio — el color vive en el fondo */
body[data-centro].gk-centro-module-mode .main-content > [id^="section-"]:not(.hidden):not(#section-home) {
  background: #ffffff !important;
}

/* 4 · Cards sin imagen: tinte del centro, no gris azulado */
body[data-centro="coban"] #section-pedidos .sol-card:not(.sol-card-has-bg),
body[data-centro="coban"] #section-publicaciones .sol-card:not(.sol-card-has-bg) {
  background: #f5fbfa !important;
  border: 1px solid rgba(20, 184, 166, 0.14) !important;
}
body[data-centro="salama"] #section-pedidos .sol-card:not(.sol-card-has-bg),
body[data-centro="salama"] #section-publicaciones .sol-card:not(.sol-card-has-bg) {
  background: #f6f6fe !important;
  border: 1px solid rgba(99, 102, 241, 0.14) !important;
}
body[data-centro="peten"] #section-pedidos .sol-card:not(.sol-card-has-bg),
body[data-centro="peten"] #section-publicaciones .sol-card:not(.sol-card-has-bg) {
  background: #fefaf6 !important;
  border: 1px solid rgba(249, 115, 22, 0.14) !important;
}

/* 5 · Tabs Galería/Calendario: activa con tinte + borde del centro */
body[data-centro] .pub-vista-btn {
  border-radius: 14px !important;
  transition: all .18s ease;
}
body[data-centro] .pub-vista-btn.active {
  background: var(--ct-soft, #eef) !important;
  border: 1px solid var(--ct-a, #888) !important;
  color: var(--ct-b, #333) !important;
  box-shadow: 0 4px 14px -4px var(--ct-soft, rgba(0,0,0,0.1)) !important;
}
body[data-centro] .pub-vista-btn.active b,
body[data-centro] .pub-vista-btn.active i { color: var(--ct-b, #333) !important; }
body[data-centro] .pub-vista-btn:not(.active):hover {
  background: var(--ct-soft2, #f5f5f8) !important;
  border-color: var(--ct-soft, #ddd) !important;
}

/* 6 · Inputs al enfocar: anillo del color del centro */
body[data-centro].gk-centro-module-mode .input:focus,
body[data-centro].gk-centro-module-mode input.input:focus {
  border-color: var(--ct-a) !important;
  box-shadow: 0 0 0 3px var(--ct-soft) !important;
}

/* 7 · Chips hover con el color del centro */
body[data-centro].gk-centro-module-mode .chip:not(.active):hover {
  border-color: var(--ct-a) !important;
  color: var(--ct-b) !important;
  background: var(--ct-soft2) !important;
}

/* 8 · Banner del sidebar ilegible en rail 88px → oculto en module-mode (desktop) */
body[data-centro].gk-centro-module-mode .sidebar .sidebar-banner,
body[data-centro].gk-centro-module-mode .sidebar #sidebar-banner { display: none !important; }

/* ============================================================
   F127o · HOVER SIN RECORTE EN EL RAIL (09/07/26)
   .sidebar-nav medía exactamente 60px (el ancho del botón) con
   overflow:auto → el scale(1.06) del hover se recortaba a los
   costados. El wrapper ahora deja respirar; el scroll vertical
   lo maneja el .sidebar.
   ============================================================ */
@media (min-width: 701px) {
  body.gk-centro-module-mode .sidebar .sidebar-nav {
    overflow: visible !important;
    width: auto !important;
    max-width: none !important;
    padding: 10px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* ============================================================
   F127p · DISTRIBUCIÓN JERÁRQUICA EN PANTALLAS GRANDES (09/07/26)
   El launcher se veía apretado al centro con costados vacíos.
   Jerarquía: hero con aire → módulos protagonistas más grandes →
   contador abajo. En monitores anchos los 8 módulos se abren en
   UNA fila distribuida a lo ancho.
   ============================================================ */

/* Centrar verticalmente el conjunto (hero + grid + contador) */
#section-home.gk-launcher-centro {
  justify-content: center;
}

/* ≥1200px: todo más grande y con más aire */
@media (min-width: 1200px) {
  #section-home.gk-launcher-centro { padding: 48px 60px; }
  #section-home.gk-launcher-centro .gk-launcher-hero { margin: 0 auto 52px; max-width: 760px; }
  #section-home.gk-launcher-centro .gk-launcher-eyebrow { font-size: 12px; letter-spacing: 0.2em; }
  #section-home.gk-launcher-centro .gk-launcher-title { font-size: 44px; }
  #section-home.gk-launcher-centro .gk-launcher-sub { font-size: 15.5px; }
  #section-home.gk-launcher-centro .gk-launcher-grid {
    grid-template-columns: repeat(4, 168px);
    gap: 40px 56px;
    max-width: 1100px;
  }
  #section-home.gk-launcher-centro .gk-lt { gap: 14px; }
  #section-home.gk-launcher-centro .gk-lt-tile {
    width: 168px;
    height: 168px;
    border-radius: 30px;
  }
  #section-home.gk-launcher-centro .gk-lt-tile svg { width: 56px; height: 56px; }
  #section-home.gk-launcher-centro .gk-lt-label { font-size: 14.5px; }
  #section-home.gk-launcher-centro .counter-widget {
    margin-top: 52px;
    min-width: 560px;
    max-width: 720px;
  }
}

/* ≥1500px: los 8 módulos en UNA fila distribuida a lo ancho */
@media (min-width: 1500px) {
  #section-home.gk-launcher-centro .gk-launcher-grid {
    grid-template-columns: repeat(8, 148px);
    gap: 44px;
    max-width: none;
  }
  #section-home.gk-launcher-centro .gk-lt-tile {
    width: 148px;
    height: 148px;
    border-radius: 26px;
  }
  #section-home.gk-launcher-centro .gk-lt-tile svg { width: 50px; height: 50px; }
  #section-home.gk-launcher-centro .gk-lt-label { font-size: 13.5px; }
  #section-home.gk-launcher-centro .gk-launcher-hero { margin-bottom: 64px; }
  #section-home.gk-launcher-centro .counter-widget { margin-top: 64px; }
}

/* ============================================================
   F127q · CONTADOR MINI: SOLO CANTIDAD + FECHA (09/07/26)
   Pill compacto en una línea. Se ocultan label, detalle y el
   badge "PERÍODO VENCIDO" — cuando está vencido, la fecha se
   pinta rojiza (la señal persiste sin bulk). Aplica 3 centros.
   ============================================================ */
#section-home.gk-launcher-centro .counter-widget:not(.hidden) {
  display: inline-flex !important;
  margin: 36px auto 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 10px 24px !important;
  border-radius: 999px !important;
}
#section-home.gk-launcher-centro .counter-widget .counter-widget-body {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 0 !important;
}
#section-home.gk-launcher-centro .counter-widget .counter-widget-label,
#section-home.gk-launcher-centro .counter-widget .counter-widget-detail {
  display: none !important;
}
#section-home.gk-launcher-centro .counter-widget .counter-widget-number {
  font-size: 24px !important;
  line-height: 1 !important;
}
#section-home.gk-launcher-centro .counter-widget .counter-widget-period {
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  white-space: nowrap;
}
#section-home.gk-launcher-centro .counter-widget .counter-widget-vencido {
  display: none !important;
}
#section-home.gk-launcher-centro .counter-widget .counter-widget-period:has(.counter-widget-vencido) {
  color: #ffd4d4 !important;
  font-weight: 700 !important;
}

/* ── Header B · backport (22/07/26): logout icono-solo + fecha compacta + centrado + tiles (portales) ── */
.gk-logout-btn-centro { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
.gk-logout-btn-centro span { display: none; }
.gk-logout-btn-centro svg { width: 18px; height: 18px; }
.gk-topbar-date-centro {
  position: fixed; top: 20px; right: 74px; z-index: 900;
  display: inline-flex; align-items: center; height: 44px; padding: 0 16px;
  border-radius: 999px; background: rgba(255,255,255,.12);
  color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  pointer-events: none; white-space: nowrap;
}
body:not(.gk-centro-launcher-mode):not(.gk-centro-module-mode) .gk-topbar-date-centro { display: none; }
@media (max-width: 560px) { .gk-topbar-date-centro { display: none !important; } }

/* Grilla centrada SOLO en modo launcher (en module-mode el launcher es fondo y no reserva alto) */
body.gk-centro-launcher-mode #section-home.gk-launcher-centro {
  display: flex !important;
  flex-direction: column;
  min-height: 100dvh;
  box-sizing: border-box;
}
body.gk-centro-launcher-mode #section-home.gk-launcher-centro .gk-launcher-hero { flex-shrink: 0; }
body.gk-centro-launcher-mode #section-home.gk-launcher-centro .gk-launcher-grid { margin: auto !important; }
body.gk-centro-module-mode #section-home.gk-launcher-centro { min-height: 0 !important; height: auto !important; }

/* Tiles -20% + hover elevado */
@media (min-width: 901px) {
  #section-home.gk-launcher-centro .gk-lt-tile { width: 112px !important; height: 112px !important; border-radius: 19px !important; }
  #section-home.gk-launcher-centro .gk-lt-tile svg { width: 37px !important; height: 37px !important; }
}
@media (hover: hover) {
  #section-home.gk-launcher-centro .gk-lt { transition: transform .28s cubic-bezier(.34, 1.56, .64, 1) !important; }
  #section-home.gk-launcher-centro .gk-lt:hover,
  #section-home.gk-launcher-centro .gk-lt:focus-visible { transform: translateY(-12px) !important; }
  #section-home.gk-launcher-centro .gk-lt:hover .gk-lt-tile {
    box-shadow: 0 26px 48px -14px rgba(0, 0, 0, 0.45), 0 6px 14px rgba(0, 0, 0, 0.15) !important;
  }
}


/* ══ KIT diseno-vimedia (28/07/26) · portales de centros ══ */
/* tipografía unificada con empleados */
body[data-centro] { font-family: 'Geist', 'Sora', system-ui, -apple-system, sans-serif; }

/* nada aparece en seco: módulos y modales con fade suave */
@keyframes ctFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
body[data-centro].gk-centro-module-mode .main-content > [id^="section-"]:not(.hidden):not(#section-home) { animation: ctFade .2s ease both; }
body[data-centro] .modal.active .modal-content, body[data-centro] .modal[style*="flex"] .modal-content { animation: ctFade .22s ease both; }

/* feedback al presionar en solo-ícono del chrome */
.gk-centro-module-close:active, .gk-logout-btn-centro:active { transform: scale(.94); }


/* ══════════════════════════════════════════════════════════════════════════
   ORDEN 30/07 · FONDO BLANCO · portales de centro NORTE (Cobán · Salamá · Petén)
   Mismo espíritu que "ORDEN 29/07 · FONDO BLANCO" de modern.css (empleados).
   Canvas #ffffff: foto + velo del launcher fuera de vista; tiles blancas con
   hairline #e8e8ec y sombra suave; textos en tinta (#111214 / #6a6c72);
   chrome (identidad, fecha, power, X, FAB, buscador) = pastillas BLANCAS con
   borde #e3e4e7; module-mode con backdrop blanco y panel blanco.
   UN acento por pantalla = color del centro (--ct-a/--ct-b: iconos de tiles,
   avatar, nav activa, focos). El LOGIN (#login-view) NO se toca.
   Solo repintado CSS — cero cambios de markup/JS; !important únicamente donde
   la regla vieja ya lo traía. Este bloque vive al FINAL para ganar la cascada.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · CANVAS BLANCO — gradiente por centro, foto y velo fuera de vista */
body[data-centro].gk-centro-launcher-mode,
body[data-centro].gk-centro-module-mode { background: #ffffff; }
#section-home.gk-launcher-centro[data-centro] { background: #ffffff; }
#section-home.gk-launcher-centro .gk-launcher-bg,
#section-home.gk-launcher-centro .gk-launcher-overlay { display: none; }

/* 2 · HERO en tinta (antes blanco con sombra sobre el color) */
#section-home.gk-launcher-centro .gk-launcher-hero { color: #111214; }
#section-home.gk-launcher-centro .gk-launcher-eyebrow { color: #6a6c72; }
#section-home.gk-launcher-centro .gk-launcher-title { color: #111214; text-shadow: none; }
#section-home.gk-launcher-centro .gk-launcher-sub { color: #6a6c72; }

/* 3 · TILES blancas: hairline + sombra suave; ícono sigue en el color del
   centro (var(--ct-b), regla existente); label en tinta sin sombra */
#section-home.gk-launcher-centro .gk-lt-tile {
  background: #ffffff;
  border: 1px solid #e8e8ec;
  box-shadow: 0 6px 16px -8px rgba(17, 18, 20, 0.10), 0 1px 3px rgba(17, 18, 20, 0.05);
}
#section-home.gk-launcher-centro .gk-lt:hover .gk-lt-tile {
  border-color: #dcdde1;
  box-shadow: 0 16px 32px -14px rgba(17, 18, 20, 0.18), 0 3px 8px rgba(17, 18, 20, 0.06) !important; /* la vieja del hover elevado trae !important */
}
#section-home.gk-launcher-centro .gk-lt-label { color: #111214; text-shadow: none; }
/* el badge "abre en pestaña" era blanco → invisible sobre tile blanca */
#section-home.gk-launcher-centro .gk-lt-catalogo-pub .gk-lt-tile::after { background: #9a9ca3; }

/* 4 · CONTADOR del período: pastilla blanca bordeada, cifras en tinta */
#section-home.gk-launcher-centro .counter-widget:not(.hidden) {
  background: #ffffff;
  border: 1px solid #e3e4e7;
  box-shadow: 0 2px 10px rgba(17, 18, 20, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #111214;
}
#section-home.gk-launcher-centro .counter-widget .counter-widget-number { color: #111214; }
#section-home.gk-launcher-centro .counter-widget .counter-widget-label,
#section-home.gk-launcher-centro .counter-widget .counter-widget-detail { color: #6a6c72; }
#section-home.gk-launcher-centro .counter-widget .counter-widget-period { color: #6a6c72 !important; }
#section-home.gk-launcher-centro .counter-widget .counter-widget-period:has(.counter-widget-vencido) {
  color: #dc2626 !important; /* vencido: rojo legible sobre blanco (antes #ffd4d4) */
}

/* 5 · CHROME — pastillas BLANCAS con borde #e3e4e7 (antes glass/color del centro) */
/* 5a · Identidad del centro (arriba izquierda) */
body[data-centro] .gk-centro-topbar {
  background: #ffffff !important;
  border: 1px solid #e3e4e7 !important;
  box-shadow: 0 2px 10px rgba(17, 18, 20, 0.06) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #111214 !important;
}
.gk-centro-topbar-name { color: #111214 !important; }
.gk-centro-topbar-sub { color: #6a6c72 !important; }
.gk-centro-topbar-avatar {
  background: var(--ct-soft, #f1f2f4) !important; /* acento suave del centro */
  color: var(--ct-b, #111214) !important;
  border: 1px solid transparent !important;
}

/* 5b · Fecha compacta */
.gk-topbar-date-centro {
  background: #ffffff;
  border: 1px solid #e3e4e7;
  color: #6a6c72;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 2px 10px rgba(17, 18, 20, 0.06);
}

/* 5c · Power (cerrar sesión) */
body[data-centro] .gk-logout-btn-centro {
  background: #ffffff !important;
  border: 1px solid #e3e4e7 !important;
  color: #111214 !important;
  box-shadow: 0 2px 10px rgba(17, 18, 20, 0.06) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-centro] .gk-logout-btn-centro svg { stroke: #111214 !important; }
body[data-centro] .gk-logout-btn-centro:hover {
  background: #f7f7f8 !important;
  border-color: #a2a4aa !important;
  filter: none;
}

/* 5d · X volver al escritorio (module-mode) — su hover #efeff1 existente queda */
.gk-centro-module-close {
  background: #ffffff;
  border: 1px solid #e3e4e7;
  color: #111214;
  backdrop-filter: none;
  box-shadow: 0 2px 10px rgba(17, 18, 20, 0.08);
}

/* 5e · FAB Nueva Solicitud: ya era blanco con ícono del centro (style inline);
   hairline + sombra suave — !important para ganarle al style= del botón */
#vm-fab-new-centro {
  border: 1px solid #e3e4e7 !important;
  box-shadow: 0 10px 24px -10px rgba(17, 18, 20, 0.18), 0 2px 8px rgba(17, 18, 20, 0.08) !important;
}

/* 5f · Buscador flotante en module-mode: pastilla blanca + foco con acento */
body.gk-centro-module-mode .smart-search-bar #global-search {
  background: #ffffff !important;
  border: 1px solid #e3e4e7 !important;
  box-shadow: 0 2px 10px rgba(17, 18, 20, 0.06) !important;
}
body.gk-centro-module-mode .smart-search-bar #global-search:focus {
  border-color: var(--ct-a, #14b8a6) !important;
  box-shadow: 0 0 0 3px var(--ct-soft, rgba(20, 184, 166, 0.12)) !important;
}

/* 6 · MODULE-MODE — backdrop BLANCO (antes gradiente del centro; gris en móvil) */
body[data-centro].gk-centro-module-mode .main-content {
  background: #ffffff !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* rail: hairline neutra en lugar del tinte del centro */
body[data-centro].gk-centro-module-mode .sidebar { border-right: 1px solid #e8e8ec !important; }
/* panel del módulo: blanco (ya lo era) + hairline y sombra suave — solo desktop;
   en móvil el panel va full-bleed sin sombra (F127i) y no se toca */
@media (min-width: 701px) {
  body[data-centro].gk-centro-module-mode .main-content > [id^="section-"]:not(.hidden):not(#section-home) {
    border: 1px solid #e8e8ec;
    box-shadow: 0 10px 32px -12px rgba(17, 18, 20, 0.10), 0 2px 8px rgba(17, 18, 20, 0.05) !important;
  }
}

/* 7 · CARDS de Pedidos/Publicaciones sin imagen: blancas con hairline
   (antes tinte pastel por centro y gradiente lila en móvil) */
body[data-centro] #section-pedidos .sol-card:not(.sol-card-has-bg),
body[data-centro] #section-publicaciones .sol-card:not(.sol-card-has-bg) {
  background: #ffffff !important;
  border: 1px solid #e8e8ec !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   PANTALLA UNIFICADA · portales de empresa (31/07 · port del escritorio
   aprobado): buscador real al centro con el nombre del centro arriba ·
   puntos → panel de aplicaciones (el grid del launcher vive DENTRO de
   #section-home para conservar sus 44 reglas scoped) · config a la derecha
   con Cerrar sesión (power reubicado) · identidad compacta a la derecha.
   Todo reubicado, nada eliminado. Solo visible en launcher-mode.
   ══════════════════════════════════════════════════════════════════════════ */
.gk-uniC-dots, .gk-uniC-cfg-btn, .gk-uniC-search, .gk-uniC-brand, .gk-uniC-panel, .gk-uniC-results { display: none; }
body.gk-centro-launcher-mode .gk-uniC-dots,
body.gk-centro-launcher-mode .gk-uniC-cfg-btn { display: inline-flex; }
body.gk-centro-launcher-mode .gk-uniC-search { display: flex; }
body.gk-centro-launcher-mode .gk-uniC-brand { display: block; }
body.gk-centro-launcher-mode .gk-uniC-panel,
body.gk-centro-launcher-mode .gk-uniC-results { display: block; }

/* reubicados: hero → nombre grande central · power → menú config (item Cerrar sesión) */
body.gk-centro-launcher-mode .gk-launcher-hero { display: none; }
body.gk-centro-launcher-mode .gk-logout-btn-centro { display: none !important; }

/* identidad compacta a la derecha (el nombre y el depto viven arriba del buscador) */
body.gk-centro-launcher-mode .gk-centro-topbar {
  left: auto !important; right: 76px !important; top: 20px !important;
  width: 44px; height: 44px; padding: 0 !important;
  justify-content: center; border-radius: 14px; overflow: hidden;
}
body.gk-centro-launcher-mode .gk-centro-topbar-name,
body.gk-centro-launcher-mode .gk-centro-topbar-sub { display: none; }
/* fecha un paso más allá */
body.gk-centro-launcher-mode .gk-topbar-date-centro { right: 132px !important; }

/* puntos (izquierda) y engranaje (derecha) */
.gk-uniC-dots, .gk-uniC-cfg-btn {
  position: fixed; top: 20px; z-index: 960;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid #e3e4e7; color: #111214;
  cursor: pointer; align-items: center; justify-content: center;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.gk-uniC-dots { left: 20px; }
.gk-uniC-cfg-btn { right: 20px; }
.gk-uniC-dots:hover, .gk-uniC-cfg-btn:hover { background: #f7f7f8; border-color: #a2a4aa; }
.gk-uniC-dots:active, .gk-uniC-cfg-btn:active { transform: scale(.94); }
.gk-uniC-cfg-btn svg { width: 19px; height: 19px; }
.gk-uniC-dots-grid { display: grid; grid-template-columns: repeat(3, 4px); gap: 3px; }
.gk-uniC-dots-grid i { width: 4px; height: 4px; border-radius: 50%; background: #111214; }

/* nombre del centro arriba del buscador */
.gk-uniC-brand {
  position: fixed; top: calc(50% - 118px); left: 50%; transform: translateX(-50%);
  z-index: 940; text-align: center; pointer-events: none;
  max-width: min(680px, calc(100vw - 48px));
  transition: opacity .18s ease;
}
.gk-uniC-brand-nom {
  display: block; font-size: 34px; font-weight: 900; letter-spacing: -.03em; color: #111214;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gk-uniC-brand-sub { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: #6a6c72; }
/* orden 31/07: el nombre del centro QUEDA visible con panel abierto */

/* barra central estilo buscador */
.gk-uniC-search {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 940;
  width: min(680px, calc(100vw - 48px)); height: 54px;
  padding: 0 22px; gap: 12px;
  background: #fff; border: 1px solid #e3e4e7; border-radius: 999px;
  color: #a2a4aa; font-family: inherit; font-size: 15px; font-weight: 500;
  cursor: text; align-items: center;
  box-shadow: 0 10px 30px -18px rgba(17, 18, 20, .25);
  transition: border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.gk-uniC-search:hover, .gk-uniC-search:focus-within { border-color: #a2a4aa; box-shadow: 0 14px 34px -18px rgba(17, 18, 20, .32); }
.gk-uniC-search svg { width: 19px; height: 19px; color: #6a6c72; flex-shrink: 0; }
.gk-uniC-search input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 15px; color: #111214;
}
.gk-uniC-search input::placeholder { color: #a2a4aa; }
/* orden 31/07: con panel abierto el buscador QUEDA visible */

/* resultados del buscador */
.gk-uniC-results {
  position: fixed; top: calc(50% + 34px); left: 50%; transform: translateX(-50%) translateY(-4px);
  width: min(680px, calc(100vw - 48px));
  z-index: 945;
  background: #fff; border: 1px solid #e3e4e7; border-radius: 18px;
  box-shadow: 0 24px 60px -24px rgba(17, 18, 20, .3);
  padding: 10px;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.gk-uniC-results.on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
#gk-uniC-res-list { max-height: 44vh; overflow-y: auto; }
.gk-uniC-res-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px; border: none; border-radius: 10px;
  background: transparent; font-family: inherit; text-align: left; cursor: pointer;
  transition: background .18s ease;
}
.gk-uniC-res-row:hover { background: #f7f7f8; }
.gk-uniC-res-mini { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex-shrink: 0; border: 1px solid #efeff1; }
.gk-uniC-res-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gk-uniC-res-txt b { font-size: 13.5px; font-weight: 700; color: #111214; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gk-uniC-res-txt small { font-size: 11.5px; color: #6a6c72; }
.gk-uniC-res-vacio { padding: 18px; text-align: center; font-size: 12.5px; color: #a2a4aa; }

/* paneles */
.gk-uniC-panel {
  background: #fff; border: 1px solid #e3e4e7; border-radius: 16px;
  box-shadow: 0 24px 60px -24px rgba(17, 18, 20, .3);
  padding: 14px;
  opacity: 0; transform: translateY(-6px) scale(.99); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.gk-uniC-panel.on { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.gk-uniC-apps { position: absolute; left: 20px; top: 76px; z-index: 955; width: min(560px, calc(100vw - 40px)); }
.gk-uniC-cfg { position: fixed; right: 20px; top: 76px; z-index: 955; width: 280px; padding: 8px; }
.gk-uniC-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 12px; border: none; border-radius: 10px;
  background: transparent; color: #111214;
  font-family: inherit; font-size: 13.5px; font-weight: 600; text-align: left;
  cursor: pointer; transition: background .18s ease;
}
.gk-uniC-item:hover { background: #f7f7f8; }
.gk-uniC-item svg { width: 18px; height: 18px; color: #6a6c72; flex-shrink: 0; }
.gk-uniC-divider { height: 1px; background: #efeff1; margin: 6px 4px; }
.gk-uniC-salir { color: #a32323; }
.gk-uniC-salir svg { color: #a32323; }
.gk-uniC-salir:hover { background: #fbecec; }

/* el grid dentro del panel: tiles compactas (estilos base siguen vivos por el scope) */
#section-home.gk-launcher-centro .gk-uniC-apps .gk-launcher-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  max-width: none !important; margin: 0 !important; padding: 0 !important;
}
#section-home.gk-launcher-centro .gk-uniC-apps .gk-lt { margin: 0 auto; }
#section-home.gk-launcher-centro .gk-uniC-apps .gk-lt-tile { width: 92px !important; height: 92px !important; border-radius: 20px !important; }
#section-home.gk-launcher-centro .gk-uniC-apps .gk-lt-tile svg { width: 32px !important; height: 32px !important; }
#section-home.gk-launcher-centro .gk-uniC-apps .gk-lt-label { font-size: 11.5px !important; }

/* ── responsive: celular (regla de oro: la fecha se REUBICA, no desaparece) ── */
@media (max-width: 640px) {
  .gk-uniC-dots { left: 12px; top: 12px; }
  .gk-uniC-cfg-btn { right: 12px; top: 12px; }
  body.gk-centro-launcher-mode .gk-centro-topbar { right: 64px !important; top: 12px !important; }
  .gk-uniC-search { height: 48px; font-size: 14px; }
  .gk-uniC-brand-nom { font-size: 26px; }
  .gk-uniC-brand { top: calc(50% - 104px); }
  .gk-uniC-apps { left: 12px; right: 12px; width: auto; top: 66px; max-height: 74vh; overflow-y: auto; }
  .gk-uniC-cfg { right: 12px; top: 66px; }
  #section-home.gk-launcher-centro .gk-uniC-apps .gk-launcher-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .gk-uniC-results { top: calc(50% + 28px); }
}
@media (max-width: 560px) {
  body.gk-centro-launcher-mode .gk-topbar-date-centro {
    display: inline-flex !important; /* antes: display:none !important — la fecha se reubica */
    right: 12px !important; top: 64px !important;
    height: auto; font-size: 11px; padding: 4px 10px;
  }
}
/* ── monitores grandes ── */
@media (min-width: 1800px) {
  .gk-uniC-search { width: 760px; height: 58px; }
  .gk-uniC-apps { width: 620px; }
}

/* contador del período: con el grid dentro del panel, el contador se REUBICA
   fijo abajo al centro (antes flotaba al medio detrás del buscador) */
body.gk-centro-launcher-mode #counter-widget,
body.gk-centro-launcher-mode .counter-widget {
  position: fixed !important; left: 50%; transform: translateX(-50%);
  bottom: 24px; top: auto !important; z-index: 930; margin: 0 !important;
}
@media (max-width: 640px) {
  body.gk-centro-launcher-mode #counter-widget,
  body.gk-centro-launcher-mode .counter-widget { bottom: 16px; }
}

/* Fix 31/07 · el círculo decorativo del contador (app.css .counter-widget::before,
   pensado para la tarjeta grande sobre color) se veía como un cuadro teal suelto
   dentro de la pastilla blanca del launcher. Se apaga SOLO aquí; el widget
   conserva su adorno en cualquier otra vista donde siga siendo tarjeta. */
#section-home.gk-launcher-centro .counter-widget::before { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   BANDEJA · ORDEN 31/07 · PORTALES (mismo paquete que el escritorio):
   1) ficha limpia: estado y semáforo en la MISMA fila arriba; los botones
      aparecen al pasar el cursor (en táctil siguen visibles).
   2) esquina ordenada: fecha + refrescar + cerrar en UNA fila alineada.
   3) con un diálogo abierto, el nombre del centro y el buscador descansan.
   4) rail colapsado: el nombre del ícono sale a la DERECHA, al frente
      (globo flotante a nivel body — el rail recorta cualquier pseudo).
   Nada se quita: todo sigue accesible, solo ordenado.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · FICHA: estado + semáforo juntos arriba (antes se apilaban al centro) */
.sol-grid .sol-card .sol-card-top,
#pedidos-list .sol-card .sol-card-top,
#list-container .sol-card .sol-card-top {
  flex-direction: row !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}
@media (hover: hover) and (pointer: fine) {
  .sol-grid .sol-card .sol-card-actions {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: 0 !important;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .18s ease, max-height .22s ease, transform .18s ease, margin-top .18s ease;
  }
  .sol-grid .sol-card:hover .sol-card-actions,
  .sol-grid .sol-card:focus-within .sol-card-actions {
    opacity: 1;
    max-height: 76px;
    transform: none;
    margin-top: 4px !important;
    pointer-events: auto;
  }
  .sol-grid .sol-card .sol-card-btn { height: 28px !important; padding: 0 9px !important; font-size: 10.5px !important; }
  .sol-grid .sol-card .sol-card-btn-icon { width: 28px !important; height: 28px !important; }
  .sol-grid .sol-card .sol-card-btn i, .sol-grid .sol-card .sol-card-btn-icon i { font-size: 11px !important; }
}

/* 2 · ESQUINA ORDENADA: el refrescar se va junto al TÍTULO de su panel (es su
   acción, ahí se entiende) y la esquina queda solo para [ fecha ] ( X ), con el
   mismo espacio entre ambos. Antes el refrescar caía pegado bajo la pastilla de
   fecha y los tres se leían como un amontonamiento.
   (Se hace así y no con position:fixed porque el panel lleva una animación de
   entrada con transform, que ancla cualquier elemento fijo a su caja.) */
@media (min-width: 901px) {
  body.gk-centro-module-mode .page-header {
    justify-content: flex-start !important;
    gap: 14px !important;
  }
  body.gk-centro-module-mode .page-header > .btn-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid #e3e4e7 !important;
    color: #111214 !important;
    flex-shrink: 0;
  }
  body.gk-centro-module-mode .page-header > .btn-icon:hover {
    background: #f7f7f8 !important;
    border-color: #a2a4aa !important;
  }
  /* la fecha se acomoda junto a la X, con el mismo respiro de siempre */
  body.gk-centro-module-mode #gk-topbar-date-centro {
    right: 78px !important;
    top: 24px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* 3 · DIÁLOGO ABIERTO: el nombre del centro y el buscador no flotan encima */
body:has(.modal.show) .gk-uniC-brand,
body:has(.modal.show) .gk-uniC-search,
body:has(.modal.show) .gk-uniC-results,
body:has(.modal.show) .gk-uniC-panel,
body:has(.modal[style*="flex"]) .gk-uniC-brand,
body:has(.modal[style*="flex"]) .gk-uniC-search,
body:has(.modal[style*="flex"]) .gk-uniC-results,
body:has(.modal[style*="flex"]) .gk-uniC-panel {
  opacity: 0 !important;
  pointer-events: none !important;
}
body:has(.modal.show) .gk-uniC-dots,
body:has(.modal.show) .gk-uniC-cfg-btn,
body:has(.modal[style*="flex"]) .gk-uniC-dots,
body:has(.modal[style*="flex"]) .gk-uniC-cfg-btn {
  pointer-events: none !important;
}

/* 4 · Globo flotante para el rail colapsado (a nivel body, sale al frente) */
.gk-tip-float {
  position: fixed;
  z-index: 99999;
  background: #2a2b2f; color: #fff;
  font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1;
  white-space: nowrap;
  padding: 7px 11px; border-radius: 8px;
  pointer-events: none;
  opacity: 0; transform: translateY(-50%) translateX(-3px);
  transition: opacity .18s ease, transform .18s ease;
}
.gk-tip-float.on { opacity: 1; transform: translateY(-50%) translateX(0); }
.gk-tip-float::before {
  content: ""; position: absolute; right: 100%; top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent; border-right-color: #2a2b2f; border-left: none;
}
[data-tip][data-tip-pos="derecha"]::after,
[data-tip][data-tip-pos="derecha"]::before { content: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   06/08/26 · EL BUSCADOR YA NO SE CRUZA CON EL PANEL DE APPS
   ---------------------------------------------------------------------------
   El buscador es fijo y va centrado en la ventana (680px); el panel de apps
   cae desde arriba a la izquierda (560px desde x=20). Las cuentas: se tapan en
   cualquier pantalla menor a ~1840px de ancho — es decir, en casi todas. Se
   veía el buscador cortado por detrás del panel.

   Con el panel abierto, el buscador se atenúa y deja de recibir clics: igual
   estaba debajo y no se podía usar. Al cerrar el panel vuelve solo.
   Se usa `:has()` porque este mismo archivo ya lo usa para los modales.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ⚠ 07/08/26 · LA CAUSA REAL ERA OTRA, y atenuar tapaba el síntoma.
   `#section-home` tiene `isolation: isolate`, que crea un CONTEXTO DE
   APILAMIENTO. El panel es `position:absolute; z-index:955` pero vive DENTRO
   de ese contexto, así que su 955 solo vale ahí adentro; el nombre del centro
   es `position:fixed; z-index:940` al nivel de la raíz. Resultado: el nombre
   se pintaba ENCIMA del panel, atravesado sobre los íconos.
   Un z-index alto no sirve de nada si un antepasado encierra el contexto.

   Se levanta el contenedor del launcher por encima del nombre MIENTRAS el
   panel está abierto. Así el panel tapa lo que tiene que tapar y no hay que
   esconder nada: el nombre se queda (orden del 31/07) y simplemente queda
   detrás, como corresponde. */
body:has(.gk-uniC-apps.on) #section-home { z-index: 960; }

/* El buscador sí se atenúa con el panel de APPS, porque queda debajo y no se
   podría usar igual.
   ⚠ Ya NO con el engranaje: ese es un menú chico fijo en la esquina derecha,
     no tapa nada, y apagar el buscador al abrirlo se veía como que se quitaba
     media pantalla. Textual del usuario: "al presionar config se quita lo de
     abajo". */
body:has(.gk-uniC-apps.on) .gk-uniC-search {
  opacity: .18;
  pointer-events: none;
}
/* El nombre del centro se queda visible: orden del 31/07, no se toca. */