/**
 * TABLES DATA STYLES - Club Atlético Santa Rosa
 * Estilos consolidados para tablas de datos, reportes y grillas
 */

/* ===========================
   ESTILOS GENERALES DE TABLA
   =========================== */

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===========================
   CELDAS DE TABLA
   =========================== */

.table-cell-center {
  text-align: center !important;
}

.table-cell-right {
  text-align: right !important;
}

.table-cell-left {
  text-align: left !important;
}

/* ===========================
   ANCHOS DE COLUMNA
   =========================== */

.table-col-width-20 {
  width: 20% !important;
}

.table-col-width-35 {
  width: 35% !important;
}

.table-col-width-50 {
  width: 50% !important;
}

/* ===========================
   ESTILOS DE ENCABEZADO
   =========================== */

.table-header-large {
  font-size: 1.3rem !important;
}

.table-header-bold {
  font-weight: 600 !important;
}

/* ===========================
   ESTILOS DE TOTALES
   =========================== */

.table-total-value {
  height: 35px;
  font-size: 18px;
  color: #f00;
  font-weight: bold;
}

.table-total-box {
  text-align: center;
  padding: 10px;
}

/* ===========================
   FILAS CON ESTADOS/COLORES
   =========================== */

.table-row-success {
  background-color: #d4edda !important;
}

.table-row-warning {
  background-color: #fff3cd !important;
}

.table-row-danger {
  background-color: #f8d7da !important;
}

.table-row-info {
  background-color: #d1ecf1 !important;
}

/* ===========================
   ICONOS EN TABLAS
   =========================== */

.table-icon-large {
  cursor: pointer;
  font-size: 28px;
  display: inline-table;
}

.table-icon-action {
  cursor: pointer;
  margin-right: 10px;
}

/* ===========================
   ESTILOS RESPONSIVE PARA TABLAS
   =========================== */

@media (max-width: 768px) {
  .table-responsive {
    border: 0;
  }

  .table-responsive table {
    font-size: 12px;
  }

  .table-responsive th,
  .table-responsive td {
    padding: 5px !important;
  }

  .table-total-value {
    font-size: 16px;
    height: auto;
  }

  .table-icon-large {
    font-size: 20px;
  }
}