/* Tequila UI v2 — Futurista Pro (Dark/Light), Glass + Neon, Accesibilidad y Animaciones */
/* —————————————————————————————————————————————————————————————————————————— */
/* 1) Tokens y temas */
:root{
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  --radius-sm: 10px; --radius: 14px; --radius-lg: 18px;
  --shadow-1: 0 10px 30px rgba(2,6,23,.45);
  --shadow-2: 0 18px 60px rgba(2,6,23,.65);
  --bezel: 0 1px 0 rgba(255,255,255,.06) inset, 0 -8px 24px rgba(0,0,0,.35) inset;
  --ring: 0 0 0 3px rgba(0,168,255,.20);

  /* Dark (default) */
  --bg: #05060a;          /* background sólido */
  --bg-soft: #0b0f16;     /* panel base */
  --text: #e9f1ff;
  --muted: #9fb0c8;
  --line: rgba(255,255,255,.06);

  --grad-1: linear-gradient(135deg,#00ffd5,#00a8ff 40%,#9b5cff);
  --grad-2: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  --glass: rgba(255,255,255,.04);

  --brand-1: #00ffd5;  /* acento vivo */
  --brand-2: #00a8ff;  /* acento secundario */
  --danger:  #ff6b6b;
}

/* Tema claro */
[data-theme="light"]{
  --bg: #f7f9fc;
  --bg-soft: #ffffff;
  --text: #0b1020;
  --muted: #55627a;
  --line: rgba(0,0,0,.08);

  --grad-1: linear-gradient(135deg,#00a8ff,#6c78ff 40%,#9b5cff);
  --grad-2: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
  --glass: rgba(0,0,0,.03);
}

/* 2) Base */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-sans);
  background:
    radial-gradient(1100px 520px at 10% 10%, rgba(155,92,255,.08), transparent 35%),
    radial-gradient(900px 500px at 90% 80%, rgba(0,168,255,.07), transparent 35%),
    var(--bg);
  color:var(--text); line-height:1.45;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* 3) Layout */
.container{max-width:1240px;margin:0 auto;padding:22px}
.grid{display:grid;gap:20px}
.col-12{grid-column:1/-1}

/* 4) Topbar */
.topbar{
  position:sticky; top:0; z-index:100;
  backdrop-filter:saturate(1.1) blur(7px);
  background: var(--grad-2);
  border-bottom:1px solid var(--line);
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.4px}
.brand .logo{
  width:44px; height:44px; border-radius:12px;
  background: var(--grad-1);
  color:#061625; display:grid; place-items:center; font-weight:900;
  box-shadow: 0 10px 30px rgba(0,168,255,.15), inset 0 -10px 26px rgba(255,255,255,.10);
}
.nav{display:flex; gap:10px; align-items:center}
.nav a{
  color:var(--muted); text-decoration:none; font-weight:700;
  padding:9px 12px; border-radius:10px; transition:.16s ease;
}
.nav a.active{
  color:var(--text); background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid var(--line);
}
.nav a:hover{transform:translateY(-2px); color:var(--brand-2)}

/* Control derecha (tema, etc.) */
.top-ctrls{display:flex; gap:10px; align-items:center}
.icon-btn{
  appearance:none; border:1px solid var(--line); background:var(--grad-2); color:var(--text);
  padding:8px 10px; border-radius:10px; cursor:pointer; transition:.15s ease; position:relative;
}
.icon-btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-1)}
.icon-btn:focus-visible{outline:none; box-shadow:var(--ring)}
.badge{
  font-size:.75rem; font-weight:800; padding:2px 8px; border-radius:999px; color:#061625;
  background:var(--grad-1); display:inline-flex; align-items:center; gap:6px;
}

/* 5) Tarjetas (Glass + Neon edges) */
.card{
  background: var(--grad-2);
  border:1px solid var(--line);
  border-radius:16px; padding:18px;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(9px) saturate(1.1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: rgba(0,168,255,.25) }

/* 6) Productos */
.product{padding:0; overflow:hidden}
.product .media{
  position:relative; display:block; width:100%; height:0; padding-bottom:66%;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.10));
}
.product img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.product .body{padding:14px; display:flex; flex-direction:column; gap:10px}
.product h3{margin:0; font-size:1.06rem}
.product p{margin:0; color:var(--muted)}

/* 7) Formularios */
label{display:block; font-weight:700; color:var(--muted); margin-bottom:6px}
.input, input[type="text"],input[type="email"],input[type="number"],input[type="password"],select,textarea{
  width:100%; padding:11px 12px; border-radius:12px; color:var(--text);
  border:1px solid var(--line); background: linear-gradient(180deg, var(--glass), transparent);
  box-shadow: var(--bezel); transition: box-shadow .12s ease, transform .08s ease, border-color .12s;
}
input:focus,select:focus,textarea:focus{outline:none; box-shadow: var(--ring); border-color: rgba(0,168,255,.35); transform: translateY(-1px)}
fieldset{border:1px solid var(--line); border-radius:14px; padding:10px}

/* 8) Botones */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background: var(--grad-1); color:#061625; font-weight:900;
  padding:10px 14px; border-radius:12px; border:none; cursor:pointer;
  box-shadow: 0 8px 30px rgba(0,168,255,.13);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{ transform: translateY(-3px); box-shadow: 0 18px 50px rgba(0,168,255,.18) }
.btn.ghost{ background:transparent; color:var(--muted); border:1px solid var(--line) }
.btn.danger{ background:#d24848; color:#fff }

/* 9) Tablas */
.table{width:100%; border-collapse:collapse; font-size:.95rem; border-radius:14px; overflow:hidden}
.table thead th{
  text-align:left; padding:12px; color:var(--muted);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.table tbody td{padding:12px; border-top:1px solid var(--line)}
.table .chip{display:inline-flex; align-items:center; font-weight:800; font-size:.78rem; padding:2px 8px; border-radius:999px; background: rgba(255,255,255,.06)}

/* 10) Totales / resúmenes */
.summary{
  display:flex; flex-direction:column; gap:6px; padding:12px; border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent); border:1px solid var(--line);
}
.summary strong{font-size:1.04rem}

/* 11) Auth */
.auth{min-height:100vh; display:grid; place-items:center; padding:40px}
.auth .card{max-width:480px; width:100%; padding:28px}

/* 12) Alerts */
.alert{padding:12px; border-radius:12px; border:1px solid var(--line); background: rgba(255,255,255,.06); color:#ffdede}
.alert.success{color:#cfffe7; border-color:rgba(0,210,140,.35); background: rgba(0,210,140,.10)}

/* 13) Helpers */
.hint{color:var(--muted); font-size:.92rem}
.actions{display:flex; gap:12px; align-items:center}
.small{font-size:.86rem; color:var(--muted)}
.badge-outline{border:1px solid var(--line); border-radius:999px; padding:2px 8px}

/* 14) Responsivo */
@media (max-width: 1024px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 720px){
  .grid{grid-template-columns:1fr; gap:14px}
  .nav{display:none}
}

/* 15) Accesibilidad */
:focus{outline:none}
:focus-visible{box-shadow: var(--ring); border-radius:10px}