.body_vuexy .badge:empty{
    display: block;
}

.badge_notification_count,.chat-count{
    top: -4px !important;
    position: absolute !important;
    right: -4px !important;
    margin: 0 !important;
    margin-right: 0px;
    padding: 3px !important;
    font-size: 12px !important;
    min-width: 20px;
}

.body_vuexy .dropdown-menu{
    background-color:var(--bs-dropdown-bg);
}

.body_vuexy table th{
    /*display: flex;
    align-items: center;*/
    position: relative;

}

.body_vuexy .pagination{
    display: flex !important;
    justify-content: center;
}

.body_vuexy div.data-index div.buscador_container.buscador input, div.container_filtro_csv{
    height: auto;
}

.body_vuexy table th.cab_orderedk{
    padding-left: 25px !important;
}

.body_vuexy .cab_orderedk::after, .cab_orderedk::before {
    display: inline-flex;
    bottom: 33%;
    padding-left: 10px;
}

.head_avatar_capitan{
    position: absolute;
    top: -5px;
    right: -5px;
    color: goldenrod;
}

.notificacion_lista_item_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(201, 147, 10, 0.15);
    color: var(--gold-br);
    font-size: 16px;
    flex-shrink: 0;
}

.activididad_item_icon{
    display: flex;
    justify-content: center; /* Horizontal center */
    align-items: center;     /* Vertical center */
    font-size: 18px;
    height: 100%;
    border: 1px solid var(--bs-primary);
    border-radius: 100px;
    color: var(--bs-primary);
}

.dash-wrapper .dropdown-notifications-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    transition: all 0.15s ease;
}

.dash-wrapper .dropdown-notifications-item:hover {
    background: var(--bg-card2);
    border-color: rgba(201, 147, 10, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.dash-wrapper .dropdown-notifications-item a {
    text-decoration: none !important;
    color: inherit;
}

.dash-wrapper .dropdown-notifications-item a:hover {
    text-decoration: none !important;
}

.dash-wrapper .dropdown-notifications-item a small {
    text-decoration: none !important;
}

.dash-wrapper .dropdown-notifications-item h6 a {
    text-decoration: none !important;
}

.dash-wrapper .dropdown-notifications-item h6 {
    color: var(--white) !important;
    font-weight: 600;
    margin: 0 0 0.3rem 0;
}

.dash-wrapper .dropdown-notifications-item .text-body {
    color: var(--muted) !important;
    font-size: 0.85rem;
}

.dash-wrapper .dropdown-notifications-item .text-muted {
    color: var(--muted) !important;
    font-size: 0.75rem;
}

.dash-wrapper .dropdown-notifications-item small {
    color: inherit !important;
}

.dash-wrapper .dropdown-notifications-item.marked-as-read {
    opacity: 0.7;
}

.dash-wrapper .dropdown-notifications-item.current-entity {
    border-left: 4px solid var(--gold-br);
    background: rgba(245, 197, 24, 0.08);
}

.actividad-list .btn{
    padding: 12px 16px;
    font-size: 12px;
}

.actividad-list .btn i{
    font-size: 14px;
}

/*.body_vuexy .panel-heading,.body_vuexy .panel-primary.inverted .panel-heading{
    padding: 20px 15px;
    background-color: #fff !important;
    color: var(--bs-heading-color) !important;
}*/

.body_vuexy .panel-primary.inverted .panel-heading.card-header {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x)!important;
    margin-bottom: 0!important;
    color: var(--bs-card-cap-color)!important;
    background-color: var(--bs-card-cap-bg)!important;    
}

.body_vuexy .menu-icon{
    font-size:  1em;
}

.body_vuexy .menu-icon.fi{
    height: 20px;
    width: 20px;
    border: 1px solid white;
    border-radius: 20px;
}

.menu-vertical .app-brand {
    padding-right: 1rem !important;
    padding-left: 1.375rem !important;
}

.body_vuexy .switch .switch-toggle-slider i{
    top: 1.65px;
}

.body_vuexy h4 {
    padding-left: 0px;
}

.body_vuexy .fecha_fase h5{
    font-size: 0.8em;
}

.body_vuexy .navbar-nav > li.dropdown{
    height: auto;
}

.body_vuexy .buscador_container{
    align-items: end;
}

.body_vuexy .btn.btn-primary.btn-menu-puntuacion{
    margin-bottom: 0;
}

.body_vuexy .menu-puntuacion{
    margin-top: 0;
}

.nav-tabs .nav-link.box-shadow-danger.active, .nav-tabs .nav-link.box-shadow-danger.active:hover, .nav-tabs .nav-link.box-shadow-danger.active:focus, .nav-tabs .nav-link.box-shadow-danger.active, .nav-tabs .nav-link.box-shadow-danger.active:hover, .nav-tabs .nav-link.box-shadow-danger.active:focus {
    box-shadow: 0 -2px 0 rgba(220, 53, 69, 0.5) inset ; /* Sombra danger */
}

.fecha_div_linea .bootstrap-select {
    width: 25% !important;
}

.partido_datos_container .partido_datos_cabecera {
    background-color: #f2f2f2;    
    font-weight: bold;
    font-size: 16px;
}

.body_vuexy .accordion-button.text-white{
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23ffffff' stroke-opacity='0.9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");      
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23ffffff' stroke-opacity='0.9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}

.body_vuexy .accordion-button{
    align-items: center;
}

.hidden {
    display: none !important;
    visibility: hidden !important;
}

.body_vuexy .line_form_item_container:nth-child(2n+1) {
    background-color: #fff;
}

.body_vuexy .fecha_div_linea{
    text-align: left;
}

.line_form_item_container form{
    overflow: scroll;
}

.incidencia_lesion {
    color: #dc3545;
}

.ti-72px{
    font-size:72px;
}

.width-fit-content {
    width: fit-content;
}

.rank-jornadas tbody tr th{
    padding: 0.3rem;
}

.clasificacion_content tbody tr td{
    padding: 1rem;
    white-space: nowrap;
    text-align: center;
}

td.no_bordered{
    border: 0 !important;
}

.td_edit_jugador_nombre{
    white-space: nowrap;
}

.nowrap{
    white-space: nowrap;
}

a.solo_hover{
    color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
}

a.solo_hover:hover {
    color: var(--bs-primary-color-hover);
}

#calendar_fase{
    color: white;
}

#equipo_jugador_form input[readonly] {
    pointer-events: none; /* Deshabilita la interacción con el input */
}

input:read-only:not([type="button"]):not([type="submit"]){
    background-color: #eee;    
}

.menu-vertical .menu-icon{
    font-size: 1rem;
}

.bg-menu-theme .menu-sub > .menu-item > .menu-link::before {
    content: ""!important;
}

.bg-menu-theme.menu-vertical .menu-sub > .menu-item .menu-link .menu-icon {
    display: block !important;
    margin-right: 5px;
}

.menu-vertical .menu-sub .menu-link{
    padding-left: 1.5rem;
}

.app-brand{
    border-bottom: none;
}

.app_brand_frontend{
    border-bottom: none;
}

.menu_online{
    content: "";
    position: absolute;    
    right: 10%;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    box-shadow: 0 0 0 2px #fff;
    background-color: #28c76f;
}

.menu_offline{
    content: "";
    position: absolute;    
    right: 10%;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    box-shadow: 0 0 0 2px #fff;
    background-color: #c72828;
}

.menu_link_offline{
    opacity: 0.5;
}

.layout_menu_usuario{
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eaeaea;
}

.layout_menu_usuario > a{
    position:relative;
    width: fit-content;
    display: inline-block;
}

.layout_menu_usuario .menu_online,.layout_menu_usuario .menu_offline{
   bottom: 0;
   right: 0; 
}

.layout_menu_usuario .navbar-nav{
    display: inline-block;
    text-align: center;
}

.layout_menu_usuario .nav-item .dropdown-menu{
    width: 16rem;
}

.layout_menu_usuario .navbar-nav .nav-item .dropdown-menu::before,.layout_menu_usuario .navbar-nav .nav-item .dropdown-menu::after{
    display: none !important;
}

.container_frontend{
    display: flex;
    height: 100vh;
}

.container_frontend_left{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    flex-grow: 1;
    background-image: url('../../images/bg_pantalla_login.jpg'); 
    background-repeat: no-repeat;   
    background-size: cover;
}

.container_frontend_right{
    display: flex;
    padding: 0 150px;
    align-items: center;
    justify-content: center;
}

.color_primary{
    color:#dba400;    
}

.layout-container{
    min-height: 100dvh !important;
}

/* ===== Dashboard ===== */
/* Clase genérica para usar TT Travels Next en cualquier título */
.font-tt {
  font-family: 'TT Travels Next', sans-serif !important;
  text-transform: uppercase; /* Como te dijeron que los títulos van en mayúsculas */
}
/* --- Dashboard Header Styles --- */
.dashboard-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-bottom: 1px solid #e4e6eb;
}

.dashboard-navbar {
  padding: 0.5rem 0 !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e4e6eb;
  position: relative;
}

.dashboard-navbar .app-brand-link img {
  height: 32px;
  width: auto;
}

.dashboard-userbar {
  background: #f8f9fa;
  border-bottom: 1px solid #e4e6eb;
}

.dashboard-userbar .avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.dashboard-userbar h6 {
  font-size: 0.95rem;
  color: #262c3b;
}

.dashboard-hero {
  background: linear-gradient(135deg, rgba(244, 246, 250, 0.8) 0%, rgba(255, 255, 255, 0.95) 100%);
  padding: 3rem 0;
  border-bottom: 1px solid #e4e6eb;
}

.dashboard-hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #262c3b;
  line-height: 1.2;
}

.dashboard-hero-img {
  max-width: 350px;
  height: auto;
  display: block;
}

@media (max-width: 991.98px) {
  .dashboard-hero-title {
    font-size: 1.75rem;
  }

  .dashboard-hero-img {
    max-width: 250px;
  }
}

/* --- Variables --- */
.dash-wrapper {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  --bg:        #f8f7fa;
  --bg-card:   #000000;
  --bg-card2:  #1a1a24;
  --gold:      #DBA400;
  --gold-br:   #f5c518;
  --gold-dim:  #8a6508;
  --white:     #f0f0f0;
  --muted:     #5a5a72;
  --border:    rgba(255,255,255,0.07);
  --radius:    14px;
  --radius-sm: 10px;
  --font-head: 'TT Travels Next Trl', 'Rajdhani', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --c-orange: #ff7043;
  --c-teal:   #00bfa5;
  --c-pink:   #e040fb;
  --c-blue:   #42a5f5;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  position: relative;
  /*overflow-x: hidden;*/
  --descargas: #FF9F43;
}

.dash-wrapper-dashboard{
  padding: 0 5% !important;
}

/* --- Banner inscripciones --- */
.dash-wrapper .inscr-banner {
  font-family: "Nunito", "Nunito Sans", "Segoe UI", Arial, sans-serif !important;
  background: #FDE6A3;
  border: 2px solid #F8B900;
  border-radius: 16px;
  padding: 18px 24px 18px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 16px 0.5rem 18px;
  min-height: 106px;
  box-sizing: border-box;
  overflow: hidden;
}

.dash-wrapper .inscr-banner-icon {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  background: #0E0E0E;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-wrapper .inscr-banner-icon svg {
  width: 37px;
  height: 37px;
  stroke: #F5C518;
  stroke-width: 1.8;
}

.dash-wrapper .inscr-banner-body {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.dash-wrapper .inscr-banner-tag {
  display: block;
  font-family: "TT Travels Next Trl", "Nunito", "Public Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  color: #111;
  text-transform: uppercase;
  margin-bottom: 7px;
  line-height: 1;
  transform: none !important;
  font-stretch: normal;
}

.dash-wrapper .inscr-banner-title {
  font-family: "Nunito", "Nunito Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 22px;
  font-weight: 900 !important;
  color: #111;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 7px;
  transform: none !important;
  font-stretch: normal;
  text-shadow: none;
}

.dash-wrapper .inscr-banner-title strong {
  font-family: inherit !important;
  font-weight: 700;
}

.dash-wrapper .inscr-banner-sub {
  font-family: "Nunito", "Segoe UI", Arial, sans-serif !important;
  font-size: 14px;
  font-weight: 400;
  color: #171717 !important;
  line-height: 1.25;
  letter-spacing: -0.01em;
  transform: none !important;
  font-stretch: normal;
}

.dash-wrapper .inscr-banner-cal {
  flex-shrink: 0;
  position: relative;
  width: 150px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
}

.dash-wrapper .inscr-banner-cal::before {
  content: none;
}

.dash-wrapper .inscr-cal-widget {
  position: relative;
  z-index: 1;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  text-align: center;
  transform: rotate(6deg);
}

.dash-wrapper .inscr-cal-day {
  font-family: "Nunito", "Nunito Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 1.75rem;
  font-weight: 900;
  color: #111;
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.dash-wrapper .inscr-cal-month {
  font-family: "Nunito", "Nunito Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 0.58rem;
  font-weight: 900;
  color: #111;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1;
}

.dash-wrapper .inscr-calendar-doodle {
  width: 138px;
  height: 92px;
  display: block;
}

@media (max-width: 539px) {
  .dash-wrapper .inscr-banner {
    padding: 12px 14px;
    gap: 10px;
    min-height: unset;
  }
  .dash-wrapper .inscr-banner-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }
  .dash-wrapper .inscr-banner-icon svg {
    width: 20px;
    height: 20px;
  }
  .dash-wrapper .inscr-banner-tag {
    font-size: 9px;
    margin-bottom: 4px;
  }
  .dash-wrapper .inscr-banner-title {
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 4px;
  }
  .dash-wrapper .inscr-banner-sub {
    font-size: 11px;
    line-height: 1.3;
  }
  .dash-wrapper .inscr-banner-cal {
    width: 80px;
    height: 70px;
    margin-left: 0;
  }
  .dash-wrapper .inscr-cal-day {
    font-size: 1.3rem;
  }
  .dash-wrapper .inscr-calendar-doodle {
    width: 78px;
    height: 68px;
  }
}

/* --- App Shell --- */
.dash-wrapper .app-shell{
  background: white;
  position: relative;
  overflow-x: hidden;
}

.dash-wrapper {
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  margin-left: calc(-1 * ((100vw - 100%) / 2));
}

html, body {
  margin: 0;
  padding: 0;
}

/* --- Navbar Mobile --- */
.dash-wrapper .navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1040;
}

.dash-wrapper .nav-hamburger {
  width: 36px;
  height: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  flex-shrink: 0;
}

.dash-wrapper .nav-hamburger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--white);
  transition: 0.2s;
}

.dash-wrapper .nav-hamburger span:nth-child(2) { width: 70%; }

.dash-wrapper .nav-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.dash-wrapper .nav-logo img {
  height: 32px;
  width: auto;
  display: block;
}

.dash-wrapper .navbar .app-brand-link {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.dash-wrapper .navbar .app-brand-link img {
  height: 32px;
  width: auto;
  display: block;
}

.dash-wrapper .nav-right {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-left: auto;
}

.dash-wrapper .nav-btn {
  width: 34px;
  height: 34px;
  background-color: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #DBA400;
  position: relative;
  opacity: 1;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.dash-wrapper .nav-btn svg { width: 25px; height: 23px; }

.dash-wrapper .nav-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4444;
  border: 2px solid var(--bg-card);
}

.dash-wrapper .nav-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--gold);
  background-color: var(--gold);
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}

.dash-wrapper .nav-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* --- Navbar Dropdowns --- */
.dash-wrapper .nav-dropdown {
  position: relative;
}

.dash-wrapper .nav-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-orange);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-card);
  line-height: 1;
  z-index: 10;
}

.dash-wrapper .navbar-dropdown {
  min-width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  margin-top: 0.75rem;
  padding: 0;
  max-height: 500px;
  overflow-y: auto;
  overflow: hidden;
  animation: dropdownSlideIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1041;
}

@keyframes dropdownSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dash-wrapper .navbar-dropdown .dropdown-header {
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--border);
  color: var(--white);
  font-weight: 700;
  padding: 1rem;
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.dash-wrapper .navbar-dropdown .dropdown-divider {
  background-color: var(--border);
  margin: 0.5rem 0;
  border: none;
}

.dash-wrapper .navbar-dropdown .dropdown-item {
  color: var(--white);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
  text-decoration: none;
}
/* Le añado el a.dropdown-item:hover para que solo afecte a los enlaces*/
.dash-wrapper .navbar-dropdown a.dropdown-item:hover {
  background: rgba(245, 197, 24, 0.1);
  color: var(--gold-br);
  box-shadow: inset 3px 0 0 var(--gold-br);
}

.dash-wrapper .navbar-dropdown .dropdown-item i {
  color: var(--gold);
  width: 18px;
  transition: color 0.15s ease;
}

.dash-wrapper .navbar-dropdown .dropdown-item:hover i {
  color: var(--gold-br);
}

.dash-wrapper .navbar-dropdown .text-muted {
  color: var(--muted) !important;
}

.dash-wrapper .nav-avatar-btn {
  padding: 0;
  background: transparent;
  border: none;
}

.dash-wrapper .nav-avatar-btn .nav-avatar {
  box-shadow: 0 0 0 2px var(--gold-br);
}

.dash-wrapper .nav-avatar-btn:hover .nav-avatar {
  box-shadow: 0 0 0 2px var(--gold), 0 0 8px rgba(201, 147, 10, 0.3);
}

/* --- Profile Card --- */
.dash-wrapper .profile-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.75rem;
}

.dash-wrapper .profile-avatar-wrap { position: relative; flex-shrink: 0; }

.dash-wrapper .profile-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2.5px solid var(--gold);
  background: var(--bg-card2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold-br);
  overflow: hidden;
}

.dash-wrapper .profile-online {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #28c76f;
  border: 2px solid var(--bg-card);
}

.dash-wrapper .profile-info { flex: 1; min-width: 0; }

.dash-wrapper .profile-name {
  font-family: 'Public Sans', sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 34px;
  color: #555555;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  line-height: 1.2;
  min-width: 0;
}

.dash-wrapper .profile-firstname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-wrapper .profile-lastname {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.dash-wrapper .profile-lastname-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

#profile-flag-container {
  flex-shrink: 0;
}

.dash-wrapper .profile-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.2rem;
}

.dash-wrapper .profile-meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.dash-wrapper .profile-meta-item svg { width: 12px; height: 12px; color: var(--gold); }
.dash-wrapper .profile-meta-item .ti { font-size: 12px; color: var(--gold); }

/* Estilo específico para la etiqueta_minima del dashboard*/
.dash-wrapper .profile-badge {
  margin-left: 0.5rem;
  flex-shrink: 0;
  

  font-family: "Public Sans", sans-serif;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
}

.dash-wrapper .profile-badge span {
  min-width: 56px;
  height: 24px;
  padding: 0 8px;
  border-radius: 3px;
  

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Para cada una de las clases del js segun etiqueta_minima*/
.dash-wrapper .profile-badge .badge-grand-slam {
  background: rgba(40, 199, 111, 0.19);
  color: #28c76f;
}

.dash-wrapper .profile-badge .badge-1000 {
  background: rgba(0, 207, 232, 0.19);
  color: #00cfe8;
}

.dash-wrapper .profile-badge .badge-500 {
  background: rgba(115, 103, 240, 0.19);
  color: #7367f0;
}

.dash-wrapper .profile-badge .badge-future {
  background: #71A0FF31;
  color: #71A0FF;
}

/* --- Stats Strip --- */
.dash-wrapper .stats-strip {
  display: flex;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

.dash-wrapper .stat-cell {
  flex: 1;
  padding: 0.75rem 0.5rem;
  text-align: center;
  border-right: 1px solid var(--border);
}

.dash-wrapper .stat-cell:last-child { border-right: none; }

.dash-wrapper .stat-val {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold-br);
  line-height: 1;
}

.dash-wrapper .stat-lbl {
  font-size: 0.65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.2rem;
}

/* --- Banner --- */
.dash-wrapper .banner {
  margin: 0.875rem 1rem;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.dash-wrapper .banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(201,147,10,0.04) 0, rgba(201,147,10,0.04) 1px, transparent 1px, transparent 44px);
}

.dash-wrapper .banner-text {
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-head);
}

/* --- Aviso inscripciones abiertas ---
   El layout (flex, gaps, padding, responsive) se resuelve con utilidades Bootstrap
   en dashboard.tpl. Aquí solo queda lo que Bootstrap no cubre: colores de marca,
   tamaño del cuadro del icono y el full-bleed en móvil. */
.dash-wrapper .insc-banner {
  margin-bottom: 0.875rem;
  background: var(--gold-br);
  color: #111;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
/* Misma tipografía que .inscr-banner-title/.inscr-banner-tag para el título y
   subtítulo del aviso configurable. */
.dash-wrapper .insc-banner .lh-sm {
  font-family: "Nunito", "Nunito Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 22px;
  font-weight: 900 !important;
  line-height: 1.12;
  letter-spacing: -0.02em;
  transform: none !important;
  font-stretch: normal;
  text-shadow: none;
}
.dash-wrapper .insc-banner .lh-sm strong {
  font-family: "TT Travels Next Trl", "Nunito", "Public Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  transform: none !important;
  font-stretch: normal;
}
/* Dos iconos: plano en móvil (.insc-banner-icon-m) y en cuadro negro dorado en
   escritorio (.insc-banner-icon). El mostrar/ocultar lo decide d-none/d-xl-* en el .tpl. */
.dash-wrapper .insc-banner-icon-m {
  color: #111;
  font-size: 2.25rem;
}
.dash-wrapper .insc-banner-icon {
  width: 44px;
  height: 44px;
  background: #000;
  color: var(--gold-br);
}
.dash-wrapper .insc-banner-icon .ti {
  font-size: 1.75rem;
}
.dash-wrapper .insc-banner-btn {
  background: #000;
  padding: 0.7rem 1.6rem;
  font-size: 11px;
  font-family: "Public Sans", "Segoe UI", Arial, sans-serif !important;
  font-weight: 900;
  letter-spacing: 0;
}
.dash-wrapper .insc-banner-btn:hover { filter: brightness(1.15); }

/* Mismo breakpoint que .inscr-banner-title/.inscr-banner-tag para el título y
   subtítulo del aviso configurable. */
@media (max-width: 539px) {
  .dash-wrapper .insc-banner .lh-sm {
    font-size: 14px;
    line-height: 1.2;
  }
  .dash-wrapper .insc-banner .lh-sm strong {
    font-size: 9px;
    margin-bottom: 4px;
  }
  .dash-wrapper .insc-banner-icon-m {
    font-size: 1.4rem;
  }
}

/* En móvil el aviso ocupa todo el ancho de la pantalla (rompe el padding del
   contenedor .dash-wrapper-dashboard). La especificidad extra es para ganar a la
   regla overflow-x:hidden del bloque responsive inferior. */
@media (max-width: 1199px) {
  .dash-wrapper.dash-wrapper-dashboard .app-shell {
    overflow-x: visible;
  }
  .dash-wrapper .insc-banner {
    width: 100vw;
    margin-left: calc(-1 * ((100vw - 100%) / 2));
    border-radius: 0;
  }
}

/* --- Section --- */
.dash-wrapper .section { padding: 0.875rem 0.5rem 0.5rem; text-align: left; }

.dash-wrapper .section-title {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #263040;
  margin-bottom: 2rem;
  text-align: left;
}

/* --- Action Grid --- */
.dash-wrapper .action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  padding: 0 0.5rem;
}

.dash-wrapper .action-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  transition: transform 0.2s, box-shadow 0.2s;
}

.dash-wrapper .action-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.55); }
.dash-wrapper .action-card:active { transform: scale(0.97); }

.dash-wrapper .action-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.7) saturate(1.2);
  transition: filter 0.25s;
}

.dash-wrapper .action-card:hover .action-card-img { filter: brightness(0.82) saturate(1.3); }

.dash-wrapper .action-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(175deg, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.75) 100%);
}

.dash-wrapper .action-card-glow {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  filter: blur(45px);
  opacity: 0.5;
  top: -25px;
  right: -25px;
  z-index: 1;
  pointer-events: none;
}

.dash-wrapper .action-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 0.875rem;
  z-index: 2;
  text-align: left;
}

.dash-wrapper .action-card-label {
    font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 700;
  color: #DBA400;
  opacity: 1;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
  text-align: left;

  display: block;
  transform: scaleX(1.15); /* Estira la letra un 15% a lo ancho */
  transform-origin: left center; /* Asegura que crezca hacia la derecha y no se salga del margen izquierdo */
  letter-spacing: 0.02em; /* Le da un poco de aire para que no colisionen al estirarse */
}

.dash-wrapper .action-card-sub {
  font-size: 0.85rem;
  margin-top: 0.15rem;
  font-weight: 500;
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
}

/* Reducción para pantallas < 390px */
@media (max-width: 390px) {
  .dash-wrapper .font-tt {
    transform: scaleX(1) !important; 
    letter-spacing: -0.02em !important; /* Juntamos un micro-píxel las letras */
  }
  .dash-wrapper .action-card-label {
    font-size: 10px !important;
  }

  .dash-wrapper .action-card-sub {
    font-size: 10px !important;
    display: block;
    transform: scaleX(1.15);
    transform-origin: left center;
    letter-spacing: 0.02em;
  }

  .dash-wrapper .secondary-grid {
    gap: 0.30rem !important; /* Mínimo hueco posible entre las dos columnas */
  }

  .dash-wrapper .secondary-card {
    padding: 0.4rem 0.15rem !important;
    overflow: hidden !important;
  }

  .dash-wrapper .secondary-card .sec-label {
    font-size: 10px !important;
    letter-spacing: -0.05em !important; /* Juntamos un micro-píxel las letras */
    white-space: nowrap !important;

    display: inline-block !important; /* Requisito para que funcione transform */
    transform: scaleX(0.85) !important; 
    transform-origin: left center !important; /* Para que al comprimirse no se separe del icono */
    width: 115% !important
  }
  .dash-wrapper .sec-sub {
    font-size: 8.5px !important; 
    white-space: normal !important;
    line-height: 1.1 !important;
    
    display: inline-block !important;
    transform: scaleX(0.9) !important;
    transform-origin: left center !important;
  }
  .dash-wrapper .sec-icon {
    width: 20px !important; 
    height: 20px !important; 
    min-width: 20px !important; 
    margin-right: 0.15rem !important;
  }
}
@media (max-width: 499px) {
  .dash-wrapper .action-card-label {
    font-size: 13px;
    display: block;
    transform: none;
    letter-spacing: 0;
    white-space: normal;
    line-height: 1.1;
  }
}

@media (max-width: 540px) {
  .dash-wrapper .match-card .match-title-text {
    font-size: 13px !important;
  }
}

/* Tablet (500–749px)*/
@media (min-width: 580px) and (max-width: 749px) {
  .dash-wrapper .action-card-label {
    font-size: 20px;
    display: block;
    transform: none;
    letter-spacing: 0;
    white-space: normal;
    line-height: 1.1;
  }
  .dash-wrapper .action-card-sub {
    font-size: 1rem;
  }
}
/* Tablet grande / desktop estrecho (750–1199px) */
@media (min-width: 750px) and (max-width: 1199px) {
  .dash-wrapper .action-card-label {
    font-size: 22px;
    transform: none;
    letter-spacing: 0;
    white-space: normal;
    line-height: 1.1;
  }
  .dash-wrapper .action-card-sub {
    font-size: 1.2rem;
  }
}

/* card glows */
.dash-wrapper .card-partido .action-card-glow  { background: #7c3aed; }
.dash-wrapper .card-grupo   .action-card-glow  { background: #c026d3; }
.dash-wrapper .card-ranked  .action-card-glow  { background: #2563eb; top: auto; bottom: -25px; left: -25px; right: auto; }
.dash-wrapper .card-comp    .action-card-glow  { background: #ea580c; top: auto; bottom: -25px; }

/* --- Secondary Grid --- */
.dash-wrapper .secondary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  padding: 0 0.5rem;
}

.dash-wrapper .secondary-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.dash-wrapper .secondary-card:hover {
  background: var(--bg-card2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

.dash-wrapper .sec-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.2rem;
}

.dash-wrapper .sec-label {
    font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
  line-height: 1.2;
  text-align: left;
}

.dash-wrapper .sec-sub {
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  color: #FFFFFF;
  margin-top: 0.1rem;
  text-align: left;
}

/* --- Pestañas partidos --- */
.dash-wrapper .partidos-tabs {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.dash-wrapper .partidos-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.4rem 0;
  margin-bottom: -1px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.dash-wrapper .partidos-tab--activa {
  color: var(--gold-br);
  border-bottom-color: var(--gold-br);
}

/* --- Match Cards --- */
.dash-wrapper .match-card {
  background: #2F3349;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.875rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  cursor: pointer;
}
.dash-wrapper .match-left {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
  text-align: left;
}

.dash-wrapper .match-date {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(0, 186, 209, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #2F3349;
}

.dash-wrapper .match-date-day { font-family: var(--font-head); font-size: 16px; font-weight: 700; line-height: 13px; color: #00BAD1; letter-spacing: 0; }
.dash-wrapper .match-date-mon { font-family: 'Public Sans', sans-serif; font-size: 12px; font-weight: 400; line-height: 13px; color: #FFFFFF; letter-spacing: 0; text-transform: uppercase; text-align: center; }

.dash-wrapper .match-avatars {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  gap: 0;
}
.dash-wrapper .match-avatars-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.dash-wrapper .match-avatar {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  border: 2px solid #00BAD1;
  object-fit: cover;
  background: #2F3349;
  flex-shrink: 0;
}
.dash-wrapper .match-avatars-group--away .match-avatar {
  border-color: #BF6CF4;
}
.dash-wrapper .match-avatars-sep {
  width: 1px;
  height: 34px;
  background: #FFFFFF;
  flex-shrink: 0;
  margin: 0 6px;
}

.dash-wrapper .match-pill-wrap {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 1rem;
}
.dash-wrapper .match-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 0 14px;
  height: 20px;
  line-height: 20px;
  border-radius: 999px;
  font-family: var(--font-head);
  letter-spacing: 0;
  white-space: nowrap;
  text-align: center;
}

/* --- Drawer --- */
.dash-wrapper .drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.dash-wrapper .drawer-overlay.open { opacity: 1; pointer-events: all; }

.dash-wrapper .drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 280px;
  max-width: 85vw;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  z-index: 201;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
}

.dash-wrapper .drawer.open { transform: translateX(0); }

.dash-wrapper .drawer-header {
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dash-wrapper .drawer-header img { height: 28px; width: auto; }

.dash-wrapper .drawer-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
}

.dash-wrapper .drawer-nav { flex: 1; overflow-y: auto; padding: 0.75rem 0; }

.dash-wrapper .drawer-section {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.75rem 1.25rem 0.2rem;
}

.dash-wrapper .drawer-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.7rem 1.25rem;
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}

.dash-wrapper .drawer-item:hover { background: var(--bg-card2); color: var(--gold-br); }
.dash-wrapper .drawer-item.active { color: var(--gold-br); background: rgba(245,197,24,0.05); }
.dash-wrapper .drawer-item svg { width: 18px; height: 18px; flex-shrink: 0; }

.dash-wrapper .notif-count {
  background: #ff4444;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  margin-left: auto;
}

/* --- Animations --- */
@keyframes dash-fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dash-wrapper .anim { opacity: 0; animation: dash-fadeUp 0.4s forwards; }
.dash-wrapper .anim-1 { animation-delay: 0.04s; }
.dash-wrapper .anim-2 { animation-delay: 0.10s; }
.dash-wrapper .anim-3 { animation-delay: 0.16s; }
.dash-wrapper .anim-4 { animation-delay: 0.22s; }
.dash-wrapper .anim-5 { animation-delay: 0.28s; }
.dash-wrapper .anim-6 { animation-delay: 0.34s; }
.dash-wrapper .anim-7 { animation-delay: 0.40s; }

.dash-wrapper ::-webkit-scrollbar { width: 3px; }
.dash-wrapper ::-webkit-scrollbar-track { background: transparent; }
.dash-wrapper ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* --- Responsive - Optimización para móviles --- */
@media (max-width: 1199px) {
  .dash-wrapper .navbar-dropdown {
    min-width: 280px !important;
    max-height: 70vh !important;
  }

  .dash-wrapper .dropdown-notifications-item {
    padding: 0.6rem 0.8rem !important;
  }

  .dash-wrapper .navbar-dropdown .dropdown-item {
    padding: 0.6rem 0.8rem !important;
  }

  .notificacion_lista_item_icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  .dash-wrapper .navbar-dropdown {
    min-width: 250px !important;
  }
}

/* --- Hide Vuexy layout navbar in dashboard --- */
.dash-wrapper ~ #layout-navbar,
#layout-navbar.dashboard-hide {
  display: none !important;
}

/* --- Header full-width adjustments --- */
.dash-wrapper .app-shell {
  border-radius: 0;
  margin: 0;
  padding: 0;
}

.dash-wrapper .navbar {
  border-radius: 0;
  margin: 0;
}

/* --- Extra small screens (max-width: 539px) --- */
@media (max-width: 539px) {
  .dash-wrapper .secondary-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0 0.5rem;
  }

  .dash-wrapper .secondary-card {
    padding: 0.625rem;
    gap: 0.5rem;
  }

  .dash-wrapper .secondary-card .sec-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dash-wrapper .secondary-card .sec-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  .dash-wrapper .secondary-card .sec-label {
    font-size: 0.6rem !important;
    letter-spacing: 0;
  }

  .dash-wrapper .secondary-card .sec-sub {
    font-size: 0.65rem !important;
  }

  /* Match cards: pill below text on mobile */
  .dash-wrapper .match-card {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .dash-wrapper .match-left {
    flex: 0 0 100%;
    overflow: visible;
  }

  .dash-wrapper .match-info .match-title-text {
    white-space: normal;
  }

  .dash-wrapper .match-pill-wrap {
    flex: 0 0 auto;
    /* indent to align with text (date 42px + gap 0.875rem ≈ 56px) */
    margin-left: calc(42px + 0.875rem);
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0.25rem;
    justify-content: flex-start;
  }
}

/* --- Desktop screens (min-width: 1200px) --- */
@media (min-width: 1200px) {
  .dash-wrapper {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
}

/* --- Mobile screens (max-width: 1199px) --- */
@media (max-width: 1199px) {
  .dash-wrapper .navbar {
    padding: 0.5rem 0.7rem;
    gap: 0.2rem;
  }

  .dash-wrapper .layout-menu-toggle {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
  }

  .dash-wrapper .layout-menu-toggle .nav-link {
    color: var(--white) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
  }

  .dash-wrapper .layout-menu-toggle .nav-link:hover,
  .dash-wrapper .layout-menu-toggle .nav-link:focus,
  .dash-wrapper .layout-menu-toggle .nav-link:active {
    background: transparent !important;
    color: var(--white) !important;
  }

  .dash-wrapper .layout-menu-toggle i {
    color: var(--white) !important;
    font-size: 1.2rem !important;
    width: auto !important;
  }

  .dash-wrapper .layout-menu-toggle i:hover,
  .dash-wrapper .layout-menu-toggle i:focus,
  .dash-wrapper .layout-menu-toggle i:active {
    color: var(--white) !important;
  }

  .dash-wrapper .nav-logo {
    position: static !important;
    transform: none !important;
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .dash-wrapper .nav-logo img {
    height: 22px !important;
  }

  .dash-wrapper .nav-right,
  .navbar .nav-left {
    gap: 0.5rem !important;
  }

  .dash-wrapper .nav-btn {
    width: 28px !important;
    height: 28px !important;
  }

  .dash-wrapper .nav-btn svg {
    width: 22px !important;
    height: 20px !important;
  }

  .dash-wrapper .nav-avatar {
    width: 28px !important;
    height: 28px !important;
  }

  .dash-wrapper .nav-badge {
    width: 20px !important;
    height: 20px !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
  }

  .dash-wrapper .navbar-dropdown {
    position: absolute !important;
    transform: none !important;
    min-width: 160px !important;
    max-width: 200px !important;
    margin-top: 0.4rem !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
  }

  .dash-wrapper .navbar-dropdown-notif,
  .dash-wrapper .navbar-dropdown-msg,
  .dash-wrapper .navbar-dropdown-profile {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
  }

  .dash-wrapper .navbar-dropdown .dropdown-item {
    padding: 0.35rem 0.65rem !important;
    font-size: 0.8rem !important;
  }

  .dash-wrapper .navbar-dropdown .dropdown-header {
    padding: 0.4rem 0.65rem !important;
    font-size: 0.8rem !important;
  }
}

/* --- Hamburger menu styling for tablets and larger (540px to 1199px) --- */
@media (min-width: 540px) and (max-width: 1199px) {
  .dash-wrapper .layout-menu-toggle {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
  }

  .dash-wrapper .layout-menu-toggle .nav-link,
  .dash-wrapper .layout-menu-toggle .nav-link:hover,
  .dash-wrapper .layout-menu-toggle .nav-link:focus,
  .dash-wrapper .layout-menu-toggle .nav-link:active {
    color: var(--white) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
  }

  .dash-wrapper .layout-menu-toggle i,
  .dash-wrapper .layout-menu-toggle i:hover,
  .dash-wrapper .layout-menu-toggle i:focus,
  .dash-wrapper .layout-menu-toggle i:active {
    color: var(--white) !important;
    font-size: 1.2rem !important;
    width: auto !important;
  }
}

/* --- Desktop overrides (min-width: 1200px) --- */
@media (min-width: 1200px) {
  .dash-wrapper .app-shell {
    max-width: 100%;
    margin: 0;
  }

  /* Mismo inset lateral que las tarjetas (la rejilla usa padding 1.5rem). */
  .dash-wrapper .insc-banner {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .dash-wrapper .action-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }

  .dash-wrapper .inscr-banner {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .dash-wrapper .action-card-label {
    font-size: 22px;
    transform: none;
    letter-spacing: 0;
    white-space: normal;
    line-height: 1.1;
  }

  .dash-wrapper .action-card-sub {
    font-size: 1.3rem;
  }

  .dash-wrapper .secondary-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }

  .dash-wrapper .secondary-card {
    padding: 1.25rem;
  }

  .dash-wrapper .sec-icon {
    width: 52px;
    height: 52px;
    font-size: 1.4rem;
  }

  .dash-wrapper .sec-label {
    font-size: 1.0rem;
  }

  .dash-wrapper .sec-sub {
    font-size: 1rem;
  }

  .dash-wrapper .section {
    padding: 1.25rem 1.5rem 0.75rem;
  }

  .dash-wrapper .match-card {
    padding: 1.25rem;
    margin-bottom: 0.75rem;
  }

  .dashboard-secondary-large .sec-label {
    font-size: 1rem;
    transform: none;
    letter-spacing: 0;
  }

  .dashboard-secondary-large .sec-sub {
    font-size: 0.95rem;
  }
}

/* --- Ajuste para pantallas de 1200px a 1300px --- */
@media (min-width: 1200px) and (max-width: 1300px) {
  .dash-wrapper .secondary-grid {
    display: grid !important;
    grid-template-columns: 0.9fr 1fr 1.25fr 0.9fr !important;
    gap: 0.5rem !important;
    padding: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .dash-wrapper .secondary-card {
    padding: 20px !important;
    min-width: 0 !important; 
  }
}

/* --- Adapto para las pantallas de 1200px a 1650px --- */
@media (min-width: 1200px) and (max-width: 1650px) {
  .dash-wrapper .action-card-label {
    font-size: 14px;
  }

  .dash-wrapper .action-card-sub {
    font-size: 0.85rem;
  }

  .dash-wrapper .sec-label {
    font-size: 0.85rem;
  }

  .dash-wrapper .sec-sub {
    font-size: 0.68rem;
  }
}

/* Dashboard content max-width */
.dashboard-content {
  max-width: 1450px;
  margin: 0 auto;
}

/* ===== DARK THEME STYLES ===== */
/* Applied when html has dark-style class */
html.dark-style .dash-wrapper {
  --bg:        #1a1a2e;
  --bg-card:   #16213e;
  --bg-card2:  #0f3460;
  --gold:      #c9930a;
  --gold-br:   #f5c518;
  --gold-dim:  #8a6508;
  --white:     #FFFFFF;
  --muted:     #888899;
  --border:    rgba(255,255,255,0.1);
}

html.dark-style .dashboard-header {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}

html.dark-style .dashboard-navbar {
  background-color: #16213e !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}

html.dark-style .dashboard-userbar {
  background: #0f3460 !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}

html.dark-style .dashboard-hero {
  background: linear-gradient(135deg, rgba(26,26,46,0.8) 0%, rgba(22,33,62,0.95) 100%) !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}

html.dark-style .dashboard-hero-title {
  color: #eaeaea !important;
}

html.dark-style .profile-card {
  background: #16213e !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}

html.dark-style .profile-name {
  color: #eaeaea !important;
}

html.dark-style .dash-wrapper .profile-card {
  background: #16213e;
  border-bottom-color: rgba(255,255,255,0.1);
}

html.dark-style .dash-wrapper .profile-name {
  color: #eaeaea;
}

html.dark-style .dash-wrapper .profile-firstname,
html.dark-style .dash-wrapper .profile-lastname {
  color: #eaeaea;
}

html.dark-style .dash-wrapper .dashboard-header {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-bottom-color: rgba(255,255,255,0.1);
}

html.dark-style .dash-wrapper .dashboard-navbar {
  background-color: #16213e !important;
  border-bottom-color: rgba(255,255,255,0.1);
}

html.dark-style .dash-wrapper .dashboard-userbar {
  background: #0f3460;
  border-bottom-color: rgba(255,255,255,0.1);
}

html.dark-style .dash-wrapper .dashboard-hero {
  background: linear-gradient(135deg, rgba(26,26,46,0.8) 0%, rgba(22,33,62,0.95) 100%);
  border-bottom-color: rgba(255,255,255,0.1);
}

html.dark-style .dash-wrapper .dashboard-hero-title {
  color: #eaeaea;
}

/* Ajustes especificos de colores de tarjetas en negro y brillo blanco.*/
/* Modifico el stats en el tema oscuro a negro. */
html.dark-style .dash-wrapper .stats-strip {
  background: #000000 !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

/* Añado color negro a las tarjetas de (SNP salud, descargas, muro) en el tema oscuro */
html.dark-style .dash-wrapper .secondary-card {
  background: #000000;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

html.dark-style .dash-wrapper .secondary-card:hover {
  background: #0a0a0a !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  box-shadow: 0 6px 20px rgba(255,255,255,0.2) !important;
  transform: translateY(-2px) !important;
}

/* Estilos específicos para tarjetas de colores en tema oscuro */
html.dark-style .dash-wrapper .js-acceso-salud {
  background: #00BFA5 !important;
  border: 1px solid rgba(0, 191, 165, 0.4) !important;
}

html.dark-style .dash-wrapper .js-acceso-salud:hover {
  background: #00a38c !important;
  border: 1px solid rgba(0, 191, 165, 0.6) !important;
  box-shadow: 0 6px 20px rgba(0, 191, 165, 0.35) !important;
}

html.dark-style .dash-wrapper #dashboard-sorteos {
  background: #7367F0 !important;
  border: 1px solid rgba(115, 103, 240, 0.4) !important;
}

html.dark-style .dash-wrapper #dashboard-sorteos:hover {
  background: #5e52d4 !important;
  border: 1px solid rgba(115, 103, 240, 0.6) !important;
  box-shadow: 0 6px 20px rgba(115, 103, 240, 0.35) !important;
}

html.dark-style .dash-wrapper .js-acceso-descargas {
  background: #FF9F43 !important;
  border: 1px solid rgba(255, 159, 67, 0.4) !important;
}

html.dark-style .dash-wrapper .js-acceso-descargas:hover {
  background: #e68f35 !important;
  border: 1px solid rgba(255, 159, 67, 0.6) !important;
  box-shadow: 0 6px 20px rgba(255, 159, 67, 0.35) !important;
}

html.dark-style .dash-wrapper #dashboard-inscripciones {
  background: #71A0FF !important;
  border: 1px solid rgba(113, 160, 255, 0.4) !important;
}

html.dark-style .dash-wrapper #dashboard-inscripciones:hover {
  background: #5a89e8 !important;
  border: 1px solid rgba(113, 160, 255, 0.6) !important;
  box-shadow: 0 6px 20px rgba(113, 160, 255, 0.35) !important;
}

/* Tarjeta de sorteos en color morado */
.dash-wrapper #dashboard-sorteos {
  background: #7367F0 !important;
  border: 1px solid rgba(115, 103, 240, 0.4) !important;
}

.dash-wrapper #dashboard-sorteos:hover {
  background: #5e52d4 !important;
  border: 1px solid rgba(115, 103, 240, 0.6) !important;
  box-shadow: 0 6px 20px rgba(115, 103, 240, 0.35) !important;
}

/* Tarjeta SNP Salud en color verde */
.dash-wrapper .js-acceso-salud {
  background: #00BFA5 !important;
  border: 1px solid rgba(0, 191, 165, 0.4) !important;
}

.dash-wrapper .js-acceso-salud:hover {
  background: #00a38c !important;
  border: 1px solid rgba(0, 191, 165, 0.6) !important;
  box-shadow: 0 6px 20px rgba(0, 191, 165, 0.35) !important;
}

/* Ocultar el botón flotante de MeetingDoctors — se abre desde el botón del dashboard */
.meeting-doctors-floating-container__button {
  display: none !important;
}

.meeting-doctors-floating-container {
  left: 20px !important;
  right: auto !important;
}

@media (min-width: 768px) {
  .meeting-doctors-floating-container__content {
    left: 0 !important;
    right: auto !important;
  }
}

@media (min-width: 1200px) {
  .meeting-doctors-floating-container {
    left: 300px !important;
  }
}

/* Tarjeta Muro en color azul */
.dash-wrapper #dashboard-muro {
  background: #00BAD1 !important;
  border: 1px solid rgba(0, 186, 209, 0.4) !important;
}

.dash-wrapper #dashboard-muro:hover {
  background: #009eb2 !important;
  border: 1px solid rgba(0, 186, 209, 0.6) !important;
  box-shadow: 0 6px 20px rgba(0, 186, 209, 0.35) !important;
}

/*Ajuste para que los Toasts no tapen la barra superior*/
#toast-container.toast-top-right {
    top: 60px !important;
    right: 10px;
}

/* Alineación vertical del texto con el icono */
#toast-container > div {
    display: flex;
    align-items: center;
}
#toast-container > .toast-info,
#toast-container > .toast-error,
#toast-container > .toast-success,
#toast-container > .toast-warning {
    background-position: 1.25rem center !important;
}

/* Pantallas entre 900px y 1200px */
@media (min-width: 901px) and (max-width: 1199px) {
    #toast-container.toast-top-right {
        top: 45px !important;
        right: 10px;
    }
}

@media (max-width: 900px) {
    #toast-container.toast-top-right {
        top: 45px !important;
        right: 10px;
    }
}



/* En las card de (crear partido, crear grupo, etc.) añado una sombra blanca.*/
html.dark-style .dash-wrapper .action-card:hover {
  box-shadow: 0 14px 34px rgba(255,255,255,0.15) !important;
}

/* Optimización para tema oscuro - Dropdowns mejorados */
html.dark-style .dash-wrapper .navbar-dropdown {
  background: #0f3460;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
}

html.dark-style .dash-wrapper .navbar-dropdown .dropdown-header {
  background: rgba(255, 255, 255, 0.08);
}

html.dark-style .dash-wrapper .dropdown-notifications-item {
  background: #16213e;
  border-color: rgba(255, 255, 255, 0.1);
}

html.dark-style .dash-wrapper .dropdown-notifications-item:hover {
  background: #0f3460;
  border-color: rgba(201, 147, 10, 0.4);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

html.dark-style .dash-wrapper .dropdown-notifications-item a {
  color: inherit;
  text-decoration: none;
}

html.dark-style .dash-wrapper .dropdown-notifications-item h6 {
  color: #eaeaea;
}

/* Cambio para modo oscuro el fondo que no esté en blanco */
html.dark-style .dash-wrapper .app-shell {
  background: #131629 !important;
}

html.dark-style .dash-wrapper .dashboard-content {
  background: transparent !important;
  box-shadow: none !important;
}
/* Incluyo el perfil con el fondo. */
html.dark-style .dash-wrapper .profile-card {
  background: transparent !important;
  border-bottom: none !important;
  padding-top: 2rem;
}

/* Badge de notificaciones sin leer mejorado */
.dash-wrapper .navbar-dropdown .dropdown-header .badge {
    background: rgba(201, 147, 10, 0.2) !important;
    color: var(--gold-br) !important;
    border: 1px solid rgba(201, 147, 10, 0.4) !important;
    font-weight: 700;
}

/* Sobrescribir background-color del span de notificaciones en dashboard */
.dash-wrapper .dropdown-notifications-item .dropdown-notifications-read span {
    background-color: transparent !important;
    color: var(--gold-br) !important;
}

/*Ajustes especificos para dropdowns de Perfil del usuario dashboard*/
/* Mantiene el texto alineado de la etiqueta, pero le quita el comportamiento de botón */
.dash-wrapper .navbar-dropdown p.dropdown-item {
  background-color: transparent !important;
  pointer-events: none !important;
  cursor: default;
}

/* Añado el id del nombre del usuario del dropdown para controlarlo así. */
#nombre-usuario {
  display: flex;
  flex-wrap: wrap; /* Si los dos span chocan, manda el segundo abajo */
  gap: 4px;
  max-width: 100%;
  line-height: 1.3;
}

#nombre-usuario span {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ======== ESTILOS PARA BOCADILLOS ======== */
/* Contenedor de bocadillos y estructura base*/
.bocadillos-container {
  position: relative;
}

/* Overlay blur del bocadillo */
.bocadillos-overlay {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: 0.3s ease;
  pointer-events: none;
  z-index: 10;
}

/* Menú estilo WhatsApp */
.bocadillos-menu {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 11;
}

/* --- Estados Activos del Contenedor --- */
.bocadillos-container.activo .bocadillos-overlay {
  opacity: 1;
  pointer-events: auto;
}

.bocadillos-container.activo .bocadillos-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Elementos individuales.*/
/* Bocadillo individual */
.bocadillo {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  padding: 6px 10px;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 145px;
  height: 48px;
  position: relative;
}

/* Imagen del bocadillo */
.bocadillo-img {
  max-width: 48px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  transition: transform 0.2s ease, filter 0.2s ease;
  flex-shrink: 0;
}

/* Texto del bocadillo */
.bocadillo-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  text-align: left;
  line-height: 1.25;
  font-weight: 500;
  word-wrap: break-word;
  flex: 1;
  min-width: 0;
}

/* Flecha entre texto y tooltip */
.bocadillo-flecha {
  position: absolute;
  right: 105%;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  transition: opacity 0.2s ease;
  margin-right: 2px;
  opacity: 0;
}

.bocadillo:hover .bocadillo-flecha {
  opacity: 1;
}

/* --- Efectos Hover y Active --- */
.bocadillo:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.bocadillo:hover .bocadillo-img {
  filter: brightness(1.08) saturate(1.1);
}

.bocadillo:active {
  transform: scale(0.96);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/*tooltip*/
.bocadillo-tooltip {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: white;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: all 0.25s ease;
  font-family: 'Public Sans', sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
  min-width: 90px;
  max-width: 120px;
  white-space: normal;
  word-wrap: break-word;
  margin-right: 8px;
}

.bocadillo:hover .bocadillo-tooltip {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
/*Parte de media queries*/
/* --- Escritorio grande (1024px+) --- */
@media (min-width: 1024px) {
  .bocadillo {
    width: 190px;
    height: 60px;
    padding: 8px 12px;
    gap: 10px;
  }
  .bocadillo-img {
    max-width: 48px;
    max-height: 48px;
  }
  .bocadillo-text {
    font-size: 16px;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .bocadillo {
    width: 160px;
    height: 56px;
    padding: 7px 10px;
    gap: 8px;
  }
  .bocadillo-img {
    max-width: 42px;
    max-height: 42px;
  }
  .bocadillo-text {
    font-size: 13px;
  }
}

/* --- Ocultar Tooltips en resoluciones problemáticas --- */
@media (max-width: 699px), (min-width: 1200px) and (max-width: 1799px) {
  .bocadillo-tooltip {
    display: none !important;
  }
  .bocadillo-flecha {
    display: none !important;
  }
}

/* --- Tablet (768px - 1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .bocadillo {
    width: 190px;
    height: 60px;
    padding: 8px 12px;
    gap: 10px;
  }
  .bocadillo-img {
    max-width: 48px;
    max-height: 48px;
  }
  .bocadillo-text {
    font-size: 15px;
  }
}

/* --- Móvil grande (481px - 767px) --- */
@media (min-width: 481px) and (max-width: 767px) {
  .bocadillo {
    width: 180px;
    height: 56px;
    padding: 7px 11px;
    gap: 9px;
  }
  .bocadillo-img {
    max-width: 44px;
    max-height: 44px;
  }
  .bocadillo-text {
    font-size: 12px;
  }
}

/* --- Móvil estándar (max-width: 480px) --- */

@media (max-width: 480px) {
  .bocadillos-menu {
    gap: 4px;
    bottom: 8px;
    right: 8px;
  }
  .bocadillo {
    width: 120px;
    height: 42px;
    border-radius: 10px;
    padding: 4px 7px;
    gap: 6px;
  }
  .bocadillo-img {
    max-width: 32px;
    max-height: 32px;
  }
  .bocadillo-text {
    font-size: 11px;
    line-height: 1.1;
  }
}

/* ======== ESTILOS PARA SORTEOS DASHBOARD ======== */

/* --- 1. ESTADOS GENERALES Y BANNERS --- */
.dash-wrapper .sorteos-empty-state {
    text-align: left; 
    padding: 1rem 0 2rem 0;
    color: #555;
    max-width: 600px;
}

.dash-wrapper .sorteos-empty-state p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0.3rem 0;
    color: #4a4a4a;
}

.dash-wrapper .divisor-sorteos {
    border: 0;
    border-top: 1px solid #e0e0e0;
    margin-bottom: 1.5rem;
    max-width: 400px;
}

.dash-wrapper .sorteos-banner-azul {
    background: linear-gradient(135deg, #0b132b 0%, #1c0a30 100%);
    color: white;
    text-align: center;
    padding: 3rem 2rem;
    margin: 2rem 0;
    border-radius: 4px;
}

.dash-wrapper .sorteos-banner-azul h2 {
    color: white;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-align: center;
}

.dash-wrapper .sorteos-banner-azul p {
    font-size: 1.05rem;
    color: #e0e0e0;
    margin: 0;
}

/* --- 2. LISTA DE SORTEOS --- */
.dash-wrapper .data-edit {
    padding: 0 1rem;
    max-width: 900px;
    margin: 0 auto;
    color: #1a1a1a;
}

html.dark-style .dash-wrapper .data-edit {
    color: var(--white);
}

.dash-wrapper .div-sorteos-finalizados {
    background: transparent;
    border-bottom: 1px solid #e0e0e0;
    padding: 1.75rem 0;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.dash-wrapper .div-sorteos-finalizados:last-child {
    border-bottom: none;
}

/* Icono regalo */
.dash-wrapper .icono-sorteo-regalo {
    width: 52px;
    height: 52px;
    background: rgba(219, 164, 0, 0.12);
    border: 2px solid rgba(219, 164, 0, 0.35);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.dash-wrapper .icono-sorteo-regalo i {
    color: #dba400;
    font-size: 22px;
}

.dash-wrapper .info-sorteo-flex {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.dash-wrapper .titulo-sorteo-ganadores {
    margin: 0 0 6px 0;
    color: #000000;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dash-wrapper .descripcion-sorteo {
    font-size: 0.875rem;
    color: #2d2d2d;
    margin: 0 0 10px 0;
    line-height: 1.55;
}

.dash-wrapper .fecha-sorteo-container {
    font-size: 0.85rem;
    color: #555;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 6px;
}

.dash-wrapper .icon-gold {
    color: #dba400;
}

.dash-wrapper .badge-sorteo-proximamente {
    display: inline-block;
    background: rgba(219, 164, 0, 0.12);
    color: #dba400;
    border: 1px solid rgba(219, 164, 0, 0.3);
    border-radius: 4px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.dash-wrapper .badge-sorteo-inscrito {
    display: inline-block;
    background: rgba(46, 125, 50, 0.12);
    color: #2e7d32;
    border: 1px solid rgba(46, 125, 50, 0.3);
    border-radius: 4px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.dash-wrapper .sorteo-ya-inscrito {
    opacity: 0.7;
}

.dash-wrapper .mensaje-inscrito-sorteo {
    color: #2e7d32;
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0.3rem 0 0.5rem;
}


/* --- 3. BOTONES Y ENLACES --- */
.dash-wrapper .btn-sorteo-container {
    margin-left: auto;
}

/* Estilos base compartidos para los botones principales */
.dash-wrapper .btn-sorteo-ganadores,
.dash-wrapper .btn-sorteo-inscripcion {
    color: white;
    border: none;
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

/* Colores específicos de cada botón */
.dash-wrapper .btn-sorteo-ganadores { background-color: #dba400; }
.dash-wrapper .btn-sorteo-ganadores:hover { background-color: #c09000; transform: translateY(-1px); }

.dash-wrapper .btn-sorteo-inscripcion { background-color: #1a6fc4; }
.dash-wrapper .btn-sorteo-inscripcion:hover { background-color: #1560a8; transform: translateY(-1px); }

.dash-wrapper .btn-sorteo-inscripcion.inscrito { background-color: #2e7d32; }
.dash-wrapper .btn-sorteo-inscripcion.inscrito:hover { background-color: #256427; transform: translateY(-1px); }

/* Enlace tipo texto */
.dash-wrapper .btn-sorteo-ganadores-link {
    background-color: transparent !important;
    color: #dba400 !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    display: block;
    transition: all 0.2s;
    border-radius: 0;
    text-align: left;
    width: fit-content;
}

.dash-wrapper .btn-sorteo-ganadores-link:hover {
    color: #f5c518 !important;
    text-decoration: underline;
}


/* --- 4. MODAL INSCRIPCIÓN --- */
.sorteo-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s;
    padding: 1rem;
}

.sorteo-modal-overlay.open { opacity: 1; pointer-events: all; }

.sorteo-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(16px) scale(0.98);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.sorteo-modal.open { transform: translateY(0) scale(1); }

.sorteo-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid var(--border);
}

.sorteo-modal-pretitulo {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-br, #dba400);
    display: block;
    margin-bottom: 0.25rem;
}

.sorteo-modal-titulo {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text, #fff);
    margin: 0;
    line-height: 1.3;
}

.sorteo-modal-close {
    background: none;
    border: none;
    color: var(--text-muted, #aaa);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}

.sorteo-modal-close:hover { color: var(--text, #fff); }

.sorteo-modal-body { padding: 1.5rem; }

.sorteo-modal-intro {
    font-size: 0.875rem;
    color: var(--text-muted, #aaa);
    margin: 0 0 1.25rem;
}

/* Formulario Modal */
.sorteo-form-group { margin-bottom: 1rem; }

.sorteo-form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted, #aaa);
    margin-bottom: 0.35rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.sorteo-form-control {
    width: 100%;
    background: var(--bg-card2, #1e1e2e);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 4px);
    color: var(--text, #fff);
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.sorteo-form-control:focus { outline: none; border-color: #1a6fc4; }
.sorteo-form-control.sorteo-field-error { border-color: #e53e3e; }
.sorteo-form-control[readonly] { color: #333333 !important; background-color: #f2f2f2d2 !important; opacity: 1; }

.sorteo-form-checks {
    margin: 1.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sorteo-check-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--text-muted, #aaa);
    cursor: pointer;
    line-height: 1.4;
}

.sorteo-check-label input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 0.15rem;
    accent-color: #1a6fc4;
    width: 15px;
    height: 15px;
}

.sorteo-check-label a { color: var(--gold-br, #dba400); text-decoration: none; }
.sorteo-check-label a:hover { text-decoration: underline; }

.sorteo-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    margin-top: 1.25rem;
}

.btn-sorteo-modal-cancelar {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted, #aaa);
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-sorteo-modal-cancelar:hover {
    background: var(--bg-card2);
    color: var(--text, #fff);
}


/* --- 5. RESPONSIVE (MEDIA QUERIES) --- */

/* Tablets (max-width: 1199px) */
@media (max-width: 1199px) {
  .dash-wrapper .section-title { font-size: 1rem; margin-bottom: 0.5rem; }
  .dash-wrapper .sorteos-banner-azul { padding: 2rem 1.5rem; margin: 1.5rem 0; }
  .dash-wrapper .sorteos-banner-azul h2 { font-size: 1.8rem; }
}

/* Móviles grandes (max-width: 767px) */
@media (max-width: 767px) {
  .dash-wrapper .app-shell > div { padding-left: 0 !important; padding-right: 0 !important; }
  .dash-wrapper .section-title { font-size: 0.95rem; margin-bottom: 0.4rem; }
  .dash-wrapper .sorteos-empty-state { max-width: 100%; padding: 0.75rem 1rem; }
  .dash-wrapper .divisor-sorteos { max-width: 100%; }
  
  .dash-wrapper .sorteos-banner-azul { padding: 1.5rem 1rem; margin: 1rem 0; }
  .dash-wrapper .sorteos-banner-azul h2 { font-size: 1.4rem; margin-bottom: 0.3rem; }
  .dash-wrapper .sorteos-banner-azul p { font-size: 0.9rem; }
  
  .dash-wrapper .div-sorteos-finalizados { padding: 1.5rem 0; gap: 1rem; flex-wrap: wrap; }
  .dash-wrapper .titulo-sorteo-ganadores { font-size: 0.9rem; letter-spacing: 0.02em; }
  .dash-wrapper .fecha-sorteo-container { font-size: 0.85rem; }
  
  .dash-wrapper .btn-sorteo-ganadores,
  .dash-wrapper .btn-sorteo-inscripcion { padding: 0.5rem 1rem; font-size: 0.8rem; }
  .dash-wrapper .btn-sorteo-ganadores-link { margin-top: 0.5rem; font-size: 0.8rem; }
}

/* Móviles pequeños (max-width: 480px) */
@media (max-width: 480px) {
  .dash-wrapper .section-title { font-size: 0.875rem; margin-bottom: 0.35rem; }
  .dash-wrapper .sorteos-banner-azul h2 { font-size: 1.2rem; }
  .dash-wrapper .sorteos-banner-azul p { font-size: 0.85rem; }
  
  .dash-wrapper .div-sorteos-finalizados { padding: 1rem 0; gap: 0.75rem; flex-direction: column; align-items: flex-start; }
  .dash-wrapper .titulo-sorteo-ganadores { font-size: 0.8rem; letter-spacing: 0.01em; }
  .dash-wrapper .fecha-sorteo-container { font-size: 0.8rem; }
  
  .dash-wrapper .btn-sorteo-ganadores { padding: 0.4rem 0.8rem; font-size: 0.75rem; width: 100%; text-align: center; }
  .dash-wrapper .btn-sorteo-ganadores-link { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; font-size: 0.75rem; margin-top: 0.3rem; }
  
  /* Ajustes del modal para pantallas pequeñas */
  .sorteo-modal-footer { flex-direction: column-reverse; }
  .sorteo-modal-footer .btn,
  .sorteo-modal-footer button { width: 100%; }
}

/* --- 6. DARK MODE --- */
/* Empty state en dark mode */
html.dark-style .dash-wrapper .sorteos-empty-state p { color: var(--muted); }
html.dark-style .dash-wrapper .sorteos-empty-state { color: var(--white); }

/* Divisores en dark mode */
html.dark-style .dash-wrapper .divisor-sorteos { border-top-color: rgba(255, 255, 255, 0.1); }
html.dark-style .dash-wrapper .div-sorteos-finalizados { border-bottom-color: rgba(255, 255, 255, 0.1); }

/* Títulos y textos en dark mode */
html.dark-style .dash-wrapper .titulo-sorteo-ganadores { color: var(--white); }
html.dark-style .dash-wrapper .descripcion-sorteo { color: var(--muted); }
html.dark-style .dash-wrapper .fecha-sorteo-container { color: var(--muted); }

/* Badge de proximamente en dark mode */
html.dark-style .dash-wrapper .badge-sorteo-proximamente {
    background: rgba(245, 197, 24, 0.12);
    color: var(--gold-br);
    border: 1px solid rgba(245, 197, 24, 0.3);
}

/* Sin sorteos activos - H2 específico del template */
html.dark-style .dash-wrapper .sin-sorteos-activos h2 { color: var(--gold-br); }
html.dark-style .col-md-12:not(.sin-sorteos-activos) { color: var(--white); }

html.dark-style .dash-wrapper .sorteos-section-publica {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 2rem;
    color: var(--white);
}

html.dark-style .dash-wrapper .sorteos-section-publica p {
    color: var(--muted);
}

/* Info box de inscripción en dark mode */
html.dark-style .dash-wrapper .sorteo-modal-body > div[style*="background-color: #dba400"] {
    background-color: rgba(245, 197, 24, 0.2) !important;
    color: var(--white) !important;
    border: 1px solid rgba(245, 197, 24, 0.3);
}

html.dark-style .dash-wrapper .sorteo-modal-body > div[style*="background-color: #dba400"] i {
    color: var(--gold-br);
}

/* Textos del modal en dark mode */
html.dark-style .dash-wrapper .sorteo-modal-body { color: var(--white); }
html.dark-style .dash-wrapper .sorteo-modal-intro { color: var(--muted); }

/* Form controls en dark mode */
html.dark-style .dash-wrapper .sorteo-form-control[readonly] {
    color: var(--white) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Botones en dark mode */
html.dark-style .dash-wrapper .btn-sorteo-ganadores {
    background-color: var(--gold);
    color: #000000;
}

html.dark-style .dash-wrapper .btn-sorteo-ganadores:hover {
    background-color: var(--gold-br);
}

html.dark-style .dash-wrapper .info-sorteo-flex .btn-sorteo-ganadores-link {
    display: block !important;
    text-align: left !important;
    color: var(--gold-br) !important;
    margin: 0.5rem 0 0 0 !important;
    padding: 0 !important;
    width: auto !important;
}

html.dark-style .dash-wrapper .btn-sorteo-ganadores-link:hover {
    color: var(--gold) !important;
}

html.dark-style .dash-wrapper .btn-sorteo-inscripcion {
    background-color: #2563eb;
    border-color: #3b82f6;
}

html.dark-style .dash-wrapper .btn-sorteo-inscripcion:hover {
    background-color: #1d4ed8;
}

html.dark-style .dash-wrapper .btn-sorteo-inscripcion.inscrito {
    background-color: #16a34a;
}

html.dark-style .dash-wrapper .btn-sorteo-inscripcion.inscrito:hover {
    background-color: #15803d;
}

/* Título de sección en dark mode */
html.dark-style .dash-wrapper .section-title {
    color: var(--white) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    text-align: left;
}

/* Banner de sorteos en dark mode */
html.dark-style .dash-wrapper .sorteos-banner-azul {
    background: linear-gradient(135deg, #0f1a3c 0%, #1a0f3c 100%);
    border: 1px solid rgba(245, 197, 24, 0.2);
}

html.dark-style .dash-wrapper .sorteos-banner-azul h2 {
    color: var(--white);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html.dark-style .dash-wrapper .sorteos-banner-azul p {
    color: rgba(255, 255, 255, 0.8);
}

/* Sección sin sorteos en dark mode */
html.dark-style .dash-wrapper .sin-sorteos-activos h2 {
    color: var(--gold-br) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html.dark-style .dash-wrapper .sin-sorteos-activos ~ div {
    color: var(--white);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Texto de sin sorteos en dark mode */
html.dark-style .col-md-12[style*="color: #555"] {
    color: var(--white) !important;
    text-align: center;
}

html.dark-style .col-md-12[style*="color: #555"] span {
    color: var(--white) !important;
    text-align: center;
}

/* Modal en dark mode mejorado */
html.dark-style .dash-wrapper .sorteo-modal {
    background: #16213e;
    border-color: rgba(245, 197, 24, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

html.dark-style .dash-wrapper .sorteo-modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

html.dark-style .dash-wrapper .sorteo-modal-titulo {
    color: var(--white);
}

html.dark-style .dash-wrapper .sorteo-modal-pretitulo {
    color: var(--gold-br);
}

html.dark-style .dash-wrapper .sorteo-modal-close {
    color: var(--muted);
}

html.dark-style .dash-wrapper .sorteo-modal-close:hover {
    color: var(--white);
}

html.dark-style .dash-wrapper .sorteo-modal-footer {
    border-top-color: rgba(255, 255, 255, 0.1);
}

html.dark-style .dash-wrapper .btn-sorteo-modal-cancelar {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

html.dark-style .dash-wrapper .btn-sorteo-modal-cancelar:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}
/* Selectpicker de zona en el modal de sorteos: igualamos al estilo de .sorteo-form-control.
   Bootstrap Select reemplaza el <select> nativo por un <button>, así que hay que apuntar
   al botón generado en lugar de al select oculto. */
#sorteoZonaGroup .bootstrap-select {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}

#sorteoZonaGroup .bootstrap-select > .dropdown-toggle {
    width: 100% !important;
    background-color: #f2f2f2d2 !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm, 4px) !important;
    color: #333333 !important;
    padding: 0.6rem 0.85rem !important;
    height: auto !important;
    display: block !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    transition: border-color 0.15s !important;
    box-shadow: none !important;
    min-width: 0 !important;
}
#sorteoZonaGroup .bootstrap-select > .dropdown-toggle .filter-option {
    display: block !important;
    width: 100% !important;
}

#sorteoZonaGroup .bootstrap-select > .dropdown-toggle:focus,
#sorteoZonaGroup .bootstrap-select.show > .dropdown-toggle {
    border-color: #1a6fc4;
    box-shadow: none;
    outline: none;
}

#sorteoZonaGroup .bootstrap-select > .dropdown-toggle.sorteo-field-error {
    border-color: #e53e3e;
}

#sorteoZonaGroup .bootstrap-select .dropdown-menu {
    background: var(--bg-card, #1e1e2e);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 4px);
}

#sorteoZonaGroup .bootstrap-select .dropdown-menu li a span.text {
    color: var(--text, #fff);
}

#sorteoZonaGroup .bootstrap-select .dropdown-menu li a:hover,
#sorteoZonaGroup .bootstrap-select .dropdown-menu li.selected > a {
    background: rgba(255, 255, 255, 0.08);
}

html.dark-style .dash-wrapper #sorteoZonaGroup .bootstrap-select > .dropdown-toggle {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

html.dark-style .dash-wrapper #sorteoZonaGroup .bootstrap-select .dropdown-menu {
    background: #16213e;
    border-color: rgba(255, 255, 255, 0.1);
}

html.dark-style .dash-wrapper #sorteoZonaGroup .bootstrap-select .dropdown-menu li a span.text {
    color: var(--white);
}

html.dark-style .dash-wrapper #sorteoZonaGroup .bs-searchbox input {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--white);
}

/* --- Header Navigation: Left Container --- */
.navbar .nav-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 1rem;
}

#btn-login-registro {
    color: black !important;
    font-weight: bold !important;
    padding: 0.5rem 1rem !important;
}

#btn-login-registro span,
#btn-login-registro i {
    color: black !important;
    transition: color 0.2s ease;
}

#btn-login-registro:hover {
    color: white !important;
}

#btn-login-registro:hover span,
#btn-login-registro:hover i {
    color: white !important;
}

/* MENÚ FLOTANTE DE DESCARGAS */
.descargas-container {
  position: relative;
}

.descargas-menu {
  position: absolute;
  width: 321px;
  height: auto;
  background: #FFFFFF;
  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 999999;
}

.descarga-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  width: 100%;
  box-sizing: border-box;
  pointer-events: auto;
}

.descarga-item:last-child {
  border-bottom: none;
}

.descarga-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.descarga-img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--descargas);
}

.descarga-text {
  font-size: 0.875rem;
  color: #333333;
  font-weight: 500;
}

.descarga-vacia {
  padding: 12px 16px;
  color: #999999;
  font-size: 0.875rem;
  text-align: center;
}

@media (max-width: 1199px) {
  .dash-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    overflow-x: hidden;
  }

  .dash-wrapper .app-shell {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
  }

  .layout-page,
  .content-wrapper,
  .container-xxl,
  .container-p-y,
  .no_iframe {
    max-width: 100% !important;
    overflow-x: hidden;
  }

  .dash-wrapper,
  .dash-wrapper .navbar,
  .dash-wrapper .nav-right,
  .dash-wrapper .nav-dropdown {
    overflow: visible !important;
  }

  .dash-wrapper .navbar {
    z-index: 9999 !important;
  }

  .dash-wrapper .navbar-dropdown-notif {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;

    width: 320px !important;
    max-width: calc(100vw - 1.5rem) !important;
    min-width: 260px !important;

    margin-top: 0 !important;
    z-index: 10000 !important;

    max-height: 60vh !important;
    overflow-y: auto !important;
  }

}

@media (max-width: 767px) {
  .descargas-menu {
    width: calc(100vw - 32px) !important;
    max-width: 321px !important;

    left: 50vw !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    z-index: 999999 !important;
  }

  .descargas-menu.activo,
  .descargas-container.activo .descargas-menu {
    left: 50vw !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .dash-wrapper .navbar-dropdown-notif {
    position: fixed !important;
    top: 45px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* Separación entre grid principal y grid secundario del dashboard en version movil */
@media (max-width: 1199px) {
  .dash-wrapper .action-grid {
    margin-bottom: 0.85rem !important;
  }

  .dash-wrapper .secondary-grid {
    margin-top: 0 !important;
  }
}

/* Estilos para footer */
.qsg-accordion__title,
.qsg-footer__heading {
  text-align: left !important;
  color: #DBA400 !important;
  opacity: 1 !important;

  display: block;
  transform: scaleX(1.25);
  transform-origin: left center;
  letter-spacing: 0.02em;
}

/* Padding-left global */
.pl-20 {
	padding-left: 20px;
}
/* Padding lateral del bloque de entidades en inscripciones (igual que el dashboard) */
#bloqueEntidades {
	padding: 0 5%;
}
/* La imagen banner ocupa todo el ancho del bloque, ignorando el padding lateral
   (5%) de #bloqueEntidades y el gutter de Bootstrap de su fila (.row > * = 0.75rem).
   El padding es 5% del ancho total y el margen de la fila se calcula sobre el 90%
   restante, por eso la compensación es 5% / 0.9 = 5.56% a cada lado. */
#bloqueEntidades > .row:first-child {
	margin-left: -5.56%;
	margin-right: -5.56%;
	border-bottom: 2px solid #fdc003;
}
#bloqueEntidades > .row:first-child > .banner-tarjetas {
	padding-left: 0;
	padding-right: 0;
}

/* ── Cabecera de inscripciones: título, texto y separador bajo el banner ─ */
#bloqueEntidades .insc-header-row {
	margin-top: 1.75rem;
}

.titulo_inscripciones {
	color: #fdc003;
}

#bloqueEntidades .insc-header-texto {
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #6b7280;
}

@media (min-width: 768px) {
	#bloqueEntidades .insc-header-texto {
		text-align: center;
	}
}

html.dark-style #bloqueEntidades .insc-header-texto { color: var(--bs-body-color); }
/* Anula el padding-top de .container-p-y (core.css) SOLO en la vista de inscripciones,
   para que el banner quede pegado al navbar. Se hace por scope con :has para no tocar
   el layout compartido ni el core (que usa ese padding en otras páginas). */
.container-p-y:has(#bloqueEntidades) {
	padding-top: 0 !important;
}

/* ── Tarjetas de entidad en inscripciones ──────────────────────────────── */
/* Utilidad estándar de Bootstrap (no incluida en este build): texto negro puro */
.text-black { color: #000 !important; }

#entidades_disponibles {
	row-gap: 1.25rem;
}

/* Tarjetas de entidad (sobre componentes Vuexy .card/.btn): solo helpers de imagen, badge y botón */
#entidades_disponibles .insc-ent-img { width: 100%; height: 210px; object-fit: cover; display: block; background: #e9e9ee; }
/* Entidad "próximamente" (cerrada): imagen en blanco y negro. */
#entidades_disponibles .insc-ent-img--proximamente { filter: grayscale(1); }
#entidades_disponibles .insc-ent-badge {
	bottom: 12px;
	left: 12px;
	background: #18a558;
	color: #fff;
	letter-spacing: 0.06em;
	font-size: 0.62rem;
	padding: 0.2rem 0.55rem;
}
#entidades_disponibles .insc-ent-badge--proximamente { background: #fcc416; color: #806413; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.35rem 0.75rem; margin-left: 0.2rem !important; }

/* Card-title de la entidad en estado "Próximamente" */
#entidades_disponibles .insc-ent-card:has(.insc-ent-badge--proximamente) .card-title {
	color: #808184;
}

/* El badge "Próximamente" se pega al título en vez de irse al extremo derecho;
   solo cae a su propia línea si de verdad no cabe */
#entidades_disponibles .insc-ent-card .card-body > .d-flex:has(.insc-ent-badge--proximamente) {
	justify-content: flex-start;
	flex-wrap: wrap;
	row-gap: 0.35rem;
}
#entidades_disponibles .insc-ent-card .card-body > .d-flex:has(.insc-ent-badge--proximamente) .card-title {
	min-width: 0;
	white-space: normal;
	overflow-wrap: break-word;
}

/* Botón "Inscribirse" de las tarjetas de entidad */
#entidades_disponibles .insc-ent-card .btn-primary {
	background-color: #fdc003;
	border-color: #fdc003;
	padding: 0.65rem 1.5rem;
}

/* Botón "Próximamente" (deshabilitado) de las tarjetas de entidad */
#entidades_disponibles .insc-ent-card .btn-secondary {
	padding: 0.65rem 1.5rem;
}
#entidades_disponibles .insc-ent-card .btn-secondary:disabled {
	color: #6b6c6e !important;
	background-color: #d8d1d1 !important;
	border-color: #e2e2e2 !important;
	border-radius: 0.5rem;
	font-weight: 500;
}

/* ── Tarjeta de reglamento ─────────────────────────────────────────────── */
#entidades_disponibles .insc-reglamento-card {
	background: #14141f;
	border-radius: 16px;
	padding: 1.5rem 1.5rem 1.6rem;
	color: #fff;
}

#entidades_disponibles .insc-reglamento-titulo {
	font-size: 1.1rem;
	font-weight: 800;
	color: #fff;
	margin: 0 0 0.4rem;
}

#entidades_disponibles .insc-reglamento-texto {
	font-size: 0.88rem;
	color: #b8b8c4;
	line-height: 1.4;
	margin: 0 0 1rem;
}

#entidades_disponibles .insc-reglamento-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: #f5c518;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 0.82rem;
	text-decoration: none;
}

#entidades_disponibles .insc-reglamento-link:hover { color: #dba400; }

/* ── Equipos del jugador (temporada actual / anterior) ─────────────────── */
/* Fondo claro de la vista de equipos (como el Figma); las tarjetas van en blanco. */
#bloque { background: #f4f4f6; }

/* En modo oscuro el fondo general sigue el fondo oscuro estándar de Vuexy;
   las tarjetas de equipo se mantienen en claro (ver reglas .insc-card más abajo). */
html.dark-style #bloque { background: var(--bs-body-bg); }

/* Padding lateral simétrico en móvil, igual que el dashboard (0 5%). */
@media (max-width: 767px) {
	#bloqueContenido {
		padding-left: 5% !important;
		padding-right: 5% !important;
		padding-top: 5%;
	}
}

/* En escritorio el contenido va inset 5% y la cabecera se alinea con él
   (mismo 5% por margen) para verse como tarjeta redondeada flotando sobre el gris. */
@media (min-width: 768px) {
	#bloqueContenido {
		padding-top: 2%;
		padding-left: 5%;
		padding-right: 5%;
	}
	#bloque .insc-perfil {
		margin: 2% 5% 0;
	}
}

/* ── Cabecera de perfil (vista de equipos) ─────────────────────────────── */
#bloque .insc-perfil {
	background: #fff;
	border-radius: 0.75rem;
	text-align: center;
	padding: 1.5rem 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
}
#bloque .insc-perfil-avatar {
	width: 110px;
	height: 110px;
	margin: 0;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid #dba400;
	background: #e6e6ec;
	flex-shrink: 0;
}
#bloque .insc-perfil-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
#bloque .insc-perfil-info { min-width: 0; }
#bloque .insc-perfil-nombre {
	font-weight: 800;
	color: #1a1a2e;
	font-size: 1.3rem;
	text-transform: uppercase;
	margin: 0 0 0.4rem;
}
#bloque .insc-perfil-rol {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: #dba400;
	font-weight: 600;
	font-size: 0.9rem;
	text-transform: uppercase;
}
#bloque .insc-perfil-rol i { color: #dba400; font-size: 1.1rem; }

#bloque .insc-perfil-acciones {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.6rem;
	width: 100%;
}
#bloque .insc-perfil-acciones .btn {
	width: 100%;
	border-radius: 0.5rem;
	padding: 0.55rem 1.25rem;
	font-size: 0.82rem;
	letter-spacing: 0.02em;
}
#bloque #div_btn_crear_equipo {
	margin-top: 0;
	text-align: center;
}

/* Botón re-inscribir: borde dorado, texto oscuro (ancla a temporada anterior) */
#bloque #btn_reinscribir_equipo {
	color: #dba400;
	border-color: #dba400;
}
#bloque #btn_reinscribir_equipo:hover {
	background: #dba400;
	color: #000;
	border-color: #dba400;
}

/* Escritorio: cabecera horizontal (avatar | nombre | acciones) */
@media (min-width: 992px) {
	#bloque .insc-perfil {
		flex-direction: row;
		align-items: center;
		text-align: left;
		gap: 1.25rem;
		padding: 1.25rem 1.5rem;
	}
	#bloque .insc-perfil-avatar { width: 76px; height: 76px; }
	#bloque .insc-perfil-info { flex: 1 1 auto; }
	#bloque .insc-perfil-nombre { font-size: 1.15rem; margin: 0 0 0.25rem; }
	#bloque .insc-perfil-rol { font-size: 0.82rem; }
	#bloque .insc-perfil-acciones {
		flex-direction: row;
		align-items: center;
		width: auto;
		flex-shrink: 0;
	}
	#bloque .insc-perfil-acciones .btn { width: auto; }
}

#bloqueContenido .insc-seccion { margin-bottom: 2rem; }

#bloqueContenido .insc-seccion-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-head, inherit);
	font-size: 0.95rem;
	font-weight: 700;
	color: #1a1a2e;
	margin-bottom: 1rem;
}
#bloqueContenido .insc-seccion-header i { color: #dba400; font-size: 1.1rem; }
#bloqueContenido .insc-seccion-header--anterior i { color: #dba400; }

/* Legibilidad del texto fuera de las tarjetas sobre el fondo oscuro de Vuexy */
html.dark-style #bloqueContenido .insc-seccion-header { color: var(--bs-heading-color); }

/* Helpers de marca para las tarjetas de equipos (sobre componentes Vuexy .card/.btn) */
#bloqueContenido .insc-status { font-size: 0.72rem; letter-spacing: 0.05em; color: #fff; }
#bloqueContenido .insc-status--listo { background: #18a558; }
#bloqueContenido .insc-status--pendiente { background: #e23b3b; }
#bloqueContenido .insc-status--faltan { background: #fac525; color: #000; }
#bloqueContenido .insc-status--solicitud { background: #f0f0f3; color: #6b7280; }
#bloqueContenido .insc-rechazado,
#bloqueContenido .insc-confirmado {
	border-radius: 8px;
	padding: 0.6rem 1rem;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
}
#bloqueContenido .insc-rechazado { background: #e23b3b; }
#bloqueContenido .insc-confirmado { background: #18a558; }
@media (max-width: 767px) {
	#bloqueContenido .insc-confirmado,
	#bloqueContenido .insc-rechazado { font-size: 0.68rem; }
}
#bloqueContenido .insc-card-fichaje .card-body { padding-top: 1.85rem; padding-bottom: 1.85rem; }
#bloqueContenido .insc-fichaje-icon {
	width: 32px; height: 32px;
	border-radius: 50%;
	background: #dba400;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
#bloqueContenido .insc-fichaje-icon--gris { background: #d8d8e0; color: #6b7280; }
#bloqueContenido .insc-head--dark { background: #14141f; }
#bloqueContenido .insc-head--gray { background: #d8d8e0; }
#bloqueContenido .insc-head { justify-content: flex-start; }
#bloqueContenido .insc-head-info { flex: 1 1 auto; min-width: 0; text-align: left; }
#bloqueContenido .insc-avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: #e6e6ec; flex-shrink: 0; display: inline-block; }
#bloqueContenido .insc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
#bloqueContenido .insc-nombre { font-size: 0.95rem; line-height: 1.15; }
#bloqueContenido .insc-card--anterior .insc-nombre { color: #1a1a2e; }
#bloqueContenido .insc-club { font-size: 0.72rem; letter-spacing: 0.03em; }
#bloqueContenido .insc-nivel { font-size: 1.8rem; color: #1a1a2e; }
#bloqueContenido .insc-nivel--muted { font-size: 2.2rem; color: #c9c9d1; }
#bloqueContenido .insc-btn-outline { background: #f3f3f5; border: 1px solid #e3e3e9; color: #6b7280; font-size: 0.72rem; font-weight: 600; }
#bloqueContenido .insc-btn-outline:hover { border-color: #c8c8d0; color: #1a1a2e; }
/* Modal "Aviso" (equipos del año pasado): texto negro en el botón Continuar */
#modalEjAnterior #btn-continuar { color: #000; }

/* En móvil, centrado vertical y botones apilados a ancho completo */
@media (max-width: 767px) {
	#modalEjAnterior .modal-dialog {
		display: flex;
		align-items: center;
		min-height: calc(100% - 1rem);
	}
	#modalEjAnterior .modal-footer {
		flex-direction: column;
		gap: 0.6rem;
	}
	#modalEjAnterior .modal-footer .btn {
		width: 100%;
		margin: 0;
	}
}

/* (Las reglas .insc-equipo-* antiguas se han retirado; las tarjetas ahora usan
   componentes Vuexy .card/.btn + los helpers .insc-* de arriba.) */

/* En modo oscuro, las tarjetas de "Tus equipos" (normales y reinscritas) deben
   verse exactamente igual que en modo claro; solo cambia el fondo general de la
   página (heredado del layout Vuexy en modo oscuro). Se reescriben las variables
   de Bootstrap dentro de la propia tarjeta con los valores del tema claro para
   que card-header, card-body, .text-muted, bordes, etc. hereden ese aspecto. */
html.dark-style #bloqueContenido .insc-card,
html.dark-style #bloqueContenido .insc-card--anterior {
	--bs-body-color: #6d6b77;
	--bs-body-color-rgb: 109, 107, 119;
	--bs-emphasis-color: #2f2b3d;
	--bs-secondary-color: rgba(109, 107, 119, 0.75);
	--bs-secondary-color-rgb: 109, 107, 119;
	--bs-tertiary-color: rgba(109, 107, 119, 0.5);
	--bs-heading-color: #444050;
	--bs-border-color: #e6e6e8;
	--bs-border-color-translucent: rgba(47, 43, 61, 0.175);
	--bs-card-cap-color: #444050;
	--bs-card-color: ;
	--bs-card-bg: #fff;
	background-color: #fff;
	color: var(--bs-body-color);
}

/* Estado vacío */
#bloqueContenido .insc-empty {
	background: #fafafa;
	border: 1px dashed #d8d8e0;
	border-radius: 14px;
	padding: 2.25rem 1.5rem;
	text-align: center;
	color: #6b7280;
}
#bloqueContenido .insc-empty-icon {
	width: 54px; height: 54px;
	margin: 0 auto 0.75rem;
	border-radius: 50%;
	background: #f0f0f3;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.5rem;
	color: #9aa0ac;
}
#bloqueContenido .insc-empty-titulo { font-weight: 700; color: #1a1a2e; margin-bottom: 0.35rem; }
#bloqueContenido .insc-empty-texto { font-size: 0.85rem; }
/* ── Banner Modal Dashboard ─────────────────────────────────────────────── */
#dashboardBannerModal .modal-content { color: #433c50; }
#dashboardBannerModal .modal-title { color: #433c50; font-weight: 600; }
/* Cierre flotante (btn-close de Vuexy) solo cuando la imagen va a sangre completa SIN cabecera.
   Sin overflow:hidden en el modal, así que el botón NO se recorta. */
#dashboardBannerModal .banner-modal-close-float { display: none; }
#dashboardBannerModal .modal-content.banner-modal--sin-cabecera .banner-modal-close-float {
	display: block;
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 5;
	opacity: 1;
}
#dashboardBannerModal .modal-body { color: #655e6e; padding: 1.5rem; }
#dashboardBannerModal .modal-body { padding-bottom: 0.25rem; }
#dashboardBannerModal .modal-body img { max-width: 100%; height: auto; border-radius: 4px; }
/* Banner modal con imagen: imagen a sangre completa (sin padding). La cabecera se oculta (JS) para
   que no quede franja blanca; el cierre es el btn-close flotante de arriba (sin overflow, no se recorta).
   La imagen se redondea a las esquinas del modal para que no sobresalga de ellas. */
#dashboardBannerModal .modal-content.banner-modal--imagen .modal-body { padding: 0; }
/* Con cabecera (título): la imagen solo redondea abajo (arriba está la cabecera). */
#dashboardBannerModal .modal-content.banner-modal--imagen .modal-body img {
	display: block;
	width: 100%;
	border-radius: 0 0 var(--bs-modal-inner-border-radius, 0.4rem) var(--bs-modal-inner-border-radius, 0.4rem);
}
/* Sin cabecera (sin título): imagen a sangre completa, redondeada en las 4 esquinas. */
#dashboardBannerModal .modal-content.banner-modal--sin-cabecera .modal-body img {
	border-radius: var(--bs-modal-inner-border-radius, 0.4rem);
}
#dashboardBannerModal .modal-dialog { margin-left: auto; margin-right: auto; }
#dashboardBannerModal .modal-footer:empty { display: none; }
#dashboardBannerModal .modal-footer { padding: 0.5rem 1.5rem 0.75rem; }
#dashboardBannerModalBtn {
    background: #DBA400;
    color: #ffffff;
    border: 1px solid #DBA400;
    padding: 0 1.5rem;
    height: 31px;
    line-height: 29px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Public Sans', sans-serif;
    box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
    border-radius: 3px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, background-color 0.2s;
}
#dashboardBannerModalBtn:hover {
    background: #c09000;
    border-color: #c09000;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0px 5px 8px rgba(0,0,0,0.20);
}