/* Lo común del alumno y del panel: el diseño Tinciones del mazo del curso. */
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --crema: #f7f3ec;
  --papel: #fffdf9;
  --tinta: #241d2e;
  --tinta-suave: #6d6477;
  --linea: #dcd3cb;
  --violeta: #6a4a9e;
  --eosina: #d9607e;
  --coomassie: #35638f;
  --malaquita: #3b8c74;
  --safranina: #c98a2f;
  /* Versiones oscuras para texto pequeño sobre crema: los colorantes solos no dan contraste. */
  --eosina-texto: #a4304f;
  --malaquita-texto: #256b57;
  --safranina-texto: #8a5a12;
  --tipo: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --display: "Fraunces", Georgia, serif;
  --tinte: var(--violeta);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--tipo);
  font-size: 16px;
  line-height: 1.45;
}
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--display); font-variation-settings: "opsz" 96, "SOFT" 40; font-weight: 650; letter-spacing: -.015em; margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--violeta); outline-offset: 2px; }
sub, sup { font-size: .72em; line-height: 0; }

.t-violeta { --tinte: var(--violeta); }
.t-coomassie { --tinte: var(--coomassie); }
.t-eosina { --tinte: var(--eosina); }
.t-malaquita { --tinte: var(--malaquita); }
.t-safranina { --tinte: var(--safranina); }
.t-tinta { --tinte: var(--tinta); }

.boton {
  appearance: none;
  border: 2px solid transparent;
  border-radius: 999px;
  min-height: 50px;
  padding: 10px 24px;
  font-weight: 600;
  transition: background-color .14s, border-color .14s, transform .08s;
}
.boton:active:not(:disabled) { transform: translateY(1px); }
.boton:disabled { cursor: not-allowed; opacity: .55; }
.boton-principal { background: var(--violeta); color: #fff; }
.boton-principal:hover:not(:disabled) { background: #573b85; }
.boton-suave { background: transparent; border-color: var(--linea); color: var(--tinta); }
.boton-suave:hover:not(:disabled) { border-color: var(--tinta-suave); background: var(--papel); }
.boton-ancho { width: 100%; }

.aviso { margin: 0; padding: 12px 14px; border-radius: 10px; font-size: 15px; }
.aviso-error { background: color-mix(in srgb, var(--eosina) 14%, var(--papel)); color: var(--eosina-texto); }
.aviso-listo { background: color-mix(in srgb, var(--malaquita) 14%, var(--papel)); color: var(--malaquita-texto); }

/* Los pozos: el mismo dibujo en la ficha del alumno y en la tabla del profesor. */
.pozo {
  display: inline-block;
  flex: none;
  width: var(--pozo, 20px);
  height: var(--pozo, 20px);
  padding: 0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--tinte) 55%, var(--crema));
  background: transparent;
  transition: background-color .25s, border-color .25s;
}
.pozo.lleno { background: var(--tinte); border-color: var(--tinte); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}