/*
 * Estilos del módulo "Mis Asistencias" (v2) — AUTOCONTENIDOS.
 *
 * Se replica el look de SD Eibar dentro del propio plugin. Para reutilizar las variables
 * globales del portal SIN romper nada, se usan ALIAS con nombre propio (--rz-*) que
 * referencian a las variables globales con un valor de respaldo. Así NO se redefine
 * --sd-eibar-* (evitando ciclos que invalidarían la variable para el CSS global).
 */

.rzlva-assists {
  /* Alias no recursivos: usa la global si existe; si no, el valor del club. */
  --rz-secondary: var(--sd-eibar-secondary, #00397B);
  --rz-primary:   var(--sd-eibar-primary, #005BEB);
  --rz-border:    var(--rzlv-border, #e8ecf3);
  --rz-card:      var(--rzlv-bg-card, #ffffff);
  --rz-soft:      var(--rzlv-bg-soft, #f7f9fc);
  --rz-muted:     var(--rzlv-text-muted, #6b7280);

  --gap: 18px;
  width: 100%;
}

/* ---- Título "Selecciona el año" ---- */
.rzlva-assists .rzlva-year-title {
  font-weight: 800;
  color: var(--rz-secondary);
}

/* ---- Pestañas de año ---- */
.rzlva-assists .rzlv-year-tabs,
.rzlva-assists .nav-pills.rzlv-year-tabs {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  background: var(--rz-soft);
  border: 1px solid var(--rz-border);
  border-radius: 999px;
  flex-wrap: wrap;
}
.rzlva-assists .rzlv-year-tabs .nav-link {
  border-radius: 999px !important;
  font-weight: 800;
  padding: 10px 14px;
  color: var(--rz-secondary);
}
.rzlva-assists .rzlv-year-tabs .nav-link:hover {
  background: rgba(0, 57, 123, .08);
}
.rzlva-assists .rzlv-year-tabs .nav-link.active {
  background: var(--rz-secondary) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
}

/* ---- Título "TOTAL" ---- */
.rzlva-assists #assists-summary > div:first-child {
  font-weight: 800;
  font-size: 18px;
  margin: 0 0 8px;
}

/* ---- Tarjetas de resumen ---- */
.rzlva-assists .assists-summary .summary-card {
  background: var(--rz-card);
  border: 1px solid var(--rz-border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 0 rgba(20, 23, 28, .02);
}
.rzlva-assists .assists-summary .summary-card > div:first-child {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--rz-muted);
}
.rzlva-assists #total-asistencias,
.rzlva-assists #total-cesiones,
.rzlva-assists #total-computo,
.rzlva-assists #total-porcentaje {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--rz-secondary);
}

/* ---- Tabla de criterios ---- */
.rzlva-assists .criteria-table {
  border-color: var(--rz-border);
  margin: 0;
}
.rzlva-assists .criteria-table thead th {
  background: var(--rz-secondary);
  color: #fff;
  border-color: var(--rz-secondary);
  font-weight: 700;
}
.rzlva-assists .criteria-table tbody th,
.rzlva-assists .criteria-table tbody td {
  vertical-align: middle;
  border-color: var(--rz-border);
}
.rzlva-assists .criteria-table tbody tr:nth-child(odd) td {
  background: #fafcff;
}

/* ---- Tabla del historial ---- */
.rzlva-assists .table-assists .table {
  background: var(--rz-card);
  border-color: var(--rz-border);
  border-radius: 12px;
  overflow: hidden;
}
.rzlva-assists .table-assists thead th {
  background: var(--rz-secondary);
  color: #fff;
  border-color: var(--rz-secondary);
  font-weight: 700;
}
.rzlva-assists .table-assists tbody th,
.rzlva-assists .table-assists tbody td {
  border-color: #eef2f8;
  vertical-align: middle;
}
.rzlva-assists .table-assists tbody tr:hover td {
  background: #f7faff;
}
.rzlva-assists .table-assists tbody td img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.rzlva-assists .td-center {
  text-align: center;
}

/* ---- Contenedor con scroll suave ---- */
.rzlva-assists .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}

/* ---- Encabezado "Historial…" ---- */
.rzlva-assists + h3,
.rzlva-assists h3 {
  margin: 16px 0 12px;
  font-weight: 800;
  letter-spacing: .2px;
  text-align: center;
}

/* ==========================================================================
 * RESPONSIVE
 * ========================================================================== */
@media (max-width: 768px) {
  .rzlva-assists { --gap: 12px; }

  .rzlva-assists .assists-summary .summary-card { margin-bottom: 10px; }
  .rzlva-assists .assists-summary .display-6 { font-size: 1.25rem; line-height: 1; margin: 0; }
  .rzlva-assists #total-asistencias,
  .rzlva-assists #total-cesiones,
  .rzlva-assists #total-computo,
  .rzlva-assists #total-porcentaje { font-size: 22px; }

  .rzlva-assists .table-responsive > table { min-width: 560px; }
  .rzlva-assists #assists-summary .summary-card[style*="max-width"] { max-width: 100% !important; }
}

@media (max-width: 400px) {
  .rzlva-assists .table-responsive > table { min-width: 520px; }
}

/* Aviso de andamiaje (solo visible si la vista aún no está activa). */
.rzlva-scaffold-notice {
  border: 1px solid #e0e6ef;
  border-radius: 12px;
  padding: 16px;
  background: #f8fafc;
}