/* ============================================================
   Anatomia de un ejercicio de parcial resuelto
   ------------------------------------------------------------
   Capa: componente

   POR QUE ESTO ES UN COMPONENTE COMUN Y NO LA FIRMA DE PRAXIS
   El marcado de estos bloques se escribe dentro de $contenido,
   o sea dentro del apunte. Y el diseno de un apunte se cambia
   desde el panel con un click. Si estas clases vivieran solo en
   css/apuntes/layouts/praxis/, el mismo parcial abierto en
   Premium saldria como una pila de <div> sin estilo — que es
   exactamente el problema que la Fase 7 arreglo cuando saco los
   var(--gold) del contenido.

   Asi que la forma vive aca, con SOLO tokens del contrato, y le
   llega a los cinco layouts. Praxis le pone su identidad encima
   desde su firma, que se carga despues.

   CERO TOKENS NUEVOS. El semaforo del contrato (§1.5) ya existia
   para esto:
     resultado        --estado-ok
     error frecuente  --estado-aviso
     recordatorio     --accent-dim / --border-2
   Las mezclas usan color-mix() con un fallback plano declarado
   antes: en un navegador que no la soporte, la declaracion es
   invalida y queda la superficie lisa. Se ve mas sobrio, no roto.

   El DESARROLLO no trae numeracion propia: reusa .paso y
   .paso-num de componentes/paso.css, que ya existen y ya estan
   estilados en los cinco layouts.
   ============================================================ */

/* ═══════════════════════════════════════════════════
   ROTULO DE BLOQUE — la etiqueta con la regla al lado
═══════════════════════════════════════════════════ */
.res-rot {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: .63rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--gray);
  transition: color var(--t);
}
.res-rot::after {
  content: '';
  flex: 1; height: 1px;
  background: var(--border);
  transition: background var(--t);
}

/* ═══════════════════════════════════════════════════
   FICHA DEL EXAMEN — institucion, fecha, duracion, puntaje
═══════════════════════════════════════════════════ */
.res-examen {
  display: flex; flex-wrap: wrap;
  margin: 0 0 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: background var(--t), border-color var(--t);
}
.res-examen > div {
  flex: 1 1 130px;
  padding: 12px 16px;
  border-right: 1px solid var(--border);
  transition: border-color var(--t);
}
.res-examen > div:last-child { border-right: none; }
.res-examen dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .58rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gray-light);
}
.res-examen dd {
  margin: 4px 0 0;
  font-size: .86rem; font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.res-examen dd a {
  color: var(--accent-strong);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, color var(--t);
}
.res-examen dd a:hover { border-bottom-color: currentColor; }
html.dark-mode .res-examen dd a, body.dark-mode .res-examen dd a { color: var(--accent); }

/* PDF ORIGINAL — el enunciado en blanco, en pestana nueva.
   Es el unico campo de la ficha que se clickea, asi que se viste
   de boton y no de enlace: con el resto de los campos alrededor,
   un subrayado se lee como enfasis y no como algo que se toca.
   Toma prestado el vocabulario de .res-serie a (mismo chip, mismo
   hover) para no inventar una tercera forma de "cosa clickeable"
   dentro del mismo parcial. La flecha del marcado avisa que abre
   afuera. */
.res-examen dd a.res-pdf {
  display: inline-flex; align-items: center;
  margin-top: -1px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .03em;
  color: var(--text-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  transition: border-color .2s, color .2s, background var(--t);

  /* El boton vive DENTRO de la ficha, que ya es var(--card): con
     otra superficie neutra encima quedaria invisible. En Atlas,
     --card2 contra --card daba 1.09 de contraste, o sea nada.
     Un tinte de acento lo despega en los cinco layouts y ademas
     dice "esto se toca". Fallback plano declarado antes, como el
     resto del componente: sin color-mix queda liso, no roto. */
  background: var(--bg);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.res-examen dd a.res-pdf:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}
html.dark-mode .res-examen dd a.res-pdf:hover, body.dark-mode .res-examen dd a.res-pdf:hover { color: var(--accent); }

/* ═══════════════════════════════════════════════════
   SERIE — los otros parciales de la misma materia
   Se escribe como marcado normal al principio del apunte, asi
   que funciona en cualquier layout. Praxis, ademas, lo levanta
   y lo mete adentro de su rail (ver js/apuntes/layouts/praxis.js).
═══════════════════════════════════════════════════ */
.res-serie {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  margin: 0 0 24px;
}
.res-serie-lbl {
  width: 100%;
  font-family: var(--font-mono);
  font-size: .58rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gray-light);
  margin-bottom: 2px;
}
.res-serie a {
  font-family: var(--font-mono);
  font-size: .68rem;
  text-decoration: none;
  color: var(--text-2);
  background: var(--card);
  border: 1px solid var(--border);
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  transition: border-color .2s, color .2s, background var(--t);
}
.res-serie a:hover { border-color: var(--accent); color: var(--accent-strong); }
html.dark-mode .res-serie a:hover, body.dark-mode .res-serie a:hover { color: var(--accent); }
.res-serie a.actual {
  background: var(--accent-2); border-color: var(--accent-2);
  color: var(--on-accent-2); font-weight: 500;
}
/* El FONDO se queda navy —lleva --on-accent-2 blanco encima y da
   13:1—, pero en oscuro el chip se confunde con la card, que esta
   casi en el mismo tono. El borde lo recorta sin tocar la
   superficie. */
body.dark-mode .res-serie a.actual { border-color: var(--accent); }

/* ═══════════════════════════════════════════════════
   PARTE — la subdivision a) b) c) dentro de un ejercicio
═══════════════════════════════════════════════════ */
.res-parte { margin: 0 0 26px; }
.res-parte:last-child { margin-bottom: 0; }
.res-parte-tit {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 12px;
  transition: color var(--t);
}
html.dark-mode .res-parte-tit, body.dark-mode .res-parte-tit { color: var(--accent); }
.res-parte-tit::before {
  content: '';
  width: 18px; height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════
   CABECERA DEL EJERCICIO
   Va dentro del .section-header del acordeon comun, que es un
   flex con space-between. Con estas dos clases queda
   [numero] [titulo + chips] [flecha] en los cinco layouts.
═══════════════════════════════════════════════════ */
.res-num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: .82rem; font-weight: 600;
  background: var(--accent-2); color: var(--on-accent-2);
  transition: background var(--t), color var(--t);
}
body.dark-mode .res-num { background: var(--accent-2-strong); }
.res-head-txt { flex: 1; min-width: 0; }

/* ═══════════════════════════════════════════════════
   CHIPS — tema, unidad, puntaje
═══════════════════════════════════════════════════ */
.res-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.res-chip {
  font-family: var(--font-mono);
  font-size: .61rem; letter-spacing: .05em;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card2);
  color: var(--gray);
  transition: background var(--t), border-color var(--t), color var(--t);
}
.res-chip.pts {
  color: var(--accent-strong);
  border-color: var(--border-2);
  background: var(--accent-dim);
  font-weight: 500;
}
html.dark-mode .res-chip.pts, body.dark-mode .res-chip.pts { color: var(--accent); }

/* ═══════════════════════════════════════════════════
   ENUNCIADO — lo que dice el parcial, sin tocar
═══════════════════════════════════════════════════ */
.res-enunciado {
  border-left: 3px solid var(--accent-2);
  padding: 2px 0 2px 18px;
  margin: 0 0 20px;
  transition: border-color var(--t);
}
/* En oscuro el navy da 1,29:1 sobre la card y la linea del
   enunciado directamente no se ve. Premium no redefine
   --accent-2 en oscuro; el resto de los componentes lo tapa
   igual, con --accent. */
body.dark-mode .res-enunciado { border-left-color: var(--accent); }
.res-enunciado .res-rot { color: var(--accent-2); }
html.dark-mode .res-enunciado .res-rot, body.dark-mode .res-enunciado .res-rot { color: var(--accent); }
.res-enunciado > p { font-size: 1rem; }
.res-enunciado > p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════
   RECORDATORIO — la propiedad o formula que hace falta
   No es teoria: es el minimo que hay que tener en la cabeza
   para poder seguir el desarrollo de ESTE ejercicio.
═══════════════════════════════════════════════════ */
.res-recordatorio {
  border: 1px dashed var(--border-2);
  border-radius: var(--radius);
  background: var(--accent-dim);
  padding: 15px 18px;
  margin: 0 0 20px;
  transition: background var(--t), border-color var(--t);
}
.res-recordatorio .res-rot { color: var(--accent-strong); }
.res-recordatorio .res-rot::after { background: var(--border-2); }
html.dark-mode .res-recordatorio .res-rot, body.dark-mode .res-recordatorio .res-rot { color: var(--accent); }
.res-recordatorio > p { font-size: .9rem; color: var(--text-2); }
.res-recordatorio > p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════
   DESARROLLO — contenedor de los .paso
═══════════════════════════════════════════════════ */
.res-desarrollo { margin: 0 0 20px; }
.res-desarrollo > p { font-size: .92rem; color: var(--text-2); }

/* ═══════════════════════════════════════════════════
   RESULTADO — a donde se llega. Usa el verde del semaforo.
═══════════════════════════════════════════════════ */
.res-resultado {
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 0 0 20px;
  background: var(--card);
  background: color-mix(in srgb, var(--estado-ok) 9%, var(--card));
  border: 1px solid var(--border);
  border-color: color-mix(in srgb, var(--estado-ok) 38%, transparent);
  transition: background var(--t), border-color var(--t);
}
.res-resultado .res-rot { color: var(--estado-ok); }
.res-resultado .res-rot::after {
  background: var(--border);
  background: color-mix(in srgb, var(--estado-ok) 28%, transparent);
}
.res-resultado > p,
.res-resultado > div { color: var(--text); font-size: 1rem; }
.res-resultado > p:last-child { margin-bottom: 0; }
/* Las formulas de adentro no llevan su propia caja: ya estan
   dentro de una. Sin esto, .formula-box mete un recuadro con el
   acento del layout dentro del recuadro verde. */
.res-resultado .formula-box {
  background: transparent; border: none;
  padding: 0; margin: 6px 0 0;
}
.res-resultado .formula-box:hover { transform: none; box-shadow: none; }

/* ═══════════════════════════════════════════════════
   NOTA — observacion o error frecuente
   Por defecto es una observacion (acento). El modificador
   --error la pinta con el ambar del semaforo, que es lo que
   corresponde a "aca se pierde el punto".
═══════════════════════════════════════════════════ */
.res-nota {
  border-radius: var(--radius);
  border-left: 3px solid var(--accent);
  padding: 14px 18px;
  margin: 0 0 20px;
  background: var(--card2);
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  transition: background var(--t), border-color var(--t);
}
.res-nota .res-rot { color: var(--accent-strong); }
html.dark-mode .res-nota .res-rot, body.dark-mode .res-nota .res-rot { color: var(--accent); }
.res-nota > p { font-size: .88rem; color: var(--text-2); }
.res-nota > p:last-child { margin-bottom: 0; }

.res-nota.res-nota--error {
  border-left-color: var(--estado-aviso);
  background: var(--card2);
  background: color-mix(in srgb, var(--estado-aviso) 8%, var(--card));
}
.res-nota.res-nota--error .res-rot,
html.dark-mode .res-nota.res-nota--error .res-rot,
body.dark-mode .res-nota.res-nota--error .res-rot { color: var(--estado-aviso); }

/* Ultimo bloque de un cuerpo de ejercicio: sin margen colgando. */
.section-body > .res-nota:last-child,
.section-body > .res-resultado:last-child,
.res-parte > *:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════
   MOBILE
═══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .res-examen > div { flex-basis: 50%; }
  /* En el telefono este boton se toca con el dedo, y en Praxis es
     ademas el unico lugar donde vive: el del rail no se ve porque
     la hoja arranca cerrada. Con el padding de escritorio medía
     29 px de alto, bastante menos que los 44 recomendados. */
  .res-examen dd a.res-pdf { padding: 11px 14px; }
  .res-enunciado { padding-left: 14px; }
  .res-recordatorio,
  .res-resultado,
  .res-nota { padding: 13px 15px; }
}