/* styles.css */
/* Tema: Noche estrellada elegante, responsive */

/* Reset y variables */
:root{
  --bg:#070718;
  --card:#0b1220;
  --accent:#b31f1f;/*color de los botones generar y descargar */
  --muted:#ffffff;/*color del texto debajo del titulo*/
  --glass:rgba(255, 255, 255, 0);/*color del cuadro del codigo QR*/
  --text:#ffffff;/*color generar del texto de toda la pagina*/
  --card-radius:14px;
  --container-width:1100px;
  --max-mobile-width:980px;
}

/* Fuente base y body */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;}

/* Estrella sutil en fondo: múltiples capas */
body::before{
  content:"";
  position:fixed;inset:0;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.08), transparent 40%),
    radial-gradient(1.5px 1.5px at 60% 20%, rgba(255,255,255,0.06), transparent 40%),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.04), transparent 40%),
    linear-gradient(180deg, rgba(8,12,25,0.6), rgba(2,10,20,0.6));
  z-index:-2;
  transform:translateZ(0);
  filter:blur(0.2px);
}

/* Suave gradiente y nebulosa */
body::after{
  content:"";
  position:fixed;left:-20%;top:-40%;width:140%;height:140%;
  background:radial-gradient(600px 300px at 20% 20%, rgba(124,92,255,0.12), transparent 20%),
             radial-gradient(400px 200px at 80% 80%, rgba(0,200,255,0.06), transparent 20%);
  z-index:-3;
  pointer-events:none;
}

/* Contenedor principal */
.container{max-width:var(--container-width);margin:0 auto;padding:18px;}/*franja superior del emcabezado*/

/* Topbar */
.topbar{backdrop-filter:blur(6px);background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-bottom:1px solid rgba(255,255,255,0.03)}
.topbar .container{display:flex;align-items:center;justify-content:space-between}
.title{font-weight:700;font-size:18px}
.datetime{font-size:14px;color:var(--muted)}

/* Layout: grid */
.main-grid{display:grid;grid-template-columns:1fr 420px;gap:26px;margin-top:18px;padding-bottom:40px}
@media (max-width:980px){.main-grid{grid-template-columns:1fr;padding:12px}}

/* Card */
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:18px;border-radius:var(--card-radius);box-shadow:0 6px 30px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.03)}
.lead{color:var(--muted);margin-top:8px}

/* Form */
.form-row{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
input[type="text"]{flex:1;padding:10px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.05);color:var(--text)}
select,input[type="color"]{padding:8px;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.05);color:var(--text)}
.small{font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}
.chip{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.02);font-size:13px;display:inline-flex;align-items:center;gap:8px}

/* Buttons */
.btn{background:var(--accent);color:#fff;border:0;padding:10px 12px;border-radius:10px;cursor:pointer;font-weight:600}
.btn.secondary{background:#1b2330}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text)}

/* Preview */
.preview{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.preview-head{display:flex;justify-content:space-between;align-items:center}
.qr-box{background:var(--glass);padding:18px;border-radius:12px;display:flex;align-items:center;justify-content:center;min-height:260px;min-width:260px;overflow:hidden}
.preview-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}

/* Footer */
.footer{border-top:1px solid rgba(255,255,255,0.03);margin-top:40px;padding:16px 0}
.footer .container{display:flex;justify-content:space-between;align-items:center;gap:12px}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(3,6,12,0.6)}
.modal[aria-hidden="false"]{display:flex}
.modal-content{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:20px;border-radius:12px;max-width:420px;text-align:center;border:1px solid rgba(255,255,255,0.04)}

/* Pequeñas adaptaciones */
@media (max-width:480px){
  .qr-box{min-height:200px;min-width:200px}
  .title{font-size:16px}
}