/* Página web: editor del contenido de la web del club (solo el dueño) */
.wp-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; margin-bottom: 16px; }
.wp-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.wp-grid { display: grid; gap: 18px; }
.wp-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.wp-foto { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-2); display: grid; }
.wp-foto .im { position: relative; aspect-ratio: 16 / 10; background: #0003 center / cover no-repeat; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.wp-foto .im.logo { aspect-ratio: 2 / 1; background-size: contain; background-color: #ffffff10; background-origin: content-box; padding: 12px; }
.wp-foto .im .acc { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.wp-foto .im .acc button { width: 30px; height: 30px; border-radius: 8px; border: 0; background: rgba(0, 0, 0, .65); color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; }
.wp-foto .im .acc button svg { width: 16px; height: 16px; }
.wp-foto .im .orden { position: absolute; top: 6px; left: 6px; background: rgba(0, 0, 0, .65); color: #fff; border-radius: 6px; font-size: 11px; padding: 2px 7px; }
.wp-foto .cp { padding: 10px; display: grid; gap: 8px; }
.wp-foto .cp input, .wp-foto .cp textarea { width: 100%; }
.wp-agregar { border: 2px dashed var(--line); border-radius: 12px; min-height: 160px; display: grid; place-items: center; text-align: center; color: var(--muted); cursor: pointer; padding: 16px; font-size: 13px; gap: 6px; background: transparent; }
.wp-agregar:hover { border-color: var(--blue); color: var(--blue); }
.wp-agregar svg { width: 28px; height: 28px; }
.wp-portada { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.wp-portada .im { aspect-ratio: 16 / 8; border-radius: 12px; border: 1px solid var(--line); background: #0004 center / cover no-repeat; display: grid; place-items: center; color: var(--muted); font-size: 13px; text-align: center; padding: 10px; }
.wp-lista { display: grid; gap: 10px; }
.wp-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); }
.wp-item .n { font-weight: 700; color: var(--muted); min-width: 20px; padding-top: 8px; }
.wp-item .acc { display: flex; gap: 4px; }
.wp-sec { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.wp-sec b { flex: 1; }
.wp-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.wp-switch input { opacity: 0; width: 0; height: 0; }
.wp-switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--line); transition: .2s; cursor: pointer; }
.wp-switch span::after { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .2s; }
.wp-switch input:checked + span { background: var(--ok); }
.wp-switch input:checked + span::after { left: 23px; }
.wp-pub { display: grid; grid-template-columns: 110px 1fr auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--surface-2); }
.wp-pub .im { aspect-ratio: 4 / 3; border-radius: 8px; background: #0004 center / cover no-repeat; display: grid; place-items: center; color: var(--muted); }
.wp-pub .im svg { width: 26px; height: 26px; }
.wp-guardar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding: 12px 0 4px; background: linear-gradient(transparent, var(--bg) 40%); }
.wp-cierre-af td { vertical-align: middle; }
.wp-cierre-af .acc { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.wp-libres { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 340px; overflow: auto; }
.wp-libres button { text-align: left; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface-2); color: inherit; cursor: pointer; font: inherit; }
.wp-libres button.on { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue); }
.wp-libres button small { display: block; color: var(--muted); }
@media (max-width: 760px) { .wp-portada, .wp-pub { grid-template-columns: 1fr; } }
.t .wp-switch, td .wp-switch { display: inline-block; vertical-align: middle; }

/* ── Maverin: piezas propias del editor ── */
.wp-info { margin-bottom: 14px; }
.wp-info .bd { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.wp-info .bd > svg.i { width: 34px; height: 34px; padding: 7px; border-radius: 11px; color: #fff; background: var(--ac-teal, var(--blue)); flex: none; }
.wp-info .bd > div { flex: 1; min-width: 240px; display: grid; gap: 2px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tres { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 10px; }
.wp-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.wp-prod { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); display: grid; align-content: start; box-shadow: 0 8px 20px -14px rgba(14, 42, 79, .35); }
.wp-prod.off { opacity: .55; }
.wp-prod .im { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(75% 65% at 50% 38%, #fff 0%, #F1F4F8 55%, #DCE3EB 100%) center / contain no-repeat; display: grid; place-items: center; color: var(--muted); font-size: 12px; text-align: center; }
.wp-prod .im[style] { background-size: contain; background-color: #F3F6FA; }
.wp-prod .im > span:first-child { display: grid; justify-items: center; gap: 4px; }
.wp-prod .im > span:first-child svg { width: 30px; height: 30px; }
.wp-prod .im .acc { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.wp-prod .im .acc button { width: 30px; height: 30px; border-radius: 8px; border: 0; background: rgba(10, 35, 71, .7); color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; }
.wp-prod .im .acc button svg { width: 16px; height: 16px; }
.wp-prod .cp { padding: 12px; display: grid; gap: 8px; }
.wp-prod .cp .nom { font-weight: 700; font-size: 15px; }
.wp-prod .cp input, .wp-prod .cp textarea, .wp-prod .cp select { width: 100%; }
.wp-prod label.f { font-size: 12px; }
.wp-flags { gap: 14px; align-items: center; font-size: 13px; }
.wp-flags label { display: inline-flex; align-items: center; gap: 6px; }
.wp-hero-prev { border-radius: 14px; padding: 18px 20px; background: radial-gradient(90% 120% at 100% 0%, #22A055 0%, transparent 60%), linear-gradient(160deg, #123769, #0A2347); color: #fff; display: grid; gap: 2px; text-transform: uppercase; font-family: var(--font-anton, var(--font-title)); }
.wp-hero-prev span { font-size: 22px; } .wp-hero-prev b { font-weight: 400; font-size: 44px; line-height: 1; color: #FFC727; }
.wp-hero-prev i { font-style: normal; justify-self: start; margin-top: 6px; padding: 4px 10px; background: #22B060; border-radius: 4px; font-size: 16px; box-shadow: 4px 4px 0 #0E2A4F; }
#wpGuardar.lleno { animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 50% { box-shadow: 0 0 0 6px rgba(47, 174, 95, .2); } }
@media (max-width: 760px) { .dos, .tres { grid-template-columns: 1fr; } }
.wp-prod .im .ilu { width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; justify-items: center; padding: 10px 0 6px; }
.wp-prod .im .ilu .dib { height: 100%; aspect-ratio: 120 / 112; filter: drop-shadow(0 8px 10px rgba(10, 35, 71, .16)); }
.wp-prod .im .ilu .dib svg { width: 100%; height: 100%; stroke: none; }
.wp-prod .im .ilu small { font-size: 11px; }
.wp-prod { min-width: 0; }
.wp-prod .im { aspect-ratio: auto; height: 190px; overflow: hidden; }
.wp-prod .im .ilu { height: 190px; min-height: 0; overflow: hidden; }
.wp-prod .im .ilu .dib { height: 150px; width: 160px; aspect-ratio: auto; }
.wp-prod .im .ilu small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 92%; }