/**
 * css/views/corregir.css
 * Estilos de la grilla de Corregir.
 *
 * =====================================================================
 * PERSONALIZACIÓN DE ANCHOS — todo centralizado acá arriba.
 * Para cambiar cualquier ancho de columna, tocar SOLO estas variables,
 * nunca los valores sueltos más abajo en el archivo.
 *
 * OJO: --grid-col-alumno-w y --grid-col-obs-w son solo el valor
 * INICIAL — el docente puede redimensionar esas dos columnas
 * arrastrando el borde derecho del header (ver .col-resize-handle
 * más abajo), y grid.js pisa esta variable en tiempo real.
 * =====================================================================
 */
:root{
  --grid-col-alumno-w:  180px;  /* ancho inicial de "Estudiante" (redimensionable) */
  --grid-col-cell-w:     56px;  /* columnas de ítems tipo "puntos" (fijo) */
  --grid-col-select-w:  110px;  /* columnas de ítems tipo "evidencia" (fijo) */
  --grid-col-total-w:    56px;  /* columna Total (fijo) */
  --grid-col-franja-w:  118px;  /* columna Franja (fijo) */
  --grid-col-obs-w:     220px;  /* ancho inicial de "Observaciones" (redimensionable) */
}

/* =====================================================================
 * SELECTOR DE EVALUACIÓN UNIFICADO — título editable + desplegable para
 * cambiar de evaluación, en un solo control (reemplaza al <select>
 * nativo sin estilo + input aparte que había antes).
 * ===================================================================== */
.eval-switcher{ position:relative; display:flex; align-items:stretch; flex:1 1 240px; min-width:200px; }
.eval-switcher .eval-title-input{
  flex:1; min-width:0; height:40px; background:var(--card); border:1px solid var(--line); border-right:none;
  border-radius:11px 0 0 11px; padding:0 12px;
  font-family:var(--font-d); font-size:.86rem; font-weight:700; color:var(--text); outline:none;
}
.eval-switcher .eval-title-input:focus{ border-color:var(--accent); }
.eval-switcher .eval-title-input:disabled{ color:var(--faint); }
.eval-switch-btn{
  flex:0 0 auto; width:34px; height:40px; background:var(--card); border:1px solid var(--line);
  border-radius:0 11px 11px 0; color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:.7rem;
}
.eval-switch-btn:hover{ color:var(--text); border-color:var(--accent); }
.eval-switch-btn[aria-expanded="true"]{ color:var(--accent-2); border-color:var(--accent); }
.eval-switch-btn:disabled{ opacity:.4; }
.eval-switch-menu{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:5px; display:flex; flex-direction:column; gap:1px;
  max-height:260px; overflow-y:auto;
}
.eval-switch-menu button{
  display:flex; align-items:center; gap:8px; text-align:left; font-size:.8rem; font-weight:500; color:var(--text);
  padding:8px 10px; border-radius:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.eval-switch-menu button:hover{ background:var(--card-2); }
.eval-switch-menu button.activa{ color:var(--accent-2); font-weight:700; }
.eval-switch-menu button .check{ flex:0 0 14px; opacity:0; }
.eval-switch-menu button.activa .check{ opacity:1; }
.eval-switch-menu .vacio{ padding:10px; font-size:.76rem; color:var(--faint); }

/* =====================================================================
 * MOSTRAR / OCULTAR COLUMNAS — Franja y Observaciones vienen por
 * defecto visibles; el docente las apaga si le ocupan espacio de más.
 * Es CSS puro sobre el contenedor: grid.js no sabe nada de esto.
 * ===================================================================== */
.col-vis-switcher{ position:relative; }
.col-vis-menu{
  position:absolute; top:calc(100% + 4px); right:0; z-index:20;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:8px; display:flex; flex-direction:column; gap:2px; min-width:180px;
}
.col-vis-menu label{ display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--text); padding:6px 8px; border-radius:7px; cursor:pointer; }
.col-vis-menu label:hover{ background:var(--card-2); }
.col-vis-menu input[type=checkbox]{ accent-color:var(--accent); width:15px; height:15px; }
[data-grid-root].ocultar-franja .col-franja{ display:none; }
[data-grid-root].ocultar-obs .col-obs{ display:none; }

/* =====================================================================
 * PANEL DE AYUDA COLAPSABLE — <details> nativo: cerrado por defecto en
 * cada visita a la pestaña, sin necesidad de JS para el toggle.
 * ===================================================================== */
.grid-hint-details{ margin-bottom:10px; }
.grid-hint-details summary{
  display:flex; align-items:center; gap:6px; cursor:pointer; list-style:none;
  font-size:.74rem; color:var(--muted); font-weight:600; padding:8px 2px; user-select:none;
}
.grid-hint-details summary:hover{ color:var(--text); }
.grid-hint-details summary::-webkit-details-marker{ display:none; }
.grid-hint-details summary::before{ content:'▸'; font-size:.65rem; color:var(--faint); }
.grid-hint-details[open] summary::before{ content:'▾'; }
.grid-hint-details .grid-hint{ margin-top:6px; }

.grid-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.grid-stats{ margin-left:auto; display:flex; gap:10px; font-family:var(--font-m); font-size:.7rem; color:var(--muted); flex-wrap:wrap; }
.grid-stats b{ color:var(--text); }
.add-item-btn{
  height:32px; padding:0 12px; border-radius:999px; background:var(--card); border:1.5px dashed var(--line);
  color:var(--muted); font-size:.74rem; font-weight:600;
}
.add-item-btn:hover{ color:var(--accent-2); border-color:var(--accent); background:var(--accent-bg); border-style:solid; }

.grid-wrap{
  overflow:auto; max-height:76vh; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--card); -webkit-overflow-scrolling:touch;
  width:100%;
  scrollbar-width: thin;                    /* Firefox */
  scrollbar-color: var(--line) transparent; /* Firefox */
}
table.corr-grid{ border-collapse:separate; border-spacing:0; font-family:var(--font-m); width:100%; min-width:100%; }
.corr-grid th,.corr-grid td{
  border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  white-space:nowrap; padding:0;
}
.corr-grid thead th{ position:sticky; top:0; z-index:3; background:var(--card-2); padding:7px 8px; text-align:center; vertical-align:bottom; }
.corr-grid th.col-alumno,.corr-grid td.col-alumno{
  position:sticky; left:0; z-index:2; background:var(--card); text-align:left;
  width:var(--grid-col-alumno-w); min-width:var(--grid-col-alumno-w); max-width:var(--grid-col-alumno-w);
}
.corr-grid thead th.col-alumno{ z-index:4; background:var(--card-2); }
.corr-grid th.col-total{ width:var(--grid-col-total-w); }
.col-total-max{ display:block; font-size:.6rem; color:var(--faint); font-weight:500; margin-top:1px; }
.corr-grid th.col-franja{ width:var(--grid-col-franja-w); }
.corr-grid th.col-obs{ width:var(--grid-col-obs-w); }
.corr-grid tbody tr:nth-child(even) td{ background:rgba(148,163,205,.025); }
.corr-grid tbody tr:nth-child(even) td.col-alumno{ background:var(--card); }
.corr-grid tbody tr.ausente td{ opacity:.42; }

.alumno-cell{ display:flex; align-items:center; gap:8px; padding:6px 10px 6px 12px; min-width:0; }
.alumno-cell .ac-info{ min-width:0; flex:1; }
.alumno-cell .ac-nom{ font-family:var(--font-b); font-size:.74rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.alumno-cell .ac-status{ font-size:.6rem; font-family:var(--font-m); color:var(--faint); }
.alumno-cell .ac-aus{
  flex:0 0 auto; width:22px; height:22px; border-radius:7px; background:var(--card-2);
  border:1px solid var(--line); font-size:.6rem; color:var(--faint);
}
.corr-grid tbody tr.ausente .alumno-cell .ac-aus{ background:var(--rojo-bg); color:var(--rojo); border-color:rgba(248,113,113,.3); }

.cell-input{
  width:var(--grid-col-cell-w); height:38px; background:none; border:1.5px solid transparent; text-align:center;
  font-family:var(--font-m); font-size:.8rem; color:var(--text); outline:none;
}
.cell-input::placeholder{ color:var(--faint); }
.cell-input::-webkit-outer-spin-button,
.cell-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.cell-input[type=number]{ -moz-appearance:textfield; }
.cell-input:focus{ border-color:var(--accent); background:var(--accent-bg); }
.cell-input.empty{ color:var(--faint); }
.cell-input.error{ color:var(--rojo); background:var(--rojo-bg); }
select.cell-input{ width:var(--grid-col-select-w); font-size:.68rem; text-align:center; text-align-last:center; padding:0 2px; }

.col-total .cell-val{
  display:flex; align-items:center; justify-content:center; height:38px; width:var(--grid-col-total-w);
  font-family:var(--font-d); font-weight:700; font-size:.82rem;
}
.col-franja{ width:var(--grid-col-franja-w); text-align:center; }
.franja-chip{
  display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:999px;
  font-size:.62rem; font-weight:700; white-space:nowrap;
}
.col-obs{ min-width:0; }
.obs-input{
  width:var(--grid-col-obs-w); height:34px; margin:2px 6px; background:var(--card-2); border:1px solid var(--line);
  border-radius:8px; padding:0 9px; font-family:var(--font-b); font-size:.72rem; color:var(--text); outline:none;
}
.obs-input:focus{ border-color:var(--accent); }
.obs-input::placeholder{ color:var(--faint); }

/* =====================================================================
 * REDIMENSIONAR COLUMNAS (Estudiante / Observaciones)
 * Franja invisible de 8px sobre el borde derecho del header; al pasar
 * el mouse se ve una línea de acento, como en una hoja de cálculo.
 * ===================================================================== */
.col-resize-handle{
  position:absolute; top:0; right:-4px; bottom:0; width:8px;
  cursor:col-resize; z-index:6;
}
.col-resize-handle::after{
  content:''; position:absolute; top:0; bottom:0; left:3px; width:2px;
  background:transparent; border-radius:2px; transition:background-color .12s;
}
.col-resize-handle:hover::after{ background:var(--accent); }

/* =====================================================================
 * EDICIÓN INLINE DE COLUMNAS (ítems) — directo desde el header de la
 * grilla, sin salir a un editor aparte.
 * ===================================================================== */
.item-th{ padding:6px 6px 8px; vertical-align:top; position:relative; }
.item-th.drag-over{ background:var(--accent-bg); }
.item-th.menu-open{ z-index:7; } /* que el menú abierto quede por encima de columnas vecinas */
.item-th-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:3px; }
.item-drag-handle{
  cursor:grab; color:var(--faint); font-size:.8rem; line-height:1; padding:2px 3px;
  border-radius:4px; user-select:none; opacity:.55; transition:opacity .12s, color .12s, background-color .12s;
}
.item-th:hover .item-drag-handle{ opacity:1; }
.item-drag-handle:hover{ color:var(--text); background:var(--card); }
.item-drag-handle:active{ cursor:grabbing; }

.item-menu-btn{
  width:18px; height:18px; border-radius:5px; color:var(--faint); font-size:.75rem;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  opacity:.55; transition:opacity .12s, color .12s, background-color .12s;
}
.item-th:hover .item-menu-btn, .item-menu-btn[aria-expanded="true"]{ opacity:1; }
.item-menu-btn:hover, .item-menu-btn[aria-expanded="true"]{ color:var(--text); background:var(--card); }

.item-menu{
  position:absolute; top:100%; right:0; margin-top:4px; z-index:20;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:5px; display:flex; flex-direction:column; gap:1px;
  min-width:190px; white-space:nowrap;
}
.item-menu button{
  text-align:left; font-size:.74rem; font-weight:500; color:var(--text);
  padding:7px 9px; border-radius:7px;
}
.item-menu button:hover{ background:var(--card-2); }
.item-menu button.item-menu-danger{ color:var(--rojo); }
.item-menu button.item-menu-danger:hover{ background:var(--rojo-bg); }

.it-label-input{
  width:100%; background:none; border:1.5px solid transparent; border-radius:6px;
  padding:3px 4px; text-align:center; font-family:var(--font-b); font-size:.72rem; font-weight:700;
  color:var(--text); outline:none; margin-bottom:2px;
}
.it-label-input:hover{ border-color:var(--line); }
.it-label-input:focus{ border-color:var(--accent); background:var(--accent-bg); }

.it-peso-row{ display:flex; align-items:center; justify-content:center; gap:3px; }
.it-peso-input{
  width:34px; background:none; border:1.5px solid transparent; border-radius:6px;
  padding:2px 2px; text-align:right; font-family:var(--font-m); font-size:.64rem;
  color:var(--faint); outline:none;
}
.it-peso-input::-webkit-outer-spin-button,
.it-peso-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.it-peso-input[type=number]{ -moz-appearance:textfield; }
.it-peso-input:hover{ border-color:var(--line); }
.it-peso-input:focus{ border-color:var(--accent); background:var(--accent-bg); color:var(--text); width:44px; }
.it-peso-unit{ font-size:.6rem; color:var(--faint); font-family:var(--font-m); }
.it-peso-badge{ font-size:.62rem; color:var(--accent-2); font-family:var(--font-m); }

.peso-resumen-inline{
  display:flex; align-items:center; gap:8px; font-size:.74rem; font-weight:600;
  padding:5px 10px; border-radius:999px; border:1px solid transparent;
}
.peso-resumen-inline.ok{ background:var(--verde-bg); color:var(--verde); border-color:rgba(52,211,153,.25); }
.peso-resumen-inline.warn{ background:var(--rojo-bg); color:var(--rojo); border-color:rgba(248,113,113,.25); }
.pr-btn-inline{ font-size:.68rem; font-weight:700; color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* =====================================================================
 * SCROLLBAR — versión "premium" con la identidad de Insight, en vez
 * del scrollbar nativo del navegador. Usa las mismas variables de
 * tema, así que se adapta solo entre modo claro y oscuro.
 * ===================================================================== */
.grid-wrap::-webkit-scrollbar{ width:11px; height:11px; }
.grid-wrap::-webkit-scrollbar-track{ background:transparent; }
.grid-wrap::-webkit-scrollbar-corner{ background:transparent; }
.grid-wrap::-webkit-scrollbar-thumb{
  background-color:var(--line);
  border-radius:999px;
  border:3px solid var(--card);
  background-clip:padding-box;
}
.grid-wrap::-webkit-scrollbar-thumb:hover{
  background-color:var(--accent);
  border-color:var(--card);
}