/* ---------- Base & tokens ---------- */
:root{
  --bg: #eef2f7;
  --text: #0f172a;         /* slate-900 */
  --muted: #6b7280;        /* gray-500 */
  --ring: rgba(255,255,255,.6);
  --card: rgba(255, 255, 255, 0.256);
  --card-border: rgba(255,255,255,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.08), 0 2px 10px rgba(0,0,0,.06);
  /* Responsive viewport */
  --space: clamp(16px, 4vw, 48px);     
  --space-sm: clamp(10px, 2.5vw, 20px); 
  --radius: clamp(16px, 2.2vw, 22px);  
  --card-w: clamp(320px, 92vw, 560px); 
  --tap: 44px;                         
}

*{ box-sizing: border-box; }
html,body{ 
  height: 100%;
  margin: 0;
  overflow-x: hidden;
 }
body{
  position: relative;
  margin:0;
  padding:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* Background layers */
body::before,
body::after {
  content:"";
  position: fixed;
  inset: -20svh -20vw;  
  width: auto;
  height: auto;
  z-index: -2;
  pointer-events: none;
}

/* Background base */
body::before {
  background:
    radial-gradient(1200px 800px at 50% -200px, #cfe4ff 0%, #e8f0ff 35%, #f6f7fb 70%),
    var(--bg);
}

/* Background image */
body::after {
  z-index: -1;
  background: url("assets/clouds.jpg") center / cover no-repeat;
  opacity: .55;
  filter: saturate(1.05) contrast(1.02);
}


/* ---------- Sky background with optional image ---------- */
.sky-bg{
  /* fallback gradient */
  background: radial-gradient(1200px 800px at 50% -200px, #cfe4ff 0%, #e8f0ff 35%, #f6f7fb 70%), var(--bg);
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
}
.sky-bg::before{
  /* wallpapper overlay if exists */
  content:"";
  position:absolute; inset:-1px;
  background: url("assets/clouds.jpg") center/cover no-repeat;
  opacity:.55;
  pointer-events:none;
  filter: saturate(1.05) contrast(1.02);
}
.sky-bg::after{
  content:"";
  position:absolute; inset:-10% -6%;
  background:
    radial-gradient(60% 40% at 50% -10%, rgba(255,255,255,.65) 0 2px, transparent 3px) 0 0/100% 100%,
    radial-gradient(100% 100% at 50% -20%, rgba(255,255,255,.35), transparent 60%);
  pointer-events:none;
  mask: radial-gradient(80% 60% at 50% -10%, black 0 40%, transparent 60%);
}


/* ---------- Shell centering ---------- */
.main-shell{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding: clamp(16px, 4vw, 48px);
}

/* ---------- Glass card ---------- */
.glass-card{
  width: var(--card-w);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 28px) clamp(10px, 2vw, 12px);
  background: var(--card);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow: var(--shadow);
}

/* ---------- Header ---------- */
.card-header{
  text-align:center;
  margin-bottom: 18px;
}
.logo-dot{
  width:46px; height:46px;
  margin: 0 auto 10px;
  border-radius: 12px;
  background: url("assets/sebas2315.png") center/cover no-repeat;
  box-shadow: 0 6px 16px rgba(0,0,0,.08) inset, 0 6px 12px rgba(17,17,17,.06);
}
.main-title{
  margin: 0;
  font-size: clamp(22px, 3.5vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
}
.subtitle{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* ---------- Inputs ---------- */
.input-section{ margin-top: 10px; }
.input-row{
  display:flex; gap:10px;
  align-items:center;
  margin-bottom: 12px;
}
.input{
  flex:1;
  height: 46px;
  padding: 0 14px;
  color: #ffffff;
  border-radius: 15px; 
  background: rgba(0, 0, 0, 0.3);
  border: 10px solid rgba(0, 0, 0, 0);
  outline: none;
  font-size: 15px;
  height: max(44px, var(--tap));
  transition: box-shadow .2s, border-color .2s, background .2s;
}
.input:hover{ 
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  background: rgba(0, 0, 0, 0.6);
}
.input::placeholder{color:#ffffffa2;}

/* ---------- Buttons ---------- */
.btn{
  height:46px;
  padding: 0 16px;
  border:none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .15s ease, opacity .2s;
  height: max(44px, var(--tap));
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  color: rgba(236, 236, 236, 0.578);
  background: rgba(0, 0, 0, 0.3);
  border: 10px solid rgba(0, 0, 0, 0);
}
.btn-primary:hover{opacity:.92; color:white; background: rgba(0, 0, 0, 0.5);}

.btn-dark{
  color: rgba(236, 236, 236, 0.578);
  background: rgba(0, 0, 0, 0.3);
  border: 10px solid rgba(0, 0, 0, 0);
}
.btn-dark:hover{opacity:.92; color:white; background: rgba(0, 0, 0, 0.5);}
.w-100{ width:100%; }

.btn.eliminar{
  color: rgba(236, 236, 236, 0.578);
  display: block;
  margin: 14px auto 0; 
  width: fit-content;
  background: rgba(0, 0, 0, 0.3);
  border: 10px solid rgba(0, 0, 0, 0);
}
.btn.eliminar:hover{opacity:.92; color:white; background: rgba(0, 0, 0, 0.5);}

.btn.ghost{
  color: rgba(236, 236, 236, 0.578);
  display: block;
  margin: 14px auto 0; 
  width: fit-content;
  background: rgba(0, 0, 0, 0.3);
  border: 10px solid rgba(0, 0, 0, 0);
}
.btn.ghost:hover{opacity:.92; color:white; background: rgba(0, 0, 0, 0.5);}
#listaAmigos[hidden]{ display:none; }


/* ---------- Lists ---------- */
.list, .result{
  margin: 8px 0 14px;
  padding: 0;
  list-style:none;
  max-height: 190px;
  overflow:auto;
}
.list li, .result li{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(0,0,0,.04);
  box-shadow: 0 4px 10px rgba(0,0,0,.03);
  font-size: 14px;
  margin-bottom: 8px;
}

/* —— Toasts events —— */
.toast-root{
  position: fixed;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  pointer-events: none; 
}

.toast{
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  min-width: 300px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  font: 600 14px/1.2 "Inter", system-ui, sans-serif;
  color: #0f172a;
  transform: translateY(10px);
  opacity: 0;
  animation: toast-in .22s ease-out forwards;
}
.toast .icon{ font-size: 16px; line-height: 1; }
.toast .text{ flex:1; }
.toast .close{
  border: 0; background: transparent; cursor: pointer;
  font-size: 16px; opacity: .6;
}
.toast .close:hover{ opacity: 1; }

.toast.success{ box-shadow: 0 10px 26px rgba(16,185,129,.18); }
.toast.info   { box-shadow: 0 10px 26px rgba(59,130,246,.18); }
.toast.warn   { box-shadow: 0 10px 26px rgba(234,179,8,.18); }
.toast.error  { box-shadow: 0 10px 26px rgba(239,68,68,.18); }

.toast.is-leaving{
  animation: toast-out .18s ease-in forwards;
}

@keyframes toast-in{
  from{ transform: translateY(10px); opacity: 0; }
  to  { transform: translateY(0);    opacity: 1; }
}
@keyframes toast-out{
  from{ transform: translateY(0);    opacity: 1; }
  to  { transform: translateY(10px); opacity: 0; }
}

/* ---------- Small devices responsive ---------- */

@media (max-width: 480px){
  .input-row{
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
  .input{ flex: 1 1 100%; }
  .btn{   flex: 1 1 100%; }
  .glass-card{ box-shadow: 0 6px 18px rgba(0,0,0,.08); }
  .logo-dot{ width:40px; height:40px; }
  .main-title{ font-size: clamp(20px, 6vw, 24px); }
}

@media (min-width: 481px) and (max-width: 768px){
  .input-row{
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
  .input{ flex: 1 1 auto; min-width: 240px; }
  .btn{   flex: 0 0 auto; }
  .list, .result{ max-height: min(42svh, 360px); }
}

@media (min-width: 769px){
  body{ padding: clamp(24px, 4vw, 64px); } 
  .list, .result{ max-height: 380px; }
}