/* =====================================================================================================================
   fechas-instructor.css — 1.10.50 · EL INSTRUCTOR A LA VISTA EN LA VITRINA (agente LQ).
   La «bolita» del instructor (su foto o su inicial, el avatar de toda la plataforma: .zv-avatar de tokens.css) con su
   nombre y, donde cabe, su profesión: en la tabla de fechas (fechas.php), en las próximas fechas de la ficha
   (partials/curso-fechas.php), en las tarjetas de Presenciales y en vivo y en el resumen de «Solicita tu cupo».
   Se carga DESPUÉS de presenciales.css / curso-pagina.css / inscripcion.css: con la misma especificidad gana esta hoja,
   y así no se toca ninguna de ellas. Móvil primero. Sin puntos de color ni franjas de acento.
   ===================================================================================================================== */

.zv-instr { display: inline-flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; vertical-align: middle; text-align: left; }
.zv-instr .zv-avatar { flex: none; }
.zv-instr__av--pc { background: #E6EBF1 !important; color: #96A1B3 !important; }
.zv-instr__tx { display: grid; min-width: 0; line-height: 1.25; }
.zv-instr__tx b { font-size: 13.5px; font-weight: 700; color: var(--vi-tinta, #13203A); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zv-instr__tx small { font-size: 11.5px; font-weight: 500; color: var(--vi-gris, #6E7A8F); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zv-instr__etq { font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--vi-gris-2, #96A1B3) !important; }
.zv-instr__tx a { color: inherit; text-decoration: none; }
.zv-instr__tx a:hover { color: var(--vi-azul-osc, #2F5DA8); text-decoration: underline; text-underline-offset: 2px; }
.zv-instr--pc .zv-instr__tx b { font-weight: 600; color: var(--vi-gris-3, #4A5668); }

/* ------------------------------------------------------------------ fechas.php: la columna INSTRUCTOR */
.vi-f-instr { min-width: 190px; max-width: 260px; }
.vi-f-instr .zv-instr { max-width: 100%; }
@media (max-width: 1023px) {
  /* En la tarjeta de cada fecha (tableta y teléfono), el instructor va debajo del horario, a todo lo ancho. */
  .vi-tabla tbody tr {
    grid-template-rows: auto auto auto auto auto 1fr;
    grid-template-areas: "fecha mod" "lugar lugar" "hora hora" "instr instr" "cupo precio" "act act";
  }
  .vi-tabla .vi-f-instr { grid-area: instr; min-width: 0; max-width: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid #EEF1F5; }
}

/* ------------------------------------------------------------------ la ficha de la capacitación: próximas fechas */
.ve-fecha__instr { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; line-height: 1.3; color: var(--ve-gris2, #6E7A8F); }
.ve-fecha__instr .zv-instr__tx b { font-size: 12px; font-weight: 600; color: var(--ve-texto, #33415A); }
.ve-fecha__instr .zv-instr { gap: 6px; }
.ve-fecha__instr.zv-instr--pc .zv-instr__tx b { font-weight: 500; }
/* el enlace del nombre queda por encima del «toda la fila se puede tocar» (::after de .ve-fecha__ir) */
.ve-fecha__instr a { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ Presenciales y en vivo: las tarjetas */
.vi-cf { grid-template-rows: auto; }
.vi-cf__instr { grid-column: 1 / -1; margin: -2px 0 4px; }
.vi-cf__instr .zv-instr__tx b { font-size: 12.5px; font-weight: 600; color: var(--vi-gris-3, #4A5668); }

/* ------------------------------------------------------------------ Solicita tu cupo: el resumen de la fecha */
.vj-res__instr { display: flex; align-items: center; gap: 12px; margin: 13px 0 0; padding-top: 13px; border-top: 1px solid #EEF1F5; }
.vj-res__instr .zv-instr__tx b { font-size: 14.5px; }
.vj-res__instr .zv-instr__tx small { font-size: 12.5px; white-space: normal; }
@media (max-width: 599px) {
  .vj-res__instr { margin-top: 10px; padding-top: 10px; }
  .vj-res__instr .zv-instr__tx b { font-size: 13.5px; }
}