/* =========================================================
   0) VARIABLES
   ========================================================= */
:root{
  --brand: #06BE84;
  --text: #ffffff;

  --header-bg: #151a1c;
  --header-fg: #ffffff;

  --row-base-odd: rgba(6,190,132,0.08);
  --row-base-even: rgba(6,190,132,0.04);

  --row-hover-base: rgba(255,255,255,0.10);
  --row-hover-overlay: rgba(255,255,255,0.10);

  --row-radius: 11px;
}

/* =========================================================
   1) BASE DE PÁGINA
   ========================================================= */
body{
  font-family: 'Roboto', sans-serif;
  color: var(--text) !important;
}

/* =========================================================
   2) CABECERAS DEL DATATABLE (Dash)
   ========================================================= */
.dash-spreadsheet-container .dash-spreadsheet th{
  background-color: var(--header-bg) !important;
  color: var(--header-fg) !important;
  font-weight: 600;
  border: none !important;
}

.dash-table-container .dash-spreadsheet .column-header--header{
  background-color: var(--header-bg) !important;
  color: var(--header-fg) !important;
  border: none !important;
}

.dash-spreadsheet-container .dash-spreadsheet th:first-child{
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.dash-spreadsheet-container .dash-spreadsheet th:last-child{
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* =========================================================
   3) FILAS DEL DATATABLE (GLOBAL)
   ========================================================= */
.dash-spreadsheet-container .dash-spreadsheet tr{
  position: relative;
  isolation: isolate;
}

.dash-spreadsheet-container .dash-spreadsheet tr > td{
  position: relative;
  z-index: 2;
  background: transparent;
  background-clip: padding-box;
}

.dash-spreadsheet-container .dash-spreadsheet tr::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--row-radius);
  pointer-events: none;
  z-index: 0;
  background: var(--row-base-even);
}

.dash-spreadsheet-container .dash-spreadsheet tr:nth-child(odd)::before{
  background: var(--row-base-odd);
}

.dash-spreadsheet-container .dash-spreadsheet tr:nth-child(even)::before{
  background: var(--row-base-even);
}

.dash-spreadsheet-container .dash-spreadsheet tr:hover::before{
  background: var(--row-hover-base);
}

.dash-spreadsheet-container .dash-spreadsheet tr:hover::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--row-radius);
  pointer-events: none;
  z-index: 3;
  background: var(--row-hover-overlay);
}

.dash-spreadsheet-container .dash-spreadsheet tr td:first-child{
  border-top-left-radius: var(--row-radius);
  border-bottom-left-radius: var(--row-radius);
}

.dash-spreadsheet-container .dash-spreadsheet tr td:last-child{
  border-top-right-radius: var(--row-radius);
  border-bottom-right-radius: var(--row-radius);
}

/* =========================================================
   4) ESTADOS DE CELDA
   ========================================================= */
.dash-spreadsheet-container .dash-spreadsheet td.dash-cell.focused{
  background-color: rgba(255,255,255,0.95) !important;
}

.dash-spreadsheet-container .dash-spreadsheet td.dash-cell.focused .dash-cell-value{
  color: #000 !important;
}

/* por defecto global: blanco */
.dash-spreadsheet-container .dash-spreadsheet tr:hover td .dash-cell-value{
  color: #ffffff !important;
}

/* =========================================================
   5) ZEBRA GLOBAL PARA TABLAS HTML
   ========================================================= */
table tr:nth-child(odd){
  background-color: rgba(6, 190, 132, 0.08);
  border-top: 3px solid transparent;
}

table tr:nth-child(even){
  background-color: rgba(6, 190, 132, 0.04);
  border-top: 3px solid transparent;
}

table tr:nth-child(odd) td:first-child,
table tr:nth-child(even) td:first-child{
  border-top-left-radius: 11px;
  border-bottom-left-radius: 11px;
}

table tr:nth-child(odd) td:last-child,
table tr:nth-child(even) td:last-child{
  border-top-right-radius: 11px;
  border-bottom-right-radius: 11px;
}

/* =========================================================
   6) CARDS DE PARTIDOS CONFIRMADOS
   ========================================================= */
#partidos-confirmados-container .hover-effect{
  transition: transform 0.3s ease !important;
}

#partidos-confirmados-container .hover-effect:hover{
  transform: scale(1.08) !important;
}

/* =========================================================
   7) DROPDOWNS DE DASH
   ========================================================= */
.Select-control,
.Select-multi-value-wrapper,
.Select-value,
.Select-placeholder{
  color: grey !important;
}

.VirtualizedSelectOption,
.Select-option{
  color: grey !important;
}

.Select-value-label{
  color: black !important;
}

/* =========================================================
   8) OPT-OUT
   ========================================================= */
.no-layer .dash-spreadsheet tr::before{
  content: none !important;
}

.no-layer .dash-spreadsheet tr:hover::after{
  content: none !important;
}

/* =========================================================
   9) SCOPE PROPIO · TABLE CONFIRMAR
   ========================================================= */
.table-confirmar-scope{
  width: 100%;
  min-width: 0;
}

.table-confirmar-scope .dash-table-container{
  width: 100%;
  min-width: 0;
}

.table-confirmar-scope .dash-spreadsheet-container{
  width: 100%;
  min-width: 0;
}

.table-confirmar-scope .dash-spreadsheet-inner{
  overflow-x: auto !important;
  overflow-y: auto !important;
}

/* Mantener comportamiento natural sin romper la pintura de fondos */
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet{
  min-width: max-content;
  width: 100%;
  table-layout: auto !important;
}

/* =========================================================
   10) HEADER MÁS GRANDE
   ========================================================= */
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet th{
  font-size: 15px !important;
  font-weight: 800 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  white-space: nowrap !important;
}

/* =========================================================
   11) BODY MÁS GRANDE Y EN NEGRITA
   ========================================================= */
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet td{
  font-size: 15px !important;
  font-weight: 800 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet td .dash-cell-value{
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 20px !important;
}

.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet tr{
  min-height: 40px;
}

/* =========================================================
   12) CHECKBOX MÁS GRANDE
   ========================================================= */
.table-confirmar-scope .dash-table-container input[type="checkbox"]{
  transform: scale(1.75);
  transform-origin: center center;
  cursor: pointer;
}

/* Primera columna: selector */
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet th:first-child,
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet td:first-child{
  min-width: 50px !important;
  width: 50px !important;
  max-width: 50px !important;
  text-align: center !important;
}

/* =========================================================
   13) ANCHOS SOLO DE COLUMNAS PEQUEÑAS
   ========================================================= */

/* Fed */
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet th:nth-child(2),
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet td:nth-child(2){
  min-width: 48px;
  width: 48px;
  max-width: 48px;
  text-align: center !important;
}

/* T.J. */
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet th:nth-child(3),
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet td:nth-child(3){
  min-width: 62px;
  width: 62px;
  max-width: 62px;
  text-align: center !important;
}

/* Edad */
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet th:nth-child(4),
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet td:nth-child(4){
  min-width: 62px;
  width: 62px;
  max-width: 62px;
  text-align: center !important;
}

/* Escudos */
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet th:nth-child(7),
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet td:nth-child(7),
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet th:nth-child(10),
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet td:nth-child(10){
  min-width: 50px;
  width: 50px;
  max-width: 50px;
  text-align: center !important;
}

/* NEW */
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet th:nth-child(9),
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet td:nth-child(9),
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet th:nth-child(12),
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet td:nth-child(12){
  min-width: 62px;
  width: 62px;
  max-width: 62px;
  text-align: center !important;
}

/* Fecha */
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet th:nth-child(13),
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet td:nth-child(13){
  min-width: 110px;
}

/* Hora */
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet th:nth-child(14),
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet td:nth-child(14){
  min-width: 78px;
}

/* =========================================================
   14) COLUMNAS DE CONTENIDO
   ========================================================= */
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet th:nth-child(5),
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet td:nth-child(5){
  min-width: 190px;
}

.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet th:nth-child(6),
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet td:nth-child(6){
  min-width: 190px;
}

.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet th:nth-child(8),
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet td:nth-child(8){
  min-width: 200px;
}

.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet th:nth-child(11),
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet td:nth-child(11){
  min-width: 200px;
}

.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet th:nth-child(15),
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet td:nth-child(15){
  min-width: 300px;
}

/* =========================================================
   15) ICONOS E IMÁGENES
   ========================================================= */
.table-confirmar-scope .dash-cell img{
  max-height: 24px;
  width: auto;
  vertical-align: middle;
}

.table-confirmar-scope .dash-cell p{
  margin: 0 !important;
}

.table-confirmar-scope .dash-cell div{
  line-height: 20px;
}

/* =========================================================
   16) EVITAR EFECTOS RAROS
   ========================================================= */
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet tr,
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet td,
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet th{
  box-sizing: border-box;
}

.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet tr:hover{
  transform: none !important;
}

/* =========================================================
   17) HOVER SOLO EN TABLE CONFIRMAR: TEXTO NEGRO
   ========================================================= */
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet tr:hover td,
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet tr:hover td .dash-cell-value,
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet tr:hover td div,
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet tr:hover td span,
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet tr:hover td p,
.table-confirmar-scope .dash-spreadsheet-container .dash-spreadsheet tr:hover td strong{
  color: #000 !important;
}