/**************************************************************
 *  UIverse — Generador de Paletas
 *  Orden de la hoja:
 *  0) Design tokens / reset
 *  1) Layout global (wrap, header/bar, tipografía)
 *  2) Botones y utilidades
 *  3) Swatches (cards, color, meta, tools)
 *  4) Animaciones y microinteracciones
 *  5) Overlay fullscreen (Alt + clic)
 *  6) Hint informativo
 *  7) Playground (Vista previa UI)
 *  8) Responsive
 **************************************************************/

/* =========================
   0) TOKENS / RESET
   ========================= */
:root{
  --bg1:#0b1720;
  --bg2:#0e2e35;
  --card:#0f2230;
  --text:#eaf2f7;
  --muted:#bcd0da;
  --border:rgba(255,255,255,.15);
  --radius:16px;

  /* acentos de la marca */
  --accent1:#fbbf24; /* amber */
  --accent2:#fb7185; /* pink */
  --accent3:#0ea5b7; /* cyan */
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1000px 600px at 20% -10%, #3a179f 0%, transparent 60%),
    radial-gradient(800px 500px at 120% 10%, var(--accent3) 0%, transparent 50%),
    linear-gradient(120deg, var(--bg1), var(--bg2));
  min-height: 100dvh;
}

/* Accesibilidad: foco visible */
:where(a, button, .icon):focus-visible{
  outline: 2px solid color-mix(in srgb, #fff 65%, var(--accent3) 35%);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Respeta preferencia de reducir movimiento */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* =========================
   1) LAYOUT GLOBAL
   ========================= */
.wrap{ max-width:1100px; margin:auto; padding:0 20px; }

/* Header / barra superior */
.bar{
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 0 20px rgba(251,113,133,.25);
}
.bar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
}
h1{
  margin:0; font-size:1.2rem; font-weight:800; letter-spacing:.5px;
  background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3));
  -webkit-background-clip: text; color: transparent;
}
.sub{ color: var(--muted); }

/* =========================
   2) BOTONES / UTILIDADES
   ========================= */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer; font-weight:600;
  transition: transform .12s ease, background .15s ease;
}
.btn.primary{ background:#fff; color:#0b1720; border-color:#fff; }
.btn:hover{ background: rgba(255,255,255,.10); }
.btn:active{ transform: translateY(1px); }
.actions{ display:flex; gap:10px; }

/* =========================
   3) SWATCHES / TARJETAS
   ========================= */
.swatches{
  display:grid; gap:14px; margin:18px 0 40px;
  grid-template-columns: repeat(5, 1fr);
}

.card{
  border:1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  /* animación de entrada (unificada) */
  opacity: 0; transform: translateY(10px);
  animation: fadeInUp .35s ease forwards;
}

.color{
  position: relative; overflow: hidden;
  height:180px;
  display:grid; place-items:center;
  font-weight:800; letter-spacing:.5px;
}
.meta{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px; background: rgba(255,255,255,.04);
  border-top:1px solid var(--border);
}
.hex{ font-weight:600; }
.tools{ display:flex; gap:8px; }

.icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  cursor:pointer; user-select:none;
  transition: background .15s ease, transform .12s ease;
}
.icon[aria-pressed="true"]{ background: rgba(255,255,255,.14); }
.icon:active{ transform: translateY(1px); }

/* =========================
   4) ANIMACIONES / MICRO UX
   ========================= */
@keyframes fadeInUp{
  to { opacity:1; transform: translateY(0); }
}

/* brillo dinámico según cursor */
.color::before{
  content:'';
  position:absolute; inset:-10%;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,.2), transparent 40%);
  opacity:0; transition: opacity .3s ease;
}
.color:hover::before{ opacity:1; }

/* =========================
   5) OVERLAY FULLSCREEN (Alt+Click)
   ========================= */
.overlay{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:2rem; font-weight:800;
  cursor:pointer; background:#000; /* se pisa desde JS */
}
.overlay::after{
  content:'(haz clic para salir)';
  position:absolute; bottom:40px;
  font-size:1rem; font-weight:400; opacity:.7;
}

/* =========================
   6) HINT INFORMATIVO
   ========================= */
.hint{
  display:flex; align-items:center; gap:10px;
  margin:12px 0 18px; padding:10px 12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  border-radius:12px;
}
.hint-tag{
  font-size:.75rem; font-weight:700; letter-spacing:.3px;
  background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3));
  -webkit-background-clip:text; color:transparent;
}
.hint-text{ color: var(--muted); }
kbd{
  background: rgba(255,255,255,.15);
  border:1px solid var(--border);
  padding:2px 6px; border-radius:6px; font-size:.85em;
}
.hint-close{
  margin-left:auto; width:28px; height:28px; line-height:26px;
  border-radius:8px; border:1px solid var(--border);
  background: rgba(255,255,255,.08); color: var(--text);
  cursor:pointer; transition: background .15s ease;
}
.hint-close:hover{ background: rgba(255,255,255,.14); }

/* =========================
   7) PLAYGROUND — VISTA PREVIA UI
   ========================= */
.playground{ margin:20px 0 60px; }
.play-title{ margin:0 0 12px; opacity:.9; }

/* Variables locales que JS sobrescribe con la paleta */
.ui-demo{
  --c0:#111827; /* fondo app */
  --c1:#0f2230; /* sidebar */
  --c2:#1f2c3a; /* tarjetas */
  --c3:#3b82f6; /* acento/cta */
  --c4:#fbbf24; /* acento secundario */

  display:grid; grid-template-columns:230px 1fr;
  min-height:420px;
  border:1px solid var(--border);
  border-radius:16px; overflow:hidden;
  background: var(--c0);
}

/* Sidebar */
.ui-sidebar{
  background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 85%, #000 15%), var(--c1));
  border-right:1px solid var(--border);
  padding:16px;
}
.ui-logo{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; font-weight:800;
  color:#0b1720; background: var(--c4);
  margin-bottom:16px;
}
.ui-nav{ display:grid; gap:8px; }
.ui-nav a{
  text-decoration:none;
  color: color-mix(in srgb, #fff 88%, var(--c0) 12%);
  padding:8px 10px; border-radius:10px;
}
.ui-nav a:hover{ background: color-mix(in srgb, #fff 8%, var(--c1) 92%); }

/* Main */
.ui-main{ padding:16px; display:grid; gap:16px; }
.ui-topbar{
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  background: color-mix(in srgb, var(--c2) 70%, #000 30%);
  border:1px solid var(--border); border-radius:12px; padding:10px;
}
.ui-search{
  flex:1; min-width:180px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--border); border-radius:10px; color:#fff;
  padding:10px 12px;
}
.ui-cta{
  border:1px solid transparent;
  background: var(--c3); color:#0b1720; font-weight:800;
  padding:10px 14px; border-radius:10px; cursor:pointer;
}
.ui-cta:hover{ filter: brightness(1.06); }

.ui-grid{ display:grid; gap:14px; grid-template-columns: repeat(3, 1fr); }

.ui-card{
  border:1px solid var(--border); border-radius:14px;
  background: var(--c2); padding:12px;
}
.ui-thumb{
  height:120px; border-radius:10px; margin-bottom:10px;
  background:
    radial-gradient(80% 100% at 10% 0%, var(--c4) 0%, transparent 60%),
    radial-gradient(120% 100% at 90% 10%, var(--c3) 0%, transparent 50%),
    color-mix(in srgb, var(--c2) 65%, #000 35%);
}
.ui-btn{
  margin-top:10px;
  border:1px solid color-mix(in srgb, var(--c3) 65%, #fff 35%);
  background: color-mix(in srgb, var(--c3) 85%, #fff 15%);
  color:#0b1720; padding:8px 12px; border-radius:10px; cursor:pointer;
}
.ui-btn:hover{ filter: brightness(1.05); }

/* =========================
   Galería de paletas guardadas
   ========================= */
.saved-area{ margin: 18px 0 80px; }
.saved-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.saved-actions{ display:flex; gap:10px; align-items:center; }
.saved-input{
  min-width:260px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:rgba(255,255,255,.06); color:var(--text);
}
.saved-grid{
  margin-top:12px;
  display:grid; gap:12px;
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 980px){ .saved-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 680px){ .saved-grid{ grid-template-columns: repeat(2, 1fr); } }

.saved-item{
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
  background:var(--card);
}
.saved-swatches{
  display:grid; grid-template-columns: repeat(5, 1fr);
  height:80px;
}
.saved-swatch{ width:100%; height:100%; }

.saved-meta{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px; border-top:1px solid var(--border);
}
.saved-name{ font-size:.9rem; color:var(--muted); }
.saved-buttons{ display:flex; gap:8px; }
.saved-btn{
  border:1px solid var(--border); background:rgba(255,255,255,.06);
  color:var(--text); border-radius:8px; padding:6px 10px; cursor:pointer;
}
.saved-btn:hover{ background:rgba(255,255,255,.12); }


/* =========================
   8) RESPONSIVE
   ========================= */
@media (max-width: 900px){
  .swatches{ grid-template-columns: 1fr 1fr; }
  .ui-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .swatches{ grid-template-columns: 1fr; }
  .ui-demo{ grid-template-columns: 1fr; }
  .ui-grid{ grid-template-columns: 1fr; }
}