/**
 * Responsive Design - Template Oráculo
 * Mobile-first approach
 * Breakpoints:
 * - Mobile: 320px - 768px (base)
 * - Tablet: 769px - 1024px
 * - Desktop: 1025px+
 */

/* ============================================
   BASE RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Container fluido */
#container {
  width: 90% !important;
  max-width: 1300px !important;
  padding: 10px 0px;
}

#header {
  min-width: auto !important;
  padding: 40px 20px 50px;
}

#header a {
  right: 0 !important;
  position: static !important;
}

#header a img {
  max-width: 100%;
  height: auto;
  position: relative;
  right: 210px;
  top: 35px;
}

/* ============================================
   MOBILE STYLES (Base - 320px+)
   ============================================ */

@media (max-width: 768px) {

  /* HTML & Body */
  html {
    min-width: auto !important;
  }

  body {
    font-size: 13px;
  }

  /* Header */
  #header {
    padding: 30px 15px 30px;
  }

  #header a img {
    max-width: 280px;
    right: inherit;
  }

  /* Container */
  #container {
    width: 95% !important;
    padding: 10px 0px;
  }

  /* Content */
  #content {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Module Contents */
  .module-contents {
    padding: 10px;
    min-height: auto;
    border-radius: 5px;
  }

  /* Navbar Mobile */
  #navbar {
    width: 100% !important;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
  }

  #navbar ul {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-top: 10px;
  }

  #navbar ul.mobile-active {
    display: flex;
  }

  #navbar ul li {
    width: 100%;
    border-bottom: 1px solid var(--color-navbar-border-alpha);
  }

  #navbar ul li:last-child {
    border-bottom: none;
  }

  #navbar ul li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 10px;
    text-align: left;
  }

  /* Navbar Actions */
  .ab-navbar-actions {
    width: 100%;
    justify-content: space-between;
    margin-top: 10px;
  }

  .ab-navbar-actions button {
    margin-right: 0;
  }

  /* Hamburger Menu */
  .hamburger-menu {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    padding: 5px;
    background: transparent;
    border: none;
  }

  .hamburger-menu span {
    width: 25px;
    height: 3px;
    background: var(--color-white);
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 2px;
  }

  .hamburger-menu.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
  }

  .hamburger-menu.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger-menu.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
  }

  /* Sidebar - Reorganizar orden en móviles: Login, Content, Rankings */
  #content {
    display: flex;
    flex-direction: column;
  }

  /* Sidebar izquierdo (Login/UserCP) - PRIMERO */
  #content .sidebar-left {
    width: 100% !important;
    order: 1;
    padding: 0 !important;
    /* margin-bottom: 20px; */
  }

  /* Contenido principal - SEGUNDO */
  #content .col-xs-9 {
    width: 100% !important;
    order: 2;
    padding: 0 !important;
    margin-bottom: 20px;
  }

  /* Sidebar derecho (Rankings) - TERCERO */
  #content .sidebar-right {
    width: 100% !important;
    order: 3;
    padding: 0 !important;
  }

  /* Para páginas sin sidebar */
  #content .col-xs-12 {
    width: 100% !important;
    padding: 0 !important;
    order: 1;
  }

  /* Ocultar banners del sidebar en móviles (ya están en el menú hamburguesa) */
  .sidebar-banner {
    display: none !important;
  }

  /* Page Title */
  .page-title {
    font-size: 24px;
    padding: 8px 0px;
    margin-bottom: 15px;
  }

  /* Rankings */
  .rankings-table {
    width: 100%;
    font-size: 14px;
  }

  .rankings-table tr td {
    padding: 8px 5px;
    font-size: 14px;
  }

  .rankings-table-place {
    font-size: 18px;
  }

  .rankings-class-image {
    width: 25px;
  }

  .rankings_menu {
    width: 100%;
  }

  .rankings_menu a {
    width: 120px;
    font-size: 14px;
    margin: 2px 3px;
  }

  /* News Panel */
  .panel-news .panel-title {
    font-size: 16px;
  }

  /* Footer */
  .footer {
    padding: 30px 15px;
    font-size: 12px;
  }

  .footer>.footer-container {
    width: 95%;
    display: flex;
    flex-direction: column;
  }

  /* Footer - Columna izquierda (información) */
  .footer .col-xs-8 {
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 30px;
    text-align: center;
  }

  /* Footer - Columna derecha (hora) */
  .footer .col-xs-4 {
    width: 100% !important;
    padding: 0 !important;
  }

  /* Footer - Logos más pequeños en móvil */
  .footer img {
    height: 30px !important;
    width: auto !important;
    margin: 5px 10px !important;
  }

  /* Footer - Hora del servidor */
  .footer-time {
    font-size: 24px !important;
  }

  /* Footer - Contenedor de horas */
  .footer .col-xs-6 {
    width: 50% !important;
    float: left;
    padding: 10px 5px;
  }

  /* Buttons */
  .ab-btn-custom-1,
  .ab-btn-custom-2,
  .ab-btn-custom-3,
  .ab-btn-custom-4,
  .ab-btn-custom-5 {
    font-size: 14px;
    padding: 0px 15px;
    /* height: 40px; */
  }

  /* Castle Siege Banner */
  .castle-siege-banner {
    padding: 10px;
  }

  .cs-timeleft {
    font-size: 20px;
  }

  .castle-siege-banner-castleowner,
  .castle-siege-banner-castleowner a {
    font-size: 24px;
  }

  .castle-siege-banner-countdown {
    font-size: 20px;
  }

  /* My Account */
  .myaccount-table tr td {
    display: block;
    width: 100%;
    padding: 10px !important;
  }

  .myaccount-table tr td:first-child {
    border-bottom: none;
    padding-bottom: 5px !important;
  }

  /* General Table */
  .general-table-ui {
    font-size: 12px;
  }

  .general-table-ui img {
    width: 35px;
  }

  /* Character Blocks */
  .myaccount-character-block {
    margin: 10px 5px;
  }

  .myaccount-character-block img {
    width: 80px;
  }

  /* Downloads */
  .ab-table-download tbody tr {
    flex-direction: column;
    align-items: flex-start;
  }

  .ab-table-download tbody tr td {
    width: 100% !important;
    padding: 8px !important;
  }

  /* Sidebar Panels en Móviles */
  .panel-sidebar,
  .panel-sidebar-events,
  .panel-usercp {
    margin-bottom: 15px;
  }

  .panel-sidebar .panel-body,
  .panel-sidebar-events .panel-body,
  .panel-usercp .panel-body {
    padding: 10px;
  }

  .sidebar-banner {
    margin: 15px 0px;
  }

  .sidebar-banner img {
    width: 100%;
    max-width: 100%;
  }

  /* Formularios en móviles - Inputs 100% width */
  .form-control,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  textarea,
  select {
    width: 100% !important;
  }

  /* Eliminar offset de Bootstrap en móviles */
  .col-xs-offset-1,
  .col-xs-offset-2,
  .col-xs-offset-3,
  .col-xs-offset-4,
  .col-xs-offset-5,
  .col-xs-offset-6,
  .col-xs-offset-7,
  .col-xs-offset-8,
  .col-xs-offset-9,
  .col-xs-offset-10,
  .col-xs-offset-11,
  .col-xs-offset-12 {
    margin-left: 0 !important;
  }

  .col-xs-8 {
    width: 100% !important;
  }

  /* reCAPTCHA más pequeño en móviles */
  .g-recaptcha {
    transform: scale(0.85);
    transform-origin: 0 0;
  }

  /* Evitar overflow horizontal en módulos */
  .module-contents {
    overflow: hidden !important;
  }

  /* Tabla de Descargas - Diseño tipo tarjeta para móviles */
  .ab-table-download {
    display: block !important;
    border: none !important;
  }

  .ab-table-download thead {
    display: none !important;
  }

  .ab-table-download tbody {
    display: block !important;
  }

  .ab-table-download tbody tr {
    display: flex !important;
    flex-direction: column !important;
    background: var(--color-white-input-alpha) !important;
    border: 1px solid var(--color-white-border-alpha) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
  }

  .ab-table-download tbody td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
  }

  .ab-table-download tbody td:first-child strong {
    display: block !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--color-accent-gold) !important;
    margin-bottom: 6px !important;
  }

  .ab-table-download tbody td:nth-child(2) {
    display: inline-block !important;
    width: auto !important;
    background: var(--color-accent-gold-medium-alpha) !important;
    padding: 4px 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    margin-bottom: 12px !important;
  }

  /* Rankings - Mejorado para móviles */
  .rankings-table {
    width: 100% !important;
    font-size: 13px !important;
  }

  .rankings-table thead th {
    font-size: 11px !important;
    padding: 8px 2px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Ajustar headers específicos */
  .rankings-table thead th:nth-child(1) {
    width: 30px;
  }

  .rankings-table thead th:nth-child(2) {
    width: 45px;
  }

  .rankings-table thead th:nth-child(3) {
    width: 80px;
  }

  .rankings-table thead th:nth-child(4) {
    width: 50px;
  }

  .rankings-table thead th:nth-child(5) {
    width: auto;
  }

  .rankings-table tbody td {
    padding: 10px 4px !important;
    font-size: 13px !important;
  }

  /* Columna de ranking (#) */
  .rankings-table tbody td:first-child {
    font-weight: 700 !important;
    font-size: 14px !important;
    padding-left: 6px !important;
    padding-right: 2px !important;
    width: 30px;
  }

  /* Columna de imagen/clase */
  .rankings-table tbody td:nth-child(2) {
    width: 45px;
    padding: 6px 2px !important;
  }

  .rankings-table tbody td:nth-child(2) img {
    width: 28px !important;
    height: 28px !important;
  }

  /* Columna de nombre de personaje */
  .rankings-table tbody td:nth-child(3) {
    font-weight: 600 !important;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px 4px !important;
  }

  /* Columna de nivel/resets */
  .rankings-table tbody td:nth-child(4) {
    font-weight: 700 !important;
    color: var(--color-accent-gold) !important;
    width: 50px;
    padding: 10px 4px !important;
  }

  /* Columna adicional (resets en Top Resets) */
  .rankings-table tbody td:nth-child(5) {
    font-weight: 600 !important;
    width: 45px;
    padding: 10px 4px !important;
  }

  /* Columna de localización */
  .rankings-table tbody td:nth-child(6),
  .rankings-table tbody td:last-child {
    font-size: 11px !important;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px 4px !important;
  }

  /* Botones de pestañas del ranking */
  .rankings-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 15px !important;
  }

  .rankings-tabs button,
  .rankings-tabs .btn {
    font-size: 13px !important;
    padding: 8px 12px !important;
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  /* Ocultar columnas no esenciales según tipo de ranking */

  /* Top Level: Ocultar Localización (última columna) */
  #top-level .rankings-table tbody td:last-child,
  #top-level .rankings-table thead th:last-child {
    display: none !important;
  }

  /* Top Resets: Ocultar Nivel (4ta columna) y Localización (última) */
  #top-resets .rankings-table tbody td:nth-child(4),
  #top-resets .rankings-table thead th:nth-child(4),
  #top-resets .rankings-table tbody td:last-child,
  #top-resets .rankings-table thead th:last-child {
    display: none !important;
  }

  /* Top Killers: Ocultar Nivel (4ta), Nivel PK (5ta) y Localización (última) */
  #top-killers .rankings-table tbody td:nth-child(4),
  #top-killers .rankings-table thead th:nth-child(4),
  #top-killers .rankings-table tbody td:nth-child(5),
  #top-killers .rankings-table thead th:nth-child(5),
  #top-killers .rankings-table tbody td:last-child,
  #top-killers .rankings-table thead th:last-child {
    display: none !important;
  }
}

/* ============================================
   TABLET STYLES (769px - 1024px)
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {

  /* Container */
  #container {
    width: 95% !important;
  }

  /* Navbar */
  #navbar {
    width: 95% !important;
  }

  #navbar ul li a {
    padding: 20px 15px;
    font-size: 16px;
  }

  /* Header */
  #header a img {
    max-width: 400px;
    right: inherit;
  }

  /* Layout de 2 columnas usando CSS Grid */
  #content {
    display: grid;
    grid-template-columns: 30% 70%;
    grid-auto-rows: auto;
    gap: 0;
    align-items: start;
  }

  /* Sidebar izquierdo - columna 1, fila 1 */
  #content .sidebar-left {
    grid-column: 1;
    grid-row: 1;
    padding: 0 10px !important;
    width: 100% !important;
  }

  /* Sidebar derecho - columna 1, fila 2 (después del sidebar izquierdo) */
  #content .sidebar-right {
    grid-column: 1;
    grid-row: 2;
    padding: 0 10px !important;
    padding-top: 20px;
    width: 100% !important;
  }

  /* Contenido principal - columna 2 */
  #content .col-xs-9 {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: 0 10px !important;
    width: 100% !important;
  }

  /* Para páginas sin sidebar (solo col-xs-12) - Grid de 1 columna */
  #content:has(.col-xs-12) {
    grid-template-columns: 100%;
  }

  #content .col-xs-12 {
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Module Contents */
  .module-contents {
    padding: 12px;
  }

  /* Rankings */
  .rankings-table {
    width: 95%;
  }

  /* Footer */
  .footer>.footer-container {
    width: 95%;
  }
}

/* ============================================
   DESKTOP SMALL (1025px - 1280px)
   ============================================ */

@media (min-width: 1025px) and (max-width: 1280px) {

  /* Container */
  #container {
    width: 95% !important;
  }

  /* Navbar */
  #navbar {
    width: 95% !important;
  }

  #navbar ul li a {
    padding: 20px 20px;
  }

  /* Layout de 2 columnas usando CSS Grid */
  #content {
    display: grid;
    grid-template-columns: 25% 75%;
    grid-auto-rows: auto;
    gap: 0;
    align-items: start;
  }

  /* Sidebar izquierdo - columna 1, fila 1 */
  #content .sidebar-left {
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;
  }

  /* Sidebar derecho - columna 1, fila 2 (después del sidebar izquierdo) */
  #content .sidebar-right {
    grid-column: 1;
    grid-row: 2;
    padding-top: 20px;
    width: 100% !important;
  }

  /* Contenido principal - columna 2 */
  #content .col-xs-9 {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100% !important;
  }

  /* Para páginas sin sidebar (solo col-xs-12) - Grid de 1 columna */
  #content:has(.col-xs-12) {
    grid-template-columns: 100%;
  }

  #content .col-xs-12 {
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;
    padding: 0 !important;
  }
}

/* ============================================
   DESKTOP LARGE (1281px+)
   ============================================ */

@media (min-width: 1281px) {

  /* Estilos por defecto del template original */
  #container {
    width: 1300px !important;
  }

  #navbar {
    width: 1275px !important;
  }

  /* Layout de 2 columnas usando CSS Grid */
  #content {
    display: grid;
    grid-template-columns: 25% 75%;
    grid-auto-rows: auto;
    gap: 0;
    align-items: start;
  }

  /* Sidebar izquierdo - columna 1, fila 1 */
  #content .sidebar-left {
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;
  }

  /* Sidebar derecho - columna 1, fila 2 (después del sidebar izquierdo) */
  #content .sidebar-right {
    grid-column: 1;
    grid-row: 2;
    /* padding-top: 20px; */
    width: 100% !important;
  }

  /* Contenido principal - columna 2 */
  #content .col-xs-9 {
    grid-column: 2;
    grid-row: 1 / span 3;
    width: 100% !important;
  }

  /* Para páginas sin sidebar (solo col-xs-12) - Grid de 1 columna */
  #content:has(.col-xs-12) {
    grid-template-columns: 100%;
  }

  #content .col-xs-12 {
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;
    padding: 0 !important;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Ocultar en móvil */
.hide-mobile {
  display: none !important;
}

@media (min-width: 769px) {
  .hide-mobile {
    display: block !important;
  }
}

/* Ocultar en desktop */
.hide-desktop {
  display: block !important;
}

@media (min-width: 769px) {
  .hide-desktop {
    display: none !important;
  }
}

/* Mostrar solo en móvil */
.show-mobile {
  display: block !important;
}

@media (min-width: 769px) {
  .show-mobile {
    display: none !important;
  }
}

/* Texto centrado en móvil */
@media (max-width: 768px) {
  .text-center-mobile {
    text-align: center !important;
  }
}

/* ============================================
   NAVBAR MOBILE ENHANCEMENTS
   ============================================ */

.navbar-mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

@media (min-width: 769px) {
  .navbar-mobile-header {
    display: none;
  }

  .hamburger-menu {
    display: none !important;
  }
}

/* ============================================
   RESPONSIVE IMAGES
   ============================================ */

img {
  max-width: 100%;
  height: auto;
}

/* ============================================
   TOUCH TARGETS (Minimum 44px for mobile)
   ============================================ */

@media (max-width: 768px) {

  button,
  a,
  input[type="submit"],
  input[type="button"] {
    /* min-height: 44px; */
    min-width: 44px;
  }
}