/* =============================================================
   nota-pau — lo propio de la calculadora de selectividad.

   Esta hoja se carga DESPUÉS de ../styles.css y solo añade lo que
   allí no existe. El color, la tipografía, la cabecera, el pie, los
   botones, la FAQ y la rejilla de herramientas vienen de la hoja
   común: aquí no se repite ni un token ni un componente compartido.

   Antes esta calculadora traía su propio sistema de diseño entero
   (paleta índigo, Inter para todo, cabecera propia). Se ha tirado:
   una calculadora que no se parece a las demás del sitio parece de
   otra web.

   1. Tokens locales · 2. La tarjeta · 3. Ponderables · 4. Resultado
   5. Comparador · 6. Tabla de grados · 7. Secciones · 8. Responsive
   ============================================================= */

/* =============================================================
   1. Tokens locales

   Solo el rojo, que la hoja común no tiene: --warm es naranja de
   «ojo con esto», y una nota imposible o un grado fuera de alcance
   necesitan un rojo de verdad para no confundirse con el ámbar de
   «estás al límite». Los dos tonos son los tres estados de esta
   página: entro (verde = acento del sitio), límite (ámbar = --warm)
   y fuera (rojo = este).
   ============================================================= */
:root {
  --np-rojo:      #a5271b;
  --np-rojo-tint: #fbecea;
}

@media (prefers-color-scheme: dark) {
  :root {
    --np-rojo:      #f0938a;
    --np-rojo-tint: #3a1a16;
  }
}

/* =============================================================
   2. La tarjeta de la calculadora

   .tool-card, .field, .hint, .btn y el resto de piezas de formulario
   son las de la hoja común. Lo que se añade aquí son los bloques
   numerados (1 · bachillerato, 2 · fase obligatoria, 3 · voluntaria),
   que ninguna otra calculadora del sitio tiene porque ninguna otra
   pide las notas en tres tandas con pesos distintos.
   ============================================================= */
.bloque { padding-block: 1.15rem; border-top: 1px solid var(--line); }
.bloque:first-of-type { padding-top: 0; border-top: 0; }

.bloque-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; margin-bottom: .85rem; flex-wrap: wrap;
}

/* Es un <h2> por estructura, pero dentro de la tarjeta es un rótulo
   de sección, no un titular: la Fraunces de 1,85rem de la hoja común
   aquí gritaría por encima del propio resultado. */
.bloque-titulo {
  font-family: var(--sans);
  font-size: 1rem; font-weight: 700;
  letter-spacing: -0.01em;
}
.opcional { font-weight: 500; color: var(--ink-faint); }

.bloque-peso {
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: .2rem .55rem; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent);
  white-space: nowrap;
}

/* --- Campos ---
   .campo replica .field de la hoja común (mismo hueco, misma etiqueta)
   pero con el input dibujado directamente, sin el envoltorio .input-wrap:
   aquí hay veinte campos y ninguno lleva unidad al lado, así que el
   envoltorio solo añadiría un <div> por campo. */
.campo { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.campo label {
  font-size: .82rem; font-weight: 600;
  color: var(--ink-soft); letter-spacing: .005em;
}

.campo input, .campo select {
  width: 100%;
  padding: .62rem .75rem;
  font: inherit; font-size: 1rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.campo select { cursor: pointer; }
.campo input:focus, .campo select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.campo input::placeholder { color: var(--ink-faint); opacity: .8; font-weight: 400; }

/* Una nota imposible se marca en rojo. El color no va solo: quien no
   distingue el rojo también ve el fondo teñido y el mensaje de debajo
   dice qué campo es. */
.campo input[aria-invalid="true"] {
  border-color: var(--np-rojo);
  background: var(--np-rojo-tint);
}
.campo input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--np-rojo) 22%, transparent);
}

.campo-ayuda { font-size: .76rem; color: var(--ink-faint); line-height: 1.45; }
.campo-ayuda-suelta { margin-bottom: .85rem; }
.campo-ancho { grid-column: 1 / -1; }

/* --- Segmentado: «tengo las notas» / «ya sé mi media» --- */
.segmentado {
  display: flex; gap: 4px; padding: 4px; margin-bottom: .95rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.seg-btn {
  flex: 1; padding: .5rem .6rem; border-radius: 999px;
  font-size: .84rem; font-weight: 600; color: var(--ink-soft);
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.seg-btn:hover { color: var(--accent); }
.seg-btn.is-activo {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 2px rgba(20, 32, 28, .08);
}

.rejilla-examenes { display: grid; gap: .8rem; }

/* Un botón que ocupa el ancho porque continúa una lista: «Mostrar más
   grados» va debajo de la tabla y tiene que leerse como su pie. */
.btn--bloque { width: 100%; margin-top: .9rem; }

/* =============================================================
   3. Fase voluntaria: las filas ponderables
   ============================================================= */
.ponderables { display: flex; flex-direction: column; gap: .75rem; }

.pond-fila {
  display: grid;
  grid-template-columns: 1fr 4.5rem 4.5rem;
  gap: .5rem;
  align-items: end;
  padding: .75rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
}
/* Las dos que de verdad suman se encienden. Es la respuesta visual a la
   pregunta que trae aquí a todo el mundo: «¿cuáles me cuentan?». */
.pond-fila.is-usada {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-tint);
}
.pond-fila.is-descartada { opacity: .62; }

.pond-fila .campo input, .pond-fila .campo select { background: var(--surface); }

.pond-aporte {
  grid-column: 1 / -1;
  font-size: .78rem; font-weight: 600; color: var(--ink-faint);
  min-height: 1.1em;
}
.pond-aporte.es-suma { color: var(--accent); }
.pond-aporte.es-nula { color: var(--ink-faint); font-weight: 500; }

.acciones-fila { margin-top: .9rem; display: flex; flex-direction: column; gap: .6rem; }
.nota-ponderacion {
  font-size: .78rem; color: var(--ink-faint); line-height: 1.5;
  padding: .6rem .8rem;
  border-left: 3px solid var(--line-strong);
  background: var(--surface-2);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}

/* =============================================================
   4. El resultado
   ============================================================= */
.resultado { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.resultado-vacio {
  color: var(--ink-faint); font-size: .9rem;
  text-align: center; padding: .5rem 0;
}

.notas-grandes { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.nota-caja {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .95rem .6rem; border-radius: var(--radius-s);
  background: var(--surface-2); border: 1px solid var(--line);
}
.nota-caja-destacada {
  background: var(--accent-tint);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.nota-etiqueta {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint);
  text-align: center;
}
/* La cifra grande va en la Fraunces del sitio, igual que el .result-figure
   de todas las demás calculadoras: es LA cifra de la página. */
.nota-valor {
  font-family: var(--display);
  font-size: clamp(1.9rem, 7vw, 2.5rem); font-weight: 600;
  line-height: 1.05; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  transition: color .2s var(--ease-out);
}
.nota-caja-destacada .nota-valor { color: var(--accent); }
.nota-pie { font-size: .72rem; color: var(--ink-faint); }

.estado {
  margin-top: .85rem; padding: .6rem .8rem; border-radius: var(--radius-s);
  font-size: .87rem; font-weight: 500;
}
.estado.es-ok    { background: var(--accent-tint); color: var(--accent); }
.estado.es-aviso { background: var(--warm-tint);   color: var(--warm); }
.estado.es-mal   { background: var(--np-rojo-tint); color: var(--np-rojo); }

.desglose {
  margin-top: .85rem; padding: .8rem .9rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-size: .84rem; color: var(--ink-soft);
}
.desglose-linea {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .22rem 0;
}
.desglose-linea + .desglose-linea { border-top: 1px dashed var(--line); }
.desglose-linea b { font-variant-numeric: tabular-nums; color: var(--ink); }
.desglose-total {
  margin-top: .3rem; padding-top: .4rem;
  border-top: 2px solid var(--line-strong); font-weight: 700;
}

/* --- Guardado opcional de las notas ---
   Guardar las notas es una decisión del alumno, no algo que pase solo.
   La casilla y el botón de borrar van juntos porque son la misma idea:
   quien manda sobre estos datos es quien los escribe. */
.guardado-fila {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .6rem 1rem;
  margin-top: 1.15rem; padding-top: .95rem;
  border-top: 1px solid var(--line);
}
.casilla {
  display: flex; align-items: center; gap: .5rem;
  font-size: .88rem; color: var(--ink-soft);
  cursor: pointer; user-select: none; min-width: 0;
}
.casilla input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem; flex: none;
  accent-color: var(--accent); cursor: pointer;
}
.casilla:hover { color: var(--ink); }
.guardado-nota {
  margin: .5rem 0 0; font-size: .78rem; line-height: 1.5;
  color: var(--ink-faint);
}

/* --- Avisos --- */
.aviso { padding: .7rem .9rem; border-radius: var(--radius-s); font-size: .88rem; }
.aviso-error { background: var(--np-rojo-tint); color: var(--np-rojo); }

/* =============================================================
   5. El comparador de grados
   ============================================================= */
.filtros { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: .8rem; }
.filtros-fila { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }

.comp-estado {
  padding: 1.6rem 1rem; text-align: center;
  color: var(--ink-faint); font-size: .9rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}

/* Lo pinta el JS como un <span> dentro del <p id="comp-resumen">, asi que
   sin display:block el relleno no empuja nada y la caja se monta encima de
   los filtros. */
.resumen-destacado {
  display: block;
  padding: .95rem 1.1rem; margin: .35rem 0 1.1rem;
  background: var(--accent-tint);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius-s);
  font-size: .95rem; color: var(--ink);
}
.resumen-destacado b {
  font-family: var(--display); font-size: 1.2rem; font-weight: 600;
  color: var(--accent);
}

/* El parrafo que la contiene es un .section-lede (56ch): bien para la frase
   suelta de «mostrando N grados», estrecho para la caja. */
#comp-resumen { max-width: 64ch; }

.fuente-nota {
  margin-top: .95rem; font-size: .76rem;
  color: var(--ink-faint); line-height: 1.5;
}

/* =============================================================
   6. La tabla de grados

   No usa .amort-table de la hoja común: aquella alinea a la derecha
   por defecto y espera celdas de una línea, y aquí cada fila lleva
   tres renglones (grado, universidad, procedencia del dato).
   ============================================================= */
.tabla-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabla-grados { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla-grados th {
  text-align: left; padding: .55rem .6rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.tabla-grados td {
  padding: .7rem .6rem; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tabla-grados tbody tr:hover { background: var(--surface-2); }
.col-num { text-align: right; }

.grado-nombre { font-weight: 600; color: var(--ink); line-height: 1.3; }
.grado-uni { font-size: .8rem; color: var(--ink-soft); margin-top: .12rem; }
.grado-meta { font-size: .73rem; color: var(--ink-faint); margin-top: .14rem; }
.grado-enlace { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.corte-actual { font-weight: 700; font-variant-numeric: tabular-nums; }
.corte-previo { font-size: .73rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; margin-top: .1rem; }
.corte-suave { font-weight: 600; color: var(--ink-faint); font-size: .84rem; }
.fila-sindato { opacity: .72; }

/* Sube = se ha puesto más difícil = rojo. Baja = más accesible = verde.
   Al revés de lo que pide el instinto bursátil, y es lo correcto aquí. */
.tendencia { font-weight: 700; }
.tendencia.sube  { color: var(--np-rojo); }
.tendencia.baja  { color: var(--accent); }
.tendencia.igual { color: var(--ink-faint); }

.margen {
  display: inline-block; padding: .22rem .55rem; border-radius: 999px;
  font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.margen.entro   { background: var(--accent-tint);  color: var(--accent); }
.margen.limite  { background: var(--warm-tint);    color: var(--warm); }
.margen.fuera   { background: var(--np-rojo-tint); color: var(--np-rojo); }
.margen.sindato { background: var(--surface-2);    color: var(--ink-faint); font-weight: 600; }

/* Sello de procedencia del dato: el estudiante tiene derecho a saber si la
   cifra sale del folleto oficial de su comunidad o del Ministerio. */
.sello {
  display: inline-block; padding: .1rem .4rem; border-radius: 4px;
  font-size: .67rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; cursor: help;
}
.sello-oficial    { background: var(--accent-tint); color: var(--accent); }
.sello-ministerio { background: var(--surface-2); color: var(--ink-faint); }

/* =============================================================
   7. Secciones propias
   ============================================================= */

/* Los tres pasos. Mismo envase que el .step de la hoja común; lo que
   cambia es que aquí el icono es un número, porque el orden importa. */
.pasos {
  list-style: none; padding: 0; margin-top: 1.2rem;
  display: grid; gap: 1rem;
}
.pasos li {
  padding: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.paso-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-bottom: .6rem;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font-size: .8rem; font-weight: 700;
}
.pasos h3 { margin-bottom: .3rem; }
.pasos p { font-size: .89rem; color: var(--ink-soft); }

.lista-marcada { margin: 0 0 .9rem 1.1rem; color: var(--ink-soft); }
.lista-marcada li { margin-bottom: .35rem; }

/* Ritmo vertical de las secciones que no usan una clase -section de la hoja
   comun: mismo hueco que .prose-section y compania. */
.seccion { padding-top: clamp(2.4rem, 7vw, 3.6rem); }
.seccion > h2 { margin-bottom: .55rem; }

/* Las dos lineas de procedencia del dato en el pie. Van ahi y no en el
   cuerpo porque son la ficha tecnica de la pagina, no su contenido. */
.footer-fuente {
  font-size: .78rem; color: var(--ink-faint);
  line-height: 1.5; max-width: 74ch;
}

/* =============================================================
   8. Responsive (mobile-first)
   ============================================================= */
@media (min-width: 540px) {
  .rejilla-examenes { grid-template-columns: 1fr 1fr; }
  .pond-fila { grid-template-columns: 1fr 5rem 5rem auto; align-items: end; }
  .pond-aporte { grid-column: auto; text-align: right; min-width: 6.5rem; padding-bottom: .55rem; }
  .acciones-fila { flex-direction: row; align-items: center; gap: 1rem; }
  .nota-ponderacion { flex: 1; }
}

@media (min-width: 720px) {
  .filtros-fila { grid-template-columns: repeat(3, 1fr); }
  .pasos { grid-template-columns: repeat(3, 1fr); }
  .tabla-grados { font-size: .92rem; }
}

@media (min-width: 960px) {
  .filtros-fila { grid-template-columns: repeat(5, 1fr); }
}