/* General */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    font-family: "Segoe UI", sans-serif;
    background: #f4f6f9;
    color: #333;
  }
  
  /* Layout */
  .admin-container {
    display: flex;
    min-height: 100vh;
  }
  
  /* Sidebar */
  .sidebar {
    width: 250px;
    background: #111a23;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding-block: 20px;
  }
  .sidebar-logo {
    text-align: center;
    margin-bottom: 30px;
  }
  .sidebar-logo img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: .2rem solid #fff;
  }
  .sidebar h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 10px;
    opacity: .8;
  }
  .menu {
    display: flex;
    flex-direction: column;
  }
  .menu a {
    width: 100%;
    color: #bdc3c7;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s;
    border-top: .1rem solid #ffffff15;
    border-bottom: .1rem solid #ffffff15;
    padding: 1.5rem;
    transition: all .3s ease;
  }
  .menu a:hover {
    color: #111a23;
    background: #f4f6f9;
    font-size: 1.5rem;
  }
  
  /* Main content */
  .main-content {
    flex: 1;
    padding: 20px;
  }
  .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
  }
  .topbar h1 {
    font-size: 1.5rem;
  }
  .user-info {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  .logout {
    padding: 5px 10px;
    background: #e74c3c;
    border: none;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
  }
  .logout:hover {
    background: #c0392b;
  }
  
  /* Cards resumen */
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
  }
  .card {
    background: #fff;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.05);
  }
  .card h3 {
    font-size: 2rem;
    color: #111a23;
  }
  .card p {
    font-size: 1rem;
    color: #666;
  }
  
  /* Dashboard sections */
  .dashboard-section {
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.05);
  }
  .dashboard-section h2 {
    margin-bottom: 15px;
  }
  .activity-list {
    list-style: none;
    color: #444;
  }
  .activity-list li {
    margin: 10px 0;
    padding-left: 5px;
    border-left: 3px solid #111a23;
  }
  
  /* Match Card */
  .match-card-a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 10px;
    font-weight: 600;
  }
  .match-card-a .team-a {
    flex: 1;
    text-align: center;
  }
  .match-card-a .score-a {
    font-size: 1.2rem;
    color: #111a23;
    margin-inline: 1rem;
    font-weight: 900;
  }
  .match-card-a p {
    flex-basis: 100%;
    text-align: center;
    margin-top: 10px;
    font-size: 0.9rem;
    color: #555;
  }

  /* LIGA.EDIT.HTML */
  .edit-liga{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-block: 0rem;
  }
  .form-edit-liga{
    width: 90%;
    background: #fff;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.05);
    padding: 2rem;
    border-radius: 2rem;
  }
  .liga-h1{
    font-size: 1.5rem;
    color: #111a23;
  }
  .liga-h2{
    font-size: 1rem;
    color: #111a2363;
  }
  .inputs-cont{
    width: 100%;
    padding: 1rem;
    margin-block: 1rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* From Uiverse.io by ercnersoy */ 
  .inputs-cont .input {
  border: none;
  width: 40%;
  padding-block: 1rem;
  padding-left: 1rem;
  border-radius: 1rem;
  background: #f0f0f0;
  box-shadow: 1px 1px 6px #ffffff,
     -1px -1px 6px #ffffff;
  transition: 0.3s;
  margin-block: 1rem;
  margin-inline: .5rem;
 }
 
 .inputs-cont .input:focus {
  outline-color: #f0f0f0;
  background: #f0f0f0;
  box-shadow: inset 1px 1px 6px #c5c5c5,
     inset -1px -1px 6px #ffffff;
  transition: 0.3s;
 }
 .file-cont{
  width: 100%;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 /* From Uiverse.io by Yaya12085 */ 
.custum-file-upload {
  height: 12rem;
  width: 12rem;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: space-between;
  gap: 20px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  padding: 1.5rem;
  box-shadow: 1px 1px 6px #ffffff,
     -1px -1px 6px #ffffff;
    position: relative;
}
.img-file{
  width: 100%;
  height: 100%;position: absolute;
  border-radius: 50%;
  z-index: inherit 100;
  opacity: .75;
}

.custum-file-upload .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.custum-file-upload .icon svg {
  height: 80px;
  fill: rgba(75, 85, 99, 1);
}

.custum-file-upload .text {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  background: #ffffffc7;
  border-radius: 50%;
}

.custum-file-upload .text span {
  font-weight: 800;
  font-size: 1rem;
}

.custum-file-upload input {
  display: none;
}

/* TORNEOS.EDIT.HTML */
.torneos-edit{
  width: 100%;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.torneo-cont{
  width: 60%;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 1px 1px 6px #c5c5c5, -1px -1px 6px #f5f5f5;
  padding: 1rem;
  margin-inline: 1.5rem;
}
.header-torneos{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-torneos h1{
  font-size: 1rem;
  color: #fff;
  padding-inline: 1rem;
  padding-block: .5rem;
  background: #111a23;
  border-radius: 1rem;
}
.header-torneos p{
  width: 2rem;
  height: 2rem;
  background: #111a23;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 2rem;
}
.header-torneos p svg{
  width: 1.5rem;
  height: 1.5rem;
  fill: #fff;
}

.tor-cont{
  width: 100%;
  min-height: 12rem;
  max-height: 12rem;
  flex-direction: column;
  margin-block: 1rem;
  overflow: auto;
}
.tor-cont .span-haed{
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /*background: #f4f6f9;*/
}

.tor-cont .span-haed p:nth-child(1){
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: left;
  font-size: .95rem;
  padding-left: 1rem;
}
.tor-cont .span-haed p:nth-child(2){
  width: 20%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
}
.tor-cont .span-haed p:nth-child(3){
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
}
.tor-cont .span-items{
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111a23;
  border-radius: .5rem;
  margin-block: .5rem;
}
.tor-cont .span-items p:nth-child(1){
  width: 40%;
  height: 100%;
  display: flex ;
  align-items: center;
  justify-content: left;
  padding-left: 1rem;
  color: #fff;
  font-size: .95rem;
}

.tor-cont .span-items p:nth-child(1) img{
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: .15rem solid #fff;
  margin-right: .5rem;
}

.tor-cont .span-items p:nth-child(2),
.tor-cont .span-items a{
  width: 20%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .85rem;
  text-decoration: none;
}
.tor-cont .span-items .actions{
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tor-cont .span-items .actions a{
  width: 1.5rem;
  height: 1.5rem;
  background: #111a23;
  display: flex;
  align-items: center;
  justify-content: center;
  border: .15rem solid #fff;
  border-radius: 50%;
  margin-inline: .15rem;
}
.actions a svg{
  width: .75rem;
  height: .75rem;
  fill: #fff;
}

.form-ag-torneo{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: -2500px;
  z-index: 100;
  backdrop-filter: blur(5px);
  transition: .9s;
}
.form-ag-torneo.window-emrg{
  top: 0;
}
.form-ag-torneo form{
  width: 40%;
  background: #fff;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 1px 1px 10px #333, -1px -1px 10px #333;
}
.header-ag-torneo{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-ag-torneo h1{
  font-size: 1rem;
  color: #fff;
  padding-inline: 1rem;
  padding-block: .5rem;
  background: #111a23;
  border-radius: 1rem;
}
.header-ag-torneo a{
  width: 2rem;
  height: 2rem;
  background: #111a23;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 2rem;
}
.header-ag-torneo a svg{
  width: 1.5rem;
  height: 1.5rem;
  fill: #fff;
}
.form-ag-torneo form input{
  border: none;
  width: 100%;
  padding-block: 1rem;
  padding-left: 1rem;
  border-radius: 1rem;
  background: #f0f0f0;
  box-shadow: 1px 1px 6px #ffffff,
     -1px -1px 6px #ffffff;
  transition: 0.3s;
  margin-block: 1rem;
}
.form-ag-torneo form .cont-inputs-fechas{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.form-ag-torneo form .cont-btn{
  width: 100%;
  display: flex;
  justify-content: right;
  align-items: center;
  padding-block: .5rem;
}
.form-ag-torneo form button{
  padding-inline: 1.5rem;
  padding-block: .5rem;
  background: #fff;
  color: #111a23;
  border-radius: 1rem;
  font-weight: 900;
  border: .2rem solid #111a23;
}
/* JORNADAS.EDIT.HTML */

.jor-edit{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.head-jor{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: left;
}
.head-jor a{
  width: 1.5rem;
  height: 1.5rem;
  background: #111a23;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.5rem;
}
.head-jor a svg{
  width: 1rem;
  height: 1rem;
  fill: #fff;
}
.head-jor h1{
  font-size: 1.75rem;
  color: #4d4d4dab;
  border-left: .3rem solid #111a23;
  padding-left: 1.5rem;
}

.cont-sect-jor{
  width: 100%;
  padding: 2rem;
  display: flex;
  overflow: auto;
}

.add-jor{
  width: 20rem;
  max-height: 15rem;
  background: #fff;
  padding: 1rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: 1px 1px 5px #eeeeee, -1px -1px 5px #d4d4d4;
}
.add-jor h1{
  width: 100%;
  display: flex;
  align-items:  center;
  justify-content: left;
  opacity: .75;
  font-size: 1.5rem;
  border-left: .3rem solid #111a23;
  padding-left: 1rem;
  margin-bottom: 1rem;
}

.add-jor .input{
  border: none;
  width: 100%;
  padding-block: 1rem;
  padding-left: 1rem;
  border-radius: 1rem;
  background: #f0f0f0;
  box-shadow: 1px 1px 6px #ffffff,
     -1px -1px 6px #ffffff;
  transition: 0.3s;
  margin-block: 1rem;
  margin-inline: .5rem;
}
.add-jor .input:focus{
  outline-color: #f0f0f0;
  background: #f0f0f0;
  box-shadow: inset 1px 1px 6px #c5c5c5,
     inset -1px -1px 6px #ffffff;
  transition: 0.3s;
}

.add-jor button{
  border: none;
  width: 50%;
  padding-block: .75rem;
  border-radius: 1rem;
  background: #111a23;
  box-shadow: 1px 1px 6px #ffffff,
     -1px -1px 6px #ffffff;
  transition: 0.3s;
  margin-block: 1rem;
  margin-inline: .5rem;
  color: #fff;
  transition: all .3s ease;
}
.add-jor button:hover{
  background: #37536e;
}

.jor{
  width: 25rem;
  background: #fff;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: 1px 1px 5px #eeeeee, -1px -1px 5px #d4d4d4;
  margin-inline: 1rem;
}
 .jor .one{
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-inline: .5rem;
  padding-top: .5rem;
 }
 .jor .one .head-jor-cont{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: right;
 }

.one .head-jor-cont a{
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111a23;
  border-radius: 50%;
}

 .one .head-jor-cont a svg{
  width: 1rem;
  height: 1rem;
  fill: #fff;
 }

 .one h1{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;  
    color: #5a5a5a85;
    padding-block: .5rem;
    border-bottom: .1rem solid #111a23;
 }
 .one h1 span{
    padding: .5rem;
    background: #111a23;
    color: #fff;
    opacity: 1;
    border-radius: 1rem;
 }

 .jor .two{
  width: 100%;
  min-height: 20rem;
  max-height: 20rem;
  box-shadow: inset 1px 1px 5px #d3d3d3, inset -1px -1px 5px #d3d3d3;
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow: auto;
}

 .jor .three{
    width: 100%;
    padding-block: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: .1rem solid #111a23;
 } 
  .three a{
    width: 75%;
    background: #111a23;
    padding-block: .65rem;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    margin-block: 1rem;
  }
/* CARD PARTIDO */
  .match-card {
    background-color: var(--blanco);
    border-radius: 15px;
    padding: .5rem;
    margin-block: .5rem;
    text-align: center;
    width: 95%;
    /*width: 30%;*/
    height: 15rem;
    color: var(--texto-claro);
    box-shadow: 1px 1px 5px #a3a3a3, -1px -1px 5px #a3a3a3;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
  }
  
  .match-card:hover {
    scale: 1.01;
    box-shadow: 1px 1px 10px #111a23, -1px -1px 10px #111a23;
  }
  
  .match-top .field-name {
    font-size: 14px;
    color: #8f8f8f;
    margin-bottom: 10px;
  }
  
  .match-middle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
  }
  
  .team {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
  }
  
  .team img {
    width: 50px;
    height: 50px;
    background: #fff;
    object-fit: contain;
    margin-bottom: 5px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    border: .2rem solid #111a23;
  }
  
  .team p {
    font-size: .75rem;
    color: #8f8f8f;
    text-align: center;
  }
  
  .vs p {
    font-size: 20px;
    font-weight: bold;
    color: var(--azul-oscuro);
    margin: 0 10px;
  }
  
  .match-bottom p {
    font-size: 13px;
    margin: 4px 0;
    color: #8f8f8f;
  }
  
  .match-bottom .status {
    color: var(--azul-oscuro);
    font-weight: bold;
  }

  /* EQUIPOS.TORNEO.HTML */

.cont-tb-eq{
  width: 100%;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.cont-tb-eq .cont-eq{
  width: 40%;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 1px 1px 6px #c5c5c5, -1px -1px 6px #f5f5f5;
  margin-inline: 1.5rem;
  display: flex;
  align-items: left;
  justify-content: center;
  flex-direction: column;
  padding: 1rem;

}

.cont-eq .head-eq-cont{
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
  margin-bottom: .5rem;
}

.cont-eq .head-eq-cont h1{
  font-size: 1.25rem;
  color: #fff;
  padding-inline: 1rem;
  padding-block: .5rem;
  background: #111a23;
  border-radius: 1rem;
}

/* From Uiverse.io by garerim */ 
.container-input-search {
  position: relative;
  margin-block: .5rem;
}

.input-search {
  width: 30%;
  padding: 10px 0px 10px 40px;
  border-radius: 9999px;
  border: solid 1px #333;
  transition: all .2s ease-in-out;
  outline: none;
  opacity: 0.8;
}

.container-input-search svg {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translate(0, -50%);
}

.input-search:focus {
  opacity: 1;
  width: 100%;
}

.cont-span-eq{
  width: 100%;
  min-height: 12rem;
  max-height: 12rem;
  flex-direction: column;
  margin-block: 1rem;
  overflow: auto;
}
.cont-span-eq .eq-span{
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: left;
  background: #111a23;
  border-radius: .5rem;
  margin-block: .5rem;
}
.eq-span a {
  width: 1.75rem;
  height: 1.75rem;
  border: .2rem solid #fff;
  background: #fff;
  border-radius: 50%;
  margin-inline: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eq-span a svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #111a23;
}

.eq-span img{
  width: 2rem;
  height: 2rem;
  border: .2rem solid #fff;
  background: #fff;
  border-radius: 50%;
  margin-inline: .5rem ;
}

.eq-span p{
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin-inline: .5rem;
}
/* FORM.EDIT.TORNEO.HTML */
.form-edit-tor{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem;
}
.form-edit-tor form{
  width: 50%;
  background: #fff;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 1px 1px 6px #c5c5c5, -1px -1px 6px #f5f5f5;
}
.header-ag-torneo{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-ag-torneo h1{
  font-size: 1rem;
  color: #fff;
  padding-inline: 1rem;
  padding-block: .5rem;
  background: #111a23;
  border-radius: 1rem;
}
.header-ag-torneo a{
  width: 2rem;
  height: 2rem;
  background: #111a23;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 2rem;
}
.header-ag-torneo a svg{
  width: 1.5rem;
  height: 1.5rem;
  fill: #fff;
}
.form-edit-tor form input{
  border: none;
  width: 100%;
  padding-block: 1rem;
  padding-left: 1rem;
  border-radius: 1rem;
  background: #f0f0f0;
  box-shadow: 1px 1px 6px #ffffff,
     -1px -1px 6px #ffffff;
  transition: 0.3s;
  margin-block: 1rem;
}
.form-edit-tor form .cont-inputs-fechas{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.form-edit-tor form .cont-btn{
  width: 100%;
  display: flex;
  justify-content: right;
  align-items: center;
  padding-block: .5rem;
}
.form-edit-tor form button{
  padding-inline: 1.5rem;
  padding-block: .5rem;
  background: #fff;
  color: #111a23;
  border-radius: 1rem;
  font-weight: 900;
  border: .2rem solid #111a23;
}

/* JUGADORES.EQUIPOS.HTML */
.jugadores-eq{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: 4rem;
}
.cont-jugadores-eq{
   width: 80%;
  background: #fff;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 1px 1px 6px #c5c5c5, -1px -1px 6px #f5f5f5;
}
.header-cont-eq{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
}
.header-cont-eq h1{
  font-size: 1rem;
  color: #fff;
  padding-inline: 1rem;
  padding-block: 1rem;
  background: #111a23;
  border-radius: 1rem;
}
.header-cont-eq p{
  width: 2rem;
  height: 2rem;
  background: #111a23;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 2rem;
}
.header-cont-eq p svg{
  width: 1.5rem;
  height: 1.5rem;
  fill: #fff;
}
.cont-jugadores{
  width: 100%;
  min-height: 15rem;
  max-height: 15rem;
  flex-direction: column;
  margin-block: 1rem;
  overflow: auto;
}
.item-jugador{
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111a23;
  border-radius: 1rem;
  margin-block: .5rem;
}
.item-jugador .num-playera{
  width: 10%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.item-jugador .icon{
  width: 10%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-jugador .icon a svg{
  width: 1.5rem;
  height: 1.5rem;
  fill: #fff;
}
.item-jugador .jugador-info{
  width: 60%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: left;
  color: #fff;
}
.item-jugador .jugador-info img{
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: .2rem solid #fff;
  background: #fff;
  margin-inline: 1rem;
}
.item-jugador .actions{
  width: 30%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-jugador .actions a{
  width: 2rem;
  height: 2rem;
  background: #111a23;
  border: .2rem solid #fff;
  margin-inline: .5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-jugador .actions a svg{
  width: 1rem;
  height: 1rem;
  fill: #fff;
}

.form-ag-jugador{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: -2500px;
  z-index: 100;
  backdrop-filter: blur(5px);
  transition: .9s;
}
.form-ag-jugador.window-emrg{
  top: 0;
}
.form-ag-jugador form{
  width: 80%;
  background: #fff;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 1px 1px 6px #616161, -1px -1px 6px #616161;
}
.header-ag-jugador{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-ag-jugador h1{
  font-size: 1rem;
  color: #fff;
  padding-inline: 1rem;
  padding-block: 1rem;
  background: #111a23;
  border-radius: 1rem;
}
.header-ag-jugador p{
  width: 2rem;
  height: 2rem;
  background: #111a23;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.header-ag-jugador p svg{
  width: 1rem;
  height: 1rem;
  fill: #fff;
}

.cont-inputs{
  width: 100%;
  display: flex;
}
.input-position{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.input-position input{
  border: none;
  width: 100%;
  padding-block: 1rem;
  padding-left: 1rem;
  border-radius: 1rem;
  background: #f0f0f0;
  box-shadow: 1px 1px 6px #ffffff,
     -1px -1px 6px #ffffff;
  transition: 0.3s;
  margin-block: 1rem;
}
.input-position .cont-inputs-fechas{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.form-ag-jugador form .cont-btn,
.form-ed-jugador form .cont-btn{
  width: 100%;
  display: flex;
  justify-content: right;
  align-items: center;
  padding-block: .5rem;
}
.form-ag-jugador form button,
.form-ed-jugador form button{
  padding-inline: 1.5rem;
  padding-block: .5rem;
  background: #fff;
  color: #111a23;
  border-radius: 1rem;
  font-weight: 900;
  border: .2rem solid #111a23;
}

/* FORM.EDIT.JUGADOR.HTML */

.form-ed-jugador{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 5rem;
}
.form-ed-jugador form{
  width: 80%;
  background: #fff;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 1px 1px 6px #616161, -1px -1px 6px #616161;
}
/* JUGADOR.PERFIL.HTML */
.sec-perfil-jugador{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 5rem;
}
.perfil-cont-all{
  width: 80%;
  background: #fff;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 1px 1px 6px #616161, -1px -1px 6px #616161;
}

.header-perfil{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-perfil h1{
  font-size: 1rem;
  color: #fff;
  padding-inline: 1rem;
  padding-block: 1rem;
  background: #111a23;
  border-radius: 1rem;
}
.header-perfil .actions{
  display: flex;
}

.header-perfil .actions p{
  width: 2rem;
  height: 2rem;
  background: #111a23;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: .5rem;
  cursor: pointer;
}
.header-perfil .actions p svg{
  width: 1rem;
  height: 1rem;
  fill: #fff;
}
.cont-perfil{
  display: flex;
}
.cont-uno-perfil{
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.cont-uno-perfil img{
  width: 10rem;
  height: 10rem;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  border: .2rem solid #111a23;
  margin-block: 1rem;
}
.cont-uno-perfil h1{
  font-size: 2rem;
  margin-block: 1rem;
  border-top: .1rem solid #111a233b;
}
.cont-uno-perfil span{
  font-size: 1rem;
  color: #aeaeae;
}
.cont-uno-perfil h2{
  font-size: 1.5rem;
  color: #111a23;
  border-top: .1rem solid #111a233b;
}
.cont-dos-perfil{
  width: 60%;
  padding: 1rem;
}
.cont-dos-perfil .cont-info{
  width: 70%;
  display: flex;
  align-items: left;
  justify-content: center;
  flex-direction: column;
  margin-block: .5rem;
}
.cont-info .up{
  font-size: 1.1rem;
  color: #a3a3a3;
  padding-left: .5rem;
}
.cont-info span{
  width: 100%;
  border: .1rem solid #111a23;
}
.cont-info .down{
  padding-block: .15rem;
  color: #111a23;
  font-size: .75rem;
  padding-left: .5rem;
}
.ag-doc-id{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: -2500px;
  z-index: 100;
  backdrop-filter: blur(5px);
  transition: .9s;
}
.ag-doc-id.window-ag-id{
  top: 0;
}
.ag-doc-id form{
  width: 30%;
  background: #fff;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 1px 1px 6px #616161, -1px -1px 6px #616161;
}
.ag-doc-id form .header-ag-doc-id{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
 .header-ag-doc-id h1{
  font-size: 1rem;
  color: #fff;
  padding-inline: 1rem;
  padding-block: 1rem;
  background: #111a23;
  border-radius: 1rem;
 }
 .header-ag-doc-id p{
  width: 2rem;
  height: 2rem;
  background: #111a23;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: .5rem;
  cursor: pointer;
 }
 .header-ag-doc-id p svg{
  fill: #fff;
    width: 1.5rem;
    height: 1.5rem;
 }

 .ag-doc-id form .cont-btn{
  width: 100%;
  display: flex;
  justify-content: right;
  align-items: center;
  padding-block: .5rem;
 }
  .ag-doc-id form .cont-btn button{
    padding-inline: 1.5rem;
  padding-block: .5rem;
  background: #fff;
  color: #111a23;
  border-radius: 1rem;
  font-weight: 900;
  border: .2rem solid #111a23;
  }
.show-id{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: -2500px;
  z-index: 100;
  backdrop-filter: blur(5px);
  transition: .9s;
}
.show-id.window-show-id{
  top: 0;
}
.cont-show-id{
  width: 30%;
  background: #fff;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 1px 1px 6px #616161, -1px -1px 6px #616161;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.header-show-id{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-show-id h1{
  font-size: 1rem;
  color: #fff;
  padding-inline: 1rem;
  padding-block: 1rem;
  background: #111a23;
  border-radius: 1rem;
}
.header-show-id p{
  width: 2rem;
  height: 2rem;
  background: #111a23;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: .5rem;
  cursor: pointer;
}
.header-show-id p svg{
  fill: #fff;
    width: 1.5rem;
    height: 1.5rem;
}
.cont-show-id img{
  width: 75%;
  min-height: 15rem;
  border: .3rem solid #111a23;
  border-radius: 1rem;
  margin-block: 1rem;
}
/* FORM.AG.PARTIDO.HTML */
select{
  appearance: none;
}
select{
  border: none;
  width: 100%;
  padding-block: 1rem;
  padding-left: 1rem;
  border-radius: 1rem;
  background: #f0f0f0;
  box-shadow: 1px 1px 6px #ffffff,
     -1px -1px 6px #ffffff;
  transition: 0.3s;
  margin-block: 1rem;
}
 .inputs-cont .input:focus {
  outline-color: #f0f0f0;
  background: #f0f0f0;
  box-shadow: inset 1px 1px 6px #c5c5c5,
     inset -1px -1px 6px #ffffff;
  transition: 0.3s;
 }
  /* RESULT.PARTIDO.HTML */
.result-partido-section{
  width: 90%;
  background: #fff;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 1px 1px 6px #616161, -1px -1px 6px #616161;
  margin-block: 5rem;
}

.result-partido-section header{
  width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.result-partido-section header h1{
  font-size: 1rem;
  color: #fff;
  padding-inline: 1rem;
  padding-block: 1rem;
  background: #111a23;
  border-radius: 1rem;
}
.cont-details-partido{
  width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cont-team-par {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.cont-team-par .inf-eq-par{
  display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    margin: 1rem 0 1rem 0;
    background: #111a23;
    border: .4rem solid #fff;
    box-shadow: 1px 1px 6px #111a23, -1px -1px 6px #111a23, inset 1px 1px 20px #111a23, inset -1px -1px 20px #111a23;
    border-radius: 6rem;
    width: 100%;
    height: 6.5rem;
    position: relative;
}
.cont-team-par .inf-eq-par img{
    width: 7rem;
    height: 7rem;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    border: .4rem solid #fff;
    background: #fff;
    box-shadow: 1px 1px 6px #111a23, -1px -1px 6px #111a23;
}
.inf-eq-par .img-uno{
    position: absolute;
    left: -.3rem;
}
.inf-eq-par .p-uno{
    position: absolute;
    right: -1.5rem;
}
.inf-eq-par .img-dos{
    position: absolute;
    right: -.3rem;
}
.inf-eq-par .p-dos{
    position: absolute;
    left: -1.5rem;
}
.inf-eq-par p{
    width: 5rem;
    height: 5rem;
    background: #111a23;
    font-size: 3.5rem;
    color: #fff;
    border: .3rem solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 1rem;
    box-shadow: 1px 1px 6px #111a23, -1px -1px 6px #111a23, inset 1px 1px 20px #111a23, inset -1px -1px 20px #111a23;
}
.cont-team-par .equipo-loc{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    color: #919191;
    border-left: .3rem solid #111a23;
    font-size: 1.5rem;
    padding-left: 1rem;
}
.cont-team-par .equipo-vis{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    color: #919191;
    border-right: .3rem solid #111a23;
    font-size: 1.5rem;
    padding-right: 1rem;
}
.cont-detail-part{
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}
.cont-detail-part p{
    font-size: 1rem;
    color: #8f8f8f;
    opacity: .8;
    margin: .1rem 0 .1rem 0;
}
.cont-detail-part h1{
    color: #111a23;
    font-size: 3rem;
    margin: .5rem 0 .5rem 0;
}
.cont-detail-part h2{
    color: #fff;
    font-size: .8rem;
    font-weight: 100;
    margin: .5rem 0 .5rem 0;
    padding-block: .5rem;
    padding-inline: .75rem;
    background: #111a23;
    border-radius: 1rem;
    font-weight: 900;
}

.actions-details-par{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin: 4rem 0 2rem 0;
}
.actions-details-par p{
    width: 3rem;
    height: 3rem;
    background: #111a23;
    border-radius: 50%;
    border: .3rem solid #111a23;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 1rem 0 1rem;
    cursor: pointer;
    transition: all .3s ease;
}
.actions-details-par p svg{
    fill: #fff;
    width: 1.5rem;
    height: 1.5rem;
}
.actions-details-par p:hover{
    background: #fff;
  }
.actions-details-par p:hover svg{
    fill: #111a23;
}

.actions-details-par .p-form button{
    width: 3rem;
    height: 3rem;
    background: #111a23;
    border-radius: 50%;
    border: .3rem solid #111a23;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 1rem 0 1rem;
    cursor: pointer;
    transition: all .3s ease;
}
.actions-details-par .p-form button svg{
    fill: #fff;
    width: 1.5rem;
    height: 1.5rem;
}
.actions-details-par .p-form button:hover{
    background: #fff;
   }
.actions-details-par .p-form button:hover svg{
    fill: #111a23;
}
.form-estatus-par,
.form-reg-goles{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: -2500px;
  backdrop-filter: blur(5px);
  z-index: 100;
  transition: .9s;
}
.form-estatus-par.window-estatus,
.form-reg-goles.window-reg-goles{
  top: 0;
}
.form-estatus-par form,
.form-reg-goles form{
  width: 30%;
  background: #fff;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 1px 1px 6px #616161, -1px -1px 6px #616161;
}

.form-estatus-par form .header-estatus-par,
.form-reg-goles form .header-estatus-par{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-estatus-par h1{
  font-size: 1rem;
  color: #fff;
  padding-inline: 1rem;
  padding-block: 1rem;
  background: #111a23;
  border-radius: 1rem;
}
.header-estatus-par p{
  width: 2rem;
  height: 2rem;
  background: #111a23;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: .5rem;
  cursor: pointer;
}
.header-estatus-par p svg{
  width: 1.5rem;
  height: 1.5rem;
  fill: #fff;
}
.form-estatus-par .cont-btn,
.form-reg-goles .cont-btn{
    width: 100%;
  display: flex;
  justify-content: right;
  align-items: center;
  padding-block: .5rem;
}
.form-estatus-par .cont-btn button,
.form-reg-goles .cont-btn button{
   padding-inline: 1.5rem;
  padding-block: .5rem;
  background: #fff;
  color: #111a23;
  border-radius: 1rem;
  font-weight: 900;
  border: .2rem solid #111a23;
}
.cont-inputs-fechas{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0rem;
}
  .cont-inputs-fechas input {
  border: none;
  width: 100%;
  padding-block: 1rem;
  padding-left: 1rem;
  border-radius: 1rem;
  background: #f0f0f0;
  box-shadow: 1px 1px 6px #ffffff,
     -1px -1px 6px #ffffff;
  transition: 0.3s;
  margin-block: 1rem;
  margin-inline: .5rem;
 }
 
 .cont-inputs-fechas input:focus {
  outline-color: #f0f0f0;
  background: #f0f0f0;
  box-shadow: inset 1px 1px 6px #c5c5c5,
     inset -1px -1px 6px #ffffff;
  transition: 0.3s;
 }