*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Verdana', 'Geneva', sans-serif;
  color: #0e2a1c;

  background-color: #f4f4f2;
  background-image: url("../images/fondo-textura.png");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

.pantalla {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: flex; 
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center;
  padding: 7rem 1.5rem 2.5rem;

  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pantalla:target {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}

#inicio {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}

#inicio:has(~ .pantalla:target),
body:has(.pantalla:target:not(#inicio)) #inicio {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.topbar {
  position: fixed;
  top: 1.2rem;
  right: 1.5rem;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.topbar__escudo {
  width: clamp(55px, 6vw, 75px);
  height: auto;
}

.topbar__usuario {
  position: relative;
}

.topbar__usuario-resumen {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.topbar__usuario-resumen::-webkit-details-marker {
  display: none;
}
.topbar__usuario-resumen::marker {
  content: "";
}

.topbar__icono {
  font-size: 1.1rem;
}

.topbar__nombre {
  font-weight: bold;
  color: #1c6b31;
  font-size: 0.95rem;
}

.topbar__flecha {
  color: #1c6b31;
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.topbar__usuario[open] .topbar__flecha {
  transform: rotate(180deg);
}

.topbar__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: #ffffff;
  border-radius: 14px;
  padding: 0.6rem;
  min-width: 160px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  animation: menuAparece 0.15s ease;
}



.topbar__opcion {
  width: 100%;
  border: none;
  background: linear-gradient(90deg, #1c6b31 0%, #2e9a4f 100%);
  color: #ffffff;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
}

.topbar__opcion:hover {
  filter: brightness(1.05);
}


.btn-maestro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #1c6b31 0%, #2e9a4f 100%);
  color: #ffffff;
  font-weight: bold;
  font-size: 0.95rem;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, filter 0.15s ease;
  white-space: nowrap;
}

.btn-maestro:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.btn-volver {
  position: fixed;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 20;
  background: linear-gradient(90deg, #1c6b31 0%, #2e9a4f 100%);
  color: #ffffff;
  font-weight: bold;
  font-size: 0.95rem;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease;
}

.btn-volver:hover {
  transform: translateY(-1px);
}

.contenido {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  max-width: 700px;
}

.contenido--ancho {
  max-width: 1100px;
}

.titulo {
  font-family: 'Impact', 'Arial Narrow', 'Arial Black', sans-serif;
  font-style: italic;
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  color: #0e2a1c;
  letter-spacing: 2px;
  margin-bottom: 0.6rem;
  text-shadow:
    0 0 15px rgba(0, 200, 100, 0.35),
    2px 2px 0 rgba(255, 255, 255, 0.6);
  line-height: 1.35;
  padding-top: 2m;
  text-transform: uppercase;
  overflow: visible;
}

.titulo__brillo {
  background: linear-gradient(180deg, #1fae52 0%, #17c96a 45%, #0d6b30 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 18px rgba(23, 201, 106, 0.65));
}

.titulo--mediano {
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1.35;
  padding-top: 0.3em;
  background: linear-gradient(180deg, #1fae52 0%, #0d6b30 60%, #0a5726 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(7, 75, 16, 0.6), 0 0 2px rgba(16, 94, 10, 0.5);
  filter: drop-shadow(0 0 14px rgba(28, 154, 74, 0.55));
}

.subtitulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  color: #073209;
  font-weight: bold;
  font-size: 1rem;
  text-transform: uppercase;
  font-style: italic;
  margin-bottom: 2rem;
}

.subtitulo::before,
.subtitulo::after {
  content: "";
  flex: 1;
  max-width: 120px;
  height: 2px;
  background: #1c6b31;
  opacity: 0.6;
}

.tagline {
  margin-top: 2.5rem;
  color: #1c6b31;
  font-weight: bold;
  font-style: italic;
  font-size: 0.95rem;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  align-items: stretch;
}

.btn-deporte {
  position: relative;
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: clamp(1.3rem, 2.7vw, 1.7rem);
  color: #ffffff;
  border-radius: 999px;
  padding: 1.5rem 2rem;
  min-width: 320px;
  text-decoration: none;
  overflow: hidden;
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 0 18px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-deporte:hover {
  transform: translateY(-2px);
}
.btn-deporte.deporte-baloncesto {
  background: linear-gradient(90deg, #7a2fd0 0%, #5a1fb0 100%);
}


.btn-deporte.deporte-voley {
  background: linear-gradient(90deg, #1e8fe0 0%, #1b5fd6 100%);
}

.btn-deporte.deporte-futsala {
  background: linear-gradient(90deg, #e05a2a 0%, #b83216 100%);
}

.btn-deporte.deporte-generico {
  background: linear-gradient(90deg, #1c6b31 0%, #0d6b30 100%);
}

/* Colores de los deportes cargados desde MySQL. */
#menu-deportes .btn-deporte.deporte-baloncesto {
  background: linear-gradient(135deg, #9b3fd6 0%, #6420a8 100%);
}

#menu-deportes .btn-deporte.deporte-voley {
  background: linear-gradient(135deg, #1597b8 0%, #0b5f82 100%);
}

#menu-deportes .btn-deporte.deporte-futsala {
  background: linear-gradient(135deg, #e56b35 0%, #b83b1b 100%);
}

#menu-deportes .btn-deporte.deporte-generico {
  background: linear-gradient(135deg, #7a5cdd 0%, #4c389c 100%);
}

#menu-deportes .btn-deporte {
  width: 100%;
  min-width: 0;
}


/* Colores para organizar visualmente cada grado. */
.tabla-grados th.grado-sextos { background: linear-gradient(135deg, #1976d2, #0d47a1); }
.tabla-grados th.grado-septimos { background: linear-gradient(135deg, #2e9d52, #176b32); }
.tabla-grados th.grado-octavos { background: linear-gradient(135deg, #f28c18, #c85b00); }
.tabla-grados th.grado-novenos { background: linear-gradient(135deg, #7a2fd0, #5a1fb0); }
.tabla-grados th.grado-decimos { background: linear-gradient(135deg, #d94a4a, #a82424); }
.tabla-grados th.grado-undecimos { background: linear-gradient(135deg, #008c95, #00636a); }

.tabla-grados td:has(.grado-sextos) { border-color: #b9d7f5; }

.tabla-grados td .btn-equipo-db {
  color: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,.12);
}

.tabla-grados td:nth-child(1) .btn-equipo-db { background: linear-gradient(135deg, #1976d2, #0d47a1); }
.tabla-grados td:nth-child(2) .btn-equipo-db { background: linear-gradient(135deg, #2e9d52, #176b32); }
.tabla-grados td:nth-child(3) .btn-equipo-db { background: linear-gradient(135deg, #f28c18, #c85b00); }
.tabla-grados td:nth-child(4) .btn-equipo-db { background: linear-gradient(135deg, #7a2fd0, #5a1fb0); }
.tabla-grados td:nth-child(5) .btn-equipo-db { background: linear-gradient(135deg, #d94a4a, #a82424); }
.tabla-grados td:nth-child(6) .btn-equipo-db { background: linear-gradient(135deg, #008c95, #00636a); }

.tabla-grados td .btn-equipo-db:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.layout-grados {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  justify-content: center;
}

.layout-grados .menu {
  flex: 0 1 320px;
}

.layout-grados .tarjeta {
  flex: 1 1 520px;
}

.tarjeta {
  background: #ffffff;
  border-radius: 20px;
  padding: 1.8rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  text-align: left;
}

.tarjeta__titulo {
  color: #0e2a1c;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 1.2rem;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tabla thead th {
  background: #123f24;
  color: #ffffff;
  text-align: left;
  padding: 0.75rem 0.6rem;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

.tabla thead th:first-child {
  border-top-left-radius: 10px;
}
.tabla thead th:last-child {
  border-top-right-radius: 10px;
}

.tabla tbody td {
  padding: 0.75rem 0.6rem;
  border-bottom: 1px solid #eee;
  font-weight: 600;
  color: #333;
}

.tabla tbody tr:nth-child(even) {
  background: #f7f7f5;
}

.fecha-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  background: #ff8a00;
  color: #ffffff;
  border-radius: 10px;
  padding: 0.3rem 0.6rem;
}

.fecha-badge strong {
  font-size: 1.05rem;
}

.fecha-badge small {
  font-size: 0.65rem;
  letter-spacing: 0.5px;
}

.tabla--jugadores th,
.tabla--jugadores td {
  text-align: center;
}
.tabla--jugadores td:nth-child(2) {
  text-align: left;
}

@media (max-width: 700px) {
  .layout-grados {
    flex-direction: column;
    align-items: stretch;
  }
  .layout-grados .menu,
  .layout-grados .tarjeta {
    flex: 1 1 auto;
  }
}

@media (max-width: 600px) {
  .topbar__nombre {
    display: none;
  }

  .btn-deporte {
    padding: 1.15rem 1.5rem;
    min-width: 0;
  }

  .tarjeta {
    padding: 1.2rem;
  }

  .tabla {
    font-size: 0.75rem;
  }
}

.modal-fondo {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(14, 42, 28, 0.55);
  z-index: 999;
  align-items: center;
  justify-content: center;
}

.modal-fondo.abierto {
  display: flex;
}

.modal-caja {
  background: #ffffff;
  border-radius: 20px;
  padding: 1.8rem;
  width: 90%;
  max-width: 320px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  text-align: left;
}

.modal-caja h3 {
  color: #0e2a1c;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  text-align: center;
}

.modal-caja input {
  display: block;
  width: 100%;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.7rem;
  border: 1px solid #cfd8d1;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
}

.modal-caja button {
  width: 100%;
  border: none;
  background: linear-gradient(90deg, #1c6b31 0%, #2e9a4f 100%);
  color: #ffffff;
  font-weight: bold;
  font-size: 0.95rem;
  padding: 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 0.3rem;
}

.modal-caja .cerrar {
  background: transparent;
  color: #1c6b31;
  box-shadow: none;
}

.modal-aviso {
  font-size: 0.8rem;
  color: #b3261e;
  min-height: 1rem;
  margin-bottom: 0.4rem;
  text-align: center;
}

.barra-edicion {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 998;
  background: #0e2a1c;
  color: #ffffff;
  padding: 0.8rem 1.2rem;
  font-size: 0.9rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.barra-edicion.activa {
  display: flex;
}

.barra-edicion button {
  border: none;
  background: #ffffff;
  color: #0e2a1c;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
}

[contenteditable="true"] {
  outline: 2px dashed #2e9a4f;
  outline-offset: 2px;
  background: rgba(46, 154, 79, 0.08);
  border-radius: 4px;
}
/* ============================================================
   LOGIN DEL MAESTRO
   ============================================================ */
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
  background-image: url("../images/fondo-textura.png");
}

.login-card {
  width: min(430px, 100%);
  background: #ffffff;
  padding: 2rem;
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.login-card__logo {
  display: block;
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin: 0 auto 1rem;
}

.login-card__encabezado {
  text-align: center;
  margin-bottom: 1.5rem;
}

.login-card__encabezado h1 {
  color: #123f24;
  margin-bottom: .45rem;
}

.login-card__encabezado p {
  color: #4f5c53;
  line-height: 1.5;
}

.login-form__campo {
  margin-bottom: 1rem;
}

.login-form__campo label {
  display: block;
  font-weight: 700;
  color: #123f24;
  margin-bottom: .4rem;
}

.login-form__campo input {
  width: 100%;
  padding: .8rem;
  border: 1px solid #ccd6ce;
  border-radius: 10px;
  font: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.login-form__campo input:focus {
  border-color: #1c6b31;
  box-shadow: 0 0 0 3px rgba(28, 107, 49, .12);
}

.login-form__error {
  min-height: 1.4rem;
  margin: .7rem 0;
  color: #b3261e;
  font-weight: 700;
  text-align: center;
}

.login-form__boton {
  width: 100%;
  padding: .8rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #1c6b31 0%, #2e9a4f 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}

.login-form__boton:hover { filter: brightness(1.05); }
.login-form__boton:disabled { opacity: .7; cursor: wait; }

.login-card__volver {
  display: block;
  text-align: center;
  margin-top: 1rem;
  color: #123f24;
  font-weight: 700;
  text-decoration: none;
}

.login-card__volver:hover { text-decoration: underline; }