/*
 * 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); }