/* ============================================================
   GoKonfirma — gk-ui.css
   Sistema de diseño compartido: modales (alert/confirm/prompt) y
   select personalizado — para dejar de depender de diálogos
   nativos del navegador y de <select> sin estilo, con una sola
   apariencia en todo el sitio (admin, panel, constructor, landing,
   auth). Regla 60-30-10: 60% blanco (superficies), 30% gris-tinte
   neutro (--bg-tint, hover/paneles secundarios), 10% acento de
   color usado solo en splashes puntuales (botones, íconos, estados
   activos) — NUNCA como fondo de página completo. El sistema de
   splash (.gk-splash/.gk-icon-glow) ya vive en site.css; aquí solo
   se reutiliza para los componentes nuevos (modal/select).
   ============================================================ */

:root{
  --gk-accent: var(--lum-violet, #2563EB);
  --gk-accent2: var(--lum-blue, #0EA5E9);
  --gk-radius: 18px;
  --gk-shadow: 0 18px 46px -22px rgba(14,14,28,.22), 0 2px 8px rgba(14,14,28,.06);
}

/* ── Overlay de fondo para modales ── */
.gk-scrim{
  position:fixed;inset:0;z-index:9990;
  background:rgba(14,14,28,.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity .22s ease;
}
.gk-scrim.show{ opacity:1; pointer-events:auto; }

/* ── Modal (alert/confirm/prompt) — blanco limpio + splash de
   color detrás del ícono (10% de acento, no en toda la tarjeta) ── */
.gk-modal{
  width:min(420px, 100%);
  padding:28px 26px 22px;
  text-align:center;
  background:#fff;
  border-radius: var(--gk-radius);
  box-shadow: var(--gk-shadow);
  transform:translateY(14px) scale(.96);
  opacity:0;
  transition:transform .32s cubic-bezier(.16,1,.3,1), opacity .28s ease;
}
.gk-scrim.show .gk-modal{ transform:none; opacity:1; }
.gk-modal-icon{
  position:relative; isolation:isolate;
  width:52px;height:52px;border-radius:50%;margin:0 auto 14px;
  display:grid;place-items:center;font-size:1.3rem;color:#fff;
  background:var(--grad, linear-gradient(120deg,#2563EB,#0EA5E9));
}
.gk-modal-icon::before{
  content:'';position:absolute;z-index:-1;inset:-55%;
  background:radial-gradient(circle, var(--gk-accent) 0%, transparent 70%);
  filter:blur(14px);opacity:.55;pointer-events:none;
}
.gk-modal.danger .gk-modal-icon{ background:linear-gradient(120deg,#F53D5B,#F5875B); }
.gk-modal.danger .gk-modal-icon::before{ background:radial-gradient(circle, #F53D5B 0%, transparent 70%); }
.gk-modal h3{ margin:0 0 8px; font:700 1.08rem/1.35 'Inter',system-ui,sans-serif; color:var(--ink, #0E0E1C); }
.gk-modal p{ margin:0 0 20px; font:400 .92rem/1.55 'Inter',system-ui,sans-serif; color:var(--ink-2, #4A4E63); white-space:pre-line; }
.gk-modal-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.gk-modal-btn{
  flex:1 1 auto; min-width:100px;
  padding:11px 18px; border-radius:99px; border:1px solid transparent;
  font:700 .88rem/1 'Inter',system-ui,sans-serif; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.gk-modal-btn:active{ transform:scale(.96); }
.gk-modal-btn.primary{
  color:#fff; background:var(--grad, linear-gradient(120deg,#2563EB,#0EA5E9));
  box-shadow:0 10px 24px -10px color-mix(in srgb, var(--gk-accent) 55%, transparent);
}
.gk-modal-btn.primary:hover{ box-shadow:0 14px 30px -10px color-mix(in srgb, var(--gk-accent) 65%, transparent); }
.gk-modal.danger .gk-modal-btn.primary{ background:linear-gradient(120deg,#F53D5B,#F5875B); box-shadow:0 10px 24px -10px rgba(245,61,91,.4); }
.gk-modal-btn.ghost{
  color:var(--ink, #0E0E1C); background:var(--bg-tint, #F7F8FC);
  border-color:transparent;
}
.gk-modal-btn.ghost:hover{ background:#EDEFF7; }
@media(max-width:420px){ .gk-modal-actions{ flex-direction:column-reverse; } }

/* ── Select personalizado (progressive enhancement) ──────────
   GKUI.enhanceSelects() envuelve cada <select> en este markup y
   lo oculta visualmente (sr-only), manteniendo el <select> real
   para que name/value/onchange/formularios sigan funcionando
   exactamente igual — solo cambia la apariencia. Fondo blanco
   liso (60%), acento solo en el borde/foco (10%). */
.gk-select-wrap{ position:relative; display:block; width:100%; }
.gk-select-wrap select.gk-select-native{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; pointer-events:none;
}
.gk-select-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 16px; border-radius:14px; cursor:pointer;
  font:600 .92rem/1.3 'Inter',system-ui,sans-serif; color:var(--ink, #0E0E1C);
  background:#fff;
  border:1px solid var(--line, rgba(14,14,28,.10));
  transition:border-color .18s ease, box-shadow .18s ease;
}
.gk-select-btn:hover{ border-color:color-mix(in srgb, var(--gk-accent) 45%, transparent); }
.gk-select-wrap.open .gk-select-btn{
  border-color:var(--gk-accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--gk-accent) 14%, transparent);
}
.gk-select-btn span.gk-select-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gk-select-btn i{ font-size:.72rem; color:var(--muted, #6B6F80); transition:transform .25s cubic-bezier(.16,1,.3,1); flex:0 0 auto; }
.gk-select-wrap.open .gk-select-btn i{ transform:rotate(180deg); }
.gk-select-wrap[data-disabled="1"] .gk-select-btn{ opacity:.55; cursor:not-allowed; }
.gk-select-menu{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:70;
  max-height:280px; overflow-y:auto; padding:6px;
  background:#fff;
  border:1px solid var(--line-soft, rgba(14,14,28,.045));
  border-radius:16px; box-shadow:var(--gk-shadow);
  opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top center;
  pointer-events:none; transition:opacity .16s ease, transform .18s cubic-bezier(.16,1,.3,1);
}
.gk-select-wrap.open .gk-select-menu{ opacity:1; transform:none; pointer-events:auto; }
.gk-select-opt{
  padding:9px 12px; border-radius:10px; cursor:pointer;
  font:600 .88rem/1.3 'Inter',system-ui,sans-serif; color:var(--ink, #0E0E1C);
  transition:background .12s ease;
}
.gk-select-opt:hover{ background:var(--bg-tint, #F7F8FC); }
.gk-select-opt.sel{ background:color-mix(in srgb, var(--gk-accent) 10%, transparent); color:var(--gk-accent); }
.gk-select-opt.disabled{ opacity:.4; cursor:not-allowed; }
@media (prefers-reduced-motion: reduce){
  .gk-select-menu, .gk-select-btn i, .gk-modal, .gk-scrim{ transition:none; }
}

/* ── Formularios unificados ──────────────────────────────────
   Etiqueta + control con el mismo look en todo el sitio (blanco
   liso, acento solo en el foco). Se aplica automáticamente a los
   controles ya existentes (input.in, select.in, textarea.in). */
.gk-field{ display:flex; flex-direction:column; gap:6px; text-align:left; }
.gk-field label, label.gk-label{
  font:700 .74rem/1.2 'Inter',system-ui,sans-serif; letter-spacing:.02em;
  color:var(--muted, #6B6F80); text-transform:uppercase;
}
input.in, select.in, textarea.in, .gk-input{
  padding:12px 16px; border-radius:14px; width:100%; box-sizing:border-box;
  font:500 .95rem/1.4 'Inter',system-ui,sans-serif; color:var(--ink,#0E0E1C);
  background:#fff;
  border:1px solid var(--line, rgba(14,14,28,.10));
  transition:border-color .18s ease, box-shadow .18s ease;
}
input.in:focus, select.in:focus, textarea.in:focus, .gk-input:focus{
  outline:none; border-color:var(--gk-accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--gk-accent) 12%, transparent);
}
input.in::placeholder, textarea.in::placeholder{ color:var(--muted, #6B6F80); opacity:.75; }