/* ========== LIFFA AUTO ENHANCED STYLES ========== */
/* Additive overlay — remove this file's <link> to revert everything */

/* ---- Base & Container ---- */
#container {
   max-width: 980px;
   width: 100%;
   border: none;
   border-radius: 0;
   box-sizing: border-box;
   padding-bottom: 40px;
}

/* ---- Header Title ---- */
#container > h1 {
   font-size: 28px;
   letter-spacing: 2px;
   color: #FFDA68;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
   padding: 30px 20px 20px;
   margin-bottom: 10px;
   border-bottom: 2px solid rgba(95, 143, 73, 0.4);
   line-height: 1.4;
   animation: fadeSlideIn 0.6s ease-out;
}

/* ---- Index Navigation ---- */
ul.indice {
   background: rgba(0, 0, 0, 0.25);
   border-radius: 12px;
   padding: 16px 20px;
   margin: 0 50px 35px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 6px 4px;
   list-style: none;
   animation: fadeSlideIn 0.8s ease-out;
}
ul.indice li {
   display: inline;
}
ul.indice li a {
   display: inline-block;
   padding: 8px 16px;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.5px;
   color: rgba(255, 255, 255, 0.7);
   text-decoration: none;
   transition: all 0.3s ease;
   border: 1px solid transparent;
}
ul.indice li a:hover {
   color: #FFDA68;
   background: rgba(255, 218, 104, 0.1);
   border-color: rgba(255, 218, 104, 0.3);
   transform: translateY(-1px);
}
ul.indice li span.separador {
   color: rgba(95, 143, 73, 0.3);
   padding: 0 2px;
}

/* ---- Tables Container ---- */
.tablas-liffa {
   padding: 0 30px;
}

/* ---- Section Title Bars ---- */
.titulo-tabla {
   border-radius: 10px 10px 0 0;
   padding: 16px 24px;
   margin-top: 10px;
   position: relative;
   overflow: hidden;
}
.titulo-tabla::after {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.08),
      transparent
   );
   animation: sweepShine 6s ease-in-out infinite;
}
@keyframes sweepShine {
   0%, 100% { left: -100%; }
   50% { left: 100%; }
}
.titulo-tabla h3 {
   font-size: 17px;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   position: relative;
   z-index: 1;
}
.titulo-tabla.ttgreen {
   background: linear-gradient(135deg, #5F8F49, #3a6b2a);
   border-left: 5px solid #FFDA68;
}
.titulo-tabla.ttred {
   background: linear-gradient(135deg, #da2e2b, #a81f1d);
   border-left: 5px solid #ff6b6b;
}
.titulo-tabla.ttred2 {
   background: linear-gradient(135deg, #ef3e3a, #c42b28);
   border-left: 5px solid #ff8a87;
   border-radius: 0;
}
.titulo-tabla.ttyellow {
   background: linear-gradient(135deg, #e4b63f, #c49a2a);
   border-left: 5px solid #fff3c4;
}

/* ---- Data Tables ---- */
table.tablaliffa {
   border: none;
   border-radius: 0 0 10px 10px;
   overflow: hidden;
   margin-bottom: 30px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
table.tablaliffa thead tr {
   background: rgba(0, 0, 0, 0.4);
}
table.tablaliffa thead th {
   font-size: 13px;
   letter-spacing: 1px;
   text-transform: uppercase;
   padding: 14px 10px;
   border: none;
   border-bottom: 2px solid rgba(95, 143, 73, 0.4);
   color: rgba(255, 255, 255, 0.8);
}
table.tablaliffa td,
table.tablaliffa th {
   border: none;
   border-bottom: 1px solid rgba(95, 143, 73, 0.15);
}
table.tablaliffa tr {
   background: rgba(25, 47, 26, 0.6);
   transition: all 0.3s ease;
}
table.tablaliffa tr:nth-child(even) {
   background: rgba(19, 33, 20, 0.6);
}
table.tablaliffa tbody tr:hover {
   background: rgba(95, 143, 73, 0.15);
   transform: scale(1.005);
}
table.tablaliffa tbody td {
   padding: 12px 10px;
   font-size: 14px;
}
table.tablaliffa tbody td.pts {
   background: linear-gradient(135deg, #FFDA68, #f0c030);
   color: #1a3a1a;
   font-weight: 900;
   font-size: 16px;
   border-radius: 4px;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
table.tablaliffa tbody td.equipo {
   font-weight: 700;
   letter-spacing: 0.5px;
   color: #FFDA68;
}
table.tablaliffa tbody td.jugador {
   color: #FFDA68;
}

/* Position number styling */
table.tablaliffa tbody tr:nth-child(1) td:first-child,
table.tablaliffa tbody tr:nth-child(2) td:first-child,
table.tablaliffa tbody tr:nth-child(3) td:first-child {
   color: #FFDA68;
   font-weight: 900;
}

/* ---- Explanation Boxes ---- */
.explanation-box {
   background: rgba(0, 0, 0, 0.25);
   border: 1px solid rgba(95, 143, 73, 0.3);
   border-radius: 10px;
   padding: 18px 24px;
   margin: 0 0 40px;
   font-size: 13px;
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.7);
}
.explanation-box p {
   margin-bottom: 10px;
   font-size: 13px;
}
.explanation-box b {
   color: #fff;
}

.explicacion {
   color: rgba(255, 255, 255, 0.6);
   font-size: 14px;
}
.explicacion p {
   font-size: 14px;
   line-height: 1.5;
}

/* ---- HR Dividers ---- */
hr {
   border: none;
   height: 2px;
   background: linear-gradient(90deg, transparent, rgba(95, 143, 73, 0.5), transparent);
   margin: 50px 0;
}

/* ---- Colored Text ---- */
.green-text {
   color: #6abf4b;
}
.yellow-text {
   color: #FFDA68;
}
.red-text {
   color: #ff6b6b;
}

/* ---- Scroll Animations ---- */
@keyframes fadeSlideIn {
   from {
      opacity: 0;
      transform: translateY(20px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* Animate tables on scroll */
.titulo-tabla,
table.tablaliffa,
.explanation-box {
   animation: fadeSlideIn 0.5s ease-out both;
}

/* Stagger animation for table rows */
table.tablaliffa tbody tr {
   animation: fadeSlideIn 0.3s ease-out both;
}
table.tablaliffa tbody tr:nth-child(1) { animation-delay: 0.05s; }
table.tablaliffa tbody tr:nth-child(2) { animation-delay: 0.08s; }
table.tablaliffa tbody tr:nth-child(3) { animation-delay: 0.11s; }
table.tablaliffa tbody tr:nth-child(4) { animation-delay: 0.14s; }
table.tablaliffa tbody tr:nth-child(5) { animation-delay: 0.17s; }
table.tablaliffa tbody tr:nth-child(6) { animation-delay: 0.20s; }
table.tablaliffa tbody tr:nth-child(7) { animation-delay: 0.23s; }
table.tablaliffa tbody tr:nth-child(8) { animation-delay: 0.26s; }
table.tablaliffa tbody tr:nth-child(9) { animation-delay: 0.29s; }
table.tablaliffa tbody tr:nth-child(10) { animation-delay: 0.32s; }
table.tablaliffa tbody tr:nth-child(11) { animation-delay: 0.35s; }
table.tablaliffa tbody tr:nth-child(12) { animation-delay: 0.38s; }

/* ---- Span Sep in explanation ---- */
span.sep {
   color: rgba(95, 143, 73, 0.5);
   padding: 0 8px;
}

/* ---- Logo ---- */
#logo_gde {
   padding-bottom: 20px;
}
#logo_gde img {
   border-radius: 8px;
}

/* ---- Playoff / Dynamic Sections ---- */
#tablaPlayoffSection,
#textoNotaResultadosSection,
#textoNotaCierreTablaSection,
#textoLeyendaSection,
#textoLeyendaBonificacionFairplaySection,
#textoSancionSection {
   padding: 0 10px;
}

/* ---- Responsive ---- */
@media (max-width: 1000px) {
   #container {
      width: 100% !important;
      border: none !important;
   }
   .tablas-liffa {
      padding: 0 12px;
   }
   ul.indice {
      margin: 0 12px 25px;
      padding: 12px 10px;
   }
   #container > h1 {
      font-size: 22px;
      padding: 20px 15px 15px;
   }
   table.tablaliffa tbody td,
   table.tablaliffa thead th {
      padding: 10px 6px;
      font-size: 12px;
   }
   table.tablaliffa tbody td.pts {
      font-size: 14px;
   }
}

/* ---- Fullscreen Table ---- */
.tabla-fs-wrapper {
   position: relative;
}
.tabla-fs-wrapper .titulo-tabla {
   position: relative;
}
.fs-btn {
   position: absolute;
   top: 50%;
   right: 10px;
   transform: translateY(-50%);
   z-index: 10;
   background: rgba(0, 0, 0, 0.3);
   border: 1px solid rgba(255, 255, 255, 0.25);
   color: #fff;
   font-size: 16px;
   width: 32px;
   height: 32px;
   border-radius: 6px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
   line-height: 1;
   padding: 0;
}
.fs-btn:hover {
   background: rgba(255, 218, 104, 0.2);
   border-color: #FFDA68;
   color: #FFDA68;
}

/* Close button state */
.fs-btn-close {
   background: rgba(218, 46, 43, 0.85) !important;
   border-color: rgba(255, 255, 255, 0.3) !important;
   color: #fff !important;
   width: 36px !important;
   height: 36px !important;
   font-size: 18px !important;
}
.fs-btn-close:hover {
   background: #da2e2b !important;
}

/* Fullscreen overlay — no rotation, just fixed overlay */
.tabla-fullscreen {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   z-index: 9999;
   background: #192f1a;
   overflow: auto;
   padding: 20px;
   box-sizing: border-box;
   animation: fadeSlideIn 0.3s ease-out;
   -webkit-overflow-scrolling: touch;
}
.tabla-fullscreen table.tablaliffa {
   margin-bottom: 20px;
}
.tabla-fullscreen .titulo-tabla {
   margin-top: 0;
   padding-right: 50px;
}

/* CSS rotation fallback when orientation lock fails (mobile) */
.tabla-fs-rotate {
   transform: rotate(90deg) !important;
   transform-origin: top left !important;
   width: 100vh !important;
   height: 100vw !important;
   left: 100vw !important;
   top: 0 !important;
}
.tabla-fs-rotate .fs-btn-close {
   position: fixed !important;
   top: auto !important;
   bottom: 15px !important;
   right: 15px !important;
   transform: rotate(-90deg) !important;
}

/* Fullscreen mode uses native Fullscreen API + orientation lock on mobile */
/* These styles apply when the browser goes fullscreen */
.tabla-fs-wrapper:fullscreen,
.tabla-fs-wrapper:-webkit-full-screen {
   background: #192f1a;
   overflow: auto;
   padding: 20px;
   -webkit-overflow-scrolling: touch;
}
.tabla-fs-wrapper:fullscreen .fs-btn,
.tabla-fs-wrapper:-webkit-full-screen .fs-btn {
   position: fixed;
   top: 12px;
   right: 12px;
   z-index: 10001;
   background: rgba(218, 46, 43, 0.9);
   border-color: rgba(255, 255, 255, 0.3);
}
.tabla-fs-wrapper:fullscreen table.tablaliffa,
.tabla-fs-wrapper:-webkit-full-screen table.tablaliffa {
   width: 100%;
   font-size: 15px;
}
.tabla-fs-wrapper:fullscreen table.tablaliffa tbody td,
.tabla-fs-wrapper:-webkit-full-screen table.tablaliffa tbody td {
   padding: 12px 10px;
}
.tabla-fs-wrapper:fullscreen .titulo-tabla,
.tabla-fs-wrapper:-webkit-full-screen .titulo-tabla {
   margin-top: 0;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
   width: 8px;
}
::-webkit-scrollbar-track {
   background: #192f1a;
}
::-webkit-scrollbar-thumb {
   background: #5F8F49;
   border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
   background: #7ab362;
}