/* Ajustes finales de botones, tarjetas y transiciones. */

/* ---------------- Pulido moderno ---------------- */

.view-anim { animation: viewIn 0.28s ease; }
@keyframes viewIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.btn { transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn-primary { background: var(--blue); box-shadow: none; }
.btn-primary:hover { background: #2568bd; }
.btn-teal { background: var(--teal); box-shadow: none; }
.btn-teal:hover { background: #4d8ad1; }
.btn-redsolid { box-shadow: none; }

.sidebar { background: var(--bg-1); }
.nav-link { transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease; }
.nav-link:hover { transform: translateY(-1px); }
.nav-link.active { background: var(--teal); box-shadow: none; }

.card {
  background: var(--bg-1);
  transition: border-color 0.2s ease;
}
.stat-card { transition: transform 0.18s ease, border-color 0.18s ease; }
.stat-card:hover { transform: translateY(-2px); border-color: var(--border-strong, rgba(255,255,255,0.16)); }
.stat-card .stat-value {
  color: var(--text);
}

.progress-bar-fill { background: var(--blue); transition: width 0.5s ease; }

table.data-table td { transition: background 0.12s ease; }
.rubric-card { transition: border-color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease; }
.rubric-card:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); }

.chk-box.checked { box-shadow: none; }
.struct-card { transition: transform 0.18s ease, border-color 0.18s ease; }
.struct-card:hover { transform: translateY(-2px); border-color: var(--border-strong, rgba(255,255,255,0.16)); }

.field input, .field select, .field textarea, .toolbar input, .toolbar select, .group-search input {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus,
.toolbar input:focus, .toolbar select:focus, .group-search input:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim);
}

.activity-row { transition: background 0.12s ease; border-radius: 8px; }
.activity-row:hover { background: rgba(255, 255, 255, 0.025); }

::-webkit-scrollbar-thumb { background: var(--bg-3); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Accesibilidad: contorno visible al navegar con teclado. */
.btn:focus-visible, .nav-link:focus-visible, .chk-box:focus-visible, a:focus-visible,
button:focus-visible, [role="button"]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px;
}

/* Pantallas táctiles (en obra, muchas veces con guantes): zonas de toque más
   grandes sin cambiar el dibujo. La casilla crece hacia afuera con ::after. */
@media (pointer: coarse) {
  .btn { min-height: 42px; }
  .btn-small { min-height: 36px; }
  .nav-link { min-height: 44px; }
  .chk-box { position: relative; }
  .chk-box::after { content: ""; position: absolute; inset: -8px; }
  .field input, .field select, .toolbar input, .toolbar select { min-height: 42px; }
}