/* =========================
   CONFIGURACIÓN RÁPIDA
   ========================= */
:root{
  /* Cambia el fondo aquí */
  --bg-image: url('fondo.jpg');
  --bg-overlay: rgba(0,0,0,0.55);
}

html,body{height:100%;margin:0}
body{
  background:
    radial-gradient(#160b0b 1px, transparent 2px) 0 0/8px 8px,
    radial-gradient(#160b0b 1px, transparent 2px) 4px 4px/8px 8px,
    #0b0000;
  color:#ffe9e0;
  font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
  position:relative;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;
  background:linear-gradient(var(--bg-overlay),var(--bg-overlay)),var(--bg-image);
  background-size:cover;background-position:center;background-attachment:fixed;z-index:-1;
}

/* Banner */
.banner{
  background: linear-gradient(90deg,#2a0000,#7a0000,#2a0000);
  color:#fff;text-align:center;padding:14px 10px;
  border-bottom:3px double #ffb3a8;text-shadow:0 0 8px #ffb3a8;letter-spacing:.5px;
}
.banner small{opacity:.9}

/* Layout tabla */
table.layout{
  width:100%;max-width:1100px;margin:10px auto 40px;
  border:3px outset #ffb3a8;background:rgba(20,0,0,.75);border-collapse:collapse;
}
td{vertical-align:top}
.left,.right{
  width:220px;background:linear-gradient(#1c0000,#290000);
  border-right:2px groove #ffb3a8;padding:10px;
}
.right{border-left:2px groove #ffb3a8;border-right:none}
.center{padding:16px}

/* Nav */
.nav a{
  display:block;margin:6px 0;padding:8px 10px;
  background:linear-gradient(#200000,#a00000);
  color:#100;text-decoration:none;font-weight:bold;
  border:2px ridge #ffb3a8;box-shadow:inset 0 0 10px #ffb3a8, 0 0 6px #ff8f7f;
}
.nav a:hover{filter:brightness(1.15) contrast(1.05)}

/* Titulos */
.h1{font-size:26px;color:#ffb3a8;margin:10px 0 6px;text-shadow:1px 1px 0 #2a0000,-1px -1px 0 #2a0000,0 0 10px #ff8f7f;}
.rule{border:0;border-top:3px double #ffb3a8;margin:10px 0}

/* Marquee */
.marquee-wrap{border:2px inset #ffb3a8;background:#1a0000;color:#ffd2c9;margin:10px 0;padding:4px;box-shadow:inset 0 0 10px #ff8f7f}
.marquee-fallback{display:none;white-space:nowrap;overflow:hidden;animation:scroll 12s linear infinite}
@keyframes scroll{from{transform:translateX(100%)} to{transform:translateX(-100%)}}

/* Panel */
.panel{border:3px ridge #ffb3a8;background:linear-gradient(#1a0000,#2a0000);padding:10px;box-shadow:inset 0 0 12px #ff8f7f}

/* Botón */
.btn{background:linear-gradient(#200000,#a00000);border:2px outset #ffb3a8;color:#120;font-weight:bold;padding:6px 10px;cursor:pointer}
.btn:hover{filter:brightness(1.12)}
input,textarea,select{background:#2b0000;color:#ffd2c9;border:1px solid #ffb3a8;padding:6px}

/* Galería */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:8px}
.thumb{position:relative;border:2px ridge #ffb3a8;background:#000;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .del{position:absolute;top:4px;right:4px;background:#900;border:1px solid #f55;color:#fff;font-size:11px;line-height:1;padding:2px 6px;cursor:pointer}

/* Tarjetas artista */
.artist-card{border:2px ridge #ffb3a8;background:#1b0000;padding:10px;margin:10px 0}
.artist-card .meta{font-size:12px;opacity:.9}

/* Libro de visitas */
.guest{border:2px ridge #ffb3a8;background:#1b0000;padding:8px;margin:8px 0}

/* Uploader */
.uploader{margin:10px 0}
.uploader-head{font-weight:bold;margin-bottom:6px}
.dropzone{
  border:2px dashed #ffb3a8;background:rgba(0,0,0,.25);padding:14px;text-align:center;margin-top:6px;color:#ffd2c9
}
.dropzone.drag{background:rgba(255,179,168,.15);outline:2px solid #ffb3a8}

/* Pie & blink */
footer{text-align:center;color:#ffd2c9;font-size:12px;opacity:.9;margin-bottom:24px}
.blink{animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{visibility:hidden}}
