.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;
}

/* --- 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); }

/* 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);
}

/* --- 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;
  }

  .dash-wrapper .action-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1.5rem;
    padding: 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;
}

/* 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;
}