/* =====================================================================
 * Vista del facilitador
 * ===================================================================== */

/* Tarjetas de cursos */
.tc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.tc-card { background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .15s, border-color .15s, box-shadow .15s; }
.tc-card:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--shadow); }
.tc-img { aspect-ratio: 16 / 7; background: var(--brand-50) center / cover no-repeat; position: relative; }
.tc-img .pill { position: absolute; top: .6rem; left: .6rem; }
.tc-body { padding: .9rem 1rem 1rem; display: grid; gap: .55rem; }
.tc-name { font-size: 1rem; line-height: 1.35; }
.tc-line { display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--ink-2); }
.tc-line small { white-space: nowrap; }
.tc-chips { display: flex; flex-wrap: wrap; gap: .35rem; }

/* Barra de avance compacta */
.tc-bar { flex: 1; min-width: 50px; height: 8px; border-radius: 99px; background: var(--bg); overflow: hidden; display: block; }
.tc-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), #0a9be0); }
.tc-pct { font-size: .8rem; min-width: 2.6rem; text-align: right; }
.tc-progress { display: flex; align-items: center; gap: .5rem; }

/* Cabecera del curso */
.tc-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.tc-count { display: inline-block; background: var(--bg); color: var(--ink-2); border-radius: 99px; padding: .05rem .5rem; font-size: .74rem; margin-left: .25rem; }
.tc-count.warn { background: var(--accent); color: #fff; }
.tc-filters { margin: .9rem 0 1rem; }
.chip small { opacity: .7; margin-left: .15rem; }
.tc-select { padding: .7rem .9rem; border-radius: 12px; border: 1.5px solid var(--line); font: inherit; background: var(--card); color: var(--ink); max-width: 260px; }

/* Tablas */
.trow.tcp { grid-template-columns: minmax(0, 2.2fr) 1.2fr .9fr .5fr 84px; }
.trow.tcp.off { opacity: .55; }
.trow.tca { grid-template-columns: minmax(0, 2.4fr) .6fr 1fr 90px; }
.trow.tcx { grid-template-columns: minmax(0, 2fr) 1.4fr .7fr; }
.trow.tcf { grid-template-columns: minmax(0, 3fr) .8fr 100px; }
.trow.tcs { grid-template-columns: minmax(0, 2fr) 1fr .8fr .8fr; }
button.trow.tcs:disabled { cursor: default; opacity: .6; }
.tc-row-actions { display: flex; justify-content: flex-end; gap: .1rem; }
.tc-row-actions .icon-btn:hover { background: var(--brand-50); color: var(--brand); }
.tc-late { color: #b45309; font-weight: 700; }
.tc-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-50); display: grid; place-items: center; flex: none; }
.tc-go { color: var(--brand); font-weight: 700; font-size: .85rem; text-align: right; }
.tc-actlist .thead { background: var(--bg); }
.tc-bulk { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--warn-50); border-radius: 14px; padding: .75rem 1rem; margin-bottom: 1rem; font-weight: 600; font-size: .9rem; }

/* Avance de un participante */
.tc-prog-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .75rem; }
.tc-sec { margin: 1.1rem 0 .4rem; font-size: .85rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.tc-sec small { color: var(--ink-3); }
.tc-acts { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.tc-acts li { display: grid; grid-template-columns: 24px 1fr auto; gap: .5rem; align-items: center; padding: .45rem .6rem; border-radius: 10px; font-size: .9rem; }
.tc-acts li.done { background: var(--ok-50); }
.tc-acts li.fail { background: var(--danger-50); }
.tc-acts small { color: var(--ink-3); }

/* Calificar */
.tc-intro { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: .75rem 1rem; margin-bottom: .5rem; }
.tc-intro summary { cursor: pointer; font-weight: 700; color: var(--brand); }
.tc-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 1.25rem; align-items: start; }
.tc-sub { min-width: 0; }
.tc-text { background: var(--bg); border-radius: 12px; padding: .75rem 1rem; max-height: 50vh; overflow: auto; }
.tc-preview { display: block; max-width: 100%; border-radius: 12px; border: 1px solid var(--line); margin-top: .75rem; }
.tc-form { position: sticky; top: 0; }
.tc-gradebox { display: flex; align-items: center; gap: .5rem; }
.tc-gradebox input { font-size: 1.4rem; font-weight: 800; max-width: 140px; }
.tc-gradebox span { font-weight: 700; color: var(--ink-2); }
.tc-quick { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .5rem; }
.tc-form .modal-actions { flex-wrap: wrap; }
.tc-form .modal-actions small { opacity: .75; }

@media (max-width: 760px) {
  .tc-grade { grid-template-columns: 1fr; }
  .tc-form { position: static; }
  .trow.tcp { grid-template-columns: minmax(0, 1.6fr) 1fr 70px; }
  .trow.tca { grid-template-columns: minmax(0, 2fr) 1fr; }
  .trow.tca .tc-go { display: none; }
  .trow.tcx { grid-template-columns: minmax(0, 1.5fr) 1fr; }
  .trow.tcf { grid-template-columns: minmax(0, 2fr) 90px; }
  .trow.tcs { grid-template-columns: minmax(0, 1.6fr) 1fr .8fr; }
}
.tc-assign-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tc-check { display: flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--ink-2); font-weight: 600; cursor: pointer; }
.tc-check input { width: 18px; height: 18px; accent-color: var(--brand); }
@media (max-width: 760px) {
  .trow.tcp { grid-template-columns: minmax(0, 1fr) auto; row-gap: .45rem; }
  .trow.tcp .tc-progress { grid-column: 1 / -1; order: 3; padding-left: calc(36px + .75rem); }
  .trow.thead.tcp { display: none; }
}

/* Celular: en la tabla de entregas el nombre usa el espacio libre y puede ocupar dos líneas (no se corta en «Ana Pé…») */
@media (max-width: 520px) {
  .trow.tcs { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
  .trow.tcs .person b { white-space: normal; overflow-wrap: anywhere; }
}