/* ============================================================
   🌌 ESTILO GENERAL CON VIDEO DE FONDO
============================================================ */
body {
  font-family: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #fff;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  background-color: #12001a;
  scroll-behavior: smooth;
}

video#background-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  filter: brightness(0.35) contrast(1.1) saturate(1.3);
}

/* ============================================================
   🔝 ENCABEZADO CON LOGO Y TÍTULO
============================================================ */
header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  background: linear-gradient(90deg, #4facfe, #8e44ad);
  color: #fff;
  padding: 15px 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  text-align: center;
}

header img {
  height: 60px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

header h1 {
  margin: 0;
  font-size: clamp(1.3rem, 4vw, 1.9rem);
  letter-spacing: 1px;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}

header p {
  width: 100%;
  font-size: clamp(0.9rem, 2.8vw, 1rem);
  color: #ffeef8;
  opacity: 0.9;
}

/* ============================================================
   🔘 BOTÓN VOLVER (MODERNO AJUSTADO)
============================================================ */
.btn-volver {
  display: inline-block;         /* Permite ajustar tamaño más fácilmente */
  margin: 20px auto;             /* Centrado horizontal */
  padding: 15px 30px;             /* 📌 Reduce tamaño del botón */
  background: linear-gradient(90deg, #4facfe, #8e44ad);
  color: #fff;
  border: none;
  border-radius: 30px;           /* Menos redondeado que antes */
  font-weight: 600;
  font-size: 1rem;            /* 📌 Tamaño de texto más pequeño */
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;     /* Más suave */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  text-align: center;
}

/* Hover */
.btn-volver:hover {
  transform: scale(1.05);
  background: linear-gradient(90deg, #b30000, #52007b);
}

/* ============================================================
   🎥 CONTENEDOR DE PUBLICIDAD (ANCHO COMPLETO)
============================================================ */
.publicidad {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #000;
  width: 100%;
  overflow: hidden;
}

.iconos-container {
  width: 100%;
  display: block;
}

.icono-publicidad {
  width: 100%;
  aspect-ratio: 16 / 9;   /* 👈 CLAVE */
  object-fit: contain;   /* se ve completo */
  display: block;
  background: #000;
}

/* ============================================================
   🎥 VIDEO DE PUBLICIDAD RESPONSIVE (PC + CELULAR)
============================================================ */
.icono-publicidad {
  width: 100%;
  height: 160px;        /* PC */
  object-fit: cover;
  display: block;
}

/* 📱 CELULARES */
@media (max-width: 768px) {
  .icono-publicidad {
    height: 180px;
    object-fit: contain;
    background: #000; /* relleno si sobran bordes */
  }
}

/* ============================================================
   🎭 TABLAS DOBLES RESPONSIVAS MODERNAS (FINAL CORREGIDO)
============================================================ */

.contenedor-tablas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  margin: 40px auto;
  width: 95%;
  max-width: 1400px;
  overflow-x: auto;
}

.tabla-bloque {
  flex: 1 1 48%;
  min-width: 360px;
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  overflow-x: auto;
  transition: transform 0.3s ease;
}

.tabla-bloque:hover {
  transform: translateY(-5px);
}

.tabla-bloque h2 {
  text-align: center;
  color: #ffcc00;
  text-transform: uppercase;
  font-size: 1.3rem;
  letter-spacing: 1px;
  margin-bottom: 15px;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

/* ================= TABLA ================= */
table {
  width: 100%;
  table-layout: fixed;              /* 🔥 CLAVE */
  border-collapse: separate;
  border-spacing: 0 6px;
  border-radius: 10px;
  background-color: rgba(0,0,0,0.25);
}

/* ================= ENCABEZADOS ================= */
th {
  background: linear-gradient(90deg, #4facfe, #8e44ad);
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  padding: 8px 6px;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  border-radius: 8px 8px 0 0;
}

/* ================= CELDAS ================= */
td {
  padding: 8px 6px;
  text-align: center;
  white-space: normal;
  word-break: break-word;
}

/* ================= ANCHOS DE COLUMNAS (2 COLUMNAS) ================= */

/* 🟦 Puntaje */
th:nth-child(1),
td:nth-child(1) {
  width: 90px;          /* 🔽 más angosto */
  max-width: 90px;
  text-align: center;
  font-weight: 700;
}

/* 🟪 Conjunto */

/* 👉 SOLO el encabezado */
th:nth-child(2),
th.conjunto {
  width: auto;
  text-align: center;   /* ✅ "CONJUNTO" centrado */
  padding-left: 0;
  font-weight: 600;
}

/* 👉 SOLO las celdas (nombres) */
td:nth-child(2),
td.conjunto {
  width: auto;
  text-align: left;     /* ✅ nombres a la izquierda */
  padding-left: 16px;
  font-weight: 600;
}

/* ================= INPUTS Y SELECTS ================= */
input.editable-puntaje,
select.editable-estado {
  width: 55px;
  font-size: 0.85rem;
  padding: 3px 4px;
  border-radius: 6px;
  border: 2px solid #52007b;
  outline: none;
  text-align: center;
  transition: all 0.3s ease;
}

input.editable-puntaje:focus,
select.editable-estado:focus {
  border-color: #b30000;
  box-shadow: 0 0 6px rgba(179,0,0,0.5);
}

/* ================================
   ✏️ INPUTS Y SELECTS COMPACTOS
================================ */
input.editable-puntaje,
select.editable-estado {
  width: 55px;
  font-size: 0.85rem;
  padding: 3px 4px;
  border-radius: 6px;
  border: 2px solid #52007b;
  outline: none;
  text-align: center;
  transition: all 0.3s ease;
}

input.editable-puntaje:focus,
select.editable-estado:focus {
  border-color: #b30000;
  box-shadow: 0 0 6px rgba(179,0,0,0.5);
}

/* ================================
   🔹 CONTENEDOR DE TABLAS RESPONSIVO
================================ */
.contenedor-tablas {
  overflow-x: auto;
  width: 100%;
}

/* ============================================================
   ✏️ INPUTS Y SELECTS MÁS COMPACTOS
============================================================ */
input.editable-puntaje,
select.editable-estado {
  width: 55px; /* 📌 Cambia el ancho del input/select */
  font-size: 0.85rem; /* 📌 Tamaño del texto */
  padding: 3px 4px; /* 📌 Ajusta padding interno */
  border-radius: 6px;
  border: 2px solid #52007b;
  outline: none;
  text-align: center;
  transition: all 0.3s ease;
}

input.editable-puntaje:focus,
select.editable-estado:focus {
  border-color: #b30000;
  box-shadow: 0 0 6px rgba(179,0,0,0.5);
}

/* ============================================================
   📱 RESPONSIVE PARA TABLETS Y MÓVILES
============================================================ */
@media (max-width: 992px) {
  .contenedor-tablas {
    flex-direction: column;
    align-items: center;
  }
  .tabla-bloque {
    width: 95%; /* 📌 Ajusta ancho de bloque de tabla */
  }
}

@media (max-width: 600px) {
  td:nth-child(2),
  th:nth-child(2) {
    width: 160px; /* 📌 Ajusta ancho columna 'Conjunto' en móvil */
    font-size: 0.85rem;
  }
  td:nth-child(3),
  td:nth-child(4),
  th:nth-child(3),
  th:nth-child(4) {
    width: 50px; /* 📌 Ajusta ancho columnas puntaje en móvil */
  }
  td:nth-child(5),
  th:nth-child(5) {
    width: 80px; /* 📌 Ajusta ancho columna Estado en móvil */
  }
  th, td {
    padding: 5px 3px; /* 📌 Ajusta padding general */
    font-size: 0.8rem; /* 📌 Ajusta tamaño de texto en móvil */
  }
  input.editable-puntaje,
  select.editable-estado {
    width: 45px; /* 📌 Ajusta ancho input/select en móvil */
    font-size: 0.75rem; /* 📌 Tamaño texto en móvil */
    padding: 2px 3px; /* 📌 Padding interno en móvil */
  }
}

/* ============================================================
   ⚠️ MENSAJES
============================================================ */
.mensaje {
  text-align: center;
  margin: 20px auto;
  padding: 14px;
  width: 85%;
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  backdrop-filter: blur(4px);
}

.mensaje.error {
  background: rgba(179, 0, 0, 0.35);
  color: #ffb3b3;
  border: 1px solid #b30000;
}

.mensaje.advertencia {
  background: rgba(255, 230, 120, 0.25);
  color: #fff8cc;
  border: 1px solid #ffcc00;
}

/* ============================================================
   🅰️ FOOTER ARTEMUSA TV
============================================================ */
.footer {
  background: linear-gradient(180deg, #b30000 0%, #52007b 100%);
  border-top: 6px solid #ffcc00;
  color: #fff;
  padding: 50px 20px 15px;
  font-family: "Poppins", sans-serif;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align: center;
  gap: 40px;
}

.footer-column {
  flex: 1 1 250px;
  max-width: 320px;
}

.footer h4 {
  color: #ffcc00;
  font-size: 1.2rem;
  margin-bottom: 10px;
  text-transform: uppercase;
  border-bottom: 2px solid #fff;
  display: inline-block;
  padding-bottom: 4px;
}

.footer p,
.footer a {
  color: #f5f5f5;
  font-size: 0.95rem;
  line-height: 1.6;
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer a:hover {
  color: #ffcc00;
  transform: translateX(4px);
}

.footer-slogan {
  font-style: italic;
  color: #ffdddd;
  margin-top: 8px;
  font-size: 0.95rem;
}

.social-icons {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 15px;
}

.social-icons li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #52007b;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.social-icons li a i {
  color: #ffcc00;
  font-size: 18px;
}

.social-icons li a:hover {
  background-color: #ffcc00;
  border-color: #fff;
  transform: scale(1.1) rotate(8deg);
}

.social-icons li a:hover i {
  color: #52007b;
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: 15px;
  margin-top: 25px;
  font-size: 0.9rem;
  color: #f0f0f0;
  letter-spacing: 0.6px;
}

/* ============================================================
   📱 RESPONSIVE OPTIMIZADO
============================================================ */
@media (max-width: 992px) {
  .contenedor-tablas {
    flex-direction: column;
    align-items: center;
  }
  .tabla-bloque {
    width: 95%;
  }
}

@media (max-width: 600px) {
  header img {
    height: 45px;
  }
  header h1 {
    font-size: 1.3rem;
  }
  header p {
    font-size: 0.9rem;
  }

  .tabla-bloque {
    padding: 15px;
  }

  th, td {
    padding: 10px 6px;
    font-size: 0.85rem;
  }

  input.editable-puntaje,
  select.editable-estado {
    font-size: 0.85rem;
    padding: 5px;
  }

  .btn-volver {
    padding: 10px 25px;
    font-size: 0.9rem;
  }

  .footer {
    padding: 40px 15px 10px;
  }

  .footer-column h4 {
    font-size: 1rem;
  }

  .social-icons li a {
    width: 38px;
    height: 38px;
  }
}