/* ==== BASE ==== */
body {
  background-color: #f8f9fa;
  color: #212529;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.hidden {
  display: none !important;
}

/* ==== TARJETAS ==== */
.card-custom {
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ==== LOGO PRINCIPAL ==== */
.logo-principal {
  max-width: 220px;
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  border-radius: 10px;
}

/* ==== TABLAS ==== */
.table {
  color: #212529;
}

.table-dark {
  background-color: #1a252f;
  color: #ffffff;
}

.table-hover tbody tr:hover {
  background-color: #f1f5f9;
}

/* Historial de carrera: sin animaciones de recarga, columnas bien ajustadas */
.tabla-historial {
  table-layout: fixed;
  width: 100%;
}

.tabla-historial th,
.tabla-historial td {
  vertical-align: middle;
  overflow-wrap: anywhere;
  padding: 7px 6px;
}

.tabla-historial th {
  white-space: nowrap;
}

@media (min-width: 577px) {
  #pantalla-juego .card-custom {
    padding: 1.25rem !important;
  }

  #pantalla-juego .tabla-historial {
    font-size: 0.95rem;
  }
}

.tabla-historial th:nth-child(1), .tabla-historial td:nth-child(1) { width: 12%; }
.tabla-historial th:nth-child(2), .tabla-historial td:nth-child(2) { width: 28%; }
.tabla-historial th:nth-child(3), .tabla-historial td:nth-child(3) { width: 9%; }
.tabla-historial th:nth-child(4), .tabla-historial td:nth-child(4) { width: 10%; }
.tabla-historial th:nth-child(5), .tabla-historial td:nth-child(5) { width: 10%; }
.tabla-historial th:nth-child(6), .tabla-historial td:nth-child(6) { width: 31%; }

/* ==== BOTONES Y CONTROLES ==== */
.btn-pso {
  background-color: #0d6efd;
  color: #ffffff;
  font-weight: bold;
}

.btn-pso:hover {
  background-color: #0b5ed7;
  color: #ffffff;
}

.btn:focus-visible {
  outline: 3px solid #ffd43b;
  outline-offset: 2px;
}

/* ==== ROL BADGE en el header ==== */
#rol-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
}

/* ==== MODAL DE ROL ==== */
#modalRol .modal-content {
  border: 2px solid #ffd43b;
  border-radius: 16px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: #fff;
  text-align: center;
}

#rolModalNombre {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 0 20px currentColor;
}

#rolModalDescripcion {
  font-size: 1rem;
  color: #adb5bd;
}

#rolModalOVR {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffd43b;
}

.rol-unlock-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #6c757d;
  margin-bottom: 8px;
}

/* ==== BARRA DE TIRO LIBRE / BARRIDA ==== */
.zona-gol {
  position: relative;
}

.zona-gol-marker {
  position: absolute;
  top: 0;
  left: 40%;
  width: 20%;
  height: 100%;
  background: rgba(25, 200, 25, 0.25);
  border-left: 2px solid #19c819;
  border-right: 2px solid #19c819;
  pointer-events: none;
  border-radius: 4px;
}

/* ==== ESCUDO DEL CLUB ==== */
#club-img {
  max-height: 85px;
  width: auto;
  max-width: 100px;
  object-fit: contain;
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.15));
}

/* ==== BOTONES TÁCTILES DE MINIJUEGOS ==== */
.dpad-btn {
  min-width: 64px;
  min-height: 56px;
  font-size: 1.5rem;
  line-height: 1;
  touch-action: manipulation;
}

@media (max-width: 576px) {
  .dpad-btn {
    min-width: 56px;
    min-height: 52px;
  }
}

/* ==== FOOTER ==== */
footer {
  border-top: 1px solid #dee2e6;
  font-size: 0.9rem;
}

/* ==== GRÁFICO DE EVOLUCIÓN ==== */
#grafico-evolucion {
  width: 100%;
  height: 160px;
  display: block;
}

/* ==== CONFETI ==== */
.confeti {
  position: fixed;
  top: -10px;
  width: 10px;
  height: 10px;
  z-index: 9999;
  pointer-events: none;
  border-radius: 2px;
  animation-name: caerConfeti;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes caerConfeti {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ==== MODO OSCURO (fondo oscuro, botones claros) ==== */
body.modo-oscuro {
  background-color: #12141a;
  color: #e9ecef;
}

body.modo-oscuro .card-custom {
  background-color: #1c1f27;
  border-color: #2b2f3a;
  color: #e9ecef;
}

body.modo-oscuro .text-dark,
body.modo-oscuro h1,
body.modo-oscuro h2,
body.modo-oscuro h3,
body.modo-oscuro h4,
body.modo-oscuro h5 {
  color: #f1f3f5 !important;
}

body.modo-oscuro .text-secondary {
  color: #adb5bd !important;
}

body.modo-oscuro .text-muted {
  color: #8b93a1 !important;
}

body.modo-oscuro .table {
  color: #e9ecef;
}

body.modo-oscuro .table-hover tbody tr:hover {
  background-color: #262a33;
}

body.modo-oscuro .modal-content {
  background-color: #1c1f27;
  color: #e9ecef;
}

body.modo-oscuro .form-control,
body.modo-oscuro .form-select {
  background-color: #262a33 !important;
  color: #e9ecef !important;
  border-color: #3a3f4b !important;
}

body.modo-oscuro .alert-light {
  background-color: #262a33;
  border-color: #3a3f4b;
  color: #ced4da;
}

/* ---- inputs en modo oscuro: asegurar que siempre se vean ---- */
body.modo-oscuro .form-control,
body.modo-oscuro .form-select {
  background-color: #262a33 !important;
  color: #e9ecef !important;
  border-color: #3a3f4b !important;
}
body.modo-oscuro .form-control::placeholder,
body.modo-oscuro .form-select::placeholder {
  color: #8b93a1 !important;
}
body.modo-oscuro .form-control:focus,
body.modo-oscuro .form-select:focus {
  background-color: #2c313b !important;
  border-color: #4dabf7 !important;
  color: #f8f9fa !important;
  box-shadow: 0 0 0 0.2rem rgba(77, 171, 247, 0.45);
}

/* overrides para inputs que llevan clases climaticas de Bootstrap (bg-light, text-dark, border-secondary) */
body.modo-oscuro .form-control.bg-light,
body.modo-oscuro .form-select.bg-light {
  background-color: #262a33 !important;
  color: #e9ecef !important;
}
body.modo-oscuro .form-control.text-dark,
body.modo-oscuro .form-select.text-dark {
  color: #e9ecef !important;
}
body.modo-oscuro .form-control.border-secondary,
body.modo-oscuro .form-select.border-secondary {
  border-color: #3a3f4b !important;
}

/* checkbox visible en modo oscuro */
body.modo-oscuro .form-check-input {
  background-color: #262a33;
  border: 1px solid #3a3f4b;
  color: #e9ecef;
}
body.modo-oscuro .form-check-input:checked {
  background-color: #4dabf7;
  border-color: #4dabf7;
}
body.modo-oscuro .form-check-input:focus {
  border-color: #4dabf7;
  box-shadow: 0 0 0 0.2rem rgba(77, 171, 247, 0.45);
}

/* Botones mas claros y visibles en modo oscuro */
body.modo-oscuro .btn-outline-secondary {
  color: #f8f9fa;
  border-color: #e9ecef;
}
body.modo-oscuro .btn-outline-secondary:hover,
body.modo-oscuro .btn-outline-secondary:focus {
  background-color: #e9ecef;
  color: #12141a;
}

body.modo-oscuro .btn-outline-dark {
  color: #f8f9fa;
  border-color: #ced4da;
}
body.modo-oscuro .btn-outline-dark:hover,
body.modo-oscuro .btn-outline-dark:focus {
  background-color: #ced4da;
  color: #12141a;
}

body.modo-oscuro .btn-outline-primary { color: #8ab4ff; border-color: #8ab4ff; }
body.modo-oscuro .btn-outline-success { color: #8ce99a; border-color: #8ce99a; }
body.modo-oscuro .btn-outline-warning { color: #ffe066; border-color: #ffe066; }
body.modo-oscuro .btn-outline-danger  { color: #ffa8a8; border-color: #ffa8a8; }
body.modo-oscuro .btn-outline-info    { color: #99e9f2; border-color: #99e9f2; }

body.modo-oscuro .btn-primary   { background-color: #4dabf7; border-color: #4dabf7; color: #10131a; }
body.modo-oscuro .btn-warning   { background-color: #ffe066; border-color: #ffe066; color: #10131a; }
body.modo-oscuro .btn-secondary { background-color: #adb5bd; border-color: #adb5bd; color: #10131a; }

body.modo-oscuro footer {
  border-top-color: #2b2f3a;
}

/* ============================================================
   MOVIL / TACTIL (PWA)
   ============================================================ */
html, body {
  overscroll-behavior: none; /* evita el pull-to-refresh en pleno minijuego */
}

body {
  -webkit-tap-highlight-color: transparent;
}

body, .btn, .form-control, .form-select, .nav-link, .modal-content {
  touch-action: manipulation; /* sin retardo ni zoom por doble toque */
}

/* Respetar notch / bordes redondeados (viewport-fit=cover) */
@supports (padding: max(0px)) {
  body.p-3 {
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
             max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)) !important;
  }
}

/* ==== GAMEPAD TACTIL (minijuegos) ==== */
#gamepad-tactil {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 2000; /* por encima de los modales de Bootstrap */
  display: none;
  align-items: flex-end;
  gap: 12px;
  opacity: 0.95;
  user-select: none;
  -webkit-user-select: none;
}

#gamepad-tactil.visible { display: flex; }

.gamepad-flechas {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(2, 56px);
  gap: 6px;
}

.gp-flecha-up    { grid-column: 2; grid-row: 1; }
.gp-flecha-left  { grid-column: 1; grid-row: 2; }
.gp-flecha-down  { grid-column: 2; grid-row: 2; }
.gp-flecha-right { grid-column: 3; grid-row: 2; }

.gp-btn {
  background-color: rgba(20, 24, 32, 0.72);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  border-radius: 14px;
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.gp-btn small {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.gp-btn:active {
  background-color: rgba(255, 212, 59, 0.92);
  border-color: #ffd43b;
  color: #10131a;
}

.gp-accion {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-color: rgba(220, 53, 69, 0.88);
  border: 3px solid rgba(255, 255, 255, 0.45);
  font-weight: 800;
}

/* ==== MODAL RANKING (online + local) ==== */
.tabla-ranking-wrap {
  max-height: 46vh;
  overflow-y: auto;
}

.tabla-ranking td { vertical-align: middle; }

.redes-lateral {
  position: sticky;
  top: 1rem;
  max-height: 70vh;
  overflow-y: auto;
}

.red-social-post {
  background: rgba(220, 53, 69, 0.035);
  border-color: rgba(220, 53, 69, 0.25) !important;
  font-size: 0.86rem;
}

body.modo-oscuro .red-social-post {
  background: rgba(220, 53, 69, 0.1);
}

.ranking-fila-propia { background-color: rgba(255, 212, 59, 0.18); }

body.modo-oscuro .ranking-fila-propia { background-color: rgba(255, 212, 59, 0.12); }

/* ==== AJUSTES EN PANTALLAS CHICAS ==== */
@media (max-width: 576px) {
  .logo-principal { max-width: 150px; }
  h1 { font-size: 1.6rem; }
  #pantalla-juego h2 { font-size: 1.15rem; }
  .card-custom.p-3, .card-custom.p-4 { padding: 0.75rem !important; }
  .tabla-historial { font-size: 0.78rem; }
  .tabla-historial th, .tabla-historial td { padding: 3px 2px; }
  .modal-dialog { margin: 0.5rem; }
  .btn-lg { font-size: 1.05rem; }
  .gp-btn { font-size: 1.1rem; }
  .gamepad-flechas { grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(2, 50px); }
  .gp-accion { width: 78px; height: 78px; }
}

/* ============================================================
   SELECTOR DE POSICION EN CANCHA (6v6) + CASACA CON DORSAL
   ============================================================ */
.card-cancha {
  background: linear-gradient(180deg, #0f2f1c 0%, #0b2416 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 14px;
  height: 100%;
}

.card-cancha-titulo {
  color: #f1f3f5 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* ---- cancha ---- */
.cancha-selector {
  position: relative;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 12.5%, rgba(0, 0, 0, 0) 12.5% 25%),
    linear-gradient(180deg, #17843f 0%, #0f5f2e 100%);
  border: 3px solid #07301a;
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.35);
}

.cancha-lineas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pos-badge {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 48px;
  padding: 7px 12px;
  background: rgba(6, 26, 15, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.8);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.08s ease, background-color 0.12s ease, color 0.12s ease;
}

.pos-badge:active { transform: translate(-50%, -50%) scale(0.92); }

.pos-badge:focus-visible {
  outline: 3px solid #ffd43b;
  outline-offset: 2px;
}

.pos-badge.pos-seleccionada {
  background: #ffd43b;
  border-color: #ffffff;
  color: #10131a;
}

/* 6v6: DEL-DEL arriba, CM al medio, DEF-DEF abajo, GK en el area */
.pos-del-izq { left: 29%; top: 16%; }
.pos-del-der { left: 71%; top: 16%; }
.pos-cm      { left: 50%; top: 50%; }
.pos-def-izq { left: 29%; top: 75%; }
.pos-def-der { left: 71%; top: 75%; }
.pos-gk      { left: 50%; top: 90.5%; }

/* ---- casaca con dorsal ---- */
.dorsal-input { max-width: 130px; }

.camiseta-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 215px;
  background: radial-gradient(circle at 50% 25%, #1d2935 0%, #10161d 75%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px;
}

.camiseta-preview svg {
  width: 175px;
  height: 175px;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.5));
}

#camiseta-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  min-width: 86px;
  height: 86px;
  padding: 4px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--camiseta-color, #75aadb) 35%, white), var(--camiseta-color, #75aadb));
  border: 2px solid var(--camiseta-sombra, #0d2b45);
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(13, 43, 69, 0.22);
}

#camiseta-badge svg {
  width: 78px;
  height: 78px;
  filter: drop-shadow(0 2px 2px rgba(13, 43, 69, 0.2));
}

@media (max-width: 576px) {
  .camiseta-preview { min-height: 190px; }
  .camiseta-preview svg { width: 150px; height: 150px; }
  #camiseta-badge { width: 66px; min-width: 66px; height: 66px; padding: 2px; }
  #camiseta-badge svg { width: 62px; height: 62px; }
}

/* ==== DUELO 1v1 ONLINE (V2) ==== */
.duelo-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd43b, #ff922b);
  color: #212529;
  font-weight: bold;
  font-size: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(255, 212, 59, 0.45);
}
.duelo-vs {
  font-size: 1.8rem;
  color: #ff6b6b;
  text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}
.duelo-stats > div {
  display: flex;
  flex-direction: column;
  min-width: 76px;
  width: 78px;
  height: 78px;
  filter: drop-shadow(0 2px 2px rgba(13, 43, 69, 0.2));
}
.duelo-stat-num {
  font-size: 1.4rem;
  font-weight: bold;
}
.duelo-stat-lbl {
  font-size: 0.7rem;
  color: #868e96;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.duelo-puntaje {
  font-size: 2.2rem;
}
.duelo-arco {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  padding: 8px;
  border: 3px solid #ced4da;
  border-top: none;
  border-radius: 0 0 14px 14px;
  background: repeating-linear-gradient(45deg, #f8f9fa, #f8f9fa 8px, #eef1f3 8px, #eef1f3 16px);
}
.duelo-zona {
  padding: 14px 4px;
  border: 2px solid #adb5bd;
  border-radius: 8px;
  background: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease;
}
.duelo-zona small {
  display: block;
  font-size: 0.68rem;
  color: #868e96;
  font-weight: normal;
}
.duelo-zona:hover { background: #fff9db; }
.duelo-zona:active { transform: scale(0.96); }
.duelo-zona.seleccionada {
  background: #ffd43b;
  border-color: #fab005;
  box-shadow: 0 0 8px rgba(255, 212, 59, 0.6);
}
body.modo-oscuro .duelo-zona {
  background: #343a40;
  color: #f8f9fa;
  border-color: #6c757d;
}
body.modo-oscuro .duelo-arco {
  background: repeating-linear-gradient(45deg, #2b3035, #2b3035 8px, #23272b 8px, #23272b 16px);
  border-color: #6c757d;
}
.duelo-barra {
  cursor: pointer;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #adb5bd;
}
#duelo-barra-fill {
  transition: width 0.05s linear;
}

/* ==== DUELO FINAL SCREEN ==== */
.duelo-final-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.duelo-campeon-banner {
  background: linear-gradient(135deg, #ffd700 0%, #ff8c00 50%, #dc143c 100%);
  border-radius: 16px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(255, 215, 0, 0.4);
  margin-bottom: 20px;
  border: 3px solid #fff;
}

.duelo-campeon-banner.text-success {
  background: linear-gradient(135deg, #ffd700 0%, #ffd700 50%, #ff8c00 100%);
  box-shadow: 0 8px 32px rgba(255, 215, 0, 0.5);
}

.duelo-campeon-banner.text-warning {
  background: linear-gradient(135deg, #ffd700 0%, #ffa500 50%, #ffd700 100%);
  box-shadow: 0 8px 32px rgba(255, 215, 0, 0.5);
}

.duelo-campeon-titulo {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.duelo-campeon-apodo {
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.duelo-campeon-puntaje {
  font-size: 2.2rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  letter-spacing: 2px;
}

.duelo-trophies-section {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e9ecef;
}

.duelo-trophies-section h5 {
  color: #495057;
  border-bottom: 2px solid #dee2e6;
  padding-bottom: 10px;
}

.duelo-trophies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.duelo-trophy-item {
  background: #fff;
  border-radius: 10px;
  padding: 15px 10px;
  border: 2px solid #e9ecef;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.duelo-trophy-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-color: #ffd700;
}

.duelo-trophy-icon {
  font-size: 1.8rem;
  margin-bottom: 5px;
}

.duelo-trophy-name {
  color: #6c757d;
  font-weight: 500;
}

.duelo-trophy-count {
  color: #ffd700 !important;
  font-size: 1.1rem;
}

.duelo-stats-final .duelo-stat-box {
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  border: 1px solid #e9ecef;
}

.duelo-stats-final .duelo-vs {
  font-size: 2rem;
}
/* ==== BARRA DE PENAL DEL DUELO (mejorada: zona ideal + valor + pasos) ==== */
.duelo-barra-penal {
  width: 100%;
  height: 30px;
  background: #dee2e6;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.duelo-barra-ideal {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(25, 200, 25, 0.28);
  border-left: 2px solid #19c819;
  border-right: 2px solid #19c819;
  pointer-events: none;
  z-index: 1;
}
.duelo-barra-penal #duelo-barra-fill {
  position: relative;
  z-index: 2;
  opacity: 0.85;
}
.duelo-barra-lbl {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  font-weight: 700;
  color: #212529;
  z-index: 3;
  pointer-events: none;
}
.duelo-penal-pasos {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 420px;
  margin: 0 auto;
}
.duelo-penal-paso {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: #6c757d;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 6px 10px;
  text-align: left;
}
.duelo-penal-paso.activo {
  color: #212529;
  border-color: #ffc107;
  background: #fff9db;
}
.duelo-penal-paso.completo {
  color: #198754;
  border-color: #198754;
  background: #eafaf1;
}
.duelo-penal-paso.completo::after {
  content: "✓";
  margin-left: auto;
  font-weight: 700;
}
.duelo-paso-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #adb5bd;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.duelo-penal-paso.activo .duelo-paso-num { background: #ffc107; color: #212529; }
.duelo-penal-paso.completo .duelo-paso-num { background: #198754; }

body.modo-oscuro .duelo-barra-penal { background: #343a40; }
body.modo-oscuro .duelo-penal-paso { border-color: #495057; color: #adb5bd; }
body.modo-oscuro .duelo-penal-paso.activo { background: #4d3b00; border-color: #ffc107; color: #ffe066; }
body.modo-oscuro .duelo-penal-paso.completo { background: #10361f; border-color: #198754; color: #75d1a3; }
body.modo-oscuro .duelo-barra-lbl { color: #f8f9fa; }