/*
 * gradecalc.css — estilos del motor 'grade_calc' (Calculadora de Promedios).
 * Tokens de la plataforma; la tabla es un grid de 4 columnas que colapsa en móvil.
 */
.gc-wrap { display: grid; gap: 1rem; max-width: 780px; margin: 0 auto; }

.gc-target { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .8rem 1rem; border: 1px solid var(--line, rgba(0,0,0,.08)); border-radius: 12px; background: rgba(10,180,120,.05); }
.gc-label { font-weight: 650; }
.gc-target-input { width: 5.5rem; padding: .45rem .6rem; border: 1px solid var(--line, rgba(0,0,0,.14)); border-radius: 8px; background: var(--surface, #fff); color: var(--ink, #17181c); font: inherit; }

.gc-table { display: grid; gap: .4rem; }
.gc-row { display: grid; grid-template-columns: minmax(0, 1fr) 6.2rem 7.2rem 2.4rem; gap: .5rem; align-items: center; }
.gc-row-head .gc-th { font-weight: 650; }
.gc-th { padding: 0 .2rem; }
.gc-name, .gc-num { padding: .5rem .6rem; border: 1px solid var(--line, rgba(0,0,0,.14)); border-radius: 8px; background: var(--surface, #fff); color: var(--ink, #17181c); font: inherit; min-width: 0; }
.gc-num { text-align: right; }
.gc-del { width: 2.2rem; height: 2.2rem; border: 1px solid var(--line, rgba(0,0,0,.14)); border-radius: 8px; background: transparent; color: var(--danger, #b3261e); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.gc-del:hover { border-color: var(--danger, #b3261e); background: rgba(179, 38, 30, .07); }

.gc-readout { display: grid; gap: .35rem; padding: 1rem 1.1rem; border: 1px solid var(--line, rgba(0,0,0,.1)); border-left: 5px solid var(--line, rgba(0,0,0,.2)); border-radius: 12px; background: var(--surface, #fff); }
.gc-readout .gc-big { margin: 0; font-size: 1.2rem; font-weight: 700; }
.gc-big.is-good { color: var(--ok, #067a52); }
.gc-big.is-mid { color: var(--warn, #b45309); }
.gc-big.is-bad { color: var(--danger, #b3261e); }
.gc-readout:has(.is-good) { border-left-color: var(--ok, #0ab478); }
.gc-readout:has(.is-mid) { border-left-color: var(--warn, #f59e0b); }
.gc-readout:has(.is-bad) { border-left-color: var(--danger, #e11d48); }
.gc-detail { margin: 0; line-height: 1.5; }

.gc-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.gc-msg { min-height: 1.2em; margin: 0; }

@media (max-width: 640px) {
    .gc-row { grid-template-columns: minmax(0, 1fr) 4.6rem 5.6rem 2.2rem; }
    .gc-name { grid-column: 1 / -1; }
}