:root{
  --bg-sidebar:#262522;
  --bg-main:#302e2b;
  --bg-card:#262421;
  --chess-green:#81b64c;
  --chess-green-hover:#719f41;
  --text-primary:#ffffff;
  --text-secondary:#bababa;
  --border-soft:rgba(255,255,255,.10);
  --shadow-soft:0 10px 20px rgba(0,0,0,.30);
  --header-height: 70px;
}
html, body{
  height:100%;
}
body{
  background-color:var(--bg-main);
  color:var(--text-primary);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Helvetica,Arial,sans-serif;
  overflow-x:hidden;
}
a{
  color:inherit;
}
a:hover{
  color:inherit;
}
:focus-visible{
  outline:2px solid var(--chess-green);
  outline-offset:2px;
}
#wrapper{
  min-height:100vh;
}
#sidebar-wrapper{
  background-color:var(--bg-sidebar);
  width:17rem;
  height:100vh;
  position:sticky;
  top:0;
  overflow-y:auto;
  margin-left:-17rem;
  transition:margin .25s ease-out;
  border-right:1px solid var(--border-soft);
  flex-shrink:0;
  z-index:1000;
  scrollbar-color:#3d3b38 var(--bg-sidebar);
  scrollbar-width:thin;
}
#sidebar-wrapper::-webkit-scrollbar{
  width:6px;
}
#sidebar-wrapper::-webkit-scrollbar-track{
  background:var(--bg-sidebar);
}
#sidebar-wrapper::-webkit-scrollbar-thumb{
  background:#3d3b38;
  border-radius:3px;
}
#sidebar-wrapper::-webkit-scrollbar-thumb:hover{
  background:var(--chess-green);
}
.sidebar-heading {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}
.sidebar-logo{
  width:45px;
  height:auto;
  filter:invert(1) brightness(200%);
  margin-bottom:0;
  transition:transform .3s ease;
}
.sidebar-logo:hover{
  transform:scale(1.08) rotate(-4deg);
}
.ls-1{
  letter-spacing:2px;
  text-shadow:0 2px 4px rgba(0,0,0,.5);
}
.list-group-item{
  background-color:transparent;
  color:var(--text-secondary);
  font-weight:600;
  padding:12px 20px;
  border:none;
  display:flex;
  align-items:center;
  text-decoration:none;
  white-space:nowrap;
}
.list-group-item:hover{
  background-color:rgba(255,255,255,.08);
  color:var(--text-primary);
}
.list-group-item.active{
  background-color:rgba(255,255,255,.10);
  color:var(--text-primary);
  border-left:4px solid var(--chess-green);
}
.list-group-item i.bi{
  font-size:1.2rem;
  color:#8b8987;
  margin-right:10px;
  min-width:25px;
  text-align:center;
}
.list-group-item:hover i.bi,
.list-group-item.active i.bi{
  color:var(--chess-green);
}
.small-icon{
  font-size:.8rem;
  margin-left:auto;
  transition: transform 0.3s ease;
}
.list-group-item[aria-expanded="true"] .small-icon {
    transform: rotate(180deg);
}
.collapse .bg-dark-subtle{
  background-color:transparent !important;
  position:relative;
  padding-left:1rem !important;
}
.collapse .bg-dark-subtle::before{
  content:"";
  position:absolute;
  left:2rem;
  top:0;
  bottom:0;
  width:2px;
  background-color:rgba(255,255,255,.10);
}
.collapse .list-group-item{
  padding-left:3rem !important;
  font-size:.9rem;
  color:#999;
  border:none !important;
  position:relative;
  background:transparent;
}
.collapse .list-group-item i{
  font-size:1rem !important;
  margin-right:10px;
  width:20px;
  text-align:center;
  color:#666;
  transition:color .2s;
}
.collapse .list-group-item:hover{
  color:#fff !important;
  background-color:transparent !important;
}
.collapse .list-group-item:hover i{
  color:var(--chess-green);
}
.collapse .list-group-item:hover::before{
  content:"";
  position:absolute;
  left:1.5rem;
  width:6px;
  height:6px;
  background-color:var(--chess-green);
  border-radius:50%;
}
#page-content-wrapper{
  width:100%;
  transition:margin .25s ease-out;
}
.bg-dark-chess{
  background-color:var(--bg-sidebar) !important;
}
#page-content-wrapper .navbar{
  height: var(--header-height) !important;
  background-color:var(--bg-sidebar) !important;
  border-bottom:1px solid var(--border-soft) !important;
  color:#fff;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#wrapper.toggled #sidebar-wrapper{
  margin-left:0;
}
@media (min-width:768px){
  #sidebar-wrapper{
    margin-left:0;
  }
  #wrapper.toggled #sidebar-wrapper{
    margin-left:-17rem;
  }
}
.btn-chess,
.btn-chess-secondary{
  font-weight:700;
  border:none;
  border-radius:.3rem;
  transition:transform .1s, box-shadow .1s, background-color .1s;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-chess{
  background-color:var(--chess-green);
  color:#fff;
  box-shadow:0 4px 0 #608a34;
}
.btn-chess:hover{
  background-color:var(--chess-green-hover);
  color:#fff;
  transform:translateY(2px);
  box-shadow:0 2px 0 #608a34;
}
.btn-chess-secondary{
  background-color:#3d3b38;
  color:#b5b5b5;
  box-shadow:0 4px 0 #2b2926;
}
.btn-chess-secondary:hover{
  background-color:#4a4845;
  color:#fff;
  transform:translateY(2px);
  box-shadow:0 2px 0 #2b2926;
}
.btn-chess:active,
.btn-chess-secondary:active{
  transform:translateY(4px);
  box-shadow:none !important;
}
.btn-chess i,
.btn-chess-secondary i{
  margin-right:8px;
}
.card{
  background-color:var(--bg-card);
  color:var(--text-primary);
  border:1px solid var(--border-soft);
}
.text-muted{
  color:var(--text-secondary) !important;
}
.text-chess-green{
  color:var(--chess-green) !important;
}
.border-chess-green{
  border-color:var(--chess-green) !important;
}
.card-hover{
  transition:transform .2s ease, box-shadow .2s ease;
}
.card-hover:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-soft) !important;
}
.img-wrapper{
  overflow:hidden;
}
.zoom-effect{
  transition:transform .5s ease;
}
.card-hover:hover .zoom-effect{
  transform:scale(1.05);
}
.clamp-text{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.cursor-pointer{
  cursor:pointer;
}
.club-card{
  transition:all .2s;
  background-color:rgba(255,255,255,.05) !important;
}
.club-card:hover{
  border-color:var(--chess-green) !important;
  background-color:rgba(129,182,76,.10) !important;
}
.hover-green:hover{
  color:var(--chess-green) !important;
}
.hover-white:hover{
  color:#fff !important;
}
@media (prefers-reduced-motion: reduce){
  *{
    transition:none !important;
    animation:none !important;
    scroll-behavior:auto !important;
  }
}
.form-control, .form-select {
    background-color: #3d3b38;
    border: 1px solid var(--border-soft);
    color: var(--text-primary);
}
.form-control:focus, .form-select:focus {
    background-color: #454340;
    border-color: var(--chess-green);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.25rem rgba(129, 182, 76, 0.25);
}
.form-control::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}
.input-group-text {
    background-color: #2b2926;
    border-color: var(--border-soft);
    color: var(--text-secondary);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #3d3b38 inset !important;
    -webkit-text-fill-color: white !important;
}


/* Capa oscura para que el texto blanco resalte sobre la imagen */
.bg-overlay {
    background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
    z-index: 0;
}

/* Colores de texto específicos */
.text-chess-green {
    color: var(--chess-green) !important;
}

/* --- TARJETAS SOBRE NOSOTROS --- */
.border-chess {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background-color: var(--chess-bg-dark) !important; /* Usa tu variable global */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-effect:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(129, 182, 76, 0.15); /* Sombra verde suave */
    border-color: var(--chess-green) !important;
}

.icon-box {
    width: 80px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

/* Hero Section Background */
.hero-section {
    background-image: url('https://images.unsplash.com/photo-1586165368502-1bad197a6461?q=80&w=2658&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 500px;
    display: flex;
    align-items: center;
}
.bg-overlay {
    background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
    z-index: 0;
}

/* Botón 3D Verde */
.btn-profundidad {
    background-color: #81b64c !important;
    color: white !important;
    border: none !important;
    border-radius: 10px;
    box-shadow: 0 6px 0 #5e8535, 0 10px 10px rgba(0,0,0,0.2) !important;
    transition: all 0.2s ease;
    transform: translateY(0);
}
.btn-profundidad:hover {
    background-color: #95bb4a !important;
    transform: translateY(-4px);
    box-shadow: 0 10px 0 #5e8535, 0 20px 25px rgba(0,0,0,0.3) !important;
}
.btn-profundidad:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #5e8535, 0 5px 5px rgba(0,0,0,0.2) !important;
}

/* List Group (Top ELO) Hover Fix */
.list-group-item-action { transition: all 0.2s ease; }
.list-group-item-action:hover {
    background-color: #383531 !important;
    transform: translateX(5px);
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Clubes Hover */
.club-card { transition: transform 0.2s ease, border-color 0.2s ease; }
.club-card:hover {
    transform: translateY(-5px);
    border-color: #81b64c !important;
    background-color: #2a2a2a !important;
}

/* Inputs deshabilitados */
.form-control-disabled {
    width: 100%;
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;

    background-color: #2b2926;
    color: #bcbcbc;

    border: 1px solid rgba(255,255,255,.08);
    border-left: 4px solid var(--chess-green);

    border-radius: 0.375rem;

    cursor: not-allowed;
    user-select: none;

    box-shadow: inset 0 2px 4px rgba(0,0,0,.25);
    transition: none;
}

.form-control-disabled::placeholder {
    color: #8b8b8b;
}

.form-control-disabled:focus {
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.25);
}