:root{
      /* Paleta minimalista profesional */
      --bg-1:#0F172A; /* azul muy oscuro */
      --bg-2:#1E293B; /* gris azulado */
      --text:#F9FAFB; /* texto principal */
      --muted:#94A3B8; /* texto secundario */
      --primary:#3B82F6; /* azul vibrante */
      --primary-700:#2563EB; /* hover */
      --accent:#00F5A0; /* para registro */
      --ring:#60A5FA;
      --danger:#EF4444;
      --surface: rgba(255,255,255,0.08); /* glass */
      --border: rgba(255,255,255,0.15);
      --shadow: 0 10px 30px rgba(2,6,23,0.45);
      --radius: 18px;
      --transition: 180ms ease;
}
body{
    color:var(--text);
    background: linear-gradient(140deg,var(--bg-1),var(--bg-2));
}
.hero{
    position:relative; padding:40px; border-radius:var(--radius);
    background: radial-gradient(1200px 400px at -20% -10%, rgba(59,130,246,0.18), transparent 60%),
                  radial-gradient(1200px 400px at 120% 110%, rgba(0,245,160,0.18), transparent 60%),
                  linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    border:1px solid var(--border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
    min-height: 520px;
    display:flex; flex-direction:column;
    margin:15px;
}
.hero h1{ margin:0 0 10px; font-size: clamp(28px, 4vw, 40px); line-height:1.15 }
.hero p{ margin:0; color:var(--muted); max-width:52ch }
.logo{
      display:flex; align-items:center; gap:10px;margin-bottom:28px;
      font-weight:700; letter-spacing:.4px; font-size:18px; color:var(--text)
}
.logo-dot{ width:10px; height:10px; border-radius:50%; background:linear-gradient(45deg,var(--primary),var(--accent)); box-shadow:0 0 20px rgba(59,130,246,.7)}


.etiqueta {
    position:relative; padding:40px; border-radius:var(--radius);
    background: radial-gradient(1200px 400px at -20% -10%, rgba(59,130,246,0.18), transparent 60%),
                  radial-gradient(1200px 400px at 120% 110%, rgba(0,245,160,0.18), transparent 60%),
                  linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    border:1px solid var(--border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
    display:flex; flex-direction:column;
    margin:15px;
}

.wrap{ width:100%; max-width:1080px; padding:24px; }

.grid{
    display:grid; gap:28px;
    grid-template-columns: 1.1fr 1fr;
    align-items:stretch;
}
@media (max-width: 900px){ .grid{ grid-template-columns:1fr; } }
.card{
      background: var(--surface);
      border:1px solid var(--border);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      padding: 26px;
      backdrop-filter: blur(14px);
}
/*DISPLAY DEL INPUT*/
.input{
      width:100%; padding:14px 16px 14px 44px;
      background: rgba(255,255,255,0.08);
      color: var(--text);
      border:1px solid var(--border);
      border-radius: 12px;
      outline: none;
      transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.input::placeholder{ color:#c9d3e6aa }
.input:focus{ border-color:var(--ring); box-shadow:0 0 0 4px rgba(96,165,250,0.22); background: rgba(255,255,255,0.12);color:white; }

/*DISPLAY DE BOTONES*/
.btn{
    display:inline-grid; place-items:center; width:100%; padding:13px 16px; border-radius:12px; font-weight:700; cursor:pointer;
    border:1px solid transparent; transition: transform var(--transition), filter var(--transition), background var(--transition);
}
.btn:hover{ transform: translateY(-1px) }
.btn-primary{ background: var(--primary); color:white }
.btn-primary:hover{ filter: brightness(1.06); background: var(--primary-700) }
.btn-accent{ background: var(--accent); color:#0b1220 }
.btn-accent:hover{ filter: brightness(1.06) }

/* FORMULARIO LOGIN Y REGISTRO */
.tabs{ display:flex; gap:8px; background:rgba(255,255,255,0.06); border:1px solid var(--border); border-radius: 14px; padding:6px; margin-bottom: 20px }
.tab-btn{
      flex:1; text-align:center; padding:12px; border-radius:10px; cursor:pointer; user-select:none; font-weight:600;
      color:var(--muted); border:1px solid transparent; transition: transform var(--transition), background var(--transition), color var(--transition);
}
.tab-btn:hover{ transform: translateY(-1px) }
.tab-btn.active{ background:rgba(59,130,246,0.18); color:var(--text); border-color:rgba(59,130,246,0.35) }
.tab-btn[data-tab="register"].active{ background:rgba(0,245,160,0.18); border-color:rgba(0,245,160,0.35) }
form{ display:grid; gap:14px; }
.field{ display:grid; gap:8px }
label{ font-size: 14px; color:var(--muted) }
.control{ position:relative }
.icon{
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    width:18px; height:18px; opacity:.9
}
.hidden{ display:none }

.badge{ padding:6px 10px; border:1px solid var(--border); border-radius:99px; font-size:12px; color:var(--muted); backdrop-filter: blur(8px) }

.account-badge {
    margin: 8px;
    display: inline-block;
    position: relative;
}

.account-check {
    display: none; /* ocultar el checkbox original */
}

.account-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 4px;
    background-color: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    min-width: 120px;
    text-align: center;
}

.account-check:checked + .account-label {
    background-color: #0d6efd;
    color: white;
    transform: scale(0.95); /* efecto de hundirse */
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);
}

.extra-options {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
    background: #f1f3f5;
    margin-top: 6px;
    padding: 0 10px;
    border-radius: 8px;
}

/* Cuando el checkbox esté marcado, mostrar las opciones */
.account-check:checked ~ .extra-options {
    max-height: 200px;
    opacity: 1;
    padding: 10px;
}

.checkout {
    position: relative;
    padding: 40px;
    border-radius: var(--radius);
    background: radial-gradient(1200px 400px at -20% -10%, rgba(255, 200, 150, 0.25), transparent 60%),
                radial-gradient(1200px 400px at 120% 110%, rgba(150, 200, 255, 0.25), transparent 60%),
                linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,245,245,0.8));
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
    min-height: 520px;
    display: flex;
    flex-direction: column;
    margin: 15px;
    color: #222; /* 👈 asegura letras oscuras */
}