/* ════════════════════════════════════════════════════
   DUELOS — JuegosDrag
   Reutiliza .jd-card / .jd-card-header / .jd-card-body /
   .jd-card-footer / .jd-ao-btn ya definidos en my.css.
   Aquí solo lo específico de la sección Duelos.
   ════════════════════════════════════════════════════ */

/* ── Layout del index: rail de logos + grid ── */
#jd-du-index-layout{display:flex;gap:16px;align-items:stretch;}
#jd-du-wrap{flex:1;min-width:0;}
#jd-du-rail{
  width:90px;flex-shrink:0;height:auto;align-self:stretch;overflow:hidden;
  background:var(--ao-bg3,#1a1508);border:1px solid var(--ao-border2,#3a2e0a);
}
#jd-du-rail-track{display:flex;flex-direction:column;}
@media(max-width:700px){#jd-du-rail{display:none;}}

/* Página de Duelos más ancha (el container-xxl por defecto se quedaba corto) */
.container-xxl{max-width:1400px!important;}

/* ── Categorías en pestañas ── */
.jd-du-cats-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.jd-du-cats-pills a{
  background:var(--ao-bg3,#1a1508);border:1px solid var(--ao-border2,#3a2e0a);
  color:var(--ao-gold2,#c9b882);font-family:'Cinzel',serif;font-size:10px;letter-spacing:.5px;
  padding:6px 12px;text-decoration:none;transition:all .12s;
}
.jd-du-cats-pills a:hover{border-color:var(--ao-gold,#f5c842);color:var(--ao-gold,#f5c842);}
.jd-du-cats-more{
  background:var(--ao-bg4,#2a2208);border:1px solid var(--ao-border,#5a4a1a);
  color:var(--ao-gold,#f5c842);font-family:'Cinzel',serif;font-size:10px;letter-spacing:.5px;
  padding:6px 12px;cursor:pointer;
}
.jd-du-cats-modal{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.85);align-items:center;justify-content:center;}
.jd-du-cats-modal__box{background:var(--ao-bg,#0e0c07);border:2px solid var(--ao-border,#5a4a1a);max-width:500px;width:92%;max-height:80vh;overflow-y:auto;}
.jd-du-cats-modal__head{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--ao-bg3,#1a1508);border-bottom:1px solid var(--ao-border2,#3a2e0a);font-family:'Cinzel',serif;color:var(--ao-gold,#f5c842);}
.jd-du-cats-modal__close{margin-left:auto;background:none;border:none;color:var(--ao-muted,#888);font-size:16px;cursor:pointer;}
.jd-du-cats-modal__list{padding:10px 14px;display:flex;flex-wrap:wrap;gap:6px;}

/* ── Imagen de la tarjeta del listado ── */
.jd-du-card-media{width:100%;height:140px;overflow:hidden;border-bottom:1px solid var(--jd-modal-frame-border2,#5a4015);}
.jd-du-card-media img{width:100%;height:100%;object-fit:cover;display:block;}

/* ── Tus duelos ── */
.jd-du-yours{display:flex;flex-wrap:wrap;gap:8px;}
.jd-du-yours-item{
  display:flex;align-items:center;gap:8px;
  background:var(--ao-bg3,#1a1508);border:1px solid var(--ao-border2,#3a2e0a);
  padding:5px 10px 5px 5px;text-decoration:none;color:var(--ao-text,#c9b882);font-size:12px;
}
.jd-du-yours-item img{width:32px;height:32px;object-fit:cover;flex-shrink:0;}
.jd-du-yours-item:hover{border-color:var(--ao-gold,#f5c842);color:var(--ao-gold,#f5c842);}
.jd-du-yours-empty{font-size:12px;color:var(--ao-muted,#888);text-align:center;margin:0;}

/* ── Actividad ── */
.jd-du-section-title-h{font-family:'Cinzel',serif;font-size:13px;color:var(--jd-modal-title-color,#f5c842);margin:0;display:flex;align-items:center;gap:6px;}
.jd-du-activity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.jd-du-activity-stat{text-align:center;padding:10px;background:var(--ao-bg3,#1a1508);border:1px solid var(--ao-border2,#3a2e0a);}
.jd-du-activity-stat__val{display:block;font-family:'Cinzel',serif;font-size:20px;color:var(--ao-gold,#f5c842);font-weight:700;}
.jd-du-activity-stat__lbl{font-size:9px;color:var(--ao-muted,#888);letter-spacing:.5px;text-transform:uppercase;}
@media(max-width:600px){.jd-du-activity-grid{grid-template-columns:1fr;}}

/* ── Cabecera de sección (igual patrón que eventos) ── */
.jd-du-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.jd-du-section-title{font-family:'Cinzel',serif;font-size:20px;color:var(--ao-gold,#f5c842);display:flex;align-items:center;gap:8px;margin:0;}
.jd-du-section-sub{font-size:12px;color:var(--ao-muted,#888);margin:2px 0 0;}

/* ── Barra de filtros por estado ── */
.jd-du-filter-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.jd-du-filter-btn{
  background:var(--ao-bg3,#1a1508);border:1px solid var(--ao-border2,#3a2e0a);
  color:var(--ao-muted,#888);font-family:'Cinzel',serif;font-size:10px;letter-spacing:.5px;
  padding:5px 12px;text-transform:uppercase;cursor:pointer;transition:all .12s;
}
.jd-du-filter-btn:hover{color:var(--ao-gold2,#c9b882);border-color:var(--ao-border,#5a4a1a);}
.jd-du-filter-btn.active{background:var(--ao-bg4,#2a2208);border-color:var(--ao-gold,#f5c842);color:var(--ao-gold,#f5c842);}

/* ── Grid de duelos ── */
#jd-du-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media(max-width:1100px){#jd-du-grid{grid-template-columns:1fr;}}

.jd-du-empty-filter{text-align:center;padding:30px 10px;color:var(--ao-muted,#888);font-size:13px;}

/* ── Card de duelo (hereda marco/header de .jd-card) ── */
.jd-du-entry{display:flex;flex-direction:column;width:100%!important;max-width:none!important;}
.jd-du-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.jd-du-card-title{color:var(--jd-modal-title-color,#f5c842);font-family:'Cinzel',serif;font-size:14px;text-decoration:none;}
.jd-du-card-title:hover{color:#fff;}
.jd-du-card-type{font-size:9px;font-family:'Cinzel',serif;letter-spacing:1px;color:var(--ao-gold2,#c9b882);background:rgba(0,0,0,.25);padding:2px 8px;border:1px solid var(--jd-modal-frame-border2,#5a4015);flex-shrink:0;}

/* ── Fila VS (Team1 vs Team2) ── */
.jd-du-vs-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:8px;margin-bottom:10px;}
.jd-du-team{min-width:0;}
.jd-du-team-label{font-size:9px;font-family:'Cinzel',serif;letter-spacing:1px;text-transform:uppercase;color:var(--ao-muted,#888);margin-bottom:4px;text-align:center;}
.jd-du-vs-badge{font-family:'Cinzel',serif;font-size:11px;font-weight:700;color:var(--ao-hp,#c0392b);align-self:center;padding-top:14px;}
.jd-du-chips-wrap{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;min-height:30px;align-items:center;}
.jd-du-no-rivals{font-size:10px;color:var(--ao-faint,#555);text-align:center;margin:0;}

.jd-du-chip{
  display:flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.04);border:1px solid var(--chip-color,#888);
  border-radius:20px;padding:2px 8px 2px 2px;font-size:10px;color:var(--ao-text,#c9b882);
}
.jd-du-chip-avatar{
  width:18px;height:18px;border-radius:50%;background:var(--chip-color,#888);
  display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;flex-shrink:0;
}
.jd-du-chip--host .jd-du-chip-avatar{background:linear-gradient(135deg,#f5c842,#c9962a);font-size:11px;}
.jd-du-chip--host{border-color:var(--ao-gold,#f5c842);}
.jd-du-chip--me{box-shadow:0 0 0 1px var(--ao-gold,#f5c842);}
.jd-du-chip--lg{padding:4px 12px 4px 4px;font-size:12px;}
.jd-du-chip--lg .jd-du-chip-avatar{width:24px;height:24px;font-size:10px;}
.jd-du-chip--more{background:transparent;border-style:dashed;color:var(--ao-muted,#888);}

/* ── Ganador ── */
.jd-du-winner-box{
  text-align:center;font-family:'Cinzel',serif;font-size:12px;color:var(--ao-gold,#f5c842);
  background:rgba(245,200,66,.08);border:1px solid var(--ao-border,#5a4a1a);
  padding:6px;margin-bottom:10px;
}
.du-row-finished{opacity:.85;}

/* ── Meta (servidor, mapa, fecha, apuestas) ── */
.jd-du-meta-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--ao-muted,#888);margin-bottom:4px;flex-wrap:wrap;}
.jd-du-meta-row i{color:var(--ao-gold2,#c9b882);margin-right:3px;}
.jd-du-bets-link{color:var(--ao-gold,#f5c842);text-decoration:none;font-size:11px;}
.jd-du-bets-link:hover{color:#fff;}

/* ── Botones de card ── */
.jd-card-footer .jd-du-btn--join,.jd-card-footer .jd-ao-btn{flex:1;text-align:center;}
.jd-du-btn--joined{background:linear-gradient(180deg,#3a2810,#1a1004)!important;border-color:#ffdb70!important;}
.jd-du-btn--host-disabled{opacity:.45;cursor:default;}

/* ── Detalle (ficha completa) ── */
#jd-du-detail .jd-du-vs-row{grid-template-columns:1fr auto 1fr;margin-bottom:18px;}
#jd-du-detail .jd-du-team-label{font-size:11px;}
#jd-du-detail .jd-du-chips-wrap{min-height:50px;}

/* ── Toast ── */
.jd-du-toast-container{position:fixed;bottom:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:6px;}
.jd-du-toast{
  display:flex;align-items:center;gap:8px;
  background:var(--ao-bg3,#1a1508);border:1px solid var(--ao-border,#5a4a1a);
  color:var(--ao-text,#c9b882);font-size:12px;padding:8px 14px;
  box-shadow:0 6px 20px rgba(0,0,0,.5);opacity:1;transition:opacity .3s,transform .3s;
}
.jd-du-toast--ok i{color:#27ae60;}
.jd-du-toast--warn i{color:#f5c842;}
.jd-du-toast--err i{color:#c0392b;}
.jd-du-toast--out{opacity:0;transform:translateX(10px);}

/* ── Form: filtros pill (Configuración / Clasificación) ── */
.jd-du-flt-btn{
  background:var(--ao-bg3,#1a1508);border:1px solid var(--ao-border2,#3a2e0a);
  color:var(--ao-gold2,#c9b882);font-family:'Cinzel',serif;font-size:10px;letter-spacing:.5px;
  padding:6px 12px;text-transform:uppercase;cursor:pointer;margin:0 4px 6px 0;transition:all .12s;
}
.jd-du-flt-btn:hover{border-color:var(--ao-gold,#f5c842);}
.jd-du-flt-btn.active{background:var(--ao-bg4,#2a2208);border-color:var(--ao-gold,#f5c842);color:var(--ao-gold,#f5c842);}
.jd-du-summary-tag{display:inline-block;background:var(--ao-bg4,#2a2208);border:1px solid var(--ao-border,#5a4a1a);color:var(--ao-gold,#f5c842);font-size:10px;padding:2px 8px;margin:0 4px 4px 0;}

/* ── Inputs/textareas del formulario: tema oscuro real (Bootstrap por
      defecto se veía en blanco porque su override vivía en
      eventos-form-ao.css, que esta página nunca carga) ── */
.jd-pane .form-control,.jd-du-sidebar-body .form-control{
  background:#0e0c07!important;
  border:1px solid var(--ao-border2,#3a2e0a)!important;
  color:var(--ao-text,#c9b882)!important;
  font-family:'Rajdhani',sans-serif;
  border-radius:0!important;
}
.jd-pane .form-control:focus,.jd-du-sidebar-body .form-control:focus{
  background:#0e0c07!important;
  border-color:var(--ao-gold,#f5c842)!important;
  color:var(--ao-text,#c9b882)!important;
  box-shadow:0 0 0 .15rem rgba(245,200,66,.15)!important;
}
.jd-pane .form-floating>label{color:var(--ao-muted,#888);}
.jd-pane .form-floating>.form-control:focus~label,
.jd-pane .form-floating>.form-control:not(:placeholder-shown)~label{color:var(--ao-gold,#f5c842);opacity:1;}

/* Botones nativos de tipo reset/clear que sueltan widgets de uCoz (editor,
   subidor de imágenes...) dentro de nuestras zonas */
.jd-pane input[type="reset"],
.jd-du-sidebar-body input[type="reset"],
.jd-pane input[type="button"]:not(.jd-du-flt-btn):not(.jd-ao-btn):not(.jd-du-winner-btn){
  background:var(--ao-bg3,#1a1508);
  border:1px solid var(--ao-border,#5a4a1a);
  color:var(--ao-gold,#f5c842);
  font-family:'Cinzel',serif;font-size:10px;letter-spacing:1px;
  padding:6px 14px;text-transform:uppercase;cursor:pointer;
}
.jd-pane input[type="reset"]:hover{background:var(--ao-bg4,#2a2208);border-color:var(--ao-gold,#f5c842);}

/* El footer se apilaba en bloques verticales en vez de ir en fila —
   se fuerza explícitamente, sin depender de cómo lo defina ficha-form-ao.css */
.jd-card>.jd-footer{
  display:flex!important;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px;
}
.jd-card>.jd-footer .jd-footer-nav,
.jd-card>.jd-footer .jd-footer-right{
  display:flex!important;align-items:center;gap:10px;flex-wrap:wrap;width:auto!important;
}

.jd-footer input[type="reset"],
.manFlRst{
  display:inline-block!important;
  width:auto!important;
  background:var(--ao-bg3,#1a1508)!important;
  border:1px solid var(--ao-border,#5a4a1a)!important;
  color:var(--ao-gold,#f5c842)!important;
  font-family:'Cinzel',serif;font-size:10px;letter-spacing:1px;
  padding:7px 14px;text-transform:uppercase;cursor:pointer;
  border-radius:0;
}
.jd-footer input[type="reset"]:hover,.manFlRst:hover{
  background:var(--ao-bg4,#2a2208)!important;border-color:var(--ao-gold,#f5c842)!important;
}

/* Botón Guardar / Publicar duelo: CTA dorado destacado */
#duSubmitWrap,.manFlSbm,
input[type="button"].manFlSbm{
  display:inline-block!important;
  width:auto!important;
}
.manFlSbm{
  background:linear-gradient(180deg,#3a2810 0%,#1a1004 100%)!important;
  border:1px solid #ffdb70!important;
  color:#fff8e0!important;
  font-family:'Cinzel',serif!important;font-size:11px;letter-spacing:1px;
  padding:8px 22px!important;text-transform:uppercase;cursor:pointer;
  border-radius:0!important;
  box-shadow:0 0 10px rgba(245,200,66,.45);
  transition:box-shadow .15s,background .15s;
}
.manFlSbm:hover{
  box-shadow:0 0 18px rgba(245,200,66,.75);
  background:linear-gradient(180deg,#4a3414 0%,#241608 100%)!important;
}

/* Botones Anterior / Siguiente del wizard, con el mismo estilo que el resto */
#duBtnPrev,#duBtnNext,#duMobPrev,#duMobNext{
  background:var(--ao-bg3,#1a1508);border:1px solid var(--ao-border,#5a4a1a);
  color:var(--ao-gold,#f5c842);font-family:'Cinzel',serif;font-size:11px;letter-spacing:1px;
  padding:7px 18px;text-transform:uppercase;cursor:pointer;transition:all .12s;
  border-radius:0;
}
#duBtnPrev:hover,#duBtnNext:hover{background:var(--ao-bg4,#2a2208);border-color:var(--ao-gold,#f5c842);color:#fff;}
#duMobPrev:disabled,#duMobNext:disabled{opacity:.35;cursor:default;}

/* Select2 (categoría) en tema oscuro */
.select2-container--default .select2-selection--single{
  background:#0e0c07;border:1px solid var(--ao-border2,#3a2e0a);height:42px;
  display:flex;align-items:center;border-radius:0;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--ao-text,#c9b882);line-height:1.4;padding-left:10px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:40px;}
.select2-dropdown{background:#15120a;border:1px solid var(--ao-border,#5a4a1a);}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--ao-bg4,#2a2208);color:var(--ao-gold,#f5c842);
}
.select2-results__option{color:var(--ao-text,#c9b882);}
.select2-container--default .select2-results>.select2-results__options{background:#15120a;}
.select2-search--dropdown .select2-search__field{
  background:#0e0c07;border:1px solid var(--ao-border2,#3a2e0a);color:var(--ao-text,#c9b882);
}

/* ── Rounds: stepper -/+ estilo asignador de puntos AO ── */
.jd-du-stepper{display:flex;align-items:center;border:1px solid var(--ao-border2,#3a2e0a);background:#0e0c07;width:fit-content;}
.jd-du-stepper-btn{
  width:38px;height:38px;background:var(--ao-bg3,#1a1508);border:none;
  color:var(--ao-gold,#f5c842);font-family:'Cinzel',serif;font-size:18px;font-weight:700;
  cursor:pointer;transition:background .12s;
}
.jd-du-stepper-btn:hover{background:var(--ao-bg4,#2a2208);}
.jd-du-stepper-btn:first-child{border-right:1px solid var(--ao-border2,#3a2e0a);}
.jd-du-stepper-btn:last-child{border-left:1px solid var(--ao-border2,#3a2e0a);}
.jd-du-stepper-val{min-width:54px;text-align:center;font-family:'Cinzel',serif;font-size:16px;color:var(--ao-text,#c9b882);padding:0 8px;}

/* ── Tiempo Máximo: pastillas de minutos ── */
.jd-du-time-pills{display:flex;flex-wrap:wrap;gap:5px;}
.jd-du-time-pill{
  background:var(--ao-bg3,#1a1508);border:1px solid var(--ao-border2,#3a2e0a);
  color:var(--ao-gold2,#c9b882);font-family:'Cinzel',serif;font-size:10px;letter-spacing:.5px;
  padding:8px 12px;cursor:pointer;transition:all .12s;
}
.jd-du-time-pill:hover{border-color:var(--ao-gold,#f5c842);}
.jd-du-time-pill.active{background:var(--ao-bg4,#2a2208);border-color:var(--ao-gold,#f5c842);color:var(--ao-gold,#f5c842);}

/* ── Contenedor de campos nativos uCoz (Título, Nombre, Email, Teléfono,
      Adjuntos, Reglas especiales...): debe quedar fuera de la vista pero
      seguir en el DOM para que uCoz valide el formulario al enviarlo. ── */
.jd-du-all-natives{
  visibility:hidden;height:0;overflow:hidden;position:absolute;left:-9999px;
}

/* ── Layout del formulario de alta/edición (namespace propio, no depende
      de eventos-form-ao.css que esta página nunca carga) ── */
.jd-du-layout{display:grid;grid-template-columns:2fr 1fr;gap:18px;align-items:start;}
.jd-du-layout .jd-main{width:100%;min-width:0;}
.jd-du-layout .jd-main .jd-card{width:100%!important;max-width:none!important;}
@media(max-width:900px){.jd-du-layout{grid-template-columns:1fr;}}

/* ── Ficha de detalle del duelo: 1 sola columna (antes era 2 con un
      hueco enorme porque la card de la sidebar no llenaba su columna) ── */
.jd-du-detail-layout{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.jd-du-main,.jd-du-side{width:100%;max-width:none;}
.jd-du-main>.jd-card,.jd-du-side .jd-card{width:100%!important;max-width:none!important;}

.jd-du-sidebar{display:flex;flex-direction:column;gap:12px;}
.jd-du-sidebar-card{background:var(--ao-bg3,#1a1508);border:1px solid var(--ao-border2,#3a2e0a);}
.jd-du-sidebar-head{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--ao-bg4,#2a2208);border-bottom:1px solid var(--ao-border2,#3a2e0a);font-family:'Cinzel',serif;font-size:11px;color:var(--ao-gold,#f5c842);letter-spacing:.5px;}
.jd-du-sidebar-body{padding:10px 12px;font-size:12px;color:var(--ao-text,#c9b882);}

.jd-du-btn-group{display:flex;flex-wrap:wrap;gap:0;}

.jd-du-no-access{text-align:center;padding:40px 20px;}
.jd-du-no-access-icon{font-size:2.5rem;margin-bottom:10px;}

.jd-du-slots-display{
  font-family:'Cinzel',serif;font-size:18px;color:var(--ao-gold,#f5c842);
  background:var(--ao-bg3,#1a1508);border:1px solid var(--ao-border2,#3a2e0a);
  padding:6px 12px;text-align:center;margin-top:4px;
}
#duGmPanel{background:rgba(192,57,43,.06);border:1px solid var(--ao-hp,#c0392b);padding:14px 16px;margin-top:18px;}
#duGmPanel .jsh{color:var(--ao-hp,#c0392b);}
.jd-du-winner-btn.active{border-color:var(--ao-gold,#f5c842)!important;box-shadow:0 0 10px rgba(245,200,66,.5);}
#duSlotsHint{font-size:11px;color:var(--ao-gold2,#c9b882);margin-top:4px;display:block;}

/* ── Alerta de validación ── */
.jd-du-alert-error{
  display:flex;align-items:center;gap:8px;
  background:rgba(192,57,43,.1);border:1px solid var(--ao-hp,#c0392b);
  color:#e07070;font-size:12px;padding:10px 14px;
}