/* cp.css - modo nocturno elegante para catalogoplantillas
   Adaptado al estilo Niarux: oscuro metálico, cálido y moderno */

/* ========== Variables ========== */
:root{
  --bg: #0a0b10; /* fondo general */
  --bg-secondary: #11141b; /* contraste suave */
  --card-bg: #141821; /* fondo de tarjetas y modales */
  --text: #e5e9f0; /* texto principal blanco cálido */
  --muted: #9aa0ac; /* texto secundario gris-azulado */
  --accent: #00c8f8; /* celeste principal */
  --accent-soft: rgba(0,200,248,0.15);
 /* celeste suave con brillo blanco*/
  --accent-gold: linear-gradient(90deg, #a8f1ff 0%, #e8faff 100%);

  --shadow: rgba(0,0,0,0.4);
  --max-width: 1300px;
}

/* ========== Reset básico ========== */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:var(--bg);
  color:var(--text);
}

/* ========== Contenedor principal ========== */
.catalogo-container{
  width:90%;
  max-width:var(--max-width);
  margin:36px auto;
  display:flex;
  flex-direction:column;
  gap:28px;
}

/* ========== BUSCADOR ========== */
.buscador{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  background:var(--bg-secondary);
  padding:14px;
  border-radius:12px;
  box-shadow:0 0 18px rgba(0,0,0,0.25);
}
.buscador input{
  flex:1;
  min-width:200px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid #2a2f3b;
  background:#1b1f27;
  color:var(--text);
  outline:none;
  transition:box-shadow .18s,border-color .18s,background .18s;
}
.buscador input::placeholder{color:#666}
.buscador input:focus{
  box-shadow:0 0 10px var(--accent-soft);
  border-color:var(--accent);
  background:#1f242e;
}
.buscador select,
.buscador button{
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #2a2f3b;
  background:#1b1f27;
  color:var(--text);
  cursor:pointer;
  transition:background .2s, color .2s;
}
.buscador button{
  background:var(--accent);
  color:#fff;
  border:none;
  font-weight:600;
}
.buscador button:hover{opacity:0.9}

/* ========== ETIQUETAS ========== */
.etiquetas{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.etiquetas span{
  padding:8px 14px;
  border-radius:20px;
  background:#1b1f27;
  border:1px solid #2a2f3b;
  cursor:pointer;
  color:var(--muted);
  font-size:.95rem;
  transition:transform .12s,background .12s,color .12s,border-color .12s;
}
.etiquetas span.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  transform:translateY(-2px);
}
.etiquetas span:hover{
  background:var(--accent-soft);
  color:var(--accent);
  border-color:var(--accent);
}

/* ========== LISTA DE PLANTILLAS ========== */
.lista-plantillas{
  display:grid;
  grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
  gap:20px;
}

/* tarjeta */
.plantilla-card{
  background:var(--card-bg);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 20px var(--shadow);
  transition:transform .18s, box-shadow .18s, border .18s;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,255,255,0.04);
}
.plantilla-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,0.6);
  border-color:var(--accent);
}

.plantilla-card .thumb{
  width:100%;
  height:140px;
  object-fit:cover;
  display:block;
  background:#0e1015;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.plantilla-card .info{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.plantilla-card h3{
  font-size:1rem;
  background:var(--accent-gold);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:4px;
}
.plantilla-card p{
  font-size:.9rem;
  color:var(--muted);
  line-height:1.3;
}

/* ===========================
   TARJETA PREMIUM
=========================== */
.premium-card {
  border: 1px solid rgba(255, 215, 0, 0.25);  /* Borde dorado translúcido */
  background: linear-gradient(145deg, #1a1a1a, #0d0d0d); /* Fondo oscuro degradado */
  box-shadow: 0 8px 25px rgba(255, 200, 50, 0.15); /* Sombra dorada suave */
  position: relative;  /* Permite posicionar ::before y ::after dentro */
  overflow: hidden;  /* Oculta decoraciones que sobresalgan */
}

.premium-card::before { /* --- FRANJA DORADA SUPERIOR --- */
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, #b8860b, #c79a2b, #ffd700);
  opacity: 0.7;
}

.premium-card h3 { /* --- TEXTO DEL TÍTULO EN DORADO --- */
  background: linear-gradient(90deg, #c79a2b, #ffd700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.premium-card:hover { /* --- EFECTO AL PASAR EL MOUSE --- */
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(255, 200, 50, 0.25);/* Sombra más intensa */
  border-color: #c79a2b;
}

/* Insignia opcional */
.premium-card::after {
  content: 'PREMIUM'; /* Texto visible en la esquina */
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(90deg, #c79a2b, #ffd700);
  color: #000;
  font-weight: 600;
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}


/* meta chips */
.chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}
.chip{
  font-size:.8rem;
  padding:6px 10px;
  border-radius:999px;
  background:#1b1f27;
  color:var(--text);
  border:1px solid #2a2f3b;
}

/* ========== PAGINACION ========== */
.paginacion{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:10px;
}
.paginacion button{
  padding:8px 12px;
  border-radius:8px;
  border:1px solid #2a2f3b;
  background:#1b1f27;
  color:var(--text);
  cursor:pointer;
  transition:background .15s, color .15s;
}
.paginacion button.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

/* ========== MODAL ========== */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  background:rgba(0,0,0,0.7);
  padding:20px;
}
.modal[aria-hidden="false"]{display:flex;}
.modal-dialog{
  width:min(1100px,96%);
  background:var(--card-bg);
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,0.7);
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.06);
}
.modal-close{
  position:absolute;
  right:14px;
  top:12px;
  background:transparent;
  border:none;
  font-size:1.4rem;
  color:var(--muted);
  cursor:pointer;
}
.modal-close:hover{color:var(--accent);}

/* grid modal */
.modal-grid{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:20px;
  padding:22px;
  align-items:start;
}
@media(max-width:980px){
  .modal-grid{grid-template-columns:1fr;}
  .modal-right{order:2}
  .modal-left{order:1}
}

/* galería */
.modal-gallery{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  background:#000;
  min-height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal-gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* controls */
.gallery-controls{
  position:absolute;
  bottom:12px;
  left:12px;
  display:flex;
  gap:8px;
}
.gallery-controls button{
  padding:8px 12px;
  border-radius:6px;
  border:none;
  background:rgba(255,255,255,0.15);
  color:#fff;
  cursor:pointer;
}
.gallery-controls button:hover{background:var(--accent-soft);}

/* galería indicadores */
.gal-dots{
  position:absolute;
  bottom:12px;
  right:12px;
  display:flex;
  gap:6px;
}
.gal-dots button{
  width:9px;
  height:9px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.3);
}
.gal-dots button.active{background:var(--accent);}

/* modal-right */
.modal-right{
  padding:8px 0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.modal-right h2{
  margin:0;
  font-size:1.3rem;
  color:var(--accent);
}
.modal-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.95rem;
  color:var(--muted);
}
.modal-actions{
  margin-top:10px;
  display:flex;
  gap:10px;
}
.btn{
  padding:10px 14px;
  border-radius:8px;
  text-decoration:none;
  display:inline-block;
  font-weight:600;
}
.btn.demo{
  background:transparent;
  border:1px solid var(--accent);
  color:var(--accent);
}
.btn.download{
  background:var(--accent);
  color:#fff;
  border:none;
}

/* ========== INFO BOX ========== */
.panel-info{
  display:flex;
  gap:16px;
  margin-top:6px;
  flex-wrap:wrap;
}
.info-box{
  background:var(--bg-secondary);
  padding:14px;
  border-radius:10px;
  box-shadow:0 6px 18px var(--shadow);
  flex:1 1 45%;
  border:1px solid rgba(255,255,255,0.04);
}
.info-box h3{
  background:var(--accent-gold);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:8px;
}

/* ========== Responsive ========== */
@media(max-width:768px){
  .lista-plantillas{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
  .plantilla-card .thumb{height:120px;}
  .modal-grid{padding:14px;}
}