:root{
  --ambar:#B45309; --ambar-osc:#7c3a06; --ambar-claro:#fef3e2;
  --oscuro:#1c1917; --gris:#78716c; --borde:#e7e5e4;
  --rojo:#dc2626; --amarillo:#d97706; --verde:#16a34a; --blanco:#fff;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Arial,sans-serif}
body{background:#faf9f7;color:var(--oscuro);line-height:1.5}
a{color:var(--ambar);text-decoration:none}
.topbar{background:var(--oscuro);color:#fff;padding:14px 22px;display:flex;
  align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.topbar .marca{font-size:20px;font-weight:800;letter-spacing:.5px}
.topbar .marca span{color:var(--ambar)}
.topbar nav a{color:#e7e5e4;margin-left:16px;font-size:14px}
.topbar nav a:hover{color:var(--ambar)}
.topbar .user{font-size:13px;color:#d6d3d1}
.wrap{max-width:1080px;margin:0 auto;padding:26px 18px}
.card{background:#fff;border:1px solid var(--borde);border-radius:14px;
  padding:26px;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.card.narrow{max-width:430px;margin:40px auto}
h1{font-size:24px;color:var(--ambar-osc);margin-bottom:6px}
h2{font-size:18px;color:var(--oscuro);margin:18px 0 12px}
.sub{color:var(--gris);font-size:14px;margin-bottom:18px}
label{display:block;font-size:13px;font-weight:600;margin:12px 0 5px;color:#44403c}
input,select{width:100%;padding:11px 12px;border:1px solid var(--borde);
  border-radius:9px;font-size:15px;background:#fff}
input:focus,select:focus{outline:none;border-color:var(--ambar)}
textarea{width:100%;padding:11px 12px;border:1px solid var(--borde);border-radius:9px;
  font-size:15px;background:#fff;font-family:inherit;resize:vertical}
textarea:focus{outline:none;border-color:var(--ambar)}
.btn{display:inline-block;background:var(--ambar);color:#fff;border:none;
  padding:12px 20px;border-radius:9px;font-size:15px;font-weight:700;
  cursor:pointer;transition:.15s}
.btn:hover{background:var(--ambar-osc)}
.btn.sec{background:#fff;color:var(--ambar);border:1.5px solid var(--ambar)}
.btn.sm{padding:7px 12px;font-size:13px}
.btn.wa{background:#25D366}
.btn.wa:hover{background:#1da851}
.btn.ok{background:var(--verde)}
.btn.block{width:100%;margin-top:18px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>div{flex:1;min-width:150px}
.msg{padding:11px 14px;border-radius:9px;font-size:14px;margin:12px 0;display:none}
.msg.err{background:#fef2f2;color:var(--rojo);border:1px solid #fecaca;display:block}
.msg.ok{background:#f0fdf4;color:var(--verde);border:1px solid #bbf7d0;display:block}
.msg.cumple{background:#fdf2f8;color:#db2777;border:1px solid #fbcfe8;display:block;font-weight:700}
.hint{font-size:12px;color:var(--gris);margin-top:4px}
table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px}
th{background:var(--oscuro);color:#fff;padding:11px 10px;text-align:left;
  font-size:12px;text-transform:uppercase;letter-spacing:.4px}
td{padding:10px;border-bottom:1px solid var(--borde)}
tr:nth-child(even) td{background:#fdfcfa}
.badge{display:inline-block;padding:4px 10px;border-radius:20px;font-size:12px;
  font-weight:700}
.badge.no{background:#fef2f2;color:var(--rojo)}
.badge.pend{background:#fffbeb;color:var(--amarillo)}
.badge.pag{background:#f0fdf4;color:var(--verde)}
.badge.faka{background:#f5f3ff;color:#7c3aed}
.badge.top15{background:#eff6ff;color:#2563eb}
.badge.cumple{background:#fdf2f8;color:#db2777}
.badge.gratis{background:#ecfeff;color:#0891b2}
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:16px 0}
.toolbar input{max-width:280px}
.stats{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.stat{flex:1;min-width:130px;background:#fff;border:1px solid var(--borde);
  border-radius:12px;padding:16px;text-align:center}
.stat .n{font-size:28px;font-weight:800}
.stat .l{font-size:12px;color:var(--gris);text-transform:uppercase}
.stat.rojo .n{color:var(--rojo)} .stat.amarillo .n{color:var(--amarillo)}
.stat.verde .n{color:var(--verde)} .stat.ambar .n{color:var(--ambar)}
.hide{display:none!important}
.foot{text-align:center;color:var(--gris);font-size:12px;padding:28px}
.pill{font-size:11px;padding:3px 9px;border-radius:20px;background:var(--ambar-claro);
  color:var(--ambar-osc);font-weight:700}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;
  align-items:center;justify-content:center;padding:16px;z-index:50}
.modal-bg.show{display:flex}
.modal{background:#fff;border-radius:14px;padding:24px;max-width:460px;width:100%;
  max-height:90vh;overflow:auto}

/* ====== BENEFICIOS POR ROL (home) ====== */
.beneficios{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
.beneficios .bene{display:flex;flex-direction:column}
.beneficios .bene h2{margin:10px 0 14px}
.bene-list{list-style:none;margin:0 0 18px;padding:0;flex:1}
.bene-list li{position:relative;padding:9px 0 9px 28px;font-size:14px;
  color:#44403c;border-bottom:1px dashed var(--borde)}
.bene-list li:last-child{border-bottom:none}
.bene-list li::before{content:"\2714";position:absolute;left:0;top:9px;
  color:var(--verde);font-weight:800}
@media(max-width:720px){.beneficios{grid-template-columns:1fr}}

/* requisitos VIP */
.requisitos{background:var(--ambar-claro);border-radius:10px;padding:12px 14px;margin-bottom:16px}
.requisitos strong{display:block;font-size:13px;color:var(--ambar-osc);margin-bottom:4px}
.bene-list.req li{padding:6px 0 6px 28px;border-bottom:none;font-size:13px}
.bene-list.req li::before{content:"\2022";color:var(--ambar);top:6px}

/* ====== TABS / SECTORES DE INGRESO ====== */
.tabs{display:flex;gap:8px;margin:4px 0 18px}
.tabs .tab{flex:1;padding:10px 8px;border:1.5px solid var(--borde);background:#fff;
  color:var(--gris);border-radius:9px;font-size:14px;font-weight:700;cursor:pointer;transition:.15s}
.tabs .tab:hover{border-color:var(--ambar)}
.tabs .tab.activo{background:var(--ambar);color:#fff;border-color:var(--ambar)}
.tabs a.tab{text-align:center;text-decoration:none}

/* selector de estado de pago en el panel admin */
.sel-estado{width:auto;display:inline-block;padding:6px 8px;font-size:13px;
  border-radius:8px;margin:2px 0}

/* boton eliminar (rojo) y selects de la toolbar */
.btn.btn-del{background:var(--rojo)}
.btn.btn-del:hover{background:#b91c1c}
.toolbar select{width:auto;max-width:220px}

/* ====== PORTADA CON FOTO + GALERIA (home) ====== */
.hero.con-foto{color:#fff;border:none}
.hero.con-foto h1{color:#fff}
.hero.con-foto .sub{color:#f5f5f4}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:14px;margin-top:16px}
.gfoto{margin:0;background:#fff;border:1px solid var(--borde);border-radius:12px;
  overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.gfoto img{width:100%;height:160px;object-fit:cover;display:block}
.gfoto figcaption{padding:9px 12px;font-size:13px;color:#44403c;font-weight:600}

/* ====== PANEL ESTILO cPANEL (Personalizar la web) ====== */
.cpanel{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px;margin:14px 0 6px}
.cpanel .tile{background:#fff;border:1px solid var(--borde);border-radius:14px;
  padding:20px 14px;text-align:center;cursor:pointer;transition:.15s;
  box-shadow:0 2px 10px rgba(0,0,0,.04)}
.cpanel .tile:hover{border-color:var(--ambar);transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(180,83,9,.15)}
.cpanel .tile .ic{font-size:30px;line-height:1}
.cpanel .tile .tt{font-size:14px;font-weight:700;margin-top:10px;color:var(--oscuro)}
.cpanel .tile .ds{font-size:11px;color:var(--gris);margin-top:3px}

/* lista de fotos dentro del editor de galeria */
.galeria-edit{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px;margin:12px 0}
.gitem{position:relative;border:1px solid var(--borde);border-radius:10px;overflow:hidden}
.gitem img{width:100%;height:90px;object-fit:cover;display:block}
.gitem .x{position:absolute;top:4px;right:4px;background:var(--rojo);color:#fff;
  border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;font-weight:800;
  line-height:1;font-size:14px}
.gitem input{font-size:11px;padding:5px 6px;border:none;border-top:1px solid var(--borde);
  border-radius:0}