/* FIFA-like UI theme (inspirado, no assets propietarios)
   - Dark stadium feel
   - Neon accent
   - Glass cards + angled highlights
*/

:root{
  --bg0: #070a0f;
  --bg1: #0b0f14;
  --panel: rgba(16, 22, 31, 0.78);
  --panel2: rgba(10, 14, 20, 0.55);
  --stroke: rgba(255,255,255,0.10);
  --stroke2: rgba(255,255,255,0.16);

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.62);

  --accent: #7CFF4E;   /* verde FIFA-esque */
  --accent2: #23D5FF;  /* cian */
  --danger: #ff4d4d;

  --radius: 18px;
  --radius-sm: 14px;
  --shadow: 0 18px 40px rgba(0,0,0,.55);
}

html, body { height: 100%; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(35,213,255,.16), transparent 55%),
    radial-gradient(1200px 600px at 80% 0%, rgba(124,255,78,.14), transparent 50%),
    radial-gradient(900px 500px at 50% 110%, rgba(124,255,78,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* Subtle grain */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.navbar{
  background: rgba(5,7,10,.65) !important;
  border-bottom: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
}
.navbar .navbar-brand{
  font-family: Oswald, Inter, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.navbar .nav-link{
  color: rgba(255,255,255,.78) !important;
}
.navbar .nav-link:hover{
  color: white !important;
}

.container{
  max-width: 1100px;
}

h1,h2,h3,h4{
  font-family: Oswald, Inter, sans-serif;
  letter-spacing: .02em;
}

.text-muted{ color: var(--muted) !important; }

.card{
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
.card::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(900px 180px at 20% 0%, rgba(124,255,78,.16), transparent 60%),
    radial-gradient(900px 180px at 80% 0%, rgba(35,213,255,.12), transparent 60%);
  pointer-events:none;
  opacity:.9;
}
.card > *{ position: relative; z-index: 1; }

hr{ border-color: rgba(255,255,255,.14); }

.form-label{ color: rgba(255,255,255,.8); }
.form-text{ color: rgba(255,255,255,.55); }

.form-control, .form-select{
  background-color: rgba(10,14,20,.65);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  border-radius: 14px;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(124,255,78,.8);
  box-shadow: 0 0 0 .2rem rgba(124,255,78,.18);
  background-color: rgba(10,14,20,.75);
  color: rgba(255,255,255,.95);
}
.form-select option{ color: #0b0f14; }

.btn{
  border-radius: 999px;
  padding: .55rem 1rem;
  font-weight: 700;
}
.btn-primary{
  background: linear-gradient(90deg, rgba(124,255,78,1), rgba(35,213,255,1));
  border: none;
  color: #071012;
}
.btn-primary:hover{ filter: brightness(1.05); }
.btn-outline-secondary{
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.84);
}
.btn-outline-secondary:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.28);
  color: white;
}
.btn-outline-primary{
  border-color: rgba(124,255,78,.55);
  color: rgba(255,255,255,.92);
}
.btn-outline-primary:hover{
  background: rgba(124,255,78,.14);
  border-color: rgba(124,255,78,.75);
  color: white;
}

.badge.bg-secondary{
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: .4rem .6rem;
}

.table{
  color: rgba(255,255,255,.9);
}
.table thead th{
  color: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.table td, .table th{
  border-color: rgba(255,255,255,.10);
}
.table tr:hover td{
  background: rgba(255,255,255,.04);
}

.alert{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,14,20,.65);
  color: rgba(255,255,255,.92);
}
.alert-success{
  border-color: rgba(124,255,78,.35);
}
.alert-danger{
  border-color: rgba(255,77,77,.35);
}
.alert-warning{
  border-color: rgba(255,193,7,.35);
}

.stat-card{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: rgba(10,14,20,.45);
}
.stat-label{ font-size: .9rem; color: rgba(255,255,255,.62); }
.stat-value{
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.1;
  background: linear-gradient(90deg, rgba(124,255,78,1), rgba(35,213,255,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.select-row{
  display: flex;
  gap: .5rem;
  align-items: center;
}
.select-row .slot-label{
  width: 2.2rem;
  flex: 0 0 auto;
  font-weight: 700;
  color: rgba(255,255,255,.6);
}

footer{
  color: rgba(255,255,255,.45) !important;
}


/* Table visibility patch (mejor contraste) */
.table-responsive{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
}

.table{
  margin-bottom: 0;
  background: rgba(10,14,20,.35);
}

.table thead{
  background: linear-gradient(90deg, rgba(124,255,78,.16), rgba(35,213,255,.12));
}

.table thead th{
  background: transparent;
  color: rgba(255,255,255,.92) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
  font-size: .78rem;
  padding-top: .75rem;
  padding-bottom: .75rem;
}

.table tbody td{
  color: rgba(255,255,255,.9);
}

.table tbody tr:nth-child(odd) td{
  background: rgba(255,255,255,.02);
}

.table tbody tr:hover td{
  background: rgba(124,255,78,.06);
}


/* Headings + radios visibility patch */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5{
  color: rgba(255,255,255,.94);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

.form-check-label{
  color: rgba(255,255,255,.86);
  font-weight: 700;
}

.form-check-input{
  width: 1.1em;
  height: 1.1em;
  background-color: rgba(10,14,20,.65);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: none;
}

.form-check-input:focus{
  border-color: rgba(124,255,78,.9);
  box-shadow: 0 0 0 .2rem rgba(124,255,78,.18);
}

.form-check-input:checked{
  background-color: rgba(124,255,78,1);
  border-color: rgba(124,255,78,1);
}

.form-check-input:checked[type="radio"]{
  background-image: radial-gradient(circle at 50% 50%, #071012 0 38%, transparent 40% 100%);
}


/* Fix Bootstrap table white rows */
.table{
  --bs-table-bg: transparent;
  --bs-table-color: rgba(255,255,255,.92);
  --bs-table-striped-color: rgba(255,255,255,.92);
  --bs-table-striped-bg: rgba(255,255,255,.02);
  --bs-table-hover-color: rgba(255,255,255,.95);
  --bs-table-hover-bg: rgba(124,255,78,.06);
}

.table>:not(caption)>*>*{
  background-color: transparent !important;
  color: inherit;
}

.table tbody td{
  background: rgba(10,14,20,.22);
}

.table tbody tr:nth-child(odd) td{
  background: rgba(10,14,20,.28);
}


/* FIFA card */
.inner-panel{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.10);
}

.fifa-card{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(700px 280px at 30% 0%, rgba(124,255,78,.18), transparent 60%),
    radial-gradient(700px 280px at 80% 20%, rgba(35,213,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(10,14,20,.65), rgba(10,14,20,.35));
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  overflow: hidden;
  position: relative;
  padding: 16px 16px 14px;
}
.fifa-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, rgba(255,255,255,.08), transparent 35%, rgba(255,255,255,.05));
  transform: translateX(-35%);
  opacity: .55;
  pointer-events:none;
}
.fifa-card > *{ position: relative; z-index: 1; }

.fifa-card-top{
  display:flex;
  gap: 14px;
  align-items: center;
}
.fifa-card-rating .label{
  color: rgba(255,255,255,.65);
  font-size: .75rem;
  letter-spacing: .12em;
  font-weight: 800;
}
.fifa-card-rating .value{
  font-family: Oswald, Inter, sans-serif;
  font-size: 3rem;
  line-height: 1;
  font-weight: 800;
  background: linear-gradient(90deg, rgba(124,255,78,1), rgba(35,213,255,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fifa-card-photo{
  margin-left: auto;
  width: 110px;
  height: 110px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  position: relative;
  overflow: hidden;
}
.fifa-card-photo img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:none;
}
.fifa-card-photo img.show{ display:block; }
.fifa-card-photo .photo-fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 2.2rem;
  color: rgba(255,255,255,.55);
}

.fifa-card-name{
  margin-top: 12px;
  font-family: Oswald, Inter, sans-serif;
  font-size: 1.35rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.fifa-card-sub{
  color: rgba(255,255,255,.65);
  margin-top: 2px;
  font-weight: 700;
}

.fifa-card-stats{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.fifa-card-stats-2{
  grid-template-columns: repeat(3, 1fr);
  margin-top: 10px;
}

.fifa-card-stats .item{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,14,20,.30);
  border-radius: 14px;
  padding: 10px 10px;
  text-align:center;
}
.fifa-card-stats .k{
  color: rgba(255,255,255,.62);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.fifa-card-stats .v{
  margin-top: 2px;
  font-size: 1.2rem;
  font-weight: 900;
}

.fifa-progress{
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
}
.fifa-progress .progress-bar{
  background: linear-gradient(90deg, rgba(124,255,78,1), rgba(35,213,255,1));
}

/* Profile edit panel */
#editPanelWrap .card{
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}


/* FIFA card stats contrast boost */
.fifa-card-stats .item{
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(10,14,20,.28));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}

.fifa-card-stats .k{
  color: rgba(255,255,255,.78);
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}

.fifa-card-stats .v{
  color: rgba(255,255,255,.96);
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
  font-family: Oswald, Inter, sans-serif;
  letter-spacing: .02em;
}

.fifa-card-name{
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}

.fifa-card-sub{
  color: rgba(255,255,255,.78);
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}

/* Placeholder visibility */
.form-control::placeholder,
.form-select::placeholder{
  color: rgba(255,255,255,.45);
  opacity: 1;
}
.form-control::-webkit-input-placeholder{ color: rgba(255,255,255,.45); }
.form-control::-moz-placeholder{ color: rgba(255,255,255,.45); opacity:1; }
.form-control:-ms-input-placeholder{ color: rgba(255,255,255,.45); }
.form-control:-moz-placeholder{ color: rgba(255,255,255,.45); opacity:1; }

/* Resultado label visibility */
.match-result-label{
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 0 rgba(0,0,0,.55);
}