/* =====================================================================
   GuardametasPro · app.css  (rediseño premium)
   Sistema de tokens --gk-*  ·  tema claro/oscuro  ·  acento por usuario
   Inspirado en el design system de PayPymes ERP.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');

:root{
  --gk-font:'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gk-font-head:'Sora', var(--gk-font);
  /* Acento (sobreescribible por usuario vía <style> inline) */
  --gk-primary:      #4F46E5;
  --gk-primary-rgb:  79, 70, 229;
  --gk-secondary:    #7C3AED;
  --gk-secondary-rgb:124, 58, 237;

  --gk-success:#10B981; --gk-success-rgb:16,185,129;
  --gk-warning:#F59E0B; --gk-warning-rgb:245,158,11;
  --gk-danger:#EF4444;  --gk-danger-rgb:239,68,68;
  --gk-info:#3B82F6;    --gk-info-rgb:59,130,246;

  /* Superficies (claro) */
  --gk-bg:#F6F7FB;
  --gk-bg-2:#EEF1F8;
  --gk-card:#FFFFFF;
  --gk-card-2:#F9FAFC;
  --gk-text:#0F172A;
  --gk-text-2:#334155;
  --gk-muted:#64748B;
  --gk-border:#E6E8EF;
  --gk-border-2:#EEF2F7;

  --gk-sidebar-bg:#0B0A1E;
  --gk-sidebar-fg:rgba(255,255,255,.74);
  --gk-sidebar-muted:rgba(148,163,184,.5);

  /* Radii */
  --gk-r-sm:10px; --gk-r:14px; --gk-r-lg:18px; --gk-r-xl:24px; --gk-r-pill:999px;

  /* Sombras */
  --gk-sh-sm:0 2px 6px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --gk-sh:0 8px 24px -8px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06);
  --gk-sh-lg:0 24px 48px -16px rgba(15,23,42,.18), 0 8px 16px -8px rgba(15,23,42,.08);
  --gk-sh-brand:0 10px 30px -8px rgba(var(--gk-primary-rgb),.5);
  --gk-ring:0 0 0 4px rgba(var(--gk-primary-rgb),.16);

  --gk-grad:linear-gradient(135deg, var(--gk-primary), var(--gk-secondary));
  --gk-grad-soft:linear-gradient(135deg, rgba(var(--gk-primary-rgb),.14), rgba(var(--gk-secondary-rgb),.08));
  --gk-glass:saturate(180%) blur(16px);

  --gk-ease:cubic-bezier(.22,1,.36,1);
  --gk-dur:.22s;
}

/* ---------------- TEMA OSCURO ---------------- */
[data-bs-theme="dark"]{
  --gk-bg:#0A0A14;
  --gk-bg-2:#0F1020;
  --gk-card:#15162A;
  --gk-card-2:#1B1D33;
  --gk-text:#F1F5F9;
  --gk-text-2:#CBD5E1;
  --gk-muted:#94A3B8;
  --gk-border:#262842;
  --gk-border-2:#222338;
  --gk-sidebar-bg:#08070F;
  --gk-sh:0 8px 30px -10px rgba(0,0,0,.6);
  --gk-sh-lg:0 30px 60px -20px rgba(0,0,0,.7);
  --gk-sh-sm:0 2px 8px rgba(0,0,0,.4);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family:var(--gk-font);
  background:var(--gk-bg); color:var(--gk-text);
  -webkit-font-smoothing:antialiased; letter-spacing:-.01em;
}
h1,h2,h3,h4,.auth-title,.brand-h1,.auth-welcome,.kpi-value,.topbar-title,
.sidebar-brand,.card-title,.modal-title,.rank-score{ font-family:var(--gk-font-head); letter-spacing:-.03em; }
::selection{ background:rgba(var(--gk-primary-rgb),.22); }
a{ text-decoration:none; }

/* ============== BOTONES (acento por usuario) ============== */
.btn{ border-radius:var(--gk-r-sm); font-weight:600; letter-spacing:-.01em; transition:transform var(--gk-dur) var(--gk-ease), box-shadow var(--gk-dur); }
.btn:active{ transform:translateY(1px); }
.btn-lg{ border-radius:var(--gk-r); }
.btn-primary{
  background:var(--gk-grad); border:none; color:#fff;
  box-shadow:var(--gk-sh-brand);
}
.btn-primary:hover,.btn-primary:focus{ filter:brightness(1.06); color:#fff; box-shadow:var(--gk-sh-brand); transform:translateY(-1px); }
.btn-outline-primary{ border-color:rgba(var(--gk-primary-rgb),.4); color:var(--gk-primary); }
.btn-outline-primary:hover{ background:var(--gk-primary); border-color:var(--gk-primary); color:#fff; }
.btn-light{ background:var(--gk-card-2); border-color:var(--gk-border); color:var(--gk-text-2); }
.btn-light:hover{ background:var(--gk-bg-2); border-color:var(--gk-border); color:var(--gk-text); }
.btn-success{ background:linear-gradient(135deg,#10B981,#059669); border:none; color:#fff; }
.btn-warning{ background:linear-gradient(135deg,#F59E0B,#D97706); border:none; color:#fff; }
.btn-danger{ background:linear-gradient(135deg,#EF4444,#DC2626); border:none; color:#fff; }
.btn-dark{ background:linear-gradient(135deg,#1E293B,#0F172A); border:none; }
.btn-outline-secondary{ border-color:var(--gk-border); color:var(--gk-text-2); }
.btn-outline-secondary:hover{ background:var(--gk-bg-2); color:var(--gk-text); border-color:var(--gk-border); }
.btn-outline-success{ color:var(--gk-success); border-color:rgba(var(--gk-success-rgb),.4); }
.btn-outline-success:hover{ background:var(--gk-success); color:#fff; }
.btn-outline-danger{ color:var(--gk-danger); border-color:rgba(var(--gk-danger-rgb),.4); }
.btn-outline-danger:hover{ background:var(--gk-danger); color:#fff; }
.btn-outline-info{ color:var(--gk-info); border-color:rgba(var(--gk-info-rgb),.4); }
.btn-outline-info:hover{ background:var(--gk-info); color:#fff; }
.btn-link{ color:var(--gk-primary); }

/* ============== LOGIN ============== */
.auth-body{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  position:relative; overflow:hidden; background:#070612;
}
.auth-body::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 15% 12%, rgba(var(--gk-primary-rgb),.55), transparent 60%),
    radial-gradient(55% 45% at 88% 85%, rgba(var(--gk-secondary-rgb),.45), transparent 60%),
    radial-gradient(40% 40% at 80% 10%, rgba(59,130,246,.30), transparent 60%);
  filter:blur(8px);
}
.auth-body::after{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:42px 42px; mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%);
}
.auth-wrapper{ width:100%; max-width:430px; position:relative; z-index:2; }
.auth-card{
  background:rgba(255,255,255,.92); backdrop-filter:var(--gk-glass);
  border:1px solid rgba(255,255,255,.6); border-radius:var(--gk-r-xl);
  padding:42px 36px; box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
}
[data-bs-theme="dark"] .auth-card{ background:rgba(21,22,42,.9); border-color:rgba(255,255,255,.08); }
.auth-brand{ text-align:center; margin-bottom:28px; }
.auth-logo{
  width:68px; height:68px; border-radius:20px; display:flex; align-items:center; justify-content:center;
  background:var(--gk-grad); color:#fff; font-size:32px; margin:0 auto 16px;
  box-shadow:var(--gk-sh-brand);
}
.auth-title{ font-size:25px; font-weight:800; margin:0; letter-spacing:-.03em; }
.auth-subtitle{ color:var(--gk-muted); font-size:14px; margin:5px 0 0; }
.otp-input{ font-size:26px; letter-spacing:14px; font-weight:700; text-align:center; }
.btn-toggle-pass{ position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--gk-muted); font-size:18px; z-index:5; }

/* ============== SHELL ============== */
.app-body{ background:var(--gk-bg); }
.app-shell{ display:flex; min-height:100vh; }

.app-sidebar{
  width:260px; flex-shrink:0; background:var(--gk-sidebar-bg); color:var(--gk-sidebar-fg);
  display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; z-index:1040;
  transition:transform .3s var(--gk-ease), width .25s var(--gk-ease); border-right:1px solid rgba(255,255,255,.05);
}
.sidebar-brand{
  display:flex; align-items:center; gap:12px; padding:22px; color:#fff; font-weight:800; font-size:18px;
  letter-spacing:-.02em; border-bottom:1px solid rgba(255,255,255,.06);
}
.brand-icon{
  width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--gk-grad); font-size:21px; box-shadow:var(--gk-sh-brand);
}
.sidebar-nav{ flex:1; overflow-y:auto; padding:14px 12px; }
.sidebar-nav::-webkit-scrollbar{ width:6px; } .sidebar-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.1); border-radius:3px; }
.sidebar-nav .nav-link, .sidebar-footer .nav-link{
  display:flex; align-items:center; gap:13px; padding:11px 14px; border-radius:12px;
  color:var(--gk-sidebar-fg); font-weight:500; font-size:14.5px; margin-bottom:3px;
  transition:.16s var(--gk-ease); position:relative;
}
.sidebar-nav .nav-link i{ font-size:18px; width:22px; text-align:center; }
.sidebar-nav .nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; transform:translateX(2px); }
.sidebar-nav .nav-link.active{
  background:var(--gk-grad); color:#fff; box-shadow:var(--gk-sh-brand);
}
.sidebar-nav .nav-link.active::before{
  content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:4px; height:60%; border-radius:0 4px 4px 0; background:#fff;
}
.sidebar-footer{ padding:12px; border-top:1px solid rgba(255,255,255,.06); }

.app-main{ flex:1; margin-left:260px; display:flex; flex-direction:column; min-width:0; transition:margin-left .25s var(--gk-ease); }

/* Menú colapsado (escritorio) — solo iconos */
@media (min-width:992px){
  .app-shell.gk-collapsed .app-sidebar{ width:82px; }
  .app-shell.gk-collapsed .app-main{ margin-left:82px; }
  .app-shell.gk-collapsed .brand-text,
  .app-shell.gk-collapsed .sidebar-nav .nav-link span,
  .app-shell.gk-collapsed .sidebar-footer .nav-link span{ opacity:0; width:0; overflow:hidden; display:none; }
  .app-shell.gk-collapsed .sidebar-brand{ justify-content:center; padding:22px 0; }
  .app-shell.gk-collapsed .sidebar-nav .nav-link,
  .app-shell.gk-collapsed .sidebar-footer .nav-link{ justify-content:center; padding:12px 0; }
  .app-shell.gk-collapsed .sidebar-nav .nav-link.active::before{ display:none; }
  .app-shell.gk-collapsed .sidebar-nav .nav-link:hover{ transform:none; }
}

.app-topbar{
  height:66px;
  background:
    radial-gradient(130% 220% at 0% -70%, rgba(var(--gk-primary-rgb),.34), transparent 55%),
    radial-gradient(120% 190% at 100% -50%, rgba(var(--gk-secondary-rgb),.22), transparent 60%),
    linear-gradient(180deg, #131d35 0%, #0e1626 100%);
  border-bottom:1px solid rgba(148,163,184,.14);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05);
  display:flex; align-items:center; gap:14px;
  padding:0 22px; position:sticky; top:0; z-index:1030;
}
/* El menú desplegable del usuario debe quedar por encima del contenido */
.app-topbar .dropdown-menu{ z-index:1055; }
/* Malla de portería sutil, desvanecida hacia la derecha */
.app-topbar::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:21px 21px; opacity:.6;
  -webkit-mask-image:linear-gradient(90deg, transparent 50%, #000 108%);
  mask-image:linear-gradient(90deg, transparent 50%, #000 108%);
}
/* Línea de acento inferior con degradado de la marca */
.app-topbar::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(var(--gk-primary-rgb),.95) 25%, rgba(var(--gk-secondary-rgb),.95) 70%, transparent);
}
.app-topbar > *{ position:relative; z-index:1; }
[data-bs-theme="dark"] .app-topbar{
  background:
    radial-gradient(130% 220% at 0% -70%, rgba(var(--gk-primary-rgb),.28), transparent 55%),
    linear-gradient(180deg, #0c1322 0%, #070b16 100%);
}
.app-topbar .topbar-title{ color:#f8fafc; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.app-topbar #btnSidebar{ color:#cbd5e1; }
.app-topbar #btnSidebar:hover{ color:#fff; }
.impersonate-bar{ position:sticky; top:0; z-index:1040; display:flex; align-items:center; justify-content:center; gap:12px;
  flex-wrap:wrap; background:linear-gradient(90deg,#b45309,#d97706); color:#fff; font-size:13.5px; font-weight:600;
  padding:8px 16px; box-shadow:0 2px 10px -4px rgba(180,83,9,.6); }
.impersonate-bar .btn-light{ font-weight:700; padding:.15rem .6rem; }
.topbar-title{ font-size:18px; font-weight:700; margin:0; flex:1; letter-spacing:-.02em;
  display:flex; align-items:center; gap:11px; }
.topbar-title::before{
  content:''; width:4px; height:20px; border-radius:4px;
  background:linear-gradient(180deg, var(--gk-primary), var(--gk-secondary));
  box-shadow:0 0 12px rgba(var(--gk-primary-rgb),.7);
}
.topbar-actions{ display:flex; align-items:center; gap:10px; }
.btn-icon{
  width:42px; height:42px; border-radius:12px; border:1px solid var(--gk-border);
  background:var(--gk-card); color:var(--gk-text-2); display:flex; align-items:center; justify-content:center;
  font-size:18px; transition:.16s;
}
.btn-icon:hover{ background:var(--gk-bg-2); color:var(--gk-primary); border-color:rgba(var(--gk-primary-rgb),.4); }
.user-chip{ display:flex; align-items:center; gap:10px; border:1px solid var(--gk-border); border-radius:var(--gk-r-pill); padding:5px 12px 5px 5px; background:var(--gk-card); color:var(--gk-text); transition:.16s; }
.user-chip:hover{ border-color:rgba(var(--gk-primary-rgb),.4); }
.user-avatar{
  width:32px; height:32px; border-radius:50%; background:var(--gk-grad);
  color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:14px;
  object-fit:cover; flex-shrink:0; box-shadow:0 0 0 2px rgba(255,255,255,.14);
}
.user-name{ font-weight:600; font-size:14px; }

/* Variantes glass de los controles dentro del topbar oscuro */
.app-topbar .btn-icon{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); color:#cbd5e1;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.app-topbar .btn-icon:hover{ background:rgba(255,255,255,.15); color:#fff; border-color:rgba(var(--gk-primary-rgb),.55); }
.app-topbar .user-chip{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); color:#e2e8f0;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.app-topbar .user-chip:hover{ background:rgba(255,255,255,.15); border-color:rgba(var(--gk-primary-rgb),.6); }
.app-topbar .user-chip .user-name{ color:#f1f5f9; }
.app-topbar .user-chip .bi-chevron-down{ color:#94a3b8; }

.app-content{ padding:24px; flex:1; }
.app-footer{
  padding:16px 24px; border-top:1px solid var(--gk-border); background:var(--gk-card);
  display:flex; justify-content:space-between; font-size:13px; color:var(--gk-muted);
}

/* ============== CARDS ============== */
.card{ background:var(--gk-card); color:var(--gk-text); }
.card-elevated{
  border:1px solid var(--gk-border); border-radius:var(--gk-r-lg); box-shadow:var(--gk-sh);
  background:var(--gk-card); transition:box-shadow var(--gk-dur), transform var(--gk-dur);
}
.card-elevated:hover{ box-shadow:var(--gk-sh-lg); }
.card-elevated .card-header{ border-bottom:1px solid var(--gk-border); padding:16px 20px; background:transparent; }
.card-title{ letter-spacing:-.02em; }

/* ============== KPI ============== */
.kpi-card{
  position:relative; overflow:hidden;
  background:var(--gk-card); border:1px solid var(--gk-border); border-radius:var(--gk-r-lg);
  padding:20px; display:flex; align-items:center; gap:15px; box-shadow:var(--gk-sh);
  transition:transform var(--gk-dur) var(--gk-ease), box-shadow var(--gk-dur);
}
.kpi-card::after{ content:''; position:absolute; right:-30px; top:-30px; width:110px; height:110px; border-radius:50%; background:var(--gk-grad-soft); }
.kpi-card:hover{ transform:translateY(-4px); box-shadow:var(--gk-sh-lg); }
.kpi-icon{
  width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:25px; color:#fff; flex-shrink:0; position:relative; z-index:1; box-shadow:var(--gk-sh);
}
.kpi-primary .kpi-icon{ background:var(--gk-grad); }
.kpi-info    .kpi-icon{ background:linear-gradient(135deg,#0ea5e9,#22d3ee); }
.kpi-success .kpi-icon{ background:linear-gradient(135deg,#16a34a,#22c55e); }
.kpi-warning .kpi-icon{ background:linear-gradient(135deg,#f59e0b,#fbbf24); }
.kpi-danger  .kpi-icon{ background:linear-gradient(135deg,#ef4444,#f87171); }
.kpi-secondary .kpi-icon{ background:linear-gradient(135deg,#64748b,#94a3b8); }
.kpi-body{ position:relative; z-index:1; }
.kpi-value{ font-size:27px; font-weight:800; line-height:1; letter-spacing:-.03em; }
.kpi-label{ font-size:12.5px; color:var(--gk-muted); margin-top:4px; font-weight:500; }

/* Tarjetas de tendencia (con mini-gráfica) */
.trend-card{ overflow:hidden; }
.kpi-mini{ width:46px; height:46px; border-radius:13px; font-size:20px; box-shadow:var(--gk-sh-sm); }
.bg-grad-primary{ background:var(--gk-grad); }
.bg-grad-danger{ background:linear-gradient(135deg,#ef4444,#f87171); }
.bg-grad-success{ background:linear-gradient(135deg,#16a34a,#22c55e); }
.bg-grad-info{ background:linear-gradient(135deg,#0ea5e9,#22d3ee); }
.trend-value{ font-size:30px; font-weight:800; line-height:1; letter-spacing:-.03em; font-family:var(--gk-font-head); }
.trend-label{ font-size:12.5px; color:var(--gk-muted); margin-top:3px; font-weight:500; }
.trend-spark{ height:56px; margin-top:8px; }
.trend-spark canvas{ width:100%!important; height:100%!important; }

/* ============== LISTAS ============== */
.rank-list, .event-list, .alert-list{ list-style:none; margin:0; padding:0; }
.rank-list li{ display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--gk-border-2); transition:.15s; }
.rank-list li:hover{ background:var(--gk-card-2); }
.rank-list li:last-child{ border-bottom:none; }
.rank-pos{ width:24px; height:24px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; background:var(--gk-grad-soft); color:var(--gk-primary); }
.rank-avatar{ width:36px; height:36px; border-radius:50%; background:var(--gk-grad); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.rank-name{ flex:1; font-weight:600; font-size:14px; }
.rank-score{ font-weight:800; font-size:15px; }

.event-list li{ display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--gk-border-2); font-size:14px; }
.event-list li:last-child{ border-bottom:none; }
.event-date{ font-weight:700; color:var(--gk-primary); white-space:nowrap; }

.alert-item{ padding:11px 13px; margin:7px; border-radius:12px; background:var(--gk-card-2); border:1px solid var(--gk-border-2); }

.empty-state{ text-align:center; color:var(--gk-muted); padding:30px 12px; }
.empty-state i{ font-size:38px; display:block; margin-bottom:8px; opacity:.55; }
.empty-state p{ margin:0; font-size:14px; }

/* ============== FORMULARIOS ============== */
.form-control, .form-select{
  border-radius:var(--gk-r-sm); border-color:var(--gk-border); background:var(--gk-card); color:var(--gk-text);
  padding:.55rem .85rem; transition:.16s;
}
.form-control:focus, .form-select:focus{ border-color:var(--gk-primary); box-shadow:var(--gk-ring); background:var(--gk-card); color:var(--gk-text); }
.form-control::placeholder{ color:var(--gk-muted); opacity:.7; }

/* ---- Selects: clásico limpio (borde suave, flecha discreta, foco con acento) ---- */
.form-select{
  border-radius: var(--gk-r);
  padding: .55rem 2.5rem .55rem .85rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%2364748b'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m4%206%204%204%204-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 16px 16px;
}
.form-select:hover{ border-color: var(--gk-muted); }
.form-select:focus{
  border-color: var(--gk-primary); box-shadow: var(--gk-ring);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%2364748b'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m4%206%204%204%204-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 16px 16px;
}
.form-select option{ background: var(--gk-card); color: var(--gk-text); }
[data-bs-theme=dark] .form-select{
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23cbd5e1'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m4%206%204%204%204-4'/%3E%3C/svg%3E");
}
.form-label{ font-weight:600; color:var(--gk-text-2); }
/* ---- Stepper de evaluación (atributos 0–10 con botones) ---- */
.rate-stepper{ display:flex; align-items:center; gap:6px; }
.rate-btn{ width:36px; height:36px; flex:0 0 auto; border:none; border-radius:11px; font-size:1.2rem; font-weight:800;
  display:grid; place-items:center; cursor:pointer; touch-action:manipulation; transition:transform .06s; line-height:1; }
.rate-btn:active{ transform:scale(.88); }
.rate-minus{ background:var(--gk-bg-2); color:var(--gk-text); }
.rate-plus{ background:var(--gk-primary); color:#fff; box-shadow:0 5px 12px -7px var(--gk-primary); }
.rate-val{ flex:1 1 auto; min-width:0; width:100%; text-align:center; font-weight:800; font-size:1.15rem;
  border:1px solid var(--gk-border); border-radius:11px; height:36px; background:var(--gk-card); color:var(--gk-text); padding:0; cursor:pointer; }
.rate-val:hover{ border-color:var(--gk-primary); }
/* El editor de imagen (cropper) siempre por encima de cualquier otro modal */
#gkCropModal{ z-index:20000; }
/* Regla global: MAYÚSCULAS en inputs de texto/búsqueda y textareas (excepto data-no-upper) */
input[type="text"]:not([data-no-upper]), input[type="search"]:not([data-no-upper]), textarea:not([data-no-upper]){ text-transform:uppercase; }
input[type="text"]:not([data-no-upper])::placeholder, input[type="search"]:not([data-no-upper])::placeholder, textarea:not([data-no-upper])::placeholder{ text-transform:none; }
.form-floating > label{ color:var(--gk-muted); }
.form-check-input:checked{ background-color:var(--gk-primary); border-color:var(--gk-primary); }
.form-switch .form-check-input:checked{ background-color:var(--gk-primary); border-color:var(--gk-primary); }
.input-group-text{ background:var(--gk-card-2); border-color:var(--gk-border); color:var(--gk-muted); }

/* ============== MODALES ============== */
.modal-content{
  border:1px solid var(--gk-border); border-radius:var(--gk-r-xl); overflow:hidden;
  box-shadow:var(--gk-sh-lg); background:var(--gk-card);
  display:flex; flex-direction:column;
  max-height:calc(100vh - 1.5rem);          /* tope absoluto (vh) — nunca % */
  min-height:0;                             /* clave: permite que respete max-height y el body scrollee */
}
/* el diálogo (flex item padre) también debe poder encogerse */
.modal-dialog{ min-height:0; }
.modal-dialog-centered{ min-height:calc(100% - 1.5rem); }
/* Scrollable de Bootstrap usa max-height:100% (porcentaje) que a veces no
   resuelve. Lo forzamos a vh para que SIEMPRE limite y el cuerpo haga scroll. */
.modal-dialog-scrollable .modal-content{ max-height:calc(100vh - 1.5rem); }
.modal-header{
  border-bottom:1px solid var(--gk-border); padding:18px 24px;
  background:var(--gk-grad-soft); flex:0 0 auto;
}
.modal-footer{ border-top:1px solid var(--gk-border); padding:16px 24px; background:var(--gk-card-2); flex:0 0 auto; }
.modal-title{ font-weight:700; }
.modal-body{ padding:22px 24px; overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1 1 auto; min-height:0; max-height:calc(100vh - 10.5rem); scrollbar-width:thin; scrollbar-color:var(--gk-muted) var(--gk-bg-2); }
.modal-body::-webkit-scrollbar{ width:12px; }
.modal-body::-webkit-scrollbar-track{ background:var(--gk-bg-2); border-radius:6px; }
.modal-body::-webkit-scrollbar-thumb{ background:var(--gk-muted); border-radius:6px; border:3px solid var(--gk-card); }
.modal-body::-webkit-scrollbar-thumb:hover{ background:var(--gk-primary); }
.modal.fade .modal-dialog{ transition:transform .28s var(--gk-ease), opacity .28s; transform:translateY(18px) scale(.98); }
.modal.show .modal-dialog{ transform:none; }
.btn-close{ transition:.15s; } .btn-close:hover{ transform:rotate(90deg); }
[data-bs-theme="dark"] .btn-close{ filter:invert(1) grayscale(1) brightness(2); }

/* ============== TABS / PILLS ============== */
.nav-pills .nav-link{ color:var(--gk-text-2); border-radius:var(--gk-r-pill); font-weight:600; padding:.5rem 1.1rem; }
.nav-pills .nav-link.active{ background:var(--gk-grad); color:#fff; box-shadow:var(--gk-sh-brand); }
.nav-tabs{ border-bottom-color:var(--gk-border); }
.nav-tabs .nav-link{ color:var(--gk-muted); border:none; font-weight:600; border-bottom:2px solid transparent; }
.nav-tabs .nav-link.active{ color:var(--gk-primary); background:transparent; border-bottom-color:var(--gk-primary); }

/* ============== TABLAS ============== */
.table{ color:var(--gk-text); --bs-table-bg:transparent; }
.table > :not(caption) > * > *{ border-bottom-color:var(--gk-border-2); }
.table thead th{ color:var(--gk-muted); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; border-bottom-color:var(--gk-border); }
.table-hover > tbody > tr:hover > *{ background:var(--gk-card-2); }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after{ opacity:.4; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current{ background:var(--gk-grad)!important; border:none!important; color:#fff!important; border-radius:8px; }
.dataTables_wrapper .dataTables_paginate .paginate_button{ border-radius:8px; }
/* Buscador de tablas: estilo pastilla con icono de lupa (texto "Buscar:" oculto) */
.dataTables_filter{ margin-bottom:.15rem; }
.dataTables_filter label{ font-size:0; color:transparent; }
.dataTables_filter input{
  font-size:14px!important; color:var(--gk-text)!important; font-weight:500;
  border:1px solid var(--gk-border)!important; border-radius:var(--gk-r-pill)!important;
  background-color:var(--gk-card)!important;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2364748b'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='8'/%3E%3Cpath%20d='m21%2021-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:.9rem center; background-size:15px;
  padding:.5rem 1rem .5rem 2.4rem!important; min-width:240px; margin-left:0!important;
  transition:border-color .18s var(--gk-ease), box-shadow .18s var(--gk-ease);
}
.dataTables_filter input::placeholder{ color:var(--gk-muted); }
.dataTables_filter input:focus{ border-color:var(--gk-primary)!important; box-shadow:var(--gk-ring)!important; outline:none; }
[data-bs-theme=dark] .dataTables_filter input{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2394a3b8'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='8'/%3E%3Cpath%20d='m21%2021-4.3-4.3'/%3E%3C/svg%3E");
}
.dataTables_length select{
  border:1px solid var(--gk-border)!important; border-radius:var(--gk-r-sm)!important;
  background-color:var(--gk-card)!important; color:var(--gk-text)!important; cursor:pointer; font-weight:500;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2364748b'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .6rem center; background-size:13px;
  padding:.42rem 1.9rem .42rem .8rem!important;
}
.dataTables_length select:focus{ border-color:var(--gk-primary)!important; box-shadow:var(--gk-ring)!important; outline:none; }
[data-bs-theme=dark] .dataTables_length select{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2394a3b8'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
}

/* ============== BADGES ============== */
.badge{ font-weight:600; border-radius:var(--gk-r-sm); padding:.4em .7em; }
.text-bg-primary{ background:var(--gk-grad)!important; }

/* ============== DROPDOWN ============== */
.dropdown-menu{ border:1px solid var(--gk-border); border-radius:var(--gk-r); box-shadow:var(--gk-sh-lg); background:var(--gk-card); padding:6px; }
.dropdown-item{ border-radius:var(--gk-r-sm); color:var(--gk-text-2); font-weight:500; }
.dropdown-item:hover{ background:var(--gk-bg-2); color:var(--gk-primary); }
.dropdown-header{ color:var(--gk-muted); }

/* ============== FOTOS / EXPEDIENTE ============== */
.foto-wrap{ width:100px; height:100px; border-radius:22px; overflow:hidden; border:1px solid var(--gk-border); background:var(--gk-bg-2); display:flex; align-items:center; justify-content:center; box-shadow:var(--gk-sh); }
.foto-portero{ width:100%; height:100%; object-fit:cover; }
.tbl-avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--gk-card); box-shadow:var(--gk-sh-sm); }

.ficha-header{
  display:flex; gap:22px; align-items:center; flex-wrap:wrap; color:#fff;
  background:var(--gk-grad); border-radius:var(--gk-r-xl); padding:28px; box-shadow:var(--gk-sh-brand);
  position:relative; overflow:hidden;
}
.ficha-header::after{ content:''; position:absolute; right:-40px; bottom:-60px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.08); }
.ficha-foto{ width:118px; height:118px; border-radius:24px; object-fit:cover; border:3px solid rgba(255,255,255,.3); background:#1e293b; position:relative; z-index:1; }
.ficha-meta{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:8px; position:relative; z-index:1; }
.ficha-meta span{ font-size:14px; opacity:.95; }
.ficha-grid dt{ color:var(--gk-muted); font-weight:500; font-size:13px; }
.ficha-grid dd{ font-weight:600; margin-bottom:10px; color:var(--gk-text); }
.text-uppercase::placeholder{ text-transform:none; }

/* ============== RESPONSIVE ============== */
@media (max-width:991.98px){
  .app-sidebar{ transform:translateX(-100%); }
  .app-sidebar.open{ transform:translateX(0); box-shadow:var(--gk-sh-lg); }
  .app-main{ margin-left:0; }
}
.sidebar-backdrop{ position:fixed; inset:0; background:rgba(7,6,18,.55); backdrop-filter:blur(2px); z-index:1035; display:none; }
.sidebar-backdrop.show{ display:block; }

/* ============== SWEETALERT (acorde al tema) ============== */
.swal2-popup{ border-radius:var(--gk-r-lg)!important; font-family:var(--gk-font)!important; }
.swal2-styled.swal2-confirm{ background:var(--gk-grad)!important; border-radius:var(--gk-r-sm)!important; box-shadow:var(--gk-sh-brand)!important; }
.swal2-title{ font-family:var(--gk-font-head)!important; }

/* =====================================================================
   FÚTBOL / GUARDAMETAS  ·  motivo de red de portería + ambiente
   ===================================================================== */
.app-body{ position:relative; }
.app-body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;   /* DETRÁS de todo: no debe atrapar modales */
  background:
    radial-gradient(50% 40% at 100% 0, rgba(var(--gk-primary-rgb),.06), transparent 60%),
    radial-gradient(45% 45% at 0 100%, rgba(var(--gk-secondary-rgb),.06), transparent 60%);
}
/* NO dar z-index al shell: crearía un contexto de apilado que pondría
   los modales por debajo del backdrop. */

/* Red de portería (diamantes) como textura sobre superficies de marca */
.sidebar-brand{ position:relative; overflow:hidden; }
.sidebar-brand::after{
  content:''; position:absolute; inset:0; opacity:.10; pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg, #fff 0 1px, transparent 1px 16px),
    repeating-linear-gradient(-45deg, #fff 0 1px, transparent 1px 16px);
}
.ficha-header::before{
  content:''; position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.7) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.7) 0 1px, transparent 1px 20px);
  -webkit-mask-image:linear-gradient(120deg,#000,transparent 65%); mask-image:linear-gradient(120deg,#000,transparent 65%);
}
.kpi-card .kpi-icon::after{
  content:''; position:absolute; inset:0; border-radius:inherit; opacity:.18;
  background-image:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 9px),repeating-linear-gradient(-45deg,#fff 0 1px,transparent 1px 9px);
}
.kpi-icon{ position:relative; overflow:hidden; }

/* =====================================================================
   ANIMACIONES DE ENTRADA
   ===================================================================== */
@keyframes gkUp{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;} }
@keyframes gkPop{ from{opacity:0; transform:scale(.94) translateY(10px);} to{opacity:1; transform:none;} }
@keyframes gkFade{ from{opacity:0;} to{opacity:1;} }
.app-content{ animation:gkUp .5s var(--gk-ease) both; }
.app-content .card-elevated{ animation:gkUp .55s var(--gk-ease) both; }
.kpi-card{ animation:gkPop .55s var(--gk-ease) both; }
/* stagger de KPIs */
.row > div:nth-child(1) .kpi-card{ animation-delay:.04s }
.row > div:nth-child(2) .kpi-card{ animation-delay:.09s }
.row > div:nth-child(3) .kpi-card{ animation-delay:.14s }
.row > div:nth-child(4) .kpi-card{ animation-delay:.19s }
.row > div:nth-child(5) .kpi-card{ animation-delay:.24s }
.row > div:nth-child(6) .kpi-card{ animation-delay:.29s }
.sidebar-nav .nav-link{ animation:gkFade .5s var(--gk-ease) both; }
.modal.show .modal-content{ animation:gkPop .32s var(--gk-ease); }
.btn-primary, .btn-icon, .kpi-card, .card-elevated, .nav-link, .rank-list li{ will-change:transform; }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }

/* =====================================================================
   TABLAS MODERNAS
   ===================================================================== */
.table{ border-collapse:separate; border-spacing:0; margin:0; }
.table > :not(caption) > * > *{ padding:.9rem 1rem; vertical-align:middle; background:transparent; }
.table thead th{
  background:var(--gk-card-2); color:var(--gk-muted); font-weight:700; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.05em; border:none; white-space:nowrap;
}
.table thead th:first-child{ border-top-left-radius:var(--gk-r-sm); border-bottom-left-radius:var(--gk-r-sm); }
.table thead th:last-child{ border-top-right-radius:var(--gk-r-sm); border-bottom-right-radius:var(--gk-r-sm); }
.table tbody td{ border-top:1px solid var(--gk-border-2); }
.table-hover > tbody > tr{ transition:background .15s var(--gk-ease); }
.table-hover > tbody > tr:hover > *{ background:rgba(var(--gk-primary-rgb),.055); }
.table .btn-group-sm .btn{ border-radius:9px; }

/* Buscador propio reutilizable (fuera de DataTables): clase .gk-search */
.gk-search{
  border:1px solid var(--gk-border); border-radius:var(--gk-r-pill);
  background-color:var(--gk-card); color:var(--gk-text); font-weight:500;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2364748b'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='8'/%3E%3Cpath%20d='m21%2021-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:.9rem center; background-size:15px;
  padding:.55rem 1rem .55rem 2.4rem; transition:border-color .18s var(--gk-ease), box-shadow .18s var(--gk-ease);
}
.gk-search::placeholder{ color:var(--gk-muted); }
.gk-search:focus{ border-color:var(--gk-primary); box-shadow:var(--gk-ring); outline:none; background-color:var(--gk-card); }
[data-bs-theme=dark] .gk-search{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2394a3b8'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='8'/%3E%3Cpath%20d='m21%2021-4.3-4.3'/%3E%3C/svg%3E");
}

/* DataTables: barra superior e inferior modernas (el buscador/length se estilizan arriba) */
.dataTables_wrapper .dataTables_info{ color:var(--gk-muted); font-size:13px; padding-top:1rem; }
.dataTables_wrapper .dataTables_paginate{ padding-top:.6rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button{ padding:.35rem .75rem!important; margin:0 2px; color:var(--gk-text-2)!important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{ background:var(--gk-bg-2)!important; border:none!important; color:var(--gk-primary)!important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{ color:#fff!important; }

/* Scrollbars finos en toda la app */
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-thumb{ background:var(--gk-border); border-radius:5px; }
*::-webkit-scrollbar-thumb:hover{ background:var(--gk-muted); }